body, html {
	width: 100%;
	height: 100%; 						/* This is a prerequisite for being able to set the height of a background image to 100% (see .parallax code) */
}

body {
	overflow-x: hidden;
    background-color: #050505;
    color: #eaaa61;
    font-family: 'Lato', sans-serif;
    -webkit-font-smoothing: antialiased;/* Make font look the same in google */
    -moz-osx-font-smoothing: grayscale; /* And also in Firefox */
	font-style: normal;
	font-weight: 400;
	font-size: 18px;
	line-height: 23px;
	margin-top: 36px;
}

h1 {
	font-family: 'Fira Sans', sans-serif;
	font-style: normal;
	font-weight: normal;
	font-size: 45px;
	line-height: normal;
	text-transform: uppercase;
}

a {
	text-decoration: none;
	color: inherit;
	font-size: 12px;
	letter-spacing: 3px;
	transition: color 0.3s ease;
	color: #0b0709;
}

a:hover
{
  color: #79412a;
}

.hidden {								/* "display: none" is not used because screen readers cannot read it */
	position:absolute;
	top: -9999px;
	left: -9999px;
}

/* DESKTOP NAVIGATION */

#mainMenu {
	position: fixed;
	z-index: 3;
	top: 0;
	width: 100%;
	transition: top 0.3s;
	line-height: 10px;
}

#mainMenu ul {
	width: 700px;
	margin-left: auto;
}

#mainMenu li {
	display: inline-block;
	background-color: #e4caac;
	padding: 10px 10px;
	margin-left: -1px;					/* Fix for a bug in Safari, where a small line is still visible between the elements */
}

#mainMenu li:first-child {
	padding-left: 25px;
	border-radius: 0 0 0 30px;
}

#mainMenu li:last-child {
	padding-right: 25px;
	border-radius: 0 0 30px 0;
}

.headroom {
    will-change: transform;
    transition: transform 200ms linear;
}
.headroom--pinned {
    transform: translateY(0%);
}
.headroom--unpinned {
    transform: translateY(-100%);
}

/* JAVASCRIPT HAMBURGER MENU */

/* Style the navigation menu */
.topnav {
	display: none;
	overflow: hidden;
	background-color: #050505;
	position: absolute;
	z-index: 5;
	right: 0;
	}

/* Hide the links inside the navigation menu (except for logo/home) */
.topnav #myLinks {
	display: none;
	}

/* Style navigation menu links */
.topnav a {
	color: #eaaa61;
	padding: 14px 16px;
	text-decoration: none;
	font-size: 17px;
	display: block;
	}

/* Style the hamburger menu */
.topnav a.icon {
	background: black;
	display: block;
	position: absolute;
	right: 0;
	top: 0;
	}

/* Add a grey background color on mouse-over */
.topnav a:hover {
	background-color: #eaaa61;
	color: black;
	}

/* Style the active link (or home/logo) */
.active {
	background-color: transparent;
	color: white;
}

/* OPENING PAGE & SECTIONS*/

header, section {
	position: relative;
	width: 100%;
	height: 100%;
}

.parallax {								/* With this CSS class a background stays fixed with a 100% height and the container below will scroll over it */
	width: 100%;
	height: 100%;						/* Also the body and html tags need to be set to 100% */
	background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
}

#openingPage {
	background-image: url("Img/Opening.png");
}

#logoWrapper {
	display: inline-block;
	margin-top: 10px;
	margin-left: 30px;
}

#logoWrapper p {
	margin-top: 10px;
	font-family: 'Nunito', sans-serif;
	letter-spacing: 10px;
	text-align: right;

}

/* SETTING UP THE ANCHORS */

.anchor {
	width: 100%;
	position: relative;
}

.scrollTo {
	position: absolute;
	left: 0px;
	top: -120px;
}

/* ALIGNMENT OF ARTICLES */

.titleLeftParagraphRight, .titleRightParagraphLeft {
	width: 100%;
	margin-top: 200px;
}

.titleLeftParagraphRight:after, .titleRightParagraphLeft:after {
	content: "";
	display: block;
	clear: both;
}

.titleLeftParagraphRight h1, .titleRightParagraphLeft h1 {
	display: inline-block;
	max-width: 270px;
	margin-bottom: 50px;
}

.titleLeftParagraphRight p, .titleRightParagraphLeft p {
	margin-top: 10px;
	margin-bottom: 10px;
}

/* TITLE LEFT, PARAGRAPH RIGHT */

.titleLeftParagraphRight {
	text-align: right;
}

.leftImage {
	float:left;
    min-width:300px;
    max-width:900px;
    width:39%;
}

.titleLeftParagraphRight h1 {
	margin-right: 50%;
}

.titleLeftParagraphRight p {
	width: 52%;
	margin-right: 30px;
	text-align: justify;
  	-ms-text-align-last: right;			/* In order to make it work in IE */
  	-moz-text-align-last: right;		/* In order to make it work in Firefox */
  	text-align-last: right; 			/* Will not work in Safari :( */
  	float: right;
}

/* TITLE RIGHT, PARAGRAPH LEFT */

.rightImage {
	float: right;
	min-width:300px;
    max-width:900px;
    width:39%;
}

.titleRightParagraphLeft h1 {
	margin-left: 50%;
}

.titleRightParagraphLeft p {
	width: 52%;
	margin-left: 30px;
	text-align: justify;
	float: left;
}

#theBuildPage1 p {
	margin-top: 20%;
}

#theBuildHeader {
	clear: both;
}

#theBuildHeader h1 {
	clear: both;
	margin-bottom: 200px;
	margin-top: 30px;
}

#theBuildPage1 img {
    width:33%;
}

#inBetweenImageTheBuild {
	background-image: url("Img/WoodCarving.png");
	background-position: center;
	height: 600px;
}

#theBuildPage2 img {
	width:50%;
}

#reviews a {
	color: #eaaa61;
}

.reviewRight {
	display: inline-block;
	margin-top: 70px;
	margin-bottom: 70px;
}

.reviewRight p {
	width: 52%;
	margin-right: 30px;
	text-align: justify;
  	-ms-text-align-last: right;			/* In order to make it work in IE */
  	-moz-text-align-last: right;		/* In order to make it work in Firefox */
  	text-align-last: right; 			/* Will not work in Safari :( */
  	float: right;
}

#guitarBack {
	background-image: url("Img/LightBack.png");
	height: 500px;
	background-position: center top;
}

#bottomPage {
	position: relative;
}

#modelsAndContact {
	position: relative;
	height: 100%;
}

.block50 {
	float: left;
	width: 50%;
	height: 90%;
}

.keepAspectRatioBoxVerticallyAligned {
	width: 100%;
	padding-top: 85%;					/* Is necessary in order to maintain aspect ratio */
	top: 50%;
  	transform: translateY(-50%);
}

#guitarCollection {
	position: relative;
	background-image: url("Img/GuitarCollection.png");
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}

#contact {
	position: relative;
	text-align: center;
	top: 50%;
  	transform: translateY(-50%);
}

#contactText {
	position: absolute;
	width: 100%
}

.verticalAlign {
	top: 50%;
  	transform: translateY(-50%);
}

#contact p {
	margin-top: 50px;
}

a[href^=tel] {									/* Because IOS changes color of phone numbers it recognizes */
    color: inherit;
    text-decoration: none;
}

footer {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 10%;
}

/* Left div within footer */

#siteDesign {
	position: relative;
	width: 50%;
	height: 100%;
	float: left;
}

#siteDesign div {
	position: absolute;
	left: 10px;
	bottom: 0;
}

#siteDesign p {
	position: relative;
	display: inline;
	margin-right: 10px;
}

/* Right div within footer */

#socialAndPrivacy {
	position: relative;
	bottom: 0;
	width: 50%;
	height: 100%;
	display: inline-block;
	float: left;
}

#socialAndPrivacy div {
	position: absolute;
	height: 35px;
	bottom: 0;
	right: 10px;

}

#social {
	position: relative;
	float: right;
	height: 100%
}

#socialAndPrivacy li {
	position: relative;
	display: inline-block;
	padding: 0 5px;
}

 #instagram img, #vimeo img {
	display: none;
}

#socialAndPrivacy li:first-child {
	padding-left: 0;
}

#socialAndPrivacy li:last-child {
	padding-right: 0;
}

#privacy {
	position: relative;
	float: right;
	height: 100%;
	margin-right: 40px;
	line-height: 35px;
}

#privacy a {
	color: #eaaa61;
}