/* Copyright 2018 - dato. t@pm3pp3 w0rk. All Rights Reserved. */

@font-face {
	font-family: 'FuturaHvBT';
	src: url('FuturaHvBT/FutuHv.ttf') format('truetype');
	font-weight: normal;
}

/*
@font-face {
	font-family: 'FuturaHvBT';
	src: url('FuturaHvBT/FuturaHeavyBT.ttf') format('truetype');
	font-weight: bold;
}
*/

html {
	overflow: hidden;
	box-sizing: border-box
}

body {
	margin: 0;
	padding: 50px;
	height: 100vh;
	background-color: #2B2B2B;
	/* background-color: white; /*todo remove this line*/
	visibility: hidden
		/*the visibility is set by the logic once the placeholder will have been replaced*/
}

html,
body {
	/*
	 * font-family: Verdana,sans-serif;
	 * font-size: 15px;
	 */
	font-family: FuturaHvBT;
	font-size: 16px;
	line-height: 1;
}

body>div {
	max-width: 800px;
	margin: auto;
	position: relative
		/*set the grid*/
}

body>div>img {
	width: 100%;
	border: none
}

body>div>div {
	position: absolute
}

body>div>div:first-of-type {
	top: 15%;
	left: 5%;
}

body>div>div:first-of-type>* {
	float: left
}

body>div>div:first-of-type>img {
	width: 25%;
	min-width: 150px;
	border-radius: 50%;
}

body>div>div:first-of-type>div {
	margin: 10% 10px;
	width: 50%
}

body>div>div:first-of-type>div>div {
	color: #607d8b;
	/*w3.css .w3-blue-grey*/
	margin-bottom: 5px
}

body>div>div:first-of-type>div>a {
	color: #71BC78
}

/*logo: green*/
body>div>div:first-of-type>div>a:hover {
	text-decoration: underline;
	cursor: pointer
}

body>div>div:last-of-type {
	right: 15%;
	bottom: calc(15% + 10px);
	font-weight: 900;
	text-align: right;
	color: #2C9CA7
		/*logo: blue*/
}

body>div>div:last-of-type>div:first-child {
	font-size: 175px;
	margin-bottom: -10px;
	margin-right: -5px;
}

body>div>div:last-of-type>div:last-child {
	font-size: 25px
}


@media (max-width: 750px) {
	body {
		padding: 20px;
	}

	body>div>div:last-of-type>div:first-child {
		font-size: 150px
	}
}

@media (max-width: 620px) {
	body>div>div:first-of-type {
		left: 0
	}

	body>div>div:first-of-type>img {
		width: 40%
	}

	body>div>div:first-of-type>div {
		margin: 5% 10px;
		width: auto
	}

	body>div>div:last-of-type {
		display: none
	}
}