/* Theme Name: LightMix Template: twentysixteen Version: 2.0 (01.01.2023) Description: Template for LightMix Author: LightMix License: Privat */ /* ------- Fonts ---------------------------------------------------------------------------------------------------- */ @font-face { font-family: 'fontello'; font-style: normal; font-weight: normal; src: url('fonts/fontello.eot'); src: local(''), url('fonts/fontello.eot#iefix') format('embedded-opentype'), url('fonts/fontello.woff2') format('woff2'), url('fonts/fontello.woff') format('woff'), url('fonts/fontello.ttf') format('truetype'), url('fonts/fontello.svg#fontello') format('svg'); font-display: swap; } @font-face { font-family: 'Geometric'; font-style: normal; font-weight: 500; src: url('fonts/Geometric415BT-MediumA.eot'); src: local(''), url('fonts/Geometric415BT-MediumA.eot?#iefix') format('embedded-opentype'), url('fonts/Geometric415BT-MediumA.woff2') format('woff2'), url('fonts/Geometric415BT-MediumA.woff') format('woff'), url('fonts/Geometric415BT-MediumA.ttf') format('truetype'), url('fonts/Geometric415BT-MediumA.svg#Geometric415BT-MediumA') format('svg'); font-display: swap; } @font-face { font-family: 'Geometric'; font-style: italic; font-weight: 300; src: url('fonts/Geometric415BT-LiteItalicA.eot'); src: local(''), url('fonts/Geometric415BT-LiteItalicA.eot?#iefix') format('embedded-opentype'), url('fonts/Geometric415BT-LiteItalicA.woff2') format('woff2'), url('fonts/Geometric415BT-LiteItalicA.woff') format('woff'), url('fonts/Geometric415BT-LiteItalicA.ttf') format('truetype'), url('fonts/Geometric415BT-LiteItalicA.svg#Geometric415BT-LiteItalicA') format('svg'); font-display: swap; } @font-face { font-family: 'Geometric'; font-style: normal; font-weight: 300; src: url('fonts/Geometric415BT-LiteA.eot'); src: local(''), url('fonts/Geometric415BT-LiteA.eot?#iefix') format('embedded-opentype'), url('fonts/Geometric415BT-LiteA.woff2') format('woff2'), url('fonts/Geometric415BT-LiteA.woff') format('woff'), url('fonts/Geometric415BT-LiteA.ttf') format('truetype'), url('fonts/Geometric415BT-LiteA.svg#Geometric415BT-LiteA') format('svg'); font-display: swap; } /* montserrat-300 - latin */ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 300; src: url('fonts/montserrat-v25-latin-300.eot'); src: local(''), url('fonts/montserrat-v25-latin-300.eot?#iefix') format('embedded-opentype'), url('fonts/montserrat-v25-latin-300.woff2') format('woff2'), url('fonts/montserrat-v25-latin-300.woff') format('woff'), url('fonts/montserrat-v25-latin-300.ttf') format('truetype'), url('fonts/montserrat-v25-latin-300.svg#Montserrat') format('svg'); font-display: swap; } /* montserrat-regular - latin */ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; src: url('fonts/montserrat-v25-latin-regular.eot'); src: local(''), url('fonts/montserrat-v25-latin-regular.eot?#iefix') format('embedded-opentype'), url('fonts/montserrat-v25-latin-regular.woff2') format('woff2'), url('fonts/montserrat-v25-latin-regular.woff') format('woff'), url('fonts/montserrat-v25-latin-regular.ttf') format('truetype'), url('fonts/montserrat-v25-latin-regular.svg#Montserrat') format('svg'); font-display: swap; } /* montserrat-500 - latin */ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 500; src: url('fonts/montserrat-v25-latin-500.eot'); src: local(''), url('fonts/montserrat-v25-latin-500.eot?#iefix') format('embedded-opentype'), url('fonts/montserrat-v25-latin-500.woff2') format('woff2'), url('fonts/montserrat-v25-latin-500.woff') format('woff'), url('fonts/montserrat-v25-latin-500.ttf') format('truetype'), url('fonts/montserrat-v25-latin-500.svg#Montserrat') format('svg'); font-display: swap; } /* montserrat-600 - latin */ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600; src: url('fonts/montserrat-v25-latin-600.eot'); src: local(''), url('fonts/montserrat-v25-latin-600.eot?#iefix') format('embedded-opentype'), url('fonts/montserrat-v25-latin-600.woff2') format('woff2'), url('fonts/montserrat-v25-latin-600.woff') format('woff'), url('fonts/montserrat-v25-latin-600.ttf') format('truetype'), url('fonts/montserrat-v25-latin-600.svg#Montserrat') format('svg'); font-display: swap; } /* montserrat-700 - latin */ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700; src: url('fonts/montserrat-v25-latin-700.eot'); src: local(''), url('fonts/montserrat-v25-latin-700.eot?#iefix') format('embedded-opentype'), url('fonts/montserrat-v25-latin-700.woff2') format('woff2'), url('fonts/montserrat-v25-latin-700.woff') format('woff'), url('fonts/montserrat-v25-latin-700.ttf') format('truetype'), url('fonts/montserrat-v25-latin-700.svg#Montserrat') format('svg'); font-display: swap; } /* montserrat-300italic - latin */ @font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 300; src: url('fonts/montserrat-v25-latin-300italic.eot'); src: local(''), url('fonts/montserrat-v25-latin-300italic.eot?#iefix') format('embedded-opentype'), url('fonts/montserrat-v25-latin-300italic.woff2') format('woff2'), url('fonts/montserrat-v25-latin-300italic.woff') format('woff'), url('fonts/montserrat-v25-latin-300italic.ttf') format('truetype'), url('fonts/montserrat-v25-latin-300italic.svg#Montserrat') format('svg'); font-display: swap; } /* montserrat-italic - latin */ @font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 400; src: url('fonts/montserrat-v25-latin-italic.eot'); src: local(''), url('fonts/montserrat-v25-latin-italic.eot?#iefix') format('embedded-opentype'), url('fonts/montserrat-v25-latin-italic.woff2') format('woff2'), url('fonts/montserrat-v25-latin-italic.woff') format('woff'), url('fonts/montserrat-v25-latin-italic.ttf') format('truetype'), url('fonts/montserrat-v25-latin-italic.svg#Montserrat') format('svg'); font-display: swap; } /* montserrat-500italic - latin */ @font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 500; src: url('fonts/montserrat-v25-latin-500italic.eot'); src: local(''), url('fonts/montserrat-v25-latin-500italic.eot?#iefix') format('embedded-opentype'), url('fonts/montserrat-v25-latin-500italic.woff2') format('woff2'), url('fonts/montserrat-v25-latin-500italic.woff') format('woff'), url('fonts/montserrat-v25-latin-500italic.ttf') format('truetype'), url('fonts/montserrat-v25-latin-500italic.svg#Montserrat') format('svg'); font-display: swap; } /* montserrat-600italic - latin */ @font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 600; src: url('fonts/montserrat-v25-latin-600italic.eot'); src: local(''), url('fonts/montserrat-v25-latin-600italic.eot?#iefix') format('embedded-opentype'), url('fonts/montserrat-v25-latin-600italic.woff2') format('woff2'), url('fonts/montserrat-v25-latin-600italic.woff') format('woff'), url('fonts/montserrat-v25-latin-600italic.ttf') format('truetype'), url('fonts/montserrat-v25-latin-600italic.svg#Montserrat') format('svg'); font-display: swap; } /* montserrat-700italic - latin */ @font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 700; src: url('fonts/montserrat-v25-latin-700italic.eot'); src: local(''), url('fonts/montserrat-v25-latin-700italic.eot?#iefix') format('embedded-opentype'), url('fonts/montserrat-v25-latin-700italic.woff2') format('woff2'), url('fonts/montserrat-v25-latin-700italic.woff') format('woff'), url('fonts/montserrat-v25-latin-700italic.ttf') format('truetype'), url('fonts/montserrat-v25-latin-700italic.svg#Montserrat') format('svg'); font-display: swap; } /* open-sans-300 - latin */ @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 300; src: url('fonts/open-sans-v34-latin-300.eot'); src: local(''), url('fonts/open-sans-v34-latin-300.eot?#iefix') format('embedded-opentype'), url('fonts/open-sans-v34-latin-300.woff2') format('woff2'), url('fonts/open-sans-v34-latin-300.woff') format('woff'), url('fonts/open-sans-v34-latin-300.ttf') format('truetype'), url('fonts/open-sans-v34-latin-300.svg#OpenSans') format('svg'); font-display: swap; } /* open-sans-regular - latin */ @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; src: url('fonts/open-sans-v34-latin-regular.eot'); src: local(''), url('fonts/open-sans-v34-latin-regular.eot?#iefix') format('embedded-opentype'), url('fonts/open-sans-v34-latin-regular.woff2') format('woff2'), url('fonts/open-sans-v34-latin-regular.woff') format('woff'), url('fonts/open-sans-v34-latin-regular.ttf') format('truetype'), url('fonts/open-sans-v34-latin-regular.svg#OpenSans') format('svg'); font-display: swap; } /* open-sans-500 - latin */ @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 500; src: url('fonts/open-sans-v34-latin-500.eot'); src: local(''), url('fonts/open-sans-v34-latin-500.eot?#iefix') format('embedded-opentype'), url('fonts/open-sans-v34-latin-500.woff2') format('woff2'), url('fonts/open-sans-v34-latin-500.woff') format('woff'), url('fonts/open-sans-v34-latin-500.ttf') format('truetype'), url('fonts/open-sans-v34-latin-500.svg#OpenSans') format('svg'); font-display: swap; } /* open-sans-600 - latin */ @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 600; src: url('fonts/open-sans-v34-latin-600.eot'); src: local(''), url('fonts/open-sans-v34-latin-600.eot?#iefix') format('embedded-opentype'), url('fonts/open-sans-v34-latin-600.woff2') format('woff2'), url('fonts/open-sans-v34-latin-600.woff') format('woff'), url('fonts/open-sans-v34-latin-600.ttf') format('truetype'), url('fonts/open-sans-v34-latin-600.svg#OpenSans') format('svg'); font-display: swap; } /* open-sans-700 - latin */ @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 700; src: url('fonts/open-sans-v34-latin-700.eot'); src: local(''), url('fonts/open-sans-v34-latin-700.eot?#iefix') format('embedded-opentype'), url('fonts/open-sans-v34-latin-700.woff2') format('woff2'), url('fonts/open-sans-v34-latin-700.woff') format('woff'), url('fonts/open-sans-v34-latin-700.ttf') format('truetype'), url('fonts/open-sans-v34-latin-700.svg#OpenSans') format('svg'); font-display: swap; } /* open-sans-800 - latin */ @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 800; src: url('fonts/open-sans-v34-latin-800.eot'); src: local(''), url('fonts/open-sans-v34-latin-800.eot?#iefix') format('embedded-opentype'), url('fonts/open-sans-v34-latin-800.woff2') format('woff2'), url('fonts/open-sans-v34-latin-800.woff') format('woff'), url('fonts/open-sans-v34-latin-800.ttf') format('truetype'), url('fonts/open-sans-v34-latin-800.svg#OpenSans') format('svg'); font-display: swap; } /* open-sans-300italic - latin */ @font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 300; src: url('fonts/open-sans-v34-latin-300italic.eot'); src: local(''), url('fonts/open-sans-v34-latin-300italic.eot?#iefix') format('embedded-opentype'), url('fonts/open-sans-v34-latin-300italic.woff2') format('woff2'), url('fonts/open-sans-v34-latin-300italic.woff') format('woff'), url('fonts/open-sans-v34-latin-300italic.ttf') format('truetype'), url('fonts/open-sans-v34-latin-300italic.svg#OpenSans') format('svg'); font-display: swap; } /* open-sans-italic - latin */ @font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 400; src: url('fonts/open-sans-v34-latin-italic.eot'); src: local(''), url('fonts/open-sans-v34-latin-italic.eot?#iefix') format('embedded-opentype'), url('fonts/open-sans-v34-latin-italic.woff2') format('woff2'), url('fonts/open-sans-v34-latin-italic.woff') format('woff'), url('fonts/open-sans-v34-latin-italic.ttf') format('truetype'), url('fonts/open-sans-v34-latin-italic.svg#OpenSans') format('svg'); font-display: swap; } /* open-sans-500italic - latin */ @font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 500; src: url('fonts/open-sans-v34-latin-500italic.eot'); src: local(''), url('fonts/open-sans-v34-latin-500italic.eot?#iefix') format('embedded-opentype'), url('fonts/open-sans-v34-latin-500italic.woff2') format('woff2'), url('fonts/open-sans-v34-latin-500italic.woff') format('woff'), url('fonts/open-sans-v34-latin-500italic.ttf') format('truetype'), url('fonts/open-sans-v34-latin-500italic.svg#OpenSans') format('svg'); font-display: swap; } /* open-sans-600italic - latin */ @font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 600; src: url('fonts/open-sans-v34-latin-600italic.eot'); src: local(''), url('fonts/open-sans-v34-latin-600italic.eot?#iefix') format('embedded-opentype'), url('fonts/open-sans-v34-latin-600italic.woff2') format('woff2'), url('fonts/open-sans-v34-latin-600italic.woff') format('woff'), url('fonts/open-sans-v34-latin-600italic.ttf') format('truetype'), url('fonts/open-sans-v34-latin-600italic.svg#OpenSans') format('svg'); font-display: swap; } /* open-sans-700italic - latin */ @font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 700; src: url('fonts/open-sans-v34-latin-700italic.eot'); src: local(''), url('fonts/open-sans-v34-latin-700italic.eot?#iefix') format('embedded-opentype'), url('fonts/open-sans-v34-latin-700italic.woff2') format('woff2'), url('fonts/open-sans-v34-latin-700italic.woff') format('woff'), url('fonts/open-sans-v34-latin-700italic.ttf') format('truetype'), url('fonts/open-sans-v34-latin-700italic.svg#OpenSans') format('svg'); font-display: swap; } /* open-sans-800italic - latin */ @font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 800; src: url('fonts/open-sans-v34-latin-800italic.eot'); src: local(''), url('fonts/open-sans-v34-latin-800italic.eot?#iefix') format('embedded-opentype'), url('fonts/open-sans-v34-latin-800italic.woff2') format('woff2'), url('fonts/open-sans-v34-latin-800italic.woff') format('woff'), url('fonts/open-sans-v34-latin-800italic.ttf') format('truetype'), url('fonts/open-sans-v34-latin-800italic.svg#OpenSans') format('svg'); font-display: swap; } /* lato-regular - latin */ @font-face { font-family: 'Lato'; font-style: normal; font-weight: 400; src: url('fonts/lato-v23-latin-regular.eot'); src: url('fonts/lato-v23-latin-regular.eot?#iefix') format('embedded-opentype'), url('fonts/lato-v23-latin-regular.woff2') format('woff2'), url('fonts/lato-v23-latin-regular.woff') format('woff'), url('fonts/lato-v23-latin-regular.ttf') format('truetype'), url('fonts/lato-v23-latin-regular.svg#Lato') format('svg'); font-display: swap; } /* lato-italic - latin */ @font-face { font-family: 'Lato'; font-style: italic; font-weight: 400; src: url('fonts/lato-v23-latin-italic.eot'); src: url('fonts/lato-v23-latin-italic.eot?#iefix') format('embedded-opentype'), url('fonts/lato-v23-latin-italic.woff2') format('woff2'), url('fonts/lato-v23-latin-italic.woff') format('woff'), url('fonts/lato-v23-latin-italic.ttf') format('truetype'), url('fonts/lato-v23-latin-italic.svg#Lato') format('svg'); font-display: swap; } /* lato-700 - latin */ @font-face { font-family: 'Lato'; font-style: normal; font-weight: 700; src: url('fonts/lato-v23-latin-700.eot'); src: url('fonts/lato-v23-latin-700.eot?#iefix') format('embedded-opentype'), url('fonts/lato-v23-latin-700.woff2') format('woff2'), url('fonts/lato-v23-latin-700.woff') format('woff'), url('fonts/lato-v23-latin-700.ttf') format('truetype'), url('fonts/lato-v23-latin-700.svg#Lato') format('svg'); font-display: swap; } /* lato-700italic - latin */ @font-face { font-family: 'Lato'; font-style: italic; font-weight: 700; src: url('fonts/lato-v23-latin-700italic.eot'); src: url('fonts/lato-v23-latin-700italic.eot?#iefix') format('embedded-opentype'), url('fonts/lato-v23-latin-700italic.woff2') format('woff2'), url('fonts/lato-v23-latin-700italic.woff') format('woff'), url('fonts/lato-v23-latin-700italic.ttf') format('truetype'), url('fonts/lato-v23-latin-700italic.svg#Lato') format('svg'); font-display: swap; } /* lato-900 - latin */ @font-face { font-family: 'Lato'; font-style: normal; font-weight: 900; src: url('fonts/lato-v23-latin-900.eot'); src: url('fonts/lato-v23-latin-900.eot?#iefix') format('embedded-opentype'), url('fonts/lato-v23-latin-900.woff2') format('woff2'), url('fonts/lato-v23-latin-900.woff') format('woff'), url('fonts/lato-v23-latin-900.ttf') format('truetype'), url('fonts/lato-v23-latin-900.svg#Lato') format('svg'); font-display: swap; } /* lato-900italic - latin */ @font-face { font-family: 'Lato'; font-style: italic; font-weight: 900; src: url('fonts/lato-v23-latin-900italic.eot'); src: url('fonts/lato-v23-latin-900italic.eot?#iefix') format('embedded-opentype'), url('fonts/lato-v23-latin-900italic.woff2') format('woff2'), url('fonts/lato-v23-latin-900italic.woff') format('woff'), url('fonts/lato-v23-latin-900italic.ttf') format('truetype'), url('fonts/lato-v23-latin-900italic.svg#Lato') format('svg'); font-display: swap; } /* ------- Clear ---------------------------------------------------------------------------------------------------- */ html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, blockquote, img, strong, em, ol, ul, li, form, button, input, select, textarea, article, aside, figure, figcaption, footer .top-block, header, nav, section { margin: 0; padding: 0; border: 0; vertical-align: baseline; } ol, ul { list-style: none; } a { text-decoration: none; transition: .4s; } img { max-width: 100%; display: block; height: auto; } .size-full { width: 100%; } .clear { clear: both; height: 0; line-height: 0; font-size: 0; overflow: hidden; } *:focus { outline: 0; } *, *::before, *::after { box-sizing: border-box; } ::selection { background: #ffa600; color: #fff; } p { margin-bottom: 1em; } p:last-child { margin-bottom: 0; } /* ------- Global ------- */ .inner-20-content { max-width: 1240px; margin: 0 auto; padding: 0 20px; position: relative; } .inner-20plus-content { max-width: 1438px; margin: 0 auto; padding: 0 20px; position: relative; } .inner-40-content { max-width: 1280px; margin: 0 auto; padding: 0 40px; position: relative; } .inner-20 { padding: 0 20px; margin: 0 auto; } .inner-40 { padding: 0 40px; margin: 0 auto; } .inner-1400 { max-width: 1440px; margin: 0 auto; padding: 0 20px; position: relative; } .nowrap { white-space: nowrap; } .table { width: 100%; display: table; } .table-cell { vertical-align: middle; display: table-cell; } .newsh1 ~ .blogh1 { display: none; } .title-block { padding: 15px 0; } .content { font-size: 18px; line-height: 1.6; padding: 45px 0 calc(3.3vw + 40px); color: #252525; } .content h1 { font: 300 35px/1.1 Geometric; margin-bottom: 29px; color: #000; } .content h2 { font: 300 33px/1.1 Geometric; margin-bottom: 29px; color: #000; } .content h1 a, .content h2 a { color: #000; } .content h1 a:hover, .content h2 a:hover { color: #ffa600; } .content h3, .content .h3 { font: 300 27px/1 Geometric; margin-bottom: 17px; } .content h4 { font: 300 24px/1 Geometric; margin-bottom: 15px; } .content-grey-menu { padding-top: 35px; width: 100%; } .content-grey-menu ul { width: calc(100% + 30px); margin: 0 -15px; display: flex; flex-wrap: wrap; justify-content: center; } .content-grey-menu a { font: 700 17px/1 Lato; color: #000; padding: 5px 15px; display: block; } .content-grey-menu a:hover, .content-grey-menu .current-menu-item a { color: #ffa600; } .content-grey-bg { font-size: 25px; padding: 55px 0 40px; color: #464646; transition: all 0.4s ease-in-out; } .center { text-align: center } .bg-grey { background: #f5f5f5; } .ul-01 li { position: relative; padding: 0 0 7px 18px; font-size: 18px; } .ul-01 li:last-child { padding-bottom: 1px; } .ul-01 li:after { content: ""; width: 7px; height: 7px; position: absolute; left: 0; top: 8px; background: #22313f; } .ul-01 li a, .ul-01 li { color: #444; } .ul-01 li a:hover { color: #ffa600; } .ul-02 li { position: relative; padding: 0 0 7px 15px; font-size: 17px; } .ul-02 li:after { content: ""; width: 6px; height: 6px; position: absolute; left: 0; top: 11px; background: #555; } .ul-02 li a, .ul-02 li { font-size: 17px; color: #444; display: block; } .ul-02 li a:hover { color: #ffa600; } .ul-02 li ul li { margin: 0 0 0 -15px; } .ul-02 li ul { margin: 7px 0 -7px; } .ul-01-2 .ul-01 { float: left; width: 48%; margin-right: 4%; } .ul-01-2 .ul-01:last-child { margin-right: 0; } .ul-01-3 .ul-01 { float: left; margin-right: 4%; width: 30.666666%; } .ul-01-3 .ul-01:last-child { margin-right: 0; } .column-2 { overflow: hidden; } .column-2 .col { float: left; width: 48%; margin-right: 4%; } .column-2 .col:last-child { margin-right: 0; } /* ------- Error-404 ------- */ .error-404 { text-align: center; } .error-404 h2 { margin-bottom: calc(4% + 20px); } .error-404 h1 { font: 500 55px/1.1 Geometric !important; padding: 0; margin-bottom: calc(5% + 20px); text-transform: uppercase; color: #000; } .error-404 .menu-work-block { padding: 0; margin-bottom: calc(4% + 20px); } .error-404 .menu-work { font: 500 23px/1 Geometric; text-transform: uppercase; display: flex; flex-wrap: wrap; justify-content: center; } .error-404 .menu-work li { display: inline-block; padding: 0 calc(.7vw + 6px); position: relative; } .error-404 .menu-work li:after { position: absolute; top: 50%; right: -3px; margin-top: -3px; border-radius: 100%; content: ""; width: 6px; height: 6px; background: #ffa600; } .error-404 .menu-work li:last-child:after { display: none; } .error-404 .menu-work a { white-space: nowrap; padding: 3px 0; color: rgba(0,0,0,0.76); display: block; } .error-404 .menu-work a:hover, .error-404 .current-menu-item a, .error-404 .current-post-parent a { color: #ffa600; } .error-404 .award { margin-bottom: calc(5% + 20px); } .error-404 .award .inner { display: flex; justify-content: center; flex-wrap: wrap; width: calc(100% + 3%); margin-right: -1.5%; margin-left: -1.5%; } .error-404 .award .inner .img { max-width: 205px; width: calc(20% - 3%); margin: 0 1.5%; height: auto; } .error-404 .button-02 { margin-bottom: calc(2% + 10px); } /* ------- Design ------- */ .design { position: relative; padding: 0 0 85px; background: #fff; } .design .inner-40 { text-align: justify; margin: 0 auto; max-width: 1340px; position: relative; font-size: 0; } .design .inner-40:after { display: inline-block; width: 100%; content: ""; } .design .col { display: inline-block; width: calc(33.333333% - 3%); margin-right: 4%; vertical-align: top; } .design .col:last-child { margin-right: auto} .design .col .title {text-align: left; font: 500 36px/1 Geometric; text-transform: uppercase; margin: 75px 0 50px; letter-spacing: -1.5px; position: relative; transition: all 0.7s; overflow: hidden; display: inline-block; color: #17313b; } .design .col .title:hover { color: transparent; } .design .col .title:before { content: attr(data-letters); position: absolute; z-index: 2; overflow: hidden; color: #747e89; white-space: nowrap; width: 0; transition: width 0.4s 0.3s; } .design .col .title:hover:before { width: 100%; } /*.design .col-01 .title { color: #17313b; }*/ /*.design .col-02 .title { color: #de2525; }*/ /*.design .col-03 .title { color: #ffa604; }*/ .design .ul-01 { width: 100%; float: none; } .design li { padding-bottom: 10px; text-align: left; } .design li a { color: #56616c; } .design .col .icon { margin: 0 auto; width: 220px; height: 220px; display: block; border-radius: 100%; background-size: 55.4% auto !important; } .design .col-01 .icon { background: #fff url("images/design-col-01.png") no-repeat 50% 50%; } .design .col-02 .icon { background: #fff url("images/design-col-02.png") no-repeat 50% 50%; } .design .col-03 .icon { background: #fff url("images/design-col-03.png") no-repeat 50% 50%; } .design .col .icon:hover { background-color: #eee; } .design .col ul { padding-left: 3%; } /* ------- Proposal ------- */ .proposal { background: #183048; padding: 52px 0; position: relative; font: 300 30px/1 Geometric; color: #fff; text-align: center; } .proposal a { margin-right: 1.1%; color: #fff; display: inline-block; border: 1px solid #959595; border-radius: 30px; text-align: center; padding: 11px 0; max-width: 370px; width: 51%; } .proposal a:hover { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.1); } .proposal .tel { padding: 12px 0; text-align: left; margin-left: 0.9%; } /* ------- Sites ------- */ .sites { overflow: hidden; padding: 48px 0; } .sites .col { float: left; width: 25%; position: relative; cursor: pointer; } .sites .col img { display: block; width: 100%; } .sites .col .hover { cursor: default; transition: all 0.4s ease-in-out; opacity: 0; position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 1; background: rgba(0,0,0,0.7); } .sites .col .hover:hover { opacity: 1; } .sites .col .hover .title { font: 300 30px/1 Geometric; text-align: center; color: #fff; margin: 36% 0 0; } .sites .col .hover a { position: absolute; bottom: 36%; left: 50%; margin-left: -65px; width: 100%; display: block; color: #ffa600; border: 1px solid #ffa600; border-radius: 30px; text-align: center; font-size: 14px; line-height: 1; font-weight: 600; text-transform: uppercase; padding: 9px 0 7px; max-width: 130px; } .sites .col .hover a:hover { background: #ffa600; color: #fff; } /* ------- BxSlider v4.1.2 ------- */ .bx-wrapper { position: relative; margin: 0; padding: 0; zoom: 1; -ms-touch-action: pan-y; touch-action: pan-y; } .bx-wrapper img { display: block; } .bx-wrapper .bx-controls-direction a { position: absolute; top: 0; outline: 0; text-indent: -9999px; z-index: 1; } .bx-wrapper .bx-viewport { -webkit-transform: translateZ(0); transform: translateZ(0); } .bx-wrapper .bx-loading { min-height: 50px; height: 100%; width: 100%; position: absolute; top: 0; left: 0; z-index: 2000; } .bx-wrapper .bx-pager .bx-pager-item, .bx-wrapper .bx-controls-auto .bx-controls-auto-item { display: inline-block; zoom: 1; display: inline; } .bx-wrapper .bx-controls-direction a.disabled { display: none; } .bx-wrapper .bx-controls-auto { text-align: center; } /* ------- Category Global ------- */ .content-left { float: left; width: 80%; max-width: 1076px; } .sidebar { float: left; width: 17%; margin-left: 3%; text-align: left; } .sidebar .block-01 { margin-bottom: 30px; margin-top: -7px; } .sidebar .block-01 .block-title { font-size: 18px; line-height: 1.6; font-weight: 600; margin-bottom: 10px; } .sidebar .block-01 li { color: #252525; font-size: 16px; position: relative; padding: 0 0 10px 12px; } .sidebar .block-01 li:last-child { padding-bottom: 0; } .sidebar .block-01 li:after { content: ""; width: 4px; height: 4px; position: absolute; left: 0; top: 11px; background: #ffa600; } .sidebar .block-01 li a { color: #252525; display: block; } .sidebar .block-01 li a:hover { color: #ffa600; } .button-01 { display: block; text-align: center; font: 300 18px/1 Geometric; color: #fff; background: #000; padding: 13px 7px; margin: 0 auto 10px; border-radius: 25px; } .button-01:hover { background: #ffa600; } .sidebar .button-01 { max-width: 280px; padding: 13px 0; } .sidebar .button-01:last-of-type { margin-bottom: 30px; } .category-portfolio.archive { overflow: inherit; } .category-portfolio { padding-bottom: 0; } .category-portfolio.grey { background: #f5f5f5; } .category-portfolio.last { padding-bottom: 45px; } .category-portfolio p { margin-bottom: 5px; } .category-portfolio h2 { margin-bottom: 5px; } .category-portfolio h2 a { color: #000; } .category-portfolio h2 a:hover, .category-portfolio .more-01:hover { color: #ffa600; } /* ------- Category Websites ------- */ .websites-images .quote { background: #46ad4b; color: #fff; font-size: 32px; line-height: 1.2; font-weight: 600; text-align: left; display: flex; width: 100%; padding: calc(20px + 4.2vw) calc(5px + 4vw); flex-direction: column; margin-bottom: 30px; } .websites-images .quote small { font-size: 26px; line-height: 1.2; font-style: italic; padding-top: 40px; display: block; } .websites-images .quote.center { text-align: center; } .websites-images .quote-top { margin-top: -30px; } .websites-images .quote-full { position: relative; background: transparent; padding-left: 0; padding-right: 0; } .websites-images .quote-full:after { z-index: -1; background: #25a8df; content: ""; top: 0; height: 100%; left: -50%; right: -50%; width: 100vw; margin: 0 auto; position: absolute; } .websites-images .quote-full-inner { margin: 0 auto; max-width: 1100px; text-align: center; } .websites-images { overflow: hidden; } .websites-images img { margin-bottom: 30px; display: block; height: auto; width: 100%; } .websites-images .m8 { margin: -8px -8px 22px; width: calc(100% + 16px); max-width: calc(100% + 16px); } .postid-3737 .websites-images .quote-full:after { background: url("https://testing10.lightmixdesign.com/wp-content/uploads/2023/01/2020-Project-actimizeb2.jpg") no-repeat center / cover; } .websites-images .full-wrap { position: relative; width: 100vw; margin-bottom: 30px; clear: both; margin-left: calc((100% - 100vw) / 2); } .websites-images .full-wrap-mt { margin-top: -45px; } .websites-images .full { width: 100%; } .websites-images .full img { width: 100%; } .websites-images .left { line-height: 0; width: 49%; float: left; max-width: 682px; text-align: left; } .websites-images .right { line-height: 0; width: 49%; float: right; max-width: 682px; text-align: right; } .websites-images .center { line-height: 0; width: 100%; } .websites-images .shadows { box-shadow: 0 0 8px rgba(0,0,0,0.15); } .websites-images .float-left { float: left; } .websites-images .float-right { float: right; } .websites-images .video { overflow: hidden; position: relative; width: 100%; } .websites-images .video:after { padding-top: 56.25%; display: block; content: ''; } .websites-images .video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .websites-images .img-3, .websites-post .img-3 { text-align: justify; line-height: 0; font-size: 0; } .websites-images .img-3:after, .websites-post .img-3:after { width: 100%; display: inline-block; content: ""; } .websites-images .img-3 img, .websites-post .img-3 img { margin-bottom: 30px; display: inline-block; vertical-align: top; float: none !important; max-width: 32% !important; height: auto; } .websites-images .sidebar .icon { display: flex; flex-wrap: wrap; justify-content: center; } .websites-images .sidebar .icon img { margin-bottom: 30px; width: auto; } .websites-post .inner-02 { display: flex; flex-wrap: wrap; } .websites-post.category-portfolio .content-left .scroll-pane { height: auto !important; width: 100% !important; } .websites-post .content-left { float: none; } .websites-post .sidebar { float: none; position: sticky; top: 30px; align-self: flex-start; } .websites-post .sidebar .icon { margin-bottom: 30px; } .websites-post .sidebar .icon img { display: block; margin: 0 auto 30px; } .websites-post .sidebar .icon img:last-of-type { margin-bottom: 0; } .websites-post { text-align: center; } .websites-post .site { text-align: center; margin: 0 auto 15px; color: #636363; font-style: italic; } .websites-post .img-block { background: #f5f5f5; text-align: center; position: relative; } .websites-post .img-block img { float: left; width: 100%; height: auto; } .websites-post .img-block .more-02 { transition: all 0.4s; color: #fff; background: #363636; text-align: center; width: 160px; display: block; padding: 7px 0; position: absolute; bottom: 0; left: 50%; margin-left: -80px; } .websites-post .img-block .more-02:hover, .websites-post .img-block .more-01:hover .more-02 { background: #ffa600; } .websites-post .img-block .more-01 { display: block; } /*.websites-post .img-block .more-01:hover img { opacity: 0.7; -webkit-filter: grayscale(100%); filter: grayscale(100%); }*/ .websites-post .img-block .more-01:hover { box-shadow: 0 0 10px rgba(0,0,0,0.5); opacity: 0.7; } .websites-post .img-block .more-01 img { transition: all 0.5s; float: none; display: block; } .websites-top { padding: 30px 0 0; position: relative; } .websites-top .title { color: #464646; font: 300 37px/1 Geometric; text-align: center; margin-bottom: 18px; } .websites-top .desc { margin: 0 auto; padding: 0 0 15px; color: #252525; font-size: 18px; line-height: 1.5; text-align: center; } .category .websites-post .desc-01, .single .websites-top .desc-02 { display: block; } .category .websites-post .desc-02, .single .websites-top .desc-01 { display: none; } .websites-top .desc .link { text-align: center; margin-top: 25px; } .websites-top .desc .link .button-01 { display: inline-block; padding-left: 5%; padding-right: 5%; } .websites-sub-menu { background: #f5f5f5; } .websites-sub-menu .menu { text-align: center; } .websites-sub-menu .menu ul li { display: inline-block; } .websites-sub-menu .menu ul li a { color: #636363; font-size: 16px; line-height: 1; display: block; padding: 10px 20px; border-bottom: 3px solid transparent; } .websites-sub-menu .menu ul li a:hover, .websites-sub-menu .menu ul li.active a { color: #252525; border-bottom: 3px solid #ffa718; } .websites-banner { color: #fff; font-size: 32px; line-height: 1.2; font-weight: 500; text-align: center; height: 480px; } .websites-banner .inner-20 { max-width: 1140px; margin: 0 auto; display: table; height: 480px; } .websites-banner .text { display: table-cell; vertical-align: middle; } .websites-banner .text small { font-size: 26px; line-height: 1.2; font-style: italic; padding-top: 40px; display: block; } .websites-post .content-left img { float: left; height: auto; } .postid-352 .websites-images .sidebar .icon img { margin-bottom: 70px; } .postid-467 .websites-images .top-left { float: left; max-width: 77%; } .postid-467 .websites-images .bottom-right { float: right; max-width: 77%; margin-top: -21.5%; } .postid-435 .websites-images .top-left { float: left; max-width: 90.5%; } .postid-435 .websites-images .bottom-right { float: right; max-width: 90.5%; margin-top: -40.5%; } .postid-477 .websites-images .top-right { margin-top: -36%; } .postid-477 .websites-images .top-left { max-width: 91%; } .postid-1699 .websites-images .top-left { float: left; max-width: 77%; } .postid-1699 .websites-images .bottom-right { float: right; max-width: 77%; margin-top: -88.3% } .postid-2020 .websites-images .top-left { float: left; max-width: 77%; } .postid-2020 .websites-images .bottom-right { float: right; max-width: 77%; margin-top: -33%; } .postid-2065 .websites-images .top-left { float: left; max-width: 81%; } .postid-2065 .websites-images .bottom-right { float: right; max-width: 81%; margin-top: -67%; } .postid-2096 .websites-images .top-left { float: left; max-width: 77%; } .postid-2096 .websites-images .bottom-right { float: right; max-width: 77%; margin-top: -26%; } .postid-537 .websites-banner, .postid-1154 .websites-banner { height: 753px; } .postid-543 .websites-banner, .postid-1151 .websites-banner { margin-top: -162px; } .postid-2065 .mt-01 { margin-top: 28.3%; } .postid-2065 .mlr { margin: 0 -8px 30px -9px; width: calc(100% + 15px); max-width: calc(100% + 15px); } .postid-2065 .ml { margin: 0 0 30px -9px; width: calc(100% + 8px); max-width: calc(100% + 8px); } .postid-2131 .websites-images .left-top { max-width: 89%; } .postid-2131 .websites-images .right-center{ margin-top: -18.2%; float: right; z-index: 1; position: relative; max-width: 89%; } .postid-2131 .websites-images .left-bottom { float: left; margin-top: -11%; position: relative; z-index: 2; max-width: 89%; } .postid-2150 .websites-images .img-01 { max-width: 78%; } .postid-2150 .websites-images .img-02 { max-width: 78%; float: right; margin-top: -85%; position: relative; } .postid-2150 .websites-images .img-03 { max-width: 78%; } .postid-2150 .websites-images .img-04 { max-width: 78%; float: right; margin-top: -74%; position: relative; } .postid-2161 .websites-images .img-01 { max-width: 72%; } .postid-2161 .websites-images .img-02 { float: right; max-width: 71%; margin-top: -28%; position: relative; margin-bottom: 75px; } .postid-2161 .websites-images .img-03 { max-width: 62%; } .postid-2161 .websites-images .img-04 { float: right; position: relative; margin-top: -48%; max-width: 61%; } .postid-2161 .websites-images .img-05 { float: left; position: relative; max-width: 62%; margin-top: -13%; } .postid-2161 .websites-images .img-06 { float: right; position: relative; max-width: 61%; margin-top: -47%; } .postid-2161 .websites-images .img-07 { float: left; position: relative; max-width: 61%; margin-top: -19%; } .postid-2161 .websites-images .img-08 { max-width: 61%; } .postid-2161 .websites-images .img-09 { float: right; position: relative; max-width: 61%; margin-top: -92%; margin-bottom: 75px; } .postid-2161 .websites-images .img-10 { margin-top: -28px; } .postid-2187 .websites-images .img-01 { margin-top: -45px; } .postid-2187 .websites-images .sidebar .icon { justify-content: space-between; } .postid-2000 .mb { margin-bottom: 60px; } .postid-2000 .websites-images .img-01 { float: left; max-width: 54%; margin-top: -20%; } .postid-2000 .websites-images .img-02 { float: left; max-width: 54%; margin-top: -19%; z-index: 1; position: relative; } .postid-2000 .websites-images .img-03 { float: right; max-width: 54%; } .postid-2000 .websites-images .img-04 { float: right; max-width: 54%; margin-top: -10%; position: relative; z-index: 2; } .postid-2000 .websites-images .img-05 { float: right; max-width: 54%; margin-top: -10%; } .postid-2228 .websites-images .img-01 { float: left; max-width: 76%; } .postid-2228 .websites-images .img-02 { float: right; max-width: 76%; position: relative; margin-top: -25%; } .postid-2822 .websites-images .img-01 { max-width: 521px; width: 76.4% } .postid-2822 .websites-images .img-02 { float: right; z-index: 1; position: relative; bottom: 20%; margin-top: -67.8%; max-width: 524px; width: 76.7%; } .postid-2846 .websites-images .img-01 { max-width: 524px; width: 76.9%; } .postid-2846 .websites-images .img-02 { float: right; z-index: 1; position: relative; bottom: 20%; margin-top: -50%; max-width: 524px; width: 76.7%; } .postid-3463 .websites-post .sidebar .icon img { max-width: 90%; } .postid-5843 .websites-post .content-left img { max-width: 1394px; width: 130%; max-height: 1071px; height: auto; } .postid-3330 .websites-post .sidebar .icon img { max-width: 170px; } .postid-6214 .websites-post .content-left img { max-width: 1458px; max-height: 1025px; width: 136%; margin: -5px -15vw 0 -7vw; } .postid-6222 .websites-post .content-left img { max-width: 1542px; max-height: 928px; width: 144%; margin: -5px 0 0 -7vw; } /* ------- Apli -------*/ .apli { overflow: hidden; padding: 55px 0 50px; } .apli .inner-1400 { max-width: 1460px; } .apli br { display: none; } .apli .block { text-align: left; } .apli .block .title { font: 300 37px/1.2 Geometric; color: #183048; } .apli .block p { color: #252525; font-size: 18px; line-height: 1.5; padding: 20px 0; } .apli .block .button-01 { max-width: 230px; margin: 0 0 10px; } .apli .block-01 { width: 28%; } .apli .block-02 { width: 72%; } .apli .block-02 img { display: inline-block; } .apli .block-01 .icon { display: block; margin: 25px 0 0; } .apli .block-01 .hide-02 { display: none; } .apli-02 { background: #f5f5f5; } .apli-01 .block-01 { float: right; } .apli-01 .block-02 { float: left; text-align: left; padding-right: 20px; } .apli-02 .block-01 { float: left; } .apli-02 .block-02 { float: right; text-align: right; padding-left: 20px;} /* ------- Testimonial ------- */ .testimonials-wrap { font-size: 0; } .testimonials-col { display: inline-block; vertical-align: top; margin-right: 6%; width: 47%; } .testimonials-col:nth-child(2n+2) { margin-right: 0; } .testimonials-top { position: relative; background: #f5f5f5; padding: 25px 30px; margin: 0 0 60px 0; font-size: 16px; line-height: 1.5; font-weight: 300; } .testimonials-top em { font-size: 13px; line-height: 1.4; font-style: italic; margin-top: 5px; display: block; text-align: right; } .testimonials-top:after { width: 0; height: 0; border-top: 36px solid #f5f5f5; border-right: 52px solid transparent; position: absolute; z-index: 1; bottom: -36px; left: 30px; content: ""; } /* ------- Category News, Clients, ------- */ .news { margin-bottom: 18px; } .news:last-child { margin-bottom: 0; } .news .date { display: inline-block; width: 120px; } .news .title { display: inline-block; } .news .title a { color: #444; border-bottom: 1px dashed #999; } .news .title a:hover { color: #ffa600; border-bottom: 1px dashed #ffa600; } /* ------- Pagination ------- */ .pagination { text-align: center; font-size: 0; } .pagination .page-numbers { display: inline-block; margin: 0 3px; padding: 10px; min-width: 38px; background: #183048; font-size: 18px; line-height: 1; color: #fff; border-radius: 2px; } .pagination .page-numbers.current, .pagination a.page-numbers:hover { background: #ffa600; } /* ------- Clients Page ------- */ .clients-block-img { font-size: 0; display: flex; flex-wrap: wrap; width: calc(100% + 6%); margin: 0 -3%; } .clients-block-img br, .clients-block-img p { display: none; } .clients-block-img img { width: calc(25% - 6%); max-width: 300px; height: auto; margin: 0 3% 5%; } .clients-block { overflow: hidden; } .clients-block .col { float: left; width: 30.666666%; margin-right: 4%; } .clients-block .col:last-child { margin-right: 0; } .clients-block .col .title { font-weight: bold; margin: 20px 0 15px; } .clients-block a { color: #444; border-bottom: 1px dashed #999; } .clients-block a:hover { color: #ffa600; border-bottom: 1px dashed #ffa600; } /* ------- Category Blog ------- */ /*.blog-post { overflow: hidden; }*/ .blog-post { position: relative; } .blog-post .inner-01 { position: static; } .blog-post h1 { border-bottom: 1px solid #eee; padding-bottom: 15px; font-weight: 500 !important; } .blog-post h2 { font-weight: 500 !important; } .blog-post .date { font-size: 15px; line-height: 1; color: #555; margin: -10px 0 28px; } .blog-post .more { color: #555; display: inline-block; font-size: 15px; line-height: 1; margin-top: 10px; } .blog-post ul { margin: 0 0 28px 35px; } .blog-post li { padding: 0 0 10px; list-style: outside disc; } .blog-post li:last-child { padding-bottom: 1px; } .blog-post li a { color: #444; display: block; } .blog-post li a:hover, .blog-post .tags a:hover, .blog-post .more:hover { color: #ffa600; } .blog-post .pagination { margin-top: 75px; } .blog-post .tags { color: #aaa; font-size: 15px; line-height: 1.6; padding: 0; } .blog-post .tags a { color: #aaa; border-bottom: 1px dashed #ddd; margin: 13px 0 0; display: inline-block; } .blog-post p a { color: #444; border-bottom: 1px dashed #999; } .blog-post p a:hover { color: #ffa600; border-bottom: 1px dashed #ffa600; } .blog-post img { height: auto; display: block; } .blog-post-content { overflow: hidden; margin-bottom: 70px; display: flex; align-items: flex-start; flex-wrap: wrap; } .blog-post-content:last-child { margin-bottom: 0; } .blog-post-thumb { width: 27%; margin-right: 5%; margin-top: 7px; position: relative; } .blog-post-thumb:after { float: left; padding-top: 100%; content: ""; } .blog-post-thumb img { object-fit: cover; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .blog-post-thumb + .blog-post-text { width: 68%; } .blog-post-post-wrap { display: flex; } .blog-post-post { flex-grow: 1; flex-shrink: 1; max-width: 1260px; } .blog-post-aside-sticky { position: sticky; top: 130px; } .blog-post-aside { flex-grow: 0; flex-shrink: 0; width: 270px; margin-left: 4%; margin-right: 30px; } .blog-post-aside .link-page { width: 100%; max-width: 270px; padding-left: 25px; padding-right: 25px; margin-bottom: 20px; } .blog-post-aside .link-page:last-child { margin-bottom: 0; } .tags a:hover { border-bottom: 1px dashed #ffa600; } .blog-related { border-top: 1px solid #eee; padding-bottom: 45px !important; } .blog-related .ul-02 { margin-bottom: 35px; } .blog-related .return a { position: relative; height: 32px; display: block; max-width: 200px; text-align: center; text-transform: uppercase; color: #fff; font: 500 18px/1 Geometric; background: #555; padding: 7px; border-radius: 16px; } .blog-related .return a:hover { background: #ffa600; } .blog-footer { padding: 45px 0 !important; } .blog-footer .column-3 { overflow: hidden; } .blog-footer .column-3 .col { float: left; margin-right: 4%; } .blog-footer .column-3 .col:last-child { margin-right: 0; } .blog-footer .column-3 .col-01 { width: 29%; } .blog-footer .column-3 .col-02 { width: 43%; } .blog-footer .column-3 .col-03 { width: 20%; } /* ------- Page About ------- */ .page-about .content .column-3 { text-align: justify; margin: 32px 0 -100px; padding: 0 20px; position: relative; z-index: 1; } .page-about .content .column-3:after { width: 100%; content: ""; display: inline-block; } .page-about .content .column-3 .col { padding: 66px 15px 0; vertical-align: top; background: #fff; width: 280px; height: 280px; border-radius: 100%; box-shadow: 0 0 24px rgba(190,190,190,0.3); display: inline-block; text-align: center; } .page-about .content .column-3 .col .title { font-size: 50px; line-height: 1; font-weight: 300; color: #000; letter-spacing: -2px; margin-bottom: 19px; } .page-about .content .column-3 .col a { font: 500 21px/1 Geometric; color: #ffa600; } .page-about .content .column-3 .col a:hover { color: #666; } /* ------- Page About - What ------- */ .page-about .content.what { overflow: hidden; } /* ------- Page 01 ------- */ .tt-01 { background: url("images/sl1.jpg") no-repeat 50% 0 / cover; padding: 110px 0 20px; } .bl-01 { text-align: center; } .tt-01 .inner-20 { max-width: 990px; } .tt-01 .title { color: #fff; font: 300 93px/1 Geometric; letter-spacing: -3px; text-align: center; text-shadow: 0 0 12px rgba(0, 0, 0, 0.29); } .tt-01 .desc { color: #fff; margin: 30px 0 60px; font-size: 35px; line-height: 1; text-align: center; text-shadow: 0 0 8px rgba(0, 0, 0, 0.26); } .tt-01 .cols3 { font-size: 0; } .tt-01 .cols3 .col { color: #fff; display: inline-block; text-align: center; font-size: 33px; line-height: 1; font-weight: 300; max-width: 33.333333%; width: 100%; margin-bottom: 30px; vertical-align: top; } .tt-05.forex-page, .tt-05.forex-page .clients { padding-top: 0; } .tt-01.forex-page { background: url("images/sl4.jpg") no-repeat 50% 0 / cover; } .tt-01 .cols4 { text-align: justify; padding-top: 50px; font-size: 0; } .tt-01 .cols4:after { content: ""; display: inline-block; width: 100%; font-size: 0; } .tt-01 .cols4 .col { text-align: left; color: #fff; display: inline-block; font: 300 20px/1 Geometric; width: 24%; margin-bottom: 30px; vertical-align: top; } .tt-01 .cols4 .col:nth-child(3) { width: 26%; } .tt-01 .cols4 .col:nth-child(4) { width: 23%; } .tt-01 .cols4 li { position: relative; padding: 0 0 10px 20px; } .tt-01 .cols4 li:after { position: absolute; left: 0; top: 7px; content: ""; background: #fff; width: 6px; height: 6px; } .tt-04.forex-page { background: #fff; padding-bottom: 5px; } .tt-04 .cols2 { text-align: justify; font-size: 0; } .tt-04 .cols2:after { content: ""; display: inline-block; width: 100%; } .tt-04 .cols2 .col { display: inline-block; text-align: center; font-size: 28px; line-height: 1; font-weight: 300; max-width: 48%; width: 100%; padding: 0 0 40px; vertical-align: top; } .tt-04 .cols2 .col img { display: block; margin: 0 auto 20px; max-width: 40%; } .tt-04 .cols2 .col p { padding: 15px 0 0; font-size: 16px; line-height: 1.6; text-align: left; } .tt-04 .cols2 .col p a { font-size: 16px; line-height: 1.6; margin: 0; border-bottom: 1px solid #252525; display: inline-block; } .tt-04 .cols2 .col p a:hover { border-bottom: 1px solid #ffa600; } .tt-11 { background: #f2f2f2; text-align: justify; padding: 30px 0; font-size: 0 !important; } .tt-11 img { display: inline-block; vertical-align: middle; } .tt-11 img.clear-img { width: 100%; height: 0; } .tt-11 img:nth-child(1) { max-width: 278px; width: 24%; } .tt-11 img:nth-child(2) { max-width: 233px; width: 20%; } .tt-11 img:nth-child(3) { max-width: 181px; width: 16%; } .tt-11 img:nth-child(4) { max-width: 238px; width: 20%; } .requestpr { margin: 0 auto; display: block; background: #ffa600; color: #252525; font: 300 29px/1 Geometric; padding: 10px 20px; text-align: center; transition: all 0.4s ease-in-out 0s; width: 100%; max-width: 355px; border-radius: 30px; } .requestpr:hover { box-shadow: inset 0 55px 0 #ffcd56; } .tt-03 { overflow: hidden; } .tt-03 img { display: block; width: 100%; height: auto; } .tt-04 { background: #f2f2f2; } .tt-04 .cols3 { text-align: justify; } .tt-04 .cols3:after { content: ""; display: inline-block; width: 100%; } .tt-04 .cols3 .col { display: inline-block; text-align: center; font-size: 28px; line-height: 1; font-weight: 300; max-width: 31%; width: 100%; padding: 20px 0 30px; vertical-align: top; } .tt-04 .cols3 .col img { display: block; margin: 0 auto 20px; max-width: 40%; } .tt-04 a { font: 300 29px/1 Geometric; color: #252525; margin: 0 auto; display: block; max-width: 290px; } .tt-04 a:hover { color: #ffa600; } .tt-05 { padding-top: 20px; } .tt-06 { overflow: hidden; } .tt-06 .col { float: left; width: 25%; } .tt-06 a { float: left; width: 100%; } .tt-06 a img { display: block; height: auto; width: 100%; } .tt-07 .inner-20-content { overflow: hidden; } .tt-08 { background: #F2F2F2; } .tt-08 .column-2 .col { background: #fff; padding: 20px 20px 45px; position: relative; } .tt-08 a { color: #444; } .tt-08 a:hover { color: #ffa600; } .tt-08 .more { background: #ebebeb; color: #000; font-size: 15px; line-height: 1; position: absolute; bottom: 0; right: 0; text-align: center; width: 108px; padding: 8px 0 9px; } .tt-08 .more:hover { box-shadow: inset 110px 0 0 #ffa600; color: #000; } .tt-08 .more-blog { margin: 20px auto 0; display: block; max-width: 100px; text-align: center; } .tt-09 ul .date { display: inline-block; width: 100px; } .tt-09 ul li { padding: 0 0 12px 0; font-size: 18px; line-height: 1.6; } .tt-09 ul li:last-child { padding-bottom: 1px; } .tt-09 ul a { font-size: 18px; line-height: 1.6; color: #444; } .tt-09 ul a:hover { color: #ffa600; } /* ------- Arrow Jump Top ------- */ #top { display: none; position: fixed; right: 20px; bottom: 20px; color: #fff; cursor: pointer; border-radius: 2px; z-index: 10000; height: 36px; width: 36px; background: #2c2c2c; transition: all 0.4s ease-in-out 0s; } #top:hover { opacity: 0.6; } #top:before { position: absolute; top: 16px; left: 13px; width: 8px; height: 8px; border-top: 1px solid #fff; border-right: 1px solid #fff; transform: rotate(-45deg); content:""; cursor: pointer; } /* ------- Category Services ------- */ .services-center-01 { padding: 55px 0 40px; text-align: center; font-size: 25px; line-height: 1.4; } .services-slider .slider-qt { background: url("images/services-slider-bg-01.jpg") no-repeat 50% 100% / cover; } .services-slider .slider-qt .bx-wrapper { padding: 115px 100px 107px; max-width: 1400px !important; margin: 0 auto; background: url("images/slider-quote-quote-page.png") 0 81px no-repeat; position: relative; zoom: 1; } .services-slider .slider-qt .bx-wrapper:after { border-right: 60px solid transparent; border-top: 62px solid #FEAE1C; bottom: -61px; content: ""; height: 0; position: absolute; left: 0.5%; width: 0; z-index: 1; } .services-slider .slider-qt .bx-wrapper .bx-viewport { -webkit-transform: translatez(0); -moz-transform: translatez(0); -ms-transform: translatez(0); -o-transform: translatez(0); transform: translatez(0); width: 100%; overflow: hidden; position: relative; } .services-slider .slider-qt ul { width: auto; position: relative; } .services-slider .slider-qt li { color: #363636; font-size: 23px; line-height: 1.4; font-style: italic; z-index: 50; display: block; } .services-slider .slider-qt li .text { display: block; } .services-slider .slider-qt li .author { margin-top: 32px; display: block; text-align: right; } .services-footer { padding: 80px 0 60px; background: #2f2f2f; } .services-footer .text-01 { font: 300 24px/1.3 Geometric; color: #fff; text-align: center; margin-bottom: 20px; } .services-footer .text-02 { font: 300 30px/1.2 Geometric; color: #fff; text-align: center; margin-bottom: 45px; } .services-footer .text-02 a { text-decoration: underline; color: #ffa600; } .services-footer .text-02 a:hover { color: #ffcd56; } .services-footer .text-03 { text-align: center; } .services-banner-01 { padding: 45px 0; } .services-banner-01.img-01 { background: url("images/services-banner-bg-01.jpg") no-repeat 50% 50% / cover; } .services-banner-01.img-02 { background: url("images/services-banner-bg-02.jpg") no-repeat 50% 50% / cover; } .services-banner-01.img-03 { background: url("images/services-banner-bg-03.jpg") no-repeat 50% 50% / cover; } .services-banner-01.img-04 { background: url("images/services-banner-bg-04.jpg") no-repeat 50% 50% / cover; } .services-banner-01.img-05 { background: url("images/services-banner-bg-05.jpg") no-repeat 50% 50% / cover; } .services-banner-01.img-051 { background: url("images/services-banner-bg-051.jpg") no-repeat 50% 50% / cover; } .services-banner-01.img-06 { background: url("images/services-banner-bg-06.jpg") no-repeat 50% 50% / cover; } .services-banner-01.img-07 { background: url("images/services-banner-bg-07.jpg") no-repeat 50% 50% / cover; } .services-banner-01.img-08 { background: url("images/services-banner-bg-08.jpg") no-repeat 50% 50% / cover; } .services-banner-01.img-09 { background: url("images/services-banner-bg-09.jpg") no-repeat 50% 50% / cover; } .services-banner-01.img-10 { background: url("images/services-banner-bg-10.jpg") no-repeat 50% 50% / cover; } .services-banner-01 .block { box-shadow: 11px 11px 49px rgba(0,0,0,0.55); position: relative; background: url("images/services-banner-block-bg.jpg") no-repeat 50% 50% / cover; width: 100%; max-width: 757px; padding: 70px 47px 61px 63px; } .services-banner-01 .block:after { content: ""; width: 35px; height: 3px; background: #1d3956; left: 0; top: 90px; position: absolute; } .services-banner-01 .block.no-line:after { display: none; } .services-banner-01 .block h2 { color: #000; font: 500 34px/1.18 Geometric; margin-bottom: 25px; } .services-banner-01 .block .text { color: #183048; font-size: 19px; line-height: 1.7; } .services-process-01 { font-size: 0; background: url("images/services-process-bg.jpg") no-repeat 50% 0 / cover; padding: 58px 0 30px; } .services-process-01 h2 { text-align: center; color: #fff; font: 500 34px/1.2 Geometric; margin-bottom: 19px; } .services-process-01 h3 { text-align: center; color: #fff; font: 500 34px/1.2 Geometric; padding-bottom: 8px; margin: 49px auto 15px; border-bottom: 1px solid #56687b; width: 100%; max-width: 660px; } .services-process-01 p { text-align: center; color: #fff; font-size: 18px; line-height: 1.6; } .services-process-01 .col { display: inline-block; vertical-align: top; width: 32%; color: #ffb621; font-size: 30px; line-height: 1.2; font-weight: 300; height: 168px; padding: 47px 0 0 104px; } .services-process-01 .col-01 { background: url("images/services-progress-c-01.png") 0 50% no-repeat, url("images/services-progress-col-01.png") 10px 43px no-repeat; } .services-process-01 .col-02 { background: url("images/services-progress-c-01.png") 0 50% no-repeat, url("images/services-progress-col-02.png") 10px 43px no-repeat; } .services-process-01 .col-03 { width: 36%; padding-right: 0; background: url("images/services-progress-c-01.png") 0 50% no-repeat, url("images/services-progress-col-03.png") 10px 43px no-repeat; } .services-work-01 .quote-l { display: inline-block; width: 73%; vertical-align: top; padding-right: 10%; color: #183048; font-size: 19px; line-height: 1.6; } .services-work-01 .quote { display: inline-block; margin: 54px -105px 0 0; width: calc(26% + 105px); color: #183048; font: italic 300 26px/1.2 Geometric; vertical-align: top; padding: 2px 0 33px 36px; border-left: 3px solid #ffa600; background: url("images/services-quote-01.png") 100% 100% no-repeat; position: relative; } .services-work-01 .quote .author { color: #7b838e; font: italic 300 19px/1.2 Geometric; position: absolute; left: 0; bottom: 0; width: 100%; padding: 0 45px 0 36px; } .services-work-01 .quote.no-title { margin-top: 0; } .services-work-01 { padding: 45px 0; } .services-work-01 h2 { color: #000; font: 500 34px/1.2 Geometric; margin-bottom: 19px; } .services-work-01 h3 { color: #252525; font: 500 30px/1.2 Geometric; margin-bottom: 18px; position: relative; } .services-work-01 h3:after { position: absolute; left: -42px; top: 19px; background: #252525; width: 32px; height: 1px; content: ""; } .services-work-01 ul { margin-bottom: 1em; } .services-work-01 ul:last-child { margin-bottom: 0; } .services-work-01 li { position: relative; padding: 0 0 5px 20px; } .services-work-01 li:after { position: absolute; left: 2px; top: 12px; background: #ffa600; width: 7px; height: 7px; content: ""; } .services-work-01 p, .services-work-01 li { color: #183048; font-size: 19px; line-height: 1.6; } .services-work-01 li a { color: #183048; display: block; } .services-work-01 li a:hover { color: #ffa600; } .services-work-01 .ul-2 ul { display: inline-block; vertical-align: top; } .services-work-01 .ul-2 ul:first-child { margin-right: 4%; } .services-work-01 .ul-2 .w-01 { width: 38%; max-width: 430px; } .services-work-01 .ul-2 .w-02 { width: 57%; max-width: 720px; } .services-work-01 .ul-2 .w-03 { width: 48%; max-width: 370px; } .services-work-01 .ul-2 .w-04 { width: 48%; } .services-work-01.grey, .services-block-01.grey { background: #fafafa; padding: 40px 0; } .services-work-01 .img-01-left { float: left; width: 52%; } .services-work-01 .img-01-left-02 { float: left; width: 69%; } .services-work-01 .img-01-left-03 { float: left; width: 62%; } .services-work-01 { position: relative; } .services-work-01 .no-rel { position: static; } .services-work-01 .img-01-left-04 { float: left; width: 62%; position: relative; z-index: 1; } .services-work-01 .img-04 { max-width: 839px; width: 42.5%; position: absolute; bottom: 0; right: 0; overflow: hidden; } .services-work-01 .img-04 img { right: 0; position: relative; width: 839px; max-width: 839px } .services-work-01 .img-01 { float: right; margin: -32px 0; width: 44%; max-width: 519px; } .services-work-01 .img-01.mt-01 { max-width: 463px; width: 44%; position: absolute; bottom: -8px; right: 0; margin-right: -70px; } .services-work-01 .img-03 { max-width: 865px; width: 70%; position: absolute; bottom: -40px; right: -245px; } .services-work-01 .img-02.mt-01 { margin-top: -25px; } .services-work-01 .img-01-right { float: right; width: 50%; padding: 4% 0 0 0; } .services-work-01 .img-02 { float: left; width: calc(48% + 100px); margin: 0 0 0 -100px; } .services-work-01 .s-link-center { text-align: center; } .services-work-01 .s-link { letter-spacing: -1px; display: inline-block; font: 300 25px/1 Geometric; color: #1d3956; border: 2px solid #ffa600; max-width: 380px; width: 100%; padding: 15px 0; border-radius: 30px; margin: 0 1.5%; } .services-work-01 .s-link:hover { border-color: #1d3956; background: #fff; } .clutch { float: right; margin: 0 3% 0 10px; } .clutch-02 { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); max-width: 316px; } .clutch-02 img { max-height: 100%; height: auto; } .clutch-02a { margin: 20px auto 15px; display: none; width: 316px; } .clutch-02a img { max-height: 100%; } .wrapper-testimonial { padding-left: 20px; padding-right: 20px; width: 100%; padding-top: 60px; padding-bottom: 100px; } .wrapper-testimonial:nth-child(3n-2) { background: #f5f5f5; } .wrapper-testimonial:nth-child(3n-3) { background: url(images/bg-testimon.jpg) no-repeat; background-size: cover; position: relative; padding-top: 135px; padding-bottom: 130px; } .wrapper-testimonial:nth-child(3n-3) .testimonial-content:after { content: ''; bottom: -193px; left: 160px; position: absolute; width: 60px; height: 64px; background: url(images/marks.png) no-repeat; } .wrapper-testimonial:nth-child(3n-3) .testimonial-content { background: url(images/quotation-marks-white.png) no-repeat; } .testimonial-content { max-width: 1200px; margin: 0 auto; background: url(images/quotation-marks.png) no-repeat; box-sizing: border-box; padding-left: 94px; padding-top: 33px; font-size: 23px; color: #183048; font-style: italic; text-align: justify; position: relative; font-family: "Open Sans"; line-height: 1.5; } .testimonial-content .text-testimonial { margin-bottom: 20px; } .testimonial-content .author-testimonial { text-align:right; } .wrapper-request { width: 100%; background-color: #2f2f2f; font-family: "Myriad Pro"; } .wrapper-request .request-content{ max-width: 1200px; margin: 0 auto; box-sizing: border-box; padding: 90px 150px 20px 150px; font-size: 30px; color: #ffffff; text-align: center; } .wrapper-request .request-content p { margin-bottom: 60px; } .wrapper-request .request-content p a{ color: #ffa600; text-decoration: underline; } .wrapper-request .request-content p a:hover{ text-decoration: none; } .wrapper-request .request-content a.btn-request { color: #252525; background: #ffa600; text-decoration: none; font-size: 25px; padding: 15px 40px 15px 40px; display: inline-block; border-radius: 30px; font-family: "Myriad Pro"; } .postid-1638 .content.category-portfolio.websites-post.grey { display: none; } .postid-1638 .inner-02 { position: static; } .fancybox-slide { padding: 44px 15px !important; } .websites-post.websites-post-3-col .inner-01 { display: flex; justify-content: space-between; flex-wrap: wrap; } .websites-post.websites-post-3-col .img-block-01 { width: 31.6%; margin: 0 0 2.8%; transition: 0.4s; } .websites-post.websites-post-3-col .img-block-01:hover { opacity: 0.7; } .websites-post.websites-post-3-col .img-block-01 .more-01 { display: block; } .websites-post.websites-post-3-col .img-block-01 .more-01 img { display: block; } .websites-post.websites-post-3-col .img-block-01 h2 { font-size: 20px; margin: 4% 0 0; } .websites-post.websites-post-4-col .inner-03 { display: flex; flex-wrap: wrap; width: calc(90% + 1.6%); } .websites-post.websites-post-4-col .img-block-01 { width: calc(25% - 1.6%); margin: 0 .8% 1.6%; transition: .4s; } .websites-post.websites-post-4-col .img-block-01 a, .websites-post.websites-post-4-col .img-block-01 img { display: block; } .websites-post.websites-post-4-col .img-block-01:hover { opacity: 0.7; } .video-block-01 .inner-03 { display: flex; flex-wrap: wrap; width: calc(90% + 1.6%); } .video-block-01 .video-img { width: calc(33.333333% - 1.6%); margin: 0 .8% 1.6%; transition: .4s; cursor: pointer; } .video-block-01 .video-img img { margin: 0 !important; } .video-block-01 .video-img:hover { opacity: 0.7; } /* ------- Page Events ------- */ .page-01 { margin: 0 auto; } .page-01 p { display: none; } .page-01 img { display: block; height: auto; } .page-01 .video { overflow: hidden; position: relative; width: 100%; } .page-01 .video:after { padding-top: 56.25%; display: block; content: ''; } .page-01 .video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .page-01-head { padding: 55px 0 40px; text-align: center; font-size: 25px; line-height: 1.4; } .page-01-col-1 .col { width: 100%; } .page-01-col-2 { padding: 2% 2% 0; display: flex; flex-wrap: wrap; justify-content: space-between; } .page-01-col-2 .col { width: 49%; margin: 0 0 2%; } /* ------- Video LightMix ------- */ /*.video-lightmix { background: url("images/bg-video-lightmix.png") no-repeat center / cover; }*/ .video-lightmix .inner { overflow: hidden; position: relative; width: 100%; max-width: 1250px; margin: 0 auto; } .video-lightmix .inner:after { padding-top: 56.25%; display: block; content: ''; } .video-lightmix .inner iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* Page Markets ----------------------------------------------------------------------------------------------------- */ .page-id-4598 .content ul { padding: 0; margin: 0 0 1.2em 1em; line-height: 1.3; list-style: square outside; display: flex; flex-wrap: wrap; justify-content: space-between; } .page-id-4598 .content ul:last-child { margin-bottom: 0; } .page-id-4598 .content ul li { margin-bottom: .5em; padding-left: .2em; width: 47%; } .page-id-4598 .content ul li:last-child { margin-bottom: 0; } .page-id-4598 .content ul li::marker { color: #ff971a; } .page-id-4598 .content ul li a { color: #252525; border-bottom: 1px dashed transparent; } .page-id-4598 .content ul li a:hover { color: #000; border-bottom: 1px dashed #000; } .page-id-4598 .content h2, .page-id-4598 .content h3, .page-id-4598 .content h4 { font-weight: 700 !important; } .page-id-4598 .content h2 { margin-bottom: .55em; } .page-id-4598 .content h3 { margin-bottom: .6em; } .page-id-4598 .content h4 { margin-bottom: .65em; } .page-id-4598 .content p ~ h2, .page-id-4598 .content ul ~ h2, .page-id-4598 .content ol ~ h2, .page-id-4598 .content img ~ h2 { padding-top: .5em; } .page-id-4598 .content p ~ h3, .page-id-4598 .content ul ~ h3, .page-id-4598 .content ol ~ h3, .page-id-4598 .content img ~ h3 { padding-top: .65em; } .page-id-4598 .content p ~ h4, .page-id-4598 .content ul ~ h4, .page-id-4598 .content ol ~ h4, .page-id-4598 .content img ~ h4 { padding-top: .7em; } .page-id-4598 .content p { padding: 0; margin-bottom: 1em; } .page-id-4598 .content p:last-child { margin-bottom: 0; } .page-id-4598 .content p a, .page-id-4598 .content li a { color: #ff971a; border-bottom: 1px dashed transparent; } .page-id-4598 .content p a:hover, .page-id-4598 .content li a:hover { color: #000; border-bottom: 1px dashed #000; } .page-id-4598 .content strong { font-weight: 700; } /* ------- Media Screen ------- */ @media screen and (max-width: 1900px) { .services-work-01 .img-04 { width: 42%; } } @media screen and (max-width: 1880px) { .clutch { float: none; margin: 0 auto 30px; display: block; max-width: 277px; } } @media screen and (max-width: 1800px) { .services-work-01 .img-03 { right: -200px; } .services-work-01 .img-04 { width: 41.5%; } } @media screen and (max-width: 1700px) { .services-work-01 .img-01-left-03 { width: 59%; } .services-work-01 .img-03 { right: -150px; } .services-work-01 .img-04 { width: 41%; } .services-work-01 .img-04 img { max-width: 118%; } } @media screen and (max-width: 1600px) { .services-work-01 .img-01-left-03 { width: 57%; } .services-work-01 .img-03 { width: 68%; right: -100px; } .services-work-01 .img-04 { width: 40.5%; } } @media screen and (max-width: 1500px) { .services-work-01 .quote-l { width: 69%; padding-right: 7%; } .services-work-01 .quote { margin: 54px -52px 0 0; width: calc(30% + 52px); } .services-work-01 .img-01-left-03 { width: 54%; } .services-work-01 .img-03 { width: 67%; right: -50px; } .services-work-01 .img-04 { width: 40%; } } @media screen and (max-width: 1400px) { .services-work-01 .quote-l { width: 64%; padding-right: 4%; } .services-work-01 .quote { margin: 54px 0 0 0; width: 35%; padding: 2px 0 33px 30px; } .services-work-01 .quote .author { padding: 0 45px 0 30px; } .services-work-01 .img-01-left-02 { width: 63%; } .services-work-01 .img-01.mt-01 { margin-right: -20px; } .services-work-01 .img-01-right { width: 49%; padding: 0; } .services-work-01 .img-02 { margin: 0 0 0 -20px; width: 49%; } .services-work-01 .img-01-left-03 { width: 51%; } .services-work-01 .img-03 { width: 65%; right: 0; } .services-work-01 .img-04 { width: 39%; } } @media screen and (max-width: 1350px) { .content-left { width: 78.5%; } .sidebar { width: 17.5%; } } @media screen and (max-width: 1300px) { .design { padding: 0 0 77px; } .design .col .title { font-size: 34px; margin: 70px 0 45px; } .sites .col .hover .title { margin: 35% 0 0; font-size: 29px; } .sites .col .hover a { bottom: 35%; } .ul-01-3 .ul-01 li { font-size: 17px; } .content-left { width: 78%; } .sidebar { width: 18%; } .websites-banner { font-size: 29px; } .services-work-01 .quote { font-size: 25px; } .services-work-01 h3:after { display: none; } .services-work-01 .img-01-left-02 { width: 61%; min-height: 250px; } .services-work-01 .img-01.mt-01 { margin-right: 0; } .services-work-01 .img-01-right { width: 48%; } .services-work-01 .img-02 { margin: 0 0 0 0; width: 48%; } .services-work-01 .img-01-left-03 { width: 50%; } .services-work-01 .img-03 { width: 63%; right: 20px; } .services-work-01 .img-04 { width: 38.5%; } .apli .block .title { font-size: 35px; } .websites-post.websites-post-4-col .img-block-01 { width: calc(33.333333% - 1.6%); } .error-404 h1 { font-size: calc(27px + (55 - 27) * ((100vw - 360px) / (1300 - 360))) !important; } .error-404 .menu-work { font-size: calc(16px + (23 - 16) * ((100vw - 360px) / (1300 - 360))); } .postid-5843 .websites-post .content-left img { width: 100%; } .postid-6214 .websites-post .content-left img { width: 100%; margin: -5px 0 0; } .services-slider .slider-qt li { font-size: calc(15px + (23 - 15) * ((100vw - 360px) / (1300 - 360))); } } @media screen and (max-width: 1250px) { .content-left { width: 77.5%; } .sidebar { width: 18.5%; } .services-work-01 .img-01-left-04 { width: 100%; } .services-work-01 .img-04 { width: 40%; } .apli .block .title { font-size: 33px; } } @media screen and (max-width: 1240px) { .services-slider .slider-qt .bx-wrapper { padding: 115px 0 107px 100px; } } @media screen and (max-width: 1200px) { .design { padding: 0 0 70px; } .design .inner-40 { padding: 0 35px; } .design .col .title { font-size: 32px; margin: 65px 0 40px; } .sites .col .hover .title { margin: 34% 0 0; font-size: 28px; } .sites .col .hover a { bottom: 34%; } .content-left { width: 77%; } .sidebar { width: 19%; } .websites-banner { font-size: 28px; } .tt-04 .col { font-size: 26px; } .ul-01-3 .ul-01 li { font-size: 16px; } .ul-01-3 .ul-01 li:after { width: 6px; height: 6px; top: 7px; } .services-work-01 .quote { font-size: 24px; padding: 2px 0 33px 25px; } .services-work-01 .quote .author { padding: 0 45px 0 25px; } .services-process-01 .col { font-size: 27px; padding-top: 48px; padding-left: 100px; height: 160px; } .services-process-01 .col-01 { background: url("images/services-progress-c-01.png") no-repeat 0 50% / 160px, url("images/services-progress-col-01.png") no-repeat 10px 43px; } .services-process-01 .col-02 { background: url("images/services-progress-c-01.png") no-repeat 0 50% / 160px, url("images/services-progress-col-02.png") no-repeat 10px 43px; } .services-process-01 .col-03 { background: url("images/services-progress-c-01.png") no-repeat 0 50% / 160px, url("images/services-progress-col-03.png") no-repeat 10px 43px; } .services-work-01 .img-01-left-02 { width: 57%; } .services-work-01 .img-01-left-03 { width: 100%; } .services-work-01 .img-03 { width: 61%; } .services-work-01 .img-01-left-04 { width: 100%; } .services-slider .slider-qt { background: url("images/services-slider-bg-01.jpg") no-repeat 45% 100% / cover; } .services-work-01 .img-04 { width: 41%; } .apli .block p { font-size: 17px; } .apli .block .title { font-size: 31px; } .clutch-02 { width: 25%; } } @media screen and (max-width: 1150px) { .content-left { width: 76.5%; } .sidebar { width: 19.5%; } .services-work-01 .img-04 { width: 43%; } .apli .block .title { font-size: 29px; } .tt-01 .cols4 .col { font-size: 19px; } } @media screen and (max-width: 1100px) { .design { padding: 0 0 63px; } .design .inner-40 { padding: 0 30px; } .design .col .title { font-size: 30px; margin: 60px 0 35px; } .sites .col .hover .title { margin: 33% 0 0; font-size: 27px; } .sites .col .hover a { bottom: 33%; } .content-left { width: 75.5%; } .sidebar { width: 20.5%; } .websites-banner { font-size: 27px; } .tt-04 .col { font-size: 24px; } .ul-01-2 .ul-01 li { font-size: 17px; } .ul-01-2 .ul-01 li:after { top: 8px; } .ul-01-3 .ul-01 li { font-size: 15px; } .page-about .content .column-3 .col { height: 260px; width: 260px; padding: 61px 15px 0; } .page-about .content .column-3 .col .title { font-size: 46px; } .page-about .content .column-3 .col a { font-size: 20px; } .services-slider .slider-qt { background: url("images/services-slider-bg-01.jpg") no-repeat 40% 100% / cover; } .services-work-01 .quote { font-size: 23px; padding: 2px 0 33px 20px; } .services-work-01 .quote .author { padding: 0 45px 0 20px; } .services-process-01 .col { font-size: 25px; padding-top: 45px; padding-left: 95px; height: 150px; } .services-process-01 .col-01 { background: url("images/services-progress-c-01.png") no-repeat 0 50% / 150px, url("images/services-progress-col-01.png") no-repeat 10px 40px / 70px; } .services-process-01 .col-02 { background: url("images/services-progress-c-01.png") no-repeat 0 50% / 150px, url("images/services-progress-col-02.png") no-repeat 10px 40px / 70px; } .services-process-01 .col-03 { background: url("images/services-progress-c-01.png") no-repeat 0 50% / 150px, url("images/services-progress-col-03.png") no-repeat 10px 40px / 70px; } .services-work-01 .img-01-left-02 { width: 55%; } .services-work-01 .img-04 { width: 45%; } .apli .block p { font-size: 16px; } .apli .block .title { font-size: 27px; } .tt-04 .cols3 .col, .tt-04 .cols2 .col { font-size: 27px; } .tt-01 .cols4 .col { font-size: 18px; } .tt-01 .cols4 li { padding: 0 0 10px 18px; } .clutch-02 { width: 18%; } .content-grey-menu a { padding: 5px 13px; } } @media screen and (max-width: 1050px) { .content-left { width: 74.5%; } .sidebar { width: 21.5%; } .services-work-01 .img-04 { width: 47%; } .tt-04 .cols3 .col, .tt-04 .cols2 .col { font-size: 26px; } .tt-01 .cols4 .col { font-size: 17px; } .tt-01 .cols4 li { padding: 0 0 10px 16px; } .content-grey-menu a { padding: 5px 11px; } .error-404 .menu-work a:after { width: 5px; height: 5px; } } @media screen and (max-width: 1000px) { .design { padding: 0 0 55px; } .design .inner-40 { padding: 0 25px; } .design .col { width: calc(33.333333% - 2%); margin-right: 3%; } .design .col .title { font-size: 28px; margin: 55px 0 30px; } .postid-543 .websites-banner, .postid-1151 .websites-banner { margin-top: 0; } .sites .col .hover .title { margin: 32% 0 0; font-size: 26px; } .sites .col .hover a { bottom: 32%; } .content-left { float: none; width: 100%; overflow: hidden; } .sidebar { float: none; width: 100%; } .websites-post .sidebar { margin: 30px 0 0; } .websites-post .sidebar .block-01 { display: none; } .websites-images .sidebar { margin: 0; } .websites-images .sidebar .icon { justify-content: center !important; align-items: center; } .websites-images .sidebar .icon img { margin: 0 1.5% 30px !important; max-width: 21%; height: auto; } .postid-352 .websites-images .sidebar .icon img { max-height: 87px; } .postid-2187 .websites-images .sidebar .icon img { max-height: 121px; max-width: 100%; } .websites-banner, .websites-images .quote { font-size: 26px; } .websites-banner .text small, .websites-images .quote small { font-size: 24px; padding-top: 38px; } .tt-04 .col { padding: 20px 1% 30px; } .tt-01 { padding: 100px 0 20px; } .tt-01 .title { font-size: 84px; } .tt-01 .desc { font-size: 32px; } .tt-01 .cols3 .col { font-size: 31px; } .tt-06 .col { width: 50%; } .ul-01-2 .ul-01 li { font-size: 16px; } .ul-01-2 .ul-01 li:after { width: 6px; height: 6px; } .page-about .content .column-3 .col { height: 240px; width: 240px; padding: 56px 15px 0; } .page-about .content .column-3 .col .title { font-size: 42px; } .page-about .content .column-3 .col a { font-size: 19px; } .services-slider .slider-qt { background: url("images/services-slider-bg-01.jpg") no-repeat 35% 100% / cover; } .services-work-01 .quote-l, .services-work-01 p, .services-work-01 li { font-size: 18px; } .services-process-01 .col { font-size: 22px; padding-top: 45px; padding-left: 90px; height: 140px; } .services-process-01 .col-01 { background: url("images/services-progress-c-01.png") no-repeat 0 50% / 140px, url("images/services-progress-col-01.png") no-repeat 10px 38px / 65px; } .services-process-01 .col-02 { background: url("images/services-progress-c-01.png") no-repeat 0 50% / 140px, url("images/services-progress-col-02.png") no-repeat 10px 38px / 65px; } .services-process-01 .col-03 { background: url("images/services-progress-c-01.png") no-repeat 0 50% / 140px, url("images/services-progress-col-03.png") no-repeat 10px 38px / 65px; } .services-work-01 .img-01-left { width: 53%; } .services-work-01 .img-01 { width: 45%; } .services-work-01 .img-04 { width: 49%; } .apli .block-01 { width: 100%; float: none; padding: 0; } .apli .block-02 { width: 100%; float: none; padding: 0; } .apli .block .button-01 { margin: 0 auto 10px; } .apli .block-01 .icon { margin: 0 auto 20px; max-width: 30%; } .apli .block-01 .hide-02 { display: block; } .apli .block-01 .hide-01 { display: none; } .tt-04 .cols3 .col, .tt-04 .cols2 .col { font-size: 25px; } .tt-01 .cols4 .col { font-size: 16px; } .tt-01 .cols4 li { padding: 0 0 10px 14px; } .tt-01 .cols4 li:after { top: 6px; width: 5px; height: 5px; } .clutch-02 { display: none; } .clutch-02a { display: block; } .content-grey-menu a { padding: 5px 10px; } .postid-6222 .websites-post .content-left img { width: 100%; margin: -5px 0 0; } .websites-post .img-3 { margin-bottom: -30px; } } @media screen and (max-width: 980px) { .video-lightmix .inner { width: 100%; } .content-grey-menu { display: none; } .blog-post-post-wrap {flex-wrap: wrap; } .blog-post-post { width: 100%; } .blog-post-aside { margin: 40px auto 0; } .blog-post-aside-sticky { position: static; top: 0; } } @media screen and (max-width: 950px) { .tt-04 .cols3 .col, .tt-04 .cols2 .col { font-size: 24px; } .tt-01 .cols4 .col { font-size: 15px; } .tt-01 .cols4 li { padding: 0 0 10px 14px; } } @media screen and (max-width: 900px) { .design { padding: 0 0 50px; } .design .inner-40 { padding: 0 20px; } .design .col { width: calc(33.333333% - 1.4%); margin-right: 2.1%; } .design .col .title { font-size: 26px; margin: 50px 0 25px; } .sites .inner-1400 { max-width: 740px; } .sites .col { width: 50%; } .sites .col .hover .title { margin: 36% 0 0; font-size: 30px; } .sites .col .hover a { bottom: 36%; } .proposal a, .proposal .tel, .proposal .or { display: block; margin: 0 auto; width: 100%; text-align: center; } .proposal .or { margin: 10px 0 0; } .tt-04 .col { font-size: 23px; } .tt-01 { padding: 90px 0 20px; } .tt-01 .title { font-size: 75px; } .tt-01 .desc { font-size: 29px; } .tt-01 .cols3 .col { font-size: 28px; } .ul-01-2 .ul-01 li { font-size: 15px; } .ul-01-2 .ul-01 li:after { top: 7px; } .content .ul-01-3 .ul-01 { max-width: 350px; width: 100%; margin: 0 auto 30px !important; float: none; display: block; } .content .ul-01-3 .ul-01:last-child { margin-bottom: 0 !important; } .column-2 .col { margin: 0 0 30px; width: 100%; float: none; } .column-2 .col:last-child { margin-bottom: 0; } .page-about .content .column-3 .col { height: 220px; width: 220px; padding: 51px 15px 0; } .page-about .content .column-3 .col .title { font-size: 38px; } .page-about .content .column-3 .col a { font-size: 18px; } .websites-sub-menu .menu ul li a { padding: 10px 19px; } .websites-banner, .websites-images .quote { font-size: 25px; } .websites-banner .text small, .websites-images .quote small { font-size: 22px; padding-top: 36px; } .clients-block .col { margin-right: 0; width: 100%; float: none; } .services-work-01 .quote-l { width: 100%; padding-right: 0; } .services-work-01 .quote { margin: 32px 0 0 0; width: auto; padding: 2px 0 33px 30px; } .services-work-01 .quote.no-title { margin: 32px 0 0 0; width: 100%; } .services-work-01 .quote .author { padding: 0 45px 0 30px; } .services-process-01 .col { font-size: 20px; padding-top: 42px; padding-left: 80px; height: 130px; } .services-process-01 .col-01 { background: url("images/services-progress-c-01.png") no-repeat 0 50% / 130px, url("images/services-progress-col-01.png") no-repeat 10px 35px / 60px; } .services-process-01 .col-02 { background: url("images/services-progress-c-01.png") no-repeat 0 50% / 130px, url("images/services-progress-col-02.png") no-repeat 10px 35px / 60px; } .services-process-01 .col-03 { background: url("images/services-progress-c-01.png") no-repeat 0 50% / 130px, url("images/services-progress-col-03.png") no-repeat 10px 35px / 60px; } .services-work-01 .img-01-left, .services-work-01 .img-01-left-02, .services-work-01 .img-01-right, .services-work-01 .img-01, .services-work-01 .img-02, .services-work-01 .img-01-left-03, .services-work-01 .img-03, .services-work-01 .img-01-left-04, .services-work-01 .img-04 { width: 100% !important; float: none; max-width: 600px; margin: 0 auto !important; } .services-work-01 .img-01, .services-work-01 .img-02, .services-work-01 .img-03, .services-work-01 .img-04 { margin-bottom: 20px !important; position: static !important; } .services-work-01 .img-04 img { max-width: 100%; } .services-work-01 .img-01-left-02 { min-height: 1px; } .services-footer .text-01 br { display: none; } .services-work-01 .img-03 { padding-top: 15px; } .services-work-01 .s-link { display: block; margin: 0 auto; } .services-work-01 .s-link + .s-link { margin-top: 20px; } .services-slider .slider-qt { background: url("images/services-slider-bg-01.jpg") no-repeat 30% 100% / cover; } .content h1 { font-size: 34px; } .content h2 { font-size: calc(24px + (32 - 24) * ((100vw - 360px) / (900 - 360))); } .content h3, .content .h3 { font-size: calc(22px + (28 - 22) * ((100vw - 360px) / (900 - 360))); } .content h4 { font-size: calc(20px + (24 - 20) * ((100vw - 360px) / (900 - 360))); } .blog-post-content { margin-bottom: 60px; } .blog-post .pagination { margin-top: 65px; } .clients-block-img img { width: calc(33.333333% - 8%); margin: 0 4% 5%; } .testimonials-col { width: 100%; margin-right: 0; } .tt-04 .cols3 .col, .tt-04 .cols2 .col { font-size: 23px; } .tt-01 .cols4 .col:nth-child(3) { width: 27%; } .tt-01 .cols4 .col:nth-child(4) { width: 22%; } .wrapper-request .request-content {padding: 90px 50px 20px 50px; font-size: 25px;} } @media screen and (max-width: 874px) { .websites-post .img-block .more-01 { position: relative; height: 268px; } .websites-post .img-block .more-01 img { position: absolute; height: 268px; width: 874px; max-width: 874px; margin-left: -437px; left: 50%; top: 0; } } @media screen and (max-width: 850px) { .content h1 { font-size: 33px; } .tt-04 .cols3 .col, .tt-04 .cols2 .col { font-size: 22px; } .tt-01 .cols4 { text-align: center; padding-left: 12%; } .tt-01 .cols4 .col { width: 48% !important; max-width: 260px; } } @media screen and (max-width: 800px) { .websites-post.websites-post-3-col .img-block-01 { width: 48%; margin: 0 0 4.2%; } .design { padding: 0 0 45px; } .design .inner-40 { padding: 0 20px; } .design .col { width: 100%; margin: 0 auto; max-width: 330px; display: block; } .design .col .title { margin: 35px 0 20px; } .design .col:first-child .title { margin-top: 45px; } .sites .col .hover .title { margin: 35% 0 0; font-size: 29px; } .sites .col .hover a { bottom: 35%; } .page-about .content .column-3 { margin: 32px auto -100px; max-width: 280px; } .page-about .content .column-3 .col { height: 240px; width: 240px; padding: 56px 15px 0; margin-bottom: 32px; } .page-about .content .column-3 .col:last-of-type { margin-bottom: 0; } .page-about .content .column-3 .col .title { font-size: 42px; } .page-about .content .column-3 .col a { font-size: 19px; } .blog-footer .column-3 .col { float: none; margin: 0 auto 30px !important; max-width: 350px; width: 100%; } .blog-footer .column-3 .col:last-child { margin-bottom: 0 !important; } .websites-post .img-block .more-01 { position: relative; height: 260px; } .websites-post .img-block .more-01 img { position: absolute; height: 260px; width: 848px; max-width: 848px; margin-left: -424px; left: 50%; top: 0; } .websites-sub-menu .menu ul li a { font-size: 14px; padding: 10px 16px; } .websites-banner, .websites-images .quote { font-size: 24px; } .websites-banner .text small, .websites-images .quote small { font-size: 21px; padding-top: 34px; } .tt-01 { padding: 80px 0 20px; } .tt-01 .title { font-size: 66px; } .tt-01 .desc { font-size: 25px; } .tt-01 .cols3 .col { font-size: 25px; } .ul-01-2 .ul-01 { float: none; margin: 0 auto !important; width: 100%; max-width: 400px; } .content.what h2 { margin: 0 auto 19px; max-width: 400px; } .content-grey-bg { font-size: 23px; } .services-banner-01 .block { padding: 65px 60px 60px; } .services-banner-01 .block:after { top: 85px; width: 33px; } .services-process-01 .col { font-size: 17px; padding-top: 35px; padding-left: 70px; height: 110px; } .services-process-01 .col-01 { background: url("images/services-progress-c-01.png") no-repeat 0 50% / 110px, url("images/services-progress-col-01.png") no-repeat 10px 30px / 50px; } .services-process-01 .col-02 { background: url("images/services-progress-c-01.png") no-repeat 0 50% / 110px, url("images/services-progress-col-02.png") no-repeat 10px 30px / 50px } .services-process-01 .col-03 { background: url("images/services-progress-c-01.png") no-repeat 0 50% / 110px, url("images/services-progress-col-03.png") no-repeat 10px 30px / 50px } .services-work-01 .ul-2 ul { width: 100% !important; margin: 0 !important; max-width: 100% !important; } .services-slider .slider-qt { background: url("images/services-slider-bg-01.jpg") no-repeat 27% 100% / cover; } .services-slider .slider-qt .bx-wrapper { background: url("images/slider-quote-quote-page.png") no-repeat 0 20px !important; padding: 90px 0 82px 42px; } .content h1 { font-size: 32px; } .blog-post-content { margin-bottom: 55px; } .blog-post .pagination { margin-top: 60px; } .tt-04 .cols3 .col, .tt-04 .cols2 .col { font-size: 21px; } .testimonial-content{font-size: 20px;} .page-01-col-2 { padding: 5% 5% 0; } .page-01-col-2 .col { width: 100%; margin: 0 0 5%; } .error-404 .award { margin-left: auto; margin-right: auto; max-width: 500px; } .error-404 .award .inner { width: calc(100% + 2%); margin-left: -1%; margin-right: -1%; } .error-404 .award .inner .img { width: calc(33.333333% - 2%); margin: 0 1%; } .error-404 .award .inner .img-04, .error-404 .award .inner .img-05 { margin-top: -7%; } } @media screen and (max-width: 750px) { .websites-images .img-3 img, .websites-post .img-3 img { max-width: 48% !important; } .services-footer .text-01 { font-size: 23px; } .services-footer .text-02 { font-size: 29px; } .services-center-01, .page-01-head { font-size: 24px; } .services-banner-01 .block { padding: 60px 55px 55px; } .services-banner-01 .block:after { top: 80px; width: 31px; } .content h1 { font-size: 31px; } .tt-04 .cols3 .col, .tt-04 .cols2 .col { font-size: 20px; } } @media screen and (max-width: 700px) { .winner .button { font-size: 26px; } .sites .col .hover .title { margin: 34% 0 0; font-size: 28px; } .sites .col .hover a { bottom: 34%; } .websites-post .img-block .more-01 { position: relative; height: 240px; } .websites-post .img-block .more-01 img { position: absolute; height: 240px; width: 783px; max-width: 783px; margin-left: -392px; left: 50%; top: 0; } .websites-sub-menu .menu ul li a { font-size: 13px; padding: 10px 10px; } .websites-banner, .websites-images .quote { font-size: 22px; } .websites-banner .text small, .websites-images .quote small { font-size: 20px; padding-top: 32px; } .websites-images .left { float: none; width: auto; } .websites-images .right { float: none; width: auto; } .websites-images img { float: none !important; max-width: 100% !important; margin: 0 auto 30px !important; } .tt-01 { padding: 70px 0 20px; } .tt-01 .title { font-size: 57px; } .tt-01 .desc { font-size: 22px; margin: 30px 0 50px; } .tt-01 .cols3 .col { font-size: 21px; } .content-grey-bg { font-size: 21px; } .services-footer .text-01 { font-size: 22px; } .services-footer .text-02 { font-size: 28px; } .services-center-01, .page-01-head { font-size: 23px; } .services-banner-01 .block { padding: 55px 50px 50px; } .services-banner-01 .block:after { top: 75px; width: 29px; } .services-process-01 { padding: 45px 0; } .services-process-01 .col { font-size: 15px; padding-top: 2px; padding-left: 50px; height: 40px; } .services-process-01 .col-01 { background: url("images/services-progress-col-01.png") no-repeat 0 0 / 40px; } .services-process-01 .col-02 { background: url("images/services-progress-col-02.png") no-repeat 0 0 / 40px } .services-process-01 .col-03 { background: url("images/services-progress-col-03.png") no-repeat 0 0 / 40px } .services-slider .slider-qt { background: url("images/services-slider-bg-01.jpg") no-repeat 26% 100% / cover; } .services-slider .slider-qt .bx-wrapper { padding: 90px 0 80px 21px; } .content h1 { font-size: 30px; } .content { font-size: 17px; } .blog-post-content { margin-bottom: 50px; } .blog-post .pagination { margin-top: 55px; } .tt-04 .cols3 .col, .tt-04 .cols2 .col { font-size: 19px; } .requestpr { font-size: 28px; max-width: 350px; } .tt-04 .cols2 .col { width: 100%; max-width: 500px; margin: 0 auto; display: block; } .postid-2065 .mt-01 { margin-top: 0; } .websites-post.websites-post-4-col .inner-03, .video-block-01 .inner-03 { max-width: calc(90% + 2.2%); } .websites-post.websites-post-4-col .img-block-01, .video-block-01 .video-img { width: calc(50% - 2.2%); margin: 0 1.1% 2.2%; } } @media screen and (max-width: 680px) { .testimonial-content{font-size: 18px;} } @media screen and (max-width: 650px) { .winner .button { font-size: 25px; } .services-center-01, .page-01-head { font-size: 22px; } .services-banner-01 .block { padding: 50px 45px 45px; } .services-banner-01 .block:after { top: 70px; width: 27px; } .content h1 { font-size: 29px; } .tt-04 .cols3 .col, .tt-04 .cols2 .col { font-size: 18px; } .requestpr { font-size: 27px; max-width: 345px; } .tt-01 .cols4 { padding-left: 11%; } } @media screen and (max-width: 600px) { .services-slider .slider-qt .bx-wrapper { padding: 90px 0 70px 0; } .winner .button { font-size: 24px; padding: 16px 0; } .sites .col .hover .title { margin: 33% 0 0; font-size: 27px; } .sites .col .hover a { bottom: 33%; } .proposal { padding: 80px 0 30px; } .tt-04 .col { max-width: 48%; } .websites-top .desc { font-size: 17px; } .websites-post .img-block .more-01 { position: relative; height: 220px; } .websites-post .img-block .more-01 img { position: absolute; height: 220px; width: 717px; max-width: 717px; margin-left: -358px; left: 50%; top: 0; } .websites-sub-menu { padding: 0 20px; } .websites-sub-menu .menu ul li { display: block; } .websites-sub-menu .menu ul li a { font-size: 14px; } .websites-banner, .websites-images .quote { font-size: 20px; } .websites-banner .text small, .websites-images .quote small { font-size: 17px; padding-top: 28px; } .websites-images .sidebar .icon img { max-width: 26%; } .tt-01 { padding: 60px 0 20px; } .tt-01 .title { font-size: 48px; } .tt-01 .desc { font-size: 18px; margin: 30px 0 40px; } .tt-01 .cols3 .col { font-size: 17px; } .content-grey-bg { font-size: 19px; } .blog-post .tags, .blog-post .more, .blog-post .date { font-size: 14px; } .services-footer .text-01 { font-size: 21px; } .services-footer .text-02 { font-size: 27px; } .services-center-01, .page-01-head { font-size: 21px; } .services-banner-01 .block h2, .services-block-01 h2, .services-process-01 h2, .services-work-01 h2, .services-process-01 h3 { font-size: 32px; } .services-banner-01 .block .text { font-size: 18px; } .services-banner-01 .block { padding: 45px 40px 40px; } .services-banner-01 .block:after { top: 65px; width: 25px; } .services-process-01 p { font-size: 18px; } .services-process-01 h3 { margin-bottom: 30px; } .services-process-01 .col { display: block; width: 100%; max-width: 320px; margin: 0 auto 30px; font-size: 22px; padding-top: 45px; padding-left: 90px; height: 140px; } .services-process-01 .col-01 { background: url("images/services-progress-c-01.png") no-repeat 0 50% / 140px, url("images/services-progress-col-01.png") no-repeat 10px 38px / 65px; } .services-process-01 .col-02 { background: url("images/services-progress-c-01.png") no-repeat 0 50% / 140px, url("images/services-progress-col-02.png") no-repeat 10px 38px / 65px; } .services-process-01 .col-03 { margin-bottom: 0; background: url("images/services-progress-c-01.png") no-repeat 0 50% / 140px, url("images/services-progress-col-03.png") no-repeat 10px 38px / 65px; } .services-work-01 li { padding: 0 0 5px 18px; } .services-work-01 li:after { top: 11px; width: 6px; height: 6px; } .content h1 { font-size: 28px; } .content { font-size: 16px; } .blog-post-thumb { width: 100%; max-width: 400px; margin: 0 0 15px; overflow: hidden; } .blog-post-thumb:after { padding-top: 100%; } .blog-post-thumb + .blog-post-text { width: 100%; } .blog-post-content { margin-bottom: 45px; } .blog-post .pagination { margin-top: 50px; } .websites-top .title { font-size: 35px; } .clients-block-img img { width: calc(50% - 10%); margin: 0 5% 5%; } .tt-04 .cols3 .col { max-width: 48%; } .requestpr { font-size: 26px; max-width: 340px; } .tt-01 .cols4 .col:nth-child(1), .tt-01 .cols4 .col:nth-child(3) { width: 54% !important; } .tt-01 .cols4 .col:nth-child(2), .tt-01 .cols4 .col:nth-child(4) { width: 46% !important; } .tt-01 .cols4 { padding-left: 9%; } .tt-11 { padding: 28px 0; } .websites-post .img-block { overflow: hidden;} .ul-02 li a, .ul-02 li { font-size: 16px; } .ul-02 li:after { top: 10px; } } @media screen and (max-width: 550px) { .winner .button { font-size: 23px; } .services-center-01, .page-01-head { font-size: 20px; } .services-banner-01 .block h2, .services-block-01 h2, .services-process-01 h2, .services-work-01 h2, .services-process-01 h3 { font-size: 30px; } .services-banner-01 .block .text { font-size: 17px; } .services-banner-01 .block { padding: 40px 35px 35px; } .services-banner-01 .block:after { display: none; } .services-work-01 .quote-l, .services-work-01 p, .services-work-01 li { font-size: 17px; } .services-work-01 .quote { font-size: 22px; } .services-work-01 .quote .author { font-size: 18px; } .services-process-01 p { font-size: 17px; } .services-work-01 h3 { font-size: 29px; } .services-work-01 { font-size: 17px; } .content h1 { font-size: 27px; } .websites-top .title { font-size: 33px; } .requestpr { font-size: 25px; max-width: 335px; } .tt-01 .cols4 { padding-left: 7%; } .tt-11 { padding: 26px 0; } } @media screen and (max-width: 500px) { .winner .button { font-size: 22px; padding: 15px 0; } .sites .col .hover .title { margin: 31% 0 0; font-size: 25px; } .sites .col .hover a { bottom: 31%; } .sites .col .hover a { margin-left: -60px; max-width: 120px; } .proposal a, .proposal .or { font-size: 29px; } .sites { padding: 0 0 48px; } .sites .inner-1400 { padding: 0; } .websites-post p { display: none; } .websites-post .img-block .more-01 { position: relative; height: 200px; } .websites-post .img-block .more-01 img { position: absolute; height: 200px; width: 652px; max-width: 652px; margin-left: -326px; left: 50%; top: 0; } .websites-top .desc { font-size: 16px; } .websites-banner, .websites-images .quote { font-size: 18px; } .websites-banner .text small, .websites-images .quote small{ font-size: 14px; padding-top: 24px; } .tt-01 { padding: 50px 0 20px; } .tt-01 .title { font-size: 37px; letter-spacing: -2px; } .tt-01 .desc { font-size: 14px; } .tt-01 .cols3 .col { font-size: 14px; } .content-grey-bg { font-size: 17px; } .blog-post .tags, .blog-post .more, .blog-post .date { font-size: 13px; } .services-slider .slider-qt { background: url("images/services-slider-bg-01.jpg") no-repeat 24% 100% / cover; } .services-footer .text-01 { font-size: 20px; } .services-footer .text-02 { font-size: 26px; } .services-center-01, .page-01-head { font-size: 19px; } .services-banner-01 .block h2, .services-block-01 h2, .services-process-01 h2, .services-work-01 h2, .services-process-01 h3 { font-size: 28px; margin-bottom: 20px; } .services-banner-01 .block .text { font-size: 16px; } .services-banner-01 .block { padding: 35px 30px 30px; } .services-work-01 .quote { font-size: 21px; } .services-work-01 .quote .author { font-size: 17px; } .services-process-01 p { font-size: 16px; } .services-work-01 h3 { font-size: 28px; } .services-work-01 { font-size: 16px; } .services-slider .slider-qt .bx-wrapper { padding: 90px 0 60px 0; } .content h1 { font-size: 26px; } .content { font-size: 15px; } .blog-post-content { margin-bottom: 40px; } .blog-post .pagination { margin-top: 45px; } .websites-top .title { font-size: 31px; } .tt-04 .cols3 .col { font-size: 17px; } .requestpr { font-size: 24px; max-width: 330px; } .tt-01 .cols4 { text-align: justify; } .tt-01 .cols4 .col:nth-child(1), .tt-01 .cols4 .col:nth-child(3) { width: 55% !important; } .tt-01 .cols4 .col:nth-child(2), .tt-01 .cols4 .col:nth-child(4) { width: 43% !important; } .tt-01 .cols4 { padding-left: 0; } .tt-11 { padding: 24px 0; } .wrapper-request .request-content {padding: 90px 20px 20px 20px; font-size: 20px;} .wrapper-testimonial .testimonial-content, .wrapper-testimonial:nth-child(3n-2) .testimonial-content {background-size: 35px; padding-left: 45px; padding-top: 15px;} .ul-02 li a, .ul-02 li { font-size: 15px; } .ul-02 li:after { top: 9px; } .blog-post-aside { text-align: center; } } @media screen and (max-width: 460px) { .contact-win { margin: 0 auto; max-width: 360px; } .contact-win img { width: 49.2%; } .contact-win img:nth-child(2n+2) { margin-right: 0; } } @media screen and (max-width: 450px) { .winner .button { font-size: 21px; } .sites .col .hover .title { margin: 30% 0 0; font-size: 23px; } .sites .col .hover a { bottom: 30%; } .sites .col .hover a { margin-left: -55px; max-width: 110px; } .services-footer .text-01 { font-size: 19px; } .services-footer .text-02 { font-size: 25px; } .services-center-01 .page-01-head { font-size: 18px; } .services-banner-01 .block h2, .services-block-01 h2, .services-process-01 h2, .services-work-01 h2, .services-process-01 h3 { font-size: 26px; margin-bottom: 15px; } .services-banner-01 .block .text { font-size: 15px; } .services-banner-01 .block { padding: 30px 25px 25px; } .services-work-01 .quote { font-size: 20px; padding: 2px 0 33px 25px; } .services-work-01 .quote .author { padding: 0 45px 0 25px; font-size: 16px; } .services-process-01 p { font-size: 15px; } .services-work-01 h3 { font-size: 27px; } .services-work-01 { font-size: 15px; } .services-work-01 li { padding: 0 0 5px 17px; } .services-slider .slider-qt .bx-wrapper { padding: 90px 0 55px 0; } .content h1 { font-size: 25px; } .websites-top .title { font-size: 29px; } .tt-04 .cols3 .col { font-size: 16px; } .requestpr { font-size: 23px; max-width: 325px; } .tt-01 .cols4 .col { font-size: 14px; } .tt-01 .cols4 li { padding: 0 0 10px 12px; } .tt-01 .cols4 li:after { top: 5px; width: 4px; height: 4px; } .tt-04 .cols2 .col p { font-size: 14px; } .tt-11 { padding: 22px 0; } } @media screen and (max-width: 400px) { .winner .button { font-size: 20px; padding: 14px 0; } .sites .col .hover .title { margin: 28% 0 0; font-size: 21px; } .sites .col .hover a { bottom: 28%; } .sites .col .hover a { margin-left: -50px; max-width: 100px; } .websites-banner, .websites-images .quote { font-size: 17px; } .websites-banner .text small, .websites-images .quote small { font-size: 12px; padding-top: 20px; } .proposal a, .proposal .or { font-size: 23px; } .proposal .tel { font-size: 28px; } .websites-post .img-block .more-01 { position: relative; height: 180px; } .websites-post .img-block .more-01 img { position: absolute; height: 180px; width: 587px; max-width: 587px; margin-left: -293px; left: 50%; top: 0; } .tt-01 { padding: 40px 0 20px; } .tt-01 .title { font-size: 30px; } .tt-01 .desc { font-size: 11px; } .tt-01 .cols3 .col { font-size: 11px; } .ul-01-3 .ul-01 li, .ul-01-2 .ul-01 li { font-size: 14px; } .ul-01-3 .ul-01 li:after, .ul-01-2 .ul-01 li:after { top: 6px; } .content-grey-bg { font-size: 15px; } .services-slider .slider-qt { background: url("images/services-slider-bg-01.jpg") no-repeat 23% 100% / cover; } .services-footer .text-01 { font-size: 18px; } .services-footer .text-02 { font: 24px/1.2 Geometric; } .services-center-01, .page-01-head { font-size: 17px; } .services-banner-01 .block { padding: 25px 20px 20px; } .services-banner-01 .block h2, .services-block-01 h2, .services-process-01 h2, .services-work-01 h2, .services-process-01 h3 { font-size: 24px; margin-bottom: 10px; } .services-banner-01 .block .text { font-size: 14px; } .services-work-01 .quote { font-size: 19px; padding: 2px 0 33px 20px; } .services-work-01 .quote .author { padding: 0 45px 0 20px; font-size: 15px; } .services-process-01 p { font-size: 14px; } .services-work-01 h3 { font-size: 26px; } .services-work-01 { font-size: 14px; } .services-work-01 .s-link { font-size: 23px; } .services-slider .slider-qt .bx-wrapper { padding: 90px 0 50px 0; } .content h1 { font-size: 24px; } .content { font-size: 14px; } .blog-post-content { margin-bottom: 35px; } .websites-top .title { font-size: 27px; } .tt-04 .cols3 .col { font-size: 15px; } .requestpr { font-size: 22px; max-width: 320px; } .tt-01 .cols4 .col { font-size: 13px; } .tt-01 .cols4 li { padding: 0 0 10px 10px; } .tt-04 .cols2 .col p { font-size: 13px; } .tt-11 { padding: 20px 0; } } @media screen and (max-width: 380px) { .websites-images .img-3 img, .websites-post .img-3 img { max-width: 100% !important; width: 100% !important; display: block; margin: 0 auto 30px; } .websites-images .sidebar .icon img { max-width: 45%; } .services-work-01 .s-link { font-size: 21px; } } @media screen and (max-width: 360px) { .sites .col .hover .title { margin: 26% 0 0; font-size: 19px; } .sites .col .hover a { bottom: 26%; } .sites .col .hover a { margin-left: -45px; max-width: 90px; } .wrapper-testimonial .testimonial-content, .wrapper-testimonial:nth-child(3n-2) .testimonial-content {background-size: 20px; padding-left: 0; padding-top: 22px;} } /* ------- Global --------------------------------------------------------------------------------------------------- */ body { font: 20px/1.6 "Open Sans", sans-serif; color: #363636; position: relative; } .section { padding: calc(4vw + 40px) 0; } .section-pb-0 { padding-bottom: 0 !important; } .section-01 { padding: 60px 0; } .inner-01 { max-width: 1260px; margin: 0 auto; width: 90%; position: relative; } .inner-02 { max-width: 1400px; margin: 0 auto; width: 90%; position: relative; } .inner-03 { max-width: 1920px; margin: 0 auto; width: 90%; position: relative; } .inner-04 { max-width: 100%; margin: 0 auto; width: 100%; position: relative; } .title-page h1, .title-page .h1 { font: 500 50px/1 Geometric; color: #000; transition: .4s; padding: calc(4vw + 40px) 0 30px; position: relative; text-align: center; } .title-page h1:after, .title-page .h1:after { content: ""; bottom: 0; margin: 0 auto; position: absolute; height: 3px; max-width: 60px; width: 15%; left: 0; right: 0; background: #ffa600; } .clmn-2 { display: flex; flex-wrap: wrap; justify-content: space-between; } .clmn-2:last-child { margin-bottom: -3em; } .clmn-2 .col { width: calc(50% - 2.5vw); margin-bottom: 3em; } .clmn-2-left-image .col-01 { margin-left: -50vw; left: 50%; width: calc(50vw - 2.5vw); position: relative; } .clmn-2-left-image .col-01 img { height: 100%; width: 100%; object-fit: cover; position: absolute; top: 0; left: 0; } /* ------- Global - Buttons ----------------------------------------------------------------------------------------- */ .button-02 { transition: .4s; display: inline-flex; font: 300 25px/1 Geometric; padding: 16px 60px; border-radius: 32px; background: transparent; text-align: center; justify-content: center; cursor: pointer; } .button-02a { color: #252525; background: #ffa600; } .button-02a:hover { background: #ffcd56; } .button-02b { color: #252525; border: 2px solid #ffa600 !important; } .button-02b:hover { background: #ffa600; } .button-02c { color: #252525; } .button-02c:hover { background: #eee; } .button-03 { transition: .4s; display: inline-flex; font: 300 25px/1 Geometric; padding: 16px 55px; border-radius: 32px; background: transparent; text-align: center; justify-content: center; cursor: pointer; } .button-03a { color: #fff; border: 2px solid #ffa600 !important; } .button-03a:hover { border-color: #fff !important; } .button-03b { color: #252525; border: 2px solid #ffa600; background: #ffa600; } .button-03b:hover { border-color: #fff; background: #fff; } .button-04 { transition: .4s; display: inline-flex; font: 300 22px/1 Geometric; padding: 10px 55px; border-radius: 30px; background: transparent; text-align: center; justify-content: center; } .button-04a { color: #252525 !important; background: #fff; } .button-04a:hover { background: #ffa600; } .button-05 { transition: .4s; display: inline-flex; font: 500 22px/1 Geometric; padding: 16px 55px; border-radius: 32px; background: transparent; text-align: center; justify-content: center; } .button-05a { color: #fff !important; background: #ff700e; } .button-05a:hover { background: #252525; } /* ------- Global - Contact Form 7 ---------------------------------------------------------------------------------- */ .wpcf7-not-valid-tip, .screen-reader-response { display: none !important; } .wpcf7 form.init .wpcf7-response-output, .wpcf7 form.resetting .wpcf7-response-output, .wpcf7 form.submitting .wpcf7-response-output { display: none; } .wpcf7 form .wpcf7-response-output { border: 3px solid #00a0d2; background: #fff; color: #000; font-size: 14px; line-height: 1.3; text-align: center; padding: 7px 10px; margin-bottom: 30px; transition: .4s; } .wpcf7 form.sent .wpcf7-response-output { border: 3px solid #46b450; } .wpcf7 form.failed .wpcf7-response-output, .wpcf7 form.aborted .wpcf7-response-output { border: 3px solid #dc3232; } .wpcf7 form.spam .wpcf7-response-output { border: 3px solid #f56e28; } .wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output { border: 3px solid #ffb900; } .wpcf7-spinner { position: absolute; right: 16px; top: 50%; margin-top: -12px; visibility: hidden; display: block; background: #fff; width: 24px; height: 24px; border-radius: 100%; } form.submitting .wpcf7-spinner { visibility: visible; } .wpcf7-spinner::before { content: ""; position: absolute; background: #ffa600; top: 4px; left: 4px; width: 6px; height: 6px; border-radius: 100%; transform-origin: 8px 8px; animation-name: spin; animation-duration: 1000ms; animation-timing-function: linear; animation-iteration-count: infinite; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .wpcf7 [data-name="other"].wpcf7-form-control-wrap { display: none; } /* ------- Contact Page --------------------------------------------------------------------------------------------- */ .page-contact-01 { text-align: center; font-size: 25px; } .page-contact-01 a { color: inherit; } .page-contact-01 a:hover { color: #ffa600; border-color: #ffa600; } .page-contact-01 .mail { border-bottom: 1px dotted #363636; } .page-contact-03 .inner-01 { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; } .page-contact-03 h2 { color: #000; text-align: center; font: 500 37px/1 Geometric; width: 100%; margin-bottom: 3%; } .page-contact-03 .col { padding: 7px 4%; width: 50%; } .page-contact-03 .col a { color: inherit; } .page-contact-03 .col a:hover { color: #ffa600; } .page-contact-03 .col-01 { text-align: right; padding-left: 0; } .page-contact-03 .col-02 { border-left: 1px solid #ffb400; padding-right: 0; } /* ------- Global - Contact Form ------------------------------------------------------------------------------------ */ .contact-form-01 { background: #f6f8fc; } .contact-form-01 ::placeholder { color: #798693; opacity: 1; } .contact-form-01 .inner-20-content { padding: 0; width: 90%; } .contact-form-01 input:not([type="submit"],[type="checkbox"]), .contact-form-01 .nice-select, .contact-form-01 textarea { height: 51px; border-bottom: 1px solid #363636; padding: 10px 0; background: transparent; font: inherit; color: #000; width: 100%; position: relative; } .contact-form-01 .wpcf7-not-valid { border-color: #f00 !important; } .contact-form-01 textarea { max-width: 100%; resize: none; } .contact-form-01 select { visibility: hidden; } .contact-form-01 .nice-select:after { width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 8px solid #798693; position: absolute; bottom: 50%; margin-bottom: -4px; right: 0; content: ""; } .contact-form-01 .nice-select.open:after { border-bottom: 8px solid #000; border-top: 0; } .contact-form-01 .nice-select.open .list { opacity: 1; pointer-events: auto; transform: scale(1) translateY(0); } .contact-form-01 .nice-select .list { z-index: 1; background: #fff; opacity: 0; overflow: hidden; pointer-events: none; position: absolute; top: 100%; left: 0; width: 100%; transform: scale(0.75) translateY(-21px); transition: all .2s cubic-bezier(0.5, 0, 0, 1.25), opacity .15s ease-out; margin-top: 1px; box-shadow: 0 5px 5px rgba(0,0,0,0.1); max-height: calc(10em + 5px); overflow-y: auto; color: #545964; } .contact-form-01 .nice-select .option { cursor: pointer; line-height: 2em; outline: none; padding: 0 10px; transition: .4s; width: 100%; margin-bottom: 1px; } .contact-form-01 .nice-select .option:hover { background: #ffa600; color: #fff; } .contact-form-01 .nice-select .option.focus { background: #000; color: #fff; } .contact-form-01 .wpcf7-list-item { position: relative; color: #000; padding: 1px 0 0 35px; display: block; line-height: 1.2; font-size: 18px; } .contact-form-01 .wpcf7-list-item input[type="checkbox"] { position: absolute; z-index: 2; opacity: 0; top: 0; left: 0; width: 100%; height: 100%; } .contact-form-01 .wpcf7-list-item-label:before { cursor: pointer; transition: .4s; position: absolute; top: 2px; left: 0; width: 20px; height: 20px; background: #fff; border: 2px solid #858686; border-radius: 3px; content: ""; } .contact-form-01 .wpcf7-list-item input:checked ~ .wpcf7-list-item-label:after { position: absolute; content: ""; top: 5px; left: 7px; width: 6px; height: 11px; transform: rotate(45deg); border: solid #000; border-width: 0 2px 2px 0; z-index: 1; transition: .4s; } .contact-form-01 .wpcf7-list-item input:checked ~ .wpcf7-list-item-label:before { border-color: #000; } .contact-form-01 h2 { font: 500 30px/1 Geometric; color: #000; margin-bottom: 25px; width: 100%; } .contact-form-01 .wpcf7-form-control { display: block; } .contact-form-01 .wpcf7-form-control-wrap { width: 100%; display: block; margin-bottom: 20px; } .contact-form-01 .row:not(:last-child) { margin-bottom: 30px; } .contact-form-01 .row-01 { display: flex; flex-wrap: wrap; justify-content: space-between; } .contact-form-01 .row-01 .col { width: 48%; } .contact-form-01 .row-02 { padding-bottom: 20px; } .contact-form-01 .row-02 .col-wrap { border-radius: 20px; background: #fff; padding: 30px 30px 10px; display: flex; justify-content: space-between; } .contact-form-01 .row-02 .col:not(:last-child) { padding-right: 3%; } .contact-form-01 .row-03 { display: flex; flex-wrap: wrap; justify-content: space-between; } .contact-form-01 .row-03 .col-01 { width: 48%; } .contact-form-01 .row-03 .col-02 { width: 22%; } .contact-form-01 .row-03 .col-03 { width: 22%; } .contact-form-01 .row-04 { position: relative; display: flex; justify-content: center; flex-wrap: wrap; } .contact-form-01 .row-04 .required { position: absolute; left: 0; top: 0; bottom: 0; font-size: 14px; color: #838485; } .contact-form-01 .row-04 .col-01 { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1em; } .hidden-fields-container { display: none; } .wpcf7-turnstile { width: 100%; margin-top: 1em; } /* ------- Global - Request a Proposal ------------------------------------------------------------------------------ */ .request { background: #1a1a1a; color: #fff; } .request a { color: inherit; } .request a:hover { color: #ffa600; border-color: #ffa600 !important; } .request h2 { text-align: center; font: 300 37px/1 Geometric; margin-bottom: .85em; } .request .clmn-2 .col { margin-bottom: 0; } .request .clmn-2 .col-01 { display: flex; flex-wrap: wrap; justify-content: space-between; align-content: flex-start; } .request .clmn-2 .col-01 .wpcf7-form-control-wrap:nth-child(1), .request .clmn-2 .col-01 .wpcf7-form-control-wrap:nth-child(2) { width: 47%; } .request .row:not(:last-child) { margin-bottom: 1.5em; } .request .row-02 { display: flex; justify-content: center; flex-wrap: wrap; } .request .row-02 .col-01 { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1em; } .request .row-02 .button-03 { width: 250px; } .request .row-02 .text { width: 100%; text-align: center; margin-top: 30px; font-size: 25px; font-weight: 300; } .request .row-02 .text strong { font-weight: 500; } .request .row-02 .text .mail { border-bottom: 1px dotted #fff; } .request .row-02 .recaptcha { text-align: center; } .request ::placeholder { color: #a4a6a8; opacity: 1; } .request input:not([type="submit"],[type="checkbox"]), .request .nice-select, .request textarea { height: 51px; border-bottom: 1px solid #f8fafd; padding: 10px 0; background: transparent; font: inherit; font-size: 20px; color: #fff; width: 100%; position: relative; } .request .wpcf7-not-valid { border-color: #f00 !important; } .request textarea { max-width: 100%; resize: none; overflow: hidden; } .request select { visibility: hidden; } .request .nice-select:after { width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 8px solid #a4a6a8; position: absolute; bottom: 50%; margin-bottom: -4px; right: 0; content: ""; } .request .nice-select.open:after { border-bottom: 8px solid #fff; border-top: 0; } .request .nice-select.open .list { opacity: 1; pointer-events: auto; transform: scale(1) translateY(0); } .request .nice-select .list { margin: 1px 0 0; list-style: none; z-index: 1; background: #fff; opacity: 0; overflow: hidden; pointer-events: none; position: absolute; top: 100%; left: 0; width: 100%; transform: scale(0.75) translateY(-21px); transition: all .2s cubic-bezier(0.5, 0, 0, 1.25), opacity .15s ease-out; box-shadow: 0 5px 5px rgba(0,0,0,0.1); max-height: calc(10em + 5px); overflow-y: auto; color: #7B8895; } .request .nice-select .option { cursor: pointer; line-height: 2em; outline: none; padding: 0 10px; transition: .4s; width: 100%; margin-bottom: 1px; } .request .nice-select .option:hover { background: #ffa600; color: #fff; } .request .nice-select .option.focus { background: #000; color: #fff; } .request .wpcf7-form-control { display: block; } .request .wpcf7-form-control-wrap { width: 100%; display: block; margin-bottom: 20px; } /* ------- Global - Winner ------------------------------------------------------------------------------------------ */ .winner-01.section-01 { padding-bottom: 0 !important; } .winner-01 .inner-01 { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; width: calc(90% + 3%); } .winner-01 .inner-01 .img { max-width: 145px; width: calc(20% - 3%); margin: 0 1.5%; height: auto; } .winner-01a { margin-top: -110px; position: relative; } .winner-01a .inner-01 .img { max-width: 170px; } /* ------- Global - Description ------------------------------------------------------------------------------------- */ .description-01 { font: 26px/1.5 Montserrat; padding-top: 25px; text-align: center; color: #000; } .description-01 a { color: #000; } .description-01 a:hover { color: #ffb001; } /* ------- Global - Map-Full ---------------------------------------------------------------------------------------- */ .map-full { width: 100%; height: calc(15vw + 230px); } .map-full iframe { display: block; width: 100%; height: 100%; } /* ------- Header --------------------------------------------------------------------------------------------------- */ header { background: url("images/header-bg.webp") no-repeat top 0 right 50% / cover; position: relative; display: flex; align-items: center; flex-wrap: wrap; } header video { object-fit: cover; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } header .wrap { width: 100%; position: relative; } header .inner-01 { display: flex; flex-direction: column; justify-content: center; padding-top: 70px; position: static; } header .inner-01 .logo { margin: 0 auto; max-width: 368px; width: 70%; max-height: 103px; height: auto; position: static; } header .inner-01 .logo img { display: block; height: auto; width: 100%; } header .inner-01 .celebrate { color: rgba(0,0,0,0.76); font: italic 300 23px/1.2 Geometric; position: absolute; text-align: right; top: 67px; right: 30px; text-transform: uppercase; } header .inner-01 .large { font: 500 85px/1 Geometric; padding: 1.1em 0 0; text-transform: uppercase; text-align: center; color: #000; } header .inner-01 h1 { font: 700 30px/1.1 Geometric; padding: .3em 0 1.5em; text-transform: uppercase; text-align: center; color: #000; } header .logo { position: absolute; top: auto; bottom: auto; left: 30px; margin: auto 0; width: 151px; height: 43px; z-index: 2; } header .logo img { display: block; } header .menu-top { width: 100%; display: flex; justify-content: center; flex-wrap: wrap; align-items: center; position: relative; z-index: 1; } header .menu-top li { font: 700 17px/1 Lato; text-transform: uppercase; margin: 0 calc(1vw + 3px); } header .menu-top li a { padding: 28px 0; color: #000; border-bottom: 3px solid transparent; border-top: 3px solid transparent; display: block; } header .menu-top li:hover a, header .menu-top li.current-menu-item a, header .menu-top li.current-post-parent a, header .menu-top li.current-page-parent a, header .menu-top li.current-menu-parent a { border-bottom: 3px solid #000; } header .menu-top .sub-menu { display: none; } header .menu-right-open { transition: .4s; position: fixed; width: 70px; height: 70px; cursor: pointer; top: 30px; right: 30px; z-index: 9; background: #000; border-radius: 100%; display: flex; justify-content: center; align-items: center; } header .menu-right-open .line { width: 26px; height: 17px; position: relative; transition: .4s; border: solid #fff; border-width: 3px 0; } header .menu-right-open .line:before, header .menu-right-open .line:after { top: 4px; background: #fff; width: 100%; height: 3px; content: ""; position: absolute; left: 0; transition: .4s; } header .menu-right-open:hover .line { border-color: #ffa600; } header .menu-right-open:hover .line:before, header .menu-right-open:hover .line:after { background: #ffa600; } header .menu-right-open.active .line { border-color: transparent; } header .menu-right-open.active .line:before { transform: rotate(45deg); } header .menu-right-open.active .line:after { transform: rotate(-45deg); } header .menu-right-wrap { position: fixed; right: 0; top: 0; z-index: 2; width: 100%; max-width: 400px; height: 100vh; transition: .4s; transform: translateX(100%); background: rgba(0,0,0,0.9); padding: 120px 0 30px; } header .menu-right-wrap.active { transform: translateX(0%); } header .menu-right-scroll { overflow-y: auto; width: 100%; height: 100%; } header .menu-right { width: 100%; } header .menu-right li { margin-bottom: 1px; display: block; font: 17px/1 Lato; text-transform: uppercase; } header .menu-right li a { cursor: pointer; color: #fff; padding: 11px 5%; display: block; } header .menu-right li a:hover, header .menu-right li.current-menu-item { background: rgba(255,255,255,0.15); } header .menu-right li .sub-menu { display: none; } header .menu-right li .sub-menu a { padding: 10px 5% 10px 10%; font-size: 17px; line-height: 1.1; text-transform: capitalize; } header .menu-right .soc { display: inline-flex; margin-right: 10px; margin-top: 30px; } header .menu-right .soc a { width: 51px; height: 51px; background: #fff; color: #000; display: flex; align-items: center; justify-content: center; text-indent: -9999px; border-radius: 100%; padding: 1px 0 0 !important; } header .menu-right .soc a:hover { background: #a6a6a6; } header .menu-right .soc-01 { margin-left: 5%; } header .menu-right .soc a:before { font: 26px/1 "fontello"; transition: .4s; text-indent: 0; } header .menu-right .soc-01 a:before { content: '\f09a'; } header .menu-right .soc-02 a:before { content: '\f306'; } header .menu-right .soc-03 a:before { content: '\f0e1'; } header .menu-right .soc-04 a:before { content: '\f16d'; } header .menu-work-block { padding: 0 0 205px; } header .menu-work { font: 500 23px/1 Geometric; text-transform: uppercase; display: flex; flex-wrap: wrap; justify-content: center; } header .menu-work li { display: inline-block; position: relative; } header .menu-work li:after { position: absolute; top: 50%; right: -3px; margin-top: -3px; border-radius: 100%; content: ""; width: 6px; height: 6px; background: #fff; } header .menu-work li:last-child:after { display: none; } header .menu-work a { white-space: nowrap; padding: calc(.2vw + 7px) calc(.7vw + 6px); color: #000; display: block; } header .menu-work a:hover, header .menu-work .current-menu-item a, header .menu-work .current-post-parent a { color: #fff; } /* ------- footer recent news --------------------------------------------------------------------------------------- */ .recent-news { text-align: center; } .recent-news h2 { font: 500 37px/1 Geometric; text-transform: uppercase; color: #000; text-align: center; margin-bottom: 1.4em; } .recent-news ul { display: flex; flex-wrap: wrap; } .recent-news ul li { width: 50%; background: #f5f5f5; margin-bottom: 2em; padding: 0; display: flex; align-items: flex-start; } .recent-news ul li:before, .recent-news ul li:after { display: none; } .recent-news ul li .srpw-img { flex: 1 2 350px; margin: 0; transition: .4s; position: relative; } .recent-news ul li .srpw-img:before { padding-top: 100%; content: ""; float: left; } .recent-news ul li .srpw-img img { transition: .4s; position: absolute; object-fit: cover; width: 100%; height: 100%; } .recent-news ul li .srpw-img:hover img { opacity: .8; filter: grayscale(100%); } .recent-news ul li .srpw-content { flex: 1 1 350px; padding: .9em; display: flex; flex-direction: column; height: 100%; } .recent-news ul li .srpw-content .srpw-title { text-align: left; transition: .4s; display: block; font-size: 22px; line-height: 1.3; letter-spacing: -.05em; color: #000; margin: 0 0 .7em; } .recent-news ul li .srpw-content .srpw-title:hover { color: #ffa600; } .recent-news ul li .srpw-content .srpw-summary { text-align: left; flex: 1; color: #464646; font-size: 17px; padding: 0; line-height: 1.4; display: flex; flex-direction: column; } .recent-news ul li .srpw-content .srpw-summary p { margin-bottom: 1em !important; } .recent-news .srpw-more-link { color: #000; font-size: 15px; line-height: 1; border-radius: 30px; text-align: center; padding: 8px 25px; border: 1px solid #9c9c9c; margin: auto 0 0 auto; } .recent-news .srpw-more-link:hover { background: #ddd; } /* ------- footer .top-block ---------------------------------------------------------------------------------------- */ footer { color: #a6a6a6; font-size: 17px; font-family: "Lato", sans-serif; line-height: 1.3; } footer .top-block { padding-top: calc(3.3vw + 40px); background: #111; } footer .top-block .inner-02 { display: flex; justify-content: space-between; } footer .top-block strong { font-family: "Lato", sans-serif; font-weight: 700; } footer .top-block .lr { display: flex; margin-bottom: 50px; align-content: flex-start; width: 50%; flex-wrap: wrap; } footer .top-block .fcol { padding-top: 15px; padding-bottom: 15px; display: flex; flex-direction: column; width: 50%; } footer .top-block .fcol:not(.fcol-01) { padding-left: 35px; border-left: 1px solid rgba(255,255,255,.1); } footer .top-block .fcol:not(.fcol-04) { padding-right: 35px; } footer .top-block a { color: #a6a6a6; } footer .top-block a:hover, footer .top-block .current-menu-item a, footer .top-block .current-menu-parent a { color: #fff; } footer .top-block .h5 { margin-bottom: 40px; height: 45px; color: #fff; font: 300 24px/1 Geometric; position: relative; width: 100%; } footer .top-block .h5:after { content: ""; background: #fff; width: 40px; left: 0; bottom: 0; position: absolute; height: 3px; } footer .top-block .logo { margin-bottom: 40px; height: 45px; display: block; line-height: 1; font-size: 21px; font-weight: 500; } footer .top-block .logo img { height: auto; display: block; } footer .top-block .tel-mail { font-size: 21px; color: #fff; font-family: "Lato", sans-serif; } footer .top-block .tel-mail:hover { color: #ffa600; } footer .top-block .row { padding: 7px 0 20px; } footer .top-block .row:last-child { padding-bottom: 7px; } footer .top-block .copy { font-size: 14px; padding: 7px 0; } footer .top-block .social { margin: 40px 0; } footer .top-block .social .soc { display: inline-flex; margin-right: 15px; } footer .top-block .social .soc:last-child { margin-right: 0; } footer .top-block .social .soc:before { font: 24px/1 "fontello"; transition: .4s; } footer .top-block .social .soc-01:before { content: '\f09a'; } footer .top-block .social .soc-02:before { content: '\f099'; } footer .top-block .social .soc-03:before { content: '\f0e1'; } footer .top-block .social .soc-04:before { content: '\f16d'; } footer .top-block .menu li a { display: block; position: relative; padding: 8px 0; } footer .top-block .menu-01 a::after, footer .top-block .menu-01 a::before { position: absolute; left: -36px; content: ""; width: 1px; transition: .4s; } footer .top-block .menu-01 a::after { top: 7px; height: calc(100% - 14px); } footer .top-block .menu-01 a::before { top: -100%; bottom: -100%; margin: auto 0; height: calc(100% + 26px); } footer .top-block .menu-01 a:hover::after, footer .top-block .menu-01 .current-menu-item a::after { background: #fff; } footer .top-block .menu-01 a:hover::before, footer .top-block .menu-01 .current-menu-item a::before { background: rgba(255,255,255,.3); } footer .top-block .button-wrap { padding-top: 20px; } footer .top-block .button-wrap .button-04 { padding-left: 35px; padding-right: 35px; max-width: 250px; width: 100%; } footer .top-block .years-25 { margin-top: 32px; } footer .top-block .winner { width: 100%; padding-left: 35px; border-left: 1px solid rgba(255,255,255,.1); padding-top: 38px; } footer .top-block .winner img { display: block; height: auto; } footer .landing-block { width: 100%; background: #161616; padding: 50px 0 calc(3.3vw + 40px); } footer .landing-menu { width: 100%; flex-wrap: wrap; display: flex; font-size: 14px; justify-content: space-between; } footer .landing-menu li { width: 25%; margin: 0ж padding-right: 3%; } footer .landing-menu li a { color: #a3a3a3; padding: .5em 0; display: block; } footer .landing-menu li a:hover, footer .landing-menu li.current-menu-item a { color: #fff; } /* Re-Captcha ------------------------------------------------------------------------------------------------------- */ .grecaptcha-badge { visibility: hidden; } .recaptcha { width: 100%; font-size: 12px; line-height: 1.3; padding-top: 2em; text-align: center; } .recaptcha a:hover { color: #ffa600 !important; } #request .recaptcha { color: #bbb; } #request .recaptcha a { color: #bbb; } .page-id-9 .recaptcha { color: #545454; } .page-id-9 .recaptcha a { color: #545454; } /* Footer Relative Post --------------------------------------------------------------------------------------------- */ .f-relative-section { background: #f1f1f1; } .f-relative-section ul { display: flex; flex-wrap: wrap; margin: -1.5%; } .f-relative-section ul li { margin: 1.5%; width: calc(33.333333% - 3%); } .f-relative-section ul li a { position: relative; display: flex; } .f-relative-section ul li a:after { float: left; padding-top: 100%; content: ""; background: #333} .f-relative-image { width: 100%; height: 100%; } .f-relative-image img { object-fit: cover; width: 100%; height: 100%; transition: .4s; } .f-relative-content { position: absolute; padding: 7%; width: 100%; height: 100%; background: rgba(0,0,0,.2); transition: .4s; color: #fff; } .f-relative-title { transition: .4s; font: 23px/1.2 Geometric; } .f-relative-text { margin: 1em 0; font: 17px/1.5 "Montserrat", sans-serif; display: none; transition: .4s; } .f-relative-read-more { font: 500 14px/1 "Montserrat", sans-serif; position: relative; display: none; transition: .4s; } .f-relative-read-more:after { width: 0; height: 0; border-left: 6px solid #fff; border-top: 6px solid transparent; border-bottom: 6px solid transparent; content: ""; margin-left: .4em; display: inline-block; opacity: .6; } .f-relative-content:hover { background: rgba(0,0,0,.8); } .f-relative-content:hover .f-relative-text, .f-relative-content:hover .f-relative-read-more { display: block; } /* Slick ------------------------------------------------------------------------------------------------------------ */ .slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; } .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { position: relative; top: 0; left: 0; display: block; margin-left: auto; margin-right: auto; } .slick-track:before, .slick-track:after { display: table; content: ''; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { display: none; float: left; height: 100%; min-height: 1px; } [dir='rtl'] .slick-slide { float: right; } .slick-slide img { display: block; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } .slick-arrow.slick-hidden { display: none; } .slick-slider .slick-dots, .slick-slider .slick-dots li { padding: 0 !important; margin: 0 !important; list-style: none !important; } /* Slider Quote 01 -------------------------------------------------------------------------------------------------- */ .home .slider-quote-01 .slider .slick-slide { font-weight: 400 !important; font-style: italic; } .slider-quote-01 { background: url("images/slider-quote-01-bg.webp") no-repeat 50% / cover; } .slider-quote-01 .slider { padding: calc(6.2vw + 40px) 0; background: url("images/slider-quote-01-quote.webp") no-repeat left top 50% / 8.2% auto; } .slider-quote-01 .slider .slick-list { padding-left: 14%; } .slider-quote-01 .slider .slick-slide { font-size: 23px; font-weight: 500; color: #000; } .slider-quote-01 .slider .slick-slide .text { display: block; } .slider-quote-01 .slider .slick-slide .author { display: block; margin-top: 1em; text-align: right; } .slider-quote-01 .slick-dots { position: absolute; bottom: 35px; width: 100%; display: flex; justify-content: center; } .slider-quote-01 .slick-dots .button { transition: .4s; text-indent: -9999px; display: block; width: 11px; height: 11px; margin: 0 5px; border-radius: 100%; cursor: pointer; background: #fff; opacity: .5} .slider-quote-01 .slick-dots .slick-active .button, .slider-quote-01 .slick-dots .button:hover { opacity: 1; } /* Slider Full 01 --------------------------------------------------------------------------------------------------- */ .slider-full-01 .slider .slick-slide a { display: block; } .slider-full-01 .slider .slick-slide a img { width: 100%; height: auto; } .slider-full-01 .slider .slick-arrow { position: absolute; top: 0; text-indent: -9999px; width: calc(6% + 15px); max-width: 115px; height: 100%; transition: .4s; background-color: #ccc; z-index: 1; cursor: pointer; opacity: .8; } .slider-full-01 .slider .slick-arrow.slick-prev { left: 0; background: url("images/slider-full-01-arrow-l.webp") no-repeat 50% / 65% auto; } .slider-full-01 .slider .slick-arrow.slick-next { right: 0; background: url("images/slider-full-01-arrow-r.webp") no-repeat 50% / 65% auto; } .slider-full-01 .slider .slick-arrow:hover { background-color: rgba(0,0,0,0.2); opacity: 1; } .slider-full-01 .slider .tablet { display: none !important; } /* Slider Clients 01 ------------------------------------------------------------------------------------------------ */ .slider-clients-01 { padding: 0 2% 35px; } .slider-clients-01 .slider .slick-track { display: flex; align-items: center; } .slider-clients-01 .slider .slick-slide { display: flex; align-items: center; justify-content: center; padding: 0 25px; } .slider-clients-01 .slick-dots { margin: 20px 0 0 !important; width: 100%; display: flex; justify-content: center; } .slider-clients-01 .slick-dots .button { transition: .4s; text-indent: -9999px; display: block; width: 11px; height: 11px; margin: 0 5px; border-radius: 100%; background: #d7d7d7; cursor: pointer; } .slider-clients-01 .slick-dots .slick-active .button, .slider-clients-01 .slick-dots .button:hover { background: #5c5c5c; } /* Slider Fix Optimization ------------------------------------------------------------------------------------------ */ .slider-full-01 .slider { max-height: 583px; overflow: hidden } .slider-clients-01 .slider { max-height: 147px; overflow: hidden; } .slider-clients-01 .slider .slick-list { max-height: 116px; } /* ------- footer .recent-01 ---------------------------------------------------------------------------------------- */ .recent-01 h2 { text-transform: uppercase; } .recent-01 ul { display: flex; flex-wrap: wrap; justify-content: space-between; list-style: none; margin: 0 0 -2.5em !important; } .recent-01 ul li { width: 31%; margin: 0 0 2.5em !important; padding: 0 !important; display: flex; flex-direction: column; } .recent-01 ul li:before, .recent-01 ul li:after { display: none !important; } .recent-01 ul li:nth-child(4) { display: none; } .recent-01 ul li .srpw-img { width: 100%; border: 0; margin: 0; float: none; display: flex; } .recent-01 ul li .srpw-img:after { content: ""; padding-top: 100%; float: left; } .recent-01 ul li .srpw-img img { width: 100%; height: 100%; margin: 0; object-fit: cover; transition: .4s; } .recent-01 ul li .srpw-img:hover img { opacity: .8; filter: grayscale(100%); } .recent-01 ul li .srpw-content { height: 100%; display: flex; flex-direction: column; } .recent-01 ul li .srpw-content .srpw-title { font: 500 25px/1.2 Geometric; color: #000; display: block; margin: .9em 0 .5em; border: 0 !important; } .recent-01 ul li .srpw-content .srpw-title:hover { color: #fe813b; } .recent-01 ul li .srpw-content .srpw-meta { display: none; } .recent-01 ul li .srpw-content .srpw-summary { display: flex; flex-direction: column; padding: 0; font-size: 17px; line-height: 1.6; flex-grow: 1; } .recent-01 ul li .srpw-content p { margin-bottom: .7em !important; } .recent-01 ul li .srpw-content .srpw-more-link { color: #fe813b; padding: 0; line-height: 1; position: relative; width: 30px; height: 14px; transition: .4s; } .recent-01 ul li .srpw-content .srpw-more-link:after { transition: .4s; background: #fe813b; position: absolute; content: ""; left: 0; top: 50%; margin-top: -1px; height: 2px; width: 100%; } .recent-01 ul li .srpw-content .srpw-more-link:before { transition: .4s; position: absolute; content: ""; border: solid #fe813b; border-width: 0 2px 2px 0; padding: 4px; transform: rotate(-45deg); right: 0; top: 50%; margin-top: -5px; } .recent-01 ul li .srpw-content .srpw-more-link:hover { width: 40px; } .recent-01 ul li .srpw-content .srpw-more-link:hover:after { background: #000; } .recent-01 ul li .srpw-content .srpw-more-link:hover:before { border-color: #000; } /* Global - Page New ----------------------------------------------------------------------------------------------- */ .pagenew-01 { color: #000; background: #f6f7f9; } .pagenew-01 h2 { font: 500 37px/1 Geometric; margin-bottom: .85em; color: #000; } .pagenew-01 .button-wrap { padding-top: .3em; } .pagenew-01 .slider-clients-01 { padding: calc(4vw + 40px) 2%; background: #fff; } .pagenew-01 .slider-quote-01 { background: url("images/slider-quote-01-bg-02.webp") no-repeat 50% / cover; } .pagenew-01 .slider-quote-01 .slider .slick-slide { color: #fff; font: 300 25px/1.4 Geometric, sans-serif; } .pagenew-01 .slider-quote-01 .slider { background-image: url("images/slider-quote-01-quote-02.webp"); } .pagenew-01 .full-width-img img { width: 100%; height: auto; } .pagenew-01 ul { padding: 0; margin: 0 0 1em 1em; line-height: 1.4; list-style: square outside; } .pagenew-01 ul:last-child { margin-bottom: 0; } .pagenew-01 ul li { margin-bottom: .7em; padding-left: .2em; } .pagenew-01 ul li:last-child { margin-bottom: 0; } .pagenew-01 ul li::marker { color: #ff700e; } /* Global - Statistic 01 ------------------------------------------------------------------------------------------- */ .statistic-01 { background: #fff; } .statistic-01 .column { display: flex; justify-content: space-between; flex-wrap: wrap; margin: 0 -4%; } .statistic-01 .column .col { position: relative; padding: 1.5em 4%; margin: -1.5em 0; text-align: center; font: 300 23px/1.3 Geometric; width: 30%; display: flex; flex-direction: column; align-items: center; } .statistic-01 .column .col + .col:after { background: #e5e5e5; left: 0; top: 0; height: 100%; width: 1px; content: ""; position: absolute; } .statistic-01 .column .col img { margin: .25em auto 0; height: auto; } .statistic-01 .column .col-02 { width: 40%; } .statistic-01 .title { font: 500 55px/1 Geometric; letter-spacing: -.04em; padding-bottom: .4em; white-space: nowrap; } /* Global - Team 01 ------------------------------------------------------------------------------------------------ */ .team-01 { box-shadow: 0 0 40px rgba(5,81,233,.15); background: #fff; position: relative; padding: 5%; display: flex; flex-direction: column; } .team-01 .photo { position: absolute; right: 10%; top: 0; max-width: 139px; height: 0; width: 24%; display: flex; align-items: center; } .team-01 .name { font: 500 30px/1 Geometric; letter-spacing: -.04em; } .team-01 .position { font-style: italic; font-size: 90%; margin: .1em 0 1em; } .team-01 .desc { font-size: 85%; display: flex; align-items: center; height: 100%; } /* Global - Steps 01 ------------------------------------------------------------------------------------------------ */ .steps-01 { text-transform: uppercase; color: #757575; font-size: 15px; line-height: 1.2; } .steps-01 .inner-01 { display: flex; flex-wrap: wrap; justify-content: space-between; } .steps-01 .step { display: flex; flex-wrap: wrap; align-items: center; flex-direction: column; text-align: center; width: calc(20% - 4%); } .steps-01 .step img { height: auto; margin-bottom: 1.3em; } .steps-01 .step-arrow { position: relative; width: 5%; max-width: 40px; display: flex; justify-content: center; align-items: center; } .steps-01 .step-arrow:after { transform: rotate(45deg); position: absolute; content: ""; left: 50%; top: 31%; margin: 0 0 0 -1.5em; width: 2em; height: 2em; border: solid #eee; border-width: .55em .55em 0 0; } .steps-01 .step-arrow.arrow-01:after { border-color: #ffcc15; } .steps-01 .step-arrow.arrow-02:after { border-color: #feab2d; } .steps-01 .step-arrow.arrow-03:after { border-color: #fd8c44; } .steps-01 .step-arrow.arrow-04:after { border-color: #fd7456; } /* Global - Yellow 01 ----------------------------------------------------------------------------------------------- */ .yellow-02 { background: #fed201; font: 500 24px/1.2 Geometric; margin-bottom: 2.5em !important;; padding: 5%; display: flex; flex-direction: column; justify-content: center; } .yellow-02 ul { padding: 0; margin: 0 0 1em 1em; line-height: 1.3; list-style: square outside; } .yellow-02 ul:last-child { margin-bottom: 0; } .yellow-02 ul li { margin-bottom: 1em; padding-bottom: 1em; padding-left: .2em; border-bottom: solid 1px rgba(0,0,0,.1); } .yellow-02 ul:last-child li:last-child { border-bottom: 0; padding-bottom: 0; } .yellow-02 ul li:last-child { margin-bottom: 0; } .yellow-02 ul li::marker { color: #fff; } /* Global - Link 01 ------------------------------------------------------------------------------------------------- */ .link-01-wrap { padding-top: .5em; } .link-01 { font: 500 22px/1 Geometric; color: rgba(0,0,0,.7); position: relative; transition: .4s; padding-right: 40px; } .link-01:after { transition: .4s; background: rgba(0,0,0,.7); position: absolute; content: ""; right: 0; top: 50%; margin-top: -1px; height: 2px; width: 30px; } .link-01:before { transition: .4s; position: absolute; content: ""; border: solid rgba(0,0,0,.7); border-width: 0 2px 2px 0; padding: 4px; transform: rotate(-45deg); right: 0; top: 50%; margin-top: -5px; } .link-01:hover { padding-right: 50px; color: #fff; } .link-01:hover:after { width: 40px; background: #fff; } .link-01:hover:before { border-color: #fff; } /* ------- Header Animation ----------------------------------------------------------------------------------------- */ .header-animation { overflow: hidden; background: linear-gradient(61deg, rgba(249,42,196,1) 0%, rgba(255,172,16,1) 25%, rgba(254,235,0,1) 70%); } .header-animation .circle { display: flex; position: absolute; border-radius: 100%; opacity: .2; } .header-animation .circle:after { content: ""; float: left; padding-top: 100%; } .header-animation .circle-01 { top: 25%; left: -77%; width: 140%; animation: bg-01 11s ease-in-out infinite alternate, move-01 35s ease-in-out infinite alternate; } @keyframes bg-01 { 0%, 100% { background-color: #f00; } 50% { background-color: #f77; } } @keyframes move-01 { 0%, 100% { transform: translate(0,0); opacity: .075; } 14% { transform: translate(20%,10%) scale(1.1); opacity: .15; } 30% { transform: translate(5%,10%); opacity: .075; } 44% { transform: translate(10%,-100%); opacity: .15; } 58% { transform: translate(-10%,-40%); opacity: .1; } 72% { transform: translate(15%,15%) scale(1.1); opacity: .075; } 86% { transform: translate(-5%,-20%); opacity: .075; } } .header-animation .circle-02 { left: -89%; width: 125%; animation: bg-02 16s ease-in-out infinite alternate, move-02 45s ease-in-out infinite alternate; } @keyframes bg-02 { 0%, 100% { background-color: #f99;} 66% { background-color: #f55; } } @keyframes move-02 { 0%,100% { transform: translate(0,0); opacity: .2; } 10% { transform: translate(10%,40%); opacity: .1; } /*20% {*/ /* transform: translate(30%,35%);*/ /* opacity: .15;*/ /*}*/ 30% { transform: translate(-10%,-35%); opacity: .1; } 40% { transform: translate(20%,-45%); opacity: .15; } 50% { transform: translate(30%,-20%); opacity: .1; } 60% { transform: translate(15%,0) scale(1.1); opacity: .2; } 70% { transform: translate(20%,50%); opacity: .1; } 80% { transform: translate(10%,20%); opacity: .15; } 90% { transform: translate(-10%,-40%); opacity: .1; } } .header-animation .circle-03 { bottom: -5%; left: 40%; width: 170%; animation: bg-03 7s ease-in-out infinite alternate, move-03 31s ease-in-out infinite alternate; } @keyframes bg-03 { 0%, 100% { background-color: #d72660;} 50% { background-color: #fea406; } } @keyframes move-03 { 0%,100% { transform: translate(0,0); opacity: .1; } 25% { transform: translate(20%,5%); opacity: .15; } 50% { transform: translate(0%,80%) scale(.9); opacity: .1; } 75% { transform: translate(-20%,-10%); opacity: .2; } } /* Global - Next Previous for Portfolio ----------------------------------------------------------------------------- */ .next-prev { margin-bottom: 4vw; } .next-prev .inner-02 { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; } .next-prev .col { width: 48%; height: 100%; display: flex; } .next-prev a { display: flex; color: #ffa600; width: 100%; align-items: center; } .next-prev a .image { max-width: 110px; width: 25%; flex-grow: 0; flex-shrink: 0; } .next-prev a .image img { transition: .4s; } .next-prev a .title { flex-grow: 1; flex-shrink: 1; width: auto; font: 300 30px/1 Geometric; } .next-prev .arrow { max-width: 70px; width: 10%; height: 100%; display: flex; align-items: center; flex-grow: 0; flex-shrink: 0; } .next-prev .arrow:after { width: 2.3em; height: 2.3em; border: solid #ffa600; border-width: .2em .2em 0 0; content: ""; transition: .4s; } .next-prev .col-01 .arrow { justify-content: flex-end; margin-right: -.7em; } .next-prev .col-01 .arrow:after { transform: rotate(-135deg); } .next-prev .col-02 { text-align: right; } .next-prev .col-02 .arrow { justify-content: flex-start; margin-left: -.7em; } .next-prev .col-02 .arrow:after { transform: rotate(45deg); } .next-prev a:hover .arrow:after { border-color: #252525; } .next-prev a:hover { color: #252525; } .next-prev a:hover .image img { filter: grayscale(100%); } /* ------- Media Screen --------------------------------------------------------------------------------------------- */ @media screen and (max-width: 1900px) {} @media screen and (max-width: 1800px) { .header-animation .circle-01 { top: 25%; left: -77.5%; } .header-animation .circle-02 { left: -89.5%; } .header-animation .circle-03 { bottom: -5%; left: 40.5%; } } @media screen and (max-width: 1700px) { .header-animation .circle-01 { top: 25%; left: -78%; } .header-animation .circle-02 { left: -90%; } .header-animation .circle-03 { bottom: -5%; left: 41%; } } @media screen and (max-width: 1600px) { .header-animation .circle-01 { top: 25%; left: -78.5%; } .header-animation .circle-02 { left: -90.5%; } .header-animation .circle-03 { bottom: -5%; left: 41.5%; } } @media screen and (max-width: 1500px) { .header-animation .circle-01 { top: 25%; left: -79%; } .header-animation .circle-02 { left: -91%; } .header-animation .circle-03 { bottom: -5%; left: 42%; } footer .top-block { font-size: calc(13px + (17 - 13) * ((100vw - 360px) / (1500 - 360))); } footer .top-block .h5, footer .top-block .tel-mail, footer .top-block .logo { font-size: calc(20px + (24 - 20) * ((100vw - 360px) / (1500 - 360))); } footer .top-block .tel-mail, footer .top-block .logo { font-size: calc(17px + (21 - 17) * ((100vw - 360px) / (1500 - 360))); } footer .top-block .copy { font-size: calc(11px + (14 - 11) * ((100vw - 360px) / (1500 - 360))); } footer .landing-menu { font-size: calc(12px + (14 - 12) * ((100vw - 360px) / (1500 - 360))); } .recent-news ul li .srpw-content .srpw-title { font-size: calc(15px + (22 - 15) * ((100vw - 360px) / (1500 - 360))); } .recent-news ul li .srpw-content .srpw-summary { font-size: calc(13px + (17 - 13) * ((100vw - 360px) / (1500 - 360))); } .recent-news h2 { font-size: calc(28px + (37 - 28) * ((100vw - 360px) / (1500 - 360))); } .recent-news .srpw-more-link { font-size: calc(13px + (15 - 13) * ((100vw - 360px) / (1400 - 360))); } .steps-01 { font-size: calc(13px + (15 - 13) * ((100vw - 360px) / (1500 - 360))); } } @media screen and (max-width: 1400px) { .header-animation .circle-01 { top: 25%; left: -79.5%; } .header-animation .circle-02 { left: -91.5%; } .header-animation .circle-03 { bottom: -5%; left: 42.5%; } body { font-size: calc(14px + (20 - 14) * ((100vw - 360px) / (1400 - 360))); } footer .top-block .fcol:not(.fcol-01), footer .top-block .winner { padding-left: 30px; } footer .top-block .fcol:not(.fcol-04) { padding-right: 30px; } footer .top-block .menu-01 a::after, footer .top-block .menu-01 a::before { left: -31px; } .request input:not([type="submit"],[type="checkbox"]), .request .nice-select, .request textarea { font-size: calc(15px + (20 - 15) * ((100vw - 360px) / (1400 - 360))); } .request .row-02 .text { font-size: calc(17px + (25 - 17) * ((100vw - 360px) / (1400 - 360))); } .slider-quote-01 .slider .slick-slide { font-size: calc(15px + (23 - 15) * ((100vw - 360px) / (1400 - 360))); } .pagenew-01 .slider-quote-01 .slider .slick-slide { font-size: calc(17px + (25 - 17) * ((100vw - 360px) / (1400 - 360))); } .yellow-02 { font-size: calc(17px + (24 - 17) * ((100vw - 360px) / (1400 - 360))); } .link-01 { font-size: calc(16px + (22 - 16) * ((100vw - 360px) / (1400 - 360))); } .statistic-01 .title { font-size: calc(30px + (55 - 30) * ((100vw - 360px) / (1400 - 360))); } .statistic-01 .column .col { font-size: calc(14px + (23 - 14) * ((100vw - 360px) / (1400 - 360))); } .button-02 { font-size: calc(20px + (25 - 20) * ((100vw - 360px) / (1400 - 360))); } .button-03 { font-size: calc(20px + (25 - 20) * ((100vw - 360px) / (1400 - 360))); } .button-04, .button-05 { font-size: calc(19px + (22 - 19) * ((100vw - 360px) / (1400 - 360))); } .title-page h1, .title-page .h1 { font-size: calc(33px + (50 - 33) * ((100vw - 360px) / (1400 - 360))); } .page-contact-01 { font-size: calc(17px + (25 - 17) * ((100vw - 360px) / (1400 - 360))); } .page-contact-03 h2, .pagenew-01 h2, .request h2 { font-size: calc(31px + (37 - 31) * ((100vw - 360px) / (1400 - 360))); } .contact-form-01 h2 { font-size: calc(24px + (30 - 24) * ((100vw - 360px) / (1400 - 360))); } .description-01 { font-size: calc(17px + (26 - 17) * ((100vw - 360px) / (1400 - 360))); } header .inner-01 .large { font-size: calc(46px + (85 - 46) * ((100vw - 360px) / (1400 - 360))); } header .inner-01 h1 { font-size: calc(22px + (30 - 22) * ((100vw - 360px) / (1400 - 360))); } header .inner-01 .celebrate { font-size: calc(17px + (23 - 17) * ((100vw - 360px) / (1400 - 360))); } header .menu-right li .sub-menu a { font-size: calc(15px + (17 - 15) * ((100vw - 360px) / (1400 - 360))); } header .menu-work { font-size: calc(17px + (23 - 17) * ((100vw - 360px) / (1400 - 360))); } .recent-01 ul li .srpw-content .srpw-title { font-size: calc(20px + (25 - 20) * ((100vw - 360px) / (1400 - 360))); } .recent-01 ul li .srpw-content .srpw-summary { font-size: calc(14px + (17 - 14) * ((100vw - 360px) / (1400 - 360))); } .team-01 .name { font-size: calc(25px + (30 - 25) * ((100vw - 360px) / (1400 - 360))); } } @media screen and (max-width: 1300px) { .header-animation .circle-01 { top: 25%; left: -80%; } .header-animation .circle-02 { left: -92%; } .header-animation .circle-03 { bottom: -5%; left: 43%; } footer .top-block .fcol:not(.fcol-01), footer .top-block .winner { padding-left: 25px; } footer .top-block .fcol:not(.fcol-04) { padding-right: 25px; } footer .top-block .menu-01 a::after, footer .top-block .menu-01 a::before { left: -26px; } .request input:not([type="submit"],[type="checkbox"]), .request .nice-select, .request textarea { height: 50px; } } @media screen and (max-width: 1250px) { .slider-clients-01 .slider .slick-slide { padding: 0 20px; } } @media screen and (max-width: 1200px) { .header-animation .circle-01 { top: 25%; left: -80.5%; width: 145%; } .header-animation .circle-02 { left: -92.5%; width: 129%; } .header-animation .circle-03 { bottom: -5%; left: 43.5%; width: 176%; } footer .top-block .fcol:not(.fcol-01), footer .top-block .winner { padding-left: 20px; } footer .top-block .fcol:not(.fcol-04) { padding-right: 20px; } footer .top-block .menu-01 a::after, footer .top-block .menu-01 a::before { left: -21px; } } @media screen and (max-width: 1100px) { .header-animation .circle-01 { top: 25%; left: -81%; } .header-animation .circle-02 { left: -93%; } .header-animation .circle-03 { bottom: -5%; left: 44%; } header .menu-work-block { padding: 0 0 200px; } footer .top-block .fcol:not(.fcol-01), footer .top-block .winner { padding-left: 15px; } footer .top-block .fcol:not(.fcol-04) { padding-right: 15px; } footer .top-block .menu-01 a::after, footer .top-block .menu-01 a::before { left: -16px; } footer .landing-menu li { width: 30%; padding-right: 0; } .request input:not([type="submit"],[type="checkbox"]), .request .nice-select, .request textarea { height: 49px; } .button-02, .button-03, .button-05 { padding: 15px 55px; } .recent-news ul { margin: 0 auto !important; max-width: 620px; } .recent-news ul li { width: 100%; } .recent-news ul li .srpw-img { flex: 1 2 310px; } .recent-news ul li .srpw-content { flex: 1 1 310px; } } @media screen and (max-width: 1050px) { header .menu-work a:after { width: 5px; height: 5px; } } @media screen and (max-width: 1000px) { .header-animation .circle-01 { top: 25%; left: -81.5%; } .header-animation .circle-02 { left: -93.5%; } .header-animation .circle-03 { bottom: -5%; left: 44.5%; } header .menu-work-block { padding: 0 0 190px; } .request input:not([type="submit"],[type="checkbox"]), .request .nice-select, .request textarea { height: 48px; } .button-02, .button-03, .button-05 { padding: 14px 50px; } } @media screen and (max-width: 980px) { .header-animation .circle-01 { top: 25%; left: -90%; width: 154%; } .header-animation .circle-02 { left: -107%; width: 137%; } .header-animation .circle-03 { bottom: -5%; left: 45%; width: 187%; } .section-01 { padding: 50px 0; } .clmn-2 .col { width: 100%; } .contact-form-01 .inner-01 { max-width: 590px; } .contact-form-01 .row-01 .col { width: 100%; } .contact-form-01 .row-02 .col-wrap { flex-direction: column; padding: 30px 6% 10px; } .contact-form-01 .row-02 .col { padding: 0 !important; width: 100%; } .contact-form-01 .row-03 .col { width: 100%; } .contact-form-01 .row-04 .required { display: none; } header .logo { position: static; margin: 13px 20px; } header .inner-01 .logo { margin-top: 3%; } header .inner-01 .celebrate { left: 5%; right: auto; top: 0; display: flex; align-items: center; height: 69px; text-transform: none; font-weight: normal; white-space: nowrap; } header .inner-01 .celebrate br { display: none; } header .menu-top { display: none; } header .menu-right-wrap { padding-top: 69px; } header .menu-right-open { width: 49px; height: 49px; top: 10px; right: 10px; } footer .top-block { padding-bottom: calc(3.3vw + 40px); } footer .top-block .inner-02 { flex-wrap: wrap; max-width: 530px; padding-bottom: 50px; } footer .top-block .lr { width: 50%; } footer .top-block .fcol { width: 100%; } footer .top-block .fcol-02, footer .top-block .fcol-03 { display: none; } footer .top-block .social { margin: 30px 0 0; } footer .top-block .years-25 { margin-top: 22px; } footer .top-block .copy { position: absolute; left: 0; bottom: 0; width: 100%; padding: 0; } footer .landing-block { display: none; } .request .clmn-2 .col-01 .wpcf7-form-control-wrap:nth-child(1), .request .clmn-2 .col-01 .wpcf7-form-control-wrap:nth-child(2) { width: 100%; } .request form { margin-right: auto; margin-left: auto; max-width: 600px; } .request .row-02 .text br { display: none; } .slider-quote-01 .slider { background-size: calc(4vw + 21px) auto; background-position: left 0 top calc(2vw + 16px); } .slider-quote-01 .slider .slick-list { padding-left: 0; } .steps-01 .inner-01 { flex-direction: column; } .steps-01 .step { width: 100%; max-width: 310px; margin: 0 auto; align-items: center; flex-direction: row; flex-wrap: initial; } .steps-01 .step p { flex-shrink: 1; flex-grow: 1; text-align: left; } .steps-01 .step img { width: 120px; margin: 0 4% 0 0; flex-shrink: 0; flex-grow: 0; } .steps-01 .step-arrow { width: 100%; height: 20px; max-width: 100%; } .steps-01 .step-arrow::after { transform: rotate(135deg); margin: -1.1em 0 0 -.7em; top: 50%; width: 1.4em; height: 1.4em; border-width: .33em .33em 0 0; } .statistic-01 .column .col-01 { order: 2; width: 50%; } .statistic-01 .column .col-02 { order: 1; width: 100%; margin-bottom: 2em; } .statistic-01 .column .col-02::after { display: none; } .statistic-01 .column .col-03 { order: 3; width: 50%; } .clmn-2-left-image .col-01 { display: none; } .yellow-02 { padding: 7% 5%; } .team-01 { padding: 7%; margin-top: 30px; } .team-01 .photo { right: 7%; } .slider-full-01 .slider .tablet { display: block !important; } .slider-full-01 .slider .desktop { display: none !important; } } @media screen and (max-width: 900px) { .header-animation .circle-01 { top: 25%; left: -90%; width: 152%; } .header-animation .circle-02 { left: -107%; width: 135%; } .header-animation .circle-03 { bottom: -5%; left: 45%; width: 185%; } .winner-01a { margin-top: -90px; } header .menu-work-block { padding: 0 0 180px; } .request input:not([type="submit"],[type="checkbox"]), .request .nice-select, .request textarea { height: 47px; } .button-02, .button-03, .button-05 { padding: 13px 45px; } .slider-clients-01 .slider .slick-slide { padding: 0 15px; } .recent-01 ul li { width: 47.5%; } .recent-01 ul li:nth-child(4) { display: block; } } @media screen and (max-width: 800px) { footer .landing-block .inner-02 { max-width: 530px; } footer .landing-menu li { width: 46%; } .winner-01 .inner-01 { width: calc(90% + 2%); max-width: 500px; } .winner-01 .inner-01 .img { width: calc(33.333333% - 2%); margin: 0 1%; } .winner-01 .inner-01 .img-04, .winner-01 .inner-01 .img-05 { margin-top: -6%; } .winner-01a { margin-top: -80px; } .winner-01b .inner-01 .img-01 { order: 1; } .winner-01b .inner-01 .img-02 { order: 3; } .winner-01b .inner-01 .img-03 { order: 2; margin-top: -16%; } .winner-01b .inner-01 .img-04 { order: 4; } .winner-01b .inner-01 .img-05 { order: 5; } .winner-01b.section-01 { padding-top: calc(50px + 5%); } header .menu-work-block { padding: 0 0 170px; } .button-02, .button-03, .button-05 { padding: 12px 40px; } .button-04 { padding: 10px 40px; } .page-id-4598 .content ul li { width: 100%; } } @media screen and (max-width: 700px) { .header-animation .circle-01 { top: 25%; left: -93%; width: 152%; } .header-animation .circle-02 { left: -110%; width: 135%; } .header-animation .circle-03 { bottom: -5%; left: 48%; width: 185%; } .page-contact-03 .inner-01 { max-width: 320px; } .page-contact-03 .col { width: 100%; text-align: center; } .page-contact-03 .col-01 { padding-bottom: 10px; } .page-contact-03 .col-02 { border-top: 1px solid #ffb400; padding-top: 10px; padding-bottom: 0; border-left: 0; } .winner-01a { margin-top: -90px; } header .menu-work-block { padding: 0 0 160px; } .request input:not([type="submit"],[type="checkbox"]), .request .nice-select, .request textarea { height: 46px; } .button-04 { padding: 10px 35px; } } @media screen and (max-width: 650px) { .team-01 { margin-top: calc(10vw - 35px); } } @media screen and (max-width: 600px) { .header-animation .circle-01 { top: 25%; left: -96%; width: 152%; } .header-animation .circle-02 { left: -113%; width: 135%; } .header-animation .circle-03 { bottom: -5%; left: 51%; width: 185%; } .winner-01a { margin-top: -100px; } header .menu-work-block { padding: 0 0 150px; } .request input:not([type="submit"],[type="checkbox"]), .request .nice-select, .request textarea { height: 45px; } .recent-news .srpw-more-link { padding: 6px 20px; } .recent-01 ul li { width: 100%; } .recent-01 ul li .srpw-img { max-width: 400px; } } @media screen and (max-width: 550px) { .slider-clients-01 .slider .slick-slide { padding: 0 10px; } } @media screen and (max-width: 500px) { .header-animation .circle-01 { top: 25%; left: -115%; width: 170%; } .header-animation .circle-02 { left: -110%; width: 150%; } .header-animation .circle-03 { bottom: 10%; left: 45%; width: 200%; } .description-01 .hide { display: none; } header .menu-work-block { padding: 0 0 140px; } footer .top-block .inner-02 { max-width: 220px; } footer .top-block .lr { width: 100%; } footer .top-block .fcol { width: 100%; padding-right: 0 !important; padding-top: 7px; padding-bottom: 0; } footer .top-block .fcol:not(.fcol-01) { padding: 0; border-left: 0; } footer .top-block .winner { padding-left: 0; border-left: 0; } footer .top-block .fcol-04 h5 { display: none; } footer .top-block .h5 { height: 35px; margin-bottom: 30px; } footer .top-block .logo { margin-bottom: 30px; height: auto; } footer .top-block .row { padding-bottom: 10px; } footer .top-block .copy span { white-space: nowrap; } footer .landing-block .inner-02 { max-width: 220px; } footer .landing-menu li { width: 100%; } .request input:not([type="submit"],[type="checkbox"]), .request .nice-select, .request textarea { height: 44px; } } @media screen and (max-width: 400px) { .header-animation .circle-01 { top: 30%; left: -127%; width: 200%; } .header-animation .circle-02 { left: -140%; width: 180%; } .header-animation .circle-03 { bottom: 20%; left: 42%; width: 230%; } } /* ####################################### */ /* для оптимизации плагина - Smart Recent Posts Widget, если это удалить надо удалить подобное и в плагине */ .srpw-more-link-title { position: absolute; color: transparent; z-index: -9999999; } /* ------- Landing 02 - FAQ (native
, no JS) - matches Figma ------- */ .section.lp-02-faq .inner-01 { max-width: 1275px; } .section.lp-02-faq h2 { text-align: left; margin: 0 0 29px; padding-left: 14px; font: 600 48px/1 Montserrat, Arial, sans-serif; color: #000; } .section.lp-02-faq .faq-list { margin: 0; max-width: none; } /* closed row = light gray pill */ .section.lp-02-faq .faq-item { margin: 0 0 7px; padding: 0; background: none; border: 0; } .section.lp-02-faq .faq-item summary { position: relative; z-index: 1; display: flex; align-items: center; min-height: 61px; box-sizing: border-box; padding: 16px 74px 16px 28px; background: #f2f2f2; border-radius: 50px; cursor: pointer; list-style: none; font: 500 24px/1.2 Montserrat, Arial, sans-serif; color: #000; transition: background-color 0.25s ease; } .section.lp-02-faq .faq-item summary::-webkit-details-marker { display: none; } .section.lp-02-faq .faq-item summary::marker { content: ""; } .section.lp-02-faq .faq-item summary:hover { background: #ebebeb; } .section.lp-02-faq .faq-item summary:focus-visible { outline: 2px solid #fcc43e; outline-offset: 2px; } /* yellow circle with black + / - */ .section.lp-02-faq .faq-item summary::after { content: ""; position: absolute; top: 50%; right: 14px; width: 39px; height: 39px; margin-top: -19.5px; border-radius: 50%; background-color: #fcc43e; background-image: linear-gradient(#000, #000), linear-gradient(#000, #000); background-position: center, center; background-size: 18px 3px, 3px 18px; background-repeat: no-repeat; } .section.lp-02-faq .faq-item[open] summary::after { background-image: linear-gradient(#000, #000); background-size: 14px 3px; } /* open row = darker panel tucked behind the pill */ .section.lp-02-faq .faq-answer { position: relative; z-index: 0; margin-top: -45px; padding: 70px 27px 30px; background: #e2e2e2; border-radius: 13px; } .section.lp-02-faq .faq-answer p { margin: 0 0 12px; font: 400 22px/1.5 Montserrat, Arial, sans-serif; color: #000; } .section.lp-02-faq .faq-answer p:last-child { margin-bottom: 0; } .section.lp-02-faq .faq-answer a { color: #000; border-bottom: 1px solid #fcc43e; } .section.lp-02-faq .faq-answer a:hover { border-bottom-color: #000; } .section.lp-02-faq .button-wrap { text-align: center; margin-top: 40px; } @media screen and (max-width: 1000px) { .section.lp-02-faq h2 { font-size: 40px; } .section.lp-02-faq .faq-item summary { font-size: 21px; } .section.lp-02-faq .faq-answer p { font-size: 19px; } } @media screen and (max-width: 700px) { .section.lp-02-faq h2 { font-size: 30px; padding-left: 0; margin-bottom: 22px; } .section.lp-02-faq .faq-item summary { padding: 14px 62px 14px 18px; font-size: 17px; border-radius: 32px; } .section.lp-02-faq .faq-item summary::after { right: 12px; width: 34px; height: 34px; margin-top: -17px; background-size: 16px 3px, 3px 16px; } .section.lp-02-faq .faq-item[open] summary::after { background-size: 12px 3px; } .section.lp-02-faq .faq-answer { margin-top: -32px; padding: 52px 18px 22px; } .section.lp-02-faq .faq-answer p { font-size: 16px; } }