.apertura {background-position: center; background-size: cover; min-height: 100vh; margin-bottom: 0.75rem}

.agrupador {position: fixed; top: 0; left: 0; width: 100%}

.textoPrincipal {width: 100vw; font-family: "Majerit", serif; color: #FFF; font-size: 3rem; line-height: 1; margin-left: 3.125rem; z-index: 1; pointer-events: none}
.textoPrincipal {max-width: 48%; width: 48%; float: right; margin-top: 30vh; margin-right: 1.5625rem}
.textoPrincipal .textoTitulo {font-size: 2.625rem; letter-spacing: 0.6875rem; line-height: 3.75rem; display: block; padding-left: 1.25rem}
.textoPrincipal .textoTitulo:first-child {border-top: 0.125rem solid #FFF; padding-top: 2.625rem}
.textoPrincipal .textoTitulo:last-child {border-bottom: 0.125rem solid #FFF; padding-bottom: 2.25rem}
.textoPrincipal p {font-size: 1.25rem; letter-spacing: 0.2375rem; font-weight: 300; line-height: 3.3125rem; padding-top: 0.75rem}

.css-slider-wrapper {width: 100%; height: 100vh; display: block; overflow: hidden; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: -1; background-color: #000}

.slide1, .slide2, .slide3, .slide4 {position: absolute; width: 100vw; height: 100vh; background-repeat: no-repeat; background-position: center; background-size: cover}
.slide1 {background-image: url('/estaticos/2019/09/conduce-como-piensas/img/carrusel/toyota-1-v2.jpg'); animation: fade 40s infinite; -webkit-animation: fade 40s infinite}
.slide2 {background-image: url('/estaticos/2019/09/conduce-como-piensas/img/carrusel/toyota-2-v2.jpg'); animation: fade2 40s infinite; -webkit-animation: fade2 40sinfinite}
.slide3 {background-image: url('/estaticos/2019/09/conduce-como-piensas/img/carrusel/toyota-3-v2.jpg'); animation: fade3 40s infinite; -webkit-animation: fade3 40s infinite}
.slide4 {background-image: url('/estaticos/2019/09/conduce-como-piensas/img/carrusel/toyota-4-v2.jpg'); animation: fade4 40s infinite; -webkit-animation: fade4 40s infinite}

.slide1, .slide2, .slide3, .slide4 {content: ""; width: 100vw; height: 100vh; position: absolute; left: 0; top: 0; background-color: #000; opacity: 0.4}

/**
 * Animaciones
 */
@keyframes fade {
	0% {opacity: 1; transform: scale(1, 1)}
	20% {opacity: 0}
	40% {transform: scale(1.1, 1.1)}
	60% {opacity: 0}
	80% {opacity: 0}
	100% {opacity: 1; transform: scale(1, 1)}
}

@keyframes fade2 {
	0% {opacity: 0; transform: scale(1, 1)}
	20% {opacity: 1}
	40% {transform: scale(1.1, 1.1)}
	60% {opacity: 0}
	80% {opacity: 0}
	100% {opacity: 0; transform: scale(1, 1)}
}

@keyframes fade3 {
	0% {opacity: 0; transform: scale(1, 1)}
	20% {opacity: 0}
	40% {transform: scale(1.1, 1.1)}
	60% {opacity: 1}
	80% {opacity: 0}
	100% {opacity: 0; transform: scale(1, 1)}
}

@keyframes fade4 {
	0% {opacity: 0; transform: scale(1, 1)}
	20% {opacity: 0}
	40% {transform: scale(1.1, 1.1)}
	60% {opacity: 0}
	80% {opacity: 1}
	100% {opacity: 0; transform: scale(1, 1)}
}

/**
 * Responsive
 */
@media (min-width: 80rem) and (max-width: 89.9375rem) { /* 1280PX -> 1439PX */
	.textoPrincipal p {font-size: 1.125rem; letter-spacing: 0.21875rem}
}

@media (min-width: 64rem) and (max-width: 79.9375rem) { /* 1024PX -> 1279PX */
	.textoPrincipal {margin-top: 25vh}
	.textoPrincipal p {font-size: 0.875rem; letter-spacing: 0.1875rem}
}

@media (max-width: 63.9375rem) { /* 1023PX */
	.apertura {margin-bottom: 0}
	
	.textoPrincipal {max-width: 68%; width: 68%}
	.textoPrincipal p {font-size: 1rem; letter-spacing: 0.1875rem}
}

@media (max-width: 47.9375rem) { /* 767PX */
	.textoPrincipal {max-width: 90%; width: 90%; margin: 26vh 5% 0; float: none}
	.textoPrincipal .textoTitulo {font-size: 2.25rem}
	.textoPrincipal .textoTitulo:first-child {padding-top: 1.375rem}
	.textoPrincipal .textoTitulo:last-child {padding-bottom: 1.25rem}
	.textoPrincipal p {line-height: 1.3125rem}
}