:root {
  --brown: #5f4b3c;
  --orange: #e2821d;
  --cream: #f5f3ea;
  --blue: #228cc0;
}



html {
    font-size: 14px;
}

@media screen and (min-width: 700px) {
  html {
    font-size: calc(14px + 2 * ((100vw - 700px) / 500));
  }
}
@media screen and (min-width: 1200px) {
  html {
    font-size: 16px;
  }
}

a {
    -webkit-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
}







/* OVERLAY STUFF ======================================================================================== */


#trigger-overlay {
    width:24px;
    height:21px;
    float:right;
    margin-top: 7px;
}

#trigger-overlay svg {
    -moz-transition: all .4s ease;
    -webkit-transition: all .4s ease;
    -o-transition: all .4s ease;
    -ms-transition: all .4s ease;
}

#trigger-overlay svg {
    fill:var(--brown);
}

#trigger-overlay:hover svg {
    fill:var(--orange);
}

#trigger-overlay svg:focus, #trigger-overlay:focus {
    outline:none;
}

.overlay {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: var(--orange);
	z-index:9999;
	padding-top:25px;
	overflow:auto;
}

.overlay .overlay-close {
    float:right;
	overflow: hidden;
	border: none;
	outline: none;
	z-index: 100;
	margin-top: 8px;
}

.overlay .overlay-close svg {
    -moz-transition: all .2s ease;
    -webkit-transition: all .2s ease;
    -o-transition: all .2s ease;
    -ms-transition: all .2s ease;
    fill:white;
}

.overlay .overlay-close:hover svg {
    fill:var(--brown);
}

.overlay .overlay-close svg {
    width:20px;
    height:20px;
}

.overlay ul {
    margin:0;
}

.overlay ul li a {
    font-size:1.5rem;
    color:white;
}

.overlay ul li a:hover {
    color:var(--brown);
}



/* Effects */
.overlay-scale {
	visibility: hidden;
	opacity: 0;
	-webkit-transform: scale(0.9);
	transform: scale(0.9);
	-webkit-transition: -webkit-transform 0.4s, opacity 0.4s, visibility 0s 0.4s;
	transition: transform 0.4s, opacity 0.4s, visibility 0s 0.4s;
}

.overlay-scale.open {
	visibility: visible;
	opacity: 1;
	-webkit-transform: scale(1);
	transform: scale(1);	
	-webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
	transition: transform 0.4s, opacity 0.4s;
}













/* Cookie policy
========================================================================== */

#cookiePanel {
    background: #ecf1f5;
    width: 100%;
    z-index: 10000;
    display: none;
    opacity: 0;
	position: fixed;
    bottom: 0;
    padding:1rem 0;
}


#cookiePanel p {
    margin: 0;
    color: #3d5b58;
	font-size: 1rem;
	line-height:1.3;
}

#cookiePanel p a {
    color: #3d5b58;
	margin: 0;
	text-decoration:underline;
} 

#cookiePanel p a:hover {
    color:#7c7e33;
}

#cookieNoshow {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 1rem;
    padding: 0.5rem 2rem;
}




/* Media Queries
========================================================================== */

/* Small only */
@media screen and (max-width: 39.9375em) {
    #cookieNoshow {
        margin-top: 1rem;
    }
}

/* Medium and up */
@media screen and (min-width: 40em) {
}

/* Medium only */
@media screen and (min-width: 40em) and (max-width: 63.9375em) {
}

/* Large and up */
@media screen and (min-width: 64em) {
}