/* ================================ * Author: Jerome De Boysere * Agency: ATYPIC * ================================ */ *, *:before, *:after { outline: none; box-sizing: border-box; } /* ================================ */ /* HTML /* ================================ */ html { font-size: 62.5%; } /* ================================ */ /* FOOTER TO BOTTOM /* ================================ */ body { min-height: 100vh; /** * Making the element behave like a flexbox container: */ /* Old Flexbox for Webkit */ display: -webkit-box; /* Tweener flexbox */ display: -ms-flexbox; /* Prefixed "new flexbox" */ display: -webkit-flex; /* unprefixed standard "new flexbox" version */ display: flex; /** * Making the things inside line up vertically */ /* Your grandparents flexbox for Webkit */ -webkit-box-orient: vertical; /* Prefixed new syntax: */ -webkit-flex-direction: column; /* Same syntax for weird IE tweener */ -ms-flex-direction: column; /* unprefixed new syntax */ flex-direction: column; } #main { /* prefixed webkit syntax */ -webkit-flex: 1 0 auto; /* IE10, ugh */ -ms-flex: 1 0 auto; /* Unprefixed */ flex: 1 0 auto; } .flexboxtweener, .flexboxtweener > body { /*height: 100%;*/ min-height: 100%; /* IE11 */ } /* ================================ */ /* CONTAINERS /* ================================ */ /* Usage: width 100% + container centered + safe padding:
width 100% + container centered + safe padding + max-width 1200px:
width 100% + container NOT centered + safe padding+ max-width 1200px:
*/ .container { width: 100%; padding-left: 10px; padding-right: 10px; margin: 0 auto; } .container-1920 { width: 100%; max-width: 1920px; padding-left: 10px; padding-right: 10px; } .container-1600 { width: 100%; max-width: 1600px; padding-left: 10px; padding-right: 10px; } .container-1400 { width: 100%; max-width: 1400px; padding-left: 10px; padding-right: 10px; } .container-1200 { width: 100%; max-width: 1200px; padding-left: 10px; padding-right: 10px; } .container-1170 { width: 100%; max-width: 1170px; padding-left: 10px; padding-right: 10px; } .container-1024 { width: 100%; max-width: 1024px; padding-left: 10px; padding-right: 10px; } .container-960 { width: 100%; max-width: 960px; padding-left: 10px; padding-right: 10px; } .container-900 { width: 100%; max-width: 900px; padding-left: 10px; padding-right: 10px; } .container-800 { width: 100%; max-width: 800px; padding-left: 10px; padding-right: 10px; } .container-600 { width: 100%; max-width: 600px; padding-left: 10px; padding-right: 10px; } .container-400 { width: 100%; max-width: 400px; padding-left: 10px; padding-right: 10px; } /* ================================ */ /* VIDEO CONTAINER /* ================================ */ /*.container-fa { text-align: center; } .container-fa a { display: inline-block; position: relative; } .container-fa a img { display: block; } .container-fa a .fa { color: #CC181E; content: "\f16a"; display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 3em; position: absolute; left: 50%; top: 50%; transform: translate3d(-50%, -50%, 0); }*/ /* ================================ */ /* PADDING /* ================================ */ .padding-0 { padding: 0 !important; } .padding-5 { padding: 10px; } .padding-10 { padding: 10px; } .padding-20 { padding: 20px; } .padding-30 { padding: 30px; } .padding-40 { padding: 40px; } .padding-50 { padding: 50px; } .padding-60 { padding: 60px; } .padding-70 { padding: 70px; } .padding-80 { padding: 80px; } .padding-90 { padding: 90px; } .padding-100 { padding: 100px; } .padding-tb-0 { padding-top: 0 !important; padding-bottom: 0 !important; } .padding-lr-0 { padding-left: 0 !important; padding-right: 0 !important; } .padding-t-0 { padding-top: 0 !important; } .padding-b-0 { padding-bottom: 0 !important; } .padding-l-0 { padding-left: 0 !important; } .padding-r-0 { padding-right: 0 !important; } /* ================================ */ /* FONT WEIGHT /* ================================ */ .thin { font-weight: 100; } .extralight { font-weight: 200; } .light { font-weight: 300; } .regular { font-weight: 400; } .medium { font-weight: 500; } .semibold { font-weight: 600; } .bold, strong, b { font-weight: 700; } .extrabold { font-weight: 800; } .heavy { font-weight: 900; } /* ================================ */ /* FONT-SIZE /* ================================ */ .fontsize1-2em { font-size: 1.2em; } .fontsize1-4em { font-size: 1.4em; } .fontsize1-6em { font-size: 1.6em; } .fontsize1-8em { font-size: 1.8em; } .fontsize2em { font-size: 2em; } .fontsize2-2em { font-size: 2.2em; } .fontsize2-4em { font-size: 2.4em; } .fontsize2-6em { font-size: 2.6em; } .fontsize2-8em { font-size: 2.9em; } .fontsize3em { font-size: 3em; } /* @TODO: remove ? */ /*.fontsize6 { font-size: 0.6rem; } .fontsize8 { font-size: 0.8rem; } .fontsize10 { font-size: 1.0rem; } .fontsize12 { font-size: 1.2rem; } .fontsize14 { font-size: 1.4rem; } .fontsize16 { font-size: 1.6rem; } .fontsize18 { font-size: 1.8rem; } .fontsize20 { font-size: 2.0rem; } .fontsize22 { font-size: 2.2rem; } .fontsize24 { font-size: 2.4rem; } .fontsize26 { font-size: 2.6rem; } .fontsize28 { font-size: 2.8rem; } .fontsize30 { font-size: 3.0rem; } .fontsize32 { font-size: 3.2rem; } .fontsize34 { font-size: 3.4rem; } .fontsize36 { font-size: 3.6rem; } .fontsize38 { font-size: 3.8rem; } .fontsize40 { font-size: 4.0rem; } .fontsize42 { font-size: 4.2rem; } .fontsize44 { font-size: 4.4rem; } .fontsize46 { font-size: 4.6rem; } .fontsize48 { font-size: 4.8rem; } .fontsize50 { font-size: 5.0rem; }*/ /* ================================ */ /* HEADING /* ================================ */ .uk-h1, .uk-h2, .uk-h3, .uk-h4, .uk-h5, .uk-h6 { margin: 0 0 15px 0; } * + .uk-h1, * + .uk-h2, * + .uk-h3, * + .uk-h4, * + .uk-h5, * + .uk-h6 { margin-top: 25px; } h1:last-child, h2:last-child, h3:last-child, h4:last-child, h5:last-child, .h6:last-child, .uk-h1:last-child, .uk-h2:last-child, .uk-h3:last-child, .uk-h4:last-child, .uk-h5:last-child, .uk-h6:last-child, p:last-child, ul:last-child { margin-bottom: 0; } /* ================================ */ /* IMAGES /* ================================ */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { img[src$=".svg"] { width: 100%; /* IE11 */ } } /* ================================ */ /* MISCELLANEOUS /* ================================ */ em, i { color: inherit; } .color-inherit, .color-inherit-children > * { color: inherit; } .ellipsis { display: block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } /* ================================ */ /* LINKS /* ================================ */ a[href$='.pdf']::after { content: "\f1c1"; display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: .8em; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; margin-right: 4px; margin-left: 6px; } /* ================================ */ /* LINKS / BUTTONS /* ================================ */ a, .uk-link, button, .uk-button, input[type="button"], input[type="submit"] { /* border-radius: 0; transition: all 0.3s ease;*/ } /* ================================ */ /* INPUTS /* ================================ */ .uk-form select, .uk-form textarea, .uk-form input:not([type]), .uk-form input[type="text"], .uk-form input[type="password"], .uk-form input[type="datetime"], .uk-form input[type="datetime-local"], .uk-form input[type="date"], .uk-form input[type="month"], .uk-form input[type="time"], .uk-form input[type="week"], .uk-form input[type="number"], .uk-form input[type="email"], .uk-form input[type="url"], .uk-form input[type="search"], .uk-form input[type="tel"], .uk-form input[type="color"] { color: #666; } textarea { resize: vertical; width: 100%; min-height: 100px; } select { min-width: 50px; line-height: 21px; padding-right: 40px !important; background-image: url(form/select-arrow.png) !important; background-repeat: no-repeat !important; background-position: 100% 50% !important; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; } select::-ms-expand { display: none; /* IE10: Remove arrow */ } input[type="file"] { max-width: 100%; } :disabled, [disabled] { cursor: default !important; opacity: .7 !important; } .uk-button { font-size: inherit; border: 0; text-shadow: none; } /* To remove ? type submit 'uk-button' have not cursor .uk-button:not(a) { cursor: auto !important; }*/ .uk-button:disabled, .uk-button[disabled] { cursor: default !important; opacity: .7 !important; color: #fff !important; background: rgba(0,0,0,.3) !important; text-shadow: none !important; } /* To remove ? We lost large, small and mini style .uk-button-mini, .uk-button-small, .uk-button-large { min-height: 0; line-height: inherit; }*/ .uk-search-field, .uk-search-field:focus, .uk-search.uk-active .uk-search-field { width: inherit; } .uk-search.flip .uk-search-field{ padding-right: 2.6em !important; } .uk-search:not(.flip) .uk-search-field{ padding-left: 2.6em !important; } .uk-search::before { top: 50%; left: 5px; transform: translateY(-50%); } .uk-search.flip::before { left: auto; right: 5px; } /* ================================ */ /* DROPDOWN /* ================================ */ .uk-dropdown { font-size: inherit; border: 0; } /* ================================ */ /* TABLE /* ================================ */ table[data-responsive] { width: 100% !important; height: auto !important; overflow: hidden; opacity: 0; transition: opacity .5s .2s; } table[data-responsive] tr, table[data-responsive] td, table[data-responsive] th { width: auto !important; height: auto !important; } table[data-responsive] td, table[data-responsive] th { min-width: 50px; } html.domready .uk-overflow-container table[data-responsive] { opacity: 1; } .uk-overflow-container[data-table-scrollable] { margin-bottom: 35px; } .uk-overflow-container[data-table-scrollable]::after { content: 'Scroll →'; font-size: 9px; text-transform: uppercase; font-family: arial; position: absolute; margin-top: 5px; } /* ================================ */ /* IFRAME /* ================================ */ .uk-overflow-container.tm-iframe-container { position: relative; z-index: 1; } .uk-overflow-container iframe { opacity: 0; transition: opacity .5s .2s; } html.loaded .uk-overflow-container iframe { opacity: 1; } .uk-overflow-container .fa.tm-iframe-loader { color: #555; position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); z-index: -1; margin-left: -.75em; margin-top: -.75em; } /* ================================ */ /* PANEL BOX /* ================================ */ .uk-panel-box { color: inherit; } /* ================================ */ /* HEADER /* ================================ */ #header { width: 100% !important; } #header.uk-active { box-shadow: 0 0 20px rgba(0,0,0,.2); } /* ================================ */ /* OFFCANVAS /* ================================ */ .uk-offcanvas { background: rgba(0,0,0,.5); } /* ================================ */ /* MENUS /* ================================ */ /* Menu with floating sub-menus */ /* Usage: */ ul.menu-has-floating-sub-menu, ul.menu-has-floating-sub-menu ul { margin: 0; padding: 0; list-style: none; } ul.menu-has-floating-sub-menu li { position: relative; } ul.menu-has-floating-sub-menu > li > ul { font-size: .9em; } ul.menu-has-floating-sub-menu li .sub-menu { list-style: none; position: absolute; background: #fff; padding-left: 0; padding-top: 10px; padding: 5px; top: 125%; left: 0; opacity: 0; visibility: hidden; transition: opacity .15s ease-out, visibility .15s ease-out, transform .25s ease-out; transition-delay: .125s; transform: translateY(10px); word-break: keep-all; white-space: nowrap; } ul.menu-has-floating-sub-menu li .sub-menu, .uk-dropdown { border-top: 5px #e9e9e9 solid; box-shadow: 0 10px 20px rgba(0,0,0,0.09), 0 6px 6px rgba(0,0,0,0.12); border-radius: 0 0 3px 3px; overflow: hidden; background: #fff; } .uk-nav-dropdown > li > a { color: #666; } .uk-nav-dropdown > li > a:focus, .uk-nav-dropdown > li > a:hover, ul.menu-has-floating-sub-menu li .sub-menu a:hover { color: #333; /*background: rgba(0,0,0,.05);*/ } .uk-tab-responsive .uk-dropdown { font-size: .9em; border-top-width: 3px; } .uk-tab-responsive .uk-dropdown li:not(:first-child) { border-top: 1px rgba(0,0,0,.08) solid; } ul.menu-has-floating-sub-menu li .sub-menu .sub-menu { left: 102%; top: -50%; border-top: 0; transform: translateX(10px); } ul.menu-has-floating-sub-menu li:hover > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0s; } ul.menu-has-floating-sub-menu .sub-menu a { display: block; padding: 5px 10px; } ul.menu-has-floating-sub-menu li.menu-item-has-children > a::after, ul.menu-has-floating-sub-menu li.menu-item-has-children > .tm-nolink::after { content: '\f107'; display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; margin-left: 7px; } ul.menu-has-floating-sub-menu .sub-menu li.menu-item-has-children > .tm-nolink { padding-right: 25px; } ul.menu-has-floating-sub-menu .sub-menu li.menu-item-has-children > .tm-nolink::after { content: '\f105'; display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: 14px; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: absolute; right: 5px; top: 50%; transform: translateY(-50%); } /* Menu with arrows */ /* Usage: */ ul.menu-has-arrow, ul.menu-has-arrow ul { margin: 0; padding: 5px 0 10px 15px; list-style: none; } ul.sub-menu-has-arrow, ul.sub-menu-has-arrow ul { margin: 0; padding: 5px 0 10px 15px; list-style: none; } ul.menu-has-arrow a, ul.sub-menu-has-arrow a { display: inline-block; position: relative; /*margin-left: 1em;*/ } ul.sub-menu-has-arrow .sub-menu a, ul.sub-menu-has-arrow .children a { padding-left: 1em; } ul.menu-has-arrow > li > a::before, ul.sub-menu-has-arrow .sub-menu a::before, ul.sub-menu-has-arrow .children a::before { content: "\f105"; display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: transform .2s ease; position: absolute; top: 50%; margin-left: -1em; transform: translateY(-55%); } ul.sub-menu-has-arrow .sub-menu .current-menu-ancestor > a::before, ul.sub-menu-has-arrow .sub-menu .current-page-ancestor > a::before, ul.sub-menu-has-arrow .children .current-menu-ancestor > a::before, ul.sub-menu-has-arrow .children .current-page-ancestor > a::before { content: "\f107"; transform: none !important; } ul.menu-has-arrow a:hover::before, ul.sub-menu-has-arrow .sub-menu a:hover::before, ul.sub-menu-has-arrow .children a:hover::before { transform: translateY(-55%) translateX(3px); } ul.sub-menu-has-arrow > li > ul.sub-menu ul.sub-menu-has-arrow > li > ul.children { margin-left: 0; } /*ul.horizontal.menu-has-arrow > li:not(:first-child) { margin-left: 10px; }*/ /*ul.uk-nav.menu > li > a { padding-left: 0; padding-right: 0; }*/ .uk-nav .sub-menu { padding-left: 30px; } .uk-nav .sub-menu a { padding: 4px 0; } .uk-nav > li > .sub-menu { font-size: .95em; } .uk-subnav, .uk-subnav > * { margin-top: 0; margin-bottom: 0; } /* ================================ */ /* CLEARFIX /* ================================ */ .cf::before, .cf::after { content: " "; display: table; } .cf::after { clear: both; } .cf { *zoom: 1; } /* ================================ */ /* BACK TO TOP /* ================================ */ #backtotop { position: fixed; z-index: 500; bottom: 60px; right: 60px; opacity: 0; visibility: hidden; transform: scale(.8); } #backtotop { position: fixed; bottom: 40px; right: 60px; opacity: 0; visibility: hidden; transform: translateY(100%); transition: opacity .15s ease-out, visibility .15s ease-out, transform .25s ease-out; } #backtotop .fa-stack-1x { color: #fff; } html.show-backtotop #backtotop { opacity: 1; visibility: visible; transform: translateY(0); } /* ================================ */ /* POWERED /* ================================ */ #powered { font-family: arial; font-size: 10px; text-transform: uppercase; padding: 5px; } #powered, #powered a { color: #999 !important; } /* ================================ */ /* RESPONSIVE /* ================================ */ /* LARGE - Desktop and smaller (< 1200) */ @media (max-width : 1219px) { .padding-50 { padding: 25px; } .padding-60 { padding: 30px; } .padding-70 { padding: 35px; } .padding-80 { padding: 40px; } .padding-90 { padding: 45px; } .padding-100 { padding: 50px; } } /* MEDIUM - Tablet and smaller (< 960) */ @media (max-width : 959px) { } /* SMALL - Phone landscape and smaller (< 767) */ @media (max-width : 767px) { .padding-10, .padding-20, .padding-30, .padding-40, .padding-50, .padding-60, .padding-70, .padding-80, .padding-90, .padding-100 { padding: 10px; } #backtotop { bottom: 20px; right: 30px; } .uk-tab-responsive .uk-dropdown { width: 100%; } } /* X-SMALL - Very small screens (< 479) */ @media (max-width : 479px) { }