/* Thomsoon.com - OnePage CSS Responsive
-- version 1.0
-- Copyright (c) 2014 Thomsoon.com
-- licensed under the MIT
--
-- http://www.thomsoon.com/
--
*/


/*Adjust the copyemail box*/
@media (max-width: 570px) {

  .mailto-message {
  transform: translate(-75%, -15%);
  text-align: right;

   &:before {
    left: 90%;
    top: -7px;
    border-top: none;
    border-right: 15px solid transparent;
    border-left: 15px solid transparent;
    border-bottom: 15px solid #F95300;
    position: absolute;
    border-width: 8px;
    }
    }
}

/* Adjust Profolio Video player height*/
@media (max-width: 450px) {
  #AjaxMainImage-Featured iframe{
    height: 253px;
  }
}

@media (min-width: 450px) and (max-width: 500px) {
  #AjaxMainImage-Featured iframe{
    height: 280px;
  }
}

@media (min-width: 500px) and (max-width: 600px) {
  #AjaxMainImage-Featured iframe{
    height: 280px;
  }
}

@media (min-width: 600px) and (max-width: 730px) {
  #AjaxMainImage-Featured iframe{
    height: 340px;
  }
}



/* Adjust Feature Images and Videolayout */
@media (max-width: 680px) {
  #AjaxDetailImage-Featured_2Colms img{
    width: 100%;

  }
  #AjaxDetailImage-Featured_2Colms video{
    width: 100%;
  }
}

/* Adjust Feature Images and Videolayout */
@media (max-width: 680px) {
  #AjaxDetailImage-Featured_3Colms img{
    width: 100%;

  }
  #AjaxDetailImage-Featured_3Colms video{
    width: 100%;
  }
}

/*adjust the subtitle from cover */
@media (max-width: 680px) {

  .videoCover-title-container-Title{
    font-size: 42px; 
    line-height: 50px;
  }
  .videoCover-title-container-Title strong{

    position: relative;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;

    &::after {
    content: '';
    position: absolute;
    bottom: 0.05rem;
    height: 1.6rem;
    left: -0.2rem;
    right: -0.1rem;

    /*Position the line behind the text so that
     it is still easily readable*/
    z-index:-2;

    /*// The SVG is added as an SVG background image*/
    background-image: url(../img/icons/underline.svg);
    background-repeat: no-repeat;

    /*
    // This allows the SVG to flex in size to fit
    // any length of word. If the word is short,
    // the SVG will be stretched vertically, if it
    // is long, the SVG will be stretched horizontally.
    // The jagged nature of this particular SVG works
    // with this transforming.*/
    background-size: cover;
    }
  }
 .videoCover-title-container-SubTitle{
    font-size: 20px; 
    line-height: 25px;
    width: 100%;
  }
  .videoCover-title-container-SubTitle a{
    font-size: 20px; 
    line-height: 25px;
  }
  .videoCover-title-container-SubTitle_VRT{
    font-size: 20px; 
    line-height: 25px;
  }
  .videoCover-title-container-SubTitle_VRT a{
    font-size: 20px; 
    line-height: 25px;
  }
  .videoCover-title-container {
    bottom:15%;
  }
  
}

/*adjust the subtitle from cover */
@media (min-width: 680px) and (max-width: 900px){

    
 .videoCover-title-container-SubTitle{
    font-size: 2.2vw; 
    line-height: 3vw;
    width: 80%;
  }
  .videoCover-title-container-SubTitle a{
    font-size: 2.2vw; 
    line-height: 3vw;
  }
  .videoCover-title-container-SubTitle_VRT{
    font-size: 2.2vw; 
    line-height: 3vw;
  }
  .videoCover-title-container-SubTitle_VRT a{
    font-size: 2.2vw; 
    line-height: 3vw;
  }
}


/* Adjust About Photo and Text layout */

/*Adjust photo and text to center when the window is small*/
@media (max-width: 900px) {

  .about-us .about_photo{
    float: none;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 15px;
    width: 60%;
  }
  .about-us div.aboutcontent{
    width: 96%;
  }
  .about-us div.aboutLists{
    width: 76%;
  }

  .about-us div.abouttext{
  
  margin: 0px auto 0px 1.9vw;
  }

}




/* Adjust About Photo and Text layout */

@media (min-width: 1018px) and (max-width: 1120px) {

  .about-us div.aboutcontent{
    margin-bottom: 8%;
    margin-top: 2%;
  }

}
@media (min-width: 1120px) and (max-width: 1555px){

  .about-us div.aboutLists{
      text-align:left;
      padding-left: 50%;
      margin-bottom: 2%;
     
    }
    .about-us div.aboutLists a{
      text-align:left;
      width: 70%;
      display: block;
      
    }
}


@media (min-width: 1555px) {

  .about-us div.aboutLists{
      text-align:left;
      padding-left: 50%;
     
    }
}

/* Adjust About Download button layout & Social Link*/
@media (min-width: 1120px) and (max-width: 1190px){
  .about-us div.aboutLists{
      margin-bottom: 5%;

    }
  
}
@media (min-width: 1190px) and (max-width: 1260px){
  .about-us div.aboutLists{
      margin-bottom: 8%;
    }
}

@media (min-width: 1260px) and (max-width: 1325px){
  .about-us div.aboutdownload{

    margin:-5% auto -20px 50%;
    display:block;
    float: left;
  }
  

}

@media (min-width: 1325px) and (max-width: 1400px){
  .about-us div.aboutdownload{
    margin:-8% auto -20px 50%;
    display:block;
    float: left;
  }
 
}



@media (min-width: 1400px) and (max-width: 1500px){
  .about-us div.aboutdownload{

    margin:-10% auto -20px 50%;
    display:block;
    float: left;
  }
 
}


@media (min-width: 1500px) and (max-width: 1600px){
  .about-us div.aboutdownload{

    margin:-15% auto -20px 50%;
    display:block;
    float: left;
  }
  
}
@media (min-width: 1600px) and (max-width: 1700px){
  .about-us div.aboutdownload{

    margin:-18% auto -20px 50%;
    display:block;
    float: left;
  }
  
}
@media (min-width: 1700px) {
  .about-us div.aboutdownload{

    margin:-20% auto -20px 50%;
    display:block;
    float: left;
  }
 
}




/* Adjust the Feature Swiper-slide */
@media (min-width: 320px) and (max-width: 400px) {
  
  .swiper-button-next{
    right:5px;
  }
  .swiper-button-prev{
    left:5px;
  }
  .swiper-slide-subtitle{
    top:97%;
  }
}

@media (min-width: 400px) and (max-width: 500px) {
  
  .swiper-button-next{
    right:10px;
  }
  .swiper-button-prev{
    left:10px;
  }
  .swiper-slide-subtitle{
    top:97%;
  }
}

@media (min-width: 500px) and (max-width: 550px) {
  
  .swiper-button-next{
    right:15px;
  }
  .swiper-button-prev{
    left:15px;
  }
  .swiper-slide-subtitle{
    top:95%;
  }
}

@media (min-width: 550px) and (max-width: 600px) {
  
  .swiper-button-next{
    right:15px;
  }
  .swiper-button-prev{
    left:15px;
  }
  .swiper-slide-subtitle{
    top:95%;
  }
}




@media (min-width: 600px) and (max-width: 650px) {
  
  .swiper-button-next{
    right:20px;
  }
  .swiper-button-prev{
    left:20px;
  }
  .swiper-slide-subtitle{
    top:94%;
  }
}


@media (min-width: 650px) and (max-width: 700px) {
  .
  .swiper-button-next{
    right:20px;
  }
  .swiper-button-prev{
    left:20px;
  }
  .swiper-slide-subtitle{
    top:93%;
  }
}


@media (min-width: 700px) and (max-width: 800px) {
  
  .swiper-button-next{
    right:20px;
  }
  .swiper-button-prev{
    left:20px;
  }

  .swiper-slide-subtitle{
    top:92%;
  }
}





/* iPad (portrait) */
@media (min-width: 320px) and (max-width: 579px) {


.project{
  margin-top: 90px;
}
.project_type_title_media{
  display:block;

}
.project_type_title{
  display:none;
  }
  a.project_subtitle {
  padding-bottom: 10px;
  }
.mobile_content{
  display:block;
}
.desktop_content{
  display:none;
}


.main_profile .profile_text_left , .project_brief {
    width: 100%;
}

.project_contentblock_left, .project_contentblock_right{
  width: 100%;
}

.project_content3blocks_left, .project_content3blocks_right{
  width: 100%;
}
.project_content3blocks_middle{
  width: 100%;
  margin-left: 0px;
}

.project_content3blocks_right{
  position: relative;

}

.project_detail_content_right h3{
  margin-top: 30px;
}

.project_detail_content_left, .project_detail_content_right{
  margin: 0px 0px 16px 0px;
}


.project_content2blocks_leftS, .project_content2blocks_rightL, .project_content2blocks_leftL, .project_content2blocks_rightS{
  width: 100%;
}

.project_content4blocks_left, .project_content4blocks_middleleft, .project_content4blocks_middleright, .project_content4blocks_right{
  width: 50%;
}

.featured .featured-margin .reelContentFrame{
  width: 80%;
}
.project_imgs_left, .project_videos_left, .project_imgs_right, .project_videos_right, .project_imgs_middle, .project_videos_middle{
  margin-right: auto;
  margin-left: auto;
  float: none;
  width: 100%;
  margin-top: 5px;
  margin-bottom: 5px;
}

.project_videos_left video, .project_videos_right video, .project_videos_middle video{
  margin:5px 0px;
}

.project_imgs_left img, .project_imgs_right img, .project_imgs_middle img{
  margin:5px 0px;
}

.project_imgs_left_mobile , .project_imgs_right_mobile , .project_imgs_middle_mobile{
  margin-right: auto;
  margin-left: auto;
  float: none;
  width: 100%;
  margin-top: 2px;
  margin-bottom: 2px;
}

#undefined-sticky-wrapper{
 display:none;
}
.menu{
  display:none;
}

.menu-media{
  display:block;
  position: fixed;
  top:0px;
  background-color:rgba(15, 17, 20, 0);
}




.featured .featured-margin{
    margin:110px 0 0 0px;
  }

.start-page .content {
  width:300px;
  height:100%;
}

.start-page, .start-page .opacity{
  height:100%;
}
.start-page .content .text {
  width:300px;
}

h1 {
  font-size:36px;
}

.about-us h1 {
  /*margin-top:0;*/
}

.about-us .content{
  /*width:300px;*/
  width:100%;
}

.about-us hr,.portfolio .portfolio-margin hr, .contact hr {
  width:106px;
}

.about-us .column-one, .about-us .column-two{
  width:300px;
  margin-bottom:20px;
}

 .about-us .content .column-three{
  width:300px;
  margin-bottom:70px;
 }

.portfolio .portfolio-margin{
  width:100%;
}
.grid li{
  width:100%;
}
.grid img{
  width:100%;
  margin: 0px 0px 0px 0px;
}
.grid .text {
  width:100%;
  margin: 0px 0px 0px 0px;
}
.grid .no-text {
   width:100%;
  margin: 0px 0px 0px 0px;
 }

.partners .content{
  width:100%;
}



.about-us.logo img {
  width:30px;
  height: 30px;
  padding-bottom:20px;
}



.contact .content .contact-text{
  padding-left:0px;
  width:300px;
  text-align:center;
  margin-top:60px;
  float: none;
}



.contact .content .contact-text {
  width:275px;
}



.grid li{
  margin:0 0 0px 0;
}

.contact{ 
  margin:0 auto;
}

.footer{
  position:relative;
}

}



/* iPad (portrait) */
@media (min-width: 580px) and (max-width: 768px) {


.project{
  margin-top: 90px;
}

.project_content3blocks_left, .project_content3blocks_right{
  width: 100%;
}
.project_content3blocks_middle{
  width: 100%;
  margin-left: 0px;
}
.project_content3blocks_right{
  position: relative;
  
}

.project_detail_content_right h3{
  margin-top: 30px;
}

.project_detail_content_left, .project_detail_content_right{
  margin: 0px 0px 16px 0px;
}
.project_content2blocks_leftS, .project_content2blocks_rightL, .project_content2blocks_leftL, .project_content2blocks_rightS{
  width: 100%;
}

.project_content4blocks_left, .project_content4blocks_middleleft, .project_content4blocks_middleright, .project_content4blocks_right{
  width: 50%;
}

.project_contentblock_left, .project_contentblock_right{
  width: 100%;
}

.project_imgs_left, .project_videos_left, .project_imgs_right, .project_videos_right, .project_imgs_middle, .project_videos_middle{
  margin-right: auto;
  margin-left: auto;
  float: none;
  width: 100%;
  margin-top: 5px;
  margin-bottom: 5px;
}

.project_imgs_left_mobile , .project_imgs_right_mobile , .project_imgs_middle_mobile{
  margin-right: auto;
  margin-left: auto;
  float: none;
  width: 100%;
  margin-top: 2px;
  margin-bottom: 2px;
}

.project_videos_left video, .project_videos_right video, .project_videos_middle video{
  margin:5px 0px;
}

.project_imgs_left img, .project_imgs_right img, .project_imgs_middle img{
  margin:5px 0px;
}

.project_detail_noncenter{
  margin:5px 0px;
}


.project_type_title_media{
  display:block;

}
.project_type_title{
  display:none;
  }
  a.project_subtitle {
  padding-bottom: 10px;
  }

a.project_subtitle {
  padding-bottom: 10px;
}

.mobile_content{
  display:block;
}

.desktop_content{
  display:none;
}


.main_profile .profile_text_left , .project_brief {
    width: 100%;
}

.featured .featured-margin .reelContentFrame{
  width: 80%;
}


#undefined-sticky-wrapper{
 display:none;
}
.menu{
  display:none;
}


.menu-media{
  display:block;
  position: fixed;
  top:0px;
}

.menu-media .menu-content{
  width:540px;
}



.start-page .content {
  width:300px;
  height:100%;
}

.start-page, .start-page .opacity{
  height:100%;
}
.start-page .content .text {
  width:300px;
}


h1 {
  font-size:36px;
}

.about-us h1 {
  /*margin-top:90px;*/
}


.about-us .content{
  /*width:300px;*/
  width:100%;
}

.about-us hr,.portfolio .portfolio-margin hr, .contact hr {
  width:106px;
}

.about-us .column-one, .about-us .column-two{
  width:300px;
  margin-bottom:20px;
}

 .about-us .column-three{
  width:300px;
  margin-bottom:70px;
 }

.portfolio .portfolio-margin{
  width:100%;
}



.grid li{
  width:50%;
  margin-left: 0px;
  margin-right: 0px; 
}
.grid img{
  width:100%;
  margin-left: 0px;
}
.grid .text {
  width:100%;
 
}
.grid .no-text {
   width:100%;
 }

.partners .content{
  width:100%;
}



.contact .content .contact-text{
  padding-left:0px;
  width:300px;
  text-align:center;
  margin-top:60px;
  float: none;
}

.contact .content .contact-text {
  width:275px;
}


.contact{ 
  margin:0 auto;
}

.footer{
  position:relative;

}

.contact .content{
  width: 86%;
}


}











/* iPad (portrait) */
@media (min-width: 769px) and (max-width: 1023px) {
/*
.project{
  margin-top: 90px;
}
*/

.featured .featured-margin .reelContentFrame{
  width: 80%;
}

#undefined-sticky-wrapper{
 display:none;
}

.menu{
  display:none;
}

.mobile_content{
  display:none;
}
.desktop_content{
  display:block;
}


.menu-media{
  display:block;
  position: fixed;
  top:0px;
}

.menu-content .logo{
  width:200px;
}

.menu-content{
  width:700px;
}

.about-us .content{
  width:100%;
}

.about-us p{
  width:200px;
}

.about-us h2{
  letter-spacing:2px;
}

.about-us .column-one{
  width:233px;
}

.about-us .column-two{
  width:233px;
}

.about-us .column-three{
  width:233px;
}

.portfolio .portfolio-margin{
  width:100%;
}
.grid li{
  width:50%;
  margin-left: 0px;
  margin-right: 0px; 
}
.grid img{
  width:100%;
  margin-left: 0px;
}
.grid .text {
  width:100%;
 
}
.grid .no-text {
   width:100%;
 }

.partners .content{
  width:100%;
}



.contact{ 
  margin:0 auto;
}

.contact .content {
  width:73%
}

.footer{
  position:relative;
}

.contact .content .form{
  width:43%;
}



.contact .content .contact-text {
  width:43%;
  padding-right:20px;
}




}



@media (min-width: 0px) and (max-width: 426px) {

  .portfolio .portfolio-margin{
  width:100%;
}
.grid li{
  width:100%;
}
.grid img{
  width:100%;
  margin: 0px 0px 0px 0px;
}
.grid .text {
  width:100%;
  margin: 0px 0px 0px 0px;
}
.grid .no-text {
   width:100%;
  margin: 0px 0px 0px 0px;
 }
 
.project_brief_phone{
  
  display:block;
  
 }
 .project_brief_web{
  
  display:none;
  
 }
  .project{
  margin-top: 90px;
}
  .project_type_title_media{
  display:block;
  }
  .project_type_title{
  display:none;
  }
  a.project_subtitle {
  padding-bottom: 10px;
}
.mobile_content{
  display:block;
}
.desktop_content{
  display:none;
}


.main_profile .profile_text_left , .project_brief {
    width: 100%;
}

  .partners{
  height:85px;
  }
  .featured .featured-margin .reelContentFrame{
  width: 80%;
  }
 
  .swiper-title-container-CTA{
    opacity:0;
  }
  .menu-media{
    background-color: rgb(15, 17, 20,0);
  }
 
  
  #submenu-page .submenu-Text{
    display: none;
  }
  .grid-Clients li {
    width: 19%;
  }
  .grid-IG li {
    width: 46.5vw; /*here to adjust the IG grid while window get small*/
  }
   .grid-IG video{
   width:46.5vw; /*here to adjust the IG grid while window get small*/
  }
  
   .grid-relativeproject li{
    width: 100%;
  }

  .contact .content .form{
    margin: 0px auto;
    width: 79%;

  }

  .footer .menu-footer{
    float: inherit;
  }
  .footer .footerContact{
    text-align: center;
    padding: 20px 35px 20px 35px;
    float: inherit;
  }

  .spreadLogo {
    clear: both;
    display: block;

    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
     width: 85%;

     height: 12vh;
      overflow-y: clip;
      margin-right: auto;
      margin-left: auto;
      background-image:url('../img/logos/ShwennHorizon.png');
  


  }
  .quick-flip{
    font-size: 5.7em;
    text-shadow: none;
    display: none;
  }
  .quick-flipAnimationClass{
  
  translate: 0 0lh;
  transition-delay:calc(0.1s*var(--delay));
  /*transition-timing-function: cubic-bezier(0.66, 0,0.34,1); */

  /*animation: quick-flip-backwards 1.5s;
  animation-delay: calc(0.1s*var(--delay));*/
  }

  .quick-flipContainer {
    display: none;
  }

  
}







@media (min-width: 426px) and (max-width: 580px) {
  .project_type_title_media{
  display:block;
  }
  .project_type_title{
  display:none;
  }
  a.project_subtitle {
  padding-bottom: 10px;
}
  .mobile_content{
  display:block;
  }
  .desktop_content{
  display:none;
  }
  

   .swiper-title-container-CTA{
    opacity:0;
  }
.main_profile .profile_text_left , .project_brief {
    width: 100%;
}

  .partners{
  height:110px;
  }
   .featured .featured-margin .reelContentFrame{
  width: 80%;
  }
  .featured .featured-margin{
    margin:110px 0 0 0px;
  }
  
  .grid-Clients li {
    width: 20vw;
  }
  .grid-IG li {
    width: 47vw; /*here to adjust the IG grid while window get small*/
  }
   .grid-IG video{
   width:47vw; /*here to adjust the IG grid while window get small*/
  }
  

  .grid-relativeproject li{
    width: 100%;
  }

  .contact .content .form{
    margin: 0px auto;
    width: 79%;

  }
 .spreadLogo {
    clear: both;
    display: block;

    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
     width: 90%;

     height: 12vh;
      overflow-y: clip;
      margin-right: auto;
      margin-left: auto;
      background-image:url('../img/logos/ShwennHorizon.png');
  


  }
  .quick-flip{
    font-size: 5.7em;
    text-shadow: none;
    display: none;
  }
  .quick-flipAnimationClass{
  
  translate: 0 0lh;
  transition-delay:calc(0.1s*var(--delay));
  /*transition-timing-function: cubic-bezier(0.66, 0,0.34,1); */

  /*animation: quick-flip-backwards 1.5s;
  animation-delay: calc(0.1s*var(--delay));*/
  }

  .quick-flipContainer {
    display: none;
  }


}

@media (min-width: 580px) and (max-width: 600px) {
  .project_type_title_media{
  display:block;
  }
  .project_type_title{
  display:none;
  }
  a.project_subtitle {
  padding-bottom: 10px;
  }
  .mobile_content{
  display:block;
  }
  .desktop_content{
  display:none;
  }
  



.main_profile .profile_text_left , .project_brief {
    width: 100%;
}

  .partners{
  height:140px;
  }
  .featured .featured-margin .reelContentFrame{
  width: 80%;
  }
 

 .featured .featured-margin{
    margin:110px 0 0 0px;
  }
  .grid-Clients li {
    width: 15vw;
  }
  .grid-IG li {
    width: 18.5vw;
  }
  /*
   .grid .text div{
    padding-top:9.5vw;
  }
  */
  .grid-relativeproject .text {
    font-size: 16px;
    line-height: 20px;
  }
  .grid-relativeproject .text:hover{
    font-size: 16px;
    
  }
  .grid-relativeproject .text .text-sub{
    font-size: 8px;
    margin-top: 6px;
    
  }
  .swiper-title-container-CTA{
    opacity:0;
  }
   .contact .content .form{
    margin: 0px auto;
    width: 79%;

  }
  .spreadLogo {
    clear: both;
    display: block;

    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
     width: 90%;

     height: 12vh;
      overflow-y: clip;
      margin-right: auto;
      margin-left: auto;
      background-image:url('../img/logos/ShwennHorizon.png');
  


  }
  .quick-flip{
    font-size: 5.7em;
    text-shadow: none;
    display: none;
  }
  .quick-flipAnimationClass{
  
  translate: 0 0lh;
  transition-delay:calc(0.1s*var(--delay));
  /*transition-timing-function: cubic-bezier(0.66, 0,0.34,1); */

  /*animation: quick-flip-backwards 1.5s;
  animation-delay: calc(0.1s*var(--delay));*/
  }

  .quick-flipContainer {
    display: none;
    
  }
}


@media (min-width: 600px) and (max-width: 700px) {
  .project_type_title_media{
  display:block;
  }
  .project_type_title{
  display:none;
  }
  a.project_subtitle {
  padding-bottom: 10px;
  }
  .mobile_content{
  display:block;
  }
  .desktop_content{
  display:none;
  }
  


.main_profile .profile_text_left , .project_brief {
    width: 100%;
}
  .partners{
  height:167px;
  }
   .featured .featured-margin .reelContentFrame{
  width: 80%;
  }


  .featured .featured-margin{
    margin:110px 0 0 0px;
  }
  .grid-Clients li {
    width: 15vw;
  }
 
  .grid-relativeproject .text {
    font-size: 16px;
    line-height: 20px;
  }
  .grid-relativeproject .text:hover{
    font-size: 16px;
    
  }
  .grid-relativeproject .text .text-sub{
    font-size: 8px;
    margin-top: 10px;
    line-height: 12px;
    
  }
  .swiper-title-container-CTA{
    opacity:0;
  }
   .contact .content .form{
    margin: 0px auto;
    width: 79%;

  }
  .spreadLogo {
    clear: both;
    display: block;

    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
     width: 94%;

     height: 14vh;
      overflow-y: clip;
      margin-right: auto;
      margin-left: auto;
      background-image:url('../img/logos/ShwennHorizon.png');
  


  }
  .quick-flip{
    font-size: 8.1em;
    text-shadow: none;
    display: none;
  }
  .quick-flipAnimationClass{
  
  translate: 0 0lh;
  transition-delay:calc(0.1s*var(--delay));
  /*transition-timing-function: cubic-bezier(0.66, 0,0.34,1); */

  /*animation: quick-flip-backwards 1.5s;
  animation-delay: calc(0.1s*var(--delay));*/
  }

  .quick-flipContainer {
    display: none;
  }

  .grid-IG li {
    width: 18.2vw;
  }
  .grid-IG video{
  width:18.2vw;
  }

}

@media (min-width: 700px) and (max-width: 750px) {
  .project_type_title_media{
  display:block;
  }
  .project_type_title{
  display:none;
  }
  a.project_subtitle {
  padding-bottom: 10px;
  }
  .mobile_content{
  display:block;
  }
  .desktop_content{
  display:none;
  }


.main_profile .profile_text_left , .project_brief {
    width: 100%;
}

  .partners{
  height:190px;
  }
   .featured .featured-margin .reelContentFrame{
  width: 80%;
  }
  .featured .featured-margin{
    margin:110px 0 0 0px;
  }

  .grid-Clients li {
    width: 15vw;
  }
 
 .grid-relativeproject .text {
    font-size: 16px;
    line-height: 20px;
  }
  .grid-relativeproject .text:hover{
    font-size: 16px;
    
  }
  .grid-relativeproject .text .text-sub{
    font-size: 8px;
    margin-top: 6px;
    
  }
  .swiper-title-container-CTA{
    opacity:0;
  }
   .contact .content .form{
    margin: 0px auto;
    width: 79%;

  }
  .spreadLogo {
    clear: both;
    display: block;

    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
     width: 94%;

     height: 17vh;
      overflow-y: clip;
      margin-right: auto;
      margin-left: auto;
      background-image:url('../img/logos/ShwennHorizon.png');
  


  }
  .quick-flip{
    font-size: 9.5em;
    text-shadow: none;
    display: none;
  }
  .quick-flipAnimationClass{
  
  translate: 0 0lh;
  transition-delay:calc(0.1s*var(--delay));
  /*transition-timing-function: cubic-bezier(0.66, 0,0.34,1); */

  /*animation: quick-flip-backwards 1.5s;
  animation-delay: calc(0.1s*var(--delay));*/
  }

  .quick-flipContainer {
    display: none;
  }
}


@media (min-width: 750px) and (max-width: 800px) {
  .project{
  margin-top: 90px;
}
  .partners{
  height:190px;
  }
   .featured .featured-margin .reelContentFrame{
  width: 80%;
  }
   .featured .featured-margin{
    margin:110px 0 0 0px;
  }

  .grid-Clients li {
    width: 19%;
  }
  /*
  .grid .text div{
    padding-top:9.5vw;
  }
  */
  .grid-relativeproject .text {
    font-size: 16px;
    line-height: 20px;
  }
  .grid-relativeproject .text:hover{
    font-size: 16px;
    
  }
  .grid-relativeproject .text .text-sub{
    font-size: 8px;
    margin-top: 6px;
    
  }
  .swiper-title-container-CTA{
    opacity:0;
  }
   .contact .content .form{
    margin: 0px auto;
    width: 79%;

  }
  
  
}



@media (min-width: 800px) and (max-width: 900px) {
  .project{
  margin-top: 90px;
  }
  .partners{
  height:220px;
  }
   .featured .featured-margin .reelContentFrame{
  width: 75%;
  }
  .swiper-slide-subtitle{
    bottom:7%;
  }
  .grid-Clients li {
    width: 14%;
  }
  /*
  .grid .text div{
    padding-top:9.5vw;
  }
  */
  #undefined-sticky-wrapper{
 display:none;
}
.featured .featured-margin{
    margin:110px 0 0 0px;
  }
  .swiper-title-container-CTA{
    opacity:0;
  }
  .mobile_content{
  display:none;
  }
  .desktop_content{
  display:block;
  }
   .contact .content .form{
    margin: 0px auto;
    width: 79%;

  }
  .grid-relativeproject .text {
    font-size: 16px;
    line-height: 20px;
  }
  .grid-relativeproject .text:hover{
    font-size: 16px;
    
  }
  .grid-relativeproject .text .text-sub{
    font-size: 8px;
    margin-top: 6px;
    
  }
  
  

}





@media (min-width: 900px) and (max-width: 1000px) {
  .project{
  margin-top: 90px;
}
  .partners{
  height:220px;
  }
   .featured .featured-margin .reelContentFrame{
  width: 75%;
  }
  .swiper-slide-subtitle{
    bottom:7%;
  }
  .grid-Clients li {
    width: 9%;
  }
  /*
  .grid .text div{
    padding-top:9.5vw;
  }
  */
  #undefined-sticky-wrapper{
 display:none;
}
.featured .featured-margin{
    margin:110px 0 0 0px;
  }
  .mobile_content{
  display:none;
  }
  .desktop_content{
  display:block;
  }
   .contact .content .form{
    margin: 0px auto;
    width: 79%;

  }
  .grid-relativeproject .text {
    font-size: 16px;
    line-height: 20px;
  }
  .grid-relativeproject .text:hover{
    font-size: 16px;
    
  }
  .grid-relativeproject .text .text-sub{
    font-size: 8px;
    margin-top: 6px;
    
  }
  

}






@media (min-width: 1000px) and (max-width: 1010px) {
  .project{
  margin-top: 90px;
}
  .partners{
  height:220px;
  }
   .featured .featured-margin .reelContentFrame{
  width: 75%;
  }
  .swiper-slide-subtitle{
    bottom:7%;
  }
  .grid-Clients li {
    width: 9%;
  }
  /*
  .grid .text div{
    padding-top:9.5vw;
  }
  */
  #undefined-sticky-wrapper{
 display:none;
}
.featured .featured-margin{
    margin:110px 0 0 0px;
  }
  .mobile_content{
  display:none;
  }
  .desktop_content{
  display:block;
  }
   .contact .content .form{
    margin: 0px auto;
    width: 79%;

  }
  .grid-relativeproject .text {
    font-size: 16px;
    line-height: 20px;
  }
  .grid-relativeproject .text:hover{
    font-size: 16px;
    
  }
  .grid-relativeproject .text .text-sub{
    font-size: 8px;
    margin-top: 6px;
    
  }
  

}



@media (min-width: 1010px) and (max-width: 1023px) {
  .project{
  margin-top: 90px;
}
  .partners{
  height:245px;
  }
  .featured .featured-margin .reelContentFrame{
  width: 78%;
  }
  .swiper-slide-subtitle{
    bottom:8.5%;
  }
  .grid-Clients li {
    width: 8%;
  }
  /*
   .grid .text div{
    padding-top:10.5vw;
  }
  */
  #undefined-sticky-wrapper{
 display:none;
  }
  .featured .featured-margin{
    margin:110px 0 0 0px;
  }
  .swiper-title-container-CTA{
    opacity:0;
  }
  .mobile_content{
  display:none;
  }
  .desktop_content{
  display:block;
  }
   .contact .content .form{
    margin: 0px auto;
    width: 79%;

  }
  .grid-relativeproject .text {
    font-size: 16px;
    line-height: 20px;
  }
  .grid-relativeproject .text:hover{
    font-size: 16px;
    
  }
  .grid-relativeproject .text .text-sub{
    font-size: 8px;
    margin-top: 6px;
    
  }
  

}





@media (max-width: 1080px) {
 .project{
  margin-top: 90px;
}
.project .project-container {
  width:90%;
}
.main_profile{
 margin-top: 0px;
}

  .menu{
  display:none;
  }
  .start-page{
   /*display:none;*/
  }


  .menu-media{
  display:block;
  position: fixed;
  top:0px;
 
  }
  #submenu-page, #submenu-page-title-portfolio{
    display:block;
    padding-left:15px;
  }
  .reels .reels-margin h1{
    margin-top:95px;
  }
  .contactPhoto{
    width:100%;
    float: none;

  }
  .contactPhoto img{
    margin-left: auto;
    margin-right: auto;
    /*display: block;*/
    float: none;
    width:60%;
  }
  .contact .content{
    margin: 6vh auto 60px auto;
  }

 
  .contact div.aboutcontent a.aboutcontent_title{
    margin-top: 45px;
  }

  .contact .aboutcontent .aboutcontent_title{
    font-size: 40px;
    line-height: 45px;
  }

  .swiper-title-container-CTA{
    opacity:0;
  }
  .tickerlogo {
    width: 6rem;
    margin: 0 1rem 0 1rem;
    
  }
  .img-ticker {
    animation: ticker-kfr_small 15s linear infinite;
  }

  .img-ticker-otherdirection{
   
    animation: ticker-kf_small 15s linear infinite;
  }

.videoCover-title-container{
      margin: 0px 35px;
  bottom:10%;

}
  
}

@media (max-width: 770px) {
.project_contentblock_right .project_detail_noncenter{
  margin: 5px 0px;
}
.project_contentblock_right .project_detail_title_noncenter{
  margin: 5px 0px;
}

}


@media (max-width: 580px) {
 .contactPhoto img{
    width:95%;
  }
  .contact .content .form {
        
        width: 95%;
}
}

@media (min-width: 1024px) and (max-width: 1080px) {
  #undefined-sticky-wrapper{
 display:none;
  }
  .swiper-slide-subtitle{
    bottom:8.5%;
  }
  .start-page{
  /*display:none;*/
  }
  .swiper-title-container-CTA{
    opacity:0;
  }
  .mobile_content{
  display:none;
  }
  .desktop_content{
  display:block;
  }
   .contact .content .form{
    margin: 0px auto;
    width: 79%;

  }

  .contactPhoto img{
   
    width:50%;
  }


  .tickerlogo {
    width: 6rem;
    margin: 0 1rem 0 1rem;
    
  }
  .img-ticker {
    animation: ticker-kfr_small 15s linear infinite;
  }

  .img-ticker-otherdirection{
   
    animation: ticker-kf_small 15s linear infinite;
  }

  

}

@media (min-width: 1080px) {
  #submenu-page, #submenu-page-title-portfolio{
    display:none;
  }
  .featured .featured-margin .reelContentFrame{
    width: 59%;
  }
   
  .contactPhoto{
    /*width:44%;*/
  }
  .contactPhoto img{
    /*float:right;*/
  }
   .mobile_content{
  display:none;
  }
  .desktop_content{
  display:block;
  }



}


@media (min-width: 1500px){
  .videoCover-title-container-Title{
    font-size: 6em;
  }

}



@media (min-width: 1024px) and (max-width: 1060px) {
.grid-Clients li {
    width: 8%;
  }

  .tickerlogo {
    width: 6rem;
    margin: 0 1rem 0 1rem;
    
  }
  .img-ticker {
    animation: ticker-kfr_small 15s linear infinite;
  }

  .img-ticker-otherdirection{
   
    animation: ticker-kf_small 15s linear infinite;
  }

  .contact .content{
    width: 75%;
  }


}

@media (min-width: 1060px) and (max-width: 1080px) {
.contact .content{
    width: 75%;
  }
  
  
 
}



@media (min-width: 1060px) and (max-width: 1106px) {
.grid-Clients li {
    width: 9%;
  }
  .tickerlogo {
    width: 6rem;
    margin: 0 1rem 0 1rem;
    
  }
  
  
 
}


@media (min-width: 1106px) and (max-width: 1200px) {
.grid-Clients li {
    width: 7%;
  }
  .tickerlogo {
    width: 6rem;
    margin: 0 1rem 0 1rem;
    
  }
  .img-ticker {
    animation: ticker-kfr_small 15s linear infinite;
  }

  .img-ticker-otherdirection{
   
    animation: ticker-kf_small 15s linear infinite;
  }

 
  
}

@media (min-width: 1081px) and (max-width: 1100px){

  #submenu-page, #submenu-page-title-portfolio{
    display:none;
  }
  #submenu {
    
    
  }
  .tickerlogo {
    width: 6rem;
    margin: 0 1rem 0 1rem;
    
  }
  .img-ticker {
    animation: ticker-kfr_small 15s linear infinite;
  }

  .img-ticker-otherdirection{
   
    animation: ticker-kf_small 15s linear infinite;
  }

 
  

}

@media (min-width: 1100px) and (max-width: 1150px) {
  .partners{
  height:300px;
  }
  .grid li{
      width:33.33%;
    }
  .featured .featured-margin .reelContentFrame{
    width: 59%;
  }
  .swiper-slide-subtitle{
    bottom:9%;
  }
  #submenu-page, #submenu-page-title-portfolio{
    display:none;
  }
  #submenu {
   
    
  }
  .tickerlogo {
    width: 6rem;
    margin: 0 1rem 0 1rem;
    
  }
  .img-ticker {
    animation: ticker-kfr_small 15s linear infinite;
  }

  .img-ticker-otherdirection{
   
    animation: ticker-kf_small 15s linear infinite;
  }

 
  

}

@media (min-width: 1150px) and (max-width: 1200px) {
  .partners{
  height:300px;
  }
  .grid li{
      width:33.33%;
    }
  .featured .featured-margin .reelContentFrame{
    width: 59%;
  }
  .swiper-slide-subtitle{
    bottom:9%;
  }
  #submenu-page, #submenu-page-title-portfolio{
    display:none;
  }
  #submenu {
   
    
  }
  .tickerlogo {
    width: 6rem;
    margin: 0 1rem 0 1rem;
    
  }
  .img-ticker {
    animation: ticker-kfr_small 15s linear infinite;
  }

  .img-ticker-otherdirection{
   
    animation: ticker-kf_small 15s linear infinite;
  }

  
  

}


@media (min-width: 1200px) and (max-width: 1300px) {
  .partners{
  height:330px;
  }
  .grid li{
      width:33.33%;
    }
  .featured .featured-margin .reelContentFrame{
    width: 55%;
  }
  .swiper-slide-subtitle{
    bottom:8.5%;
  }
  #submenu-page, #submenu-page-title-portfolio{
    display:none;
  }
  .grid-Clients li {
    width: 7%;
  }
    #submenu {
    
  }
   .tickerlogo {
    width: 6rem;
    margin: 0 1rem 0 1rem;
    
  }
  .img-ticker {
    animation: ticker-kfr_small 15s linear infinite;
  }

  .img-ticker-otherdirection{
   
    animation: ticker-kf_small 15s linear infinite;
  }

  
}


@media (min-width: 1300px) and (max-width: 1388px) {
  .partners{
  height:360px;
  }
  .grid li{
      width:33.33%;
    }
  .featured .featured-margin .reelContentFrame{
    width: 55%;
  }
  #submenu-page, #submenu-page-title-portfolio{
    display:none;
  }
  #submenu {
  
    
  }
 
  

}


@media (min-width: 1388px) and (max-width: 1400px) {
   .partners{
  height:360px;
  }
  .grid li{
      width:33.33%;
    }
  #submenu {
  
    
    
  }
  .featured .featured-margin .reelContentFrame{
    width: 55%;
  }
  #submenu-page, #submenu-page-title-portfolio{
    display:none;
  }
  
  
}


@media (min-width: 1400px) and (max-width: 1500px) {
  .partners{
  height:390px;
  }
  .grid li{
      width:33.33%;
    }
  #submenu {
    
  }
  .featured .featured-margin .reelContentFrame{
    width: 55%;
  }
  .swiper-slide-subtitle{
    bottom:9.5%;
  }
  #submenu-page, #submenu-page-title-portfolio{
    display:none;
  }
  

}

@media (min-width: 1500px) and (max-width: 1550px) {
  .partners{
  height:410px;
  }
  .grid li{
      width:33.33%;
    }
  #submenu {
  
    
    
  }
  .featured .featured-margin .reelContentFrame{
    width: 55%;
  }
  .swiper-slide-subtitle{
    bottom:10.5%;
  }
  #submenu-page, #submenu-page-title-portfolio{
    display:none;
  }
  
 
}

@media (min-width: 1550px) and (max-width: 1600px) {
  .partners{
  height:410px;
  }
  .grid li{
      width:33.33%;
    }
  #submenu {
  
    
  }
  .featured .featured-margin .reelContentFrame{
    width: 55%;
  }
  .swiper-slide-subtitle{
    bottom:10.5%;
  }
  #submenu-page, #submenu-page-title-portfolio{
    display:none;
  }
  
 
}


@media (min-width: 1600px) and (max-width: 1700px) {
  .partners{
  height:440px;
  }
  .grid li{
    width:33.33%;
  }
  #submenu {
  
  }
  .featured .featured-margin .reelContentFrame{
    width: 47%;
  }
  .swiper-slide-subtitle{
    bottom:10.5%;
  }
  #submenu-page, #submenu-page-title-portfolio{
    display:none;
  }
  
 
}

@media (min-width: 1700px) and (max-width: 1750px) {
  .partners{
    height:470px;
  }

  .grid li{
      width:33.33%;
    }

  #submenu {
  
    
  }

  .featured .featured-margin .reelContentFrame{
    width: 55%;
  }
  .swiper-slide-subtitle{
    bottom:11%;
  }
  #submenu-page, #submenu-page-title-portfolio{
    display:none;
  }
  
 
  
   
}

@media (min-width: 1750px) and (max-width: 1800px) {
  .partners{
    height:470px;
  }

  .grid li{
      width:33.33%;
    }

  #submenu {
  
    
  }

  .featured .featured-margin .reelContentFrame{
    width: 55%;
  }
  .swiper-slide-subtitle{
    bottom:11%;
  }
  #submenu-page, #submenu-page-title-portfolio{
    display:none;
  }
 

   
}

@media (min-width: 1800px) and (max-width: 1850px) {
  .partners{
  height:500px;
  }
  .grid li{
      width:33.33%;
    }
    #submenu {
  
    
    
  }
  .featured .featured-margin .reelContentFrame{
    width: 55%;
  }
  .swiper-slide-subtitle{
    bottom:11%;
  }
  #submenu-page, #submenu-page-title-portfolio{
    display:none;
  }
  .menu-content ul{
    
  }
  
  
  
}


@media (min-width: 1850px) and (max-width: 1900px) {
  .partners{
  height:500px;
  }
  .grid li{
      width:33.33%;
    }
    #submenu {
  
    
    
  }
  .featured .featured-margin .reelContentFrame{
    width: 55%;
  }
  .swiper-slide-subtitle{
    bottom:11%;
  }
  #submenu-page, #submenu-page-title-portfolio{
    display:none;
  }
  .menu-content ul{
    
  }
   
  
  
}

@media (min-width: 1900px) and (max-width: 2000px) {
  .partners{
  height:530px;
  }
  .grid li{
        width:33.33%;
      }
      
  #submenu {

 
    
  }
  .featured .featured-margin .reelContentFrame{
    width: 55%;
  }
  .menu-content ul{
    
  }
  .swiper-slide-subtitle{
    bottom:11%;
  }
  #submenu-page, #submenu-page-title-portfolio{
    display:none;
  }
   .contact div.aboutcontent{
    font-size: 16px;
    line-height:26px;
  }
  .contact div.aboutcontent a{
    font-size: 22px;
    line-height:26px;
  }
  .contact .content .form .column a, .contact .content .form .column-2 a, .contact .content .form .column-3 a{
    font-size: 16px;
    line-height:26px;
  }
  .project_brief, .project_type_title, .project_type_title a, .project_type_title_media, .project_cross_text_afterdividertitle, .project_cross_text, .project_detail{
    font-size: 16px;
    line-height:26px;
  }

  
 
}

@media (min-width: 2000px) and (max-width: 2417px){
  .partners{
  height:530px;
  }
  .grid li{
        width:33.33%;
      }
  #submenu {
   
   

    
  }
  .featured .featured-margin .reelContentFrame{
    width: 55%;
  }
  .menu-content ul{
    
  }
  .swiper-container{
    height:auto;
  }
  .swiper-slide-subtitle{
    bottom:11.5%;
  }
  #submenu-page, #submenu-page-title-portfolio{
    display:none;
  }
    .contact div.aboutcontent{
    font-size: 16px;
    line-height:26px;
  }
  .contact div.aboutcontent a{
    font-size: 22px;
    /*line-height:26px;*/
  }
  .contact .content .form .column a, .contact .content .form .column-2 a, .contact .content .form .column-3 a{
    font-size: 16px;
    line-height:26px;
  }
  .project_brief, .project_type_title, .project_type_title a, .project_type_title_media, .project_cross_text_afterdividertitle, .project_cross_text, .project_detail{
    font-size: 16px;
    line-height:26px;
  }

  
 
}


@media (min-width: 2417px) and (max-width: 2560px) {
  
  .partners{
  height:530px;
  }
  .grid li{
        width:33.33%;
      }
  #submenu {
  
    
  }
  .featured .featured-margin .reelContentFrame{
    width: 55%;
  }
  .menu-content ul{
   
  }
  .swiper-container{
    height:auto;
  }
  .swiper-slide-subtitle{
    bottom:12%;
  }
  #submenu-page, #submenu-page-title-portfolio{
    display:none;
  }
    .contact div.aboutcontent{
    font-size: 16px;
    line-height:26px;
  }
  .contact div.aboutcontent a{
    /*font-size: 16px;
    line-height:26px;*/
  }
    
  .contact .content .form .column a, .contact .content .form .column-2 a, .contact .content .form .column-3 a{
    font-size: 16px;
    line-height:26px;
  }

  .project_brief, .project_type_title, .project_type_title a, .project_type_title_media, .project_cross_text_afterdividertitle, .project_cross_text, .project_detail{
    font-size: 16px;
    line-height:26px;
  }

  /* Make sure the text is readable in big tv*/
  /*
   .grid .text {
    font-size: 3em;
  }
  .grid .text:hover{
    font-size: 2.5em;
  }*/

}