/*
------------------------------------------------------------------------------------
COM.EZZATO.DEV
By : Andre Lorenzoni at andre@ezzato.com
------------------------------------------------------------------------------------
*/	

/*
custom font faces
*/

@font-face {
   font-family: 'p22_underground_cy_probook';
   src: url('fonts/p22undergroundcypro-book-webfont.woff2') format('woff2'),
        url('fonts/p22undergroundcypro-book-webfont.woff') format('woff');
   font-weight: normal;
   font-style: normal;
}

@font-face {
   font-family: 'p22_underground_cy_prodemi';
   src: url('fonts/p22undergroundcypro-demi-webfont.woff2') format('woff2'),
        url('fonts/p22undergroundcypro-demi-webfont.woff') format('woff');
   font-weight: normal;
   font-style: normal;
}

@font-face {
   font-family: 'p22_underground_cy_proheavy';
   src: url('fonts/p22undergroundcypro-heavy-webfont.woff2') format('woff2'),
        url('fonts/p22undergroundcypro-heavy-webfont.woff') format('woff');
   font-weight: normal;
   font-style: normal;
}

@font-face {
   font-family: 'p22_underground_cy_proregular';
   src: url('fonts/p22undergroundcypro-medium-webfont.woff2') format('woff2'),
        url('fonts/p22undergroundcypro-medium-webfont.woff') format('woff');
   font-weight: normal;
   font-style: normal;
}

@font-face {
   font-family: 'p22_underground_cy_prothin';
   src: url('fonts/p22undergroundcypro-thin-webfont.woff2') format('woff2'),
        url('fonts/p22undergroundcypro-thin-webfont.woff') format('woff');
   font-weight: normal;
   font-style: normal;
}

/*
defaults
*/

* {
   font-size: 0px;
}

* {
   margin: 0;
   padding: 0;
   border: 0;
   outline: 0;
   vertical-align: baseline;
   background: transparent;
   font-family: 'p22_underground_cy_proregular';
}

.page {
	position: relative;
	display: block;
	top: 0px;
   left: 0px;
   opacity: 0;
   
   /* avoid horizontal scroll */
   overflow-x: hidden;

   -o-transition:.5s;
	-ms-transition:.5s;
	-moz-transition:.5s;
	-webkit-transition:.5s;
   transition:.5s;
}

.page.active {
   opacity: 1;
}

.center-spacer.page-error {
   min-height: 60vh;
   padding:80px;
   text-emphasis: center;
}

.center-spacer {
   position: relative;
   display: block;
   width: 1085px;
   margin: 0 auto;
   /*
   padding-left: 100px;
   padding-right: 100px;
   */
}


.work-spacer {
   position: relative;
   display: block;
   width: 1380px;
   margin: 0 auto;
   /*
   padding-left: 100px;
   padding-right: 100px;
   */
}

.work-spacer.item {
   width: 1021px;
}

h1,
.h1 {
   font-family: 'p22_underground_cy_proregular';
   line-height: 120%;
   font-size: 60px;
}

h2,
.h2,
h2 > p {
   font-family: 'p22_underground_cy_proregular';
   line-height: 120%;
   font-size: 24px;
   color:#EE4B4E;
   text-transform: uppercase;
   margin: 0 auto;
   text-align: center;
   padding: 30px 0px;
}

h3,
.h3 {
   font-family: 'p22_underground_cy_proregular';
   line-height: 120%;
   font-size: 16px;
   text-align: center;
   text-transform: uppercase;
   color:#4B4B4B;
}

.paragraph,
.paragraph *,
p,
.p,
span,
.span {
   /*font-family: "Gotham-Bold";*/
   font-family: 'p22_underground_cy_prothin';
   line-height: 120%;
   font-size: 16px;
   color:#4B4B4B;
}

p {
   padding: 10px 0px;
}

p * {
   font-size: inherit;
}

button,
a.button {
   position: relative;
   display: table;
   font-size: 18px;
   color: #EE4B4E;
   border:solid 1px #EE4B4E;

   padding: 15px 50px;
   text-align: center;
   text-transform: uppercase;
   font-family: 'p22_underground_cy_proregular';
   
   -o-transition:.5s;
	-ms-transition:.5s;
	-moz-transition:.5s;
	-webkit-transition:.5s;
   transition:.5s;
   transition: transform .5s cubic-bezier(.77,0,.175,1);
   overflow: hidden;
   line-height: 100%;

   margin: 0 auto;
}

button > span,
a.button > span {
   font-size: inherit;
   color: inherit;
   z-index: 1;
   position: relative;
   line-height: 100%;
   font-family: 'p22_underground_cy_proregular';

   -o-transition:.5s;
	-ms-transition:.5s;
	-moz-transition:.5s;
	-webkit-transition:.5s;
}

button:before,
a.button:before {
   position: absolute;
   content: ' ';
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   line-height: 100%;
   transform-origin: bottom left;
   transition: transform .5s cubic-bezier(.77,0,.175,1);
   background-color: #EE4B4E;
   transform: scaleY(0);
   z-index: 0;

}

button.white,
a.button.white {
   color: #FFFCFC;
   border:solid 1px #FFFCFC;
}

button.white:before,
a.button.white:before {
   color:#4B4B4B;
   background-color: #FFFCFC;
}

button.white:hover,
a.button.white:hover {
   color:#4B4B4B;

}

button:hover:before,
a.button:hover:before {
   transform: scaleY(1);
}

button:hover,
a.button:hover {
   /*filter: invert(0.4) sepia(1) saturate(2.9) hue-rotate(0deg) brightness(1.09);*/
   /*color:#FFF32A;*/
   
   /*background-color: #D7222A;*/
   color:#ffffff;
   
}

.spacer {
   position: relative;
   display: block;
   width: 10px;
   height: 10px;
}

/*
header
*/

header {
   position: fixed;
   top: 0px;
   left: 0px;
   width: 100%;
   height: 1px;
   overflow: visible;
   z-index: 4;
}

header > nav {
   position: relative;
   display: block;
   background-color: #000000;
   padding: 20px;

   padding: 20px 20px 0px 20px;

}

header > nav.internal > ul > li > ul,
header > nav.internal {
   /*background-color: transparent;*/
   background-color: #E2E2E2;
}

header > nav > ul {
   position: relative;
   display: block;
}

header > nav > ul > li {
   position: relative;
   display: inline-block;
   padding: 0px 20px;
}

header > nav > ul > li.drop > a {
   z-index: 2;
}

header > nav > ul > li.drop:after {
   position: relative;
   display: inline-block;
   vertical-align: middle;
   content:'';
   font-size: 20px;
   color: #ffffff;
   font-family: "Material Icons";
   padding-bottom: 2px;
}

header > nav.internal > ul > li.drop:after {
   color:#4B4B4B;
}

header > nav > ul > li > a {
   position: relative;
   display: inline-block;
   vertical-align: middle;

   font-size: 12px;
   color:#FFFCFC;
   text-transform: uppercase;

   -o-transition:.5s;
	-ms-transition:.5s;
	-moz-transition:.5s;
	-webkit-transition:.5s;
}


header > nav > ul > li > ul {
   position: absolute;
   display: none;
   display: inline;
   

   -o-transition:.2s;
	-ms-transition:.2s;
	-moz-transition:.2s;
   -webkit-transition:.2s;
   
   opacity: 0;

   background-color: #000;
   padding: 20px;
   left: -5px;
   top: 20px;
   
}

header > nav > ul > li > ul.active {
   display: inline;
   top: 20px;
   left: -5px;
   opacity: 1;
}

header > nav > ul > li > ul > li  {
   position: relative;
   display: block;
   padding: 10px 0px;
}

header > nav > ul > li > ul > li > a {
   position: relative;
   display: block;

   font-size: 12px;
   color:#FFFCFC;
   text-transform: uppercase;
   white-space: nowrap;

   -o-transition:.5s;
	-ms-transition:.5s;
	-moz-transition:.5s;
   -webkit-transition:.5s;
   
}


header > nav.internal > ul > li.active > a,
header > nav.internal > ul > li > ul > li.active > a ,
header > nav > ul > li.active > a,
header > nav > ul > li > ul > li.active > a,

header > nav.internal > ul > li > a:hover,
header > nav.internal > ul > li > ul > li > a:hover ,
header > nav > ul > li > a:hover,
header > nav > ul > li > ul > li > a:hover {
   color: #EE4B4E;
}

header > nav.internal > ul > li > a,
header > nav.internal > ul > li > ul > li > a {
   color:#4B4B4B;
}


/*
section
*/

section {
   position: relative;
   display: block;
   width: 100%;
   background-color: #ffffff;
}

section > article {
   position: relative;
   display: block;
   background-color: #E2E2E2;
}

/* home */

section > article.home-video {
   position: relative;
   display: block;
   width: 100%;
   height:56vw;
   background-color: #050505;
}

section > article.home-video > iframe {
   position: relative;
   display: block;
   width: 100%;
   height: 100%;
}

section > article.home-map {
   position: relative;
   display: block;
   width: 100%;
   height:40vh;
   background-color: #E2E2E2;
   padding-top: 60px;
}

section > article.home-map > iframe {
   position: relative;
   display: block;
   width: 100%;
   height: 100%;
}


section > article.home-video > a.button {
   position: absolute;
   top: 75%;
   left: 12.5%;
}

section > article.home-contact:before,
section > article.home-about:before {
   position: absolute;
   content: '';
   z-index: 1;
   top: -9px;
   width: 100%;
   height: 9px;
   background-position: top;
   background-image: url(../../../files/img/frontend/bg-det-gray.png);
}

section > article.home-address {
   background-color: #FFFCFC;
}

section > article.home-contact,
section > article.home-about,
section > article.home-address 
{
   padding: 30px 0px 40px 0px;
}

section > article.home-address:before {
   position: absolute;
   content: '';
   z-index: 1;
   top: -9px;
   width: 100%;
   height: 9px;
   background-position: top;
   background-image: url(../../../files/img/frontend/bg-det-white.png);
}

/* work */

section > article.work {
   min-height: 90vh;
}

section > article.work > div {
   padding: 38px 0px 100px;
   max-width: -moz-calc(100vw - 640px);
   max-width: -webkit-calc(100vw - 640px);
   max-width: calc(100vw - 640px);
}

section > article.work > div > h2 {
   color: #747272;
}

section > article.work > div > figure,
section > article.work > div > ul {
   position: relative;
   display: table;
   width: auto;
   width: 100%;
   margin: 0 auto;
}

section > article.work > div > figure > img {
   position: relative;
   display: table;
   width: 100%;
}

section > article.work > div > figure > div.video-overlay {
   position: absolute;
   top: 0px;
   left: 0px;
   width: 100%;
   height: 100%;
   background-color:rgba(0,0,0,.6);
   cursor: pointer;
}

section > article.work > div > figure > div.video-overlay:after {
   position: absolute;
   top: 50%;
   left: 50%;

   top: -moz-calc(50%- 25px);
   top: -webkit-calc(50% - 25px);
   top: calc(50% - 25px);

   left: -moz-calc(50% - 30px);
   left: -webkit-calc(50% - 30px);
   left: calc(50% - 30px);

   width: 60px;
   height: 50px;
   border: solid 2px #ffffff;
   content: '>';
   font-size: 40px;
   color: #ffffff;
   line-height: 50px;
   text-align: center;
   font-family: 'p22_underground_cy_thin';
}

section > article.work > div > figure > div.video-overlay > iframe {
   position: relative;
   display: block;
   width: 100%;
   height: 100%;
   z-index: 2;
   background-color: #000;
}

section > article.work > div > ul > li  {
   position: relative;
   display: inline-block;
   width: 33%;
   padding: 10px;
}

section > article.work > div > ul > li:hover > a > figure {
   opacity: .5;
}

section > article.work > div > ul > li > a {
   position: relative;
   background-color: #000000;
   display: block
}

section > article.work > div > ul > li > a > figure {
   position: relative;
   display: table;
   width: 100%;

   -o-transition:.5s;
	-ms-transition:.5s;
	-moz-transition:.5s;
	-webkit-transition:.5s;
   transition:.5s; 
}

section > article.work > div > ul > li > a > figure > img {
   position: relative;
   display: table;
   width: 100%;
}

section > article.work > div.item > h3 {
   position: relative;
   text-align: left;
   color:#4B4B4B;
   font-size: 18px;
   padding: 20px 0px 30px;
}

section > article.work > div.item > h4 {
   position: relative;
   text-align: left;
   color:#4B4B4B;
   font-size: 18px;
   padding: 5px 0px ;
   font-family: 'p22_underground_cy_prothin';
}

section > article.work > div.item > h4 > b {
   font-size: inherit;
   color: inherit;
   font-family: 'p22_underground_cy_proregular';
}

/* 
contact 
*/

section > article.contact > div > div.form {
   position: relative;
   display: table;
   margin: 0 auto;
   width: 530px;
   padding: 10px 0px;
}

section > article.contact > div > div.form > form > fieldset {
   position: relative;
   display: table;
   width: 100%;
   border-bottom: solid 1px #747272;
   padding: 15px 0px 10px;
}

section > article.contact > div > div.form > form > fieldset > label {
   position: relative;
   display: inline-block;
   vertical-align: top;
   font-size: 18px;
   color: #EE4B4E;
   text-transform: none;
   width: 25%;
}

section > article.contact > div > div.form > form > fieldset > input,
section > article.contact > div > div.form > form > fieldset > textarea {
   position: relative;
   display: inline-block;
   vertical-align: top;
   font-size: 18px;
   color: #747272;
   background-color: transparent;
   border: none;
   width: auto;
   width: 74%;
   padding: 0px;
   height: auto;
}

h2.address > p:before {
   position: relative;
   display: inline-block;
   vertical-align: top;
   color: #EE4B4E;
   font-size: 34px;
   content: '';
   font-family: 'Material Icons';
   margin-top: -5px;
   margin: -5px 5px 0px 0px;
}

.form-error {
  
  color:#EE4B4E!important;
  /*
  border-left:solid 4px #EE4B4E!important;
  padding-left: 10px!important;
  border-radius: none!important;
  */
  
}

.form-message {
   position: relative;
   display: table;
   margin: 0 auto;
   text-align: center;
   padding: 20px 0px;
   font-size: 16px;
   color: #EE4B4E;
   text-transform: uppercase;
}

/*
about
*/

section > article.about > div {
   padding: 38px 0px 100px;
}

section > article.about > div > h2 {
   color:#747272;
}

section > article.about > div > ul.team {
   position: relative;
   display: table;
   width: 100%;
}

section > article.about > div > ul.team > li {
   position: relative;
   display: inline-block;
   width: 50%;
   vertical-align: top;
}

section > article.about > div > ul.team > li > figure {
   position: relative;
   width: 100%;
   display: block;
}

section > article.about > div > ul.team > li > figure > img {
   position: relative;
   width: 100%;
   display: block;
}

section > article.about > div > ul.team > li > figcaption {
   position: relative;
   display: table;
   font-family: 'p22_underground_cy_proregular';
   line-height: 120%;
   font-size: 18px;
   color: #EE4B4E;
   text-transform: uppercase;
   padding: 30px 0px;
}

section > article.about > div > ul.team > li > span {
   padding-right: 40px;
   position: relative;
display: table;
}

/*
footer
*/

footer {
   position: relative;
   display: block;
   width: 100%;
   text-align: center;
   background-color:#FFFCFC;
   background-position: center center;
   background-repeat: no-repeat;
}

footer > div {
   position: relative;
   display: table;
   text-align:center;
   width: 100%;
}

footer > div > h2 {
   font-size: 16px;
   width: auto;
   display: inline-block;
}

/*
social menu
*/

ul.social {
   display: table;
   position: absolute;
   right: 10px;
   top: 20px;
}

ul.social > li {
	position: relative;
   display: inline-block;
   vertical-align: middle;
   padding: 5px;
   text-align: center;
}

ul.social > li > a {
	font-size: 20px;
	color: #EE4B4E;
	vertical-align: middle;
	font-weight: normal;
}

ul.social > li > a:before {
	position: relative;
	display: inline-block;
	/*width: 40px;
	height: 40px;*/
	/*border:solid 1px #ffffff;*/
	content: '';
	vertical-align: middle;
	/*margin-right: 5px;
	line-height: 40px;*/
   font-family: "Socicon";
   background-position: center;
   background-size: auto;

   -o-transition:.5s;
	-ms-transition:.5s;
	-moz-transition:.5s;
	-webkit-transition:.5s;
   transition:.5s;

   /*
   -webkit-box-shadow: 2px 2px 7px -1px rgba(0,0,0,0.75);
   -moz-box-shadow: 2px 2px 7px -1px rgba(0,0,0,0.75);
   box-shadow: 2px 2px 7px -1px rgba(0,0,0,0.75);
   background-color: rgba(0,0,0,.1);
   */

}

ul.social > li > a:hover:before {
   color: #4B4B4B;
}

ul.social > li > a.facebook:before {
   content:'';
}

ul.social > li > a.youtube:before {
   content:'';
}

ul.social > li > a.instagram:before {
   content:'';
}

ul.social > li > a.twitter:before {
   content:'';
}

ul.social > li > a.vimeo:before {
   content:'';
}

/*
preload
*/

.loader {
   background-color: #000000;
   height:100vh;
}

.loader:not(.loader-hide) {
   opacity: .9;
}

.loader .loader-container .icon {
   width: 90px;
   height: 90px;
}

.loader .loader-container .icon::after {
   color:#ffffff;
   content: '';
   font-size: 30px;
}

.loader .loader-container .message {
   color:#ffffff;
   font-size: 14px;
}

.preload-mask {
   position: absolute;
   top: 0px;
   left: 0px;
   width: 100%;
   height: 100%;
   background-size: auto;
   background-position: center;
   background-repeat: no-repeat;
   background-image:url(../../../files/img/frontend/preload.gif)!important;
   z-index: 1;
}

.preload {
   background-position: center!important;
   background-size: auto!important;
   background-repeat: no-repeat!important;
   background-image:url(../../../files/img/frontend/preload.gif)!important;
}

.preload-img {
   background-position: center!important;
   background-size: auto!important;
   background-repeat: no-repeat!important;
   background-image:url(../../../files/img/frontend/preload.gif)!important;
}

/*
--------------------------------------------------------------------------------------
DESKTOP ONLY
--------------------------------------------------------------------------------------
*/

@media only screen and (min-width: 1084px) and (max-width: 10000px) { 

   .mobile {
      display: none!important;
   }

   header > nav > ul > li > ul.active-force {
      display: inline;
      top: 20px;
      left: -5px;
      opacity: 1;
   }

}

/*
--------------------------------------------------------------------------------------
TABLET SMALL SCREEN
--------------------------------------------------------------------------------------
*/

@media only screen and (min-width: 760px) and (max-width: 1084px) { 


}


/*
--------------------------------------------------------------------------------------
SMARTPHONE
--------------------------------------------------------------------------------------
*/

@media only screen and (min-width: 200px) and (max-width: 1084px) { 

   .desktop {
      display: none!important;
   }

   .center-spacer {
      width:100%;
      padding: 10px;
   }

   header > nav > ul > li {
      padding: 0px 10px;
   }

   header > nav > ul > li > ul {
      top: -300px;
   }

   .work-spacer.item,
   .work-spacer {
      width:100%;
      max-width: initial!important;
      padding:38px 10px 100px;
   }

   section > article.work > div > ul > li {
      width: 100%;
   }

  /* section > article {
      padding: 0px 10px;
   }
   */

   section > article.home-video {
      margin-top: 40px;
      padding-bottom: 80px;
   }

   section > article.contact > div > div.form {
      width: 300px;
  }

  section > article.home-video > a.button {
     top: 70%;
  }

  section > article.contact > div > div.form > form > fieldset > input, 
  section > article.contact > div > div.form > form > fieldset > textarea {
      margin: 0px!important;
      font-size: 13px!important;
  }

  section > article.contact > div > div.form > form > fieldset > label {
   font-size: 13px!important;
  }

  section > article.about > div {
     padding: 48px 10px 100px;
  }

  section > article.about > div > ul.team > li {
     display: table;
     width: 100%;
  }

  section > article.about > div > ul.team > li > figcaption {
     padding: 20px 0px;
  }

  footer > div {
     text-align: left;
     padding-left: 10px;
  }

  footer > div > h2 {
     margin: 0px;
  }

}

@supports (-ms-ime-align:auto)  {  

   /* Put your IE-only styles here. Works for IS 10 & IE 11*/
   /* supoort changed to Egde */


   ul.social > li > a.facebook:before {
      background-color: transparent!important;
      background-image: url(../../../files/img/frontend/ico-facebook.svg);
   }

   ul.social > li > a.youtube:before {
      background-color: transparent!important;
      background-image: url(../../../files/img/frontend/ico-youtube.svg);
   }

   ul.social > li > a.instagram:before {
      background-color: transparent!important;
      background-image: url(../../../files/img/frontend/ico-instagram.svg);
   }

   ul.social > li > a.twitter:before {
      background-color: transparent!important;
      background-image: url(../../../files/img/frontend/ico-twitter.svg);
   }

   ul.social > li:hover > a:before {
      background-color: transparent!important;
   }

  

}