@charset "UTF-8";

/* NORMALISE */

.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }

*, *:after, *:before { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; outline:none; }
*:focus { outline:none;
}
/*hide the default highlighting/blink when pressing links on mobile*/
* {
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-tap-highlight-color: transparent;
}
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,input,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,textarea,caption,tbody,tfoot,thead,tr,th,td{
	margin:0;
	padding:0;
	border:0;
	outline:none;
	font-weight:inherit;
	font-style:inherit;
	font-family:inherit;
	vertical-align:baseline;
	text-rendering:optimizeLegibility;
}

ol,ul{list-style:none}
table{border-collapse:separate;border-spacing:0;vertical-align:middle}
caption,th,td{text-align:left;font-weight:normal;vertical-align:middle}
a img{border:none}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}



/* THEME */

body {
    font-family: "Montserrat", Calibri, Arial, sans-serif;
	font-size:			14px;
    letter-spacing:		0.02em;
	line-height:		1.5em;
	overflow-x:			hidden;
	display: 			flex;
}
section {
	position: 			relative;
}
a,
a:visited {
	text-decoration:	none;
	cursor:				pointer;
}
.desktop a:hover {
	text-decoration:	underline;
	cursor:				pointer;
}
a:active {
}
a.active,
.selected {
}
.selected a {
}
.active {
	font-weight:		600;
	color: 				black;
	background: 		inherit;
}

h1,
h2,
h3 {
	font-weight: 		300;
    letter-spacing:		0;
	line-height: 		1.3;
	text-rendering:		optimizeLegibility;
    margin:				0 0 30px;
	max-width: 			900px;
}
h4,
h5,
h6 {
	font-weight:		400;
	text-rendering:		optimizeLegibility;
    margin:				0 0 30px;
}
p {
    margin:				0 auto;
    width: 				100%;
	max-width:			840px;
}
sup { 
	letter-spacing:		0;
	position:			relative;
	top:				-0.4em;
}
strong, b {
	font-weight:		600;
}
em, i {
	font-style:			italic;
}


/*-- FONT SIZES --*/

h1, .h1 {
  font-size: 2.4rem;
  letter-spacing: -0.02em;
}
h2, .h2 {
  font-size: 1.75rem
}
h3, .h3 {
  font-size: 1.4rem 
}
h4, .h4 {
  font-size: 1.31rem
}
h5, .h5 {
  font-size: 1.125rem
}
h6, .h6 {
  font-size: 0.94rem
}


/*-- LAYOUT --*/

*::-ms-backdrop,
html.fullscreen {
    width: 100%;
}
*::-ms-backdrop,
html.fullscreen .main-content {
    overflow: scroll;
    overflow-x: hidden;
    height: 100vh;
}
body {
    height: 100vh;
	overflow: hidden;
}
body.contain {
	padding: var(--container-padding);
}
body.desktop {
	/*padding-right: 6px !important;*/
}
html.sidescroll body {
	padding-right: 0px !important;
}
body.shade,
body.shade #SideNav {
	background: #efefef;
	border-color: transparent;
	box-shadow: 0 0 0 1px rgba(0,0,0, 0);
}
body.contain #SideNav {
    margin-right: var(--container-padding);
}
body.contain.sidenav-right #SideNav {
    margin-left: var(--container-padding);
    margin-right: 0;
}
body.sidenav-right {
	flex-direction: row-reverse;
}
.sidenav-float #SideNav:hover + #Page {
	margin-left: 190px;
}
.sidenav-float #Page {
	margin-left: 120px;
}
#Page {
	display: inline-flex;
    flex-direction: column;
    flex: 1;
    padding: 0;
    margin-left: 0;
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-gutter: stable;
    scroll-behavior: smooth;
    background: white;
	transition: all 0.3s ease-out;
}
#LoadZone {
	display: flex;
    width: 100%;
    flex: 1;
    flex-direction: column;
    align-content: center;
    align-items: center;
    text-align: center;
    border-radius: inherit;
}
#LoadZone iframe {
	width: calc(100% + 8px);
	margin-right: -8px;
	border-radius:inherit;
}
#SideNav {
	position: relative;
	display: inline-flex;
	flex-direction: column;
	width: 190px;
	padding: 0;
	overflow: visible;
	background: transparent;
	transition: all 0.3s ease-out;
}
.sidenav-float #SideNav {
	position: fixed;
    top: 2em;
    left: 0;
    margin: 1em;
    width: 180px;
    max-height: calc(98vh - 4em);

	-webkit-box-shadow: 0 8px 16px 0 rgba(0,0,0,0.3);
			box-shadow: 0 8px 16px 0 rgba(0,0,0,0.3);
    z-index: 1001;
}
.sidenav-float #SideNav.collapsed {
	max-height: 60px;
	width: 60px;
	align-items: center;
	background: var(--mist) !important;
}
.sidenav-float #SideNav #Logo {
	display: none;
}
#Reveal-SideNav {
	display: none;
	width: fit-content;
	flex-direction: column;
    align-items: center;
    text-align: center;
    font-size: 0.9em !important;
	opacity: 0;
	position: relative;
	left: -60px;
	margin-bottom: 10px;
	transition: all 0.2s ease-out;
}
#Reveal-SideNav .icon,
#Reveal-SideNav p {
}
.sidenav-float .collapsed #Reveal-SideNav {
	display: flex;
	opacity: 1;
	left: 0;
	/*position: fixed;
	left: 0;
	z-index: 0;*/
}
.sidenav-float .collapsed .action-group {
	opacity: 0;
	transition: opactity 0.2s ease-out;
}
#SideNav a,
	#Footer a {
	font-size: 0.8em;
}
#SideNav .button-block {
	display: flex;
    flex-direction: column;
    align-self: center;
    align-items: center;
    align-content: center;
	position: absolute;
	width: 100%;
	bottom: 0;
	padding: 0;
	padding-bottom: var(--container-padding);
	margin: auto;
	background: inherit;
	z-index: 1;
}
#SideNav ul {
	display: flex;
	flex-direction: column;
}
#SideNav li,
#SideNav a:not(.btn, #Reveal-SideNav, #Tabs a) {
	display: flex;
	align-items: center;
    padding: 4px 10px;
    border-radius: var(--border-radius);
}
.sidenav-float #SideNav a:not(.btn, #Reveal-SideNav, #Tabs a) {
	background: transparent;
	max-width: 99%;
}
#SideNav.collapsed a {
}
#SideNav #Tabs a {
	display: inline-flex;
	width: fit-content;
    font-size: 0.9em;
	align-items: center;
    padding: 4px 10px;
    border-radius: var(--border-radius);
}
		#Tabs a.active {
			text-transform: uppercase;
		}

.no-sidenav #SideNav {
	display: none;
}
.no-sidenav #showSideBar {
	display: block;
}
#showSideBar {
	display: none;
}
.no-topnav #Navbar {
	display: none;
}
.no-topnav #Page {
	padding-top: 2em;
}
.contain #SideNav,
.contain #Page {
    border-radius: 6px;
    box-shadow: 0 0 0 1px rgba(0,0,0, 0.2);
}
#SideNav .wrapper {
    position: relative; /*was absolute;*/
	display: flex;
    flex-direction: column;
    margin: 0;
    padding: 10px;
    width: calc(100% - 1px);
    height: calc(100% - (var(--container-padding)*2));
    overflow-x: hidden;
    overflow-y: auto;
    background: inherit;
    border-radius: inherit;
    transition: visibility 0.6s ease-out;
    scrollbar-gutter: stable;
    scroll-behavior: smooth;
}
#SideNav .wrapper:hover,
.sidenav-float #SideNav .wrapper {
    /*overflow-y: auto;   not using this trick*/ 
}
#SideNav #Tabs {
	padding-right: 10px;
}
#SideMenu {
	position: relative;
	margin-top: 1em;
	margin-bottom: 8px;
	width: calc(100% - 4px);
    opacity: 1;
    transition: opacity 0.3s ease-out;
}
#SideMenu a {
	transition: all 0.2s ease-out;
	width: fit-content;
	max-width: 94%;
    line-height: 1.5;
    margin-bottom: 0.1em;
}
.list-group-item {}
.submenu .list-group-item {
    width: fit-content;
    margin: 0 1em;
	transition: all 0.4s ease-out;
}
.submenu .list-group-item:first-child {
  	margin-top: 0.5em;
}
.submenu .list-group-item:last-child {
  	margin-bottom: 2em !important;
}
.submenu {
}
#btn-Home {
	display: none !important;
}
#Categories,
#Projects {
	display: none;
}
#showProjects {
	position: relative;
	flex-direction: column;
}
#showProjects:hover #showFilters,
#showProjects #showFilters:hover {
    text-decoration: none !important; 
}
#showFilters {
	position: relative;
	transition: all 0.3s ease-out;
	z-index: 2;
	overflow: hidden;
	width: fit-content;
    margin-bottom: -1.6em;

	font-size: 0.8em !important;
    text-decoration: none !important;
    text-transform: none;
    color: var(--grey);
    font-weight: initial;
    padding: 0 !important; /**/
    left: -5px;
    opacity: 0.6;

}
#showFilters:hover {
	width: auto;
	overflow: visible;
	opacity: 1;
	/*
	max-width: 80%;
    padding-bottom: 1.5em !important;
    padding-right: 2em !important;
    */
}
#showFilters:hover #Filters {
	/*left: 50px;*/
	opacity: 1;
}
#Filters {
    opacity: 0;
    /*left: 70px;
    top: -4px;*/
	    position: absolute;
		top: 1.8em;
		right: -1em;
	/**/
    white-space: nowrap;
    width: fit-content;
	height: auto;
    padding: 4px 0;
    border-radius: 12px;
    background: white;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.1);
    transition: all 0.3s ease-out;
    z-index: 1;
}
#Filters.in {
	opacity: 1;
	visibility: visible;
	left: 60px;
}
	.collapsed + #Filters {}

.deeploader {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative;
    cursor: pointer;
}
.deeploader .viewproject {
    opacity: 0;
    margin-top:-3em;
}
.deeploader:hover .viewproject {
    opacity: 1;
    margin-top:0;
}
.viewproject {
    width: fit-content;
    margin: auto;
    position:absolute;
    top: 50%;
	transform: translate(-50%, -50%);
    z-index: 1;
    transition: all 0.3s ease-out;
}
.viewproject:hover {
    background: black;
}

.highlight,
.highlighted {
	background: var(--nvy) !important;
	color: white;
}
.highlight:hover,
.highlighted:hover {
	background: black !important;
	color: white;
}

#ViewMode, 
.toggle-holder {
	position: fixed;
    display: flex;
    flex-direction: column;
    /*align-self: flex-end;*/
    
    text-align: right;
    margin: 0;
    padding: 10px;
    width: fit-content;
    /*height: calc(100% - (var(--container-padding)*2));*/
    bottom:0;
    overflow: hidden;
    z-index: 999;
}
.jump-top {
    display: block;
    position: fixed;
    width: auto;
    height: auto;
    bottom: 25px;
    right: 2em;
	font-size: 0.9em;
    text-align: right;
    z-index: 999;
}
#ViewMode {
	top: calc(2px + var(--container-padding));
	bottom: unset;
	right: 2em;
	font-size: 0.9em;
}

#ViewModeeeeeee {
    display: flex;
	flex-direction: column;
    text-align: right;
	
	position: fixed;
    right: calc(2em + var(--container-padding));
    top: calc(1em + var(--container-padding));
    font-size: 0.9em;
    z-index: 99;
    background: pink;
    transition: all 0.3s ease-out;
}
.sidescroll #ViewMode {
	flex-direction: row;
}
.sidescroll #scroll-Horizontal:after {
	content: '/';
	padding: 0 6px;
}
#ViewMode .options,
#ViewMode .direction {
	display: inherit;
	flex-direction: inherit;
    text-align: inherit;
}
.direction .active {
	pointer-events: none;
}
.direction + #btn-Fullscreen {
	margin-left: 1em;
}
#btn-Fullscreen {}
#GoExit {
    display: none;
}
.fullscreen #GoFull {
    display: none;
}
.fullscreen #GoExit {
    display: flex !important;
}
.fullscreen #ViewMode > span,
.fullscreen .direction,
.fullscreen #NavPrompt, 
.fullscreen #NavPrompt:after {
	display: none !important;
	visibility: hidden;
	pointer-events: none;
}


/*-- GENERAL OBJECTS --*/


#Global-Loader.show {
    transform: translate(-50%,-50%) scale(2);
    opacity: 1;
    z-index: 99;
}
#Global-Loader {
	position: absolute;
    transform-origin: center center;
    transform: translate(-50%,-50%) scale(1);
    left: 50%;
    top: 50%;
    margin: auto;
    opacity: 0;
    z-index: -1;
    transition: all 0.3s ease-out;
}

iframe {
	width: 100%;
	height: 100%;
}
.iframe-container {
  overflow: hidden;
  /* 16:9 aspect ratio */
  padding-top: 56.25%;
  position: relative;
}
.iframe-container iframe {
   border: 0;
   height: 100%;
   left: 0;
   position: absolute;
   top: 0;
   width: 100%;
}

.fixed {
	position: fixed;
}
.nowrap {
	white-space:		nowrap;
}
.hr, hr {
	display:			block;
	position: 			relative;
	width:				100%;
	max-width: 			1000px;
	height:				0;
	padding:			0;
	margin:				0 auto;
	background:			none;
	border: 			0;
	border-top:			1px solid #ccc;
	z-index: 			3;
}
.container hr {
	margin-top: 70px;
}
@media (max-width:720px){
	.container hr {
		margin-top: 50px;
		width: 90%;
	}	
}
.border-top {
	border:				0;
	border-top:			1px solid #bbb;
}
.pad-topbtm {
    padding:			70px 0;
}
.pad-top {
    padding-top:		70px;
}
.pad-btm {
    padding-bottom:		70px;
}
.container {
	display:			flex;
	flex-direction: 	column;
    position: 			relative;
	width:				100%;
	padding-right:		15px;
	padding-left:		15px;
	margin-right:		auto;
	margin-left:		auto;
	z-index: 			2;
}
/*
@media (min-width: 768px) {
  .container {
    max-width:			750px;
  }
}
*/
@media (min-width: 992px) {
  .container {
    max-width:			970px;
  }
}
@media (min-width: 1200px) {
  .container {
    max-width:			70vw;
  }
}
@media (min-width: 1800px) {
  .container {
    max-width:			unset;
    padding-left: 		10vw !important;
    padding-right: 		10vw !important;
  }
}
.container.slick-block {
	max-width: unset !important;
	transition: all 0.3s ease-out;
}
.sticky-container {
	position: sticky;
	top: 100px;
	width: 100%;
}
.sticky-container .item {}
.sticky-container .item a {
	display: flex;
    width: 100%;
    height: 80px;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}
.sticky-container .item a.active {
	background: var(--sky);
	color: white;
}
.mvp .container {
    max-width:			100vw !important;
    padding-left: 		unset !important;
    padding-right: 		unset !important;
}
.mvp .container div {
/*    margin-bottom: 		1em;*/
}
.mvp:not(.v5b) .img-responsive {
	max-height: 		100vh;
}
@media (min-width:1024px){ 
	.mvp h1 {
	    font-size: 3vw;
	    margin: 0 auto 5.6vh;
	}
	.mvp h3 {
		font-size: 			1.42vw;
		font-weight: 		500;
		color: 				var(--grey);
	}
}
.mvp h3 strike,
.mvp h2 strike {
	color: 				var(--grey);
	font-weight: 		300;
}
.mvp #Intro,
.mvp #Services,
.mvp #End {
	position: relative;
}
.bigger {
	padding-top: 5px;
	padding-bottom: 15px;
	margin-left:0;
	font-size: 1rem;
	font-weight: 600;
	font-style: italic;
} 
#Page.mvp {
	scroll-behavior: unset !important;
}
@media (max-width: 840px) {
	#Page.mvp {
		margin-bottom:2em;
	}
	.mvp #Intro h2 {
		font-size: 1.3em;
		line-height: 1.3;
	}
	.mvp #Intro h3 {
		max-width: 80vw;
	}
	.mvp #Intro,
	.mvp #Services {
		padding: 10px;
	}
	.mvp #Services,
	.mvp #Services .bannertext {
		margin-bottom: 2em;
	}
	.mvp:not(.v5b) #End {
		flex-direction: column-reverse;
		margin-bottom: 2em;
	}
	.mvp #End .bannertext {
		padding: 1.5em;
	}
	.mvp .bannertext p + p {
		margin-top: 0.7em;
		line-height: 1.5;
	}
	br.break-big {
		display: none !important;
	}
}
@media (min-width: 841px) {
	.mvp .bannertext p + p {
		margin-top: 0.2em;
	}
	.mvp #Intro h3 {
		 max-width:66vw;
	}
	.mvp #Intro,
	.mvp #Services {
		justify-content: flex-start;
		padding: 0;
	}
	.mvp #End.row {
    	border-top: 1px solid silver;
		border-bottom: 0 !important;
    	margin-bottom: 0 !important;
    	margin-top: 2em;
    	padding: 0;
	}
	#Intro .bannertext.rgt {
		 padding:0.5em 4em !important;
		 max-width: 600px;
	}
	/*
	#Intro .bannertext,
	#Services .bannertext,
	#End .bannertext {
		padding-left: 6em;
		margin-top: 0.95em;
		margin-right: auto;
		text-align: left !important;
    	align-items: start !important;
	}
	*/
	#Services .bannertext {
		width: 35%;
	}
	#Services .bannerpic {
		width: 65%;
	}
	#End .bannertext {
		width: 35%;
		padding: 0 2em 0 5em;
	}
	#End .bannerpic {
		width: 65%;
	}
	.mvp #Images.container {
		max-width: 92vw !important;
	}
	.mvp #Images .row {
		border-bottom: 1px solid silver;
		margin-bottom: 1em;
	}
	.mvp #Images .row#Client-Processes,
	.mvp #Images .row#Testimonials {
		border-bottom: 1px solid transparent;
	}
	#Images .bannertext {
		width: 24vw;
		margin: 0;
		margin-right: auto;
		padding: 2em;
		text-align: left;
		align-items: flex-start;
		justify-content: flex-start;
		transition: 0.3s all ease-out;
		overflow: hidden;
	}
	#Images .bannerpic {
		width: 66.3vw;
		margin: 0;
		margin-right: auto;
		transition: 0.3s all ease-out;
	}
	.minimise-text #Images .bannerpic {
		width: 92%;
	}
	.minimise-text #Images .bannertext {
		width: 6%;
	}
	.mvp #MVP-note {
	    aspect-ratio: 1;
	    max-width: 550px;
	    width: 532px;
	    height: 532px;
	    padding: 4em;
	    padding-top: 2em;
	    top: 1em;
	    border: 1px solid #ccc;
	    border-radius: 100%;
	    margin-bottom: -4em;
	    z-index: 99;

	    display: flex;
	    position: absolute;
	    left:50%;
	}
	.mvp #MVP-note h3 {
		font-size: 1.2em;
	}
}
#Creds {
	flex-direction: row;
	flex-wrap: wrap;
}
#Creds p {
	position: relative;
	display: flex;
	flex-direction: column;
	margin:0;
	font-size: 1vw;
	transition: all 0.3s ease-out;
	z-index: 1;
}
#Creds .bubbles p {
	max-width: 25%;
	aspect-ratio: 1;
	border-radius: 100%;
	border: 1px solid var(--grey);
	align-items: center;
	justify-content: center;
	padding: .bubbles 1.5em;
	background: white;
	overflow: hidden;
}
#Creds .bubbles p .author {
	display: flex;
	position: absolute;
    background: black;
    color: white;
    height: fit-content;
    width: 100%;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin: auto;
    padding: inherit;
    font-size: 80%;
    line-height: 1.8;
    transition: all 0.3s ease-out;
	bottom: -100%;
	opacity: 0;
    z-index: 3;
}
#Creds p .author {
}
#Creds p:hover .author {
	display: flex;
	bottom: 0;
	opacity: 1;
}
#Creds .bubbles p:hover {
	z-index: 2;
	scale: 1.1;
	cursor: pointer;
}
#Creds .inline p {
    text-align: left;
    width: 100% !important;
    padding: 0 !important;
    margin: unset !important;
    margin-bottom: 1em !important;
}
#Creds .inline p .author {
	padding:0 !important;
}
#Creds .inline br {
	display: none;
}
#Quotes	{
    position: inherit;
	display: inherit;
    flex-direction: inherit;
    flex-wrap: inherit;
    align-items: inherit;
    align-content: inherit;
    justify-content: inherit;
    width: 100%;
    height: fit-content;
    font-size: inherit;
    margin: inherit;
}

#Help {
    width: 20.1%;
    min-width: 150px;
    position: absolute !important;
    left: 25%;
    top: 83%;
    padding: 0 !important;
    font-size: 1.3vw !important;
    line-height: normal;
    text-transform: uppercase;
	z-index: 9 !important;
	border-style:dashed !important;
	background-image:url('mvp/sketch_circle-1.png');
	background-size:cover;
}
#Arrow-01 {
	max-width:45% !important;
	margin-top: auto;
	margin-bottom: 0;
	margin-right: 0;
	margin-left: auto;

	position: absolute;
    bottom: 0;
    right: 0;
    transform: translate(2.5em, 85%);
}
#Arrow-02 {
}
	@media (max-width:640px) {
		#Arrow-01 {
			display: none;
		}
		#Arrow-02 {
		}
		#Help {
    		left: unset !important;
    		top: unset !important;
    		bottom: -2.5em !important;
    		right: 5%;
    		font-size: 1em !important;
    		width: 50%;
    		min-width: 100px;
    	}
		#Creds p {
			font-size: 1.5vw;
			line-height: 1.5;
		}
	}



.row {
	display:			flex;
	flex-direction: 	row;
	flex: 				1;
	width:				100%;
	padding:			0;
	margin:				0;
	justify-content: 	center;
}
.rows-to-column .row:not(.maintain, #Brands) {
	flex-direction: column;
}
.column-to-row {
	display: flex;
	flex-direction: column;
}
@media (max-width: 640px) {
	.row:not(.maintain) {
		flex-direction:column;
	}
	.column-to-row:not(.maintain) {
		flex-direction: row;
	}
}
.flex-col {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	overflow-x: hidden;
	overflow-y: auto;
}
.section-header {
    text-align: center;
}
.bannertext,
.bannerpic {
	display:			inline-flex;
	flex-direction: 	column;
	min-height: 		1px;
	padding-right: 		15px;
	padding-left: 		15px;
	text-align:			center;
	align-items: 		center;
    justify-content: 	center;
    position: 			relative;
    width:				50%;
}
.col-2 {
	display: 			flex !important;
	width: 				100%;
	justify-content:	space-between;
	flex-wrap: 			wrap;
}
.col-2 img {
	width:				49%;
}
.img-responsive {
    display: 			block;
    max-height:			100%;
    max-width:			100%;
    width:				auto;
    height:				auto;
    margin: 			auto;
    transition: 		all 0.3s ease-out;
}
.img-center {
    margin:				0 auto;
}
.img-wrapper {
    position:			relative;
    width:				100%;
    height:				auto;
    margin:				0 auto;
    overflow:			hidden;
}
.img-wrapper .on-hover {
    opacity:			1;
    opacity:			0;
    position:			absolute;
    top:				50%;
    margin-top:			-30px;
    width:				100%;
    -webkit-transform:	translateX(-50px);
    transform:			translateX(-50px);
    -webkit-transition:	all .3s ease-out;
    transition:			all .3s ease-out;
}
.img-wrapper:hover .on-hover {
    -webkit-transform:	translateX(0);
    transform:			translateX(0);
    opacity:			1;
}
.img-wrapper .on-hover .btn {
    opacity:			1;
}
.text-center {
	text-align:			center;
	align-items:		center !important;
}
.text-lft {
	text-align:			left !important;
	align-items:		start !important;
}
.text-rgt {
	text-align:			right !important;
	align-items:		end !important;
}


ul.feature-list {
	padding-top:		1em;
	padding-bottom:		1em;
	text-align:			left;
}
ul.feature-list li {
	display:			block;
	position:			relative;
	clear:				both;
	padding-bottom:		1em;
}
ul.feature-list li .icon {
	display:			block;
	position:			absolute;
	left:				0px;
}
ul.feature-list.icons li {
	padding-left:		50px;
}
ul.pill-list {
	align-items: center;
	margin-bottom: 0.5em;
}
ul.pill-list li,
.viewproject {
	display: inline-flex;
	padding: 6px 12px 7px;
	margin: 0 4px;
	margin-bottom: 0.5em;
	flex-wrap: nowrap;
	white-space: nowrap;
    align-items: center;
    border-radius: var(--border-radius);
	background-color: var(--mist);
	transition: all 0.1s ease-out;

}
ul.pill-list li:hover,
.viewproject {
	background-color: var(--nvy);
	color: white;
	-webkit-box-shadow: 0 4px 12px 0 rgba(0,0,0,0.2);
	box-shadow: 0 4px 12px 0 rgba(0,0,0,0.2);
	z-index: 9;
	cursor: pointer;
}


/*-- BUTTONS --*/

.btn {
	display:			inline-block;
	width:				max-content;
	margin:				0 auto;
	padding:			0.54em 2em 0.7em;
	border:				1px solid silver;
	border-radius:		0;
	background-color:	transparent;
	color:				silver;
	text-align:			center;

	-o-transform:		scale(1);
	-moz-transform:		scale(1);
	-webkit-transform:	scale(1);
	transform: 			scale(1);

	-moz-box-shadow: 	0;
	-webkit-box-shadow: 0;
	box-shadow: 		0;

	-o-transition: 		all .10s;
	-moz-transition: 	all .10s ease-out;
	-webkit-transition: all .10s ease-out;
	transition: 		all .10s ease-out;
}

.btn:hover {
	z-index:			101;
	border:				1px solid transparent;
	text-decoration:	underline;
	cursor:				pointer;

	-o-transform: 		scale(1);
	-moz-transform: 	scale(1);
	-webkit-transform: 	scale(1);
	transform: 			scale(1);

	-moz-box-shadow: 	0px rgba(0,0,0,0.3);
	-webkit-box-shadow: 0px rgba(0,0,0,0.3);
	box-shadow: 		0px rgba(0,0,0,0.3);
}

.btn-inverse {
	border-color:		#fff;
	color:				#fff !important;
}
.btn-inverse:hover {
	border-color:		#2c4a5b;
	color:				#2c4a5b !important;
}

.icon {
	display:			inline-block;
	position:			relative;
	vertical-align:		middle;
	font-size:			36px;
	width:				36px;
	height:				36px;
	padding:			0;
	border:				0;
	color:				inherit;
	overflow:			hidden;
}
.btn .icon {
}

/*FIREFOX*/
@media screen and (min--moz-device-pixel-ratio:0) {
  .icon {
	top:				-4px;
  }
  .glyph[class*='icon-'] {
  }
  ul.feature-list li .icon {
	margin-top:			-4px;
  }
}

/*CHROME*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
  .icon {
	top:				1px;
  }
  .glyph[class*='icon-'] {
	top:				6px;
	position:			relative;
  }
  ul.feature-list li .icon {
	margin-top:			-5px;
  }
}

/*IE*/
@media screen\0 {
  .icon {
	top:				1px;
  }
  .glyph[class*='icon-'] {
	top:				6px;
	position:			relative;
  }
  ul.feature-list li .icon {
	margin-top:			-5px;
  }
}


/* RADIO button */

.rdiobox {
    font-weight: normal;
    position: relative;
    display: inline-flex;
    line-height: inherit;
    margin-right: 1em;
}
.rdiobox span {
    /*padding-left: 16px;*/
    display: inline-flex;
    align-self: center;
    align-items: center;
}
.rdiobox span:before,
.rdiobox span:after {
    line-height: inherit;
    position: relative;
}
.rdiobox span:before {
    content: "";
    top: 1px;
    left: 0;
    width: 16px;
    height: 16px;
    margin-right: 0.5em;

    background-color: #ffffff;
    border: 1px solid var(--nvy);
    border-radius: 50px;
}
.rdiobox input[type=radio]:checked+span:before {
    content: "";
    background-color: white;
    border: 4px solid var(--nvy);
}
.rdiobox span:empty {
    padding-left: 0;
    width: 16px;
    display: block;
}
.rdiobox input[type=radio] {
    opacity: 0;
    margin: 0;
    width:0;
    height: inherit;
}
.rdiobox input[type=radio]:checked+span:after {
}
.rdiobox input[type=radio][disabled]+span {
    opacity: 0.75;
}

.rdiobox input[type=radio][disabled]+span:before,
.rdiobox input[type=radio][disabled]+span:after {
    opacity: 0.75;
}
.rdiobox-inline {
    display: inline-block;
}
.rdio-set, 
.radioset {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
    line-height: inherit;
    text-align: left;
}

.rdioboxxx, .ckboxxx {
    margin-top: 2px;
    margin-bottom: 2px;
    width: fit-content;
    background: lime !important;
}
.rdiobox:hover, 
.ckbox:hover {
	text-decoration: underline;
	color: black;
	cursor: pointer;
}

/* CHECKBOX */

.ckbox {
    font-weight: normal;
    position: relative;
    display: inline-flex;
    line-height: inherit;
    margin-bottom: 0;
}
.ckbox span {
    /*padding-left: 16px;*/
    display: inline-flex;
    align-self: center;
}
.ckbox span:empty {
    float: left;
    padding-left: 0;
}
.ckbox span:before, 
.ckbox span:after {
    line-height: inherit;
    position: relative;
}
.ckbox span:before {
    content: "";
    width: 16px;
    height: 16px;
    margin-right: 0.5em;
    align-self: center;
    
    background-color: white;
    border: 1px solid var(--nvy);
    border-radius: 50%;
}
    .rgt .ckbox span:before,
    .rgt .ckbox input[type=checkbox]:checked+span:before {
        top: 0;
    }

.pill-list.filters .highlighted:after {
    margin-left: 0.5em;
    margin-right: -2px !important;
    border-radius: 50%;
    border: 1px solid;
	background-color: transparent !important;
}
.ckbox input[type=checkbox]:checked+span:before,
	.pill-list.filters .highlighted:after {
    content: "";
    width: 16px;
    height: 16px;
    margin-right: 0.5em;
    align-self: center;

    background-color: var(--nvy);
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E");
    background-size: 66%;
    background-repeat: no-repeat;
    background-position: 55% 45%;
    line-height: 17px;
}
.ckbox input[type=checkbox]:checked+span:after {
    display: block;
}
.ckbox input[type=checkbox]:checked+span {
    font-weight: 600;
}
.ckbox input[type=checkbox][disabled]+span {
    opacity: 0.75;
}
.ckbox input[type=checkbox][disabled]+span:before,
.ckbox input[type=checkbox][disabled]+span:after {
    opacity: 0.75;
}
.ckbox input[type=checkbox] {
    opacity: 0;
    margin: 0;
    width:0;
    display: none;
}
.ckbox.disabled {
    opacity: 0.2;
	pointer-events: none;
}

/* for element(.option) to mimic input[type=checkbox] */
.option:not(.btn):before {
    content: "";
    width: 16px;
    height: 16px;
    margin-right: 0.5em;
    align-self: center;
    
    background-color: white;
    border: 1px solid var(--nvy) !important;
    border-radius: 3px;
}
    .rgt .ckbox span:before,
    .rgt .ckbox input[type=checkbox]:checked+span:before {
        top: 0;
    }

.option:not(.btn).active:before,
.option:not(.btn):active:before {
    content: "";
    width: 16px;
    height: 16px;
    margin-right: 0.5em;
    align-self: center;

    background-color: var(--nvy);
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E");
    background-size: 66%;
    background-repeat: no-repeat;
    background-position: 55% 45%;
    line-height: 17px;
}

.option:not(.btn) {
    display: flex;
    align-items: center;
    clear: both;
    font-size: inherit;
    text-align: inherit;
    white-space: nowrap;
    margin-bottom: 1px;
    padding: 6px 4px;
    border-radius: 8px;
    border: 0;
    background: transparent;
}

/*------- CUSTOM SWITCH --------*/

.custom-switches-stacked {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
}
.custom-switches-stacked .custom-switch {
    margin-bottom: 0.5rem;
}
.custom-switch-indicator {
    display: inline-block;
    height: 1.25rem;
    width: 2.25rem;
    background: #e5e9f3;
    border-radius: 50px;
    position: relative;
    vertical-align: bottom;
    border: 1px solid #f0f2f8;
    transition: 0.3s border-color, 0.3s background-color;
}
.custom-switch-indicator:before {
    content: "";
    position: absolute;
    height: calc(1.25rem - 4px);
    width: calc(1.25rem - 4px);
    top: 1px;
    left: 1px;
    background: #ffffff;
    border-radius: 50%;
    transition: 0.3s left;
    box-shadow: none;
}
.custom-switch-input {
    position: absolute;
    z-index: -1;
    opacity: 0;
}
.custom-switch-input:checked~.custom-switch-indicator:before {
    left: calc(1rem + 1px);
}
.custom-switch-input:checked~.custom-switch-indicator {
    background: var(--primary-bg-color);
}
.custom-switch-input:focus~.custom-switch-indicator {
    box-shadow: none;
}
.custom-switch-description {
    flex: 1;
    margin: 0 0.5rem;
    color: inherit;

    font-size: inherit;
    line-height: initial;
    display: inline-flex;
}
    .rgt .custom-switch-description {
        text-align: right;
        justify-content: end;
    }
.custom-switch-input:checked~.custom-switch-description {
}
.dropdown-item .custom-switch-description,
.nav-sub-link .custom-switch-description {
    margin-left: 0;
}
.custom-switch {
    padding-left: 2.25rem;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: default;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-align: center;
    flex: 1;
    align-items: center;
    margin: 0;
    padding-left: 0;
}
.custom-switch .custom-control-label::before {
    left: -2.25rem;
    width: 1.75rem;
    pointer-events: all;
    border-radius: 0rem;
}
.custom-switch .custom-control-label::after {
    top: calc(0.15625rem + 2px);
    left: calc(-2.25rem + 2px);
    width: calc(1rem - 4px);
    height: calc(1rem - 4px);
    background-color: #a8afc7;
    border-radius: 0rem;
    transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.custom-switch .custom-control-input:checked~.custom-control-label::after {
    background-color: #ffffff;
    transform: translateX(0.75rem);
}

.custom-switch .custom-control-input:disabled:checked~.custom-control-label::before {
    background-color: rgba(135, 96, 251, 0.5);
}

@media (prefers-reduced-motion: reduce) {
    .custom-switch .custom-control-label::after {
        transition: none;
    }
}

.custom-switch-input:checked~.custom-switch-description, 
.custom-control-input:checked~.custom-control-label, 
.ckbox input[type=checkbox]:checked+span, 
.rdiobox input[type=radio]:checked+span {
    font-weight: 500;
    color: red;
}



/*------------------------
	Scrolling animations
-------------------------*/

.scrollimation.fade-in{
	opacity:0;
	-webkit-transition:opacity 0.6s ease-out;
	transition:opacity 0.6s ease-out;
}
.scrollimation.fade-in.in{
	opacity:1;
}
.scrollimation.scale-in{
	opacity:0;
	-webkit-transform: scale(0.5);
	-moz-transform: scale(0.5);
	-ms-transform: scale(0.5);
	transform:scale(0.5);
	-webkit-transition: -webkit-transform .6s cubic-bezier(.17,.89,.67,1.57), opacity .6s ease-out;
	transition: transform .6s cubic-bezier(.17,.89,.67,1.57), opacity .6s ease-out;
}
.scrollimation.scale-in.in{
	opacity:1;
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	transform:scale(1);
}
.scrollimation.fade-right{
	opacity:0;
	-webkit-transform: translateX(-100px);
	-moz-transform: translateX(-100px);
	-ms-transform: translateX(-100px);
	transform:translateX(-100px);
	-webkit-transition: -webkit-transform .4s ease-out,opacity .4s ease-out;
	transition: transform .4s ease-out,opacity .4s ease-out;
}
.scrollimation.fade-right.in{
	opacity:1;
	-webkit-transform: translateX(0px);
	-moz-transform: translateX(0px);
	-ms-transform: translateX(0px);
	transform:translateX(0px);
}
.scrollimation.fade-left{
	opacity:0;
	-webkit-transform: translateX(100px);
	-moz-transform: translateX(100px);
	-ms-transform: translateX(100px);
	transform:translateX(100px);
	-webkit-transition: -webkit-transform .4s ease-out,opacity .4s ease-out;
	transition: transform .4s ease-out,opacity .4s ease-out;
}
.scrollimation.fade-left.in{
	opacity:1;
	-webkit-transform: translateX(0px);
	-moz-transform: translateX(0px);
	-ms-transform: translateX(0px);
	transform:translateX(0px);
}
.scrollimation.fade-up{
	opacity:0;
	-webkit-transform: translateY(100px);
	-moz-transform: translateY(100px);
	-ms-transform: translateY(100px);
	transform:translateY(100px);
	-webkit-transition: -webkit-transform .4s ease-out,opacity .4s ease-in;
	transition: transform .4s ease-out,opacity .4s ease-in-out;
}
.scrollimation.fade-up.in{
	opacity:1;
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	-ms-transform: translateY(0px);
	transform:translateY(0px);
}
.scrollimation.d1{
	transition-delay: .1s;
}
.scrollimation.d2{
	transition-delay: .2s;
}
.scrollimation.d3{
	transition-delay: .3s;
}
.scrollimation.d4{
	transition-delay: .4s;
}
.touch .scrollimation.fade-in{
	opacity:1;
}
.touch .scrollimation.scale-in{
	opacity:1;
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	transform:scale(1);
}
.touch .scrollimation.fade-right{
	opacity:1;
	-webkit-transform: translateX(0px);
	-moz-transform: translateX(0px);
	-ms-transform: translateX(0px);
	transform:translateX(0px);
}
.touch .scrollimation.fade-left{
	opacity:1;
	-webkit-transform: translateX(0px);
	-moz-transform: translateX(0px);
	-ms-transform: translateX(0px);
	transform:translateX(0px);
}
.touch .scrollimation.fade-up{
	opacity:1;
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	-ms-transform: translateY(0px);
	transform:translateY(0px);
}

/* -- spin --*/
.spin {
  -webkit-animation: spin 1s infinite linear;
  -moz-animation: spin 1s infinite linear;
  -o-animation: spin 15s infinite linear;
  animation: spin 1s infinite linear;
}
@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
  }
}
@-moz-keyframes spin {
  0% {
    -moz-transform: rotate(0deg);
  }
  100% {
    -moz-transform: rotate(359deg);
  }
}
@-o-keyframes spin {
  0% {
    -o-transform: rotate(0deg);
  }
  100% {
    -o-transform: rotate(359deg);
  }
}


/*------- MEDIA QUERIES --------*/

@media (max-width:640px) {

body.contain.touch,
body.touch {
	padding: 0;
}
body.touch #Page:not(.mvp) {
	padding: var(--container-padding);
}
body.touch #Page.mvp {
	padding: 20px;
}

#SideNav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
    overflow: visible;
    flex-direction: column-reverse;
    background: lime;
    transition: all 0.3s ease-out;
    z-index: 4;
    box-shadow: -1px -5px 14px 9px rgba(255,255,255,1);
	-webkit-box-shadow: -1px -5px 14px 9px rgba(255,255,255,1);
	-moz-box-shadow: -1px -5px 14px 9px rgba(255,255,255,1);
	}
#Tabs {
	/*
	position: absolute;
    bottom: 0;
    left: 0;
    z-index: 2;
    */
    position: fixed;
    width: 100%;
    background: white;
    z-index: 9;
    box-shadow: -1px -5px 14px 9px rgba(255,255,255,1);
	-webkit-box-shadow: -1px -5px 14px 9px rgba(255,255,255,1);
	-moz-box-shadow: -1px -5px 14px 9px rgba(255,255,255,1);
	}
#Categories,
#Projects,
#btn-Home {
    position: relative;
    transition: all 0.3s ease-out;
}
#btn-Home {
	display: inline-flex !important;
	}
#btn-Fullscreen {
	display: none;
	}
#SideNav #Logo {
	display: none !important;
	}

#SideNav .wrapper {
    position: fixed;
    bottom: -100vh;
    width: 100%;
    height: fit-content;
    max-height: 70vh;
    border: 1px solid;
    border-radius: 0;
    transition: all 0.3s ease-out;
	}
#SideNav .wrapper.in {
	bottom: 3em;
	}
#SideNav a,
#SideNav #Tabs a {
	font-size: 1em;
	}
#Filters {
	top: unset !important;
	bottom: 2em;
	}
.slick-block {
	width: 100vw !important;
	}
.slick-block .col-2 div {
    width: 100vw !important;
	}
.col-2 img {
	width: 100%;
	}
.bannertext,
.bannerpic {
	width: 100% !important;
	max-width: unset !important;
	padding: 0;
	margin: 0;
	}
#LoadZone iframe {
	margin-bottom: 2.5em;
	margin-right: 0;
	width: 100%;
	}
h1 {
    font-size: 1.8rem;
	line-height: 1.2;
	max-width: 95%;
	}

}

.rdiobox input[type=radio] {
	opacity: 1;
	border:1px solid black;
	background: pink;
}

.slick-counter{
  position:absolute;
  top:55px;
  left: 100%;
  margin-left: 10px;
  width: 50px;
  padding:5px;
  border-radius:5px;
  white-space: nowrap;
  font-size: 0.8em;
  text-align: center;
  opacity:0.8;
}
.fullscreen .slider {
	display:none;
}
.fullscreen .fs-slider .duplicate {
	display: block;
}
			.fs-slider .duplicate {
	display: none;
}
.fullscreen .fs-slider {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  position: relative;
  margin: auto;
  margin-bottom: auto;
  flex-direction: unset;
}
.fullscreen .fs-slider.slick-initialized .slick-slide,
.slider.slick-initialized.slick-slider {
  display: flex !important;
  align-content: center;
  justify-content: center;
  width: 100%;
}
.fullscreen .slick-list,
.fullscreen .slick-track,
.fullscreen .slide {
	height: inherit !important;
}
.fullscreen #Page, 
.fullscreen .sidescroll #Page {
	overflow: hidden !important;
}
.sidescroll:not(.fullscreen) #Page {
	display: flex;
    height: 100vh;
    overflow-y: hidden;
    overflow-x: visible;
}
.sidescroll:not(.fullscreen) #Page > .container {
    max-width: unset !important;
    width: unset;
	padding: 0 !important;
	display: inline-flex;
	flex-direction:row; 
	align-items:flex-start;
    overflow-x: visible;
}
.sidescroll .intro,
.sidescroll .competencies {
	display:inline-block; 
	max-height:94vh;
	width:40vw;
	padding: 2em;
	margin: 1em;
    margin-right: 4vw;
	overflow:hidden;
	flex-wrap: wrap;
	white-space: normal;
    background: var(--mist);
}
.sidescroll .competencies {
	width: 20vw !important;
    overflow-y: scroll;
    scrollbar-gutter: stable;
    padding-right: 1em;
    border-radius:1em;
    border:4px solid var(--mist);
}
.sidescroll .section-header h1 {
	font-size: 2rem;
}
.sidescroll:not(.fullscreen) .highlights .slide:not(#Cover) {
	display: 	inline;
	box-sizing: border-box;
	position: 	relative;
	margin: 	auto;
	margin-top: 0;
    border: 	2px inset transparent;
	width: 		max-content;
	max-height: 98vh;
    height: calc(100% - 1.5em);
    top: 1.5em;
	max-width: 	80vw;
}
.sidescroll:not(.fullscreen) .highlights.minuimal .slide:not(#Cover) {
    max-width: 110vw;
    top: 2em;
}
#Page.highlights .slide:not(#Cover) {
	max-height: 98vh;
	height: 	100%;
}
#Page.highlights > .container {
	padding-left: 100px;
	max-width: 94vw;
	height: 99%;
}
#Page.highlights {
	scroll-behavior: auto !important;
}

.sidescroll #Menu2 ul {}
.sidescroll #Menu2 ul li{}
.sidescroll:not(.fullscreen) #Menu2 {
	position: absolute;
	left: unset;
	right:0; 
}
#Menu2 {
	position: fixed;
	right: unset;
	left:0; 
	top:0;
	height: 100%;
	/*width: 150px;*/
	padding-left: 1.5em;
	text-align:left;
	font-size: 0.9em;
	clip: rect(0px,20vw, 98vh, 0px);
	z-index:99;

	transition: all 0.3s ease-out;
	scrollbar-gutter: stable;
}
#Menu2:not(.fixed) {
	height: auto !important;
	max-height: 94vh;
	width: auto;
    overflow-y: hidden;
    scrollbar-gutter: stable;
    margin-top: 1em;
    padding-right: 1em;
    border-radius:1em;
    border:4px solid var(--mist);
    background: red;
}
#Menu2:not(.fixed):hover {
	overflow-x: hidden;
	overflow-y: scroll;
}
#Menu2.fixed:before,
#Menu2.fixed:after {
  content: 'x';
  display: block;
  position: absolute;
  left: -120%;
  width: 120%;
  height: calc(100% + 120px);
  top: -60px;
  box-shadow: 60px 0px 60px 50px #fff;
  z-index: -1;
}
#Menu2.fixed {
	position: fixed !important;
	left: 0;
	right: unset !important;
}
html:not(.sidescroll) #Menu2 ul,
#Menu2:not(.fixed) ul {
	top: calc(1em + var(--container-padding)) !important;
}
#Menu2 ul {
	display: inline-flex;
	flex-direction: column;
	flex-wrap: nowrap;
	position: relative;
}
#Menu2 ul li {
	display: inline-flex;
	margin-right:1em;
	margin-bottom: 8px;
}
#Menu2 ul li:hover {
	font-weight: bold;
	cursor: pointer;
}
.sidescroll:not(.fullscreen) #Cover {
	position: relative;
	padding-right: 150px;
}

#SmallScreen-note,
.landscape #SmallScreen-note,
.landscape .touch #SmallScreen-note {
	display: none;
	visibility: hidden;
}
@media(max-width:720px) {
	#SmallScreen-note {
		display: flex;
		visibility: visible;
		flex-direction: column;

		background: var(--mist);
    	white-space: normal;
    	text-align: center;
    	padding: 1em;
    	z-index: 9999;
    	margin: 1em;
    	border-radius: 1em;
	}
}
#SmallScreen-note img {
    display: flex;
    height: 3em;
   	margin: auto;
}


@media (max-width:640px) {
	.action-group {
	}
	.action-group a {
	}
}

.action-group {
	display:inline-flex;
	flex-direction: row;
	position:relative;
	text-align:center;
	align-items: center;
}
.action-group a {
	display: inline-flex;
}
#MVP-note .action-group {
	max-width: 300px;
}

.mvp .slick-prev,
.mvp .slick-next {
/*	margin-right: 3em;*/
	z-index: 90;
}
.mvp .slick-counter {
/*    right: -.5em;
    left: unset;
    margin-left: unset;
    background: red;*/
 }
.mvp #NavPrompt, 
.mvp #NavPrompt:after {
	display: flex;
	visibility: visible;
	pointer-events: auto;
	background: red;
	z-index: 99999;
}
.mvp #ViewMode {
	flex-direction: row;
}
/*.mvp .slider.slick-initialized.slick-slider {
	max-height: 95vh !important;
	margin: auto;
	background: cyan;
	width: 100%;
}
.mvp .slick-list.draggable {
	max-height: 100%;
	width: 100%;
	justify-content: center;
    display: flex;
    height: 95vh !important;
}
.mvp .slick-track {
	display: flex;
	flex-direction: row;
	height: 100%;
	max-width: 100% !important;
	width: 100% !important;
	background: lime;
}
.mvp .slick-slide {
	height: max-content;
	max-height: 100%;
	margin: auto;
	width: 100% !important;
	display: flex;
	float: none;
	left:unset !important;
	position: absolute !important;
}*/
#Images .bannerpic,
.slider * {
	min-width: 0;
	min-height: 0;
}
.mvp .slick-track {
    width: 100% !important;
    height: 100% !important;
    display: flex;
    flex-direction: row;
    background: red;
}
.mvp .slick-initialized .slick-slide {
    display: block;
    width: 100% !important;
}

.splide__track {
}
.splide__slide img,
img.splide__slide {
    vertical-align: unset;
    max-width: 100%;
    height: auto;
    margin: auto !important;
	/*max-height: 95vh;
	width: auto !important;*/
}
.splide__arrow {
    position: absolute;
    top: 3.5em !important; 
    left: unset !important;
    display: block;
    width: 2em !important;
    height: 2em !important;
    padding: 0.5em !important;
	font-size: .7em;
    line-height: 0;
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
    background: transparent;
}
.splide__arrow--prev {
    right: -3em !important;
}
.splide__arrow--next {
    right: -5.5em !important;
}

/*----------------------------*/

.clientlogo {
    max-width: 200px !important;
    max-height: 70px !important;
}
.card .clientlogo {
    margin-bottom: 1em;
    width: auto;
}
.highway-lane .clientlogo {
    max-width: 100% !important;
    width: auto;
    height: auto;
}
#Featured-in .clientlogo {
	max-width: 200px;
	max-height: 60px !important;
}

/*------- CLIENTS --------*/

#Clients-Static {}
#Clients-Static .row {
	display:flex;
	margin: 0.6em 0;
}
#Clients-Static .row .item {
	display: inline-flex;
	align-content: center;
	align-items: center;
	justify-content: center;
	margin: 0.3em 0;
}
@media (max-width:680px) 
{
	#Clients-Static .row.col5 {
		width:50%;
		margin: auto;
	}
	#Clients-Static .row .item {
		width:100%;
		margin: 1em auto;
	}
	#Clients-Static .clientlogo {
		max-width: 100% !important;
	}
}
#Clients-Moving {}
#Client-Processes {}
#Client-Processes .card,
#Client-Processes .item {
    max-width: 240px;
	/*max-height: 300px;*/
	height: 100%;
}
#Client-Processes .card,
.mvp #Quotes .card {
	background: white;
    border: 1px solid silver;
    border-radius: 1em;
    padding: 1em;
}
.mvp #Quotes .card {
	max-width: unset;
	z-index: 1;
	}
#Client-Processes .card ul {
    max-height: 300px;
    scrollbar-gutter: stable both-edges;
    margin-left: -7px;
    margin-right: -7px;
    padding: 0px;
}
#Client-Processes .card ul::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    transition: all, 0.3s;
    border:2px solid white;
    border-radius: 10px;
    background: #eee;
}
#Client-Processes .card ul::-webkit-scrollbar-thumb {
    width: auto;
    border:2px solid white;
    border-radius: 10px;
    background: #e8f0fe;
}
#Client-Processes .card ul::-webkit-scrollbar-thumb:hover {
    background: var(--nvy);
}

#Client-Processes .card li {
	text-align: center;
    margin-bottom: 0.8em;
    font-size: 0.8em;
    line-height: 1.4;
}
#Client-Processes .card li:hover {
	font-weight: 500;
	color: black;
}
#Client-Processes .card .clientlogo,
.mvp #Quotes .card .clientlogo,
#Stats .card .clientlogo {
	max-height: 40px !important;
	max-width: 100% !important;
	margin-top: 0;
}
	.case.card .clientlogo {
	    max-height: 80px;
	    max-width: 200px;
	    margin-top: 0;
	}
#Client-Processes h1 {
	padding-bottom:15px;
}
	#AP-PAY #Client-Processes {
		display: none;
	}
#Client-Processes p,
#Quotes .card p {
	font-size: 1.1em;
	font-style: italic;
	font-weight: 600;
	color: black;
	margin: auto;
	margin-bottom: 1em;
}
#Client-Processes .author,
#Quotes .card .author {
	display: block;
	text-align: inherit;
	margin-top:auto;
	margin-bottom: 1em;
	font-size: 0.9em;
	line-height: 1.4;
	color: grey;
}
#Intro #Quotes {
	z-index: 1;
	flex-direction: row;
	position: absolute;
	top: 0;
	right: 0;
}
#Intro #Quotes .item {
	scale: 0.8;
}
#Intro #Quotes .card {
	max-width: 220px;
    width: 120%;
    padding-bottom: 0.2em;
    -moz-box-shadow:    0 6px 12px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0 6px 12px rgba(0,0,0,0.2);
    box-shadow:         0 6px 12px rgba(0,0,0,0.2);
}
#Intro #Quotes .card .clientlogo {
	display: none;
}

/*------------------------
	Scrolling SLIDERS
-------------------------*/

.infini-slide {
	display:flex;
	flex-flow:column;
	align-items:center;
	margin:0 0 50px 0;
}
@media (max-width:992px) { 
.infini-slide {
	padding:0 20px 0 20px; }
}
.infini-slide .container {
	transition:all .3s ease;
}

/* BANNER SLIDER */

.bannerslide {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 50px auto;
  overflow: visible;
}
.slider-content {
  display: flex;
  width: auto;
  font-size:0;
}
.slider-content .item {
  display: inline-block;
  width:auto;
  float: none;
  padding:0;
  font-size:1em;
}

/* HIGHWAY SLIDER */

div.highway-slider {
	display:flex;
	justify-content:center;
	width:100%;
}
div.highway-barrier {
	overflow:hidden;
	position:relative;
}
	.highway-barrier::before,
	.highway-barrier::after {
		content: " ";
		position:absolute;
		z-index:9;
		width:180px;
		height:100%;	
	}
	.highway-barrier::before {
		top:0;left:0;
		background: linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
	}
	.highway-barrier::after {
		top:0;right:0;
		background: linear-gradient(to left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
	}

#Infini-Logos .highway-barrier {
	background:transparent;
}
ul.highway-lane {
	display:flex;
	height:100%;
}
ul.highway-lane {
	width:calc(180px * 18);
}
ul.highway-lane:hover li.highway-car {
    animation-play-state: paused;
}
li.highway-car {
	flex:1;
	display:flex;
	justify-content:center;
	align-items:center;
	padding: 0.5em 1em;
	background:transparent;
	color:#343434;
	filter: saturate(0);
	opacity: 0.7;
	transition: all .4s ease-in-out;
}
li.highway-car {
	width:180px;
	animation:translateinfinite 35s linear infinite;
}
	@keyframes translateinfinite {
		100% { transform:translateX(calc(-180px * 9)); }
	}
li.highway-car:hover {
	filter: saturate(1);
	opacity: 1;
	cursor: grab;

	-o-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

/*------- COLUMNS --------*/

.col1 .item {
	width:				100%;
}
.col2 .item {
	width:				50%;
}
.col3 .item {
	width:				33.3%;
	justify-content: 	start;
}
.col3 .item:nth-child(3n) {
	clear:				right;
}
.col3 .item:nth-child(3n+1) {
	clear:				both;
}
.col3 .item ul {
	padding:			0 0.8em;
}
.col3 .item p {
	padding: 			0 1.5em;
}
.col3 .glyph:not(.screen),
.col4 .glyph {
    display: 			block;
    font-size: 			72px;
    color: 				var(--apple);
}
.col3 .glyph:not(.screen) img,
.col4 .glyph img {
    height: 			140px;
}
.col4 .item {
	width:				25%;
	justify-content: 	start;
}
.col4 .item:nth-child(4n) {
	clear:				right;
}
.col4 .item:nth-child(5n) {
	clear:				both;
}
.col5 .item {
	width:				20%;
	justify-content: 	start;
}
.col5 .item:nth-child(5n) {
	clear:				right;
}
.col5 .item:nth-child(6n) {
	clear:				both;
}
.col6 .item {
	width:				16%;
	justify-content: 	start;
}
.item {
	display:			inline-flex;
	flex-direction: 	column;
	position: 			relative;
	min-height: 		1px;
	padding-right: 		15px;
	padding-left: 		15px;
	text-align:			center;
	align-items: 		center;
    justify-content: 	center;
}
.item.widow {
	display:			block;
	width:				100%;
}
.item .glyph {
    margin:				0 auto 20px;
    -webkit-transition:	all .3s ease-out;
    transition:			all .3s ease-out;
}
.item .glyph.screen {
	margin: 0 1em 20px;
    border: 1px solid var(--sky);
}
.item:hover .glyph {
    -webkit-transform:	scale(1.1);
    transform:			scale(1.1);
    -webkit-transition:-webkit-transform .4s ease-out;
    transition:			transform .4s ease-out;
}

.item-stack.rgt .item {
	flex-direction: row-reverse;
	justify-content: end;
	text-align: right;
}
.item-stack.lft .item {
	flex-direction: row;
	justify-content: start;
	text-align: left;
}
.item-stack .item {
	padding:0;
	margin-bottom: 1em;
	width: 100%;
}
.item-stack .item p {
	line-height: 1.5em;
	color: #fff;
	margin-top:0;
	text-align: inherit;
}
.item-stack .item h4 {
	margin: 0;
	margin-bottom: 0.2em;
	width: 100%;
	text-align: inherit;
}
.item-stack .item .glyph {
	top:10px;
	padding: 10px;
	margin:0;
	max-width: 120px;
}
@media (max-width:400px) {
	.item-stack .item {
	    /*padding: 0 1em !important;*/
	    align-items: flex-start;
    	justify-content: flex-start;
	}
	.item-stack .item .glyph {
	    position: absolute;
	    top: 0;
		display: flex;
		align-items: center;
	    padding: 4px;
	    height: 80px;
	    width: auto;
	    max-width: 100px;
	}
	.item-stack .item h4 {
	    display: flex;
	    align-items: center;
	    justify-content: flex-end;
	    text-align: right;
	    margin: 0;
	    height: 80px;
	    width:	100%;
	}
	.item-stack .item h4 br {
		display:block !important;
	}
	.item-stack .item p {
	    text-align: center;
	}

	.item-stack.lft .item .glyph {
	    left: 0;
	    margin-left: 1em;
	    /*max-width: 90px;*/
	}
	.item-stack.lft .item h4 {
	    justify-content: flex-start;
	    text-align: left;
	    padding-left: 7em;
	}

	.item-stack.rgt .item .glyph {
	    right: 0;
	    margin-right: 1em;
	    /*max-width: 90px;*/
	}
	.item-stack.rgt .item h4 {
	    justify-content: flex-end;
	    text-align: right;
	    padding-right: 7em;
	}
}
.item-stack.img-switcher .item:hover {
	cursor: pointer;
	transform: scale(1.02);
}
.item-stack.img-switcher .item:hover p,
.item-stack.img-switcher .item:hover h4 {
}


/*-- CARDS --*/

.card {
	display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}
.card,
.cards a {
	border: 1px solid transparent;
	border-radius: 0;
	position: relative;

	-o-transition: 		all .40s ease-out;
    -moz-transition: 	all .40s ease-out;
    -webkit-transition: all .40s ease-out;
    transition: 		all .40s ease-out;
    
    cursor: pointer;
}
.card a {
	white-space: 		normal;
}
.card:hover,
.screen:hover {
    z-index:            101;

    -o-transform:       scale(1.05);
    -moz-transform:     scale(1.05);
    -webkit-transform:  scale(1.05);
    transform:          scale(1.05);

    -moz-box-shadow:    0 6px 12px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0 6px 12px rgba(0,0,0,0.2);
    box-shadow:         0 6px 12px rgba(0,0,0,0.2);
}

#Toggles {
	left: 100%;
	margin-left: -5.9em;
}
#Toggles a {
}
#Toggles a .nav-icon{
	margin: auto !important;
	font-size: 2.8em !important;
}
#Toggles a i {
	font-style: normal;
    position: absolute;
    width: fit-content;
    right: 100%;
    margin: 1em;
    padding: 0.5em;
    border-radius: 0.5em;
    background: white;
    opacity: 0;
    transition: 0.2s opacity ease-out;
    z-index: 99;
}
#Toggles a:hover i {
	opacity: 1;
}
#Toggles a:hover {
	color: black;
	background: white !important;
	scale: 1.1;
}
#Toggles.lft {
	left: 1.5em;
	margin-left: 0;
}
#Toggles.lft a i {
	right: unset;
	left: 100%;
}
#Toggles.lft #NavPos .nav-icon {
	transform: rotateY(-180deg); 
	transform-origin: center center;
	transition: 0.3s all;
}
#Toggles.vertical {
	flex-direction: column;
	align-items: center;
}
#Toggles.vertical #ToggleInfo .nav-icon{
	position: relative;
	top:-2px;
	margin-left: 10px !important;
}
#Toggles.horizontal {
}

#Clients-Static .column-to-row {
	flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: space-evenly;
    padding: 2em;
}

#Clients-Static .item {
	width: fit-content;
	display: inline-flex;
	padding: 10px 20px;
}

.list-group.panel > a:after,
a[data-toggle=collapse]:after {
	position: absolute;
	right: 0;
	flex-shrink: 0;
    width: 1em;
    height: 1em;
    margin-left: auto;
    content: "";
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%237bb4cc'%3e%3cpath fill-rule='evenodd' class='iconpath' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-size: 1em;
    transition: transform .2s ease-in-out;
}
.list-group.panel > a:not(.collapsed):after,
a[data-toggle=collapse]:not(.collapsed):after {
	transform: rotate(180deg);
}
.list-group.panel > a:not(.collapsed),
a[data-toggle=collapse]:not(.collapsed),
#SideMenuTabs .carousel-tabs .active {
	font-weight: bold;
	text-transform: uppercase;
	color: var(--nvy);
}
.carousel-tabs .tooltip {
	margin-top: -8px;
}

/*------- ACCORDION --------*/

.accordion-header {
	display: flex;
	margin: auto;
	position:relative;
	border-radius: inherit;
}
.accordion-header:after {
	content: "";
	position: relative;
	right: 1em;

	border-left: 0.5em solid transparent;
	border-right: 0.5em solid transparent;
	border-top: 0.5em solid rgba(255, 255, 255, 0.6);
	transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	transition: all 0.3s ease-out;
}
.accordion-header.open:after {
	transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
}
.accordion-header:hover:after {
	border-top-color: var(--nvy);
}
.accordion-content {
	position: relative;
	width: 100%;
	height: auto;
	padding: 0;
	margin: 0 auto;
	overflow: hidden;

	transition: all 0.4s ease-in-out;
	-webkit-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
}
@media (max-width:640px){
	.accordion-content {
		height: 0;
	}
}
.accordion-content.open {
	display: block;
	height: auto;
	padding-bottom: 2em;
	padding-top: 1em;
}
.acccordion span:target ~ .accordion-content {
}

.acccordion .target-fix {
	display: block;
	top: 0;
	left: 0;
	position: fixed;
}
@media (min-width:641px) {
	.stacked .accordion-header {
		pointer-events: none;
	}
}
.stacked .accordion-header:after {
	display: none;
}


/*------- CAROUSEL --------*/

.carousel {
    font-size: 13px; /* same as body */
}
.carousel-tabs {
    position: relative;
    display: flex;
    flex-direction: row;
    flex: 1;
    width: 100%;
    max-width: unset; /*960px*/
    white-space: normal;
    justify-content: center;
    text-align: center;
    list-style: none;
    padding: 0;
    margin: 0 auto;
    border-bottom: 0;
}
	.vertical .carousel-tabs {
		flex-direction: column;
		position: sticky;
		top: 0;
		left: 0;
	}
.carousel-tabs .active {
	color: var(--nvy) !important;
    border-bottom-color: var(--nvy) !important;
}
.carousel-tabs.tab .active {
    background: var(--mist);
    color: var(--nvy);
    text-transform: uppercase;
    font-weight: 600;

    -webkit-border-top-left-radius: 12px;
    -webkit-border-top-right-radius: 12px;
    -moz-border-radius-topleft: 12px;
    -moz-border-radius-topright: 12px;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}
.carousel-tabs li,
.stacker {
    position: relative;
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    width: auto;
    padding: 0.5em;
    margin: 0 0.1em;
    white-space: normal;
    flex-wrap: wrap;
    outline: none;

    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    border-bottom: 0;
    background: white;
    color: inherit;
    cursor: pointer;
    font-size: 1em;
    line-height: 1.1;
}
	.vertical .carousel-tabs li,
	.vertical .stacker {
	    margin-bottom: 1em;
	    border-radius: 0.5em !important;
	    text-align: left;
	    justify-content: flex-start;
	}
	.vertical .stacker {
		height: auto;
	}
.carousel-tabs li:not(.active):hover {
    color: var(--nvy);
    text-transform: uppercase;
}
.carousel-tabs li br {
    display: none;
}
@media (max-width:780px) 
{
    .carousel-tabs li br {
        display: block;
    }
    .carousel-tabs li {
        white-space: normal;
        flex-wrap: wrap;
    }
}

.carousel-tabs li h1 {
    text-transform: none !important;
    font-weight: initial !important;
    margin: 0 !important;
    position: relative;
    top: -0.06em;
}
.carousel-tabs.logo-nav li {
    background: transparent;
    display:inline-block;
    height:100%;
    width:auto;
    padding:0;
    margin: 0;
    border-bottom:0;
}
.carousel-tabs.logo-nav {
	display: block;
    height: 40px;
    width: auto;
    max-width: unset;
    margin-bottom: 10px;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
}
.carousel-tabs .logos {
    display:inline-block;
    height:100%;
    width:auto;
    margin:0 20px;
    transition: 0.3s ease all;
    transform-origin: center center;
    transform: scale(1);
}
.carousel-tabs .logos:hover {
    transform: scale(1.1);
}
.pointy {
    border-bottom: 16px solid var(--nvy);
}
.underline {
	border-bottom: 3px solid var(--nvy);
}
.stacker {
	display: flex;
	position: absolute;
	bottom: 0;
	right: 0;
	padding: 0;
	height: 100%;
	align-items: center;
	z-index: 1;
}

.carousel-inner {
/*	background-color: var(--mist);*/
}
.carousel-inner .container {
    flex-direction: row;
}
.carousel-inner .group {
	overflow: hidden;
}
.carousel-inner .group h1 {
    margin-bottom: revert;
}
.carousel-inner .group h4 {
	font-size: inherit;
    text-align: inherit;
    margin-bottom: 0;
}
.carousel-inner .group h4 br {
    display: none;
}
.carousel-inner .group .title {
    display: none;
    padding: 1.3em 0;
    font-size: 1.3em;
    width: 100%;
    height: 100%;
    transition: all 0.2s ease-in-our;
}
.carousel-inner .group .title,
.carousel-inner .group .title.open,
.carousel-inner .group .title.open:hover {
	background: transparent;
}
.carousel-inner .group .title:hover {
	background: var(--nvy);
}
	.stacked .carousel-inner .group .title {
	    display: block;
	}
	.stacked .carousel-inner .group {
		display: block !important;
	}
	.stacked:not(#Overview) .carousel-tabs li,
	.stacked .slug {
		display: none !important;
	}
	.stacked .list-header {
		display: flex;
	}
	.stacked .submenu {
	}
.carousel-inner .bannertext {
    padding: 1.5em 0 0;
}
.carousel-inner .bannertext .text{
    max-width: 520px;
}
.carousel-inner .glyph {
    width: unset;
}
.carousel-inner .glyph {
    width: unset;
}
.carousel-inner .quote {
    font-size: 1.4em;
    color: white;
    max-width: 600px;
}

@media (max-width:640px) 
{
    .carousel-tabs {
        display: none;
    }
    .carousel-inner.inline {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        white-space: nowrap;
        width: auto;
        padding: 1em;
        overflow-y: hidden;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .carousel-inner {
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: 1em;
        background: none;
    }
    .carousel:not(#AppUI) .carousel-inner > .group {
        display: flex;
        flex-direction: column;
        min-width: 80vw;
        border-radius: 1em;
        margin-right: 0;
        margin-bottom: 1em;
        flex-wrap: wrap;
        white-space: normal;
        background: var(--mist);
    }
    .carousel-inner .group .accordion-header {
    }
    .carousel-inner .group .accordion-content {
    }
    .carousel-inner .group .title {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .carousel-inner .group .btn.floater {
	    margin: auto;
	    right: unset;
	}
	.carousel-inner .group h1 br {
		display: none;
	}
    .carousel-inner .container {
    	flex-direction: column;
    	align-items: center;
    	margin-top: 0;
  		padding-top: 0;
    	min-height: unset;
      	position: relative;
    }
    .carousel-inner .bannertext {
    	padding: 0;
    }
    .carousel-inner .bannerpic {
    }
    .carousel-inner .bannerpic img {
    }

    .carousel hr {
        display: none !important;
    }
}

#SectionName .carousel-tabs li {
    border-bottom: 3px solid transparent;
    background: none;
}
#SectionName .carousel-inner .bannerpic, 
#SectionName .carousel-inner .bannertext {
	width: 50%;
}
#SectionName .bannertext p {
	margin-bottom: 1em;
}
#SectionName .bannerpic img {
	max-height: 360px;
}

.carousel-inner .group, 
.accordion-content {
	overflow: visible;
}

.bannertext .info .clientlogo {
	margin: 0;
}
.bannertext .info {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	width: 21.5vw;
	text-align: left;
	align-items: flex-start;
	position: relative;
	right: 0;
	opacity: 1;
	transition-property: all;
    transition-duration: 0.4s;
    transition-timing-function: ease-out;
    transition-delay: 0.5s;
}
.minimise-text .bannertext .info {
	right:100%;
	opacity: 0;
}

#Brands-big .bannerpic h2,
#Brands-sml .bannerpic h2 {
	display: none;
}

.minimise-text #Brands-big .bannerpic h2,
.minimise-text #Brands-sml .bannerpic h2 {
	display: flex;
}

.minimise-text #Overview {
	flex-direction: column;
}

.minimise-text #Overview .bannertext {
	width: 100% !important;
	padding-bottom: 0 !important;
}

.minimise-text #Overview .bannertext .info {
	width: 100%;
	right: unset;
	opacity: 1;
}
.minimise-text #Overview .bannerpic {
	margin: auto;
}
#Brands {
	padding: 5em 4em;
}
@media (max-width:820px) {
	#Brands {
    padding: 3em 1em;
	}
}
#Brands .bannertext,
#Brands .bannerpic {
	padding: 2em 1em !important;
	justify-content: flex-start;
	align-items: center;
	text-align: center;
}
#Brands .bannertext {
	width: 59%;
}
#Brands .bannerpic {
	width: 41%;
}
#Brands .bannertext > div,
#Brands .bannerpic > div {
	width: 100%;
	height: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}
#Brands .item {
	max-width: 200px;
	height: 60px;
	vertical-align: middle;
	margin: 5px;
}
#Brands .item .clientlogo{
	max-width: 100% !important;
	max-height: 100% !important;
}
@media (max-width:820px){
	#Brands .item {
	max-width: 140px;
	}
}
#Intro.bg {
	background-image: 
    linear-gradient(
      rgba(0, 0, 0, 0.45), 
      rgba(0, 0, 0, 0.45)
    ), url('mvp/cover_06a.png');
    background-size:cover;
    background-position:center center
}
.mvp .pill-list {
	max-width: 85vw;
    margin: auto;
}
.mvp ul.pill-list li {
    background-color: black;
    color: white;
}
@media (max-width:720px) {
	ul.pill-list {
		align-content: center;
		justify-items: center;
	}
	ul.pill-list li {
		font-size: 0.8em;
		white-space: normal;
		flex-wrap: wrap;
	}
}