/* overrides the standard styles for slide style pages */
.content-section-container > .accordian-container { border-bottom-width: 0px; }
iframe{ max-width: 100%; }
h1{ font-size: 4em; }
h2{ font-size: 3em; }
p{ font-size: 1.25em; line-height: 1.5em; }
div#cookies{ z-index: 9990; }
div.selector div.content-section-margin { padding-bottom: 64px;}
div.next-selector{ border-top: 1px solid rgba(255,255,255,0.2); border-bottom: 1px solid rgba(255,255,255,0.2); }
div.next-selector:hover{ background-color: rgba(0,0,0,0.2); transition: all 0.3s ease; -webkit-transition: all 0.3s ease; }

.narrow div.content-section{ max-width: 800px; }

div.content-section-container.bg-dark div.content-section a.box-link{ background-color: transparent; border-color: white; color: white; }
div.content-section-container.bg-dark div.content-section a.box-link:hover, div.content-section-container.bg-dark div.content-section a.box-link:focus{ background-color: white; color: #333; border-bottom-color:white;}
.facilities img { max-width: 64px; }
main div.content-section-margin { padding-top: 36px; margin: 0px 24px 0px 24px; }

@-webkit-keyframes pulse 
{
	0% { -webkit-transform: translate(0, 0); transform: translate(0, 0); }
	50% { -webkit-transform: translate(0, 10px); transform: translate(0, 10px); }
	100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } 
}

@keyframes pulse 
{
	0% { -webkit-transform: translate(0, 0); transform: translate(0, 0); }
	50% { -webkit-transform: translate(0, 10px); transform: translate(0, 10px); }
	100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } 
}

.next-selector a{ display: block; width: 98%; margin: 0 auto; -webkit-animation: pulse 2s infinite; animation: pulse 2s infinite; background: transparent url("/img/icon/icon-arrow-down-white.png") no-repeat center center; height: 48px; }
.bg-light div.next-selector{ border-top: 1px solid rgba(0,0,0,0.2);  border-bottom: 1px solid rgba(0,0,0,0.2);}
.bg-light .next-selector a{ background: transparent url("/img/icon/icon-arrow-down.png") no-repeat center center; }
.next-selector a:focus, .bg-light .next-selector a:focus{ background-color: rgba(0,0,0,0.2); animation: none; }

/*.bg-light p{ color: black; }*/

/* dot navigation */
div.section-selector { right: 0px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); }
div.section-selector ul{ padding: 0px; margin-top: 24px; }
div.section-selector li { padding: 0px 4px 0px 4px; }
div.section-selector li a{ position: relative; width: 20px; height: 20px; background-color: transparent; display: block; border-radius: 50%; box-shadow: none; box-sizing: border-box; }
div.section-selector li a.active{ border: 1px solid rgba(255,255,255,1); }
div.section-selector li a.active span{ opacity: 1; }
div.section-selector li a:hover span, div.section-selector li a:focus span { opacity: 1; width: 8px; height: 8px; }
div.section-selector li a span {
	position: absolute;
	display: block;
	top: 50%;
	left: 50%;
	width: 5px;
	height: 5px;
	background: white;
	border-radius: 50%;
	transform: translate3d(-50%, -50%, 0);
	opacity: 0.5;
	transition: 0.3s ease-in-out !important;
}

@media screen and (max-width: 640px)
{
	h1 { font-size: 3em; }
	h2 { font-size: 2em; }
}

/* loading icon https://smallenvelop.com/display-loading-icon-page-loads-completely/ */
.no-js #loader { display: none;  }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.se-pre-con 
{
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 2147483001; /* to appear above Unibuddy popup */
	background: url(/img/preloader/Preloader_1.gif) center no-repeat #fff;
	text-align: center;
	padding-top: 64px;
}

/* video background */
.fullscreen_bg 
{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  z-index: 0;
  height: 100vh;
}

.fullscreen_bg_video 
{
  position: absolute;
  /*top: 0;
  left: 0;
  width: 100%;
  height: 100%;*/
   top: 50%;  /* position the top  edge of the element at the middle of the parent */
    left: 50%; /* position the left edge of the element at the middle of the parent */

    transform: translate(-50%, -50%);
}

.middle100{ position: relative; z-index: 1; height: 100vh; }

@media (min-aspect-ratio: 16/9) {
  .fullscreen_bg_video {
    /*height: 300%;
    top: -100%;*/
	height: auto;
    width: 100%;
  }
}

@media (max-aspect-ratio: 16/9) {
  .fullscreen_bg_video {
    /*width: 300%;
    left: -100%;*/
	height: 100%;
    width: auto;
  }
}

@media (max-width: 767px) {
  /* video doesn't auto start on mobiles - so hide video */
  /*.fullscreen_bg_video { display: none; }*/
}

/* notification dialog */
#notification
{
	border-radius: 4px; position: fixed; z-index: 999; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 50%; margin: 0 auto;
	box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
}
#notification div.notification-container{ border-radius: 4px; }
#notification div.notification-inner{ padding: 24px; border-top: 8px solid rgb(83,207,186); border-radius: 4px; }
a.notification-btn { font-weight: bold; display: block; text-align: center; padding: 12px; border-radius: 21px; }
a.notification-btn:hover, a.notification-btn:focus{ background-color: rgb(255,232,0); }

@media (max-width: 480px) 
{
  #notification { width: 80%; }
}

.flex-wrapper:hover > article:not(:hover) { opacity: 1; }
div.selector.rounded article, div.selector.rounded article .flex-inner, div.selector.rounded article a { border-radius: 8px; }

div.selector.dark-mode article div.flex-inner{ background-color: transparent; }
div.selector.dark-mode article a { box-sizing: border-box; border: 2px solid white; background-color: rgb(29,37,45); background-color: rgba(0,0,0,0.25); color: white; }
div.selector.dark-mode article a:hover { border-color: rgb(255,232,0); }
div.selector.dark-mode.rounded article:hover .flex-inner { box-shadow: 0px 0px 10px rgba(255,232,0,0.5); }

div.selector.dark-mode article a:focus { background-color: rgb(255,232,0); color: black; }
div.selector.dark-mode article a:visited span.headline { color: white; }
div.selector.dark-mode article a:visited:focus span.headline { color: black; }
div.selector.rounded article { overflow: visible; }
div.selector.rounded article .flex-inner { box-shadow: 0px 0px 10px rgba(0,0,0,0.5); }
div.selector.rounded article span.section { border-top-right-radius: 4px; }

.no-move article:hover{ margin: 12px 0px 12px 0px; }

@media (min-width: 900px) 
{
	div.selector.rounded article { min-height: 120px; }
}

img.rounded{ border-radius: 50%; }
div.img-container{ margin: 16px 16px 16px 16px; }

div.selector-container
{
	right: 0px;
    top: 0px;
    background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 100%);
	width: 28px;
	height: 100vh;
	position: fixed;
	z-index: 997;
	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
}
div.selector-container:hover
{
	/*background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%);*/
	background-color: rgba(0,0,0,0.3);
	border-left: 1px solid rgba(255,255,255,0.5);
}

div.selector ul:not(.page-menu) li{ font-size: 1.25em; }
div.selector table ul:not(.page-menu) li{ font-size: 1em; }

div.selector div.bg-dark ul:not(.page-menu) li{ color: white; }
.bg-dark ul li a{ color: #f7fe88; border-bottom-color: #f7fe88; }
.bg-dark div.quote{ border-color: white; }

ul.page-menu{ margin-bottom: 24px; }

.left{ float: left; }

p.DT_profile{ clear: left; }
p.DT_profile img{ float: left; margin-right: 12px; margin-bottom: 12px; }
p.DT_profile span{ float: left; display: inline-block; }

p.outline-text{ margin-bottom: 8px; margin-top: 12px; clear: left; background-color: rgba(0,0,0,0.1); }
p.outline-text.dark-mode{ color: white; background-color: rgba(0,0,0,0.2); }

.fluid-gradient-heading {
	color: transparent !important;
    background: linear-gradient(
91.36deg, #ECA658 0%, #F391A6 13.02%, #E188C3 25.52%, #A58DE3 37.5%, #56ABEC 49.48%, #737EB7 63.02%, #C8638C 72.92%, #DD5D57 84.38%, #DF6C51 97.92%);
background: rgb(34,193,195);
background: linear-gradient(120deg, rgba(34,193,195,1) 0%, rgba(253,187,45,1) 100%);

    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    -moz-background-clip: text;
    -webkit-animation: intro-gradient 10s infinite ease both;
    -moz-animation: intro-gradient 10s infinite ease both;
    animation: intro-gradient 10s infinite ease both;
}

/* fluid-gradient-header does not define a background colour/gradient - this must be set by another style */
.fluid-gradient-header {
	color: transparent !important;
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    -moz-background-clip: text;
    -webkit-animation: intro-gradient 10s infinite ease both;
    -moz-animation: intro-gradient 10s infinite ease both;
    animation: intro-gradient 10s infinite ease both;
}

.gradient-rainbow{ background-image: linear-gradient(91.36deg, #ECA658 0%, #F391A6 13.02%, #E188C3 25.52%, #A58DE3 37.5%, #56ABEC 49.48%, #737EB7 63.02%, #C8638C 72.92%, #DD5D57 84.38%, #DF6C51 97.92%); }

@-webkit-keyframes intro-gradient {
    0%{background-position:0% 4%}
    50%{background-position:100% 97%}
    100%{background-position:0% 4%}
}
@-moz-keyframes intro-gradient {
    0%{background-position:0% 4%}
    50%{background-position:100% 97%}
    100%{background-position:0% 4%}
}
@keyframes intro-gradient { 
    0%{background-position:0% 4%}
    50%{background-position:100% 97%}
    100%{background-position:0% 4%}
}

.scaling-text{ font-size: 5vw; line-height: 6vw; }

@media (min-width: 1280px) 
{
	.scaling-text{ font-size: 64px; line-height: 80px; }
}
@media (max-width: 640px) 
{
	.scaling-text{ font-size: 32px; line-height: 48px; }
}
.with-border-bottom{ border-bottom: 1px solid rgba(255,255,255,0.5); padding-bottom: 32px; }

.align-to-centre .flex-width-two, .align-to-centre .flex-width-three{ display: flex; align-items: center; justify-content: center; }
img.full-width{ width: auto; max-width: 100%; }