@import url('https://fonts.googleapis.com/css2?family=Griffy&family=Nunito:wght@300;400;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

html {-webkit-text-size-adjust:none; scroll-behavior: smooth;}
body {margin:0; padding:0; border:0; -webkit-font-smoothing:antialiased; -webkit-user-modify:read-plaintext-only; -webkit-tap-highlight-color:rgba(0, 0, 0, 0); color:#fff; font-family: 'Poppins', sans-serif; background-color: #000000; margin-top: 90px; background-image: url("../images/back.jpg"); background-position: top right; background-size: cover; background-attachment: fixed; overflow-x: hidden;} 
:focus {outline-style:none;}
* {margin:0; padding:0;}
p, h1, h2, h3, h4, h5, h6 {margin:0; padding:0; font-weight: normal;}

header {width: 100%; height: 90px; background-color:rgba(36,35,34,0.90); box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15); position: fixed; top: 0; left: 0; z-index: 2; display: table; border-bottom: 1px solid rgba(255,255,255,0.20)}
header .wrapper {display: table-cell; vertical-align: middle; position: relative;}
header .container {margin: auto; padding: 0  0 0 36px;}
header .logo {height: 45px;  padding-top: 22px;}
header ul {list-style: none; padding: 0; float: right;}
header ul li {list-style: none; display: inline-block; padding: 0 8px;}
header ul li:last-child { background-color: #C6711D; padding: 0 36px; margin-left: 36px;}
header ul li a {color: #fff; text-decoration: none; display: block; height: 90px; position: relative; line-height:90px; text-transform:uppercase; font-size:14px;transition: all 0.7s cubic-bezier(0.23, 1, 0.32, 1) 0s}
header ul li a:hover {color: #C6711D}
header ul li:last-child a:hover {color: #fff}
header ul li a .fas {font-size: 16px; vertical-align: middle; margin-right: 4px; background-color: #242322; width: 34px; height: 34px; text-align: center; line-height: 34px; border-radius: 100%;}
header .burgr-icon {display: none; cursor: pointer; float: right;}
header .bar1, header .bar2, header .bar3 {width: 28px;height: 2px;background-color: #fff; margin: 6px 0;transition: 0.4s;}
header .change .bar1 {-webkit-transform: rotate(-45deg) translate(-3px, 6px);transform: rotate(-45deg) translate(-3px, 6px);}
header .change .bar2 {opacity: 0;}
header .change .bar3 {-webkit-transform: rotate(45deg) translate(-4px, -9px);transform: rotate(45deg) translate(-4px, -9px);}

.sidenav {height: 100vh; width: 0; position: fixed; z-index: 1; top: 0;left: 0; background-color:#242322; overflow-x: hidden;transition: 0.5s; padding-top: 100px; box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15);}
.sidenav a {padding: 0 20px; color: #fff; text-decoration: none; display: block; height: 46px; line-height: 46px; font-size: 14px;}
.sidenav a .fas {font-size: 16px; vertical-align: middle; margin-right: 4px; background-color: #242322; width: 34px; height: 34px; text-align: center; line-height: 34px; border-radius: 100%;}
.sidenav a:last-child {background-color: #C6711D; }

.section {transition: all 0.7s cubic-bezier(0.23, 1, 0.32, 1) 0s;max-width: 1200px; margin: auto; padding: 0 36px}
.section-fedelity {display: table; height:-webkit-calc(100vh - 262px); height:-o-calc(100vh - 262px); height:calc(100vh - 262px);}
.row {display: table; width: 100%;}
.col {display: table-cell; position: relative; vertical-align: top;}
.col-sm-1 { width: 8.333333333333332%; }
.col-sm-2 { width: 16.666666666666664%; }
.col-sm-3 { width: 25%; }
.col-sm-4 { width: 33.33333333333333%; }
.col-sm-5 { width: 41.66666666666667%; }
.col-sm-6 { width: 50%; }
.col-sm-7 { width: 58.333333333333336%; }
.col-sm-8 { width: 66.66666666666666%; }
.col-sm-9 { width: 75%; }
.col-sm-10 { width: 83.33333333333334%; }
.col-sm-11 { width: 91.66666666666666%; }
.col-sm-12 { width: 100%; }

.box-intro {max-width: 700px; text-align: center; padding: 160px 0; display: block; margin: auto;}
.box-intro .logo {width: 245px; margin-bottom: 25px;}
.box-intro-punti {padding: 100px 0;}
.box-intro-punti .col {vertical-align: middle;}
.box-intro-punti .titoletti {color:#C6711D }
.box-fedelity {vertical-align: middle;display: table-cell;}
.box-fedelity .col {vertical-align: middle;}
.box-fedelity .titoletti {color:#C6711D }
.box-intestazione {background-color: #C6711D; height: 300px; width: 100%; vertical-align: middle; text-align: center;font-size:24px; line-height: 1; font-weight: 700; font-family: 'Nunito', sans-serif;-webkit-box-shadow:inset 0 0 14px 0 rgba(0,0,0,.5);box-shadow:inset 0 0 14px 0 rgba(0,0,0,.5)}
.box-intestazione:after {content: ""; position: absolute; width: 80%; height: 80%; left: 10%; top:10%; border: 2px solid #fff; border-radius: 10px}
.box-testi {padding: 80px}
.box-bordo {border: 2px solid #C6711D; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; vertical-align: middle; text-align: center;}
.box-bordo p {color: #C6711D}
.box-grigio {background-color:#242322 }
.box-grigio-chiaro {background-color:#636363 }
.box-contatti {height: 300px; vertical-align: middle; text-align: center;border: 0.2px solid rgba(255,255,255,0.50);box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;}
.box-contatti a {color: #fff; text-decoration: none;}
.box-contatti i {font-size: 50px; display: block; margin-bottom: 20px}
.box-contatti .icona {width: 50px; display: block; margin: auto; color: #fff; margin-bottom: 10px; margin-top: 20px; padding-top: 20px; border-top: 1px solid #fff}
.box-spazio {height: 170px;}
.box-spazio-small {height: 70px;}
.box-frase {font-size:28px; line-height: 1; font-weight: 700; font-family: 'Nunito', sans-serif; color:#C6711D; vertical-align: middle;}

.box-regalo {width: 30%; margin: 15px 1%; display: inline-block;background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2);box-sizing: border-box;box-shadow: 0px 4px 60px rgba(0, 0, 0, 0.25); border-radius: 20px; text-align: center; color: #C6711D; padding-top: 100px; position: relative; overflow: hidden; opacity: 0.5;}
.box-regalo .punti { max-width: 150px; color: #636363}
.box-regalo .punti:after {border-color: #636363 }
.box-regalo .punti .numero {font-size:50px;}
.box-regalo .punti .caption {font-size:14px; }
.box-regalo .foto-regalo {position: absolute; left: 0; top: 0; height: 100%; width: 100%; opacity: 0; border-radius: 20px; object-fit: cover}
.box-regalo .foto-regalo:hover {-webkit-animation:fade-in-bottom .6s cubic-bezier(.39,.575,.565,1.000) both;animation:fade-in-bottom .6s cubic-bezier(.39,.575,.565,1.000) both}
.box-regalo .titlo-regalo {font-size: 25px;line-height: 1; font-weight: 700; font-family: 'Nunito', sans-serif; color: #636363; margin-top: 20px; height: 120px;}
.box-regalo-attivo {opacity: 1;}
.box-regalo-attivo .punti {color: #C6711D}
.box-regalo-attivo .punti:after {border-color: #C6711D }
.box-regalo-attivo .titlo-regalo {color: #C6711D}


.foto-ferramenta {position: absolute; width: 100%; height: 70%; background-image: url("../images/ferramenta.jpg"); background-size: cover;}
.foto-elettrico {position: absolute; width: 100%; height: 100%; background-image: url("../images/materiale-elettrico.jpg"); background-size: cover;}
.foto-idraulico {position: absolute; width: 100%; height: 100%; padding-bottom: 170px; background-image: url("../images/materiale-idraulico.jpg"); background-size: cover;}
.foto-vernici {position: absolute; width: 100%; height: 100%; background-image: url("../images/vernici-e-decorazioni.jpg"); background-size: cover;}

.loghi, .loghi-static, .foto, .map {width: 100%; display: block; border: 0;}
.card {width: 100%; margin:auto; max-width:400px; display:block; border: 0;-ms-transform: rotate(-5deg); transform: rotate(-5deg); border-radius: 20px;}
.loghi-small { height: 100px;
    display: inline-block;}

.titoletti {font-size:35px; line-height: 1.2; font-weight: 700; font-family: 'Nunito', sans-serif; margin-bottom: 20px; }
.titoletti .ico {width: 70px;vertical-align: -22px; margin-right: 10px;-webkit-animation:jello-horizontal 1.3s infinite both;animation:jello-horizontal 1.3s infinite both}
.testo {font-weight: 300; line-height: 1.4; font-size: 14px;}
.testo-18 {font-size: 18px;}
.testo-20 {font-size: 20px;}
.testo-anni {font-size:100px; line-height: 1.2; font-weight: 700; font-family: 'Nunito', sans-serif; color: #C6711D}
.testo strong {font-weight: 600;}

.punti {position: relative;display: block;margin: auto; max-width: 250px; background-color: transparent;color: #C6711D;text-align: center;}
.punti:after {display: block;padding-bottom: 100%;width: 100%;height: 0;border-radius: 50%;content: "";border: 5px solid #C6711D; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;}
.punti-inner {position: absolute;top: 0;bottom: 0;left: 0;width: 100%;height: 100%;}
.punti-wrapper {display: table; width: 100%;height: 100%;}
.punti-content {display: table-cell;padding: 1em;vertical-align: middle;}
.punti .numero {font-size:80px; letter-spacing: -1px; line-height: 1; font-weight: 800; font-family: 'Nunito', sans-serif; }
.punti .caption {font-size:20px; line-height: 1; font-weight: 700; font-family: 'Nunito', sans-serif;}

.nav-tab {width: 100%;margin: 10px 0 0 0; display: inline-table; border-bottom: 1px solid #C6711D}
.nav-tab .section {padding: 0;}
.nav-tab button {width: 13.5%; text-align: center; border: 0; font-weight: 600;  border-bottom: 5px solid trasparent; background-color: transparent; text-transform: uppercase; font-size: 12px; color: #fff; padding: 10px 0; cursor: pointer; color:#636363; transition: opacity 0.4s;}
.nav-tab button:hover { color: #C6711D}
.nav-tab button.tabcurrent {border-bottom: 5px solid #C6711D; color: #C6711D;}
.tab {position:relative; margin-top: 40px;} 

.pulsante-login {width: 100%; display: flex; margin-top: 25px;}
.pulsante-login .campo {width: 62%; padding: 0 4%; height: 50px; border: 0; background-color: rgba(255,255,255,1); border-radius: 20px 0 0 20px;font-weight: 400; font-size: 14px;font-family: 'Nunito', sans-serif;}
.pulsante-login .btn {width: 30%; height: 50px; border: 0; background-color:#C6711D; border-radius: 0 20px 20px 0;font-weight: 600; font-size: 14px; color: #fff; cursor: pointer;transition: all 0.7s cubic-bezier(0.23, 1, 0.32, 1) 0s;font-family: 'Nunito', sans-serif;}
.pulsante-login .btn:hover {background-color: #A15C17}

footer {width: 100%;background-color:rgba(36,35,34,1); display: table; margin-top: 80px;}
footer .wrapper {display: table-cell; vertical-align: middle; position: relative;}
footer .container {margin: auto; padding: 36px; text-align: center;}
footer a {color: #fff; text-decoration: none;}

.si-mobile {display: none;}

.back { animation: scroll 70s linear infinite;background: url("../images/back-grana.jpg"), #111111; height: 100vh; width: 100%; position: fixed; top: 0; mix-blend-mode: soft-light; z-index: -1;}

@-webkit-keyframes fade-in-bottom{0%{-webkit-transform:translateY(50px);transform:translateY(50px);opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}@keyframes fade-in-bottom{0%{-webkit-transform:translateY(50px);transform:translateY(50px);opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}

@-webkit-keyframes jello-horizontal{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes jello-horizontal{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}

@-webkit-keyframes shadow-inset-center{0%{-webkit-box-shadow:inset 0 0 0 0 transparent;box-shadow:inset 0 0 0 0 transparent}100%{-webkit-box-shadow:inset 0 0 14px 0 rgba(0,0,0,.5);box-shadow:inset 0 0 14px 0 rgba(0,0,0,.5)}}@keyframes shadow-inset-center{0%{-webkit-box-shadow:inset 0 0 0 0 transparent;box-shadow:inset 0 0 0 0 transparent}100%{-webkit-box-shadow:inset 0 0 14px 0 rgba(0,0,0,.5);box-shadow:inset 0 0 14px 0 rgba(0,0,0,.5)}}

@keyframes scroll {100% {background-position:0px -3000px;}}

@media screen and (min-width: 960px) {
/* SCROLLBAR */
::-webkit-scrollbar{width:8px; cursor:pointer;}
::-webkit-scrollbar-track{ background:#303030;}
::-webkit-scrollbar-thumb{border-radius:0px;background:#999; cursor:pointer;/* -webkit-box-shadow:0 0 8px rgba(0,0,0,0.3);*/ }	
.card {-ms-transform: rotate(-5deg); transform: rotate(-5deg);}
}


@media screen and (max-width: 959px) {	
.titoletti {font-size:24px; }
.titoletti .ico {width: 40px;vertical-align: -10px; margin-right: 10px;}
.testo {font-size: 13px;}
.testo-18 {font-size: 16px;}
.testo-20 {font-size: 18px;}
.box-testi {padding: 25px}
	
body {margin-top: 60px;} 	
header {height: 60px;}
header .container {padding: 0 20px;}		
header .logo {height: 25px; padding-top: 0;}	
header ul {display: none;}	
header .burgr-icon {display: inline-block;}	
.section {padding: 0 20px}	
.col {display: block;}	
.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11 { width: 100%; }
.box-intro {padding: 60px 0;}
.box-intro .logo {width: 180px;}	
.box-intro-punti {padding: 40px 0; text-align: center;}
.box-intro-punti .punti {margin-bottom: 20px;}	
.box-frase {font-size:22px; padding: 30px 0;}	
.box-intestazione {height: auto; padding: 100px 0}
.box-contatti {height: auto; padding: 60px 0}
.box-contatti i {font-size: 40px;}	
.box-bordo { padding: 20px 0;}	
.box-fedelity {padding: 40px 0 0 0; text-align: center;}	
.loghi, .loghi-static { width: 60%; margin: auto;}	
.card {margin-bottom: 30px;margin-top: 20px;}	
.nav-tab button {width: 13.2%; font-size: 10px;}	
.punti {max-width: 180px;}	
.punti .numero {font-size:60px}
.punti .caption {font-size:16px;}	
.box-regalo {width: 100%; margin: 10px 0; padding-top: 200px;}
.box-regalo .punti {max-width: 120px;}	
.box-regalo .punti .numero {font-size:40px;}
.box-regalo .punti .caption {font-size:12px; }	
.box-regalo .titlo-regalo {font-size: 20px; height: auto; padding-bottom: 20px;}
.box-regalo .foto-regalo {position: absolute; left: 0; top: 0; height: 180px; width: 100%; opacity: 1; border-radius: 20px 20px 0  0; object-fit: cover; border-bottom:1px solid rgba(255, 255, 255, 0.2); }	
.back {display: none;}
.pulsante-login {margin-bottom: 40px;}	
.no-mobile {display: none !important}	
.si-mobile {display: block !important;}		
footer {margin-top: 25px;background-color:rgba(36,35,34,0);border-top: 1px solid rgba(255,255,255,0.20)}
footer .container {padding: 25px;}	
} 

@media screen and (max-width: 600px) {
}