/* Theme Name: Catherine Audet Author: Cake Communication - Catherine Audet Web Version: 1.0 */ /* ========================================================================== HTML5, Reset & Base setup ========================================================================== */ * { color: inherit; font: inherit; } *:focus { outline: 0; } html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } html, body { width: 100%; height: 100%; } article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary, hr { display: block; } audio, canvas, progress, video { display: inline-block; vertical-align: baseline;} audio:not([controls]), [hidden], template { display: none; height: 0; } nav li { display: inline-block; } body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, hr, ul, ol, dl, dd, nav, menu, button, input, optgroup, select, textarea, fieldset, nav ul, nav ol, menu ul, menu ol, li > ul, li > ol, iframe { margin: 0; } input[type="checkbox"], input[type="radio"], menu, nav ul, nav ol, menu ul, menu ol, fieldset { padding: 0; } button::-moz-focus-inner { padding: 0; } input::-moz-focus-inner { padding: 0; } td, th, legend, iframe, pre { overflow: auto; } svg:not(:root) { overflow: hidden; } hr, img, legend, fieldset, iframe, a img { border: 0 none; } button::-moz-focus-inner { border: 0 none; } input::-moz-focus-inner { border: 0 none; } hr, input[type="search"] { box-sizing: content-box; } button, input, optgroup, select, textarea { box-sizing: border-box; } nav ul, nav ol, menu ul, menu ol { list-style: none; list-style-image: none;} img { vertical-align: middle; outline: none; } img, object, embed, video { height: auto; } input[type="number"]::-webkit-inner-spin-button { height: auto; } input[type="number"]::-webkit-outer-spin-button { height: auto; } img, object, embed { max-width: 100%; } /*iframe, video { width: 100%; }*/ table { border-collapse: collapse; border-spacing: 0; } input { line-height: normal; } button { overflow: visible; } textarea { overflow: auto; } button, select { text-transform: none; } label, a, button, input[type="reset"], input[type="submit"] { cursor: pointer; transition: all .3s; } button[disabled], html input[disabled] { cursor: default; } button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; } input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; } input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } a { background: transparent; text-decoration: none; transition: all .3s; } a:active, a:hover { outline: 0; text-decoration: none; } b, strong, .strong, optgroup { font-weight: 700; } dfn, em { font-style: normal;} small { font-size: 75%; } sub, sup { font-size: 40%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.7em; } sub { bottom: -0.25em; } code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; } hr { height: 0; border-top: 1px solid; margin-top: -1px; } svg { fill : currentColor} /* ============================================================================= Typography ========================================================================== */ @font-face { font-family: 'Zapfino'; font-weight: normal; font-style: normal; src: url('fonts/LinotypeZapfino-One.eot');src: url('fonts/LinotypeZapfino-One.eot?#iefix') format('embedded-opentype'), url('fonts/LinotypeZapfino-One.woff') format('woff'), url('fonts/LinotypeZapfino-One.ttf') format('truetype'), url('fonts/LinotypeZapfino-One.svg#cakeicon') format('svg');} @font-face { font-family: 'caw'; src: url('fonts/caw.eot?55671174'); src: url('fonts/caw.eot?55671174#iefix') format('embedded-opentype'), url('fonts/caw.woff?55671174') format('woff'), url('fonts/caw.ttf?55671174') format('truetype'), url('fonts/caw.svg?55671174#caw') format('svg'); } body { -webkit-font-smoothing: subpixel-antialiased; } /* Typographic baseline */ html { font-family: 'Rubik', sans-serif; color: #000000; font-weight: 300; font-size: 125%; } /* 1rem = 20px */ body { font-size: .8rem; line-height: 1.4; font-weight: 300; } /* 16 / 18 */ h1, .h1 { font-family: 'Zapfino'; font-size: 4rem; line-height: 1; font-weight: 100; } /* 37 / 44,4 */ h2, .h2 { font-size: 1.4rem; line-height: 1.6rem; font-weight: 400; } /* 22 / 26 */ h3, .h3 { font-size: 1.2rem; line-height: 1.5; font-weight: 400; text-transform: none; } /* 20 / 24 */ h4, .h4 { font-size: .9rem; line-height: 1.2; font-weight: 400; text-transform: none; } /* 18 / 21 */ small, .small { font-size: .7rem; line-height: 1.1; } /* 14 / 15 */ .regular { font-weight: 400; } .semibold { font-weight: 600; } b, strong, .strong, .bold { font-weight: 700; } .underline { border-bottom: 1px solid;} .strike { text-decoration: line-through; } .normal-style { font-style: normal; } .italic, em { font-style: italic; } .rubik { font-family: 'Rubik', sans-serif; } @media screen and ( max-width: 700px ){ h1, .h1 { font-size: 3rem; } } @media screen and ( max-width: 525px ){ h1, .h1 { font-size: 2.5rem; } } @media screen and ( max-width: 450px ){ h1, .h1 { font-size: 2rem; } } /* Margin and paddings */ h1, h2, h3, h4, h5, h6, ul, ol, dd, p, figure, pre, table, fieldset, blockquote, hr { margin-bottom: 1rem; } .box { padding: 1rem; } .pad-top, .pad-vertical { padding-top: 1rem; } .pad-bottom, .pad-vertical { padding-bottom: 1rem; } .pad-left, .pad-horizontal { padding-left: 1rem; } .pad-right, .pad-horizontal { padding-right: 1rem; } .margin-top, .margin-vertical { margin-top: 1rem; } .margin-bottom, .margin-vertical { margin-bottom: 1rem; } .margin-left, .margin-horizontal, .align-right, .alignright { margin-left: 1rem; } .margin-right, .margin-horizontal, .align-left, .alignleft { margin-right: 1rem; } hr.pad-left, hr.pad-horizontal { padding-left: 0; margin-left: 1rem; } hr.pad-right, hr.pad-horizontal { padding-right: 0; margin-right: 1rem; } .box-quart { padding: .25rem; } .pad-top-quart, .pad-vertical-quart { padding-top: .25rem; } .pad-bottom-quart, .pad-vertical-quart { padding-bottom: .25rem; } .pad-left-quart, .pad-horizontal-quart { padding-left: .25rem; } .pad-right-quart, .pad-horizontal-quart { padding-right: .25rem; } .margin-quart { margin: .25rem; } .margin-top-quart, .margin-vertical-quart { margin-top: .25rem; } .margin-bottom-quart, .margin-vertical-quart { margin-bottom: .25rem; } .margin-left-quart, .margin-horizontal-quart, .align-right-quart, .alignright-quart { margin-left: .25rem; } .margin-right-quart, .margin-horizontal-quart, .align-left-quart, .alignleft-quart { margin-right: .25rem; } hr.pad-left-quart, hr.pad-horizontal-quart { padding-left: 0; margin-left: .25rem; } hr.pad-right-quart, hr.pad-horizontal-quart { padding-right: 0; margin-right: .25rem; } .box-half { padding: .5rem; } .pad-top-half, .pad-vertical-half { padding-top: .5rem; } .pad-bottom-half, .pad-vertical-half { padding-bottom: .5rem; } .pad-left-half, .pad-horizontal-half { padding-left: .5rem; } .pad-right-half, .pad-horizontal-half { padding-right: .5rem; } .margin-half { margin: .5rem; } .margin-top-half, .margin-vertical-half { margin-top: .5rem; } .margin-bottom-half, .margin-vertical-half { margin-bottom: .5rem; } .margin-left-half, .margin-horizontal-half, .align-right-half, .alignright-half { margin-left: .5rem; } .margin-right-half, .margin-horizontal-half, .align-left-half, .alignleft-half { margin-right: 2rem; } hr.pad-left-half, hr.pad-horizontal-half { padding-left: 0; margin-left: .5rem; } hr.pad-right-half, hr.pad-horizontal-half { padding-right: 0; margin-right: .5rem; } .box-x2 { padding: 2rem; } .pad-top-x2, .pad-vertical-x2 { padding-top: 2rem; } .pad-bottom-x2, .pad-vertical-x2 { padding-bottom: 2rem; } .pad-left-x2, .pad-horizontal-x2 { padding-left: 2rem; } .pad-right-x2, .pad-horizontal-x2 { padding-right: 2rem; } .margin-x2 { margin: 2rem } .margin-top-x2, .margin-vertical-x2 { margin-top: 2rem; } .margin-bottom-x2, .margin-vertical-x2 { margin-bottom: 2rem; } .margin-left-x2, .margin-horizontal-x2, .align-right-x2, .alignright-x2 { margin-left: 2rem; } .margin-right-x2, .margin-horizontal-x2, .align-left-x2, .alignleft-x2 { margin-right: 2rem; } hr.pad-left-x2, hr.pad-horizontal-x2 { padding-left: 0; margin-left: 2rem; } hr.pad-right-x2, hr.pad-horizontal-x2 { padding-right: 0; margin-right: 2rem; } .box-x3 { padding: 3rem; } .pad-top-x3, .pad-vertical-x3 { padding-top: 3rem; } .pad-bottom-x3, .pad-vertical-x3 { padding-bottom: 3rem; } .pad-left-x3, .pad-horizontal-x3 { padding-left: 3rem; } .pad-right-x3, .pad-horizontal-x3 { padding-right: 3rem; } .margin-x3 { margin: 3rem } .margin-top-x3, .margin-vertical-x3 { margin-top: 3rem; } .margin-bottom-x3, .margin-vertical-x3 { margin-bottom: 3rem; } .margin-left-x3, .margin-horizontal-x3, .align-right-x3, .alignright-x3 { margin-left: 3rem; } .margin-right-x3, .margin-horizontal-x3, .align-left-x3, .alignleft-x3 { margin-right: 3rem; } hr.pad-left-x3, hr.pad-horizontal-x3 { padding-left: 0; margin-left: 3rem; } hr.pad-right-x3, hr.pad-horizontal-x3 { padding-right: 0; margin-right: 3rem; } .box-x4 { padding: 4rem; } .pad-top-x4, .pad-vertical-x4 { padding-top: 4rem; } .pad-bottom-x4, .pad-vertical-x4 { padding-bottom: 4rem; } .pad-left-x4, .pad-horizontal-x4 { padding-left: 4rem; } .pad-right-x4, .pad-horizontal-x4 { padding-right: 4rem; } .margin-x4 { margin: 4rem } .margin-top-x4, .margin-vertical-x4 { margin-top: 4rem; } .margin-bottom-x4, .margin-vertical-x4 { margin-bottom: 4rem; } .margin-left-x4, .margin-horizontal-x4, .align-right-x4, .alignright-x4 { margin-left: 4rem; } .margin-right-x4, .margin-horizontal-x4, .align-left-x4, .alignleft-x4 { margin-right: 4rem; } hr.pad-left-x4, hr.pad-horizontal-x4 { padding-left: 0; margin-left: 4rem; } hr.pad-right-x4, hr.pad-horizontal-x4 { padding-right: 0; margin-right: 4rem; } @media screen and ( max-width: 500px ){ .box-x3 , .box-x4 { padding: 2rem; } .pad-top-x3, .pad-vertical-x3, .pad-top-x4, .pad-vertical-x4 { padding-top: 2rem; } .pad-bottom-x3, .pad-vertical-x3, .pad-bottom-x4, .pad-vertical-x4 { padding-bottom: 2rem; } .pad-left-x3, .pad-horizontal-x3, .pad-left-x4, .pad-horizontal-x4 { padding-left: 2rem; } .pad-right-x3, .pad-horizontal-x3, .pad-right-x4, .pad-horizontal-x4 { padding-right: 2rem; } } /* Colors */ .bkg-blanc { background-color: #fff; } .bkg-noir { background-color: #000; } .bkg-gris { background-color: #808080; } .bkg-bleu { background-color: #0000ff; } .bkg-vert { background-color: #008000; } .bkg-jaune { background-color: #ffff00; } .bkg-orange { background-color: #ED7F10; } .bkg-rouge { background-color: #FF0000; } .bkg-rose { background-color: #FD6C9E; } .bkg-mauve { background-color: #660099; } .blanc, .focus-blanc .focus { color: #fff; } .noir, .focus-noir .focus { color: #000; } .gris, .focus-gris .focus { color: #808080; } .bleu, .focus-bleu .focus { color: #0000ff; } .vert, .focus-vert .focus { color: #008000; } .jaune, .focus-jaune .focus { color: #ffff00; } .orange, .focus-orange .focus { color: #ED7F10; } .rouge, .focus-rouge .focus { color: #FF0000; } .rose, .focus-rose .focus { color: #FD6C9E; } .mauve, .focus-mauve .focus { color: #660099; } /* btn */ [class*="l-btn"] { display: inline-block; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; border-radius: 0; transition: all .3s; } .l-btn__bordered { border: 1px solid; padding: .5rem 1rem; position: relative; transition: letter-spacing .3s ease 0s, border .3s ease .2s; } .l-btn__bordered:hover { border-color: transparent; letter-spacing: 1px; transition: all .3s; } .l-btn__bordered:before { content: ''; position: absolute; top: 0; left: 0px; display: block; width: 0px; height: 0; border-top: 2px solid; margin-top: -2px; transition: all .3s ease 0s; } .l-btn__bordered:after { content: ''; position: absolute; bottom: 0; right: 0px; display: block; width: 0px; height: 0; border-bottom: 2px solid; transition: all .3s ease 0s; } .l-btn__bordered:hover:before, .l-btn__bordered:hover:after { width: 100%; transition: all .3s ease .2s; } /* TEXT SHADOW */ .l-text__shadow { text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5); } /* SVG */ [class*="l-svg"] { display: block; line-height: 0; width: 2rem; } [class*="l-svg"].inline-block { display: inline-block; vertical-align: middle; } [class*="l-svg"] span { position: relative; display: block; width: 100%; padding-bottom: 100%; } [class*="l-svg"] svg { display: block; position: absolute; width: 100%; height: 100%; } /* ============================================================================ SITE ========================================================================== */ .wrapper { height: 100%; } .container { max-width: 850px; width: 100%; margin-left: auto; margin-right: auto; box-sizing: border-box; } .big-container { max-width: 1200px; width: 100%; margin-left: auto; margin-right: auto; box-sizing: border-box; } .border-bottom hr.hidden { display: block; max-width: 850px; width: 100%; margin-left: auto; margin-right: auto; margin-top: 4rem; } .border-bottom.pad-vertical-x4 { padding-bottom: 0; } .l-border__bottom { border-bottom: 1px solid; } .l-border__top { border-top: 1px solid; } /* POPUP */ .popup-pan { position: fixed; left: -100%; top: 0; width: 100%; height: 100%; background-color: rgba(255,255,255,.5); transition: all .5s; z-index:5; } .in_popup:checked ~ .popup-pan { left: 0; } .popup-inner { max-width: 100%; } .popup-close { position: absolute; top: 1rem; right: 1rem; } @media screen and ( max-width: 1250px ){ /* .container { padding-left: 1rem; padding-right: 1rem; } */ } @media screen and ( max-width: 950px ){ /* .big-container { padding-left: 1rem; padding-right: 1rem; } */ } /* ============================================================================ HEADER - FOOTER ========================================================================== */ /* !PRINCIPAL */ .c-mobile__lbl { position: fixed; left: 2rem; top: 2rem; width: 1.5rem; min-height: 24px; transition: all .3s; overflow: hidden; z-index: 5; } .c-mobile__lbl span { display: block; background: #000; width: 1.5rem; height: 4px; margin: 0 auto 4px; overflow: hidden; transform: rotate(0deg) translateY(0);} .c-main__nav { position: fixed; left: 2rem; right: calc(100% - 2rem); top: 2rem; width: 1.5rem; height: 4px; opacity: 0; transition: opacity 0s ease .3s, height .3s ease .2s, width .3s ease .6s, right .3s ease .6s; z-index: 4; background-color: rgba(0,0,0, 1); } .c-main__menu { position: relative; top: 0; left: 0; width: 100%; height: 100%; white-space: nowrap; z-index: -1; color: #fff; overflow: hidden; } .c-main__menu li { -ms-flex: 100%; flex: 100%; max-width: 32%; -ms-flex-item-align: center; align-self: center; padding: 1rem; box-sizing: border-box; } .c-main__menu>li { transform: translateY(-10000%); } .c-main__menu>li:first-child { position: absolute; right: 0; top: 0; max-width: 100%; transform: translateY(0); } .c-main__menu>li:nth-child(3n + 2) { transition: all .4s ease 0; } .c-main__menu>li:nth-child(3n + 3) { transition: all .4s ease .1s; } .c-main__menu>li:nth-child(3n + 4) { transition: all .4s ease .2s; } .c-main__menu li a { position: relative; display: block; } .c-main__menu li:hover>a { transform: translateY(-.25rem); } .c-main__menu .sub-menu { position: absolute; top: 100%; left: 50%; right: 50%; width: 2px; max-height: 0; white-space: nowrap; color: transparent; overflow: hidden; z-index: 4; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; align-items: stretch; -ms-flex-pack: justify; justify-content: space-between; box-sizing: border-box; } .c-main__menu li:hover .sub-menu { padding-top: 2rem; width: 200%; left: -50%; right: -50%; max-height: 10rem; color: #fff; transition: padding .3s ease 0s, width .3s ease .3s, left .3s ease .3s, right .3s ease .3s, max-height .3s ease 0s, color .1s ease .2s; } .c-main__menu li .sub-menu:before { content: ''; display: block; width: 1px; position: absolute; left: 50%; right: 50%; top: 0; height: 0; background-color: #fff; } .c-main__menu li:hover .sub-menu:before { height: 1.5rem; transition: all .3s; } .c-mobile__in:checked ~ .wrapper { filter: blur(5px) opacity(90%); } .c-mobile__in:checked ~ .c-header .c-mobile__lbl { transform: translateY(6px)} .c-mobile__in:checked ~ .c-header .c-mobile__lbl span { background: #fff; transition: margin .3s ease, transform .3s ease .3s, background .3s, opacity 0s; } .c-mobile__in:checked ~ .c-header .c-mobile__lbl span:nth-child(1) { margin: 4px auto 0; opacity: 0; } .c-mobile__in:checked ~ .c-header .c-mobile__lbl span:nth-child(2) { margin: 0 auto 0; transform: rotate(45deg) translate(4px, 0px); } .c-mobile__in:checked ~ .c-header .c-mobile__lbl span:nth-child(3) { margin: -4px auto 0; transform: rotate(-45deg) translate(0px, 4px); } .c-mobile__in:checked ~ .c-header .c-main__nav { z-index: 4; left: 2rem; right: 2rem; width: calc(100% - 4rem); top: 2rem; height: calc(100% - 4rem); transition: opacity 0s ease 0s, height .3s ease .3s, width .3s ease 0s, right .3s ease 0s; background-color: rgba(0,0,0, 1); opacity: 1; } .c-mobile__in:checked ~ .c-header .c-main__menu>li:nth-child(3n + 2) { transform: translateY(0); transition: all .4s ease .1s; } .c-mobile__in:checked ~ .c-header .c-main__menu>li:nth-child(3n + 3) { transform: translateY(0); transition: all .4s ease .2s; } .c-mobile__in:checked ~ .c-header .c-main__menu>li:nth-child(3n + 4) { transform: translateY(0); transition: all .4s ease .3s; } .c-mobile__in:checked ~ .c-header .loading .c-main__menu>li:nth-child(3n + 2), .c-mobile__in:checked ~ .c-header .loading .c-main__menu>li:nth-child(3n + 3), .c-mobile__in:checked ~ .c-header .loading .c-main__menu>li:nth-child(3n + 4) { transition: all 0s ease .0s; } .c-mobile__in:checked ~ .c-header .loading, .c-header .c-main__nav.loading { top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; background-color: #fff; opacity: 1; transition: all .3s; } .c-header .c-main__nav.loading li:not(.active) { max-width: 0; overflow: hidden; padding: 0; transition: all 0s ease .1s; } .c-header .c-main__nav li.active { letter-spacing: 5px; color: #000; max-width: 100%; transform: translateY(0); transition: all .1s ease .3s; opacity: 1; } .c-header .c-main__nav.loaded { left: 2rem; right: calc(100% - 2rem); top: 2rem; width: 1.5rem; height: 4px; opacity: 0; transition: height 0s ease 1s, width 0s ease 1s, left 0s ease 1s, right 0s ease 1s, top 0s ease 1s, bottom 0s ease 1s, opacity .9s ease 0s; } li.active { } li.active span { transition: all .3s; } li.active span:nth-child(1) { filter: blur(0px); animation: blur-text .6s 0s infinite linear alternate; } li.active span:nth-child(2) { filter: blur(0px); animation: blur-text .6s .1s infinite linear alternate; } li.active span:nth-child(3) { filter: blur(0px); animation: blur-text .6s .2s infinite linear alternate; } li.active span:nth-child(4) { filter: blur(0px); animation: blur-text .6s .3s infinite linear alternate; } li.active span:nth-child(5) { filter: blur(0px); animation: blur-text .6s .4s infinite linear alternate; } li.active span:nth-child(6) { filter: blur(0px); animation: blur-text .6s .5s infinite linear alternate; } li.active span:nth-child(7) { filter: blur(0px); animation: blur-text .6s .6s infinite linear alternate; } @keyframes blur-text { 0% { filter: blur(0px); } 100% { filter: blur(1px); } } /* MENU SOCIAL */ .c-social__nav { display: block; position: absolute; top: 0; right: 0; bottom: 0; z-index: 1000; } .c-social__menu { position: -webkit-sticky; position: sticky; top: 33.33%; padding: 2rem .5rem .5rem; transform: rotate3d(0,1,0,90deg); opacity: 0; transition: all .3s; } .c-social__menu li { display: block; border-bottom: 1px solid; padding: 1rem .5rem; box-sizing: border-box; } .c-social__menu li:first-child { border-top: 1px solid; } .c-social__menu li a { width: 1rem; } .l-section__holder { transition: all 0s ease .3s; } .l-section__holder.viewport-overflow .c-social__menu, .l-section__holder.viewport-bottom .c-social__menu { transform: rotate3d(0,0,0,0); opacity: 1; } /* FOOTER MOBILE */ .c-fsocial__nav { display: none; } .c-fsocial__menu { text-align: center; } .c-fsocial__menu li { border-right: 1px solid #000; padding: 0 .5rem; } .c-fsocial__menu li a { width: 1rem; } @media screen and ( max-width: 600px ){ .c-mobile__lbl { left: 1rem; top: 1rem; } .c-main__nav { left: 1rem; right: calc(100% - 1rem); top: 1rem; } .c-mobile__in:checked ~ .c-header .c-main__nav { left: 1rem; right: 1rem; width: calc(100% - 2rem); top: 1rem; height: calc(100% - 2rem); } .c-main__menu { -ms-flex-line-pack: center; align-content: center; text-align: left; } .c-main__menu li { max-width: 100%; } .c-main__menu>li:nth-child(4n + 2) { transition: all .4s ease 0s; } .c-main__menu>li:nth-child(4n + 3) { transition: all .4s ease 0s; } .c-main__menu>li:nth-child(4n + 4) { transition: all .4s ease 0s; } .c-main__menu li:hover>a { transform: translate(.25rem, 0); } .c-mobile__in:checked ~ .c-header .c-main__menu>li { transform: translate(0,0); } .c-mobile__in:checked ~ .c-header .c-main__menu>li:nth-child(4n + 2){ transition: all .4s ease .3s; } .c-mobile__in:checked ~ .c-header .c-main__menu>li:nth-child(4n + 4){ transition: all .4s ease .1s; } .c-main__menu .sub-menu { position: relative; max-height: none; color: #fff; width: 100%; left: 0; right: 0; padding-top: 1rem; } .c-main__menu li:hover .sub-menu { width: 100%; left: 0; right: 0; padding-top: 1rem; } .c-main__menu li .sub-menu:before { display: none; } .c-main__menu li .sub-menu>li { padding: 1rem 0; max-width: 100%; } .c-main__menu li .sub-menu>li:last-child { padding-bottom: 0; } .c-social__nav { display: none; } .c-fsocial__nav { display: block; } } @media screen and ( max-width: 400px ){ .c-mobile__lbl { left: .5rem; top: .5rem; } .c-main__nav { left: .5rem; right: calc(100% - .5rem); top: .5rem; } .c-mobile__in:checked ~ .c-header .c-main__nav { left: .5rem; right: .5rem; width: calc(100% - 1rem); top: .5rem; height: calc(100% - 1rem); } } /* ============================================================================ MODULES ========================================================================== */ /* HEAD - FOOT */ .c-item__head, .c-item__foot { max-width: 550px; width: 100%; margin-left: auto; margin-right: auto; } /* BANNER */ .l-banner__inner { max-height: 60vh; box-sizing: border-box; -ms-flex-direction: column; flex-direction: column; -ms-flex-pack: center; justify-content: center; } .l-banner__item { -ms-flex-positive: 0; flex-grow: 0; } .cake-banner .big-container .l-banner__item, .cake-banner .container .l-banner__item { max-width: none; margin-left: 0; margin-right: 0; } .home .flex.cake-banner { justify-content: flex-end; } /* .home .l-banner__item { align-self: center; } */ /* COLS */ .cake-cols__item .inner-grid { overflow: hidden; } .cols-rect .cake-cols__item, .cols-square .cake-cols__item { background-repeat: norepeat; background-size: cover; background-position: center center; } .cols-rect .inner-grid, .cols-square .inner-grid { display: table; width: 100%; box-sizing: border-box; } .cols-rect .inner-grid:before { content: ""; display: table-cell; width: 0; padding-bottom: 50%; } .cols-square .inner-grid:before { content: ""; display: table-cell; width: 0; padding-bottom: 100%; } .cols-rect .inner-grid .inner, .cols-square .inner-grid .inner { display:table-cell; vertical-align: middle; text-align: center; } .cols-rect .cake-cols__item .inner-grid, .cols-square .cake-cols__item .inner-grid { opacity: 0; } .cols-rect .cake-cols__item .inner-grid:hover, .cols-square .cake-cols__item .inner-grid:hover { background-color: rgba(255,255,255,.75); opacity: 1; } /* GALLERY */ .c-gallery__main { padding-bottom: 50%; } .c-gallery__thumbs.flex { justify-content: center; } .c-gallery__thumbs.flex > .grid { -webkit-flex-basis: 8%; -ms-flex-preferred-size: 8%; flex-basis: 8%; } .l-gallery__main { } @media screen and ( max-width: 1050px ){ .home .l-banner__item { padding: 4rem 2rem; } } @media screen and ( max-width: 800px ){ .cake-banner .l-banner__item { padding: 4rem 1rem; } } @media screen and ( max-width: 750px ){ .cake-banner .l-banner__item { padding: 2rem 1rem; } } @media screen and ( max-width: 600px ){ .home .flex.cake-banner { justify-content: flex-end; } .home .flex.l-banner__inner { justify-content: flex-start; } .home .cake-banner .l-banner__item { padding: 1rem 1rem 0; } .c-item__head, .cake-slider.pad-horizontal-x2, .l-articles.box-x3, .l-article.box-x3, .c-item__foot { padding-left: 1rem; padding-right: 1rem; } .cake-cols.pad-horizontal-x3, .cake-cols.pad-horizontal-x2 { padding-left: 0; padding-right: 1rem; } .c-gallery__thumbs .thumb.grid { -ms-flex: 20%; flex: 20%; max-width: 20%; } } @media screen and ( max-width: 400px ){ .home .cake-banner .l-banner__item { padding: .5rem .5rem 0; } } /* ============================================================================ Helpers ========================================================================== */ /* Box elements */ .box, [class^="pad-"], [class*="pad-"], [class^="grid-"], [class*="grid-"] { box-sizing: border-box; } .box > :last-child { margin-bottom: 0; } .pad-none { padding: 0; } .margin-none { margin-bottom: 0; } /* Images replacements */ .ir { display: block; border: 0; text-indent: -999em; direction: ltr; background-color: transparent; background-repeat: no-repeat; text-align: left; } .ir br { display: none; } /* Fluid Video Embeds */ .fve-video-wrapper { position: relative; overflow: hidden; height: 0; background-color: transparent; padding-bottom: 56.25%; margin: 0.5em 0; } .fve-video-wrapper iframe, .fve-video-wrapper object, .fve-video-wrapper embed { position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; } .fve-video-wrapper a.hyperlink-image { position: relative; display: none; } .fve-video-wrapper a.hyperlink-image img { position: relative; z-index: 2; width: 100%; } .fve-video-wrapper a.hyperlink-image .fve-play-button {position: absolute; left: 35%; top: 35%; right: 35%; bottom: 35%; z-index: 3; background-color: rgba(40, 40, 40, 0.75); background-size: 100% 100%; border-radius: 10px; } .fve-video-wrapper a.hyperlink-image:hover .fve-play-button { background-color: rgba(0, 0, 0, 0.85); } /* Icons */ i, .icon, [class^="icon-"], [class*="icon-"] { font-family: "caw"; display: inline-block; position: relative; font-size: 2rem; } i:before, [class^="icon-"]:before, [class*="icon-"]:before { font-style: normal; font-weight: normal; font-size: 120%; speak: none; display: inline-block; text-decoration: inherit; width: 1em; margin-right: .2em; text-align: center; font-variant: normal; text-transform: none; line-height: 1em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } i:last-child:before, [class^="icon-"]:last-child:before, [class*=" icon-"]:last-child:before { margin-right: 0;} .icon-facebook:before { content: '\e800'; } /* '?' */ .icon-twitter:before { content: '\e803'; } /* '?' */ .icon-linkedin:before { content: '\e804'; } /* '?' */ .icon-email:before { content: '\e805'; } /* '?' */ @media screen and ( max-width: 600px ){ i, .icon, [class^="icon-"], [class*="icon-"] { font-size: 2rem; } } /* google maps */ .googlemaps { position: relative; height: 500px; height: 45vw; } .mobile .googlemaps:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; } .js-map { height: 100%;} .js-map img { max-width: none; } .js-marker { visibility: hidden;} .js-marker .info { position: fixed; top: 0; left: -9999em; visibility: hidden;} .scrollFix { overflow: hidden; display: block; max-width: 300px} .scrollFix h3 { font-size: 1rem; line-height: 1.2} @media screen and ( max-width: 600px ){ /*.googlemaps { height: 800px; height: 60vw; }*/ } /* Clearfix */ .clearfix:before, .line:before, .clearfix:after, .line:after { content: ""; display: table; } .clearfix:after, .line:after { clear: both; } /* Clears */ .clear { display: block; clear: both; overflow: hidden; } br.clear { height: 1px!important; margin-top: -1px; margin-bottom:0; } /* Fonts & Texts */ .left { text-align: left; } .right { text-align: right; } .center { text-align: center; } .justify { text-align: justify; } .lower { text-transform: lowercase; } .normal-case { text-transform: none; } .caps { text-transform: uppercase; } .nowrap { white-space: nowrap;} /* Floats & Alignements */ [class^="align-"], [class*="align-"], [class^="float-"], [class*="float-"], .aligncenter, .align-right, .align-left, .alignright, .alignleft { display: block; } .aligncenter, .centered { margin-left: auto; margin-right: auto; float: none!important; } .align-right, .alignright, .float-right { float: right; } .align-left, .alignleft, .float-left { float: left; } /* Others */ .toggle { position: fixed; top:0; left: -9999em;} .ltr { direction: ltr; } .rtl { direction: rtl; } .videoWrapper { position: relative; padding-bottom: 56.25%; height: 0; display: inline-block; } .videoWrapper iframe { position: absolute;top: 0;left: 0;height: 100%; } /* Table layouts */ .table { display: table; width:100%; table-layout: fixed; } .row { display: table-row; height: 1px; } .cell { display: table-cell; vertical-align: middle; } .expand { height: auto; } .align-top { vertical-align: top; } .align-middle { vertical-align: middle; } .align-bottom { vertical-align: bottom; } .table.hcenter:before, .table.hcenter:after { content: ""; display: table-row; height: auto; } /* Vertical aligned block */ .valign:before, .valign > .aligned, .middle:before, .middle > .aligned { display: inline-block; vertical-align: middle; } .valign > .aligned.top { vertical-align: top; } .valign > .aligned.bottom { vertical-align: bottom; } .valign > .aligned.middle { vertical-align: middle; } .valign:before, .middle:before { content: ''; width: 0; margin-left: -.3em; } .valign:before { padding-top:100%; } .middle:before { height: 100%; } /* Displays & Positionning */ .static { position: static; } .relative { position: relative; } .absolute { position: absolute; } .inline { display: inline; } .inline-block { display: inline-block; } .block { display: block; } /* Background-positionning */ .bkg-cover { background-size: cover; } .bkg-contain { background-size: contain; } .norepeat { background-repeat: no-repeat; } .repeat-x { background-repeat: repeat-x; } .repeat-y { background-repeat: repeat-y; } .right-top { background-position: right top; } .right-center { background-position: right center; } .right-bottom { background-position: right bottom; } .center-top { background-position: center top; } .center-center { background-position: center center; } .center-bottom { background-position: center bottom; } .left-top { background-position: left top; } .left-center { background-position: left center; } .left-bottom { background-position: left bottom; } /* Other */ .hidden { display: none; } /* Fluid Grid */ .grid, [class^="grid-"], [class*="grid-"], [class^="width-"], [class*="width-"] { box-sizing: border-box; } .width-5 { width: 5%; } .width-10 { width: 10%; } .width-15 { width: 15%; } .width-20 { width: 20%; } .width-25 { width: 25%; } .width-30 { width: 30%; } .width-33 { width: 33.33333%; } .width-35 { width: 35%; } .width-40 { width: 40%; } .width-45 { width: 45%; } .width-50 { width: 50%; } .width-55 { width: 55%; } .width-60 { width: 60%; } .width-65 { width: 65%; } .width-66 { width: 66.66666%; } .width-70 { width: 70%; } .width-75 { width: 75%; } .width-80 { width: 80%; } .width-85 { width: 85%; } .width-90 { width: 90%; } .width-95 { width: 95%; } .width-100 { width: 100%; } @media screen and ( max-width: 480px ){ .width-50 { display: block; width: 100%; float: none; } } [class^="width-"], [class*="width-"] { float: left; } [class^="width-"].last, [class*="width-"].last { float: none; width: auto; overflow: hidden; } [class^="width-"].cell, [class*="width-"].cell { float: none; } [class^="width-"].centered, [class*="width-"].centered { width: 100%; margin-left: auto; margin-right: auto; float: none;} .width-100 { float: none; } .width-5.centered { max-width: 5%; } .width-10.centered { max-width: 10%; } .width-15.centered { max-width: 15%; } .width-20.centered { max-width: 20%; } .width-25.centered { max-width: 25%; } .width-30.centered { max-width: 30%; } .width-33.centered { max-width: 33.33333%; } .width-35.centered { max-width: 35%; } .width-40.centered { max-width: 40%; } .width-45.centered { max-width: 45%; } .width-50.centered { max-width: 50%; } .width-55.centered { max-width: 55%; } .width-60.centered { max-width: 60%; } .width-65.centered { max-width: 65%; } .width-66.centered { max-width: 66.66666%; } .width-70.centered { max-width: 70%; } .width-75.centered { max-width: 75%; } .width-80.centered { max-width: 80%; } .width-85.centered { max-width: 85%; } .width-90.centered { max-width: 90%; } .width-95.centered { max-width: 95%; } @media screen and (max-width: 60px) { .inner > .width-5.centered { max-width: none; }} @media screen and (max-width: 120px) { .inner > .width-10.centered { max-width: none; }} @media screen and (max-width: 180px) { .inner > .width-15.centered { max-width: none; }} @media screen and (max-width: 240px) { .inner > .width-20.centered { max-width: none; }} @media screen and (max-width: 300px) { .inner > .width-25.centered { max-width: none; }} @media screen and (max-width: 360px) { .inner > .width-30.centered { max-width: none; }} @media screen and (max-width: 396px) { .inner > .width-33.centered { max-width: none; }} @media screen and (max-width: 420px) { .inner > .width-35.centered { max-width: none; }} @media screen and (max-width: 480px) { .inner > .width-40.centered { max-width: none; }} @media screen and (max-width: 540px) { .inner > .width-45.centered { max-width: none; }} @media screen and (max-width: 600px) { .inner > .width-50.centered { max-width: none; }} @media screen and (max-width: 660px) { .inner > .width-55.centered { max-width: none; }} @media screen and (max-width: 720px) { .inner > .width-60.centered { max-width: none; }} @media screen and (max-width: 780px) { .inner > .width-65.centered { max-width: none; }} @media screen and (max-width: 800px) { .inner > .width-66.centered { max-width: none; }} @media screen and (max-width: 840px) { .inner > .width-70.centered { max-width: none; }} @media screen and (max-width: 900px) { .inner > .width-75.centered { max-width: none; }} @media screen and (max-width: 960px) { .inner > .width-80.centered { max-width: none; }} @media screen and (max-width: 1020px) { .inner > .width-85.centered { max-width: none; }} @media screen and (max-width: 1080px) { .inner > .width-90.centered { max-width: none; }} @media screen and (max-width: 1140px) { .inner > .width-95.centered { max-width: none; }} .flex { display: -ms-flexbox; display: flex; -ms-flex-direction: row; flex-direction: row; } .flex-column { -ms-flex-direction: column; flex-direction: column; } .flex-row-reverse { -ms-flex-direction: row-reverse; flex-direction: row-reverse; } .flex-column-reverse { -ms-flex-direction: column-reverse; flex-direction: column-reverse; } /* !WRAP */ .custom-wrap, .flex.slow-wrap, .flex.medium-wrap, .flex.wrap { -ms-flex-wrap: wrap; flex-wrap: wrap; } .flex.nowrap { -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .flex.wrap-reverse { -ms-flex-wrap: wrap-reverse; flex-wrap: wrap-reverse; } .flex > .grid, .flex > [class^="grid-"], .flex > [class*="grid-"] { -ms-flex: 0; flex: 0; -ms-flex-positive: 1; flex-grow: 1; max-width: 100%; box-sizing: border-box; } /* !GROW */ .flex.no-grow > .grid, .flex.no-grow > [class^="grid-"], .flex.no-grow > [class*="grid-"] { -ms-flex-positive: 0; flex-grow: 0; } /* !FLEX HORIZONTAL ALIGN */ .flex.justify-start { -ms-flex-pack: start; justify-content: flex-start; } .flex.justify-end { -ms-flex-pack: end; justify-content: flex-end; } .flex.justify-center { -ms-flex-pack: center; justify-content: center; } .flex.justify-between { -ms-flex-pack: justify; justify-content: space-between; } .flex.justify-around { -ms-flex-pack: distribute; justify-content: space-around; } /* FLEX ALIGN ITEMS */ .flex.items-start { -ms-flex-align: start; align-items: flex-start; } .flex.items-end { -ms-flex-align: end; align-items: flex-end; } .flex.items-center { -ms-flex-align: center; align-items: center; } .flex.items-baseline { -ms-flex-align: baseline; align-items: baseline; } .flex.items-stretch { -ms-flex-align: stretch; align-items: stretch; } /* DEFAULT?????? */ /* FLEX ALIGN CONTENT ( FLEX HEIGHT )*/ .flex.content-start { -ms-flex-line-pack: start; align-content: flex-start; } .flex.content-end { -ms-flex-line-pack: end; align-content: flex-end; } .flex.content-center { -ms-flex-line-pack: center; align-content: center; } .flex.content-between { -ms-flex-line-pack: justify; align-content: space-between; } .flex.content-around { -ms-flex-line-pack: distribute; align-content: space-around; } .flex.content-stretch { -ms-flex-line-pack: stretch; align-content: stretch; } /* GRID ALIGN SELF */ .self-auto { -ms-flex-item-align: auto; align-self: auto; } .self-start { -ms-flex-item-align: start; align-self: flex-start; } .self-end { -ms-flex-item-align: end; align-self: flex-end; } .self-center { -ms-flex-item-align: center; align-self: center; } .self-baseline { -ms-flex-item-align: baseline; align-self: baseline; } .self-stretch { -ms-flex-item-align: stretch; align-self: stretch; } .flex > .grid { -ms-flex: auto; flex: auto; } .flex > .grid-5 { max-width: 5%; } .flex > .grid-10 { max-width: 10%; } .flex > .grid-15 { max-width: 15%; } .flex > .grid-20 { -ms-flex: 20%; flex: 20%; max-width: 20%; } .flex > .grid-25 { -ms-flex: 25%; flex: 25%; max-width: 25%; } .flex > .grid-30 { -ms-flex: 30%; flex: 30%; max-width: 30%; } .flex > .grid-33 { -ms-flex: 33.333333%; flex: 33.333333%; max-width: 33.3333%; } .flex > .grid-35 { -ms-flex: 35%; flex: 35%; max-width: 35%; } .flex > .grid-40 { -ms-flex: 40%; flex: 40%; max-width: 40%; } .flex > .grid-45 { -ms-flex: 45%; flex: 45%; max-width: 45%; } .flex > .grid-50 { -ms-flex: 50%; flex: 50%; max-width: 50%; } .flex > .grid-55 { -ms-flex: 55%; flex: 55%; max-width: 55%; } .flex > .grid-60 { -ms-flex: 60%; flex: 60%; max-width: 60%; } .flex > .grid-65 { -ms-flex: 65%; flex: 65%; max-width: 65%; } .flex > .grid-66 { -ms-flex: 66.66666%; flex: 66.66666%; max-width: 66.666%; } .flex > .grid-70 { -ms-flex: 70%; flex: 70%; max-width: 70%; } .flex > .grid-75 { -ms-flex: 75%; flex: 75%; max-width: 75%; } .flex > .grid-80 { -ms-flex: 80%; flex: 80%; max-width: 80%; } .flex > .grid-85 { -ms-flex: 85%; flex: 85%; max-width: 85%; } .flex > .grid-90 { -ms-flex: 90%; flex: 90%; max-width: 90%; } .flex > .grid-95 { -ms-flex: 95%; flex: 95%; max-width: 95%; } .flex > .grid-100 { -ms-flex: 100%; flex: 100%; max-width: 100%; } @media screen and (max-width: 1100px) { .flex.wrap > .grid, .flex.wrap > [class^="grid-"], .flex.wrap > [class*="grid-"] { max-width: 100%; } .flex.wrap > .grid-5 { -ms-flex: 3rem; flex: 3rem; } .flex.wrap > .grid-10 { -ms-flex: 3rem; flex: 3rem; } .flex.wrap > .grid-15 { -ms-flex: 9em; flex: 9em; } .flex.wrap > .grid-20 { -ms-flex: 12em; flex: 12em; } .flex.wrap > .grid-25 { -ms-flex: 15rem; flex: 15rem; } .flex.wrap > .grid-30 { -ms-flex: 18rem; flex: 18rem; } .flex.wrap > .grid-33 { -ms-flex: 20rem; flex: 20rem; } .flex.wrap > .grid-35 { -ms-flex: 21rem; flex: 21rem; } .flex.wrap > .grid-40 { -ms-flex: 24rem; flex: 24rem; } .flex.wrap > .grid-45 { -ms-flex: 27rem; flex: 27rem; } .flex.wrap > .grid-50 { -ms-flex: 30rem; flex: 30rem; } .flex.wrap > .grid-55 { -ms-flex: 33rem; flex: 33rem; } .flex.wrap > .grid-60 { -ms-flex: 36rem; flex: 36rem; } .flex.wrap > .grid-65 { -ms-flex: 39rem; flex: 39rem; } .flex.wrap > .grid-66 { -ms-flex: 40rem; flex: 40rem; } .flex.wrap > .grid-70 { -ms-flex: 42rem; flex: 42rem; } .flex.wrap > .grid-75 { -ms-flex: 45rem; flex: 45rem; } .flex.wrap > .grid-80 { -ms-flex: 48rem; flex: 48rem; } .flex.wrap > .grid-85 { -ms-flex: 51rem; flex: 51rem; } .flex.wrap > .grid-90 { -ms-flex: 54rem; flex: 54rem; } .flex.wrap > .grid-95 { -ms-flex: 57rem; flex: 57rem; } .flex.wrap > .grid-100 { -ms-flex: 60rem; flex: 60rem; } } @media screen and (max-width: 850px) { .flex.medium-wrap { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } } @media screen and (max-width: 700px) { .flex.slow-wrap { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } } /* ============================================================================ Gutenberg ========================================================================== */ figure.wp-block-image a:hover img[class^="wp-image-"] { box-shadow: 0 0 0 rgba(0, 0, 0, 0.2) !important; transition: all .3s ease 0s }