/* CSS Document */
/* 1. Use a more-intuitive box-sizing model */
*, *::before, *::after {box-sizing: border-box}
/* 2. Remove default margin */
* {margin: 0}
/* 3. Enable keyword animations */
@media (prefers-reduced-motion: no-preference) {html {interpolate-size: allow-keywords}}
body {
  /* 4. Add accessible line-height */
  line-height: 1.5;
  /* 5. Improve text rendering */
  -webkit-font-smoothing: antialiased}
/* 6. Improve media defaults */
img, picture, video, canvas, svg {display: block;max-width: 100%}
/* 7. Inherit fonts for form controls */
input, button, textarea, select {font: inherit}
/* 8. Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {overflow-wrap: break-word}
/* 9. Improve line wrapping */
p {text-wrap: pretty;}
h1, h2, h3, h4, h5, h6 {text-wrap: balance;}
/* 10. Create a root stacking context */
#root, #__next {isolation: isolate}

:root {
  --accent: #564338; /* bruin */
}
html {
  scroll-behavior: smooth;
}

body {background:#fff;font-family: "Open Sans", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; font-variation-settings: "wdth" 100;}
.wrapper {overflow-x: hidden}
a {color:var(--accent);}

/* header */
.header {background-color: #fff;width: 100%;z-index: 3;}
.header ul {margin: 0;padding: 0;list-style: none;overflow: hidden;background-color: #fff;}
.header li a {display: block;padding: 20px 20px 20px 4.5vw;text-decoration: none;text-transform:uppercase}
.header li a:hover, .header .menu-btn:hover {background-color: #f4f4f4;}
.header li.last {margin-bottom:32px}
@media only screen and (max-width: 960px) {
.header li a {padding-left:50px}
}
/* menu */
.header .menu {position:absolute;z-index:100;top:0;width:100%;max-height: 0;transition: max-height .2s ease-out;}

/* menu icon */
.header .menu-icon {cursor: pointer;display: inline-block;position:absolute;z-index:105;top:0;right:0;padding: 28px 20px;user-select: none;}
.header .menu-icon .navicon {background: var(--accent);display: block;height: 2px;position: relative;transition: background .2s ease-out;width: 18px;}
.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {background: var(--accent);content: '';display: block;height: 100%;position: absolute;transition: all .2s ease-out;width: 100%;}
.header .menu-icon .navicon:before {top: 5px;}
.header .menu-icon .navicon:after {top: -5px;}

/* menu btn */
.header .menu-btn {display: none;}
.header .menu-btn:checked ~ .menu {max-height: 290px;}
.header .menu-btn:checked ~ .menu-icon .navicon {background: transparent;}
.header .menu-btn:checked ~ .menu-icon .navicon:before {transform: rotate(-45deg);}
.header .menu-btn:checked ~ .menu-icon .navicon:after {transform: rotate(45deg);}
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {top: 0;}

/* instagram link */
.insta {z-index:101;display:block;width:58px;height:58px;position:absolute;top:0;right:58px;background-image: url("i.svg");background-size:58px 58px;background-position:left top;background-repeat:no-repeat}
.insta:hover {background-image: url("i-hover.svg");background-size:58px 58px;background-position:left top}
.insta span {display:none}

/* ---------- Hero Background Animation ---------- */
#bgfade {position: relative;width: 100%;height: calc(100vh - 9vw);overflow: hidden;}
.hero-image {position: absolute;inset: 0;background-size: cover;background-position: 50% 20%;opacity: 0;animation: fio 12s ease-in-out infinite;}

#back1 { background-image: url("hero-1.jpg"); animation-delay: 0s; }
#back2 { background-image: url("hero-2.jpg"); animation-delay: 4s; }
#back3 { background-image: url("hero-3.jpg"); animation-delay: 8s; }

@keyframes fio {
  0%   { opacity: 0; }
  10%  { opacity: 1; }   /* fade in */
  30%  { opacity: 1; }   /* fully visible */
  40%  { opacity: 0; }   /* fade out */
  100% { opacity: 0; }   /* stay hidden until next loop */
}

/* ---------- Hero Background video ---------- */

.v {position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    object-fit: cover;
    width: 100%;
    height: 100%;}

.vimeo-container {
  padding: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative;
}
iframe {
  box-sizing: border-box;
  width: 177.77777778vh;
  height: 56.25vw;
  min-width: 100%;
  min-height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


/* ---------- Hero Text ---------- */
#hero {padding: 4.5vw;padding-bottom: 0;position: relative;color: var(--accent);text-align: center;}
#hero h1 {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);text-transform: uppercase;font-weight: 300;font-size: 4vw;line-height: 1.1em;z-index: 10;}
#hero h1 span {font-weight: 700;}

/* Optional: WebKit prefix for Safari */
@-webkit-keyframes fio {
  0%   { opacity: 1; }
  17%  { opacity: 1; }
  25%  { opacity: 0; }
  92%  { opacity: 0; }
  100% { opacity: 1; }
}


/* ---------- Hero Text ---------- */
#hero {padding: 4.5vw;
  padding-bottom: 0;
  position: relative;
  color: var(--accent);
  text-align: center;
}
#hero h1 {text-transform: uppercase;font-weight:300;color:var(--accent);text-align:center;position:relative;font-size:4vw;line-height:1.1em;margin-bottom:-4vw;}

#hero h1 span {font-weight: 700;}

/* text */
.text.head {text-align:center;padding:50px 0;color:var(--accent);}
h2 {font-weight:normal;text-transform:uppercase;}
.img p {position:relative;bottom:-100%}
.credits {font-size:80%;opacity:0.6}
.credits a:link, .credits a:visited {text-decoration:none}
.credits a:hover {color:black;opacity:1;text-decoration:underline}
/* cols */
.twocol {display: grid;grid-template-columns: 1fr 1fr;column-gap: 4.5vw;padding:0 4.5vw 4.5vw;}
.threecol {display: grid;grid-template-columns: 1fr 1fr 1fr;column-gap: 2.75vw;padding:0 4.5vw 4.5vw;}
.img {background-image: url("alaska.jpg");background-size:cover;background-position: 50% 10%;min-height:400px}
.text {background:white;color:var(--accent);}
.text p {margin-bottom:1em}


/* sections */
#about {max-width:1360px;margin:0 auto}
#graduation {min-height:900px}
#graduation .text {padding-bottom:360px}
#contact {min-height:1024px;max-width:1360px;margin:0 auto}
#contact .text.head {padding-top:0;}

@media only screen and (max-width: 960px) {
  #hero {padding:50px;}
  .hero-image {height:calc(100vh - 100px)}
  .twocol {column-gap: 50px;padding:0 50px 50px;}
  .threecol {column-gap: 25px;padding:0 50px 50px;}
  #hero h1 {font-size:4.8vw;margin-bottom:-1em;}
}
@media only screen and (max-width: 640px) {
    #hero {padding:40px;}

   .twocol, .threecol {column-gap: 30px;padding:0 40px 40px;}
   .threecol {grid-template-columns: 1fr;}
	.twocol {grid-template-columns: 1fr;}
	.img {margin-bottom:50px}
	}
@media only screen and (max-width: 555px) {
  #hero h1 {padding-top:20px;font-size:8vw;margin-bottom:-2.2em;}
#bgfade {height: calc(100vh - 80px);margin-top:40px}}

/* Caroussel */
@-webkit-keyframes carousel-animate {
  0% {
    visibility: hidden;
    opacity: 0;
    transform: translateX(200%) scale(0.7);
  }
  3%, 14.2857142857% {
    visibility: visible;
    opacity: 0.8;
    transform: translateX(100%) scale(0.9);
  }
  17.2857142857%, 28.5714285714% {
    visibility: visible;
    opacity: 1;
    transform: translateX(0) scale(1);
  }
  31.5714285714%, 42.8571428571% {
    visibility: visible;
    opacity: 0.8;
    transform: translateX(-100%) scale(0.9);
  }
  45.8571428571% {
    visibility: visible;
    opacity: 0;
    transform: translateX(-200%) scale(0.9);
  }
  100% {
    visibility: hidden;
    opacity: 0;
    transform: translateX(-200%) scale(0.7);
  }
}
@keyframes carousel-animate {
  0% {
    visibility: hidden;
    opacity: 0;
    transform: translateX(200%) scale(0.7);
  }
  3%, 14.2857142857% {
    visibility: visible;
    opacity: 0.6;
    transform: translateX(100%) scale(0.9);
  }
  17.2857142857%, 28.5714285714% {
    visibility: visible;
    opacity: 1;
    transform: translateX(0) scale(1);
  }
  31.5714285714%, 42.8571428571% {
    visibility: visible;
    opacity: 0.6;
    transform: translateX(-100%) scale(0.9);
  }
  45.8571428571% {
    visibility: visible;
    opacity: 0;
    transform: translateX(-200%) scale(0.9);
  }
  100% {
    visibility: hidden;
    opacity: 0;
    transform: translateX(-200%) scale(0.7);
  }
}
.container {
  --container-padding-horizontal: 32px;
  position: relative;
  padding-inline: var(--container-padding-horizontal);
  display: grid;
  place-items: center;
  height: 100%;
}

.carousel {
  pointer-events: none;
  position: absolute;
  -webkit-padding-before: 67px;
          padding-block-start: 67px;
  -webkit-padding-after: max(24px, calc(29px + var(--font-size-md)));
          padding-block-end: max(24px, calc(29px + var(--font-size-md)));
  perspective: 100px;
  width: 100%;
}
@media (max-width: 568px) {
  .carousel {
    -webkit-padding-after: 52px;
            padding-block-end: 52px;
  }
}
.carousel__wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  height: 61.2vh;
}
.carousel .item {
  position: absolute;
  max-width: 418px;
  height: 100%;
  margin-inline: var(--container-padding-horizontal);
  opacity: 0;
  will-change: transform, opacity;
  -webkit-animation: carousel-animate 27s cubic-bezier(0.37, 0, 0.63, 1) infinite;
          animation: carousel-animate 27s cubic-bezier(0.37, 0, 0.63, 1) infinite;
}
@media (max-width: 568px) {
  .carousel .item {
    margin-inline: calc(var(--container-padding-horizontal) + 1px);
  }
}
.carousel .item:nth-child(1) {
  -webkit-animation-delay: calc(3.8571428571s * -1);
          animation-delay: calc(3.8571428571s * -1);
}
.carousel .item:nth-child(2) {
  -webkit-animation-delay: calc(3.8571428571s * 0);
          animation-delay: calc(3.8571428571s * 0);
}
.carousel .item:nth-child(3) {
  -webkit-animation-delay: calc(3.8571428571s * 1);
          animation-delay: calc(3.8571428571s * 1);
}
.carousel .item:nth-child(4) {
  -webkit-animation-delay: calc(3.8571428571s * 2);
          animation-delay: calc(3.8571428571s * 2);
}
.carousel .item:nth-child(5) {
  -webkit-animation-delay: calc(3.8571428571s * 3);
          animation-delay: calc(3.8571428571s * 3);
}
.carousel .item:nth-child(6) {
  -webkit-animation-delay: calc(3.8571428571s * 4);
          animation-delay: calc(3.8571428571s * 4);
}
.carousel .item:last-child {
  -webkit-animation-delay: calc(-3.8571428571s * 2);
          animation-delay: calc(-3.8571428571s * 2);
}
.carousel img {
  max-width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  height: 100%;
}