@charset "UTF-8";
/* CSS Document */

/*
Colors:
Orange: #e18a1a;
Lighter orange: #f8bc3b;
Lighter blue: #0089bc;
Darker blue: #0764a1;
Blackish: #393f4a;

Fonts:
font-family: "Rock", Rockwell, "Courier Bold", Courier, Georgia, Times, "Times New Roman", serif;
*/

/* ---------- Universal ---------- */
@import url(http://fonts.googleapis.com/css?family=Gloria+Hallelujah);
@import url(http://fonts.googleapis.com/css?family=Handlee);

@font-face
{
font-family: Rock;
src: url('assets/rock.ttf'),
     url('assets/rock.otf'); /* IE9 */
}

a img {
    border: 0;
}

img.map {
	outline: 0;
}

a {
	text-decoration: none;
}




/* ---------- Fixed navigation bar ---------- */
header {
	position: fixed;
	width: 100%;
	height: 90px;
	background-color: #0764a1;
	top: 0;
  	left: 0;
  	z-index: 100;
	opacity: 1.0; /*change this as necessary to see behind it*/
	box-shadow: 0px 1px 1px rgba(0,0,0,.3);
	
}

.hidesocial {
	width: 125px;
	height: 15px;
	background-color: #0764a1;
	box-shadow: 1px 0px 1px rgba(0,0,0,.3);
	position: fixed;
	display: inline-block;
	top: 84px;
	right: 20px;
	z-index: 99;
	-webkit-transition: all .5s ease; /* For Safari 3.1 to 6.0 */
    transition: all .5s ease;
}

.showsocial {
	width: 15px;
	height: 15px;
	background-color: #0764a1;
	box-shadow: 1px 0px 1px rgba(0,0,0,.3);
	position: fixed;
	display: inline-block;
	top: 84px;
	right: 75px;
	z-index: 99;
	padding-right: 1px;
	padding-bottom: 2px;
	-webkit-transition: all .5s ease; /* For Safari 3.1 to 6.0 */
    transition: all .5s ease;
}

.triangleup {
	width: 0; 
	height: 0; 
	margin: 9px auto 3px auto;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-bottom: 5px solid #ffffff;
}
	
.triangledown {
	width: 0; 
	height: 0; 
	margin: 9px auto 3px auto;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 5px solid #ffffff;
}

.socialmedia {
	width: 125px;
	height: 45px;
	background-color: #0764a1;
	box-shadow: 1px 1px 1px rgba(0,0,0,.3);
	position: fixed;
	display: inline-block;
	top: 98px;
	right: 20px;
	z-index: 99;
	-webkit-transition: all 1s; /* For Safari 3.1 to 6.0 */
    transition: all 1s;

}

#showhide {
    cursor: pointer;	
}

.socialmedia2 {
	width: 125px;
	height: 45px;
	background-color: #0764a1;
	box-shadow: 1px 1px 1px rgba(0,0,0,.3);
	position: fixed;
	display: inline-block;
	top: 40px;
	right: 20px;
	z-index: 99;
	-webkit-transition: all 1s; /* For Safari 3.1 to 6.0 */
    transition: all 1s;
	
}



#twitter {
	float: left;
	position: relative;
	background: #ffffff url(assets/twitter.png) no-repeat bottom left;
	margin: 5px;
	width: 35px;
	height: 35px;
}

#codepen {
	float: left;
	position: relative;
	background: #ffffff url(assets/codepen.png) no-repeat bottom left;
	margin-right: 5px;
	margin-top: 5px;
	width: 35px;
	height: 35px;
}

#behance {
	float: left;
	position: relative;
	background: #ffffff url(assets/behance.png) no-repeat bottom left;
	margin-top: 5px;
	width: 35px;
	height: 35px;
}

#twitter:hover {
	background: #ffffff url(assets/twitter-hover.png) no-repeat bottom left;
}

#codepen:hover {
	background: #ffffff url(assets/codepen-hover.png) no-repeat bottom left;
}

#behance:hover {
	background: #ffffff url(assets/behance-hover.png) no-repeat bottom left;
}



#logo {
	width: 15%;
	text-align: right;
	margin-top: 8px;
	position: absolute;
	left: 0%;
	float: left;
}

#logo img {
	pointer: cursor;
}

#menu {
    display: none;	
}

#navigation {
	float: right;
	margin-top: 15px;
	margin-left: 5px;
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
	font-size: 17px;
	letter-spacing: 2px;
}

#navigation ul {
	margin-right: 60px;
}

#navigation li {
	display: inline;
	text-transform: uppercase;
	margin-left: 28px;
	margin-right: 28px;
}


#navigation a:link {
	color: #ffffff;
	text-decoration: none;
}   

#navigation a:visited {
	color: #ffffff;
	text-decoration: none;
}

#navigation a:hover {
	color: #e18a1a;
	text-decoration: none;
} 
	
#navigation a:active {
	color: #ffffff;
	text-decoration: none;
} 
 
/* ----------- Intro section ---------- */

#intro {
	position: absolute;
	width: 100%;
	top: 90px;
	left: 0;
	height: 550px;
	margin: 0 auto;
	padding: 0;
	background-color: rgba(0,0,0,.10);
	background: url("assets/horizon.jpg") no-repeat center center; 
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
   z-index: 5;
}

#introgroup {
	width: 900px;
	margin: 80px auto;
}

#kylepic {
	float: left;
	position: absolute;
}

#specialties {
	float: right;
	position: relative;
	font-family: "Rock", Rockwell, "Courier Bold", Courier, Georgia, Times, "Times New Roman", serif;
	font-size: 72px;
	line-height: 45px;
	font-weight: 800;
	color: #e18a1a;
	text-align: center;
	margin: 30px auto 50px 320px;
	z-index: 2;
	text-shadow: 1px 1px #393f4a;
	
}

.ampersand {
	font-size: 86px;
	color: #0089bc;
	font-weight: 700;
	margin-top: 30px;
	margin-left: -28px;
	vertical-align: middle;
	z-index: 1;

}

#specialties h1 {
	font-family: "Rock", Rockwell, "Courier Bold", Courier, Georgia, Times, "Times New Roman", serif;
	font-size: 34px;
	line-height: 36px;
	color: white;
	text-align: center;
	margin: 0 auto 30px auto;
}

.arrows {
	position: absolute;
	bottom: 50px;
	right: 30px;
	opacity: .4;
	
}


/* ----------- Services section ---------- */

#section1 {
	position: absolute;
	width: 100%;
	top: 550px;
	left: 0;
	height: 640px; /*if changing height, move 'top' of next div down just as many pixels*/
	margin: 0 auto;
	padding: 0;
	background-color: #dddddd;
	z-index: 4;

	
}

.chart {
    width: 80%;
	max-width: 525px;
	min-width: 250px;
	text-align: center;
	margin: 40px auto 0 auto;
	display: block;
}

#section1 h1 {
	margin: 40px auto 0 auto;
	padding-top: 70px;
	text-align: center;
	width: 100%;
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
	font-size: 38px;
	letter-spacing: 1px;
	color: #2d2d2d;
	
}

#section1 p {
	font-family: "Rock", Rockwell, "Courier Bold", Courier, Georgia, Times, "Times New Roman", serif;
	font-size: 45px;
	color: white;
}

#section1wrap {
	width: 100%;
	margin: 20px auto;
}


/* ----------- Portfolio section ---------- */

#section2 {
	position: absolute;
	width: 100%;
	top: 1100px;
	left: 0;
	height: 1615px; /*if changing height, move 'top' of next div down just as many pixels*/
	margin: 0 auto;
	padding: 0;
	background-color: #0089bc;
	z-index: 3;
	display: inline-block;
	
	
}

#section2title {
	position: absolute;
	top: 100px;
	text-align: center;
	width: 100%;
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
	font-size: 38px;
	letter-spacing: 1px;
	color: #dddddd;
}

#section2subtitle {
	position: absolute;
	top: 150px;
	text-align: center;
	width: 100%;
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
	font-size: 30px;
	letter-spacing: 1px;
	color: #dddddd;
	display: none;
}

#portfolioarea {
	position: relative;
	width: 975px;
	height: 1300px;
	margin: 225px auto; /* margin top of 90px at least, to cover the part behind the above section*/
	background-color: #ffffff;
	
}

.projects {
	width: 325px;
	height: 325px;
	float: left;
	position: relative;
	
}

#project1 {
	background-image: url('assets/portfolio-cbc.jpg');
}
#project2 {
	background-image: url('assets/portfolio-asuride.jpg');
}
#project3 {
	background-image: url('assets/portfolio-gitsite.jpg');
}
#project4 {
	background-image: url('assets/portfolio-nfah.jpg');
}
#project5 {
	background-image: url('assets/portfolio-powerhouse.jpg');
}
#project6 {
	background-image: url('assets/portfolio-katwlogo.jpg');
}
#project7 {
	background-image: url('assets/portfolio-giraffe.jpg');
}
#project8 {
	background-image: url('assets/portfolio-waffles.jpg');
}
#project9 {
	background-image: url('assets/portfolio-wikifix.jpg');
}
#project10 {
	background-image: url('assets/portfolio-brochures.jpg');
}
#project11 {
	background-image: url('assets/portfolio-asubrochure.jpg');
}
#project12 {
	background-image: url('assets/portfolio-businesscards.jpg');
}


#portfoliothumbnails img {
	display: block;
}


figcaption {
	display: block;
	top: 25px;
	left: 25px;
	margin-left: auto;
	margin-right: auto;
	background-color: rgba(0,0,0,0.7);
	color: white;
	position: absolute;
	width: 255px;
	height: 255px;
	text-align: center;
	padding: 10px;
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
	font-size: 21px;
	letter-spacing: 1.5px;
	z-index: 100;
	opacity: 0;
}


figcaption:hover  {
	opacity: 1;
}

.figcapsub {
	font-size: 16px;	
}

.viewbuttons {
	border-style: solid;
	border-width: 2px;
	border-radius: 10px;
	padding: 3px;
	width: 200px;
	margin: 0 auto;
	font-size: 17px;
	letter-spacing: 2px;
}

#viewproject1 {
	color: #2ec0f8;
	border-color: #2ec0f8;
}

#viewproject2 {
	color: #ffc627;
	border-color: #ffc627;
}

#viewproject3 {
	color: #f43ba5;
	border-color: #f43ba5;
}

#viewproject4 {
	color: #f457ee;
	border-color: #f457ee;
}

#viewproject5 {
	color: #e0bc7c;
	border-color: #e0bc7c;
}

#viewproject6 {
	color: #ef4a24;
	border-color: #ef4a24;
}

#viewproject7 {
	color: #eeab20;
	border-color: #eeab20;
}

#viewproject8 {
	color: #a4bbf4;
	border-color: #a4bbf4;
}

#viewproject9 {
	color: #f6f6f6;
	border-color: #f6f6f6;
}

#viewproject10 {
	color: #f457ee;
	border-color: #f457ee;
}

#viewproject11 {
	color: #ffc24c;
	border-color: #ffc24c;
}

#viewproject12 {
	color: #2ec0f8;
	border-color: #2ec0f8;
}






/* ----------- Info section ---------- */

 #section3 {
	position: absolute;
	width: 100%;
	top: 2625px;
	left: 0;
	height: 640px; /*if changing height, move 'top' of next div down just as many pixels*/
	margin: 0 auto;
	padding: 0;
	background-color: #dddddd;
	z-index: 2;
	
}

#aboutarea {
	width: 900px;
	margin: 150px auto; /* margin top of 90px at least, to cover the part behind the above section*/
	position: relative;
	height: 400px;
}
	
#statearea {
	position: absolute;
	float: left;
	margin: 0 auto;
	width: 350px;
	height: 400px;
}

#statearea img {
	margin: 0 auto;
}

.tiltaz {
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}
 
.tiltaz:hover {
  -webkit-transform: rotate(5deg);
     -moz-transform: rotate(5deg);
       -o-transform: rotate(5deg);
      -ms-transform: rotate(5deg);
          transform: rotate(5deg);
}

#verbiagearea {
	position: relative;
	float: right; 
	width: 500px;
	height: 400px;
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
	font-size: 18px;
	line-height: 24px;
	color: #2d2d2d;
	
}


#verbiagearea a {
	color: #2d2d2d;
}

#verbiagearea a:hover {
	color: #0089bc;
}

#verbiagearea img {
	float: right;
	border: 3px solid #0764a1;
	padding: 3px;
	position: absolute;
	margin: 0 auto;
}

#verbiagearea p {
	margin: 0 auto;
	padding-left: 20px;
}

#viewresume {
	color: #0764a1;
	border-color: #0764a1;
	width: 120px;
	font-size: 17px;
	letter-spacing: 2px;
	text-align: center;
}

#verbiage {
	width: 500px;
	height: 185px;
}

#bottomsection {
	width: 500px;
	height: 215px;
}

#socialsection, #picsection {
	height: 225px;
}

#socialsection {
	float: left;
	width: 300px;
}

#socialsection p {
	font-size: 14px;
	width: 250px;
	text-align: center;
	margin: 0;
}

#picsection {
	float: right;
	width: 200px;
}

#centersection {
	margin: 50px auto;
}

#centersection p a {
	text-decoration: underline;
}

/* ----------- Contact section ---------- */

 #section4 {
	position: absolute;
	width: 100%;
	top: 3175px;
	left: 0;
	height: 740px; /*if changing height, move 'top' of next div down just as many pixels*/
	margin: 0 auto;
	padding: 0;
	background-color: #2d2d2d;
	z-index: 1;
	
}

#section4title {
	position: absolute;
	top: 100px;
	text-align: center;
	width: 100%;
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
	font-size: 38px;
	letter-spacing: 1px;
	color: white;
	margin: 40px auto;
}

#section4subtitle {
	position: absolute;
	top: 150px;
	text-align: center;
	width: 100%;
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
	font-size: 22px;
	letter-spacing: 1px;
	color: white;
	margin: 40px auto;
}

#contactform {
	width: 900px;
	margin: 240px auto 0px auto; /* margin top of 90px at least, to cover the part behind the above section*/
	position: relative;
	height: 400px;
	color: #dddddd;
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
	font-size: 18px;
	line-height: 2px;
	background-color: #dddddd;
	border-radius: 3px;
}

#contactleftside {
	float: left;
	width: 400px;
	height: 340px;
	padding-top: 60px;
	margin-left: 50px;
}

#contactrightside {
	float: right;
	width: 450px;
	height: 335px;
	padding-top: 65px;
}

input {
	width: 300px;
	height: 30px;
	border-radius: 4px;
	margin: 15px 30px 30px 30px;
	font-size: 20px;
	background-color: transparent;
	border-color: #0089bc;
	border-width: 3px;
	color: #000000;
}

input[type="submit"] {
	width: 100px;
	height: 30px;
	border-radius: 4px;
	margin: 10px;
	font-size: 15px;
	margin-left: 140px;
	color: black;
	text-transform: uppercase;
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
}

textarea {
	width: 300px;
	height: 170px;
	border-radius: 4px;
	margin: 20px 30px 30px 30px;
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
	font-size: 20px;
	background-color: transparent;
	border-color: #0089bc;
	border-width: 3px;
	color: #000000;
}

label {
	margin-left: 30px;
	color: #000000;
}

/* ----------- Footer section ---------- */

footer {
	position: absolute;
	width: 100%;
	top: 3915px;
	left: 0;
	height: 40px; /*if changing height, move 'top' of next div down just as many pixels*/
	margin: 0 auto;
	padding: 0;
	background-color: #0764a1;
	z-index: 1;
}

#funfooter {
	position: absolute;
	width: 100%;
	top: 550px;
	left: 0;
	height: 40px; /*if changing height, move 'top' of next div down just as many pixels*/
	margin: 0 auto;
	padding: 0;
	background-color: #0764a1;
	z-index: 1;
}

#footertext {
	position: absolute;
	top: 10px;
	text-align: center;
	width: 100%;
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
	font-size: 12px;
	letter-spacing: 1px;
	color: white;
	margin: 0 auto;
}

/* ----------- Fun page ---------- */

 canvas { 
	position: absolute;
	top: 120px;
	left: 100px;
	cursor: url('assets/pinpoint.gif'), auto;
	/*background-image: url('assets/canvasbg.jpg');*/
	
	
}


#canvascover {
	width: 800px;
	height: 400px;
	position: absolute;
	top: 120px;
	left: 100px;
	cursor: url('assets/pinpoint.gif'), auto;
	background-color: pink;
	z-index: 1;
	opacity: .5;
}

#techcover {
	position: absolute;
	height: 100px;
	width: 120px;
	top: 280px;
	left: 120px;
	opacity: .5;
	background-color: orange;
}

#centercover {
	position: absolute;
	height: 130px;
	width: 100px;
	top: 35px;
	left: 345px;
	opacity: .5;
	background-color: yellow;
}

#picachocover {
	position: absolute;
	height: 130px;
	width: 150px;
	top: 140px;
	left: 190px;
	opacity: .5;
	background-color: blue;
}

#unioncover {
	position: absolute;
	height: 70px;
	width: 110px;
	top: 35px;
	left: 455px;
	opacity: .5;
	background-color: green;
}

#techinfo {
	display: none;
	position: absolute;
	top: 280px;
	left: 250px;
	background-color: white;
	opacity: 1;
	height: 100px;
	width: 200px;	
}




@media (min-width: 650px) and (max-width: 975px) {
  #portfolioarea {
	width: 650px;
	height: 1950px;
	}
	
	#section2 {
		height: 2265px; /*if changing height, move 'top' of next div down just as many pixels*/
	}
	
	#section3 {
		top: 3275px;
	}

	#section4 {
		top: 3815px;
	}
	
	footer {
		top: 4555px;
    }
	
	
}
@media (min-width: 650px) and (max-width: 900px) {
	#intro {
	height: 400px;
	}

	#introgroup {
		width: 100%;
		margin: 80px auto;
	}
	
	#kylepic {
		display: none;	
	}
	
	#specialties {
		margin: 0 auto;
		padding: 0 50px;
		font-weight: 800;
	} 
	
	#section1 {
	top: 400px;
	height: 640px; /*if changing height, move 'top' of next div down just as many pixels*/
	}
	
	#section2 {
	top: 990px;
	height: 2265px; /*if changing height, move 'top' of next div down just as many pixels*/
	}
	
	#section3 {
	top: 3225px;
	}

	#section4 {
	top: 3765px;
	}
	
	footer {
	top: 4505px;
    }
}

@media (min-width: 325px) and (max-width: 649px) {
	#introgroup {
		width: 100%;
		margin: 80px auto;
	}

	#kylepic {
		display: none;	
	}

	#specialties {
		margin: 0 10px;
		font-size: 40px;
		line-height: 24px;
		font-weight: 800;
	} 
	
	.ampersand {
		font-size: 36px;
		color: #0089bc;
		font-weight: 700;
		margin-top: 30px;
		margin-left: -18px;
		vertical-align: middle;
		z-index: 1;
	
	}

	#specialties h1 {
		font-size: 25px;
		line-height: 25px;
	}
		
    #portfolioarea {
	width: 325px;
	height: 2600px;
	}
	
	#section2 {
	height: 2915px; /*if changing height, move 'top' of next div down just as many pixels*/
	}
	
	
	#project7, #project8, #project9, #project10 {
	display: none;
	}
	
}


@media (min-width: 1px) and (max-width: 649px) {
	#intro {
	height: 280px;
	}

	
	#section1 {
	top: 280px;
	}
	
	#section2 {
	top: 870px;
	}
	
	#section3 {
	top: 3705px;	
	}

	#section4 {
	top: 4245px;
	}
	
	footer {
	top: 4985px;
    }
}

@media (min-width: 1px) and (max-width: 324px) {
	#introgroup {
		width: 100%;
		margin: 40px auto;
	}

	#kylepic {
		display: none;	
	}

	#specialties {
		margin: 0 10px;
		font-size: 40px;
		line-height: 24px;
		font-weight: 800;
	} 
	
	.ampersand {
		font-size: 36px;
		color: #0089bc;
		font-weight: 700;
		margin-top: 30px;
		margin-left: -18px;
		vertical-align: middle;
		z-index: 1;
	
	}

	#specialties h1 {
		font-size: 25px;
		line-height: 25px;
	}
	
  .projects {
		width: 280px;
		height: 280px;
	}

	#project1 {
		background-image: url('assets/portfolio-cbc-mobile.jpg');
	}
	#project2 {
		background-image: url('assets/portfolio-asuride-mobile.jpg');
	}
	#project3 {
		background-image: url('assets/portfolio-gitsite-mobile.jpg');
	}
	#project4 {
		background-image: url('assets/portfolio-nfah.jpg');
		background-size: 280px 280px;
	}
	#project5 {
		background-image: url('assets/portfolio-powerhouse-mobile.jpg');
	}
	#project6 {
		background-image: url('assets/portfolio-katwlogo-mobile.jpg');
	}
	#project7 {
		background-image: url('assets/portfolio-giraffe-mobile.jpg');
	}
	#project8 {
		background-image: url('assets/portfolio-waffles-mobile.jpg');
	}
	#project9 {
		background-image: url('assets/portfolio-wikifix-mobile.jpg');
	}
	#project10 {
		background-image: url('assets/portfolio-brochures-mobile.jpg');
	}
	#project11 {
		background-image: url('assets/portfolio-asubrochure-mobile.jpg');
	}
	#project12 {
		background-image: url('assets/portfolio-businesscards-mobile.jpg');
	}
	
	#portfolioarea {
		width: 280px;
		height: 2240px;
	}
	
	#section2 {
	height: 2555px; /*if changing height, move 'top' of next div down just as many pixels*/
	}
	
	#project7, #project8, #project6, #project10 {
	display: none;
	}
	
	.projectinfo {
		display: none;
	}
	
	figcaption {
	background-color: transparent;
	width: 280px;
	height: 280px;
	opacity: 1;
	top: 0;
	left: 0;
	}
	
	.viewbuttons {
	border-style: solid;
	border-width: 2px;
	border-radius: 10px;
	padding: 3px;
	width: 200px;
	margin: 0 auto;
	font-size: 17px;
	letter-spacing: 2px;
	background-color: #000000;
	position: absolute;
	bottom: 50px;
	left: 40px;
	}
	
	#section3 {
	top: 3405px;	
	}
	
	#section4 {
	top: 3945px;
	}
	
	footer {
	top: 4385px;
    }
	
}


@media (min-width: 1px) and (max-width: 550px) {
	
#section2title {
	position: absolute;
	top: 100px;
	text-align: center;
	width: 100%;
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
	font-size: 30px;
	letter-spacing: 1px;
	color: #dddddd;
	min-width: 280px;
}

}

@media (min-width: 651px) and (max-width: 800px) {
	#navigation ul {
		margin-right: 30px;
	}
	
	#navigation li {
		margin-left: 18px;
		margin-right: 18px;
	}
	
	#section4title {
		font-size: 32px;
	}

	#section4subtitle {
		font-size: 17px;
	}
	
}

@media (min-width: 515px) and (max-width: 651px) {
	#navigation {
		font-size: 14px;
	}

	#navigation ul {
		margin-right: 15px;
	}
	
	#navigation li {
		margin-left: 12px;
		margin-right: 12px;
	}
	
	#section4title {
		font-size: 32px;
	}

	#section4subtitle {
		font-size: 17px;
	}
	
	#needaquote {
		display: none;
	}
}

@media (min-width: 1px) and (max-width: 514px) {
	#navigation {
		float: right;
		margin-top: 20px;
		margin-left: 5px;
		font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
		font-size: 17px;
		letter-spacing: 2px;
		}

	#navigation ul {
		margin-right: 0px;
		display: none;
	}
	
	#navigation li {
		margin-left: 12px;
		margin-right: 12px;
		display: block;
		text-align: center;
		line-height: 30px;
		background-color: #0089bc;
		border-bottom: 4px solid #0764a1;
		border-left: 4px solid #0764a1;
		border-right: 4px solid #0764a1;
		padding: 5px 10px;
	}
	
	#menu {
		display: block;	
		margin-right: 25px;
	}
	
	#logo {
		width: 140px;
		text-align: center;
	}
	
	#section4title {
		font-size: 32px;
	}

	#section4subtitle {
		font-size: 17px;
	}
	
	#needaquote {
		display: none;
	}
	
}

@media (min-width: 630px) and (max-width: 850px) {
	#contactform {
		width: 600px;
	}
	
	#contactleftside {
		width: 267px;
		margin-left: 33px;
	}
	
	#contactrightside {
		width: 300px;
	}
	
	input {
		width: 200px;
		margin: 15px 20px 30px 20px;
		
	}
	
	input[type="submit"] {
		width: 100px;
		height: 30px;
		border-radius: 4px;
		margin: 10px;
		font-size: 15px;
		margin-left: 40px;
		color: black;
		text-transform: uppercase;
	}
	
	textarea {
		width: 200px;
		margin: 20px 15px 30px 15px;
	}
	
	label {
		margin-left: 20px;
	}
}

@media (min-width: 1px) and (max-width: 629px) {
	#contactform {
		width: 280px;
		height: 550px;
	}
	
	#contactleftside {
		width: 280px;
		height: 200px;
		padding-top: 20px;
		margin-left: 5px;
	}
	
	#contactrightside {
		width: 270px;
		height: 200px;
		padding-top: 65px;
		margin-left: 105px;
	}
	
	input {
		width: 210px;
		margin: 15px 20px 30px 20px;
		
	}
	
	input[type="submit"] {
		width: 100px;
		height: 30px;
		border-radius: 4px;
		margin: 10px;
		font-size: 15px;
		margin-left: 75px;
		color: black;
		text-transform: uppercase;
	}
	
	textarea {
		width: 210px;
		margin: 20px 15px 3px 15px;
	}
	
	label {
		margin-left: 20px;
	}
	
	#Email {
        margin-left: 20px;
	}
	
	#section4 {
	    height: 810px;
	}
	
	footer {
	top: 5025px;
    }
}
@media (min-width: 1px) and (max-width: 325px) {

	footer {
		top: 4725px;
	  }
 }


	
@media (min-width: 1px) and (max-width: 649px) {	
	
	#aboutarea {
		width: 280px;
		margin: 125px auto;
	}
	
	#verbiagearea {
		margin: 0 auto;
		width: 280px;
	}
	
	#verbiage {
		width: 280px;
		height: 185px;
	}
	
	#socialsection, #picsection {
		display: none;
	}
	
	#section3 {
		height: 460px;
	}
	
	
	
	footer {
		top: 4855px;
		line-height: 1.2;
	}
}

	@media (min-width: 384px) and (max-width: 649px) {
		
			#section4 {
		top: 4080px;
	}
	
	#bottomsection {
		display: none;
	}
		
	}
	
	@media (min-width: 1px) and (max-width: 366px) {
		#section4 {
		top: 3810px;
	    }
		
		footer {
		top: 4585px;
		line-height: 1.5;
	     }
		 
		 #bottomsection {
		display: none;
	}
	
	}
@media (min-width: 367px) and (max-width: 383px) {
	#section4 {
		top: 4080px;
	}
		
	footer {
		top: 4855px;
		line-height: 1.5;
    }
		 
	#bottomsection {
		display: none;
	}
}
	
@media (min-width: 650px) and (max-width: 1000px) {	
	#aboutarea {
		width: 600px;
	}
	
	#verbiagearea {
		margin: 0 auto;
		width: 600px;
	}
	
	#verbiage {
		width: 600px;
		height: 185px;
	}
}



@media (min-width: 1px) and (max-width: 1000px) {	
	#aboutarea {
		
			}
	
	#verbiagearea {
		margin: 0 auto;
	}
	
	#statearea {
		display: none;
	}
}

 
 @media (min-width: 1px) and (max-width: 350px) {
	#section1 {
	height: 440px;
	}
	
	#section1 h1 {
	font-size: 30px;
	}
	
	#section2 {
	top: 645px;
	}
	
	#section3 {
	top: 3170px;	
	}
	
	#section4 {
	top: 3510px;
	}
	
	footer {
	top: 4305px;
	height: 70px;
	}

#section4subtitle {
			display: none;
		}
			
	}
	
	/* ----------- Katherine page ---------- */
	.kat {
		margin: 0;
		padding: 0;
		
	}
	.katmain {
		font-family: 'Handlee', cursive;
		text-align: center;
		font-size: 30px;
		margin: 30px 10px;
	}
	
	.katmain h1 {
		margin: 20px 0;
	}
	
	.katmain img {
		display: block;
		margin: 0 auto;
		max-width: 100%;
	}
	
	.katmain .swerve {
		margin-bottom: -30px;
	}
	
	.katfooter {
		text-align: center;
		background-color: rebeccapurple;
		padding: 5px 0;
		font-family: 'Handlee', cursive;
		color: #fff;
		width: 100%;
		
	}