/* Basscss Modules */
/* Basscss Type Scale */
.h00 { font-size: 4rem }
.h0 { font-size: 3rem }
.h1 { font-size: 2rem }
.h2 { font-size: 1.5rem }
.h3 { font-size: 1.25rem }
.h4 { font-size: 1rem }
.h5 { font-size: 0.875rem }
.h6 { font-size: 0.75rem }
/* Basscss Typography */
.font-family-inherit { font-family: inherit }
.font-size-inherit { font-size: inherit }
.text-decoration-none { text-decoration: none }
.bold { font-weight: bold; font-weight: 700 }
.regular { font-weight: normal }
.italic { font-style: italic }
.caps { text-transform: uppercase; letter-spacing: .2em; }
.left-align { text-align: left }
.center { text-align: center }
.right-align { text-align: right }
.justify { text-align: justify }
.nowrap { white-space: nowrap }
.break-word { word-wrap: break-word }
.line-height-1 { line-height: 1 }
.line-height-2 { line-height: 1.125 }
.line-height-3 { line-height: 1.25 }
.line-height-4 { line-height: 1.5 }
.list-style-none { list-style: none }
.underline { text-decoration: underline }
.truncate {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.list-reset {
list-style: none;
padding-left: 0;
}
/* Basscss Layout */
.inline { display: inline }
.block { display: block }
.inline-block { display: inline-block }
.table { display: table }
.table-cell { display: table-cell }
.overflow-hidden { overflow: hidden }
.overflow-scroll { overflow: scroll }
.overflow-auto { overflow: auto }
.clearfix:before,
.clearfix:after {
content: " ";
display: table
}
.clearfix:after { clear: both }
.left { float: left }
.right { float: right }
.fit { max-width: 100% }
.max-width-1 { max-width: 24rem }
.max-width-2 { max-width: 32rem }
.max-width-3 { max-width: 48rem }
.max-width-4 { max-width: 64rem }
.border-box { -webkit-box-sizing: border-box; box-sizing: border-box }
/* Basscss Align */
.align-baseline { vertical-align: baseline }
.align-top { vertical-align: top }
.align-middle { vertical-align: middle }
.align-bottom { vertical-align: bottom }
/* Basscss Margin */
.m0 { margin: 0 }
.mt0 { margin-top: 0 }
.mr0 { margin-right: 0 }
.mb0 { margin-bottom: 0 }
.ml0 { margin-left: 0 }
.mx0 { margin-left: 0; margin-right: 0 }
.my0 { margin-top: 0; margin-bottom: 0 }
.m1 { margin: 0.5rem }
.mt1 { margin-top: 0.5rem }
.mr1 { margin-right: 0.5rem }
.mb1 { margin-bottom: 0.5rem }
.ml1 { margin-left: 0.5rem }
.mx1 { margin-left: 0.5rem; margin-right: 0.5rem }
.my1 { margin-top: 0.5rem; margin-bottom: 0.5rem }
.m2 { margin: 1rem }
.mt2 { margin-top: 1rem }
.mr2 { margin-right: 1rem }
.mb2 { margin-bottom: 1rem }
.ml2 { margin-left: 1rem }
.mx2 { margin-left: 1rem; margin-right: 1rem }
.my2 { margin-top: 1rem; margin-bottom: 1rem }
.m3 { margin: 2rem }
.mt3 { margin-top: 2rem }
.mr3 { margin-right: 2rem }
.mb3 { margin-bottom: 2rem }
.ml3 { margin-left: 2rem }
.mx3 { margin-left: 2rem; margin-right: 2rem }
.my3 { margin-top: 2rem; margin-bottom: 2rem }
.m4 { margin: 4rem }
.mt4 { margin-top: 4rem }
.mr4 { margin-right: 4rem }
.mb4 { margin-bottom: 4rem }
.ml4 { margin-left: 4rem }
.mx4 { margin-left: 4rem; margin-right: 4rem }
.my4 { margin-top: 4rem; margin-bottom: 4rem }
.mxn1 { margin-left:-0.5rem; margin-right:-0.5rem; }
.mxn2 { margin-left:-1rem; margin-right:-1rem; }
.mxn3 { margin-left:-2rem; margin-right:-2rem; }
.mxn4 { margin-left:-4rem; margin-right:-4rem; }
.m-auto { margin: auto; }
.mt-auto { margin-top: auto }
.mr-auto { margin-right: auto }
.mb-auto { margin-bottom: auto }
.ml-auto { margin-left: auto }
.mx-auto { margin-left: auto; margin-right: auto; }
.my-auto { margin-top: auto; margin-bottom: auto; }
/* Basscss Padding */
.p0 { padding: 0 }
.pt0 { padding-top: 0 }
.pr0 { padding-right: 0 }
.pb0 { padding-bottom: 0 }
.pl0 { padding-left: 0 }
.px0 { padding-left: 0; padding-right: 0 }
.py0 { padding-top: 0; padding-bottom: 0 }
.p1 { padding: 0.5rem }
.pt1 { padding-top: 0.5rem }
.pr1 { padding-right: 0.5rem }
.pb1 { padding-bottom: 0.5rem }
.pl1 { padding-left: 0.5rem }
.py1 { padding-top: 0.5rem; padding-bottom: 0.5rem }
.px1 { padding-left: 0.5rem; padding-right: 0.5rem }
.p2 { padding: 1rem }
.pt2 { padding-top: 1rem }
.pr2 { padding-right: 1rem }
.pb2 { padding-bottom: 1rem }
.pl2 { padding-left: 1rem }
.py2 { padding-top: 1rem; padding-bottom: 1rem }
.px2 { padding-left: 1rem; padding-right: 1rem }
.p3 { padding: 2rem }
.pt3 { padding-top: 2rem }
.pr3 { padding-right: 2rem }
.pb3 { padding-bottom: 2rem }
.pl3 { padding-left: 2rem }
.py3 { padding-top: 2rem; padding-bottom: 2rem }
.px3 { padding-left: 2rem; padding-right: 2rem }
.p4 { padding: 4rem }
.pt4 { padding-top: 4rem }
.pr4 { padding-right: 4rem }
.pb4 { padding-bottom: 4rem }
.pl4 { padding-left: 4rem }
.py4 { padding-top: 4rem; padding-bottom: 4rem }
.px4 { padding-left: 4rem; padding-right: 4rem }
/* Basscss Grid */
.col {
float: left;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.col-right {
float: right;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.col-1 {
width: 8.33333%;
}
.col-2 {
width: 16.66667%;
}
.col-3 {
width: 25%;
}
.col-4 {
width: 33.33333%;
}
.col-5 {
width: 41.66667%;
}
.col-6 {
width: 50%;
}
.col-7 {
width: 58.33333%;
}
.col-8 {
width: 66.66667%;
}
.col-9 {
width: 75%;
}
.col-10 {
width: 83.33333%;
}
.col-11 {
width: 91.66667%;
}
.col-12 {
width: 100%;
}
@media (min-width: 40em) {
.sm-col {
float: left;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.sm-col-right {
float: right;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.sm-col-1 {
width: 8.33333%;
}
.sm-col-2 {
width: 16.66667%;
}
.sm-col-3 {
width: 25%;
}
.sm-col-4 {
width: 33.33333%;
}
.sm-col-5 {
width: 41.66667%;
}
.sm-col-6 {
width: 50%;
}
.sm-col-7 {
width: 58.33333%;
}
.sm-col-8 {
width: 66.66667%;
}
.sm-col-9 {
width: 75%;
}
.sm-col-10 {
width: 83.33333%;
}
.sm-col-11 {
width: 91.66667%;
}
.sm-col-12 {
width: 100%;
}
}
@media (min-width: 52em) {
.md-col {
float: left;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.md-col-right {
float: right;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.md-col-1 {
width: 8.33333%;
}
.md-col-2 {
width: 16.66667%;
}
.md-col-3 {
width: 25%;
}
.md-col-4 {
width: 33.33333%;
}
.md-col-5 {
width: 41.66667%;
}
.md-col-6 {
width: 50%;
}
.md-col-7 {
width: 58.33333%;
}
.md-col-8 {
width: 66.66667%;
}
.md-col-9 {
width: 75%;
}
.md-col-10 {
width: 83.33333%;
}
.md-col-11 {
width: 91.66667%;
}
.md-col-12 {
width: 100%;
}
}
@media (min-width: 64em) {
.lg-col {
float: left;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.lg-col-right {
float: right;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.lg-col-1 {
width: 8.33333%;
}
.lg-col-2 {
width: 16.66667%;
}
.lg-col-3 {
width: 25%;
}
.lg-col-4 {
width: 33.33333%;
}
.lg-col-5 {
width: 41.66667%;
}
.lg-col-6 {
width: 50%;
}
.lg-col-7 {
width: 58.33333%;
}
.lg-col-8 {
width: 66.66667%;
}
.lg-col-9 {
width: 75%;
}
.lg-col-10 {
width: 83.33333%;
}
.lg-col-11 {
width: 91.66667%;
}
.lg-col-12 {
width: 100%;
}
}
.flex { display: -webkit-box; display: -ms-flexbox; display: flex }
@media (min-width: 40em) {
.sm-flex { display: -webkit-box; display: -ms-flexbox; display: flex }
}
@media (min-width: 52em) {
.md-flex { display: -webkit-box; display: -ms-flexbox; display: flex }
}
@media (min-width: 64em) {
.lg-flex { display: -webkit-box; display: -ms-flexbox; display: flex }
}
.flex-column { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column }
.flex-wrap { -ms-flex-wrap: wrap; flex-wrap: wrap }
.items-start { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start }
.items-end { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end }
.items-center { -webkit-box-align: center; -ms-flex-align: center; align-items: center }
.items-baseline { -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline }
.items-stretch { -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch }
.self-start { -ms-flex-item-align: start; align-self: flex-start }
.self-end { -ms-flex-item-align: end; align-self: flex-end }
.self-center { -ms-flex-item-align: center; align-self: center }
.self-baseline { -ms-flex-item-align: baseline; align-self: baseline }
.self-stretch { -ms-flex-item-align: stretch; align-self: stretch }
.justify-start { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start }
.justify-end { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end }
.justify-center { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center }
.justify-between { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between }
.justify-around { -ms-flex-pack: distribute; justify-content: space-around }
.justify-evenly { -webkit-box-pack: space-evenly; -ms-flex-pack: space-evenly; justify-content: space-evenly }
.content-start { -ms-flex-line-pack: start; align-content: flex-start }
.content-end { -ms-flex-line-pack: end; align-content: flex-end }
.content-center { -ms-flex-line-pack: center; align-content: center }
.content-between { -ms-flex-line-pack: justify; align-content: space-between }
.content-around { -ms-flex-line-pack: distribute; align-content: space-around }
.content-stretch { -ms-flex-line-pack: stretch; align-content: stretch }
/* 1. Fix for Chrome 44 bug. https://code.google.com/p/chromium/issues/detail?id=506893 */
.flex-auto {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
min-width: 0; /* 1 */
min-height: 0; /* 1 */
}
.flex-none { -webkit-box-flex: 0; -ms-flex: none; flex: none }
.order-0 { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0 }
.order-1 { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1 }
.order-2 { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2 }
.order-3 { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3 }
.order-last { -webkit-box-ordinal-group: 100000; -ms-flex-order: 99999; order: 99999 }
/* Basscss Position */
.relative { position: relative }
.absolute { position: absolute }
.fixed { position: fixed }
.top-0 { top: 0 }
.right-0 { right: 0 }
.bottom-0 { bottom: 0 }
.left-0 { left: 0 }
.z1 { z-index: 1 }
.z2 { z-index: 2 }
.z3 { z-index: 3 }
.z4 { z-index: 4 }
/* Basscss Border */
.border {
border-style: solid;
border-width: 1px;
}
.border-top {
border-top-style: solid;
border-top-width: 1px;
}
.border-right {
border-right-style: solid;
border-right-width: 1px;
}
.border-bottom {
border-bottom-style: solid;
border-bottom-width: 1px;
}
.border-left {
border-left-style: solid;
border-left-width: 1px;
}
.border-none { border: 0 }
.rounded { border-radius: .25rem }
.circle { border-radius: 50% }
.rounded-top { border-radius: .25rem .25rem 0 0 }
.rounded-right { border-radius: 0 .25rem .25rem 0 }
.rounded-bottom { border-radius: 0 0 .25rem .25rem }
.rounded-left { border-radius: .25rem 0 0 .25rem }
.not-rounded { border-radius: 0 }
/* Basscss Hide */
.hide {
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
}
@media (max-width: 40em) {
.xs-hide { display: none !important }
}
@media (min-width: 40em) and (max-width: 52em) {
.sm-hide { display: none !important }
}
@media (min-width: 52em) and (max-width: 64em) {
.md-hide { display: none !important }
}
@media (min-width: 64em) {
.lg-hide { display: none !important }
}
.display-none { display: none !important }
/* Basscss Btn */
/*@import 'basscss-defaults';*/
.btn {
font-family: inherit;
font-size: inherit;
font-weight: 700;
text-decoration: none;
cursor: pointer;
display: inline-block;
line-height: 1.125rem;
padding: 0.7rem 1rem;
margin: 0;
height: auto;
border: 1px solid transparent;
vertical-align: middle;
-webkit-appearance: none;
color: inherit;
background-color: transparent;
}
.btn:hover {
text-decoration: none;
}
.btn:focus {
outline: none;
border-color: rgba(0,0,0,0.125);
-webkit-box-shadow: 0 0 0 3px rgba(0,0,0,0.25);
box-shadow: 0 0 0 3px rgba(0,0,0,0.25);
}
::-moz-focus-inner {
border: 0;
padding: 0;
}
.ms-auto { -webkit-margin-start: auto }
.me-auto { -webkit-margin-end: auto }
.ms0 { -webkit-margin-start: 0 }
.me0 { -webkit-margin-end: 0 }
.mf0 { -webkit-margin-before: 0 }
.ma0 { -webkit-margin-after: 0 }
.ms1 { -webkit-margin-start: 0.5rem }
.me1 { -webkit-margin-end: 0.5rem }
.mf1 { -webkit-margin-before: 0.5rem }
.ma1 { -webkit-margin-after: 0.5rem }
.ms2 { -webkit-margin-start: 1rem }
.me2 { -webkit-margin-end: 1rem }
.mf2 { -webkit-margin-before: 1rem }
.ma2 { -webkit-margin-after: 1rem }
.ms3 { -webkit-margin-start: 2rem }
.me3 { -webkit-margin-end: 2rem }
.mf3 { -webkit-margin-before: 2rem }
.ma3 { -webkit-margin-after: 2rem }
.ms4 { -webkit-margin-start: 4rem }
.me4 { -webkit-margin-end: 4rem }
.mf4 { -webkit-margin-before: 4rem }
.ma4 { -webkit-margin-after: 4rem }
.msn1 { -webkit-margin-start: -0.5rem }
.men1 { -webkit-margin-end: -0.5rem }
.mfn1 { -webkit-margin-before: -0.5rem }
.man1 { -webkit-margin-after: -0.5rem }
.msn2 { -webkit-margin-start: -1rem }
.men2 { -webkit-margin-end: -1rem }
.mfn2 { -webkit-margin-before: -1rem }
.man2 { -webkit-margin-after: -1rem }
.msn3 { -webkit-margin-start: -2rem }
.men3 { -webkit-margin-end: -2rem }
.mfn3 { -webkit-margin-before: -2rem }
.man3 { -webkit-margin-after: -2rem }
.msn4 { -webkit-margin-start: -4rem }
.men4 { -webkit-margin-end: -4rem }
.mfn4 { -webkit-margin-before: -4rem }
.man4 { -webkit-margin-after: -4rem }
.ps0 { -webkit-padding-start: 0 }
.pe0 { -webkit-padding-end: 0 }
.pf0 { -webkit-padding-before: 0 }
.pa0 { -webkit-padding-after: 0 }
.ps1 { -webkit-padding-start: 0.5rem }
.pe1 { -webkit-padding-end: 0.5rem }
.pf1 { -webkit-padding-before: 0.5rem }
.pa1 { -webkit-padding-after: 0.5rem }
.ps2 { -webkit-padding-start: 1rem }
.pe2 { -webkit-padding-end: 1rem }
.pf2 { -webkit-padding-before: 1rem }
.pa2 { -webkit-padding-after: 1rem }
.ps3 { -webkit-padding-start: 2rem }
.pe3 { -webkit-padding-end: 2rem }
.pf3 { -webkit-padding-before: 2rem }
.pa3 { -webkit-padding-after: 2rem }
.ps4 { -webkit-padding-start: 4rem }
.pe4 { -webkit-padding-end: 4rem }
.pf4 { -webkit-padding-before: 4rem }
.pa4 { -webkit-padding-after: 4rem }
.start-align { text-align: start }
.end-align { text-align: end }
/* Basscss Border Colors */
.border-black { border-color: #111 }
.border-gray-darken { border-color: #565656 }
.border-gray { border-color: #aaa }
.border-silver { border-color: #ccc }
.border-white { border-color: #fff }
.border-green { border-color: #70bb46; }
.border-green-lighten { border-color: #e5f3de; }
.border-red-darken { border-color: #881515 }
.border-red { border-color: #c23b2d; }
.border-red-lighten { border-color: #ea7b7b; }
.border-facebook { border-color: #bfcee6; }
.border-error { border-color: #C23B2D; }
.border-theme { border-color: #B03D40; }
/* Custom CSS */
/* Arrows */
.arrow {
position: relative;
/*border-radius: var(--border-radius);*/
margin-bottom: 22.5px;
padding-bottom: 1em;
}
.arrow.hide {
margin: 0;
padding: 0;
}
.arrow-down {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.arrow-up {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.arrow:after {
content: ' ';
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-width: 15px;
border-style: solid;
border-color: transparent;
}
.arrow-red {
background-color: #c23b2d;
}
.arrow-red:after {
color: #c23b2d;
}
.arrow-green {
background-color: #70bb46;
}
.arrow-green:after {
color: #70bb46;
}
.arrow-blue {
background-color: #34495e;
}
.arrow-blue:after {
color: #34495e;
}
.arrow-yellow {
background-color: rgb(243, 156, 18);
}
.arrow-yellow:after {
color: rgb(243, 156, 18);
}
.arrow-grey:after {
color: rgba(0,0,0,0.25)
}
.arrow-error:after{
color:#F9EDED;
}
.arrow-success:after{
color:#dff0d8;
}
.arrow-top:after {
border-bottom-color: currentcolor;
left: 50%;
bottom: 100%;
margin-left:-15px;
}
.arrow-right:after {
border-left-color: currentcolor;
left: 100%;
top: 50%;
margin-top:-15px;
}
.arrow-bottom:after {
border-top-color: currentcolor;
top: 100%;
left: 50%;
margin-left:-15px;
}
.arrow-left:after {
border-right-color: currentcolor;
top: 50%;
right: 100%;
margin-top:-15px;
}
/*
Potential polyfill : https://github.com/josephschmitt/Clamp.js/blob/master/clamp.js
*/
.clamp {
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.clamp2 {
-webkit-line-clamp: 2;
}
.clamp4 {
height: auto;
-webkit-line-clamp: 4;
}
html {
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body {
font-family: 'Roboto','Fira Sans','Helvetica Neue', Helvetica, sans-serif;
line-height: 1.3;
color: #565656;
margin: 0;
padding: 0;
}
input,
textarea,
button,
select {
font-family: 'Roboto','Fira Sans','Helvetica Neue', Helvetica, sans-serif;
}
a {
text-decoration: none;
cursor: pointer;
color: #565656;
}
button,
a {
-webkit-focus-ring-color: rgba(0, 0, 0, 0);
}
a, label p {
color:#565656;
}
p > a {
font-weight: 700;
}
svg:not(:root) { overflow: hidden; }
svg {
fill: inherit;
width: 100%;
height: 100%;
display: inline-block;
}
svg:not(:root) {
overflow: hidden;
}
a svg > use {
pointer-events: none;
}
a:hover {
text-decoration: none;
}
figure {
margin: 0;
padding: 0;
}
.leftlist ul {
display: table;
text-align: left;
margin: 0 auto;
}
.icon {
width: 20px;
height: 20px;
fill: #565656;
}
.icon-20 {
width: 20px;
height: 20px;
}
.icon-google {
width: 18px;
height: 18px;
}
.icon.icon-social {
fill: #333333;
}
.icon50 {
width: 50px;
height: 50px;
}
.icon70 {
width: 70px;
height: 70px;
}
.icon-73 {
width: 73px;
height: 73px;
}
.icon-large {
width: 38px;
height: 38px;
}
.icon-verified {
width: 50px;
height: 50px;
}
.icon.largeRTL180 {
width: 38px;
height: 38px;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
[dir=rtl] .icon.largeRTL180 {
-webkit-transform: translateX(-50%) translateY(-50%) rotate(180deg);
transform: translateX(-50%) translateY(-50%) rotate(180deg);
}
.icon-small {
width: 15px;
height: 15px;
}
[dir=rtl] .icon.rtl180 {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.small-text {
font-size: 12px;
}
.large-text {
font-size: 18px;
}
.medium-text {
font-size: 14px;
}
.default-text {
font-size: 16px;
}
.height-1 {
height: 1rem;
}
.spinner {
-webkit-animation: 2s infinite cm-spinY;
animation: 2s infinite cm-spinY;
}
@-webkit-keyframes cm-spinY {
0% {
-webkit-transform: rotateY(0deg);
}
100% {
-webkit-transform: rotateY(360deg);
}
}
@keyframes cm-spinY {
0% {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
100% {
-webkit-transform: rotateY(360deg);
transform: rotateY(360deg);
}
}
.sitelogo-autologin .icon {
width: 150px;
height: 150px;
}
.site-logo-on-white {
color: #8a804a;
fill: #565656;
}
a *,
a *, button * {
pointer-events: none;
}
.mtn2{
margin-top: -1rem;
}
.mbn-45 {
margin-bottom: -45px;
}
.auth-log-backin a{
font-weight: 700;
color: #333333;
}
.activity-footer {
z-index: 203;
}
.menu-open, .menu-open body {
width: 100vw;
}
.menu-open body {
overflow-y: hidden;
}
main {
position: relative;
z-index: 100;
-webkit-transition: -webkit-transform 0.5s ease;
transition: -webkit-transform 0.5s ease;
transition: transform 0.5s ease;
transition: transform 0.5s ease, -webkit-transform 0.5s ease;
width: 100vw;
}
main > header {
display: none;
}
body > header {
z-index: 4000 !important;
position: absolute;
top: 0;
left: 0;
}
.menu-open #menu {
opacity: 1;
-webkit-transition: background-color 0.25s ease 0.4s, -webkit-transform 0.5s ease;
transition: background-color 0.25s ease 0.4s, -webkit-transform 0.5s ease;
transition: transform 0.5s ease, background-color 0.25s ease 0.4s;
transition: transform 0.5s ease, background-color 0.25s ease 0.4s, -webkit-transform 0.5s ease;
background-color: rgba(0, 0, 0, 0.2);
-webkit-transform: translateX(0);
transform: translateX(0);
}
.menu-open body {
overflow: hidden;
}
main {
background: #f0f0f0;
}
#menu .icon {
height: 20px;
}
.oas #menu {
bottom: -44px;
}
#menu {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 9999;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
-webkit-transition: -webkit-transform 0.5s ease;
transition: -webkit-transform 0.5s ease;
transition: transform 0.5s ease;
transition: transform 0.5s ease, -webkit-transform 0.5s ease;
background-color: rgba(0, 0, 0, 0);
/*overflow-y: auto;*/
-webkit-overflow-scrolling: touch;
}
[dir=rtl]:not(.menu-open) #menu {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
[dir=rtl] .navbar {
left: auto;
right: 0;
}
#menu .navbar {
width: 80%;
}
#menu .backdrop {
height: 100%;
width: 80%;
background-color: #fff;
}
#menu {
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
#menu .menu-content {
position: fixed;
top: 44px;
width: 80%;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
cursor: none;
}
#menu .bottom-50{
bottom:50px;
}
main{
-webkit-transition: -webkit-transform 0.5s cubic-bezier(0.4, 0.01, 0.17, 0.99);
transition: -webkit-transform 0.5s cubic-bezier(0.4, 0.01, 0.17, 0.99);
transition: transform 0.5s cubic-bezier(0.4, 0.01, 0.17, 0.99);
transition: transform 0.5s cubic-bezier(0.4, 0.01, 0.17, 0.99), -webkit-transform 0.5s cubic-bezier(0.4, 0.01, 0.17, 0.99);
}
.menu-footer {
position: fixed;
bottom: 0;
width: 80%;
overflow: hidden;
}
.oas.menu-open .menu-footer {
display: block;
-webkit-transform: translateX(0);
transform: translateX(0);
}
.oas .menu-footer {
display: none;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
-webkit-transition: -webkit-transform 0.5s ease;
transition: -webkit-transform 0.5s ease;
transition: transform 0.5s ease;
transition: transform 0.5s ease, -webkit-transform 0.5s ease;
}
.oas.menu-open .menu-content {
-webkit-transform: translateX(0);
transform: translateX(0);
}
.oas .menu-content {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
-webkit-transition: -webkit-transform 0.5s ease;
transition: -webkit-transform 0.5s ease;
transition: transform 0.5s ease;
transition: transform 0.5s ease, -webkit-transform 0.5s ease;
}
.menu-content a {
color: #565656;
/*border-bottom: 1px solid #ccc;*/
text-decoration: none;
min-height: 44px;
-webkit-tap-highlight-color: rgba(0,0,0,0.25);
}
a[data-count]:after,
[data-count]:after,
.badge {
content: attr(data-count);
position: absolute;
font-size: .75rem;
padding: 2px 6px 2px;
background: #b15d51;
color: #fff;
border-radius: 10px;
line-height: 1.3;
right: 0.5rem;
top: 50%;
text-shadow: none;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.activity-count[data-count]:after {
background-color: #F1DADD;
top: 0.5rem;
right: 0.25rem;
}
[dir=rtl] a[data-count]:after, [dir=rtl] .badge {
right: auto;
left: 0.5rem;
}
/* Move the submenu indicator when there is a data badge visible */
a[data-count] svg.indicator {
-webkit-margin-end: 40px;
margin-inline-end: 40px;
}
header a[data-count]:after {
right: auto;
left: 24px;
top: 31%;
}
[dir=rtl] header a[data-count]:after {
right: 23px;
left: auto;
}
.menu-selection-list {
max-height: 0;
overflow: hidden;
-webkit-transition: max-height 1s cubic-bezier(0.4, 0.01, 0.17, 0.99);
transition: max-height 1s cubic-bezier(0.4, 0.01, 0.17, 0.99);
}
#menu-activity[aria-expanded='true'] {
max-height: 400px;
}
#menu-popularsearch[aria-expanded=true] {
max-height: 225px;
}
.menu-selection-list h2 {
font-size: 14px;
background: #ccc;
margin: 0;
padding: 5px;
min-height: 24px;
}
.menu-selection-list a {
background-color: #efefef;
padding: 0 20px;
}
#menu .menu-header a {
font-weight: 700;
color: #fff;
text-decoration: none;
text-shadow: none;
}
#menu .menu-header a .heart-icon, .navbar a .heart-icon {
width: 30px;
height: 30px;
-webkit-margin-start: 0.5rem;
-webkit-margin-end: 0.25rem;
}
#menu .menu-header a .name-logo, .navbar a .name-logo {
width: 140px;
height: 30px;
}
[dir=rtl] #menu .menu-header a .site-logo {
margin-right: 6px;
}
.menu-content svg.indicator {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.menu-content .expanded svg.indicator {
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
}
.navbar {
z-index: 10;
}
.navbar-s {
background-color: #F1DADD;
color: #222;
height: 44px;
}
.navbar-s .title {
margin: auto;
font-size: 1rem;
}
.navbar-s .icon.nav-icon {
fill: #222;
/*padding: 0.7rem 0.5rem;*/
}
.navbar-s a {
-webkit-tap-highlight-color: rgba(0,0,0,0.25);
}
/* homeD test landing page */
.navbar-s.homeD .icon.nav-icon {
fill: #fff;
}
.navbar-s.homeD a {
color: #fff;
}
.navbar {
-webkit-transition: -webkit-transform 0.2s ease-in;
transition: -webkit-transform 0.2s ease-in;
transition: transform 0.2s ease-in;
transition: transform 0.2s ease-in, -webkit-transform 0.2s ease-in;
-webkit-transform: translateY(-44px);
transform: translateY(-44px);
position: fixed;
}
.nav-pinned .navbar {
-webkit-transform: translateY(0);
transform: translateY(0);
}
.nav-pinned.nopin .navbar{
-webkit-transform: translateY(-44px);
transform: translateY(-44px);
}
.no-pin .navbar{
-webkit-transform: translateY(-44px) !important;
transform: translateY(-44px) !important;
}
.pin .navbar{
-webkit-transform: translateY(0) !important;
transform: translateY(0) !important;
}
.navbar {
left: 0;
top: 0;
width: 100%;
}
.nav-fixed {
padding-bottom: 100px;
}
.nav-fixed nav svg{
opacity: 0.6;
fill: #fff;
}
nav svg.nav-fixed-svg-fill{
color: #fff;
fill: #fff;
}
.nav-fixed-AB-test nav .active-tab{
fill: #fff;
}
/*
Exclude text treament for the following languages:
Chinese Simplified
Chinese Traditional
Japanese
Korean
The language attribute can be set on any DOM Element
To cover the entire document add the lang attribute to the tag
eg.
Language codes from ISO 639
See W3C: http://www.w3.org/International/articles/language-tags/
CHINESE zh (zh-Hans, for css purposes here zh is fine)
TRADITIONAL zh (zh-Hant, for css purposes here zh is fine)
JAPANESE ja
KOREAN ko
*/
/* Reset font weight and font-style to var(--normal-font-weight) */
:lang(zh) *,
:lang(ja) *,
:lang(ko) * {
font-weight: 400 !important;
font-style: 400 !important;
}
:lang(zh) p > a,
:lang(ja) p > a,
:lang(ko) p > a{
text-decoration: underline!important;
}
:lang(zh) .form-item a,
:lang(ja) .form-item a,
:lang(ko) .form-item a{
text-decoration: underline;
}
/* Right to left language support */
[dir=rtl] .left {
float: right !important;
}
[dir=rtl] .right {
float: left !important;
}
[dir=rtl] ul {
-webkit-padding-start: 0px;
}
[lang=ms] *,
[lang=in] *,
[lang=my] * {
font-family: 'Noto Sans', sans-serif;
}
[lang=zh-Hant] * {
font-family: 'Noto Sans TC', sans-serif;
font-weight: 400;
}
[lang=zh-Hans] * {
font-family: 'Noto Sans SC Sliced', sans-serif;
font-weight: 400;
}
[lang=ar] * {
font-family: 'Tajawal', sans-serif;
}
[lang=ja] * {
font-family: 'M PLUS 1p';
}
[lang=ko] *,
[lang=km] * {
font-family: 'Noto Sans KR', sans-serif;
}
html[lang=ko],
[lang=ko] body {
font-weight: 400;
}
[lang=ja] em,
[lang=vi] em,
[lang=zh-Hans] em,
[lang=zh-Hant] em {
font-style: inherit;
}
[lang=zh-Hant] .header .h3{
font-weight: 400;
}
[lang=zh-Hans] .header .h3{
font-weight: 400;
}
[lang=ko] h1,
[lang=ko] h2,
[lang=ko] h3,
[lang=ko] .h3,
[lang=ko] .tagline,
[lang=ko] h4,
[lang=ko] .h4 {
font-weight: 400;
}
[lang=my] h1,
[lang=my] .h1,
[lang=km] h1,
[lang=km] .h1 {
line-height: 3.3rem;
}
[lang=my] h2,
[lang=my] .h2,
[lang=km] h2,
[lang=km] .h2 {
line-height: 2.3rem;
}
[lang=my] h3,
[lang=my] .h3,
[lang=my] fieldset,
[lang=my] select {
line-height: 1.9rem;
}
[lang=km] h3,
[lang=km] .h3,
[lang=km] h4,
[lang=km] .h4,
[lang=km] fieldset,
[lang=km] select{
line-height: 1.4rem;
}
[lang=my] label,
[lang=km] label {
line-height: 2.25rem;
}
.card {
/*position: relative;*/
}
.card-header a {
text-decoration: none;
color: transparent;
}
.card-header + .square:not(.additional-text) {
margin-top: -22px;
}
.card-info-location span + span:before {
content: ' • ';
}
@media (max-width: 320px) {
.card-info-name + .small-text {
display: none;
}
}
/*.card-image img {
opacity: 1;
transition: opacity 0.2s ease;
}
.card-image img[data-src] {
opacity: 0;
}*/
.card-actions {
position: absolute;
right: 0;
bottom: 10px;
left: 0;
}
.card-actions .restricted {
opacity: 0.5;
}
.card-actions a,
.card-actions .restricted{
color: #565656;
height: 60px;
width: 60px;
background: rgba(255,255,255,0.75);
border: 1px solid currentcolor;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-tap-highlight-color: rgb(0,0,0,0);
-webkit-transition-property: border-color, color;
transition-property: border-color, color;
-webkit-transition-duration: 0.25s;
transition-duration: 0.25s;
-webkit-transition-timing-function: ease-in;
transition-timing-function: ease-in;
margin: 10px;
outline: none;
}
.card-actions svg.icon {
fill: currentcolor;
width: 34px;
height: 34px;
}
.card-actions svg.icon-more {
fill: currentcolor;
width: 15px;
height: 15px;
}
.card-actions a:not([data-interest]):active,
.card-actions a[data-interest='0']:active {
color: #70bb46;
}
.card-actions [data-interest='1'],
.card-actions [data-interest='2'] {
color: #881515;
}
.card-unseen {
background: rgb(243, 156, 18);
width: 10px;
height: 10px;
border-radius: 50%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/*
Fix an edge case where if an image 404's in Safari 9.0.2 on the desktop,
the icon border inherits the link color
*/
.debdubfua a.card-header {
color: transparent !important;
}
.card-content-blur {
-webkit-filter: blur(5px);
filter: blur(5px);
}
.card-content-blur-3 {
-webkit-filter: blur(3px);
filter: blur(3px);
}
.background-image-cover{
background-size: cover;
}
.card-photo-count {
border-radius: 40%;
color: #fff;
padding: 0 5px;
height: 30px;
}
.standard-online {
position: absolute;
top: 0;
right: 0;
margin-top: -18px;
margin-right: 10px;
}
[lang=ar] .standard-online {
right: auto;
left: 0;
margin-right: 0;
margin-left: 10px;
}
.online {
width: 20px;
height: 20px;
fill: #089c47;
border-style: solid;
}
.online svg{
width: 20px;
height: 20px;
}
.new-pop-member {
padding: .25rem .3rem;
margin-top: -4px;
}
.background-no-repeat {
background-repeat: no-repeat;
}
/*@import 'avatars/avatars';*/
.membership-diamond {
fill: #000000 !important;
}
.membership-platinum {
fill: #2a3393 !important;
}
.membership-gold {
fill: #dcbc0c !important;
}
.membership-standard {
fill: #cccccc !important;
}
.slides {
overflow: hidden;
}
.slides > div {
-webkit-transition-duration: .75s;
transition-duration: .75s;
will-change: transform;
}
.slides nav {
font-size: 0;
}
/* slides and avatar */
img:not([src]) {
content: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
}
.avatar {
width: 66px;
height: 66px;
border: 3px solid #fff;
background-color: #e0e0e0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.slide {
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.slide:not(.upgradebanner) {
min-width: 100vw;
min-height: 100vw;
}
.slide img {
background-color: #e0e0e0;
}
.img-auto img{
width:100%;
height:auto;
}
.img-fit[data-src] {
}
/* avatar */
.img-fit.circle {
border: 3px solid #fff;
margin-top: -3px;
margin-left: -3px;
}
/*.slides figure,
.slides {
min-width: 100vw;
width: 100vw;
height: 100vw;
margin: 0;
padding: 0;
}*/
/*.slides img {
width: 100%;
height: 100%;
transition: opacity 1s;
pointer-events: none;
object-position: 50% 0;
object-fit: cover;
overflow: hidden;
transition: opacity .75s ease-in-out;
opacity: 1;
will-change: opacity;
}*/
/*.slides img {
background-position: 50% 0;
background-size: cover;
}
.slides img[data-src] {
opacity: 0;
}*/
/*.slides-nav {
position: absolute;
top: 75px;
right: 10px;
text-align: center;
display: flex;
justify-content: center;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
pointer-events: none;
user-select: none;
}*/
/*.slides-nav-profile {
top: 10px;
}*/
[dir=rtl] .slides-nav {
right: auto;
left: 0;
}
/*.touch .slides-nav a {
pointer-events: none;
}*/
.slides-nav a {
width: 4px;
height: 4px;
margin: 0 5px;
background: #565656;
border: 2px solid #fff;
opacity: 0.2;
border-radius: 50%;
pointer-events: auto;
cursor: pointer;
-webkit-transition: opacity .25s ease-in-out;
transition: opacity .25s ease-in-out;
}
.slides-nav .active {
opacity: 1;
}
.slides > div {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
will-change: transform;
-webkit-transform: translateX(0) translateZ(0);
transform: translateX(0) translateZ(0);
-webkit-transition: -webkit-transform ease-in-out 550ms;
transition: -webkit-transform ease-in-out 550ms;
transition: transform ease-in-out 550ms;
transition: transform ease-in-out 550ms, -webkit-transform ease-in-out 550ms;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
white-space: nowrap;
}
.slide {
display: inline-block;
margin-right: -4px;
}
@supports (display:flex) {
.slide {
margin-right: 0;
}
}
.modal-open #modal {
opacity: 1;
z-index: 5000 !important;
-webkit-transition: opacity 1s 0.5s;
transition: opacity 1s 0.5s;
}
.modal-open body {
overflow-y: hidden;
position: absolute;
width: 100%;
}
#modal {
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.5);
overflow: hidden;
opacity: 0;
}
#modal.modal-all-white {
background: #fff;
}
.modal-content {
background-color: #fff;
/*position: fixed;*/
max-height: calc(100% - 36px);
/*height: 100%;*/
/*bottom: 1em;*/
top: 1em;
right: 1em;
left: 1em;
z-index: 1;
overflow-y: auto;
border-radius: 4px;
border: 7px solid #fff;
}
.modal-content-no-border {
border: none;
}
.oas .modal-content {
max-height: 86%;
}
.modal-content .arrow {
color: #fff;
}
.modal-content .arrow a{
color: inherit;
}
.modal-content .modal {
display: block;
}
.modal-content .modal .modal {
color: #111;
}
.modal {
display: none;
}
.modal {
line-height: 1.337em;
text-align: center;
}
.modal p {
font-size: 1em;
line-height: 1.4em;
}
.modal p.small-text {
font-size: 12px;
}
.modal h1 {
font-size: 2em;
line-height: 1.2em;
}
.modal h2 {
font-size: 1.5em;
line-height: 1.2em;
}
.modal h1.single-heading {
margin-bottom: 15px;
}
.modal .details{
font-size: 0.8rem;
line-height: 1.2em;
color:#565656;
}
.modal-icon-large {
fill: currentcolor;
width: 100px;
height: 100px;
margin: 0;
padding: 0;
}
@media (max-width: 320px) {
.modal-icon-large {
display: none;
}
.arrow {
padding-top: 0.05em;
}
}
.modal-icon-medium {
fill: currentcolor;
width: 60px;
height: 60px;
margin: 0;
padding: 0;
}
.modal header > a .icon.medium {
width: 32px;
height: 32px;
}
.modal [aria-controls] {
display: block;
outline: red;
position: relative;
min-height: 1em;
}
.modal [aria-controls].absolute{
position: absolute;
}
.modal [aria-controls] svg.icon.small {
fill: #fff;
}
[dir=rtl] .modal [aria-controls] svg.icon.small {
left: 10px;
right: auto;
}
.modal .card-avatar,
.modal .card-avatar img {
width: 100px;
height: 100px;
}
.modal:last-child,
.modal .actions:last-child {
margin-bottom: 0;
}
.modal .actions {
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin-top: 20px;
text-align: center;
}
.modal .btn {
color: #0074d9;
display: block;
margin: 10px 0 20px 0;
padding: 0.75rem;
width: 100%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: relative;
}
.modal .btn.white {
color: #fff;
}
.modal .link {
margin:0;
padding:0;
font-weight: 400;
}
.modal .btn.primary {
color: #fff;
font-weight: 700;
background-color: #70bb46;
}
.modal .btn.theme {
color: #fff;
font-weight: 700;
background-color: #b15d51;
}
.modal .btn.m0 {
margin: 0;
}
.modal .btn.black {
color: #000;
}
.modal .btn.body-color {
color: #565656;
}
.modal .btn .modal-icon-medium {
width: 32px;
height: 32px;
fill: #fff;
position: absolute;
left: 10px;
top: 7px;
}
/*list-tick styles*/
.list-tick {
padding:0 20px;
}
.list-tick ul {
display: table;
text-align: left;
margin: 0 auto;
}
[dir=rtl] .list-tick ul {
text-align: right;
}
.list-tick li {
list-style: none;
}
.list-tick-icon {
fill: currentcolor;
padding: 0 10px 0 0;
margin-left: -30px;
}
[dir=rtl] .list-tick-icon {
margin-left: 0px;
margin-right: -30px;
padding: 0 0 0 10px;
}
.FB-termButton .actions {
color: #0074d9;
}
[data-cookie-preferences] {
z-index:101;
}
.modal-header{
background-color: #F1DADD;
}
.modal-header .logo-heart{
-webkit-margin-start: 0.5rem;
-webkit-margin-end: 0.25rem;
}
.modal .counter {
background: #ffffff; /* Old browsers */ /* FF3.6-15 */
background: -webkit-linear-gradient(top, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* Chrome10-25,Safari5.1-6 */
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff),color-stop(50%, #f1f1f1),color-stop(51%, #e1e1e1),to(#f6f6f6));
background: linear-gradient(to bottom, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.modal-overflow {
max-height: 90vh;
overflow-y: auto;
}
.backdrop[aria-hidden=true] {
display: none;
}
.backdrop[aria-hidden=false] {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
z-index: 10000;
}
.backdrop a {
color: #565656;
}
.backdrop-modal {
background: rgba(0,0,0,0.5);
}
.dropdown {
position: fixed;
top: 44px;
right: 5px;
background: #fff;
margin-left: 5px;
display: inline-block;
border: 1px solid #ddd;
border-radius: 7px;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
}
[dir=rtl] .dropdown {
right: auto;
left: 5px;
margin-right: 5px;
}
.dropdown .btn {
display: block;
}
.btn-link {
font-weight: 400;
padding: 0.5rem;
}
.panel {
background: #fff;
margin-top: calc(44px + 1em);
margin-left: 1em;
margin-right: 1em;
border-radius: 7px;
border: 1px solid #ddd;
border-radius: 7px;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
}
.panel .btn {
display: block;
}
#notices {
bottom: 0;
left: 0;
width: 100%;
-webkit-transform: translateY(150%);
transform: translateY(150%);
-webkit-transition: -webkit-transform 0.5s;
transition: -webkit-transform 0.5s;
transition: transform 0.5s;
transition: transform 0.5s, -webkit-transform 0.5s;
position: fixed;
z-index: 1000;
}
.notices-open #notices {
-webkit-animation: slide-in-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: slide-in-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
/*
.notices-open.nav-pinned #notices {
transform: translateY(44px);
} */
#notices .icon {
width: 20px;
height: 20px;
}
.diagram-btn {
background-color: #F1DADD;
color: #333333;
position: relative;
overflow: hidden;
}
.color-action-highlight {
color: #C24A4D;
}
/* ----------------------------------------------
* Generated by Animista on 2021-4-29 15:11:6
* Licensed under FreeBSD License.
* See http://animista.net/license for more info.
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */
/**
* ----------------------------------------
* animation slide-in-bottom
* ----------------------------------------
*/
@-webkit-keyframes slide-in-bottom {
0% {
-webkit-transform: translateY(1000px);
transform: translateY(1000px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
@keyframes slide-in-bottom {
0% {
-webkit-transform: translateY(1000px);
transform: translateY(1000px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
#notices .card-avatar,
[data-notifications-drawer] .card-avatar {
background-size: cover;
background-position: center;
}
[data-notifications-drawer]{
z-index: 999;
width: 98%;
border-top: 1px solid #c5c4c4;
border-right: 1px solid #c5c4c4;
border-left: 1px solid #c5c4c4;
}
[data-notifications-drawer].notifications-closed {
height: 0;
}
[data-notifications-drawer].notifications-open {
height: 500px;
}
[data-notifications-holder] {
max-height: 434px;
}
.profile-nav {
z-index: 100;
}
.profile-nav a {
position: relative;
height: 55px;
background-color: #e0e0e0;
}
/* inherits from a[data-count]:after, .badge in nav.css */
.profile-nav [data-count]:after{
font-weight: 700;
background-color: #bbb;
color: #565656;
top: 50%;
left: 50%;
right:auto;
-webkit-transform: translateX(13px) translateY(-22px);
transform: translateX(13px) translateY(-22px);
}
[dir=rtl] .profile-nav [data-count]:after {
right:50%;
left: auto;
-webkit-transform: translateX(-13px) translateY(-22px);
transform: translateX(-13px) translateY(-22px);
}
.profile-nav .notifications {
background: #e0e0e0;
height: 55px;
}
[dir=rtl] .profile-nav .notifications[data-count]:after {
right:50%;
left:auto;
}
ul.generic-menu-list {
list-style-type: none;
padding: 0;
margin-bottom: 0;
}
ul.generic-menu-list li svg {
width: 20px;
height: 20px;
position: absolute;
right: 10px;
top: 15px;
}
[dir=rtl] ul.generic-menu-list li svg {
left: 10px;
right:auto;
top: 15px;
}
ul.generic-menu-list li {
padding: 15px;
line-height: 1.3em;
position: relative;
cursor: pointer;
}
ul.generic-menu-list.reverse li label{
padding-left: 1em;
}
ul.generic-menu-list.reverse li svg {
width: 20px;
height: 20px;
position: absolute;
left: 5px;
top: 15px;
}
ul.generic-menu-list li a {
display: block;
text-decoration: none;
}
ul.generic-menu-list li label {
cursor: pointer;
}
/*.read-more-state ~ ul li.more-target {
opacity: 0;
max-height: 0;
font-size: 0;
transition: .25s ease;
}
.read-more-state {
display: none;
}
.read-more-state ~ ul .read-more-target {
opacity: 0;
max-height: 0;
font-size: 0;
transition: .25s ease;
}
.read-more-state:checked ~ ul .read-more-target {
opacity: 1;
font-size: inherit;
max-height: 999em;
}*/
.read-more-trigger
{
cursor: pointer;
color: #3d74c0;
background: none;
border: none;
outline: none;
width: 100%;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
.read-more-trigger svg {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
margin-top:2px;
-webkit-margin-end: 4px;
}
.read-more-trigger[aria-expanded=true] svg {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
margin-top: 0;
}
button svg {
pointer-events: none;
}
#photo-controls-overlay button:active {
border: none;
background: transparent;
-webkit-tap-highlight-color: transparent;
}
.svg-highlight:active svg{
background: rgba(0,0,0,0.25);
border-radius: 50%;
}
#button-photo-edit {
position: absolute;
bottom: 0;
left: 50%;
margin-left: -35px;
}
button:active .add-photo, button:active .edit-photo {
background-color: rgba(255,255,255,.6);
}
:checked + .fb-upload svg {
color: #fff;
fill: #2ecc40;
}
:checked + .fb-upload {
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
background: rgba(0,0,0,.7);
z-index: 1;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-transition: background 250ms ease-in;
transition: background 250ms ease-in;
}
#photo-controls-facebook {
opacity: 1;
-webkit-transition: opacity 250ms ease-in;
transition: opacity 250ms ease-in;
}
#photo-controls-facebook[hidden] {
opacity: 0;
}
.fb-upload img {
pointer-events: none;
background-color: #e1e1e1;
background-size: cover;
}
.fb-album img {
pointer-events: none;
background-color: #e1e1e1;
background-size: cover;
width: 100%;
height: 100%;
}
.hidden-overlay{
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.55);
background-blend-mode: multiply;
}
.hidden-overlay-icon {
position: absolute;
top:50%;
left: 50%;
margin-left: -30px;
}
.hidden-overlay svg{
width:60px;
height:60px;
}
.hidden-overlay img {
-webkit-filter: brightness(.5);
filter: brightness(.5);
}
.hidden-overlay .multiply {
opacity: .6;
}
.col-493{
width: 49.3%;
}
.photo-preview {
width: 250px;
height: 250px;
background-position: center;
background-size: cover;
}
.photo-preview img{
width: 100%;
height: auto;
}
.photo-sample {
width: 90px;
height: 95px;
background-size: cover;
}
.profile li {
/*display: block;*/
/*line-height: 2.2em;*/
}
.profile h1 {
font-weight: 700;
font-size: 1.2em;
margin: 0.5rem 0;
}
.profile p {
margin: 0.5rem 0;
}
.profile-avatar .card-avatar {
top: -22px;
}
.catchphrase {
color: #5A2823;
padding: 10px;
margin-top: 0px;
font-size: 1.2em;
border-bottom: 1px solid #eee;
background-color: #E9D9D6;
border-radius: 10px;
word-wrap:break-word;
text-align: center;
font-style: italic;
line-height: 1.3;
}
/*.card .editbutton,
.profile .editbutton {
padding-left: 20px;
background: url(../../images/pencil.svg) left 5px no-repeat;
background-size: 15px;
float:right;
color:#555;
display: block;
}*/
.editbuttons {
background-color: #eee;
border-color: silver
}
.editbuttons a{
border-color: inherit;
}
/*.editbuttons .editphoto {
background: url(../../images/pencil.svg) 10px center no-repeat;
background-size: 20px;
border-right:1px solid #aaa;
padding:10px 10px 10px 30px;
}
.editbuttons .addphoto {
background: url(../../images/add.svg) 10px center no-repeat;
background-size: 20px;
padding:10px 10px 10px 30px;
}*/
.profile .about {
border-bottom: 1px solid #eee;
line-height: 1.6em;
padding-bottom: 40px; /* to leave space for the more element */
}
/*.profile .preferences .left.bold,
.profile .preferences .right.bold.user-match,
.profile .about .left.bold {
font-weight: 700;
}*/
.profile .about .noanswer {
color:#999;
}
.profile .summary li:last-child {
border-bottom: 0;
}
.profile .summary .editbutton {
margin-top: 1.4em;
}
.profile .summary .edit {
display: block;
padding: 2px 5px;
font-size: 1em;
float: right;
border-radius: 10px;
}
.profile .summary {
border-bottom: 1px solid #eee;
line-height: 1.3em;
padding-bottom: 20px;
font-size: 1em;
}
.profile .summary p {
line-height: 1.7em;
word-wrap:break-word;
}
/*Preference line item*/
/*.preferences .flex :first-child {
flex-shrink: 0;
}*/
/*.preferences .flex > :not(.btn-cupid-height) {
padding-top: calc(var(--space-1) * 1.5);
}*/
/*.preferences .flex > div {
max-width: 40%;
}*/
.btn-cupid-profile-height {
height: 24px;
}
.preferences .card-avatar .circle{
border-color: #ccc;
border-width: 3px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/*@TODO: theme*/
.actions .button-done {
background-color: #E9C2C6;
border-color: #822929;
color: #822929;
}
.transition, ul li.more, ul li.more i:before, ul li.more i:after {
-webkit-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
/*.flipIn, ul li.more li {
animation: flipdown 0.5s ease both;
}*/
.no-select, h2 {
-webkit-tap-highlight-color: transparent;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* ------------------------ RTL --------------------------*/
/*[dir=rtl] .profile .preferences .tick,
[dir=rtl] .profile .preferences .notick
{
float:left;
padding-right: 6px;
}*/
/* SAFETY TIP */
.safetytip {
display: block;
padding: 7px 10px;
margin: 0;
font-size: 1.1em;
color: #5A2823;
background-color: #E9D9D6;
}
.backgroundImage{
height: 200px;
overflow: hidden;
}
.backgroundImage > :nth-child(1) {
background-position: 50% -100px;
}
@supports ((-webkit-filter: blur(4px)) or (filter: blur(4px))) {
.backgroundImage > :nth-child(1) {
-webkit-filter: blur(4px);
filter: blur(4px);
background-position: 50%;
}
}
.backgroundImage .card-avatar {
top:0;
right:0;
bottom:0;
left:0;
width: auto;
height: auto;
}
.backgroundImage .card-avatar .circle{
width: 90px;
height: 90px;
padding: 0;
margin: auto;
}
.minusMarginTop{
margin-top:-1rem;
}
/* Profile Nav */
.profileOverlay {
background-color: rgba(0,0,0,0.5);
width:100%;
height:100%;
}
/*Edit Photo's */
.edit-photo-background {
background-color: #e0e0e0;
border-color: rgba(86, 86, 86, 0.25);
}
.update-photo {
font-size:1.35rem;
}
.edit-photo, .add-photo{
width:55px;
height:55px;
margin:auto;
fill: #6f6f6f;
background-color:rgba(255,255,255,.9);
}
.photo-status-icon{
left:auto;
right:.5rem;
bottom:20px;
width: 38px;
height: 38px;
background-color:rgba(255,255,255,.5);
}
.photos-uploaded {
top:.5rem;
right:.5rem;
height:20px;
}
.camera {
fill:#bebdbd;
}
/* Empty Photo Icon */
.empty-photo.img-fit, .photo.img-fit{
background-image: url("data:image/svg+xml;charset=utf8,");
background-position:center;
}
.empty-photo.img-fit .photo-status-icon{
display:none;
}
/*Edit Photo's controlls */
.update-photo h3, .update-photo h5, .update-photo h6 {
font-weight:200;
margin:0;
}
/* Add Photo controls */
#add-controls a, #add-controls-overlay a, #edit-controls a {
color:#565656;
}
#add-a-photo, #edit-controls {
bottom:4rem;
}
/* Mulitple face's */
/* @TODO: delete me */
.photoSelectionRadio, #noneOfTheAbove{
-webkit-appearance:none;
visibility:hidden;
}
#cropInstruction textarea{
padding:.75rem;
background-color: #ddd;
border-color: #ddd;
resize: vertical;
-webkit-box-shadow: none;
box-shadow: none;
}
#cropInstruction #placeholder{
color:#797979;
}
/* Check Icon */
.multiface input[type=radio]{
display:none !important;
}
.multiface input ~.icon {
fill: #fff;
height:33px;
width:33px;
background-color: #fff;
}
.multiface input[type=radio] ~.icon .unticked {
fill:rgba(0,0,0,0.5);
display:block;
}
.multiface input[type=radio] ~.icon .ticked{
display:none;
}
.multiface input[type=radio]:checked ~.icon .ticked{
fill:#565656;
stroke:#565656;
display:block;
}
.multiface input[type=radio]:checked ~.icon .unticked{
display:none;
}
:checked + .multiface-image svg {
color: #fff;
fill: #2ecc40;
}
.match {
background-color: rgba(137, 200, 53, 0.25);
color: #202B12;
}
.segmented-button {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
background: #B03D40;
color: #111;
font-weight: 700;
font-size: 14px;
white-space: nowrap;
overflow: hidden;
}
.segmented-button a {
background: #fff;
color: #B03D40;
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
text-align: center;
display:block;
}
.segmented-button a:first-of-type {
border-radius: 3px 0 0 3px;
}
.oas .segmented-button a:last-of-type {
border-radius: 0 3px 3px 0;
}
[dir=rtl] .segmented-button a:first-of-type {
border-radius: 0 3px 3px 0;
}
[dir=rtl] .segmented-button a:last-of-type {
border-radius: 3px 0 0 3px;
}
.segmented-button a.active, .segmented-button a.active .icon {
color: #fff;
background: #B03D40;
}
.segmented-button a.active .icon {
fill: #fff;
}
/*@TODO: Resolve this proeprly*/
article.card {
background: #fff;
}
/* @TODO: This is used completely wrong */
.card-avatar{
width: 66px;
height: 66px;
}
.card-header {
overflow: visible;
line-height: 1.337;
outline: none;
}
.card-avatar[data-online=true]::after {
content: ' ';
background: #70bb46;
position: absolute;
z-index: 2;
width: 16px;
height: 16px;
bottom: 7px;
right: 0;
border-radius: 50%;
border: 3px solid #fff;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.card-info {
color: #aaa;
}
.card-self-description {
background-color: rgba(0, 0, 0, 0.6);
font-weight: 300;
}
/*
Potential polyfill : https://github.com/josephschmitt/Clamp.js/blob/master/clamp.js
*/
.card-info-msg {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
color: #111;
font-weight: 300;
}
.card-info-name {
color: #565656;
font-size: 20px;
}
.card-info-location {
line-height: 1.5rem;
}
.card-info-subject {
color: #111;
}
.card-info-name .icon.small {
width: 14px;
height: 14px;
top: 1px;
color: #ccc;
fill: #ccc;
}
.card-info-name .icon.small.fill-action-highlight {
fill: #b15d51;
}
.card-info-name .icon.small.membership-gold {
fill: #dcbc0c;
}
.card-info-name .icon.small.membership-platinum {
fill: #2a3393;
}
.card-info-name .icon.small.membership-diamond {
fill: #000000;
}
.mail-nav{
overflow: auto;
white-space: nowrap;
min-width: 100vw;
max-width: 100vw;
scroll-behavior: smooth;
-ms-scroll-snap-type: x mandatory;
scroll-snap-type: x mandatory;
}
.mail-nav a {
scroll-margin: 10px;
scroll-snap-align: end;
scroll-snap-stop: always;
}
.mail-nav a.activeTab{
border-bottom-style: solid;
border-bottom-width: 2px;
border-bottom-color: #C24A4D;
color: #C24A4D;
}
.comment p {
word-wrap: break-word;
white-space: pre-wrap;
margin: 10px;
}
.notice p {
white-space: normal;
}
.imbra.inbound .comment > p, .upgrade.inbound .comment > p, p.blurred {
color: transparent;
text-shadow: rgba(0, 0, 0, .7) 0 0 9px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.comment {
background: #b15d51;
color: #fff;
border-radius: 8px;
position: relative;
-webkit-margin-start: auto;
max-width: 100%;
}
.comment-vg {
background: transparent;
}
.received .comment,
.comment .notice {
color: #565656;
}
.comment button,
.comment button:disabled
{
-webkit-appearance: none;
border: none;
background: transparent;
padding: 0;
margin: 0.75em;
font-size: 1rem;
color: #0074d9;
}
.comment p.translated {
margin-top: 0.75rem;
border-top: 2px solid rgba(0,0,0,0.25);
padding-top: 0.75rem;
}
.seen {
-webkit-margin-start: auto;
}
.message-chats {
min-height: 100vh;
}
.message-chats-list .avatar {
width: 35px;
height: 35px;
min-width: 35px;
-webkit-margin-end: 10px;
}
.message-chats-list .card-avatar.avatar {
background-color: transparent;
}
.message-chats-list .avatar img{
width: 35px;
height: 35px;
}
.message-chats-list {
background: #fff;
}
.message-chats-list > p {
color: #ccc;
}
.avatar ~ .comment {
-webkit-margin-start: 0;
background: #d0d0d0;
}
.avatar ~ .comment::after {
height: 0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right: 8px solid #d0d0d0;
border-left: 0;
content: "";
width: 0;
position: absolute;
left: -8px;
right: -8px;
top: 8px;
}
[dir=rtl] .avatar ~ .comment::after {
border-left: 8px solid #d0d0d0;
border-right: 0;
}
.comment > .flex {
background: #fff;
border-radius: 8px;
white-space: normal;
margin-top: 1em;
/*float: left;*/
}
.comment .notice {
padding-top: 0.5em;
padding-bottom: 0.5em;
}
.comment .lock {
min-width: 20px;
}
.comment .lock .icon {
height: 20px;
}
.message-unsafe {
-webkit-margin-start: 45px;
}
/**
* Android 4.4 fix
* no support for margin:auto to position flex children
* so we use an empty div instead
*/
.message-chats-list div:not([class]) {
min-width: 35px;
-webkit-margin-end: 10px;
-webkit-box-flex: 1;
}
/*Use flexbox...*/
.message-chats {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-overflow-scrolling: touch;
}
/*... so we can align to the bottom*/
.message-chats-list {
margin-top: auto;
}
.message-chats-list > .flex {
margin: 0.5rem;
}
/*padding for messages received*/
.message-chats-list .received {
padding: 0.5rem;
}
.message.upgrade .upper {
margin-top: 2px;
text-transform: uppercase;
}
.message.card {
background: #F5F5F5;
}
.message.card.selected {
background: #FFF2F2;
}
.message.unread {
background: #ffffff;
}
.message:last-child {
border-bottom: 1px solid #aaa;
}
.message .card-info-name {
font-weight: 400;
color: #aaa;
}
.message.unread .card-info-summary {
font-weight: 700;
color: #565656;
}
.message.unread .card-info-name,
.message.unread .card-info-subject {
font-weight: 700;
color: #565656;
}
.message.unread .card-info-timestamp {
color: #70a1cb;
font-weight: 700;
}
.message.replied svg.replied {
position: absolute;
left: -3px;
}
[dir=rtl] .message.replied svg.replied {
left:inherit;
right:-3px;
-webkit-transform: scaleY(-1) rotate(180deg);
transform: scaleY(-1) rotate(180deg);
}
.icon-chevron {
width: 10px;
height: 20px;
padding: 0;
fill: #ccc;
}
a.loadmore.messages {
display: block;
margin-top: 3px;
padding-bottom: 16px;
width: 100%;
height: 45px;
background: #fff url(/assets/mobile/images/spinner.svg) no-repeat center;
}
.message-input {
position: fixed;
bottom: 0;
width: 100%;
width: 100%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
visibility: visible;
background-color: #eee;
z-index: 4;
}
/*.message-input textarea {
border-radius: 5px;
border: 1px solid #aaa;
outline-style: none;
font-size: 1em;
font-family: inherit;
padding: .5em;
line-height: 1;
max-height: 6em;
resize: none;
}*/
.message-input .imbraconsent p, .message-input .imbraconsent span {
color:#aaa;
font-size: small;
line-height: 1;
margin: 7px 0px 0px 0px;
}
.imbraconsent a, .imbraconsent a:visited{
color: #aaa;
text-decoration: underline;
}
/*IMBRA modal */
.imbraInfoModal li {
margin-bottom: 3px;
border-radius: 5px;
border: 1px solid #333;
}
.imbraInfoModal [imbra_toggle_container] li {
border: none;
}
.imbraInfoModal [question] {
background-color: #eee; border-radius: 5px 5px 0px 0px;
}
.imbraInfoModal a, .imbraInfoModal a:visited {
color: #565656;
text-decoration: underline;
}
.message-input input[type=submit] {
font-size: 1.2em;
border: none;
border-radius: 10px;
height: 36px;
width: 60px;
font-weight: 700;
-webkit-appearance: none;
-ms-flex-item-align: end;
align-self: flex-end;
/*@TODO: update the static color in this rule*/
/*@TODO: svg use from icons.svg*/
background: #0074d9 url(/assets/mobile/images/send-message.svg) 50% center no-repeat;
background-size: 26px;
}
.message-input input[type=submit]:disabled {
color: #aaa;
}
.imbraconsent input[type=checkbox] ~ .icon{
fill: #ddd;
color: #ddd;
height: 20px;
min-height: 20px;
min-width: 20px;
margin-top: 2px;
margin-right: 2px;
}
.imbraconsent input[type=checkbox].checked ~ .icon{
fill: blue;
color: blue;
}
.message-chats {
/*border-top: 1px solid #aaa;*/
margin-bottom: 60px;
/*padding-right: 5px;
padding-top: 1em;
display: table;
width: 100%;*/
}
/*.message-chats .message-chats-list {
width: 100%;
display: table-cell;
vertical-align: bottom;
}*/
/*.message-chats .message-chat .card-avatar {
height: 35px;
min-width: 30px;
overflow: hidden;
}*/
.message-chats .message-chat .card-avatar img {
background-color: #ddd;
width: 30px;
height: 30px;
border: 3px solid #fff;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/*.message-chats .message-chat .message-chat-wrap {
width: 89%;
padding: 3px;
}*/
/*.message-chats .message-chat .message-chat-wrap p {
margin-bottom: 0;
}*/
.message-chats .message-chat .message-chat-wrap .upgradetoread {
margin-top: 5px;
border-radius: 5px;
background: #fff;
}
.message-chats .message-chat .message-chat-wrap .upgradetoread svg {
width: 25px;
height: 25px;
margin-left: 10px;
margin-top: 10px;
}
.message-chats .message-chat .message-chat-wrap .upgradetoread .meduim-text {
padding: 7px;
}
.message-chats .message-chat .message-chat-wrap p.blurred {
color: transparent;
text-shadow: rgba(0,0,0,0.7) 0px 0px 9px;
}
a.btn.prev-icon svg, a.btn.next-icon svg{
height: 20px;
width: 20px;
position: relative;
}
a.btn.prev-icon[aria-disabled] svg, a.btn.next-icon[aria-disabled] svg{
fill: #fff;
color: #fff;
}
[dir=rtl] a.btn.prev-icon svg, [dir=rtl] a.btn.next-icon svg {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.bg-member-chat {
background-color: #d0d0d0;
display: inline-block;
position: relative;
vertical-align: top;
padding: 10px;
line-height: 1.6em;
border-radius: 10px;
max-width: 80%;
}
.bg-member-chat::after {
content: "";
border-color: transparent #d0d0d0;
border-width: 7px 10px 7px 0;
left: -10px;
border-style: solid;
display: block;
position: absolute;
top: 10px;
width: 0;
z-index: 1;
}
.bg-user-chat {
background-color: #daebee;
display: inline-block;
position: relative;
vertical-align: top;
padding: 10px;
line-height: 1.6em;
border-radius: 10px;
max-width: 80%;
}
.styled-select select {
background: transparent;
width: 100%;
font-size: 14px;
border: none;
-webkit-appearance: none;
font-weight:600;
}
.styled-select {
overflow: hidden;
background: url(/assets/mobile/images/down.svg) no-repeat right center #fff;
background-size: 20px 20px;
color:#999;
}
[dir=rtl] .styled-select {
background-position: left center;
}
/* Delete Inputs */
.attempted-read-by-member {
border-radius: 2em;
background-color: #70bb46;
color: #fff;
padding-left: 0.6em;
padding-right: 0.6em;
}
.navbar-message {
background: #fff;
}
.navbar-message-show {
height: 0px;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
.pin .navbar-message-show {
-webkit-transform: translateY(44px);
transform: translateY(44px);
height: 100%;
}
.no-pin .navbar-message-show {
-webkit-transform: translateY(0) !important;
transform: translateY(0) !important;
height: 0 !important;
}
.navbar-message-show-always {
-webkit-transform: translateY(44px);
transform: translateY(44px);
}
.animate-typing .dot {
-webkit-animation-name:animate-typing-color;
animation-name:animate-typing-color;
-webkit-animation-duration:2.24s;
animation-duration:2.24s;
-webkit-animation-iteration-count:infinite;
animation-iteration-count:infinite;
-webkit-animation-direction:normal;
animation-direction:normal;
margin: 5px;
width: 10px;
height: 10px;
background: #565656;
}
.bg-is-typing {
background: #d0d0d0;
}
.pill {
border-radius: 30px;
}
.bubble-large {
width: 20px;
height: 20px;
left: -4px;
bottom: -3px;
}
.bubble-small {
width: 10px;
height: 10px;
left: -11px;
bottom: -7px;
}
[dir=rtl] .bubble-large {
right: -4px;
}
[dir=rtl] .bubble-small {
right: -11px;
}
.animate-typing :first-child {
-webkit-animation-delay:0.45s;
animation-delay:0.45s;
}
.animate-typing :nth-child(2n) {
-webkit-animation-delay:1.05s;
animation-delay:1.05s;
}
.animate-typing :last-child {
-webkit-animation-delay:1.35s;
animation-delay:1.35s;
}
@-webkit-keyframes animate-typing-color{
0%{}
50%{
opacity:0.5;
}
100%{}
}
@keyframes animate-typing-color{
0%{}
50%{
opacity:0.5;
}
100%{}
}
.conversation-starter-margin-bottom {
margin-bottom: 80px;
}
.conversation-starter-margin-bottom-vg {
margin-bottom: 170px;
}
.specials {
position: absolute;
top: -10px;
right: -10px;
}
.upgrade-now-btn {
background-color: #70bb46;
color: #fff;
}
.upgrade-now-btn .text {
padding-top: 4px;
color: #fff;
}
/*@TODO: refactor to use the upgade icon from icons.svg*/
/*.upgrade-now-btn .upgrade-icon {
padding: 0 9px 9px;
margin-top: 13px;
width: 25px;
height: 16px;
background: url(../../images/upgradearrow.svg) no-repeat center;
}*/
.upgrade-now-btn h1 {
margin: 0;
text-transform: uppercase;
font-size: 18px;
font-weight: 700;
}
.upgrade-now-btn p {
font-size: 13px;
margin: 0.25rem 0;
}
.btn-cupid-grey, .btn-cupid-green {
margin: 0.5rem;
padding: 0.75rem;
font-weight: bold;
text-decoration: none;
border-width: 0;
font-size: 1em;
-webkit-box-sizing: border-box;
box-sizing: border-box;
min-height: 44px;
}
.btn-cupid-grey {
background-color: #e0e0e0;
color: #565656;
}
.btn-cupid-green {
background-color: #70bb46;
color: #fff;
}
.btn-cupid-grey svg {
height: 1em;
}
button:focus {
outline: 0;
}
button:active,
button:disabled {
background: rgba(0,0,0,0.25);
}
.btn-cupid-action {
padding: 0.75rem;
margin: 0.5rem 0;
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;
height: auto;
width: 100%;
}
.btn-cupid-wide {
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;
height: auto;
color: inherit;
}
.btn-cupid-action span {
display: block;
text-align: center;
width: 100%;
}
[dir=rtl] .btn-cupid-grey svg {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.btn-cupid-height {
height: 44px;
}
.btn-none {
background: transparent;
border: none;
-webkit-appearance: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
.sub-nav {
padding-top: 44px;
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 200;
-webkit-transform: translateY(-44px) translateZ(0);
transform: translateY(-44px) translateZ(0);
-webkit-transition: height 0.2s ease-in;
transition: height 0.2s ease-in;
-webkit-user-select: none;
opacity: 0;
}
.sub-nav a {
color: #333;
font-size: 14px;
text-decoration: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
right: 0;
opacity: 0;
background: #fff;
height: 44px;
padding: 0 10px;
}
.sub-nav a {
text-decoration: none;
}
.sub-nav img {
width: 34px;
height: 34px;
background-color: #ddd;
border-radius: 50%;
margin: 5px 10px;
}
.subnav-pinned .card {
/*margin-top: -44px;
padding-top: 44px;*/
}
.subnav-pinned .sub-nav {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-transition: opacity 0.2s ease-in-out, -webkit-transform 0.2s ease-in;
transition: opacity 0.2s ease-in-out, -webkit-transform 0.2s ease-in;
transition: transform 0.2s ease-in, opacity 0.2s ease-in-out;
transition: transform 0.2s ease-in, opacity 0.2s ease-in-out, -webkit-transform 0.2s ease-in;
}
.nav-pinned.subnav-pinned .sub-nav {
opacity: 1;
-webkit-transform: translateY(44px);
transform: translateY(44px);
}
.subnav-pinned .viewport {
/*transform: translateY(44px) translateZ(0);*/
}
.subnav-pinned .sub-nav [aria-selected] {
position: absolute;
opacity: 1;
z-index: 100;
-webkit-transform: scale(1);
transform: scale(1);
}
.nav-open .sub-nav {
overflow-y: scroll;
height: 100vh;
-webkit-overflow-scrolling: touch;
}
.nav-open .sub-nav [role=directory] {
padding-bottom: 44px;
}
.nav-open body {
overflow: hidden;
}
.nav-open .sub-nav a {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
-webkit-transition: opacity 0.2s 0.2s ease-in, -webkit-transform 0.2s 0.2s cubic-bezier(0.4, 0.01, 0.17, 0.99);
transition: opacity 0.2s 0.2s ease-in, -webkit-transform 0.2s 0.2s cubic-bezier(0.4, 0.01, 0.17, 0.99);
transition: opacity 0.2s 0.2s ease-in, transform 0.2s 0.2s cubic-bezier(0.4, 0.01, 0.17, 0.99);
transition: opacity 0.2s 0.2s ease-in, transform 0.2s 0.2s cubic-bezier(0.4, 0.01, 0.17, 0.99), -webkit-transform 0.2s 0.2s cubic-bezier(0.4, 0.01, 0.17, 0.99);
position: static;
}
.ad{
padding-top: 10px;
padding-bottom: 10px;
background: #ededed;
}
/* import your specific ad.css here */
/* Sample */
.prescreen, .prescreen-wrapper {
min-height: 290px;
background-color:#B03D40;
}
.prescreen .stars {
min-height:56px;
}
.prescreen button {
color:#B03D40;
}
.autoresize {
width: 100%;
resize: none;
font-family: inherit;
font-size: inherit;
outline: none;
border-color: #aaa;
display: block;
margin-bottom: 0;
}
.message-input button[type=submit] {
color: #fff;
background-color: #0074d9;
border: none;
border-radius: 8px;
height: 2.3125rem;
}
.ios .message-input button[type=submit] {
margin-bottom: 1px;
}
.message-input button[type=submit]:disabled {
opacity: .5;
}
.hero-image {
background-size: cover;
background-position: center top;
height: calc(100vh - 44px);
position: relative;
margin-bottom: 26px;
}
.hero-image-homeD {
background-size: cover;
background-position: center top;
height: 100vh;
position: relative;
}
img.cross-promo{
width: auto;
}
.hero-image .cta {
position: absolute;
width: 100%;
bottom: -26px;
}
.bg-darken {
background-color: rgba(0,0,0,.75);
}
.bg-darken-gradient {
background: rgb(255,255,255);
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%, rgba(255,255,255,0)), color-stop(32%, rgba(0,0,0,0.8)));
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 1%, rgba(0,0,0,0.8) 32%);
background: linear-gradient(180deg, rgba(255,255,255,0) 1%, rgba(0,0,0,0.8) 32%);
}
.bg-transparent {
background-color: transparent;
}
.arrow-darken::after {
color: rgba(0,0,0,.75);
}
.site-logo {
color: #8a804a;
fill: #a11d21;
}
.logo-heart {
width: 38px;
height: 34px;
}
.logo-domain {
width: 150px;
height: 20px;
}
.mt6 {
margin-top: 6rem;
}
.homeD {
background-color: transparent;
}
.nav-pinned .homeD {
background: rgb(255,255,255);
background: -webkit-gradient(linear, left bottom, left top, color-stop(1%, rgba(255,255,255,0)), color-stop(32%, rgba(0,0,0,0.8)));
background: -webkit-linear-gradient(bottom, rgba(255,255,255,0) 1%, rgba(0,0,0,0.8) 32%);
background: linear-gradient(0deg, rgba(255,255,255,0) 1%, rgba(0,0,0,0.8) 32%);
}
@media only screen
and (min-device-width : 320px)
and (max-device-height : 568px)
and (orientation : portrait) {
.hero-image p{
margin-bottom:0.5rem;
}
}
.bg-silver {
background-color:#F8F8F7;
}
fieldset {
border: 0;
padding: 0;
margin: 0;
}
label,
label a,
legend,
.unit {
color:#565656;
}
label a {
font-weight: bold;
}
label a:active,
label a.active {
/* set this to theme primary colour */
color: #93849F;
font-weight: 500;
}
.invalidMessage {
color: #c23b2d;
}
input,
select,
textarea,
label.accordion {
color:#565656;
padding: 0.5rem;
display: inline-block;
border: 1px solid #ccc;
-webkit-box-shadow: inset 0 1px 3px #ddd;
box-shadow: inset 0 1px 3px #ddd;
border-radius: 4px;
vertical-align: middle;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-size: inherit;
font-family: inherit;
outline:0;
}
textarea {
resize: none;
}
/*input:invalid,*/
input:focus:invalid:not([data-ignore-daw-styles]),
select:focus:invalid:not([data-ignore-daw-styles]) {
border-color: #c23b2d;
}
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: #fff url('data:image/svg+xml;utf8,') no-repeat right bottom;
}
@supports ((-webkit-appearance: none) or (-moz-appearance: none) or (appearance: none)) {
[dir=rtl] select {
background-position: left bottom;
}
}
/*input:empty,*/
/*!*input:focus:empty,*!*/
/*select,*/
/*textarea:empty{*/
/*border-color: #ff851b;*/
/*}*/
input:focus:valid,
select:focus:valid,
.select:focus,
textarea:focus:valid{
border-color: #129fea;
}
input:valid,
select:valid,
textarea:valid,
.selectopt:valid{
border: 1px solid #ccc;
}
[disabled],
[disabled]:empty,
.disabled {
cursor: none;
opacity: 0.6;
overflow: hidden;
border-color: #ccc;
border-color:transparent;
background-color: transparent;
}
[disabled] ~ .icon .checked,
[disabled] ~ .icon .unchecked,
[disabled] ~ span{
cursor: none;
opacity: 0.45;
}
[type=submit]:valid,
[type=submit]:invalid {
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
cursor: none;
opacity:1;
}
select[disabled]{
background-image: none;
}
.unit-right {
right: 1em;
}
.unit-left {
left: 1em;
}
.form-field {
margin-top: .18rem;
}
/* Select Dropdown */
[type=checkbox] ~ .icon,
[type=checkbox] ~ .icon .unchecked {
fill: #8c8c8c;
color: #cdcdcd;
stroke: none;
border-radius: 4px;
width: 30px;
height: 30px;
min-width: 30px;
}
[type=checkbox] ~ .icon .unchecked {
display: block;
}
[type=radio] ~ .icon .unchecked {
fill: #8c8c8c;
color: #fff;
display: block;
}
[type=checkbox],
[type=checkbox]:not(:checked) ~ .icon .checked,
[type=checkbox]:checked ~ .icon .unchecked {
display: none;
}
[type=radio],
[type=radio]:not(:checked) ~ .icon .checked,
[type=radio]:checked ~ .icon .unchecked {
display: none;
}
input[type=checkbox] ~ .icon-medium {
height: 2rem;
width: 2rem;
}
[type=checkbox] ~ .blue
{
color: #fff;
fill: #34495e;
}
[type=checkbox] ~ .green
{
color: #fff;
fill: #70bb46;
}
[type=checkbox] ~ .theme
{
color: #fff;
fill: #A11D21;
}
[type=radio] ~ .radio-blue
{
color: #34495e;
}
[type=radio] ~ .radio-green
{
color: #70bb46;
}
[type=radio] ~ .radio-theme
{
color: #A11D21;
}
.selectElement .select {
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
position:relative;
border: 1px solid #ccc;
overflow: hidden;
min-height:35px;
max-height:200px;
}
.selectElement .select:focus {
border: 1px solid #129fea;
outline:0;
}
.selectElement .select.required{
border-color: #ff851b;
}
.selectElement .option {
/* set this to theme primary colour */
background:#93849F;
/*border-top:#222 solid 1px;*/
/*pointer-events:none;*/
z-index:1;
-webkit-transition:background .4s ease-in-out;
transition:background .4s ease-in-out;
-webkit-box-sizing:border-box;
box-sizing:border-box;
overflow:hidden;
white-space:nowrap;
}
.selectElement .side-nav {
display:none;
height:100%;
border-bottom-right-radius: 0.25rem;
border-top-right-radius: 0.25rem;
}
.select .divide {
display:none;
}
.select:hover .side-nav,
.select:hover .divide {
display:block;
}
.selectElement label:first-child {
margin-top:35px;
}
.selectElement[disabled] .option,
.selectElement[disabled] input:checked + .option{
/* set this to background colour .bg-silver */
background: #F8F8F7;
}
.selectElement[disabled] .select {
border: 0;
pointer-events: none;
}
/*.option:hover {*/
/*background:#666;*/
/*}*/
.select:hover .option {
color:#fff;
position:relative;
pointer-events:all;
}
.selectElement[disabled] .select:hover .option {
position:absolute;
pointer-events:none;
}
.selectElement input {
opacity:0;
position:absolute;
left:-99999px;
}
.selectElement input:checked + .option {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
z-index:2;
background:#fff;
-webkit-box-shadow: inset 0 1px 3px #ddd;
box-shadow: inset 0 1px 3px #ddd;
border-top:none;
position:relative;
color:#565656;
min-height:35px; /* needed should there be no label text */
}
.selectElement[disabled] input:checked + .option {
-webkit-box-shadow: none;
box-shadow: none;
color:#717171;
}
.selectElement input:checked + label {
outline:0;
}
/*.select:focus input:checked + .option {*/
/*color:#565656;*/
/*}*/
/* place X at end of selected */
.selectElement input:checked + label:after {
content:'x';
right:10px;
position:absolute;
pointer-events:none;
z-index:3;
}
.selectElement[disabled] input:checked + label:after {
content:'';
}
/* place arrow at end of first element */
.selectElement input:first-child:checked + label:after {
content:'';
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #565656;
right:10px;
top:16px;
}
.selectElement[disabled] input:first-child:checked + label:after {
content:'';
border: 0;
}
.selectElement input:checked + label:before {
position:absolute;
right:0;
width: 40px;
content: '';
background:#fff;
}
/* Radio */
input[type=radio] {
display: none;
}
svg {
display: inline-block;
vertical-align: middle;
}
input ~ .icon {
fill: #fff;
height: 33px;
width: 33px;
}
/* Slider */
input[type=range] {
/*removes default webkit styles*/
-webkit-appearance: none;
/*fix for FF unable to apply focus style bug */
border: 1px solid transparent;
background-color: rgba(0, 0, 0, .0625);
-webkit-box-shadow: none;
box-shadow: none;
height:6px;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
border: none;
height: 20px;
width: 20px;
border-radius: 50%;
/* set this to theme primary colour */
background: #93849F;
}
input[type=range][disabled]::-webkit-slider-thumb {
background: transparent;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-moz-range-track {
width: 300px;
height: 5px;
background: #ddd;
border: none;
border-radius: 3px;
}
input[type=range]::-moz-range-thumb {
border: none;
height: 20px;
width: 20px;
border-radius: 50%;
/* set this to theme primary colour */
background: #93849F;
}
input[type=range][disabled]::-moz-range-thumb {
background: transparent;
}
/*hide the outline behind the border*/
input[type=range]:-moz-focusring{
outline: 1px solid white;
outline-offset: -1px;
}
input[type=range]::-ms-track {
height: 5px;
/*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
background: transparent;
/*leave room for the larger thumb to overflow with a transparent border */
border-color: transparent;
border-width: 6px 0;
/*remove default tick marks*/
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: #777;
border-radius: 10px;
}
input[type=range]::-ms-fill-upper {
background: #ddd;
border-radius: 10px;
}
input[type=range]::-ms-thumb {
border: none;
height: 20px;
width: 20px;
border-radius: 50%;
/* set this to theme primary colour */
background: #93849F;
}
input[type=range][disabled]::-ms-thumb {
background: transparent;
}
input[type=range]:focus::-ms-fill-lower {
background: #888;
}
input[type=range]:focus::-ms-fill-upper {
background: #ccc;
}
/* Accordion */
.accordion a,.accordion div:first-child {
color: #565656;
border-color: #ccc;
background-color: #fff;
}
.accordion .icon:first-child {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.accordion .active .icon {
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
}
.accordion a + div {
background-color: #efefef;
}
.accordion.receipt a + div {
background-color: #fff;
}
.accordion .active output {
min-height: 22px;
}
.disable-select {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.switch input + label {
width: 3.25rem;
padding: 0.25rem;
background-color: #fff;
}
/* Lang specific widths can go here e.g. */
[lang=ko] .switch label {
width: 5rem;
}
.accordion div label:last-child {
margin: 0;
padding: 0;
}
.accordion .checkbox-max-height {
max-height: 290px;
overflow-y: auto;
}
.switch.theme :checked + span {
background-color: #F1DADD;
color: #fff;
}
.switch.blue :checked + span {
background-color: #34495e;
color: #fff;
}
.switch.green :checked + span {
background-color: #70bb46;
color: #fff;
}
.switch.green :checked:disabled + span {
background-color: #8c8c8c;
}
.switch :checked + span.on {
background-color: #70bb46;
color: #fff;
}
.switch :checked + span.off {
background-color: #e0e0e0;
color: #565656;
}
/*over rides*/
#form-login label, #form-login .invalidMessage {
color: #222;
}
/* TODO - will be reviewed/changed in My Profile */
/* stylelint-disable */
/*
Blank out html5 validation on page load and only show it after submition using form.submitted
*/
/* hide validation messages on individual fields in a group validation
(e.g. One check box is required)
*/
.checkbox-group[aria-invalid=true] .invalidMessage {
display: none;
}
/*
display the validation message in group validation
*/
.checkbox-group[aria-invalid=true] > .invalidMessage {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.form .invalidMessage .icon-error {
width: 20px;
height: 20px;
fill: #c23b2d;
}
[aria-invalid=true] .field.is-error,
[aria-invalid=true] .field:invalid,
[aria-invalid=true] .field:valid {
border-color: #ff4136;
}
form.submitted .field.is-error,
form.submitted .field:invalid {
border-color: #ff4136;
margin-bottom: 0;
}
[aria-invalid=true] .field {
margin-bottom: 0;
}
[aria-invalid=true] select {
margin-bottom: 8px;
}
/*.form input:valid + .invalidMessage,*/
/*[aria-invalid=false] .invalidMessage,*/
/*input:-webkit-autofill + .invalidMessage,*/
/*textarea:-webkit-autofill + .invalidMessage,*/
/*select:-webkit-autofill + .invalidMessage {*/
/*display: none;*/
/*margin-bottom: 0;*/
/*}*/
[aria-invalid=true] .invalidMessage {
color: #c23b2d;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
display: -webkit-box !important;
display: -ms-flexbox !important;
display: flex !important;
font-weight: 200;
font-size: 0.875rem;
}
.bg-theme-primary [aria-invalid=true] .invalidMessage {
color: #333333;
}
.form .btn {
width: 100%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.form-item {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
/*
override styles coming from form factory
@TODO: check that removing classes within the form factory is safe
so we can remove the need to override them
*/
.form-item.flex-column .form-field.mt2 {
margin-top: 0.5rem;
}
.form-item.flex-column label {
margin-top: 0;
margin-bottom: 0;
font-weight: 700;
}
/*.form input[type=text],*/
/*.form input[type=password],*/
/*.form input[type=email],*/
/*.form input[type=url],*/
/*.form input[type=date],*/
/*.form input[type=month],*/
/*.form input[type=time],*/
/*.form input[type=datetime],*/
/*.form input[type=datetime-local],*/
/*.form input[type=week],*/
/*.form input[type=number],*/
/*.form input[type=search],*/
/*.form input[type=tel],*/
/*.form input[type=color],*/
/*.form select,*/
/*.form textarea {*/
/*padding: var(--space-1);*/
/*display: inline-block;*/
/*border: 1px solid #ccc;*/
/*box-shadow: inset 0 1px 3px #ddd;*/
/*border-radius: 4px;*/
/*vertical-align: middle;*/
/*box-sizing: border-box;*/
/*font-size: inherit;*/
/*font-family: inherit;*/
/*}*/
.form input:not([type]) {
padding: 0.5em 0.6em;
display: inline-block;
border: 1px solid #ccc;
-webkit-box-shadow: inset 0 1px 3px #ddd;
box-shadow: inset 0 1px 3px #ddd;
border-radius: 4px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.form input[type=color] {
padding: 0.5rem;
}
/*.form input[type=text]:focus,*/
/*.form input[type=password]:focus,*/
/*.form input[type=email]:focus,*/
/*.form input[type=url]:focus,*/
/*.form input[type=date]:focus,*/
/*.form input[type=month]:focus,*/
/*.form input[type=time]:focus,*/
/*.form input[type=datetime]:focus,*/
/*.form input[type=datetime-local]:focus,*/
/*.form input[type=week]:focus,*/
/*.form input[type=number]:focus,*/
/*.form input[type=search]:focus,*/
/*.form input[type=tel]:focus,*/
/*.form input[type=color]:focus,*/
/*.form select:focus,*/
/*.form textarea:focus {*/
/*outline: 0;*/
/*border-color: #129fea;*/
/*}*/
.form input:not([type]):focus {
outline: 0;
border-color: #129fea;
}
.form input[type=file]:focus,
.form input[type=radio]:focus,
.form input[type=checkbox]:focus {
outline: thin solid #129fea;
outline: 1px auto #129fea;
}
.form .checkbox,
.form .radio {
margin: 0.5em 0;
display: block;
}
/*.form input[type=text][disabled],*/
/*.form input[type=password][disabled],*/
/*.form input[type=email][disabled],*/
/*.form input[type=url][disabled],*/
/*.form input[type=date][disabled],*/
/*.form input[type=month][disabled],*/
/*.form input[type=time][disabled],*/
/*.form input[type=datetime][disabled],*/
/*.form input[type=datetime-local][disabled],*/
/*.form input[type=week][disabled],*/
/*.form input[type=number][disabled],*/
/*.form input[type=search][disabled],*/
/*.form input[type=tel][disabled],*/
/*.form input[type=color][disabled],*/
/*.form select[disabled],*/
/*.form textarea[disabled] {*/
/*cursor: not-allowed;*/
/*background-color: #eaeded;*/
/*color: #cad2d3;*/
/*}*/
.form input:not([type])[disabled] {
cursor: not-allowed;
background-color: #eaeded;
color: #cad2d3;
}
.form input[readonly],
.form select[readonly],
.form textarea[readonly] {
background-color: #eee;
color: #777;
border-color: #ccc;
}
.form input:focus:invalid,
.form textarea:focus:invalid,
.form select:focus:invalid {
color: #b94a48;
border-color: #e9322d;
}
.form input[type=file]:focus:invalid:focus,
.form input[type=radio]:focus:invalid:focus,
.form input[type=checkbox]:focus:invalid:focus {
outline-color: #e9322d;
}
/*.form select {*/
/*height: 2.25em;*/
/*border: 1px solid #ccc;*/
/*background-color: var(--white);*/
/*}*/
.form select[multiple] {
height: auto;
}
/*.form label {
margin: 0.5em 0 0.2em;
}*/
/*.form fieldset {*/
/*margin: 0;*/
/*padding: 0.35em 0 0.75em;*/
/*border: 0;*/
/*}*/
/*.form legend {*/
/*display: block;*/
/*width: 100%;*/
/*padding: 0.3em 0;*/
/*margin-bottom: 0.3em;*/
/*}*/
.form-stacked input[type=text],
.form-stacked input[type=password],
.form-stacked input[type=email],
.form-stacked input[type=url],
.form-stacked input[type=date],
.form-stacked input[type=month],
.form-stacked input[type=time],
.form-stacked input[type=datetime],
.form-stacked input[type=datetime-local],
.form-stacked input[type=week],
.form-stacked input[type=number],
.form-stacked input[type=search],
.form-stacked input[type=tel],
.form-stacked input[type=color],
.form-stacked input[type=file],
.form-stacked select,
.form-stacked label,
.form-stacked textarea {
display: block;
margin: 0.25em 0;
font-size: inherit;
font-family: inherit;
}
.form-stacked input:not([type]) {
display: block;
margin: 0.25em 0;
}
.form-aligned input,
.form-aligned textarea,
.form-aligned select,
.form-aligned .help-inline,
.form-message-inline {
display: inline-block;
vertical-align: middle;
}
.form-aligned textarea {
vertical-align: top;
}
.form-aligned .control-group {
margin-bottom: 0.5em;
}
.form-aligned .control-group label {
text-align: right;
display: inline-block;
vertical-align: middle;
width: 10em;
margin: 0 1em 0 0;
}
.form-aligned .controls {
margin: 1.5em 0 0 11em;
}
.form input.input-rounded,
.form .input-rounded {
border-radius: 2em;
padding: 0.5em 1em;
}
.form .group fieldset {
margin-bottom: 10px;
}
.form .group input,
.form .group textarea {
display: block;
padding: 10px;
margin: 0 0 -1px;
border-radius: 0;
position: relative;
top: -1px;
}
.form .group input:focus,
.form .group textarea:focus {
}
.form .group input:first-child,
.form .group textarea:first-child {
top: 1px;
border-radius: 4px 4px 0 0;
margin: 0;
}
.form .group input:first-child:last-child,
.form .group textarea:first-child:last-child {
top: 1px;
border-radius: 4px;
margin: 0;
}
.form .group input:last-child,
.form .group textarea:last-child {
top: -2px;
border-radius: 0 0 4px 4px;
margin: 0;
}
.form .group button {
margin: 0.35em 0;
}
/*.form .input-1 {*/
/*width: 100%;*/
/*}*/
/*.form .input-2-3 {*/
/*width: 66%;*/
/*}*/
/*.form .input-1-2 {*/
/*width: 50%;*/
/*}*/
/*.form .input-1-3 {*/
/*width: 33%;*/
/*}*/
/*.form .input-1-4 {*/
/*width: 25%;*/
/*}*/
.form .help-inline,
.form-message-inline {
display: inline-block;
padding-left: 0.3em;
color: #666;
vertical-align: middle;
font-size: 0.875rem;
}
.form-message {
display: block;
color: #666;
font-size: 0.875rem;
}
/*.form-field select {*/
/*font-size: var(--h4);*/
/*-webkit-appearance: none; !* REMOVES DEFAULT CHROME & SAFARI STYLE *!*/
/*-moz-appearance: none; !* REMOVES DEFAULT FIREFOX STYLE *!*/
/*appearance: none;*/
/*background: #fff url('/assets/images/home/dropdown-arrow.png') no-repeat right center;*/
/*}*/
.form-field select::-ms-expand {
display: none;
}
/*.form-field{*/
/*margin-top:.2rem; !* override as basscss mt1 is to big a gap *!*/
/*}*/
/*input[type=checkbox] {*/
/*display: none !important;*/
/*}*/
/*
@TODO: generalize the color scheme used for `#form-forgot-password`
*/
[id|=auth-showforgotpassword] .bg-silver {
background-color: #ededed;
}
[id|=auth-showforgotpassword] .border-dark-grey {
border-color: #ccc;
}
[id|=auth-resetpassword] .bg-silver {
background-color: #ededed;
}
[id|=auth-resetpassword] .border-dark-grey {
border-color: #ccc;
}
/*input[type=checkbox] ~ .icon {*/
/*fill: var(--silver);*/
/*color: var(--white);*/
/*stroke: none;*/
/*!**/
/*We're stomping over the form factory output here*/
/*we need to fix the markup that is produced...*/
/**!*/
/*width: 20px;*/
/*height: 20px;*/
/*}*/
/*input[type=checkbox]:checked ~ .icon {*/
/*fill: var(--theme-green);*/
/*color: var(--white);*/
/*stroke: none;*/
/*}*/
/*!**/
/*@TODO: generalise icon-sizes*/
/**!*/
/*input[type=checkbox] ~ .icon-medium {*/
/*height: 2rem;*/
/*width: 2rem;*/
/*}*/
/*input[type=checkbox] ~ .icon-medium {*/
/*height: 2rem;*/
/*width: 2rem;*/
/*}*/
.checkbox-line-wrap::first-line {
line-height: 2;
}
/* registration form age set fixed width to fix drop down arrow issue */
#age {
min-width: 50px;
}
/* stylelint-enable */
form { -webkit-animation: forcerepaint infinite 1s }
@-webkit-keyframes forcerepaint { from { padding: 0 } to { padding: 0 } }
[data-validate-requireone] div.invalidMessage {
display: none;
}
[data-validate-requireone] div.invalidMessage:last-of-type {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.switch div.invalidMessage {
display: none;
}
.switch div.invalidMessage:last-of-type {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.sitelogo-large {
height: 60px;
text-align: center;
padding-bottom: 2rem;
}
.sitelogo-large .icon{
width: 50px;
height: 50px;
}
.sitelogo-large .name-logo {
max-width: 170px;
}
.basic-layout .viewports {
margin-top: 0;
}
/*Checkbox styles for login-forms*/
.bg-theme-primary input[type=checkbox] ~.icon{
fill: #b15d51;
color: #fff;
stroke: none;
opacity: .6;
}
.bg-theme-primary input[type=checkbox]:checked ~.icon{
opacity: 1;
}
.gender-group{
fill: #ddd;
}
.gender-checkbox label,
.gender-checkbox div{
width: 3.25rem;
height: 3.25rem;
}
.gender-checkbox svg {
width: 2.5rem;
height: 2.5rem;
display: block;
pointer-events: none;
}
.gender-male :checked ~ div {
background: #c4d6f3;
fill: #608acf;
}
.gender-female :checked ~ div {
background: #f1d6ed;
fill: #a45996;
}
.progress-bar {
counter-reset: progress;
}
.progress-step::before {
counter-increment: progress;
content: counter(progress);
}
.progress-bar {
border-top: 1px solid #ccc;
color: #999;
}
.progress-step.current {
color: #565656;
}
.progress-step.current::before {
background: #70bb46;
}
.progress-step::before {
position: absolute;
top: -.75rem;
left: 50%;
margin-left: -.75rem;
border-radius: 50%;
background: #999;
color: #fff;
min-width: 1.5rem;
height: 1.5rem;
line-height: 1.5rem;
display: inline-block;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/*
or
*/
/*
@TODO: Find a method for inline-hr that doesn't have magic numbers
*/
.inline-hr {
position: relative;
}
.inline-hr span {
display: block;
text-align: center;
}
.inline-hr span:before,
.inline-hr span:after
{
border-top: 1px solid #c3bac9;
content: " ";
margin-top: .5rem;
position: absolute;
width: 37%;
}
.inline-hr span:before {
left: 0;
}
.inline-hr span:after {
right: 0;
}
*[hidden],
.viewport[aria-hidden] {
display: none;
}
.viewport {
position: absolute;
top: 44px;
left: 0;
right: 0;
z-index: 100;
background-color: #FFFFFF;
-webkit-backface-visibility: hidden;
}
.viewport-homeD {
top: 0;
}
.viewport {
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.viewport-active {
z-index: 20;
}
.viewport-active .content {
background: #fff;
}
.ios article:last-of-type + [rel=next] {
margin-bottom: 2.5rem;
}
.viewport-hide {
-webkit-animation-name: viewporthide;
animation-name: viewporthide;
}
.viewport-show {
-webkit-animation-name: viewportshow;
animation-name: viewportshow;
}
header.hide + .viewports {
margin-top: 0;
}
html {
background-color: #F1DADD;
min-height: 100%;
}
@-webkit-keyframes viewporthide {
0% {
opacity: inherit;
}
100% {
opacity: 0;
}
}
@keyframes viewporthide {
0% {
opacity: inherit;
}
100% {
opacity: 0;
}
}
@-webkit-keyframes viewportshow {
0% {
opacity: inherit;
display: block;
}
100% {
opacity: 1;
}
}
@keyframes viewportshow {
0% {
opacity: inherit;
display: block;
}
100% {
opacity: 1;
}
}
.massInterest .arrow{
margin-bottom: 15px;
padding-bottom: 0;
}
.massInterest .choiceAvatar{
margin:1.75% 3%;
width:22.5%;
max-width:73px;
}
.massInterest .img {
padding: 50%;
background-size: cover;
background-repeat: no-repeat;
-webkit-transition-property: opacity, background-image;
transition-property: opacity, background-image;
-webkit-transition-duration: 3s, 3s;
transition-duration: 3s, 3s;
-webkit-transition-timing-function: ease-in, ease-in;
transition-timing-function: ease-in, ease-in;
}
.massInterest .img,
.massInterest .no-img {
margin-bottom: 20px;
}
.massInterest .age{
margin-top:-35px;
bottom:2px;
right:-6px;
font-weight:700;
color:#ABABAB;
}
.massInterest .details {
bottom: 4px;
}
.massInterest .details{
overflow:hidden;
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
color: #565656;
}
.massInterest .iconBackground{
background-color:#ccc;
width:17px;
height:17px;
bottom:34px;
right: -10px;
padding: 2px;
}
.massInterest .icon{
width:15px;
height:15px;
}
.massInterest .icon.massInterest-others,
.massInterest .icon.massInterest-others .unchecked{
width:30px;
height:30px;
}
.massInterest .header .icon{
width:37px;
height:37px;
}
.massInterest .header a .icon{
width: 20px;
height: 20px;
}
@media (max-width: 320px) {
.massInterest .header .icon{
display:none;
}
.massInterest .header a .icon{
display:inline-block;
}
.massInterest .header h2 {
margin:0.25em;
}
#massInterestForm .arrow{
padding-bottom:0;
}
}
.massInterest input ~ .iconBackground .icon{
fill: #ccc;
color: #fff;
stroke: none;
}
.massInterest input:checked ~ .iconBackground{
background-color: #b15d51;
}
.massInterest input:checked ~ .iconBackground .icon{
fill: #fff;
stroke: none;
}
.massInterest input ~ .img,
.massInterest input ~ .svg,
.massInterest input ~ .details {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
opacity: .5;
-webkit-transition: .5s ease-in-out;
-moz-filter: grayscale(100%);
-moz-transition: .5s ease-in-out;
-o-filter: grayscale(100%);
-o-transition: .5s ease-in-out;
}
.massInterest input:checked ~ .img,
.massInterest input:checked ~ .svg,
.massInterest input:checked ~ .details {
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
opacity: 1;
-webkit-transition: .5s ease-in-out;
-moz-filter: grayscale(0%);
-moz-transition: .5s ease-in-out;
-o-filter: grayscale(0%);
-o-transition: .5s ease-in-out;
}
.massInterest input ~ .age{
color:#565656;
-webkit-transition: .5s ease-in-out;
-moz-filter: grayscale(0%);
-moz-transition: .5s ease-in-out;
-o-filter: grayscale(0%);
-o-transition: .5s ease-in-out;
}
.massInterest .shadow {
-webkit-box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.4);
box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.4);
}
/* Also include other members */
.massInterest .includeBtn .details{
height:100%;
width:100%;
font-size:3vw;
padding:4px;
}
.massInterest .includeBtn .iconBackground {
bottom: 5px;
left: 92%;
}
/* Mass Mail overrides */
.choiceAvatar .details,
.choiceAvatar .cut {
line-height: 1.25em;
}
/* Upgrade styles */
/* Membership */
.duration {
min-width: 33.3333%;
}
.diamond .duration,
.benefits .diamond {
background-color: #CCCCCC
}
.platinum .duration,
.benefits .platinum {
background-color: #D2D5F9
}
.gold .duration,
.benefits .gold {
background-color: #f9ea98;
}
#upgradeForm .segmented-button a {
color: #565656;
}
#upgradeForm .segmented-button a.active.diamond {
background-color: #000000 !important;
color: #fff;
}
#upgradeForm .segmented-button a.active.platinum {
background-color: #D2D5F9 !important
}
#upgradeForm .segmented-button a.active.gold {
background-color: #f9ea98 !important
}
#upgradeForm .infoicon {
width: 25px;
height: 25px;
display: block;
}
.active {
-webkit-transition: -webkit-transform 0.5s ease;
transition: -webkit-transform 0.5s ease;
transition: transform 0.5s ease;
transition: transform 0.5s ease, -webkit-transform 0.5s ease;
}
/* Slides */
.upgradebanner,
.upgradebannerAB {
cursor: pointer;
background-color: #e5e5e5;
min-width: 100%;
white-space: normal;
}
.upgradebanner .icon {
width: 75px;
height: 75px;
overflow: hidden;
}
.upgradebannerAB .memberPhoto {
width: 60px;
height: 60px;
min-width: 60px;
min-height: 60px;
}
.upgradebanner .icon img {
width: 100%;
height: auto;
}
.upgradebanner .icon-small {
width: 50px;
height: 50px;
}
.upgradebannerAB .icon-small {
width: 30px;
height: 30px;
}
.upgradebannerAB p {
color: #565656;
}
.upgradebannerAB .header {
margin-bottom: -0.5rem;
}
.upgradebanner.bg-red-darken {
background-color: #881515;
}
.upgradebanner.bg-green {
background-color: #70bb46;
}
.upgradebanner.bg-yellow {
background-color: rgb(243, 156, 18);
}
.slides-nav {
margin-top: .25rem;
}
@media (max-height: 480px) {
.payment-upgrade-slides .col-3 {
width: 0;
}
.payment-upgrade-slides .col-9 {
width: 100%;
}
.payment-upgrade-slides .icon {
display: none;
}
.upgradebannerAB .icon {
display: block;
}
}
/* Benefits */
.benefits .icon {
width: 30px;
height: 30px;
}
.benefits .diamond .icon,
.benefits .diamond {
fill: #000000;
stroke: #000000;
}
.benefits .platinum .icon,
.benefits .platinum {
fill: #2a3393;
stroke: #2a3393;
}
.benefits .gold .icon,
.benefits .gold {
fill: #dcbc0c;
stroke: #dcbc0c;
}
.benefits .content {
font-size: 1em;
}
.benefits .ellipsis {
overflow: hidden;
text-overflow: ellipsis;
}
/* Check Icon */
.duration input[type=radio],
.paymentMethod input[type=radio] {
display: none !important;
}
.paymentMethod input,
.paymentMethod svg {
display: inline-block;
vertical-align: middle;
}
.duration input~.icon,
.paymentMethod input~.icon {
fill: #fff;
height: 33px;
width: 33px;
background-color: #fff;
}
.diamond .duration input[type=radio]~.icon .unticked,
.paymentMethod input~.icon .unticked {
fill: #000000;
display: block;
}
.diamond .duration input[type=radio]~.icon .ticked,
.paymentMethod input[type=radio]~.icon .ticked {
display: none;
}
.diamond .duration input[type=radio]:checked~.icon .ticked,
.paymentMethod input[type=radio]:checked~.icon .ticked {
fill: #000000;
stroke: #000000;
display: block;
}
.diamond .duration input[type=radio]:checked~.icon .unticked,
.paymentMethod input[type=radio]:checked~.icon .unticked {
display: none;
}
.platinum .duration input[type=radio]~.icon .unticked {
fill: #2a3393;
display: block;
}
.paymentMethod input~.icon .unticked {
fill: #8c8c8c;
display: block;
}
.platinum .duration input[type=radio]~.icon .ticked,
.paymentMethod input[type=radio]~.icon .ticked {
display: none;
}
.platinum .duration input[type=radio]:checked~.icon .ticked {
fill: #2a3393;
stroke: #2a3393;
display: block;
}
.paymentMethod input[type=radio]:checked~.icon .ticked {
fill: #70bb46;
stroke: #70bb46;
display: block;
}
.platinum .duration input[type=radio]:checked~.icon .unticked,
.paymentMethod input[type=radio]:checked~.icon .unticked {
display: none;
}
.gold .duration input[type=radio]~.icon .unticked {
fill: #dcbc0c;
display: block;
}
.gold .duration input[type=radio]~.icon .ticked {
display: none;
}
.gold .duration input[type=radio]:checked~.icon .ticked {
fill: #dcbc0c;
stroke: #dcbc0c;
display: block;
}
.gold .duration input[type=radio]:checked~.icon .unticked {
display: none;
}
/* Tabs */
.platinum[aria-hidden=true],
.gold[aria-hidden=true] {
display: none;
}
.diamond[aria-hidden=true],
.platinum[aria-hidden=true] {
display: none;
}
/* Discount */
.line-through {
text-decoration: line-through;
}
.hideRow {
opacity: 0;
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
}
.animate-fadeIn {
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
/* Video Banner */
.image-height-200 {
height: 200px;
}
.upgradebanner .icon {
fill: #b15d51;
}
.upgradebanner .icon.fill-white {
fill: #fff;
}
.payermax {
width: auto !important;
}
.bank-logo {
width: 50px;
height: 30px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
/* Sparks */
.platinum.sparks-amount,
.diamond.sparks-amount {
display: none;
}
.platinum.sparks-amount.active,
.diamond.sparks-amount.active {
display: block;
}
.col-features .gold {
color: #dcbc0c;
background-color: transparent;
}
.col-features .platinum {
color: #2a3393;
background-color: transparent;
}
.col-features .diamond {
color: #000000;
background-color: transparent;
}
.sparksProduct {
background-color: #f8f8f8;
}
.sparksQuantity {
font-size: 20px;
font-weight: 600;
}
.sparksprice {
font-size: 18px;
font-weight: 400;
}
Label input:checked~.sparksProduct {
background-color: #70bb46;
}
Label input:checked~.sparksProduct .sparksQuantity,
Label input:checked~.sparksProduct .sparksprice {
color: #ffffff;
}
.sparksProduct .sparks-badge {
background-color: #70bb46;
color: #fff;
}
Label input:checked~.sparksProduct .sparks-badge {
color: #70bb46;
background-color: #fff;
}
/* New Upgrade AB Test */
.product-card {
width: 320px;
}
.product-card h1 {
font-size: 32px;
font-weight: 600;
}
.product-card h2 {
font-weight: 500;
color: #323232;
}
.product-card.border-gold h1 {
color: #dcbc0c;
}
.product-card.border-platinum h1 {
color: #2a3393;
}
.product-card.border-diamond h1 {
color: #000000;
}
.rounded-5 {
border-radius: 1.25rem;
}
.upgradebanner .singles_await img{
background-color: transparent;
width: 50px;
height: 50px;
}
.upgradebanner .singles_await .icon{
width: 50px;
height: 50px;
border: none;
border-radius: 0;
-ms-flex-item-align: start;
align-self: flex-start;
}
.payment-error ol {
color: #565656;
font-size: 16px;
line-height: 1.3em;
}
.payment-error ol {
counter-reset:item;
margin:0;
padding:0;
}
.payment-error ol>li {
counter-increment:item;
list-style:none inside;
margin: 40px 0;
overflow: hidden;
font-size: 16px !important;
line-height: 1.3;
}
.payment-error ol>li:before {
content:counter(item) ;
padding: 6px;
display: block;
border-radius: 50%;
width: 22px;
background: #c23b2d;
color: #fff;
text-align: center;
font: 18px 'Lato', Helvetica, Arial, sans-serif;
font-weight: 100;
margin: 10px auto;
}
.payment-error h2 {
margin: 0 0 15px 0;
}
.payment-error a {
background-color: #70bb46;
color: #fff;
font-family: inherit;
font-size: inherit;
font-weight: 700;
text-decoration: none;
cursor: pointer;
display: inline-block;
line-height: 1.125rem;
padding: 0.7rem 1rem;
margin: 10px 0;
height: auto;
border: 1px solid transparent;
vertical-align: middle;
-webkit-appearance: none;
border-radius: .25rem;
display: block;
text-align: center;
}
.payment-error ul {
margin: 15px 0;
padding:0 0 0 20px;
}
[dir=rtl] .payment-error ul {
padding:0 20px 0 0;
}
.payment-error ul>li {
list-style: disc outside;
padding: .5rem 0;
}
.payment-error .warning {
display: block;
margin: 20px auto;
text-align: center;
fill: #c23b2d;
}
.payment-error .warning svg {
width: 120px;
height: 120px;
}
/* Order Styles */
.order button{font-size:1.2em;}
.order button:disabled, .order button:active {
background-color:rgba(0,0,0,0.25);
color: rgba(255,255,255,.4);
}
.form.disabled {
opacity:.5;
}
.order select {
-webkit-appearance: none;
-moz-appearance: none;
}
.order label {
color:#717171;
}
.order .conditions {
font-size: .8em;
color: #777;
line-height: 1.15rem;
}
.order .conditions a{
color: #565656;
}
.order #expmonth, .order #expyear{
vertical-align: top;
}
.infocontainer{
font-size: 1em;
color:#fff;
}
.infocontainer h2{
font-weight:400;
}
.infocontainer .loader {
height:50px;
}
.infocontainer .icon{
width:30px;
}
.infocontainer select{
background-color: #fff;
}
.infocontainer{
color:#333;
}
.infocontainer.membership-platinum{
color:#333;
background-color: #D2D5F9;
}
.infocontainer.membership-gold{
color:#333;
background-color: #f9ea98;
}
.infocontainer.membership-diamond{
color:#333;
background-color: #CCCCCC;
}
.secure.orderHeader{
background-color: #70bb46;
color:#fff;
min-height:30px;
}
.orderHeader .lock svg{
fill:#fff;
}
.progressbar {
background-color:#e7e7e7;
position:relative;
}
.progressbar .line{
background-color: #ddd;
height:2px;
position:absolute;
top:32%;
}
.progressbar .step .circle{
width: 40px;
height: 40px;
background-color: #aaa;
text-align: center;
line-height: 40px;
font-weight: bold;
color:#fff;
}
.progressbar .step{
color:#aaa;
z-index:2;
}
#paymentConfirmation .infocontainer.arrow-success{
background-color:#dff0d8;
color:#565656;
}
#paymentConfirmation .infocontainer.arrow-success h1, #paymentConfirmation .infocontainer.arrow-success strong{
color:#70bb46;
line-height:1em;
}
.overlay, .spinnerOverlay {
background-color: rgba(0,0,0,0.25);
width:100%;
height:100%;
z-index:202; /* heigher than the selected photo in the Facebook Album */
}
.overlay .sk-circle .sk-child:before{
background-color: #fff;
}
.overlay-darker-1 {
background-color: rgba(0,0,0,0.75);
}
.overlay-darker-2 {
background-color: rgba(0,0,0,0.875);
}
/* Form Overrides */
.order .form #cvvHanger input{
background-image: url("../images/payment/cvv.png");
background-size: contain;
background-repeat: no-repeat;
background-position: right;
}
.order .form #cvvHanger input.cvvAmex{
background-image: url("../images/payment/cvv-amex.png");
}
[dir=rtl] .order .form #cvvHanger input{
background-position: left;
}
/* Payment Error */
.border-error img{
width:100%;
height:auto;
max-width:100%;
}
/* Processing Spinner for One Click Renewal */
.loader {
margin-top:48%;
}
.bank-logo-max-h {
max-height: 24px;
}
/*circle.spinnerDot {*/
/*animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;*/
/*}*/
/*circle.spinnerDot2:before {*/
/*animation-delay: -1.1s; }*/
/*circle.spinnerDot3:before {*/
/*animation-delay: -1s; }*/
/*circle.spinnerDot4:before {*/
/*animation-delay: -0.9s; }*/
/*circle.spinnerDot5:before {*/
/*animation-delay: -0.8s; }*/
/*circle.spinnerDot6:before {*/
/*animation-delay: -0.7s; }*/
/*circle.spinnerDot7:before {*/
/*animation-delay: -0.6s; }*/
/*circle.spinnerDot8:before {*/
/*animation-delay: -0.5s; }*/
/*circle.spinnerDot9:before {*/
/*animation-delay: -0.4s; }*/
/*circle.spinnerDot10:before {*/
/*animation-delay: -0.3s; }*/
/*circle.spinnerDot11:before {*/
/*animation-delay: -0.2s; }*/
/*circle.spinnerDot12:before {*/
/*animation-delay: -0.1s; }*/
/*@-webkit-keyframes sk-circleBounceDelay {*/
/*0%, 80%, 100% {*/
/*transform: scale(.2);*/
/*} 40% {*/
/*transform: scale(1);*/
/*}*/
/*}*/
/*@keyframes sk-circleBounceDelay {*/
/*0%, 80%, 100% {*/
/*transform: scale(.2);*/
/*} 40% {*/
/*transform: scale(1);*/
/*}*/
/*}*/
.dot1{
-webkit-transform: scale(2);
transform: scale(2);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
.hide{
opacity:0;
}
.animation-popUp.hide {
margin-top:0;
}
.animation-popUp {
-webkit-transition: margin-top 2s ease-out;
transition: margin-top 2s ease-out;
}
.animation-dist-25 {
margin-top: -25vh;
}
.animation-dist-50 {
margin-top: -50vh;
}
.animation-dist-100 {
margin-top: -100vh;
}
.animation-fade-in {
-webkit-transition: opacity 0.75s ease-out;
transition: opacity 0.75s ease-out;
}
.animation-pulse {
-webkit-animation: pulse 350ms ease;
animation: pulse 350ms ease;
}
@-webkit-keyframes pulse {
0% {
opacity: 0;
-webkit-transform: scale(.9);
transform: scale(.9);
}
50% {
opacity: 1;
}
80% {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes pulse {
0% {
opacity: 0;
-webkit-transform: scale(.9);
transform: scale(.9);
}
50% {
opacity: 1;
}
80% {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
.heartbeat {
-webkit-animation: heartbeat 1.5s ease-in-out both;
animation: heartbeat 1.5s ease-in-out both;
}
@-webkit-keyframes heartbeat {
from {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: center center;
transform-origin: center center;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
10% {
-webkit-transform: scale(0.91);
transform: scale(0.91);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
17% {
-webkit-transform: scale(0.98);
transform: scale(0.98);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
33% {
-webkit-transform: scale(0.87);
transform: scale(0.87);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
45% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
@keyframes heartbeat {
from {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: center center;
transform-origin: center center;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
10% {
-webkit-transform: scale(0.91);
transform: scale(0.91);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
17% {
-webkit-transform: scale(0.98);
transform: scale(0.98);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
33% {
-webkit-transform: scale(0.87);
transform: scale(0.87);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
45% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
.ad-fade-in{
opacity: 0;
}
.ad-visible .ad-fade-in{
opacity: 1;
}
.fade-in,
.ad-visible .ad-fade-in{
-webkit-animation: fade-in 1s;
animation: fade-in 1s;
}
@-webkit-keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.ad-scale-in-center {
opacity: 0;
}
.scale-in-center,
.ad-visible .ad-scale-in-center {
opacity: 1;
-webkit-animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
/* ----------------------------------------------
* Generated by Animista on 2020-8-19 10:0:36
* Licensed under FreeBSD License.
* See http://animista.net/license for more info.
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */
/**
* ----------------------------------------
* animation scale-in-center
* ----------------------------------------
*/
@-webkit-keyframes scale-in-center {
0% {
-webkit-transform: scale(0);
transform: scale(0);
opacity: 1;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
}
@keyframes scale-in-center {
0% {
-webkit-transform: scale(0);
transform: scale(0);
opacity: 1;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
}
.ad-visible .delay-1 {
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.ad-visible .delay-1-5 {
-webkit-animation-delay: 1.5s;
animation-delay: 1.5s;
}
.ad-visible .delay-2 {
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
.ad-visible .delay-2-25 {
-webkit-animation-delay: 2.25s;
animation-delay: 2.25s;
}
.ad-visible .delay-2-5 {
-webkit-animation-delay: 2.5s;
animation-delay: 2.5s;
}
.ad-visible .delay-3{
-webkit-animation-delay: 3s;
animation-delay: 3s;
}
.ad-visible .delay-3-25{
-webkit-animation-delay: 3.25s;
animation-delay: 3.25s;
}
.scale-up-hor-center {
opacity: 0;
}
.ad-visible .scale-up-hor-center {
opacity: 1;
-webkit-animation: scale-up-hor-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
animation: scale-up-hor-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
/**
* ----------------------------------------
* animation scale-up-hor-center
* ----------------------------------------
*/
@-webkit-keyframes scale-up-hor-center {
0% {
-webkit-transform: scaleX(0.4);
transform: scaleX(0.4);
}
100% {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
}
@keyframes scale-up-hor-center {
0% {
-webkit-transform: scaleX(0.4);
transform: scaleX(0.4);
}
100% {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
}
.ad-visible .ad-slide-top {
-webkit-animation: slide-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: slide-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
/**
* ----------------------------------------
* animation slide-top
* ----------------------------------------
*/
@-webkit-keyframes slide-top {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: translateY(-250px);
transform: translateY(-250px);
}
}
@keyframes slide-top {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: translateY(-250px);
transform: translateY(-250px);
}
}
.text-focus-in {
opacity: 0;
}
.ad-visible .text-focus-in {
-webkit-animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}
/* ----------------------------------------------
* Generated by Animista on 2020-8-28 9:19:54
* Licensed under FreeBSD License.
* See http://animista.net/license for more info.
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */
/**
* ----------------------------------------
* animation text-focus-in
* ----------------------------------------
*/
@-webkit-keyframes text-focus-in {
0% {
-webkit-filter: blur(12px);
filter: blur(12px);
opacity: 0;
}
100% {
-webkit-filter: blur(0px);
filter: blur(0px);
opacity: 1;
}
}
@keyframes text-focus-in {
0% {
-webkit-filter: blur(12px);
filter: blur(12px);
opacity: 0;
}
100% {
-webkit-filter: blur(0px);
filter: blur(0px);
opacity: 1;
}
}
.ad-visible .scale-in-bottom {
-webkit-animation: scale-in-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: scale-in-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
/* ----------------------------------------------
* Generated by Animista on 2020-8-17 13:46:32
* Licensed under FreeBSD License.
* See http://animista.net/license for more info.
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */
/**
* ----------------------------------------
* animation scale-in-bottom
* ----------------------------------------
*/
@-webkit-keyframes scale-in-bottom {
0% {
-webkit-transform: scale(0);
transform: scale(0);
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
opacity: 1;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
opacity: 1;
}
}
@keyframes scale-in-bottom {
0% {
-webkit-transform: scale(0);
transform: scale(0);
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
opacity: 1;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
opacity: 1;
}
}
.tracking-in-expand-fwd-bottom {
opacity: 0;
}
.ad-visible .tracking-in-expand-fwd-bottom {
-webkit-animation: tracking-in-expand-fwd-bottom 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
animation: tracking-in-expand-fwd-bottom 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}
/* ----------------------------------------------
* Generated by Animista on 2020-8-17 14:26:31
* Licensed under FreeBSD License.
* See http://animista.net/license for more info.
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */
/**
* ----------------------------------------
* animation tracking-in-expand-fwd-bottom
* ----------------------------------------
*/
@-webkit-keyframes tracking-in-expand-fwd-bottom {
0% {
letter-spacing: -0.5em;
-webkit-transform: translateZ(-700px) translateY(500px);
transform: translateZ(-700px) translateY(500px);
opacity: 0;
}
40% {
opacity: 0.6;
}
100% {
-webkit-transform: translateZ(0) translateY(0);
transform: translateZ(0) translateY(0);
opacity: 1;
}
}
@keyframes tracking-in-expand-fwd-bottom {
0% {
letter-spacing: -0.5em;
-webkit-transform: translateZ(-700px) translateY(500px);
transform: translateZ(-700px) translateY(500px);
opacity: 0;
}
40% {
opacity: 0.6;
}
100% {
-webkit-transform: translateZ(0) translateY(0);
transform: translateZ(0) translateY(0);
opacity: 1;
}
}
.scale-height {
opacity: 0;
}
.ad-visible .scale-height {
opacity: 1;
-webkit-animation: scale-height 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: scale-height 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@-webkit-keyframes scale-height {
0% {
height: 0px;
}
100% {
height: 50px;
}
}
@keyframes scale-height {
0% {
height: 0px;
}
100% {
height: 50px;
}
}
.ad-visible .blur-out {
-webkit-animation: blur-out 0.7s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
animation: blur-out 0.7s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
}
@-webkit-keyframes blur-out {
0% {
-webkit-filter: blur(0px);
filter: blur(0px);
}
100% {
-webkit-filter: blur(4px);
filter: blur(4px);
}
}
@keyframes blur-out {
0% {
-webkit-filter: blur(0px);
filter: blur(0px);
}
100% {
-webkit-filter: blur(4px);
filter: blur(4px);
}
}
.puff-in-center {
opacity: 0;
}
.ad-visible .puff-in-center {
-webkit-animation: puff-in-center 0.7s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
animation: puff-in-center 0.7s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
}
/* ----------------------------------------------
* Generated by Animista on 2020-8-17 13:26:33
* Licensed under FreeBSD License.
* See http://animista.net/license for more info.
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */
/**
* ----------------------------------------
* animation puff-in-center
* ----------------------------------------
*/
@-webkit-keyframes puff-in-center {
0% {
-webkit-transform: scale(2);
transform: scale(2);
-webkit-filter: blur(4px);
filter: blur(4px);
opacity: 0;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-filter: blur(0px);
filter: blur(0px);
opacity: 1;
}
}
@keyframes puff-in-center {
0% {
-webkit-transform: scale(2);
transform: scale(2);
-webkit-filter: blur(4px);
filter: blur(4px);
opacity: 0;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-filter: blur(0px);
filter: blur(0px);
opacity: 1;
}
}
.scale-down-ver-top {
-webkit-animation: scale-down-ver-top 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: scale-down-ver-top 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
/* ----------------------------------------------
* Generated by Animista on 2021-4-21 14:22:59
* Licensed under FreeBSD License.
* See http://animista.net/license for more info.
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */
/**
* ----------------------------------------
* animation scale-down-ver-top
* ----------------------------------------
*/
@-webkit-keyframes scale-down-ver-top {
0% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
}
100% {
-webkit-transform: scaleY(0.0);
transform: scaleY(0.0);
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
}
}
@keyframes scale-down-ver-top {
0% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
}
100% {
-webkit-transform: scaleY(0.0);
transform: scaleY(0.0);
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
}
}
.slide-in-top {
-webkit-animation: slide-in-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: slide-in-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
/* ----------------------------------------------
* Generated by Animista on 2020-1-17 9:35:48
* Licensed under FreeBSD License.
* See http://animista.net/license for more info.
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */
/**
* ----------------------------------------
* animation slide-in-top
* ----------------------------------------
*/
@-webkit-keyframes slide-in-top {
0% {
-webkit-transform: translateY(-100px);
transform: translateY(-100px);
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes slide-in-top {
0% {
-webkit-transform: translateY(-100px);
transform: translateY(-100px);
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
.slide-in-bottom {
-webkit-animation: slide-in-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: slide-in-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
/* ----------------------------------------------
* Generated by Animista on 2020-6-25 11:0:26
* Licensed under FreeBSD License.
* See http://animista.net/license for more info.
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */
/**
* ----------------------------------------
* animation slide-in-bottom
* ----------------------------------------
*/
@-webkit-keyframes slide-in-bottom {
0% {
-webkit-transform: translateY(1000px);
transform: translateY(1000px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
@keyframes slide-in-bottom {
0% {
-webkit-transform: translateY(1000px);
transform: translateY(1000px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
.pop-fade-out {
-webkit-animation: pop-fade-out 1s;
animation: pop-fade-out 1s;
}
@-webkit-keyframes pop-fade-out {
0% {
opacity: 1;
top: 0;
left: 10%;
}
15% {
top: -10px;
left: -15%;
}
30% {
top: -15px;
left: 40%;
}
45% {
top: -25px;
left: -50%;
}
60% {
top: -35px;
left: 15%;
}
75% {
top: -40px;
left: -60%;
}
90% {
top: -45px;
left: 40%;
}
100% {
top: -50px;
left: 0;
opacity: 0;
}
}
@keyframes pop-fade-out {
0% {
opacity: 1;
top: 0;
left: 10%;
}
15% {
top: -10px;
left: -15%;
}
30% {
top: -15px;
left: 40%;
}
45% {
top: -25px;
left: -50%;
}
60% {
top: -35px;
left: 15%;
}
75% {
top: -40px;
left: -60%;
}
90% {
top: -45px;
left: 40%;
}
100% {
top: -50px;
left: 0;
opacity: 0;
}
}
@-webkit-keyframes button-highlight {
0% {
opacity: 0.5;
}
100% {
-webkit-transform: scale(1.6);
transform: scale(1.6);
opacity: 0;
}
}
@keyframes button-highlight {
0% {
opacity: 0.5;
}
100% {
-webkit-transform: scale(1.6);
transform: scale(1.6);
opacity: 0;
}
}
.google-load-wraper{
position: relative;
height: 40px;
width: 100%;
background-color: rgb(211,211,211);
z-index: 44;
overflow: hidden;
border-radius: 5px;
}
.google-load-wraper .activity{
position: absolute;
left: -45%;
height: 100%;
width: 45%;
background-image: -webkit-gradient(linear, right top, left top, from(rgba(251,251,251, .05)), color-stop(rgba(251,251,251, .3)), color-stop(rgba(251,251,251, .6)), color-stop(rgba(251,251,251, .3)), to(rgba(251,251,251, .05)));
background-image: -webkit-linear-gradient(right, rgba(251,251,251, .05), rgba(251,251,251, .3), rgba(251,251,251, .6), rgba(251,251,251, .3), rgba(251,251,251, .05));
background-image: linear-gradient(to left, rgba(251,251,251, .05), rgba(251,251,251, .3), rgba(251,251,251, .6), rgba(251,251,251, .3), rgba(251,251,251, .05));
background-image: -webkit-linear-gradient(to left, rgba(251,251,251, .05), rgba(251,251,251, .3), rgba(251,251,251, .6), rgba(251,251,251, .3), rgba(251,251,251, .05));
-webkit-animation: loading 1s infinite;
animation: loading 1s infinite;
z-index: 45;
}
@-webkit-keyframes loading {
0%{
left: -45%;
}
100%{
left: 100%;
}
}
@keyframes loading {
0%{
left: -45%;
}
100%{
left: 100%;
}
}
.loading-message::after {
content: attr(data-loading-message-2);
-webkit-animation: loading-message-content 2.2s linear;
animation: loading-message-content 2.2s linear;
-webkit-transform-origin: center;
transform-origin: center;
}
@-webkit-keyframes loading-message-content {
from {
content: attr(data-loading-message);
}
to {
content: attr(data-loading-message-2);
}
}
@keyframes loading-message-content {
from {
content: attr(data-loading-message);
}
to {
content: attr(data-loading-message-2);
}
}
/* Formatted text comes from server, can't use atomic to control it */
.listingheader h2 {
font-size:20px;
margin-bottom:0.5rem;
}
.listingheader ul {
margin:0;
padding-left:1rem;
}
.listingheader li {
padding-bottom:0.5rem;
}
/* Different levels of opacity */
.opacity-5 {
opacity: 0.5;
}
@media screen and (max-height: 558px) {
#photo-upload-message-text {
position: absolute;
top: 30%;
pointer-events: none;
}
}
.multiface-img {
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
.multiface-sm {
min-width: 125px;
min-height: 136px;
width: 125px;
height: 136px;
}
.multiface-lg {
min-height: 300px;
height: 300px;
}
svg.olark-send-icon{
width: 100% !important;
}
#olark-container .olark-chat-input.olark-chat-input {
padding: 10px 65px 10px 10px !important;
}
.wrap {
white-space:normal;
}
.ellipsis::after{
content: "...";
}
.overflow-wrap {
overflow-wrap: break-word;
word-wrap: break-word; /* Renamed to overflow-wrap historic */
-ms-hyphens: auto;
hyphens: auto;
}
[id*=showquestion] a {
font-weight: bold;
}
:lang(zh) [id*=showquestion] a,
:lang(ja) [id*=showquestion] a,
:lang(ko) [id*=showquestion] a {
text-decoration: underline;
}
.square {
width: 100vw;
height: 100vw;
}
.square-min {
min-width: 100vw;
min-height: 100vw;
max-width: 100vw;
}
.square-min-ab {
min-width: 91vw;
min-height: 91vw;
max-width: 91vw;
}
.small-square-min {
min-width: 42vw;
min-height: 42vw;
max-width: 42vw;
}
.slide img {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
background-repeat: no-repeat;
background-position: 50% 30%;
}
.fullscreen .slide:not([data-complete=true]) img {
background-size: 50%;
}
.fullscreen.slides::after {
content: url('/assets/mobile/images/icon-close.svg');
position: absolute;
top: 10px;
right: 10px;
width: 15px;
pointer-events: none;
}
.fullscreen .slides-nav{
top: auto;
bottom: 0;
}
.slides.nav-hidden > div[style] {
-webkit-transition: none !important;
transition: none !important;
-webkit-transform: translateX(0) !important;
transform: translateX(0) !important;
}
.fullscreen .card-actions {
display: none;
}
.slide .img-cover {
width: 100vw;
height: 100vw;
background-size: cover;
}
.img-cover {
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.slide .img-contain {
width: 100vw;
height: 100vh;
background-size: contain;
background-color: transparent;
}
/*---------------------
update Terms / Policy notice bars
-------------------*/
.pointer {
cursor: pointer;
}
.icons-update{
fill: #565656;
}
.icons-update-20{
width:20px;
height:20px;
}
.icons-update-16{
width:16px;
height:16px;
}
.update-color,
.update-color a,
.update-color a:link {
color: #565656;
font-weight: 400;
}
.bg-update {
background-color: #e3e3e2;
}
.termsPrivacyUpdate {
margin-top: 44px;
margin-bottom: -44px;
z-index: 110;
}
.bg-update.border-bottom {
border-bottom-color: #c3c2c1;
}
.terms-privacy a,
.terms-privacy a:visited,
.terms-privacy a:hover,
.terms-privacy a:active {
color: #0074d9;
}
.passport-banner-height {
height: 160px;
}
.passport-banner-footer-height {
height: 180px;
}
.passport-banner-max-width {
max-width: 2400px;
}
.passport-banner h1 {
font-size: 4rem;
}
.passport-banner h1,
.passport-banner h2 {
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}
.passport-banner-images .card-passport:nth-child(n+6) {
-webkit-transform: rotate(8deg);
transform: rotate(8deg); /* Equal to rotateZ(45deg) */
}
.passport-banner-images .card-passport:nth-child(n+9) {
-webkit-transform: rotate(-12deg);
transform: rotate(-12deg); /* Equal to rotateZ(45deg) */
}
.passport-banner-images .card-passport:nth-child(3n+1) {
-webkit-transform: rotate(16deg);
transform: rotate(16deg); /* Equal to rotateZ(45deg) */
}
.passport-banner-images .card-passport:nth-child(2n+2) {
-webkit-transform: rotate(-4deg);
transform: rotate(-4deg); /* Equal to rotateZ(45deg) */
}
.card-passport {
width: 80px;
height: 90px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-ms-flex-preferred-size: 80px;
flex-basis: 80px;
background-color: #fff;
}
.card-passport .profile-bg {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
-webkit-print-color-adjust: exact;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
.card-passport.shadow {
-webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 3px 6px 0px;
box-shadow: rgba(0, 0, 0, 0.4) 0px 3px 6px 0px;
}
.passport-banner .icon-60 {
width: 60px;
height: 60px;
}
.passport-banner .overlay {
background-color: rgba(0,0,0,0.5);
}
.passport-banner .mn1 {
margin: -0.5rem;
}
.passport-banner-footer .card-passport .m1 {
margin: 0.25rem;
}
.header-strip {
background-color: #b15d51;
}
.header-strip-color {
color: #fff;
}
.icon-specials-burst {
color: #333333;
margin-top: -14px;
}
[dir=rtl] .icon-specials-burst {
margin-right: -16px;
}
[dir=ltr] .icon-specials-burst {
margin-left: -16px;
}
.specials-burst-label {
padding: 2px 4px;
-webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.4);
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.4);
}
[dir=ltr] .specials-burst-label {
padding-left: 16px;
}
[dir=rtl] .specials-burst-label {
padding-right: 16px;
}
.specials-burst-wrapper {
margin-top: -15px;
margin-bottom: -6px;
}
.passport-site-override-43 {
background-color:#d6ad60 !important;
color:#fff !important;
}
.passport-site-trial-43 {
background-color:#d6ad60;
color:#fff;
font-size: 10px;
padding:4px 6px;
}
.passport-site-override-44 {
background-color:#001427 !important;
color:#fff !important;
}
.passport-site-trial-44 {
background-color:#E00055;
color:#fff;
font-size: 10px;
padding:4px 6px;
}
/* 1003 - siteID for DateMyAge */
.btn-bg-1003 {
background-color: #CF5A20;
}
.editableList .checkbox {
width: 0;
height: 0;
-webkit-transition: all .25s ease-out;
transition: all .25s ease-out;
}
.editableList .checkbox .icon {
-webkit-transform: translateX(-40px);
transform: translateX(-40px);
-webkit-transition: all .25s ease-out;
transition: all .25s ease-out;
}
[dir=rtl] .editableList .checkbox .icon {
-webkit-transform: translateX(+40px);
transform: translateX(+40px);
}
.editableList.editing .checkbox {
width: 35px;
height: 35px;
}
.editableList.editing .checkbox .icon {
-webkit-transform: translateX(0);
transform: translateX(0);
}
.editableList.editing .small-text {
display: none;
}
.editableList.editing .cardheader {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
/* Prevent click actions on the card slides & actions */
.editableList.editing .slides *, .editableList.editing .card-actions * {
pointer-events: none;
}
/* Prevent selecting card text when in the editing mode*/
.editableList.editing * {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
[form^=editableList] {
color: #333333;
font-size: 1rem;
font-weight: normal;
border: none;
background: none;
}
.lazy {
background-image: none !important;
}
.terms-modal-text a {
display: unset;
}
.terms-modal-text {
text-align: left;
}
[dir="rtl"] .terms-modal-text {
text-align: right;
}
/* Ad Space */
.ad-336-336 {
min-height: 336px;
}
.ad {
max-width: 400px;
}
.ad-image-bg-color {
background-color: #e0e0e0;
}
.bg-action-highlight {
background-color: #b15d51;
}
.internal-ad-bg img,
.ad-slide-wrapper{
background-color: #3a150f;
border-top: 4px #3a150f solid;
}
.ad-slide{
color: #fff;
}
.ad-slide{
min-width: 160px;
max-width: 414px;
}
.ad-slide-height{
height: 336px;
}
.ad-slide-content-bottom {
height: 145px;
}
.ad-slide-content-bottom-crosspromo {
height: 220px;
}
.ad-slide-content-top {
height: 191px;
}
.margin-auto {
margin: auto;
}
.ad-slide-bg-image {
background-repeat: no-repeat;
background-position: top;
background-size: cover;
}
[dir=rtl] .ad-slide-bg-image {
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}
.ad-slide-bg-skew {
width: 100%;
}
.ad-slide-bg-skew {
height: 100%;
}
.ad-slide-bg-skew:after {
content: " ";
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
right: 0;
left: auto;
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: skew(-30deg, 0deg);
transform: skew(-30deg, 0deg);
-webkit-box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
z-index: -1;
}
.ad-slide-bg-skew:after {
bottom: -200px;
top: auto;
-webkit-transform: skew(0deg, -5deg);
transform: skew(0deg, -5deg);
}
[dir=rtl] .ad-slide-bg-skew:after {
top: 0;
right: auto;
left: 0;
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: skew(30deg, 0deg);
transform: skew(30deg, 0deg);
}
[dir=rtl] .ad-slide-bg-skew:after {
-webkit-transform: skew(0deg, 8deg);
transform: skew(0deg, 8deg);
}
.ad-slide-wrapper .color-action-highlight {
color: #b15d51;
}
.ad-slide-wrapper .fill-action-highlight {
fill: #b15d51;
}
/*over ride text set to be red in the cms*/
.ad-slide-wrapper .red,
.ad-slide-wrapper-side .red{
color: #fff;
}
.ad-slide-css-override-1 .ad-slide-bg-skew,
.ad-slide-css-override-1 .ad-slide-bg-skew:after {
background-color: #2d2139;
}
.ad-slide-css-override-1 .logo-domain {
width: 120px;
height: 20px;
}
/*--theme-primary*/
.ad-slide-css-override-1 .btn-bg {
background-color: #7c6792;
}
.ad-slide-css-override-1 .h3 {
color: #fff;
}
.ad-slide-css-override-1 .ad-site-logo {
color: #ca8baa;
fill: #fff;
}
#site-logo-asiandating >path.logo-light {
fill: #fff;
color: #fff;
}
#site-logo-asiandating >path.logo-dark {
fill: #ca8baa;
color: #ca8baa;
}
.ad-slide-css-override-2 .ad-slide-bg-skew,
.ad-slide-css-override-2 .ad-slide-bg-skew:after {
background-color: #671e24;
}
.ad-slide-css-override-2 .logo-domain {
width: 130px;
height: 20px;
}
/*--theme-primary*/
.ad-slide-css-override-2 .btn-bg {
background-color: #bf5860;
}
.ad-slide-css-override-2 .h3 {
color: #fff;
}
.ad-slide-css-override-2 .ad-site-logo {
color: #E7BAD7;
fill: #fff;
}
#site-logo-filipinocupid >path.logo-light {
fill: #fff;
color: #fff;
}
#site-logo-filipinocupid >path.logo-dark {
fill: #E7BAD7;
color: #E7BAD7;
}
.ad-slide-css-override-3 .ad-slide-bg-skew,
.ad-slide-css-override-3 .ad-slide-bg-skew:after {
background-color: #261200;
}
.ad-slide-css-override-3 .logo-domain {
width: 170px;
height: 20px;
}
/*--theme-primary*/
.ad-slide-css-override-3 .btn-bg {
background-color: #b0542a;
}
.ad-slide-css-override-3 .h3 {
color: #fff;
}
.ad-slide-css-override-3 .ad-site-logo {
color: #f5e590;
fill: #fff;
}
#site-logo-afrointroductions >path.logo-light {
fill: #fff;
color: #fff;
}
#site-logo-afrointroductions >path.logo-dark {
fill: #f5e590;
color: #f5e590;
}
.ad-slide-css-override-4 .ad-slide-bg-skew,
.ad-slide-css-override-4 .ad-slide-bg-skew:after {
background-color: #060d37;
}
.ad-slide-css-override-4 .logo-domain {
width: 100px;
height: 20px;
}
/*--theme-primary*/
.ad-slide-css-override-4 .btn-bg {
background-color: #7193c5;
}
.ad-slide-css-override-4 .h3 {
color: #fff;
}
.ad-slide-css-override-4 .ad-site-logo {
color: #fff;
fill: #85A5D6;
}
#site-logo-thaicupid >path.logo-light {
fill: #fff;
color: #fff;
}
#site-logo-thaicupid >path.logo-dark {
fill: #85A5D6;
color: #85A5D6;
}
.ad-slide-css-override-5 .ad-slide-bg-skew,
.ad-slide-css-override-5 .ad-slide-bg-skew:after {
background-color: #641b1b;
}
.ad-slide-css-override-5 .logo-domain {
width: 150px;
height: 20px;
}
/*--theme-primary*/
.ad-slide-css-override-5 .btn-bg {
background-color: #bd5c5c;
}
.ad-slide-css-override-5 .h3 {
color: #fff;
}
.ad-slide-css-override-5 .ad-site-logo {
color: #f0ccd5;
fill: #fff;
}
#site-logo-latinamericancupid >path.logo-light {
fill: #f0ccd5;
color: #f0ccd5;
}
#site-logo-latinamericancupid >path.logo-dark {
fill: #fff;
color: #fff;
}
.ad-slide-css-override-6 .ad-slide-bg-skew,
.ad-slide-css-override-6 .ad-slide-bg-skew:after {
background-color: #5a61a0;
}
.ad-slide-css-override-6 .logo-domain {
width: 130px;
height: 20px;
}
/*--theme-primary*/
.ad-slide-css-override-6 .btn-bg {
background-color: #929add;
}
.ad-slide-css-override-6 .h3 {
color: #fff;
}
.ad-slide-css-override-6 .ad-site-logo {
color: #fceaf2;
fill: #fff;
}
#site-logo-koreancupid >path.logo-light {
fill: #fceaf2;
color: #fceaf2;
}
#site-logo-koreancupid >path.logo-dark {
fill: #fff;
color: #fff;
}
.ad-slide-css-override-7 .ad-slide-bg-skew,
.ad-slide-css-override-7 .ad-slide-bg-skew:after {
background-color: #613745;
}
.ad-slide-css-override-7 .logo-domain {
width: 130px;
height: 20px;
}
/*--theme-primary*/
.ad-slide-css-override-7 .btn-bg {
background-color: #BF6E89;
}
.ad-slide-css-override-7 .h3 {
color: #fff;
}
.ad-slide-css-override-7 .ad-site-logo {
color: #E19CB2;
fill: #fff;
}
#site-logo-russiancupid >path.logo-light {
fill: #fff;
color: #fff;
}
#site-logo-russiancupid >path.logo-dark {
fill: #E19CB2;
color: #E19CB2;
}
.ad-slide-css-override-8 .ad-slide-bg-skew,
.ad-slide-css-override-8 .ad-slide-bg-skew:after {
background-color: #7b2639;
}
.ad-slide-css-override-8 .logo-domain {
width: 160px;
height: 20px;
}
/*--theme-primary*/
.ad-slide-css-override-8 .btn-bg {
background-color: #c7657b;
}
.ad-slide-css-override-8 .h3 {
color: #fff;
}
.ad-slide-css-override-8 .ad-site-logo {
color: #f7d8d8;
fill: #fff;
}
#site-logo-internationalcupid >path.logo-light {
fill: #fff;
color: #fff;
}
#site-logo-internationalcupid >path.logo-dark {
fill: #f7d8d8;
color: #f7d8d8;
}
.ad-slide-css-override-9 .ad-slide-bg-skew,
.ad-slide-css-override-9 .ad-slide-bg-skew:after {
background-color: #d7effe;
}
.ad-slide-css-override-9 .logo-domain {
width: 115px;
height: 20px;
}
/*--theme-primary*/
.ad-slide-css-override-9 .btn-bg {
background-color: #60a6d2;
}
.ad-slide-css-override-9 .h3 {
color: #fff;
}
.ad-slide-css-override-9 .h3 {
color: #222;
}
.ad-slide-css-override-9 .ad-site-logo {
color: #BF519E;
fill: #306C9A;
}
#site-logo-japancupid >path.logo-light {
fill: #BF519E;
color: #BF519E;
}
#site-logo-japancupid >path.logo-dark {
fill: #306C9A;
color: #306C9A;
}
.ad-slide-css-override-10 .ad-slide-bg-skew,
.ad-slide-css-override-10 .ad-slide-bg-skew:after {
background-color: #f1dadd;
}
.ad-slide-css-override-10 .logo-domain {
width: 150px;
height: 20px;
}
/*--theme-primary*/
.ad-slide-css-override-10 .btn-bg {
background-color: #b15d51;
}
.ad-slide-css-override-10 .h3 {
color: #fff;
}
.ad-slide-css-override-10 .h3 {
color: #222;
}
.ad-slide-css-override-10 .ad-site-logo {
color: #a11d21;
fill: #8a804a;
}
#site-logo-chinalovecupid >path.logo-light {
fill: #8a804a;
color: #8a804a;
}
#site-logo-chinalovecupid >path.logo-dark {
fill: #a11d21;
color: #a11d21;
}
.ad-slide-css-override-11 .ad-slide-bg-skew,
.ad-slide-css-override-11 .ad-slide-bg-skew:after {
background-color: #bbd5b0;
}
.ad-slide-css-override-11 .logo-domain {
width: 140px;
height: 20px;
}
/*--theme-primary*/
.ad-slide-css-override-11 .btn-bg {
background-color: #6f9562;
}
.ad-slide-css-override-11 .h3 {
color: #fff;
}
.ad-slide-css-override-11 .h3 {
color: #222;
}
.ad-slide-css-override-11 .ad-site-logo {
color: #3e4d2d;
fill: #674f4f;
}
#site-logo-vietnamcupid >path.logo-light {
fill: #3e4d2d;
color: #3e4d2d;
}
#site-logo-vietnamcupid >path.logo-dark {
fill: #674f4f;
color: #674f4f;
}
.ad-slide-css-override-14 .ad-slide-bg-skew,
.ad-slide-css-override-14 .ad-slide-bg-skew:after {
background-color: #b4d4e8;
}
.ad-slide-css-override-14 .logo-domain {
width: 110px;
height: 20px;
}
/*--theme-primary*/
.ad-slide-css-override-14 .btn-bg {
background-color: #4c88af;
}
.ad-slide-css-override-14 .h3 {
color: #222;
}
.ad-slide-css-override-14 .ad-site-logo {
color: #2f6282;
fill: #134461;
}
#site-logo-bbwcupid >path.logo-light {
fill: #2f6282;
color: #2f6282;
}
#site-logo-bbwcupid >path.logo-dark {
fill: #134461;
color: #134461;
}
.ad-slide-css-override-15 .ad-slide-bg-skew,
.ad-slide-css-override-15 .ad-slide-bg-skew:after {
background-color: #5c1314;
}
.ad-slide-css-override-15 .logo-domain {
width: 140px;
height: 20px;
}
/*--theme-primary*/
.ad-slide-css-override-15 .btn-bg {
background-color: #c9708c;
}
.ad-slide-css-override-15 .h3 {
color: #fff;
}
.ad-slide-css-override-15 .ad-site-logo {
color: #F1B0C5;
fill: #fff;
}
#site-logo-singleparentlove >path.logo-light {
fill: #fff;
color: #fff;
}
#site-logo-singleparentlove >path.logo-dark {
fill: #F1B0C5;
color: #F1B0C5;
}
.ad-slide-css-override-16 .ad-slide-bg-skew,
.ad-slide-css-override-16 .ad-slide-bg-skew:after {
background-color: #601925;
}
.ad-slide-css-override-16 .logo-domain {
width: 115px;
height: 20px;
}
/*--theme-primary*/
.ad-slide-css-override-16 .btn-bg {
background-color: #b14457;
}
.ad-slide-css-override-16 .h3 {
color: #fff;
}
.ad-slide-css-override-16 .ad-site-logo {
color: #cf5066;
fill: #fff;
}
#site-logo-brazilcupid >path.logo-light {
fill: #fff;
color: #fff;
}
#site-logo-brazilcupid >path.logo-dark {
fill: #cf5066;
color: #cf5066;
}
.ad-slide-css-override-17 .ad-slide-bg-skew,
.ad-slide-css-override-17 .ad-slide-bg-skew:after {
background-color: #e2d6ce;
}
.ad-slide-css-override-17 .logo-domain {
width: 115px;
height: 20px;
}
/*--theme-primary*/
.ad-slide-css-override-17 .btn-bg {
background-color: #9a7e6c;
}
.ad-slide-css-override-17 .h3 {
color: #222;
}
.ad-slide-css-override-17 .ad-site-logo {
color: #66574E;
fill: #42352c;
}
#site-logo-mexicancupid >path.logo-light {
fill: #66574E;
color: #66574E;
}
#site-logo-mexicancupid >path.logo-dark {
fill: #42352c;
color: #42352c;
}
.ad-slide-css-override-18 .ad-slide-bg-skew,
.ad-slide-css-override-18 .ad-slide-bg-skew:after {
background-color: #046294;
}
.ad-slide-css-override-18 .logo-domain {
width: 90px;
height: 20px;
}
/*--theme-primary*/
.ad-slide-css-override-18 .btn-bg {
background-color: #3f9ac9;
}
.ad-slide-css-override-18 .h3 {
color: #fff;
}
.ad-slide-css-override-18 .ad-site-logo {
color: #C1E7F3;
fill: #fff;
}
#site-logo-gaycupid >path.logo-light {
fill: #fff;
color: #fff;
}
#site-logo-gaycupid >path.logo-dark {
fill: #C1E7F3;
color: #C1E7F3;
}
.ad-slide-css-override-19 .ad-slide-bg-skew,
.ad-slide-css-override-19 .ad-slide-bg-skew:after {
background-color: #15293d;
}
.ad-slide-css-override-19 .logo-domain {
width: 140px;
height: 20px;
}
/*--theme-primary*/
.ad-slide-css-override-19 .btn-bg {
background-color: #7397ba;
}
.ad-slide-css-override-19 .h3 {
color: #fff;
}
.ad-slide-css-override-19 .ad-site-logo {
color: #C0D3E2;
fill: #fff;
}
#site-logo-christiancupid >path.logo-light {
fill: #fff;
color: #fff;
}
#site-logo-christiancupid >path.logo-dark {
fill: #C0D3E2;
color: #C0D3E2;
}
.ad-slide-css-override-20 .ad-slide-bg-skew,
.ad-slide-css-override-20 .ad-slide-bg-skew:after {
background-color: #450e0d;
}
.ad-slide-css-override-20 .logo-domain {
width: 150px;
height: 20px;
}
/*--theme-primary*/
.ad-slide-css-override-20 .btn-bg {
background-color: #902f2f;
}
.ad-slide-css-override-20 .h3 {
color: #fff;
}
.ad-slide-css-override-20 .ad-site-logo {
color: #F4D6D6;
fill: #FFF;
}
#site-logo-colombiancupid >path.logo-light {
fill: #fff;
color: #fff;
}
#site-logo-colombiancupid >path.logo-dark {
fill: #F4D6D6;
color: #F4D6D6;
}
.ad-slide-css-override-22 .ad-slide-bg-skew,
.ad-slide-css-override-22 .ad-slide-bg-skew:after {
background-color: #36465f;
}
.ad-slide-css-override-22 .logo-domain {
width: 120px;
height: 20px;
}
/*--theme-primary*/
.ad-slide-css-override-22 .btn-bg {
background-color: #70b2d5;
}
.ad-slide-css-override-22 .h3 {
color: #fff;
}
.ad-slide-css-override-22 .ad-site-logo {
color: #ADD8EF;
fill: #fff;
}
#site-logo-militarycupid >path.logo-light {
fill: #fff;
color: #fff;
}
#site-logo-militarycupid >path.logo-dark {
fill: #ADD8EF;
color: #ADD8EF;
}
.ad-slide-css-override-23 .ad-slide-bg-skew,
.ad-slide-css-override-23 .ad-slide-bg-skew:after {
background-color: #7ab1b8;
}
.ad-slide-css-override-23 .logo-domain {
width: 105px;
height: 20px;
}
/*--theme-primary*/
.ad-slide-css-override-23 .btn-bg {
background-color: #568e96;
}
.ad-slide-css-override-23 .h3 {
color: #fff;
}
.ad-slide-css-override-23 .ad-site-logo {
color: #2d555d;
fill: #FFF;
}
#site-logo-muslima >path.logo-light {
fill: #fff;
color: #fff;
}
#site-logo-muslima >path.logo-dark {
fill: #2d555d;
color: #2d555d;
}
.ad-slide-css-override-24 .ad-slide-bg-skew,
.ad-slide-css-override-24 .ad-slide-bg-skew:after {
background-color: #563b72;
}
.ad-slide-css-override-24 .logo-domain {
width: 170px;
height: 20px;
}
/*--theme-primary*/
.ad-slide-css-override-24 .btn-bg {
background-color: #9a7bbb;
}
.ad-slide-css-override-24 .h3 {
color: #fff;
}
.ad-slide-css-override-24 .ad-site-logo {
color: #E2D0E6;
fill: #fff;
}
#site-logo-indonesiancupid >path.logo-light {
fill: #fff;
color: #fff;
}
#site-logo-indonesiancupid >path.logo-dark {
fill: #E2D0E6;
color: #E2D0E6;
}
.ad-slide-css-override-25 .ad-slide-bg-skew,
.ad-slide-css-override-25 .ad-slide-bg-skew:after {
background-color: #fedcd4;
}
.ad-slide-css-override-25 .logo-domain {
width: 150px;
height: 20px;
}
/*--theme-primary*/
.ad-slide-css-override-25 .btn-bg {
background-color: #d06d47;
}
.ad-slide-css-override-25 .h3 {
color: #222;
}
.ad-slide-css-override-25 .ad-site-logo {
color: #C65327;
fill: #145F82;
}
#site-logo-interracialcupid >path.logo-light {
fill: #C65327;
color: #C65327;
}
#site-logo-interracialcupid >path.logo-dark {
fill: #145F82;
color: #145F82;
}
.ad-slide-css-override-26 .ad-slide-bg-skew,
.ad-slide-css-override-26 .ad-slide-bg-skew:after {
background-color: #f4d0e2;
}
.ad-slide-css-override-26 .logo-domain {
width: 100px;
height: 20px;
}
/*--theme-primary*/
.ad-slide-css-override-26 .btn-bg {
background-color: #c86098;
}
.ad-slide-css-override-26 .h3 {
color: #222;
}
.ad-slide-css-override-26 .ad-site-logo {
color: #da7fb1;
fill: #c41a77;
}
#site-logo-pinkcupid >path.logo-light {
fill: #da7fb1;
color: #da7fb1;
}
#site-logo-pinkcupid >path.logo-dark {
fill: #c41a77;
color: #c41a77;
}
.ad-slide-css-override-27 .ad-slide-bg-skew,
.ad-slide-css-override-27 .ad-slide-bg-skew:after {
background-color: #5c1314;
}
.ad-slide-css-override-27 .logo-domain {
width: 170px;
height: 20px;
}
/*--theme-primary*/
.ad-slide-css-override-27 .btn-bg {
background-color: #bb6983;
}
.ad-slide-css-override-27 .h3 {
color: #fff;
}
.ad-slide-css-override-27 .ad-site-logo {
color: #F1B0C5;
fill: #FFF;
}
#site-logo-singaporelovelinks >path.logo-light {
fill: #fff;
color: #fff;
}
#site-logo-singaporelovelinks >path.logo-dark {
fill: #F1B0C5;
color: #F1B0C5;
}
.ad-slide-css-override-28 .ad-slide-bg-skew,
.ad-slide-css-override-28 .ad-slide-bg-skew:after {
background-color: #3f2f4a;
}
.ad-slide-css-override-28 .logo-domain {
width: 140px;
height: 20px;
}
/*--theme-primary*/
.ad-slide-css-override-28 .btn-bg {
background-color: #7d5598;
}
.ad-slide-css-override-28 .h3 {
color: #fff;
}
.ad-slide-css-override-28 .ad-site-logo {
color: #FFF;
fill: #8c61a9;
}
#site-logo-ukrainedate >path.logo-light {
fill: #fff;
color: #fff;
}
#site-logo-ukrainedate >path.logo-dark {
fill: #8c61a9;
color: #8c61a9;
}
.ad-slide-css-override-29 .ad-slide-bg-skew,
.ad-slide-css-override-29 .ad-slide-bg-skew:after {
background-color: #19556a;
}
.ad-slide-css-override-29 .logo-domain {
width: 150px;
height: 20px;
}
/*--theme-primary*/
.ad-slide-css-override-29 .btn-bg {
background-color: #56adcc;
}
.ad-slide-css-override-29 .h3 {
color: #fff;
}
.ad-slide-css-override-29 .ad-site-logo {
color: #C6E9F6;
fill: #fff;
}
#site-logo-dominicancupid >path.logo-light {
fill: #fff;
color: #fff;
}
#site-logo-dominicancupid >path.logo-dark {
fill: #C6E9F6;
color: #C6E9F6;
}
.ad-slide-css-override-32 .ad-slide-bg-skew,
.ad-slide-css-override-32 .ad-slide-bg-skew:after {
background-color: #c7dae6;
}
.ad-slide-css-override-32 .logo-domain {
width: 150px;
height: 20px;
}
/*--theme-primary*/
.ad-slide-css-override-32 .btn-bg {
background-color: #a76581;
}
.ad-slide-css-override-32 .h3 {
color: #222;
}
.ad-slide-css-override-32 .ad-site-logo {
color: #9D5272;
fill: #632540;
}
#site-logo-southafricancupid >path.logo-light {
fill: #9D5272;
color: #9D5272;
}
#site-logo-southafricancupid >path.logo-dark {
fill: #632540;
color: #632540;
}
.ad-slide-css-override-33 .ad-slide-bg-skew,
.ad-slide-css-override-33 .ad-slide-bg-skew:after {
background-color: #1b6792;
}
.ad-slide-css-override-33 .logo-domain {
width: 150px;
height: 20px;
}
/*--theme-primary*/
.ad-slide-css-override-33 .btn-bg {
background-color: #57aedd;
}
.ad-slide-css-override-33 .h3 {
color: #fff;
}
.ad-slide-css-override-33 .ad-site-logo {
color: #C1E7F3;
fill: #fff;
}
#site-logo-hongkongcupid >path.logo-light {
fill: #fff;
color: #fff;
}
#site-logo-hongkongcupid >path.logo-dark {
fill: #C1E7F3;
color: #C1E7F3;
}
.ad-slide-css-override-35 .ad-slide-bg-skew,
.ad-slide-css-override-35 .ad-slide-bg-skew:after {
background-color: #221c1c;
}
.ad-slide-css-override-35 .logo-domain {
width: 115px;
height: 20px;
}
/*--theme-primary*/
.ad-slide-css-override-35 .btn-bg {
background-color: #b16665;
}
.ad-slide-css-override-35 .h3 {
color: #fff;
}
.ad-slide-css-override-35 .ad-site-logo {
color: #c48382;
fill: #fff;
}
#site-logo-blackcupid >path.logo-light {
fill: #fff;
color: #fff;
}
#site-logo-blackcupid >path.logo-dark {
fill: #c48382;
color: #c48382;
}
.ad-slide-css-override-36 .ad-slide-bg-skew,
.ad-slide-css-override-36 .ad-slide-bg-skew:after {
background-color: #9f222c;
}
.ad-slide-css-override-36 .logo-domain {
width: 120px;
height: 20px;
}
/*--theme-primary*/
.ad-slide-css-override-36 .btn-bg {
background-color: #da5663;
}
.ad-slide-css-override-36 .h3 {
color: #fff;
}
.ad-slide-css-override-36 .ad-site-logo {
color: #F9CFD2;
fill: #fff;
}
#site-logo-indiancupid >path.logo-light {
fill: #fff;
color: #fff;
}
#site-logo-indiancupid >path.logo-dark {
fill: #F9CFD2;
color: #F9CFD2;
}
.ad-slide-css-override-37 .ad-slide-bg-skew,
.ad-slide-css-override-37 .ad-slide-bg-skew:after {
background-color: #b8d1e7;
}
.ad-slide-css-override-37 .logo-domain {
width: 130px;
height: 20px;
}
/*--theme-primary*/
.ad-slide-css-override-37 .btn-bg {
background-color: #548ab1;
}
.ad-slide-css-override-37 .h3 {
color: #222;
}
.ad-slide-css-override-37 .ad-site-logo {
color: #548ab1;
fill: #2f5875;
}
#site-logo-aussiecupid >path.logo-light {
fill: #548ab1;
color: #548ab1;
}
#site-logo-aussiecupid >path.logo-dark {
fill: #2f5875;
color: #2f5875;
}
.ad-slide-css-override-38 .ad-slide-bg-skew,
.ad-slide-css-override-38 .ad-slide-bg-skew:after {
background-color: #e9d17e;
}
.ad-slide-css-override-38 .logo-domain {
width: 140px;
height: 40px;
}
/*--theme-primary*/
.ad-slide-css-override-38 .btn-bg {
background-color: #ba4022;
}
.ad-slide-css-override-38 .h3 {
color: #222;
}
.ad-slide-css-override-38 .ad-site-logo {
color: #ca4727;
fill: #80331a;
}
#site-logo-caribbeancupid >path.logo-light {
fill: #ca4727;
color: #ca4727;
}
#site-logo-caribbeancupid >path.logo-dark {
fill: #80331a;
color: #80331a;
}
.ad-slide-css-override-39 .ad-slide-bg-skew,
.ad-slide-css-override-39 .ad-slide-bg-skew:after {
background-color: #a6d4a3;
}
.ad-slide-css-override-39 .logo-domain {
width: 175px;
height: 20px;
}
/*--theme-primary*/
.ad-slide-css-override-39 .btn-bg {
background-color: #477743;
}
.ad-slide-css-override-39 .h3 {
color: #222;
}
.ad-slide-css-override-39 .ad-site-logo {
color: #295829;
fill: #214B23;
}
#site-logo-iraniansinglesconnection >path.logo-light {
fill: #214B23;
color: #214B23;
}
#site-logo-iraniansinglesconnection >path.logo-dark {
fill: #295829;
color: #295829;
}
.ad-slide-css-override-40 .ad-slide-bg-skew,
.ad-slide-css-override-40 .ad-slide-bg-skew:after {
background-color: #d3e3f1;
}
.ad-slide-css-override-40 .logo-domain {
width: 125px;
height: 20px;
}
/*--theme-primary*/
.ad-slide-css-override-40 .btn-bg {
background-color: #4684b7;
}
.ad-slide-css-override-40 .h3 {
color: #222;
}
.ad-slide-css-override-40 .ad-site-logo {
color: #4684B7;
fill: #1E4F76;
}
#site-logo-malaysiancupid >path.logo-light {
fill: #4684B7;
color: #4684B7;
}
#site-logo-malaysiancupid >path.logo-dark {
fill: #1E4F76;
color: #1E4F76;
}
.ad-slide-css-override-41 .ad-slide-bg-skew,
.ad-slide-css-override-41 .ad-slide-bg-skew:after {
background-color: #5b5b18;
}
.ad-slide-css-override-41 .logo-domain {
width: 115px;
height: 20px;
}
/*--theme-primary*/
.ad-slide-css-override-41 .btn-bg {
background-color: #a2a240;
}
.ad-slide-css-override-41 .h3 {
color: #fff;
}
.ad-slide-css-override-41 .ad-site-logo {
color: #D2D27D;
fill: #fff;
}
#site-logo-kenyancupid >path.logo-light {
fill: #fff;
color: #fff;
}
#site-logo-kenyancupid >path.logo-dark {
fill: #D2D27D;
color: #D2D27D;
}
.ad-slide-css-override-42 .ad-slide-bg-skew,
.ad-slide-css-override-42 .ad-slide-bg-skew:after {
background-color: #490c2e;
}
.ad-slide-css-override-42 .logo-domain {
width: 170px;
height: 20px;
}
/*--theme-primary*/
.ad-slide-css-override-42 .btn-bg {
background-color: #954572;
}
.ad-slide-css-override-42 .h3 {
color: #fff;
}
.ad-slide-css-override-42 .ad-site-logo {
color: #e2c9de;
fill: #fff;
}
#site-logo-cambodiancupid >path.logo-light {
fill: #fff;
color: #fff;
}
#site-logo-cambodiancupid >path.logo-dark {
fill: #e2c9de;
color: #e2c9de;
}
/* EliteCupid */
.ad-slide-css-override-43 .ad-slide-bg-skew,
.ad-slide-css-override-43 .ad-slide-bg-skew:after {
background-color: #232E4D;
}
.ad-slide-css-override-43 .logo-domain {
width: 90px;
height: 20px;
}
/*--theme-primary*/
.ad-slide-css-override-43 .btn-bg {
background-color: #D6AD60;
}
.ad-slide-css-override-43 .h3 {
color: #fff;
}
.ad-slide-css-override-43 .ad-site-logo {
color: #D6AD60;
fill: #D6AD60;
}
#site-logo-elitecupid >path.logo-light {
fill: #D6AD60;
color: #D6AD60;
}
#site-logo-elitecupid >path.logo-dark {
fill: #D6AD60;
color: #D6AD60;
}
/* SilverLoveCupid */
.ad-slide-css-override-44 .ad-slide-bg-skew,
.ad-slide-css-override-44 .ad-slide-bg-skew:after {
background-color: #001427;
}
.ad-slide-css-override-44 .logo-domain {
width: 125px;
height: 16px;
}
/*--theme-primary*/
.ad-slide-css-override-44 .btn-bg {
background-color: #E00055;
}
.ad-slide-css-override-44 .h3 {
color: #fff;
}
.ad-slide-css-override-44 .ad-site-logo {
color: #E9F5FF;
fill: #E9F5FF;
}
#site-logo-silverlovecupid >path.logo-light {
fill: #E9F5FF;
color: #E9F5FF;
}
#site-logo-silverlovecupid >path.logo-dark {
fill: #E9D1DA;
color: #E9D1DA;
}
/* AstroCupid */
.ad-slide-css-override-45 .ad-slide-bg-skew,
.ad-slide-css-override-45 .ad-slide-bg-skew:after {
background-color: #fff;
}
.ad-slide-css-override-45 .logo-domain {
width: 93.9px;
height: 24.7px;
}
/*--theme-primary*/
.ad-slide-css-override-45 .btn-bg {
background-color: #C565C7;
}
.ad-slide-css-override-45 .h2,
.ad-slide-css-override-45 .h3 {
color: #323232;
}
.ad-slide-css-override-45 .ad-site-logo {
color: #A72BA5;
fill: #644DF2;
width: 52px;
height: 48px;
}
/* SDV Ads */
.ad-slide-css-override-1001 .ad-slide .h3 {
color: #3A3A3A;
}
.ad-slide-css-override-1001 .ad-slide-bg-skew,
.ad-slide-css-override-1001 .ad-slide-bg-skew:after {
background-color: #fff;
}
.ad-slide-css-override-1001 .logo-domain {
width: 100px;
height: 70px;
}
/*--theme-primary*/
.ad-slide-css-override-1001 .btn-bg {
background-color: #D4202D;
}
/* Amolatina */
.ad-slide-css-override-1002 .ad-slide .h3 {
color: #3A3A3A;
}
.ad-slide-css-override-1002 .ad-slide-bg-skew,
.ad-slide-css-override-1002 .ad-slide-bg-skew:after {
background-color: #fff;
}
.ad-slide-css-override-1002 .logo-domain {
width: 100px;
height: 70px;
}
/*--theme-primary*/
.ad-slide-css-override-1002 .btn-bg {
background-color: #D4202D;
}
/* DateMyAge */
.ad-slide-css-override-1003 .ad-slide .h3 {
color: #3A3A3A;
}
.ad-slide-css-override-1003 .ad-slide-bg-skew,
.ad-slide-css-override-1003 .ad-slide-bg-skew:after {
background-color: #fff;
}
.ad-slide-css-override-1003 .logo-domain {
width: 114px;
height: 26px;
}
/*--theme-primary*/
.ad-slide-css-override-1003 .btn-bg {
background-color: #FF5500;
}
/* ChinaLove */
.ad-slide-css-override-1004 .ad-slide .h3 {
color: #3A3A3A;
}
.ad-slide-css-override-1004 .ad-slide-bg-skew,
.ad-slide-css-override-1004 .ad-slide-bg-skew:after {
background-color: #fff;
}
.ad-slide-css-override-1004 .logo-domain {
width: 114px;
height: 26px;
}
/*--theme-primary*/
.ad-slide-css-override-1004 .btn-bg {
background-color: #CC1F4F;
}
/* YourTravelMates */
.ad-slide-css-override-1005 .ad-slide .h3 {
color: #3A3A3A;
}
.ad-slide-css-override-1005 .ad-slide-bg-skew,
.ad-slide-css-override-1005 .ad-slide-bg-skew:after {
background-color: #fff;
}
.ad-slide-css-override-1005 .logo-domain {
width: 114px;
height: 26px;
}
/*--theme-primary*/
.ad-slide-css-override-1005 .btn-bg {
background-color: #4636B2;
}
/* EuroDate */
.ad-slide-css-override-1006 .ad-slide .h3 {
color: #3A3A3A;
}
.ad-slide-css-override-1006 .ad-slide-bg-skew,
.ad-slide-css-override-1006 .ad-slide-bg-skew:after {
background-color: #fff;
}
.ad-slide-css-override-1006 .logo-domain {
width: 142px;
height: 33px;
}
/*--theme-primary*/
.ad-slide-css-override-1006 .btn-bg {
background-color: #214D81;
}
/* AsianDate */
.ad-slide-css-override-1007 .ad-slide .h3 {
color: #3A3A3A;
}
.ad-slide-css-override-1007 .ad-slide-bg-skew,
.ad-slide-css-override-1007 .ad-slide-bg-skew:after {
background-color: #fff;
}
.ad-slide-css-override-1007 .logo-domain {
width: 130px;
height: 47px;
}
/*--theme-primary*/
.ad-slide-css-override-1007 .btn-bg {
background-color: #B23256;
}
/* Russian Brides */
.ad-slide-css-override-1008 .ad-slide .h3 {
color: #3A3A3A;
}
.ad-slide-css-override-1008 .ad-slide-bg-skew,
.ad-slide-css-override-1008 .ad-slide-bg-skew:after {
background-color: #fff;
}
.ad-slide-css-override-1008 .logo-domain {
width: 130px;
height: 47px;
}
/*--theme-primary*/
.ad-slide-css-override-1008 .btn-bg {
background-color: #B80C27;
}
/* Anastasiadate */
.ad-slide-css-override-1009 .ad-slide .h3 {
color: #3A3A3A;
}
.ad-slide-css-override-1009 .ad-slide-bg-skew,
.ad-slide-css-override-1009 .ad-slide-bg-skew:after {
background-color: #fff;
}
.ad-slide-css-override-1009 .logo-domain {
width: 128px;
height: 77px;
}
/*--theme-primary*/
.ad-slide-css-override-1009 .btn-bg {
background-color: #004284;
}
/* Hotti */
.ad-slide-css-override-1010 .ad-slide .h3 {
color: #3A3A3A;
}
.ad-slide-css-override-1010 .ad-slide-bg-skew,
.ad-slide-css-override-1010 .ad-slide-bg-skew:after {
background-color: #fff;
}
.ad-slide-css-override-1010 .logo-domain {
width: 100px;
height: 45px;
}
/*--theme-primary*/
.ad-slide-css-override-1010 .btn-bg {
background: -webkit-linear-gradient(189.66deg, #FFDA29 -2.21%, #FF008B 98.44%);
background: linear-gradient(260.34deg, #FFDA29 -2.21%, #FF008B 98.44%);
}
/* African Date */
.ad-slide-css-override-1011 .ad-slide .h3 {
color: #3A3A3A;
}
.ad-slide-css-override-1011 .ad-slide-bg-skew,
.ad-slide-css-override-1011 .ad-slide-bg-skew:after {
background-color: #fff;
}
.ad-slide-css-override-1011 .logo-domain {
width: 130px;
height: 73px;
}
/*--theme-primary*/
.ad-slide-css-override-1011 .btn-bg {
background-color: #E14318;
}
/* AmalDate */
.ad-slide-css-override-1012 .ad-slide .h3 {
color: #3A3A3A;
}
.ad-slide-css-override-1012 .ad-slide-bg-skew,
.ad-slide-css-override-1012 .ad-slide-bg-skew:after {
background-color: #fff;
}
.ad-slide-css-override-1012 .logo-domain {
width: 110px;
height: 73px;
}
/*--theme-primary*/
.ad-slide-css-override-1012 .btn-bg {
background-color: #015B99;
}
/* Pina Date */
.ad-slide-css-override-1014 .ad-slide .h3 {
color: #3A3A3A;
}
.ad-slide-css-override-1014 .ad-slide-bg-skew,
.ad-slide-css-override-1014 .ad-slide-bg-skew:after {
background-color: #fff;
}
.ad-slide-css-override-1014 .logo-domain {
width: 160px;
height: 73px;
}
/*--theme-primary*/
.ad-slide-css-override-1014 .btn-bg {
background: -webkit-linear-gradient(183.82deg, #DB5A64 -28.23%, #FF2435 140.05%), -webkit-linear-gradient(189.66deg, #FFDA29 -2.21%, #FF008B 98.44%);
background: linear-gradient(266.18deg, #DB5A64 -28.23%, #FF2435 140.05%), linear-gradient(260.34deg, #FFDA29 -2.21%, #FF008B 98.44%);
}
/* OurLove */
.ad-slide-css-override-1015 .ad-slide .h3 {
color: #3A3A3A;
}
.ad-slide-css-override-1015 .ad-slide-bg-skew,
.ad-slide-css-override-1015 .ad-slide-bg-skew:after {
background-color: #fff;
}
.ad-slide-css-override-1015 .logo-domain {
width: 160px;
height: 73px;
}
/*--theme-primary*/
.ad-slide-css-override-1015 .btn-bg {
background-color: #F44001;
}
.site-logo {
color: #8a804a;
fill: #a11d21;
}
.homeD .site-logo {
color: #8a804a;
fill: #000;
}
.site-logo-on-white {
color: #5A2823;
fill: #b15d51;
}
.logo-left {
fill: #8a804a;
color:#8a804a;
}
.logo-right{
fill: #a11d21;
color: #a11d21;
}
.logo-left-on-white {
fill: #8A804A;
color:#8A804A;
}
.logo-right-on-white {
fill: #A11D21;
color: #A11D21;
}
.logo-light {
fill: #8a804a;
color:#8a804a;
}
.logo-dark {
fill: #a11d21;
color: #a11d21;
}
.corp-cupid-logo {
fill: #767273;
color: #942923;
}
.logo-heart {
width: 38px;
height: 34px;
}
.homeD .logo-heart {
width: 32px;
height: 28px;
}
.logo-domain {
width: 150px;
height: 20px;
}
.on-white {
fill: #F1DADD;
}
/* iPad */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
.logo-domain {
width: var(--logo-width-tablet);
height: var(--logo-height-tablet);
}
}
.logo-domain-eurocupid {
width: 122px;
height: 24px;
}
/* select all class that start with more-menu */
.more-menu-text {
width: 200px;
opacity: 0;
visibility: hidden;
display: none;
top: 105%;
z-index: 2;
-webkit-transition: opacity 0.2s cubic-bezier(0.64, 0.09, 0.08, 1), -webkit-transform 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
transition: opacity 0.2s cubic-bezier(0.64, 0.09, 0.08, 1), -webkit-transform 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
transition: opacity 0.2s cubic-bezier(0.64, 0.09, 0.08, 1), transform 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
transition: opacity 0.2s cubic-bezier(0.64, 0.09, 0.08, 1), transform 0.2s cubic-bezier(0.64, 0.09, 0.08, 1), -webkit-transform 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
}
.more-menu-overlay{
position: relative;
height: 0;
width: 0;
}
.more-menu .more-menu-overlay {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.more-menu ~ .more-menu-text {
display: block;
opacity: 1;
visibility: visible;
}
.more-menu ~ .more-menu-text-center {
left: 50%;
-webkit-transform: translateX(-50%) translateY(0);
transform: translateX(-50%) translateY(0);
-webkit-transition-duration: 0s;
transition-duration: 0s;
}
.more-menu ~ .more-menu-text-left {
left: 0;
}
.more-menu ~ .more-menu-text-right,
[dir=rtl] .more-menu ~ .more-menu-text-left {
left: auto;
right: 0;
}
[dir=rtl] .more-menu ~ .more-menu-text-right {
left: 0;
right: auto;
}
.more-menu a {
color: #fff;
text-decoration: underline;
}
.more-menu-text button {
color: #fff;
background-color: transparent;
border: none;
}
.more-menu-text-width-auto {
width: auto;
}
.more-menu ~ .more-menu-text-bottom {
top: 100%;
}
.more-menu ~ .more-menu-text-top {
top: 15%;
}
.more-menu ~ .more-menu-text-above {
top: -130%;
}
/* SDV Cross Promo */
.hero-image.sdv-crosspromo {
background-size: cover;
}
.section-top::before{
content:"";
width: 100%;
min-height: 97.5vh;
display: block;
position: absolute;
background-image: url(var(--hero-image-female));
background-size: cover;
background-position: 50% 65%;
background-attachment: fixed;
}
.section-top-crosssite::before{
min-height: 100vh;
}
.sdv-dating .btn-bg {
background-color: #D4202D;
}
.sdv-dating .btn-color {
color: #fff;
}
.sdv-dating.section-top.female::before {
background-image: url(/assets/sdv/1001/heros/desktop/female.jpg);
}
.sdv-dating.section-top.male::before {
background-image: url(/assets/sdv/1001/heros/desktop/male.jpg);
}
.rounded-top-2 {
border-radius: 2rem 2rem 0 0;
}
.sdv .logo-wrapper {
margin-top: -60px;
padding-top: 8px;
width: 88px;
height: 88px;
}
.sdv .title {
margin-top: -36px;
}
.sdv .logo-domain-dating {
width: auto;
height: 40px;
}
/* amolatina */
.sdv-amolatina.section-top.female::before {
background-image: url(/assets/sdv/1002/heros/desktop/female.jpg);
}
.sdv-amolatina.section-top.male::before {
background-image: url(/assets/sdv/1002/heros/desktop/male.jpg);
}
.sdv-amolatina .btn-bg {
background-color: #D4202D;
}
.sdv-amolatina .btn-color {
color: #fff;
}
.sdv-amolatina .logo-wrapper {
width: 114px;
}
.sdv-amolatina .logo-domain-amolatina {
width: 70%;
height: 40px;
}
/* datemyage */
.sdv-datemyage.section-top.female::before {
background-image: url(/assets/sdv/1003/heros/desktop/female.jpg);
}
.sdv-datemyage.section-top.male::before {
background-image: url(/assets/sdv/1003/heros/desktop/male.jpg);
}
.sdv-datemyage .btn-bg {
background-color: #FF5500;
}
.sdv-datemyage .btn-color {
color: #fff;
}
.sdv-datemyage .logo-wrapper {
width: 114px;
}
.sdv-datemyage .logo-domain-datemyage {
width: 70%;
height: 40px;
}
/* ZenDate */
.sdv-zendate .logo-wrapper {
width: 114px;
}
.sdv-zendate .logo-domain-zendate {
width: 70%;
height: 50px;
}
.sdv-zendate.section-top.female::before {
background-image: url(/assets/sdv/1004/heros/desktop/female.jpg);
}
.sdv-zendate.section-top.male::before {
background-image: url(/assets/sdv/1004/heros/desktop/male.jpg);
}
.sdv-zendate .btn-bg {
background-color: #CC1F4F;
}
.sdv-zendate .btn-color {
color: #fff;
}
/* YourTravelMates */
.sdv-yourtravelmates .logo-wrapper {
width: 114px;
}
.sdv-yourtravelmates .logo-domain-yourtravelmates {
width: 70%;
height: 50px;
}
.sdv-yourtravelmates.section-top.female::before {
background-image: url(/assets/sdv/1005/heros/desktop/female.jpg);
}
.sdv-yourtravelmates.section-top.male::before {
background-image: url(/assets/sdv/1005/heros/desktop/male.jpg);
}
.sdv-yourtravelmates .btn-bg {
background-color: #4636B2;
}
.sdv-yourtravelmates .btn-color {
color: #fff;
}
/* EuroDate */
.sdv-eurodate .logo-wrapper {
width: 114px;
}
.sdv-eurodate .logo-domain-eurodate {
width: 70%;
height: 50px;
}
.sdv-eurodate.section-top.female::before {
background-image: url(/assets/sdv/1006/heros/desktop/female.jpg);
}
.sdv-eurodate.section-top.male::before {
background-image: url(/assets/sdv/1006/heros/desktop/male.jpg);
}
.sdv-eurodate .btn-bg {
background-color: #214D81;
}
.sdv-eurodate .btn-color {
color: #fff;
}
/* AsianDate */
.sdv-asiandate .logo-wrapper {
width: 114px;
}
.sdv-asiandate .logo-domain-asiandate {
width: 70%;
height: 50px;
}
.sdv-asiandate.section-top.female::before {
background-image: url(/assets/sdv/1007/heros/desktop/female.jpg);
}
.sdv-asiandate.section-top.male::before {
background-image: url(/assets/sdv/1007/heros/desktop/male.jpg);
}
.sdv-asiandate .btn-bg {
background-color: #B23256;
}
.sdv-asiandate .btn-color {
color: #fff;
}
/* Russian Brides */
.sdv-russianbrides .logo-wrapper {
width: 114px;
}
.sdv-russianbrides .logo-domain-russianbrides {
width: 70%;
height: 50px;
}
.sdv-russianbrides.section-top.female::before {
background-image: url(/assets/sdv/1008/heros/desktop/female.jpg);
}
.sdv-russianbrides.section-top.male::before {
background-image: url(/assets/sdv/1008/heros/desktop/male.jpg);
}
.sdv-russianbrides .btn-bg {
background-color: #B80C27;
}
.sdv-russianbrides .btn-color {
color: #fff;
}
/* Anastasiadate */
.sdv-anastasiadate .logo-wrapper {
width: 114px;
}
.sdv-anastasiadate .logo-domain-anastasiadate {
width: 70%;
height: 47px;
}
.sdv-anastasiadate.section-top.female::before {
background-image: url(/assets/sdv/1009/heros/desktop/female.jpg);
}
.sdv-anastasiadate.section-top.male::before {
background-image: url(/assets/sdv/1009/heros/desktop/male.jpg);
}
.sdv-anastasiadate .btn-bg {
background-color: #004284;
}
.sdv-anastasiadate .btn-color {
color: #fff;
}
/* Hotti */
.sdv-hotti .logo-wrapper {
width: 114px;
}
.sdv-hotti .logo-domain-hotti {
width: 70%;
height: 47px;
}
.sdv-hotti.section-top.female::before {
background-image: url(/assets/sdv/1010/heros/desktop/female.jpg);
}
.sdv-hotti.section-top.male::before {
background-image: url(/assets/sdv/1010/heros/desktop/male.jpg);
}
.sdv-hotti .btn-bg {
background: -webkit-linear-gradient(189.66deg, #FFDA29 -2.21%, #FF008B 98.44%);
background: linear-gradient(260.34deg, #FFDA29 -2.21%, #FF008B 98.44%);
}
.sdv-hotti .btn-color {
color: #fff;
}
/* African Date */
.sdv-africandate .logo-wrapper {
width: 114px;
}
.sdv-africandate .logo-domain-africandate {
width: 70%;
height: 47px;
}
.sdv-africandate.section-top.female::before {
background-image: url(/assets/sdv/1011/heros/desktop/female.jpg);
}
.sdv-africandate.section-top.male::before {
background-image: url(/assets/sdv/1011/heros/desktop/male.jpg);
}
.sdv-africandate .btn-bg {
background-color: #E14318;
}
.sdv-africandate .btn-color {
color: #fff;
}
/* AmalDate */
.sdv-amaldate .logo-wrapper {
width: 114px;
}
.sdv-amaldate .logo-domain-amaldate{
width: 70%;
height: 47px;
}
.sdv-amaldate.section-top.female::before {
background-image: url(/assets/sdv/1012/heros/desktop/female.jpg);
}
.sdv-amaldate.section-top.male::before {
background-image: url(/assets/sdv/1012/heros/desktop/male.jpg);
}
.sdv-amaldate .btn-bg {
background-color: #015B99;
}
.sdv-amaldate .btn-color {
color: #fff;
}
/* Pina Date */
.sdv-pinadate .logo-wrapper {
width: 114px;
}
.sdv-pinadate .logo-domain-pinadate {
width: 70%;
height: 47px;
}
.sdv-pinadate.section-top.female::before {
background-image: url(/assets/sdv/1014/heros/desktop/female.jpg);
}
.sdv-pinadate.section-top.male::before {
background-image: url(/assets/sdv/1014/heros/desktop/male.jpg);
}
.sdv-pinadate .btn-bg {
background: -webkit-linear-gradient(183.82deg, #DB5A64 -28.23%, #FF2435 140.05%), -webkit-linear-gradient(189.66deg, #FFDA29 -2.21%, #FF008B 98.44%);
background: linear-gradient(266.18deg, #DB5A64 -28.23%, #FF2435 140.05%), linear-gradient(260.34deg, #FFDA29 -2.21%, #FF008B 98.44%);
}
.sdv-pinadate .btn-color {
color: #fff;
}
/* OurLove */
.sdv-ourlove .logo-wrapper {
width: 114px;
}
.sdv-ourlove .logo-domain-ourlove {
width: 70%;
height: 47px;
}
.sdv-ourlove.section-top.female::before {
background-image: url(/assets/sdv/1015/heros/desktop/female.jpg);
}
.sdv-ourlove.section-top.male::before {
background-image: url(/assets/sdv/1015/heros/desktop/male.jpg);
}
.sdv-ourlove .btn-bg {
background-color: #F44001;
}
.sdv-ourlove .btn-color {
color: #fff;
}
.chat-sparks-options {
height: 90px;
overflow: hidden;
}
.chat-sparks-options.open {
height: 180px;
overflow: auto;
background-color: #fff;
margin-top: -90px;
-webkit-box-shadow: 0 -3px 8px 0 rgba(0, 0, 0, 0.10);
box-shadow: 0 -3px 8px 0 rgba(0, 0, 0, 0.10);
}
.chat-sparks-options.open .rotate-180{
-webkit-transform: rotate(0);
transform: rotate(0);
}
#streaming-stream-watching-layout{
top:0;
left:0;
width: 100%;
}
.h1-questionnaire {
font-size: 2.5rem;
color: #b15d51;
}
[name="questionnaire"] .h2 {
font-weight: 400;
}
.image-questionnaire {
width: 160px;
height: 160px;
background-repeat: no-repeat;
background-position: center;
}
[name="questionnaire"] [type=radio]:checked ~ img {
border-color: #b15d51;
border-width: 2px;
border-style: solid;
}
[name="questionnaire"] [data-count]:after {
content: '';
position: absolute;
font-size: 0;
padding: 0;
background: #D6AD60;
color: #fff;
border-radius: 0;
line-height: 0;
right: 0;
top: 0;
text-shadow: none;
-webkit-transform: translateY(0);
transform: translateY(0);
}
.active-questionnaire,
.active-questionnaire .content {
background-color: #f8f8f8;
}
[name="questionnaire"] .header-strip {
min-height: 8px;
}
.break,
.break .h1-questionnaire,
.break p {
color: #fff;
}
.background-image{
background-position: center;
background-size: cover;
background-repeat: no-repeat;
z-index: -1;
}
.background-image .overlay {
background-color: rgba(0,0,0,0.5);
}
.bg-transparent {
background-color: transparent !important;
}
/* Profile Boost */
.boost {
color: #8447FF !important;
}
.bg-boost {
background-color: #8447FF;
}
.bg-boosted {
background-color: #F5F0FF;
}
.border-boost {
border-color: #8447FF;
}
.border-width-2 {
border-width: 2px;
}
.profile-boost-warning {
margin-top: -1rem;
padding-left: 33px;
}
[dir='RTL'] {
.profile-boost-warning {
padding-left: 0;
padding-right: 33px;
}
}
.icon-popup-banner {
min-width: 208.1px;
min-height: 146px;
}
.bg-progress {
background-color: #E9E9E9;
}
.bg-progress-complete {
background-color: #b15d51
}
.progress {
height: 4px;
}
.bg-shortQuestionnaire {
background-color: #f8f8f8;
}
.header-short-questionnaire {
height: 56px;
}
.h1-short-questionnaire {
font-size: 60px;
font-weight: 600;
color: #b15d51;
}
.h2-short-questionnaire {
font-size: 20px;
font-weight: 600;
}
.p-short-questionnaire {
font-size: 14px;
font-weight: 400;
}
.short-questionnaire-color {
color: #323232;
}
.short-questionnaire-margin-top {
margin-top: 30px
}
.short-questionnaire-margin-bottom {
margin-bottom: 80px
}
.h3-short-questionnaire {
font-size: 20px;
font-weight: 400;
}
.h3-short-questionnaire .highlight {
color: #b15d51;
}
.card-short-questionnaire {
width: 235px;
height: 289px;
}
.short-questionnaire [type=checkbox] ~ .theme .unchecked,
.short-questionnaire [type=radio] ~ .radio-theme .unchecked
{
color: #fff;
fill: #b15d51;
}
.short-questionnaire-skip {
position: absolute;
color: #222 !important;
font-size: 16px;
font-weight: 700;
}
.short-questionnaire-select {
border: 0 !important;
padding: 16px 8px;
border-radius: 0;
background: #fff url('data:image/svg+xml;utf8,') no-repeat 100% 65%;
}
#shortQuestionnaire .profile-bg {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
-webkit-print-color-adjust: exact;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
.short-questionnaire [type=radio]:checked ~ .border-selected {
border-color: #b15d51;
-webkit-box-shadow: 0 0 0 1px #b15d51;
box-shadow: 0 0 0 1px #b15d51;
}
[dir=ltr] .short-questionnaire .radio-astro {
-webkit-transform: translate(5px, 5px);
transform: translate(5px, 5px);
}
[dir=rtl] .short-questionnaire .radio-astro {
-webkit-transform: translate(-5px, 5px);
transform: translate(-5px, 5px);
}
.short-questionnaire [type=radio]:not(checked) ~ .radio-astro {
display: none;
}
.short-questionnaire [type=radio]:checked ~ .radio-astro {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: absolute;
}
.skeleton .h3 {
height: 1.25rem
}
.skeleton .h5 {
height: 0.875rem;
}
.skeleton .bg-skeleton {
background: -webkit-gradient(linear, left top, right top, from(#e0e0e0), color-stop(#f1f1f1), to(#e0e0e0));
background: -webkit-linear-gradient(left, #e0e0e0, #f1f1f1, #e0e0e0);
background: linear-gradient(90deg, #e0e0e0, #f1f1f1, #e0e0e0);
background-size: 600% 600%;
-webkit-animation: flash 4s ease infinite;
animation: flash 4s ease infinite;
}
.skeleton .bg-light-grey {
background-color: #e0e0e0;
}
.skeleton .actions .icon {
height: 30px;
width: 30px;
}
@-webkit-keyframes flash {
0% { background-position: 0 50%; }
50% { background-position: 100% 51%; }
100% { background-position: 0 50%; }
}
@keyframes flash {
0% { background-position: 0 50%; }
50% { background-position: 100% 51%; }
100% { background-position: 0 50%; }
}
/* For cross site member join landing page */
.discount-badge-landing {
position: absolute;
top: -18px;
}
[dir=rtl] .discount-badge-landing {
left: -16px;
}
[dir=ltr] .discount-badge-landing {
right: -16px;
}
/* For cross promo ad banners */
.discount-badge-banner {
position: absolute;
top: 4px;
z-index: 2;
}
[dir=rtl] .discount-badge-banner {
left: 4px;
}
[dir=ltr] .discount-badge-banner {
right: 4px;
}
/* For cupid passport page */
.discount-badge-passport {
position: absolute;
top: -14px;
}
[dir=rtl] .discount-badge-passport {
right: -16px;
}
[dir=ltr] .discount-badge-passport {
left: -16px;
}
/* For cross promo modal */
.discount-badge-modal {
position: absolute;
bottom: 4px;
}
[dir=rtl] .discount-badge-modal {
left: 4px;
}
[dir=ltr] .discount-badge-modal {
right: 4px;
}
apple-pay-button {
--apple-pay-button-width: 150px;
--apple-pay-button-height: 30px;
--apple-pay-button-border-radius: 3px;
--apple-pay-button-padding: 0px 0px;
--apple-pay-button-box-sizing: border-box;
}
/*@TODO: find a home for these styles*/
/*basscss does not handle RTL*/
[dir=rtl] .left-align {
text-align: right;
}
[dir=rtl] .right-align {
text-align: left;
}
[dir=rtl] .rounded-left {
border-radius: 0 .25rem .25rem 0
}
[dir=rtl] .rounded-right {
border-radius: .25rem 0 0 .25rem
}
[dir=rtl] .border-left {
border-right-style: solid;
border-right-width: 1px;
border-left-style: none;
}
[dir=rtl] .border-right {
border-left-style: solid;
border-left-width: 1px;
border-right-style: none;
}
.line-clamp {
line-height: 1.3;
min-height: 3.9em;
}
/*
Fix for basscss 8.0.1
Remove once this is fixed in the library
*/
.flex-auto {
min-width: -webkit-min-content;
min-width: -moz-min-content;
min-width: min-content;
min-height: -webkit-min-content;
min-height: -moz-min-content;
min-height: min-content;
}
.oas .flex-auto {
min-width: auto;
min-height: auto;
}
/*UCWEB*/
template {
display: none !important;
}
/*OAS*/
address,
article,
aside,
div,
footer,
header,
hgroup,
layer,
main,
nav,
section {
display: block;
}
/* Android WebView fix for images set with a negative width #NMWA-104 */
* {
min-width: 0px;
}
body {
scroll-behavior: smooth;
}
svg:not(:root) {
overflow: hidden;
}
/* Aditional classes for basscss */
.mb5 {
margin-bottom: 4.5rem;
}
.mb6 {
margin-bottom: 5rem;
}
a,
button,
.overlay {
cursor: pointer;
}
a {
display: inline-block;
}
img[src$=png] {
-webkit-transform: translateZ(0);
}
.prevent-collapse::before,
.prevent-collapse::after {
content: ' ';
display: table;
}
/*
Import common custom properties (variables)
(we want to get the font family);
*/
/*@import '../css/theme/default/common';*/
/*jqm overrides*/
.ui-mobile-viewport .navbar {
/*transform: translate(0);*/
}
[data-role=page] {
padding-top: 44px;
}
/*override h1*/
.navbar .title {
text-shadow: none;
}
#menu h1, #menu h2 {
text-shadow: none;
}
/*jqm override*/
.ui-loader {
display: none !important;
z-index: -1 !important;
}
/*override h1*/
.menu-footer {
text-shadow: none;
}
.menu-footer a {
min-height: 50px;
}
.menu-footer * {
margin: 0;
}
/*Include our own font stack*/
.ui-body-c, .ui-body-c input, .ui-body-c select, .ui-body-c textarea, .ui-body-c button, body {
font-family: 'Roboto','Fira Sans','Helvetica Neue', Helvetica, sans-serif;
}
/* Specific fixes to make JQM carry on working till JQM pages removed */
/* upgrade page */
form#upgradeForm table#priceTable td,
form#upgradeForm table#priceTable th {
vertical-align: middle;
padding: 0;
}
form#upgradeForm table#priceTable td.platinumhbg,
form#upgradeForm table#priceTable td.goldhbg {
padding: 0 0 0 8px;
}
/* old JQM used left and right classes for lanuage layout */
form#upgradeForm table#priceTable td.left,
form#upgradeForm table#priceTable th.left,
form#upgradeForm table#priceTable td.right,
form#upgradeForm table#priceTable th.right{
float: none;
}
/* Fixing Nav bar links for JQM while they are still needed */
div.navbar a#editMail {
color: #333333;
font-weight: normal;
padding-right: 6px;
}
/* Custom media queries */
/*
@custom-media --breakpoint-sm (min-width: 40em);
@custom-media --breakpoint-md (min-width: 52em);
@custom-media --breakpoint-lg (min-width: 64em);
*/
/* Custom properties */
/* Limited-view blur overlay (used to avoid inline backdrop-filter duplication) */
.limited-view-blur {
backdrop-filter: blur(8px);
z-index: 1;
}
.bg-red {
background-color: #c23b2d;
}
.bg-red-lighten {
background-color: #ea7b7b;
}
.bg-red-brighter {
background-color: #EF2917;
}
.bg-green {
background-color: #70bb46;
}
.bg-standard {
background-color: #565656;
}
.bg-gold {
background-color: #dcbc0c;
}
.bg-gold-tint {
background-color: #FFFDFA;
}
.bg-gold-alpha-1 {
background-color: #EC9E181A;
}
.bg-platinum {
background-color: #2a3393;
}
.bg-platinum-tint {
background-color: #F9F9FD;
}
.bg-platinum-alpha-1 {
background-color: #2A33931A;
;
}
.bg-diamond {
background-color: #000000;
}
.bg-diamond-tint {
background-color: #F3F3F3;
}
.bg-diamond-alpha-1 {
background-color: #f8f8f8;
}
.bg-green-lighten {
background-color: #e5f3de;
}
.bg-blue {
background-color: #34495e;
}
.bg-yellow {
background-color: rgb(243, 156, 18);
}
.bg-yellow-lighten {
background-color: #ecce45;
}
.bg-white {
background-color: #fff;
}
.bg-warm-gray {
background-color: #e1e1e1;
}
.bg-gray {
background-color: rgba(0,0,0,0.25);
}
.bg-light-grey {
background-color: #e9e9e9;
}
.bg-light-silver {
background-color: #F8F8F8;
}
.bg-error {
background-color: #F9EDED;
}
.bg-black-alpha-8 {
background-color: rgba(0,0,0,0.8);
}
.bg-black-alpha-5 {
background-color: rgba(0,0,0,0.5);
}
.bg-action-highlight {
background-color: #b15d51;
}
.bg-white-alpha-75 {
background: rgba(255,255,255,0.75);
}
.bg-highlight {
background-color: rgba(255,65,54, 0.05);
}
.bg-draft-mode {
background-color: #f8efef;
}
.bg-white-alpha-80 {
background: rgba(255,255,255,0.80);
}
.bg-white-alpha-90 {
background: rgba(255,255,255,0.90);
}
.bg-off-white {
background: #f8f8f8;
}
.bg-discount-badge-red {
background: #FF3B30;
}
.border-color {
border-color: #d1d1d1;
}
.border-theme {
border-color: #F1DADD;
}
.checked\:border-theme:has(:checked) {
border-color: #b15d51;
}
.border-color-silver {
border-color: #EBEBEB;
}
.border-light-gray {
border-color: #D8D8D8;
}
.border-color-match {
border-color: #9ec46d;
}
.border-gold {
border-color: #dcbc0c;
}
.border-platinum {
border-color: #2a3393;
}
.border-diamond {
border-color: #000000;
}
.border-width-2 {
border-width: 2px;
}
.border-width-4 {
border-width: 4px;
}
.red {
color: #c23b2d;
fill: #c23b2d;
}
.red-lighter {
color: #EF2917;
}
.text-red {
color: #c23b2d;
}
.red-darken {
color: #881515;
fill: #881515;
}
.green {
color: #70bb46;
fill: #70bb46;
}
.green-darken {
color: #3c763d;
fill: #3c763d;
}
.blue {
color: #34495e;
fill: #34495e;
}
.yellow {
color: rgb(243, 156, 18);
fill: rgb(243, 156, 18);
}
.white {
color: #fff;
fill: #fff;
}
.gray {
color:rgba(0,0,0,0.5);
}
.gray-darken {
color: #565656;
fill: #565656;
}
.gray-medium {
color: #aaa;
fill: #aaa;
}
.black {
color: #000;
}
.body-color {
color: #565656;
}
.body-color a{
font-weight: bold;
}
.transparent {
color: transparent;
}
.theme-color {
color: #222;
fill: #222;
}
.theme-primary {
color: #F1DADD;
fill: #F1DADD;
}
.bg-theme-primary-text {
color: #333333;
fill: #333333;
}
.theme-segmented {
color: #B03D40;
fill: #B03D40;
}
.theme-primary-color {
color: #F1DADD;
}
.bg-theme-primary {
background-color: #F1DADD;
}
.bg-theme-alpha-05 {
background-color: rgba(177,93,81, 0.05);
}
.bg-theme-dark {
background-color: #5A2823;
}
.bg-header-background {
background-color: #F1DADD;
}
.bg-login {
background-color: #F1DADD;
}
.theme-secondary-text {
color: #C24A4D;
}
.color-action-highlight-transparent {
color: rgba(177,93,81, 0.8);
}
.color-dark-grey {
color: #323232;
}
.bg-dark-grey {
background: #505656;
}
.color-medium-grey {
color: #797c7e;
}
.color-light-grey {
color: #eee;
fill: #eee;
}
.color-medium-grey {
color: #797c7e;
}
.color-white {
color: #fff;
}
.color-action-highlight {
color: #b15d51;
}
.fill-action-unhighlight {
fill: #767273;
}
.fill-action-highlight {
fill: #b15d51;
}
.fill-green {
fill: #70bb46;
}
.fill-white {
fill: #fff;
}
.fill-grey {
fill: #a19e9e;
}
.fill-red {
fill: #c23b2d;
}
.fill-theme-primary {
fill: #b15d51;
}
.fill-theme-dark {
fill: #5A2823;
}
.fill-orange {
fill: #c78515;
}
.fill-discount-badge {
fill: #FF3B30;
}
.fill-gold {
fill: #dcbc0c;
}
.fill-platinum {
fill: #2a3393;
}
.fill-diamond {
fill: #000000;
}
/*
@TODO: Polyfill required for min-height property in .fit-height
*/
.fit-height {
min-height: 100vh;
}
.max-height {
max-height: 100vh;
}
.bg-theme-logo-dark {
background-color: #a11d21;
}
.bg-theme-color,
.bg-theme {
background-color: #b15d51;
}
.bg-theme-color-text {
color: #fff;
fill: #fff;
}
.bg-nav-footer-color {
background-color: #b15d51;
}
.nav-footer-color {
color: #fff;
}
.bg-social-facebook {
background-color: #1877F2;
color: white;
fill: white;
font-size:4.2vw;
}
.bg-social-google {
background-color: white;
color: gray;
fill: gray;
font-size:4.2vw;
}
.bg-background-facebook {
background: #dce6f6;
}
.bg-silver {
background: #ededed;
}
.btn-primary {
background: #70bb46;
color: #fff;
font-size:4.2vw;
}
.btn-color{
color: #333333;
}
.btn-bg {
background-color: #b15d51;
}
/*Typography*/
.letter-spacing {
letter-spacing: 0.1rem;
}
.columns {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}
.upper-case {
text-transform: uppercase;
}
.pre-line {
white-space: pre-line;
}
.pre-wrap {
white-space: pre-wrap;
}
/* new member */
.new-member {
padding: 4px;
line-height: 12px;
}
.minus-top-12 {
margin-top: -12px;
}
.minus-top-27 {
margin-top: -27px;
}
.minus-top-100 {
margin-top: -100px;
}
.margin-top-minus-24 {
margin-top: -24px;
}
/*cross site join list*/
.crosssitejoin li:first-child {
border-top:none;
}
.opacity-0 {
opacity: 0;
}
.opacity-4 {
opacity: 0.4;
}
.opacity-6 {
opacity: 0.6;
}
.opacity-8 {
opacity: 0.8;
}
/* basscss override */
.caps {
letter-spacing: 0;
}
.mx1-5 {
margin-right: 0.75rem;
margin-left: 0.75rem;
}
.mt1-5 {
margin-top: 0.75rem;
}
.mb1-5 {
margin-bottom: 0.75rem;
}
.mb2-5 {
margin-bottom: 1.5rem;
}
.mt2-5 {
margin-top: 1.5rem;
}
.p1-5 {
padding: 0.75rem;
}
.p2-25 {
padding: 1.25rem;
}
.p2-5 {
padding: 1.5rem;
}
.pb2-5 {
padding-bottom: 1.5rem;
}
.pt2-5 {
padding-top: 1.5rem;
}
.py05 {
padding-top: .25rem;
padding-bottom: .25rem;
}
.top-20 {
top: 20px;
}
/* Profile switch off button */
.switchOff {
color: #c23b2d;
}
.icon-10 {
width: 10px;
height: 10px;
}
.icon-14 {
width: 14px;
height: 14px;
}
.icon-16 {
width: 16px;
height: 16px;
}
.icon-20 {
width: 20px;
height: 20px;
}
.icon-30 {
width: 30px;
height: 30px;
}
.icon-34 {
width: 34px;
height: 34px;
}
.icon-40 {
width: 40px;
height: 40px;
}
.icon-46 {
width: 46px;
height: 46px;
}
.icon-50 {
width: 50px;
height: 50px;
}
.icon-56 {
width: 56px;
height: 56px;
}
.icon-70 {
width: 70px;
height: 70px;
}
.icon-80 {
width: 80px;
height: 80px;
}
.icon-120 {
width: 120px;
height: 120px;
}
.icon-100 {
width: 100px;
height: 100px;
}
.rotate-45 {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.icon-max-height-90 {
max-height: 90px;
}
.icon-max-height-110 {
max-height: 110px;
}
.shadow {
-webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.4);
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.4);
}
.btn-color {
color: #fff;
}
.highlight {
color: #0074d9;
}
.action-highlight {
color: #b15d51;
}
.link-color a {
color: #b15d51;
text-decoration: none;
}
.google-btn-bg {
background-color: #4285f4;
}
.google-icon {
padding: 0.7rem 1rem;
}
.google-btn-border {
border: 1px solid #4285f4;
}
.gdpr-banner {
bottom: 0;
border-bottom-width: 0;
border-top-width: 1px;
border-top-style: solid;
-webkit-animation: slide-in-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: slide-in-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.nav-pinned .gdpr-banner {
top: 44px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-top-width: 0;
bottom: auto;
-webkit-animation: slide-in-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: slide-in-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.icon-long-arrow {
height: 40px;
width: auto;
}
.diamond-right {
right: 60px;
}
.rotate-180 {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.overlay-7 {
background-color: rgba(0,0,0,0.7)
}
.vertical-text {
-webkit-writing-mode: vertical-lr;
-ms-writing-mode: tb-lr;
writing-mode: vertical-lr;
}
[dir=rtl] .vertical-text {
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
}
/* Button highlight */
button:not([data-ignore-daw-styles]):focus::after,
.button:focus::after,
button:not([data-ignore-daw-styles]):active::after,
.button:active::after {
background-color: #000;
content: "";
width: 50px;
height: 50px;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
right: 0;
bottom: 0;
margin: -25px 0 0 -25px;
opacity: 0;
-webkit-animation: button-highlight 300ms;
animation: button-highlight 300ms;
pointer-events: none;
}
button:focus,
.button:focus,
button:active,
.button:active {
outline: 0;
}
.max-width-85 {
max-width: 85%;
}
.show-hide {
top: -1px;
right: -1px;
width: 39px;
height: 39px;
}
[dir=rtl] .show-hide {
right: auto;
left: -1px;
}
.bold-a a{
font-weight: bold;
}
.pointer-events-none {
pointer-events: none;
}
.pill {
border-radius: 30px;
}
.pill svg {
width: 30px;
height: 30px;
cursor: pointer;
}
.pill a {
text-decoration: none;
color: inherit;
}
.min-height-2 {
min-height: 10vh;
}
.min-height-4 {
min-height: 30vh;
}
.min-height-10 {
min-height: 80vh;
}
.min-height-12 {
min-height: 100vh;
}
.bg-img-fit {
background-size: cover;
background-position: center;
}
.rounded-2 {
border-radius: 0.5rem;
}
.rounded-full {
border-radius: 1000px;
}
.responsive-iframe {
aspect-ratio: 16 / 9;
width: 100%;
}
/*google sign-in override*/
#google-signin2 .abcRioButton{
width: auto !important;
}
#google-signin2 .abcRioButtonContents {
font-size: inherit !important;
font-weight: inherit;
}
.font-weight-500 {
font-weight: 500;
}
.font-weight-600 {
font-weight: 600;
}
.x-small-text {
font-size: 10px;
}
.divider {
height: 2px;
width: 100%;
}
.tab-bottom-minus-2 {
margin-bottom: -2px;
}
.membership-carousel{
overflow: auto;
min-width: 100%;
max-width: 100%;
scroll-behavior: smooth;
-ms-scroll-snap-type: x mandatory;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
}
.snap-align-center {
scroll-snap-align: center;
}
/*# sourceMappingURL=chinalovecupid-base.css.map */