@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700,900&subset=latin-ext');
body {
	font-family: 'Lato', sans-serif;
	background: #000;
	font-size: 18px;
}  

h2 {
	font-family: 'Lato', sans-serif;
	font-size: 64px;
	font-weight: 900;
	color: #FFF;
	text-align: center;
	text-transform: uppercase;
	margin-bottom: 60px;
}

h2:after {
	content: "";
	display: block;
	margin: 20px auto;
	width: 90%;
	max-width: 444px;
	height: 5px;
	background: #e9c625;
}

img {
	max-width: 100%;
}

.row {
	margin-left: 0px;
	margin-right: 0px;
}

.heading {
	font-size: 24px;
	font-weight: 100;
}

.navbtn {
	width: 60px;
	height: 60px;
	background-image: url('/template/img/menu.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: center;
	background-color: #222;
	
	position: fixed;
	z-index: 99;
	
	top: 30px;
	right: 30px;
}

header ul {
	width: 60px;
	
	position: fixed;
	z-index: 99;
	
	top: 90px;
	right: 30px;
	
	padding: 0;
	margin:0;
	list-style-type: none;
}

header ul li a {
	width: 60px;
	height: 60px;
	
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: center;
	
	display: block;
	
	-ms-transform: translateX(150px);
    -webkit-transform:  translateX(150px);
    transform:  translateX(150px);
	
	background: #222;
}

header ul li:hover a {
	background: #e9c625;
}

header ul.active li a {
	-webkit-animation-name: SLIDE-IN;
	-moz-animation-name: SLIDE-IN;
	animation-name: SLIDE-IN;
	
	-webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */
    -moz-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
	
	animation-duration: .1s;
	-moz-animation-duration: .1s;
	-webkit-animation-duration: .1s;
}

header ul li:nth-child(1) a {
	background-image: url('/template/img/menu-1.png');
}

header ul li:nth-child(2) a {
	background-image: url('/template/img/menu-2.png');
	-webkit-animation-delay: .1s;
	animation-delay: .1s;
}

header ul li:nth-child(3) a {
	background-image: url('/template/img/menu-3.png');
	-webkit-animation-delay: .2s;
	animation-delay: .2s;
}

header ul li:nth-child(4) a {
	background-image: url('/template/img/menu-4.png');
	-webkit-animation-delay: .3s;
	animation-delay: .3s;
}

@-webkit-keyframes SLIDE-IN {
  0%   {
	-ms-transform: translateX(150px);
    -webkit-transform:  translateX(150px);
    transform:  translateX(150px);
  }
  100% {
	-ms-transform: translateX(0px);
    -webkit-transform:  translateX(0px);
    transform:  translateX(0px);
  }
}
@-moz-keyframes SLIDE-IN {
  0%   {
	-ms-transform: translateX(150px);
    -webkit-transform:  translateX(150px);
    transform:  translateX(150px);
  }
  100% {
	-ms-transform: translateX(0px);
    -webkit-transform:  translateX(0px);
    transform:  translateX(0px);
  }
}
@-o-keyframes SLIDE-IN {
  0%   { 
    -ms-transform: translateX(150px);
    -webkit-transform:  translateX(150px);
    transform:  translateX(150px);
}
  100% {
	-ms-transform: translateX(0px);
    -webkit-transform:  translateX(0px);
    transform:  translateX(0px);
	}
}
@keyframes SLIDE-IN {
  0%   {
	-ms-transform: translateX(150px);
    -webkit-transform:  translateX(150px);
    transform:  translateX(150px);
  }
  100% {
	-ms-transform: translateX(0px);
    -webkit-transform:  translateX(0px);
    transform:  translateX(0px);
  }
}
   
.video-container {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 100%;
	height: 100%; 
	overflow: hidden;
	z-index: 0;
	opacity: 0;	
	-webkit-animation-delay: 1s;
	animation-delay: 1s;
}

.video-container video {
	/* Make video to at least 100% wide and tall */
	min-width: 100vw; 
	min-height: 100%; 

	/* Setting width & height to auto prevents the browser from stretching or squishing the video */
	width: auto;
	height: auto;

	/* Center the video */
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

section {
	position: relative;
}

.opening {
	height: 100vh;
	text-align: center;
}

.opening #logo {
	opacity: 0;
	top: 35%;
	position: relative;
	width: 70%;
	max-width: 444px;
	-webkit-animation-delay: 2s;
	-moz-animation-delay: 2s;
	animation-delay: 2s;
}

.services {
	margin-top: -20vh;
	background-image: url('/template/img/bg1.png');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: top;
	text-align: center;
}

.services .description {
	margin-top: 15vh;
	text-align: justify;
}

.services .btn {
	margin-top: 10vh;
	margin-bottom: 40vh;
}

.description {
	color: #FFF;
}

.description strong {
	font-weight: 900;
	color: #e9c625;
}

.tech-table {
	box-shadow: 0px 50px 77px rgba(0,10,0,.4);
}

.tech-table .row > div {
	min-height: 200px;
}

.tech-table h3 {
	color: #FFF;
	padding-top: 50px;
	font-weight: 900;
	font-size: 32px;
}

.tech-table p {
	color: #FFF;
}

.works {
	margin-top: -30vh;
	background-image: url('/template/img/bg2.png');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: top;
	
	text-align: center;
}

.works .container {
	padding-top: 20vh;
}

.works .btn {
	margin-top: 10vh;
	margin-bottom: 40vh;
}

.time {
	margin-top: -30vh;
	background-image: url('/template/img/bg3.png');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: top;
	
	text-align: center;	
}

.time .container {
	padding-top: 20vh;
}

.time .btn {
	margin-top: 10vh;
	margin-bottom: 20vh;
}

.contact {
	background-image: url('/template/img/bg4.png');
	background-repeat: repeat;
	background-size: auto 100%;
	background-position: top;
	
	text-align: center;	
}

.contact .container {
	padding-top: 10vh;
}

.contact-form {
	max-width: 500px !important;
	background: #FFF;
	padding: 10%;
	
	box-shadow: 0px 50px 77px rgba(0,10,0,.4);
	
	margin: auto;
	margin-bottom: 15vh;
}

footer {
	background-image: url('/template/img/footer.png');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: top;
	
	padding-top: 10vh;
	
	text-align: center;	
}

footer .copyright {
	padding-top: 10vh;
	padding-bottom: 5vh;
	color: #FFF;
	font-size: 14px;
}

footer .copyright span {
	color: #e9c625;
}

.fadeIn {
	opacity: 0;
}

.anim.fadeIn {
	-webkit-animation-name: FADE-IN;
	-moz-animation-name: FADE-IN !important;
	animation-name: FADE-IN;
	
	-webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */
    -moz-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
	
	animation-duration: 2s;
	-moz-animation-duration: 2s;
	-webkit-animation-duration: 2s;
}

@-webkit-keyframes FADE-IN {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-moz-keyframes FADE-IN {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-o-keyframes FADE-IN {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes FADE-IN {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

.check-group {
	text-align: left;
}

.check-group label {
	font-weight: normal;
}

.check-group input {
	margin-right: 20px;
}

.check-group .row {
	margin-top: 30px;
	margin-bottom: 30px;
}

.check-group .row [class*="col-sm-"] {
	padding: 0;
}

/* BEGIN - CONTACT-FORM UPGRADE */

input[type=text],
input[type=password],
input[type=tel],
input[type=email],
select,
textarea {
  font-size:18px;
  padding:10px 10px 10px 5px;
  display:block;
  width:100%;
  border:none;
  border: 0 !important;
  border-bottom:1px solid #757575 !important;
}

textarea {
	resize: none;
	height: 135px;
}

input:focus, textarea:focus { outline:none; }

/* LABEL ======================================= */
label 				 {
  color:#999; 
  font-size:18px;
  font-weight:normal;
  position:absolute;
  pointer-events:none;
  left:5px;
  top:10px;
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}

/* active state */
input:focus ~ label, textarea:focus ~ label {
  top:-20px;
  font-size:14px;
  color:#ef9c00;
}

/* active state */
.select > label, .nonempty ~ label {
  top:-20px;
  font-size:14px;
}

/* active state */
select ~ label {
  top:-20px;
  font-size:14px;
}

select {
	margin: 0;      
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAQAAADZc7J/AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QAAKqNIzIAAAAJcEhZcwAADdcAAA3XAUIom3gAAAAHdElNRQfhBBwNHCglmUqUAAAAVElEQVRIx+3QQRIAEAxD0Rw9N2dhYYy2SpYa6/8GQK0GAEQTDjWC2i2oPYTaX1D7TjPPE26eI8L8TBzzmEjlPpHObeIq34nrfCWe8kk854OQ8tov6/up/xH+2udVAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE3LTA0LTI4VDEzOjI4OjQwKzAyOjAwFNrRGQAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxNy0wNC0yOFQxMzoyODo0MCswMjowMGWHaaUAAAAZdEVYdFNvZnR3YXJlAHd3dy5pbmtzY2FwZS5vcmeb7jwaAAAAAElFTkSuQmCC');
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 12px;
}

/* BOTTOM BARS ================================= */
.bar { position:relative; display:block; }
.bar:before, .bar:after 	{
  content:'';
  height:2px; 
  width:0;
  bottom:1px; 
  position:absolute;
  background:#ef9c00; 
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}
.bar:before {
  left:50%;
}
.bar:after {
  right:50%; 
}

/* active state */
input:focus ~ .bar:before, input:focus ~ .bar:after, textarea:focus ~ .bar:before, textarea:focus ~ .bar:after {
  width:50%;
}

/* HIGHLIGHTER ================================== */
.group { 
  position:relative; 
  margin-bottom:30px; 
}

.highlighted {
  position:absolute;
  height:60%; 
  width:100px; 
  top:25%; 
  left:0;
  pointer-events:none;
  opacity:0.5;
}

/* active state */
input:focus ~ .highlighted {
  -webkit-animation:inputHighlighter 0.3s ease;
  -moz-animation:inputHighlighter 0.3s ease;
  animation:inputHighlighter 0.3s ease;
}

/* ANIMATIONS ================ */
@-webkit-keyframes inputHighlighter {
	from { background:#ef9c00; }
  to 	{ width:0; background:transparent; }
}
@-moz-keyframes inputHighlighter {
	from { background:#ef9c00; }
  to 	{ width:0; background:transparent; }
}
@keyframes inputHighlighter {
	from { background:#ef9c00; }
  to 	{ width:0; background:transparent; }
}

/* END - CONTACT-FORM UPGRADE */

/* BUTTON RIPPLE */
.ripple {
  width: 0;
  height: 0;
  border-radius: 100%;
  background: rgba(255, 255, 255, 0.4);
  transform: scale(0);
  position: absolute;
  opacity: 1;
}

.rippleEffect {
    animation: rippleDrop .6s linear;
}

@keyframes rippleDrop {
  100% {
    transform: scale(2);
    opacity: 0;
  }
}