@charset "utf-8";
/* CSS Document */


#main{
    display: block;
    min-height: 576px;
    height:auto;
    margin-bottom: 3%;
    position: relative;
    width: 1024px;
}

#escenario4_antes{
    background-image:url(../images/impermeabilizacion_cubiertas/antes/inmueble.png);
    background-color:#FFF;
    background-repeat:no-repeat;
    display: block;
    height: 576px;
    margin-top:30px;
    position: relative;
    width: 1024px;
}



#antes1, #antes2, #antes3, #antes4, #antes5, #antes6,
#antes1:hover, #antes2:hover, #antes3:hover, #antes4:hover, #antes5:hover, #antes6:hover{
    background-color:transparent;
    display: block;
    position: absolute;
    background-repeat:no-repeat;
}

#antes1:hover, #antes2:hover, #antes3:hover, #antes4:hover, #antes5:hover, #antes6:hover{
    cursor:pointer;
}

#antes1{
    background-image:url(../images/impermeabilizacion_cubiertas/antes/character_working_method_off.png);
    width:202px;
    height:247px;
    left: 49px;
    top: 8px;
}


#antes1:hover{
    background-image:url(../images/impermeabilizacion_cubiertas/antes/character_working_method_on.png);
    width:202px;
    height:246px;
}


#antes2{
    background-image:url(../images/impermeabilizacion_cubiertas/antes/character_hot_work_permit_off.png);
    width:200px;
    height:179px;
    left: 445px;
    top: 16px;
}

#antes2:hover{
    background-image:url(../images/impermeabilizacion_cubiertas/antes/character_hot_work_permit_on.png);
    width:200px;
    height:178px;
}

#antes3{
    background-image:url(../images/impermeabilizacion_cubiertas/antes/character_matters_related_off.png);
    width:466px;
    height:199px;
    left:551px;
    top: 200px;
}

#antes3:hover{
    background-image:url(../images/impermeabilizacion_cubiertas/antes/character_matters_related_on.png);
    width:466px;
    height:198px;
}

#antes4{
    background-image:url(../images/impermeabilizacion_cubiertas/antes/character_areas_underneath_the_roof_off.png);
    width:441px;
    height:278px;
    left:295px;
    top:298px;
   /* z-index:10;*/
}

#antes4:hover{
    background-image:url(../images/impermeabilizacion_cubiertas/antes/character_areas_underneath_the_roof_on.png);
    width:441px;
    height:278px;
}

#antes5{
    background-image:url(../images/impermeabilizacion_cubiertas/antes/ccharacter_preparing_work_environment_off.png);
    width:131px;
    height:229px;
    left:275px;
    top:88px;
}

#antes5:hover{
    background-image:url(../images/impermeabilizacion_cubiertas/antes/ccharacter_preparing_work_environment_on.png);
    width:130px;
    height:228px;
}


#antes6{
    background-image:url(../images/impermeabilizacion_cubiertas/antes/character_emergency_fire_extinguishing_off.png);
    width:247px;
    height:223px;
    left:599px;
    top:56px;
}

#antes6:hover{
    background-image:url(../images/impermeabilizacion_cubiertas/antes/character_emergency_fire_extinguishing_on.png);
    width:246x;
    height:222px;
}

#antes1 #txt1, #antes2 #txt2, #antes3 #txt3, #antes4 #txt4, #antes5 #txt5, #antes6 #txt6{
    display:none;
}

#antes1:hover #txt1, #antes2:hover #txt2, #antes3:hover #txt3, #antes4:hover #txt4, #antes5:hover #txt5, #antes6:hover #txt6{
    display:block;
    background:rgba(255,255,255,0.92);
    background-repeat:no-repeat;
	background-size: 100% 100%;
    height: auto;
    width: 309px;
    position: absolute;
    padding:10px 35px;
	z-index:30;
	border: 1px solid #000;
	-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
	-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
	box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
}

#antes1:hover #txt1{
    left: 590px;
    top: 125px;
}


#antes2:hover #txt2{
   left: -435px;
   top: 117px;
}


#antes3:hover #txt3{
    left: -541px;
    top: -67px;
}


#antes4:hover #txt4{
   	left: 344px;
    top: -165px;
}

#antes5:hover #txt5{
    left: -265px;
    top: 45px;

}


#antes6:hover #txt6{
    left: -589px;
    top: 77px;
}



h1{
    color:#fe0000;
    font-size:14px;
    font-family: 'Dosis', sans-serif;
    letter-spacing:0.5px;
    padding-top: 60px;
}


h2{
    color:#fe0000;
    font-size:14px;
    font-family: 'Dosis', sans-serif;
    letter-spacing:0.5px;
    padding-top: 50px;
	background-image:url(../images/logo_cepreven.png);
	background-repeat: no-repeat;
    background-size: 35%;
    background-position: left top;
}

p{
    color: #343434;
    font-size:14px;
    font-family: 'Dosis', sans-serif;
    text-align:justify;
}



.clear{
    clear:both;
}


/*Durante*/

#escenario4_durante{
    background-image:url(../images/impermeabilizacion_cubiertas/durante/inmueble.png);
    background-color:#FFF;
    background-repeat:no-repeat;
    display: block;
    height: 576px;
    margin-top:30px;
    position: relative;
    width: 1024px;
}



#durante1, #durante2, #durante3, #durante4,
#durante1:hover, #durante2:hover, #durante3:hover, #durante4:hover{
    background-color:transparent;
    display: block;
    position: absolute;
    background-repeat:no-repeat;
}


#durante1:hover, #durante2:hover, #durante3:hover, #durante4:hover{
    cursor:pointer;
}

#durante1{
    background-image:url(../images/impermeabilizacion_cubiertas/durante/characters_hot_work_guarding_off.png);
    width:87px;
    height:204px;
    left: 492px;
    top: 165px;
}


#durante1:hover{
    background-image:url(../images/impermeabilizacion_cubiertas/durante/characters_hot_work_guarding_on.png);
    width:86px;
    height:202px;
}


#durante2{
    background-image:url(../images/impermeabilizacion_cubiertas/durante/character_tool_condition_and_handling_off.png);
    width:304px;
    height:108px;
    left: 55px;
    top: 150px;
}

#durante2:hover{
    background-image:url(../images/impermeabilizacion_cubiertas/durante/character_tool_condition_and_handling_on.png);
    width:304px;
    height:107px;
}

#durante3{
    background-image:url(../images/impermeabilizacion_cubiertas/durante/character_removing_waste_generated_during_work_off.png);
    width:110px;
    height:180px;
    left: 704px;
    top: 70px;
}

#durante3:hover{
    background-image:url(../images/impermeabilizacion_cubiertas/durante/character_removing_waste_generated_during_work_on.png);
    width:108px;
    height:178px;
}

#durante4{
    background-image:url(../images/impermeabilizacion_cubiertas/durante/character_safety_distances_for_bitumne_kettles_off.png);
    width:234px;
    height:134px;
    left: 455px;
    top: 50px;
}

#durante4:hover{
    background-image:url(../images/impermeabilizacion_cubiertas/durante/character_safety_distances_for_bitumne_kettles_on.png);
    width:233px;
    height:133px;
}



#durante1 #txt1, #durante2 #txt2, #durante3 #txt3, #durante4 #txt4{
    display:none;
}

#durante1:hover #txt1, #durante2:hover #txt2, #durante3:hover #txt3, #durante4:hover #txt4{
    display:block;
     background:rgba(255,255,255,0.92);
    background-repeat:no-repeat;
	background-size: 100% 100%;
    height: auto;
    width: 309px;
    position: absolute;
    padding:10px 35px;
	z-index:20;
	border: 1px solid #000;
	-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
	-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
	box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
}

#durante1:hover #txt1{
    left: -495px;
    top: 60px;
}


#durante2:hover #txt2{
   	left: -58px; /*582px;*/
    top: 75px; /* 65px;*/
}


#durante3:hover #txt3{
    left: -707px; /* -67px;*/
    top: 155px; /* 145px;*/
}


#durante4:hover #txt4{
    left: -458px; /*182px;*/
    top: 175px; /*165px;*/
}


/*DESPUÉS*/

#escenario4_despues{
    background-image:url(../images/impermeabilizacion_cubiertas/despues/inmueble.png);
    background-color:#FFF;
    background-repeat:no-repeat;
    display: block;
    height: 576px;
    margin-top:30px;
    position: relative;
    width: 1024px;
}



#despues1, #despues2, #despues3,
#despues1:hover, #despues2:hover, #despues3:hover{
    background-color:transparent;
    display: block;
    position: absolute;
    background-repeat:no-repeat;
}

#despues1:hover, #despues2:hover, #despues3:hover{
    cursor:pointer;
}

#despues1{
    background-image:url(../images/impermeabilizacion_cubiertas/despues/character_spot_vulnerable_to_leakages_off.png);
    width:126px;
    height:185px;
    left: 796px;
    top: 219px;
}


#despues1:hover{
    background-image:url(../images/impermeabilizacion_cubiertas/despues/character_spot_vulnerable_to_leakages_on.png);
    width:124px;
    height:184px;
}


#despues2{
    background-image:url(../images/impermeabilizacion_cubiertas/despues/character_post_inspection_and_notification_off.png);
    width:195px;
    height:186px;
    left: 171px;
    top: 64px;
}

#despues2:hover{
    background-image:url(../images/impermeabilizacion_cubiertas/despues/character_post_inspection_and_notification_on.png);
    width:194px;
    height:184px;
}

#despues3{
    background-image:url(../images/impermeabilizacion_cubiertas/despues/character_hot_work_guarding_off.png);
    width:85px;
    height:198px;
    left: 576px;
    top: 41px;
}

#despues3:hover{
    background-image:url(../images/impermeabilizacion_cubiertas/despues/character_hot_work_guarding_on.png);
    width:84px;
    height:196px;
}



#despues1 #txt1, #despues2 #txt2, #despues3 #txt3{
    display:none;
}

#despues1:hover #txt1, #despues2:hover #txt2, #despues3:hover #txt3{
    display:block;
     background:rgba(255,255,255,0.92);
    background-repeat:no-repeat;
	background-size: 100% 100%;
    height: auto;
    width: 309px;
    position: absolute;
    padding:10px 35px;
	z-index: 20;
	border: 1px solid #000;
	-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
	-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
	box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
}

#despues1:hover #txt1{
   	left: -790px;
    top: 40px;
}


#despues2:hover #txt2{
    left: -165px;
    top: 195px;
}


#despues3:hover #txt3{
    left: -570px;
    top: 218px;
}