/*COLOR*/
$color1: #46b5e8;
$color2: #fafbfc;
$color3: #c2c2c2;
$color4: #eeeff0;
$color5: #d8d8d8;
$color6: #f1f1f1;
$color7: #4d4d4d;
$color8: #ffffff;

.curso {
	.seccion-leccion-1 {

	}
}

.desplegable-contain {
	display: flex;
	align-items: center;
	position: relative;

	img.desplegar {
		position: relative;
		cursor: pointer;
		transition-duration: 100ms;
		&:hover {
			transform: scale(1.1); 
			margin-right: 15px;
		}
		&:active {
			transform: scale(1);
		}

	}

	.desplegable {
		min-height: 75px;

		display: grid;
		align-content: center;
		& > * {
			display: none;
		}
	}
	.default-round-borders {
		background-color: #cecece;
		border-radius: 1rem;
		min-height: 75px;

		margin-left: -40px;
		padding: 5px 15px 5px 60px;

	}

	.flag-banner {
		left: -30px;
		position: relative;
		min-height: 150px;

		&:before {
			content: "";
			//border-left: 35px solid #89f;
			border-top: 75px solid transparent;
			border-bottom: 75px solid transparent;
			height: 500px;
			position: absolute;
			right: -50px;
			width: 0;
		}
		&.yellow-flag {
			background-color: #ecba03;
			&:before {
				border-left: 50px solid #ecba03;
			}
		}
		&.blue-flag {
			background-color: #26c9ff;
			&:before {
				border-left: 50px solid #26c9ff;
			}
		}
		&.pink-flag {
			background-color: #f49;
			&:before {
				border-left: 50px solid #f49;
			}
		}
	}
}

.desplegable-contain-1 {
	display: flex;
	align-items: center;
	position: relative;

	img.desplegar {
		position: relative;
		cursor: pointer;
		transition-duration: 100ms;
		z-index: 1;
		&:hover {
			transform: scale(1.1); 
			margin-right: 15px;
		}
		&:active {
			transform: scale(1);
		}

	}

	.desplegable {
		min-height: 75px;

		display: grid;
		align-content: center;
		& > * {
			display: none;
		}
	}
	.default-round-borders {
		//border: 1px solid #777;
		//background-color: #cecece;
		border-radius: 1rem;
		min-height: 75px;

		//margin-left: -40px;
		padding: 5px 15px 5px 40px;
	}

	.flag-banner {
		left: -30px;
		position: relative;
		min-height: 150px;

		&:before {
			content: "";
			//border-left: 35px solid #89f;
			border-top: 75px solid transparent;
			border-bottom: 75px solid transparent;
			height: 0;
			position: absolute;
			right: -50px;
			width: 0;
		}
		&.yellow-flag {
			background-color: #ecba03;
			&:before {
				border-left: 50px solid #ecba03;
			}
		}
		&.blue-flag {
			background-color: #26c9ff;
			&:before {
				border-left: 50px solid #26c9ff;
			}
		}
		&.pink-flag {
			background-color: #f49;
			&:before {
				border-left: 50px solid #f49;
			}
		}
	}
}

.terminoDrop {
	height: 40px;
	border-radius: 3px;
	padding:  0rem !important;
	background-color: #d8d8d8;
  }
  
  .conceptoT1
  {
	cursor: pointer;
	margin-bottom: 20px 
  }
  
  .terminoFloat {
	float: left;
	margin-left: 2em;
  }

.opcion-radio-1 {
	label {
		display: block;
		position: relative;
		padding-left: 25px;
		cursor: pointer;
		user-select: none;
		input {
			position: absolute;
			opacity: 0;
			cursor: pointer;
			height: 0;
			width: 0;
		}
		/* Create a custom radio button */
		.checkmark {
			position: absolute;
			top: 0;
			left: 0;
			height: 20px;
			width: 20px;
			background-color: #eee;
			border-radius: 50%;
			/* Create the indicator (the dot/circle - hidden when not checked) */
			&:after {
				content: "";
				position: absolute;
				display: none;
			}
			/* Style the indicator (dot/circle) */
			&:after {
				top: 6px;
				left: 6px;
				width: 8px;
				height: 8px;
				border-radius: 50%;
				background: white;
			}
		}
		/* On mouse-over, add a grey background color */
		&:hover input ~ .checkmark {
			background-color: #ccc;
			transition: all 0.3s;
		}
		/* When the radio button is checked, add a blue background */
		input:checked ~ .checkmark {
			background-color: #46b5e8;
			transition: all 0.3s;
		}
		/* Show the indicator (dot/circle) when checked */
		input:checked ~ .checkmark:after {
			display: block;
			transition: all 0.3s;
		}
	}
}

/*Ventanas modales*/
.modal-style-3.modal-container {
	display: none; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 1; /* Sit on top */
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: hidden; /* Enable scroll if needed */
	background-color: rgb(0,0,0); /* Fallback color */
	background-color: rgba(0,0,0,0.4); /* Black w/ opacity */

	.modal-close {
		color: #777;
		background-color: #fff;
		height: 45px;
		line-height: 40px;
		border: 2px solid #ddd;
		border-radius: 50%;
		float: right;
		font-size: 70px;
		font-weight: 200;
		margin-right: -40px;
		margin-top: -40px;
		display: inherit;
		transition: 0.6s;

		&:hover {
			color: #333;
			border: 2px solid #999;
			text-decoration: none;
			cursor: pointer;
		}
	}

	.modal-info {
		background-color: #fff;
		margin: 5% auto;
		padding: 20px;
		overflow: initial;
		min-height: 100px;
		border: 2px solid #ddd;
		border-radius: 2rem;
		width: 80%; /* Could be more or less, depending on screen size */
		min-height: 0;
		max-height: 300%;
	}
}

.select-1 {
			background-color: #eee;
			//border-width: 0;
			//box-sizing: border-box;
			cursor: pointer;
			//float: left;
			//font-size: 1em;
			//line-height: 1em;
			//padding: 1em 1em;
			//width: 100%;
			&:focus {
				outline: none;
			}
		}
.error-1 {
			color: #a94442;
			background-color: #f2dede;
			border-color: #ebccd1;
		}
		.correcto-1 {
			color: #3c763d;
			background-color: #dff0d8;
			border-color: #d6e9c6;
		}
		.pressedKey {
			color: #f00;
			font-weight: 600;
			transition-duration: .3s;
		}
		
.container-cb-1 {
	display: block;
	position: relative;
	padding-left: 25px;
	cursor: pointer;
	user-select: none;
	/* Hide the browser's default checkbox */
	input {
		position: absolute;
		opacity: 0;
		cursor: pointer;
		height: 0;
		width: 0;
	}
	.checkmark {
		position: absolute;
		top: 0;
		left: 0;
		height: 20px;
		width: 20px;
		background-color: #eee;
		/* Crea el indicador (el chulo - oculto si no esta chekeado) */
		&:after {
			content: "";
			position: absolute;
			display: none;
		}
		/* Estilo del indicador (el chulo) */
		&:after {
			top: 3px;
			left: 7px;
			width: 7px;
			height: 12px;
			border: solid white;
			border-width: 0 3px 3px 0;
			-webkit-transform: rotate(45deg);
			-ms-transform: rotate(45deg);
			transform: rotate(45deg);
		}
	}
	/* Estilo cuando pasa el ratón por encima */
	&:hover input ~ .checkmark {
		background-color: #ccc;
		transition: all 0.3s;
	}
	/* Estilos cuando está chekeado */
	input:checked ~ .checkmark {
		background-color: #46b5e8;
		transition: all 0.3s;
	}
	/* Mostrar el indicador cuando está chekeado */
	input:checked ~ .checkmark:after {
		display: block;
		transition: all 0.3s;
	}
}
.cb-behavior {
	&.style-1 {
		position: relative;
		padding: 3px 3px 3px 25px;
		border-radius: 10px;
		background-color: transparent;
		outline: none;

		/* Crea el indicador (el chulo - oculto si no esta chekeado) */
		&:after {
			content: "";
			position: absolute;
			display: none;
		}
		/* Estilo del indicador (el chulo) */
		&:after {
			top: 6px;
			left: 10px;
			width: 7px;
			height: 12px;
			border: solid #fff;
			border-width: 0 3px 3px 0;
			-webkit-transform: rotate(45deg);
			-ms-transform: rotate(45deg);
			transform: rotate(45deg);
		}
		&:before {
			content: "";
			position: absolute;
			top: 3px;
			left: 3px;
			height: 20px;
			width: 20px;
			border: 1px solid #000;
			border-radius: 5px;
			transition: all 0.3s;
		}

		&.active:after  {
			display: block;
			transition: all 0.3s;
		}
		&.active:before  {
			background-color: $color1;
			transition: all 0.3s;
		}
	}
	&.style-2 {
		position: relative;
		padding: 3px 3px 3px 25px;
		border-radius: 10px;
		background-color: transparent;
		outline: none;

		/* Crea el indicador (el chulo - oculto si no esta chekeado) */
		&:after {
			content: "";
			position: absolute;
			top: 15px;
			left: 8px;
			//display: none;
			width: 0px;
			height: 0px;
			border-width: 4px 0px 0px 4px;

		}
		/* Estilo del indicador (el chulo) */
		&:before {
			content: "";
			position: absolute;
			top: 3px;
			left: 3px;
			height: 20px;
			width: 20px;
			border: 1px solid #999;
			border-radius: 5px;
			transition: all 0.3s;
		}

		&.active:after  {
			display: block;

			top: -15px;
			left: 8px;
			width: 17px;
			height: 32px;
			border: solid #e0004d;
			border-width: 4px 0px 0px 4px;
			-webkit-transform: rotate(225deg);
			-ms-transform: rotate(225deg);
			transform: rotate(225deg);
			transition: width 500ms, height 500ms, top 500ms, left 0ms;
			transition-delay: 0ms, 200ms, 200ms, 0ms;
		}
		&.active:before  {

		}
	}
}
.span-correcto {
	font-size: 20px;
	color: green;
}
.span-incorrecto {
	font-size: 20px;
	color: red;
}
.desactivaPregunta {
	pointer-events: none;
	opacity: 0.7;
}


.boton {
	border: 3px solid $color1; /*anchura, estilo y color borde*/
	background-color: transparent; /*color botón*/
	color: $color1; /*color texto*/
	text-decoration: none; /*decoración texto*/
	font-family: 'Montserrat'; /*tipografía texto*/
	border-radius: 0.5rem; /*bordes redondos*/
	outline: none; /*Sin bordes al dar click*/
	transition-duration: 0.3s;
	&.active {
		background-color: $color1;
		color: #fff;
		transition-duration: 0.3s;
	}
}
.boton:hover {
	background-color: $color1;
	color: #fff;
	transition-duration: 0.3s;
}

.flip-card-style-4 {
	.flip-card {
	  display: inline-block;
	  background-color: transparent;
	  width: 192px;
	  height: 253.5px;
	  perspective: 1000px; /* Remove this if you don't want the 3D effect */
	  transition: transform 0.4s;
	  margin: 0 auto;
	  cursor: pointer;
	  
	  &.ganada {
	  	opacity: 0.7;
	  	pointer-events: none;
	  }
	}

	/* This container is needed to position the front and back side */
	.flip-card-inner {
	  position: relative;
	  width: 100%;
	  height: 100%;
	  text-align: center;
	  transition: transform 0.7s;
	  transform-style: preserve-3d;
	}

	/* Do an horizontal flip when you move the mouse over the flip box container */
	.flip-card.active .flip-card-inner.active {
	  transform: rotateY(180deg);
	}

	/* Position the front and back side */
	.flip-card-front, .flip-card-back {
	  position: absolute;
	  width: 100%;
	  height: 100%;
	  backface-visibility: hidden;
	}

	/* Style the front side (fallback if image is missing) */
	.flip-card-front {
	}

	/* Style the back side */
	.flip-card-back {
	  transform: rotateY(180deg);
	}
}
/*FCF*/

/*Cartas flipantes*/
.flip-card-style-1 {
	.flip-card {
	  background-color: transparent;
	  width: 317px;
	  height: 246px;
	  perspective: 1000px; /* Remove this if you don't want the 3D effect */
	  transition: transform 0.4s;
	  margin: 0 auto;
	  cursor: pointer;
	}

	/* This container is needed to position the front and back side */
	.flip-card-inner {
	  position: relative;
	  width: 100%;
	  height: 100%;
	  text-align: center;
	  transition: transform 0.7s;
	  transform-style: preserve-3d;
	}

	/* Do an horizontal flip when you move the mouse over the flip box container */
	.flip-card.active .flip-card-inner.active {
	  transform: rotateY(180deg);
	}

	/* Position the front and back side */
	.flip-card-front, .flip-card-back {
	  position: absolute;
	  width: 100%;
	  height: 100%;
	  backface-visibility: hidden;
	}

	/* Style the front side (fallback if image is missing) */
	.flip-card-front {
	}

	/* Style the back side */
	.flip-card-back {
	  transform: rotateY(180deg);
	  & > div {
	  	width: 100%;
	  	height: 100%;
	  	border-radius: 15px;
	  	padding: 15px;
	  	display: flex;
	  	align-items: center;
	  }
	}
}
/**/
/*Cartas flipantes*/
.flip-card-style-2 {
	.flip-card {
	  background-color: transparent;
	  width: 152px;
	  height: 128px;
	  perspective: 1000px; /* Remove this if you don't want the 3D effect */
	  transition: transform 0.4s, opacity 0.4s;
	  margin: 0 auto;
	  //opacity: 0.8;
	  cursor: pointer;
	  &:hover {
	  	transform: scale(1.5);
	  }
	}

	/* This container is needed to position the front and back side */
	.flip-card-inner {
	  position: relative;
	  width: 100%;
	  height: 100%;
	  text-align: center;
	  transition: transform 0.7s;
	  transform-style: preserve-3d;
	}

	/* Do an horizontal flip when you move the mouse over the flip box container */
	.flip-card.active .flip-card-inner.active {
	  transform: rotateY(180deg);
	}

	/* Position the front and back side */
	.flip-card-front, .flip-card-back {
	  position: absolute;
	  width: 100%;
	  height: 100%;
	  backface-visibility: hidden;
	}

	/* Style the front side (fallback if image is missing) */
	.flip-card-front {
	}

	/* Style the back side */
	.flip-card-back {
	  transform: rotateY(180deg);
	}
}
/**/

.div-purple {
	background-color: #01DF74;
	border-radius: 2rem;
	padding: 15px;

	.purple-index {
		height: 50px;
		width: 50px;
		background-color: #04B45F;
		border-radius: 50%;
		text-align: center;
		
		position: absolute;
		top: -25px;
		left: -15px;
	}

	h1 {
		color: #fff;
	}
}

.btn-expandir {
	cursor: pointer;
}
/*Cartas flipantes*/
.flip-card-style-5 {
	.flip-card {
	  background-color: transparent;
	  width: 417px;
	  height: 346px;
	  perspective: 1000px; /* Remove this if you don't want the 3D effect */
	  transition: transform 0.4s;
	  margin: 0 auto;
	  cursor: pointer;
	}

	/* This container is needed to position the front and back side */
	.flip-card-inner {
	  position: relative;
	  width: 100%;
	  text-align: center;
	  transition: transform 0.7s;
	  transform-style: preserve-3d;
	}

	/* Do an horizontal flip when you move the mouse over the flip box container */
	.flip-card.active .flip-card-inner.active {
	  transform: rotateY(180deg);
	}

	/* Position the front and back side */
	.flip-card-front, .flip-card-back {
	  position: absolute;
	  width: 100%;
	  backface-visibility: hidden;
	}

	/* Style the front side (fallback if image is missing) */
	.flip-card-front {
	}

	/* Style the back side */
	.flip-card-back {
	  transform: rotateY(180deg);
	  & > div {
	  	width: 100%;
	  	height: 100%;
	  	border-radius: 15px;
	  	padding: 15px;
	  	display: flex;
	  	align-items: center;
	  }
	}
}
/**/

.bubble-style-1 {
	// Ventanas modales
	.speech-bubble {
		//position: relative;
		position: absolute;
		background: #29303b;
		min-height: 100px;
		max-width: 300px;
		padding: 15px;
		margin-left: 50px;
		border-radius: 0.5rem;

		.auto {
			overflow: auto;
			max-height: 400px;
			margin-right: 5px;
		}
	}

	.speech-bubble:after {
		content: '';
		position: absolute;
		left: 0;
		top: 20%;
		width: 0;
		height: 0;
		border: 30px solid transparent;
		border-right-color: #29303b;
		border-left: 0;
		border-top: 0;
		margin-top: -15px;
		margin-left: -30px;
	}

	.cerrarX {
		cursor: pointer;
		position: absolute;
		color: #fff;
		right: 10px;
		top: 5px;
	}
}

.flip-simulated {
	/*width: 317px;*/
	min-height: 220px;
	border-radius: 15px;
	padding: 15px;
	display: flex;
	align-items: center;

	p {
		width: 100%
	}
	&.short {
		min-height: 110px;
	}
}

/*Actividad circulos*/
.a-circulo {
	border-radius: 50%;
	height: 100px; width: 100px;
	display: inline-block;
	position: relative;
	&.arrastrable {
		z-index: 1;
	}
	& p {
		font-size: 5em;
	}
}
.a-simbolo {
	height: 100px;
	width: 50px;
	display: inline-block;
	position: relative;
	& p {
		font-size: 5em;
	}
}
.center-vertical-horizontal {
	margin: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
/**/

.actividad-drag-5 {
	.cajonDrag {
		display: inline-block;
		//width: 120px;
		//height: 60px;
		//line-height: 40px;
		//font-size: 20px;
		text-align: center;
		border: 2px solid $color1;
		background: #f1f1f1;
		color: $color1;
		outline: none;
		//border-radius: 10px;
	}

	.correctaDrag {
		border: 2px solid $color1;
		background: #beb;
	}

	.incorrectaDrag {
		border: 2px solid darkred;
		background: #ebb; 
	}
}

.content-size {
	display: inline-block;
	position: relative;
	&#herramientas-1 div {
		position: absolute;
		height: 18%;
		width: 29%;

		&:nth-of-type(1) {
			top: 44%;
			left: 0;
		}
		&:nth-of-type(2) {
			top: 44%;
			right: 0;
		}
		&:nth-of-type(3) {
			top: 72%;
			left: 0;
		}
		&:nth-of-type(4) {
			top: 72%;
			right: 0;
		}
	}
	&#caballo-1 div {
		position: absolute;
		height: 18%;
		width: 15%;
		border-radius: 50%;

		&:nth-of-type(1) {
			top: 6.1%;
			left: 82.1%;
		}
		&:nth-of-type(2) {
			top: 23.5%;
			left: 25.1%;
		}
		&:nth-of-type(3) {
			top: 56.4%;
			left: 58.3%;
		}
		&:nth-of-type(4) {
			top: 79.8%;
			left: 22.3%;
		}

	}
	&#clip-board-1 > div {
		position: absolute;
		padding: 20px 10px 10px 10px;
		top: 19%;
		left: 7%;
		height: 76%;
		width: 85.5%;

		.clip-text-container {
			height: 20%;

			.clip-text {
				display: none;
				margin-left: 30px;
			}
		}
	}
	&#clip-board-2 > div {
		position: absolute;
		padding: 20px 10px 10px 10px;
		top: 19%;
		left: 7%;
		height: 76%;
		width: 85.5%;

		.clip-text-container {
			height: 25%;

			.clip-text {
				display: none;
				margin-left: 30px;
			}
		}
	}
}
.clip-board-1 > div {
		position: absolute;
		padding: 20px 10px 10px 10px;
		top: 19%;
		left: 7%;
		height: 76%;
		width: 85.5%;

		.clip-text-container {
			height: 20%;

			.clip-text {
				display: none;
				margin-left: 30px;
			}
		}
	}

.clip-board-2 > div {
		position: absolute;
		padding: 20px 10px 10px 10px;
		top: 19%;
		left: 7%;
		height: 76%;
		width: 85.5%;

		.clip-text-container {
			height: 20%;

			.clip-text {
				display: none;
				margin-left: 30px;
			}
		}
	}
.btn-color-mandala {
	height: 30px;
	width: 50px;
	cursor: pointer;
}

.pointer {
	cursor: pointer;
}
.mandala-container {
	position: relative;
	height: 200px;
	width: 200px;
	border: 2px solid #000;
	border-radius: 50%;

	.petalo-1 {
		height: 100px;
		width: 50px;
		border-radius: 50%;
		cursor: pointer;
		mix-blend-mode: multiply;
		border: 1px solid #000;
		position: absolute;
		&:nth-child(1) {
		    left: 75px;
		}
		&:nth-child(2) {
			transform: rotate(90deg);
		    left: 122px;
		    top: 50px;
		}
		&:nth-child(3) {
		    left: 75px;
		    top: 97px;
		}
		&:nth-child(4) {
			transform: rotate(90deg);
		    top: 50px;
		    left: 25px;
		}
	}
	.petalo-2 {
		height: 100px;
		width: 25px;
		border-radius: 50%;
		cursor: pointer;
		mix-blend-mode: multiply;
		border: 1px solid #000;
		position: absolute;
		&:nth-child(5) {
			transform: rotate(45deg);
		    left: 120px;
		    top: 15px;
		}
		&:nth-child(6) {
			transform: rotate(135deg);
		    left: 122px;
		    top: 82px;
		}
		&:nth-child(7) {
			transform: rotate(45deg);
		    left: 53px;
		    top: 84px;
		}
		&:nth-child(8) {
			transform: rotate(135deg);
		    top: 15px;
		    left: 50px;
		}
	}
}

.flip-card-style-3 {
	.flip-card {
		display: inline-block;
	  background-color: transparent;
	  width: 150px;
	  height: 200px;
	  perspective: 1000px; /* Remove this if you don't want the 3D effect */
	  transition: transform 0.4s, opacity 0.4s;
	  cursor: pointer;

	  &.ganada {
	  	opacity: 0.7;
	  	pointer-events: none;
	  }
	}

	/* This container is needed to position the front and back side */
	.flip-card-inner {
	  position: relative;
	  width: 100%;
	  height: 100%;
	  text-align: center;
	  transition: transform 0.7s;
	  transform-style: preserve-3d;
	}

	/* Do an horizontal flip when you move the mouse over the flip box container */
	.flip-card.active .flip-card-inner.active {
	  transform: rotateY(180deg);
	}

	/* Position the front and back side */
	.flip-card-front, .flip-card-back {
	  position: absolute;
	  width: 100%;
	  height: 100%;
	  backface-visibility: hidden;
	}

	/* Style the front side (fallback if image is missing) */
	.flip-card-front {
		background-image: radial-gradient(#212121 20%, transparent 20%), radial-gradient(#FAFAFA 20%, transparent 20%);
		background-color: #E53935;
		background-position: 0 0, 25px 25px;
		background-size: 50px 50px;
		border: 2px solid #a51915;
		border-radius: 15px;
	}

	/* Style the back side */
	.flip-card-back {
		border: 2px solid #a51915;
		border-radius: 15px;
	  transform: rotateY(180deg);
	  &.gradiant-1 {
	  	background: rgb(0,12,170);
		background: linear-gradient(90deg, rgba(0,12,170,1) 0%, rgba(31,255,0,1) 100%);
	  }
	  &.gradiant-2 {
	  	background: rgb(170,0,58);
		background: linear-gradient(90deg, rgba(170,0,58,1) 0%, rgba(245,255,0,1) 100%);
	  }
	  &.gradiant-3 {
	  	background: rgb(34,193,195);
		background: linear-gradient(0deg, rgba(34,193,195,1) 0%, rgba(253,187,45,1) 100%);
	  }
	  &.gradiant-4 {
	  	background: rgb(34,37,195);
		background: linear-gradient(45deg, rgba(34,37,195,1) 0%, rgba(245,255,0,1) 22%, rgba(1,191,0,1) 47%, rgba(239,255,0,1) 74%, rgba(255,0,0,1) 100%);
	  }
	  &.gradiant-5 {
	  	background: rgb(0,5,255);
		background: linear-gradient(45deg, rgba(0,5,255,1) 0%, rgba(245,255,0,1) 12%, rgba(0,5,255,1) 22%, rgba(245,255,0,1) 47%, rgba(0,5,255,1) 74%, rgba(245,255,0,1) 100%);
	  }
	  &.gradiant-6 {
	  	background: rgb(0,5,255);
		background: linear-gradient(135deg, rgba(0,5,255,1) 0%, rgba(255,0,254,1) 12%, rgba(0,5,255,1) 22%, rgba(255,0,254,1) 47%, rgba(0,5,255,1) 74%, rgba(255,0,254,1) 100%);
	  }
	  &.gradiant-7 {
	  	background: rgb(170,0,58);
		background: linear-gradient(0deg, rgba(170,0,58,1) 0%, rgba(0,245,255,1) 100%);
	  }
	}
}

.inds-scroll-borders {
	border: 2px solid $color1;
	border-radius: 15px;
	background: #f1f1f1;
	overflow: hidden;

	p {
		padding: 0 15px;
		font-weight: 600;

		&:nth-of-type(odd) {
			color: #fff;
			background: #444;
		}
	}
}

/*GLOBOS EXPLOTABLES*/
.globo-container {
	position: relative;
	display: inline-block;

	& > div {
		position: absolute;
		top: 50%;
		padding: 5px;
		background-color: #fff;
		border: 2px solid #000;
		border-radius: 15px;
	}
	.explode-fx {
		position: absolute;
		left: 10%;
		top: 3%;
		display: none;
		transform: scale(0);
		//transition-duration: 200ms;

		/*&.active {
			transform: scale(3);
			transition-duration: 200ms;
		}*/
		&.active {
			animation-name: explode;
			animation-duration: 250ms;
		}
	}
	img.unexplodable {
		filter: sepia(1);

		&.unexploding {
			animation-name: unexploding;
			animation-duration: 100ms;
			animation-iteration-count: 4;
		}
	}
}
@keyframes explode {
    from {
        transform: scale(0);
    }
    to {
        transform: scale(3);
    }
}
@keyframes unexploding {
    0% {
        transform: translate(-5px, 0px);
    }
    50% {
        transform: translate(5px, 0px);
    }
    100% {
    	transform: translate(-5px, 0px);
    }
}
/*FGE*/

/**/
.string-check {
	input {
		width: 60px;
	}
}
/**/

.content-size {
	display: inline-block;
	position: relative;

	&#inds-filetes-1 > div {
		position: absolute;
		height: 20px;
		width: 20px;
		top: 63%;
		left: 66.7%;
	}
	&#inds-filetes-2 > div {
		position: absolute;
		height: 20px;
		width: 20px;
		top: 35%;
		left: 64%;
	}
	&#inds-filetes-3 > div {
		position: absolute;
		height: 20px;
		width: 20px;
		top: 13%;
		left: 23%;
	}
}

.content-size {
	display: inline-block;
	position: relative;

	&#inds-parrafos-1 > div {
		position: absolute;
		height: 20px;
		width: 20px;

		&:nth-of-type(1) {
			top: 10%;
			left: 26%;
		}
		&:nth-of-type(2) {
			top: 10%;
			left: 74%;
		}
		&:nth-of-type(3) {
			top: 38%;
			left: 15%;
		}
		&:nth-of-type(4) {
			top: 34%;
			left: 36%;
		}
		&:nth-of-type(5) {
			top: 50%;
			left: 63%;
		}
		&:nth-of-type(6) {
			top: 29%;
			left: 85%;
		}
	}
}




.borders-2 {
	border-radius: 2rem;
	padding: 15px;
}

.borders-6 {
	border: 5px solid $color1;
	border-radius: 2rem;
	padding: 5px;
	height: 100%;
	background-color: #777;

	p {
		color: white;
	}
}
.borders-7 {
	border: 5px solid $color1;
	border-radius: 2rem;
	padding: 5px;
	height: 100%;
	background-color: #f1f1f1;
	//margin: 5px;
}
/*Flex button*/
.flex-wrap {
	display: flex;
	flex-wrap: wrap;
}
.desplegar-multi {
	padding: 20px 10px;
	border: 2px solid #82d8ff;
	border-radius: 100px;
	background-color: $color1;
	width: 100%;
	align-self: center;
	cursor: pointer;
}
.info-multi {
	display: none;
}
/**/

.actividad-drag-6 {
	.cajonDrag {
		display: inline-block;
		text-align: center;
		border: 2px solid $color1;
		background: #ddd;
		padding: 5px;
		outline: none;
	}

	.correctaDrag {
		border: 2px solid $color1;
		background: #beb;
	}

	.incorrectaDrag {
		border: 2px solid darkred;
		background: #ebb;
	}
}

.borders-5 {
	border: 2px solid black;
	border-radius: 2rem;
	padding: 15px;
	height: 100%;
	background-color: white;
}
/*Flex button*/
.flex-wrap {
	display: flex;
	flex-wrap: wrap;
}
.desplegar-multi {
	padding: 20px 10px;
	border: 2px solid #82d8ff;
	border-radius: 100px;
	background-color: $color1;
	width: 100%;
	align-self: center;
	cursor: pointer;
}
.info-multi {
	display: none;
}

.actividad-drag-12 {

	.cajonDrag {
		width: 100px;
    	height: 71px;
		padding: 5px 0;
		background-color: #fff;
		border: 2px solid #46b5e8;
		border-radius: 5px;
		display: inline-flex;

		& p {
			font-size: 1.2em;
			text-align: center;
		}
	}
	.correctaDrag {
		background: #beb;
	}

	.incorrectaDrag {
		background: #ebb;
	}
}
.ipad-frame {
	position: relative;
	background-color: black;
	padding: 7vh 5vh 12vh 5vh;
	width: 90%;
	height: 80vh;
	margin: auto;
	border-radius: 5%;
	border: 2px solid #777;

	.ipad-cam {
		position: absolute;
		background-color: #fff;
		top: 2vh;
		height: 2vh;
		width: 2vh;
		border-radius: 50%;
	}
	.ipad-screen {
		height: 100%;
		background-color: #fff;
	}
	.ipad-button {
		position: absolute;
		cursor: pointer;
		bottom: 3vh;
		width: 6vh;
		height: 6vh;
		box-shadow: -8px -8px 4px -4px #fff inset;
		border: 1px solid #fff;
		border-radius: 50%;
		user-select: none;
	}

}

.content-size {
	display: inline-block;
	position: relative;
	&#illustrator-1 div {
		position: absolute;
		height: 5%;
		width: 15%;

		&:nth-of-type(1) {
			top: 0;
			left: 10%;
		}
		&:nth-of-type(2) {
			top: 0;
			left: 62%;
		}
		&:nth-of-type(3) {
			top: 3%;
			left: 83%;
		}
		&:nth-of-type(4) {
			bottom: 1%;
			left: -2%;
		}
		&:nth-of-type(5) {
			bottom: 2%;
			left: 15%;
		}
		&:nth-of-type(6) {
			bottom: 2%;
			left: 39%;
		}
		&:nth-of-type(7) {
			bottom: 2%;
			left: 63%;
		}

	}
}

/*SLIDER*/
.slider-style-1 {
	.prev, .next {
	  opacity: 0.8;
	  color: #fff;
	  background-color: #46b5e8;
	  cursor: pointer;
	  /*display: block;*/
	  font-weight: bold;
	  font-size: 56px;
	  /*width: 38px;*/
	  transition: 0.4s ease;
	  /*border-radius: 50%;*/
	  user-select: none;
	}
	.prev:hover, .next:hover {
	  opacity: 1 !important;
	  color: #fff;
	}

	.arrows {
		//width: auto;
		background-color: $color1;
	}
	.arrows a {
	  opacity: 0.3;
	  pointer-events: none;
	}
	.arrows a.active {
	  opacity: 0.7;
	  pointer-events: all;
	}
	.my-slides {
	  display: inline-block;
	  width: 100%;
	  min-height: 60%;
	  /*overflow: auto;*/
	  white-space: normal; /*Para sliders horizontalez*/
	  vertical-align: top;
	}
}

.content-size {
	display: inline-block;
	position: relative;
	&#illustrator-2 div {
		position: absolute;
		height: 15%;
		width: 25%;

		&:nth-of-type(1) {
			top: 45%;
			//left: 10%;
		}
		&:nth-of-type(2) {
			top: 0;
			left: 62%;
		}
		&:nth-of-type(3) {
			top: 3%;
			left: 83%;
		}
		&:nth-of-type(4) {
			bottom: 1%;
			left: -2%;
		}
	}
}

.absolute-center-vertical {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
	margin-top: auto;
	margin-bottom: auto;
	z-index: 1;
}

/**/
.img-cb, .img-rb {
	cursor: pointer;
	&.active {
	}
	&.inactive {
		-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
		filter: grayscale(100%);
		&:hover {
			-webkit-filter: grayscale(70%); /* Safari 6.0 - 9.0 */
			filter: grayscale(70%);
		}
	}
}
/**/

/*SLIDER*/
.slider-type-1 {
	.prev, .next {
	  opacity: 0.8;
	  color: #fff;
	  //background-color: #46b5e8;
	  cursor: pointer;
	  /*display: block;*/
	  font-weight: bold;
	  font-size: 56px;
	  /*width: 38px;*/
	  transition: 0.4s ease;
	  /*border-radius: 50%;*/
	  user-select: none;
	}
	.prev:hover, .next:hover {
	  opacity: 1 !important;
	  color: #fff;
	}

	.arrows {
	  //width: auto;
		background-color: $color1;
	}
	.arrows a {
	  opacity: 0.3;
	  pointer-events: none;
	}
	.arrows a.active {
	  opacity: 0.7;
	  pointer-events: all;
	}
	.my-slides {
	  display: inline-block;
	  width: 100%;
	  min-height: 10%;
	  /*overflow: auto;*/
	  white-space: normal; /*Para sliders horizontalez*/
	}
}
/**/

.actividad-drag-1 {
	.cajonDrop {
		min-height: 200px;
		border-bottom-left-radius: 2rem;
		border-bottom-right-radius: 2rem;
		padding: 15px;
		background-color: #ddd;
		&-header {
			padding: 15px;
			min-height: 30px;
			background-color: #ddd;
			border-top-left-radius: 2rem;
			border-top-right-radius: 2rem;
		}
	}
	.correctaDrop {
		background-color: #4e44;
		transition-duration: 300ms;
	}
	.incorrectaDrop {
		background-color: #e444;
		transition-duration: 300ms;
	}

	.drag-error-1 {
		background-color: #e444;
		transition-duration: 300ms;
	}

	.drag-correcto-1 {
		background-color: #4e44;
		transition-duration: 300ms;
	}
}

.actividad-drag-8 {
	.cajonDrag {
		display: inline-block;
		border: 2px solid #c9c9c9;
		background: #f1f1f1;
		color: $color1;
		outline: none;
		border-radius: 10px;
		padding: 15px;
	}

	.correctaDrag {
		border: 2px solid darkgreen;
		background: #beb;
		color: $color1;
	}

	.incorrectaDrag {
		border: 2px solid darkred;
		background: #ebb;
		color: $color1;
	}

	.cajonDrop {
		border: 2px solid #c9c9c9;
		background: #f1f1f1;
		color: $color1;
		outline: none;
		border-radius: 10px;
	}
	.correctaDrop {
		border: 2px solid darkgreen;
		background: #beb;
		color: $color1;
	}

	.incorrectaDrop {
		border: 2px solid darkred;
		background: #ebb;
		color: $color1;
	}
}
.content-size {
	display: inline-block;
	position: relative;

	&#resolucion-1 > div {
		position: absolute;
		height: 11%;
		width: 30%;

		&:nth-of-type(1) {
			top: 5%;
			left: 56%;
		}
		&:nth-of-type(2) {
			top: 32%;
			left: 86%;
		}
		&:nth-of-type(3) {
			top: 71%;
			left: 100%;
		}
	}
}

.absolute-center-vertical {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
	margin-top: auto;
	margin-bottom: auto;
	z-index: 1;
}
.answer-correct, .answer-incorrect {
	display: none;
	z-index: 2;
}

.content-size {
	display: inline-block;
	position: relative;
}
.barra-progreso-vert {
    position: absolute;
    top: 29.2%;
    left: 40%;
	width: 12.5%;
	height: 55.6%;
	background-color: #fff7;
	transform: rotate(180deg);
}
.barra-progresado-vert {
	background-color: #000;
	height: 0;
	transition-duration: 500ms;
}
.board-questions {
	min-height: 450px;
	position: relative;
	border-radius: 15px;
	padding: 15px;

	.question {
		animation-duration: 400ms;
	}

	.round-button {
		display: block;
		max-width: 90%;
		min-width: 40%;
		border-radius: 15px;
		box-shadow: 5px 5px #0007;
		padding: 15px;
		outline: none;
		color: #fff;
		& p {
			color: #fff;
			font-size: 2em;
		}
		&.active, &:active {
			box-shadow: 5px 5px #0007 inset;
		}
	}
}
/**/
.estadistica-indicador-horiz.style-1 {
	height: 50px;
	border-top: 1px solid black;
	position: relative;

	&.end {
		border-bottom: 1px solid black;
	}

	p {
		position: absolute;
		bottom: 100%;
	}
}
.barra-vert-container {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	position: absolute;

	.indicador-barra-vert.style-1 {
		width: 30px;
		height: 0;
		background-color: cornflowerblue;
		position: absolute;
		bottom: 0;
		transition-duration: 350ms;

		p {
			position: absolute;
			top: 100%;
		}
	}
}

.libreta-fondo {
	background-image: url('../img/m2l3/recursos-ajustes-41.png');
	padding: 4% 4% 3.5% 3%;
	background-size: 100% 100%;
	width: 820px;
	max-width: 100%;
}
//SASS
.background-fixed-2 {
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center;
	background-size: 100% 100%;
}
.imagen-area-arrastrable {
	.content-size {
		display: inline-block;
		& div {
			position: absolute;
			height: 36%;
			width: 257px;
			&:nth-of-type(1) {
				top: 14%; margin-left: 56px;
			}
			&:nth-of-type(2) {
				top: 14%; margin-left: 322px;
			}
			&:nth-of-type(3) {
				top: 62%; margin-left: 198px;
			}
		}
	}
}

.background-fixed-30 {
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center;
	background-size: 100% 100%;
}
.imagen-area-arrastrable-30 {
	.content-size {
		display: inline-block;
		& div {
			position: absolute;
			height: 26%;
			width: 83px;
			&:nth-of-type(1) {
				top: -1%; margin-left: 112px;
			}
			&:nth-of-type(2) {
				top: 44%; margin-left: -1px;
			}
			&:nth-of-type(3) {
				top: 52%; margin-left: 221px;
			}
			&:nth-of-type(4) {
				top: 19%; margin-left: 404px;
			}
			&:nth-of-type(5) {
				top: 49%; margin-left: 801px;
			}
			&:nth-of-type(6) {
				top: 0%; margin-left: 601px;
			}
			&:nth-of-type(7) {
				top: 74%; margin-left: 495px;
			}
		}
	}
}

.actividad-drag-4 {
	.cajonDrag {
		display: inline-block;
		line-height: 40px;
		font-size: 20px;
		text-align: center;
		color: $color1;
		outline: none;
		border-radius: 10px;
	}

	.correctaDrag {
		border: 2px solid darkgreen;
		background: #beb;
		color: $color1;
	}

	.incorrectaDrag {
		border: 2px solid darkred;
		background: #ebb;
		color: $color1;
	}
}

.background-fixed-10 {
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center;
	background-size: 100% 100%;
}
.imagen-area-arrastrable {
	.content-size-10 {
		display: inline-block;
		& div {
			position: absolute;
			height: 16%;
			width: 165px;
			&:nth-of-type(1) {
				top: 67%; margin-left: 440px;
			}
			&:nth-of-type(2) {
				top: 86%; margin-left: 216px;
			}
			&:nth-of-type(3) {
				top: 67%; margin-left: -2px;
			}
			&:nth-of-type(4) {
				top: 67%; margin-left: 440px;
			}
			&:nth-of-type(5) {
				top: 86%; margin-left: 216px;
			}
			&:nth-of-type(6) {
				top: 67%; margin-left: -2px;
			}
			&:nth-of-type(7) {
				top: 67%; margin-left: 440px;
			}
			&:nth-of-type(8) {
				top: 86%; margin-left: 216px;
			}
			&:nth-of-type(9) {
				top: 67%; margin-left: -2px;
			}


		}
	}
}

.actividad-drag-10 {
	.cajonDrag {
		display: inline-block;
		line-height: 40px;
		font-size: 20px;
		text-align: center;
		color: $color1;
		outline: none;
		border-radius: 10px;
	}

	.correctaDrag {
		border: 2px solid darkgreen;
		background: #beb;
		color: $color1;
	}

	.incorrectaDrag {
		border: 2px solid darkred;
		background: #ebb;
		color: $color1;
	}
}

.speech-bubble {
	//position: relative;
	position: absolute;
	background: #29303b;
	min-height: 100px;
	max-width: 300px;
	padding: 15px;
	margin-left: 50px;
	border-radius: 0.5rem;
}

.speech-bubble:after {
	content: '';
	position: absolute;
	left: 0;
	top: 20%;
	width: 0;
	height: 0;
	border: 30px solid transparent;
	border-right-color: #29303b;
	border-left: 0;
	border-top: 0;
	margin-top: -15px;
	margin-left: -30px;
}

.content-size {
	display: inline-block;
	position: relative;
	&#herramientas-2 div {
		position: absolute;
		height: 10%;
		width: 29%;

		&:nth-of-type(1) {
			top: 2%;
			left: 1%;
		}
		&:nth-of-type(2) {
			top: 16%;
			right: 1%;
		}
		&:nth-of-type(3) {
			top: 32%;
			left: 1%;
		}
		&:nth-of-type(4) {
			top: 44%;
			right: 1%;
		}
		&:nth-of-type(5) {
			top: 59%;
			left: 1%;
		}
		&:nth-of-type(6) {
			top: 74%;
			right: 1%;
		}
		&:nth-of-type(7) {
			top: 89%;
			left: 1%;
		}
	}
}

/*Camara interactiva*/
.camBtn {
	cursor: pointer;
}
.flash {
	transition: 200ms;
	height: 5%;
	width: 5%;

	&.flashing {
		background-color: white;
		box-shadow: 0px 0px 50px 50px white;
	}
}

.polaroid-pic {
	animation-delay: 500ms;
	max-width: 60%;
}
.print-pic {
	max-width: 40%;
	margin-bottom: 5px;
	box-shadow: 5px 5px #0008;
	animation-delay: 500ms;

	&.blurred {
		filter: blur(3px) hue-rotate(-15deg);
	}
}
/**/

.actividad-drag-2 {
	.cajonDrag {
		display: inline-block;
		width: 40px;
		height: 40px;
		line-height: 40px;
		font-size: 20px;
		text-align: center;
		border: 2px solid #c9c9c9;
		background: #f1f1f1;
		color: $color1;
		outline: none;
		border-radius: 100%;
	}
	.cajonDrop {
		display: inline-block;
		width: 40px;
		height: 40px;
		line-height: 40px;
		font-size: 20px;
		text-align: center;
		border: 1px solid #c9c9c9;
		background: #f1f1f1;
		color: #303437;
		outline: none;
		border-radius: 100%;
	}

	.correctaDrag {
		border: 2px solid darkgreen;
		background: #beb;
		color: $color1;
	}

	.incorrectaDrag {
		border: 2px solid darkred;
		background: #ebb;
		color: $color1;
	}
	.drag-span {
		position: absolute;
		line-height: 40px;
		font-size: 20px;
		margin-left: 20px;
		color: blue;
	}
}
.table-2 {
	border: 1px solid $color1;
	margin: auto;
	font-family: 'Montserrat';
	tbody{
		tr {
			td {
				border: 1px solid $color1;
				vertical-align: middle;
				padding: 5px;
			}
		}
	}
	thead {
		tr {
			th {
				border: 1px solid $color1;
				padding: 5px;
			}
		}
	}
}



.content-size {
	display: inline-block;
	position: relative;

	&#printer-2 > div {
		position: absolute;

		&.polaroid-container {
			width: 100%;
			top: 70.5%;
			overflow: hidden;
		}
	}
}

.content-size {
	display: inline-block;
	position: relative;

	&#camara-1 > div {
		position: absolute;

		&.polaroid-container {
			width: 100%;
			top: 65%;
			overflow: hidden;
		}

	}
}
.print-pic {
	width: 40%;
	margin-bottom: 5px;
	box-shadow: 5px 5px #0008;
	animation-delay: 500ms;

	&.blurred {
		filter: blur(3px) hue-rotate(-15deg);
	}
}

.cuadroInfo-2 {
	display: flex;
	align-items: center;
}
.actividad-drag-7 {
	.cajonDrop {
		width: 85%;
		padding: 30px;
		background-color: #ef970a;
		border-radius: 15px;

		& p {
			font-size: 2em;
			color: #fff;
			text-align: center;
		}
	}

	.cajonDrag {
		width: 90%;
		padding: 15px;
		background-color: #fff;
		border: 2px solid #ef970a;
		border-radius: 15px;
		display: inline-block;

		& p {
			font-size: 1.2em;
			text-align: center;
		}
	}
	.correctaDrag {
		background: #beb;
	}

	.incorrectaDrag {
		background: #ebb;
	}
}


.flip-box {
		cursor: pointer;
		background-color: transparent;
		perspective: 1000px; /* Remove this if you don't want the 3D effect */
	  }  
	  
	  .flip-box-inner {
		position: relative;
		width: 100%;    
		text-align: center;
		transition: transform 0.8s;
		transform-style: preserve-3d;
	  }
		
	  .flip-box:hover .flip-box-inner {
		transform: rotateY(180deg);
	  }
	  
	  .flip-box-front, .flip-box-back {
		position: absolute;
		width: 100%;
		height: 100%;
		backface-visibility: hidden;
	  }
		
	  .flip-box-back {   
		transform: rotateY(180deg);
	  }

.cerrarX {
	cursor: pointer;
	position: absolute;
	color: #fff;
	right: 10px;
	top: 5px;
}

.content-size {
	display: inline-block;
	position: relative;

	&#camera-2 > div {
		position: absolute;

		&.flash {
			top: 15%;
			left: 11%;
		}
		&.polaroid-container {
			width: 100%;
			top: 91%;
		}

	}
}
/**/
.flash {
	transition: 200ms;
	height: 5%;
	width: 5%;

	&.flashing {
		background-color: white;
		box-shadow: 0px 0px 50px 50px white;
	}
}

/*Actividad ordenar palabras*/
.word-arranger-container {
	position: relative;
	height: 250px;
	width: 700px;
	margin: 0 auto;
	background-color: #fffa7b;
	border: 2px solid #ea9f22;

	.letters-container-1 {
		.letter-1 {
			top: 13%;
			left: 7%;
		}
		.letter-2 {
			top: 13%;
			left: 10%;
		}
		.letter-3 {
			top: 13%;
			left: 13%;
		}
		.letter-4 {
			top: 13%;
			left: 16%;
		}
		.letter-5 {
			top: 13%;
			left: 19%;
		}
		.letter-6 {
			top: 13%;
			left: 22%;
		}
		.letter-7 {
			top: 30%;
			left: 9%;
		}
		.letter-8 {
			top: 30%;
			left: 12%;
		}
		.letter-9 {
			top: 30%;
			left: 15%;
		}
		.letter-10 {
			top: 30%;
			left: 18%;
		}
		.letter-11 {
			top: 30%;
			left: 21%;
		}
	}
	.letters-container-2 {
		.letter-1 {
			top: 13%;
			left: 32%;
		}
		.letter-2 {
			top: 13%;
			left: 35%;
		}
		.letter-3 {
			top: 13%;
			left: 38%;
		}
		.letter-4 {
			top: 13%;
			left: 41%;
		}
		.letter-5 {
			top: 13%;
			left: 44%;
		}
		.letter-6 {
			top: 13%;
			left: 47%;
		}
		.letter-7 {
			top: 30%;
			left: 34%;
		}
		.letter-8 {
			top: 30%;
			left: 37%;
		}
		.letter-9 {
			top: 30%;
			left: 40%;
		}
		.letter-10 {
			top: 30%;
			left: 43%;
		}
		.letter-11 {
			top: 30%;
			left: 46%;
		}
	}
	.letters-container-3 {
		.letter-1 {
			top: 60%;
			left: 7%;
		}
		.letter-2 {
			top: 60%;
			left: 10%;
		}
		.letter-3 {
			top: 60%;
			left: 13%;
		}
		.letter-4 {
			top: 60%;
			left: 16%;
		}
		.letter-5 {
			top: 60%;
			left: 19%;
		}
		.letter-6 {
			top: 60%;
			left: 22%;
		}
		.letter-7 {
			top: 76%;
			left: 9%;
		}
		.letter-8 {
			top: 76%;
			left: 12%;
		}
		.letter-9 {
			top: 76%;
			left: 15%;
		}
		.letter-10 {
			top: 76%;
			left: 18%;
		}
		.letter-11 {
			top: 76%;
			left: 21%;
		}
	}
	.letters-container-4 {
		.letter-1 {
			top: 60%;
			left: 32%;
		}
		.letter-2 {
			top: 60%;
			left: 35%;
		}
		.letter-3 {
			top: 60%;
			left: 38%;
		}
		.letter-4 {
			top: 60%;
			left: 41%;
		}
		.letter-5 {
			top: 60%;
			left: 44%;
		}
		.letter-6 {
			top: 60%;
			left: 47%;
		}
		.letter-7 {
			top: 76%;
			left: 34%;
		}
		.letter-8 {
			top: 76%;
			left: 37%;
		}
		.letter-9 {
			top: 76%;
			left: 40%;
		}
		.letter-10 {
			top: 76%;
			left: 43%;
		}
		.letter-11 {
			top: 76%;
			left: 46%;
		}
	}
	.letters {
		position: absolute;
		transition-duration: 1s;
		pointer-events: none;
		width: 20px;
		z-index: 2;

		&.letter-6.arranged {
			top: 45%;
			left: 60%;
			pointer-events: all;
		}
		&.letter-10.arranged {
			top: 45%;
			left: 62%;
			pointer-events: all;
		}
		&.letter-9.arranged {
			top: 45%;
			left: 64%;
			pointer-events: all;
		}
		&.letter-4.arranged {
			top: 45%;
			left: 66%;
			pointer-events: all;
		}
		&.letter-5.arranged {
			top: 45%;
			left: 68%;
			pointer-events: all;
		}
		&.letter-3.arranged {
			top: 45%;
			left: 70%;
			pointer-events: all;
		}
		&.letter-2.arranged {
			top: 45%;
			left: 72%;
			pointer-events: all;
		}
		&.letter-7.arranged {
			top: 45%;
			left: 74%;
			pointer-events: all;
		}
		&.letter-1.arranged {
			top: 45%;
			left: 76%;
			pointer-events: all;
		}
		&.letter-8.arranged {
			top: 45%;
			left: 78%;
			pointer-events: all;
		}
		&.letter-11.arranged {
			top: 45%;
			left: 80%;
			pointer-events: all;
		}
	}
	.cb-arrange {
		position: absolute;
		height: 100px;
		width: 160px;
		background-color: #cacaca;
		border-radius: 20px;
		box-shadow: -5px -5px 0px 0px #0007 inset;
		cursor: pointer;
		transition: background-color 200ms, box-shadow 100ms;
		z-index: 1;

		&.cb-pos-1 {
			top: 7%;
			left: 5%;
		}
		&.cb-pos-2 {
			top: 7%;
			left: 30%;
		}
		&.cb-pos-3 {
			top: 54%;
			left: 5%;
		}
		&.cb-pos-4 {
			top: 54%;
			left: 30%;
		}

		&:hover {
			background-color: #6fb1d0;
		}
		&.active {
			background-color: $color1;
			box-shadow: 5px 5px 0px 0px #0007 inset;
		}
	}
}
/**/

.content-size {
	display: inline-block;
	position: relative;

	&#photoshop-1 > div {
		position: absolute;
		height: 8%;
		width: 12%;

		&:nth-of-type(1) {
			top: 55%;
			left: 3%;
		}
		&:nth-of-type(2) {
			top: 20%;
			left: 10%;
		}
		&:nth-of-type(3) {
			top: 2%;
			left: 3%;
		}
		&:nth-of-type(4) {
			top: 39%;
			left: 59%;
		}
	}
}
.actividad-drag-9 {
	.cajonDrag {
		display: inline-block;
		width: 125px;
		border: 2px solid $color1;
		background: #FFF;
		outline: none;
		border-radius: 10px;
		padding: 7px;

		p {
			color: $color1;
			font-weight: 600;
			text-align: center;
		}
	}

	.correctaDrag {
		border: 2px solid darkgreen;
		background: #beb;
		color: $color1;
	}

	.incorrectaDrag {
		border: 2px solid darkred;
		background: #ebb;
		color: $color1;
	}
}

.string-check {
	input {
		width: 60px;
	}
}

/**/
.bp-style-1 {
	h3, h2 {
		color: #f5f5f5;
	}

	.bp-contain-preguntas {
		background-image: url('../img/m4l5/fondo-f-v.png');
		background-repeat:no-repeat;
		background-size:100% 100%;
		padding: 30px;
		border-radius: 30px;
		color: #f5f5f5;
		height: 300px;
	}
	.bp-answer {
		display: inline-block;
		height: 60%;
		width: 49.5%;
		padding: 30px;
		background-color: #0003;
		box-shadow: 0 0 20px 5px $color1;
		&:hover {
			cursor: pointer;
			background-color: #0000004a;
			box-shadow: 0 0 20px 10px $color1;
		}
		&:active {
			box-shadow: 0 0 20px 10px $color1 inset;
		}
	}
}
.bp-correcta {
	display: none;
}
.bp-error {
	display: none;
}
/**/
.boton-2 {
	border: 3px solid #e0004d; /*anchura, estilo y color borde*/
	background-color: transparent; /*color botón*/
	color: #e0004d; /*color texto*/
	text-decoration: none; /*decoración texto*/
	font-family: 'Montserrat'; /*tipografía texto*/
	border-radius: 0.5rem; /*bordes redondos*/
	outline: none; /*Sin bordes al dar click*/
	transition-duration: 0.3s;
	
	&:hover {
		background-color: #e0004d;
		color: #fff;
		transition-duration: 0.3s;
	}
}

.silueta-guia {
	visibility: hidden;
	pointer-events: none;
	max-width: 12vw;
	position: absolute;
	opacity: 0.7;
	z-index: 1;
}
.silueta-fondo {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;

	img {
		visibility: hidden;
	}
}



/*Camara interactiva*/
.camBtn {
	cursor: pointer;
}
.flash {
	transition: 200ms;
	height: 5%;
	width: 5%;

	&.flashing {
		background-color: white;
		box-shadow: 0px 0px 50px 50px white;
	}
}

.polaroid-pic {
	animation-delay: 500ms;
	max-width: 60%;
}
.print-pic {
	max-width: 40%;
	margin-bottom: 5px;
	box-shadow: 5px 5px #0008;
	animation-delay: 500ms;

	&.blurred {
		filter: blur(3px) hue-rotate(-15deg);
	}
}
/**/

.content-size {
	display: inline-block;
	position: relative;

	&#camera-1 > div {
		position: absolute;

		&.flash {
			top: 16%;
			left: 71%;
		}
		&.polaroid-container {
			width: 100%;
			top: 76%;
		}

	}
}


.image-changer {
	position: relative;
	cursor: pointer;
	&.round-button {
		max-width: 40%;
		border-radius: 15px;
		box-shadow: 5px 5px #0007;
		padding: 15px;
		& p {
			color: #fff;
			font-size: 2em;
		}
		&.active, &:active {
			box-shadow: 5px 5px #0007 inset;
		}
	}
	&.flag-button {
		width: 100px;
		padding: 15px;
		transition-duration: 200ms;
		& p {
			color: #fff;
			font-size: 3em;
		}
		&:before {
			content: "";
			position: absolute;
			top: 0;
			right: 0;
			border-top: 25px solid transparent;
			border-bottom: 25px solid transparent;
			height: 0;
			width: 0;
			border-right: 35px solid $color4;
			/*mix-blend-mode: darken;*/
		}
		&:hover {
			width: 110px;
		}
		&.active {
			z-index: 2;
			width: 110px;
		}
	}
}

.cuadroInfo-2 {
	display: flex;
	//padding: 15px;
	align-items: center;
	//border: 2px solid #aaa;
	//border-radius: 2rem;
}

@media only screen and (max-width: 1200px) {
	.cuadroInfo-2 {
		padding: 15px;
		//border: 2px solid #aaa;
		//border-radius: 2rem;
	}
}

@media only screen and (max-width: 992px) {
	.cuadroInfo-2 {
		display: block;
		padding: 15px;
		//border: 2px solid #aaa;
		//border-radius: 2rem;
	}
}
.shadow-trans {
	z-index: 1;
	box-shadow: 5px 5px #0005;
}

	.barra-progreso-2 {
	width: 50%;
	//margin: auto;
	background-color: #ddd;
	border-style: solid;
	border-width: 10px 20px 10px 20px;
	border-color: $color1;
	border-radius: 4rem;
}

.barra-progresado-2 {
	width: 0%;
	height: 30px;
	background-color: #ff0;
	box-shadow: 0 0 20px 10px #ff0;
	transition: width 1s;
}

.tCabecera-1 {
			background-color: $color1;
			color: #fff;
		}

.table-actividad {
			border: 1px solid $color1;
			margin: auto;
			font-family: 'Montserrat';
			tbody{
				tr {
					td:nth-child(odd) {
						border: 1px solid $color1;
						border-width: 1px 0px 1px 1px;
						vertical-align: middle;
						padding-left: 5px;
						padding-right: 5px;
					}
					td:nth-child(even) {
						border: 1px solid $color1;
						border-width: 1px 1px 1px 0px;
						vertical-align: middle;
						padding-left: 5px;
						padding-right: 5px;
					}
					&:hover {
						background-color: #eee;
					}
				}
			}
			thead {
				tr {
					th {
						border: 1px solid $color1;
						padding-left: 5px;
						padding-right: 5px;
					}
				}
			}
		}

		input.no-arrows[type="number"]::-webkit-outer-spin-button, input.no-arrows[type="number"]::-webkit-inner-spin-button {
			-webkit-appearance: none;
			margin: 0;
		}
		input.no-arrows {
		}

.container-radio-2 {
			display: block;
			position: relative;
			padding-left: 25px;
			cursor: pointer;
			user-select: none;
			/* Hide the browser's default checkbox */
			input {
				position: absolute;
				opacity: 0;
				cursor: pointer;
				height: 0;
				width: 0;
			}
			.checkmark2 {
				position: absolute;
				top: 0;
				left: 0;
				height: 20px;
				width: 20px;
				background-color: #eee;
				/* Crea el indicador (el chulo - oculto si no esta chekeado) */
				&:after {
					content: "";
					position: absolute;
					display: none;
				}
				/* Estilo del indicador (el chulo) */
				&:after {
					top: 3px;
					left: 7px;
					width: 7px;
					height: 12px;
					border: solid white;
					border-width: 0 3px 3px 0;
					-webkit-transform: rotate(45deg);
					-ms-transform: rotate(45deg);
					transform: rotate(45deg);
				}
			}
			/* Estilo cuando pasa el ratón por encima */
			&:hover input ~ .checkmark2 {
				background-color: #ccc;
				transition: all 0.3s;
			}
			/* Estilos cuando está chekeado */
			input:checked ~ .checkmark2 {
				background-color: #46b5e8;
				transition: all 0.3s;
			}
			/* Mostrar el indicador cuando está chekeado */
			input:checked ~ .checkmark2:after {
				display: block;
				transition: all 0.3s;
			}
		}

		

.selecter {
	max-width: 140px;
	margin-right: 15px;
}

/*ACTIVIDAD ESTILOS PARA AREAS DEL MAPA*/

.image-map-container {
	position: relative;
	display:inline-block;
}
.image-map-container img {
	display:block;
}
.image-map-container .map-selector, .map-selector2 {
	//color:#ff00;
}
.image-map-container .map-selector.hover, .map-selector2.hover {
	//color:#46b5e88f;
}

.terminoDrop {
	height: 40px;
	border-radius: 3px;
	padding:  0rem !important;
	background-color: #d8d8d8;
  }
  
  .conceptoT1
  {
	cursor: pointer;
	margin-bottom: 20px 
  }
  
  .terminoFloat {
	float: left;
	margin-left: 2em;
  }

.mm{
	border: 3px solid #46b5e8; /*anchura, estilo y color borde*/
	background-color: transparent; /*color botón*/
	text-decoration: none; /*decoración texto*/
	font-family: 'Montserrat'; /*tipografía texto*/
	border-radius: 0.5rem; /*bordes redondos*/
	outline: none; /*Sin bordes al dar click*/
	transition-duration: 0.3s;
	width: 236px;
	height: 270px;
}

.map-selector:after {
	content: '';
	position: absolute;
	top: inherit;
	right: inherit;
	bottom: inherit;
	left: inherit;
	//background: #FFF4;
	//border: 2px solid #e0004d;
	pointer-events: none;
	//box-shadow: 0px 0px 15PX #F00;
}
/*FEPADM*/



/*ACTIVIDAD RELACIONAMIENTO*/
.bola-1 {
	position: absolute;
	top: 10px;
	right: -15px;
	height: 25px;
	width: 25px;
	background-color: #b1b1b1;
	border-radius: 50%;
	cursor: pointer;

	&:hover {
		background-color: #717171;
	}
	&.active {
		background-color: #0f21a1;
	}
}
.bola-2 {
	position: absolute;
	top: 10px;
	left: -15px;
	height: 25px;
	width: 25px;
	background-color: #b1b1b1;
	border-radius: 50%;
	cursor: pointer;

	&:hover {
		background-color: #717171;
	}
	&.active {
	background-color: green;
	}
}

.bola-f {
	position: absolute;
	top: 10px;
	right: -15px;
	height: 25px; 
	width: 25px;
	background-color: green;
	border-radius: 50%;
	cursor: pointer;
}
.img-error, .img-correct {
	display: none;
}
.div-radius {
	position: absolute;
	padding: 15px;
	border-radius: 2rem;
}
/**/

.content-size {
	display: inline-block;
	position: relative;
	&.fuentes-1 div {
		position: absolute;
		height: 30%;
		width: 80%;
		&:nth-of-type(1) {
			bottom: 10%;
			left: 10%;
		}
	}
}

.absolute-center {
	position: absolute;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
	z-index: 1;
}
.slider-container {
	&.ipad-like {
		position: relative;
		background-color: black;
		padding: 7vh 5vh 12vh 5vh;
		width: 50vw;
		height: auto;
		margin: auto;
		border-radius: 5%;
		.slider-style-ipad {
			background-color: #fff;
			height: 40vh;
			overflow: hidden;
		}

		.prev, .next { 
			opacity: 0.8;
			cursor: pointer;
			display: inline-block;
			width: 6vh;
			height: 6vh;
			box-shadow: -8px -8px #fff inset;
			border: 1px solid #fff;
			border-radius: 50%;
			transition: opacity 0.4s ease, box-shadow 10ms linear;
			user-select: none;

			&:hover {
				opacity: 1 !important;
				color: #e0004d;
			}
			&:active {
				box-shadow: 8px 8px #fff inset;
			}
		}

		.arrows {
			width: auto;
			bottom: 3vh;
		}
		.arrows a {
			opacity: 0.5;
			pointer-events: none;
		}
		.arrows a.active {
			opacity: 0.8;
			pointer-events: all;
		}
		.my-slides {
			display: none;
			padding: 15px;
			height: 100%;
			overflow: auto;
		}
	}
	.ipad-top-circle {
		position: absolute;
		top: 2vh;
		height: 2vh;
		width: 2vh;
		background-color: #fff;
		border-radius: 50%;
	}
}

.arrastrable {
	cursor: grab;
}

.arrastrable:active {
	cursor: grabbing;
}

.audioBtn {
	cursor: pointer;
}

.a-enlace {
	display: inline-block;
	border: 3px solid $color1; /*anchura, estilo y color borde*/
	background-color: $color1; /*color botón*/
	border-radius: 1rem; /*bordes redondos*/
	outline: none; /*Sin bordes al dar click*/
	transition-duration: 0.3s;
	padding: 5px;
	font-size: 1.3em;
	a {
		transition-duration: 0.3s;
		color: #fff; /*color texto*/
		text-decoration: none; /*decoración texto*/
		font-family: 'Montserrat'; /*tipografía texto*/
	}
}
.a-enlace:hover {
	background-color: #fff;
	a {
		color: $color1;
		transition-duration: 0.3s;
	}
}

.infoIcono {
			background-color: #eee;
			border-radius: 1rem;
			padding: 15px;
			padding-left: 15px;
			padding-right: 15px;
		}


.cuadroInfo {
		display: flex;
		//padding: 15px;
		align-items: center;
		//border: 2px solid #aaa;
		//border-radius: 2rem;
	}

	@media only screen and (max-width: 1200px) {
		.cuadroInfo {
			padding: 15px;
			//border: 2px solid #aaa;
			//border-radius: 2rem;
		}
	}

	@media only screen and (max-width: 992px) {
		.cuadroInfo {
			display: block;
			padding: 15px;
			//border: 2px solid #aaa;
			//border-radius: 2rem;
		}
	}
.cuadroInfo-borders-1 {
	border: 1px solid #ccc;
	border-radius: 2rem;
	padding-top: 15px;
	padding-bottom: 15px;
}

.flag-down {
	//background: red;
	display: inline-block;
	height: 55px;
	position: relative;
	width: 100px;
	&.cyan {
		background-color: #89f;
		&:before {
			border-top: 35px solid #89f;
			
		}
	}
	&:before {
		content: "";
		border-left: 50px solid transparent;
		border-right: 50px solid transparent;
		height: 0;
		left: 0;
		position: absolute;
		top: 55px;
		width: 0;
	}
}


.back-img-fit-content {
	background-image: url('../img/m1l1/recursos-tema-5-24.png');
	background-repeat:no-repeat;
	background-size:100% 100%;
	display: inline-block;
	position: relative;
	padding: 0;
}


@media screen and (max-width: 768px) and (min-width: 320px) {
	.curso {
		.seccion-leccion-1 {

		}
	}
}

@media screen and (min-width: 769px) {
	.curso {
		.seccion-leccion-1 {

		}
	}
}

.fondo{
	background-image: url('../img/m1l1/recursos-15.png');
}

.fondo1{
    background-image: url('../img/m2l3/recursos-03.png');
}

.cajon-suelta-1 {
			min-height: 250px;
			background-color: #E4E4E4;
			border-radius: 2rem;
			padding: 15px;
		}
		.cajon-suelta-2 {
			border: 2px solid $color1;
			border-radius: 2rem;
			padding: 15px;
			//margin-bottom: 15px;
		}

		@media only screen and (max-width: 991px) {
			.cajon-suelta-1 {
				min-height: 150px;
			}
		}

		.drag-error-1 {
			background-color: #e444;
			transition-duration: 300ms;
		}

		.drag-correcto-1 {
			background-color: #4e44;
			transition-duration: 300ms;
		}

		.arrastrable {
			cursor: grab;
		}

		.arrastrable:active {
			cursor: grabbing;
		}

		.error-1 {
			color: #a94442;
			background-color: #f2dede;
			border-color: #ebccd1;
		}
		.correcto-1 {
			color: #3c763d;
			background-color: #dff0d8;
			border-color: #d6e9c6;
		}
		.pressedKey {
			color: #f00;
			font-weight: 600;
			transition-duration: .3s;
		}

/**/
.folder-container {
	background-color: #e7c747;
	height: 250px;
	width: 80%;
	min-width: 400px;
	border-radius: 5px 5px 3px 3px;
	position: relative;

	.polaroid-container {
		overflow: hidden;
		width: 100%;
		position: static;
		bottom: 100%;
		transition-duration: 250ms;
	}

	.polaroid-pic {
		height: 250px;
		background-color: #9a9afa;
		min-width: 618px;
		padding: 15px;
		box-shadow: 10px 5px 2px #0007;
		margin-bottom: 6px;
	}
}
.folder-tab {
	cursor: pointer;
	position: absolute;
	bottom: 100%;
	height: 20%;
	width: 10%;
	border-radius: 5px 5px 0 0;
	z-index: 1;

	& > p {	
		text-align: right;
		font-weight: 700;
		font-size: 40px;
		line-height: 40px;
	}
}
/**/
.m4l2 .contenido-2 .seccion-1 .cajon-texto-1 .texto-titulo-1 { font-weight: 400; }
.m4l2 .contenido-2 .seccion-1 .cajon-texto-1 .linea-1 { border-top: 0.2rem solid #46b5e8; margin-left: 0rem; }
.m4l2 .contenido-2 .seccion-2 .cajon-boton-1 { cursor: pointer; opacity: 0.5; }
.m4l2 .contenido-2 .seccion-2 .cajon-boton-1 .texto-contenido-1 span .fondo-1 { color: #46b5e8; }
.m4l2 .contenido-2 .seccion-2 .cajon-boton-1:hover { opacity: 1; }
.m4l2 .contenido-2 .seccion-2 .desactiva { opacity: 0.2; pointer-events: none; }
.m4l2 .contenido-2 .seccion-2 .cajon-contenido-multimedia-1 .seccion-libro-1 .cajon-texto-1 { border: 0.1rem solid #46b5e8; }
.m4l2 .contenido-2 .seccion-2 .border-1 .seccion-libro-1 .cajon-texto-1 { border-top: 0rem solid #edac00; border-left: 0rem solid #edac00; border-right: 0rem solid #edac00; border-bottom: 0.1rem solid #edac00; }

.m4l2 .contenido-2 .seccion-1 .cajon-texto-1 { margin-bottom: 2rem !important; }
.m4l2 .contenido-2 .seccion-1 .cajon-texto-1 .linea-1 { width: 60%; }
.m4l2 .contenido-2 .seccion-2 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.m4l2 .contenido-2 .seccion-2 #btnAnterior-1 { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; }
.m4l2 .contenido-2 .seccion-2 #btnSiguiente-1 { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; }
.m4l2 .contenido-2 .seccion-2 .cajon-contenido-multimedia-1 { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; }
.m4l2 .contenido-2 .seccion-2 .cajon-contenido-multimedia-1 .seccion-libro-1 .cajon-texto-1 .sub-seccion-1 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.m4l2 .contenido-2 .seccion-2 .cajon-contenido-multimedia-1 .seccion-libro-1 .cajon-texto-1 .sub-seccion-1 .cajon-imagen-1 { margin-bottom: 2rem; }

.m4l2 .contenido-2 .seccion-1 .cajon-texto-1 { margin-bottom: 0rem !important; }
.m4l2 .contenido-2 .seccion-1 .cajon-texto-1 .linea-1 { width: 50%; }
.m4l2 .contenido-2 .seccion-2 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.m4l2 .contenido-2 .seccion-2 #btnAnterior-1 { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; }
.m4l2 .contenido-2 .seccion-2 #btnSiguiente-1 { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; }