/**
 * style.css
 *
 * Theme Name:  Musi
 * Theme URI:   http://www.machine-agency.com
 * Author:      Machine
 * Author URI:  http://www.machine-agency.com
 * Description: Custom Theme for Musi
 * Version:     1.0
 * License:     GNU General Public License v2 or later
 * License URI: http://www.gnu.org/licenses/gpl-2.0.html
 * Tags:        custom
 * Text Domain: machine
 */


/* ==========================================================================
   Global
   ========================================================================== */

   @font-face {
       font-family: 'HK Grotesk';
       src: url('fonts/HKGrotesk-Regular.woff2') format('woff2'),
           url('fonts/HKGrotesk-Regular.woff') format('woff');
       font-weight: normal;
       font-style: normal;
   }

   @font-face {
       font-family: 'HK Grotesk';
       src: url('fonts/HKGrotesk-SemiBold.woff2') format('woff2'),
           url('fonts/HKGrotesk-SemiBold.woff') format('woff');
       font-weight: 600;
       font-style: normal;
   }

   @font-face {
       font-family: 'HK Grotesk';
       src: url('fonts/HKGrotesk-Bold.woff2') format('woff2'),
           url('fonts/HKGrotesk-Bold.woff') format('woff');
       font-weight: bold;
       font-style: normal;
   }

   @font-face {
       font-family: 'HK Grotesk';
       src: url('fonts/HKGrotesk-Light.woff2') format('woff2'),
           url('fonts/HKGrotesk-Light.woff') format('woff');
       font-weight: 300;
       font-style: normal;
   }




 body {
  background-color: #FFF;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Lucida Grande", "Segoe UI";
  -webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
  color: #000000;
 }

 section{
   padding: 4rem 0;
 }

/* ==========================================================================
   Typography
   ========================================================================== */
/*

  primary color: #A5000F
  secondary color: #86000C
  text color: #000000

*/

/* Headings */

 h1 {
  font-size: 85px;
  letter-spacing: 0;
  line-height: 81px;
 }

 h2 {
   font-size: 40px;
   letter-spacing: 0.19px;
   line-height: 1;
   text-transform: uppercase;
 }

 h3 {
   font-size: 22.16px;
   letter-spacing: 0.19px;
   line-height: 28px;
 }

 h4 {
   font-size: 20px;
   letter-spacing: 0.14px;
   line-height: 28px;
 }

 h5 {
   font-size: 20px;
   letter-spacing: 0.14px;
   line-height: 28px;
 }

 h6 {
   font-size: 16.16px;
   letter-spacing: 0.14px;
   line-height: 28px;
 }

 p {
   margin: 0.5rem 0 1.5rem 0;
   font-weight: 400;
   font-size: 16px;
   letter-spacing: 0;
   line-height: 1.5;
 }



@media screen and (max-width: 39.9375em) {

}


/* ==========================================================================
   Header
   ========================================================================== */


#main-menu ul li a{
  color: #000;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 0.75px;
}

#main-menu ul li:first-child a{
  padding-left: 0;
}

.site-logo{
  width: 115px;
  position: absolute;
  left: 0;
  right: 0;
  top: 1rem;
  margin: auto;
  z-index: 20;
}

.site-header{
  padding: 1rem 3rem;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

body{
  padding-top: 70px;
}

.section--testimonials{
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: 100vh;
  display: flex;
  align-items: flex-end;
}

section.section.section--impact-area{
  position: relative;
  overflow: visible;
  padding: 3rem 0;
  margin: 0 3.9375rem;
  min-height: 62vh;
  display: flex;
  align-items: center;
  z-index: 95;
  pointer-events: none;
}

.testimonial-bg{
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  /* background-color: #fff; */
  z-index: 100;
  transition: all 0.3s ease;
}

body.night .testimonial-bg{
    /* background-color: #202020; */
}


/* .testimonials-slider{
  height: 100vh;
  display: flex;
  align-items: flex-end;
} */

.social-nav{
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: right;
}

.social-nav li a{
  color: #000;
  font-size: 13px;
  letter-spacing: 0.75px;
  text-transform: uppercase;
}

.social-nav li a img{
  margin-right: 0.7rem;
}

.grid-x.vertical-align-flex {
    align-items: center;
}




section.section.section--impact-area h1,
section.section.section--impact-area a{
  pointer-events: all;

}

.section--testimonials{
  padding: 1rem 0;
  margin: 0;
}

.testimonial:first-child{
  margin-left: 3.9375rem;
}

.testimonial.last{
  width: 0;
  max-width: 0;
  box-shadow: none;
  min-width: 0;
  background-color: transparent;
}

.testimonial:last-child{
  margin-right: 3.9375rem;
}


.ps__rail-x{
  margin: 0 3.9375rem;
}

section.section.section--impact-area h1{
  color: #fff;
  position: relative;
  z-index: 20;
}

.section.section--impact-area .grid-container{
  max-width: 90rem;
}

.section.section--impact-area h1,
.grid-container.show-for-high-height h1{
  font-size: 75px;
  font-family: 'HK Grotesk';
  font-weight: bold;
  font-style: normal;
}

.testimonial p.test-title{
  font-weight: 600;
}

.impact_image_slider{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

.impact-overlay{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 11;
  opacity: 0.3;
  background-image: linear-gradient(-225deg, rgba(0,0,0,0.00) 0%, #000000 100%);
}

.impact-image-item--wrapper{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  transform: translateY(1px);
}

.impact-image-item{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  transform: translateY(1px);
}


.testimonial{
  background: rgba(255,255,255,0.70);
  box-shadow: 0 0 8px 0 rgba(0,0,0,0.15), 0 0 1px 0 rgba(0,0,0,0.30);
  border-radius: 7px;
  padding: 1rem;
  min-width: 26rem;
  max-width: 26rem;
  margin-right: 2rem;
  max-height: 10rem;
  overflow: auto;
}

.testimonial p{
  margin: 0;
}

.testimonial:nth-last-child(3){
    border-right: 1px solid rgba(0,0,0,0.15);
}

.testimonials-slider {
  display: flex;
  flex-wrap: nowrap;
  position: relative;
  width: 100%;
  padding: 1rem 0.1rem 3rem 0.1rem;
  z-index: 110;
}


.ps__rail-x:hover > .ps__thumb-x, .ps__rail-x:focus > .ps__thumb-x, .ps__rail-x.ps--clicking .ps__thumb-x,
.ps__thumb-x {
    background-color: #FF5700;
  }

.ps .ps__rail-x:hover{
  background-color: transparent;
}

.ps__rail-x{
  background-color: transparent!important;
}

.ps:hover > .ps__rail-x{
  opacity: 1;
}

/* ==========================================================================
   Night Mode
   ========================================================================== */

.switch{
  color: #000;
  transform: rotate(-90deg) translateX(6rem);
  display: inline-block;
  transform-origin: center center;
  position: absolute;
  z-index: 98;
  bottom: 0;
  top: 0;
  margin: auto;
  left: -3.5rem;
  display: flex;
  align-items: center;
}

.switch .switch-paddle{
  margin: 0 1rem;
  display: inline-block;
  border-radius: 20px;
  transform: scale(0.7);
}

.switch span{
  font-size: 12px;
  letter-spacing: 0.75px;
  text-transform: uppercase;
  display: inline-block;
  font-weight: 400;
  transition: all 0.75s cubic-bezier(0.55, 0.085, 0.68, 0.53);
}

.switch span{
  position: relative;
  z-index: 2;
}

.switch-input{
  position: relative;
  z-index: 1;
}

.switch span:hover{
  -webkit-transition: color 0.3s ease;
  -o-transition: color 0.3s ease;
  transition: color 0.3s ease;
  color: #FF5700;
}

.switch-paddle::after{
  background: #FF5700;
  border-radius: 100%;
  transform: scale(1.3);
}

input:checked ~ .switch-paddle {
    background: rgba(0,0,0,0.15);
}

.switch-paddle {
    background: rgba(0,0,0,0.15);
}

/* body.night{
  background-color: #202020;
} */

.social-nav li a{

}

.body-night-animation{
  position: fixed;
  top: -1px;
  bottom: 0;
  /* right: -30%;
  left:auto; */
  left: -30%;
  z-index: -1;
  width: 0%;
  background-color: #202020;
  -ms-transform: translateY(1px) skew(30deg);
  -webkit-transform: translateY(1px) skew(30deg);
  transform: translateY(1px) skew(30deg);
  -webkit-transition: all 2s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  transition:         all 2s cubic-bezier(0.785, 0.135, 0.15, 0.86);
   /* -webkit-transition-delay: 6s!important;
   -o-transition-delay: 6s!important;
   transition-delay: 6s!important; */
}



body .impact_image_slider{
  -webkit-transform: translateY(-1px);
  -ms-transform: translateY(-1px);
  transform: translateY(-1px);
  -webkit-transition: all 2s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  transition:         all 2s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  /* -webkit-transition-delay: 0.3s!important;
  -o-transition-delay: 0.3s!important;
  transition-delay: 0.3s!important; */
}

/* body.night .body-night-animation{
  left: -30%;
  right: auto;
  width: 160%;
} */

body.night .body-night-animation{
  /* left: -30%; */
  /* right: auto; */
  width: 160%;
  -ms-transform: translateY(1px) skew(30deg);
  -webkit-transform: translateY(1px) skew(30deg);
  transform: translateY(1px) skew(30deg);
}




body.night p,
body.night a,
body.night span{
  color: #fff;
}

body.night .testimonial p{
      color: #000000;
}

body.night #main-menu ul li a{
  color: #fff;
}

body.night .social-nav li a img{
  -webkit-filter: brightness(0) invert(1);
  filter: brightness(0) invert(1);
}

body.night input:checked ~ .switch-paddle {
    background: rgba(255,255,255,0.15);
}

.impact_images_night{
  z-index: 5;
}

.impact-images-day{
  z-index: 7;
}

section.section.section--impact-area{
  overflow: hidden;
}



body .impact_image_slider.impact-images-day{
  overflow: visible;
    -webkit-clip-path: polygon(-20% 0%, 0% 100%, 100% 100%, 100% 0%);
            clip-path: polygon(-20% 0%, 0% 100%, 100% 100%, 100% 0%);
}

body .impact_image_slider.impact_images_night{
  overflow: visible;
  transition: all 0.6s ease;
    -webkit-clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%);
            clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%);
}

body .impact_image_slider.impact-images-day.is-inactive{
  /* -webkit-clip-path: polygon(0% 0%, 100% 100%, 100% 100%, 100% 100%);
          clip-path: polygon(0% 0%, 100% 100%, 100% 100%, 100% 100%); */
      -webkit-clip-path: polygon(120% 0%, 140% 100%, 100% 100%, 100% 0%);
              clip-path: polygon(120% 0%, 140% 100%, 100% 100%, 100% 0%);
}

.slick-list.draggable, .slick-list.draggable * {
    height: 100%;
}

.section--impact-area .button{
  z-index: 20;
  position: relative;
  transition: all 0.3s ease;
}

.section--impact-area .button:hover{
  background-color: rgba(0,0,0,0.8);
}


.section--impact-area .button{
  background-color: #000;
  border-radius: 43px;
  padding: 1.5rem 3rem;
  text-transform: uppercase;
  margin-top: 2rem;
  margin-bottom: 0;
}

.test-date,
.test-username{
  font-size: 14px;
  opacity: 0.6;
}

.star-rating{
  margin: 0rem 0 1rem 0;
  margin-left: 3px;
}

.star-rating img{
  margin-left: -3px;
}

/* ==========================================================================
   Mobile
   ========================================================================== */

@media screen and (max-width: 63.9375em){

}

.mobile-only{
  display: none;
}

.mobile-only-nav li a{
  color: #000;
  text-transform: uppercase;
  font-size: 14px;
}

body.night .mobile-only-nav li a{
  color: #fff;
}



.switch-label{
  cursor: pointer;
}



body,
body h1,
body h2,
body p,
body span,
.social-nav li a,
.social-nav li a img,
#main-menu ul li a,
body .switch-paddle,
.mobile-only-nav li a{
  transition: all 0.75s cubic-bezier(0.55, 0.085, 0.68, 0.53);
}


.site-header{
  z-index: 999;
}

#main-menu ul li a:hover{
  opacity: 0.6;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.social-nav li a:hover{
  opacity: 0.6;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.grid-container.show-for-high-height{
  display: block;
}

.grid-container.show-for-low-height{
  display: none;
}

.grid-container.show-for-high-height{
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  max-width: 80rem;
  height: 24rem;
  margin: auto;
  z-index: 999;
  pointer-events: none;
}

.grid-container.show-for-high-height a{
  pointer-events: all;
}

.grid-container.show-for-high-height h1{
  color: #fff;
}

.grid-container.show-for-high-height .button{
  z-index: 20;
  position: relative;
  transition: all 0.3s ease;
}

.grid-container.show-for-high-height .button:hover{
  background-color: rgba(0,0,0,0.8);
}


.grid-container.show-for-high-height .button{
  background-color: #000;
  border-radius: 43px;
  padding: 1.5rem 3rem;
  text-transform: uppercase;
  margin-top: 2rem;
  margin-bottom: 0;
}

.switch{
  z-index: 200;
}

.ps__rail-x {
    transform: translateY(-1.5rem);
}

.social-nav img{
  width: 20px;
  -webkit-transform: translateY(-3px);
  -ms-transform: translateY(-3px);
  transform: translateY(-3px);
}

@media only screen and (max-height: 800px){
  .switch{
    top:23rem;
    bottom: auto;
  }
}

@media only screen and (max-height: 600px){
  .ps__rail-x {
      transform: translateY(0);
  }

  .switch{
    top:15rem;
    bottom: auto;
  }

  .testimonials-slider{
    padding-bottom: 1rem;
  }

  .grid-container.show-for-high-height{
      height: 17rem;
  }

  .grid-container.show-for-high-height h1{
    font-size: 50px;
    line-height: 44px;
    margin: 0;
  }

}

@media only screen and (max-height: 500px){
  .grid-container.show-for-high-height{
    display: none;
  }

  .grid-container.show-for-low-height{
    display: block;
  }

  .section--testimonials{
    height: auto;
    position: relative;
  }

  .testimonial-bg{
    display: none;
  }

  .site-header{
    position: relative;
  }

  body{
    padding-top: 0;
  }
}




/* ==========================================================================
   Mobile
   ========================================================================== */


@media screen and (max-width: 1180px) {
  .section.section--impact-area h1,
  .grid-container.show-for-high-height h1{
    font-size: 60px;
  }
}

@media screen and (max-width: 980px) {
  .section.section--impact-area h1,
  .grid-container.show-for-high-height h1{
    font-size: 50px;
  }
}


@media screen and (max-width: 900px) {
.testimonial{
  max-height: none;
}

  .ps__rail-x {
      transform: translateY(0);
  }

  body{
    padding-top: 0;
  }
  .testimonial {
      min-width: 20rem;
      max-width: 20rem;
      margin-right: 2rem;
  }

.testimonial-bg{
  display: none;
}
.body-night-animation{
  -ms-transform: translateY(1px) skew(0deg);
-webkit-transform: translateY(1px) skew(0deg);
transform: translateY(1px) skew(0deg);
}

body.night .body-night-animation{
  -ms-transform: translateY(1px) skew(0deg);
-webkit-transform: translateY(1px) skew(0deg);
transform: translateY(1px) skew(0deg);
}

/* .impact-images-day .slick-slide:first-child .impact-image-item{
  background-position: 20% 20%!important;
}

.impact_images_night .slick-slide:last-child .impact-image-item{
  background-position: 20% 20%!important;
} */

.testimonial:first-child{
  margin-left: 0;
}

.site-header{
  position: relative;
}
.grid-container.show-for-high-height{
  display: none;
}

.grid-container.show-for-low-height{
  display: block;
}

.section--testimonials{
  position: relative;
  height: auto;
  min-height: inherit;
}

  .switch.desktop{
    display: none;
  }
  .mobile-only-switch .switch{
    position: static;
    transform: rotate(0deg);
    justify-content: center;
    margin-top: 1rem;
  }
  .mobile-only{
    display: block;
    padding: 1rem 0;
  }

  div#main-menu{
    display: none;
  }

  .section--impact-area .switch{
    display: none;
  }

  .section.section--impact-area h1,
  .grid-container.show-for-high-height h1{
    font-size: 60px;
    line-height: 60px;
  }

  section.section.section--impact-area{
    margin: 0 1rem;
  }

  .site-header{
    padding: 1rem 0;
  }

  section.section.section--impact-area{
    padding: 6rem 0;
  }

  .section--testimonials{
    margin: 0 1rem;
  }

  .testimonial p{
    font-size: 14px;
  }

  .testimonial p.test-date,
  .testimonial p.test-username{
    font-size: 12px;
  }

  .testimonial p.test-username{
    margin-bottom: 0.5rem;
  }

  .testimonial p.test-date{
    top:1rem;
    right: 1rem;
    position: absolute;
  }

  .testimonial p.test-username{
    top:1.8rem;
    right: 1rem;
    position: absolute;
  }

  .star-rating{
    margin-bottom: 0.5rem;
  }

  .testimonial{
    position: relative;
  }
}

@media screen and (max-width: 400px) {

  .testimonials-slider{
    padding: 1rem 0.1rem 1rem 0.1rem;
  }

  .testimonial {
    min-width: 14rem;
    max-width: 14rem;
  }

  .section.section--impact-area h1,
  .grid-container.show-for-high-height h1{
    font-size: 40px;
    text-align: left;
    line-height: 50px;
  }
  .social-nav li a {
    text-transform: uppercase;
    font-size: 12px;
  }
  .social-nav li a img {
    margin-right: 0.5rem;
  }
  

}

body.loaded{
  opacity: 1;
  visibility: visible;
}

#main-menu ul li a,
.mobile-only-nav li a,
.switch span,
.social-nav li a{
  font-weight: 600;
}


.button{
  font-weight: 600;
  letter-spacing: 0.45px;
}

.button img{
  margin-right: 1.25rem;
  margin-top: -5px;
}

.menu{
  padding-top: 2px;
}

/* ==========================================================================
   Switch desktop fix
   ========================================================================== */

/* .switch.desktop{
  display: none;
} */

/* ==========================================================================
   Mobile Only Adjustments
   ========================================================================== */

@media screen and (max-width: 63.9375em){

}



@media screen and (max-width: 39.9375em) {
  .ps__rail-x {
    display: none !important;
  }
  .testimonial{
    padding: 1.15rem 1.25rem;
    min-width: 16rem;
    max-width: 16rem;
  }

  .button,
  .section--impact-area .button{
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.45px;
    padding: 1.4rem 1rem;
    width: 100%;
  }

  .button img {
    margin-right: 1.25rem;
    margin-top: -4px;
    max-width: 20px;
  }

  .section.section--impact-area h1,
  .grid-container.show-for-high-height h1{
    font-size: 60px;
    line-height: 53px;
    margin-top: 30px;
  }

  section.section.section--impact-area{
    display: flex;
    align-items: flex-end;
  }
}