/****************************************************************************
*	File Name : 			common.css
*
*	Date Created :			2019-10-09
*	Date Modified:       
*
* Handles the common styles for all pages.
* conversion: 10px = 1.023625vh (1080h)
							10px = 0.5209176vw (1920w)
*******************************************************************************/

/* All conversions use 1920 x 1080 as default reso */

:root {
	--base-vh: 1.023625vh;
	--base-vw: 0.5209176vw;
	--ease-time-0_5: 0.5s;
	--ease-time-0_15: 0.15s;
	--fs-8: calc(9px + (((7680 / 1920) * 8) - 8) * ((100vw - 1920px) / (7680 - 1920))) !important;
	--fs-9: calc(9px + (((7680 / 1920) * 9) - 9) * ((100vw - 1920px) / (7680 - 1920))) !important;
	--fs-10: calc(10px + (((7680 / 1920) * 10) - 10) * ((100vw - 1920px) / (7680 - 1920))) !important;
	--fs-11: calc(11px + (((7680 / 1920) * 11) - 11) * ((100vw - 1920px) / (7680 - 1920))) !important;
	--fs-12: calc(12px + (((7680 / 1920) * 12) - 12) * ((100vw - 1920px) / (7680 - 1920))) !important;
	--fs-13: calc(13px + (((7680 / 1920) * 13) - 13) * ((100vw - 1920px) / (7680 - 1920))) !important;
	--fs-14: calc(14px + (((7680 / 1920) * 14) - 14) * ((100vw - 1920px) / (7680 - 1920))) !important;
	--fs-16: calc(16px + (((7680 / 1920) * 16) - 16) * ((100vw - 1920px) / (7680 - 1920))) !important;
	--fs-18: calc(18px + (((7680 / 1920) * 18) - 18) * ((100vw - 1920px) / (7680 - 1920))) !important;
	--fs-20: calc(20px + (((7680 / 1920) * 20) - 20) * ((100vw - 1920px) / (7680 - 1920))) !important;
	--fs-22: calc(22px + (((7680 / 1920) * 22) - 22) * ((100vw - 1920px) / (7680 - 1920))) !important;
	--fs-24: calc(24px + (((7680 / 1920) * 24) - 24) * ((100vw - 1920px) / (7680 - 1920))) !important;
	--fs-25: calc(25px + (((7680 / 1920) * 25) - 25) * ((100vw - 1920px) / (7680 - 1920))) !important;
	--fs-28: calc(28px + (((7680 / 1920) * 28) - 28) * ((100vw - 1920px) / (7680 - 1920))) !important;
	--fs-32: calc(32px + (((7680 / 1920) * 32) - 32) * ((100vw - 1920px) / (7680 - 1920))) !important;
	--fs-36: calc(36px + (((7680 / 1920) * 36) - 36) * ((100vw - 1920px) / (7680 - 1920))) !important;
	--fs-60: calc(60px + (((7680 / 1920) * 60) - 60) * ((100vw - 1920px) / (7680 - 1920))) !important;
	--fs-215: calc(215px + (((7680 / 1920) * 215) - 215) * ((100vw - 1920px) / (7680 - 1920))) !important;
}

/* Font sizes - using 1920px as the default desktop resolution */

.fs-8 {
	font-size: var(--fs-8);
}

.fs-9 {
	font-size: var(--fs-9);
}

.fs-10 {
	font-size: var(--fs-10);
}

.fs-11 {
	font-size: var(--fs-11);
}

.fs-12 {
	font-size: var(--fs-12);
}

.fs-13 {
	font-size: var(--fs-13);
}

.fs-14 {
	font-size: var(--fs-14);
}

.fs-16 {
	font-size: var(--fs-16);
}

.fs-18 {
	font-size: var(--fs-18);
}

.fs-20 {
	font-size: var(--fs-20);
}

.fs-22 {
	font-size: var(--fs-22);
}

.fs-24 {
	font-size: var(--fs-24);
}

.fs-25 {
	font-size: var(--fs-25);
}

.fs-28 {
	font-size: var(--fs-28);
}

.fs-36 {
	font-size: var(--fs-36);
}

.fs-32 {
	font-size: var(--fs-32);
}

.fs-60 {
	font-size: var(--fs-60);
}

.fs-215 {
	font-size: var(--fs-215);
}

/* Font weights */

.italic {
	font-style: italic;
}

.fw-300 {
	font-weight: 300 !important;
}

.fw-400 {
	font-weight: 400 !important;
}

.fw-500 {
	font-weight: 500 !important;
}

.fw-600 {
	font-weight: 600 !important;
}

.fw-700 {
	font-weight: 700 !important;
}

.fw-800 {
	font-weight: 800 !important;
}

.h-line {
	height: calc(0.5 * var(--base-vw));
	width: calc(8 * var(--base-vw))
}

/* Text decoration and transformations */

.t-transform-upper {
	text-transform: uppercase !important;
}

.t-decoration-underline {
	text-decoration: underline !important;
}

/* Margins */

.ml-auto {
	margin-left: auto;
}

.ml-2_8vw {
	margin-left: 2.8vw !important;
}

.mb-2_8vw {
	margin-bottom: 2.8vw !important;
}

.mr-2_8vw {
	margin-right: 2.8vw !important;
}

.mt-2_8vw {
	margin-top: 2.8vw !important;
}

.mb-1_4vw {
	margin-bottom: 1.4vw !important;
}

.ml-1_4vw {
	margin-left: 1.4vw !important;
}

.mr-1_4vw {
	margin-right: 1.4vw !important;
}

.mt-1_4vw {
	margin-top: 1.4vw !important;
}

.mb-1_1vw {
	margin-bottom: 1.1vw !important;
}

.ml-1_1vw {
	margin-left: 1.1vw !important;
}

.mr-1_1vw {
	margin-right: 1.1vw !important;
}

.mb-0_5vw {
	margin-bottom: 0.5vw !important;
}

.ml-0_5vw {
	margin-left: 0.5vw !important;
}

.mr-0_5vw {
	margin-right: 0.5vw !important;
}

.mt-0_5vw {
	margin-top: 0.5vw !important;
}

.mb-0 {
	margin-bottom: 0 !important;
}

.ml-0 {
	margin-left: 0 !important;
}

.mt-0 {
	margin-top: 0 !important;
}

.mr-0 {
	margin-right: 0 !important;
}

.mr-15_5 {
  margin-right: 15.5vw !important;
}

.mr-45 {
  margin-right: 45vw !important;
}

html, body {
	box-sizing: border-box;
	color: #002939;
	font-family: 'Montserrat', Arial, Helvetica, sans-serif;
	height: 100%;
	scroll-behavior: smooth;
}

html {
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	box-sizing: border-box;
	margin: 0;
	scroll-behavior: smooth;
}

.test-outline {
	outline: 1px solid #f00;
}

.error-highlight {
	box-shadow: 0 0 0 0.1vw #f00 !important;
}

/* Common display types */

.d-block {
	display: block !important;
}

.d-flex {
	display: flex !important;
}

.d-none {
	display: none !important;
}

.d-iblock {
	display: inline-block !important;
}

.d-inline {
	display: inline !important;
}

/* Flex box */

.flex-row-vcenter {
	align-items: center;
	display: flex;
	flex-direction: row;
	justify-content: left;
}

.flex-col-vcenter {
	align-items: center;
	display: flex;
	flex-direction: column;
	justify-content: left;
}

.flex-align-items-flex-start {
	align-items: flex-start;
}

.flex-align-items-flex-end {
	align-items: flex-end;
}

.inline-flex {
	display: inline-flex;
}

.justify-content-center {
	justify-content: center;
}

.justify-content-space-between {
	justify-content: space-between;
}

.justify-content-right {
	justify-content: right;
}

.justify-content-end {
	justify-content: flex-end;
}

.flex-wrap-no-wrap {
	flex-wrap: nowrap;
}

.flex-1 {
	flex: 1;
}

/* Alignment */

.left-align {
	text-align: left !important;
}

.center-align {
	text-align: center !important;
}

button {
	text-transform: uppercase;	
}

#submitLogin {
  border-radius: calc(3 * var(--base-vw));
  color: var(--esc-blue);
  display: block;
  font-size: var(--fs-14);
  font-weight: 600;
  text-transform: uppercase;
  -moz-transition: background-color 0.15s ease 0s;
  -o-transition: background-color 0.15s ease 0s;
  -webkit-transition: background-color 0.15s ease 0s;
  letter-spacing: 0.05vw;
  text-align: center;
  transition: background-color 0.15s ease 0s;
}

button, .button {
  border-radius: calc(3 * var(--base-vw));
  color: #fff;
  display: block;
  font-size: var(--fs-14);
  font-weight: 600;
  text-transform: uppercase;
  -moz-transition: background-color 0.15s ease 0s;
  -o-transition: background-color 0.15s ease 0s;
  -webkit-transition: background-color 0.15s ease 0s;
  letter-spacing: 0.05vw;
  text-align: center;
  transition: background-color 0.15s ease 0s;
}

  button:not(.esc-blue-bg), .button:not(.esc-blue-bg) {
    color: var(--esc-blue);
  }

.sm-button {
	height: calc(4.8 * var(--base-vw));
	line-height: calc(4.8 * var(--base-vw));
	width: calc(20 * var(--base-vw));
}

.lg-button {
	height: calc(6 * var(--base-vw));
	line-height: calc(6 * var(--base-vw));
	width: calc(30 * var(--base-vw));
}

header {
	background: #fff;
	box-shadow: 0 0.3vw 0.7vw 0 rgba(0, 0, 0, 0.1);
	height: calc(8 * var(--base-vw));
	left: 50%;
	position: fixed;
	top: 0;
	transform: translateX(-50%);
	width: 100%;
	z-index: 1000;
}

.inner-container {
	margin: 0 auto;
	height: 100%;
	position: relative;
	width: 61%;
}

#mainLogoContainer {
	width: calc(8.5 * var(--base-vw));
}

.open-slide {
	display: none;
}

.navbar-nav {
	list-style-type: none;
	display: flex;
	align-items: center;
	flex-direction: row;
}

.navbar-nav li {
	margin: 0 0 0 2vw;
}

.navbar-nav li a {
	display: inline-block;
	font-size: var(--fs-16);
	font-weight: 600;
	position: relative;
	padding-bottom: calc(1 * var(--base-vw));
	text-decoration: none;
}

.navbar-nav li a.current {
	font-weight: 700;
}

.navbar-nav li a:before {
	bottom: 0;
	content: '';
	display: block;
	height: calc(0.3 * var(--base-vw));
	left: 0;
	position: absolute;
	-moz-transition: width var(--ease-time-0_15) ease, background var(--ease-time-0_15) ease;
	-o-transition: width var(--ease-time-0_15) ease, background var(--ease-time-0_15) ease;
	-webkit-transition: width var(--ease-time-0_15) ease, background var(--ease-time-0_15) ease;
	transition: width var(--ease-time-0_15) ease, background var(--ease-time-0_15) ease;
	width: 0;
}

.navbar-nav li a:after {
	bottom: 0;
	content: '';
	display: block;
	height: calc(0.3 * var(--base-vw));
	left: 0;
	position: absolute;
	-moz-transition: width var(--ease-time-0_15) ease, background var(--ease-time-0_15) ease;
	-o-transition: width var(--ease-time-0_15) ease, background var(--ease-time-0_15) ease;
	-webkit-transition: width var(--ease-time-0_15) ease, background var(--ease-time-0_15) ease;
	transition: width var(--ease-time-0_15) ease, background var(--ease-time-0_15) ease;
	width: 0;
}

.navbar-nav li a:hover:before {
	background: var(--esc-orange);
	-moz-transition: width var(--ease-time-0_15) ease;
	-o-transition: width var(--ease-time-0_15) ease;
	-webkit-transition: width var(--ease-time-0_15) ease;
	transition: width var(--ease-time-0_15) ease;
	width: 100%;
}

.navbar-nav li a:hover:after {
	background: transparent;
	-moz-transition: all 0s ease;
	-o-transition: all 0s ease;
	-webkit-transition: all 0s ease;
	transition: all 0s ease;
	width: 100%;
}

section {
	position: relative;
}

#sectionHome {
	color: #fff;
	height: calc(93.25 * var(--base-vw));
}

#sectionHome .content-container {
	left: 0%;
	position: absolute;
	top: calc(50% + calc(4 * var(--base-vw)));
	transform: translateY(-50%);
	width: 90%;
}

.bg-image {
	background-color: var(--esc-blue);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	height: 100%;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: -1;
}

.bg-image2 {
  background-color: var(--esc-blue);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}

#sectionHome .bg-image {
  color: #43464A !important;
	background-image: url('/FSLocal/images/home/image-1-1280.jpg');
}

#sectionHome .bg-image2 {
  background-image: url('/FSLocal/images/home/STG-RC-Image-1c.jpg');
}

@media only screen and (min-width: 1600px)
{
  #sectionHome .bg-image {
    background-image: url('/FSLocal/images/home/image-1-1920.jpg');
  }

  #sectionHome .bg-image2 {
    background-image: url('/FSLocal/images/home/STG-RC-Image-1c.jpg');
  }
}

@media only screen and (min-width: 2560px)
{
  #sectionHome .bg-image {
    background-image: url('/FSLocal/images/home/image-1-2560.jpg');
  }

  #sectionHome .bg-image2 {
    background-image: url('/FSLocal/images/home/STG-RC-Image-1c.jpg');
  }
}

#sectionLogin {
	padding: 5vw 0;
}

.module {
	position: relative;
}

.module:first-child {
	width: 47%;
}

#newPlatformContainer {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 0;
	list-style: none;
}

#newPlatformContainer li {
	margin-bottom: 1.1vw;
}

.platform-icon {
	margin-bottom: 0.5vw;
	height: calc(4.8 * var(--base-vw));
	width: calc(4.8 * var(--base-vw));
}

.platform-content {
	font-size: var(--fs-16);
	font-weight: 400;
	line-height: calc(2.4 * var(--base-vw));
}

.platform-icon img {
	height: auto;
	width: 100%;
}

.module:last-child {
	width: 53%;
}

.login-form-outer-container {
	background-color: #fff;
	border-radius: 1vw;
	position: absolute;
	padding: 1.5vw;
	top: calc(-27.5 * var(--base-vw));
}

.login-form-container {
	background-color: var(--gray-shade2);
	border-radius: 0.5vw;
	padding: 3vw;
	text-align: center;
}

#loginForm, #PasswordRecoveryForm {
  width: 100%;
}

textarea,
input[type="text"],
input[type="email"],
input[type="password"] {
	border: calc(0.1 * var(--base-vw)) solid var(--gray-shade3);
	border-radius: 0.2vw;
	color: var(--gray-shade5);
	font-weight: 500;
	height: calc(4.3 * var(--base-vw));
	padding: 0 1vw;
	/*text-transform: uppercase;*/
	width: 100%;
}

textarea {
	height: calc(10 * var(--base-vw));
	padding-bottom: 0.75vw;
	padding-top: 0.75vw;
	max-height: calc(20 * var(--base-vw));
}

#sectionServices {
	color: #fff;
}

#sectionServices .inner-container {
	height: calc(93.25 * var(--base-vw));
}

#sectionServices .bg-image {
    background-image: url('/FSLocal/images/home/image-2-1280.jpg');
}

#sectionServices .bg-image2 {
  background-image: url('/FSLocal/images/home/STG-RC-Image-2b.jpg');
}

@media only screen and (min-width: 1600px)
{
  #sectionServices .bg-image {
    background-image: url('/FSLocal/images/home/image-2-1920.jpg');
  }

  #sectionServices .bg-image2 {
    background-image: url('/FSLocal/images/home/STG-RC-Image-2b.jpg');
  }
}

@media only screen and (min-width: 2560px)
{
  #sectionServices .bg-image {
    background-image: url('/FSLocal/images/home/image-2-2560.jpg');
  }

  #sectionServices .bg-image2 {
    background-image: url('/FSLocal/images/home/STG-RC-Image-2b.jpg');
  }
}

#sectionServices .content-container {
	left: 50%;
	position: absolute;
	top: calc(12 * var(--base-vw));
	text-align: center;
	transform: translateX(-50%);
	width: 100%;
}

#sectionServices .content-container p {
	line-height: calc(2.6 * var(--base-vw));
}

#sectionServicesA {
	background-color: #fff;
	height: calc(58 * var(--base-vw));
}

#sectionServicesA .image-container {
	margin: 0 auto;
	position: relative;
	top: calc(-20 * var(--base-vw));
	width: calc(137 * var(--base-vw));
}

#sectionServicesA .image-container img {
	display: block;
	width: 100%;
}

#sectionServicesB {
	position: relative;
	background-color: var(--gray-shade1);
	height: calc(65 * var(--base-vw));
	z-index: 2;
}

#sectionServicesB .image-container {
	left: calc(22 * var(--base-vw));
	position: relative;
	top: calc(-6.8 * var(--base-vw));
	width: calc(107.865 * var(--base-vw));
}

#sectionServicesB .image-container img {
	display: block;
	width: 100%;
}

#sectionServicesB .custom-list-container {
	color: var(--esc-blue);
	position: absolute;
	right: 20%;
	top: 50%;
	transform: translateY(-50%);
	width: calc(45 * var(--base-vw));
	z-index: 100;
}

.custom-list>div {
	margin-bottom: 1.1vw;
}

.custom-list>div span.fa {
	font-size: var(--fs-11);
	line-height: calc(2.4 * var(--base-vw));
	margin: 0 0.75vw 0 0.5vw;
}

.custom-list .content {
	font-size: var(--fs-16);
	line-height: calc(2.4 * var(--base-vw));
}

.custom-list .content span {
	font-weight: 600;
}

#sectionServicesC {
	background-color: #fff;
	height: calc(76.5 * var(--base-vw));
	position: relative;
	z-index: 1;
}

.fa-quote-left {
	left: 15%;
	position: absolute;
	top: 30%;
	z-index: -1;
}

.quote-container {
	left: 18.5%;
	position: absolute;
	top: 40%;
	width: calc(35 * var(--base-vw));
	z-index: 1;
}

.quote-container p:last-child {
	line-height: calc(3.6 * var(--base-vw));
}

#sectionServicesC .image-container {
	height: 100%;
	margin: 0 auto;
	position: absolute;
	right: 0;
	top: calc(16 * var(--base-vw));
	z-index: 1;
}

#sectionServicesC .image-container img {
	display: block;
	height: 100%;
}

#sectionSolutions {
	color: #fff;
	height: calc(76.7 * var(--base-vw));
	overflow: hidden;
}

#sectionSolutions .bg-image {
  background-image: url('/FSLocal/images/home/image-6-1280.jpg');
}

#sectionSolutions .bg-image2 {
  background-image: url('/FSLocal/images/home/STG-RC-Image-3.jpg');
}

@media only screen and (min-width: 1600px)
{
  #sectionSolutions .bg-image {
    background-image: url('/FSLocal/images/home/image-6-1920.jpg');
  }

  #sectionSolutions .bg-image2 {
    background-image: url('/FSLocal/images/home/STG-RC-Image-3.jpg');
  }
}

@media only screen and (min-width: 2560px)
{
  #sectionSolutions .bg-image {
    background-image: url('/FSLocal/images/home/image-6-2560.jpg');
  }

  #sectionSolutions .bg-image2 {
    background-image: url('/FSLocal/images/home/STG-RC-Image-3.jpg');
  }
}

#sectionSolutions .image-container img {
	display: block;
	width: 100%;
}

.orange-ball {
	background-color: var(--esc-orange);
	border-radius: 50%;
	height: calc(120 * var(--base-vw));
	left: calc(-24 * var(--base-vw));
	position: absolute;
	top: calc((calc(-120 * var(--base-vw)) - calc(-76.7 * var(--base-vw))) / 2);
	z-index: 2;
	width: calc(120 * var(--base-vw));
}

.teal-ball {
  background-color: #006781;
  border-radius: 50%;
  height: calc(120 * var(--base-vw));
  left: calc(-24 * var(--base-vw));
  position: absolute;
  top: calc((calc(-120 * var(--base-vw)) - calc(-76.7 * var(--base-vw))) / 2);
  z-index: 2;
  width: calc(120 * var(--base-vw));
}

#sectionSolutions .custom-list-container {
	color: var(--esc-blue);
	left: 18.5%;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: calc(40 * var(--base-vw));
	z-index: 100;
}

#sectionSolutionsA {
	background-color: var(--esc-blue);
	color: #fff;
}

#sectionSolutionsA .inner-container {
	padding: 4vw 0;
}

#sectionSolutionsA ul {
	display: flex;
	flex-direction: row;
	justify-content: left;
	list-style: none;
}

#sectionSolutionsA ul li {
	border-right: calc(0.1 * var(--base-vw)) solid #707070;
	flex: 1;
	padding: 1.8vw;
}

#sectionSolutionsA ul li:last-child {
	border: none;
}

#sectionSolutionsA ul .icon {
	margin: 0 auto 0.5vw auto;
	width: calc(7.2 * var(--base-vw));
}

#sectionSolutionsA ul .icon img {
	width: 100%;
}

#sectionSolutionsA ul li p {
	line-height: calc(2.4 * var(--base-vw));
}

#sectionFooter {
	background-color: var(--gray-shade2);
	height: calc(54 * var(--base-vw));
	padding: calc(13 * var(--base-vw)) 0;
}

#sectionFooter .inner-container > div:first-child {
	width: calc(20 * var(--base-vw));
}

#footerLogoContainerA {
	margin-bottom: calc(4.4 * var(--base-vw));
	width: 100%;
  text-align: center;
}

#footerLogoContainerB {
  margin-bottom: calc(4.4 * var(--base-vw));
  width: 100%;
  text-align: center;
}

.social-media-icon {
	background-color: var(--esc-blue);
	border-radius: 50%;
	font-size: var(--fs-16);
	height: calc(3.4 * var(--base-vw));
	line-height: calc(3.4 * var(--base-vw));
	text-align: center;
	transition: background-color var(--ease-time-0_15) ease-in-out 0s;
	width: calc(3.4 * var(--base-vw));
}

.social-media-icon:hover {
	background-color: var(--esc-orange);
}

#sectionFooter .inner-container > div:nth-child(2) {
	width: calc(27 * var(--base-vw));
}

#sectionFooter .inner-container > div:nth-child(3) {
	width: calc(30 * var(--base-vw));
}

#sectionFooter .inner-container > div:nth-child(4) {
	width: calc(30 * var(--base-vw));
}

.footer-info-col p,
.footer-info-col h5
{
	line-height: calc(2.4 * var(--base-vw));
	margin-bottom: 0.25vw;
}

#subscribeForm button {
	width: 100%;
}

#copyright {
	height: calc(6 * var(--base-vw));
	line-height: calc(6 * var(--base-vw));
}

/* Font colours */
.notice-colour {
  color: #E00000;
}
