@import url("reset.css");

  /*
Colores:
Naranja mu fuerte:#965a00;
Naranja fuerte:#bf7300;
Naranja :#f29100;
Naranja  claro:#ffad33;
Naranja mas claro:#ffbf5e;

lima mu fuerte:#6b8e00;
lima fuerte:#89b600;
lima :#aee600;
lima claro:#c3f331;
lima mas claro:#cff55b;

violeta mu fuerte:#64005f;
violeta fuerte:#7f007a;
violeta:#a1009a;
violeta claro:#ad23a7;
violeta mas claro:#bb45b6;
  */

  /*
fuentes:
font-family: 'Ruda', sans-serif;
font-size: 48px;
font-family: 'Roboto Slab', serif;
font-size: 16px;
  */


  /*elementos generales*/
h1 {
text-align: center;
font-family: 'Ruda', Arial, Helvetica, sans-serif,"Trebuchet MS";
font-size: 1.8em;
color:#cff55b;
text-shadow: 0px 1px 5px #64005f;
-moz-text-shadow: 0px 1px 5px #64005f;
-webkit-text-shadow: 0px 1px 5px #64005f;
  }

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

h3 {
text-align: left;
font-size: 1.1em;
font-family: 'Roboto Slab', Arial, Helvetica, sans-serif,"Trebuchet MS";
color: #cff55b;
  }

  /* texto Footer*/
h4 {
font-family: 'Roboto Slab', Arial, Helvetica, sans-serif,"Trebuchet MS";
font-size: 0.9em;
color: #64005f;
clear:both;
  }

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

p {
  font-size: 1.4em;
  font-family: 'Roboto Slab', 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 {
width: 100%;
display:inline-block;
  }

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


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

}
.avj{
  height:170px;
  padding:10px;
clear:both;
}

a:hover article img {
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: #a1009a url("../img/FondoWS.png") center;
      margin: 0 auto;
      text-align: center;
      overflow-x:hidden;
    }

/*section*/

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

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(242,145,0,0.6);

}

/*article*/

article {
width:100%;
margin-left:auto;
margin-right:auto;
display:inline-block;
margin:0.5%;
padding:1%;
border-radius:10px;
-ms-border-radius:20px;
-moz-border-radius:20px;
-webkit-border-radius:20px;
box-sizing:border-box;
border:3px solid #cff55b;
background-color: rgba(127,0,122,0.9);
box-shadow: 0px 5px 4px #000;
-moz-box-shadow: 0px 5px 4px #000;
-webkit-box-shadow: 0px 5px 4px #000;
box-sizing:border-box;
   }

.color2 {
    background-color: rgba(100,0,95,0.9);
}

.menutg{
  display: flex;
  justify-content: center;
}


.menutg img {
border-radius:10%;
padding:1%;
width:90%;
margin-top:10px;
margin-right:5px;
margin-left:5px;
float:left;
margin-bottom:25px;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}

.menutg img:hover{
  border-radius: 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.2s ease-out;
-moz-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
transition: all 0.2s 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: #6b8e00; /* Old browsers */
background-color: rgba(107,142,0,0.85);
width: 100%;
   }

.azul{
border: 2px solid #bb45b6;
}

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

footer h2{
float:left;
margin-top:10px;
margin-right:20px;
color: #64005f;
text-shadow: none;
}

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


.menurs{
display:inline_flex;
scale:1;
padding-top:20px;
clear:both;
text-align:center;
justify-content: center;
align-items: end;
}

.menurs img {
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;
}

.menuh{
padding-top:20px;
clear:both;
text-align:center;
display: flex;
justify-content: center;
}

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

.menuh 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{

}
.menuh{
scale: 0.75;
}
.menurs{
scale: 0.75;
}


.menutg img {
width:80%;
}

}



@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{

margin-left:1%;
margin-right: 1%;
padding:1%;
margin-bottom:2%;
}

.menutg img {

}
.titutex{
text-align:center;
}

.centrar {
width:90%;
}

.menurs{
scale: 0.7;
padding-top:10%
}

footer {
padding-bottom:1%;
}

}

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

   h1 {
      font-size: 1.2em;
   }

   h2{
     font-size: 0.9em;
   }
   h3{
     font-size: 0.9em;
   }
   p {
     font-size: 0.9em;
padding-top:5px;
padding-bottom:5px;
   }

section{
width:90%;
     padding-top:3%;
}
article{
width:90%;
     padding:1%;
     margin-bottom:3%;
}
.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:2%;
}

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

footer {
padding-bottom:0.1%;
}

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

}

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

.menutg{
  display: flow;

}
.menutg h3{
clear:both;
justify-content:center;
}

.menutg img {
float:none;
}

.avj{
  height:120px;
  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%;
}

.menurs{
scale:1;
padding:0.1%;
display:flex;
justify-items:center;
justify-content:center;
align-items:center;
}

.menurs img {
margin-top:1%;
width:90%;
}


.menuh{
clear:both;
padding:0.5%;
display:grid;
justify-items:center;
}


footer {
padding-bottom:0.1%;
}

footer h2{
float:none;
}

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

@media screen and (max-width:360px) {
.avj{
  height:100px;
  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;
}

footer {
padding-bottom:1%;
}

footer h4{
margin-top:1%;
float:right;
}
.menurs{
display:inline-block;
scale: 1;
padding-top:5%

}
.menurs img {

margin-bottom:0px;
filter: opacity(100%);
}