@charset "utf-8";


:root {
    --gc-blue: #0F2C60;
	--gc-blue-light: #164693;
	--gc-blue-dark: #15243C;
	--gc-blue-vlight: #066CBF;
	--gc-purple: #9d2485;
	--gc-purple-dark: #510146;
	--gc-orange: #FF682C;
	--gc-orange-dark: #FF3B2B;
	--gc-yellow: #FFC900;
	--gc-yellow-dark: #FFAA00;
	--gc-green: #20bc8c;
	--gc-green-dark: #0c9682;
	
}


html {font-family: "gotham", sans-serif; font-size: 16px; line-height: 1.4; color: var(--gc-blue-dark); box-sizing: border-box; -webkit-tap-highlight-color:  rgba(255, 255, 255, 0);  }
input[type=text], button, textarea, select {font-family: "gotham", sans-serif; font-size: inherit;}

body {margin: 0; padding: 0; background-color: #fff;}
input[type=text] {-webkit-appearance: none; -moz-appearance: none; appearance: none;}

*, *:before, *:after { box-sizing: inherit;}


/* remove this once gallery is removed from home */
.keyword-block + .gallery {display: none; }
/* remove this once gallery is removed from home */



.container {position: relative; width: 100%; max-width: 1340px; margin: 0 auto; padding: 0 50px; box-sizing: border-box; }
.container .container {padding: 0;}
@media screen and (max-width: 1000px) {
	.container {padding: 0 30px; }
}
@media screen and (max-width: 600px) {
	.container {padding: 0 20px; }
}


.tethered {position: relative;}
.tethered > div {position:sticky!important; top: 0;}

.cols-2 {display: grid; gap: 50px; grid-template-columns: 1fr 1fr; }
.container.cols-2 {grid-template-columns: 1fr 350px; }
@media screen and (max-width:1000px) {    	
	.tethered {position:relative!important; top: 0;}
	.cols-2 {gap: 50px; grid-template-columns: 1fr; gap: 10px; }
	.container.cols-2 {grid-template-columns: 1fr; }
}

.pb:before {content: ""; position: relative; display: block; padding-top: 1px; margin-bottom: 50px; }
.pa:after {content: ""; position: relative; display: block; padding-bottom: 1px; margin-top: 50px; }

.pb-small:before {content: ""; position: relative; display: block; padding-top: 1px; margin-bottom: 25px; }
.pa-small:after {content: ""; position: relative; display: block; padding-bottom: 1px; margin-top: 25px; }

.pb-vsmall:before {content: ""; position: relative; display: block; padding-top: 1px; margin-bottom: 10px; }
.pa-vsmall:after {content: ""; position: relative; display: block; padding-bottom: 1px; margin-top: 10px; }

@media screen and (max-width: 600px) {
    .pb:before {content: ""; position: relative; display: block; padding-top: 1px; margin-bottom: 25px; }
    .pa:after {content: ""; position: relative; display: block; padding-bottom: 1px; margin-top: 25px; }
}

a.video-link {position: relative; display: block; }
a.video-link {display: block; }
a.video-link:after {content: ""; position: absolute; top: 50%; left: 50%; width: 80px; height: 80px; margin-top: -40px; margin-left: -40px; background-image: url("../_img/icons/play-button.svg"); box-sizing: border-box;; opacity: 0.5; transition: all linear 0.1s;}
a.video-link:hover:after {opacity: 1;}

a:not(.button) {color: inherit; text-decoration: underline; }
a:not(.button):hover {color: inherit; text-decoration: none; }

header {position:relative; background: var(--gc-blue); }
header .stripes {position: relative; background: var(--gc-purple); }
header .stripes::before {content: ""; position: absolute; top: 0; left: 50%; width: 50%; height: 100%; background: var(--gc-orange); }
header .stripes::after {content: ""; position: relative; display: block; width: 100%; height: 20px; background: url("../_img/stripes.svg") center no-repeat; background-size: auto 100%; }
header .stripes_mob {display: none;}
header .container {display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-top: 25px; padding-bottom: 25px;}
header .container a.header-logo {position:relative; width: 242px; height: 72px; display: block; background-image: url("../_img/logo.svg"); background-size: contain; background-repeat: no-repeat; background-position: left;}
header .container > div {display: flex; flex-direction: column; gap: 10px; }
header .header-portal {font-size: 14px; color: #fff;text-align: right; }
header .header-portal p {margin: 0; display: flex; gap: 20px; justify-content: flex-end; }
header .header-portal a {color: #fff; text-decoration: none;}
header .header-portal a:hover {text-decoration: underline}
header .header-navigation {display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
header .header-navigation a.top-link {position:relative; display: block; width: 50px; height: 52px; color: #fff; text-decoration: none; transition: all linear 0.1s; background-size: 25px auto; background-repeat: no-repeat; background-position: center; }
header .header-navigation a.top-link span {position: absolute; top: 0; right: 0; width: 18px; height: 0; padding: 9px 0; text-align: center; line-height: 0; background: var(--gc-green); border-radius: 50%; font-size: 11px; }
header .header-navigation a.top-link-button {position: relative; padding: 10px 32px 6px 32px; width: auto; font-size: 18px; background: var(--gc-green); border-bottom: 8px solid var(--gc-green-dark); text-align:center; color: #fff; font-weight: 700; }
header .header-navigation a.link-cart {background-image: url("../_img/icons/gc-icons-cart-2.svg"); }
header .header-navigation a.link-account {background-image: url("../_img/icons/gc-icons-account.svg");}
header .header-navigation a.link-notification {background-image: url("../_img/icons/gc-icons-bell.svg");}
header .header-navigation a.link-burger {background-image: url("../_img/icons/gc-nav-menu-blue.svg"); background-color: #fff; padding: }
header .header-navigation form {display: block; position: relative;}
header .header-navigation input.link-search { position:relative; display: block; background: url("../_img/icons/gc-icons-search.svg") transparent no-repeat; background-size: 25px; background-position: top 50% right 11px; color: transparent; transition: all ease-in-out 0.2s; border-radius: 27px; border: 2px solid rgba(255, 255, 255, 0); width: 50px; height: 50px; outline: 0; cursor: pointer; }
header .header-navigation input.link-search:focus {width: 300px; background-color: rgba(255,255,255,0.15); color: #fff; padding-left: 20px; cursor:text}
header .header-navigation form button.searchButton {position: absolute; right:0px; width: 50px; height: 50px; background-color: aqua; cursor:pointer; }
@media screen and (max-width:1300px) {
	header .stripes {display: none }
	header .stripes::before {display:none;}
	header .stripes::after {display: none;}
	header .stripes_mob {display: grid; grid-template-columns: repeat(5, 1fr); height: 12px;  }
	header .stripes_mob i:nth-child(1) {background: var(--gc-purple);} 
	header .stripes_mob i:nth-child(2) {background: var(--gc-blue-light);} 
	header .stripes_mob i:nth-child(3) {background: var(--gc-green);} 
	header .stripes_mob i:nth-child(4) {background: var(--gc-yellow);} 
	header .stripes_mob i:nth-child(5) {background: var(--gc-orange);} 	
}
@media screen and (max-width:1130px) {
	header .header-portal {font-size: 12px; }
	header .header-navigation {gap: 12px; }
	header .header-navigation input.link-search {display: none;}
}
@media screen and (max-width:750px) {
	header .header-portal {display: none;}
	header .header-navigation a.link-account {display:none;}
	header .header-navigation a.link-notification {display:none;}
	header .header-navigation a.top-link-button {padding: 10px 20px; }
}
@media screen and (max-width:600px) {
	header .header-portal {display: none; }
	header .header-navigation a.top-link-button {display: none; }
}

.nav {position: fixed; display: block; top: 0; height: 100%; width: 100%; z-index: 10; pointer-events: none; background: rgba(0,0,0,0); transition: all 0.3s;}
.nav.open > div {width: 500px;} 
.nav.open { pointer-events: all; cursor: pointer; background: rgba(0,0,0,0.3); }
.nav > div {position: absolute; top: 0; right: 0; width: 0; height: 100%; overflow: hidden; transition: all 0.3s; }			
.nav > div > div {position: absolute; left: 0; top: 0; width: 500px; height: 100%; padding-top: 90px; background: var(--gc-blue); box-sizing: border-box;}
.nav > div > div .nav-container {position: absolute; top: 0; width: 100%; height: 100%; overflow: auto; padding: 70px 30px 20px 30px; }
.nav > div > div .nav-container > a {position:absolute; display: block; top: 30px; right: 30px; width: 50px; height: 50px; background-color: #fff; color: #fff; text-decoration: none; background-image: url("../_img/icons/gc-close-blue.svg"); background-size: 20px 20px; background-repeat: no-repeat; background-position: center;}
.nav > div > div .nav-container > a:hover { background-color: rgba(255,255,255,0.9);} 
.nav > div > div .nav-container ul {padding: 0; margin: 0; width: 100%; list-style: none; }
.nav > div > div .nav-container ul li {position: relative; padding: 0; margin: 0; }
.nav > div > div .nav-container ul li a {position: relative; display: block; color: #fff; color: rgba(255,255,255,0.9); text-decoration: none; font-size: 1.1em; padding: 10px 0; font-weight: 400;  }
.nav > div > div .nav-container ul li a:hover {color: #fff;}
.nav > div > div .nav-container > ul > li {border-bottom: 1px solid rgba(255,255,255,0.3); padding: 10px 0;}
.nav > div > div .nav-container > ul > li > a {font-weight: 700; font-size: 1.3em;  }	
.nav > div > div .nav-container > ul > li > a b {position: absolute; top: 0; right: 0; width: 50px; height: 100%;  }
.nav > div > div .nav-container > ul > li > a b::after {content: ""; position: absolute; top: 50%; left: 50%; width: 16px; height: 16px; margin-top: -10px; margin-left: -8px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg) }
.nav > div > div .nav-container > ul > li > div {position: relative; height: 0; overflow: hidden;}
.nav > div > div .nav-container > ul > li > div ul {position: absolute; bottom: 0; width: 100%;}
.nav > div > div .nav-container > ul > li.open > div {height: auto; }
.nav > div > div .nav-container > ul > li.open > div ul {position: relative;}
.nav > div > div .nav-container > ul > li.open > a b::after{transform: rotate(-135deg); margin-top: -5px; }
.nav > div > div .nav-container input.link-search-menu {display: none;}
.nav > div > div .nav-container .header-portal-nav {display: none;}


@media screen and (max-width:1130px) {
    .nav > div > div .nav-container { padding: 100px 30px 20px 30px; }
	.nav > div > div .nav-container input.link-search-menu {display:block; position:absolute; top: 29px; left: 20px; width: 69%; width: calc(100% - 120px); height: 50px; background-image: url("../_img/icons/gc-icons-search.svg"); background-size: 25px 26px; background-repeat: no-repeat; background-position: top 50% right 11px; border: 2px solid #fff; border: 2px solid rgba(255, 255, 255, 0.9); background-color: transparent; outline: 0; padding-left: 20px;  }
	.nav > div > div .nav-container input.link-search-menu:hover {background-color: rgba(255,255,255,0.15);}
	.nav > div > div .nav-container input.link-search-menu:focus {background-color: rgba(255,255,255,0.15); text-indent: 0px;  cursor:text;}
}
@media screen and (max-width: 750px) {
	.nav > div > div .nav-container .header-portal-nav {display: block; padding: 20px 0; font-size: 14px; color: #fff; width: 100%; text-align: left; border-bottom: 1px solid rgba(255,255,255,0.3);}
	.nav > div > div .nav-container .header-portal-nav p {margin: 0; display: flex; justify-content: space-between; gap: 10px; align-items: center;  }
	.nav > div > div .nav-container .header-portal-nav a {display: block; color: #fff; text-decoration: none; text-align: center;}
	.nav > div > div .nav-container .header-portal-nav a:hover {text-decoration: underline}
}
@media screen and (max-width: 600px) {
	.nav.open > div {width: 90vw;} 
	.nav > div > div {width: 90vw;}	
}

/* || User Content */

.user-content { display: block; }
.user-content ul {list-style-position: outside; padding: 0 0 0 20px ;}
.user-content ul li::marker {color: var(--gc-blue); ;}
.user-content blockquote { margin: 25px 0; color: var(--gc-blue); font-size: 1.1em; line-height: 1.6em; font-weight: 700; font-style: italic;  }
.user-content blockquote::after {content: "”"; margin-left: 5px; }
.user-content blockquote::before {content: "“"; margin-right: 5px; }

.user-content .quote-area {margin: 25px 0; color: var(--gc-blue); font-size: 1.1em; line-height: 1.6em; font-weight: 700; font-style: italic;}
.user-content .quote-area strong {color: #000; font-weight: 400; font-style: normal;}

.user-content table {border-collapse: collapse; border: #ccc; margin: 25px 0px; width: 100%!important; max-width: 900px;}
.user-content table th {background-color: #ccc; color: #fff; font-weight: 700; border: 1px solid var(--gc-blue); padding: 0.5rem;  text-align: left}
.user-content table td {border: 1px solid #ccc; padding: 0.5rem;}

.user-content h1, .user-content h2, .user-content h3, .user-content h4, .user-content h5 {color:var(--gc-blue-dark); margin: 1em 0 0.5em 0;}
.user-content h1 {font-size: 2.5em; letter-spacing: -1px; line-height: 1.2; } 
@media screen and (max-width: 600px) {
	.user-content h1 {font-size: 2em; letter-spacing: -1px; } 
}
.user-content h2 {margin: 1em 0 0.5em 0;}
.user-content h3 {font-size:20px; margin: 1em 0 0.5em 0;}
.user-content h4 {margin: 1em 0 0.5em 0;}


h2.equiv-margin {margin-top: -20px; }

.content-text { margin: 50px 25px; max-width: 1200px;}

.user-content .content-text {margin: 1em 0;}
.container .content-text {margin: 1em 0;}

.map-container {position:relative;  border: 1px solid #aaa; border-radius: 0px; overflow: hidden }
.map-container .map {height: 0; padding-bottom: 56%; }



.content-image {max-width: 1240px; margin:0px auto; margin-top: 25px; margin-bottom: 25px;}
.content-image img {width: 100%!important; height: auto!important; display: block }
.content-image img a {}

.main-right .content-image {max-width: 1200px; margin:0px auto; margin-top: 0px; margin-bottom: 25px;}


.button-container {position: relative; display: flex; gap: 10px; width: 100%; margin: 25px 0; justify-content: space-between;}
table .button-container {margin: 0;}
.button-container.alignL {justify-content: flex-start;}
.button-container.alignC {justify-content: center;}
.button-container.alignR {justify-content: flex-end;}

.button {position:relative; display: inline-block; color: #fff; border: 0 solid var(--gc-green-dark); border-bottom-width: 8px; background: var(--gc-green); text-decoration: none; text-align:center; padding: 12px 32px 8px 32px; line-height: 20px; font-size: 18px; font-weight: 700; transition: all linear 0.1s; cursor: pointer;}
.button:hover {background: var(--gc-green-dark);}
a.button {color:#fff; text-decoration: none;}

.button.disabled {pointer-events: none; opacity: 0.4; }
.button.inactive {opacity: 0.4; }
.button.grey {color: #aaa; border-color: #aaa; background: #fff; border-width: 1px 1px 8px 1px;  }
.button.grey:hover {background: #eee;}
.button.white {color: #fff; border-color: #fff; background: none; border-width: 1px 1px 8px 1px;  }
.button.white:hover {background: rgba(255,255,255,0.25);}
.button.blue {border-color: var(--gc-blue-light); background: var(--gc-blue); border-width: 1px 1px 8px 1px;}
.button.blue:hover {background: var(--gc-blue-light); }
.button.orange {border-color: var(--gc-orange-dark); background: var(--gc-orange); }
.button.orange:hover {background: var(--gc-orange-dark); }
.button.yellow {border-color: var(--gc-yellow-dark); background: var(--gc-yellow); color: var(--gc-blue-dark); }
.button.yellow:hover {background: var(--gc-yellow-dark); }
.button.small {font-size: 16px; padding: 10px 24px 7px 24px; border-bottom-width: 7px;  }

.button .inActive {display: none;}
.button.inActive .inActive {display: inline;}
.button.inActive .active {display: none;}

@media screen and (max-width: 750px) {
    .button-container {margin: 20px 0;}
	.button-container .button {padding: 10px 25px; font-size: 16px; } 
}

.align-c {text-align: center}

@media screen and (max-width:1130px) {
    .inner-wrapper {width: 100%; padding: 0px 25px; }
}

.zeroStock {color: red;}
.button-left {text-align: left}

/* || Products */

.product-price-container {margin: 20px 0; color: var(--gc-blue); line-height: 1.05; }
.product-price-container .product-price {font-size: 32px; font-weight: 700; }

/* || Breadcrumb */

.breadcrumb {font-size:14px; background: var(--gc-blue-vlight); padding: 8px 0;}
.breadcrumb .container a {color:#fff; text-decoration: none; margin-left: 10px; }
.breadcrumb .container a span:hover {text-decoration: underline}
.breadcrumb .container a:first-child {margin-left: 0px;}
.breadcrumb .container a::after {content: ">"; margin-left: 10px;}
.breadcrumb .container a:last-child::after {content: "";}

@media screen and (max-width:900px) {
    .breadcrumb-container a {display:none;}
    .breadcrumb-container a:first-child {display: inline-block;}
    .breadcrumb-container a:nth-last-child(2) {display: inline-block;}
    .breadcrumb-container a:nth-last-child(2)::after {content: "";}
}

.welcome-block {margin: 50px 0 100px 0;;}
.welcome-block .container p {padding-left: 50%;}
.welcome-block h1 {position: relative; aspect-ratio: 300/58; font-size: inherit; color: #fff; overflow: hidden; margin: 30px 0; }
.welcome-block h1:after {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url("../_img/welcome.svg") center no-repeat}
@media screen and (max-width:900px) {
	.welcome-block .container p {padding-left: 0;}
}

@media screen and (max-width:600px) {
	.welcome-block h1 {aspect-ratio: 300/140;} 
	.welcome-block h1:after {background-image: url("../_img/welcome_mob.svg")}
}

.color-block {background: #aaa; margin: 50px 0; }
.color-block h1, .color-block h2, .color-block h3, .color-block h4 .color-block a {color: inherit;}
.color-block .content-text a, .color-block .content-text {margin: 0 auto;}
.color-block .content-text a, .color-block .content-text a:hover {color: inherit;}
.color-block.color-block-magenta {background: var(--gc-purple); color: #fff; border-bottom: 16px solid var(--gc-purple-dark); }
.color-block.color-block-blue {background: var(--gc-blue); color: #fff; border-bottom: 16px solid var(--gc-blue-dark); }
.color-block.color-block-orange {background: var(--gc-orange); color: #fff; border-bottom: 16px solid var(--gc-orange-dark); }
.color-block .button {border-color: #fff; color: #fff; border-width: 1px 1px 8px 1px; background: none;}
.color-block .button:hover {background: rgba(255,255,255,0.2); }


.stats-block {margin: 50px 0; padding-bottom: 50px; position: relative; }
.stats-block .container {display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.stats-block .container > div {background: var(--gc-purple); border-bottom: 12px solid var(--gc-purple-dark); color: #fff; text-align: center; padding: 10px; min-height: 100px;  }
.stats-block .container > div > div {font-size: 70px; line-height: 1.1em; font-weight: 700; letter-spacing: -4px; opacity: 0;  }
.stats-block::before {content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 50%; height: calc(50% + 25px); background: url(../_img/bg_zigzags_blue_dark.svg) var(--gc-blue) center; background-size: 200px auto;}
@media screen and (max-width:1100px) {
	.stats-block {padding-bottom: 30px; }
	.stats-block::before {height: unset; top: 60px  }
	.stats-block .container {grid-template-columns: repeat(2, 1fr); }
	.stats-block .container > div > div {font-size: 60px;  }
}
@media screen and (max-width:600px) {
	.stats-block {padding-bottom: 20px; }
	.stats-block .container {grid-template-columns: 1fr; }
}
	
.keyword-block {margin: 50px 0; padding-bottom: 50px; position: relative; }
.keyword-block .container {display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.keyword-block .container > a {background: var(--gc-yellow); min-height: 180px; display: flex; align-items: center; justify-content: center; border-bottom: 12px solid var(--gc-yellow-dark); color: var(--gc-blue-dark); text-align: center; padding: 10px; font-size: 48px; text-decoration: none; line-height: 1.1em; font-weight: 700; letter-spacing: -2px; transition: all 0.2s;}
.keyword-block .container > a:hover {background-color: var(--gc-yellow-dark);}
.keyword-block::before {content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 50%; height: calc(50% + 25px); background: url(../_img/bg_zigzags_green_dark.svg) var(--gc-green) center; background-size: 200px auto;}
@media screen and (max-width:1100px) {
	.keyword-block .container > a {font-size: 30px; }	
}
@media screen and (max-width: 900px) {
	.keyword-block {padding-bottom: 30px; }
	.keyword-block::before {height: unset; top: 50px;}
	.keyword-block .container {display: grid; grid-template-columns: 1fr; gap: 20px; }
	.keyword-block .container > a {min-height: 100px; }
}

.people-block {margin: 50px 0;}
.people-block .container { background: #ccc; color: #fff; display: grid; grid-template-columns : 1fr 1fr; gap: 50px; }
.people-block .container .text {align-self: center; }
.people-block .container .text .title {font-weight: 700; font-size: 4em; line-height: 1.05;}
.people-block .container .text .title p {displayu: inline; margin: 0;}
.people-block .container .text .title strong {display: block; }

.people-block.green .container {background: var(--gc-green); color: var(--gc-blue-dark);}
.people-block.green .container > div .title {color: #fff;}
.people-block.green .container > div .title strong {color: var(--gc-blue); }

.people-block.blue .container {background: var(--gc-blue-vlight); color: #fff;}

.people-block .img1 {height: 100%; display: flex; align-items: flex-end; padding: 50px 20px 0 20px; } 
.people-block .img1 div {width: 100%; aspect-ratio: 742/650;  background: url("../_img/people-1.png") bottom no-repeat; background-size: contain; } 

@media screen and (min-width: 800px) {
	.people-block .container:has(.img2) {padding-right: 0; grid-template-columns: 1fr 1.25fr }
}
.people-block .img2 {height: 100%; display: flex; align-items: center;  padding: 50px 0;   } 
.people-block .img2 div {width: 100%; aspect-ratio: 800/400; background: url("../_img/people-2.png") bottom no-repeat; background-size: contain;  } 

@media screen and (max-width: 800px) {
	.people-block .container { grid-template-columns: 1fr; gap: 0;;  }
	.people-block .img1 {height: 100%; padding: 0; } 
	.people-block .img1 div {max-width: 400px; margin: 0 auto; } 
	.people-block .img2 {padding: 0; transform:translate(30px,-40px);}
}
@media screen and (max-width: 600px) {
	.people-block .img2 {padding: 0; transform:translate(20px,-30px);}
}

.cols-2-block { margin: 50px 0;}
.cols-2-block .user-content {align-self: center;}
.cols-2-block .content-text.user-content {margin: 0;}
.cols-2-block .content-text.user-content h2 {font-size: 2.5em; line-height: 1.05; margin: 1rem 0; letter-spacing: -1px;}
@media screen and (max-width: 1000px) {
	.cols-2-block div:first-child::after{display:none;}
	.cols-2-block div:first-child *:last-child {margin-bottom: 0;}
	.cols-2-block div:last-child::before{display:none;}
	.cols-2-block div:last-child *:first-child {margin-bottom: 0;}}

	
}


.course-hero-container {}
.concertinas {text-align: left; margin: 20px auto; }
.concertinas .concertina {margin: 15px 0; }			

.concertinas .concertina > a {display:block; position: relative;  padding: 12px 60px 12px 32px; color: #fff; background: #066CBF; text-decoration: none; font-weight: 700; font-size: 18px; }
.concertinas .concertina > a:hover {color: #fff;}
.concertinas .concertina > a span {position: absolute; right: 32px; top: 50%; width: 12px; height: 12px; margin-top: -8px; border-right: 3px solid #fff; border-bottom: 3px solid #fff; transform: rotate(45deg); transition: all ease-in-out 0.0s}
.concertinas .concertina > a p {margin: 0; }
.concertinas .concertina > div {position: relative; height: 0; overflow: hidden; border: 2px solid #0A99E0; border-top-width: 8px; }
.concertinas .concertina > div > div {position: absolute; left: 0; bottom: 0; width: 100%; padding: 0 30px; }
.concertinas .concertina > div > div h4 {margin: 24px 0 5px 0;}
.concertinas .concertina > div > div:before {content: ""; display:block; padding-top: 1px; margin-bottom: 20px; }
.concertinas .concertina > div > div:after {content: ""; display:block; padding-bottom: 1px; margin-top: 30px; }
.concertinas .concertina.open > div {height: auto; }
.concertinas .concertina.open > div > div {position: relative;}	 
.concertinas .concertina.open > a span {transform: rotate(-135deg); margin-top: -5px;  }
.concertinas .concertina > div .user-content {margin: 0;}
@media screen and (max-width:600px) {
    .concertinas .concertina > a {font-size: 16px; padding: 12px 40px 12px 20px;  }
    .concertinas .concertina > a span {right: 20px;  }
	.concertinas .concertina > div > div {padding: 0 20px; }
}

.course-cta {display: flex; justify-content: center; align-items: center; min-height: 205px; margin: 25px 0px; background: #aaa; color: #fff; border-bottom: 16px solid #555  }
.course-cta.green {background: var(--gc-green); border-color: var(--gc-green-dark); }
.course-cta.blue {background: var(--gc-blue); border-color: var(--gc-blue-light); }
.course-cta.orange {background: var(--gc-orange); border-color: var(--gc-orange-dark); }
.course-cta.yellow {background: var(--gc-yellow); border-color: var(--gc-yellow-dark); color: var(--gc-blue-dark)}
.course-cta.yellow .button {border-color: var(--gc-blue-dark); color: var(--gc-blue-dark)}
.course-cta.purple {background: var(--gc-purple); border-color: var(--gc-purple-dark); }

.course-cta .cta-content {font-size: 24px; font-weight: 700; text-align: center; line-height: 33px; padding: 0px 25px}
.course-cta .cta-content p {margin:0px!important}
.course-cta .cta-content .button-container:last-child {margin-bottom: 0;}
@media screen and (max-width:600px) {
    .course-cta .cta-content {font-size: 22px; line-height: 28px; }
}

.post-sliders {}
.post-sliders .title {color: var(--gc-blue); font-weight: 700; font-size: 24px;}
@media screen and (max-width:600px) {
    .post-sliders .title { font-size: 22px;}
}
/* || Galleries */

.gallery {background: #fff; margin: 25px 0;}

header + .gallery {margin-top: 0; padding-top: 25px; }
header + .gallery::before {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 50%; background: url("../_img/carousel_bg.svg");}
@media screen and (max-width:1300px) {
	.header-wrapper + .gallery {margin-top: 0;}
	.breadcrumb + .gallery {margin-top: 0;}
}
.gallery-cell {position: relative; width: 100%; max-width: 1240px; height: 600px; margin-right: 25px; background: #efefef; background-size: cover!important; background-position: center center!important; }
.gallery-cell-products {position: relative; width: 100%; max-width: 1240px; height: 698px; margin-right: 25px; background: #efefef; background-size: cover!important; background-position: center center!important; }
.gallery-cell-courses {position: relative; width: 100%; max-width: 1240px; height: 520px; margin-right: 25px; background: #efefef; background-size: cover!important; background-position: center center!important; }
.gallery-cell-small {position: relative; width: 100%; max-width: 600px; height: 340px; margin-right: 25px; background: #efefef; background-size: cover!important; background-position: center center!important; }
.gallery-cell-case-studies {position: relative; width: 100%; max-width: 670px; height: 340px; margin-right: 50px; background: #efefef; background-size: cover!important; background-position: center center!important; }
.gallery-cell-news {position: relative; width: 100%; max-width: 340px; height: 380px; margin-right: 25px; background: #efefef; background-size: cover!important; background-position: center center!important; }
.gallery-cell-courses-mini {position: relative; width: 100%; height: 380px; margin-right: 25px; background: #efefef; background-size: cover!important; background-position: center center!important; }
.gallery-cell-courses-mini img {height: auto!important; width: 100%!important; display: none}
.gallery-cell-inPage {position: relative; width: 100%; height: 420px; margin-right: 25px; background-color: #eee; background-repeat: no-repeat; background-size: contain!important; background-position: center center!important; }

.gallery-cell .desktop {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #efefef; background-size: cover!important; background-position: center center!important; }
.gallery-cell .mobile {display: none; }
@media screen and (max-width:600px) { 
	.gallery-cell .desktop {display: none;}
	.gallery-cell .mobile {position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; background-color: #efefef; background-size: cover!important; background-position: center center!important; }
}

.is-fullscreen .gallery-cell-inPage {background-color: transparent!important;}
.gallery.is-fullscreen {padding: 35px 0!important}
.gallery-cell-inPage img {height: auto!important; width: 100%!important; display: none; max-width: 1200px;}
.gallery-cell-thumb {position: relative; width: 100%; max-width: 100px; height: 70px; margin-right: 5px; background: #efefef; background-size: cover!important; background-position: center center!important; }

.gallery-cell-thumb.is-nav-selected .thumb-overlay {position: absolute; top: 0px; left: 0px; width: 100%; height: 100%!important; background: linear-gradient(to top,  rgba(0, 0, 0, 0),rgba(0, 0, 0, 0)); outline: 2px solid #3bb8b6; outline-offset: -2px;}
.thumb-overlay {position: absolute; top: 0px; left: 0px; width: 100%; height: 100%!important; background: linear-gradient(to top,  rgba(0, 0, 0, 0.2),rgba(0, 0, 0, 0.2)) }
.overlay {position: absolute; top: 0px; left: 0px; width: 100%; height: 100%!important; background: linear-gradient(to top,  rgba(0, 0, 0, 0.7),rgba(0, 0, 0, 0))}
.gallery-cell .gallery-text {position:absolute; width: 100%; bottom: 50px;  text-align: center; color: #fff; font-size: 45px; font-weight: 700; line-height: 55px; padding: 0px 25px; }

@media screen and (max-width:900px) {    
    .gallery-cell { height: 420px;  }
    .gallery-cell-products { max-width: 1240px; height: 420px;  }
    .gallery-cell-courses { max-width: 1240px; height: 420px;  }
    .gallery-cell .gallery-text { bottom: 25px;  font-size: 35px; font-weight: 700; line-height: 40px; padding: 0 25px; }    
}


.gallery-cell-small .gallery-text {position:absolute; width: 100%; bottom: -100px;  text-align: center; color: #fff; font-size: 20px; font-weight: 700; line-height: 30px; padding: 0; transition: all ease-in-out 0.2s;}
.gallery-cell-small:hover .gallery-text {bottom: 0px;}

.gallery-cell-case-studies .gallery-text {position:absolute; width: 100%; bottom: -50px;  text-align: left; color: #fff; font-size: 24px; font-weight: 700; line-height: 25px; padding: 0px 25px; transition: all ease-in-out 0.2s }
.gallery-cell-case-studies:hover .gallery-text {bottom: 20px;}

.gallery-cell-news .gallery-text {position:absolute; width: 100%; bottom: -50px;  text-align: left; color: #fff; font-size: 20px; font-weight: 700; line-height: 25px; padding: 0px 25px; transition: all ease-in-out 0.2s }
.gallery-cell-news:hover .gallery-text {bottom: 20px;}

.final-slide {background: background: var(--gc-green) }
.final-slide .gallery-text {position:absolute; width: 100%; bottom: 15px!important; text-align: left; color: #fff; font-size: 20px; font-weight: 400; line-height: 25px; padding: 0px 25px; transition: all ease-in-out 0.2s }
.final-slide .gallery-text:hover { bottom: 15px!important;  }

.final-slide .gallery-text .gallery-final-text {position:absolute; left: 0px; bottom: 150px;  font-size:28px;   text-align: center; line-height: 39px; font-weight: 700; padding: 0 90px;}
.final-slide .gallery-text .gallery-final-text P {margin:0px;}

.is-fullscreen .gallery-cell-inPage {height: 100%; width: 100%;  display: flex;align-items: center;justify-content: center; background-image: none!important   }
.is-fullscreen .gallery-cell-inPage img {width: 100%!important; height: auto!important; display: block}

.is-fullscreen .gallery-cell-courses-mini {height: 100%; width: 100%;  display: flex;align-items: center;justify-content: center; background-image: none!important   ;background-color: transparent}
.is-fullscreen .gallery-cell-courses-mini img {width: 100%!important; max-width: 1000px; height: auto!important; display: block}


.gallery-cell-courses a.video-link {position: relative; display: block; height: 100%; width: 100% }
.gallery-cell-courses a.video-link {display: block; }
.gallery-cell-courses a.video-link:after {content: ""; position: absolute; top: 50%; left: 50%; width: 80px; height: 80px; margin-top: -40px; margin-left: -40px; background-image: url("../_img/icons/play-button.svg"); box-sizing: border-box;; opacity: 0.5; transition: all linear 0.1s;}
.gallery-cell-courses a.video-link:hover:after {opacity: 1;}

a.xvideo-link {position:absolute; display: block; left: 0px; top: 0px; height: 100%; width: 100%;}
a.xvideo-link:hover {}
a.xvideo-link .video-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 95px; height: 95px; background-image:url("../_img/icons/play-button.svg"); background-size: contain; background-repeat: no-repeat; opacity: 0.6; transition: all 0.2s linear;}
a.xvideo-link:hover .video-icon {opacity: 1;}

.inpage-video-link {position:relative}
.inpage-video-link a {position:absolute; display: block; left: 0px; top: 0px; height: 100%; width: 100%;}
.inpage-video-link a .video-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 95px; height: 95px; background-image:url("../_img/icons/play-button.svg"); background-size: contain; background-repeat: no-repeat; opacity: 0.6; transition: all 0.2s linear;}
.inpage-video-link a:hover .video-icon {opacity: 1;}

a.info-link {display: inline-block; width: 1.2em; height: 1.2em; vertical-align: -0.125em; background: url("../_img/icons/gc-icons-info.svg") center no-repeat; background-size: contain;  }
.floating-label a.info-link {display: none;}

@media screen and (max-width:1300px) {
    .gallery-cell-case-studies .gallery-text { padding: 0px 70px;  }
}

@media screen and (max-width:700px) {
    .final-slide .gallery-text .gallery-final-text { bottom: 120px;  }
}

@media screen and (max-width:600px) {
    .gallery-cell-case-studies .gallery-text { padding: 0px 25px;  }
    .final-slide .gallery-text .gallery-final-text {position:absolute; left: 0px; bottom: 120px;  font-size:24px;   text-align: center; line-height: 29px; font-weight: 700; padding: 0 50px;}
}

.link-container-gallery {position: relative; width: 100%;  margin:25px 0px 0px 0px;  text-align: left}

/* || Search Containers */

.search-container { display: block;}
.search-container .search-count {position:relative; width: 33px; height: 33px; display: inline-block; background-color:var(--gc-blue); color:#3bb8b6; border-radius: 50%; text-align: center;  }
.search-container .search-item {display:flex; margin: 5px 0px;  }
.search-container .search-item .flex {max-width: 50%;}

.search-container .search-item .flex:first-child {margin-right: 20px; padding-right: 20px; }
.search-container .search-item .flex a.title {color: var(--gc-blue); text-decoration: none; font-weight: 700;} 
.search-container .search-item .flex:hover a.title {color:#3bb8b6}
.search-container .search-item .flex .text {color:#000000; font-size: 13px;}


/* || Footers + Socials */

.course-follow-social {position:relative;}
.course-follow-social .title {font-size: 19px; line-height: 26px; color: var(--gc-blue); font-weight: 700; margin-bottom: 10px;}
.course-follow-social a {display: inline-block; width:50px; height: 50px; border-radius: 50%; margin-right: 10px;}
.course-follow-social a.social-youtube {background-image: url("../_img/social/gc-social-youtube-orange.svg"); background-size: cover;}
.course-follow-social a.social-twitter {background-image: url("../_img/social/gc-social-twitter-orange.svg"); background-size: cover;}
.course-follow-social a.social-instagram {background-image: url("../_img/social/gc-social-instagram-orange.svg"); background-size: cover;}
.course-follow-social a.social-facebook {background-image: url("../_img/social/gc-social-facebook-orange.svg"); background-size: cover;}

.course-share-social {position:relative;}
.course-share-social .title {font-size: 19px; line-height: 26px; color: var(--gc-blue); font-weight: 700; margin-bottom: 10px;}
.course-share-social a {display: inline-block; width:50px; height: 50px; border-radius: 50%; margin-right: 10px;}
.course-share-social a.social-youtube {background-image: url("../_img/social/gc-social-youtube-blue.svg"); background-size: cover;}
.course-share-social a.social-twitter {background-image: url("../_img/social/gc-social-twitter-blue.svg"); background-size: cover;}
.course-share-social a.social-facebook {background-image: url("../_img/social/gc-social-facebook-blue.svg"); background-size: cover;}
.course-share-social a.social-mail {background-image: url("../_img/social/gc-social-mail-blue.svg"); background-size: cover;}
.course-share-social a.social-print {background-image: url("../_img/social/gc-social-print-blue.svg"); background-size: cover;}


/* || Iframe Aspect Ratios */

.intrinsic-container {position: relative;  height: calc(100vh - 155px); overflow: hidden; min-height: 500px; }
.intrinsic-container iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}

@media screen and (max-width:1130px) {
    .intrinsic-container {position: relative;  height: calc(100vh - 130px); overflow: hidden; margin-left: -25px; margin-right: -25px; }
}

/* || Sitemap */

.sitemap {}
.sitemap ul {}
.sitemap ul li {}
.sitemap ul li ul {}
.sitemap ul li ul li {}


.alignL {text-align: left;}
.alignC {text-align: center;}
.alignR {text-align: right;}


.tabContainer {margin: 40px 0}
.tabContainer .tabs {display: flex; position: relative; align-items: center; justify-content: flex-start; gap: 10px; }
.tabContainer .tabs:before {content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--gc-blue);}
.tabContainer .tabs a {position: relative; box-sizing: border-box; padding: 7px 25px; border: 2px solid var(--gc-blue); border-top-left-radius: 15px; border-top-right-radius: 15px; text-decoration: none; font-weight: 700; color: #fff; background: var(--gc-blue); }
.tabContainer .tabs a.active {border-bottom-color: #fff; background: #fff; color: var(--gc-blue); pointer-events: none; }
.tabContainer .tabContent {display:none}
.tabContainer .tabContent.active {display:block;}
.tabContainer .tabContent .empty {text-align:center; padding: 40px 0;}

.casAppointmentsContainer {margin: 20px 0; }
.casAppointmentsContainer .user-content h2 {margin: 0;}
.casAppointmentsContainer .teamsLink {margin: 10px 0 20px 0;}
.casAppointmentsContainer .teamsLink a {display:inline-block; box-sizing: border-box; padding: 5px 25px; color: #fff; background: var(--gc-blue); border: 2px solid var(--gc-blue); text-decoration: none; font-size: 16px; font-weight: 700; border-radius: 20px; }
.casAppointmentsContainer .teamsLink a:hover{color: var(--gc-blue); background: #fff; }
.casAppointmentsContainer h4 {margin: 0;}
.casAppointmentsContainer table {border: 1px solid #ddd; border-collapse: collapse; width: 100%; margin: 10px 0; }
.casAppointmentsContainer table thead {font-size: 0.8em; color: #555; }
.casAppointmentsContainer table td {border: 1px solid #ddd; border-spacing: 0; padding: 10px 10px; }
.casAppointmentsContainer table td .empty {text-align:center; padding: 30px 0;}
.casAppointmentsContainer table td a {display:inline-block; padding: 5px 20px; color: #fff; background: var(--gc-blue); border: 2px solid var(--gc-blue); text-decoration: none; font-size: 16px; font-weight: 700; border-radius: 20px; }
.casAppointmentsContainer table td a:hover{color: var(--gc-blue); background: #fff; }
.casAppointmentsContainer .tick {position: relative; display: inline-block; width: 24px; height: 24px; }
.casAppointmentsContainer .tick:after  {content: ""; position: absolute; top: 50%; left: 50%; box-sizing: border-box; margin-top: -8px; margin-left: -10px; width: 20px; height: 10px; border-left: 4px solid var(--gc-blue); border-bottom: 4px solid var(--gc-blue); transform: rotate(-45deg);}
.casAppointmentsContainer .cross {position: relative; display: inline-block; width: 20px; height: 20px; }
.casAppointmentsContainer .cross:before  {content: ""; position: absolute; top: 50%; left: 50%; box-sizing: border-box; margin-top: -2px; margin-left: -10px; width: 18px; height: 4px; background: #bf0000; transform: rotate(-45deg);}
.casAppointmentsContainer .cross:after  {content: ""; position: absolute; top: 50%; left: 50%; box-sizing: border-box; margin-top: -2px; margin-left: -10px; width: 18px; height: 4px; background: #bf0000; transform: rotate(45deg);}
.casAppointmentsContainer .alert {display: inline-block; margin: 0 2px; width: 20px; height: 20px; background:url("../_img/icons/gc-alert.svg") center no-repeat; background-size: contain;}

.casSearchContainer .searchForm {position: relative; display: flex; align-items: center; gap: 10px; width: 100%; padding-right: 5px;  max-width: 400px; font-size: inherit;  margin: 10px auto; border: 2px solid var(--gc-blue); border-radius: 27px;  }
.casSearchContainer .searchForm input[type=text] {border: none; flex-grow: 1; background: none; box-sizing: border-box; padding: 15px; outline: none; font-size: inherit}
.casSearchContainer .searchForm select {border: none; background: none; box-sizing: border-box; padding: 15px; outline: none;}
.casSearchContainer .searchForm button {border: none; outline: none; cursor:pointer; background:url("../_img/icons/gc-icons-search.svg") center no-repeat var(--gc-blue); background-size: 20px auto; color: transparent; width: 40px; height: 40px; border-radius: 50%; }
.casSearchContainer .searchResults {position: relative; min-height: 80px; margin: 30px 0;}
.casSearchContainer.loading .searchResults {opacity: 0.5;}
.casSearchContainer.loading .searchResults:after {content: ""; display:block; position: absolute; top: 50%; left: 50%; margin-top: -20px; margin-left: -20px; border: 6px solid var(--gc-blue); border-top: 6px solid transparent; border-radius: 50%; width: 40px; height: 40px; animation: spin 2s linear infinite; box-sizing: border-box;}

.casSearchContainer .searchResults table {border: 1px solid #ddd; border-collapse: collapse; width: 100%; margin: 10px 0; }
.casSearchContainer .searchResults table thead {font-size: 0.8em; color: #555; }
.casSearchContainer .searchResults table td {border: 1px solid #ddd; border-spacing: 0; padding: 5px 10px; }
.casSearchContainer .searchResults table td .empty {text-align:center; padding: 30px 0;}
.casSearchContainer .searchResults table td a {display:inline-block; padding: 5px 20px; color: #fff; background: var(--gc-blue); border: 2px solid var(--gc-blue); text-decoration: none; font-size: 16px; font-weight: 700; border-radius: 20px; }
.casSearchContainer .searchResults table td a:hover{color: var(--gc-blue); background: #fff; }

.casSearchContainer .searchResults .pager {text-align:right; font-weight:normal; font-size: 11px; color: #555;}
.casSearchContainer .searchResults .pager ul {padding: 0; margin: 0 0 3px 0; border-collapse:collapse; list-style:none; font-size: 15px; color: #333;}
.casSearchContainer .searchResults .pager ul li {display: inline-block; position: relative; line-height: 1.2em; vertical-align:middle; }
.casSearchContainer .searchResults .pager ul li:first-child a, .pager ul li:first-child i {border-top-left-radius: 4px; border-bottom-left-radius:4px; border-left: 1px solid #ccc;}
.casSearchContainer .searchResults .pager ul li:first-child a:after, .pager ul li:first-child i:after {content: ""; position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; margin-top: -4px; margin-left: -3px; border-left-style: solid; border-left-width: 2px; border-bottom-style: solid; border-bottom-width: 2px; box-sizing: border-box; transform: rotate(45deg); }
.casSearchContainer .searchResults .pager ul li:first-child i:after {border-color: #ccc;}
.casSearchContainer .searchResults .pager ul li:first-child a:after {border-color: #000;}
.casSearchContainer .searchResults .pager ul li:first-child a:hover:after {border-color: #fff;}

.casSearchContainer .searchResults .pager ul li:last-child a, .pager ul li:last-child i {border-top-right-radius: 4px; border-bottom-right-radius:4px;}
.casSearchContainer .searchResults .pager ul li:last-child a:after, .pager ul li:last-child i:after {content: ""; position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; margin-top: -4px; margin-left: -6px; border-right-style: solid; border-right-width: 2px; border-bottom-style: solid; border-bottom-width: 2px; box-sizing: border-box; transform: rotate(-45deg); }
.casSearchContainer .searchResults .pager ul li:last-child i:after {border-color: #ccc;}
.casSearchContainer .searchResults .pager ul li:last-child a:after {border-color: #000;}
.casSearchContainer .searchResults .pager ul li:last-child a:hover:after {border-color: #fff;}

.casSearchContainer .searchResults .pager b, .pager a, .pager i {border-top:1px solid #ccc; border-bottom:1px solid #ccc; display: inline-block; padding: 4px 2px; text-align: center; min-width: 24px; text-decoration:none; line-height: 1.2em; font-weight:normal;font-style:normal; border-right: 1px solid #ccc; }
.casSearchContainer .searchResults .pager b, .pager a, .pager i {padding: 4px 2px;}

.casSearchContainer .searchResults .pager ul li b {background-color:var(--gc-blue); color:#fff; border-color: var(--gc-blue) }
.casSearchContainer .searchResults .pager ul li i {background-color:rgba(255,255,255,0.5); color:#ccc; }
.casSearchContainer .searchResults .pager ul li a {background-color:rgba(255,255,255,0.5); color:#333;}
.casSearchContainer .searchResults .pager ul li em {padding-left: 2px; padding-right: 2px; }
.casSearchContainer .searchResults .pager ul li a:hover {color:#fff; background-color:var(--gc-blue); border-color: #666; }

.casMenu {margin: 50px 0;}
.casMenu .title {position: relative; font-size: 24px; font-weight: 700; color: var(--gc-blue);  }
.casMenu .title a {position: absolute; top: 0; right: 0; padding: 5px 20px; color: #fff; background: var(--gc-blue); border: 2px solid var(--gc-blue); text-decoration: none; font-size: 18px; font-weight: 700; border-radius: 20px; }
.casMenu .title a:hover {background: #fff; color: var(--gc-blue);} 
.casMenu hr {margin: 30px 0; border: none; height: 1px; background:var(--gc-blue);} 
.casMenu .casNote {position: relative; padding-left: 36px; margin: 20px 0;}
.casMenu .casNote .casNoteTitle {color: var(--gc-blue); font-weight: 700;  }

.casMenu .casNote .tick {position: absolute; top: 0; left: 0; width: 26px; height: 26px; border-radius:50%; background: #3bb8b6;}
.casMenu .casNote .tick:before {content: ""; position: absolute;  left: 50%; top: 50%; width: 14px; height: 6px; margin-top: -4px; margin-left: -7px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; box-sizing: border-box; transform: rotate(-45deg);}

.casMenu .casAlert {margin: 10px 0; padding-left:30px; background: url("../_img/icons/gc-alert.svg") left no-repeat; background-size: 20px auto; color: #bf0000; font-weight: 700 }

.casPersonalInfo {font-size: 18px; }
.casPersonalInfo .label {margin-top: 20px; }
.casPersonalInfo .value {margin-bottom: 20px; font-weight: 700; }

.casButtonContainer {margin: 30px 0; display: flex; justify-content: space-between}
.casButtonContainer a {position:relative; display: block; border-radius: 25px; border: 2px solid var(--gc-blue); color: #fff; background: var(--gc-blue); text-decoration: none; padding:0px 50px; height: 50px; font-size: 18px; font-weight: 700; padding-top: 10px;}
.casButtonContainer a:hover { background-color: #fff; color: var(--gc-blue); }

.casSearchContainer .alert {display: inline-block; margin: 0 2px; width: 20px; height: 20px; background:url("../_img/icons/gc-alert.svg") center no-repeat; background-size: contain;}
.casSearchContainer .tick {position: relative; display: inline-block; width: 24px; height: 24px; }
.casSearchContainer .tick:after  {content: ""; position: absolute; top: 50%; left: 50%; box-sizing: border-box; margin-top: -8px; margin-left: -10px; width: 20px; height: 10px; border-left: 4px solid var(--gc-blue); border-bottom: 4px solid var(--gc-blue); transform: rotate(-45deg);}
.casSearchContainer .cross {position: relative; display: inline-block; width: 20px; height: 20px; }
.casSearchContainer .cross:before  {content: ""; position: absolute; top: 50%; left: 50%; box-sizing: border-box; margin-top: -2px; margin-left: -10px; width: 18px; height: 4px; background: #bf0000; transform: rotate(-45deg);}
.casSearchContainer .cross:after  {content: ""; position: absolute; top: 50%; left: 50%; box-sizing: border-box; margin-top: -2px; margin-left: -10px; width: 18px; height: 4px; background: #bf0000; transform: rotate(45deg);}
.CASspcialAlert {color: #b50000; margin: 1em 0; font-weight: 700; font-size: 1.1em}
.CASspcialAlert .alert {display: inline-block; margin: 0 10px 0 0; vertical-align: middle; width: 20px; height: 20px; background:url("../_img/icons/gc-alert.svg") center no-repeat; background-size: contain;}
		
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


.cas-container {margin: 30px 0; border: 2px solid var(--gc-blue); background: rgba(30,54,100,0.2); padding: 0 20px; border-radius: 4px  }

/* || Cart  */

.cartTable {width: 100%; border-collapse: collapse; border: none;}
.cartTable td {border: none;}
.cartTable thead tr td {padding: 5px 5px; vertical-align: top;}
.cartTable tbody tr td {padding: 10px 5px; vertical-align: top;}
.cartTable tfoot tr td {padding: 10px 5px; vertical-align: top;}
.cartTable tr td:first-child {padding-left: 10px;}
.cartTable tr td:last-child {padding-right: 10px;}
.cartTable thead tr td {border-bottom: 1px solid #ccc}
.cartTable tbody tr td {background: #eee; border-bottom: 1px solid #ddd; }
.cartTable a:not(.button) {color: var(--gc-blue);}
.cartTable tbody .prodText {padding-left: 70px; min-height: 70px; position:relative;}
.cartTable tbody .prodText .image {position: absolute; left: 0; top: 0; width: 60px; height: 60px; background-size: cover; background-postiojn: center; background-color: #ddd; background-repeat: no-repeat; border: 1px solid #ccc; margin-right: 10px; ;}
.cartTable tbody .prodText .image b {position: absolute; top: 50%; left: 0; width: 100%; font-size: 9px; font-weight: 400; line-height: 0; text-align:center; color: #999;}
.cartTable tbody .prodLink {display:block; font-weight: 700; }
.cartTable tbody .choices {font-size: 0.8em; margin: 5px 0;}
.cartTable tbody .remove {font-size: 0.8em; margin: 5px 0;}
.cartTable tfoot tr td {background: #ddd; font-weight: 800;  }
.cartTable .fa-trash {font-size: 1.2em;}
.cartTable .shippingCalc {font-weight: normal;}
.cartTable .shippingCalc form{margin: 10px 0;}
.cartTable .shippingCalc .title {font-weight: 700;}
.cartTable .shippingCalc .error {mrgin-top: 5px; color: #b50000}
.cartTable .shippingCalc input {padding: 5px 10px; border: 1px solid #ccc;}
.cartTable .shippingCalc button {padding: 5px 10px}
.cartTable .shippingCalc button {position: relative; background: #dca719; color: #fff; cursor:pointer; font-weight: 700; border: none; outline: none; border-radius: 5px; padding: 5px 20px; transition: all 0.2s ease; }
.cartTable .shippingCalc button:hover {background:#fff; color: #000;}
.cartTable .cartQty a {}
.cartTable .cartQty select {display: none; box-sizing: border-box; color: #555; background: #fff;; padding: 3px 20px 3px 8px; border: 1px solid var(--gc-blue); outline: none; border-radius: 6px; transition: all 0.2s ease;  }

@media screen and (max-width:750px) {
	.cartTable tbody .prodText {padding-left: 0; }
	.cartTable tbody .prodText .image {display:none;}
	.cartTable tbody .description {display:none;}
	.cartTable tr td:nth-child(2) {display:none;}
	.cartTable tr td:nth-child(3) {display:none;}	
}

.detailsTable {width: 100%; border-collapse: collapse; border: none;}
.detailsTable td {border: none;}
.detailsTable thead tr td {padding: 5px 5px; vertical-align: top;}
.detailsTable tbody tr td {padding: 10px 5px; vertical-align: top;}
.detailsTable tfoot tr td {padding: 10px 5px; vertical-align: top;}
.detailsTable tr td:first-child {padding-left: 10px;}
.detailsTable tr td:last-child {padding-right: 10px;}
.detailsTable thead tr td {border-bottom: 1px solid #ccc}
.detailsTable tbody tr td {background: #eee; border-bottom: 1px solid #ddd;}
.detailsTable a {color: var(--gc-blue);}
.detailsTable tfoot tr td {background: #ddd; font-weight: 800;}

.alertsModal {position: fixed; display:none; top: 0; left: 0; width: 100%; height: 100%; height: 100dvh; background:rgba(0,0,0,0.7); z-index: 100; }

.alertsModal h1 {padding: 0; margin: 1em 0 0.5em 0;}
.alertsModal p {padding: 0;margin: 0.5em 0;}

.alertsModal .inner {position: absolute; left: 50%; top: 50%; width: 90%; max-width: 450px; height: auto; max-height: 100%; padding: 0; background: #fff; background: rgba(255,255,255,0.9); box-sizing: border-box; -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75); -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75); box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);}
.alertsModal .inner a.closeButton { position: absolute; top: -12px; right: -12px;  }
.alertsModal .inner .content {position: relative; margin: 0 auto; padding: 0 20px; overflow: auto; text-align: center}
.alertsModal .inner .content:before {content: ""; position: relative; display: block; padding-top: 1px; margin-bottom: 30px; }
.alertsModal .inner .content:after {content: ""; position: relative; display: block; padding-bottom: 1px; margin-top: 30px; }
.alertsModal .inner .content .button-container {display: block; margin: 20px 0;}

ul.addressList {list-style: none; padding: 0; margin: 1em; border-bottom: 1px solid #ccc;}
ul.addressList li {padding: 5px 40px 5px 3px; margin: 0; position: relative; border-top: 1px solid #ccc;}
ul.addressList li:nth-child(even) {background: #f7f7f7;}
ul.addressList li a {position: absolute; top: 50%; margin-top: -13px; right: 3px; background: var(--gc-blue); color: #fff; padding: 4px 10px; text-decoration: none; font-size: 13px;}

.uploadForm{display:none;}


table.casBookingCalendar {border: 1px solid #ccc; border-collapse: collapse; width: 100%; margin: 20px 0; text-align:center; }
table.casBookingCalendar thead tr td.calendarTitle {position: relative; padding: 10px 0;background: var(--gc-blue);color: #fff;  font-size: 1.1em; font-weight: 700; }
table.casBookingCalendar thead tr td.calendarTitle a {position: absolute; width: 40px; height: 100%; top: 0;}
table.casBookingCalendar thead tr td.calendarTitle a.prev {left: 0;}
table.casBookingCalendar thead tr td.calendarTitle a.prev:after {content: ""; position: absolute; left: 50%; top: 50%; margin-top: -8px; margin-left: -5px;  width: 16px; height: 16px; box-sizing: border-box; border-color: #fff; border-style: solid; border-width: 0 0 3px 3px; transform: rotate(45deg); }
table.casBookingCalendar thead tr td.calendarTitle a.next {right: 0;}
table.casBookingCalendar thead tr td.calendarTitle a.next:after {content: ""; position: absolute; right: 50%; top: 50%; margin-top: -8px; margin-right: -5px;  width: 16px; height: 16px; box-sizing: border-box; border-color: #fff; border-style: solid; border-width: 0 3px 3px 0; transform: rotate(-45deg); }
table.casBookingCalendar tbody tr td {position: relative; border: 1px solid #ccc; padding: 0; width: 1.25%; }

table.casBookingCalendar tbody tr td:first-child {background: #eee;} 
table.casBookingCalendar tbody tr td:last-child {background: #eee;} 
table.casBookingCalendar tbody tr td > span{display:block; color: #666; padding: 11px 0; font-size: 1.1em; }
table.casBookingCalendar tbody tr td a{display:block; color: #fff; background: var(--gc-blue); padding: 10px 0; font-size: 1.1em; text-decoration: none; line-height: 1.1;  font-weight: 700;}
table.casBookingCalendar tbody tr td a span {display: block; position: relative; font-size: 12px; font-weight: 400; }
table.casBookingCalendar tbody tr td a span:after {content: ""; display: inline-block; width: 8px; height: 8px; box-sizing: border-box; border-color: #fff; border-style: solid; border-width: 0 2px 2px 0; transform: rotate(-45deg); }
table.casBookingCalendar tbody tr td.today a {border: 3px solid #f00; padding: 7px 0;}
.casBookingDate {font-size: 1.15em; font-weight: 700; margin: 10px 0;}
.casBookingError {margin: 20px 0; color: #b50000}

table.concessionTable {border: none; margin: 10px 0 25px 0}
table.concessionTable tbody {font-weight: bold;}
table.concessionTable td {border: none; padding: 4px;}
table.concessionTable td select {padding: 6px 10px; }
table.concessionTable td .price {font-size: 22px; font-weight: 700; color: var(--gc-blue);}

.form-container {font-size: 16px;}
.form-container .field { position: relative; margin: 20px 0; }
.form-container input[type=text], .form-container input[type=password], .form-container textarea, .form-container select {width: 100%; padding: 11px 18px; font-size: inherit; font-family: inherit; color: inherit; border: 1px solid var(--gc-blue); border-left-width: 4px; outline: none; transition: all 0.2s; }
.form-container input[type=text]:focus, .form-container input[type=password]:focus, .form-container textarea:focus, .form-container select:focus {border-color: var(--gc-blue);  }

.form-container textarea {height: 140px; font-family: inherit; }
.form-container label {position: relative; display: block; margin-bottom: 5px; padding-right: 25px;}
.form-container label .description {font-size: 0.6em;}

.form-container .field.floating-label label { position: absolute; top: 0; left: 0; color: #333; pointer-events: none; width: 100%; padding: 11px 20px 0 22px; box-sizing: border-box; z-index: 1; transition: all 0.2s ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.form-container .field.floating-label input[type=text],
.form-container .field.floating-label textarea,
.form-container .field.floating-label select {padding-top: 16px; padding-bottom: 6px;} 
.form-container .field.floating-label.active label {font-size: 0.7em; opacity: 0.8; padding-top: 4px; }

.form-container .error {color: #b50000; margin-top: 3px; display: none; }
.form-container .error.active {display:block; }

.form-container.waiting { opacity: 0.5; }
.form-container.waiting .button-container button { color: transparent; }
.form-container.waiting .button-container button:hover { color: transparent;  }
.form-container.waiting .button-container button:after { content: ""; position: absolute; display: block; left: 50%; top: 50%; margin-top: -12px; margin-left: -12px; border: 4px solid rgba(255,255,255, 0.5); border-top: 4px solid #fff; border-radius: 50%; width: 24px; height: 24px; animation: spin 1.5s linear infinite; box-sizing: border-box; }
.form-container.waiting:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.form-container .select-container { position: relative; }
.form-container .select-container select::-ms-expand {display: none;}
.form-container .select-container select {-webkit-appearance: none; -moz-appearance: none; text-indent: 1px; text-overflow: '';}
.form-container .select-container:after {content: ""; position: absolute; right: 20px; top: 50%; width: 10px; margin-top: -7px; height: 10px; border-right: 2px solid #888; border-bottom: 2px solid #888; box-sizing: border-box; transform:rotate(45deg); pointer-events: none;}

.form-container .date-container {position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

.form-container .date-container .select-container {}
.form-container .date-container.date-container_4 .select-container {width: 25%;}
.form-container .date-container.date-container_5 .select-container {width: 20%;}
.form-container .date-container .select-container .arrow {right: 5px;}

.form-container .checkbox-container { display: block; position: relative; outline: none; padding-left: 32px; min-height: 28px; box-sizing: border-box; }
.form-container .checkbox-container > i {position: absolute; left: 0; top: 2px; cursor: pointer; line-height: 0; height: 23px; width: 23px; border: 1px solid var(--gc-blue); text-align: center; color: transparent; background: #fff; margin-right: 15px;}
.form-container .checkbox-container.checked > i {background: var(--gc-blue);}
.form-container .checkbox-container.checked > i:after {content: ""; position: absolute; left: 50%; top: 50%; margin-left: -7px; margin-top: -6px; width: 14px; height: 8px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); box-sizing: border-box }

.form-container .radio-container {}
.form-container .radio-container .radio {display: inline-block;; position: relative; outline: none; padding-left: 30px; margin: 3px 20px 3px 0 ; min-height: 28px; box-sizing: border-box; }
.form-container .radio-container .radio label {display: inline-block; }
.form-container .radio-container .radio > i {position: absolute; top: 0; left: 0; cursor: pointer; width: 23px; height: 23px; background: #fff; border: 1px solid var(--gc-blue); }
.form-container .radio-container .radio.checked i {border-color: var(--gc-blue);}
.form-container .radio-container .radio.checked > i:after {content: ""; position: absolute; left: 3px; top: 3px; right: 3px; bottom: 3px; background: var(--gc-blue); }
.form-container .radio-container .radio a {text-decoration: none; }

.uploadForm {display: none;}
.form-container .upload-container .uploader-inner { position: relative; display: grid; grid-template-columns: 100px 1fr; gap : 10px; }
.form-container .upload-container .uploader-inner .thumb {position: relative; width: 100px; height: 100px; grid-row: 1 / span 2; cursor: pointer; box-sizing: border-box; border: 1px solid var(--gc-blue); border-left-width: 4px;  background-size: cover; background-position: center; }
.form-container .upload-container .uploader-inner .thumb i {position: absolute; top: 50%; left: 0; width: 100%; line-height: 0; color: #ccc; text-align: center; font-size: 30px;}
.form-container .upload-container .uploader-inner .thumb a {display: none;}
.form-container .upload-container .uploader-inner .thumb .progress {position: absolute;left: 0;bottom: 0;width: 100%; border: 1px solid #fff; height: 6px; background: #fff; box-sizing: border-box;}
.form-container .upload-container .uploader-inner .thumb .progress div {position: absolute; left: 0; top: 0;height: 100%; background: red;}
.form-container .upload-container .uploader-inner .thumb.thumbActive i {display: none;}
.form-container .upload-container .thumb.thumbActive a {position: absolute; display: block; top: 0; right: 0; width: 20px; padding: 10px 0; color: #fff; background: rgba(0, 0, 0, 0.4); }
.form-container .upload-container .thumb.thumbActive a:after {content: ""; position: absolute; background: #fff; width: 16px; height: 2px; top: 50%; left: 50%; margin-top: -1px; margin-left: -8px; transform: rotate(-45deg); border-radius: 2px; }
.form-container .upload-container .thumb.thumbActive a:before { content: ""; position: absolute; background: #fff; width: 16px; height: 2px; top: 50%; left: 50%; margin-top: -1px; margin-left: -8px; transform: rotate(45deg); border-radius: 2px; }
.form-container .upload-container .thumb.thumbActive a:hover {background: red;}
.form-container .upload-container .details {align-self: end;}
.form-container .upload-container .details .small {font-size: 0.7em;} 

.form-container .postcodeLookup-container {}
.form-container .postcodeLookup-container .pclInner {position: relative; margin: 5px 0;}
.form-container .postcodeLookup-container .pclButton { position: absolute; right: 0; top: 0; background: #000; text-decoration: none; padding: 12px 10px 0 10px; font-size: 0.8em; height: 100%; box-sizing: border-box; }
.form-container .postcodeLookup-container .pclButton i {margin-left: 5px; }
.form-container .postcodeLookup-container .pclButton:hover { color: #fff; }
.form-container .postcodeLookup-container .pclManualLink {display: block; font-size: 0.8em; margin: 5px 0; }
.form-container .postcodeLookup-container.waiting .pclButton {color: transparent;}
.form-container .postcodeLookup-container.waiting .pclButton:after {content: ""; position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; margin-top: -10px; margin-left: -10px; border: 4px solid #fff; border-right: 4px solid rgba(255,255,255,0.5); border-radius: 50%; box-sizing: border-box; animation: spin 1.5s linear infinite;  }
.form-container .submit-container.submit-container-application {display: flex; justify-content: space-between;}
.form-container .submit-container.submit-container-application a {position:relative; display: inline-block; cursor: pointer; border-radius: 25px; text-decoration: none; border: 2px solid #a7a7a7; background: #fff; color: #a7a7a7; padding:10px 50px; height: 50px; font-size: 18px; font-weight: 700; transition: all 0.3s; }
.form-container .submit-container.submit-container-application a:hover { background-color: #fff; color: var(--gc-blue); border-color: var(--gc-blue); }
.form-container .searchList-container {position: relative; }		
.form-container .searchList-container .display {position: relative; outline: none; line-height: 1.1;  }
.form-container .searchList-container .display > div {position: relative; box-sizing: border-box; border: 1px solid var(--gc-blue-dark); border-left-width: 4px; background: #fff; color: #333; outline: none; padding: 16px 40px 6px 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer}
.form-container .searchList-container:after {content: ""; position: absolute; right: 20px; top: 50%; width: 10px; margin-top: -7px; height: 10px; border-right: 2px solid #888; border-bottom: 2px solid #888; box-sizing: border-box; transform:rotate(45deg); pointer-events: none;}
.form-container .searchList-container .opener {display:none;}
.form-container .searchList-container.active .display > div {border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: 1px solid #ccc;;}
.form-container .searchList-container.active .cover {position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 6; }
.form-container .searchList-container.active .opener {z-index: 8; border-color: var(--gc-blue-dark); border-style: solid; border-width: 0 1px 1px 4px; } 
.form-container .searchList-container.active .opener {display: block; position: absolute; top: 100%; left: 0; width: 100%; background: #fff; font-size: 14px; overflow: hidden; }
.form-container .searchList-container.active .opener .search {padding: 10px; position: relative;  }
.form-container .searchList-container.active .opener .search input[type=text] { border: 1px solid #aaa; padding: 5px 10px; font-size: 15px; background: #fff;   }
.form-container .searchList-container.active .opener .search i {position: absolute; top: 50%; right: 20px; line-height: 0; pointer-events: none; color:#333; }
.form-container .searchList-container.active .opener .searchResult {position: relative; max-height: 220px; overflow: auto; }
.form-container .searchList-container.active .opener .searchResult ul { margin: 0; padding: 0; list-style: none; text-align: left; }
.form-container .searchList-container.active .opener .searchResult ul li { border-top: 1px solid #ccc;}
.form-container .searchList-container.active .opener .searchResult ul li a {display: block; position: relative; padding: 8px 15px 5px 15px; text-decoration: none; color: #333;  }
.form-container .searchList-container.active .opener .searchResult ul li a i {position: absolute; top: 50%; right: 10px; line-height: 0; }
.form-container .searchList-container.active .opener .searchResult ul li a:hover {background: var(--gc-blue-dark); color: #fff;}
.form-container .searchList-container.active .opener .searchResult ul li a::after {content: ""; position: absolute; box-sizing: border-box;  right: 10px; top: 50%; margin-top: -3px; width: 6px; height: 6px; border-top: 1px solid #333; border-right: 1px solid #333; transform: rotate(45deg);}
.form-container .searchList-container.active .opener .searchResult ul li a:hover::after {border-color: #fff; }
.form-container .searchList-container.active .opener .searchResult ul li.active a {background: var(--gc-blue); color: #fff;}
.form-container .searchList-container.active .opener .searchResult ul li:nth-child(odd){background: #f7f7f7;}
.form-container .searchList-container.active .opener .searchResult ul li a b {display: block; }
.form-container .searchList-container.active .opener .searchResult.waiting ul {opacity: 0.5;}
.form-container .searchList-container.active .opener .searchResult.waiting:after {content: ""; position: absolute; top: 50%; left: 50%; width: 26px; height: 26px; margin-top: -13px; margin-left: -13px; border: 5px solid #fff; border-right: 5px solid rgba(255,255,255,0.5); border-radius: 50%; box-sizing: border-box; animation: spin 1.5s linear infinite;  }
.form-container .searchList-container.active .opener .searchResult .empty {padding: 20px 0; color: #333; font-size: 0.8em; text-align: center;}

.form-container .postcodeLookup {}
.form-container .postcodeLookup > div {position: relative;}
.form-container .postcodeLookup > div button {position:absolute; top: 0; right: 0; color: #fff; padding: 0 20px; height: 100%; background: var(--gc-blue-dark); }
.form-container .postcodeLookup a {font-size: 12px;}

.form-container .field_350 .divide {padding: 10px; border: 1px solid #ccc; height: 200px; font-size: 0.8em; overflow: auto;}
.form-container .field_355 .divide {padding: 10px; border: 1px solid #ccc; height: 200px; font-size: 0.8em; overflow: auto;}


.views {position: relative; display: flex; gap: 10px; align-itmes: center; justify-content: center; margin: 1em 0;}
.views a {width: 90px; height: 44px; background-color: var(--gc-blue); background-repeat: no-repeat; background-size: contain; background-position: center; }
.views a:hover {background-color: var(--gc-green);}
.views a.view-1 {background-image: url("../_img/icons/gc-view-icon-1.svg") }
.views a.view-2 {background-image: url("../_img/icons/gc-view-icon-2.svg") }
.views a.view-3 {background-image: url("../_img/icons/gc-view-icon-3.svg") }
.grid-view-s .views a.view-1 {background-color: var(--gc-green);}
.grid-view-l .views a.view-2 {background-color: var(--gc-green);}
.list-view .views a.view-3 {background-color: var(--gc-green);}
@media screen and (max-width: 1200px) {
	.views a.view-1 {display: none; }
	.grid-view-s .views a.view-2 {background-color: var(--gc-green);}
}



.filters {position: relative; display: flex; margin: 20px 0 40px 0; gap: 10px; align-items: center; justify-content: center; }
.filters .filter {position: relative; z-index: 1; min-width: 300px; }
.filters .filter > a {display: block; position: relative; background: var(--gc-blue); color: #fff; font-size: 20px; font-weight: 700; text-align:left; text-decoration: none; padding: 10px 38px 10px 20px;  z-index: 1; }
.filters .filter > a::after {content: ""; position: absolute; top: 50%; right: 16px; width: 10px; height: 10px; margin-top: -8px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg);}

.filters .filter > div {position: absolute; top: 22px; height: 0; width: 100%; overflow: hidden; background: #fff; border: 2px solid var(--gc-blue);  }
.filters .filter > div ul {position: absolute; bottom: 0; left: 0; width: 100%; text-align: left; padding: 30px 0 10px 0; margin: 0; list-style: none;}
.filters .filter > div li {padding: 0; margin: 0;}
.filters .filter > div li a {display: block; position: relative; padding: 5px 10px 5px 50px; color: inherit; text-decoration: none;}
.filters .filter > div li a .check {position: absolute; left: 18px; top: 5px; width: 20px; height: 20px; border: 1px solid #888;}
.filters .filter > div li a.active .check:after {content: ""; position: absolute; top: 50%; left: 50%; width: 14px; height: 8px; border-bottom: 3px solid #333; border-left: 3px solid #333; box-sizing: border-box; margin-top: -6px; margin-left: -7px; transform: rotate(-45deg)}
.filters .filter > div li a .count{font-size: 0.75em; color: #555}
.filters .filter.open > a::after {transform: rotate(-135deg); margin-top: -3px; }
.filters .filter.open > div {height: auto; }
.filters .filter.open > div ul {position: relative; }
@media screen and (max-width:1190px) {
	.filters {flex-direction: column;}
	.filters .filter {display:block; position: relative; z-index: 1; width: 100%; }
    .filters .filter > div {position: relative; transform: translate(0, -22px); top: unset;}     
}


.courses  {}
.courses .empty {text-align:center; padding: 30px 0; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; margin: 20px 0;}
.courses .loading .posts {opacity: 0.5;}
.courses .loading .button-container .button {color: transparent;}
.courses .loading .button-container .button::after {content: ""; position: absolute; top: 50%; left: 50%; width: 30px; height: 30px; margin-top: -15px; margin-left: -15px; border: 5px solid #fff; border-top-color: transparent; box-sizing: border-box; border-radius: 50%; animation: spin 2s linear infinite;}

.courses .posts {position: relative; display: grid; gap: 20px; }

.courses .grid-view-s .posts {grid-template-columns: repeat(4, 1fr);  }
.courses .grid-view-s .posts .post {position: relative; cursor: grab}
.courses .grid-view-s .posts .post > div {position: relative; height: 340px; background-color: #CCC; overflow: hidden; }
.courses .grid-view-s .posts .post > div .img {position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-position: center; background-repeat: no-repeat; background-size: cover; }
.courses .grid-view-s .posts .post > div .img .imageOverlay {content: none; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%!important; background: linear-gradient( to top,  rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.0));  }
.courses .grid-view-s .posts .post > div .inner {position: absolute; left: 0; bottom: -70px; width: 100%; padding: 0 20px; box-sizing: border-box; transition: bottom ease-in-out 0.2s }
.courses .grid-view-s .posts .post > div .inner:after {content: ""; padding-bottom: 1px; margin-top: 20px; } 
.courses .grid-view-s .posts .post > div:hover .inner {position: absolute; left: 0; bottom: 0; width: 100%; padding: 0 20px; box-sizing: border-box;}
.courses .grid-view-s .posts .post > div .title {font-size: 20px; font-weight: 700; color: #fff;}
.courses .grid-view-s .posts .post > div .description {display:none;}
.courses .grid-view-s .posts .post > div .buttons {position: relative; margin: 20px 0;}
.courses .grid-view-s .posts .post > div .buttons .add {display: none;}

.courses .grid-view-l .posts {grid-template-columns: repeat(2, 1fr);}
.courses .grid-view-l .posts .post {position: relative; }
.courses .grid-view-l .posts .post > div {position: relative; height: 340px; background-color: #CCC; overflow: hidden; }
.courses .grid-view-l .posts .post > div .img {position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-position: center; background-repeat: no-repeat; background-size: cover; }
.courses .grid-view-l .posts .post > div .img .imageOverlay {content: none; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%!important; background: linear-gradient( to top,  rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.0));  }
.courses .grid-view-l .posts .post > div .inner {position: absolute; left: 0; bottom: -70px; width: 100%; padding: 0 20px; box-sizing: border-box; transition: bottom ease-in-out 0.2s }
.courses .grid-view-l .posts .post > div .inner:after {content: ""; padding-bottom: 1px; margin-top: 20px; } 
.courses .grid-view-l .posts .post > div:hover .inner {bottom: 0px;}
.courses .grid-view-l .posts .post > div .title {font-size: 20px; font-weight: 700; color: #fff;}
.courses .grid-view-l .posts .post > div .description {display:none;}
.courses .grid-view-l .posts .post > div .buttons {position: relative; margin: 20px 0;}
.courses .grid-view-l .posts .post > div .buttons a {}
.courses .grid-view-l .posts .post > div .buttons a.add .inActive {display:none;}
.courses .grid-view-l .posts .post > div .buttons a.add .active {display:inline;}
.courses .grid-view-l .posts .post > div .buttons a.add.inActive{opacity: 0.6; }
.courses .grid-view-l .posts .post > div .buttons a.add.inActive .inActive {display:inline;}
.courses .grid-view-l .posts .post > div .buttons a.add.inActive .active {display:none;}

.courses .list-view .posts {grid-template-columns: 1fr;}
.courses .list-view .posts .post {position: relative; }
.courses .list-view .posts .post > div .inner {display:flex; align-items: center; justify-content: space-between;}
.courses .list-view .posts .post > div .title {font-size: 20px; font-weight: 700; margin: 10px 0; color: var(--gc-blue); }
.courses .list-view .posts .post > div .text {position: relative; padding-right: 50px;  }
.courses .list-view .posts .post > div .description {margin: 1em 0;}
.courses .list-view .posts .post > div .buttons {flex-shrink: 0; position: relative; display: flex; gap: 15px; justify-content: flex-end; }
.courses .list-view .posts .post > div .buttons a.add .inActive {display:none;}
.courses .list-view .posts .post > div .buttons a.add .active {display:inline;}
.courses .list-view .posts .post > div .buttons a.add.inActive{background: #ccc; pointer-events: none;  }
.courses .list-view .posts .post > div .buttons a.add.inActive .inActive {display:inline;}
.courses .list-view .posts .post > div .buttons a.add.inActive .active {display:none;}
.courses .list-view .posts .post > div .buttons a.button {background: var(--gc-green); border-color: var(--gc-green-dark); }


@media screen and (max-width:1200px) {
	.courses .posts {gap: 10px; }
	.courses .grid-view-s .posts  {grid-template-columns: 1fr 1fr; }	
	.courses .list-view .posts .post > div .inner {display: block; }
	.courses .list-view .posts .post > div .buttons {justify-content: flex-start;}
}
@media screen and (max-width:900px) {
	.courses .grid-view-l .posts .post > div .buttons a.add {display: none; }
}
@media screen and (max-width:600px) {
	.courses .grid-view-s .posts  {grid-template-columns: 1fr; }	
	.courses .grid-view-l .posts  {grid-template-columns: 1fr; }	
}	
	



footer .footer {background: var(--gc-blue); color: rgba(255,255,255,0.8);}
footer .footer a {color: inherit; text-decoration: none; }
footer .footer a:hover {color: #fff; text-decoration: none;}


.footer-social {color:#fff}
.footer-social .social-title {display: block; font-size: 24px; margin-bottom: 12px; line-height: 34px; font-weight: 700; }
.footer-social a {position: relative; display: inline-block; width: 50px; height: 50px; margin: 12px; border-radius: 25px; transition:background-color linear 0.1s; }
.footer-social a:hover {background-color: var(--gc-blue)}
.footer-social a.social-youtube {background-image: url("../_img/social/gc-social-youtube-wht.svg"); background-size: cover;}
.footer-social a.social-twitter {background-image: url("../_img/social/gc-social-twitter-wht.svg"); background-size: cover;}
.footer-social a.social-facebook {background-image: url("../_img/social/gc-social-facebook-wht.svg"); background-size: cover;}
.footer-social a.social-instagram {background-image: url("../_img/social/gc-social-instagram-wht.svg"); background-size: cover;}
.footer-social .newsletterArea {display: block; margin-bottom: 20px 0}
.footer-social .newsletterArea a {color: #fff; text-decoration: none; width: auto; height: auto; margin: 0;}
.footer-social .newsletterArea a:hover {color: #fff; text-decoration: underline; background: none;}



@media screen and (max-width:900px) {
    .footer-social .social-title {display: block; font-size: 1.5em; margin-bottom: 12px; }
    .footer-social  a {position: relative; display: inline-block; width: 35px; height: 35px; margin: 8px; border-radius: 50%;}
}


footer .sponsors {position: relative;  }
footer .sponsors .images {position: relative; display: flex; align-items: center; justify-content: center; gap: 50px; padding: 0 20px; }
footer .sponsors .images a {position:relative; display: block; background-size: contain; background-repeat: no-repeat; background-position: center}
footer .sponsors .images a.edu {background-image: url("../_img/logos/edu-icon.png");  width: 184px; aspect-ratio: 184/67}
footer .sponsors .images a.offsted {background-image: url("../_img/logos/offstead-icon.png"); width: 67px; aspect-ratio: 67/67;  }
footer .sponsors .images a.sfc {background-image: url("../_img/logos/sfc-icon.png"); width: 184px; aspect-ratio: 184/67;  }
footer .sponsors .images a.artsmark {background-image: url("../_img/logos/artsmark-award.jpg");  width: 249px; aspect-ratio: 249/67;  }
footer .sponsors .images a.top10 {background-image: url("../_img/logos/ALevel-PlatinumAward-Top10.png");  width: 88px; aspect-ratio: 88/100;  }
@media screen and (max-width:900px) {
	footer .sponsors .images {gap: 20px; flex-wrap: wrap}
	a.logo-edu { width: 138px;  }
	a.logo-offsted {width: 50px;   }
	a.logo-sfc {width: 138px;   }
	a.logo-artsmark { width: 187px; }
	a.logo-top10 { width: 66px;   }	
}



footer .footer .footer-main {display: flex; align-content: flex-start; justify-content: space-between; gap: 20px;}
footer .footer .footer-main .title {font-size: 1.1em; font-weight: 700; color: #fff;}
footer .footer .footer-main .links {display: flex; gap: 48px; }
footer .footer .footer-main .links ul {margin: 1em 0; padding: 0; list-style: none;; }
footer .footer .legal {border-top: 1px solid #fff; margin-top: 20px; padding-top: 20px; display: flex; justify-content: space-between; }
footer .footer .legal p {margin: 0; }
footer .footer .footer-main .socials {}
footer .footer .footer-main .socials ul {display: flex; gap: 10px; margin: 1em 0; padding: 0; list-style: none;}
footer .footer .footer-main .socials ul li {margin: 0; padding: 0; }
footer .footer .footer-main .socials ul li a {position: relative; display: block; width: 44px; height: 44px; border-radius: 50%; opacity: 0.85; transition:all linear 0.1s; }
footer .footer .footer-main .socials ul li a:hover {transform: scale(1.1); opacity: 1;  }
footer .footer .footer-main .socials ul li a.social-youtube {background-image: url("../_img/social/gc-social-youtube-wht.svg"); background-size: cover;}
footer .footer .footer-main .socials ul li a.social-twitter {background-image: url("../_img/social/gc-social-twitter-wht.svg"); background-size: cover;}
footer .footer .footer-main .socials ul li a.social-facebook {background-image: url("../_img/social/gc-social-facebook-wht.svg"); background-size: cover;}
footer .footer .footer-main .socials ul li a.social-instagram {background-image: url("../_img/social/gc-social-instagram-wht.svg"); background-size: cover;}
footer .footer .logo {width: 265px; height: 72px; background: url(../_img/logo.svg) no-repeat top right; background-size: contain }

@media screen and (max-width:1100px) {
	footer .footer .footer-main {flex-direction: column;}
	footer .footer .footer-main .socials {order: 99;}
	footer .footer .logo {display: none;}
	footer .footer .footer-main {}
}
@media screen and (max-width:600px) {
	footer .footer .footer-main .links {gap: 20px; }
	footer .footer .legal {display: block;  }
	
}

a.closeButton {position:absolute; width: 30px; height: 30px; background: var(--gc-green); border-bottom: 5px solid var(--gc-green-dark); cursor: pointer; }
a.closeButton:before{content: ""; position: absolute; top: 50%; margin-top: -1px; left: 5px; right: 5px; height: 2px; border-radius: 2px; background: #fff; transform: rotate(45deg);}
a.closeButton:after{content: ""; position: absolute; top: 50%; margin-top: -1px; left: 5px; right: 5px; height: 2px; border-radius: 2px; background: #fff; transform: rotate(-45deg);}
a.closeButton:hover {background-color: var(--gc-green-dark); }

#modal { position: fixed; width: 100%; width: 100vw; height: 100%; height: 100vh; height: 100dvh; left: 0; top: 0; background: rgba(0, 0, 0, 0.3); z-index: 200; cursor: pointer; }
#modal .inner { position: absolute; width: 100%; max-width: 640px; cursor: default; padding: 20px; box-sizing: border-box;  }
#modal .inner #content { position: relative; max-height: 90%; max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); background: #fff; padding: 0 25px; text-align: left; }
#modal .inner #content:before { content: ""; display: block; margin-bottom: 25px; padding-top: 1px; }
#modal .inner #content:after { content: ""; display: block; margin-top: 25px; padding-bottom: 1px; }
#modal h1 {font-size: 1.8em;}
#modal a.closeButton {top: 12px; right: 12px; }

.videoModal {position:fixed; display: flex; align-items: center; justify-content: center;  width: 100%; height: 100%; top:0; left: 0; background: rgba(0,0,0,0.6); z-index: 100}
.videoModal .inner {position: relative; background: #000; border: 3px solid #fff; box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.5);}
.videoModal .inner iframe {position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #000; border: none;}
.videoModal a.closeButton {top: -12px; right: -12px; }

.file-container {position: relative; margin: 50px 0; text-align: center;}
.file-container a.file {position: relative; display: inline-block; width: 25%; color: inherit; text-decoration: none; padding: 0 10px; box-sizing: border-box; margin: 10px 0;}
.file-container a.file .img {display:block; height: 60px; background-repeat: no-repeat; background-position: center; background-size: contain; }
.file-container a.file .name {display:block; margin-top: 5px; font-size: 0.8em; line-height: 17px; font-weight: 700; height: 51px; overflow: hidden;}
.main-left .file-container a.file {width: 33.33%; }
@media screen and (max-width:1200px) {
	.file-container a.file {width: 33%; }
}
@media screen and (max-width:900px) {
	.file-container a.file {width: 50%; }
}
@media screen and (max-width:600px) {
	.file-container a.file {width: 100%; }
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}




/* || Application area */

.application-submenu {position:relative; background: var(--gc-blue-light); color: #fff; font-size: 14px;  }
.application-submenu .container {display: flex; align-items: center; justify-content: space-between; min-height: 40px;  }
.application-submenu a {display: inline-block; color: #fff; text-decoration: none; text-align:center;}
.application-submenu a:hover {text-decoration: underline}
.application-submenu a.active {font-weight: 700;}
@media screen and (max-width:1130px) {
    .application-wrapper { padding: 0 25px; }    
}
@media screen and (max-width:650px) {
	.application-container a.myAccount {display:none;}
}
.application-menu .title {font-size: 24px; font-weight: 700; display: block;}

.application-menu .items {position:relative; display: flex; flex-wrap:wrap; justify-content: space-between; margin:-12px}
.application-menu .items > div  {position:relative; width: 33.33%; padding: 12px; color: #fff; text-align: center; }
.application-menu .items > div > a {display: flex; justify-content: space-between; flex-direction: column; height: 260px; background-color: var(--gc-blue); color: #fff; text-decoration: none; padding: 25px; }
.application-menu .items > div > a .status {display: flex; align-items: center; gap: 8px; justify-content: center; }
.application-menu .items > div > a .status:after {content:"Not completed";}
.application-menu .items > div > a.complete .status:after {content:"Completed"; font-weight: 700;}
.application-menu .items > div > a.complete .status i {display: inline-block; position: relative;  width: 24px; height: 24px; background: var(--gc-green); border-bottom: 4px solid var(--gc-green-dark);}
.application-menu .items > div > a.complete .status i:after {content: ""; position: absolute; top: 50%; left: 50%; width: 16px; height: 8px;  border-bottom: 2px solid #fff; border-left: 2px solid #fff; transform: rotate(-45deg); margin-top: -4px; margin-left: -8px;}
.application-menu .items > div > a.inactive {background-color: #a7a7a7; }

.application-menu .submit {position:relative; display: block; margin: 24px 0; color: #fff }
.application-menu .submit > a {display: flex; align-items: center; background-color: var(--gc-blue); color: #fff; text-decoration: none; padding: 25px; }
.application-menu .submit > a .text {flex-grow: 1; padding-right: 20px; }
.application-menu .submit > a .button {padding-left: 25px; padding-right: 25px; ;}
.application-menu .submit > a.inactive {background: #a8a8a7;}
.application-menu .submit a .text {flex-grow: 1;}

.application-menu .acceptDecline {position:relative; display: block; margin: 24px 0; color: #fff; background-color: var(--gc-blue); padding: 0 25px; }
.application-menu .acceptDecline h1 {color: #fff; font-size: 24px; font-weight: 700; margin: 1rem 0;}
.application-menu .acceptDecline h2 {color: #fff; font-size: 24px; font-weight: 700; margin: 1rem 0;}
.application-menu .acceptDecline .buttons {display: flex; align-items: center; justify-content: space-between; margin: 25px 0;}
.application-menu .acceptDecline .buttons a {display: block; border-radius: 25px; text-align:center; border: 2px solid #fff; color: #fff; text-decoration: none; padding: 10px 40px; ; font-size: 18px; font-weight: 700; transition: all linear 0.1s;}
.application-menu .acceptDecline .buttons a:hover {background: #3bb8b6;}
@media screen and (max-width:1130px) {
	.application-menu .items { margin: -5px}
	.application-menu .items > div {padding: 5px; }
	.application-menu .items > div > a {padding: 20px;}
	.application-menu .submit {margin: 20px 0; color: #fff }
	.application-menu .submit > a {padding: 20px; }
	.application-menu .acceptDecline {margin: 20px 0; padding: 0 20px; }
}
@media screen and (max-width:700px) {
	.application-menu .items > div  {position:relative; width: 50%;}
	
}
@media screen and (max-width:650px) {
	.application-menu .submit a {display: block; text-align:center  }
	.application-menu .submit a .button {margin-top: 10px; }
}

@media screen and (max-width:500px) {
	.application-menu .items > div  {position:relative; width: 100%;}
	.application-menu .items > div > a {min-height: 200px; height: auto;  }
	
}

.progress-circle { position: relative; margin: 0 auto; max-width: 350px;}
.progress-circle > div { position: relative; border-radius: 50%; width: 100%; height: auto; padding-top: 100%; background: var(--gc-green); }
.progress-circle > div canvas {position: absolute; top: 1%; left: 1%; width: 98%; height: 98%;}
.progress-circle > div > div {position: absolute; display:flex; align-items: center; top: 10%; left: 10%; border-radius: 50%; width: 80%; height: 80%; background: #fff;}
.progress-circle > div > div > div {color:var(--gc-blue); font-size: 24px; text-align:center; width: 100%;}
.progress-circle > div > div > div > div  {font-size:50px; font-weight:700; }

.application-list {position: relative;  border-top: 1px solid var(--gc-blue);}
.application-list > div {position:relative; display: flex; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--gc-blue);}
.application-list > div > div {flex-grow: 1;}
.application-list > div .move {position: relative; flex-grow: 0; width: 40px; height: 58px;}
.application-list > div .move a {position:absolute; left: 0; width: 28px; height: 28px; transition: background-color linear 0.1s}
.application-list > div .move a::after {content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-right: 3px solid #fff; border-bottom: 3px solid #fff; transform: rotate(-135deg); transition: all ease-in-out 0.0s}
.application-list > div .move a:first-child {top: 0;}
.application-list > div .move a:last-child {bottom: 0;}
.application-list > div .move a:first-child::after {transform: rotate(-135deg); margin-top: -3px; }
.application-list > div .move a:last-child::after {transform: rotate(45deg); margin-top: -6px;}
.application-list > div:first-child .move a:first-child {background: #ddd; pointer-events: none;}
.application-list > div:last-child .move a:last-child {background: #ddd; pointer-events: none;}
.application-list > div .move a {background-color:var(--gc-blue);}
.application-list > div .move a:hover {background-color: #3bb8b6;}
.application-list > div .text {flex-grow: 1;}
.application-list > div .buttons {white-space: nowrap ;flex-grow: 0; }
.application-list > div .buttons a {position:relative; display: inline-block; border-radius: 18px; border: 2px solid rgb(30, 54, 100) ; color: var(--gc-blue); text-decoration: none; padding:6px 10px; font-weight: 700; transition: all linear 0.1s;}
.application-list > div .buttons a:hover { background-color: rgba(30, 54, 100, 1); color: #fff}
.application-list > div .move i.arrow {background-color:#ddd;}

.application-table {border-collapse: collapse; border: #ccc; margin: 1em 0; width: 100%;}
.application-table thead {font-size: 0.75em; color: #666;}
.application-table th {border-bottom: 1px solid #ccc; padding: 0.5rem; text-align: left; font-weight: 400; }
.application-table td {border-bottom: 1px solid #ccc; padding: 0.5rem; text-align: left;}
.application-table td h3 {margin: 0.5em 0; }
.application-table td h4 {margin: 0.5em 0; }
.application-table .alignC {text-align: center;}
.application-table .alignR {text-align: right;}
.application-table .textDisplay h1{font-size: 1.1rem; margin: 10px 0 0 0; }
.application-table .textDisplay h2{font-size: 1.1rem; margin: 10px 0 0 0; }
.application-table .textDisplay h2{font-size: 1.1rem; margin: 10px 0 0 0; }
.application-table .textDisplay h3{font-size: 1.1rem; margin: 10px 0 0 0; }
.application-table .textDisplay p{margin: 10px 0 0 0; }
.application-table .textDisplay hr{display: none;}

.application-table .course-extra {}
.application-table .course-extra {}
.application-table .course-extra h1{font-size: 1.4rem; margin: 0; }
.application-table .course-extra h2{font-size: 1.4rem; margin: 0; }
.application-table .course-extra h2{font-size: 1.4rem; margin: 0; }
.application-table .course-extra h3{font-size: 1.4rem; margin: 0; }
.application-table .course-extra p{margin: 0; }

.application-table tr th:first-child {padding-left: 0;}
.application-table tr td:first-child {padding-left: 0;}
.application-table tr th:last-child {padding-right: 0;}
.application-table tr td:last-child {padding-right: 0;}

.application-table td.icon > div {display:block; width: 40px; height: 60px; background-repeat: no-repeat; background-position: center; background-size: contain; }
.application-table .title {font-size: 24px; font-weight: 700; color: var(--gc-blue);  }
.application-table td.move {position: relative; width: 40px; height: 60px;}
.application-table td.move > div {position: relative; width: 40px; height: 58px;}
.application-table td.move > div a {position:absolute; left: 0; width: 28px; height: 28px; background: #fff; transition: background-color linear 0.1s; border: 2px solid var(--gc-blue-dark);}
.application-table td.move > div a:hover {background-color: var(--gc-blue);}
.application-table td.move > div a::after {content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-right: 3px solid var(--gc-blue-dark); border-bottom: 3px solid var(--gc-blue-dark); transform: rotate(-135deg); transition: all ease-in-out 0.0s}
.application-table td.move > div a:hover::after {border-color: #fff;}

.application-table td.move > div a:first-child {top: -2px;}
.application-table td.move > div a:last-child {bottom: -2px;}
.application-table td.move > div a:first-child::after {transform: rotate(-135deg); margin-top: -3px; }
.application-table td.move > div a:last-child::after {transform: rotate(45deg); margin-top: -6px;}
.application-table tbody tr:first-child .move a:first-child {background: #fff; border-color: #ddd; pointer-events: none;}
.application-table tbody tr:first-child .move a:first-child::after {border-color: #ddd; }
.application-table tbody tr:last-child .move a:last-child {background: #fff; border-color: #ddd; pointer-events: none;}
.application-table tbody tr:last-child .move a:last-child::after {border-color: #ddd; }
.application-table hr {display:none;}
.application-table td.buttons a {position:relative; display: inline-block; border: 2px solid var(--gc-blue-dark); border-bottom-width: 6px; color: var(--gc-blue-dark); text-decoration: none; padding:5px 10px; font-weight: 700; transition: all linear 0.1s;}
.application-table td.buttons a:hover { background-color: var(--gc-blue-dark); color: #fff}
.application-table td.buttons a.inactive {border-color: #aaa; color: #aaa;pointer-events: none;}

.application-table .requires-attention-Y {font-weight: 700;}
.application-table .requires-attention-N td.buttons a{border-color: #aaa; color: #aaa;}
.application-table .requires-attention-N td.buttons a:hover{border-color: rgba(30, 54, 100, 1); background-color: rgba(30, 54, 100, 1); color: #fff}

.application-messages {}
.application-messages > div {position: relative; margin: 10px 0; border-radius: 22px; padding: 20px;  }
.application-messages > div.admin {margin-right: 20px; color: #fff; background: var(--gc-blue);}
.application-messages > div.applicant {margin-left: 20px; color: #fff; background: #aaa;}
.application-messages > div.admin:after {content: ""; position:absolute; left: -15px; bottom: 20px; width: 0; height: 0; border-style: solid; border-width: 0 0 15px 15px; border-color: transparent transparent var(--gc-blue) transparent; }
.application-messages > div.applicant:after {content: ""; position:absolute; right: -15px; bottom: 20px; width: 0; height: 0; border-style: solid; border-width: 15px 0 0 15px; border-color: transparent transparent transparent #aaa; }
.application-messages > div .by {margin-top: 10px; font-size: 0.8em; color: rgba(255,255,255,0.6);}

.application-overview {margin: 25px 0; background: var(--gc-blue); border-bottom: 8px solid var(--gc-blue-light); padding: 0 25px; color: #fff;}
.application-overview:before {content: ""; position: relative; display: block; padding-top: 1px; margin-bottom: 25px; }
.application-overview:after {content: ""; position: relative; display: block; padding-bottom: 1px; margin-top: 25px; }
.application-overview .application-overview--top {display:flex; gap: 20px; align-items: flex-end; justify-content: space-between; }
.application-overview .name {font-size: 2em; margin-bottom: 1rem; font-weight: 700; line-height: 1; }
.application-overview a:not(.button) {color: #fff; text-decoration: underline;}
.application-overview a:not(.button):hover {color: #fff; text-decoration: none;}
.application-overview a.button {position:relative; margin: 1em 0; }

.application-overview .small {font-size: 0.85em;}

.application-warning {display: flex; align-items: center; gap: 20px; }
.application-warning i {flex-shrink: 0; width: 50px; height: 50px; background: url("../_img/icons/gc-warning.svg") center no-repeat; background-size: contain;}
.application-warning a {color: inherit;}

@media screen and (max-width:1130px) {
	.application-overview {margin: 20px 0; padding: 0 20px; }
	.application-overview .application-overview--top {display:block; }
}

.primary-contact {display: inline-block; position: relative; line-height: 0; height: 23px; width: 23px; border: 2px solid #aaa; text-align: center; background: #fff; }
.primary-contact.checked {border-color: var(--gc-blue); pointer-events: none}
.primary-contact.checked:after {content: ""; position: absolute; left: 50%; top: 50%; margin-left: -8px; margin-top: -6px; width: 15px; height: 7px; border-left: 2px solid var(--gc-blue); border-bottom: 2px solid var(--gc-blue); transform: rotate(-45deg); box-sizing: border-box }

.info-icon {display: inline-block; position: relative; width: 16px; height: 0; text-align: center; padding: 8px 0; line-height: 0; background: var(--gc-blue); color: #fff; border-radius: 50%; font-size: 12px; text-decoration: none; }
a.info-icon:hover {background: #3bb8b6;}
.info-icon::after{content: "?"}