/**
G - Responsive Portfolio HTML5 CSS3 Website Template 
*/

 
html { padding: 20px; margin: 0px; background: #fff;  overflow: hidden; }

body {
	padding: 0px;
	margin: 0;
	background: #fff;
	line-height: 21px;
	overflow: hidden;
	font-size: 11px;
	font-weight: 400;
	font-family: "Monotype Corsiva";
	color: rgba(0,0,0,0.75);
}



a {text-decoration: none; color: #26ADE4; }
a:hover {  }

h1, h2, h3, h4, h5, h6, h2 a , h1 a {
	font-weight: 100;
	color: black;
	font-family: "Monotype Corsiva";
}

h1 a, h1{font-size: 48px;   line-height: 48px;   color: black;  } 

h2 {font-size: 36px; line-height: 40px;}

h3 {font-size: 21px;}

h4 {font-size: 18px; }	

h5 {font-size: 13px; }
h6 {font-size: 9px; text-transform: lowercase;}

hr {border-top: 1px solid rgba(0,0,0,0.1); height: 0px; border-bottom: none; border-left: none; border-right: none; 
margin: 40px 0; width: 100%;}

ul, li, ol { list-style-type: none; margin: 0; padding: 0;}

img, iframe {border: none; outline: none;}

ul, menu, dir, h1, h2, h3, h4, h5, h6 {
	-webkit-margin-before: 0;
	-webkit-margin-after: 20px;
	-webkit-margin-start: 0px;
	-webkit-margin-end: 0px;
	-webkit-padding-start: 0px;
	margin-top: 0;
	margin-right: 0;
	margin-left: 0;
	margin-bottom: 0px;
} 
.back h3 {margin: 0;}
p { 
-webkit-margin-before: 0px;
-webkit-margin-after: 0px;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
margin: 0;
}
h4.heading, h3#reply-title {font-size: 11px; text-transform: uppercase;border-top: 1px solid rgba(0,0,0,0.1); padding-top: 30px; 
padding-bottom: 20px;  color: black;
-webkit-margin-after: 10px;}	
 
textarea {max-width: 100%; width: 100%; padding: 10px 0; } 
 label  {font-family: 'PT Sans'; font-size: 11px;}
 label  small { font-size: 11px;}
input, textarea {font-family: 'PT Sans'; border: none; background:  #ECEADB;} 
input { padding: 10px 20px;}
input#submit{ margin: 15px 0 0 0;}
input,textarea, button {margin: 5px 0;}
 
 
 
img.eye  {float: left; width: 15px; height: 15px; margin: 3px 5px 0 0; border: none; outline: none;}

.trans,  .flex-direction-nav,  .flex-direction-nav  p a, .port .item div.back  a, #access ul ul a:hover, #access li:hover > a,
#access ul ul li:hover > a, #about_me {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
  filter: alpha(opacity=90);
  -moz-opacity: 0.9;
  -khtml-opacity: 0.9;
  opacity: 0.9;
} 


#canvas {
  width: 100%;  
  padding: 0;
  margin: 0;
  height: 100%;
}
.ccc #wrap {oveflow: hidden;}
#wrap {
	position: relative;
	padding: 40px;
	float: left;
	outline: 40px solid #ffffff;
	outline-offset: -40px;
	background-color: #FFFFFF;
}
#wrap.noPadding {
	padding: 0px;
	outline: none;
	width: 100%;
}
#kinetic { padding:  0px 0px; overflow: hidden; }

#primaryContent { background: #fff;  overflow-x: hidden; overflow-y: scroll;
  width: 60%;
  height: 100%;
  float: left;
  padding: 0  0px 0 0;
  margin: 0;}
#primaryContent.primaryPort {
	background-color: #FFFFFF;
}


#primaryContent, .sidebar { overflow-x: hidden; overflow-y: scroll;}
#primaryContent.ccc {overflow: hidden;}

  /* =Header
-------------------------------------------------------------- */ 
 
#branding {
	position: relative;
	float: left;
	width: 14%;
	height: 100%;
	padding: 0;
	z-index: 99999999999;
	background-color: #A3A3A3;
} 

#logo {
	float: left;
	padding:  20px 0 40px 0;
	margin: 0 0 20px 0;
	width: 100%;
	text-align: center;
	border-bottom: 1px solid rgba(255,255,255,0.05);
}
#logo img {
	max-width: 100%;
	width: auto;
	outline: none;
	border: none;
	padding-top: 0;
	padding-right: 0;
	padding-left: 0;
	padding-bottom: 0px;
	text-align: center;
}
#logo span  {float: left; padding: 0 10%; width: 80%; color: rgba(255,255,255,0.25); font-size: 11px;}
p.desc { color: rgba(255,255,255,0.25); font-size: 11px; text-align: center;  margin:  0 0 20px 0; 
width: 80%; right: 0; padding: 0 10% 10px 10%; border-bottom: 1px solid rgba(255,255,255,0.05); }

/* =Menu
-------------------------------------------------------------- */

#access {
	display: block;
	margin-top: 18px;
	margin-right: 18px;
	margin-left: 18px;
	margin-bottom: 18px;
	width: 70%;
	height: 100%;
}
#access ul {
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%; 
}
#access li {
	float: left;
	margin: 0;
	padding: 0;
	width: 100%;
	text-align: left;
} 
#access  ul  a {
	 font-size: 11px; text-transform: lowercase;
	float: left;  
	color: #000000;
	display: block;
	line-height: 20px;
	padding: 5px 0; 
	width: 100%;   
	margin: 0 0 0 0; 
-webkit-transition: all 250ms ease-in;
-moz-transition: all 250ms ease-in;
-ms-transition: all 250ms ease-in;
-o-transition: all 250ms ease-in;
transition: all 250ms ease-in;}   
#access  ul  li.feature a {
	color: #D31900;   
}
#access ul li a:hover {color: #fff; background: #26ADE4; 
	padding: 15px 0; }

#access ul ul {  
	position: absolute; 
	right: 100%;   
	height: 0px; overflow: hidden;
	z-index: 999999999999999999999; 
-webkit-transition: all 250ms ease-in;
-moz-transition: all 250ms ease-in;
-ms-transition: all 250ms ease-in;
-o-transition: all 250ms ease-in;
transition: all 250ms ease-in;}   
#access ul ul a {   
	background: #26ADE4; 
	padding: 15px 0; 
	border-bottom: 1px solid rgba(255,255,255,0.1);}
#access ul ul ul  {  
}
#access li:hover > a,
#access ul ul li:hover > a  {   
	background: #26ADE4;  
	padding: 15px 0;
	height: 100%;
	right: 100%; 
}     
#access ul ul a:hover, #access ul ul li:hover > a {  
	 
}
#access ul ul:hover { 
	overflow: visible;
}
#access ul li:hover > ul { 
	height: 100%;
}
#access ul ul li a:hover > ul { 
	height: 100%;  
}
#access .current-menu-item a {font-weight: bold;}





/* social icons */
#social {position: absolute; width: 100%; bottom: 0px; right:  0px; text-align: center; 
	padding-top: 0px; width: 100%; }
#social a {  padding: 0; margin: 0; width: 30px; 
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=25)";
  filter: alpha(opacity=25);
  -moz-opacity: 0.25;
  -khtml-opacity: 0.25;
  opacity: 0.25;
} 
#social a  img {  width: 30px; height: 30px; margin: 0  ; }

 



/* sidebarS */ 
.sidebar {float: right; width: 20%; background: #fff; 
padding: 0px;  }
.sidebar_wrap {float: left; padding: 40px;} 
.sidebar .widget  {position: relative;float: left; height: auto; width: 100%;
padding-bottom: 0px; margin-bottom: 40px; border-bottom: 1px solid rgba(0,0,0,0.1);} 
.sidebar .widget:last-child {border-bottom: none;}
.sidebar .widget h4 {font-size: 13px;   color: black; text-transform: lowercase; padding-bottom: 0px; margin-bottom: 10px;
font-weight: 100;} 
.sidebar .widget a {color: rgba(0,0,0,0.75); } 
/* widgets */
.widget #searchform {height: 60px; margin-bottom: 8px;} 
form#searchform input {float: left; background: #ECEADB url('inc/img/icons/black/search.png') no-repeat right center;
padding: 10px 0;  width: 100%; margin: 0 0 40px 0;}
 
.sidebar .widget .tagcloud   {float: left; margin: 0 0 20px 0;}
.sidebar .widget .tagcloud a {float: left; margin: 0 5px 5px 0;  background: #ECEADB; padding: 5px 10px; color: white; 
font-size: 11px !important; }
.sidebar .widget .tagcloud a:hover { color: white;}
.sidebar .widget .textwidget {float: left; padding: 0 0 20px 0;}









/*
PORTFOLIO */

a.prettyphoto {float: left; width: 100%; overflow: hidden;}
 
.port   {float: left; width: 100%; margin: 0; padding: 0;}
.port .item {
	position: relative;
	float: left;
	color: white;
	text-align: center;
	overflow: hidden;
	margin: 0;
	padding: 0;
	height: 163px;
}  
.port .item div.back { overflow: hidden;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -moz-opacity:0;
  -khtml-opacity: 0;
  opacity: 0; 
-webkit-transition: all 250ms ease-in;
-moz-transition: all 250ms ease-in;
-ms-transition: all 250ms ease-in;
-o-transition: all 250ms ease-in;
transition: all 250ms ease-in;}   
.port .item:hover > div.back, .port .item.page_nav div.back {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	-moz-opacity: 1;
	-khtml-opacity: 1;
	opacity: 1;
}	   

.port iframe {width: 100%; height: 100%;}

.port .item div  {position: absolute;  top: 0;  left: 0; width: 100%; height: 100%;  background: #26ADE4;  }   
.port .item div.back   {width: 80%; padding: 0 10%; text-align: center;} 
.port .item div.back  h3 { color: white; 
-webkit-margin-before: 0;
-webkit-margin-after: 0px;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 0px;} 
.port .item div.back  a  { color: white; font-size: 11px; width: auto; 
background: url('inc/img/icons/white/eye_small.png') no-repeat 0 1px; padding: 0 0 0 20px;} 

.port .item div.back  img { padding: 50% 0 10px 0; margin: -60px 0 0 0;} 
.port .item.page_nav div.back  img {float: none; padding: 0; margin:   0;} 


#port2 .item {
	width: 50%;
}
#port3 .item {
	width: 33%;
} 

.port .item div.front img {width: auto; min-width: 100%;  height: auto; min-height: 100%; display: block;}
.port .item div.front   {
	overflow: hidden;
	background-image: url('inc/img/loading.gif');
	background-repeat: no-repeat;
	background-position: 20px 20px;
}
  

/* next prev */
.port .item.page_nav  div { }  
.port .item.page_nav div.back  a  {  background:none; width: 60px; height: 60px;  
padding: 0; margin:   0; } 
.port .item.page_nav div.back a img { padding: 50% 0 0 0; margin: -30px 0 0 0; }   
 



/* SLIDER */

.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus  {outline: none;}
.slides,
.flex-control-nav,
.flex-direction-nav {margin: 0; padding: 0; list-style: none;} 

/* FlexSlider Necessary Styles
*********************************/ 
.flexslider {margin: 0; padding: 0; height: 100%; width: 100%; overflow: hidden;}
.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;  background-image: url('inc/img/loading.gif');
background-repeat: no-repeat; background-position: center center;}
Avoids image jumping */
.flexslider .slides img { width: auto; display: block;}
.flex-pauseplay span {text-transform: capitalize;}

/* Clearfix for the .slides element */
.slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;} 
html[xmlns] .slides {display: block;} 
* html .slides {height: 1%;}

/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
 * include js that eliminates this class on page load */
.no-js .slides > li:first-child {display: block;}


/* FlexSlider Default Theme
*********************************/
.flexslider {
	margin: 0 0 0px;
	position: relative;
	zoom: 1;
	cursor: auto;
	background-color: #FFFFFF;
}
.flex-viewport {max-height: 100%; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease;}
.loading .flex-viewport {max-height: 100%;}
.flexslider .slides {zoom: 1; height: 100%; max-height: 100%;}
 


/* Direction Nav */ 
.flex-direction-nav   {position: absolute; bottom: 60px; left: 60px; background:  #26ADE4;  padding: 20px 10px; cursor: arrow; }
.flex-direction-nav a {float: left; margin: 0  0px 0 0;  cursor: pointer;  }
.flex-direction-nav  p {float: left; padding: 5px 20px 0 20px ; color: white; width: auto; font-family: 'Raleway';
font-size: 21px; margin:  5px 0 0 15px;  border-left: 1px solid rgba(255,255,255,0.1); }
.flex-direction-nav  p a {float: left;   font-size: 11px; color: white; margin: 0px 0 10px 0; font-family: 'PT Sans';
background: none; text-indent: 0; padding: 0 10px 0 0;}
.flex-direction-nav  p a:hover, .port .item div.back  a:hover, #social a:hover {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  -moz-opacity: 1;
  -khtml-opacity: 1;
  opacity: 1;}	
.flex-direction-nav li {float: left;}
.flex-direction-nav .flex-next, .flex-direction-nav .flex-prev  { width: 60px; height: 60px; padding: 0; margin: 0;} 
.flex-direction-nav .flex-disabled {opacity: .3!important; filter:alpha(opacity=30); cursor: default;}

/* Control Nav */
.flex-control-nav {width: 100%; position: absolute; bottom: 40px; text-align: center; display: none;}
.flex-control-nav li {margin: 0 6px; display: inline-block; zoom: 1; *display: inline;}
.flex-control-paging li a {width: 11px; height: 11px; display: block; background: #666; background: rgba(0,0,0,0.5); 
cursor: pointer; text-indent: -9999px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; 
border-radius: 20px; box-shadow: inset 0 0 3px rgba(0,0,0,0.3);}
.flex-control-paging li a:hover { background: #333; background: rgba(0,0,0,0.7); }
.flex-control-paging li a.flex-active { background: #000; background: rgba(0,0,0,0.9); cursor: default; }

.flex-control-thumbs {margin: 5px 0 0; position: static; overflow: hidden;}
.flex-control-thumbs li {width: 25%; float: left; margin: 0;}
.flex-control-thumbs img {width: 100%; display: block; opacity: .7; cursor: pointer;}
.flex-control-thumbs img:hover {opacity: 1;}
.flex-control-thumbs .flex-active {opacity: 1; cursor: default;}




/* single */
.featured {position: relative; float: left; width: 100%; overflow: hidden; margin: 0 0 40px 0; }
.featured iframe  {width: 100%;  height: 75%;} 
.featured img {width: 100%; height: auto; }

.post {float: left; padding: 0 0 40px 0; margin: 0; width: 100%;}
.postWrapper {padding: 40px;}
.postMeta {font-size: 11px;}
h1.postTitle {padding-bottom: 30px; float: left; width: 100%;}
h1.postTitle  small {font-size: 21px;}

/* details */ 

/*comments */
input#submit {background:  #26ADE4; color: white; cursor: pointer; padding: 15px 30px; }
#commentlist  { margin: 0 0 20px 0; }
#commentlist li {background: #fafafa; margin: 0 0 10px 0; padding: 20px 20px 10px 20px;}
#commentlist li span{font-size: 13px;}
#commentlist li p{padding:  5px 0;}
.form-submit {margin-top: 10px;}
  .logged-in-as {margin-bottom: 10px;}
#commentform input {margin-left: 20px;}
#commentform input#submit {margin-left: 0px;}


/* theme switcher */  
.imga { display: inline-block; margin: 0 20px 20px 0;} 





/* blog */
.exp {position: relative; float: left; padding: 30px 40px 40px 40px;}
.exp h2 {margin-bottom: 40px; float: left; padding:  10px 20px 0 0px;}
.exp h1 {margin-bottom:  0px; float: left; padding:  10px 20px 0 0px;}
.blog_item   {width: 100%; height: 100%; max-height: 100%; float: left;}
.blog_item .featuredb {float: left; width: 100%; overflow: hidden; height: 75%;}
.blog_item .featuredb img  {width: auto; min-width: 100%;  height: auto; min-height: 100%;}
.blog_item .imgs {position: absolute; top: -80px; left:  0px; width: auto; padding: 20px 10px  0px 35px; background: #fff;}
.blog_item .imgs h2 { }
.blog_item .imgs img {float: left; margin: 0 20px 0 0; }
a.more_l {color: white; padding: 10px 20px;  background:#26ADE4; float: left; margin: 10px 0 0 0; font-size: 13px;} 
 
.blog .left_nav img, .blog .right_nav img {padding: 10px; margin: 0 40px 0px 40px;}
.blog .left_nav{float: right;}
 .blog .right_nav {float: left;}
 
.meta {float: left; width: 100%; padding: 30px 0 10px 0;}
.meta p {text-transform: lowercase; font-size: 9px;} 

.archive_title { }
.archive_title  span { }

 .blog  li.page_navigation {float: left; width: 100%; padding: 0 0 40px 0; height: 80px;} 



/* about me */
#wrap.noPadding.about_me { cursor: default; overflow: hidden;}
#wrap.noPadding.about_me iframe { width: auto; min-width: 100%; height: auto; min-height: 100%;}
#about_me {position: absolute; bottom: 60px; left: 60px; padding: 40px 40px 0 40px; width: 50%; color: white;}
#about_me h3 {float: left; width: 100%; color: white;}


/* contact */
#commentsText { height: 120px; width: 100%;}
#map_canvas {position: absolute; top: 0; left: 0; width: 100%; min-width: 100%; height: 100%;}
.contactform {float: left; width:100%; margin: 10px 0 0 0;	} 
.contactform li{position: relative; float: left; width: 100%; margin: 0 ; padding: 0 ;}  
.contactform li label {float: left; width: 50%;}
.contactform li input {float: left; width: 45%; margin: 10px 5% 10px 0; padding: 10px  0; color: black;}
.contactform li textarea#commentsText {float: left; width: 95%; color: black; }
.contactform li  input#c_send{font-size: 13px; width: auto; color: white; padding: 10px 20px; cursor: pointer; 
margin-bottom: 40px;} 
label.error { position: absolute; text-align: right;  right: 5%; top: -20px; z-index: -1;} 
label.error[for=contactName] { right: 55%;} 


a.win_close img  {float: right; width: 20px; height: 20px; cursor: pointer;}
 


 
/**
  theme requirements as per 
  http://codex.wordpress.org/CSS
*/
.aligncenter,
div.aligncenter {
   display: block;
   margin-left: auto;
   margin-right: auto;
}

.alignleft {
   float: left;
}

.alignright {
   float: right;
}
.wp-caption  {}
.wp-caption-text {}
.sticky {}
.gallery-caption {}
.bypostauthor {}




ul.slides li div {display: block; width: 100%; height: 100%; }


.hide {display: none;}
.flexslider .slides img.hide {display: none;}







/*
 * CSS Styles that are needed by jScrollPane for it to operate correctly.
 *
 * Include this stylesheet in your site or copy and paste the styles below into your stylesheet - jScrollPane
 * may not operate correctly without them.
 */

.jspContainer 
{
	overflow: hidden;
	position: relative; 
}

.jspPane
{
	position: absolute;
}

.jspVerticalBar
{
	position: absolute;
	top: 0;
	right: 0px;
	width: 20px;
	height: 100%;
	background: none;
}

.jspHorizontalBar
{	display: none;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 16px;
	background: red;
}

.jspVerticalBar *,
.jspHorizontalBar *
{
	margin: 0;
	padding: 0;
}

.jspCap
{
	display: none;
}

.jspHorizontalBar .jspCap
{
	float: left;
}

.jspTrack
{
	background: rgba(0,0,0,0.025);
	position: relative;
}

.jspDrag
{
	background: #ECEADB ;
	position: relative;
	top: 0;
	left: 0;
	cursor: pointer;
}

.jspHorizontalBar .jspTrack,
.jspHorizontalBar .jspDrag
{
	float: left;
	height: 100%;
}

.jspArrow
{
	background: #50506d;
	text-indent: -20000px;
	display: block;
	cursor: pointer;
}

.jspArrow.jspDisabled
{
	cursor: default;
	background: #80808d;
}

.jspVerticalBar .jspArrow
{
	height: 16px;
}

.jspHorizontalBar .jspArrow
{
	width: 16px;
	float: left;
	height: 100%;
}

.jspVerticalBar .jspArrow:focus
{
	outline: none;
}

.jspCorner
{
	background: #eeeef4;
	float: left;
	height: 100%;
}

/* Yuk! CSS Hack for IE6 3 pixel bug :( */
* html .jspCorner
{
	margin: 0 -3px 0 0;
}



		#primaryContent {float: left; width: 86%;}
			#branding {float: left;}
			.sidebar {display: none;}
			#access ul ul {left: 100%; }  a,  .archive_title  span, label.error, .sidebar .widget a:hover, #access ul li.feature a,
		.sidebar .widget h4
		{ color : #D31900 }#access ul li a:hover,#access ul ul a,#access li:hover > a,
		#access ul ul li:hover > a, .port .item div ,  input#submit, a.more_l,
		 .blog .left_nav img, .blog .right_nav img, li input#c_send, .sidebar .widget .tagcloud a:hover,
		 .sidebar .widget .tagcloud a , a.button
		{
	background-color : #A3A3A3;
	color: #ffffff;
}
		body ,.flex-direction-nav, #about_me, .about_me , .flexslider .slides li , #primaryContent.ccc
		 {
	background-color : #FFFFFF;
}
		 #primaryContent, .blog_item .imgs, .sidebar { background-color : #ffffff; } 
		 #access ul li.feature a:hover {color: white;}
#access div .menu {
}
#access div .menu {
	text-align: left;
	color: #000000;
}



		 @media only screen and (max-device-width: 769px), only screen and (max-width: 769px) {body, .tinynav select, .arrow, #social, #social a, #about_me { background-color : #000000; }}

		 .recentcomments a{display:inline !important;padding:0 !important;margin:0 !important;}

     p {float: left;}
.button {float: left; background-color: #D31900; padding: 10px 20px; font-size: 13px;float: left; color: #fff;  margin: 0 5px 10px 5px; }
     
     h4.heading {  float: left; width: 100%; margin-top: 20px;}
     .button_big {float: left; background-color: #D31900; padding: 20px 40px ; font-size: 21px; font-family: Raleway; float: left; color: #fff;  margin: 0 5px 10px 5px;  }
     .button_small {float: left; background-color: #D31900; padding: 5px 10px; font-size: 11px;float: left; color: #fff;  margin: 0 5px 10px 5px; }
     .toggle_close {float: left;  margin: 0px 0 0 30px;}
     .toggle div {float: left; margin: 0px 0 0 30px;}
     .toggle h4 { cursor: pointer;}