/* Minification failed. Returning unminified contents. (76,23): run-time error CSS1039: Token not allowed after unary operator: '-font-primary' (181,17): run-time error CSS1039: Token not allowed after unary operator: '-color-black' (186,21): run-time error CSS1039: Token not allowed after unary operator: '-color-orange' (191,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (192,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (193,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (194,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (195,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (196,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (197,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (198,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (199,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (200,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (201,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (202,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (203,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (204,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (205,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (206,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (207,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (208,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (209,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (210,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (211,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (212,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (213,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (265,36): run-time error CSS1039: Token not allowed after unary operator: '-input-background-color' (284,32): run-time error CSS1039: Token not allowed after unary operator: '-input-border-color' (289,32): run-time error CSS1039: Token not allowed after unary operator: '-input-border-color-inline' (298,32): run-time error CSS1039: Token not allowed after unary operator: '-input-border-color' (302,32): run-time error CSS1039: Token not allowed after unary operator: '-input-border-color-inline' (306,32): run-time error CSS1039: Token not allowed after unary operator: '-input-border-color-checked' (307,36): run-time error CSS1039: Token not allowed after unary operator: '-input-background-color-checked' (312,32): run-time error CSS1039: Token not allowed after unary operator: '-input-border-color-inline-checked' (316,32): run-time error CSS1039: Token not allowed after unary operator: '-input-border-color-disabled' (317,36): run-time error CSS1039: Token not allowed after unary operator: '-input-background-color-disabled' (321,32): run-time error CSS1039: Token not allowed after unary operator: '-input-border-color-inline-disabled' (326,32): run-time error CSS1039: Token not allowed after unary operator: '-input-border-color-hover' (330,32): run-time error CSS1039: Token not allowed after unary operator: '-input-border-color-hover' (331,36): run-time error CSS1039: Token not allowed after unary operator: '-input-background-color-hover' (335,32): run-time error CSS1039: Token not allowed after unary operator: '-input-border-color-inline-hover' (346,32): run-time error CSS1039: Token not allowed after unary operator: '-input-border-color-inline-checked' (356,32): run-time error CSS1039: Token not allowed after unary operator: '-input-border-color' (360,32): run-time error CSS1039: Token not allowed after unary operator: '-input-border-color-inline' (364,32): run-time error CSS1039: Token not allowed after unary operator: '-input-border-color-checked' (365,36): run-time error CSS1039: Token not allowed after unary operator: '-input-background-color' (370,32): run-time error CSS1039: Token not allowed after unary operator: '-input-border-color-inline-checked' (377,32): run-time error CSS1039: Token not allowed after unary operator: '-input-border-color-inline-disabled' (382,32): run-time error CSS1039: Token not allowed after unary operator: '-input-border-color-hover' (386,32): run-time error CSS1039: Token not allowed after unary operator: '-input-border-color-hover' (387,36): run-time error CSS1039: Token not allowed after unary operator: '-input-background-color' (391,32): run-time error CSS1039: Token not allowed after unary operator: '-input-border-color-inline-hover' (399,23): run-time error CSS1039: Token not allowed after unary operator: '-font-primary' (411,23): run-time error CSS1039: Token not allowed after unary operator: '-font-primary' (452,28): run-time error CSS1039: Token not allowed after unary operator: '-color-black' (460,32): run-time error CSS1039: Token not allowed after unary operator: '-color-grey' (807,32): run-time error CSS1046: Expect comma, found '0' (807,36): run-time error CSS1046: Expect comma, found '/' (901,28): run-time error CSS1039: Token not allowed after unary operator: '-color-grey' (919,35): run-time error CSS1039: Token not allowed after unary operator: '-color-grey' (1177,32): run-time error CSS1039: Token not allowed after unary operator: '-color-black' (1303,21): run-time error CSS1039: Token not allowed after unary operator: '-color-orange' (1315,36): run-time error CSS1039: Token not allowed after unary operator: '-color-orange' (1325,21): run-time error CSS1039: Token not allowed after unary operator: '-color-black' (1516,28): run-time error CSS1039: Token not allowed after unary operator: '-color-black' (1548,32): run-time error CSS1039: Token not allowed after unary operator: '-color-grey' (1614,36): run-time error CSS1039: Token not allowed after unary operator: '-color-black' (1618,40): run-time error CSS1039: Token not allowed after unary operator: '-color-grey' (1635,32): run-time error CSS1039: Token not allowed after unary operator: '-color-grey' (1647,17): run-time error CSS1039: Token not allowed after unary operator: '-color-cold' (1710,28): run-time error CSS1039: Token not allowed after unary operator: '-color-grey' (1827,28): run-time error CSS1039: Token not allowed after unary operator: '-color-black' (1842,56): run-time error CSS1039: Token not allowed after unary operator: '-color-black' (1857,23): run-time error CSS1039: Token not allowed after unary operator: '-font-primary' (1861,17): run-time error CSS1039: Token not allowed after unary operator: '-color-black' (1880,28): run-time error CSS1039: Token not allowed after unary operator: '-color-orange' (2051,28): run-time error CSS1039: Token not allowed after unary operator: '-color-orange' (2052,17): run-time error CSS1039: Token not allowed after unary operator: '-color-white' (2095,28): run-time error CSS1039: Token not allowed after unary operator: '-color-orange' (2099,32): run-time error CSS1039: Token not allowed after unary operator: '-color-black' (2150,49): run-time error CSS1039: Token not allowed after unary operator: '-color-black' (2181,40): run-time error CSS1046: Expect comma, found '0' (2181,44): run-time error CSS1046: Expect comma, found '/' (2187,36): run-time error CSS1039: Token not allowed after unary operator: '-color-grey' (2188,46): run-time error CSS1046: Expect comma, found '0' (2188,50): run-time error CSS1046: Expect comma, found '/' (2267,40): run-time error CSS1039: Token not allowed after unary operator: '-color-orange' (2280,31): run-time error CSS1039: Token not allowed after unary operator: '-font-secondary' (2287,25): run-time error CSS1039: Token not allowed after unary operator: '-color-grey' (2293,25): run-time error CSS1039: Token not allowed after unary operator: '-color-cold' (2372,31): run-time error CSS1039: Token not allowed after unary operator: '-font-tertiary' (2393,21): run-time error CSS1039: Token not allowed after unary operator: '-color-grey' (2413,49): run-time error CSS1039: Token not allowed after unary operator: '-color-grey' (2418,36): run-time error CSS1039: Token not allowed after unary operator: '-color-orange' (2444,17): run-time error CSS1039: Token not allowed after unary operator: '-color-white' (2447,28): run-time error CSS1039: Token not allowed after unary operator: '-color-black' (2451,32): run-time error CSS1039: Token not allowed after unary operator: '-color-orange' (2460,17): run-time error CSS1039: Token not allowed after unary operator: '-color-orange' (2501,56): run-time error CSS1039: Token not allowed after unary operator: '-color-black' (2615,40): run-time error CSS1046: Expect comma, found '0' (2615,44): run-time error CSS1046: Expect comma, found '/' (2620,44): run-time error CSS1046: Expect comma, found '0' (2620,48): run-time error CSS1046: Expect comma, found '/' (2639,48): run-time error CSS1039: Token not allowed after unary operator: '-color-grey' (2797,40): run-time error CSS1039: Token not allowed after unary operator: '-color-orange' (3000,32): run-time error CSS1046: Expect comma, found '0' (3000,36): run-time error CSS1046: Expect comma, found '/' (3009,21): run-time error CSS1039: Token not allowed after unary operator: '-color-grey' (3059,36): run-time error CSS1039: Token not allowed after unary operator: '-color-grey' (3064,40): run-time error CSS1039: Token not allowed after unary operator: '-color-black' (3255,40): run-time error CSS1046: Expect comma, found '0' (3255,44): run-time error CSS1046: Expect comma, found '/' (3262,40): run-time error CSS1039: Token not allowed after unary operator: '-color-grey' (3397,40): run-time error CSS1039: Token not allowed after unary operator: '-color-orange' (3474,28): run-time error CSS1039: Token not allowed after unary operator: '-color-orange' (3605,36): run-time error CSS1039: Token not allowed after unary operator: '-color-grey' (3670,28): run-time error CSS1039: Token not allowed after unary operator: '-color-grey' (3677,28): run-time error CSS1039: Token not allowed after unary operator: '-color-orange' (3720,32): run-time error CSS1046: Expect comma, found '0' (3720,36): run-time error CSS1046: Expect comma, found '/' (3726,38): run-time error CSS1046: Expect comma, found '0' (3726,42): run-time error CSS1046: Expect comma, found '/' (3820,32): run-time error CSS1039: Token not allowed after unary operator: '-color-orange' (3845,21): run-time error CSS1039: Token not allowed after unary operator: '-color-grey' (3853,36): run-time error CSS1039: Token not allowed after unary operator: '-color-grey' (3912,32): run-time error CSS1039: Token not allowed after unary operator: '-color-orange' (4104,34): run-time error CSS1046: Expect comma, found '0' (4104,38): run-time error CSS1046: Expect comma, found '/' (4110,28): run-time error CSS1039: Token not allowed after unary operator: '-color-grey' (4185,40): run-time error CSS1039: Token not allowed after unary operator: '-color-grey' (4271,36): run-time error CSS1046: Expect comma, found '0' (4271,40): run-time error CSS1046: Expect comma, found '/' (4287,36): run-time error CSS1039: Token not allowed after unary operator: '-color-grey' (4371,28): run-time error CSS1039: Token not allowed after unary operator: '-color-grey' (4556,32): run-time error CSS1039: Token not allowed after unary operator: '-color-orange' (4591,23): run-time error CSS1039: Token not allowed after unary operator: '-font-tertiary' (4649,25): run-time error CSS1039: Token not allowed after unary operator: '-color-grey' (4668,45): run-time error CSS1039: Token not allowed after unary operator: '-color-black' (4668,68): run-time error CSS1039: Token not allowed after unary operator: '-color-orange' (4668,88): run-time error CSS1039: Token not allowed after unary operator: '-color-black' (4694,17): run-time error CSS1039: Token not allowed after unary operator: '-color-white' (4722,21): run-time error CSS1039: Token not allowed after unary operator: '-color-white' (4728,25): run-time error CSS1039: Token not allowed after unary operator: '-color-white' (4729,36): run-time error CSS1039: Token not allowed after unary operator: '-color-orange' (4735,25): run-time error CSS1039: Token not allowed after unary operator: '-color-orange' (4736,36): run-time error CSS1039: Token not allowed after unary operator: '-color-white' (4782,25): run-time error CSS1039: Token not allowed after unary operator: '-color-black' (4787,25): run-time error CSS1039: Token not allowed after unary operator: '-color-grey' (4809,28): run-time error CSS1039: Token not allowed after unary operator: '-color-white' (5120,36): run-time error CSS1039: Token not allowed after unary operator: '-color-orange' (5130,36): run-time error CSS1039: Token not allowed after unary operator: '-color-orange' (5144,35): run-time error CSS1039: Token not allowed after unary operator: '-color-grey' (5154,32): run-time error CSS1039: Token not allowed after unary operator: '-color-grey' (5403,32): run-time error CSS1039: Token not allowed after unary operator: '-color-grey' (6353,21): run-time error CSS1039: Token not allowed after unary operator: '-color-orange' (6371,32): run-time error CSS1039: Token not allowed after unary operator: '-color-grey' (6375,32): run-time error CSS1039: Token not allowed after unary operator: '-color-orange' (6469,21): run-time error CSS1039: Token not allowed after unary operator: '-color-cold' (6477,27): run-time error CSS1039: Token not allowed after unary operator: '-font-tertiary' (6497,28): run-time error CSS1039: Token not allowed after unary operator: '-color-black' (6508,52): run-time error CSS1039: Token not allowed after unary operator: '-color-black' (6524,28): run-time error CSS1039: Token not allowed after unary operator: '-color-grey' (6563,17): run-time error CSS1039: Token not allowed after unary operator: '-color-grey' (6570,21): run-time error CSS1039: Token not allowed after unary operator: '-color-grey' (6581,25): run-time error CSS1039: Token not allowed after unary operator: '-color-cold' (6600,28): run-time error CSS1039: Token not allowed after unary operator: '-color-light' (6609,21): run-time error CSS1039: Token not allowed after unary operator: '-color-orange' (6688,32): run-time error CSS1039: Token not allowed after unary operator: '-color-blue' (6716,32): run-time error CSS1039: Token not allowed after unary operator: '-color-cold' (6722,32): run-time error CSS1039: Token not allowed after unary operator: '-color-grey' (6723,21): run-time error CSS1039: Token not allowed after unary operator: '-color-white' (6748,28): run-time error CSS1039: Token not allowed after unary operator: '-color-orange' (6749,17): run-time error CSS1039: Token not allowed after unary operator: '-color-white' */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; } body { line-height: 20px; margin: 0; color: #333; font-size: 13px; font-family: var(--font-primary); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } ol, ul { list-style: none; } blockquote, q { quotes: none; } :focus { outline: 0; } ins { text-decoration: none; } del { text-decoration: line-through; } table { border-collapse: collapse; border-spacing: 0; } ul, li { float: left; display: inline; } h1, h2, h3, h4, h5 { font-weight: normal; } i, em { font-style: normal; } button, select { border: none; margin: 0; padding: 0; background: transparent; } * { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } /* Finish RESET */ html::-webkit-scrollbar { width: 10px; } html::-webkit-scrollbar-track { background: #555555; } html::-webkit-scrollbar-thumb { background-color: #FFF; border: 3px solid #555555; } html { scrollbar-color: #FFF #555555; scrollbar-width: thin; } body { margin: 0; color: #333; font-size: 13px; font-family: Montserrat, Arial; line-height: 20px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } *::-moz-selection { background: rgba(0, 0, 0, 0.2); } *::selection { background: rgba(0, 0, 0, 0.2); } a { color: var(--color-black); text-decoration: none; } a:hover { color: var(--color-orange); text-decoration: none; } :root { --input-background-color: #FFF; --input-border-color: #bfbfbf; --input-border-color-inline: #FFF; --input-border-color-checked: #00A678; --input-background-color-checked: #00C18C; --input-border-color-inline-checked: #00C18C; --input-border-color-disabled: #bfbfbf; --input-background-color-disabled: #efefef; --input-border-color-inline-disabled: #bfbfbf; --input-border-color-hover: #00C18C; --input-background-color-hover: #FFF; --input-border-color-inline-hover: #bfbfbf; --input-border-color-focus: #00A678; --color-black: #000; --color-white: #FFF; --color-dark: #2E1F18; --color-orange: #F96714; --color-grey: #555759; --color-cold: #A7A9AC; --color-light: #F9F1DF; --font-primary: 'Montserrat', 'Arial'; --font-secondary: 'PT Serif', 'Arial'; --font-tertiary: 'Oswald', 'Arial'; } /* Reset Css */ input, select, textarea, input[type='checkbox'], input[type='radio'] { border: none; position: relative; -webkit-appearance: none; margin: 0px; padding: 0px; } input:focus, select:focus, textarea:focus, input[type='checkbox']:focus, input[type='radio']:focus { outline: 0; } input[type='submit'], button { border: none; position: relative; -webkit-appearance: none; margin: 0px; padding: 0px; outline: 0; } /* Customization checkbox & radio */ input[type='checkbox'], input[type='radio'] { width: 18px; height: 18px; line-height: 18px; min-width: 1px !important; margin: 1px 10px -1px 0; padding: 0; } input[type='checkbox']::before, input[type='radio']::before { display: block; position: absolute; content: ""; width: calc(100% - 2px); height: calc(100% - 2px); background-color: var(--input-background-color); transition: background-color 500ms, border-color 500ms; } input[type='checkbox']::after, input[type='radio']::after { display: block; position: absolute; content: ""; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); transition: background-color 500ms, border-color 250ms; } /* Customization checbox */ input[type='checkbox']::before { border-radius: 3px; border: solid 1px; border-color: var(--input-border-color); } input[type='checkbox']::after { border: solid; border-color: var(--input-border-color-inline); border-width: 0 2px 2px 0; width: 5px; height: 10px; left: 7px; bottom: 5px; } input[type='checkbox']:not(:checked)::before { border-color: var(--input-border-color); } input[type='checkbox']:not(:checked)::after { border-color: var(--input-border-color-inline); } input[type='checkbox']:checked:not(:disabled)::before { border-color: var(--input-border-color-checked); background-color: var(--input-background-color-checked); } input[type='checkbox']:read-only::before, input[type='checkbox']:-moz-read-only::before { border-color: var(--input-border-color-inline-checked); } input[type='checkbox']:disabled::before { border-color: var(--input-border-color-disabled); background-color: var(--input-background-color-disabled); } input[type='checkbox']:disabled::after { border-color: var(--input-border-color-inline-disabled); } input[type='checkbox']:checked:not(:disabled):focus::before, input[type='checkbox']:not(:checked):not(:disabled):focus::before { border-color: var(--input-border-color-hover); } input[type='checkbox']:not(:checked):not(:disabled):hover::before { border-color: var(--input-border-color-hover); background-color: var(--input-background-color-hover); } input[type='checkbox']:not(:checked):not(:disabled):hover:not(:checked)::after { border-color: var(--input-border-color-inline-hover); } /* Customization radio */ input[type='radio']::before { border-radius: 50%; border: solid 1px; } input[type='radio']::after { border: solid; border-color: var(--input-border-color-inline-checked); border-width: 5px; border-radius: 50%; width: 0px; height: 0px; left: 4px; bottom: 4px; } input[type='radio']:not(:checked)::before { border-color: var(--input-border-color); } input[type='radio']:not(:checked)::after { border-color: var(--input-border-color-inline); } input[type='radio']:checked:not(:disabled)::before { border-color: var(--input-border-color-checked); background-color: var(--input-background-color); } input[type='radio']:read-only::before, input[type='checkbox']:-moz-read-only::before { border-color: var(--input-border-color-inline-checked); } input[type='radio']:disabled::before { } input[type='radio']:disabled::after { border-color: var(--input-border-color-inline-disabled); } input[type='radio']:checked:not(:disabled):focus::before, input[type='radio']:not(:checked):not(:disabled):focus::before { border-color: var(--input-border-color-hover); } input[type='radio']:not(:checked):not(:disabled):hover::before { border-color: var(--input-border-color-hover); background-color: var(--input-background-color); } input[type='radio']:not(:checked):not(:disabled):hover:not(:checked)::after { border-color: var(--input-border-color-inline-hover); } input, textarea, select { float: left; font-size: 14px; font-family: var(--font-primary); font-weight: 500; border-radius: 0; } button { float: none; border: none; padding: 0; margin: 0; cursor: pointer; border-radius: 0; font-family: var(--font-primary); font-size: 15px; font-weight: 600; } .input { width: 100%; height: 50px; padding: 0 16px; border: 1px solid #CCC; transition: ease 0.3s; background-color: #FFF; border-radius: 6px; } .input:focus { border-color: #00C18C; box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); } .select { background: #FFF url(../images/arrow-select.png) no-repeat right center; background-size: auto 5px; box-shadow: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; } textarea.input { padding-top: 13px !important; padding-bottom: 13px !important; } .button { height: 50px; display: inline-block; padding: 0 40px 0 30px; cursor: pointer; position: relative; color: #FFF; background-color: var(--color-black); transition: all 0.25s; border-radius: 6px; overflow: hidden; letter-spacing: 1px; } .button:hover { background-color: var(--color-grey); } .button::before { content: ""; position: absolute; top: 0; bottom: 0; right: -40%; left: 50%; background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.0), #FFF); transform: skew(-40deg); opacity: 0.1; transition: all 0.25s; } .button:hover::before { left: 30%; opacity: 0.3; } .button::after { content: ""; position: absolute; top: 0; bottom: 0; right: 15px; width: 14px; background: url(../images/arrow-white-right.png) no-repeat right center / 100% auto; transition: all 0.25s; } .button:hover::after { right: 10px; } a.button { color: #FFF; font-weight: 600; font-size: 14px; line-height: 50px; } .istanbul-vinc { float: left; width: 100%; padding-top: 120px; position: relative; } .outer { margin: 0 auto; width: 100%; max-width: 1760px; min-height: 10px; position: relative; } .wrap { margin: 0 auto; width: 1320px; min-height: 10px; position: relative; } .tac { text-align: center; } .fl { float: left !important; } .fr { float: right !important; } .fn { float: none !important; } .w100 { float: left; width: 100% !important; } .w50 { float: left; width: 50%; } .mt40 { margin-top: 40px; } .mt20 { margin-top: 20px; } .mb20 { margin-top: 20px; } .blog-detail ul { list-style: disc; padding-left: 20px; float: none; display: block; } .blog-detail ul li { list-style: disc; float: none; display: list-item; padding: 3px 0; line-height: 22px; } .blog-detail h1 { font-weight: 600; font-size: clamp(1.75rem, 2.5vw, 2rem); } .blog-detail h2 { font-weight: 600; font-size: clamp(1.5rem, 2.2vw, 1.75rem); } .blog-detail h3 { font-weight: 500; font-size: clamp(1.3rem, 2vw, 1.5rem); } .blog-detail h4 { font-weight: 500; font-size: clamp(1.1rem, 1.8vw, 1.25rem); } .blog-detail h5 { font-weight: 400; font-size: clamp(1rem, 1.6vw, 1.125rem); } .blog-detail h6 { font-weight: 400; font-size: clamp(0.9rem, 1.4vw, 1rem); } /* Fixed */ .connect-whatsapp, .call-us, .call-request { position: fixed; bottom: 20px; right: 20px; z-index: 7999; } .connect-whatsapp a, .call-us a, .call-request a { float: right; width: 48px; height: 48px; border: 2px solid #FFF; background-color: #27C348; border-radius: 50%; position: relative; text-indent: -9999px; box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); } .connect-whatsapp a:hover, .call-us a:hover, .call-request a:hover { background-color: #20A23D; } .connect-whatsapp a::before, .call-us a::before, .call-request a::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: url(../images/icon-whatsapp-white.png) no-repeat center / 50px; } .call-us { bottom: 80px; } .call-us a { background-color: #027EAC; } .call-us a:hover { background-color: #01688E; } .call-us a::before { background-image: url(../images/icon-call-white.png); background-size: 20px; } /* Bootstrap Add-on */ .alert { position: relative; padding: 1rem 1rem; margin-bottom: 1rem; border: 1px solid transparent; border-radius: 0.25rem; } .alert-heading { color: inherit; } .alert-link { font-weight: 700; } .alert-dismissible { padding-right: 3rem; } .alert-dismissible .btn-close { position: absolute; top: 0; right: 0; z-index: 2; padding: 1.25rem 1rem; } .alert-primary { color: #084298; background-color: #cfe2ff; border-color: #b6d4fe; } .alert-primary .alert-link { color: #06357a; } .alert-secondary { color: #41464b; background-color: #e2e3e5; border-color: #d3d6d8; } .alert-secondary .alert-link { color: #34383c; } .alert-success { color: #0f5132; background-color: #d1e7dd; border-color: #badbcc; } .alert-success .alert-link { color: #0c4128; } .alert-info { color: #055160; background-color: #cff4fc; border-color: #b6effb; } .alert-info .alert-link { color: #04414d; } .alert-warning { color: #664d03; background-color: #fff3cd; border-color: #ffecb5; } .alert-warning .alert-link { color: #523e02; } .alert-danger { color: #842029; background-color: #f8d7da; border-color: #f5c2c7; } .alert-danger .alert-link { color: #6a1a21; } .alert-light { color: #636464; background-color: #fefefe; border-color: #fdfdfe; } .alert-light .alert-link { color: #4f5050; } .alert-dark { color: #141619; background-color: #d3d3d4; border-color: #bcbebf; } .alert-dark .alert-link { color: #101214; } /* Start TOP */ .header { position: fixed; top: 0; left: 0; right: 0; height: 120px; background-color: #FFF; z-index: 8000; transition: all 0.4s; } .header::before { content: ""; position: absolute; top: 0; left: 50%; width: 1760px; height: 40px; margin-left: -880px; background-color: #F2F2F2; } .nav-up { top: -120px; } .nav-down { box-shadow: 0 0 12px rgb(0 0 0 / 8%); } .top-bar { float: left; width: 100%; height: 40px; position: relative; z-index: 80; } .top-bar ul { float: right; } .top-bar li::after { content: ""; float: right; width: 1px; height: 20px; margin: 10px 20px 0 20px; background-color: #D9D9D9; } .top-bar li:last-child::after { display: none; } .top-bar li a { float: left; font-weight: 500; line-height: 40px; } .top-bar li a img { float: left; height: 40px; padding: 12px 0; margin-right: 7px; } #logo { position: absolute; left: 0; top: 10px; z-index: 100; transition: all 0.3s; } #logo a { float: left; position: relative; } #logo img { float: left; height: 100px; transition: all 0.3s; } .nav-icon { display: none; } .header-lang-wrap { position: absolute; top: 60px; right: 0; z-index: 300; font-weight: 600; text-align: center; } .header-lang-icon { float: right; width: 60px; height: 40px; padding-left: 18px; position: relative; background: #FFF url(../images/icon-world.png) no-repeat 8px center / 16px; cursor: pointer; z-index: 250; color: #000; border: 2px solid #BBB; line-height: 36px; border-radius: 8px; box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.05); } .header-lang { position: absolute; top: 50px; right: 0; width: 60px; background-color: var(--color-grey); display: none; z-index: 300; box-shadow: 0 10px 50px rgba(0, 0, 0, 0.15); border-radius: 8px; } .header-lang::before { content: ""; border-bottom: 4px solid transparent; border-left: 8px solid transparent; border-right: 8px solid transparent; height: 0; position: absolute; width: 0; left: 50%; top: -4px; margin-left: -8px; border-bottom-color: var(--color-grey); } .header-lang ul { width: 100%; } .header-lang li { width: 100%; } .header-lang li a { float: left; width: 100%; color: #FFF; line-height: 40px; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.08); } .header-lang li:last-child a { box-shadow: none; } .header-lang li a:hover { opacity: 0.7; } #nav { float: right; padding-right: 110px; position: relative; z-index: 200; } #nav li { margin-right: 50px; position: relative; } #nav li:last-child { margin-right: 0; } #nav li:hover { z-index: 10; } #nav li > a { float: left; position: relative; font-weight: 700; letter-spacing: 0.5px; line-height: 80px; transition: all 0.3s; } #nav li > a.active { color: #B0D235; } #nav li > a::before { content: ""; float: left; width: 2px; height: 10px; margin: 30px 7px 0 0; background-color: #000; transition: all 0.75s; opacity: 0.3; transform: skewX(-20deg); } #nav li:hover > a::before, #nav li > a.active::before { opacity: 1; background-color: #F96714; } #nav li > a.active::before { background-color: #B0D235; } #nav > ul li span { display: none; position: absolute; top: 70px; left: -20px; width: 260px; padding: 15px; background-color: #FFF; box-shadow: 0 10px 50px rgba(0, 0, 0, 0.2); text-align: left; } #nav li span::before { content: ""; border-bottom: 3px solid transparent; border-left: 8px solid transparent; border-right: 8px solid transparent; height: 0; position: absolute; width: 0; left: 50px; top: -3px; border-bottom-color: #FFF; } #nav > ul li span a { float: left; width: 100%; padding: 10px 15px; position: relative; font-weight: 600; transition: all 0.3s; } #nav > ul li span a:hover { background-color: #F5F5F5; } #nav > ul li span.nav-machines { width: 480px; padding-bottom: 5px; } #nav > ul li span.nav-machines section { float: left; width: 100%; display: flex; flex-flow: row wrap; } #nav > ul li span.nav-machines section a { width: 50%; margin-bottom: 10px; } #nav > ul li span.nav-machines section a img { height: 40px; } #nav > ul li span.nav-machines section a i { display: block; padding-top: 5px; } /* Finish TOP */ .hero-screen { float: left; width: 100%; position: relative; z-index: 2000; } .hero-screen > img { float: left; width: 100%; max-height: 800px; } .hero-video-wrap { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 2; } .hero-video { position: absolute; top: -1px; bottom: -1px; left: 0; right: 0; width: 100%; height: 100%; z-index: 5; object-fit: cover; } .hero-background { display: none; } .hero-message { position: absolute; bottom: 0; left: 0; right: 0; z-index: 20; padding: 70px 20px 74px 20px; color: #FFF; text-align: center; font-size: 17px; line-height: 24px; background-image: linear-gradient(180deg, rgba(87, 16, 25, 0), #571019); } .hero-message strong { float: left; width: 100%; position: relative; font-weight: 600; font-size: 60px; line-height: 60px; } .hero-message span { float: left; width: 100%; padding-top: 38px; position: relative; } .hero-message span::before { content: ""; position: absolute; top: 20px; left: 50%; width: 40px; height: 2px; margin-left: -20px; background-color: #C09C61; } /* Finish HERO VIDEO */ .controls { height: 100%; } .slick-prev, .slick-next { position: absolute; top: 50%; width: 40px; height: 40px; margin-top: -20px; text-indent: -9999px; cursor: pointer; z-index: 1000; transition: all 0.5s; background: #FFF url(../images/arrow-left.png) no-repeat center / auto 20px; } .slick-prev { left: 0; } .slick-next { right: 0; background-image: url(../images/arrow-right.png); } .slick-prev:hover, .slick-next:hover { background-color: var(--color-black); } ul.slick-dots { position: absolute; text-align: center; right: 0; left: 0; bottom: 0; padding-top: 20px; z-index: 1000; background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.5)); } ul.slick-dots li { float: none; width: 4px; height: 20px; margin: 0 3px; display: inline-block; transition: all 0.3s; } ul.slick-dots li button { float: left; width: 4px; height: 100%; cursor: pointer; background-color: #FFF; transition: all 0.3s; position: relative; text-indent: -9999px; opacity: 0.5; } ul.slick-dots li button:hover { opacity: 0.6; } ul.slick-dots li.slick-active { height: 30px; } ul.slick-dots li.slick-active button { opacity: 1; } .slider-hero-wrap { float: left; width: 100%; max-height: 680px; position: relative; z-index: 700; overflow: hidden; } .slider-hero { float: left; width: 100%; position: relative; z-index: 700; overflow: hidden; } .slider-hero-item { float: left; width: 100%; position: relative; color: #FFF; overflow: hidden; } .slider-hero-item a { color: #FFF; display: inline-block; width: 100%; height: 100%; z-index: 8; position: relative; } .slider-hero-item img { float: left; width: 100%; position: relative; } .slider-hero-item::before { content: ""; position: absolute; top: 0; left: 0; right: 25%; bottom: 0; background-image: linear-gradient(90deg, #FFF, rgba(255, 255, 255, 0)); z-index: 7; opacity: 0.5; } .slider-hero-title { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 10; pointer-events: none; } .slider-hero-title a, .slider-hero-title button { pointer-events: auto; } .slider-hero-title-in { float: left; width: 50%; padding-bottom: 40px; } .slider-hero-title-in section { display: block; padding-bottom: 24px; margin-bottom: 24px; position: relative; font-size: 50px; color: var(--color-orange); letter-spacing: -1px; line-height: 110%; } .slider-hero-title-in section::after { content: ""; position: absolute; bottom: 0; right: 70%; width: 100%; height: 4px; background-color: var(--color-orange); } .slider-hero-title-in section strong { display: block; } .slider-hero-title-in article { display: block; font-size: 28px; color: var(--color-black); line-height: 120%; } .slider-hero-title a { float: left; height: 50px; padding: 0 15px 0 30px; margin-top: 40px; position: relative; font-weight: 500; letter-spacing: 1px; line-height: 45px; border: 2px solid #FFF; border-radius: 25px; transition: all 0.2s; } .slider-hero-title a:hover { background-color: rgba(0, 0, 0, 0.5); } .slider-hero-title a::after { content: ""; float: right; width: 25px; height: 46px; margin-left: 15px; background: url(../images/arrow-white-right.png) no-repeat 0 center / 20px; transition: all 0.15s; } .slider-hero-title a:hover::after { background-position: right center; } .slider-hero ul.slick-dots { padding-bottom: 55px; } .hero-video { position: absolute; top: -1px; bottom: -1px; left: 0; right: 0; width: 100%; height: 100%; z-index: 5; object-fit: cover; } .vertical-out { width: 100%; height: 100%; display: table; } .vertical-in { width: 100%; display: table-cell; vertical-align: middle; } /* Finish SLIDER */ .mask, .mask-top { position: absolute; bottom: 0; left: 0; right: 0; z-index: 700; } .mask-top { top: 0; bottom: auto; } .mask > img, .mask-top > img { float: left; width: 100%; } /* Start FOOTER */ .footer-wrap { float: left; width: 100%; position: relative; color: #666; } .footer-top { float: left; width: 100%; padding: 40px 0; position: relative; background-color: #EEE; } .footer-top::before, .footer-top::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 50%; background: url(../images/bg-footer-team.jpg) no-repeat center / cover; } .footer-top::after { left: auto; right: 0; background-image: url(../images/bg-footer-video.jpg); width: 50%; } .footer-top ul { width: 100%; position: relative; z-index: 100; } .footer-top li { width: 50%; } .footer-top li section { float: left; width: 100%; padding-right: 40px; display: flex; align-items: center; } .footer-top li strong { float: left; width: 60%; font-size: 20px; font-weight: 600; color: #000; line-height: 24px; } .footer-top li span { float: right; width: 40%; } .footer-top li span a { float: right; height: 50px; padding: 0 28px; background-color: #FFF; color: #000; border: 2px solid #000; font-weight: 600; letter-spacing: 1px; line-height: 46px; border-radius: 8px; /*box-shadow: 4px 4px 0 #FFF;*/ transition: all 0.25s; box-shadow: 4px 4px 0 #FFF; } .footer-top li span a:hover { background-color: #333; color: #FFF; } .footer-top li:last-child section { padding-right: 0; padding-left: 40px; } /*.footer-top li:last-child section strong { color: #FFF; }*/ /* .footer-top li:last-child span a { box-shadow: 4px 4px 0 rgba(255,255,255,0.5); }*/ .footer { float: left; width: 100%; position: relative; background-color: var(--color-black); color: #FFF; line-height: 30px; } /* .footer::before { content:""; position:absolute; top:0; bottom:0; left:0; right:0; background:url(../images/clouds.png) no-repeat center top / 100% auto; opacity:0.1; } */ .footer a { color: #FFF; } .footer a:hover { text-decoration: underline; } .footer-connect { float: left; width: 100%; padding: 40px 0; margin-bottom: 60px; position: relative; /* box-shadow: inset 0 -1px 0 #014E6C; */ box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.15); } .footer-connect::before { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 50%; background-color: var(--color-grey); } .footer-support { float: left; width: 50%; position: relative; line-height: 20px; height: 130px; margin: -40px 0; display: flex; align-items: center; gap: 32px; } .footer-support > img { height: 120px; } .footer-support > div { position: absolute; left: 230px; bottom: -42px; } .footer-support > div > a:hover { text-decoration: none; } .footer-support > div > a i { display: block; color: #F96714; font-weight: 600; letter-spacing: 1px; } .footer-support > div > a strong { display: block; padding-top: 7px; font-weight: 400; font-family: Oswald; font-size: 30px; line-height: 30px; letter-spacing: 1px; } .footer-social { float: right; width: 50%; padding-left: 40px; } .footer-social li { padding-right: 30px; } .footer-social li:last-child { padding-right: 0; } .footer-social li a { float: left; border: 2px solid #FFF; box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.3); border-radius: 6px; transition: all 0.25s; background-color: var(--color-black); } .footer-social li a:hover { background-color: var(--color-grey); } .footer-social li a img { float: left; height: 50px; margin: -2px; } .social-accounts { width: 100%; padding: 0 !important; background-color: transparent !important; } .social-accounts li a { border-color: rgba(0, 0, 0, 0.2); background-color: var(--color-grey); box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1); } .footer-title { float: left; width: 100%; padding: 19px 0 11px 0; position: relative; font-size: 17px; font-weight: 600; letter-spacing: 1px; color: var(--color-cold); } .footer-block-wrap { float: left; width: 50%; } .footer-block { float: left; width: 33.33334%; padding: 0 10px 20px 10px; } .footer-logos { float: left; width: 50%; padding-bottom: 20px; } .footer-logos ul { width: 100%; margin: 20px 0 40px 0; } .footer-logos li { padding-right: 60px; } .footer-logos li img { height: 60px; } .footer-block-content { float: left; width: 100%; } .footer-block-content > ul { width: 100%; } .footer-block-content > ul li { width: 100%; } .footer-block-content > ul li a { float: left; width: 100%; } .copyright { float: left; width: 100%; padding: 50px 0; margin-top: 50px; position: relative; z-index: 10; /* box-shadow: inset 0 1px 0 #014E6C; */ color: rgba(255, 255, 255, 0.6); line-height: 20px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15); background-color: var(--color-grey); } .copyright .left { float: left; width: 70%; } .copyright .left section { float: left; width: 100%; margin-bottom: 10px; } .copyright .left section:last-child { margin-bottom: 0; } .copyright .left section a { float: left; margin-right: 30px; } .copyright .left section a:last-child { margin-right: 0; } .copyright .right { float: right; } .copyright .right a { font-weight: 600; } /* Start CONTENT */ .inner-40 { margin: 0 -40px; } .inner-30 { margin: 0 -30px; } .inner-20 { margin: 0 -20px; } .inner-15 { margin: 0 -15px; } .inner-10 { margin: 0 -10px; } .inner-6 { margin: 0 -6px; } .inner-5 { margin: 0 -5px; } .top-150 { padding-top: 150px; } .top-100 { padding-top: 100px; } .top-50 { padding-top: 50px; } .bottom-150 { padding-bottom: 150px; } .bottom-100 { padding-bottom: 100px; } .bottom-50 { padding-bottom: 50px; } .block-gradient { padding-left: 40px; padding-right: 40px; background-image: linear-gradient(180deg, #F9F5F1, #FFF); } .block-grey { padding: 80px 0; background-color: #F5F5F5; } .block-hero-machine { position: relative; } .block-hero-machine::before { content: ""; position: absolute; top: 80px; bottom: -40px; left: 100px; right: 100px; background: url(../images/hero-machine.png) no-repeat 0 0 / auto 100%; opacity: 0.1; } .block-branches { position: relative; background-color: var(--color-black); background-size: cover; background-position: center; background-repeat: no-repeat; color: #FFF; padding-top: 40px; } .block-branches::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-image: linear-gradient(180deg, var(--color-black), rgba(0, 0, 0, 0)); opacity: 0.8 } .block-space { float: left; width: 100%; height: 80px; } .page-title { float: left; width: 100%; padding: 60px 0; position: relative; font-family: var(--font-primary); font-size: 40px; font-weight: 700; line-height: 50px; color: var(--color-black); z-index: 30; } .page-title-center { text-align: center; } .page-title-white { color: #FFF !important; } .page-title::after { content: ""; position: absolute; bottom: 34px; left: 0; width: 40px; height: 2px; background-color: var(--color-orange); } .page-title-center::after { left: calc(50% - 20px); } .page-desc { color: #fff; font-size: 16px; } .page-about { float: left; width: 100%; margin: -11px 0 31px 0; position: relative; font-size: 17px; line-height: 30px; z-index: 40; } .page-about table { width: 100%; } .page-about table tr { transition: all 0.4s; } .page-about table tr:hover { background-color: rgba(255, 255, 255, 0.65); } .page-about table tr td { padding: 10px; border: 1px solid #E7E7E7; vertical-align: middle; font-size: 16px; } .page-about table tr td:first-child { padding-left: 20px; text-align: left; } .page-about table tr td span { display: block; } .page-about table tr td span { display: block; } .page-about table tr td.txt { font-weight: 700; } .page-about table tr.page-about-header td { background-color: #FFF; } .page-about table tr.page-about-header td h3 { font-weight: 700; } .page-about-center { text-align: center; } .page-about a { font-weight: 600; } .page-about a:hover { text-decoration: underline; } .page-about b, .page-about strong { color: #000; } .page-about h1 { font-size: clamp(1.6rem, 2vw, 2.1rem); line-height: 1.2; font-weight: 700; } .page-about h2 { font-size: clamp(1.35rem, 1.6vw, 1.8rem); line-height: 1.25; font-weight: 700; } .page-about h3 { font-size: clamp(1.15rem, 1.3vw, 1.45rem); line-height: 1.3; font-weight: 600; } .page-about h4 { font-size: clamp(1.05rem, 1.15vw, 1.2rem); line-height: 1.35; font-weight: 600; } .page-about h5 { font-size: clamp(0.95rem, 1vw, 1.1rem); line-height: 1.4; font-weight: 500; } .page-about h6 { font-size: clamp(0.9rem, 0.95vw, 1rem); line-height: 1.4; font-weight: 500; } .page-about img { max-width: 100% !important; height: auto !important; display: grid; } .page-photo { float: right; width: 50%; max-width: 510px; padding: 0 0 20px 50px; } .page-photo img { float: left; width: 100%; } .blog-detail a { text-decoration: underline; color: #027eac; } .hero-search { float: left; width: calc(100% - 80px); padding: 30px 80px 30px 200px; margin: -55px 0 30px 0; position: relative; background-color: #FFF; box-shadow: 0 0 40px rgba(0, 0, 0, 0.15); border-radius: 6px; z-index: 800; } .sub-search { margin-bottom: 0; } .hero-search-title { position: absolute; top: 30px; left: 30px; width: 150px; height: 50px; padding: 0 5px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; line-height: 14px; background-color: var(--color-orange); color: var(--color-white); z-index: 10; border-radius: 6px; text-align: center; } .hero-search-title span { display: inline-block; padding-left: 50px; font-weight: 600; font-size: 17px; color: #FFF; letter-spacing: 1px; line-height: 40px; background: url(../images/icon-machine-search.png) no-repeat 0 center / auto 100%; } .hero-search i { position: absolute; top: -7px; left: 10px; padding: 0 10px; font-size: 10px; font-weight: 600; color: #999; line-height: 10px; background-color: #FFF; z-index: 10; } .hero-search section { float: left; width: 25%; padding-right: 20px; position: relative; } .hero-search .button { position: absolute; top: 30px; right: -80px; width: 160px; padding: 0; background-color: var(--color-orange); } .hero-search .button:hover { background-color: var(--color-black); } .hero-search .button::after { right: 15px !important; width: 20px; background-image: url(../images/icon-search.png); } .hero-machines { float: left; width: 100%; position: relative; text-align: center; } .hero-machines ul { width: 100%; display: flex; flex-flow: row wrap; } .hero-machines li { width: 12.5%; position: relative; } .hero-machines li::after { content: ""; position: absolute; top: 50px; right: -1px; bottom: 50px; width: 2px; background-color: rgba(0, 0, 0, 0.07); } .hero-machines li:last-child::after { display: none; } .hero-machines li a { float: left; width: 100%; height: 100%; padding-bottom: 15px; color: #111111; transition: all 0.25s; } .hero-machines li a:hover { box-shadow: inset 0 -2px 0 var(--color-black); } .hero-machines li a img { display: inline-block; max-width: 100%; height: 100px; } .hero-machines li a strong { display: block; padding-top: 15px; font-weight: 600; } .hero-machines-list { margin-top: 20px; } .hero-machines-list li { width: 25%; padding: 0 15px; margin-bottom: 30px; } .hero-machines-list li::after { display: none; } .hero-machines-list li a { padding: 19px 9px; box-shadow: 0 0 25px rgb(0 0 0 / 7%); border-radius: 6px; border: 1px solid #CCC; } .hero-machines-list li a:hover { border-color: var(--color-grey); box-shadow: 0 7px 30px rgb(0 0 0 / 12%); } .special-services { float: left; width: 100%; position: relative; } .special-services .page-title { padding-top: 32px; font-size: 32px; } .special-services-left, .special-services-right { float: left; width: 25%; padding: 0 20px; position: relative; } .special-services-right { width: 75%; display: flex; flex-flow: row wrap; } .special-service-block { float: left; width: 33.33334%; height: 100%; padding: 0 20px; } .special-service-block a { float: left; width: 100%; height: 100%; position: relative; background-color: #FFF; } .special-service-block a picture { float: left; width: 100%; position: relative; overflow: hidden; } .special-service-block a picture img { float: left; width: 100%; transform-origin: center; transition: all 0.75s; } .special-service-block a:hover picture img { transform: scale(1.1, 1.1); } .special-service-block a section { float: left; width: 100%; padding: 30px; margin-top: -20px; position: relative; border-radius: 0 20px 0 0; z-index: 10; background-color: #FFF; } .special-service-block a section::before { content: ""; position: absolute; top: 0; left: 30px; width: 40px; height: 2px; background-color: var(--color-orange); transition: all 0.3s; } .special-service-block a:hover section::before { width: calc(100% - 60px); } .special-service-block a section strong { display: block; margin: -3px 0 13px 0; font-size: 22px; font-weight: 400; font-family: var(--font-secondary); line-height: 30px; color: #F96714; } .special-service-block a section span { display: block; color: var(--color-grey); } .special-service-block a section i { display: block; margin: 15px 0 -5px 0; color: var(--color-cold); font-weight: 600; letter-spacing: 1px; transition: all 0.2s; } .special-service-block a:hover section i { color: #000; letter-spacing: 2px; } .branches-info { float: left; width: 100%; margin-bottom: 150px; position: relative; display: flex; align-items: center; } .branches-info-content { float: left; width: 50%; padding-right: 80px; } .branches-info picture { float: left; width: 50%; text-align: center; } .branches-info picture img { width: 100%; max-width: 540px; max-height: 260px; } .proposal-wrap { float: left; width: 100%; position: relative; z-index: 100; } .proposal-content { float: left; width: 50%; padding-right: 80px; } .proposal-contact { float: left; width: 100%; } .proposal-contact article { float: left; width: 100%; display: flex; flex-flow: row wrap; } .proposal-contact section { padding: 0 10px; flex: 1; flex-basis: 25%; } .proposal-contact section i { display: block; font-weight: 600; color: #999; letter-spacing: 1px; } .proposal-contact section strong { display: block; padding-top: 19px; font-family: var(--font-tertiary); font-weight: 400; font-size: 26px; line-height: 30px; color: #000; } .proposal-form { float: left; width: 50%; padding: 60px; margin-top: -150px; background-color: #F6F6F6; } .proposal-form h5 { float: left; width: 100%; margin: -8px 0 33px 0; font-weight: 600; font-size: 17px; color: var(--color-grey); letter-spacing: 1px; line-height: 25px; } .proposal-form .form-item { width: 100%; } .proposal-form .form-item .input { padding: 0; border: 0; border-radius: 0; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.1); background-color: transparent; } .proposal-form .form-item .input:focus { padding: 0 20px; border-radius: 6px; box-shadow: inset 0 -2px 0 var(--color-grey); background-color: #FFF; } .proposal-form .form-item .button { background-color: var(--color-orange); font-size: 17px; } .link-all { float: left; width: 100%; position: relative; text-align: center; } .link-all a { float: left; height: 50px; padding: 0 29px; position: relative; color: #999; letter-spacing: 1px; font-weight: 500; line-height: 47px; border: 1px solid #CCC; transition: all 0.3s; border-radius: 25px; } .link-all-bold a { color: var(--color-white) !important; font-weight: 600; border-color: transparent; background-color: var(--color-black); } .link-all-bold a:hover { background-color: var(--color-orange); } .link-all-centered a { float: none; display: inline-block; } .link-all a:hover { color: var(--color-orange); letter-spacing: 2px; } .link-all-white a { color: #FFF !important; } .link-all-white a:hover { border-color: #FFF; } .grayscale { filter: grayscale(100%); -webkit-filter: grayscale(100%); } .grayscale:hover { filter: none; -webkit-filter: none; } .sub-hero { float: left; width: 100%; position: relative; z-index: 100; text-align: center; background-size: cover; background-position: center; } .sub-hero::before, .sub-hero::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: linear-gradient(145deg, var(--color-black), rgba(249, 103, 20, 0.1)); } .sub-hero::after { opacity: 0.5; } .sub-hero picture img { float: left; width: 100%; max-height: 300px; } .sub-machine-hero picture img { max-height: 150px; } .sub-hero-title { position: absolute; inset: 0 0 30px 0; z-index: 100; text-align: left; display: flex; align-items: center; } .breadcrumb { float: left; width: 100%; height: 60px; padding: 20px 30px; margin-top: -30px; position: relative; background-color: #FFF; box-shadow: 0 0 20px rgba(0, 0, 0, 0.07); z-index: 800; overflow: hidden; } .breadcrumb section { float: left; letter-spacing: 1px; } .breadcrumb a { float: left; color: #777; } .breadcrumb a:hover { color: #353535; text-decoration: underline; } .breadcrumb i { float: left; margin: 0 20px; opacity: 0.4; } .breadcrumb strong { float: left; font-weight: 600; color: #2F3C46; } .watch-video { float: left; width: 100%; position: relative; } .watch-video img { float: left; width: 100%; } .watch-video iframe { position: absolute; top: 0; left: 0; } .references { float: left; width: 100%; text-align: center; font-size: 15px; font-weight: 600; } .references ul { width: 100%; display: flex; flex-flow: row wrap; } .references li { width: 25%; padding: 0 5px; margin-bottom: 10px; position: relative; } .references li:hover { z-index: 10px; } .references li a { float: left; width: 100%; height: 100%; padding: 30px; background-color: #FFF; box-shadow: 0 0 20px rgb(0 0 0 / 7%); transition: all 0.3s; } .references li a:hover { box-shadow: 0 0 40px rgb(0 0 0 / 15%); } .references li a img { width: 100%; max-width: 200px; padding-bottom: 10px; display: inline-block; } .references li a span { float: left; width: 100%; padding-top: 20px; box-shadow: inset 0 2px 0 #F5F5F5; transition: all 0.6s; } .references li a:hover span { box-shadow: inset 0 2px 0 var(--color-grey); } .blog { float: left; width: 100%; position: relative; } .blog ul { width: 100%; display: flex; flex-flow: row wrap; } .blog li { width: 50%; padding: 0 20px; margin-bottom: 40px; } .blog li a { float: left; width: 100%; height: 100%; position: relative; background-color: #F7F7F7; overflow: hidden; color: #333; transition: all 0.3s; } .blog li a:hover { background-color: #FFF; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1); } .blog li a::after { content: ""; position: absolute; left: 25px; bottom: 25px; width: 30px; height: 30px; background: #DDD url(../images/arrow-white-right.png) no-repeat center; background-size: 14px; border-radius: 15px; transition: all 0.2s; } .blog li a:hover::after { width: 60px; background-color: #B0D235; } .blog li picture { float: left; width: 100%; background-size: cover; background-position: center; transform-origin: center bottom; transition: all 1s; } .blog li a:hover picture { transform: scale(1.1, 1.1); } .blog li picture img { float: left; width: 100%; max-height: 500px; } .blog li section { float: left; width: 100%; padding: 30px 25px 65px 25px; position: relative; } .blog li section > span { position: absolute; top: -15px; left: 25px; height: 30px; padding: 0 25px; color: #FFF; font-weight: 500; line-height: 30px; background-color: #027EAC; } .blog li section > strong { float: left; width: 100%; margin-bottom: 10px; font-size: 15px; font-weight: 600; overflow: hidden; position: relative; } .blog li section > em { float: left; width: 100%; margin: 3px 0 9px 0; } .news { float: left; width: 100%; position: relative; } .news ul { width: 100%; display: flex; flex-flow: row wrap; } .news li { width: 33.33334%; padding: 0 20px; margin-bottom: 40px; } .news li a { float: left; width: 100%; height: 100%; position: relative; background-color: #F7F7F7; overflow: hidden; color: #333; transition: all 0.3s; } .news li a:hover { background-color: #FFF; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1); } .news li a::after { content: ""; position: absolute; left: 25px; bottom: 25px; width: 30px; height: 30px; background: #DDD url(../images/arrow-white-right.png) no-repeat center; background-size: 14px; border-radius: 15px; transition: all 0.2s; } .news li a:hover::after { width: 60px; background-color: var(--color-orange); } .news li picture { float: left; width: 100%; background-size: cover; background-position: center; transform-origin: center bottom; transition: all 1s; } .news li a:hover picture { transform: scale(1.1, 1.1); } .news li picture img { float: left; width: 100%; max-height: 240px; } .news li section { float: left; width: 100%; padding: 30px 25px 65px 25px; position: relative; } .news li section > span { position: absolute; top: -15px; left: 25px; height: 30px; padding: 0 25px; color: #FFF; font-weight: 500; line-height: 30px; background-color: #027EAC; } .news li section > strong { float: left; width: 100%; margin-bottom: 10px; font-size: 15px; font-weight: 600; overflow: hidden; position: relative; } .news li section > em { float: left; width: 100%; margin: 3px 0 9px 0; } .subpage-image { float: left; width: 100%; position: relative; } .subpage-image ul { width: 100%; display: flex; flex-flow: row wrap; } .subpage-image li { width: 33.33334%; padding: 0 20px; margin-bottom: 40px; } .subpage-image li a { float: left; width: 100%; height: 100%; position: relative; background-color: #F7F7F7; overflow: hidden; color: #333; transition: all 0.3s; } .subpage-image li a:hover { background-color: #FFF; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1); } .subpage-image li picture { float: left; width: 100%; background-size: cover; background-position: center; transform-origin: center bottom; transition: all 1s; } .subpage-image li a:hover picture { transform: scale(1.1, 1.1); } .subpage-image li img { float: left; width: 100%; height: auto; } .subpage-image li section { float: left; width: 100%; padding: 30px 25px 65px 25px; position: relative; } .subpage-image li section > span { position: absolute; top: -15px; left: 25px; height: 30px; padding: 0 25px; color: #FFF; font-weight: 500; line-height: 30px; background-color: #027EAC; } .subpage-image li section > strong { float: left; width: 100%; margin-bottom: 10px; font-size: 15px; font-weight: 600; overflow: hidden; position: relative; } .subpage-image li section > em { float: left; width: 100%; margin: 3px 0 9px 0; } .news-wrap { float: left; width: 100%; padding-left: 90px; margin-top: 60px; position: relative; } .news-content { float: left; width: calc(100% - 340px); } .news-photo { float: left; width: 100%; text-align: center; } .news-photo img { max-width: 100%; max-height: 350px; height: auto; width: 100%; } .date { float: left; width: 100%; padding-left: 40px; margin-top: 20px; font-weight: 500; color: #999; position: relative; letter-spacing: 1px; } .date::before { content: ""; position: absolute; left: 0; top: 50%; width: 20px; height: 2px; margin-top: -1px; background-color: #CCC; } .news-title { margin-top: -40px; } .news-sidebar { float: right; width: 300px; padding: 25px; position: relative; background-color: #FFF; box-shadow: 0 0 20px rgb(0 0 0 / 7%); font-weight: 600; line-height: 20px; } .news-sidebar article { float: left; width: 100%; margin: -5px 0 13px 0; color: var(--color-grey); letter-spacing: 1px; } .news-sidebar ul { width: 100%; margin-bottom: -20px; } .news-sidebar li { width: 100%; } .news-sidebar li a { float: left; width: 100%; padding: 15px 0; letter-spacing: 1px; border-top: 1px solid #F0F0F0; transition: all 0.2s; } .news-sidebar li a span { display: block; margin-bottom: -2px; color: #999; font-size: 10px; } .news-sidebar li a strong { display: block; font-weight: 600; } .page-share { position: absolute; top: 0; left: 0; } .page-share ul { width: 50px; } .page-share li { margin-bottom: 15px; } .page-share li a { float: left; background-color: var(--color-grey); transition: all 0.25s; } .page-share li a:hover { background-color: var(--color-black); } .page-share li a img { float: left; height: 50px; } .simple-list { float: left; width: 100%; margin-top: 10px; font-weight: 500; color: #000; line-height: 25px; } .simple-list ul { width: 100%; display: flex; flex-flow: row wrap; } .simple-list li { width: 50%; padding: 0 20px 20px 30px; position: relative; background: url(../images/icon-ok.png) no-repeat 0 4px / 17px auto; } .block-two { width: 48%; } .gallery { float: left; width: 100%; position: relative; overflow: hidden; } .gallery ul { width: 100%; margin-bottom: 20px; } .gallery li { width: 16.66667%; padding: 0 10px; margin-bottom: 20px; position: relative; } .gallery li a { float: left; width: 100%; position: relative; overflow: hidden; color: #FFF; border-radius: 5px; } .gallery-list li a::after { content: ""; position: absolute; top: 1px; bottom: 1px; left: 1px; right: 1px; background: rgba(0, 0, 0, 0.2) url(../images/icon-zoom.png) no-repeat center / 40px; transition: all 0.3s; z-index: 10; } .gallery-list li a:hover::after { background-color: rgba(0, 0, 0, 0.0); } .gallery li a section { float: left; width: 100%; position: relative; overflow: hidden; } .gallery li a span { float: left; width: 100%; background-size: cover; background-position: center top; transform-origin: center; transition: all 0.75s; } .gallery li a:hover span { transform: scale(1.1, 1.1); } .gallery li a span img { float: left; width: 100%; } .certificates { float: left; width: 100%; text-align: center; position: relative; z-index: 100; overflow: hidden; } .certificates ul { width: 100%; overflow: hidden; display: flex; flex-flow: row wrap; } .certificates li { width: 25%; padding: 0 15px; margin-bottom: 30px; position: relative; } .certificates li a { float: left; width: 100%; height: 100%; padding: 29px; border: 1px solid #DDD; border-radius: 5px; transition: all 0.3s; } .certificates li a:hover { border-color: #666; } .certificates li a section { float: left; width: 100%; height: 220px; display: table; } .certificates li a section strong { display: table-cell; vertical-align: middle; width: 100%; } .certificates li a section strong img { max-width: 100%; max-height: 200px; } .certificates li a article { float: left; width: 100%; margin: 5px 0 -5px 0; font-weight: 600; } /* Start MACHINE PARK */ .machine-park { float: left; width: 100%; position: relative; } .machine-park ul { width: 100%; display: flex; flex-flow: row wrap; } .machine-park li { width: 25%; padding: 0 15px; margin-bottom: 30px; } .machine-park li a { float: left; width: 100%; height: 100%; padding: 10px; background-color: #FFF; box-shadow: 0 0 25px rgb(0 0 0 / 10%); transition: all 0.3s; border-radius: 4px; } .machine-park li a:hover { color: #FFF; background-color: var(--color-grey); } .machine-park li a picture { float: left; width: 100%; border-radius: 3px; overflow: hidden; } .machine-park li a picture i { float: left; width: 100%; background-size: cover; background-position: center; background-repeat: no-repeat; transform-origin: bottom center; transition: all 0.75s; } .machine-park li a:hover picture i { transform: scale(1.1, 1.1); } .machine-park li a picture i img { float: left; width: 100%; } .machine-park li a section { float: left; width: 100%; padding: 10px 15px; letter-spacing: 0.5px; } .machine-park li a strong { float: left; width: 100%; padding-top: 9px; font-size: 18px; font-weight: 600; } .machine-park li a span { float: left; width: 100%; padding-left: 17px; margin: 10px 0; color: #666; font-weight: 500; font-size: 10px; box-shadow: inset 2px 0 0 #EEE; transition: all 0.3s; } .machine-park li a:hover span { color: #FFF; box-shadow: inset 2px 0 0 #FFF; } .machine-park li a article { float: left; padding-right: 20px; font-weight: 600; letter-spacing: 1px; background: url(../images/arrow-right.png) no-repeat right center / 14px; transition: all 0.3s; } .machine-park li a:hover article { letter-spacing: 3px; background-image: url(../images/arrow-white-right.png); } .machine-left { float: left; width: 33%; } .slider-machine { float: left; width: 100%; padding-left: 70px; position: relative; z-index: 70; overflow: hidden; text-align: center; } .slider-machine div { float: left; width: 100%; position: relative; overflow: hidden; border-radius: 4px; } .slider-machine div img { float: left; width: 100%; } .slider-machine ul.slick-dots { padding: 0; background: none; top: 0; right: auto; width: 45px; } .slider-machine ul.slick-dots li { width: 45px; height: 60px; padding: 3px; margin: 0 0 10px 0; border: 1px solid #999; border-radius: 4px; transition: none; } .slider-machine ul.slick-dots li button { width: 100%; height: 100%; border: none; opacity: 0.7; border-radius: 2px; } .slider-machine ul.slick-dots li button::after { display: none; } .slider-machine ul.slick-dots li.slick-active { padding: 2px; border: 2px solid var(--color-orange); } .slider-machine ul.slick-dots li.slick-active button { opacity: 1; } .machine-right { float: right; width: calc(67% - 60px); } .machine-specs { float: left; width: 100%; font-size: 14px; font-weight: 500; line-height: 25px; } .machine-specs ul { width: 100%; display: flex; flex-flow: row wrap; } .machine-specs li { width: 50%; padding: 0 20px 20px 30px; position: relative; background: url(../images/icon-ok.png) no-repeat 0 4px / 17px auto; } .machine-technical-specs { float: left; width: 100%; margin-bottom: 20px; font-size: 14px; font-weight: 500; } .machine-technical-specs ul { width: 100%; border-top: 1px solid #F0F0F0; } .machine-technical-specs li { width: 100%; padding: 15px 20px; border-bottom: 1px solid #F0F0F0; transition: all 0.25s; } .machine-technical-specs li:hover { box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); } .machine-technical-specs li span { float: left; width: 50%; padding-right: 30px; text-align: right; } .machine-technical-specs li strong { float: left; width: 50%; font-weight: 600; color: #000; } .rent-line { float: left; width: 100%; padding: 23px 25px 24px 95px; margin: 25px 0; position: relative; background-color: var(--color-orange); color: #FFF; border-radius: 4px; } .rent-line::before { content: ""; position: absolute; left: 30px; top: 0; bottom: 0; width: 40px; background: url(../images/icon-mobile.png) no-repeat 0 center / 100% auto; } .rent-line strong { float: left; width: 100%; font-size: 18px; font-weight: 600; letter-spacing: 1px; } .rent-line span { float: left; width: 100%; padding: 6px 0 7px 0; opacity: 0.8; } .rent-line a { float: left; font-size: 24px; font-weight: 700; color: #FFF; letter-spacing: 1px; } .catalog-content { float: left; width: 100%; padding: 23px 25px 24px 95px; margin: 25px 0; position: relative; background-color: #A7A9AC; border-radius: 4px; position: relative; } .catalog-content::before { content: ""; position: absolute; left: 30px; top: 0; bottom: 0; width: 40px; background: url(../images/icon-pdf.png) no-repeat 0 center / 100% auto; } .catalog-content::after { content: ""; position: absolute; left: 45%; top: -4rem; bottom: 0; width: 400px; background: url(../images/icon-catalog-download-2.png) no-repeat 0 center / 100% auto; } .catalog-content strong { float: left; width: 100%; font-size: 18px; font-weight: 600; letter-spacing: 1px; } .catalog-content span { float: left; width: 100%; padding: 6px 0 7px 0; opacity: 0.8; } .catalog-content a { float: left; height: 50px; padding: 0 28px; background-color: #FFF; color: #000; border: 2px solid #000; font-weight: 600; letter-spacing: 1px; line-height: 46px; border-radius: 8px; transition: all 0.25s; } .catalog-content a:hover { background-color: #333; color: #FFF; } .product-buttons { float: left; width: 100%; text-align: center; } .product-buttons ul { width: 100%; } .product-buttons li { width: 50%; padding: 0 10px; } .product-buttons li a { float: left; width: 100%; padding: 0 4px 0 14px; border: 1px solid #999; border-radius: 4px; font-weight: 600; letter-spacing: 1px; line-height: 48px; transition: all 0.3s; } .product-buttons li a:hover { border-color: var(--color-grey); background-color: #F6F6F6; } .product-buttons li a img { float: left; height: 48px; padding: 13px 0; } .doc-table { float: left; width: 100%; margin-bottom: 20px; font-size: 14px; } .doc-table ul { width: 100%; border-top: 1px solid #EEE; } .doc-table li { width: 100%; border-bottom: 1px solid #EEE; border-radius: 4px; } .doc-table li a { float: left; width: 100%; padding: 20px 140px 20px 20px; position: relative; font-weight: 500; transition: all 0.2s; } .doc-table li a:hover { background-color: #F9F9F9; } .doc-table-name { float: left; width: calc(100% - 150px); font-weight: 600; } .doc-table-type { float: right; width: 140px; text-align: center; color: #666; } .doc-download { position: absolute; top: 50%; right: 20px; min-width: 100px; height: 30px; padding: 0 35px 0 15px; margin-top: -15px; font-size: 14px; color: #FFF; line-height: 30px; background-color: var(--color-grey); text-align: center; border-radius: 15px; transition: all 0.2s; } .doc-table li a:hover .doc-download { background-color: var(--color-orange); } .doc-download::before { content: ""; position: absolute; top: 0; right: 0; width: 40px; height: 30px; background: url(../images/icon-download.png) no-repeat center / 16px; } /* Start CAREER */ .job-list { float: left; width: 100%; position: relative; } .job-list ul { width: 100%; display: flex; flex-flow: row wrap; } .job-list li { width: 33.33334%; padding: 0 20px; margin-bottom: 40px; } .contact-buttons li { width: 50%; } .job-list li a { float: left; width: 100%; height: 100%; padding: 30px; background-color: #FFF; box-shadow: 0 0 25px rgb(0 0 0 / 10%); transition: all 0.3s; border-radius: 4px; } .job-list li a:hover { box-shadow: 0 7px 30px rgb(0 0 0 / 15%); } .job-list li a section { float: left; width: 100%; margin: -5px 0 -10px 0; font-weight: 500; letter-spacing: 0.5px; } .job-list li a strong { float: left; width: 100%; margin: -3px 0 12px 0; font-size: 23px; font-weight: 600; line-height: 30px; } .job-list li a span { float: left; width: 100%; color: #666; transition: all 0.3s; } .job-list li a span::before, .job-list li a i::before { content: ""; float: left; width: 30px; height: 20px; background: url(../images/icon-clock.png) no-repeat 0 center / 16px; } .job-list li a i::before { background-image: url(../images/icon-world.png); } .job-list li a i { float: left; width: 100%; padding-bottom: 20px; margin: 10px 0 15px 0; color: #666; transition: all 0.3s; border-bottom: 1px solid #F0F0F0; } .job-list li a article { float: left; padding-right: 20px; margin: 5px 0; font-weight: 600; letter-spacing: 1px; background: url(../images/arrow-right.png) no-repeat right center / 14px; transition: all 0.3s; } .job-list li a:hover article { letter-spacing: 3px; } /* Start CONTACT */ .accordion { float: right; width: 100%; margin-bottom: 50px; position: relative; } .accordion-section-title { float: left; width: 100%; padding: 20px 40px 20px 25px; margin-bottom: 20px; position: relative; background-color: #F6F6F6; font-size: 15px; font-weight: 600; color: #000; letter-spacing: 1px; border-radius: 4px; } .accordion-section-title i { content: ""; position: absolute; bottom: 0; left: 25px; width: 40px; height: 2px; background-color: var(--color-orange); opacity: 0; transition: all 0.3s; } .accordion-section-title::before, .accordion-section-title::after { content: ""; position: absolute; top: 50%; right: 15px; width: 12px; height: 2px; margin-top: -1px; background-color: #CCC; transition: all 0.25s; } .accordion-section-title::after { background-color: #CCC; transform: rotate(90deg); opacity: 1; } .accordion-section-title.active { color: var(--color-grey); } .accordion-section-title.active i { opacity: 1; } .accordion-section-title.active::before { background-color: var(--color-grey); } .accordion-section-title.active::after { right: 15px; opacity: 0; } .accordion-section-content { float: left; width: 100%; padding: 10px 0 20px 25px; margin-top: -5px; display: none; position: relative; } .accordion-section-text { float: left; width: 100%; margin-top: -10px; font-size: 15px; font-weight: 500; line-height: 30px; } .accordion-section-text strong, .accordion-section-text b { color: #151515; font-weight: 600; } .accordion-section-text a { font-weight: 600; text-decoration: underline; } .product-section-title { float: left; width: 100%; padding: 20px 40px 20px 25px; margin-bottom: 20px; position: relative; background-color: #F6F6F6; font-size: 15px; font-weight: 600; color: #000; letter-spacing: 1px; border-radius: 4px; } .product-section-title::after { content: ""; position: absolute; bottom: 0; left: 25px; width: 40px; height: 2px; background-color: var(--color-orange); } .product-section-content { float: left; width: 100%; padding: 10px 0 20px 25px; margin-top: -5px; position: relative; } .contact-info { width: calc(50% - 20px); } .contact-info h2 { float: left; width: 100%; margin-top: -13px; font-size: 23px; font-weight: 600; line-height: 30px; color: #000; } .contact-info section { float: left; width: 100%; padding-top: 15px; position: relative; font-size: 14px; font-weight: 500; } .contact-info section i { display: block; font-size: 13px; color: #999; letter-spacing: 1px; } .contact-map { position: absolute; top: 0; right: 0; bottom: 0; left: 50%; } .contact-form { float: left; width: 100%; max-width: 1000px; } .rent-form { margin: 20px 0; } .form-item { float: left; width: 50%; padding: 0 15px 30px 15px; position: relative; } .form-item-3 { width: 33.33334%; } .rent-form .form-item { padding: 0 10px 20px 10px; position: relative; } .form-item:last-child { padding-bottom: 0; } .form-item label { float: left; width: 100%; } .form-item section { float: left; width: 100%; font-size: 16px; font-weight: 600; margin-bottom: -10px; } .security-code img { float: left; width: 140px; height: 50px; margin-right: 10px; padding: 1px; border: 1px solid #CCC; background-color: #FFF; border-radius: 6px; } .security-code a.refresh { float: left; width: 50px; height: 50px; text-indent: -9999px; background: #FFF url(../images/refresh.png) no-repeat center center / 24px; border: 1px solid #CCC; border-radius: 6px; } .security-code a:hover.refresh { background-color: #EEE; } .upload { float: left; width: 100%; height: 50px; position: relative; text-align: center; } .upload span { float: left; width: 100%; height: 100%; position: relative; font-weight: 600; font-size: 14px; line-height: 50px; z-index: 2; border: 1px solid #CCC; border-radius: 6px; } .upload:hover span { border-color: #00C18C; box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); } .upload input { display: block !important; width: 100% !important; height: 100% !important; opacity: 0 !important; overflow: hidden !important; position: absolute; left: 0; top: 0; z-index: 3; cursor: pointer; } .branches-hero-map { float: left; width: 100%; height: 60vh; min-height: 300px; position: relative; } .branches { float: left; width: 100%; position: relative; letter-spacing: 0.5px; font-weight: 500; font-size: 14px; } .branches ul { width: 100%; display: flex; flex-flow: row wrap; } .branches li { width: 50%; padding: 0 15px; margin-bottom: 30px; } .branch-item { float: left; width: 100%; height: 100%; padding: 29px; border: 1px solid #CCC; background-color: #FFF; box-shadow: 0 5px 20px rgb(0 0 0 / 6%); border-radius: 8px; transition: all 0.3s; } .branch-item:hover { border-color: var(--color-grey); } .branch-item strong { float: left; width: 100%; font-size: 18px; font-weight: 600; color: #000; } .branch-item article { float: left; width: 100%; margin-top: 10px; } .branch-item section { float: left; width: 50%; margin-top: 10px; } .branch-item section i { display: block; font-size: 13px; color: #999; letter-spacing: 1px; text-transform: uppercase; } .branch-item figure { float: left; width: 100%; height: 300px; padding: 0; margin: 15px 0 0 0; } /* Start PAGINATION */ .pages { float: left; width: 100%; margin-top: 20px; font-weight: 600; line-height: 50px; text-align: center; } .pages ul { width: 100%; } .pages li { float: none; display: inline-block; padding: 0 5px; } .pages li a { float: left; min-width: 50px; height: 50px; padding: 0 10px; color: #333; transition: all 0.3s; } .pages li a:hover { background-color: #EEE; } .pages li a.current { color: #FFF; background-color: var(--color-grey); } .cookies-wrap { position: fixed; right: 20px; bottom: 20px; left: 20px; z-index: 7950; text-align: center; display: none; } .cookies { float: left; width: 100%; padding: 25px 30px 20px 30px; position: relative; background-color: rgba(0, 0, 0, 0.8); font-size: 12px; color: rgba(255, 255, 255, 0.8); border-radius: 5px; } .cookies::before { content: ""; position: absolute; right: 15px; top: 15px; left: 15px; bottom: 0; background: url(../images/icon-cookies.png) no-repeat 0 top / 60px auto; opacity: 0.3; } .cookies section { float: left; width: 100%; position: relative; } .cookies-close { position: absolute; top: -16px; right: 20px; width: 32px; height: 32px; } .cookies-close span { float: left; width: 100%; height: 100%; position: relative; border-radius: 50%; text-indent: -9999px; background: #C09C61 url(../images/icon-close.png) no-repeat center / 20px; cursor: pointer; border: 2px solid #FFF; } .cookies-close span:hover { background-size: 18px; background-color: #000; } .machine-list { float: left; width: 100%; margin-bottom: 20px; font-size: 15px; font-weight: 600; text-align: center; } .machine-list ul { width: 100%; } .machine-list li { display: flex; width: 100%; padding: 10px 80px 10px 20px; margin-bottom: 10px; position: relative; background-color: #FFF; box-shadow: 0 0 25px rgb(0 0 0 / 10%); transition: all 0.3s; border-radius: 4px; } .machine-list li:last-child { margin-bottom: 0; } .machine-list li::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; border: 1px solid var(--color-grey); border-radius: 4px; opacity: 0; transition: all 0.3s; } .machine-list li:hover::before { opacity: 1; } .machine-list li div { float: left; height: 70px; display: table; position: relative; } .machine-list li div section { display: table-cell; vertical-align: middle; } .machine-list li div section label { display: none; } .machine-logo { width: 20%; } .machine-logo img { max-width: 100%; max-height: 40px; } .machine-model { width: 25%; } .machine-power { width: 20%; } .machine-spec { width: calc(35% - 120px); } .machine-pdf, .machine-apply { width: 60px; } .machine-pdf img, .machine-apply img { height: 30px; display: inline-block; } .machine-pdf i, .machine-apply i { display: none; } a.machine-go { position: absolute; top: 50%; right: 20px; width: 40px; height: 40px; margin-top: -20px; padding-top: 2.5rem; background: #F4F4F4 url(../images/arrow-right.png) no-repeat center / auto 16px; /*text-indent: -9999px;*/ font-size: 0.8rem; transition: all 0.15s; border-radius: 50%; text-indent: -9999px; } a:hover.machine-go { background-color: #E4E4E4; } .machine-list li:first-child { background-color: var(--color-grey); color: #FFF; font-size: 13px; line-height: 16px; } .machine-list li:first-child div { height: 40px; } /* Start LIGHTBOX */ .fancybox-slide--iframe .fancybox-content { width: 800px; min-height: 300px; max-width: 80%; max-height: 80%; margin: 0; } .my-fancy { display: none; padding: 30px 20px 30px 30px !important; border-radius: 8px; } .my-fancy-wrap { width: 100%; max-width: 800px; max-height: 600px; padding-right: 20px; overflow: hidden; overflow-y: auto; scrollbar-color: #FFF #EEEEEE; scrollbar-width: thin; } .my-fancy-wrap::-webkit-scrollbar { width: 5px; } .my-fancy-wrap::-webkit-scrollbar-track { background: #EEEEEE; } .my-fancy-wrap::-webkit-scrollbar-thumb { background-color: #555; } .my-fancy-wrap { scrollbar-color: #FFF #EEEEEE; scrollbar-width: thin; } .fancy-title { float: left; width: 100%; padding: 0 20px; margin-bottom: 15px; position: relative; color: #FF2A2A; } .fancy-title::before { content: ""; position: absolute; top: 50%; left: 0; width: 50px; height: 2px; margin-top: -1px; background-color: #DDD; } .fancy-title strong { float: left; padding: 0 15px; position: relative; font-weight: 600; letter-spacing: 1px; background-color: #FFF; } .tab-places { float: left; width: 100%; height: 45px; margin: -10px 0 30px 0; overflow: hidden; } .tab-places ul { float: none; height: 45px; display: block; } .tab-places li { padding-right: 10px; } .tab-places li:last-child { padding-right: 0; } .tab-places li a { float: left; height: 45px; padding: 0 23px; border: 1px solid rgba(0, 0, 0, 0.15); font-weight: 500; color: #666; background-color: #FFF; line-height: 43px; position: relative; border-radius: 8px; transition: all 0.25s; } .tab-places li a:hover { border-color: #027EAC; color: #027EAC; } .tab-places li a.active { color: #FFF; background-color: #027EAC; border: 1px solid rgba(0, 0, 0, 0.3); } .d-none { display: none; } .slider-branches .slider-hero-item::before { display: none; } .slider-branches .slider-hero-item picture { float: left; width: 100%; position: relative; background-size: cover; background-position: center; background-repeat: no-repeat; } .slider-branches ul.slick-dots { padding-bottom: 0; } .milestone-out { float: left; width: 100%; padding: 0 20px; position: relative; overflow: hidden; } .milestone-out::before { content: ""; position: absolute; top: 24px; bottom: 24px; left: 50%; width: 2px; margin-left: -1px; background-color: rgba(0, 0, 0, 0.06); } .milestone-wrap { float: left; width: 100%; position: relative; } .milestone-wrap::before, .milestone-wrap::after { content: ""; position: absolute; top: 0; left: 50%; width: 14px; height: 14px; margin-left: -7px; background-color: var(--color-orange); border-radius: 50%; } .milestone-wrap::after { top: auto; bottom: 0; } .milestone-item { float: left; width: 100%; margin: 80px 0; position: relative; display: flex; align-items: center; } .milestone-item:nth-child(even) .page-title::after { left: auto; right: 0; } .milestone-year { position: absolute; top: 50%; left: 50%; width: 140px; height: 80px; margin: -40px 0 0 -70px; text-align: center; font-size: 44px; font-weight: 500; color: #000; line-height: 80px; font-family: var(--font-tertiary); } .milestone-year::before, .milestone-year::after { content: ""; position: absolute; top: -30px; bottom: -30px; left: 0; right: 0; background-color: #FFF; transform: skewY(-8deg); } .milestone-year::after { top: -5px; bottom: -5px; background-color: #F2F2F2; } .milestone-year span { position: relative; z-index: 10; letter-spacing: -1px; } .milestone-picture { width: 50%; padding: 0 120px; } .milestone-picture i { width: 100%; display: inline-block; position: relative; aspect-ratio: 6/4; overflow: hidden; } .milestone-picture img { width: 100%; height: 100%; object-fit: cover; object-position: center; } .milestone-info { width: 50%; padding: 0 120px; margin-left: auto; } .milestone-info .page-title { margin-top: -50px; } .milestone-info .page-title strong { color: var(--color-grey); font-size: 29px; line-height: 40px; } .milestone-info .page-about { margin-top: -12px; } .milestone-wrap .milestone-item:nth-child(even) .milestone-info { text-align: right; } .hero-cta-wrap { float: left; width: 100%; padding-top: 60px; padding-bottom: 90px; position: relative; background: linear-gradient(135deg,var(--color-black) 25%,var(--color-orange),var(--color-black) 90%); } .hero-cta-bg { position: absolute; inset: 30px 8% 0 0; background-repeat: no-repeat; background-position: center; background-size: auto 100%; mix-blend-mode: color-burn; opacity: 0.33; } .hero-cta { float: left; width: 100%; position: relative; display: flex; align-items: center; z-index: 100; } .hero-cta-content { float: left; width: 50%; position: relative; color: var(--color-white); display: flex; flex-direction: column; gap: 20px; } .hero-cta-title { font-size: 32px; font-weight: 700; line-height: 120%; } .hero-cta-text { font-size: 20px; font-weight: 500; line-height: 120%; opacity: 0.75; } .hero-cta-button { margin-top: 32px; margin-bottom: 32px; } .hero-cta-button a { display: inline-flex; align-items: center; gap: 20px; color: var(--color-white); } .hero-cta-button a i { padding: 12px; font-size: 40px; color: var(--color-white); background-color: var(--color-orange); border-radius: 50%; transition: all 0.5s; } .hero-cta-button a:hover i { color: var(--color-orange); background-color: var(--color-white); } .hero-cta-button a small { max-width: 160px; flex: 1; font-weight: 500; } .hero-cta-highlights > ul { width: 100%; display: flex; flex-flow: row wrap; gap: 24px; row-gap: 12px; } .hero-cta-highlights > ul > li section { display: flex; align-items: center; gap: 8px; font-weight: 500; } .hero-cta-highlights > ul > li section i { font-size: 24px; } .hero-cta-form { float: right; width: 50%; max-width: 580px; padding-left: 60px; margin-left: auto; position: relative; } .hero-cta-form .proposal-form { width: 100%; padding: 40px; margin-top: 0 !important; border-radius: 6px; } .hero-cta-form .proposal-form h5 { margin-bottom: 8px; color: var(--color-black); } .hero-cta-form .proposal-form article { margin-bottom: 13px; color: var(--color-grey); } .hero-cta-form .proposal-form .form-item { padding-bottom: 20px; } .hero-cta-form .proposal-form .form-item:last-child { padding-bottom: 0; } .hero-cta-form .proposal-form .form-item.w50 { width: 50%; } .hero-cta-form-button { padding: 12px; position: relative; display: none; align-items: center; justify-content: center; gap: 12px; background-color: var(--color-white); border-radius: 6px; } .hero-cta-form-button i { font-size: 24px; } .hero-cta-form-button small { font-weight: 700; } @media only screen and (max-width:1560px) { .slider-hero-title-in section { font-size: 48px; } .slider-hero-title-in article { font-size: 26px; } } @media only screen and (max-width:1400px) { .outer { float: left; } .wrap { width: 1200px; } .top-150 { padding-top: 100px; } .top-100 { padding-top: 75px; } .top-50 { padding-top: 35px; } .bottom-150 { padding-bottom: 100px; } .bottom-100 { padding-bottom: 75px; } .bottom-50 { padding-bottom: 35px; } .slider-hero-title strong { font-size: 40px; line-height: 50px; } .machine-right { width: calc(67% - 40px); } .milestone-wrap { width: calc(100% + 240px); margin-left: -120px; } } @media only screen and (max-width:1280px) { .wrap { width: 980px; } #nav { padding-right: 90px; } #nav li { margin-right: 30px; } .slider-hero-title-in { width: 75%; padding-left: 60px; padding-bottom: 60px; } .slider-hero-title a { height: 40px; padding: 0 10px 0 20px; margin-top: 20px; line-height: 35px; } .slider-hero-title a::after { width: 20px; height: 36px; margin-left: 10px; background-size: 14px; } .hero-machines li a img { height: 60px; } .special-service-block a section, .references li a { padding: 20px; } .special-service-block a section::before { left: 20px; } .proposal-form { padding: 40px; } .footer-top li strong { font-size: 17px; line-height: 20px; } .breadcrumb { font-size: 11px; } .page-photo { padding-left: 25px; } .news .inner-20 { margin: 0 -15px; } .news li { padding: 0 15px; margin-bottom: 30px; } .machine-park li { width: 33.33334%; } .job-list .inner-20 { margin: 0 -15px; } .job-list li { width: 50%; padding: 0 15px; margin-bottom: 30px; } .job-list li a { padding: 25px; } .branch-item { padding: 19px; } .milestone-item { margin: 50px 0; } .slider-hero-title-in section { font-size: 40px; } .slider-hero-title-in article { font-size: 20px; } .hero-cta-wrap { padding-top: 40px; padding-bottom: 70px; } .hero-cta-button { margin-top: 20px; margin-bottom: 20px; } .hero-cta-form { padding-left: 30px; } .hero-cta-form .proposal-form { padding: 30px; } } @media only screen and (max-width:1280px) { #logo { top: 10px; } #logo img { height: 100px; } } @media only screen and (max-width:1023px) { .istanbul-vinc { padding-top: 0; } .wrap { float: left; width: 100%; padding: 0 30px; } .header { float: left; width: 100%; height: 60px; position: relative; top: auto !important; left: auto; } .nav-up { top: auto; } .header::before, .breadcrumb { display: none; } #logo { top: 0; left: 16px; } #logo img { height: 60px; } .header-lang-wrap { float: right; margin: 10px -15px 0 0; position: relative; top: auto; right: auto; } .nav-icon { float: right; width: 60px; height: 60px; position: relative; cursor: pointer; display: block; text-indent: -9999px; } .nav-icon span { position: absolute; top: 50%; left: 50%; width: 20px; height: 2px; margin: -1px 0 0 -10px; background-color: #000; transition: all 0.5s; } .nav-icon span::before { content: ""; position: absolute; top: -7px; left: 0; right: 0; height: 2px; background-color: #000; transition: all 0.5s; } .nav-icon span::after { content: ""; position: absolute; bottom: -7px; left: 0; right: 0; height: 2px; background-color: #000; transition: all 0.5s; } .nav-icon-close span { background-color: transparent; } .nav-icon-close span::before { -webkit-transform: rotate(-135deg); -moz-transform: rotate(-135deg); -o-transform: rotate(-135deg); -ms-transform: rotate(-135deg); transform: rotate(-135deg); top: 0; background-color: var(--color-orange); } .nav-icon-close span::after { -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -o-transform: rotate(135deg); -ms-transform: rotate(135deg); transform: rotate(135deg); bottom: 0; background-color: var(--color-orange); } .nav-icon-close::before { content: ""; border-bottom: 4px solid transparent; border-left: 10px solid transparent; border-right: 10px solid transparent; height: 0; position: absolute; width: 0; left: 50%; bottom: 0; margin-left: -10px; border-bottom-color: var(--color-grey); } #nav-wrap { position: absolute; top: 60px; left: 0; right: 0; padding: 30px; margin-top: 0; background-color: var(--color-grey); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); display: none; } .top-bar { height: auto; text-align: center; } .top-bar-inner { margin: 0 -10px; } .top-bar ul { width: 100%; } .top-bar li { width: 33.33334%; padding: 0 10px; margin-bottom: 5px; } .top-bar li a { width: 100%; padding: 0 20px; background-color: #FFF; border-radius: 20px; } #nav { width: 100%; padding: 30px 0 0 0; } #nav ul { width: 100%; border-top: 1px solid rgba(255, 255, 255, 0.05); } #nav li { width: 100%; margin-right: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.05); } #nav li.nav-multi::before { content: ""; position: absolute; top: 0; right: 0; width: 40px; height: 60px; background: url(../images/arrow-white-down.png) no-repeat center 52%; background-size: 14px auto; opacity: 0.7; } #nav li > a { width: 100%; padding: 0 20px; font-size: 15px; font-weight: 600; color: #FFF; letter-spacing: 1px; line-height: 60px; } #nav li > a.active { color: #F9A01B; } #nav li > a::before, .top-bar li::after { display: none; } #nav > ul li span { float: left; width: 100% !important; position: relative; top: auto; left: auto; right: auto; margin: 0 0 -1px 0; box-shadow: none; border-top: 0; } #nav li span::before { left: 38px; } .top-150 { padding-top: 75px; } .top-100 { padding-top: 50px; } .top-50 { padding-top: 25px; } .bottom-150 { padding-bottom: 75px; } .bottom-100 { padding-bottom: 50px; } .bottom-50 { padding-bottom: 25px; } .slider-hero ul.slick-dots { padding-bottom: 40px; } .slider-hero-title-in { padding-left: 0; } .hero-search { width: 100%; padding: 20px; padding-right: 0; margin-top: 30px; } .hero-search-title { float: left; width: calc(100% - 20px); margin-bottom: 24px; position: relative; top: auto; left: auto; } .hero-search section { width: 50%; margin-bottom: 20px; } .hero-search .button { float: left; width: calc(100% - 20px); position: relative; top: auto; right: auto; padding-right: 0; } .hero-machines ul { margin-bottom: -20px; overflow: hidden; } .hero-machines li { width: 25%; margin-bottom: 20px; } .hero-machines li::after { top: 30px; bottom: 30px; right: -2px; } .hero-machines-list .inner-15 { margin: 0 -10px; } .hero-machines-list li { padding: 0 10px; margin-bottom: 20px; } .block-branches { margin-top: 0; padding-top: 0; } .block-grey { padding: 0 0 40px 0; } .special-services-left, .special-services-right { width: 100%; } .special-services-right .inner-20 { margin: 0 -10px; } .special-service-block { padding: 0 10px; } .footer-connect, .footer-connect .wrap, .footer-top .wrap { padding: 0; } .footer-connect { margin-bottom: 20px; } .footer-connect::before, .footer-support > img, .footer-top li strong { display: none; } .footer-top { padding: 0; } .footer-top li section { padding: 30px !important; display: block; align-items: normal; } .footer-top li span, .footer-top li span a { width: 100%; text-align: center; } .footer-top li span a { padding: 0 8px; letter-spacing: 0; } .footer-social, .footer-block-wrap, .footer-logos, .footer-support { width: 100%; } .footer-social { padding: 30px; background-color: var(--color-grey); } .footer-block { width: 50% !important; } .footer-support { padding: 30px; height: auto; margin: 0; } .footer-support > a { float: left; position: static; left: 230px; bottom: -42px; } .copyright { padding: 30px 0; margin-top: 20px; } .copyright .left, .copyright .right { width: 100%; } .copyright .right { margin-top: 10px; } .page-title { padding: 29px 0 26px 0 !important; font-size: 30px !important; line-height: 40px; } .page-title::after { bottom: 16px; } .page-about { margin: -8px 0 23px 0; font-size: 15px; line-height: 25px; } .link-all { margin-bottom: 20px; } .link-all a { height: 40px; padding: 0 24px; line-height: 37px; } .branches-info { margin-bottom: 30px; } .branches-info-content { width: 100%; padding-right: 0; } .branches-info picture { display: none; } .proposal-content { width: 100%; padding-right: 0; } .proposal-form { width: 100%; padding: 30px; margin-top: 25px; } .proposal-form h5 { margin: -3px 0 13px 0; } .references li { width: 33.33334%; } .news li, .machine-park li { width: 50%; } .news-wrap { padding-left: 80px; margin-top: 30px; } .news-content { width: 100%; } .news-title { margin-top: -20px; } .news-sidebar { width: 100%; margin-top: 20px; } .machine-left { width: 100%; max-width: 600px; margin-bottom: 30px; } .machine-right, .job-list li, .contact-info { width: 100%; } .contact-info { margin-top: 10px; margin-bottom: 50px; } .branches li { width: 100%; margin-bottom: 20px; } .machine-list { font-size: 13px; } .tab-places { margin-top: 0; margin-bottom: 20px; padding-bottom: 5rem; white-space: nowrap; overflow-x: scroll; overflow-y: hidden; } .tab-places li { float: none !important; display: inline-block; padding-right: 5px; } .tab-places li a { padding: 0 15px; } .milestone-wrap { width: calc(100% + 160px); margin-left: -80px; } .milestone-picture, .milestone-info { padding: 0 80px; } .milestone-year { width: 100px; height: 60px; margin: -20px 0 0 -50px; font-size: 33px; line-height: 60px; } .milestone-info .page-title strong { font-size: 24px; line-height: 30px; } #nav li > a { width: 100%; padding: 0 20px; font-size: 15px; font-weight: 600; color: #FFF; letter-spacing: 1px; line-height: 60px; } #nav li > a.active { color: #F9A01B; } #nav li > a::before, .top-bar li::after { display: none; } #nav > ul li span { float: left; width: 100% !important; position: relative; top: auto; left: auto; right: auto; margin: 0 0 -1px 0; box-shadow: none; border-top: 0; } .footer-connect::before, .footer-support > img, .footer-top li strong { display: none; } .footer-support > section { width: 100%; gap: 8px; } .hero-machines li a img { height: 100px; } .hero-cta-wrap { padding-bottom: 30px; } .hero-cta { flex-direction: column; gap: 40px; } .hero-cta-content { width: 100%; } .hero-cta-form-button { display: flex !important; } .hero-cta-form { width: 100%; max-width: initial; padding-left: 0; margin-top: -20px; display: none; } .sub-hero { min-height: 140px; } .sub-hero picture { float: left; width: 100%; height: 10px !important; overflow: hidden; } .sub-hero-title { float: left; width: 100%; margin-bottom: 10px; position: relative; inset: initial; } } @media only screen and (max-width:767px) { .wrap { padding: 0 20px; } .cookies-wrap { right: 5px; bottom: 5px; left: 5px; } .header-lang-wrap { margin-right: -10px; } .top-bar li a { line-height: normal; } .top-bar li a span, .top-bar li a strong { display: none; } .top-bar li a img { float: none; display: inline-block; margin-right: 0; } .slider-hero ul.slick-dots { padding-bottom: 0; } .slider-hero-title-in { padding-bottom: 0; } .slider-hero-title strong { font-size: 30px; line-height: 40px; } .hero-search { width: 100%; padding: 20px 10px 20px 20px; margin-top: 70px; } .hero-search-title { float: left; width: calc(100% - 20px); margin-bottom: 24px; position: relative; top: auto; left: auto; } .hero-search section { width: 50%; margin-bottom: 20px; } .hero-search .button { float: left; width: calc(100% - 10px); position: relative; top: auto; right: auto; padding-right: 0; } .proposal-form, .footer-social, .footer-support { padding: 20px; } .footer-top li section { padding: 20px !important; } .footer-social li a img { height: 44px; } .footer-social li, .footer-logos li { padding-right: 20px; } .footer-logos li img { height: 40px; } .copyright { font-size: 11px; } .block-space { height: 40px; } .news-wrap { padding-left: 0; margin-top: 20px; } .page-share { float: left; width: 100%; position: static; } .page-share ul { width: 100%; } .page-share li { padding-right: 15px; } .page-share li:last-child { padding-right: 0; } .news-sidebar { padding: 20px; } .accordion-section-title { padding: 15px 40px 15px 20px; } .accordion-section-title i { left: 20px; } .accordion-section-content { padding-left: 0; } .accordion-section-text, .rent-form { padding-left: 20px; } .rent-line { padding: 18px 20px 19px 90px; margin: 20px 0; } .rent-line::before { left: 25px; top: 0; bottom: 0; } .catalog-content { background: url(../images/icon-catalog-download-2.png) no-repeat right bottom / 35% auto, #EEE; padding: 18px 20px 19px 90px; } .catalog-content::before { left: 25px; top: 0; bottom: 0; } .catalog-content::after { display: none; } .catalog-content a { height: 50px; padding: 0 15px; } .machine-technical-specs li span { width: 100%; padding-right: 0; text-align: left; } .machine-technical-specs li strong { width: 100%; } .machine-specs { padding-left: 20px; margin: -5px 0; } .machine-specs li, .simple-list li { width: 100%; padding: 0 0 15px 25px; background-position: 0 5px; background-size: 14px auto; } .machine-technical-specs li { padding: 10px 20px; } .rent-line { margin-top: 10px; } .hero-machines-list li { width: 50%; } .machine-list { text-align: left; } .machine-list li { display: block; padding: 20px 50px 20px 20px; } .machine-list li:first-child { display: none; } .machine-list li div { width: 100%; height: auto; display: block; } .machine-list li div section { display: block; } .machine-list li div section label { display: block; margin: 12px 0 0 0; color: #888; font-size: 10px; line-height: 14px; } .machine-logo { margin-bottom: 5px; } .machine-pdf, .machine-apply { width: auto !important; margin-top: 15px; margin-right: 20px; } .machine-apply { margin-right: 0; } .machine-pdf img, .machine-apply img { float: left; } .machine-pdf i, .machine-apply i { float: left; display: block; margin-left: 7px; font-weight: 600; line-height: 30px; } a.machine-go { top: 0; right: 0; width: 40px; height: 100%; margin-top: 0; background-color: transparent; text-indent: -9999px; border-radius: 0; box-shadow: -1px 0 0 #EEE; } .page-about table { min-width: 640px; } .block-two { width: 100%; } .milestone-wrap { width: 100%; padding-top: 60px; margin-left: 0; } .milestone-item { display: block; background-color: #FFF; } .milestone-year { top: 0; left: 50%; } .milestone-year::before { bottom: 0; } .milestone-picture { float: left; width: 100%; padding: 0; margin: 80px 0 34px 0; text-align: center; } .milestone-picture i { max-width: 400px; } .milestone-picture i::before { top: -15px; right: -15px; left: 15px; bottom: 15px; } .milestone-info { float: left; width: 100%; padding: 0; text-align: center !important; } .milestone-wrap .milestone-item:nth-child(even) { display: flex; flex-flow: column; } .milestone-wrap .milestone-item:nth-child(even) .milestone-picture { order: 1; } .milestone-wrap .milestone-item:nth-child(even) .milestone-info { order: 2; } .milestone-info .page-title { padding-bottom: 35px !important; margin-top: -30px; margin-bottom: 10px; } .milestone-item .page-title::after { left: calc(50% - 20px) !important; right: auto !important; } .footer-social li { padding-right: 14px; } .footer-logos li { padding-right: 20px; } .hero-search { margin-top: 20px; } } @media only screen and (max-width:640px) { .sub-hero { background-size: cover; background-repeat: no-repeat; } .sub-hero picture img { max-height: 70px; } .page-about table tr td { padding: 10px 10px 10px 20px !important; font-size: 14px; } .special-service-block { width: 100%; height: auto; margin-bottom: 20px; } .special-service-block:last-child { margin-bottom: 0; } .block-hero-machine::before { display: none; } .references li { width: 50%; } .page-photo { width: 100%; max-width: initial; padding: 8px 0 20px 0; } .page-split { width: 100%; max-width: initial; padding: 8px 0 20px 0; } .page-split.w50 { width: 100%; } .doc-table li a { float: left; width: 100%; padding: 15px 65px 15px 20px; } .doc-table-name { width: 100%; } .doc-table-type { width: 100%; text-align: left; font-size: 13px; } .doc-download { right: 10px; min-width: initial; width: 40px; height: 40px; padding: 0; margin-top: -20px; text-indent: -9999px; border-radius: 50%; } .doc-download::before { width: 100%; height: 100%; } .branches-hero-map { height: 50vh; } .footer-block { width: 100% !important; } .footer-block-content > ul { display: flex; flex-flow: row wrap; } .footer-block-content > ul li { width: calc(50% - 8px); } .footer-block-content > ul li:nth-child(even) { margin-left: auto; } } @media only screen and (max-width:540px) { .slider-hero-item::before { right: 0; background-image: linear-gradient(90deg, #FFF, rgba(255, 255, 255, 0.2)); } .slider-hero-title strong { font-size: 20px; line-height: 25px; } .hero-machines li { width: 50%; } .proposal-contact section { margin-bottom: 20px; flex-basis: 100%; } .proposal-contact section:last-child { margin-bottom: 0; } .proposal-contact section strong { margin-top: -20px; } .news li, .blog li, .machine-park li { width: 100%; margin-bottom: 20px; } .machine-park li a picture { max-width: 400px; } .form-item, .form-item-3, .branch-item section { width: 100%; } .slider-machine { padding-left: 45px; } .slider-machine ul.slick-dots { width: 30px; } .slider-machine ul.slick-dots li { width: 30px; height: 45px; } .footer-support > div { position: relative; left: 0; bottom: 0; } .footer-support > div > a strong { } .milestone-out { padding: 0 10px; } .news li, .machine-park li { width: 100%; margin-bottom: 20px; } .form-item, .form-item-3 { width: 100%; } .slider-hero-title-in section { padding-bottom: 16px; margin-bottom: 16px; font-size: 24px; letter-spacing: -0.5px; } .slider-hero-title-in article { font-size: 16px; } } @media only screen and (max-width:420px) { .hero-search section, .references li { width: 100%; } } .button::before { top: 0; right: auto; bottom: auto; left: -30%; width: 30%; height: 100%; opacity: 0.8; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0)); transform: skewX(-18deg); transition: transform 0.34s ease, opacity 0.34s ease; pointer-events: none; } .button { overflow: hidden; isolation: isolate; } .button:hover::before { left: -30%; opacity: 0.8; transform: translateX(320%) skewX(-18deg); } .button:active::before { left: -30%; opacity: 1; transform: translateX(370%) skewX(-18deg); } .button:hover::after { right: 13px; } .button:active::after { right: 11px; } .button:active { letter-spacing: 1.8px; } .form-item .button:not(.w100):active { padding-left: 28px; padding-right: 38px; } .hero-search .button:hover::after { right: 13px !important; } .hero-search .button:active::after { right: 11px !important; } @media only screen and (max-width:1023px) { .form-item .button:hover::after { right: 13px; } .form-item .button:active::after { right: 11px; } .hero-search .button:hover::after { right: 8px !important; } .hero-search .button:active::after { right: 6px !important; } } #nav li > a { float: left; position: relative; font-weight: 700; letter-spacing: 0.5px; line-height: 80px; transition: all 0.3s; } #nav li > a.active { color: var(--color-orange); } #nav li > a::before { content: ""; float: left; width: 2px; height: 10px; margin: 30px 7px 0 0; background-color: #000; transition: all 0.75s; opacity: 0.3; transform: skewX(-20deg); } #nav li:hover > a::before, #nav li > a.active::before { opacity: 1; background-color: var(--color-grey); } #nav li > a.active::before { background-color: var(--color-orange); } #nav > ul li span { display: none; position: absolute; top: 70px; left: -20px; width: 260px; padding: 15px; background-color: #FFF; box-shadow: 0 10px 50px rgba(0, 0, 0, 0.2); text-align: left; } #nav > ul li span a { float: left; width: 100%; padding: 10px 15px; position: relative; font-weight: 600; transition: all 0.3s; } #nav > ul li span a:hover { background-color: #F5F5F5; } #nav > ul li span.nav-machines { width: 480px; padding-bottom: 5px; } #nav > ul li span.nav-machines section { float: left; width: 100%; display: flex; flex-flow: row wrap; } #nav > ul li span.nav-machines section a { width: 50%; margin-bottom: 10px; } #nav > ul li span.nav-machines section a img { height: 40px; } #nav > ul li span.nav-machines section a i { display: block; padding-top: 5px; } .hero-screen > img { float: left; width: 100%; max-height: 800px; } .slick-prev:hover { background-image: url(../images/arrow-white-left.png); } .slick-next:hover { background-image: url(../images/arrow-white-right.png); } .mask > img, .mask-top > img { float: left; width: 100%; } .footer-top li:last-child section strong { color: #FFF; } .footer-top li:last-child span a { box-shadow: 4px 4px 0 rgba(255, 255, 255, 0.5); } .footer-support > img { height: 100px; } .footer-support > section { display: flex; flex-direction: column; gap: 4px; } .footer-support > section i { display: block; color: var(--color-cold); font-weight: 600; letter-spacing: 1px; } .footer-support > section a { display: block; font-weight: 400; font-family: var(--font-tertiary); font-size: 24px; line-height: 100%; letter-spacing: 1px; } .footer-block-content > ul { width: 100%; } .footer-block-content > ul li { width: 100%; } .footer-block-content > ul li a { float: left; width: 100%; } .hero-search .button:hover { background-color: var(--color-black); } .sub-hero::before, .sub-hero::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: linear-gradient(145deg, var(--color-black), rgba(249, 103, 20, 0.1)); } .sub-hero::after { opacity: 0.5; } .news li section > span { position: absolute; top: -15px; left: 25px; height: 30px; padding: 0 25px; color: #FFF; font-weight: 500; line-height: 30px; background-color: var(--color-grey); } .news li section > strong { float: left; width: 100%; margin-bottom: 10px; font-size: 15px; font-weight: 600; overflow: hidden; position: relative; } .news li section > em { float: left; width: 100%; margin: 3px 0 9px 0; } @media only screen and (max-width:374px) { } /* Blog / Makale Detay */ /* .breadcrumb varsayilan olarak margin-top:-30px ile sub-hero'nun uzerine biniyor. Sub-hero'su olmayan makale duzeninde bu bindirme ve beyaz kutu gorunumu sifirlaniyor. */ .breadcrumb.slim { height: auto; padding: 30px 0 0 0; margin-top: 0; background-color: transparent; box-shadow: none; } .article-info { margin-top: -10px; display: flex; align-items: center; gap: 20px; color: var(--color-grey); } .article-info small { display: flex; align-items: center; gap: 6px; color: var(--color-grey); line-height: 14px; } .article-info small img { height: 20px; opacity: 0.75; } .article-info small i { font-size: 20px; color: var(--color-cold); } .article-hero { max-height: 600px; margin-top: 24px; margin-bottom: 30px; overflow: hidden; } .article-hero img { width: 100%; height: 100%; object-fit: cover; } .article-summary { padding: 20px 24px; margin-bottom: 32px; background-color: var(--color-light); } .article-summary > small { float: left; width: 100%; margin-bottom: 16px; font-size: 18px; font-weight: 600; color: var(--color-orange); } .article-summary > ul { width: 100%; display: flex; flex-direction: column; flex-flow: row rap; gap: 4px; counter-reset: item; } .article-summary > ul > li { width: 100%; counter-increment: item; } .article-summary > ul > li a { font-size: 15px; font-weight: 500; } .article-summary > ul > li a::before { content: counter(item) ". "; } .article-text h2, .article-text h3, .article-text h4 { margin-bottom: 10px; font-weight: 700; font-size: 28px; line-height: 120%; } .article-text h3, .article-text h4 { font-size: 24px; } .article-text p { margin-bottom: 20px; } .article-text p:last-child { margin-bottom: 0; } .article-text b, .article-text strong { font-weight: 600; } .article-text ul, .article-text ol { float: none; padding-bottom: 20px; display: table; } .article-text ol { padding-left: 20px; padding-bottom: 20px; display: inline-block; } .article-text ul ul, .article-text ol ol { margin-top: 10px; } .article-text ul li { width: 100%; padding-left: 20px; margin-bottom: 10px; position: relative; } .article-text ul li::before { content: ""; position: absolute; top: 12px; left: 0; width: 6px; height: 6px; background-color: var(--color-blue); border-radius: 50%; } .article-text ol li { width: 100%; margin-bottom: 15px; display: list-item; list-style: decimal; } .article-text ul li:last-child, .article-content ol li:last-child { margin-bottom: 0; } .article-text ol li::marker { font-weight: 700; } .article-text table { width: 100% !important; background-color: #F4F4F4; text-align: center; font-weight: 500; } .article-text table th, .article-text table td { padding: 10px; border: 1px solid var(--color-cold); font-size: 15px; line-height: 20px; } .article-text table th { background-color: var(--color-grey); color: var(--color-white); } .article-in { padding: 12px; display: flex; flex-direction: column; gap: 8px; text-align: center; background-color: #EEE; } .article-in-photo { display: flex; justify-content: center; } .article-in-text { font-size: 13px; font-style: italic; line-height: 16px; } .block-cta { padding: 30px; background-color: var(--color-orange); color: var(--color-white); display: flex; flex-direction: column; gap: 20px; text-align: center; } .medium-title { font-size: 24px; font-weight: 700; line-height: 120%; } /* .link-all a float:left oldugundan text-align ile ortalanmiyor. */ .link-all.centered a { float: none; display: inline-block; } @media only screen and (max-width:767px) { .breadcrumb.slim { padding-top: 20px; } .article-info { margin: -20px 0 20px 0; } .article-info small { margin-right: 20px; font-size: 13px; } .article-hero, .article-summary { margin-bottom: 25px; } .article-summary { padding: 20px; } .block-cta { padding: 35px 20px; } .medium-title { font-size: 21px; line-height: 29px; } } /* Top-bar: mobilde ikinci telefon gizleniyor, birincisi ikon-only oluyor */ @media only screen and (max-width:1023px) { .top-bar li.hide-mobile { display: none; } .top-bar li.icon-only-mobile a span { display: none; } /* .top-bar li a img (0,1,3) media query disinda tanimli oldugu icin li. ile (0,2,3) ozgullugu asilmali. */ .top-bar li.icon-only-mobile a img { float: none; display: inline-block; margin-right: 0; } } /* Footer uyelik logolari: 4. logo eklendigi icin satir tasmasi flex ile yonetiliyor. */ .footer-logos ul { display: flex; flex-wrap: wrap; align-items: center; row-gap: 20px; } /* IAPA rozeti dikey formatli oldugu icin yatay logolardan daha yuksek basiliyor. */ .footer-logos li.footer-logo-tall img { height: 90px; } @media only screen and (max-width:767px) { .footer-logos li.footer-logo-tall img { height: 60px; } } /* Destek hatti alaninin sagina eklenen IAPA rozeti. Yanindaki ana logo dar ekranlarda gizlendigi icin display burada ayrica tanimlaniyor. */ .footer-support > img.footer-support-badge { height: 90px; margin-left: auto; flex: none; display: block; } /* 1280px altinda destek alani daraliyor: rozet kuculuyor, aralik azaliyor. */ @media only screen and (max-width:1280px) { .footer-support { gap: 16px; } .footer-support > img.footer-support-badge { height: 60px; } } /* Rozetin gorundugu genislikte destek alani esit uc kolona bolunuyor: logo solda, numaralar ortada, rozet kendi kolonunda ortali. */ @media only screen and (min-width:1281px) { .footer-support > img:first-child { flex: 1; object-fit: contain; object-position: left center; } .footer-support > section { flex: 1; align-items: center; text-align: center; } .footer-support > img.footer-support-badge { flex: 1; margin-left: 0; object-fit: contain; } } /* Editorden gelen zengin metin alanlari. Dosya basindaki reset h1-h6 ve p icin margin: 0 veriyor, .page-about ve .blog-detail bunu geri vermiyordu; basliklar paragraflara yapisik cikiyordu. */ .page-about h1, .page-about h2, .page-about h3, .page-about h4, .page-about h5, .page-about h6 { margin: 32px 0 12px 0; } /* Kutunun dis bosluklari degismesin diye ilk ogede ust bosluk yok. */ .page-about h1:first-child, .page-about h2:first-child, .page-about h3:first-child, .page-about h4:first-child, .page-about h5:first-child, .page-about h6:first-child { margin-top: 0; } .page-about p { margin-bottom: 20px; } .page-about p:last-child { margin-bottom: 0; } .page-about table { margin-bottom: 20px; } /* Global reset ul/li'yi float: left yaptigi icin editor listeleri bir sonraki basligin uzerine biniyordu. .article-text kendi madde isaretini ::before ile cizdigi icin disinda birakiliyor, yoksa cift madde isareti olusur. */ .page-about:not(.article-text) ul, .page-about:not(.article-text) ol { float: none; display: block; padding-left: 20px; margin-bottom: 20px; list-style: disc; } .page-about:not(.article-text) ol { list-style: decimal; } .page-about:not(.article-text) ul li, .page-about:not(.article-text) ol li { float: none; display: list-item; margin-bottom: 8px; } .page-about:not(.article-text) ul li:last-child, .page-about:not(.article-text) ol li:last-child { margin-bottom: 0; } /* Breadcrumb'da klasor sayfalari gezilebilir olmadigi icin link yerine duz metin basiliyor; satir duzeni float ile kuruldugundan span de ayni sekilde hizalaniyor. */ .breadcrumb section > span { float: left; color: #777; } /* Sube galerisi: gercek kullanildigi icin (arama motorlari background-image'i okuyamiyor) kare oran object-fit ile korunuyor. */ .slider-branches .slider-hero-item picture { background-image: none !important; } .slider-branches .slider-hero-item img { height: auto; aspect-ratio: 1 / 1; object-fit: cover; }