/* codigo de video en reemplazo de sg-video...etc */
.videobox {
	position: absolute;
	top: 140px;
	left: 44px;
	width: 100%;
	z-index: 100;
}
.videobox iframe {
	position: relative;
	top: -8px;
	left: 203px;
}
.cartel {
	position: absolute;
	cursor: pointer;
	margin-left: auto;
	margin-right: auto;
	left: -70px;
	right: 0px;
	text-align: center;
	min-width: 200px;
	max-width: 1085px;
	z-index: 101;
}
.titcartel {
	color: rgb(255, 255, 255);
	font-size: 1em;
	padding: 10px;
	border-radius: 10px;
	box-shadow: rgb(0, 0, 0) 0px 0px 10px;
	background: rgb(19, 26, 45);
}
.titcartel h2 {
	padding: 7px 10px 11px;
	border-radius: 7px;
	border: 3px dashed rgb(243, 236, 130);
}
/* Finaliza codigo de video */

#drag1 {
	position:absolute;
	top: 244px;
	left:530px;
	width: 205px;
	height: 50px;
	background:url(../img/_03_02_imagen1.png) no-repeat;
	box-shadow: 0 0 10px #000000;
	border-radius: 15px;
	cursor: pointer;
}
#drag2 {
	position:absolute;
	top: 422px;
	left: 619px;
	width: 205px;
	height: 50px;
	background:url(../img/_03_02_imagen2.png) no-repeat;
	box-shadow: 0 0 10px #000000;
	border-radius: 15px;
	cursor: pointer;
}
#drag3 {
	position:absolute;
	top: 580px;
	left: 815px;
	width: 205px;
	height: 50px;
	background:url(../img/_03_02_imagen3.png) no-repeat;
	box-shadow: 0 0 10px #000000;
	border-radius: 15px;
	cursor: pointer;
}
#drag4 {
	position:absolute;
	top: 535px;
	left: 508px;
	width: 205px;
	height: 50px;
	background:url(../img/_03_02_imagen4.png) no-repeat;
	box-shadow: 0 0 10px #000000;
	border-radius: 15px;
	cursor: pointer;
}
#drag5 {
	position:absolute;
	top: 289px;;
	left: 791px;
	width:205px;
	height:50px;
	background:url(../img/_03_02_imagen5.png) no-repeat;
	box-shadow: 0 0 10px #000000;
	border-radius: 15px;
	cursor: pointer;
}
#drag6 {
	position:absolute;
	top: 498px;
	left: 1096px;
	width:205px;
	height:50px;
	background:url(../img/_03_02_imagen6.png) no-repeat;
	box-shadow: 0 0 10px #000000;
	border-radius: 15px;
	cursor: pointer;
}
#drag7 {
	position:absolute;
	top: 387px;
	left: 980px;
	width:205px;
	height:50px;
	background:url(../img/_03_02_imagen7.png) no-repeat;
	box-shadow: 0 0 10px #000000;
	border-radius: 15px;
	cursor: pointer;
}
#drag8 {
	position:absolute;
	top: 191px;
	left: 998px;
	width:205px;
	height:50px;
	background:url(../img/_03_02_imagen8.png) no-repeat;
	box-shadow: 0 0 10px #000000;
	border-radius: 15px;
	cursor: pointer;
}

#drop1 {
	position:absolute;
	top: 198px;
	left: 187px;
	width:199px;
	height:45px;
	border-radius:6px;
	border:3px dashed rgba(0,0,0,0.3);
}
#drop2 {
	position:absolute;
	top: 254px;
	left: 187px;
	width:199px;
	height:45px;
	border-radius:6px;
	border:3px dashed rgba(0,0,0,0.3);
}
#drop3 {
	position:absolute;
	top: 309px;
	left: 187px;
	width:199px;
	height:45px;
	border-radius:6px;
	border:3px dashed rgba(0,0,0,0.3);
}
#drop4 {
	position:absolute;
	top: 365px;
	left: 187px;
	width:199px;
	height:45px;
	border-radius:6px;
	border:3px dashed rgba(0,0,0,0.3);
}
#drop5 {
	position:absolute;
	top: 421px;
	left: 187px;
	width:199px;
	height:45px;
	border-radius:6px;
	border:3px dashed rgba(0,0,0,0.3);
}
#drop6 {
	position:absolute;
	top: 476px;
	left: 187px;
	width:199px;
	height:45px;
	border-radius:6px;
	border:3px dashed rgba(0,0,0,0.3);
}
#drop7 {
	position:absolute;
	top: 533px;
	left: 187px;
	width:199px;
	height:45px;
	border-radius:6px;
	border:3px dashed rgba(0,0,0,0.3);
}
#drop8 {
	position:absolute;
	top: 590px;
	left: 187px;
	width:199px;
	height:45px;
	border-radius:6px;
	border:3px dashed rgba(0,0,0,0.3);
}

.elem{
	top: 200px;
}

.pop{
	position:absolute; 
	top: 14.8% !important; 
	left: 1.5% !important;
	z-index: 300;
}
.pop2{
	visibility:hidden;
	position:absolute; 
	top: 14.8% !important; 
	left: 1.5% !important;
	z-index: 300;
}

.cerrar{
	position:absolute;
	z-index: 310;
	top: 94px;
	right: 185px;
	cursor: pointer;
}
.cerrar2{
	visibility:hidden;
	position:absolute;
	z-index: 310;
	top: 94px;
	right: 185px;
	cursor: pointer;
}

#cerrar1{
	position:absolute;
	z-index: 310;
	top: 94px;
	right: 185px;
	cursor: pointer;
}
/******/
.refresh{
  position:absolute;
  left:6%;
  top:0;
}

#help{
  position:absolute;
  left:-33%;
  top:0;
}

#btn_cerrar{
  position:absolute;
  width:4%;
  top: 6%;
  right:15%;
  height: 55px;
}

#btn_cerrar:hover{
  opacity:0.8;
  cursor:pointer;
}

.refresh{
  position:absolute;
  left:6%;
  top:0;
}

#help{
  position:absolute;
  left:-33%;
  top:0;
}

#instrucciones{
  width:100%;
  height:100%;
  position:absolute;
  z-index:1000;
}

#img_instrucciones{
  width:70%;
  margin-left:15%;
  margin-top:4%;
}






.refresh{
  position:absolute !important;
  left:150%;
  top:0;
  border-radius:10px 10px 0 0;
}

#help{
  position:absolute !important;
  left:-90%;
  top:0;
  border-radius:10px 10px 0 0 !important;
}

#instrucciones{
  width:100%;
  height:100%;
}

#img_instrucciones{
  width:70%;
  margin-left:15%;
  margin-top:4%;
  z-index: 200;
}

#botonera div:hover{
  cursor:pointer !important;
  z-index: 500px !important;
}

circle{
  fill: red;
}

line, #rect_2{
  fill:none;
  stroke:#CCCCCC;
  stroke-width:9.77;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-miterlimit:10;
}

#tablero{
  width:75%;
  height:80%;
  position:absolute;
  top:-1%;
  left:-9%;
  z-index:10;
  opacity:0.5;
}

#tablero svg{
  width:180%;
  position: absolute;
  z-index:1;
}

#lapiz{
  position:absolute;
  width:7%;
  right:12%;
  bottom:8.5%;
  cursor: pointer;
  z-index: 20;
}

line, rect, circle{
  cursor:url("../img/lapiz_cursor.png") 20 95, auto !important;
}

.draw_line{
  stroke: #F7931E !important;
}


/****************************************/
@keyframes colorFade {
    from {background-color: #06364B;}
    to {background-color: #0E7DAD;}
}

@keyframes colorOriginal {
    from {background-color: #0E7DAD;}
    to {background-color: #06364B;}    
}

::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar:hover{
    cursor:pointer;
}
 
/* Track */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(76, 75, 73, 1);
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 1); 
}

::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(76, 75, 73, 1);
}


.tab{
    position:relative;
    border-radius:15px;
    display:none;
    overflow:hidden;
    background:#89C6C9;

}

#tab_1{
	display:block;
	-moz-user-select: none;
  	-webkit-user-select: none;
  	-ms-user-select: none;
	
}

.row{
	width:95%;
	margin-left:2.5%;
	height:9%;	
}

.row > div{
	height:100%;
	width:19%;
	display:inline-block;
	float:left;
	margin-right:1.2%;	
}

.row > div:last-of-type{
	margin-right:0;
}


.tab_nav{
	position:absolute;
	bottom:0;
	width:16%;
	height:9.5%;
	left: 42%;
	z-index:1;
}

.tab_nav div{
	display:inline-block;
	float:left;
	height:100%;
}

.custom_btn{
    width:33%;
    height:100%;
    background: #64b238;
    color:#FFF;
    font-size:3em;
    text-align:center;
    border-bottom:solid 6px #006633;
    bottom:0;
    position:absolute;
}

.custom_btn:hover{
    cursor:pointer;
    background:#79C84F;
}

.custom_btn:active{
    transform:scaleY(0.8);
    background:#006633;
}

.popup{
	width:97%;
	height:83%;
	border-radius:15px;
	position:absolute;
	background-color:rgba(255, 255, 255, 0.6);
	z-index:20;
	display:none;
}

.btn_close{
	position:absolute;
	width:4%;
	top:48%;
	left:77%;
	z-index:7;
}

.btn_close:hover{
	cursor:pointer;
	transform:scale(1.1);
	opacity:0.85;
}

.btn_close:active{
	transform:scale(0.95);
	opacity:1;
}

.btn_previous{
	border-radius:10px 0 0 0;
	left:1%;
}

.btn_home{
	border-radius:0;
	right:33%;
}

.btn_next{
	border-radius:0px 10px 0 0;
	right:0;
}


.btn_play{
	position:absolute;
	width:15%;
	left:42.5%;
	top:50%;
	transform:translateY(-50%);
}

.btn_play:hover{
	transform:translateY(-50%) scale(1.1);
	cursor:pointer;
	opacity:0.85;	
}

.btn_play:active{
	transform:translateY(-50%) scale(0.95);
	opacity:1;
}

.info{
	position:absolute;
	width:60%;
	height:87%;
	background:url("../img/illustration_1.png");
	background-size:100%;
	background-repeat:no-repeat;
	background-position:50% 50%;
	left:20%;
	top:1%;
}

.info > div{
	position:absolute;
	width:100%;
	height:44%;
	bottom:0;
}

.info > div > p{
	margin:0;
	font-family:'cabin-regular';
	font-size:3em;
	color:white;
	text-align:justify;
	padding:0 3%;
	position:relative;
	top:50%;
	transform:translateY(-50%);
}

.info > div > p > b{
	color:#0986B2;
}

.video_info{
	position:absolute;
	width:64%;
	background:url("../img/video_info_bg.png");
	background-size:80% 72%;
	background-position: 50% 0;
	background-repeat:no-repeat;
	left:18%;
	height: 55%;
	z-index:4;
	-webkit-transition:all 1s ease;
	-moz-transition:all 1s ease;
	-ms-transition:all 1s ease;
	transition:all 1s ease;
}

.video_info > div{
	position:absolute;
	width:100%;
	height:31%;
	bottom:0;
	background:url("../img/video_info.png");
	background-size:100%;
	background-position:100% 100%;
	-webkit-transition:all 1s ease;
	-moz-transition:all 1s ease;
	-ms-transition:all 1s ease;
	transition:all 1s ease;
}

.video_info > div:hover{
	cursor:pointer;
	transform:scale(1.05);
}

.video_info > div:active{
	transition:none;
	-webkit-transition:none;
	-moz-transition:none;
	-ms-transition:none;
	transform:scale(1);

}

.video_info > div > p{
	margin:0;
	color:white;
	font-family:'cabin-regular';
	font-size:1.7em;
	text-align:center;
	padding:0 2.2%;
	position:relative;
	top:25%;
}

.video iframe{
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	display:none;
	border:none;
}

.video{
	position:absolute;
}

.video{
	width:59.3%;
	height:73.3%;
	left:20.7%;
	top:8.2%;
}

.header{
	width:60%;
	height:10%;
	background:#69359B;
	margin:2% 0 0 20%;
	border-radius:10px;
}

.header p{
	margin:0;
	color:white;
	font-family:'cabin-regular';
	font-size:2em;
	text-align:center;
	position:relative;
	top:50%;
	transform:translateY(-50%);
}

.notepad{
	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAGQA\
    gMAAAASNuJIAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpg\
    AAA6mAAAF3CculE8AAAADFBMVEX///8tQV0tQV3////Lf7vBAAAAAnRSTlMAwO33D4gAAAABYkt\
    HRACIBR1IAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAFElEQVQoz2NgGAWjYMQCB4YG/BAAi2AIQX\
    Wxvm8AAAAldEVYdGRhdGU6Y3JlYXRlADIwMTUtMDQtMjhUMTc6MDU6MjUrMDI6MDDD9mZeAAAAJ\
    XRFWHRkYXRlOm1vZGlmeQAyMDE1LTA0LTI4VDE3OjA1OjI1KzAyOjAwsqve4gAAABl0RVh0U29m\
    dHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAAASUVORK5CYII=');
    background-size:100% 8%;
     background-color:#FFFFFF;
     background-position:0% 17%;
     border:none;    
     font: normal 14px verdana;
     line-height: 25px;
     padding: 2px 10px;
     border:none;
     resize:none;
     position:absolute;
     width:93%;
     height:71%;
     left:3%;
     top:16%;
     font-family:'cabin-regular';
     font-size:1.56em;
     line-height:1.48em;
     overflow:hidden;
     text-align:justify;
}

.row{
	margin-bottom:0.2%;
}

.row:nth-of-type(3), .row:nth-of-type(6){
	margin-top: 8.4%;
}

.row:nth-of-type(2), .row:nth-of-type(3), .row:nth-of-type(5), .row:nth-of-type(6){
	height: 4%;
} 

.row:first-of-type{
	margin-top:1%;
}

.images{
	height:25%;
	width:95%;
	margin-left:2.5%;
}

.row:nth-of-type(2) .point > div, .row:nth-of-type(3) .point > div{
	height:100%;
	width:12%;
	background:blue;
	margin-left:44%;
	border-radius:100%;
	background:#DBDB8A;
	border:solid 2px #FCF506;box-sizing:border-box;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
}

.row:nth-of-type(5) .point > div, .row:nth-of-type(6) .point > div{
	height:100%;
	width:12%;
	background:blue;
	margin-left:44%;
	border-radius:100%;
	background:#399964;
	border:solid 2px #026633;box-sizing:border-box;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
}

.images > div{
	height:100%;
	width:19%;
	background:blue;
	display:inline-block;
	float:left;
	margin-right:1.2%;
}

.images > div:last-of-type{
	margin-right:0;
} 

.row:first-of-type > div{
	background:#DBDB8A;
	border:solid 2px #FCF506;box-sizing:border-box;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;

}

.row:nth-of-type(4) > div{
	background:white;
	border-radius:10px;
}

.row:first-of-type > div > p{
	margin:0;
	font-family:'cabin-regular';
	font-size:1.2em;
	text-align:center;
}

.row:nth-of-type(4) > div > p{
	margin:0;
	font-family:'cabin-bold';
	font-size:2em;
	color:#026633;
	text-align:center;
	position:relative;
	top:50%;
	transform:translateY(-50%);
}

.images > div:first-of-type{
	background:url("../img/item_28.png");
	background-size:100%;
	background-repeat:no-repeat;
}

.images > div:nth-of-type(2){
	background:url("../img/item_29.png");
	background-size:65%;
	background-repeat:no-repeat;
	background-position:50% 50%;
}

.images > div:nth-of-type(3){
	background:url("../img/item_30.png");
	background-size:65%;
	background-repeat:no-repeat;
	background-position:50% 50%;
}

.images > div:nth-of-type(4){
	background:url("../img/item_31.png");
	background-size:65%;
	background-repeat:no-repeat;
	background-position:50% 50%;
}

.images > div:nth-of-type(5){
	background:url("../img/item_32.png");
	background-size:50%;
	background-repeat:no-repeat;
	background-position:50% 50%;
}


.point > div > div{
	width:80%;
	height:80%;
	border-radius:100%;
	position:relative;
	top:50%;
	left:50%;
	transform:translateX(-50%) translateY(-50%);
	display:none;	
}

.row:nth-of-type(2) > .point > div > div, .row:nth-of-type(3) > .point > div > div{
	background:yellow;
}

.row:nth-of-type(5) > .point > div > div, .row:nth-of-type(6) > .point > div > div{
	background:green;
}

.point > div:not(.dropped):hover{
	cursor:pointer;
	opacity:0.85;
	transform:scale(1.05);
}

.point > div:not(.dropped):active{
	opacity:1 ;
	transform:scale(0.95);
}

#circle_pointer{
	position:absolute;
	width:2%;
	height:4%;
	border-radius:100%;
	pointer-events:none;
}

#svg{
	position:absolute;
	top:0;
	left:0;
	pointer-events:none;
}

#line{
	display:none;
}

.show{
	display:block !important;
}

#tab_1 .tab_nav{
	left:94%;
}

#tab_1 .btn_help{
	border-radius:10px 10px 0 0;
}

.dragging{
	cursor:-webkit-grabbing !important;
	cursor:-moz-grabbing !important;
/********************************************/