@import url('reset.css');
@import url('fuentes.css');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/*---- Estilos Generales ----*/
body {
  background-color: #C3CDE6;
}

/*--- header ---*/

header{
      height: 90px;  
      background-color: #5490c4; /* Para navegadores que no soportan Gradientes */
      background-image: linear-gradient(#0066FF, #8FD8D8, #4997D0);
      margin:0;
      padding:5px 0;
      
    }

header .imagen img{
      height: 80px;
      margin-top: 0;


    }
header h1{
        text-align: center;
        color: #000000;
        font-size: 45px;
    }


.menu{
     
     font-size: 22px;
     margin-top: 30px;
}

.menu ul li{
  display: inline;
}

.menu ul li a{
  
  text-align: center;
  padding: 10px 5px;
  text-decoration: none;
  margin: 10px; 
  color: #000000;
}

.menu ul li a:hover{
  
  color: #CE1126;

}




/*----Menu ----*/

ul {
  list-style-type: none;
  padding: 0px;
  margin: 0px;
  
  color: white;

}

li {
  color: white;
  
}

.central li a {
  text-decoration: none;
}


     

    /*---- Carrusel ----*/

    .carrusel{
      
      margin-top: 90px;
      
    }

    .carousel-inner > .item > img,
     .carousel-inner > .item > a > img {
  
  }

 


  

  

  /* ---- Principal  ----*/

  .principal .contorno {
    
    width: 280px;
    height: 390px;
    padding: 10px;
    border-radius: 9px;
   
        
  }

  .principal .contorno:hover {
    background-color: #ffffff;
    width: 280px;
    height: 490px;
    padding: 10px;
    border-radius: 9px;
    border: 1px solid #000;
    box-shadow: 0 0 2px 3px rgba(0, 0, 0, 0.5);
        
  }


  .principal .tarjeta {
    
    width: 100%;
    height: 260px;
    padding: 50px;
    border-radius: 9px;
        
  }



  .principal .tarjeta img{
      display: block;
      margin-right: auto;
      margin-left: auto;
      margin-top: auto;
      margin-bottom: auto;
      width: 140px;
      height: 200px;    
      border-radius: 9px;
  }

  .principal .tarjeta img:hover{
      display: block;
      margin-right: auto;
      margin-left: auto;
      margin-top: auto;
      margin-bottom: auto;
      width: 170px;
      height: 200px;    
      border-radius: 9px;
      box-shadow: 0 0 2px 3px rgba(0, 0, 0, 0.5);
  }

  .principal  .titulo h1{
    text-align: center;
    font-size: 16px;
    color: #000000;
  }

  .principal  .titulo p{
    text-align: left;
    font-size: 15px;
    color: #000;
  }

  .principal  .enlace{
        
    text-align: center;
    
  }

  .principal  .titulo h2{
    text-align: center;
    
    color: #000;
    
  }

  .principal  .titulo h3{
    text-align: left;
    font-size: 13px;
    color: #000;
    
  }

  .principal  .titulo h4{
    text-align: center;
    
    color: #000;
    
  }


  .principal  .titulo a:hover{
    color: #C6E112;
    
  }

  .principal .titulo {
    
    width: 100%;
    border-radius: 9px;    
    padding: 10px;


  }

/*  Patrocinio */

.principal .alrededor{
    
    width: 300px;
    height: 380px;
    padding: 10px;
    
    
        
  }

  /* .principal .alrededor:hover {
    background-color: #C5E17A;
    width: 100%;
    height: 450px;
    padding: 10px;
    border-radius: 9px;
    border: 1px solid #000;
    box-shadow: 0 0 2px 3px rgba(0, 0, 0, 0.5);
        
  }*/

.principal .tarjeta_patrocinio {
   
    width: 100%;
    height: 250px;
    padding: 50px;
    /* border-radius: 9px; */
    /* border-bottom:  1px solid #ffffff; */
    
        
  }

  .principal .tarjeta_patrocinio img{
    display: block;
      margin-right: auto;
      margin-left: auto;
      margin-top: auto;
      margin-bottom: auto;
      width: 100%;
      height: 100%;
      /* border-radius: 9px; */

    

  }

  .principal .tarjeta_patrocinio img:hover{
      display: block;
      margin-right: auto;
      margin-left: auto;
      margin-top: auto;
      margin-bottom: auto;
      width: 100%;
      height: 120%;
      border-radius: 9px;
      box-shadow: 0 0 2px 3px rgba(0, 140, 186, 0.5);

  }



.principal .patrocinio {
    
    width: 100%;
    border-radius: 9px;
    /* border-top: 1px solid #000000; */
    
    padding: 20px;

  }

  .principal .patrocinio h1{
    color: #000;
  }



  .principal .enlace .button {
    background-color: #006847;
    border: none;
    color: white;
    padding: 5px 5px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 4px;
}

  .principal .enlace .button:hover{
    background-color: #5f9ea0;
    color: #000;
  }


  


  
  
   /* ----- patrocinio ----- */

  .principal .patrocinio .tarjeta {
    width: 300px;
    
  }

  .principal .patrocinio .tarjeta img{
    width: 100%;
    height: 155px;
    
  }

  .principal .patrocinio .tarjeta h1{
    font-size: 10px;
    padding: 5px;
    
  }

  .principal .patrocinio .tarjeta p{
    font-size: 38px;
    text-align: justify;
    color:#000111;
    padding: 0;
  }
  

  .main-fmb .title{
    margin-top: 90px;
  }

  /* ---- iconos  ----*/
  .iconos{
    width: 100%;
    height: auto;
    background-color: #0A0A0D;
  }

  .iconos .thumb img{
    width: 100px;
    height: 100px;
  }


    /*----  media query ----*/
    @media screen and (max-width:768px){
      .notice .thumb{
        width: 100%;
        margin-bottom: 20px;
        margin-right: 0;
      }
    }



/*---- footer ----*/

footer{
  width: 100%;
  color: #ffffff;
  background-color: #0A0A0D;
  padding: 30px;
  opacity: 0.9;

}

footer .left-footer{
  padding: 10px;
}

footer .center-footer{
  padding: 10px;
}

footer .right-footer{
  padding: 10px;
}

/* iconos */

footer .iconos .thumb img{
    width: 50px;
    height: 50px;

  }

  footer .contador{
    background-color: #555;
    width: 120px;
    height: 20px;
    color: #000;
    font-size: 13px;
    bottom: 0px;
    border: 1px solid #000;
  }