﻿* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

/* = Reset
----------------------------------------------------------------------------------------------------------------- */
html, body, div, span, h1, h2, h3, h4, h5, h6, p, hr, a, a img, font, img, dd, dl, dt, li, ol, ul, blockquote, fieldset, form, label, legend, table, caption, tr, th, td { margin: 0; padding: 0; border: 0; font-size: 100%; }

/* = Reset                                                                                                             ----------------------------------------------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700,700i&display=swap');

/* = HTML5 Elements
----------------------------------------------------------------------------------------------------------------- */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
audio, canvas, video { display: inline-block; }

html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
html.noscroll { overflow: hidden; }

@media screen and (max-height: 425px) {
    html.noscroll { overflow: visible; }
}

/* = Body
----------------------------------------------------------------------------------------------------------------- */
body {
    background: #e7f4fa;
    color: #222; line-height: 1.6em; text-align: left;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 17.6px;
}

@media screen and (max-height: 960px) {
    body { font-size: 16.4px; }
}
@media screen and (max-height: 768px) {
    body { font-size: 15px; }
}
@media screen and (max-height: 450px) {
    body { font-size: 14px; }
}

/* = Typography
----------------------------------------------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 { margin: 0 0 20px; color: #222; font-weight: 600; line-height: 1em; }
h1 { font-size: 3.4em; font-family: 'Source Sans Pro', sans-serif; font-weight: normal; }
h1.helpWidgetPresent { min-height: 80px; padding-right: 220px; position: relative; }
h2 { font-size: 2.8em; font-family: 'Source Sans Pro', sans-serif; font-weight: normal; }
h3 { font-size: 2.3em; font-family: 'Source Sans Pro', sans-serif; font-weight: normal; }
h4 { font-size: 1.6em; }
h5 { font-size: 1.2em; }
h6 { font-size: 1.1em; }

@media screen and (max-width: 1200px) {
    h1.helpWidgetPresent { padding-right: 0; }
}

@media screen and (max-width: 740px) {
    h1 { font-size: 2.4em; }
    h2 { font-size: 1.8em; }
    h3 { font-size: 1.6em; }
    h4 { font-size: 1.3em; }
    h5 { font-size: 1.2em; }
    h6 { font-size: 1.1em; }
}

p { margin: 0 0 20px; line-height: 1.6em; }

@media screen and (min-width: 800px) {
    #findSchools .template2col > h2,
    #findSchools .template2col > h2 + p,
    #findSchools .template2col > p:last-of-type { padding-right: 250px; }

    #findSchools .template2col > h2 + p,
    #findSchools .template2col > p:last-of-type,
    #findCards .template2col > h2 + p,
    #findCards .template2col > p:last-of-type { margin-bottom: 40px; }
}


blockquote { margin: 0 0 20px; }
blockquote p { margin: 0; }
blockquote cite { font-size: 0.9em; }

blockquote { position: relative; margin: 0 0 15px; padding-left: 20px; font-size: 100%; font-style: italic; color: #00a4a1; }
blockquote::before { content: "“"; position: absolute; top: -3px; left: -3px; color: #009fda; font-size: 38px; font-style: normal; font-weight: bold; line-height: 1em; }

abbr { text-decoration: underline; text-decoration-style: dotted; }

a { color: #009fda; text-decoration: underline; font-weight: 600; }
a:hover { color: #009fda; text-decoration: none; }

img { vertical-align: bottom; height: auto; -ms-interpolation-mode: bicubic; }
hr { margin: 40px 0; height: 1px; border: 0; border-top: 1px solid #ccc; }
small { font-size: 0.8em; }
address { margin: 0 0 20px; line-height: 1.5em; font-style: normal; }

sub, sup { line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }

pre { margin: 0; }
pre code { font-size: 1.5em; white-space: pre-wrap; }

figure { margin: 0 0 20px; }
figure img { max-width: 100%; }
figcaption { padding-top: 10px; color: #777; font-size: 0.8em; }

.floatLeft { float: left; }
.floatRight { float: right; }
.hide { display: none; }
.hideText { text-indent: 100%; white-space: nowrap; overflow: hidden; }
.clr { clear: both; }
.leader { font-size: 1.2em; line-height: 1.6em; }
.textLeft { text-align: left; }
.textCenter { text-align: center; }
.textRight { text-align: right; }
.highlight { color: #009fda; }
.marked { color: #fff; background: #009fda; }
mark { background-color: #ffc82f; }
.meta { color: #666; font-style: italic; font-size: 0.9em; margin-bottom: 10px; }
.lrgfont { font-size: 3em; }
/* .nsintolight { font-family: 'Shadows Into Light Two'; } */
.extramargin { margin-bottom: 40px; }
.snug { margin-bottom: 0; }
.overlay { display: none; }
.flush { margin-bottom: 0; }
.overlay.show { width: 100%; height: 100%; display: block; position: fixed; background: url(/img/lens.png) repeat; z-index: 10000; }
.overlay.full { top: 0; left: 0; bottom: 0; right: 0; }
.headingsans { font-weight: 600; }
.newmatch { display: inline-block; padding: 0 8px; font-size: 0.85em; font-weight: 600; border: 2px solid #9abd1d; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; }
.unmatched { display: inline-block; padding: 0 8px; font-size: 0.85em; font-weight: 600; border: 2px solid #ccc; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; }
.inamatch { display: inline-block; padding: 0 8px; font-size: 0.85em; font-weight: 600; border: 2px solid #eb7800; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; }
.orangetext { color: #eb7800; font-weight: 600; }
.moreBadges { position: absolute; top: 30px; right: 30px; }
.video { padding: 0 0 0 60px; background: url(/img/resources/video.svg) no-repeat left top; }
.listening { padding: 0 0 0 60px; background: url(/img/resources/listening.svg) no-repeat left top; }
.speaking { padding: 0 0 0 60px; background: url(/img/resources/speaking.svg) no-repeat left top; }
.alt { color: #009fda; }
.strikeout { text-decoration: line-through; }
.center-y { position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); }
.inline-b { display: inline-block; }


/* Spacers */
.marg-t { margin-top: 20px; }
.marg-b { margin-bottom: 20px; }
.h-marg-top { margin-top: 10px; }


/* Icons */
.pin { display: inline-block; padding: 0 0 0 35px; background: url(/img/icons/pin.svg) no-repeat left center; }
.children { padding: 0 0 0 35px; background: url(/img/icons/children.svg) no-repeat left center; }
.offline { padding: 0 0 0 35px; background: url(/img/icons/offline.svg) no-repeat left center; }
.offline b { color: #ca2229; }
.online { padding: 0 0 0 35px; background: url(/img/icons/online.svg) no-repeat left center; }
.online b { color: #9abd1d; }
.matches { padding: 0 0 0 35px; background: url(/img/icons/matches.svg) no-repeat left center; }
.cardssent { padding: 0 0 0 35px; background: url(/img/icons/cards-sent.svg) no-repeat left center; }
.sendoffline { padding: 0 0 0 35px; background: url(/img/icons/send-offline.svg) no-repeat left center; }
.sendonline { padding: 0 0 0 35px; background: url(/img/icons/send-online.svg) no-repeat left center; }
.monthlyswap { padding: 0 0 0 35px; background: url(/img/icons/monthly-swap.svg) no-repeat left center; }
.noholiday { padding: 0 0 0 35px; background: url(/img/icons/no-holiday.svg) no-repeat left center; }
.level { padding: 0 0 0 35px; background: url(/img/icons/level.svg) no-repeat left center; }
.profile { padding: 0 0 0 30px; background: url(/img/icons/matches.svg) no-repeat left center; }
.tooltip_ico { vertical-align: -3px; }

.iconset .meta { font-style: normal; color: #aaa; }

@media screen and (max-width: 740px) {
    .leader { font-size: 1.1em; }
    .moreBadges { position: static; }
}

@media screen and (max-height: 425px) {
    /*.overlay.show { background: #fff; }*/
}

.no-svg .alert { background-image: url(/img/icons/alert.png); }
.no-svg .video { background-image: url(/img/resources/video.png); }
.no-svg .listening { background-image: url(/img/resources/listening.png); }
.no-svg .speaking { background-image: url(/img/resources/speaking.png); }

.no-svg .pin { background-image: url(/img/icons/pin.png); }
.no-svg .children { background-image: url(/img/icons/children.png); }
.no-svg .offline { background-image: url(/img/icons/offline.png); }
.no-svg .matches { background-image: url(/img/icons/matches.png); }
.no-svg .cardssent { background-image: url(/img/icons/cards-sent.png); }
.no-svg .sendonline { background-image: url(/img/icons/send-online.png); }
.no-svg .monthlyswap { background-image: url(/img/icons/monthly-swap.png); }
.no-svg .noholiday { background-image: url(/img/icons/no-holiday.png); }
.no-svg .level { background-image: url(/img/icons/level.png); }

/* = Icons
----------------------------------------------------------------------------------------------------------------- */
.iconset { margin: 0 0 40px; }
.iconset ul { margin: 0; list-style: none; }

/* = Headings
----------------------------------------------------------------------------------------------------------------- */
.headingstudents { font-size: 2em; padding: 5px 0 5px 55px; background: url(/img/icons/students.svg) no-repeat left center; }
.headingstatus { font-size: 2em; padding: 5px 0 5px 55px; background: url(/img/icons/status.svg) no-repeat left center; }
.headingpreferences { font-size: 2em; padding: 5px 0 5px 55px; background: url(/img/icons/preferences.svg) no-repeat left center; }
.headingholidays { font-size: 2em; padding: 5px 0 5px 55px; background: url(/img/icons/holidays.svg) no-repeat left center; }

@media screen and (max-width: 740px) {
    .headingstudents { font-size: 1.6em; }
    .headingstatus { font-size: 1.6em; }
    .headingpreferences { font-size: 1.6em; }
    .headingholidays { font-size: 1.6em; }
}

.no-svg .headingstudents { background-image: url(/img/icons/students.png); }
.no-svg .headingstatus { background-image: url(/img/icons/status.png); }
.no-svg .headingpreferences { background-image: url(/img/icons/preferences.png); }
.no-svg .headingholidays { background-image: url(/img/icons/holidays.png); }

/* = Colours
----------------------------------------------------------------------------------------------------------------- */
.brandlightblue { background: #e7f4fa; }
.brandblue { color: #fff; background: #009fda; }
.branddarkblue { color: #fff; background: #004c76; }
.brandpink { color: #fff; background: #c81f66; }
.brandturquoise { color: #fff; background: #00a4a1; }
.brandyellow { background: #ffc82f; }
.brandgreen { background: #9abd1d; }
.block { display: inline-block; padding: 50px 50px 10px 20px; font-weight: bold; }

@media screen and (max-width: 740px) {
    .block { display: block; }
}

/* = Buttons
----------------------------------------------------------------------------------------------------------------- */
.btn { display: inline-block; padding: 10px 20px; color: #222; font-weight: bold; font-family: 'Source Sans Pro', sans-serif; text-decoration: none; outline: none; cursor: pointer; border: 1px solid #ffc82f; background: #ffc82f; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; }
.btn:hover { color: #222; opacity: 0.8; }
.btnSmall { padding: 5px 10px; }

.btnImpact { color: #fff; border-color: #c81f66; background: #c81f66; }
.btnImpact:hover { color: #fff; }

.btnReport { color: #fff; border-color: #e28724; background: #e28724; }
.btnReport:hover { color: #fff; }


.btnOff { color: #999; border-color: #e7e7e7; background: #dce9ee; cursor: default; }
.btnOff:hover { color: #999; opacity: 1.0; }

.btnSubtle { background: #dce9ee; border-color: #e7e7e7; }

.btnGrey { color: #757575; border-color: #e7e7e7; background: #e7e7e7; }

.btnAction { float: right; border-width: 0; background: transparent; color: #787878; }
.btnAction:hover { background: transparent; color: #787878; }
.btnSuccess,
.btnSuccess:hover { background: #9abd1d; border-color: #9abd1d; color: #fff; }

.btnLoading { padding-left: 35px; border-color: #e7e7e7; background: #e7e7e7 url(/img/loader-sml.gif?2) 10px center no-repeat; color: #757575; }
.btnLoading:hover { background: #e7e7e7; color: #757575; }

input.btn { font-size: 1em; line-height: 1.5em; }

/* = Lists
----------------------------------------------------------------------------------------------------------------- */
ul { margin: 0 0 20px 15px; line-height: 1.5em; }
ul li { margin: 0 0 10px; }
ul li ul { margin-top: 20px; margin-left: 30px; list-style-type: circle; }

ol { margin: 0 0 20px 18px; line-height: 1.5em; }
ol li { margin: 0 0 10px; }
ol li ol { margin-top: 20px; margin-left: 30px; list-style-type: lower-latin; }

dl { margin: 0 0 20px; line-height: 1.5em; }
dt { color: #111; font-weight: bold; }
dd { margin: 0 0 20px; }

.inline { margin-left: 0; list-style: none; }
.inline li { display: inline; margin: 0 15px 0 0; }

.breadcrumb { margin: 0 0 20px; }
.breadcrumb ul { margin: 0; list-style: none; }
.breadcrumb ul li { display: inline; margin: 0; font-size: 0.86em; font-weight: 600; }
.breadcrumb ul li a { color: #111; text-decoration: none; font-weight: 400; }

.progress { margin: 0 auto 20px; position: relative; text-align: center; }
.progress:before { width: 100%; height: 2px; content: ""; position: absolute; top: 19px; bottom: 0; left: 0; background: #cbcbcb; }
.progress ul li { display: inline-block; margin-right: 10px; margin-left: 10px; text-align: center; position: relative; vertical-align: top; }
.progress ul li a { display: inline-block; color: #222; text-decoration: none; }
.progress ul li span { width: 40px; display: block; margin: 0 auto 5px; padding: 20px 0; background: #cbcbcb url(/img/icons/dot.svg) no-repeat center center; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; }
.progress ul li span.text { width: auto; margin-bottom: 0; padding: 0; background: none; }
.progress ul li.progressSuccess span { background-image: url(/img/icons/complete.svg); background-color: #69b239; }
.progress ul li.progressSuccess span.text { background: none; }
.progress ul li.progressActive span { background-image: url(/img/icons/down.svg); background-color: #e28724; }
.progress ul li.progressActive span.text { background: none; }

.no-svg .progress ul li span { background-image: url(/img/icons/dot.png); }
.no-svg .progress ul li.progressSuccess span { background-image: url(/img/icons/complete.png); }
.no-svg .progress ul li.progressActive span { background-image: url(/img/icons/down.png); }

.paging { margin: 0 0 20px; }
.paging ul { margin: 0; list-style: none; }
.paging ul li { display: inline; }
.paging ul li.det { padding-right: 10px; font-size: 0.9em; }
.paging ul li a { display: inline-block; font-weight: normal; font-size: 0.9em; margin-right: 5px; padding: 6px 8px; background: #009fda; color: #fff; text-decoration: none; }
.paging ul li a:hover { background: rgba(0, 76, 118, 0.85); }
.paging ul li a.on { background: #004c76; color: #fff; font-weight: 600; }
.paging_spacer { margin-right: 5px; }

.badges { margin: 0 auto; }
.badges ul li { width: 100px; display: inline-block; margin: 0 25px 10px; padding: 0; font-size: 85%; line-height: 1.1em; vertical-align: top; text-align: center; background-repeat: no-repeat; background-position: top center; background-size: contain; }

.largerlist { list-style: none; }
.largerlist li { font-size: 1.2em; text-indent: -1em; line-height: 1.6em; }
.largerlist li:before { content: "• "; vertical-align: top; font-size: 1.6em; color: #009fda; }

.img_listing,
.img_listing__item { list-style: none; margin: 0; padding: 0; }
.img_listing__item { clear: both; border-bottom: dashed 1px #fff; padding-bottom; margin-bottom: 10px; }
.img_listing__item__img { float: left; margin-bottom: 10px; }
.img_listing .img_listing__item__img__img { width: 60px; }
.img_listing .img_listing__item__details { margin-left: 70px; padding-top: 5px; }
.img_listing__item__details__title { margin-bottom: 5px; font-size: 1.1em; }
.img_listing__item__details__title a { text-decoration: none; }
.img_listing__item__details__title a:hover { text-decoration: underline; }

.img_listing--thumb_big .img_listing__item__img__img { width: 80px; }
.img_listing--thumb_big .img_listing__item__details { margin-left: 90px; }

@media screen and (max-width: 740px) {
    .badges ul { margin-bottom: 0; text-align: center; }
    .badges ul li { margin-bottom: 25px; }

    .largerlist li { font-size: 1.1em; }

    .paging ul li a { margin-bottom: 7px; }

    .paging ul li.det { display: block; }
}

.img-list-btns { display: inline-block; margin: 0 20px 20px 0; text-decoration: none; }
.img-list-btns:hover { text-decoration: none; }
.img-list-btns .img-list-btns--last { margin-right: 0; }
.img-list-btns__img { margin-bottom: 10px; }


/* = Tables
----------------------------------------------------------------------------------------------------------------- */
table { width: 100%; margin: 0 0 20px; border-spacing: 0; border-collapse: collapse; }
th { padding: 15px; background: #009fda; border-bottom: 1px solid rgba(0, 159, 218, 0.4); color: #fff; }
tr:nth-child(even) td { background: #f9f9f9; }
td { padding: 15px; border-bottom: 1px solid #e5e5e5; }
.rowItemStandout td { color: #fff; background: #9abd1d; }

/* = Screen Messages
----------------------------------------------------------------------------------------------------------------- */
.msg { margin: 0 0 20px; padding: 20px; background: #f5f5f5; }
.msg p { margin-bottom: 0; }
.msg ul { margin-bottom: 0; }
.msg ul li { margin-bottom: 5px; list-style-type: none;}

.msgImp { padding-left: 65px; color: #fff; background: #009fda url(/img/icons/important.svg) no-repeat 30px center; }
.msgImp a { color: #fff; font-weight: 600; }
.msgError { padding-left: 65px; color: #fff; background: #CC2030 url(/img/icons/error.svg) no-repeat 20px center; }
.msgError a { color: #fff; font-weight: 600; }
.msgSuccess { padding-left: 65px; color: #fff; background: #9abd1d url(/img/icons/success.svg) no-repeat 20px center; }
.msgSuccess h3 { color: #111; margin: 0 0 10px; }
.msgSuccess a { color: #111; font-weight: 600; }
.msgAssist { padding-left: 65px;  background: #ffc82f url(/img/icons/alert.svg) no-repeat 20px center;}
.msgStatus { color: #fff; margin-top: 30px; position: relative; background-color: #00a4a1; }
.msgStatus h5 { color: #fff; }
.msgStatus span { width: 26px; height: 14px; position: absolute; top: -14px; left: 100px; background: url(/img/tips/green.svg) no-repeat top center; }

.no-svg .msgImp { background-image: url(/img/icons/important.png); }
.no-svg .msgError { background-image: url(/img/icons/error.png); }
.no-svg .msgSuccess { background-image: url(/img/icons/success.png); }
.no-svg .msgStatus span { background-image: url(/img/tips/green.png); }

/* = Columns
----------------------------------------------------------------------------------------------------------------- */
.colsHalf > .col { width: 48%; float: left; margin-right: 4%; }
.colsThird > .col { width: 30%; float: left; margin-right: 5%; }
.colsFourth > .col { width: 22%; float: left; margin-right: 4%; }
.cols > .endCol { margin-right: 0; }

.colsTwoOne > .col { width: 68%; float: left; margin-right: 3%; }
.colsTwoOne > .endCol { width: 29%; margin-right: 0; }

.colsOneTwo > .col { width: 29%; float: left; margin-right: 3%; }
.colsOneTwo > .endCol { width: 68%; margin-right: 0; }

@media screen and (max-width: 740px) {
    .colsHalf > .col,
    .colsThird > .col,
    .colsFourth > .col,
    .colsTwoOne > .col,
    .colsTwoOne > .endCol,
    .colsOneTwo > .col { width: 100%; margin-right: 0; }
    .colsOneTwo > .endCol { width: 100%; }
}

/* = Modules
----------------------------------------------------------------------------------------------------------------- */
.module h3 { margin: 0 0 10px; }

/* = Content Boxes
----------------------------------------------------------------------------------------------------------------- */
.box { margin: 0 0 30px; padding: 30px; position: relative; background: #fff; -moz-box-: 4px 4px 0 rgba(0, 0, 0, 0.1); -webkit-box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1); box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1); }
.box > p:last-child { margin-bottom: 0; }
.boxSkinny { width: 50%; margin: 0 auto; }
.boxBlue { color: #fff; background: #009fda; }
.boxBlue h2, .boxBlue h3,
.boxBlue h4, .boxBlue h5,
.boxBlue a, .boxBlue .meta { color: #fff; }
.boxBlue select { padding: 6px 10px; }
.boxBottom { padding-bottom: 80px; }
.box .lightbox { float: right; width: auto; margin: 0 0 10px 20px; text-align: center; }
.boxForm form > div { margin-bottom: 10px; }

.linkBox { display: block; text-align: center; margin-bottom: 30px; cursor: pointer; }
.linkBox .linkImage { max-width: 150px; margin: 0 auto 16px; }
.linkBox .linkImage img { max-width: 100%; }

.step1 { padding-left: 90px; background: #fff url(/img/steps/1.svg) no-repeat 30px 30px; }
.step2 { padding-left: 90px; background: #fff url(/img/steps/2.svg) no-repeat 30px 30px; }
.step3 { padding-left: 90px; background: #fff url(/img/steps/3.svg) no-repeat 30px 30px; }
.step4 { padding-left: 90px; background: #fff url(/img/steps/4.svg) no-repeat 30px 30px; }
.step5 { padding-left: 90px; background: #fff url(/img/steps/5.svg) no-repeat 30px 30px; }

@media screen and (max-width: 950px) {
    .boxBottom { padding-bottom: 150px; }
}

@media screen and (max-width: 740px) {
    .box { padding: 25px; }
    .boxSkinny { width: auto; }
    .boxBottom { padding-bottom: 150px; }

    .step1, .step2, .step3, .step4, .step5, .step6, .step7, .step8 { padding-left: 85px; background-position: 25px 25px; }
}

@media screen and (max-width: 450px) {
    .boxBottom { padding-bottom: 200px; }

    .step1, .step2, .step3, .step4, .step5, .step6, .step7, .step8 { padding-left: 75px; background-position: 20px 25px; background-size: 36px; }
}

.no-svg .step1 { background-image: url(/img/steps/1.png); }
.no-svg .step2 { background-image: url(/img/steps/2.png); }
.no-svg .step3 { background-image: url(/img/steps/3.png); }
.no-svg .step4 { background-image: url(/img/steps/4.png); }
.no-svg .step5 { background-image: url(/img/steps/4.png); }

/* = Back to top
----------------------------------------------------------------------------------------------------------------- */
.back_to_top { background: rgba(0, 159, 218, 0.5) none repeat scroll 0 0; border-radius: 10% 10% 0 0; bottom: 0; padding: 7px; position: fixed; right: 20px; z-index: 1000; }
.back_to_top:hover { background: rgba(0, 159, 218, 0.8); }

/* = Tabs
----------------------------------------------------------------------------------------------------------------- */
.tabs { margin: 0 0 20px; }
.tabs > ul { margin: 0; list-style: none; overflow: hidden; }
.tabs > ul li { display: inline; margin: 0 10px 0 0; text-align: center; }
.tabs > ul li a { width: 200px; display: inline-block; color: #111; padding: 15px 20px; text-decoration: none; background: #cae1e9; }
.tabs > ul li a:hover { background: #fff; }
.tabs > ul li a.on { background: #fff; -moz-box-: 4px 4px 0 rgba(0, 0, 0, 0.1); -webkit-box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1); box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1); }
.tabs__current_tab { display: none; }

.tabs .panel { padding: 30px; position: relative; background: #fff; z-index: 1; -moz-box-: 4px 4px 0 rgba(0, 0, 0, 0.1); -webkit-box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1); box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1); }

.tabs--sml > ul li a { width: 150px; }

.tabs--wrapped { position: relative; }
.tabs--wrapped .tabs__current_tab { display: block; width: 100%; color: #111; padding: 15px 20px; background: #cae1e9; cursor: pointer; font-weight: bold; }
.tabs--wrapped .tabs__current_tab:after { content: " "; position: absolute; right: 15px; top: 16px; width: 21px; height: 20px; background: url(/img/icons/menu.svg); }
.tabs--wrapped > ul { display: none; position: absolute; top: 54px; width: 100%; border-bottom: solid 2px #cae1e9; border-top: solid 1px #fff; z-index: 1000; }
.tabs--wrapped > ul > li { display: block; width: 100%; }
.tabs--wrapped > ul li a,
.tabs--sml.tabs--wrapped > ul li a { width: 100%; text-align: left; }
.tabs--wrapped_open > ul { display: block; }

.no-js .tabs ul { display: none; }
.no-js .tabs .panel { margin: 0 0 20px; }

@media screen and (max-width: 480px) {
    .tabs .panel { padding: 25px; }
}

@media screen and (max-width: 380px) {
    .tabs .panel { padding: 20px; }
}

/* = Accordions
----------------------------------------------------------------------------------------------------------------- */
.accordion { margin: 0 0 20px; }
.accordion h3 { display: block; color: #fff; margin: 0 0 10px; padding: 15px 45px 15px 15px; font-size: 1.3em; font-family: 'Source Sans Pro', sans-serif; background: #009fda; position: relative; }
.accordion h3:after { content: '+'; font-family: 'Source Sans Pro', sans-serif; font-size: 1.3em; position: absolute; right: 15px; top: 15px; }
.accordion h3:hover { cursor: pointer; background: #c81f66; }
.accordion h3.on { background: #c81f66; }
.accordion h3.on:after { content: '-'; }
.accordion .content { display: none; }
.accordion .content.contentopen { display: block; }

.no-js .accordion .content { display: block; }

.faqsAccordion { width: 70%; margin: 0 auto; margin-top: 30px; }

@media screen and (max-width: 740px) {
    .faqsAccordion { width: 90%; }
}


/* = Forms
----------------------------------------------------------------------------------------------------------------- */
.webForm div { margin: 0 0 15px; }
.webForm div em.req { display: block; color: red; }
.webForm div label em.req { display: inline-block; }

label { display: inline-block; padding: 0 0 5px; font-weight: 600; }
label.subtle { font-weight: 400; }
input.text, textarea, select { width: 100%; padding: 10px; font-size: 1em; font-family: 'Source Sans Pro', sans-serif; border: 1px solid #e8f0f3; background: #e8f0f3; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; }
input.text:focus, textarea:focus, select:focus { outline: none; border-color: #ccc; }
input.text--sml { width: 50%; }
input.file { margin: 8px 0; }

label.lbl-inline { display: inline; }

input.input--error,
select.input--error { padding: 9px; border: solid 2px #ff0033; background: #f1f1f1; }
textarea.input--error { border: solid 2px #ff0033; background: #f1f1f1; }

.formList { display: block; }
.formList label { padding: 0; font-weight: 400; }
.formList input { margin: 0 10px 0 0; padding: 0; border: 0; }

.checkbox { float: left; padding: 6px 10px 0 0; }
.checkbox input { float: left; margin: 0; padding: 0; border: 0; }

.accountConsent .checkbox { float: left; padding: 0 10px 0 0; }

.check { display: inline-block; padding: 12px 0 0; }
.check input { float: left; margin: 0; padding: 0; border: 0; }
.lbl-check { float: none; }
.label_chk_inline { display: block; margin-left: 30px; }

.img_form__caption { margin-top: 10px; }
.img_form__caption__field { height: 70px; }

.webForm div.checkbox_options { margin: 10px 0 20px; padding: 15px 30px; background: #fafafa; border: solid 1px #f1f1f1; }
.webForm div.checkbox_options > div > span { margin-right: 15px; }
.webForm div.checkbox_options > div > div { margin-bottom: 5px; }
.webForm div.checkbox_options input.text { background: #fff; }

.webForm div.checkbox_options--nopad { padding-bottom: 0; }
.webForm div.checkbox_options.input--error { border: solid 2px #ff0033; background: #f1f1f1; }

.checkbox input[type="checkbox"] { float: left; margin: 6px 0 0; }
.checkbox label { display: block; margin: 0 0 5px 20px; }


@media screen and (max-width: 740px) {
    input.text, textarea, select { width: 100%; }
    input.file { margin-top: 0; margin-bottom: 0; }

    .formList { padding-top: 0; padding-bottom: 0; }

    .checkbox { padding-top: 5px; }
    .webForm div.checkbox_options { padding: 10px 15px; }
    .webForm div.checkbox_options--nopad { padding-bottom: 0; }
}


.table-wrap { overflow-y: auto; width: 100%; margin: 0 0 20px; }
.table-wrap .btn { margin-bottom: 5px; }

.cardMessage{width: 65%; height: 200px;}

button{font-size: 100%}

.boxForm .checkbox{width: 100%}

/* = Modals
----------------------------------------------------------------------------------------------------------------- */
.modal { position: fixed; background-color: rgba(255, 255, 255, 0.9); top: 0; left: 0; right: 0; bottom: 0; text-align: left; z-index: 10; }

.modal__frame { width: 100%; height: 100%; margin: 0 auto; }
.modal__content-wrap {
    position: relative;
    top: 50%;
    width: 100%;
    min-height: 100px;
    max-height: 100%;
    overflow-y: auto;
    background: #fff;
    -webkit-overflow-scrolling: touch;
    transform: translateY(-50%);
    box-shadow: 0px 3px 10px rgba(0,0,0,0.1);
}
.modal__content { padding: 20px 30px; }
.modal__close { position: absolute; top: 0; right: 20px; margin-top: 20px; width: 16px; height: 16px; background: #fff url(/img/icons/cross.svg) center center no-repeat; }

@media screen and (min-width: 600px) {
    /* .modal { top: 5%; height: 90%; } */
    .modal__frame { padding: 0 20px; }
}

@media screen and (min-width: 700px) {
    .modal__frame { padding: 0 50px; }
}

@media screen and (min-width: 1024px) {
    .modal__frame { width: 900px; margin: 0 auto; }
}


/* = Clearing
----------------------------------------------------------------------------------------------------------------- */
.container, .cols, .progress, .carousel, .matchstatus, .accountsteps, .box, .clrd { zoom: 1; }
.container:after, .cols:after, .progress:after, .carousel:after, .matchstatus:after, .accountsteps:after, .box:after, .clrd:after { content: "."; clear: both; display: block; height: 0; visibility: hidden; overflow: hidden; }

/* = Profile tweak
----------------------------------------------------------------------------------------------------------------- */
.tabs__current_tab{display:none;}
