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

.curso {
	.seccion-cabecera-1 {
		background: #46b5e8 url(../img/home/fondo-portada-seo.png);
    background-size: contain;
    background-position: left center;
    background-repeat: no-repeat;
    padding-top: 15rem;
    border-top-right-radius: 1.3rem;
    border-top-left-radius: 1.3rem;
    .cajon-linea-1 {
    	padding-right: 0rem;
    	.linea-1 {
				border-top: 0.5rem solid #fff;
			}
    }
	}

	.seccion-menu-1 {
		.seccion-botones-tema-1 {
			display: -webkit-box;
			overflow: hidden;
			.cajon-boton-1 {
				user-select: none;
				cursor: pointer;
				border-top: 4px solid $color6;
				float: left;
	        display: inline;
				&:hover {				
					border-top: 4px solid $color1;
					background-color: $color8;
					transition: all 0.3s;
					.contenido-1 {
						color: $color1;
					}
				}
			}

			.seleccionado {
				border-top: 4px solid $color1;
				background-color: $color8;
				.contenido-1 {
					color: $color1;
				}
			}
		}

		.linea-progreso-1 {
			border-top: 0.5rem solid #46b5e8;
	    margin: 0;
    	padding: 0;
		}
		
		.vl {
			border-left: 6px solid $color3;
    	height: 3.5rem;
		}

		.boton-antSig-1 {
			user-select: none;
			cursor: pointer;
			&:hover {
				background-color: $color8;
				transition: all 0.3s;
			}
		}

		.boton-antSig-2, .boton-volver-1 {
			user-select: none;
			cursor: pointer;
			border-radius: 0.5rem;
			border: 1px solid $color1;
			background-color: $color8;
			.parrafo-1 {
				margin-left: 1rem;
				margin-right: 1rem;

			}
			.fa-caret-right {
				position: relative;
				animation-name: movimientoSig;
				animation-duration: 4s;
				animation-iteration-count: infinite;
				animation-timing-function: ease-out;
			}
			.fa-caret-left {
				position: relative;
				animation-name: movimientoAnt;
				animation-duration: 4s;
				animation-iteration-count: infinite;
				animation-timing-function: ease-out;
			}
			&:hover {
				background-color: $color1;
				transition: all 0.3s;
				.parrafo-1 {
					color: $color8;
				}
				.fa-caret-left, .fa-caret-right, .fa-home {
					color: $color8;					
				}				
			}
		}
		.dNone {
			display: none;
			opacity: 0;
		}

		.desactivado {
			pointer-events: none;
			opacity: 0;
		}
	}
}

@media screen and (min-width: 801px) {
	.curso {
		.seccion-menu-1 {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: stretch;
			.seccion-botones-tema-1 {
				// display: flex;
				// flex-direction: row;
				// justify-content: flex-start;
				// align-items: stretch;
			}
		}
	}
}

@media screen and (min-width: 426px) and (max-width: 800px) {
	.curso {
		.seccion-menu-1 {
		}
	}
}

@media screen and (min-width: 425px) and (max-width: 800px) {
	.curso {
		.seccion-cabecera-1 {
			background: #46b5e8 url(../img/home/fondo-portada-seo.png);
	    background-size: contain;
	    background-position: -17rem center;
	    background-repeat: no-repeat;
	    padding-top: 15rem;
	    border-top-right-radius: 1.3rem;
    	border-top-left-radius: 1.3rem;
	    .cajon-linea-1 {
	    	padding-right: 0rem;
	    	.linea-1 {
					border-top: 0.5rem solid #fff;
					color: $color7;
				}
	    }
		}
		.seccion-menu-1 {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: stretch;
			.seccion-botones-tema-1 {
			}
		}
	}
}

@media screen and (min-width: 320px) and (max-width: 425px) {
	.curso {
		.seccion-cabecera-1 {
			background: #46b5e8 url(../img/home/fondo-portada-seo-2.png);
	    background-size: cover;
	    background-position: center -20rem;
	    background-repeat: no-repeat;
	    padding-top: 30rem;
	    border-top-right-radius: 1.3rem;
    	border-top-left-radius: 1.3rem;
	    .cajon-linea-1 {
	    	padding-right: 15px;
	    	.linea-1 {
					border-top: 0.5rem solid #fff;
				}
	    }
		}
		.seccion-menu-1 {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: stretch;
			.seccion-botones-tema-1 {
			}
		}
	}
}

// ANIMACIONES

@keyframes movimientoSig {
	0% {left: 0px;}
	25% {left: 5px;}
	50% {left: 0px;}
	75% {left: 5px;}
	100% {left: 0px;}
}

@keyframes movimientoAnt {
	0% {left: 0px;}
	25% {left: -5px;}
	50% {left: 0px;}
	75% {left: -5px;}
	100% {left: 0px;}
}