@import "../css/reset.css";
@import "../css/superfish.css";
@import "../css/flexslider.css";
@import "../css/filter.css";
@import "../css/touchTouch.css";

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700,800);
article,aside,audio,canvas,command,datalist,details,embed,figcaption,figure,footer,header,hgroup,keygen,meter,nav,output,progress,section,source,video{display:block}mark,rp,rt,ruby,summary,time{display:inline}
/* Global properties ======================================================== */
html {width:100%}

body {font-family: 'Open Sans', sans-serif;font-size:13px; line-height:19px; color:#424242; min-width:1030px; background:url(../images/body_bg.jpg) 50% 0 repeat;-webkit-text-size-adjust: none;}

.main{width: 940px;margin: 0 auto;}

/*********************************fonts*************************************/
.reg {text-transform:uppercase}
.f_left {float:left}
.f_right {float:right}
.align_right {text-align:right}
.align_center {text-align:center}

.it{font-style:italic}
.let{letter-spacing:-1px}

/*********************************CLASSES**********************************/
.m_bottom_zero{ margin-bottom:0 !important;}
.m_left_zero{ margin-left:0 !important;}
.p_bottom_zero{ padding-bottom:0 !important;}
.p_left_zero{ padding-left:0 !important;}
	
.clear {clear:both;width:100%;line-height:0;font-size:0;}
.wrapper {width:100%;overflow:hidden}
.extra_wrapper{ overflow:hidden;}
.container{width:100%}
.extra_last, .last{ margin-bottom:0 !important; padding-bottom:0 !important;}
.extra_last{ border:none !important; background:none !important;}
.bg_none{ background:none !important;}
.bg_none:after{display: none !important;}

/*==================================== Links ======================================================== */
a {color:#424242;outline:none; text-decoration:none; cursor:pointer;}
a:hover{ color:#ff4800; text-decoration:none;}

/*********************************Displays*************************************/
.block{ display:block;}
.inline-block{ display:inline-block;}

/*********************************header*************************************/

header {width: 100%;position: fixed; background: #ffffff;height: 86px;left: 0;top: 0;z-index: 10;}
header .inner{padding: 9px 0 0 0;}
header h1{float: left;margin-top: 16px;}
header h1 a {display:block;width:197px;height:43px;background:url(../images/logo.png) 0 0 no-repeat; text-decoration:none; text-indent:-9999px;}

/*********************************content*************************************/
#content {padding:0 0px 0px;position: relative;z-index: 1;}
.cont_pad{padding:0 0 0 0 !important;}

/*===============================>> Paragraphs <<=============================*/

p {margin-bottom:19px}
.p2{ margin-bottom:41px;}

/*================================>> LISTS <<========================================*/
.list1{}
.list1 li{ background:url(../images/marker1.png) 0 7px no-repeat; padding-left:20px;}
.list1 a{}

.list2{}
.list2 li{ background:url(../images/marker2.png) 0 7px no-repeat; padding-left:20px;}
.list2 a{}

.list3{}
.list3 li{ background:url(../images/marker3.png) 0 7px no-repeat; padding-left:20px;}
.list3 a{}

/*================================>> H <<========================================*/
h2,h3,h4, h5{ font-weight:normal;}
h2{font-size: 23px; line-height: 29px; color:#4e4e4e;margin-bottom: 10px;}
h2.h2{background: url('../images/stripe1.png') 0 bottom repeat-x;padding-bottom: 26px;}

h2.ind{ margin-bottom:46px;}
h2.ind1{ margin-bottom:px;}
h2.ind2{ margin-bottom:px;}

h3, .h3{font-size: 28px; line-height: 34px; color:#4e4e4e;}
h3.ind1{ margin-bottom:px;}
h3.ind2{ margin-bottom:px;}
h3.ind3{ margin-bottom:px;}

h4, h4 a{font-size: 24px; line-height: 29px; color: #4e4e4e;}
h4 a:hover{color: #ff4800;}

h5{font-size: 20px; line-height: 24px; color: #4e4e4e;margin-bottom: 21px;}
h5.ind{margin-bottom: 19px;}
/*================================>> GOOGLE FONTS  <<========================================*/
.h3, .sf-menu a{font-family: 'Open Sans', sans-serif;}


/*================================>> hovers <<========================================*/
.sf-menu li, .element, #portfolio .element a, #portfolio .element .description, #portfolio .element .text, #filter a, .button, .portfolio1 a, .portfolio1 .text, .service .inner{-webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;transition: all 0.5s ease;}

.flex-direction-nav a, .social_box img, .sf-menu a{-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: all 0.3s ease;}
/*********************************page_1*************************************/
.ext_list>li, .ext_box, .ext_box1{ overflow:hidden;}
.ext_list>li>figure, .ext_box>figure, .ext_box1>div{ float:left;}
.ext_list>li>div, .ext_box>div, .ext_box1>figure{overflow:hidden;}
.ext_box1>figure{display: block;}
/*================================>> PAGES <<========================================*/

#pages{position: relative;}
#pages>li{width: 100%;}

#home>.inner{padding-top: 86px;}

#home{}

/********************************* Services Page *************************************/

.box1{position: relative;padding: 23px 0 27px;margin-bottom: 54px;}
.box1:after, .box1:before{display: block;position: absolute;width: 100%;height: 1px;background: url('../images/stripe1.png') repeat-x;content: "";}
.box1:after{bottom: 0;}
.box1:before{top: 0;}

#services>.inner, #blog>.inner, #portfolio>.inner, #our_team>.inner, #get_in_touch .inner{padding-top: 110px;}

.service{float: left;text-align: center;position: relative;padding: 0px 0 0;}
.service .img_wrap{height: 58px;display: inline-block;overflow: hidden;margin-bottom: 14px;}
.service:hover .img_wrap img{margin-top: -58px;}
.service .inner:hover{position: relative;background: #ff4800;color: #fff;}
.service .inner:hover .h3{color: #fff;}
.service .h3{margin-bottom: 16px;font-weight:800;display: block;}
.service>.inner{margin-right: 11px;padding: 15px 15px 26px;border-radius:4px; position: relative;display: block;}
.service span{display: block;}
.service .inner:hover img{}

.service1, .service3{width: 308px;}
.service2{width: 321px;}
.service2>.inner{margin: 0 11px;}
.service3>.inner{margin-left: 11px;}

.service2:after, .service2:before{width: 1px;display: block;position: absolute;top: 0;height: 100%;background: url('../images/stripe2.png') repeat-y;content: "";}
.service2:after{right: 0;}
.service2:before{left: 0;}

.bot_stripe:after{left: 10px;bottom: -10px;position: absolute;display: block;height: 1px;width: 95%;background: url('../images/stripe1.png') repeat-x;content: "";}

.bot_ind{padding-bottom: 10px;margin-bottom: 10px;}
/*********************************Blog Page*************************************/


#blog .main, #portfolio .main{background: url('../images/stripe1.png') repeat-x;padding: 51px 0 0;}

.col{float: left;}
#blog .col1{width: 680px;}
#blog .col2{width: 220px;margin-left: 39px;}

ul.blog_list{}
ul.blog_list>li{background: url('../images/stripe1.png') 0 bottom repeat-x; padding-bottom: 37px;margin-bottom: 50px;}
ul.blog_list>li.last{background: none;}
ul.blog_list>li>figure{width: 80px;color: #fff;margin-right: 20px;}
ul.blog_list>li>div{}
ul.blog_list>li>div figure{margin-bottom: 23px;}
ul.blog_list>li>div h4{margin-bottom: 9px;}
ul.blog_list time{font-size: 38px; line-height: 46px;display: block;border-radius: 3px 3px 0 0;background: #ff4800;text-align: center;padding: 9px 0 9px;}
ul.blog_list time span{font-size: 24px;line-height: 29px;display: block;margin-bottom: -11px;}
ul.blog_list>li>figure a{display: block;background: url('../images/comment.png') 49px 14px no-repeat #4e4e4e;border-radius: 0 0 3px 3px;font-size: 24px; line-height: 29px; color: #cacaca;padding: 7px 0 8px 17px;}
ul.blog_list>li>figure a:hover{background-color: #fff;color: #ff4800;}
.posted_by{color: #909090;margin-bottom: 10px;}
.posted_by a{font-weight: bold;color: #4e4e4e;}
.posted_by a:hover{color: #ff4800;}
.link1{color: #ff4800;}
.link1:hover{color: #4e4e4e;}

#search{overflow: hidden;margin: 1px;border-radius: 2px;box-shadow: 0 0 0 1px #cacaca;background: #f6f6f6;margin-bottom: 26px;}
#search input{background: none;border: none;margin: 0;float: left;font-size: 13px;color: #909090;font-family: 'Open Sans', sans-serif;padding: 13px 10px 10px 12px;width: 148px;}
#search a{display: block;width: 48px;height: 42px;float: left;background: url('../images/search_a.jpg') no-repeat;}
#search a:hover{background-position: 0 -44px;}

.posts{margin-bottom: 42px;}
.posts>li{margin-bottom: 9px;}
.posts>li>div{line-height: 16px;padding-top: 2px;}
.posts>li>figure{margin: 8px 9px 0 0;}
.posts time{color: #909090;display: block;margin-bottom: 2px;}
.posts div a, .comments a, .archives a{font-weight: bold;}

.p_top1{padding-top: 10px !important;}

.gray{color: #909090;}

.comments{color: #909090;margin-bottom: 42px;}
.comments>li{margin-bottom: 12px;line-height: 16px;}

.archives li{margin-bottom: 5px;}

#nav_blog{position: relative;}
#nav_blog a{display: block;float: left;width: 33px;padding: 10px 0 0;text-align: center;font-weight: bold;color: #4e4e4e;background: #ededed;border-radius: 3px;}
#nav_blog a:hover{color: #fff;background: #4e4e4e;}

/*********************************Portfolio*************************************/
#portfolio{z-index: 10;}
#portfolio .main{padding-top: 24px;}

.filter_box{background: url('../images/stripe1.png') 0 bottom repeat-x;padding-bottom: 31px;margin-bottom: 23px;}
#portfolio .element {float:left;}
#portfolio .element>a{display: block;}
#portfolio .element .description{height: 0;color: #fff;left: 0;bottom: 0;display: block;position: absolute;width: 100%;overflow: hidden;background: url('../images/description_bg.png') repeat;}
#portfolio .element .description .inner{display: block;padding: 10px 10px 10px ;}
#portfolio .element .text, .portfolio1 .text{display: block;background: url('../images/marker.png') 270px -100% no-repeat #ededed;padding: 14px 0 16px 10px;font-weight: bold;border-radius: 0 0 4px 4px;}
#portfolio .element figure{position: relative;}
#portfolio .element a:hover .description{height: 76px;}
#portfolio .element a.text:hover, .portfolio1 a.text:hover{background-color: #ff4800;background-position: 270px 50%;}
#portfolio .element a:hover, .portfolio1 a:hover{color: #fff;}
.portfolio_box{position: relative;}

#container{/*min-height: 867px;*/}

.social_plugins{overflow: hidden;}
.social_plugins>div{margin: 10px 0 0;display: inline-block;}

.tags{position: absolute;top: -1px;right: 0;}

.info_box{margin-bottom: 25px;}
.info_box>div{width: 290px;margin-right: 29px;}
.info_box>figure{margin: 4px 0px 0 0;}

.button{margin-top: 25px;}

.portfolio1{width: 300px;float: left;}

.m_left{margin-left: 20px;}

.m_bot1{margin-bottom: 50px;}


/* =============================== Team Box========================*/

.team_box{}
.team{width: 300px;float: left;margin-left: 20px;text-align: center;position: relative;padding-bottom: 17px;}
.team:after{display: block;width: 1px;height: 35%;right: -11px;background:url("../images/stripe2.png") 0 0 repeat-y;position: absolute;bottom: 0;content: "";}
.team>figure{margin-bottom: 23px;}
.team h3{margin-bottom: 16px;}
.team .text{padding: 0 10px 0px;}
.social_box{text-align: center;padding: 27px 0 0;overflow: hidden;}
.social_box a{height: 24px;overflow: hidden;margin: 0 7px;display: inline-block;}
.social_box a:hover img{margin-top: -24px;}

.team_box .team:first-child{margin-left: 0;}

/*********************************page_5*************************************/

#get_in_touch{z-index: 1;padding-bottom: 150px;}
#contact-form .row{overflow: hidden;}
#contact-form .row label{width: 300px;display: block;float: left;margin-left: 20px;}
#contact-form .row label:first-child{margin-left: 0;}

.info{float: left;margin: -5px 0 0;width: 300px;}
.info h5{margin-bottom: 19px;}
.contact_info{}
.contact_info span{color: #909090;}
.contact_info{}


/* Contact form */
#contact-form {padding:0px 0 0 0;width: 640px;float: left;}
#contact-form .success {width:246px;  padding:10px;}
#contact-form textarea, #contact-form input {margin:0;font-size:13px; border:1px solid #cacaca; border-radius: 3px; color:#909090; padding:13px 18px 15px;outline:none; position:relative; font-family: 'Open Sans', sans-serif;background:#f6f6f6;}
#contact-form input {width:262px;}
#contact-form textarea {overflow:auto; width:582px; height:128px;resize:none; float:left; margin: 0 0 0 0;}	
#contact-form label {display:block; min-height:67px; overflow:hidden;}	
#contact-form label.message { display:block; padding-bottom:0; }
#contact-form .button {margin-left:8px;}	
#contact-form .error, #contact-form .empty, #contact-form .success {display:none;}	
#contact-form .error, #contact-form .empty {text-align:left; color:red; font-size:11px; clear:both;}
#contact-form .buttons2 {overflow:hidden; position:relative; clear:both; padding-top:20px;}
#contact-form .buttons2 a{cursor:pointer;	margin-right:4px;	display: inline-block;text-align:center;font-size:24px;line-height:29px;color:#cacaca;background: #4e4e4e;border-radius: 3px;padding: 7px 18px 8px;}
#contact-form .buttons2 a:hover{background: #ff4800;color: #fff;}

#contact-form span{ display:block; margin: 0px 0 0 5px;}

.map_wrapper{overflow:hidden;position: relative;display:block;margin-bottom:50px;}
.map_wrapper:before{display: block;position: absolute;width: 100%;height: 10px;top: -5px;left: 0;box-shadow: inset 0 5px 5px rgba(1,1,1,0.75);content: "";}
.map_wrapper:after{display: block;position: absolute;width: 100%;height: 10px;bottom: -5px;left: 0;box-shadow: inset 0 -5px 5px rgba(1,1,1,0.75);content: "";}
#map_canvas {
	 width:100%;
   height:550px;
}
.adress{}
.adress span{ display:inline-block; width:74px;}
.adress dt{ margin-bottom:14px;} 

.demo{}
.demo:hover{ text-decoration:underline;}

/****************************footer************************/
#footer{background: #4e4e4e !important;border-top: 7px solid #ff4800;height: 102px !important;color: #fff;}

.footer {padding:39px 0 26px;}
.social{ overflow:hidden;padding-right: 2px;float: right;}
.social a{ display:block; float:left;height:24px; overflow:hidden; margin-left:17px;}
.social a:first-child{margin: 0 0 0 0;}
.social a:hover img{ margin-top:-24px;}
.privacy{float: left;padding-top: 2px;}

/*==================================RESPONSIVE LAYOUTS===============================================*/
@media screen and (min-width: 1000px) and (max-width: 1023px) {
	nav a{font-size:20px;}
}

@media only screen and (max-width: 1024px) {
	body{min-width:960px;}
	nav{margin: 0 0px 0 0;}
	.flexslider{height: 508px;}
	.box1{padding-left: 10px;padding-right: 10px;}
}
@media only screen and (max-width: 995px) {
 body{min-width:920px;}
 .main{width: 900px;}
 .sf-menu>li>a{font-size: 20px;line-height: 24px;}
 .service{width: 300px;}
	ul.blog_list > li{position: relative;}
	#blog .col1{width: 640px;}
	#container .element img, #blog img, .info_box img, .portfolio1 img, .team img{width: 100%;}
	#blog .last{background: none;}
	#container .element, .portfolio1, .team{width: 286px;}
	#contact-form{width: 600px;}
	#contact-form .row label{width: 280px;}
	#contact-form input{width: 240px;}
	#contact-form textarea{width: 540px;}
}

@media only screen and (max-width: 767px) {
 body{min-width:420px;}
 ul.blog_list > li > figure{margin: 0;position: absolute;top: 192px;left: 0;}
 .main{width: 400px;}
 .flexslider{height: 403px;}
 .flexslider .inner{padding-top: 120px;}
 #contact-form .row label{width: 100%;margin: 0;}
 .service, #blog .col, .info_box > div, .portfolio1, .team, #contact-form, .info{float: none;width:100%;margin: 0 0 20px;}
 #contact-form textarea, #contact-form input{width: 360px;}
 .service2:before, .service:after{display: none;}
 ul.blog_list > li > figure{float: none;}
 .pad_box{padding-left: 100px;}
	#blog .col1{margin-bottom: 30px;}
	#blog .last{background: inherit;}
	#search input{width: 328px;}
	#filter, .tags{position: relative;top: 0;left: 0;}
	.tags{margin-bottom: 20px;}
	#container{margin: 20px 0 0;}
	#container .element{margin-left: 0;width: 100%;height: 345px;}
	.footer{padding-top: 20px;}
	.footer>div{float: none;}
	.footer .privacy{margin-bottom: 10px;}
	#get_in_touch{padding-bottom: 30px;}
	.flex-direction-nav a{top: 30%;z-index: 999;}
	.service .bg_none:after{display: block !important;}
}

@media only screen and (max-width: 479px) {
 body{min-width:300px;}
 .main{width: 280px;}
 .flexslider{height: 236px;}
 .flexslider .inner{padding-top: 60px;font-size:24px;line-height: 29px;display: none;}
 
 ul.blog_list > li > figure{top: 143px;}
 #search input{width: 208px;}
 #container .element{height: 255px;}
 #portfolio .element a.text:hover, .portfolio1 a.text:hover{background-color: #ff4800;background-position: 250px 50%;}
 #filter>li{margin-bottom: 10px;}
  #contact-form textarea, #contact-form input{width: 240px;}
	#contact-form .button1{margin-bottom: 10px;}
}