/* CSS Document */

.men_later {
    font-size: 50px;
    position: absolute;
    top: 243px;
    left: 30px;
    border: 3px solid black;
    padding: 11px;
    width: 50px;
    text-align: center;
    z-index: 101;
    background-color: white;
}
/* codigo de video en reemplazo de sg-video...etc */
.videobox {
	position: absolute;
	top: 100px;
	left: 10px;
	width: 100%;
	z-index:100;
}
.videobox video{
	position:relative;
	top: 79px;
	left: 308px;
}
.cartel {
	position: absolute;
	cursor:pointer;
	margin-left: auto;
	margin-right: auto;
	left:0;
	right:0;
	text-align:center;
	min-width: 200px;
	max-width: 860px;
	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 */

i.fa:hover {
    transform: scale(1.2,1.2);
}

.atv {
    transform: scale(1.3,1.3);
    color: #709CB2;
}


.arrastra1 {
    position: absolute;
    top: 340px;
    left: 567px;
}
#adrag1{
	width: 28px;
	height: 27px;
	background-image:url(../img/guia.png);
	position: absolute;
	top: 227px;
	left: 539px;
}
#adrag2{
	width: 28px;
	height: 27px;
	background-image:url(../img/guia.png);
	position: absolute;
	top: 436px;
	left: 539px;
}

#adrag3{
	width: 28px;
	height: 27px;
	background-image:url(../img/guia.png);
	position: absolute;
	top: 333px;
	left: 539px;
}

.bord{
	border: 4px dashed black;
}
#adrop1{
	width: 33px;
	height: 33px;
	/* background-image:url(../img/guia.png); */
	position: absolute;
	top: 191px;
	left: 763px;
	border: 2px dashed white;
	border-radius: 22px;
	padding-top: 5px;
	padding-left: 7px;
}
#adrop2{
	width: 33px;
	height: 33px;
	/* background-image:url(../img/guia.png); */
	position: absolute;
	top: 457px;
	left: 762px;
	border: 2px dashed white;
	border-radius: 22px;
	padding-top: 5px;
	padding-left: 7px;
}

#adrop3{
	width: 33px;
	height: 33px;
	/* background-image:url(../img/guia.png); */
	position: absolute;
	top: 319px;
	left: 762px;
	border: 2px dashed white;
	border-radius: 22px;
	padding-top: 5px;
	padding-left: 7px;
}
.animar{
	transition:all 1s ease;
	-webkit-transition:all 200ms ease;
	}
	
	
/* DRAP&DROP 2*/


#drop1{
    position: absolute;
    top: 307px;
    left: 187px;	
	
    width: 268px;
	
    height: 330px;
}

#drop2{
    position: absolute;
    top: 307px;
    left: 487px;	
	
    width: 268px;
	
    height: 330px;
}
#drop3{
    position: absolute;
    top: 307px;
    left: 787px;	
	
    width: 268px;
	
    height: 330px;
}

#drag1{
	 position: absolute;
    
	 top: 240px;
    
	 left: 1110px;
	background-image:url(../img/drag1_03_02.png);
	
	 width: 201px;
	
	 height: 38px;
}
#drag2{
	 position: absolute;
    
	 top: 283px;
    
	 left: 1110px;
	background-image:url(../img/drag2_03_02.png);
	
	 width: 201px;
	
	 height: 38px;
}
#drag3{
	 position: absolute;
    
	 top: 326px;
    
	 left: 1110px;
	background-image:url(../img/drag3_03_02.png);
	
	 width: 201px;
	
	 height: 38px;
}
#drag4{
	 position: absolute;
    
	 top: 369px;
    
	 left: 1110px;
	background-image:url(../img/drag4_03_02.png);
	
	 width: 201px;
	
	 height: 38px;
}
#drag5{
	 position: absolute;
    
	 top: 412px;
    
	 left: 1110px;
	background-image:url(../img/drag5_03_02.png);
	
	 width: 202px;
	
	 height: 127px;
}
#drag6{
	 position: absolute;
    
	 top: 544px;
    
	 left: 1110px;
	background-image:url(../img/drag6_03_02.png);
	
	 width: 203px;
	
	 height: 98px;
}


div#drop1 div {
    margin-top: 20px;
    margin-left: 35px;
}

div#drop2 div {
    margin-top: 20px;  margin-left: 35px;
}

div#drop3 div {
    margin-top: 20px;  margin-left: 35px;
}



/* */
input[type=checkbox]{
    position: absolute;
    width: 30px;
    height: 30px;

}

input.a1 {
    top: 379px;
    left: 159px;
}
input.a2 {
    top: 449px;
    left: 159px;
}
input.a3 {
    top: 519px;
    left: 159px;
}


input.b1 {
    top: 379px;
    left: 429px;
}
input.b2 {
    top: 449px;
    left: 429px;
}
input.b3 {
    top: 519px;
    left: 429px;
}


input.c1 {
    top: 379px;
    left: 696px;
}
input.c2 {
    top: 449px;
    left: 696px;
}
input.c3 {
    top: 519px;
    left: 696px;
}


input.d1 {
    top: 379px;
    left: 961px;
}
input.d2 {
    top: 449px;
    left: 961px;
}
input.d3 {
    top: 519px;
    left: 961px;
}

textarea.text1 {
    position: absolute;
    top: 250px;
    left: 201px;
    width: 1010px;
    height: 100px;
    font-size: 40px;
    resize: none;
    border: 4px dashed #B2B2B2;
    border-radius: 13px;
}
textarea.text2 {
    position: absolute;
    top: 410px;
    left: 201px;
    width: 1010px;
    height: 100px;
    font-size: 40px;
    resize: none;
    border: 4px dashed #B2B2B2;
    border-radius: 13px;
}
textarea.text3 {
    position: absolute;
    top: 570px;
    left: 201px;
    width: 1010px;
    height: 100px;
    font-size: 40px;
    resize: none;
    border: 4px dashed #B2B2B2;
    border-radius: 13px; 
}

p.tt1 {
    font-size: 40px;
    position: absolute;
    top: 160px;
    left: 200px;
    color: #fff;
}

.expli1 {
    position: absolute;
    bottom: 40px;
    right: 41px;
    font-size: 32px;
    background-color: rgb(169, 199, 213);
    padding: 11px;
    border: 1px solid rgb(17, 45, 72);
    color: #112D48;
    border-radius: 9px;
    cursor: pointer;
}

/*audio*/


/* audio */
#audio01{
	position: absolute;
	top: 264px;
	left: 288px;
	width: 780px;
}
.playerControls {
 width: 800px;
 display: inline-block;
}

.botones{
 width: 200px;
 display: inline-block;
 text-align: center;
 margin: 2px;
 float: left;
}

.play{
 background: url('../img/btn_play.png');
 width: 40px;
 height:40px;
 display: inline-block;
 cursor: pointer;
 opacity: 0.8;
}

.play:hover {
	opacity: 1;
}

.pause{
 background: url('../img/btn_pause.png');
 width: 40px;
 height:40px;
 display: inline-block;
 cursor: pointer;
 opacity: 0.8;
}

.pause:hover {
	opacity: 1;
}


.audioSeek {
 width: 600px;
 background: #62E2F9;
 border: 1px solid #29C5EA;
 -moz-border-radius: 10px;
 border-radius: 10px;
 display:block;
 height: 27px;
 float: left;
 margin-top: 8px;
 margin-left: -43px;
}

.audioLoaded {
  position: relative;
 
  background: #51BDF5;
 
  /* border: 1px solid #FDC500; */
 -moz-border-radius: 10px;
 border-radius: 10px;
 display:block;
 
  height: 29px;
 ;
}
.animation{
	transition: all 1s ease;	
	-webkit-transition: all 1s ease;	
}
.audioTimes {
 z-index: 10;
 position: relative;
 float:right;
 list-style:none;
 margin: 5px 10px 5px 0px;
}

.audioTimes li {
 font:bold 11px Arial, Helvetica sans-serif;
 float: left;
}

.audioTimes li:first-child {
 border-right: 1px solid #000;
 margin-right: 8px;
 padding-right: 8px;
}

img.fad {
    position: absolute;
    top: 251px;
    left: 320px;
    width: 760px;
    height: 70px;
}
.dra{
	cursor:pointer;
}

.highlight{
	border: 2px dashed gray;
}

.contentext {
    position: absolute;
    top: 330px;
    left: 160px;
    width: 1010px;
    height: 300px;
    font-size: 30px;
    background-color: rgb(167, 198, 211);
    padding: 19px;
    overflow: auto;
    color: rgb(0, 24, 55);
    border-radius: 14px;
}

.contentext strong {
    color: rgb(191, 14, 203);
}


.prea {
    position: absolute;
    top: 270px;
    left: 230px;
}

.prea div {
    display: inline;
    padding: 9px  28px 9px 28px;
    font-size: 25px;
    background-color: rgb(180, 203, 218);
    margin-right: 24px;
}

.preb {
    position: absolute;
    top: 390px;
    left: 230px;
}

.preb div {
    display: inline;
    padding: 9px  28px 9px 28px;
    font-size: 25px;
    background-color: rgb(180, 203, 218);
    margin-right: 24px;
}

.prec  {
    position: absolute;
    top: 515px;
    left: 230px;
}

.prec div {
    display: inline;
    padding: 9px  28px 9px 28px;
    font-size: 25px;
    background-color: rgb(180, 203, 218);
    margin-right: 24px;
}


.pred {
    position: absolute;
    top: 630px;
    left: 230px;
}

.pred div {
    display: inline;
    padding: 9px  28px 9px 28px;
    font-size: 25px;
    background-color: rgb(180, 203, 218);
    margin-right: 24px;
}
.prea div:hover, .preb div:hover, .prec div:hover, .pred div:hover {
    background-color: rgb(242, 251, 255);
    cursor:pointer;
}

audio.audio {
    position: absolute;
    top: 270px;
    left: 380px;
    width: 648px;
}

textarea.textar1 {
    position: absolute;
    top: 305px;
    left: 161px;
    width: 1000px;
    height: 71px;
    resize: none;
    font-size: 30px;
    border: 4px dashed #B2B2B2;
    border-radius: 13px;
}

textarea.textar2{
    position: absolute;
    top: 439px;
    left: 161px;
    width: 1000px;
    height: 71px;
    resize: none;
    font-size: 30px;
    border: 4px dashed #B2B2B2;
    border-radius: 13px;
}

textarea.textar3 {
    position: absolute;
    top: 572px;
    left: 161px;
    width: 1000px;
    height: 71px;
    resize: none;
    font-size: 30px;
    border: 4px dashed #B2B2B2;
    border-radius: 13px;
}

textarea.textar4 {
    position: absolute;
    top: 371px;
    left: 241px;
    width: 830px;
    height: 52px;
    resize: none;
    font-size: 30px;
    border: 4px dashed #B2B2B2;
    border-radius: 13px;
    padding-top: 10px;
}

textarea.textar5 {
    position: absolute;
    top: 507px;
    left: 241px;
    width: 830px;
    height: 52px;
    resize: none;
    font-size: 30px;
    border: 4px dashed #B2B2B2;
    border-radius: 13px;
    padding-top: 10px;
}

textarea.textaar {
    position: absolute;
    top: 253px;
    left: 78px;
    width: 1205px;
    height: 380px;
    resize: none;
    font-size: 31px;
    border: 4px dashed #B2B2B2;
    padding-top: 10px;
    background-color: transparent;
}