@import url(info.css);

*{
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}

@charset "UTF-8";

@font-face {
  font-family: "untitled-font-1";
  src:url("fonts/untitled-font-1.eot");
  src:url("fonts/untitled-font-1.eot?#iefix") format("embedded-opentype"),
    url("fonts/untitled-font-1.woff") format("woff"),
    url("fonts/untitled-font-1.ttf") format("truetype"),
    url("fonts/untitled-font-1.svg#untitled-font-1") format("svg");
  font-weight: normal;
  font-style: normal;
}

[data-icon]:before {
  font-family: "untitled-font-1" !important;
  content: attr(data-icon);
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[class^="icon-"]:before,
[class*=" icon-"]:before {
  font-family: "untitled-font-1" !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}
.fa {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-align-justify:before {
  content: "\61";
}

.icon-bars:before {
  content: "\6d";
}

* {
  box-sizing: border-box;
}

img {
  display: block;
}

body {

  margin: 0;
  font-family: 'Voces', cursive;
}




/*---------------Estilos del header--------------*/

.header .contenedor{
  background: transparent;
  display: flex;
  height: 120px;
  justify-content: space-between;
  width: 80%;
  z-index: -2;
}

.icon-bars {
  display: block;
  width: 40px;
  height: 40px;
  font-size: 30px;
  margin: 30px;
  margin-left: auto;
  cursor: pointer;
}

.logo-edufam { 
  height: 89px;
  margin: 10px;
}


/*---------------Estilos del menu--------------------*/

.nav{
  background: rgba(0,102,153,0.9);
  position: absolute;
  top: 93px;
  height: 100vh;
  left: -100%;
  width: 100%;
  transition: all 0.4s;
  z-index: 1000;
}

.menu{
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu-link{
  border-bottom: 1px solid rgba(19,155,206,0.9);
  color: #fff;
  display: block;
  padding: 10px;
  background: rgba(0,102,153,0.9);
  text-decoration: none;

}

.menu-link:hover, .select{
  background: white;
  color: #006699;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) inset, 0 1px 0 rgba(255, 255, 255, 0.4);

}

.bottom{
  border-bottom: 1px solid rgba(19,155,206,0.9);
  border-radius: 20px 20px 20px 20px;
  color: #fff;
  display: block;
  padding: 10px;
  background: rgba(0,102,153,0.9);
  text-decoration: none;

}

.bottom:hover {
  background: #009900;
  color: #fff;

            
}

.mostrar{
  left: 0;
}

  h1, .lema{
     background: white; 
     color: #029A02;
     font-family: 'Petit Formal Script', cursive;
     font-size: 1.9em;
     text-align: center;
     margin-top: 80px;

  }


@media (min-width: 1024px){
    .contenedor{
        width: 1000px;
        margin: auto;
      }


    .menu{
      position: static;
      width: auto;
      height: auto;
      transform: translateX(0%);
      float: right;
      display: flex;
      margin-top: 40px;
    }

    .nav{
      position: static;
      float: right;
      height: 0;
    }

    .icon-bars{
      display: none;
    }

    .menu-link{
      background-color: transparent;
      border-bottom: none;
      border-radius: 6px;
      color: #006699;
      transition: background 1s;
      transition: color 1s;
    }

    .menu-link:hover{
      background: #009900;
      box-shadow: none;
      color: #fff;
      border-radius: 6px;
      transition: background 1s;
    }
    .select{
      background: #009900;
      box-shadow: none;
      color: #fff;
      border-radius: 6px;

    }
}



/*---------------FIN del menu--------------------*/


/*-----------------Slider2-----------------------*/

#slide{
  position: relative;
  margin: auto;
  width: 100%;
  overflow: hidden;
}

#slide ul{
  position: relative;
  margin: auto;
  height: auto;
  width: 400%;
}

#slide ul li{
  float: left;
  width: 25%;
} 

#slide ul li img{
  width: 100%;
}




/*----------TAMAÑOS-----------------*/


/* FullHD */

@media (max-width: 1920px) and (min-width: 1366px){

  .header {
     background: rgba(244,251,254,1);
     background-image: url(..//img/header-bg-top.png);
     width: 100%;

}
  

  #slide ul li .caption{
      position: relative;
      width: 100%;
      top:-150px;
      text-align: center;
      z-index: 1;
      color: white;
}

  #slide ul li .caption h2{
      background: rgba(0,0,0,.7);
      padding: 5px 0;
      font-size: 2em;
      font-family: 'Tenor Sans', sans-serif;
      font-weight: normal;
}

  #slide ul li .caption h3{
      background: rgba(0,0,0,.7);
      padding: 6px;
      font-size: 1.5em;
      font-family: 'Arsenal', sans-serif;
      font-weight: normal;

  } 

  #left{
     position: absolute;
     top:40%;
     left: 2%;
     font-size: 2em;
     color: #373737;
     cursor: pointer;
}

  #right{
     position: absolute;
     top:40%;
     right: 2%;
     font-size: 2em;
     color: #373737;
     cursor: pointer;
   }

  #indicator{
     position: relative;
     width: 100%;
     margin: auto;
     height: 10px;
     text-align: center;
     top: -130px;
}

  #indicator li{
     display: inline-block;
     margin: 0px 5px;
     cursor: pointer;
     opacity:.5;
     color: #029A02; 
  }

  #indicator li:first-child{
    opacity: 1;

  }

  h1, .lema{
     background: #fff; 
     color: #029A02;
     font-family: 'Petit Formal Script', cursive;
     font-size: 1.9em;
     text-align: center;
     padding: 20px;
     margin-top: 20px;
  }

}




/*Large Desktop*/


@media (min-width: 1280px) and (max-width: 1599px){

  .header {
    height: 120px;
    background-image: url(..//img/header-medio-top.png);
    width: 100%;
}
  


  #slide ul li .caption{
      position: relative;
      width: 100%;
      top:-85px;
      text-align: center;
      z-index: 1;
      color: white;
}

  #slide ul li .caption h2{
      background: rgba(0,0,0,.5);
      padding: 5px 0;
      font-family: 'Tenor Sans', sans-serif;
}

  #slide ul li .caption h3{
      background: rgba(0,0,0,.5);
      padding: bottom;
  } 


  #left{
     position: absolute;
     top:40%;
     left: 2%;
     font-size: 2em;
     color: #373737;
     cursor: pointer;
}

  #right{
     position: absolute;
     top:40%;
     right: 2%;
     font-size: 2em;
     color: #373737;
     cursor: pointer;
   }

  #indicator{
     position: relative;
     width: 100%;
     margin: auto;
     height: 10px;
     text-align: center;
     top: -85px;
}

  #indicator li{
     display: inline-block;
     margin: 0px 5px;
     cursor: pointer;
     opacity:.5;
     color: black; 
  }


  #indicator li:first-child{
    opacity: 1;

  }

  h1, .lema{
     background: 
     color: #029A02;
     font-family: 'Petit Formal Script', cursive;
     font-size: 1.7em;
     text-align: center;
     margin-top: 20px;
     padding: 20px;
  }

}

/*Medium Desktop*/

@media (max-width: 1279px) and (min-width: 1024px){

  .header {
     /*background: #D1EFFA;*/
     background-image: url(..//img/header-medio-top.png); 
     height: 120px;  
  }

  #slide ul li .caption{
      position: relative;
      width: 100%;
      top:-85px;
      text-align: center;
      z-index: 1;
      color: white;
}

  #slide ul li .caption h2{
      background: rgba(0,0,0,.5);
      padding: 5px 0;
}

  
  #slide ul li .caption h3{
      background: rgba(0,0,0,.5);
      padding: bottom;
  } 

    #left{
     position: absolute;
     top:40%;
     left: 2%;
     font-size: 2em;
     color: #373737;
     cursor: pointer;
}

  #right{
    position: absolute;
    top:40%;
    right: 2%;
    font-size: 2em;
    color: #373737;
    cursor: pointer;
   }

  #indicator{
     position: relative;
     width: 100%;
     margin: auto;
     height: 10px;
     text-align: center;
     top: -90px;
}


  #indicator li{
     display: inline-block;
     margin: 0px 5px;
     cursor: pointer;
     opacity:.5;
     color: black; 
  }

  #indicator li:first-child{
    opacity: 1;

  }


  h1, .lema{
     color: #029A02;
     font-family: 'Petit Formal Script', cursive;
     font-size: 1.7em;
     text-align: center;
     padding: 20px;
     margin-top: 20px;
  }


}

/*Tablet*/

@media (max-width: 1023px) and (min-width: 768px){


  .header .contenedor{
     background-image: url(..//img/header-midle-top.png);
     display: flex;
     height: 120px;
     justify-content: space-between;
     width: 100%;
     z-index: -2;
}


  #slide ul li .caption{
      position: relative;
      width: 100%;
      top:-85px;
      text-align: center;
      z-index: 1;
      color: white;
}

  #slide ul li .caption h2{
      background: rgba(0,0,0,.5);
      padding: 5px 0;
      font-size: 1.2em;
      font-family: 'Tenor Sans', sans-serif;
      font-weight: normal;
}

  #slide ul li .caption h3{
      background: rgba(0,0,0,.5);
      padding: bottom;
      font-size: 1em;
      font-family: 'Arsenal', sans-serif;
      font-weight: normal;
  } 

    #left{
     position: absolute;
     top:35%;
     left: 2%;
     font-size: 2em;
     color: #373737;
     cursor: pointer;
}

  #right{
    position: absolute;
    top:35%;
    right: 2%;
    font-size: 2.5em;
    color: #373737;
    cursor: pointer;
   }

  #indicator{
     position: relative;
     width: 100%;
     margin: auto;
     height: 10px;
     text-align: center;
     top: -80px;
}

  #indicator li{
     display: inline-block;
     margin: 0px 5px;
     cursor: pointer;
     opacity:.5;
     color: black; 
  }

  #indicator li:first-child{
    opacity: 1;

  }


  h1, .lema{

     color: #029A02;
     font-family: 'Petit Formal Script', cursive;
     font-size: 1.3em;
     text-align: center;
     padding: 20px;
     margin-top: 10px;
  }

}


/*Phones*/

@media (max-width: 767px){
 
  #slide ul li .caption{
    display: none;
   }

  .header .contenedor{
    /*background: #D1EFFA;*/
    background-image: url(..//img/header-small-top.png);
    height: 70px;
    width: 100%;
  }

  .icon-bars {
    display: block;
    font-size: 20px;
    margin: 25px;
    margin-left: auto;
    cursor: pointer;
}


  #left{
     position: absolute;
     top:40%;
     left: 2%;
     font-size: 1em;
     color: #373737;
     cursor: pointer;
 }

  #right{
    position: absolute;
    top:40%;
    right: 2%;
    font-size: 1em;
    color: #373737;
    cursor: pointer;
   }

  #indicator{
      display: none;

  }

  h1, .lema{
     background: white;
     color: #029A02;
     font-family: 'Petit Formal Script', cursive;
     font-size: 0.9em;
     height: 60px;
     text-align: center;
     margin-top: 20px;
     width: 98%;
  }

  .logo-edufam {    
     width: 122px;
     height: 46px;  
     margin: 10px;
 } 


}



/*Fecha y Hora*/
.wrap {
  background: -moz-linear-gradient(top, rgba(209,239,250,0.1) 0%, rgba(244,251,254,0.1) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(209,239,250,0.1)), color-stop(99%, rgba(244,251,254,1)), color-stop(100%, rgba(244,251,254,1)));
  width: 100%;
  margin: auto; 
}

.widget {
  width: 100%;
}

.widget p {
  display: inline-block;
  line-height: 0.1em;
}

.fecha {
  display: inline-block;
  font-family: 'Dosis', sans-serif;
  text-align: right;
  font-size: 0.7em; 
  width: 50%;
}

.reloj {
  display: inline-block;
  font-family: 'Dosis', sans-serif;
  text-align: left;
  font-size: 0.7em;
  width: 60px;
}

.reloj .caja-segundos {
  display: inline-block;
}

.reloj .segundos, .reloj .ampm {
  font-size: 0.7em;
  display: inline-block;
}

/*---------FIN Fecha y Hora------------*/


/*----------FOOTER-----------*/

#footer{
    
    background: rgba(253,254,255,1);
    background: -moz-linear-gradient(top, rgba(253,254,255,1) 0%, rgba(206,238,250,1) 24%, rgba(204,237,250,1) 25%, rgba(89,196,238,1) 100%);
    background: -webkit-linear-gradient(top, rgba(253,254,255,1) 0%, rgba(206,238,250,1) 24%, rgba(204,237,250,1) 25%, rgba(89,196,238,1) 100%);
    background: -o-linear-gradient(top, rgba(253,254,255,1) 0%, rgba(206,238,250,1) 24%, rgba(204,237,250,1) 25%, rgba(89,196,238,1) 100%);
    background: -ms-linear-gradient(top, rgba(253,254,255,1) 0%, rgba(206,238,250,1) 24%, rgba(204,237,250,1) 25%, rgba(89,196,238,1) 100%);
    background: linear-gradient(to bottom, rgba(253,254,255,1) 0%, rgba(206,238,250,1) 24%, rgba(204,237,250,1) 25%, rgba(89,196,238,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fdfeff', endColorstr='#59c4ee', GradientType=0 );
    margin-top: 40px; 
    position: relative;
    
}

#footer img{
    width: 100%;
    height: 100%;
}

#footer .contenedor{   
    background: rgba(76,76,76,1);
    background: -moz-linear-gradient(top, rgba(76,76,76,1) 0%, rgba(59,58,59,1) 0%, rgba(17,17,17,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(76,76,76,1)), color-stop(0%, rgba(59,58,59,1)), color-stop(100%, rgba(17,17,17,1)));
    background: -webkit-linear-gradient(top, rgba(76,76,76,1) 0%, rgba(59,58,59,1) 0%, rgba(17,17,17,1) 100%);
    background: -o-linear-gradient(top, rgba(76,76,76,1) 0%, rgba(59,58,59,1) 0%, rgba(17,17,17,1) 100%);
    background: -ms-linear-gradient(top, rgba(76,76,76,1) 0%, rgba(59,58,59,1) 0%, rgba(17,17,17,1) 100%);
    background: linear-gradient(to bottom, rgba(76,76,76,1) 0%, rgba(59,58,59,1) 0%, rgba(17,17,17,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#111111', GradientType=0 );


    /*box-shadow: 0 6px 0 rgba(0, 0, 0, 0.8), 0 6px 0 rgba(0, 0, 0, 0.19);*/
    opacity: 0.9;
    padding: 40px;
    position: absolute;
    text-align: center;
    width: 100%;
              
}

#footer h4{
    font-size: 0.8em;
    font-weight: 300;
    color: #B9BBB0;
    text-align: center;

}

#footer a{
  color: #858875;
  text-decoration: none;
}



@media (max-width: 1024px) and (min-width: 768px){


#footer {
    background: rgba(253,254,255,1);
    background: -moz-linear-gradient(top, rgba(253,254,255,1) 0%, rgba(206,238,250,1) 24%, rgba(204,237,250,1) 25%, rgba(89,196,238,1) 100%);
    background: -webkit-linear-gradient(top, rgba(253,254,255,1) 0%, rgba(206,238,250,1) 24%, rgba(204,237,250,1) 25%, rgba(89,196,238,1) 100%);
    background: -o-linear-gradient(top, rgba(253,254,255,1) 0%, rgba(206,238,250,1) 24%, rgba(204,237,250,1) 25%, rgba(89,196,238,1) 100%);
    background: -ms-linear-gradient(top, rgba(253,254,255,1) 0%, rgba(206,238,250,1) 24%, rgba(204,237,250,1) 25%, rgba(89,196,238,1) 100%);
    background: linear-gradient(to bottom, rgba(253,254,255,1) 0%, rgba(206,238,250,1) 24%, rgba(204,237,250,1) 25%, rgba(89,196,238,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fdfeff', endColorstr='#59c4ee', GradientType=0 ); 
    max-height: 600px;
    position: relative;
    
}


#footer h4{
    font-size: 0.8em;
    font-weight: 300;
    color: #B9BBB0;
    text-align: center;
}

#footer .contenedor{   
    position: absolute;
    text-align: center;
    width: 100%;
              
}


#footer a{
   color: #444;
   text-decoration: none;
}

}



@media (min-width: 360px) and (max-width: 767px){


#footer {
    background: rgba(253,254,255,1);
    background: -moz-linear-gradient(top, rgba(253,254,255,1) 0%, rgba(206,238,250,1) 24%, rgba(204,237,250,1) 25%, rgba(89,196,238,1) 100%);
    background: -webkit-linear-gradient(top, rgba(253,254,255,1) 0%, rgba(206,238,250,1) 24%, rgba(204,237,250,1) 25%, rgba(89,196,238,1) 100%);
    background: -o-linear-gradient(top, rgba(253,254,255,1) 0%, rgba(206,238,250,1) 24%, rgba(204,237,250,1) 25%, rgba(89,196,238,1) 100%);
    background: -ms-linear-gradient(top, rgba(253,254,255,1) 0%, rgba(206,238,250,1) 24%, rgba(204,237,250,1) 25%, rgba(89,196,238,1) 100%);
    background: linear-gradient(to bottom, rgba(253,254,255,1) 0%, rgba(206,238,250,1) 24%, rgba(204,237,250,1) 25%, rgba(89,196,238,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fdfeff', endColorstr='#59c4ee', GradientType=0 ); 
    
    position: relative;
    
}

#footer h4{
    font-size: 0.7em;
    font-weight: 300;
    color: #B9BBB0;
    text-align: center;
}

}



/*----------BTN - ir arriba---------*/

.ir-arriba {
  
}




/*----Que Hacemos-----*/

#que-hacemos h3 {
  color: #006699;
  font-size: 1.5em;
  text-align: center;
  margin-top: 20px;
  margin: 20px;
}


#lineas-accion {
   margin: auto;
   padding-top: 10px;
   width: 70%;

}

#lineas-accion h3 {
   color: #006699;
   font-size: 1.2em;
   margin: auto; 
   padding-top: 30px;
    
}


.somos-lineas img {
   margin: 25px;
   margin-left: 140px;
   
}

.somos-lineas h3 {
  margin-left: 320px;
}

.somos-lineas .info-txt {
   color: #777;
   margin: auto;
   

   
}


@media (min-width: 360px) and (max-width: 767px){

#lineas-accion{
  width: 80%;
}

.somos-lineas {
   padding-top: 10px;
  
}

.somos-lineas h3 {
  margin-left: 50px;
}

.somos-lineas .info-txt {
   color: #777;
   margin: auto;
   width: 100%
   
  
}


}

@media (min-width: 768px) and (max-width: 1366px){

.somos-lineas {
   width: 100%;
   padding-top: 10px;
  
}

.somos-lineas h3 {
   margin-left: 10px;
}

.somos-lineas .info-txt {
    color: #777;
    margin: auto;
   
     
}

}

@media (min-width: 1024px) and (max-width: 1366px){



}


/*----Fin-Que-Hacemos-----*/


/*----Galeria-----*/

.galeria {
    width: 90%;
    margin: auto;
    list-style: none;
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    z-index: 1;
}

.galeria li {
    margin: 5px;
}

.galeria img {
    width: 150px;
    height: 100px;
}

/*Estilos del modal*/

.modal {
    display: none;


}

.modal:target {
    
    display: block;
    position: fixed;
    background: rgba(0,0,0,0.8);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
   
}

.modal h3 {
    color: #fff;
    font-size: 30px;
    text-align: center;
    margin: 15px 0;
    padding-top: 100px;
}

.imagen {
    width: 100%;
    height: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.imagen a {
    color: #fff;
    font-size: 40px;
    text-decoration: none;
    margin: 0 10px;
}

.imagen a:nth-child(2) {
    margin: 0;
    height: 100%;
    flex-shrink: 2;
}

.imagen img {
    width: 700px;
    height: 100%;
    max-width: 100%;
    border: 7px solid #fff;
    box-sizing: border-box;
}

.cerrar {
    display: block;
    background: #fff;
    width: 25px;
    height: 25px;
    margin: 20px auto;
    text-align: center;
    text-decoration: none;
    font-size: 20px;
    color: #006699;
    padding: 1px;
    border-radius: 50%;
    line-height: 25px;
}


@media (min-width: 360px) and (max-width: 767px) {

.imagen {
    width: 100%;
    height: 35%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal h3 {
    color: #fff;
    font-size: 0.9em;
    text-align: center;
    margin: 15px 0;
    padding-top: 100px;
}


}



/*----Fin Galeria-----*/



/*---Info-EDUFAM----*/


div.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #eee;
    border-radius: 4px 4px 0 0;
    margin-top: 40px; 
    width: 80%;
    margin-right: auto;
    margin-left: auto;
}

.tab h3{
    color: #006699;
    font-size: 1.3em;
    font-family: 'Voces', cursive;
}

div.tab button {
    background-color: #fff;
    float: left;
    border: none;
    outline: none;
    cursor: default;
    padding: 1em 1.2em;
    font-size: 1em;
    width: 33.3%;

}

div.tab button:hover{
    background-color: #14759E;
    color: #FFFFFF;
}

div.tab button:hover h3{
    color: #fff;
}

div.tab button.active{
    background-color: #14759E;
    color: #fff;
}

div.tab button.active h3{
    color: #fff;

  }

.content {
    font-family: 'Voces', cursive;
    font-size: 1em;
    color: #777;
    display: none;
    background-color: #fff;
    padding: 2em 1em;
    border: 1px solid #ccc;
    border-top: none;
    margin-left: auto;
    margin-right: auto;
    border-radius: 0 0 4px 4px;
    width: 80%;
    

}


@media (min-width: 320px) and (max-width: 767px){
 div.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #fff;
    border-radius: 4px 4px 0 0;
    float: right;
    width: 100%;

}

.content {
    font-family: 'Voces', cursive;
    font-size: 0.7em;
    color: #777;
    display: none;
    background-color: #fff;
    border: 1px solid #ccc;
    border-top: none;
    border-radius: 0 0 4px 4px;
    padding-top: 140px;
    width: 100%;
    

}

.tab h3{
    color: #006699;
    font-size: 0.8em;
    font-family: 'Voces', cursive;
}

   #que-hacemos h3{
      font-size: 1.2em;

    }

  
}