/* Theme Name: Cake Base Author: Cake Communication 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 ========================================================================== */ body { -webkit-font-smoothing: subpixel-antialiased; } /* !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: .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; } .pad-top-none { padding-top: 0; } .pad-bottom-none { padding-bottom: 0; } .pad-left-none { padding-left: 0; } .pad-right-none { padding-right: 0; } @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; } .blanc, .focus-blanc .focus { color: #fff; } .noir, .focus-noir .focus { color: #000; } /* ============================================================================ !MODULES ========================================================================== */ /* !HEAD - FOOT */ .c-item__head, .c-item__foot { max-width: 400px; width: 100%; padding-left: 1rem; padding-right: 1rem; margin-left: auto; margin-right: auto; box-sizing: border-box; } .c-item__head :last-child { margin-bottom: 0; } /* !BANNER */ .cake-banner { -ms-flex-pack: center; justify-content: space-around; } .cake-banner.bkg-img, .cake-banner.ytplayer { overflow: hidden; position: relative; } .cake-banner .inner { -ms-flex-pack: center; justify-content: center; -ms-flex-align: center; align-items: center; margin: 0; } .cake-banner .container .c-item__head { max-width: none; } /* IMG_TXT */ .cake-txt_img .flex:nth-child(even) .c-img_txt__item-img { -ms-flex-order: 0; order: 0; } .cake-txt_img .flex:nth-child(even) .c-img_txt__item-txt { -ms-flex-order: 1; order: 1; } .cake-txt_img .flex:nth-child(odd) .c-img_txt__item-img { -ms-flex-order: 1; order: 1; } .cake-txt_img .flex:nth-child(odd) .c-img_txt__item-txt { -ms-flex-order: 0; order: 0; } .cake-txt_img .c-img_txt__item-txt .inner { max-width: 425px; } /* !SLIDER - GALLERY */ .c-slider, .slider { position: relative; overflow: hidden; width: 100%; } .slides { white-space: nowrap; display: block; width: 100%; position: relative; left: 0; } .slide { white-space: normal; display: inline-block; vertical-align: top; width: 100%; box-sizing: border-box; /*padding-bottom:40%;*/ } /* [class*='width'].slide { float: none; } .slide img { width: 100%; } .slider-desc .slide img { width: auto; } .slider-desc .slide.focus { color: inherit; } .c-slider__btn { top: 50%; margin-top: -1.25rem; left: -1.5rem; width: 1.5rem; line-height: 2.5rem; height: 2.5rem; vertical-align: middle; z-index: 1; opacity: .8; } .c-slider__btn.btn-next { left: auto; right: -1.5rem; } .c-slider__thumbs { bottom: -5rem; left: 0; z-index: 1; opacity: .8; box-sizing: border-box; transition: all .3; } .c-slider:hover .c-slider__btn.btn-prev { left: 0; } .c-slider:hover .c-slider__btn.btn-next { right: 0; } .c-slider:hover .c-slider__thumbs { bottom: 0; } */ @media screen and ( max-width: 1400px ){} @media screen and ( max-width: 1275px ){} @media screen and ( max-width: 1200px ){} @media screen and ( max-width: 900px ){} @media screen and ( max-width: 850px ){ /* !TIMELINE */ .timeline { width: 100%; margin: auto; position: relative; overflow: visible; } .timeline .slides { left: 0; } /* CALENDAR */ .c-calendar__btn .c-calendar__txt { display: none; } } @media screen and ( max-width: 750px ){ .ctn-event .inner-event p { margin-bottom: 0; display: inline-block; } .ctn-event .inner-event { font-size: inherit; } .ctn-event .title-event { display: none; } .ctn-event a { vertical-align: middle; text-align: center; } } @media screen and ( max-width: 600px ){ .c-calendar__btn { padding: .25rem; } } @media screen and ( max-width: 425px ){ .c-calendar.box-x4 { padding-left: 1rem; padding-right: 1rem; box-sizing: border-box; } .c-calendar .flex { -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; } .c-calendar .flex > .grid-15 { order: 1; -webkit-flex-basis: 6em; -ms-flex-preferred-size: 6em; flex-basis: 6em; } .c-calendar .flex > .grid-15:first-child { order: 0; } .c-calendar.grid-70 { order: 2; } } /* ============================================================================ !ARCHIVES & SINGLE ========================================================================== */ .c-cake_realisations a .c-cake_realisations__img .inner { position: absolute; width: 100%; height: 100%; opacity: 0; left: 0; top: 0; z-index: 1; background-color: rgba(0,26,58,.5); transition: all .3s; } .c-cake_realisations a .c-cake_realisations__img .inner:before { content: ''; padding-bottom: 100%; width: 0; display: table-cell; } .c-cake_realisations a:hover .c-cake_realisations__img .inner { opacity: 1; } /* ============================================================================ 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 && YTPlayer */ .ytplayer-container { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; overflow: hidden;} .ytplayer-container iframe { position: absolute; width: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%); } .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: #282828; 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: #000; background-color: rgba(0, 0, 0, 0.85); } /* Icons */ i, .icon, [class^="icon-"], [class*=" icon-"] { font-family: "cake"; display: inline-block; position: relative;} 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-twitter:before { content: '\e805'; } /* '' */ .icon-facebook:before { content: '\e808'; } /* '' */ .icon-youtube:before { content: '\f167'; } /* '' */ .icon-flickr:before { content: '\f16e'; } /* '' */ /* google maps */ .googlemaps { position: relative; height: 500px; height: 35vw; } .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-"], .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 { display: -webkit-box; display: -moz-flex; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: stretch; box-sizing: border-box; } .flex-column { -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; flex-direction: column;} .flex.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; } .flex > .grid, .flex > [class^="grid-"], .flex > [class*="grid-"] { -webkit-box-flex: 1; -moz-box-flex: 1; -ms-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; -webkit-flex-shrink: 1; -ms-flex-negative: 1; flex-shrink: 1; } .flex.no-grow > .grid, .flex.no-grow > [class^="grid-"], .flex.no-grow > [class*="grid-"] { -webkit-flex-grow: 0; flex-grow: 0; } .flex > .align-top { -ms-flex-item-align: start; align-self: flex-start; } .flex > .align-bottom { -ms-flex-item-align: end; align-self: flex-end; } .flex > .align-center { -ms-flex-item-align: center; align-self: center; } .flex > .grid { -webkit-flex-basis: auto; -ms-flex-preferred-size: auto; flex-basis: auto; } .flex > .grid-5 { -webkit-flex-basis: 5%; -ms-flex-preferred-size: 5%; flex-basis: 5%; } .flex > .grid-10 { -webkit-flex-basis: 10%; -ms-flex-preferred-size: 10%; flex-basis: 10%; } .flex > .grid-15 { -webkit-flex-basis: 15%; -ms-flex-preferred-size: 15%; flex-basis: 15%; } .flex > .grid-20 { -webkit-flex-basis: 20%; -ms-flex-preferred-size: 20%; flex-basis: 20%; } .flex > .grid-25 { -webkit-flex-basis: 25%; -ms-flex-preferred-size: 25%; flex-basis: 25%; } .flex > .grid-30 { -webkit-flex-basis: 30%; -ms-flex-preferred-size: 30%; flex-basis: 30%; } .flex > .grid-33 { -webkit-flex-basis: 33.33333%; -ms-flex-preferred-size: 33.33333%; flex-basis: 33.33333%; } .flex > .grid-35 { -webkit-flex-basis: 35%; -ms-flex-preferred-size: 35%; flex-basis: 35%; } .flex > .grid-40 { -webkit-flex-basis: 40%; -ms-flex-preferred-size: 40%; flex-basis: 40%; } .flex > .grid-45 { -webkit-flex-basis: 45%; -ms-flex-preferred-size: 45%; flex-basis: 45%; } .flex > .grid-50 { -webkit-flex-basis: 50%; -ms-flex-preferred-size: 50%; flex-basis: 50%; } .flex > .grid-55 { -webkit-flex-basis: 55%; -ms-flex-preferred-size: 55%; flex-basis: 55%; } .flex > .grid-60 { -webkit-flex-basis: 60%; -ms-flex-preferred-size: 60%; flex-basis: 60%; } .flex > .grid-65 { -webkit-flex-basis: 65%; -ms-flex-preferred-size: 65%; flex-basis: 65%; } .flex > .grid-66 { -webkit-flex-basis: 66.66666%; -ms-flex-preferred-size: 66.66666%; flex-basis: 66.66666%; } .flex > .grid-70 { -webkit-flex-basis: 70%; -ms-flex-preferred-size: 70%; flex-basis: 70%; } .flex > .grid-75 { -webkit-flex-basis: 75%; -ms-flex-preferred-size: 75%; flex-basis: 75%; } .flex > .grid-80 { -webkit-flex-basis: 80%; -ms-flex-preferred-size: 80%; flex-basis: 80%; } .flex > .grid-85 { -webkit-flex-basis: 85%; -ms-flex-preferred-size: 85%; flex-basis: 85%; } .flex > .grid-90 { -webkit-flex-basis: 90%; -ms-flex-preferred-size: 90%; flex-basis: 90%; } .flex > .grid-95 { -webkit-flex-basis: 95%; -ms-flex-preferred-size: 95%; flex-basis: 95%; } .flex > .grid-100 { -webkit-flex-basis: 100%; -ms-flex-preferred-size: 100%; flex-basis: 100%; } @media screen and (max-width: 1100px) { .flex > .grid-5 { -webkit-flex-basis: 3rem; -ms-flex-preferred-size: 3rem; flex-basis: 3rem; } .flex > .grid-10 { -webkit-flex-basis: 3rem; -ms-flex-preferred-size: 3rem; flex-basis: 3rem; } .flex > .grid-15 { -webkit-flex-basis: 9em; -ms-flex-preferred-size: 9em; flex-basis: 9em; } .flex > .grid-20 { -webkit-flex-basis: 12em; -ms-flex-preferred-size: 12em; flex-basis: 12em; } .flex > .grid-25 { -webkit-flex-basis: 15rem; -ms-flex-preferred-size: 15rem; flex-basis: 15rem; } .flex > .grid-30 { -webkit-flex-basis: 18rem; -ms-flex-preferred-size: 18rem; flex-basis: 18rem; } .flex > .grid-33 { -webkit-flex-basis: 20rem; -ms-flex-preferred-size: 20rem; flex-basis: 20rem; } .flex > .grid-35 { -webkit-flex-basis: 21rem; -ms-flex-preferred-size: 21rem; flex-basis: 21rem; } .flex > .grid-40 { -webkit-flex-basis: 24rem; -ms-flex-preferred-size: 24rem; flex-basis: 24rem; } .flex > .grid-45 { -webkit-flex-basis: 27rem; -ms-flex-preferred-size: 27rem; flex-basis: 27rem; } .flex > .grid-50 { -webkit-flex-basis: 30rem; -ms-flex-preferred-size: 30rem; flex-basis: 30rem; } .flex > .grid-55 { -webkit-flex-basis: 33rem; -ms-flex-preferred-size: 33rem; flex-basis: 33rem; } .flex > .grid-60 { -webkit-flex-basis: 36rem; -ms-flex-preferred-size: 36rem; flex-basis: 36rem; } .flex > .grid-65 { -webkit-flex-basis: 39rem; -ms-flex-preferred-size: 39rem; flex-basis: 39rem; } .flex > .grid-66 { -webkit-flex-basis: 40rem; -ms-flex-preferred-size: 40rem; flex-basis: 40rem; } .flex > .grid-70 { -webkit-flex-basis: 42rem; -ms-flex-preferred-size: 42rem; flex-basis: 42rem; } .flex > .grid-75 { -webkit-flex-basis: 45rem; -ms-flex-preferred-size: 45rem; flex-basis: 45rem; } .flex > .grid-80 { -webkit-flex-basis: 48rem; -ms-flex-preferred-size: 48rem; flex-basis: 48rem; } .flex > .grid-85 { -webkit-flex-basis: 51rem; -ms-flex-preferred-size: 51rem; flex-basis: 51rem; } .flex > .grid-90 { -webkit-flex-basis: 54rem; -ms-flex-preferred-size: 54rem; flex-basis: 54rem; } .flex > .grid-95 { -webkit-flex-basis: 57rem; -ms-flex-preferred-size: 57rem; flex-basis: 57rem; } .flex > .grid-100 { -webkit-flex-basis: 60rem; -ms-flex-preferred-size: 60rem; flex-basis: 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: 650px) { .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; } }