<style>
/*=========== LANDING PAGE CSS ===========*/
#wrapper_sleeve {margin-top: 0px;}

/*____H1 title text*/
#section_intro h1 { position: relative; z-index: 2; color:#fff; top: 80px; padding-left: 20px;}
/*____end H1 title text*/

/*____Animate title keyframes */
#section_intro h1 {animation: 2s drop-Title ease-out;}

@keyframes drop-Title {
  0% {opacity: 0; transform: translateY(80%);}
  20% {opacity: 0;}
  50% {opacity: 1; transform: translateY(0%);}
  100% {opacity: 1; transform: translateY(0%);}
}
/*____end Animate title keyframes */

/*____Intro box*/
.landing-intro-text {margin-top: 100px; margin-bottom: 60px;}

/*=========== GLOBAL CSS =========== */
/*Banner heading*/
#bgimage-landing {height: 360px; color: #fff; margin-top: -166px; background-size: 100% auto; background-repeat: no-repeat; display: flex; justify-content: center; align-items: center; position: relative; overflow: hidden; background-position: center; background-attachment: fixed;}
#bgimage-landing::after { content: ""; position: absolute; top: 100%; left: 0; width: 200%; height: 200%; background: #fff; transform-origin: 0 0; transform: rotate(0deg);}
/*___banner heading gradiant*/
.bgimage-overlay {background: linear-gradient(to left, transparent 0,#000);
background: -moz-linear-gradient(left, rgba(0,0,0,0.95) 30%, rgba(0,0,0,0) 76%);
background: -webkit-linear-gradient(left, rgba(0,0,0,0.95) 30%,rgba(0,0,0,0) 76%);
background: linear-gradient(to right, rgba(0,0,0,0.95) 30%,rgba(0,0,0,0) 76%);
width: 100%; height: 360px;}
/*___end BANNER HEADING*/


/*GRID LAYOUT
================================================== */
.grid .gridLayout ul li .subSleeve {background: #fff;}
.grid .gridLayout.colour2 ul li .subSleeve {background: #f0f2f2;}
/*___bespoke label links for boxes*/
.featuredText {margin-bottom: 0; margin-top: 16px;}

/*STORY CRITERIA
================================================== */
/*_____story criteria*/
.grid .sleeve-white .spinLayout .sleeve .subSleeve {padding: 20px 10px 0px 0px;}
.grid .sleeve-white .sleeve .spinLayout .sleeve {background: #fff; padding-bottom: 0px; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;}

/*BLOCKQUOTE 
================================================== */
blockquote .quotesource {color: var(--accent-grey-dark-1); line-height: 1.2; font-weight: bold; text-align: right; margin-top: 20px;}
.ff-lightblue blockquote {background: transparent;}
.quote-block-container {padding:43px 0px;}

/*QUICK LINK MENU
================================================== */
.quick-container {position: relative; width: 100%; display: flex;
justify-content: flex-end;}
.quick-container .quick-menu {width: 300px; border: 4px solid #fff; margin-top: -69px;}
.quick-container li { float: left; margin: 0; padding: 0; position: relative; width:100%; list-style: none;}
.quick-container a { background: #ddd; color: #000; display: block; padding: 18px 34px; line-height: 1.2; font-weight: bold; text-decoration: none; -webkit-transition: all .25s ease; -moz-transition: all .25s ease; -ms-transition: all .25s ease; -o-transition: all .25s ease; transition: all .25s ease;}

.quick-container ul { margin: 0; padding: 0;}
.quick-container .quick-menu .quick-dropdown {text-align: center; background-color: var(--secondary-color); padding: 18px 0px; line-height: 1.2; font-weight: bold; font-size: 1.266rem; color:#fff; word-spacing: 1px; letter-spacing: 1px;}

.quick-container .quick-dropdown:after { content: '\203A'; margin-left: 5px;}
.quick-container .quick-dropdown:hover:after{ transform: rotate(90deg); display: inline-block; transition: all .25s ease;}

.quick-container .quick-menu .quick-dropdown:hover {background-color: var(--secondary-color);}
.quick-container li:hover a {background: #f1f1f1; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 4px;}
.quick-container li ul {float: left; left: 0; opacity: 0; position: absolute; top: 35px; visibility: hidden; z-index: 3; -webkit-transition: all .25s ease; -moz-transition: all .25s ease; -ms-transition: all .25s ease; -o-transition: all .25s ease; transition: all .25s ease; width: 100%;}
.quick-container li:hover ul { opacity: 1; top: 55px; visibility: visible;}
.quick-container li ul li { float: none; width: 100%;}
.quick-container li ul a:hover {background: #000; color: #fff;}

/* Clearfix */
.quick-menu:after{content:""; display:table;}
.quick-menu:after {clear:both;}
/*END QUICK LINK MENU*/

/*QUICK LINK MENU version 2
================================================== */
.qlink-wrapper {margin: 0px; padding: 0px; position:absolute; top:-63px; right:0; border:3px solid #fff;}
.qlink-container {position: relative;}
.qlink-main-menu{margin-right: 4.5%;}

.qlink-wrapper li{display: inline-block; background-color: var(--secondary-color); width: 220px;}
.qlink-wrapper li a, .qlink-main-menu{ color: #fff; font-size: 16px; text-transform: uppercase; text-decoration: none; font-weight: bold; display: block; position: relative; text-align:center;}

.qlink-wrapper li a span, .qlink-main-menu span { display: block; padding: 15px 20px; word-spacing:1px; letter-spacing:1px;}

.qlink-wrapper li a span:before, .qlink-main-menu span:before{ content: attr(title); position: absolute; top: 0; left: 0; background: var(--primary-color); color: #fff; padding: 15px 20px; transform-style: preserve-3d; transition: .3s; transform: rotateX(90deg) translateY(50px); transform-origin: bottom; width: 100%;}

.qlink-wrapper li a span:hover:before, .qlink-main-menu span:hover:before{ transform: rotateX(0deg) translateY(0px); width: 100%;}

.qlink-container li ul {float: left; left: 0; opacity: 0; position: absolute; top: 35px; visibility: hidden; z-index: 3; -webkit-transition: all .25s ease; -moz-transition: all .25s ease; -ms-transition: all .25s ease; -o-transition: all .25s ease; transition: all .25s ease; width:220px;}

.qlink-container li ul li { float: none; width: 100%; background-color: #f2f2f2;}
.qlink-container li:hover ul { opacity: 1; top: 55px; visibility: visible; padding-left: 0px; text-align: center; background-color: #f2f2f2; box-shadow: 5px 1px 15px 5px rgba(0,0,0,0), 9px 5px 15px 3px rgba(0,0,0,0.19);}

.qlink-wrapper li:hover {background: #000;}

.qlink-wrapper .qlink-sub-menu li a { color: #000; font-weight: normal; text-transform: none; padding: 20px 10px; line-height: 1.2;}
.qlink-wrapper .qlink-sub-menu li a:hover {color: #fff;}

.qlink-main-menu:after { content: '\203A'; margin-left: 5px; position: absolute; top: 27%; right: 0; padding-right: 20px;}
.qlink-main-menu:hover::after { transform: rotate(90deg); display: inline-block; transition: all .25s ease; padding-top: 20px;}

.contact-box::before  {animation: pulse-blue 3s infinite;}

@keyframes pulse-blue {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(52, 172, 224, 0.7);
  }
  
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(52, 172, 224, 0);
  }
  
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(52, 172, 224, 0);
  }
}

/*ASSEST OWNER INTERACTIVE MENU
================================================== */
.ao-wrapper {margin: 0 auto; width: 100%;}
.ao-container {list-style: none; margin: 0; padding: 0;}

.ao-info {padding:20px;}
.ao-info ul {padding: 0px; margin-left: 20px;}
.ao-info ul li {margin: 0px; box-shadow: none; list-style: disc; font-size: .889rem; line-height: 1.266rem; border: 0px;}

.ao-flex li:hover {transition: ease-in .3s; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; -ms-transform: scale(1.05); -webkit-transform: scale(1.05); transform: scale(1.05);}
.ao-flex .module-m:hover {box-shadow: none; -ms-transform: none; -webkit-transform: none; transform: none;}
.ao-flex .module-m {pointer-events: none;}
.ao-flex {display: flex; flex-wrap: wrap; margin: 0 -10px;}
.ao-flex li {flex: 1 1 200px; margin: 10px;}
li .ao-info ul li:hover { box-shadow: none; -ms-transform: none; -webkit-transform: none; transform: none;}
li.module-m h2 {background-color: #dbdbdb; color: #0050a0; text-align:center;}
.ao-container h2 {background-color: #0050a0; margin: 0; padding: 10px; color: #fff; text-align:center;}
.ao-container h2 span {background: #fff; border-radius: 100px; color: #0050a0; border: 2px solid #0050a0; text-align: center; display: inline-flex; width: 50px; height: 50px; vertical-align: middle; justify-content: center; align-items: center;}
.ao-container li {list-style-type: none; background-color: #fff; color: #000; flex: 1 1 190px; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; border: 2px solid #0050a0; transition: ease-out .2s;}

.ao-flex.ao-container li:hover h2 {background-color: orange; color: #0050a0;}
.ao-container p {padding: 10px;}
.ao-container li a:active, .ao-container li a:hover {text-decoration: none;}

/*BESPOKE 4 COL FLEX BOX
================================================== */

.pri-flex-container {display: flex; flex-wrap: wrap; justify-content: space-between;}
.pri-flex-item {width: calc(25% - 10px); margin-bottom: 20px;}
.pri-flex-item .subSleeve h3 a, .pri-flex-item .subSleeve h2 a, .pri-flex-item .subSleeve h3, .pri-flex-item .subSleeve h2 {font-size: 1.266rem; line-height: 1.602rem;}
.pri-flex-item .intro {font-size: .889rem; line-height: 1.266rem;}
.pri-flex-item .picture {overflow: hidden; position: relative; display: block; margin-bottom: 14px; border: 1px solid #fff;}
.pri-flex-item .picture a {transition: .3s ease; display: block; overflow: hidden; position: relative;}
.pri-flex-item .picture a:hover {-ms-transform: scale(1.3); -webkit-transform: scale(1.3); transform: scale(1.3);}



/*FLOATING MENU
================================================== */
/*_____master head forward*/
div.mastNavBar {z-index:5;}

.landing-menu-container{position: fixed; right: 0; top: 0; height: 100%; display: flex; align-items: start; background-color: var(--accent-blue-dark-1); z-index: 4; cursor: pointer;}
.landing-menu-container .landing-menu-wrapper{ list-style: none; margin: 0; width: 0px; padding: 0; overflow: hidden; transition: all 0.3s ease-in-out;}
.landing-menu-container li{ font-weight: bold; line-height:1.2; padding: 10px; color: #fff; opacity: 0; overflow: hidden; transition: all 0.3s ease-in-out;}
.landing-menu-container li a{color: #fff; text-decoration: none; max-height: 100px; display: inline-flex;}
.landing-menu-container .landing-btn{ position: fixed; right: 92px; bottom: 13px; /*transition: all 0.3s ease-in-out;*/ background-color: var(--secondary-color); width: 65px; height: 65px; border-radius: 50%; display: flex; justify-content: center; align-items: center; border: 4px solid var(--secondary-color); background-clip: content-box; padding: 3px;transform: translateY(20px); transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; opacity: 0;}

.landing-btn.show-btn {opacity: 1; transform: translateY(0);}

/*_____list icons*/
.landing-list-icon.fa-solid.fa-list {color: #fff; font-size: 29px; border-radius: 50%; border: 4px solid #fff; padding: 10px;}
/*_____text container*/
.landing-menu-container:hover .landing-menu-wrapper{ width: 250px; padding: 15px; transition: all 0.3s ease-in-out; margin-top: 200px; overflow: auto; max-height: 46vh;}
.landing-menu-container:hover .landing-btn{ opacity: 0; transition: all 0.3s ease-in-out;}
.landing-menu-container:hover .landing-menu-wrapper li{ opacity: 1; overflow: auto; transition: all 0.3s ease-in-out;}

/*_____custom scrollbar for menu*/
/*webkit*/
.landing-menu-wrapper::-webkit-scrollbar {width: 5px;}
.landing-menu-wrapper::-webkit-scrollbar-thumb {background-color: var(--primary-color);}
.landing-menu-wrapper::-webkit-scrollbar-track {background-color: var(--secondary-color);}

/* Firefox browser */
.landing-menu-wrapper {scrollbar-width: thin; scrollbar-color: var(--secondary-color) var(--accent-blue-dark-1);}
.landing-menu-wrapper::-moz-scrollbar-thumb {background-color: var(--secondary-color); border-radius: 10px;}

/* edge browser*/
.landing-menu-wrapper {-ms-overflow-style: none;}
.landing-menu-wrapper::-ms-scrollbar {width: 5px;}
.landing-menu-wrapper::-ms-thumb {background-color: var(--secondary-color); border-radius: 10px;}


.landing-anchor { padding: 0 0.35em; transition: color 0.5s; transition-timing-function: cubic-bezier(0.2,1,0.3,1); position: relative; display: inline-block!important;}
.landing-anchor::before { content: ''; position: absolute; z-index: -1; bottom: 0; left: 0; width: 100%; height: 100%; opacity: 0.3; transform: scale3d(0,1,1); transform-origin: 0% 50%; transition: transform 0.5s; transition-timing-function: cubic-bezier(0.2,1,0.3,1); background-color: #fff;}
.landing-anchor:hover::before, .landing-anchor:focus::before { transform: scale3d(1,1,1);}

/*VIDEO
================================================== */
/*_____Video thumbnail margin*/
.jsBrightTALKEmbedWrapper{margin-top: 1.3%;}

.grid .column .removeGap-top {margin-bottom: -42px;}
.removeGap-bottom{margin-top: -45px;}

.playback-component {margin-top: 20px;}
.playback-component {margin-top: 20px;}

.grid .spinVideo {background-color: #fff;}
.csspointerevents .grid .spinVideo .videoPreview-list.swiper-ready .thumbs .swiper-container::before {background-image: none;}
/*Video container*/
.grid .spinVideo.full-width-background.videoColour-1 .videoPreview-container, .grid .spinVideo.full-width-background.videoColour-2 .videoPreview-container, .grid .spinVideo.full-width-background.videoColour-3 .videoPreview-container, .grid .spinVideo.full-width-background.videoColour-4 .videoPreview-container, .grid .spinVideo.full-width-background.videoColour-5 .videoPreview-container, .grid .spinVideo.full-width-background.videoColour-6 .videoPreview-container {background-color: #fff; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;}
.grid .spinVideo.full-width-background.videoColour-5 .videoPreview-container{border: 1px solid #fff;}

.container > .inner-sleeve:not(#colwrapper) .grid .oneColumn .spinVideo.full-width-background.image-background.videoColour-1 .videoPreview-list .thumbs li a:not(.nowPlaying):hover, .container > .inner-sleeve:not(#colwrapper) .grid .oneColumn .spinVideo.full-width-background.image-background.videoColour-2 .videoPreview-list .thumbs li a:not(.nowPlaying):hover, .container > .inner-sleeve:not(#colwrapper) .grid .oneColumn .spinVideo.full-width-background.image-background.videoColour-3 .videoPreview-list .thumbs li a:not(.nowPlaying):hover, .container > .inner-sleeve:not(#colwrapper) .grid .oneColumn .spinVideo.full-width-background.image-background.videoColour-4 .videoPreview-list .thumbs li a:not(.nowPlaying):hover, .container > .inner-sleeve:not(#colwrapper) .grid .oneColumn .spinVideo.full-width-background.image-background.videoColour-5 .videoPreview-list .thumbs li a:not(.nowPlaying):hover, .container > .inner-sleeve:not(#colwrapper) .grid .oneColumn .spinVideo.full-width-background.image-background.videoColour-6 .videoPreview-list .thumbs li a:not(.nowPlaying):hover { background-color: rgb(0, 140, 200); text-decoration: none;}
.jsBrightTALKEmbedWrapper {border: 0px solid #000;}

.container > .inner-sleeve:not(#colwrapper) .grid .oneColumn .spinVideo.full-width-background.videoColour-1, .container > .inner-sleeve:not(#colwrapper) .grid .oneColumn .spinVideo.full-width-background.videoColour-2, .container > .inner-sleeve:not(#colwrapper) .grid .oneColumn .spinVideo.full-width-background.videoColour-3, .container > .inner-sleeve:not(#colwrapper) .grid .oneColumn .spinVideo.full-width-background.videoColour-4, .container > .inner-sleeve:not(#colwrapper) .grid .oneColumn .spinVideo.full-width-background.videoColour-5,
.container > .inner-sleeve:not(#colwrapper) .grid .oneColumn .spinVideo.full-width-background.videoColour-6 {padding-top: 45px; padding-bottom: 45px; margin-top: 45px;}

.grid .spinVideo.full-width-background.videoColour-1 .videoPreview-container .videoPreview-details::after, .grid .spinVideo.full-width-background.videoColour-2 .videoPreview-container .videoPreview-details::after, .grid .spinVideo.full-width-background.videoColour-3 .videoPreview-container .videoPreview-details::after, .grid .spinVideo.full-width-background.videoColour-4 .videoPreview-container .videoPreview-details::after, .grid .spinVideo.full-width-background.videoColour-5 .videoPreview-container .videoPreview-details::after, .grid .spinVideo.full-width-background.videoColour-6 .videoPreview-container .videoPreview-details::after {background-color: #fff;}

/*title headings*/
.container #top.area .spinVideo.hastitle.full-width-background.videoColour-1 .sleeve .sectionhead h2, .container #top.area .spinVideo.hastitle.full-width-background.videoColour-2 .sleeve .sectionhead h2, .container #top.area .spinVideo.hastitle.full-width-background.videoColour-3 .sleeve .sectionhead h2, .container #top.area .spinVideo.hastitle.full-width-background.videoColour-4 .sleeve .sectionhead h2, .container #top.area .spinVideo.hastitle.full-width-background.videoColour-5 .sleeve .sectionhead h2, .container #top.area .spinVideo.hastitle.full-width-background.videoColour-6 .sleeve .sectionhead h2 {border-bottom: 0px; font-size: 1.5625rem;}

.grid .spinVideo.videoColour-4 .sectionhead h2, .grid .spinVideo.videoColour-6 .sectionhead h2 {color: var(--primary-color);}

/*card headings*/
#top.area div.grid div.oneColumn div.columnContainer div.column.columnOne .spinBlock.spinVideo.colour1.hasnotitle.full-width-background.videoColour-1 ul.swiper-wrapper li.swiper-slide a h3, #top.area div.grid div.oneColumn div.columnContainer div.column.columnOne .spinBlock.spinVideo.colour1.hasnotitle.full-width-background.videoColour-2 ul.swiper-wrapper li.swiper-slide a h3, #top.area div.grid div.oneColumn div.columnContainer div.column.columnOne .spinBlock.spinVideo.colour1.hasnotitle.full-width-background.videoColour-3 ul.swiper-wrapper li.swiper-slide a h3, #top.area div.grid div.oneColumn div.columnContainer div.column.columnOne .spinBlock.spinVideo.colour1.hasnotitle.full-width-background.videoColour-4 ul.swiper-wrapper li.swiper-slide a h3, #top.area div.grid div.oneColumn div.columnContainer div.column.columnOne .spinBlock.spinVideo.colour1.hasnotitle.full-width-background.videoColour-5 ul.swiper-wrapper li.swiper-slide a h3, #top.area div.grid div.oneColumn div.columnContainer div.column.columnOne .spinBlock.spinVideo.colour1.hasnotitle.full-width-background.videoColour-6 ul.swiper-wrapper li.swiper-slide a h3, .grid .full-width-background.videoColour-1.spinVideo .videoPreview-list .thumbs li a h3, .grid .full-width-background.videoColour-2.spinVideo .videoPreview-list .thumbs li a h3, .grid .full-width-background.videoColour-3.spinVideo .videoPreview-list .thumbs li a h3, .grid .full-width-background.videoColour-4.spinVideo .videoPreview-list .thumbs li a h3, .grid .full-width-background.videoColour-5.spinVideo .videoPreview-list .thumbs li a h3, .grid .full-width-background.videoColour-4.spinVideo .videoPreview-list .thumbs li a h3, .grid .full-width-background.videoColour-6.spinVideo .videoPreview-list .thumbs li a h3 {color: var(--primary-color); padding: 10px; background: #fff; min-height: 130px; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;} 

.grid .spinVideo.full-width-background.videoColour-1 .videoPreview-list .thumbs, .grid .spinVideo.full-width-background.videoColour-2 .videoPreview-list .thumbs, .grid .spinVideo.full-width-background.videoColour-3 .videoPreview-list .thumbs, .grid .spinVideo.full-width-background.videoColour-4 .videoPreview-list .thumbs, .grid .spinVideo.full-width-background.videoColour-5 .videoPreview-list .thumbs, .grid .spinVideo.full-width-background.videoColour-6 .videoPreview-list .thumbs {max-height:none;}

.grid .spinVideo.videoColour-1 .videoPreview-list .thumbs li a .videoPreview-thumb, .grid .spinVideo.videoColour-2 .videoPreview-list .thumbs li a .videoPreview-thumb, .grid .spinVideo.videoColour-3 .videoPreview-list .thumbs li a .videoPreview-thumb, .grid .spinVideo.videoColour-4 .videoPreview-list .thumbs li a .videoPreview-thumb, .grid .spinVideo.videoColour-5 .videoPreview-list .thumbs li a .videoPreview-thumb, .grid .spinVideo.videoColour-6 .videoPreview-list .thumbs li a .videoPreview-thumb {margin-bottom: 0px;}

.grid .spinVideo.full-width-background.videoColour-1 .videoPreview-list, .grid .spinVideo.full-width-background.videoColour-2 .videoPreview-list, .grid .spinVideo.full-width-background.videoColour-3 .videoPreview-list, .grid .spinVideo.full-width-background.videoColour-4 .videoPreview-list, .grid .spinVideo.full-width-background.videoColour-5 .videoPreview-list, .grid .spinVideo.full-width-background.videoColour-6 .videoPreview-list {background: transparent;}
.grid .spinVideo.full-width-background.videoColour-1 .videoPreview-container .videoPreview-details .meta + p, .grid .spinVideo.full-width-background.videoColour-2 .videoPreview-container .videoPreview-details .meta + p, .grid .spinVideo.full-width-background.videoColour-3 .videoPreview-container .videoPreview-details .meta + p, .grid .spinVideo.full-width-background.videoColour-4 .videoPreview-container .videoPreview-details .meta + p, .grid .spinVideo.full-width-background.videoColour-5 .videoPreview-container .videoPreview-details .meta + p, .grid .spinVideo.full-width-background.videoColour-6 .videoPreview-container .videoPreview-details .meta + p {color: #6d6e71; font-weight: bold; color: #6c6c6c; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical;}
.grid .spinVideo.full-width-background.videoColour-1 .videoPreview-container .videoPreview-details .meta, .grid .spinVideo.full-width-background.videoColour-2 .videoPreview-container .videoPreview-details .meta, .grid .spinVideo.full-width-background.videoColour-3 .videoPreview-container .videoPreview-details .meta, .grid .spinVideo.full-width-background.videoColour-4 .videoPreview-container .videoPreview-details .meta, .grid .spinVideo.full-width-background.videoColour-5 .videoPreview-container .videoPreview-details .meta, .grid .spinVideo.full-width-background.videoColour-6 .videoPreview-container .videoPreview-details .meta {color: #6d6e71; font-weight: bold;}
div#top.area div.grid div.oneColumn div.columnContainer div.column.columnOne div.spinBlock.spinVideo.colour1.hasnotitle.full-width-background.videoColour-1 div.sleeve div.spinLayout div.videoPreview-container div.videoPreview-details h2 a, div#top.area div.grid div.oneColumn div.columnContainer div.column.columnOne div.spinBlock.spinVideo.colour1.hasnotitle.full-width-background.videoColour-2 div.sleeve div.spinLayout div.videoPreview-container div.videoPreview-details h2 a, div#top.area div.grid div.oneColumn div.columnContainer div.column.columnOne div.spinBlock.spinVideo.colour1.hasnotitle.full-width-background.videoColour-3 div.sleeve div.spinLayout div.videoPreview-container div.videoPreview-details h2 a, div#top.area div.grid div.oneColumn div.columnContainer div.column.columnOne div.spinBlock.spinVideo.colour1.hasnotitle.full-width-background.videoColour-4 div.sleeve div.spinLayout div.videoPreview-container div.videoPreview-details h2 a, div#top.area div.grid div.oneColumn div.columnContainer div.column.columnOne div.spinBlock.spinVideo.colour1.hasnotitle.full-width-background.videoColour-5 div.sleeve div.spinLayout div.videoPreview-container div.videoPreview-details h2 a, div#top.area div.grid div.oneColumn div.columnContainer div.column.columnOne div.spinBlock.spinVideo.colour1.hasnotitle.full-width-background.videoColour-6 div.sleeve div.spinLayout div.videoPreview-container div.videoPreview-details h2 a, .grid .spinVideo.videoColour-1 .videoPreview-container .videoPreview-details h2 a, .grid .spinVideo.videoColour-2 .videoPreview-container .videoPreview-details h2 a, .grid .spinVideo.videoColour-3 .videoPreview-container .videoPreview-details h2 a, .grid .spinVideo.videoColour-4 .videoPreview-container .videoPreview-details h2 a, .grid .spinVideo.videoColour-5 .videoPreview-container .videoPreview-details h2 a, .grid .spinVideo.videoColour-6 .videoPreview-container .videoPreview-details h2 a  {color: var(--primary-color); font-size: 1.802rem; line-height: 2.281rem;}
.full-width-background.videoColour-1 .videoPreview-container p, .full-width-background.videoColour-2 .videoPreview-container p, .full-width-background.videoColour-3 .videoPreview-container p, .full-width-background.videoColour-4 .videoPreview-container p, .full-width-background.videoColour-5 .videoPreview-container p, .full-width-background.videoColour-4 .videoPreview-container p, .full-width-background.videoColour-6 .videoPreview-container p,  div#top.area div.grid div.oneColumn div.columnContainer div.column.columnOne div.spinBlock.spinVideo.colour1.hasnotitle.full-width-background.videoColour-1 div.sleeve div.spinLayout div.videoPreview-container div.videoPreview-details .meta + p, div#top.area div.grid div.oneColumn div.columnContainer div.column.columnOne div.spinBlock.spinVideo.colour1.hasnotitle.full-width-background.videoColour-2 div.sleeve div.spinLayout div.videoPreview-container div.videoPreview-details .meta + p, div#top.area div.grid div.oneColumn div.columnContainer div.column.columnOne div.spinBlock.spinVideo.colour1.hasnotitle.full-width-background.videoColour-3 div.sleeve div.spinLayout div.videoPreview-container div.videoPreview-details .meta + p, div#top.area div.grid div.oneColumn div.columnContainer div.column.columnOne div.spinBlock.spinVideo.colour1.hasnotitle.full-width-background.videoColour-4 div.sleeve div.spinLayout div.videoPreview-container div.videoPreview-details .meta + p, div#top.area div.grid div.oneColumn div.columnContainer div.column.columnOne div.spinBlock.spinVideo.colour1.hasnotitle.full-width-background.videoColour-5 div.sleeve div.spinLayout div.videoPreview-container div.videoPreview-details .meta + p, div#top.area div.grid div.oneColumn div.columnContainer div.column.columnOne div.spinBlock.spinVideo.colour1.hasnotitle.full-width-background.videoColour-6 div.sleeve div.spinLayout div.videoPreview-container div.videoPreview-details .meta + p {color: #6c6c6c;overflow: hidden; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical;}
div#top.area div.grid div.oneColumn div.columnContainer div.column.columnOne div.spinBlock.spinVideo.colour1.hasnotitle.full-width-background.videoColour-1 div.sleeve div.spinLayout div.videoPreview-container div.videoPreview-details .meta .date, div#top.area div.grid div.oneColumn div.columnContainer div.column.columnOne div.spinBlock.spinVideo.colour1.hasnotitle.full-width-background.videoColour-2 div.sleeve div.spinLayout div.videoPreview-container div.videoPreview-details .meta .date, div#top.area div.grid div.oneColumn div.columnContainer div.column.columnOne div.spinBlock.spinVideo.colour1.hasnotitle.full-width-background.videoColour-3 div.sleeve div.spinLayout div.videoPreview-container div.videoPreview-details .meta .date, div#top.area div.grid div.oneColumn div.columnContainer div.column.columnOne div.spinBlock.spinVideo.colour1.hasnotitle.full-width-background.videoColour-4 div.sleeve div.spinLayout div.videoPreview-container div.videoPreview-details .meta .date, div#top.area div.grid div.oneColumn div.columnContainer div.column.columnOne div.spinBlock.spinVideo.colour1.hasnotitle.full-width-background.videoColour-5 div.sleeve div.spinLayout div.videoPreview-container div.videoPreview-details .meta .date, div#top.area div.grid div.oneColumn div.columnContainer div.column.columnOne div.spinBlock.spinVideo.colour1.hasnotitle.full-width-background.videoColour-6 div.sleeve div.spinLayout div.videoPreview-container div.videoPreview-details .meta .date {color: #6c6c6c;}


/*_____card image*/
.grid .spinVideo.videoColour-5 .videoPreview-list .thumbs .nowPlaying .videoPreview-thumb img, .grid .spinVideo.videoColour-5 li img {border: 1px solid #fff;}

/*_____background color */
.container>.inner-sleeve:not(#colwrapper) .grid .oneColumn .spinVideo.full-width-background.videoColour-1, .container>.inner-sleeve:not(#colwrapper) .grid .oneColumn .spinVideo.site-width-background.videoColour-1, .container>.inner-sleeve:not(#colwrapper) .grid .oneColumn div.full-width-background.gradient, .container>.inner-sleeve:not(#colwrapper) .grid .oneColumn div.site-width-background.gradient { background:var(--primary-color);
} 
/*_____card hover states */
.grid .spinVideo.videoColour-1 .videoPreview-list .thumbs li a:not(.nowPlaying):hover {background-color:var(--accent-orange);}
.grid .spinVideo.videoColour-2 .videoPreview-list .thumbs li a:not(.nowPlaying):hover {background-color:var(--accent-blue-light-1);}
.grid .spinVideo.videoColour-3 .videoPreview-list .thumbs li a:not(.nowPlaying):hover, .grid .spinVideo.videoColour-4 .videoPreview-list .thumbs li a:not(.nowPlaying):hover {background-color:var(--primary-color);}
.grid .spinVideo.videoColour-5 .videoPreview-list .thumbs li a:not(.nowPlaying):hover {background-color:var(--third-color);}
.grid .spinVideo.videoColour-3 .videoPreview-list .thumbs li a:not(.nowPlaying):hover, .grid .spinVideo.videoColour-6 .videoPreview-list .thumbs li a:not(.nowPlaying):hover {background-color:var(--primary-color);}

.container>.inner-sleeve:not(#colwrapper) .grid .oneColumn .spinVideo.full-width-background.videoColour-2, .container>.inner-sleeve:not(#colwrapper) .grid .oneColumn .spinVideo.site-width-background.videoColour-2, .container>.inner-sleeve:not(#colwrapper) .grid .oneColumn div.full-width-background.gradient, .container>.inner-sleeve:not(#colwrapper) .grid .oneColumn div.site-width-background.gradient { background:var(--secondary-color);
} 

.container>.inner-sleeve:not(#colwrapper) .grid .oneColumn .spinVideo.full-width-background.videoColour-3, .container>.inner-sleeve:not(#colwrapper) .grid .oneColumn .spinVideo.site-width-background.videoColour-3, .container>.inner-sleeve:not(#colwrapper) .grid .oneColumn div.full-width-background.gradient, .container>.inner-sleeve:not(#colwrapper) .grid .oneColumn div.site-width-background.gradient { background:var(--third-color);
} 

.container>.inner-sleeve:not(#colwrapper) .grid .oneColumn .spinVideo.full-width-background.videoColour-4, .container>.inner-sleeve:not(#colwrapper) .grid .oneColumn .spinVideo.site-width-background.videoColour-4, .container>.inner-sleeve:not(#colwrapper) .grid .oneColumn div.full-width-background.gradient, .container>.inner-sleeve:not(#colwrapper) .grid .oneColumn div.site-width-background.gradient { background:var(--accent-grey-light-1);
} 

.container>.inner-sleeve:not(#colwrapper) .grid .oneColumn .spinVideo.full-width-background.videoColour-5, .container>.inner-sleeve:not(#colwrapper) .grid .oneColumn .spinVideo.site-width-background.videoColour-5, .container>.inner-sleeve:not(#colwrapper) .grid .oneColumn div.full-width-background.gradient, .container>.inner-sleeve:not(#colwrapper) .grid .oneColumn div.site-width-background.gradient { background:var(--accent-blue-dark-1);
}

.container>.inner-sleeve:not(#colwrapper) .grid .oneColumn .spinVideo.full-width-background.videoColour-6, .container>.inner-sleeve:not(#colwrapper) .grid .oneColumn .spinVideo.site-width-background.videoColour-6, .container>.inner-sleeve:not(#colwrapper) .grid .oneColumn div.full-width-background.gradient, .container>.inner-sleeve:not(#colwrapper) .grid .oneColumn div.site-width-background.gradient { background:var(--accent-blue-pale);
} 

.container > .inner-sleeve:not(#colwrapper) .grid .oneColumn .spinVideo.full-width-background.videoColour-1 .sleeve, .container > .inner-sleeve:not(#colwrapper) .grid .oneColumn .spinVideo.full-width-background.videoColour-2 .sleeve, .container > .inner-sleeve:not(#colwrapper) .grid .oneColumn .spinVideo.full-width-background.videoColour-3 .sleeve, .container > .inner-sleeve:not(#colwrapper) .grid .oneColumn .spinVideo.full-width-background.videoColour-4 .sleeve,
.container > .inner-sleeve:not(#colwrapper) .grid .oneColumn .spinVideo.full-width-background.videoColour-5 .sleeve,
.container > .inner-sleeve:not(#colwrapper) .grid .oneColumn .spinVideo.full-width-background.videoColour-6 .sleeve {padding: 50px 35px;}


/*PROMO BOXES
================================================== */

/*___2 coloum full width box */
.grid .spinLayout {border-bottom: 0px solid #fff;}

/*SPACERS
================================================== */
.spacer-bottom-45{padding-bottom:45px; margin-bottom: -42px;}
.spacer-bottom-100{padding-bottom:100px;}

.spacer-top-10{padding-top:10px;}
.spacer-top-25{padding-top:25px;}
.spacer-top-45{padding-top:45px;}
.spacer-top-75{padding-top:75px;}
.spacer-top-100{padding-top:100px;}

/*BUTTONS
================================================== */

.more-btn-arrow-right, .more-btn-arrow, .pri-btn-arrow, .pri-btn-arrow-right, .pri-btn-back, .pri-btn-download, .pri-btn-mail, .pri-btn-pdf, .pri-btn-word, .pri-btn-excel, .pri-btn-download-right, .pri-btn-pdf-right, .pri-btn-word-right, .pri-btn-excel-right {position:relative; padding-right: 32px; margin-bottom: 10px; padding-top: 10px; padding-bottom: 11px;}
.more-btn-arrow-right, .pri-btn-arrow-right, .pri-btn-download-right, .pri-btn-mail-right, .pri-btn-pdf-right, .pri-btn-word-right, .pri-btn-excel-right {float: right;}

.pri-btn-back a, .pri-btn-arrow a, .pri-btn-arrow-right a, .more-btn-arrow a, .more-btn-arrow-right a, .pri-btn-download a, .pri-btn-pdf a, .pri-btn-mail a, .pri-btn-word a, .pri-btn-excel a, .pri-btn-download-right a, .pri-btn-mail-right a, .pri-btn-pdf-right a, .pri-btn-word-right a, .pri-btn-excel-right a, .pri-btn a {color: #fff; font-weight: bold; text-transform: initial; margin-bottom: 43px; text-decoration: none;}

.pri-btn{ position: relative; margin-bottom: 10px; padding-top: 10px; padding-bottom: 11px;}

/*___back buttons */
div .pri-btn-back {padding-right: 16px;}
.pri-btn-back a {padding-left: 15px;}
div .pri-btn-back::before  { left: 18px; transform: translateY(-50%) rotate(225deg);}
div .pri-btn-back::after { left: 11px; transform: translateY(-50%) rotate(225deg);}
div .pri-btn-back:hover::before { color: #fff; left: 16px;}
div .pri-btn-back:hover::after { color: #fff; left: 9px;}

/*___download buttons */
.pri-btn-download::before, .pri-btn-mail::before, .pri-btn-pdf::before, .pri-btn-word::before, .pri-btn-excel::before, .pri-btn-download-right::before, .pri-btn-mail-right::before, .pri-btn-pdf-right::before, .pri-btn-word-right::before, .pri-btn-excel-right::before { position: absolute; right: 0; font-family: fontawesome; padding-right: 10px; font-size: 20px; top: 7px;}

.pri-btn-download::before, .pri-btn-download-right::before{content: "\f56d";}
.pri-btn-pdf::before, .pri-btn-pdf-right::before{content: "\f1c1";}
.pri-btn-word::before, .pri-btn-word-right::before{content: "\f1c2";}
.pri-btn-excel::before, .pri-btn-excel-right::before{content: "\f1c3";}
.pri-btn-mail::before, .pri-btn-mail-right::before {content: "\f0e0"; right: -3px;}

/*___more buttons scroller and grid */
.spin2scroller .more a, .more-btn a, .grid .more a {color: #fff; text-transform: lowercase; font-weight: bold; text-decoration: none; margin-bottom: 43px;}

.spin2scroller .more, .grid .more {border-bottom: 0; background: var(--secondary-color); display: inline-block; padding: 12px 12px 10px 12px; margin-top: 20px; position: relative; padding-right: 27px;}
.spin2scroller .tile-border-white .more, .grid .tile-border-white .more {border: 1px solid #fff;}

.spin2scroller .more:hover, .grid .more:hover {background: #000;}

.pri-btn-back::before, .pri-btn-back::after, .spin2scroller .more::before, .grid .more::before, .spin2scroller .more::after, .grid .more::after, .more-btn-arrow::before, .more-btn-arrow::after, .more-btn-arrow-right::before, .more-btn-arrow-right::after, .pri-btn-arrow::before, .pri-btn-arrow::after, .pri-btn-arrow-right::before, .pri-btn-arrow-right::after { border-style: solid; border-width: 0.20em 0.20em 0 0; content: ''; display: inline-block; height: 0.50em; position: absolute; top: 53%; transform: translateY(-50%) rotate(45deg); vertical-align: top; width: 0.50em; color: #fff;}

.pri-btn-arrow::before, .pri-btn-arrow-right::before, .spin2scroller .more::before, .grid .more::before, .more-btn-arrow::before, .more-btn-arrow-right::before { left: auto; right: 18px;}
.pri-btn-arrow::after, .pri-btn-arrow-right::after, .spin2scroller .more::after, .grid .more::after, .more-btn-arrow::after, .more-btn-arrow-right::after { left: auto; right: 11px;}

.pri-btn-arrow:hover::before, .pri-btn-arrow-right:hover::before, .spin2scroller .more:hover::before, .grid .more:hover::before, .more-btn-arrow:hover::before, .more-btn-arrow-right:hover::before { color: #fff; right: 16px;}
.pri-btn-arrow:hover::after, .pri-btn-arrow-right:hover::after, .spin2scroller .more:hover::after, .grid .more:hover::after, .more-btn-arrow:hover::after, .more-btn-arrow-right:hover::after { color: #fff; right: 9px;}

/*___buttons for factfiles */
.factfile.ff-lightblue button a:link, .factfile.ff-lightblue button a:visited, .factfile.ff-lightblue2 button a:link, .factfile.ff-lightblue2 button a:visited {color: #fff; text-decoration: none;}

/*___factfiles boxes */
.ff-white-1 {background-color: #fff !important; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;}

/*FONT SIZES
================================================== */
/*__for Intro text*/
.landing-intro-text p.landing-intro, .landing-intro-text H2, .landing-intro-text p.main { font-size: 1.802rem; line-height: 1.2; font-weight:500; color: var(--primary-color);}
.landing-intro-text p { font-size: 1.125rem; color: var(--accent-grey-dark-1); line-height: 1.502rem;}
.landing-intro-text p strong {color: var(--accent-grey-dark-1);}
.landing-intro-text ol li, .landing-intro-text ul li { font-size: 1.125rem; color: #6d6e71; line-height: 1.502rem;}

/*__for headings*/
.landing-lead h2 {font-size: 1.802rem; line-height: 1.2;}
h2.lp-title-main {padding-top: 45px; text-align: center;}
h2.lp-title-main-colour2 {padding-top: 45px; text-align: center; color:#fff;}


/*___Section head titles */
.grid .sectionhead h2 {text-transform: initial; color: var(--primary-color); margin-bottom: 0px; display: inline-block; border-bottom: 0px solid var(--primary-color); padding-bottom: 10px;}
.grid .sectionhead {margin-bottom: 11px;}
/*___Section head titles for 3 box lists */
.spinLayout.thumb.onecol.left.item-first.item-last {padding-top: 40px; margin-bottom: -40px;}
.grid .tab-list .sectionhead {margin-bottom: 30px;}
/*___Section head title links */
.grid .tab-list .sectionhead h2 a, .grid .spin2scroller .scrollHead .sectionhead h2 a {padding: 0px 10px; color: var(--primary-color); position: relative; z-index: 2;}
.grid .tab-list .sectionhead h2 a::before, .grid .tab-list .sectionhead h2 a::after, .grid .spin2scroller .scrollHead .sectionhead h2 a::before, .grid .spin2scroller .scrollHead .sectionhead h2 a::after { border-style: solid; border-width: 0.12em 0.12em 0 0; content: ''; display: inline-block; height: 0.50em; position: absolute; top: 50%; transform: translateY(-50%) rotate(45deg); vertical-align: top; width: 0.50em; color: var(--primary-color);}

.grid .tab-list .sectionhead h2 a::before, .grid .spin2scroller .scrollHead .sectionhead h2 a::before { left: auto; right: 0px;}
.grid .tab-list .sectionhead h2 a::after, .grid .spin2scroller .scrollHead .sectionhead h2 a::after  { left: auto; right: -7px;}

.grid .tab-list .sectionhead h2 a:hover::before, .grid .spin2scroller .scrollHead .sectionhead h2 a:hover::before { color: #222; right: -2px;}
.grid .tab-list .sectionhead h2 a:hover::after, .grid .spin2scroller .scrollHead .sectionhead h2 a:hover::after { color: #222; right: -9px;}

/*___Section lists line colours */
.grid .tab-list-line-blue .spinLayout.list ul li {border-top: 1px solid #0050a0;}
.grid .tab-list-line-blue .spinLayout.list ul li:first-child {border-top: 0 none;}


/*___Section head title links column 2 */
.grid .columnTwo .tab-list .sectionhead h2 a::before, .grid .spin2scroller .scrollHead .sectionhead h2 a::before { left: auto;}
.grid .columnTwo .tab-list .sectionhead h2 a::after, .grid .spin2scroller .scrollHead .sectionhead h2 a::after { left: auto;}

.grid .columnTwo .tab-list .sectionhead h2 a:hover::before, .grid .spin2scroller .scrollHead .sectionhead h2 a:hover::before { color: #222;}
.grid .columnTwo .tab-list .sectionhead h2 a:hover::after, .grid .spin2scroller .scrollHead .sectionhead h2 a:hover::after { color: #222;}

.grid .tab-list .sectionhead h2 a:hover, .grid .spin2scroller .scrollHead .sectionhead h2 a:hover {color: #222; text-decoration: none;}
.grid .tab-list .sectionhead h2 a::after, .grid .spin2scroller .scrollHead .sectionhead h2 a::after, .i-arrow-off { background-position: unset;}

/*___tab list more links */
.grid .tab-list .more {border-bottom: 0px solid #f0f2f2; text-transform: inherit; margin-top: -20px;}
.grid .tab-list .more a {color: #fff; padding: 10px;}
.grid .tab-list .more a:active, .grid .tab-list .more a:hover {background: #000; text-decoration: none;}

/*___coloum list boxes */
.col-list .list ul li h2 a {background: #fff;padding: 10px; line-height: 1.2;}
.col-list .list ul li h2 a {background: #fff; padding: 20px; line-height: 1.2;  width: 100%; height: 60px; display: flex; align-items: center; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;}
.col-list .list ul li h2 a:hover { background: var(--primary-color); color: #fff; text-decoration: none;}
.grid .col-list .spinLayout.list ul li {border-top: 0px solid #f0f2f2;}
.grid .col-list .spinLayout.list ul {padding-bottom: 40px;}
#top .grid .oneColumn .full-width-background.bg-1.col-list .sleeve div.sectionhead h2{color:#fff; background: var(--primary-color);}
#top .grid .oneColumn .full-width-background.bg-2.col-list .sleeve div.sectionhead h2{color:#fff; background: var(--secondary-color);}
#top .grid .oneColumn .full-width-background.bg-3.col-list .sleeve div.sectionhead h2{color:#fff; background: var(--third-color);}
#top .grid .oneColumn .full-width-background.bg-4.col-list .sleeve div.sectionhead h2{color:var(--primary-color); background: #e6e7e8;}
#top .grid .oneColumn .full-width-background.bg-5.col-list .sleeve div.sectionhead h2{color:var(--primary-color); border-bottom: 0px; background: #e6eef9; margin-bottom: 0px;}

#top .grid .oneColumn .full-width-background.bg-1.col-list .sleeve div.sectionhead h2, #top .grid .oneColumn .full-width-background.bg-2.col-list .sleeve div.sectionhead h2, #top .grid .oneColumn .full-width-background.bg-3.col-list .sleeve div.sectionhead h2, #top .grid .oneColumn .full-width-background.bg-4.col-list .sleeve div.sectionhead h2, #top .grid .oneColumn .full-width-background.bg-5.col-list .sleeve div.sectionhead h2{border-bottom: 0px;  margin-bottom: 0px; font-size: 1.125rem; line-height: 1.266rem;} 

/*___coloum thumbnail on twoColumns */
#top .grid .oneColumn .full-width-background.bg-1.col-list .sleeve div.sectionhead, #top .grid .oneColumn .full-width-background.bg-2.col-list .sleeve div.sectionhead, #top .grid .oneColumn .full-width-background.bg-3.col-list .sleeve div.sectionhead, #top .grid .oneColumn .full-width-background.bg-4.col-list .sleeve div.sectionhead, #top .grid .oneColumn .full-width-background.bg-5.col-list .sleeve div.sectionhead {text-align:left; font-size: 1.125rem;
line-height: 1.266rem;}

.grid .column-thumbnail .spinLayout .sleeve {padding-bottom: 0px; background: #fff; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;}
#top .grid .twoColumns .column-thumbnail .spinLayout.thumb.onecol .sleeve h2 {margin-top: 10px;margin-right: 10px;}

/*___2 coloum half width*/
.grid .col-2-half-width .spinLayout .sleeve {box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; padding-bottom: 0px;}
.grid .col-2-half-width .spinLayout .sleeve .subSleeve {padding: 15px 13px 0px 0px;}

/*SCROLLER
================================================== */
/*__for layout scroller*/
.spin2scroller .thumbs li .heading {font-size: 1.125rem; line-height: 1.2;}
.spin2scroller .thumbs li .sleeve .sleeve-wrapper {height: 100%; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; border: 1px solid #dcdcdc; border-bottom-width: 2px; background: #fff;}
.spin2scroller .sleeve-inner-text {padding: 10px;}
.spin2scroller {border-bottom: 0px solid #f0f2f2;}
.spin2scroller .scrollHead .scrollerControls {position: relative; z-index: 2;}
/*__scroller title*/
.spin2scroller .scrollHead .sectionhead h2 {position: relative; bottom: 0px; z-index: 2;}
.spin2scroller .scrollHead .sectionhead {margin-bottom: 0px;}

.spin2scroller .scrollerControls li { border: 1px solid #fff; border-radius: 50px;}

/*Items to hit bottom of footer*/
.full-width-background.bottom {margin-bottom: 0px;}

/*OPEN TO JOIN TITLES
================================================== */
.openjoin-title .picture, .upcoming-title .picture, .ongoing-title .picture {position: relative;}

.openjoin-title .picture::before {content: "Open to Join"; background-color: rgba(0, 0, 0, .9); position: absolute; z-index: 2; padding: 10px; font-weight: bold; color: #fff; bottom: 0;}

.upcoming-title .picture::before { content: "Upcoming"; background-color: rgba(0, 0, 0, .9); position: absolute; z-index: 2; padding: 10px; font-weight: bold; color: #fff; bottom: 0;}

.ongoing-title .picture::before { content: "Ongoing"; background-color: rgba(0, 0, 0, .9); position: absolute; z-index: 2; padding: 10px; font-weight: bold; color: #fff; bottom: 0;}

/*HERO CAROUSEL
================================================== */
.grid .hero-carousel.bg-brand-colour4 .swiper-wrapper {background-color: var(--primary-color);}
.grid .hero-carousel.bg-brand-colour4 .swiper-container {background-color: var(--primary-color);}
.grid .hero-carousel.bg-brand-colour5 .swiper-wrapper {background-color: var(--accent-blue-dark-1);}
.grid .hero-carousel.bg-brand-colour5 .swiper-container {background-color: var(--accent-blue-dark-1);}
.grid .hero-carousel.bg-brand-colour6 .swiper-wrapper {background-color: var(--accent-grey-dark-1);}
.grid .hero-carousel.bg-brand-colour6 .swiper-container {background-color: var(--accent-grey-dark-1);}
.grid .hero-carousel.bg-brand-colour7 .swiper-wrapper {background-color: var(--accent-blue-pale);}
.grid .hero-carousel.bg-brand-colour7 .swiper-container {background-color: var(--accent-blue-pale);}
/*----buttons*/
.picCarousel .carouselPaging .previous, .picCarousel .carouselPaging .next {width: 53px; height: 53px; border: 2px solid #fff; border-radius: 50px; margin: 0px 5px; z-index: 1;}


/*HERO BLOCK
================================================== */
.hero-spin.animated .hero-spin__main .hero-spin__main__content {padding: 40px 30px 20px 30px;}
.spinBlock .hero-spin.animated .hero-spin__main__content > div{text-shadow: none;}

.grid .spinBlock.colour2 .hero-spin .hero-spin__main__content { background: #e6e7e8; color: #000;}
.spinBlock.colour1 .hero-spin__main__content { background: #fff; color: #000;}

.spinBlock.colour1 .hero-spin.animated .hero-spin__main__content p.intro, .spinBlock.colour2 .hero-spin.animated .hero-spin__main__content p.intro {font-size: 1.125rem; line-height: 1.602rem; /*font-weight:bold;*/ }

.spinBlock.colour1 .hero-spin.animated .hero-spin__main__content h2 a, .spinBlock.colour1 .hero-spin.animated .hero-spin__main__content h2 a {color: var(--secondary-color);}

/*hero block hide main*/
.hb-hide-main .hero-spin.animated .hero-spin__main__content {display: none;}
.hb-hide-main .hero-spin .hero-spin__extra {padding-top: 0px;}
.hb-hide-main .hero-spin__extra__list li {box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;}

.hb-main .hero-spin, .hb-hide-main .hero-spin {z-index: 0;}
.hb-main .hero-spin__main__content { background: #fff; color: #000;}

.spinBlock.colour2.hb-main .hero-spin__main__content { background: #dbdbdb; color: #000;}
.spinBlock.colour2.hb-main .hero-spin__main__content .intro, .hb-main .hero-spin__main__content .intro, .hero-spin__main__content div p {text-shadow: none;}
.spinBlock.colour2.hb-main .hero-spin .hero-spin__main__content h2 a, .hb-main .hero-spin__main__content h2 a {color: var(--secondary-color); text-shadow: none;}

/*----hero block hide main button*/
.hb-main .hero-spin .hero-spin__main__content .readmore, .grid .hero-spin .hero-spin__main__content .readmore {border: 0; border-radius: 0; font-size: .889rem; text-transform: inherit; text-align: center; color: #fff; background-color: var(--secondary-color); transition: background-color .25s ease-in; text-shadow: none; margin-bottom: 20px; cursor: pointer; display: inline-block; padding: 12px 16px; box-shadow: none; font-weight: bold;}

.hb-main .hero-spin .hero-spin__main__content .readmore:hover, .hb-main .hero-spin .hero-spin__main__content .readmore:focus, .grid .hero-spin .hero-spin__main__content .readmore:hover, .grid .hero-spin .hero-spin__main__content .readmore:focus {background: #000;}

/*----Navigation standard white border*/
#top .grid .oneColumn .spinBlock.col-1-full-width-border .spinLayout.half.onecol .picture {border: 1px solid #fff;}


/*MODULE MENU GRID
================================================== */
.ao-wrapper {margin: 0 auto; width: 100%;}
.ao-container {list-style: none; margin: 0; padding: 0;}

.ao-info {padding:20px;}
.ao-info ul {padding: 0px; margin-left: 20px;}
.ao-info ul li {margin: 0px; box-shadow: none; list-style: disc; font-size: .889rem; line-height: 1.266rem; border: 0px;}

.ao-flex li:hover {transition: ease-in .3s; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; -ms-transform: scale(1.05); -webkit-transform: scale(1.05); transform: scale(1.05);}
.ao-flex .module-m:hover {box-shadow: none; -ms-transform: none; -webkit-transform: none; transform: none;}
.ao-flex .module-m {pointer-events: none;}
.ao-flex {display: flex; flex-wrap: wrap; margin: 0 -10px;}
.ao-flex li {flex: 1 1 200px; margin: 10px;}
li .ao-info ul li:hover { box-shadow: none; -ms-transform: none; -webkit-transform: none; transform: none;}
li.module-m h2 {background-color: #dbdbdb; color: var(--primary-color); text-align:center;}
.ao-container h2 {background-color: var(--primary-color); margin: 0; padding: 10px; color: #fff; text-align:center;}
.ao-container h2 span {background: #fff; border-radius: 100px; color: var(--primary-color); border: 2px solid var(--primary-color); text-align: center; display: inline-flex; width: 50px; height: 50px; vertical-align: middle; justify-content: center; align-items: center;}
.ao-container li {list-style-type: none; background-color: #fff; color: #000; flex: 1 1 190px; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; border: 2px solid var(--primary-color); transition: ease-out .2s;}

.ao-flex.ao-container li:hover h2 {background-color: var(--accent-orange); color: var(--primary-color);}
.ao-container p {padding: 10px;}
.ao-container li a:active, .ao-container li a:hover {text-decoration: none;}

/*TAB BAR
================================================== */
.tabcontent .sectionhead h2 {text-align: center;}
.tablinks.active::after {content: "";}
.tab {overflow: hidden; text-align: center; text-align: center; margin-bottom: -43px; position: relative; z-index: 3;}
.tab button {background-color: inherit; border: none; outline: none; cursor: pointer; padding: 14px 16px; transition: 0.3s; background-color: #e0f1fe; text-transform: none; padding: 12px 34px; font-size: 1.125rem; line-height: 1.266rem; color: #000; margin-top: 20px;}

.grid .gridLayout ul li {box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;}

.tab button:hover { background-color: #ddd; color: #000;}
.tab button.active {background-color: var(--primary-color); color: #fff;}

.tabframe{height:0px; overflow:hidden; margin: -42px;}

.tabcontent {padding: 6px 12px; -webkit-animation: fadeEffect 1s; animation: fadeEffect 1s;}

/*LISTS
================================================== */
.tab-list .list ul li h2 a {background: #fff; padding: 20px; line-height: 1.2; width: 100%; height: 80px; display: flex; align-items: center; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;border: 1px solid transparent;}

.grid .tab-list .spinLayout.list ul li {border-top: 0px solid #f0f2f2; padding-bottom: 8px;}
.grid .tab-list .spinLayout.list ul {padding-bottom: 40px;}
.grid .tab-list .spinLayout .sleeve {background: #fff; padding: 20px; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; padding: 10px;}

.tab-list .list ul li h2 a:hover { background: var(--primary-color); color: #fff; text-decoration: none; border: 1px solid #fff;}

@-webkit-keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}
/*----For all events*/
.all-active{ display:block;}

/*----scroller tabs*/
.spin2scroller.scroller-bg .thumbs li .heading, .spin2scroller.tab-scroller .thumbs li .heading {line-height: 1.2; font-size: 1.125rem; padding: 10px;}
.tab-scroller.spin2scroller { border-bottom: 0px solid #fff;}
.spin2scroller.tab-scroller .scrollHead .sectionhead { text-align: center;}
.grid .tab-scroller .sectionhead h2 {border-bottom: 1px solid #dcdcdc; margin-top: 20px;}
#top.area div.grid .columnOne .scroller-bg.full-width-background .sleeve-wrapper, .spin2scroller.tab-scroller .thumbs li .sleeve .sleeve-wrapper {border: 1px solid #dcdcdc; border-bottom-width: 2px;}

/*----case study title*/
#top.area .grid .oneColumn .columnContainer .full-width-background.tab-list .sleeve .sectionhead h2,
#top.area .grid .oneColumn .columnContainer .full-width-background.tab-scroller .sleeve .sectionhead h2 {font-size: 1.802rem; line-height: 2.281rem; border-bottom: 0px solid #888; text-transform: inherit;}

/*THREE PART SERIES lists
================================================== */
.grid .thumblist-icon-number .sleeve div:nth-child(2n) h2 a:hover:before, .grid .thumblist-icon-number .sleeve div:nth-child(3n) h2 a:hover:before, .grid .thumblist-icon-number .sleeve div:nth-child(4n) h2 a:hover:before{background-color: #000; border-bottom: 10px solid #dbdbdb;}

.grid .thumblist-icon-number .sleeve div:nth-child(2n) h2 a::before { width: 65px; height: 65px; background-color: #008cc8; content: "1"; position: absolute; color: #fff; font-size: 30px; padding: 19px 25px; border-bottom: 10px solid orange; margin-left: -80px;}
.grid .thumblist-icon-number .sleeve div:nth-child(3n) h2 a::before { width: 65px; height: 65px; background-color: #008cc8; content: "2"; position: absolute; color: #fff; font-size: 30px; padding: 19px 22px; border-bottom: 10px solid orange; margin-left: -80px;}
.grid .thumblist-icon-number .sleeve div:nth-child(4n) h2 a::before { width: 65px; height: 65px; background-color: #008cc8; content: "3"; position: absolute; color: #fff; font-size: 30px; padding: 16px 22px; border-bottom: 10px solid orange; margin-left: -80px;}
.grid .thumblist-icon-number .sleeve div:nth-child(5n) h2 a::before { width: 65px; height: 65px; background-color: #008cc8; content: "4"; position: absolute; color: #fff; font-size: 30px; padding: 16px 22px; border-bottom: 10px solid orange; margin-left: -80px;}

.grid .thumblist-icon-number .spinLayout .subSleeve {padding-left: 80px;}
.grid .spinLayout {border-bottom: 0px solid #f0f2f2;}

.grid .tile-border-white-picture .spinLayout.full .picture, .grid .gridLayout.tile-border-white-picture ul li .picture {border: 1px solid #fff;}
.grid .tile-border-white-sleeve .spinLayout.full .sleeve {border: 1px solid #fff;}

.thumblist-icon-number .thumb.onecol {height: 90px;}

/*BACKGROUND COLORS
================================================== */

/*__Pri primary colors*/
.bg-1{background: var(--primary-color);}
.bg-2{background: var(--secondary-color);}
.bg-3{background: var(--third-color);}
/*__Pri grey color*/
.bg-4{background: var(--accent-grey-light-1);}
/*__Non Pri colors*/
.bg-5{background: var(--accent-blue-pale);}
.bg-6{background: var(--accent-grey-light-1);}

/*DIVIDER BOX DARK BLUE MODIFICATION
================================================== */
#top .grid .twoColumns .spinBlock.tile-border-white .spinLayout.half.onecol .picture, #top .grid .threeColumns .spinBlock.tile-border-white .spinLayout.full.onecol .picture {border: 1px solid #fff;}
.tile-border-white a:active, .tile-border-white a:hover {color: #fff; text-decoration: underline;}
 #top .grid .twoColumns .spinBlock.tile-border-white .spinLayout.half.onecol .intro, #top .grid .threeColumns .spinBlock.tile-border-white .spinLayout.full.onecol .intro {color: #fff;}
 
.tile-border-white a:link, .tile-border-white a:visited {color: var(--third-color);}
.gridLayout.tile-border-white a:link, .gridLayout.tile-border-white a:visited {color: var(--secondary-color);}
.tile-border-white .more a:link, .tile-border-white .more a:visited {color: #fff;}

.grid .gridLayout.tile-border-white ul li {border: 1px solid #fff;}

.grid .tile-border-white .spinLayout.twocol .sleeve {color: #fff;}
.grid .tile-border-white .spinLayout.twocol .sleeve .picture {border: 1px solid #fff;}
.grid .tile-border-white .sectionhead h2, .grid .tile-border-white-picture .sectionhead h2, .grid .tile-border-white-sleeve .sectionhead h2 {color: var(--accent-blue-pale);}

 
/*================================================== 
END DIVIDERS*/

/*ZOOM IMAGE
================================================== */
.grid .sleeve p.picture, .spin2scroller .thumbs li .picture {overflow: hidden; position: relative;}
.grid .sleeve .picture a {transition: .3s ease;}
.grid .sleeve .picture a:hover {-ms-transform: scale(1.3); -webkit-transform: scale(1.3); transform: scale(1.3);}

/*================================================== 
ZOOM IMAGE*/


/*MEDIA QUERY
================================================== */

/*___LARGE SCREEN*/

@media screen and (min-width: 1900px) {

}

@media screen and (min-width: 1600px) {
.bgimage-overlay {height: 500px;}
}

@media screen and (min-width: 1400px) {
/*BANNER 
================================================== */
.column #bgimage-landing {background-position: 0px -100px; margin-top: -166px;}
/*___ main title*/
.inner-sleeve #section_intro h1 {top: 80px;}

}

@media screen and (min-width: 1280px) {
/*HERO BLOCK
================================================== */
/*___title text 1 block */
.hero-spin .hero-spin__main__content h2 {font-size: 2.027rem; line-height: 2.281rem;}

}

@media screen and (min-width: 1180px){
.grid .hero-carousel.bg-brand-colour4 .swiper-box {background-color: var(--primary-color);}
.grid .hero-carousel.bg-brand-colour5 .swiper-box {background-color: var(--accent-blue-dark-1);}
.grid .hero-carousel.bg-brand-colour6 .swiper-box {background-color: var(--accent-grey-dark-1);}
.grid .hero-carousel.bg-brand-colour7 .swiper-box {background-color: var(--accent-blue-pale);}

}

/*___DESKTOP MODE */
@media (min-width: 1024px) {

/*SLEEVE FADED BACKGROUND  
================================================== */
.tile-text-overlay .spinLayout .sleeve {position:relative;}
.tile-text-overlay .spinLayout .subSleeve {position: absolute; bottom: 34px; left: 0; right: 0; padding: 50px 20px 20px; text-align: center; background: linear-gradient(180deg,transparent 0,/*#000*/ var(--accent-blue-dark-1) );}
.tile-text-overlay .subSleeve h2 a, .tile-text-overlay .spinLayout .meta {color: #fff;}

#top .grid .oneColumn .tile-text-overlay-small .spinLayout.full.twocol .sleeve h2 { font-size: 1.266rem;}
#top .grid .oneColumn .spinBlock.colour3.tile-text-overlay-small .spinLayout.full.twocol.hasPicture .subSleeve {bottom: 23px; padding: 50px 20px 20px;}

.grid .spinBlock.tile-text-overlay {margin-bottom: 15px;}


/*BANNER 
================================================== */
div#bgimage-landing{margin-top: -277px;}
div.bgimage-overlay {height: 400px;}
/*___ main title*/
#section_intro h1 {top: 45px;}

/*SMALL CAROUSEL
================================================== */
.picCarousel.carousel-small .caption {text-align: left; padding-right: 0px; padding-left: 0px;}
.picCarousel.carousel-small .caption {min-height: unset;}

#top .picCarousel.carousel-small .caption {background: #fff; padding:24px 10px 20px;max-height:105px;}
#top .picCarousel.carousel-small .thumbs {background: #fff;}
.picCarousel.carousel-small .thumbs li {border: 2px solid #0050a0; background-color: transparent;}
.picCarousel.carousel-small .thumbs .selected {border: 0 none; background-color: #0050a0;}

.picCarousel.carousel-small .caption{background-color: #fff;}
.picCarousel.carousel-small .caption .heading a {color: #008cc8;}
.picCarousel.carousel-small .thumbs {background-color: #fff;}
.picCarousel.carousel-small .swiper-container, .picCarousel.carousel-small .swiper-wrapper {background-color: #fff;}

/*HERO BLOCK
================================================== */
/*___light blue and grey Hero carousel caption*/
.flexbox #top .oneColumn .hero-carousel.bg-brand-colour6.hero-carousel-single .caption, .flexbox #top .oneColumn .hero-carousel.bg-brand-colour6.hero-carousel-multi .caption, .flexbox #top .oneColumn .hero-carousel.bg-brand-colour7.hero-carousel-single .caption, .flexbox #top .oneColumn .hero-carousel.bg-brand-colour7.hero-carousel-multi .caption {width: 500px;}

/*___ light blue and grey Hero carousel image*/
.hero-carousel.bg-brand-colour7 .display img, .hero-carousel.bg-brand-colour6 .display img {margin-left: 550px;}

/*----light blue text hero carousel*/
.picCarousel.bg-brand-colour7 .caption .heading a {color: var(--secondary-color); text-shadow: none;}
.grid .hero-carousel.bg-brand-colour7 .display .intro {text-shadow: none; color: #000;}
.hero-carousel.bg-brand-colour7 .caption .meta {text-shadow: none; color: #000;}

/*___two coloum full width box gradient color */
#foot .grid .twoColumns .spinBlock.colour3 .spinLayout.full.onecol.hasPicture .subSleeve, #top .grid .twoColumns .spinBlock.colour3 .spinLayout.full.onecol.hasPicture .subSleeve, #foot .grid .oneColumn .spinBlock.colour3 .spinLayout.full.twocol.hasPicture .subSleeve, #top .grid .oneColumn .spinBlock.colour3 .spinLayout.full.twocol.hasPicture .subSleeve {background: linear-gradient(180deg,transparent 0,var(--accent-blue-dark-1) );}


/*font sizes*/
/*___two coloum full width box */
#foot .grid .twoColumns .spinLayout.full.onecol .sleeve h2, #top .grid .twoColumns .spinLayout.full.onecol .sleeve h2 {font-size: 1.424rem;
line-height: 1.2;}
/*___One coloum full width box */
#top .grid .oneColumn .spinLayout.full.twocol .sleeve h2 {font-size: 1.424rem; line-height: 1.2;}

/*promo boxes*/
/*___1 coloum full width box navigation */
.grid .colour1.hasnotitle.col-1-full-width .sleeve .spinLayout.half.onecol.left.item-first.item-last.hasPicture div.sleeve{ background: #fff; padding-bottom: 0px; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;}
.grid .colour1.hasnotitle.col-1-full-width .sleeve .spinLayout.half.onecol.left.item-first.item-last.hasPicture div.sleeve .subSleeve {padding: 30px 20px 0px 20px;}
#top.area .grid .oneColumn .spinBlock.full-width-background.col-box-1 .subSleeve {text-align: left; padding: 80px 60px 0px 0px; background: transparent;}

/*___1 coloum full width box story crietara */
.grid .col-1-full-width .spinLayout div.sleeve{ background: #fff; padding-bottom: 0px; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;}
.grid .col-1-full-width .spinLayout div.sleeve .subSleeve {padding: 30px 20px 0px 20px;}
/*___1 coloum full width box story crietara grey shadow */
.grid .spinBlock.colour2.box-shadow-grey {box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;}

/*___1 coloum full width box navigation white border */
.grid .colour1.hasnotitle.col-1-full-width-border .sleeve .spinLayout.half.onecol.left.item-first.item-last.hasPicture div.sleeve .subSleeve {padding: 30px 20px 0px 20px;}
#top.area .grid .oneColumn .spinBlock.full-width-background.col-box-1 .subSleeve {text-align: left; padding: 80px 60px 0px 0px; background: transparent;}

/*___1 coloum full width box story crietara white border */
.grid .col-1-full-width-border .spinLayout div.sleeve{ background: #fff; padding-bottom: 0px; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;}
.grid .col-1-full-width-border .spinLayout div.sleeve .subSleeve {padding: 30px 20px 0px 20px;}
/*___1 coloum full width box story crietara grey shadow */
.grid .spinBlock.colour2.box-shadow-grey {box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;}

/*___1 coloum full width box navigation white border blue sleeve */
.grid .colour1.hasnotitle.col-1-full-width-border2 .sleeve .spinLayout.half.onecol.left.item-first.item-last.hasPicture div.sleeve{ background: var(--accent-blue-dark-1); padding-bottom: 0px; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; border: 1px solid #fff; color: #fff;}
.grid .colour1.hasnotitle.col-1-full-width-border2 .sleeve .spinLayout.half.onecol.left.item-first.item-last.hasPicture div.sleeve .subSleeve {padding: 30px 20px 0px 20px;}
#top.area .grid .oneColumn .spinBlock.full-width-background.col-box-1 .subSleeve {text-align: left; padding: 80px 60px 0px 0px; background: transparent;}

.col-1-full-width-border2 .subSleeve h2 a:link, .col-1-full-width-border2 .subSleeve h2 a:visited {color: var(--third-color); text-decoration: none;}
.col-1-full-width-border2 .subSleeve h2 a:active, .col-1-full-width-border2 .subSleeve h2 a:hover {color: #fff;}


/*___1 coloum full width box full width background */
#top.area .grid .oneColumn .spinBlock.full-width-background.col-box-1 .spinLayout.half.onecol .picture{float: right; margin: 0px;}
#top.area .grid .oneColumn .spinBlock.full-width-background.col-box-1 .sleeve .spinLayout.half.onecol .sleeve { background:transparent; padding: 0; box-shadow: none;}
#top.area .grid .oneColumn .spinBlock.full-width-background.col-box-1 > .sleeve{padding: 0px 0px 0px 40px;}

/*___1 coloum full width box full width background -dark blue */
.full-width-background.col-box-1.bg-1 .sleeve .sleeve .subSleeve h2 a, .full-width-background.col-box-1.bg-1 .sleeve .sleeve .subSleeve p.intro {color:#fff;}
.full-width-background.col-box-1.bg-1 .sleeve .sleeve .subSleeve h2 a, .full-width-background.col-box-1.bg-3 .sleeve .sleeve .subSleeve .meta {color:var(--accent-grey-light-1);}

/*___1 coloum full width box full width background -mid blue */
.full-width-background.col-box-1.bg-2 .sleeve .sleeve .subSleeve h2 a, .full-width-background.col-box-1.bg-2 .sleeve .sleeve .subSleeve p.intro {color:#fff;}
.full-width-background.col-box-1.bg-2 .sleeve .sleeve .subSleeve h2 a, .full-width-background.col-box-1.bg-3 .sleeve .sleeve .subSleeve .meta {color:var(--accent-blue-dark-1);}

/*___1 coloum full width box full width background -light blue */
.full-width-background.col-box-1.bg-3 .sleeve .sleeve .subSleeve h2 a, .full-width-background.col-box-1.bg-3 .sleeve .sleeve .subSleeve p.intro {color:#000;}
.full-width-background.col-box-1.bg-3 .sleeve .sleeve .subSleeve h2 a, .full-width-background.col-box-1.bg-3 .sleeve .sleeve .subSleeve .meta {color:var(--accent-blue-dark-1);}


/*___1 coloum full width box full width background -image */
.grid .full-width-background.col-box-1 .spinLayout .picture a {margin-right: -100%; background: transparent;}
.grid .full-width-background.col-box-1 .spinLayout .picture img {width: 47vw;}


/*___Tab bar tabs */
.tab {border-bottom: 2px solid var(--primary-color);}

/*GRID AND STORY LAYOUT
================================================== */
/*----4 col gridlayout*/
.grid .gridLayout.grid-4-col ul li {width: 23.7615656%; margin-top: 0px; margin-right: 1.576516%; margin-bottom: 20px;}
.grid .gridLayout.grid-4-col ul li:nth-child(4n) {margin-right:0%;}

/*----4 col Storylayout*/
#top .grid .oneColumn .story-4-col .twocol {width: 23.2206742%; margin-right: 1.9576516%;}
#top .grid .oneColumn .story-4-col .twocol:nth-child(4){margin-right:0%;}
.grid .story-4-col .twocol.left {clear: none;}
#top .grid .oneColumn .story-4-col .spinLayout.full.twocol .sleeve h2 { font-size: 1.266rem; line-height: 1.602rem;}

/*HERO CAROUSEL
================================================== */
.grid .hero-carousel.bg-brand-colour4 .picture .image::before {background: linear-gradient(90deg,var(--primary-color),rgba(0,108,184,0) 150px,rgba(0,108,184,0));}
.grid .hero-carousel.bg-brand-colour4 .picture .image::after {background: linear-gradient(270deg,var(--primary-color),rgba(0,108,184,0) 150px,rgba(0,108,184,0));}
.grid .hero-carousel.bg-brand-colour5 .picture .image::before {background: linear-gradient(90deg,var(--accent-blue-dark-1),rgba(0,108,184,0) 150px,rgba(0,108,184,0));}
.grid .hero-carousel.bg-brand-colour5 .picture .image::after {background: linear-gradient(270deg,var(--accent-blue-dark-1),rgba(0,108,184,0) 150px,rgba(0,108,184,0));}
.grid .hero-carousel.bg-brand-colour6 .picture .image::before {background: linear-gradient(90deg,var(--accent-grey-dark-1),rgba(0,108,184,0) 150px,rgba(0,108,184,0)); display: none;}
.grid .hero-carousel.bg-brand-colour6 .picture .image::after {background: linear-gradient(270deg,var(--accent-grey-dark-1),rgba(0,108,184,0) 150px,rgba(0,108,184,0)); display: none;}
.grid .hero-carousel.bg-brand-colour7 .picture .image::before {background: linear-gradient(90deg,var(--accent-blue-pale),rgba(0,108,184,0) 250px,rgba(0,108,184,0)); display: none;}
.grid .hero-carousel.bg-brand-colour7 .picture .image::after {background: linear-gradient(270deg,var(--accent-blue-pale),rgba(0,108,184,0) 50px,rgba(0,108,184,0)); display: none;}

}

/*___DESKTOP/LAPTOP MODE*/
@media (max-width: 1024px) {

/*SLEEVE FADED BACKGROUND  
================================================== */
.tile-text-overlay-small {width: 100%; margin-bottom: 45px;} 

/*GRID AND STORY LAYOUT
================================================== */
/*----4 col gridlayout*/
.grid .gridLayout.grid-4-col ul li {width: 48.8211742%;}
.grid .gridLayout.grid-4-col ul li:first-child + li { margin-right: 0;}
.grid .gridLayout.grid-4-col ul li.last { margin-left: 2.3576516%; }
.grid .gridLayout.grid-4-col ul li.first { margin-right: 2.3576516%;}
.gridLayout.grid-4-col ul li:first-child + li, .grid .gridLayout.grid-4-col ul li, .grid .gridLayout.grid-4-col ul li:first-child + li + li {
  margin-top: 24px;
} {margin: 24px 0 0;}



/*____story criteria full width*/
.grid .tile-border-white .spinLayout.full.onecol.item-first.item-last.hasPicture .subSleeve {color: #fff;}
.grid .tile-border-white .spinLayout.full.onecol.item-first.item-last.hasPicture .picture {border: 1px solid #fff;}
div.grid .tile-border-white .spinLayout.full.onecol.item-first.item-last.hasPicture {border: 0px solid #fff;}

/*____landing page banner position*/
div#bgimage-landing {background-position: 0% 30%;}
/*___Float menu*/
.landing-menu-container {display: none;}

/*___1 coloum full width box navigation white border */
#top .grid .oneColumn .spinBlock.col-1-full-width-border .spinLayout.half.onecol .intro, #top .grid .oneColumn .spinBlock.col-1-full-width-border2 .spinLayout.half.onecol .intro {color: #fff;}
.col-1-full-width-border .subSleeve h2 a:link, .col-1-full-width-border .subSleeve h2 a:visited, .col-1-full-width-border2 .subSleeve h2 a:link, .col-1-full-width-border2 .subSleeve h2 a:visited {color: var(--third-color); text-decoration: none;}
.col-1-full-width-border .subSleeve h2 a:active, .col-1-full-width-border .subSleeve h2 a:hover, .col-1-full-width-border2 .subSleeve h2 a:active, .col-1-full-width-border2 .subSleeve h2 a:hover  {color: #fff;}

}

@media screen and (max-width: 1028px){
/*___coloum thumbnail on twoColumns */
div.grid .column-thumbnail .spinLayout.thumb .picture {width: 150px;}
}

/*___TABLET MODE*/
@media (max-width: 768px) {

/*____2 columns 4 col besoke flex box */
  .pri-flex-item {width: calc(50% - 10px);}

/*___Hero block*/
.grid .hb-hide-main .gridLayout ul li .subSleeve {background: transparent;}

/*___carousel small*/
.picCarousel.carousel-small { min-width: unset;}

/*promo boxes*/
/*___1 coloum full width box full width background sleeve*/
#top.area .grid .oneColumn .spinBlock.full-width-background.col-box-1 .subSleeve {background: transparent;}
#top.area .grid .oneColumn .spinBlock.full-width-background.col-box-1 .sleeve .spinLayout.half.onecol .sleeve { background:transparent; padding: 0; box-shadow: none;}
/*___1 coloum full width box full width background -dark blue */
.full-width-background.col-box-1.bg-1 .sleeve .sleeve .subSleeve h2 a, .full-width-background.col-box-1.bg-1 .sleeve .sleeve .subSleeve p.intro {color:#fff;}
/*___1 coloum full width box full width background -mid blue */
.full-width-background.col-box-1.bg-2 .sleeve .sleeve .subSleeve h2 a, .full-width-background.col-box-1.bg-2 .sleeve .sleeve .subSleeve p.intro {color:#fff;}
/*___1 coloum full width box full width background -light blue */
.full-width-background.col-box-1.bg-3 .sleeve .sleeve .subSleeve h2 a, .full-width-background.col-box-1.bg-3 .sleeve .sleeve .subSleeve p.intro {color:#000;}

/*hero block*/
.hb-main .hero-spin__main__content {width: 80%; margin: 0 auto;}
div.tab button {width: 90%; border: 2px solid var(--primary-color); margin: 0 auto; margin-bottom: 10px;}

/*___1 coloum full width box navigation white border */
#top .grid .oneColumn .spinBlock.col-1-full-width-border .spinLayout.half.onecol .intro, #top .grid .oneColumn .spinBlock.col-1-full-width-border2 .spinLayout.half.onecol .intro {color: #fff;}
.col-1-full-width-border .subSleeve h2 a:link, .col-1-full-width-border .subSleeve h2 a:visited, .col-1-full-width-border2 .subSleeve h2 a:link, .col-1-full-width-border2 .subSleeve h2 a:visited {color: var(--third-color); text-decoration: none;}
.col-1-full-width-border .subSleeve h2 a:active, .col-1-full-width-border .subSleeve h2 a:hover, .col-1-full-width-border2 .subSleeve h2 a:active, .col-1-full-width-border2 .subSleeve h2 a:hover  {color: #fff;}

}

/*___TABLET MODE*/
@media (min-width: 768px) {

/*SLEEVE FADED BACKGROUND  
================================================== */
.tile-text-overlay-small {width: 70%;margin: 0 auto; margin-bottom: -45px;}
/*____Sleeve spacing */
 #top .grid .oneColumn .tile-text-overlay-small .twocol {margin-right: 7.1296516%; width: 42.8211742%; }

}

/*___TABLET MODE target*/
@media screen and (max-width: 700px){
/*___Quick link version 2 lists */
div .qlink-wrapper li {width: 100%; text-align: center; width: 220px;}
}


@media (max-width: 500px) {
/*____landing page banner position*/
div#top.area div#bgimage-landing { margin-top: -184px;}
}

/*___MOBILE MODE*/
@media (max-width: 480px) {
div#wrapper_sleeve {margin-top: 0px;}
/*____title*/
#section_intro h1 {top: 50px;}

/*____1 column full width 4 col besoke flex box*/
  .pri-flex-item {width: 100%;}
  
/*____landing page banner position*/
div#top.area .grid div#bgimage-landing {background-position: center; height: 200px;  margin-top: -100px;}
/*____landing page intro*/
div.landing-intro-text H2 {font-size: 1.424rem; line-height: 1.2;}

/*___Quick link window*/
.quick-container .quick-menu {margin-top: 0px;}

/*promo boxes*/
/*___1 coloum full width box full width background -elimination */
.col-box-1.bg-1, .col-box-1.bg-2, .col-box-1.bg-3, .col-box-1.bg-4, .col-box-1.bg-5, .col-box-1.bg-6 {background: none;}
/*___1 coloum full width box full width background -text-box */
.full-width-background.col-box-1.bg-1 .sleeve .sleeve .subSleeve h2 a, .full-width-background.col-box-1.bg-1 .sleeve .sleeve .subSleeve p.intro {color: inherit;}
/*___2 coloum half width*/
.grid .col-2-half-width .spinLayout .sleeve .subSleeve {padding: 15px 13px 32px;}

/*GRID AND STORY LAYOUT
================================================== */
/*----4 col gridlayout*/
div.grid .gridLayout.grid-4-col ul li {width: 100%;}

}

/*___MOBILE MODE target*/
@media screen and (min-width: 480px){
.picCarousel.carousel-small .caption, .picCarousel.carousel-small .thumbs {background-color: var(--accent-blue-dark-1);}
/*___coloum thumbnail on twoColumns */
.grid .column-thumbnail .spinLayout.thumb .picture {width: 110px;}
/*___coloum thumbnail titles */
.grid .spinLayout.full .sleeve h2 {font-size: 1.266rem; line-height: 1.602rem;}
/*___hero block title */
.hero-spin.animated .hero-spin__main .hero-spin__main__content {width: 80%; margin: 0 auto; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;}

}


/*==================================================
END MEDIA QUERY*/






</style>

