@keyframes fading{
	from {
		opacity: 0;
		transform: translateY(16vh);
	}
	to {
		opacity: 1;
		transform: translateY(0px);
	}
	
	
}
@keyframes rotate{
	to{
		transform: rotateY(180deg);
	}
}


.animation{
	animation: fading 2s ease;
}
.rotate180{
	transform: rotateY(180deg);
}

#content{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	font-size: 1.5rem;
}

@media (max-width: 800px){
	#content{
		display: grid;
		grid-template-columns: 1fr;
	}

}




/*General Animation Card Things*/
.card_front{
	position: absolute;
	width: 100%;
	height: 100%;
	backface-visibility: hidden;
	padding: 20px;
	border-radius: 20px;
	display: grid;
	justify-content: center;

}

.card_back{
	position: absolute;
	width: 100%;
	height: 100%;
	transform: rotateY(180deg);
	backface-visibility: hidden;

	border-radius: 20px;
	display: grid;
	justify-content: center;
	align-items: center;
}
.card_back > p{
	margin: 10%;
}


/*Mission Statement*/
#mission_front > img{
	border-radius: 20px;
	width: 100%;
	height: 100%;
	box-shadow: 0px 8px 45px 0px #FFE88D;
}

#mission_front > h3 {
	margin-left: 17%;
}


#mission_front {
	background-color:  #9FD1FF;
}
#mission_back{
	background-color:  #9FD1FF;
}

#mission_parent{
	width: 100%;
	height: 400px;
	background-color: transparent;
	margin-top: 5%;
	margin-right: 5%;
	margin-left: 5%;
	
}

#mission_parent:hover > #mission_child{
	cursor: pointer;
	
	
}
#mission_child{
	position: relative;
	width: 90%;
	height: 90%;
	transition: transform 1500ms;
	transform-style: preserve-3d;
	background-color: #9FD1FF;
	border-radius: 20px;
	box-shadow: 0px 8px 45px 0px #004AAE;
}


/*Vision*/



#vision_child{
	padding: 10px;
	position: relative;
	width: 90%;
	height: 90%;
	transition: transform 1500ms;
	transform-style: preserve-3d;
	background-color: #FFF;
	border-radius: 20px;
	box-shadow: 0px 8px 45px 0px gray;
	background-image: url("/sites/default/files/images/vision_no_mark.jpeg");
	background-size: contain;
	background-repeat: no-repeat;
}

#vision_parent{
	width: 100%;
	height: 400px;
	background-color: transparent;
	margin-top: 5%;
	margin-right: 5%;
	margin-left: 5%;
}
#vision_parent:hover > #vision_child{
	cursor: pointer;

	
	
}
/*Take care of it*/
#vision_back > p{
	position: relative;
	background-color: white;
	border-radius: 20px;
}
#vision_back {
	background-color: white;
  margin-top: -3%;
}

/*Core-values Respect*/
#core_val > h3{
	position: relative;
	right: -90%;
}

@media (max-width: 800px) {
		#core_val > h3{
	position: relative;
	right: -37%;
}
}


/*Gonna need smaller screen, use contain as size*/
#respect_child{
	padding: 10px;
	position: relative;
	width: 90%;
	height: 90%;
	transition: transform 1500ms;
	transform-style: preserve-3d;
	border-radius: 20px;
	box-shadow: 0px 8px 45px 0px #FFCFE5;
	background-color: #D9CEFF;
}


#respect_parent {
	width: 100%;
	height: 400px;
	background-color: transparent;
	margin-top: 5%;
	margin-left: 5%;
}
#respect_parent:hover > #respect_child{
	cursor: pointer;

	
	
}
#respect_front > h4{
	position: relative;
  left: 40%;
  margin-top: 1%;

}
#respect_front > img{
	border-radius: 20px;
	margin-left: -2%;
}
#respect_back > ul{
	margin-left: 12%;
}

/*Transparency*/


/*Flipping a card*/

#trans_parent{
	width: 100%;
	height: 400px;
	background-color: transparent;
	margin-top: 5%;
	margin-left: 5%;
}

#trans_parent:hover > #trans_child{
	cursor: pointer;

	
	
}
#trans_child{
	position: relative;
	width: 90%;
	height: 90%;
	transition: transform 1500ms;
	transform-style: preserve-3d;
	background-color: #B3E59A;
	border-radius: 20px;
	box-shadow: 0px 8px 45px 0px #018943;
	margin-top: 15%;
}
#trans_front > img{
	border-radius: 20px;
}
#trans_front > h4 {
	position: relative;
	left: 35%;
	margin-top: 1%;
}

/*Collab*/
#collab_parent{
	width: 100%;
	height: 400px;
	margin-top: 5%;
	margin-left: 5%;

}
#collab_child{
	position: relative;
	background-color: #E7115E;
	border-radius: 20px;
	box-shadow: 0px 8px 45px 0px #004AAE;
	width: 90%;
	height: 90%;
	transform-style: preserve-3d;
	transition: transform 1500ms;
	color: white;
}

#collab_parent:hover > #collab_child {

	cursor: pointer;
}
#collab_front > img {
	border-radius: 20px;
	margin-top: -20%;
}
.speech_bubble > h4 {
	color: white;
	font-weight: bold;
	position: absolute;
	left: 35%;
	margin-top: 2%;
}

.speech_bubble{
	position: relative;
	background: blue;
	border-radius: 20px;
	max-height: 45%;
	margin-top: -4.6%;
}
.speech_bubble:after{
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 0;
	height: 0;
	border: 52px solid transparent;
	border-top-color: blue;
	border-bottom: 0;
	border-left: 0;
	margin-left: -26px;
	margin-bottom: -52px;
}

/*Accountability*/
#account_parent{
	width: 100%;
	height: 400px;
	margin-top: 5%;
	margin-left: 5%;

}
#account_child{
	position: relative;
	background-color: #FFC31B;
	border-radius: 20px;
	box-shadow: 0px 8px 45px 0px #FC9313;
	width: 90%;
	height: 90%;
	transform-style: preserve-3d;
	transition: transform 1500ms;
}

#account_parent:hover > #account_child {

	cursor: pointer;
}
#account_front {
	height: 100%;
	width: 100%;
}
#account_front > img {
	height: 90%;
	width: 90%;
	border-radius: 20px;
	margin-left: 5%;
	margin-top: 5%;
	max-height: 400px;
}

/*Communication */
#communication_parent{
	width: 100%;
	height: 400px;
	margin-top: 5%;
	margin-left: 3%;
}
#communication_child {
	position: relative;
	background-color: #FFCFE5;
	border-radius: 20px;
	box-shadow: 0px 8px 45px 0px #000000;
	width: 90%;
	height: 90%;
	transform-style: preserve-3d;
	transition: transform 1500ms;
}
#communication_child > div > h4 {
	position: relative;
	left: 33%;
}
#communication_parent:hover > #communication_child {

	cursor: pointer;
}
#com_front {
	height: 100%;
	width: 100%;
}

/*Ranking*/
#ranking_parent {
	width: 100%;
	height: 400px;
	margin-top: 5%;
	margin-left: 5%;
}

#ranking_child {
	position: relative;
	background-color: #9FD1FF;
	border-radius: 20px;
	box-shadow: 0px 8px 45px 0px #FFE88D;
	width: 90%;
	height: 90%;
	transform-style: preserve-3d;
	transition: transform 1500ms;
}
#ranking_child > div > h4 {
	position: relative;
}
#ranking_child > div > img {
	max-height: 230px;
	margin:auto	;
}

#ranking_parent:hover > #ranking_child {

	cursor: pointer;
}
#ranking_front {
	height: 100%;
	width: 100%;
}

.ranking_item {
	margin: 20% 0;
	font-size: 1.5rem;
	margin-top: 50px;
	font-weight: bold;
}