:root {
  --blue: #3b3fb6;
  --pink: #f57eb6;
  --grey: #e5e1e6;
}



html {
    font-size: 16px;
}

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

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

p, li {
    font-family: "Figtree", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    color:var(--blue);
    line-height:1.25;
}

strong {
    font-weight:500;
}







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

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