@font-face {
  font-family: "Canela";
  src: url("../fonts/canela-regular.ttf");
}

@font-face {
  font-family: "Hurme";
  src: url("../fonts/hurme.ttf");
}

:root {
  --primary-black: #1c1c1c;
  /*--primary-orange: #aa8768;*/
  --text-black: #222222;
  --background-white: #f4f4f4;
  --pure-black: #000000;
  --pure-white: #ffffff;
  --title-font: "Canela", serif;
  --paragraph-font: "Hurme", sans-serif;
}

/* Reset */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: var(--paragraph-font);
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
}

section {
  width: 100%;
}

/* Classes */
.grid-template {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(12, 1fr);
}

.btn-menu {
  font-size: 28px;
  color: var(--pure-white);
}

.mark {
  color: var(--primary-orange);
  text-transform: uppercase;
  margin-bottom: 20px;
  margin-top: 20px;
}

.text-block {
  font-size: 18px;
  margin-top: 35px;
  line-height: 1.7;
  color: var(--primary-black);
}
.text-block-cta{
  margin-bottom: 35px;
}
.white{
  color: var(--pure-white);
}

.full-width {
  width: 100%;
}

.full-height {
  height: 100%;
}

/* Section: SHOWCASE */
.logo{
  height: 130px;
  width: auto;
}
#showcase {
  height: 100vh;
  background: url("../img/split_noc_panorama.webp") no-repeat center center/cover;
}

#showcase::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: var(--pure-black);
  opacity: 0.3;
  z-index: 1;
}

#showcase .header,
#showcase .content {
  z-index: 2;
}

#showcase .header {
  grid-column: 1 / span 12;
  grid-row: 1 / span 2;
}

#showcase .header .helper {
  width: 80%;
  height: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#showcase .content {
  grid-column: 3 / span 8;
  grid-row: 3 / span 10;

  display: grid;
  grid-template-rows: repeat(3, 1fr);
}

#showcase .content .text-wrapper {
  grid-row: 2;

  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  color: var(--pure-white);
}

#showcase .content .text-wrapper .helper {
  width: 40%;
  margin-bottom: 250px;
}

#showcase .content .text-wrapper .helper p:first-child {
  font-size: 20px;
  color: var(--primary-orange);
}

#showcase .content .text-wrapper .helper p:last-child {
  color: var(--pure-white);
}

#showcase .content .text-wrapper .helper h1 {
  font-size: 72px;
  margin-top: 40px;
  margin-bottom: 20px;
  font-family: var(--title-font);
}

#showcase .content .table-wrapper {
  grid-row: 3;

  display: flex;
  flex-direction: row;
  align-items: flex-end;
  padding-bottom: 15px;
}

#showcase .content .table-wrapper .helper {
  width: 100%;
  display: flex;
  flex-direction: row;
  background: var(--primary-black);
  padding: 0 20px;
} 

#showcase .content .table-wrapper .helper .column {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
  padding: 20px 15px;
}

#showcase .content .table-wrapper .helper .column .attribute {
  color: var(--pure-white);
  text-transform: uppercase;
  font-size: 14px;
}

#showcase .content .table-wrapper .helper .column .value {
  color: var(--pure-white);
  font-size: 20px;
}
#showcase .table {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  padding-bottom: 15px;
}

#showcase .table .helper {
  width: 1156px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  background: var(--primary-black);
  padding: 0 20px;
} 

#showcase .table .helper .column {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
  padding: 20px 15px;
}

#showcase .table .helper .column .attribute {
  color: var(--primary-orange);
  text-transform: uppercase;
  font-size: 14px;
}

#showcase .table .helper .column .value {
  color: var(--pure-white);
  font-size: 20px;
}

#showcase .number {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: -50px;
}

#showcase .number p {
  font-family: var(--title-font);
  font-stretch: normal;
  font-style: normal;
  letter-spacing: normal;
  color: var(--primary-orange);
  font-size: calc(160px + 6.25vw);
  line-height: normal;
  font-weight: 500;
}



/* Section: DISCOVER */
#discover .upper {
  width: 100%;
  height: 100vh;
  background: url("../img/discover.jpg") no-repeat center center/cover;
}

#discover .upper .text-wrapper {
  grid-column: 5 / span 4;
  grid-row-start: 5;

  text-align: center;
}

#discover .upper .text-wrapper h2 {
  font-size: 56px;
  margin: 20px 0;
  font-family: var(--title-font);
  color: var(--pure-white);
}

#discover .upper .text-wrapper .text-block {
  margin: 20px 0;
  color: var(--pure-white);
}

#discover .lower {
  width: 100%;
  height: 1200px;
  background: var(--primary-black);
}

#discover .lower .image-wrapper {
  grid-column: 3 / span 8;
  grid-row: 2 / span 7;
}

#discover .lower .image-wrapper img {
  width: 100%;
}

#discover .lower .text-wrapper {
  grid-column: 4 / span 6;
  grid-row-start: 11;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  line-height: 1.7;
}

#discover .lower .text-wrapper h2 {
  font-size: 36px;
  font-family: var(--title-font);
  color: var(--primary-orange);
}

#discover .lower .text-wrapper p {
  font-size: 18px;
  padding: 10px 0;
  color: var(--pure-white);
}

#discover .boat-showcase {
  width: 100%;
  height: 100vh;
  background: url("../img/boat-full.jpg") no-repeat center center/cover;
}

/* Section: DETAILS */
#details {
  width: 100%;
  background: var(--pure-white);
}

#details .content,
#details .slider {
  width: 100%;
}

#details .content:first-child {
  height: 1200px;
}

#details .content:first-child .image-wrapper:first-child {
  grid-column: 4 / span 2;
  grid-row: 2 / span 4;
}

#details .content:first-child .text-wrapper:nth-child(2) {
  grid-column: 6 / span 4;
  grid-row: 3 / span 3;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding-left: 150px;
}

#details .content:first-child .image-wrapper:nth-child(3) {
  grid-column: 6 / span 3;
  grid-row: 7 / span 4;
}

#details .content:first-child .text-wrapper:last-child {
  grid-column: 6 / span 3;
  grid-row: 11;

  padding-top: 30px;
}

#details .content:first-child .text-wrapper:nth-child(2) h2 {
  font-size: 50px;
  font-family: var(--title-font);
}

#details .content:first-child .text-wrapper:nth-child(4) p {
  line-height: 1.7;
}

#details .gallery {
  height: 1200px;
}

#details .gallery .helper {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#details .gallery .helper button {
  height: 80px;
  width: 80px;
  border-radius: 50%;
  outline: none;
  border: none;
  font-size: 30px;
  color: var(--pure-white);
  background: var(--primary-orange);
  cursor: pointer;
}

#details .gallery .helper:first-child {
  grid-column: 2;
  grid-row: 6;
}

#details .gallery .helper:last-child {
  grid-column: 11;
  grid-row: 6;
}

#details .gallery .current-image {
  grid-column: 3 / span 8;
  grid-row: 3 / span 8;
}

.active {
  display: block;
  width: 100%;
}

.inactive {
  display: none;
}


#details .content:last-child {
  width: 100%;
  height: 1200px;
}

#details .content:last-child .text-wrapper {
  grid-column: 3 / span 3;
  grid-row: 4 / span 3;
}

#details .content:last-child .text-wrapper h2 {
  margin: 10px 0;
  font-size: 40px;
  font-family: var(--title-font);
}

#details .content:last-child .image-wrapper img {
  width: 100%;
}

#details .content:last-child .image-wrapper:nth-child(2) {
  grid-column: 7 / span 3;
  grid-row: 2 / span 6;
}

#details .content:last-child .image-wrapper:nth-child(3) {
  grid-column: 3 / span 3;
  grid-row: 7 / span  3;
}

/* Section: PERFORMANCE */
#performance {
  width: 100%;
  height: 100vh;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

#performance .image-wrapper {
  grid-column: 1;
  width: 100%;
}

#performance .image-wrapper img {
  width: 100%;
  height: 100%;
}

#performance .text-wrapper {
  grid-column: 2;

  display: flex;
  width: 100%;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

#performance .text-wrapper .helper {
  width: 50%;
  margin-left: 50px;
}

#performance .text-wrapper .helper h2 {
  margin: 10px 0;
  font-size: 50px;
  font-family: var(--title-font);
}

#performance .text-wrapper .helper p {
  line-height: 1.7;
}

/* Section: CUSTOM */
#custom {
  width: 100%;
}

#custom > .text-wrapper {
  width: 100%;
  height: 600px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

#custom > .text-wrapper .helper {
  width: 50%;
  text-align: center;
}

#custom > .text-wrapper .helper h1 {
  color: var(--primary-orange);
  font-size: 150px;
  font-family: var(--title-font);
}

#custom .content {
  width: 100%;
  height: 1200px;
  padding-top: 80px;
}

#custom .content .image-wrapper img {
  width: 100%;
}

#custom .content .image-wrapper:first-child {
  grid-column: 3 / span 3;
  grid-row: 1 / 4;
}

#custom .content .text-wrapper {
  grid-column: 7 / span 3;
  grid-row: 3 / span 2;
}

#custom .content .text-wrapper h2 {
  margin: 10px 0;
  font-size: 40px;
  font-family: var(--title-font);
}

#custom .content .image-wrapper:nth-child(3) {
  grid-column: 7 / span 3;
  grid-row: 7 / span 3;
}

/* Section: ASPECT */
#aspect {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 80px 0;
  background: #ccc;
  text-align: center;
  color: var(--pure-black);
}

#aspect .text-wrapper h2 {
  margin: 40px 0;
  font-size: 40px;
  font-family: var(--title-font);
}

/* Section: SPECIFICATION */
#specification {
  width: 100%;
  height: 1300px;
  padding-top: 120px;
  background: var(--primary-black);
  color: var(--pure-white);
}

#specification > .text-wrapper {
  width: 100%;
  text-align: center;
  padding-bottom: 40px;
}

#specification > .text-wrapper h2 {
  margin-bottom: 20px;
  font-size: 50px;
  font-family: var(--title-font);
  color: var(--primary-orange);
}

#specification .content {
  width: 100%;
  height: 100%;
}

#specification .content .text-wrapper {
  width: 100%;
  display: flex;
  align-items: center;
}

#specification .content .text-wrapper:first-child {
  grid-column: 2 / span 3;
  justify-content: flex-end;
  text-align: right;
}

#specification .content .image-wrapper {
  grid-column: 5 / span 4;
  display: flex;
  justify-content: center;
}

#specification .content .text-wrapper:nth-child(3) {
  grid-column: 9 / span 3;
  justify-content: flex-start;
  text-align: left;
}

#specification .content .text-wrapper ul {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}
.list{
  display: flex;
  flex-direction: row;
  justify-content: space-a;
}
#specification .content .text-wrapper ul li {
  margin: 15px 0;
  font-size: 20px;
}

#specification .content .text-wrapper ul li .attribute {
  color: var(--primary-orange);
}

/* FOOTER */
#footer {
  width: 100%;
  height: 400px;
  background: var(--primary-black);
  color: var(--pure-white);
}

#footer .content {
  height: 100%;
}

#footer .content > .helper {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding-top: 50px;
}

#footer .content .helper:first-child {
  grid-column: 3 / span 2;
}

#footer .content .helper:nth-child(2) {
  grid-column: 5 / span 2;
}

#footer .content .helper:nth-child(3) {
  grid-column: 7 / span 2;
  position: relative; 
}

#footer .content .helper:last-child {
  grid-column: 9 / span 2;
}

#footer .content > .helper h2 {
  margin: 10px 0;
  font-size: 30px;
  font-family: var(--title-font);
}

#footer .content > .helper:nth-child(3) ul {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  flex-direction: row;
}

#footer .content > .helper ul li {
  font-size: 25px;
  margin: 0 10px;
}

#footer .content > .helper ul li a {
  color: var(--pure-white);
  font-family: var(--title-font);
}

#footer .content > .helper ul li a:hover {
  color: var(--primary-orange);
}

/* Section: LEGAL SHOWCASE */
#legal-showcase {
  height: 70vh;
  background: var(--primary-black);
}

#legal-showcase .header {
  grid-column: 1 / span 12;
  grid-row: 1 / span 2;
}

#legal-showcase .header .helper {
  width: 80%;
  height: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#legal-showcase .content {
  grid-column: 3 / span 8;
  grid-row: 3 / span 10;

  display: flex;
  flex-direction: row;
  align-items: center;
}

#legal-showcase .content .text-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ccc;
  color: var(--pure-white);
}

#legal-showcase .content .text-wrapper .helper {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

#legal-showcase .content .text-wrapper .helper p:first-child {
  font-size: 20px;
  color: var(--primary-orange);
  text-transform: uppercase;
}

#legal-showcase .content .text-wrapper .helper p:last-child {
  color: var(--pure-white);
}

#legal-showcase .content .text-wrapper .helper h1 {
  font-size: 72px;
  margin-top: 40px;
  margin-bottom: 20px;
  font-family: var(--title-font);
}

#legal-showcase .content .text-wrapper .tabs {
  margin-top: 100px;
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
}

#legal-showcase .content .text-wrapper .tabs li {
  text-transform: uppercase;
  margin-right: 80px;
  padding: 10px 0;
  border-bottom: 4px solid transparent;
  cursor: pointer;
}

#legal-showcase .content .text-wrapper .tabs li:hover,
#legal-showcase .content .text-wrapper .tabs li.current-tab {
  color: var(--primary-orange);
  border-color: var(--primary-orange);
}

/* Section: TAB */
#tab {
  width: 100%;
}

#tab > div {
  grid-column: 3 / span 8;
  grid-row: 1 / span 12;

  display: none;
  padding-top: 100px;
  padding-bottom: 20px;
}

#tab > div.active-tab {
  display: block;
}

#tab .privacy > .text-wrapper .helper .text-wrapper .text-block {
  margin: 20px 0;
}

#tab .privacy > .text-wrapper .helper:first-child {
  width: 60%;
}

#tab .privacy > .text-wrapper .helper:first-child h2 {
  font-size: 48px;
  line-height: 1.6;
  font-family: var(--title-font);
}

#tab .privacy > .text-wrapper .helper:first-child p {
  margin-top: 20px;
  margin-bottom: 80px;
}

#tab .privacy > .text-wrapper .helper:last-child .text-wrapper h3 {
  font-size: 36px;
}

/* MOBILE */
@media only screen and (max-width: 600px) {
  .logo{
     margin-top: 20px;
  }
  #showcase .content {
    grid-column: 1 / span 12;
  }

  #showcase .content .text-wrapper {
    padding: 0 20px;
  }

  #showcase .content .text-wrapper .helper {
    width: 100%;
    margin-bottom: 20px;
    display: column!important;
    flex-direction: column!important;
    
  }

  #showcase .content .text-wrapper .helper h1 {
    font-size: 52px;
  }

  #discover .upper .text-wrapper {
    grid-column: 1 / span 12;
    padding: 80px 20px;
  }

  #discover .upper .text-wrapper h2 {
    font-size: 48px;
  }
  
  #discover .upper .text-wrapper .text-block {
    font-size: 16px;
  }

  #discover .lower {
    height: 900px;
  }

  #discover .lower .image-wrapper {
    grid-column: 2 / span 10;
    grid-row: 2 / span 7;
  }

  #discover .lower .text-wrapper {
    grid-column: 2 / span 10;
    grid-row-start: 8;
  }

  #details .content:first-child {
    grid-template-rows: auto;
    height: 1300px;
    padding: 20px 0;
  }

  #details .content:first-child .image-wrapper:first-child {
    grid-column: 2 / span 10;
    grid-row: 1 / span 3;
  }
  
  #details .content:first-child .text-wrapper:nth-child(2) {
    grid-column: 2 / span 10;
    grid-row: 4 / span 3;
    padding-left: 0;
  }
  
  #details .content:first-child .image-wrapper:nth-child(3) {
    grid-column: 2 / span 10;
    grid-row: 7 / span 3;
  }
  
  #details .content:first-child .image-wrapper:nth-child(3) img {
    width: 100%;
    height: auto;
    margin-top: 40px;
  }

  #details .content:first-child .text-wrapper:last-child {
    grid-column: 2 / span 10;
    grid-row: 10 / span 3;
  
    padding-top: 0px;
  }

  #details .content:last-child {
    grid-template-rows: auto;
    height: 1200px;
    padding: 20px 0;
  }
  
  #details .content:last-child .text-wrapper h2 {
    margin: 10px 0;
    font-size: 40px;
    font-family: var(--title-font);
  }

  #details .content:last-child .text-wrapper,
  #details .content:last-child .image-wrapper:nth-child(2),
  #details .content:last-child .image-wrapper:nth-child(3) {
    grid-column: 2 / span 10;
    grid-row-start: auto;
  }

  #details .gallery {
    display: none;
  }

  #performance {
    grid-template-rows: repeat(2, 1fr);
  }

  #performance .image-wrapper {
    grid-column: 1 / span 2;
    grid-row: 1;
  }
  #performance .text-wrapper {
    grid-column: 1 / span 2;
    grid-row: 2;
    padding: 20px 10px;
  }

  #performance .text-wrapper .helper {
    margin-left: 0px;
    width: 100%;
  }

  #custom > .text-wrapper .helper {
    width: 100%;
  }
  
  #custom > .text-wrapper .helper h1 {
    font-size: 75px;
  }
  
  #custom .content {
    grid-template-rows: auto;
    padding-top: 0px;
  }

  #custom .content .image-wrapper img {
    width: 100%;
  }
  
  #custom .content .image-wrapper:first-child,
  #custom .content .text-wrapper,
  #custom .content .image-wrapper:nth-child(3) {
    grid-column: 2 / span 10;
    grid-row-start: auto;
  }

   #footer {
    height: 600px;
  }

  #footer .content > .helper {
    padding-top: 0px;
    padding: 20px;
    grid-column: 1 / span 12 !important;
    grid-row: auto !important;
  }

  #footer .content > .helper:nth-child(3) ul {
    position: relative;
  }
  
  #specification .content .image-wrapper {
    display: none;
  }

  #specification .content .text-wrapper:first-child {
    grid-column: 1 / span 6;
    justify-content: center;
    text-align: center;
  }
  
  #specification .content .text-wrapper:nth-child(3) {
    grid-column: 7 / span 6;
    justify-content: center;
    text-align: center;
  }

  #specification {
    height: 900px;
  }
  
  #legal-showcase .header {
    grid-column: 1 / span 12;
    grid-row: 1 / span 2;
  }
  
  #legal-showcase .content {
    grid-column: 1 / span 12;
    grid-row: 3 / span 10;
    
    padding: 20px;
  }

  #legal-showcase .content .text-wrapper .tabs {
    justify-content: space-evenly;
  }
  
  #legal-showcase .content .text-wrapper .tabs li {
    margin-right: 0;
    
  }

  /* Section: TAB */
  #tab {
    width: 100%;
  }
  
  #tab > div {
    grid-column: 1 / span 12;
    grid-row: 1 / span 12;
  
    display: none;
    padding-top: 100px;
    padding-left: 20px;
    padding-right: 20px;
  }
  
  #tab .privacy > .text-wrapper .helper:first-child {
    width: 100%;
  }


}