/* open-sans-regular - latin */
	@font-face {
	  font-family: 'Open Sans';
	  font-style: normal;
	  font-weight: 400;
	  src: local('Open Sans Regular'), local('OpenSans-Regular'),
	       url('./fonts/open-sans-v15-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
	       url('./fonts/open-sans-v15-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
	}

	/* open-sans-condensed-300 - latin 
	@font-face {
	  font-family: 'Open Sans Condensed';
	  font-style: normal;
	  font-weight: 300;
	  src: url('../fonts/open-sans-condensed-v12-latin-300.eot'); 
	  src: local('Open Sans Condensed Light'), local('OpenSansCondensed-Light'),
	       url('./fonts/open-sans-condensed-v12-latin-300.eot?#iefix') format('embedded-opentype'), 
	       url('./fonts/open-sans-condensed-v12-latin-300.woff2') format('woff2'), 
	       url('./fonts/open-sans-condensed-v12-latin-300.woff') format('woff'), 
	       url('./fonts/open-sans-condensed-v12-latin-300.ttf') format('truetype'), 
	       url('./fonts/open-sans-condensed-v12-latin-300.svg#OpenSansCondensed') format('svg'); 
	}
	*/

	body
	{
		color: gray;
		background: url(grid.png);
		font-family: 'Open Sans', sans-serif;
		margin: 0;
	}
	
	.all
	{
		width: 100%;
		height: 100%;
		position: absolute;
		left:0px;
		top:0px;
		/*overflow-x: hidden;	*/
	}
	
	.vcard_container
	{
		width: 100%;

		min-height: 400px;
		max-width: 800px;
		border: 0px solid gray;
		padding: 20px;

		border-radius: 5px;
		box-shadow: 0px 0px 10px gray;

		background: white;
		
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -250%);
		
	
	}
	
	.impr_container
	{
		width: 100%;

		min-height: 320px;
		max-width: 800px;
		border: 0px solid gray;
		padding: 20px;
		border-radius: 5px;
		box-shadow: 0px 0px 10px gray;

		background: white;
		
		position: absolute;
		top: 2%;
		left: 50%;
		transform: translate(-50%, -250%);

	}
	
	.logo
	{
		width: 100%;
		max-width: 200px;
		float: left;
		margin-right: 20px;
	}
	
	.text
	{
		width: 100%;
	}
	
	.menu
	{
		position: absolute;
		bottom: -130px;
		right: 0px;
		max-width: 600px;
		margin: 5px auto;
		text-align: right;
		height:100px;
	}
	
	.menu div
	{
		float: left;
		color: gray;
		font-size: 12px;
		text-decoration: none;
		cursor: pointer;
		height:80px;
	}
	
	.clickable { cursor: pointer; }
	
	.page_moved_in
	{
		left:50%; transform: translate(-50%, -50%) skew(0deg,0deg); opacity:1;
	}
	
	@keyframes page_move_in_keys
	{
	    0% {left:-150%; transform: translate(-50%, -50%) skew(20deg,15deg) scale(0.5,0.5);}
	    75% {transform: scale(0.7,0.7);}
	    100% {left:50%; transform: translate(-50%, -50%) skew(0deg,0deg); opacity:1;}
	}
	
	.page_move_in
	{
		
		animation-name: page_move_in_keys;
	    animation-duration: 0.7s;
	    animation-fill-mode:forwards;
	    animation-delay: 0.0s;
	    
	    display: block;
	    visibility: visible;
	}
	
	@keyframes page_move_in_impr_keys
	{
	    0% {left:-150%; transform: translate(-50%, -0%) skew(20deg,15deg) scale(0.5,0.5);}
	    75% {transform: scale(0.7,0.7);}
	    100% {left:50%; transform: translate(-50%, -0%) skew(0deg,0deg); opacity:1}
	}
	
	.page_move_in_impr
	{
		
		animation-name: page_move_in_impr_keys;
	    animation-duration: 0.7s;
	    animation-fill-mode:forwards;
	    animation-delay: 0.0s;
	    
	    display: block;
	    visibility: visible;
	}	
	
	@keyframes page_move_out_keys
	{
	    0% {left:50%; transform: translate(-50%, -50%) skew(0deg,0deg); opacity:1}		
	    15% {transform: scale(0.7,0.7);}
	    100% {left:-100%; top:-100%; transform: translate(-50%, -50%) skew(20deg,15deg) scale(0.5,0.5); opacity: 0;}
	}
	
	
	.page_move_out
	{
		animation-name: page_move_out_keys;
	    animation-duration: 0.7s;
	    animation-fill-mode:forwards;
	}
	
	.loca_overlay
	{
		position:absolute;
		left:0px;
		top:0px;
		width: 100%;
		height:100%;
		background-color: white;
	}
	
	.loca_flag
	{
		width: 300px;
		height: 158px;
	}