/*!
*
* @description CSS and Slide for Renato Armenio (geims)
* @author Renato Armenio (geims)
* @site http://renatoarmenio.it
* @link https://www.behance.net/Geims
*
*/

html, body { margin: 0; padding: 0; font-family: Lato; }

* { box-sizing: border-box; }

.white { color: #FFF; }
.blue { color: #3967A9; }
.blue_bg { background-color: #3967A9; }
.darkgrey { color: #585858; }
.grey_bg { background-color: #e8e8e8; }


/* 
========================
TYPO
========================
*/

h1 {
	font-weight: 600;
	font-size: 2.7em;
	margin: 0 0.5em;
	-webkit-text-size-adjust: none;
}

h2 {
	font-size: 1.7em;
	font-weight: 400;
	padding: 0;
	/* margin: 0; */
	color: #c3c8cd;
	-webkit-text-size-adjust: none;
}

.titolo {
	text-align: center;
	font-size: 2em;
	margin-bottom: 30px;
	letter-spacing: 6px;
	-webkit-text-size-adjust: none;
}

/* 
========================
GENERAL
========================
*/

.uppercase { text-transform: uppercase; }
.center { text-align: center; }
.grid-25 { padding: 10px; }

/* 
========================
PAGINA
========================
*/

#particles-js{
	height: 100vh;
	width: 100%;
	background-image: url('');
	background-size: cover;
	background-position: 50% 50%;
	background-repeat: no-repeat;
}

.header {
	height: 100vh;
	width: 100%;
	position: absolute;
	/*background: url(../img/header_bg.jpg) 50% 50% no-repeat;*/
	background-size: cover;
	color: #FFF;
	text-align: center;
	display: table;
}
.contain {display: table-cell; vertical-align: middle;}

.foto {
	width: 200px;
	height: 200px;
	margin: 0 auto 50px auto;
	background: url(../img/geims.jpg) 50% 50% no-repeat;
	background-size: contain;
	border-radius: 100px;
	border: 10px solid #e8e8e8;
}

.headertext { padding-bottom: 80px; }

.typedtext {
	font-size: 2em;
	text-align: center;
	margin: 30px auto;
}

.typed-cursor{
	opacity: 1;
	color: #3967A9;
	-webkit-animation: blink 0.7s infinite;
	-moz-animation: blink 0.7s infinite;
	animation: blink 0.7s infinite;
}
@keyframes blink{ 0% { opacity:1; } 50% { opacity:0; } 100% { opacity:1; } }
@-webkit-keyframes blink{ 0% { opacity:1; } 50% { opacity:0; } 100% { opacity:1; } }
@-moz-keyframes blink{ 0% { opacity:1; } 50% { opacity:0; } 100% { opacity:1; } }

.partners { padding: 80px 0; }
.partners img { width: 100%; }
.works { padding: 80px 0; }
.w_img { overflow: hidden; }
.w_img img { width: 100%; -webkit-transition: all 0.7s ease; transition: all 0.7s ease; }
.w_img:hover img { -webkit-transform:scale(1.2); transform:scale(1.2); }
.customers { padding: 80px 0; }
.customers img { width: 100%; }
.instagram { padding: 80px 0; }
.instagram .grid-20 { padding: 0; }
.instagram img { width: 100%; }

.content {
	font-size: 150%;
	padding: 3em 0;
}

.content h2 {
	margin: 0 0 2em;
	opacity: 0.1;
}

.content p {
	margin: 1em 0;
	padding: 5em 0 0 0;
	font-size: 0.65em;
}

/* 
========================
TREES
========================
*/
.trees { padding: 80px 0; }
.tree {
	height: 100px;
	width: 100px;
}

/* 
========================
SOCIAL
========================
*/
.socials { margin: 30px 0; }
.s_icon {
	height: 60px;
	width: 60px;
	line-height: 60px;
	border-radius: 30px;
	font-size: 1.5em;
	margin: 0 20px;
	background-color: #FFF;
	color: #3967A9;
}
.s_icon:hover {
	animation: bounce 1s forwards;
	-moz-animation: bounce 1s forwards;
	-webkit-animation: bounce 1s forwards;
}
@keyframes bounce { 
	0% {
		transform:scale(1.0);
		-moz-transform:scale(1.0);
		-webkit-transform:scale(1.0);
	}
	33% {
		transform:scale(0.5);
		-moz-transform:scale(0.5);
		-webkit-transform:scale(0.5);
	}
	66% {
		transform:scale(1.5);
		-moz-transform:scale(1.5);
		-webkit-transform:scale(1.5);
	}
	100% {
		background-color: #3967A9;
		color: #FFF;
		transform:scale(1.0);
		-moz-transform:scale(1.0);
		-webkit-transform:scale(1.0);
	}
}

/* 
========================
FOOTER
========================
*/
.footer {
	letter-spacing: 2px;
	width: 100%;
	color: #FFF;
	line-height: 35px;
	text-align: center;
	padding: 10px 0;
	padding: 20px 0;
}

.contatti { padding: 80px 0; }

.contact-line {
	margin-bottom: 3em;
	font-size: .9em;
}

h4, .h4 {
	text-align: left;
	font-size: 1.25em;
	line-height: 1.4;
	margin: 0;
}

.contact-line { margin: 0 30px; }
.contact-line .icon { font-size: 2.5em; line-height: 48px; }
.media-left, .media-right { display: table-cell; vertical-align: top; text-align: left; }
.media-left, .media>.pull-left { padding-right: 10px; }
.media-right, .media>.pull-right { padding-left: 10px; }