/** * 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*/



/*this is the default css style (for all device widths)*/


	#wrapper {
		width: 80%;
		max-width: 1000px;
		margin: 2% auto;
		background-color: #B3D6E6;
	}


	body {
		background-color: #95B2BF;
	}


	h1 {
		font-size: 45px;
		text-align: center;
		color: #B3D6E6;
		padding: 8px;
		background-color: #627680;
		font-family: 'Lexend Deca', sans-serif;
		margin-bottom: 13px;
	}


	#homepage {
		font-size: 30px;
		color: #637780;
		text-align: center;
		padding: 15px;
		margin-bottom: 15px;
	}


	.center {
		width: 60%;
	}


	.window {
		width: 42%;
		display: block;
		margin-left: auto;
		margin-right: auto;
		border: 5px dotted #637780;
		padding: 5px;
	}

	h2 {
		font-size: 45px;
		text-align: center;
		color: #B3D6E6/*#323B40*/;
		padding: 5px;
		margin-bottom: 8px;
		font-family: 'Lexend Deca', sans-serif;
		background-color: #627680;
	}


	p {
		font-size: 27px;
		color: #637780;
		margin-left: auto;
		margin-right: auto;
		padding: 9px;
		/*border: 1px solid brown;*/
		font-family: 'Shadows into Light two', cursive;
	}

	.text {
		margin-right: 15px;
		margin-left: 15px; 
	}

	.center {
		display: block;
 		 margin-left: auto;
 		 margin-right: auto;
	}


	#beach {
		margin: 15px;
		margin-bottom: 10px;
	}


	#morelia {
		/*border: 1px solid blue;*/
		margin-bottom: 0px;
		margin-top: 17px;
	}


	#moreliapics {
		display: block;
		width: 100%;
		margin-top: auto;
		margin-bottom: auto;
		/*border: 1px solid black;*/

	}

	#moreliaone {
		width: 71%;
		transform: rotate(-3deg);
		margin: auto;
		border: 6px solid white;
	}

	#moreliatwo {
		width: 73%;
		transform: rotate(3deg);
		margin: auto;
		border: 6px solid white;
	}


	#ixtapa {
		margin-top: 23px;
	}

	#beachone {
		display: block;
		margin-right: auto;
		margin-left: auto;
		transform: rotate(-3deg);
		border: 6px solid white;
		width: 80%;
	}

	#beachtwo {
		display: block;
		margin-right: auto;
		margin-left: auto;
		transform: rotate(4deg);
		border: 6px solid white;
		width: 80%;
	}


	#guanajuatopics {
		display: block;
		width: 100%;
		margin-top: auto;
		margin-bottom: auto;
		/*border: 1px solid black;*/

	}

	#guanajuato1 {
		width: 70%;
		transform: rotate(-3deg);
		margin: auto;
		border: 6px solid white;
	}

	#guanajuato2 {
		width: 70%;
		transform: rotate(3deg);
		margin: auto;
		border: 6px solid white;
	}


	.buttons {
		text-align: center;
		font-size: 20px;
		margin-bottom: 20px;
	}


	a {
	  	text-decoration: none;
	 	 display: inline-block;
	 	 padding: 8px 16px;
	}


	a:hover {
	  	background-color: #637780;
	  	color: black;
	}


	.previous {
	  	background-color: #95B2BF;
	  	color: white;
	}


	.next {
	  	background-color: #95B2BF;
	  	color: white;
	}


	.round {
	  	border-radius: 100%;
	}

	.home {
		background-color: #95B2BF;
	  	color: white;
	}

	footer {
		color: #9DBDCC;
		text-align: center;
		background-color: #627680;
		font-family: 'Lexend Giga', sans-serif;
	}

/*end default*/

/* tablet/desktop styles*/
@media only screen and (min-width: 800px) {
	#wrapper {
		width: 80%;
		max-width: 1000px;
		margin: 1% auto;
		background-color: #B3D6E6;
	}


	.text {
		margin: 20px;
		margin-left: 50px;
	}


	#morelia {
		display: grid;
		grid-template-columns: 1fr 3fr;
		/*border: 1px solid blue;*/
		margin-bottom: 20px;
	}


	#moreliapics {
		display: block;
		width: 100%;
		margin-top: auto;
		margin-bottom: auto;
		margin-left: 10px;
		/*border: 1px solid black;*/

	}

	#moreliaone {
		display: block;
 		margin-left: auto;
 		margin-right: auto;
		width: 102%;
	}


	#moreliatwo {
		width: 105%;
	}


	#ixtapapics {
		display: grid;
		grid-template-columns: 2fr 2fr;
		/*border: 1px solid red;*/
		margin-right: 60px;
		margin-left: 60px;
		margin-bottom: 20px;
	}

	.center {
		display: block;
 		margin-left: auto;
 		margin-right: auto;
	}


	#guanajuatopics {
		margin-left: 10px;
	}


	#guanajuato1 {
		width: 105%;
	}


	#guanajuato2 {
		width: 105%;
	}


	#guanajuato {
		display: grid;
		grid-template-columns: 1fr 3fr;
		/*border: 1px solid blue;*/
		margin-bottom: 3px;
	}

/*end tablet/desktop styles*/