html {
    font-size: 20px;
    font-family: "Lato", sans-serif;
    font-weight: 300;
    font-style: normal;
    color:black;
}

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

p {
    font-family: "Lato", sans-serif;
    font-weight: 300;
    font-style: normal;
    color:black;
    line-height:1.5;
    margin-bottom:1rem;
}

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

.taste-of-arran-logo {
    margin-bottom:2rem;
    width:300px;
}

.full-page {
    display:table;
    height:100vh;
    width:100%;
}

.full-page-middle {
    display:table-cell;
    width:100%;
    vertical-align:middle;
}

#facebook-icon, #instagram-icon {
    height:1.5rem;
    margin-top: -1rem;
    margin-left: 0.25rem;
    margin-right: 0.25rem;
}

.social-icon {
    -webkit-transition: fill .25s ease-in-out;
    transition: fill .25s ease-in-out;
}

.facebook-icon:hover .social-icon, .instagram-icon:hover .social-icon {
    fill:#1468a0;
}







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















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

/* Small only */
@media screen and (max-width: 39.9375em) {
    .taste-of-arran-logo {
        max-width:100%;
    }
}

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