/* Styles
================================================== */

@-webkit-viewport { width: device-width; }
@-moz-viewport { width: device-width; }
@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }

/* #Reset & Basics (Inspired by E. Meyers)
================================================== */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block; }
body {line-height: 1; }
ol, ul {list-style: none; }
blockquote, q {quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after {content: '';content: none; }
table {border-collapse: collapse;border-spacing: 0; }

body {background: #fff;font-size: 100%; line-height: 1.5em;color: #666053;-webkit-font-smoothing: antialiased;-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;}
body,h1,h2,h3,h4,h5,h6,p,ul,ol,dl,input,textarea { font-family: 'Lora', serif; font-weight: normal; line-height:  1.5;}
p { margin: 0 0 1em; }
ul { list-style-type: none; }
address { margin-top: 1.5em; font-style: italic; }
strong {font-family: 'Lora', serif; font-weight: bold;} 
a {text-decoration: none; color: #666053;}
/*html {-webkit-backface-visibility: hidden;} Creates a problem with Chrome and a fixed header. */

 html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
  
.touch a:hover {
	text-decoration: none;
}


/* get rid of those system borders being generated for A tags */
a:focus {-moz-outline-style:none; outline:none;}
a:visited {color: #666053;}

/* Main Styles */
.container {
	max-width: 1700px;
	margin: 0 auto;
}

header {
	width: 1000px;
	margin: 0 auto;
}

.hero {
	margin: 9.5em auto 0 auto;
	width: 1000px;
	overflow: hidden;
}
.hero img {
	width: 100%;
}
.logo {
	position: relative;
	z-index: 2;
	top: 10.5em;
	left: -4.75em;
    padding: 6.9em 0 0 0;
    overflow: hidden;
    background-image: url("../images/ph_logo.svg"); 
    background-repeat: no-repeat;
    -webkit-background-size: contain;
    -o-background-size: contain;
    -moz-background-size: contain;
    background-size: contain;
    -ms-behavior: url(http://travellingdesign.com/backgroundsize.min.htc);
    height: 0;
    width: 30.875em;
    float: left;
}

nav {
	position: absolute;
	right: 60px;
	top: 60px;

}
nav li {
	float: left;
	margin-left: 3.375em;
	font-family: 'Playfair Display', serif;
	font-style: italic;
	font-size: 1.25rem;
	letter-spacing: -2px;
}

h1, h2 {
	font-family: 'Playfair Display', serif;
	font-style: italic;
	font-size: 3rem;
	letter-spacing: -3px;
	padding-bottom: 58px;
	border-bottom: solid 1px #AFA48E;
	margin-bottom: 150px;
	margin-top: 145px;

}
h1 {
	margin-top: 55px;
}

p {
	font-size: 1.375rem;
}
.clear {
	clear: both;
}

.mainCopy {
	max-width: 40rem;
	width: 40rem;
	margin: 0 auto;
	text-align: center;
}

.mainCopy a {
	text-decoration: underline;
	color: #AFA48E;
}

.portfolio {
	text-align: center;
}
.portfolio a{
	display: inline-block;
	margin:25px;
	width: 300px;
	height: 450px;
	background-size: cover;
}
.pinterest-grouping {
	position: relative;
	display: inline-block;
}
.pinterest-grouping a:first-of-type {
	position: absolute;
	display: none;
	top: 0.5rem;
	left: 0.5rem;
	width: 25px;
	height: 25px;
}

.lowerlogo {
	margin: 153px auto 40px auto;
	width: 356px;
}
.lowerlogo img{
	width: 100%;
}

.tdLink {
	font-family: 'Playfair Display', serif;
	font-style: italic;
	font-size: 0.75rem;
	letter-spacing: -1.5px;
	text-align: center;
}







/*---------------------   MEDIA QUERIES   ------------------------*/


@media only screen and (max-width: 2600px) and (max-height: 1500px){

	.hero {
	height: 60vh;
}
.hero img {
	margin-top: -200px;
}
}

@media only screen and (max-width: 2600px) and (max-height: 1250px){

	.hero {
	height: auto;
}
.hero img {
	margin-top: 0;
}
}


@media only screen and (max-width: 1700px) and (max-height: 1500px){

	.hero {
	height: auto;
}
.hero img {
	margin-top: 0;
}
}

@media only screen and (max-width: 1700px) and (max-height: 1200px){

	.hero {
	height: 60vh;
}
.hero img {
	margin-top: -200px;
}
}




@media only screen and (max-width: 1700px) {

header {
	width: 700px;
	margin: 0 auto;
}

.logo {
	top: 6.5em;
	left: -3.5em;
    padding: 5.25em 0 0 0;
    width: 23.56em;
}

.hero {
	margin: 5.25em auto 0 auto;
	width: 700px;
}

nav {
	right: 47px;
	top: 32px;

}
nav li {
	margin-left: 3.125em;
	font-size: 1.125rem;
	letter-spacing: -1.5px;
}

h1, h2 {
	font-size: 2.25rem;
	letter-spacing: -2.5px;
	padding-bottom: 53px;
	margin-bottom: 100px;
	margin-top: 133px;

}
h1 {
	margin-top: 50px;
}

p {
	font-size: 1.25rem;
}

.mainCopy {
	width: 31.25rem;
	text-align: center;
}

.lowerlogo {
	margin: 100px auto 40px auto;
	width: 300px;
}


}

@media only screen and (max-width: 1400px) and (max-height: 700px){

	.hero {
	height: 60vh;
}
.hero img {
	margin-top: -200px;
}

h1 {
	margin-top: 20px;
}
}

@media only screen and (max-width: 1400px) and (max-height: 620px){

	.hero {
	height: auto;
}
.hero img {
	margin-top: 0;
}

h1 {
	margin-top: 50px;
}
}

@media only screen and (max-width: 1100px) and (max-height: 1500px){

	.hero {
	height: auto;
}
.hero img {
	margin-top: 0;
}
}
@media only screen and (max-width: 1100px) and (max-height: 940px){

	.hero {
	height: 60vh;
}
.hero img {
	margin-top: -200px;
}
}
@media only screen and (max-width: 1100px) and (max-height: 620px){

	.hero {
	height: auto;
}
.hero img {
	margin-top: 0;
}
}


/*---------------------------------   iPAD HORIZONTAL   -------------------------------*/

@media only screen and (max-width: 1100px) {

header {
	width: 550px;
	margin: 0 auto;
}

.logo {
	top: 3em;
	left: -3.25em;
    padding: 4.56em 0 0 0;
    width: 20.6em;
}

.hero {
	margin: 2em auto 0 auto;
	width: 550px;
}

nav {
	right: 32px;
	top: 23px;

}
nav li {
	margin-left: 2.5em;
	font-size: 0.875rem;
	letter-spacing: -1px;
}

h1, h2 {
	font-size: 1.5rem;
	letter-spacing: -1.5px;
	padding-bottom: 36px;
	margin-bottom: 90px;
	margin-top: 100px;
	text-align: center;

}
h1 {
	margin-top: 30px;
}

p {
	font-size: 1.125rem;
}

.mainCopy {
	width: 31.25rem;
	text-align: left;
}

.portfolio a{
	margin:20px;
	width: 260px;
	height: 390px;
}

.lowerlogo {
	margin: 119px auto 50px auto;
	width: 244px;
}


}

/*---------------------------------   iPAD VERTICAL   -------------------------------*/

@media only screen and (max-width: 800px) {

nav li {
	margin-left: 1.875em;
}

}

@media only screen and (max-width: 800px) and (max-height: 940px){

	.hero {
	height: 70vh;
}
.hero img {
	margin-top: -90px;
}
}

/*---------------------------------   iPHONE 6+ with HEADER CHANGE   -------------------------------*/

@media only screen and (max-width: 760px) {

header {
	width: 100%;
	background-color: #AFA48E;
	text-align: center;
	height: 89px;
}
.logo {
	top: 1.25em;
	margin: 0 auto;
	left: 0;
	background-image: url("../images/ph_logo-white.svg");
    padding: 3.8125em 0 0 0;
    width: 17.125em;
    float: none;
}

.hero {
	margin: 4em auto 0 auto;
	width: 100%;
	height: 40vh;
}
.hero img {
	margin-top: -20vh;
}

nav {
	top: 7em;
	right: 0;
	left: 0;
	margin: 0 auto;
	height: 70px;
	width: 255px;
}

nav li:first-of-type {
	margin-left: 0;
}

h1, h2 {
	font-size: 1.5rem;
	letter-spacing: -1.5px;
	padding-bottom: 28px;
	margin-bottom: 70px;
	margin-top: 70px;
	text-align: center;

}
h1 {
	margin-top: 30px;
}

p {
	font-size: 1rem;
}

.mainCopy {
	width: 70%;
	margin-left: 15%;
	margin-right: 15%;
}

.portfolio a{
	margin:25px;
	width: 300px;
	height: 450px;
}

.lowerlogo {
	margin: 112px auto 44px auto;
	width: 200px;
}

}

@media only screen and (max-width: 800px) and (min-height: 1200px){

	.hero {
	height: auto;
}
.hero img {
	margin-top: 0;
}
}

/*---------------------------------   iPHONE 6   -------------------------------*/

@media only screen and (max-width: 400px) {

h1, h2 {
	font-size: 1.25rem;
	letter-spacing: -1px;
	padding-bottom: 28px;
	margin-bottom: 70px;
	margin-top: 70px;
	

}
h1 {
	margin-top: 34px;
}

.mainCopy {
	width: 80%;
	margin-left: 10%;
	margin-right: 10%;
}

.portfolio a{
	margin:20px auto;
	width: 260px;
	height: 390px;
}


.lowerlogo {
	margin: 92px auto 32px auto;
	width: 150px;
}

}

/*---------------------------------   iPOD   -------------------------------*/

@media only screen and (max-width: 350px) {

h1, h2 {
	
	letter-spacing: -1px;
	padding-bottom: 23px;
	margin-bottom: 66px;
}

.mainCopy {
	width: 90%;
	margin-left: 5%;
	margin-right: 5%;
}


.lowerlogo {
	margin: 92px auto 32px auto;
	width: 150px;
}

}

@media only screen and (max-height: 600px){

	.hero {
	height: auto;
}
.hero img {
	margin-top: 0;
}
}