@font-face {
    font-family: 'eurostile';
    src: url('../font/eurostile.woff') format('woff');}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {/* font-size: 62.5%*/ font-size: 10px }
body { font-family: 'Montserrat', sans-serif; color: #444; background-color: #E3E7ED; letter-spacing: 1px;}
.body { background-color: #fff; max-width: 400rem; margin: 0 auto; overflow: hidden; }
ul, li { list-style: none; }
h1, h2, h3, h4, h5 { letter-spacing: 1px }
a { font-size: 1.4rem; text-decoration: none; color: #444; outline: none }
a:focus, input:focus, textarea:focus, select:focus {outline: none!important }
p { line-height: 1.5; font-size: 1.4rem; letter-spacing: 1px; font-weight: 400 }
.container { max-width: 164rem; margin: 0 auto; padding: 0 2%; width: 100%; }
button { letter-spacing: 0.4px; cursor: pointer; background-color: transparent; border: none; font-family: 'Montserrat', sans-serif; }
input, textarea, select { letter-spacing: 0.4px ; font-family: 'Montserrat', sans-serif; }
.center { text-align: center; }
.clear { clear: both; }
.flex { display: flex; flex-wrap: wrap; }
.clearfix::after { content:""; display: table; clear: both; }
.upper { text-transform: uppercase; }
.fff { color: #fff }
.bggray { background-color: #2B2D2D }
.bgfff { background-color: #fff; }
.bgblu { background-color: #004784 }
.blu { color: #004784 }
.pink { color: #ED1B3D }
.yel { color: #e1a700 }
.bgyel { background-color: #e1a700 }
.bgeee { background-color: #eee }
.pr { position: relative; z-index: 1 }
::-webkit-input-placeholder { /* Edge */color: #aaa;opacity: 1;}
:-ms-input-placeholder { /* Internet Explorer 10-11 */color: #aaa;opacity: 1;}
::placeholder {color: #aaa;opacity: 1;}
.lblu { color: #84A5B8 }
.bglblu { background-color: #84A5B8 }
.font { font-family: 'eurostile', sans-serif; }

.light { font-weight: 300!important }
.bold, b { font-weight: 600!important }
.p16 { font-size: 1.6rem }

.mt6 { margin-top:6rem }

.formmex { position: absolute; top: 40%;
background: #fff;
padding: 2rem;
border-radius: 1rem;
left: 0;
right: 0;
text-align: center;
width: 50rem;
margin: 0 auto;
box-shadow: 0 0 10px rgba(0,0,0,0.2); }

.errorpage { min-height: 100vh; flex-direction: column; align-items: center; justify-content: center; }
.errorpage .txt { margin-top: 10rem }
.bigerror { font-size: 20rem }

/*TOP BUTTON*/
.div-back-to-top { max-width: 400rem; width: 100%; left: 0; right: 0; bottom: 0; margin: 0 auto; position: fixed; z-index: 200; }
.back-to-top { text-align: center; position: absolute; z-index: 200; bottom: 0.8rem; right: 0.5rem; display: inline-block; padding: 1.2rem 1.5rem 0.8rem; margin: 1em; background-color: #003C79;}
.back-to-top img { width: 2.1rem; }
.back-to-top:hover {cursor: pointer; }

.shadow { box-shadow: 0 3px 20px rgba(0,0,0,0.17)}
.shadow2 {box-shadow: 0 5px 15px rgba(0,0,0,0.4);}

.open-close-box { position: relative; padding-top: 1rem }
.open-close-box .continua { padding:3px 0 0 4rem }
.open-close-box img { width: 3rem!important; position: relative; margin-top: -3px; }
.open-close-box span { position: absolute; top: 1rem; width: 100%; cursor: pointer; }
.open-close-box .text_open { padding-top: 1.5rem }
.bannerseo { background-color: #f1f3f6; padding: 6rem 0; margin-top: .8rem; }

header { transition: .3s; border-bottom: 1px solid rgba(255,255,255,0.5); padding: 1rem 0; position: absolute; top: 0; left: 0; width: 100%; z-index: 5; max-width: 400rem;margin: 0 auto;right: 0;}
header .dropdown-content { background-color: #f1f3f6; display: none; position: absolute; min-width: 26rem; z-index: 3; left: -2rem; padding: 4.4rem 0 0;}
header .dropdown-content a { color: #003C79; background-color: #f1f3f6; display: flex; align-items: center; padding: 1rem 2rem; }
header .dropdown-content a:hover { background-color: #E3E8EF }
header .logo { background-image: url(../img/logoRENA_fff.svg); background-size: contain; background-repeat: no-repeat; height: 6rem; width: 18rem; position: absolute; left: 0; right: 0; margin: 0 auto; top: 2.6rem; }
header .drop { background-image: url(../img/downfff.svg); }
header .dropbg { height: 1rem; width: 1rem; margin: 5px 0 0 5px; background-size: contain; background-repeat: no-repeat; }
header li { text-transform: uppercase; font-size: 1.4rem; letter-spacing: 1px }
header a { color: #fff; font-size: 1.4rem; }
.header_desk { align-items: center; padding: 2rem 3rem; justify-content: space-between;}
.header_desk .menuresponsive { cursor: pointer; margin-left: 0!important}
.header_desk .menuresponsive .img { background-image: url(../img/menu.svg); width: 2.8rem; height: 2.8rem; background-repeat: no-repeat; background-size: contain; background-position: center; }
.header_desk .menuresponsive:hover { }
.header_desk .menu { align-items: center; }
.header_desk .cl { display: flex; align-items: center; width: calc(57% - 20rem) }
.header_desk .cl2 { justify-content: flex-end; }
.header_desk .cl li {margin-left: 3rem}
.header_desk .lang .flag { width: 1.8rem; margin-left: 0.5rem }
.header_desk .cl li.lang { margin-left: 3rem; flex-direction: column; justify-content: flex-start;}
.header_desk .lang .line { height: 1px; background-color: #fff; width: 100%; margin: 4px 0 }
.lingua { opacity: 0.5; display: flex; align-items: center; }
.lingua.active { opacity: 1 }
.lingua:hover { opacity: 1 }
.dropdown { position: relative; cursor: pointer; color: #003C79; }
.dropdown .dropbtn { display: flex; align-items: center; }
.dropdown .down { width: 1rem }
.dropdown:hover .dropdown-content {display: block;}
header:hover { background-color: #F1F3F6 }
header:hover .logo { background-image: url(../img/logoRENA.svg);}
header:hover .menuresponsive .img { background-image: url(../img/menu_hover.svg);}
header:hover li a { color: #003C79 }
header:hover .lang a { color: #444777 }
header:hover .lang .line { background-color: #444 }
header:hover .drop { background-image: url(../img/down.svg); }

.sticky { position: fixed; top: 0; right: 0; z-index: 5; width: 100% }
.sticky { background-color: #F1F3F6 }
.sticky .logo { background-image: url(../img/logoRENA.svg);}
.sticky .menuresponsive .img { background-image: url(../img/menu_hover.svg);}
.sticky li a { color: #003C79 }
.sticky .lang a { color: #444777 }
.sticky .lang .line { background-color: #444 }
.sticky .drop { background-image: url(../img/down.svg); }

#mySidenav { display: block; z-index: 1000; }
.sidenav { height: 100%; width: 0; position: fixed; z-index: 1000; top: 0; left: 0; overflow-x: hidden; transition: 0.2s; }
.sidenav a { margin-bottom: 1.2rem; font-weight: 400; text-transform: uppercase; font-size: 1.5rem; display: block; color: #fff}
.sidenav a:hover { color: #84A5B8 }
.sidenav .category a { font-weight: 600 }
.sidenav .sottovoce a { margin-left: 2rem }
.sidenav .line { margin: 2rem 0; width: 100%; height: 2px; background-color: #fff; opacity: 0.27 }
.sidenav .closebtn { text-align: center; position: absolute; top: 4.5rem; left: 3.3rem; margin: 0 auto}
.sidenav .logonav { width: 20rem; padding-bottom: 2rem }
.sidenav .flexnav { display: flex; }
.sidenav .flexnav .bgblu { box-shadow: 0 0 20px rgba(0,0,0,0.4); width: 45rem; min-height: 100vh; height: 100%; padding: 12rem 6rem }

.pagebg { position: relative; height: 100vh; width: 100%; display: flex; align-items: center; flex-direction: column; justify-content: flex-end; }
.pagebg .bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.pagebg .txt { margin-bottom: 5rem; text-align: center; position: relative; z-index: 2 }
.pagebg .txt .logo { width: 20rem; margin-top: 2rem }
.pagebg .bggra { position: absolute; top: 0; left: 0; width: 100%; z-index: 1; height: 100vh;
background: rgb(0,0,0); background: linear-gradient(90deg, rgba(0,0,0,0.26) 0%, rgba(0,0,0,0) 100%);  }
.pagebg .txt .t1 {text-shadow: 0 0 10px rgba(0,0,0,0.5)}

.pagebg .bggrabottom { position: absolute; top: 0; left: 0; width: 100%; z-index: 1; height: 100vh;
background: rgb(0,0,0); background: linear-gradient(0deg, rgba(0,0,0,0.60) 0%, rgba(0,0,0,0) 100%);  }

.pagebg.shortbg { height:auto; padding-top:15rem }
.pagebg.shortbg .bggrabottom { height:100%; opacity:.5 }

.cert-box { margin-bottom: 4rem; display:flex; flex-wrap:wrap; justify-content: center; gap:4rem }
.cert-box .box { margin-bottom: 4rem; max-width: 40rem; width: 100%; display:flex; flex-direction: column; justify-content:space-between; }
.cert-box .box img { max-width:40rem; }
.cert-box .box .txt { margin:2rem 0 }

.sec1 { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.sec1 .img { width: 50%; height: 100%; object-position: center; object-fit: cover; position: absolute; top: 0; left: 0 }
.sec1 .txt { width: 50%; margin-left: 50%; padding: 6rem 12rem; }
.sec1 .txt .t2, .sec1 .txt .t3 { margin-bottom: 2rem }
.sec1 .txt .cta { margin-top: 2.5rem }
.sec1.rev .img { left: inherit; right: 0 }
.sec1.rev .txt { margin-left: 0; margin-right: 50% }
.sec1.decoline .txt { padding-top: 20rem; padding-bottom: 20rem; }
.deco { background-image: url(../img/deco.png); background-size: contain; height: 11rem; z-index: 2; position: relative;}
.sec1.decoline .deco { position: absolute; top: 0; left: 0; width: calc(50% - 1rem); }
.sec1.decoline .deco.bt { top: inherit; bottom: 0 }
/*.sec1.decoline .deco { position: absolute; opacity: 0.9; bottom: 1rem; left: 1rem; width: calc(50% - 2rem) }
.sec1.decoline .deco.top { bottom: inherit; top: 1rem }
*/
.newsletter .box { padding: 12rem 5rem }
.newsletter .box p { margin: 1.5rem 0 3rem }
.newsletter .box form { justify-content: center; }
.newsletter .box form input { min-width: 36rem; border: 0; background-color: rgba(255,255,255,0.3); font-size: 1.4rem; padding: 1.4rem }
.newsletter .box form input::-webkit-input-placeholder { /* Edge */color: #fff; opacity: 1;}
.newsletter .box form input:-ms-input-placeholder { /* Internet Explorer 10-11 */color: #fff; opacity: 1;}
.newsletter .box form input::placeholder {color: #fff; opacity: 1;}

.t1 { font-size: 3.5rem; font-weight: 300; letter-spacing: 0 }
.t2 { font-size: 2.4rem; text-transform: uppercase; font-weight: 600; letter-spacing: 4px }
.t3 { font-size: 1.8rem; font-weight: 400; text-transform: uppercase; letter-spacing: 2.5px}
.cta { font-size: 1.3rem; text-transform: uppercase; font-weight: 500; padding: 1.2rem 2rem; display: inline-block; }
.sha { box-shadow: 0 0 20px rgba(0,35,54,0.17); }
.cta.bgblu:hover { background-color: #003E72 }

footer { background-color: #f1f3f6; padding: 5rem 0; }
footer .flex { justify-content: space-between; }
footer .cl { width: 25%; }
footer .cl p, footer .cl a { color: #004784; font-size: 1.4rem; line-height: 1.8 }
footer .cl h3 { font-weight: 400; font-size: 1.4rem; margin-bottom: 1rem }
footer .cl.center img { margin-top: .6rem }
footer .cl.logo img { width: 20rem; }
footer .credits { border-top: 1px solid rgba(255,255,255,0.2); padding: 3rem 0 }
.credits { padding: 2rem 0 }
.credits p, .credits a { font-size: 1.4rem; color: #004784 }

footer .cl a:hover, .credits a:hover { color: #84a5b8 }
footer .social img { margin: 3px }

/*main*/
.slideindex { position: relative; height: 100vh; overflow: hidden; }
.slidehome .splide__slide img { height: 100%; position: absolute; top: 0; right: 0; width: 100%; object-fit: cover; object-position: center; }
.slidehome .splide__slide { display: flex; align-items: center; justify-content: center; }
.slidehome .splide__slide, .slidehome .splide__list, .slidehome .splide__track, .slidehome { height: 100% }
.slideindex .txt { z-index: 1; position: relative; color: #fff; max-width: 42rem; width: 90%; background-color: rgba(132,165,184,.85); padding: 6rem 4rem}
.slideindex .txt .t4 { font-size: 2rem; font-weight: 400 }
.slideindex .txt .margin { margin: 1.5rem 0;  }
.slidehome .my-arrows {position: absolute; top: 48%; width: 100%; height: 2rem; z-index: 2; right: 0; left: 0; margin: 0 auto }
.slidehome .my-arrows button:focus {outline: none;}
.slidehome .my-arrows button { height: 5.5rem; width: 7.4rem }
.slidehome button.my-prev { background-image: url(../img/arrow_slide_prev.svg); background-repeat: no-repeat; opacity: 0.5!important }
.slidehome button.my-next { background-image: url(../img/arrow_slide.svg); position: absolute; right: 0 }
.slidehome .my-prev svg, .slidehome .my-next svg { display: none; }
.slidehome .my-prev svg, .slidegen .my-next svg path {fill:#5B3838; cursor: pointer;}
#slidehome .splide__pagination { display: none; }

.space { display: none; }

.blocktxt { padding: 7rem 0}
.blocktxt .title { width: 28%; text-align: right; }
.blocktxt .title .i { height: 5rem; margin-top: 2rem }
.blocktxt .txt { width: 70%; border-left: 2px solid rgba(255,255,255,0.3); padding-left: 3rem; margin-left: 2%}
.blocktxt.bgfff .txt { border-left: 2px solid #85A5B7 }
.blocktxt.bgfff { background-color: #F1F3F6 }

.tab-group:after {content: "";display: table;clear: both;}
.tab-group { display: flex; justify-content: space-between; }
.tab-group li { width: 100%; text-align: center; margin-left: 1rem }
.tab-group li a:hover {opacity: 0.8;}
.tab-group .active a {opacity: 1}
.tab-content > div {display: none;}
.tab-content > div:first-child {display: block;}
.tab-content { margin: 3rem 0 0 1rem }
.description .tab-content .cta { margin: 3rem auto 0; }
.tab-content ul { margin: 1rem 0 0 1.5rem; }
.tab-content li { list-style: disc; }
.formlogin { justify-content: space-between; max-width: 100rem; width: 100%; margin: 6rem auto 8rem }
.formlogin .tab-group { width: 32.5%; flex-direction: column; justify-content: flex-start; }
.formlogin .tab-content { text-align: left; width: 64%; margin: -.7rem 0 0 }
.tab-group li { margin: 0 0 1rem; text-align: right; }
.tab-group li a { font-size: 1.8rem; opacity: 0.4; display: block; background-color: transparent; border-bottom: 1px solid; padding: 0 0 1rem; margin-bottom: 0 }
.tab-group li.active a { opacity: 1 }
.description { padding: 5rem 0 }

.sectxt { width: 90%; margin: 0 auto; padding: 6rem 0; max-width: 50rem }
.botanic .sec1 { min-height: 55vh }

.packaging { padding: 6rem 0 10rem }
.packaging .content { position: relative; max-width: 65rem; margin: 0 auto; width: 100%; }
.packaging .content .t3 { margin: 3rem 0 2rem }
.packaging .content .title p { width: 80%; margin: 2rem auto 0 }
.packaging .bottle { width: 38rem; position: absolute; left: -38rem; bottom: -4rem }
.packaging .tappo { position: relative; }
.packaging .t3, .packaging p { position: relative; z-index: 1 }
.packaging .tappo img { position: absolute; right: -16rem; bottom: -4.5rem; max-width: 24rem; width: 100%  }
.etichettatura { background-color: #f1f3f6; padding: 6rem 0 }
.etichettatura .tabs { justify-content: space-between; padding: 5rem 8rem 1rem }
.etichettatura .tabs .tab { max-width: 78rem; width: 100%; margin: 0 auto; border: 2px solid #E5E7EA; position: relative; padding: 4rem 6rem }
.etichettatura .tabs .tab img { width: 9rem; position: absolute; transform: translate(-50%,-50%); left: 0; top: 50% }
.etichettatura .tabs .tab .row { border-bottom: 2px solid #E5E7EA; padding-bottom: 1.4rem; margin-bottom: 1.4rem }
.etichettatura .tabs .tab .row:last-child { border-bottom: 0; padding-bottom: 0; margin-bottom: 0 }
.etichettatura .tabs .tab .row p { margin: 4px 0 }

.igin { justify-content: center; margin: 2rem 0 4rem; gap:2%; align-items:stretch; }
.igin .ginbox { margin: 3rem 0; width: 31.33%; display:flex; flex-direction:column; align-items: center; justify-content:space-between; }
.igin .ginbox .bigt { font-weight: 500; font-size: 2.6rem; margin: 2.5rem 0 3rem }
.igin .ginbox img { width: 100% }
.igin .ginbox .cta { margin-top:3rem }
.igin .ginbox .bigt.price { margin-bottom:0 }
.bgpink { background-color: #E8314D }
.bgyellow { background-color: #efa800 }
.cta.bgpink:hover { background-color: #D9203C }
.flex-space { display:flex; align-items:space-between; justify-content: center; flex-direction:column; }

.pagedett { overflow: hidden; position: relative; height: 100vh; background-color: red; flex-direction: column; justify-content: center; align-items: center; }
.pagedett .btl { width: 18rem; object-fit: cover; margin-top: 10rem; position: relative; z-index: 1 }
.bggrablu { position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
  background: rgb(255,255,255); background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(132,165,184,1) 100%);  }
.bggrapink { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgb(255,255,255);
background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(229,52,80,1) 100%); }
.pagedett .shape1 { position: absolute; top: 30%; left: -3rem; z-index: 2; width: 30rem; }
.pagedett .shape2 { position: absolute; top: 20%; right: -4rem; z-index: 2; width: 35rem; }

.cocktailpage { margin: 6rem 0; position: relative; }
.cocktailpage .gin1 { width: 30rem; position: absolute; top: 0; left: 0 }
.cocktailpage .gin2 { width: 30rem; position: absolute; top: 0; right: 0 }
.cocktailpage .box p.gin { font-weight: 500; margin-top: 5px;}

.cocktailpage .box:hover p.gin::after { width: 90% }
.cocktailpage { padding-bottom: 2rem }

.cocktail_popup .flex { justify-content: space-between; min-height: 90vh; height: 100%; border-radius: 0  ; overflow: hidden; }
.cocktail_popup .img { width: 50% }
.cocktail_popup .img img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.cocktail_popup .txt { position: relative; width: 50%; display: flex; flex-direction: column; align-items: center; padding: 4rem }
.cocktail_popup .txt .ginbottle { height: 20rem; position: absolute; bottom: 1rem; left: -5rem }
.cocktail_popup .txt .ginbottle.all { left:-9rem }
.cockpopup.fancybox-content { border-radius: 0!important; box-shadow: none; background-color: transparent!important; padding: 0rem!important; min-height: 91vh; width: 100%; max-width: 150rem }
.cocktail_popup .txt li { justify-content: center; display: flex; width: 100%; align-items: flex-end; font-size: 1.6rem; margin: 1rem 0 }
.cocktail_popup .txt li img { height: 3.8rem; margin-bottom: 2px; margin-right: 1rem; opacity: 0.6 }
.cocktail_popup .txt li.ans { padding-bottom: 1rem; margin-top: 0 }
.cocktail_popup .txt .title { line-height: 1.1; font-size: 3rem; letter-spacing: 1px; text-transform: uppercase; font-weight: 500; width: 100%; }
.cocktail_popup .txt .title::after { margin: 2.6rem auto 2rem; transition: 0.3s; content: ""; height: 4px; border-radius: 0 50% 50% 0; background-color: rgba(255,255,255,0.4); width: 100%; display: block; }
.cocktail_popup .txt:hover .title::after { width: 100%;}
.cockpopup svg { color: #fff!important }

.doc { padding:7rem 0 }

/*contacts & press*/
.contflex { position: relative; justify-content: space-between; z-index: 1; align-items: flex-start; }
.pagebg.contact { justify-content: flex-start; padding: 20rem 0 8rem; height: auto; }
.pagebg.contact .bggrabottom { height: 100% }

.contflex .t1 { margin-bottom: 5rem; font-size: 4rem }
.contflex .text { width: 50% }
.contflex .text.block .t1 { width: 80% }
.contflex .mail { font-size: 1.8rem; display: inline-block; margin: 0 0 3rem }
.contflex .mail img { margin-right: 1rem; vertical-align: top; margin-top: -3px }
.contflex .social img { margin-right: 1rem }
.formc { width: 50% }
.formc input, .formc textarea, select { letter-spacing: .5px; width: 100%; margin: 1rem 0; padding: 1rem; background-color: #fff; font-size: 1.5rem; font-family: 'Montserrat', sans-serif; border:0; border-radius: .6rem }
.formc .inputflex { justify-content: space-between; align-items: center; width: 100% }
.formc .inputflex .element { width: 48% }
.formc .element p { font-size: 1.6rem }
.formc .element { width: 100%; margin-bottom: 2rem }
.formc .containercheck { margin: 0 0 3rem }

.formc .form .containercheck, .form .containercheck a { font-size: 1.3rem; color: #818E99; font-weight: 300 }
.formc .form button.cta:hover { background-color: #94CC00; }
select { width: 100%; font-weight: normal;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url(../img/drop.svg) 98% / 13px no-repeat #fff;
}




.fancybox-slide {
  background-color: rgba(173,189,201,0) !important;
}
.fancybox-content { max-width: 100rem !important;
margin: 4rem 0 !important; }

/*style per box img change*/
.imgchange { width: 21rem; margin: 0 auto; height: 50rem; margin-top: -1rem }

.cta.fff.ctaarrow { border:1px solid #fff; }
.cta.fff.ctaarrow:hover { background-color: #003c79 }

.img-comp-container {
  position: relative;
  height: 500px; /*should be the same height as the images*/
}

.img-comp-img {
  position: absolute;
  width: auto;
  height: auto;
  overflow: hidden;
}

.img-comp-img img {
  display: block;
  vertical-align: middle; width: 21rem; height: 50rem
}

.img-comp-slider {
  position: absolute;
  z-index: 4;
  cursor: ew-resize;
  /*set the appearance of the slider:*/
  width: 36px;
  height: 36px;
  background-color: #EA2142; border: 2px solid #fff;
  opacity: 0.9;
  border-radius: 50%;
}

.frontback.bgllblu .img-comp-slider { background-color: #003c79; }
.frontback { padding: 6rem 0 5rem; position: relative; overflow: hidden; text-align: center; }
.bglpink { background-color: #F8EBEE }
.bgllblu { background-color: #e4e9ef }

/* The Loader */
#loader-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  overflow: hidden;
}

/*preload style*/
#loader-wrapper .logo { max-width: 27rem; width: 90%; position: absolute; z-index: 1; left: 0; right: 0; top: 15%; margin: 0 auto; text-align: center; }
#loader-wrapper .logo img { width:27rem }
#loader-wrapper video { width: 100%; height: 100%; object-fit: cover; object-position: center; }
#loader-wrapper .video { width: 100%; height: 100%; object-fit: cover; object-position: center; }

.no-js #loader-wrapper {
  display: none;
}

#loader { background-color: #080836;
  position: absolute; display: flex; align-items: center; justify-content: space-between;
  z-index: 11; width: 100%; height: 100vh;
}

#loader-wrapper .loader-section {
  position: fixed;
  top: 0;
  width: 50%;
  height: 100%;
  /*background: rgb(0,130,180);
  background: linear-gradient(-90deg, rgba(0,130,180,1) 0%, rgba(209,31,80,1) 100%); */
  background-color: #080836;
  z-index: 10;
}

#loader-wrapper .loader-section.section-left {
  left: 0;
}

#loader-wrapper .loader-section.section-right {
  right: 0;
  /*background: rgb(0,130,180);
  background: linear-gradient(90deg, rgba(0,130,180,1) 0%, rgba(209,31,80,1) 100%); */
}

/* Loaded styles */
.loaded #loader-wrapper .loader-section.section-left {
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
  -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.loaded #loader-wrapper .loader-section.section-right {
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
  -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.loaded #loader {
  opacity: 0;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

.loaded #loader-wrapper {
  visibility: hidden;
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
  -webkit-transition: all 0.3s 1s ease-out;
  transition: all 0.3s 1s ease-out;
}

/*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: #eee;
  border-radius: 0rem;
}

/* 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: #1d1d1b;
}

/* 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);
}

@media (max-width: 1400px) {

  .packaging .content .desc { padding-left: 11rem }
  .packaging .bottle { left: -26rem }
}

@media (max-width: 1200px) {
  html { font-size: 9.5px }
  .header_desk li { display: none; }
  .header_desk .menuresponsive { display: inline-block; }
  .header_desk .lang { display: flex; }
  .lang a { justify-content: flex-end; }
  .sec1 .txt { padding: 6rem }

}

@media (max-width: 1024px) {
  footer .cl { width: 100%; margin: 1rem 0; text-align: center; }
  footer { padding: 3rem 0 }
  .blocktxt .title { width: 100%; text-align: center; }
  .blocktxt .txt { width: 90%; max-width: 70rem; text-align: center; border: 0!important; padding: 0; margin: 3rem auto 0 }
  .packaging .bottle { position: relative; bottom: inherit;left: inherit; max-width: 38rem; width: 100%; }
  .packaging .content { text-align: center; }
  .packaging .tappo img { position: relative; bottom: inherit; right: inherit; }
  .packaging { padding: 6rem 0 4rem }
  .etichettatura .tabs .tab { width: 100%; margin-bottom: 5rem }
  .etichettatura { padding-bottom: 2rem }
  .igin { margin-top: -2rem }
  .igin.store { margin-top: 4rem }
  .packaging .content .desc { padding-left: 0 }
  .contflex .t1 { text-align: center; }
  .contflex .flexr { flex-direction: column-reverse; }
  .formc, .inputflex, .formc .inputflex .element { width: 100%; display: inline-block; }
  .formc { max-width: 60rem; width: 94%; margin: 0 auto 6rem }
  .contflex .text { text-align: center;width: 100% }
  .contflex .cta { width: 20rem;
		margin: 0 auto;
		text-align: center;
		display: block;
		border: 1px solid; }
  .contflex.press .flexr { flex-direction: column; }
  .contflex .text.block { display: block; }
  .contflex .text.block .t1 { width: 100% }
}

@media (max-width: 768px) {
  .sec1 { flex-direction: column; }
  .sec1 .img { position: relative; width: 100%; height: 80vh }
  .sec1 .txt { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; margin: 0!important; min-height: 80vh }
  .sec1.decoline .txt { position: relative; }
  .sec1.decoline .deco { width: 100% }
  .deco { height: 9rem }
  .space { display: block; width: 100%; height: 2rem; }
  .slidehome .my-arrows button { height: 3.3rem;width: 4.4rem; }
  .slideindex { height: 60vh }
  .pagedett .shape { display: none; }

  .cocktail_popup .flex { flex-direction: column; justify-content: flex-start; }
  .cocktail_popup .img { width: 100%; height: 45vh }
  .cocktail_popup .txt { width: 100%; }
  .cockpopup svg { color: #222!important }
  .cocktail_popup .txt .ginbottle { position: relative; bottom: inherit; left: inherit; margin: 2rem 0 0 }
  .cocktail_popup .txt .ginbottle.all { left:inherit; }
  .cockpopup.fancybox-content { padding: 1rem!important }
  .cockpopup .fancybox-close-small { right: 1rem!important; top: 1rem!important }

  .igin { flex-direction:column; align-items:center; justify-content:center; }
  .igin .ginbox { max-width: 40rem; width: 100% }
}

@media (max-width: 600px) {
  .newsletter .box form input { text-align: center; min-width: inherit; width: 100% }
  .newsletter .box form button { width: 100%; margin-top: 2rem }
  .sec1 .txt { padding: 3rem }
  .newsletter .box { padding: 12rem 3rem }
  header .logo { width: 14rem; top: 3rem }
  .sidenav .flexnav .bgblu { padding: 11rem 3.5rem; width: 93% }
  .header_desk { padding: 2rem 2.5rem }
  .t1 { font-size: 3rem;}
  .pagebg .txt .logo { margin: 2rem 0 4rem }
  .sec1 .img { height: 90vw }
  .sec1 .txt { min-height: 90vw; padding: 8rem 3rem }
  .credits { padding: 2rem }
  .credits p, .credits a { font-size: 1.3rem }
  .etichettatura .tabs { padding: 5rem 2rem 0 }
  .etichettatura .tabs .tab { text-align: center; padding: 2rem }
  .etichettatura .tabs .tab img { margin-bottom: 2rem; position: relative; left: inherit; top: inherit; transform: inherit; }

  .formlogin .tab-group { width: 100% }
  .tab-group li { text-align: center; }
  .formlogin .tab-content { width: 95%; margin: 3rem auto 0; text-align: center; }

  #da-TBWrap button { width: 100%; margin: .5rem 0!important; }
  .controls { padding-bottom: 3.5rem }

  .cocktail_popup .txt .ginbottle { height: 16rem }
  .bigerror { font-size: 40vw }

  .cocktail_popup .txt { padding:3rem }
}