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

* {
	font: 14px Arial, Helvetica, sans-serif;
	padding:0;
	margin:0;
	overflow-x: hidden;
}

body {
	background-color:rgb(218,255,56);
	background-image:url(../images/paper_bg.jpg);
	background-position:center;
	color:rgb(98,98,98);
}

img {
	width:100%;	
}

a {
	color:rgb(98,98,98);
	text-decoration:none;
	border-style:none;
}
a:hover {
	text-decoration:none;
	color:#333;
	border-style:none;	
}

h1 {
	font: 1em "TizaRegular", "Times New Roman", Times, serif ;
	text-shadow:0em .05em .05em rgb(0,0,0);
	padding:1em 0em .5em;

}

p.paragraph1 {
	font-size:.95em;
	width:90%;
	margin:auto;
	overflow:visible;
}

p.paragraph2 {
	font-size:.75em;
	margin:auto;
	width:85%;

}

i {
	font-style:italic;
}

/* ------------- *\
	DIVS & CLASSES
\* ------------- */

#container {
	height:100%;
	position:relative;
}

/* ------------- *\
	HEADER
\* ------------- */

#header-container {
	background-color:rgb(218,255,56);
	box-shadow: 0px 2px 0px rgb(99,99,99);
}

#header {
	width:100%;
	padding:2% 36.5%;
}

.header-image {
	width:27.5%;
}

/* ------------- MENU  ------------- */

/* ------------- *\
	FOOTER
\* ------------- */

#footer-container {
	width:100%;
	height:4.5em;

	box-shadow:inset 0px 3px 5px rgb(0,0,0);
	-moz-box-shadow:inset 0px 3px 5px rgb(0,0,0);
	-ms-box-shadow:inset 0px 3px 5px rgb(0,0,0);
	-webkit-box-shadow:inset 0px 3px 5px rgb(0,0,0);
	
	overflow:visible;
}

#footer {
	width:100%;
	height:100%;
	color:rgb(200,200,200);
	background:rgb(98,98,98);
	font-size:1em;
}

#footer a {
	color:rgb(200,200,200);
	font-size:.9em;
}

.left-footer-content {
	float:left;
    max-width:43%;
	text-align:left;
	padding:5%;
	padding-left:2%;
	overflow:visible;
}

.right-footer-content {
	float:right;
	max-width:43%;
	text-align:right;
	padding:5%;
	padding-right:2%;
	font-size:.9em;
	overflow:visible;
}

/* ------------- FOOTER END  ------------- */

/* ------------- *\
	MENU CONTENT
\* ------------- */

#menu {
	margin:.5em 0em;
}

.menu-button {
	position:absolute;
	top:.3em;
	right:.3em;
	width:10%;
	display:none;
}

.menu-container {
    width: 80%;
	font-size: 1.5em;
	margin:auto;
}

.menu-container li {
	list-style:none outside none;
	background:url(../images/mobile_menu_items_bg.png);
	background-position:center center;
	background-repeat:no-repeat;
	background-size:100% 50%;
	text-align:center;
}

.menu-container-items {
	font: 1.5em "LatinModernMono10Italic", "Times New Roman", Times, serif ;
	color:rgb(98,98,98);
	background-image:url(../images/paper_bg.jpg);
	background-position:center center;
	margin:auto;
	height:32px;
	padding:0em 5%;	
}

.menu-container-items:hover {
	cursor:pointer;
	box-shadow:0px 2px 0px rgb(98,98,98);
	
}

/* ------------- HEADER END ------------- */

/* ------------- *\
	MAIN CONTENT
\* ------------- */

#body-container {
    width: 100%;
    margin: auto;
    padding-bottom: 0%;
	overflow:visible;
}

/* ------------- *\
	CONTENT CONTAINER
\* ------------- */

#content-container {
	width:100%;
	margin:auto;
/*	background:rgb(150,150,200);*/
	padding:1em auto 1.5em;
}

#content-header {
/*	background:rgb(150,150,150);*/
	text-align:center;
	margin:auto;
	width:95%;
	padding:.5em 0em;
}

p.content-sub-header {
	font-size:90%;
}

/* ------------- CONTENT CONTAINER END ------------- */

/* ------------- *\
	SEPARATOR CONTENT
\* ------------- */

#separator {
	width:40px;
	height:40px;
/*	background:rgb(200,100,100);*/
	margin:1em auto;
}

img.left-separator, img.right-separator {
	overflow:hidden;
	width:0px;
}

.home-button {
	height:40px;
	display:block;
	background-image:url(../images/link_home_hover_retina.png);
	background-size:100%;
/*	
	overflow:hidden;
	width:0px; height:0px;
	margin:0px;
*/
}

.home-button:hover /*.mobile-home-button:hover */{
	background-image:url(../images/link_home_hover_retina.png);
	background-size:100%;
}
/* ------------- SEPARATOR END ------------- */

/* ------------- *\
	PORTFOLIO CONTAINER
\* ------------- */


#portfolio-container {
position:relative;
overflow:visible;
max-width:380px;
margin: auto;
width:95%;
text-align:center;
/*	background:rgb(68,255,255);*/
}


#individual-portfolio-background {
    z-index: 5;
    width: 95%;
    max-width: 370px;
    box-shadow: 0px 0.3em 0.4em rgba(0, 0, 0, 0.75);
    margin: 0.5em auto 1em;
}

#individual-splash-text {
    background: none repeat scroll 0% 0% rgb(218, 255, 56);
    position: absolute;
    z-index: 11;
    overflow: visible;
    width: 99%;
	margin:auto .5%;
    padding-top: 1.5%;
    padding-bottom: 1.5%;

    top: 68%;	
	
	border:1px solid rgb(99,99,99);
}
/*
#individual-portfolio-background:hover #individual-splash-text {
	box-shadow:0px 5px 5px rgba(0,0,0,.75);
}

#portfolio-container:active #individual-splash-text {
	box-shadow:0px 2px 2px rgba(0,0,0,.75);
}*/

.project-type {
	float:left;
	text-transform:lowercase;
	font-style:italic;
	margin-left:3%;
    font-size:90%;
}

.company-name {
	float:right;
	text-transform:uppercase;
	font-style:italic;
	margin-right:3%;
    font-size:90%;
}

/* ------------- PORTFOLIO END ------------- */

/* ------------- *\
	WORK PORTFOLIO PAGE ADJUSTMENTS
\* ------------- */

.portfolio-paragraph {
	padding:5px 0px 10px;
}

.portfolio-quote {
	padding:10px 5%;
	background:rgb(218,255,56);
	font-style:italic;
}

/* ------------- *\
	CONTACT FORM
\* ------------- */

.form {
	margin: .8em auto;
	width:90%;
/*	background:rgb(0,255,100);*/
}

.fields {
	margin:auto;
}

.message {
	overflow:visible;
	margin:0em auto .8em;
	
}
/*
::-webkit-input-placeholder {
    color:rgba(204,102,51,.9);
}*/
:-moz-placeholder {
    color:rgba(204,102,51,.9);
}

.inputField, textarea {	
	background:rgba(255,255,255,1);
	
	box-shadow:inset 0px 2px 4px rgba(0,0,0,.4);
	-moz-box-shadow:inset 0px 2px 4px rgba(0,0,0,.4);
	-webkit-box-shadow:inset 0px 2px 4px rgba(0,0,0,.4);
	-o-box-shadow:inset 0px 2px 4px rgba(0,0,0,.4);
}

.inputField {
    border: .1em solid rgb(98, 98, 98);
	font-size:.9em;
	width:95%;
    padding:2%;
    border-radius: .4em;
    display: block;
	margin-top:.7em;
}

.textarea {
    border: 1px solid rgb(98, 98, 98);
	font-size:.9em;
	width:95%;
	max-width:96%;
    line-height: 150%;
	min-height:5em;
    padding: 2%;
    border-radius: .4em;
    margin: auto auto .5em;
    display: block;
}

.inputField:hover, .textarea:hover {
	border-color:rgb(218,255,56);
	
   box-shadow:inset 0px 2px 4px rgba(0,0,0,.7);
   -moz-box-shadow:inset 0px 2px 4px rgba(0,0,0,.7);
   -webkit-box-shadow:inset 0px 2px 4px rgba(0,0,0,.7);
   -o-box-shadow:inset 0px 2px 4px rgba(0,0,0,.7);
   }

.inputField:focus, .textarea:focus {
   background:rgb(229,255,115);
}
.submitbutton {
	-webkit-appearance: none; /* override IOS submit button default*/
    color: rgb(255, 255, 255);
	
    border-radius: .4em;
    -moz-border-radius: .4em;
    -ms-border-radius: .4em;
    -o-border-radius: .4em;
	-webkit-border-radius: .4em;
	
    box-shadow: 0px 4px 4px rgb(0, 0, 0);
    -webkit-box-shadow: 0px 4px 4px rgb(0, 0, 0);
    -ms-box-shadow: 0px 4px 4px rgb(0, 0, 0);
    -o-box-shadow: 0px 4px 4px rgb(0, 0, 0);
    -moz-box-shadow: 0px 4px 4px rgb(0, 0, 0);
	
    text-shadow: 0px 0.1em 0.1px rgb(0, 0, 0);
    -moz-text-shadow: 0px 0.1em 0.1px rgb(0, 0, 0);
    -ms-text-shadow: 0px 0.1em 0.1px rgb(0, 0, 0);
    -o-text-shadow: 0px 0.1em 0.1px rgb(0, 0, 0);
    -webkit-text-shadow: 0px 0.1em 0.1px rgb(0, 0, 0);
	
    font: 1em "TizaRegular","Times New Roman",Times,serif;
    border:  none;
    text-transform: uppercase;
    background: none repeat scroll 0% 0% rgb(98, 98, 98);
    height: 2.5em;
	width: 95%;
    margin: auto;
    display: block;
	overflow:visible;
}

.submitbutton:active {
	box-shadow: 0px 2px 2px rgb(0,0,0);
	-moz-box-shadow: 0px 2px 2px rgb(0,0,0);
	-o-box-shadow: 0px 2px 2px rgb(0,0,0);
	-webkit-box-shadow: 0px 2px 2px rgb(0,0,0);
	-ms-box-shadow: 0px 2px 2px rgb(0,0,0);
}

/* ------------------- CONTACT FORM END ----------------*/

/* ------------- *\
	CONTACT SUBMIT PAGE
\* ------------- */

#submission-content {
	margin:auto;
	padding:1em;
	text-align:center;
}

a.fixSubmit {
	text-transform:capitalize;
	font-style:italic;
	font-weight:bold;
	text-decoration:underline;
}	

/* ------------------- CONTACT SUBMIT PAGE END ----------------*/

/* ------------------- *\
	ABOUT ME DIV
\* ------------------- */

#about-bold {
		font: 1.5em "LatinModernMono10Italic", "Times New Roman", Times, serif ;
		line-height:inherit;
}

img.paragraph-picture {
	width:100%;
}

#paragraph-picture-design {
    float: left;
    width: 40%;
    margin: .5em 0.8em 0.2em auto;
    box-shadow: 0em 0.25em 0.5em rgb(0, 0, 0);
}

/* ------------------- *\
	PORTFOLIO BODY
\* ------------------- */

#portfolio-feature-body {
	position:relative;
	width:100%;
	margin:auto;
	overflow:visible;
	padding-bottom:60px;
}

#feature-container {
    margin: auto;
	overflow:inherit;
}

#feature {
	position:relative;
	width:95%;
	margin:auto;
	z-index:1;
	overflow:visible;
}

.feature-paragraph {
	padding:1em 0em 1em;
	overflow:inherit;
	min-height:6em;
}

#feature img {
	box-shadow:0em .2em .3em rgb(0,0,0);
}

#left-feature-nav {
    position: absolute;
    bottom: .5em;
	left:3%;
	overflow:inherit;
	z-index:99;
}

#right-feature-nav {
    position: absolute;
    bottom: .5em;
    right: 3%;
    overflow: inherit;
	z-index:99;
}

.left-button, .right-button {
	display:block;
	width:38px;
	height:38px;
	
	border-radius:19px;
	background-position:center center;
}

.left-button {
	background:url(../images/left_link_hover_retina.png);
	background-size:40px;
	background-repeat:no-repeat;
}
.right-button {
	background:url(../images/right_link_hover_retina.png);
	background-size:40px;
	background-repeat:no-repeat;
}
/*
.right-button:hover, .left-button:hover {
	box-shadow:0px 0px 3px 5px rgb(0,0,0);
	box-shadow:inset 0px 3px 5px rgb(0,0,0);
}*/

#feature-description p{
	background: none repeat scroll 0% 0% rgb(218, 255, 56);
	padding:2% 3%;
	font-style:italic;
}

#feature-links ul {
	display:block;
	width:80%;
	margin:0px 15%;
}

.feature-links-ul {
	list-style-position:inside;
	list-style-type:none;
	margin:.5em 2em;
}

.feature-links-ul li ul li {
	list-style-position:inside;
	list-style-type:none;
	margin-left: 2em;
}

/* PRIVACY POLICY */

#privacy-policy-paragraph {
	width:95%;
	margin:auto;
}

.ul-margin-left-10 {
	width:95%;
	margin:auto;
}

.li-margin-left {
	margin:5px inherit 2px;
}


/* RECAPTCHA EDITS  */

#recaptcha_response_field {width:90%; border:1px solid #626262;}
#recaptcha_response_field:hover {border-color: #DAFF38; box-shadow:0px 2px 4px rgba(0, 0, 0, 0.7) inset;}
#recaptcha_response_field:focus {background:#E5FF73;}
#recaptcha_privacy a {font-size: 8px;}
#recaptcha_logo { display:none;}