/* tabs 3 */
#tabs1 .video{ 
    position: absolute;
	top:130px;
	left:10px; 
}
#tabs1 >span{ 
	position: absolute;
	top:30px;
	left:40px;
	margin:0;
} 
#tabs1 >strong{
 	color: #5D6162;
	font-size: 1.5em;
	position: absolute;
	top:70px;
	left:40px;
} 
 
#tabs1 >div[data-sg-id="btn-popup"] {
	position: absolute;
    top: 300px;
	left:1010px;
}

div[data-sg-id="item-popup"][data-sg-key="tres1_1"]{  
    width: 820px;
	height: 418px;
}

div[data-sg-id="item-popup"]{
	color: black;
	font-size: 1.59em;
	padding: 25px;
	line-height: 1.5em
}

div[data-sg-id="item-popup"] li{
   list-style: none;
	 margin: 0px 0px 7px -8px;
}

div[data-sg-id="item-popup"] ul{
    position: absolute;
    top: 82px;
	left:50px;
	width: 750px;
	height: 368px;
}

div[data-sg-id="item-popup"] ul:nth-child(2){top:180px;}


/* tabs 2 */
#tabs2 ul{
  font-size: 1.7em;
  width: 1020px;
  height: 234px;
  margin-top: 40px;
  position: absolute;
  top: 50px;
  left: 50px;
}

#tabs2 ul li{
  line-height: 1.24em;
  margin: 0px;
  position: relative;
}
#tabs2 ul li:before{
  content: " ";
  position: absolute;
  background: #00CFCF;
  position: absolute;
  display: inline-block;
  width: 15px;
  height: 15px;
  border-radius: 4px; 
  top: 10px;
  left: -25px;
}


#tabs2 img{
  position: absolute;
  top: 100px;
  left: 60px;
  right: 50px;
}




/* tabs 4 */
#tabs4 img{
  position: absolute;
  top: 100px;
  left: 60px;
  right: 50px;
}


#tabs4 h3{
  color: white;
  position: absolute;
  top: 90px;
  left: 130px;
  width: 670px;
  height: 89px;
  font-size: 1.45em;
}

#tabs4 p{width: 690px; height: 320px;position: absolute;}
#tabs4 p:nth-child(odd){top:290px;left: 108px;}
#tabs4 p:nth-child(even){top:190px;left: 108px;}

/*  otros */
.icon_close_button{
  top: 7px;
}

 
/* FORCES GAME */
#forces_game2 *{ position: absolute; }
#forces_game2 {   
  background: url(../img/act3/SB_S_G10_U01_L05fondojuegoflechas.png) no-repeat;
  position: absolute;
  top: 55px;
  left: 18px;
  width: 1202px;
  height: 593px;
}
#forces_game2 .dragDrop2{   top: 0; left: 705px; width: 500px; height: 295px; padding: 20px 20px; }
#forces_game2 .dragDrop2 *{ position: relative !important; display: inline-block; }
.box2:before{
  position: absolute;
  top: -28px;
  left: -40px;
  width: 130px;
  text-align: center;
}


.box2, .box2:after{ 
  position: absolute;
  margin: 20px 27px; 
  cursor: pointer;
  display: inline-block;
  width: 54px;
  height: 53px;
  border-radius: 27px; 
  box-shadow: 0 0 0 rgb(10, 10, 10);
  transition: box-shadow 0.3s, margin 0.3s, transform 0.5s;
  -webkit-transition: box-shadow 0.3s, margin 0.3s, -webkit-transform 0.5s;
}
.box2:after{  
  position: absolute;
  content: " ";
  background: url(../img/act3/SB_S_G10_U01_L05act3boton2.png) no-repeat center center;
  width: 54px;
  height: 53px;
  border-radius: 27px; 
  border: 4px solid rgba(96, 96, 1, 0);
  box-shadow: 0 0 0 rgb(10, 10, 10);
  transition: box-shadow 0.3s, margin 0.3s, transform 0.5s;  
  -webkit-transition: box-shadow 0.3s, margin 0.3s, -webkit-transform 0.5s;  
  top: -20px;
  left: -27px;
  display: inline-block;
}
#drag1:before{ content: "F. Normal 1"}
#drag2:before{ content: "F. Normal 2"}
#drag3:before{ content: "F. Tensión 1"}
#drag4:before{ content: "F. Tensión 1"}
#drag5:before{ content: "F. Tensión 2"}
#drag6:before{ content: "F. Tensión 2"}
#drag7:before{ content: "F. Peso 1"}
#drag8:before{ content: "F. Peso 2"}
#drag9:before{ content: "F. Peso 3"}
#drag10:before{ content: "F. Rozamiento 1"}
#drag11:before{ content: "F. Rozamiento 2"}
#drag10{ margin-right: 65px !important; }

.box2.active, .box2.ui-draggable-dragging, .box2:active{ 
  margin: 0; 
  cursor: auto;
}
.box2.ui-draggable-dragging:after{
  background: url(../img/act3/SB_S_G10_U01_L05botonestados1.png) no-repeat center center;  
  border-color: white; 
}
.box2.ui-draggable-dragging:active:after, .box2.ui-draggable.ui-draggable-dragging.active:after{ 
  background: url(../img/act3/SB_S_G10_U01_L05botonestados2.png) no-repeat center center;  
  border-color: rgba(96, 96, 1, 1); 
}
.box2:hover{ box-shadow: 0 0 7px rgb(50,50,50); }
.box2:active, .box2:active:after, .box2:active:before{ cursor: move; }
.box2.ui-draggable-dragging:active {cursor: pointer;}

.box2.ui-draggable-dragging[data-sg-selected="#drop1"]:before,
.box2.ui-draggable-dragging[data-sg-selected="#drop2"]:before,
.box2.ui-draggable-dragging[data-sg-selected="#drop10"]:before{
    top: 17px !important; left: 58px !important; text-align: left;
}
.box2.ui-draggable-dragging[data-sg-selected="#drop6"]:before{
    top: 58px; left: -13px; text-align: left;
}
.box2.ui-draggable-dragging[data-sg-selected="#drop4"]:before{
    text-align: right; left: -79px;
}
.box2.ui-draggable-dragging.correct:after{  
  background: url(../img/act3/SB_S_G10_U01_L05botonestados4.png) no-repeat center center;
  /*border-color: rgba(96, 96, 1, 1) !important; */
  box-shadow: none;
  border: none;
} 
.box2.ui-draggable-dragging.correct:active,
.box2.ui-draggable-dragging.correct:hover{  box-shadow: none; cursor: auto;}




#forces_game2 .drop{ 
  background: url(../img/act3/SB_S_G10_U01_L05act3boton4.png) no-repeat;
  width: 53px;
  height: 54px;
  display: inline-block;
}
#forces_game2 .drop:nth-child(1){  top: 496px; left: 100px; }
#forces_game2 .drop:nth-child(2){  top: 428px; left: 170px; }
#forces_game2 .drop:nth-child(3){  top: 340px; left:  91px; }
#forces_game2 .drop:nth-child(4){  top: 291px; left: 203px; }
#forces_game2 .drop:nth-child(5){  top: 232px; left: 330px; }
#forces_game2 .drop:nth-child(6){  top: 300px; left: 348px; }
#forces_game2 .drop:nth-child(7){  top: 300px; left: 445px; }
#forces_game2 .drop:nth-child(8){  top: 192px; left: 445px; }
#forces_game2 .drop:nth-child(9){  top: 235px; left: 543px; }
#forces_game2 .drop:nth-child(10){ top: 336px; left: 628px; }
#forces_game2 .drop:nth-child(11){ top: 500px; left: 630px; }
#forces_game2 .drop.fill{ opacity: 0; }


#forces_game2 .directions{ top: 356px; left: 964px; width: 215px; height: 215px; }
#forces_game2 .directions:before{
  content: url(../img/act3/SB_S_G10_U01_L05act3fondo4.png);
  opacity: 1;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
}
#forces_game2 .directions.active:before{
  opacity: 0;
}

#forces_game2 .directions span{
    background: rgba(0,0,0,0.0);
    width: 40px;
    height: 40px;
    border-radius: 20px;
    border: 4px solid rgba(100, 100, 100, 0);
    cursor: pointer;
    box-shadow: box-shadow: 0 0 0 rgba(0,0,0,1); 
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
}
#forces_game2 .directions span:active{ border-color: rgba(100, 100, 100, 1); }
#forces_game2 .directions span:hover{ box-shadow: 0 0 10px rgba(0,0,0,1); }
#forces_game2 .directions span:nth-child(1){  top:  88px; left: 157px; }
#forces_game2 .directions span:nth-child(2){  top:  38px; left: 137px; }
#forces_game2 .directions span:nth-child(3){  top:  15px; left:  87px; }
#forces_game2 .directions span:nth-child(4){  top:  38px; left:  35px; }
#forces_game2 .directions span:nth-child(5){  top:  88px; left:  15px; }
#forces_game2 .directions span:nth-child(6){  top: 137px; left:  35px; }
#forces_game2 .directions span:nth-child(7){  top: 160px; left:  87px; }
#forces_game2 .directions span:nth-child(8){  top: 137px; left: 137px; }



span#tres3_1{ top: 15px; left: 650px; }
span#tres3_2{ 
  top: 380px;
  right: 255px;
  text-align: right;
  font-size: 1.1em;
  width: 164px;
}
span#tres3_2 img{ position: relative !important;}
span[data-sg-id="item-popup"][data-sg-key="tres3_1"]{   
  background: url(../img/act3/SB_S_G10_U01_L05fondopop2.png) no-repeat;
}
span[data-sg-id="item-popup"][data-sg-key="tres3_2"]{   
  background: url(../img/act3/SB_S_G10_U01_L05fondopop1.png) no-repeat;
}
span[data-sg-id="item-popup"].help{ width: 1203px; height: 595px; z-index: 999; }
span[data-sg-id="item-popup"][data-sg-key="tres3_1"] .icon_close_button{ top: -3px; right: 558px; }
span[data-sg-id="item-popup"][data-sg-key="tres3_2"] .icon_close_button{ top: 356px; right: 306px; }
span[data-sg-id="item-popup"].help .icon_close_button:before,
span[data-sg-id="item-popup"].finish .icon_close_button:before{
  content: " ";
  background: url(../img/close_button.png) no-repeat;
  background-size: 100% 100%;
  display: inline-block;
  height: 30px;
  width: 30px;
}
span[data-sg-id="item-popup"].help p{ 
  font-size: 0.7em; 
  line-height: 1.2em; 
  font-weight: bolder; 
} 
span[data-sg-id="item-popup"][data-sg-key="tres3_1"] p{  top: 8px; left: 345px; width: 280px; }
span[data-sg-id="item-popup"][data-sg-key="tres3_2"] p{  top: 369px; left: 573px; width: 315px; }



div.box2[data-sg-direction="0"]:after    {  transform: rotate(  0deg); -webkit-transform: rotate(  0deg);}
div.box2[data-sg-direction="45"]:after   {  transform: rotate( 45deg); -webkit-transform: rotate( 45deg);}
div.box2[data-sg-direction="90"]:after   {  transform: rotate( 90deg); -webkit-transform: rotate( 90deg);}
div.box2[data-sg-direction="125"]::after {  transform: rotate(133deg); -webkit-transform: rotate(133deg);}
div.box2[data-sg-direction="180"]::after {  transform: rotate(180deg); -webkit-transform: rotate(180deg);}
div.box2[data-sg-direction="225"]::after {  transform: rotate(225deg); -webkit-transform: rotate(225deg);}
div.box2[data-sg-direction="270"]::after {  transform: rotate(270deg); -webkit-transform: rotate(270deg);}
div.box2[data-sg-direction="315"]::after {  transform: rotate(315deg); -webkit-transform: rotate(315deg);}



#forces_game2 .controls{ 
  width: 76px;
  height: 76px;
  border-radius: 38px;
  background: rgba(0,0,0, 0.2);
  cursor: auto;
  border: 8px solid rgba(0,0,0,0);  
  left: 0;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
}
#forces_game2 .controls.ready{ background: rgba(0,0,0,0); cursor: pointer; }
#forces_game2 .controls.ready:active{ border-color: rgba(0,0,0, 0.5); }

#forces_game2 .start{  top:  59px; }
#forces_game2 .verify{ top: 182px; }


div[data-sg-id="item-popup"][data-sg-key="tres3_3"]{   
  background: url(../img/act3/SB_S_G10_U01_L05act3popup1.png) no-repeat;
  height: 479px;
  width: 637px;
  padding: 330px 128px 0 176px;
  font-size: 1.5em;
  text-align: center;
  font-weight: bold;
  color: white;
  margin: -100px -80px;
}
div[data-sg-id="item-popup"][data-sg-key="tres3_4"]{   
  background: url(../img/act3/SB_S_G10_U01_L05act3popup2.png) no-repeat;
  height: 480px;
  width: 510px;
  padding: 364px 28px 0 74px;
  font-size: 1.5em;
  text-align: center;
  font-weight: bold;
  color: white;
  margin: -100px -80px;
  line-height: 1.2em;
}
div[data-sg-id="item-popup"][data-sg-key="tres3_3"] .icon_close_button{ top: 100px; right: 14px; } 
div[data-sg-id="item-popup"][data-sg-key="tres3_4"] .icon_close_button{ top: 147px; right: 27px; } 


#forces_game2 .controls.start.finish{background: #E4E4E4; cursor: auto;}


div[data-sg-id="item-popup"][data-sg-key="tres3_0"]{
  background:  url(../img/act3/SB_S_G10_U01_L05act3fondo3.png) no-repeat;  
  width: 496px;
  height: 347px;
}
div[data-sg-id="item-popup"][data-sg-key="tres3_0"] .icon_close_button{ 
  top: 272px;
  right: 184px;
  width: 74px;
  height: 74px;
  border-radius: 37px;
} 
div[data-sg-id="item-popup"][data-sg-key="tres3_0"] .icon_close_button:before{ content: ""; }


#forces_game2 #masas em{
  font-style: normal;
  font-weight: bolder;
  color: white;
  font-size: 1.5em;
}
#forces_game2 #masas em:nth-child(1){ top: 384px; left: 144px; }
#forces_game2 #masas em:nth-child(2){ top: 236px; left: 458px; }
#forces_game2 #masas em:nth-child(3){ top: 427px; left: 644px; }