* {box-sizing: border-box; background-repeat:no-repeat;}

/* ----- HTML STYLES ----- */
/* undo default styling of common (X)HTML browsers */
:link,:visited { text-decoration:none }
ul,ol { list-style:none }
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input,td,tr,th,td, select {margin:0px; padding:0px; border:none;}
p,li {}
p, li, a, input, select, option, label, textarea, button, span, td, button.cky-btn, .cky-accordion-header button.cky-accordion-btn {font-family: "Lato", sans-serif; font-weight:300; font-size:18px; color:#5b5b5b; line-height:1.3em;}
h1,h2,h3,h4,h5,h6 {font-family: "Lato", sans-serif; color:#5b5b5b;}
a img,:link img,:visited img { border:none; }
address {font-style:normal;}
.ErrorLabel {display:none;}
input {-webkit-appearance: none;}
.videoWrapper {position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0; margin-bottom:40px; }
.videoWrapper iframe {position: absolute; top: 0;left: 0; width: 100%; height: 100%;}

#container {position: relative; max-width: 100%; margin: 0px auto; text-align: left;}
#container>main, #container>main>div, header, footer  {min-width:320px; width: 100%; max-width: 100%; float:left; position:relative;}
.wrapper {margin: 0 auto; width: 1250px; max-width: 100%;}
.content {float: left; width: 90%; max-width: 100%; margin:0 5%; position:relative; }
.margin {min-width:320px; width: 100%; max-width: 100%; float:left; position:relative; padding:40px 0;}
.marginTop {min-width:320px; width: 100%; max-width: 100%; float:left; position:relative; padding:40px 0 0 0;}

.fadeIn {position:relative; -webkit-animation-name: fadeIn; -webkit-animation-duration: 0.5s; -webkit-animation-timing-function: ease; -webkit-animation-delay:0.3s; -webkit-animation-fill-mode:forwards;}
@-webkit-keyframes fadeIn {0% {opacity:0; top:50px;} 50% {opacity: 0; top:25px;} 100% {opacity:1; top:0px;}}


@media only screen and (min-width: 768px) {
.margin {padding:50px 0;}
.marginTop {padding:50px 0 0 0;}
}

@media only screen and (min-width: 1024px) {
.margin {padding:75px 0;}
.marginTop {padding:75px 0 0 0;}
}

header {position:absolute; z-index:150;}
header a.logo {display:block; float:left; width:159px; height:72px; background-image:url("/wp-content/themes/msa/assets/logo.png"); background-size:contain; margin-top:15px;}

#scroller {height:525px;}
#scroller .banner {width:100%; height:525px; background-size:cover; background-position: center center;}
#scroller .banner .content {height:525px; display:flex; align-items:center;}
#scroller .banner h2 {color:#fff; font-size:34px; font-weight:bold; margin-bottom:20px;}
#scroller .banner p {color:#fff; font-size:18px;}
#scroller .banner .middle {width:100%;}


@media only screen and (min-width: 768px) {
header a.logo {width:212px; height:96px;}
#scroller {height:700px;}
#scroller .banner {height:700px;}
#scroller .banner .content {height:700px;}
#scroller .banner .middle {width:75%;}
#scroller .banner h2 {font-size:60px;}
#scroller .banner p {font-size:24px;}	
}


a.linkedIn {background-color:#426d98; border-top-left-radius: 5px; border-top-right-radius:5px; padding:14px 25px 14px 52px;  background-image:url("/wp-content/themes/msa/assets/linkedin.png"); background-position:12px 12px ; background-size:28px 28px; position:absolute; bottom:0px; z-index:150; color:#fff; font-size:18px;}

@media only screen and (min-width: 768px) {
a.linkedIn {font-size:22px; background-size:32px 32px; background-position:12px 16px; padding:16px 30px 16px 60px;}
}


.copy {float:left; width:100%;}
.copy p {font-size:18px; color:#5b5b5b; margin-bottom:20px;}
.copy.large p {font-size:24px;}
.copy.large p a {font-size:24px;}
.copy ul {margin-bottom:15px;}
.copy ul li {font-size:18px; color:#5b5b5b; margin-bottom:5px; list-style-type:none; margin-left:20px;}
.copy ul li:before {content: '\2022'; display: block; position: relative; max-width: 0px; max-height: 0px; left: -20px; top: -0px; color: #426d98; font-size: 18px; }
.copy.white ul li:before {color: #fff;}
.copy.first p:first-of-type {font-size:24px;}
.copy.first p:first-of-type a {font-size:24px;}
.copy.firstBlue p:first-of-type {font-size:24px; color:#426d98; border-bottom:1px solid #426d98; padding-bottom:20px;}
.copy h1 {font-size:34px; font-weight:bold; color:#426d98; margin-bottom:20px;}
.copy h2 {font-size:34px; font-weight:bold; color:#426d98; margin-bottom:20px;}
.copy h3 {font-size:32px; font-weight:bold; color:#426d98; margin-bottom:20px;}
.copy h4 {font-size:32px; font-weight:300; color:#426d98; margin-bottom:20px;}
.copy h5 {font-size:24px; font-weight:300; color:#426d98; margin-bottom:20px;}
.copy.white h4 {font-size:24px; font-weight:bold; color:#fff; margin-bottom:20px;}
.copy h3 span {font-weight:300;}

.copy p:last-child, .copy h1:last-child, .copy h2:last-child, .copy h3:last-child, .copy h4:last-child, .copy h5:last-child, .copy h6:last-child {margin-bottom:0px;}
.copy.white p, .copy.white ul li, .copy.white h1, .copy.white h2, .copy.white h3, .copy.white h4, .copy.white h5, .copy.white h6 {color:#fff;}

.whiteButton {background-color:#fff; border-radius:8px; padding:12px 40px 12px 17px; color:#426d98; font-size:20px; font-weight:normal; background-image:url("/wp-content/themes/msa/assets/arrow-blue.png"); background-position:right 14px top 15px; background-size:16px 16px; display:inline-block; transition:0.3s; }
.whiteButton:hover {background-color:#ecf0f5; transition:0.3s; background-position:right 9px top 10px;}

.buttonDemo {position:relative; background-color:#426d98; border-radius:8px; padding:12px 45px 12px 48px; color:#fff; font-size:20px; font-weight:normal; background-image:url("/wp-content/themes/msa/assets/icon-calendar.png"); background-position:left 14px center; background-size:21px 21px; display:inline-block;}
.buttonDemo:hover {background-color:#5b5b5b;}
.buttonExplore {position:relative; background-color:#426d98; border-radius:8px; padding:12px 45px 12px 48px; color:#fff; font-size:20px; font-weight:normal; background-image:url("/wp-content/themes/msa/assets/icon-explore.png"); background-position:left 14px center; background-size:21px 21px; display:inline-block;}
.buttonExplore:hover {background-color:#5b5b5b;}

.buttonDemo:after {display:block; position:absolute; right:15px; top:17px; content:''; width:15px; height:15px; background-image:url("/wp-content/themes/msa/assets/arrow-white.png"); transition:0.3s;}
.buttonExplore:after {display:block; position:absolute; right:15px; top:17px; content:''; width:15px; height:15px; background-image:url("/wp-content/themes/msa/assets/arrow-white.png"); transition:0.3s;}
.buttonDemo:hover:after {right:10px; top:12px; transition:0.3s;}
.buttonExplore:hover:after {right:10px; top:12px; transition:0.3s;}

.copyHolder {float:left; width:100%; margin-bottom:40px; opacity:0;}
.copyHolder:last-child {margin-bottom:0px;}
.copyHolder div:last-child {margin-top:40px;}
.copyHolder div:first-child {margin-top:0px;}
.left {float:left; width:100%;}
.right {float:left; width:100%;}
.wide {float:left; width:100%;}
.divider {width:60%; border-top:1px solid #426d98; height:0px; float:left; margin:0 0 40px 0; opacity:0;}
.imageBottom {margin-bottom:-50px; text-align:center;}
.blue {background-color:#ecf0f5;}
.copyHolder img {max-width:100%;}
.imageCentre {text-align:center;}

@media only screen and (min-width: 768px) {
.copyHolder {display:flex;}
.copyHolder div:last-child {margin-top:0px;}
.copy h1 {font-size:45px;}
.copy h2 {font-size:45px;}
.left {width:47.5%; margin-right:5%;}
.right {float:right; width:47.5%;}
.wide {float:left; width:60%;}
.imageBottom {bottom: -50px; position: absolute; right: 0px;}
.imageCentre {display:flex; align-items: center; justify-content: center;}
.rowReverse {flex-direction: row-reverse; }
	
}

#customers {background-color:#ecf0f5;}
.stages {float:left; width:100%;}
.stage {float:left; width:100%; border-top:1px solid #426d98; padding:10px 0 30px 0;}
.stage img {float:left; padding:20px 0 30px 0;}
.stage>span {float:right; font-weight:bold; font-size:24px; }
.stage .copy p:first-of-type {color:#426d98; font-size:24px;}
.stage .copy h3 {color:#5b5b5b;}

@media only screen and (min-width: 768px) {
.stage {padding:20px 0 40px 0;}
}

@media only screen and (min-width: 1024px) {
.stages {display:flex; border-right:1px solid #426d98; opacity:0;}
.stage {width:16.6666%; border-top:0px; border-left:1px solid #426d98; padding:0 2% 0 2%; cursor:pointer; transition: width 1s; height:750px; position:relative; }
.stage>span {margin-bottom:50px; float:left;}
.stage .copy h3 span {color:#5b5b5b; font-size:32px;}
.stage img {clear:left; padding:0 0 30px 0;}
.stage.active {width:50%; transition: width 1s;}
.stage.active .stageContent {animation-name: fadeIn; animation-duration: 2s;  }
.stage.active h3  { animation-name: fadeIn; animation-duration: 2s;  }
.stage.active img {animation-name: fadeIn; animation-duration: 2s;}
.stage.inactive .stageContent {display:none; }
.stage.inactive h3 {transform:rotate(180deg); position:absolute; bottom:0px; writing-mode: vertical-rl; max-height:500px; }
.stage.inactive img {display:none;}
.stage.inactive:hover h3 {color:#666;}
.stage.inactive:after {display:block; content:''; background-image:url("/wp-content/themes/msa/assets/arrow-blue.png"); width:20px; height:20px; position:absolute; transition:0.3s;  bottom:20px; right:18px;}
.stage.inactive:hover:after {transition:0.3s; bottom:25px; right:13px;}
.stage.copy {margin-bottom:0px;}
}

#nxt {background-image:url("/wp-content/themes/msa/assets/nxt-background.jpg"); background-size:cover; background-position:center center;}
.nxt {margin:20px 0; opacity:0;}
.nxts {margin:30px 0; float:left; width:100%;}
.nxt>span {display:block; color:#fff; font-size:16px; font-weight:bold; margin-bottom:15px;}

@media only screen and (min-width: 768px) {
.nxt {float:left; width:30%; margin-right:5%;}
.nxt:nth-child(2n+1) {clear:left;}
}

@media only screen and (min-width: 1024px) {
.nxt {float:left; width:25%; margin-right:5%;}
	.stageContent {width:85%;}
	.stage {height:700px;}
}

@media only screen and (min-width: 1280px) {
.nxt {float:left; width:20%; margin-right:5%;}
}


footer {background-color:#ecf0f5; opacity:0;}

footer .copy h3 {color:#426d98;}
.form {float:left; width:100%; background-color:#fff; margin:40px 0; padding:15px;}
a.linkedInLink {background-image:url("/wp-content/themes/msa/assets/linkedin-blue.png"); background-position:left center; padding:0 0 0 50px; line-height:40px; display:inline-block;}

#container .form .wpforms-container {margin-top:0px;}
#wpforms-form-61 .wpforms-field {padding-bottom:0px;}
#wpforms-form-61 input[type=text] {font-family:Lato, sans-serif; font-size:18px; color:#5b5b5b; border:0px; border-radius:0px; border-bottom:2px solid #426d98; padding:0px 10px; }
#wpforms-form-61 input[type=email] {font-family:Lato, sans-serif; font-size:18px; color:#5b5b5b; border:0px; border-radius:0px; border-bottom:2px solid #426d98; padding:0px 10px; }
#wpforms-form-61 textarea {font-family:Lato, sans-serif; font-size:18px; color:#5b5b5b; border:0px; border-radius:0px; border-bottom:2px solid #426d98; resize:none; padding:15px 10px 0px 10px; height:100px; margin-bottom:30px;}
#wpforms-form-61 button[type=submit] {background-color:#426d98; border-radius:10px; padding:12px 60px 12px 12px; color:#fff; font-size:18px; font-family:Lato, sans-serif; background-image:url("/wp-content/themes/msa/assets/arrow-white.png"); background-position:right 15px top 15px; background-repeat:no-repeat; transition:0.3s;}
.buttonExplore:hover {background-color:#5b5b5b;}

.menu-footernav-container {margin-bottom:30px; float:left; width:100%;}
#wpforms-form-61 button[type=submit]:hover {background-color:#5b5b5b; transition:0.3s; background-position:right 10px top 10px;}

@media only screen and (min-width: 768px) {
.form {float:right; width:47.5%; margin:0px;}
.subFooter {float:left; width:100%; margin-top:60px;}
.menu-footernav-container {float:left; width:47.5%;}
.copyright {float:right; width:47.5%; text-align:right; bottom: 0px; position: absolute; right: 0px;}
}