@import url("reset.css");

  /*
Colores:
verde  mu fuerte:#768640;
verde  fuerte:#99a962;
verde:#bbc98e;
verde  claro:#e3edc3;
verde mas claro:#f3f8e5;

lila mu fuerte:#130222;
lila fuerte:#230b39;
lila:#381b52;
lila claro:#4a2e63;
lila mas claro:#654880;

  */

  /*
fuentes:
font-family: 'Playfair Display', serif;
font-size: 48px;
font-family: 'Source Sans Pro', sans-serif;
font-size: 16px;
  */


  /*elementos generales*/
h1 {
text-align: center;
font-family: 'Playfair Display', Arial, Helvetica, sans-serif,"Trebuchet MS";
font-size: 2.4em;
color:#bbc98e;
   text-shadow: 0px 5px 3px #130222;
   -moz-text-shadow: 0px 5px 3px #130222;
   -webkit-text-shadow: 0px 5px 3px #130222;
  }

h2 {
font-family: 'Playfair Display', Arial, Helvetica, sans-serif,"Trebuchet MS";
font-size: 1.6em;
color: #e3edc3;
   text-shadow: 0px 5px 3px #130222;
   -moz-text-shadow: 0px 5px 3px #130222;
   -webkit-text-shadow: 0px 5px 3px #130222;
}

h3 {
line-height:1.6;
text-align: justify;
font-size: 1.2em;
font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif,"Trebuchet MS";
color: #f3f8e5;
  }

  /* texto Footer*/
h4 {
font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif,"Trebuchet MS";
font-size: 1.1em;
color: #f3f8e5;
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: 'Source Sans Pro', Arial, Helvetica, sans-serif,"Trebuchet MS";
font-size: 0.9em;
  }

p {
  font-size: 1.4em;
  font-family: 'Playfair Display', Arial, Helvetica, sans-serif,"Trebuchet MS";
  color: #130222;
}

article p {
text-align:justify;
  font-size: 1.2em;
  font-family: 'Playfair Display', Arial, Helvetica, sans-serif,"Trebuchet MS";
  color: #e3edc3;
}

header {
background: #f4cfc0; /* Old browsers */
background: #1a3855 url("../img/FondoAVJescribeh.png") center;
width: 100%;
display:inline-block;
}

  /*header*/
.centrar{
  padding:10px;
  margin:0 auto;
  width: 60%;
  display: block;
  text-align: center;
}

a{
   font-size:90%;
   color:#99a962;
   text-decoration: none;
  }

a:visited{
    color:#230b39;
   }

a:hover{
     color:#f3f8e5;
    }

a:active{
      color:#f3f8e5;
     }

.titutex{
  text-align: left;
}

.avj{
  height:100px;
  float:left;
  padding:10px;
  display:inline-block;
}

.logo{
height:100px;
float:left;
padding:10px;
display:inline-block;
filter: opacity(70%);
-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: opacity(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;
  }

hr {
margin:0;
border: 2px solid #909a59;
  }

.separa{
width:100%;
border:1px solid #bbc98e;
}

  /*body*/

body {
     background:#e3edc3;
background: #e3edc3 url("../img/FondoAVJescribe.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 {
margin-top:1%;
margin-bottom:1%;
  display:inline-block;
     width:95%;
     padding:1%;
     border-radius:5px;
     -ms-border-radius:5px;
     -moz-border-radius:5px;
     -webkit-border-radius:5px;
    background-color: rgba(118,134,64,0.6);
     box-sizing:border-box;
}

/*article*/

article {
width:98%;
padding:2%;
margin-right:10px;
margin-left:10px;
margin-bottom:15px;
margin-top:15px;
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 #bbc98e;
background: #381b52;
box-shadow: 0px 5px 4px #000;
-moz-box-shadow: 0px 5px 4px #000;
-webkit-box-shadow: 0px 5px 4px #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: #130222; /* Old browsers */
width: 100%;
   }

.azul{
border:4px solid #381b52;
}

.bt{
}

.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 {
height:50px;
margin-top:10px;
float:left;
margin-right:25px;
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;
}

.imgart{
float:left;
height:25%;
padding-right:2%;
padding-bottom:2%;
}

.imgartc{
float:center;
height:25%;
padding-right:2%;
}

.icoart{
height:120px;
float:left;
padding-right:2%;
}


/*media screen*/

@media screen and (max-width:1370px) {
  .wrap{
     width:70%;
     max-width:1200px;
     margin:0 auto;
     overflow:hidden;
   }

   h1 {
      font-size: 2.2em;
   }

   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%;
}


}

@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%;
}

.centrar {
width:90%;
}

.menurs img {
  width:30px;
  height:30px;
}

footer {
padding-bottom:1%;
}

}

@media screen and (max-width:800px) {
  .wrap{
     width:90%;
     max-width:1200px;
     margin:0 auto;
     overflow:hidden;
   }

.avj{
  height:70px;
}

   h1 {
      font-size: 1.6em;
   }

   h2{
     font-size: 1.2em;
   }

   h3{
     font-size: 1em;
   }

   p {
font-size: 1.4em;
padding-top:5px;
padding-bottom:5px;
   }

section{
width:90%;
padding-top:3%;
}

article{
border:2px solid #bbc98e;
width:95%;
padding:1.5%;
margin-bottom:1.5%;
}

.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:10px;
  width:30px;

}

footer {
padding-bottom:0.1%;
}

footer h4{
margin-top:30px;
float:right;
}

.bt{
width:400;
height:250;
}

.icoart{
height:80px;
float:left;
padding-right:1%;
}

}

@media screen and (max-width:550px) {
  .wrap{
     width:90%;
     max-width:1200px;
     margin:0 auto;
     overflow:hidden;
   }

   h1 {
      font-size: 1.5em;
   }

   h2{
     font-size: 1em;
   }

   h3{
     font-size: 0.9em;
   }

article p{
font-size: 0.8em;
   }

   p {
font-size: 1.2em;
padding-top:5px;
padding-bottom:5px;
   }

section{
width:90%;
padding-top:3%;
}

article{
width:95%;
padding:4%;
margin-bottom:1%;
}

.centrar {
width:90%;
}

footer {
width: 100%;
position: sticky;
   }

.azul{
border: 1px solid #230b39;
text-align: center;
}

.centrarft{
width:100%;
display:grid;
justify-content: center;
}

.menurs img {
margin-right:20px;
margin-bottom:10px;
width:30px;
}

footer {
padding-bottom:0.1%;
}

footer h4{
margin-top:30px;
float:right;
}

.bt{
width:200;
height:150;
}

.icoart{
height:55px;
}

.imgart{
float:none;
height:120px;
margin-bottom:4%;
}

}

@media screen and (max-width:360px) {
  .wrap{
     width:90%;
     max-width:1200px;
     margin:0 auto;
     overflow:hidden;
   }

.icoart{
height:40px;
float:left;
padding-right:1%;
}


   h1 {
      font-size: 0.8em;
   }

   h2{
     font-size: 0.6em;
   }

   h3{
     font-size: 0.6em;
   }

   p {
     font-size: 0.6em;
padding-top:5px;
padding-bottom:5px;
   }

section{
width:95%;
padding-bottom:2%;
margin-bottom:2%;
}

article{
width:95%;
padding:8%;
margin-bottom:25px;
}

.centrar {
width:90%;
}

footer {
width: 100%;
position: sticky;
   }

.azul{
border: 1px solid #969ea3;
  text-align: center;
}

.centrarft{
width:95%;
display:grid;
justify-content: center;
}

.menurs img {
margin-right:25px;
width:30px;
}

footer {
padding-bottom:0.1%;
}

footer h4{
margin-top:30px;
float:right;
}

.imgart{
float:none;
height:100px;
margin-bottom:4%;
}

.bt{
width:150;
height:100;
}

}