/***** 01. General Styles *****/
h1 {
	font: 400 24px/1.5em "Roboto", sans-serif; 
}

h2 {
	font: 300 17px/1.6em "Roboto", sans-serif; 
}

p {
	font: 300 14px/1.6em "Roboto", sans-serif; 
}

.button,
.button:focus {
	font: 600 12px/26px "Raleway", sans-serif;
	color: #fff;
	border-radius: 30px;
	border: 2px solid #298aff;
	padding: 13px 31px 12px 31px;
	text-decoration: none;
	-o-transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    transition: all .3s ease;		
}

.button:hover {
	background-color: #298aff;
	color: #fff;
	border: 2px solid #298aff;
	text-decoration: none;
	
}

a, a:focus {
	  outline: none;
	  text-decoration: none;
}

a.button:hover {
	text-decoration: none; 
}

/* Pop Hover Animation Effect */
@-webkit-keyframes hvr-pop { 
	50% {
		-webkit-transform: scale(1.1);
		transform: scale(1.1); 
	} 
}

@keyframes hvr-pop {
	50% {
	-webkit-transform: scale(1.1);
	transform: scale(1.1); 
	} 
}

.hvr-pop {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	box-shadow: 0 0 1px transparent;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-moz-osx-font-smoothing: grayscale; 
}

.hvr-pop:hover, .hvr-pop:focus, .hvr-pop:active {
	-webkit-animation-name: hvr-pop;
	animation-name: hvr-pop;
	-webkit-animation-duration: 0.3s;
	animation-duration: 0.3s;
	-webkit-animation-timing-function: linear;
	animation-timing-function: linear;
	-webkit-animation-iteration-count: 1;
	animation-iteration-count: 1; 
}

/* Preloader */
.main-wrapper {
	overflow: hidden; /* used to keep the scroll bar on the pre-loader screen */ 
}

#preloader {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #298aff; /* change if the mask should have another color then white */
	z-index: 9999; /* makes sure it stays on top */
}

#status {
	width: 200px;
	height: 200px;
	position: absolute;
	left: 50%; /* centers the loading animation horizontally one the screen */
	top: 50%; /* centers the loading animation vertically one the screen */
	background-image: url(../images/pre-loader-gears.gif); /* path to your loading animation */
	background-repeat: no-repeat;
	background-position: center;
	margin: -100px 0 0 -100px; /* is width and height divided by two */ 
}


/***** 02. Header *****/
#header {
	background: #273544;
	padding-top: 60px;
	padding-bottom: 80px; 
}

#header .header-content {
	text-align: center; 
}

#header .header-content .logo img {
	width: 135px;
	height: 48px; 
}

#header .header-content h1 {
	font: 400 32px/1.5em "Roboto", sans-serif; 
	margin-top: 30px;
	color: #fff; 
}

#header .header-content h2 {
	margin-top: 10px;
	margin-bottom: 40px;
	margin-left: auto;
	margin-right: auto;
	color: #fff; 
}


/***** 03. Layouts *****/
#layouts {
	background-color: #efefef; 
	padding-top: 40px;
	padding-bottom: 70px;
	text-align: center;
}

#layouts h1 {
	font: 300 28px/1.5em "Roboto", sans-serif; 
	color: #273544;
	margin-bottom: -15px; 
}

#layouts h2 {
	font-size: 18px;
	font-weight: 400;
	color: #273544;
	margin-top: 14px;
	margin-bottom: 5px; 
}

#layouts h2 a {
	color: #273544;
}

#layouts h2 span.blue {
	color: #298aff;
}

#layouts .separator {
	margin-bottom: 30px; 
}

#layouts img {
	width: 96%;
	margin-top: 40px; 
}

#layouts .large-hidden {
	visibility: visible; 
}

#layouts .small-hidden {
	visibility: hidden;
	display: none; 
}


/***** 04. Footer *****/
#footer {
	padding-top: 25px;
	padding-bottom: 15px;
	background-color: #273544; 
}

#footer .btn {
	padding: 5px 8px;
	color: #273544; 
}

#footer .btn:hover {
	padding: 5px 8px;
	color: #fff; 
}

#footer p {
	margin-top: 4px;
	color: #d9d7d7; 
}

#footer a {
	color: #d9d7d7;
	text-decoration: underline; 
}

#footer a:hover {
	color: #fff; 
}


/***** 05. Back To Top Button *****/
a.back-to-top {
	display: none;
	width: 40px;
	height: 40px;
	text-indent: -9999px;
	position: fixed;
	z-index: 999;
	right: 10px;
	bottom: 10px;
	background: #323c46 url("../images/up-arrow.png") no-repeat center 47%;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	border-radius: 30px;
	background-size: 18px 18px; 
}

a:hover.back-to-top {
	background-color: #000; 
}


/***** 06. Media Queries *****/

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
	#header .header-content .logo img {
		width: 170px;
		height: 55px; 
	}

	#layouts img {
		margin-top: 50px; 
	}

	a.back-to-top {
		right: 30px;
		bottom: 10px; 
	} 
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
	#header .header-content h2 {
		width: 60%; 
	} 
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
	#layouts .large-hidden {
		visibility: hidden;
		display: none; 
	}

	#layouts .small-hidden {
		width: 360px;
		height: 223px;
		visibility: visible;
		display: inline-block; 
	} 
}