#inicia{ width:100%; height:600px; cursor:pointer; background:url("../img/actividad2fr/caratula.png") no-repeat center center; }
#actividad2{ width:100%; height:600px; background:url("../img/actividad2/escenario.png") no-repeat center center; -webkit-background-size:cover; background-size:cover; }
#proyector{}
#globo{ font-family: Calibri; width:198px; font-size:22px; min-height: 68px; background-color: white; float: left; position: absolute; top:238px; left:510px; border-radius:15px; padding: 20px; }
#globo:before{ content: ""; width: 0; position: absolute; border-style: solid; border-width: 20px 40px 20px 0; border-color: transparent #fff; top: 31px; left: -28px; }
#globoizq{font-family: Calibri; display:none; width: 198px; font-size:22px; min-height: 68px; background-color: white; float: left; position: absolute; top:231px; left:82px; border-radius:15px; padding: 20px; }
#globoizq:before{ content: ""; width: 0; position: absolute; border-style: solid; border-width: 20px 0 20px 40px; border-color: transparent #fff; top: 17px; right: -29px; }
#personaje img{ width:158px; height:345px; float:left; position:relative; top:210px; left:280px; }
.canoncerrado{ background: url("../img/actividad2/1-1.png") no-repeat -1px 0px, url("../img/actividad2/1-3.png") no-repeat 0px bottom,	url("../img/actividad2/2-1.png") no-repeat right top, url("../img/actividad2/2-3.png") no-repeat right bottom, url("../img/actividad2/lh1.png") repeat-x 0px 0px, url("../img/actividad2/lh2.png") repeat-x right bottom, url("../img/actividad2/1-2.png") repeat-y 0px 0px, url("../img/actividad2/2-2.png") repeat-y right bottom; /*padding:13px 44px 0 44px;*/ padding:33px 44px 0 44px; width: 100%; height: 58px; /*margin: 27px 2% 0px 0%;*/ float: right; }
#textcanon { width:100%; position:relative; background-color: #fff; height: 11px; padding: 0 10px; font-family: Calibri; overflow:auto; overflow-x:hidden; }
#textcanon img{ float: left; height: 36px; margin: -1px 0 0 -1px; }
.canonabierto{ height:527px !important; background: url("../img/actividad2/1-1.png") no-repeat -1px 0px, url("../img/actividad2/1-32.png") no-repeat 0px bottom, url("../img/actividad2/2-1.png") no-repeat right top, url("../img/actividad2/2-32.png") no-repeat right bottom, url("../img/actividad2/lh1.png") repeat-x 0px 0px, url("../img/actividad2/lh2.png") repeat-x right bottom, url("../img/actividad2/1-2.png") repeat-y 0px 0px, url("../img/actividad2/2-2.png") repeat-y right bottom !important; }
.cic{ padding-bottom:40px; width:57%; background: url("../img/actividad2/manija.png") no-repeat center bottom; margin: 27px 2% 0px 0%; float: right; }
.botonsiguiente{ font-family: Calibri; background:#3A5897 none repeat scroll 0 0; border-radius:100px; color:#fff !important; float:none; font-size:17px; cursor:pointer; height:36px; line-height:36px; right:303px; text-align:center; top:481px; width:104px; position:absolute; }
.tazul{ font-family: Arial Black Regular; color: #0071BC; font-size: 50px; text-align: center; width: 100%; line-height:54px; float: left; font-weight: bolder; display: block; margin: 31px 0 27px 0; }
.tnormal{ font-family: Calibri; color:#000; text-align:center; font-size:26px; margin-top:20px; display: block; }
.carpetas{ width:90%; float: left; margin: 49px 4%; }
.carpetas div{ width:15%; text-align:center; float:left; margin: 0 9%; }
.carpetaamarilla{ background:url("../img/actividad2/camarilla.png") no-repeat center center; -webkit-background-size:cover; background-size:cover; height:78px; }
.carpetaazul{ background:url("../img/actividad2/cazul.png") no-repeat center center; -webkit-background-size:cover; background-size:cover; height:78px; }
.reto1, .reto2, .reto3{ font-family: Calibri; cursor: pointer; width: 100%; height: 78px; font-size: 37px; float: left; margin-left: -7px; line-height: 80px; }
.situacion p{ text-align:left; font-size:16.5px; color:#5e685e; margin:11px 0; }
.textolienzo{ background-color:#278caf; height: 35px; line-height:35px; text-align:center; color: #fff; font-size:22px; width: 257px; margin-bottom:15px; float: left; }
.siguiente{ background:#29ABE2 none repeat scroll 0 0; border-radius:100px; color:#fff !important; float:right; font-size:28px; cursor:pointer; height:30px; line-height:28px; text-align:center; width:30px; position:relative; margin:0 20px; }
.isiguiente{ background:#29ABE2 none repeat scroll 0 0; border-radius:100px; color:#fff !important; font-size:18px; height:18px; line-height:15px; text-align: center; width: 18px; position: relative; margin:0; display:inline-block; }
.cerrar{ background:#C1272D none repeat scroll 0 0; border-radius:100px; color:#fff !important; float:right; font-size:14px; cursor:pointer; height:20px; line-height:19px; text-align:center; width:20px; position:relative; margin:10px 20px; font-weight:700; }
.textopregunta{ color:#000; font-size:24px; text-align:center; width: 87%; float: left; margin-bottom:10px; }
.textochiquito{ width:100%; font-size:16.5px !important; color:#999; float:left; text-align:left; margin-bottom:2px; }
#imagencanon input { background: transparent; border: none; border-bottom: 1px solid #000; text-align: center; font-weight: bold; }
#imagencanon textarea{ background: #F1F2F2; font-size:16.5px; height:225px; border: 2px solid #DBDDDE; margin-top: 15px; width: 100%; padding: 3px 6px; margin-bottom:10px; max-width: 600px; }
.guardar{ background:#29ABE2 none repeat scroll 0 0; border-radius:100px; color:#fff !important; float:right; font-size:15px; cursor:pointer; height:30px; line-height:28px; text-align:center; width:77px; position:relative; margin-right:20px; }
.sb1, .sb2, .deshabilitado{ background-color:#ccc; cursor:none; }
.deshabilitado{ margin-top: 40px; }
.disciplinas{ background:#29ABE2; cursor:pointer;  }
.contenedorbotones{ width:100%; float: left; margin-bottom:77px; }
.botones{ width:33%; float:left; text-align:center; }
.botones div{ background:#B3B3B3 none repeat scroll 0 0; margin: 0 auto; border-radius:12px; color:#fff !important; font-size:17px; cursor:pointer; height:51px; line-height:51px; text-align:center; width:122px; position:relative; }
.botones div:hover, .botonprendido{ background-color:#8BC53E !important; }
.textopregunta2{ color:#000; font-size:24px; text-align:left; width: 100%; float: left; margin-bottom:10px; margin: 61px 0 100px 0; }
.textopregunta3{ color:#000; font-size:24px; text-align:left; width: 87%; float: left; margin-bottom:10px; }
.situacion2 p{ /*font-size:11.3px;*/ float: left; width: 100%; }
/*.atras{ background:#29ABE2 none repeat scroll 0 0; border-radius:100px; color:#fff !important; float:right; font-size:28px; cursor:pointer; height:30px; line-height:28px; text-align:center; width:30px; position:relative; margin-right:20px; }*/
.atras{ background: #29ABE2 none repeat scroll 0 0;
border-radius: 100px;
color: #fff !important;
font-size: 28px;
cursor: pointer;
height: 30px;
line-height: 28px;
text-align: center;
width: 30px;
position: absolute;
top: 505px;
left: 1007px; display:none; }
.otracarpeta{ background: #29ABE2 none repeat scroll 0 0;
border-radius: 100px;
color: #fff !important;
font-size: 28px;
cursor: pointer;
height: 30px;
line-height: 28px;
text-align: center;
width: 30px;
position: absolute;
top: 466px;
left: 987px; display:none;}
.ryo, .rdis{ float:left; width:100%; color:#000; text-align:left; font-size:16.5px; border:#4996CF solid 2px; padding:5px 5px 5px 5px;; margin:2px 0px; /*background: url("../img/actividad2/pin.png") no-repeat 99% center;*/ }
.rdis{ border:#8BC53E solid 2px; }
.situacion3{ font-size:20px; float: left; width: 87%; color:#000; text-align:left; }
.situacion3 p{ font-size:16.5px !important; }
.primero{ padding-top: 124px; }
.ps1{ font-size:16.5px !important; }
.resumen1{ margin-top: 40px;}


/************************* Responsivo ***********************************/
@media all and (max-width: 1024px) {
	#personaje img { left:92px; }
	#globo { left:343px; } 
	.cic {width: 64%; margin: 27px 1% 0px 0%; }
	.atras { top: 505px; left: 857px; } 
	.otracarpeta { left: 836px; }
	#globoizq { top: 131px; }
}

@media all and (max-width: 768px) { /*Ipad Portrait */
	#inicia{ background:url("../img/actividad2fr/caratula2.png") no-repeat center center; -webkit-background-size:cover; background-size:cover; }
	#actividad2 { background: url("../img/actividad2/escenario2.png") no-repeat center center; -webkit-background-size: cover; background-size: cover; }
	.cic { width: 94%; margin: 25px 1% 0px 1%; position: absolute; top: -11px; } 
	#personaje img { top: 188px; }
	.atras { top: 479px; left: 598px; }
	.otracarpeta { top: 440px; left: 580px; }
}

@media all and (max-width: 740px) {
	#inicia{ background:url("../img/actividad2fr/caratula3.png") no-repeat center center; }
	#personaje img { left: 39px; }
	#globo { left: 271px; }
	.botonsiguiente { right: 122px; top: 470px; }  
	.cic { width: 94%; margin: 25px 0% 0px 0%; }
	.atras { left: 430px; }
	.otracarpeta { left: 410px; }
}

@media all and (max-width: 580px) {
	/*#inicia{ background:url("../img/actividad2/caratula3.png") no-repeat center center; }*/
	#actividad2 { margin-left: 6px; }
	#imagencanon textarea { height: 200px; }
}

@media all and (max-width: 540px) {
	.cic { width: 93%; }
	 #actividad2 { margin-left: 15px; }
	 .contenido p { margin-left: 0px; }
	 .situacion{ width: 100%; }
	 .situacion p { margin: 0 !important; width: 100%; }
	 .atras { left: 426px; }
	 .otracarpeta { left: 407px; }
}

@media all and (min-width: 0px) and (max-width: 480px) {
	.cic { width: 92%; }
	#personaje img { left:9px; }
	#globo { left: 257px; }
	.carpetaamarilla { height: 61px; }
	.reto1, .reto2, .reto3 { height: 78px; margin-left: -5px; line-height: 66px; }
	.tazul { font-size: 44px; line-height: 48px; }
	.tnormal { font-size: 23px; }
	.botones div { font-size: 16px; width: 108px; }
	.atras { left: 365px; }
	.otracarpeta { left: 346px; }
	.situacion3 { width: 100%; }
	.textolienzo { width: 109px; font-size: 18px; }
  	.cerrar { margin: 10px 0; }
}

@media all and (min-width: 0px) and (max-width: 425px) {
	#inicia{ background:url("../img/actividad2fr/caratula3.png") no-repeat center center; -webkit-background-size:cover; background-size:cover; }
	.cic { width: 93%; }
	#personaje img { left: 22px; }
	#personaje .imgp1 { width: 143px; height: 305px; }
	#globo { left: 217px; top: 180px; }
	#personaje .imgp2 { height: 305px; width: 203px !important; }
	.botonsiguiente { right: 61px; top: 429px; }
	.tazul { font-size: 39px; }
	.tnormal { font-size: 21px; }
	.situacion p { font-size: 15px; }
	.textopregunta { font-size: 18px; }
	.textochiquito { font-size: 16px !important; }
	.textopregunta2 { font-size: 18px; margin: 61px 0 48px 0; }
	.contenedorbotones { width: 100%; margin-bottom: 23px; }
	.botones { width: 100%; margin-bottom: 10px; }
	.botones div { font-size: 16px; width: 68%; }
	.atras { left: 319px; }
	.ps1 { font-size: 16px !important; }
	.textopregunta3 { font-size: 18px; font-weight: 700; }
	.otracarpeta { left: 299px; }
	.situacion3 p { font-size: 16px !important; }
}

@media all and (max-width: 375px) {
	#inicia{ background:url("../img/actividad2fr/caratula4.png") no-repeat center center;  }
	#globo:before { top: 26px; left: -28px; }
	#personaje .imgp1 { width: 137px; height: 307px; }
	#personaje .imgp2 { height: 307px; width: 194px !important; }
	#globo { width: 169px; top: 238px; left: 510px; padding: 20px 8px; }
	#globo { width: 169px !important; font-size: 18px; left: 202px; top: 180px; }
	.carpetas div { width: 22%; text-align: center; float: left; margin: 0 5%; }
	.tazul { font-size: 36px; }
	.tnormal { font-size: 19px; }
	.textopregunta { font-size: 17px; }
	.textochiquito { font-size: 15px !important; }
	#imagencanon textarea { font-size: 15px; }
	.atras { left: 272px; }
	.otracarpeta { left: 252px; }
	.ryo, .rdis { font-size: 15px; }
}

@media all and (max-width: 320px) {
	.cic { width: 92%; }
	#globo { width:124px !important; left: 192px; top: 201px; font-size:16px; }
	#personaje img { top: 233px; }
	.botonsiguiente { right: 25px; top: 460px; }
	.botonsiguiente { right: 15px; top: 460px; }
	.tazul { font-size: 28px; }
	.tnormal { font-size: 17px; }
	.carpetaamarilla { height: 50px; }
	.reto1, .reto2, .reto3 { height:52px; margin-left: -3px; line-height: 56px; font-size: 30px; }
  	.textopregunta2 { margin: 12px 0 48px 0; }
  	.atras { left: 218px; }
  	.otracarpeta { left: 196px; }
}