@import url(http://fonts.googleapis.com/css?family=Titillium+Web);
*{margin: 0%; padding: 0%;font-family: 'Titillium Web', sans-serif; font-size: 1em;  }


/*Para celular*/
@media screen and (max-width: 480px){

    #body_home{
        background: #000;
        width: 100%;
        height: 100%;
        font-size: 80%;
        
    }
    
    #header_home{
        background-repeat: no-repeat;
        background-image: url(imagenes/cel-home.jpg);
        background-size:100%;
        padding: 1em;
    }
    /*imagen del logo*/
        #header_home img{
            width: 60%;
           
        }
    /*botonera de catedra y contacto*/
    #header_home nav{
        width: 40%;
        float: right
    }    
      #header_home nav ul li{
        list-style: none;
    }    
    
    #header_home nav a{
            
            color:black;
            float: right; 
            margin-right: 0.5em;
            text-decoration: none;
            background-color: rgba(255, 255, 255, 0.37);
            
            }

        #tope{
            display: block;
            width: 70%;
            margin-top: 0.8em
            
            
        }
    
        h1{
            color: #F9A01B; 
            font-size: 1.1em;
            background-color: rgba(0, 0, 0, 0.47);
        }
    
        #p_home{
            color:#fff;
            font-family: sans-serif;
            font-size: 1em;
            background-color: rgba(0, 0, 0, 0.47);
        }
    
      #main_home{margin-top: 1em;}  
    
    /*botonera*/
        #nav_home{
            margin: 0%;
            padding: 0%;
        }
    
        #botonera_home ul{
            
            list-style: none;
        }
    
        #botonera_home ul li a{
            
            text-decoration: none;
            color:black;
            font-weight: bold;
            display: block; 
            height: 5em; 
            width: 100%; 
            line-height: 5em;
			background-size: 100% auto;
			background-repeat: no-repeat;
            
        }

        #planificacion_home{             
            background-image: url(imagenes/cel-planif.jpg);
            padding-left: 5%; 
        }
    
        #guion_home{
            background-image: url(imagenes/cel-guion1.jpg);
            background-repeat: no-repeat; 
            padding-left: 5%; 
            background-repeat: no-repeat;
        }
    
        #desglose_home{
            background-image: url(imagenes/cel-desglose.jpg);
            background-repeat: no-repeat; 
            padding-left: 5%; background-repeat: no-repeat;
        }
    
        #rodaje_home{
            background-image: url(imagenes/cel-rodaje.jpg);
            padding-left: 5%;
        }


    #exposiciones{
        border: 0.15em solid #F9A01B ;
        padding:5%; 
        margin-bottom: 10%;
    }

    #intro{padding:5%;}
 
     
/*video responsive*/
    
 video{
     width: 100%;
     height: auto;
 }
#responsive_v{
    width: 100%;
    height: auto;}}

  




/*Para tablet*/


@media screen and (min-width:480px) and (max-width: 768px)
{ 
    
#body_home{
    background-color: #000;
    margin: auto; 
    width: 100%;
    height: 100%; 
    font-size: 80%

}
    #header_home{
        background-repeat: no-repeat;
        background-image: url(imagenes/cel-home.jpg);
        background-size:100%;
        padding: 1em}
    
   #header_home #logo{ width: 100%}

/*botonera de catedra y contacto*/
#header_home nav{width: 30%; float: right}  
#header_home #logo nav ul li {list-style: none;
    }
#header_home #logo nav ul li a{
            color:#000; 
            text-decoration: none;
            font-size: 1.2em;
            margin-right: 0.5em;           
    
    
}

 /*imagen del logo*/
        #header_home img{
            width: 60%;position:relative}
    
/*texto*/
        #tope{display: block; width: 50%;margin-top: 3%; }
        h1{color: #F9A01B; font-size: 1.2em;}
        #p_home{color:#fff; font-size: 1.1em;}
    
#main_home{margin-top: 2em;} 
    
     /*botonera*/
    
#botonera_home ul li a{
    
    width: 49%;
    height: 7em;  
    color:#fff;
    display: inline-block;
    font-size: 1.8em;
    line-height: 7em;
    text-decoration: none;
    text-align: center;
    background-repeat: no-repeat;
    background-size: 100% auto;
    
    
}
   
    
#planificacion_home{     
        background-image: url(imagenes/tab-planif.jpg);
        }
       
#guion_home{     
        background-image: url(imagenes/tab-guion.jpg);
        }
       
#desglose_home{           
            background-image: url(imagenes/tab-desglose.jpg);
            }
    
#rodaje_home{            
            background-image: url(imagenes/tab-rodaje.jpg); 
        }
    
    
#exposiciones{
    width:38%; 
    float:right; 
    border: 0.15em solid #F9A01B ; 
    padding:2%; 
    padding-bottom: 3%; 
    margin-bottom: 10%; 
    margin-top: 5%;
    margin-right: 5%;
}

    #intro{
    padding:5%;
    padding-top: 2%; 
    width:38%; 
    float:left;
    margin-top: 5%;
    margin-right: 2%; } 


    
/*video responsive*/
 video{width: 100%; height: auto;}
#responsive_v{width: 100%; height: auto;}

  
}
        
    
  
/*Para pc*/



@media screen and (min-width:768px) {
    
    *{margin: 0%; padding: 0%;}
    
#body_home{width: 95%;
            background-color: #000;
} 
    
 #header_home{
        background-repeat: no-repeat;
        background-image: url(imagenes/cel-home.jpg);
        background-size:100% ;
	 	height: 23em;
        }
    
    /*imagen del logo*/
#header_home #logo{ 
    padding-top: 1.2em;
    width: 100%;
    height: auto;
}    
#header_home #logo img{
            width: 30%;
            padding-left: 1em;
             }
	
#header_home #logo nav {
	width: 25%;
	float: right;
    margin-right: 2em;
}
	
#header_home #logo nav ul li {
	list-style: none;

}

#header_home #logo nav ul li a{
	display: inline-block;
    color: black;
    width: auto;
    margin-right: 1em;
}
	    

    
/*texto*/
#tope{
    display: block;
    width: 24%;
    padding-top: 1em;
    padding-left: 2em;
    float: left;
             }
    
h1.h-home{
    color: #F9A01B;
    font-size: 1em;
    width: auto;
}
    
#p_home{
    color:#fff;
    font-size: 0.8em;
    
} 
    
#main_home{margin-top:  2em;}     
    
/*botonera*/
    
#botonera_home ul{
    list-style: none;
}
#botonera_home{
	width: 100%;
	text-align: center;
		
}  
    
#botonera_home ul li{
    list-style: none;
}
    
#botonera_home ul li a{    
    width: 22%;
    margin-right: 0.5em;
    height: 15em;  
    color:#fff;
    display: inline-block;
    font-size: 1.8em;
    line-height: 2em;
    text-decoration: none;
	text-align: center;
	background-repeat: no-repeat;
	background-size: 100% auto;
	
}   
    
#guion_home{         
            background-image: url(imagenes/pc-guion.jpg);
            
}
    
#desglose_home{ 
            background-image: url(imagenes/pc-desglose.jpg);
            
}
    
#rodaje_home{           
            background-image: url(imagenes/pc-rodaje.jpg); 
            
}    
	
#planificacion_home{            
            background-image: url(imagenes/pc-planif.jpg);
            
}	

    
    
#exposiciones{
	width:40%; 
	float:right;
	border: .15em solid #F9A01B ;
	padding:1em;
	padding-bottom: 3%;	 
	margin-top: 3%;
	margin-right: 5%;
}

#intro{
		padding:2em;
		padding-top: 1em;
		width:40%; 
		float:left;margin-top: 3%; 
	} 
      
/*video responsive*/
	
 video{
	 width: 100%;
     margin-top: 2em;
	 height: auto;}
	
#responsive_v{
	width: 100%; 
	height: auto;}



}



    /*-------PC -------*/

@media screen and (min-width:960px){

body{
    background-color: #000;
    width: 80%; margin:auto;
    color: #fff;
    
}
#header_pags_internas{background: #000;
    margin: auto;
    width:100%; 
    height:10.5em;
    position: relative;
}
.destacado_header{color:#fff; 
    margin-top: -3em;
    float: left; 
    margin-left:18%;
    position: absolute;
}
main#main_pags{ float: right;width:85%; height: 100em; background: rgb(255, 255, 255);}
#main_pags_contenedor {
    width:92%; 
    height: 210em;
    float: right;
    margin: auto;
}
aside{
    background: rgb(126, 202, 214);
    width:15%; 
    height:210em;
    float: left;
}
footer{
    background: #808080;
    width:100%;
    height: 5em;
    clear: both;
}
h1{
    font-size: 1.5em; 
    font-weight: bolder;
    color:#000;
}
h2{
    font-size: 1em;
    font-weight: bolder;
    color:#000;
    background: #79CED9;
}
h3{
    font-size: 1.5em; 
    font-weight: bolder;
    color:#000;
    background: rgba(121, 206, 217, 0.46);
    text-align: center;
    font-size: 1em; width: 100%;
}
p{
    color: #000;
    text-align: left;
    margin-bottom: 2%;
    font-size: 0.8em;
}
.cajas{
    color: #000;
    text-align: left;
    margin-top: 3%;
    margin-bottom: 3%;
}
h4{
    font-size: 1em;
    color:#000;
}

/*botonera secundaria*/
aside{
    padding-top:2em; 
}
    
aside ul#menu_secundario{
    margin-top: 10%;
    width: 100%;
    list-style: none;
}
    
aside ul#menu_secundario li{
    width: 100%;
    text-align: center; 
    line-height:3em;
    text-decoration: none;

}


aside ul#menu_secundario li#selec{
    background-color: rgba(255, 255, 255, 0.33);
    width: 100%;
    text-align: center; 
    line-height:3em;
    text-decoration: none;

}    

#selectexto{
    display: inline-block;
    text-align: center; 
    font-weight: bolder;
    text-decoration: none;
    color:#00A9AC;
}
    
aside ul#menu_secundario li a{
    display: inline-block;
    text-align: center; 
    font-weight: bolder;
    text-decoration: none;
    color:#000;
}
   
aside ul#menu_secundario li a .boton_borde2{
    background: rgba(255, 255, 255, 0.38); 
    color: #fff;
    width: 100%; }    
    

.botonerasecundaria{line-height: 3em;} 
    
.hr_desglose{ 
    border: 0; 
    border-top: 0.2em solid #00A9AC;
    height:0;
    width: 90%;
    margin-left: 4%;
}
    
.hr_rodaje{
    border: 0; 
    border-top: 0.2em solid #f06e4f;
    height:0;
    width: 90%;
    margin-left: 4%;
}     
    
.hr_montaje{
    border: 0; 
    border-top: 0.2em solid #FAA71C;
    height:0;
    width: 90%;
    margin-left: 4%;
}   
    
.hr_planif{
    border: 0; 
    border-top: 0.2em solid #808284;
    height:0;
    width: 90%;
    margin-left: 4%;
}   
    
/*botonera principal*/
header div{
    padding-top:5em;
    float: right;
    width: 70%;
}    
header nav ul{
    list-style: none;
}
header nav ul li{
    width: 100%;
    text-align: center; 

}
    
 
header nav ul li a{
    display: inline-block;
    width: 24%; 
    text-align: center; 
    font-weight: bolder;
    text-decoration: none;
}
.planificacion{
    background-image: url(imagenes/boton_1.jpg);
    height:4em;
    margin-right: .33%;
    line-height: 5em;
    color: #fff;
    margin: 0%;padding: 0%;
}
.montaje{
    background-image: url(imagenes/boton%20_2.jpg);
    height:4em;
    margin-right: .33%;
    line-height: 5em;
    color: #fff;margin: 0%;padding: 0%;
}
.desglose{
    background-image: url(imagenes/boton%20_3.jpg);
    height:4em;
    margin-right: .33%;
    line-height: 5em;
    color: #fff;margin: 0%;padding: 0%;
}
#en_seccion{
    height:5em;
    line-height: 7em;
    color: #fff;margin: 0%;padding: 0%;
}
.rodaje{
    background-image: url(imagenes/boton_4.jpg);
    height:4em;
    line-height: 5em;
    color: #fff;margin: 0%;padding: 0%;
}





}

/*contenido*/

#contenido{
    width: 90%;
    margin-top:2em; 
}
.sub_caja{
    width:37%;
    display: block;
    margin-bottom: 4%;
    float: right;
}
#caja{
    float:left;
    width: 58%;
}

#caja1,#caja2{
    width: 43%; height: 29em;
    float:left;
    border: solid .15em;
    border-color: #000;
    padding:2%;
    text-align: center; margin-bottom: 4%;
}
#caja2{float: right;}
#caja3{clear:both;}

.m1{width: 100%;
    display: block;
    float: left;}

/*cuadro final negro*/
.m2{
    width: 25%;
    display: block;
    float: left;
}
#texto_maquillaje{
    float: right;
    background: #000;
    width: 65%;
    padding: 2% ;
}
.destacado{color:#fff;
    width: 57%;
    display: block;
    float: left;
    margin-left: 3%;
}
.comillas{
    display: block;
    float:right;
    width: 10%;
}
.comillas2{
    display: block;
    float:left;
    width: 10%; 
}
#fotos_maquillaje{
    float:left;
    width: 30%;
    text-align: center; 
}
.img_sec{
    width: 23%;
    display: inline-block;
    margin-top: 0.3em;
}


    
    
/*casting*/

.casting{
    width: 29%; 
    display: inline-block;
    margin-right: 3%;
    margin-bottom:3%; 
}
    

    
.eleccion{
    width:40%;
    float:left;
    margin-top:4%;
    margin-right: 100%;
    margin-bottom: 7%;
}
.p_actriz{
    color: #000;
    padding: 5%; 
    margin-top: 10%;
}
#datos_a_7 hover:hover {}
#modelo_caja{
    width: 100%;
    height: 20.7em;
    position: relative;
    margin-top: 10%;
}
.modelo1{
   background-image: url(imagenes/primeractriz.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    display: block;
    width: 50%;
    float: left;
    height: 100%;
    position: absolute;
}
.info_actriz{
    display: block;
    width: 49.5%; 
    float:right;
    border: solid .15em;
    border-color: #79CED9;
    /*padding:1%;*/ 
    padding-left: 0%;
    text-align: center;
}
.modelo2{
    background-image: url(imagenes/adrii2.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    display: block;
    width: 50%;
    float: left;
    height: 100%;
    position: absolute;
}

#act{
    width: 31.5%;
    display: inline-block;
    margin-right: 2%;
    margin-bottom:2%;
    overflow: hidden;
    position: relative;
}
    
#act2{
    margin-right: 0%;
    float:right;
    width: 31.5%;
    display: inline-block;
    margin-bottom:2%;
    overflow: hidden;
    position: relative;}
    
#act img{
    width: 100%;
    position: absolute; 
    opacity: 1;
    -webkit-transition: .3s;
    -moz-transition: .3s;
}
    
#act2 img{
    width: 100%;
    position: absolute; 
    opacity: 1;
    -webkit-transition: .3s;
    -moz-transition: .3s;
}   
    
#info_act{
    width: 100%;
    height:13.5em ;
    background: rgba(255, 255, 255, 0.28);
}

#info_act_texto{
    padding-left:  1.2em;
    padding-right:  1.2em;
    padding-top: 0.8em;
    padding-bottom: 0em; }

#act:hover img{opacity:  0.12;}

#act2:hover img{opacity:  0.12;}
    
    
/*locacion*/
#locacion{
    display: block;
    float: left;
    width:30%;
}
#locacion img{width: 100%}
#contenido .loc_5{
    display: block;
    float: right; 
    width:68%;
}
.loc_sec{
    width: 16.14%; 
    display: inline-block;
    margin-top: 0.3em;
}
#locacion2{display: block;
    float: left;
    width:18%;
    height: 20%;
    border: double .5em;
    border-color: rgb(147, 219, 237);
    padding: 5%;
}
#sub_loc{
    display: block;
    color: #000;
    font-weight: bold;
}
.m_loc{
    display: block;
    float: right;
    width:68%;
}
#loc_des{
    margin-top:40%;
    display: block;
    margin-bottom: 5%;
}

#img_loc{height: 5em;}
    
    
/*-----RODAJE-------*/


/*filmacion*/
.m3{
    width: 69%;
    display: block;
    float: right;
    margin-top: 1em;
}
.mf1{
    width: 100%;
    display: block;
    float: left;
    margin-top: 1em;
}
.mf2{
    width: 66%;
    display: block;
    float: left;
    margin-top: 1em;
}
#texto_filmacion{
    float: left;
    background: #000;
    width: 62%;
    padding: 2% ;
    margin-right: .5em;
}
#fotos_filmacion{
    float:right;
    width: 33%;
}
#logros{
    border-bottom: solid 0.2em;
    border-bottom-color: #000;
    width: 100%;
    height: 3em;
    margin-bottom: 1em;
    padding-top: 2em;
}

#rodaje_aside{background: #ffbc99;}
    
#contenedor_slider{
    width: 43%;
    float: left;
        
}    
#contenedor_slider #bxslider{
    width: 100%;
    height: 18em;
}
  

/*---------filmacion 2-----------*/
    
.dia_film{
    background-color: #BBBDC0;
    width: 100%;
    height: 19.8em;
    margin-bottom: 2em;

}
.n_dia{

    border-right: 0.17em solid #808284;
    width: 24.7%;
    height: 2em;
    text-align: center;
    float:left;
        
}
    
.durac_film{
    border-right: 0.17em solid #808284;
    width: 24.7%;
    height: 2em;
    float:left;
}

.escenas_film{
    border-right: 0.17em solid #808284;
    width: 24.7%;
    height: 2em;
    float:left;
}
    
.int_ext{
    width: 24.7%;
    height: 2em;
    float:left;
}
    
.texto_film{
    margin-top: 1em;
    width: 55%;
    float:right;
    padding-right: 2%;
}


    
.reloj{width: 15%; padding-left: 5%;}   
.texto_dias{width: 75%; float:right; padding-left: 2%; }
    
.texto_film_izq{
    margin-top: 1em;
    width: 50%;
    float:left;
}

#txt_dia2{padding-left: 6%;}
    
.txt_tabla_film{
    text-align: center; 
    line-height: 2.3em;
}
    
.testimonio_film{
    background: #000;
    width: 100%;
    height: 10em;
    padding: 2% ;  
    margin-top: 2em;
    
}
   
.foto_testimonio1{
    width: 38%;
    display: block;
    float: right;
    padding-right: 2%;
}
    
.txt_testimonio1{
    color:#fff;
    width: 51%;
    display: block;
    float: left; clear:both; 
    padding-left: 4%;
}
    
.comillas3{
    display: block;
    float:left;
    width: 10%; 
    padding-left: 4%;
}    
    
.dia_film #video{
    width:  48%;
    float:right;
    height:  17.5em;
    overflow: hidden;
    text-align:center
}
 .dia_film #video video{
     height: 17.5em;
     width: auto;
     text-align: center;
     
 }
    
    
    
    
    
/*Equipos*/
#gastos{
    float: right;
    border: double .5em;
    border-color: rgba(128, 128, 128, 0.26); 
    padding: 3%;  
    padding-top: 0.8em; 
    height: 10em;
    width: 23%;
    display: inline-block;
    margin-bottom:3%;
    margin-top:5%;
}
    
    
        
#alquiler{margin-top: 30em;}

.img_equipos{
    width: 100%;
}
.equipos{
    width: 31%;
    display: inline-block;
    margin-right: 3%;
    margin-bottom:3%;
    margin-top:5%;
    height: 10em;
}
#equipos3{
    width: 31%;
    display: inline-block;
    float:right;
    margin-bottom:3%;
    height: 10em;
    margin-top:5%;
}
.texto_eq{
    text-align: center;
}
.slide_equipos{
    width: 32.9%; 
    display: inline-block;
}


/*-------Iluminacion-------*/
    
.ilumin_escena{
    width: 49%;
    float:left;
    margin-bottom: 0.5em;
}
    
.planta{
    width: 38%;
    float:right;
    background-color: #444;
    
}
    
.ilum_txt_escenas{
    clear:both;
    margin-bottom: 2em;
}   
    
#juego{ width: 100%;}    
    
/*-----PLANIFICACION-------*/
/*Story*/
    
#story{
    margin-right: 0%;
    width: 31.5%;
    display: inline-block;
    margin-bottom:2%;
    overflow: hidden;
    position: relative;
    
}

.story_img{
    width: 100%;
    position: absolute; 
    opacity: 1;
    -webkit-transition: .4s;
    -moz-transition: .4s
    
}

.story_img2{
    width: 100%;  
}


#story:hover .story_img {opacity: 0}

/*GUION*/
#fondointerior{background: rgba(204, 206, 208, 0.4);}
#planificacion_aside{background: #BBBDC0;}
    
#idea_col1{
    width: 28%; 
    float:left;
    background-color: #BBBDC0; 
    padding: 2%;
    margin: auto;
}
    
#lamparita{
    float:right;
}      
#ideas_selec{
    width: 100%;
} 
#idea_col2{
    width: 65%; 
    float:left; 
    padding-left: 2%;
}
#ideaelegida{
    width: 100%;
    height: 21em;
    
}    
   
.idea_guion{width: 100%; }
#subtitulo_idea{
    
    font-size: 1.05em;
    line-height: 1.05em;
    margin-top: 5%;
    margin-bottom: 5%; float:left;
}   
    
    
#texto_idea_selec{
    margin-bottom: 0.5em;
}    
    
#idea_col3{
    width: 44%;
    float:left;
    padding: 2%;
    background-color: #BBBDC0;
    height: 22em;

}    
    
#idea_col4{
    width: 44%;
    float:right;
    padding: 2%;
    height: 22em;
    background-color: #BBBDC0;

}     
    

/*roles*/
#texto_analisis{
    float: right;
    background: #000;
    width: 60%;
    padding: 1em;
    margin-bottom: 1em;
}
.destacado_analisis{
    color:#fff;
    width: 70%;
    display: block;
    float: right;
}

.iconos_roles{
    float:left;
    width: 35.3%;
    text-align: center;
}  
    
    
/*analisis*/
#analisis{
    width: 70%;
    margin-left: 15%;
}



/*idea*/

#idea1{
    width: 25%;
    height:17em ;
    float: left;
    overflow: hidden;
    -webkit-transition: .3s;
    -moz-transition: .3s;
}
#idea1 img{width: 90%;}
#idea1:hover {height: auto;}
#idea1:hover img{border:0.5em double black; }

#idea2{
    width: 25%;
    height:17em ;
    float: right;
    overflow: hidden;
    -webkit-transition: .3s;
    -moz-transition: .3s;
}
#idea2 img{width: 90%;}
#idea2:hover {height: auto;}
#idea2:hover img{border:0.5em double black;}
#idea2:hover #info_idea{}

#idea3{
    width: 18.5%;
    height:18em;  
    position: absolute; 
    margin-top: -10em;
    overflow: hidden;
    -webkit-transition: .3s;
    -moz-transition: .3s;
}
#idea3 img{width: 90%;}
#idea3:hover {height: auto;}
#idea3:hover img{border:0.5em double black; }

#idea4{
    width: 18.5%;
    height:18em;
    position: absolute;
    margin-top: -10em; 
    margin-left: 55%; 
    overflow: hidden;
    -webkit-transition: .3s;
    -moz-transition: .3s;
}
#idea4 img{width: 90%;}
#idea4:hover {height: auto;}
#idea4:hover img{border:0.5em double black;}
#idea4:hover #info_idea{}

#idea5{
    width: 25%;
    height:17em ; 
    clear:both;
    overflow:hidden;
    margin-top: 10em;
    -webkit-transition: .3s;
    -moz-transition: .3s;
}
#idea5 img{width: 90%;}
#idea5:hover {height: auto;}
#idea5:hover img{border:0.5em double black;}


#info_idea{
    width: 100%;
    height:9em ;
}
#info_idea_texto h1{ 
    text-align: center;
    font-size: 1em;
}
#info_idea_texto{padding:0.5em}
input{margin: 1em;}
#foco{display: block;
    padding: 2em;
    padding-top:2em;
    width: 35%;
    position: relative;
}


/* Personajes */

#perscol1{
    width: 50%;
    float:left;
    padding-right: 3%;
}
#subtitulo{
    text-align: center;
    margin-top: 5%;
    margin-bottom: 3%;
}
#aspectos{
    border: double .5em;
    border-color: rgba(128, 128, 128, 0.26);
    width: 100%;
    height: 14.3em;
}
#aspectos1{
    width: 40%;
    float:left;
    padding:3%;
    margin-left: 4%;
}
#aspectos2{
    width: 40%;
    float:left;
    padding:3%;
}
#anotadorpersonaje{
    width: 45%; 
    margin-left: 2%;
    margin-bottom: 3%;
}
.fotoreferencia{width:100%;}
#personaje1{
    width: 45%;
    float:left;
    text-align: center; 
}
#personaje2, #personaje4{
    width: 45%;
    float:right;
    text-align: center; 
}
#personaje3{
    width: 45%;
    float:left;
    text-align: center; 
    clear:both;
    margin-top: 2em;
}
#personaje4{margin-top: 2em;}
.cajastexto{
    color: #000;
    text-align: left;
    margin-bottom: 3%;
    border: solid .15em;
    border-color: #BBBDC0;

}
.nombrepersonaje{
    height: 2em;
    line-height: 2em;
    font-size: 1em;
    font-weight: bolder;
    color:#000;
    text-align: center;
    background: #BBBDC0;
}
.infopersonaje{
    padding:4%; padding-top: 0.2em;

}



/* Estética */


#texto_estetica{
    width: 30%;
    float:right; margin-bottom: 4em;}

.estetica_referencias{
    height: 15.5em;
    margin-bottom: 3em;
}

.estetica_referencias_texto{
    width: 44%;
    height: 92%;
    background-color: #BBBDC0; 
    float:left; 
    padding-left:3%;  padding-right:3%; padding-top: 3%;  
}

#subtitulo2{
    clear:both;
    margin-top: 7em;
    text-align: center;
    font-size: 1em;
}
.est_fotos{
    width: 50%;
    height: 100%;
    float: right;
}


  
    
    
    
    
    
    
/*-------MONTAJE-----------*/
/* Video */
#montaje_aside{background: #F8DF89;}
    
    
#foto_edicion{
    width: 100%;
    height: 100%;
    
}

#video_col1{
    width: 48%;
    height: 30em;
    float:left;
    margin-top: 5%;
    padding-right: 2%;
}

#video_col2{
    width: 50%;
    height: 30em;
    float:right; 
    margin-top: 5%;
}

#foto_editando{
    width: 100%;
}
#testimonio{
    background: #000;
    width: 96%; height: 10em;
    padding: 2% ;
    margin-top: 1%;
}



/* Audio */

#texto_audio{
    width: 48%;
    float:left; 
    padding-right: 2%;
}

#testimonio_audio{
    width: 46%;
    height: 8em; margin-bottom: 3em; background-color: #000;
    float:right; padding: 2% ;
}



    
#audio_interna1{
    width: 51.6%; float:left;
}
    

#audio_interna2{
    width: 47.8%; float:right;
}
    
    
}