* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html,
body {
	height: 100%;
	width: 100%;
	overflow-x: hidden;
}

body {
	font-family: "Arial Rounded MT Bold", Arial, sans-serif;
	background-color: #FDF8F5;
}

.logo {
	display: flex;
	justify-content: space-around;
	align-items: center;
}

.logo span {
	font-size: 1.5em;
	letter-spacing: 0.2em;
	padding-left: 0.25em;
	z-index: 3;
}

.logo img {
	width: 2.5em;
}

header{
	display: block;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
}
.header-nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	min-height: 8vh;
	background-color: #273a2c;
	color: #FDF8F5;
	padding: 0 5%;
}

.header-nav ul {
	display: flex;
	justify-content: space-around;
	width: 40%;
}

.header-nav ul li {
	list-style: none;
}

.header-nav__links li a {
	color: #FDF8F5;
	text-decoration: none;
	letter-spacing: 0.125em;
	font-size: 1em;
}

.header-nav__links li a::after {
	color: #E8CEBF;
}

.burger {
	display: none;
	z-index: 2;
}

.burger div {
	width: 1.5em;
	height: 0.2em;
	margin: 0.25em;
	background-color: #FDF8F5;
}

.header-nav__active {
	transform: translateY(0%) !important;
}

.toggle .burger--line1 {
	transform: rotate(-45deg) translate(-5px, 6px);
}

.toggle .burger--line2 {
	opacity: 0;
}

.toggle .burger--line3 {
	transform: rotate(45deg) translate(-5px, -6px);
}

@keyframes navLinkFade {
	from {
		opacity: 0;
		transform: translateY(50%);
	}
	to {
		opacity: 1;
		transform: translateY(0%);
	}
}

main {
	display: block;
	width: 100%;
}
#myVideo {
	position: fixed;
	right: 0;
	bottom: 0;
	min-width: 100%;
	min-height: 100%;
	z-index: -1;
  }
.spaced-content {
	width: 100%;
	padding: 0 5%;
}

.banner {
	width: 100%;
}

.selfie {
	width: 100%;
}

.intro {
	position: relative;
	height: 30vw;
	min-height: 15em;
}

.intro-section div h1{
	padding-top: 15%;
}

.text-dancing-script {
	font-family: 'Dancing Script', cursive;
}

p {
	font-size: 1rem;
}

.text-light {
	color: #FDF8F5;
}

.text-dark {
	color: #4F4846;
}

.button-primary {
	background-color: #266150;
	color: #FDF8F5;
}

.button-secondary {
	background-color: #E8CEBF;
	color: #FDF8F5;
}

.headline {
	color: #DDAF94;
	text-decoration: none;
}

.headline--xlarge {
	font-size: calc(3em + 1.5vw);
}

.headline--large {
	font-size: calc(1.5em + 1vw);
}

.headline--middle {
	font-size: 1.5em;
}

.background-color-dark-green {
	background-color: #273a2c;
	color: #FDF8F5
}

.background-color-light {
	background-color: #FDF8F5;
	color: #4F4846
}

.background-color-dark-red {
	background-color: #551317;
	color: #FDF8F5
}

.background-color-red {
	background-color: #861d2e;
	color: #FDF8F5
}

.background-color-light-transparent {
	background-color: rgba(253, 248, 245, 0.6);
	color: #4F4846
}
.text-centered {
	text-align: center;
}

.pb-u1 {
	padding-bottom: 1em !important;
}

.pb-u2 {
	padding-bottom: 2em !important;
}

.pl-u2{
	padding-left: 2em;
}
.paround-u2 {
	padding: 5%;
}

.pt-u1 {
	padding-top: 1em !important;
}

.pt-u2 {
	padding-top: 2em !important;
}

.pr-u1{
	padding-right: 1em;
}
.mt-u1 {
	margin-top: 1em;
}

.mt-u2 {
	margin-top: 2em;
}

.mt-u3 {
	margin-top: 3em;
}

.mb-u1{
	margin-bottom: 1em;
}

.mb-u2{
	margin-bottom: 2em;
}

.mb-u3{
	margin-bottom: 3em;
}

.ml-auto{
	margin-left: auto;
}

.mr-auto{
	margin-right: auto;
}

.youtubeVideo{
	width: 100%;
	height: 15em;
}
@media screen and (min-width: 541px) {
	.logo span {
		font-size: 2em;
		letter-spacing: 0.25em;
		padding-left: 0.25em;
	}
	.logo img {
		width: 4em;
	}
	.header-nav {
		padding: 0 5%;
	}
}


/* Desktop */

@media screen and (min-width: 1025px) {
	.spaced-content {
		padding: 0 25%;
	}


	.youtubeVideo{
		width: 100%;
		height: 25em;
	}
	
	.selfie{
		width: 71%;
		height: 70%;
		margin-left: 15%;
		margin-right: 15%;
	}

footer .grid-two-col .logo{
	justify-content: start !important;
}

}

@media screen and (min-width: 768px){
	.grid-four-col, 
	.grid-two-col{
	display: grid !important;
}

footer .grid-two-col{
	
    grid-template-columns: 1fr 1fr;
    justify-content: center;
    align-items: baseline;
}
}
/* Ipad Pro Quer */

@media screen and (max-width: 1024px) {
	.header-nav__links {
		position: absolute;
		right: 0;
		flex-direction: column;
		background-color: #273a2c;
		align-items: center;
		z-index: 1;
		transform: translateY(-100%);
		transition: transform 0.5s ease-in;
		width: 50%;
		height: 30em;
		visibility: hidden;
		top: 0;
		gap: 2em;
		padding-top: 5em;
	}
	.header-nav ul {
		width: 50%;
		visibility: hidden;
	}
	.header-nav__links li {
		opacity: 0;
	}
	.burger {
		display: block;
	}



}

.disabled {
	cursor: not-allowed;
	opacity: 0.5;
	color: currentColor;
	display: block;  /* For IE11/ MS Edge bug */
	pointer-events: none;
	text-decoration: none;
  }

.grid-four-col, 
.grid-two-col{
	display: block;
	justify-content: center;
	margin: auto;
	text-align: center;
}

.grid-four-col .grid-content-item{
	border: solid 3px #FDF8F5;
	margin: 0.5em;
	padding: 0.5em;
}
.grid-content-item p{
	display: block;
}
.grid-content-item a{
	color: #FDF8F5;
	text-decoration: none;
}
footer .grid-two-col{
	
    grid-template-columns: 1fr 1fr;
    justify-content: center;
    align-items: baseline;
}

.grid-four-col{
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-template-rows: 6;
	justify-content: center;
	align-items: baseline;
}

.information-list ul li{
	list-style: none;
	text-decoration: none;
	margin-bottom: 0.5em;
}


.information-list ul li a{
	color: #FDF8F5;
}

footer{
	padding: 2% 5%;
}

footer .grid-two-col .logo{
	justify-content: center;
}

.footer-nav{
	margin-top: 2em;
}

footer ul{
	display: flex;
}

footer ul li{
	display: inline;
	margin: auto;
	padding-bottom: 1em;

}

.footer-nav ul li a{
	text-decoration: none;
	color: inherit;
	cursor: pointer;
}

.footer-nav ul li a::after {
	color: #E8CEBF;
}

.text-right{
	text-align: right;
}