/*Applied to all pages for mobile style*/
@media only screen and (max-width: 450px) {
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-family: Superclarendon, sans-serif;
} 

.col-1 {width: 0%-8.33%}
.col-2 {width: 8.33%-16.66%}
.col-3 {width: 16.67%-25%}
.col-4 {width: 25.1%-33.33%}
.col-5 {width: 33.34%-41.66%}
.col-6 {width: 41.67%-50%}
.col-7 {width: 50.1%-58.33%}
.col-8 {width: 58.34%-66.66%}
.col-9 {width: 66.67%-75%}
.col-10 {width: 75.1%-83.33%}
.col-11 {width: 83.34%-91.66%}
.col-12 {width: 91.67%-100%}
[class*="col-"] {
	float: left;
	padding: 15px;
}


/*Moving header section*/


header {
	position: sticky;
	position: -webkit-sticky; /*for Safari*/
	top: 0;
	opacity: 1;
	z-index: 1;
	align-items: center;
	text-align: center;
	background: #fff;
}

#headlogotext {
	align-items: center;
	text-align: center;
	background: #fff;
	font-size: 2vw;
}

#headlogotext > img {
	position: relative;
	top: 0.5vw;
	width: 10%;
	height: 10%;
}

header > a  {
	text-decoration: none;
}

header > a:visited {
	color: #000;
}

/*Hamburger Menu*/


/*Hamburger icon set up*/
#navigation {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1;
}

#navigation #checkbox {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	width: 10vw;
	height: 10vw;
	opacity: 0;
}

#navigation #hamburgericon {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 11vw;
	height: 11vw;
	padding: 1vw;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}

/*3 lines set up*/
#navigation #hamburgericon > div {
	position: relative;
	flex: none;
	width: 50%;
	height: 0.5vw;
	background-color: #000;
	display: flex;
	align-items: center;
	justify-content: center;
}

#navigation #hamburgericon > div:before,
#navigation #hamburgericon > div:after {
	content: "";
	position: absolute;
	z-index: 1;
	top: -1.25vw;
	width: 100%;
	height: 0.5vw;
	background: inherit;
}

#navigation #hamburgericon > div:after {
	top: 1.25vw;
}

/*Hamburger menu change to cross when pressed*/
#navigation #checkbox:checked + #hamburgericon > div {
	transform: rotate(45deg);
}

#navigation #checkbox:checked + #hamburgericon > div:before,
#navigation #checkbox:checked + #hamburgericon > div:after {
	top: 0;
	transform: rotate(90deg);
}

/*Get menu to appear when hamburger pressed*/
#navigation #checkbox:checked ~ #navmenu {
	visibility: visible;
}

#navigation #checkbox:checked ~ #navmenu > div {
	transform: scale(1);
	transition-duration: 0.75s;
}

#navigation #checkbox:checked ~ #navmenu > div > div {
	opacity: 1;
	transition: opacity 0.4s ease 0.4s;
}

#navigation #navmenu {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	visibility: hidden;
	overflow: hidden;
	display: flex;
	align-items: left;
	justify-content: left;
}

#navigation #navmenu > div {
	background: #fff;
	width: 30vw;
	height: 100vh;
	display: flex;
	flex: none;
	align-items: left;
	justify-content: left;
	transform: scale(0);
	transition: all 0.4s ease;
}

#navigation #navmenu > div > div {
	text-align: left;
	max-width: 50vw;
	max-height: 100vh;
	opacity: 0;
	transition: opacity 0.4s ease;
}

#navigation #navmenu > div > div > ul > li {
	list-style: none;
	color: #000;
	font-size: 3vh;
	padding: 1vw;
}

#navigation #navmenu > div > div > ul > li > a {
	color: inherit;
	text-decoration: none;
}

#navmenu #pagelinks {
	position: relative;
	top: 6vh;
}

#navmenu #pagelinks > li > a {
	text-decoration: none;
}

#navmenu #pagelinks > li > a:visited,
#navmenu #pagelinks > li > a:link {
	color: #000;
}


/*Contact info section*/


footer {
	position: relative;
	width: 100%;
	height: 10vh;
	background-color: #e0dcd1;
	margin-top: 5vh;
	text-align: center;
}

footer > p {
	font-size: 3vw;
}

#phoneno {
	position: absolute;
	top: 3vw;
	left: 10vw;
}

#email {
	position: absolute;
	bottom: 2vw;
	font-size: 0.75vw;
	left:0;
	right:0;
	}

#otherwebsite {
	position: absolute;
	top: 4vw;
	left: 10vw;
}

#facebook {
	position: absolute;
	top: 4vw;
	right: 10vw;
}
}