.row{
	width: 100%;
	margin: 0;
}

.row:after{
    content: ' ';
    display: table;
    clear: both;
}

.column{
	float: left;
}

html{
	padding: 0px;
	margin: 0px;
	min-height: 100%;
	background-color: rgb(116,20,220);
}

body{
	padding: 0px;
	margin: 0px;
	font-family: 'Nunito Sans', sans-serif;
	background-color: rgb(245,245,245);
	min-height: 100%;
}

p{
	max-width: 100%;
}

header{
	background-color: rgb(255,255,255);
	color: rgb(116,20,220);
}

h1{
	font-style: black;
	padding-bottom: 0.24em;
	margin: 0;
}

h2{
	font-size: 2.5rem;
	font-style: black;
}

h3{
	font-size: 2rem;
}

img{
	max-height: 100%;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}

.section_logo{
	padding-top: 0px;
	padding-bottom: 1em;
}

aside div img{
	display: block;
	margin: auto;
}

main{
	padding-top: 0px;
	padding-bottom: 1em;
	background-color: rgb(255,255,255);
}

a{
	color: rgb(116,20,220);
}

a:link{
	color: rgb(0,167,148);
}

a:visited{
	color: rgb(116,20,220);
}

a:hover{
	color: rgb(87,15,165);
}

a:active{
	color: rgb(133,23,255);
}

.footer-link:link{
	color: rgb(255,255,255);
}

.footer-link:visited{
	color: rgb(204,204,204);
}

.footer-link:hover{
	color: rgb(102,102,102);
}

.footer-link:active{
	color: rgb(51,51,51);
}

.404_text{
	min-height: 100%;
	vertical-align: middle;
	margin: 0px;
	
}

.gallery{
	padding-top: 0.5rem;
}

footer{
	background-color: rgb(116,20,220);
	color: rgb(255,255,255);
	padding-top: 1em;
	padding-bottom: 1em;
	margin: 0px;
}

.sections_mobile_li{
	display: none;
}

.nav_list{
	list-style-type: none;
	padding:0px;
	margin: 0px;
}

.nav_li{
	padding:0px;
	margin: 0px;
}

.nav_button{
	height: 100%;
	background-color: rgb(116,20,220);
	color: rgb(255,255,255);
	list-style: none;
	text-align: center;
	margin: 0px;
	padding-top: 1em;
	padding-bottom: 1em;
	text-decoration: none;
	box-shadow:inset 0px 0.1rem 0px 0px rgb(255,255,255);
}

.nav_button:link{
	color: rgb(255,255,255);
}

.nav_button:visited{
	color: rgb(255,255,255);
}

.nav_button:hover{
	color: rgb(255,255,255);
	background-color: rgb(87,15,158);
}

.nav_button:active{
	color: rgb(255,255,255);
	background-color: rgb(58,10,110);
}

.current_button{
	background-color: rgb(58,10,110);
}

.section_nav_menu{
	padding: 0px;
	margin: 0px;
}

.logo{
	width: 100%;
	padding-top:1.3em;
}

.footer-link{
	text-decoration: underline;
}

.letter-list{
	list-style-type:lower-latin;
}

.color-box{
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}

.color-box > article > p> a:link{
	color: rgb(255,255,255);
}

.color-box > article > p > a:visited{
	color: rgb(204,204,204);
}

.color-box > article > p > a:hover{
	color: rgb(102,102,102);
}

.color-box > article > p > a:active{
	color: rgb(51,51,51);
}

.page-first-row{
	padding-bottom: 0px;
	margin-bottom: 0.5rem;
}

.purple-box{
	background-color: rgb(116,20,220);
	color: rgb(255,255,255);
	margin-top: 0px;
}

.purple-box.page-first-row{
	padding-top: 1rem;
}

.page-image > img{
	height: 100%;
	width: 100%;
	vertical-align: middle;
}

.title-bar{
	height: 100%;
	padding-top: 0.3rem;
	padding-bottom: 0.3rem;
	margin-bottom: 1rem;
	color: rgb(255,255,255);
	background-color: rgb(0,167,148);
	text-align: center;
}

.title-bar > h1{
	vertical-align: middle;
	text-align: center;
	padding: 0px;
}

.teal-box{
	border-color: rgb(0,167,148);
	background-color: rgb(0,167,148);
	color: white;
}

.red-box{
	border-color: rgb(226,46,18);
	background-color: rgb(226,46,18);
	color: white;
}

.blue-box{
	border-color: rgb(0,110,224);
	background-color: rgb(0,110,224);
	color: white;
}

.gallery-spacer{
	clear:left;
}

.gallery-image{
	width: 100%;
}

.hamburger_button_div{
	background-color: rgb(255,255,255);
	padding-top: 1.3em;
}

.hamburger_button{
	height: 100px;
	background-color: rgb(255,255,255);
	padding-top: 20%;
	padding-bottom:20%;
}

.hamburger_bar{
	background-color: rgb(116,20,220);
	width: 100%;
	height: 10%;
	margin-top: 20%;
	margin-bottom: 20%;
	border-radius: 1000px;
	transition: 0.5s;
	opacity: 100;
}

.clicked.top_bar{
  transform: rotate(-45deg) translate(-25%,150%);
  -webkit-transform: rotate(-45deg) translate(-25%,150%);
}

.clicked.middle_bar{
	opacity: 0;
}

.clicked.bottom_bar{
  
  transform: rotate(45deg) translate(-25%,-150%);
  -webkit-transform: rotate(45deg) translate(-25,-150%);
}

.sections-contact-list{
	list-style-type: none;
}

@media screen {

	html{
		min-width: 0px;
	}

	body{
		font-size: 18px;
		text-shadow: 0;
	}
	
	li{
		padding-top: 0.5em;
		padding-bottom: 0.5em;
	}
	
	h1{
		font-size: 3rem;
		text-align: center;
		font-weight: bolder;
	}
	
	.mobile-1{
		width: 8.333%;
	}
	
	.mobile-2{
		width: 16.666%
	}
	
	.mobile-3{
		width: 25%;
	}
	
	.mobile-4{
		width: 33.333%;
	}
	
	.mobile-5{
		width: 41.666%;
	}
	
	.mobile-6{
		width: 50%;
	}
	
	.mobile-7{
		width: 58.333%;
	}
	
	.mobile-8{
		width: 66.666%;
	}
	
	.mobile-9{
		width: 75%;
	}
	
	.mobile-10{
		width: 83.333%;
	}
	
	.mobile-11{
		width: 91.666%;
	}
	
	.mobile-12{
		width: 100%;
	}
	
	.mobile-hide{
		display: none;
	}
	
	.footer-link-p{
		text-align: center;
	}
	
	.footer-mobile-spacer{
		clear:both;
	}
}
@media screen and (min-device-width: 800px){
	
	html{
		min-width:800px;
	}
	
	body{
		font-size: 18px;
	}
	
	h1{
		font-size: 3rem;
		text-align: left;
	}
	
	.desktop-0{
		width: 0%;
	}

	.desktop-half{
		width:4.167%;
	}
	
	.desktop-1{
		width: 8.333%;
	}
	
	.desktop-2{
		width: 16.666%
	}
	
	.desktop-3{
		width: 25%;
	}
	
	.desktop-4{
		width: 33.333%;
	}
	
	.desktop-5{
		width: 41.666%;
	}
	
	.desktop-6{
		width: 50%;
	}
	
	.desktop-7{
		width: 58.333%;
	}
	
	.desktop-8{
		width: 66.666%;
	}
	
	.desktop-8half{
		width: 70.333%;
	}
	
	.desktop-9{
		width: 75%;
	}
	
	.desktop-10{
		width: 83.333%;
	}
	
	.desktop-11{
		width: 91.666%;
	}
	
	.desktop-12{
		width: 100%;
	}
	
	.mobile-hide{
		display: block;
	}
	
	.desktop-hide{
		display: none;
	}
	
	main{
		padding-top: 1em;
	}
	
	.footer-link-p{
	text-align: right;
	}
	
	.page-first-row{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.page-first-row > article{
		padding-right: 1rem;
	}
	
	.color-box > article{
		padding-top: 0px;
		padding-left: 1rem;
		padding-right: 1rem;
	}
	
	.color-box.page-first-row{
		padding-top: 0px;
		padding-right: 0px;
	}
	
	.nav_button{
		box-shadow:inset 0.1rem 0px 0px 0px rgb(255,255,255);
	}
	
	.section_nav_button{
		box-shadow:inset 0.1rem 0px 0px 0.1rem rgb(255,255,255);
		background-color: rgb(0,167,148);
	}

	.section_nav_button:hover{
		color: rgb(255,255,255);
		background-color: rgb(0,125,111);
	}

	.section_nav_button:active{
		color: rgb(255,255,255);
		background-color: rgb(0,84,111);
	}
	
	.logo{
		padding-bottom: 1.3em;
	}
	
	@media screen and (max-device-width: 1280px){	
		.left-article{
			width: 100%;
		}

		.nav-button.desktop-half{
			width:8.333%;
		}
		
		.nav-button.desktop-1{
			width: 16.666%;
		}
		
		.nav_button.desktop-2{
			width: 33.333%
		}
		
		.nav-button.desktop-3{
			width: 50%;
		}
		
		.nav-button.desktop-4{
			width: 66.666%;
		}
		
		.nav-button.desktop-5{
			width: 43.333%;
		}
		
		.nav-button.desktop-6{
			width: 100%;
		}
		
		.nav-button.desktop-7{
			width: 100%;
		}
		
		.nav-button.desktop-8{
			width: 100%;
		}
		
		.nav-button.desktop-8half{
			width: 100%;
		}
		
		.nav-button.desktop-9{
			width: 100%;
		}
		
		.nav-button.desktop-10{
			width: 100%;
		}
		
		.nav-button.desktop-11{
			width: 100%;
		}
		
		.nav-button.desktop-12{
			width: 100%;
		}
		
		.section-list-spacer{
			display: none;
		}
		
		.page-image{
			padding-left: 25%;
			width: 50%;
			padding-right: 25%;
			padding-bottom: 1rem;
		}
		
		.page-first-row{
			display: block;
		}
		.page-first-row > article > p{
			padding-right: 1rem;
		}
		.purple-box > article > h1{
			text-align: center;
		}
	}
}