@import url(http://fonts.googleapis.com/css?family=Jura:400,500,600,300&subset=latin,cyrillic);
@import url(http://fonts.googleapis.com/css?family=Cuprum:400,400italic,700,700italic&subset=latin,cyrillic);
@import url(http://fonts.googleapis.com/css?family=Ubuntu:400,700,400italic&subset=latin,cyrillic,cyrillic-ext);

@font-face {
    font-family: "PFDinTextCompPro";
    src: url(../fonts/PFDinTextCompPro-Regular.ttf) format('truetype'), url(../fonts/pfdintextcompproregular.otf) format('opentype');
}

body {
    font-family: "PFDinTextCompPro", sans-serif;
    background-color: #FFF;
    background-image: url("../files/texture/hexellence.png");
    color: #2F2F2F;
}
.margin-top{
    margin-top: 40px;
}
.margin-bottom{
    margin-bottom: 40px;
}

.irongrip_op_03 {
    background: url("../files/texture/irongrip_op_03.png") repeat scroll 0% 0% transparent;
}
header .hidden-xs .nav-box{
    position: absolute;
    z-index: 100;
    top: 10px;
    left: 20px;
}
header .hidden-xs .navbar {
    border-bottom: 1px solid #FFFFFF;
    border-top: 1px solid #FFFFFF;
    box-shadow: 0px 5px 10px 2px rgba(47, 47, 47, 0), 0px 0px 10px 1px rgba(47, 47, 47, 0.5);
    text-align: center;
    top: 20px;

}

header .hidden-xs .navbar ul a {
    display: inline-block;
    padding: 10px 20px;
    letter-spacing: 2px;
    font-size: 120%;
    text-transform: uppercase;
    line-height: 1.5em;
    text-decoration: none;
    color: #FFF;
    text-shadow: 0px 0px 6px rgba(255, 255, 255, 0.7);
}

header .hidden-xs .nav > li > a {
    border-radius: 0;
    line-height: 2em;
}

header .hidden-xs .nav > li > a:focus, header .hidden-xs .nav > li > a:hover {
    background: url("../files/texture/irongrip_op_03.png") repeat scroll 0% 0% transparent;
}

.branding {
    position: absolute;
    z-index: 14;
    padding-top: 100px;
}

footer {
    box-shadow: rgba(47, 47, 47, 0.5) 0px -5px 15px 1px;
    border-top: 1px solid white;
    background: url(../files/texture/irongrip.png) repeat;
}

.foo-address {
    color: #FFFFFF;
}

.foo-address address {
    font-size: 170%;
    line-height: 1.5em;
}

/*-----form-----*/
.form-box {
    position: relative;
}

.form-box h2, .form-box p {
    color: #fff;
}

#contact-form, .back-call-form-box, #faq-form{
    position: relative;
    z-index: 1;
    margin: 15px 0 15px 0;
    padding: 0 0 0 0;
    vertical-align: top;
    font-size: 130%;
}

.txt-form {
    display: block;
    padding-bottom: 6px;
    color: #ffffff;
}

.txt-form span {
    color: #ffffff;
}

.form-div-1, .form-div-2, .form-div-3 {
    float: left;
    width: 200px;
}

.form-div-1 p, .form-div-2 p, .form-div-3 p {
    margin-bottom: 3px;
}

.form-div-1, .form-div-2 {
    margin-right: 10px;
}

#contact-form div, #faq-form div{
    overflow: hidden;
    margin-bottom: 1px;
}

#contact-form fieldset, #faq-form  fieldset{
    position: relative;
    z-index: 10;
    overflow: hidden;
    padding: 0;
    width: 100%;
    border: none;
}

#contact-form label {
    position: relative;
    display: block;
    float: left;
    margin: 0;
    padding: 0;
    min-height: 42px;
    width: 100%;
    font-weight: normal;
}
#faq-form label {
    position: relative;
    display: block;
    float: left;
    margin: 0;
    padding: 0;
    min-height: 42px;
    font-weight: normal;
}
#faq-form .btn{
    border-radius: 0;
}

#contact-form .message, #faq-form  .message {
    display: block !important;
    width: 100%;
    margin-bottom: 15px;
}

#contact-form input, #contact-form textarea, #faq-form input, #faq-form  textarea{
    border-radius: 0;
    box-sizing: border-box;
    float: left;
    margin: 0;
    width: 100%;
    outline: none;
    height: 33px;
    background-color: rgba(0, 0, 0, 0.2);
    border: 1px solid #2f2f2f;
    color: white;
    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.8);
    padding-left: 0.5em;
    padding-right: 0.5em;
}
#faq-form input, #faq-form  textarea{
    background-color: rgba(0, 0, 0, 0.1);
    box-shadow: none;
    color: inherit;
    border: 1px solid #999;
}

#contact-form input:focus, #contact-form textarea:focus,  #faq-form input:focus, #faq-form textarea:focus,{
    box-shadow: none;
}

#contact-form .area .error, #faq-form .area .error{
    float: none;
}

#contact-form textarea, #faq-form textarea{
    overflow: auto;
    width: 100%;
    height: 100px;
    resize: none;
}

#contact-form .success, #faq-form .success{
    position: absolute;
    top: 0px;
    left: 0;
    z-index: 20;
    display: none;
    box-sizing: border-box;
    padding: 6px 10px;
    width: 100%;
    background: #606060;
    color: #ffffff;
    text-align: center;
    text-transform: none;
    font-size: 14px;
    line-height: 22px;
}

#contact-form .error, #contact-form .empty, #faq-form .error, #faq-form .empty{
    position: absolute;
    bottom: 10px;
    text-align: right;
    right: 2px;
    display: none;
    overflow: hidden;
    padding: 1px 4px 0px 0;
    width: 100%;
    color: #DE3D3D;
    text-transform: none;
    font-size: 11px;
    line-height: 1.27em;
}

#contact-form .message .error, #contact-form .message .empty, .back-call-form-box .message .empty, .back-call-form-box .message .error, #faq-form .message .error, #faq-form .message .empty  {
    bottom: -15px;
    text-align: right;
}

.send-button {
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.8);
    text-align: center;
    background-color: rgba(0, 0, 0, 0.2);
    border: 1px solid #2f2f2f;
}

.send-button:hover {
    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.8);
}

.btn1 {
    color: white;
    line-height: 2em;
    width: 100%;
    display: block;
}

.btn1:hover {
    color: #FFFFFF;
}
.lSSlideOuter{
    position: relative;
}
.lSGallery{
    height: 100px!important;
    position: absolute;
    bottom: 0%;
    left: 0%;
    z-index: 14;
}
.slide_trumb {
    background: url(../files/shadow/shadow_g.png) repeat-x, url(../files/texture/hexellence.png) repeat;
    padding-left: 10px;
    padding-right: 10px;
    text-align: center;
    display: inline-table;
    height: 100%;
    opacity: 1!important;

}
.slide_trumb a{
     color: #000;
     text-transform: uppercase;
 }
.slide_trumb a h3{
    font-size: 140%;
}
.slide_trumb.active{
    position: relative;
    background-color: rgba(47,47,47,0);
    background-image: none;
}

.lSGallery li.active{
    border-left: 1px solid #BEBEBE;
    border-right: 1px solid #BEBEBE;
    box-shadow: -5px 0px 15px rgba(0,0,0,0.2), 5px 0px 15px rgba(0,0,0,0.2);
    z-index: 1;
}

.left-panel {
    position: relative;
    display: inline-table;
    float: left;
    height: 100px;
    background: url(../files/shadow/shadow_g.png) repeat-x;
}
.right-panel {
    position: relative;
    display: inline-table;
    float: left;
    height: 100px;
    background: url(../files/shadow/shadow_g.png) repeat-x;
}
.lightSlider p.description{
    box-shadow: rgba(47,47,47,0.3) 0px 5px 10px 2px,rgba(47,47,47,0.3) 0px 0px 10px 1px;
    position: absolute;
    top: 20%;
    right: 1%;
    display: block;
    padding: 20px 15px 5px 15px;
    width: 40%;
    border: 1px solid white;
    background-color: rgba(225,30,40,0.7);
    color: white;
    word-wrap: break-word;
    font-size: 115%;
}

.lightSlider h3 {
    text-shadow: 0px 0px 20px rgba(255,255,255,0.9);
    box-shadow: rgba(47,47,47,0.3) 0px 5px 10px 2px,rgba(47,47,47,0.3) 0px 0px 10px 1px;
    position: absolute;
    bottom: 20%;
    display: block;
    padding: 5px 15px;
    left: 20%;
    border: 1px solid white;
    background-color: rgba(225,30,40,0.7);
    color: white;
    text-align: left;
    font-size: 180%;
    line-height: 1em;
}

/*  контент на главной*/
.consult {
    box-shadow: rgba(47,47,47,0.5) 0px -5px 15px 1px,rgba(47,47,47,0.5) 0px 5px 15px 1px;
    position: relative;
    z-index: 11;
    display: inline-block;
    border-top: 1px solid white;
    border-bottom: 1px solid white;
    background-color: white;
    background-image: url(../files/texture/irongrip.png);
    background-repeat: repeat-x repeat-y;
    color: #fff;
    font-size: 140%;
    padding-bottom: 20px;
    padding-top: 20px;
}
.back-call{
    box-shadow: rgba(250,250,250,0.3) 0px -3px 15px 2px,rgba(250,250,250,0.3) 0px 3px 15px 2px;
    position: relative;
    display: inline-block;
    margin: 0 0 20px 40%;
    padding: 10px 10px;
    color: white;
    text-align: center;
    font-size: 120%;
}

.modal-content {
    background-image: url(../files/texture/irongrip_2.png);
    background-repeat: repeat-x repeat-y;
    background-color: white;
    box-shadow: rgba(47,47,47,0.5) 0px -3px 5px 2px,rgba(47,47,47,0.5) 0px 3px 5px 2px;
    padding: 10px 5px 10px 30px;
    opacity: 0.9;
}

.l-content {
    box-sizing: border-box;
    border: 1px solid white;
    background: url(../files/shadow/shadow_v_left.png) repeat-y,url(../files/shadow/shadow_v_right.png) repeat-y right,url(../files/shadow/shadow_g.png) repeat-x top,url(../files/shadow/shadow_g_v.png) repeat-x bottom,url(../files/texture/hexellence_2.png) repeat;
}
.service-block  {
    min-height: 17em;
    background: rgba(0,0,0,0.1);
    box-shadow: 5px 10px 5px rgba(0,0,0,0.2);
    border: 1px solid #fff;
    border-radius: 5px;
    overflow: hidden;
    box-sizing: border-box;
}

.show-grid{
    margin-bottom: 15px;
}
.nav-stacked li a:hover{
    text-decoration: underline;
}

.nav-stacked li a.active{
    background: url(../files/shadow/shadow_v_left.png) repeat-y,url(../files/shadow/shadow_g.png) repeat-x top,url(../files/shadow/shadow_g_v.png) repeat-x bottom,url(../files/texture/hexellence_2.png) repeat;
    border-left: 1px solid white;
    margin-right: -25px;
    z-index: 10;
}
.nav-stacked li a{
 border-radius: 0;
}

/*мобильное меню*/
/* adjust body when menu is open */
body.slide-active {
    overflow-x: hidden
}
/*first child of #page-content so it doesn't shift around*/
.no-margin-top {
    margin-top: 0px!important
}
/*wrap the entire page content but not nav inside this div if not a fixed top, don't add any top padding */
#page-content {
    position: relative;
    padding-top: 70px;
    left: 0;
}
#page-content.slide-active {
    padding-top: 0
}
/* put toggle bars on the left :: not using button */
#slide-nav .navbar-toggle {
    cursor: pointer;
    position: relative;
    line-height: 0;
    float: left;
    margin: 0;
    width: 30px;
    height: 40px;
    padding: 10px 0 0 0;
    border: 0;
    background: transparent;
}
/* icon bar prettyup - optional */
#slide-nav .navbar-toggle > .icon-bar {
    width: 100%;
    display: block;
    height: 3px;
    margin: 5px 0 0 0;
}
#slide-nav .navbar-toggle.slide-active .icon-bar {
    background: orange
}
.navbar-header {
    position: relative
}
/* un fix the navbar when active so that all the menu items are accessible */
.navbar.navbar-fixed-top.slide-active {
    position: relative
}
/* screw writing importants and shit, just stick it in max width since these classes are not shared between sizes */
@media (max-width:767px) {
    section .container{
        margin-top: 50px;
    }
    #slide-nav .container {
        margin: 0;
        padding: 0!important;
    }
    #slide-nav .navbar-header {
        margin: 0 auto;
        padding: 0 15px;
    }
    #slide-nav .navbar.slide-active {
        position: absolute;
        width: 80%;
        top: -1px;
        z-index: 1000;
    }
    #slide-nav #slidemenu {
        background: #f7f7f7;
        left: -100%;
        width: 80%;
        min-width: 0;
        position: absolute;
        padding-left: 0;
        z-index: 2;
        top: -8px;
        margin: 0;
    }
    #slide-nav #slidemenu .navbar-nav {
        min-width: 0;
        width: 100%;
        margin: 0;
        text-align: center;
        font-size: 140%;
        margin-top: 30px;
    }
    #slide-nav #slidemenu .navbar-nav li{
        border-bottom: 1px dotted #666;
    }

    #slide-nav #slidemenu .navbar-nav .dropdown-menu li a {
        min-width: 0;
        width: 80%;
        white-space: normal;
    }
    #slide-nav {
        border-top: 0
    }
    #slide-nav.navbar-inverse #slidemenu {
        background: #333
    }
    /* this is behind the navigation but the navigation is not inside it so that the navigation is accessible and scrolls*/
    #slide-nav #navbar-height-col {
        position: fixed;
        top: 0;
        height: 100%;
        width: 80%;
        left: -80%;
        background: #eee;
    }
    #slide-nav.navbar-inverse #navbar-height-col {
        background: #333;
        z-index: 1;
        border: 0;
    }
    #slide-nav .navbar-form {
        width: 100%;
        margin: 8px 0;
        text-align: center;
        overflow: hidden;
        /*fast clearfixer*/
    }
    #slide-nav .navbar-form .form-control {
        text-align: center
    }
    #slide-nav .navbar-form .btn {
        width: 100%
    }
}
@media (min-width:768px) {
    #page-content {
        left: 0!important
    }
    .navbar.navbar-fixed-top.slide-active {
        position: fixed
    }
    .navbar-header {
        left: 0!important
    }
}

.mobile-border{
    display: block;
    min-height: 50px;
    width: 100%;
}