/* Google Translate overrides */
html, body {min-height: 0 !important; height: auto !important; position: inherit !important;}

html,body,.tooltip-inner,.fancybox-inner,input,select,option,button,textarea {font-family: var(--body_font,Lato,sans-serif); font-weight: var(--body_font_weight,400);}
h1,h2,h3,h4,h5,h6,.hot-key,legend {font-family: var(--heading_font,Bitter,sans-serif); font-weight: var(--heading_font_weight,700);}
body,.fancybox-inner {color: #333; font-size: 1.4rem;}
b,strong {font-weight: 700;}
center {text-align: left;}
.section {font-weight: 300; font-size: 1.6rem;}
.section-inner .row {margin-left: 0; margin-right: 0;}
.section img {max-width: 100%;}
.section ul {list-style-type: none; padding: 0;}
.section blockquote {font-size: 1.6rem;}
.section blockquote cite {font-style: normal; font-weight: bold;}
.section blockquote cite span {font-size: 1.2rem; font-weight: normal;}
.section-banner blockquote {background-color: rgba(0,0,0,0.5); font-size: 16px; color: white; text-align: left; width: 400px; margin: 0; border: 0; margin-bottom: 10px;}
.section-head blockquote {border: none; text-align: left; margin: 0;}
.section .main-icon {display: block; height: 6rem; margin: 0 auto 2rem auto;}

dd+dt {margin-top: 10px;}
h1+p.subheading {font-size: 120%; margin-bottom: 30px;}
p.aside {font-style: italic; font-size: 90%;}

details summary {font-weight: bold; cursor: pointer;}
details summary:before {font-family: 'Glyphicons Halflings'; content: '\e080'; transition: 0.2s; margin-right: 5px; display: inline-block;}
details[open] summary:before {transform: rotate(90deg);}

.cms-profiles {display: flex; flex-wrap: wrap; justify-content: center;}
.cms-profiles .thumbnail {width: 40%; margin: 5%; text-align: center;}

.cms-square-gallery {display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1rem;}
.cms-square-gallery-image {width: calc(33% - 1rem);}
.cms-square-gallery-image img {object-fit: cover; width: 100%; aspect-ratio: 1/1;}

.cms-caption-gallery {display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem;}
.cms-caption-gallery .thumbnail {width: calc(50% - 1rem); text-align: center;}
.cms-caption-gallery .thumbnail img {object-fit: cover; width: 100%; aspect-ratio: 1/1;}

.cms-carousel-gallery-main {position: relative;}
.cms-carousel-gallery-list {display: flex; overflow-x: scroll; margin-top: 1rem; position: relative;}
.cms-carousel-gallery-thumbnail img {min-width: 150px; aspect-ratio: 1/1; object-fit: cover; border: 3px solid white;}
.cms-carousel-gallery-thumbnail.selected img {border: 3px solid var(--primary);}
.cms-carousel-gallery-nav {position: absolute; top: 0; left: 0; right: 0; bottom: 0;}
.cms-carousel-gallery-nav .nav-left,.cms-carousel-gallery-nav .nav-right {height: 100%; cursor: pointer; display: block; transition: opacity 0.6s; font-size: 4rem; color: white; text-shadow: 1px 1px 5px black; display: flex; align-items: center; padding: 2rem; text-decoration: none; opacity: 0;}
.cms-carousel-gallery-nav .nav-left:hover,.cms-carousel-gallery-nav .nav-right:hover {opacity: 1;}
.cms-carousel-gallery-nav .nav-left {float: left; width: 34%;}
.cms-carousel-gallery-nav .nav-right {float: right; width: 66%; justify-content: right;} 
.cms-carousel-gallery-caption {position: absolute; background: rgba(0,0,0,0.5); bottom: 0; left: 0; color: white; padding: 5px 10px;}
.cms-carousel-gallery-caption:empty {display: none;}

.list-group-item small {float: right;}
.links-directory .list-group-item h4 {margin-bottom: 0;}
.links-directory .list-group-item .list-group-item-link {font-style: italic;}
.links-directory .list-group-item .list-group-item-link+.list-group-item-text {margin-top: 1rem;}

.label+.label {margin-right: 2px;}

p.more {margin: 20px auto; display: inline-block;}
p.more a {background: #2B317A; color: white; padding: 5px 10px; text-decoration: none; float: left;}
p.more:hover a {background: #888;}

.calendar {display: inline-block; box-sizing: border-box; width: 80px; height: 80px; margin: 10px; border-radius: 10px; background: #FFDA00; text-align: center; color: #333; font-size: 24px; line-height: 24px; padding-top: 8px;}
.calendar span {display: block;}
.calendar span:first-child {font-size: 14px; line-height: 18px;}
.calendar.booked {background: #888;}
a.calendar:hover {text-decoration: none; color: #333; opacity: 0.8;}
#calendarTable td {white-space: normal;}

.cms .vacancy h3 {border-bottom: none;}
.vacancy {margin: 20px 0; padding-bottom: 20px; border-bottom: 1px solid #ccc;}
.cms .search-form {margin-bottom: 20px;}
.search-results {list-style-type: none; margin: 0; padding: 0;}
.search-results li:not(:last-child) {margin-bottom: 10px; border-bottom: 1px solid #ccc;}

.step-number {float: left; font-size: 450%; font-weight: 600;}

.gallery-image {float: left; width: 19.2%; margin-bottom: 1%;}
.gallery-image img {width: 100%;}
.gallery-grid-sizer {width: 19.2%;}
.gallery-gutter-sizer {width: 1%;}

.sticky-icons {position: fixed; width: 100px; top: 80px; right: 20px; z-index: 999;}
.sticky-icons a {display: block; position: relative; width: 100px; margin-bottom: 10px; transition: 0.1s; text-align: center;}
.sticky-icons.circular a {height: 100px; border-radius: 50px; border: 3px solid var(--primary); background: color-mix(in srgb,var(--secondary),transparent 20%); color: white;}
.sticky-icons a:hover {transform: scale(1.1);}
.sticky-icons a span {position: absolute; width: 90%; top: 50%; left: 5%; transform: translateY(-50%);}

.cms-advert {margin: 15px 0;}
.cms-advert img {width: 100%;}

h2>hr {display: block; width: 30%; margin: 1rem auto 2rem auto; color: inherit;}

.icon-1x {font-size: 120%; margin: 20px 0; display: block;}
.icon-2x {font-size: 200%; margin: 10px 0; display: block;}
.icon-3x {font-size: 300%; margin: 10px 0; display: block;}
.icon-4x {font-size: 400%; margin: 10px 0; display: block;}
.icon-6x {font-size: 600%; margin: 10px 0; display: block;}
.icon-8x {font-size: 800%; margin: 10px 0; display: block;}
.icon-12x {font-size: 1200%; margin: 10px 0; display: block;}
.icon-16x {font-size: 1600%; margin: 10px 0; display: block;}
.icon-24x {font-size: 2400%; margin: 10px 0; display: block;}
.icon-link {color: inherit; display: inline-block; margin: 5px;}
.icon-link:hover {text-decoration: none;}
.icon.pull-left {margin-right: 5px;}
.icon.pull-right {margin-left: 5px;}
.icon.no-gap {margin-top: 0; margin-bottom: 0;}
.icon+h2,li>.icon {margin-top: 10px;}

.icon-spin {display: inline-block; -webkit-animation: icon-spin 2s infinite linear; animation: icon-spin 2s infinite linear;}
@-webkit-keyframes icon-spin {
 0% {-webkit-transform: rotate(0deg); transform: rotate(0deg);}
 100% {-webkit-transform: rotate(359deg); transform: rotate(359deg);}
}
@keyframes icon-spin {
 0% {-webkit-transform: rotate(0deg); transform: rotate(0deg);}
 100% {-webkit-transform: rotate(359deg); transform: rotate(359deg);}
}

.block-image {display: block; margin: 20px auto;}
.down-arrow {display: block; height: 40px !important; margin: 40px auto 20px auto; cursor: pointer; transition: 0.2s;}
.down-arrow:hover {transform: scale(1.3);}

.down-arrow {-moz-animation: bounce 2s infinite; -webkit-animation: bounce 2s infinite; animation: bounce 2s infinite;}
.down-arrow:hover {-moz-animation: none; -webkit-animation: none; animation: none;}
@-moz-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0); transform: translateY(0);}
  40% {-moz-transform: translateY(-30px); transform: translateY(-30px);}
  60% {-moz-transform: translateY(-15px); transform: translateY(-15px);}
}
@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0); transform: translateY(0);}
  40% {-webkit-transform: translateY(-30px); transform: translateY(-30px);}
  60% {-webkit-transform: translateY(-15px); transform: translateY(-15px);}
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0);}
  40% {-moz-transform: translateY(-30px); -ms-transform: translateY(-30px); -webkit-transform: translateY(-30px); transform: translateY(-30px);}
  60% {-moz-transform: translateY(-15px); -ms-transform: translateY(-15px); -webkit-transform: translateY(-15px); transform: translateY(-15px);}
}

.cms-accordion .panel-title {display: flex;}
.cms-accordion .panel-title a {flex: 1;}
.cms-accordion .panel-title::before {content: "\e080"; font-family: 'Glyphicons Halflings'; margin-right: 5px; transition: 0.2s; display: inline-block; align-self: flex-start;}
.cms-accordion .panel-title.in::before {transform: rotate(90deg);}

.compliance-table thead {display: none;}
.compliance-table tbody>tr>th, .compliance-table tbody>tr>td {display: block;}

@media (min-width: 768px) {
 .compliance-table thead {display: table-header-group;}
 .compliance-table tbody tr th:first-child {width: 200px;}
 .compliance-table tbody tr td:last-child {width: 80px;}
 .compliance-table tbody>tr>th, .compliance-table tbody>tr>td {display: table-cell;}
}

.social-list {margin: 0; padding: 0; list-style-type: none;}
.social-list li {font-weight: 400; position: relative; margin-bottom: 20px; min-height: 60px; clear: both; background: #E5E5E5; color: inherit; padding: 5px; font-size: 13px; text-align: left;}
.social-list li:after {content: ""; position: absolute; bottom: -16px; right: 16px; border-width: 16px 0 0 16px; border-style: solid; border-color: #E5E5E5 transparent; display: block; width: 0;}
.social-list img {margin-bottom: 5px;}
.social-list li a.date {font-weight: 700; text-decoration: none; color: #333;}
.social-list li .tweet {overflow: hidden;}
.social-list li a {background: none; padding-right: 0;}
.social-list li p {margin: 5px;}
.social-list li small {display: block; font-style: italic;}
.twitter ul li img {float: left; padding-right: 5px;}
.twitter h3 i {color: #00B0ED; margin-left: 5px;}

.electronic-letter {border: 1px solid #aaa; padding: 20px;}
.electronic-letter h2 {border: none; text-align: center;}
.electronic-letter .letter-logo {width: 20%; display: block; margin: 0 auto 40px auto;}
.electronic-letter .letter-header {margin-bottom: 40px;}
.electronic-letter .letter-footer {margin-top: 40px;}

/* Course Guides and Similar */
.courses>div {margin-bottom: 30px;}
.courses>div:after {content: ' '; display: table; clear: both;}
.course {position: relative; width: 44%; float: left; border-radius: 50%; border: 1px solid white; height: 0; padding-top: 0%; padding-bottom: 44%; margin: 3%; transition: 0.2s;}
a.course:hover {transform: scale(1.1);}
h3.course-title {position: absolute; width: 100%; padding: 0 20px; top: 50%; transform: translateY(-50%); left: 0; color: white; text-align: center; margin: 0; font-size: 1.5rem; border: none;}
h3.long-title {font-size: 1.3rem;}
.course-title .icon-3x {margin-top: 0;}
.course.pushed-1 {margin-left: 28%;}
img.course-icon {display: block; width: 50%; margin: 0 auto 10px auto;}

.fancybox-inner {padding-right: 15px;}
.fancybox-inner a {word-break: break-all;}
.course-details {border: 1px solid #aaa; border-radius: 5px; padding: 1rem; margin-bottom: 1rem;}
.course-details ul {margin: 0; padding: 0; list-style-type: none;}

.frontend-gallery {display: flex; flex-wrap: wrap; justify-content: space-around; margin: 3rem 0;}
.frontend-gallery[data-columns='2']>a,.frontend-gallery[data-columns='2']>img {max-width: 45%; margin-bottom: 5%;}
.frontend-gallery[data-columns='3']>a,.frontend-gallery[data-columns='3']>img {max-width: 30%; margin-bottom: 3.3333%;}
.frontend-gallery[data-columns='4']>a,.frontend-gallery[data-columns='4']>img {max-width: 22%; margin-bottom: 3%;}
.frontend-gallery img {aspect-ratio: 1/1; object-fit: cover;}

.button-menu {display: flex; flex-wrap: wrap; justify-content: center;}
.button-menu-item {width: 47%; margin: 1.5%; color: inherit; text-decoration: none;}
.button-menu-item:hover,a.button-menu-item:active,a.button-menu-item:focus {text-decoration: none; color: inherit;}
.button-menu-image {width: 100%; transition: 0.2s;}
.button-menu-image:hover {transform: scale(1.1);}
.button-menu-title {font-size: 1.8rem;}
@media (min-width: 768px) {
  .button-menu-item {width: 22%; margin: 1.5%;}
}

.banner {width: 100%; height: 100vh; max-height: 100vh; position: fixed; top: 0; left: 0; background-color: #888; color: white; text-align: center; background-size: cover; background-position: 50% 50%; transition: 1s;}
.banner:after {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(rgba(0,0,0,0.8) 0,rgba(0,0,0,0) 300px 50%,rgba(0,0,0,0.8) 100%); z-index: -1;}
.banner.has-notices:after,.banner.has-both:after {background: linear-gradient(rgba(0,0,0,0.8) 0,rgba(0,0,0,0) 200px 30%,rgba(0,0,0,0.8) 100%);}
.banner-logo {transition: 500ms; position: relative; text-align: left;}
.banner-logo img {width: 220px; max-width: 25vw; display: none; margin-top: 20px;}

.banner-svg {position: absolute; width: 100%; transition: 0.2s; bottom: 0; margin-bottom: 2rem;}
.banner.has-notices .banner-svg,.banner.has-both .banner-svg {margin-bottom: 0;}
.banner-svg h1 {text-shadow: 0 0 20px black;}
.banner-svg img {height: 200px; max-width: 100%;}
.banner .notice a {display: block; transition: 0.2s; color: white;}
.banner .notice a:hover {transform: scale(1.05);}
.banner .notice a:link,.banner .notice a:visited,.banner .notice a:hover,.banner .notice a:active {text-decoration: none;}

.banner .notice img {height: 200px; max-width: 100%;}
.banner .notice img {height: auto; max-width: 100%; max-height: 350px;} /*Temp*/
.banner .notice h2 {font-size: 240%;}
.banner .notice h3 {font-size: 160%; margin-top: 0;}
.banner .notice p {font-size: 120%; margin-bottom: 0px;}

.carousel-indicators {bottom: -40px;}
.carousel-indicators li {margin: 1px 3px;}
.carousel-indicators li.active {margin: 0px 2px;}
.touch .carousel-control {display: none;}
.carousel-control {font-size: 3rem; background: none !important; text-shadow: none;}
.carousel-control span {top: 50%; display: block; margin-top: -1.5rem;}

.content {overflow-x: hidden; margin-top: 100vh; position: relative; background: white;}
#content {margin-top: 80px;}

.section {padding: 4rem 0; text-align: center; position: relative; background: white; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0);}
.section-banner {position: relative; height: 300px; padding: 0; background-color: #888; color: white; background-size: cover; background-position: 50% 50%;}
.section-header {margin-top: -191px; background: transparent; color: white;}
.section-head {padding: 60px 0;}
.section-head .col-sm-4 img {margin-top: 20px;}

.section-dark {background-color: var(--primary); color: white;}
.section-medium {background-color: var(--secondary); color: var(--primary);}
.cell-highlight {background-color: var(--primary); color: white;}
.section-dark:not(#home_news) a:not(.btn):not(.more-link) {text-decoration: underline; color: white;}

.overlay,.overlay-always {position: absolute; width: 100%; z-index: 800; text-align: center; color: white;}
.overlay-bottom {position: absolute; bottom: 0; width: 100%; z-index: 800;}
.overlay-pause {position: absolute; z-index: 801; top: 20px; width: 100%; text-align: right; color: rgba(255,255,255,0.7); font-size: 24px;}
.overlay-pause i {cursor: pointer;}

.overlay-logo {position: absolute; z-index: 800; top:0; left: 0; color: white; font-size: 100px; width: 100%; text-align: left;}
.overlay-logo a {color: white; text-decoration: none;}
.overlay-emergency {top: 235px; bottom: auto; z-index: 801;}

.very-bottom {padding: 20px 0 80px 0;}
.banner.has-svg .very-bottom {padding-bottom: 40px;}
.banner.has-notices .very-bottom,.banner.has-both .very-bottom {background: color-mix(in srgb,var(--notices_panel_bg,var(--primary)),transparent 30%);}
.banner .notice h2 {color: var(--secondary);}
.banner.has-notices:after {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(rgba(0,0,0,0.8) 0,rgba(0,0,0,0) 200px 30%,rgba(0,0,0,0.8) 100%); z-index: -1;}

.main-heading h2 {font-family: var(--body_font,Lato,sans-serif); font-weight: var(--body_font_weight,400); color: var(--secondary); font-size: 3.6rem; margin: 0 0 1rem 0; text-shadow: 0 0 20px black;}
.main-heading h1 {color: white; font-size: 4.2rem; margin: 0;}

.main-links {background-image: linear-gradient(white 50%,var(--hotkey_panel_bg,var(--primary)) 50%);}
.main-links+.section {padding-top: 0;}
.hot-key {background-color: var(--hotkey_bg,var(--secondary)); margin: 0 -7px 1rem -7px; color: var(--hotkey_fg,white); font-size: 1.2rem; display: block; height: 16rem; box-shadow: 0 6px 12px rgba(0,0,0,0.175); transition: 500ms; position: relative;}
.hot-key:hover,.hot-key:active,.hot-key:focus {transform: scale(0.95); text-decoration: none; color: var(--hotkey_fg,white);}
.hot-key>div {position: absolute; top: 50%; transform: translateY(-50%); width: 100%; padding: 1rem;}
.hot-key>div img {max-height: 12rem; display: block; margin: 0 auto 1rem auto;}

@media (max-width: 767px) {
  .section-banner blockquote {width: 100%; font-size: 14px;}
  .icon-24x {font-size: 1800%;}
  .course.pushed-mobile-1 {margin-left: 28%;}
}
@media (max-width: 991px) {
  p.calendar {margin: 2px; width: 60px; height: 60px; font-size: 18px; line-height: 18px; padding-top: 12px;}
}
  
@media (min-width: 768px) {
  .section-banner {height: 500px;}
  .section-head .row {display: table-row;}
  .section-head .row>div {display: table-cell; float: none; vertical-align: middle;}
  .section-head .col-sm-4 img {margin-top: 0;}
 
  .banner.has-svg .very-bottom {background: none; padding-bottom: 0;}

  .course {float: left; width: 21%; padding-top: 0%; padding-bottom: 21%; margin: 2%;}
  .course.pushed-1 {margin-left: 39.5%;}
  .course.pushed-2 {margin-left: 27%;}
  .course.pushed-3 {margin-left: 14.5%;}
 
  .cms-profiles .thumbnail {width: 22%; margin: 1.5%;}
  .cms-profiles .thumbnail img {height: 18rem !important; object-fit: contain;}

  .cms-caption-gallery .thumbnail {width: calc(33% - 1rem);}

  /*.cms-carousel-gallery-thumbnail img {min-width: 200px;}*/

  .carousel-indicators {bottom: -30px;} 
  .very-bottom {padding-bottom: 40px;}
  .main-heading h1 {font-size: 4.8rem;}
  .hot-key {margin: 2rem 0; font-size: 3rem; height: 30rem;}
  .hot-key>div img {margin: 0 auto 2rem auto;}
  .hot-key>div {padding: 2rem; white-space: pre-line;}
}
@media (min-width: 992px) {
  .carousel-indicators {bottom: -40px;} 
  .hot-key {margin: 2rem 5%;}
}
@media (min-width: 1200px) {
  #content {margin-top: 120px;}
  .banner-logo img {display: block;}
}
@media (min-width: 1800px) {
  .section-banner {height: 25vw;}
}