@charset "utf-8";
/* CSS Document */

* {
    box-sizing: border-box; /* This makes sure that the padding and border are included in the total width and height of the elements. */
}

/* Each row should be wrapped in a "chunk" class <div>. */
.row:after {
    content: "";
    clear: both;
    display: block;
}

/* https://css-tricks.com/almanac/properties/c/cursor/ */
/* https://css-tricks.com/snippets/css/give-clickable-elements-a-pointer-cursor/ */
cursor: pointer;

/* - */
/* --- start of general -- */
/* ----- */
/* ------- */
html {
	font-size: 0.625em; /* means 1.0rem will be the equivalent of 10px */
	overflow-y: scroll; /* this ensures the main scroll bar is visible */
	height: 100%; /* added as part of code to force footer down. See: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page */
}

body {
	font-family: Sora, Arial, Helvetica, sans-serif;
	background: #FFF; /* white: should be #FFF */
	margin: 0; /* breathing room for the whole page. */
	padding: 0 0 0 0; /* breathing room at the top of the page */
	color: #000; /* text color: black: should be #000 */
	overflow-y: scroll; /* this ensures the main scroll bar is visible for some reason it wasn't enough to only include it in the html class above*/
	height: 100%; /* added as part of code to force footer down */
}

/* ~~ this container surrounds all other divs ~~ */
.container {
	max-width: 1400px;
	margin: 0 auto; /* centered horizontally */
	background: #FFF; /* white: should be #FFF*/
	/* overflow: hidden; /* this declaration makes the .container clear all floated columns within it. */
	zoom: 1; /* this is an IE6 fix */
	min-height: 100vh; /* added as part of code to force footer down. See: http://stackoverflow.com/questions/1575141/make-div-100-height-of-browser-window */
	position: relative; /* added as part of code to force footer down */
}

/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
	padding: 0;
	margin: 0;
}

h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;	 /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
	padding: 0;
	margin: 0;
}

img, a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
	border: none;
}
/* ------- */
/* ----- */
/* --- end of general */
/* - */

#forceFooterDiv {
	padding-bottom: 6.0rem; /* added as part of code to force footer down - height of the footer */	
}

/* - */
/* --- start of sidebar -- */
/* ----- */
/* ------- */
.sidebar {
	/* height: 100%; /* this was necessary to get the scroll bar to appear */
	/* overflow-y: auto; /* so a scroll bar appears if needed */
	padding: 1.0rem 1.0rem 0 1.0rem; /* breathing room for the sidebar */
}

#logo {
	width: 100%;
	height: auto;
	padding: 4.0rem 3.0rem 3.0rem 0;
}

#mobileLogo {
	height: 50px;
	width: auto;
}

#menuIcon {
	height: 38px;
	width: auto;
	float: right;
}

.menu {
	padding-top: 2.0rem; /* top breathing room */
}

/* nav buttons: */
.menu ul {
	list-style: none; /* this removes the list markers */
	font-size: 1.4rem;
	font-weight: 400; /* 400 is the normal font weight */
}

.menu ul li a ~  ul {display: none;} /* hide submenus */
						 
.menu ul li a#navSelected ~ ul {display: block;} /* show submenu of the current page's selected nav */

.menu ul > li > a {
	/*padding: 0.5rem 0 0 0; /* breathing room */
	/* border: 1px solid #666; /* the button outline */
	/* border-radius: 0.3rem; /* the button outline radius */
	margin-bottom: 0.7rem; /* spacing between nav buttons */
}

/* nav links */
.menu ul a { /* grouping these selectors makes sure that your links retain their button look even after being visited */
	display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click instead of just the text reacting. */
	text-decoration: none; /* this removes the typical underline from the link */
	color: #666; /* text color: med-grey */
}


/* each subNav button */
.subNav li {
	padding-left: 1.5rem; /* indentation */
}

/* the last subNav button */
.subNav li:last-of-type {
	margin-bottom: 1.2rem; /* bottom gap to seporate from next nav button */
}

/* when hovering over nav buttons */
.menu ul a:hover { /*this changes the background and text color for both mouse and keyboard navigators */
	color: #000; /* text color: black */
}

#navSelected {
	color: #A35F1A; /* text color: dark orange */
}

#subNavSelected {
	color: #A35F1A; /* text color: dark orange */
}

ul.subNav a:hover { /*this changes the background and text color for both mouse and keyboard navigators */
	color: #000; /* text color: black */
}
/* ------- */
/* ----- */
/* --- end of sidebar */
/* - */


/* - */
/* --- start of content -- */
/* ----- */
/* ------- */
.content {
	padding: 3.0rem 1.0rem 0 1.0rem;
}

.content a {
	text-decoration: none;
}

.content H1 {
	font-size: 3.0rem;
	font-weight: 700; /* 700 is the bold font weight */
	padding: 2.0rem 0 1.0rem 0;
}

.content p {
	font-size: 1.3rem;
	padding: 0 0 1.4rem 0;
	line-height: 2.0rem;
}

.content ul {
	padding: 0 0 1.4rem 1.0rem;
	line-height: 1.3rem;
}

.content li {
	font-size: 1.3rem;
	line-height: 2.0rem;
}

.content img {
	max-width: 100%; /* won't grow beyond original width */
	height: auto;
}

.no-bullet {
	list-style: none; /* Removes the bullet */
}

.bold-item {
	font-weight: 700; /* 700 is the bold font weight */
}

.bold-red {
    font-weight: 700; /* 700 is the bold font weight */
    color: red;
}

/* --- start of homepage --- */
.homepagePic {
	width: 100%;
	height: auto;
	margin-bottom: 0.0rem;
}
/* --- end of homepage --- */

/* --- start of banner page --- */
.bannerPic {
	width: 100%;
	height: auto;
	margin-top: 0.0rem;
	margin-bottom: 0.0rem;
}

.instructionContent .bannerPic {
	width: 100%;
	height: auto;
	margin-top: 0.0rem;
	margin-bottom: 0.0rem;
}
/* --- end of banner page --- */

/* --- start of photo gallery page --- */
.galleryPic {
	width: 100%;
	height: auto;
	margin-bottom: 1.4rem;
}
/* --- end of photo gallery page --- */

/* --- start of instruction page --- */
/* Target all <img> elements inside the .instructionContent*/
.instructionContent img {
	width: 100%;
	height: auto;
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
}

/* For desktop only: */
@media only screen and (min-width: 1100px) {
	/* Target all <p> elements inside the .instructionContent*/
	.instructionContent p {
		width: 60%;
		margin: 0 auto;
	}
	
	/* Specifically target <p> elements with the no-center class */
	.instructionContent p.no-center {
		margin: 0;
		width: 70%;
	}
}
/* --- end of instruction page --- */

/* --- start of button code --- */
.button {
    display: inline-block;
	padding: 0.8rem 1.0rem 0.8rem 1.0rem;
    background-color: #F68E1E; /* button color: vivid orange */
    color: #000; /* black: should be #000 */
    text-decoration: none; /* Remove underline */
    border-radius: 0.3rem; /* Slightly rounded corners */
    font-size: 1.3rem;
	font-weight: 700; /* 700 is the bold font weight */
	border: none;
	margin-right: 1.0rem;
}

.button:hover {
	color: #FFF; /* white: should be #FFF */
    background-color: #000; /* background color on hover: black: should be #000 */
}

/* --- end of button code --- */

/* --- start of Contact/Quote --- */
form {
    max-width: 100%;
    margin: auto;
    padding: 2.0rem;
    border: 0.1rem solid #ccc;
    border-radius: 0.5rem;
}

label {
    display: block;
    margin-bottom: 0.5rem;
}

input[type="text"], input[type="email"], textarea {
    width: 100%;
    padding: 1.0rem;
    margin-bottom: 1.5rem;
    border: 0.1rem solid #ccc;
    border-radius: 5px;
	font-size: 1.3rem;
}
/* --- end of Contact/Quote --- */

.footer {
    color: #666; /* #0099cc is RW Blue */
    text-align: center;
    padding: 0.9rem 0 0 0;
	position: absolute; /* added as part of code to force footer down */
	bottom: 0; /* added as part of code to force footer down */
	width: 100%; /* added as part of code to force footer down */
	height: 3.0rem; /* added as part of code to force footer down */
}


/* - */
/* --- start of responsive css -- */
/* ----- */
/* ------- */
[class*="per-"] {
    float: left;
}

/* nav bar */
#toggleMenu {
	display: none; /* hides the menu, because we are assuming mobile-first */
}

/* For mobile phones: */
.per-m-0 {display: none;}
.per-m-10 {display:inherit; width: 10%;}
.per-m-20 {display:inherit; width: 20%;}
.per-m-30 {display:inherit; width: 30%;}
.per-m-40 {display:inherit; width: 40%;}
.per-m-50 {display:inherit; width: 50%;}
.per-m-60 {display:inherit; width: 60%;}
.per-m-70 {display:inherit; width: 70%;}
.per-m-80 {display:inherit; width: 80%;}
.per-m-90 {display:inherit; width: 90%;}
.per-m-100 {display:inherit; width: 100%;}

/* For tablet: */
@media only screen and (min-width: 768px) {
	#toggleMenu {display:block;} /* shows the menu for desktop viewing */
	
	.menu ul > li > a {
		border: none; /* remove the button boarder in tablet mode */
	}
    
	.per-t-0 {display: none;}
	.per-t-10 {display:inherit; width: 10%;}
	.per-t-20 {display:inherit; width: 20%;}
	.per-t-30 {display:inherit; width: 30%;}
	.per-t-40 {display:inherit; width: 40%;}
	.per-t-50 {display:inherit; width: 50%;}
	.per-t-60 {display:inherit; width: 60%;}
	.per-t-70 {display:inherit; width: 70%;}
	.per-t-80 {display:inherit; width: 80%;}
	.per-t-90 {display:inherit; width: 90%;}
	.per-t-100 {display:inherit; width: 100%;}
}

/* For desktop: */
@media only screen and (min-width: 1100px) {
	#toggleMenu {display:block;} /* shows the menu for desktop viewing */
	
	.menu ul > li > a {
		border: none; /* remove the button boarder in desktop mode */
	}
    
	.per-d-0 {display: none;}
	.per-d-5 {display:inherit; width: 5%;}
	.per-d-10 {display:inherit; width: 10%;}
	.per-d-15 {display:inherit; width: 15%;}
	.per-d-20 {display:inherit; width: 20%;}
	.per-d-25 {display:inherit; width: 25%;}
	.per-d-30 {display:inherit; width: 30%;}
	.per-d-35 {display:inherit; width: 35%;}
	.per-d-40 {display:inherit; width: 40%;}
	.per-d-45 {display:inherit; width: 45%;}
	.per-d-50 {display:inherit; width: 50%;}
	.per-d-55 {display:inherit; width: 55%;}
	.per-d-60 {display:inherit; width: 60%;}
	.per-d-65 {display:inherit; width: 65%;}
	.per-d-70 {display:inherit; width: 70%;}
	.per-d-75 {display:inherit; width: 75%;}
	.per-d-80 {display:inherit; width: 80%;}
	.per-d-85 {display:inherit; width: 85%;}
	.per-d-90 {display:inherit; width: 90%;}
	.per-d-95 {display:inherit; width: 95%;}
	.per-d-100 {display:inherit; width: 100%;}
}

/* ------- */
/* ----- */
/* --- end of responsive css */
/* - */