@charset "UTF-8";
/* CSS Document */
/* working stylesheet for Grafin Kapital front page
 to be included temporarily in file hierarchy */ 

	
*{box-sizing: border-box;}
	
	
body, html{ 
    
    background-color:#8896E5;
    background-size: cover;
    box-shadow: 10px 10px 150px 50px #FFFFFF ;
    }
.Vcontainer{ 
	width:100%; 
	height:100%; 
	overflow: hidden; 
	position: relative; 
}

#smokin{ 
	
	position: fixed; 
	right: 0; 
	bottom: 0; 
	transform: translateY(25%);
	min-height: 500px; 
	min-width: 100%; 
	background-color: rgba(12,24,36,48, 0.5); 
	background-size: cover;
	border-radius:25%;
	box-shadow: 10px 10px 250px #8896E5 ; 
	
	}

#smoke{ 
	
	background-size: cover;
	border-radius:50%;
	box-shadow: 10px 10px 250px #8896E5 ; 
	filter: opacity(50%); 
	}

	
.circle{ 
	background-size: contain; 
	border-radius: 50%; 
	box-shadow: -5px -5px 50px 30px rgba(234,24,345,0.5) ; 
	background-color: grey; 
		}
    
	
.display{ 
	font-family: Avenir;
	font-size: 48px; 
	font-weight: 600;
	color: black;
	bottom: 0; 
	transform: translate(10%, -30%); 
	text-transform: uppercase;
	position: fixed; 
	padding: 20px; 
	top: 0; 
	width: 50%; 
	}
	
.inside{ 
	font-family: Avenir;
	font-size: 72px; 
	font-weight: 100; 
	display:block;
	color: white;
	bottom: 0; 
	transform: translate(50%, 40%); 
	text-transform: uppercase;
	position: fixed; 
	padding: 20px; 
	top: 0; 
	width: 100%; 
	animation: fade 20s linear forwards; 
	
    }  
@keyframes fade { 
	from{opacity: 0;}
	to{opacity: 1; }
	
 }
 .txt1{ 
	font-family: Avenir;
	font-size: 48px; 
	font-weight:50px; 
	display:block;
	color: #FFFFFF;
	transform: translate(5%, 150%); 
	text-transform: uppercase;
	padding: 20px; 
	width: 100%; 
	animation: fade 90s linear; 
	
}

 #date{ 
	font-family: Courier New; 
	font-size:12px; 
	color:white; 
	bottom: 10px;
	transform: translate(50%, 550%); 
}

.dateFormat{ 
	font-family: Courier New; 
	font-size:12px; 
	color:white; 
	bottom: 10px;
	transform: translate(50%, 550%); 
}

	
	/*media query for iPhone 6e portrait */
    
@media only screen and (min-width: 667px) and (orientation: portrait) {
		 
		#smokin{
			flex-direction: column;
			background-size:cover; } 
		.circle{
			flex-direction: column;
			background-size:cover; } 
		.display{font-size: 36px;
			display:inline-grid;
			transform:translateX(10%);
			padding:0; } 
		.inside{
			font-size: 36px;
			display:inline-grid;
			padding:0;}
	.Vcontainer{ 
		flex-direction: column;}
	
	#date{ 
		
		transform: translate(40%, 400%); 
}
    }

@media only screen and (max-device-height:1024) and (orientation: portrait) {
		 
		#smokin{background-size:cover; } 
		.circle{background-size:cover; } 
		.display{font-size: 10px;
			display:inline-grid;
			transform:translateX(100%);
			padding:0; } 
		.inside{
			font-size: 10px;
			display:inline-grid;
			transform:translateX(100%);
			padding:0;}
	
	#date{ 
		font-family: Avenir; 
		font-size:12px; 
		color:#FFFFFF; 
		bottom: 10px;
		transform: translate(40%, -400%); 
}
    }