/* ================================ * Author: Jérôme De Boysère * Agency: ATYPIC / APIK * ================================ */ *, *:before, *:after { outline: none; box-sizing: border-box; } /* ================================ */ /* HTML /* ================================ */ html { font-size: 62.5%; } /* ================================ */ /* FOOTER TO BOTTOM /* ================================ */ body { /*!*min-height: 100vh;*!*/ height: auto !important; /** * Making the element behave like a flexbox container: */ /* Ye Olde 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%;*/ } /* ================================ */ /* CONTAINERS /* ================================ */ .container { padding-left: 25px; /*10px;*/ padding-right: 25px; /*10px;*/ } .container-1920 { width: 100%; max-width: 1920px; margin: 0 auto; } .container-1600 { width: 100%; max-width: 1600px; margin: 0 auto; } .container-1400 { width: 100%; max-width: 1400px; margin: 0 auto; } .container-1200 { width: 100%; max-width: 1200px; margin: 0 auto; } .container-1200 .container { padding-left: 0; padding-right: 0; } .container-1170 { width: 100%; max-width: 1170px; margin: 0 auto; } .container-1024 { width: 100%; max-width: 1024px; margin: 0 auto; } .container-1000 { width: 100%; max-width: 1000px; margin: 0 auto; } .container-960 { width: 100%; max-width: 960px; margin: 0 auto; } .container-800 { width: 100%; max-width: 800px; margin: 0 auto; } .container-600 { width: 100%; max-width: 600px; margin: 0 auto; } /* ================================ */ /* COLOR INHERIT /* ================================ */ .color-inherit, .color-inherit-children > * { color: inherit; } /* ================================ */ /* 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; } /* Menu inline */ ul.horizontal { margin: 0; padding: 0; } ul.horizontal > li { display: inline-block; margin: 0; } ul.horizontal > li:first-child { margin-left: 0 !important; } ul.horizontal > li:first-child::before { display: none; } /* Menu + arrow */ ul.horizontal.arrow > li:not(:first-child) { margin-left: 10px; } ul.menu.arrow, ul.menu.sub-arrow { margin: 0; padding-left: 0; } ul.menu.arrow, ul.menu.sub-arrow, ul.menu.sub-arrow ul { list-style: none; } ul.menu.arrow a, ul.menu.sub-arrow a { display: inline-block; position: relative; margin-left: 1em; } ul.menu.arrow .sub-menu a, ul.menu.sub-arrow .sub-menu a { padding-left: 1em; } ul.menu.arrow a::before, ul.menu.sub-arrow .sub-menu 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(-50%); } ul.menu.sub-arrow .sub-menu .current-menu-ancestor > a::before, ul.menu.sub-arrow .sub-menu .current-page-ancestor > a::before { content: "\f107"; transform: none !important; } ul.menu.arrow a:hover::before, ul.menu.sub-arrow .sub-menu a:hover::before { transform: translateY(-50%) translateX(3px); } ul.menu.sub-arrow > li > ul.sub-menu { margin-left: 0; } /* ================================ */ /* PADDING /* ================================ */ .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; } /* ================================ */ /* INPUTS /* ================================ */ textarea { resize: vertical; min-height: 100px; } input:not([type='submit']), textarea, select { border: 1px solid #cccccc; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset; background-clip: padding-box !important; transition: color 0.3s ease, background-color 0.3s ease, padding 0.3s ease, margin 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease; } input:not([type='submit']):focus, textarea:focus, select:focus { border-color: #66afe9; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(102, 175, 233, 0.6); outline: 0 none; } /* ================================ */ /* TABLE /* ================================ */ /* table { width: 100% !important; height: auto !important; } tr,td,th { width: auto !important; height: auto !important; } td,th { min-width: 50px; } */ /* ================================ */ /* CLEARFIX /* ================================ */ .cf::before, .cf::after { content: " "; display: table; } .cf::after { clear: both; } .cf { *zoom: 1; } /* ================================ */ /* FEED FACEBOOK /* ================================ */ .fb-post-message { word-wrap: break-word; } /* ================================ */ /* 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) { .table-container table th, .table-container table td { min-width: 150px; } } /* 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; } } /* ================================ */ /* EASY COPY/PASTE /* ================================ */ /* Plugin: ShiftNav */ /* .shiftnav.shiftnav-skin-light { background: url(../img/bgs/mobile.jpg) 50% 0% no-repeat; } */ /* FontAwesome */ /* .fa { 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; } */ .apk-payment-method-logos { display: inline-block; width: auto; margin: 10px 0; border: 1px solid #79839e; /*#3a3c4e;*/ padding: 10px; border-radius: 3px; text-align: center; background-color: rgba(255,255,255, 0.75); } .apk-payment-method-logos .block-title { display: block; text-align: center; margin-bottom: 5px; font-size: 14px; font-weight: bold; color: #3a3c4e; } .apk-payment-method-logos img { margin: 5px; width: auto; max-width: 45px; border-radius: 5px; border: 1px solid #79839e; }