/*
 ===================================================================================================
 
    @VERSION			: 1.0.0
    @CREATED			: 14 DEC 2020
    @MODIFIED			: 27 MAR 2023
    @DESIGNER			: Daniel C. K. Tan
    @FILE				: ~/css/layout.css
	@TYPE				: Style Sheet
	@DESCRIPTION		: Layout Style Sheets
	
 ===================================================================================================
*/

/* TOC
====================================================================================================
	#1 Base Styles
	#2 Layout Styles
	#3 Customised Form Styles
	#4 Helper Styles
	#5 Responsive Styles
	#6 CSS3 Styles
	#7 Animation Styles
	#8 CSS Media Queries
*/

/* ----------------------------------------------------------------------------------------------------
   #1 BASE STYLES 
/* ----------------------------------------------------------------------------------------------------*/
/* Viewport Styles
/* ----------------------------------------------------------------------------------------------------*/
@-ms-viewport {
   width: device-width; 
   max-zoom: 1; 
   min-zoom: 1; 
   user-zoom: fixed;
}
@-o-viewport {
   width: device-width; 
   max-zoom: 1; 
   min-zoom: 1; 
   user-zoom: fixed;
}
@viewport {
   width: device-width; 
   max-zoom: 1; 
   min-zoom: 1; 
   user-zoom: fixed;
}
/* Support IE10 Snap Mode */
@media screen and (max-width: 400px) {
   @-ms-viewport { width: 320px; }
}


/* Document Styles
/* ----------------------------------------------------------------------------------------------------*/
/* Smooth animated effect */
.container, .row, 
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, 
.col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, 
.col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, 
.col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, 
.col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, 
.col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, 
.col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, 
.col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, 
.col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, 
.col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, 
.col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, 
.col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
	-webkit-transition: all 0.6s ease-in-out;
	   -moz-transition: all 0.6s ease-in-out;
	    -ms-transition: all 0.6s ease-in-out;
	     -o-transition: all 0.6s ease-in-out;
	        transition: all 0.6s ease-in-out;
}

html { font-size: 1em; line-height: 1.5; }
html, body { width: 100%; height: 100%; }
@media screen and (max-width: 320px) { html, body { font-size: 14px !important; } }	
@media screen and (max-width: 992px) { body { overflow-x: hidden; } }

body {    
	/* SITE CUSTOMISATION */
	background-color: #fff;
	color: #333;
	font-family: 'Open Sans', Arial, 'Microsoft YaHei', SimHei, STHeiti, sans-serif;
	font-size: 16px !important;
	padding-top: 0;			   
	position: relative; /* Required for ScrollSpy */
	overflow-x: hidden; /*  Prevent Horizontal Sweeping in iOS */
	text-rendering: optimizelegibility; 
    -webkit-tap-highlight-color: rgba(255,255,255,.2);	
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
	    -ms-text-size-adjust: 100%; 
	-webkit-transition: font-size .8s ease-in-out;
	   -moz-transition: font-size .8s ease-in-out;
	     -o-transition: font-size .8s ease-in-out;
            transition: font-size .8s ease-in-out;		
}


/* Link Styles
/* ----------------------------------------------------------------------------------------------------*/
a {
    /* SITE CUSTOMISATION */
	color: #669900;
    -webkit-transition: all .2s ease-in-out;
       -moz-transition: all .2s ease-in-out;
	    -ms-transition: all .2s ease-in-out;
	     -o-transition: all .2s ease-in-out;
            transition: all .2s ease-in-out;
}
a:hover,
a:focus,
a:active,
a.active { 
	/* SITE CUSTOMISATION */
	color: #669900; 
	outline: 0; 
	text-decoration: none; 
}


/* Headings Styles
/* ----------------------------------------------------------------------------------------------------*/
h1, h2, h3, h4, h5, h6 {
    /* SITE CUSTOMISATION */
	font-family: 'Raleway', Arial, 'Microsoft YaHei', SimHei, STHeiti, sans-serif;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
	margin: 0 0 25px;
}
h1, h2, h3 { margin-top: 0; margin-bottom: 25px; }
h4, h5, h6 { margin-top: 0; margin-bottom: 20px; }

/* -- Responsive Heading -------------------------------- */
h1 { font-size: 3em; }
h2 { font-size: 2.5em; }
h3 { font-size: 2em; }
h4 { font-size: 1.75em; }
h5 { font-size: 1.5em; }
h6 { font-size: 1.25em; }


/* Image Styles
/* ----------------------------------------------------------------------------------------------------*/
img { margin: 0; padding: 0; display: inline-block; position: relative; zoom: 1; }
img.left  { float: left;  margin: 0 10px 5px 0; }
img.right { float: right; margin: 0 0 5px 10px; }
.img-fluid, img-responsive { max-width: 100%; width:100%; height: auto; }


/* Paragraph Styles
/* ----------------------------------------------------------------------------------------------------*/
p { font-size: 0.95em; margin-top: 0; margin-bottom: 1rem; line-height: 1.6; text-align: justify; }	


/* List Styles
/* ----------------------------------------------------------------------------------------------------*/
ol li, ul li { font-size: 0.95em; margin-bottom: 1rem; margin-left: 1rem; padding-left: 0.8rem; }
ol li ol li, ul li ul li { font-size: 0.9em; margin-top: 0.8rem; margin-bottom: 0.8rem; margin-left: 0.8rem; padding-left: 0.8rem; }


/* Table Styles
/* ----------------------------------------------------------------------------------------------------*/
table { border-collapse: collapse; table-layout: fixed; }
table td { word-wrap: break-word; }
.table tbody tr { background-color: #F8F8FF; }
.table.table-hover tbody tr:hover { background-color: #FFC !important; }


/* Responsive Table Breakpoint Styles
/* ----------------------------------------------------------------------------------------------------*/
.table-xs { width: 544px; }
.table-sm { width: 576px; }
.table-md { width: 768px; }
.table-lg { width: 992px; }
.table-xl { width: 1200px; }
.table-xxl { width: 1400px; }

/* Small devices (landscape phones, 544px and up) */
@media (min-width: 576px) {
	.table-sm { width: 100%; }
}

/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {
	.table-sm { width: 100%; }
	.table-md { width: 100%; }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
	.table-sm { width: 100%; }
	.table-md { width: 100%; }
	.table-lg { width: 100%; }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
	.table-sm { width: 100%; }
	.table-md { width: 100%; }
	.table-lg { width: 100%; }
	.table-xl { width: 100%; }
	.table-xxl { width: 100%; }
}


/* Back to Top
/* ----------------------------------------------------------------------------------------------------*/
#toTop {
	background: #0099ff;
	cursor:pointer;
	display:none;
	color:#fff;
	font-size: 1.4em;
	text-align:center;
	text-transform: capitalize;
	padding: 2px 5px;
	width: 40px;
	height: 40px;
	position:fixed;
	bottom:15px;
	right:15px;
	z-index: 10;
	transition: background 0.5s;
	-webkit-border-radius: 50px !important;
       -moz-border-radius: 50px !important;
            border-radius: 50px !important;
}
#toTop i { font-weight: 800; padding: 0; }

@media (max-width: 620px) {
	#toTop { bottom:60px; }
}


/* External Link Indicator Styles
/* ----------------------------------------------------------------------------------------------------*/
a[href^="https://"]:after,
a[href^="http://"]:after {
    font-family: 'Font Awesome 5 Free';
	font-weight: 900;
    content: "\f35d";
    margin-left: 4px;
}

/* Disable External Link Indicator for Internal Links */
a[href^="https://enablingmasterplan.autism.org.sg"]:after,
a[href^="http://enablingmasterplan.autism.org.sg"]:after  { content: ""; margin-left: 0; }

/* Disable External Link Indicator for Text Links */
a.txt-links:after{ content: ""; }

/* Disable External Link Indicator for Image Links */
a.img-links:after{ content: ""; }

/* Disable External Link Indicator for Button Links */
a.btn-links:after{ content: ""; }


/* Preloader Styles
/* ----------------------------------------------------------------------------------------------------*/
#preloader {
  background: #006699;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  overflow: hidden;
  
}

#preloader:before {
  content: "";
  position: fixed;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  border: 6px solid #006699;
  border-top-color: #fff;
  border-bottom-color: #fff;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  -webkit-animation: animate-preloader 1s linear infinite;
  animation: animate-preloader 1s linear infinite;
}

@-webkit-keyframes animate-preloader {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes animate-preloader {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}


/* Scroll Progress Bar Styles
/* ----------------------------------------------------------------------------------------------------*/
/* Fixed position (always stay at the top) */
.scroll-progress { position: fixed; top: 0; z-index: 9999; width: 100%; background-color: #f1f1f1; }

/* The progress container (grey background) */
.progress-container { width: 100%; height: 3px; background: #ddd; }

/* The progress bar (scroll indicator) */
.progress-bar { height: 3px; background: #32c728; width: 0%; } 


/* Lead Text Styles
/* ----------------------------------------------------------------------------------------------------*/
.lead { border-left: 5px solid #ddd; font-weight: 400; padding: 0 0 0 20px; margin: 30px 0; }


/* Blockquote Styles
/* ----------------------------------------------------------------------------------------------------*/
.blockquote-quoted { font-family: 'Sanchez', serif; font-size: 1.25em; line-height: 1.5em; padding-left: 20px; position: relative;  }
.blockquote-quoted footer { font-family: 'Open Sans', sans-serif !important; font-size: 0.85em; font-weight: 300; color: #bbb; float: right; }
.blockquote-quoted footer:before { content: '\2015'; }
.blockquote-quoted:after { content: '\201D'; position: absolute; top: 0.28em; right: 0; font-size: 6em; font-style: italic; color: #eee; z-index: -1; }


/* Navbar Styles
/* ----------------------------------------------------------------------------------------------------*/
.navbar {
	background-color: rgba( 0, 0, 0, 0 );
	border-bottom: 0 none;
	padding: 15px 50px;
	transition: .25s all linear;
}

.navbar .navbar-brand img { width: 250px; transition: .25s all linear; }
.navbar .navbar-nav { background-color: transparent; margin: 20px 0 0 0; }
.navbar .navbar-nav .nav-item { margin: 0; padding-left: 10px; }
.navbar .navbar-nav a { color: #efefef; font-weight: bold; font-size: 1em; text-decoration: none; transition: .25s all linear; }
.navbar .navbar-nav a:hover, 
.navbar .navbar-nav a:focus { background: none; color: #074f66; font-size: 1em; text-decoration: none; transition: .25s all linear; }

.navbar-scrolled { background-color: rgba( 0, 0, 0, .7 ); }
.navbar-scrolled .navbar-nav { margin: 0 0 3px 0; }
.navbar-scrolled .navbar-nav a:hover, .navbar-scrolled .navbar-nav a:focus { color: #FF9933; }
.navbar-scrolled .navbar-brand img { width: 155px; }

.navbar .dropdown-menu { padding: 5px; background-color: #f1f1f1; min-width: 320px; box-shadow: 0px 10px 14px 0px rgba(0,0,0,0.2); }
.navbar .dropdown-menu a,
.navbar .dropdown-menu a:visited { color: #333 !important; font-weight: bold !important; font-size: 0.9rem !important; text-decoration: none !important; padding: 7px 16px; display: block; border-bottom: none !important; }
.navbar .dropdown-menu a:hover,
.navbar .dropdown-menu a:focus,
.navbar .dropdown-menu a:active { border-bottom: none !important; color: #FF9933 !important; font-weight: bold !important; text-decoration: none; }

body.home .navbar .navbar-nav .nav-link.home,
body.about .navbar .navbar-nav .nav-link.about,
body.introduction .navbar .navbar-nav .nav-link.introduction,
body.priority-areas .navbar .navbar-nav .nav-link.priority-areas,
body.about-ans .navbar .navbar-nav .nav-link.about-ans,
body.contact-us .navbar .navbar-nav .nav-link.contact-us { color: #074f66; }

.navbar.navbar-scrolled .navbar-nav a:hover, .navbar .navbar-nav a:focus { color: #FF9933; }

body.home .navbar.navbar-scrolled .navbar-nav .nav-link.home,
body.about .navbar.navbar-scrolled .navbar-nav .nav-link.about,
body.introduction .navbar.navbar-scrolled .navbar-nav .nav-link.introduction,
body.priority-areas .navbar.navbar-scrolled .navbar-nav .nav-link.priority-areas,
body.about-ans .navbar.navbar-scrolled .navbar-nav .nav-link.about-ans,
body.contact-us .navbar.navbar-scrolled .navbar-nav .nav-link.contact-us { color: #FF9933; transition: .25s all linear; }

.navbar-toggler { color: #fff; font-size: 1em !important; }

@media screen and (max-width: 1024px) {
	.navbar { background-color: rgba( 0, 0, 0, .85 ); padding: 15px 30px; }
	.navbar .navbar-nav a { color: #fff; font-weight: 400; font-size: 1em; }
	.navbar-toggler { color: #fff; font-size: 1em; font-size: 1em !important; }
	.navbar .navbar-brand img { width: 180px; transition: .25s all linear; }
	
	.navbar .navbar-nav a:hover, 
	.navbar .navbar-nav a:focus { background: none; color: #FF9933; font-size: 1em; text-decoration: none; transition: .25s all linear; }
	
	body.home .navbar .navbar-nav .nav-link.home,
	body.about .navbar .navbar-nav .nav-link.about,
	body.introduction .navbar .navbar-nav .nav-link.introduction,
	body.priority-areas .navbar .navbar-nav .nav-link.priority-areas,
	body.about-ans .navbar .navbar-nav .nav-link.about-ans,
	body.contact-us .navbar .navbar-nav .nav-link.contact-us { color: #FF9933;; }
}

@media screen and (min-width: 1200px) {
	.navbar .navbar-nav a { font-size: 0.9em !important; }
	.navbar .navbar-nav a:hover, .navbar .navbar-nav a:focus { font-size: 0.9em !important; }
}

@media screen and (min-width: 1440px) {
	.navbar .navbar-nav a { font-size: 0.95em !important; }
	.navbar .navbar-nav a:hover, .navbar .navbar-nav a:focus { font-size: 0.95em !important; }
	.navbar .dropdown-menu a,
	.navbar .dropdown-menu a:hover,
	.navbar .dropdown-menu a:focus { font-size: 0.95rem !important; }
}


a.btn-download, a.btn-download:hover, a.btn-download:active {
    background-color: #FF9933 !important;
    border-color: #FF9933;
        border-bottom-color: rgb(255, 90, 33);
    border-bottom: none !important;
    box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.35);
    color: #fff !important;
    font-size: 18px;
    font-weight: bold !important;
    padding-right: 1.2rem !important;
    padding-left: 1.2rem !important;
    text-transform: uppercase;
}

section { padding-top: 100px; padding-bottom: 100px; width: 100%; }
main { padding-top: 0; padding-bottom: 100px; width: 100%; }


/* Hero Styles
/* ----------------------------------------------------------------------------------------------------*/
.hero { background-color: #0099ff; background-image: url("../img/bkg-hero-default.jpg"); background-repeat: no-repeat; background-attachment: fixed; background-position: top; color: #fff; padding-top: 150px; padding-bottom: 150px; }
.hero .title { color: #fff; font-size: 2.8em;  font-weight: 700; margin-top: 80px; text-align: center; text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);  }
.hero .title .highlight { color: #ffcc00; text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);  }
.hero .intro { font-size: 2em; font-weight: 300; margin: 0 auto; margin-bottom: 30px;  text-align: center; text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3); text-transform: capitalize; }
.hero .intro .highlight { color: #ffcc00; font-family: 'Caveat', cursive; font-size: 1.75em; margin-right: 10px; text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3); text-transform: capitalize; }

@media screen and (max-width: 1280px) {	
	.hero { background-position: bottom center; }
}


/* Bounching Down Arrow Styles
/* ----------------------------------------------------------------------------------------------------*/
.bounce { -webkit-animation: bounce 2s infinite; animation: bounce 2s infinite; }

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0);   }
  40% { transform: translateY(-30px); }
  60% { transform: translateY(-15px); }
}

.down-arrow { text-align: center; position: relative; bottom: -5rem; left: 50%; margin-left:-20px;width: 40px; height: 0; }



/* Priority Boxes Styles
/* ----------------------------------------------------------------------------------------------------*/
.priority-box { box-shadow: 0px 0 16px rgba(0, 0, 0, 0.1); padding: 30px; background: #fff; margin-bottom: 30px; min-height: 250px; transition: all ease-in-out 0.4s; }
.priority-box:hover { transform: translateY(-10px); }
.priority-box .priority-img { width: 90px; border-radius: 50%; border: 4px solid #fff; margin: 0 auto; }
.priority-box h6 { color: #1c5c93; font-size: 1em; display: block; font-weight: 700; margin-top: 30px; }
a:hover > .priority-box:hover > h6:hover, 
a:active > .priority-box:active > h6:visited, 
a:visited > .priority-box:visited > h6:visited { color: #1c5c93; text-decoration: none; }


/* About ANS Styles
/* ----------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 1280px) {
	.ans-partners { text-align: center; }
}


/* Section Styles
/* ----------------------------------------------------------------------------------------------------*/
.section-about .title { font-size: 2.2em; margin-bottom: 0; }
.section-about .intro { font-weight: 300; font-size: 1.4em; margin-top: 40px;  }

.section-priority-areas { background-color: #eee; }
.section-priority-areas .title { color: #5c768d;; font-weight: 300; font-size: 2.2em; margin-bottom: 30px; }
.section-priority-areas .title .intro { color: #5c768d; display: block; font-size: 0.6em; font-weight: 300; margin: 15px 0 20px; text-align: center; text-align: center; text-transform: capitalize; }

@media screen and (max-width: 769px) {
	.section-priority-areas .title .intro { font-size: 0.5em; }
}

.section-contributors { background-color: #fff; }
.section-contributors h5 { font-size: 1.35em; text-align: center; }
.section-contributors h6 { font-size: 1.15em; text-align: left; }

@media screen and (max-width: 769px) {
	.section-contributors h6 { text-align: center; }
}

.section-feedback { background-color: #660066; padding-top: 45px; padding-bottom: 45px; }
.section-feedback .title { color: #fff; font-weight: 300; font-size: 28px; margin-bottom: 30px; }
.section-feedback p { color: #fff; font-weight: 300; font-size: 18px; text-align: center; }

@media screen and (max-width: 620px) {
	.section-feedback p { color: #fff; font-weight: 300; font-size: 14px; text-align: center; }
}


/* Header Styles
/* ----------------------------------------------------------------------------------------------------*/
.header { background-color: #0099ff; color: #fff; padding-top: 120px; padding-bottom: 115px; }
.header .title,
.header.page .title { color: #fff; font-size: 2.5em; font-weight: 700; margin-top: 40px; text-align: center; text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3); }

.header.page .title .intro,
.header .title .intro { color: #fff; display: block; font-size: 0.75em; font-weight: 300; margin: 15px 0 20px; text-align: center; text-align: center; text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3); }

.header-foreword,
.header-overview,
.header-contributors,
.header-introduction,
.header-about-ans,
.header-contact-us,
.header-priority-a,
.header-priority-b,
.header-priority-c,
.header-priority-d,
.header-priority-e,
.header-priority-f { background-color: #0099ff; background-image: url("../img/bkg-header-default.jpg"); background-repeat: no-repeat; background-attachment: fixed; background-position: top; }

.header-contributors { padding-bottom: 65px; }

.header-priority-a,
.header-priority-b,
.header-priority-c,
.header-priority-d,
.header-priority-e,
.header-priority-f { padding-bottom: 95px; }

@media screen and (max-width: 1280px) {	
	.header-foreword,
	.header-overview,
	.header-contributors,
	.header-introduction,
	.header-about-ans,
	.header-contact-us,
	.header-priority-a,
	.header-priority-b,
	.header-priority-c,
	.header-priority-d,
	.header-priority-e,
	.header-priority-f	{ background-position: center center; }
}


/* Content Area Styles
/* ----------------------------------------------------------------------------------------------------*/
main.content-area { padding-top: 60px; padding-bottom: 60px; line-height: 25px; }

.tab-content .tab-pane h2,
main.content-area h2 { font-size: 1.75em; }

.tab-content .tab-pane h3,
main.content-area h3 { font-size: 1.5em; }

.tab-content .tab-pane h4,
main.content-area h4 { font-size: 1.25em; }


/* Foreword Styles
/* ----------------------------------------------------------------------------------------------------*/
.sign-off .name { font-size: 1.1em; font-weight: bold; }
.sign-off .organisation { text-transform: uppercase; }


/* Summary Styles
/* ----------------------------------------------------------------------------------------------------*/
.summary { background: #f5f9fc; color: #333; padding-top: 60px; padding-bottom: 60px; }
.summary-intro p { font-size: 1.1em; font-weight: 300; text-align: justify; }

.summary-list {
    position: relative;
    margin: 0.8em 0px 0px;
    list-style: outside none none;
    counter-reset: big-numba;
    padding-left: 0px;
}

.summary-list-item {
    font-size: 18px;
	font-weight: bold;
	position: relative;
    margin: 0.8em 0px 0px 1.9em;
    list-style: outside none none;
}

.summary-list-item::before {
    content: counter(big-numba, decimal);
    counter-increment: big-numba;
    position: absolute;
    top: -2px;
    font-size: 19px;
    left: -1.9em;
    box-sizing: border-box;
    width: 1.5em;
    height: 1.5em;
    line-height: 1.5;
    color: #FFF;
    background: #0099ff none repeat scroll 0% 0%;
    font-weight: 600;
    text-align: center;
    border-radius: 50%;
}


/* Tab Styles
/* ----------------------------------------------------------------------------------------------------*/
main nav { background:#272e38; }

main nav > .nav.nav-tabs {
	border: none;
	color:#fff;
	background:#272e38;
	border-radius:0;
}

main nav > div a.nav-item.nav-link {
	border: none;
	padding: 18px 10px;
	color:#fff;
	background:#272e38;
	border-radius:0;
	font-size: 18px;
	font-weight: bold;
	text-decoration: none;
}

main nav > div a.nav-item.nav-link.active {
	background:#f7931d;
	color:#fff;
	padding: 18px 10px;
	text-decoration: none;
}

main nav > div a.nav-item.nav-link.active:after {
	content: "";
	position: relative;
	bottom: -60px;
	left: -20%;
	border: 15px solid transparent;
	border-top-color: #f7931d ;
}

main .tab-content {
	background: #fff;
	line-height: 25px;
	border: 0 solid #ddd;
	border-top:5px solid #f7931d;
	color:#333;
	border-radius:0;
	transition:background 0.20s linear;
	padding-top: 60px; padding-bottom: 80px;
}

@media screen and (max-width : 620px) {
	/* Responsive Tabs */
	.nav-tabs { width: 100%; -ms-flex-direction: column !important; flex-direction: column !important; }
	main nav > div a.nav-item.nav-link.active:after { border: 0; }
	main .tab-content { border-top:0; }
}


/* Footnotes Styles
/* ----------------------------------------------------------------------------------------------------*/
.footnotes {  margin-top: 50px; border-top: 1px solid silver; font-size: 0.85em; color: #5e5e5e; }
.footnotes::before {
    content: "Footnotes";
    text-transform: uppercase;
    color: #909090;
    font-size: .7rem;
    letter-spacing: .1rem;
    display: block;
    margin: 2rem 0 .5rem;
}
.footnotes ol { padding-left: 20px; }

a[aria-describedby="footnote-label"] { text-decoration: none; outline: none; cursor: pointer; }
a[aria-label="Back to Content"] { font-size: 0.85em; }

/* Highlight targeted footnote */
#footnotes :target { background-color: #ffa; -webkit-transition: all 1s linear; }


/* Image Caption Styles
/* ----------------------------------------------------------------------------------------------------*/
.figure-caption { background-color: #f2f2f2; border-left: 5px solid #1b75bb; color: #767676; font-size: 0.8em; line-height: 1.4285714286 !important; text-align: left; padding: 10px; min-height: 45px; }
.figure-caption .credits { color: #969696; display: block; font-size: 0.85em; margin-top: 10px; }


/* Accordion Styles
/* ----------------------------------------------------------------------------------------------------*/
.accordion .card { border: 0; border-radius: 4px; box-shadow: 0px 0 5px rgba(0, 0, 0, 0.25); }
.accordion .card + .card { margin-top: 15px; }
.accordion .card .card-header { background-color: #efefef; border-bottom: 0 !important; }

.accordion .card .card-header h3,
.accordion .card .card-header h5 { font-size: 1.15em; position: relative; }

.accordion .card .card-header h3 a span,
.accordion .card .card-header h5 a span { display: block; font-size: 1em; font-weight: 300; }

.accordion .card .card-header h3 .btn-accordion-link,
.accordion .card .card-header h5 .btn-accordion-link { color: #555; display: block !important; font-family: 'Open Sans', Arial, 'Microsoft YaHei', SimHei, STHeiti, sans-serif; font-weight: bold; text-align: left; padding: 0 !important; }

.accordion .card .card-header h3 .btn-accordion-link[aria-expanded="false"]:after,
.accordion .card .card-header h5 .btn-accordion-link[aria-expanded="false"]:after { content: "\f067"; font-family: 'Font Awesome 5 Free'; font-weight: 900; /*float: right;*/ right: 1%; position: absolute; top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%); }

.accordion .card .card-header h3 .btn-accordion-link[aria-expanded="true"]:after ,
.accordion .card .card-header h5 .btn-accordion-link[aria-expanded="true"]:after { content: "\f068"; font-family: 'Font Awesome 5 Free'; font-weight: 900; /*float: right;*/ right: 1%; position: absolute; top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%); }

.accordion .card .card-header h3 .btn-accordion-link.collapsed
.accordion .card .card-header h5 .btn-accordion-link.collapsed { color: #555; }

.accordion .card .collapse.show { background: #fff; line-height: 30px; color: #333; }


/* Department Section Styles: Navigator
/* ----------------------------------------------------------------------------------------------------*/
section.navigator { background-color: #003366; color: #fff; padding-top: 40px; padding-bottom: 40px; }


/* Footer Styles
/* ----------------------------------------------------------------------------------------------------*/
footer.footer { background-color: #333; color: #eee; text-align: center; padding-top: 15px; padding-bottom: 15px; }
footer.footer p { text-align: center; }
small, .small, .lastUpdated { font-size: 0.8em; }

@media screen and (max-width : 620px)  {
	/* bottom margin for Shared Buttons */ 
	footer.footer { margin-bottom: 40px; }
}


/* Ripple Click Effect Styles
/* ----------------------------------------------------------------------------------------------------*/
.ripple { position: relative; overflow: hidden; transform: translate3d(0, 0, 0); }
.ripple:after { content: ""; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; background-image: radial-gradient(circle, #ddd 10%, transparent 3%); background-repeat: no-repeat; background-position: 50%; transform: scale(10, 10); opacity: 0; transition: transform .5s, opacity 1s; }
.ripple:active:after { transform: scale(0, 0); opacity: .2; transition: 0s; }


/* Callouts Styles
/* ----------------------------------------------------------------------------------------------------*/
.callouts { background: #F8F8F8; padding: 10px; margin: 0; border-width: 1px 1px 1px 5px; border-style: solid; border-color: #EEE; -moz-border-top-colors: none; -moz-border-right-colors: none; -moz-border-bottom-colors: none; -moz-border-left-colors: none; border-image: none; border-radius: 3px; }
.callouts-info { border-left-color: #5BC0DE; }
.callouts h5,
.callouts p { margin: 5px 0 !important; font-size: 0.8em; }
.callouts span.label { color: #999; }


/* Responsive Embeds Styles
/* ----------------------------------------------------------------------------------------------------*/
.embed-responsive-doc { padding-bottom: 100vh; }
.embed-responsive-ppt { padding-bottom: 56.25%; }
.embed-responsive-cal { padding-bottom: 75%; }
.embed-responsive-map { padding-bottom: 90%; }


/* Shadow Styles
/* ----------------------------------------------------------------------------------------------------*/
.shadow-0 { -webkit-box-shadow:none!important; box-shadow:none!important }
.shadow-1 { -webkit-box-shadow:0 2px 10px 0 rgba(0,0,0,.05)!important; box-shadow:0 2px 10px 0 rgba(0,0,0,.05)!important }
.shadow-2 { -webkit-box-shadow:0 5px 15px 0 rgba(0,0,0,.05)!important; box-shadow:0 5px 15px 0 rgba(0,0,0,.05)!important }
.shadow-3 { -webkit-box-shadow:0 10px 20px 0 rgba(0,0,0,.05)!important; box-shadow:0 10px 20px 0 rgba(0,0,0,.05)!important }
.shadow-4 { -webkit-box-shadow:0 15px 30px 0 rgba(0,0,0,.05)!important; box-shadow:0 15px 30px 0 rgba(0,0,0,.05)!important }
.shadow-5 { -webkit-box-shadow:0 20px 40px 0 rgba(0,0,0,.05)!important; box-shadow:0 20px 40px 0 rgba(0,0,0,.05)!important }

.shadow-1-strong { -webkit-box-shadow:0 2px 5px 0 rgba(0,0,0,.25),0 3px 10px 0 rgba(0,0,0,.2)!important; box-shadow:0 2px 5px 0 rgba(0,0,0,.25),0 3px 10px 0 rgba(0,0,0,.2)!important }
.shadow-2-strong { -webkit-box-shadow:0 4px 8px 0 rgba(0,0,0,.25),0 5px 15px 2px rgba(0,0,0,.2)!important; box-shadow:0 4px 8px 0 rgba(0,0,0,.25),0 5px 15px 2px rgba(0,0,0,.2)!important }
.shadow-3-strong { -webkit-box-shadow:0 6px 11px 0 rgba(0,0,0,.25),0 7px 20px 3px rgba(0,0,0,.2)!important; box-shadow:0 6px 11px 0 rgba(0,0,0,.25),0 7px 20px 3px rgba(0,0,0,.2)!important }
.shadow-4-strong { -webkit-box-shadow:0 6px 14px 0 rgba(0,0,0,.25),0 10px 30px 4px rgba(0,0,0,.2)!important; box-shadow:0 6px 14px 0 rgba(0,0,0,.25),0 10px 30px 4px rgba(0,0,0,.2)!important }
.shadow-5-strong { -webkit-box-shadow:0 6px 20px 0 rgba(0,0,0,.25),0 12px 40px 5px rgba(0,0,0,.2)!important; box-shadow:0 6px 20px 0 rgba(0,0,0,.25),0 12px 40px 5px rgba(0,0,0,.2)!important }

.card.hover-shadow,
.hover-shadow { -webkit-box-shadow:none; box-shadow:none; -webkit-transition:all .3s ease-in-out; transition:all .3s ease-in-out }
.card.hover-shadow:hover,
.hover-shadow:hover { -webkit-box-shadow:0 8px 17px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19); box-shadow:0 8px 17px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19); -webkit-transition:all .3s ease-in-out; transition:all .3s ease-in-out }


/* Material Design Colours Styles
/* ----------------------------------------------------------------------------------------------------*/

/* -- Background Colours -------------------------------- */
.bg-red 			{ background-color: #f44336; }
.bg-pink 			{ background-color: #e91e63; }
.bg-purple			{ background-color: #9c27b0; }
.bg-purple-deep		{ background-color: #673ab7; }
.bg-indego			{ background-color: #3f51b5; }
.bg-blue 			{ background-color: #2196f3; }
.bg-blue-light		{ background-color: #03a9f4; color: #333; }
.bg-cyan 			{ background-color: #00bcd4; color: #333; }
.bg-teal 			{ background-color: #009688; }
.bg-green			{ background-color: #4caf50; color: #333; }
.bg-green-light		{ background-color: #8bc34a; color: #333; }
.bg-lime			{ background-color: #cddc39; color: #333; }
.bg-yellow 			{ background-color: #ffeb3b; color: #333; }
.bg-amber 			{ background-color: #ffc107; color: #333; }
.bg-orange 			{ background-color: #ff9800; color: #333; }
.bg-orange-deep 	{ background-color: #ff5722; }
.bg-brown 			{ background-color: #795548; }
.bg-grey 			{ background-color: #9e9e9e; }
.bg-grey-blue 		{ background-color: #607d8b; }
.bg-black 			{ background-color: #000000; }

/* -- Font Colours -------------------------------- */
.text-red 			{ color: #f44336; }
.text-pink 			{ color: #e91e63; }
.text-purple		{ color: #9c27b0; }
.text-purple-deep	{ color: #673ab7; }
.text-indego		{ color: #3f51b5; }
.text-blue 			{ color: #2196f3; }
.text-blue-light	{ color: #03a9f4; }
.text-cyan 			{ color: #00bcd4; }
.text-teal 			{ color: #009688; }
.text-green			{ color: #4caf50; }
.text-green-light	{ color: #8bc34a; }
.text-lime			{ color: #cddc39; }
.text-yellow 		{ color: #ffeb3b; }
.text-amber 		{ color: #ffc107; }
.text-orange 		{ color: #ff9800; }
.text-orange-deep 	{ color: #ff5722; }
.text-brown 		{ color: #795548; }
.text-grey 			{ color: #9e9e9e; }
.text-grey-blue 	{ color: #607d8b; }
.text-black 		{ color: #000000 !important; }
.text-white 		{ color: #ffffff !important; }


/* Extend Sizing Untilities Styles
/* ----------------------------------------------------------------------------------------------------*/
/* Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {
	.w-sm-100 { width:100% !important; }
	.w-sm-75  { width:75% !important; }
	.w-sm-50  { width:50% !important; }
	.w-sm-25  { width:25% !important; }
	.h-sm-100 { height:100% !important; }
	.h-sm-75  { height:75% !important; }
	.h-sm-50  { height:50% !important; }
	.h-sm-25  { height:25% !important; }
}

/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
	.w-md-100 { width:100% !important; }
	.w-md-75  { width:75% !important; }
	.w-md-50  { width:50% !important; }
	.w-md-25  { width:25% !important; }
	.h-md-100 { height:100% !important; }
	.h-md-75  { height:75% !important; }
	.h-md-50  { height:50% !important; }
	.h-md-25  { height:25% !important; }
}

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
	.w-lg-100 { width:100% !important; }
	.w-lg-75  { width:75% !important; }
	.w-lg-50  { width:50% !important; }
	.w-lg-25  { width:25% !important; }
	.h-lg-100 { height:100% !important; }
	.h-lg-75  { height:75% !important; }
	.h-lg-50  { height:50% !important; }
	.h-lg-25  { height:25% !important; }
}

/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
	.w-xl-100 { width:100% !important; }
	.w-xl-75  { width:75% !important; }
	.w-xl-50  { width:50% !important; }
	.w-xl-25  { width:25% !important; } 
	.h-xl-100 { height:100% !important; }
	.h-xl-75  { height:75% !important; }
	.h-xl-50  { height:50% !important; }
	.h-xl-25  { height:25% !important; }
}