/*
Theme Name: GJ Auto
Theme URI: http://project-title.com
Author: Big Skillet
Author URI: http://bigskillet.com
Version: 1.0
*/

@import url('css/normalize.css');
@import url('//fonts.googleapis.com/css?family=Josefin+Slab:600,700');

/* BASE
********************************************************************************/

html {
	position: relative;
	width: 100%; height: 100%;
	font-size: 62.5%;
}

body {
	position: relative;
	width: 100%; height: 100%;
	font: 3.6rem 'Josefin Slab', serif;
	font-weight: 600;
	color: #000;
}

img {
	max-width: 100%;
	height: auto;
}

a, a:visited {
	text-decoration: none;
	outline: none;
	color: #000;
}

a:hover, a:focus {
	text-decoration: underline;
	outline: none;
	color: #000;
}

#header {
	position: fixed; z-index: 9999;
	padding: 70px 100px 0 100px;
	width: 100%; font-weight: 700;
}

#logo {
	float: left;
	display: block;
}

#nav {
	float: right;
	margin: 0; padding:0;
	list-style: none; 
}

#nav li {
	float: left;
	margin: 0 0 0 70px;
}

#home, #shop, #services, #contact {
	position: absolute;
	width: 100%; height: 100%;
}

#home {
	background: url('images/GJAuto-5245_1.jpg') no-repeat center bottom;
    background-size: cover;
}

#shop {
	background: url('images/texashistory.unt_1.jpg') no-repeat center center;
    background-size: cover;
    top: 100%;
}

	#shop p {
		margin: 25% 0 0 100px;
		font-size: 6.0rem;
	}

#services {
	background: url('images/bg-services.jpg') no-repeat center center;
    background-size: cover;
    top: 200%;
}

	#services ul {
		float: left;
		margin: 25% 0 0 70px; padding: 0;
		list-style: none;
		font-size: 5.5rem;
	}
	
	#services ul:first-of-type {
		margin-left: 100px;
	}
    
#contact {
	background: url('images/bg-contact.jpg') no-repeat center bottom;
    background-size: cover;
    top: 300%; font-weight: 700;
}
    
    #contact .inner { 
	    position: absolute;
	    width: 100%; height: 100%;
	    background: url('images/diagram.png') no-repeat right 40px bottom 40px;
	    background-size: 1000px auto;
	}
    
    #contact .align { position: absolute; bottom: 6%; padding-left: 100px; }
	#contact address { font-style: normal; }

#mobile { display: none; }
#mobile p:first-of-type { font-weight: 700; }

@media (max-width: 1280px) {
	html  { font-size: 42%; }
}

@media (max-width: 960px) {
	
	#desktop { display: none; }
	
	#mobile {
		display: block;
		padding: 40px 40px 100px 40px;
		width: 100%; height: 100%;
	}
	
	html {
		font-size: 48%;
		background: url('images/mobile.jpg') no-repeat center bottom;
		background-size: cover;
	}

}

/* MISC
********************************************************************************/

*, *:before, *:after {
  	-moz-box-sizing: border-box;
  	-webkit-box-sizing: border-box;
  	box-sizing: border-box;
}

.clear:after {
    content: "";
    display: table;
    clear: both;
}