* {
		box-sizing: border-box; }

html, body {
		margin: 0;
		padding: 0;
		height: 100%;
		width: 100%;
		background: #f0f0f0;
		font-family: 'Chewy', cursive; }

p {
		font-size: 17pt; }

a {
		text-decoration: none;
		color: #08c2eb; }

#wrapper {
		min-height: 100%;
		position: relative; }

header {
		margin: 0;
		background-color: #08c2eb;
		position: absolute;
		top: -50px;
		padding-top: 40px;
		height: 135px;
		width: 100%;
		font-family: 'Chewy', cursive;
		transform: skewY(-3deg); }

#header-wrap {
		margin: 0px auto;
		width: 800px; }

#company {
		float: left;
		width: 300px;
		text-align: left;
		transform: skewY(3deg); }

h1 {
		margin: 3px;
		color: white; }

#desc {
		margin: 3px;
		margin-bottom: 15px;
		color: white;
		font-size: 14pt;
		font-weight: 100; }

nav {
		float: right;
		width: 500px;
		text-align: right;
		transform: skewY(3deg); }

header a {
		color: white;
		font-size: 14pt;
		text-decoration: none; }

h1 a {
		font-size: 32pt; }

ul.nav-header {
		margin-top: 40px; }

ul.nav-header li {
		list-style-type: none;
		display: inline;
		margin-left: 20px;
		margin-right: 20px; }

h2 {
		font-size: 35pt; }

h3 {
		font-size: 30pt;
		margin: 0;
		padding: 0; }

#container {
		padding: 10px;
		padding-top: 120px;
		padding-bottom: 190px;
		margin: 0px auto;
		font-size: 15pt; }

#container a {
		color: #08c2eb; }

#header-space {
		padding-top: 120px; }

#footer-space {
		padding-bottom: 190px; }

.content {
		background: white; }

section, article {
		width: 800px;
		margin: 5px auto;
		margin-top: 20px;
		padding: 10px;
		padding-top: -40px; }

ul.nav-footer-left, ul.nav-footer-right {
		padding: 0;
		margin: 0;
		margin-top: -25px; }

ul.nav-footer-left li, ul.nav-footer-right li {
		list-style-type: none;
		margin: 0;
		padding: 0;
		padding-top: 40px;
		width: 300px; }

ul.nav-footer-right li {
		padding-top: 40px; }

header span.nav-link {
		float: none;
		width: inherit; }

header span.nav-description {
		display: none; }

footer span.nav-link {
		float: left;
		width: 75px; }

footer span.nav-description {
		float: left;
		width: 225px;
		color: gray; }

footer {
		background: #1e1f1e;
		position: absolute;
		bottom: 0;
		width: 100%;
		height: 170px;
		font-family: 'Chewy', cursive; }

footer a {
		color: white;
		text-decoration: none; }

#footer-wrap {
		width: 600px;
		margin: 0px auto; }

#footer-left {
		float: left;
		width: 300px; }

#footer-right {
		float: right;
		width: 300px;
		text-align: right;
		color: gray; }

#dash-nav {
		list-style-type: none;
		margin: 5px auto;
		padding: 0;
		width: 100%;
		text-align: center;
		font-family: 'Chewy', cursive; }

#dash-nav li {
		display: inline;
		background: #08c2eb;
		color: white;
		padding: 5px;
		text-align: center; }

#dash-nav a {
		color: white; }

#dash-nav span {
		color: white;
		float: left;
		background: #349f12;
		padding: 5px;
		position: relative;
		bottom: 5px; }

#dash-new-btn {
		cursor: pointer;
		color: #08c2eb; }

#dash-new {
		display: none;
		font-family: 'Chewy', cursive;
		z-index: 22;
		background: white;
		position: absolute;
		top: 203px;
		margin-left: 280px;
		height: 55px;
		width: 500px; }

#dash-new a {
		color: white;
		background: #349f12;
		padding: 5px;
		position: relative;
		top: 14px;
		text-align: center; }

#dash-new li {
		list-style-type: none;
		display: inline; }

#menu-btn {
		display: none;
		position: absolute;
		top: 75px;
		right: 5px;
		width: 45px;
		height: 45px;
		text-align: center;
		cursor: pointer;
		z-index: 10;
		transform: skewY(3deg);
		color: white; }

#mobile-nav {
		display: none;
		position: fixed;
		top: 122px;
		right: 2px;
		background: #08c2eb;
		z-index: 11;
		width: 120px;
		height: 150px;
		float: left;
		text-align: left;
		z-index: 5; }

#mobile-nav li {
		list-style-type: none;
		transform: skewY(3deg);
		padding-top: 10px; }

.show {
		display: block !important; }

.dash-show {
		display: block !important; }

.center {
		text-align: center;
		margin: 2px auto; }

.adminDel {
		background: red;
		color: white !important;
		padding: 3px;
		font-family: 'Chewy', cursive;
		float: left; }

.adminEdit {
		background: #349f12;
		color: white !important;
		padding: 3px;
		font-family: 'Chewy', cursive;
		float: right; }

.item {
		margin: 5px; }

#title {
		background: #08c2eb;
		color: white; }

#searchBtn {
		background: #349f12;
		font-family: 'Chewy', cursive;
		color: white;
		padding: 5px;
		border: none;
		font-size: 13pt;
		cursor: pointer;
		border-radius: none; }

#search {
		padding: 5px;
		font-size: 13pt; }

.hideSessionInput {
		display: none; }

/* For sessions.php */
/* #doBtn */
/* #do for options menu */
/* .do is wrap around options and btn */
#doBtn {
		background: #08c2eb;
		font-family: 'Chewy', cursive;
		color: white;
		padding: 5px;
		border: none;
		font-size: 13pt;
		cursor: pointer;
		border-radius: none; }

#do {
		padding: 5px;
		font-size: 13pt; }

.do {
		width: 120px;
		float: right;
		position: relative;
		bottom: 35px; }

#craft {
		background-image: url("../bg/craft.png");
		background-repeat: no-repeat;
		background-position: center center;
		background-attachment: fixed;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
		background-color: black;
		height: 600px;
		z-index: 1;
		margin: 0px auto; }

.overlay {
		z-index: 2;
		background-color: rgba(0, 0, 0, 0.5);
		height: 600px; }

p.intro {
		text-align: center;
		margin: 0px auto;
		position: relative;
		top: 140px;
		color: white;
		font-size: 30pt;
		font-family: 'Chewy', cursive;
		text-decoration: underline; }

h2.intro-title {
		text-align: center;
		margin: 0px auto;
		color: white;
		font-size: 62pt;
		font-family: 'Chewy', cursive;
		position: relative;
		top: 125px; }

p.who {
		text-align: center;
		margin: 0px auto;
		position: relative;
		top: 200px;
		color: white;
		font-size: 30pt;
		font-family: 'Chewy', cursive;
		text-decoration: underline; }

.choose {
		margin: 0px auto;
		text-align: center;
		position: relative;
		top: 200px;
		font-family: 'Chewy', cursive;
		color: white;
		font-size: 25pt; }

a.parent {
		margin-right: 20px; }

a.employee {
		margin-left: 20px; }

#our-building {
		background: #e0223e;
		color: white;
		margin: 0px auto;
		height: 250px; }

.building-info {
		width: 530px; }

.circle {
		border-radius: 1000px;
		border: 1px solid white;
		height: 150px;
		width: 150px;
		padding: 10px;
		margin: 10px;
		text-align: center;
		font-size: 20pt;
		float: left; }

.circle-h {
		font-size: 25pt; }

.c-12 {
		position: relative;
		bottom: 15px; }

.c-3 {
		position: relative;
		top: 0px; }

#our-service {
		background: #0b7e01;
		color: white;
		margin: 0px auto;
		height: 470px;
		position: relative;
		bottom: 20px; }

.service-info {
		width: 360px; }

#our-service-info {
		width: 800px;
		clear: both;
		margin: 0px auto;
		text-align: center; }

#our-service-info p:nth-child(1) {
		padding-top: 10px; }

.c-4 {
		position: relative;
		top: 15px; }

.c-5 {
		position: relative;
		top: 15px; }

#our-staff {
		background: #08c2eb;
		color: white;
		margin: 0px auto;
		height: 250px;
		position: relative;
		bottom: 40px; }

.staff-info {
		width: 360px; }

.c-6 {
		position: relative;
		bottom: 15px; }

.c-7 {
		position: relative;
		bottom: 30px;
		left: 2px; }

#contact {
		background: #6810ad;
		color: white;
		margin: 0px auto;
		height: 600px;
		line-height: 50px; }

address {
		font-size: 20pt; }

#map {
		width: 70%;
		height: 70%;
		margin: 0px auto;
		text-align: center; }

@media (max-width: 1030px) {
		header {
				z-index: 100; }
		#menu-btn {
				display: block;
				font-size: 20pt; }
		#header-wrap {
				width: 100%; }
		h1 a {
				width: 100%;
				font-size: 28pt;
				position: relative;
				top: 5px; }
		#desc {
				font-size: 14pt; }
		nav {
				display: none; }
		#container {
				padding-top: 120px;
				padding-bottom: 240px; }
		#header-space {
				padding-top: 120px; }
		#footer-space {
				padding-bottom: 240px; }
		section, article {
				width: 95%;
				margin: 0px auto;
				margin-top: 20px;
				padding: 10px;
				padding-top: -40px; }
		footer {
				height: 240px; }
		footer span.nav-description {
				width: auto; }
		#footer-wrap {
				width: 100%; }
		#footer-left {
				float: none;
				width: 90%;
				padding: 3px;
				margin: 5px; }
		#footer-right {
				float: none;
				width: 90%;
				padding: 3px;
				margin: 20px 10px 0px 0px; }
		ul.nav-footer-left li, ul.nav-footer-right li {
				width: 100%; }
		ul.nav-footer-right li {
				padding-top: 20px; }
		footer span.nav-link {
				float: left;
				width: 75px; }
		footer span.nav-description {
				float: left;
				width: auto; }
		#dash-new {
				position: absolute;
				top: 250px;
				margin-left: 20px;
				width: 80px;
				height: 220px;
				background: white;
				padding: 3px; }
		#dash-new a {
				position: relative;
				top: 3px;
				margin: 5px;
				padding: 5px;
				text-align: center;
				display: block; }
		#craft {
				background-image: url("../bg/craft-small.png");
				background-repeat: no-repeat;
				background-position: center center;
				background-attachment: scroll;
				-webkit-background-size: cover;
				-moz-background-size: cover;
				-o-background-size: cover;
				background-size: cover;
				height: 600px;
				z-index: 1; }
		#overlay {
				z-index: 2;
				background-color: rgba(0, 0, 0, 0.5);
				height: 600px; }
		p.intro {
				position: relative;
				color: white;
				font-size: 20pt;
				top: 70px; }
		h2.intro-title {
				color: white;
				font-size: 40pt;
				position: relative;
				top: 65px; }
		p.who {
				position: relative;
				top: 108px;
				color: white;
				font-size: 20pt; }
		.choose {
				position: relative;
				top: 105px;
				font-family: 'Chewy', cursive;
				color: white;
				font-size: 20pt; }
		a.parent {
				margin-right: 20px; }
		a.employee {
				margin-left: 20px; }
		#contact {
				height: 700px; } }

@media (max-width: 850px) {
		#our-service-info {
				width: 95%; }
		#our-service {
				height: 500px; }
		#contact {
				height: 650px; } }

@media (max-width: 700px) {
		#our-service {
				height: 550px; }
		#our-service-info p:nth-child(1) {
				padding-top: -10px; }
		#map {
				width: 100%;
				height: 100%; } }

@media (max-width: 540px) {
		#our-building {
				height: 570px; }
		.building-info {
				width: 100%; }
		.circle {
				margin: 10px auto;
				float: none; }
		.service-info {
				width: 100%; }
		#our-staff {
				height: 400px; }
		.staff-info {
				width: 100%; }
		#our-service {
				height: 800px; } }

@media (max-width: 500px) {
		#our-service {
				height: 900px; } }

@media (max-width: 400px) {
		#footer-right {
				margin-top: 50px; }
		footer {
				height: 270px; }
		#container {
				padding-bottom: 270px; }
		#footer-space {
				padding-bottom: 270px; }
		#our-service {
				height: 950px; } }

@media (max-width: 350px) {
		#our-service {
				height: 1000px; } }