@charset "UTF-8";
/* workin with corrections and different behaviors */

/* CSS Document */
/* working stylesheet for Grafin Kapital front page
not to be included in file hierarchy */ 

body, html{ 
    
	background-color:#8896E5;
	background-size: cover;
	
	
}
.Vcontainer{ 
	width:100%; 
	height:100%; 
	overflow: hidden; 
	position: fixed; 
	background-size: cover;
	background-color: rgba(122,122,239);
	padding:0;
}

#smokin {
	
	transform:translate(-1%, -30%);
	overflow: hidden; 
	position: fixed; 
	background-size: cover;
	background-color: rgba(122,122,239,0.5);
	padding:0px;
	margin-bottom: 0px;
	min-height: 500px; 
	min-width: 100%; 
}
.display{ 
	font-family: Avenir;
	font-size: 48px; 
	font-weight: 200;
	text-align:center;
	color: white;
	bottom: 0; 
	transform: translate(50%, 50%); 
	text-transform: uppercase;
	position: absolute; 
	padding: 20px; 
	top: 0; 
	width: 50%;
	height:50%;
	z-index: 2;
	animation: fadeIn 10s linear ; 
	}
@keyframes fadeIn{ 
	from{opacity: 0;}
	to{opacity: 1;}}	

#date{ 
	font-family: Avenir; 
	font-size:12px; 
	width:40%; 
	color:#FFFFFF; 
	bottom: -10px;
	transform: translate(500px, 550px); 
	z-index: 2; 
}

    
/*media query for iPhone 6e portrait */
    
@media only screen and (min-width: 667px) and (orientation: portrait) {
		 
#smokin{
	flex-direction: column;
	background-size:cover; 
	position:absolute;
	} 

.display{
	font-size: 36px;
	display:inline-flex;
	flex-direction: column;
	transform:translate(50%, 50%);
	padding:0; } 

.Vcontainer{ 
	flex-direction: column;
	height:100%;
	position:absolute;
	}

#date{ 
	font-family: Avenir; 
	font-size:12px; 
	color:#FFFFFF; 
	bottom: 10px;
	position:absolute;
	transform: translate(50%, 50%); 
	display:inline-flex;
	flex-direction: column;
	}
}