/*---------------------------------------------*\
MOBILE VERSION           

giallo, yellow: #ffbc3e

\*---------------------------------------------*/


h1,h2,h3,h4,h5,h6 { font-family: 'Montserrat', sans-serif; line-height:1em; color:#444; padding:0;  margin-bottom:10px; text-align:left; font-weight:bold; letter-spacing:.1em; text-transform:uppercase; }

h1 {font-size:36px; }
h2 {font-size:30px; }
h3 {font-size:26px; }
h4 {font-size:22px; }
h5 {font-size:18px; }
h6 {font-size:14px; }

/*---------------------------------------------*\
                   GENERAL
\*---------------------------------------------*/
#header{height: 70px;background: rgba(255,255,255,0.8); transition: all 1s ease 0s;}
#header.opaque-mobile{background: rgba(255,255,255,1); transition: all 1s ease 0s;}
#header-content{height: 70px;}
#header .h1{margin-top: 5px;}

#header #logo{top: 7px;}

#header .h1 img {width:150px;padding: 0 16.5px;}
#sidebar-trigger {top:23px;display: initial;}
#sidebar-trigger.menu-open .e1{background-color: white;transition: all 1s ease 0s;}
#sidebar-trigger.menu-open .e3{background-color: white;transition: all 1s ease 0s;}

#sidebar {min-height:0; overflow:auto;display: initial;}
#sidebar #menu ul li.active > a:after{background: white;}
#sidebar ul li a{color: white;}

#language-selector {right:5px;}
#header.opaque {height:60px;}

.displayer {background-size:cover;}
.displayer h1 {max-width:95%; margin:0 10px; }
.displayer h2 {max-width:95%; font-size:14px; line-height:1.3em;}

#no-slider {height:60px;}

#menu {top:60px; width:95%;}
#menu ul li a {padding:10px 25px;}
#menu-legals {margin-top:0; padding-top:20px;}
#menu.no-hamburger{display: none;}
#menu ul li.active > a:after{background: black;height: 3px;}

#header-contact{display: none;}

.triangle {display:none;}

/*---------------------------------------------*\
                   FOOTER
\*---------------------------------------------*/
#footer .foot {width:100%; border-top:0; min-height:1px}
#footer h3 {font-size:30px; }

#footer .col-footer-lateral{width: 100%;padding-bottom: 10px;text-align: center;}
#footer .footer-container-left{padding: 0 20%;text-align: center;}
#footer .col-footer-central{width: 100%;padding: 0 50px 0 50px;text-align: center;}
#footer .col-footer-central:before{content: "";display: inline-block;background: #DADADA;position: relative;top: -15px;left: 0;width: 100%;height: 1px;transition: all 0.55s ease 0s;}
#footer .col-footer-central:after{content: "";display: inline-block;background: #DADADA;position: relative;bottom: 0;left: 0;width: 100%;height: 1px;transition: all 0.55s ease 0s;}
#footer .col-footer-central .title{padding-left: 0;padding-bottom: 10px;}
#footer .col-footer-lateral--left{padding-top: 10px;}
#footer .col-footer-central .inner-col{padding-left: 0;}


#credits {margin-bottom:20px; height:auto;}
#mattec-logo {position:static; top:0; left:0; float:none; margin:0 auto; width:100%; margin:0 auto;  margin-bottom:30px}
#credits-cms {position:static; left:0; right:auto; text-align: center; float:none; padding-bottom:40px; width:100%; margin:0 auto; }
#piva {position:static; left:0; right:0; text-align: center; float:none; width:100%; margin:0 auto;}
#credits-cms * {text-align: center; }
#piva * {text-align: center; }

@media screen and (max-width: 650px){
#footer .col-footer-central .inner-col{width: 100%;}
#footer .footer-container-left{padding: 0 10%;}
}
@media screen and (max-width: 380px){
#footer .col-footer-lateral--left{padding: 20px;}
}

/*---------------------------------------------*\
                   HOME
\*---------------------------------------------*/
.section .box {padding:30px 0; width:95%; margin:0 auto;}
.section .box .image {width:100%; float:none; }
.section .box .content {width:100%; float:none; margin-left:0; margin-right:0; margin-top:30px; }
.section.section-one .box.box-1 .content{margin-top: 30px;}
.section .box-half .image .title {margin-left:0;}
.section .box-1 .title{margin-bottom: 60px;}
.section .box .image .title {margin-left:0;}
.section .box-presentation .text p{width: 90%;}

.section .box-2 .content .text {width:100%;}
.section .box-2 .image .title {margin-left:0;}
.section.section-2 {padding-bottom:0;}
.section.section-two{margin-top: 50px;}

.section .box.row-2 .title{margin-left: 0;margin-top: 50px;}
.section .box.row-2 .image{margin-left: 0;}
.section .box.little-box{margin-left: 0;}
.red-box{margin-top: 15px;}

.section .box-3 .title{margin-bottom: 60px;}
.section .box-3 .image{margin-top: 0;}

.section-content.background{top: 0;}

.section-half .section-content {width:95%;}
.section .box-half {width:100%;}

.section .box-4 {top:0;}
.section .box-3 {top:0;}

.section .box.box-1.box-4 .content{margin-top: 0;}

.red-box{width: 100%;}
.red-box .container{padding: 50px 30px;}

@media screen and (max-width: 450px){
.section .box.box-presentation .text:before{top: -4px;}
.section .box.box-presentation .text:after{bottom: -4px;}
.section .box .content{margin-top: 10px;}
}

/*---------------------------------------------*\
                   AZIENDA
\*---------------------------------------------*/
.longbox .content .half {width:100%; margin:0; float:none; }

.section.azienda-filosofia{margin-top: 10px;}

.azienda-filosofia .box {float:none;}
.azienda-filosofia .box .image {top:0;}
.azienda-filosofia .box .image img {margin-bottom:0;}

.section.azienda-filosofia .box .content{margin-top: 50px;width: 100%;}

.azienda-approccio .section-content {margin-bottom:130px;}
.azienda-approccio .box.azienda-approccio-highlight {top:0; right:0; width:100%; padding:30px; float:none !important; overflow:hidden; position:static;}
.azienda-approccio .box.azienda-approccio-highlight * {font-size:20px;}

.azienda-storia.section-half .box-half {width:95% !important}

.section.azienda-filosofia .box.row-2 .text{float: none; margin-left: 0;width: 100%;}
.section.azienda-filosofia .box.row-2 .image{width: 100%;max-width: 100%; margin: 0 auto; margin-top: 2%;text-align: center;}
.section.azienda-filosofia .box.row-2 .image img{display: inline-block; padding: 0 25px;}
.section.azienda-filosofia .box.row-3{margin-top: 15%;}
.section.azienda-filosofia .box.row-3 .image{width: 100%; margin-top: -100px;margin-left: 0;top: 0;margin-bottom: 5%;}
.section.azienda-filosofia .box.row-3 .image img{margin: 0 auto;}
.section.azienda-filosofia .box.row-3 .text{float: none; margin-bottom: 30%; margin-right: 0; width: 100%;}
.box-left.azienda .title{margin-left: 2%;}
.section .azienda.highlight{margin-left: 0;margin: 0 auto; width: 100%; padding: 0 15px;}
.highlight.azienda .red-box .container{padding: 60px 30px;}
.highlight.azienda .content .text{margin-right: 0;}

@media screen and (max-width: 600px){
    .section .azienda.highlight .red-box{margin-bottom: 20%;}
    .section.azienda-filosofia .box.row-3 .text{margin-bottom: 50%;}
}
@media screen and (max-width: 450px){
.longbox .content{padding: 20px 0;}
.longbox .content p{margin-bottom: 0;}
.section.azienda-filosofia .box .content{margin-top: 30px;}
.azienda-filosofia .title{margin-bottom: 60px;}
.box-left .title{margin-bottom: 35px;}
.section.azienda-filosofia .box.row-2 .image{margin-top: 4%;}
.section.azienda-filosofia .box.row-3{margin-top: 17%;}
}
@media screen and (max-width: 380px){
    .box-left.azienda .title{margin-top: 70px;}
}

/*---------------------------------------------*\
                   PROCESSO
\*---------------------------------------------*/
.longbox .content{margin: 0 5%;}
.processo .longbox .content{margin-bottom: 0;}
.section-content.background.processo{top: 20px;}
.section-content.background-toppa.processo.section-2{bottom: -31%;}
#processo .image{width: 100%;margin-left: 0;margin-top: 0;}
#processo .content{margin-left: 0;margin-top: 5%;}
#processo .row-2 .content{margin-top: 50px;text-align: left;}
#processo .row-2 .content .title{padding-left: 0;margin-bottom: 50px;}
#processo .row-2 .content h4{text-align: left;}
#processo .row-2 .box-right .image{width: 100%;margin-left: 0;}
#processo .box-right .content{margin-left: 0;}
#processo .row-2 .content .text:before{right: initial;}
#processo .red-box{left: 5%; width: 90%;margin-top: 100px;}
#processo .red-box p{text-align: center; padding: 60px 25px;}
#processo .section-2 .box-1 .image{width: 100%; float: none;margin-left: 0;text-align: center;}
#processo .section-2 .box-1 .image .pic{width: auto;padding: 0 25px;display: inline-block;}
#processo .section-2 .box-1 .image .pic img{width: 100%;}
#processo .row-3 .image{width: 100%;margin-left: 0;}
#processo .row-3 .content .title{margin-bottom: 50px;}
#processo .section-2 .row-4 .content .title{margin-bottom: 50px;margin-top: 50px;}
#processo .section-2 .row-4 .content{margin-top: 5%;text-align: left;}
#processo .section-2 .row-4 .content h4{text-align: left;}
#processo .section-2 .row-4 .content .text:before{right: initial;}
#processo .section-2 .row-4 .content .text:after{right: initial;}
#processo .section-2 .row-4 .image{margin-left: 0;}
#processo .row-6 .image{margin-top: -6%;margin-left: 0;margin-bottom: 30px;}
#processo .section-3 .row-5{margin-top: 18%;}
#processo .section-3 .row-5 .content .title{margin-bottom: 50px;}
#processo .section-3 .row-5 .image{margin-bottom: 5%;}
#processo .section-4 .row-6{margin-top: 10%;}
#processo .row-6 .content{text-align: left;}
#processo .row-6 .content .title{text-align: left;margin-bottom: 50px;margin-top: 90px;}
#processo .section-4 .row-6 .content h4{text-align: left;}
#processo .section-4 .row-6 .content .text:before{right: initial;}
#processo .section-4 .row-6 .content .text:after{right: initial;}
@media screen and (max-width: 450px){
#processo .row-6 .content .title{margin-top: 70px;}
}

/*---------------------------------------------*\
                   CONTATTI
\*---------------------------------------------*/
#request {width:95%; margin:0 auto; padding-top:50px;}
#request .form {padding:0; width:100%; }

#newsletter .section-content {width:95%; margin:0 auto; }
#newsletter div.incipit {width:100%; margin:0 auto; }
#newsletter .newsletter-form {width:100%;}

.col-contatti-map{float: none;width: 100%;}
.col-contatti-form{float: none;width: 100%;}
.init-map{min-height: 500px;}

@media screen and (max-width: 1500px){
 .container-contatti{width: 100%;}   
}

@media screen and (max-width: 1000px){
    .container-contatti{width: 100%; text-align: center;margin-bottom: 8%;}
    .col-contatti-left{width: 100%;float: none;}
    .col-contatti-left p{margin-bottom: 0;}
    .col-contatti-right{width: 100%;float: none;}
}

@media screen and (max-width: 550px){
    #newsletter .section-content{padding: 50px 0;padding-bottom: 20px;}
    #newsletter .section-content.contact{width: 95%;}
    .form{padding: 50px 30px;}
}

/*---------------------------------------------*\
                   PRIVACY POLICY
\*---------------------------------------------*/

.light_container{margin-top: 130px;}