/* general style */ body { margin: 0; padding: 0; box-sizing: border-box; /*font-family: Futura PT,Arial,Helvetica,sans-serif;*/ font-family: 'FTN_demi'; font-weight: 400; color: #212121; } .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6, b, strong { /*font-family: Mont Heavy,Arial,Helvetica,sans-serif;*/ font-family: 'FTN_heavy'; font-weight: 400; } /*.highslide-viewport-size {*/ /* background-color: #000;*/ /*}*/ button, *[type="button"] { appearance: none; -moz-appearance: none; -webkit-appearance: none; } button:focus, input:focus, textarea:focus, .btn:focus, select:focus { outline: 0; box-shadow: none; } ul { list-style-type: none; margin-bottom: 0; padding-left: 0; } a { color: #212121; } .azn { font-family: azn; font-style: normal; } .custom-btn { color: #fff; font-size: 18px; width: 240px; height: 56px; line-height: 56px; background-color: #22b0f3; -webkit-box-shadow: 0 20px 30px -18px #22b0f3; -moz-box-shadow: 0 20px 30px -18px #22b0f3; box-shadow: 0 20px 30px -18px #22b0f3; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; -webkit-transition: all .25s ease-in-out; -moz-transition: all .25s ease-in-out; -o-transition: all .25s ease-in-out; transition: all .25s ease-in-out; display: flex; align-items: center; justify-content: center; margin-bottom: 70px; } .custom-btn:hover { background-color: #0090d5; color: #fff; } .owl-stage-outer { margin-bottom: 0; } .owl-nav.disabled, .owl-dots.disabled { display: none; } .dropdown-menu-wrap .dropdown-toggle::after { content: ''; border: 1px solid #fff; border-width: 0 2px 2px 0; padding: 2px; -webkit-transform: rotate(45deg); transform: rotate(45deg); position: relative; top: -3px; left: 2px; -webkit-transition: transform 300ms ease-in-out 0s; -moz-transition: transform 300ms ease-in-out 0s; -o-transition: transform 300ms ease-in-out 0s; transition: transform 300ms ease-in-out 0s; } .dropdown-menu-wrap .dropdown-menu { top: calc(100% - 2px); display: block; -webkit-transform: scale(1, 0); -ms-transform: scale(1, 0); transform: scale(1, 0); padding: 0; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; border: none; border-top: 1px solid #2354a5; -webkit-box-shadow: 0 15px 40px 0 #cdd1d3; -moz-box-shadow: 0 15px 40px 0 #cdd1d3; box-shadow: 0 15px 40px 0 #cdd1d3; -webkit-transform-origin: top; -ms-transform-origin: top; transform-origin: top; -webkit-transition: all 200ms ease-in-out 0s; -moz-transition: all 200ms ease-in-out 0s; -o-transition: all 200ms ease-in-out 0s; transition: all 200ms ease-in-out 0s; } .dropdown-menu-wrap .dropdown-menu .dropdown-item { font-size: 14px; padding: 10px 20px; } .dropdown-menu-wrap .dropdown-menu .dropdown-item:hover, .dropdown-menu-wrap .dropdown-menu .dropdown-item:focus { background-color: #f8f9fa; } .dropdown-menu-wrap:hover .dropdown-toggle::after, .dropdown-menu-wrap .dropdown-toggle.down-arrow::after { -webkit-transform: rotate(225deg); transform: rotate(225deg); top: 0; } .dropdown-menu-wrap:hover .dropdown-menu { display: block; -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); } .dropdown-item.active, .dropdown-item:active { background-color: transparent; } .fixed-nums { position: fixed; bottom: 0; z-index: 999; display: none; } .fixed-nums .wp { height: 100%; text-align: center; background-color: #0DC143; color: #fff; padding: 18px 5px; font-weight: bold; font-size: 14px; cursor: pointer; } .fixed-nums .wp a { color: #fff; text-decoration: none; cursor: pointer; } /* header style */ header { background-image: -moz-linear-gradient(45deg, #4a8dc6, #74a4e1, #4687ca); background-image: -webkit-linear-gradient(45deg, #4a8dc6, #74a4e1, #4687ca); background-image: linear-gradient(45deg, #4a8dc6, #74a4e1, #4687ca); -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } header.sticky { position: fixed; width: 100%; z-index: 10000; background-image: none; background-color: #fff; -webkit-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.07); -moz-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.07); box-shadow: 0 4px 4px rgba(0, 0, 0, 0.07); } header.sticky #navbarMenu .dropdown-toggle::after { border-color: #212121; } header.sticky #navbarMenu .nav-icon, header.sticky .service-btn { background-color: #fafafa !important; } header.sticky #navbarMenu .nav-link { color: #212121 !important; } header.sticky .right-side .call-btn, header.sticky .right-side .icon-block { color: #548ace !important; } header.sticky .right-side .calc-btn { background-color: #548ace !important; color: #fff; } header.sticky .right-side .calc-btn:hover { background-color: #2354a5 !important; } header .navbar { padding: 6px 40px; } header .navbar #navbarMenu .nav-item { display: flex; flex-wrap: wrap; align-items: center; margin-right: 10px; cursor: pointer; } header .navbar #navbarMenu .nav-item .nav-icon { width: 38px; height: 38px; -webkit-border-radius: 27%; -moz-border-radius: 27%; border-radius: 27%; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; padding: 8px; background-color: #b0c9e8; margin-right: 5px; } header .navbar #navbarMenu .nav-item .nav-icon img { width: 100%; } header .navbar #navbarMenu .nav-item .nav-link { color: #fff; font-size: 18px; padding-top: 20px; padding-bottom: 20px; } /*header .navbar .right-side .icon-block span {*/ /* font-size: 12px;*/ /* color: white;*/ /* font-weight: 600;*/ /* margin-top: 6px;*/ /* transition: 0.3s;*/ /*}*/ header .navbar .right-side { display: flex; align-items: center; } header .navbar .right-side .icon-block { position: relative; } header .navbar .right-side .icon-block .languages .lang-dropdown { height: auto; display: flex; justify-content: center; border-radius: 10px; flex-direction: column; position: absolute; background-color: white; overflow: hidden; z-index: 10; display: none; top: 62px; z-index: 25; right: initial; left: -40px; } header .navbar .right-side .icon-block .languages .lang-dropdown .langs { width: 100%; padding: 0; margin: 0; } header .navbar .right-side .icon-block .languages .lang-dropdown .langs li { -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } header .navbar .right-side .icon-block .languages .lang-dropdown .langs li img { width: 20px; height: 20px; object-fit: cover; margin-right: 5px; } header .navbar .right-side .icon-block .languages .lang-dropdown .langs li a { color: #666666; font-size: 13px; font-weight: 600; padding: 6px 11px 6px 8px; display: flex; align-items: center; } header .navbar .right-side .icon-block .languages .lang-dropdown .langs li:hover { background-color: #f5f5f5; } header .navbar .right-side .call-btn, header .navbar .right-side .icon-block { color: #fff; margin-right: 15px; padding: 0; display: inline-flex; flex-direction: column; align-items: center; cursor: pointer; } header .navbar .right-side .call-btn i, header .navbar .right-side .icon-block i { margin-top: 6px; } header .navbar .right-side .call-btn span, header .navbar .right-side .icon-block span { font-size: 12px; font-weight: 600; margin-top: 6px; } header .navbar .right-side .calc-btn { background-color: #fcde4b; padding: 9px 40px; font-weight: 500; } header .navbar .right-side .calc-btn:hover { background-color: #e2bd03; } header .service-btn { background-color: #b0c9e8; padding: 0 6px !important; } header .service-btn span { margin-top: 3px !important; } header .menu-wrap { width: 25px; height: 30px; display: flex; flex-direction: column; justify-content: space-between; cursor: pointer; -webkit-transition: transform 300ms ease-out; -moz-transition: transform 300ms ease-out; -o-transition: transform 300ms ease-out; transition: transform 300ms ease-out; padding: 5px 0; } header .menu-wrap .line-menu { background-color: #fff; -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; width: 100%; height: 2px; } header .menu-wrap .line-menu:nth-child(3) { width: 50%; margin-left: auto; } header .closeM, header .call-mobile, header .lang-i { display: none !important; } /* main section style */ #main { height: 680px; overflow: hidden; position: relative; } #main .mainCarousel { position: relative; } #main .mainCarousel .item { height: 680px; position: relative; background-repeat: no-repeat; background-size: cover; } #main .mainCarousel .item .slide-text-wrapper { position: absolute; top: 0; left: 0; padding: 0 0 50px 140px; width: 50%; height: 100%; background: -moz-linear-gradient(to right, #fff 20%, #fff 20%, rgba(255, 255, 255, 0.9) 60%, rgba(0, 0, 0, 0) 100%); background: -webkit-linear-gradient(90deg, #fff 20%, #fff 20%, rgba(255, 255, 255, 0.9) 60%, rgba(0, 0, 0, 0) 100%); background: linear-gradient(to right, #fff 20%, #fff 20%, rgba(255, 255, 255, 0.9) 60%, rgba(0, 0, 0, 0) 100%); -webkit-filter: drop-shadow(80px 80px 80px rgba(255, 255, 255, 0.99)); filter: drop-shadow(80px 80px 80px rgba(255, 255, 255, 0.99)); display: flex; flex-wrap: wrap; align-items: flex-end; z-index: 2; } #main .mainCarousel .item .slide-text-wrapper .slide-text { width: 90%; } #main .mainCarousel .item .slide-text-wrapper .slide-text h3 { color: #2a3139; font-weight: 500; font-size: 22px; height: 45px; } #main .mainCarousel .item .slide-text-wrapper .slide-text h1 { color: #2a3139; font-size: 27px; font-weight: 700; text-transform: uppercase; margin-bottom: 60px; overflow: hidden; } #main .mainCarousel .item .slide-text-wrapper .slide-text p { margin-bottom: 0; color: #919fa9; font-size: 16px; height: 100px; margin-bottom: 60px; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; } #main .mainCarousel .item .slide-text-wrapper .slide-text p span { font-size: 50px; font-weight: 500; } #main .controls-wrapper { position: absolute; left: 55%; bottom: 5%; z-index: 2; } #main .controls-wrapper #customNavs { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; } #main .controls-wrapper #customNavs .owl-nav { width: 44px; height: 44px; background-color: rgba(255, 255, 255, 0.8); -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -webkit-transition: background-color .4s ease,-webkit-transform .4s ease; transition: background-color .4s ease,-webkit-transform .4s ease; transition: background-color .4s ease,transform .4s ease; transition: background-color .4s ease,transform .4s ease,-webkit-transform .4s ease; position: relative; cursor: pointer; } #main .controls-wrapper #customNavs .owl-nav:before { content: ''; position: absolute; top: 40%; border: 1px solid #39485b; border-width: 0 2px 2px 0; -webkit-border-radius: 0 2px 2px 2px; -moz-border-radius: 0 2px 2px 2px; border-radius: 0 2px 2px 2px; padding: 4px; } #main .controls-wrapper #customNavs .owl-nav.owl-prev:before { -webkit-transform: rotate(135deg); transform: rotate(135deg); left: 44%; } #main .controls-wrapper #customNavs .owl-nav.owl-next:before { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); left: 36%; } #main .controls-wrapper #customDots { padding: 0 15px; } #main .controls-wrapper #customDots .owl-dot { display: inline-block; width: 8px; height: 8px; background-color: #39485b; border: none; opacity: 1; position: relative; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -webkit-transition: background-color .4s ease; -moz-transition: background-color .4s ease; -o-transition: background-color .4s ease; transition: background-color .4s ease; margin: 0 15px; cursor: pointer; } #main .controls-wrapper #customDots .owl-dot svg { stroke: #f8f8f8; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); fill: transparent; stroke-width: 3px; stroke-dasharray: 94; stroke-dashoffset: 94; } #main .controls-wrapper #customDots .owl-dot:before { content: ""; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 30px; height: 30px; border: 1px solid #39485b; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; opacity: 0; } #main .controls-wrapper #customDots .owl-dot.active { background-color: #f8f8f8; } #main .controls-wrapper #customDots .owl-dot.active:before { opacity: 1; -webkit-transition: opacity .2s ease; -moz-transition: opacity .2s ease; -o-transition: opacity .2s ease; transition: opacity .2s ease; } #main .controls-wrapper #customDots .owl-dot.active svg { -webkit-animation: fill-button 5s linear forwards; animation: fill-button 5s linear forwards; } @-webkit-keyframes fill-button { 0% { stroke-dashoffset: 94; } 100% { stroke-dashoffset: 0; } } @-moz-keyframes fill-button { 0% { stroke-dashoffset: 94; } 100% { stroke-dashoffset: 0; } } @keyframes fill-button { 0% { stroke-dashoffset: 94; } 100% { stroke-dashoffset: 0; } } /* advantages section style */ #advantages { background-color: #f6f6f6; padding-top: 15px; } #advantages .container { max-width: 100%; padding: 0 20px; } #advantages .advantages-wrapper { display: flex; flex-wrap: nowrap; justify-content: center; width: 100%; overflow-x: hidden; } #advantages .advantageCarousel { display: flex; flex-wrap: nowrap; overflow-x: scroll; -webkit-overflow-scrolling: touch; padding: 20px 0; } #advantages .advantageCarousel::-webkit-scrollbar { width: 12px; } #advantages .advantageCarousel::-webkit-scrollbar:horizontal { height: 8px; } #advantages .advantageCarousel::-webkit-scrollbar-thumb { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; background: rgba(224, 139, 47, 0.8); -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5); } #advantages .advantageCarousel::-webkit-scrollbar-thumb:window-inactive { background: rgba(224, 139, 47, 0.8); } #advantages .advantageCarousel::-webkit-scrollbar-button { width: 100px; } #advantages .advantageCarousel .item, .services-boxes .item { width: 200px; position: relative; } #advantages .advantageCarousel .item a, .services-boxes .item a { display: block; -webkit-transition: 300ms all ease; -moz-transition: 300ms all ease; -o-transition: 300ms all ease; transition: 300ms all ease; } #advantages .advantageCarousel .item a .img-wrap, .services-boxes .item a .img-wrap { width: 160px; height: 160px; overflow: hidden; margin: 0 auto; } #advantages .advantageCarousel .item a .img-wrap img, .services-boxes .item a .img-wrap img { width: 120px; height: 120px; position: absolute; top: 3px; left: 20px; right: 20px; margin: 0 auto; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; object-fit: cover; } #advantages .advantageCarousel .item a .img-wrap svg, .services-boxes .item a .img-wrap svg { fill: none; stroke: #e08b2f; stroke-width: 2px; stroke-dasharray: 0px,1px; stroke-dashoffset: 0; stroke-linecap: round; } #advantages .advantageCarousel .item a h6, .services-boxes .item a h6 { margin: -15px 0 0; font-size: 13px; text-transform:uppercase; line-height: 16px; white-space: normal; text-align: center; font-weight: 700; font-family: 'FTN_heavy'; } #advantages .advantageCarousel .item a.active svg, #advantages .advantageCarousel .item a:hover svg, .services-boxes .item a.active svg, .services-boxes .item a:hover svg { -webkit-animation: loading 2500ms ease-out infinite alternate; animation: loading 2500ms ease-out infinite alternate; } @-webkit-keyframes loading { 100% { stroke-dasharray: 4px,6px; -webkit-transform: rotate(180 115 115); transform: rotate(180 115 115); } } @-moz-keyframes loading { 100% { stroke-dasharray: 4px,6px; -webkit-transform: rotate(180 115 115); transform: rotate(180 115 115); } } @keyframes loading { 100% { stroke-dasharray: 4px,6px; -webkit-transform: rotate(180 115 115); transform: rotate(180 115 115); } } #advantages .advantageCarousel .owl-nav button { border: none; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; height: 100%; color: #cecece; background-color: transparent; font-size: 44px; top: 0; margin: 0; padding: 0; } #advantages .advantageCarousel .owl-nav button.owl-prev { background-image: -moz-linear-gradient(90deg, #f6f6f6 68%, transparent); background-image: -webkit-linear-gradient(90deg, #f6f6f6 68%, transparent); background-image: linear-gradient(90deg, #f6f6f6 68%, transparent); width: 140px; left: 0; } #advantages .advantageCarousel .owl-nav button.owl-prev span { right: 52px; } #advantages .advantageCarousel .owl-nav button.owl-next { background-image: -moz-linear-gradient(90deg, transparent, #f6f6f6 32%); background-image: -webkit-linear-gradient(90deg, transparent, #f6f6f6 32%); background-image: linear-gradient(90deg, transparent, #f6f6f6 32%); width: 130px; right: 0; } #advantages .advantageCarousel .owl-nav button.owl-next span { left: 52px; } #advantages .advantageCarousel .owl-nav button.disabled { display: none; } #advantages .advantageCarousel .owl-nav button span { position: absolute; top: 38px; } /* products section and projects section style */ #products, #projects { background-color: #f6f6f6; padding-top: 30px; } #projects { position: relative; } #projects .project-box { margin: 30px 0; } #products .left-side, #projects .right-side { position: relative; z-index: 2; } #products .left-side { left: 200px; } #projects .right-side { left: -100px; } #products .left-side .all-category-wrapper, #projects .right-side .all-category-wrapper { width: 390px; height: 670px; margin-top: 130px; -webkit-box-shadow: 0 30px 43px -8px #c4c4c4; box-shadow: 0 30px 43px -8px #c4c4c4; position: relative; overflow: hidden; } #projects .right-side .all-category-wrapper { height: 620px; } #products .left-side .all-category-wrapper:before, #projects .right-side .all-category-wrapper:before { content: ""; position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: -webkit-gradient(linear, left bottom, left top, color-stop(40%, #000), to(transparent)); background: linear-gradient(0deg, #000 40%, transparent); } #products .left-side .all-category-wrapper img { margin-left: -170px; } #projects .right-side .all-category-wrapper img { margin-left: -40px; margin-top: -100px; } #products .left-side .all-category-wrapper .link-btn, #projects .right-side .all-category-wrapper .link-btn { width: 48px; height: 48px; background-color: #fff; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; position: absolute; top: 44px; left: 44px; } #products .left-side .all-category-wrapper .link-btn:before, #projects .right-side .all-category-wrapper .link-btn:before { content: ''; position: absolute; top: 45%; left: 37%; border: 1px solid #39485b; border-width: 0 2px 2px 0; -webkit-border-radius: 0 2px 2px 2px; -moz-border-radius: 0 2px 2px 2px; border-radius: 0 2px 2px 2px; padding: 3px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } #projects .right-side .all-category-wrapper .link-btn:before { border-width: 2px 0 0 2px; left: 43%; } #products .left-side .all-category-wrapper .text-wrap, #projects .right-side .all-category-wrapper .text-wrap { position: absolute; left: 35px; right: 35px; bottom: 35px; color: #fff; } #products .left-side .all-category-wrapper .text-wrap h2, #projects .right-side .all-category-wrapper .text-wrap h2 { font-family: 'FTN_heavy'; font-size: 40px; font-weight: 700; margin-bottom: 20px; } #products .left-side .all-category-wrapper .text-wrap p, #projects .right-side .all-category-wrapper .text-wrap p { font-size: 20px; line-height: 28px; margin-bottom: 30px; } #products .left-side .all-category-wrapper .text-wrap .more-btn, #projects .right-side .all-category-wrapper .text-wrap .more-btn { width: 100%; font-size: 20px; font-weight: 500; border: 1px solid #afbbc6; color: #fff; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; padding: 16px; -webkit-transition: all 200ms ease-in-out 0s; -moz-transition: all 200ms ease-in-out 0s; -o-transition: all 200ms ease-in-out 0s; transition: all 200ms ease-in-out 0s; } #products .left-side .all-category-wrapper .text-wrap .more-btn:hover, #projects .right-side .all-category-wrapper .text-wrap .more-btn:hover { background-color: #fff; color: #2354a5; } #products .right-side, #projects .projects-box-wrapper { background-color: #fff; padding: 82px 12.5% 82px 17.7%; position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; } #products .right-side { -webkit-border-top-left-radius: 15px; -moz-border-top-left-radius: 15px; border-top-left-radius: 15px; } #projects .projects-box-wrapper { -webkit-border-top-right-radius: 15px; -moz-border-top-right-radius: 15px; border-top-right-radius: 15px; padding: 82px 15.7% 82px 5.5%; } #products .right-side .product-wrapper { margin: 30px 15px; width: calc(33.33% - 30px); } #products .right-side .product-wrapper a, .category-content .product-wrapper a { display: block; } #products .right-side .product-wrapper .product-wrap, .category-content .product-wrapper .product-wrap { background-color: #f6f6f6; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; height: 270px; position: relative; } #products .right-side .product-wrapper .product-wrap a, .category-content .product-wrapper .product-wrap a{ padding: 60px 12px; height: 100%; display: flex; align-items: center; } #products .right-side .product-wrapper .product-wrap a .product-advantage, .category-content .product-wrapper .product-wrap a .product-advantage { position: absolute; top: 15px; left: 15px; display: flex; align-items: center; max-width: 50%; } #products .right-side .product-wrapper .product-wrap a .product-advantage img, .category-content .product-wrapper .product-wrap a .product-advantage img { width: 16px; margin-right: 5px; } #products .right-side .product-wrapper .product-wrap a .product-advantage span, .category-content .product-wrapper .product-wrap a .product-advantage span { font-size: 12px; line-height: 12px; } #products .right-side .product-wrapper .product-wrap a .product-advantage.free-installation span, .category-content .product-wrapper .product-wrap a .product-advantage.free-installation span { color: #808080; } #products .right-side .product-wrapper .product-wrap a .product-advantage.self-clean span, .category-content .product-wrapper .product-wrap a .product-advantage.self-clean span { color: #2354A5; } #products .right-side .product-wrapper .product-wrap a .img-wrap, .category-content .product-wrapper .product-wrap a .img-wrap { overflow: hidden; height: 140px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } #products .right-side .product-wrapper .product-wrap a .img-wrap img, .category-content .product-wrapper .product-wrap a .img-wrap img { width: 100%; height: 100%; object-fit: cover; -webkit-transition: -webkit-transform .25s ease-in-out; transition: -webkit-transform .25s ease-in-out; transition: transform .25s ease-in-out; transition: transform .25s ease-in-out, -webkit-transform .25s ease-in-out; } #products .right-side .product-wrapper .product-wrap a:hover .img-wrap img, .category-content .product-wrapper .product-wrap a:hover .img-wrap img { -webkit-transform: scale(1.1); transform: scale(1.1); } #products .right-side .product-wrapper .product-info h5, .category-content .product-wrapper .product-info h5 { font-family: 'FTN_heavy'; font-size: 18px; padding: 20px 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-height: 65px; } #services { background-color: #f6f6f6; padding: 90px 0; position: relative; } #services h6 { font-family: 'FTN_heavy'; font-size:26px; line-height: 1; letter-spacing: .02em; -webkit-transform: rotate(-90deg) translateY(-50%); transform: rotate(-90deg) translateY(-50%); -webkit-transform-origin: left; transform-origin: left; position: absolute; top: 50%; left: 5.5%; z-index: 2; } #services .services-list { padding: 0 10px; } #services .services-list li { background: url("../img/check.png") no-repeat; background-size: 22px; background-position: 0px 5px; padding-left: 34px; margin-bottom: 30px; font-size: 20px; font-weight: 500; } .services-boxes .item { margin: 0 auto 30px; } /* about section style */ #about { background: url("../img/parallax2.jpg") no-repeat; background: url("../img/parallax1.jpg") no-repeat; background-size: cover; background-attachment: fixed; padding: 90px 0; color: #fff; position: relative; } #about::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(38, 38, 38, 0.8); } #about .about-info { position: relative; z-index: 1; width: 100%; } #about .about-info h2 { font-family: 'FTN_heavy'; font-size: 26px; line-height: 1.5; margin-bottom: 30px; } #about .about-info article { font-size: 18px; line-height: 2; margin-bottom: 15px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; } /* partners section style */ #partners { background-color: #fff; padding: 90px 0 75px; position: relative; } #partners h6 { font-family: 'FTN_heavy'; font-size:26px; line-height: 1; letter-spacing: .02em; -webkit-transform: rotate(-90deg) translateY(-50%); transform: rotate(-90deg) translateY(-50%); -webkit-transform-origin: left; transform-origin: left; position: absolute; top: 50%; left: 5.5%; } #partners .partners-wrapper .partner-box { padding: 15px; margin: 15px 0; background-color: #fff; border: 1px solid #e6e6e6; height: 150px; border-radius: 4px; cursor: pointer; } #partners .partners-wrapper .partner-box img { width: 100%; height: 100%; object-fit: contain; filter: grayscale(100%); opacity: 0.3; transition: 300ms all ease; } #partners .partners-wrapper .partner-box:hover img { filter: none; opacity: 1; } /* call modal */ .call-modal-wrapper { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .8); z-index: 999999999; overflow-y: hidden; } .call-modal-wrapper .call-modal { width: 400px; height: max-content; background-color: #fff; -webkit-border-radius: 5px 5px 0 0; -moz-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .call-modal-wrapper .call-modal .modal-head { padding: 22px; color: #fff; font-weight: 600; background-color: #008000; -webkit-border-radius: 5px 5px 0 0; -moz-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0; position: relative; } .call-modal-wrapper .call-modal .modal-head .close { position: absolute; top: -10px; right: 7px; background-color: #e8e8e8; color: #888888; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; padding: 5px; width: 20px; height: 20px; opacity: 1; font-size: 12px; cursor: pointer; display: flex; justify-content: center; align-items: center; } .call-modal-wrapper .call-modal .modal-body { padding: 10px 50px; } /* question */ #question { /* background: url("../img/bg-question.jpg") no-repeat; */ background-size: cover; background-position: center; padding: 30px 0px; position: relative; background-attachment: fixed; } #question .question-overlay { width: 100%; height: 100%; background-color: #5aa30b9e; background-color: #5aa30bc2; position: absolute; z-index: 1; top: 0; } #question .content { display: flex; justify-content: space-between; align-items: center; } #question .content .question-text { z-index: 10; } #question .content .question-text h1 { font-size: 36px; color: #ffffff; font-weight: 700; } #question .content .question-text p { margin: 20px 0 0; font-size: 20px; color: #ebebeb; font-weight: 400; } #question .content .question-btn { z-index: 10; } #question .content .question-btn a { background-color: #fff; padding: 16px 50px; font-size: 16px; color: #606160; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; font-weight: 600; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; border: none; webkit-animation: play 2s ease infinite; -moz-animation: play 2s ease infinite; animation: play 2s ease infinite; } #question .content .question-btn a:hover { background-color: rgba(225, 225, 225, 0.9); } @keyframes play { 0% { transform: scale(1); } 15% { -webkit-box-shadow: 0 0 0 5px rgba(52, 95, 7, 0.2); -moz-box-shadow: 0 0 0 5px rgba(52, 95, 7, 0.2); box-shadow: 0 0 0 5px rgba(52, 95, 7, 0.2); } 25% { -webkit-box-shadow: 0 0 0 10px rgba(52, 95, 7, 0.2), 0 0 0 20px rgba(52, 95, 7, 0.1); -moz-box-shadow: 0 0 0 10px rgba(52, 95, 7, 0.2), 0 0 0 20px rgba(52, 95, 7, 0.1); box-shadow: 0 0 0 10px rgba(52, 95, 7, 0.2), 0 0 0 20px rgba(52, 95, 7, 0.1); } 25% { -webkit-box-shadow: 0 0 0 15px rgba(52, 95, 7, 0.2), 0 0 0 30px rgba(52, 95, 7, 0.1); -moz-box-shadow: 0 0 0 15px rgba(52, 95, 7, 0.2), 0 0 0 30px rgba(52, 95, 7, 0.1); box-shadow: 0 0 0 15px rgba(52, 95, 7, 0.2), 0 0 0 30px rgba(52, 95, 7, 0.1); } } /* footer style */ footer { background-color: #f6f6f6; padding: 50px 15px 40px; color: #a6a6a6; font-size: 12px; line-height: 14px; } footer span img { margin-left: 5px; } footer span.siteBy { width: 17%; text-align: right; } footer .sosial-media-wrapper { display: flex; flex-direction: column; justify-content: center; align-items: center; } footer .sosial-media-wrapper .social-media { display: flex; flex-wrap: wrap; align-items: center; } footer .sosial-media-wrapper .social-media .social-icon { width: 28px; height: 28px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; margin: 0 6px; } footer .sosial-media-wrapper .social-media .social-icon a { display: flex; align-items: center; justify-content: center; height: 100%; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; color: #fff; position: relative; } footer .sosial-media-wrapper .social-media .social-icon a::before { content: ""; position: absolute; width: 100%; height: 100%; background-size: 300%; background-position: 0% 0%; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; transition: background-position 0.55s cubic-bezier(0.79, 0.14, 0.15, 0.86); } footer .sosial-media-wrapper .social-media .social-icon a:hover::before { background-position: top right; } footer .sosial-media-wrapper .social-media .social-icon a i { position: relative; z-index: 1; } footer .sosial-media-wrapper .social-media .social-icon:nth-child(1) a::before { background-image: -moz-linear-gradient(45deg, #a6a6a6 0%, #a6a6a6 49%, #5F7AAE 50%); background-image: -webkit-linear-gradient(45deg, #a6a6a6 0%, #a6a6a6 49%, #5F7AAE 50%); background-image: linear-gradient(45deg, #a6a6a6 0%, #a6a6a6 49%, #5F7AAE 50%); } footer .sosial-media-wrapper .social-media .social-icon:nth-child(2) a::before { background-image: -moz-linear-gradient(45deg, #a6a6a6 0%, #a6a6a6 49%, #e04340 50%); background-image: -webkit-linear-gradient(45deg, #a6a6a6 0%, #a6a6a6 49%, #e04340 50%); background-image: linear-gradient(45deg, #a6a6a6 0%, #a6a6a6 49%, #e04340 50%); } footer .sosial-media-wrapper .social-media .social-icon:nth-child(3) a::before { background-image: -moz-linear-gradient(45deg, #a6a6a6 0%, #a6a6a6 49%, #00acee 50%); background-image: -webkit-linear-gradient(45deg, #a6a6a6 0%, #a6a6a6 49%, #00acee 50%); background-image: linear-gradient(45deg, #a6a6a6 0%, #a6a6a6 49%, #00acee 50%); } footer .sosial-media-wrapper .social-media .social-icon:nth-child(4) a::before { background-image: -moz-linear-gradient(45deg, #a6a6a6 0%, #a6a6a6 49%, #c4302b 50%); background-image: -webkit-linear-gradient(45deg, #a6a6a6 0%, #a6a6a6 49%, #c4302b 50%); background-image: linear-gradient(45deg, #a6a6a6 0%, #a6a6a6 49%, #c4302b 50%); } footer .sosial-media-wrapper span { margin-top: 6px; } /* projects */ .project-box { margin: 15px 0; } .project-box a { display: block; } .project-box .card-img { position: relative; width: 100%; height: 250px; overflow: hidden; border: 1px solid #fafafa; } .project-box .card-img img { width: 100%; height: 100%; object-fit: cover; border-top-left-radius: calc(.25rem - 1px); border-top-right-radius: calc(.25rem - 1px); } .project-box .card-body { background-color: #f6f6f6; padding: 15px 20px; } .project-box .card-title { text-transform: uppercase; font-size: 12px; margin-bottom: 3px; height: 30px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .project-box .card-title .card-icon { width: 8px; height: 8px; background: #e91b22; border-radius: 50%; display: inline-block; position: relative; transform: translateY(2px); top: -3px; margin-right: 8px; -webkit-transition: 300ms all ease-in-out; -moz-transition: 300ms all ease-in-out; -o-transition: 300ms all ease-in-out; transition: 300ms all ease-in-out; } .project-box:hover .card-icon { background: #5091c8; } /* inside pages */ .page-general .cover-wrapper { width: 100%; height: 300px; position: relative; background-repeat: no-repeat; background-size: cover; } .page-general .cover-wrapper::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(38, 38, 38, 0.6); } .page-general .page-content { padding: 50px 0 70px; background-color: #f6f6f6; } .page-general .page-content .content-body { padding: 40px; } .products-list .full-content .crop { display: none; } #staticPages .page-content .content-body .quote, .products-list .quote { display: flex; flex-wrap: wrap; justify-content: center; } #staticPages .page-content .content-body .quote .crop, .products-list .quote .crop { width: calc(33.33% - 30px); margin: 15px; height: 250px; } .products-list .quote .crop { position: relative; display: block; } .certificate-dif .quote .crop { width: 70% !important; height: auto !important; } #staticPages .page-content .content-body .quote .crop img, .products-list .quote .crop img { width: 100%; height: 100%; object-fit: cover; } .products-list .quote .crop .highslide-caption { display: none; } .products-list .quote .crop p { display: none; } .products-list .quote .quote { width: 100%; } .products-list .quote .quote .crop p { font-weight: 600; font-size: 13px; position: absolute; bottom: 0; left: 0; background-image: -moz-linear-gradient(to bottom, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0.5) 60%, rgba(0, 0, 0, 0.8) 100%); background-image: -webkit-linear-gradient(to bottom, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0.5) 60%, rgba(0, 0, 0, 0.8) 100%); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0.5) 60%, rgba(0, 0, 0, 0.8) 100%); text-align: center; padding: 45px 0 13px 0; color: #fff; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; margin-bottom: 0; width: 100%; cursor: pointer; text-transform: uppercase; display: block !important; } .certificate-dif h5 { text-align: center; } .page-general .this-content { background-color: #fff; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; overflow: hidden; } .page-general .this-content .title-wrap { width: 100%; padding: 105px 0; position: relative; background-repeat: no-repeat; background-size: cover; } #staticPages .cover-wrapper, #staticPages .this-content .title-wrap { background-image: url('../img/about.jpg'); } #catPages .cover-wrapper, #catPages .this-content .title-wrap, #fullStory .cover-wrapper, #fullStory .this-content .title-wrap { background-image: url('../img/slide2.png'); } #catPages.projects-cover .cover-wrapper, #catPages.projects-cover .this-content .title-wrap, #fullStory.projects-cover .cover-wrapper, #fullStory.projects-cover .this-content .title-wrap { background-image: url('../img/projects.jpg'); } .page-general .this-content .title-wrap::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(99, 127, 156, .8); } .solla ul li { font-size:18px !important; text-align:left !important; } .page-general .this-content .title-wrap .page-title { width: 100%; font-weight: 500; font-size: 34px; color: #fff; text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; margin-bottom: 0; padding: 0 15px; } .page-general .this-content ul li, .products-list .full-content h3 { padding-left: 35px; margin: 10px 0; font-size:18px; } .products-list .full-content h3 { padding-left: 0; width: 90%; margin: 10px auto; text-align: center; } .page-general .this-content ul li::before, .products-list .full-content h3::before { content: ""; width: 16px; height: 16px; border: 4px solid #22b0f3; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; display: inline-block; margin: 0 7px -2px 0; } .page-general .dif-style ul li { background: url(../img/check.png) no-repeat; background-size: 18px; background-position: 0px 5px; } .page-general .dif-style ul li::before { content: none; } .page-general .info-others { padding-left: 70px; } .page-general .info-others h4 { font-size: 24px; line-height: 24px; margin-bottom: 20px; font-weight: 500; font-family: 'FTN_heavy'; } .page-general .info-others .others-list { margin: 20px 0 32px; } .page-general .info-others .others-list li { margin-bottom: 22px; position: relative; } .page-general .info-others .others-list li:last-child { margin-bottom: 0; } .page-general .info-others .others-list li a { color: #97a4af; font-size: 20px; position: relative; -webkit-transition: color .25s ease-in-out; -moz-transition: color .25s ease-in-out; -o-transition: color .25s ease-in-out; transition: color .25s ease-in-out; } .page-general .info-others .others-list li a:hover { color: #00a0eb; } .page-general .info-others .others-list li a.active { color: #212121 !important; } .page-general .info-others .others-list li a.active::before { position: absolute; content: ""; width: 2px; height: 24px; background: #22b0f3; left: -21px; top: 1px; } .category-content #dle-content { width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; } .category-content .product-wrapper { margin: 15px; width: calc(25% - 30px); } .full-content .crop { display: flex; justify-content: center; } .full-content .crop img { width: auto; height: 210px; object-fit: cover; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; -webkit-transition: 300ms all ease; -moz-transition: 300ms all ease; -o-transition: 300ms all ease; transition: 300ms all ease; } .full-content .crop img:hover { opacity: .6; } .dif-news h4 { text-align: center; margin-bottom: 15px; font-size: 26px; } .dif-news .quote { flex-wrap: nowrap; } .dif-news .quote .quote { display: block; width: 50%; } .dif-news .quote .quote:first-child { padding-right: 7.5px; } .dif-news .quote .quote:last-child { padding-left: 7.5px; } .dif-news .quote .quote .crop { width: 100%; margin: 0; } #contactPage #map { width: 100%; height: 350px; } #map .gm-style-mtc, #map .gm-control-active.gm-fullscreen-control, #map .gm-svpc, #map .gmnoprint, #map .gm-style-cc, #map a[rel~="noopener"] { display: none !important; } #contactPage .contact-content { background-color: #fff; overflow: hidden; padding-bottom: 0; } #contactPage .contact-content h1 { font-family: 'FTN_heavy'; font-size: 28px; font-weight: 500; width: 100%; text-align: center; text-transform: uppercase; } #contactPage .contact-content .contact-back { position: relative; background-color: #f6f6f6; margin-top: 7%; padding-bottom: 70px; } #contactPage .contact-content .contact-back::before, #contactPage .contact-content .contact-back::after { position: absolute; content: ''; pointer-events: none; left: -25%; width: 150%; height: 55%; background: inherit; -moz-transform: rotate(-3deg); -o-transform: rotate(-3deg); -ms-transform: rotate(-3deg); -webkit-transform: rotate(-3deg); transform: rotate(-3deg); z-index: 1; } #contactPage .contact-content .contact-back::before { top: 0; -moz-transform-origin: 0 0; -o-transform-origin: 0 0; -ms-transform-origin: 0 0; -webkit-transform-origin: 0 0; transform-origin: 0 0; } #contactPage .contact-content .contact-back::after { bottom: 0; -moz-transform-origin: 0 0; -o-transform-origin: 0 0; -ms-transform-origin: 0 0; -webkit-transform-origin: 0 0; transform-origin: 0 0; } #contactPage .contact-form { position: relative; z-index: 11; font-family: 'FTN_heavy' !important; } #contactPage .contact-form .form { background-color: #fff; padding: 40px; -webkit-box-shadow: 0 20px 40px rgba(0,0,0,0.1); -moz-box-shadow: 0 20px 40px rgba(0,0,0,0.1); box-shadow: 0 20px 40px rgba(0,0,0,0.1); -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; overflow: hidden; } .form .input-box { position: relative; margin: 15px 0; } .callForm .input-box { margin: 10px 0; } .form .textarea-box { height: calc(100% - 37px); } .form .effect, .calculator-style .calc-style { border: 2px solid #eaeaea !important; -webkit-transition: 0.4s; -moz-transition: 0.4s; -o-transition: 0.4s; transition: 0.4s; width: 100%; padding: 12px !important; -webkit-border-radius: 3px !important; -moz-border-radius: 3px !important; border-radius: 3px !important; font-size: 16px !important; } .form .effect::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ color: #212121; } .form .effect:-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #212121; } .form .effect::-ms-input-placeholder { /* Microsoft Edge */ color: #212121; } .form .effect ~ .focus-border:before, .form .effect ~ .focus-border:after, .calculator-style .calc-style ~ .focus-border:before, .calculator-style .calc-style ~ .focus-border:after { content: ""; position: absolute; top: 0; left: 0; width: 0; height: 2px; background-color: #22b0f3; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .callForm .effect ~ .focus-border:before, .callForm .effect ~ .focus-border:after { background-color: #5aa30b9e; } .form .effect ~ .focus-border:after, .calculator-style .calc-style ~ .focus-border:after { top: auto; bottom: 0; left: auto; right: 0; } .form .effect:focus ~ .focus-border:before, .form .effect:focus ~ .focus-border:after, .calculator-style .calc-style:focus ~ .focus-border:before, .calculator-style .calc-style:focus ~ .focus-border:after { width: 100%; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .form .effect ~ .focus-border i:before, .form .effect ~ .focus-border i:after, .calculator-style .calc-style ~ .focus-border i:before, .calculator-style .calc-style ~ .focus-border i:after { content: ""; position: absolute; top: 0; left: 0; width: 2px; height: 0; background-color: #22b0f3; -webkit-transition: 0.4s; -moz-transition: 0.4s; -o-transition: 0.4s; transition: 0.4s; } .callForm .effect ~ .focus-border i:before, .callForm .effect ~ .focus-border i:after { background-color: #5aa30b9e; } .form .effect ~ .focus-border i:after, .calculator-style .calc-style ~ .focus-border i:after{ left: auto; right: 0; top: auto; bottom: 0; } .form .effect:focus ~ .focus-border i:before, .form .effect:focus ~ .focus-border i:after, .calculator-style .calc-style:focus ~ .focus-border i:before, .calculator-style .calc-style:focus ~ .focus-border i:after { height: 100%; -webkit-transition: 0.4s; -moz-transition: 0.4s; -o-transition: 0.4s; transition: 0.4s; } #contactPage .submit-btn { color: #fff; font-size: 18px; line-height: 56px; width: 300px; background-color: #22b0f3; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; -webkit-transition: all .25s ease-in-out; -moz-transition: all .25s ease-in-out; -o-transition: all .25s ease-in-out; transition: all .25s ease-in-out; display: flex; padding: 0; margin-top: 10px; } #contactPage .submit-btn:hover { background-color: #0090d5; color: #fff; } .callForm .submit-btn { margin-top: 10px; float: right; background-color: #008000; color: #fff; font-size: 16px; -webkit-box-shadow: 0 20px 30px -18px #3a801d; -moz-box-shadow: 0 20px 30px -18px #3a801d; box-shadow: 0 20px 30px -18px #3a801d; padding: 13px 40px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; border: none; -webkit-transition: .3s all ease-in-out; -moz-transition: .3s all ease-in-out; -o-transition: .3s all ease-in-out; transition: .3s all ease-in-out; } .callForm .submit-btn:hover { box-shadow: none; } #contactPage .contact-info { position: relative; z-index: 11; display: flex; flex-direction: column; justify-content: center; } #contactPage .contact-info .info-box { margin: 10px 0; } #contactPage .contact-info .info-box address { margin-bottom: 0; } #contactPage .contact-info .info-box a { color: #212121; } #contactPage .contact-info .info-box i { color: #22b0f3; margin-right: 8px; } #contactPage .social-info { display: flex; flex-wrap: wrap; justify-content: space-between; } #contactPage .social-info .social-link { width: 70px; height: 70px; margin-top: 15px; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; -webkit-transition: 500ms opacity ease; -moz-transition: 500ms opacity ease; -o-transition: 500ms opacity ease; transition: 500ms opacity ease; } #contactPage .social-info .social-link a { display: flex; justify-content: center; align-items: center; height: 100%; color: #fff; } #contactPage .social-info .social-link:nth-child(1) { background-color: #5F7AAE; } #contactPage .social-info .social-link:nth-child(2) { background: #f09433; background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); background: -webkit-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); } #contactPage .social-info .social-link:nth-child(3) { background-color: #00acee; } #contactPage .social-info .social-link:nth-child(4) { background-color: #c4302b; } #contactPage .social-info .social-link:hover { opacity: .7; } /* pagination */ .pagination { flex-wrap: wrap; justify-content: center; margin: 30px 0; } .pagination span, .pagination a:link, .pagination a:visited, .pagination a:active { display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; margin-left: 6px; margin-right: 6px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; color: #feffff; margin-bottom: 10px; } .pagination span { background-color: #a6a6a699; } .pagination i { font-size: 13px; } .pagination a:link, .pagination a:visited, .pagination a:active { background-color: #4a8dc6; -webkit-transition: 500ms background ease; -moz-transition: 500ms background ease; -o-transition: 500ms background ease; transition: 500ms background ease; } .pagination a:hover { background-color: #2354a5; } /* calculator style */ .calculator-style { font-family: 'FTN_medium'; } .calculator-style h1 { font-size: 32px; margin-bottom: 20px; } .calculator-style .contentpaneopen { margin: 0 auto; } .calculator-style #FormCond td { padding: 10px 0; position: relative; } .calculator-style #FormCond .first-td { padding: 0; font-size: 0; border-top: 1px solid #eaeaea; } .calculator-style #FormCond .input-box { position: relative; margin-left: 10px; } .calculator-style #FormCond .input-box .calc-style { width: 117px; } .calculator-style #FormCond .calc-style { text-align: center; } .calculator-style #FormCond select { text-align-last: center; -moz-appearance:none; /* Firefox */ -webkit-appearance:none; /* Safari and Chrome */ appearance:none; background: url(../img/select-icon.png) no-repeat; background-size: 10px; background-position: 87% center; } .calculator-style .custom-style { font-size: 18px; line-height: 26px; } .calculator-style .quote { width: 100%; justify-content: flex-start !important; } .calculator-style .quote { border: 1px solid grey; } .calculator-style .quote > .quote { border: none !important; } .calculator-style .quote .quote > .quote { align-items: center; border: none !important; padding: 2px 8px; } .calculator-style .quote .quote > .quote:first-child { width: 25%; } .calculator-style .quote .quote > .quote:last-child { width: 75%; } .calculator-style .quote .quote > .quote span, .calculator-style .quote .quote > .quote b { display: contents; } .bgAtch { background-attachment: inherit !important; } /*.highslide-viewport-size {*/ /* height: 100% !important;*/ /*}*/ /*.highslide-container table, .highslide-wrapper {*/ /* top: 50% !important;*/ /* left: 50% !important;*/ /* transform: translate(-50%, -50%);*/ /*}*/ /*.highslide-container table {*/ /* display: none;*/ /*}*/ /*.highslide-wrapper img {*/ /* height: 100% !important;*/ /* object-fit: contain;*/ /*}*/ /*.highslide-wrapper .highslide-caption {*/ /* display: none !important;*/ /*}*/ @media screen and (max-width: 1800px) { #products .left-side { left: 160px; } } @media screen and (max-width: 1680px) { .project-box .card-img { height: 190px; } #projects .right-side .all-category-wrapper { height: 500px; } #products .left-side { left: 130px; } } @media screen and (max-width: 1500px) { .project-box .card-img { height: 170px; } #projects .right-side .all-category-wrapper { height: 460px; } #products .left-side { left: 75px; } } @media screen and (max-width: 1400px) { .project-box .card-img { height: 150px; } #projects .right-side .all-category-wrapper { height: 420px; } } @media screen and (max-width: 1200px) { .category-content .product-wrapper { margin: 15px 10px; } #contactPage .social-info .social-link { width: 60px; height: 60px; } header .navbar { padding: 6px 20px; } header .navbar #navbarMenu .nav-item .nav-icon { width: 32px; height: 32px; margin-right: 0; } header .navbar #navbarMenu .nav-item .nav-link { font-size: 16px; } #services .services-list { padding: 0 30px; } #main .mainCarousel .item { background-position: center 80%; } #main .mainCarousel .item .slide-text-wrapper .slide-text { width: 100%; } #main .mainCarousel .item .slide-text-wrapper .slide-text h3 { font-size: 20px; } #main .mainCarousel .item .slide-text-wrapper .slide-text h1 { font-size: 22px; } #main .mainCarousel .item .slide-text-wrapper .slide-text p { font-size: 14px; height: 80px; } .project-box .card-img { height: 170px; } #projects .right-side { left: -160px; } #projects .right-side .all-category-wrapper { height: 620px; } .calculator-style #FormCond .input-box .calc-style { width: 100px; } } @media screen and (min-width: 1200px) and (max-width: 1300px) { #partners h6, #services h6 { left: 2.5%; } #products .right-side { padding: 82px 7% 82px 22%; } #projects .projects-box-wrapper { padding: 82px 22% 82px 7%; } #projects .right-side { left: -140px; } } @media screen and (min-width: 1060px) and (max-width: 1200px) { #products .right-side { padding: 82px 8.5% 82px 27.7%; } #projects .projects-box-wrapper { padding: 82px 27.7% 82px 8.5%; } } @media screen and (min-width: 991.98px) and (max-width: 1060px) { #products .left-side .all-category-wrapper, #projects .right-side .all-category-wrapper { width: 360px; } #products .right-side { padding: 82px 8.5% 82px 33.7%; } #projects .projects-box-wrapper { padding: 82px 33.7% 82px 8.5%; } header .navbar .right-side .calc-btn { padding: 9px 14px; } header .navbar #navbarMenu .nav-item .nav-link { font-size: 14px; } } @media screen and (min-width: 991.98px) and (max-width: 1200px) { #partners .partner-wrap { width: calc(20% - 30px); max-width: 100%; flex: none; } #services h6 { left: 2.5%; } #products .right-side .product-wrapper { width: calc(50% - 30px); } } @media screen and (min-width: 767.98px) and (max-width: 991.98px) { .calculator-style #FormCond td { font-size: 14px; } .calculator-style #FormCond .input-box { margin-left: 0; } .calculator-style .calc-style { padding: 5px !important; } } @media screen and (min-width: 767.98px) and (max-width: 810px) { #partners h6, #services h6 { left: 3.5%; } } @media screen and (min-width: 576px) and (max-width: 600px) { #partners h6, #services h6 { left: 3.5%; } .project-box .card-title { height: 44px; -webkit-line-clamp: 3; } } @media screen and (min-width: 991.98px) { #question .content .question-text { width: 60%; } } @media screen and (max-width: 991.98px) { .fixed-nums { display: block; } .page-general .cover-wrapper { height: 250px; } .page-general .this-content .title-wrap { padding: 90px 0; } .page-general .info-others { margin-top: 40px; } .category-content .product-wrapper { width: calc(33.33% - 20px); } #contactPage .contact-info { margin-top: 30px; } #contactPage .social-info { justify-content: left; } #contactPage .social-info .social-link { margin: 15px 15px 0 0; } footer { margin-bottom: 57px; } footer span.siteBy { width: auto; } header #navbarMenu { position: fixed; top: 0; right: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .8); z-index: 9999999999; overflow-y: hidden; } header #navbarMenu .navbar-nav { width: 60%; height: 100%; background-image: -moz-linear-gradient(45deg, #4a8dc6, #74a4e1, #4687ca); background-image: -webkit-linear-gradient(45deg, #4a8dc6, #74a4e1, #4687ca); background-image: linear-gradient(45deg, #4a8dc6, #74a4e1, #4687ca); position: absolute; top: 0; right: -100%; overflow-y: scroll; padding-bottom: 30px; } header #navbarMenu .navbar-nav li { margin: 0 0 0 25px !important; display: block !important; position: relative; } header .navbar #navbarMenu .nav-item:not(.closeM) { width: max-content; } header .navbar #navbarMenu .nav-item .nav-icon { width: 38px; height: 38px; margin-right: 5px; display: inline-flex; } header .navbar #navbarMenu .nav-item .nav-link { font-size: 18px; display: inline-block; position: relative; top: -5px; padding-bottom: 32px; } header .navbar .right-side { position: absolute; right: 62px; } header .navbar .right-side .icon-block, header .navbar .right-side .call-btn { display: none; } header .navbar #navbarMenu .call-mobile .call-btn { font-size: 18px; display: inline-block; color: #fff; padding: 0 0 0 9px; width: 100%; text-align: left; } header .navbar #navbarMenu .call-mobile .call-btn i { margin-right: 5px; font-size: 22px; } header .service-btn { padding: 9px 32px !important; } header .service-btn i { position: relative; top: 2px; } header #navbarMenu .navbar-nav li.closeM { display: flex; background-color: #3271b2; color: #fff; position: relative; font-size: 18px; padding: 25px 35px !important; margin: 0 0 40px 0 !important; } header .closeM i { position: absolute; top: 50%; right: 35px; transform: translateY(-50%); font-size: 25px; } .dropdown-menu-wrap .dropdown-menu, .dropdown-menu-wrap:hover .dropdown-menu { display: none; -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); background-color: transparent; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; border-top: none; -webkit-transition: none; -moz-transition: none; -o-transition: none; transition: none; margin-bottom: 15px; position: relative; top: -12px; } .dropdown-menu-wrap:hover .dropdown-toggle::after { -webkit-transform: rotate(45deg); transform: rotate(45deg); top: -3px; } .dropdown-menu-wrap .dropdown-toggle.down-arrow::after { -webkit-transform: rotate(225deg); transform: rotate(225deg); top: 0; } .dropdown-menu-wrap .dropdown-menu .dropdown-item { color: #fff; } .dropdown-menu-wrap .dropdown-menu .dropdown-item:hover, .dropdown-menu-wrap .dropdown-menu .dropdown-item:focus { background-color: transparent; } .dropdown-menu-wrap.show .dropdown-menu { display: block; } header.sticky #navbarMenu .nav-link, header.sticky #navbarMenu .call-mobile .call-btn { color: #fff !important; } header.sticky #navbarMenu .dropdown-toggle::after { border-color: #fff !important; } #question .content { flex-direction: column; } #question .content .question-text h1 { text-align: center; font-size: 30px; margin-bottom: 0; } #question .content .question-text p { margin: 0; text-align: center; } #question .content .question-btn { display: inline-flex; margin-top: 15px; } #question .content .question-btn a { padding: 15px; font-size: 15px; } #products .right-side { -webkit-border-top-left-radius: 0; -moz-border-top-left-radius: 0; border-top-left-radius: 0; } #products .left-side, #projects .right-side { left: 0; } #products .left-side .all-category-wrapper, #projects .right-side .all-category-wrapper { margin: 0; width: 100%; height: 320px; background: url('../img/product-cover.jpg') no-repeat; background-position: 100% 62%; background-size: contain; } #projects .right-side .all-category-wrapper { background: url('../img/kristall.jpg') no-repeat; background-position: 100% 62%; background-size: contain; } #products .left-side .all-category-wrapper img, #projects .right-side .all-category-wrapper img { display: none; } #products .left-side .all-category-wrapper::before, #projects .right-side .all-category-wrapper::before { background: -webkit-gradient(linear,left top, right top,color-stop(50%, #000),to(transparent)); background: linear-gradient(90deg,#000 50%,transparent); } #products .left-side .all-category-wrapper .text-wrap, #projects .right-side .all-category-wrapper .text-wrap { width: 58%; left: 70px; } #products .left-side .all-category-wrapper .text-wrap .more-btn, #projects .right-side .all-category-wrapper .text-wrap .more-btn { width: 50%; } #products .left-side .all-category-wrapper .link-btn, #projects .right-side .all-category-wrapper .link-btn { bottom: 42px; right: 70px; top: auto; left: auto; } #products .left-side .all-category-wrapper .text-wrap h2, #projects .right-side .all-category-wrapper .text-wrap h2 { font-size: 34px; } #products .left-side .all-category-wrapper .text-wrap p, #products .left-side .all-category-wrapper .text-wrap .more-btn, #projects .right-side .all-category-wrapper .text-wrap p, #projects .right-side .all-category-wrapper .text-wrap .more-btn { font-size: 18px; } #advantages .advantageCarousel { width: 95%; } #main, #main .mainCarousel .item { height: 600px; } #main .mainCarousel .item .slide-text-wrapper { width: 62%; } #main .mainCarousel .item .slide-text-wrapper .slide-text h1 { font-size: 20px; } #main .mainCarousel .item .slide-text-wrapper .slide-text p { height: 60px; } #projects .projects-box-wrapper { -webkit-border-top-right-radius: 0; -moz-border-top-right-radius: 0; border-top-right-radius: 0; } .project-box .card-img { height: 220px; } #projects .projects-box-wrapper, #products .right-side { padding: 55px; } #products { padding-top: 0; } #projects .right-side .all-category-wrapper { background-size: inherit !important; } header .navbar #navbarMenu .lang-wrapper-i { display: flex; align-items: center; margin-bottom: 20px; } header .navbar #navbarMenu .lang-i { margin-right: 30px !important; } header .navbar #navbarMenu .lang-i a { display: flex !important; flex-direction: column; align-items: center; } header .navbar #navbarMenu .lang-i img { width: 20px; height: 20px; object-fit: cover; } header .navbar #navbarMenu .lang-i:last-child { margin-right: 0; } #tt { width: 200px !important; } .products-list .quote .crop { width: calc(50% - 20px); margin: 15px 10px; } .dif-news .quote { flex-wrap: wrap; } .dif-news .quote .quote { width: 100% !important; padding: 0 !important; } .dif-news .quote .quote:first-child { margin-bottom: 20px; } } @media screen and (max-width: 767.98px) { #advantages .advantageCarousel::-webkit-scrollbar-button { width: 200px; } .page-general .cover-wrapper { height: 200px; } .page-general .this-content .title-wrap { padding: 75px 0; } .page-general .this-content .title-wrap .page-title { font-size: 18px; } .full-content .crop img { height: 160px; } .category-content .product-wrapper { width: calc(50% - 20px); } #contactPage #map { height: 300px; } footer .row { justify-content: center !important; } footer span, footer .sosial-media-wrapper { width: 100%; } footer span br { display: none; } footer .sosial-media-wrapper { margin: 20px 0; } footer span, footer .sosial-media-wrapper span { width: auto; text-align: center; } header #navbarMenu .navbar-nav { width: 80%; } #products .left-side .all-category-wrapper::before { background: -webkit-gradient(linear,left top, right top,color-stop(30%, #000),to(transparent)); background: linear-gradient(90deg,#000 30%,transparent); } #projects .right-side .all-category-wrapper::before { background: -webkit-gradient(linear,left top, right top,color-stop(42%, #000),to(transparent)); background: linear-gradient(90deg,#000 42%,transparent); } #products .left-side .all-category-wrapper { background-position: 170px 62%; background-size: cover; } #projects .right-side .all-category-wrapper { background-position: 115% 62%; } #products .left-side .all-category-wrapper .text-wrap, #projects .right-side .all-category-wrapper .text-wrap { width: 70%; } #products .right-side { justify-content: center; } #products .right-side .product-wrapper { width: calc(50% - 60px); } #main .mainCarousel .item .custom-btn { width: 200px; } #main, #main .mainCarousel .item { height: 550px; } #main .mainCarousel .item .slide-text-wrapper { width: 100%; padding: 0 20px 50px; background-image: -moz-linear-gradient(to right, #fff 20%, #fff 20%, rgba(255, 255, 255, 0.9) 44%, rgba(0, 0, 0, 0) 100%); background-image: -webkit-linear-gradient(to right, #fff 20%, #fff 20%, rgba(255, 255, 255, 0.9) 44%, rgba(0, 0, 0, 0) 100%); background-image: linear-gradient(to right, #fff 20%, #fff 20%, rgba(255, 255, 255, 0.9) 44%, rgba(0, 0, 0, 0) 100%); } #main .mainCarousel .item .slide-text-wrapper .slide-text p { display: none; } #main .mainCarousel .item .custom-btn { margin: 0 auto 70px; } #main .controls-wrapper { left: 50%; transform: translateX(-50%); width: 100%; } #main .controls-wrapper #customNavs .owl-nav, #main .controls-wrapper #customDots .owl-dot.active { background-color: rgba(192, 227, 243, .7); } #main .controls-wrapper #customDots .owl-dot svg { stroke: rgba(192, 227, 243, .7); } #staticPages .page-content .content-body .quote .crop { width: calc(50% - 30px); } .calculator-style .content-body { padding: 30px !important; } .calculator-style .calc-style { width: auto; margin-left: 10px; } .calculator-style #FormCond .input-box .calc-style { margin-left: 0; width: 117px; } .calculator-style #FormCond td { display: inline-table; margin: 5px 0; justify-content: space-between; align-items: center; } .calculator-style #FormCond .first-td { width: 100%; } .calculator-style h1 { font-size: 28px; margin-bottom: 0; } .calculator-style .quote .quote > .quote:first-child { width: 30%; } .calculator-style .quote .quote > .quote:last-child { width: 70%; } .calculator-style .hotspot { display: none; } .products-list .content-body { padding: 40px 20px !important; } } @media screen and (max-width: 650px) { .project-box .card-img { height: 170px; } } @media screen and (max-width: 575.8px) { .page-general .page-content { padding: 50px 15px 70px; } .page-general .page-content .content-body, #contactPage .contact-form .form { padding: 20px; } .products-list .content-body { padding: 20px 0 !important; } .page-general .this-content ul li { padding-left: 15px; } .page-general .dif-style ul li { padding-left: 35px; } .page-general .info-others { padding-left: 35px; } #contactPage #map { height: 250px; } #partners { padding: 50px 0 75px; } #partners .partners-wrapper .partner-wrap { width: calc(50% - 30px); } #partners .partners-wrapper .partner-box { /*width: calc(60% - 30px);*/ margin: 15px auto; } #partners h6, #services h6 { position: static; text-align: center; -webkit-transform: none; transform: none; font-size: 26px; margin-bottom: 24px; } #advantages .advantageCarousel { margin-bottom: 35px; } #about { padding: 90px 15px; } #about .about-info { width: 100%; } #services .services-list { padding: 0; } #services .services-list li { font-size: 18px; } #products .left-side .all-category-wrapper .text-wrap, #projects .right-side .all-category-wrapper .text-wrap { left: 20px; } #products .left-side .all-category-wrapper .link-btn, #projects .right-side .all-category-wrapper .link-btn { right: 20px; } #projects { background-color: #fff; } #projects .projects-box-wrapper { padding: 0 35px 35px; } #products .right-side { padding: 35px 35px 0; } #products .right-side .product-wrapper { width: calc(50% - 30px); } #main .controls-wrapper #customDots { padding: 0 10px; } #main .controls-wrapper #customDots .owl-dot { margin: 0 10px; } #main .mainCarousel .item .slide-text-wrapper .slide-text h1 { font-size: 18px; } .project-box .card-img { height: 290px; } .certificate-dif .quote .crop { width: 100% !important; } #projects .right-side .all-category-wrapper { background-position: 140% 62%; } #products .left-side .all-category-wrapper .text-wrap .more-btn, #projects .right-side .all-category-wrapper .text-wrap .more-btn { font-size: 16px; } #projects .right-side .all-category-wrapper::before { background: -webkit-gradient(linear,left top, right top,color-stop(30%, #000),to(transparent)); background: linear-gradient(90deg,#000 30%,transparent); } #projects .project-box { margin: 10px 0; } #products .right-side .product-wrapper { margin: 10px 15px; } .calculator-style #FormCond table { width: 100%; } .calculator-style #FormCond td { width: 50%; } .calculator-style #FormCond td nobr { white-space: break-spaces; } .calculator-style #FormCond .mobil_none { display: none; } .calculator-style #FormCond .input-box { width: max-content; margin: 10px 0 10px 10px; } .calculator-style #FormCond .calc-style { margin: 10px 0 10px 10px; } .calculator-style #FormCond .input-box .calc-style { margin: 0; } .calculator-style #FormCond .first-td { display: inline-table; } .products-list .dif-news { padding: 20px 15px !important; } .products-list .full-content h3 { font-size: 16px; } } @media screen and (max-width: 500px) { .full-content .crop img { height: 100%; width: 100%; } .category-content .product-wrapper, .products-list .quote .crop { width: calc(90% - 20px); } #contactPage .submit-btn { width: 80%; } #contactPage .contact-content .contact-back { margin-top: 12%; } header .navbar { padding: 6px 15px; } .call-modal-wrapper .call-modal { width: 80%; } .call-modal-wrapper .call-modal .modal-body { padding: 10px 30px; } header .navbar .right-side { right: 56px; } header .navbar .right-side .calc-btn { padding: 9px 15px; } #question .content .question-text h1 { font-size: 24px; } #question .content .question-text p { font-size: 16px; } #question .content .question-btn a { font-size: 12px; } .custom-btn { font-size: 16px; } #products .left-side .all-category-wrapper .text-wrap, #projects .right-side .all-category-wrapper .text-wrap { width: 90%; } #products .left-side .all-category-wrapper .text-wrap .more-btn, #projects .right-side .all-category-wrapper .text-wrap .more-btn { width: 62%; padding: 12px; } #products .left-side .all-category-wrapper .text-wrap p, #products .left-side .all-category-wrapper .text-wrap .more-btn, #projects .right-side .all-category-wrapper .text-wrap p, #projects .right-side .all-category-wrapper .text-wrap .more-btn { font-size: 16px; } #products .left-side .all-category-wrapper .text-wrap h2, #projects .right-side .all-category-wrapper .text-wrap h2 { font-size: 30px; } #products .left-side .all-category-wrapper, #projects .right-side .all-category-wrapper { background-position: 26px 62%; } #products .right-side .product-wrapper { width: calc(90% - 30px); margin: 10px 0; } #main, #main .mainCarousel .item { height: 470px; } #main .mainCarousel .item .slide-text-wrapper { padding: 0 15px 50px; } #main .mainCarousel .item .slide-text-wrapper .slide-text h3 { font-size: 18px; } #main .mainCarousel .item .slide-text-wrapper .slide-text h1, #main .mainCarousel .item .slide-text-wrapper .slide-text p { margin-bottom: 30px; } #main .mainCarousel .item .custom-btn { width: 170px; height: 50px; margin: 0 auto 45px; } .project-box .card-img { height: 220px; } .calculator-style .quote .quote > .quote:first-child, .calculator-style .quote .quote > .quote:last-child { width: 100%; } .calculator-style .quote .quote > .quote:last-child { border-bottom: 1px solid #eaeaea !important; } .calculator-style .quote .quote:last-child > .quote:last-child { border: none !important; } .calculator-style h1 { font-size: 25px; } .calculator-style .custom-style { font-size: 16px; } header .navbar #navbarMenu .lang-i { margin-right: 0px !important; } header #navbarMenu .navbar-nav { width: 100%; } } @media screen and (max-width: 450px) { .services-boxes .col-6 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } } @media screen and (max-width: 400px) { .category-content .product-wrapper, .products-list .quote .crop { width: 90%; margin: 15px 0; } .call-modal-wrapper .call-modal { width: 90%; } header .navbar .right-side .calc-btn { padding: 9px; font-size: 15px; } #partners .partners-wrapper .partner-box { height: 110px; } #products .right-side .product-wrapper { width: calc(80% - 30px); } #staticPages .page-content .content-body .quote .crop { width: calc(80% - 30px); } header .navbar #navbarMenu .lang-i a { font-size: 12px; } .calculator-style #FormCond .input-box .calc-style { width: 100px; } .calculator-style #FormCond td { font-size: 14px; } .calculator-style h1 { font-size: 22px; } }