/* CSS Document */

.blocker {
    background-color: #211815;
}

.modal {
    background-color: #211815;
	color: #fff;
	box-shadow: none;
	max-width: 1100px;
	width: 95%;
}
.modal a.close-modal {
	background: none;
}

.modal_flex {
	margin-top: 60px;
	display: flex;
	justify-content: space-between;
}

.modal_mov {
	height: 85.5vh;
	min-height: 550px;
	max-height: 700px;
	aspect-ratio: 315 / 560;
}

.modal_text {
	margin: 0 0 0 2em;
	max-width: 590px;
}
.modal_text h3 {
	margin: 0 0 1em 0;
	display: flex;
	flex-direction: column;
}
.modal_text h3 .job {
	font-size: calc( 1rem * ( 17 / 16 ) );
}
.modal_text h3 .name {
	font-size: calc( 1rem * ( 25 / 16 ) );
}
.modal_text .lead {
	margin-bottom: 2em;	
}
.modal_text h4 {
	margin: 0 0 1em 0;
	font-size: calc( 1rem * ( 18 / 16 ) );
}
.youtube {
	width: 100%;
	height: auto;
}
.youtube iframe {
	width: 100%;
	height: auto;
	margin: 0 auto;
	padding: 0;
	padding-bottom: 0;
	aspect-ratio: 315 / 560;
	overflow: hidden;
	border-radius: 20px;
}
.youtube img {
	width: 100%;
	height: auto;
	margin: 0 auto;
	padding: 0;
	padding-bottom: 0;
	aspect-ratio: 315 / 560;
	overflow: hidden;
	border-radius: 20px;
}
.modal a.close-modal {
  margin-top: 40px;
  width: 40px;
  height: 40px;
}
.modal .close-modal::before,
.modal .close-modal::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px;
  height: 100%;
  background: #fff;
}
 
.modal .close-modal::before {
  transform: translate(-50%,-50%) rotate(45deg);
}
 
.modal .close-modal::after {
  transform: translate(-50%,-50%) rotate(-45deg);
}

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

}
@media only screen and (max-width: 768px) {
	.modal {
		width: calc( 100vw * (340/390) );
		margin-left: auto;
		margin-right: auto;
		padding: 0;
	}
	.modal_flex {
		margin-top: 100px;
		flex-wrap: wrap;
		width: calc( 100vw * (340/390) );
		margin-left: auto;
		margin-right: auto;
	}
	.modal_mov {
		width: 100%;
		height: auto;
		min-height: auto;
		max-height: auto;
		aspect-ratio: 315 / 560;
	}
	.modal_text {
		width: 100%;
		max-width: 100%;
		margin: 2em 0;
		max-width: auto;
	}

	.close-modal {
	  width: 30px;
	  height: 30px;
	}
	
	.modal_text h3 .job {
		font-size: calc( 100vw * ( 16 / 390 ) );
	}
	.modal_text h3 .name {
		font-size: calc( 100vw * ( 25 / 390 ) );
	}
	.modal_text .lead {
		font-size: calc( 100vw * ( 15 / 390 ) );
	}
	.modal_text h4 {
		font-size: calc( 100vw * ( 17 / 390 ) );
	}
}