@charset "utf-8";
/* CSS Document */

.intro{
	position: relative;
	/*height: 600px;
	max-height: 500px;*/
	height: inherit;
}
.franjas{
	display: inline;
	position: absolute;
	/*top: 0px;
	left: 0px;*/
	/*z-index: 1;*/
	
}
.logoe{
	display: inline;
	position: relative;
	/*top: 30px;
	left: 82%;*/
	
}
.stand{
	display: inline;
	position: absolute;
	top: 60px;
	/*left: 10%;*/
	
	
}
.boton-seguir{
	display: inline;
	position: absolute;
	top: 10%;
	/*left: 47%;*/
	/*z-index: 2;*/
	
}
.vidintro{
	display: inline;
	position: relative;
	/*top: -350px;
	left: 32%;
	padding-top:56.25%;*/
	z-index: 1;
}

.responsive-video {
    width: 100%;
    max-width: 512px;
    height: 300px;
}
.efecto1 img{
	scale: 1;
	opacity: 1;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-ms-transition: all 1s ease;
	transition: all 0.5s ease;
	}
.efecto1 img:hover {
	scale: 0.96;
	opacity: 0.5;
}
.concluido {
  filter: grayscale(1);
  background-color: var(--gray);
}
@media (min-width:300px) and (max-width:766px){
	.vidintro {top: -130px;}
	.intro{position: relative; max-height: 300px;}
	.responsive-video {width: 60%; height: 200px;}
	/*.stand{z-index: -1;}*/
}

@media (min-width: 768px) and (max-width:991px){
	.vidintro {top: -250px;}
	.intro{position: relative; max-height: 300px;}
	.responsive-video {width: 70%;}
	
}

@media (min-width: 992px) and (max-width:1199px){
	.vidintro {top: -300px;}
	.intro{position: relative; max-height: 400px;}
}

@media (min-width: 1200px) and (max-width:1700px){
	.vidintro {top: -350px;}
	.intro{position: relative; max-height: 500px;}
}
@media (min-width: 1701px) {
	.vidintro {top: -400px;}
	.intro{position: relative; max-height: 550px;}
}