@charset "UTF-8";
/* CSS Document */
*, 
*::before, 
*::after {
    margin:0;
    padding:0;
  	-webkit-box-sizing:border-box;
	box-sizing:border-box;
	
}

body{ 
	
	background:linear-gradient(155deg, #7c15ff 25%, #adeee6 85%);
 	margin: 0;
	
/*	border-radius:15px; */
/*	box-shadow: 0px 20px 10px 10px black;*/
	backdrop-filter: blur(3px) saturate(150%);
	background-size: cover;
	background-repeat: repeat;
	background-attachment:fixed;
	padding: 0px;
	font-family: -apple-system, BlinkMacSystemFont, sans-serif; 
	-webkit-text-size-adjust:100%;
	-moz-webkit-text-size-adjust:100%;
	-ms-webkit-text-size-adjust:100%;
	-o-webkit-text-size-adjust:100%;
		
}

html{ 
	background-color:#7c15ff;
	backdrop-filter: blur(3px) saturate(150%);
	overflow-x:hidden;
/*ignores browser safe area and cut off	*/
	
	
}


/*
.wrapper{ 
	wodth: 90%; 
	margin: 0 auto; 
	max-width: 80rem; 
	align-content: center;
	text-align: center;
	color: rgba(255,255,255,1.00);
}
*/

.box-cols{ 
	
	display: -webkit-box; 
	display: -ms-box; 
	display: flex;
	-ms-flex-wrap: wrap; 
		flex-wrap: wrap; 
	-webkit-box-pack: center; 
	-ms-flex-pack: center; 
	justify-content: center; 
	
}

.box-col{ 
	width: calc(25% - 2rem); 
	margin: 1rem; 
	cursor:pointer; 
	border-radius: 50%;
	
}

.container{
	
	-webkit-transform-style: preserve-3d; 
		transform-style: preserve-3d; 
	-webkit-perspective: 1000px; 
		perspective: 1000px;
}

.front, .back{ 
	background-size: cover; 
	box-shadow: 0 4px 8px 0 rgba(0,0,0, 0.25);
	border-radius: 10px; 
	background-position: 10px; 
	background-position: center; 
	-webkit-transition: -webkit-transform 
		0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
	-o-transition: -webkit-transform 
		0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
	transition: -webkit-transform 
		0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
	-webkit-backface-visibility: hidden; 
		backface-visibility: hidden; 
	text-align: center; 
	min-height: 280px; 
	height: auto; 
	color: #fff; 
	font-size: 1.5rem; 
	

}

.back{
	background:#968CD3;
	background: -webkit-linear-gradient(45deg, #968CD3 0%, #d2daf5 100% ); 
	background: -o-linear-gradient(45deg, #968CD3 0%, #d2daf5 100% );
	background: linear-gradient(45deg, #968CD3 0%, #d2daf5 100% ); 
	border-radius: 50%;
}

.front:after{ 
	position: absolute; 
	top: 0; 
	left: 0; 
	z-index: 1; 
	width: 100%; 
	height: 100%; 
	content: ''; 
	display: block; 
	opacity: 0.25; 
	background-color: #000; 
	-webkit-backface-visibility: hidden; 
		backface-visibility: hidden; 
	border-radius: 50%; 
	
}

.container:hover .front, .container:hover .back{ 
	-webkit-transition: -webkit-transform 
		0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
	
	-o-transition: -webkit-transform 
		0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
	
	transition:transform 
		0.7s cubic-bezier(0.4, 0.2, 0.2, 1);

}

.back{ 
	position: absolute; 
	top: 0; 
	left: 0; 
	width: 100%; 
}

.inner{ 
	-webkit-transform: translateY(-50%)
translateZ(60px) scale(0.94); 
	
	transform: translateY(-50%)
translateZ(60px) scale(0.94); 
	top: 50%; 
	position: absolute; 
	left: 0; 
	width: 100%; 
	padding: 2rem; 
	-webkit-box-sizing: border-box;
		box-sizing: border-box; 
	outline: 1px solid transparent; 
	-webkit-perspective: inherit; 
		perspective: inherit; 
	z-index: 2; 
	
}

.container .back{ 
	-webkit-transform: rotateY(180deg);
		transform: rotateY(180deg);
	-webkit-transform-style:preserve-3d; 
		transform-style: preserve-3d; 
	box-shadow: 7px 9px 12px 10px rgba(52, 60, 34, 0.5);
}

.container .front{ 
	background: rgba(0,0,0, 0.5); 
	-webkit-transform: rotateY(0deg);
		transform: rotateY(0deg);
	-webkit-transform-style:preserve-3d; 
		transform-style: preserve-3d; 
	border-radius: 50%;
	box-shadow: 7px 9px 12px 10px rgba(52, 60, 34, 0.5);

}

.container:hover .back{ 
	-webkit-transform: rotateY(0deg);
		transform: rotateY(0deg);
	-webkit-transform-style:preserve-3d; 
		transform-style: preserve-3d; 

}

.container:hover .front{ 
	-webkit-transform: rotateY(-180deg);
		transform: rotateY(-18-0deg);
	-webkit-transform-style:preserve-3d; 
		transform-style: preserve-3d; 
	border-radius: 50%;

}

.front .inner p { 
	font-size: 2rem; 
	margin-bottom: 2rem; 
	position: relative;
}

.front .inner p:after { 
	content: ''; 
	width: 4rem; 
	height: 2px; 
	position: absolute;
	background: #C6D4DF;
	display: block; 
	left: 0; 
	right: 0; 
	margin: 0 auto; 
	bottom: -0.75rem;
}

.font .inner span{ 
	color: rgba(255, 255, 255,0.7);
	font-family: 'Montserrat'; 
	font-weight: 300; 
}

@media screen and (max-width: 64rem){ 
	.box-col{ 
	 width: calc(33.333% - 2rem); 
	}
}

@media screen and (max-width: 48rem){ 
	.box-col{ 
	 width: calc(50% - 2rem); 
	}
}

@media screen and (max-width: 32rem){ 
	.box-col{ 
	 	width: 100%; 
		margin: 0 0 2rem 0; 
	}
}