body { font-family: Arial, sans-serif; font-size: 16px }

.text-white, .text-white a { color: #FFFFFF; }
.text-blue, .text-blue a { color: #0e4675; }
.bg-gray { background: #f1f1f1; }
.section-overlay { background: rgba(14, 70, 117, 0.3); }
h1, h2 { margin: 0; }
p { margin: 0; }
.display-table { display: table; width: 100%; height: 100%; }
.display-table-cell { display: table-cell; vertical-align: middle; }
.dinb { float: none; display: inline-block; vertical-align: middle; }
.linearHalfs { -webkit-transition: all 500ms linear; -moz-transition: all 500ms linear; -o-transition: all 500ms linear; transition: all 500ms linear; }
::selection { background: #0e4675; color: #FFF; } /* WebKit/Blink Browsers */
::-moz-selection { background: #0e4675; color: #FFF; } /* Gecko Browsers */

.content { margin-top: 67px; }

/*===============================================
  MENU
================================================= */
header { border-bottom: 1px solid #000; padding: 20px 0; height: 67px; position: fixed; top: 0; left: 0; width: 100%; z-index: 10; background: #FFF; }
.logo { float: left; margin: 0 25px 0 0; }
ul.menu, ul.language-menu { margin-bottom: 0; -webkit-margin-before: 0; -webkit-margin-after: 0; -webkit-padding-start: 0; list-style-type: none; padding-top: 3px; }
ul.menu { float: left; }
ul.language-menu { float: right; }
ul.menu li, ul.language-menu li { display: inline-block; }
ul.menu li { padding: 0 20px; }
ul.menu li a, ul.language-menu li a { color: #000; text-transform: uppercase; font-size: 13px; position: relative; display: block; }
ul.menu li a:before, ul.language-menu li a:before { content: ''; position: absolute; width: 100%; height: 1px; bottom: 0; left: 0; background-color: #000; visibility: hidden; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; }
ul.menu li a.is-selected:before, ul.menu li:hover a:before, ul.language-menu li:hover a:before { visibility: visible; -webkit-transform: scaleX(1); transform: scaleX(1); }
ul.menu li a.is-selected { font-weight: 700; }
ul.language-menu li { border-left: 1px solid #000000; padding-left: 5px; height: 16px; }
ul.language-menu li:first-child { border-left: none; padding-left: 0; }
.menu-toggle { display: none; color: #000; font-size: 26px; line-height: 30px; text-align: center; width: 30px; height: 30px; float: right; }
header.opened .menu-toggle{ background: #0e4675; color: #fff; }

/*===============================================
  BANNER
================================================= */
#home { background: #0e4675; width: 100%; height: auto; min-height: calc(100vh - 67px); position: relative; }
#banners { width: 100%; height: 100% !important; }
.banner-elem { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; }
.banner-img { background-position: center !important; background-size: cover !important; background-repeat: no-repeat !important; }
#banners .active { opacity: 1; }
.banner-logo-wrapper { position: absolute; width: 100%; height: 100%; }
.banner-logo img { margin: 0 auto; }
.banner-chevron { position: absolute; bottom: 10px; left: 0; right: 0; text-align: center; }
.banner-chevron img { max-width: 25px; cursor: pointer; }
.banner-chevron a { width: 57px; height: 33px; background: url(../images/scroll_down1.png) 0 0; display: inline-block; }
.banner-chevron a:hover { background-position: -58px 0; }

/*===============================================
  SECTIONS
================================================= */
.section-inner { padding: 100px 0; }
.section-title { text-transform: uppercase; font-size: 32px; font-weight: 700; margin-bottom: 15px; }

/*===============================================
  COMPANY
================================================= */
#company-description { background-position: center; background-size: cover; }

#certification .section-inner { padding: 30px 0; }
#certification ul { height: 86px; margin-bottom: 0; list-style-type: none; -webkit-margin-before: 0; -webkit-margin-after: 0; -webkit-padding-start: 0; }
#certification ul li { display: inline-block; margin: 0 20px; }
#certification ul li:first-child { margin-left: 0; }
#certification ul li:last-child { margin-right: 0; }

#about-us img { max-height: 190px; }

#how-we-do-it .section-title { line-height: 50px; font-size: 40px; max-width: 240px; }
.section-text { line-height: 25px; }

/*===============================================
  PRODUCTS
================================================= */
.product { margin-top: 80px; }
.product-image { position: relative; }
.product-image-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; cursor: pointer; -webkit-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; }
.product-image-overlay:hover { background: rgba(14, 70, 117, 0.4); }
.product-image-overlay:before { content: ''; display: inline-block; vertical-align: middle; height: 100%; }
.product-image-overlay p { color: #FFF; font-weight: 700; font-size: 30px; text-transform: uppercase; text-align: center; display: inline-block; vertical-align: middle; width: 100%; }
.product-image-overlay p span { position: relative; }
.product-image-overlay p span:before { content: ''; position: absolute; width: 100%; height: 2px; bottom: 0; left: 0; background-color: #FFF; visibility: hidden; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; }
.product-image-overlay:hover p span:before { visibility: visible; -webkit-transform: scaleX(1); transform: scaleX(1); }
.product-name { text-transform: uppercase; font-size: 24px; font-weight: 700; margin-bottom: 25px; }
.product-description { text-align: justify; }

/*===============================================
  PRODUCT PAGE
================================================= */
.product-page .content { margin-top: 0; }
.product-page header { position: relative; }
.product-gallery { height: calc(100vh - 199px); overflow: hidden; }
.no-footer .product-gallery { height: calc(100vh - 67px); }
.product-gallery-left { height: 100%; }
.product-gallery-img { height: 100%; position: relative; }
.product-gallery-img img { max-width: 100%; max-height: calc(100vh - 127px); position: absolute; right: 0; top: 50%; transform: translatey(-50%); }
.product-gallery .product-name { font-size: 40px; line-height: 40px; font-weight: 400; margin-bottom: 15px; }
.product-gallery-right { position: relative; }
.product-border { width: 100%; height: 1px; background: #000000; margin: 15px 0; }
.product-border:first-of-type { margin-top: 10px; }
.product-thumbnail { margin-top: 15px; margin-bottom: 15px; }
.product-thumb { padding-top: 100%; position: relative; background-size: cover; background-position: center; }
.product-thumb-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; cursor: pointer; -webkit-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; background: rgba(14, 70, 117, 0.4); opacity: 0; }
.product-thumb:hover .product-thumb-overlay, .product-thumb.active .product-thumb-overlay { opacity: 1; }
.back-btn { background: url(../images/back.png) no-repeat left center; background-size: auto 100%; padding-left: 18px; text-transform: uppercase; color: #000; font-size: 13px; height: 20px; line-height: 21px; }
.back-btn span { display: inline-block; position: relative; }
.back-btn span:before { content: ''; position: absolute; width: 100%; height: 1px; bottom: 0; left: 0; background-color: #000; visibility: hidden; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; }
.back-btn:hover span:before { visibility: visible; -webkit-transform: scaleX(1); transform: scaleX(1); }

/*===============================================
  CONTACTS
================================================= */
#contacts { background: url('../images/map.jpg') center; background-size: cover; }
#contacts .section-overlay { background: rgba(102,104,104,0.6); }
.form-control { border: 1px solid #FFF; border-radius: 0; background: transparent; font-size: 12px; color: #FFF; }
.form-control:focus { border-color: #FFF; outline: 0; -webkit-box-shadow: inset 0 1px 1px rgba(255, 255, 255, .075), 0 0 8px rgba(255, 255, 255, .6); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .075), 0 0 8px rgba(255, 255, 255, .6); }
.form-control::-moz-placeholder { color: #999; }
.form-control:-ms-input-placeholder { color: #FFF; }
.form-control::-webkit-input-placeholder { color: #FFF; }
button { border: 1px solid #FFF; background: transparent; width: 100%; text-transform: uppercase; padding: 4px; margin-top: 10px; color: #FFF; -webkit-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; }
button:hover { background: #FFF; color: #000; }
.has-error .form-control, .has-error .form-control:focus { border-color: #F00; -webkit-box-shadow: none; box-shadow: none }
.has-error .help-block { margin: 0; background: #F00; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; color: #FFF; font-size: 12px; text-align: center; padding: 2px 0; }
.contacts-left { /*float: left; width: 320px; padding-left: 15px;*/ padding-right: 30px; }
.contacts-middle { padding-top: 60px; padding-left: 30px; padding-right: 30px; }
.contacts-right { /*float: left; width: 430px; padding-left: 100px; margin-left: 50px;*/ padding-left: 30px; position: relative; }
.contacts-left, .contacts-middle { font-size: 14px; }
.contacts-middle:before, .contacts-right:before { content: ''; width: 1px; height: 272.69px; background: #FFF; position: absolute; left: 0; top: 5%; }

/*===============================================
  FOOTER
================================================= */
footer { padding: 12.897638px 0 18.897638px; }
footer a { color: #000; }
.contact-info-item a:hover { color: #000000; }
.footer-sponsors { border-bottom: 1px solid #000; max-width: 800px; padding-bottom: 12.897638px; margin: 0 auto 9.897638px; }
.social-menu { margin-bottom: 0; list-style-type: none; -webkit-margin-before: 0; -webkit-margin-after: 0; -webkit-padding-start: 0; margin-bottom: 9.897638px; height: 36px }
.social-menu li { display: inline-block; margin: 0 8px; }
.social-menu li a { font-size: 30px; }
.social-menu li a:hover { color: #b5b5b5; }
.copyright { font-weight: 700; text-transform: uppercase; font-size: 10px; }

/*===============================================
  ERROR PAGE
================================================= */
.error-page .display-table { height: calc(100vh - 199px); }
.error-page h2 { color: #0e4675; font-size: 150px; font-family: 'Arial Black', sans-serif; -webkit-text-fill-color: transparent; background: -webkit-linear-gradient(transparent, transparent),url(/skins/frontend/default/images/error_bg.jpg) repeat; background: -o-linear-gradient(transparent, transparent); background-size: 320px; -webkit-background-clip: text; }

/*===============================================
  MEDIA QUERIES
================================================= */
@media all and (min-width: 992px) {
    .contacts-left {
        width: 269px;
        padding-right: 40px;
    }
    .contacts-middle {
        padding-left: 40px;
        padding-right: 40px;
        width: 496px;
    }
    .contacts-right {
        padding-left: 40px;
        width: 405px;
    }
}

@media all and (max-width: 991px) {
    .dinb { display: block; }
    #about-us img { margin-bottom: 15px; }
    .product { margin-top: 40px; }
    .product-image { margin-bottom: 15px; }
    .product.reverse .product-wrapper { display: table; }
    .product.reverse .product-image-wrapper { display: table-header-group; }
    .product.reverse .product-info-wrapper { display: table-footer-group; }
    .product.reverse .product-description, .product.reverse .product-image, .product.reverse .product-title { padding: 0 15px; }
    .contacts-left, .contacts-middle { text-align: center; }
    .contacts-middle, .contacts-right { padding-left: 15px; padding-right: 15px; margin-top: 30px; padding-top: 30px; width: 100%; }
    .contacts-middle:before, .contacts-right:before { height: 1px; width: 90%; top: 0; left: 5%; }
}

@media all and (max-width: 768px) {
    .product-gallery-left .product-name { overflow: hidden; padding-top: 15px; }
    .product-gallery-left .product-name .back-btn { float: right; margin-top: 10px; }
    .product-gallery-img { height: calc(100% - 132px); }
    .product-gallery-img img { max-height: 100%; right: auto; left: 50%; transform: translatex(-50%) translatey(-50%); }
    .product-thumbnails { /*margin-top: -50px; height: 64px;*/ left: 0; width: 100%; z-index: 1; position: absolute; bottom: 0; overflow: hidden; background: #FFF; padding-left: 15px; padding-right: 15px; margin: 0 auto; }
    .product-thumbnail { margin: 0; padding: 0; }
    .product-thumb { padding-top: 37%; }
    #certification ul { text-align: center; }
}

@media all and (max-width: 749px){
    .contacts-left { float: none; width: 100%; padding-right: 15px; text-align: center; }
    .contacts-right { float: none; width: 100%; max-width: 320px; margin: 30px auto 0; padding: 30px 15px 0; }
    .contacts-right:before { width: 90%; left: 5%; top: 0; height: 1px; }
}

@media all and (max-width: 604px) {
    .menu-toggle { display: inline-block; }
    .header-controls { position: fixed; top: 67px; left: 0; right: 0; background: #FFF; height: 0; opacity: 0; overflow: hidden; -webkit-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; }
    header.opened .header-controls { height: auto; opacity: 1; }
    ul.menu, ul.language-menu { float: none; padding-top: 0; }
    ul.menu li { display: block; padding: 0; }
    ul.menu li a { padding: 10px; border-bottom: 1px solid #d2d2d2; color: #0e4675; line-height: 19px; }
    ul.menu li a.is-selected { background: #d2d2d2; }
    ul.language-menu { text-align: center; padding: 10px; }
    ul.language-menu li {}
    ul.language-menu li a {}
    ul.menu li a.is-selected:before, ul.menu li:hover a:before, ul.language-menu li:hover a:before { display: none }
}