@import "/css/reset.css";
@import "/css/skeleton.css";
@import "/css/superfish.css";
@import "/css/flexslider.css";
@import url(http://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700);
@import url(http://fonts.googleapis.com/css?family=Overlock:900,900italic);
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:Arial, Helvetica, sans-serif; font-size:13px; line-height:20px; color:#C8C8C8; min-width:960px; background:url(../images/body_bg.jpg) 50% 0 repeat-y fixed #070508; -webkit-text-size-adjust: none;}
pre {font-family:Arial, Helvetica, sans-serif; font-size:13px;}
option:disabled {font-style: italic;}

.main{width: 1000px;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;}

/*==================================== Links ======================================================== */
a {color:#666666;outline:none; text-decoration:none; cursor:pointer;}
article ul li a,
article p a{text-decoration:underline;}
a:hover{ color:#B6C8DA; text-decoration:none;}
article ul li a:hover,
article p a:hover{text-decoration:underline;}

.button{ display:inline-block; padding:10px 20px 11px; margin: 25px 0 0; font-size: 14px; line-height: 19px; color:#b0aeb0; font-weight: bold; text-transform: uppercase;background: url('/images/button.jpg') repeat-x #2c252c;position: relative;}
.button:hover{color:#24225B;}
.button em{display: block;position: absolute;z-index: 1;background: url('../images/button_h.jpg') repeat-x #959396;left: 0;top: 0;height: 0;width: 100%;}
.button span{position: relative;z-index: 10;}
.button:hover em{height: 100%;}
.buttonGray{background: url('/images/buttonGray.jpg') repeat-x #2c252c;position: relative;}
.buttonGray em{background: url('../images/buttonGray_h.jpg') repeat-x #959396;}
.buttonGroup {margin: 0px 0 0}

/*********************************Displays*************************************/
.block{ display:block;}
.inline-block{ display:inline-block;}

/*********************************header*************************************/

header {padding: 32px 0 28px;}
header h1{width: 430px;margin: 0 auto;}
header h1 a {display:block;width:430px;height:100px;background:url(../images/logo/logo_large.png) 0 0 no-repeat scroll; text-decoration:none; text-indent:-9999px;}

/*********************************content*************************************/
#content {padding:34px 0px 40px;background: url('../images/content_bg.png') repeat;box-shadow: inset 0 0 50px rgba(0,0,0,0.9), 0 0 7px #201b21;}
/*===============================>> Paragraphs <<=============================*/

p {margin-bottom:20px}
.p2{ margin-bottom:19px;}

/*================================>> LISTS <<========================================*/
.list1{}
.list1 li{ background:url(../images/marker1.png) 0 8px no-repeat scroll; padding-left:15px;margin-bottom: 10px;}
.list1 li.parentli{ background-image:none !important;}
.list1 a{}


/*================================>> H <<========================================*/
h2{font-size: 24px; line-height: 29px; color:#B6C8DA; text-transform: uppercase; margin-bottom: 19px;}

h2.ind{ margin-bottom:24px;}
h2.ind1{ margin-bottom:18px;}
h2.ind2{ margin-bottom:18px;}

h3, h4,  .adress dt{font-size: 16px; margin-bottom: 15px; line-height: 21px; color:#B6C8DA; text-transform: uppercase;}
h3 a{color:#938e92;}
h3.ind1{ margin-bottom:11px;} 

/*================================>> GOOGLE FONTS  <<========================================*/
.sf-menu a, h2, .idea>figure, h3, h4,  .adress dt, .button, .service>figure{font-family: 'PT Sans Narrow', sans-serif;}
.welcome>figure{font-family: 'Overlock', cursive;}
/*================================>> hovers <<========================================*/
.sf-menu>li, .sf-menu>li a, #carousel .es-nav-prev, #carousel .es-nav-next, .img_wrap1 em, #carousel .img_wrap1 strong, #carousel .img_wrap1 span, .p2 a, .list1 a, .button em, .button, h3 a{-webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;transition: all 0.5s ease;}

/*********************************page_1*************************************/
.ext_list>li, .ext_box{ overflow:hidden;}
.ext_list>li>figure, .ext_box>figure{ float:left;}
.ext_list>li>div, .ext_box>div{overflow:hidden;}

.img_wrap1{display: inline-block;padding: 3px;background: url('../images/img_wrap1.jpg') repeat-x #4a454b;position: relative;}
.img_wrap1 img{position: relative;z-index: 10;}
.img_wrap1 em{display: block;z-index: 1;background: #7D9DBD;width: 100%;height: 0;top: 0;left: 0;position: absolute;}
.img_wrap1:hover em{height: 100%;bottom: 0;}

#carousel .img_wrap1 span{display: block;background: url('../images/hover.png') repeat;position: absolute;top: 3px;left: 3px;bottom: 3px;right: 3px;z-index: 10;}
#carousel .img_wrap1 strong{width: 38px;height: 62px;background: url('../images/hover1.png') no-repeat;left: 41%;top: 28%;display: block;position: absolute;z-index: 11;}
#carousel .img_wrap1 span, #carousel .img_wrap1 strong{opacity: 0;}
#carousel .img_wrap1:hover span, #carousel .img_wrap1:hover strong{opacity: 1;}



.welcome{background: url('/images/welcome.jpg') repeat;padding:0 20px 20px 0;color: #C8C8C8;}
.welcome>div{padding-top: 20px;}
.welcome .nofigure{padding-left: 20px;}
.welcome>figure{width: 212px;margin: 0 0 0 0;font-size: 40px; line-height: 48px; color: #DDDDDD;text-transform: uppercase;font-weight: 900;font-style: italic;padding: 18px 0 0 28px;text-shadow: 1px 1px 2px #221f24;}
.welcome>figure span{font-size: 25px; line-height: 32px; color: #938e92;display: block;margin-top: -4px;}

.m_bot1{margin-bottom: 40px;}
.m_bot2{margin-bottom: 34px;}
.m_bot3{margin-bottom: 59px;}
.m_bot4{margin-bottom: 30px;}
.m_bot5{margin-bottom: 19px;}

.idea{margin-bottom: 16px;}
.idea>div{padding-top: 14px;}
.idea>figure, .service>figure{width: 49px;border-radius: 500px; text-align: center; font-size: 24px; line-height: 29px; color: #938e92; font-weight: bold; padding: 9px 0 10px; margin: 0 22px 0 0;background: url('../images/num_bg.jpg') repeat;}
/*********************************page_2*************************************/

.profile{margin-bottom: 64px;}
.profile>div{}
.profile>figure{margin: 6px 20px 0 0;}

.list_box{overflow: hidden;}
.list_box>ul{float: left;width: 45%;}
.list_box>ul:first-child{margin-right: 45px;}

.awards>li{margin-bottom: 18px;}
.awards>li>div{}
.awards>li>figure{margin: 4px 16px 0 0;}

.team_box h3{margin-bottom: 11px;}
.team_box .img_wrap1{margin-bottom: 14px;}
.team_box .status{color: #DDDDDD;margin-bottom: 20px;}
/*********************************page_3*************************************/
.catalogue .img_wrap1{margin-bottom: 14px;}
.catalogue h3{margin-bottom: 11px;}

/*********************************page_4*************************************/
.service{margin-bottom: 16px;}
.service h3{margin-bottom: 0;}
.service>figure{margin-top: 5px;}

.pad_box1{padding-right: 20px;}
.pad_box2{padding-bottom: 20px;}

.designer>li{margin-bottom: 35px;}
.designer>li>div{}
.designer>li>figure{margin: 5px 20px 0 0;}

/*********************************page_5*************************************/


/* Contact form */
#contact-form {padding:0px 0 0 0;}
#contact-form .success {width:246px;  padding:10px;}
#contact-form textarea, #contact-form input {margin:0;font-size:13px; border:none; color:#7c777b; padding:6px 10px 7px;outline:none; position:relative; font-family:Arial, Helvetica, sans-serif;background: url('../images/fields.jpg') repeat;width: 201px;}
#contact-form textarea {overflow:auto;height:167px;resize:none; float:left; margin: 0 0 0 0;}	
#contact-form label {display:block; min-height:40px; overflow:hidden;}	
#contact-form label.message { display:block; padding-bottom:0; }
#contact-form .button {margin-right: 5px;}
#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:30px;}
#contact-form .buttons2 a {
	cursor:pointer;
	margin-top:0;
	text-align:center;
}
#contact-form span{ display:block; margin: 0px 0 0 5px;}

.map_wrapper{overflow:hidden;display:inline-block;margin-bottom:26px;}
#map_canvas {
   width:474px;
   height:364px;
}
.adress{margin-bottom: 20px;}
.adress span{ display:inline-block; width:71px;}
.adress dt{margin-bottom: 14px;font-weight: bold;}

.demo{color: #B6C8DA;text-decoration: underline;}
.demo:hover{ text-decoration:none;}

.info{}
.info>div{}
.info>figure{margin: 5px 20px 0 0;}


/****************************footer************************/
footer {padding:19px 0 17px;margin-bottom: 20px;background: url('../images/footer.jpg') repeat-x #B6C8DA;}
nav .social {padding:19px 0 17px;}
footer .privacy{float: left;font-size: 11px;line-height: 25px;text-transform: uppercase;color: #FFFFFF;padding-top: 7px;}
footer .privacy img{margin-top:-7px; margin-right:30px;}
footer .privacy a{color: #FFFFFF;text-decoration: underline;-webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;transition: all 0.5s ease;}
footer .privacy a:hover{color: #B6C8DA;}
footer .privacy h3 div {font-size: 24px;}

footer .actions{ overflow:hidden;float: right;}
footer .actions .button{ margin-top: 0px; margin-left: 10px;}
footer .actions a{ display:block; float:left; overflow:hidden; margin-left:1px;}
footer .actions a:first-child{margin: 0 0 0 0;}

footer .social, nav .social{ padding-right: 3px;overflow:hidden;float: right;}
footer .social a, nav .social a{ display:block; float:left;width:34px;height:34px; overflow:hidden; margin-left:5px;}
footer .social a:first-child, nav .social a:first-child{margin: 0 0 0 0;}
footer .social a:hover img, nav .social a:hover img{ margin-top:-34px;}


/*==================================RESPONSIVE LAYOUTS===============================================*/
@media only screen and (max-width: 995px) {
 body{min-width:768px;}
 .main{width: 768px;}
 .img_wrap1{display: block;}
 .img_wrap1 img{width: 100%;}
 #carousel li .img_wrap1{margin-right: 10px;}
 .profile>div, .awards>li>div{overflow: visible;}
 .slider_box{height: 365px;}
 .designer>li>div{overflow: visible;}
 .map_wrapper{display:block;}
#map_canvas {width:100%;}
.info>figure{float: none;margin: 0 0 15px;}
 #contact-form textarea, #contact-form input{width: 150px;}
 .pad_box1{padding-right: 0px;}
}

@media only screen and (max-width: 767px) {
 body{min-width:420px;}
 .main{width: 420px;}
 .pad_box{padding: 0 0;}
 .welcome{padding-left: 10px;padding-right: 10px;}
 .designer>li>figure, .welcome>figure, .profile>figure{float: none;padding: 20px 0 0;}
 .welcome>div{padding-top: 10px;}
 .designer>li>figure, .profile>figure{margin: 0 0 15px;}
  footer .privacy{padding-left: 10px;}
  footer .social{padding-right: 10px;}
  nav .social {padding:10px 0 0;}
  .list_box>ul{float: none;width: 100%;}
  .awards>li>div{overflow: hidden;}
  .slider_box{height: 200px;}
  #contact-form textarea, #contact-form input{width: 380px;}
}

@media only screen and (max-width: 479px) {
 body{min-width:300px;}

 header h1{width: 260px;}
 header h1 a {width:260px;height:155px;background:url(../images/logo/logo_mobile.png) 0 0 no-repeat scroll;}

 #carousel li .img_wrap1{margin-right: 0px;}
 .main{width: 300px;}
 footer {padding:19px 0 5px;}
 footer .privacy, footer .social, nav .social{float: none;}
 footer .privacy{padding-left: 10px;}
 footer .actions{padding: 15px 0 0 5px;}
 footer .social{padding: 25px 0 0 5px;}

 .slider_box{height: 143px;}
 #contact-form textarea, #contact-form input{width: 260px;}
}
