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

html {
	height: 100%;
	}
body {
	margin: 0; padding: 0; 
	width: 100%;
	background: url(../images/grey.png);
	height: 100%; 
	font-size: 1vw;}
p, li, ol {
	font-family: "Open Sans", sans-serif;
	font-size: 14px;
	}
p {
	line-height: 1.6em;
	}

#name {
	display: none!important;
	}
@media all and (min-width: 801px) {
section {
	min-height: 100%;
	clear: both;
	}
}
@media all and (max-width: 800px) {
section {
	clear: both;
	}
}
	
/* ----- MAIN and NAVIGATION -----*/

@media all and (min-width: 801px) {

#control {
	display: block;
	position: fixed;
	width: 28%;
	width: 28vw;
	float: left;
	height: 100%;
	background: #fff;
	border-right: 5px solid #e9e9d4;
	}
	
#content {
	display: block;
	float: left;
	margin-left: 29%;
	margin-left: 29vw;
	height: 100%;
	padding: 20px;
	width: 60%;
	width: 60vw;
	}

nav {
	float: right;
	margin-right: -5px;
	margin-top: 16%;
	margin-top: 16vh;
	}
nav ul {
	list-style: none;
	}
nav ul li {
	font-family: "Arvo", serif;
	font-size: 24px;
	margin-top: 20px;
	padding-right: 20px;
	text-align: right;
	border-right: 5px solid #e9e9d4;
	}
nav ul li:hover {
	border-right: 5px solid #0066FF;
	}
nav ul li a {
	text-decoration: none;
	color: #333;
	}
	
}

@media all and (max-width: 800px) {

#control {
	display: block;
	height: 40px;
	width: 100%;
	width: 100vw;
	background: #1E1E1E;
	border-bottom: 5px solid #e9e9d4;
	position: fixed;
	margin-top: -70px;
	z-index: 2;
	}
	
#content {
	display: block;
	height: 100%;
	width: 92%
	width: 92vw;
	paddin: 4%;
	padding: 4vw;
	margin-top: 70px;
	}

nav {
	text-align: center;
	}
nav ul {
	list-style: none;
	padding: 0;
	}
nav ul li {
	display: inline-block;
	font-family: "Arvo", serif;
	font-size: 16px;
	line-height: 34px;
	padding-left: 10px;
	text-align: center;
	}
nav ul li a {
	text-decoration: none;
	color: #fff;
	letter-spacing: -1px;
	font-weight: bold;
	}

}

/*----- PROFILE SECTION -----*/

@media all and (min-width: 801px) {

#profile {
	display: block;
	position: relative;
	width: 720px;
	width: 60vw;
	height: 300px;
	height: 25vw;
	border: 5px solid #e9e9d4;
	}
#profile img {
	width: 720px;
	width: 60vw;
	height: 300px;
	height: 25vw;
	}

.rule {
	display: block;
	height: 5px;
	width: 60vw;
	background: #333333;
	}

h4 {
	position: absolute;
	bottom: 100px;
	left: 0;
	width: 100%;
	font-family: "Arvo", serif;
	font-size: 38px;
	color: #fff;
	margin: 0;
	}
h4 span {
	letter-spacing: -1px;
	background: rgb(0, 0, 0);
	background: rgba(0, 0, 0, 0.7);
	padding: 8px;
	}
#profile p {
	position: absolute;
	bottom: 36px;
	left: 0;
	font-family: "Open Sans", sans-serif;
	font-size: 25px;
	margin: 0;
	color: #fff;
	letter-spacing: -1px;
	background: rgb(0, 0, 0);
	background: rgba(0, 0, 0, 0.7);
	padding: 8px;
	}
h1 {
	display: block;
	height: 50px;
	padding-top: 40px;
	font-family: "Arvo", serif;
	font-size: 40px;
	font-weight: bold;
	}
h2 {
	font-family: "Open Sans", sans-serif;
	font-size: 26px;
	font-weight: bold;
	}

}

@media all and (max-width: 800px) {

#profile {
	display: block;
	position: relative;
	width: 90%;
	width: 90vw;
	height: 37.5vw;
	
	}
#profile img {
	width: 98%;
	width: 90vw;
	height: 37.5vw;
	border: 5px solid #e9e9d4;
	}

.rule {
	display: block;
	height: 5px;
	width: 92vw;
	background: #333333;
	}

h4 {
	position: absolute;
	bottom: 62px;
	left: 0;
	width: 100%;
	font-family: "Arvo", serif;
	font-size: 6vw;
	color: #fff;
	margin: 0;
	}
h4 span {
	letter-spacing: -1px;
	background: rgb(0, 0, 0);
	background: rgba(0, 0, 0, 0.7);
	padding: 8px;
	}
#profile p {
	position: absolute;
	bottom: 15px;
	left: 0;
	font-family: "Open Sans", sans-serif;
	font-size: 4vw;
	margin: 0;
	color: #fff;
	letter-spacing: -1px;
	background: rgb(0, 0, 0);
	background: rgba(0, 0, 0, 0.7);
	padding: 8px;
	}
h1 {
	display: block;
	height: 40px;
	font-family: "Arvo", serif;
	font-size: 30px;
	font-weight: bold;
	padding-top: 60px;
	}
h1.welcome {
	padding: 0;!important
	}
h2 {
	font-family: "Open Sans", sans-serif;
	font-size: 16px;
	font-weight: bold;
	}

}

	
/*------ ABOUT SECTION -----*/

@media all and (min-width: 801px) {


#history {
	width: 300px;
	width: 24vw;
	float: left;
	padding-right: 60px;
	}	
#skills {
	width: 400px;
	width: 30vw;
	float: left;
	}
#skills .sub {
	font-style: italic;
	}
#skills ul {
	list-style: none;
	padding: 0;
	}
#skills ul li {
	border-bottom: 1px dotted #333333;
	margin-bottom: 5px;
	}
#achievements {
	width: 400px;
	width: 30vw;
	float: left;
	}
#achievements ul {
	list-style: none;
	padding: 0;
	}
#achievements ul li {
	border-bottom: 1px dotted #333333;
	margin-bottom: 10px;
	}
	
}

@media all and (max-width: 800px) {

#about p {
	width: 90vw;
	}

}

/*----- PORTFOLIO SECTION -----*/

@media all and (min-width: 801px) {

#site {
	display: block;
	position: relative;
	width: 750px;
	width: 60vw;
	height: 250px;
	height: 20vw;
	border: 5px solid #e9e9d4;
	float: left;
	margin-bottom: 20px;
	}
#site img {
	width: 750px;
	width: 60vw;
	height: 250px;
	height: 20vw;
	}
#site p {
	position: absolute;
	bottom: 21px;
	left: 0;
	font-family: "Open Sans", sans-serif;
	font-size: 16px;
	margin: 0;
	color: #fff;
	letter-spacing: -1px;
	background: rgb(0, 0, 0);
	background: rgba(0, 0, 0, 0.7);
	padding: 8px;
	}
.item-1 {
	margin-right: 20px;
	}
.item-label {
	position: absolute;
	top: 0;
	}

h3 {
	position: absolute;
	bottom: 70px;
	left: 0;
	width: 100%;
	font-family: "Arvo", serif;
	font-size: 22px;
	margin: 0;
	}
h3 span {
	letter-spacing: -1px;
	background: rgb(0, 0, 0);
	background: rgba(0, 0, 0, 0.7);
	padding: 8px;
	}
h3 span a {
	color: #fff;
	text-decoration: none;
	}

}

@media all and (max-width: 800px) {

#site {
	display: block;
	width: 300px;
	width: 90vw;
	margin-bottom: 20px;
	}
#site img {
	width: 300px;
	width: 90vw;
	height: 100px;
	height: 30vw;
	border: 5px solid #e9e9d4;
	}
#site p {
	font-family: "Open Sans", sans-serif;
	font-size: 14px;
	margin: 0;
	color: #fff;
	letter-spacing: -1px;
	background: rgb(0, 0, 0);
	background: rgba(0, 0, 0, 0.7);
	padding: 8px;
	}
.item-1 {
	margin-right: 20px;
	}

h3 {
	width: 100%;
	font-family: "Arvo", serif;
	font-size: 18px;
	margin: 7px 0 8px 0;
	}
h3 span {
	letter-spacing: -1px;
	background: rgb(0, 0, 0);
	background: rgba(0, 0, 0, 0.7);
	padding: 8px;
	}
h3 span a {
	color: #fff;
	text-decoration: none;
	}

}

/*----- CONTACT SECTION -----*/

form {
	float: left;
	}
#connect {
	list-style: none;
	padding: 0;
	}
#connect li {
	display: inline-block;
	padding: 6px;
	width: 41px;
	}
.connect {
	max-height: 30px;
	}
.connect a {
	border: none;
	}

@media all and (min-width: 801px) {

label {
	display: inline-block;
	width: 200px;
	font-family: "Arvo", serif;
	font-size: 18px;
	margin-top: 20px;
	}
input {
	display: inline-block;
	width: 180px;
	padding: 5px;
	margin: 0;
	border: 5px solid #e9e9d4;
	font-family: "Open Sans", sans-serif;
	font-size: 14px;
	}
input:hover,
textarea:hover {
	border: 5px solid #0066FF;
	}
input:focus,
textarea:focus {
	border: 5px solid #0066FF;
	}
textarea {
	display: block;
	width: 385px;
	height: 130px;
	padding: 5px;
	margin: 0;
	border: 5px solid #e9e9d4;
	font-family: "Open Sans", sans-serif;
	font-size: 14px;
	}
#business-card {
	float: left;
	margin-left: 40px;
	}
	
}

@media all and (max-width: 800px) {

form {
	width: 90vw;
	}

label {
	display: inline-block;
	width: 35vw;
	font-family: "Arvo", serif;
	font-size: 16px;
	font-weight: bold;
	margin: 20px 16px 0 0;
	}
input {
	display: inline-block;
	width: 35vw;
	padding: 2px;
	margin: 0;
	border: 5px solid #e9e9d4;
	font-family: "Open Sans", sans-serif;
	font-size: 12px;
	}
input:hover,
textarea:hover {
	border: 5px solid #0066FF;
	}
input:focus,
textarea:focus {
	border: 5px solid #0066FF;
	}
textarea {
	display: block;
	width: 72vw;
	height: 130px;
	padding: 5px;
	margin: 0;
	border: 5px solid #e9e9d4;
	font-family: "Open Sans", sans-serif;
	font-size: 12px;
	}
#business-card {
	float: left;
	}

}
input.error {
	border: 5px solid #E79C9C;!important
	}
textarea.error {
	border: 5px solid #E79C9C;!important
	}

/*----- RESOURCE SECTION -----*/

.resources {
	list-style: none;
	padding: 0;
	}

@media all and (min-width: 801px) {

.resources li {
	display: inline-block;
	width: 200px;
	height: 50px;
	margin: 0 20px 20px 0;
	border: 5px solid #e9e9d4;
	text-align: center;
	}
.resources li a {
	display: block;
	width: 200px;
	height: 50px;
	background: #333;
	color: #fff;
	text-decoration: none;
	font-family: "Arvo", serif;
	font-size: 18px;
	line-height: 50px;
	}

}

@media all and (max-width: 800px) {

.resources li {
	display: inline-block;
	width: 145px;
	height: 40px;
	margin: 0 10px 10px 0;
	border: 5px solid #e9e9d4;
	text-align: center;
	}
.resources li a {
	display: block;
	width: 145px;
	height: 40px;
	
	background: #333;
	
	color: #fff;
	text-decoration: none;
	font-family: "Arvo", serif;
	font-size: 14px;
	line-height: 40px;
	}

}
.resources li a:hover > .resources li {
	border: 5px solid #0066FF;
	}