@import url("reset.css");

  /*
Colores:
azul mu fuerte:#202f58;
azul fuerte:#1b3b72;
azul :#104d97;
azul  claro:#3662a0;
azul mas claro:#597db3;6fa1d8

amarillo mu fuerte:#8d6913;
amarillo fuerte:#b4860f;
amarillo :#e4ad13;
amarillo claro:#f1c243;
amarillo mas claro:#ffd970;

naranja mu fuerte:#8d4913;
naranja fuerte:#b46016;
naranja:#e47d15;
naranja claro:#f29c45;
naranja mas claro:#f9b671;
  */

  /*
fuentes:
font-family: 'Lato', sans-serif;
font-size: 46px;
font-family: 'Catamaran', sans-serif;
font-size: 16px;
  */


  /*elementos generales*/
h1 {
text-align: center;
font-family: 'Lato', Arial, Helvetica, sans-serif,"Trebuchet MS";
font-size: 2em;
color:#f1c243;
  }

h2 {
font-family: 'Lato', Arial, Helvetica, sans-serif,"Trebuchet MS";
font-size: 1.5em;
color: #ffd970;
text-shadow: 0px 1px 5px #000;
-moz-text-shadow: 0px 1px 5px #000;
-webkit-text-shadow: 0px 1px 5px #000;
}

h3 {
text-align: left;
font-size: 0.9em;
font-family: 'Catamaran', Arial, Helvetica, sans-serif,"Trebuchet MS";
color: #f9b671;
  }

  /* texto Footer*/
h4 {
font-family: 'Catamaran', Arial, Helvetica, sans-serif,"Trebuchet MS";
font-size: 0.9em;
color: #f9b671;
text-shadow: 0px 1px 5px #000;
-moz-text-shadow: 0px 1px 5px #000;
-webkit-text-shadow: 0px 1px 5px #000;
clear:both;
  }

  /*Contador*/
h5 {
float:left;
font-family: 'Catamaran', Arial, Helvetica, sans-serif,"Trebuchet MS";
font-size: 0.9em;
  }

p {
  font-size: 1.1em;
  font-family: 'Catamaran', Arial, Helvetica, sans-serif,"Trebuchet MS";
  color: #f9b671;
  text-shadow: 3px  0px 0px #39410e,
               0px  3px 0px #39410e,
              -3px  0px 0px #39410e,
               0px -3px 0px #39410e;
}

header {
background-color: rgba(32,47,88,0.5);
width: 100%;
display:inline-block;
  }

  /*header*/
.centrar{
  padding:10px;
  margin:0 auto;
  width: 50%;
  display: block;
  text-align: center;
}
a{
   text-decoration: none;
  }


.titutex{
  padding:1%;
  text-align: left;

}
.avj{
  height:100px;
  padding:10px;
  display:inline-block;
}

a:hover article img {
filter: opacity(100%);
  img-shadow: 3px  0px 0px #39410e,
               0px  3px 0px #39410e,
              -3px  0px 0px #39410e,
               0px -3px 0px #39410e;
text-shadow: 0px 1px 5px #000;
    -moz-text-shadow: 0px 1px 5px #000;
    -webkit-text-shadow: 0px 1px 5px #000;
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
-o-transition: all 0.4s ease-out;
-ms-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
  }

hr {
margin:0;
border: 2px solid #597db3;
  }


  /*body*/

body {
     background:#1b3b72;
background: #1b3b72 url("../img/FondoWL.jpg") center;
      margin: 0 auto;
      text-align: center;
      overflow-x:hidden;

    }

/*section*/

.wrap {
width: 80%;
display: inline-block;
margin:0 auto;
margin-top:5px;
overflow:hidden;
}

section {
margin-top:1%;
margin-bottom:1%;
  display:inline-block;
     width:97%;
     padding:1%;
     border-radius:10px;
     -ms-border-radius:10px;
     -moz-border-radius:10px;
     -webkit-border-radius:10px;
    background-color: rgba(32,47,88,0.7);
     box-sizing:border-box;
}

/*article*/

article {
margin-left:auto;
margin-right:auto;
display:inline-block;
margin:0.5%;
width:23%;
padding:1%;
border-radius:10px;
-ms-border-radius:20px;
-moz-border-radius:20px;
-webkit-border-radius:20px;
box-sizing:border-box;

border:2px solid #ffd970;
background: #8d4913;
box-shadow: 0px 5px 4px #000;
-moz-box-shadow: 0px 5px 4px #000;
-webkit-box-shadow: 0px 5px 4px #000;
box-sizing:border-box;
   }

.menutg img {
width:100%;
margin-top:10px;
float:left;
margin-bottom:10px;
}

.menutg img:hover{
filter: sepia(100%);
text-shadow: 0px 1px 5px #000;
    -moz-text-shadow: 0px 1px 5px #000;
    -webkit-text-shadow: 0px 1px 5px #000;
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
-o-transition: all 0.4s ease-out;
-ms-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
}


a article{
   text-decoration:none;
 }

a:hover article{
    border:3px solid #ffede5;
    background: #ad7458;
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
-o-transition: all 0.4s ease-out;
-ms-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
}

a:hover article h2{
  color: #cdd0d2;
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
-o-transition: all 0.4s ease-out;
-ms-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
}

a:hover article h3{
  color: #ffede5;
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
-o-transition: all 0.4s ease-out;
-ms-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
}

 /*footer*/

footer {
background: #8d4913; /* Old browsers */
width: 100%;
   }
.azul{
border: 1px solid #e4ad13;
}

.centrarft{
width:95%;
clear:both;
display: inline-block;
}

footer h2{
float:left;
margin-top:10px;
margin-right:20px;
color: #e4ad13;
}

footer h4{
margin-top:1%;
margin-bottom:2%;
float:right;
}

.menurs img {
height:4%;
float:left;
margin-right:25px;
margin-bottom:10px;
filter: opacity(100%);
}

.menurs img:hover{
filter: opacity(50%);
text-shadow: 0px 1px 5px #000;
    -moz-text-shadow: 0px 1px 5px #000;
    -webkit-text-shadow: 0px 1px 5px #000;
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
-o-transition: all 0.4s ease-out;
-ms-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
}

/*media screen*/

@media screen and (max-width:1370px) {
  .wrap{
     width:70%;
     max-width:1200px;
     margin:0 auto;
     overflow:hidden;
   }

   h1 {
      font-size: 1.5em;
   }

   h2{
     font-size: 1.3em;
   }
   h3{
     font-size: 1em;
   }
   p {
     font-size: 1em;
   }
section{
width:98%;
}
.centrar {
width:70%;
}
article{
width:32%;
}
.menurs img {
margin-top:2%;
height:4%;
}

}



@media screen and (max-width:1100px) {

  .wrap{
     width:90%;
     max-width:1200px;
     margin:0 auto;
     overflow:hidden;
   }

   h1 {
      font-size:1.5em;
   }

   h2{
     font-size: 1em;
   }

   h3{
     font-size: 0.8em;
text-align:center;
   }

   p {
     font-size: 0.8em;
padding-top:5px;
padding-bottom:5px;
   }

section{
width:90%;
padding:0.5%;
}

article{
width:46%;
margin-left:1%;
margin-right: 1%;
     padding:1%;
     margin-bottom:2%;
}

.menutg img {
float:none;
height:25%;
width:auto;
}

.titutex{
text-align:center;
}

.centrar {
width:90%;
}
.menurs {
margin-top:1%;
clear:both;
}

.menurs img {
height:5%;
margin-right:10px;
margin-bottom:10px;
}

footer {
padding-bottom:1%;
}

}

@media screen and (max-width:800px) {
  .wrap{
     width:90%;
     max-width:1200px;
     margin:0 auto;
     overflow:hidden;
   }

   h1 {
      font-size: 1em;
   }

   h2{
     font-size: 0.8em;
   }
   h3{
     font-size: 0.7em;
   }
   p {
     font-size: 0.7em;
padding-top:5px;
padding-bottom:5px;
   }
section{
width:90%;
     padding-top:3%;
}
article{
width:90%;
     padding:1%;
     margin-bottom:3%;
}
.centrar {
width:90%;
}

.menutg img {
height:20%;
}

footer {
width: 100%;
position: sticky;
   }

.azul{
border: 1px solid #969ea3;
  text-align: center;
}

.centrarft{
width:95%;
justify-content:center;
}

.menurs{
clear:both;
padding:2%;
}

.menurs img {
height:3.5%;
margin-right:10px;
margin-bottom:20px;
}

footer {
padding-bottom:0.1%;
}
footer h4{
margin-top:30px;
float:right;
}

}

@media screen and (max-width:550px) {

.avj{
  height:50px;
  padding:10px;
  display:inline-block;
}

  .wrap{
     width:90%;
     max-width:1200px;
     margin:0 auto;
     overflow:hidden;
   }

   h1 {
      font-size: 1em;
   }

   h2{
     font-size: 1em;
   }

   h3{
     font-size: 0.8em;
   }

   p {
     font-size: 0.8em;
padding-top:5px;
padding-bottom:5px;
   }

section{
width:90%;
     padding-top:3%;
}

article{
width:90%;
     padding:0.5%;
     margin-bottom:2%;
}

.centrar {
width:90%;
}

footer {
width: 100%;
position: sticky;
   }

.azul{
border: 1px solid #969ea3;
  text-align: center;
}

.centrarft{
width:95%;
justify-content: center;
}

.menurs{
clear:both;
padding:1%;
}

.menurs img {
margin-top:0px;
height:3%;
margin-right:30px;
margin-bottom:10px;
}

footer {
padding-bottom:0.1%;
}

footer h2{
float:none;
}

footer h4{
padding-top:3%;
float:none;
}
  }

.menutg img {
height:27%;
}

@media screen and (max-width:360px) {
.avj{
  height:50px;
  padding:10px;
  display:inline-block;
}

  .wrap{
     width:90%;
     max-width:1200px;
     margin:0 auto;
     overflow:hidden;
   }

   h1 {
      font-size: 1em;
   }

   h2{
     font-size: 0.8em;
   }

   h3{
     font-size: 0.7em;
   }

   p {
     font-size: 0.6em;
padding-top:5px;
padding-bottom:5px;
   }

section{
width:98%;
     padding-top:3%;
}

article{
width:95%;
     padding:1%;
     margin-bottom:4%;
}

.centrar {
width:95%;
}

footer {
text-align:center;
width: 100%;
position: sticky;
   }

.azul{
border: 1px solid #969ea3;
  text-align: center;
}

.centrarft{
width:95%;
justify-content: center;
}
.menurs{
clear:both;
}

.menutg img {
height:20%;
}

.menurs img {
height:3%;
margin-right:30px;
margin-bottom:10px;
}

footer {
padding-bottom:1%;
}

footer h4{
margin-top:1%;
float:right;
}