@import url('extras.css');
@import url('forms.css');
@import url('animations.css');

/*---------------------------------------------*\
      green: #472             
\*---------------------------------------------*/

* { margin:0; padding:0; font:14px/1.65 'Ubuntu', sans-serif; font-weight:300; color:#444; z-index:1; -webkit-text-size-adjust: none; }

*, *:before, *:after { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; box-sizing: border-box;  }

html, body { min-height:100%; height:100%; width:auto; }
html > body  {min-height:100%; height:100%; width:auto; }
html { }
body {background:#e6dfd5; }

h1,h2,h3,h4,h5,h6 {line-height:1em; color:#4a4541; padding:0;  margin-bottom:10px; text-align:left; font-family: 'Montserrat', sans-serif; letter-spacing:.3em;}
h1 *, h2 *, h3 *, h4 *, h5 *, h6 * {line-height:1em; font-size:inherit; color:inherit; font-family:inherit; }

h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {line-height:1em; background:none }

h1 {font-size:38px; }
h2 {font-size:34px; }
h3 {font-size:30px; }
h4 {font-size:26px; }
h5 {font-size:20px; }
h6 {font-size:16px; }

p {margin-bottom:15px;}
a {text-decoration:none; color:#333;}
a:hover {}
hr {height:1px; border:0; border-bottom:1px dotted #ccc; margin:10px 0;}
a:visited, a:link {outline:none;}
a img {border:0;}
p.err {color:red; margin-bottom:10px}

em {font-style:italic}

strong, strong *, * strong {font-weight:bold !important; }
input {margin:0; padding:0;}
form p { margin:0; padding:0;}

ul { list-style-position:inside; margin:0; padding:0; }
ol li { list-style-type: decimal; list-style-position: outside; margin-left:15px }

label {color:#fff;}
select {-webkit-appearance:none; }

.hide {display:none}
.err {color:#f12 !important; }
strong.err {font-size:inherit; padding:0;}
h3.err {font-size:30px; padding:0;}

input:focus, select:focus {color:#444; outline:none; }
select:-moz-focusring { color: transparent;   text-shadow: 0 0 0 #000; }

*.sans-serif, *.sans-serif *, *.sans-serif > * {font-family: 'Montserrat', sans-serif;}
*.serif, *.serif *, *.serif > * {font-family: 'Adamina', serif;}


/*---------------------------------------------*\
                   common 
\*---------------------------------------------*/
.cta {display:inline-block; padding:15px 27px; background:#fff; text-transform:uppercase; color:#534f49; font-weight:bold;  font-size:13px; margin-top:50px; letter-spacing:.1em}

/*---------------------------------------------*\
                   layout 
\*---------------------------------------------*/
#wrapper { width:100%; }

#top {position:fixed; top:0; left:0; width:100%; background:transparent; height:80px; z-index:9999; transition: all 1s;   }
#top-content {position:relative; width:100%; max-width:1480px; margin:0 auto;}
#top #logo a {position:absolute; top:15px; left:65px; display:block; width:286px; height:54px; background:url(/i/roncoroni-legno-wg.png) bottom center no-repeat; background-size:286px; text-indent:-99999px; overflow:hidden; z-index:888}

#menu {width:auto; position:absolute; width:100%; margin:0 auto; padding-top:37px; padding-left:245px; text-align:center;}
#menu ul li {list-style:none; display:inline-block;   }
#menu ul li a {display:inline-block; margin-right:0; padding:5px 20px; text-transform:uppercase; color:#fff; font-size:12px; font-family: 'Montserrat', sans-serif; }
#menu ul li a:after {content:" "; display:block; height:1px;  width:0; border-bottom:4px solid; transition:width .5s; margin:2px auto;}
#menu ul li.active a:after {content:" "; display:block; height:1px;  width:80%; border-bottom:4px solid; transition:width .5s; margin:2px auto;}
#menu ul li:hover a:after {width:90%; transition:width .5s;}

#social {position:absolute; right:50px; top:35px; }
#social a.social {width:30px; height:29px; display:inline-block; margin-right:8px; background-size:30px; background-position:top center; background-repeat:no-repeat; text-indent:-99999px}
#social a.social_f {background-image:url(/i/social_f.png); }
#social a.social_i {background-image:url(/i/social_i.png); }

#top.fixed {background:#fff; transition:all 1s;  }
#top.fixed #menu ul li a {color:#000}
#top.fixed #social a {background-position:bottom center;}
#top.fixed #logo a {background-position:top center}

#sidebar-trigger {display:none;}

#intro {position:relative; top:0; left:0; min-height:450px; width:100%; z-index:25;  }
#intro .content {position:absolute; top:0; left:0; width:100%; min-height:100%; height:100%; background-size:cover !important; background-position:center center; background-attachment:fixed; }
#intro h1 {max-width:80%; margin:0 auto; color:#fff; text-align:center; text-transform:uppercase; text-shadow:1px 1px 1px #444; font-size:48px; }
#intro h1 a {color:#fff;}
#intro h1 span {font-size:28px; }

#intro .down-arrow {background: rgba(0, 0, 0, 0) url("/i/arrow-down.png") no-repeat scroll 0 0; bottom: 220px; height: 23px; left: 50%; margin-left: -22px; position: absolute; width: 43px;z-index: 888; animation-duration: 1.5s; opacity:.9; transition:opacity 1s;     animation-iteration-count: infinite; animation-name: floating;}
#intro .down-arrow.fixed {opacity:0; transition:opacity 1s;     animation-iteration-count: infinite; animation-name: floating;}

#intro.none {height:0 !important;}
#intro.none h1{margin-top:130px !important;}
#intro.none .down-arrow {display:none}

#intro .subs {width:75%; margin:0 auto; }
#intro .subs ul {text-align:center; margin-top:40px; }
#intro .subs ul:before {content:" "; padding-bottom:40px; display:block; height:0; border-top:4px solid #fff; width:35%; margin:0 auto;}
#intro .subs ul li {list-style:none; display:inline-block; margin-right:10px; }
#intro .subs ul li a {color:#fff; display:inline-block; border:3px solid #fff; padding:5px 40px; transition:all 1s; text-shadow:1px 1px 1px #444; margin-bottom:10px;}
#intro .subs ul li a:hover {background:rgba(0,0,0,.8); transition:all 1s;}
#intro .subs ul li.active a {background:rgba(0,0,0,.5); }

#main {position:relative; z-index:50; width:90%; margin:0 auto; background:#fff; min-height:200px; padding:10px; margin-top:-200px; max-width:1480px; margin-bottom:3%; }

#footer {position:relative; top:0; left:0; min-height:200px; background:#fff; width:100%; margin:0; text-align:center; padding-top:30px;}
#footer .address {display:inline-block; text-align:center; font-weight:bold; line-height:2em; text-transform:uppercase;}
#footer .address * {font-weight:bold; text-decoration:underline; text-transform:uppercase;}
#footer .address img {display:block; margin:0 auto; margin-bottom:30px; width:50%;}
#footer .legals {position:absolute; top:25px; left:25px; text-align:left;}
#footer .socials {position:absolute; top:25px; right:25px;}
#footer .socials img {width:40px; margin-right:5px;}
#credits {min-height:100px; background:#fff; width:100%; margin:0; text-align:center; color:#aaa; padding-top:50px; font-size:11px;}
#credits * {color:#aaa; font-size:11px;}
.legals a { display: block; }


/*---------------------------------------------*\
                   HOMEPAGE 
\*---------------------------------------------*/
#services {margin-top:100px; width:100%; min-height:550px; background:url(/i/como-bokeh.jpg) center center no-repeat; background-size:cover; background-attachment:fixed;}
#services .content {text-align:center; width:65%; max-width:800px; margin:0 auto; padding-top:150px;}
#services .content p {color:#fff; margin-bottom:20px; font-size:22px; letter-spacing:1px; line-height:1.35em; }

#feed-instagram {overflow:hidden; background:#fff; }
#feed-instagram .link {text-align:center; margin-bottom:30px; font-weight:bold; }
#feed-instagram .link img {width:55px; margin-top:30px; }
#feed-instagram .link span {display:block; font-size:28px;}
#feed-instagram .posts {width:100%; overflow:hidden; background:#ccc;}
#feed-instagram .posts img {width:20%; float:left;}

#fast-contact {background:green; background:url(/i/fast-contact.jpg) center center no-repeat; background-size:cover;  position:relative; padding:100px; }
#fast-contact .content {border:2px solid #fff; padding:30px; width:90%; margin:0 auto;}
#fast-contact .content h4 {text-transform:uppercase; font-size:16px; letter-spacing:0; color:#fff; text-align:center; width:65%; margin:0 auto; margin-bottom:20px;}
#fast-contact .content p {color:#fff; text-align:center; width:75%; margin:0 auto;}
#fast-contact .content .cta {position:relative; top:50px; margin:0 auto; text-align:center; width:200px; margin-left:-100px; left:50%; }

#associated { background:white; position:relative; padding:18px; border-top: 2px solid #fff; background-color: #e6dfd5; color: white; }
#associated .content { width:90%; margin:0 auto; padding: 40px; padding-bottom:55px; }
#associated .content h4 { color: #383432; text-transform:uppercase; font-size:26px; letter-spacing:2px; text-align:center; width:65%; margin:0 auto; margin-bottom:55px;}
#associated .associated-list { list-style: none; display: block; margin: auto; text-align: center; }
#associated .associated-element { margin-right: 20px; height: 140px; display: inline-block; vertical-align: middle; zoom: 1; *display: inline; *vertical-align: auto; width: 30%; }
#associated .associated-element:last-child { margin-right: 0; height: 50px; }
#associated .associated-image { display: block; height: 100%; max-width: 100%; margin: auto; text-align: center; }



#categorie {overflow:hidden; }
.categoria {float:left; width:48%; margin:1%; background:#f6f2eb; }
.categoria .title {height:4em; text-align:right; padding-top:.5em; padding-right:1em; border-bottom:1px solid #000; margin-bottom:10px;  }
.categoria .title a {text-transform:uppercase;  letter-spacing:.1em; font-size:13px;}
.categoria .title a span {color:#8c8681; display:block; font-size:11px;}
.categoria .image {background:#fff; overflow:hidden;}
.categoria .image img {width:100%; display:block; transition:all 2s}
.categoria .image img:hover {opacity:.7; background:#fff; transform: rotate(1deg) scale(1.1); transition:all 2s}
.categoria.cat-14 .title {background:url(/i/categorie/cat-b-14.png) 15px center no-repeat;  background-size:30px;  }
.categoria.cat-13 .title {background:url(/i/categorie/cat-b-13.png) 15px center no-repeat; background-size:35px; }
.categoria.cat-12 .title {background:url(/i/categorie/cat-b-12.png) 15px center no-repeat; background-size:35px; }
.categoria.cat-11 .title {background:url(/i/categorie/cat-b-11.png) 15px center no-repeat; background-size:45px; }
.categoria.cat-9 .title {background:url(/i/categorie/cat-b-9.png) 15px center no-repeat; background-size:35px; }
.categoria.cat-8 .title {background:url(/i/categorie/cat-b-8.png) 15px center no-repeat; background-size:35px; }


/*---------------------------------------------*\
                   DETTAGLIO CATEGORIA 
\*---------------------------------------------*/

#categoria-dettaglio {}
#categoria-dettaglio .text-intro {background:#f6f2eb; overflow:hidden; margin-bottom:1%; padding:4% 2%;  }
#categoria-dettaglio .text-intro * {line-height:1.35em;}
#categoria-dettaglio .text-intro .col {float:left; padding:2%; }
#categoria-dettaglio .text-intro .col img {max-width:100%;}
#categoria-dettaglio .text-intro .cols-1 .col {width:100%;}
#categoria-dettaglio .text-intro .cols-2 .col {width:50%;}
#categoria-dettaglio .text-intro .cols-3 .col {width:33.333333%;}
#categoria-dettaglio .text-intro .cols-4 .col {width:25%;}
#categoria-dettaglio .text-intro .cols-5 .col {width:20%;}
#categoria-dettaglio .text-intro .cols-6 .col {width:16.666666%;}
#categoria-dettaglio .text-intro .text-intro-extra {width:100%; text-align:center; }
#categoria-dettaglio .text-intro .text-intro-extra img {max-width:100%;}
#categoria-dettaglio p.image-inline { text-align:center; }
#categoria-dettaglio p.image-inline img {max-width:35%;}



#categoria-dettaglio .scacchiera {overflow:hidden;}
#categoria-dettaglio .rect {width:49.5%; margin-right:.5%; height:340px; max-height:340px; overflow:auto; background:#f6f2eb; float:left; margin-bottom:1%; padding:2%; background-size:cover; background-position:center center; position:relative; top:0; left:0;  }
#categoria-dettaglio .rect.hided {display:none;}
#categoria-dettaglio .rect:nth-child(even) {margin-left:.5%; margin-right:0;}
#categoria-dettaglio .rect a.hover-title {display:block; height:100%; display:block; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.5); opacity:0; transition: opacity .5s ease-in-out; cursor:pointer; }
#categoria-dettaglio .rect a.hover-title h5 {padding-top:0; color:#fff; text-transform:uppercase; text-align:center; width:50%; margin:0 auto; font-size:15px; position:relative; line-height:1.65em; }
#categoria-dettaglio .rect a.hover-title h5:after {/*content:" "; height:8px; width:80px; position:absolute; left:50%; margin-left:-40px; background:#fff; bottom:-35px; */}
#categoria-dettaglio .rect a.hover-title:hover {opacity:1; transition: opacity .3s ease-in-out;}
#categoria-dettaglio .rect.text {padding:6% 2%;}

#categoria-dettaglio .more-example {clear:left; display:block;}
#categoria-dettaglio .more-example h6 {text-align:center; font-size:14px; font-weight:bold; text-transform:uppercase; padding:3%; }

#categoria-dettaglio .categoria-servizi {padding:0;}
#categoria-dettaglio .categoria-servizi .col {float:left; width:33%; }
#categoria-dettaglio .categoria-servizi * {color:#fff; }
#categoria-dettaglio .categoria-servizi h6 {font-size:13px; letter-spacing:1px;}
#categoria-dettaglio .categoria-servizi br {margin-bottom:5px;}
#categoria-dettaglio .categoria-servizi .title {padding:20px;}
#categoria-dettaglio .categoria-servizi .title h4 {font-size:24px; text-transform:uppercase; padding-right:70%; padding-top:30px; letter-spacing:1px;}
#categoria-dettaglio .categoria-servizi .content {border-top:1px solid #fff; border-bottom:1px solid #fff; padding:20px; min-height:180px; overflow:hidden;}


#categoria-dettaglio .categoria-servizi.cat-14 .title {background:url(/i/categorie/cat-w-14.png) 97% center no-repeat;  background-size:50px;  }
#categoria-dettaglio .categoria-servizi.cat-13 .title {background:url(/i/categorie/cat-w-13.png) 97% center no-repeat;  background-size:50px;  }
#categoria-dettaglio .categoria-servizi.cat-12 .title {background:url(/i/categorie/cat-w-12.png) 97% center no-repeat;  background-size:50px;  }
#categoria-dettaglio .categoria-servizi.cat-11 .title {background:url(/i/categorie/cat-w-11.png) 97% center no-repeat;  background-size:65px;  }
#categoria-dettaglio .categoria-servizi.cat-9 .title {background:url(/i/categorie/cat-w-9.png) 97% center no-repeat;  background-size:50px;  }
#categoria-dettaglio .categoria-servizi.cat-8 .title {background:url(/i/categorie/cat-w-8.png) 97% center no-repeat;  background-size:50px;  }

.inline-content {padding:50px; background:#fff; }
.inline-content p.center {text-align:center; }
.inline-content img {max-width:100%;}



#puntiforza {background:green; background:url(/i/puntiforza.jpg) center center no-repeat; background-size:cover;  position:relative; padding:100px 0; }
#puntiforza h4 {text-transform:uppercase; font-size:16px; letter-spacing:0; color:#fff; text-align:center; width:65%; margin:0 auto; margin-bottom:20px;}
#puntiforza .content {border:2px solid #fff; border-left:0; border-right:0; padding:70px; width:100%; margin:0 auto;}
#puntiforza .content .forces {width:80%; margin:0 auto; overflow:hidden; padding-top:10px;}
#puntiforza .content .force {width:20%; margin:0 2.5%;float:left; color:#fff; font-size:16px; text-align:center; padding-top:95px; line-height:1.3em; padding-bottom:40px;  background-size:70px !important;}
#puntiforza .content .force.soluzioni-personalizzate {background:url(/i/soluzioni-personalizzate.png) 46px 0 no-repeat;}
#puntiforza .content .force.progettazione {background:url(/i/soluzioni-progettazione.png) top center no-repeat; }
#puntiforza .content .force.montaggio {background:url(/i/soluzioni-montaggio.png) top center no-repeat; }
#puntiforza .content .force.assistenza {background:url(/i/soluzioni-assistenza.png) top center no-repeat; }


#scrivici {background:green; background:url(/i/scrivici.jpg) center center no-repeat; background-size:cover;  position:relative; padding:100px; }
#scrivici .content {border:2px solid #fff; padding:30px; width:90%; margin:0 auto;}
#scrivici .content h4 {text-transform:uppercase; font-size:16px; letter-spacing:0; color:#fff; text-align:center; width:65%; margin:0 auto; margin-bottom:20px;}
#scrivici .content p {color:#fff; text-align:center; width:75%; margin:0 auto;}
#scrivici .content .cta {position:relative; top:50px; margin:0 auto; text-align:center; width:200px; margin-left:-100px; left:50%; }


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

#contatti {}

#contatti .contacts {background:#f6f2eb; overflow:hidden; margin-bottom:1%; padding:4% 2%;  }
#contatti .contacts h1 {font-size:26px; font-weight:bold; margin-bottom:10px; text-align:center;}
#contatti .contacts .contact {width:33%; text-align:center; float:left;}
#contatti .contacts .contact h4 {font-size:16px; text-align:center; padding-top:65px; margin-top:50px; letter-spacing:1px; margin-bottom:0; background:url(/i/contact-scrivici.png) top center no-repeat; }
#contatti .contacts .contact.vieni h4 {background:url(/i/contact-vieni.png) top center no-repeat; }
#contatti .contacts .contact.chiamaci h4 {background:url(/i/contact-chiamaci.png) top center no-repeat; }
#contatti .contacts .contact p {color:#8c8681}
#contatti .contacts .contact p a {color:#8c8681; text-decoration:underline; }


#contatti .form-map {width:100%; overflow:hidden; background:#B7A18C; /*url(/i/form-bgk.jpg) no-repeat;*/ background-size:cover;}
#contatti .form-map .contact-form {width:50%; float:left; min-height:500px; padding:60px;   }
#contatti .form-map .contact-form .send * {color:#fff}
#contatti .form-map .contact-form input[type=text] {color:#111}
#contatti .form-map .contact-form textarea {color:#111}
#contatti .form-map .contact-form .privacy-policy-content * {color:#333}
#contatti .form-map .map {width:50%; float:left; min-height:500px;}

#contatti #list_map {width:100%; height:1100px; }

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

#main.main-privacy { min-height: 263px; }
#main.main-privacy #categoria-dettaglio { height: 100%; display: block; box-sizing: border-box; }
#main.main-privacy #categoria-dettaglio * { box-sizing: inherit; }
#main.main-privacy #categoria-dettaglio .text-intro { margin-bottom: 0; }
#main.main-privacy #categoria-dettaglio p { margin-bottom: 0; }

.main-scrivici { min-height: 0 !important; }
.main-scrivici .contact-form { padding: 30px 18px; width: 100%; margin: auto; background: #e6dfd5 !important; }
.main-scrivici .contact-form .form { width: 100%; max-width: 580px; margin: auto; height: 100%; }
.main-scrivici .contact-form .form .mandatory-text { color: #545454; margin-bottom: 0; }

/*---------------------------------------------*\
         INCENTIVI / BLOG (stili in comune)
\*---------------------------------------------*/
.incentivi, .blog {overflow:hidden;}
.incentivi-menu, .blog-menu {width:25%; float:left; padding-right:10px; padding-bottom:30px; background:#E6DFD5; min-height:450px; background:#fff; }
.incentivi-menu ul li, .blog-menu ul li {list-style:none; width:100%; padding:5px 10px;}
.incentivi-menu ul li a{display:block; text-transform:uppercase; padding:5px 10px; background:#E6DFD5;}
.incentivi-menu ul li a:hover, .blog-menu ul li a:hover {opacity:.6}
.incentivi-menu ul li.active a, .blog-menu ul li.active a {font-style:italic; font-weight:bold;}
.incentivi-content, .blog-content {width:70%; float:left; padding:5%;}
.incentivi-content .icons, .blog-content .icons {text-align:center;}
.incentivi-content img.icon, .blog-content img.icon {vertical-align:middle; margin:30px; display:inline-block;}
.incentivi-content h2, .blog-content h2 {text-align:center; text-transform:uppercase; padding-bottom:20px; letter-spacing:.1em;}
.incentivi-content h2:after, .blog-content h2:after {display:block; content:""; height:4px; width:35%; margin:0 auto; background:#333; margin-bottom:40px; position:relative; top:20px;}

/*---------------------------------------------*\
                   BLOG
\*---------------------------------------------*/
.blog-menu>h4{ padding: 16px; font-size: 20px; letter-spacing: 3px; margin-bottom: 20px; }
.blog-menu span.data{ font-size: 10px; color: #97918c; display: block; }
.incentivi-menu ul li a, .blog-menu ul li a { display: block; text-transform: uppercase; padding: 5px 10px; border-bottom: 2px solid #E6DFD5; }

.blog-content .data{ display: block; width: 100%; text-align: center; margin-bottom: 20px; color: #ababab; }
.blog-content img.main-img{ float: right; width: 250px; margin-left: 20px; }

.blog-content .text{ position: relative; }

.blog-content #gallery-container{ margin-top: 100px; }
.blog-content #gallery-container h4{ color: #383432; text-transform: uppercase; font-size: 20px; letter-spacing: 2px; text-align: left; margin-bottom: 30px; padding-bottom: 10px; border-bottom: 4px solid; }
.blog-content #gallery-container .gallery{ display: inline-block; }
.blog-content #gallery-container .gallery-item{ float: left; width: 20%; border: 2px solid #ffffff; position: relative; overflow: hidden; }
.blog-content #gallery-container .gallery-item a{ display: block; line-height: 0; }
.blog-content #gallery-container .gallery-item.noshow{display: none;}

.blog-content #gallery-container .gallery-item img{max-width: 100%; width: 100%; -moz-transition: all 0.6s; -webkit-transition: all 0.6s; transition: all 0.6s; }
.blog-content #gallery-container .gallery-item:hover img{ -moz-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); }
.blog-content #gallery-container .gallery-item.view-gallery:hover img{ -moz-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); }
.blog-content #gallery-container .view-gallery span{ display: block; position: absolute; z-index: 1; width: 100%; text-align: center; bottom: 15px; color: #ffffff; z-index: 9;}
.blog-content #gallery-container .view-gallery:hover{ background-color: #97918C; }
.blog-content #gallery-container .view-gallery:hover span{ color: #97918C; }
.blog-content .download-area{ margin-top: 50px; }
.blog-content .download-area ul{ list-style: none; }
.blog-content .download-area ul li{ margin-bottom: 15px; }
.blog-content .download-area ul li a{ background: url('/i/dl-ico.png') no-repeat left center; background-size: contain; padding: 6px 10px 6px 50px; margin-bottom: 15px; display: block; }
.blog-content .download-area ul li a:hover{ color: #97918c; }

.blog-content .social-share{ opacity: 0; text-align: center; font-size: 11px; position: absolute; top:0%; right: -90px; -webkit-transition: all 0.1s ease-in-out; -moz-transition: all 0.1s ease-in-out; -o-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out; }
.blog-content:hover .social-share{ opacity: 1; -webkit-transition: all 0.1s ease-in-out; -moz-transition: all 0.1s ease-in-out; -o-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out; }
.blog-content .social-share img{ width: 40px; }

/*********************************************
----------- Iubenda  -----------------
*********************************************/
#iubenda-cs-banner .iubenda-banner-content * {color: white !important;}