@charset "utf-8";
/* CSS Document */

 
  
   @font-face {
    font-family: 'cameli';
    src: url('dtl_vandenkeere_t_regular-webfont.woff2') format('woff2'),
         url('dtl_vandenkeere_t_regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
       

} 
    
    body {transition: background-color 1s ease}
	

		a img {
    border: none;
}
img {
  image-rendering: auto;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}	

	* { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
     box-sizing: border-box; 
margin: 0;
    border: 0;
    padding: 0;
    outline: 0;
  
}
*, *:before, *:after {
    box-sizing: inherit;
}
button:focus:not(:focus-visible) {
  outline: none;

}

a:focus:not(:focus-visible) {
  outline: none;

}

button:focus-visible {
 outline-offset: 0.2rem; outline: 2px dotted #FC00AB;
}

a:focus-visible {
  outline-offset: 0.2rem; outline: 2px dotted #FC00AB;
}	
	
	
h1, h2, h3, h4{ _margin: 0; _padding: 0;font-family: 'cameli';font-weight: 400;}	
	
    
    h2, h3{font-size:1.5em;}
* {
  box-sizing: border-box; }	
	p{margin: 0.5em 0px}
	ul{padding: 0;
   list-style-type:none;}
	
	li{list-style-type:none;}
body, html { 
  margin: 0;font-size: 16px !important;
  padding: 0;
min-height: 100vh;
  min-height: -webkit-fill-available;


font-style: normal;scroll-behavior: smooth;
text-rendering: optimizeLegibility;
vertical-align: baseline;  width:100%;
    
font-family: "trade-gothic-next", sans-serif;
    font-display: auto;
    
    font-weight: 300;
    font-stretch: normal;
    
    

}

html{height: -webkit-fill-available;
}
body{min-height: 100vh;
  min-height: -webkit-fill-available;}
    
    
    
    
    
    
    
    
    
    .mcontent{width:100%; height:auto;padding-left:80px; padding-right:80px;}
       .mcontent.main{padding-top:80px;min-height:100vh;}
    .contentl, .contentr{position:absolute; transform: rotate(90deg);z-index:1000;}
    
    
    
    
    
.contentl {
position: fixed;font-family: 'cameli';
  left: 0;
  top: 50%; /* Centers it vertically */
  transform: rotate(-90deg) translateX(-50%); /* Rotates and aligns center */
  transform-origin: left top;

  color: var(--greengrey);
    
    
    font-size: 2em; letter-spacing: 1em;
  padding: 10px 20px;
  white-space: nowrap; /* Keeps text on one line */
}
  .contentr {
position: fixed;
  right: 0;
  top: 50%; /* Centers it vertically */
  transform: rotate(270deg) translateX(50%); /* Rotates and aligns center */
  transform-origin: right bottom;
 padding: 10px 20px;
  color: var(--greengrey);
 font-size: 1em;
  white-space: nowrap; /* Keeps text on one line */
}  
 .ups {position:absolute;bottom:0; right:0;}
    .rsub { transform: rotate(180deg) translateX(0%); }

         
         
         
         
         
         
         
         
         
         
         
         
         
         
        /* menu */ 
         
       header {
    z-index: 50;
    width: 100%;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 0;
    padding-right: 0;
    position: fixed;
    top: 0;
    height: 80px;
    -moz-transition: background-color 0.3s ease-in-out, top 0.25s ease-in-out;
    -ms-transition: background-color 0.3s ease-in-out,top 0.25s ease-in-out;
    -o-transition: background-color 0.3s ease-in-out,top 0.25s ease-in-out;
    transition: background-color 0.3s ease-in-out, top 0.25s ease-in-out;
}  .nav-down2{background: rgba(255,255,255, 1)    /*  40% opaque green */ ;}

.nav-up {
  top: -130px;
}
         
       .hwrap {
    display: flex;
    flex-direction: row;
    _align-items: center;
    _justify-content: center;
    margin-left: 70px;
    flex-wrap: wrap;
    width: -webkit-calc(100% - 140px);
    width: -moz-calc(100% - 140px);
    width: calc(100% - 140px);
}  
         
      .logo {
    width: 160px;
    height: auto;
    _margin-left: 40px;
    cursor: pointer;
    padding-top: 10px;
}   
    
          .logom {
    width: 50px;
    height: auto;
    _margin-left: 40px;
    cursor: pointer;
    padding-top: 10px;
}   
         
        .mainwrap {
    display: flex;
    flex-direction: row;
    _flex: 1;
    margin-right: 0px;
    margin-left: auto;
    _justify-content: center;
    width: auto;
} 
        .mainmenu, .mainmenualt {
    display: flex;
    max-width: 800px;
    _align-items: center;
    _justify-content: center;
    align-content: space-between;
    width: 100%;
    margin-top: 8px;
    _font-weight: 400;
    _font-size: 0.7em;
    _letter-spacing: .2em;
    _color: #FFFFFF;font-family: "trade-gothic-next", sans-serif;
    font-display: auto;font-weight: 300;
} 
    .mainmenu li:first-child {
    margin-left: 0;
}
.mainmenu li, .mainmenualt li {
    _margin: 20px 0 20px 0;
    padding: 15px;
    _width: calc(1/4*100% - (1 - 1/4)*20px);
    display: flex;
    text-align: center;
    flex-direction: column;
    _line-height: 1em;
}     
         
     .mainmenu li a {
    color: var(--greengrey);
font-size: 1rem;
    _letter-spacing: -0.005rem;
    _text-transform: uppercase;
    _font-weight: 400;    position: relative;
    display: block;
    padding: 4px 4px;
    text-decoration: none;
    _text-transform: uppercase;
    transition: 0.5s;
}
    
    .mainmenu li a:after {
  position: absolute;
  left: 50%;
  right: 50%;
  height: 2px;
  bottom: 1px;
  content: "";
  background-color: var(--greengrey);
  transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transform: translate3d(0, 0, 0);
}

.mainmenu li a:hover:after {
  left: 2px;
  right: 2px;
}
    
    
.micons, .mmenu, .mmenudt {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.mmenu {
    position: absolute;
    right: 70px;
    width: auto;
    top: 25px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
  
         
         
         
         
         
         
         
 
         
      	@media screen and (max-width:1010px) {
				.mainmenu{display:none;}
				}   
         
         
    .burger-menu[enabled='true'] .burger-menu__trigger {
    display: block;
    width: 2rem;
    height: 2rem;
    position: absolute;
    top: 39px;
    right: 30px;
    z-index: 1006;
    background: transparent;
    border: none;
    cursor: pointer;
}    
    

         
         
    .burger-menu[enabled='true'][status='open'] .burger-menu__bar {
    background: transparent;
    border-color: transparent;
    transform: rotate(180deg);
}
    

    
    .burger-menu[enabled='true'][status='open'] .burger-menu__bar::before {
    top: 0;
    transform: rotate(45deg);border: 1px solid #FFFFFF;background: #FFFFFF;
}
    
    .burger-menu__bar::before, .burger-menu__bar::after {
    content: '';
}
    
    
.burger-menu[enabled='true'][status='open'] .burger-menu__bar::after {
    top: 0;
    transform: rotate(-45deg);border: 1px solid #FFFFFF;background: #FFFFFF;
}
     .burger-menu__bar {
    top: 50%;
    transform: translateY(-50%);
}
.burger-menu__bar, .burger-menu__bar::before, .burger-menu__bar::after {
    display: block;
    width: 24px;
    height: 3px;
    background: var(--greengrey);
    border: 1px var(--greengrey);
    position: absolute;
    left: 50%;
    margin-left: -12px;
    transition: transform 350ms ease-in-out;
}    

    .burger-menu__bar::before {
    top: -12px;
}
.burger-menu__bar::before, .burger-menu__bar::after {
    content: '';
}

    .burger-menu__bar::after {
    bottom: -12px;
}
.burger-menu__bar::before, .burger-menu__bar::after {
    content: '';
}
.burger-menu__panel {
    visibility: hidden;
    position: fixed;
    top: 0;
    width: 100%;
    max-height: 100vh;
    _overflow-y: auto;
    -_webkit-overflow-scrolling: touch;
}

    .burger-menu[enabled='true'][status='open'] .burger-menu__panel {
    transform: translateY(0);
    z-index: 105;
    opacity: 1;
    transition: transform 500ms cubic-bezier(0.17, 0.67, 0, 0.87) 700ms, opacity 500ms ease 800ms;
}

.burger-menu[enabled='true'][status='open'] .burger-menu__panel {
    visibility: visible;
    opacity: 1;
}
    .burger-menu[enabled='true'][status='open'] .menu__brand {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
    .burger-menu[enabled='true'][status='open'] .mlw

 {
    animation-delay: 0.2s;
    transition: all 0.2s cubic-bezier(0.23, 1, 0.32, 1);
    animation: ltr 1s forwards;
    visibility: visible;
    _z-index: 105;
}

.mlw {
    
    font-size: clamp(2.5rem, 1.7969rem + 3.75vw, 4.375rem);
    z-index: 1000;
    font-weight: normal;
    letter-spacing: -0.2rem;
    margin: auto;
    display: flex;
    text-align: left;
    width: 70%;
    flex-direction: column;
    _opacity: 0;
    -webkit-transition: all 0.2s cubic-bezier(0.23, 1, 0.32, 1);
    animation-delay: 1s;
    padding-bottom: 20px;
}
    .mlw li{padding-bottom: 1em;line-height: 0.8em;}
    .mlw a:link,  .mlw a:visited {color: #FFFFFF; text-decoration: none;line-height: 0.8em;} 
    .menu__brand {
    overflow-y: scroll;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -ms-flex-flow: column nowrap;
    flex-flow: column nowrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;


}
.menu__brand, .menu__list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    max-height: 100vh;
    height: 100vh;
    float: left;
    width: 50%;
    _height: calc(var(--vh, 1vh) * 100);
    overflow-y: auto;
    overflow-x: hidden;
}
.menu__brand {
        background-image: url(https://agriturismocameli.com/sitefiles/mob_bk.jpg);
    background-position: center center;
    background-size: 100% auto;
    -webkit-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    transition-delay: 0.2s;
}
    
    .menu__list {
    align-items: center;
    justify-content: center;
    margin: 0;
    visibility: hidden;
    overflow: hidden;
    padding: 0;
    z-index: 102;
    list-style-type: none;
    background-color: #000000;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    -webkit-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
    .menu__brand, .menu__list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    max-height: 100vh;
    height: 100vh;
    float: left;
    width: 50%;
    _height: calc(var(--vh, 1vh) * 100);
    overflow-y: auto;
    overflow-x: hidden;
}
    
    .mcover {
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: 0;
    right: 0;
    display: flex;
    z-index: 20;
    background-size: cover;
    background-position: center;
    -webkit-animation: zoomin 10s forwards;
}
    
    .burger-menu__trigger {
    display: none;
}
    
     .logom{display:none;}
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    .herotit{padding-top:2em; padding-bottom:2em;width:50%; height:auto; font-size: clamp(2rem, 6.6482vw + .0139rem, 5rem); _letter-spacing:.8em;line-height: 0.8em;     font-family: 'cameli';    color: var(--greengrey);}
    
    
.hero{width:100%; height:auto; } 

.hero img{width:100%; height:auto;}
    
    .pintro{font-size:1.2em;width:60%;text-align: center;margin-left:auto; margin-right:auto;}
    
    
    
    
    
    
    
    
    
    
    
    
    
     /* extras*/ 
    
    
    .events {
    display: flex;
    flex-wrap: wrap;
    font-size: 1.2em;
}
.contentnf {
    width: min(90%, 1480px);
    margin-inline: auto;
    padding-top: 2em;
    padding-bottom: 2em;
    font-size: 1.2em;
}
    
    
    .event.feature.subs.comein, .cintro.subs.comein, .event.subs.comein  {
    -webkit-animation: in 1s;
    -moz-animation: fadein 1s;
    -ms-animation: fadein 1s;
    -o-animation: fadein 1s;
    animation: fadein 1s;
    animation-delay: 0.5s;
    animation-fill-mode: forwards;
}
    .event.feature {
    margin: 20px 20px 20px 0;
    width: calc(1 / 2 * 100% - (1 - 1 / 3) * 20px);
    display: flex;
    flex-direction: column;
}

.event {
    margin: 5px 5px 5px 0;
    _padding: 10px;
    background-color: #FFFFFF;
    width: calc(1 / 3 * 100% - (1 - 1 / 3) * 5px);
    display: flex;
    flex-direction: column;
}	.event:nth-child(3n) {
    margin-right: 0;
}
    
    
    
    .event4 {
    margin: 5px 5px 5px 0;
    _padding: 10px;
    background-color: #FFFFFF;
    width: calc(1 / 4 * 100% - (1 - 1 / 4) * 5px);
    display: flex;
    flex-direction: column;
}	.event4:nth-child(4n) {
    margin-right: 0;
}
   
    
    
    .event.full {
    width: 100%;
    _margin: 20px 20px 0;
    padding: 0px;
    display: flex;
    flex-direction: row;
    min-height: 20vh;
background-color: #000000;color: #FFFFFF;
    align-items: center;
    justify-content: center;
}
    
    .fulll {
    width: 50%;
    padding: 3em 2em 3em 2em;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
    
    
    .fullr {
    width: 50px;padding-left:2em;
    background-repeat: no-repeat;
    height: 100%;
    background-position: center center;
    min-height: 450px;
    background-size: cover;
    align-items: stretch;
    display: flex;
    flex: 1;
}
    
    .fec1{;display:flex;align-items: center;font-family: 'cameli';font-size:2em;line-height: .9em;}
    .fec2{_display:flex;_align-items: center;padding-left:2em;flex-direction: column;}
    
    
    
    .event .evimg::after,  .event4 .evimg::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;background: rgba(38, 38, 41, 0.05); 
    transition: background-color 500ms linear;
}

    .evimg img {
    width: 100%;
    height: auto;
    transition: all 0.6s;
    vertical-align: bottom;
}
    	.evimg{ overflow:hidden;_margin-bottom:15px;position:relative;}
	.evimg img{
 width:100%;height:auto;
    transition: all 0.6s;
    vertical-align:bottom;
}
		.event4 .evimg img:last-child {
  transform:scale(0.90);
}	
	.event4 .evimg:hover img:last-child {
  transform:scale(1.00);
}	
    
    
    
    
    	.event .evimg img:last-child {
  transform:scale(1.00);
}	
	.event .evimg:hover img:last-child {
  transform:scale(1.10);
}	
    
    
    
    
    
    
    
    
    
    
    
    .event .evimg:hover::after,  .event4 .evimg:hover::after{ background-color: rgba(38, 38, 41, 0.15);}
    
    .etit{font-family: 'cameli';text-decoration: none;line-height: 0.9em;} h2.etit a{text-decoration: none;color: #000000;transition: color 0.4s;}
    
    
    h2.etit a:hover{text-decoration: none;color: rgba(38, 38, 41, 0.5); }
    
    
    
    
    
   .evimg:hover + .etext {opacity:0.5;} 
    
     .etext:hover + .evimg img{
  transform:scale(1.00);
}	
    
	
    .etext {
    font-size: .9em;
    padding: 10px;
}
    
    .etext.ctr{text-align: center;}
    .etext.ctr a:hover {text-decoration: none; color:38, 41, 0.05;}
    .actvz{opacity:0.7;}
      /* fillaniamtion*/ 
    
.hevfill.subs.comein {
    background: linear-gradient(to right, #DD6062 50%, #FFFFFF 50%);
    background-size: 200% 100%;
    animation: pulse2 1.2s forwards ease;
}


.hevfillw.subs.comein {
    background: linear-gradient(to right, #DD6062 50%, #FFFFFF 50%);
    background-size: 200% 100%;
    animation: pulse2 1.2s forwards ease;
}



    

.hevfill.subs, .hevfillw.subs {
    width: 100%;
    height: auto;
    padding-top: 100px;
    padding-bottom: 100px;
}
	
    			@keyframes pulse2 {
  0% {
    background-position:right bottom;
  }
  100% {
     
	background-position:left bottom;
  
  }
}
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
.mtext{width:70%; margin-left:auto; margin-right:auto; text-align: center; font-size:1.5em;}
.pinfo{text-align: center; width:50%; margin-left:auto; margin-right:auto;padding-top:1em; padding-bottom:1em;border-top: 1px solid #A0A0A0;
    border-bottom: 1px solid #A0A0A0;}
    
    
    
    
    
    
    
            .winehold{display:flex;width:100%; flex-direction: row;background: rgba(38, 38, 41, 0.05); }
        .wl{width:40%;height:150vh; position: relative;} .wl img{  max-width: 100%;
    max-height: 150vh; /* Subtracting header height */
    object-fit: contain;}
        
        .wr{width:60%;
     border-left: 4px solid #ffffff;
  position: -webkit-sticky;
  position: sticky;
  top: 80px;
            
            height: calc(100vh - 80px);
            
         display:flex;
}
        .wl, .wr{    
 display: flex;
    justify-content: center;
    flex-direction: column;
            text-align: left;}
    
        .wr .cont{padding:2em 6em 2em 2em;}
    
    .linez {
    width: 100%;
    border-top: 1px solid #A0A0A0;
    border-bottom: 1px solid #A0A0A0;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-bottom: 10px;
    margin-top: 10px;
}
    
        .cont h1, .cont h2 {font-family: 'cameli';}
        .cont h1 {font-size:3.5em;text-transform: uppercase;line-height: .9em;}
        .cont p{font-family: "trade-gothic-next", sans-serif;font-size:1.2em;}
        
        
        .tech {display: flex;
    flex-direction: row;
    flex-wrap: wrap;}
        .tsub{width:100%;}
        .tech li{padding:15px 15px 15px 0px;
    _background-color: #FFFFFF;
    width: 50%;
    display: flex;
    _text-align: center;
    flex-direction: row;_justify-content: center;
    line-height: 1em;text-align: left;
}
  
     .uva{padding-top:1em;color: #747474; font-size: 0.8em;display:flex; flex-direction:row; align-items: center;justify-content: center;}
                .uva img{width:25px; height:auto;margin-right:1em;}
    
    
    
        .btn-arrow svg * {
  stroke-width: 5;
  stroke-color:#6A6A6A;
}
    
        .btn-arrow svg * {
    stroke-width: 5;
    _stroke-color: transparent;
}
   
    .btn-arrow svg {
  position: absolute;
  width: 1.1em;
  right: 0px;
  right: 0rem;
  opacity: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  -webkit-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
  will-change: right, opacity;
}

.btn-arrow:hover svg {
  opacity: 1;
  right: -2rem;
}
     
    .btn-arrow {
    position: relative;
    -webkit-transition: background-color 300ms ease-out;
    transition: background-color 300ms ease-out;
}
    
    
    .btn2 {
    border: 2px solid #676767;
    color: hsla(0, 0%, 100%, 1.00);
}
    
        .btn {
    border: 2px solid #676767;
    color: hsla(0,0%,38%,1.00);
}
    .btn:hover {background-color: #000000;color:#FFFFFF; border: 2px solid #000000;}
    
    
    .btn, .btn2 {
font-size: 0.8rem;
    padding: 1rem 1.5rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-top: 20px;
    background-color: Transparent;
    -webkit-transition: color 0.1s cubic-bezier(0.16, 0.08, 0.355, 1), background 0.1s cubic-bezier(0.16, 0.08, 0.355, 1);
    transition: color 0.1s cubic-bezier(0.16, 0.08, 0.355, 1), background 0.1s cubic-bezier(0.16, 0.08, 0.355, 1);
    display: inline-block;
    cursor: pointer;
    min-width: 15rem;width:auto;
    outline: none;
    vertical-align: middle;
    text-align: center;
    overflow: hidden;
}
    
    .btn-arrow span {
    display: inline-block;
    position: relative;
    -webkit-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
    will-change: transform;
}
    
            .btn-arrow:hover span {
  -webkit-transform: translate3d(-1rem, 0, 0);
          transform: translate3d(-1rem, 0, 0);
}
    
    
    	.box.go{transform: scaleX(0);z-index:1060;background: #FFFFFF;    height:100%;z-index:1060;}
    
    
    .box {
    background: #FFFFFF;
    transform: scaleX(100%);
    transition: transform 450ms ease-in;
    transform-origin: top left;
    position: fixed;
    height: 100%;
    overflow: hidden;
    width: 100%;
    z-index: 1060;
}
    
    
    .fade{transition: .6s;}
    .fade:hover{opacity:0.6;}
        .footer{width:100%; padding-top:2em; padding-bottom:2em;display:flex; flex-direction: column;}
        .footer h4{font-family: 'cameli';
   font-size: 1.3em;padding-bottom:1em;}
        .f2 {display:flex;width:100%;flex-flow: row;border-bottom: 1px solid #000000;border-top: 1px solid #000000;padding-bottom:2em;padding-top:2em;}  .f2sub{width:100%;} 
        .f1{width:100%;display:flex;align-items: center; padding-top:2em; padding-bottom:2em;}
    
    .f1 div{width:33%;}.f1sub {display:flex;width:auto;} .f1sub:last-child {text-align:right; flex-direction: column;}
        .f2sub li a{font-size: 0.8em;text-decoration: none; color: #686868;}
        .f2sub li a:hover{text-decoration: none;color:#000000;}
        
        
        .f1sub img{width:100%; max-width:300px;}
        .f1sub{font-size:1.2em;}
        
        .f1sub span{font-size:0.7em;padding-top:1em;}
        
    .fmapsub{width:auto;font-size:.9em;text-align:center;}
    
    .fmapsub a:link, a:visited{text-decoration: none; color:#3A3A3A;}
    
    .fmapsub img{width:auto; max-width:30px;padding-bottom:1em;}
    
    

     
.color-lgrey {
  _background: #DFDFDF;
      background-color: #FFFFFF;
}    
        
        .color-lgrey2 {
  _background: #DFDFDF;
      background-color: #E3E3E3;
}   
        
               .color-lgrey3 {
  _background: #DFDFDF;
      background-color: #DCCECE;
}   


               .color-lgreydark {
  _background: #DFDFDF;
      background-color: #565656;
}   



    .mimage {
    width: 100%;
    min-height: 100vh;
    display: flex;
    overflow: hidden;
}
    .video_background {
    height: 100vh;
    min-height: 100vh;
    width: 100%;
    position: absolute;
    z-index: 1;

    left: 0;
    margin: 0 auto;
    overflow: hidden;
    -webkit-transform-origin: center;
    transform-origin: center;
}
        
        
        .video_background video {
    width: auto;
    min-width: 100%;
    min-height: 100%
;
    margin: 0 auto;
    overflow: hidden;
    top: 0;
    -webkit-transform-origin: center;
    transform-origin: center;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
            .parent-elementz
 {
    width: 100%;
    height: auto;
    display: flex;
    overflow: hidden;
    _justify-content: center;
    align-items: center;
    z-index: 3;margin-bottom:5em;
    flex-direction: column;justify-content: flex-end;color: #FFFFFF;text-align: center;
}
    .parent-elementz img{width:100%; max-width:6vw; min-width:90px;mix-blend-mode: difference;}
        
        .parent-elementz h1{font-family: 'cameli';font-size: 2.5em;font-weight: 400;text-transform: uppercase;}
        .parent-elementz a:link, .parent-elementz a:visited {text-decoration: none; color: #FFFFFF;}
        
        
        .hspot {
    width: 100%;
    min-height: 90vh;
    display: flex;
    align-items: center;
    _background-color: var(--edilyellow);
    position: relative;
}
        


.hspotim, .hspotim2 {
    width: 70%;
    background-repeat: no-repeat;
    background-position: center center;
    height: 100%;
    background-size: cover;
    right: 0;
    overflow: hidden;
    position: absolute;
    display: flex;
}.hspott {
    _position: relative;display:flex;
    font-size: 1.5em;
    margin-top: 2em;
    margin-bottom: 2em;
    z-index: 1285;
  justify-content: center;
    padding: 4rem 2rem 4rem 4rem;
    _display: flex;flex-direction: column;_align-items: center; justify-content: center;
    margin-right: auto;
    width: 40%;
    min-height: 40vh;
    background-color: #F1F1F1;
    z-index: 40;text-align: left;
}
.hspott h3{line-height: 0.9em;}
        .homeintro{width:100%; padding:5em; text-align:center; font-size:1.5em;}
    
    
    
    
    
    
    
    
    
    
    	  /* SLIDER */
	
    .slider {
        width: 100%;
        margin: 0 auto;
    }

    .slick-slide {
      margin: 0px 0px;
    }

    .slick-slide img {
      width: 100%;
    }

    .slick-prev:before,
    .slick-next:before {
      color: black;
    }


    .slick-slide {
      transition: all ease-in-out .3s;
   
    }

	.slick-dotted.slick-slider
{
    margin-bottom: 30px;
}

.slick-dots
{
    position: absolute;
    bottom: -25px;

    display: block;

    width: 100%;
    padding: 0;
    margin: 0;

    list-style: none;

    text-align: center;
}
.slick-dots li
{
    position: relative;

    display: inline-block;

    width: 20px;
    height: 20px;
    margin: 0 5px;
    padding: 0;

    cursor: pointer;
}
.slick-dots li button
{
    font-size: 0;
    line-height: 0;

    display: block;

    width: 20px;
    height: 20px;
    padding: 5px;

    cursor: pointer;

    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus
{
    outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before
{
    opacity: 1;
}
.slick-dots li button:before
{
       font-family: 'gab';
    font-size: 25px;
    line-height: 20px;

    position: absolute;
    top: 0;
    left: 0;

    width: 20px;
    height: 20px;

    content: '•';
    text-align: center;

    opacity: .75;
    color: #d0447f;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before
{
   opacity: 1;
    color:#FFFFFF;
}

	
	
	.gallery, .slick-dots {
    background-color: #01013f;
}
	
	
    
    
    
.mtx{padding-top:80px; padding-bottom:80px;}
    
    
    
    .hdiv2 {
    display: flex;
    flex-direction: row;
    width: 100%;
    text-rendering: optimizeLegibility;
    min-height: 100vh;
}
    
    .hchild.subs.comein {
    opacity: 1;
    -webkit-transition: opacity 2s ease-out;
    -moz-transition: opacity 2s ease-in-out;
}
.subs.home.comein, .subs.hchild.comein {
    opacity: 1;
    -moz-transform: translate3d(0px, 0px, 0px);
    -webkit-transform: translate3d(0px, 0px, 0px);
    -o-transform: translate(0px, 0px);
    -ms-transform: translate(0px, 0px);
    transform: translate3d(0px, 0px, 0px);
}
.hchild {
    flex-direction: column;
    width: 50%;
    align-items: center;
    justify-content: center;
    display: flex;
    font-size: 1.2em;
}
.hchild {
    opacity: 0;
    -webkit-transition: opacity 0.7s;
    -moz-transition: opacity 0.7s;
    -o-transition: opacity 0.7s;
    transition: opacity 0.7s;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: cover;
    transition: opacity .3s ease;
}
    div.hdiv2.revl div.hchildf {
    text-align: left;
}
.hchildf.whiz {
    background-color: #FFFFFF;
    color: #2A2A2A;
}
.hchildf {
    flex-direction: column;
    position: relative;
    justify-content: center;
    align-items: center;
    display: flex;
    _font-weight: 400;
    width: 50%;
    font-size: 1.1em;
    _line-height: 1.2em;
    background-color: var(--edilyellow);
}.subs.home.comein, .subs.hchild.comein {
    opacity: 1;
    -moz-transform: translate3d(0px, 0px, 0px);
    -webkit-transform: translate3d(0px, 0px, 0px);
    -o-transform: translate(0px, 0px);
    -ms-transform: translate(0px, 0px);
    transform: translate3d(0px, 0px, 0px);
}
.subs.home {
    width: 70%;
    max-width: 600px;
}
.subs.home {
    opacity: 0;
    -moz-transition: all 700ms ease;
    -webkit-transition: all 700ms ease;
    -o-transition: all 700ms ease;
    transition: all 700ms ease;
    -moz-transform: translate3d(0px, 100px, 0px);
    -webkit-transform: translate3d(0px, 100px, 0px);
    -o-transform: translate(0px, 100px);
    -ms-transform: translate(0px, 100px);
    transform: translate3d(0px, 100, 0px);
    -webkit-backface-visibility: hidden;
}.rev {
    flex-direction: row-reverse;
}
        
        		div.hdiv2.revl div.hchildf{text-align:left;}
		div.hdiv2.rev div.hchildf{text-align:right;}	
        
        
        _div.hdiv.revl div.hchildf:after {
	background-color:#000000;
    position: absolute;
    z-index: 1;
    top: -16px;
    left: -16px;
    width: 32px;
    height: 32px;
    content: "";
    transition: all .8s ease;
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 50%;
    _left: -16px;
    _margin-top: -16px;
}
    
         .swiper-container {
    width: 100%;
    height: auto;
}
.swiper-container {
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    list-style: none;
    padding: 0;
    z-index: 1;
}
      .swiper-slide img{width:100%; height:auto;}
        
        .swiper-button-next {z-index:21000;}
        
        
        .hspotim2gal{width: 70%;

    _height: 100%;
  top: 50%; bottom: -50%;
    right: 80px;
    overflow: hidden;
    _position: absolute;
    display: flex;}
    
    
    
    
.f1sub a:link, .f1sub a:visited{padding-top:10px;font-size:.6em; color: #4A4A4A;text-decoration: none;}
.f1sub a:hover{padding-top:10px;text-decoration: none; color: #000000;} 
    
    
    
    
    @media screen and (max-width: 967px) {
        .hspott,  .hspotim2, .hspotim2gal { width: 100%;padding:0; position: static}
        .hspotim2{height: 50vh;}
        .hspott{height:auto;}
        
        .hdiv2{  flex-direction: column;
        padding-top: 20px;}
          .hchild {        width: min(90%, 1480px);
        margin-inline: auto;
        height: 260px;
    }
        .hchildf.whiz {
        margin-top: 50px;
    }    .hchildf.whiz, .hchild {
        width: min(90%, 1480px);
        margin-inline: auto;
    }
    .subs.home {
        width: 100%;
        max-width: none;
    }   .mtext{width:100%;}
            .hspot {
                flex-direction: column;min-height: 0;}
        
        .hspott{text-align: center;background-color:transparent ; min-height:0;}
        
        .homeintro{width:100%;padding:0;}
        .event.full{flex-direction: column-reverse;}
        .fulll, .fullr{width:100%;text-align: center;}
        .fec2{padding-left:0;} .fec1{width:100%; text-align: center;display:block;}
   
}
    
    
    
    
    
    
    @media screen and (max-width: 1200px) {
        .tech li{width:100%;}
}
    
    
    @media screen and (max-width: 1000px) {
        .f2{display:none;}.f1 {flex-direction:column;}
        .f1 div {width:100%;text-align: center; justify-content: center;padding-top:1em;}
        .f1sub:last-child{text-align: center;}
        .event {width:100%;}
        
        .event4{width: calc(1 / 2 * 100% - (1 - 1 / 2) * 5px);}
        .event4:nth-child(2n) {
    margin-right: 0;
}
        
        
        
        .menu__list {
        display: none;
    }
            .menu__brand {
        width: 100%;
    }
        .logom{display:block;}
        .logo{display:none;}
        .wr, .wl{width:100%;} .wl {height:70vh;} .wr{height:auto;border-left:none;} .wl img{max-height: 70vh;}
        .winehold {flex-direction: column;}.wr .cont {
    padding: 2em;
}
        
    } 
    
     @media screen and (max-width: 720px) {
         .mcontent.main {min-height: 0;}
       .pinfo {width:100%;}
           .event4{width: 100%;margin:0;}
         .contentl, .contentr{display:none;}
         .mcontent{padding-left:1em; padding-right:1em;}
         .parent-elementz h1{font-size:3em; ;line-height:.8em;}
         .parent-elementz{margin-bottom:10em;}
.cont h1{font-size:2.5em;}
         .hwrap{margin-left:30px;}.logom{width:50px;}
         .event4.home:nth-child(2n), .event4.home:nth-child(3n), .event4.home:nth-child(4n){display:none;}
    }