@CHARSET "UTF-8"; 
:root {
--padleft: 20px;
--count: 1;
--landCardwidthMax: 250px;
--headercolor: #BBA562;
--maxwidth: 1400px;
--sectiontitlefontsize: 18px;

--redwine: #b71c1c;
--redwinehover:#8d0c21
}


a, a:hover, a:active {
    color: var(--redwine);
    text-decoration: none;
    cursor: pointer;	
}




@media  screen and   (min-width: 320px ) {
	:root {
		--count: 2;
		--padleft: 10px;
		--landCardwidthMax: 250px;
 	} 
}

@media screen and ( min-width: 480px ) {
	 :root {
	 --count: 3;
 	 --padleft: 10px;
 	 --landCardwidthMax: 350px;
	 } 
	
}
 

@media screen and  (min-width: 760px) {
	 :root {
	 --count: 4;
	 --padleft: 20px;
	--landCardwidthMax: 420px;
	 }
}

 
@media  screen and (min-width: 960px) {
	 :root {
	 --count: 5;
	 --padleft: 20px;
	 }
}


@media  screen and (min-width: 1440px) {
	 :root {
	 --count: 6;
	 --padleft: 20px;
	 }
}

body {
	background-color: whitesmoke;
}
 
.sv-uk-child-width > * {
    width: calc(  100% / ( var(--count) + 0.2 )  ); 
    padding-left: var(--padleft, 30px);
} 

.sv-uk-child-width.landscape > * {
	 width:  cal( var(--padleft) + var( --landCardwidthMax , 260px ) ); 
}


.compseparator {
	margin-bottom:3em;
}
.litteborder {
	 
	margin-bottom:2em;
	width:100%;
	
	overflow:clip;
	max-width: var(--maxwidth);
	margin:auto;
	
}

.alink {
	color: #0f6ecd;
    text-decoration: underline;
}
.alink > div {
	padding:3px;	
}

.asmilewomanbg {
    padding-top: 2em;
    background-image: url(./component/firstpage/img/alittlesmilewomandrinkingwine.jpg);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    padding-bottom:2em;
    position:relative;
   
}
.bgdarkfilter::after {
	content:" ";
	position:absolute;
	
	top:0; bottom:0;
	right:0; left:0;
	z-index:0;
	 --catbdfilter:  blur(0px) saturate(0.8) contrast(0.8) brightness(0.4); 
    backdrop-filter : var(--catbdfilter);
}
.header {
	color: whitesmoke; 
    font-size: var(--sectiontitlefontsize); 
    padding: 10px 0px 10px 66px;
    text-shadow: 2px 2px 2px black;
}

.header.goldfont {
	color: var(--headercolor); 
    text-shadow: unset;
    position:relative;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    text-decoration: none;
    transition: font-size 0.3s;
}
.header.goldfont:has( + .uk-slider:hover) {
	font-size: x-large;
}
.header.goldfont:hover {
	font-size: x-large;
}

.fcc {
	display:flex;
	justify-content: center;
	align-items: center;
}
.extramore {
	max-width:350px;
} 
.extramore > div {
	background: white; 
	width:100%; 
	height:100%;
	text-align: center;
	padding: 5px 10px;
}
.divborder  {
	border:1px solid lightgrey;
	overflow:hidden; 
    
    max-width: var(--maxwidth);
	margin:auto;
	padding-top: 2em;
	padding-bottom: 1em;
    margin-bottom: 2em;
}

.divtreasurehunt {
	border:1px solid lightgrey; 
	padding-top: 2em;
    margin-bottom: 1em;
}

.greycircle {
	--navcolor:#b4b4b4;
	color: var(--navcolor);
	border: 2px solid var(--navcolor); 
    border-radius: 2em;
}
.uk-slidenav.greycircle:hover {
	--navcolor: #777;
	color:var(--navcolor);
} 

.goldfont:before, .goldfont:after {
	    position: absolute;
	    top: 50%;
	    overflow: hidden;
	     
	    height: 2px;
	    content: '\a0';
	    background-color: var(--headercolor);
	}
	.goldfont:before {
	    margin-left: -40px;
	    text-align: right;
	    width: 30px;
	}
	.goldfont:after {
		margin-left: 10px;
	    text-align: right;
	    width: 65vw; 
	}
	
a:focus {
	outline:unset;
}