@import url('https://fonts.googleapis.com/css2?family=Dancing+Script&family=Poppins:ital,wght@0,400;0,600;0,700;1,400&display=swap');
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {/* font-size: 62.5%*/ font-size: 10px }
body { font-family: 'Poppins', sans-serif; color: #555; font-weight: 300; background-color: #ccc; letter-spacing: 0.5px }
.body { background-color: #fff; max-width: 200rem; margin: 0 auto; overflow: hidden; }
ul, li, h1, h2, h3, h4, h5, p { list-style: none; }
h1, h2, h3, h4, h5 { letter-spacing: 3px }
a { text-decoration: none; color: #555; outline: none }
a:focus {outline: none!important }
p { line-height: 1.6; font-size: 1.6rem; }
b { font-weight: 600; }
.container { max-width: 148rem; margin: 0 auto; padding: 0 2%; width: 90%; }
button { background-color: transparent; border: none; font-family: 'Poppins', sans-serif; color: #fff }
input, textarea { font-family: 'Poppins', sans-serif; }
.center { text-align: center; }
.clear { clear: both; }
.flex { display: flex; }
.clearfix::after { content:""; display: table; clear: both; }
.upper { text-transform: uppercase; }
.fff {color: #fff}
.hide { overflow: hidden; }
.font { font-family: 'Dancing Script', cursive; }
.bgblu { background-color: #00203d }
.blu { color: #00203d }
.bgo1 { background-color: #ff5800 }
.o1 { color: #ff5800 }
.bgo2 { background-color: #e64f29 }
.active { color: #ff5800!important }
.light { font-weight: lighter; }

.color-primary1{ color: #e64f29; }
.color-primary2{ color: #555; }

.alert{ color: #ff0000; }
.success{ color: green; }

#msg_invio{ margin-top: 20px;}

/*TOP BUTTON*/
.whatsapp { position: fixed; z-index: 1; bottom: 1.5rem; right: 1rem; width: 5rem}

/*TOP BUTTON*/
.back-to-top { text-align: center; position: fixed; z-index: 200; bottom: 0.5rem; right: 0.5rem; display: inline-block; border:1px solid #e64f29; padding: 1.3rem 1rem 1.3rem; margin: 1em; background-color: #e64f29; border-radius: 50%; }
.back-to-top img { width: 2.5rem; }
.back-to-top:hover {cursor: pointer; background-color: #111; }

.cta { font-size: 1.5rem; letter-spacing: 1.5px; border-radius: 0.6rem; font-weight: normal; transition: all 0.3s ease 0s; display: inline-block; padding: 1.2rem 2.5rem; text-align:center;}
.trans { transition: all 0.3s ease 0s; }
.cta:hover { box-shadow: 0 0 10px rgba(0,0,0,0.4) }
.shadow { box-shadow: 0 0 20px rgba(0,0,0,0.3) }

.plus img{ margin-top: 5px;transform: rotate(0deg);}
.plus.minus img{transform: rotate(180deg);}
#mySidenav .plus img { margin-top: 0 }

.preheader { padding: 1rem 2rem; align-items: center; justify-content: space-between; }
.preheader .check { width: 1.4rem; margin-right: 5px }
.preheader .call { width: 2rem; margin: 0 1rem; }
.preheader p { display: flex; align-items: center; font-size: 1.5rem }
.preheader a { font-weight: 600; font-size: 1.7rem }
.preheader a:hover { color: #ff5800 }

header { position: relative; z-index: 4; height: 13rem; }
header .logo { z-index: 1; width: 27rem; position: absolute; left: 2.5rem; top: 4.5rem }
header .contact { padding: 1.2rem 3rem; border:2px solid #888; position: absolute; right: 3.5rem; top: 3.5rem }
header .contact:hover { background-color: rgba(255,255,255,0.1); box-shadow: 0 0 10px rgba(0,0,0,0.4) }
.menu { position: relative; width: 100%; text-align: center; padding: 5rem 0 }
.dropbtn { font-weight: 600; letter-spacing: 1.5px; transition: all 0.3s ease 0s; margin-left: -3px; text-transform: uppercase; padding: 0 1.8rem 6rem; font-size: 1.8rem; }
.dropdown {display: inline-block;}
.dropdown img { width: 1.1rem; vertical-align: middle; }
.dropdown.inv .dropbtn { background-color: rgba(255,255,255,0.2); border-bottom: 4px solid rgba(255,255,255,0.02); }
.dropdown button { position: relative; z-index: 2; }
.dropdown-content { margin-top: 5rem;
  position: absolute;
  background-color: rgba(0,32,61,0.9);
  min-width: 160px;
  box-shadow: 0 0 20px rgba(0,0,0,0.4);
  z-index: 2;
  left: 0; width: 100%; margin-left: -10px;
  height: 0; overflow: hidden;
  transition: all 0.3s ease-in-out; opacity: 0;
}

.dropdown-content { display: flex; justify-content: center; text-align: left; }
.dropdown-content .cl { padding: 4rem 2%; }
.dropdown-content a { display: flex; transition: all 0.3s ease 0s; text-decoration: none; font-size: 1.4rem; color: #fff; margin-bottom: 1rem }
.dropdown-content a span { line-height: 1.2 }
.dropdown-content a img { transition: all 0.3s ease 0s; width: 1rem; margin-right: 5px; }
.dropdown-content p { font-size: 1.6rem; margin-bottom: 2rem; text-transform: uppercase; color: #fff }
.dropdown-content a:hover { color: #ff5800; }
.dropdown:hover .dropdown-content { height: auto; margin-left: 0; opacity: 1}
.dropdown:hover .dropbtn { color: #ff5800 }
.dropdown .dropbtn.active { color: #ff5800 }

header .info { z-index: 5; position: absolute; top: 5rem; right: 4rem; display: flex; align-items: center; }
header .info a img { height: 3.4rem; opacity: 0.7 }
header .info a img:hover { opacity: 1 }
header .info .cart { position: relative; margin-left: 2rem }
header .info .cart .circle { position: absolute; height: 2.8rem; width: 2.8rem; top: -1rem; right: -2.2rem; display: flex; align-items: center; justify-content: center;}
header .info .cart .circle .bgo1 { height: 2.8rem; width: 2.8rem; display: inline-block; border-radius: 50% }
header .info .cart .circle .number { position: absolute; font-size: 1.5rem; margin-top: 2px }

/*sidenav*/
.menuresponsive, #mySidenav { display: none; }

.main { height: 55rem; background-color: #eee; overflow: hidden; align-items: center; }
.main .bg1 { background-color: #eee; position: relative; width: 50%; align-items: center; justify-content: center; display: flex; }
.main .ns { position: absolute; z-index: 1; width: 90%; left: 0; right: 0; margin: 0 auto; opacity: 0.2 }
.main .bg1 .txt { position: relative; z-index: 2; width: 55rem; margin-right: 5% }
.main .bg1 .txt .title { font-size: 3.6rem; line-height: 1.3; margin-bottom: 4rem }
.main .bg2 { width: 40%; padding: 4rem 0; display: flex; align-items: center; }
.main .bg2 img { position: relative; z-index: 2; height: 95%; margin-left: -25% }
.slideindex { width: 50%; height: 100%; min-height: 55rem }
#slideindex { width: 100%; height: 100%; }
#slideindex img { width: 100%; min-height: 55rem; height: 100%; object-fit: cover; }

.titolo { font-size: 3.5rem; margin-bottom: 1rem; font-weight: 600 }
.sottotitolo { font-size: 2.5rem; margin-bottom: 1rem; font-weight: 600 }
.prodottiindex { padding: 8rem 0 12rem }
.prodottiindex .prodotti { justify-content: space-between; margin: 6rem auto 0; max-width: 100rem; width: 100% }
.prodottiindex .p { width: 60%; margin: 0 auto }

.prodottihome { padding: 8rem 0 12rem }
.prodottihome .prodotti { flex-wrap: wrap; justify-content: center; margin: 6rem auto 0; max-width: 120rem; width: 100% }
.prodottihome p { width: 60%; margin: 0 auto }

.prodotti .shape { width: 0; transition: all 0.4s ease 0s;
      height: 0;
      border-bottom: 300px solid rgba(255,255,255,0.8);
      border-right: 1000px solid transparent; position: absolute; right: -15rem; bottom: 0; }
.prodotti .box:hover .shape { width: 0;
      height: 0;
      border-bottom: 350px solid rgba(255,88,0,0.9);
      border-right: 1000px solid transparent; position: absolute; }
.prodotti .box:hover .txt { color: #fff }
.prodotti .box { position: relative; overflow: hidden; width: 29.33%; margin: 0 2% 4rem; border-radius: 1rem; box-shadow: 0 10px 10px rgba(0,0,0,0.1);}
.prodotti .box.bigbox { width: 49%; }
.prodotti .box img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.prodotti .box .txt { transition: all 0.4s ease 0s; text-align: left; padding: 5%; width: 100%; position: absolute; bottom: 0; left: 0; }
.prodotti .box .txt .title, .prodotti .box .txt p { position: relative; }
.prodotti .box2 { width: 49%; flex-direction: column; }
.prodotti .box2 .box:first-child { margin-bottom: 4% }
.prodotti .box .txt .title { font-size: 2rem; letter-spacing: 1.2px; margin-bottom: 0.5rem; line-height: 1.1 }

.divisorio { background-color: #ccc; width: 100%; height: 3px; background-repeat: space 5px; }

.magic { padding: 6rem 0; align-items: center; justify-content: space-between; }
.magic .titolo { display: flex; align-items: center; }
.magic .titolo img { width: 7rem; margin-left: 1rem }
.magic .txt { width: 45%; position: relative; }
.magic .txt p { margin: 3rem 0 }
.magic .txt .cat { margin: 2rem 0; }
.magic .txt .cat img { width: 1.5rem; margin-right: 1rem }
.magic .txt .cta { margin-top: 2rem }
.magic .img { width: 50% }

.promo { padding: 3rem 0; height: 35vw; position: relative; }
.promo .titolo { margin-bottom: 3rem; }
#newsindex { position: relative; left: 0; margin-top: 5rem; width: 118% }
#newsindex .my-arrows {position: absolute; bottom: -6rem; width: 100%; z-index: 10; margin: 0 auto; left: 0; right: 0;}
#newsindex .my-arrows button:focus {outline: none;}
#newsindex .my-prev {left: 0rem; }
#newsindex .my-next {position: absolute; left: 3.4rem; transform: rotate(-180deg); top: -1.4rem }
#newsindex .my-prev svg, #newsindex .my-next svg path {fill: #e94e1b; cursor: pointer;}
#newsindex img { width: 95%; }
#newsindex .splide__arrow[disabled] { opacity: 0;}
#newsindex .splide__pagination {width: 100%!important; display: none!important}
#newsindex .splide__pagination__page { display: none; padding: 0;width: 8px;height: 8px;border-radius: 50%;background: #ddd;margin: 4px;cursor: pointer;display: block;}
#newsindex .splide__pagination__page:focus {outline: none;}
#newsindex .splide__pagination__page.is-active {background: #5b9dff;border: 1px solid #5b9dff;width: 9px;height: 9px;}

#slideindex .my-arrows { position: absolute; bottom: 1rem; width: 100%; z-index: 10; margin: 0 auto; left: -3.7rem}
#slideindex .my-arrows button:focus {outline: none;}
#slideindex .my-prev {left: 0rem; }
#slideindex .my-next {position: absolute; left: 3.4rem; transform: rotate(-180deg); top: -1.4rem }
#slideindex .my-prev svg, #slideindex .my-next svg path {fill: #e94e1b; cursor: pointer;}

.aboutus { justify-content: space-between; align-items: center; padding: 8rem 0 }
.aboutus .img { border-radius: 3rem; width: 45% }
.aboutus .txt {width: 50%}
.aboutus .txt .font { font-size: 3rem; font-weight: lighter; letter-spacing: 0; margin: 3rem 0 4rem }
.aboutus .txt p { margin-bottom: 4rem; width: 80% }

.dettagli .aboutus .txt { width: 100%}
.dettagli .aboutus .txt p { margin-bottom: 4rem;}

footer { padding: 4rem 0; background-color: #444; margin-top: 4rem; }
footer .desc { font-size: 1.4rem; font-weight: lighter; line-height: 1.3; letter-spacing: 1.1px }
footer .flex { justify-content: space-between; }
footer .logo { width: 22rem; margin-bottom: 2rem }
footer .cl { width: 22% }
footer .social { width: 2rem; margin: 3rem 6px 0 0 }
footer a { color: #fff; font-size: 1.4rem }
footer a:hover { color: #ff5800 }
footer p { font-size: 1.4rem }
footer p b { font-size: 1.7rem; margin-bottom: 1rem; display: block; }
footer .cont img { width: 2rem; margin-right: 1rem }
footer .cont .wa { margin-left: 1rem }
footer .cont { justify-content: flex-start; margin-bottom: 2rem }
footer .pp { width: 80%; margin-top: 1rem }
footer .sitemap a{ line-height: 2.2 }

.specialfooter .pay { width: 25rem; margin-top: 1rem }
.specialfooter h5 { font-size: 1.6rem; margin-bottom: 1rem }
.specialfooter .cl { width: 40rem; margin: 0 auto }

.credits { background-color: #333; text-align: center; padding: 2rem 0 }
.credits p, .credits a { color: #666; font-size: 1.4rem }

/*chisiamo*/
.mainpage { border-top: 1rem solid #eee }
.breadcrump { font-size: 1.4rem; color: #aaa; margin-top: 3rem; align-items: center; display: flex; justify-content: flex-end; }
.breadcrump a { color: #aaa; margin:0 4px; }
.breadcrump a:last-child { margin-left: 5px; color: #fff; border-radius: 5px; padding: 1px 10px; background-color: #ff5800 }
.mainpage .aboutus { padding-top: 4rem }
.mainpage .aboutus.reverse { flex-direction: row-reverse; }
.mainpage .aboutus.reverse p { width: 100% }

.contact h2 { font-size: 2rem; font-weight: 400 }
.flexx { padding: 4rem 0; justify-content: space-between; align-items: flex-start; }
.form { width: calc(100% - 40%); }
.form input, .form textarea { border:none; margin-bottom: 2rem; border-radius: 0; border-bottom: 1px solid #ccc; color: #111; background-color: rgba(255,255,255,0.8); padding: 1.3rem 0; width: 100%; font-family: 'Montserrat', sans-serif; font-size: 1.8rem;  }
.form input:focus, .form textarea:focus { outline: none; }
.form textarea { min-height: 14rem; }
.form .cta { margin: 5rem auto 2rem }
::-webkit-input-placeholder { /* Edge */color: #444;}
:-ms-input-placeholder { /* Internet Explorer 10-11 */color: #444;}
::placeholder {color: #444;}
.flexx .dati { padding: 3rem 5rem; width: 33rem; border-radius: 2rem 2rem 0 0; border-bottom: 1rem solid #e64f29 }
.flexx .dati .cont { margin: 2rem 0 }
.flexx .dati .cont img { width: 2rem; margin-right: 1rem }
.flexx .dati .cont .wa { margin-left: 1rem }
.flexx .dati .cont { color: #fff; font-size: 1.4rem }

.shop .prodotti { flex-wrap: wrap; margin: 6rem 0 }
.shop .prodotti .box { width: 29.33%; margin: 0 4% 6rem 0; border-radius: 1rem; box-shadow: 0 4px 20px rgba(0,0,0,0.2) }
.shop .prodotti .box img { width: 100%; height: 24vw; margin-bottom: -5px; }
.shop .prodotti .shape { right: -20rem!important }
.shop .aboutus { margin-top: 7rem }

.gallerytxt { justify-content: space-between; margin: 5rem 0 }
.gallerytxt .txt { width: 35% }
.gallerytxt #photoslide { width: 60% }
#photoslide .my-arrows {display: none;}
#photoslide img { width: 100%; }
#photoslide .splide__arrow[disabled] { opacity: 0;}
#photoslide .splide__pagination {width: 100%; margin-top: 1.5rem}
.splide__pagination__page { display: none; padding: 0;width: 8px;height: 8px;border-radius: 50%;background: #ddd;margin: 4px;cursor: pointer;display: block;}
.splide__pagination__page:focus {outline: none;}
.splide__pagination__page.is-active {background: #ff5800;border: 1px solid #ff5800;width: 9px;height: 9px;}

/*.configform .containercheck { margin: 2rem 2rem 0 0; padding-left: 4rem }
.configform .checkmark { border-radius: 0.5rem; height: 3rem; width: 3rem; margin-top: -0.5rem; background-color: transparent; border: 1px solid #e64f29; }
.configform .containercheck .checkmark::after { border:none; }
*/
.configuratore { position: relative; padding: 2rem 0 5rem }
.configuratore .title { justify-content: space-between; align-items: center; justify-content: center; }
.configuratore .title .line { position: absolute; height: 0.8rem; background-color: #eee; width: 100%}
.configuratore .tit { position: relative; width: 90rem; padding: 1rem; text-align: center; letter-spacing: 1.5px; border-left: 1rem solid #fff; border-right: 1rem solid #fff }
.configform { width: 88rem; margin: 4rem auto }
.configform .vox { font-size: 2rem }
.configform .scelta { margin: 1.5rem 1.6rem 0 0.7rem }
.configform .scelta { font-size: 1.6rem }
.configform .row { border-bottom: 2px solid #eee; padding-bottom: 3rem; margin-bottom: 2.5rem }

.configform .row.regalo { position: relative; }
.gift { top: 0; right: 0; position: absolute; display: flex; border-radius: 1rem; padding: 3px 10px 1.5px; align-items: center; }
.gift img { width: 2rem; margin-right: 1rem }
.gift p { font-size: 1.3rem}

#upload-file{
    display: none;
}
.totale { position: relative; justify-content: space-between; border-top: 6px dotted #ccc; padding-top: 3.3rem; margin-top: -2.7rem; background-color: #fff; }
.upload { cursor: pointer; justify-content: center; display: flex; align-items: center; font-size: 1.5rem; padding: 0.5rem 1rem; border-radius: 1rem}
.upload img { width: 2rem; margin-right: 1rem }
.upbutton{ width: 400px; position: relative; }
.upbutton .p { margin-top: 1rem; font-size: 1.3rem; color: #006dd0 }
#upload_foto{ position: absolute; bottom: 30px;}
.tot.o1 { font-size: 2rem }

button.aggiungi { cursor: pointer; opacity: 0.5; border-radius: 1.4rem; width: 100%; position: relative; font-size: 2rem; margin-top: 4rem; display: flex; align-items: center; justify-content: center;}
button.aggiungi img { width: 1.4rem; position: absolute; right: 1.5rem }
button.aggiungi:hover { opacity: 1 }

.dettagli .tab-group:after {content: "";display: table;clear: both;}
.dettagli .tab-group li { display: inline-block; padding: 1rem 2rem 1rem 0; }
.dettagli .tab-group li a { color: #aaa; font-size: 2rem; font-weight: 600; border-bottom: 3px solid; padding-bottom: 0.6rem }
.dettagli .tab-group li a:hover {background: #fff;opacity: 1;}
.dettagli .tab-group .active a { color: #e64f29}  
.dettagli .tab-content > div {display: none;}
.dettagli .tab-content > div:first-child {display: block;}
.dettagli .tab-content { margin-bottom: 10rem }
.dettagli .tab-content .aboutus { margin: 4rem 0 0; padding-bottom: 2rem;}

.popup { padding: 4rem; width: 100%!important }
.popup .blu { align-items: center; font-size: 2rem; flex-wrap: wrap; }
.popup .blu img { width: 3rem; margin-right: 1rem; margin-bottom: 1rem }
.popup .box { margin: 4rem 0 }
.popup .box img { width: 100% ; margin-bottom: 1rem}
.popup .box .title { font-size: 2rem }
.popup .box p { font-size: 1.4rem }

#cart .boxs { width: 65%; }
#cart { padding-bottom: 6rem }
#cart .container { justify-content: space-between; align-items: flex-start; }
#cart .flex.flexcar { justify-content: space-between; align-items: flex-start; }
.boxcart { margin-bottom: 1.5rem; padding: 2rem; background-color: #eee; justify-content: space-between; }
.boxcart .img { width: 15rem; overflow: hidden; min-height: 15rem; }
.boxcart .img img { height: 100%; width: 100%; object-fit: cover; object-position: center;}
.boxcart .desc { margin-left: 1.3rem; flex-direction: column; justify-content: space-between; }
.boxcart .desc p { color: #888; font-size: 1.4rem; line-height: 1.4!important }
.boxcart .desc p.t { color: #444; margin-bottom: 5px; font-size: 1.6rem }
.boxcart .del { color: #888; display: flex; align-items: center; cursor: pointer; margin-top: 1rem;font-size: 1.1rem }
.boxcart .del img { height: 1.2rem; margin-right: 4px}
.boxcart .custom-select { margin: 0; }
.boxcart .select-items div, .boxcart .select-selected { padding: 0.5rem 7rem 0.5rem 2rem }
.boxcart .select-selected::after {top: 1.4rem;border: 0.6rem solid transparent;border-color: #666 transparent transparent transparent;}
.boxcart .last { flex-direction: column; align-items: flex-end; justify-content: space-between; }

.boxprice_discount{ width: 30%; }

.boxprice { background-color: #eee; padding: 2rem; }
.box_discount { background-color: #eee; padding: 2rem; margin-top: 3rem; }
.boxprice .total { font-size: 2rem; font-weight: 600 }
.boxprice .p, .box_discount .p { margin: 2rem 0; justify-content: space-between; font-size: 1.5rem }
.boxprice .p.iva { border-top: 1px solid #ccc; padding-top: 2rem; font-weight: 600 }
.boxprice .cta, .box_discount .cta { width: 100%; font-size: 1.5rem }
.boxprice .small, .box_discount .small { font-size: 1.2rem; }

.box_discount input{ border-style: solid; border-radius: 0; box-shadow: 0; font-size: 1.4rem; padding: 1rem; border-radius: none; border:1px solid #ccc; width: 100%; margin: 3px 0 1rem }

.quantity { align-items: center; margin-top: 1.5rem }
.quantity img { width: 2.5rem; cursor: pointer; }
.quantity span { margin: 0 1rem; font-size: 1.6rem; font-weight: bold; }
.quantity { position: relative; margin: 2rem 0;}
.quantity p { font-size: 2rem }
.quantity .square { width: 85px; background-color: #fff; padding: 0.4rem 0.8rem; display: flex; justify-content: space-between; }
.quantity input { font-family: 'formula', sans-serif;  text-align: center; width: 4rem; margin-bottom: -0.3rem; background-color: transparent; border: none; color: #444; font-size: 1.8rem }
.quantity .imgs { display: flex; flex-direction: column; }
.quantity .imgs button { cursor: pointer; height: 1rem; width: 1rem; background-size: cover; margin: 0.4rem }
.quantity input::-webkit-input-placeholder { /* Edge */color: #111;}
.quantity input:-ms-input-placeholder { /* Internet Explorer 10-11 */color: #111;}
.quantity input::placeholder {color: #111;}
#cart .quantity { margin: 0;}
.narticoli { font-size: 1.8rem; letter-spacing: 1px; margin-left: 1rem }

.quantity2 { align-items: center;}
.quantity2 img { width: 2.5rem; cursor: pointer; }
.quantity2 span { margin: 0 1rem; font-size: 1.6rem; font-weight: bold; }
.quantity2 { position: relative; margin: 0 1rem;}
.quantity2 p { font-size: 2rem }
.quantity2 .square { width: 85px; background-color: #fff; padding: 0.4rem 0.8rem; display: flex; justify-content: space-between; }
.quantity2 input { font-family: 'formula', sans-serif;  text-align: center; width: 4rem; margin-bottom: -0.3rem; background-color: transparent; border: none; color: #444; font-size: 1.8rem }
.quantity2 .imgs { display: flex; flex-direction: column; }
.quantity2 .imgs button { cursor: pointer; height: 1rem; width: 1rem; background-size: cover; margin: 0.4rem }
.quantity2 input::-webkit-input-placeholder { /* Edge */color: #111;}
.quantity2 input:-ms-input-placeholder { /* Internet Explorer 10-11 */color: #111;}
.quantity2 input::placeholder {color: #111;}



/*login*/
.boxlogin .tab-group .tab img { width: 2.2rem; vertical-align: top; margin-right: 0.1rem; margin-top: -0.1rem }
.boxlogin .tab-group:after {content: "";display: table;clear: both;}
.boxlogin .tab-group { display: flex; }
.boxlogin .tab-group li { /*width: 33%;*/ width: 50%; border:1px solid #fff; text-align: center;}
.boxlogin .tab-group li a { width: 100%; display: block; padding: 2rem; font-size: 1.6rem; line-height: 1.2; background-color: #ccc; }
.boxlogin .tab-group li a:hover {background: #ff5800;opacity: 1; color: #fff; }
.boxlogin .tab-group .active a {background: #ff5800; opacity: 1; color: #fff; }
.boxlogin .tab-content > div {display: none;}
.boxlogin .tab-content > div:first-child {display: block;}
.boxlogin .tab-content { margin-top: 3rem }
.boxlogin .tab-content .cta { margin: 3rem auto 0; background-color: #111; display: block; width: 22rem; font-size: 1.8rem; padding: 1.8rem 3rem }

.boxlogin { min-height: 80vh; position: relative; padding: 6rem 0}
.boxlogin .formlogin { transition: all 0.3s ease 0s; width: 90rem; background-color: #fff; padding: 3rem; margin: 0 auto; box-shadow: 0 0 20px rgba(0,0,0,0.1) }
.boxlogin h3 { text-align: center; font-size: 1.8rem; padding: 2rem 0; font-weight: 600; letter-spacing: 1.8px }
.boxlogin .cta { width: 100% }
.boxlogin .cta:hover { background-color: #ff5800}
.boxlogin input, #modifica-dati input, .modifica-dati input { border-style: solid; border-radius: 0; box-shadow: 0; font-size: 1.4rem; padding: 1rem; border-radius: none; border:1px solid #ccc; width: 100%; margin: 3px 0 1rem }
#modifica-dati input { border: 1px solid #ccc!important }
.modifica-dati input { border: 1px solid #ccc!important }

#profilo .title, #storico .title { font-weight: 600; font-size: 3rem }
#profilo { padding: 0rem 0 6rem }
#profilo .box { margin-top: 3rem;}
#profilo .canc { font-size: 1.1rem; margin-top: 1rem; display: inline-block; border-radius: 0.3rem }
#profilo p { line-height: 1.8 }
#profilo p span { color: #aaa; }
#profilo .titlesmall { padding: 30px 0 10px; }
#profilo .titlesmall:first-child { padding-top: 0 }
#storico { padding-top: 4rem }
.btn-chiudi { padding: 10px 20px; border-radius: 5px; border:none; background-color: #333; color: #fff; margin-top: 20px }
.fancybox-content { border-radius: 5px; background-color: #fff!important;}
.fancybox-navigation .fancybox-button { display: none; }
#modifica-dati .title { font-size: 3rem; margin-bottom: 3rem; font-weight: 600 }
#modifica-dati .cta { margin-top: 1rem }
#storico { margin: 2rem 0 0; }
.storicoordini .ordine { margin-top: 1rem; }
.storicoordini .boxcart { margin: 2rem 2% 0 0; width: 31.33% }
.storicoordini .txtordine { width: 100%; font-size: 1.5rem; border-top: 1px solid #ccc; padding-top: 2rem; margin-top: 2rem }
.storicoordini.flex { display: flex; flex-wrap: wrap; margin-bottom: 4rem }

#step { min-height: 90vh; padding: 8rem 0;  }
#step .container { max-width: 100rem }
#step .steps { align-items: center; justify-content: center; }
#step .steps .circle { position: relative; font-size: 1.2rem; text-align: center; width: 5rem; height: 5rem; border-radius: 50%; border:1px solid #ccc; text-align: center;display: flex; align-items: center; justify-content: center; }
#step .steps .circle.active { background-color: #ff5800; border-color: #ff5800; color: #fff!important }
#step .steps .circle span { position: absolute; color: #444; top: 5.8rem; font-size: 1rem }
#step .steps .span { height: 1px; background-color: #ccc; min-width: 10rem; margin: 0 1rem; }
#step .boxlogin { position: inherit; padding-top: 10rem; min-height: auto }
#step .page { background-color: #fff; justify-content: space-between; align-items: flex-start; padding: 4rem; margin-top: 8rem }
#step .page .boxprice { box-shadow: 0 0 10px rgba(0,0,0,0.2); width: 40% }
#step .page .datisx { width: 53% }
#step .page .datisx .input input { border-radius: 0; margin-bottom: 1rem; width: 100%; font-size: 1.3rem; padding: 0.5rem 0.8rem;border: 1px solid #ccc; border-radius: none; }
#step .page .datisx .input p {font-size: 1.3rem; margin-bottom: 4px }
.save { font-size: 1.3rem; padding: 1rem 2rem; margin-top: 1rem }

#step .modalita { margin-bottom: 4rem}
#step .modalita p { font-size: 1.4rem }
#step .modalita img { width: 16rem; margin: 1.5rem 0 }
#step .modalita form { margin-bottom: 2rem }
#step .modalita .p { font-size: 1.4rem; line-height: 1.6; margin-top: 1rem }
#step .modalita .canc { margin-bottom: 1rem }
#step .done img { width: 4rem }
#step .done p { margin: 3rem 0 }

.quantita { text-align: center; background-color: #ddd; padding: 2rem; position: relative; font-size: 2rem }
.quantita img { width: 1rem; position: absolute; background-color: #eee; height: 1rem }

.cartheader { background-color: #eee; justify-content: center; }
.cartheader img { position: relative; }

#errorpage { padding: 5rem 0 }
#errorpage h1 { font-size: 10rem }
#errorpage h2 { font-size: 4rem }
#errorpage img { max-width:30rem; width: 90%; margin: 5rem 0 }

select {
  margin: 1.5rem 0 0;
  color: #444;
  width: 100%;
  padding: 1rem 3.5rem 1rem 1rem;
  font-size: 1.6rem;
  border-radius: 5px;
  background-color: #fff; border: 1px solid #e64f29;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url(../img/select.png) 98.5% / 13px no-repeat #fff;
  font-family: 'Poppins', sans-serif;
  letter-spacing: 0.5px;
}

@media (max-width: 1500px) {
html { font-size: 9.5px }
}

@media (max-width: 1200px) {
.promo { height: 38vw }
header .logo { width: 24rem }
.main .bg1 .txt { margin-right: 10%; width: 50rem }
.main .bg1 .txt .title { font-size: 3vw }
}

@media (max-width: 1024px) {
html { font-size: 9px }
.menu { display: none; }
header .logo {position: relative;}
.preheader p:first-child { display: none; }
.preheader { justify-content: flex-end; }
.menuresponsive { display: block; position: absolute; top: 4.3rem; right: 2rem }
header .logo { width: 28rem }
.main .bg1 .txt { width: 65% }
header .info { right: 12rem }
header .info .user { display: none; }
.menuresponsive img { width: 5rem }
#mySidenav { display: block; z-index: 1000; }
.sidenav {height: 100%;width: 0;position: fixed;z-index: 1;top: 0;right: 0; overflow-x: hidden; transition: 0.5s; }
.sidenav a {text-decoration: none;font-size: 1.2rem; color: #fff; display: block;transition: 0.3s;}
.sidenav a:hover {color: #f1f1f1;}
.sidenav .closebtn {position: absolute; top: 0rem; color: #fcfcf5; right: 2rem;font-size: 5.5rem;margin-left: 5rem;}
.sidenav .logonav { width: 20rem; padding-bottom: 2rem }
.sidenav .flexnav { display: flex; }
.sidenav .flexnav .bgcolor { position: fixed; background-color: rgba(255,88,0,0.8); width: 20%; min-height: 100vh; height: 100% }
.sidenav .flexnav .bgblack { background-color: #00203d; margin-left: 20%; width: 80%; min-height: 100vh; height: 100%; padding: 2rem 2rem 10rem; }
.sidenav .flexnav .bgblack .divblock { color: #fcfcf5; display: block; padding: 2rem 0; font-weight: lighter; border-bottom: 2px solid rgba(252,252,252,0.2) }
.sidenav .flexnav .bgblack .divblock:first-child { border-top: 2px solid rgba(252,252,252,0.2) }
.sidenav .flexnav .bgblack .divblock:hover { border-bottom: 2px solid #ffa60d }
.sidenav .log { width: 25rem; margin-bottom: 2rem }
.sidenav .profilo img { width: 2.4rem; margin-right: 1rem }
.titolo { line-height: 1.2 }

.prodotti .shape { display: none; }
.prodotti .box { overflow: visible; }
.prodotti .box .txt { background-color: rgba(230,79,40,0.8); border-radius: 0 5rem 0 0; color: #fff; box-shadow: 0 0 10px rgba(0,0,0,0.3) }

footer .cl { width: 90%; max-width: 50rem; margin: 0 auto 4rem; text-align: center; }
footer .flex { flex-wrap: wrap; justify-content: center; }
footer p b { margin-bottom: 0 }
.credits { padding: 2rem 20% }
header .info .cart .circle .number { margin-top: 0 }
header { align-items: center; }
header .logo { left: 6%; top: inherit; }

.flexx { display: block; padding-bottom: 0}
.form { width: 100% }
.flexx .dati { margin: 5rem auto 10rem; max-width: 35rem; width: 100%; border-bottom: 0; border-radius: 2rem}

.configform { width: 100% }
.configuratore .title .line { display: none; }
.configuratore .tit { width: 100%; border:none; }
.button.flex { flex-wrap: wrap; }

.shop .prodotti { justify-content: space-between; }
.shop .prodotti .box { width: 48%; margin: 0 0 4rem }
.shop .prodotti .box img { height: 30vw }
.prodotti .box .txt { bottom: -2px }
.mainpage .aboutus { padding-top: 0 }

.prodotti .box { width: 45.33%; }
#slideindex .my-next { top: -1.55rem }

.boxlogin .formlogin { width: 100% }
.storicoordini .boxcart { width: 48% }
#cart { margin-top: 4rem }
}

@media (max-width: 768px) {
html { font-size: 8.5px }
.aboutus { flex-wrap: wrap; flex-direction: column-reverse; align-items: center; text-align: center; margin-top: 0 }
.mainpage .aboutus { margin-top: 5rem }
.aboutus .img { width: 90%; max-width: 50rem; margin: 0 auto }
.aboutus .txt { width: 100%; margin-bottom: 5rem }
.aboutus .txt p {width: 100%}
#newsindex { width: 100%; position: relative; top: inherit; }
.promo { height: auto; }
.prodottiindex .p { width: 100%; margin-top: 2rem }
.prodottihome p { width: 100%; margin-top: 2rem }

.magic { display: block; text-align: center; }
.magic .txt { width: 100% }
.magic .txt .flex { justify-content: center; }
.magic .img { width: 90%; max-width: 50rem }

.promo .titolo { text-align: center; }
.magic .txt img { display: block; }
.magic .txt .titolo.flex { display: block; text-align: center; }
.magic .txt .titolo.flex img { margin: 3rem auto 0 }

.main { display: block; height: auto; }
.main .bg1 { width: 100%; padding: 6rem 0; text-align: center; }
.main .bg1 .txt { width: 80%; margin: 0 }
.main .slideindex{ width: 100%; }
.mainpage .aboutus.reverse { flex-direction: column-reverse; }
.main .bg1 .txt .title { font-size: 3.5rem }
.main .ns { bottom: 20rem; width: 80% }
.slideindex { min-height: 100% }
#slideindex .my-next { left: 0; right: 0; margin: 0 auto; top: inherit; bottom: 1rem }
#slideindex .my-prev { display: none; }
#slideindex .my-arrows { left: inherit; }
#slideindex img { min-height: auto }

.tab-group { text-align: center; }
.gallerytxt { display: block; }
.gallerytxt .txt { width: 100%; }
.gallerytxt #photoslide { width: 100%; margin-top: 3rem }

.prodotti .box { width: 100%; max-width: 50rem }

#newsindex .my-arrows { bottom: -8rem; display: none; }

.boxlogin .tab-group li a { min-height: 8rem; display: flex;align-items: center; justify-content: center; }

#cart .boxs { width: 100% }
#cart .flex.flexcar { display: block; }
.boxprice_discount{ width: 100%; }
.boxprice, .box_discount { width: 100%; margin-top: 3rem }

#step .steps .span { display: none; }
#step .steps .circle { margin: 0 4% }
#step .page { display: block; }
#step .page .datisx { width: 100% }
#step .page .boxprice { width: 100%; margin-top: 1rem }
#step .page { padding: 1rem }
.prodottihome { padding-bottom: 5rem }
.containerpromo {width: 100%; padding: 0}
.txtmain { margin-top: 4rem }

.dettagli .tab-group { text-align: left; }
.dettagli .tab-content .aboutus { text-align: left; }
}

@media (max-width: 600px) {
.prodottiindex .prodotti { display: block; }
.prodottiindex .box2 { display: block; width: 100% }
.prodottiindex .prodotti .box { display: block; width: 100%; margin-bottom: 2rem }
.prodottiindex .box .txt { bottom: 3px }
.prodottiindex { padding-bottom: 6rem }

.prodottihome { padding-bottom: 4rem }
.titolo, .main .bg1 .txt .title { font-size: 2.5rem }
.totale { flex-wrap: wrap; justify-content: flex-end; }
.upbutton { width: 100%; }
.tot.o1 { width: 100%; margin-top: 2rem; text-align: right; }
.shop .prodotti .box { width: 100% }
.shop .prodotti .box img { height: auto; }
.main .ns { display: none;}

#errorpage h1 { font-size: 8rem }
#errorpage h2 { font-size: 3rem }
.storicoordini .boxcart { width: 100%; margin: 2rem 0 0 }

}

@media (max-width: 460px) {
header .logo { width: 52vw }
button.aggiungi { font-size: 1.7rem }
.gift { position: relative; margin-top: 2rem; width: auto; background-color: #fff; padding: 0; color: #00203d }
.breadcrump { margin-bottom: 4rem }
.boxlogin .tab-group li a { width: 100%; min-height: auto; padding: 1.5rem 0; margin-bottom: 5px }
.boxlogin .tab-group li { width: 100% }
.boxlogin .tab-group { display: block; }
.boxlogin { padding: 0 0 4rem; min-height: auto }
#step .steps .circle { margin: 0 1rem }
}

/*style check box*/
.containercheck { text-align: left;
  margin-top: 3rem; font-size: 1.4rem;
  display: block;
  position: relative;
  padding-left: 3rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.containercheck input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: -1px;
  left: 0;
  height: 2rem;
  width: 2rem;
  background-color: #ccc;
  border-radius: 0.2rem;
}

/* On mouse-over, add a grey background color */
.containercheck:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.containercheck input:checked ~ .checkmark {
  background-color: #ff5800;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.containercheck input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.containercheck .checkmark:after {
  left: 0.6rem;
  top: 0.2rem;
  width: 0.5rem;
  height: 1rem;
  border: solid white;
  border-width: 0 0.3rem 0.3rem 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}


[type="radio"]:checked,
[type="radio"]:not(:checked),
[type="checkbox"]:checked,
[type="checkbox"]:not(:checked) {
    position: absolute;
    left: -9999px;
}
[type="radio"]:checked + label,
[type="radio"]:not(:checked) + label,
[type="checkbox"]:checked + label,
[type="checkbox"]:not(:checked) + label
{
    position: relative;
    padding-left: 28px;
    cursor: pointer;
    line-height: 23px;
    display: inline-block;
    color: #444; font-size: 1.6rem;
}
[type="radio"]:checked + label:before,
[type="radio"]:not(:checked) + label:before,
[type="checkbox"]:checked + label:before,
[type="checkbox"]:not(:checked) + label:before {
    content: '';
    position: absolute;
    left: -7px;
    top: -3px;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 6px;
    background: #fff;
    border: 1px solid #e64f29;
}
[type="radio"]:checked + label:after,
[type="radio"]:not(:checked) + label:after,
[type="checkbox"]:checked + label:after,
[type="checkbox"]:not(:checked) + label:after {
    content: '';
    width: 26px;
    height: 26px;
    background: #e64f29;
    position: absolute;
    top: -2px;
    left: -6px;
    border-radius: 4px;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
[type="radio"]:not(:checked) + label:after,
[type="checkbox"]:not(:checked) + label:after {
    opacity: 0;
}
[type="radio"]:checked + label:after,
[type="checkbox"]:checked + label:after {
    opacity: 1;
}

/* loading */
.lds-ring,
.lds-ring div {
  box-sizing: border-box; color: #e64f29;
}
.lds-ring {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 64px;
  height: 64px;
  margin: 8px;
  border: 8px solid currentColor;
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: currentColor transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
  animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
  animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
  animation-delay: -0.15s;
}
@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}