*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html{
	scroll-behavior: smooth;
}

body{
	background-color: #fff;
	font-family: 'Open Sans', sans-serif;
	font-size: 16px;
	line-height: 1.5;
	color: #333;
}
	header{
		width: 100%;
		height: 18vh;
	}
		.img-logo{
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
		}
			.img-logo img{
				height: auto;
			} 

	main{
		width: 100%;
	}
		.div_contenedor{
			width: 100%;
			height: fit-content;
			background-image: url("../images/img2025/fondo.png");
			background-size: 100% 100%;
			background-repeat: no-repeat;
			display: flex;
			justify-content: center;
			padding: 30px 0;
		}
			.div_contenido{
				width: 1400px;
				display: flex;
			}
				.img_matricula{
					width: 60%;
					height: 100%;
					background-size: cover;
					background-repeat: no-repeat;
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
					animation: slide-in-left 0.5s ease-in-out;

				}
					.img_matricula .student_hero {
						width: 65%;
						transform: translate(5%, 5%);
					}
					.img_matricula .frase_hero {
						width: 560px;
						position: absolute;
						transform: translate(-30%, -100%);
					}
				
			.formulario{
				width: 40%;
				height: 100%;
				padding: 30px;
				animation: slide-in-right 0.5s ease-in-out;
			}
				#div_formulario{
					width: 100%;
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					padding: 5%;
				}
					#form-style{
						width: 100%;
						padding:30px 50px 50px 50px;
						border-radius: 20px;
						background: linear-gradient(180deg, rgba(7, 126, 145, 0.70) 0%, rgba(2, 38, 43, 0.70) 100%);
						box-shadow: 0px 0px 67px 9px rgba(255, 255, 255, 0.80);
						backdrop-filter: blur(10px);
					}
						.titulo_formulario{
							width: 100%;
							display: flex;
							justify-content: center;
							align-items: center;
							flex-direction: column;
							gap: 0px;
							padding: 0px 0px 15px 0px;
						}
						.titulo_estudiante{
							padding-bottom: 15px;
							font-size: 18px;
							font-weight: normal;
						}
							#form-style h2{
								color: white;
								text-align: center;
							}
							#form-style h5{
								font-size: 1.0em;
								color: white;
								font-weight: normal;
								text-align: center;
							}
							.group{ 
								position:relative; 
								margin-bottom: 10px;
								background-color: transparent;
							}
								input{
									font-size:14px;
									padding:10px 10px 10px 5px;
									display:block;
									width:100%;
									border:none;
									border-bottom:1px solid white;
									background-color: transparent;
									color: white;
								}
							  	input:focus{ 
									outline:none;
									border-bottom:0px;
									width: 100%;
								}
							  	/* LABEL ======================================= */
								label{
									color:white; 
									font-size:14px;
									font-weight:normal;
									position:absolute;
									pointer-events:none;
									left:5px;
									top:10px;
									transition:0.2s ease all; 
									-moz-transition:0.2s ease all; 
									-webkit-transition:0.2s ease all;
								}
								/* active state */
								input:focus ~ label, input:valid ~ label 		{
									top:-5px;
									font-size:12px;
									color:#71c3f3;
								}
								/* BOTTOM BARS ================================= */
								.bar { position:relative; display:block; width:100%; }
								.bar:before, .bar:after 	{
									content:'';
									height:2px; 
									width:0;
									bottom:1px; 
									position:absolute;
									background:#71c3f3; 
									transition:0.2s ease all; 
									-moz-transition:0.2s ease all; 
									-webkit-transition:0.2s ease all;
								}
								.bar:before {
									left:50%;
								}
								.bar:after {
									right:50%; 
								}
								/* active state */
								input:focus ~ .bar:before, input:focus ~ .bar:after {
									width:50%;
								}
								/* HIGHLIGHTER ================================== */
								.highlight {
									position:absolute;
									height:60%; 
									width:100px; 
									top:25%; 
									left:0;
									pointer-events:none;
									opacity:0.5;
								}
								/* active state */
								input:focus ~ .highlight {
									-webkit-animation:inputHighlighter 0.3s ease;
									-moz-animation:inputHighlighter 0.3s ease;
									animation:inputHighlighter 0.3s ease;
								}
								#grado{
									background: transparent;
									padding: 10px 0px;
									color: white;
									width: 100%;
									border: 0px;
									border-bottom: solid 1px white;
									color:white; 
									font-size:14px;
									font-weight:normal;
								}
								#grado option {
									background: #fff; /* Fondo blanco */
									color: #000;      /* Texto negro */
								}
								.btn_enviar{
									background: #01BAD7;
									border: 0px;
									color: white;
									padding: 10px;
									padding-right: 20px;
									border-radius: 20px;
									border: 0;
									cursor: pointer;

									width: 100% !important;
								}
								.btn_enviar:hover{
									background: #5ae7fd;
									border: 0px;
									color: #044f5b;
									padding: 10px;
									padding-right: 20px;
									border-radius: 20px;
									border: 0;
									cursor: pointer;	
								}

		.infraestructura{
			width: 100%;
			height: 600px;
			display: flex;
			justify-content: center;
			padding: 50px 50px;
			gap: 20px;
		}
			.inf_container{
				width: 1400px;
				display: flex;
			}
				.inf_info{
					width: 50%;
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: center;
					gap: 25px;
				}
					.inf_info h2{
						font-family: "Montserrat", sans-serif;
						color: #FF7C00;
						font-size: 2.5rem;
						font-style: normal;
						font-weight: 500;
						line-height: normal;
					}
					.inf_info p{
						width: 80%;
						color: #06565F;
						font-family: Montserrat;
						font-size: 1.4rem;
						font-style: normal;
						font-weight: 500;
						line-height: normal;
					}

					.inf_items_cont{
						width: 90%;
						display: grid;
						grid-template-columns: repeat(2, 2fr);
						gap: 20px;
					}
						.inf_item{
							display: flex;
							justify-content: flex-start;
							align-items: center;
							border-radius: 16px;
							border: 4px solid #01BAD7;
							padding: 14px 17px;
							align-items: center;
							gap: 10px;
						}
							.inf_item img{
								width: 50px;
								height: 50px;
								border-radius: 50%;
							}
							.inf_item span{
								color: #06565F;
								font-family: Montserrat;
								font-size: 1.25rem;
								font-style: normal;
								font-weight: 600;
								line-height: normal;
							}

				.inf_vid{
					width: 50%;
					height: 100%;
				}
					.video_container{
						width: 100%;
						height: 100%;
						border-radius: 10px;
					}
						.video_container img{
							width: 100%;
							height: 100%;
							border-radius: 10px;
						}
						.video_container .play-button{
							position: absolute;
							background-image: url("../images/img2025/icon_play_video.png");
							background-repeat: no-repeat;
							background-position: center;
							width: 150px;
							height: 150px;
							transform: translate(180%, 120%);
						}

		.circulares_container{
			background-image: url("../images/img2025/bg_circulares.png");
			width: 100%;
			height: 600px;
			display: flex;
			justify-content: center;
		}
			.content_circulares{
				width: 1400px;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				gap: 20px;
			}
				.content_circulares h2{
					font-family: "Montserrat", sans-serif;
					color: #06565F;
					text-align: center;
					font-size: 2.5rem;
					font-style: normal;
					font-weight: 600;
					line-height: normal;
				}
			.circulares_img{
				width: 100%;
				display: flex;
				align-items: flex-end;
				justify-content: space-between;
				gap: 20px;
			}
				.circulares_img img{
					width: 450px;
				}

		.formacion_info{
			background-image: url("../images/img2025/bg_formacion.png");
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
		}
			.formacion_info_container{
				width: 1400px;
				display: flex;
				justify-content: center;
				align-items: center;
				padding-top: 80px;
			}
				.info_imgs{
					width: 50%;
					height: 100%;
					display: flex;
					justify-content: left;
					align-items: center;
					padding-bottom: 60px;
				}
					.info_img1{
						width: 80%;
						height: 100%;
						border-radius: 15px;
					}
					.info_img2{
						position: absolute;
						width: 400px;
						height: 280px;
						transform: translate(55%, 95%);
						border-radius: 15px;
					}

				.info_content{
					width: 50%;
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					gap: 35px;
				}
					.formación_info_titulo{
						width: 100%;
						display: flex;
						justify-content: center;
						align-items: left;
						flex-direction: column;
						gap: 0px;
					}
						.formación_info_titulo h2{
							color: #06565F;
							font-family: Montserrat;
							font-size: 2.5rem;
							font-style: normal;
							font-weight: 600;
							line-height: normal;
						}
						.formación_info_texto p{
							color: #06565F;
							font-family: Montserrat;
							font-size: 1.5rem;
							font-style: normal;
							font-weight: 500;
							line-height: normal;
						}
					
					.formación_info_item{
						width: 100%;
						display: flex;
						gap: 20px;
					}
						.item_info{
							width: 100%;
							display: flex;
							flex-direction: column;
							gap: 10px;
							justify-content: center;
						}
							.item_info h3{
								color: #06565F;
								font-family: Montserrat;
								font-size: 1.5rem;
								font-style: normal;
								font-weight: 600;
								line-height: normal;
							}
							.item_info span{
								color: #06565F;
								font-family: Montserrat;
								font-size: 1.25rem;
								font-style: normal;
								font-weight: 500;
								line-height: normal;
							}
							
					.formación_info_btn{
						width: 100%;
						display: flex;
						justify-content: left;
					}
						.formación_info_btn a{
							display: flex;
							width: 330px;
							padding: 10px;
							justify-content: center;
							align-items: center;
							border-radius: 20px;
							background: #FF7C00;
							color: #FFF;
							text-align: center;
							font-size: 1.25rem;
							font-style: normal;
							text-align: center;
							font-weight: 600;
							text-decoration: none;
							line-height: normal;
						}
						.formación_info_btn a:hover{
							background: #954800;
							color: #FFF;
							text-decoration: none;
						}

		.container_banner{
			width: 100%;
			height: 400px;
			display: flex;
			justify-content: center;
			align-items: center;
			background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(1, 186, 215, 0.436) 40%, #01BAD7 75%);
		}
			.banner{
				width: 1400px;
				height: 100%;
				gap: 20px;
				padding-top: 5%;
			}
				.banner_img{
					width: 100%;
					border-radius: 30px;
					border: 5px solid #01BAD7;
				}

				.banner_img_mobile{
					display: none;
				}
		.modelop_container {
			width: 100%;
			height: 800px;
			display: flex;
			justify-content: center;
			align-self: center;
		}
			.content_model{
				width: 1400px;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				gap: 20px;
			}
				.info_modelop{
					width: 50%;
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: left;
					gap: 35px;
				}
					.info_modelop h2{
						color: #06565F;
						font-family: Montserrat;
						font-size: 2.5rem;
						font-style: normal;
						font-weight: 500;
						line-height: normal;
					}
					.inf_items_modelop{
						width: 100%;
						display: grid;
						grid-template-columns: repeat(2, 2fr);
						gap: 20px;
					}
					.info_modelop p{
						color: #06565F;
						font-family: Montserrat;
						font-size: 1.5rem;
						font-style: normal;
						font-weight: 500;
						line-height: normal;
					}
				.modelop_img{
					width: 50%;
					height: 100%;
					display: flex;
					justify-content: end;
					align-items: flex-end;
				}
					.modelop_img .comp_1{
						width: auto;
					}
					.modelop_img .comp_2{
						position: absolute;
					}
					.modelop_img .kid{
						position: absolute;
						transform: translatex(-60px);
					}

		.rec_container {
			background-image: url("../images/img2025/bg_rec.png");
			background-repeat: no-repeat;
			background-size: auto 100%;
			background-color: #0792A8;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 50px;
			width: 100%;
			height: 260px;
		}
			.rec_container h2{
				width: 40%;
				color: #ffff;
				font-family: Montserrat;
				font-size: 2.5rem;
				font-style: normal;
				font-weight: 600;
				line-height: normal;
			}
			.slider{
				width: 60%;
				height: auto;
				display: flex;
				justify-content: center;
				align-items: center;
				gap: 20px;
			}
				.swiper {
					width: 80%;
					max-width: 900px;
					display: flex;
					justify-content: center;
					align-items: center;
				}
		  
				.swiper-slide {
					background: transparent;
					align-self: center;
					text-align: center;
					color: white;
					text-align: center;
				}
			
				.swiper-slide img {
					max-width: 200px;
					height: auto;
					margin-bottom: 12px;
				}
			
				/* ===== Flechas estilo círculo gris ===== */
				.swiper-button-next,
				.swiper-button-prev {
				  background: rgba(255, 255, 255, 0.3);
				  border-radius: 50%;
				  width: 40px !important;
				  height: 40px !important;
				  display: flex;
				  justify-content: center;
				  align-items: center;
				  color: white; /* color de la flecha */
				  font-size: 20px;
				}
			
				.swiper-button-next::after,
				.swiper-button-prev::after {
				  font-size: 18px !important;
				  font-weight: 700 !important;
				  color: #06565F !important;
				  
				}

		.contact_container{
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
		}
			.container_c{
				width: 100%;
				display: flex;
				justify-content: center;
			}
				.maps{
					background: #FF7C00 ;
					width: 50%;
					height: 100%;
					padding: 80px 50px;
					display: flex;
					justify-content: flex-end;
					align-items: center;
				}
			
				.info_contact{
					background: #01BAD7;
					width: 50%;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					gap: 20px;
					padding: 80px 50px;
				}
					.contact_box{
						width: 60%;
						height: 100%;
						display: flex;
						flex-direction: column;
						gap: 40px;
						justify-content: center;
					}
					.contact_box h3{
						color: #ffff;
						font-size: 2.5rem;
						font-style: normal;
						font-weight: 600;
						line-height: normal;
					}
					.items_contact{
						display: flex;
						flex-direction: column;
						gap: 20px;
					}
					.cont_item{
						display: flex;
						justify-content: flex-start;
						align-items: center;
						gap: 20px;
						padding: 10px;
						border-radius: 16px;
						border: 4px solid #FFF;
					}
						.cont_item span{
							color: #FFF;
							font-size: 1.25rem;
							font-style: normal;
							font-weight: 600;
							line-height: normal;
						}


	.youtube-player {
		width: 100%;
		height: 500px;
	}
				
					
	footer{
		height: 220px;
		width: 100%;
		display: flex;
		padding: 30px 0 10px 0;
		flex-direction: column;
		justify-content: center;
		gap: 20px;
		align-items: center;
	}
		.author{
			width: 100%;
			display: flex;
			justify-content: center;
		}
			.author p{
				font-family: 'Open Sans', sans-serif;
				font-size: 1em;
				text-align: center;
			}


/* ANIMATIONS ================ */
@-webkit-keyframes inputHighlighter {
	from { background:#5264AE; }
to 	{ width:0; background:transparent; }
}
@-moz-keyframes inputHighlighter {
	from { background:#5264AE; }
to 	{ width:0; background:transparent; }
}
@keyframes inputHighlighter {
	from { background:#5264AE; }
to 	{ width:0; background:transparent; }
}
@keyframes scale-in-center {
0% {
	transform: scale(0);
	opacity: 1;
}
100% {
	transform: scale(1);
	opacity: 1;
}
}
@keyframes slide-in-right {
0% {
	transform: translateX(1000px);
	opacity: 0;
}
100% {
	transform: translateX(0);
	opacity: 1;
}
}
@keyframes slide-in-left {
0% {
	transform: translateX(-1000px);
	opacity: 0;
}
100% {
	transform: translateX(0);
	opacity: 1;
}
}


/* Media Queries  */
@media screen and (max-width: 1400px) {
	.img-logo img{
		height: 65%;
	}

	.img_matricula .frase_hero{
		width: 400px;
	}

	.formulario{
		padding: 0;
	}

	.content_circulares{
		width: 100%;
	}
		.circulares_img{
			width: 100%;
			display: flex;
			justify-content: center;
			gap: 20px;
		}
			.circulares_img img{
				width: 350px;
			}
		
		.info_imgs{
			padding-left: 30px;
		}
			.info_img1{
				width: 70%;
			}
			.info_img2{
				width: 25%;
				height: auto;
			}
		.info_content{
			padding-right: 30px;
			gap: 20px;
		}
			.formación_info_texto p{
				font-size: 1.3rem;
			}
				.item_info h3{
					font-size: 1.3rem;
				}
				.item_info span{
					font-size: 1rem;
				}

	.spacing_banner{
		height: 100px !important;
	}

	.modelop_container{
		padding: 0 0 0 30px;
	}
	
			.info_modelop h2{
				font-size: 2rem;
			}
				.inf_item span{
					font-size: 1.2rem;
				}

		.info_modelop p{
			font-size: 1.3rem;
		}

			.modelop_img .comp_1{
				width: 95%;
			}
			.modelop_img .comp_2{
				width: 25%;
			}
			.modelop_img .kid{
				width: 40%;
			}

		.contact_box {
			width: 100%;
		}
				
		.rec_container h2{
			font-size: 1rem;
		}
}

@media screen and (max-width: 1000px) {
	.div_contenido{
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding-top: 80px;
		gap: 20px;
	}

	.infraestructura{
		width: 100%;
		height: auto;
	}

	.inf_container{
		flex-direction: column;
		gap: 20px;
		justify-content: center;
		align-items: center;
	}

	.formulario{
		width: 65%;
	} 

	.inf_info{
		width: 80%;
	}

	.inf_info h2{
		text-align: center;
	}

	.inf_info p{
		text-align: center;
		width: 100%;
	}

	.inf_items_cont{
		width: 100%;
	}

	.inf_vid{
		width: 100%;
	}

	.circulares_container{
		height: auto;
		justify-content: center;
		align-items: center;
	}

	.circulares_img{
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.modelop_container{
		height: auto;
	}

	.content_model{
		flex-direction: column;
	}

	.inf_items_modelop{
		flex-direction: column;
	}

	.modelop_container{
		padding: 0;
	}

	.info_modelop{
		width: 80%;
	}

	.info_modelop h2{
		text-align: center;
	}

	.modelop_img{
		width: 57%;
	}
	.modelop_img .comp_2{
		width: 30%;
	}

	.rec_container{
		flex-direction: column;
		height: auto;
		padding: 30px 0;
	}

	.rec_container h2{
		text-align: center;
	}
	.rec_container .slider{
		width: 95%;
	}

	.container_c{
		flex-direction: column;
	}

	.maps{
		width: 100%;
		padding: 30px;
		justify-content: center;
	}

	.info_contact{
		width: 100%;
	}
	
}

 @media screen and (max-width: 720px) {

	.div_contenedor{
		height: auto;
		background-size: cover;
	}

	.div_contenido{
		width: 100%;
		height: auto;
		flex-direction: column;
		align-items: center;
	}

	.img_matricula{
		width: 70%;
	}

	.formulario{
		width: 70%;
	}
 
	#form-style{
		padding: 20px 50px 40px 50px;
	}
	
	.tittle_item{
		padding: 10%;
	}

	.tittle_item h2{
		font-size: 1.5rem;
	}

	.div_items_contenido{
		grid-template-columns: repeat(1, 1fr);
	}

	.div_items{
		padding: 0 10%;
	}
}

@media screen and (max-width: 600px) {
	.div_contenido{
		padding-top: 80px;
	}

	.img_matricula .frase_hero{
		width: 300px;
	}

	.inf_info h2{
		font-size: 2rem;
	}

	.inf_info p{
		font-size: 1.2rem;
	}

	.inf_items_cont{
		grid-template-columns: repeat(1, 1fr);
	}

	.video_container .play-button{
		transform: translate(65%, 30%);
	}

	.circulares_container{
		padding: 50px 0;
	}
	.content_circulares h2{
		font-size: 2rem;
	}

	.formacion_info_container{
		flex-direction: column;
		gap: 20px;
		padding: 50px 0;
	}

	.info_imgs{
		width: 80%;
		padding-left: 0px;
		justify-content: center;
	}

	.info_img2{
		width:40%;
	}

	.info_content{
		width: 80%;
		padding-right: 0px;
	}

	.formación_info_titulo h2{
		font-size: 2rem;
	}

	.formación_info_texto p{
		font-size: 1.2rem;
	}

	.item_info h3{
		font-size: 1.2rem;
	}

	.item_info span{
		font-size: 1rem;
	}

	.container_banner{
		height: auto;
	}

	.info_modelop h2{
		font-size: 2rem;
	}

	.inf_items_modelop{
		grid-template-columns: repeat(1, 1fr);
	}

	.rec_container .slider{
		width: 100%;
	}

	.swiper{
		width: 100%;
	}

	.banner{
		width: 90%;
		height: auto;
		padding-top: 0%;

	}

	.banner_img_mobile{
		width: 100%;
		border-radius: 30px;
		border: 5px solid #01BAD7;
		display: flex;
		transform: translateY(15%);
	}

	.banner_img{
		display: none;
	}
	
}

@media screen and (max-width: 530px) {
	.formulario{
		width: 80%;
		padding: 20px;
	}

	.div_items_contenido .item{
		padding: 10px;
	}

	.item_icono img{
		width: 100%;
	}

	.item_text{
		padding: 10px;
	}
}

@media screen and (max-width: 430px) {
	.img_matricula{
		width: 80%;
		height: auto;
	}

	#form-style{
		width: 100%;
	}

	.formulario{
		padding: 30px 0;
	}

	.slider{
		height: 230px;
	}

	.swiper-slide img{
		max-width: 140px;
	}

	.swiper-wrapper{
		height: auto!important;
	}
	.formulario{
		width: 95%;
	}

	.img_matricula .frase_hero{
		width: 250px;
	}

	.div_contenido{
		padding-top: 50px;
	}

	.video_container .play-button{
		background-size: cover;
		transform: translate(250%, 165%);
		width: 50px;
		height: 50px;
	}

	.formacion_info_item img{
		width: 20%;
		height: 10%;
	}

	.info_imgs{
		justify-content: left;
	}
	.info_img1{
		width: 85%;
	}
	.info_img2{
		width: 52%;
	}

}

@media screen and (max-width: 400px) {
	.img-logo img{
		width: 70%;
		height: auto !important;
	}

	.div_contenedor{
		padding: 0px;
	}

	.img_matricula .student_hero {

		width: 90%;

	}

	.infraestructura{
		padding: 5px 5px 50px 5px;
	}

	.inf_info {
		width: 100%;
	}

	.inf_info h2{
		font-size: 1.5rem;
	}

	.inf_info p{
		font-size: 1rem;
	}

	.inf_items_cont{
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}

	.inf_item {
		width: 100%;
		flex-direction: column;
		padding: 10px;
	}

	.inf_item span {
		text-align: center;
	}

	.content_circulares h2{
		font-size: 1.5rem;
		padding: 0 20px;
	}

	.formación_info_titulo h2{
		font-size: 1.5rem;
	}

	.formación_info_texto p{
		font-size: 1rem;
	}

	.item_info h3{
		font-size: 1rem;
	}
	.item_info span{
		font-size: 1rem;
	}

	.formacion_item{
		width: 50px;
		height: 100px;
	}

	.info_modelop h2{
		font-size: 1.5rem;
	}

	.info_modelop p{
		font-size: 1rem;
	}

	.modelop_img {
		width: 100%;
	}

	.modelop_img .comp_2{
		width: 55%;
	}

	.modelop_img .kid{
		width: 70%;
	}

	.rec_container h2{
		font-size: 1.5rem;
		width: 100%;
	}

	.container_c{
		flex-direction: column-reverse;
	}

	.contact_box h3{
		font-size: 1.5rem;
	}

	.cont_ite, span{
		font-size: 1rem;
	}

	.maps iframe{
		width: 100%;
		height: 300px;
	}

	.video_container .play-button {
        background-size: cover;
        transform: translate(200%, 130%);
        width: 80px;
        height: 80px;
    }
}