/* MOBILE */

/* 
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/

/* 
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
*/

/* 
  ##Device = Low Resolution Tablets, Mobiles (Landscape)
  ##Screen = B/w 481px to 767px
*/

/* 
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
*/

@media (min-width: 768px) and (max-width: 1024px), (min-width: 768px) and (max-width: 1024px) and (orientation: landscape), (min-width: 481px) and (max-width: 767px), (min-width: 320px) and (max-width: 480px) {
  
	.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: scroll;
	    background-repeat: no-repeat;
	    background-size: cover;
	}

	#guitarBack {
		background-position: center top;
		height: 500px;
	}

/* PORTRAIT */

@media (orientation: portrait) {

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

	#mainMenu {
		display: none;
	}

	#menuToggle {
		display: block;
	}

	#inBetweenImageTheBuild {
		background-image: url("Img/WoodCarvingPortrait.png");
		height: 400px;
	}

	#guitarBack {
		background-image: url("Img/LightBackPortrait.png");
		height: 300px;
	}

	#modelsAndContact {
		width: 60%;
  		margin: 0 auto;
	}

	.block50 {
		clear: both;
		width: 100%;
		height: 50%;
	}

	#openingPage div {
		margin-top: 35px;
		margin-left: 30px;
	}
}

@media (orientation: portrait) and (max-width: 767px) {

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

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

@media (orientation: portrait) and (max-width: 470px) {

	#socialAndPrivacy {
		visibility: hidden;
	}

	#siteDesign {
		visibility: hidden;
	}

	#guitarBack {
		height: 250px;
	}
}

/* LANDSCAPE */

@media (orientation: landscape) and (max-width: 1000px) {

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

	#openingPage div {
		margin-top: -10px;
		margin-left: 30px;
	}

	#openingPage div p {
		margin-top: 5px;
		font-size: 15px;
		letter-spacing: 6px;
		text-align: right;
	}

	.titleLeftParagraphRight, .titleRightParagraphLeft {
		margin-top: 50px;
	}

	#theBuildHeader h1 {
		margin-bottom: 50px;
	}

	#inBetweenImageTheBuild {
		background-image: url("Img/WoodCarving75.png");
		height: 400px;
	}

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

@media (orientation: landscape) and (max-width: 660px) {

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

	#openingPage div {
		margin-top: -20px;
		margin-left: 15px;
	}

	.titleLeftParagraphRight, .titleRightParagraphLeft {
	margin-top: 20px;
	}

	#theBuildHeader h1 {
		margin-bottom: 20px;
	}

	#inBetweenImageTheBuild {
		background-image: url("Img/WoodCarving35.png");
		height: 200px;
	}

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



/* GENERAL */

@media (max-width: 1000px) {

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

}

@media (max-width: 812px) {			/* Moving over to mobile navigation */

	body {
		margin-top: 0;
	}

	#mainMenu {
		display: none;
	}

	.topnav {
		display: block;
	}
}

@media (max-width: 767px) {
	.titleLeftParagraphRight, .titleRightParagraphLeft {
		text-align: center;
		margin-top: 40px;
	}

	.titleLeftParagraphRight h1, .titleRightParagraphLeft h1 {
		display: block;
		max-width: 100%;
		margin-bottom: 40px;
	}

	.titleLeftParagraphRight h1 {
		text-align: left;
		margin-right: auto;
		margin-left: 10px;
	}

	.titleRightParagraphLeft h1 {
		text-align: right;
		margin-left: auto;
		margin-right: 10px;
	}

	.titleLeftParagraphRight p, .titleRightParagraphLeft p {
		clear: both;
		width: auto;
		margin-right: 15px;
		margin-left: 15px;
	  	-ms-text-align-last: left;			/* In order to make it work in IE */
	  	-moz-text-align-last: left;		/* In order to make it work in Firefox */
	  	text-align-last: left; 			/* Will not work in Safari :( */  	
	}

	.leftImage, .rightImage {
		float: none;
	    /*border:1px solid #79412a;*/
	}

	#theBuildPage1 p {
		margin-top: 100px;
	}

	#theBuildHeader h1 {
		margin-bottom: 10px;
	}
	#inBetweenImageTheBuild {
		background-image: url("Img/WoodCarvingPortrait1024x768.png");
		height: 300px;
	}

	#theBuildPage2 img {
		margin-top: 20px;
	}

	#privacy {
		visibility: hidden;
	}
}

@media (max-width: 660px) {

	#openingPage div p {
		margin-top: 0;
		font-size: 12px;
		letter-spacing: 3px;
		text-align: right;
	}

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