/*
FONTS: domaine, light, Idlewild
*/


html, body, section.horizontal {overflow-x: hidden;}
body {margin: 0;padding: 0;background-color: #fff}
body {color: #000;background-color: #161616;transition: background-color 1s ease;}
.pink{color: #D01F51!important}
.outer {display: table;position: absolute;height: 100%;width: 100%;}
.middle {display: table-cell;vertical-align: middle;height: 100%;width: 100%}

.grey-bg{background-color:#161616!important}
.intro-home{width:calc(100% - 22vw); height: auto; padding: 10vw 12vw 10vw 10vw; float:left; text-align: center;}
.intro-home h2 span{font-family: 'domaine';  font-size: 7vw; line-height: 9vw;}
.home-cases h3{font-family: 'domaine'; color: #fff; font-size: 6vw; line-height: 6.3vw}


.logo{width: 200px; height: auto; position: fixed; top: 50px; left: 90px; z-index:2}
.logo-menu{width: 200px; height: auto; position: absolute; top: 80px; left: 90px;}

@media (max-width: 768px) {
.logo{width: 100px; height: auto; position: fixed; top: 40px; left: 30px; z-index:2}

}

/* control text home items for mobile */
@media (max-width: 768px) {
.title-item-home h4{font-size: 35px!important;}
.title-item-home p{font-size: 10px!important; }
}
.title-item-home{width: 100%; height: auto; text-align: center; }
.title-item-home h4{font-family: 'Idlewild'; color: #fff; font-size: 35px;margin-top: -15px}
.title-item-home p{font-family:'Idlewild'; color: #D01F51; font-size: .8vw;  }
.title-item-home a{color:#D01F51!important; text-decoration: none}


/*----SECTIONS HORIZONTAL SCROLLS */

.item-width{width: 30vw; height: 40vw;}
.item-width-end{width: 4vw; height: 40vw;}
@media (min-width: 768px) and (max-width: 1080px) {
.item-width{width: 40vw; height: 50vw; }
}
@media (max-width: 1080px) {
.mobile{display: none}
.hide-mobile{display: none}
}
/* control items index on mobile */
@media (max-width: 768px) {
.item-width{width: 80vw; height: 70vh;}
.item-width-end{display: none}
.home-cases .item:last-of-type{display: none!important}
section.horizontal .item{padding: 0 10vw!important}
section.horizontal .item img{height: 80vh!important; width: auto;cursor: pointer!important}
}
@media (min-width: 1081px) {
.home-cases-mobile{display: none}
.hide-destop{display: none}
}

section {width: 100%;height: 100%;position: relative;}
section.horizontal {overflow-x: hidden;}
section.horizontal .pin-wrap,
section.horizontal .animation-wrap {display: flex; position: relative;z-index: 1;  height: 100vh;}
section.horizontal .item {position: relative;padding: 0 1.5vw ;width: auto;height:100vh;display: flex;align-items: center; overflow: hidden;cursor: pointer!important;}
section.horizontal .item img{height: 100vh; width: auto;cursor: pointer!important}
section.horizontal .item:nth-last-type() {padding: 0 10vw 0 1.5vw;display: flex; position: relative;z-index: 1;  height: 100vh; }



/* CHANGE BACKGROUND COLORS */
.panel {display: flex;justify-content: space-around;align-items: center;font-family: sans-serif;}
/* colours */
.color-white {background-color: #fff;}
.color-dark {background-color: #000;color: #fff!important}
.contact-home{width: 100%; float: left;height: auto; padding: 200px 0 250px 0; text-align: center;position: relative;}
.contact-home p{font-family: 'Idlewild'; color: #8a7d6e; padding-bottom: 20px; font-size: 10px; text-decoration: none}
.contact-home a{font-family: 'Idlewild'; font-size: 40px; text-decoration: none}
.contact-page{width: 100%; float: left; height: auto; padding: 10vw 0 20vw 0; text-align: center;position: relative;}
.contact-page a{font-family: 'domaine'; font-size: 7vw; text-decoration: none}
@media (max-width: 768px) 
{.contact-home a{font-size: 50px!important}
}

/* BANDA LATERALE LOGO + MENU */
@media (max-width: 1080px) {
.banda-sx{display: none!important}
.banda-slide-nav{display: none;}
#cont{margin-left: 0 relative;}
.wrapper{width: 100%;float: left; }
}

@media (max-width: 1000px) {
	
.contact-home{padding-bottom: 200px}
.contact-home a{font-family: 'Idlewild'; font-size: 30px; text-decoration: none}
.contact-page{padding-bottom: 200px}
.contact-page a{font-family: 'domaine'; font-size: 80px; text-decoration: none}

}

/* COLORE BANDA SX */

.banda-sx{width: 70px; height: 100vh; position: fixed; z-index: 1; background-color: transparent; top: 0; left: 0;cursor: pointer!important}
.banda-slide-nav{width: 45vw; height: 100vh; position: fixed; margin-left: -45vw; background-color: #D01F51; z-index: 10;transition: all ease-in-out .5s;transition-timing-function: cubic-bezier(.81,.08,.37,1); transition-delay: 0.1s}
.banda-sx{display: block; z-index: 11;position: fixed}
.banda-sx:hover + .banda-slide-nav{margin-left: 70px;}
.banda-slide-nav:hover{margin-left: 70px;}
.banda-slide-nav:hover > .banda-sx{background-color: red!important}
.contenuto{display: block;-webkit-transition: all 0.2s ease;-moz-transition: all 0.2s ease;-o-transition: all 0.2s ease;transition: all 0.2s ease;}
.menu-over-layer{width: 100vw; height: 100vh; background-color:hsla(0,0%,0%,0.90);z-index: 9;position: fixed; transition:visibility 1s, opacity 1s; visibility:hidden; transition-delay:0.1s;  opacity:0}
.banda-sx:hover + .banda-slide-nav + .menu-over-layer, .banda-slide-nav:hover + .menu-over-layer{visibility:visible; opacity:1}
.banda-slide-nav a{font-family:'light'; font-weight: bold; font-style:italic;display: block;font-size: 40px;text-decoration: none; color: black; padding-bottom: 30px; opacity: 0;-webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;transition: all 0.5s ease;}
.banda-slide-nav a:hover{color: white; margin-left: 120px!important;letter-spacing: 0px; cursor: pointer}
.banda-sx:hover + .banda-slide-nav a:nth-child(5){margin-left: 80px;opacity: 1;-webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;transition: all 0.5s ease; transition-delay: 0.5s}
.banda-sx:hover + .banda-slide-nav a:nth-child(4){margin-left: 80px;opacity: 1;-webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;transition: all 0.5s ease; transition-delay: 0.5s}
.banda-sx:hover + .banda-slide-nav a:nth-child(3){margin-left: 80px;opacity: 1;-webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;transition: all 0.5s ease; transition-delay: 0.6s}
.banda-sx:hover + .banda-slide-nav a:nth-child(2){margin-left: 80px;opacity: 1;-webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;transition: all 0.5s ease; transition-delay: 0.7s}
.banda-sx:hover + .banda-slide-nav a:nth-child(1){margin-left: 80px;opacity: 1;-webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;transition: all 0.5s ease; transition-delay: 0.8s}
.banda-slide-nav:hover a{margin-left:80px; opacity: 1}
.menu-vertical img{margin-top: 47vh; width: 10px; height: auto;}
.menu-vertical{text-align: center}


/* CONTENUTO GENERALE */
.contenuto{overflow: hidden;position: relative; height: auto;-webkit-transition: -webkit-transform 0.4s;-moz-transition: -moz-transform 1s;transition: transform 0.4s; }
.contenuto.menu-is-open{-webkit-transform: scale(0.95);-moz-transform: scale(0.95);-ms-transform: scale(0.95);-o-transform: scale(0.95);transform: scale(0.95); transition-timing-function: cubic-bezier(.81,.08,.37,1);-webkit-transition-duration: .7s;-moz-transition-duration: .7s;transition-duration: .7s;overflow: hidden;}
.contenuto img{border-radius: 0px}
@media (min-width: 1081px) {
#cont{margin-left: 70px!important; }
.wrapper{width: calc(100vw - 144px);float: left;}
}


/* Sweep To Top */
.hvr-sweep-to-top {
-webkit-transform: perspective(1px) translateZ(0);transform: perspective(1px) translateZ(0);-webkit-transition-property: color;transition-property: color;-webkit-transition-duration: 0.3s;transition-duration: 0.3s;}
.hvr-sweep-to-top:before {content: "";position: absolute;  z-index: -1;
top: 0;left: 0;right: 0;bottom: 0;background: #D01F51;-webkit-transform: scaleY(0);transform: scaleY(0);-webkit-transform-origin: 50% 100%;transform-origin: 50% 100%;-webkit-transition-property: transform;transition-property: transform;-webkit-transition-duration: 0.3s;transition-duration: 0.3s;-webkit-transition-timing-function: ease-out;transition-timing-function: ease-out;}
.hvr-sweep-to-top:hover, .hvr-sweep-to-top:focus, .hvr-sweep-to-top:active {color: white;}
.hvr-sweep-to-top:hover:before, .hvr-sweep-to-top:focus:before, .hvr-sweep-to-top:active:before {-webkit-transform: scaleY(1);transform: scaleY(1);}

/* inViewport */

[data-inviewport="scale-in"] { transition: 0.3s;transform: scale(0.00001);transition-delay: .3s}
[data-inviewport="scale-in"].is-inViewport { transform: scale(1);}
[data-inviewport="scale-in-two"] { transition: 0.3s;transform: scale(0.00001);transition-delay: .5s}
[data-inviewport="scale-in-two"].is-inViewport { transform: scale(1);}
[data-inviewport="fade"] {}
[data-inviewport="fade"].is-inViewport { animation: fadeInUpCases 1s;-moz-animation: fadeInUpCases 1s;-webkit-animation: fadeInUpCases 1s;-o-animation: fadeInUpCases 1s;}
[data-inviewport="fade-in"] {}
[data-inviewport="fade-in"].is-inViewport { animation: fadeIn 5s;-moz-animation: fadeIn 5s;-webkit-animation: fadeIn 2s;-o-animation: fadeIn 2s;}


/* Shrink */
.hvr-shrink { cursor: pointer;display: inline-block;vertical-align: middle;-webkit-transform: perspective(1px) translateZ(0);transform: perspective(1px) translateZ(0);box-shadow: 0 0 1px rgba(0, 0, 0, 0);-webkit-transition-duration: 0.3s;transition-duration: 0.3s;-webkit-transition-property: transform;transition-property: transform;}
.hvr-shrink:hover, .hvr-shrink:focus, .hvr-shrink:active {-webkit-transform: scale(0.9);transform: scale(0.9);}


.text-case{padding: 0 4vw!important;}
.text-case h1{font-family: 'domaine'; color: white; font-size: 6vw; line-height: 5.2vw}
.text-case p{font-family: acumin-pro-extra-condensed, sans-serif;  font-size: 2vw; line-height: 2.5vw; color: white;}

/*HOME PAGE INTRO*/



.intro-homepage{width: 100%; height: 100vh;float: left; position: relative; text-align: center;}
.intro-homepage .title-home{height: auto;width: auto;display: block;overflow: hidden;}
.intro-homepage .info{height: auto;width: auto;display: block;overflow: hidden;}

.corsive{text-transform: none!important; font-style: italic}
.welcome-visible{ }
.welcome-hidden{display: none!important}

/*primo div appear*/
.info-hidden{ }
.info-visible{display: block!important;}

.intro-wlecome .title-home:nth-child(1) p{margin-left: -30vw!important;}
.intro-wlecome .title-home:nth-child(2) p{margin-left: -10vw!important;}
.intro-wlecome .title-home:nth-child(3) p{margin-left: 10vw!important;}

/*secondo div appear*/
.intro-info{display: none; margin-top: -100vh }

.title-home p{font-family:'domaine'; color: white; font-size: 6vw; text-transform: uppercase;}
.info p{font-family:'light'; color: white; font-size: 3.5vw; line-height: 4.5vw}
.info a{font-family:'Idlewild'; color: white; font-size: .7vw; letter-spacing: 1vw;  border: 1px solid #D01F51; padding: 15px 30px 15px 50px; border-radius: 30px; text-decoration: none; }
.domaine{font-family:'domaine'!important; }

@media (max-width: 768px) {
.intro-homepage{text-align: left; padding: 0 20px;}
.title-home p{font-size:  40px;}
.intro-wlecome .title-home:nth-child(1) p{margin-left: 0!important;}
.intro-wlecome .title-home:nth-child(2) p{margin-left: 0!important;}
.intro-wlecome .title-home:nth-child(3) p{margin-left: 0!important;}
.info{max-width:80%; }
.info p{font-size: 30px; line-height: 40px}
.info a{font-family:'Idlewild'; margin-bottom: 10px;display: block; margin-top: 20px;color: white; font-size: 10px; letter-spacing: 1vw;  border: 1px solid #D01F51;  padding: 5px; border-radius: 30px; text-decoration: none; text-align: center }

}


/*animated welcome*/
.animated {animation-duration: 1s;animation-fill-mode: both;-webkit-animation-duration: 1s;-webkit-animation-fill-mode: both}
.animatedlatehalf {animation-duration: 1s;animation-fill-mode: both;-webkit-animation-duration: 1s;-webkit-animation-fill-mode: both;animation-delay: 0.3s}
.animatedlatesec {animation-duration: 1s;animation-fill-mode: both;-webkit-animation-duration: 1s;-webkit-animation-fill-mode: both; animation-delay: 0.5s}

/*animated info*/
.animatedinfo-one {animation-duration: 1s;animation-fill-mode: both;-webkit-animation-duration: 1s;-webkit-animation-fill-mode: both;animation-delay: 2s}
.animatedinfo-two {animation-duration: 1s;animation-fill-mode: both;-webkit-animation-duration: 1s;-webkit-animation-fill-mode: both; animation-delay: 2.3s}
.animatedinfo-three {animation-duration: 1s;animation-fill-mode: both;-webkit-animation-duration: 1s;-webkit-animation-fill-mode: both; animation-delay:2.5s}
.animatedinfo-four {animation-duration: 1s;animation-fill-mode: both;-webkit-animation-duration: 1s;-webkit-animation-fill-mode: both; animation-delay:2.8s}



/* fade in up intro text*/
.fadeInUp {opacity: 0;animation-name: fadeInUp;-webkit-animation-name: fadeInUp;}

@keyframes fadeInUp {
    from {transform: translate3d(0,40px,0)}
    to {transform: translate3d(0,0,0);opacity: 1}
}

@-webkit-keyframes fadeInUp {
    from {transform: translate3d(0,40px,0)}
    to {transform: translate3d(0,0,0);opacity: 1}
}

@keyframes fadeInDown {
  from {opacity: 1;transform: translate3d(0, 0, 0);}
  to {opacity: 0;transform: translate3d(0,-40px,0);}
}

.fadeInDown {animation-name: fadeInDown;}

/* fade in up cases*/
.fadeInUpCases {opacity: 0;animation-name: fadeInUpCases;-webkit-animation-name: fadeInUpCases;}

@keyframes fadeInUpCases {
  from {opacity: 0;transform: translate3d(0, 100%, 0);}
  to {opacity: 1;transform: none;}}


.chapter{width: 100%; height: auto; float: left; text-align: center; padding: 100px 0 50px 0;}
.chapter p{font-family: 'Idlewild'; color: #8a7d6e; font-size: 10px; border-bottom: 1px solid #8a7d6e; padding-bottom: 15px;}
.chapter a{display: inline-block; font-family: 'Idlewild'; color: #cdc0b6; font-size: 15px; padding: 10px 20px; text-decoration: none; text-transform: uppercase; -webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;transition: all 0.5s ease; }
.chapter a.active{background-color:#D01F51; -webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;transition: all 0.5s ease; }
.fade-in-up {opacity: 0;transform: translateY(30vh);visibility: hidden;transition: opacity 0.4s ease-out, transform 0.4s ease-out;}
.fade-in-up.is-visible {opacity: 1;transform: none;visibility: visible;}
.fade-in-right {opacity: 0;transform: translateX(30vw);visibility: hidden;transition: opacity 0.6s ease-out, transform 0.8s ease-out;}
.fade-in-right.is-visible {opacity: 1;transform: none;visibility: visible;}

/* Sweep To Right */
.hvr-sweep-to-right {display: inline-block;vertical-align: middle;-webkit-transform: perspective(1px) translateZ(0);transform: perspective(1px) translateZ(0);box-shadow: 0 0 1px rgba(0, 0, 0, 0);position: relative;-webkit-transition-property: color;transition-property: color;-webkit-transition-duration: 0.3s;transition-duration: 0.3s;}
.hvr-sweep-to-right:before {content: "";position: absolute;z-index: -1;top: 0;left: 0;right: 0;bottom: 0;background: #D01F51;-webkit-transform: scaleX(0);transform: scaleX(0);-webkit-transform-origin: 0 50%;transform-origin: 0 50%;-webkit-transition-property: transform;transition-property: transform;-webkit-transition-duration: 0.3s;transition-duration: 0.3s;-webkit-transition-timing-function: ease-out;transition-timing-function: ease-out;}
.hvr-sweep-to-right:hover, .hvr-sweep-to-right:focus, .hvr-sweep-to-right:active {color: white;}
.hvr-sweep-to-right:hover:before, .hvr-sweep-to-right:focus:before, .hvr-sweep-to-right:active:before {-webkit-transform: scaleX(1);transform: scaleX(1);}







.service-wrap{width: 100%;height: auto; float: left;}
.service-wrap a{cursor: pointer}
.service-single{width: 100%; height: auto; padding-left: 15%; border-top: 1px solid #848484;float: left;-webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;transition: all 0.5s ease;}
.service-single:hover{padding-left: 17%;-webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;transition: all 0.5s ease;}
.service-numb{width: 5%; height: auto;float: left; padding: 30px 0; font-family: 'light'; color: white;font-size: 25px;}
.service-title{width: 85%; height: auto; font-family:'semi'; padding-bottom:20px; color: #cdc0b6; font-size: 180px;letter-spacing: -12px;line-height: 140px; float: left;text-transform: uppercase}
.skill-title{width: 85%; height: auto; font-family:'semi'; color: #7D7D7D; padding-bottom:20px;font-size: 180px;letter-spacing: -12px;line-height: 140px; float: left;text-transform: lowercase}
.why .skill-title{width: 85%; height: auto; font-family:'semi'; color: #7D7D7D; padding-bottom:20px;font-size: 80px;letter-spacing: -3px;line-height: 100px; float: left;text-transform: lowercase}
.why .skill-title span.pink{font-size: 20px; padding-right: 40px; letter-spacing: 0}
@media (max-width: 768px) {
.home-cases-mobile{padding: 0 20px;}
.service-single{; height: auto; padding: 0 30px ; }
.service-wrap > a:nth-child(5) > div:nth-child(2){border-bottom: 1px solid #848484;}
.service-numb{width: 40px; height: auto;float: left; padding: 20px 0 5px 0; font-family: 'light'; color: white;font-size: 15px;}
.service-title{width: calc(100% - 60px);color: #cdc0b6!important; font-family:'semi';letter-spacing: 0; line-height: 60px; color: white; font-size: 70px; float: left;text-transform: uppercase;}
.skill-title{width: calc(100% - 60px); font-family:'semi';letter-spacing: 0; line-height: 60px; color: white; font-size: 70px; float: left;text-transform: lowercase;}
	
.why .skill-title{width: 85%; height: auto; font-family:'semi'; color: #7D7D7D; padding-bottom:0px;font-size: 30px;letter-spacing: -1px;line-height: 60px; float: left;text-transform: lowercase}
.why .skill-title span.pink{font-size: 20px; padding-right: 20px; letter-spacing: 0}
}

/*image revail on hover*/
.hover-reveal {position: fixed;width:400px;height: 250px;top: 0;left: 0;pointer-events: none;opacity: 0;}
.hover-reveal__inner,
.hover-reveal__img {width: 100%;height: 100%;position: relative;}
.hover-reveal__deco {width: 100%;height: 100%;position: absolute;top: 0;left: 0;background-color: #181314;}
.hover-reveal__img {background-size: cover;background-position: 50% 50%;}

/*FOOTER*/
.footer{width: 100%;height: auto; float: left; text-align: center;cursor: pointer!important}
.footer a{font-family: 'Idlewild'; color: black; background-color: #D01F51; margin-top:120px; padding: 2vw 0 2vw 0; display: block; font-size: 10px; text-decoration: none;cursor: pointer!important}
.footer ul li{display: inline-block; font-family: 'light'; padding: 0 1vw;}
.footer ul li a{text-decoration: none; color: #5c5c5c; text-transform: uppercase}
.footer ul li a:hover{ color: white; }

/*---CASE PAGE----*/
.single-wrap{width: 100%; height: auto; float: left;}
.single-header-sx{width: 50%; height: 10px;float: left; }
.single-header-dx{width: 50%; height: auto; float: left;padding: 4vw 0;}
.field{font-family: 'Idlewild'; color: white; font-size: 8px; text-transform: uppercase; padding-bottom: 20px;}
.title h1{font-family:'Idlewild'; color: white; font-size: 40px; padding-bottom: 10px; }
.title h2{font-family: 'light'; color: white; font-size: 22px; line-height: 30px; }

@media (max-width: 768px) {
.single-header-sx{display: none }
.single-header-dx{width: calc(100% - 60px); height: auto; float: left;padding: 80px 30px 30px 30px;}
.field{display: none}
.title h1{font-family:'Idlewild'; color: white; font-size: 35px; padding-bottom: 10px; padding-top: 30px; }
.title h2{font-family: 'light'; color: white; font-size: 17px; line-height: 20px; }
.margin-top{margin-top: -150px;}
.only-desk{display: none!important}
.logo-san{width: 80vw!important; height: auto; margin-top: 10vw!important; margin-bottom: 10vw; z-index: 2; position: relative;}
.footer a{padding: 80px 0; }

}

@media (min-width: 768px) and (max-width: 1080px) {
.single-header-sx{display: none }
.single-header-dx{width: calc(100% - 400px); height: auto; float: left;padding: 120px 200px 60px 120px;}
.field{display: none}
.title h1{font-family:'domaine'; color: white; font-size: 80px; padding-bottom: 10px; }
.title h2{font-family: 'light'; color: white; font-size: 23px; line-height: 30px; }
}

/*animated case intro page titles*/
.animated {animation-duration: 1s;animation-fill-mode: both;-webkit-animation-duration: 1s;-webkit-animation-fill-mode: both}
.animated2 {animation-duration: 1s;animation-fill-mode: both;-webkit-animation-duration: 1s;-webkit-animation-fill-mode: both;animation-delay: 0.3s}
.animated3 {animation-duration: 1s;animation-fill-mode: both;-webkit-animation-duration: 1s;-webkit-animation-fill-mode: both; animation-delay: 0.5s}
.animated4 {animation-duration: 1s;animation-fill-mode: both;-webkit-animation-duration: 1s;-webkit-animation-fill-mode: both; animation-delay: 0.7s}
.animated5 {animation-duration: 1s;animation-fill-mode: both;-webkit-animation-duration: 1s;-webkit-animation-fill-mode: both; animation-delay: 0.9s}

.single-content{width: 70%; height: auto; float: left;margin-left: 15%;padding:  0; text-align: center}
.single-content img.full{width: 100%; height: auto; padding: 0 0 0 0 }
.single-content img.half{width: calc(50% - 4px); height: auto;float: left; padding: 0 0 0 0; margin: 4px 2px;}

.logo-san{width: 50vw; height: auto; margin-top: -30vw; margin-bottom: 10vw; z-index: 2; position: relative;}
@media (max-width: 768px) {
.single-content img.half{width: 100%!important; height: auto;float: left; padding: 0 0 0 0;  }
.single-content{width: 90%; margin-left: 5%}
.single-content img.half{margin: 4px 0}
}

/*-- works --*/
.boxes a{cursor: pointer}
.is-animated {animation: .6s fadeInUp;}



.cd-primary-nav,.cd-nav-trigger{display: none!important;}
.cd-nav-trigger {position: fixed;display: inline-block;}
.cd-nav-trigger {top: 30px;right: 5%;height: 44px;width: 44px;z-index: 5;overflow: hidden;text-indent: 100%;white-space: nowrap;}
.cd-nav-trigger .cd-icon{width: 100%; height: 2px; background-color: white; float: left;}
.cd-nav-trigger .cd-icon:nth-child(2){width: 60%; height: 2px; margin-top: 15px;background-color: white; float: right;}
.cd-primary-nav {position: fixed;left: 0;top: 0;height: 100vh;width: 100%;z-index: 3;background-color: #D01F51;overflow: auto;-webkit-overflow-scrolling: touch;visibility: hidden;opacity: 0;-webkit-transition: visibility 0s, opacity 0.3s;-moz-transition: visibility 0s, opacity 0.3s;transition: visibility 0s, opacity 0.3s;text-align: center;
}

.cd-primary-nav a {font-family:'light';font-size: 50px; font-style:italic; color: black;display: block;padding-bottom: 30px; text-decoration: none;}
.cd-primary-nav.fade-in {visibility: visible;opacity: 1;}
.cd-overlay-nav, .cd-overlay-content {
position: fixed;top: 18px;right: 5%;height: 4px;width: 4px;-webkit-transform: translateX(-20px) translateY(20px);-moz-transform: translateX(-20px) translateY(20px);-ms-transform: translateX(-20px) translateY(20px);-o-transform: translateX(-20px) translateY(20px);transform: translateX(-20px) translateY(20px);}
.cd-overlay-nav span, .cd-overlay-content span {
display: inline-block;position: absolute;border-radius: 50%;-webkit-transform: translateZ(0);-moz-transform: translateZ(0);-ms-transform: translateZ(0);-o-transform: translateZ(0);transform: translateZ(0);-webkit-backface-visibility: hidden;backface-visibility: hidden;will-change: transform;-webkit-transform-origin: 50% 50%;-moz-transform-origin: 50% 50%;-ms-transform-origin: 50% 50%;-o-transform-origin: 50% 50%;transform-origin: 50% 50%;-webkit-transform: scale(0);-moz-transform: scale(0);-ms-transform: scale(0);-o-transform: scale(0);transform: scale(0);}
.cd-overlay-nav.is-hidden, .cd-overlay-content.is-hidden {opacity: 0;visibility: hidden;-webkit-transition: opacity .3s 0s, visibility 0s .3s;-moz-transition: opacity .3s 0s, visibility 0s .3s;transition: opacity .3s 0s, visibility 0s .3s;
}

.cd-overlay-nav {z-index: 2;}
.cd-overlay-nav span {background-color: #D01F51;}
.cd-overlay-content {z-index: 4;}
.cd-overlay-content span {background-color: #000;}

@media (max-width: 1000px) {
.cd-primary-nav,.cd-nav-trigger{display: block!important;}
	
}


.clasp {
text-align:left;
}
.lunchbox {
display:none;
}
.clasp a{color:#7D7D7D; font-family: 'Idlewild'; font-size: 8px; text-decoration: none!important;}
.show-more{ height: auto; padding-top: 40px;-webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;transition: all 0.5s ease;}
.lunchbox{margin-left: calc(-50vw + 72px); width: calc(100vw - 144px - 12vw); padding: 6vw; text-align: left; column-count: 2; column-gap: 50px}
.lunchbox {font-family: 'light'; color: white; font-size: 18px; line-height: 37px;}
.lunchbox a{font-family: 'light'; color: white; font-size: 22px; line-height: 40px; text-decoration: underline}

@media (max-width: 768px) {
.show-more{ height: auto; padding-top: 20px;-webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;transition: all 0.5s ease;}
.clasp a{color:#7D7D7D; font-family: 'Idlewild'; font-size: 8px; letter-spacing: 9px; text-decoration: none!important; padding-botom: 20px;}
.lunchbox{margin-left: 0px; margin-top: 20px; width: 100%; padding: 3px; text-align: justify; column-count: 1;}
.lunchbox {font-family: 'light'; color: white; font-size: 14px; line-height: 25px;}
.scan-qr{display: none!important}
.san-img img{width: 100%!important; height: auto;float: left;}
}
@media (min-width: 768px) and (max-width: 1080px) {
.show-more{ height: auto; padding-top: 20px;-webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;transition: all 0.5s ease;}
.clasp a{color:#7D7D7D; font-family: 'Idlewild'; font-size: 8px; letter-spacing: 9px; text-decoration: none!important; padding-botom: 20px;}
.lunchbox{margin-left: 0px; margin-top: 20px; width: 130%; padding: 3px; text-align: justify; column-count: 1;}
.lunchbox {font-family: 'light'; color: white; font-size: 14px; line-height: 25px;}
}

.scan-qr{width: 200px!important; height: auto; margin:50px 0}
.san-img img{width: 33.33333%; height: auto;float: left;}






/*-- landing --*/

.intro-page{width: 70%; margin-left: 15%;float: left; margin-top: 100px}
h3.small-title{color:#7D7D7D; font-family: 'Idlewild'; font-size: 8px; text-align: center; display: block; padding-bottom: 30px; padding-top: 40px}
h1.idle-intro{font-family: 'Idlewild'; font-size: 3vw; text-align: center; display: block;color:#cdc0b6; width: 70%;margin-left: 15%; padding-bottom: 20px}
h1.idle-outro{font-family: 'Idlewild'; font-size: 30px; text-align: center;float: left;color:#cdc0b6; width: 70%;margin-left: 15%; padding-bottom: 20px; padding-top: 80px;}

.intro-page img:nth-of-type(1){width: calc(25% - 10px); height: auto; float: left; margin: 40px 10px 40px 0}
.intro-page img:nth-of-type(2){width: calc(50% - 10px); height: auto; float: left; margin: 160px 10px 0 0  }
.intro-page img:nth-of-type(3){width: 25%; height: auto; float: left; margin: 40px 0}

.intro-images-model{ float: left; width: calc(100vw - 190px); margin-left: -20%;}

h4.inter{font-family:'light'; font-size: 25px; line-height: 40px;color: #c6c6c6; display: block; float: left;margin-top: 0px; text-align: left}
h2.inter{font-family:'semi'; font-size: 90px;text-align: left;color: #c6c6c6; display: block; float: left;margin-top: 30px}


.bene-wrap:first-child{margin-top: 120px}
.bene-wrap:last-of-type{border-bottom: 1px solid #8a7d6e; margin-bottom: 120px}
.bene-wrap{width: 100%; float: left;  height: auto;padding-top: 50px; padding-bottom: 50px;border-top: 1px solid #8a7d6e;-webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;transition: all 0.5s ease;}
.bene-wrap:hover{background-color: #D01F51;border: none;cursor: pointer;-webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;transition: all 0.5s ease;}

.bene-wrap:hover > .bene-title h3{color: #000; margin-left: 30px;}
.bene-wrap:hover > .bene-text p{color: #000;}

.bene-title{width: 40%; height: auto; float: left;}
.bene-title h3{color:#7D7D7D; font-family: 'Idlewild'; font-size: 20px; float: left; text-align: left;}
.bene-text{width: 40%; height: auto; float: left;}
.bene-text p{color:#DADADA; font-family: 'semi'; font-size: 18px; float: left; text-align: left;line-height: 30px}
.desk{display: none}

@media (max-width: 768px) {
h3.small-title{padding-top: 70px}
h1.idle-outro{font-size: 30px;width: 100%;margin-left: 0; padding-bottom: 60px; padding-top: 40px;}

	
.intro-page{width: 100%; margin-left: 0;float: left; margin-top: 0px}
.intro-images-model{ width: 100%; margin-left: 0;}
h1.idle-intro{font-family: 'Idlewild'; font-size: 25px; text-align: center; display: block;color:#cdc0b6; width: 100%;margin-left: 0; padding-bottom: 0px}
.intro-page img:nth-of-type(1),.intro-page img:nth-of-type(3){display: none}
.intro-page img:nth-of-type(2){width: 100%; height: auto; float: left; margin: 20px 0}
h4.inter{font-size: 18px;margin-top: 10px; padding: 0 0px; line-height: 25px; text-align: left;}
h2.inter{font-size: 30px;margin-top: 20px;padding: 0 0px;}
.bene-wrap:hover{background-color: transparent;border-top: 1px solid #8a7d6e;}
.bene-wrap:first-child{margin-top: 30px}
.bene-wrap:last-of-type{border-bottom: 1px solid #8a7d6e; margin-bottom: 30px}
.bene-wrap{padding-top: 10px; padding-bottom: 20px;}
.bene-title{width: 100%; padding: 10px 0;}
.bene-text{width: 100%;}
.bene-title h3{font-size: 15px; }
.bene-wrap:hover > .bene-title h3{color: #7D7D7D; margin-left: 0px;}
.bene-wrap:hover > .bene-text p{color: #DADADA; margin-left: 0px;}
.desk{display: block}

}


/*-- about --*/

.intro-about{width: 100%; height: 100px;background-image: url("../images/me.jpg"); background-position: right; background-repeat: no-repeat; background-size: contain; padding: 300px 0 440px 0; float: left;}
.intro-text-about{width: 70%; height: auto; margin-left: 15%; float: left;}
h3.about-title{color:#7D7D7D; font-family: 'Idlewild'; font-size: 8px; text-align: left; display: block; padding-bottom: 30px;}
h2.about-text{font-family:'semi'; font-size: 70px;text-align: left;color: #c6c6c6;}
h3.about-text{font-family:'light'; font-size: 30px;text-align: left;color: #c6c6c6;}
h2.about-text a{font-family:'light'; font-size: 30px;text-align: left;color: #c6c6c6; text-decoration: underline; cursor: pointer}
.service-wrap > h3:nth-child(1){margin-left: 20%;margin-top: -50px;}


.expe{width: 100%; height: auto;padding: 300px 0; float: left;}
.show{width: 100%; height: auto;padding: 20px 0 200px 0; float: left;}
.process{width: 100%; height: auto;padding: 100px 0; float: left;}
.desc-prj{width: 100%; height: auto;padding: 150px 0; float: left;}
.clients, .why{width: 100%; height: auto;padding: 50px 0; float: left;}
.clients > h3:nth-child(1), .why > h3:nth-child(1){margin-left: 0%;margin-top: 0px;}
.clients a, .why a{cursor: url('../images/cursor.png'), pointer;}

.outro-about{width: 100%; height: auto;background-image: url("../images/me_bottom.jpg"); background-position: left; background-repeat: no-repeat; background-size: cover; padding: 300px 0 300px 0; float: left;}
.outro-about .about-text{text-align: center; text-transform: uppercase; padding-bottom: 80px;}
.outro-about .about-title{text-align: center;}


.title-case-right{right: 100px; top: 50px;position: absolute; text-align: right; z-index: 2}
.item-inside video{height: 100vh; width: 100vw; object-fit: cover}
.item-inside iframe{height: 100vh; width: 100vw; object-fit: cover}

.item-inside-vert video{height: 100vh; width: 100vw; object-fit: cover}
.item-inside-vert iframe{height: 100vh; width: 100vw; object-fit: cover}


section.horizontal .item-inside {position: relative;padding: 0 ;width: 100vw;height:100vh;display: flex;align-items: center; object-fit: cover; overflow: hidden;cursor: pointer!important;}
section.horizontal .item-inside img{object-fit: cover; object-position: center; width: 100%; height: 100%;}

section.horizontal .item-inside-vert {position: relative;padding: 0 ;height:100vh;display: flex;align-items: center; object-fit: cover; overflow: hidden;cursor: pointer!important;}
section.horizontal .item-inside-vert img{object-fit: cover; object-position: center; height: 100%;}

.brand-logos{width: 100%; height: auto;padding-top: 50px;float: left;}
.brand-logos img{width: 120px; height: auto;display: inline; margin-right: 100px;}



.next-prj{width: 100%; height: auto;float: left; text-align: center; cursor: pointer; padding: 5vw 0 10vw 0}
.next-prj p{font-family: 'Idlewild'; color: #8a7d6e; font-size: 10px; padding-bottom: 15px;}
.next-prj h3{font-family: 'Idlewild'; font-size: 30px; color: #D01F51;}

.contacts-let{width: 100%; height: 80vh;float: left; text-align: center; cursor: pointer; display: flex; flex-direction: column; justify-content: center;}
.contacts-let p{font-family: 'Idlewild'; color: #8a7d6e; font-size: 10px; padding-bottom: 15px;width: 100%;  }
.contacts-let h3{font-family: 'Idlewild'; font-size: 30px; color: #D01F51;width: 100%; }

@media (max-width: 768px) {
.intro-about{width: 100%; height: 100px;background-image: url("../images/me.jpg"); background-position: bottom right; background-repeat: no-repeat; background-size: contain; padding: 100px 0 200px 0; float: left;}
.intro-text-about{width: calc(100% - 60px); height: auto; margin: 0; padding: 30px;}
h2.about-text{font-size: 30px;}
h2.about-text a{font-size: 20px}
.service-wrap > h3:nth-child(1){margin-left: 30px;margin-top: 0px;}
.expe{padding: 100px 0;}
.show{padding:0px!important; }
.video-iframe-about{width: 100%; height: 300px!important;  margin-bottom: 50px; }
.video-iframe-about iframe{width: 100%; height: 300px!important; }

.process{padding: 50px 0;}

	
.outro-about{background-position: left; padding: 100px 0 100px 0; }
.desc-prj{padding: 100px 0; }

.brand-logos{width: 100%; height: auto;padding-top: 10px;float: left;}
.brand-logos img{width: 70px; height: auto;float: left; margin-right: 10px;}
	.intro-text-landing .brand-logos{text-align: center;}
.intro-text-landing .brand-logos img{width: 160px; height: auto;display: inline-block; margin: 10px 5px;}


.slide-works video{height: auto; width: 100%}
section.horizontal .item-inside {position: relative;padding: 0 10px ;width: auto;height:auto;display: flex;}
section.horizontal .item-inside img{height: auto; width: 100%;float: left;cursor: pointer!important; margin-bottom: 10px}
section.horizontal .item-inside-vert {position: relative;padding: 0 10px ;width: auto;height:auto;display: flex;}
section.horizontal .item-inside-vert img{height: auto; width: 100%;float: left;cursor: pointer!important; margin-bottom: 10px}
.title-case-right{ min-height: auto; margin-bottom: 150px; position: relative;float: left; width: 100%;left: 0; text-align: left; padding-left: 25px;}
.target .item-inside:first-of-type, .target .item-inside-vert:first-of-type{margin-top: -50px}
	
	
.intro-text-landing h2.about-text{font-size: 60px!important; text-align: center;}
.intro-text-landing h3.about-text{text-align: center;padding-top: 20px; font-size: 25px; }
}


/*-- LANDING PAGE DAVE --*/
.intro-landing{width: 100%; height: auto; background-color: black; text-align: center!important; padding: 200px 0 240px 0; float: left;}
.outro-landing{width: 100%; height: auto;background-image: url("../images/outro-landing-food.jpg"); background-position: left; background-repeat: no-repeat; background-size: cover;  padding: 500px 0 440px 0; float: left; color: black}
.outro-landing-product{width: 100%; height: auto;background-image: url("../images/footer-landing-product.jpg"); background-position: left; background-repeat: no-repeat; background-size: cover;  padding: 500px 0 440px 0; float: left; color: black}

.outro-landing h2,.outro-landing h3,.outro-landing-product h2,.outro-landing-product h3{color: black!important}.outro-landing h3{margin-top: -400px}
.intro-text-landing{width: 70%; height: auto; text-align: center!important; margin-left: 15%; float: left;}
.intro-text-landing h2.about-text{font-size: 60px!important; text-align: center;}
.intro-text-landing h3.about-text{text-align: center;padding-top: 20px; }
.landing-light-wrap{width: 100%;height: auto; padding: 120px 0 120px 0; background-color: #fdf8f0;  float: left;}
.landing-light-content{width: 70%; height: auto; margin-left: 15%; float: left;}
.light-black-text h4, .light-black-text h2{color: black!important}
.light-black-text h4{font-family:'medium'}
.landing-features-wrap{width: 100%; height: auto;float: left;display: flex;align-items: flex-end;}
.landing-features-text{width:30%; height: auto;float: left;padding-right: 20px;}
.landing-features-text p{font-family: 'Idlewild'; font-size: 13px; text-transform: capitalize; padding-bottom: 15px; padding-top: 15px;border-bottom: 1px solid #ecebe8}
.landing-features-text p span{font-size:12px; margin-right: 20px;}
.landing-features-text p:last-of-type{border: none!important}
.landing-features-images{width: 70%; height: auto;float: left;display: flex;align-items: flex-end;}
.landing-features-images img:first-of-type{width: 43%; margin-right: 2%; float: left;}
.landing-features-images img{width: 55%; float: right; border-radius: 20px; border: none}
.margin-top{margin-top: -50px}
@media (max-width: 768px) {
.intro-landing{padding: 100px 0 140px 0; float: left;}
.intro-text-landing{width: 90%; height: auto; text-align: center!important; margin-left: 5%; float: left;}
.intro-text-landing h2.about-text{font-size: 50px!important; text-align: center;}

.landing-light-wrap{padding: 10px 0}
.light-black-text h4{font-family:'bold'}
.light-black-text h4:last-of-type{display: none!important}
.landing-light-content{width: calc(100% - 60px); height: auto; margin: 0; padding: 30px;}
.landing-features-text{width:100%;padding-right: 0px; padding-top: 20px}
.landing-features-images{display: none}
.margin-top{margin-top: 0px}
.video-container iframe{height: 250px!important}
.img-hero-landing{width: 100%; height: 400px!important; background-image: url("../images/intro-landing-food-m.jpg")!important; background-position: left; background-repeat: no-repeat; background-size: cover;}
	
.outro-landing{width: 100%; height: auto;background-image: url("../images/outro-landing-food.jpg"); background-position: left; background-position: center center; background-repeat: no-repeat; background-size: cover;  padding: 500px 0 440px 0; float: left; color: black}
.outro-landing-product{width: 100%; height: auto;background-image: url("../images/footer-landing-product.jpg"); background-position: left; background-position: center center; background-repeat: no-repeat; background-size: cover;  padding: 500px 0 440px 0; float: left; color: black}
.outro-landing h2,.outro-landing h3,.outro-landing-product h2,.outro-landing-product h3{color: black!important}.outro-landing h3{margin-top: -400px}
}

.image-full-width{width: 50%; height: auto; float: left}
.image-full-width img{width: 100%; height: auto; object-fit: cover}

.video-container {position: relative;max-width: 100%; width: 100%; float: left;background-color: #000;overflow: hidden;border-radius: 10px; margin-top: 20px;}
.video-container iframe {width: 100%;height: 40vw; border: 0;}
.paused {pointer-events: none;}


.see-my{width: 100%; height: auto; float: left; text-align: left;padding:0 15%}
.see-my a{font-family:'semi'; font-size: 20px; color: white; background-color:#D01F51; padding: 10px 30px; border-radius: 50px;text-decoration: none}

.link-social{width: 100%; height: auto; margin-top: 20px;float: left; display: flex; flex-direction: row; justify-content: center}


a.linkedin-icon{ font-family: 'bold'; color: #8a7d6e;text-decoration: none!important; margin-right: 10px; font-size: 20px; border: 2px solid #8a7d6e; padding: 10px; border-radius: 10px;  width: 50px;display: inline; float: left;cursor: url('../images/cursor.png'), pointer;-webkit-transition: all 0.2s ease;-moz-transition: all 0.2s ease;-o-transition: all 0.2s ease;transition: all 0.2s ease;}
a.linkedin-icon:hover{color: white; border: 2px solid white;-webkit-transition: all 0.2s ease;-moz-transition: all 0.2s ease;-o-transition: all 0.2s ease;transition: all 0.2s ease;}


.video-iframe{width: 100%; height: 800px; float: left; position: relative; margin-bottom: 50px; border-radius: 30px; overflow: hidden}
.video-iframe iframe{width: 100%; height: 800px;}


.video-iframe-about{width: 100%; height: 800px; float: left; position: relative; margin-bottom: 50px;  overflow: hidden}
.video-iframe-about iframe{width: 100%; height: 800px;}



.cta-button a{width: auto; padding: 20px 30px; margin: 20px 0; border-radius: 50px; background-color: #D01F51; text-align: center; font-family: 'Idlewild'; color: black; font-size: 15px;display: inline-block; text-decoration: none; }
.cta-button a:hover{background-color: white; color: #D01F51 ;  }

.intro-text{width: calc(100% - 30%); float: left; haight: auto; padding: 0 15%!important; }
.margin-top-sup{margin-top: -200px!important}

.intro-text-landing img.intro{width: 100%}

.img-hero-landing{width: 100%; height: 30vw; background-image: url("../images/intro-landing-food.jpg"); background-position: left; background-repeat: no-repeat; background-size: cover;}