/* ------------------------- REINITITALIZE --------------------------- */ @charset "UTF-8"; * { box-sizing: border-box; } section { text-align: center; clear: both; } h1, h2, h3, h4, h5 { text-transform: uppercase; margin-bottom: 0; } h4 { font-weight: 200; } h6 { font-size: 0.7rem; line-height: 0.7rem; font-weight: 500; font-style: italic; color: #aaaaaa; } input[type="email"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="text"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="password"]:focus, textarea:focus, select:focus { border: .1rem solid rgba(28,28,28,1); transition: .3s;} option:checked, option:hover { color: white; background: #282828 url(data:image/png;base0,iVBORw0KGgoAAAANS UhEUgAAAAUAAAAFCAYAAACNbyblAAAAEklEQVQImWPQ0ND4j44ZaCAIAGPvJKAZWKJ2AAAAAEl FTkSuQmCC) repeat; transition: .3s;} a { text-decoration: none; color: inherit; transition: .3s;} a:hover { color: rgba(0,0,0,1); transition: .3s; } .justify { text-align: justify; } pre { text-align: left; } ul, label, p { margin: 0; } /* HACK for Outline Chrome =========================================================================== */ /** * Remove focus Outline Blue from select, input, img... */ a:focus, .button:focus, input:focus, optgroup:focus, select:focus, textarea:focus { outline: 0; } /* ------------------------- FONTS --------------------------- */ @font-face { font-family: 'kingthings'; src: url('./wp-content/themes/e-graine-dimages/fonts/KingthingsTrypewriter2.woff2') format('woff2'); font-weight: normal; font-style: normal; } @font-face { font-family: 'droidserif'; src: url('./wp-content/themes/e-graine-dimages/fonts/DroidSerif.woff2') format('woff2'); font-weight: normal; font-style: normal; } @font-face { font-family: 'droidserif'; src: url('./wp-content/themes/e-graine-dimages/fonts/DroidSerif-Bold.woff2') format('woff2'); font-weight: 600; font-style: normal; } @font-face { font-family: 'karla'; src: url('./wp-content/themes/e-graine-dimages/fonts/Karla-Regular.woff2') format('woff2'); font-weight: normal; font-style: normal; } @font-face { font-family: 'georgia'; src: url('./wp-content/themes/e-graine-dimages/fonts/GeorgiaItalic.woff2') format('woff2'); font-weight: normal; font-style: italic; } @font-face { font-family: 'coalhandluke'; src: url('./wp-content/themes/e-graine-dimages/fonts/CoalhandLuke.woff2') format('woff2'); font-weight: normal; font-style: normal; } @font-face { font-family: 'PTSerif'; src: url('./wp-content/themes/e-graine-dimages/fonts/PTSerif-Regular.woff2') format('woff2'); font-weight: normal; font-style: normal; } @font-face { font-family: 'ab_b_dot2bold'; src: url('./wp-content/themes/e-graine-dimages/fonts/abb_dot2-bold-webfont.woff2') format('woff2'); font-weight: 500; font-style: normal; } @font-face { font-family: 'ab_b_dot2light'; src: url('./wp-content/themes/e-graine-dimages/fonts/abb_dot2-light-webfont.woff2') format('woff2'); font-weight: 300; font-style: normal; } @font-face { font-family: 'ab_b_dot2regular'; src: url('./wp-content/themes/e-graine-dimages/fonts/abb_dot2-regular-webfont.woff2') format('woff2'); font-weight: 400; font-style: normal; } @font-face { font-family: 'ab_b_dot2thin'; src: url('./wp-content/themes/e-graine-dimages/fonts/abb_dot2-thin-webfont.woff2') format('woff2'); font-weight: 100; font-style: normal; } @font-face { font-family: 'perfograma'; src: url('./wp-content/themes/e-graine-dimages/fonts/perfograma-webfont.woff2') format('woff2'); font-weight: 400; font-style: normal; } /* ------------------------- BODY --------------------------- */ body, html { text-rendering: geometricPrecision; font-smooth: always; font-smoothing: antialiased; -moz-font-smoothing: antialiased; -webkit-font-smoothing: antialiased; -webkit-font-smoothing: subpixel-antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } body { background: rgba(255,255,255,1); font-family: Raleway; letter-spacing: .08rem; font-weight: 400; float: left; clear: left; width: 100%; } div.wrapper { color: rgba(0,0,0,1); font-size: 1.4rem; letter-spacing: .05rem; width: 100%; overflow-x: hidden; } div.initial { float: initial; text-align: center; margin: 0 auto !important; } .row { display: block; clear: both; max-width: 1100px; margin: 0 auto; } .large-row { display: block; clear: both; max-width: 1400px; margin: 0 auto; } section.single .large-row { margin: 0 auto !important; } *::-moz-selection { background: rgba(0,0,0,.1); } *::-webkit-selection { background: rgba(0,0,0,.1); } *::selection { background: rgba(0,0,0,.1); } /* ADMINBAR */ body.admin-bar > div#wpadminbar { position: absolute !important; overflow: hidden; } /* ------------------------- UP --------------------------- */ .up { position: fixed; display: none; bottom: 1.3rem; right: 1.3rem; width: 4rem; height: 4rem; line-height: 4rem; z-index: 5; text-align: center; background: rgba(244,244,244,1); box-shadow: 0 0 .1rem rgba(0,0,0,.2); } .up > a { font-size: 1.4rem; font-weight: 300;} .up > a > i { display: block; width: 40%;height: 4rem; line-height: 4rem; margin: 0 auto; } .bureaueaglebook { font-family: 'Paytone One', sans-serif; } /* ------------------------- HEADER --------------------------- */ div.wrapper > section.header { display: block; clear: both; width: 100%; height: 100%; min-height: 100vh; overflow: hidden; position: relative; } /* MOBILE BKG */ div.wrapper > section.header > div.mobile-bkg { display: none; position: fixed; left: 0; top: 0; min-width: 100%; min-height: 100vh; width: auto; height: auto; z-index: -100; } div.wrapper > section.header > div.mobile-bkg > img { width: 100%; min-height: 100vh; width: auto; height: auto; object-fit: cover; } /* DESKTOP BKG */ div.wrapper > section.header > div.desktop-bkg { position: fixed; left: 0; top: 0; min-width: 100%; min-height: 100vh; width: auto; height: auto; z-index: -100; } div.wrapper > section.header > div.desktop-bkg > img { width: 100%; min-height: 100vh; height: auto; object-fit: cover; } /* VIDEO */ div.wrapper > section.header > #bgvid { position: fixed; right: 0; bottom: 0; min-width: 100%; min-height: 100vh; width: auto; height: auto; z-index: -100; background-size: cover; } div.wrapper > section.header > video.video-bkg { position: fixed; right: 0; bottom: 0; min-width: 100%; min-height: 100vh; width: auto; height: auto; z-index: -100; background-size: cover; } div.wrapper > section.header > div.controls > button.redo, div.wrapper > section.header > div.controls > button.play { display: none; position: absolute; right: 2rem; bottom: 5rem; width: 3rem; height: 2rem; line-height: 2rem; text-align: center; font-size: 2rem; text-shadow: 0 0 .2rem rgba(255,255,255,.6); z-index: 3; cursor: pointer; } div.wrapper > section.header > div.controls > button.pause { position: absolute; right: 2rem; bottom: 5rem; width: 3rem; height: 2rem; line-height: 2rem; text-align: center; font-size: 2rem; text-shadow: 0 0 .2rem rgba(255,255,255,.6); z-index: 3; cursor: pointer; } div.wrapper > section.header > div.controls > button.mute { position: absolute; right: 5rem; bottom: 5rem; width: 3rem; height: 2rem; line-height: 2rem; text-align: center; font-size: 2rem; text-shadow: 0 0 .2rem rgba(255,255,255,.6); z-index: 3; cursor: pointer; } div.wrapper > section.header > div.controls > button.volumeup { display: none; position: absolute; right: 5rem; bottom: 5rem; width: 3rem; height: 2rem; line-height: 2rem; text-align: center; font-size: 2rem; text-shadow: 0 0 .2rem rgba(255,255,255,.6); z-index: 3; cursor: pointer; } /* LOGO + CONTENT */ div.wrapper > section.header > div.header.content { color: rgba(255,255,255,1); text-shadow: 0 0 .1rem rgba(0,0,0,.2); } div.wrapper > section.header > div.header.content > div.header.logo { padding: 4rem 0 0; } div.wrapper > section.header > div.header.content > div.header.logo > p { display: inline-block; width: auto; } div.wrapper > section.header > div.header.content > div.header.logo > p > img { width: 72%; height: auto; filter: drop-shadow( 0 0 .2rem rgba(0,0,0,.4)); transition: .4s; } div.wrapper > section.header > div.header.content > div.header.down > div.header.subtitle > p:not(.capital) { font-size: 3.2rem; font-family: 'Paytone One', sans-serif; line-height: 3rem; } div.wrapper > section.header > div.header.content > div.header.down > div.header.subtitle > p.capital { font-size: 6rem; line-height: 8rem; font-family: 'Paytone One', sans-serif; text-transform: uppercase; } div.wrapper > section.header > div.header.content > div.header.down > div.header.slogan { position: relative; padding-bottom: 6rem; } div.wrapper > section.header > div.header.content > div.header.down > div.header.slogan > p { position: absolute; width: 100%; font-size: 1.5rem; font-weight: 800; text-transform: uppercase; } /* DOWN BUTTON */ div.wrapper > section.header > div.header.content > div.header.down { position: absolute; width: 100%; top: 50%; font-weight: 800; transform: translateY(-50%); } div.wrapper > section.header > div.header.content > div.header.scroll { position: absolute; width: 100%; bottom: 5rem; font-size: 1.3rem; font-weight: 800; } div.wrapper > section.header > div.header.content > div.header.scroll > div.header.scroll.text { display: inline-block; width: auto; clear: both; text-transform: uppercase; padding: 1rem 4rem; background: rgba(0,0,0,.8); border-radius: 3rem; } div.wrapper > section.header > div.header.content > div.header.scroll > div.header.scroll.arrow > i { font-size: 3.5rem; } /* FIXED MENU */ div.wrapper > section.fixed-menu > div.fixed.menu { height: 6rem; position: relative; background: rgba(255,255,255,1); border-bottom: .1rem solid rgba(230,230,230,1); transition: .4s; } div.wrapper > section.fixed-menu > div.fixed.menu > div.menu > ul.menu { list-style: none; display: block; height: 6rem; width: 100%; font-weight: 700; font-size: 1.3rem; text-transform: uppercase; } div.wrapper > section.fixed-menu > div.fixed.menu > div.menu > ul.menu > li.menu-item { display: block; float: left; height: 6rem; padding: 1rem 2rem; line-height: 4rem; } div.wrapper > section.fixed-menu > div.fixed.menu > div.menu > ul.menu > li.menu-item.logo { padding: 1rem 3rem; border-right: .1rem solid rgba(230,230,230,1); transition: .4s; } div.wrapper > section.fixed-menu > div.fixed.menu > div.menu > ul.menu > li.menu-item.logo > a { display: block; color: inherit; } div.wrapper > section.fixed-menu > div.fixed.menu > div.menu > ul.menu > li.menu-item.logo > a > img { display: block; width: auto; height: 4rem; } div.wrapper > section.fixed-menu.fixed > div.fixed.menu { position: fixed; top: 0; left: 0; height: 6rem; box-shadow: 0 .1rem .1rem rgba(0,0,0,0.2); transition: .4s; z-index: 999; } div.wrapper > section.fixed-menu.fixed.black > div.fixed.menu { background: rgba(0,0,0,1); color: rgba(255,255,255,1); border-bottom-color: rgba(60,60,60,1); transition: .4s; } div.wrapper > section.fixed-menu.fixed.black > div.fixed.menu > div.menu > ul.menu > li.menu-item.logo { border-right-color: rgba(60,60,60,1); transition: .4s; } div.wrapper > section.fixed-menu.fixed.black > div.fixed.menu > div.menu > ul.menu > li.menu-item > a:hover { color: rgba(150,150,150,1); transition: .4s; } /* SEARCH DESKTOP */ div.wrapper > section.fixed-menu > div.fixed.menu > div.menu > ul.menu > div.search { float: right; max-width: 30rem; width: 100%; height: 6rem; white-space: nowrap; padding: 1rem 3rem 1rem 0; text-align: left; } div.wrapper > section.fixed-menu > div.fixed.menu > div.menu > ul.menu > div.search > form.searchform { display: inline-block; width: 100%; height: 4rem; overflow: hidden; background: rgba(240,240,240,1); } div.wrapper > section.fixed-menu > div.fixed.menu > div.menu > ul.menu > div.search > form.searchform > input.search { display: block; float: left; width: calc(100% - 4rem); height: 4rem; padding: 1rem; color: rgba(60,60,60,1); border-radius: 0; border: 0; background: transparent; } div.wrapper > section.fixed-menu > div.fixed.menu > div.menu > ul.menu > div.search > form.searchform > a.pointer { display: block; float: left; width: 4rem; height: 4rem; text-align: center; cursor: pointer; } div.wrapper > section.fixed-menu > div.fixed.menu > div.menu > ul.menu > div.search > form.searchform > a.pointer > i { font-size: 1.8rem; color: rgba(190,190,190,1); line-height: 4rem !important; } div.wrapper > section.fixed-menu > div.fixed.menu > div.menu > ul.menu > div.search > form.searchform > a.pointer:active > i { color: rgba(60,60,60,1); } /* SINGLE HEADER */ div.wrapper > section.header.single, div.wrapper > section.header.single > div.mobile-bkg, div.wrapper > section.header.single > div.mobile-bkg > img, div.wrapper > section.header.single > div.desktop-bkg, div.wrapper > section.header.single > div.desktop-bkg > img { min-height: 76vh; } div.wrapper > section.header > div.header.content > div.single { position: absolute; left: 50%; top: 50%; right: 0; bottom: 0; width: 100%; transform: translate(-50%,-50%); color: rgba(255,255,255,1); text-align: center; } div.wrapper > section.header > div.header.content > div.single > div.top > div.top-content { position: absolute; top: 6rem; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; } div.wrapper > section.header > div.header.content > div.single > div.top > div.top-content > div.read { color: rgba(255,255,255,1); text-transform: uppercase; font-family: 'Paytone One', sans-serif; font-size: 5rem; } div.wrapper > section.header > div.header.content > div.single > div.top > div.top-content > div.read:before { display: block; content: ""; width: 30rem; margin: 0 auto 3rem; border-bottom: .2rem solid rgba(255,255,255,1); } div.wrapper > section.header > div.header.content > div.single > div.top > div.top-content > div.read:after { display: block; content: ""; width: 30rem; margin: 3rem auto 0; border-bottom: .2rem solid rgba(255,255,255,1); } div.wrapper > section.header > div.header.content > div.single > div.bottom { position: absolute; bottom: 0; left: 2rem; width: calc(100% - 4rem); font-family: karla; height: 2rem; } div.wrapper > section.header > div.header.content > div.single > div.bottom > div.bottom-content { width: 100%; font-size: 1.2rem; line-height: 1.4rem; } div.wrapper > section.header > div.header.content > div.single > div.bottom > div.bottom-content > div > p { float: left; line-height: 1.6rem; } div.wrapper > section.header > div.header.content > div.single > div.bottom > div.bottom-content > div > i { float: left; font-size: 1.4rem; } div.wrapper > section.header > div.header.content > div.single > div.bottom > div.bottom-content > div.logo-client > img { height: 9rem; width: auto; filter: grayscale(1) brightness(0) invert(1); } /* -------------- MENU MOBILE -------------- */ div.wrapper > section.fixed-menu > div.fixed.menu > div.mobile { display: none; position: relative; right: 0; top: 0; font-weight: 700; font-size: 1.3rem; } div.wrapper > section.fixed-menu > div.fixed.menu > div.mobile > input.burgerchk { display: none !important; } div.wrapper > section.fixed-menu > div.fixed.menu > div.mobile > label.burger { position: absolute; top: 2rem; right: 2rem; width: 2.4rem; height: 2.4rem; font-size: 2.4rem; color: rgba(0,0,0,1); cursor: pointer; z-index: 99; } div.wrapper > section.fixed-menu > div.fixed.menu > div.mobile > label.menu { position: absolute; top: 2rem; right: 5rem; height: 2.4rem; line-height: 2.4rem; font-weight: 500; color: rgba(0,0,0,1); cursor: pointer; transition: color .4s; z-index: 99; } div.wrapper > section.fixed-menu > div.fixed.menu > div.mobile > label.close { opacity: 0; position: fixed; top: 2rem; right: 2rem; width: 2.4rem; height: 2.4rem; font-size: 2.4rem; color: rgba(0,0,0,1); cursor: pointer; z-index: 99; } div.wrapper > section.fixed-menu > div.fixed.menu > div.mobile > label.menu-close { opacity: 0; position: fixed; top: 2rem; right: 5rem; height: 2.4rem; line-height: 2.4rem; font-weight: 500; color: rgba(0,0,0,1); cursor: pointer; transition: color .4s; z-index: 99; } div.wrapper > section.fixed-menu > div.fixed.menu > div.mobile > div.menu-list { position: fixed; top: 0; right: -100vw; width: calc(100vw - 10.23rem); height: 100vh; overflow-y: scroll; overflow-x: hidden; padding: 5rem 2rem 0 2rem; color: rgba(190,190,190,1); background: rgba(255,255,255,1); box-shadow: 0 .1rem .1rem rgba(0,0,0,0.2); transition: .4s; z-index: 2; } div.wrapper > section.fixed-menu > div.fixed.menu > div.mobile > label.empty { position: fixed; top: 0; left: 0; width: 0; height: 100vh; overflow: hidden; z-index: 3; } div.wrapper > section.fixed-menu > div.fixed.menu > div.mobile > div.menu-list > nav.nav > div.menu > ul.mobile { list-style: none; display: block; height: 6rem; width: 100%; font-weight: 700; font-size: 1.3rem; text-transform: uppercase; } div.wrapper > section.fixed-menu > div.fixed.menu > div.mobile > div.menu-list > nav.nav > div.menu > ul.mobile > li.menu-item { display: block; height: 4rem; padding: 1rem 2rem; line-height: 2rem; } div.wrapper > section.fixed-menu.fixed > div.fixed.menu > div.mobile > div.menu-list { padding: 1.5rem 2rem 0 2rem; } div.wrapper > section.fixed-menu.fixed > div.fixed.menu > div.mobile > div.menu-list, div.wrapper > section.fixed-menu.fixed > div.fixed.menu > div.mobile > label.empty { top: 6rem; } div.wrapper > section.fixed-menu > div.fixed.menu > div.mobile > input.burgerchk:checked + label.burger { opacity: 0; transition: .4s; } div.wrapper > section.fixed-menu > div.fixed.menu > div.mobile > input.burgerchk:checked + label.burger + label.menu + label.close { opacity: 1; transition: .4s; } div.wrapper > section.fixed-menu > div.fixed.menu > div.mobile > input.burgerchk:checked + label.burger + label.menu { opacity: 0; transition: .4s; } div.wrapper > section.fixed-menu > div.fixed.menu > div.mobile > input.burgerchk:checked + label.burger + label.menu + label.close + label.menu-close { opacity: 1; transition: .4s; } div.wrapper > section.fixed-menu > div.fixed.menu > div.mobile > input.burgerchk:checked + label.burger + label.menu + label.close + label.menu-close + div.menu-list { right: 0; transition: .4s; } div.wrapper > section.fixed-menu > div.fixed.menu > div.mobile > input.burgerchk:checked + label.burger + label.menu + label.close + label.menu-close + div.menu-list + label.empty { width: 25%; } div.wrapper > section.fixed-menu.black > div.fixed.menu > div.mobile > label.burger, div.wrapper > section.fixed-menu.black > div.fixed.menu > div.mobile > label.menu , div.wrapper > section.fixed-menu.black > div.fixed.menu > div.mobile > label.close , div.wrapper > section.fixed-menu.black > div.fixed.menu > div.mobile > label.menu-close { color: rgba(255,255,255,1); transition: .4s; } /* -------------- SEARCH -------------- */ div.wrapper > section.fixed-menu > div.fixed.menu > div.mobile > div.menu-list > div.search { white-space: nowrap; text-align: left; padding: 0 0 1rem 0; border-bottom: .1rem dashed rgba(230,230,230,1); } div.wrapper > section.fixed-menu > div.fixed.menu > div.mobile > div.menu-list > div.search > form.searchform { display: inline-block; width: 100%; overflow: hidden; background: rgba(240,240,240,1); } div.wrapper > section.fixed-menu > div.fixed.menu > div.mobile > div.menu-list > div.search > form.searchform > input.search { display: inline-block; width: calc(100% - 4rem); height: 4rem; padding: 1rem; color: rgba(60,60,60,1); border-radius: 0; border: 0; background: transparent; } div.wrapper > section.fixed-menu > div.fixed.menu > div.mobile > div.menu-list > div.search > form.searchform > a.pointer { display: inline-block; width: 4rem; text-align: center; cursor: pointer; } div.wrapper > section.fixed-menu > div.fixed.menu > div.mobile > div.menu-list > div.search > form.searchform > a.pointer > i { font-size: 1.8rem; color: rgba(190,190,190,1); line-height: 4rem !important; } div.wrapper > section.fixed-menu > div.fixed.menu > div.mobile > div.menu-list > div.search > form.searchform > a.pointer:active > i { color: rgba(60,60,60,1); } /* ------------------------- CONTENT --------------------------- */ div.wrapper > section.content { background: rgba(255,255,255,1); } div.wrapper > section.content > section { padding: 8rem 0; } div.wrapper > section.content > section > div > div.title { display: inline-block; clear: both; padding: 0 0 4rem; text-transform: uppercase; color: rgba(130,130,130,1); } div.wrapper > section.content > section > div:not(.background_image) > div.title:after { display: block; content: ""; height: .2rem; margin: 2rem 0 0; background: rgba(130,130,130,1); } div.wrapper > section.content > section > div > div.title > h1 { font-size: 1.4rem; } div.wrapper > section.content > section > div > div.subtitle { clear: both; padding: 0 0 4rem; text-transform: uppercase; } div.wrapper > section.content > section > div > div.subtitle > h2 { font-size: 4rem; } div.wrapper > section.content > section > div.background_image { display: block; position: relative; width: 100%; height: 30rem; margin: 0 0 6rem; } div.wrapper > section.content > section > div.background_image > img { width: 100%; height: 30rem; object-fit: cover; } div.wrapper > section.content > section > div.background_image.mobile { display: none; } div.wrapper > section.content > section > div.background_image > div.title { position: absolute; top: calc(50% - 3rem); left: 0; width: 100%; height: 6rem; text-align: center; } div.wrapper > section.content > section > div.background_image > div.title > h1 { display: inline-block; height: 6rem; line-height: 5.2rem; padding: 0 2rem; font-size: 2.4rem; font-weight: 800; text-transform: uppercase; color: rgba(230,230,230,1); border: .4rem solid rgba(230,230,230,1); } /* WHO WE ARE */ div.wrapper > section.content > section.whoweare > div.whoweare > div.top { padding: 0 0 6rem; } div.wrapper > section.content > section.whoweare > div.whoweare > div.subtitle > h2 { font-family: 'Paytone One', sans-serif; } div.wrapper > section.content > section.whoweare > div.whoweare > div.top > div.text a { color: rgba(149,180,71,1); font-weight: 700; } div.wrapper > section.content > section.whoweare > div.whoweare > div.top > div.text a:hover { text-decoration: underline; } div.wrapper > section.content > section.whoweare > div.whoweare > div.top > div.text { text-align: justify; hyphens: auto; line-height: 2.4rem; } div.wrapper > section.content > section.whoweare > div.whoweare > div.top > div.niveaux > ul.niveaux { list-style: none; } div.wrapper > section.content > section.whoweare > div.whoweare > div.top > div.niveaux > ul.niveaux > li { display: block; clear: both; } div.wrapper > section.content > section.whoweare > div.whoweare > div.top > div.niveaux > ul.niveaux > li > div.title { text-transform: uppercase; color: rgba(130,130,130,1); font-weight: 700; text-align: left; padding-bottom: 1rem; } div.wrapper > section.content > section.whoweare > div.whoweare > div.top > div.niveaux > ul.niveaux > li > div.title > span.percentage { display: block; float: right; } div.wrapper > section.content > section.whoweare > div.whoweare > div.top > div.niveaux > ul.niveaux > li > div.bar { width: 100%; height: 2rem; background: rgba(240,240,240,1); margin-bottom: 2rem; } div.wrapper > section.content > section.whoweare > div.whoweare > div.top > div.niveaux > ul.niveaux > li > div.bar > div.content > div.bar { height: 2rem; background: rgba(149,180,71,1); } div.wrapper > section.content > section.whoweare > div.whoweare > div.bottom > ul.valeurs { list-style: none; padding: 0 1.3rem; } div.wrapper > section.content > section.whoweare > div.whoweare > div.bottom > ul.valeurs > li.valeur > div.icon { overflow: hidden; margin-bottom: 4rem; text-align: center; } div.wrapper > section.content > section.whoweare > div.whoweare > div.bottom > ul.valeurs > li.valeur > div.icon > i { font-size: 4rem; color: rgba(210,210,210,1); } div.wrapper > section.content > section.whoweare > div.whoweare > div.bottom > ul.valeurs > li.valeur > div.text { text-align: justify; line-height: 2.4rem; hyphens:auto; } div.wrapper > section.content > section.whoweare > div.whoweare > div.bottom > ul.valeurs > li.valeur > div.text > h5 { display: block; text-align: center; line-height: 2.4rem; font-weight: 700; font-size: 1.6rem; margin-bottom: 1rem; } div.wrapper > section.content > section.whoweare > div.whoweare > div.bottom > ul.valeurs > li.valeur > div.text a { color: rgba(149,180,71,1); font-weight: 700; } div.wrapper > section.content > section.whoweare > div.whoweare > div.bottom > ul.valeurs > li.valeur > div.text a:hover { text-decoration: underline; } /* OUR WORKS */ div.wrapper > section.content > section.ourworks > div.ourworks > div.subs { display:none; padding: 0 0 6rem; } div.wrapper > section.content > section.ourworks > div.ourworks > div.subs > a.filter { display: inline-block; margin: 0 2rem 0 0; padding: 1rem 2.2rem; text-transform: uppercase; border: .2rem solid rgba(160,160,160,1); color: rgba(160,160,160,1); background: rgba(230,230,230,1); border-radius: .3rem; transition: .4s; } div.wrapper > section.content > section.ourworks > div.ourworks > div.subs > a.filter.active, div.wrapper > section.content > section.ourworks > div.ourworks > div.subs > a.filter:hover { border: .2rem solid rgba(0,0,0,1); color: rgba(0,0,0,1); transition: .4s; } div.wrapper > section.content > section.ourworks > div.ourworks > div.subs > a.filter:last-child { margin: 0; } div.wrapper > section.content > section.ourworks > div.ourworks > div.posts { text-align: left; position: relative; } div.wrapper > section.content > section.ourworks > div.ourworks > div.posts > div.loading { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: rgba(217,217,217,1); background: rgba(255,255,255,1); } div.wrapper > section.content > section.ourworks > div.ourworks > div.posts > div.loading > i { font-size: 6rem; } div.wrapper > section.content > section.ourworks > div.ourworks > div.posts > p { font-family: kingthings; font-size: 1.2rem; } div.wrapper > section.content > section.ourworks > div.ourworks > div.posts > a.show-more { display: flex; height: 100%; position: absolute; right: -4rem; font-size: 3rem; align-items: center; justify-content: center; } div.wrapper > section.content > section.ourworks > div.ourworks > div.posts > a.show-more > p { display: flex; } div.wrapper > section.content > section.ourworks > div.ourworks > div.posts > a.show-more.back { left: -4rem; right: initial; } div.wrapper > section.content > section.ourworks > div.ourworks > div.posts > ul.works { list-style: none; margin: 0; } div.wrapper > section.content > section.ourworks > div.ourworks > div.posts > ul.works > li.work { display: block; } div.wrapper > section.content > section.ourworks > div.ourworks > div.posts > ul.works > li.work > div.block > div.picture { position: relative; } div.wrapper > section.content > section.ourworks > div.ourworks > div.posts > ul.works > li.work > div.block > div.picture { transition: .3s; } div.wrapper > section.content > section.ourworks > div.ourworks > div.posts > ul.works > li.work > div.block > div.picture > img { display: block; width: 100%; height: 34rem; object-fit: cover; } div.wrapper > section.content > section.ourworks > div.ourworks > div.posts > ul.works > li.work > div.block > div.picture > div.hover { opacity: 0; position: absolute; left: 0; top: 0; right: 0; bottom: 0; width: 100%; height: 100%; color: rgba(255,255,255,1); text-align: center; } div.wrapper > section.content > section.ourworks > div.ourworks > div.posts > ul.works > li.work > div.block > div.picture > div.hover > a > div.top > div.top-content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; } div.wrapper > section.content > section.ourworks > div.ourworks > div.posts > ul.works > li.work > div.block > div.picture > div.hover > a > div.top > div.top-content > div.read { color: rgba(255,255,255,1); text-transform: uppercase; font-size: 2rem; font-weight: 700; } div.wrapper > section.content > section.ourworks > div.ourworks > div.posts > ul.works > li.work > div.block > div.picture > div.hover > a > div.top > div.top-content > div.read:after { display: block; content: ""; width: 6rem; margin: 3rem auto 0; border-bottom: .2rem solid rgba(255,255,255,1); } div.wrapper > section.content > section.ourworks > div.ourworks > div.posts > ul.works > li.work > div.block > div.picture > div.hover > a > div.bottom { position: absolute; bottom: 7rem; left: 2rem; width: calc(100% - 4rem); font-family: karla; height: 2rem; } div.wrapper > section.content > section.ourworks > div.ourworks > div.posts > ul.works > li.work > div.block > div.picture > div.hover > a > div.bottom > div.bottom-content { width: 100%; font-size: 1.2rem; line-height: 1.4rem; } div.wrapper > section.content > section.ourworks > div.ourworks > div.posts > ul.works > li.work > div.block > div.picture > div.hover > a > div.bottom > div.bottom-content > div > p { float: left; line-height: 1.6rem; } div.wrapper > section.content > section.ourworks > div.ourworks > div.posts > ul.works > li.work > div.block > div.picture > div.hover > a > div.bottom > div.bottom-content > div > i { float: left; font-size: 1.4rem; } div.wrapper > section.content > section.ourworks > div.ourworks > div.posts > ul.works > li.work > div.block > div.picture > div.hover > a > div.bottom > div.bottom-content > div.logo-client > img { height: 6rem; width: auto; filter: grayscale(1) brightness(0) invert(1); } div.wrapper > section.content > section.ourworks > div.ourworks > div.posts > ul.works > li.work:hover > div.block > div.picture > img { filter: brightness(.6); transition: .3s; } div.wrapper > section.content > section.ourworks > div.ourworks > div.posts > ul.works > li.work:hover > div.block > div.picture > div.hover { opacity: 1; transition: .3s; } div.wrapper > section.content > section.ourworks > div.contact { width: 100%; float: left; clear: both; text-align: center; margin-top: 3rem; } div.wrapper > section.content > section.ourworks > div.contact > p { font-family: 'Paytone One', sans-serif; font-weight: 400; font-style: normal; color: rgba(149,180,71,1); text-transform: uppercase; margin-bottom: 1rem; } div.wrapper > section.content > section.ourworks > div.contact > a { padding: 1rem 3rem; border: .1rem solid rgba(0,0,0,1); font-family: 'Paytone One', sans-serif; border-radius: .6rem; } /* OPINIONS */ div.wrapper > section.content > section.opinions > div.opinions { position: relative; min-height: 35rem; } div.wrapper > section.content > section.opinions > div.opinions > div.bkg { position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 0; filter: brightness(30%); background-position: 50% 0; } div.wrapper > section.content > section.opinions > div.opinions > div.content { position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 1; color: rgba(255,255,255,1); } div.wrapper > section.content > section.opinions > div.opinions > div.content > ul.opinions.slider { display: block; width: 100%; height: 100%; list-style: none; z-index: 1; position: relative; } div.wrapper > section.content > section.opinions > div.opinions > div.content > ul.opinions.slider > li.opinion { max-width: 1100px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } div.wrapper > section.content > section.opinions > div.opinions > div.content > ul.opinions.slider > li.opinion > p.text { margin-bottom: 2rem; font-size: 1.5rem; line-height: 1.6rem; } div.wrapper > section.content > section.opinions > div.opinions > div.content > ul.opinions.slider > li.opinion > p.text > i.fa { margin: 0 1rem; font-size: 2rem; color: rgba(255,255,255,.3); } div.wrapper > section.content > section.opinions > div.opinions > div.content > ul.opinions.slider > li.opinion > img.author { width: 9rem; height: 9rem; object-fit: cover; border-radius: 50%; overflow: hidden; } div.wrapper > section.content > section.opinions > div.opinions > div.content > ul.opinions.slider > li.opinion > h5 { margin-bottom: .8rem; font-size: 1.6rem; line-height: 1.6rem; font-weight: 700; } div.wrapper > section.content > section.opinions > div.opinions > div.content > ul.opinions.slider > li.opinion > h6 { font-size: 1.3rem; line-height: 1.3rem; } /* SKILLS */ div.wrapper > section.content > section.skills > div.skills > div.blocks > ul.skills { list-style: none; } div.wrapper > section.content > section.skills > div.skills > div.blocks > ul.skills > li.skill > div.block { position: relative; height: 32rem; overflow: hidden; color: rgba(255,255,255,1); } div.wrapper > section.content > section.skills > div.skills > div.blocks > ul.skills > li.skill > div.block > div.picture { position: relative; height: 32rem; overflow: hidden; } div.wrapper > section.content > section.skills > div.skills > div.blocks > ul.skills > li.skill > div.block > div.picture > img { position: relative; display: block; width: 100%; height: 32rem; object-fit: cover; filter: brightness(60%); z-index: 0; } div.wrapper > section.content > section.skills > div.skills > div.blocks > ul.skills > li.skill > div.block > div.picture > h5 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: inline-block; width: auto; max-width: calc(40% - 4rem); line-height: 3rem; font-size: 1.8rem; text-transform: initial; transition: .6s; z-index: 2; pointer-events: none; } div.wrapper > section.content > section.skills > div.skills > div.blocks > ul.skills > li.skill > div.block > div.hover { position: absolute; top: 0; left: 0; opacity: 0; width: 100%; height: 100%; background: rgba(0,0,0,.5); border: .5rem solid rgba(149,180,71,1); transition: .6s; pointer-events: none; } div.wrapper > section.content > section.skills > div.skills > div.blocks > ul.skills > li.skill > div.block > div.hover > div.list { float: right; width: 60%; height: 100%; position: relative; } div.wrapper > section.content > section.skills > div.skills > div.blocks > ul.skills > li.skill > div.block > div.hover > div.list > ul { list-style: none; position: absolute; top: 50%; right: 0; text-align: left; transform: translate( 50%, -50%); transition: .6s; } div.wrapper > section.content > section.skills > div.skills > div.blocks > ul.skills > li.skill > div.block > div.hover > div.list > ul > li { list-style: none; display: block; height: 2rem; font-weight: 600; } div.wrapper > section.content > section.skills > div.skills > div.blocks > ul.skills > li.skill > div.block:hover > div.picture > h5 { left: 0; width: 33%; transform: translate(2rem, -50%); color: rgba(149,180,71,1); width: calc(40% - 4rem); transition: .6s; } div.wrapper > section.content > section.skills > div.skills > div.blocks > ul.skills > li.skill > div.block:hover > div.hover { opacity: 1; transition: .6s; } div.wrapper > section.content > section.skills > div.skills > div.blocks > ul.skills > li.skill > div.block:hover > div.hover > div.list > ul { transform: translate( 0, -50%); width: 100%; white-space: nowrap; transition: .6s; } /* EXPERTISES */ div.wrapper > section.content > section.expertises > div.expertises > div.blocks { background-position: 100% 0; background-repeat: no-repeat; min-height: 50rem; position: relative; } div.wrapper > section.content > section.expertises > div.expertises > div.blocks > ul.expertises { list-style: none; text-align: left; position: absolute; top: 50%; left: 0; transform: translate(0, -50%); } div.wrapper > section.content > section.expertises > div.expertises > div.blocks > ul.expertises > li.expertise { display: block; clear: both; } div.wrapper > section.content > section.expertises > div.expertises > div.blocks > ul.expertises > li.expertise > div.block { float: left; margin-bottom: 2rem; } div.wrapper > section.content > section.expertises > div.expertises > div.blocks > ul.expertises > li.expertise > div.block > div { float: left; } div.wrapper > section.content > section.expertises > div.expertises > div.blocks > ul.expertises > li.expertise > div.block > div.icon { width: 6rem; height: 6rem; text-align: center; margin: 0 2rem 0 0; color: rgba(255,255,255,1); background: rgba(100,100,100,1); border-radius: 50%; } div.wrapper > section.content > section.expertises > div.expertises > div.blocks > ul.expertises > li.expertise > div.block > div.icon > i { font-size: 3rem; line-height: 6rem; } div.wrapper > section.content > section.expertises > div.expertises > div.blocks > ul.expertises > li.expertise > div.block > div.text { width: calc(100% - 8rem); } div.wrapper > section.content > section.expertises > div.expertises > div.blocks > ul.expertises > li.expertise > div.block > div.text > h6 { font-size: 1.5rem; line-height: 1.5rem; font-family: 'Paytone One', sans-serif; font-weight: 400; font-style: normal; color: rgba(149,180,71,1); margin-bottom: 1rem; } div.wrapper > section.content > section.expertises > div.expertises > div.blocks > ul.expertises > li.expertise > div.block > div.text > p { font-size: 1.2rem; line-height: 1.3rem; } /* CLIENTS */ div.wrapper > section.content > section.clients { padding: 4rem 0; background: rgba(240,240,240,1); } div.wrapper > section.content > section.clients > div.clients > div.content > ul.clients.slider { position: relative; width: 100%; height: 12rem; } div.wrapper > section.content > section.clients > div.clients > div.content > ul.clients.slider:before { content: ""; width: calc((105vw - 1400px) / 2); height: 100%; position: absolute; left: 0; top: 0; background: linear-gradient(to right, rgba(240,240,240,1) 80%, rgba(240,240,240,0) 100%); transform: translate(calc((100vw - 1400px) / -2), 0); z-index: 2; } div.wrapper > section.content > section.clients > div.clients > div.content > ul.clients.slider:after { content: ""; width: calc((105vw - 1400px) / 2); height: 100%; position: absolute; right: 0; top: 0; background: linear-gradient(to right, rgba(240,240,240,0) 0%, rgba(240,240,240,1) 20%); transform: translate(calc((100vw - 1400px) / 2), 0); z-index: 2; } div.wrapper > section.content > section.clients > div.clients > div.content > ul.clients.slider li.client { display: block; float: left; } div.wrapper > section.content > section.clients > div.clients > div.content > ul.clients.slider li.client > a { position: relative; width: 100%; height: 12rem; display: block; } div.wrapper > section.content > section.clients > div.clients > div.content > ul.clients.slider li.client > a > img { filter: grayscale(1); transition: .4s; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } div.wrapper > section.content > section.clients > div.clients > div.content > ul.clients.slider li.client > a > div.hover { width: auto; min-width: 15rem; opacity: 0; position: absolute; top: 100%; left: 50%; padding: 1rem; border-radius: .6rem; background: rgba(0,0,0,.6); transform: translate(-50%, 0); transition: .4s; z-index: 99; } div.wrapper > section.content > section.clients > div.clients > div.content > ul.clients.slider li.client > a > div.hover > h5 { font-size: 1.5rem; color: rgba(255,255,255,1); } div.wrapper > section.content > section.clients > div.clients > div.content > ul.clients.slider li.client > a > div.hover > h6 { font-size: 1.1rem; line-height: 1.1rem; color: rgba(255,255,255,.8); } div.wrapper > section.content > section.clients > div.clients > div.content > ul.clients.slider li.client > a > div.hover:before { content: ""; position: absolute; top: -1.4rem; left: 50%; width: 0; height: 0; border: .7rem solid rgba(0,0,0,0); border-bottom-color: rgba(0,0,0,.6); transform: translate(-50%,0); } div.wrapper > section.content > section.clients > div.clients > div.content > ul.clients.slider li.client > a:hover > div.hover { opacity: 1; transition: .4s; } div.wrapper > section.content > section.clients > div.clients > div.content > ul.clients.slider li.client > a:hover > img { filter: grayscale(0); transition: .4s; } /* CONTACT */ div.wrapper > section.content > section.contact > div.contact > div.content { position: relative; width: 100%; height: 100%; } div.wrapper > section.content > section.contact > div.contact > div.content > ul.contact { position: relative; width: 100%; height: 100%; list-style: none; } div.wrapper > section.content > section.contact > div.contact > div.content > ul.contact > li.question { display: block; clear: both; height: 3rem; line-height: 3rem; padding: 0 2rem; margin: 3rem 0; background: rgba(240,240,240,1); transition: .4s; } div.wrapper > section.content > section.contact > div.contact > div.content > ul.contact > li.question > a > div.question { float: left; text-transform: uppercase; font-weight: 700; font-size: 1.8rem; } div.wrapper > section.content > section.contact > div.contact > div.content > ul.contact > li.question > a > div.answer { float: right; text-transform: uppercase; } div.wrapper > section.content > section.contact > div.contact > div.content > ul.contact > li.question > a > div.answer > span.icon { display: inline-block; width: 2.4rem; height: 2.4rem; line-height: 2.4rem; text-align: center; margin-left: 1rem; border-radius: 50%; background: rgba(255,255,255,1); } div.wrapper > section.content > section.contact > div.contact > div.content > ul.contact > li.question > a > div.answer > span.icon > i { font-size: 1.2rem; padding-left: .2rem; transition: .1s; } div.wrapper > section.content > section.contact > div.contact > div.content > ul.contact > li.question:hover { background: rgba(200,200,200,1); transition: .4s; } div.wrapper > section.content > section.contact > div.contact > div.content > ul.contact > li.question:hover > a.answer > span.icon > i { padding-left: .6rem; transition: .1s; } div.wrapper > section.content > section.contact > div.contact > div.content > ul.contact > div.contact-form { position: absolute; width: 100%; height: 100%; top: 0; left: 0; bottom: 0; right: 0; opacity: 0; background: rgba(240,240,240,1); z-index: -1; transition: .4s; } div.wrapper > section.content > section.contact > div.contact > div.content > ul.contact > div.contact-form div.columns:not(.form) { padding: 2rem; } div.wrapper > section.content > section.contact > div.contact > div.content > ul.contact > div.contact-form div.columns.left { margin-left: 0; } div.wrapper > section.content > section.contact > div.contact > div.content > ul.contact > div.contact-form p.element { display: block; margin-bottom: 1rem; height: auto; float: left; clear: left; width: 100%; } div.wrapper > section.content > section.contact > div.contact > div.content > ul.contact > div.contact-form p.element > label { display: block; float: left; width: 30%; text-transform: uppercase; text-align: left; font-size: 1.3rem; } div.wrapper > section.content > section.contact > div.contact > div.content > ul.contact > div.contact-form p.element > label + span { display: block; float: left; width: 70%; } div.wrapper > section.content > section.contact > div.contact > div.content > ul.contact > div.contact-form p.element > label + span > select , div.wrapper > section.content > section.contact > div.contact > div.content > ul.contact > div.contact-form p.element > label + span > input { height: 2.4rem; border-radius: .2rem; width: 100%; background: rgba(230,230,230,1); } div.wrapper > section.content > section.contact > div.contact > div.content > ul.contact > div.contact-form p.element > label + span > input[type="file"] { display: none; } div.wrapper > section.content > section.contact > div.contact > div.content > ul.contact > div.contact-form p.element > label + span + button.file { float: right; height: 2.4rem; border-radius: .2rem; font-size: 1.3rem; width: auto; background: rgba(180,180,180,1); border: .1rem solid rgba(100,100,100,1); text-transform: uppercase; } div.wrapper > section.content > section.contact > div.contact > div.content > ul.contact > div.contact-form p > input[type="submit"] { float: right; height: 2.4rem; border-radius: .2rem; font-size: 1.3rem; width: auto; background: rgba(149,180,71,1); border: .1rem solid rgba(75,102,7,1); text-transform: uppercase; } div.wrapper > section.content > section.contact > div.contact > div.content > ul.contact > div.contact-form div.right p.element > span > textarea { resize: none; width: 100%; height: 12rem; margin-top: 1rem; border-radius: .2rem; background: rgba(230,230,230,1); } div.wrapper > section.content > section.contact > div.contact > div.content > ul.contact > div.contact-form.active { opacity: 1; z-index: 2; transition: .4s; } div.wrapper > section.content > section.contact > div.contact > div.content > ul.contact > div.contact-form > div.close-form { position: absolute; top: -3rem; right: 0; height: 2rem; line-height: 2rem; text-transform: uppercase; cursor: pointer; transition: .1s; } div.wrapper > section.content > section.contact > div.contact > div.content > ul.contact > div.contact-form > div.close-form > div.icon { display: inline-block; width: 2rem; height: 2rem; line-height: 2rem; text-align: center; background: rgba(230,230,230,1); border-radius: 50%; } div.wrapper > section.content > section.contact > div.contact > div.content > ul.contact > div.contact-form > div.close-form:hover { transform: scale3d(1.1,1.1,1.1); transition: .1s; } div.wrapper > section.content > section.contact > div.maps { padding: 8rem 0; } div.wrapper > section.content > section.contact > div.maps, div.wrapper > section.content > section.contact > div.maps > div#map { min-height: 50rem; transition: .1s; } /* SINGLE */ div.wrapper > section.content.single > section > div.title > h1 { font-size: 1.4rem; } div.wrapper > section.content.single > section > div.title { display: inline-block; clear: both; padding: 0 0 4rem; text-transform: uppercase; color: rgba(210,210,210,1); } div.wrapper > section.content.single > section > div.title:after { display: block; content: ""; height: .2rem; margin: 2rem 0 0; background: rgba(210,210,210,1); } div.wrapper > section.content.single > section.single > article h1 { font-size: 1.4rem; } div.wrapper > section.content.single > section.single > article h1:after { display: block; content: ""; height: .2rem; margin: 2rem 0 0; background: rgba(210,210,210,1); } div.wrapper > section.content.single > section.single > article h1 { display: inline-block; clear: both; padding: 0 0 4rem; text-transform: uppercase; color: rgba(210,210,210,1); } div.wrapper > section.content.single > section.single > article h4 { font-size: 1.3rem; font-family: 'Paytone One', sans-serif; } div.wrapper > section.content.single > section.single > article h4 { display: block; clear: both; padding: 0 0 2rem; text-align: left; text-transform: uppercase; color: rgba(10,10,10,1); } div.wrapper > section.content.single > section.single > article section.contact h4 { font-size: 1.6rem; font-weight: initial; font-family: 'Paytone One', sans-serif; color: rgba(50,50,50,1); } div.wrapper > section.content.single > section.single > article div.reliable-posts h4 { font-size: 1.6rem; font-weight: initial; font-family: 'Paytone One', sans-serif; color: rgba(50,50,50,1); } div.wrapper > section.content.single > section.single > article div.reliable-posts h4:after { display: block; content: ""; width: 100%; height: .2rem; margin: 2rem 0 4rem; background: rgba(50,50,50,1); } div.wrapper > section.content.single > section.single > article p { text-align: left; padding: 0 1rem 2rem; font-size: 1.4rem; letter-spacing: .05rem; font-weight: 400; } div.wrapper > section.content.single > section.single > article p > strong { font-size: 1.4rem; letter-spacing: .05rem; font-weight: 600; } div.wrapper > section.content.single > section.single > article .black { color: rgba(0,0,0,1); } /* RELIABLE POSTS */ div.wrapper > section.content > section.single > article div.reliable-posts { position: relative; text-align: center; } div.wrapper > section.content > section.single > article div.reliable-posts > ul.works { list-style: none; margin: 0; } div.wrapper > section.content > section.single > article div.reliable-posts > ul.works > li.work { display: block; } div.wrapper > section.content > section.single > article div.reliable-posts > ul.works > li.work > div.block > div.picture { position: relative; } div.wrapper > section.content > section.single > article div.reliable-posts > ul.works > li.work > div.block > div.picture { transition: .3s; } div.wrapper > section.content > section.single > article div.reliable-posts > ul.works > li.work > div.block > div.picture > img { display: block; width: 100%; height: 30rem; object-fit: cover; } div.wrapper > section.content > section.single > article div.reliable-posts > ul.works > li.work > div.block > div.picture > div.hover { opacity: 0; position: absolute; left: 0; top: 0; right: 0; bottom: 0; width: 100%; height: 100%; color: rgba(255,255,255,1); text-align: center; } div.wrapper > section.content > section.single > article div.reliable-posts > ul.works > li.work > div.block > div.picture > div.hover > a > div.top > div.top-content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; } div.wrapper > section.content > section.single > article div.reliable-posts > ul.works > li.work > div.block > div.picture > div.hover > a > div.top > div.top-content > div.read { color: rgba(255,255,255,1); text-transform: uppercase; font-size: 2rem; font-weight: 700; } div.wrapper > section.content > section.single > article div.reliable-posts > ul.works > li.work > div.block > div.picture > div.hover > a > div.top > div.top-content > div.read:after { display: block; content: ""; width: 6rem; margin: 3rem auto 0; border-bottom: .2rem solid rgba(255,255,255,1); } div.wrapper > section.content > section.single > article div.reliable-posts > ul.works > li.work > div.block > div.picture > div.hover > a > div.top > div.top-content > div.read > p { text-align: center; } div.wrapper > section.content > section.single > article div.reliable-posts > ul.works > li.work > div.block > div.picture > div.hover > a > div.bottom { position: absolute; bottom: 7rem; left: 2rem; width: calc(100% - 4rem); font-family: karla; height: 2rem; } div.wrapper > section.content > section.single > article div.reliable-posts > ul.works > li.work > div.block > div.picture > div.hover > a > div.bottom > div.bottom-content { width: 100%; font-size: 1.2rem; line-height: 1.4rem; } div.wrapper > section.content > section.single > article div.reliable-posts > ul.works > li.work > div.block > div.picture > div.hover > a > div.bottom > div.bottom-content > div > p { float: left; line-height: 1.6rem; } div.wrapper > section.content > section.single > article div.reliable-posts > ul.works > li.work > div.block > div.picture > div.hover > a > div.bottom > div.bottom-content > div > i { float: left; font-size: 1.4rem; } div.wrapper > section.content > section.single > article div.reliable-posts > ul.works > li.work > div.block > div.picture > div.hover > a > div.bottom > div.bottom-content > div.logo-client > img { height: 6rem; width: auto; filter: grayscale(1) brightness(0) invert(1); } div.wrapper > section.content > section.single > article div.reliable-posts > ul.works > li.work:hover > div.block > div.picture > img { filter: brightness(.6); transition: .3s; } div.wrapper > section.content > section.single > article div.reliable-posts > ul.works > li.work:hover > div.block > div.picture > div.hover { opacity: 1; transition: .3s; } div.wrapper > section.content.single > section.single > article > section.picture { width: 100%; height: 60rem; } div.wrapper > section.content.single > section.single > article > section.picture figure { height: 60rem; } div.wrapper > section.content.single > section.single > article > section.picture img { width: 100%; height: 100%; max-height: 100%; max-width: 100%; object-fit: cover; object-position: center center; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } div.wrapper > section.content.single > section.single > article > section.picture_mini { width: 100%; height: 30rem; } div.wrapper > section.content.single > section.single > article > section.picture_mini figure { height: 30rem; } div.wrapper > section.content.single > section.single > article > section.picture_mini img { width: 100%; height: 100%; max-height: 100%; max-width: 100%; object-fit: cover; object-position: center center; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } div.wrapper > section.content.single > section.single > article > section.picture figure , div.wrapper > section.content.single > section.single > article > section.picture_mini figure , div.wrapper > section.content.single > section.single > article > section.picture figure > div { width: 100%; } div.wrapper > section.content.single > section.single > article > section.picture_mini figure > div { width: 100%; } div.wrapper > section.content.single > section.single > article > section.logo img { width: auto; height: 9rem; } /* FOOTER */ div.wrapper > section.footer { min-height: 50rem; padding: 6rem 0; background: rgba(0,0,0,1); color: rgba(255,255,255,1); transition: .1s; } div.wrapper > section.footer > div:not(:last-of-type) > div.content { float: left; clear: left; width: 100%; padding-bottom: 3rem; border-bottom: .1rem solid rgba(20,20,20,1); } div.wrapper > section.footer > div.footer > div.content { text-align: left; font-weight: 500; } div.wrapper > section.footer > div.footer > div.content > div > div > h5 { font-weight: 700; font-size: 1.4rem; } div.wrapper > section.footer > div.footer > div.content > div > div > h5:after { content: ""; display: block; width: 2rem; height: .2rem; margin-top: 1rem; background: rgba(255,255,255,1); } div.wrapper > section.footer > div.footer > div.content > div > div > ul { list-style: none; margin: 2rem 0; } div.wrapper > section.footer > div.footer > div.content > div > div > ul > li > a:hover { color: rgba(149,180,71,1); } /* GENERAL */ div.wrapper > section.footer > div.footer > div.content > div > div > ul.infos > li { margin: 1rem .5rem; } div.wrapper > section.footer > div.footer > div.content > div > div > ul.infos > li > i { margin-right: 1rem; color: rgba(120,120,120,1); } /* RS */ div.wrapper > section.footer > div.footer > div.content > div > div > ul.social > li { display: inline-block; width: 2.8rem; height: 2.8rem; line-height: 2.4rem; margin-right: 1rem; text-align: center; border: .2rem solid rgba(255,255,255,1); border-radius: 50%; } div.wrapper > section.footer > div.footer > div.content > div > div > ul.social > li.facebook > a:hover {color: #3b5998; transition: .2s; } div.wrapper > section.footer > div.footer > div.content > div > div > ul.social > li.twitter > a:hover {color: #55acee; transition: .2s; } div.wrapper > section.footer > div.footer > div.content > div > div > ul.social > li.instagram > a:hover {color: #9b6954; transition: .2s; } div.wrapper > section.footer > div.footer > div.content > div > div > ul.social > li.vimeo > a:hover {color: #1ab7ea; transition: .2s; } div.wrapper > section.footer > div.footer > div.content > div > div > ul.social > li.youtube > a:hover {color: #cd201f; transition: .2s; } div.wrapper > section.footer > div.footer > div.content > div > div > ul.social > li.linkedin > a:hover {color: #0077B5; transition: .2s; } /* ADDRESS */ div.wrapper > section.footer > div.footer > div.content > div > div > ul.address > li { margin: 1rem .5rem; } div.wrapper > section.footer > div.footer > div.content > div > div > ul.address > li > i { margin-right: 1rem; color: rgba(120,120,120,1); } /* FORM */ div.wrapper > section.footer > div.footer > div.content > div > div > div.form { padding: 2rem 0 0; } div.wrapper > section.footer > div.footer > div.content > div > div input { height: 2.4rem; border-radius: 0; width: 100%; margin: 1rem 0; border: 0; color: rgba(130,130,130,1); background: rgba(60,60,60,1); } div.wrapper > section.footer > div.footer > div.content > div > div input[type="submit"] { height: 2.4rem; border-radius: 0; width: auto; margin: 1rem 0; border: 0; color: rgba(210,210,210,1); background: rgba(160,160,160,1); } div.wrapper > section.footer > div.footer > div.content > div > div textarea { height: 15rem; resize: none; border-radius: 0; width: 100%; margin: 1rem 0; border: 0; color: rgba(130,130,130,1); background: rgba(60,60,60,1); } /* LOGO BOTTOM */ div.wrapper > section.footer > div.logo { text-align: center; padding: 4rem 0 0; } div.wrapper > section.footer > div.logo > div.content > p > img { filter: grayscale(1); height: 10rem; width: auto; } div.wrapper > section.footer > div.logo > div.content > p:last-of-type { color: rgba(120,120,120,1); font-size: 1.1rem; margin-top: 1rem; } /* CREDITS */ div.wrapper > section.footer > div.credits { text-align: center; padding: 4rem 0 0; color: rgba(200,200,200,1); } div.wrapper > section.footer > div.credits > div.content > p > a > img { height: 2.3rem; width: auto; margin-top: .6rem; } /* FILE ARCHIVED ON 20:37:26 Jan 26, 2019 AND RETRIEVED FROM THE INTERNET ARCHIVE ON 09:24:38 Jun 30, 2025. JAVASCRIPT APPENDED BY WAYBACK MACHINE, COPYRIGHT INTERNET ARCHIVE. ALL OTHER CONTENT MAY ALSO BE PROTECTED BY COPYRIGHT (17 U.S.C. SECTION 108(a)(3)). */ /* playback timings (ms): captures_list: 1.058 exclusion.robots: 0.064 exclusion.robots.policy: 0.048 esindex: 0.015 cdx.remote: 38.278 LoadShardBlock: 94.957 (3) PetaboxLoader3.datanode: 157.413 (4) load_resource: 162.553 PetaboxLoader3.resolve: 45.842 */