@import url("reset.css");

  /*
Colores:
verde  mu fuerte:#202602;
verde  fuerte:#39410e;
verde :#515a1f;
verde  claro:#646c35;
verde mas claro:#909a59;

carne mu fuerte:#8b5138;
carnefuerte:#ad7458;
carne:#ce9d88;
carne claro:#f4cfc0;
carne mas claro:#ffede5;

azul mu fuerte:#3f5260;
azul fuerte:#586874;
azul:#75818a;
azul claro:#969ea3;
azul mas claro:#cdd0d2;
  */

  /*
fuentes:
font-family: 'PT Sans', sans-serif;
font-size: 46px;
font-family: 'Playfair Display', serif;
font-size: 16px;
  */


  /*elementos generales*/
h1 {
text-align: center;
font-family: 'PT Sans', Arial, Helvetica, sans-serif,"Trebuchet MS";
font-size: 2.8em;
color:#3f5260;
  }

h2 {
font-family: 'PT Sans', Arial, Helvetica, sans-serif,"Trebuchet MS";
font-size: 1.2em;
color: #586874;
}

h3 {
text-align: left;
font-size: 1.1 em;
font-family: 'Playfair Display', Arial, Helvetica, sans-serif,"Trebuchet MS";
color: #75818a;
  }

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

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

p {
  font-size: 1em;
  font-family: 'Playfair Display', Arial, Helvetica, sans-serif,"Trebuchet MS";
  color: #909a59;
  text-shadow: 3px  0px 0px #39410e,
               0px  3px 0px #39410e,
              -3px  0px 0px #39410e,
               0px -3px 0px #39410e;
}

header {
background: #f4cfc0; /* Old browsers */
background: #1a3855 url("../img/fondoheadavj.png") center;
width: 100%;
display:inline-block;
text-shadow: 3px  0px 0px #f4cfc0,
               0px  3px 0px #f4cfc0,
              -3px  0px 0px #f4cfc0,
               0px -3px 0px #f4cfc0;
  }

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

a{
   text-decoration: none;
  }


.titutex{
  height:100px;
  padding:30px;
  text-align: left;
}
.avj{
  height:100px;
  float:left;
  padding:10px;
  display:inline-block;
}

.logo{
  height:100px;
  float:left;
  padding:10px;
  display:inline-block;
filter: sepia(0%);
-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 img {
filter: sepia(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 #909a59;
  }


  /*body*/

body {
     background:#39410e;
background: #1a3855 url("../img/fondoavj.png") center;
      margin: 0 auto;
      text-align: center;
      overflow-x:hidden;
    }

/*section*/

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

section {
  display:inline-block;
     width:65%;
     padding:1%;
     border-radius:20px;
     -ms-border-radius:10px;
     -moz-border-radius:10px;
     -webkit-border-radius:10px;
    border:3px solid #586874;
    background: rgba(205,208,210,0.7);
    box-shadow: 0px 5px 3px #000;
    box-shadow: 0px 5px 3px #555;
     -moz-box-shadow: 0px 5px 3px #555;
     -webkit-box-shadow: 0px 5px 3px #555;
     box-sizing:border-box;
margin-top:1%;
     margin-bottom:2%;
   }

/*article*/

article {
width:46%;
     padding:2%;
     margin-right:10px;
     margin-left:10px;
     margin-bottom:25px;
     border-radius:10px;
     -ms-border-radius:10px;
     -moz-border-radius:10px;
     -webkit-border-radius:10px;
     box-sizing:border-box;
    display:inline-block;
    border:3px solid #8b5138;
    background: #ffede5;
     -moz-box-shadow: 0px 5px 3px #000;
     -webkit-box-shadow: 0px 5px 3px #000;
     box-sizing:border-box;

   }


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: #1a3855; /* Old browsers */
width: 100%;
position: absolute;
bottom: 0;
   }
.azul{
border: 1px solid #969ea3;
}

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

footer h2{
float:left;
margin-top:10px;
margin-right:20px;

color: #75818a;
}

footer h4{
margin-top:10px;
float:right;
}

.menurs img {
margin-top:10px;
float:left;
margin-right:25px;
padding-bottom:2%;
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:90%;
     max-width:1200px;
     margin:0 auto;
     overflow:hidden;
   }

   h1 {
      font-size: 2.6em;
   }

   h2{
     font-size: 1.2em;
   }
   h3{
     font-size: 1em;
   }
   p {
     font-size: 1em;
padding-top:5px;
padding-bottom:5px;
   }
section{
width:95%;
}
.centrar {
width:70%;
}
article{
width:46%;
     padding:1%;
     margin-right:5px;
     margin-left:5px;
     margin-bottom25px;
}


}



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

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

   h1 {
      font-size: 2em;
   }

   h2{
     font-size: 1.2em;
   }
   h3{
     font-size: 1em;
   }
   p {
     font-size: 1em;
padding-top:5px;
padding-bottom:5px;
   }
section{
width:90%;
padding:0.5%;
}
article{
width:46%;
     padding:1%;
     margin-right:5px;
     margin-left:5px;
     margin-bottom25px;
}
.centrar {
width:90%;
}
.menurs img {
  width:30px;
  height:30px;
}
footer {
padding-bottom:1%;
position: relative;
bottom:0;
}

}

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

   h1 {
      font-size: 2em;
   }

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

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

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

.centrarft{
width:100%;
display:grid;
justify-content: center;
}
.menurs img {
margin-right:33px;
  width:30px;

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

}

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

   h1 {
      font-size: 2em;
   }

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

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

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

.centrarft{

width:95%;
clear:both;
justify-content: center;
}
.menurs img {
margin-right:33px;
  width:30px;

}
footer {
padding-bottom:0.1%;
}
footer h2{
     font-size: 1.2em;
}
footer h4{
margin-top:30px;
float:right;
}
  }

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

   h1 {
      font-size: 1.2em;
   }

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

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

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

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

.menurs img {
margin-right:20px;
  width:30px;
}
footer {
padding-bottom:0.3%;
}

footer h2 {
     font-size: 0.9em;
}

footer h4{
margin-top:30px;
float:right;
}
  }