/* Used to hide Scroll bar because I needed to make it visible for fullpage plugin to allow wow.js to function*/
::-webkit-scrollbar { 
display: none; 
}

/* fonts */
@font-face{
font-family:'pano';
src:url("pano_bold.woff2")
}
@font-face{
font-family:'suiss';
src:url("SuisseIntlTrial-Regular.woff2")
}
@font-face{
  font-family:'suissmono';
  src:url("SuisseIntlMono-Regular-WebTrial.woff")
  }
@font-face{
font-family: roboto-bold;
src: url("Roboto-Bold.woff")
}

/*---------------------------------- PRELOADER SCREEN STYLES ----------------------------------*/
.preloader-container{
position: absolute;
z-index:1001;
width:100%;
height:100vh;
overflow:hidden;
pointer-events: none;
}

.prealoder-inner{
position:relative;
top:45%;
width:100%;
}

.preloader{
  font-family:'pano', sans-serif;
  font-size:80vw;
  text-transform: uppercase; 
  color:white;
  position:relative;
  z-index:102; 
  animation-duration:2.9s;
  animation-timing-function:cubic-bezier(.83, 0, .25, .99);
  animation-fill-mode: forwards;
  animation-name: preloader;
  }

.type-container{
  display: flex; /* Enables flexbox layout */
  justify-content: center; /* Optional: Adjust spacing between divs */
  align-items: center; /* Optional: Aligns items vertically */
  gap: 8px; /* Optional: Space between boxes */
  width:100%;
  vertical-align: center;
}

.preload-type-mask{
  height:9vw;
  overflow:hidden;}

.preload-H{
  animation-duration:2.4s;
  animation-timing-function:cubic-bezier(.83, 0, .25, .99);
  animation-fill-mode: forwards;
  animation-name: preload-H;}
  @keyframes preload-H {
  0%{
  transform: translateY(100%);
  }   
  65%{
  transform: translateY(0%); 
  }  
  100%{
  transform: translateY(0%);
  }
  }
  .preload-2{
    animation-duration:2.4s;
    animation-timing-function:cubic-bezier(.83, 0, .25, .99);
    animation-fill-mode: forwards;
    animation-name: preload-2;}
    @keyframes preload-2 {
    0%{
    transform: translateY(-100%);
    }   
    65%{
    transform: translateY(0%); 
    }  
    100%{
    transform: translateY(0%);
    }
    }

    .preload-left{
      animation-duration:1.5s;
      animation-delay: 1.8s;
      animation-timing-function:cubic-bezier(.83, 0, .25, .99);
      animation-fill-mode: forwards;
      animation-name: preload-left;}
      @keyframes preload-left {
      0%{
      transform: translateX(0%);
      }    
      100%{
      transform: translateX(-300%); 
      }
      }

      .preload-out-left{
        width:10vw;
        animation-duration:3s;
        animation-delay: 2.8s;
        animation-timing-function:cubic-bezier(.83, 0, .25, .99);
        animation-fill-mode: forwards;
        animation-name: preload-out-left;  
      }
      @keyframes preload-out-left {
        0%{
        transform: translateY(0px);
        }    
        100%{
        transform: translateY(1000px); 
        }
        }

        .preload-right{
          width:10vw;
          animation-duration:1.5s;
          animation-delay: 1.8s;
          animation-timing-function:cubic-bezier(.83, 0, .25, .99);
          animation-fill-mode: forwards;
          animation-name: preload-right;}
          @keyframes preload-right {
          0%{
          transform: translateX(0%);
          }    
          100%{
          transform: translateX(300%); 
          }
          }
          
          .preload-out-right{
            animation-duration:3s;
            animation-delay: 2.8s;
            animation-timing-function:cubic-bezier(.83, 0, .25, .99);
            animation-fill-mode: forwards;
            animation-name: preload-out-right;  
          }
          @keyframes preload-out-right {
            0%{
            transform: translateY(0%);
            }    
            100%{
            transform: translateY(-1000px); 
            }
            }   
          
          .preloader-background{
          background-color:black;
          position: absolute;
          z-index: 1000;
          width:100%;
          height:100vh;
          animation-duration:1.5s;
          animation-delay: 1.8s;
          animation-timing-function:cubic-bezier(.83, 0, .25, .99);
          animation-fill-mode: forwards;
          animation-name: preloader-background;
          }

          @keyframes preloader-background {
            0%{
            transform: translateY(0%);
            }    
            100%{
            transform: translateY(-100vh); 
            }
            }


            /*
  @keyframes preloader {
  0%{
  transform: translateY(0%);
  }   
  65%{
  transform: translateY(0%);
  
  }  
  100%{
  transform: translateY(-100%);
  
  }
  }*/

  .content-center{
    position: absolute;
    z-index:101; 
    width:100%;
    height:100vh; 
    }
    
    .preload-type{
    font-family: 'pano', sans-serif;
    font-size:9vw;
    color:white;
    margin-top:-3px;
    text-transform: uppercase;  
    }
    



/*---------------------------------- PRELOADER SCREEN STYLES 
.preloader{
font-family:'pano', sans-serif;
font-size:80vw;
text-transform: uppercase; 
color:white;
position:relative;
z-index:102; 
width:100%;
height:100vh;
margin-top:0;
animation-duration:2.9s;
animation-timing-function:cubic-bezier(.83, 0, .25, .99);
animation-fill-mode: forwards;
animation-name: preloader;
}

@keyframes preloader {
0%{
transform: translateY(0%);
}   
65%{
transform: translateY(0%);

}  
100%{
transform: translateY(-100%);

}
}

/* Preloader main styles 
@keyframes preload-dark-solid {
0%{
transform: translateY(0%);
background-color:#141414;
}
65%{
background-color:#141414;
}
66%{
background-color:#141414;
}
65%{
transform: translateY(0%);
background-color:#141414;
}
100% {
transform: translateY(-100%);
background-color:#141414;
}}  

.content-center{
position: absolute;
z-index:101; 
width:100%;
height:100vh; 
}

.preload-type{
font-family: 'pano', sans-serif;
font-size:9vw;
color:white;
margin-top:-3px;
text-transform: uppercase;  
}

.preload-type-mask{
height:8vw;
width:100%;
overflow:hidden;}
  
.preload-dark-solid{
position: absolute;
z-index:101; 
width:100%;
height:100vh;
background-color:#ffffff;
animation-duration:3s;
animation-timing-function:cubic-bezier(.83, 0, .25, .99);
animation-fill-mode: forwards;
animation-name: preload-dark-solid;
overflow:hidden;
}
      
.top-buffer{
margin-top:8vw;
}

/* Experience Text 
  .preload-type.experience{
  animation-duration:2.9s;
  animation-fill-mode: forwards;
  animation-name: preload-type-experience;
  opacity:1;
  position: relative;}
  @keyframes preload-type-experience {
  0% {
  opacity:0;
  padding-bottom:0%;
  transform : translateY(0px)}
  10.9%{
  opacity:0;
  transform : translateY(0px)}
  11%{
  opacity:1;
  transform : translateY(0px)} 
  55%{
  opacity:1;
  transform : translateY(0px);
  padding-bottom:100px;
  animation-timing-function:cubic-bezier(.83, 0, .25, .99);}
  100%{
  opacity:1;
  padding-bottom:100px;
  transform : translateY(-80px);
  animation-timing-function:cubic-bezier(.83, 0, .25, .99);}
  }
  
  /* Driven Text 
  .driven{
  float:right;
  }
  .preload-type.driven{
  animation-duration:2.9s;
  animation-fill-mode: backwards;
  animation-name: preload-type-driven;
  opacity:0;}
  @keyframes preload-type-driven {
  0% {
  opacity:0;
  transform : translateY(0px)}
  13.9%{
  opacity:0;
  transform : translateY(0px)}
  14%{
  opacity:1;
  transform : translateY(0px)} 
  55%{
  opacity:1;
  transform : translateY(0px);
  animation-timing-function:cubic-bezier(.83, 0, .25, .99);}
  100%{
  opacity:1;
  transform : translateY(-80px);
  animation-timing-function:cubic-bezier(.83, 0, .25, .99);}
  }
  
  /* Brand Text 
  .brand{
  float:left;
  margin-left:4vw;
  }
  .preload-type.brand{
  animation-duration:2.9s;
  animation-delay:;
  animation-fill-mode: backwards;
  animation-name: preload-type-brand;
  opacity:0;}
  @keyframes preload-type-brand {
  0% {
  opacity:0;
  padding-bottom:0%;
  transform : translateY(0px)}
  40.9%{
  opacity:0;
  transform : translateY(0px)}
  41%{
  opacity:1;
  transform : translateY(0px)} 
  55%{
  opacity:1;
  transform : translateY(0px);
  padding-bottom:100px;
  animation-timing-function:cubic-bezier(.83, 0, .25, .99);}
  100%{
  opacity:1;
  padding-bottom:100px;
  transform : translateY(-80px);
  animation-timing-function:cubic-bezier(.83, 0, .25, .99);}
  }
  
  /* Design Text 
  .design{
  float:right;
  margin-right:8vw;
  }
  .preload-type.design{
  animation-duration:2.9s;
  animation-delay:;
  animation-fill-mode: backwards;
  animation-name: preload-type-design;
  opacity:0;}
  @keyframes preload-type-design {
  0% {
  opacity:0;
  transform : translateY(0px)}
  42.9%{
  opacity:0;
  transform : translateY(0px)}
  43%{
  opacity:1;
  transform : translateY(0px)}
  55%{
  opacity:1;
  transform : translateY(0px);
  animation-timing-function:cubic-bezier(.83, 0, .25, .99);}
  100%{
  opacity:1;
  transform : translateY(-80px);
  animation-timing-function:cubic-bezier(.83, 0, .25, .99);}
  }
----------------------------------*/

/*---------------------------------- SECTION ONE UI + NAV ELEMENTS ----------------------------------*/
.nav-text{
font-family: 'suiss', sans-serif;
font-size:21px;
color:#ffffff;
letter-spacing: 0px;
}

#navbar1{
width:100%;
height:25%;
z-index:5;
position: absolute;
height:px;
overflow:visible;
pointer-events:;
background:none !important;
}

.info-nav{
position:fixed;
z-index:10;
float:right;
top:12px;
right:20px;
visibility:visible;
}

/* Hamburger menu 
.hamburger2{
right:42px;
color:#006755;
z-index:10;
position:fixed;
opacity:1;
visibility:visible;
}

span.hamburger2{
font-size:65px;cursor:pointer;
font-family: 'roboto', sans-serif;
font-weight: 200;
margin-top:25px;
color:white;
animation-name:hamburger;
animation-timing-function: cubic-bezier(.75,.76,.16,1);
animation-duration: 2s;   
animation-delay: 2.36s;                          
-webkit-animation-fill-mode:backwards; 
-moz-animation-fill-mode:backwards;
animation-fill-mode:backwards;
}
@keyframes hamburger{
0%{transform: translateY(-250px);}
100%{transform: translateY(0px)}
}   */
  
/* Logo */
.logo{
width:58px;
padding-top:18px;
padding-left:18px;
position:fixed;
opacity:1;
z-index:2;
}

.hp-logo-anim{
animation-name:logo2;
animation-timing-function: cubic-bezier(.75,.76,.16,1);
animation-duration: 2s;   
animation-delay: 2.32s;                          
-webkit-animation-fill-mode:backwards; 
-moz-animation-fill-mode:backwards;
animation-fill-mode:backwards;}

@keyframes logo2{
0%{transform: translateY(-250px);}
100%{transform: translateY(0px);}
}

/* Hero section elements */

/* Reel, cursor, lightbox */
.reel-container{
  margin-left:60%;
  margin-top:70vh;
  position:absolute;
  z-index:5;
  float:right;
}

.play-reel-icon{
width:40px; 
height:40px; 
padding-top:8px;
padding-left:12px;
display:inline-block;
float:left;
margin-right:20px;
border-width: 1px;
border-style: solid;
border-color:#ffffff;
cursor: pointer;
}

a.play-reel-icon:hover{
  opacity:.8;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -25px 0 0 -25px;
}

.play-reel-btn{
  width:14px;
}

.reel-text-container{
  padding-top:10px;
cursor: pointer;
}

.reel-text{
white-space: nowrap;
background:none;
font-family: 'pano', sans-serif;
font-size:12px;
color:#ffffff;
text-transform: uppercase;
letter-spacing: .5px;
text-decoration:none; 
margin-top:60px;
margin-left:23px;
}

a.reel-text:hover{
color:#e7e7e7;
text-decoration: none;
}
a.reel-text:link{
  color:#e7e7e7;
  cursor: pointer;
}

.reel-container{
  display:inline-block;
  white-space: nowrap;
  cursor: none;
}

.reel-text-container{
  width: 100% ;
  overflow: hidden;white-space: nowrap; animation:; 
 
  animation-delay: 0s;
  cursor: none;
}
@keyframes typing {
  from { width: 0;   white-space: nowrap; display:inline-block;}
  to {width: 100%;  white-space: nowrap;  display:inline-block;
  }
}

.circle{
position: absolute;
width: 150px;
height: 150px;
top: 0;
left: 0;
border-radius: 80%;
backface-visibility: hidden;
text-decoration: none;
z-index: 4;
cursor: none;
opacity:1;
}

.circle-2{
  position: absolute;
width: 150px;
height: 150px;
top: 0;
left: 0;
backface-visibility: hidden;
pointer-events: none;
opacity: 0.4;

z-index: 4;
border: 1px #ffffff;
cursor: none;
}

.section-01 {
display: flex;
position: absolute;
width: 100vw;
height: 100vh;
max-width: 100%;
box-sizing: border-box;
justify-content: center;
align-content: center;
z-index:4;
}

#container-01 {
cursor: none;
touch-action: none;
z-index:4;
}

.play-btn-home{
  margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width:20px;
}


.video-modal::backdrop {
  background-color:black;
}

.modal-video-homepage{
  width:100%;
}

.video-modal{
position: fixed;
width:100%;
}

.video-modal-close{
background-color:black;
color:white;
border:none;
font-family: 'pano', sans-serif;
font-size:12px;
color:#ffffff;
text-transform: uppercase;
letter-spacing: .5px;
}
a.video-modal-close:active{
  color: white;
}
a.video-modal-close:hover{
  color: white;
}





.hero-section-type{
font-family: 'pano', sans-serif;
font-size:12px;
color:#ffffff;
text-transform: uppercase;
letter-spacing: .5px;
}

.left-rotated-text{
position:absolute;
transform: rotate(-90deg);
margin-left:-32px;
margin-top:50vh;
}

.bottom-left-text-cover{
overflow:hidden;
width:100%;
height:100vh;
position: relative;
z-index:5;
bottom:18px;
pointer-events: none;
}

.bottom-left-text{
display: block;
position:absolute;
top:100vh;
transform:translateY(-100%);
width:100%;
margin-left:16px;
animation-name:bottom-left-text;
animation-timing-function: cubic-bezier(.75,.76,.16,1);
animation-duration: 1.4s;   
animation-delay: 2.7s;                          
-webkit-animation-fill-mode:backwards; 
-moz-animation-fill-mode:backwards;
animation-fill-mode:backwards;
pointer-events: none;
}
@keyframes bottom-left-text{

}

.bottom-right-text-cover{
overflow:hidden;
width:100%;
transform:translateY(-100%);
height:100vh;
position: relative;
z-index:5;
bottom:36px;
pointer-events: none;
}

.bottom-right-text{
display: block;
position:absolute;
top:100vh;
transform:translateY(-100%);
clear: right;
right:0;
padding-right:44px;
text-align: right;
animation-name: bottom-right-text;
animation-timing-function: cubic-bezier(.75,.76,.16,1);
animation-duration: 2s;   
animation-delay: 2.75s;                          
-webkit-animation-fill-mode:backwards; 
-moz-animation-fill-mode:backwards;
animation-fill-mode:backwards;
pointer-events: none;
}

@keyframes bottom-right-text{
  0%{margin-top:30px;}
  100%{margin-top:0px;}
}

.scroll-indicator-cover{
  overflow:hidden;
  z-index:6;
  position:relative;
  top:-65px;
  transform:translateY(-200%);
  margin-bottom:65px;
  width:100%;
  height:100vh;
  left:0;
  right:0;
  pointer-events: none;
}

.scroll-indicator{
  z-index:;
  position:absolute;
  top:100vh;
  transform:translateY(-100%);
  text-align: center;
  left:11px;
  right:0;
  animation-name: scroll-indicator;
  animation-timing-function: cubic-bezier(.75,.76,.16,1);
  animation-duration: 1s;   
  animation-delay: 3.5s;                     
  -webkit-animation-fill-mode:backwards; 
  -moz-animation-fill-mode:backwards;
  animation-fill-mode:backwards;
  pointer-events: none;
  }
  
  @keyframes scroll-indicator{
    0%{margin-top:50px;}
    100%{margin-top:0px;}
  }
  
  .scroll-line-cover{
  overflow:hidden;
  z-index:;
  position:absolute;
  top:100vh;
  transform:translateY(-100%);
  width:10px;
  height:52px;
  left:50%;
  }

  .scroll-line{
  width:1px;
  height:52px;
  background-color:#ffffff;
  position:absolute;
  left:50%;
  animation-name: scroll-line;
  animation-timing-function: cubic-bezier(.75,.76,.16,1);
  animation-duration: 2s;   
  animation-delay: 3.5s;                     
  -webkit-animation-fill-mode:backwards; 
  -moz-animation-fill-mode:backwards;
  animation-fill-mode:backwards;
  pointer-events: none;
  }
  
  @keyframes scroll-line{
  0%{margin-top:52px;}
  10%{margin-top:0px;}
  30%{margin-top:0px;}
  45%{margin-top:-52px;}
  46%{margin-top:52px;}
  75%{margin-top:0px;}
  90%{margin-top:0px;}
  100%{margin-top:0px;}
  }
  
/*---------------------------------- TEXT STYLES ----------------------------------*/
/* Animated Rule */
.section_text{
margin-bottom:50px;
}

.wow.slideInLeft.homepage-rule{
width:97.5%;
height:2px;
background-color:white;
transition-property: transform;                    
transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}

.rule-container{
overflow:hidden;
}

/* section one text elements */
.section_text{
-webkit-animation:fadeIn ease-in 1;
-moz-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;
-webkit-animation-fill-mode:forwards; 
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
animation-duration:1s;
}

.wow.slideInUp.project_title{
font-family: 'pano', sans-serif;
letter-spacing:-2px;
font-weight:;
font-size:66px;
color:white;
text-transform: uppercase;
}

.porjecttitlecover{
overflow:visible;
height:70px;
width:100%;
margin-top:-5px;
margin-left:-1px;
margin-bottom:15px;
background-color:;
}

.New-Project-Title-Cover{
overflow:hidden;
height:70px;
}

.fadeInUp.project_description{
margin-top:15px;
font-family: 'suiss', sans-serif;
font-weight: 300;
font-size:20px;
color: white;
margin-top:;
animation-delay:;
animation-duration:.8s;
}

.wow.project_title{
  font-family: 'suiss', sans-serif;
font-size: 66px;
color:#ffffff;
font-kerning: 2em;
font-weight: 400;
}

/*---------------------------------- FULLPAGE SECTION LAYOUT SETTINGS ----------------------------------*/
/* Video Dark */
#hp-hero-overlay{
position: absolute;
right: 0;
bottom: 0;
top:0;
right:0;
width: 100%;
height: 100%;
background-size: 100% 100%;
background-color: black; /* in case the video doesn't fit the whole page*/
background-image: /* our video */;
background-position: center center;
background-size: contain;
object-fit: cover; /*cover video background */
z-index:3;
opacity:1;
}

/* Video Mid */
#myVideo{
position: absolute;
right: 0;
bottom: 0;
top:0;
right:0;
width: 100%;
height: 100%;
background-size: 100% 100%;
background-color: black; /* in case the video doesn't fit the whole page*/
background-image: /* our video */;
background-position: center center;
background-size: contain;
object-fit: cover; /*cover video background */
z-index:3;
opacity:.8;
}

/* Standard */
#myVideo-02{
position: absolute;
right: 0;
bottom: 0;
top:0;
right:0;
width: 100%;
height: 100%;
background-size: 100% 100%;
background-color: black; /* in case the video doesn't fit the whole page*/
background-image: /* our video */;
background-position: center center;
background-size: contain;
object-fit: cover; /*cover video background */
z-index:3;
opacity:1;
}

/* Layer with position absolute in order to have it over the video */
#section0 .layer{
position: absolute;
z-index: 4;
width: 100%;
left: 0;
top: 43%;
-webkit-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}

/* Background Images */
#section1{
background-image: url('HP_Desktop_apple-Image.jpg');
background-size:cover;
background-position: 50% 50%;
}
#section2{
background-image: url('HP_Desktop_Pax-Image-06.jpg');
background-size:cover;
background-color: black;
background-position: 50% 50%;
}
#section3{
background-image: url('');
background-size:cover;
background-position: 50% 50%;
background-color: black;
}
#section4{
background-image: url('sol_republic_banner_img_4.jpg');
background-size:cover;
background-position: 50% 50%;
}
#section5{
background-image: url('altra_12.jpg');
background-size:cover;
background-position: 50% 50%;
}
#section6{
background-image: url('chromatic_content_club_main_img_3.jpg');
background-size:cover;
background-position: 50% 50%;
}
#section7{
background-image: url('about_being_seen_banner_img_8.jpg');
background-size:cover;
background-position: 50% 50%;
}
.section-video{
background-image: url('Era-Life-01.mp4');
background-size: cover;
background-color: black; /* in case the video doesn't fit the whole page*/
background-position: 50% 50%;
}

/* CTA's */
.new_cta_btn{
margin-top:12px;
font-family: 'suiss', sans-serif;
font-weight: 500;
font-size: 16px;
font-size: 1.4rem;

color: #fff;
border: 1px solid #fff;
padding: 10px 20px;
display: inline-block;
position: relative;
overflow: hidden;
cursor: pointer;
z-index:12;
padding-top:%;
-webkit-transition: background-color .2s ease-out;
-moz-transition: background-color .2s ease-out;
-o-transition: background-color .2s ease-out;
transition: background-color .2s ease-out;
}

.outsidecta{
margin-top:;
overflow:hidden;    
animation:slideInUp;
animation-duration: 1s;
}

.new_cta_btn:hover{
color:black;
animation-timing-function: ease-in;
border: 1px solid white;
background-color:white;
}

.button1{
font-family: 'Roboto', sans-serif;
font-weight: 500;
font-size: 12px;
font-size: 1.2rem;
text-transform: uppercase;
color: #fff;
border: 1px solid #fff;
border-radius: 20px;
padding: 10px 20px;
margin-top:;
display: inline-block;
position: relative;
overflow: hidden;
transition: background-color 0s linear;
z-index:12;
padding-top:-10%;
}

.button_sliding_bg {
font-family: 'Roboto', sans-serif;
font-weight: 500;
color: white;
background: transparent;
padding: 7px 14px;
margin: ;
margin-top:;
border: 1px solid white;
font-size: 13px;
letter-spacing: .5px;
text-transform: uppercase;
border-radius: 30px;
display: inline-block;
text-align: center;
cursor: pointer;
box-shadow: inset 0 0 0 0 grey;
-webkit-transition: all ease 0.8s;
-moz-transition: all ease 0.8s;
transition: all ease 0.8s;
}

.button_sliding_bg:hover {
box-shadow: inset 0 0 0 700px #272727;
color: white;
border:1px solid ;
}

.wow.fadeInUp.cta1{
float:right;
margin-right:2.5%;
margin-top:-115px;
font-family: 'Roboto', sans-serif;
font-weight: 500;
opacity:0;
-webkit-animation:fadeIn ease-in 1;
-moz-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;
-webkit-animation-fill-mode:forwards; 
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
animation-duration:1s;
-webkit-animation-delay:;
-moz-animation-delay:.;
animation-delay:;
}

.text-link{
  text-decoration: underline;
  color:#ffffff;
}

.text-link:hover{
  color:#ffffff; 
}

/* section two /uses section2 before all wow elements/*/
.section2_text{
opacity:0;
-webkit-animation:fadeIn ease-in;
-moz-animation:fadeIn ease-in;
animation:fadeIn ease-in;
-webkit-animation-fill-mode:forwards; 
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
-webkit-animation-duration:1s;
-moz-animation-duration:;
animation-duration:;
-webkit-animation-delay:;
-moz-animation-delay:;
animation-delay:;
}

.wow.fadeInUp.project2_title{
font-family: 'Roboto', sans-serif;
font-weight: 700;
animation-delay:;
animation-duration:.1;
color:white;   
font-size: 1em;
font-kerning: 2em;
}

.wow.fadeInUp.project2_description{
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size:.3em;
color: white;
margin-top:-2%;
animation-delay:.6s;
animation-duration:.8s;
}

.wow.fadeInUp.cta2{
font-family: 'Roboto', sans-serif;
font-weight: 500;
opacity:0;
-webkit-animation:fadeIn ease-in 1;
-moz-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;
-webkit-animation-fill-mode:forwards; 
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
animation-duration:1s;
-webkit-animation-delay:;
-moz-animation-delay:;
animation-delay:;
margin-top:-3%;
}




















/*--------------------------------- PROJECT PAGE TEMPLATE ---------------------------------*/
#scroll-container-project{
  width:100%;
  overflow:hidden;
  position: relative;
  pointer-events: auto;
  }
.transition-fade{
  overflow:hidden;
}


/* Project Fixed Nav Elements */
.logo-project-anim{
animation-name:logo-project;
animation-timing-function: cubic-bezier(.75,.76,.16,1);
animation-duration: 2s;   
animation-delay: .4s;                          
-webkit-animation-fill-mode:backwards; 
-moz-animation-fill-mode:backwards;
animation-fill-mode:backwards;
}
@keyframes logo-project{
0%{transform: translateY(-250px);}
100%{transform: translateY(0px)}
}

.logo-darkmode{
opacity:0;
}

.hamburger-project{

color:#ffffff;
}

span.hamburger-project{
font-size:65px;cursor:pointer;
font-family: 'roboto', sans-serif;
font-weight: 200;
margin-top:25px;
color:white;
animation-name:hamburger-project;
animation-timing-function: cubic-bezier(.75,.76,.16,1);
animation-duration: 2s;   
animation-delay: .45s;                         
-webkit-animation-fill-mode:backwards; 
-moz-animation-fill-mode:backwards;
animation-fill-mode:backwards;
}
@keyframes hamburger-project{
0%{transform: translateY(-250px);}
100%{transform: translateY(0px)}
}  

/* Page Body styling */ 
#sol-republic-page{
color:#ffffff;
position:relative;  
overflow: hidden;
z-index: 2;
backface-visibility: hidden;
transform-style: preserve-3d;
width: 100%;
overflow-x: hidden;
}

.section_1_contain{
height:100vh;
width:100%;
position:relative;

}   

/* Main Typography Styling */ 
.standard-headlines-cover{
width:100%;
height:63px;
overflow:hidden;
}

.standard-headlines{
font-family: 'pano', sans-serif;
letter-spacing:0px;
font-size:55px;
line-height:64px;
color:white;
text-transform: uppercase;  
margin-top:-5px;
}

.standard-body-copy{
font-family: 'suiss', sans-serif;
letter-spacing:2;
font-size:24px;
line-height:36px;
color:#ffffff;
max-width: 800px;
}

.no-copy-padding{
margin-top:-80px;
}

.body-copy-reduced{
font-family: 'suiss', sans-serif;
letter-spacing:2;
font-size:22px;
line-height:39px;
color:#d8d8d8;
margin-top:-30px;
}

.copy-callouts{
margin-top:-30px;
}

.copy-block{
margin-top:80px;
}

/* Mobile copy hiding */ 
.mobile-copy-block{
display:none;
}  

.lightmode-text{
 color:#000000; 
}

.wow.slideInLeft.project-rule{
width:100%;
height:2px;
background-color:white;
transition-property: transform;                    
transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}

.wow.slideInLeft.rule.project-sign-posting-rule{
width:100%;
height:3px;
}

.standard-headlines-cover.project-sign-posting-headlines{
margin-bottom:2vw;
}

/* Noise Effect*/ 
.noise{
height: 100vh;
background-image: url("/css/paper_1_@2X.png");
position: fixed;
z-index: 0;
opacity:.4;
pointer-events: none;
}

.noise:after{
animation: grain 8s steps(10) infinite;
background-image: url("/css/paper_1_@2X.png");
content: "";
height: 300%;
left: -50%;
opacity: 0.3;
position: fixed;
top: -110%;
width: 300%;
pointer-events: none;
}

@keyframes grain {
0%, 100% { transform:translate(0, 0) }
10% { transform:translate(-5%, -10%) }
20% { transform:translate(-15%, 5%) }
30% { transform:translate(7%, -25%) }
40% { transform:translate(-5%, 25%) }
50% { transform:translate(-15%, 10%) }
60% { transform:translate(15%, 0%) }
70% { transform:translate(0%, 15%) }
80% { transform:translate(3%, 35%) }
90% { transform:translate(-10%, 10%) }
}

/* Video Lightbox */ 
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 15vh; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100vh; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
.modal-content {
margin: auto;
display: block;
width: 90%;
}
.modal-content, #caption {  
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
#img01{
z-index:11;position:relative;width:85%;margin-left:7.5%;
}
@-webkit-keyframes zoom {
from {-webkit-transform:scale(0)} 
to {-webkit-transform:scale(1)}
}
@keyframes zoom {
from {transform:scale(0)} 
to {transform:scale(1)}
}
.close {
position: absolute;
top: 15px;
right: 35px;
color: #ffffff;
font-size: 290px;
font-weight: bold;
transition: 0.3s;
z-index: 4;
}
.close:hover,
.close:focus {
color: #ffffff;
text-decoration: none;
cursor: pointer;
}

/* Page Body Styling */ 
  .section-spacer{
  width:100%;
  height:200px;
  }

  .spacer-before-rule{
  width:100%;
  height:2vw;
  }

  .project-name-container{
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  position:absolute;
  z-index:10;
  width:100%;
  height:100%;
  pointer-events: none;
  text-align: center;
  }
  
  .project-name{
  text-align: center;
  font-family: 'pano', sans-serif;
  letter-spacing:-2px;
  font-weight:;
  font-size:6.5vw;
  color:#3d3d3d;
  text-transform: uppercase;
  }
  
  .hero-image-centering{
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  height:100%;
  width:100%;
  position:absolute;
  }

  .hero-image{
  width:100%;
  position:relative;
  margin-top:100vh;
  }

  .hero-video-mobile{
    display: none;
    width:100%;
    position:relative;
    margin-top:100vh;
    }

  .swap-desktop-video{
  width:100%;
  }

  .swap-mobile-video{
  display: none;
  width:100%;
  position:relative;
  }

  .swap-mobile-no-padding{
  display: none;
  width:100%;
  position:relative;
  }

  .video-cover{
  overflow:hidden;
  min-height:100%;
  margin-top:30px;
  margin-bottom:-10px;
  }

  .video-play-btn{
  font-family: 'pano', sans-serif;
  letter-spacing:.1px;
  text-transform: uppercase; 
  color:white;
  position: absolute;
  z-index: 11;
  font-size:26px;
  }

  .playbtn{
  height:20px;
  margin-top:24px;
  display:inline-block;
  margin-right:10px;
  }
  
  .video-play-btn:hover{
  text-decoration: underline;
  color:white;
  cursor:pointer;
  }

  .hero-video{
  width:100%;
  position:relative;
  opacity:1;
  z-index:10;
  transition: transform .2s;
  transition-timing-function: cubic-bezier(0.83, 0, 0.25, .99);
  }

  .video-anim{
  opacity:0;
  }

  .video-anim-02{
    opacity:0;
    }

  .video-anim-03{
    opacity:0;
    }

  .video-anim-04{
    opacity:0;
    }

  .section-content{
  margin-top:200px;
  }

  .body-copy-anim{
  opacity:0;
  }

  .body-copy-anim-02{
    opacity:0;
  }

  .body-copy-anim-03{
    opacity:0;
  }

  .body-copy-anim-04{
    opacity:0;
  }

  .iFrame-wrapper{
  height:550px;
  margin-left:20px;
  margin-right:20px;
  background-color:#333333;
  margin-bottom:200px;
  }

  .iFrame-cover{
  height:550px;
  overflow:hidden;
  }

  .image-solid-fill{
  position: absolute;
  z-index: 2;
  background-color: #333333;  
  width:100%;
  height:100%;
  animation-fill-mode: forwards;
  }

  /*Standard image width 100%*/
  .image-100{
  width:100%;
  }

  .web-comp{
  width:100%;
  }

  .web-comp-anim-01{
  opacity:1;
  }

  .web-comp-anim-02{
  margin-top:;
  opacity:1;
  }
    
  .standard-image{
  width:100%;
  opacity:0;
  }

  .standard-image-02{
  width:100%;
  opacity:0;
  }

  .standard-image-03{
  width:100%;
  opacity:0;
  }

  .standard-image-04{
  width:100%;
  opacity:0;
  }

  .standard-image-05{
  width:100%;
  opacity:0;
  }

  .standard-image-06{
  width:100%;
  opacity:0;
  }

  .standard-image-07{
  width:100%;
  opacity:0;
  }

  .standard-image-08{
  width:100%;
  opacity:1;
  }

  .standard-image-09{
  width:100%;
  opacity:1;
  }

  .standard-image-10{
  width:100%;
  }

  .standard-image-11{
  width:100%;
  margin-top:-250px;
  }

  .standard-image-12{
  width:100%;
  }

  .standard-image-13{
  width:100%;
  }

  .ipad-frame-01{
    width:100%;
  }

  .ipad-frame-02{
    width:100%;
  }

  .ipad-frame-03{
    width:100%;
  }

  /*Video iPad Mask*/
  .video-mask{
  object-fit: cover;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow:hidden;
  border-radius:5%;
  }

  .masked-video{
  height:100%;
  width:100%;
  }

  .standard-image-14{
  width:100%;
  }

  .standard-image-15{
  width:100%;
  }

  .interactive-gallery-overlay{
  width:100%;
  height:100vh;
  position: absolute;
  z-index: 10;
  background-color:black;
  opacity:1;
  }

  .mobile-mockup{
  margin-top:5%;
  width:30%;
  }

  .mobile-left{
  float:left;
  }

  .mobile-right{
  float:right;
  }

  .mobile-center{
  margin-top:5%;
  margin-left:5%;
  }

  .half-image-left{
  width:100%;
  }

  .half-image-right{
  width:100%;
  }

  .half-image-fade{
  opacity:0;
  }

  .project-routing{
  background-color:#000000;
  width:100%;
  height:300px; 
  margin-top:50px;
  }

  #trigger-4{
  margin-top:120px;
  }

  #trigger-13{
  clear: both;
  display: table;
  }

  /* iPad frame sol republic */ 
  .row.no-gutters.sol-republic-video-frame{
  margin-left:15px;
  margin-right:15px;
  }

  /* Routing / Next Project */ 
  .project-routing{
  width:100%;
  overflow:hidden;
  padding-left:1.5vw;
  }

  .link {
  font-family: 'pano', sans-serif;
  color:#ffffff;
  text-transform: uppercase; 
  height: 7vw;
  align-items: center;
  text-decoration: none;
  display: flex;
  }
  
  .mask {
  position: relative;
  padding: 0vw;
  height: 7vw;
  overflow: hidden;
  margin-top:6vw;
  }
  
  .link-container {

  transition: transform 0.4s ease;
  }
  
  .title {
  display: block;
  font-size:7vw;
  line-height: 7vw;
  transition: transform 0.4s ease;
  }
  
  .link-title1 {
  transform-origin: right center;
  }
  
  .link-title2 {
  transform-origin: left center;
  transform: rotate(20deg);
  }
  
  a.link-title1:hover {
  text-decoration: none;
  color:white;
    }
  
  a.link-title2:hover {
  text-decoration: none;
  color:white;
  }
  
  .icon:nth-child(2) {
  transform: translate(-1vw);
  }
  
  .link:hover .link-container {
  transform: translateY(-6.9vw);
  }
  
  .link:hover .link-title1 {
  transform: rotate(20deg);
  }
  
  .link:hover .link-title2 {
  transform: rotate(0);
  }
  
  .link:hover .icon:first-child {
  transform: translate(1vw);
  }
  
  .link:hover .icon:nth-child(2) {
  transform: translate(0vw);
  }
  
  /*  icon　*/
  .link-icon {
  font-family: 'pano', sans-serif;
  color:#ffffff;
  font-size:9vw;
  line-height: 7vw;
  position: relative;
  width: 14vw;
  height: 10vw;
  display: flex;
  margin-top:6vw;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  }
  
  .icon.link-icon-text1 {
  position: relative;
  width: 20vw;
  height: 20vw;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: ;
  overflow: hidden;
  transition: transform 0.3s ease-in-out;
  }
  
  .link:hover .icon:first-child {
  transform: translate(15vw);
  }
  
  .icon:nth-child(2) {
  transform: translate(-15vw);
  }
  
  .icon {
  display: block;
  position: absolute;
  transition: transform 0.3s ease;
  }

  .rule-container.project-routing{
  width:100%;
  padding-left:0;
  }

  .project-routing-lightmode{
  background-color:#F1F1F1;
  }

  .project-routing-darkmode{
    background-color:#1d1d1f;
    }

.Password-CTA{
border-color: #ffffff;
border-width: 2px;
border-style: solid;
 width:270px;
 height:80px;
 border-radius:80px;
 Color:#ffffff;
 padding:;
 margin-top:160px;
 text-align: center;
 display: table-cell;
 vertical-align: middle;
 padding-top:5px;
 transition: 0.6s;
 transition-timing-function: ease;
}

.Password-CTA:hover{
Color:#333333;
background-color:white; 
}

.Password-CTA-Text{
font-family: 'pano', sans-serif;
text-transform: uppercase;
text-decoration: none;
}











/*---------------------------------- HOMEPAGE MEDIA QUERIES ----------------------------------*/

/*--------------------------- SMALL MEDIA QUERY (>499px) ---------------------------*/
@media only screen and (max-width : 499px) {
  
  /* Preloader styles */
  .preloader{
    font-family:'pano', sans-serif;
    font-size:100vw;
    text-transform: uppercase; 
    color:white;
    position:relative;
    z-index:102; 
    animation-duration:2.9s;
    animation-timing-function:cubic-bezier(.83, 0, .25, .99);
    animation-fill-mode: forwards;
    animation-name: preloader;
    }
  
  .type-container{
    display: flex; /* Enables flexbox layout */
    justify-content: center; /* Optional: Adjust spacing between divs */
    align-items: center; /* Optional: Aligns items vertically */
    gap: 8px; /* Optional: Space between boxes */
    width:100%;
    vertical-align: center;
  }

  .preload-type{
    font-family: 'pano', sans-serif;
    font-size:20vw;
    color:white;
    margin-top:-3px;
    text-transform: uppercase;  
    }

  .preload-type-mask{
    height:22vw;
    overflow:hidden;}
  
  .preload-H{
    animation-duration:2.4s;
    animation-timing-function:cubic-bezier(.83, 0, .25, .99);
    animation-fill-mode: forwards;
    animation-name: preload-H;}
    @keyframes preload-H {
    0%{
    transform: translateY(100%);
    }   
    65%{
    transform: translateY(0%); 
    }  
    100%{
    transform: translateY(0%);
    }
    }
    .preload-2{
      animation-duration:2.4s;
      animation-timing-function:cubic-bezier(.83, 0, .25, .99);
      animation-fill-mode: forwards;
      animation-name: preload-2;}
      @keyframes preload-2 {
      0%{
      transform: translateY(-100%);
      }   
      65%{
      transform: translateY(0%); 
      }  
      100%{
      transform: translateY(0%);
      }
      }
  
      .preload-left{
        animation-duration:1.5s;
        animation-delay: 1.8s;
        animation-timing-function:cubic-bezier(.83, 0, .25, .99);
        animation-fill-mode: forwards;
        animation-name: preload-left;}
        @keyframes preload-left {
        0%{
        transform: translateX(0%);
        }    
        100%{
        transform: translateX(-300%); 
        }
        }
  
        .preload-out-left{
          width:22vw;
          animation-duration:3s;
          animation-delay: 2.8s;
          animation-timing-function:cubic-bezier(.83, 0, .25, .99);
          animation-fill-mode: forwards;
          animation-name: preload-out-left;  
        }
        @keyframes preload-out-left {
          0%{
          transform: translateY(0px);
          }    
          100%{
          transform: translateY(1000px); 
          }
          }
  
          .preload-right{
            width:22vw;
            animation-duration:1.5s;
            animation-delay: 1.8s;
            animation-timing-function:cubic-bezier(.83, 0, .25, .99);
            animation-fill-mode: forwards;
            animation-name: preload-right;}
            @keyframes preload-right {
            0%{
            transform: translateX(0%);
            }    
            100%{
            transform: translateX(300%); 
            }
            }
            
            .preload-out-right{
              animation-duration:3s;
              animation-delay: 2.8s;
              animation-timing-function:cubic-bezier(.83, 0, .25, .99);
              animation-fill-mode: forwards;
              animation-name: preload-out-right;  
            }
            @keyframes preload-out-right {
              0%{
              transform: translateY(0%);
              }    
              100%{
              transform: translateY(-1000px); 
              }
              }   
            
            .preloader-background{
            background-color:black;
            position: absolute;
            z-index: 1000;
            width:100%;
            height:100vh;
            animation-duration:1.5s;
            animation-delay: 1.8s;
            animation-timing-function:cubic-bezier(.83, 0, .25, .99);
            animation-fill-mode: forwards;
            animation-name: preloader-background;
            }
  
            @keyframes preloader-background {
              0%{
              transform: translateY(0%);
              }    
              100%{
              transform: translateY(-100vh); 
              }
              }
    
    .content-center{
      position: absolute;
      z-index:101; 
      width:100%;
      height:100vh; 
      }
      
      




  /* Section-1 mobile top menu style elements */
  .scroll-line{
  display: none;
  }
  .scroll-indicator{
  display: none;
  }

  .bottom-left-text{
  display: none;
  }
  .bottom-right-text{
  display: none;
  }
  
  /* Navigation Elements */
  .logo{

  position:fixed; 
  opacity:1;}
  
.circle{
  opacity:0;
}

#container-01{
  visibility: hidden;
  touch-action: none;
}

  /* Hamburger menu */
.hamburger2{
  color:#006755;
  z-index:10;
  position:fixed;
  opacity:.9;
  visibility:visible;
  }
  
  span.hamburger2{
  margin-top:7px;
  margin-right:-19px;
  font-size:65px;cursor:pointer;
  font-family: 'roboto', sans-serif;
  font-weight: 200;
  color:white;
  animation-name:hamburger;
  animation-timing-function: cubic-bezier(.75,.76,.16,1);
  animation-duration: 2s;   
  animation-delay: 2.36s;                          
  -webkit-animation-fill-mode:backwards; 
  -moz-animation-fill-mode:backwards;
  animation-fill-mode:backwards;
  }

  span.hamburger-project{
  margin-top:7px;
  margin-right:-19px;
  }

  /* Background Images */
  #section1{
  background-image: url('HP_Mobile_apple-Image.jpg');
  background-size:cover;
  }        
  
  #section2{
  background-image: url('sol_republic_banner_img_4_mobile.jpg');
  background-size:cover;
  }  
  
  #section3{
  background-image: url('GoPro_03_M.jpg');
  background-size:cover;
  background-color: black;
  }  
  
  #section4{
  background-image: url('sol_republic_banner_img_4_mobile.jpg');
  background-size:cover;
  }  
  
  #section5{
  background-image: url('Altra_Mobile_Banner_06.jpg');
  background-size:cover;
  }  
  
  #section6{
  background-image: url('chromatic_hp_banner_mobile.jpg');
  background-size:cover;
  }       
  
  #section7{
  background-image: url('about_being_seen_banner_img_mobile.jpg');
  background-size:cover;
  }  

  /* FP Overides */
  .fp-tableCell{
    display: table-cell;
    text-align: left;
    vertical-align: bottom;
    width: 100%;
    padding-bottom:42px;
    padding-left:4%;
    padding-right:4%;
    }

    #fp-nav ul li{
    border-radius: 0%;
    width: 30px;
    height: 2px;
    margin: 25px 0 0 -10px;
    background: transparent;
    background-color:white;
    box-sizing: border-box;
    border: 0px solid #ffffff;        
    }

  /* Mobile typography */
  .section_text{
  padding-top:98%;       
  }

  .wow.slideInUp.project_title{
    margin-top:3vw;
    margin-bottom:8vw;
    margin-left:139px;
    float:left;
    margin-top:8px;
    font-family: 'pano', sans-serif;
    letter-spacing:-.2vw;
    font-weight:;
    font-size:8.1vw;
    color:white;
    text-transform: uppercase;
    }
      
    .porjecttitlecover{
    overflow:visible;
    height:86px;
    width:200%;
    margin-top:-5px;
    margin-left:-140px;
    background-color:;
    }
      
    .New-Project-Title-Cover{
    width:100%;
    overflow:hidden;
    height:70px;
    }
      
    .fadeInUp.project_description{
    margin-bottom:5vw;
    margin-top:-3vw;
    margin-left:140px;
    font-family: 'suiss', sans-serif;
    font-weight: 300;
    font-size:5vw;
    color: white;
    animation-delay:;
    animation-duration:.8s;
    }
      
    .wow.fadeInUp.cta1{
    margin-left:140px;
    float:left;
    margin-top:0px;
    }

    .wow.slideInLeft.homepage-rule{
    display: none;
    }
    

  }
  
  /*--------------------------- MEDIUM MEDIA QUERY (>725px) ---------------------------*/
  @media only screen and (min-width : 500px) and (max-width : 725px){
  
/* Preloader styles */
.preloader{
  font-family:'pano', sans-serif;
  font-size:100vw;
  text-transform: uppercase; 
  color:white;
  position:relative;
  z-index:102; 
  animation-duration:2.9s;
  animation-timing-function:cubic-bezier(.83, 0, .25, .99);
  animation-fill-mode: forwards;
  animation-name: preloader;
  }

.type-container{
  display: flex; /* Enables flexbox layout */
  justify-content: center; /* Optional: Adjust spacing between divs */
  align-items: center; /* Optional: Aligns items vertically */
  gap: 8px; /* Optional: Space between boxes */
  width:100%;
  vertical-align: center;
}

.preload-type{
  font-family: 'pano', sans-serif;
  font-size:17vw;
  color:white;
  margin-top:-3px;
  text-transform: uppercase;  
  }

.preload-type-mask{
  height:17vw;
  overflow:hidden;}

.preload-H{
  animation-duration:2.4s;
  animation-timing-function:cubic-bezier(.83, 0, .25, .99);
  animation-fill-mode: forwards;
  animation-name: preload-H;}
  @keyframes preload-H {
  0%{
  transform: translateY(100%);
  }   
  65%{
  transform: translateY(0%); 
  }  
  100%{
  transform: translateY(0%);
  }
  }
  .preload-2{
    animation-duration:2.4s;
    animation-timing-function:cubic-bezier(.83, 0, .25, .99);
    animation-fill-mode: forwards;
    animation-name: preload-2;}
    @keyframes preload-2 {
    0%{
    transform: translateY(-100%);
    }   
    65%{
    transform: translateY(0%); 
    }  
    100%{
    transform: translateY(0%);
    }
    }

    .preload-left{
      animation-duration:1.5s;
      animation-delay: 1.8s;
      animation-timing-function:cubic-bezier(.83, 0, .25, .99);
      animation-fill-mode: forwards;
      animation-name: preload-left;}
      @keyframes preload-left {
      0%{
      transform: translateX(0%);
      }    
      100%{
      transform: translateX(-300%); 
      }
      }

      .preload-out-left{
        width:18vw;
        animation-duration:3s;
        animation-delay: 2.8s;
        animation-timing-function:cubic-bezier(.83, 0, .25, .99);
        animation-fill-mode: forwards;
        animation-name: preload-out-left;  
      }
      @keyframes preload-out-left {
        0%{
        transform: translateY(0px);
        }    
        100%{
        transform: translateY(1000px); 
        }
        }

        .preload-right{
          width:18vw;
          animation-duration:1.5s;
          animation-delay: 1.8s;
          animation-timing-function:cubic-bezier(.83, 0, .25, .99);
          animation-fill-mode: forwards;
          animation-name: preload-right;}
          @keyframes preload-right {
          0%{
          transform: translateX(0%);
          }    
          100%{
          transform: translateX(300%); 
          }
          }
          
          .preload-out-right{
            animation-duration:3s;
            animation-delay: 2.8s;
            animation-timing-function:cubic-bezier(.83, 0, .25, .99);
            animation-fill-mode: forwards;
            animation-name: preload-out-right;  
          }
          @keyframes preload-out-right {
            0%{
            transform: translateY(0%);
            }    
            100%{
            transform: translateY(-1000px); 
            }
            }   
          
          .preloader-background{
          background-color:black;
          position: absolute;
          z-index: 1000;
          width:100%;
          height:100vh;
          animation-duration:1.5s;
          animation-delay: 1.8s;
          animation-timing-function:cubic-bezier(.83, 0, .25, .99);
          animation-fill-mode: forwards;
          animation-name: preloader-background;
          }

          @keyframes preloader-background {
            0%{
            transform: translateY(0%);
            }    
            100%{
            transform: translateY(-100vh); 
            }
            }

  /*mobile top menu style elements*/
  .bottom-left-text{
  display: none;
  }
  .bottom-right-text{
  display: none;
  }

  /* Main Page Text Styles */
  .wow.slideInUp.project_title{
    margin-left:140px;
    float:left;
    margin-top:5px;
    font-family: 'pano', sans-serif;
    letter-spacing:-2px;
    font-weight:;
    font-size:44px;
    color:white;
    text-transform: uppercase;
    }
      
    .porjecttitlecover{
    overflow:visible;
    height:86px;
    width:200%;
    margin-top:-5px;
    margin-left:-140px;
    background-color:;
    }
      
    .New-Project-Title-Cover{
    width:100%;
    overflow:hidden;
    height:70px;
    }
      
    .fadeInUp.project_description{
    margin-bottom:20px;
    margin-top:-5px;
    margin-left:140px;
    font-family: 'suiss', sans-serif;
    font-weight: 300;
    font-size:20px;
    color: white;
    animation-delay:;
    animation-duration:.8s;
    }
      
    .wow.fadeInUp.cta1{
    margin-left:140px;
    float:left;
    margin-top:0px;
    }
  }

  /*--------------------------- SMALL DESKTOP MEDIA QUERY (726px - 999) ---------------------------*/
  @media only screen and (min-width : 726px) and (max-width : 999px){
  
    /* Preloader styles */
    .preloader{

    }

    /* Main Page Text Styles */
    .wow.slideInUp.project_title{
    margin-top:5px;
    font-family: 'pano', sans-serif;
    letter-spacing:-2px;
    font-weight:;
    font-size:48px;
    color:white;
    text-transform: uppercase;
    }
      
    .porjecttitlecover{
    overflow:visible;
    height:70px;
    width:100%;
    margin-top:-5px;
    margin-left:-1px;
    margin-bottom:15px;
    background-color:;
    }
      
    .New-Project-Title-Cover{
    overflow:hidden;
    height:70px;
    }
      
    .fadeInUp.project_description{
    margin-top:0px;
    font-family: 'suiss', sans-serif;
    font-weight: 300;
    font-size:20px;
    color: white;
    margin-top:;
    animation-delay:;
    animation-duration:.8s;
    }
      
    .wow.fadeInUp.cta1{
    margin-top:-105px;
    }
  
  }


/*--------------------------- LARGE MEDIA QUERY (<1600px) ---------------------------*/
@media only screen and (min-width : 1600px) {

  .wow.fadeInUp.project2_title{
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  animation-delay:;
  animation-duration:.1;
  color:white;   
  font-size: 1em;
  font-kerning: 2em;
  }
      
  .wow.fadeInUp.project2_description{
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  font-size:.3em;
  color: white;
  margin-top:-2%;
  animation-delay:.6s;
  animation-duration:.8s;
  }
  
  .wow.fadeInUp.section2_text{
  opacity:0;
  -webkit-animation:fadeIn ease-in 1;
  -moz-animation:fadeIn ease-in 1;
  animation:fadeIn ease-in 1;
  -webkit-animation-fill-mode:forwards; 
  -moz-animation-fill-mode:forwards;
  animation-fill-mode:forwards;
  -webkit-animation-duration:1s;
  -moz-animation-duration:1s;
  animation-duration:1s;
  -webkit-animation-delay:.6s;
  -moz-animation-delay:.6s;
  animation-delay:.6s;
  }
  
  .wow.slideInUp.project2_title{
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  animation-delay:.3s;
  animation-duration:.8s;
  color:white;
  font-size: 1.2em;
  font-kerning: 2em;
  }
  
  .wow.fadeInUp.project2_description{
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  font-size:.4em;
  padding-top:14px;
  padding-bottom:38px;
  }
  
  .wow.fadeInUp.cta2{
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  opacity:0;
  -webkit-animation:fadeIn ease-in 1;
  -moz-animation:fadeIn ease-in 1;
  animation:fadeIn ease-in 1;
  -webkit-animation-fill-mode:forwards; 
  -moz-animation-fill-mode:forwards;
  animation-fill-mode:forwards;
  -webkit-animation-duration:1s;
  -moz-animation-duration:1s;
  animation-duration:1s;
  -webkit-animation-delay:.6s;
  -moz-animation-delay:.6s;
  animation-delay:.6s;
  margin-top:-3%;
  }
  }
  


















/*---------------------------------- Project MEDIA QUERIES ----------------------------------*/

/*--------------------------- SMALL MEDIA QUERY (>499px) ---------------------------*/
@media only screen and (max-width : 500px) {
/* Navigation Elements */


/* Section One */
  .project-name{
  position:relative;
  font-family: 'pano', sans-serif;
  letter-spacing:-2px;
  font-weight:;
  font-size:12.1vw;
  color:#3d3d3d;
  text-transform: uppercase;
  }
  
  .project-name.apple-Project-name{
  position:relative;
  font-family: 'pano', sans-serif;
  letter-spacing:-2px;
  font-weight:;
  font-size:16vw;
  color:#3d3d3d;
  text-transform: uppercase;
  }

  .project-name.gopro-project-name{
  position:relative;
  font-family: 'pano', sans-serif;
  letter-spacing:-2px;
  font-weight:;
  font-size:16vw;
  color:#3d3d3d;
  text-transform: uppercase;
  }

  .project-name.sol-republic-Project-name{
  position:relative;
  font-family: 'pano', sans-serif;
  letter-spacing:-1px;
  font-weight:;
  font-size:11.6vw;
  line-height:1;
  text-transform: uppercase;
  }

  .project-name-container{
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  position:absolute;
  z-index:1;
  width:100%;
  height:20%;
  margin-top:14vh;
  text-align: center;
  }
    
  .hero-image-centering{
  height:80%;
  width:100%;
  position:relative;
  padding-left:28px;
  padding-right:28px;
  margin-top:-70vh;
  }

  .hero-image{
  display:none;
  }

  .hero-video-mobile{
  display: block;
  }

  .swap-desktop-video{
  display:none;
  }
  
  .swap-mobile-video{
  display: block;
  margin-top:23vw;
  }

  .swap-mobile-no-padding{
  display: block;
  }

  /* Video Modal styling */
  .modal {
  padding-top: 40vh; /* Location of the box */
  }
  #img01{
  z-index:11;position:relative;width:100%;margin-left:0%;
  }

  /* Main Content padding */
  .main-content-container{
  margin-right:15px;
  margin-left:15px;
  }

    /* Main Typography Styling */ 
    .intro-copy-block{
      display:none;
    }
  
    .mobile-copy-block{
    display:block;
    }
  
    .standard-headlines-cover{
    width:100%;
    height:50px;
    overflow:hidden;
    }
      
    .standard-headlines{
    font-family: 'pano', sans-serif;
    letter-spacing:0px;
    font-size:38px;
    line-height:40px;
    color:white;
    text-transform: uppercase;  
    max-width:600px;
    }
  
    .Headline-mobile{
    font-family: 'pano', sans-serif;
    letter-spacing:0px;
    font-size:38px;
    color:white;
    text-transform: uppercase;  
    max-width:600px;
    }
      
    .standard-body-copy{
    font-family: 'suiss', sans-serif;
    letter-spacing:2;
    font-size:17px;
    line-height:24px;
    color:#ffffff;
    max-width: 600px;
    margin-top:5%;
    }
      
    .body-copy-reduced{
    font-family: 'suiss', sans-serif;
    letter-spacing:2;
    font-size:16px;
    line-height:24px;
    color:#d8d8d8;
    margin-bottom:-10px;
    }   

  .mobile-body-copy{
  margin-top:30px;
  }

  .standard-headlines-cover{
  width:100%;
  height:20px;
  overflow:hidden;
  }

  .video-play-btn{
  font-size:16px;
  }

  .playbtn{
  height:14px;
  margin-top:21px;
  display:inline-block;
  margin-right:10px;
  }

  .standard-headlines-cover.project-sign-posting-headlines{
  margin-top:8px;
  margin-bottom:8vw;
  }

  /* Main Content styling */ 
  #trigger-4{
  margin-top:20px;
  }

  /* Layout/spacing */ 
  .section-spacer{
  height:100px;  
  }
      
  .section-content{
  margin-top:0px;
  }

  .spacer-before-rule{
  width:100%;
  height:14vw;
  }

  .mobile-parallax-fix-spacer{
  width:100%;
  height:60px;
  }

  .mobile-mockup{
  margin-top:14vw;
  }

  .mobile-center{
  margin-top:14vw;
  }

  /*Video mask options*/
  .video-mask{
  object-fit: cover;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow:hidden;
  border-radius:8%;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  }

  /* iPad frame sol republic */ 
  .row.no-gutters.sol-republic-video-frame{
  margin-left:0px;
  margin-right:0px;
  }

  .optional-headline-callout-01.pax-optional-headline{
  margin-top:75px;
  }

  /*Routing*/
  .project-routing{
  height:30vw;
  }

  .mask {
    position: relative;
    padding: 0vw;
    height: 6.6vw;
    overflow: hidden;
    margin-top:6vw;
    }
        
    .title {
    display: block;
    font-size:6.6vw;
    line-height: 6.6vw;
    transition: transform 0.4s ease;
    }

}


/*--------------------------- SMALL/MEDIUM MEDIA QUERY (>725px) ---------------------------*/
@media only screen and (min-width : 501px) and (max-width : 768px) {
 /* Section One */
 .project-name{
  font-family: 'pano', sans-serif;
  letter-spacing:-2px;
  font-weight:;
  font-size:9.8vw;
  color:#3d3d3d;
  text-transform: uppercase;
  }
  
  .hero-image-centering{
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  height:100%;
  width:100%;
  position:absolute;
  pointer-events: none;
  padding-left:30px;
  padding-right:30px;
  }

  /* Video Modal styling */
  .modal {
  padding-top: 40vh; /* Location of the box */
  }

  /* Main Content padding */
  .main-content-container{
  margin-right:15px;
  margin-left:15px;
  }

  /* Main Typography Styling */ 
  .intro-copy-block{
    display:none;
  }

  .mobile-copy-block{
  display:block;
  }

  .standard-headlines-cover{
    width:100%;
    height:50px;
    overflow:hidden;
    }
    
    .standard-headlines{
    font-family: 'pano', sans-serif;
    letter-spacing:0px;
    font-size:45px;
    line-height:50px;
    color:white;
    text-transform: uppercase;  
    margin-top:-5px;
    }

  .Headline-mobile{
    font-family: 'pano', sans-serif;
    letter-spacing:0px;
    font-size:38px;
    color:white;
    text-transform: uppercase;  
    max-width:600px;
    }
    
    .standard-body-copy{
    font-family: 'suiss', sans-serif;
    letter-spacing:2;
    font-size:17px;
    line-height:24px;
    color:#ffffff;
    max-width: 600px;
    margin-top:5%;
    }

    .body-copy-reduced{
      font-family: 'suiss', sans-serif;
      letter-spacing:2;
      font-size:16px;
      line-height:24px;
      color:#d8d8d8;
      margin-bottom:-10px;
      }   

    .mobile-body-copy{
    margin-top:40px;
    }

    .copy-block{
    margin-top:50px;  
    }

  .standard-headlines-cover.project-sign-posting-headlines{
  margin-bottom:.1vw;
  }

  /* Layout/spacing */ 
  .section-spacer{
  height:80px;  
  }
    
  .section-content{
  margin-top:150px;
  }

  .spacer-before-rule{
  width:100%;
  height:1vw;
  }

  .mobile-parallax-fix-spacer{
  width:100%;
  height:30px;
  }

  /*Video mask options*/
  .video-mask{
  object-fit: cover;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow:hidden;
  border-radius:7%;
  }

  /* iPad frame sol republic */ 
  .row.no-gutters.sol-republic-video-frame{
  margin-left:0px;
  margin-right:0px;
  }  

  /*Routing*/
  .project-routing{
  height:20vw;
  }

  .mask {
  position: relative;
  padding: 0vw;
  height: 6.6vw;
  overflow: hidden;
  margin-top:6vw;
  }
      
  .title {
  display: block;
  font-size:6.6vw;
  line-height: 6.6vw;
  transition: transform 0.4s ease;
  }

}


/*--------------------------- SMALL DESKTOP MEDIA QUERY (For Bootstrap Grid fixes ONLY (726px - 991) ---------------------------*/
@media only screen and (min-width : 769px) and (max-width : 991px) {
  /* Main Typography styling */
  .intro-copy-block{
    display:none;
  }

  .mobile-copy-block{
  display:block;
  }

  .Headline-mobile{
    font-family: 'pano', sans-serif;
    letter-spacing:0px;
    font-size:38px;
    color:white;
    text-transform: uppercase;  
    max-width:600px;
    }

  /* Main Content padding */
  .main-content-container{
  padding-right:40px;
  padding-left:40px;
  }
  
  /* iPad frame sol republic */ 
  .row.no-gutters.sol-republic-video-frame{
  margin-left:0px;
  margin-right:0px;
  }  

  /* Project Routing */
  .mask {
    position: relative;
    padding: 0vw;
    height: 6.2vw;
    overflow: hidden;
    margin-top:6vw;
    }
    
    .title {
    display: block;
    font-size:6.2vw;
    line-height: 6.2vw;
    transition: transform 0.4s ease;
    }

}

/*--------------------------- SMALL DESKTOP MEDIA QUERY (726px - 1200px) ---------------------------*/
@media only screen and (min-width : 769px) and (max-width : 1200px) {
  /* Main Typography Styling */ 
  .standard-headlines-cover{
    width:100%;
    height:50px;
    overflow:hidden;
    }
    
    .standard-headlines{
    font-family: 'pano', sans-serif;
    letter-spacing:0px;
    font-size:45px;
    line-height:50px;
    color:white;
    text-transform: uppercase;  
    margin-top:-5px;
    }
      
    .standard-body-copy{
    font-family: 'suiss', sans-serif;
    letter-spacing:2;
    font-size:20px;
    line-height:28px;
    color:#ffffff;
    max-width: 600px;
    }

    .body-copy-reduced{
    font-family: 'suiss', sans-serif;
    letter-spacing:2;
    font-size:18px;
    line-height:24px;
    color:#d8d8d8;
    margin-top:-30px;
    }   

    .copy-block{
    margin-top:50px;  
    }

    .Headline-mobile{
    margin-bottom:30px;
    }

    .routing-project-name{
    font-size: ;  
    }

    /* Video Modal styling */
    .modal {
    padding-top: 28vh; /* Location of the box */
    }

    /* Layout/spacing */ 
    .section-spacer{
    height:100px;  
    }

    .section-content{
    margin-top:150px;
    }

    .spacer-before-rule{
    width:100%;
    height:2.2vw;
    }

    .mobile-mockup{
    margin-top:8vw;
    }

    .mobile-center{
    margin-top:8vw;
    }
    
    .optional-headline-callout-01{
    margin-top:8vw;
    }

    .standard-image-13{
    margin-top:;
    }

    /*Video mask options*/
    .video-mask{
      object-fit: cover;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      overflow:hidden;
      border-radius:6%;
      }

    /* iPad frame sol republic */ 
    .row.no-gutters.sol-republic-video-frame{
    margin-left:0px;
    margin-right:0px;
    }  
  
    /*Routing*/
    .project-routing{
    height:22vw;
    }
      

}

/*--------------------------- EXTRA LARGE MEDIA QUERY (<1700px) ---------------------------*/
@media only screen and (min-width : 1700px) {
/*- Typography Adjustments -*/


/*- Spacing adjustments before rules -*/
#trigger-4{
margin-top:10vw;
}
 
.mobile-mockup{
margin-top:6.6vw;
}

.mobile-center{
margin-top:6.6vw;
}

.spacer-before-rule{
width:100%;
height:5.5vw;
}  
}



/*------------------------------------------------------ ABOUT PAGE ------------------------------------------------------*/
.hero-about-image{
width:100%;
opacity:1;
position: absolute;
top: 50%;
transform: translateY(-50%);
opacity:.7;
}

.project-about-cover-onenter{
opacity:1;
}

.about-text{
font-family: 'pano', sans-serif;
letter-spacing:0px;
font-weight:;
line-height:1.1;
font-size:3.2vw;
color:white;
text-transform: uppercase;
}

.styled-mailto {
  text-decoration: none;
  position: relative;
  color: #fff; /* Customize your text color */
  font-weight: bold; /* Optional for emphasis */
}

.styled-mailto:hover {
  text-decoration: none; /* Ensure underline doesn't reappear on hover */
  color: #fff;
}

.styled-mailto::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 6px; /* Thickness of the underline */
  background-color: #fff; /* Customize underline color */
  transition: width 0.3s ease; /* Smooth animation */
  text-decoration: none;
}

.styled-mailto:hover::after {
  text-decoration: none;
  width: 100%; /* Full underline width on hover */
}


.about-text-container{
z-index:2;
position:absolute;
margin-top:-200vh;
width:100%;
}
.about-text-block-01{
  color:#ffffff;
}

/*--------------------------- SMALL MEDIA QUERY (>499px) ---------------------------*/
@media only screen and (max-width : 500px) {
  .hero-about-image{
    width:100%;
    opacity:1;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    opacity:.9;
    }

.about-text{
  font-family: 'pano', sans-serif;
letter-spacing:0px;
line-height:1.3;
font-size:6vw;
color:white;
text-transform: uppercase;
}
.about-text-container{
  z-index:2;
  position:relative;
  margin-top:-200vh;
  width:90%;
  margin-left:15px;
  margin-right:15px;
  }
}

/*--------------------------- SMALL/MEDIUM MEDIA QUERY (>725px) ---------------------------*/
@media only screen and (min-width : 501px) and (max-width : 768px) {
  .about-text{
  font-family: 'pano', sans-serif;
  letter-spacing:-1px;
  line-height:1.3;
  font-size:6vw;
  color:white;
  text-transform: uppercase;
  }
  .about-text-container{
  z-index:2;
  position:absolute;
  margin-top:-180vh;
  width:90%;
  margin-left:15px;
  margin-right:15px;
  }
  .about-text-container{
  z-index:2;
  position:absolute;
  margin-top:-170vh;
  width:90%;
  }
}

/*--------------------------- SMALL DESKTOP MEDIA QUERY (726px - 1200px) ---------------------------*/
@media only screen and (min-width : 769px) and (max-width : 1200px) {
  .about-text{
    font-family: 'pano', sans-serif;
    letter-spacing:-1px;
    line-height:1.3;
    font-size:3.5vw;
    color:white;
    text-transform: uppercase;
    }
    .about-text-container{
    z-index:2;
    position:absolute;
    margin-top:-170vh;
    width:90%;
    margin-left:15px;
    margin-right:15px;
    }
}
















/* Tablet queries */  
@media only screen and (min-width: 500px) and (max-width: 991px){ 
.responsive-break{
display: none;
}

} 

/* SOL REPUBLIC - Mobile query */    
@media screen and (max-width:499px){

}

/* this is  a quiery for when screens get weird and vertical so my 100vh section 1 lets content below creep up*/ 
@media screen and ( min-width: 880px ) and (max-width:1700px) and ( min-height: 1150px ){
 
}