@import url(//fonts.googleapis.com/earlyaccess/notosanssc.css);
@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);
/* Basscss Modules */
/*! Basscss | http://basscss.com | MIT License */
/* 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: 0.25rem }
.circle { border-radius: 50% }
.rounded-top { border-radius: 0.25rem 0.25rem 0 0 }
.rounded-right { border-radius: 0 0.25rem 0.25rem 0 }
.rounded-bottom { border-radius: 0 0 0.25rem 0.25rem }
.rounded-left { border-radius: 0.25rem 0 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 }
/* Site Theme */
/* Custom media queries */
/*
@custom-media --breakpoint-sm (min-width: 40em);
@custom-media --breakpoint-md (min-width: 52em);
@custom-media --breakpoint-lg (min-width: 64em);
*/
h1,
h3,
.tagline {
color: #565656;
}
/* Custom properties */
html {
height: 100%;
}
body {
font-family: 'Roboto', sans-serif;
min-height: 100%;
}
[lang=my] body {
line-height: 1.4rem;
}
html,
body {
min-width: 768px;
}
footer {
font-size: 14px;
font-weight: 300;
}
a,
a:visited,
a:hover {
text-decoration: none;
cursor: pointer;
}
svg {
display: block;
}
[dir='rtl'] .col {
float: right;
}
.height-1 {
height: 10%;
}
.height-2 {
height: 20%;
}
.height-4 {
height: 30%;
}
.height-6 {
height: 50%;
}
.height-10 {
height: 80%;
}
.height-11 {
height: 90%;
}
.height-12 {
height: 100%;
}
.height-auto {
height: auto;
}
.height-97 {
min-height: 97.5vh;
}
.min-height-2 {
min-height: 10vh;
}
.min-height-v12 {
min-height: 12vh;
}
.min-height-3 {
min-height: 20vh;
}
.min-height-4 {
min-height: 30vh;
}
.min-height-5 {
min-height: 40vh;
}
.min-height-6 {
min-height: 50vh;
}
.min-height-8 {
min-height: 65vh;
}
.min-height-10 {
min-height: 80vh;
}
.min-height-11 {
min-height: 90vh;
}
.min-height-12 {
min-height: 100vh;
}
@media (max-width: 1242px){
.min-height {
min-height: 250px;
}
.min-height-8 {
min-height: 55vh;
}
}
.min-height-490 {
min-height: 490px;
}
.max-height-240 {
max-height: 240px;
}
.max-height-380 {
max-height: 380px;
}
.max-height-430 {
max-height: 430px;
}
.max-height-450 {
max-height: 450px;
}
.max-height-11 {
max-height: 90vh;
}
.min-width-90 {
min-width: 90px;
}
.min-width-400 {
min-width: 400px;
}
.right-minus-1 {
right: -0.5rem;
}
.right-minus-2 {
right: -1rem;
}
.left-minus-1 {
left: -0.5rem;
}
.left-minus-2 {
left: -1rem;
}
.top-minus-100 {
top: -100px;
}
.margin-top-minus-5 {
margin-top: -5px;
}
.margin-top-minus-20 {
margin-top: -20px;
}
.margin-top-minus-24 {
margin-top: -24px;
}
.margin-top-minus-33 {
margin-top: -33px;
}
.margin-top-minus-40 {
margin-top: -40px;
}
.margin-top-minus-70 {
margin-top: -70px;
}
.margin-top-minus-100 {
margin-top: -100px;
}
.margin-top-250 {
margin-top: 250px;
}
.margin-top-280 {
margin-top: 280px;
}
.upper-case {
text-transform: uppercase;
}
.lower-case {
text-transform: lowercase;
}
.content-max-width {
max-width: 1150px;
}
.max-width-5 {
max-width: 80rem;
}
@media (max-width: 1614px) {
.max-width {
max-width: 1320px;
}
}
@media (max-width: 1160px) {
.max-width {
max-width: 936px;
}
}
@media (min-width: 1615px) {
.max-width {
max-width: 1620px;
}
}
.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);
}
.text-shadow {
text-shadow: 1px 1px 2px rgba(0,0,0,.35);
}
.grayscale {
filter: grayscale(1);
-webkit-filter: grayscale(1);
-moz-filter: grayscale(1);
}
.grayscale h5 {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.opacity-8 {
opacity: 0.8;
}
.opacity-6 {
opacity: 0.6;
}
.opacity-4 {
opacity: 0.4;
}
.opacity-3 {
opacity: 0.3;
}
.opacity-2 {
opacity: 0.2;
}
.opacity-0 {
opacity: 0;
}
.pill-30 {
border-radius: 30px;
}
.pointer {
cursor: pointer;
}
.border-color {
border-color: #d1d1d1;
}
.border-white {
border-color: #fff;
}
.border-green {
border-color: #7faf41;
}
.border-red {
border-color: #c23b2d;
}
.border-theme {
border-color: #232E4D;
}
.border-gold {
border-color: #ec9e18;
}
.border-platinum {
border-color: #1525a2;
}
.border-diamond {
border-color: #000000;
}
.border-width-2 {
border-width: 2px;
}
.border-width-4 {
border-width: 4px;
}
.fill-action-unhighlight {
fill: #797c7e;
}
.fill-action-highlight {
fill: #D6AD60;
}
.fill-theme-primary {
fill: #313B59;
}
.fill-theme-dark {
fill: #FFF;
}
.fill-discount-badge {
fill: #FF3B30;
}
.color-dark-grey {
color: #323232;
}
.color-medium-grey {
color: #797c7e;
}
.color-darkest {
color: #333;
}
.color-action-highlight {
color: #D6AD60;
}
.color-action-highlight-transparent {
color: rgba(49,59,89, 0.8);
}
.color-link {
color: #0074d9;
}
.bg-standard {
background-color: #95989a;
}
.bg-header-background {
background-color: #232E4D;
}
.fill-membership-features-locked {
fill: #D6AD60;
color: #D6AD60;
opacity: 0.8;
}
.fill-membership-features {
fill: #D6AD60;
color: #D6AD60;
opacity: 1;
}
.fill-standard {
fill: #95989a;
}
.fill-diamond {
fill: #000000;
}
.diamond {
color: #000000;
}
.fill-platinum {
fill: #1525a2;
}
.platinum {
color: #1525a2;
}
.gold {
color: #ec9e18;
}
.fill-gold {
fill: #ec9e18;
}
.bg-gold {
background-color: #ec9e18;
}
.bg-gold-tint {
background-color: #FFFDFA;
}
.bg-gold-alpha-1 {
background-color: #EC9E181A;
}
.bg-yellow {
background-color: #ecce45;
}
.bg-green {
background-color: #7faf41;
-webkit-print-color-adjust:exact;
}
.bg-platinum {
background-color: #1525a2;
}
.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;
}
.fill-green {
fill: #7faf41;
}
.green {
color: #7faf41;
}
.fill-orange {
fill: #c78515;
}
.orange {
color: #c78515;
}
.fill-verify-yellow {
fill: #ff9c1a;
}
.online {
width: 20px;
height: 20px;
fill: #089c47;
border-style: solid;
}
.online svg{
width: 20px;
height: 20px;
}
.bg-grey {
background-color: #a19e9e;
}
.bg-grey-alpha-1 {
background-color: rgba(161, 158, 158, 0.1);
}
.bg-grey-alpha-2 {
background-color: rgba(161, 158, 158, 0.2);
}
.bg-black-alpha-6 {
background-color: rgba(0, 0, 0, 0.6);
}
.bg-black-alpha-7 {
background-color: rgba(0, 0, 0, 0.7);
}
.bg-black-alpha-8 {
background-color: rgba(0, 0, 0, 0.8);
}
.bg-black-alpha-85 {
background-color: rgba(0, 0, 0, 0.85);
}
.bg-light-grey {
background-color: #e9e9e9;
}
.bg-light-silver {
background-color: #F8F8F8;
}
.bg-dark-grey {
background-color: #565656;
}
.bg-messages {
background-color: #f8f8f8;
}
.bg-action-highlight {
background-color: #D6AD60;
}
.bg-discount-badge-red {
background: #FF3B30;
}
.fill-grey {
fill: #a19e9e;
}
.fill-font-color {
fill: #505656;
}
.bg-white {
background-color: #fff;
}
.bg-red {
background-color: #c23b2d;
}
.bg-red-brighter {
background-color: #EF2917;
}
.bg-transparent {
background-color: transparent;
}
.bg-search {
background-color: #D6AD60;
}
.bg-next-step {
background-color: rgba(0,0,0,0.3);
}
.fill-white {
fill: #fff;
}
.white {
color: #fff;
}
.fill-red {
fill: #c23b2d;
}
.red,
.text-red {
color: #c23b2d;
}
.red-lighter {
color: #EF2917;
}
.error {
background-color: #c23b2d;
color: #fff;
}
.bg-highlight {
background-color: rgba(255,65,54, 0.05);
}
.bg-draft-mode {
background-color: #f8efef;
}
.bg-theme {
background-color: #313B59;
}
.bg-theme-alpha-05 {
background-color: rgba(49,59,89, 0.05);
}
.bg-theme-secondary {
background-color: #313B59;
-webkit-print-color-adjust: exact;
}
.bg-transparent {
background-color: transparent;
}
.theme-color {
color: #313B59;
}
.theme-color-secondary {
color: #313B59;
}
.body-font-color {
color: #505656;
}
.header-strip-font-color {
color: #fff;
}
.busy {
fill: #ff8900;
}
.facebook {
background-color: #1877F2;
}
.google {
border: 1px solid #aaa;
}
.btn-bg {
background-color: #D6AD60;
}
.btn-color {
color: #fff;
}
[disabled].btn-color {
color: #a19e9e;
}
a.btn-color,
a.btn-color:active,
a.btn-color:visited,
a.btn-color:hover {
color: #fff;
}
.btn-bg-dark {
background-color: #232E4D;
}
.btn-color-dark {
color: #fff;
}
a.btn-color-dark,
a.btn-color-dark:visited,
a.btn-color-dark:hover {
color: #fff;
}
a.fb-login,
a.fb-login:visited,
a.fb-login:hover {
color: #fff;
}
.login-btn {
background-color: #313B59;
color: #fff;
display: block;
position: relative;
overflow: hidden;
}
a.login-btn,
a.login-btn:visited,
a.login-btn:hover {
color: #fff;
}
.diagram-btn {
background-color: #232E4D;
color: #fff;
position: relative;
overflow: hidden;
}
a.diagram-btn,
a.diagram-btn:visited,
a.diagram-btn:hover {
color: #fff;
}
a.diagram-btn svg {
fill: #fff;
}
/* list results */
.list-card {
height: 196px;
}
.unread {
background-color: #313B59;
width: 10px;
}
.unselected {
background-color: rgba(114, 114, 114, .9);
}
.unselected-transparent {
background-color: transparent;
}
input ~ .recover {
background-color: rgba(194, 59, 45, .9);
display: none;
}
input ~ .recover-transparent {
background-color: transparent;
}
[type=checkbox]:checked ~ .unselected {
display: none;
}
[type=checkbox]:checked ~ .recover {
display: inherit;
}
.card-image-bg-color {
background-color: #e0e0e0;
}
/* Progress Bar */
.progress-bar-highlight {
height: 15px;
}
/* iPad hamburger menu */
.show-toggle {
display: block;
}
@media (min-width: 1439px) {
.hide-nav {
display: block;
}
.hide-nav-flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.show-toggle {
display: none;
}
}
@media (max-height: 880px) { /* hide the title and tabs on screens that are not tall enough */
.hide-tabs {
display: none;
}
.padding-small-screen {
height: 0;
padding: 0;
}
}
/* footer */
.trademark p {
margin: 0;
}
/* help */
.help svg {
width: 25px;
height: 25px;
}
button {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */ /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none;
font-family: inherit;
}
/* Button highlight */
button:focus::after,
.button:focus::after,
button:active::after,
.button:active::after {
background-color: #000;
content: "";
width: 50px;
height: 50px;
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
opacity: 0;
-webkit-animation: button-highlight 500ms;
animation: button-highlight 500ms;
pointer-events: none;
}
button:focus,
.button:focus,
button:active,
.button:active {
outline: 0;
}
/* Button no highlight for streaming*/
[data-streaming-list] button:focus::after,
[data-streaming-list] button.button:focus::after,
[data-streaming-list] buttonbutton:active::after,
[data-streaming-list] button.button:active::after {
-webkit-animation: none;
animation: none;
background-color: transparent;
}
.pointer-events-none {
pointer-events: none;
}
.pointer-events {
pointer-events: all;
}
/* Images in circle render fix */
.img-fit {
width: calc(100% + 4px);
}
.bg-img-fit {
background-size: cover;
background-position: center;
}
.bg-img-fit-top {
background-position: 0 0;
}
/* iPad */
@media (max-width : 1024px) {
.hide-on-iPad {
display: none;
}
footer div {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
}
.overlay {
background-color: rgba(0,0,0,0.5);
}
.overlay-7 {
background-color: rgba(0,0,0,0.7);
}
.svg-fit {
width: 100%;
height: 100%;
}
.line-50 {
width: 50px;
}
/* results tabs */
.tabs {
max-width: 998px;
}
.tab-bottom-minus-2 {
margin-bottom: -2px;
}
.tabs-min-width-768{
min-width: 768px;
}
/* keeping it the same width as col-10 */
.tabs-max-width-10 {
max-width: 83.33333%;
}
@media (max-width: 1160px) {
.tabs-max-width-10 {
max-width: 100%;
}
}
.tabs a,
.tabs a:visited,
.tabs a:hover {
color: #fff;
}
.tabs h4,
.tabs .h4{
border-width: 4px;
}
.tabs .count[data-badge]::after {
right: -25px;
}
/* iPad */
@media (max-width: 1050px) {
.profile-image-46 {
width: 36px;
height: 36px;
}
[dir="ltr"] .tabs .me4 {
margin-right: 3.5rem;
}
[dir="rtl"] .tabs .me4 {
margin-left: 3.5rem;
}
}
.modal-bg-green {
background-color: #70bb46;
cursor: pointer;
}
a.modal-bg-green,
a.modal-bg-green:visited,
a.modal-bg-green:hover {
color: #fff;
}
.rotate-45 {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.rotate-90 {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
[dir=rtl] .rotate-90 {
-ms-transform: rotate(-90deg);
}
.rotate-180 {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
[dir=rtl] .icon-long-arrow.rotate-180 {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
.rotate-270 {
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
}
[dir=rtl] .rotate-270 {
-ms-transform: rotate(-270deg);
}
.top-20 {
top: 20px;
}
.right-20 {
right: 20px;
}
.no-select {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */ /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
supported by Chrome and Opera */
}
.flip {
-webkit-transform: scale(-1, 1);
transform: scale(-1, 1);
}
[dir=rtl] .list-reset {
padding: 0;
}
.break-word {
-ms-hyphens: auto;
hyphens: auto;
word-wrap: break-word;
overflow-wrap: break-word;
word-break: break-word;
}
.pre-line {
white-space: pre-line;
}
.pre-wrap {
white-space: pre-wrap;
}
.avoid-clicks {
pointer-events: none;
}
.grab {
cursor: move;
cursor: -webkit-grabbing;
}
/* basscss override */
.caps {
letter-spacing: 0;
}
.m1-5 {
margin: 0.75rem;
}
.mx1-5 {
margin-right: 0.75rem;
margin-left: 0.75rem;
}
.my1-5 {
margin-top: 0.75rem;
margin-bottom: 0.75rem;
}
.mt1-5 {
margin-top: 0.75rem;
}
.mb0-5 {
margin-bottom: 0.25rem;
}
.mb1-5 {
margin-bottom: 0.75rem;
}
.mb2-5 {
margin-bottom: 1.5rem;
}
.p1-5 {
padding: 0.75rem;
}
.p2-25 {
padding: 1.25rem;
}
.p2-5 {
padding: 1.5rem;
}
.sticky {
position: sticky;
}
.google-btn-bg {
background-color: #4285f4;
}
.line-through {
text-decoration: line-through;
}
.google-btn-border {
border: 1px solid #4285f4;
}
.show-hide {
top: -1px;
right: -1px;
width: 39px;
height: 39px;
}
[dir=rtl] .show-hide {
right: auto;
left: -1px;
}
.pill {
border-radius: 30px;
}
.pill svg {
width: 30px;
height: 30px;
cursor: pointer;
}
.pill a {
text-decoration: none;
color: inherit;
}
.rounded-2 {
border-radius: 0.5rem;
}
.rounded-5 {
border-radius: 1.25rem;
}
.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;
}
.small-text {
font-size: 12px;
}
.x-small-text {
font-size: 10px;
}
.divider {
height: 2px;
width: 100%;
}
.noto-color-emoji-regular {
font-family: "Noto Color Emoji", sans-serif;
font-weight: 400;
font-style: normal;
}
.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;
}
/* Modules */
html,
body {
font-size: 16px;
font-weight: 400;
}
@media (max-width: 1614px) {
html,
body {
font-size: 15px;
}
.h3 {
font-size: 1.15rem;
}
}
@media (max-width: 1242px) {
html,
body {
font-size: 14px;
}
.h3 {
font-size: 1.20rem;
}
}
body {
background-color: #f8f8f8;
color: #505656;
margin: 0;
padding: 0;
}
[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;
}
body.returnToMobileHeader {
min-width: 100%;
}
*[hidden] {
display: none;
}
h1 {
color: inherit;
}
h3,
.tagline {
color: #323232;
}
h2 {
font-weight: 400;
color: #313B59;
}
h1,
.profile h3,
.profile .h3,
.header .h3,
.tagline,
.tabs .h4,
.three-dot .h4,
.header-sub-menu {
font-weight: 300;
}
h2,
.h2,
h3,
.h3 {
font-weight: 400;
}
[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 {
line-height: 3.3rem;
}
[lang=km] h1,
[lang=km] .h1 {
line-height: 5.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] label,
[lang=my] select {
line-height: 1.9rem;
}
[lang=km] p,
[lang=km] h3,
[lang=km] .h3,
[lang=km] h4,
[lang=km] .h4,
[lang=km] fieldset,
[lang=km] select{
line-height: 1.4rem;
}
[lang=km] label {
line-height: 1.9rem;
}
a,
a:visited,
a:hover {
color: #505656;
}
a.white,
a.white:visited,
a.white:hover {
color: white;
}
a.color-dark-grey,
a.color-dark-grey:visited,
a.color-dark-grey:hover {
color: #323232;
}
.highlight-a a,
a.highlight,
.highlight {
color: #D6AD60;
}
.error a{
color: #fff;
}
.weight-400 {
font-weight: 400;
}
.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;
}
}
.fade-out {
-webkit-animation: fade-out 350ms;
animation: fade-out 350ms;
}
@-webkit-keyframes fade-out {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes fade-out {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.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;
}
}
/* pop-fade-out for large animations */
.pop-fade-out-lge {
-webkit-animation: pop-fade-out-lge 1s;
animation: pop-fade-out-lge 1s;
}
@-webkit-keyframes pop-fade-out-lge {
0% {
opacity: 1;
top: 0;
left: 10%;
}
15% {
top: -30px;
left: -15%;
}
30% {
top: -40px;
left: 10%;
}
45% {
top: -45px;
left: -20%;
}
60% {
top: -55px;
left: 15%;
}
75% {
top: -60px;
left: -20%;
}
90% {
top: -65px;
left: 20%;
}
100% {
top: -70px;
left: 0;
opacity: 0;
}
}
@keyframes pop-fade-out-lge {
0% {
opacity: 1;
top: 0;
left: 10%;
}
15% {
top: -30px;
left: -15%;
}
30% {
top: -40px;
left: 10%;
}
45% {
top: -45px;
left: -20%;
}
60% {
top: -55px;
left: 15%;
}
75% {
top: -60px;
left: -20%;
}
90% {
top: -65px;
left: 20%;
}
100% {
top: -70px;
left: 0;
opacity: 0;
}
}
@-webkit-keyframes button-highlight {
0% {
opacity: 0.5;
}
100% {
-webkit-transform: scale(1.4);
transform: scale(1.4);
opacity: 0;
}
}
@keyframes button-highlight {
0% {
opacity: 0.5;
}
100% {
-webkit-transform: scale(1.4);
transform: scale(1.4);
opacity: 0;
}
}
.expand-width {
-webkit-animation: expand-width 350ms;
animation: expand-width 350ms;
}
@-webkit-keyframes expand-width {
0% {
width: 0;
}
100% {
width: auto;
}
}
@keyframes expand-width {
0% {
width: 0;
}
100% {
width: auto;
}
}
.fade-in-expand-width {
-webkit-animation: fade-in-expand-width 350ms;
animation: fade-in-expand-width 350ms;
}
@-webkit-keyframes fade-in-expand-width {
0% {
opacity: 0;
width: 0;
}
100% {
opacity: 1;
width: auto;
}
}
@keyframes fade-in-expand-width {
0% {
opacity: 0;
width: 0;
}
100% {
opacity: 1;
width: auto;
}
}
.translating::after {
content: '';
color: #000;
-webkit-animation: dots 1.5s infinite linear;
animation: dots 1.5s infinite linear;
-webkit-transform-origin: center;
transform-origin: center;
width: 20%;
height: auto;
}
@-webkit-keyframes dots {
from {
content: '.';
}
50% {
content: '..';
}
to {
content: '...';
}
}
@keyframes dots {
from {
content: '.';
}
50% {
content: '..';
}
to {
content: '...';
}
}
.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);
}
}
.menu-pop {
-webkit-animation: menu-pop 0.3s ease-out;
animation: menu-pop 0.3s ease-out;
}
@-webkit-keyframes menu-pop {
from {
opacity: 0;
-webkit-transform: scale(0.7);
transform: scale(0.7);
}
to {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes menu-pop {
from {
opacity: 0;
-webkit-transform: scale(0.7);
transform: scale(0.7);
}
to {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
}
.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);
}
}
.grayscale {
-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;
}
.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;
}
.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%{}
}
.heartbeat {
-webkit-animation: heartbeat 1.5s ease-in-out 2 both;
animation: heartbeat 1.5s ease-in-out 2 both;
}
.single-heartbeat,
[data-modal-virtual-gift]:hover,
[data-sparks-gift]:hover img {
-webkit-animation: heartbeat 1.5s ease-in-out 1 both;
animation: heartbeat 1.5s ease-in-out 1 both;
}
.heartbeat-delay {
-webkit-animation: heartbeat 1.5s ease-in-out 3 both;
animation: heartbeat 1.5s ease-in-out 3 both;
-webkit-animation-delay: 7s;
animation-delay: 7s;
}
/* ----------------------------------------------
* Generated by Animista on 2018-11-16 9:30:16
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */
/**
* ----------------------------------------
* animation heartbeat
* ----------------------------------------
*/
@-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;
}
}
/* ----------------------------------------------
* Generated by Animista on 2019-5-15 11:28:56
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */
.scale-up-hor-left {
-webkit-animation: scale-up-hor-left 0.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
animation: scale-up-hor-left 0.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
.scale-up-hor-center {
-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-left
* ----------------------------------------
*/
@-webkit-keyframes scale-up-hor-left {
0% {
-webkit-transform: scaleX(0.4);
transform: scaleX(0.4);
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
}
100% {
-webkit-transform: scaleX(1);
transform: scaleX(1);
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
}
}
@keyframes scale-up-hor-left {
0% {
-webkit-transform: scaleX(0.4);
transform: scaleX(0.4);
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
}
100% {
-webkit-transform: scaleX(1);
transform: scaleX(1);
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
}
}
/**
* ----------------------------------------
* 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);
}
}
.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;
}
.slide-in-bottom-delay {
-webkit-animation-delay:2s;
animation-delay:2s;
}
/* ----------------------------------------------
* 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;
}
}
.slide-left {
-webkit-animation: slide-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: slide-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
/**
* ----------------------------------------
* animation slide-left
* ----------------------------------------
*/
@-webkit-keyframes slide-left {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
-webkit-transform: translateX(-250px);
transform: translateX(-250px);
}
}
@keyframes slide-left {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
-webkit-transform: translateX(-250px);
transform: translateX(-250px);
}
}
.slide-right {
-webkit-animation: slide-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: slide-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
/**
* ----------------------------------------
* animation slide-right
* ----------------------------------------
*/
@-webkit-keyframes slide-right {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
-webkit-transform: translateX(250px);
transform: translateX(250px);
}
}
@keyframes slide-right {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
-webkit-transform: translateX(250px);
transform: translateX(250px);
}
}
.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(-358px);
transform: translateY(-358px);
}
}
@keyframes slide-top {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: translateY(-358px);
transform: translateY(-358px);
}
}
.scale-in-center {
-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-17 12:54:52
* 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;
}
}
.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;
}
}
.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);
}
}
.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-origipuff-in-centern: 50% 100%;
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
opacity: 1;
}
}
.scale-height {
-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;
}
}
.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;
}
}
.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;
}
}
.delay-05 {
-webkit-animation-delay: .5s;
animation-delay: .5s;
}
.delay-1 {
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.delay-1-25 {
-webkit-animation-delay: 1.25s;
animation-delay: 1.25s;
}
.delay-1-5 {
-webkit-animation-delay: 1.5s;
animation-delay: 1.5s;
}
.delay-2 {
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
.delay-2-25 {
-webkit-animation-delay: 2.25s;
animation-delay: 2.25s;
}
.delay-2-5 {
-webkit-animation-delay: 2.5s;
animation-delay: 2.5s;
}
.delay-3{
-webkit-animation-delay: 3s;
animation-delay: 3s;
}
.delay-3-25{
-webkit-animation-delay: 3.25s;
animation-delay: 3.25s;
}
.skewed {
-webkit-transform: skew(-24deg);
transform: skew(-24deg);
}
.vertical-text {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.scale-in-center {
-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;
}
}
.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: 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%;
}
}
.site-logo {
color: #D6AD60;
fill: #D6AD60;
}
.site-logo-on-white {
color: #D6AD60;
fill: #D6AD60;
}
.logo-light {
fill: #D6AD60;
color: #D6AD60;
}
.logo-dark {
fill: #D6AD60;
color: #D6AD60;
}
.logo-right-on-white {
fill: #232E4D;
color: #232E4D;
}
.logo-left-on-white {
fill: #D6AD60;
color: #D6AD60;
}
.corp-cupid-logo {
fill: #767273;
color: #942923;
}
.logo-heart {
width: 38px;
height: 34px;
}
.logo-domain {
width: 118px;
height: 26px;
}
.logo-domain-eurocupid {
width: 122px;
height: 24px;
}
/* iPad */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
.logo-domain {
width: 118px;
height: 30px;
}
}
.icon-30 {
width: 30px;
height: 30px;
}
.icon-30-45 {
height: 30px;
width: 45px;
}
.icon-40,
.icon-40-static {
width: 40px;
height: 40px;
}
.icon-46 {
width: 46px;
height: 46px;
}
.icon-50 {
height: 50px;
width: 50px;
}
.icon-56 {
height: 56px;
width: 56px;
}
.icon-33 {
width: 33px;
height: 33px;
}
.icon-80 {
width: 80px;
height: 80px;
}
.icon-90 {
width: 90px;
height: 90px;
}
.icon-100 {
width: 100px;
height: 100px;
}
.icon-116 {
width: 116px;
height: 116px;
}
.icon-max-h-116 {
max-height: 116px;
}
@media (max-width: 1242px){
.icon-116 {
width: 90px;
height: 90px;
}
}
@media (max-width: 1614px) {
.card .icon-30,
.activity-card .icon-30,
.mini-modal .icon-30 {
width: 25px;
height: 25px;
}
.activity-card .icon-56 {
height: 46px;
width: 46px;
}
.mini-modal .icon-30-45 {
height: 25px;
width: 35px;
}
.icon-40 {
width: 30px;
height: 30px;
}
}
.icon-120 {
width: 120px;
height: 120px;
}
.icon-156 {
width: 156px;
height: 156px;
}
.icon-200 {
width: 200px;
height: 200px;
}
.icon-400 {
width: 400px;
}
/* TODO will need to refactor this into the design */
.icon-33 svg {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.icon-reset svg{
position: relative;
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.icon-membership svg {
width: 14px;
height: 18px;
}
.icon-verified svg {
width: 18px;
height: 18px;
}
.icon-verified-large svg {
width: 36px;
height: 36px;
}
.icon-8 {
width: 8px;
height: 8px;
}
.icon-10 {
width: 10px;
height: 10px;
}
.icon-16 {
width: 16px;
height: 16px;
}
.icon-20 {
width: 20px;
height: 20px;
}
.icon-24 {
width: 24px;
height: 24px;
}
/* only used for Google sign in button, allows for the 2px border*/
.icon-28 {
width: 28px;
height: 28px;
}
.card .icon-28,
.activity-card .icon-28,
.mini-modal .icon-28 {
width: 22px;
height: 22px;
}
.icon ul svg {
position: relative;
}
.icon-first,
.icon-last {
width: 22px;
height: 20px;
}
.icon-prev,
.icon-next {
width: 16px;
height: 20px;
}
.icon-next-button {
width: 38px;
height: 40px;
}
.icon-locked {
width: 10px;
height: 10px;
padding: 0.25rem
}
.icon-complete {
width: 10px;
height: 10px;
padding: 0.25rem;
margin-right: -9px;
margin-left: 0.25rem;
}
[dir=rtl] .icon-complete {
margin-right: 0.25rem;;
margin-left: -9px;
}
.bg-incomplete {
background-color: #00040e;
opacity: 0.3;
}
@media (max-width : 1024px) {
.icon-complete {
width: 7px;
height: 7px;
padding: 1px;
}
}
@media (max-width : 1242px) {
.icon-complete {
width: 8px;
height: 8px;
padding: 2px;
}
}
.icon-long-arrow {
height: 40px;
width: auto;
}
[dir=rtl] .icon-long-arrow {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.icon-plus {
padding: 4px;
background-color: #fff;
position: absolute;
bottom: 10%;
left: 0;
right: 0;
}
.icon-members-online {
fill: #313B59;
margin-left: 0.15rem;
}
[dir='rtl'] .icon-members-online {
margin-left: 0;
margin-right: 0.15rem;
}
.icon-padding {
padding: .75rem;
}
.icon-grade{
width: 8px;
height: 8px;
margin: 0 2px;
}
.icon-handle {
width: 15px;
height: auto;
}
.header {
height: 46px;
background-color: #232E4D;
font-weight: 300;
-webkit-print-color-adjust: exact;
}
.header a,
.header a:hover,
.header a:visited,
.header-color {
color: #fff;
}
.header a.ad-upgrade,
.header a.ad-upgrade:hover,
.header a.ad-upgrade:visited {
color: #fff;
}
.header-nav-max-width {
max-width: 900px;
}
.header-nav-min-width {
min-width: 424px;
}
.header-strip-color {
color: #fff;
}
.header-strip-svg-color {
color: #fff;
}
.header-strip-fill {
fill: #fff;
}
.header-sub-menu a {
line-height: 120%;
cursor: pointer;
}
.header-sub-menu a,
.header-sub-menu a:hover,
.header-sub-menu a:visited {
color: #505656;
}
.header-sub-menu a.switchOff {
color: #c23b2d;
}
.header .active,
.header a.active,
.header a:hover.active,
.header a:visited.active{
color: #313B59;
font-weight: 400;
}
/* TODO Ross: Not sure if this is used? */
.header-strip {
min-height: 8px;
background-color: #313B59;
color: #fff;
font-weight: 300;
-webkit-print-color-adjust: exact;
}
body.returnToMobileHeader .header-strip {
min-width: 705px;
}
.header-strip h1,
.header-strip h2,
.header-strip h3 {
color: #fff;
}
.count {
position: relative;
}
.count[data-badge]::after {
border: 1px solid #fff;
content: attr(data-badge);
width: 1.7em;
height: 1.7em;
text-align: center;
line-height: 1.7em;
margin: 0.22rem;
border-radius: 50%;
position: absolute;
top: -11px;
right: -50px;
font-size:0.65em;
}
[lang='my'] .count[data-badge]::after {
top: -3px;
}
.custom-margin-top {
margin-top: 60px;
}
[dir='rtl'] .count[data-badge]::after {
left: -50px;
right: auto;
}
[dir='rtl'][lang='ar'] .count[data-badge]::after {
font-family: 'Noto Sans', sans-serif;
}
.count-active[data-badge]::after {
border: none;
background-color: #232E4D;
color: #fff;
}
.header-info .count {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.header-strip .next-step {
max-width: 340px;
}
@media (max-width : 1242px) {
.header-strip .next-step {
max-width: 268px;
}
}
@media (max-width : 880px) {
.header-strip .next-step {
max-width: 172px;
}
}
.header-strip a.next-step,
.header-strip a.next-step:hover,
.header-strip a.next-step:visited {
color: #fff;
}
.header-circles {
width: 62px;
height: 62px;
border-width: 14px;
}
@media (max-width : 1242px) {
.header-circles {
width: 52px;
height: 52px;
border-width: 12px;
}
}
.profile-management .header-circles {
width: 25px;
height: 25px;
border-width: 8px;
}
.header-circles.border {
border-color: #00040e;
opacity: 0.3;
}
.header-circles svg {
width: 75%;
height: auto;
fill: #00040e;
opacity: 0.6;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
/*Support for IE 9*/
[dir='rtl'] .header-circles svg {
-ms-transform: translate(50%, -50%); /* IE 9 */
}
.header-circles-highlight svg {
opacity: 0.9;
}
.profile-progress {
width: 90px;
height: 90px;
}
@media (max-width : 1242px) {
.profile-progress {
width: 76px;
height: 76px;
}
}
.profile-management .profile-progress {
width: 40px;
height: 40px;
}
.profile-progress svg {
width: 100%;
}
.profile-progress svg {
fill: #313B59;
opacity: 1;
width: 100%;
height: 100%;
}
.profile-progress {
fill: #D6AD60;
}
.icon-holder {
width: 65px;
left: 54px;
bottom: -1px;
}
@media (max-width: 1614px){
.icon-holder .icon-24 {
width: 20px;
height: 20px;
}
}
[dir='rtl'] .icon-holder {
right: 54px;
left: auto;
}
@media (max-width: 1242px){
.icon-holder {
left: 46px;
}
[dir='rtl'] .icon-holder {
right: 46px;
}
}
.header-sub-menu ul {
display: none;
position: absolute;
z-index: 4;
top: 100%;
left: -50%;
-webkit-transform-origin: top;
transform-origin: top;
-webkit-transition:all 0.35s ease-out;
transition:all 0.35s ease-out;
background: rgba(255, 255, 255, 1);
}
.header-sub-menu ul li {
width: auto;
white-space: nowrap;
}
.header-sub-menu li:active,
.header-sub-menu ul li:hover,
.header-sub-menu ul li:active {
background-color: #f7f7f7;
}
.header-sub-menu .no-hover-highlight:hover {
background-color: transparent;
}
.header-sub-menu .no-hover-highlight {
cursor: default;
}
.header-sub-menu .profile-completion a {
color: #fff;
}
.header-sub-menu li ul {
display: none;
position: absolute;
z-index: 3;
top: 1rem;
left: 100%;
-webkit-transform: translate(0, -35%);
transform: translate(0, -35%);
background: rgba(255, 255, 255, 1);
max-height: 600px;
overflow: auto;
}
.header-sub-menu ul.menu-pop {
background: #fff;
border: 12px solid #fff;
display: block;
}
.header-sub-menu.profile-icon ul {
right: 0;
left: auto;
width: auto;
-webkit-transform: translateX(0);
transform: translateX(0);
}
.header-sub-menu.settings ul,
.header-sub-menu.three-dot ul{
left: auto;
right: 0;
-webkit-transform: translateX(0);
transform: translateX(0);
}
.header-sub-menu.folders ul {
left: 0;
}
.header-sub-menu:hover li ul,
.header-sub-menu:active li ul {
display: none;
}
.header-sub-menu li:hover ul,
.header-sub-menu li:active ul {
display: block;
z-index: 2;
}
.header .count[data-badge]::after {
border: none;
background-color: #D6AD60;
color: #fff;
right: -30px;
}
@media (max-width: 1400px) {
.header .count[data-badge]::after {
right: -22px;
}
}
@media (max-width: 800px) {
.header .count[data-badge]::after {
right: -20px;
}
}
.header-sub-menu ul .count[data-badge]::after {
right: -8px;
top: 8px;
}
.header-sub-menu ul .count[data-badge] {
padding-right: 1.25rem;
}
[dir='rtl'] .header-sub-menu ul .count[data-badge] {
padding-left: 1.25rem;
padding-right: 0.5rem; /* needs to match what the padding is set at using the p classes */
}
.header-sub-menu .border-bottom,
.sub-menu .border-bottom,
.header-sub-menu .border-top,
.sub-menu .border-top{
border-color: #e9e9e9;
}
.header-sub-menu.profile-icon ul::after {
border-width: 15px;
margin-right: auto;
margin-left: auto;
left: auto;
right: 5px;
}
.header-sub-menu.profile-icon ul::before {
border-width: 21px;
margin-right: auto;
margin-left: auto;
left: auto;
right: 5px;
}
.header-sub-menu .header-sub-sub-menu {
right: 0;
max-height: 200px;
overflow-y: auto;
}
.header-sub-menu.settings .header-sub-sub-menu {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
left: 0;
top: 50%;
right: auto;
}
.header-sub-menu.settings ul::after {
border-width: 10px;
margin-left: 39%;
bottom: 102%;
}
.header-sub-menu.settings ul::before {
border-width: 12px;
margin-left: 39%;
bottom: 102%;
}
.header-sub-menu.profile-icon,
.header-sub-menu.settings {
cursor: pointer;
}
@media (min-width: 64em) {
.header-upgrade-ad {
display: block;
}
}
@media (min-width: 40em) {
.header-upgrade-ad {
display: none;
}
}
.header .settings-fill {
fill: #fff;
}
.tabs .active {
position: relative;
}
.tabs .active::before {
content: '';
position: absolute;
width: 100%;
bottom: -32px;
border: 2px solid #fff;
}
.iconsettings {
width:25px;
height:25px;
margin:7px 0
}
/*Cross Site Promo - Start */
.cross-site-join li:active,
.cross-site-join ul li:hover,
.cross-site-join ul li:active {
background-color: #fff;
}
.cross-site-join a {
width:380px;
}
.cross-site-join ul li {
white-space: normal;
}
.cross-site-join ul li:last-child {
border-bottom:none;
}
.cross-site-heading {
color: #313B59;
}
.cross-site-tooltip {
position: absolute;
bottom: -80%;
}
.cross-site-tooltip i {
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -12px;
width: 24px;
height: 12px;
overflow: hidden;
}
.cross-site-tooltip i::after {
content: '';
position: absolute;
width: 12px;
height: 12px;
left: 50%;
-webkit-transform: translate(-50%,50%) rotate(45deg);
transform: translate(-50%,50%) rotate(45deg);
background-color: #FF3B30;
border: 1px solid transparent;
}
/*Cross Site Promo - End */
[dir='rtl'] .header-sub-menu.profile-icon ul {
-webkit-transform: translateX(0);
transform: translateX(0);
left: 0;
right: auto;
}
[dir='rtl'] .header-sub-menu.settings ul {
left: 0;
right: auto;
-webkit-transform: translateX(0);
transform: translateX(0);
}
[dir='rtl'] .header-sub-menu.settings .header-sub-sub-menu {
-webkit-transform: translateX(119%);
transform: translateX(119%);
}
/* IE 10 and IE 11 hack */
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
[dir='rtl'] .header-sub-menu.settings .header-sub-sub-menu {
-webkit-transform: translateX(110%);
transform: translateX(110%);
}
}
[dir='rtl'] .header .count[data-badge]::after {
left: -35px;
right: auto;
}
[dir='rtl'] .header-sub-menu ul .count[data-badge]::after {
right: auto;
left: -8px;
}
[dir='rtl'] .header-sub-menu.profile-icon ul::after {
margin-left: 0;
left: 5px;
}
[dir='rtl'] .header-sub-menu.profile-icon ul::before {
margin-left: 0;
left: 5px;
}
[dir='rtl'] .header-sub-menu.settings ul::after,
[dir='rtl'] .header-sub-menu.settings ul::before {
margin-left: 0;
left: -10px;
}
[dir='rtl'] .header-sub-menu .header-sub-sub-menu {
left: 0;
right: auto;
}
@media (max-width: 1400px) {
.header .h3 {
font-size: 0.9rem;
}
.header-strip h1 {
font-size: 1.5rem;
}
.header .max-width-3 {
max-width: 42rem;
}
}
#headerouter::before {
content:"";
width: 100%;
height: 100%;
display: block;
position: fixed;
background-image: url(//cdn.elitecupid.com/assets/images/landing/sites/43/homepage.jpg);
background-size: cover;
background-position: 65%;
}
#headerouter.female::before{
background-image: url(//cdn.elitecupid.com/assets/images/landing/v2/43/landing.jpg);
}
#headerouter.min-height-5::before{
position: absolute;
}
[dir=rtl] #headerouter::before{
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}
#headerouter.min-height-5::before{
background-position: 65% 25%;
}
#headerouter footer,
#headerouter .body-font-color,
.auth label {
color: #fff;
}
#headerouter footer {
z-index: 2;
}
.membernav svg {
fill: #fff;
width: 20px;
height: 20px;
margin: 0 5px;
}
.membernav ul {
list-style: none;
position: relative;
margin: 0;
padding: 0;
}
.membernav a {
color: #fff;
text-decoration: none;
}
.membernav li {
position: relative;
background: rgba(0,0,0,0.8);
}
.membernav ul ul {
display: none;
position: absolute;
top: 100%;
left: 0;
width: 120%;
max-height: 80vh;
overflow-y: auto;
}
.membernav ul ul li {
width: auto;
background: rgba(255,255,255,.8);
}
.membernav ul ul li:hover {
width: auto;
background: #fff;
}
.membernav ul ul li a {
color: #565656;
line-height:120%;
}
.membernav ul li:hover > ul {
display:block
}
.membernav .arrow svg {
-webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
transform: rotate(90deg);
width: 15px;
height: 15px;
}
.membernav li:hover .arrow svg {
-webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
transform: rotate(-90deg);
}
/*Support for IE 9*/
[dir=rtl] .membernav .arrow svg {
-ms-transform: rotate(-90deg);
}
[dir=rtl] .membernav li:hover .arrow svg {
-ms-transform: rotate(90deg);
}
/*Support for Microsoft Edge*/
@supports (-ms-ime-align:auto) {
[dir=rtl] .membernav .arrow svg {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
[dir=rtl] .membernav li:hover .arrow svg {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
}
.link-color a,
#logoutPage a {
color: #D6AD60;
text-decoration: none;
}
.link-color-bold a {
font-weight: 700;
}
a.btn-color,
a.btn-color:active,
a.btn-color:visited,
a.btn-color:hover {
color: #fff;
}
/*min-height support for blackscreen overlay - if screen height is over 800px add footer */
.blackscreen-min-height {
min-height: 85vh;
}
.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;
}
label.count[data-badge]::after {
border: none;
background-color: #313B59;
color: #fff;
right: -35px;
}
label.count.max[data-badge]::after {
background-color: #ff4136;
}
.invalidMessage {
color: #c23b2d;
}
[lang=el] .error-message {
font-size: 0.8rem;
}
.login .invalidMessage {
color: #fff;
}
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;
line-height: inherit;
}
input::-webkit-input-placeholder{
color: #b5b4b4;
font-weight: 300;
}
input::-moz-placeholder{
color: #b5b4b4;
font-weight: 300;
}
input:-ms-input-placeholder{
color: #b5b4b4;
font-weight: 300;
}
input::placeholder{
color: #b5b4b4;
font-weight: 300;
}
select.filter {
-webkit-box-shadow: none;
box-shadow: none;
padding-right: 1.5rem;
}
[dir=rtl] select.filter {
padding-right: 0.5rem;
padding-left: 1.5rem;
}
textarea {
resize: none;
max-height: 280px;
}
/*input:invalid,*/
input:focus:invalid,
select:focus:invalid {
border-color: #c23b2d;
}
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: #fff url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjUgMjUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjI1IiBoZWlnaHQ9IjI1Ij48cGF0aCBmaWxsPSJyZ2IoODYsODYsODYpIiBkPSJNNC45LDQuNmgxNS4ybC03LjYsNy42QzEyLjUsMTIuMSw0LjksNC42LDQuOSw0LjZ6Ii8+PC9zdmc+) no-repeat right bottom;
background-size: 25px 25px;
}
select::-ms-expand {
display: none; /* remove default arrow on ie10 and ie11 */
}
select.filter {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: transparent url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjUgMjUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjI1IiBoZWlnaHQ9IjI1Ij48cGF0aCBmaWxsPSJyZ2IoODYsODYsODYpIiBkPSJNNC45LDQuNmgxNS4ybC03LjYsNy42QzEyLjUsMTIuMSw0LjksNC42LDQuOSw0LjZ6Ii8+PC9zdmc+) no-repeat 100% 60%;
}
[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;
}
textarea:focus::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: #ccc;
}
textarea:focus:-ms-input-placeholder { color:transparent; }
/* IE 10+ */
input:valid,
select:valid,
textarea:valid,
.selectopt:valid{
border: 1px solid #ccc;
}
select:valid.filter {
border: 0;
}
[disabled],
[disabled]:empty,
.disabled {
cursor: none;
opacity: 0.6;
overflow: hidden;
border-color: #ccc;
border-color:transparent;
background-color: transparent;
}
[disabled] ~ .icon .unchecked,
[disabled] ~ span{
cursor: none;
}
[type=submit]:valid,
[type=submit]:invalid {
border: 0;
cursor: none;
opacity:1;
}
[type=submit]:valid {
cursor: pointer;
}
select[disabled]{
background-image: none;
}
.unit-right {
right: 1em;
}
.unit-left {
left: 1em;
}
.form-field {
margin-top: .18rem;
}
[type=checkbox] ~ .icon,
[type=radio] ~ .icon {
cursor: pointer;
}
[type=checkbox] ~ .icon, [type=checkbox][disabled] ~ .icon,
[type=checkbox] ~ .icon .unchecked, [type=checkbox][disabled] ~ .icon .unchecked {
fill: #8c8c8c;
color: #cdcdcd;
stroke: none;
border-radius: 4px;
}
[type=checkbox].indeterminate ~ .icon .indeterminate, [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].indeterminate ~ .icon .unchecked,
[type=checkbox]:checked ~ .icon .unchecked,
[type=checkbox]:checked ~ .icon .indeterminate{
display: none;
}
[type=radio],
[type=radio]:not(:checked) ~ .icon .checked,
[type=radio]:checked ~ .icon .unchecked {
display: none;
}
[type=radio]:checked ~ .icon .checked {
display: block;
}
input[type=checkbox] ~ .icon-medium {
height: 2rem;
width: 2rem;
}
[type=checkbox] ~ .blue
{
color: #fff;
fill: #1525a2;
}
[type=checkbox] ~ .green
{
color: #fff;
fill: #7faf41;
}
[type=checkbox] ~ .theme
{
color: #fff;
fill: #313B59;
}
[type=radio] ~ .radio-blue
{
color: #1525a2;
fill: #1525a2;
}
[type=radio] ~ .radio-green
{
color: #7faf41;
fill: #7faf41;
}
[type=radio] ~ .radio-theme
{
color: #313B59;
fill: #313B59;
}
.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;*/
/*}*/
/*input ~ .icon svg.unchecked {*/
/*fill: #95989A;*/
/*display: block;*/
/*}*/
/*input:checked ~ .icon svg.checked {*/
/*fill: #2a3393;*/
/*stroke: #2a3393;*/
/*}*/
/* 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 {
color: #565656;
border-color: #ccc;
}
.accordion .icon:first-child {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.accordion.accordion-text-block svg{
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
[dir=rtl] .accordion .icon:first-child {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
-ms-transform: rotate(90deg);
}
.accordion .active .icon:first-child {
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
}
.accordion.accordion-text-block .active svg{
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
fill: #797c7e;
}
.accordion.accordion-text-block .active .h3{
color: #313B59;
}
[dir=rtl] .accordion .active .icon:first-child {
-webkit-transform: rotate(-270deg);
transform: rotate(-270deg);
-ms-transform: rotate(270deg);
}
.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;
}
.switch.theme :checked + label {
background-color: #313B59;
color: #fff;
}
.switch.blue :checked + label {
background-color: #1525a2;
color: #fff;
}
.switch.green :checked + label {
background-color: #7faf41;
color: #fff;
}
/*over rides*/
#form-login label, #form-login .invalidMessage {
color: #505656;
}
/* 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;
}
[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: #505656;
}
.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: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: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: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[multiple] {
height: auto;
background-image: none;
}
.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 .help-inline,
.form-message-inline {
display: inline-block;
padding-left: 0.3em;
color: #666;
vertical-align: middle;
font-size: 0.875rem;
}
.form-field select::-ms-expand {
display: none;
}
/*
@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;
}
.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;
}
[dir="ltr"] .ms-auto { margin-left: auto }
[dir="rtl"] .ms-auto { margin-right: auto }
[dir="ltr"] .me-auto { margin-right: auto }
[dir="rtl"] .me-auto { margin-left: auto }
[dir="ltr"] .ms0 { margin-left: 0 }
[dir="rtl"] .ms0 { margin-right: 0 }
[dir="ltr"] .me0 { margin-right: 0 }
[dir="rtl"] .me0 { margin-left: 0 }
[dir="ltr"] .ms1 { margin-left: .5rem }
[dir="rtl"] .ms1 { margin-right: .5rem }
[dir="ltr"] .me1 { margin-right: .5rem }
[dir="rtl"] .me1 { margin-left: .5rem }
[dir="ltr"] .ms2 { margin-left: 1rem }
[dir="rtl"] .ms2 { margin-right: 1rem }
[dir="ltr"] .me2 { margin-right: 1rem }
[dir="rtl"] .me2 { margin-left: 1rem }
[dir="ltr"] .ms3 { margin-left: 2rem }
[dir="rtl"] .ms3 { margin-right: 2rem }
[dir="ltr"] .me3 { margin-right: 2rem }
[dir="rtl"] .me3 { margin-left: 2rem }
[dir="ltr"] .ms4 { margin-left: 4rem }
[dir="rtl"] .ms4 { margin-right: 4rem }
[dir="ltr"] .me4 { margin-right: 4rem }
[dir="rtl"] .me4 { margin-left: 4rem }
[dir="ltr"] .msn1 { margin-top: -0.5rem; margin-left: -0.5rem }
[dir="rtl"] .msn1 { margin-top: -0.5rem; margin-right: -0.5rem }
.man1 { margin-after: -0.5rem }
[dir="ltr"] .msn2 { margin-top: -1rem; margin-left: -1rem }
[dir="rtl"] .msn2 { margin-top: -1rem; margin-right: -1rem }
.man2 { margin-after: -1rem }
[dir="ltr"] .msn3 { margin-top: -2rem; margin-left: -2rem }
[dir="rtl"] .msn3 { margin-top: -2rem; margin-right: -2rem }
.man3 { margin-after: -2rem }
[dir="ltr"] .msn4 { margin-top: -4rem; margin-left: -4rem }
[dir="rtl"] .msn4 { margin-top: -4rem; margin-right: -4rem }
.man4 { margin-after: -4rem }
.mtn1 { margin-top: -0.5rem }
.mtn2 { margin-top: -1rem }
.mtn3 { margin-top: -2rem }
.mtn4 { margin-top: -4rem }
[dir="ltr"] .ps0 {
padding-left: 0
}
[dir="rtl"] .ps0 {
padding-right: 0
}
[dir="ltr"] .pe0 {
padding-right: 0
}
[dir="rtl"] .pe0 {
padding-left: 0
}
[dir="ltr"] .ps1 {
padding-left: .5rem
}
[dir="rtl"] .ps1 {
padding-right: .5rem
}
[dir="ltr"] .pe1 {
padding-right: .5rem
}
[dir="rtl"] .pe1 {
padding-left: .5rem
}
[dir="ltr"] .ps2 {
padding-left: 1rem
}
[dir="rtl"] .ps2 {
padding-right: 1rem
}
[dir="ltr"] .pe2 {
padding-right: 1rem
}
[dir="rtl"] .pe2 {
padding-left: 1rem
}
[dir="ltr"] .ps3 {
padding-left: 2rem
}
[dir="rtl"] .ps3 {
padding-right: 2rem
}
[dir="ltr"] .pe3 {
padding-right: 2rem
}
[dir="rtl"] .pe3 {
padding-left: 2rem
}
[dir="ltr"] .ps4 {
padding-left: 4rem
}
[dir="rtl"] .ps4 {
padding-right: 4rem
}
[dir="ltr"] .pe4 {
padding-right: 4rem
}
[dir="rtl"] .pe4 {
padding-left: 4rem
}
[dir=ltr] .start { float: left }
[dir=rtl] .start { float: right }
[dir=ltr] .end { float: right }
[dir=rtl] .end { float: left }
[dir=ltr] .start-0 { left:0 }
[dir=rtl] .start-0 { right: 0}
[dir=ltr] .end-0 { right: 0 }
[dir=rtl] .end-0 { left: 0 }
/*
@import 'text';
*/
/* select all class that start with tooltip */
.tooltip-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);
}
.tooltip:hover ~ .tooltip-text {
display: block;
opacity: 1;
visibility: visible;
}
.tooltip:hover ~ .tooltip-text-center {
left: 50%;
-webkit-transform: translateX(-50%) translateY(0);
transform: translateX(-50%) translateY(0);
-webkit-transition-duration: 0s;
transition-duration: 0s;
}
.tooltip:hover ~ .tooltip-text-left {
left: 0;
}
.tooltip:hover ~ .tooltip-text-right,
[dir=rtl] .tooltip:hover ~ .tooltip-text-left {
left: auto;
right: 0;
}
[dir=rtl] .tooltip:hover ~ .tooltip-text-right {
left: 0;
right: auto;
}
.tooltip a {
color: #fff;
text-decoration: underline;
}
.tooltip-text-width-auto {
width: auto;
}
.tooltip:hover ~ .tooltip-text-bottom {
top: 100%;
}
.tooltip:hover ~ .tooltip-text-top {
top: 15%;
}
.tooltip:hover ~ .tooltip-text-above {
top: -130%;
}
/*Profile Tooltip*/
.tooltip-profile-text {
opacity: 0;
visibility: hidden;
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);
}
.tooltip-profile a {
color: #fff;
text-decoration: underline;
}
.tooltip-profile:hover ~ .tooltip-profile-text {
display: block;
opacity: 1;
visibility: visible;
}
.tooltip-profile:hover ~ .tooltip-action-lg-btn {
left: auto;
right:0;
top: 105%;
}
.tooltip-profile:hover ~ .tooltip-action-sm-btn {
left: auto;
right: 0;
top: -105%;
}
[dir=rtl] .tooltip-profile:hover ~ .tooltip-action-lg-btn {
left: 0;
right:auto;
top: 105%;
}
[dir=rtl] .tooltip-profile:hover ~ .tooltip-action-sm-btn {
left: 0;
right: auto;
top: -105%;
}
@media (max-width: 1242px) {
.tooltip-profile:hover ~ .tooltip-action-lg-btn {
left: 0;
right:auto;
top: -65%;
}
.tooltip-profile:hover ~ .tooltip-action-sm-btn {
left: auto;
right: 0;
top: -105%;
}
[dir=rtl] .tooltip-profile:hover ~ .tooltip-action-lg-btn {
left: auto;
right:0;
top: -65%;
}
[dir=rtl] .tooltip-profile:hover ~ .tooltip-action-sm-btn {
top: -105%;
}
}
.gender-group{
fill: #ddd;
}
.gender-checkbox label,
.gender-checkbox div{
width: 2.25rem;
height: 2.25rem;
}
.gender-checkbox svg {
width: 2rem;
height: 2rem;
display: block;
pointer-events: none;
}
.gender-male :checked ~ div {
background: #c4d6f3;
fill: #608acf;
}
.gender-female :checked ~ div {
background: #f1d6ed;
fill: #a45996;
}
/* For cross site member join landing page */
.discount-badge-landing {
position: absolute;
top: -20px;
}
[dir=rtl] .discount-badge-landing {
left: -20px;
}
[dir=ltr] .discount-badge-landing {
right: -20px;
}
/* For cross promo ad banners */
.discount-badge-banner {
position: absolute;
top: -13px;
}
[dir=rtl] .discount-badge-banner {
left: -13px;
}
[dir=ltr] .discount-badge-banner {
right: -13px;
}
/* For cupid passport page */
.discount-badge-passport {
position: absolute;
top: 0px;
}
[dir=rtl] .discount-badge-passport {
right: 0px;
}
[dir=ltr] .discount-badge-passport {
left: 0px;
}
/* For cross promo modal */
.discount-badge-modal {
position: absolute;
bottom: 8px;
}
[dir=rtl] .discount-badge-modal {
left: 8px;
}
[dir=ltr] .discount-badge-modal {
right: 8px;
}
#modal {
-webkit-box-sizing: border-box;
box-sizing: border-box;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
overflow: hidden;
opacity: 0;
display: none;
}
#modal .highlightAB {
color: #313B59;
}
.modal-open #modal {
opacity: 1;
/* stylelint-disable-next-line declaration-no-important */
z-index: 5000 !important;
-webkit-transition: opacity 1s 0.5s;
transition: opacity 1s 0.5s;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
}
.modal {
display: none;
}
.modal-content {
background-color: #fff;
color: #323232;
max-height: calc(100% - 36px);
}
.oas .modal-content {
max-height: 86%;
}
.modal-content .arrow {
color: #fff;
}
.modal-open .modal {
display: block;
max-height: 90vh;
overflow-y: auto;
}
@media (max-height: 704px){
.modal-open .modal {
max-height: 98vh;
}
}
.modal [aria-controls] {
min-height: 1em;
cursor: pointer;
}
.modal .actions {
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin-top: 20px;
text-align: center;
}
.modal:last-child,
.modal .actions:last-child {
margin-bottom: 0;
}
.modal .btn {
color: #0074d9;
display: block;
margin: 10px 0;
padding: 0.75rem;
width: 100%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: relative;
}
.modal .link {
margin: 0;
padding: 0;
font-weight: 400;
color: #0074d9;
}
.modal .lowercase {
text-transform: lowercase;
}
.modal .counter {
background: #ffffff; /* Old browsers */ /* FF3.6-15 */ /* 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+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0 ); /* IE6-9 */
}
html.modal-open {
width: 100%;
}
/*setting to make registration modal play nice on small screens*/
/*reduce the padding*/
@media(max-width: 1242px){
#registerModal .p3 {
padding: 1rem;
}
#registerModal .icon-30 {
width: 20px;
height: 20px;
}
#registerModal .mb2 {
margin-bottom: 0.5rem;
}
#registerModal .h1 {
font-size: 1.7rem;
}
}
.modal-photos {
/* stop horizontal scroll bar appearing in IE */
overflow-x: hidden;
}
@media (max-height: 750px) {
/* increase the modal max-height as we need all the space */
.modal-open .modal.modal-photos {
max-height: 100vh;
}
}
.big-photo-holder {
width: 500px;
height: 500px;
}
.thumbnail {
width: 60px;
height: 60px;
}
@media (max-height: 672px){
/* reduce thumb-nails to make room for the photo */
.thumbnail {
width: 60px;
height: 60px;
}
}
@media (max-height: 652px){
/* reduce thumb-nails to make room for the photo */
.thumbnail {
width: 50px;
height: 50px;
}
}
@media (max-height: 629px){
/* reduce the big photo to stop scrollbars from appearing */
.big-photo-holder {
width: 72vh;
height: 72vh;
}
}
@media (max-height: 580px){
/* reduce the big photo some more */
.big-photo-holder {
width: 65vh;
height: 65vh;
}
}
#big-photo img {
max-width: 100%;
max-height: 100%;
height: auto;
width: auto;
}
#gallery-big-photo img {
width: auto;
height: 95%;
}
.modal .facebook {
background-color: #3b5998;
}
.mini-modal {
left: 70px;
}
[data-device="tablet"] .mini-modal {
left: 58px;
}
[dir="rtl"] .mini-modal {
left: auto;
right: 70px;
}
[data-device="tablet"][dir="rtl"] .mini-modal {
right: 58px;
}
.mini-modal img {
width: 85px;
height: 95px;
border: #C0BEBE 1px solid;
margin: 0 2px;
}
.mini-modal-details {
width: 280px;
}
.grayscale .mini-modal {
display: none;
}
#modal p a{
color: #D6AD60;
}
/* Landing page overrides */
.section-top::before{
content:"";
width: 100%;
min-height: 97.5vh;
display: block;
position: absolute;
background-image: url(//cdn.elitecupid.com/assets/images/landing/sites/43/homepage.jpg);
background-size: cover;
background-position: 50% 65%;
background-attachment: fixed;
}
.section-top-crosssite::before{
min-height: 100vh;
}
@media (max-width: 800px){
[dir=rtl] .section-top::before{
background-attachment: scroll;
}
}
.section-top.female::before{
background-image: url(//cdn.elitecupid.com/assets/images/landing/v2/43/landing.jpg);
}
[dir=rtl] .section-top::before{
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}
[data-device="tablet"] .section-top::before{
background-attachment: scroll;
}
@media (min-width: 1450px) {
.section-top::before {
background-position: 65%;
}
}
.section-top {
min-height: 97.5vh;
}
.section-top-crosssite {
min-height: 100vh;
}
.height-97 {
min-height: 97.5vh;
}
@media (max-width: 1242px){
.section-top::before {
background-position: 75%;
}
.height-97 {
min-height: 60vh;
}
}
[data-device="tablet"] .section-top,
[data-device="tablet"] .section-top::before {
min-height: 60vh;
}
@media only screen and (orientation: portrait) {
.height-97 {
min-height: 60vh;
}
}
.section-top .h1 {
font-size: 4rem;
}
.section-top h1,
.section-top h2 {
text-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
}
.sdv.section-top h1,
.sdv.section-top h2 {
text-shadow: none;
}
[lang=my] .section-top h1,
[lang=my] .section-top .h1 {
line-height: 6.3rem;
}
.landing-benefits {
color: #fff;
background-color: rgba(0,0,0,0.6);
}
.landing-benefits .dot {
width: 20px;
height: 20px;
background-color: #313B59;
}
.landing-benefits .dot-highlight {
background-color: #D6AD60;
}
.trustbadge {
width: 130px;
height: 56px;
}
.how-it-works .step {
background-color: #313B59;
width: 20px;
height: 20px;
}
.landing-bg-grey{
background-color: #eee;
}
.testimonial img {
width: 100%;
max-width: 200px;
height: auto;
}
.phone .wrapper {
top: 63px;
left: 19px;
width: 251px;
height: 307px;
}
.phone .wrapper .phone-header {
height: 50px;
background-color: #232E4D;
}
.phone .menu-icon {
fill: #fff;
}
.phone .wrapper .card-header .image {
border-width: 2px;
border-color: #fff;
width: 63px;
height: 63px;
background-size: cover;
background-position: center;
}
.phone .wrapper .details {
margin-left: 83px;
}
.phone .wrapper .details .h3 {
font-size: 20px;
color: #565656;
}
.phone .wrapper .details .h5 {
font-size: 14px;
}
.footer {
background-color: #eee;
}
.footer a {
text-decoration: none;
color: #737778;
margin: 5px 0;
font-size: 14px;
}
.footer .col-2 {
width: 20%;
}
@media (max-width: 1242px){
.footer.px4 {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.footer a {
word-wrap: break-word;
padding: 0 5px 0 5px;
font-size: 12px;
}
}
.trademark {
color: #fff;
background-color: #565656;
}
.otherlangs,
.otherlangs a {
color: #fff;
background-color: #565656;
}
.mobileapp {
height: 650px;
}
.mobileapp::before {
content: "";
width: 100%;
min-height: 100%;
display: block;
position: absolute;
background: -webkit-gradient(linear, left top, right top, color-stop(40%, rgba(0,0,0,.7)), to(rgba(0,0,0,0.7))), url(//cdn.elitecupid.com/assets/images/default/mobile_bg/43.jpg) no-repeat bottom;
background: linear-gradient(to right, rgba(0,0,0,.7) 40%, rgba(0,0,0,0.7) 100%), url(//cdn.elitecupid.com/assets/images/default/mobile_bg/43.jpg) no-repeat bottom;
background-size: cover;
background-position: center;
z-index: -1;
}
[dir=rtl] .mobileapp::before {
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}
.mobileapp h2 {
color: #fff;
}
.modal h1 {
text-shadow: none;
font-size: 2.8rem;
line-height: 2.8rem;
}
.seo-link {
font-size: 14px;
-ms-hyphens: auto;
hyphens: auto;
word-wrap: normal;
}
.seo-link a{
margin: 0 0 5px 0;
white-space: pre-wrap;
}
.seo-col-4 {
width: 37.8%;
}
.seo-col-8 {
width: 80%;
}
.section-astro h2 {
color: #313B59;
}
/*# sourceMappingURL=elitecupid-landing.css.map */