/* Template: P-Import Version: 1.0.1 Author: Konstantin Ryazanov Mail: kirov.web@yandex.ru */ @font-face{font-family:HeaderFont;src:local("Helv-4-Light"),url(fonts/HELVET4L.OTF)}@font-face{font-family:NormalFont;src:local("Helv-2"),url(fonts/HelveticaNeueCyr-Roman.otf)} /*Main Styles*/ body {margin: 0; padding: 0; font-family: 'Montserrat', sans-serif; color: #000000; font-size: 14px; min-width: 1500px;} a {color: #000000; text-decoration: none;} *, ::after, ::before {box-sizing: border-box;} img, input, texarea, button {outline: none;} h2.stylyzed {text-transform: uppercase; margin: 0; font-weight: 600; font-size: 32px; line-height: 39px;} h1,h2.stylyzed-main-page {text-transform: uppercase; margin: 0; font-weight: 600; font-size: 32px; line-height: 39px; margin-bottom: 25px; margin-top: 45px;} .left {float: left;} .right {float: right;} .block {display: block;} .overflow {overflow: hidden;} .m-auto {margin: 0 auto;} .center {text-align: center;} .w100 {width: 100%;} .container {width: 1200px; padding: 0 15px; box-sizing: content-box; overflow: hidden; margin: 0 auto;} .container-2 {width: 1200px; padding: 0 15px; box-sizing: content-box; overflow: hidden; margin: 0 auto;} .lato {font-family: 'Lato', sans-serif;} .bold {font-weight: bold;} .relative {position: relative;} .red-btn {display: inline-block; background: #E03A3E; border-radius: 6px; font-weight: 500; color: #fff; cursor: pointer; text-align: center; border: none; font-size: 14px;} .red-btn:hover {box-shadow: 0px 6px 14px rgba(0, 0, 0, 0.2); color: #fff; text-decoration: none;} .white-btn {display: inline-block; border: 1px solid #DBE8EE; border-radius: 6px; color: #F0F0F0; font-weight: 500; text-align: center;} /*Header*/ #header {height: 150px;} #header .left {margin-top: 20px; width: 340px;} #header .right {margin: 60px 20px 0 0;} .header-logo {display: block; width: 336px; height: 80px; background: url('images/logo.png'); background-repeat: no-repeat; background-size: cover; float: left;} #header .logo-text {font-family: 'Lato', sans-serif; font-size: 12px; text-transform: uppercase; float: right;} .header-block {float: right; margin-left: 20px;} .header-block a {display: block; margin: 0 0 10px 0; font-weight: bold; font-size: 18px;} .header-block span {font-family: 'Lato', sans-serif; color: #848484;} .header-mail::before {content: ""; float: left; background: url('images/mail-icon.png') no-repeat; width: 25px; height: 23px; margin: -2px 10px 0 0;} .header-mail {display: block; margin: 3px 40px 0 0; float: right;} #header-menu-wrapper {width: 100%; background: #0B85BC; box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.15); height: 60px;} #header-menu-wrapper .container {overflow: unset; height: 100%;} ul#header-menu {display: block; margin: 0; list-style: none; padding: 0; float: left; margin-left: 170px; height: 100%;} ul#header-menu li {float: left; height: 100%; padding-top: 15px; border-right: 1px solid #219bd2; position: relative;} ul#header-menu li:last-child {border-right: none;} ul#header-menu li a {display: inline-block; line-height: 30px; color: #80c0dc; margin: 0 40px; text-transform: uppercase; font-size: 12px; color: #cee6f1; font-weight: 500;} ul#header-menu li a.active, ul#header-menu li a:hover {color: #fff;} ul#header-menu li a.is-drop::after {content: ""; display: block; float: right; background: url('images/drop-arrow.png') no-repeat; width: 9px; height: 5px; margin-top: 12px; margin-left: 7px;} ul#header-menu li .menu-drop {display: none; box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.15); width: 970px; min-height: 200px; background: #fff; position: absolute; left: 50%; margin-left: -600px; z-index: 999; top: 60px; padding: 40px 70px 10px 100px;} ul#header-menu li .menu-drop:hover {display: block;} ul#header-menu li .menu-drop .left, ul#header-menu li .menu-drop .right {width: 50%;} ul#header-menu li .menu-drop ul.left {display: block; list-style: none; padding: 0;} ul#header-menu li .menu-drop ul.left li {width: 50%; float: left; border: none; padding: 0;} ul#header-menu li .menu-drop ul.left li a {font-size: 14px; text-transform: none; color: #000; line-height: 100%; margin: 0 0 30px; font-weight: normal; } ul#header-menu li .menu-drop ul.left li a:hover {font-weight: bold; margin-bottom: 25px;} ul#header-menu li .menu-drop ul.left li a:hover::after {content: ""; display: block; height: 9px; width: 95%; float: right; background: #46B1DF; margin-top: -4px; margin-right: -5px;} ul#header-menu li .menu-drop .right {padding-left: 90px;} ul#header-menu li .menu-drop .right p {margin: 0; font-weight: bold; font-size: 16px; line-height: 20px;} ul#header-menu li .menu-drop .right a {display: block; float: left; width: 73px; height: 37px; margin: 35px 30px 0 0; background-repeat: no-repeat; background-size: contain; background-position: center;} ul#header-menu li.drop-li:hover .menu-drop {display: block;} #top-search {width: 21px; height: 21px; cursor: pointer; float: left; background: url('images/search-icon.png') no-repeat; margin: 17px 0 0 40px;} #mobile-menu-show {display: none; width: 26px; height: 26px; background: url('images/menu-icon.png') no-repeat; float: right; margin-top: 30px;} #mobile-menu {display: none; background: #fff; position: fixed; top: 0; left: 0; bottom: 0; width: 100%; overflow-y: scroll; z-index: 999;} #mobile-menu-header {width: 100%; height: 90px; border-bottom: 1px solid #C4C4C4;} #mobile-menu-header .header-logo {margin-top: 22px;} #mobile-menu-content {padding-top: 50px;} #mobile-menu-content .search-container {margin: 40px 0;} #mobile-menu-content .search-container input {color: #000;} #mobile-menu-content ul {width: 100%; list-style: none; padding-right: 30px; overflow: hidden;} #mobile-menu-content ul li {width: 100%; text-align: right; margin-bottom: 35px;} #mobile-menu-content ul li a {font-size: 16px; text-transform: uppercase; font-weight: 500;} #mobile-menu-content ul li a.is-drop.active {font-weight: bold; color: #46B1DF;} #mobile-menu-content ul li a.is-drop::after {content: ""; display: block; float: right; background: url('images/mobile-da.png') no-repeat; width: 14px; height: 7px; margin-top: 6px; margin-right: -30px;} #mobile-menu-content ul li a.is-drop.active::after {background: url('images/mobile-da-open.png') no-repeat;} #mobile-menu-content ul li .menu-drop {display: none; margin-top: 35px;} #mobile-menu-content ul li .menu-drop ul {padding: 0;} #mobile-menu-content ul li .menu-drop ul li {margin-bottom: 30px;} #mobile-menu-content ul li .menu-drop ul li a {text-transform: none; font-size: 14px; font-weight: normal;} #mobile-menu-brands {margin-bottom: 35px; overflow: hidden;} #mobile-menu-brands p {font-weight: bold; font-size: 16px; line-height: 20px; margin-bottom: 0;} #mobile-menu-brands a {display: block; float: left; width: 73px; height: 37px; margin: 35px 22px 0 0; background-repeat: no-repeat; background-size: contain; background-position: center;} #mobile-menu-brands a:nth-child(3n+1) {margin-right: 0;} #mobile-menu-close {float: right; width: 20px; height: 20px; background: url('images/close-icon.png') no-repeat; margin-top: 35px;} /*Index Page*/ #main-banner {z-index: 1; width: 1500px; margin: 0 auto; height: 465px; background-image: url('images/main-banner.jpg'); background-repeat: no-repeat; background-size: cover; background-position: center; position: relative;} #main-banner-header {width: 772px; margin: 0 auto; height: 73px; padding-top: 36px; line-height: 73px; font-size: 36px; text-transform: uppercase; color: #fff;} #main-banner-header .left {width: 420px; height: 73px; background: #2c6594; text-align: center;} #main-banner-header .right {width: 352px; height: 73px; background: #46b1df; text-align: center;} ul#main-banner-list {display: block; position: absolute; bottom: 20px; left: 50% !important; list-style: none; width: 600px; margin: 0; padding: 0; margin-left: -230px;} ul#main-banner-list li {float: left; width: 50%; height: 28px; line-height: 28px; font-size: 20px; margin-bottom: 25px;} ul#main-banner-list li::before {content: ""; float: left; width: 28px; height: 28px; background-image: url('images/banner-mark.png'); background-repeat: no-repeat; background-size: cover; background-position: center; margin-right: 12px;} #main-banner-logo {position: absolute; width: 256px; height: 256px; bottom: 16px; right: 276px; background-image: url('images/impress.png'); background-repeat: no-repeat; background-size: cover; bacground-position: center;} #main-categories {margin-top: 140px;} .by-form .category-item {display: block; float:left; width: 276px; position: relative; padding-bottom: 15px; margin: 0 20px 50px 0;} .by-form .category-item:nth-child(4), .by-form .category-item:nth-child(8) {margin-right: 0;} .by-form .category-image {height: 177px; width: 100%; background: #EFEFEF; border-radius: 6px;} .by-form .category-image .pic {float: left; height: 140px; width: 100%; margin-top: 17px; background-size: contain; background-position: center; background-repeat: no-repeat;} .by-form .category-name {height: 90px; width: 250px; line-height: 90px; font-size: 18px; text-indent: 30px; } .by-form .category-name::after {content: ""; width: 100%; display: block; height: 2px; background: #46B1DF; float: left;} .by-form .category-name::before {content: ""; width: 100%; display: none; height: 4px; background: #46B1DF; float: left;} .by-form .category-item:hover .category-image {border-radius: 6px 6px 0 0;} .by-form .category-item:hover .category-name {line-height: 82px; box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.15); width: 100%; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;} .by-form .category-item:hover .category-name::before {display: block;} .by-form .category-item:hover .category-name::after {display: none;} #ourspec-wrapper {margin-top: 80px;} #ourspec {margin-top: 90px;} #ourspec .left, #ourspec .right {width: 50%;} #ourspec .ourspec-item {display: block; width: 277px; height: 284px; float: left; margin: 0 20px 30px 0;} #ourspec .ourspec-item:nth-child(2), #ourspec .ourspec-item:nth-child(4) {margin-right: 0} #ourspec .ourspec-image {width: 100%; height: 110px; background-repeat: no-repeat; background-size: cover; background-position: center;} #ourspec .ourspec-content {padding: 13px; padding-top: 0;} #ourspec .ourspec-item span {display: inline-block; font-size: 18px; margin: 35px 0 28px; text-decoration: underline; font-weight: 500;} #ourspec .ourspec-item p {color: #222222; margin: 0; line-height: 20px;} #ourspec .ourspec-item:hover {box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.15); border-radius: 6px; -webkit-transition: all 0.15s; -moz-transition: all 0.15s; -o-transition: all 0.15s; transition: all 0.15s;} #ourspec .ourspec-item:hover .ourspec-image {border-radius: 6px;} #ourspec .ourspec-item:hover span {color: #2C6594;} #main-form {width: 475px; float: right; min-height: 548px; border: 1px solid #C4C4C4; border-radius: 6px; position: relative; overflow: hidden; padding: 47px 45px 0; text-align: center;} #main-form::before {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 5px; background: #46B1DF;} #main-form::after {content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 18px; background: #2C6594;} #main-form span.head {font-weight: 500; display: inline-block; font-size: 24px; line-height: 29px;} #main-form p {margin: 30px 0; font-family: 'Lato', sans-serif; line-height: 20px;} #main-form input[type="text"] {width: 100%; border: 1px solid #C4C4C4; border-radius: 6px; height: 48px; text-indent: 20px; font-family: 'Lato', sans-serif; color: #979797; margin-bottom: 15px; font-size: 15px;} #main-form .submit {width: 185px; height: 48px; line-height: 48px; margin-bottom: 30px} #solutions {margin-top: 100px; margin-bottom: 135px;} #solutions h2 {margin-bottom: 5px;} .solutions-item {display: block; width: 270px; height: 410px; float: left; text-align: center; margin: 0 25px 15px 0; overflow: hidden;} .solutions-item:last-child {margin-right: 0;} .solutions-item:hover {border-radius: 6px; box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.15); -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;} .solutions-item:hover p {font-weight: 500;} .solutions-image {width: 100%; height: 270px; background-size: cover; background-position: center; background-repeat: no-repeat;} .solutions-item p {font-size: 16px; line-height: 24px; padding: 0 5px; margin: 43px 0 0 0;} a#main-banner-2 {display: block; width: 975px; height: 250px; border-radius: 6px; background-size: cover; background-position: left; background-image: url('images/banner2.jpg'); margin: 0 auto;} #our-partners-wrapper {margin-top: 135px; padding-bottom: 70px; background: #F2F2F2;} #our-partners h2 {padding-top: 93px;} .partner {width: 388px; height: 200px; float: left; position: relative;} .partner:nth-of-type(1)::before, .partner:nth-of-type(2)::before, .partner:nth-of-type(4)::before, .partner:nth-of-type(5)::before{content: ""; position: absolute; right: 0; width: 2px; background: #C9C9C9; height: 160px; top: 20px;}{content: ""; position: absolute; right: 0; width: 2px; background: #C9C9C9; height: 160px; top: 20px;} .partner:nth-of-type(1)::after, .partner:nth-of-type(2)::after, .partner:nth-of-type(3)::after{content: ""; position: absolute; bottom: 0; width: 370px; height: 2px !important; background: #C9C9C9; height: 160px; left: 9px;} .partner-image {display: block; height: 100px; width: 300px; background-size: contain; background-position: center; background-repeat: no-repeat; margin: 50px 0 0 50px; float: left;} #brands {margin-top: 140px;} /*Footer*/ #footer-wrapper {margin-top: 130px; padding-top: 70px; background: #32373A; box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.15);} #footer {min-height: 500px;} #footer .container {padding: 0;} #footer .left {width: 280px;} #footer-logo {display: block; width: 272px; height: 65px; background: url('images/logo2.png') no-repeat 100%; float: left;} #footer .logo-text {font-size: 9px; font-family: 'Lato', sans-serif; text-transform: uppercase; color: #EBEBEB; float: right;} #footer .right {width: 480px; margin-top: 25px;} .search-container {width: 277px; border: 1px solid #6B6F72; border-radius: 6px; height: 48px; position: relative; float: left;} .search-container input {display: block; float: left; width: 70%; height: 48px; border: none; text-indent: 20px; background: none; font-weight: 500; font-size: 12px; color: rgba(255, 255, 255, 0.7);} #bottom-search {width: 18px; height: 18px; cursor: pointer; float: right; background: url('images/search-icon.png') no-repeat 100%; margin: 13px 16px 0 0; border: none;} #footer .fdb-btn {float: right; width: 175px; height: 48px; line-height: 48px; font-weight: 500;} #footer-middle {margin-top: 55px; overflow: hidden;} #footer-contacts {float: left;} .footer-block {margin-bottom: 28px;} .footer-block a {display: block; color: #fff; font-size: 18px; font-weight: bold; margin: 0; line-height: 22px; margin-bottom: 3px; } .footer-block span {line-height: 20px; color: #848484; font-family: 'Lato', sans-serif;} #footer-mail::before {content: ""; float: left; background: url('images/mail-bottom.png') no-repeat; width: 25px; height: 23px; margin: 0 13px 0 0;} #footer-mail {display: block; color: #fff; font-size: 16px;} ul#footer-main-menu {list-style: none; margin: 0; padding: 0; float: left;} ul#footer-main-menu li {margin-bottom: 18px;} ul#footer-main-menu li:last-child {margin-bottom: 0;} ul#footer-main-menu li a {color: #b8babb; font-size: 12px; text-transform: uppercase; font-weight: 500; margin-left: 22px;} ul#footer-main-menu li a.active, ul#footer-main-menu li a:hover {color: #fff; margin-left: 0;} ul#footer-main-menu li a.active::before, ul#footer-main-menu li a:hover::before {content: ""; float: left; display: block; width: 9px; height: 9px; border-radius: 50%; background: #46B1DF; margin: 4px 13px 0 0;} ul.footer-second-menu {list-style: none; margin: 0; padding: 0; float: left;} ul.footer-second-menu li {margin-bottom: 28px;} ul.footer-second-menu li:last-child {margin-bottom: 0;} ul.footer-second-menu li a {color: #b8babb; font-size: 12px; font-weight: 500; line-height: 15px;} ul.footer-second-menu li:first-child a {font-size: 14px; color: #fff; text-transform: capitalize; font-weight: bold;} #footer-split {width: 100%; border: 1px solid rgba(128, 128, 128, 0.5); margin-top: 65px;} #copyright {font-size: 12px; font-family: 'Lato', sans-serif; text-align: center; width: 100%; color: #808080; margin: 32px 0 29px;} #footer-contacts {width: 25%;} ul#footer-main-menu {width: 17%;} #second1 {width: 18%;} #second2 {width: 40%;} /*Sliders*/ .slider {height: 1%; margin-top: 110px; position: relative;} .slider .viewport {height: 75px; position: relative;} .slider .buttons { background: #fff; border-radius: 50%; display: block; position: absolute; top: -147px; width: 45px; height: 45px; color: #2C6594; text-align: center; line-height: 45px; text-decoration: none; font-size: 24px; border: 1px solid #2C6594; } #catalog-main .slider .buttons {top: -170px;} .slider .prev {right: 65px;} .slider .next {right: 0;} .slider .buttons:hover {color: #fff; background: #2C6594;} .slider .disable {visibility: hidden;} .slider .overview { list-style: none; position: absolute; padding: 0; margin: 0; left: 0; top: 0; } .slider .overview li {float: left; margin: 0 50px 0 0; padding: 1px; height: 75px; width: 150px;} .slider .overview li a {display: inline-block; background-position: center; background-repeat: no-repeat; background-size: contain; height: 75px; width: 150px;} /*Catalog*/ .category-block {margin-top: 60px;} .category-block.by-form {margin-top: 20px; margin-bottom: 20px;} .category-block.by-class {margin-top: 90px;} .category-block h2.stylyzed {margin-bottom: 50px;} .category-block.by-class h2.stylyzed {margin-bottom: 65px;} .by-industry {margin: -15px 0 15px; text-align: center;} .by-industry .category-item {width: 220px; height: 330px; display: inline-block; padding: 0 18px; background: #46B1DF; color: #fff; position: relative; margin-right: 15px; float: left; margin-bottom: 20px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;} .by-industry .category-item:last-child { margin: 0 40px 0 0; } .by-industry .category-item .img {width: 100%; height: 70px; margin: 25px 0; background-repeat: no-repeat; background-size: contain; background-position: center;} .by-industry .category-item:nth-child(1) .img {background-image: url('images/industry/1.png');} .by-industry .category-item:nth-child(2) .img {background-image: url('images/industry/2.png');} .by-industry .category-item:nth-child(3) .img {background-image: url('images/industry/3.png');} .by-industry .category-item:nth-child(4) .img {background-image: url('images/industry/4.png');} .by-industry .category-item:nth-child(5) .img {background-image: url('images/industry/5.png');} .by-industry .category-item:nth-child(1):hover .img {background-image: url('images/industry/1-active.png');} .by-industry .category-item:nth-child(2):hover .img {background-image: url('images/industry/2-active.png');} .by-industry .category-item:nth-child(3):hover .img {background-image: url('images/industry/3-active.png');} .by-industry .category-item:nth-child(4):hover .img {background-image: url('images/industry/4-active.png');} .by-industry .category-item:nth-child(5):hover .img {background-image: url('images/industry/5-active.png');} .by-industry .category-item p {line-height: 20px; margin: 0;} .by-industry .category-item .white-btn {position: absolute; left: 50%; margin-left: -75px; width: 150px; height: 40px; line-height: 40px; bottom: 35px;} .by-industry .category-item:hover {background: #fff; box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.15); border-radius: 6px; color: #222222;} .by-industry .category-item:hover .white-btn {background: #E03A3E; box-shadow: 0px 6px 14px rgba(0, 0, 0, 0.2); color: #fff; border: none;} #choice-help { width: 870px; min-height: 100px; margin: 0 auto; padding: 50px 100px 55px 40px; border: 1px solid #C4C4C4; border-radius: 6px; position: relative; overflow: hidden; } #choice-help .left {width: 420px;} #choice-help p {font-weight: 500; font-size: 24px; line-height: 29px; margin: 0 0 18px 0;} #choice-help span {font-family: 'Lato', sans-serif; line-height: 20px; color: #222222;} #choice-help .red-btn {width: 185px; height: 48px; line-height: 48px; margin-top: 35px;} #choice-help::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 5px; background: #46B1DF;} #choice-help::after {content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 10px; background: #2C6594;} #choice-help-2 { width: 870px; min-height: 100px; margin: 0 auto; margin-top: 60px; margin-bottom: 50px; padding: 50px 100px 55px 40px; border: 1px solid #C4C4C4; border-radius: 6px; position: relative; overflow: hidden; } #choice-help-2 .left {width: 420px;} #choice-help-2 p {font-weight: 500; font-size: 24px; line-height: 29px; margin: 0 0 18px 0;} #choice-help-2 span {font-family: 'Lato', sans-serif; line-height: 20px; color: #222222;} #choice-help-2 .red-btn {width: 185px; height: 48px; line-height: 48px; margin-top: 35px;} #choice-help-2::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 5px; background: #46B1DF;} #choice-help-2::after {content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 10px; background: #2C6594;} .by-material .category-item {width: 275px; height: 335px; float: left; margin-right: 20px; margin-bottom: 20px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s} .by-material .category-item:nth-child(4), .by-material .category-item:nth-child(8) {margin-right: 0;} .by-material .category-item .img {width: 100%; height: 250px; background-position: center; background-repeat: no-repeat;} .by-material .category-item .caption {width: 100%; height: 85px; background: #F2F2F2; line-height: 85px; font-size: 18px; text-align: center; position: relative;} .by-material .category-item .caption::after {display: block; position: absolute; width: 0px; height: 6px; content: ""; left: 50%; background: #46B1DF; bottom: 0; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s} .by-material .category-item:hover {box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.15); border-radius: 6px;} .by-material .category-item:hover .caption {background: #fff;} .by-material .category-item:hover .caption::after {width: 184px; margin-left: -92px;} .category-block.by-class .by-class {max-width: 1000px; float: right;} .by-class .category-item {display: block; float: left; width: 475px; height: 175px; background: #F2F2F2; margin-bottom: 20px; margin-right: 20px; padding: 40px 0 40px 45px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s} .by-class .category-item:nth-child(2n+2) {margin-right: 0;} .by-class .category-item:hover {background: #46B1DF; box-shadow: 0px 6px 25px rgba(0, 0, 0, 0.15); border-radius: 6px; color: #fff;} .by-class .category-item .img {float: left; height: 100%; width: 100px; background-position: center; background-repeat: no-repeat;} .by-class .category-item:nth-child(1) .img {background-image: url('images/class/1.png');} .by-class .category-item:nth-child(2) .img {background-image: url('images/class/2.png');} .by-class .category-item:nth-child(3) .img {background-image: url('images/class/3.png');} .by-class .category-item:nth-child(4) .img {background-image: url('images/class/4.png');} .by-class .category-item:nth-child(1):hover .img {background-image: url('images/class/1-active.png');} .by-class .category-item:nth-child(2):hover .img {background-image: url('images/class/2-active.png');} .by-class .category-item:nth-child(3):hover .img {background-image: url('images/class/3-active.png');} .by-class .category-item:nth-child(4):hover .img {background-image: url('images/class/4-active.png');} .by-class .category-item p {float: left; font-size: 24px; line-height: 29px; width: 180px; margin: 20px 0 0 50px;} /*Modals*/ .modal-overlay {display: none; width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index: 9999; background: rgba(0, 0, 0, 0.5);} .modal-close {position: absolute; width: 25px; height: 25px; top: 15px; right: 15px; background: url('images/close.png'); cursor: pointer;} .modal-content {display: none; text-align: center; background: #FFFFFF; position: relative; width: 360px; min-height: 300px; top: 50%; left: 50%; margin-top: -200px; margin-left: -180px; padding: 35px; padding-bottom: 25px; border-radius: 10px; box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.15);} .modal-content h5 {font-size: 26px; margin-top: 0px; margin-bottom: 30px;} .modal-content input, textarea {width: 100%; margin-bottom: 15px; text-indent: 20px; border-radius: 4px; border: 1px solid #888;} .modal-content input {height: 40px;} .modal-content textarea {padding-top: 10px;} .modal-content button {height: 45px; line-height: 45px; width: 70%; margin-top: 10px;} /*Adaptive*/ @media screen and (max-width: 768px){ body {min-width: auto;} .container, #main-banner .container {width: 690px !important;} #main-banner .container {position: absolute; height: 100%; left: 50%; margin-left: -445px; top: 0;} #header {height: 110px;} #header .right {display: none;} #header .left {width: 257px;} .header-logo {width: 245px; height: 58px;} #header .logo-text {font-size: 9px;} #header-menu-wrapper {display: none;} #main-banner {width: 760px; height: 464px;} #main-banner-header {width: 688px; font-size: 32px;} #main-banner .left {width: 378px;} #main-banner .right {width: 310px;} ul#main-banner-list {left: 40px; width: 430px;} ul#main-banner-list li {font-size: 16px; height: 22px; line-height: 22px;} ul#main-banner-list li::before {height: 22px; width: 22px;} #main-banner-logo {right: 40px; width: 220px; height: 220px;} } @media screen and (max-width: 768px){ h2.stylyzed {font-size: 22px; line-height: 27px;} .container, #main-banner .container {width: 335px !important;} #main-banner .container {margin-left: -167px;} #header {height: 90px;} #header .logo-text {display: none;} .header-logo {width: 181px; height: 43px;} .header-block {width: 100%; text-align: right; float: none; margin: 0 0 28px;} .header-mail {margin: 0;} #mobile-menu-show {display: block;} #main-banner {height: 540px; width: 100%;} #main-banner-header {width: 100%; font-size: 28px; line-height: 77px;} #main-banner .left, #main-banner .right {width: 100%; height: 77px;} #main-banner-logo {right: auto; top: 210px; left: 50%; margin-left: -87px; width: 175px; height: 175px;} ul#main-banner-list {left: 0; margin-left: -100px; top: 60%;} ul#main-banner-list li {float: none; font-size: 14px; margin-bottom: 11px;} #main-categories {margin-top: 65px;} .by-form .category-item {width: 100%; margin: 0 0 15px 0;} .by-form .category-name {width: 305px; font-size: 16px; height: 84px; line-height: 84px;} #ourspec-wrapper {margin-top: 90px;} #ourspec {margin-top: 75px;} #ourspec .left, #ourspec .right {width: 100%;} #ourspec .ourspec-item {width: 100%; height: auto;} #ourspec .ourspec-item span {margin: 30px 0 20px ;} #main-form {width: 100%; margin: 60px 0 0 0; padding: 32px 20px; height: auto;} #main-form::after {height: 9px;} #main-form span.head {font-size: 18px; line-height: 22px;} #main-form p {margin: 30px 0;} #solutions {margin-top: 90px; margin-bottom: 40px;} .solutions-item {width: 100%; height: auto; margin: 0 0 25px 0;} .solutions-image {height: 220px; background-size: contain;} .solutions-item p {margin: 24px 0 18px; font-size: 14px; line-height: 17px;} a#main-banner-2 {width: 335px; height: 105px;} .partner {width: 50%; text-align: center; height: auto;} .partner::before, .partner::after {display: none;} .partner-image {display: inline-block; float: none; margin: 20px 0; height: 60px; width: 90%; } #brands {margin-top: 100px;} .slider {margin-top: 80px; margin-bottom: 110px;} .slider .buttons {top: 135px !important;} .slider .prev {right: auto; left: 50%; margin-left: -55px;} .slider .next {right: auto; margin-left: 10px;left: 50%;} #footer-wrapper {margin-top: 100px;} #footer .left {width: 272px;} #footer .logo-text {margin-right: 7px;} #footer .right, ul#footer-main-menu, #footer-middle {width: 100%; margin-top: 45px;} .search-container, #footer .fdb-btn, #footer-contacts {width: 100%;} #footer .fdb-btn {margin-top: 15px;} ul.footer-second-menu {display: none;} #copyright {padding: 0 25px;} .category-block {margin-top: 15px;} .by-industry .category-item {width: 100%; height: 280px;} .category-block h2.stylyzed {margin-bottom: 70px;} #choice-help {width: 100%; padding: 34px 22px 40px 22px; } #choice-help::before {height: 7px;} #choice-help::after {height: 15px;} #choice-help .left, #choice-help .right, #choice-help .red-btn {width: 100%;} .category-block.by-material {margin-top: 110px;} .by-material .category-item {width: 100%; margin-right: 0;} .by-class .category-item {width: 100%; height: 140px; padding: 35px 0 35px 25px;} .by-class .category-item .img {width: 70px; background-size: contain;} .by-class .category-item p {margin: 10px 0 0 50px;} } .trans, .trans:hover {-webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;} a.ik.image {display: block; margin-left: 0;} .fs-16 {font-size: 16px;} .section-left-side {width: 60%; float: left;} .section-right-side {width: 40%; float: left;} .links-container {width: 100%; margin-bottom: 15px; min-height: 25px; overflow: hidden;} .links-container a {display: inline-block; float: left; color: #59a8f0; background: #ececec; height: 25px; line-height: 25px; margin-right: 15px; padding: 0 15px; margin-left: 0; font-size: 14px; box-shadow: -3px 0px 5px rgba(0, 0, 0, 0.15); margin-bottom:10px;} .links-container a.parent-dir {margin-right: 20px; text-align: center; box-shadow: 3px 0px 5px rgba(0, 0, 0, 0.15);} .links-container a:hover, .links-container a.current {color: #fff; background: #59a8f0; box-shadow: none;} .section-items {width: 100%; overflow: hidden;} .section-items .category-item {display: block; width: 222px; height: 335px; float: left; margin-bottom: 20px; margin-left: 8px; margin-right: 8px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s} .section-items .category-item .img {width: 100%; height: 250px; background-position: center; background-repeat: no-repeat;} .section-items .category-item .caption {width: 100%; height: 85px; background: #F2F2F2; font-size: 16px; text-align: center; position: relative; display: table; padding: 0 10px;} .section-items .category-item .caption::after {display: block; position: absolute; width: 0px; height: 5px; content: ""; left: 50%; background: #46B1DF; bottom: 0; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s} .section-items .category-item .caption span {display: table-cell; vertical-align: middle;} .section-items .category-item:hover {box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.15); border-radius: 6px;} .section-items .category-item:hover .caption {background: #fff;} .section-items .category-item:hover .caption::after {width: 184px; margin-left: -92px;} #choice-help.in-section {margin-top: 80px;} i.long.arrow.right.icon {padding-top: 5px;} i.checkmark {display: none;} table.blueTable { border: 1px solid #1C6EA4; background-color: #EEEEEE; width: 100%; text-align: left; border-collapse: collapse; } table.blueTable td, table.blueTable th { border: 1px solid #AAAAAA; padding: 3px 2px; text-align:center; } table.blueTable tbody td { font-size: 13px; } table.blueTable tr:nth-child(even) { background: #D0E4F5; } table.blueTable thead { background: #1C6EA4; /*background: -moz-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%); background: -webkit-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%); background: linear-gradient(to bottom, #5592bb 0%, #327cad 66%, #1C6EA4 100%); border-bottom: 2px solid #444444;*/ } table.blueTable thead th { font-size: 16px; font-weight: 500; letter-spacing: 0.03em; color: #FFFFFF; border-left: 2px solid #D0E4F5; } table.blueTable thead th:first-child { border-left: none; } table.blueTable tfoot { font-size: 14px; font-weight: bold; color: #FFFFFF; background: #D0E4F5; background: -moz-linear-gradient(top, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%); background: -webkit-linear-gradient(top, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%); background: linear-gradient(to bottom, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%); border-top: 2px solid #444444; } table.blueTable tfoot td { font-size: 14px; } table.blueTable tfoot .links { text-align: right; } table.blueTable tfoot .links a{ display: inline-block; background: #1C6EA4; color: #FFFFFF; padding: 2px 8px; border-radius: 5px; } @media screen and (max-width: 576px) { .section-left-side, .section-right-side {width: 100%;} .links-container a {width: 100%; text-align: center; margin: 5px 0;} h2.fs-16 {display: inline-block;} .ui.stackable.grid.brand-block .column {width: 50%!important;} .ui.stackable.grid.brand-block .column .segment {margin-bottom: 10px;} #choice-help.in-section {margin-top: 30px;} }