/***************/
/*** COLORES ***/
/***************/
:root{
	--color1: #19195e;
	--color2: #666694;
}

.index{
	margin-top:7em;
	width:100%;
}

.index .cont-desplazable{
	margin-top:39em;
	padding-top:2em;
	background-color: var(--colorFondo)!important;
	position:relative;
}

.index .cont-video{
	width:100%;
	height:35em;
	text-align:center;
	position:fixed;
	top:4em;
}

.marcador{
	margin-top:45em;
}

.index .cont-video video{
	width:auto;
	height:100%;
	z-index:1;
	position:relative;
}

@media (max-width:768px){
	.index .cont-video{
		padding-bottom:2em;
		height:30em;
	}
	.index .cont-video video{
		width:100%;
		height:auto;
		margin-top:3em;
	}
	.index .cont-desplazable{
		margin-top:34em;
	}
}

.index .cont-video .col-izq{
	position: absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-image:url(/archivos/slider/imagen3.jpg);
	background-size:100% auto;
	background-position:center 20%;
	z-index:0;
	/*filter:blur(2px);*/
}

.index .cont-video .col-der{
	position: absolute;
	top:0;
	right:0;
	width:25%;
	height:100%;
	background-image:url(/archivos/slider/imagen5.jpg);
	background-size:auto 100%;
	background-position:center center;
	z-index:0;
	filter:blur(2px);
	display:none;
}

.index .cont-botones-slider{
	position:absolute;
	top: 27em;
	width:100%;
	text-align:center;
	z-index:2;
}

@media (max-width:768px){
	.index .cont-botones-slider{
		top:30em;
		font-size:0.75em;
	}

}


.buttonSlider {
    background: linear-gradient(to bottom, blue, darkblue, blue);
    color: white;
    padding: 0.75em 2em;
    width: 20em;
    display: inline-block;
    font-size: 1em;
    font-weight: bold;
    cursor: pointer;
    transition: all 1s ease;
    margin-left: 1em;
    border-radius: 10px;
    margin-right: 1em;
    border: none;
    box-shadow: 0 0 1em #000000;
}
.buttonSlider:hover{
 	background-color: #4169E1;
	color: #fff !important;
 	animation-name: agrandar;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
}

@keyframes agrandar {
	to{
		transform:scale(1.2);
	}
}

.textoSlider{
  position: absolute;
  top: 7em;
  text-align: center;
  width: 60%;
  margin-left:20%;
}

.textoSlider p{
  color: honeydew;
  text-shadow: 0 0 10px black;
  font-size: 4em;
  font-weight: bold;
  font-family: Mada, sans-serif;
  line-height: 1.1;
  opacity: 0;
}

@media (max-width:768px){
	.textoSlider{
		width:90%;
		margin-left:5%;
	}

	.textoSlider p{
		font-size:2em;
	}


	.index .cont-video .col-izq{
		background-size:auto 100%;
		background-position:center 20%;
	}
}

.textoSlider p.aparecer{
	animation-name:aparecer-texto;
	animation-fill-mode: forwards;
	animation-duration:4s;
	animation-delay: 1s;
}

@keyframes aparecer-texto{
  to{opacity:1;}
}

.cont-botones-slider .enlaceSlider{
	cursor:pointer;
	text-decoration:underline;
	color:white;
	text-shadow:0 0 5px black;
	margin-top:1em;
}

.btn-primary{
	background-color:darkblue;
	color:white;
	border-color:darkblue;
	border-radius:0.5em;
}

a{
	text-decoration:none;
	color:inherit;
}

a:visited{
	color:inherit;
}

.index .steps{
	width:100%;
	margin-top:2em;
}

.steps .item{
	width:18%;
	box-sizing: border-box;
	position:relative;
	text-align:center;
}

.steps .item .tit{
	display:block;
	width:100%;
	color:var(--color2);
	font-family: Mada, sans-serif;
}

.steps .item .cont{
	display:block;
	width:100%;
	color:gray;
	font-family: Mada, sans-serif;
}

.steps .item .flecha{
	position:absolute;
	right:-4em;
	top:40%;
	height:1.5em;
	width: 2em;
	background-color:darkblue;
	opacity:0.3;
}

.item .flecha::after{
	content: '';
    border: solid 1.5em transparent;
    border-left: solid 1.5em darkblue;
    position: absolute;
    left: 2em;
    top: -0.65em;
    width: 0;
    height: 0;
}

@media (max-width:768px){
	.steps .item{
		width:90%;
		margin-left:5%;
		margin-bottom:4em;
	}
	
	.steps .item .flecha{
		transform:rotate(90deg);
		left: 45%;
   		top: 112%;
	}

	.item .flecha::after{

	}
}

.titPart{
	margin-top:5em;
	width:100%;
	text-align:center;
	font-family:DancingScript, sans-serif;
}

.titPart h3{
	font-size:3rem;
	color:var(--color1);
}

.titPart h4{
	font-size:2.5rem;
	color:var(--color2);
}

.titPart2 h3{
	font-size:2.5rem;
	color:var(--color1);
	font-family: Mada, sans-serif;
}

@media (max-width:768px){
	.titPart{
		margin-left:5%;
		width:90%;
	}

	.titPart h3{
		line-height: 1;
    	font-size: 2.5em;
	}
}

.iconos{
	text-align:center;
	margin-top:2em;
}

.iconos .item{
	width:12em;
	text-align:center;
	display:inline-block;
	vertical-align:top;
	transform:scale(0.9);
	cursor:pointer;
	font-family:Mada, sans-serif;
}

.iconos .item img{
	width:50%;
	height:6em;
}

.iconos p{
	font-size:1.2em;
}

@media (max-width:768px){
	.iconos .item{
		width:7em;
	}

	.iconos .item img{
		height:auto;
	}
}

.iconos .item:hover{
	animation-name:agrandar;
	animation-duration:0.5s;
	animation-fill-mode:forwards;
}

@keyframes agrandar {
	to{transform:scale(1);}
}

.textoIndex{
	width:100%;
	text-align:center;
	color:var(--color2);
	font-family:Mada, sans-serif;
}

.cont-comentarios{
	width:20em;
	overflow:hidden;
	position:relative;
	height:25em;
	display:inline-block;
	margin:auto;
}

.comentarios{
	text-align:center;
	white-space: nowrap;
	position:absolute;
	top:0;
	left:0;
}

.comentarios .item{
	width:20em;
	height:30em;
	text-align: center;
	display:inline-block;
	white-space: normal;
	vertical-align:top;
}

.comentarios .item .cont-img{
	width:10em;
	height:10em;
	border-radius:50%;
	overflow:hidden;
	text-align:center;
	display: inline-block;
}

.comentarios .item .cont-img img{
	height:100%;
	width:auto;
	margin:auto;
}

.comentarios .item h5{
	display:block;
}

.comentarios .item h4{
	display:block;
	font-family:Mada, sans-serif;
	color: var(--color1);
}

.comentarios .item p{
	display:block;
	font-family:Mada, sans-serif;
	color: var(--color2);
	width:96%;
	margin-left:2%;
}

.cont-comentarios-0{
	position:relative;
}

.cont-comentarios-0 .contFlechas{
	position:absolute;
	top:4em;
	display:inline-block;
	margin:auto;
	width:28em;
	left:50%;
}

.cont-comentarios-0 .flechaIzq{
	position:absolute;
	top:0em;
	left:-12.5em;
	height:3em;
	width:2em;
	cursor:pointer;
}

.cont-comentarios-0 .flechaDer{
	position:absolute;
	top:0em;
	right:16.5em;
	height:3em;
	width:2em;
	cursor:pointer;
}

.cont-comentarios-0 .flechaIzq img{
	transform:rotate(180deg);
	opacity:0.4;
	height:100%;
	width:auto;
}

.cont-comentarios-0 .flechaDer img{
	opacity:0.4;
	height:100%;
	width:auto;
}

@media (max-width:768px){
	.cont-comentarios{
		width:90%;
	}
	.cont-comentarios-0 .contFlechas{
		width:100%;
		left:0;
    	height: 3em;
   		overflow: visible;
	}

	.cont-comentarios-0 .flechaIzq{
		left:1em;
	}

	.cont-comentarios-0 .flechaDer{
		right:2em;
	}
}

.cont-cara{
	position: relative;
    text-align: left;
    display: inline-block;
    width:50em;
    margin-top:3em;
}

.cont-cara .texto{
	display:inline-block;
	width:70%;
	color:var(--color1);
	font-family:Mada, sans-serif;
}

.cont-cara .btn-empieza{
	width:40%;
}

.cont-cara .cara{
	position: absolute;
    left: 60%;
    top: -5em;
    height: 100%;
    width: auto;
}

@media (max-width:768px){
	.cont-cara{
		width:96%;
		margin-left:2%;
	}

	.cont-cara .cara{
		left:auto;
		right:0;
		top:-2em;
	}

	.cont-cara .cara img{
		height:20em;
	}
	
	.cont-cara .texto h3{
		font-size:1.3em;
	}
}

.cont-profesional{
	width:100%;
	text-align:center;
}

.profesional{
	width:auto;
	text-align:left;
	display:inline-block;
}

.profesional .item{
	width: auto;
    display: block;
    text-align: left;
    display:block;
}

.profesional .item img{
	height:3em;
	vertical-align:middle;
	display:inline-block;
	margin-right:2em;
}

.profesional .item p{
	font-size:1.2em;
	display:inline-block;
	color:var(--color2);
	font-family:Mada, sans-serif;
}

@media (max-width:768px){
	.profesional .item{
		width:90%;
		margin-left:5%;
	}
	.profesional .item p{
		width:72%;
		line-height:1.1;
	}
	.profesional .item img{
		width:15%;
		vertical-align:top;
		height:auto;
	}
}