/***** Main Banner Section *******/

.main-banner { padding:0; position: relative; height: 70vh; width: 100%; overflow: hidden; max-width: 2000px; margin:0 auto; }
.main-banner .mobile-cta { display: none; }
.main-banner .text-area { position: absolute; width: 48%; left:3rem; top:10vh; z-index: 5; }
.main-banner .blob-area { position: absolute; width: 50%; height: 100%; right: 2rem; top:1rem; background-size:contain; z-index: 2; display: flex; justify-content: center; align-items: flex-end; }
.main-banner .blob-area { background:url("/pix/turquoise-decor-blobs.svg") no-repeat bottom; background-size:contain;  }
.main-banner .blob-area img.student { display: block; height: 90%; max-height: 820px; margin-bottom: 1rem; margin-left:5%; }
.main-banner .text-area h1 { font-size: clamp(3rem, 4vw, 5.45rem); line-height: 1.07; padding-bottom: 1rem; }
.main-banner p { font-size: 1.3rem; padding-bottom: 2rem; }
.main-banner a.btn-brick { font-size: 1.3rem; }

.main-banner a.more-link { color:var(--theme-color1); text-decoration: none; margin: 1rem 2rem 2rem 0;; font-size: 1.3rem; }
.main-banner a.more-link:hover { text-decoration: underline; }
.main-banner a.more-link:hover { color:var(--theme-color2); }
.main-banner a.more-link .fa {  margin-left: 5px; text-decoration: none; }
.main-banner a.more-link .fa { color:var(--theme-color2); }

@media screen and (max-width: 1040px) {
	.main-banner  { height: 60vh; }
	.main-banner .blob-area { width:45%; }
	.main-banner .blob-area img.student { height: auto; max-height: 90%; max-width:97%; }
	.main-banner a.btn-brick { font-size: 1.1rem; }
	.main-banner a.more-link { font-size: 1.1rem; margin-left: 1.2rem; }
}

@media screen and (max-width: 855px) {
	.main-banner { height: auto; }
	.main-banner .desktop-cta { display: none; }
	.main-banner .mobile-cta { display: block; width: 94%; margin:0 auto; padding:2rem 0; }
	.main-banner .text-area { position: relative; width: 94%; left:0; top:0; margin:4vh auto 0 auto; }
	.main-banner .text-area h1 { padding-bottom:0.2rem; }
	.main-banner .blob-area { position: relative; width: 94%; left:0; top:0; margin:0 auto; border-bottom: 1px solid #CFCFCF; }
	.main-banner .blob-area img.student {  width:80%; margin:0 auto; }
}

@media screen and (max-width: 408px) {
	.main-banner a.more-link { display: none; }
}


#exam-info { position:absolute; top:-50px; }

.statement { text-align: center; padding: 3rem 0; }
.statement h3 { max-width: 750px; margin: 0 auto; }



/***** Double Box Section *******/

.double-box { position: relative; display: flex; max-width:1920px; margin:0 auto; flex-wrap: wrap;  }
.double-box .tile { padding:6rem 4rem 4rem 5%; width: 50%; }
.double-box .tile { background:#e8e8e8;}
.double-box .tile.magenta { background:var(--theme-color3); background:var(--theme-gradient3); }
.double-box .tile.turquoise { background:var(--theme-color2); background:var(--theme-gradient2); }
.double-box .tile.blue { background:var(--theme-color4); background:var(--theme-gradient4); }
.double-box .tile.navy { background:var(--theme-color5); background:var(--theme-gradient5); }
.double-box .tile.inner { max-width:800px; margin: 0 0 0 auto; }
.double-box .tile.turquoise h2 { color: #fff;  }
.double-box .tile.turquoise p { color: #fff; }
.double-box .tile h2 { color:var(--theme-color2); font-size: 3rem;}
.double-box .tile p { color:var(--theme-color1); font-size: 1.3rem;  }
.double-box .tile textarea { width: 100%; border-radius: 25px; display: block; border: none; padding:0.7rem 1.3rem; box-sizing: border-box;  margin-bottom: 1rem; font-size: 1.3rem; resize: none; height: 200px; }

@media screen and (max-width:1370px) {
	.double-box { flex-wrap: wrap; margin:0 auto; }
	.double-box .tile .inner {margin:0 auto; }
	.double-box .tile { width: 100%; }
	.double-box .tile { padding: 2rem; }
	.double-box .tile.venues { order:3; }
	.double-box .tile.dates { order:4; }
}


/***** Practicals Section *******/

.PracticalsSection { background:url("/pix/Practicals.jpg?v2") no-repeat left top; background-size:cover; padding:17em 0; display:block; text-decoration:none; text-align:center; margin-top: -3rem; }
.PracticalsSection h2 { margin:0; padding:0; color:#fff; text-transform:uppercase; }
.PracticalsSection h4 { color:#fff; font-size:1.6em; line-height:1; padding:0; }
.PracticalsSection p { font-size:1.3rem; line-height:30px; margin-top:0; padding-top:0; color:#fff;   }
.PracticalsSection a.btn-brick { font-size: 1.3rem; }
.PracticalsSection a.btn-brick.icon-right-turquoise span.ico-svg img { width: 48%; margin: 0.55em 0 0 0.65em; }

@media screen and (max-width: 950px) {
	.PracticalsSection {  padding:15em 0;  }
}

@media screen and (max-width: 600px) {
	.PracticalsSection {  padding:11em 0;  }
}



/*------------------------- MAP REVEAL -----------------------*/

.MapSection { background:url("/pix/DottedLines.png") var(--theme-color5) no-repeat left top; background-size:contain; padding:3em 0; display:block; text-decoration:none; text-align:center; }
.MapSection h2 { color:#fff; font-size:2.8em; }
.MapSection p { color:#fff; }
.MapSection .Pin { width:70px; margin:0 auto 2em; }
.MapSection img { width:100%; display:block; }

.ContentSection  { background:none;  padding: 0; }
.ContentSection .inner {   padding:3em 0; }
.ContentSection .inner h3 { font-size:2.8em; text-transform:uppercase; text-align: center; }

@media screen and (max-width: 720px) {
	.MapSection {   padding:3em 0; }
	.MapSection .Pin {  margin:0 auto 1em; }
	.MapSection h2 { padding:0; margin:0; }
	.MapSection p { padding:0; margin:0; }
}




.Instruct { margin-left: -3.3333%; margin-bottom: 1.6em; }
.Instruct .Inst { width: 30%; margin-left: 3.3333%; float: left; padding: .6em; box-sizing: border-box; position: relative; text-align: center; font-size: 1.4em; }
.Instruct .Inst img { width: 80%; display: block; margin: 0 auto 1em;  }
.Instruct .Inst .TextWrap {  }

@media screen and (max-width: 830px) {
	.Instruct { margin-left: 0;  }
	.Instruct .Inst { width: 100%; margin: 0 0 2em 0; float: none; padding:0; text-align: left;  }
	.Instruct .Inst img { width: 40%; margin: 0;  }
	.Instruct .Inst .TextWrap { width: 55%; position: absolute; top:45%; right:0; }
}

@media screen and (max-width: 490px) {
	.Instruct .Inst { text-align: center;  }
	.Instruct .Inst img { width: 60%; margin: 0 auto 1em;  }
	.Instruct .Inst .TextWrap { width: 100%; position: relative; top:0; }
}



/*------------------------- DATES TICKERS -----------------------*/

.DateSection { background:var(--theme-gradient4); padding:3em 0; display:block; text-decoration:none; text-align:center; }
.DateSection h2 { color:#fff; font-size:2.8em; }
.DateSection p { color:#fff; font-size:1.3rem; max-width:900px; margin: auto; }
.DateSection .Pin { width:70px; margin:0 auto 2em; }
.DateSection img { width:100%; display:block; }

.FirstRow  { padding:2em 0; }
.FirstRow img { max-width:220px; margin:0 auto 30px; display:block; }
.TileOne { float:left; width: 25%; background:white; text-align: center; padding: 1.5em 1em; box-sizing: border-box; border-right: 1px solid #E0E0E0; }
.TileTwo { float:left; width: 25%; background:white; text-align: center; padding: 1.5em 1em; box-sizing: border-box; border-right: 1px solid #E0E0E0;  }
.TileThree { float:left; width: 25%; background:white; text-align: center; padding: 1.5em 1em; box-sizing: border-box; border-right: 1px solid #E0E0E0;  }
.TileFour { float:left; width: 25%; background:white; text-align: center; padding: 1.5em 1em; box-sizing: border-box;   }
.FirstRow h2 { font-size: 2.5rem; padding-bottom: 0; }
.FirstRow h3 { font-size: 1.5rem;  }
.FirstRow a.btn-brick { font-size: 1.3rem;  }

.Timer { background: #202020; color: #f8f8f8; font-size: 1.8rem; line-height: 3rem; text-shadow: 0 0 10px rgba(0, 0, 0, 0.8); border-top: 1px solid rgba(255,255,255,0.2); border-radius: 5px; border-bottom: 1px solid #000; box-shadow: 0 0 10px 0 rgba(0,0,0,0.5); padding:0 1.6em; display: inline-block; }


@media screen and (max-width: 1340px) {
	.TileOne {  width:50%; border-right: 1px solid #E0E0E0;; }
	.TileTwo {  width:50%; border-right: none;  }
	.TileThree { width:50%; border-right: 1px solid #E0E0E0;  }
	.TileFour { width:50%; border-right: none;  }
}



@media screen and (max-width: 750px) {
	.TileOne { float:none; width:100%; border-right: none; }
	.TileTwo {  float:none; width:100%; border-right: none;  }
	.TileThree { float:none; width:100%; border-right: none; }
	.TileFour { float:none; width:100%; border-right: none;  }
}





/***** Organise Exam Section *******/

.organise-exam { background:url("/pix/organise-exam-decor-2.webp") no-repeat; background-position: right top; background-size:contain; border-bottom: 10px solid #fff; padding-bottom: 4rem; }
.organise-exam img.organise-exam-image { display: none; }
.organise-exam .text-wrap { width:48%; margin:0 auto; padding: 8rem 0; }
.organise-exam .text-wrap a.btn-brick {  margin-top:1.3rem; font-size: 1.3rem; }

@media screen and (max-width: 2500px) {
.organise-exam {  background-size:40%; border-bottom:none; }
.organise-exam .text-wrap { width:50%; padding: 8rem 0 10rem; margin:0 auto 0 0; }
}

@media screen and (max-width: 1420px) {
	.organise-exam { background-size:39%; background-position: right center; }
	.organise-exam .text-wrap { width:58%; padding: 6rem 0; }
}

@media screen and (max-width: 1100px) {
	.organise-exam { background-size:41%; }
	.organise-exam .text-wrap { width:54%; padding:0 0 4rem; }
}

@media screen and (max-width: 980px) {
	.organise-exam { background:none; }
	.organise-exam img.organise-exam-image { display: block; width:70%; margin: 0 auto; }
	.organise-exam .text-wrap { width:100%; padding:2rem 0 0; border-top: 1px solid #c9c9c9; }
}

@media screen and (max-width: 640px) {
	.organise-exam img.organise-exam-image { width:90%; }
}