/*
Theme Name: step
Version: 1.0
Text Domain: step
*/
:root {
/*colori*/
--theme-color: #78b500;
--dark-color:#000;
--light-color:#fff;
--d-green: #47b069;
--w-grey: #b4c4c5;

/*font*/
--title-font: 'Montserrat', sans-serif;
--text-font: 'Montserrat', sans-serif;

/*layout*/
--vh: 100vh; /*variabile da tenere anche dopo eventuale replace*/
--header-height: 114px;
--mobile-header-height: 68px;
--header-height-sticky: 114px;
--mobile-header-height-sticky: 68px;
--footer-height: 347px;
--mobile-footer-height: 218px;
--logo-w-h: 200px;
--logo-w-f: 116px;
}

body{font-family: var(--text-font); letter-spacing: .08em;}
input, textarea{letter-spacing: .08em;}
b{font-weight: 600;}
.point{height: .7vw; width: .7vw; border-radius: 50%;}

.black-bg{background: #000;}
.d-green-bg{background: var(--d-green);}
.w-grey-bg{background: var(--w-grey);}
.w-grey-color{color: var(--w-grey);}
.theme-color{color: var(--theme-color);}
.d-green-color{color: var(--d-green);}
.grey-color{color: #4a636d;}

.sections{padding-top: 73px;}
.mobile .sections{padding-top:  35px;}
section{position: relative; margin: 1.5vw 0;}
p{font-size: 1.7vw; margin: 0;}
p.fs-14{font-size: 1.4vw;}
h1{font-size: 3vw; font-weight: 600; margin-bottom: 2vw;}
h2{font-size: 2vw; font-weight: 600; margin: 0;}
h3{font-size: 1.7vw; font-weight: 600;}
.freccia-div{height: 4vw;background-image: url('img/freccia_div.png'); background-repeat: no-repeat; background-position: center; background-size: contain;}
.space-4{height: 4vw;}

/*contact*/
.contact{margin: -5vw 0 0 0; position: relative;}
.contact > div{position: absolute; top:7vw; width: 100%;}
.contact .row{padding: 2vw; border: 8px solid var(--theme-color); background-color: #fff;}
.contact p{font-size: 1.4vw;}
.contact p.contact-txt{padding-right: 4vw;}
.mobile .contact p.contact-txt{padding-right: 0;}
.contact textarea, .contact input{width: 100%; padding:  1vw 1.5vw; border: 1px solid #000;}
.wpcf7-acceptance .wpcf7-list-item{display: block; margin: 0 0 .8vw 0;}
.wpcf7-acceptance .wpcf7-list-item label{display: flex; margin: 0;}
.wpcf7-acceptance input{ margin-right: .5vw; margin-top: 5px; display: block; width: 35px;}
.wpcf7-acceptance .wpcf7-list-item-label{font-size: .7vw;}
.contact textarea{height: 10vw;}
.contact input[name="your-name"],
.contact input[name="your-surname"],
.contact input[name="your-email"]{margin-bottom: 1vw;}
.contact input[type="submit"]{background-color: #525e67; padding: 0.5vw;letter-spacing: .2em;color: #fff;}
.contact .wpcf7-spinner{display: none;}
.contact .contact-txt{opacity: .8;}
.contact .contact-txt ul{list-style: none; margin-bottom: 3vw;}
.contact .contact-txt li{display: flex; align-items: start; margin-bottom:  1vw;}
.contact .contact-txt li img{width: 2vw; height: auto; margin-top: .5vw; margin-right: .4vw;}

/*home*/
.home-head .text1-wrap{position: absolute; top: 0; width: 100%;}
.home .home-head .text1-wrap p{font-size: 2.5vw; margin-top: 3vw; color: #fff; margin-top: 10vw; max-width: 35%;}
.home-head img.position-absolute{bottom: -4vw; left: 0;}
.home-head .text2-wrap{position: absolute; bottom: 1.2vw; left: 20%; max-width: 78%;}
.home-head .text2-wrap p{color: #fff; margin-bottom: 0;}
section.why{margin-top: 2vw; margin-bottom: 0;}
.fasce{position: relative; margin-top: 2vw;}
.fasce h2{position: absolute; color: #fff;}
.fasce h2.txt-1{top: 5.8vw;left: 9vw;}
.fasce h2.txt-2{top: 16.3vw;left: 70vw; text-align: right;}
.fasce h2.txt-3{bottom: 7.6vw;left: 9vw;}
.working-instep{position: relative; margin-top: -20vw; z-index: -1; margin-bottom: 1.5vw;}
.working-instep div{position: absolute;}
.working-instep .txt-1{top: 19vw; left: 9vw;}
.working-instep .txt-2{top: 40.8vw; left: 25.7vw; text-align: center; color: #fff;}
.working-instep .txt-2 p{line-height: 1.6vw;}
.working-instep .txt-2 h2{line-height: 1.8vw;}
.how{margin:  1.5vw 0 3vw;}
.how .map{position: relative; margin-top: -1vw; margin-bottom: -9vw; z-index: -1;}
.how .map h3{position: absolute; color: #fff; height: 7.5vw; width: 7.5vw; background-color: var(--theme-color); justify-content:center;display: flex;align-items: center;border-radius: 50%;box-shadow: 0px 19px 4px 2px rgb(0 0 0 / 30%);}
.how .map h3.txt-1{top: 18.3vw; left: 21vw;}
.how .map h3.txt-2{top: 9vw; left: 38vw;}
.how .map h3.txt-3{top: 14vw; left: 69vw;}
.what{position: relative;}
.what div{position: absolute; text-align: right;}
.what .txt-1{top: 2vw; left: 63vw;}

/*Working inStep*/
.page-working-instep .head > div{top: 4vw; width: 100%;}
.page-working-instep .head > div > div{text-align: right; margin-top: 0.2vw; padding-right: 2.3vw;}
.page-working-instep .head > div > img{width: 5.5vw; height: auto; margin-right: 6vw;}
.page-working-instep section.graph-1{margin: 3vw 0;}
.page-working-instep .graph-1 img{width: 25vw;}
.page-working-instep .graph-1 > div p {line-height: 1.2em;}
.page-working-instep .graph-1 .text-1{width: 28vw; bottom: 29vw; left: 12vw; text-align: left;}
.page-working-instep .graph-1 .text-1 p{padding-left: 1.2vw;}
.page-working-instep .graph-1 .text-2{width: 28vw; bottom: 29vw; right: 12vw; text-align: right;}
.page-working-instep .graph-1 .text-2 p{padding-right: 1.2vw;}
.page-working-instep .graph-1 .line{border-top: 1px solid #000; width: 26.6vw;}
.page-working-instep .graph-1 .black-point{height: .7vw; width: .7vw; background-color: #000; border-radius: 50%;}
.page-working-instep .graph-1 .v-line{height: 9vw; border-left: 1px solid #000;}
.page-working-instep .graph-1 .text-3 .flex-column{margin-bottom: -.35vw; margin-top: -3vw;}
.page-working-instep .graph-2{margin-top: -13vw;}
.page-working-instep .graph-2 h2{font-size: 2.5vw;}
.page-working-instep .graph-2 > div.position-absolute{top: 16vw;}
.page-working-instep .graph-2 > div.position-absolute p{margin-bottom: 4vw;}
.page-working-instep .graph-2 .txt-box{position: absolute; text-transform: uppercase; font-size: 2vw; color: #fff; line-height: 2.2vw; text-align: center;}
.page-working-instep .graph-2 .txt-box b{font-weight: 700;}
.page-working-instep .graph-2 .txt-box-1{top: 46vw; left: 8.2vw;}
.page-working-instep .graph-2 .txt-box-2{top: 46vw; left: 27.5vw;}
.page-working-instep .graph-2 .txt-box-3{top: 46vw; left: 44vw;}
.page-working-instep .graph-2 .txt-box-3-1{top: 46vw; left: 62.8vw;}
.page-working-instep .graph-2 .txt-box-4{top: 37vw; left: 80.5vw;}
.page-working-instep .graph-2 .txt-box-5{top: 46vw; left: 79.2vw;}
.page-working-instep .graph-2 .txt-box-6{top: 55.5vw; left: 79.3vw;}

/*locations*/
.locations .head > div{top: 5vw; width: 100%; padding-left: 6.5vw;}
.locations .head > div > img{width: 5.5vw; height: auto; margin-right: 2.3vw;}
.locations .head > div > div{margin-top: 0.2vw;}
.locations .graph{margin: 14vw 0; width: 100%; height: 10vw; background-color: #ececed;}
.locations .graph > div{padding: 0 14vw;}
.locations .graph .col-3{padding: 0 1vw; position: relative;}
.locations .graph .col-3 > div{position: absolute;}
.locations .graph .col-3:nth-child(odd) > div {top: 2vw;}
.locations .graph .col-3:nth-child(odd) h1{margin: 0; margin-top: -.8vw;}
.locations .graph .col-3:nth-child(even) > div {bottom: -8vw;}
.locations .graph .col-3:nth-child(even) h1{margin: 0; margin-bottom: -.8vw;}
.locations .graph p{font-size: 1.3vw; line-height: 1.5vw;}
.green-v-line{height: 3vw; border-left: 1px solid var(--d-green);}
.grey-v-line{height: 3vw; border-left: 1px solid var(--w-grey);}
.locations iframe{height: 40vw;}
.locations .mappa{margin-bottom: 3vw;}

/*activities*/
.activities section.head{margin-bottom: -7vw;}
.activities .head > div{top: 5vw; width: 100%; padding-left: 48.5vw; padding-right: 8vw;}
.activities  .head > div > img{width: 5.5vw; height: auto; margin-right: 2.3vw;}
.activities  .head > div > div{margin-top: 0.2vw;}
.act{text-align: center;}
.act h1{margin: 3vw 0 1vw;}
.act p{margin-bottom: 3vw;}
.esa-wrap{padding: 0 2vw;}
img.dev-plan{width: 86vw; margin-top: -12vw;}
img.pro-dev{width: 86vw;}.corporate
img.act-mod{width: 86vw;}

/*corporate*/
.corporate section.head{margin-bottom: -2vw;}
.corporate .head > div{top: 5vw; width: 100%; padding-left: 57.5vw; padding-right: 8vw;}
.corporate .head > div > img{width: 5.5vw; height: auto; margin-right: 2.3vw;}
.corporate .head > div > div{margin-top: 0.2vw;}
.corp h1{margin: 3vw 0 1vw;}
.corp p{margin-bottom: 3vw;}
.clie2 img{margin-top: -7vw;}
.academy{margin-top: 5vw;}
.academy .txt-1{position: absolute; width: 100%;text-align: right; top: -35px;right: 10vw;}
.academy .txt-1 p{margin-bottom}

.corp.academy .txt-1 p{margin-bottom: 5vw;}
.corp.academy .txt-1 img{width: 18vw;}
.corp.academy .txt-2 p{margin-bottom: .7vw; line-height: 1.1}

/*work with us*/
.wwu .freccia-div{margin: 6vw 0 3vw;}
.wwu .contact{margin: -3vw 0 0;}
.wwu .contact > div {top: 6vw;}
.codedropz-upload-inner h3, .codedropz-upload-inner span{display: none;}
a.cd-upload-btn{color: var(--dark-color); opacity: .8;}
.codedropz-btn-wrap{text-align: left;}
.codedropz-upload-handler {border: 1px solid #000;}
.dnd-upload-counter{display: none;}

/*contacts*/
.page-contacts .freccia-div{margin-top: 4vw;}
.page-contacts .section-locations p{margin-top: 2vw; text-align: center; font-size: 1.5vw;}
.page-contacts .contact{margin: 0;}
.page-contacts .section-locations > div{position: absolute; top:7.2vw; width:100%;}



/*header*/
header{padding: 11px 0; background-color: #fff; position:fixed; top:0; width: 100%; z-index:10; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: all 0.3s ease;}
header.header-sticky, .header-shadow{box-shadow: 8px 8px 30px rgba(0, 0, 0, 0.12);}
header .container{height: 100%; display: flex; flex-direction: column; justify-content: center; padding-top:12px;padding-bottom: 12px;}
.mobile header .container{display:block; padding-top:0; padding-bottom:0;}
.cont-nav{height: 100%;  width: 100%; display: flex; justify-content: space-between; position:relative; flex-wrap: wrap;}

.logo{width: var(--logo-w-h); display:flex; align-items: center; padding-top:9px;}
ul#menu-menu-principale{list-style: none;}
.menu a{padding-bottom:3px; color:  var(--dark-color); text-decoration: none; font-weight: normal; font-size: .7rem; letter-spacing:  .02em;}
.menu > li.theme-color a{color: var(--theme-color); font-weight: 600;}
.menu .current-menu-item a{font-weight: 600;}

/*slide-nav*/
#slide-nav{width: 90%; position:fixed; bottom:0; right:-90%; background-color: #fff; height: 100vh;height: var(--vh); z-index:11; transition: right .3s ease-out;}
#slide-nav.translate{display:block;right:0;}
.slide-nav-inner{padding: 22px 34px;}
.slide-nav-head{display: flex; justify-content: space-between;}
.slide-nav-head p {margin-bottom:69px;}
#slide-nav .menu li{padding-bottom:21px;}
#slide-nav .menu > li#menu-item-search{display:none;}

/*header-desk*/
#desk-nav{display:flex; width: calc(100% - 330px);}
#desk-nav .menu{height:100%; display: flex; justify-content: end; align-items: center;  width: 100%;}
#desk-nav .menu > li{padding: 0 1rem; border-left: 2px solid #b8bdc2;}
#desk-nav .menu > li:first-child{border-left: 0; padding-left: 0;}
#desk-nav .menu > li:last-child{padding-right: 0;}
#desk-nav .menu > li > ul.sub-menu {height:0; position:absolute; top: calc(100% + 1px); right:0; overflow:hidden; background: var(--theme-color); width: max-content; width: -webkit-max-content; width: -moz-max-content; }
#desk-nav .menu > li ul.sub-menu li{padding:2px 0;}
#desk-nav .menu > li > ul.sub-menu > li > a{color: #fff;text-transform: uppercase; font-size:12px;}
#desk-nav .menu > li > ul.sub-menu > li > a:hover{color:#fff;}
#desk-nav .menu > li:hover > ul.sub-menu {height:auto; padding:14px 40px 19px;}
#desk-nav .menu > li.home-link-menu{display:none;}

/*footer*/
footer{background: var(--theme-color); padding: 2.5rem 0}
footer p, footer a{color: #000; margin-bottom: 0;}
footer .info{display: flex; justify-content: flex-start;}
footer .info p{font-size: .9vw;}
footer .info p.divisore{margin:  0 .4vw;}
footer .social{display: flex; justify-content: flex-end; align-items: center;}
footer .social a{text-decoration: none;}
footer .social a:hover{color: #fff;}
footer .social i{font-size: 2vw;}
footer .social i.divisore{width: 2.3vw;}

@media (max-width: 991px){	
	.sections#single-campaign{padding-top:76px;}	
	header.header-sticky{height: unset;}
	.logo{width: var(--logo-w-f); padding:0;}	
	.hamb-slide.hamburger{display:flex;}		
	nav#desk-nav{display:none;}
	.copy-dx{text-align: left;}
	.copy-dx a{margin-left:0;}	
}
@media (max-width: 1200px){	    
	#desk-nav{width: calc(100% - 230px);}	
}


@media (min-width: 1400px){
	.container {max-width: 1370px;}	
	.menu a{font-size: .8rem;}
	#desk-nav .menu > li{padding: 0 2rem;}
}

@media (min-width: 1600px){
	.container {max-width: 1570px;}	
	.menu a{font-size: 1rem;}
}




/*hamburger*/
.hamb-slide.hamburger{display:none; align-items: center;}
.mobile .hamb-slide.hamburger{display: block;}
#slide-nav .hamb-slide.hamburger{display:block; text-align: right; margin-top: -2px;}
.hamb-mobi.hamburger{display:none;}
.hamburger {align-items:center; cursor: pointer;transition-property: opacity, filter;transition-duration: 0.15s;transition-timing-function: linear;font: inherit;color: inherit;text-transform: none;background-color: transparent;border: 0;margin: 0;overflow: visible; }
.hamburger:hover {opacity: 0.7; }
.hamburger.is-active:hover {opacity: 0.7; }
.hamburger.is-active .hamburger-inner, .hamburger.is-active .hamburger-inner::before, .hamburger.is-active .hamburger-inner::after {background-color: #a0a0a0; }
.hamb-slide.hamburger.is-active .hamburger-inner, .hamb-slide.hamburger.is-active .hamburger-inner::before, .hamb-slide.hamburger.is-active .hamburger-inner::after{background-color: var(--theme-color);}
.hamburger-box {width: 40px;height: 24px;display: inline-block;position: relative; }
.hamb-slide .hamburger-box{width: 20px; height:12px;}
.hamburger-inner {display: block;top: 50%;margin-top: -2px; }
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {width: 40px;height: 4px;background-color: #a0a0a0;border-radius: 4px;position: absolute;transition-property: transform;transition-duration: 0.15s;transition-timing-function: ease; }
.hamb-slide .hamburger-inner, .hamb-slide .hamburger-inner::before, .hamb-slide .hamburger-inner::after{width: 20px; height: 2px; background-color: var(--theme-color);}
.hamburger-inner::before, .hamburger-inner::after {content: "";display: block; }
.hamburger-inner::before {top: -10px; }
.hamb-slide .hamburger-inner::before{top:-6px;}
.hamburger-inner::after {bottom: -10px; }
.hamb-slide .hamburger-inner::after{bottom: -6px;}
/* Squeeze  */
.hamburger--squeeze .hamburger-inner {transition-duration: 0.075s;transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.hamburger--squeeze .hamburger-inner::before {transition: top 0.075s 0.12s ease, opacity 0.075s ease; }
.hamburger--squeeze .hamburger-inner::after {transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.hamburger--squeeze.is-active .hamburger-inner {transform: rotate(45deg);transition-delay: 0.12s;transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
.hamburger--squeeze.is-active .hamburger-inner::before {top: 0;opacity: 0;transition: top 0.075s ease, opacity 0.075s 0.12s ease; }
.hamburger--squeeze.is-active .hamburger-inner::after {bottom: 0;transform: rotate(-90deg);
transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); }

/*scroll to top*/
#scroll-top {width: 50px; height: 50px; position: fixed; bottom: 55px; right: 20px; z-index: 100; opacity:0; transition: opacity .5s; background-color: grey; display: flex; justify-content: center; align-items: center; font-size: 20px; color: #fff;cursor: pointer;}
#scroll-top.show{ z-index: 100; opacity: 1; }