/* GLOBAL STYLES */
* {
	margin: 0px;
	padding: 0px;
}

body {
	background: #fff;
	font-family: 'Roboto', sans-serif;
	font-size: 16px;
	font-weight: 300;
	color: #333333;
	line-height: 28px;
	text-align: center;
	overflow-x: hidden !important;
	margin: auto !important;
}

a,
a:hover,
a:active,
a:focus {
	border: 0 none;
	outline: 0 none;
	text-decoration: none;
}

/* TYPOGRAPHIE */

h1,
h2 {
	font-family: 'Open Sans', sans-serif;
	font-weight: 300;
}

h1 {
	font-size: 42px;
	line-height: 62px;
}

h2 {
	font-size: 32px;
	line-height: 42px;
}

h3 {
	font-size: 22px;
	line-height: 38px;
	font-weight: 300;
}

h4 {
	font-size: 20px;
	line-height: 30px;
	font-weight: 300;
}

h5 {
	font-size: 18px;
	font-weight: 300;
}


/* FORM GROUPS */

.form-control {
	background: none repeat scroll 0 0 rgba(255, 255, 255, 0.5);
	border-radius: 0px;
	box-shadow: none;
	height: 57px;
	padding-left: 20px;
}

/* CUSTOM CLASSES */

.white-text {
	color: #fff;
}

.colored-line-small-center {
	background: #733828;
	display: block;
	margin: auto;
	height: 1px;
	width: 25%;
	z-index: 1;
	margin-bottom: 5px;
}

.colored-line-right {
	background: #008ed6;
	display: block;
	float: right;
	height: 1px;
	width: 165px;
	z-index: 1;
}

.button-leweb {
	background: none repeat scroll 0 0 rgba(22, 182, 234, 0.5);
	border: 1px solid #fff;
	color: #fff;
	border-radius: 0px;
	box-shadow: none;
	height: 57px;
	padding-left: 18px;
	padding-right: 18px;

	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}


.button-leweb:hover {
	background: #008ed6;
}


/* SECTIONS */

section {
	padding: 120px 0px;
}

/* HEADER */

#header {
	background: url(../images/metrostation4.jpg) no-repeat center center;
	background-size: cover;
	height: 100vh;
	padding: 0px;
}

#header .container {
	background: url(../images/body-bg1.png) repeat 0 0;
	height: 100vh;
	width: 100% !important;
	padding: 0px;
	z-index: 998;
}

#header .col-md-8 {
	top: 20%;
	right: 0;
	bottom: 0;
	left: 0;
	position: relative;
	display: block;
	margin-left: auto;
	margin-right: auto;
	z-index: 999;
}

#header .logo {
	margin-bottom: 15px;
}

.animation {
	width: 100%;
	bottom: 0;
	height: 50px;
	overflow: hidden;
	position: relative;
	z-index: 999;
	text-align: center;
	text-decoration: none;
}

#header .fa-angle-down {
	text-align: center;
	font-size: 48px;
	color: #fff;

	-webkit-animation: leweb_fade_move_down 2s ease-in-out infinite;
	-moz-animation: leweb_fade_move_down 2s ease-in-out infinite;
	animation: leweb_fade_move_down 2s ease-in-out infinite;
}

/* Animated Arrow Down Header */

@-webkit-keyframes leweb_fade_move_down {
	0% {
		-webkit-transform: translate(0, -20px);
		opacity: 0;
	}

	50% {
		opacity: 1;
	}

	100% {
		-webkit-transform: translate(0, 20px);
		opacity: 0;
	}
}

@-moz-keyframes leweb_fade_move_down {
	0% {
		-moz-transform: translate(0, -20px);
		opacity: 0;
	}

	50% {
		opacity: 1;
	}

	100% {
		-moz-transform: translate(0, 20px);
		opacity: 0;
	}
}

@keyframes leweb_fade_move_down {
	0% {
		transform: translate(0, -20px);
		opacity: 0;
	}

	50% {
		opacity: 1;
	}

	100% {
		transform: translate(0, 20px);
		opacity: 0;
	}
}


/* ABOUT */

#about i {
	color: #fff;
	font-size: 75px;
	background: #733828;
	border-radius: 50%;
	line-height: 175px;
	height: 175px;
	width: 175px;
}

/* FOOTER */

#footer {
	border-top: 1px solid #ccc;
	padding: 10px 0px;
}

#footer p {
	margin: 0% 0% 0% 0%;
}

#footer .social {
	float: right;
}

#footer .fa {
	font-size: 24px;
	color: #733828;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

#footer .fa:hover {
	color: #93705e;
}

/*Button Css Start*/
@import url("https://fonts.googleapis.com/css?family=Roboto:900");

a {
	font-family: "Roboto", sans-serif;
	font-weight: 900;
	color: black;
	text-decoration: none;
}

.centered {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

.h-button {
	background: lightgreen;
	padding: 15px;
	width: 200px;
	text-align: center;
}

.h-button span {
	display: inline-block;
	min-width: 0.3em;
	text-transform: uppercase;
	transition: 0.25s cubic-bezier(0.5, -1, 0.5, 2);
	opacity: 0;
	transform: translate(0, -20px);
}

.h-button:before {
	content: attr(data-text);
	position: absolute;
	width: 100%;
	left: 0;
	transition: 0.25s cubic-bezier(0.5, -1, 0.5, 2);
	text-transform: uppercase;
	letter-spacing: 3.5px;
	opacity: 1;
	transform: translate(0, 0px);
}

.h-button:hover:before,
.h-button:focus:before {
	opacity: 0;
	transform: translate(0, 20px);
}

.h-button:hover span,
.h-button:focus span {
	opacity: 1;
	transform: translate(0, 0);
}

.h-button:hover span:nth-child(1),
.h-button:focus span:nth-child(1) {
	transition-delay: 0.025s;
}

.h-button:hover span:nth-child(2),
.h-button:focus span:nth-child(2) {
	transition-delay: 0.05s;
}

.h-button:hover span:nth-child(3),
.h-button:focus span:nth-child(3) {
	transition-delay: 0.075s;
}

.h-button:hover span:nth-child(4),
.h-button:focus span:nth-child(4) {
	transition-delay: 0.1s;
}

.h-button:hover span:nth-child(5),
.h-button:focus span:nth-child(5) {
	transition-delay: 0.125s;
}

.h-button:hover span:nth-child(6),
.h-button:focus span:nth-child(6) {
	transition-delay: 0.15s;
}

/*Inactive Button Start*/
.inactive {
	background: rgb(255, 52, 52);
	padding: 18px;
	width: 220px;
	text-align: center;
}

.inactive span {
	display: inline-block;
	min-width: 0.3em;
	text-transform: uppercase;
	transition: 0.25s cubic-bezier(0.5, -1, 0.5, 2);
	opacity: 0;
	transform: translate(0, -20px);
}

.inactive:before {
	content: attr(data-text);
	position: absolute;
	width: 100%;
	left: 0;
	transition: 0.25s cubic-bezier(0.5, -1, 0.5, 2);
	text-transform: uppercase;
	letter-spacing: 3.5px;
	opacity: 1;
	transform: translate(0, 0px);
}

.inactive:hover:before,
.inactive:focus:before {
	opacity: 0;
	transform: translate(0, 20px);
}

.inactive:hover span,
.inactive:focus span {
	opacity: 1;
	transform: translate(0, 0);
}

.inactive:hover span:nth-child(1),
.inactive:focus span:nth-child(1) {
	transition-delay: 0.025s;
}

.inactive:hover span:nth-child(2),
.inactive:focus span:nth-child(2) {
	transition-delay: 0.05s;
}

.inactive:hover span:nth-child(3),
.inactive:focus span:nth-child(3) {
	transition-delay: 0.075s;
}

.inactive:hover span:nth-child(4),
.inactive:focus span:nth-child(4) {
	transition-delay: 0.1s;
}

.inactive:hover span:nth-child(5),
.inactive:focus span:nth-child(5) {
	transition-delay: 0.125s;
}

.inactive:hover span:nth-child(6),
.inactive:focus span:nth-child(6) {
	transition-delay: 0.15s;
}
/*Inactive Button end*/
/*Button Css end*/

/*Translate Button*/
.switch {
	position: relative;
	display: inline-block;
	margin: 0 5px;
}

.switch>span {
	position: absolute;
	top: 14px;
	pointer-events: none;
	font-family: 'Helvetica', Arial, sans-serif;
	font-weight: bold;
	font-size: 12px;
	text-transform: uppercase;
	text-shadow: 0 1px 0 rgba(0, 0, 0, .06);
	width: 50%;
	text-align: center;
}

input.check-toggle-round-flat:checked~.off {
	color: #008ed6;
}

input.check-toggle-round-flat:checked~.on {
	color: #fff;
}

.switch>span.on {
	left: 0;
	padding-left: 2px;
	color: #008ed6;
}

.switch>span.off {
	right: 0;
	padding-right: 4px;
	color: #fff;
}

.check-toggle {
	position: absolute;
	margin-left: -9999px;
	visibility: hidden;
}

.check-toggle+label {
	display: block;
	position: relative;
	cursor: pointer;
	outline: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

input.check-toggle-round-flat+label {
	padding: 2px;
	width: 100px;
	height: 55px;
	background-color: #008ed6;
	-webkit-border-radius: 60px;
	-moz-border-radius: 60px;
	-ms-border-radius: 60px;
	-o-border-radius: 60px;
	border-radius: 60px;
}

input.check-toggle-round-flat+label:before,
input.check-toggle-round-flat+label:after {
	display: block;
	position: absolute;
	content: "";
}

input.check-toggle-round-flat+label:before {
	top: 2px;
	left: 2px;
	bottom: 2px;
	right: 2px;
	background-color: #008ed6;
	-webkit- -moz-border-radius: 60px;
	-ms-border-radius: 60px;
	-o-border-radius: 60px;
	border-radius: 60px;
}

input.check-toggle-round-flat+label:after {
	top: 4px;
	left: 4px;
	bottom: 4px;
	width: 48px;
	background-color: #fff;
	-webkit-border-radius: 52px;
	-moz-border-radius: 52px;
	-ms-border-radius: 52px;
	-o-border-radius: 52px;
	border-radius: 52px;
	-webkit-transition: margin 0.2s;
	-moz-transition: margin 0.2s;
	-o-transition: margin 0.2s;
	transition: margin 0.2s;
}

input.check-toggle-round-flat:checked+label {}

input.check-toggle-round-flat:checked+label:after {
	margin-left: 44px;
}

/* RESPONSIVE DESIGN */

/* Extra Small devices (tablets, 446px and less) */
@media (max-width: 456px) {

	#mc_form .form-control {
		width: 100%;
		margin-bottom: 15px;
	}

	.button-leweb {
		width: 100%;
	}

	#header .logo {
		width: 200px;
	}

	#header h1 {
		display: none;
	}

}

/* Small devices (tablets, 768px and less) */
@media (max-width: 768px) {

	body {
		font-size: 14px;
		line-height: 20px;
	}

	h1 {
		font-size: 44px;
		line-height: 58px;
	}

	h2 {
		font-size: 24px;
		line-height: 38px;
	}

	h3 {
		font-size: 18px;
		line-height: 30px;
	}

	h4 {
		font-size: 16px;
		line-height: 26px;
	}

	h5 {
		font-size: 14px;
		line-height: 20px;
	}

	.clocktitle {
		font-size: 11px;
	}

	.numbers {
		font-size: 44px;
	}

	#header .col-md-8 {
		top: 5%;
	}
}


/* Medium devices (desktops, 992px and up) */
@media (max-width: 992px) {

	#about .middle {
		margin-top: 65px;
		margin-bottom: 65px;
	}
}