/* Style.css */

a img {border: 0;}
a, a:link{ color:#8B147E; text-decoration:none; }
a:hover{ color:orange; text-decoration:none; }
a{
	-webkit-transition-property:background-color;
	-webkit-transition-duration:0.12s;
	-webkit-transition-timing-function:ease-out;
	-moz-transition-property:background color;
	-moz-transition-duration:0.12s;
	-moz-transition-timing-function:ease-out;
	-o-transition-property:background-color;
	-o-transition-duration:0.12s;
	-o-transition-timing-function:ease-out
}

h1, h2, h3, h4, h5, h6{
	color:#8B147E; margin:0px 0 6px 0; font-weight:400; font-family: 'Open Sans', sans-serif; text-align: left;
}
h1{ font-size:26px; line-height:30px; }
h2{ font-size:24px; line-height:28px; }
h3{ font-size:18px; line-height:22px; color:black;}
h4{ font-size:16px; }
h5{ font-size:12px; }
h6{ font-size:10px; }

table { margin-left: auto; margin-right: auto; width:90%; max-width:600px; }
.center table, .center td, .center th { font-size:20px; border:2px solid orange; padding:50px 0 50px 0; text-align:center }
.center th { background-color:orange; color:white; padding:6px; width:13%; }
p.indent { text-indent:30px; }
p, ul, ol { margin-bottom:10px; text-align: justify; }
ul, ol { margin-left:0px; }

figure, img { max-width:100%; height:auto; margin-bottom:20px; }

img.left { margin:0 20px 0 0; float:left; }
img.right { margin:0 0 0 20px; float:right; }
img.center {  display: block; margin-left: auto; margin-right: auto; }
img.facebook { width:35px; height:35px; padding-top:20px; }

blockquote{ font-family: 'Open Sans', sans-serif; font-style:italic; background:url(../images/quote_left.png) no-repeat left .4em; margin-bottom:30px; }
blockquote p{ color:#000; padding-left:26px; font-size:1.4em; line-height:1.5em; }
blockquote p cite{ font-style:italic; color:#aa98b0; }

div.columns{height: 1%;}
div.one-half{width:48.5%}
div.one-third{width:31.3%}
div.two-third{width:65.64%}
div.one-fourth{width:22.7%;}
div.three-fourth{width:74.23%}
div.one-half, div.one-third, div.two-third, div.three-fourth, div.one-fourth{position:relative; margin-left:3%; float:left; margin-bottom:1.55em}
div.one-half:first-child, div.one-third:first-child, div.two-third:first-child, div.three-fourth:first-child, div.one-fourth:first-child, .first{ margin-left:0 !important; clear:left; }

.aligncenter{ text-align:center; }
.alignleft{ text-align:left; }
.alignright{ text-align:right; }

/*--------------------------
LAYOUT
---------------------------*/

html { overflow-y:scroll;  }
body { font-family: 'Open Sans', sans-serif; font-size:.8em; border-top:4px solid orange; width:auto; height:auto; color:#5e5e5e; line-height:22px; }

#wrapper{ width:100%; max-width:1260px; margin:0 auto; }

#main { width:72%; float:right; padding:0 20px 0 0;}
#main .content, #main .last-content{ min-height:320px;padding-top:50px; position:relative; clear:both; }
#main #services{ min-height:620px;}
#main .last-content{ min-height:520px!important;}
#main .content .page_title h2, #main .last-content .page_title h2, .title_underline{ font-size:11px; color:#8B147E; text-transform:uppercase; border-bottom:1px solid #bebebe; letter-spacing:3px; margin-bottom:30px; float:left; width:100%; }
#main .divider{ border:none; border-top:1px solid #bebebe; clear:both; width:100%;  margin-bottom:20px; }
.copyright{ margin-bottom:70px; float:left; width:100%; border-top:1px solid #bebebe; padding-top:10px; font-size:12px; }


.intro{ font-family: 'Open Sans', sans-serif; color:#8B147E; font-size:2.5em; font-weight:300; line-height:1.4em; text-align:center; margin-bottom:60px; }
/*.intro a{ background:#49abc6; color:#f9fffd;}
.intro a:hover{ text-decoration:none; background:#1a1a1a; }*/

span {color:#8B147E;}

#header { margin-top:30px; width:18%; position:fixed; float:left;} /* width: 14.69%; */
	#header #logo { text-indent:-9999999px; width:220px; height:190px; padding-left:20px;}
	#header #logo a { display:block; background:url(../images/logo.png) no-repeat; width:220px; height:190px; }
	#header #main-nav{ margin-bottom:40px; padding-left:0px;}
	#header #main-nav ul{ display:block; white-space:nowrap;}
	#header #main-nav select{ display:none; }

	#header #main-nav ul li { list-style:none; line-height:30px; }
	#header #main-nav ul li a { color:grey; font-size:18px; padding:4px 30px 4px 20px; border-radius:0px; }
	#header #main-nav ul li a:hover { text-decoration:none; color:orange; }
	#header #main-nav ul li.selected a, #header #main-nav ul li.current a {
		border-radius:0px;
		background-color: orange;
		padding:4px 30px 4px 20px;
		color:#fff;
		text-shadow:3px 3px 12px #faf232;
	}
	#header #main-nav ul li.selected a:hover, #header #main-nav ul li.current a:hover { color:white; }

#works-container{ margin-left:-6px; width:106%; float:left; }
#works-container .element {
  margin:6px;
  float: left;
  overflow: hidden;
  position: relative;
  width:170px;
  height:160px;
}

#works-container img.bw { position: absolute; left: 0; top: 0; z-index: 10; opacity: 0.8; -moz-opacity: 0.8; filter:alpha(opacity=8);}
#works-container img.color {position: absolute; left: 0; top: 0; }


/****************************************
 Smaller resolutions
 *****************************************/

@media handheld and (max-width: 940px), screen and (max-device-width: 940px), screen and (max-width: 960px)  {
body{padding:0 20px;}
/*#page{ padding:0 20px;}*/
#header { position:relative; width:100%; float:none; margin-top:40px; text-align:center;  }
#header #logo { text-indent:-9999999px; width:200px; height:190px; margin:0 auto 30px auto; }
#header #logo a { display:block; background:url(../images/logo.png) no-repeat; width:200px; height:190px; }
#header #main-nav{ margin-bottom:40px;}

#header #main-nav{ position:fixed; top:0; z-index:99999; background:orange; padding:10px 0; width:100%; margin-left:-20px; }
#header #main-nav ul{ display:none; }
#header #main-nav select{ display:block; width:200px; margin:0 auto; }


#header #main-nav ul li { list-style:none; line-height:30px; display:inline; }
#header #main-nav ul li a { color:#8d8c8c; font-size:16px; padding:4px 20px }
#header #main-nav ul li.external a { background-image:url(../images/external_link.gif); background-position:80% 50%; background-repeat:no-repeat; }
#header #main-nav ul li a:hover { text-decoration:none; color:#63c8a4; }
#header #main-nav ul li.selected a { background:none; color:#63c8a4; text-shadow:none; padding:4px 20px }
#header #main-nav ul li.selected a:hover { color:#63c8a4; }

#main{ width:100%; float:none; clear:both; }

#services .columns .excerpt{ float:right; width:74%; }
#services .columns .img{ float:left; }
#services .columns .img img{ max-width:100%; }

}

@media handheld and (max-width: 480px), screen and (max-device-width: 640px), screen and (max-width: 640px)  {
#header #logo {	padding:20px 0;}
#header #main-nav{ text-align:center; position:fixed;  z-index:99999;  }
#header #main-nav ul{ display:none; }
#header #main-nav select{ display:block; }

div.one-half,
div.one-third,
div.two-third,
div.one-fourth,
div.three-fourth{ width:100%; float:none; margin-left:0; }
#services .columns > div{ clear:both; }


#services .columns .excerpt{ float:right; width:74%; }
#services .columns img{ float:left;  }

.form > div > label, .form #name, .form #email, .form #subject, .form #comments, .inputtext, .form select{ width:90%; }
.form #comments{ width:100%!important; max-width:90%;}

.pagination a, .pagination span{ display:none; }
.pagination .previous, .pagination .next{ display:block; float:left; }
.pagination .next{ float:right; }

img { text-align:center; }
}