@import url('https://fonts.googleapis.com/css?family=Raleway:100,300,400,600&display=swap&subset=latin-ext');

*, *::after, *::before {margin:0;padding: 0;-webkit-box-sizing: inherit;box-sizing: inherit;}

html{font-size:62.5%;}

body {
    font-family: 'Raleway', sans-serif;
    font-weight: 200;
    line-height: 1.6;
    color: #282828;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    font-size:1.6rem;
    letter-spacing: 0.2rem;
}

.container {
    position: relative;
    width: 100%;
    max-width: 122rem;
    margin: 0 auto;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

.row{
  display:block;
  float:left;
  width:100%;
  position:relative;
  }

.container::after, .row::after{
  content: "";
  display: table;
  clear: both;
}

.clearfix {
clear: both;
display: block;
width: 100%;
}

input, textarea{
  font-size:inherit;
  font-weight:inherit;
  font-family: inherit;
}

/*----------BREADCRUMBS---------*/
.bread-crumbs ul{list-style:none;padding-left: 0;}
.bread-crumbs ul li{display:inline-block;font-size: 1.4rem;}
.bread-crumbs ul li a{color:#363636;display: inline-block;}
.bread-crumbs ul li a:hover{color:#f47321;}
.bread-crumbs ul li:after{content:"|";padding-left: 1rem;padding-right: 1rem;}
.bread-crumbs ul li:last-child:after{content:"";padding-left: 0;padding-right: 0;}
/*---------------END BREADCRUMBS----------*/
/*---------------FLEX----------*/
.flex-row-center{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-orient:horizontal;
  -webkit-box-direction:normal;
      -ms-flex-flow:row wrap;
          flex-flow:row wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.flex-row-center-stretch{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-orient:horizontal;
  -webkit-box-direction:normal;
      -ms-flex-flow:row wrap;
          flex-flow:row wrap;
  -webkit-box-pack: stretch;
      -ms-flex-pack: stretch;
          justify-content: stretch;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.flex-row-sb{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-orient:horizontal;
  -webkit-box-direction:normal;
      -ms-flex-flow:row wrap;
          flex-flow:row wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.flex-row-sb-fe{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-orient:horizontal;
  -webkit-box-direction:normal;
      -ms-flex-flow:row wrap;
          flex-flow:row wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}
.flex-row-fs{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-orient:horizontal;
  -webkit-box-direction:normal;
      -ms-flex-flow:row wrap;
          flex-flow:row wrap;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.flex-column-fe{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-orient:vertical;
  -webkit-box-direction:normal;
      -ms-flex-flow:column wrap;
          flex-flow:column wrap;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}
/*---------------END FLEX----------*/
/*--------------COOKIES-------------*/
.cookie-container {
  background: #27ae60;
  bottom: 0;
  display: block;
  padding: 4rem 3rem;
  position: fixed;
  width: 100%;
  z-index: 9999;
  color:#fff;
  max-width: 40rem;
  border-radius: .6rem;
  border-bottom-left-radius: 0;
}
.cookie-container h4 {font-weight: 700;text-transform: uppercase; font-size: 1.8rem; color: #fff;margin-bottom: 1.5rem;}
.cookie-container p{margin: 0;color: #fff; font-size:1.4rem;}
.agree {
  background-color: #fff;
  color: #27ae60;
  border-radius: .6rem;
  font-size: 1.4rem;
  padding: 1rem 2rem;
  display: inline-block;
  margin-top: 1.5rem;
  font-weight: 700;
  border:0.1rem solid #fff;
}
.agree:hover{border-color: #fff;color: #fff; background: transparent;}
/*--------------END COOKIES-------------*/

h1, h2, h3, h4, h5, h6{
  color:#003648;
  font-weight:600;
  text-transform: uppercase;
}

img{
  max-width: 100%; border:0;
}

a {
  color: #003648;
  text-decoration: none;
  -webkit-transition:all 0.3s ease;
  transition:all 0.3s ease;
  font-weight:600;
  font-size:1.6rem;
  line-height:2.4rem;
  outline: none;
}
button{ outline:none;}
input,
textarea,
button,
select,
a {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}
p,li{
  font-size:1.6rem;
  line-height:2.4rem;
  font-weight:100;
}
p,li{
  color: #464646;
  font-weight:300;
}

a:hover{
  color: #464646;
  text-decoration:none;
}
ul{
  margin:0;
  padding:0 0 0 2rem;
}

h1{
  font-size:2.8rem;
}


/*ELEMENTS*/

.list{
  list-style: none;
  padding:0;
}

.none{
  display:none;
}

.bck-img{
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.green-overlay{
  background-color: rgba(0, 54, 72, 0.64);
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
}

.to-section{
  position:absolute;
  bottom:3rem;
  left:50%;
  -webkit-transform:translateX(-50%);
          transform:translateX(-50%);
  -webkit-animation-name: arrow-pulse;
  -webkit-animation-duration: 1.5s;
  animation-name: arrow-pulse;
  animation-duration: 1.5s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

.to-section:hover{
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}

@-webkit-keyframes arrow-pulse {
  0%   {bottom:3rem;}
  50%  {bottom:1rem;}
  100% {bottom:3rem;}
}

@keyframes arrow-pulse {
  0%   {bottom:3rem;}
  50%  {bottom:1rem;}
  100% {bottom:3rem;}
}

.txt{
  margin:5rem 0;
  width:80%;
  margin:0 auto;
  padding:15rem 0;
}

.txt h1{
  padding:0 0 3rem 3rem;
}

.col-40{
  width:40%;
}

.col-60{
  width:60%;
}

.relative{
  position:relative
}

.absolute-img{
  position: absolute;
  top:-17rem;
  left:0;
  width:100%;
  height:50rem;
}

.green-section{
  background: #003648 url('../images/logo-bck.png') no-repeat center right 22%;
  background-size:60rem;
}

.green-section .txt,
.white-section .txt,
.green-section-paragraph .txt{
  width:76.8rem;
}

.green-section h1,
.green-section h2,
.green-section h3,
.green-section h4,
.green-section h5,
.green-section h6,
.green-section p{
  color:#fff;
}

.white-section h1,
.white-section h2,
.white-section h3,
.white-section h4,
.white-section h5,
.white-section h6,
.white-section p{
  text-align:center;
}

.white-section .txt h1{
  padding-left:0;
}

.overflow-hidden{
  overflow: hidden;
}


/*HEADER*/

.header{
  position: fixed;
  z-index:2;
  background-color: transparent;
  left:0;
  top:0;
  -webkit-transition:all 0.3s ease;
  transition:all 0.3s ease;
}

#toggle{
  display:none;
  border:none;
  cursor: pointer;
  background-color: transparent;
  padding:0 1rem;
  -webkit-transition:all 0.3s ease;
  transition:all 0.3s ease;
}

#toggle.flip{
  -webkit-transform: scaleX(-1);
          transform: scaleX(-1);
}

#toggle img{
  width:4rem;
}

.header-logo{
  display:none;
  width:8rem;
  -webkit-transition:all 0.3s ease;
  transition:all 0.3s ease;
}

.main-menu li {
  display:inline-block;
  padding:2rem 3rem;
}

.main-menu a{
  display:block;
  text-align:center;
  text-transform:uppercase;
  color:#fff;
  font-size:1.8rem;
}

/*header sticky*/

.header.sticky{
  background-color: #003648;
}

.header.sticky .flex-row-center{
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.header.sticky .header-logo{
  display:block;
}

.header.sticky .main-menu a{
  font-size:1.6rem;
}


/*HERO*/

.hero{
  height:100vh;
  position:relative;
}


/*REFERENCES*/

.ship-slider{
  margin:7rem 0;
  position:relative;
}

.ship-slider .slide {
    text-align:center;
}

.ship-slider .slide span{
  font-weight:400;
  margin-bottom: 1rem;
  display:block;
}

.ship-slider .slide p{
  color:#003648;
  font-weight:600;
  width: 90%;
  margin: 0 auto;
}

.ship-slider .slick-arrow{
  background-size: 2rem;
  background-position: center;
  background-repeat: no-repeat;
  width:4rem;
  height:4rem;
  position: absolute;
  top:50%;
  -webkit-transform:translateY(-50%);
          transform:translateY(-50%);
  border:none;
  font-size:0;
  background-color:transparent;
  cursor: pointer;
}

.ship-slider .slick-prev.slick-arrow{
  background-image: url('../images/svg/slider-arrow-left.svg');
  left:2rem;
}

.ship-slider .slick-next.slick-arrow{
  background-image: url('../images/svg/slider-arrow-right.svg');
  right:2rem;
}

.wave-border{
  background: url('../images/svg/waves.svg') repeat-x;
  position:relative;
  background-position: 0 bottom;
  -webkit-animation-name: waves;
  -webkit-animation-duration:15s;
  animation-name: waves;
  animation-duration: 15s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

@-webkit-keyframes waves {
  0%   {background-position: 0 bottom;}
  50% {background-position: 80% bottom;}
  100% {background-position: 0 bottom;}
}

@keyframes waves {
  0%   {background-position: 0 bottom;}
  50% {background-position: 80% bottom;}
  100% {background-position: 0 bottom;}
}

.ship-img{
  position: absolute;
  right:-10%;
  -webkit-transform:rotate(0deg);
  transform:rotate(0deg);
  bottom: 3.8rem;
  z-index: -1;
  -webkit-animation-name: ship;
  -webkit-animation-duration:15s;
  animation-name: ship;
  animation-duration: 15s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

@-webkit-keyframes ship {
  0%   {-webkit-transform: rotate(0deg);transform: rotate(0deg); bottom:3.8rem;right:-10%;}
  50% {-webkit-transform: rotate(5deg);transform: rotate(5deg);}
  100% {-webkit-transform: rotate(-1deg);transform: rotate(-1deg); bottom:3.8rem;right:110%}
}

@keyframes ship {
  0%   {-webkit-transform: rotate(0deg);transform: rotate(0deg); bottom:3.8rem;right:-10%;}
  50% {-webkit-transform: rotate(5deg);transform: rotate(5deg);}
  100% {-webkit-transform: rotate(-1deg);transform: rotate(-1deg); bottom:3.8rem;right:110%}
}


/*paragraph section*/

.green-section-paragraph{
  background-color: #003648;
}

.green-section-paragraph p{
  color:#fff;
  text-align: center;
}

.green-section-paragraph .txt{
  padding:4rem 0;
}


.slider-gallery .slide a,
.services-gallery .slide a{
  display:block;
  width:100%;
  height:30rem;
}

/*FOOTER*/

.footer{
  background-color: #003648;
  padding:2rem 1rem;
}

.footer h1{
  color:#fff;
}

.footer-logo,
.footer-list{
  margin-top:2rem;
}

.footer-list{
  border-left:1px solid rgba(255,255,255,0.2);
  padding-left:3rem;
  margin-left:3rem;
}

.footer-list li,
.footer-list a{
  color:#fff;
  font-weight:400;
  font-size:1.3rem;
}

.footer-logo{
  width:14rem;
}

.copy{
  color:#fff;
  font-size: 1rem;
  font-weight: 400;
  display: inline-block;
  margin-top: 1rem;
}


/*--------------RESPONSIVE-------------*/
@media only screen and (max-width: 105em){/*1680px*/ }
@media only screen and (max-width: 100em){/*1600px*/ }
@media only screen and (max-width: 90em) {/*1440px*/ }
@media only screen and (max-width: 85.375em){/*1366px*/}
@media only screen and (max-width: 85em){/*1360px*/ }
@media only screen and (max-width: 80em){/*1280px*/ }
@media only screen and (max-width: 76.25em){/*1220px*/}
@media only screen and (max-width: 67.5em) { /*1080px*/}
@media only screen and (max-width: 64em) {/*1024px*/}
@media only screen and (max-width: 61.25em){/*980px*/}
@media only screen and (max-width: 56.25em) {/*900px*/ }
@media only screen and (max-width: 50em){/*800px*/ }
@media only screen and (max-width: 48em), only screen and (hover:none){}
@media only screen and (max-width: 48em){ /*768px*/ }
@media only screen and (max-width: 42.5em){ /*680px*/ }
@media only screen and (max-width: 40em){/*640px*/ }
@media only screen and (max-width: 38.75em){/*620px*/ }
@media only screen and (max-width: 37.5em){/*600px*/ }
@media only screen and (max-width: 30em){ /*480px*/ }
@media only screen and (max-width: 22.5em){/*360px*/ }
/*--------------END RESPONSIVE-------------*/


@media only screen and (max-width: 90em) {/*1440px*/
  .col-40,
  .col-60{
    width:50%;
  }
  .absolute-img {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 50rem;
  }
}

@media only screen and (max-width: 76.25em){/*1220px*/
  .slider-gallery .slide a,
  .services-gallery .slide a{
    height:20rem;
  }
}

@media only screen and (max-width: 64em) {/*1024px*/
  .col-40,
  .col-60{
    width:100%;
  }
  .col-60{
    -webkit-box-ordinal-group:0;
        -ms-flex-order:-1;
            order:-1;
  }
  .txt{
    padding: 8rem 0;
  }
  #references .txt {
    padding: 6rem 0 12rem 0;
  }
}

@media only screen and (max-width: 61.25em){/*980px*/
  .txt{
    width:90%;
  }
  .txt h1 {
    padding: 0 0 1rem 3rem;
  }
  .footer .flex-column-fe{
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .footer-contact{
    width:100%;
    text-align:center;
  }
  .footer-logo {
    width: 14rem;
    display: block;
    margin: 0 auto;
  }
  .footer-list {
    border-left: none;
    padding-left: 0;
    margin-left: 0;
    width: 100%;
  }
  .footer-copy{
    width:100%;
    margin-top:2rem;
  }
  .main-menu{
    width: 100%;
    left: -100%;
    top: 78px;
    z-index: 2;
    position: absolute;
    background-color:#003648;
    -webkit-transition:all 0.5s ease;
    transition:all 0.5s ease;
  }
  .main-menu.open{
    left:0;
  }
  .main-menu li{
    width:100%;
    border-top:0.1rem solid rgba(255, 255, 255, 0.2);
    padding:0;
  }
  .header.sticky .main-menu a {
    font-size: 1.4rem;
    padding: 1.5rem 0;
  }
  .header.sticky .main-menu a:hover{
    color:#003648;
    background-color: #fff;
  }
  #toggle{
    display:block;
  }
  .wave-border,
  .ship-img{
    -webkit-animation-duration: 10s;
    animation-duration: 10s;
  }
  @-webkit-keyframes waves {
    0%   {background-position: 0 bottom;}
    50% {background-position: 50% bottom;}
    100% {background-position: 0% bottom;}
  }

  @keyframes waves {
    0%   {background-position: 0 bottom;}
    50% {background-position: 50% bottom;}
    100% {background-position: 0% bottom;}
  }
}

@media only screen and (max-width: 48em){ /*768px*/
  .green-section .txt,
  .white-section .txt,
  .green-section-paragraph .txt {
    width: 90%;
  }
}

@media only screen and (max-width: 40em){/*640px*/
  .txt {
    padding: 4rem 0;
  }
  .absolute-img{
    height:30rem;
  }
  .ship-slider .slick-next.slick-arrow{
    right:-2rem;
  }
  .ship-slider .slick-prev.slick-arrow{
    left:-2rem;
  }
}

@media only screen and (max-width: 30em){ /*480px*/
  h1 {
    font-size: 2.5rem;
  }
  .footer-logo {
    width: 12rem;
  }
  .ship-slider .slick-arrow{
    top:0;
  }
  .wave-border,
  .ship-img{
    -webkit-animation-duration: 5s;
    animation-duration: 5s;
  }
  @-webkit-keyframes waves {
    0%   {background-position: 0 bottom;}
    50% {background-position: 20% bottom;}
    100% {background-position: 0% bottom;}
  }

  @keyframes waves {
    0%   {background-position: 0 bottom;}
    50% {background-position: 20% bottom;}
    100% {background-position: 0% bottom;}
  }
}