/* BASIC STYLES */

html, body,
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input {
	margin: 0px;
	padding: 0px;
}
.clear {
	clear: both;
}
body {
	background: #000;	
}
#container {
	padding: 0px;
	margin: 0px;
}


a:link,
a:visited {
	color: #897D6B;
	text-decoration: none;
	border-bottom: 1px dotted #5A5246;
}

a:hover,
a:active {
	color: #E0DDD8;
	text-decoration: none;
	border: none;	
}

.highlight {
	color: #897d6b;
}

/* HEADER STUFF */

#header {
	z-index: 2;	
	margin: 0;
	padding: 0;
	height: 302px;
}
#header-1920 {
	position: relative;
	overflow: hidden;
/*	width: 1920px;  */
	margin: auto;
	height: 302px;
	z-index: 1;
	margin: auto;
}
#header-bg {
	z-index: 0;
	position: absolute;	
	margin: 0;
	padding: 0;
	height: 302px;
	width: 1920px;  
	overflow: hidden;
}
#header-bg-1 {
	z-index: 2;
	position: absolute;	
	margin: 0;	
	padding: 0;
	height: 302px;
	width: 1920px; 
	overflow: hidden;
}
#header-bg-2 {
	z-index: 1;
	position: absolute;	
	padding: 0;
	height: 302px;
	width: 1920px; 
	overflow: hidden;

}
#fence-top {
	z-index: 4;
	position: relative;
	height: 40px;
	background: url(../i/fence-top.png) bottom center repeat-x;
	padding: 0;
	margin: 0;
	overflow: hidden;
}
#banner {
	z-index: 3;	
	position: relative;
	width: 980px;
	min-width: 980px;
	margin: 0 auto;
	height: 262px;
	padding: 0;
}
#owl {
	z-index: 4;	
	position: relative;
	width: 209px;
	height: 262px;
	background: url(../i/owl.png) bottom no-repeat;
	padding: 0;
	margin-left: 97px;
}

#owl a {
	width: 209px;
	height: 262px;
	display: block;
	border: none;
	background: url(../i/owl.png) bottom no-repeat;
}

#owl a:hover {
	background: url(../i/owl-over.png) bottom no-repeat;	
}

#reaktive-design {
	z-index: 5;	
	position: absolute;
	left: 570px;
	top: 20px;
	border: none;
}

#reaktive-design a {
	width: 400px;
	height: 106px;
	overflow: hidden;
	display: block;
	border: none;
	background: url(../i/reaktive-design.png) no-repeat;	
}
#reaktive-design a:hover {
	background: url(../i/reaktive-design-over.png) no-repeat;	
}

#main {
	position: relative;
	background: url(../i/fence-bg.jpg) top center;
	font-size: 1em;
}
#main-top {
	width: 980px;
	min-width: 980px;	
	margin: auto;
	min-height: 300px;
	position: relative;
}


#main-top h4 {
	padding: 0;
	font-family: "Amaranth", "Arimo", Arial, sans-serif;		 
	color: #897D6B;
	display: block;
	font-size: 1.3em;
	padding: 5px 25px 0px 25px;
	text-align: center;
	font-weight: bold; 
	text-shadow: 2px 2px 1px #000; 	
	letter-spacing: 0.075em;
	display: block;
}
#main-top h5 {
	padding: 0;
	font-family:  "Schoolbell", "Amaranth", "Arimo", Arial, sans-serif;		 
	color: #817665;
	color: #C5BAB2;	
	display: block;
	font-size: 1.4em;
	padding: 5px 25px 0px 25px;
	text-align: center;
	font-weight: bold; 
	text-shadow: 2px 2px 1px #000; 	
	letter-spacing: 0.075em;
	color: #C5BAB2;	
	display: block;
	font-size: 1.4em;	
}

#wisdom {
	height: 99px;
	width: 355px;	
	display: block;
	position: relative;
	left: 20px;
	float: left;
}

#graffiti {
	width: 400px;
	height: 240px;
	position: absolute;
	background: url(../i/graffiti.png);
	overflow: hidden;	
	left: 570px;
	top: 70px;
}

.bqstart {
	color: #897D6B;	
 }



 .bqend {

	color: #897D6B;	
 }

/* NAVIGATION MENU */

#nav {
	float: left;
	width: 504px;	
	height: 47px;
	margin-top: 17px;
	margin-left: 114px;
}

#nav a {
	display: block;
	width: 120px;
	height: 47px;
	margin-left: 6px;	
	background: url(../i/menu.jpg);
	float: left;
	border: none;
}

#nav #about { background-position: -0px 0px; }
#nav #services { background-position: -240px 0px; }
#nav #contact { background-position: -360px 0px; }
#nav #portfolio { background-position: -120px 0px; }
#nav #about:hover { background-position: 0px 47px; }
#nav #services:hover { background-position: -240px 47px; }
#nav #contact:hover { background-position: -360px 47px; }
#nav #portfolio:hover { background-position: -120px 47px; }

.selected { text-decoration: underline; }

/* MAIN CONTENT */

#home-page h3 {
	font-family:  "Schoolbell", "Amaranth", "Arimo", Arial, sans-serif;		 
	display: block;
	font-size: 1.6em;
	padding: 5px 25px 5px 25px;
	text-align: center;
	text-shadow: 2px 2px 1px #000; 	
	letter-spacing: 0.075em;
	color: #ECEBE6;	
	display: block;
	font-weight: 400;
}

#main-left-column {
	width: 600px;
	float: left;	
}

#main-right-column {
	width: 320px;
	float: left;	
	min-height: 200px;
	margin-top: 200px;
}


.text-box-left {
	background:url(../i/black-40.png);
	border-radius: 25px;
	width: 520px;
	margin-left: 50px;
	margin-top: 30px;
	margin-bottom: 40px;
	padding-top: 20px;
	padding-bottom: 20px;
}

.text-box-right {
	background:url(../i/black-40.png);
	border-radius: 25px;
	width: 330px;
	margin-left: 30px;
	margin-top: 30px;
	margin-bottom: 40px;
	padding-top: 20px;
	padding-bottom: 20px;
}

.text-box-right img {
	margin: 10px 35px;
	box-shadow: 0px 0px 10px #000;	
}


.text-box-left p,
.text-box-right p {
	margin: 0;
	padding: 10px 90px 10px 90px;	
	text-align: center;
	
	color: #5A5246;
	font-family: "Amaranth", "Arimo", Arial, sans-serif;	
	font-size: 1.3em;	
	text-shadow: 1px 1px 0.5px #000; 	
	
}

.text-box-1 {
	background:url(../i/black-40.png);
	border-radius: 25px;
	width: 320px;
	margin-left: 40px;
	margin-top: 40px;
}

/* ABOUT US */

#about-us {
	margin-top: 30px;
}

#about-us #about-left-column,
#about-us #about-right-column
 {

	background:url(../i/black-40.png);
	border-radius: 15px;
	padding: 20px 30px 30px 30px;	
	text-align: center;
	position: relative;	
	color: #5A5246;
	font-family: "Amaranth", "Arimo", Arial, sans-serif;	
	font-size: 1.2em;	
	text-shadow: 1px 1px 0.5px #000; 	
	
}
#about-us #about-left-column {
	width: 600px;		
	float: left;
	margin-left: 10px;
}

#about-us #about-right-column {
	width: 180px;
	margin-left: 40px;
	float: left;
	font-size: 1em;	
}

#about-us h3 {
	padding: 0;
	font-family: "Chewy", "Amaranth", "Arimo", Arial, sans-serif;	 
	color: #893030;
	margin: 0px 0px 5px 0px;
	display: block;
	font-size: 1.6em;		
	text-shadow: 2px 2px 1.5px #000; 	
	font-weight: normal;
	letter-spacing: 0.1em;	
}
#about-us h4 {
	padding: 0;
	font-family:  "Schoolbell", "Amaranth", "Arimo", Arial, sans-serif;		 
	color: #C5BAB2;	
	display: block;
	font-size: 1.4em;
	padding: 10px 25px;
	text-align: center;
	font-weight: bold; 
	text-shadow: 2px 2px 1px #000; 	
	letter-spacing: 0.075em;	
}
#about-us h5 {
	padding: 0;
	font-family: "Schoolbell", "Amaranth", "Arimo", Arial, sans-serif;		 
	color: #817665;
	color: #C5BAB2;	
	color: #998E7D;		
	display: block;
	font-size: 1.2em;
	padding: 10px 25px;
	text-align: center;
	text-shadow: 2px 2px 1px #000; 		
	letter-spacing: 0.1em;		
}
#about-us p {
	padding: 10px 10px;	
}
/* PORTFOLIO */

#portfolio-arrow {
	position: absolute;
	left: 480px;
	top: 60px;
	width: 318px;
	height: 108px;
	background-image: url(../i/pf-arrow.png);
	background-position: top center;
	background-repeat: no-repeat;	
}


#portfolio-nav {
	width: 920px;
	margin: 40px auto 0px auto;
	position: relative;
	left: 0px;
	height: 30px;	
	display: block;
}

#portfolio-nav #prev {
	display: block;
	float: left;
	width: 104px;
	height: 30px;	
}

#portfolio-nav a#prev:link,
#portfolio-nav a#prev:visited {
	display: block;
	float: left;
	width: 104px;
	height: 30px;
	background: url(../i/prev-pf-item.png) no-repeat;		
	border: none;
	text-decoration: none;
}
#portfolio-nav a#prev:hover,
#portfolio-nav a#prev:active {
	background: url(../i/prev-pf-item-over.png) no-repeat;		
}


#portfolio-nav a#goback:link,
#portfolio-nav a#goback:visited {
	display: block;
	float: left;
	margin-left: 315px; 
	width: 82px;
	height: 30px;
	background: url(../i/go-back-pf.png) no-repeat;		
	border: none;
	text-decoration: none;
}
#portfolio-nav a#goback:hover,
#portfolio-nav a#goback:active {
	background: url(../i/go-back-pf-over.png) no-repeat;		
	border: none;
	text-decoration: none;	
}

#portfolio-nav a#next:link,
#portfolio-nav a#next:visited {
	display: block;
	float: right;
	width: 88px;
	height: 30px;
	background: url(../i/next-pf-item.png) no-repeat;		
	border: none;
	text-decoration: none;
}
#portfolio-nav a#next:hover,
#portfolio-nav a#next:active {
	background: url(../i/next-pf-item-over.png) no-repeat;		
}

#main-portfolio-item img#go-back-pf-arrow {
	position: absolute;
	top: 70px;
	left: 500px;	
}

#main-portfolio {
	width: 960px;
	margin: auto;	
	padding-top: 60px;
}

#main-portfolio-item {
	width: 960px;
	margin: auto;	
	padding-top: 20px;
}


#slider {
/*	border-radius: 25px; */
	float: left;	
	margin: 10px 20px;	
/*	border: 2px solid #CDC4BF;  */
	vertical-align: middle;
	box-shadow: 0px 0px 10px #000;
}

.portfolio-text {
	width: 900px;
	margin: 20px auto 20px auto;	
	background:url(../i/black-40.png);
	border-radius: 15px;
	padding: 20px 10px 30px 10px;	
	text-align: center;
	position: relative;	
	color: #5A5246;
	font-family: "Amaranth", "Arimo", Arial, sans-serif;	
	font-size: 1.2em;	
}

.portfolio-text ul {
	float: left;
	margin: 0px 30px 5px 20px;	
	text-align: left;
	width: 265px;
	list-style-image: url(../i/bullet.png);
}

.portfolio-text ul li {
	margin: 10px 0px 0px 28px;	
	
}

.portfolio-text h3 {
	padding: 0;
	font-family: "Amaranth", "Arimo", Arial, sans-serif;	 
	color: #C5BAB2;
	margin: 5px 0px 5px 0px;
	display: block;
/*	background:url(../i/black-40.png); */
/*	border-bottom: 2px dotted #5A5246; */
}
.portfolio-text p{
	padding: 5px 20px 5px 20px;
	text-align: justify;
}


.portfolio-row {
	clear: both;	
}

.portfolio-item {
	width: 260px;
	float: left;
	background:url(../i/black-40.png);
	border-radius: 15px;
	margin: 20px;
	padding: 20px 10px 10px 10px;	
	text-align: center;
	min-height: 100px;
	position: relative;
}

.portfolio-item:hover {
	background:url(../i/black-60.png);	
}
.portfolio-item h3 {
	margin: 0;
	padding: 0;
	font-family: "Amaranth", "Arimo", Arial, sans-serif;	 
	font-weight: 400;
	color: #C5BAB2;
	margin-top: 5px;
	font-size: 1em;
}

.portfolio-item:hover h3 {
	color: #EEEBE8;
}


.portfolio-text h3.red {
	padding: 0;
	font-family: "Chewy", "Amaranth", Arial, sans-serif;	 
	color: #893030;
	margin: 0px 0px 5px 0px;
	display: block;
	font-size: 1.6em;		
	text-shadow: 2px 2px 1.5px #000; 	
	font-weight: normal;
	letter-spacing: 0.1em;	
}

.portfolio-item a {
	display: block;
	height: 170px;	
	width: 240px;
	margin-left: 10px;
	position: relative;	
	border: none;
}
	
img.a {
	position: absolute;
	left: 0;
	top: 0;
    z-index: 10;
	border: none;
	border-radius: 15px;	
}		
	
img.b {
	position: absolute;
	left: 0;
	top: 0;
	border: none;	
	border-radius: 15px;		
}			
	

/* SERVICES */

#services-main {
	width: 960px;
	margin: auto;	
	padding-top: 60px;
}

#services-arrow {
	width: 471px;
	height: 80px;
	background: url(../i/services-arrow.png);
	position: absolute;
	left: 185px;
	top: 65px;
	background-position: top center;
	background-repeat: no-repeat;		
		
}
#services-left-column  {
	position: relative;
	width: 360px;
	float: left;	
}

#services-right-column  {
	position: relative;	
	width: 600px;
	float: left;	
	min-height: 200px;
}

.services-text {
	margin: 0px auto 20px auto;	
	background:url(../i/black-40.png);
	border-radius: 15px;
	padding: 20px 30px 30px 30px;	
	text-align: center;
	position: relative;	
	color: #5A5246;
	font-family: "Amaranth", "Arimo", Arial, sans-serif;	
	font-size: 1.2em;	
	text-shadow: 1px 1px 0.5px #000; 
}
.services-text p{
	font-size: 0.95em;
	padding: 10px 20px;	
}

.services-text .highlight {
/*	color: #998E7D;	*/
}
.services-text h3 {
	padding: 0;
	font-family: "Chewy", "Amaranth", "Arimo", Arial, sans-serif;	 
	color: #893030;
	margin: 0px 0px 5px 0px;
	display: block;
	font-size: 1.6em;		
	text-shadow: 2px 2px 1.5px #000; 	
	font-weight: normal;
	letter-spacing: 0.1em;
}
.services-text h5 {
	padding: 0;
	font-family: "Schoolbell", "Amaranth", "Arimo", Arial, sans-serif;		 
	color: #817665;
	color: #C5BAB2;	
	color: #998E7D;		
	display: block;
	font-size: 1.2em;
	padding: 10px 25px;
	text-align: center;
	text-shadow: 2px 2px 1px #000; 		
	letter-spacing: 0.1em;	
}
.services-text .subhead {
	padding: 0;
	font-family:  "Schoolbell", "Amaranth", "Arimo", Arial, sans-serif;		 
	color: #817665;
	color: #C5BAB2;	
	display: block;
	font-size: 1.4em;
	padding: 10px 25px;
	text-align: center;
	font-weight: bold; 
	text-shadow: 2px 2px 1px #000; 	
	letter-spacing: 0.075em;	

}

#services-nav {
	width: 180px;	
	margin-left: 90px;
}

#services-nav a {
	height: 34px;
	overflow: hidden;
	display: block;	
	border: none;
	text-decoration: none;
	margin-bottom: 10px;
}

#services-nav #web-design { background: url(../i/services-web-design.png);	}

#services-nav #web-development { background: url(../i/services-web-development.png);	}
#services-nav #web-strategy {	background: url(../i/services-web-strategy.png);	}
#services-nav #domains-hosting {	background: url(../i/services-domains-hosting.png);	}
#services-nav #email {	background: url(../i/services-email.png);	}
#services-nav #seo {	background: url(../i/services-seo.png);	}
#services-nav #cms {	background: url(../i/services-cms.png);	}
#services-nav #online-marketing {	background: url(../i/services-online-marketing.png);	}
#services-nav #social-media {	background: url(../i/services-social-media.png);	}
#services-nav #web-content {	background: url(../i/services-web-content.png);	}

#services-nav #web-design:hover,
#services-nav #web-development:hover,
#services-nav #web-strategy:hover,
#services-nav #domains-hosting:hover,
#services-nav #email:hover,
#services-nav #seo:hover,
#services-nav #cms:hover,
#services-nav #social-media:hover,
#services-nav #web-content:hover,
#services-nav #online-marketing:hover 
 { background-position: 0px 34px; }

 	
#services-item-arrow {
  background: url(../i/services-item-arrow.png);	
  position: absolute;
  background-repeat: no-repeat;
  width: 60px;
  height: 40px;
  
}

#services-item-arrow.web-strategy {  left: 270px;   background-position: 0px -120px; }

#services-item-arrow.web-design {  left: 270px;  top: 50px;  background-position: 0px -200px; }
#services-item-arrow.web-development {  left: 270px;  top: 80px;  background-position: 0px -160px; }
#services-item-arrow.web-content {  left: 280px;  top: 140px;  background-position: 0px 0px; }
#services-item-arrow.domains-hosting {  left: 270px;  top: 165px;  background-position: 0px -80px; }
#services-item-arrow.seo {  left: 240px;  top: 225px;  background-position: 0px -200px; }
#services-item-arrow.social-media {  left: 270px; top:265px;  background-position: 0px -120px; }
#services-item-arrow.cms {  left: 240px;  top: 295px;  background-position: 0px -40px; }
#services-item-arrow.online-marketing {  left: 275px;  top: 335px;  background-position: 0px -40px; }

/* CONTACT PAGE */

#contact-left-column {
	float: left;
	width: 420px;
	margin-top: 20px;
	margin-right: 20px;
	margin-left: 40px;	
}

#contact-right-column {
	float: left;
	width: 420px;	
	margin-top: 20px;	
	margin-left: 40px;
}

#contact-bottom-section {
	float: left;
	width: 900px;	
	margin-top: 20px;	
	margin-left: 40px;
	margin-right: 40px;
}

.contact-box {
	margin: 0px auto 20px auto;	
	background:url(../i/black-40.png);
	border-radius: 15px;
	padding: 20px 30px 30px 30px;	
	text-align: center;
	position: relative;	
	color: #5A5246;
	font-family: "Amaranth", "Arimo", Arial, sans-serif;	
	font-size: 1.2em;	
	text-shadow: 1px 1px 0.5px #000; 
}
.contact-box h3 {
	padding: 0;
	font-family: "Chewy", "Amaranth", "Arimo", Arial, sans-serif;	 
	color: #893030;
	margin: 0px 0px 5px 0px;
	display: block;
	font-size: 1.4em;		
	text-shadow: 2px 2px 1.5px #000; 	
	font-weight: normal;
	letter-spacing: 0.1em;
}

.contact-box p {
	font-size: 1em;	
	margin: 10px 0px;
}

#contact-right-column .form-element {
	display: block;
	clear: both;	

}

#contact-right-column #form-button {
	display: block;
	clear: both;	
	font-family: "Chewy", "Amaranth", "Arimo", Arial, sans-serif;	 
	width: 80px;
	padding-top: 20px;
	margin: auto;
}

#contact-right-column #form-button input {
	width: 80px;
	margin: auto;
	text-align: center;
	background-color: #893030;
	color: #000;
	font-size: 1em;
	line-height: 1.2em;
	vertical-align: middle;
	border-radius: 12px;
	box-shadow: 1px 1px 1px #000;

}

#contact-right-column #form-button input:hover {
	color: #E0DDD8;
	cursor: pointer;
}

#contact-right-column #form-button input:active {
	color: #E0DDD8;
	box-shadow: -2px -2px -2px #000;
	cursor: pointer;

}

#contact-right-column .contact-box p {
	margin: 15px 0px;	
}

#contact-right-column input,
#contact-right-column textarea {	
	float: left;
	display: block;
	vertical-align: middle;		
	margin: 0.25em 0;
	height: 1.5em;
	background-color: #897d6b;
	border: 1px solid #080705;
	border-radius: 5px;	
	padding: 1px 5px;
	margin-left: 10px;
	color: #1A1914;
	font-family: "Amaranth", "Arimo", Arial, sans-serif;	
	width: 240px;	
}

#contact-right-column textarea {
	height: 7em;	
	font-size: 0.7em;
}

#contact-right-column label {
	float: left;
	width: 80px;
	line-height: 1.5em;
	height: 1.5em;	
	vertical-align: top;	
	text-align: right;
	font-size: 0.9em;

}
label.error {
	position: absolute;
	display: block;
	clear: both;
	z-index: 3;
	font-family: "Amaranth", "Arimo", Arial, sans-serif;
	font-size: 11px;
	font-weight: 100;
	color: #990000;
	padding: 1px;
	text-align: center;
	width: 400px;
	} 
	
#name-error, #email-error {
	visibility: hidden;
	display: none;
}

#contact-page {
	margin: 30px 50px;	
}

/* FOOTER */

#footer-top {
	background: url(../i/grass.png) bottom center repeat-x;
	height: 120px;
}
#footer {
	background: #000;
	min-height: 200px;
	margin-bottom: 50px;
}

#footer-container {
	width: 960px;
	margin: auto;
}

#footer h3 {
	font-family:  "Schoolbell", Arial, sans-serif;		 
	display: block;
	font-size: 1.4em;
	padding: 5px 0px;
	text-align: left;
	text-shadow: 2px 2px 1px #000; 	
	letter-spacing: 0.075em;
	color: #ECEBE6;	
	font-weight: 400;	
}

#footer p {
	margin: 0;
	padding: 0px 0px;
	text-align: left;
	color: #5A5246;
	font-family: "Amaranth", "Arimo", Arial, sans-serif;	
	font-size: 0.85em;	
	text-shadow: 1px 1px 0.5px #000; 	
		
}

#footer-left {
	float: left;
	width: 190px;	
	display: block;
	margin-top: 50px;		
}

#footer-main {
	display: block;	
	width: 540px;
	float: left;	
	margin: 20px 20px;
	text-transform: lowercase;
	text-align: center;
}

#footer-right {
	display: block;	
	width: 190px;
	float: left;
	text-align: center;
	margin-top: 50px;	
}

#footer-right h3 {
	text-align: center;	
}

#footer-main th {
	width: 108px;
	margin: 0;
	padding: 0px 0px;
	color: #5A5246;
	font-family: "Schoolbell", "Arimo", Arial, sans-serif;	
	font-size: 1.2em;	
	text-align: center;	
	font-weight: 400;
	padding: 5px 0px;
}

#footer-main th a {
	color: #5A5246;
	font-family: "Schoolbell", "Arimo", Arial, sans-serif;	
	font-size: 1em;	
	text-align: center;	
	font-weight: 400;
	border: none;
	text-decoration: none;	
}

#footer-main th a:hover {
	color: #5A5246;	
}

#footer-main td {
	width: 108px;
	margin: 0;
	padding: 0px 0px;
	text-align: left;
	color: #443E35;
	font-family: Arial, sans-serif;	
	text-align: center;	
	font-weight: 400;
	vertical-align: top;
}

#footer-main td a {
	color: #443E35;
	font-family: Arial, sans-serif;	
	font-size: 0.7em;	
	text-align: center;	
	font-weight: 400;
	vertical-align: top;
	border: none;
	text-decoration: none;	
	line-height: 1.5em;
}
#footer-main th a:hover {
	color: #998E7D;	
}
#footer-main td a:hover {
	color: #817665;	
}

#facebook {
	width: 41px;
	height: 40px;
	background: url(../i/facebook-icon.png) no-repeat;
	margin-right: 20px;
		
}

#facebook:hover {
	background: url(../i/facebook-icon-over.png) no-repeat;	
}

#twitter {
	width: 41px;
	height: 40px;
	background: url(../i/twitter-icon.png) no-repeat;
		
}

#twitter:hover {
	width: 41px;
	height: 40px;
	background: url(../i/twitter-icon-over.png) no-repeat;
		
}
#social-media-links  {
	width: 102px;
	display: block;	
	margin: 40px auto;
}

#social-media-links a {
	display: block;
	float: left;
	border: none;
}

#copyright {
	padding-top: 10px;
	width: 600px;
	display: block;
	clear: both;
	margin: auto;
	text-align: center;	
	font-family: "Schoolbell", "Arimo", Arial, sans-serif;	
	font-size: 1.1em;		
	color: #443E35;	
}