audio,
canvas,
video {
display: inline-block;
}
audio:not([controls]) {
display: none;
height: 0;
}
[hidden] {
display: none;
}
a:focus {
outline: thin dotted;
}
a:active,
a:hover {
outline: 0;
}
abbr[title] {
border-bottom: 1px dotted;
}
b,
strong {
font-weight: bold;
}
dfn {
font-style: italic;
}
mark {
background: #ff0;
color: #000;
}
code,
kbd,
pre,
samp {
font-family: monospace, serif;
font-size: 1em;
}
pre {
white-space: pre;
white-space: pre-wrap;
word-wrap: break-word;
}
q {
quotes: "\201C""\201D""\2018""\2019";
}
small {
font-size: 80%;
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
img {
border: 0;
}
svg:not(:root) {
overflow: hidden;
}
figure {
margin: 0;
}
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
legend {
border: 0;
padding: 0;
}
.colorPicker {
display: block;
margin-top: 20px;
}
.app-color__inputs .controls {
width: 50%;
margin-left: 24px;
}
.app-color__inputs .controls-title {
margin: 1em 0 22px;
font-weight: bold;
font-size: 12px;
color: #bbbfc5;
letter-spacing: 0.2em;
text-transform: uppercase;
}
.app-color__inputs .extras {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 76px;
}
.app-color__inputs .extras .currentColorContainer {
overflow: hidden;
}
.app-color__inputs .extras .currentColor {
float: right;
width: 65px;
height: 30px;
border: 1px solid #bbb;
border-radius: 0.3em;
}
.app-color__inputs .extras .colorFields {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
margin-left: auto;
}
.app-color__inputs .extras .color {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
text-align: center;
margin-left: 0.5em;
}
.app-color__inputs .extras .color label {
margin-top: 0.5em;
font-weight: bold;
font-size: 12px;
color: #bbbfc5;
letter-spacing: 0.2em;
text-transform: uppercase;
}
.app-color__inputs .extras .colorFields input {
width: 48px;
text-align: center;
}
@media only screen and (max-width: 320px) {
.app-color__inputs .extras .colorFields input {
width: 40px;
padding: 0;
}
}
.app-color__inputs .extras .hex {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
text-align: center;
}
.app-color__inputs .extras .hex input {
width: 92px;
}
@media only screen and (max-width: 320px) {
.app-color__inputs .extras .hex input {
width: 84px;
padding: 0;
}
}
.app-color__inputs .extras .hex label {
margin-top: 0.5em;
font-weight: bold;
font-size: 12px;
color: #bbbfc5;
letter-spacing: 0.2em;
text-transform: uppercase;
}
.colorPicker .twod {
position: relative;
width: 100%;
border-radius: 6px;
}
.colorPicker .twod,
.colorPicker .twod .bg {
width: 100%;
height: 200px;
border-radius: 6px;
}
.app-color__inputs .oned,
.app-color__inputs .oned .bg {
height: 32px;
}
.app-color__inputs .oned,
.app-color__inputs .oned .bg,
.app-color__inputs .oned .pointer .shape {
width: 100%;
}
.colorPicker .twod .bg {
position: absolute;
}
.colorPicker .twod .pointer {
position: relative;
z-index: 2;
width: 8px;
}
.colorPicker .twod .pointer .shape {
position: absolute;
}
.colorPicker .twod .pointer .shape1 {
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 20px;
height: 20px;
border: 3px solid black;
border-radius: 10px;
}
.colorPicker .twod .pointer .shape2 {
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 14px;
height: 14px;
border: 3px solid white;
border-radius: 8px;
}
.app-color__inputs .oned {
float: left;
margin: 0.5em 0;
}
.app-color__inputs .oned .bg {
border-radius: 4px;
}
.app-color__inputs .oned .pointer {
position: relative;
z-index: 2;
}
.app-color__inputs .oned .pointer .shape {
position: absolute;
width: 12px;
margin-left: -6px;
margin-top: -4px;
height: 40px;
border: 3px solid black;
border-radius: 6px;
}
.app-color__inputs .oned .pointer .shape:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 6px;
height: 34px;
border: 2px solid #fff;
border-radius: 2px;
}
.app-color__inputs .oned .bg {
background: -webkit-gradient(linear, left top, right top, from(red), color-stop(17%, #ff0), color-stop(33%, lime), color-stop(50%, cyan), color-stop(66%, blue), color-stop(83%, #f0f), to(red));
background: linear-gradient(to right, red 0%, #ff0 17%, lime 33%, cyan 50%, blue 66%, #f0f 83%, red 100%);
}
.colorPicker .twod .bg1 {
z-index: 0;
background: -webkit-gradient(linear, left top, right top, from(#fff), to(rgba(255, 255, 255, 0)));
background: linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%);
}
.colorPicker .twod .bg2 {
z-index: 1;
background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(#000));
background: linear-gradient(to bottom, transparent 0%, #000 100%);
}
.oned.alpha .bg {
position: relative;
background-image: linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%);
background-size: 16px 16px;
background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
}
.oned.alpha .bg .bg-color {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 4px;
background-image: -webkit-gradient(linear, left top, right top, from(#090979), to(rgba(9, 9, 121, 0)));
background-image: linear-gradient(to right, #090979 0%, rgba(9, 9, 121, 0) 100%);
}
.native-js {
visibility: hidden;
opacity: 0;
-webkit-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
.native-js[data-state="visible"] {
visibility: visible;
opacity: 1;
}
.native-js._fixed-footer .native-flex {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
position: fixed;
right: 0;
bottom: 0;
left: 0;
z-index: 10;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.05);
box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.05);
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.native-js._fixed-footer .native-main {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin: 0 auto;
padding: 14px 20px;
max-width: 800px;
text-decoration: none;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.native-js._fixed-footer .native-text {
max-width: 600px;
}
.native-js._fixed-footer .native-logo {
margin-left: 20px;
width: auto;
height: 40px;
}
.native-js._fixed-footer .native-company {
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 600;
font-size: 12px;
}
.native-js._fixed-footer .native-desc {
font-size: 16px;
line-height: 1.4;
}
.native-js._fixed-footer .native-cta {
padding-bottom: 2px;
white-space: nowrap;
font-weight: 600;
}
.native-js._fixed-footer .native-close {
position: absolute;
right: 0;
bottom: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: 5px;
text-align: center;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 10px;
line-height: 1;
cursor: pointer;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
@media only screen {
.col-xs-0 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 0%;
}
.col-xs-offset-0 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 0% !important;
}
.col-xs-push-0 {
left: 0%;
}
.col-xs-pull-0 {
right: 0%;
}
.col-xs-1 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 4.16667%;
}
.col-xs-offset-1 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 4.16667% !important;
}
.col-xs-push-1 {
left: 4.16667%;
}
.col-xs-pull-1 {
right: 4.16667%;
}
.col-xs-2 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 8.33333%;
}
.col-xs-offset-2 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 8.33333% !important;
}
.col-xs-push-2 {
left: 8.33333%;
}
.col-xs-pull-2 {
right: 8.33333%;
}
.col-xs-3 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 12.5%;
}
.col-xs-offset-3 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 12.5% !important;
}
.col-xs-push-3 {
left: 12.5%;
}
.col-xs-pull-3 {
right: 12.5%;
}
.col-xs-4 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 16.66667%;
}
.col-xs-offset-4 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 16.66667% !important;
}
.col-xs-push-4 {
left: 16.66667%;
}
.col-xs-pull-4 {
right: 16.66667%;
}
.col-xs-5 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 20.83333%;
}
.col-xs-offset-5 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 20.83333% !important;
}
.col-xs-push-5 {
left: 20.83333%;
}
.col-xs-pull-5 {
right: 20.83333%;
}
.col-xs-6 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 25%;
}
.col-xs-offset-6 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 25% !important;
}
.col-xs-push-6 {
left: 25%;
}
.col-xs-pull-6 {
right: 25%;
}
.col-xs-7 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 29.16667%;
}
.col-xs-offset-7 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 29.16667% !important;
}
.col-xs-push-7 {
left: 29.16667%;
}
.col-xs-pull-7 {
right: 29.16667%;
}
.col-xs-8 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 33.33333%;
}
.col-xs-offset-8 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 33.33333% !important;
}
.col-xs-push-8 {
left: 33.33333%;
}
.col-xs-pull-8 {
right: 33.33333%;
}
.col-xs-9 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 37.5%;
}
.col-xs-offset-9 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 37.5% !important;
}
.col-xs-push-9 {
left: 37.5%;
}
.col-xs-pull-9 {
right: 37.5%;
}
.col-xs-10 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 41.66667%;
}
.col-xs-offset-10 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 41.66667% !important;
}
.col-xs-push-10 {
left: 41.66667%;
}
.col-xs-pull-10 {
right: 41.66667%;
}
.col-xs-11 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 45.83333%;
}
.col-xs-offset-11 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 45.83333% !important;
}
.col-xs-push-11 {
left: 45.83333%;
}
.col-xs-pull-11 {
right: 45.83333%;
}
.col-xs-12 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 50%;
}
.col-xs-offset-12 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 50% !important;
}
.col-xs-push-12 {
left: 50%;
}
.col-xs-pull-12 {
right: 50%;
}
.col-xs-13 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 54.16667%;
}
.col-xs-offset-13 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 54.16667% !important;
}
.col-xs-push-13 {
left: 54.16667%;
}
.col-xs-pull-13 {
right: 54.16667%;
}
.col-xs-14 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 58.33333%;
}
.col-xs-offset-14 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 58.33333% !important;
}
.col-xs-push-14 {
left: 58.33333%;
}
.col-xs-pull-14 {
right: 58.33333%;
}
.col-xs-15 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 62.5%;
}
.col-xs-offset-15 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 62.5% !important;
}
.col-xs-push-15 {
left: 62.5%;
}
.col-xs-pull-15 {
right: 62.5%;
}
.col-xs-16 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 66.66667%;
}
.col-xs-offset-16 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 66.66667% !important;
}
.col-xs-push-16 {
left: 66.66667%;
}
.col-xs-pull-16 {
right: 66.66667%;
}
.col-xs-17 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 70.83333%;
}
.col-xs-offset-17 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 70.83333% !important;
}
.col-xs-push-17 {
left: 70.83333%;
}
.col-xs-pull-17 {
right: 70.83333%;
}
.col-xs-18 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 75%;
}
.col-xs-offset-18 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 75% !important;
}
.col-xs-push-18 {
left: 75%;
}
.col-xs-pull-18 {
right: 75%;
}
.col-xs-19 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 79.16667%;
}
.col-xs-offset-19 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 79.16667% !important;
}
.col-xs-push-19 {
left: 79.16667%;
}
.col-xs-pull-19 {
right: 79.16667%;
}
.col-xs-20 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 83.33333%;
}
.col-xs-offset-20 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 83.33333% !important;
}
.col-xs-push-20 {
left: 83.33333%;
}
.col-xs-pull-20 {
right: 83.33333%;
}
.col-xs-21 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 87.5%;
}
.col-xs-offset-21 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 87.5% !important;
}
.col-xs-push-21 {
left: 87.5%;
}
.col-xs-pull-21 {
right: 87.5%;
}
.col-xs-22 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 91.66667%;
}
.col-xs-offset-22 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 91.66667% !important;
}
.col-xs-push-22 {
left: 91.66667%;
}
.col-xs-pull-22 {
right: 91.66667%;
}
.col-xs-23 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 95.83333%;
}
.col-xs-offset-23 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 95.83333% !important;
}
.col-xs-push-23 {
left: 95.83333%;
}
.col-xs-pull-23 {
right: 95.83333%;
}
.col-xs-24 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 100%;
}
.col-xs-special {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 20%;
}
.col-xs-center {
margin-left: auto;
margin-right: auto;
float: none;
}
.col-xs-center:last-child {
float: none;
}
.col-xs-uncenter {
margin-left: 0;
margin-right: 0;
float: left;
}
.col-xs-uncenter:last-child {
float: left;
}
}
@media only screen and (min-width: 641px) {
.col-sm-0 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 0%;
}
.col-sm-offset-0 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 0% !important;
}
.col-sm-push-0 {
left: 0%;
}
.col-sm-pull-0 {
right: 0%;
}
.col-sm-1 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 4.16667%;
}
.col-sm-offset-1 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 4.16667% !important;
}
.col-sm-push-1 {
left: 4.16667%;
}
.col-sm-pull-1 {
right: 4.16667%;
}
.col-sm-2 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 8.33333%;
}
.col-sm-offset-2 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 8.33333% !important;
}
.col-sm-push-2 {
left: 8.33333%;
}
.col-sm-pull-2 {
right: 8.33333%;
}
.col-sm-3 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 12.5%;
}
.col-sm-offset-3 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 12.5% !important;
}
.col-sm-push-3 {
left: 12.5%;
}
.col-sm-pull-3 {
right: 12.5%;
}
.col-sm-4 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 16.66667%;
}
.col-sm-offset-4 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 16.66667% !important;
}
.col-sm-push-4 {
left: 16.66667%;
}
.col-sm-pull-4 {
right: 16.66667%;
}
.col-sm-5 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 20.83333%;
}
.col-sm-offset-5 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 20.83333% !important;
}
.col-sm-push-5 {
left: 20.83333%;
}
.col-sm-pull-5 {
right: 20.83333%;
}
.col-sm-6 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 25%;
}
.col-sm-offset-6 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 25% !important;
}
.col-sm-push-6 {
left: 25%;
}
.col-sm-pull-6 {
right: 25%;
}
.col-sm-7 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 29.16667%;
}
.col-sm-offset-7 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 29.16667% !important;
}
.col-sm-push-7 {
left: 29.16667%;
}
.col-sm-pull-7 {
right: 29.16667%;
}
.col-sm-8 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 33.33333%;
}
.col-sm-offset-8 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 33.33333% !important;
}
.col-sm-push-8 {
left: 33.33333%;
}
.col-sm-pull-8 {
right: 33.33333%;
}
.col-sm-9 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 37.5%;
}
.col-sm-offset-9 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 37.5% !important;
}
.col-sm-push-9 {
left: 37.5%;
}
.col-sm-pull-9 {
right: 37.5%;
}
.col-sm-10 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 41.66667%;
}
.col-sm-offset-10 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 41.66667% !important;
}
.col-sm-push-10 {
left: 41.66667%;
}
.col-sm-pull-10 {
right: 41.66667%;
}
.col-sm-11 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 45.83333%;
}
.col-sm-offset-11 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 45.83333% !important;
}
.col-sm-push-11 {
left: 45.83333%;
}
.col-sm-pull-11 {
right: 45.83333%;
}
.col-sm-12 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 50%;
}
.col-sm-offset-12 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 50% !important;
}
.col-sm-push-12 {
left: 50%;
}
.col-sm-pull-12 {
right: 50%;
}
.col-sm-13 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 54.16667%;
}
.col-sm-offset-13 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 54.16667% !important;
}
.col-sm-push-13 {
left: 54.16667%;
}
.col-sm-pull-13 {
right: 54.16667%;
}
.col-sm-14 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 58.33333%;
}
.col-sm-offset-14 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 58.33333% !important;
}
.col-sm-push-14 {
left: 58.33333%;
}
.col-sm-pull-14 {
right: 58.33333%;
}
.col-sm-15 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 62.5%;
}
.col-sm-offset-15 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 62.5% !important;
}
.col-sm-push-15 {
left: 62.5%;
}
.col-sm-pull-15 {
right: 62.5%;
}
.col-sm-16 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 66.66667%;
}
.col-sm-offset-16 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 66.66667% !important;
}
.col-sm-push-16 {
left: 66.66667%;
}
.col-sm-pull-16 {
right: 66.66667%;
}
.col-sm-17 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 70.83333%;
}
.col-sm-offset-17 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 70.83333% !important;
}
.col-sm-push-17 {
left: 70.83333%;
}
.col-sm-pull-17 {
right: 70.83333%;
}
.col-sm-18 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 75%;
}
.col-sm-offset-18 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 75% !important;
}
.col-sm-push-18 {
left: 75%;
}
.col-sm-pull-18 {
right: 75%;
}
.col-sm-19 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 79.16667%;
}
.col-sm-offset-19 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 79.16667% !important;
}
.col-sm-push-19 {
left: 79.16667%;
}
.col-sm-pull-19 {
right: 79.16667%;
}
.col-sm-20 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 83.33333%;
}
.col-sm-offset-20 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 83.33333% !important;
}
.col-sm-push-20 {
left: 83.33333%;
}
.col-sm-pull-20 {
right: 83.33333%;
}
.col-sm-21 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 87.5%;
}
.col-sm-offset-21 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 87.5% !important;
}
.col-sm-push-21 {
left: 87.5%;
}
.col-sm-pull-21 {
right: 87.5%;
}
.col-sm-22 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 91.66667%;
}
.col-sm-offset-22 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 91.66667% !important;
}
.col-sm-push-22 {
left: 91.66667%;
}
.col-sm-pull-22 {
right: 91.66667%;
}
.col-sm-23 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 95.83333%;
}
.col-sm-offset-23 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 95.83333% !important;
}
.col-sm-push-23 {
left: 95.83333%;
}
.col-sm-pull-23 {
right: 95.83333%;
}
.col-sm-24 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 100%;
}
.col-sm-special {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 20%;
}
.col-sm-center {
margin-left: auto;
margin-right: auto;
float: none;
}
.col-sm-center:last-child {
float: none;
}
.col-sm-uncenter {
margin-left: 0;
margin-right: 0;
float: left;
}
.col-sm-uncenter:last-child {
float: left;
}
}
@media only screen and (min-width: 770px) {
.col-md-0 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 0%;
}
.col-md-offset-0 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 0% !important;
}
.col-md-push-0 {
left: 0%;
}
.col-md-pull-0 {
right: 0%;
}
.col-md-1 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 4.16667%;
}
.col-md-offset-1 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 4.16667% !important;
}
.col-md-push-1 {
left: 4.16667%;
}
.col-md-pull-1 {
right: 4.16667%;
}
.col-md-2 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 8.33333%;
}
.col-md-offset-2 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 8.33333% !important;
}
.col-md-push-2 {
left: 8.33333%;
}
.col-md-pull-2 {
right: 8.33333%;
}
.col-md-3 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 12.5%;
}
.col-md-offset-3 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 12.5% !important;
}
.col-md-push-3 {
left: 12.5%;
}
.col-md-pull-3 {
right: 12.5%;
}
.col-md-4 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 16.66667%;
}
.col-md-offset-4 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 16.66667% !important;
}
.col-md-push-4 {
left: 16.66667%;
}
.col-md-pull-4 {
right: 16.66667%;
}
.col-md-5 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 20.83333%;
}
.col-md-offset-5 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 20.83333% !important;
}
.col-md-push-5 {
left: 20.83333%;
}
.col-md-pull-5 {
right: 20.83333%;
}
.col-md-6 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 25%;
}
.col-md-offset-6 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 25% !important;
}
.col-md-push-6 {
left: 25%;
}
.col-md-pull-6 {
right: 25%;
}
.col-md-7 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 29.16667%;
}
.col-md-offset-7 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 29.16667% !important;
}
.col-md-push-7 {
left: 29.16667%;
}
.col-md-pull-7 {
right: 29.16667%;
}
.col-md-8 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 33.33333%;
}
.col-md-offset-8 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 33.33333% !important;
}
.col-md-push-8 {
left: 33.33333%;
}
.col-md-pull-8 {
right: 33.33333%;
}
.col-md-9 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 37.5%;
}
.col-md-offset-9 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 37.5% !important;
}
.col-md-push-9 {
left: 37.5%;
}
.col-md-pull-9 {
right: 37.5%;
}
.col-md-10 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 41.66667%;
}
.col-md-offset-10 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 41.66667% !important;
}
.col-md-push-10 {
left: 41.66667%;
}
.col-md-pull-10 {
right: 41.66667%;
}
.col-md-11 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 45.83333%;
}
.col-md-offset-11 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 45.83333% !important;
}
.col-md-push-11 {
left: 45.83333%;
}
.col-md-pull-11 {
right: 45.83333%;
}
.col-md-12 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 50%;
}
.col-md-offset-12 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 50% !important;
}
.col-md-push-12 {
left: 50%;
}
.col-md-pull-12 {
right: 50%;
}
.col-md-13 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 54.16667%;
}
.col-md-offset-13 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 54.16667% !important;
}
.col-md-push-13 {
left: 54.16667%;
}
.col-md-pull-13 {
right: 54.16667%;
}
.col-md-14 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 58.33333%;
}
.col-md-offset-14 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 58.33333% !important;
}
.col-md-push-14 {
left: 58.33333%;
}
.col-md-pull-14 {
right: 58.33333%;
}
.col-md-15 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 62.5%;
}
.col-md-offset-15 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 62.5% !important;
}
.col-md-push-15 {
left: 62.5%;
}
.col-md-pull-15 {
right: 62.5%;
}
.col-md-16 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 66.66667%;
}
.col-md-offset-16 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 66.66667% !important;
}
.col-md-push-16 {
left: 66.66667%;
}
.col-md-pull-16 {
right: 66.66667%;
}
.col-md-17 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 70.83333%;
}
.col-md-offset-17 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 70.83333% !important;
}
.col-md-push-17 {
left: 70.83333%;
}
.col-md-pull-17 {
right: 70.83333%;
}
.col-md-18 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 75%;
}
.col-md-offset-18 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 75% !important;
}
.col-md-push-18 {
left: 75%;
}
.col-md-pull-18 {
right: 75%;
}
.col-md-19 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 79.16667%;
}
.col-md-offset-19 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 79.16667% !important;
}
.col-md-push-19 {
left: 79.16667%;
}
.col-md-pull-19 {
right: 79.16667%;
}
.col-md-20 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 83.33333%;
}
.col-md-offset-20 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 83.33333% !important;
}
.col-md-push-20 {
left: 83.33333%;
}
.col-md-pull-20 {
right: 83.33333%;
}
.col-md-21 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 87.5%;
}
.col-md-offset-21 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 87.5% !important;
}
.col-md-push-21 {
left: 87.5%;
}
.col-md-pull-21 {
right: 87.5%;
}
.col-md-22 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 91.66667%;
}
.col-md-offset-22 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 91.66667% !important;
}
.col-md-push-22 {
left: 91.66667%;
}
.col-md-pull-22 {
right: 91.66667%;
}
.col-md-23 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 95.83333%;
}
.col-md-offset-23 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 95.83333% !important;
}
.col-md-push-23 {
left: 95.83333%;
}
.col-md-pull-23 {
right: 95.83333%;
}
.col-md-24 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 100%;
}
.col-md-special {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 20%;
}
.col-md-center {
margin-left: auto;
margin-right: auto;
float: none;
}
.col-md-center:last-child {
float: none;
}
.col-md-uncenter {
margin-left: 0;
margin-right: 0;
float: left;
}
.col-md-uncenter:last-child {
float: left;
}
}
@media only screen and (min-width: 1025px) {
.col-lg-0 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 0%;
}
.col-lg-offset-0 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 0% !important;
}
.col-lg-push-0 {
left: 0%;
}
.col-lg-pull-0 {
right: 0%;
}
.col-lg-1 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 4.16667%;
}
.col-lg-offset-1 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 4.16667% !important;
}
.col-lg-push-1 {
left: 4.16667%;
}
.col-lg-pull-1 {
right: 4.16667%;
}
.col-lg-2 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 8.33333%;
}
.col-lg-offset-2 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 8.33333% !important;
}
.col-lg-push-2 {
left: 8.33333%;
}
.col-lg-pull-2 {
right: 8.33333%;
}
.col-lg-3 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 12.5%;
}
.col-lg-offset-3 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 12.5% !important;
}
.col-lg-push-3 {
left: 12.5%;
}
.col-lg-pull-3 {
right: 12.5%;
}
.col-lg-4 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 16.66667%;
}
.col-lg-offset-4 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 16.66667% !important;
}
.col-lg-push-4 {
left: 16.66667%;
}
.col-lg-pull-4 {
right: 16.66667%;
}
.col-lg-5 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 20.83333%;
}
.col-lg-offset-5 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 20.83333% !important;
}
.col-lg-push-5 {
left: 20.83333%;
}
.col-lg-pull-5 {
right: 20.83333%;
}
.col-lg-6 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 25%;
}
.col-lg-offset-6 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 25% !important;
}
.col-lg-push-6 {
left: 25%;
}
.col-lg-pull-6 {
right: 25%;
}
.col-lg-7 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 29.16667%;
}
.col-lg-offset-7 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 29.16667% !important;
}
.col-lg-push-7 {
left: 29.16667%;
}
.col-lg-pull-7 {
right: 29.16667%;
}
.col-lg-8 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 33.33333%;
}
.col-lg-offset-8 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 33.33333% !important;
}
.col-lg-push-8 {
left: 33.33333%;
}
.col-lg-pull-8 {
right: 33.33333%;
}
.col-lg-9 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 37.5%;
}
.col-lg-offset-9 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 37.5% !important;
}
.col-lg-push-9 {
left: 37.5%;
}
.col-lg-pull-9 {
right: 37.5%;
}
.col-lg-10 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 41.66667%;
}
.col-lg-offset-10 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 41.66667% !important;
}
.col-lg-push-10 {
left: 41.66667%;
}
.col-lg-pull-10 {
right: 41.66667%;
}
.col-lg-11 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 45.83333%;
}
.col-lg-offset-11 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 45.83333% !important;
}
.col-lg-push-11 {
left: 45.83333%;
}
.col-lg-pull-11 {
right: 45.83333%;
}
.col-lg-12 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 50%;
}
.col-lg-offset-12 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 50% !important;
}
.col-lg-push-12 {
left: 50%;
}
.col-lg-pull-12 {
right: 50%;
}
.col-lg-13 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 54.16667%;
}
.col-lg-offset-13 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 54.16667% !important;
}
.col-lg-push-13 {
left: 54.16667%;
}
.col-lg-pull-13 {
right: 54.16667%;
}
.col-lg-14 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 58.33333%;
}
.col-lg-offset-14 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 58.33333% !important;
}
.col-lg-push-14 {
left: 58.33333%;
}
.col-lg-pull-14 {
right: 58.33333%;
}
.col-lg-15 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 62.5%;
}
.col-lg-offset-15 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 62.5% !important;
}
.col-lg-push-15 {
left: 62.5%;
}
.col-lg-pull-15 {
right: 62.5%;
}
.col-lg-16 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 66.66667%;
}
.col-lg-offset-16 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 66.66667% !important;
}
.col-lg-push-16 {
left: 66.66667%;
}
.col-lg-pull-16 {
right: 66.66667%;
}
.col-lg-17 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 70.83333%;
}
.col-lg-offset-17 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 70.83333% !important;
}
.col-lg-push-17 {
left: 70.83333%;
}
.col-lg-pull-17 {
right: 70.83333%;
}
.col-lg-18 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 75%;
}
.col-lg-offset-18 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 75% !important;
}
.col-lg-push-18 {
left: 75%;
}
.col-lg-pull-18 {
right: 75%;
}
.col-lg-19 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 79.16667%;
}
.col-lg-offset-19 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 79.16667% !important;
}
.col-lg-push-19 {
left: 79.16667%;
}
.col-lg-pull-19 {
right: 79.16667%;
}
.col-lg-20 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 83.33333%;
}
.col-lg-offset-20 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 83.33333% !important;
}
.col-lg-push-20 {
left: 83.33333%;
}
.col-lg-pull-20 {
right: 83.33333%;
}
.col-lg-21 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 87.5%;
}
.col-lg-offset-21 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 87.5% !important;
}
.col-lg-push-21 {
left: 87.5%;
}
.col-lg-pull-21 {
right: 87.5%;
}
.col-lg-22 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 91.66667%;
}
.col-lg-offset-22 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 91.66667% !important;
}
.col-lg-push-22 {
left: 91.66667%;
}
.col-lg-pull-22 {
right: 91.66667%;
}
.col-lg-23 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 95.83333%;
}
.col-lg-offset-23 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 95.83333% !important;
}
.col-lg-push-23 {
left: 95.83333%;
}
.col-lg-pull-23 {
right: 95.83333%;
}
.col-lg-24 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 100%;
}
.col-lg-special {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 20%;
}
.col-lg-center {
margin-left: auto;
margin-right: auto;
float: none;
}
.col-lg-center:last-child {
float: none;
}
.col-lg-uncenter {
margin-left: 0;
margin-right: 0;
float: left;
}
.col-lg-uncenter:last-child {
float: left;
}
}
@media only screen and (min-width: 1441px) {
.col-xl-0 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 0%;
}
.col-xl-offset-0 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 0% !important;
}
.col-xl-push-0 {
left: 0%;
}
.col-xl-pull-0 {
right: 0%;
}
.col-xl-1 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 4.16667%;
}
.col-xl-offset-1 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 4.16667% !important;
}
.col-xl-push-1 {
left: 4.16667%;
}
.col-xl-pull-1 {
right: 4.16667%;
}
.col-xl-2 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 8.33333%;
}
.col-xl-offset-2 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 8.33333% !important;
}
.col-xl-push-2 {
left: 8.33333%;
}
.col-xl-pull-2 {
right: 8.33333%;
}
.col-xl-3 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 12.5%;
}
.col-xl-offset-3 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 12.5% !important;
}
.col-xl-push-3 {
left: 12.5%;
}
.col-xl-pull-3 {
right: 12.5%;
}
.col-xl-4 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 16.66667%;
}
.col-xl-offset-4 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 16.66667% !important;
}
.col-xl-push-4 {
left: 16.66667%;
}
.col-xl-pull-4 {
right: 16.66667%;
}
.col-xl-5 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 20.83333%;
}
.col-xl-offset-5 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 20.83333% !important;
}
.col-xl-push-5 {
left: 20.83333%;
}
.col-xl-pull-5 {
right: 20.83333%;
}
.col-xl-6 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 25%;
}
.col-xl-offset-6 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 25% !important;
}
.col-xl-push-6 {
left: 25%;
}
.col-xl-pull-6 {
right: 25%;
}
.col-xl-7 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 29.16667%;
}
.col-xl-offset-7 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 29.16667% !important;
}
.col-xl-push-7 {
left: 29.16667%;
}
.col-xl-pull-7 {
right: 29.16667%;
}
.col-xl-8 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 33.33333%;
}
.col-xl-offset-8 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 33.33333% !important;
}
.col-xl-push-8 {
left: 33.33333%;
}
.col-xl-pull-8 {
right: 33.33333%;
}
.col-xl-9 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 37.5%;
}
.col-xl-offset-9 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 37.5% !important;
}
.col-xl-push-9 {
left: 37.5%;
}
.col-xl-pull-9 {
right: 37.5%;
}
.col-xl-10 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 41.66667%;
}
.col-xl-offset-10 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 41.66667% !important;
}
.col-xl-push-10 {
left: 41.66667%;
}
.col-xl-pull-10 {
right: 41.66667%;
}
.col-xl-11 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 45.83333%;
}
.col-xl-offset-11 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 45.83333% !important;
}
.col-xl-push-11 {
left: 45.83333%;
}
.col-xl-pull-11 {
right: 45.83333%;
}
.col-xl-12 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 50%;
}
.col-xl-offset-12 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 50% !important;
}
.col-xl-push-12 {
left: 50%;
}
.col-xl-pull-12 {
right: 50%;
}
.col-xl-13 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 54.16667%;
}
.col-xl-offset-13 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 54.16667% !important;
}
.col-xl-push-13 {
left: 54.16667%;
}
.col-xl-pull-13 {
right: 54.16667%;
}
.col-xl-14 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 58.33333%;
}
.col-xl-offset-14 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 58.33333% !important;
}
.col-xl-push-14 {
left: 58.33333%;
}
.col-xl-pull-14 {
right: 58.33333%;
}
.col-xl-15 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 62.5%;
}
.col-xl-offset-15 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 62.5% !important;
}
.col-xl-push-15 {
left: 62.5%;
}
.col-xl-pull-15 {
right: 62.5%;
}
.col-xl-16 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 66.66667%;
}
.col-xl-offset-16 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 66.66667% !important;
}
.col-xl-push-16 {
left: 66.66667%;
}
.col-xl-pull-16 {
right: 66.66667%;
}
.col-xl-17 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 70.83333%;
}
.col-xl-offset-17 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 70.83333% !important;
}
.col-xl-push-17 {
left: 70.83333%;
}
.col-xl-pull-17 {
right: 70.83333%;
}
.col-xl-18 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 75%;
}
.col-xl-offset-18 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 75% !important;
}
.col-xl-push-18 {
left: 75%;
}
.col-xl-pull-18 {
right: 75%;
}
.col-xl-19 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 79.16667%;
}
.col-xl-offset-19 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 79.16667% !important;
}
.col-xl-push-19 {
left: 79.16667%;
}
.col-xl-pull-19 {
right: 79.16667%;
}
.col-xl-20 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 83.33333%;
}
.col-xl-offset-20 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 83.33333% !important;
}
.col-xl-push-20 {
left: 83.33333%;
}
.col-xl-pull-20 {
right: 83.33333%;
}
.col-xl-21 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 87.5%;
}
.col-xl-offset-21 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 87.5% !important;
}
.col-xl-push-21 {
left: 87.5%;
}
.col-xl-pull-21 {
right: 87.5%;
}
.col-xl-22 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 91.66667%;
}
.col-xl-offset-22 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 91.66667% !important;
}
.col-xl-push-22 {
left: 91.66667%;
}
.col-xl-pull-22 {
right: 91.66667%;
}
.col-xl-23 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 95.83333%;
}
.col-xl-offset-23 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
margin-left: 95.83333% !important;
}
.col-xl-push-23 {
left: 95.83333%;
}
.col-xl-pull-23 {
right: 95.83333%;
}
.col-xl-24 {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 100%;
}
.col-xl-special {
position: relative;
padding-right: 1rem;
padding-left: 1rem;
float: left;
width: 20%;
}
.col-xl-center {
margin-left: auto;
margin-right: auto;
float: none;
}
.col-xl-center:last-child {
float: none;
}
.col-xl-uncenter {
margin-left: 0;
margin-right: 0;
float: left;
}
.col-xl-uncenter:last-child {
float: left;
}
}
blockquote {
font-size: 1.6em;
font-weight: 300;
font-style: italic;
line-height: 1.4;
text-align: center;
margin: 0.5em;
}
blockquote cite {
display: block;
font-size: 16px;
font-style: normal;
color: #ea607e;
margin-top: 1em;
}
@media only screen and (min-width: 770px) {
blockquote {
font-size: 2em;
margin: 1.5em 2em;
}
}
::-moz-selection {
color: #fff;
background: #04286e;
}
::selection {
color: #fff;
background: #04286e;
}
::-moz-selection {
color: #fff;
background: #04286e;
}
a:active,
a:focus {
outline: none;
}
::-webkit-input-placeholder {
color: #99abc8;
}
::-moz-placeholder {
color: #99abc8;
}
:-ms-input-placeholder {
color: #99abc8;
}
:-moz-placeholder {
color: #99abc8;
}
canvas {
width: 100%;
height: 100%;
}
#mc_embed_signup {
font-family: "Rubik", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
background: transparent !important;
}
#mc_embed_signup form {
padding: 0 !important;
}
#mc_embed_signup form {
background: transparent !important;
padding: 0 !important;
}
#mc_embed_signup input.email {
width: 100% !important;
height: 42px;
padding: 0 16px !important;
}
#mc_embed_signup input.button {
width: 100% !important;
background: #50e3c2;
color: #04286e;
text-transform: uppercase;
font-size: 12px;
letter-spacing: 0.1em;
height: 42px;
}
.graphic-header {
position: absolute;
top: 0;
left: 0;
}
.app {
position: relative;
top: 12px;
right: 0;
width: 100%;
height: 546px;
}
@media only screen and (min-width: 770px) {
.app {
height: 580px;
margin-bottom: 3em;
}
}
.app-nav {
position: absolute;
top: 12px;
left: 0;
width: 80px;
z-index: 4;
}
@media only screen and (min-width: 770px) {
.app-nav {
top: 32px;
}
}
.app-nav__list-item {
position: relative;
display: block;
width: 72px;
height: 72px;
margin-bottom: 8px;
-webkit-box-shadow: 0 40px 85px rgba(0, 0, 0, 0.3);
box-shadow: 0 40px 85px rgba(0, 0, 0, 0.3);
border-radius: 8px;
background: #fff;
padding: 12px;
cursor: pointer;
-webkit-transition: all 275ms cubic-bezier(0.8, 0, 0.2, 1);
transition: all 275ms cubic-bezier(0.8, 0, 0.2, 1);
}
.app-nav__list-item.is-active {
width: 96px;
}
@media only screen and (min-width: 770px) {
.app-nav__list-item {
width: 88px;
height: 88px;
margin-bottom: 16px;
padding: 16px;
border-radius: 12px;
}
.app-nav__list-item:hover {
width: 400px;
}
.app-nav__list-item.is-active {
width: 400px;
}
}
.app-nav li:nth-child(1) {
-webkit-animation: bounceIn1 650ms ease-out;
animation: bounceIn1 650ms ease-out;
}
.app-nav li:nth-child(2) {
-webkit-animation: bounceIn2 750ms ease-out;
animation: bounceIn2 750ms ease-out;
}
.app-nav li:nth-child(3) {
-webkit-animation: bounceIn3 850ms ease-out;
animation: bounceIn3 850ms ease-out;
}
.app-nav li:nth-child(4) {
-webkit-animation: bounceIn4 850ms ease-out;
animation: bounceIn4 850ms ease-out;
}
.app-nav li:nth-child(5) {
-webkit-animation: bounceIn5 850ms ease-out;
animation: bounceIn5 850ms ease-out;
}
@-webkit-keyframes bounceIn1 {
0% {
opacity: 0;
-webkit-transform: translateY(10px);
transform: translateY(10px);
}
30% {
opacity: 0;
-webkit-transform: translateY(10px);
transform: translateY(10px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
}
@keyframes bounceIn1 {
0% {
opacity: 0;
-webkit-transform: translateY(10px);
transform: translateY(10px);
}
30% {
opacity: 0;
-webkit-transform: translateY(10px);
transform: translateY(10px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
}
@keyframes bounceIn1 {
0% {
opacity: 0;
-webkit-transform: translateY(10px);
transform: translateY(10px);
}
40% {
opacity: 0;
-webkit-transform: translateY(10px);
transform: translateY(10px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
}
@-webkit-keyframes bounceIn2 {
0% {
opacity: 0;
-webkit-transform: translateY(10px);
transform: translateY(10px);
}
50% {
opacity: 0;
-webkit-transform: translateY(10px);
transform: translateY(10px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
}
@keyframes bounceIn2 {
0% {
opacity: 0;
-webkit-transform: translateY(10px);
transform: translateY(10px);
}
50% {
opacity: 0;
-webkit-transform: translateY(10px);
transform: translateY(10px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
}
@-webkit-keyframes bounceIn3 {
0% {
opacity: 0;
-webkit-transform: translateY(10px);
transform: translateY(10px);
}
60% {
opacity: 0;
-webkit-transform: translateY(10px);
transform: translateY(10px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
}
@keyframes bounceIn3 {
0% {
opacity: 0;
-webkit-transform: translateY(10px);
transform: translateY(10px);
}
60% {
opacity: 0;
-webkit-transform: translateY(10px);
transform: translateY(10px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
}
@-webkit-keyframes bounceIn4 {
0% {
opacity: 0;
-webkit-transform: translateY(10px);
transform: translateY(10px);
}
70% {
opacity: 0;
-webkit-transform: translateY(10px);
transform: translateY(10px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
}
@keyframes bounceIn4 {
0% {
opacity: 0;
-webkit-transform: translateY(10px);
transform: translateY(10px);
}
70% {
opacity: 0;
-webkit-transform: translateY(10px);
transform: translateY(10px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
}
@-webkit-keyframes bounceIn5 {
0% {
opacity: 0;
-webkit-transform: translateY(10px);
transform: translateY(10px);
}
80% {
opacity: 0;
-webkit-transform: translateY(10px);
transform: translateY(10px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
}
@keyframes bounceIn5 {
0% {
opacity: 0;
-webkit-transform: translateY(10px);
transform: translateY(10px);
}
80% {
opacity: 0;
-webkit-transform: translateY(10px);
transform: translateY(10px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
}
.app-nav__list-item-swatch {
width: 100%;
height: 100%;
background: #cc3874;
border-radius: 5px;
-webkit-box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}
.app-nav__list-item-swatch img {
width: 100%;
}
.app-nav__list-item-swatch.particles {
background: #0f1c70;
}
.app-nav__list-item-swatch.gradient {
background: linear-gradient(89deg, #fddf46 0%, #17d5d1 100%);
}
.app-nav__list-item-swatch.topography {
background: #031150;
}
.app-nav__list-item-swatch.unsplash {
background-size: cover;
background-position: center;
}
@media only screen and (min-width: 770px) {
.app-nav__list-item-swatch {
width: 56px;
border-radius: 8px;
}
}
.black-background .app-nav__list-item-swatch {
background: #333;
}
.black-background .app-nav__list-item-swatch.gradient {
background: linear-gradient(89deg, #777 0%, #000 100%);
}
.white-background .app-nav__list-item-swatch {
background: #eee;
}
.white-background .app-nav__list-item-swatch .triangle {
fill: #000000;
}
.white-background .app-nav__list-item-swatch .particles polyline {
stroke: #999;
}
.white-background .app-nav__list-item-swatch .particles circle {
fill: #999;
}
.white-background .app-nav__list-item-swatch .topo {
fill: #000;
}
.white-background .app-nav__list-item-swatch.gradient {
background: -webkit-gradient(linear, left top, right top, from(#ccc), to(#fff));
background: linear-gradient(90deg, #ccc 0%, #fff 100%);
}
.blue-background .app-nav__list-item-swatch {
background: #0258ff;
}
.blue-background .app-nav__list-item-swatch.gradient {
background: linear-gradient(89deg, #4d90f4 0%, #0258ff 100%);
}
.red-background .app-nav__list-item-swatch {
background: #fc4343;
}
.red-background .app-nav__list-item-swatch.gradient {
background: linear-gradient(89deg, #fc4343 0%, #ffd1b0 100%);
}
.app-nav__list-item-content {
position: absolute;
top: 0;
left: 96px;
width: 300px;
visibility: hidden;
}
.app-nav__list-item-content h3 {
font-size: 20px;
margin-top: 1em;
opacity: 0;
-webkit-transform: translateY(10px);
transform: translateY(10px);
}
.app-nav__list-item-content p {
margin: 0.2em 0;
color: #909dba;
opacity: 0;
-webkit-transform: translateY(10px);
transform: translateY(10px);
}
@media only screen and (min-width: 770px) {
.app-nav__list-item:not(.is-active):hover .app-nav__list-item-content {
visibility: visible;
}
.app-nav__list-item:not(.is-active):hover .app-nav__list-item-content h3 {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation: slideUp 400ms ease-out;
animation: slideUp 400ms ease-out;
}
.app-nav__list-item:not(.is-active):hover .app-nav__list-item-content p {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation: slideUp 450ms ease-out;
animation: slideUp 450ms ease-out;
}
}
.app-nav__list-item.is-active .app-nav__list-item-content {
width: 96px;
}
@media only screen and (min-width: 770px) {
.app-nav__list-item.is-active .app-nav__list-item-content {
width: auto;
visibility: visible;
}
.app-nav__list-item.is-active .app-nav__list-item-content h3,
.app-nav__list-item.is-active .app-nav__list-item-content p {
opacity: 1;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
}
@-webkit-keyframes slideUp {
0% {
opacity: 0;
-webkit-transform: translateY(10px);
transform: translateY(10px);
}
50% {
opacity: 0;
-webkit-transform: translateY(10px);
transform: translateY(10px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
}
@keyframes slideUp {
0% {
opacity: 0;
-webkit-transform: translateY(10px);
transform: translateY(10px);
}
50% {
opacity: 0;
-webkit-transform: translateY(10px);
transform: translateY(10px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
}
@keyframes slideUp {
0% {
opacity: 0;
-webkit-transform: translateY(10px);
transform: translateY(10px);
}
50% {
opacity: 0;
-webkit-transform: translateY(10px);
transform: translateY(10px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
}
.app-screen {
position: absolute;
top: 0;
right: 0;
width: calc(100% - 60px);
height: 420px;
-webkit-box-shadow: 0 40px 85px rgba(0, 0, 0, 0.3);
box-shadow: 0 40px 85px rgba(0, 0, 0, 0.3);
}
@media only screen and (min-width: 770px) {
.app-screen {
width: calc(100% - 120px);
border-radius: 10px;
height: 580px;
}
}
.background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
border-radius: 6px;
background-size: cover;
-webkit-transform-origin: top left;
transform-origin: top left;
clip: rect(-100px, 1400px, 680px, -100px);
-webkit-animation: wipe 850ms cubic-bezier(0.8, 0, 0.2, 1);
animation: wipe 850ms cubic-bezier(0.8, 0, 0.2, 1);
}
@media only screen and (min-width: 770px) {
.background {
border-radius: 10px;
}
}
@-webkit-keyframes wipe {
0% {
clip: rect(-100px, 0px, 680px, -100px);
}
100% {
clip: rect(-100px, 1400px, 680px, -100px);
}
}
@keyframes wipe {
0% {
clip: rect(-100px, 0px, 680px, -100px);
}
100% {
clip: rect(-100px, 1400px, 680px, -100px);
}
}
.white-background .background {
background: #fff !important;
}
.canvas {
position: absolute;
top: 0;
left: 0;
-webkit-transition: all 650ms ease-in-out;
transition: all 650ms ease-in-out;
border-radius: 6px;
}
.canvas.opacity {
opacity: 0;
}
.app-dropup {
position: absolute;
right: 0;
bottom: 142px;
height: 400px;
width: 340px;
-webkit-perspective: 500px;
perspective: 500px;
z-index: 8;
}
@media only screen and (min-width: 770px) {
.app-dropup {
right: 128px;
}
}
.app-dropup__content {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
border-radius: 8px;
background: #fff;
-webkit-box-shadow: 0 40px 84px rgba(0, 0, 0, 0.5);
box-shadow: 0 40px 84px rgba(0, 0, 0, 0.5);
-webkit-transform: rotateX(10deg);
transform: rotateX(10deg);
opacity: 0;
visibility: hidden;
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transition: all 225ms ease-out;
transition: all 225ms ease-out;
}
.app-dropup__content.is-active {
opacity: 1;
visibility: visible;
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
}
.white-background .app-dropup__content {
background: #f2f2f2;
}
.app-dropup__content ul {
height: calc(100% - 40px);
padding: 1em 0;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
.app-dropup__content ul::-webkit-scrollbar {
width: 12px;
}
.app-dropup__content ul::-webkit-scrollbar-thumb {
background: #c6ccde;
border-radius: 8px;
border: 2px solid #fff;
}
.app-dropup__footer {
position: absolute;
bottom: 0;
left: 0;
background: #fff;
width: 100%;
height: 40px;
padding: 0 20px;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
border-top: 1px solid #ccc;
line-height: 40px;
z-index: 10;
font-size: 12px;
}
.app-dropup__footer a {
color: #ea607e;
}
.app-dropup__footer span {
display: none;
}
@media only screen and (min-width: 770px) {
.app-dropup__footer {
font-size: 16px;
}
.app-dropup__footer span {
display: inline;
}
}
.app-menu {
position: absolute;
bottom: 44px;
right: 0;
width: 100%;
z-index: 8;
}
@media only screen and (min-width: 770px) {
.app-menu {
left: 0;
right: 2em;
}
}
.app-options {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
position: absolute;
bottom: 0;
right: 0;
width: 246px;
height: 72px;
background: #fff;
border-radius: 8px;
cursor: pointer;
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-transition: all 225ms ease-out;
transition: all 225ms ease-out;
}
.app-options:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 8px;
-webkit-box-shadow: 0 40px 84px rgba(0, 0, 0, 0.5);
box-shadow: 0 40px 84px rgba(0, 0, 0, 0.5);
z-index: -1;
}
@media only screen and (min-width: 770px) {
.app-options {
right: 8em;
width: 330px;
height: 88px;
padding: 0 1em 0 2em;
}
}
.white-background .app-options {
background: #f2f2f2;
}
.app-options__content {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.app-option__menu {
padding: 0 1em;
}
.app-option {
display: block;
position: relative;
padding: 0.6em 0;
margin: 0 0.8em;
border: 1px solid transparent;
border-radius: 6px;
opacity: 0;
cursor: pointer;
-webkit-transform: translateY(10px);
transform: translateY(10px);
}
.app-option:after {
content: "";
position: absolute;
top: 33px;
right: 8px;
width: 28px;
height: 28px;
background-image: url(//www.cescisneros.es/images/check-436b20a3.svg);
background-repeat: no-repeat;
background-position: 94% center;
-webkit-transition: all 250ms ease-out;
transition: all 250ms ease-out;
-webkit-transform: translateX(6px);
transform: translateX(6px);
opacity: 0;
}
.app-option h3 {
font-size: 12px;
margin-bottom: 4px;
text-transform: uppercase;
letter-spacing: 0.08em;
margin-top: 0;
}
@media only screen and (min-width: 770px) {
.app-option {
padding: 0.6em 1em;
}
.app-option.is-active:after {
opacity: 1;
-webkit-transform: translateX(0px);
transform: translateX(0px);
}
}
.app-option__content {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.app-option__color {
width: 36px;
height: 36px;
border-radius: 8px;
background: #0f1c70;
margin-right: 0.5em;
}
.app-option__color:last-child {
margin-right: 0;
}
@media only screen and (min-width: 770px) {
.app-option__color {
width: 40px;
height: 40px;
}
}
.app-option__image {
width: 88px;
height: 40px;
border-radius: 4px;
background-size: cover;
margin-right: 0.5em;
}
.app-option__symbol {
display: none;
padding: 0 1em;
}
@media only screen and (min-width: 770px) {
.app-option__symbol {
display: block;
}
}
.app-download {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
position: absolute;
bottom: 0;
right: auto;
width: 72px;
height: 72px;
background: #fff;
border-radius: 8px;
}
.app-download:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 8px;
-webkit-box-shadow: 0 40px 84px rgba(0, 0, 0, 0.5);
box-shadow: 0 40px 84px rgba(0, 0, 0, 0.5);
z-index: -1;
}
@media only screen and (min-width: 770px) {
.app-download {
width: 88px;
height: 88px;
right: 2em;
}
}
.topography-shape {
position: absolute;
top: -150px;
left: -200px;
width: 180%;
}
@media only screen and (min-width: 770px) {
.topography-shape {
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
}
.index-parallax {
position: absolute;
top: 0;
overflow: no-display;
}
.index-parallax__shape {
position: absolute;
top: 0;
}
.index-parallax__circle {
width: 60px;
height: 60px;
border-radius: 30px;
background: #65d0ce;
}
.index-parallax__circle-blue {
background: transparent;
border: 1px solid #04286e;
}
.index-article {
position: relative;
margin: 1em 0 0;
z-index: 1;
}
.index-article h5 {
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 0.4em;
color: #ea607e;
}
.index-article h1 {
font-size: 32px;
margin-bottom: 0.75em;
}
.index-article h4 {
margin-top: 1.6em;
margin-bottom: -0.8em;
font-size: 16px;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.index-article p {
font-size: 18px;
line-height: 1.5;
}
.index-article a {
color: #ea607e;
text-decoration: underline;
}
.index-article ul {
padding-left: 1em;
}
.index-article li {
list-style: disc outside none;
line-height: 1.4;
margin-bottom: 0.5em;
font-size: 18px;
}
@media only screen and (min-width: 770px) {
.index-article h1 {
font-size: 40px;
}
.index-article p {
font-size: 20px;
}
}
.index-article__offset {
margin: 2em 0em 1em;
border-radius: 6px;
overflow: hidden;
-webkit-box-shadow: 0 8px 40px rgba(0, 0, 0, 0.2);
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.2);
}
@media only screen and (min-width: 770px) {
.index-article__offset {
margin: 4em -6em 3em;
}
}
.index-article__full {
width: 100vw;
height: 260px;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
}
@media only screen and (min-width: 770px) {
.index-article__full {
height: 520px;
}
}
.index-gallery__row-one {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 200vw;
margin-top: 2em;
margin-left: -10vw;
}
.index-gallery__row-two {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 200vw;
margin-top: 10px;
margin-left: -20vw;
}
@media only screen and (min-width: 770px) {
.index-gallery__row-two {
margin-top: 20px;
}
}
.index-gallery__image {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: relative;
width: 30vw;
height: 120px;
margin-right: 10px;
background: #fff;
border-radius: 8px;
}
.index-gallery__image img {
width: 100%;
width: -webkit-fill-available;
width: -moz-available;
width: fill-available;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center;
border-radius: 8px;
}
.index-gallery__image:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 8px;
-webkit-box-shadow: 0 40px 84px rgba(0, 0, 0, 0.1);
box-shadow: 0 40px 84px rgba(0, 0, 0, 0.1);
z-index: -1;
}
@media only screen and (min-width: 770px) {
.index-gallery__image {
height: 240px;
margin-right: 20px;
}
}
.email-card {
margin: 4em 0 6em;
padding: 2em 2em;
border-top: 4px solid;
-webkit-box-shadow: 0 40px 85px rgba(4, 39, 107, 0.2);
box-shadow: 0 40px 85px rgba(4, 39, 107, 0.2);
}
#mc_embed_signup .button {
width: 100% !important;
background: #50e3c2;
color: #04286e;
text-transform: uppercase;
font-size: 12px;
letter-spacing: 0.1em;
height: 42px;
border: none;
border-radius: 4px;
margin-top: 8px;
}
#mc_embed_signup input.email {
border-radius: 4px;
}
.index-parallax__shape:nth-child(2),
.index-parallax__shape:nth-child(5) {
display: none;
}
@media only screen and (min-width: 770px) {
.index-parallax__shape:nth-child(2),
.index-parallax__shape:nth-child(5) {
display: block;
}
}