@media only screen and (min-width: 320px) and (max-width:1023px) {
.desktop-item{display: none}
.mobile-item{display: inline-block}

h1,h2,h2.large{font-size: 50px;}
h4.acumin,h5.acumin{font-size: 3.6vw;line-height: 1.2}
.contact-text{font-size: 3.6vw;line-height: 1.2}
h4,h3{font-size: 6.2vw}
h4.xs{font-size: 5.8vw}
p{font-size: 1.9vh}

.section-title h2{font-size: 48px}

.text-wrap h1, .section-side-title, .project-title, .space-holder, .bg-layer, .img-container h4, .text-wrap, .bg{
    transition: all .8s cubic-bezier(.38, .005, .215, 1),opacity 1s cubic-bezier(.38, .005, .215, 1);
}

/* header */
.menu{left: 20px;top:25px;width: 30px}
.menu span{margin: 3px 0}
.logo{left: 20px;}
.logo img{width: 25px;height: auto}

footer{padding: 15px 20px}
.ss-media{right: 20px}
.sub-menu li{position: relative;height: auto}
.sub-menu, .about-text, .contact-text{margin-left:0}
.about-text,.contact-text{margin-left: 4px}
.home-content{display: none !important}
.sub-menu li span.color-gold{display: block;padding-left: 20px;}
.sub-menu{width: 100% !important;    overflow: auto;
    -webkit-overflow-scrolling: touch;height: 50vh !important}

/* home */
.hero-text,.menu-text{right: 20px;top:25px;width: 70vw}
.home-hero-wrap {top:0}
.hero-text h1{display: block;width: 100%}
.txt-3 .text-right{text-align: left !important;float: left}
.txt-3 h1,.txt-4 h1{text-align: right !important}
.txt-2 .text-right,.txt-4 h1.text-right{letter-spacing: .3vw}



.txt-1 h1{transition-delay: .3s;}
.txt-2 h1{transition-delay: .6s;}
.txt-3 h1{transition-delay: .9s;}
.txt-4 h1{transition-delay: 1.2s;}


.sub-menu li, .nav-it, .menu-list li{
    transition: all 1s cubic-bezier(.38, .005, .215, 1),opacity 2.2s cubic-bezier(.38, .005, .215, 1);
}

.menu-list > li:nth-child(1){}
.menu-list > li:nth-child(2){top:12vw}
.menu-list > li:nth-child(3){top:24vw}

.menu.opa{left: 20px !important}

/* menu */
.menu-list > li:nth-child(1){left: 0}
.menu-text{right:20px;top:25px}

.menu-list.active-1 > li:nth-child(3), .menu-list.active-2 > li:nth-child(3), .menu-list.active-3 > li:nth-child(2){top: calc(85% - 60px);}
.menu-list.active-1 > li:nth-child(2), .menu-list.active-2 > li:nth-child(1), .menu-list.active-3 > li:nth-child(1){top: calc(78% - 60px);}

/* project */
.img-container{padding: 0;width: 100%}
.img-container.show .img-inner, .sample-card.active .img-inner{width: 90%}
.content{width:calc(100vw - 40px);margin: 0 20px}
.content li{margin-bottom: 30px}
.content li:nth-child(2n){margin-top: 0}
.section-title{top:60px;width: 80%;left: 10%}
.viewport{top:80px;overflow-y: scroll}
.scroll-container{padding-bottom: 120px}
.img-container .txt-wrap{left: 0;bottom: 6px}

.section-listing-title.title-lead,.project-info .section-title{transform:translateY(-30vh) rotate(15deg)}
.project-title{width: 100%;right:0}
.sample-card.active .img-inner{width: 100%;position: relative}

.sample-card{margin-right: 0}
.cards{position: relative;float: left;display: block;width: 100%}
.horizontal{height: auto;position: relative;width: 100%;padding-bottom: 120px;}

.sticky{top:85px;width: 100vw;margin-left: 0;padding: 0 45px 200px 45px;position: relative;height: calc(100vh - 80px)}
.space-holder{position: fixed;height: 100%;}
.card-st{margin-bottom: 20px;margin-top: 0 !important;}
.img-inner{width:calc(100vw - 40px) ;transform:scale(1) !important;height: 100%;margin: 0 auto}
.h-img{height: 54vw !important}
.v-img{height: 108vw !important;width: 80vw !important}

.page-id-21 .sample-card img{width: 100%;;height: auto}
.page-id-21 .sample-card{width: 100%;position: relative;float: left;margin-bottom: 40px;margin: 0 auto}

.single .project-title{padding-left: 20px;width:calc(100% - 50px);text-align: left;right: auto}
.sample-card.active{width: 100%}
.horizontal{ transform : translateX(0) !important}


.content{padding-top: 0}
.project-title{bottom: 20px}

.who-btn{cursor: pointer;animation: flash 2s infinite;}
article{margin-bottom: 20px}
.card-st{width: 100% !important}
.popup-video iframe{position: absolute;width: 84vw;height: 30vh;top:30vh;left: 8vw}

@keyframes flash {
  0%   {color:#FFF}
  50%  {color: #deb747}
  100% {color:#FFF}
}

/* 2025 */
.preloader-1,.preloader-2{background-size: 85% auto;}
.logo{top:25px}
.text-wrap img{height: 20vw}
.hero-text, .menu-text{left: auto;width: 75vw}
.about-text, .contact-text{margin-left: 0}

#menu-list{margin-top: 0}

#menu-list>li:nth-child(1){position: absolute;top:0;left: 4px}
#menu-list>li:nth-child(2){position: absolute;top:12vw}
#menu-list>li:nth-child(3){position: absolute;top:24vw}
#menu-list>li:nth-child(4){position: absolute;top:36vw}
.about-text, .contact-text{width: 100% !important;padding-top: 30px;  padding-bottom: 30px;}

.sub-menu{height: auto !important}
.sub-menu-menu{padding-bottom: 60px !important}
.sub-menu > li{padding: 7px 0 3px}
.sub-menu{margin-left: 1.5vw}

.control-single{position: relative;left: auto;bottom: auto}
.horizontal{padding-bottom: 40px;}
.rl-roate h5{left: 13px;color: #e1aa2d !important;}
.project-info .section-side-title {
  transform: translateX(-25vw) rotate(0deg);
}
#menu-list > li:nth-child(1){left: 4px;}
.contact-text{margin-left: 1.5vw }
#orientation-warning h5{font-size: 2.5vw}
.down-arrow{left: 20%}
#menu-list{margin-bottom: 160px}



}

@media only screen and (min-width: 768px) and (max-width:1023px) {
.preloader-2,.preloader-1{background-size:  86vw auto}	
.logo img{width: 35px !important}
.hero-text{top:22px}
.text-wrap img {  height: 21vw;}
.hero-text{width: 78%;}
h2 {  font-size: 14.8vw;}
p,.sub-menu li h4,.rl-roate h5{font-size: 2.3vw !important}

.menu-text{left: calc(100% - 81%);}
#menu-list > li:nth-child(2){top:14vw}
#menu-list > li:nth-child(3){top:28vw}
#menu-list > li:nth-child(4){top:42vw}

.about-text, .contact-text{width: 72vw !important}
.down-arrow{left: 19.5%}

}
@media screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
.preloader-2,.preloader-1{background-size:  86vw auto}	
.logo img{width: 35px !important}

}

@media only screen and (min-width: 1024px) and (max-width:1280px) {
	.logo img{width: 35px !important}

}

@media only screen and (min-width: 1441px) and (max-width:4999px) {

}
    @media screen and (orientation: landscape) and (max-width: 900px) {
      #orientation-warning {
        display: block;

      }
      .nav-it{opacity: 1 !important}
      .logo{left: 20px !important}
    }