#bgBox{
  z-index: -100;
  position: fixed;
  width: 100%;
  height: 100vh;
  background-size: cover;
  background-color: #9f9f9f;
  background-blend-mode: overlay;
  background-image: url('../img/bg-header.jpg');
  background-position: bottom;
}
body {
    background-color: #9f9f9f;
    /*background-image: url('../img/bg-header.jpg');*/
    background-blend-mode: overlay;
    background-size: cover;
    background-position: bottom;
    background-attachment: fixed;
    overflow-x: hidden;
}

section{
  background-image: url('../img/bg-section.png');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: auto 100%;
  padding: 155px 0;
  background-color: rgba(255, 255, 255, 0.85);
}
p{
  font-size: 16px;
  color: #666;
  line-height: 1.55em;
  margin-bottom: 22px;
  max-width: 730px;
}
h1,h2,h3,h4{
  text-transform: uppercase;
  font-weight: 700;
}
h2{
    font-size: 2.5em;
    font-weight: 700;
    line-height: 30px;
    margin-bottom: 29px;
    color: #35353d;
}
.hrTitle{
  width: 155px;
  color: #e2b377;
  border:none;
  border-top: 6px solid #e2b377;
}
.split{
  height: 350px;
  box-shadow: 0 10px 26px 0 rgba(0,0,0,0.2) inset;
}

/* NAVIGATION */ 
nav{
  z-index: 999;
  position: fixed;
  top: 0;
  left: 0;
  background: #fff !important;
  background-color: #fff !important;
}
nav ul a {
    color: #111;
    text-transform: uppercase;
}
nav .brand-logo{
  text-transform: uppercase;
  color: #666;
  font-weight: 300;
  letter-spacing: .25em;
  font-size: 22px;
}
.logoNav{
    max-height: 32px;
    margin-bottom: -6px;
}
.button-collapse{
  color:#777;
  padding-top: 8px;
  left: -10px;
}
#logoSmartNav {
    max-width: 150px;
    left: 20px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 32px;
    margin-bottom: 32px;
}
.side-nav li > a {
    text-align: center;
}
/* FIN NAVIGATION */ 

/*Annim*/
h1.logo-starboard {
      color: white;
    font-weight: 100;
    letter-spacing: 10.2px;
    font-size: 40px;
    margin-top: 6px;
    margin-bottom: 6px;
}
.steps {
    width: 120px;
    height: 120px;
    background-image: url("../img/starboard-sprite.png");
    margin-left: 91px;
    margin-right: auto;
    cursor: pointer;
    animation: playZ 1.4s steps(34);
    animation-iteration-count:1;
    animation-delay: 2s;
    -webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */
    animation-fill-mode: forwards;

}
@keyframes playZ {
   from { background-position: 0px; }
     to { background-position: -4551px; }
}

/* HEADER */
.moreAboutUsBtn{
  font-size: 22px;
  color: #fff;
  text-transform: uppercase;
  padding: 6px 11px;
  border:1px solid #fff;
  margin-bottom: 64px;
}
header {
    min-height: 100vh;
    padding-top: 28vh;
}
header h2 {
  color: #fff;
  margin-top: 0;
  margin-bottom: 0;
  line-height: 1.1em;
  font-size: 32px;
  max-width: 760px;
}
header .logo{
  max-width: 300px;
  margin-bottom: 32px;
}
header p{
  color: #fff;
  margin-top: 0px;
  margin-bottom: 67px;
}
/* FIN HEADER */  
svg path {
   fill: #e2b376;
}
#navBurger path{
  stroke: #fff;
  stroke-width: 10px;
}
p.textBaseline.text-saumon {
    color: #e2b375;
}
/* Charter & shiping */
.textBaseline{
  margin-left: auto;
  margin-right: auto;
}
.icoBox{
  margin-right: auto;
  margin-left: auto;
}
/* fin Charter & shiping */

/* PROCESS */
#titleProcess{
  line-height: 1.1;
}
/* FIN PROCESS */ 
/* MAP */
#whereweare{
  padding:0;
}
#map{
  width: 100%;
  height: 100vh;
}

.gm-style-pbt {
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
}
.labelMap{
    z-index: 888;
    position: absolute;
    left: 18px;
    margin-top: 18px;
    font-size: 18px;
}
/* FIN MAP */ 

/* FOOTER */
footer h2{
  color: #fff;
}
footer p{
  color: #fff;
}
.footerTop{
  padding: 55px;
}
.page-footer{
  background: #222;
}
.footer-copyright{
  background-color: #1c1c1c !important;
}
.footer-copyright p{
  color: #555;
  text-align: center;
}
.footer-copyright a{
  color: #777;
}
footer p{
    max-width: 360px;
}
/* FIN FOOTER */ 
@media(max-width: 1600px){ /*1440x900 */
 header{
  padding-top: 30vh;
  padding-bottom: 64px;
 }
}
@media(max-width: 1440px){ /*1440x900 */
    nav .nav-wrapper{
      width: 100%;
    }
}

@media(max-width: 1280px){ /* 1280x800 -- 1280x720 */ 
  nav .nav-wrapper{
    width: 100%;
  }
  nav .brand-logo {
    margin-left: 20px;
  }
  header{
    padding-top: 22vh;
    padding-top: 64px;
  }
}

@media(max-width: 1023px){
  #bgBox{
    background-image:url('../img/bgsmartphone.jpg');
    background-position: center bottom;
  }
  .split {
    height: 233px;
  }
}

@media(max-width: 1024px){ /* 1024x768 */ 
  /* NO CSS RULES */ 
}

@media(max-width: 992px){
  #logo-container{
    display: none;
  }
  nav{
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none;
  }
}

@media(max-width: 768px){ /*768x1024 */
  header{
    padding-top: 199px;
  }
}

@media(max-width: 480px){ /* 480x854px */
  header{
    padding-top: 12vh;
  }
  section{
    padding: 76px 0;
  }
}

@media(max-width: 360px){ /* 360x640 */ 
  header{
    padding-bottom: 32px;
  }
}

@media(max-width: 320px){ /* 320x480px */
  .nav .brand-logo{
    font-size: 18px;
  }
  .logoNav{
    max-width: 26px;
    margin-bottom: -3px;
  }
  header{
    padding-top: 70px;
  }
  .steps{
    margin-left: auto;
    margin-right: auto;
  }
  h1.logo-starboard{
    font-size: 30px;
  }
}

/* POPUP COOCKIS */

#popupLegal{
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #111;
  padding: 8px 0;
}
.popupContent{
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
#popupLegal p{
  color: #fff;
  display: inline-block;
}
#closePopup {
  margin-left: 12px;
  display: inline-block;
  background: transparent;
  border: 1px solid #fff;
  color: #fff;
  padding: 6px 18px;
  transition: all .16s ease-in-out;
}#closePopup:hover{
  background: #fff;
  color: #111;
}