@import url('https://fonts.googleapis.com/css?family=Signika:300,400,600,700');
/* ==========================================================================
  Stili del Progetto
   ========================================================================== */

html {height: 100%;}
body {
    height: 100%;
    font-family:  'Signika', sans-serif;
    font-weight: 300;
    color: #fff;
    line-height: 1.5em;
    font-size: 16px;
    margin: 0;
    padding: 0;
    background: #0c0e13;
    overflow-x: hidden;
}

img {border: 0;}
iframe {border: 0;}

/* sistema form */
form {margin: 0;}
fieldset {border: 0; margin: 0; padding: 0;}

.nocompiled {border: 1px solid #f00 !important;}
.nocompiled2 {padding: 0 17px 0 0; color: #f00;}

a {color: #000; text-decoration: underline; outline: none !important;}
a:hover {color: #ee2f2e; text-decoration: none;}

p {margin: 0 0 1em 0;}

strong, b {font-weight: 600;}
sup {font-size: 60%; top: -0.7em}

h1,h2,h3,h4,h5,h6 {color: #fff; font-weight: 600; margin: 0 0 1em 0; line-height: 1em; padding:0; clear: both;}
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {text-decoration: none;}

h1{ font-size: 2.8em;}
h2{ font-size: 2.4em;}
h3{ font-size: 2em;}
h4{ font-size: 1.8em;}
h5{ font-size: 1.2em;}
h6{ font-size: 1.2em;}

ol {margin:0; padding: 0; line-height:normal;}
ul {margin:0; padding: 0; line-height:normal;}
li {margin:0; padding: 0; line-height:normal;}

dl, dt, dd {margin:0; padding: 0;}

.noborder {border: 0px solid #FFF !important;}
.marginclear {margin-right: 0px !important;}
.marginclear-bottom {margin-bottom: 0px !important;}
.paddingclear {padding-right: 0px !important;}
.bgclear {background: none !important;}
.clear {clear: both !important;}

.alignDx {text-align: right !important;}
.alignCenter {text-align: center !important;}
.alignJustify {text-align: justify !important;}
.posrelative {position: relative}
/*
.floatSx {float: left; }
.floatDx {float: right; }
*/
.title-hide {text-indent: -9999px; font-size: 0; height: 0; margin: 0;}
td.nowrap {text-align: right; white-space: nowrap;}

nav ul {list-style: none;}

header *, .content.home *, .hero-banner-prod *, .content.prod *, .content.page *, footer * {
-webkit-transition: all 400ms ease-out;
-moz-transition: all 400ms ease-out;
-o-transition: all 400ms ease-out;
-ms-transition: all 400ms ease-out;
transition: all 400ms ease-out;
}
.ani {
    -webkit-transition: all 500ms linear;
    -moz-transition: all 500ms linear;
    -o-transition: all 500ms linear;
    -ms-transition: all 500ms linear;
    transition: all 500ms linear;
 }
.ani2 {
    -webkit-transition: all 700ms linear;
    -moz-transition: all 700ms linear;
    -o-transition: all 700ms linear;
    -ms-transition: all 700ms linear;
    transition: all 700ms linear;
 }

/* ==========================================================================
  HEADER
   ========================================================================== */

header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 50;
    min-height: 70px;
    width: 100%;
    background: #000;
}

.head {padding: 15px 0; font-weight: 400; font-size: 1.2em;}
.head span {font-size: 0.8em; color: #ee2f2e}


@media (min-width: 992px) {
    .menu.collapse {
        display: block!important;
        height: auto!important;
        overflow: visible!important;
        visibility: visible!important;
    }
}

/* ==========================================================================
    GENERICI
   ========================================================================== */
#superWrapper {height: 100%;background: #0c0e13}
.scrollContainer {overflow-y: scroll; overflow-x: hidden; width: 100%; background: #fff}

/*Widget*/
.wdg {position: fixed; height: 50px; z-index: 100;}
.wdg-email {width: 150px; top: 150px; right: -80px; clip: rect(0px,50px,50px,0px); background: url(../images/ico-widget-email.png) no-repeat 15px 50% #222;}
.wdg-email a {display: block; padding: 13px 0 13px 50px; text-transform: uppercase; font-size: 0.7em; color: #fff;}
.wdg-email:hover {right: 20px; clip: rect(0px,150px,50px,0);}

.wdg-share {width: 240px; padding: 13px 0 0 50px; top: 201px; right: -170px; clip: rect(0px,50px,50px,0px); background: url(../images/ico-widget-share.png) no-repeat 15px 50% #222;}
.wdg-share:hover {right: 20px; clip: rect(0px,240px,50px,0);}
.wdg-share span {text-transform: uppercase; font-size: 0.7em;}
.wdg-share .addthis_inline_share_toolbox {position: absolute; top: 10px; right: 15px;}

/*scroll*/
.scroll-sign {opacity: 0; position: fixed; height: 70px; width: 50px; left: 50%; margin-left: -35px; bottom: 0; z-index: 10;}
.scroll-sign .txt {font-size: 0.7em; text-align: center; }
.scroll-sign .vertical-line {position: relative; margin: 0 auto; overflow: hidden; height: 50px; width: 1px; background: #fff;}
.scroll-sign .vertical-line .inner {position: absolute; top: 10px; height: 50px; width: 1px; background: #ee2f2e;}

/**/
.section {background: #0c0e13; font-size: 1.7em; line-height: 1.3em;}
.section.end {height: 30px;}
.section small{font-size: 0.7em;}
.section h3{font-size: 1.6em; margin:0;}
.padding-resp{padding-top: 80px;}


/*section 1*/
#section1 {/*display: flex; flex-flow: center; align-items: center;*/ padding: 130px 0 100px 0; position: relative; font-size: 1.5em}
#section1 .wrap-section1 {width: 100%;}
#section1 h2, #section1 h5 {margin: 0;}
#section1 h2 {font-size: 2em;}
#section1 h5 {font-size: 1.4em; font-weight: 300;}
#section1 .s1_0, #section1 .s1_1, #section1 .s1_2, #section1 .s1_3, #section1 .s1_4, #section1 .s1_5, #section1 .s1_6, #section1 .s1_7 {padding: 15px 0; opacity: 0; position: relative;}
#section1 .s1_0 {padding-bottom: 20px;}
#section1 .s1_0 img {width: 45%}
#section1 .s1_0 div {position: relative; line-height: 1; margin-top: 15px; padding-top: 15px; border-top: 1px solid #333; font-size: 0.95em;}
#section1 .s1_1 h6 {margin: 0}
#section1 .s1_4 {top: 100px}
#section1 .s1_5 {top: 100px; padding-bottom:0; padding-top: 30px}
#section1 .s1_6 {padding-bottom: 25px; top: 100px}
#section1 .s1_2, #section1 .s1_3 {text-align:center}
#section1 .s1_2 img, #section1 .s1_3 img{max-width: 100%}

/*section 2*/
#section2 {padding: 0 0 100px 0; position: relative}
#section2 .wrap-section2 {width: 100%;}
#section2 .s2_1, /*#section2 .s2_2, #section2 .s2_3, #section2 .s2_4, #section2 .s2_5, #section2 .s2_6, #section2 .s2_7, #section2*/ .radial-bg {opacity: 0;}
#section2 .s2_1 {padding-bottom: 150px;}
#section2 .s2_2 {padding-top: 50px;}
#section2 .s2_3 {padding-bottom: 25px;}
#section2 .s2_5 {padding-bottom: 5px;}
#section2 .s2_r1 {opacity: 0; left: 500px; position: relative;}
#section2 .s2_r2 {opacity: 0; right: 500px; position: relative;}
#section2 .s2_r3 {opacity: 0; left: 500px; position: relative;}
#section2 .radial-bg{position: absolute; left: 50%; margin-left: -150px; top: 100px; width: 300px; height: 300px; background: radial-gradient(circle, rgba(255,255,255,0.5), rgba(255,255,255,0) 70%);}

/*section 3*/
#section3 {padding: 100px 0; position: relative}
#section3 .s3_1, #section3 .s3_2, #section3 .s3_3, #section3 .s3_4, #section3 .s3_5 {opacity: 0; position: relative;}
#section3 .webscreen {position: absolute; top: 40px; left: 50%; margin-left: -243px;}
#section3 .s3_1 {padding-bottom: 100px;}
#section3 .s3_2{position: relative; right: 500px}
#section3 .s3_2 img{max-width: 100%}
#section3 .s3_3, #section3 .s3_4{position: absolute; bottom: -50px}
#section3 .s3_3{left: 0}
#section3 .s3_4{right: 0}
#section3 .s3_5{position:relative;}
#section3 .s3_5 a{color: #fff; text-decoration: none;}

/*section 4*/
#section4 {padding: 100px 0; position: relative}
#section4 .s4_1, #section4 .s4_2 {opacity: 0; position: relative;}
#section4 .s4_1 {padding-bottom: 100px;}
#section4 .s4_2{position: relative; top: 200px; height: 560px; margin:0 auto; padding-top: 22px; background:url(../../resources/ani-device-desktop-b.png) center top no-repeat}
#section4 .s4_2 iframe{width: 606px!important;}

/*section 5*/
#section5 {padding: 100px 0; position: relative}
#section5 .wrap-corp {position: relative; min-height: 470px}
#section5 .s5_1, #section5 .s5_2, #section5 .s5_3, #section5 .s5_4, #section5 .s5_5 {opacity: 0; position: relative;}
#section5 .s5_1 {padding-bottom: 100px;}
#section5 .s5_2, #section5 .s5_3, #section5 .s5_4, #section5 .s5_5 {position: absolute;}
#section5 .s5_2 {left: 300px; top: 0px}
#section5 .s5_3 {left: 300px; top: 200px; z-index: 10; box-shadow: 0 0 15px rgba(0,0,0,0.5)}
#section5 .s5_4 {left: 0; top: -30px; z-index: 8; box-shadow: 0 0 15px rgba(0,0,0,0.5)}
#section5 .s5_5 {left: 500px; top: -150px; z-index: 6px; box-shadow: 0 0 15px rgba(0,0,0,0.5)}

/*section 6*/
#section6 {padding: 100px 0; position: relative}
#section6 .s6_1, #section6 .cars {opacity: 1; position: relative;}
#section6 .s6_2, #section6 .s6_3, #section6 .s6_4 {float:left; width: 33%; position: relative;}
#section6 .s6_1 {padding-bottom: 150px;}
#section6 .s6_2 img, #section6 .s6_3 img, #section6 .s6_4 img {max-width: 100%;}
#section6 .cars {float: left; width: 100%; overflow: hidden; border-bottom: 1px solid #333;}

/*section 7*/
#section7 {padding: 100px 0; position: relative}
#section7 .s7_1, #section7 .s7_2, #section7 .s7_3, #section7 .s7_4, #section7 .s7_5, #section7 .s7_6 {opacity: 0; position: relative;}
#section7 .s7_1 {padding-bottom: 50px;}
#section7 .s7_1 img {max-width: 60%;}
#section7 .s7_2, #section7 .s7_3, #section7 .s7_4, #section7 .s7_5, #section7 .s7_6 {top: -100px;}
#section7 .s7_2 img, #section7 .s7_3 img, #section7 .s7_4 img, #section7 .s7_5 img, #section7 .s7_6 img{max-width: 70%;}
#section7 .s7_1, #section7 .s7_2, #section7 .s7_3, #section7 .s7_4, #section7 .s7_5, #section7 .s7_6 {text-align: center;}

/*section 8*/
#section8 {padding: 100px 0; position: relative}
#section8 .wrap-edit-desk{position: relative; height: 600px;}
#section8 .s8_1 {opacity: 0;}
#section8 .s8_2, #section8 .s8_2b {opacity: 0; position: absolute;}
#section8 .s8_2 {width: 25%; left: 11%; top: 100px; z-index: 10; pointer-events: none;}
#section8 .s8_2b {width: 50%; left: 31%; top: 100px;}
#section8 .s8_2 img, #section8 .s8_2b img {max-width: 100%; max-height: 100%}

/*section 9*/
#section9 {padding: 100px 0; position: relative}
#section9 .wrap-edit-desk{position: relative; height: 650px;}
#section9 .s9_1 {opacity: 0;}
#section9 .s9_2, #section9 .s9_2b {opacity: 0; position: absolute;}
#section9 .s9_2 {width: 50%; left: 11%; top: 100px; pointer-events: none;}
#section9 .s9_2b {width: 38%; left: 47%; top: 130px; z-index: 10;}
#section9 .s9_2 img, #section9 .s9_2b img {max-width: 100%; max-height: 100%}

/*section 10*/
#section10 {padding: 100px 0; position: relative}
#section10 .wrap-edit-desk{position: relative; height: 600px;}
#section10 .s10_1 {opacity: 0;}
#section10 .s10_2, #section10 .s10_2b {opacity: 0; position: absolute;}
#section10 .s10_2 {width: 28%; left: 14%; top: 100px; pointer-events: none;z-index: 10;}
#section10 .s10_2b {width: 45%; left: 37%; top: 130px; }
#section10 .s10_2 img, #section10 .s10_2b img {max-width: 100%; max-height: 100%}

/*section 11*/
#section11 {padding: 100px 0; position: relative}
#section11 .wrap-edit-desk{position: relative; height: 530px; overflow: hidden; clear: both;}
#section11 .s11_1 {opacity: 0; padding-bottom: 50px;}
#section11 .s11_2, #section11 .s11_3, #section11 .s11_4 {position: absolute; width: 100%; text-align: center;}
#section11 .s11_2 {opacity: 0; top: 0;}
#section11 .s11_3 {top: 530px; z-index:10;}
#section11 .s11_4 {top: 1060px; z-index:11}

/*section 12*/
#section12 {padding: 100px 0; position: relative}
#section12 .www-site, #section12 .s12_1, #section12 .s12_2, #section12 .s12_3, #section12 .s12_4 {opacity: 1; }
#section12 .s12_1 {padding-bottom: 25px; font-size: 1.4em}
#section12 .s12_2 {padding-bottom: 35px; font-size: 1.8em; line-height: 1.2;}
#section12 .www-site {padding-bottom: 30px; margin-top: 50px; position: relative; border-bottom: 1px solid #fff;}
#section12 .www-site span {display: block; position: absolute; padding: 10px 30px; left: 50%; transform: translate(-50%, -40px); background: #0c0e13;}
#section12 .www-site span img{width: 200px; height: auto;}
#section12 .s12_3, #section12 .s12_4 {padding-top: 30px; font-size: 0.7em; line-height:1.5}
#section12 .s12_3 a, #section12 .s12_4 a {color: #fff}
#section12 .s12_3 img, #section12 .s12_4 img {max-width: 100%}
#section12 .s12_3 p:last-child {margin-left: 30px}
#section12 .s12_3 img, #section12 .s12_4 img {max-width: 100%}
       
                                                                            
@media (max-width: 991px){
.section {font-size: 1.4em;}
#section1 .s1_3 img{max-width: 80%}
#section3 .s3_5{padding-top:80px;}
#section3 .s3_5 a{font-size: 1.2em;}
#section5 .s5_4 {left: 180px;}
#section5 .s5_5 {left: 350px;}
#section5 .s5_5:hover {z-index: 20;}
#section6 .s6_1 {padding-bottom: 50px}
#section7 .s7_3, #section7 .s7_4, #section7 .s7_5, #section7 .s7_6 {display: none;}
#section12 .s12_3 {padding-top: 100px;}
#section12 .s12_3, #section12 .s12_4 {text-align: center;}
#section12 .www-site span {padding: 20px 20px; transform: translate(-40%, -50px); margin-bottom: 50px;}
}
@media (max-width: 767px){
.section {font-size: 1.1em;}
#section1 .s1_0 img {width: 80%}
#section2 .s2_3, #section2 .s2_5, #section2 .s2_7 {padding-left: 5%; padding-right: 5%; text-align: center;}
#section2 .s2_3 img, #section2 .s2_5 img, #section2 .s2_7 img {max-width: 100%}
#section4 .s4_2 {height: auto; background: none }
#section4 .s4_2 iframe, #section4 .s4_2 img{width: 100%!important; }
#section5 .s5_2 {z-index: 10; box-shadow: 0 0 15px rgba(0,0,0,0.5)}
#section5 .s5_4 {right: 0px; left: auto;}
#section5 .s5_5 {display: none;}
}

/*animation*/
/*
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.ani-1-5s {
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.ani-2s {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
@keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

@-webkit-keyframes bounceInUp {
  0% {opacity: 0; -webkit-transform: translateY(500px); transform: translateY(500px);}
  100% {opacity: 1; -webkit-transform: translateY(0); transform: translateY(0);}
}
@keyframes bounceInUp {
  0% {opacity: 0; -webkit-transform: translateY(500px); -ms-transform: translateY(500px); transform: translateY(500px);}
  100% {opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0);}
}
.bounceInUp {
  -webkit-animation-name: bounceInUp;
  animation-name: bounceInUp;
}


.delay-05s {animation-delay: 0.5s; -webkit-animation-delay: 0.5s;}
.delay-1s {animation-delay: 1s; -webkit-animation-delay: 1s;}
.delay-1-5s {animation-delay: 1.5s; -webkit-animation-delay: 1.5s;}
.delay-2s {animation-delay: 2s; -webkit-animation-delay: 2s;}
.delay-2-5s {animation-delay: 2.5s; -webkit-animation-delay: 2.5s;}
.delay-3s {animation-delay: 3s; -webkit-animation-delay: 3s;}
.delay-3-5s {animation-delay: 3.5s; -webkit-animation-delay: 3.5s;}
.delay-4s {animation-delay: 4s; -webkit-animation-delay: 4s;}
.delay-4-5s {animation-delay: 4.5s; -webkit-animation-delay: 4.5s;}
.delay-5s {animation-delay: 5s; -webkit-animation-delay: 5s;}
.delay-5-5s {animation-delay: 5.5s; -webkit-animation-delay: 5.5s;}
.delay-6s {animation-delay: 6s; -webkit-animation-delay: 6s;}
.delay-6-5s {animation-delay: 6.5s; -webkit-animation-delay: 6.5s;}
.delay-7s {animation-delay: 7s; -webkit-animation-delay: 7s;}
.delay-7-5s {animation-delay: 7.5s; -webkit-animation-delay: 7.5s;}
.delay-8s {animation-delay: 8s; -webkit-animation-delay: 8s;}
.delay-8-5s {animation-delay: 8.5s; -webkit-animation-delay: 8.5s;}
.delay-9s {animation-delay: 9s; -webkit-animation-delay: 9s;}
.delay-9-5s {animation-delay: 9.5s; -webkit-animation-delay: 9.5s;}
.delay-10s {animation-delay: 10s; -webkit-animation-delay: 10s;}

/* ==========================================================================
    FOOTER
   ========================================================================== */
#geo {width: 100%; height: 100%; z-index: 10;}
#googlemap {width: 100% !important;}

footer {
    clear: both;
    position: relative;
    width: 100%;
    font-size: 0.65em;
    line-height: 1.3em;
    color: #fff;
    background: #565656;
    z-index: 15;
}
footer .top{padding: 80px 0;}
footer .top .inner{width: 45%; margin-left: 55%}
footer .col-1-3{display: inline-block; vertical-align: middle;  padding-right: 12%; }
footer .col-1-3:last-child{padding-right:0; }
footer .block {display: block; padding: 5px 10px; border: 1px solid #fff;}
footer ul {list-style: none;}
footer a {text-decoration: none; color: #fff; }
footer a:hover {color: #00baff; }

@media (max-width: 1199px) { 
footer .col-1-3{width: 30%; padding:0 2%;}
}
@media (max-width: 991px) { 
footer {position: static;}
footer .top{padding: 50px 0;}
footer .top .inner{width: 100%; margin: 100px 0 0 0;}
footer .col-1-3{width: 33%; padding:0 2%; text-align: center; margin-bottom: 30px;}
}
@media (max-width: 767px) { 
footer .col-1-3{width: 100%; padding:0 2%; }
footer .top .inner{margin: 60px 0 0 0;}
}

.modal-content {border-radius: 0; color: #000;}
.modal-content .form-control {border-radius: 0;}
#msgReg, #msgReg2, #msgRegM {
    display: none;
    padding: 10px;
    margin-top: 20px;
    text-align: center;
    font-style: italic;
    border-top: 2px solid #fff;
    font-size: 0.8em;
}