@import url(./common.css);

/*TAB1*/
#tabs1 .content{
	background-image: url(../img/ACT3/SB_L_G10_U04_L02_act3_fondo01.png);
    background-position: 50% 100%;
}
#tabs1 .content p{
    position: absolute;
    top: 230px;
    font-size: 1.4em;
    color: white;
}
#tabs1 .content p:nth-child(2){
    left: 100px;
}
#tabs1 .content p:nth-child(3){
    left: 540px;
}
#tabs1 .content h4{
    font-size: 1.8em;
    position: absolute;
    left: 100px;
    top: 77px;
    color: white;
}
/*END TAB1*/

/*TAB2*/
.box{
	position: absolute;
	background-repeat: no-repeat;
	display: none;
}
.box p{
    padding: 20px;
    font-size: 1.35em;
    margin: 0px 20px 0px 20px;
    color: white;
}
#box21{
	width: 566px;
	height: 98px;
	background-image: url(../img/ACT3/SB_L_G10_U04_L02_act3_fondo02.png);
	left: 135px;
	top: 87px;
	display: block;
	z-index: 4;
}
#box22{
	width: 384px;
	height: 469px;
	background-image: url(../img/ACT3/SB_L_G10_U04_L02_act3_frame01.png);
    left: 77px;
	top: 172px;
	z-index: 3;
}
#box23{
	width: 342px;
	height: 387px;
	background-image: url(../img/ACT3/SB_L_G10_U04_L02_act3_frame02.png);
    left: 455px;
    top:216px;
    z-index: 2;
}
#box24{
	width: 342px;
	height: 387px;
	background-image: url(../img/ACT3/SB_L_G10_U04_L02_act3_frame02.png);
    left: 792px;
    top: 216px;
    z-index: 1;
}
#box21 p, #box31 p{
    font-size: 2em;
    font-weight: bold;
}
#box24 p{
	margin-top: 44px;
}
.button{
	width: 41px;
	height: 43px;
	background-repeat: no-repeat;
	background-image: url(../img/ACT2/SB_L_G11_U01_L03flechaabajo.png);
	position: relative;
	cursor: pointer;
	-webkit-transition: all 1s;
	transition: all 1s;
}
#box21 .button{
    top: -7px;
    left: 150px;
    -moz-transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
	transform: rotate(180deg);
}
#box22 .button{
    top: 213px;
    left: 356px;
}
#box23 .button{
    top: 170px;
    left: 319px;
}
#box22 .button, #box23 .button{
	-moz-transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
}
#box21 .button.active, #box31 .button.active{
	-moz-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
}
#box22 .button.active, #box23 .button.active,  #box32 .button.active{
	-moz-transform: rotate(-90deg);
	-webkit-transform: rotate(-90deg);
	transform: rotate(-90deg);
}
/*END TAB2*/

/*TAB3*/
/*tiene css comun con tab2*/
#box31{
	width: 576px;
	height: 106px;
	background-image: url(../img/ACT3/SB_L_G10_U04_L02_act3_fondo03.png);
	display: block;
    left: 161px;
    top: 75px;
    z-index: 3;
}
#box32{
	width: 587px;
	height: 472px;
	background-image: url(../img/ACT3/SB_L_G10_U04_L02_act3_frame04.png);
    left: 110px;
    top: 160px;
    z-index: 2;
}
#box33{
	width: 411px;
	height: 472px;
	background-image: url(../img/ACT3/SB_L_G10_U04_L02_act3_frame05.png);
    left: 688px;
    top: 160px;
    z-index: 1;
}
 #box31 p{
    margin-top: 8px;
}
#box32 p{
    margin-left: 70px;
    margin-top: 28px;
}
#box33 p{
	margin-top: 73px;
}
#box31 .button{
    left: 120px;
    top: -10px;
    -moz-transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
	transform: rotate(180deg);
}
#box32 .button{
    top: 201px;
    left: 564px;
    -moz-transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
}
/*END TAB3*/

/*TAB4*/
#tabs4 .content{
	background-image: url(../img/ACT3/SB_L_G10_U04_L02_act3_fondo04.png);
	height: 664px;
}
#tabs4 .content p{
    position: absolute;
    left: 660px;
    top: 210px;
    font-size: 1.5em;
    color: white;
}
/*END TAB4*/