/* Theme Name: Cake Base Author: Cake Communication Version: 2.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%; } body { -webkit-font-smoothing: subpixel-antialiased; } 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} /* ============================================================================= !MARGIN & PADDING ========================================================================== */ 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: .5rem; } 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; } } .margin-none { margin-bottom: 0; } .margin-top-none { margin-top: 0; } .margin-bottom-none { margin-bottom: 0; } .margin-left-none { margin-left: 0; } .margin-right-none { margin-right: 0; } .pad-none { padding: 0; } .pad-top-none { padding-top: 0; } .pad-bottom-none { padding-bottom: 0; } .pad-left-none { padding-left: 0; } .pad-right-none { padding-right: 0; } /* ============================================================================= !COLORS ========================================================================== */ .bkg-blanc { background-color: #fff; } .bkg-noir { background-color: #000; } .blanc, .focus-blanc .focus { color: #fff; } .noir, .focus-noir .focus { color: #000; } /* ============================================================================ !HELPERS ========================================================================== */ /* 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%; } /* !BOX ELEMENTS */ .box, [class^="pad-"], [class*="pad-"], [class^="width-"], [class*="width-"] [class^="grid-"], [class*="grid-"] { box-sizing: border-box; } .box > :last-child { margin-bottom: 0; } /* 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-"], .align-center, .aligncenter, .align-right, .align-left, .alignright, .alignleft { display: block; } .align-center, .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-parallaxe { background-attachment: fixed; } .bkg-initial { background-size: initial; } .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 BOX ========================================================================== */ .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: 1200px) { .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: 9rem; flex: 9rem; } .flex.wrap > .grid-20 { -ms-flex: 12rem; flex: 12rem; } .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: 900px) { .flex.medium-wrap > .grid, .flex.medium-wrap > [class^="grid-"], .flex.medium-wrap > [class*="grid-"] { max-width: 100%; } .flex.medium-wrap > .grid-5 { -ms-flex: 2.25rem; flex: 2.25rem; } .flex.medium-wrap > .grid-10 { -ms-flex: 4.5rem; flex: 4.5rem; } .flex.medium-wrap > .grid-15 { -ms-flex: 6.75rem; flex: 6.75rem; } .flex.medium-wrap > .grid-20 { -ms-flex: 9rem; flex: 9rem; } .flex.medium-wrap > .grid-25 { -ms-flex: 11.25rem; flex: 11.25rem; } .flex.medium-wrap > .grid-30 { -ms-flex: 13.5rem; flex: 13.5rem; } .flex.medium-wrap > .grid-33 { -ms-flex: 15rem; flex: 15rem; } .flex.medium-wrap > .grid-35 { -ms-flex: 15.75rem; flex: 15.75rem; } .flex.medium-wrap > .grid-40 { -ms-flex: 18rem; flex: 18rem; } .flex.medium-wrap > .grid-45 { -ms-flex: 20.25rem; flex: 20.25rem; } .flex.medium-wrap > .grid-50 { -ms-flex: 22.5rem; flex: 22.5rem; } .flex.medium-wrap > .grid-55 { -ms-flex: 24.75rem; flex: 24.75rem; } .flex.medium-wrap > .grid-60 { -ms-flex: 27rem; flex: 27rem; } .flex.medium-wrap > .grid-65 { -ms-flex: 29.25rem; flex: 29.25rem; } .flex.medium-wrap > .grid-66 { -ms-flex: 31.5rem; flex: 31.5rem; } .flex.medium-wrap > .grid-70 { -ms-flex: 42rem; flex: 42rem; } .flex.medium-wrap > .grid-75 { -ms-flex: 33.75rem; flex: 33.75rem; } .flex.medium-wrap > .grid-80 { -ms-flex: 36rem; flex: 36rem; } .flex.medium-wrap > .grid-85 { -ms-flex: 42.75rem; flex: 42.75rem; } .flex.medium-wrap > .grid-90 { -ms-flex: 40.5rem; flex: 40.5rem; } .flex.medium-wrap > .grid-95 { -ms-flex: 42.75rem; flex: 42.75rem; } .flex.medium-wrap > .grid-100 { -ms-flex: 45rem; flex: 45rem; } } @media screen and (max-width: 800px) { .flex.slow-wrap > .grid, .flex.slow-wrap > [class^="grid-"], .flex.slow-wrap > [class*="grid-"] { max-width: 100%; } .flex.slow-wrap > .min-5 { -ms-flex: 2rem; flex: 2rem; } .flex.slow-wrap > .min-10 { -ms-flex: 4rem; flex: 4rem; } .flex.slow-wrap > .min-15 { -ms-flex: 6rem; flex: 6rem; } .flex.slow-wrap > .min-20 { -ms-flex: 8rem; flex: 8rem; } .flex.slow-wrap > .min-25 { -ms-flex: 10rem; flex: 10rem; } .flex.slow-wrap > .min-30 { -ms-flex: 12rem; flex: 12rem; } .flex.slow-wrap > .min-33 { -ms-flex: 13.33rem; flex: 13.33rem; } .flex.slow-wrap > .min-35 { -ms-flex: 14rem; flex: 14rem; } .flex.slow-wrap > .min-40 { -ms-flex: 16rem; flex: 16rem; } .flex.slow-wrap > .min-45 { -ms-flex: 18rem; flex: 18rem; } .flex.slow-wrap > .min-50 { -ms-flex: 20rem; flex: 20rem; } .flex.slow-wrap > .min-55 { -ms-flex: 22rem; flex: 22rem; } .flex.slow-wrap > .min-60 { -ms-flex: 24rem; flex: 24rem; } .flex.slow-wrap > .min-65 { -ms-flex: 26rem; flex: 26rem; } .flex.slow-wrap > .min-66 { -ms-flex: 26.27rem; flex: 26.27rem; } .flex.slow-wrap > .min-70 { -ms-flex: 28rem; flex: 28rem; } .flex.slow-wrap > .min-75 { -ms-flex: 30rem; flex: 30rem; } .flex.slow-wrap > .min-80 { -ms-flex: 32rem; flex: 32rem; } .flex.slow-wrap > .min-85 { -ms-flex: 34rem; flex: 34rem; } .flex.slow-wrap > .min-90 { -ms-flex: 36rem; flex: 36rem; } .flex.slow-wrap > .min-95 { -ms-flex: 38rem; flex: 38rem; } .flex.slow-wrap > .min-100 { -ms-flex: 40rem; flex: 40rem; } } /* .flex > .grid { -ms-flex: auto; flex: auto; } .flex > .grid-5 { -ms-flex: 5%; flex: 5%; max-width: 5%; } .flex > .grid-10 { -ms-flex: 10%; flex: 10%; max-width: 10%; } .flex > .grid-15 { -ms-flex: 15%; flex: 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%; 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%; } .flex > .grid { -ms-flex: auto; flex: auto; } .flex > .grid-5 { -ms-flex: 5%; flex: 5%; max-width: 5%; } .flex > .grid-10 { -ms-flex: 10%; flex: 10%; max-width: 10%;} .flex > .grid-15 { -ms-flex: 15%; flex: 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.333333%; } .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%; 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.66666%; } .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: 880px) { .flex.medium-wrap > .grid-5 { -ms-flex: 2.2rem; flex: 2.2rem; } .flex.medium-wrap > .grid-10 { -ms-flex: 4.4rem; flex: 4.4rem; } .flex.medium-wrap > .grid-15 { -ms-flex: 6.6rem; flex: 6.6rem; } .flex.medium-wrap > .grid-20 { -ms-flex: 8.8rem; flex: 8.8rem; } .flex.medium-wrap > .grid-25 { -ms-flex: 11rem; flex: 11rem; } .flex.medium-wrap > .grid-30 { -ms-flex: 13.2rem; flex: 13.2rem; } .flex.medium-wrap > .grid-33 { -ms-flex: 14.67rem; flex: 14.67rem; } .flex.medium-wrap > .grid-35 { -ms-flex: 15.4rem; flex: 15.4rem; } .flex.medium-wrap > .grid-40 { -ms-flex: 17.6rem; flex: 17.6rem; } .flex.medium-wrap > .grid-45 { -ms-flex: 19.8rem; flex: 19.8rem; } .flex.medium-wrap > .grid-50 { -ms-flex: 22rem; flex: 22rem; } .flex.medium-wrap > .grid-55 { -ms-flex: 24.2rem; flex: 24.2rem; } .flex.medium-wrap > .grid-60 { -ms-flex: 26.4rem; flex: 26.4rem; } .flex.medium-wrap > .grid-65 { -ms-flex: 28.6rem; flex: 28.6rem; } .flex.medium-wrap > .grid-66 { -ms-flex: 29.33rem; flex: 29.33rem; } .flex.medium-wrap > .grid-70 { -ms-flex: 30.8rem; flex: 30.8rem; } .flex.medium-wrap > .grid-75 { -ms-flex: 33rem; flex: 33rem; } .flex.medium-wrap > .grid-80 { -ms-flex: 35.2rem; flex: 35.2rem; } .flex.medium-wrap > .grid-85 { -ms-flex: 37.4rem; flex: 37.4rem; } .flex.medium-wrap > .grid-90 { -ms-flex: 39.6rem; flex: 39.6rem; } .flex.medium-wrap > .grid-95 { -ms-flex: 41.8rem; flex: 41.8rem; } .flex.medium-wrap > .grid-100 { -ms-flex: 44rem; flex: 44rem; } } /* @media screen and (max-width: 860px) { .flex.medium-wrap > .grid-5 { -ms-flex: 3rem; flex: 3rem; } .flex.medium-wrap > .grid-10 { -ms-flex: 3rem; flex: 3rem; } .flex.medium-wrap > .grid-15 { -ms-flex: 9em; flex: 9em; } .flex.medium-wrap > .grid-20 { -ms-flex: 12em; flex: 12em; } .flex.medium-wrap > .grid-25 { -ms-flex: 15rem; flex: 15rem; } .flex.medium-wrap > .grid-30 { -ms-flex: 18rem; flex: 18rem; } .flex.medium-wrap > .grid-33 { -ms-flex: 20rem; flex: 20rem; } .flex.medium-wrap > .grid-35 { -ms-flex: 21rem; flex: 21rem; } .flex.medium-wrap > .grid-40 { -ms-flex: 24rem; flex: 24rem; } .flex.medium-wrap > .grid-45 { -ms-flex: 27rem; flex: 27rem; } .flex.medium-wrap > .grid-50 { -ms-flex: 30rem; flex: 30rem; } .flex.medium-wrap > .grid-55 { -ms-flex: 33rem; flex: 33rem; } .flex.medium-wrap > .grid-60 { -ms-flex: 36rem; flex: 36rem; } .flex.medium-wrap > .grid-65 { -ms-flex: 39rem; flex: 39rem; } .flex.medium-wrap > .grid-66 { -ms-flex: 40rem; flex: 40rem; } .flex.medium-wrap > .grid-70 { -ms-flex: 42rem; flex: 42rem; } .flex.medium-wrap > .grid-75 { -ms-flex: 45rem; flex: 45rem; } .flex.medium-wrap > .grid-80 { -ms-flex: 48rem; flex: 48rem; } .flex.medium-wrap > .grid-85 { -ms-flex: 51rem; flex: 51rem; } .flex.medium-wrap > .grid-90 { -ms-flex: 54rem; flex: 54rem; } .flex.medium-wrap > .grid-95 { -ms-flex: 57rem; flex: 57rem; } .flex.medium-wrap > .grid-100 { -ms-flex: 43rem; flex: 60rem; } } @media screen and (max-width: 1100px) { .flex.slow-wrap > .grid-5 { -ms-flex: 3rem; flex: 3rem; } .flex.slow-wrap > .grid-10 { -ms-flex: 3rem; flex: 3rem; } .flex.slow-wrap > .grid-15 { -ms-flex: 9em; flex: 9em; } .flex.slow-wrap > .grid-20 { -ms-flex: 12em; flex: 12em; } .flex.slow-wrap > .grid-25 { -ms-flex: 15rem; flex: 15rem; } .flex.slow-wrap > .grid-30 { -ms-flex: 18rem; flex: 18rem; } .flex.slow-wrap > .grid-33 { -ms-flex: 20rem; flex: 20rem; } .flex.slow-wrap > .grid-35 { -ms-flex: 21rem; flex: 21rem; } .flex.slow-wrap > .grid-40 { -ms-flex: 24rem; flex: 24rem; } .flex.slow-wrap > .grid-45 { -ms-flex: 27rem; flex: 27rem; } .flex.slow-wrap > .grid-50 { -ms-flex: 30rem; flex: 30rem; } .flex.slow-wrap > .grid-55 { -ms-flex: 33rem; flex: 33rem; } .flex.slow-wrap > .grid-60 { -ms-flex: 36rem; flex: 36rem; } .flex.slow-wrap > .grid-65 { -ms-flex: 39rem; flex: 39rem; } .flex.slow-wrap > .grid-66 { -ms-flex: 40rem; flex: 40rem; } .flex.slow-wrap > .grid-70 { -ms-flex: 42rem; flex: 42rem; } .flex.slow-wrap > .grid-75 { -ms-flex: 45rem; flex: 45rem; } .flex.slow-wrap > .grid-80 { -ms-flex: 48rem; flex: 48rem; } .flex.slow-wrap > .grid-85 { -ms-flex: 51rem; flex: 51rem; } .flex.slow-wrap > .grid-90 { -ms-flex: 54rem; flex: 54rem; } .flex.slow-wrap > .grid-95 { -ms-flex: 57rem; flex: 57rem; } .flex.slow-wrap > .grid-100 { -ms-flex: 60rem; flex: 60rem; } } @media screen and (max-width: 1000px) { .flex.slow-wrap > .grid, .flex.slow-wrap > [class^="grid-"], .flex.slow-wrap > [class*="grid-"] { max-width: none; } .flex.slow-wrap > .min-5 { -ms-flex: 2.5rem; flex: 2.5rem; } .flex.slow-wrap > .min-10 { -ms-flex: 5rem; flex: 5rem; } .flex.slow-wrap > .min-15 { -ms-flex: 7.5rem; flex: 7.5rem; } .flex.slow-wrap > .min-20 { -ms-flex: 10rem; flex: 10rem; } .flex.slow-wrap > .min-25 { -ms-flex: 12.5rem; flex: 12.5rem; } .flex.slow-wrap > .min-30 { -ms-flex: 15rem; flex: 15rem; } .flex.slow-wrap > .min-33 { -ms-flex: 16.67rem; flex: 16.67rem; } .flex.slow-wrap > .min-35 { -ms-flex: 17.5rem; flex: 17.5rem; } .flex.slow-wrap > .min-40 { -ms-flex: 20rem; flex: 20rem; } .flex.slow-wrap > .min-45 { -ms-flex: 22.5rem; flex: 22.5rem; } .flex.slow-wrap > .min-50 { -ms-flex: 25rem; flex: 25rem; } .flex.slow-wrap > .min-55 { -ms-flex: 27.5rem; flex: 27.5rem; } .flex.slow-wrap > .min-60 { -ms-flex: 30rem; flex: 30rem; } .flex.slow-wrap > .min-65 { -ms-flex: 32.5rem; flex: 32.5rem; } .flex.slow-wrap > .min-66 { -ms-flex: 33.333rem; flex: 33.333rem; } .flex.slow-wrap > .min-70 { -ms-flex: 35rem; flex: 35rem; } .flex.slow-wrap > .min-75 { -ms-flex: 37.5rem; flex: 37.5rem; } .flex.slow-wrap > .min-80 { -ms-flex: 40rem; flex: 40rem; } .flex.slow-wrap > .min-85 { -ms-flex: 42.5rem; flex: 42.5rem; } .flex.slow-wrap > .min-90 { -ms-flex: 45rem; flex: 45rem; } .flex.slow-wrap > .min-95 { -ms-flex: 47.5rem; flex: 47.5rem; } .flex.slow-wrap > .min-100 { -ms-flex: 50rem; flex: 50rem; } } */