/* css style sheet for easy css */
h1{
	font-family: helvetica;
	color:#7B7B74; /*grey*/
}
h2 {
	font-family:"helvetica";
	margin:0;
	font-size:42px;
	padding-top: 5px;
}
h3 {
		font-family:"helvetica";
		font-style: italic;
		margin:0;
		font-size: 18px;
}
h4 {
	margin-top:0px;
	margin-bottom:0px;
	font-size: 32px;
	font-family: "helvetica";
	padding-top:5px;	
}
h5 {font-family:"helvetica";
	margin:0;
	font-size:37px;
	padding-top: 5px;
	
}
h6 {font-family:"helvetica";
	margin:0;
	font-size:30px;
	padding-top: 5px;
	
}
p {
	font-family:"optima";
}
.fontMargin {
	margin:0px 0px 0px 0px;
}


#container {
	position: relative;
	background-color:#BDF5DC; /*mint*/
	height:1400px;
	width: 1200px;
	/*margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;*/
	margin: 0px auto 0px auto;
}
header{
	height:186px;
	background-color: #7B7B74;
	color:#BDF5DC;
	text-align: center;
	padding: 1px;
}
#nav{
	height:52px;
	background-color: #7B7B74;
	top: 0px;
	left: 0px;
	color: #BDF5DC;
	text-align: center;
}
#logo{
	position: absolute;
	height: 0px;
	width: 100px;
	background-color: #7B7B74;
	top: 0px;
	left: 0px;
}
#banner{
	height:20px;
	background-color: black;
}
#topnav {
	position:absolute;
	top: 80px;
	left: 740px;
	width: 430px;
	height: 10px;
	background-color: #7B7B74;
	line-height: 30px;
	padding-left: 20px;
	font-family: "optima";
	color:#BDF5DC;
}
#maincontent{
	position: absolute;
	left: 50px;
	top: 200px;
	height: 500px;
	width: 500px;
	background-color: transparent;
	padding-top: 10px;
	padding-left:50px;
	padding-right: 50px;
	padding-bottom: 5px;
}
#photo{
	position: absolute;
	height: 0px;
	width: 10px;
	background-color: transparent;
	top: 200px;
	right: 450px;
	padding-top: 30px;
}
#photo1{
	position: absolute;
	height: 0px;
	width: 10px;
	background-color: transparent;
	top: 300px;
	right: 450px;
	padding-top: 30px;
}
#photo2{
	position: absolute;
	height: 0px;
	width: 10px;
	background-color: transparent;
	top: 650px;
	right: 450px;
	padding-top: 30px;
	
}
#image1 {
	position: absolute;
	background-color: transparent;
	top: 590px;
	right: 150px;
	padding-top: 30px;
}
#image2 {
	position: absolute;
	background-color: transparent;
	top: 970px;
	right: 150px;
	padding-top: 30px;
}
#textbox {
	position:absolute;
	top: 650px;
	left: 50px;
	right: 50px;
	height:186px;
	background-color: #7B7B74;
	color:#F2F0D9;
	text-align: left;
	padding-top: 50px;
	padding-left:50px;
	padding-right: 50px;
	padding-bottom: 5px;
}
#portfoliobox {
	position:absolute;
	width: 450px;
	top: 570px;
	height:300px;
	background-color: #7B7B74;
	color:#F2F0D9;
	text-align: left;
	padding-left: 100px;
	padding-top: 20px;
	padding-right: 650px;
	
}
#portfoliobox2 {
	position:absolute;
	width: 450px;
		top: 950px;
		height:300px;
		background-color: #7B7B74;
		color:#F2F0D9;
		text-align: left;
		padding-left: 100px;
		padding-top: 20px;
		padding-right: 650px;
}
#projectbox {
	position:absolute;
	width: 450px;
	top: 700px;
	height:300px;
	background-color: transparent;
	color:black;
	text-align: left;
	padding-left: 100px;
	padding-top: 100px;
	padding-right: 650px;
	
}

#iconboxone{
	position:absolute;
	top: 980px;
	left: 50px;
	height:250px;
	width: 250px;
	background-color: #7B7B74;
	color:#BDF5DC;
	text-align: left;
	padding-top: 30px;
	padding-left:50px;
	padding-right: 50px;
	padding-bottom: 5px;
}
#iconboxtwo{
	position:absolute;
	top: 980px;
	left: 425px;
	height:250px;
	width: 250px;
	background-color: #7B7B74;
	color:#BDF5DC;
	text-align: left;
	padding-top: 30px;
	padding-left:50px;
	padding-right: 50px;
	padding-bottom: 5px;
}
#iconboxthree{
	position:absolute;
	top: 980px;
	right: 50px;
	height:250px;
	width: 250px;
	background-color: #7B7B74;
	color:#BDF5DC;
	text-align: left;
	padding-top: 30px;
	padding-left:50px;
	padding-right: 50px;
	padding-bottom: 5px;
}
button.accordion {
    background-color: #7B7B74;
    color: #F2F0D9;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    text-align: center;
    border: none;
    outline: none;
    transition: 0.4s;
	font-family: arial;
	font-size: 15px;
}
button.accordion.active, button.accordion:hover {
    background-color:  #7B7B74;
}
div.panel {
    padding: 0 18px;
    background-color: #BDF5DC;
    max-height: 0;
    overflow: hidden;
    transition: 0.6s ease-in-out;
    opacity: 0;
}

div.panel.show {
    opacity: 1;
    max-height: 500px; /* Whatever you like, as long as its more than the height of the content (on all screen sizes) */
}

section {
	position:absolute;
	top: 600px;
	left:100px;
	width: 1000px;
	background-color:#BDF5DC ;
	margin: 0px auto 0px auto;
	color:black;

}
footer {
	position: absolute;
	height: 20px;
	width: 100%;
	background-color: gray;
	color: white;
	bottom: 0px;
	font-family:"roboto";
	font-size: 12px;
	text-align: center;
	padding-top:5px;	
}

a:link {
  color: #BDF5DC;
  background-color: transparent;
  text-decoration: none;
}

a:visited {
  color: #F2F0D9;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: #F2F0D9;
  background-color: transparent;
  text-decoration: none;
}

a:active {
  color: #F2F0D9;
  background-color: transparent;
  text-decoration: none;
}