/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
html{height:100%;}
body { background-color: black; font-family: 'Cairo', sans-serif;  height:100%; min-height:100%; font-size:16px}
hr {border-top:1px solid #3c8ca0;}
a {color: white;}
a:hover {color: white;}
.btn {transition: .1s all linear}
.page {color: white; padding-top: 70px; padding-bottom: 40px; height: auto;}
.bgz {position: fixed; top:0; z-index: -999; background: black url('../img/bg.jpg') no-repeat center;  background-size: cover; background-attachment: scroll; height: 100%; width: 100%;}
.page h1 { font-weight: bold; text-transform: uppercase;}
.starter {color: white; text-align: center; padding-bottom: 40px; margin-top: -40px;}
.starter p {line-height: 24px; margin-bottom: 10px; margin-top:20px;}
.starter h1 {font-size:32px; font-weight: bold; text-transform: uppercase}
.navbar-brand img {width:105px}
.mega-wrap {height:100%; background: url('../img/zevs.png') no-repeat center bottom; background-size: contain; position: absolute; width: 679px; z-index: -1; bottom: 0; left:50%; margin-left:-550px}
.container.main {height:100%;}
.wrapper, .slide-wrap  {display: table; height:100%; }
.slide-wrap {width: 100%}
.inner-wrapper, .slide-inner-wrap {display: table-cell; vertical-align: middle; }
.inner-wrapper {padding-left:20px; padding-right: 20px;}
h1, h2, h3, h4, h5, h6 {text-transform: uppercase; font-weight: bold}
.small-center {text-align: center;}
.navbar { border:0; min-height:66px; padding-top: 8px; background:  rgba(1, 37, 46, 0.8) ;}
.navbar-nav { margin-top:0; margin-bottom: 0;}
.navbar-nav>li>a {padding-top: 15px; padding-bottom: 15px; font-size:14px; text-transform: uppercase; font-weight: 500;}
.navbar-inverse .navbar-nav>li>a {color:#e3e3e3}
.navbar-inverse .navbar-nav>li>a:hover {background: rgba(22, 22, 22, 0.5)}
.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:hover { background-color: #d59e4b;}    
.navbar-brand {padding-top:10px;}
.navbar-collapse {margin-top:9px; background: rgba(1, 37, 46, 0.8)}
.no-margin-left {margin-left:0 !important;}
.btn { color:white !important; -webkit-box-shadow: none !important; box-shadow: none !important;}
.btn-red {background-color: #283a3c; -webkit-border-radius: 0; border-radius: 0; color:white; text-transform: uppercase; padding:12px 28px;}
.btn-red:hover {color: white; background-color: #35494b}
.btn-dark {background-color: #d59e4b; -webkit-border-radius: 0; border-radius: 0; color:white; text-transform: uppercase; padding:12px 28px;}
.btn-dark:hover {color: white; background-color: #dda653}
.footer {font-size: 14px; padding-bottom: 15px; text-align: center}
/* Small devices (tablets, 768px and up) */
.footer-list {margin:0; padding:0; list-style: none; color: white}
.footer-list li a {color: white}
.footer-list li {display: inline-block; padding:0 13px; line-height: 16px;}
.footer-list li:nth-last-of-type(-n+2) {border-right:0;}
.footer-list li:last-child {padding-left: 0; display: block}
.soc {width:26px; margin-left:5px; margin-top:5px;}
.second-s {background: #161616 url('../img/slide1.jpg') no-repeat center; background-size: cover; color:white; overflow: hidden; font-size:20px; padding: 0 10%}
.third-s {background: #161616 url('../img/slide2.jpg') no-repeat center; background-size: cover; overflow: hidden;}
.fourth-s {background: #161616 url('../img/slide3.jpg') no-repeat center; background-size: cover; overflow: hidden;}
.fift-s {background: #161616 url('../img/slide4.jpg') no-repeat left; background-size: cover; overflow: hidden;}
.first-s { background: black url('../img/bg.jpg') no-repeat center; background-size: cover; z-index:-3}
.skew { background: rgba(255,255,255,0.9); height:50%;  width: 100%; float: right; font-size:20px; text-align: center; padding: 0 6%; display: table; }
.skewed-in {display: table-cell; vertical-align: middle;}
.extras {text-align: center; font-size:14px}
.extras img {margin-bottom: 10px; margin-top: 20px; width: 70%}
.next {
  position: absolute; bottom: 20px; left: 50%; z-index: 2; display: inline-block; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); color: #fff; letter-spacing: .1em; text-decoration: none; transition: opacity .3s;padding-top: 24px; font-size:16px;
}
.next:hover {opacity: .5;}
.small-only {display: inline-block;}
.history img {margin-bottom:15px}
.history p {margin-bottom:20px}
.history a {color: white; word-wrap: break-word;}
.history a:hover {text-decoration: underline}
.navbar-inverse .navbar-toggle {border-color: #2a474e}
.navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus {background-color:#002c37; }
.next span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-animation: sdb04 2s infinite;
  animation: sdb04 2s infinite;
  box-sizing: border-box;
  
}

.gallery a {display: block; background: white}
.gallery a img {opacity: 1; transition: .2s opacity linear;}
.gallery a img:hover {opacity: 0.8}
.grid-item { width: 25%;float: left;}

.large {left: 74%;}
.large-left {left:26%}

.next-inv span {border-color: #676767 !important}

@-webkit-keyframes sdb04 {
  0% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
  }
  20% {
    -webkit-transform: rotate(-45deg) translate(-10px, 10px);
  }
  40% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
  }
}
@keyframes sdb04 {
  0% {
    transform: rotate(-45deg) translate(0, 0);
  }
  20% {
    transform: rotate(-45deg) translate(-10px, 10px);
  }
  40% {
    transform: rotate(-45deg) translate(0, 0);
  }
}


.bgFx{

  animation: breath .5s linear;
}

@keyframes breath {
  0%   { opacity: 0 }
  100% { opacity: 1 }
}


.fx{  padding-top: 50%; opacity: 0;}


/* Contacts */
.contacts h3 {margin-bottom: 10px; margin-top: 30px}
.page h1:first-of-type {margin-bottom: 20px;}
.contacts .myInput {-webkit-border-radius:0; border-radius: 0; margin-bottom:30px; border: 0; height:48px; resize: none; background: rgba(255,255,255, 0.80); color:#4e6064; font-size: 16px}
.contacts .myInput::-webkit-input-placeholder {color: #4e6064} 
.contacts textarea.myInput {height: 200px; }
.jobs h3 {background: #04303b; text-transform: none; padding:8px 15px}
.jobs {margin-top:20px;}
.job {padding: 15px}
.job ul {padding-left: 22px;}
.job-send a {color: white; text-decoration: underline}


.collapse-this {padding: 0 15px 40px 15px;}
.collapse-this [class*='col-'] {padding:0;}

@media (min-width: 350px) {
    .footer-list li { border-right:1px solid white;}  
    .starter { margin-top: 0px;}
    .starter p { margin-bottom: 30px; }
}

@media (min-width: 530px) {
   .footer-list li { border-right:1px solid white;}  
    .footer-list li:last-child {padding-left: 0; display:inline-block}
    .navbar {  min-height:90px; padding-top: 20px; }   
    .navbar-collapse {margin-top:19px;}
    .soc {margin-top:0;}
    .page {padding-top: 94px;}
}



@media (min-width: 768px) {
    .navbar-inverse .navbar-nav>li>a:hover {background: transparent}
    .page h1:first-of-type {margin-bottom: 40px;}
    .small-center {text-align:inherit}
    .small-only {display: none;}
    .next {padding-top: 60px}
    .fift-s {background: #161616 url('../img/slide4.jpg') no-repeat center; background-size: cover;}
    .page {padding-top: 150px;}
    /* EVERY PAGE */
    .navbar{ border:0; min-height:90px; padding-top: 20px;}
    .navbar-nav>li>a {padding-top: 5px; padding-bottom: 5px; font-size:14px; text-transform: uppercase; font-weight: 500;}
    .navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:hover { background-color: #d59e4b;}   
    .navbar-brand {padding-top:12px;}
    .navbar-collapse {margin-top:10px; background: none}   

    
    .second-s {font-size:40px; padding: 0 20%}
    .starter {text-align: left }
    .starter h1 {font-size:58px; }
    .inner-wrapper { width: 100%; padding-left: 30%; padding-right:0}
    .mega-wrap { margin-left:-650px}
    .footer {text-align: right; padding-bottom: 36px;}
    .skew { background: rgba(255,255,255,0.9); height:100%;  width: 54%; float: right; font-size:40px; text-align: center; padding: 0 6%;}   
    .skew.sk-left { background: rgba(39,39,39,0.94); float: left; padding: 0 6%; color:#ebebeb;}  
   
}


/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .mega-wrap { margin-left:-750px}
    h1 {font-size: 58px}
    .contacts .col-sm-7 {padding-right:90px}
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .mega-wrap { margin-left:-850px}
    
}


@media (max-height: 1045px) {
    .mega-wrap { background: url('../img/zevs.png') no-repeat center 80px;}
}