<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/zayncollege/pen/QpYmLE?depth=everything&order=popularity&page=65&q=pack&show_forks=false" />
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>fun Stories</title>
<link rel="apple-touch-icon" href="https://www.rockol.it/img/foto/upload/googleplaymusic.jpg">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-title" content="Google Stories">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<link href="https://fonts.googleapis.com/css?family=Comfortaa|Cormorant+Garamond|Poiret+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Megrim|Poiret+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Concert+One|Fredoka+One|Luckiest+Guy|Permanent+Marker|Rock+Salt" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Cinzel+Decorative|Concert+One|Fredoka+One|Luckiest+Guy|Permanent+Marker|Rock+Salt" rel="stylesheet">
<link rel='stylesheet prefetch' href='//fonts.googleapis.com/icon?family=Material+Icons'>
<style class="cp-pen-styles">
@import "https://fonts.googleapis.com/css?family=Roboto:300,400,500,700";
*, :before, :after {
box-sizing: inherit;
}
header, footer, main, section, aside, nav {
display: block;
}
html, body {
box-sizing: border-box;
}
body {
margin: 0;
min-height: 100vh;
font-family: 'Comfortaa', cursive;
background: #EEE;
}
.btn, .btn-round {
cursor: pointer;
}
.btn-round {
border-radius: 50%;
}
.flex, .flex-wrap, .flex-left, .flex-right, .flex-center, .flex-between {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.flex-wrap {
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.flex-left {
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.flex-right {
-webkit-box-pack: end;
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.flex-inline {
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
}
.flex-center {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.flex-between {
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
.align-center {
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
body {
padding-top: 64px;
}
button, input {
background: transparent;
border: none;
outline: none;
}
.ripple {
position: relative;
overflow: hidden;
transform: translateZ(0);
}
.ripple .rippling {
width: 5px;
height: 5px;
background: #FFF;
border-radius: 50%;
position: absolute;
opacity: .4;
pointer-events: none;
transform: translate3d(-50%, -50%, 0);
}
.btn, .btn-round {
cursor: pointer;
}
.btn-round {
border-radius: 100%;
}
header {
position: fixed;
font-family: 'Comfortaa', cursive;
z-index: 50;
top: 0;
right: 0;
height: 64px;
background: #f857a6; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #f857a6, #ff5858); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #f857a6, #ff5858); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
width: 100%;
justify-content: space-between;
align-items: center;
color: white;
transition: box-shadow .3s;
}
header .search-btn {
width: 58px;
height: 58px;
margin-right: 10px;
background: url(http://cbwconline.com/IMG/Codepen/Search-White.svg) center no-repeat;
}
@media (min-width: 701px) {
header .m-o {
display: none;
}
}
@media (max-width: 700px) {
header .d-o {
display: none !important;
}
header .flex-right, header .flex-left {
min-width: 0 !important;
}
}
header.shadow {
box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12);
}
header .flex, header .flex-wrap, header .flex-left, header .flex-right, header .flex-center, header .flex-between {
align-items: center;
}
header .flex-left,
header .flex-right {
min-width: 170px;
}
header h2 {
font: 400 26px 'Product Sans', 'Roboto';
font-family: 'Comfortaa', cursive;
position: relative;
cursor: default;
}
header h2 span {
padding-left: 18px;
border-left: 1px solid rgba(255, 255, 255, 0.2);
margin-left: 18px;
font-size: 20px;
position: absolute;
left: 100%;
top: 50%;
transform: translateY(-50%);
}
header .flex-left .menu {
width: 58px;
height: 58px;
margin-left: 10px;
background: url(http://cbwconline.com/IMG/Codepen/Menu.svg) center no-repeat;
}
header .flex-left .logo {
width: 30px;
}
header .flex-left .logo:first-of-type {
width: 40px;
margin-right: 6px;
}
header .center {
width: 100%;
max-width: 620px;
height: 42px;
margin: 0 100px;
position: relative;
}
header .center .search {
width: 15px;
height: 15px;
position: absolute;
left: 20px;
top: 50%;
opacity: 0;
transform: translateY(-50%);
transition: .3s;
}
header .center input {
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.3);
padding: 12px 0;
border-radius: 2px;
color: inherit;
text-align: center;
}
header .center input:focus {
padding: 12px 0 12px 45px;
text-align: left;
}
header .center input:focus ~ .search {
opacity: 1;
}
header .center input:focus::-webkit-input-placeholder {
text-align: left;
}
header .flex-right [class^='btn'] {
margin-left: 8px;
width: 30px;
height: 30px;
}
header .flex-right .notifications {
background: url(http://googleplay.flatata.com/static/flat/images/svg/notification.svg) center/20px no-repeat;
}
header .flex-right .apps {
background: url(http://cbwconline.com/IMG/Codepen/Apps-White.svg) center/20px no-repeat;
}
header .flex-right .profile {
width: 32px;
height: 32px;
margin: 0 30px 0 20px;
}
.mobile-search {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
background: #EEE;
transition: transform .3s;
transform: translateY(100%);
z-index: 200;
}
.ios-web-app .mobile-search {
border-top: 20px solid #d0d0d0;
}
.mobile-search.searching {
transform: translateY(0);
}
.mobile-search .header {
background: #fff;
height: 64px;
box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12);
}
.mobile-search .header .back {
width: 58px;
height: 58px;
margin-left: 10px;
background: url(http://cbwconline.com/IMG/Codepen/Arrow-Back-Black.svg) center no-repeat;
}
.mobile-search .header input {
color: #444;
font-size: 16px;
margin-left: 20px;
width: calc(100vw - 100px);
}
.mobile-search .header input::-webkit-input-placeholder {
color: #444;
font-size: 16px;
text-align: left;
}
.mobile-search .header input ::-moz-placeholder {
color: rgba(255, 255, 255, 0.7);
font-size: 16px;
text-align: center;
}
.mobile-search .header input :-ms-input-placeholder {
color: rgba(255, 255, 255, 0.7);
font-size: 16px;
text-align: center;
}
::-webkit-input-placeholder {
color: rgba(255, 255, 255, 0.7);
font-size: 16px;
text-align: center;
}
::-moz-placeholder {
color: rgba(255, 255, 255, 0.7);
font-size: 16px;
text-align: center;
}
:-ms-input-placeholder {
color: rgba(255, 255, 255, 0.7);
font-size: 16px;
text-align: center;
}
@media (max-width: 900px) {
header h2 span {
display: none;
}
header .center {
margin: auto;
}
}
.account {
background: #EEE;
position: fixed;
top: 62px;
right: 15px;
z-index: 6;
opacity: 0;
visibility: hidden;
transform: scale(0.5);
transform-origin: top right;
transition: .15s;
box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12);
}
.account:after {
content: '';
width: 15px;
height: 15px;
background: inherit;
position: absolute;
top: -6px;
right: 8px;
opacity: 0;
visibility: hidden;
transform: rotate(45deg) scale(0.5);
transition: .15s;
}
.account.active {
opacity: 1;
visibility: visible;
transform: scale(1);
}
.account.active:after {
opacity: 1;
visibility: visible;
transform: rotate(45deg) scale(1);
}
.account li {
padding: 12px 16px;
list-style: none;
font: 300 16px Roboto;
cursor: pointer;
transition: .3s;
}
.account li:hover {
background: #e1e1e1;
}
nav {
background: #eee;
color: #444;
margin: 0;
width: 232px;
position: fixed;
top: 64px;
left: 0;
height: calc(100vh - 144px);
max-height: calc(100vh - 144px);
overflow-Y: hidden;
transform: translateX(-232px);
transition: transform .3s;
will-change: transform;
z-index: 40;
box-sizing: content-box;
}
@media (max-width: 700px) {
nav {
top: 0;
height: 100vh;
max-height: 100vh;
z-index: 102;
}
.ios-web-app nav {
top: 20px;
height: calc(100vh - 20px);
max-height: calc(100vh - 20px);
}
}
nav.opened {
transform: translateX(0);
}
@media (max-width: 700px) {
nav.opened {
overflow-y: auto;
}
}
nav:hover {
overflow-y: auto;
}
@media (min-width: 701px) {
.ios-web-app nav {
top: 84px;
height: calc(100vh - 164px);
max-height: calc(100vh - 164px);
}
nav::-webkit-scrollbar {
width: 8px;
}
nav::-webkit-scrollbar-thumb {
background: #bdbdbd;
}
}
nav .info {
color: #fff;
padding: 12px;
background: url(https://lh3.googleusercontent.com/proxy/kDU6IGDfkp__IzpeD45V214rQMKci3hmuw9P6rBRUlhhb_Luhwj6AlrieVpGHNl083wykRn-w0EdAojbAKywfL_pntEOy7jkh8sk65AKNnjP6f85zDOEFfFlVKCSFW9hSu_Cs6dA2JA=w426-h238-p) center/cover;
}
@media (min-width: 701px) {
nav .info {
display: none;
}
}
nav img {
display: block;
width: 100%;
}
nav .profile {
width: 48px;
height: 48px;
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/343394/profile/profile-80_3.jpg) center/cover;
margin-bottom: 18px;
}
nav p {
font-size: 14px;
font-weight: 500;
margin: 0;
}
nav p:last-child {
padding-top: 5px;
font-weight: 300;
}
nav ul {
padding: 8px 0;
margin: 8px 12px;
}
nav ul:not(:last-child) {
border-bottom: 1px solid #DDD;
}
nav li {
align-items: center;
list-style: none;
height: 40px;
padding: 0 12px 0 16px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
border-radius: 2px;
}
nav li:hover {
background: rgba(0, 0, 0, 0.03);
}
nav li.active {
color: #faa700;
background: rgba(0, 0, 0, 0.05);
}
.menu-overlay {
background: rgba(0, 0, 0, 0.3);
height: 150vh;
width: 150vw;
position: fixed;
top: 0;
left: 0;
transition: .3s;
opacity: 0;
visibility: hidden;
}
@media (max-width: 800px) {
.menu-overlay {
z-index: 39;
}
.opened + .menu-overlay {
opacity: 1;
visibility: visible;
}
}
@media (max-width: 700px) {
.menu-overlay {
z-index: 101;
}
}
html {
overflow: scroll;
overflow-x: hidden;
}
::-webkit-scrollbar {
width: 0px; /* remove scrollbar space */
background: transparent; /* optional: just make scrollbar invisible */
}
/* optional: show position indicator in red */
::-webkit-scrollbar-thumb {
background: #FF0000;
}
/*! Flexible Grid System 5.5.3 | Settings | Scss | MIT License | flexible.gs */
/*! Flexible Grid System 5.5.3 | Scss | MIT License | flexible.gs */
/*! Flexible Grid System 5.5.3 | Scss Plus | MIT License | flexible.gs */
.wrap {
display: block;
width: 100%;
font-size: 0;
letter-spacing: 0;
text-align: left;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.wrap > * {
display: inline-block;
vertical-align: top;
}
.col {
min-height: 1px;
font-size: 1rem;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.xl-auto > * {
width: auto;
}
.xl-1 > * {
width: 100%;
}
.xl-2 > * {
width: 50%;
}
.xl-3 > * {
width: 33.33333%;
}
.xl-4 > * {
width: 25%;
}
.xl-5 > * {
width: 20%;
}
.xl-6 > * {
width: 16.66667%;
}
.xl-7 > * {
width: 14.28571%;
}
.xl-8 > * {
width: 12.5%;
}
.xl-9 > * {
width: 11.11111%;
}
.xl-10 > * {
width: 10%;
}
.xl-11 > * {
width: 9.09091%;
}
.xl-12 > * {
width: 8.33333%;
}
.xl-table {
display: table;
table-layout: fixed;
-webkit-flex-direction: initial;
-ms-flex-direction: initial;
flex-direction: initial;
-webkit-flex-wrap: initial;
-ms-flex-wrap: initial;
flex-wrap: initial;
-webkit-justify-content: initial;
-ms-justify-content: initial;
justify-content: initial;
-webkit-align-content: initial;
-ms-align-content: initial;
align-content: initial;
-webkit-align-items: initial;
-ms-align-items: initial;
align-items: initial;
-webkit-column-count: auto;
-moz-column-count: auto;
column-count: auto;
}
.xl-table > * {
display: table-cell;
}
.xl-flexbox {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
table-layout: auto;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: flex-start;
-ms-justify-content: flex-start;
justify-content: flex-start;
-webkit-align-content: center;
-ms-align-content: center;
align-content: center;
-webkit-align-items: center;
-ms-align-items: center;
align-items: center;
-webkit-column-count: auto;
-moz-column-count: auto;
column-count: auto;
}
.xl-flexbox > * {
display: inline-block;
}
.xl-normal {
display: block;
table-layout: auto;
-webkit-flex-direction: initial;
-ms-flex-direction: initial;
flex-direction: initial;
-webkit-flex-wrap: initial;
-ms-flex-wrap: initial;
flex-wrap: initial;
-webkit-justify-content: initial;
-ms-justify-content: initial;
justify-content: initial;
-webkit-align-content: initial;
-ms-align-content: initial;
align-content: initial;
-webkit-align-items: initial;
-ms-align-items: initial;
align-items: initial;
-webkit-column-count: auto;
-moz-column-count: auto;
column-count: auto;
}
.xl-normal > * {
display: inline-block;
}
.xl-left {
-webkit-justify-content: flex-start;
-ms-justify-content: flex-start;
justify-content: flex-start;
text-align: left;
}
.xl-center {
-webkit-justify-content: center;
-ms-justify-content: center;
justify-content: center;
text-align: center;
}
.xl-right {
-webkit-justify-content: flex-end;
-ms-justify-content: flex-end;
justify-content: flex-end;
text-align: right;
}
.xl-top {
-webkit-align-items: flex-start;
-ms-align-items: flex-start;
align-items: flex-start;
}
.xl-top > * {
vertical-align: top;
}
.xl-middle {
-webkit-align-items: center;
-ms-align-items: center;
align-items: center;
}
.xl-middle > * {
vertical-align: middle;
}
.xl-bottom {
-webkit-align-items: flex-end;
-ms-align-items: flex-end;
align-items: flex-end;
}
.xl-bottom > * {
vertical-align: bottom;
}
.xl-between {
-webkit-justify-content: space-between;
-ms-justify-content: space-between;
justify-content: space-between;
-webkit-align-content: space-between;
-ms-align-content: space-between;
align-content: space-between;
}
.xl-around {
-webkit-justify-content: space-around;
-ms-justify-content: space-around;
justify-content: space-around;
-webkit-align-content: space-around;
-ms-align-content: space-around;
align-content: space-around;
}
.xl-baseline {
-webkit-align-items: baseline;
-ms-align-items: baseline;
align-items: baseline;
}
.xl-reverse {
-webkit-flex-direction: row-reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
-webkit-flex-wrap: wrap-reverse;
-ms-flex-wrap: wrap-reverse;
flex-wrap: wrap-reverse;
}
.xl-not-reverse {
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.xl-1-1 {
width: 100%;
}
.xl-1-2 {
width: 50%;
}
.xl-1-3 {
width: 33.33333%;
}
.xl-2-3 {
width: 66.66667%;
}
.xl-1-4 {
width: 25%;
}
.xl-2-4 {
width: 50%;
}
.xl-3-4 {
width: 75%;
}
.xl-1-5 {
width: 20%;
}
.xl-2-5 {
width: 40%;
}
.xl-3-5 {
width: 60%;
}
.xl-4-5 {
width: 80%;
}
.xl-1-6 {
width: 16.66667%;
}
.xl-2-6 {
width: 33.33333%;
}
.xl-3-6 {
width: 50%;
}
.xl-4-6 {
width: 66.66667%;
}
.xl-5-6 {
width: 83.33333%;
}
.xl-1-7 {
width: 14.28571%;
}
.xl-2-7 {
width: 28.57143%;
}
.xl-3-7 {
width: 42.85714%;
}
.xl-4-7 {
width: 57.14286%;
}
.xl-5-7 {
width: 71.42857%;
}
.xl-6-7 {
width: 85.71429%;
}
.xl-1-8 {
width: 12.5%;
}
.xl-2-8 {
width: 25%;
}
.xl-3-8 {
width: 37.5%;
}
.xl-4-8 {
width: 50%;
}
.xl-5-8 {
width: 62.5%;
}
.xl-6-8 {
width: 75%;
}
.xl-7-8 {
width: 87.5%;
}
.xl-1-9 {
width: 11.11111%;
}
.xl-2-9 {
width: 22.22222%;
}
.xl-3-9 {
width: 33.33333%;
}
.xl-4-9 {
width: 44.44444%;
}
.xl-5-9 {
width: 55.55556%;
}
.xl-6-9 {
width: 66.66667%;
}
.xl-7-9 {
width: 77.77778%;
}
.xl-8-9 {
width: 88.88889%;
}
.xl-1-10 {
width: 10%;
}
.xl-2-10 {
width: 20%;
}
.xl-3-10 {
width: 30%;
}
.xl-4-10 {
width: 40%;
}
.xl-5-10 {
width: 50%;
}
.xl-6-10 {
width: 60%;
}
.xl-7-10 {
width: 70%;
}
.xl-8-10 {
width: 80%;
}
.xl-9-10 {
width: 90%;
}
.xl-1-11 {
width: 9.09091%;
}
.xl-2-11 {
width: 18.18182%;
}
.xl-3-11 {
width: 27.27273%;
}
.xl-4-11 {
width: 36.36364%;
}
.xl-5-11 {
width: 45.45455%;
}
.xl-6-11 {
width: 54.54545%;
}
.xl-7-11 {
width: 63.63636%;
}
.xl-8-11 {
width: 72.72727%;
}
.xl-9-11 {
width: 81.81818%;
}
.xl-10-11 {
width: 90.90909%;
}
.xl-1-12 {
width: 8.33333%;
}
.xl-2-12 {
width: 16.66667%;
}
.xl-3-12 {
width: 25%;
}
.xl-4-12 {
width: 33.33333%;
}
.xl-5-12 {
width: 41.66667%;
}
.xl-6-12 {
width: 50%;
}
.xl-7-12 {
width: 58.33333%;
}
.xl-8-12 {
width: 66.66667%;
}
.xl-9-12 {
width: 75%;
}
.xl-10-12 {
width: 83.33333%;
}
.xl-11-12 {
width: 91.66667%;
}
.xl-hidden {
display: none;
}
.xl-not-hidden {
display: inline-block;
}
.xl-first {
-ms-flex-order: -1;
-webkit-order: -1;
order: -1;
}
.xl-not-first {
-ms-flex-order: 0;
-webkit-order: 0;
order: 0;
}
.xl-last {
-ms-flex-order: 1;
-webkit-order: 1;
order: 1;
}
.xl-not-last {
-ms-flex-order: 0;
-webkit-order: 0;
order: 0;
}
.xl-gutter-0 {
width: calc(100% + 0px);
margin-left: -0px;
margin-right: -0px;
padding-left: 0;
padding-right: 0;
}
.xl-gutter-0 > * {
padding-left: 0px;
padding-right: 0px;
}
.xl-gutter-8 {
width: calc(100% + 8px);
margin-left: -4px;
margin-right: -4px;
padding-left: 0;
padding-right: 0;
}
.xl-gutter-8 > * {
padding-left: 4px;
padding-right: 4px;
}
.xl-gutter-16 {
width: calc(100% + 16px);
margin-left: -8px;
margin-right: -8px;
padding-left: 0;
padding-right: 0;
}
.xl-gutter-16 > * {
padding-left: 8px;
padding-right: 8px;
}
.xl-gutter-24 {
width: calc(100% + 24px);
margin-left: -12px;
margin-right: -12px;
padding-left: 0;
padding-right: 0;
}
.xl-gutter-24 > * {
padding-left: 12px;
padding-right: 12px;
}
.xl-gutter-40 {
width: calc(100% + 40px);
margin-left: -20px;
margin-right: -20px;
padding-left: 0;
padding-right: 0;
}
.xl-gutter-40 > * {
padding-left: 20px;
padding-right: 20px;
}
.xl-outside-0 {
width: 100%;
margin-left: 0;
margin-right: 0;
padding-left: 0px;
padding-right: 0px;
}
.xl-outside-8 {
width: 100%;
margin-left: 0;
margin-right: 0;
padding-left: 4px;
padding-right: 4px;
}
.xl-outside-16 {
width: 100%;
margin-left: 0;
margin-right: 0;
padding-left: 8px;
padding-right: 8px;
}
.xl-outside-24 {
width: 100%;
margin-left: 0;
margin-right: 0;
padding-left: 12px;
padding-right: 12px;
}
.xl-outside-40 {
width: 100%;
margin-left: 0;
margin-right: 0;
padding-left: 20px;
padding-right: 20px;
}
.xl-masonry-2 {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}
.xl-masonry-3 {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
}
.xl-masonry-4 {
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
}
.xl-masonry-5 {
-webkit-column-count: 5;
-moz-column-count: 5;
column-count: 5;
}
.xl-masonry-6 {
-webkit-column-count: 6;
-moz-column-count: 6;
column-count: 6;
}
@media (max-width: 1024px) {
.lg-auto > * {
width: auto;
}
.lg-1 > * {
width: 100%;
}
.lg-2 > * {
width: 50%;
}
.lg-3 > * {
width: 33.33333%;
}
.lg-4 > * {
width: 25%;
}
.lg-5 > * {
width: 20%;
}
.lg-6 > * {
width: 16.66667%;
}
.lg-7 > * {
width: 14.28571%;
}
.lg-8 > * {
width: 12.5%;
}
.lg-9 > * {
width: 11.11111%;
}
.lg-10 > * {
width: 10%;
}
.lg-11 > * {
width: 9.09091%;
}
.lg-12 > * {
width: 8.33333%;
}
.lg-table {
display: table;
table-layout: fixed;
-webkit-flex-direction: initial;
-ms-flex-direction: initial;
flex-direction: initial;
-webkit-flex-wrap: initial;
-ms-flex-wrap: initial;
flex-wrap: initial;
-webkit-justify-content: initial;
-ms-justify-content: initial;
justify-content: initial;
-webkit-align-content: initial;
-ms-align-content: initial;
align-content: initial;
-webkit-align-items: initial;
-ms-align-items: initial;
align-items: initial;
-webkit-column-count: auto;
-moz-column-count: auto;
column-count: auto;
}
.lg-table > * {
display: table-cell;
}
.lg-flexbox {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
table-layout: auto;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: flex-start;
-ms-justify-content: flex-start;
justify-content: flex-start;
-webkit-align-content: center;
-ms-align-content: center;
align-content: center;
-webkit-align-items: center;
-ms-align-items: center;
align-items: center;
-webkit-column-count: auto;
-moz-column-count: auto;
column-count: auto;
}
.lg-flexbox > * {
display: inline-block;
}
.lg-normal {
display: block;
table-layout: auto;
-webkit-flex-direction: initial;
-ms-flex-direction: initial;
flex-direction: initial;
-webkit-flex-wrap: initial;
-ms-flex-wrap: initial;
flex-wrap: initial;
-webkit-justify-content: initial;
-ms-justify-content: initial;
justify-content: initial;
-webkit-align-content: initial;
-ms-align-content: initial;
align-content: initial;
-webkit-align-items: initial;
-ms-align-items: initial;
align-items: initial;
-webkit-column-count: auto;
-moz-column-count: auto;
column-count: auto;
}
.lg-normal > * {
display: inline-block;
}
.lg-left {
-webkit-justify-content: flex-start;
-ms-justify-content: flex-start;
justify-content: flex-start;
text-align: left;
}
.lg-center {
-webkit-justify-content: center;
-ms-justify-content: center;
justify-content: center;
text-align: center;
}
.lg-right {
-webkit-justify-content: flex-end;
-ms-justify-content: flex-end;
justify-content: flex-end;
text-align: right;
}
.lg-top {
-webkit-align-items: flex-start;
-ms-align-items: flex-start;
align-items: flex-start;
}
.lg-top > * {
vertical-align: top;
}
.lg-middle {
-webkit-align-items: center;
-ms-align-items: center;
align-items: center;
}
.lg-middle > * {
vertical-align: middle;
}
.lg-bottom {
-webkit-align-items: flex-end;
-ms-align-items: flex-end;
align-items: flex-end;
}
.lg-bottom > * {
vertical-align: bottom;
}
.lg-between {
-webkit-justify-content: space-between;
-ms-justify-content: space-between;
justify-content: space-between;
-webkit-align-content: space-between;
-ms-align-content: space-between;
align-content: space-between;
}
.lg-around {
-webkit-justify-content: space-around;
-ms-justify-content: space-around;
justify-content: space-around;
-webkit-align-content: space-around;
-ms-align-content: space-around;
align-content: space-around;
}
.lg-baseline {
-webkit-align-items: baseline;
-ms-align-items: baseline;
align-items: baseline;
}
.lg-reverse {
-webkit-flex-direction: row-reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
-webkit-flex-wrap: wrap-reverse;
-ms-flex-wrap: wrap-reverse;
flex-wrap: wrap-reverse;
}
.lg-not-reverse {
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.lg-1-1 {
width: 100%;
}
.lg-1-2 {
width: 50%;
}
.lg-1-3 {
width: 33.33333%;
}
.lg-2-3 {
width: 66.66667%;
}
.lg-1-4 {
width: 25%;
}
.lg-2-4 {
width: 50%;
}
.lg-3-4 {
width: 75%;
}
.lg-1-5 {
width: 20%;
}
.lg-2-5 {
width: 40%;
}
.lg-3-5 {
width: 60%;
}
.lg-4-5 {
width: 80%;
}
.lg-1-6 {
width: 16.66667%;
}
.lg-2-6 {
width: 33.33333%;
}
.lg-3-6 {
width: 50%;
}
.lg-4-6 {
width: 66.66667%;
}
.lg-5-6 {
width: 83.33333%;
}
.lg-1-7 {
width: 14.28571%;
}
.lg-2-7 {
width: 28.57143%;
}
.lg-3-7 {
width: 42.85714%;
}
.lg-4-7 {
width: 57.14286%;
}
.lg-5-7 {
width: 71.42857%;
}
.lg-6-7 {
width: 85.71429%;
}
.lg-1-8 {
width: 12.5%;
}
.lg-2-8 {
width: 25%;
}
.lg-3-8 {
width: 37.5%;
}
.lg-4-8 {
width: 50%;
}
.lg-5-8 {
width: 62.5%;
}
.lg-6-8 {
width: 75%;
}
.lg-7-8 {
width: 87.5%;
}
.lg-1-9 {
width: 11.11111%;
}
.lg-2-9 {
width: 22.22222%;
}
.lg-3-9 {
width: 33.33333%;
}
.lg-4-9 {
width: 44.44444%;
}
.lg-5-9 {
width: 55.55556%;
}
.lg-6-9 {
width: 66.66667%;
}
.lg-7-9 {
width: 77.77778%;
}
.lg-8-9 {
width: 88.88889%;
}
.lg-1-10 {
width: 10%;
}
.lg-2-10 {
width: 20%;
}
.lg-3-10 {
width: 30%;
}
.lg-4-10 {
width: 40%;
}
.lg-5-10 {
width: 50%;
}
.lg-6-10 {
width: 60%;
}
.lg-7-10 {
width: 70%;
}
.lg-8-10 {
width: 80%;
}
.lg-9-10 {
width: 90%;
}
.lg-1-11 {
width: 9.09091%;
}
.lg-2-11 {
width: 18.18182%;
}
.lg-3-11 {
width: 27.27273%;
}
.lg-4-11 {
width: 36.36364%;
}
.lg-5-11 {
width: 45.45455%;
}
.lg-6-11 {
width: 54.54545%;
}
.lg-7-11 {
width: 63.63636%;
}
.lg-8-11 {
width: 72.72727%;
}
.lg-9-11 {
width: 81.81818%;
}
.lg-10-11 {
width: 90.90909%;
}
.lg-1-12 {
width: 8.33333%;
}
.lg-2-12 {
width: 16.66667%;
}
.lg-3-12 {
width: 25%;
}
.lg-4-12 {
width: 33.33333%;
}
.lg-5-12 {
width: 41.66667%;
}
.lg-6-12 {
width: 50%;
}
.lg-7-12 {
width: 58.33333%;
}
.lg-8-12 {
width: 66.66667%;
}
.lg-9-12 {
width: 75%;
}
.lg-10-12 {
width: 83.33333%;
}
.lg-11-12 {
width: 91.66667%;
}
.lg-hidden {
display: none;
}
.lg-not-hidden {
display: inline-block;
}
.lg-first {
-ms-flex-order: -1;
-webkit-order: -1;
order: -1;
}
.lg-not-first {
-ms-flex-order: 0;
-webkit-order: 0;
order: 0;
}
.lg-last {
-ms-flex-order: 1;
-webkit-order: 1;
order: 1;
}
.lg-not-last {
-ms-flex-order: 0;
-webkit-order: 0;
order: 0;
}
.lg-gutter-0 {
width: calc(100% + 0px);
margin-left: -0px;
margin-right: -0px;
padding-left: 0;
padding-right: 0;
}
.lg-gutter-0 > * {
padding-left: 0px;
padding-right: 0px;
}
.lg-gutter-8 {
width: calc(100% + 8px);
margin-left: -4px;
margin-right: -4px;
padding-left: 0;
padding-right: 0;
}
.lg-gutter-8 > * {
padding-left: 4px;
padding-right: 4px;
}
.lg-gutter-16 {
width: calc(100% + 16px);
margin-left: -8px;
margin-right: -8px;
padding-left: 0;
padding-right: 0;
}
.lg-gutter-16 > * {
padding-left: 8px;
padding-right: 8px;
}
.lg-gutter-24 {
width: calc(100% + 24px);
margin-left: -12px;
margin-right: -12px;
padding-left: 0;
padding-right: 0;
}
.lg-gutter-24 > * {
padding-left: 12px;
padding-right: 12px;
}
.lg-gutter-40 {
width: calc(100% + 40px);
margin-left: -20px;
margin-right: -20px;
padding-left: 0;
padding-right: 0;
}
.lg-gutter-40 > * {
padding-left: 20px;
padding-right: 20px;
}
.lg-outside-0 {
width: 100%;
margin-left: 0;
margin-right: 0;
padding-left: 0px;
padding-right: 0px;
}
.lg-outside-8 {
width: 100%;
margin-left: 0;
margin-right: 0;
padding-left: 4px;
padding-right: 4px;
}
.lg-outside-16 {
width: 100%;
margin-left: 0;
margin-right: 0;
padding-left: 8px;
padding-right: 8px;
}
.lg-outside-24 {
width: 100%;
margin-left: 0;
margin-right: 0;
padding-left: 12px;
padding-right: 12px;
}
.lg-outside-40 {
width: 100%;
margin-left: 0;
margin-right: 0;
padding-left: 20px;
padding-right: 20px;
}
.lg-masonry-2 {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}
.lg-masonry-3 {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
}
.lg-masonry-4 {
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
}
.lg-masonry-5 {
-webkit-column-count: 5;
-moz-column-count: 5;
column-count: 5;
}
.lg-masonry-6 {
-webkit-column-count: 6;
-moz-column-count: 6;
column-count: 6;
}
}
@media (max-width: 768px) {
.md-auto > * {
width: auto;
}
.md-1 > * {
width: 100%;
}
.md-2 > * {
width: 50%;
}
.md-3 > * {
width: 33.33333%;
}
.md-4 > * {
width: 25%;
}
.md-5 > * {
width: 20%;
}
.md-6 > * {
width: 16.66667%;
}
.md-7 > * {
width: 14.28571%;
}
.md-8 > * {
width: 12.5%;
}
.md-9 > * {
width: 11.11111%;
}
.md-10 > * {
width: 10%;
}
.md-11 > * {
width: 9.09091%;
}
.md-12 > * {
width: 8.33333%;
}
.md-table {
display: table;
table-layout: fixed;
-webkit-flex-direction: initial;
-ms-flex-direction: initial;
flex-direction: initial;
-webkit-flex-wrap: initial;
-ms-flex-wrap: initial;
flex-wrap: initial;
-webkit-justify-content: initial;
-ms-justify-content: initial;
justify-content: initial;
-webkit-align-content: initial;
-ms-align-content: initial;
align-content: initial;
-webkit-align-items: initial;
-ms-align-items: initial;
align-items: initial;
-webkit-column-count: auto;
-moz-column-count: auto;
column-count: auto;
}
.md-table > * {
display: table-cell;
}
.md-flexbox {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
table-layout: auto;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: flex-start;
-ms-justify-content: flex-start;
justify-content: flex-start;
-webkit-align-content: center;
-ms-align-content: center;
align-content: center;
-webkit-align-items: center;
-ms-align-items: center;
align-items: center;
-webkit-column-count: auto;
-moz-column-count: auto;
column-count: auto;
}
.md-flexbox > * {
display: inline-block;
}
.md-normal {
display: block;
table-layout: auto;
-webkit-flex-direction: initial;
-ms-flex-direction: initial;
flex-direction: initial;
-webkit-flex-wrap: initial;
-ms-flex-wrap: initial;
flex-wrap: initial;
-webkit-justify-content: initial;
-ms-justify-content: initial;
justify-content: initial;
-webkit-align-content: initial;
-ms-align-content: initial;
align-content: initial;
-webkit-align-items: initial;
-ms-align-items: initial;
align-items: initial;
-webkit-column-count: auto;
-moz-column-count: auto;
column-count: auto;
}
.md-normal > * {
display: inline-block;
}
.md-left {
-webkit-justify-content: flex-start;
-ms-justify-content: flex-start;
justify-content: flex-start;
text-align: left;
}
.md-center {
-webkit-justify-content: center;
-ms-justify-content: center;
justify-content: center;
text-align: center;
}
.md-right {
-webkit-justify-content: flex-end;
-ms-justify-content: flex-end;
justify-content: flex-end;
text-align: right;
}
.md-top {
-webkit-align-items: flex-start;
-ms-align-items: flex-start;
align-items: flex-start;
}
.md-top > * {
vertical-align: top;
}
.md-middle {
-webkit-align-items: center;
-ms-align-items: center;
align-items: center;
}
.md-middle > * {
vertical-align: middle;
}
.md-bottom {
-webkit-align-items: flex-end;
-ms-align-items: flex-end;
align-items: flex-end;
}
.md-bottom > * {
vertical-align: bottom;
}
.md-between {
-webkit-justify-content: space-between;
-ms-justify-content: space-between;
justify-content: space-between;
-webkit-align-content: space-between;
-ms-align-content: space-between;
align-content: space-between;
}
.md-around {
-webkit-justify-content: space-around;
-ms-justify-content: space-around;
justify-content: space-around;
-webkit-align-content: space-around;
-ms-align-content: space-around;
align-content: space-around;
}
.md-baseline {
-webkit-align-items: baseline;
-ms-align-items: baseline;
align-items: baseline;
}
.md-reverse {
-webkit-flex-direction: row-reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
-webkit-flex-wrap: wrap-reverse;
-ms-flex-wrap: wrap-reverse;
flex-wrap: wrap-reverse;
}
.md-not-reverse {
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.md-1-1 {
width: 100%;
}
.md-1-2 {
width: 50%;
}
.md-1-3 {
width: 33.33333%;
}
.md-2-3 {
width: 66.66667%;
}
.md-1-4 {
width: 25%;
}
.md-2-4 {
width: 50%;
}
.md-3-4 {
width: 75%;
}
.md-1-5 {
width: 20%;
}
.md-2-5 {
width: 40%;
}
.md-3-5 {
width: 60%;
}
.md-4-5 {
width: 80%;
}
.md-1-6 {
width: 16.66667%;
}
.md-2-6 {
width: 33.33333%;
}
.md-3-6 {
width: 50%;
}
.md-4-6 {
width: 66.66667%;
}
.md-5-6 {
width: 83.33333%;
}
.md-1-7 {
width: 14.28571%;
}
.md-2-7 {
width: 28.57143%;
}
.md-3-7 {
width: 42.85714%;
}
.md-4-7 {
width: 57.14286%;
}
.md-5-7 {
width: 71.42857%;
}
.md-6-7 {
width: 85.71429%;
}
.md-1-8 {
width: 12.5%;
}
.md-2-8 {
width: 25%;
}
.md-3-8 {
width: 37.5%;
}
.md-4-8 {
width: 50%;
}
.md-5-8 {
width: 62.5%;
}
.md-6-8 {
width: 75%;
}
.md-7-8 {
width: 87.5%;
}
.md-1-9 {
width: 11.11111%;
}
.md-2-9 {
width: 22.22222%;
}
.md-3-9 {
width: 33.33333%;
}
.md-4-9 {
width: 44.44444%;
}
.md-5-9 {
width: 55.55556%;
}
.md-6-9 {
width: 66.66667%;
}
.md-7-9 {
width: 77.77778%;
}
.md-8-9 {
width: 88.88889%;
}
.md-1-10 {
width: 10%;
}
.md-2-10 {
width: 20%;
}
.md-3-10 {
width: 30%;
}
.md-4-10 {
width: 40%;
}
.md-5-10 {
width: 50%;
}
.md-6-10 {
width: 60%;
}
.md-7-10 {
width: 70%;
}
.md-8-10 {
width: 80%;
}
.md-9-10 {
width: 90%;
}
.md-1-11 {
width: 9.09091%;
}
.md-2-11 {
width: 18.18182%;
}
.md-3-11 {
width: 27.27273%;
}
.md-4-11 {
width: 36.36364%;
}
.md-5-11 {
width: 45.45455%;
}
.md-6-11 {
width: 54.54545%;
}
.md-7-11 {
width: 63.63636%;
}
.md-8-11 {
width: 72.72727%;
}
.md-9-11 {
width: 81.81818%;
}
.md-10-11 {
width: 90.90909%;
}
.md-1-12 {
width: 8.33333%;
}
.md-2-12 {
width: 16.66667%;
}
.md-3-12 {
width: 25%;
}
.md-4-12 {
width: 33.33333%;
}
.md-5-12 {
width: 41.66667%;
}
.md-6-12 {
width: 50%;
}
.md-7-12 {
width: 58.33333%;
}
.md-8-12 {
width: 66.66667%;
}
.md-9-12 {
width: 75%;
}
.md-10-12 {
width: 83.33333%;
}
.md-11-12 {
width: 91.66667%;
}
.md-hidden {
display: none;
}
.md-not-hidden {
display: inline-block;
}
.md-first {
-ms-flex-order: -1;
-webkit-order: -1;
order: -1;
}
.md-not-first {
-ms-flex-order: 0;
-webkit-order: 0;
order: 0;
}
.md-last {
-ms-flex-order: 1;
-webkit-order: 1;
order: 1;
}
.md-not-last {
-ms-flex-order: 0;
-webkit-order: 0;
order: 0;
}
.md-gutter-0 {
width: calc(100% + 0px);
margin-left: -0px;
margin-right: -0px;
padding-left: 0;
padding-right: 0;
}
.md-gutter-0 > * {
padding-left: 0px;
padding-right: 0px;
}
.md-gutter-8 {
width: calc(100% + 8px);
margin-left: -4px;
margin-right: -4px;
padding-left: 0;
padding-right: 0;
}
.md-gutter-8 > * {
padding-left: 4px;
padding-right: 4px;
}
.md-gutter-16 {
width: calc(100% + 16px);
margin-left: -8px;
margin-right: -8px;
padding-left: 0;
padding-right: 0;
}
.md-gutter-16 > * {
padding-left: 8px;
padding-right: 8px;
}
.md-gutter-24 {
width: calc(100% + 24px);
margin-left: -12px;
margin-right: -12px;
padding-left: 0;
padding-right: 0;
}
.md-gutter-24 > * {
padding-left: 12px;
padding-right: 12px;
}
.md-gutter-40 {
width: calc(100% + 40px);
margin-left: -20px;
margin-right: -20px;
padding-left: 0;
padding-right: 0;
}
.md-gutter-40 > * {
padding-left: 20px;
padding-right: 20px;
}
.md-outside-0 {
width: 100%;
margin-left: 0;
margin-right: 0;
padding-left: 0px;
padding-right: 0px;
}
.md-outside-8 {
width: 100%;
margin-left: 0;
margin-right: 0;
padding-left: 4px;
padding-right: 4px;
}
.md-outside-16 {
width: 100%;
margin-left: 0;
margin-right: 0;
padding-left: 8px;
padding-right: 8px;
}
.md-outside-24 {
width: 100%;
margin-left: 0;
margin-right: 0;
padding-left: 12px;
padding-right: 12px;
}
.md-outside-40 {
width: 100%;
margin-left: 0;
margin-right: 0;
padding-left: 20px;
padding-right: 20px;
}
.md-masonry-2 {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}
.md-masonry-3 {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
}
.md-masonry-4 {
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
}
.md-masonry-5 {
-webkit-column-count: 5;
-moz-column-count: 5;
column-count: 5;
}
.md-masonry-6 {
-webkit-column-count: 6;
-moz-column-count: 6;
column-count: 6;
}
}
@media (max-width: 667px) {
.sm-auto > * {
width: auto;
}
.sm-1 > * {
width: 100%;
}
.sm-2 > * {
width: 50%;
}
.sm-3 > * {
width: 33.33333%;
}
.sm-4 > * {
width: 25%;
}
.sm-5 > * {
width: 20%;
}
.sm-6 > * {
width: 16.66667%;
}
.sm-7 > * {
width: 14.28571%;
}
.sm-8 > * {
width: 12.5%;
}
.sm-9 > * {
width: 11.11111%;
}
.sm-10 > * {
width: 10%;
}
.sm-11 > * {
width: 9.09091%;
}
.sm-12 > * {
width: 8.33333%;
}
.sm-table {
display: table;
table-layout: fixed;
-webkit-flex-direction: initial;
-ms-flex-direction: initial;
flex-direction: initial;
-webkit-flex-wrap: initial;
-ms-flex-wrap: initial;
flex-wrap: initial;
-webkit-justify-content: initial;
-ms-justify-content: initial;
justify-content: initial;
-webkit-align-content: initial;
-ms-align-content: initial;
align-content: initial;
-webkit-align-items: initial;
-ms-align-items: initial;
align-items: initial;
-webkit-column-count: auto;
-moz-column-count: auto;
column-count: auto;
}
.sm-table > * {
display: table-cell;
}
.sm-flexbox {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
table-layout: auto;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: flex-start;
-ms-justify-content: flex-start;
justify-content: flex-start;
-webkit-align-content: center;
-ms-align-content: center;
align-content: center;
-webkit-align-items: center;
-ms-align-items: center;
align-items: center;
-webkit-column-count: auto;
-moz-column-count: auto;
column-count: auto;
}
.sm-flexbox > * {
display: inline-block;
}
.sm-normal {
display: block;
table-layout: auto;
-webkit-flex-direction: initial;
-ms-flex-direction: initial;
flex-direction: initial;
-webkit-flex-wrap: initial;
-ms-flex-wrap: initial;
flex-wrap: initial;
-webkit-justify-content: initial;
-ms-justify-content: initial;
justify-content: initial;
-webkit-align-content: initial;
-ms-align-content: initial;
align-content: initial;
-webkit-align-items: initial;
-ms-align-items: initial;
align-items: initial;
-webkit-column-count: auto;
-moz-column-count: auto;
column-count: auto;
}
.sm-normal > * {
display: inline-block;
}
.sm-left {
-webkit-justify-content: flex-start;
-ms-justify-content: flex-start;
justify-content: flex-start;
text-align: left;
}
.sm-center {
-webkit-justify-content: center;
-ms-justify-content: center;
justify-content: center;
text-align: center;
}
.sm-right {
-webkit-justify-content: flex-end;
-ms-justify-content: flex-end;
justify-content: flex-end;
text-align: right;
}
.sm-top {
-webkit-align-items: flex-start;
-ms-align-items: flex-start;
align-items: flex-start;
}
.sm-top > * {
vertical-align: top;
}
.sm-middle {
-webkit-align-items: center;
-ms-align-items: center;
align-items: center;
}
.sm-middle > * {
vertical-align: middle;
}
.sm-bottom {
-webkit-align-items: flex-end;
-ms-align-items: flex-end;
align-items: flex-end;
}
.sm-bottom > * {
vertical-align: bottom;
}
.sm-between {
-webkit-justify-content: space-between;
-ms-justify-content: space-between;
justify-content: space-between;
-webkit-align-content: space-between;
-ms-align-content: space-between;
align-content: space-between;
}
.sm-around {
-webkit-justify-content: space-around;
-ms-justify-content: space-around;
justify-content: space-around;
-webkit-align-content: space-around;
-ms-align-content: space-around;
align-content: space-around;
}
.sm-baseline {
-webkit-align-items: baseline;
-ms-align-items: baseline;
align-items: baseline;
}
.sm-reverse {
-webkit-flex-direction: row-reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
-webkit-flex-wrap: wrap-reverse;
-ms-flex-wrap: wrap-reverse;
flex-wrap: wrap-reverse;
}
.sm-not-reverse {
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.sm-1-1 {
width: 100%;
}
.sm-1-2 {
width: 50%;
}
.sm-1-3 {
width: 33.33333%;
}
.sm-2-3 {
width: 66.66667%;
}
.sm-1-4 {
width: 25%;
}
.sm-2-4 {
width: 50%;
}
.sm-3-4 {
width: 75%;
}
.sm-1-5 {
width: 20%;
}
.sm-2-5 {
width: 40%;
}
.sm-3-5 {
width: 60%;
}
.sm-4-5 {
width: 80%;
}
.sm-1-6 {
width: 16.66667%;
}
.sm-2-6 {
width: 33.33333%;
}
.sm-3-6 {
width: 50%;
}
.sm-4-6 {
width: 66.66667%;
}
.sm-5-6 {
width: 83.33333%;
}
.sm-1-7 {
width: 14.28571%;
}
.sm-2-7 {
width: 28.57143%;
}
.sm-3-7 {
width: 42.85714%;
}
.sm-4-7 {
width: 57.14286%;
}
.sm-5-7 {
width: 71.42857%;
}
.sm-6-7 {
width: 85.71429%;
}
.sm-1-8 {
width: 12.5%;
}
.sm-2-8 {
width: 25%;
}
.sm-3-8 {
width: 37.5%;
}
.sm-4-8 {
width: 50%;
}
.sm-5-8 {
width: 62.5%;
}
.sm-6-8 {
width: 75%;
}
.sm-7-8 {
width: 87.5%;
}
.sm-1-9 {
width: 11.11111%;
}
.sm-2-9 {
width: 22.22222%;
}
.sm-3-9 {
width: 33.33333%;
}
.sm-4-9 {
width: 44.44444%;
}
.sm-5-9 {
width: 55.55556%;
}
.sm-6-9 {
width: 66.66667%;
}
.sm-7-9 {
width: 77.77778%;
}
.sm-8-9 {
width: 88.88889%;
}
.sm-1-10 {
width: 10%;
}
.sm-2-10 {
width: 20%;
}
.sm-3-10 {
width: 30%;
}
.sm-4-10 {
width: 40%;
}
.sm-5-10 {
width: 50%;
}
.sm-6-10 {
width: 60%;
}
.sm-7-10 {
width: 70%;
}
.sm-8-10 {
width: 80%;
}
.sm-9-10 {
width: 90%;
}
.sm-1-11 {
width: 9.09091%;
}
.sm-2-11 {
width: 18.18182%;
}
.sm-3-11 {
width: 27.27273%;
}
.sm-4-11 {
width: 36.36364%;
}
.sm-5-11 {
width: 45.45455%;
}
.sm-6-11 {
width: 54.54545%;
}
.sm-7-11 {
width: 63.63636%;
}
.sm-8-11 {
width: 72.72727%;
}
.sm-9-11 {
width: 81.81818%;
}
.sm-10-11 {
width: 90.90909%;
}
.sm-1-12 {
width: 8.33333%;
}
.sm-2-12 {
width: 16.66667%;
}
.sm-3-12 {
width: 25%;
}
.sm-4-12 {
width: 33.33333%;
}
.sm-5-12 {
width: 41.66667%;
}
.sm-6-12 {
width: 50%;
}
.sm-7-12 {
width: 58.33333%;
}
.sm-8-12 {
width: 66.66667%;
}
.sm-9-12 {
width: 75%;
}
.sm-10-12 {
width: 83.33333%;
}
.sm-11-12 {
width: 91.66667%;
}
.sm-hidden {
display: none;
}
.sm-not-hidden {
display: inline-block;
}
.sm-first {
-ms-flex-order: -1;
-webkit-order: -1;
order: -1;
}
.sm-not-first {
-ms-flex-order: 0;
-webkit-order: 0;
order: 0;
}
.sm-last {
-ms-flex-order: 1;
-webkit-order: 1;
order: 1;
}
.sm-not-last {
-ms-flex-order: 0;
-webkit-order: 0;
order: 0;
}
.sm-gutter-0 {
width: calc(100% + 0px);
margin-left: -0px;
margin-right: -0px;
padding-left: 0;
padding-right: 0;
}
.sm-gutter-0 > * {
padding-left: 0px;
padding-right: 0px;
}
.sm-gutter-8 {
width: calc(100% + 8px);
margin-left: -4px;
margin-right: -4px;
padding-left: 0;
padding-right: 0;
}
.sm-gutter-8 > * {
padding-left: 4px;
padding-right: 4px;
}
.sm-gutter-16 {
width: calc(100% + 16px);
margin-left: -8px;
margin-right: -8px;
padding-left: 0;
padding-right: 0;
}
.sm-gutter-16 > * {
padding-left: 8px;
padding-right: 8px;
}
.sm-gutter-24 {
width: calc(100% + 24px);
margin-left: -12px;
margin-right: -12px;
padding-left: 0;
padding-right: 0;
}
.sm-gutter-24 > * {
padding-left: 12px;
padding-right: 12px;
}
.sm-gutter-40 {
width: calc(100% + 40px);
margin-left: -20px;
margin-right: -20px;
padding-left: 0;
padding-right: 0;
}
.sm-gutter-40 > * {
padding-left: 20px;
padding-right: 20px;
}
.sm-outside-0 {
width: 100%;
margin-left: 0;
margin-right: 0;
padding-left: 0px;
padding-right: 0px;
}
.sm-outside-8 {
width: 100%;
margin-left: 0;
margin-right: 0;
padding-left: 4px;
padding-right: 4px;
}
.sm-outside-16 {
width: 100%;
margin-left: 0;
margin-right: 0;
padding-left: 8px;
padding-right: 8px;
}
.sm-outside-24 {
width: 100%;
margin-left: 0;
margin-right: 0;
padding-left: 12px;
padding-right: 12px;
}
.sm-outside-40 {
width: 100%;
margin-left: 0;
margin-right: 0;
padding-left: 20px;
padding-right: 20px;
}
.sm-masonry-2 {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}
.sm-masonry-3 {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
}
.sm-masonry-4 {
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
}
.sm-masonry-5 {
-webkit-column-count: 5;
-moz-column-count: 5;
column-count: 5;
}
.sm-masonry-6 {
-webkit-column-count: 6;
-moz-column-count: 6;
column-count: 6;
}
}
.wrap__col {
min-height: 1px;
font-size: 1rem;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.wrap--xl-auto > * {
width: auto;
}
.wrap--xl-1 > * {
width: 100%;
}
.wrap--xl-2 > * {
width: 50%;
}
.wrap--xl-3 > * {
width: 33.33333%;
}
.wrap--xl-4 > * {
width: 25%;
}
.wrap--xl-5 > * {
width: 20%;
}
.wrap--xl-6 > * {
width: 16.66667%;
}
.wrap--xl-7 > * {
width: 14.28571%;
}
.wrap--xl-8 > * {
width: 12.5%;
}
.wrap--xl-9 > * {
width: 11.11111%;
}
.wrap--xl-10 > * {
width: 10%;
}
.wrap--xl-11 > * {
width: 9.09091%;
}
.wrap--xl-12 > * {
width: 8.33333%;
}
.wrap--xl-table {
display: table;
table-layout: fixed;
-webkit-flex-direction: initial;
-ms-flex-direction: initial;
flex-direction: initial;
-webkit-flex-wrap: initial;
-ms-flex-wrap: initial;
flex-wrap: initial;
-webkit-justify-content: initial;
-ms-justify-content: initial;
justify-content: initial;
-webkit-align-content: initial;
-ms-align-content: initial;
align-content: initial;
-webkit-align-items: initial;
-ms-align-items: initial;
align-items: initial;
-webkit-column-count: auto;
-moz-column-count: auto;
column-count: auto;
}
.wrap--xl-table > * {
display: table-cell;
}
.wrap--xl-flexbox {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
table-layout: auto;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: flex-start;
-ms-justify-content: flex-start;
justify-content: flex-start;
-webkit-align-content: center;
-ms-align-content: center;
align-content: center;
-webkit-align-items: center;
-ms-align-items: center;
align-items: center;
-webkit-column-count: auto;
-moz-column-count: auto;
column-count: auto;
}
.wrap--xl-flexbox > * {
display: inline-block;
}
.wrap--xl-normal {
display: block;
table-layout: auto;
-webkit-flex-direction: initial;
-ms-flex-direction: initial;
flex-direction: initial;
-webkit-flex-wrap: initial;
-ms-flex-wrap: initial;
flex-wrap: initial;
-webkit-justify-content: initial;
-ms-justify-content: initial;
justify-content: initial;
-webkit-align-content: initial;
-ms-align-content: initial;
align-content: initial;
-webkit-align-items: initial;
-ms-align-items: initial;
align-items: initial;
-webkit-column-count: auto;
-moz-column-count: auto;
column-count: auto;
}
.wrap--xl-normal > * {
display: inline-block;
}
.wrap--xl-left {
-webkit-justify-content: flex-start;
-ms-justify-content: flex-start;
justify-content: flex-start;
text-align: left;
}
.wrap--xl-center {
-webkit-justify-content: center;
-ms-justify-content: center;
justify-content: center;
text-align: center;
}
.wrap--xl-right {
-webkit-justify-content: flex-end;
-ms-justify-content: flex-end;
justify-content: flex-end;
text-align: right;
}
.wrap--xl-top {
-webkit-align-items: flex-start;
-ms-align-items: flex-start;
align-items: flex-start;
}
.wrap--xl-top > * {
vertical-align: top;
}
.wrap--xl-middle {
-webkit-align-items: center;
-ms-align-items: center;
align-items: center;
}
.wrap--xl-middle > * {
vertical-align: middle;
}
.wrap--xl-bottom {
-webkit-align-items: flex-end;
-ms-align-items: flex-end;
align-items: flex-end;
}
.wrap--xl-bottom > * {
vertical-align: bottom;
}
.wrap--xl-between {
-webkit-justify-content: space-between;
-ms-justify-content: space-between;
justify-content: space-between;
-webkit-align-content: space-between;
-ms-align-content: space-between;
align-content: space-between;
}
.wrap--xl-around {
-webkit-justify-content: space-around;
-ms-justify-content: space-around;
justify-content: space-around;
-webkit-align-content: space-around;
-ms-align-content: space-around;
align-content: space-around;
}
.wrap--xl-baseline {
-webkit-align-items: baseline;
-ms-align-items: baseline;
align-items: baseline;
}
.wrap--xl-reverse {
-webkit-flex-direction: row-reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
-webkit-flex-wrap: wrap-reverse;
-ms-flex-wrap: wrap-reverse;
flex-wrap: wrap-reverse;
}
.wrap--xl-not-reverse {
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.wrap__col--xl-1-1 {
width: 100%;
}
.wrap__col--xl-1-2 {
width: 50%;
}
.wrap__col--xl-1-3 {
width: 33.33333%;
}
.wrap__col--xl-2-3 {
width: 66.66667%;
}
.wrap__col--xl-1-4 {
width: 25%;
}
.wrap__col--xl-2-4 {
width: 50%;
}
.wrap__col--xl-3-4 {
width: 75%;
}
.wrap__col--xl-1-5 {
width: 20%;
}
.wrap__col--xl-2-5 {
width: 40%;
}
.wrap__col--xl-3-5 {
width: 60%;
}
.wrap__col--xl-4-5 {
width: 80%;
}
.wrap__col--xl-1-6 {
width: 16.66667%;
}
.wrap__col--xl-2-6 {
width: 33.33333%;
}
.wrap__col--xl-3-6 {
width: 50%;
}
.wrap__col--xl-4-6 {
width: 66.66667%;
}
.wrap__col--xl-5-6 {
width: 83.33333%;
}
.wrap__col--xl-1-7 {
width: 14.28571%;
}
.wrap__col--xl-2-7 {
width: 28.57143%;
}
.wrap__col--xl-3-7 {
width: 42.85714%;
}
.wrap__col--xl-4-7 {
width: 57.14286%;
}
.wrap__col--xl-5-7 {
width: 71.42857%;
}
.wrap__col--xl-6-7 {
width: 85.71429%;
}
.wrap__col--xl-1-8 {
width: 12.5%;
}
.wrap__col--xl-2-8 {
width: 25%;
}
.wrap__col--xl-3-8 {
width: 37.5%;
}
.wrap__col--xl-4-8 {
width: 50%;
}
.wrap__col--xl-5-8 {
width: 62.5%;
}
.wrap__col--xl-6-8 {
width: 75%;
}
.wrap__col--xl-7-8 {
width: 87.5%;
}
.wrap__col--xl-1-9 {
width: 11.11111%;
}
.wrap__col--xl-2-9 {
width: 22.22222%;
}
.wrap__col--xl-3-9 {
width: 33.33333%;
}
.wrap__col--xl-4-9 {
width: 44.44444%;
}
.wrap__col--xl-5-9 {
width: 55.55556%;
}
.wrap__col--xl-6-9 {
width: 66.66667%;
}
.wrap__col--xl-7-9 {
width: 77.77778%;
}
.wrap__col--xl-8-9 {
width: 88.88889%;
}
.wrap__col--xl-1-10 {
width: 10%;
}
.wrap__col--xl-2-10 {
width: 20%;
}
.wrap__col--xl-3-10 {
width: 30%;
}
.wrap__col--xl-4-10 {
width: 40%;
}
.wrap__col--xl-5-10 {
width: 50%;
}
.wrap__col--xl-6-10 {
width: 60%;
}
.wrap__col--xl-7-10 {
width: 70%;
}
.wrap__col--xl-8-10 {
width: 80%;
}
.wrap__col--xl-9-10 {
width: 90%;
}
.wrap__col--xl-1-11 {
width: 9.09091%;
}
.wrap__col--xl-2-11 {
width: 18.18182%;
}
.wrap__col--xl-3-11 {
width: 27.27273%;
}
.wrap__col--xl-4-11 {
width: 36.36364%;
}
.wrap__col--xl-5-11 {
width: 45.45455%;
}
.wrap__col--xl-6-11 {
width: 54.54545%;
}
.wrap__col--xl-7-11 {
width: 63.63636%;
}
.wrap__col--xl-8-11 {
width: 72.72727%;
}
.wrap__col--xl-9-11 {
width: 81.81818%;
}
.wrap__col--xl-10-11 {
width: 90.90909%;
}
.wrap__col--xl-1-12 {
width: 8.33333%;
}
.wrap__col--xl-2-12 {
width: 16.66667%;
}
.wrap__col--xl-3-12 {
width: 25%;
}
.wrap__col--xl-4-12 {
width: 33.33333%;
}
.wrap__col--xl-5-12 {
width: 41.66667%;
}
.wrap__col--xl-6-12 {
width: 50%;
}
.wrap__col--xl-7-12 {
width: 58.33333%;
}
.wrap__col--xl-8-12 {
width: 66.66667%;
}
.wrap__col--xl-9-12 {
width: 75%;
}
.wrap__col--xl-10-12 {
width: 83.33333%;
}
.wrap__col--xl-11-12 {
width: 91.66667%;
}
.wrap__col--xl-hidden {
display: none;
}
.wrap__col--xl-not-hidden {
display: inline-block;
}
.wrap__col--xl-first {
-ms-flex-order: -1;
-webkit-order: -1;
order: -1;
}
.wrap__col--xl-not-first {
-ms-flex-order: 0;
-webkit-order: 0;
order: 0;
}
.wrap__col--xl-last {
-ms-flex-order: 1;
-webkit-order: 1;
order: 1;
}
.wrap__col--xl-not-last {
-ms-flex-order: 0;
-webkit-order: 0;
order: 0;
}
.wrap--xl-gutter-0 {
width: calc(100% + 0px);
margin-left: -0px;
margin-right: -0px;
padding-left: 0;
padding-right: 0;
}
.wrap--xl-gutter-0 > * {
padding-left: 0px;
padding-right: 0px;
}
.wrap--xl-gutter-8 {
width: calc(100% + 8px);
margin-left: -4px;
margin-right: -4px;
padding-left: 0;
padding-right: 0;
}
.wrap--xl-gutter-8 > * {
padding-left: 4px;
padding-right: 4px;
}
.wrap--xl-gutter-16 {
width: calc(100% + 16px);
margin-left: -8px;
margin-right: -8px;
padding-left: 0;
padding-right: 0;
}
.wrap--xl-gutter-16 > * {
padding-left: 8px;
padding-right: 8px;
}
.wrap--xl-gutter-24 {
width: calc(100% + 24px);
margin-left: -12px;
margin-right: -12px;
padding-left: 0;
padding-right: 0;
}
.wrap--xl-gutter-24 > * {
padding-left: 12px;
padding-right: 12px;
}
.wrap--xl-gutter-40 {
width: calc(100% + 40px);
margin-left: -20px;
margin-right: -20px;
padding-left: 0;
padding-right: 0;
}
.wrap--xl-gutter-40 > * {
padding-left: 20px;
padding-right: 20px;
}
.wrap--xl-outside-0 {
width: 100%;
margin-left: 0;
margin-right: 0;
padding-left: 0px;
padding-right: 0px;
}
.wrap--xl-outside-8 {
width: 100%;
margin-left: 0;
margin-right: 0;
padding-left: 4px;
padding-right: 4px;
}
.wrap--xl-outside-16 {
width: 100%;
margin-left: 0;
margin-right: 0;
padding-left: 8px;
padding-right: 8px;
}
.wrap--xl-outside-24 {
width: 100%;
margin-left: 0;
margin-right: 0;
padding-left: 12px;
padding-right: 12px;
}
.wrap--xl-outside-40 {
width: 100%;
margin-left: 0;
margin-right: 0;
padding-left: 20px;
padding-right: 20px;
}
.wrap--xl-masonry-2 {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}
.wrap--xl-masonry-3 {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
}
.wrap--xl-masonry-4 {
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
}
.wrap--xl-masonry-5 {
-webkit-column-count: 5;
-moz-column-count: 5;
column-count: 5;
}
.wrap--xl-masonry-6 {
-webkit-column-count: 6;
-moz-column-count: 6;
column-count: 6;
}
@media (max-width: 1024px) {
.wrap--lg-auto > * {
width: auto;
}
.wrap--lg-1 > * {
width: 100%;
}
.wrap--lg-2 > * {
width: 50%;
}
.wrap--lg-3 > * {
width: 33.33333%;
}
.wrap--lg-4 > * {
width: 25%;
}
.wrap--lg-5 > * {
width: 20%;
}
.wrap--lg-6 > * {
width: 16.66667%;
}
.wrap--lg-7 > * {
width: 14.28571%;
}
.wrap--lg-8 > * {
width: 12.5%;
}
.wrap--lg-9 > * {
width: 11.11111%;
}
.wrap--lg-10 > * {
width: 10%;
}
.wrap--lg-11 > * {
width: 9.09091%;
}
.wrap--lg-12 > * {
width: 8.33333%;
}
.wrap--lg-table {
display: table;
table-layout: fixed;
-webkit-flex-direction: initial;
-ms-flex-direction: initial;
flex-direction: initial;
-webkit-flex-wrap: initial;
-ms-flex-wrap: initial;
flex-wrap: initial;
-webkit-justify-content: initial;
-ms-justify-content: initial;
justify-content: initial;
-webkit-align-content: initial;
-ms-align-content: initial;
align-content: initial;
-webkit-align-items: initial;
-ms-align-items: initial;
align-items: initial;
-webkit-column-count: auto;
-moz-column-count: auto;
column-count: auto;
}
.wrap--lg-table > * {
display: table-cell;
}
.wrap--lg-flexbox {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
table-layout: auto;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: flex-start;
-ms-justify-content: flex-start;
justify-content: flex-start;
-webkit-align-content: center;
-ms-align-content: center;
align-content: center;
-webkit-align-items: center;
-ms-align-items: center;
align-items: center;
-webkit-column-count: auto;
-moz-column-count: auto;
column-count: auto;
}
.wrap--lg-flexbox > * {
display: inline-block;
}
.wrap--lg-normal {
display: block;
table-layout: auto;
-webkit-flex-direction: initial;
-ms-flex-direction: initial;
flex-direction: initial;
-webkit-flex-wrap: initial;
-ms-flex-wrap: initial;
flex-wrap: initial;
-webkit-justify-content: initial;
-ms-justify-content: initial;
justify-content: initial;
-webkit-align-content: initial;
-ms-align-content: initial;
align-content: initial;
-webkit-align-items: initial;
-ms-align-items: initial;
align-items: initial;
-webkit-column-count: auto;
-moz-column-count: auto;
column-count: auto;
}
.wrap--lg-normal > * {
display: inline-block;
}
.wrap--lg-left {
-webkit-justify-content: flex-start;
-ms-justify-content: flex-start;
justify-content: flex-start;
text-align: left;
}
.wrap--lg-center {
-webkit-justify-content: center;
-ms-justify-content: center;
justify-content: center;
text-align: center;
}
.wrap--lg-right {
-webkit-justify-content: flex-end;
-ms-justify-content: flex-end;
justify-content: flex-end;
text-align: right;
}
.wrap--lg-top {
-webkit-align-items: flex-start;
-ms-align-items: flex-start;
align-items: flex-start;
}
.wrap--lg-top > * {
vertical-align: top;
}
.wrap--lg-middle {
-webkit-align-items: center;
-ms-align-items: center;
align-items: center;
}
.wrap--lg-middle > * {
vertical-align: middle;
}
.wrap--lg-bottom {
-webkit-align-items: flex-end;
-ms-align-items: flex-end;
align-items: flex-end;
}
.wrap--lg-bottom > * {
vertical-align: bottom;
}
.wrap--lg-between {
-webkit-justify-content: space-between;
-ms-justify-content: space-between;
justify-content: space-between;
-webkit-align-content: space-between;
-ms-align-content: space-between;
align-content: space-between;
}
.wrap--lg-around {
-webkit-justify-content: space-around;
-ms-justify-content: space-around;
justify-content: space-around;
-webkit-align-content: space-around;
-ms-align-content: space-around;
align-content: space-around;
}
.wrap--lg-baseline {
-webkit-align-items: baseline;
-ms-align-items: baseline;
align-items: baseline;
}
.wrap--lg-reverse {
-webkit-flex-direction: row-reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
-webkit-flex-wrap: wrap-reverse;
-ms-flex-wrap: wrap-reverse;
flex-wrap: wrap-reverse;
}
.wrap--lg-not-reverse {
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.wrap__col--lg-1-1 {
width: 100%;
}
.wrap__col--lg-1-2 {
width: 50%;
}
.wrap__col--lg-1-3 {
width: 33.33333%;
}
.wrap__col--lg-2-3 {
width: 66.66667%;
}
.wrap__col--lg-1-4 {
width: 25%;
}
.wrap__col--lg-2-4 {
width: 50%;
}
.wrap__col--lg-3-4 {
width: 75%;
}
.wrap__col--lg-1-5 {
width: 20%;
}
.wrap__col--lg-2-5 {
width: 40%;
}
.wrap__col--lg-3-5 {
width: 60%;
}
.wrap__col--lg-4-5 {
width: 80%;
}
.wrap__col--lg-1-6 {
width: 16.66667%;
}
.wrap__col--lg-2-6 {
width: 33.33333%;
}
.wrap__col--lg-3-6 {
width: 50%;
}
.wrap__col--lg-4-6 {
width: 66.66667%;
}
.wrap__col--lg-5-6 {
width: 83.33333%;
}
.wrap__col--lg-1-7 {
width: 14.28571%;
}
.wrap__col--lg-2-7 {
width: 28.57143%;
}
.wrap__col--lg-3-7 {
width: 42.85714%;
}
.wrap__col--lg-4-7 {
width: 57.14286%;
}
.wrap__col--lg-5-7 {
width: 71.42857%;
}
.wrap__col--lg-6-7 {
width: 85.71429%;
}
.wrap__col--lg-1-8 {
width: 12.5%;
}
.wrap__col--lg-2-8 {
width: 25%;
}
.wrap__col--lg-3-8 {
width: 37.5%;
}
.wrap__col--lg-4-8 {
width: 50%;
}
.wrap__col--lg-5-8 {
width: 62.5%;
}
.wrap__col--lg-6-8 {
width: 75%;
}
.wrap__col--lg-7-8 {
width: 87.5%;
}
.wrap__col--lg-1-9 {
width: 11.11111%;
}
.wrap__col--lg-2-9 {
width: 22.22222%;
}
.wrap__col--lg-3-9 {
width: 33.33333%;
}
.wrap__col--lg-4-9 {
width: 44.44444%;
}
.wrap__col--lg-5-9 {
width: 55.55556%;
}
.wrap__col--lg-6-9 {
width: 66.66667%;
}
.wrap__col--lg-7-9 {
width: 77.77778%;
}
.wrap__col--lg-8-9 {
width: 88.88889%;
}
.wrap__col--lg-1-10 {
width: 10%;
}
.wrap__col--lg-2-10 {
width: 20%;
}
.wrap__col--lg-3-10 {
width: 30%;
}
.wrap__col--lg-4-10 {
width: 40%;
}
.wrap__col--lg-5-10 {
width: 50%;
}
.wrap__col--lg-6-10 {
width: 60%;
}
.wrap__col--lg-7-10 {
width: 70%;
}
.wrap__col--lg-8-10 {
width: 80%;
}
.wrap__col--lg-9-10 {
width: 90%;
}
.wrap__col--lg-1-11 {
width: 9.09091%;
}
.wrap__col--lg-2-11 {
width: 18.18182%;
}
.wrap__col--lg-3-11 {
width: 27.27273%;
}
.wrap__col--lg-4-11 {
width: 36.36364%;
}
.wrap__col--lg-5-11 {
width: 45.45455%;
}
.wrap__col--lg-6-11 {
width: 54.54545%;
}
.wrap__col--lg-7-11 {
width: 63.63636%;
}
.wrap__col--lg-8-11 {
width: 72.72727%;
}
.wrap__col--lg-9-11 {
width: 81.81818%;
}
.wrap__col--lg-10-11 {
width: 90.90909%;
}
.wrap__col--lg-1-12 {
width: 8.33333%;
}
.wrap__col--lg-2-12 {
width: 16.66667%;
}
.wrap__col--lg-3-12 {
width: 25%;
}
.wrap__col--lg-4-12 {
width: 33.33333%;
}
.wrap__col--lg-5-12 {
width: 41.66667%;
}
.wrap__col--lg-6-12 {
width: 50%;
}
.wrap__col--lg-7-12 {
width: 58.33333%;
}
.wrap__col--lg-8-12 {
width: 66.66667%;
}
.wrap__col--lg-9-12 {
width: 75%;
}
.wrap__col--lg-10-12 {
width: 83.33333%;
}
.wrap__col--lg-11-12 {
width: 91.66667%;
}
.wrap__col--lg-hidden {
display: none;
}
.wrap__col--lg-not-hidden {
display: inline-block;
}
.wrap__col--lg-first {
-ms-flex-order: -1;
-webkit-order: -1;
order: -1;
}
.wrap__col--lg-not-first {
-ms-flex-order: 0;
-webkit-order: 0;
order: 0;
}
.wrap__col--lg-last {
-ms-flex-order: 1;
-webkit-order: 1;
order: 1;
}
.wrap__col--lg-not-last {
-ms-flex-order: 0;
-webkit-order: 0;
order: 0;
}
.wrap--lg-gutter-0 {
width: calc(100% + 0px);
margin-left: -0px;
margin-right: -0px;
padding-left: 0;
padding-right: 0;
}
.wrap--lg-gutter-0 > * {
padding-left: 0px;
padding-right: 0px;
}
.wrap--lg-gutter-8 {
width: calc(100% + 8px);
margin-left: -4px;
margin-right: -4px;
padding-left: 0;
padding-right: 0;
}
.wrap--lg-gutter-8 > * {
padding-left: 4px;
padding-right: 4px;
}
.wrap--lg-gutter-16 {
width: calc(100% + 16px);
margin-left: -8px;
margin-right: -8px;
padding-left: 0;
padding-right: 0;
}
.wrap--lg-gutter-16 > * {
padding-left: 8px;
padding-right: 8px;
}
.wrap--lg-gutter-24 {
width: calc(100% + 24px);
margin-left: -12px;
margin-right: -12px;
padding-left: 0;
padding-right: 0;
}
.wrap--lg-gutter-24 > * {
padding-left: 12px;
padding-right: 12px;
}
.wrap--lg-gutter-40 {
width: calc(100% + 40px);
margin-left: -20px;
margin-right: -20px;
padding-left: 0;
padding-right: 0;
}
.wrap--lg-gutter-40 > * {
padding-left: 20px;
padding-right: 20px;
}
.wrap--lg-outside-0 {
width: 100%;
margin-left: 0;
margin-right: 0;
padding-left: 0px;
padding-right: 0px;
}
.wrap--lg-outside-8 {
width: 100%;
margin-left: 0;
margin-right: 0;
padding-left: 4px;
padding-right: 4px;
}
.wrap--lg-outside-16 {
width: 100%;
margin-left: 0;
margin-right: 0;
padding-left: 8px;
padding-right: 8px;
}
.wrap--lg-outside-24 {
width: 100%;
margin-left: 0;
margin-right: 0;
padding-left: 12px;
padding-right: 12px;
}
.wrap--lg-outside-40 {
width: 100%;
margin-left: 0;
margin-right: 0;
padding-left: 20px;
padding-right: 20px;
}
.wrap--lg-masonry-2 {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}
.wrap--lg-masonry-3 {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
}
.wrap--lg-masonry-4 {
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
}
.wrap--lg-masonry-5 {
-webkit-column-count: 5;
-moz-column-count: 5;
column-count: 5;
}
.wrap--lg-masonry-6 {
-webkit-column-count: 6;
-moz-column-count: 6;
column-count: 6;
}
}
@media (max-width: 768px) {
.wrap--md-auto > * {
width: auto;
}
.wrap--md-1 > * {
width: 100%;
}
.wrap--md-2 > * {
width: 50%;
}
.wrap--md-3 > * {
width: 33.33333%;
}
.wrap--md-4 > * {
width: 25%;
}
.wrap--md-5 > * {
width: 20%;
}
.wrap--md-6 > * {
width: 16.66667%;
}
.wrap--md-7 > * {
width: 14.28571%;
}
.wrap--md-8 > * {
width: 12.5%;
}
.wrap--md-9 > * {
width: 11.11111%;
}
.wrap--md-10 > * {
width: 10%;
}
.wrap--md-11 > * {
width: 9.09091%;
}
.wrap--md-12 > * {
width: 8.33333%;
}
.wrap--md-table {
display: table;
table-layout: fixed;
-webkit-flex-direction: initial;
-ms-flex-direction: initial;
flex-direction: initial;
-webkit-flex-wrap: initial;
-ms-flex-wrap: initial;
flex-wrap: initial;
-webkit-justify-content: initial;
-ms-justify-content: initial;
justify-content: initial;
-webkit-align-content: initial;
-ms-align-content: initial;
align-content: initial;
-webkit-align-items: initial;
-ms-align-items: initial;
align-items: initial;
-webkit-column-count: auto;
-moz-column-count: auto;
column-count: auto;
}
.wrap--md-table > * {
display: table-cell;
}
.wrap--md-flexbox {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
table-layout: auto;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: flex-start;
-ms-justify-content: flex-start;
justify-content: flex-start;
-webkit-align-content: center;
-ms-align-content: center;
align-content: center;
-webkit-align-items: center;
-ms-align-items: center;
align-items: center;
-webkit-column-count: auto;
-moz-column-count: auto;
column-count: auto;
}
.wrap--md-flexbox > * {
display: inline-block;
}
.wrap--md-normal {
display: block;
table-layout: auto;
-webkit-flex-direction: initial;
-ms-flex-direction: initial;
flex-direction: initial;
-webkit-flex-wrap: initial;
-ms-flex-wrap: initial;
flex-wrap: initial;
-webkit-justify-content: initial;
-ms-justify-content: initial;
justify-content: initial;
-webkit-align-content: initial;
-ms-align-content: initial;
align-content: initial;
-webkit-align-items: initial;
-ms-align-items: initial;
align-items: initial;
-webkit-column-count: auto;
-moz-column-count: auto;
column-count: auto;
}
.wrap--md-normal > * {
display: inline-block;
}
.wrap--md-left {
-webkit-justify-content: flex-start;
-ms-justify-content: flex-start;
justify-content: flex-start;
text-align: left;
}
.wrap--md-center {
-webkit-justify-content: center;
-ms-justify-content: center;
justify-content: center;
text-align: center;
}
.wrap--md-right {
-webkit-justify-content: flex-end;
-ms-justify-content: flex-end;
justify-content: flex-end;
text-align: right;
}
.wrap--md-top {
-webkit-align-items: flex-start;
-ms-align-items: flex-start;
align-items: flex-start;
}
.wrap--md-top > * {
vertical-align: top;
}
.wrap--md-middle {
-webkit-align-items: center;
-ms-align-items: center;
align-items: center;
}
.wrap--md-middle > * {
vertical-align: middle;
}
.wrap--md-bottom {
-webkit-align-items: flex-end;
-ms-align-items: flex-end;
align-items: flex-end;
}
.wrap--md-bottom > * {
vertical-align: bottom;
}
.wrap--md-between {
-webkit-justify-content: space-between;
-ms-justify-content: space-between;
justify-content: space-between;
-webkit-align-content: space-between;
-ms-align-content: space-between;
align-content: space-between;
}
.wrap--md-around {
-webkit-justify-content: space-around;
-ms-justify-content: space-around;
justify-content: space-around;
-webkit-align-content: space-around;
-ms-align-content: space-around;
align-content: space-around;
}
.wrap--md-baseline {
-webkit-align-items: baseline;
-ms-align-items: baseline;
align-items: baseline;
}
.wrap--md-reverse {
-webkit-flex-direction: row-reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
-webkit-flex-wrap: wrap-reverse;
-ms-flex-wrap: wrap-reverse;
flex-wrap: wrap-reverse;
}
.wrap--md-not-reverse {
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.wrap__col--md-1-1 {
width: 100%;
}
.wrap__col--md-1-2 {
width: 50%;
}
.wrap__col--md-1-3 {
width: 33.33333%;
}
.wrap__col--md-2-3 {
width: 66.66667%;
}
.wrap__col--md-1-4 {
width: 25%;
}
.wrap__col--md-2-4 {
width: 50%;
}
.wrap__col--md-3-4 {
width: 75%;
}
.wrap__col--md-1-5 {
width: 20%;
}
.wrap__col--md-2-5 {
width: 40%;
}
.wrap__col--md-3-5 {
width: 60%;
}
.wrap__col--md-4-5 {
width: 80%;
}
.wrap__col--md-1-6 {
width: 16.66667%;
}
.wrap__col--md-2-6 {
width: 33.33333%;
}
.wrap__col--md-3-6 {
width: 50%;
}
.wrap__col--md-4-6 {
width: 66.66667%;
}
.wrap__col--md-5-6 {
width: 83.33333%;
}
.wrap__col--md-1-7 {
width: 14.28571%;
}
.wrap__col--md-2-7 {
width: 28.57143%;
}
.wrap__col--md-3-7 {
width: 42.85714%;
}
.wrap__col--md-4-7 {
width: 57.14286%;
}
.wrap__col--md-5-7 {
width: 71.42857%;
}
.wrap__col--md-6-7 {
width: 85.71429%;
}
.wrap__col--md-1-8 {
width: 12.5%;
}
.wrap__col--md-2-8 {
width: 25%;
}
.wrap__col--md-3-8 {
width: 37.5%;
}
.wrap__col--md-4-8 {
width: 50%;
}
.wrap__col--md-5-8 {
width: 62.5%;
}
.wrap__col--md-6-8 {
width: 75%;
}
.wrap__col--md-7-8 {
width: 87.5%;
}
.wrap__col--md-1-9 {
width: 11.11111%;
}
.wrap__col--md-2-9 {
width: 22.22222%;
}
.wrap__col--md-3-9 {
width: 33.33333%;
}
.wrap__col--md-4-9 {
width: 44.44444%;
}
.wrap__col--md-5-9 {
width: 55.55556%;
}
.wrap__col--md-6-9 {
width: 66.66667%;
}
.wrap__col--md-7-9 {
width: 77.77778%;
}
.wrap__col--md-8-9 {
width: 88.88889%;
}
.wrap__col--md-1-10 {
width: 10%;
}
.wrap__col--md-2-10 {
width: 20%;
}
.wrap__col--md-3-10 {
width: 30%;
}
.wrap__col--md-4-10 {
width: 40%;
}
.wrap__col--md-5-10 {
width: 50%;
}
.wrap__col--md-6-10 {
width: 60%;
}
.wrap__col--md-7-10 {
width: 70%;
}
.wrap__col--md-8-10 {
width: 80%;
}
.wrap__col--md-9-10 {
width: 90%;
}
.wrap__col--md-1-11 {
width: 9.09091%;
}
.wrap__col--md-2-11 {
width: 18.18182%;
}
.wrap__col--md-3-11 {
width: 27.27273%;
}
.wrap__col--md-4-11 {
width: 36.36364%;
}
.wrap__col--md-5-11 {
width: 45.45455%;
}
.wrap__col--md-6-11 {
width: 54.54545%;
}
.wrap__col--md-7-11 {
width: 63.63636%;
}
.wrap__col--md-8-11 {
width: 72.72727%;
}
.wrap__col--md-9-11 {
width: 81.81818%;
}
.wrap__col--md-10-11 {
width: 90.90909%;
}
.wrap__col--md-1-12 {
width: 8.33333%;
}
.wrap__col--md-2-12 {
width: 16.66667%;
}
.wrap__col--md-3-12 {
width: 25%;
}
.wrap__col--md-4-12 {
width: 33.33333%;
}
.wrap__col--md-5-12 {
width: 41.66667%;
}
.wrap__col--md-6-12 {
width: 50%;
}
.wrap__col--md-7-12 {
width: 58.33333%;
}
.wrap__col--md-8-12 {
width: 66.66667%;
}
.wrap__col--md-9-12 {
width: 75%;
}
.wrap__col--md-10-12 {
width: 83.33333%;
}
.wrap__col--md-11-12 {
width: 91.66667%;
}
.wrap__col--md-hidden {
display: none;
}
.wrap__col--md-not-hidden {
display: inline-block;
}
.wrap__col--md-first {
-ms-flex-order: -1;
-webkit-order: -1;
order: -1;
}
.wrap__col--md-not-first {
-ms-flex-order: 0;
-webkit-order: 0;
order: 0;
}
.wrap__col--md-last {
-ms-flex-order: 1;
-webkit-order: 1;
order: 1;
}
.wrap__col--md-not-last {
-ms-flex-order: 0;
-webkit-order: 0;
order: 0;
}
.wrap--md-gutter-0 {
width: calc(100% + 0px);
margin-left: -0px;
margin-right: -0px;
padding-left: 0;
padding-right: 0;
}
.wrap--md-gutter-0 > * {
padding-left: 0px;
padding-right: 0px;
}
.wrap--md-gutter-8 {
width: calc(100% + 8px);
margin-left: -4px;
margin-right: -4px;
padding-left: 0;
padding-right: 0;
}
.wrap--md-gutter-8 > * {
padding-left: 4px;
padding-right: 4px;
}
.wrap--md-gutter-16 {
width: calc(100% + 16px);
margin-left: -8px;
margin-right: -8px;
padding-left: 0;
padding-right: 0;
}
.wrap--md-gutter-16 > * {
padding-left: 8px;
padding-right: 8px;
}
.wrap--md-gutter-24 {
width: calc(100% + 24px);
margin-left: -12px;
margin-right: -12px;
padding-left: 0;
padding-right: 0;
}
.wrap--md-gutter-24 > * {
padding-left: 12px;
padding-right: 12px;
}
.wrap--md-gutter-40 {
width: calc(100% + 40px);
margin-left: -20px;
margin-right: -20px;
padding-left: 0;
padding-right: 0;
}
.wrap--md-gutter-40 > * {
padding-left: 20px;
padding-right: 20px;
}
.wrap--md-outside-0 {
width: 100%;
margin-left: 0;
margin-right: 0;
padding-left: 0px;
padding-right: 0px;
}
.wrap--md-outside-8 {
width: 100%;
margin-left: 0;
margin-right: 0;
padding-left: 4px;
padding-right: 4px;
}
.wrap--md-outside-16 {
width: 100%;
margin-left: 0;
margin-right: 0;
padding-left: 8px;
padding-right: 8px;
}
.wrap--md-outside-24 {
width: 100%;
margin-left: 0;
margin-right: 0;
padding-left: 12px;
padding-right: 12px;
}
.wrap--md-outside-40 {
width: 100%;
margin-left: 0;
margin-right: 0;
padding-left: 20px;
padding-right: 20px;
}
.wrap--md-masonry-2 {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}
.wrap--md-masonry-3 {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
}
.wrap--md-masonry-4 {
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
}
.wrap--md-masonry-5 {
-webkit-column-count: 5;
-moz-column-count: 5;
column-count: 5;
}
.wrap--md-masonry-6 {
-webkit-column-count: 6;
-moz-column-count: 6;
column-count: 6;
}
}
@media (max-width: 667px) {
.wrap--sm-auto > * {
width: auto;
}
.wrap--sm-1 > * {
width: 100%;
}
.wrap--sm-2 > * {
width: 50%;
}
.wrap--sm-3 > * {
width: 33.33333%;
}
.wrap--sm-4 > * {
width: 25%;
}
.wrap--sm-5 > * {
width: 20%;
}
.wrap--sm-6 > * {
width: 16.66667%;
}
.wrap--sm-7 > * {
width: 14.28571%;
}
.wrap--sm-8 > * {
width: 12.5%;
}
.wrap--sm-9 > * {
width: 11.11111%;
}
.wrap--sm-10 > * {
width: 10%;
}
.wrap--sm-11 > * {
width: 9.09091%;
}
.wrap--sm-12 > * {
width: 8.33333%;
}
.wrap--sm-table {
display: table;
table-layout: fixed;
-webkit-flex-direction: initial;
-ms-flex-direction: initial;
flex-direction: initial;
-webkit-flex-wrap: initial;
-ms-flex-wrap: initial;
flex-wrap: initial;
-webkit-justify-content: initial;
-ms-justify-content: initial;
justify-content: initial;
-webkit-align-content: initial;
-ms-align-content: initial;
align-content: initial;
-webkit-align-items: initial;
-ms-align-items: initial;
align-items: initial;
-webkit-column-count: auto;
-moz-column-count: auto;
column-count: auto;
}
.wrap--sm-table > * {
display: table-cell;
}
.wrap--sm-flexbox {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
table-layout: auto;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: flex-start;
-ms-justify-content: flex-start;
justify-content: flex-start;
-webkit-align-content: center;
-ms-align-content: center;
align-content: center;
-webkit-align-items: center;
-ms-align-items: center;
align-items: center;
-webkit-column-count: auto;
-moz-column-count: auto;
column-count: auto;
}
.wrap--sm-flexbox > * {
display: inline-block;
}
.wrap--sm-normal {
display: block;
table-layout: auto;
-webkit-flex-direction: initial;
-ms-flex-direction: initial;
flex-direction: initial;
-webkit-flex-wrap: initial;
-ms-flex-wrap: initial;
flex-wrap: initial;
-webkit-justify-content: initial;
-ms-justify-content: initial;
justify-content: initial;
-webkit-align-content: initial;
-ms-align-content: initial;
align-content: initial;
-webkit-align-items: initial;
-ms-align-items: initial;
align-items: initial;
-webkit-column-count: auto;
-moz-column-count: auto;
column-count: auto;
}
.wrap--sm-normal > * {
display: inline-block;
}
.wrap--sm-left {
-webkit-justify-content: flex-start;
-ms-justify-content: flex-start;
justify-content: flex-start;
text-align: left;
}
.wrap--sm-center {
-webkit-justify-content: center;
-ms-justify-content: center;
justify-content: center;
text-align: center;
}
.wrap--sm-right {
-webkit-justify-content: flex-end;
-ms-justify-content: flex-end;
justify-content: flex-end;
text-align: right;
}
.wrap--sm-top {
-webkit-align-items: flex-start;
-ms-align-items: flex-start;
align-items: flex-start;
}
.wrap--sm-top > * {
vertical-align: top;
}
.wrap--sm-middle {
-webkit-align-items: center;
-ms-align-items: center;
align-items: center;
}
.wrap--sm-middle > * {
vertical-align: middle;
}
.wrap--sm-bottom {
-webkit-align-items: flex-end;
-ms-align-items: flex-end;
align-items: flex-end;
}
.wrap--sm-bottom > * {
vertical-align: bottom;
}
.wrap--sm-between {
-webkit-justify-content: space-between;
-ms-justify-content: space-between;
justify-content: space-between;
-webkit-align-content: space-between;
-ms-align-content: space-between;
align-content: space-between;
}
.wrap--sm-around {
-webkit-justify-content: space-around;
-ms-justify-content: space-around;
justify-content: space-around;
-webkit-align-content: space-around;
-ms-align-content: space-around;
align-content: space-around;
}
.wrap--sm-baseline {
-webkit-align-items: baseline;
-ms-align-items: baseline;
align-items: baseline;
}
.wrap--sm-reverse {
-webkit-flex-direction: row-reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
-webkit-flex-wrap: wrap-reverse;
-ms-flex-wrap: wrap-reverse;
flex-wrap: wrap-reverse;
}
.wrap--sm-not-reverse {
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.wrap__col--sm-1-1 {
width: 100%;
}
.wrap__col--sm-1-2 {
width: 50%;
}
.wrap__col--sm-1-3 {
width: 33.33333%;
}
.wrap__col--sm-2-3 {
width: 66.66667%;
}
.wrap__col--sm-1-4 {
width: 25%;
}
.wrap__col--sm-2-4 {
width: 50%;
}
.wrap__col--sm-3-4 {
width: 75%;
}
.wrap__col--sm-1-5 {
width: 20%;
}
.wrap__col--sm-2-5 {
width: 40%;
}
.wrap__col--sm-3-5 {
width: 60%;
}
.wrap__col--sm-4-5 {
width: 80%;
}
.wrap__col--sm-1-6 {
width: 16.66667%;
}
.wrap__col--sm-2-6 {
width: 33.33333%;
}
.wrap__col--sm-3-6 {
width: 50%;
}
.wrap__col--sm-4-6 {
width: 66.66667%;
}
.wrap__col--sm-5-6 {
width: 83.33333%;
}
.wrap__col--sm-1-7 {
width: 14.28571%;
}
.wrap__col--sm-2-7 {
width: 28.57143%;
}
.wrap__col--sm-3-7 {
width: 42.85714%;
}
.wrap__col--sm-4-7 {
width: 57.14286%;
}
.wrap__col--sm-5-7 {
width: 71.42857%;
}
.wrap__col--sm-6-7 {
width: 85.71429%;
}
.wrap__col--sm-1-8 {
width: 12.5%;
}
.wrap__col--sm-2-8 {
width: 25%;
}
.wrap__col--sm-3-8 {
width: 37.5%;
}
.wrap__col--sm-4-8 {
width: 50%;
}
.wrap__col--sm-5-8 {
width: 62.5%;
}
.wrap__col--sm-6-8 {
width: 75%;
}
.wrap__col--sm-7-8 {
width: 87.5%;
}
.wrap__col--sm-1-9 {
width: 11.11111%;
}
.wrap__col--sm-2-9 {
width: 22.22222%;
}
.wrap__col--sm-3-9 {
width: 33.33333%;
}
.wrap__col--sm-4-9 {
width: 44.44444%;
}
.wrap__col--sm-5-9 {
width: 55.55556%;
}
.wrap__col--sm-6-9 {
width: 66.66667%;
}
.wrap__col--sm-7-9 {
width: 77.77778%;
}
.wrap__col--sm-8-9 {
width: 88.88889%;
}
.wrap__col--sm-1-10 {
width: 10%;
}
.wrap__col--sm-2-10 {
width: 20%;
}
.wrap__col--sm-3-10 {
width: 30%;
}
.wrap__col--sm-4-10 {
width: 40%;
}
.wrap__col--sm-5-10 {
width: 50%;
}
.wrap__col--sm-6-10 {
width: 60%;
}
.wrap__col--sm-7-10 {
width: 70%;
}
.wrap__col--sm-8-10 {
width: 80%;
}
.wrap__col--sm-9-10 {
width: 90%;
}
.wrap__col--sm-1-11 {
width: 9.09091%;
}
.wrap__col--sm-2-11 {
width: 18.18182%;
}
.wrap__col--sm-3-11 {
width: 27.27273%;
}
.wrap__col--sm-4-11 {
width: 36.36364%;
}
.wrap__col--sm-5-11 {
width: 45.45455%;
}
.wrap__col--sm-6-11 {
width: 54.54545%;
}
.wrap__col--sm-7-11 {
width: 63.63636%;
}
.wrap__col--sm-8-11 {
width: 72.72727%;
}
.wrap__col--sm-9-11 {
width: 81.81818%;
}
.wrap__col--sm-10-11 {
width: 90.90909%;
}
.wrap__col--sm-1-12 {
width: 8.33333%;
}
.wrap__col--sm-2-12 {
width: 16.66667%;
}
.wrap__col--sm-3-12 {
width: 25%;
}
.wrap__col--sm-4-12 {
width: 33.33333%;
}
.wrap__col--sm-5-12 {
width: 41.66667%;
}
.wrap__col--sm-6-12 {
width: 50%;
}
.wrap__col--sm-7-12 {
width: 58.33333%;
}
.wrap__col--sm-8-12 {
width: 66.66667%;
}
.wrap__col--sm-9-12 {
width: 75%;
}
.wrap__col--sm-10-12 {
width: 83.33333%;
}
.wrap__col--sm-11-12 {
width: 91.66667%;
}
.wrap__col--sm-hidden {
display: none;
}
.wrap__col--sm-not-hidden {
display: inline-block;
}
.wrap__col--sm-first {
-ms-flex-order: -1;
-webkit-order: -1;
order: -1;
}
.wrap__col--sm-not-first {
-ms-flex-order: 0;
-webkit-order: 0;
order: 0;
}
.wrap__col--sm-last {
-ms-flex-order: 1;
-webkit-order: 1;
order: 1;
}
.wrap__col--sm-not-last {
-ms-flex-order: 0;
-webkit-order: 0;
order: 0;
}
.wrap--sm-gutter-0 {
width: calc(100% + 0px);
margin-left: -0px;
margin-right: -0px;
padding-left: 0;
padding-right: 0;
}
.wrap--sm-gutter-0 > * {
padding-left: 0px;
padding-right: 0px;
}
.wrap--sm-gutter-8 {
width: calc(100% + 8px);
margin-left: -4px;
margin-right: -4px;
padding-left: 0;
padding-right: 0;
}
.wrap--sm-gutter-8 > * {
padding-left: 4px;
padding-right: 4px;
}
.wrap--sm-gutter-16 {
width: calc(100% + 16px);
margin-left: -8px;
margin-right: -8px;
padding-left: 0;
padding-right: 0;
}
.wrap--sm-gutter-16 > * {
padding-left: 8px;
padding-right: 8px;
}
.wrap--sm-gutter-24 {
width: calc(100% + 24px);
margin-left: -12px;
margin-right: -12px;
padding-left: 0;
padding-right: 0;
}
.wrap--sm-gutter-24 > * {
padding-left: 12px;
padding-right: 12px;
}
.wrap--sm-gutter-40 {
width: calc(100% + 40px);
margin-left: -20px;
margin-right: -20px;
padding-left: 0;
padding-right: 0;
}
.wrap--sm-gutter-40 > * {
padding-left: 20px;
padding-right: 20px;
}
.wrap--sm-outside-0 {
width: 100%;
margin-left: 0;
margin-right: 0;
padding-left: 0px;
padding-right: 0px;
}
.wrap--sm-outside-8 {
width: 100%;
margin-left: 0;
margin-right: 0;
padding-left: 4px;
padding-right: 4px;
}
.wrap--sm-outside-16 {
width: 100%;
margin-left: 0;
margin-right: 0;
padding-left: 8px;
padding-right: 8px;
}
.wrap--sm-outside-24 {
width: 100%;
margin-left: 0;
margin-right: 0;
padding-left: 12px;
padding-right: 12px;
}
.wrap--sm-outside-40 {
width: 100%;
margin-left: 0;
margin-right: 0;
padding-left: 20px;
padding-right: 20px;
}
.wrap--sm-masonry-2 {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}
.wrap--sm-masonry-3 {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
}
.wrap--sm-masonry-4 {
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
}
.wrap--sm-masonry-5 {
-webkit-column-count: 5;
-moz-column-count: 5;
column-count: 5;
}
.wrap--sm-masonry-6 {
-webkit-column-count: 6;
-moz-column-count: 6;
column-count: 6;
}
}</style></head><body>
<header class="flex hero">
<div class="flex-left">
<div class="btn-round ripple menu"></div>
<h2>Zayn<span>Designs</span></h2>
</div>
<div class="flex center d-o">
<input placeholder="Search Stories"/><img src="http://cbwconline.com/IMG/Codepen/Search.svg" class="search"/>
</div>
<div class="flex-right">
<div title="Google Apps" class="btn-round ripple apps d-o"></div>
<div title="Google Notifications" class="btn-round ripple notifications d-o"></div><img src="http://i1-news.softpedia-static.com/images/news2/the-new-google-logo-is-a-lesson-in-modern-design-490648-3.jpg" class="btn-round profile d-o profile-tikla"/>
<div class="search-btn btn-round ripple m-o"></div>
</div>
<div class="mobile-search">
<div class="header flex-left">
<div ripple-color="rgba(000,000,000,.2)" class="back btn-round ripple"></div>
<input placeholder="Search music"/>
</div>
</div>
</header>
<nav>
<div class="info">
<div class="profile btn-round"></div>
<p class="name">Coming Soon</p>
<p class="email">zayns</p>
</div>
<ul>
<li class="flex active">HOME | NEW</li>
<li class="flex">Top Charts</li>
<li class="flex">Top Categories</li>
<li class="flex">My Library</li>
</ul>
<ul>
<li class="flex">Listen Now</li>
<li class="flex">Top Charts</li>
<li class="flex">New Releases</li>
<li class="flex">My Library</li>
</ul>
<ul>
<li class="flex">Listen Now</li>
<li class="flex">Top Charts</li>
<li class="flex">New Releases</li>
<li class="flex">My Library</li>
</ul>
<ul>
<li class="flex">Listen Now</li>
<li class="flex">Top Charts</li>
<li class="flex">New Releases</li>
<li class="flex">My Library</li>
</ul>
<ul>
<li class="flex">Listen Now</li>
<li class="flex">Top Charts</li>
<li class="flex">New Releases</li>
<li class="flex">My Library</li>
</ul>
<ul>
<li class="flex">Listen Now</li>
<li class="flex">Top Charts</li>
<li class="flex">New Releases</li>
<li class="flex">My Library</li>
</ul>
<ul>
<li class="flex">Listen Now</li>
<li class="flex">Top Charts</li>
<li class="flex">New Releases</li>
<li class="flex">My Library</li>
</ul>
<ul>
<li class="flex">Listen Now</li>
<li class="flex">Top Charts</li>
<li class="flex">New Releases</li>
<li class="flex">My Library</li>
</ul>
<ul>
<li class="flex">Listen Now</li>
<li class="flex">Top Charts</li>
<li class="flex">New Releases</li>
<li class="flex">My Library</li>
</ul>
</nav>
<div class="menu-overlay"></div>
<div class="account">
<ul>
<li class="ripple">Sign Out</li>
<li class="ripple">Switch account</li>
<li class="ripple">Send feedback</li>
<li class="ripple">Help</li>
</ul>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script><script src='https://raw.githubusercontent.com/ftlabs/fastclick/master/lib/fastclick.js'></script>
<script >if (window.navigator.standalone == true) {
$('body').addClass('ios-web-app');
}
if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
$('body').addClass('ios');
}
$(window).on('load resize', function () {
if ($(document).width() <= 600) {
$('input').attr('placeholder', 'Search');
} else {
$('input').attr('placeholder', 'Search Zayn..');
}
});
$('header .menu, .menu-overlay').on('click', function () {
$('main, nav').toggleClass('opened');
featured();
cards();
genres();
})
$('nav li').on('click', function() {
$('nav li').removeClass('active');
$(this).addClass('active');
});
$('header .search-btn, .header .back').on('click', function () {
$('header .mobile-search').toggleClass('searching');
})
// PROFILE MENU
$('.profile-tikla').on('click', function() {
$('.account').toggleClass('active');
});
$(document).on("click", function(e) {
if (($(".account").hasClass("active")) && (!$(".account, .account *, .profile-tikla").is(e.target))) {
$(".account").toggleClass("active");
}
});
$(window).scroll(function() {
$('.account').removeClass('active');
});
// Ripple Code
$(document).on('click', '.ripple', function(e) {
var $ripple = $('<span class="rippling" />'),
$button = $(this),
btnOffset = $button.offset(),
xPos = e.pageX - btnOffset.left,
yPos = e.pageY - btnOffset.top,
size = 1,
animateSize = parseInt(Math.max($button.innerWidth(), $button.innerHeight()) * Math.PI);
$ripple.css({
top: yPos,
left: xPos,
width: size,
height: size,
backgroundColor: $button.attr("ripple-color"),
opacity: $button.attr("ripple-opacity")
})
.appendTo($button)
.animate({
width: animateSize,
height: animateSize,
// transform: 'scale(' + animateSize + ')',
opacity: 0
}, 500, function() {
$(this).remove();
});
});
$(window).scroll(function() {
if ($(this).scrollTop() >= $(".hero").height()) {
$("header").addClass("shadow");
} else {
$("header").removeClass("shadow");
}
});
// $( ".ripple" ).trigger( "click" );$( ".ripple" ).trigger( "click" );
//personal notes
// background-image: initial;
// background-position-x: initial;
// background-position-y: initial;
// background-size: initial;
// background-repeat-x: initial;
// background-repeat-y: initial;
// background-attachment: initial;
//// background-origin: initial;
// background-clip: initial;
// background-color: transparent;
//# sourceURL=pen.js
</script>
</body></html>
