/*ABOUT*/

.content-box{
	max-width:72rem;
	margin:0 auto;
	padding:3rem 0;
	perspective:600px;
}
.about h2{
	display:block;
	margin-top:12rem;
	font-size:1.6rem * 1.3;
	text-align:center;
}
.about-text{
	margin-bottom:4rem;
}
.about img{
	width:160px;
	border-radius:160px;
	position:absolute;
	left:50%;
	top:-30px;
	transform:translate(-50%);
	transition:all 0.3s  cubic-bezier(.75,-0.5,0,1,1.75);
	
}
.about img:hover{
	cursor:pointer;
	width:200px;
	height:200px;
	border-radius:15px;
	box-shadow: -4px 4px 20px black;
	transform:rotateY(35deg) skew(-20deg) rotateZ(-20deg) translateX(-10rem) translateY(-4rem) rotateX(5dreg));
	
}

@media screen and (max-width: 54rem){
	.about-text{
		padding: 0 4rem;
	}
}
/*COURSE SECTIONS*/
.class-section-grid{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	grid-template-rows: repeat(3,300px);
	width:100%;
	
}
.card{
	
	width:100%;
	height:100%;
	perspective:1000px;
}
.inner-card{
	
	width:100%;
	height:100%;
	transition:all 1s;
	transform-style:preserve-3d;
	
}
.back-face{
	position:absolute;
	width:100%;
	height:100%;
	backface-visibility:hidden;
	padding:4rem;
	transform: rotateY(-180deg);
}
.front-face{
	position:absolute;
	width:100%;
	height:100%;
	backface-visibility:hidden;
	padding:4rem;
}
.inner-card:hover{
	transform: rotateY(-180deg);/*this makes the backface of the card to be shown*/
}
.class-section .sub-section-title{
	font-size:1.6rem * 1.33 * 1.33;
}
.section-zero{
	grid-column: 1 / 3;/*this proves that it doesnt need to be highlighted in blue for it to work*/
	grid-row: 1 / 3;
	
}
.section-zero .back-face{
	
	background:linear-gradient(
	240deg,
	rgba(164,88,255,1)0%,
	rgba(53,68,255,1)40%,
	rgba(10,47,158,1)80%
	);
}
.section-zero .front-face{
	
	background:linear-gradient(
	240deg,
	rgba(164,88,255,1)0%,
	rgba(53,68,255,1)40%,
	rgba(10,47,158,1)80%
	);
}
.section-one{
	grid-row: span 2; 
}
.section-one .back-face{
	background:purple;
}
.section-one .front-face{
	background:purple;
}
.section-two{
	
}
.section-two .back-face{
	background:#050060;
}
.section-two .front-face{
	background:#050060;
}
.section-three{
	
}
.section-three .back-face{
	background:blue;
}
.section-three .front-face{
	background:blue;
}
.section-four{
	
}
.section-four .back-face{
	background:#050060;
}
.section-four .front-face{
	background:#050060;
}
.section-five{
	
}
.section-five .back-face{
	background:blue;
}
.section-five .front-face{
	background:blue;
}
.section-six{
	grid-column: span 2;
}
.section-six .back-face{
	background: url(https://images.unsplash.com/photo-1436491865332-7a61a109cc05?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=874&q=80);
	background-position:center;
	background-size:cover;
}
.section-six .front-face{
	background: url(https://images.unsplash.com/photo-1436491865332-7a61a109cc05?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=874&q=80);
	background-position:center;
	background-size:cover;
}
@media screen and (max-width: 72rem){
	.class-section-grid{
		grid-template-columns:repeat(3, 1fr);
		
	}
	.section-zero,
	.section-one{
		grid-row: span 1;
	}
}
@media screen and(max-width: 54rem){
	.class-section-grid{
		grid-template-columns:repeat(2, 1fr);
		grid-auto-rows:300px;
	}
	.section-zero{
		grid-column:span 1;
	}
}
@media screen and (max-width: 40rem){
	.class-section-grid{
		grid-template-columns:1fr;
	}
	.section-zero,
	.section-one,
	.section-two,
	.section-three,
	.section-four,
	.section-five,
	.section-six{
		grid-column: span 1;
		grid-row: span 1;
	}
}
.course-slides{
	max-width:90%;
	max-height: 80%;
	margin:0 auto;
	display: block;
	border: 15px solid transparent;
	filter: hue-rotate(36deg) opacity(0.75) drop-shadow(2px 4px 6px black) brightness(1.5);
}