/* = Framework
----------------------------------------------------------------------------------------------------------------- */
header { background: #fff; border-bottom: solid 1px #e9e9e9; }
header .cards { float: right; margin: 46px 0 0; padding: 0 0 0 35px; color: #111; font-size: 1.2em; font-weight: 400; text-decoration: none; background: url(/img/theme/cards.svg) no-repeat left center; background-size: auto 100%; }
header .schools { float: right; margin: 25px 0 0 40px; padding: 0 0 0 35px; color: #111; font-size: 1.2em; font-weight: 400; text-decoration: none; background: url(/img/theme/schools.png) no-repeat left center; background-size: auto 100%; }
header .other { float: right; margin: 46px 40px 0 0; padding: 0; color: #111; font-size: 1.2em; font-weight: 400; text-decoration: none; }
header .btn { float: right; margin: 15px 0 0 42px; font-size: 1.2em; }
header .accountmenu { position: relative; float: right; margin: 25px 0 0 0; }
header .accountmenu a { display: inline-block; color: #111; font-size: 1.2em; font-weight: 400; text-decoration: none; }
header .accountmenu a:hover { text-decoration: underline; }
header .accountmenu > a { display: none; position: relative; padding-right: 20px; }
header .accountmenu ul { margin: 5px 0 0; list-style: none; }
header .accountmenu ul li { display: inline; margin: 0 30px 0 0; }
header .accountmenu ul li a { }
header .accountmenu ul li a.on { text-decoration: underline; }
header .accountmenu__count { display: inline-block; margin-left: 3px; width: 24px; height: 24px; line-height: 24px; background: #009fda; color: #fff; border-radius: 50%; font-size: 12px; text-align: center; vertical-align: 2px; }
header .accountmenu_mob { display: none; }
header .accountmenu_desk { display: inline; }


main { padding: 10px 0 40px; background: #f9f9f9; }
body#bodyHome main { padding-top: 0; padding-bottom: 0; }

footer { padding-top: 20px; background: #222; }
footer img { max-width: 100%; }

.container { width: 1240px; margin: 0 auto; position: relative; }
.skinny { width: 900px; margin: 0 auto; position: relative; }

.maxWidthText { max-width: 700px; }
.maxWidthChildren .container .leader { max-width: 700px; display: block; margin-left: auto; margin-right: auto; }
.maxWidthChildren > p { max-width: 700px; }
/* .maxWidthChildren > h1 ~ p { margin-left: auto; margin-right: auto; } */
.centerBlock { display: block; margin-left: auto; margin-right: auto; }

.coloured { background: #f2a900; }
.pinkBackground { color: #fff; background-color: #c81f66; }
.pinkBackground h2 { color: inherit; }

.quoteMark { font-size: 10em; color: rgba(255, 255, 255, 0.8); padding-top: 50px; }

@media screen and (max-width: 1340px) {
    .container { width: auto; margin-right: 40px; margin-left: 40px; }

    header .accountmenu > a { display: inline-block; }
    header .accountmenu > a::after { content: ""; position: absolute; top: 10px; right: 0; width: 11px; height: 7px; background: url('/img/icons/dropdown.svg') right center no-repeat; }
    header .accountmenu ul { z-index: 1000; display: none; position: absolute; top: 100%; right: 0; margin: 5px 0 0; padding: 5px 0; background: #fff; border: solid 1px #eee; }
    header .accountmenu ul li { margin: 0; }
    header .accountmenu ul li a { padding: 5px 35px 5px 15px; min-width: 180px; }
    header .accountmenu_mob { display: inline; }
    header .accountmenu_desk { display: none; }

    header .accountmenu.open > a::after { transform: rotate(180deg); }
    header .accountmenu.open ul { display: block; }
}

@media screen and (max-width: 900px) {
    .skinny { width: auto; margin-right: 25px; margin-left: 25px; }
}

@media screen and (max-width: 768px) {
    header .cards { margin-top: 36px; font-size: 1em; }
    header .schools { font-size: 1em; }
    header .btn { font-size: 1em; }

    main { padding-bottom: 25px; }
}

@media screen and (max-width: 700px) {
    .container { margin-right: 35px; margin-left: 35px; }

    header .schools { margin-bottom: 10px; }
    header .accountmenu { clear: both; margin-top: 0; margin-bottom: 10px; }
}

@media screen and (max-width: 640px) {
    .container { margin-right: 30px; margin-left: 30px; }
	header .btn { padding: 5px 5px; font-weight: normal; margin-left: 0; }
    header .cards { display: none; }
    header .schools { display: none; }
}

@media screen and (max-width: 420px) {
    .container { margin-right: 25px; margin-left: 25px; }
    
}

@media screen and (max-width: 380px) {
	.logo { float: none; }
	header .btn { float: none; display: block; clear: both; margin-bottom: 10px; }
	header .accountmenu { float: none; }
}

.no-svg header .cards { background-image: url(/img/icons/cards.png); }
.no-svg header .schools { background-image: url(/img/icons/schools.png); }
.no-svg header .accountmenu > a::after { background-image: url(/img/icons/dropdown.png); }

.no-js header .nojavascript { margin: 0; padding: 10px 15px; text-align: center; background-image: none; }


/* = Templates
----------------------------------------------------------------------------------------------------------------- */
.template { padding: 40px 0; }

.template2col section { width: 70%; float: right; margin-top: 10px; }
.template2col aside { width: 25%; float: left; margin-top: 10px; }
.template2col aside img { width: 100%; }

.template2col--alt section { float: left; }
.template2col--alt aside { float: right; }

@media screen and (max-width: 1000px) {
    .template2col section { width: 60%; }
    .template2col aside { width: 35%; }
}

@media screen and (max-width: 740px) {
    .template2col section { width: 100%; }
    .template2col aside { width: 100%; }
}

/* Skinny template */
#bodyReg main h1,
#bodyReg main .leader { text-align: center; }
#bodyReg main h1.helpWidgetPresent { padding-left: 220px; }
#bodyReg .checkbox { padding-top: 0; }

/* */
.body-logged-in li.nav-hide-user { display: none; }

@media screen and (max-width: 1200px) {
    #bodyReg main h1.helpWidgetPresent { padding-left: 0; }
}


/* = Sub nav
----------------------------------------------------------------------------------------------------------------- */
.navSub,
.navSub li { list-style: none; margin: 0; padding: 0; }
.navSub li { padding-left: 23px; background: url(/img/icons/subnav-bullet.svg) left 5px no-repeat; }
.navSub li a { color: #111; text-decoration: none; font-weight: 400; }
.navSub li a:hover { text-decoration: underline; }

.no-svg .navSub li { background-image: url(/img/icons/subnav-bullet.png); }

/* = Strip
----------------------------------------------------------------------------------------------------------------- */
.strip { padding: 15px 0; background: #fff; border-bottom: 1px solid #dedede; }
.strip .theme { float: right; margin: 0 40px 0 0; position: relative; }
.strip .theme .select { padding: 0 20px 0 0; color: #111; text-decoration: none; background: url(/img/icons/dropdown.svg) no-repeat right center; }
.strip .settings { float: right; margin: 0 40px 0 0; padding: 0 0 0 25px; color: #111; text-decoration: none; background: url(/img/icons/settings.svg) no-repeat left center; }
.strip .login { float: right; margin: 0; padding: 0 0 0 25px; color: #111; text-decoration: none; background: url(/img/icons/login.svg) no-repeat left center; }

.strip .theme .switch { width: 115px; display: block; color: #111; padding: 10px 15px; text-decoration: none; position: absolute; top: -60px; right: 0; -moz-transition: all 300ms ease 0s; -webkit-transition: all 300ms ease 0s; transition: all 300ms ease 0s; }
.strip .theme .switch.open { top: 39px; background: #fff; z-index: 9; }

@media screen and (max-width: 520px) {
    .strip .theme { margin-right: 25px; }
    .strip .settings { margin-right: 15px; padding-left: 18px; font-size: 0; }
    .strip .login { padding-left: 18px; font-size: 0; }
}

.no-svg .theme { background-image: url(/img/icons/dropdown.png); }
.no-svg .settings { background-image: url(/img/icons/settings.png); }
.no-svg .login { background-image: url(/img/icons/logo.png); }

.no-js .strip .theme ul { top: 16px; }
.no-js .strip .theme ul li a { padding: 6px; }


/* = Logo
----------------------------------------------------------------------------------------------------------------- */
.logo { width: 220px; height: 38px; float: left; display: block; margin: 20px 0; background: url(/img/logo.svg) no-repeat top left; }

@media screen and (max-width: 768px) {
    .logo { width: 175px; height: 30px; margin-bottom: 20px; background-size: auto 100%; }
}

/* @media screen and (max-width: 400px) {
    .logo { width: 135px; height: 50px; }
} */

.no-svg .logo { background-image: url(/img/logo.png); }


/* = Menu
----------------------------------------------------------------------------------------------------------------- */
.menu { width: 300px; height: 100%; padding: 75px 30px 0; position: fixed; top: 0; left: -300px; background: #fff; z-index: 10001; -moz-transition: all 300ms ease 0s; -webkit-transition: all 300ms ease 0s; transition: all 300ms ease 0s; }
.menu ul { margin: 0; list-style: none; }
.menu ul li { margin: 0 0 15px; font-size: 1.1em; position: relative; }
.menu ul li a { display: block; text-decoration: none; }
.menu ul li a:hover { color: #111; }
.menu.open { left: 0; }

.menuTrigger { padding: 0 0 0 35px; color: #111; text-decoration: none; background: url(/img/icons/menu.svg) no-repeat left center; }
.menuTriggerClose { padding: 0 0 0 25px; color: #111; text-decoration: none; position: absolute; top: 20px; left: 30px; background: url(/img/icons/cross.svg) no-repeat left 5px; }

@media screen and (max-height: 425px) {
    .menu { position: absolute; }
}

@media screen and (max-width: 360px) {
    .menu { width: 270px; left: -270px; }

    .menuTrigger { display: inline-block; padding-left: 21px; font-size: 0; vertical-align: top; }
}

.no-svg .menuTrigger { background-image: url(/img/icons/menu.png); }
.no-svg .menuTriggerClose { background-image: url(/img/icons/cross.png); }

.no-js .menu { width: 275px; height: auto; padding-top: 25px; top: auto; left: 0; bottom: 0; -moz-transition: none; -webkit-transition: none; transition: none; }
.no-js .menuTrigger { display: none; }
.no-js .menuTriggerClose { display: none; }


/* = Sub Menu
----------------------------------------------------------------------------------------------------------------- */
.submenu { margin: 0 0 20px; }
.submenu ul { margin: 0; list-style: none; }
.submenu ul li { display: block; margin: 0; border-bottom: 1px solid #ccc; }
.submenu ul li a { display: block; padding: 10px 15px; color: #333; background: #eee; }
.submenu ul li a:hover { background: #ddd; }
.submenu ul li:last-child { border-bottom: 0; }


/* = Hero
----------------------------------------------------------------------------------------------------------------- */
.hero {
    position: relative;
    text-align: left;
    min-height: 500px;

    background-color: #f3f3f3;
    background-position: bottom right;
    background-repeat: no-repeat;
    background-size: 100%;
}
.hero .hero-content { position: absolute; width: 450px; right: 25px; margin-left: -620px; top: 50px; left: 50%; line-height: 1.2em; }
.hero .hero-content {  width: 450px; }

.hero h1 { width: 500px; margin-bottom: 25px; margin-left: auto; margin-right: auto; font-family: 'Source Sans Pro', sans-serif; font-weight: 600; line-height: 1.2em; }
.hero p { max-width: 760px; margin: 0 auto 20px; }
.hero p.button { margin-top: 25px; width: auto; font-size: 1.4em; }
.hero p:last-child { margin-bottom: 0; }
.hero img { width: 100%; }

@media screen and (max-width: 1300px) {
    .hero .hero-content { width: 450px; max-width: 95%; margin-left: 0; top: 40px; left: 20px; line-height: 1.2em; }
    .hero p.button { width: auto; margin-left: 0; top: 200px; left: 20px; }
}
@media screen and (max-width: 1100px) {
    .hero .hero-content { width: 400px; }
}
@media screen and (max-width: 870px) {
    .hero h1 { font-size: 2.6em; }
}
@media screen and (max-width: 740px) {
    .hero p.button { font-size: 1em; }
}
@media screen and (max-width: 630px) {
    .hero { padding: 0; }
    .hero .hero-content { position: relative; top: 0; left: 0; right: 0; padding: 30px; }

    .hero h1 { font-size: 1.6em; margin-bottom: 20px; }
    .hero p.button { margin-top: 20px; }
}
@media screen and (max-width: 440px) {
    .hero h1 { width: auto; top: 0; right: 25px; left: 25px; line-height: 1.2em; }
}
@media screen and (min-width: 951px) and (max-width: 1260px) {
    /* .hero { padding-bottom: 505px; height: 0; background-size: cover; background-position: 75% 50%; } */
    .hero img { opacity: 0; }
    .hero p { max-width: 900px; }
}
@media screen and (max-width: 950px) {
    .hero > .hero { padding-top: 245px; background-size: 600px; background-position: top right; }
    .hero img { display: none; }
    .hero .hero-content { top: 0; left: 0; padding: 30px; max-width: none; width: 100%; position: relative; text-align: center; background:#fff; }
    .hero .hero-content h1,
    .hero .hero-content p {  width: 100%; color:#222;  }
    .hero .hero-content p:last-child { margin-bottom:0; }
}


/* = Numbers
----------------------------------------------------------------------------------------------------------------- */
.numbers { color: #fff; padding: 20px; font-size: 1.3em; background: #004c76; width: 100%; position: absolute; bottom: 0; left: 0; background-color: rgba(0, 159, 219, 0.9); }
.numbers p { margin: 0; }
.numbers p span { margin: 0 10px 0 0; font-family: 'Source Sans Pro', sans-serif; font-weight: 300; font-size: 2em; vertical-align: middle; }

@media screen and (max-width: 950px) { .numbers { position: relative; } }
@media screen and (max-width: 740px) {
    .numbers { position: static; padding-right: 0; padding-bottom: 10px; padding-left: 0; font-size: 1em; }
    .numbers p { margin-bottom: 10px; }

    .numbers .col { margin-bottom: 12px; }
}


/* = Numbers - Bubbles
----------------------------------------------------------------------------------------------------------------- */
.bubble_info { display: block; height: 108px; width: 190px; text-align: center; background: url(/img/cloud-cards.png) no-repeat center center; }
.bubble_info h2 { color: #ea4397; font-size: 3em; font-weight: normal; line-height: 0.7em; margin: 22px 0 5px; }
.bubble_info p { font-size: 1.1em; }


/* = News
----------------------------------------------------------------------------------------------------------------- */
.news { margin: 0; }
.news > ul { margin: 0; list-style: none; }
.news > ul > li { display: inline-block; margin: 0 0 30px; padding: 0 0 10px; border-bottom: 1px solid #ccc; }
.news > ul > li h3 { margin: 0 0 10px; line-height: 1em; }
.news > ul > li h4 { margin: 0 0 10px; }
.news > ul > li img { width: 20%; float: left; margin: 0 20px 20px 0; }
.news > ul > li .meta { margin: 0 0 20px; }
.news > ul > li .pin { padding-left: 25px; }
.news > ul > li:last-child { margin: 0; padding: 0; border: 0; }

.newsmodule > ul > li { display: block; margin: 0 0 20px; padding: 0; border: 0; }
.newsmodule > ul > li h4 { margin: 0 0 5px 80px; line-height: 1.4em; font-size: 1.1em; }
.newsmodule > ul > li p { display: block; margin: 0 0 0 80px; }
.newsmodule > ul > li img { width: 68px; margin: 0; }
.newsmodule ul li h4 a { color: #222; text-decoration: none; }
.newsmodule ul li h4 a:hover { text-decoration: underline; }

.newsfeature > ul > li { display: block; position: relative; }
.newsfeature > ul > li h4 { margin: 0 0 10px 80px; }
.newsfeature > ul > li p { display: block; margin: 0 0 0 80px; }
.newsfeature > ul > li img { width: 68px; margin: 0; }
.newsfeature > ul > li .nextaction {float: left}

.newsview h1 { margin: 0 0 5px; }
.newsview h2 { margin: 0 0 5px; }
.newsview img { width: 40%; float: right; margin: 0 0 20px 20px; }
.newsview .meta { margin: 0 0 20px; }

@media screen and (max-width: 740px) {
    .newsfeature ul li .nextaction { display: none; }
}

@media screen and (max-width: 480px) {
    .newsview img { width: 100%; float: none; margin-left: 0; }
}


/* = Banners
----------------------------------------------------------------------------------------------------------------- */
.banner { margin: 0; }
.banner img { max-width: 100%; margin: 0 0 20px; }

.bannersrepeater ul { margin: 0; list-style: none; }
.bannersrepeater ul li { margin: 0; }


/* = How it Works
----------------------------------------------------------------------------------------------------------------- */
.howitworks { padding: 230px 0 0; background-size: 180px; background-repeat: no-repeat; background-position: top 20px center; }
.howitworks span { display: block; line-height: 1.2em; font-size: 1.6em; font-style: italic; }

.howitworks1 { background-image: url(/img/theme/howitworks/1.svg); }
.howitworks2 { background-image: url(/img/theme/howitworks/2.svg); }
.howitworks3 { background-image: url(/img/theme/howitworks/3.svg); }

.no-svg .howitworks1 { background-image: url(/img/howitworks/1.png); }
.no-svg .howitworks2 { background-image: url(/img/howitworks/2.png); }
.no-svg .howitworks3 { background-image: url(/img/howitworks/3.png); }


/* = Match Status
----------------------------------------------------------------------------------------------------------------- */
.matchstatus { position: relative; }
.matchstatus:before { width: 100%; height: 10px; content: ""; position: absolute; top: 14px; bottom: 0; left: 0; background: #61bfbe; }
.matchstatus ul { margin: 0; list-style: none; }
.matchstatus ul li { width: 25%; float: left; margin: 0; padding: 50px 0 0; text-align: center; position: relative; vertical-align: top; background: url(/img/icons/match-incomplete.svg) no-repeat top center; z-index: 1; }
.matchstatus ul li.complete b { padding: 50px 0 0; position: relative; background: url(/img/icons/match-complete.svg) no-repeat top center; }
.matchstatus ul li.complete:before { width: 100%; height: 10px; content: ""; position: absolute; top: 14px; bottom: 0; left: 0; background: #fff; }
.matchstatus ul li .btn { margin: 10px 0 10px; }
.matchstatus a { color: #fff; text-decoration: none; }
.matchstatus a:hover { text-decoration: underline; }

@media screen and (max-width: 650px), screen and (min-width: 740px) and (max-width: 1000px) {
    .matchstatus:before { display: none; }
    .matchstatus ul li { width: 50%; padding-bottom: 20px; }
    .matchstatus ul li:nth-child(2n + 1) { clear: both; }
    .matchstatus ul li.complete:before { display: none; }
}

@media screen and (max-width: 400px) {
    .matchstatus ul li { width: 100%; padding-bottom: 10px; }
}


/* = Notifications
----------------------------------------------------------------------------------------------------------------- */
.notifications { width: 97%; margin: 0; }
.notifications ul { margin: 0; list-style: none; }
.notifications ul li { margin: 0; padding: 17px 0 17px 40px; border-bottom: 2px solid #eee; background: url(/img/icons/notification.svg) no-repeat left center; }
.notifications ul li:last-child { border-bottom: 0; }
.notifications ul li small { text-transform: uppercase; }
.notifications .btn { margin-bottom: 10px; }

.notifications__actions { float: right; margin-left: 20px; color: #8a8a8a; }
.notifications__actions a { color: #8a8a8a; text-decoration: underline; }
.box .col .notifications .notifications__actions a.btnSuccess {background:none;}
.notifications__actions a:hover { text-decoration: none; }
.notifications__dismissed { text-decoration: line-through; }

@media screen and (max-width: 740px) {
    .notifications ul li small { float: none; display: block; margin: 10px 0 0; }
}

.no-svg .notifications ul li { background-image: url(/img/icons/notification.png); }


/* = Balloon Completion
----------------------------------------------------------------------------------------------------------------- */
.balloon { padding: 20px 0 0 125px; position: relative; background: url(/img/balloon.svg) no-repeat left 10px; }
.balloon .complete { margin: 0 0 10px; font-size: 1.1em; }
.balloon .complete span { font-size: 3.1em; color: #00a4a1; font-weight: 600; }
.balloon .add { display: block; padding: 0 0 0 15px; color: #111; text-decoration: none; background: url(/img/icons/plus.svg) no-repeat left 5px; }
.balloon .percent { width: 88px; height: 88px; font-size: 0; position: absolute; top: 20px; left: 10px; background: #00a4a1; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; clip: rect(88px, 88px, 88px, 0); -webkit-transition: all 1.5s ease-out; -moz-transition: all 1.5s ease-out; transition: all 1.5s ease-out; }
.balloon.balloon_load .percent5 { clip: rect(83.6px, 88px, 88px, 0); }
.balloon.balloon_load .percent10 { clip: rect(79.2px, 88px, 88px, 0); }
.balloon.balloon_load .percent15 { clip: rect(74.8px, 88px, 88px, 0); }
.balloon.balloon_load .percent20 { clip: rect(70.4px, 88px, 88px, 0); }
.balloon.balloon_load .percent25 { clip: rect(66px, 88px, 88px, 0); }
.balloon.balloon_load .percent30 { clip: rect(61.6px, 88px, 88px, 0); }
.balloon.balloon_load .percent35 { clip: rect(57.2px, 88px, 88px, 0); }
.balloon.balloon_load .percent40 { clip: rect(52.8px, 88px, 88px, 0); }
.balloon.balloon_load .percent45 { clip: rect(48.4px, 88px, 88px, 0); }
.balloon.balloon_load .percent50 { clip: rect(44px, 88px, 88px, 0); }
.balloon.balloon_load .percent55 { clip: rect(39.6px, 88px, 88px, 0); }
.balloon.balloon_load .percent60 { clip: rect(35.2px, 88px, 88px, 0); }
.balloon.balloon_load .percent65 { clip: rect(30.8px, 88px, 88px, 0); }
.balloon.balloon_load .percent70 { clip: rect(26.4px, 88px, 88px, 0); }
.balloon.balloon_load .percent75 { clip: rect(22px, 88px, 88px, 0); }
.balloon.balloon_load .percent80 { clip: rect(17.6px, 88px, 88px, 0); }
.balloon.balloon_load .percent85 { clip: rect(13.2px, 88px, 88px, 0); }
.balloon.balloon_load .percent90 { clip: rect(8.8px, 88px, 88px, 0); }
.balloon.balloon_load .percent95 { clip: rect(4.4px, 88px, 88px, 0); }
.balloon.balloon_load .percent100 { clip: rect(0, 88px, 88px, 0); }

@media screen and (max-width: 425px), screen and (min-width: 740px) and (max-width: 1100px) {
    .balloon { padding-top: 200px; padding-left: 0; }
}

.no-svg .balloon { background-image: url(/img/balloon.png); }


/* = Cambs English Message
----------------------------------------------------------------------------------------------------------------- */
.cambsenglish { width: 100%; padding: 20px 30px; color: #fff; position: absolute; bottom: 0; left: 0; background: #005d7c url(/img/books.png) no-repeat right 30px bottom; background-size: auto 75%; }
.cambsenglish p { margin: 0; }
.cambsenglish p a { color: #ffc82f; text-decoration: none; }

@media screen and (max-width: 950px) {
    .cambsenglish { padding-bottom: 80px; word-wrap: break-word; background-position: 30px bottom; background-size: auto; }
}


/* = Account
----------------------------------------------------------------------------------------------------------------- */
.accountsteps { max-width: 1000px; margin: 0 auto 40px; position: relative; }
.accountsteps:before { width: 100%; height: 5px; content: ""; position: absolute; top: 30px; bottom: 0; left: 0; background: #cedfe7; }
.accountsteps ul { margin: 0; list-style: none; }
.accountsteps ul li { width: 33.333333%; float: left; margin: 0; padding: 70px 0 0; text-align: center; position: relative; vertical-align: top; background-repeat: no-repeat; background-position: top center; z-index: 1; }
.accountsteps ul li.logininfo { background-image: url(/img/account/login-info-on.svg); }
.accountsteps ul li.schooldetails { background-image: url(/img/account/school-details.svg); }
.accountsteps ul li.schooldetails.on { background-image: url(/img/account/school-details-on.svg); }
.accountsteps ul li.students { background-image: url(/img/account/students.svg); }
.accountsteps ul li.students.on { background-image: url(/img/account/students-on.svg); }
.accountsteps ul li.logoandimages { background-image: url(/img/account/logo-images.svg); }
.accountsteps ul li.logoandimages.on { background-image: url(/img/account/logo-images-on.svg); }
.accountsteps ul li.holidays { background-image: url(/img/account/holidays.svg); }
.accountsteps ul li.holidays.on { background-image: url(/img/account/holidays-on.svg); }
.accountsteps ul li.complete { background-image: url(/img/account/complete.svg); }
.accountsteps ul li.on { font-weight: 600; }
.accountsteps ul li a { text-decoration: none; color: inherit; }

.accountsteps-wrap-b .accountsteps ul li { width: 33.333333%; }

@media screen and (max-width: 670px) {
    .accountsteps:before { display: none; }
    .accountsteps ul li { width: 33%; margin-bottom: 10px; }
}

@media screen and (max-width: 430px) {
    .accountsteps ul li { width: 50%; }
}

.no-svg .accountsteps ul li.logininfo { background-image: url(/img/account/login-info-on.png); }
.no-svg .accountsteps ul li.schooldetails { background-image: url(/img/account/school-details.png); }
.no-svg .accountsteps ul li.schooldetails.on { background-image: url(/img/account/school-details-on.png); }
.no-svg .accountsteps ul li.students { background-image: url(/img/account/students.png); }
.no-svg .accountsteps ul li.students.on { background-image: url(/img/account/students-on.png); }
.no-svg .accountsteps ul li.logoandimages { background-image: url(/img/account/logo-images.png); }
.no-svg .accountsteps ul li.logoandimages.on { background-image: url(/img/account/logo-images-on.png); }
.no-svg .accountsteps ul li.holidays { background-image: url(/img/account/holidays.png); }
.no-svg .accountsteps ul li.holidays.on { background-image: url(/img/account/holidays-on.png); }
.no-svg .accountsteps ul li.complete { background-image: url(/img/account/complete.png); }


/* = Card
----------------------------------------------------------------------------------------------------------------- */
.card { margin-bottom: 30px; padding: 0; text-align: center; background: #fff; -moz-box-shadow: 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); }
.card h3 { margin: 0 0 5px; color: #fff; font-weight: 600; font-size: 1.2em; font-family: 'Source Sans Pro', sans-serif; }
.card h3 a { color: #222; text-decoration: none; }
.card .none { color: rgba(255, 255, 255, 0.3); }
.card p { margin: 0; }
.card p a { color: #222; text-decoration: none; font-weight: 400; }
.card .image { min-height: 200px; padding: 20px; }
.card .image img { max-width: 100%; height: 150px; }
.card .details { padding: 20px; color: #222; position: relative; background: #efe6dd; }
.card .details--flush { padding: 0 0 20px; }
.card .details > span { width: 20px; height: 20px; margin-left: -10px; position: absolute; top: -15px; left: 50%; background: url(/img/tips/pink.svg) no-repeat center center; }
.card a:hover { text-decoration: underline; }
.card .details a.link { text-decoration: underline; }
.card .details a.link:hover { text-decoration: none; }
.card .details span { background-image: url(/img/tips/green.svg); }

.no-svg .card .details span { background-image: url(/img/tips/green.png); }

/* Card - List */
.card_list_main { position: relative; }
.card_list_main__order { left: 0; margin: 0 0 25px; }
.card_list_main__select { background: #fff; }
.card_list_main__stat { display: none; top: -100px; right: 0; }

@media screen and (min-width: 800px) {
    .card_list_main__order { top: -75px; }
    .card_list_main__order { display: inline-block; }
    .card_list_main__stat { top: -10px; display: block; position: absolute; }
}

@media screen and (min-width: 525px) and (max-width: 1000px) {
    .card_list_main .colsThird { display: inline; clear: none; }
    .card_list_main,
    .card_list_main .paging { clear: both; }
    .card_list_main .colsThird:after { clear: none; }
    .card_list_main .colsThird > .col { margin-right: 5%; width: 47.5%; }
    .card_list_main .colsThird > .col.endColAlt { margin-right: 0; }
}


/* Card - View */
.card_view { }
.card_view__img img { max-width: 100%; }
.card_view .iconset { margin-top: 20px; }
.card_view h3 { margin-bottom: 10px; font-size: 2em; }
.card_view__nav__item { float: left; }
.card_view__nav__item_next { float: right; }

.edit_cards__form { margin: -5px 0 0; }
.edit_cards__form input.text { padding: 3px 0; }
.edit_cards__form .btn { margin-top: 3px; }

.box .card,
.tabs .panel .card { box-shadow: none; border: solid 1px rgba(0, 0, 0, 0.1); }
.box .card .tighter { font-size: 90%; }
.cardViewBtns p { margin: auto; display: inline-block; }

.card,
.box { border: solid 1px #e9e9e9; }

/* = Theme
----------------------------------------------------------------------------------------------------------------- */
@media screen and (min-width: 525px) and (max-width: 1000px) {
    .theme_list_main .colsThird { display: inline; clear: none; }
    .theme_list_main,
    .theme_list_main .paging { clear: both; }
    .theme_list_main .colsThird:after { clear: none; }
    .theme_list_main .colsThird > .col { margin-right: 5%; width: 47.5%; }
    .theme_list_main .colsThird > .col.endColAlt { margin-right: 0; }
}


/* = Match
----------------------------------------------------------------------------------------------------------------- */
.match { margin-bottom: 30px; padding: 25px; background: #fff; }
.match h3 { color: #999; margin: 0 0 5px 0; font-size: 1.2em; font-weight: 600; font-family: 'Source Sans Pro', sans-serif; line-height: 1.2em; }
.match h3 a { color: #999; text-decoration: none; }
.match h3 a:hover { text-decoration: underline; }
.match img { width: 70px; max-height: 100px; float: left; margin: 0 15px 0 0; border: 1px solid #ddd; }
.match .details { min-height: 115px; margin: 0 0 20px; border-bottom: 2px solid #ddd; }
.match .details .added { margin: 0 0 5px 0; color: #12936d; font-weight: 600; line-height: 1em; }
.match .details .level { color: #999; margin-left: 0; margin-bottom: 5px; }
.match .details--no-img h3,
.match .details--no-img .added,
.match .details--no-img .level { margin-left: 0; }
.match .details .level .inamatch { color: #222; }
.match .iconset { opacity: 0.6; }
.match .details_details { margin-left: 80px; }

.matchNow { color: #222; -moz-box-shadow: 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); }
.matchNow h3,
.matchNow h3 a { color: #222; }
.matchNow .details .level { color: #222; }
.matchNow .offline { color: #999; }
.matchNow .offline b { color: #ca2229; }
.matchNow .iconset { opacity: 1; }

.matchBlank { color: #222; text-align: center; background: none; border: 2px dashed #accdde; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
.matchBlank.is-carousel { padding-top: 70px; }
.matchBlank p { font-size: 1.2em; }

.match .school_img__placeholder { float: left; margin: 0 15px 0 0; }

@media screen and (max-width: 450px) {
    .match .school_img__placeholder { width: 100%; margin: 0 0 10px 0; }
    .match .details_details { margin-left: 0; }
}

.colsMatch .col { margin-bottom: 30px; }

/* Active match */
.active_match { margin: 0 0 10px; padding: 10px; background: #f5f5f5; }
.active_match__school,
.news ul li.active_match__school:last-child { padding: 0; margin-bottom:12px; }
.active_match__status { clear: both; margin-bottom: 0; }
.active_match .school_img__placeholder { margin-bottom: 0; background: #fff; }
.active_match__profile_link { text-decoration: none; }
.active_match__profile_link:hover { text-decoration: underline; }

.active_match--notsent { background: #00a4a1; color: #fff; }
.active_match--notsent h4,
.active_match--notsent .active_match__profile_link { color: #fff; }
.active_match--notsent .school_img__placeholder { border-color: #fff; }

.active_match--complete .active_match__school__info { margin-left: 80px; }
.active_match--complete .newsfeature > ul > li h4 { line-height: 1.5em; }
.active_match--complete .newsfeature > ul > li h4,
.active_match--complete .newsfeature > ul > li p { margin-left: 0; }
.active_match--complete .iconset { margin: 10px 0 20px; padding-top: 15px; border-top: solid 1px #eee; }
.active_match--complete .iconset li { box-sizing: border-box; }
.active_match--complete .btn { margin-bottom: 10px; }

@media screen and (max-width: 1050px) {
    .active_match__school,
    .news ul li.active_match__school:last-child { padding: 0; }
    .active_match .newsfeature > ul > li .nextaction { display: block; }
    .active_match .newsfeature > ul > li .nextaction br { display: none; }
    .active_match .newsfeature > ul > li .btn { width: auto; margin: 0 0 5px 5px; }
}

@media screen and (max-width: 450px) {
    .active_match .school_img { display: none; }
    .active_match .active_match__school__info,
    .active_match .newsfeature > ul > li h4,
    .active_match .newsfeature > ul > li p { margin-left: 15px; }
    .active_match .newsfeature > ul > li h4,
    .active_match .newsfeature > ul > li p { margin-top: 10px; }
    .active_match .newsfeature > ul > li .nextaction__spacer { display: none; }
}


/* Past match */
.past_match__view_all { margin: 25px 0 0; }

@media screen and (max-width: 500px), screen and (min-width: 740px) and (max-width: 1150px) {
    .past_match .school_img { width: 100%; margin: 0 0 10px; }
    .past_match .newsmodule > ul > li h4,
    .past_match .newsmodule > ul > li p { margin-left: 0; }
}


.match__school_statuses { margin: 10px 0; }
.match__school_statuses span { display: inline-block; margin: 0 5px 5px 0; }


/* = My Account
----------------------------------------------------------------------------------------------------------------- */
.myaccount__card_list .card .image { min-height: 1px; }
.myaccount__card_list .card .image img { height: auto; max-height: 150px; max-width: 100%; }

@media screen and (max-width: 740px) {
    .myaccount__profile_status { margin-top: 20px; }
}

@media screen and (min-width: 450px) and (max-width: 740px) {
    .myaccount__card_list .colsFourth > .col { width: 48%; margin-right: 4%; }
    .myaccount__card_list .colsFourth > .col.endCol,
    .myaccount__card_list .colsFourth > .col.endColAlt { margin-right: 0; }
}


/* = Profile
----------------------------------------------------------------------------------------------------------------- */
.profile__images__logo { width: 250px; max-width: 100%; border: solid 1px #ddd; margin: 10px 0 15px; }


/* = School
----------------------------------------------------------------------------------------------------------------- */
.school_img__placeholder { float: left; width: 66px; height: 66px; padding: 18px 0 0; margin: 0 15px 0 0; text-align: center; text-decoration: none; color: #c81f66; font-size: 1.2em; font-weight: bold; border: solid 2px #ddd; box-sizing: border-box; }

/* Lists */
.school_list_main { position: relative; }
.school_list_main__stat { display: none; top: -100px; right: 0; }
.school_list_main .btn { margin-bottom: 10px; }

.school_list_friends { position: relative; }
.school_list_friends__map { display: none; top: -10px; right: 0; }
.school_list_friends .btn { margin-bottom: 5px; }
.school_list_friends .match { margin-bottom: 0; }

@media screen and (min-width: 800px) {
    .school_list_main__stat { display: block; position: absolute; }
    .school_list_friends__map { display: block; position: absolute; }
}

@media screen and (min-width: 741px) and (max-width: 950px) {
    .school_list_friends .colsHalf > .col,
    .school_list_main .colsHalf > .col { width: 100%; margin-right: 0; }
}

@media screen and (min-width: 600px) and (max-width: 740px) {
    .school_list_friends .colsHalf > .col,
    .school_list_main .colsHalf > .col { width: 48%; margin-right: 4%; }
    .school_list_friends .colsHalf > .col.endCol,
    .school_list_main .colsHalf > .col.endCol { margin-right: 0; }
}


/* View */
.school_view { }
.school_view { position: relative; }
.school_view > .box { overflow-x: auto; }
.school_view .school_img { display: block; margin: 10px auto 20px; max-width: 120px; }
.school_view img.school_img { border: solid 1px #ddd; }
.school_view__name { padding-left: 10px; padding-right: 10px; }
.school_view #tabOne .col { margin-bottom: 20px; }

@media screen and (max-width: 950px) {
    .school_view #tabOne h3 { background-image: none; padding-left: 0; }
}

@media screen and (min-width: 650px) {
    .school_view__back { position: absolute; top: -60px; right: 0; }
    .school_view__name { padding-left: 80px; padding-right: 80px; }
    .school_view .school_img { position: absolute; top: 20px; left: 20px; max-width: 90px; }
}

/* */
.school_profile { position: relative; }
.school_profile.school_manage_profile { padding-top: 12px; }
.tabs.school_profile__tabs ul { position: initial; display: block; margin-bottom: 20px; text-align: center; }
.tabs.school_profile__tabs > ul > li { display: inline-block; margin-right: 0; width: auto; }
.tabs.school_profile__tabs > ul li a { background: none; color: #009fda; padding: 0 5px; text-decoration: underline; width: auto; }
.tabs.school_profile__tabs > ul li a:hover { text-decoration: none; }
.tabs.school_profile__tabs > ul li a.on { box-shadow: none; text-decoration: none; }
.school_profile__tabs .col { margin-bottom: 20px; }

@media screen and (min-width: 650px) {
    .school_profile__back { position: absolute; top: -40px; right: 0; }
    .school_profile.school_manage_profile .school_profile__back { top: 0; }
}


/* = Badges
----------------------------------------------------------------------------------------------------------------- */
.badge_count { display: inline-block; width: 55px; height: 52px; padding-top: 14px; text-align: center; text-shadow: 1px 1px #444444; font-size: 18px; font-weight: bold; background: url(/img/icons/badge-sml.png) 0 0 no-repeat; background-size: cover; }

@media screen and (min-width: 525px) and (max-width: 1000px) {
    .badge_list_main .colsThird { display: inline; clear: none; }
    .badge_list_main,
    .badge_list_main .paging { clear: both; }
    .badge_list_main .colsThird:after { clear: none; }
    .badge_list_main .colsThird > .col { margin-right: 5%; width: 47.5%; }
    .badge_list_main .colsThird > .col.endColAlt { margin-right: 0; }
}

.badge_table_req th { border-bottom: solid 1px #eee; }
.badge_table_req .colImg { width: 110px; }
.badge_table_req .colBtn { width: 190px; text-align: center; }
.badge_table_req td.colBtn { border-left: solid 1px #eee; }
.badge_table_req .mobile_version { display: none; margin: 0 0 20px; text-align: center; }

@media screen and (max-width: 699px) {
    .badge_table_req .colImg,
    .badge_table_req .colBtn { display: none; }
    .badge_table_req .mobile_version { display: block; }
}


/* = Drop down order filters
----------------------------------------------------------------------------------------------------------------- */
.order_filters { position: relative; display: inline-block; top: 0; right: 0; padding: 0 0 15px 0; z-index: 1000; }
.order_filters__label { margin-right: 5px; }
.order_filters__options { position: relative; display: inline-block; }
.order_filters__options__current { position: relative; display: inline-block; padding: 0 20px 0 0; cursor: pointer; }
.order_filters__options__current:after { content: " "; position: absolute; top: 10px; right: 2px; width: 11px; height: 7px; background: url(/img/icons/dropdown.png) 0 0 no-repeat; }
.order_filters__items-wrap { position: relative; width: 100%; min-width: 200px; }
.order_filters__items,
.order_filters__items > * { list-style: none; margin: 0; padding: 0; }
.order_filters__items { display: none; position: absolute; top: 3px; right: 0; width: 100%; padding: 3px 0 5px; font-size: 90%; background: #fff; border: solid 1px rgba(0, 0, 0, 0.1); }
.order_filters__items a { display: inline-block; padding: 2px 10px 3px; text-decoration: none; }
.order_filters__items a:hover { text-decoration: underline; }

.order_filters.open .order_filters__current:after { transform: rotate(180deg); }
.order_filters.open .order_filters__items { display: block; }

/* Queue filters */
@media screen and (min-width:900px) {
    .queue_order_filters { position: relative; }
    .queue_order_filters .order_filters { position: absolute; right: 0; top: -45px; }
}


/* = Captcha form
----------------------------------------------------------------------------------------------------------------- */
.g-recaptcha,
.webForm div.g-recaptcha { margin: 20px 0 30px; text-align: center; }
.g-recaptcha { max-width: 100%; }
.g-recaptcha > div { margin: 0 auto; }


/* = Carousel
----------------------------------------------------------------------------------------------------------------- */
.owl-carousel { display: none; position: relative; width: 100%; -ms-touch-action: pan-y; }
.owl-carousel .owl-wrapper { display: none; position: relative; -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; -ms-backface-visibility: hidden; -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); }
.owl-carousel .owl-wrapper:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.owl-carousel .owl-wrapper-outer { width: 100%; overflow: hidden; position: relative; padding: 0 0 4px; }
.owl-carousel .owl-wrapper-outer.autoHeight { -moz-transition: height 500ms ease-in-out; -webkit-transition: height 500ms ease-in-out; transition: height 500ms ease-in-out; }
.owl-carousel .owl-item { float: left; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); }
.owl-carousel .owl-item img { max-width: 100%; }
.owl-carousel .owl-item .card { margin: 0 20px; }
.owl-carousel .owl-item .match { margin: 0 20px; }

/* Next/previous */
.owl-controls { text-align: center; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
.owl-controls .owl-buttons div { height: 40px; padding: 7px 0 0 55px; position: absolute; bottom: -60px; left: 20px; cursor: pointer; zoom: 1; *display: inline; background: url(/img/arrows/left.svg) no-repeat left center; }
.owl-controls .owl-buttons div.owl-next { padding-right: 55px; padding-left: 0; left: auto; right: 20px; background-image: url(/img/arrows/right.svg); background-position: right center; }
.owl-controls .owl-buttons div:hover { opacity: 0.75; }

/* Paging */
.owl-controls .owl-pagination { width: 100%; position: absolute; bottom: -40px; }
.owl-controls .owl-page { display: inline-block; zoom: 1; *display: inline; cursor: pointer; }
.owl-controls .owl-page span { display: block; width: 10px; height: 10px; margin: 0 5px; background: #8ec7db; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; }
.owl-controls.clickable .owl-page:hover span { opacity: 0.75; }
.owl-controls .owl-page.active span { background: #009fda; }
.owl-controls .owl-page span.owl-numbers { height: auto; width: auto; color: #FFF; padding: 2px 10px; font-size: 12px; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; }

/* Card */
.carousel-card { margin: 40px 0 20px; }
.carousel-card .owl-controls .owl-buttons div { width: 40px; padding: 0; top: 40%; bottom: auto; left: -45px; font-size: 0; }
.carousel-card .owl-controls .owl-buttons div.owl-next { left: auto; right: -45px; }

.carousel-card .image img { height: 200px; }

@media screen and (max-width: 1400px) {
    .owl-controls .owl-buttons div { display: none; }
}

@media screen and (max-width: 500px) {
    .owl-controls .owl-pagination { display: none; }
}

@media screen and (max-width: 479px) {
    .owl-carousel .owl-item .card { margin-right: 0; margin-left: 0; }
    .owl-carousel .owl-item .match { margin-right: 0; margin-left: 0; }
}


/* = Map
----------------------------------------------------------------------------------------------------------------- */
.map { height: 600px; background: #f1f1f1 url('/img/loading.gif') no-repeat center center; border: solid 1px #eee; }

.map_wrap { position: relative; }
.map_key { margin: 20px 0; font-weight: bold; }
.map_key__available { margin-right: 25px; padding-left: 20px; background: url(/img/map/available.png) no-repeat center left; }
.map_key__unavailable { padding-left: 20px; background: url(/img/map/unavailable.png) no-repeat center left; }

@media screen and (min-width: 650px) {
    .map_wrap__back { position: absolute; top: -65px; right: 0; }
}

.map_flyout { padding: 10px 0 0; }
.map_flyout h4 { font-size: 1.4em; }
.map_flyout h4 a { text-decoration: none; }
.map_flyout h4 a:hover { text-decoration: underline; }
.map_flyout h4,
.map_flyout .iconset { margin-bottom: 15px; }
.map_flyout ul,
.map_flyout p { margin-bottom: 10px; }
.map_flyout .btn { margin-right: 5px; }


/* = Circle chart
----------------------------------------------------------------------------------------------------------------- */
.chart__disc { position: relative; width: 180px; height: 180px; margin: 10px auto 20px; }
.chart__disc__label { position: absolute; top: 50%; left: 50%; height: 40px; line-height: 40px; width: 65px; margin: -31px 0 0 -32.5px; text-align: center; font-size: 1.5em; color: #009fda; }
.chart__disc .progress__label { margin-top: 28px; }
.chart__disc__ind { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 11px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; }
.chart__disc__ind svg { position: absolute; top: 0; left: 0; }
.chart__disc__ind .chart__disc__ind__done { background: #009fda; }

@media screen and (min-width: 740px) and (max-width: 900px) {
    .chart__disc { width: 120px; height: 120px; }
}


/* = Upload Styles
----------------------------------------------------------------------------------------------------------------- */
.uploader { _height: 180px; min-height: 180px; margin: 10px 0 20px; }
.uploader__queue { color: #999; }
.uploader__loading { width: 100%; height: 180px; text-align: center; box-sizing: border-box; background: url(/img/loader.gif) center center no-repeat; }
.uploader__remove_all { display: none; }
#uploader_browse { background: #fff; border-width: 0; color: #009fda; font-weight: bold; }

.upload_cards { }
.upload_cards__radio_div { display: inline-block; margin: 0 10px 10px 0; }
.upload_cards__theme select { max-width: 300px; }
.upload_cards__add_class { display: none; }

.upload_cards__cards_class { }
.upload_cards__cards_class.loading { overflow: hidden; width: 100%; height: 50px; background: url(/img/loader.gif) center center no-repeat; }
.upload_cards__cards_class > hr { margin-top: 20px; }
/*.upload_cards__cards_class__msg { margin-bottom: 40px; }*/

.upload_cards__cards_list__cards,
.upload_cards__cards_class__cards { overflow-y: auto; max-height: 350px; padding: 20px; border: solid 2px #eee; }

.upload_cards__card { position: relative; }
.upload_cards__card .loading_pane,
.upload_cards__card .deleted_pane { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(238, 238, 238, 0.9) url(/img/loader.gif) center center no-repeat; }
.upload_cards__card .deleted_pane { background: rgba(255, 0, 0, 0.8); }
.upload_cards__card .deleted_pane::after { content: "Deleted"; position: absolute; top: 50%; left: 0; margin-top: -28px; width: 100%; text-align: center; font-weight: bold; color: #fff; }
.upload_cards__rotate { position: absolute; top: 5px; right: 5px; width: 26px; height: 26px; background: url(/img/icons/rotate_clockwise.svg) 0 0 no-repeat; transition: transform ease-in-out 0.25s; }
.upload_cards__rotate.is-loading { animation: rotateimg 0.5s infinite linear; }
.upload_cards__delete { position: absolute; top: 5px; left: 5px; width: 26px; height: 26px; background: url(/img/icons/delete.svg) 0 0 no-repeat; }

.upload_cards__rotate:focus,
.upload_cards__delete:focus { outline: none; }
.upload_cards__rotate:focus::-moz-focus-inner,
.upload_cards__delete:focus::-moz-focus-inner { border: 0; }

@keyframes rotateimg {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.upload_cards__cards_list,
.upload_cards__cards_list_done { display: none; display: block; }

.no-svg .upload_cards__rotate { background-image: url(/img/icons/rotate_clockwise.png); }
.no-svg .upload_cards__delete { background-image: url(/img/icons/delete.png); }


/* = Footer
----------------------------------------------------------------------------------------------------------------- */
.english { width: 284px; height: 46px; float: left; margin: 20px 0 40px; font-size: 0; background: url(/img/theme/english2.svg) no-repeat top left; }

.links { float: right; padding: 30px 0; color: #fff; }
.links p { float: left; margin: 0 10px 0 0; }
.links ul { float: left; margin: 0; list-style: none; }
.links ul li { display: inline; margin: 0 0 0 20px; }
.links ul li a { display: inline-block; color: color: #fff; text-decoration: none; font-weight: 400; }

@media screen and (max-width: 920px) {
    .english { margin-bottom: 20px; }

    .links { width: 100%; padding-top: 0; }
}

@media screen and (max-width: 600px) {
    .links p { width: 100%; margin-right: 0; margin-bottom: 10px; }
    .links ul { width: 100%; }
    .links ul li { margin-right: 10px; margin-left: 0; }
}

@media screen and (max-width: 450px) {
    .links ul li { display: block; margin-right: 0; }
}

@media screen and (max-width: 360px) {
    .english { width: 100%; height: 35px; background-size: auto 100%; }
}

.no-svg .english { background-image: url(/img/theme/english2.png); }


/* = Cookie
----------------------------------------------------------------------------------------------------------------- */
.cookie { display: none; padding: 10px 0; color: #fff; text-align: center; font-size: 0.9em; background: #ca2067; }
.cookie p { margin: 0; }
.cookie p a { color: #fff; text-decoration: underline; font-weight: 600; }

@media screen and (max-width: 740px) {
    .cookie { text-align: left; font-size: .85em; }
}

/* = No Javascript
----------------------------------------------------------------------------------------------------------------- */
.no-js .strip .theme { display: none; }

/* = Loading mail icon
----------------------------------------------------------------------------------------------------------------- */
.loadContainer {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: #fff;
	z-index: 8;
}
.loadMail {
	background-color: #fff;
	border: 2px solid #009fda;
	display: inline-block;
	position: absolute;
	height: 20px;
	width: 28px;

	top: 49%;
	left: 49%;
	top: calc(50% - 10px);
	left: calc(50% - 14px);

	-webkit-animation: hourglass 4.8s infinite, colour 4.8s infinite;
	        animation: hourglass 4.8s infinite, colour 4.8s infinite;
}
.loadMail:before,
.loadMail:after {
	background: #fed;
	border: 2px solid #009fda;
	content: '';
	position: absolute;

	border-top: none;
	top: 6px;
	width: 11px;

	-webkit-animation: colour 4.8s infinite;

	        animation: colour 4.8s infinite;
}
.loadMail:before {
	right: -2px;
	-webkit-transform: rotate(-25deg);
		-ms-transform: rotate(-25deg);
			transform: rotate(-25deg);
}
.loadMail:after {
	left: -2px;
	-webkit-transform: rotate(25deg);
		-ms-transform: rotate(25deg);
			transform: rotate(25deg);
}
@-webkit-keyframes hourglass {
	0% { -webkit-transform: rotate(0); transform: rotate(0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
	25% { -webkit-transform: rotate(900deg); transform: rotate(900deg); -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
	50% { -webkit-transform: rotate(1800deg); transform: rotate(1800deg); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
	75% { -webkit-transform: rotate(2700deg); transform: rotate(2700deg); -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
	100% { -webkit-transform: rotate(3600deg); transform: rotate(3600deg); }
}
@keyframes hourglass {
	0% { -webkit-transform: rotate(0); transform: rotate(0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
	25% { -webkit-transform: rotate(900deg); transform: rotate(900deg); -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
	50% { -webkit-transform: rotate(1800deg); transform: rotate(1800deg); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
	75% { -webkit-transform: rotate(2700deg); transform: rotate(2700deg); -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
	100% { -webkit-transform: rotate(3600deg); transform: rotate(3600deg); }
}
@-webkit-keyframes colour {
	0% { border-color: #009fda; -webkit-animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22); animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22); }
	50% { border-color: #c81f66; -webkit-animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22); animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22); }
	100% { border-color: #009fda; }
}
@keyframes colour {
	0% { border-color: #009fda; -webkit-animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22); animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22); }
	50% { border-color: #c81f66; -webkit-animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22); animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22); }
	100% { border-color: #009fda; }
}

/* = Progress bar for sending mail
----------------------------------------------------------------------------------------------------------------- */
.sendProgress { float: right; }
.sendProgress .progressStep { display: inline-block; padding-bottom: 8px; margin-right: 16px; margin-bottom: 16px; border-bottom: 2px solid rgba(0, 0, 0, 0.1); }
/* .sendProgress .progressStep:after { content: ''; display: inline-block; width: 100px; height: 3px; background-color: purple; } */
.sendProgress .progressStep .progressIcon { display: inline-block; width: 26px; height: 26px; margin-right: 2px; vertical-align: top; }
.sendProgress .progressStep .progressLabel { display: inline-block; vertical-align: top; }

.sendProgress .progressStep.complete { border-color: #009fda; }
.sendProgress .progressStep.active { border-color: #009fda; border-width: 4px; }


@media only screen and (max-width: 850px) {
	.sendProgress { float: none; }
}

/* = Suggested school cards
----------------------------------------------------------------------------------------------------------------- */
.suggested-school-cards { max-width: 1280px; margin:0 auto; }
.suggested-school-cards:after { content: ''; display: table; clear: both; }
.suggestedCardBox { box-sizing: border-box; width: 22%; float: left; margin-left: 4%; margin-bottom: 30px; }
.firstSuggestion { margin-left: 0px; }
.suggestedCardBox .match .details_details { margin: auto; }

@media only screen and (max-width: 1100px) {
	.suggestedCardBox { width: 49%; margin-left: 2%; }
    .suggestedCardBox:nth-child(2n-1) { margin-left: 0; }
}

@media only screen and (max-width: 768px) {
	.suggestedCardBox { width: 100%; margin-left: 0; }
}

/* = Help widget
----------------------------------------------------------------------------------------------------------------- */
.helpWidgetWrapper { display: inline-block; margin-bottom: 30px; position: absolute; right: 0; text-align: left; top: 0; }
.helpWidgetWrapper .helpWidget { background: url(/img/question_icon.png) no-repeat 0 5px/40px 45px; display: inline-block; padding-left: 50px; text-align: left; }
.helpWidgetWrapper .helpWidget p { font-size: 15px; margin-bottom: 0; }
.helpWidgetWrapper .helpWidget p.helpTitle, .helpWidget p.helpText { color: rgb(200, 31, 102); }
.helpWidgetWrapper .helpWidget p.helpTitle { font-size: 16.5px; font-weight: 600; }
.helpWidgetWrapper .helpWidget p a { color: #222; font-size: 16.5px; }

@media only screen and (max-width: 1200px) {
    .helpWidgetWrapper { display: block; position: static; }
}