html, body {
	margin: 0;
	background: rgb(214, 214, 214);
	padding: 0;
	width: 100%;
	overflow-x: hidden;
}

header {
	height: 38em;
	background-image: url("20100520_119 (2)2.JPG");
}

span {
	color: rgb(16, 179, 198);
}

p {
	font-size: 1em;
	font-weight: 600;
	text-align: justify;
	background: rgb(248, 248, 248, 0.42);
	padding-left: 15em;
	padding-right: 15em;
	padding-top: 1em;
	padding-bottom: 1em;
	max-width: 60%;
	line-height: 2em;
	font-family: Georgia, serif;
}

a {
	text-decoration: none;
	color: black;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.3em;
}

h2 {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 190%;
	letter-spacing: 30%;
	color: rgb(227, 212, 73);
	font-weight: lighter;
	max-width: 50%;
	margin-right: 5%;
	margin-left: auto;
}

ul {
	color: white;
	font-family: "Trebuchet MS", Helvetica, sans-serif;
	font-size: 115%;
	line-height: 40%;
	list-style-image: url("bullet point royal blue.png");
}

div p {
	background: none;
	font-size: 150%;
	line-height: 2em;
	font-weight: bold;
}

#home {
	z-index: +1;
	padding-right: 10px;
	padding-bottom: 15px;
	padding-top: 15px;
	border-style: solid;
	border-color: black;
	border-bottom: none;
	border-top: none;
	border-left: none;
	border-width: 1px;
}

#pad {
	z-index: +1;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 15px;
	padding-top: 15px;
	border-style: solid;
	border-color: black;
	border-bottom: none;
	border-top: none;
	border-left: none;
	border-width: 1px;
}

#contact {
	z-index: +1;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 15px;
	padding-top: 15px;
}

#central {
	margin: auto;
}

#disappear {
	margin-left: 42%;
	padding-right: 1em;
	padding-left: 0.25em;
}

#devprojs {
	font-family: "Courier New", Courier, monospace;
	font-weight: 500;
	text-align: center;
	font-size: 450%;
}

#div1 {
	background-image: url("architecture-1727807_1920 edit.jpg");
	padding-top: 3em;
	height: 70em;
}

#screenshot {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

#moveright {
	padding-bottom: 10em;
}

#view {
    font-family: Impact, Charcoal, sans-serif;
	letter-spacing: 10%;
	font-size: 110%;
	font-weight: lighter;
	background: rgb(79, 150, 150);
	padding-bottom: 1em;
	padding-top: 1em;
	padding-left: 1.5em;
	padding-right: 1.5em;
	border-style: solid;
	border-color: red;
}

#view2 {
	font-family: Impact, Charcoal, sans-serif;
	letter-spacing: 10%;
	font-size: 110%;
	font-weight: lighter;
	background: rgb(79, 150, 150);
	padding-bottom: 1em;
	padding-top: 1em;
	border-style: solid;
	border-color: red;
	padding-left: 1.5em;
	padding-right: 1.5em;
}

#top {
	position: relative;
	left: 75%;
	z-index: +1;
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	background: none;
	border: none;
	font-size: 120%;
}

#h12{
	color: white;
	font-size: 350%;
	max-width: 50%;
	margin-right: 5%;
	margin-left: auto;
}
	
#menu {
	max-width: 50%;
	margin-right: 4%;
	margin-left: auto;
}	

#lines {
	opacity: 0;
}


@media only screen and (min-width: 768px) {

h2 {

}

ul {
	position: relative;
	top: -29.9em;
	max-width: 50%;
	margin-left: 15%;
	margin-right: auto;
}
	
#top {
	position: relative;
	top: 2.4em;
	}

#h12 {
	position: relative; 
	top: 1em;
}

#disappear {
	position: relative;
	top:-14.1em;
}
	
#lines {
	position: relative;
	top: -5em;
}

#menu {
	position: relative;
	top: -5em;
 }

#home {
	position: relative;
	top: -12.3em;
}

#pad {
	position: relative;
	top: -12.3em;
}

#contact {
	position: relative;
	top: -12.3em;
}

#moveleft {
	position: relative;
	top: -5em;
}

#circle1 {
	font-size: 500%;
	color: darkred;
}

#circle2 {
	font-size: 500%;
	color: darkred;
}

#central {
	position: relative; 
    top: -38em;
}

#section1 {
	position: relative;
	top: -5em;
}

#circle1 {
	position: relative;
	top: -1.7em;
	max-width: 50%;
	margin-left: 7%;
	margin-right: auto;
}

#circle2 {
	position: relative; 
	top: -2.75em;
	max-width: 50%;
	margin-left: 88%;
	margin-right: auto;
}

#view {
	position: relative;
	top: -9em;
	margin-left: 38%;
	margin-right: auto;
}

#screenshot {
	position: relative;
	top: -5.5em;
	max-width: 97%;
}

#image1 {
	max-width: 325px;
	position: relative;
	top: -130px;
	margin-left: 13%;
	margin-right: auto;
	border: solid;
	border-color: black;
	border-width: 10px;
}

#image2 {
	max-width: 228px;
	position: relative;
	top: 20px;
	margin-left: -18.5%;
	margin-right: auto;
	border: solid;
	border-color: black;
	border-width: 10px;
}

#image3 {
	max-width: 179px;
	position: relative;
	top: 20px;
	margin-left: 5%;
	margin-right: auto;
	border: solid;
	border-color: black;
	border-width: 10px;
}

#image4 {
	max-width: 207px;
	position: relative;
	top: 20px;
	margin-left: 2.5%;
	margin-right: auto;
	border: solid;
	border-color: black;
	border-width: 10px;
}

#image5 {
	max-width: 225px;
	position: relative;
	top: 25px;
	margin-left: 2%;
	margin-right: auto;
	border: solid;
	border-color: black;
	border-width: 10px;
}

#view2 {
	position: relative;
	top: 05.7em;
	margin-left: 13%;
	margin-right: auto;
}

#top {
	position: relative;
	top: 2.4em;
	margin-left: 0%;
	margin-right: auto;
}

#bb {
	position: relative;
	top: 04.1em;
	margin-left: 66.4%;
	margin-right: auto;
}

}


@media only screen and (max-width: 1300px) {
	
#central {
	padding-left: 2em;
	padding-right: 2em;
	max-width: 80%;
}

div p {
	padding-left: 2em;
	padding-right: 2em;
	max-width: 80%;
	margin: auto;
}

}


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

ul {
	max-width: 50%;
	margin-left: 10%;
	margin-right: auto;
}

#image5 {
	display: none;
}

#view2 {
	position: relative;
	top: 4em;
}

#top {
	position: relative;
	top: 1em;
}

}

@media only screen and (max-width: 1110px) {
	
ul {
	max-width: 70%;
	margin-left: 5%;
	margin-right: auto;
}

#image4 {
	display: none;
}

}


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

ul {
	max-width: 70%;
	margin-left: 0%;
	margin-right: auto;
}	
}


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

#home {
	position: relative;
	top: -13.6em;
}

#pad {
	position: relative;
	top: -13.6em;
}

#contact {
	position: relative;
	top: -13.6em;
}
	
#disappear {
	height: 339px;
	position: relative;
	top:-15.9em;
}

#moveleft {
	position: relative;
	top: -8em;
}

#central {
	position: relative; 
    top: -40.5em;
}

}

@media only screen and (max-width: 1500px) {
	
header {
	height: 40em;
}

#circle1 {
	opacity: 0;
}

#circle2 {
	opacity: 0;
}

#top {
	background: solid;
	background-color: white;
	background-image: url("buttonbackground.png");
}

#bb {
	opacity: 0;
}

@media only screen and (max-width: 1160px) {
	
header {
	height: 45em;	
	}
	
#disappear {
	height: 392px;
	position: relative;
	top:-20.5em;
}

#home {
	position: relative;
	top: -16.3em;
}

#pad {
	position: relative;
	top: -16.3em;
}

#contact {
	position: relative;
	top: -16.3em;
}

#moveleft {
	position: relative;
	top: -14.5em;
}

#central {
	position: relative; 
    top: -44.5em;
}

}


@media only screen and (max-width: 1100px) {
	
header {
	height: 48em;	
	}
	
#div1 {
	height: 75em;
}

#view {
	margin-left: 30%;
	margin-right: auto;
}

#disappear {
	height: 432px;
}

#moveleft {
	position: relative;
	top: -16em;
}

#menu {
	margin-left: 46%;
	margin-right: auto;
}	

#home {
	position: relative; 
    top: -17em;
	padding-left: 10px;
	padding-right: 5px;
	border: none;
	border-style: solid;
	border-color: black;
	border-width: 1px;
}

#pad {
	position: relative; 
    top: -17em;
	padding-left: 8px;
	padding-right: 5px;
	border: none;
	border-style: solid;
	border-color: black;
	border-width: 1px;
}

#contact {
	position: relative;
	top: -15.8em;
	padding-left: 10px;
	border: none;
	border-style: solid;
	border-color: black;
	border-width: 1px;
}

#central {
	position: relative;
	top: -45em;
}

}


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

ul {
	display: none;
}


header {
	height: 42em;
}

h2 {
	max-width: 100%;
	margin-left: 5px;
	margin-right: auto;
}	

div p {
	font-size: 120%;
}

#div1 {
	height: 65em;
}

#h12{
	position: relative;
	top: 1em;
	max-width: 100%;
	margin-left: 5px;
	margin-right: auto;
}

#image1{
	margin-left: 45.5%;
	position: relative;
	top: 2em;
}

#image2{
	position: relative;
	top: -5em;
	margin-left: 13%;
}

#image3{
	display: none;
}

#view2 {
	position: relative;
	top: 0em;
}

#top {
	position: relative;
	top: -3em;
}

#disappear {
	display: none;
}

#central {
	position: relative; 
    top: -2em;
}

#menu {
	position: relative;
	top: 22.5em;
	margin-left: 5px;
	margin-right: auto;
	max-width: 100%;
}

#home {
	padding-right: 10px;
	border-style: solid;
	border-color: black;
	border-width: 1px;
}

#pad {
	padding-left: 10px;
	padding-right: 10px;
	border-style: solid;
	border-color: black;
	border-width: 1px;
}

#contact {
	position: relative;
	top: -17em;
	max-width: 50%;
	margin: auto;
	padding-bottom: 15px;
	padding-top: 15px;
	border-style: solid;
	border-color: black;
	border-width: 1px;
}

}


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

header {
	height: 46em;
}

	
}


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

#view {
	position: relative;
	top: -5em;
	margin-left: 20%;
}

#devprojs {
	position: relative;
	top: -1em;
}

#screenshot {
	max-width: 95%
}

#image1{
	max-width: 95%;
	margin-left: 0%;
	border: solid;
}

#image2{
	display: none;
}

#view2 {
	position: relative;
	top: 5em;
	margin-left: 10%;
}

#top {
	position: relative;
	top: 5em;
	margin-left: -40%;
}
	
}

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

header {
	height: 49em;
}

#view2 {
	position: relative;
	top: 5em;
	margin-left: 2%;
}

}

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

header {
	height: 52em;
}
	
}

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

header {
	height: 58.5em;
}

#menu {
	position: relative;
	top: 22.5em;
}

#home {
	max-width: 100%;
	margin: auto;
	text-align: center;
	padding-right: 10px;
	border-style: solid;
	border-color: black;
	border-width: 1px;
}

#pad {
	max-width: 100%;
	margin: auto;
	text-align: center;
	padding-left: 10px;
	padding-right: 10px;
	border-style: solid;
	border-color: black;
	border-width: 1px;
}

#contact {
	position: relative;
	top: -17em;
	max-width: 100%;
	margin: auto;
	text-align: center;
	padding-bottom: 15px;
	padding-top: 15px;
	border-width: 1px;
	border-style: solid;
	border-color: black;
}

#central {
	position: relative;
	top: -1em;
}

}

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

header {
	height: 60em;
}

#contact {
	position: relative;
	top: -15.8em;
}

#central {
	position: relative;
	top: -1.5em;
}

#div1 {
	height: 53em;
}

#devprojs {
	font-size: 400%;
}

#view {
	margin-left: 5%;
}

}

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

header {
	height: 75em;
}

h2 {
	font-weight: bolder;
}

#central {
	position: relative;
	top: 7em;
}

#pad {
	position: relative;
	top: -14.5em;
	margin-left: -95px;
}

#contact {
	position: relative;
	top: -12em;
	margin-left: -343px;
	padding-left: -10px;
}

#devprojs {
	font-size: 300%;
}

#view, #view2{
	font-size: 95%;
}

#devprojs {
	position: relative;
	top: 0em;
}

}