/*
Theme Name: Cristian Producciones
Author: Cristian Peña Hortua
Author URI: http://www.cristianproducciones.com/
Description: Plantilla desarrollada por Cristian Peña para Colegio Cristiano Monte Hebron.
Version: 1.0
License: Copyight 
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cristianproducciones
*/

/*atributos generales*/
*{
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
}

body{
height: 100%;	
width: 100%;
}

nav{
float: right;
background-color: #248C8C;
width: 100%;
position: fixed;
z-index: 1000;

}


img{
border: 0;    
}
.fotot{
width: 80%;
margin-bottom: 2%;
margin-right: 10%;
margin-left: 10%;
}

.fotop{
width: 50%;
float: left;    
}


.videostadar{
margin-left: 10%;
margin-right: 10%;  
}

/*menu escritorio deplegable*/
header{
    margin: auto;
}
ul, ol{
list-style: none;	
}
.nav li a {
text-decoration: none;
background-color: #248C8C;
color: #ffffff;
padding: 20px 15px;
display: block;
}
.nav li a:hover {
background-color: #165454;	
}
.nav > li {
float: left;
}
.nav li ul {
display:none;
position: absolute;
min-width: 140px;
}
.nav li:hover > ul{
display: block;	
}
.nav li ul li{
position: relative;
}
.nav li ul li ul {
right: -140px;
top: 0;	
}
/*menu escritorio deplegable*/

/*adaptacion menu desplegable y logo*/
.nav{
float: right;	
}
.logo{
position: fixed;
z-index: 2000;
width: 70px;
height: 50px;
margin-left: 1%;
margin-top: 0.3%;
}
/*adaptacion menu desplegable y logo*/


.apdf{display: block;}

.tituloer{
margin-top: 0px; 
font-size: 250%;
padding-top: 160px;   
}
.itemmulti{
 width: 25%;
height: 400px;
float: left; 
}
.itemmultiv{
 width: 25%;
height: 800px;
float: left; 
}
#logo{
width: 20%;
margin-left: 40%;
margin-right: 40%;
margin-top: 3%;
}


/*tipografia*/

h1{
margin-bottom: 3%;    
padding-top:  3%;
text-align: center;
color: #248C8C;
font-size: 150%;    
}

h2{
padding-top: 3%;
margin-bottom: 3%;
text-align:center;
color: #248C8C;
font-size: 150%;

}

p{
font-size: 120%;    
margin-bottom: 3%;
text-align: center;
margin-left: 5%;  
margin-right: 5%;    
color:#403e3e; 
}


.pleft{
text-align: left;
}

.modulos .pleft{
width: 90%;
margin-left: 5%;
margin-right: 5%;
    
}

.modulos4 .modulos{
width: 20%;
margin: 2.1%; 
font-size: 95%; 
    
    
}

.predicas .pleft{
text-align: center;
font-style: italic;
opacity: .5;  
font-size: 115%;    
}

.predicas h2{
font-size: 115%;    
margin-bottom: 1%;    
}

.h2section{
padding-top: 8%;
text-align:center;
color: #248C8C;
font-size: 150%;
}

.psectioni{
font-size: 130%;    
height: 100%;
padding-top: 5%;
padding-bottom: 15%;    
margin: 10%;    
text-align: left;
}





.pi{
font-size: 120%;    
width: 80%; 
margin-bottom: 1%;
margin-right: 10%;
margin-left: 10%;
padding: 1%;    
text-align: left;
color:#403e3e; 
border-style: solid;
border-color: #248C8C;      
-moz-transition: border-color 1s;
-webkit-transition: border-color 1s;     
}

.pi:hover{
border-style: solid;
border-color: #ffffff;  
}

.pm{
font-size: 100%;    
width: 90%; 
margin-bottom: 3%;
margin-right: 5%;
margin-left: 5%;
text-align: left;
color:#403e3e; 
}

.textw{
color: #ffffff;    
}


.fondoanimado{
position: relative;
display: inline-block;
text-align: center;
width: 100%;    
}

.stf{
position: absolute;
top: 35%; 
width: 100%;
}


.ctf{

width: 35%;
margin: auto;    
display: flex;
background-color: #FF9E00;
border-radius: 44px 0px; 

/* text-align: center;
align-items: center;   
align-content:center;
    */

}

.tf{
width: 100%;   
font-size: 200%;
color: #ffffff;


}

.pf{
text-align: center;    
width: 80%;    
margin-top: 2%;
margin-left:  10%;
margin-right: 10%;
font-size: 160%;
color: #ffffff;     
}

.foto-texto{
margin-top: 5%; 
margin-bottom: 5%;
height: 60vh;    
display: block;
width: 100%;    
}

.modulosection{
width: 80%;
margin-top: 5%;    
display:block;
margin-left: auto;
margin-right: auto;    
 
    
}

.sectioni{
width: 50%; 
float: left;
margin-bottom: 3%;    
    
}

.sectiond{
width: 50%;  
float: left;
}
.sectiond img{
height: 100%;
width: 50%;    
display:block;
margin:auto;
}

.sectioni img{
height: 100%;
width: 80%;    
display:block;
margin:auto;
}

#sectionhorarios{
width: 100%;    
height: 50vh; 
float: left;
}


/*iconos de modelo pedagogico*/
.pi .svg-inline--fa{
margin-right: .5%;    
font-size: 130%;
color: #248C8C;
-moz-transition: font-size 1s;
-webkit-transition: font-size 1s;    
}

.pi .svg-inline--fa:hover{
font-size: 170%;    
}
/*iconos de modelo pedagogico*/

/*tipografia*/

.sectionvideo{
width: 100%;
float: left;
background-image: url(img/fondo-landing.jpg);
background-attachment: fixed;

}

.videoy{
width: 70%;
height: 700px;
margin: 0 auto;
display: block; 
margin-bottom: 3%;
margin-top: 2%;    
}

.formulario{
padding-top: 0;    
display: block;
margin: auto;    
height: 100vh;
text-align: center;

}



.sectionmodulos{
margin-top: 2%;
margin-bottom: 2%;
width: 100%;    
height: 100%;
float: left;
}


.modulos{
width: 30%;
margin-top: 2%;
margin-bottom: 2%;    
margin-left: 2.2%;
height: 40%;
float: left;
background:#ffffff;
border-style: solid;
border-color: #ffffff;    
-moz-transition: border-color 1s;
-webkit-transition: border-color 1s;    
}

.modulos:hover{
border-style: solid;
border-color: #248C8C;
}

.anuncio{
width: 80%;
height: 150px; 
margin-top: 5%;  
margin-left: 10%;
margin-right: 10%;    
background-color: #248C8C;
float: left;
text-align: center;
color:#ffffff; 
font-size: 200%;
-moz-transition: background-color .5s;
-webkit-transition: background-color .5s;    
}

.anuncio:hover{
background-color: #FF9E00;    
}

.anunciotex{
padding: 1.2em;
    
}

.apdf{
width: 80%;
height: 105vh;
margin-left: 10%;
margin-right: 10%;
}
#botonmovil{
    display: none;
}


.botones{
margin-bottom: 3%;    
text-align: center;
margin-left: 0;
margin-left: 30%;
margin-right: 30%;
width: 40%;	
float: left;
background-color:#E29423;
color: #ffffff;
font-size: 150%;
display: inline-block;
border-radius: 10px;
-moz-transition: background-color .5s;
-webkit-transition: background-color .5s;    
}

.botones:hover{
background-color: #F9B33F;
color:#fff;
}

img{
width: 100%;
}

.fotomitad{
width: 60%; 
float: right;
margin-left: 0;
}


.fotoparallax{
width: 100%;
height: 400px;
background-image: url(img/auditoriosillas.jpg);
background-attachment: fixed;
}

.fotoparallax2{
width: 100%;
height: 400px;
background-image: url(img/graduacion.jpg);
background-attachment: fixed;
}

.fotoparallax3{
width:100;
height: 800px;
 background-size: 100%;
background-repeat: no-repeat;    
background-image: url(img/iglesia.jpg);
background-attachment: fixed;
}


.fotoparallax4{
width:100;
height: 800px;
 background-size: 100%;
background-repeat: no-repeat;    
background-image: url(img/imagen-deporte.jpg);
background-attachment: fixed;
}



.capa1{
background-color: #252a2a;
width: 100%; 
height: 100%;
opacity: .7;
}



.imggaleria{
width: 40%;
float: left
}


/*footer*/
footer{
height: 600px;
width: 100%;	
background-color: #191919;
margin-top: 0px;
margin-bottom: 0;
padding-bottom: 0;
padding-top: 0;
float: right;
-webkit-clip-path: polygon(50% 30%, 100% 38%, 100% 100%, 0 100%, 0% 38%);
clip-path: polygon(50% 30%, 100% 38%, 100% 100%, 0 100%, 0% 38%);
}

footer p :hover{
color: #FF9E00;
}

.sectionfooter{
height:570px;
width: 33.3%;
float: left;
}

.sectiontitle{
width: 100%;    
margin-top: 50%;
color: #fff;
margin-bottom: 0px;
padding-bottom: 0px;
text-align: center;
}

.sectiondat{
width: 100%;    
float: left;
margin-top: 5%;
font-size: 100%;
color: #fff;
text-align: center;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
    
}

.nada{
color: #fff;
}

a{
text-decoration: none;
-moz-transition: font-size .5s;
-webkit-transition: font-size .5s;	
}

.copyright{
font-weight: 400;	
text-align: center;
padding-bottom: 0px;
margin-bottom: 0px;
font-size: 100%;
width: 100%;
height: 10px;
color: #fff;
}
/*footer*/

@media screen and (min-width:1365px) and (max-width: 1600px){

/* footer */	
.sectiontitle {
margin-top: 37%;	
}

h2{
margin-bottom: 3%;
}
    
    
.videoy{
height: 720px;
margin-top: 55px;
} 
    
.videostadar{
    height: 600px;    
    }   
.apdf{display: block;}    
    
footer{
height: 400px;
}

.sectionfooter{
height:370px;
}	
/* footer */

}

@media screen and (min-width:1200px) and (max-width: 1365px){

/*footer*/
.sectiontitle {
margin-top: 38%;	
}

.videoy{
height: 550px;
margin-top: 55px;
}  
    
.videostadar{
    height: 500px;    
    }    
.apdf{display: block;}    
footer{
height: 360px;
}

.sectionfooter{
height:340px;
}	

.sectiondat{
margin-top: 2%;
}
/*footer*/

	}


@media screen and (min-width:900px) and (max-width: 1199px){


    
.videoy{
height: 500px;
margin-top: 55px;
}  
    
    
    
/*footer*/
footer{
height: 360px;
}

p{
text-align: left;

}   
    
     
.modulos4 .sectionmodulos {
width: 100%;    
}
    
.modulos4 .modulos{
width: 45%;
     
}    
    
    
    
.sectionfooter{
height:340px;
}

.sectiontitle {
margin-top: 45%;	
}
/* footer*/

 .videostadar{
    height: 450px;    
    }
        
    
}

@media screen and (min-width:500px) and (max-width: 899px){

/*tipografias*/
h1{
margin-top: 3%;   
        
    }    
/*tipografias*/   
.videoy{
height: 350px;
margin-top: 120px;
}
.fotoparallax{
height: 250px;    
}

.fotoparallax4{    
height: 200px; }   
.sectioni {
width: 100%;
}
.modulosection{
width: 95%;        
    }    
.sectiond{
width: 100%;
}    
.modulos{
width: 97.8%;        
}    
.modulos4 .sectionmodulos {
width: 100%;    
}
.modulos4 .modulos{
width: 94%;
}       
.videostadar{
height: 350px;      
}
.apdf{display: block;}    
       
.botones{
width: 40%;
margin-left: 30%;
margin-right: 30%;
margin-bottom: 5%;    
    }    
    
/* footer*/
footer{
margin-top: 0%;
padding-top: 0%;    
height: 850px;
width: 100%;
-webkit-clip-path: polygon(50% 30%, 100% 38%, 100% 100%, 0 100%, 0% 38%);
clip-path: polygon( 0% 0%, 100% 3%, 100% 100%, 0 100%, 0% 38%)
}

.sectionfooter{
height:250px;
width: 100%;
float: left;
}

.sectiontitle{
margin-top: 8%;    
width: 100%;
text-align: center;
padding-left: 0%;
padding-right: 0%;
padding-top: 0%;
}

.sectiondat{
width: 100%;
padding-left: 0%;
padding-right: 0%;
text-align: center;
}
/* footer*/
}


@media screen and (min-width:300px) and (max-width: 499px){

body{

background-size: 200%;	
}	

/*tipografia*/
    
h1{
margin-top: 3%;   
        
    }    
h2{
margin-top: 3%;	
margin-bottom: 5%;

font-size: 130%;	
}

     
    
.videoy{
height: 250px;
padding-top: 55px;
    padding: 0;
}  
    
.fotoparallax{
width: 100%;
height: 150px;  
background-size: 350%;
background-repeat: no-repeat;
}  
.fotoparallax4 {
height: 150px;    
        
    }   
    
.modulos{
    
width: 90%;
margin-left: 5%;
margin-right: 5%;    
height: 100%;
float: left;
        
    }  
    
.modulos4 .modulos{
width: 94%;
     
}     

.parrafom{
margin-bottom: 6%;
font-size: 100%;
text-align: center;
}
/*tipografia*/

.videostadar{
height: 200px;    
    }
.botones{
width: 50%;
margin-left: 25%;
margin-right: 25%;
margin-bottom: 3%;    
    }   

footer{
margin-top: 15%;
padding-top: 0%;    
height: 850px;
width: 100%;
-webkit-clip-path: polygon(50% 30%, 100% 38%, 100% 100%, 0 100%, 0% 38%);
clip-path: polygon( 0% 0%, 100% 3%, 100% 100%, 0 100%, 0% 38%)
}

.sectionfooter{
height:250px;
width: 100%;
float: left;
}

.sectiontitle{
margin-top: 10%;    
width: 100%;
text-align: center;
padding-left: 0%;
padding-right: 0%;
padding-top: 0%;
}

.sectiondat{
width: 100%;
padding-left: 0%;
padding-right: 0%;
text-align: center;
}

}


@media screen and (min-width:900px) and (max-width: 2500px){
  .menu-boton {
        display:none;
    }
#menu-movil{
display: none;	
}    

.imagen-portada{
margin-top: 55px;    
}

}

@media screen and (min-width:0px) and (max-width: 899px){
    
    .nav{
        display: none;
    }   
    .logo{
        display: none;
    }
    .apdf{
    display: none;
    }
    #botonmovil{
        display: block;
    }
p{
    text-align: left;
    }  
.pi{
    margin-bottom: 5%;
    }    
    
.pi .svg-inline--fa{
width: 100%;  
margin-bottom: 3%; 
margin-top: 5%;    
font-size: 350%;}
    
.pi .svg-inline--fa:hover{
font-size: 500%;  
}  
    
.fotop{
width: 100%;
float: left;    
}  

.anunciotex{
padding: .8em;
    
}  

 /* -----cuadrar elementos del cabezero------- */ 
    .foto-texto{height: 35vh;}
    .sectioni{
    width: 100%;    
    }
    
    .sectiond{
    display: none;    
    }
    
    .fotoparallax3{
    height:  16vh; 
    }
    .fotoparallax4{
    height:  16vh; 
    }
    
    
    .ctf{
    width: 100%;
    }

    .fondoanimado{
        margin-top: 15vh;
    }
    .tf{
    margin-top: 0;    
    width: 100%;   
    font-size: 150%;
    }

    .pf{
    display: none;  
    }  
    
    .formulario{
    width: 100%;    
    }
    
    .margentop{
    margin-top:15vh;    
    }
/* ----------------interfax de menus steve--------------------- */

  .logo-movil{
    height: 63px;
    width: auto;
    float: right;
    }
  .menu-boton {
        display:block;
        width:100%;
        position: fixed;
        top:0;
        background:#199093;
        z-index: 1000;

    }
 
    .menu-boton .bt-menu {
        display: block;
        padding: 25px;
        color: #fff;
        overflow: hidden;
        font-size: 50px;
        font-weight: bold;
        text-decoration: none;
    }

    .menu-boton .bt-menu:hover{
    color: #FF9E00; 
    font-size: 53px;
        
    } 
 
    
    #menu-movil{
        margin-top: 0px;
        z-index: 3000;
        color: #fff;
    }

    #menu-movil li a:hover {
    color: #FF9E00; 
    }
/* ----------------interfax de menus steve--------------------- */
      

}