html, body {

	height: 100%;
	font-family: 'Alegreya Sans', sans-serif;

}

section {
	
	margin: 40px 0px 40px 0px;
	
}

section#header {
	
	margin: 0px;
	
}

.btn {

	transition: all 0.3s ease-in-out;

}

@media(max-width:768px) {

	#header {

		text-align: center;		

	}

	#header img {

		margin: 20% auto 0;

	}

	#contact, #services, #solutions {

		text-align: center;

	}

	#contact hr, #services hr, #solutions hr {

		margin: 8% auto;

	}
	
	#services h2, #solutions h2, #contact h2 {
		
		margin-bottom: -15px;
		
	}

}

#contact hr, #services hr, #solutions hr {

	text-align: left;

}

.navbar {

	background-color: rgba(21,31,33,0.5);
	border-bottom: 1px solid #dedede;
	font-family: 'Alegreya Sans', sans-serif;

}

.navbar .nav .nav-item .nav-link {

	color: #d1d1d1;

}

.navbar .nav .nav-item .nav-link:hover{

	color: #fff;

}

.navbar-toggler {

	color: white;

}

#header {

	background: url('../img/pexels-pixabay-158826_modBlue.jpg') center center no-repeat;
	background-size: cover;
	height: 100%;
	color: white;
	display: flex;
	align-items: center;

}

#header img {

	padding: 0 0 20px;
	width: 80%;

}

#header .header-right {

	background-color: rgba(0,0,0,0.5);
	padding: 30px;
	border-radius: 10px;

}

#header .fa {

	margin: 5% 0;	

}

#header a .fa {

	color: #fff;

}

#header a .fa:hover {

	color: #ccc;

}

.underconstruction {

	color: red;

}

#connect {

	padding: 4.25rem 0;

}

#connect .fa {

	font-size: 1.5em;
	color: #336699;
	border: 2px solid #336699;
	width: 60px;
	height: 60px;
	border-radius: 30%;
	text-align: center;
	padding: 30% 0;
	margin-top: 10px;
	transition: all 0.4s ease-in-out;

}

#connect .fa:hover {

	color: white;
	background: #336699;

}