/* Fonts */ /* Web fonts */ /* Google Fonts (if any) should be preloaded in */ /* @import url('https://fonts.googleapis.com/css?family=Catamaran:400,700&display=swap'); */ @import url('https://fonts.googleapis.com/css2?family=Style+Script&display=swap'); /* Local fonts */ /* @font-face { font-family: 'Open Sans'; src: url('../fonts/OpenSans/OpenSans-Light.woff2') format('woff2'), url('../fonts/OpenSans/OpenSans-Light.woff') format('woff'); font-weight: 300; font-style: normal; font-display: swap; } */ /* @font-face { font-family: 'Open Sans'; src: url('../fonts/OpenSans/OpenSans-Regular.woff2') format('woff2'), url('../fonts/OpenSans/OpenSans-Regular.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; } */ /* @font-face { font-family: 'Open Sans'; src: url('../fonts/OpenSans/OpenSans-SemiBold.woff2') format('woff2'), url('../fonts/OpenSans/OpenSans-SemiBold.woff') format('woff'); font-weight: 500; font-style: normal; font-display: swap; } */ /* @font-face { font-family: 'Open Sans'; src: url('../fonts/OpenSans/OpenSans-Bold.woff2') format('woff2'), url('../fonts/OpenSans/OpenSans-Bold.woff') format('woff'); font-weight: 600; font-style: normal; font-display: swap; } */ /* @font-face { font-family: 'Optima Bold'; src: url('../fonts/Optima/Optima-Bold.woff2') format('woff2'), url('../fonts/Optima/Optima-Bold.woff') format('woff'); font-weight: bold; font-style: normal; font-display: swap; } */ /* @font-face { font-family: 'Optima Reg'; src: url('../fonts/Optima/Optima-Regular.woff2') format('woff2'), url('../fonts/Optima/Optima-Regular.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } */ @font-face { font-family: 'Roboto Condensed'; src: url('../fonts/RobotoCondensed/RobotoCondensed-regular.woff2') format('woff2'), url('../fonts/RobotoCondensed/RobotoCondensed-regular.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Roboto Condensed'; src: url('../fonts/RobotoCondensed/RobotoCondensed-bold.woff2') format('woff2'), url('../fonts/RobotoCondensed/RobotoCondensed-bold.woff') format('woff'); font-weight: 600; font-style: normal; font-display: swap; } /* Font variables */ :root { --primary-font: 'Open Sans'; /* or 'system-ui' */ --headings-font: 'Roboto Condensed'; --headings-font-bold: 'Roboto Condensed'; --alt-font: 'Roboto Condensed'; } /* Colors */ /* Color variables */ :root { /* Colors */ /* --color-1-ING: #74c785; */ /* --color-1-ING-alt: #60ab6f; */ --color-1-ING: #6B8753; --color-2-ING: #AF8861; --color-3-ING: #333333; } .has-color-1-color { color: var(--color-1-ING)!important; } .has-color-1-background-color { background-color: var(--color-1-ING)!important; } .has-color-2-color { color: var(--color-2-ING)!important; } .has-color-2-background-color { background-color: var(--color-2-ING)!important; } .has-dark-gray-color { color: var(--color-3-ING)!important; } .has-dark-gray-background-color { background-color: var(--color-3-ING)!important; } .has-white-color, .has-white-color { color: #fff!important; } .has-white-background-color { background-color: #fff!important; } .has-black-color { color: #000!important; } .has-black-background-color { background-color: #000!important; } .has-large-font-size { font-size: 1.6rem!important; line-height: 2rem; } /* Animations */ /* Animation #1 */ .fadeIn-effect { opacity: 0; overflow: hidden; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } @-webkit-keyframes fadeInUp { from { opacity: 0; -webkit-transform: translateY(20px); } to { opacity: 1; -webkit-transform: translateY(0); } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } /* Animation #2 */ .preScale { opacity: 0; transform: scale(.7); transition-property: transform, opacity; transition-timing-function: ease; transition-duration: 1.2s; transition-delay: 0.162712s; } .scaleIn { opacity: 1 !important; transform: scale(1) !important; } /* Animation #3 */ .animate { animation-name: animate-fade; animation-duration: 0.5s; -webkit-animation-duration: 0.5s; animation-delay: 0.5s; -webkit-animation-delay: 0.5s; animation-fill-mode: both; /* backwards */ -webkit-animation-fill-mode: both; /* backwards */ animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; } @keyframes animate-fade { 0% { opacity: 0; transform: translateY(20px); border: 10px solid red; } 100% { opacity: 1; transform: translateY(0px); border: 0; } } /* Animation on scroll - pure CSS */ /* WARNING - GREAT BECAUSE NO JS IS NEEDED!... BUT ONLY SUPPORTED ON CHROME as of feb.2024 /* Check support evolution on https://caniuse.com/?search=animation-timeline */ @media (prefers-reduced-motion: no-preference) { /* Operating system preference for some people */ body:not(.portfolio) img, figcaption, blockquote { scale: .8; opacity: 0; animation: fade-in linear forwards; animation-timeline: view(); animation-range: 250px 500px; /* Options : entry, exit, normal, cover */ } @keyframes fade-in { to { scale: 1; opacity: 1;} } } /* Animation - Vibrate (for mobile phone icons) */ @keyframes vibrate { 0%, 1%, 2%, 3%, 4%, 5%, 6%, 7%, 8%, 9% { -webkit-transform: translate3d(-1px, 0, 0) rotate(-20deg); transform: translate3d(-1px, 0, 0) rotate(-20deg); } 0.5%, 1.5%, 2.5%, 3.5%, 4.5%, 5.5%, 6.5%, 7.5%, 8.5%, 9.5% { -webkit-transform: translate3d(1px, 0, 0) rotate(-15deg); transform: translate3d(1px, 0, 0) rotate(-15deg); } 10%, 100% { -webkit-transform: translate3d(0, 0, 0) rotate(-20deg); transform: translate3d(0, 0, 0) rotate(-20deg); } } /*! normalize.css v8.0.1 (November 2018) | MIT License | github.com/necolas/normalize.css */ html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button; appearance: button;}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none} /* Box sizing */ html, input[type="search"] { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} /* General */ html, body { height: 100%; } html { font-size: 18px; } body { /* background-color: #f0f0f0; */ color: #000000; font-family: var(--primary-font), sans-serif; line-height: 1.7em; font-weight: 200; } body.no-sidebar { background-color: #fff; } .wrapper { width: 100%; max-width: 1200px; margin: 0 auto; padding-left: 15px; padding-right: 15px; } /* Buttons */ .button, .wp-block-button__link, a[title=button], .project-categories a { position: relative; display: inline-block; text-align: center; padding: 15px 20px 15px 20px; margin: 10px 0 0 0; line-height: 1.2em; font-size: 1em; background-color: var(--color-1-ING); color: #fff; font-family: var(--headings-font-bold); border: 1px solid transparent; border-radius: 0; text-decoration:none; text-transform: uppercase; -webkit-transition:all .1s ease-in-out; -moz-transition:all .1s ease-in-out; -o-transition:all .1s ease-in-out; -ms-transition:all .1s ease-in-out; transition:all .3s ease-in-out; border-radius: 50px; } .button:hover, .wp-block-button__link:hover, a[title=button]:hover { opacity: .9; } .button::after, .wp-block-button__link::after, a[title=button]::after { display: inline-block; position: relative; top: 0; right: 0px; /* content: ' →'; */ /* Not the same character across browsers = not a compatible option = go SVG instead */ /* content: url("data:image/svg+xml;charset=UTF-8, "); */ /* content: url("data:image/svg+xml;charset=UTF-8, "); */ /* content: url("data:image/svg+xml;charset=UTF-8, "); */ content: url("data:image/svg+xml;charset=UTF-8, "); padding: 0 5px 0 5px; transition: all .3s ease-in-out; vertical-align: baseline; } .button:hover::after, .wp-block-button__link:hover::after, a[title=button]:hover::after { padding: 0 0 0 10px; transition:all .3s ease-in-out; } /* Back buttons */ .button.back::after, .wp-block-button.back .wp-block-button__link::after, a[title=button].back::after { display: none; } .button.back::before, .wp-block-button.back .wp-block-button__link::before, a[title=button].back::before { display: inline-block; position: relative; top: 0; right: 0px; /* content: ' →'; */ /* Not the same character across browsers = not a compatible option = go SVG instead */ content: url("data:image/svg+xml;charset=UTF-8, "); padding: 0 5px 0 5px; transition: all .3s ease-in-out; vertical-align: baseline; transform: rotate(180deg); } .button.back:hover::before, .wp-block-button.back .wp-block-button__link:hover::before, a[title=button].back:hover::before { padding: 0 0 0 10px; transition:all .3s ease-in-out; } /* SVG icons */ svg.icon { display: inline-block; width: 20px; height: 20px; stroke-width: 0; stroke: currentColor; fill: currentColor; margin-right: 5px; vertical-align: middle; } /* .icon-mobile { transform: rotate(-15deg); } */ /* Content selection */ /* ::-moz-selection { background-color: var(--color-2-ING); color: #fff; } */ /* ::selection { background-color: var(--color-2-ING); color: #fff; } */ /* Scroll and anchors */ .wp-block-group[id]:not([id=""]) h2 { margin-top: 0; } .wp-block-group[id]:not([id=""]):before { display: block; content: ''; height: 40px; } @media only screen and (min-width: 1200px) { .wp-block-group[id]:not([id=""]):before { height: 80px; } } /* Site header */ .site-header { background-color: #fff; } /* Site branding */ .site-logo-wrapper { z-index: 99999; } /* Site logo */ .site-logo { padding: 10px 0 0 10px; z-index: 99999; } .site-logo a { display: inline-block; text-decoration: none!important; } .site-logo a img { width: 180px; height: auto; } /* .site-logo a::after { position: relative; top: -10px; display: block; content: 'Ingénierie & conseil pour l\'habitat'; font-size: .60rem; font-weight: bold; } */ .menu-logo a div, .site-logo a div { display: inline-block; position: relative; top: -20px; right: 0; color: var(--color-1-ING); font-size: .9rem; font-weight: 400; line-height: 1.1rem; text-align: right; } .menu-logo a div em, .site-logo a div em { color: var(--color-2-ING); font-style: normal; } /* Site description */ .home .site-description { margin: 0; padding: 10px 10px; font-size: 1.3rem; text-align: center; } /* Mobile topbar */ .mobile-topbar { position: fixed; top: 0; left: 0; height: 60px; background-color: transparent; z-index: 9999; /* border-bottom: 1px solid #fff; */ } .mobile-topbar .inner { height: 100%; overflow: hidden; } /* Menu button */ .responsive-menu-button { position: fixed; top: 10px; right: 10px; display: inline-block; width: 50px; height: 50px; z-index: 99999; padding: 0; margin: 0; outline: none; cursor: pointer; overflow: visible; } .responsive-menu-button, .responsive-menu-open .responsive-menu-button { background-color: var(--color-2-ING); border: 1px solid #fff; } .responsive-menu-button.is-active { left: inherit; background-color: var(--color-2-ING); } /* Menu button icon / shapes */ .responsive-menu-button-icon { width: 25px; height: 19px; display: inline-block; position: relative; vertical-align: middle; } .responsive-menu-inner { display: block; top: 50%; margin-top: -1.5px; } .responsive-menu-inner, .responsive-menu-inner::before, .responsive-menu-inner::after { width: 25px; height: 3px; background-color: #fff; position: absolute; } .responsive-menu-open .responsive-menu-inner, .responsive-menu-open .responsive-menu-inner::before, .responsive-menu-open .responsive-menu-inner::after { background-color: #fff; } .responsive-menu-inner::before, .responsive-menu-inner::after { content: ""; display: block; } .responsive-menu-inner::before { top: -8px; } .responsive-menu-inner::after { bottom: -8px; } /* Menu button text */ .responsive-menu-button-text { display: none; color: #fff; font-size: 9px; padding-top: 3px; } /* Menu button shapes animation */ .responsive-menu-boring .responsive-menu-inner, .responsive-menu-boring .responsive-menu-inner::before, .responsive-menu-boring .responsive-menu-inner::after { transition-property: none; transition: all .3s ease; } .responsive-menu-boring.is-active .responsive-menu-inner::before { top: 0; opacity: 0; transition: all .3s ease; } .responsive-menu-boring.is-active .responsive-menu-inner { transform: rotate(45deg); transition: all .3s ease; } .responsive-menu-boring.is-active .responsive-menu-inner::after { bottom: 0; transform: rotate(-90deg); transition: all .3s ease; } /* Menu button animation */ .responsive-menu-boring .responsive-menu-inner { opacity: 1; } .responsive-menu-boring.is-active .responsive-menu-inner { opacity: 1; } /* .responsive-menu-boring { transform: rotate(0deg); transition: all .3s ease; } */ /* .responsive-menu-boring.is-active { transform: rotate(360deg); transition: all .1s ease; } */ /* Side menu container */ .responsive-menu-container { position: fixed; top: 0; left: 0; bottom: 0; overflow: scroll; background-color: #fff; z-index: 9999; width: 100%; padding-bottom: 20px; } .responsive-menu-container .menu-logo { display: inline-block; margin: 10px 0 0 20px; } .responsive-menu-container .menu-logo a { display: inline-block; text-decoration: none; } .responsive-menu-container .menu-logo a:hover { opacity: .9; } .responsive-menu-container .menu-logo a img { width: 230px; padding: 6px 0 0 0; height: auto; } /* .responsive-menu-container .menu-logo a::after { position: relative; top: -10px; display: block; content: 'Ingénierie & conseil pour l\'habitat'; font-size: .60rem; text-transform: uppercase; } */ .responsive-menu-container .fixed .menu-logo a::after { display: none; } /* Menu container animation */ .responsive-menu-container { transition: transform 0.5s; transition-timing-function: ease; transition-delay: 0s; max-width: 400px; } .responsive-menu-container { transform: translateX(-100%); -ms-transform: translateX(-100%); -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); } .responsive-menu-container::-webkit-scrollbar { display: none; /* Hide scrollbar for Chrome, Safari and Opera */ } .responsive-menu-container { -ms-overflow-style: none; /* Hide scrollbar for IE and Edge */ scrollbar-width: none; /* Hide scrollbar for Firefox */ } .responsive-menu-container.side-menu--open { transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); -moz-transform: translateX(0); } /* Page overlay when side menu is open */ body.side-menu-open main, body.side-menu-open .site-background-image, body.side-menu-open aside section, body.side-menu-open .backtotop, body.side-menu-open .site-footer { filter: grayscale(1) blur(4px); } body.side-menu-open .side-menu-overlay { display: block; background-color: rgba(0,0,0,0.5) !important; content: ""; position: fixed; top: 0; left: 0; right: 0; bottom: 0; height: 100vh; z-index: 10; transition: all .3s ease; } body.side-menu-open .responsive-menu-container { z-index: 999; } .hide-side-menu-overlay { display: none; } /* Navigation menu */ .responsive-menu-container nav ul { padding: 0; } .responsive-menu-container nav ul li { list-style: none; } .responsive-menu-container nav ul li a { font-family: var(--headings-font); font-size: 1.2rem; font-weight: 500; text-decoration: none; padding: 15px 5px 9px 20px; display: block; border-bottom: 1px solid #eee; text-transform: uppercase; } .responsive-menu-container nav > ul > li:nth-last-child(2) > a { border: 0; } .responsive-menu-container nav ul.sub-menu li { margin-left: 20px; } .responsive-menu-container .current-menu-item > a, .responsive-menu-container .current_page_parent > a { color: var(--color-1-ING); } .responsive-menu-container li.menu-item-has-children.current_page_parent > a { color: var(--color-2-ING); } /* Sub-menus - Hides sub menus and makes them dropdown menus (jQuery is used to add/remove classes) */ /* .responsive-menu-container nav ul li.menu-item-has-children ul.sub-menu { display: none; } animation is done with jquery */ .responsive-menu-container nav > ul > li.menu-item-has-children { position: relative; } /* .responsive-menu-container nav > ul > li.menu-item-has-children.list--open:after { transform: rotate(90deg); transform-origin: center; transition: all .3s ease; } */ /* .responsive-menu-container nav > ul > li.current-menu-parent:after { transform: rotate(90deg); } */ .responsive-menu-container nav ul li.current-menu-parent > a { border-bottom: 1px solid #eee; } .responsive-menu-container nav ul li.current-menu-parent ul.sub-menu { display: block; } .responsive-menu-container nav ul li ul.sub-menu a { font-family: var(--headings-font); font-size: 1.4rem; line-height: 1.7rem; } /* .responsive-menu-container nav > ul > li.menu-item-has-children:after { content: '›'; font-family: var(--alt-font); padding-top: 20px; font-size: 3rem; background-color: transparent; position: absolute; top: 0; right: 25px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; transform: rotate(0deg); transform-origin: center; transition: all .2s ease; } */ /* Transforms last menu item into a call-to-action button */ .responsive-menu-container nav > ul > li:last-child { text-align: center; margin-top: 20px; } .responsive-menu-container nav > ul > li:last-child a { position: relative; display: inline-block; color: #fff; font-size: 1.5rem; padding: 20px 28px 20px 60px; text-transform: uppercase; background-color: var(--color-2-ING); transition: all .3s ease; text-align: left; } .responsive-menu-container nav > ul > li:last-child a:hover { transform: scale(1.02); } .responsive-menu-container nav > ul > li:last-child a:hover::before { transform: rotate(-20deg); } /* .responsive-menu-container nav > ul > li:last-child a::after { content: ' »'; } */ .responsive-menu-container nav > ul > li:last-child a span { display: block; line-height: .6rem; font-size: .8rem; } .responsive-menu-container nav > ul > li:last-child a::before { content: url("data:image/svg+xml;charset=UTF-8, "); transform: rotate(-15deg); position: absolute; top: 25px; left: 14px; transition: all .3s ease; -webkit-animation: vibrate 10s cubic-bezier(.36, .07, .19, .97) infinite; animation: vibrate 10s cubic-bezier(.36, .07, .19, .97) infinite; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; } /* Site Page */ .site-page { margin-bottom: 30px; } .page-section { padding: 0 0 0; } /* Page header image */ .site-background-image { background-color: #fff; background-size: cover; background-position-x: 50%; background-repeat: no-repeat; position: relative; text-align: center; padding: 40% 0; margin: 30px 0 20px 0; } h1 { color: var(--color-2-ING); font-size: 1.6rem; line-height: 1.8rem; margin-left: auto; margin-right: auto; position: relative; display: inline-block; padding: 8px 10px 7px 0; border-radius: 3px; text-transform: uppercase; } h1:before { content: ''; display: inline-block; width: 20px; height: 20px; background: url('../images/bullet.png') no-repeat center center; background-size: 100%; padding: 13px!important; margin-right: 10px; } h1 .sub-title { display: block; padding: 5px 0 0 35px; font-size: 1rem; line-height: 1.4rem; font-weight: 400; font-style: italic; color: #333; } .overlay { background-color: #000000ff; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.1; } .wave { display: block; width: 100%; transform: translateY(-33%); } .wave svg { fill: #fff; } /* Main content */ main { background-color: #fff; padding: 0 0.8em 0.8rem; } main b, main strong { font-weight: 600; } /* Headings */ h1, h2, h3, h4, h5 { font-family: var(--headings-font-bold); } /* h1:after { content: ''; display: block; width: 100px; height: 7px; background-color: var(--color-1-ING); border-radius: 10px; margin-top: 10px; } */ h2 { font-size: 1.8rem; line-height: 2rem; margin-top: 80px; clear: both; color: var(--color-1-ING); font-weight: 400; text-transform: uppercase; } h2:after { content: ''; display: block; width: 60px; height: 10px; border-bottom: 2px solid var(--color-1-ING); border-color: var(--color-2-ING); } h2.has-text-align-center:after { margin: 10px auto 0 auto; } h2.has-text-align-left:after { margin: 10px auto 0 0; } .wp-block-cover h2 { margin-top: initial; clear: initial; } h3 { font-size: 1.4rem; line-height: 1.7rem; clear: both; color: var(--color-1-ING); font-weight: 600; text-transform: uppercase; } /* Paragraphs & links */ p { font-size: 1rem; font-weight: 300; color: #000; } body:not(.home) p.emphase { background-color: var(--color-1-ING); color: #fff; padding: 0.7rem 0.8rem; font-size: 1.2rem; max-width: 100vw; position: relative; border-radius: 5px; } body:not(.home) p.emphase a { color: #fff; text-decoration: underline; } body:not(.home) p.emphase-2 { border-left: 5px solid var(--color-1-ING); padding-left: 15px; border-radius: 5px; } /* Links */ a { color: currentColor; } p a { text-decoration: none; color: var(--color-1-ING); } main p a, main li a { text-decoration: none; color: inherit;text-decoration: underline; line-height: 1.2rem; font-weight: 400; transition: all .2s ease; padding: 0 1px; } main p a:hover, main li a:hover { text-decoration: none; } /* Lists */ main ul { display: inline-block; margin: 0; padding: 0 0.7rem 0 2.8rem; } main ul li { margin-bottom: 10px; } /* Custom classes */ .pb0 { padding-bottom: 0 !important; } .pb10 { padding-bottom: 10px !important; } .pb20 { padding-bottom: 20px !important; } .pb30 { padding-bottom: 30px !important; } .pb40 { padding-bottom: 40px !important; } .pb60 { padding-bottom: 60px !important; } .pb80 { padding-bottom: 80px !important; } .pb100 { padding-bottom: 100px !important; } .pt0 { padding-top: 0 !important; } .pt10 { padding-top: 10px !important; } .pt20 { padding-top: 20px !important; } .pt30 { padding-top: 30px !important; } .pt40 { padding-top: 40px !important; } .pt60 { padding-top: 60px !important; } .pt80 { padding-top: 80px !important; } .pt100 { padding-top: 100px !important; } .mb0 { margin-bottom: 0 !important; } .mb10 { margin-bottom: 10px !important; } .mb20 { margin-bottom: 20px !important; } .mb30 { margin-bottom: 30px !important; } .mb40 { margin-bottom: 40px !important; } .mb60 { margin-bottom: 60px !important; } .mb80 { margin-bottom: 80px !important; } .mb100 { margin-bottom: 100px !important; } .mt0 { margin-top: 0 !important; } .mt10 { margin-top: 20px !important; } .mt20 { margin-top: 20px !important; } .mt30 { margin-top: 30px !important; } .mt40 { margin-top: 40px !important; } .mt60 { margin-top: 60px !important; } .mt80 { margin-top: 80px !important; } .mt100 { margin-top: 100px !important; } .no-max-width img, .no-max-width figure { max-width: 100% !important; } .underline:after { content: ''; display: block; width: 60px; height: 10px; border-bottom: 2px solid var(--color-1-ING); border-color: var(--color-2-ING); margin: 10px auto 0 0; } .underline.has-text-align-center:after { margin: 10px auto 0 auto; } .underline.has-text-align-left:after { margin: 10px auto 0 0; } .hide { display: none!important; } @media only screen and (max-width: 767px) { .hom { display: none!important; } /* hide on mobile */ } @media only screen and (min-width: 1024px) { .hot { display: none!important; } /* hide on tablet */ } @media only screen and (min-width: 1200px) { .hod { display: none!important; } /* hide on desktop */ } /* Gutenberg blocks */ /* Gutenberg native block: buttons */ .wp-block-button__link { background-color: var(--color-1-ING); } .wp-block-button.icon-mobile a::before { display: inline-block; transform: rotate(-15deg); width: 20px; margin-right: 15px; top: 4px; position: relative; transition: all .3s ease; content: url("data:image/svg+xml;charset=UTF-8, "); } .wp-block-button.icon-mobile a:hover::before { transform: rotate(-20deg); } .wp-block-button.icon-mobile a { padding-right: 25px; font-size: 1.2rem; } .wp-block-button.icon-mobile a:hover { transform: scale(1.02); } .wp-block-button.icon-mobile a::after { display: none; } .wp-block-button.icon-email a::before { display: inline-block; transform: rotate(6deg); -moz-transform: rotate(6deg); width: 40px; padding-right: 10px!important; top: 2px; position: relative; transition: all .3s ease; content: url("data:image/svg+xml;charset=UTF-8, "); } .wp-block-button.icon-email a:hover::before { transform: rotate(-1deg); } .wp-block-button.icon-email a { padding-right: 25px; font-size: 1.2rem; } .wp-block-button.icon-email a:hover { transform: scale(1.02); } .wp-block-button.icon-email a::after { display: none; } /* Gutenberg native block: table */ .wp-block-table { width: 100%; max-width: 700px; margin-left: 0; } .wp-block-table tr td { padding: 10px 1%; } .wp-block-table tr td:first-child { width: auto; padding-left: 10px; } .wp-block-table tr td:last-child { text-align: right; vertical-align: top; padding-right: 10px; } /* Gutenberg block: Yoast structured FAQ (transformed into accordion) */ .wp-block-yoast-faq-block { padding: 0.8rem 0; max-width: 800px; margin: 30px auto; } .schema-faq-section { border: 1px solid #ddd; border-radius: 5px; overflow: hidden; margin-top: 10px; } .schema-faq-question { position: relative; display: block; background-color: #f5f5f5; font-size: 1em; line-height: 1.3em; font-weight: 400; letter-spacing: -.3px; padding: 12px 39px 12px 10px; cursor: pointer; transition: all 0.2s ease-in-out; } .schema-faq-question:hover, .schema-faq-question:focus, .schema-faq-question:active { color: var(--color-1-ING); } .schema-faq-question:after { position: absolute; top: 12px; right: 5px; display: inline-block; width: 30px; height: 30px; text-align: center; background-color: var(--color-1-ING); border: 1px solid var(--color-1-ING); border-radius: 3px; } /* .schema-faq-question:after { content: '▼'; content: '⌄'; color: #fff; } */ .schema-faq-question:after { padding: 2px 0 0 2px; content: url("data:image/svg+xml;charset=UTF-8, "); } .open .schema-faq-question { color: var(--color-1-ING); } .open .schema-faq-question:after {opacity: 1; background-color: #fff; /* content: '▲'; */ padding: 2px 0 0 2px; content: url('data:image/svg+xml;charset=UTF-8, '); } .schema-faq-answer { display: none; margin: 0; padding: 30px 10px 20px 10px; background-color: var(--color-1-ING); color: #fff; } .schema-faq-answer strong, .schema-faq-answer b { color: #fff; } /* Gutenberg block - Image */ .wp-block-image:not(.profile-pic) figure.alignleft, .wp-block-image:not(.profile-pic) figure.alignright { float: none; margin-right: auto; margin-left: auto; } .wp-block-image figcaption { font-style: italic; font-size: .9rem; line-height: 1rem; padding: 0 0.8rem; text-align: center; } /* Gutenberg block - Gallery */ /* .wp-block-gallery { padding: 0 0.8rem; } */ .wp-block-gallery .blocks-gallery-item { flex-grow: initial; } /* Gallery captions */ .wp-block-gallery figcaption { display: none; } /* Display gallery image captions below the image (not inside) */ /* .wp-block-gallery .wp-block-image figcaption { position: relative!important; background: none!important; background-color: var(--color-1-ING)!important; text-align: left!important; margin-top: 0; padding: 10px 10px 10px 10px!important; font-size: .8em!important; line-height: 1.3em; } */ /* .wp-block-gallery .wp-block-image figcaption { background: #fff!important; color: #000!important; padding: 7px 1px 1px 1px!important; bottom: -25px!important; margin: 0!important; font-weight: 500; overflow: inherit!important; } */ /* Disable default behaviour : the last photo doesn't take all the space left (flex-grow) */ .wp-block-gallery { margin: 40px 0; width: 100%; } .wp-block-gallery.has-nested-images { row-gap: 40px; } .wp-block-gallery.has-nested-images figure.wp-block-image { flex-grow: 0; } /* Gutenberg block - Blockquote */ main .wp-block-quote { margin: 30px 7vw 30px 7vw; padding: 0 0 0 0; overflow: hidden; } /* main .wp-block-quote p { font-size: 1.2rem; font-style: italic; font-weight: 500; margin-bottom: 15px; } */ main .wp-block-quote p { font-family: 'Style Script'; font-weight: 100; font-size: 2rem; line-height: 2.2rem; margin: 0 0 15px 30px; padding: 0 10px 10px 10px; } main .wp-block-quote em, main .wp-block-quote i { font-style: normal; } main .wp-block-quote cite { font-size: 1.1rem; font-style: italic; float: right; text-align: right; margin-bottom: 10px; } main .wp-block-quote cite:before { content: '-\00a0'; font-family: var(--headings-font); } main .wp-block-quote:before { display: inline-block; width: 26px; margin-right: 15px; top: 4px; position: relative; transition: all .3s ease; content: url("data:image/svg+xml;charset=UTF-8, "); } /* SVG shape from https://www.svgbackgrounds.com/elements/quotation-marks/ */ main .wp-block-quote:after { content: ''; display: block; width: 10vw; margin: 50px auto 30px auto; border-bottom: 1px solid #f1f1f1; padding-top: 10px; } /* Gutenberg block - Cover */ .wp-block-cover { height: auto; } .wp-block-cover .wp-block-cover__inner-container { max-width: 1200px; padding-bottom: 50px; } .wp-block-cover .wp-block-cover__inner-container .uagb-tm__content { padding: 0 !important; } /* .wp-block-cover h2 { font-size: 2.5rem; line-height: 2.9rem; font-weight: 400; margin-top: 30px; } */ .wp-block-cover h2:after { border-color: #fff; } /* Gutenberg native block: group */ /* .wp-block-group { display: table; } */ /* Gutenberg native block: columns (flexbox layout) */ .site-page .wp-block-columns.crew-index { gap: 10px; flex-wrap: wrap!important; } .site-page .wp-block-columns.crew-index > .wp-block-column { flex-basis: calc((100% - 20px) / 3)!important; flex-grow: 0; margin: 0!important; } .site-page .wp-block-columns.crew-index .wp-block-column figure { margin: 0; } .site-page .wp-block-columns.crew-index .wp-block-column figure img { position: relative; height: auto; /* -webkit-clip-path: polygon(100% 0%, 100% 0%, 100% 85%, 50% 100%, 0% 85%, 0 0); */ /* -webkit-clip-path: polygon(5% 5%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%); */ /* -webkit-clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%); */ } /* Gutenberg: blocks alignment */ .alignfull { width: 100vw; max-width: 100vw; left: calc(50% - 50vw); position: relative; margin: 0 0 30px 0; } .aligncenter figcaption { text-align: center; } .alignwide figcaption { text-align: center; } .alignfull figcaption { text-align: center; } /* Gutenberg: additional CSS classes (that can be added to individual blocks throught the "Additional CSS class" field in Gutenberg "*/ /* Profile pictures */ .wp-block-image.profile-pic figure { width: 50%; max-width: 334px; margin-top: 0; margin-bottom: 0; margin-left: -.8rem; } .wp-block-image.profile-pic figure img { height: auto; } .wp-block-image.profile-pic figcaption { font-size: 2rem; } /* All blocks */ .no-margin-top { margin-top: 0; } .no-margin-bottom { margin-bottom: 0; } /* Posts - Grid display */ .uagb-post-grid.is-grid article { width: 100%; max-width: 300px; float: none; display: block; margin: 0 auto!important; transition: all .3s ease; } .uagb-post-grid.is-grid article:hover { transform: scale(1.02); } .uagb-post-grid article .uagb-post__excerpt { display: none; } .uagb-post__image a { display: block; position: relative; top: 0; right: 0; bottom: 0; left: 0; padding-bottom: 60% !important; } .uagb-post-grid.is-grid.uagb-post__image-position-top .uagb-post__image a.uagb-image-ratio-inherit img { position: absolute!important; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } @media only screen and (min-width: 767px) { .uagb-post-grid.is-grid { grid-template-columns: repeat(5 , minmax(0, 1fr)); gap: 40px!important; } .uagb-post-grid.is-grid article { max-width: none; } .uagb-post-grid.is-grid article .uagb-post__excerpt { display: block; } } @media only screen and (min-width: 1200px) { .uagb-post-grid.is-grid { grid-template-columns: repeat(4 , minmax(0, 1fr))!important; gap: 40px!important; } } /* Font size */ .small { font-size: .8em; line-height: 1.1em; display: inline-block; } .bigger { font-size: 1.3em; line-height: 1.1em; } .biggger { font-size: 1.6em; line-height: 1.1em; } .biggger a { color: #fff; } .has-small-font-size { font-size: 13px!important; line-height: 17px; } .has-medium-font-size { font-size: 20px!important; line-height: 24px; } .has-large-font-size { font-size: 36px!important; line-height: 34px; } .has-x-large-font-size { font-size: 42px!important; line-height: 43px; } /* Forms */ input, textarea { width: 100%; border: 1px solid #ccc; } /* Search form */ .search-form { width: 100%; max-width: 500px; } /* Frontpage */ body.home .emphase { font-size: 1.1em; text-align: center; } body.home .emphase strong { color: var(--color-1-ING); font-family: var(--headings-font-bold);} body.home .emphase span.emphase { display: block; font-family: var(--headings-font-bold); color: var(--color-1-ING); font-size: 1.3em; } body.home .emphase h3 { color: var(--color-1-ING); margin: 15px auto 0 auto; display: inline-block; padding: 0 10px; font-style: italic; font-size: 1.6em; line-height: 1em!important; } body.home .emphase h3 + p { margin-top: 0; } body.home .wp-block-cover .emphase h3 { color: #fff; } body.home .custom-cover-block { margin-top: 30px; } body.home .custom-cover-block .wp-block-button__link { background-color: #fff; color: var(--color-1-ING); margin: 0; border: 0; } /* Portfolio - Index page (flexbox carousel or grid display) */ .cards-carousel { position: relative; } .cards-carousel .cards-carousel-heading { text-align: center; padding: 20px 0 0 0; font-size: 24px; font-weight: 500; text-transform: uppercase; color: var(--color-2-ING); } /* Cards wrapper */ .cards-carousel .cards-wrapper { user-select: none; overflow-x: auto; scroll-behavior: smooth; } /* Hide horizontal scrollbar */ .cards-carousel .cards-wrapper::-webkit-scrollbar { display: none; /* Safari and Chrome */ } .cards-carousel .cards-wrapper { -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */} .cards-carousel .cards-wrapper.display-grid { display: grid; grid-template-columns: 1fr; padding: 40px 0; margin-left: auto; margin-right: auto; max-width: 1200px; } @media only screen and (min-width: 768px) { .cards-carousel .cards-wrapper.display-grid { grid-template-columns: 1fr 1fr; } } @media only screen and (min-width: 1024px) { .cards-carousel .cards-wrapper.display-grid { grid-template-columns: 1fr 1fr 1fr; } } @media only screen and (min-width: 1200px) { /* .cards-carousel .cards-wrapper.display-grid { grid-template-columns: 1fr 1fr 1fr 1fr; } */ } .cards-carousel .cards-wrapper.display-grid .card-wrapper { display: block; float: left; width: 92%; max-width: 350px; transition: all .3s ease; background-color: #fefefe; border: 1px solid #fefefe; padding: 0 10px 10px 10px } .cards-carousel .cards-wrapper.display-grid .card-wrapper:hover { transform: scale(1.03); opacity: .9; } .cards-carousel .cards-wrapper.display-flex { display: flex; margin: 0 0 0 0; padding: 20px 15px 20px 20px; background-color: #f0f0f0; -webkit-overflow-scrolling: touch; overflow-x: scroll; overflow-y: hidden; scroll-behavior: smooth; -ms-scroll-snap-type: x mandatory; scroll-snap-type: x mandatory; } .cards-carousel .cards-wrapper.display-flex .card-wrapper { flex: none; width: 80%; max-width: 300px; margin-left: 20px; margin-right: 10px; } /* Cards */ .card-wrapper { position: relative; background-color: var(--color-1-ING); padding-bottom: 20px; margin: 0 auto 40px auto; filter: drop-shadow(0 0.1rem 0.15rem rgba(0, 0, 0, 0.2)); } .card-wrapper .card-link { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 999; overflow: visible!important; } .card-wrapper .card-photo { margin-left: -10px; margin-right: -10px; } .card-wrapper .card-photo picture { position: relative; top: 0; right: 0; bottom: 0; left: 0; padding-bottom: 60%; display: block; margin-bottom: 15px; } .card-wrapper .card-photo picture img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .card-wrapper .card-year { display: inline-block; background-color: var(--color-1-ING); color: #fff; padding: 2px 7px; line-height: 1rem; font-weight: normal; font-size: .9rem; } .card-wrapper .card-location { display: inline-block; padding: 0 0 0 10px; margin: 0; color: #999; font-size: .7rem; line-height: 1rem; font-style: italic; } .card-wrapper .card-location svg { flex: none; position: relative; top: 5px; width: 20px; height: 20px; margin-right: 10px; fill: var(--color-1-ING); } .card-wrapper .card-name h2 { font-family: var(--headings-font-bold); font-weight: 600; color: #3e3d3d; text-transform: uppercase; font-size: 1.1rem; line-height: 1.3rem; margin: 6px 0 12px 0; } .card-wrapper .card-name h2::after { display: none; } .card-wrapper .card-name i { display: block; margin: -10px auto 10px auto; transform: scale(1.1); } .card-wrapper .card-categories { font-style: italic; font-size: .8rem; line-height: 1.2rem; } .card-wrapper .card-description { margin: 10px 0 0 0; padding: 0 10px; text-align: center; } /* .card-wrapper .card-description svg { flex: none; position: relative; top: 22px; width: 20px; height: 20px; margin-right: 10px; fill: var(--color-1-ING); border: 1px solid var(--color-1-ING); border-radius: 20px; padding: 2px 3px 3px 2px; } */ .card-wrapper .card-button button { display: table; color: var(--color-1-ING); background-color: var(--color-3-ING); font-size: 1.3rem; font-weight: 500; margin: 0 auto; padding: 10px 20px; text-transform: none; border-radius: unset; transition: all .1s ease; } .card-wrapper .card-button button:hover { background-color: var(--color-1-ING); color: var(--color-1-ING); } /* Carousel navigation buttons */ .cards-carousel .cards-wrapper .cards-slide-button { position: absolute; top: 45%; width: 44px; height: 44px; color: #333; cursor: pointer; border: 0; border-radius: 50px; background-color: rgba(255, 255, 255, 0.75); } .cards-carousel .cards-wrapper .cards-slide-button:hover { background-color: rgba(255, 255, 255, 1); } .cards-carousel .cards-wrapper .cards-slide-button svg { position: absolute; top: 10%; width: 80%; height: 80%; } .cards-carousel .cards-wrapper .cards-slide-button.cards-slide-left svg { left: 6%; } .cards-carousel .cards-wrapper .cards-slide-button.cards-slide-right svg { left: 14%; } .cards-carousel .cards-wrapper .cards-slide-button.cards-slide-left { left: 10px; display: none; } .cards-carousel .cards-wrapper .cards-slide-button.cards-slide-right { right: 10px; } .cards-carousel .cards-wrapper.dragging { scroll-behavior: unset; cursor: grab; } .cards-carousel .cards-wrapper::-webkit-scrollbar { display: none; } .cards-carousel .cards-wrapper .wp-block-image { user-select: none; } .cards-carousel .cards-wrapper.dragging .card-wrapper { pointer-events: none; } /* Portfolio with Isoptope JS */ /* Portfolio - Filters (Isotope JS) */ .isotope-filters { text-align: center; margin: 40px 0 30px 0; } .isotope-filters button, .project-categories a { margin: 5px 5px; font-size: .9rem; padding: 5px 10px; } .isotope-filters button:hover { cursor: pointer; } .project-categories a:hover { cursor: pointer; opacity: .9; } .isotope-filters button span { font-size: .7rem; } .isotope-filters button:after { display: none; } .isotope-filters button.is-checked { background-color: var(--color-2-ING)!important; } /* Portfolio - Grid (Isotope JS) */ .cards-carousel.isotope-grid .cards-wrapper { display: block; } .cards-carousel.isotope-grid .cards-wrapper .card-outer-wrapper { position: relative; float: left; width: 100%; } @media only screen and (min-width: 600px) { .cards-carousel.isotope-grid .cards-wrapper .card-outer-wrapper { width: 50%; } } @media only screen and (min-width: 830px) { .cards-carousel.isotope-grid .cards-wrapper .card-outer-wrapper { width: 33.3333%; } } .cards-carousel.isotope-grid .cards-wrapper .card-outer-wrapper .card-wrapper { float: none; } /* Portfolio - Project page */ .single-realisation .project-year { display: inline-block; background-color: var(--color-1-ING); color: #fff; padding: 4px 9px; line-height: 1rem; font-weight: normal; font-size: 1.1rem; } .single-realisation .project-location { display: inline-block; padding: 0 0 0 10px; margin: 0; color: #999; font-size: 1rem; line-height: 1rem; font-style: italic; } .single-realisation h1 { margin: 0 0 20px 0; } .single-realisation h1::before { display: none; } .single-realisation blockquote { position: relative; margin: 50px auto 50px auto; background-color: var(--color-1-ING); padding: 20px 30px 0 30px; max-width: 90%; } .single-realisation blockquote::before { top: -10px; margin: 0; height: auto; width: auto; /* filter: invert(99%) sepia(2%) saturate(3%) hue-rotate(265deg) brightness(104%) contrast(100%); */ content: url("data:image/svg+xml;charset=UTF-8, "); /* SVG shape from https://www.svgbackgrounds.com/elements/quotation-marks/ */ } .single-realisation blockquote::after { content: ''; position: absolute; margin: 0; top: 0px; right: 0px; border: 0; border-top: 30px solid white; border-left: 30px solid transparent; width: 0; } .single-realisation blockquote p { margin-left: 14px; color: #fff; } .single-realisation blockquote cite { color: #fff; } .single-realisation blockquote svg { color: red; } /* Contact page */ .contact .footer-2, .small-print .footer-2 { display: none; } .contact-info { padding: 0; margin: 20px 0 0 0; } .contact-info li { list-style: none; } .contact-info li a { color: var(--color-1-ING); text-decoration: none; font-size: 1.6rem; font-family: var(--headings-font); } .contact-info li svg { margin-right: 10px; } .contact-page .wp-block-column { flex-basis: 100%; margin: 0; } .contact-page .wp-block-column ul { padding: 0; margin-top: 1em; } .contact-page .wp-block-column ul li { list-style: none; } .contact-page .wp-block-column ul li:not(:last-child) { font-size: 1.4rem; } .contact-page .wp-block-column ul li:last-child p { display: inline-block; vertical-align: top; margin: 0; } .contact-page .wp-block-column ul li a { text-decoration: none; color: var(--color-1-ING); } .contact-page .wp-block-column table { max-width: 300px; } .contact-page .map figure { width: 100%; margin: 0;} .contact-info-columns { gap: 0; } /* Contact icons */ .add-clock-icon-before { display: flex; } .add-clock-icon-before::before { display: inline-block; transform: rotate(-15deg); width: 26px; margin-right: 15px; top: 4px; position: relative; transition: all .3s ease; content: url("data:image/svg+xml;charset=UTF-8, "); } .add-mobile-icon-before { display: flex; } .add-mobile-icon-before a { font-size: 1.3rem; background-color: var(--color-1-ING); color: #fff; padding: 4px 12px; text-decoration: none; } .add-mobile-icon-before a:hover { opacity: .9; } .add-mobile-icon-before::before { display: inline-block; transform: rotate(-15deg); width: 26px; margin-right: 15px; top: 4px; position: relative; transition: all .3s ease; content: url("data:image/svg+xml;charset=UTF-8, "); } .add-location-icon-before { display: flex; } .add-location-icon-before::before { display: inline-block; width: 22px; margin-right: 15px; top: 4px; position: relative; transition: all .3s ease; content: url("data:image/svg+xml;charset=UTF-8, "); } .add-mail-icon-before::before { display: inline-block; transform: rotate(15deg); width: 22px; margin-right: 15px; top: 4px; position: relative; transition: all .3s ease; content: url("data:image/svg+xml;charset=UTF-8, "); } /* Customizing "Contact Form 7" plugin */ .wpcf7, .add-mobile-icon-before a, .schema-faq-answer { background-color: #f7f7f7; padding: 10px !important; margin-bottom: 50px !important; color: #fff; background-color: var(--color-2-ING); background-color: #6B8753; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpolygon fill='%23000' fill-opacity='0.07' points='120 0 120 60 90 30 60 0 0 0 0 0 60 60 0 120 60 120 90 90 120 60 120 0'/%3E%3C/svg%3E"); /* background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%23ffb722' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23ffaf1c' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%23ffa717' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%23ff9f11' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c186.7 43.7 376.3 34.4 557.9-12.6V0H0z'/%3E%3Cpath fill='%23FF960C' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%23ffa619' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%23ffb626' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%23ffc434' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23ffd041' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23FFDC4E' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E"); */ /* background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%23921c21' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23a01e24' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%23ad2127' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%23bb232a' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c186.7 43.7 376.3 34.4 557.9-12.6V0H0z'/%3E%3Cpath fill='%23c9262d' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%23d3282f' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%23dc2a31' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%23e62b34' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23f02d36' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23fa2f38' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E"); */ background-attachment: fixed; background-size: 40%; } .wpcf7 label { color: #ffffff; } .wpcf7 input { max-width: 400px; } .wpcf7 textarea { height: 200px; } .wpcf7 input, textarea { padding: 10px; } .wpcf7 input:focus, .wpcf7 textarea:focus { border-color: #fff; } .wpcf7 input[type="submit"].wpcf7-submit { display: block; width: auto; background-color: #fff; color: var(--color-1-ING); border-radius: 50px; border: 0; padding: 10px 20px; margin:20px auto 0 auto; transition: all .3s ease; } .wpcf7 input[type="submit"].wpcf7-submit:hover, .wpcf7 input[type="submit"].wpcf7-submit:focus { cursor: pointer; transform: scale(1.02); } .wpcf7 span.wpcf7-not-valid-tip { display: inline-block; background-color: rgb(249, 81, 81); color: #fff; padding: 0px 5px; margin-top: 5px; font-size: .8em; } .wpcf7 .wpcf7-response-output { border: 2px solid #fff !important; color: #fff; margin-top: 0; } span.wpcf7-not-valid-tip { color: #fff; font-style: italic; } fieldset { padding: 0; border: 0; } .wpcf7-list-item { margin-left: 0; line-height: 1.3rem; } .wpcf7-list-item label { display: grid; grid-template-columns: 45px 1fr; } .wpcf7-list-item input { height: 30px; margin-right: 15px; } .wpcf7-list-item a { color: #fff; text-decoration: underline; border-bottom: 0; } .wpcf7-quiz-label { display: block; } /* YouTube videos */ .video-container { position: relative; width: 100%; padding-bottom: 56.25%; margin: 50px auto; } .video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; } /* 404 */ body.error404 h1 { color: #000; text-shadow: none; margin-top: 100px; } /* Sidebar */ aside { clear: both; margin-top: 30px; padding: 0 0.8rem 0 0.8rem; } aside section { position: relative; background-color: #fff; padding: 20px 10px 10px 10px; margin: 0 auto 30px auto; max-width: 370px; box-shadow: 0 3px 12px rgba(0,0,0,0.16); } /* aside section:first-child { padding: 0; } */ aside section:last-child { margin-bottom: 0; } aside h3 { font-family: 'Optima Bold'; color: var(--color-2-ING); font-size: 1.5em; padding: 0; text-transform: capitalize; margin-top: 0; } aside h3:after { content: ''; display: block; width: 50px; height: 10px; border-bottom: 2px solid var(--color-1-ING); } aside a { color: var(--color-1-ING); text-decoration: none; transition: all .3s ease; } aside a:hover { text-decoration: underline; } aside a img { transition: all .3s ease; } aside a:hover img { opacity: .9; } aside figure { width: 100%!important; text-align: center; } aside figure img { max-width: 180px!important; } aside ul { padding-left: 0px; } aside ul li { margin-bottom: 10px; list-style: none; } aside .wp-block-button a:hover { text-decoration: none; } /* aside section#block-8 { background: transparent url('../images/background-bookings.jpg') no-repeat top right; background-size: cover; background-position-y: -70px; color: #fff; padding: 20px 5px 10px 0; border-radius: 0; text-align: center; text-shadow: 0px 3px 3px rgba(0, 0, 0, .7); max-width: none; } */ /* aside section#block-8::before { content: ''; display: block; position: absolute; width: 100%; height: 100%; top: 0px; left: 0; background-color: #000; opacity: 0.4; text-shadow: 0px 4px 4px rgba(0, 0, 0, .6); } */ /* aside section#block-8 h3 { position: relative; color: #fff; font-size: 2rem; line-height: 1.9rem; letter-spacing: 1px; } */ /* aside section#block-8 h3:after { border-bottom: 1px solid #fff; height: 10px; margin: auto; } */ /* aside section#block-8 p { position: relative; } */ /* aside section#block-8 span.big { font-family: var(--headings-font-bold); font-size: 2.2rem; line-height: 1.65em; } */ /* aside section#block-8 a { color: #fff; } */ /* aside section#block-8 .button { border: 0; background-color: rgba(201, 38, 45, 1); } */ aside section.widget-contact li:nth-child(1) { font-size: 1.4em; } aside section.widget-contact li:nth-child(2) { font-size: 1em; } .recent-posts article { display: block; margin-bottom: 2.2rem; border: 0; padding: 0; } .recent-posts article:hover figure { opacity: .9; } .recent-posts article:hover a { text-decoration: underline; } .recent-posts article figure { margin: 0 0 0 0; } .recent-posts article figure img { width: 100%; } .recent-posts article h4 { font-family: var(--headings-font-bold); font-size: 1.1rem; line-height: 1.3rem; font-weight: normal; margin: 0; padding: 0; } .recent-posts article .entry-content { display: none; } .recent-posts article .entry-title { padding: 5px 0; } .recent-posts article .entry-author { font-size: .9rem; font-style: italic; } /* Site footer */ .site-footer { position: relative; background-color: #504645; color: #fff; background: url('../images/background-footer.jpg') no-repeat top right; background-size: cover; z-index: 9; margin-top: 80px; } /* Footer widgets */ .footer-2 { margin-top: 60px; } .footer-2 h2:before { content: ''; display: block; width: 60px; height: 10px; border-bottom: 2px solid var(--color-1-ING); border-color: var(--color-2-ING); margin: 0 auto 10px auto; } .footer-3 { margin: 60px 0; } .footer-widgets { padding: 20px 20px 20px 20px; } /* .footer-widgets { padding-top: 60px } */ /* .footer-widgets::after { content: ''; position: absolute; margin: 0; top: 0px; right: 0px; border: 0; border-top: 60px solid white; border-left: 2000px solid transparent; width: 0; } */ .footer-widgets h3 { font-size: 1.6rem; color: #fff; } body.no-footer .footer-widgets .wrapper { display: none; } body.no-footer .footer-widgets { min-height: 200px; } /* "TrustIndex Google reviews" plugin */ .ti-rating-text span, .ti-rating-text strong { color: white!important; } .footer-widgets .wrapper { padding: 60px 0; } .ti-reviews-container-wrapper .ti-review-item:last-child { display: none; } /* Copyrights */ .footer-colophon, .footer-colophon p { font-size: .9rem; line-height: 1.2rem; font-weight: 200; padding: 18px 0; background-color: #fff; color: black; text-align: center; } /* Back to top */ .backtotop { display: none; position: fixed; bottom: -100px; right: 0.8rem; width: 40px; height: 35px; background-color: var(--color-2-ING); border: 1px solid #fff; z-index: 99; text-align: center; cursor: pointer; -webkit-transition: all .1s ease-in-out; transition: all .1s ease-in-out; } .backtotop .icon-chevron-up { width: 100%; height: 100%; background-color: transparent; fill: #fff; padding: 0; } .backtotop:hover { opacity: .8; } /************************************************************ ##BREAKPOINT ******************************************************/ @media only screen and (min-width: 400px) { /* iPhone 4 landscape */ /* Page header image */ .site-background-image { padding: 4% 0 36% 0; } } /************************************************************ ##BREAKPOINT ******************************************************/ @media only screen and (min-width: 568px) { /* iPhone 5 landscape */ /* Site page */ /* Main content */ main { padding: 0 2em 2em 2rem; } /* Additional classes (that can be added to individual blocks throught the "Additional CSS class" field in Gutenberg "*/ /* Profile pictures */ .wp-block-image.profile-pic figure { width: auto; margin-left: 0rem; } /* Gutenberg native block: image */ .wp-block-image:not(.profile-pic) figure.alignright { float: right; margin-left: 1em; margin-top: .2em; margin-bottom: .2em; } .wp-block-image:not(.profile-pic) figure.alignleft { float: left; margin-right: 1rem; margin-top: .2em; margin-bottom: .2em; } /* Gutenberg native block: cover */ /* .wp-block-cover .wp-block-cover__inner-container h2 { font-size: 2rem; line-height: 2.3rem; } */ /* Services page */ ul.services li { flex: 0 0 auto; margin: 0 15px 15px 0; } /* Contact page */ /* Customizing "Contact Form 7" plugin */ .wpcf7 { padding: 10px 20px 10px 20px !important; } /* Blog posts index (cards) */ .post-cards-wrapper { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 2%; } article.post-card { margin-top: 0; } /* Blog posts */ main .recent-posts { display: grid; grid-template-columns: 1fr 1fr ; grid-gap: 5%; margin-bottom: 30px; justify-items: center; } main .recent-posts article { margin: 20px 0 0 0; } main .recent-posts article h4 { font-size: 1.1rem; background-attachment: sc; } /* Sidebar */ aside section { padding: 30px 20px 20px 20px; } /* Site footer */ /* Google reviews plugin */ .ti-reviews-container { transform: scale(1); } /* Copyrights */ .footer-colophon { text-align: center; } } /************************************************************ ##BREAKPOINT ******************************************************/ @media only screen and (min-width: 767px) { /* Site header */ h1 { font-size: 4vw; line-height: 4.6vw; } /* Site footer */ /* Contact page */ .contact-page .wp-block-column { flex-basis: calc(50% - 2rem); } .contact-page .contact-info-columns .wp-block-column:first-child { margin-right: 4rem; } .contact-page .contact-info-columns .wp-block-column:last-child { margin-top: 1em; } } /************************************************************ ##BREAKPOINT ******************************************************/ @media only screen and (min-width: 961px) { /* Flexbox site layout */ /* body { display: flex; flex-direction: column; } */ .site-page { display: flex; flex: 1 0; } .site-page > main { /* flex: 1 1; */ padding-top: 10px; z-index: 1; width: 70%; } body.right-sidebar .site-page > main { padding-right: 30px; padding-left: 0; } body.left-sidebar .site-page > main { padding-left: 30px; padding-right: 0; order: 1; } body.no-sidebar .site-page > main { width: 100%; padding: 30px; } .site-page > aside { flex: none; width: 30%; } body.right-sidebar .site-page > aside { padding-right: 0; } body.left-sidebar .site-page > aside { padding-left: 0; } body.no-sidebar .site-page > aside { display: none;} /* Site page */ /* Main content */ .site-page > main { border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; } main h2[id*="service"] { margin-top: 0; padding-top: 90px; } /* Gutenberg native block: cover */ /* .wp-block-cover .wp-block-cover__inner-container { width: calc(100% - 400px); max-width: 1200px; } */ /* UAGB blocks */ /* .uagb-post-grid .uagb-post__items article { max-width: 450px !important; } */ /* Full width display */ body.right-sidebar .alignfull, body.left-sidebar .alignfull { width: 100%; left: 0; } /* Blog posts index (cards) */ .post-cards-wrapper { grid-template-columns: 1fr 1fr 1fr; grid-gap: 2%; } /* Frontpage */ body.home .emphase { font-size: 1.3em; line-height: 1.3em; } body.home .emphase h3 { margin-bottom: 10px; line-height: 1.6em; } body.home .emphase p { margin-bottom: 60px; } body.home .custom-cover-block { margin-top: 100px; margin-bottom: 100px; } /* Sidebar */ .site-page > aside { margin-top: 30px; } aside section p { line-height: 1.3rem; } aside section#block-8 span { line-height: 1em; } aside section#block-8 a { text-decoration: none; text-shadow: none; } /* Full width display */ aside .alignfull { max-width: 100%; left: 0; } aside section.stick-it { position: fixed; top: 100px; right: inherit; } /* Site footer */ /* Footer widgets */ /* .footer-widgets .wrapper { max-width: 1200px; padding: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } */ /* .footer-widgets.col-2 .wrapper .hentry { width: calc(100%/2 - 4%); } */ /* .footer-widgets.col-3 .wrapper .hentry { width: calc(100%/3 - 3%); } */ /* .footer-widgets.col-4 .wrapper .hentry { width: calc(100%/4 - 2%); } */ } /************************************************************ ##BREAKPOINT ******************************************************/ @media only screen and (min-width: 1024px) { /* Font size reference for rems */ html { font-size: 20px; } /* Site footer */ } /************************************************************ ##BREAKPOINT ******************************************************/ @media only screen and (min-width: 1201px) { body.right-sidebar .site-page > aside, body.left-sidebar .site-page > aside { width: 30%; } body.right-sidebar .site-page > main, body.left-sidebar .site-page > main { width: 70%; } /* Site header */ .site-logo-wrapper { display: none; } /* Navigation menu */ .mobile-topbar .responsive-menu-button { display: none; } .responsive-menu-container { position: relative; overflow: initial; display: flex; flex-direction: column; align-items: center; flex-wrap: wrap; transform: none; bottom: auto; padding: 0; max-width: none; } .responsive-menu-container .branding { position: absolute; top: 0; left: 0; display: flex; width: 100%; background-color: rgba(256,256,256,.8); } .responsive-menu-container .branding.fixed { position: fixed; top: 0; left: 0; box-shadow: 0 4px 6px -6px #aaa; background-color: rgba(256,256,256,1);} .responsive-menu-container .branding .menu-logo a img { width: 230px; transition: all .3s ease-in-out; } .responsive-menu-container .branding.fixed .menu-logo a img { width: 100px; } .responsive-menu-container .branding.fixed .menu-logo a div { font-size: .4rem; line-height: .5rem; top: -12px; } .responsive-menu-container nav { position: absolute; bottom: 14px; right: 0; max-width: 1200px; } .responsive-menu-container nav ul { margin: 0 1rem 0 0; padding: 0; } .responsive-menu-container nav ul li { display: inline-block; vertical-align: baseline; text-align: left; position: relative; padding: 8px 10px 5px 10px; transition: all .3s ease-in-out; } .responsive-menu-container nav ul li.menu-item-has-children:after { position: relative; top: 5px; right: 0; width: auto; height: auto; padding: 0; font-size: 2.3rem; display: inline-block; } .responsive-menu-container nav ul li:hover::after { color: var(--color-1-ING); } .responsive-menu-container nav ul li.current-menu-parent:hover::after { color: #fff; } .responsive-menu-container nav > ul > li:last-child { display: inline-block; padding: 0; margin: 0 0 0 30px; } .responsive-menu-container nav > ul > li:last-child a { background-color: transparent; color: var(--color-1-ING); font-size: 1.2rem; padding: 12px 20px 8px 20px; text-align: left; } .responsive-menu-container nav > ul > li:last-child a::before { position: absolute; top: 22px; left: -15px; content: url("data:image/svg+xml;charset=UTF-8, "); } .responsive-menu-container nav > ul > li:last-child a span { line-height: .6rem; font-size: .8rem; } .responsive-menu-container nav > ul > li:last-child a:hover { color: var(--color-2-ING); } .responsive-menu-container nav ul li a { display: inline-block; font-size: 1rem; border: none; padding: 0 0 0 0; color: #444; transition: all .3s ease-in-out; } .responsive-menu-container nav ul li:hover a { color: var(--color-1-ING); } .responsive-menu-container nav ul li:not(:last-child) a:after { content: ""; background: var(--color-1-ING); position: absolute; left: 50%; right: 50%; bottom: 0px; height: 2px; -moz-transition: all .3s; -o-transition: all .3s; -webkit-transition: all .3s; transition: all .3s; } .responsive-menu-container nav ul li a:hover:after { left: 0; right: 0;} .responsive-menu-container .fixed nav { bottom: 10px; } .responsive-menu-container .fixed nav ul li { transition: all .3s ease-in-out; } .responsive-menu-container .fixed nav > ul > li:last-child a { font-size: 1.1rem; } .responsive-menu-container .fixed nav ul li a { transition: all .3s ease-in-out; } .responsive-menu-container nav ul li.current-menu-parent > a { border: 0; } .responsive-menu-container nav ul > li.menu-item-has-children:after { content: ''; display: inline-block; width: 0; height: 0; top: 0; margin-left: 6px; vertical-align: middle; border-top: 6px solid; border-right: 6px solid transparent; border-left: 6px solid transparent; } .responsive-menu-container nav ul > li.menu-item-has-children a:after { display: none; } /* Sub menus */ .responsive-menu-container nav ul li ul.sub-menu { display: none; position: absolute; top: 40px; left: -20px; text-align: left; overflow: hidden; margin: 0 0 0 0; padding: 40px 0 0 0; } .responsive-menu-container .fixed nav ul li ul.sub-menu { box-shadow: 0 3px 12px rgba(0,0,0,0.16); background-color: #fff; } .responsive-menu-container nav ul li ul.sub-menu > li { width: 250px; list-style-type: none; padding: 10px; margin: 0; background-color: rgba(255,255,255,1); } .responsive-menu-container nav ul li ul.sub-menu > li:not(:last-child) { border-bottom: 1px solid #f1f1f1; } .responsive-menu-container nav ul li ul.sub-menu > li.current-menu-item { background-color: var(--color-1-ING); color: #fff; } .responsive-menu-container nav ul li ul.sub-menu > li.current-menu-item > a { background-color: var(--color-1-ING); color: #fff; } .responsive-menu-container nav ul li ul.sub-menu > li.current-menu-item > a[href]:hover { color: #fff; } .responsive-menu-container nav ul li ul.sub-menu > li > a { color: #000; font-size: 1.2rem; padding: 0; padding: 5px 10px; transition: none; } .responsive-menu-container nav ul li ul.sub-menu > li > a[href]:hover { color: var(--color-1-ING); } /* Current menu items */ .responsive-menu-container .current-menu-item, .responsive-menu-container .current_page_parent { position: relative; background-color: var(--color-1-ING); } .responsive-menu-container nav ul li.current-menu-parent ul.sub-menu { display: none; } .responsive-menu-container nav ul li.current-menu-parent { background-color: var(--color-1-ING); color: #fff; } .responsive-menu-container nav ul li.current-menu-parent a { color: #fff; } .responsive-menu-container .current-menu-item > a, .responsive-menu-container .current_page_parent > a { color: #fff; } .responsive-menu-container .current-menu-item:hover > a, .responsive-menu-container .current_page_parent:hover > a { color: #fff; } .responsive-menu-container .current-menu-item:after, /* .responsive-menu-container .current_page_parent:after { content: ''; position: absolute; top: 100%; left: 45%; width: 0; height: 0; border-top: solid 12px var(--color-1-ING); border-left: solid 3px transparent; border-right: solid 11px transparent; } */ .responsive-menu-container .current_page_parent::after { content: ''; position: absolute; margin: 0; top: 0px; right: 0px; border: 0; border-top: 18px solid white; border-left: 18px solid transparent; width: 0; } .responsive-menu-container nav > ul > li.current-menu-item:last-child { background-color: transparent; } /* Navigation menu */ .responsive-menu-container .branding .menu-logo a img { width: 200px; } /* Logo */ .responsive-menu-container .branding .menu-logo { margin-left: 1rem; } /* Page header image */ .site-background-image { padding: 10% 0 18% 0; margin-top: 160px; } h1 { font-size: 2.2rem; line-height: 2.6rem; } /* .wave svg { fill: #F0F0F0; } */ /* Sidebar */ aside section.stick-it { top: 100px; } } /************************************************************ ##BREAKPOINT ******************************************************/ @media only screen and (min-width: 1280px) { /* Site header */ /* Logo */ .responsive-menu-container .branding .menu-logo { margin-left: 2rem; } /* Navigation menu */ .responsive-menu-container nav ul { margin-right: 2rem; } .responsive-menu-container nav ul li:last-child { margin-left: 1rem; } /* Site footer */ } /************************************************************ ##BREAKPOINT ******************************************************/ @media only screen and (min-width: 1430px) { .responsive-menu-container nav ul li { margin-right: 10px; } /* .responsive-menu-container nav ul li a { font-size: 1.3rem; } */ } /************************************************************ ##BREAKPOINT ******************************************************/ @media only screen and (min-width: 1400px) { /* Site header */ /* Logo */ .responsive-menu-container .branding .menu-logo { margin-left: 3rem; } /* Navigation menu */ .responsive-menu-container nav ul { margin-right: 3rem; } .responsive-menu-container nav ul li:last-child { margin-left: 40px; } }