/** * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) * http://cssreset.com */
	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;}
	
	/* HTML5 display-role reset for older browsers */
	article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {	
	display: block;}
	
	body {	
	line-height: 1.5;
	}
	
	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;
	}	 
	
	/* end reset*/

/*begin mobile here */ /*navigation bar here */

/* nav bar */
nav {
	    position: fixed;
	    width: 100%;
	    z-index: 1;
	    top: 0;
	   	font-family: 'Roboto Condensed', sans-serif;
	   	background-color: #F5E9EF;
	   	font-size: 20px;
	}

li {
	    float: left;
	}

li a {
	    display: block;
	    color: black;
	    text-align: center;
	    padding: 20px 10px;
	    text-decoration: none;
}

a:link, a:visited { 
        color: black;
        text-decoration: none; 
    }
    
a:hover, a:focus { 
        color: white;
    }

/* end nav bar here */ 

body {
    	width:100%;
    	height:auto;
		background-color: white;
   	}

 #wrapper {
 		padding-top: 60px;
		font-family: 'Open Sans Condensed', sans-serif;
		font-size: 45px;
		
		
	}

 h1 { 
		color: black;
		letter-spacing: 2px;
		text-align: center;
		font-size: 80px;
		font-family: 'Playfair Display', serif;
		padding: 1%;
	}

h2 {
		font-size: 30px;
		font-family: 'Bad Script', cursive;
		padding-bottom: 0.5%;
		text-align: center;
	}

h3 { 
		font-size: 35px;
		text-align: center;
		font-family: 'Bad Script', cursive;
	}

h4 { 
		font-size: 22px;
		text-align: center;
		font-family: 'Bad Script', cursive;
		
	 }

h5 { 	color:black;
   		text-align: center;
		font-size: 22px;
		font-family: 'Open Sans Condensed', sans-serif;
 }

 p { 
   		color:black;
   		text-align: left;
		font-size: 22px;
		margin: 4%;
		font-family: 'Open Sans Condensed', sans-serif;
} 

footer { 
		background-color: #F5E9EF; 

	}

/* homepage css here */


    
.homepage {
		background-image: url(img/italy.jpg);
		width:100%;
		height:auto;
		background-repeat: no-repeat;
		background-size: cover;
		background-attachment: fixed;
		background-position: center;
	} 

/* end homepage css */ 
/* about page css here */ 

.description {
		text-align: left;
		color: black;
		font-size: 1.4em;
		font-family: 'Open Sans Condensed', sans-serif;
	}

.sarahmartinez {
		width:100%;
		height:auto;
		padding-top: 5%;

	}

.aboutme { 
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		justify-content: center;
		padding: 2%;
		text-align: center;
		
	}

#contact{
		display: grid;
		text-align: center;
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows:auto;
		align-items: center;
		justify-content: center;
		width:100%;
		margin-bottom: 3%;
		
		
	}

/* end about page css*/ 

/*design page css starts here */

#griddesign { 
		display: grid;
		text-align: left;
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		align-items: center;
		justify-content: center;
		padding: 6%; 
 	}


#griddesign img {
		margin: 2%;
	    display: block;
	    min-width: 100%;
	    min-height: auto;
	}

#griddesign a:hover img {
	    opacity: 0.5;
	}


/* end design page css */

/* start photography page css here */


#grid-container {
	    display: grid;
	    grid-template-columns: 1fr;
	    grid-template-rows: auto;
	    justify-content: center;
	    align-items: center;
	    grid-gap:0.5%;
	    color: white;
	    width:100%;
	    height:auto; 
	    position:relative; 
	}



#grid-container > div {
	    text-align: center;
	    padding: 3%;
	    font-size: 30px;
	}

#grid-container > div > img {
	    width: 80%;
	    height: 60%;
	    object-fit: cover;
	} 

/* end photography page css */ 
/*end mobile styles */

/* begin tablet styles */
@media only screen and (min-width: 550px) and (max-width: 1000px) {


#grid-container {
	    display: grid;
	    grid-template-columns: 1fr;
	    grid-template-rows: auto;
	    grid-gap:0.5%;
	    color: white;
	    width:100%;
	    height:auto;
	}

#griddesign { 
		display: grid;
		text-align: left;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr 1fr;
		grid-column-gap: 5%;
		align-items: center;
		justify-content: center;
		grid-gap:.50em;
		padding: 6%; 
 	}

.homepage {
		background-image: url(img/italyone.jpg);
		width:100%;
		height:auto;
		background-repeat: no-repeat;
		background-size: cover;
	} 
}
/*end tablet styles*/

/* begin desktop styles */
@media only screen and (min-width: 1001px){

.aboutme { 
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto;
		justify-content: center;
		padding: 2%;
		text-align: center;	
	}

#grid-container {
	    display: grid;
	    grid-template-columns: 1fr 1fr;
	    grid-template-rows: 1fr 1fr;
	    grid-gap:0.5%;
	    color: white;
	    width:100%;
	    height:auto;
	}

#griddesign { 
		display: grid;
		text-align: left;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr 1fr;
		grid-column-gap: 5%;
		align-items: center;
		justify-content: center;
		grid-gap:.50em;
		padding: 6%; 
 	}

.homepage {
		background-image: url(img/italy.jpg);
		width:100%;
		height:100%;
		background-repeat: no-repeat;
		background-size: cover;
	} 

 } 
/* end desktop styles*/