/**
* Responsive CSS
*
*/

/*  Responsive Grid
-------------------------------------------------------------- */

.sidr{display:none;position:absolute;position:fixed;top:0;height:100%;z-index:999999;width:320px;overflow-x:none;overflow-y:auto;font-family:"Open Sans",tahoma,verdana,arial,sans-serif;font-size:15px;background:#333;color:#fff;}
.sidr .sidr-inner{padding:0 0 15px}
.sidr .sidr-inner>p{margin-left:15px;margin-right:15px}
.sidr.right{left:auto;right:-320px}
.sidr.left{left:-320px;right:auto}
.sidr p{font-size:13px;margin:0 0 12px}.sidr p a{color:rgba(255,255,255,0.9)}
.sidr>p{margin-left:15px;margin-right:15px}
.sidr ul{display:block;margin:0 0 15px;padding:0;border-top:1px solid #1a1a1a;border-bottom:1px solid #4d4d4d}
.sidr ul li{display:block;margin:0;line-height:48px;border-top:1px solid #4d4d4d;border-bottom:1px solid #1a1a1a}
.sidr ul li:hover,.sidr ul li.active,.sidr ul li.sidr-class-active{ background:#333;line-height:48px}
.sidr ul li:hover>a,.sidr ul li:hover>span,.sidr ul li.active>a,.sidr ul li.active>span,.sidr ul li.sidr-class-active>a,.sidr ul li.sidr-class-active>span{}
.sidr ul li a,.sidr ul li span{padding:0 15px;display:block;text-decoration:none;color:#fff}
.sidr ul li ul{border-bottom:none;margin:0}.sidr ul li ul li{line-height:40px;font-size:13px}.sidr ul li ul li:last-child{border-bottom:none}
.sidr ul li ul li:hover,.sidr ul li ul li.active,.sidr ul li ul li.sidr-class-active{background:#333;line-height:40px}
.sidr ul li ul li:hover>a,.sidr ul li ul li:hover>span,.sidr ul li ul li.active>a,.sidr ul li ul li.active>span,.sidr ul li ul li.sidr-class-active>a,.sidr ul li ul li.sidr-class-active>span{}
.sidr ul li ul li a,.sidr ul li ul li span{color:rgba(255,255,255,0.8);padding-left:30px}.sidr form{margin:0 15px}.sidr label{font-size:13px}.sidr input[type="text"],.sidr input[type="password"],.sidr input[type="date"],.sidr input[type="datetime"],.sidr input[type="email"],.sidr input[type="number"],.sidr input[type="search"],.sidr input[type="tel"],.sidr input[type="time"],.sidr input[type="url"],.sidr textarea,.sidr select{width:100%;font-size:13px;padding:10px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin:0 0 10px;-webkit-border-radius:2px;-moz-border-radius:2px;-ms-border-radius:2px;-o-border-radius:2px;border-radius:2px;border:none;background:rgba(0,0,0,0.1);color:rgba(255,255,255,0.6);display:block;clear:both}.sidr input[type=checkbox]{width:auto;display:inline;clear:none}.sidr input[type=button],.sidr input[type=submit]{color:#333;background:#fff}.sidr input[type=button]:hover,.sidr input[type=submit]:hover{background:rgba(255,255,255,0.9)}

.sidr-class-toggle-sidr-close { text-decoration:none; display:block; text-align:right; padding:10px 20px 0 0}
.sidr-class-toggle-sidr-close:before {padding:0; font-size:15px; color: #fff; margin: 0; text-decoration:none; content:"\f00d";  font-family: FontAwesome;}

/*  Page Structure
-------------------------------------------------------------- */

@media screen and (max-width: 720px) {
#content, 
#sidebar {width:100%;float:none;}
#content {margin:0 0 40px;}
#primary.sidebar-right #content,
#primary.sidebar-left #content {margin-bottom: 30px;   padding-bottom: 25px;border-bottom: 1px solid #e5e5e5;}
}

@media only screen and (max-width: 720px) {
	.span_1_of_1,
	.span_2_of_2,
	.span_1_of_2,
	.span_3_of_3,
	.span_2_of_3,
	.span_1_of_3,
	.span_4_of_4,
	.span_3_of_4,
	.span_2_of_4,
	.span_1_of_4,	
	.span_5_of_5,
	.span_4_of_5,
	.span_3_of_5,
	.span_2_of_5,
	.span_1_of_5,
	.span_6_of_6,
	.span_5_of_6,
	.span_4_of_6,
	.span_3_of_6,
	.span_2_of_6,
	.span_1_of_6,
	.span_7_of_7,
	.span_6_of_7,
	.span_5_of_7,
	.span_4_of_7,
	.span_3_of_7,
	.span_2_of_7,
	.span_1_of_7, 
	.span_8_of_8,
	.span_7_of_8,
	.span_6_of_8,
	.span_5_of_8,
	.span_4_of_8,
	.span_3_of_8,
	.span_2_of_8,
	.span_1_of_8, 
	.span_9_of_9,
	.span_8_of_9,
	.span_7_of_9,
	.span_6_of_9,
	.span_5_of_9,
	.span_4_of_9,
	.span_3_of_9,
	.span_2_of_9,
	.span_1_of_9,
	.span_10_of_10,
	.span_9_of_10,
	.span_8_of_10,
	.span_7_of_10,
	.span_6_of_10,
	.span_5_of_10,
	.span_4_of_10,
	.span_3_of_10,
	.span_2_of_10,
	.span_1_of_10,
	.span_11_of_11,
	.span_10_of_11,
	.span_9_of_11,
	.span_8_of_11,
	.span_7_of_11,
	.span_6_of_11,
	.span_5_of_11,
	.span_4_of_11,
	.span_3_of_11,
	.span_2_of_11,
	.span_1_of_11,
	.span_12_of_12,
	.span_11_of_12,
	.span_10_of_12,
	.span_9_of_12,
	.span_8_of_12,
	.span_7_of_12,
	.span_6_of_12,
	.span_5_of_12,
	.span_4_of_12,
	.span_3_of_12,
	.span_2_of_12,
	.span_1_of_12 { width: 100%; }
	
	.col {display: block; float:none; margin:0 0 20px 0;}	
	.col:last-child { margin:0;}
}

@media screen and (max-width: 1200px) {
#header, #skillsbar, #callto, #home-blog, #home-parallax, #home-clients, #featured { padding-left:20px; padding-right:20px; }
}
/*  Primary Nav
-------------------------------------------------------------- */

@media screen and (max-width: 720px) {
/* Mobile Menu */
#primary-nav  {display: none;}
#primary-nav-mobile {display:block;}
a#navigation-toggle { z-index:999; display:block; position:fixed; top:10px; right:10px; color: #fff; background:rgba(40, 40, 40, 0.8); padding:8px 20px; border-radius:10px; margin: 0; cursor: pointer;  text-decoration: none !important; text-align:center;}
a#navigation-toggle .fa {font-size: 22px; font-weight:100; }
#primary-nav .sf-menu{ display: none; }
#topcontrol { position:absolute!important; bottom:20px!important; left:50%; margin:0 0 0 -12px; border-radius: 4px}	
}


/*  Header
-------------------------------------------------------------- */

@media screen and (max-width: 720px) {
#header { position:relative}
#header #logo {float:none; margin:0 auto;	text-align: center;}
#header-widget {float:none; margin:0 auto;	text-align: center;}
}

/*  Content
-------------------------------------------------------------- */

@media screen and (max-width: 720px) {
.entry-thumbnail { float:none; display:block;}
.entry-thumbnail img { width:240px; margin:0 auto}
}


/*  Footer
-------------------------------------------------------------- */

@media screen and (max-width: 720px) {
#footer-bottom #copyright, #footer-bottom #footer-nav {	float: none;margin: 0 0 20px;}
#footer-bottom #footer-nav {border:none;padding:0;}
}


/*  Comment Form
-------------------------------------------------------------- */

@media screen and (max-width: 720px) {
#commentform .form-author label, 
#commentform .form-email label, 	
#commentform .form-url label {display:block;margin:0 0 10px;}
#commentform input {flaot:none;	margin:0 0 10px;}
}


/*  Homepage
-------------------------------------------------------------- */

@media screen and (max-width: 720px) {
#callto { padding:20px}
#callto a { float:none; text-align:center; margin:0 auto; display: table;}
#home-parallax  { padding:20px}
#home-parallax  a { float:none; text-align:center; margin:0 auto; display: table;}
#featured-boxes .col:hover { transform: none; }
#home-blog .image {margin:0 }
#b-webi-widget { float:none!important; }
#home-media { height:auto; padding:20px 20px 40px 20px; }
#home-media-inner { padding:0; text-align:center; width:100%}
#home-media-inner .button { font-size:15px;}
}


@media only screen and (max-width: 490px) {
#liquidslider .flex-caption  {position:relative; margin:0;	max-width:100%;	bottom:auto;}
.flex-control-nav { display:none}
#liquidslider h2 {	display:block;	padding:18px 15px;	}
#liquidslider p {	display:block;	padding:10px 15px;	}	
#liquidslider .flex-caption.left, #liquidslider .flex-caption.right, #liquidslider .flex-caption.left h2, #liquidslider .flex-caption.right h2, #liquidslider .flex-caption.left p, #liquidslider .flex-caption.right p  {	
left:auto;	right:auto;}
}

@media only screen and (max-width: 330px) {
.flex-control-nav {   top: 95px; }
}
