/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
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;
}
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 css reset*/


/*How the webpage should look on a desktop*/

	body {
		background-color: rgb(100, 100, 100);
		background-size: cover;
	}

	.wrapper2 {
		max-width: 1024px;
		margin: 0 auto;
		background-color: grey;
	}

	/*start body styles*/

  .wrapper1 {
    background-image: url("../images/beach.jpg");
    background-size: cover;
		background-repeat: no-repeat;
  }

	/*start header styles*/
	header {
		position: relative;
		width: 100%;
		height: 400px;
	}

 	.homehead {

    width: 400px;
		height: auto;
    top: 170px;
    position: absolute;
		right: 50px;

  }

	h1 {
		font-size: 50px;
		font-family: courier;
		color: white;
		}

	#largearrow {
		position: absolute;
		top: 170px;
		right:460px;
		width: 1500px;
		height: auto;
	}

	.interhead {
		position: relative;
		width: auto;
		padding: 20px 0 0 40px;
	}

	#largearrow2 {
			position: absolute;
			top: 220px;
			right: 260px;
			width: 760px;
			height: auto;
		}

		.backtohome {
			display: none;
		}

	h2 {
		max-width: 500px;
		font-size: 30px;
		font-family: courier;
		color: white;
		height: auto;
		position: relative;
	}

	/*End header styles*/

	/*start nav styles*/

	.homenav {
		width: 300px;
		position: absolute;
		top: 220px;
		right: 150px;
	}

	.homenav a {
		text-decoration: none;
		color: white;
		font-family: courier;
		font-size: 24px;
		font-weight: bold;
	}

	/*vv arrow that appears next to the home nav links vv*/
	.arrow {
		width: 30px;
		visibility: hidden;
		display: inline-block;
	}

	.arrow:hover {
		visibility: visible;
	}

/*vv nav for the internal pages vv*/
	.smallnav {
		width: 200px;
	}

	.smallnav li {
		line-height: 25px;
	}
	.smallnav a {
		text-decoration: none;
		color: white;
		font-family: courier;
		font-size: 18px;

	}

	/*start individual nav styles to make the nav move next to the arrow*/
		#smallnavweb {
			position: absolute;
			top: 195px;
			right: 50px;
		}

		#smallnavmaiz {
			position: absolute;
			top: 170px;
			right: 50px;
		}

		#smallnavgroup {
			position: absolute;
			top: 145px;
			right: 50px;
		}

		#smallnavflow {
			position: absolute;
			top: 120px;
			right: 50px;
		}

		#smallnavart {
			position: absolute;
			top: 93px;
			right: 50px;
		}

		#smallnavtyp {
			position: absolute;
			top: 65px;
			right: 50px;
		}
	/*end individual nav styles*/

/*End all nav styles*/

/*start content styles*/

	a {
		text-decoration: none;
		color: white;
	}

	a:hover {
		text-decoration: underline;
	}

	p {
		color: white;
		font-family: courier;
		font-size: 16px;
		line-height: 17px;
	}

	.headerp {
		position: relative;
		padding: 10px 40px;
		max-width: 670px
	}

	/*styling the block of text on my homepage*/
	.blurb {
		position: relative;
		display: block;
		width: 1000px;
		padding: 100px;
	}

	.blurb p {
		padding: 10px;
		width: 500px;
	}


	/*styling the text in my content pages*/

	.content {
		position: relative;
		display: block;
		max-width: 1000px;
		margin: 0 20px;
		padding: 0 20px;
	}

	.table {
		max-width: 1000px;
		position: relative;
		padding: 10px;
		display: inline-block;
	}

	.table #imglink, .table img {
		display: inline-block;
		float: right;
		padding-bottom: 50px;
	}

	.post {
		display: inline-block;
		position: relative;
		padding: 20px 20px 20px 0;
		top:0;
	}

	.post p {
		max-width: 400px;
		padding: 10px 0;
		display: block;
		margin: 0;
	}

	#group .post p {
		column-count: 2;
		column-gap: 40px;
		max-width: 900px;
	}

	#group #img1 {
		padding: 25px 60px;
	}

	#takeaction p {
		display: inline-block;
	}

	#flow .table img {
		padding: 0 20px;
	}

	.flowimg {
		display: inline-block;
	}

	.maizpost a {
		color: white;
		font-weight: bold;
		display: inline-block;
	}

	.maizpost p {
		display: inline-block;
		max-width: 400px;
		float: left;
		padding-right: 25px;
	}

	.maizmeimg #img3, .maizmeimg #img4 {
		padding: 30px 30px;
		display: inline-block;
		text-align: center;
	}

	.maizmeimg #img1, .maizmeimg #img5 {
		float: none;
		margin: auto;
	}

	.typeimg img {
		display: inline-block;
		padding: 50px 10px;
	}

	#type #img5, #type #img6, #type #img7 {
		display: inline-block;
		padding: 50px 10px;
	}

	.typepost p {
		column-count: 2;
		column-gap: 40px;
		max-width: 900px;
	}

	.video {
		display: block;
		margin: 0 120px;
		width: 1200px;
		height: auto;

	}

	/*end image styles for internal pages*/

	/*end content styling*/

	/*start footer styles*/

	/*back to top arrow styles*/
	figure {
		position: absolute;
		bottom: 20px;
		right: 50px;
		width: auto;
		padding: 20px;
	}

	figure a {
		text-decoration: none;
		color: white;
		font-family: courier;
		font-size: 20px;
		font-weight: bold;
	}

	figure img {
		width: 30px;
	}

	footer {
		position: relative;
		display: block;
		height: 100px;

	}

	footer a {
		text-decoration: none;
		color: white;
		font-family: courier;
		font-size: 20px;
		font-weight: bold;
	}

	footer li {
		float: right;
		padding: 50px 150px 50px 0;
		color: white;
		font-family: courier;
		font-size: 15px;
		font-weight: bold;
	}

	footer a:hover {
		text-decoration: underline;
	}

/*end footer styles*/


/*How the webpage should look on a tablet*/

@media (max-width: 799px) {


		body {
			background-color: rgb(100, 100, 100);
			background-size: cover;
		}

		.wrapper2 {
			margin: 0 auto;
			background-color: grey;
			max-width: 800px;
		}

		/*start body styles*/

	  .wrapper1 {
	    background-image: url("../images/beach-tablet.jpg");
			background-image: contain;
			background-repeat: no-repeat;
	  }

		/*start header styles*/
		header {
			position: relative;
			width: 100%;
			height: 400px;
		}

	 	.homehead {

	    width: 400px;
			height: auto;
	    top: 170px;
	    position: absolute;
			right: 20px;

	  }

		h1 {
			font-size: 50px;
			font-family: courier;
			color: white;
			}

		#largearrow {
			position: absolute;
			top: 170px;
			right:430px;
			width: 1500px;
			height: auto;
		}

		.interhead {
			position: relative;
			width: auto;
			padding: 20px 0 0 40px;
		}

		#largearrow2 {
				position: absolute;
				top: 270px;
				right: 230px;
				width: 760px;
				height: auto;
			}

			.backtohome {
				display: none;
			}

		h2 {
			max-width: 500px;
			font-size: 30px;
			font-family: courier;
			color: white;
			height: auto;
			position: relative;
		}

		/*End header styles*/

		/*start nav styles*/

		.homenav {
			width: 300px;
			position: absolute;
			top: 220px;
			right: 120px;
		}

		.homenav a {
			text-decoration: none;
			color: white;
			font-family: courier;
			font-size: 24px;
			font-weight: bold;
		}

		/*vv arrow that appears next to the home nav links vv*/
		.arrow {
			width: 30px;
			visibility: hidden;
			display: inline-block;
		}

		.arrow:hover {
			visibility: visible;
		}

	/*vv nav for the internal pages vv*/
		.smallnav {
			width: 200px;
		}

		.smallnav li {
			line-height: 25px;
		}
		.smallnav a {
			text-decoration: none;
			color: white;
			font-family: courier;
			font-size: 18px;

		}

		/*start individual nav styles to make the nav move next to the arrow*/
			#smallnavweb {
				position: absolute;
				top: 245px;
				right: 20px;
			}

			#smallnavmaiz {
				position: absolute;
				top: 220px;
				right: 20px;
			}

			#smallnavgroup {
				position: absolute;
				top: 195px;
				right: 20px;
			}

			#smallnavflow {
				position: absolute;
				top: 170px;
				right: 20px;
			}

			#smallnavart {
				position: absolute;
				top: 143px;
				right: 20px;
			}

			#smallnavtyp {
				position: absolute;
				top: 115px;
				right: 20px;
			}
		/*end individual nav styles*/

	/*End all nav styles*/

	/*start content styles*/

		a {
			text-decoration: none;
			color: white;
		}

		a:hover {
			text-decoration: underline;
		}

		p {
			color: white;
			font-family: courier;
			font-size: 16px;
			line-height: 17px;
		}

		.headerp {
			position: relative;
			padding: 10px 40px;
			max-width: 470px
		}

		/*styling the block of text on my homepage*/
		.blurb {
			position: relative;
			display: block;
			width: 500px;
			padding: 100px;
		}

		.blurb p {
			padding: 10px;
			width: 500px;
		}


		/*styling the text in my content pages*/

		.content {
			position: relative;
			display: block;
			max-width: 760px;
			margin: 20px;
			padding: 0 20px;
		}

		.table {
			max-width: 750px;
			position: relative;
			top: 20px;
			display: inline-block;
		}

		.table #imglink, .table img {
			display: block;
			padding: 25px;
			float: none;
			margin: auto;
			width: 90%;
		}

		.post {
			display: block;
			position: relative;
		}

		.post p {
			max-width: 600px;
			display: inline-block;
		}

		.flowimg img {
			padding: 20px;
			max-width: 250px;
			display: inline-block;
		}

		.flowimg {
			max-width: 700px;
		}

		#web p {
			display: inline-block;
			padding-right: 20px;
		}

		.maizpost a {
			color: white;
			font-weight: bold;
			display: inline-block;
		}

		.maizpost p {
			max-width: 600px;
		}

		#maizme img {
			float: left;
			display: block;
			max-width: 700px;
			padding: 25px 0;
		}

		.maizmeimg #img3, .maizmeimg #img4 {
			padding: 20px 0;
			max-width: 700px;
		}

		.maizmeimg #img1, .maizmeimg #img5 {
			float: left;
		}

		#type img {
			display: block;
			max-width: 700px;
			float: left;
			padding: 50px 10px;
		}

		.typepost p {
			max-width: 900px;
		}

		#group img {
			float: left;
			max-width: 700px;
			padding: 0;
		}

		.video {
			display: block;
			margin: 20px;
			width: 700px;
			height: auto;

		}

		/*end image styles for internal pages*/

		/*end content styling*/

		/*start footer styles*/

		/*back to top arrow styles*/
		figure {
			position: absolute;
			bottom: 20px;
			right: 50px;
			width: auto;
			padding: 20px;
		}

		figure a {
			text-decoration: none;
			color: white;
			font-family: courier;
			font-size: 20px;
			font-weight: bold;
		}

		figure img {
			width: 30px;
		}

		footer {
			position: relative;
			display: block;
			height: 100px;
			padding-top: 20px;
		}

		footer a {
			text-decoration: none;
			color: white;
			font-family: courier;
			font-size: 20px;
			font-weight: bold;
		}

		footer li {
			float: right;
			padding: 50px 150px 50px 0;
			color: white;
			font-family: courier;
			font-size: 15px;
			font-weight: bold;
		}

		footer a:hover {
			text-decoration: underline;
		}

	/*end footer styles*/

}

/*How the webpage should look on a mobile phone*/

@media (max-width: 415px) {


		.wrapper2 {
			max-width: 415px;
		}

		/*start body styles*/

		.wrapper1 {
			background-image: url("../images/beach-mobile.jpg");
			background-size: contain;
		}

		/*start header styles*/
		header {
			position: relative;
			width: 100%;
		}

		.homeheader {
			height: 750px;
		}

		.homehead {
			width: 300px;
			height: auto;
			position: absolute;
			top: 100px;
			left: 130px;
			font-weight: bold;
			font-size: 60px;
		}

		h1 {
			font-size: auto;
			font-family: courier;
			color: white;
			}

		#largearrow {
			position: absolute;
			top: 100px;
			right:300px;
			width: 1500px;
			height: auto;
		}

		.interhead {
			position: relative;
			width: 90%;
			padding: 20px 0 0 40px;
		}

		#largearrow2 {
				position: absolute;
				top: 380px;
				right: 100px;
				width: 760px;
				height: auto;
			}

			.backtohome {
				display: inline-block;
				position: absolute;
				top: 380px;
				right: 20px;
			}

			.backtohome a {
				font-family: courier;
				font-size: 30px;
			}

		h2 {
			max-width: 400px;
			font-size: 30px;
			font-family: courier;
			color: white;
			height: auto;
			position: relative;
		}

		/*End header styles*/

		/*start nav styles*/

		.homenav {
			width: 300px;
			display: block;
			top: 280px;
			left: 50px;
			text-align: center;

		}

		.homenav li {
			padding: 10px 0;
		}

		.homenav a {
			text-decoration: none;
			color: white;
			font-family: courier;
			font-size: 35px;
			font-weight: normal;
		}

		/*vv arrow that appears next to the home nav links vv*/
		.arrow {
			width: 30px;
			visibility: hidden;
			display: inline-block;
		}

		.homenav a:hover +.arrow {
			visibility: visible;
		}

	/*vv nav for the internal pages vv*/
		.smallnav {
			display: none;
		}

	/*End all nav styles*/

	/*start content styles*/

		a {
			text-decoration: none;
			color: white;
		}

		a:hover {
			text-decoration: underline;
		}

		p {
			color: white;
			font-family: courier;
			font-size: 16px;
			line-height: 17px;
		}

		.headerp {
			position: relative;
			padding: 10px 40px;
			max-width: 470px
		}

		/*styling the block of text on my homepage*/
		.blurb {
			position: relative;
			display: block;
			width: 330px;
			padding: 20px;
		}

		.blurb p {
			padding: 10px;
			height: auto;
			width: auto;
		}


		/*styling the text in my content pages*/

		.content {
			position: relative;
			display: block;
			max-width: 415px;
			margin: 0;
			padding: 0 20px;
		}

		.table {
			max-width: 400px;
			position: relative;
			top: 20px;
			display: inline-block;
		}

		.table #imglink, .table img {
			display: block;
			padding: 25px;
			float: none;
			margin: auto;
			width: 90%;
		}

		.post {
			display: block;
			position: relative;
		}

		.post p {
			max-width: 600px;
			display: inline-block;
		}

		.flowimg img {
			padding: 20px;
			max-width: 250px;
			display: inline-block;
		}

		.flowimg {
			max-width: 700px;
		}

		#web p {
			display: inline-block;
			padding-right: 20px;
		}

		.maizpost a {
			color: white;
			font-weight: bold;
			display: inline-block;
		}

		.maizpost p {
			max-width: 600px;
		}

		#maizme img {
			float: left;
			display: block;
			max-width: 700px;
			padding: 25px 0;
		}

		.maizmeimg #img3, .maizmeimg #img4 {
			padding: 20px 0;
			max-width: 400px;
		}

		.maizmeimg #img1, .maizmeimg #img5 {
			float: left;
		}

		#type img {
			display: block;
			max-width: 700px;
			float: left;
			padding: 50px 10px;
		}

		.typepost p {
			max-width: 900px;
		}

		#group img {
			float: left;
			max-width: 700px;
			padding: 0;
		}

		.video {
			display: block;
			margin: 20px;
			width: 700px;
			height: auto;

		}

		/*end image styles for internal pages*/

		/*end content styling*/

		/*start footer styles*/

		/*back to top arrow styles*/
		figure {
			position: absolute;
			bottom: 20px;
			right: 50px;
			width: auto;
			padding: 20px;
		}

		figure a {
			text-decoration: none;
			color: white;
			font-family: courier;
			font-size: 20px;
			font-weight: bold;
		}

		figure img {
			width: 30px;
		}

		footer {
			position: relative;
			display: block;
			height: 100px;
			padding-top: 20px;
		}

		footer a {
			text-decoration: none;
			color: white;
			font-family: courier;
			font-size: 20px;
			font-weight: bold;
		}

		footer li {
			float: right;
			padding: 50px 150px 50px 0;
			color: white;
			font-family: courier;
			font-size: 15px;
			font-weight: bold;
		}

		footer a:hover {
			text-decoration: underline;
		}

	/*end footer styles*/

	}
}