html,
body {
  margin: 0;
  padding: 0;
  font-family: "Poppins", "Noto Sans", "Raleway", sans-serif;
  background-color: rgb(12, 42, 37);

}

body {
 overflow-x: hidden; 
}

@font-face {
  font-family: "Poppins";
  src: url('../fonts/Poppins-Light.woff2') format('woff2'),
     url('../fonts/Poppins-Light.woff') format('woff');
}

/* Hero section */
.hero_container {
  background-color: rgb(12, 43, 37);
  width: 100%;
}

.hero {
  display: grid;
  place-items: center;

  overflow: hidden;
  animation: clip-hero-anim 1.25s cubic-bezier(0.29, 0.8, 0.8, 0.98);
  will-change: clip-path;
}

.hero__bg, .hero__cnt {
  grid-area: 1 / 1;
}

.hero__bg {
  width: 100%;
  height: 75vh;
  position: relative;
  animation: fade-in 1.75s linear;

}

.hero__bg::before {
  content: "";
  display: block;
  position: absolute;
  z-index: 5;
  top: -10%;
  right: -10%;
  bottom: -10%;
  left: -10%;
  background: rgba(1, 15, 13, 0.85);
  background-blend-mode: screen;
}

.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 25% 50%;
  animation: scaling-hero-anim 4s 0.25s cubic-bezier(0, 0.71, 0.4, 0.97) forwards;
}

.hero__cnt {
  z-index: 10;
  color: rgb(241, 242, 228);
  
  display: flex;

  text-transform: uppercase;
  text-align: center;
  
  opacity: 0;
  animation: fade-in 2.75s 1.5s linear forwards;
}

.hero__cnt img {
  height: 10vw;
  margin-bottom: 1vw;
  transition: all ease 1.2s;
}

@keyframes fade-in {
  from {
  opacity: 0;
  }
  to {
  opacity: 1;
  }
}
@keyframes scaling-hero-anim {
  from {
  transform: scale(1.25);
  }
  to {
  transform: scale(1.1);
  }
}

@keyframes clip-hero-anim {
  from {
  clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
  }
  to {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  }
}

/* Welcome - Headline */
.headline {
  margin-top: 1rem;
  max-with: 100vw;
  padding: 0px 50px 0px 50px;  
  
  display: grid;
  position: relative; 
  text-align: left;
  
  color: rgb(241, 242, 228);
  /*background-color: rgba(92, 62, 46, 1);*/
}

.headline > h1 {
  font-size: clamp(4vw, 6vw, 4rem);  
  /* background-color: aqua; */
}

.headline h3 {
  margin-bottom: 20px;
  font-size: 3vw;
  color: rgb(241, 242, 228);  
}

.headline p {
  font-size: 2vw;
  font-weight: normal;
}
  
/* Contact */
.contact_container {
  display: flex;
  flex-direction: row;

  /*background-color: burlywood;*/
}

.contact {
  margin-top: 2rem;
  max-width: 768px;
  display: grid;
  justify-content: center;
  align-items: center;
  width: 50vw;
  /*background-color: cornflowerblue;*/
}

.contact h1 {
  font-size: 4vw;
  color: rgb(241, 242, 228);  
}

.contact-form input,
.contact-form textarea {
  width: 50vw;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.contact-form button {
  align-self: flex-start;
  padding: 10px 20px;
  background-color: #254;
  color: rgb(228, 228, 228);  
  font-size: 1em;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

form {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  width: 100%;
}

input, textarea, button {
  margin-bottom: 1rem;
  padding: 0.5rem;
  font-size: 1em;
  font-family: "Poppins", "Noto Sans", "Raleway", sans-serif;
}

button {
  border: none;
  cursor: pointer;
}

.button {
  background-color: #254;
  color: rgb(241, 242, 228);  
  font-size: 1em;
}

.button:hover {
  background-color: #376;
  transition: 400ms all ease;
}

/* Carousel */
.wrapper {
    margin: 1rem;
    animation: scaling-hero-anim 4s 0.25s cubic-bezier(0, 0.71, 0.4, 0.97) forwards;
    will-change: transform;
    width: 100vw;
    /*background-color: rgb(226, 198, 43);*/
}

.carousel {
  display: flex;
  height: 30vw;
  gap: 1rem;
  padding-top: 1.6rem;
  padding-bottom: 1.6rem;
}
.carousel > div {
  flex: 1;
  border-radius: 0.5rem;
  background-position: center;
  background-repeat: no-repeat;
  background-size: auto 100%;
  transition: all .8s cubic-bezier(.25, .4, .45, 1.4);
  background-color: rgb(55, 61, 55);
}
.carousel > div:hover {
  flex: 5;
  filter: grayscale(0%) opacity(100%);
}
.carousel-item {
  display: flex;
  object-fit: cover;
  /*transition: 400ms all ease;*/
  filter: grayscale(100%) opacity(35%);
}

.carousel-item img,
.carousel-item video {
    object-fit: cover;
    height: 100%;
    width: 100%;
}

.carousel-item > div {
  width: 100%;
  height: 100%;
  opacity: 0;

  display: grid;
  position: relative;
  place-items: center;
  z-index: 10;
}
.carousel-item > div:hover {
  background: rgba(1, 15, 13, 0.35);
  opacity: 1;
  
}

.caption > p {
  text-transform: uppercase;
  /*font-size: clamp(1rem, 2vw, 4rem);*/
  font-weight: bolder;
  text-align: center;
  color: rgb(241, 242, 228);
  filter: drop-shadow(0 0.2rem 0.25rem rgba(0, 0, 0, 0.2));
  aspect-ratio: 3:2;
}


@import "compass/css3";

.ss-icon {
  position: relative;
  top: 10px;
  
  /*left: 50%;
  margin: -135px -180px;*/
  width: 180px;
  min-height: 270px;
  font-size: 35px;
  text-align: center;
  scale: 0.75;
}
a {
  display: inline-block;
  position: relative;
  float: left;
  width: 80px;
  height: 80px;
  margin: 0px;
  scale: 0.8;
}
article {
  cursor: pointer;
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #254;
  box-shadow: 0 0 6px -2px #000, 0 0 45px -20px #000;
  color: #fff;
  line-height: 90px;
  transform: perspective(300px) rotateY(0deg);
  transition: transform 0.4s linear, background-color 0s linear 0.2s, color 0s linear 0.2s;
  a:hover & {
    transform: perspective(300px) rotateY(180deg);
    color: #eee;
    transition: transform 0.2s linear, background-color 0s linear 0.1s, color 0s linear 0.1s;
  }
  a:nth-child(1):hover & {background-color: #3B5998;}
  a:nth-child(2):hover & {background-color: #00ACED;}
  a:nth-child(3):hover & {background-color: #CB2027;}
  a:nth-child(4):hover & {background-color: #1769FF;}
  a:nth-child(5):hover & {background-color: #EA4C89;}  
  a:nth-child(6):hover & {background-color: #4183C4;}
}
span {
  transition: transform 0s linear 0.2s, text-shadow 0s linear 0.2s;
  display: block;
  -webkit-font-smoothing: subpixel-antialiased;
  font-smoothing: antialiased;
  a:hover & {
    transition: transform 0s linear 0.1s, text-shadow 0s linear 0.1s;
    transform: scale(-1, 1);
    text-shadow: 0 0 50px rgba(255,255,255,0.5);
  }
}
body {
  @include background(linear-gradient(left, #BADEA6, #B3DEA6 50%, #BADEA6));
}

@font-face {
  font-family: "SSSocial";
  src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/2361/ss-social-regular.eot');
  src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/2361/ss-social-regular.eot?#iefix') format('embedded-opentype'),
       url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/2361/ss-social-regular.woff') format('woff'),
       url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/2361/ss-social-regular.ttf') format('truetype'),
       url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/2361/ss-social-regular.svg#SSSocialRegular') format('svg');
  font-weight: normal;
  font-style: normal;
}

/* This triggers a redraw in IE to Fix IE8's :before content rendering. */
html:hover [class^="ss-"]{-ms-zoom: 1;}

.ss-icon, .ss-icon.ss-social, .ss-icon.ss-social-circle,
[class^="ss-"]:before, [class*=" ss-"]:before,
[class^="ss-"][class*=" ss-social"]:before, [class*=" ss-"][class*=" ss-social"]:before,
[class^="ss-"].right:after, [class*=" ss-"].right:after,
[class^="ss-"][class*=" ss-social"].right:after, [class*=" ss-"][class*=" ss-social"].right:after{
  font-family: "SSSocial";
  font-style: normal;
  font-weight: normal;
  text-decoration: none;
  text-rendering: optimizeLegibility;
  white-space: nowrap;
  -moz-font-feature-settings: "liga=1";
  -moz-font-feature-settings: "liga";
  -ms-font-feature-settings: "liga" 1;
  -o-font-feature-settings: "liga";
  font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}

.ss-icon.ss-social-circle,
[class^="ss-"].ss-social-circle:before, [class*=" ss-"].ss-social-circle:before,
[class^="ss-"].ss-social-circle.right:after, [class*=" ss-"].ss-social-circle.right:after{
  font-weight: bold;
}

[class^="ss-"].right:before,
[class*=" ss-"].right:before{display:none;content:'';}

.ss-icon p {
    font-size: clamp(1rem, 1vw, 1.5rem);
    color: rgb(205, 205, 205);
    text-align: left;
    padding-left: 20px;
  }
  
  .emp {
    font-size: clamp(1.5rem, 1.5vw, 2rem);
    font-weight: bold;
  }

/* Animations */
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes scaling-hero-anim {
  from { transform: scale(1.25); }
  to { transform: scale(1.1); }
}

@keyframes clip-hero-anim {
  from { clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%); }
  to { clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); }
}

/* Media Queries for Responsiveness */
@media screen and (max-width: 840px) {
  .hero__cnt img {
  height: 16vw;
  transition: all ease 1.2s;
  }

  .headline > h1 {
  font-size: 6vw;
  }

  .headline p {
  font-size: 3vw;
  }

  .carousel {
  flex-direction: column;
  width: 100%;
  }
  
  .carousel {
  flex-direction: column;
  width: 100%;
  }

  .carousel > div {
  flex: 1 1 100%;
  border-radius: 0.2rem;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
  background-color: rgb(40, 80, 64);
  min-height: 240px;
  filter: grayscale(0%) opacity(100%);
  }

  .carousel-item > div {
  background: rgba(1, 15, 13, 0.35);
  opacity: 1;
  }

  
  .caption > p {
    font-size: 3vw;
  }
  
}