@font-face {
    font-family: Lato-bold;
    src: url(../fonts/Lato-Bold.ttf);
	font-weight:400;
	font-style:normal;
}
@font-face {
    font-family: Lato-light;
    src: url(../fonts/Lato-Light.ttf);
	font-weight:400;
	font-style:normal;
}

:root {
	--half-screen-width: 50vw;
	--full-screen-width: 100vw;
	--half-screen-height: 50vh;
	--full-screen-height: 100vh;
	
	--Yoffset-3rdmill-name: 55vh;
	--ratio-3rdmill-name: calc(860 / 1920 ); /* 0.4479; */
	--width-3rdmill-name: calc(100vw * var(--ratio-3rdmill-name));
	--width-half-3rdmill-name: calc(var(--width-3rdmill-name) * 0.5);	
	--height-3rdmill-name: calc(var(--width-3rdmill-name) * 255 / 860);
	
	--Xoffset-3rdmill-ball: calc(var(--width-half-3rdmill-name) * 0.56);
	--Yoffset-3rdmill-ball: calc(var(--width-half-3rdmill-name) * 0.56);

	--ratio-3rdmill-ball: calc(55 / 1920); /* 0.02864583; */
	--width-3rdmill-ball: calc(100vw * var(--ratio-3rdmill-ball));
	
	--ratio-3rdmill-line2: calc(133 / 1920); /* 0.06927083; */
	--width-3rdmill-line2: calc(100vw * var(--ratio-3rdmill-line2));
	--Xoffset-3rdmill-line2: calc(var(--width-half-3rdmill-name) * 0.96);
	
	--ratio-topleft-line3: calc(289 / 1920); 
	--width-topleft-line3: calc(100vw * var(--ratio-topleft-line3));
	--Xoffset-topleft-line3: calc(var(--width-half-3rdmill-name) * 2);

	--ratio-bottomright-line1: calc(183 / 1920); 
	--width-bottomright-line1: calc(100vw * var(--ratio-bottomright-line1));
	--Xoffset-bottomright-line1: calc(var(--width-half-3rdmill-name) * 0.95);

	--ratio-topright-ball: calc(45 / 1920); 
	--width-topright-ball: calc(100vw * var(--ratio-topright-ball));
	
	--ratio-subtext1-width: calc(600 / 1920);
	--ratio-subtext1-font: calc(54 / 1920);
	--width-subtext1: calc(100vw * var(--ratio-subtext1-width));
	--font-size-subtext1: calc(100vw * var(--ratio-subtext1-font));
	--Xoffset-subtext1: calc(50% - (var(--width-subtext1) * 0.5));

	--ratio-subtext2-width: calc(650 / 1920);
	--ratio-subtext2-font: calc(38 / 1920);
	--width-subtext2: calc(100vw * var(--ratio-subtext2-width));
	--font-size-subtext2: calc(100vw * var(--ratio-subtext2-font));
	--Xoffset-subtext2: calc(50% - (var(--width-subtext2) * 0.5));
	
}

* {
	box-sizing: border-box;
	font-family: Lato-light, Arial, Helvetica, sans-serif;
	margin:0; 
	padding:0; 
}
body
{
	text-align: left;
	font-family:16px Lato-light, Arial, Helvetica, sans-serif; 
}

h1, h2, h3, h4, strong
{
	font-family: Lato-bold, Lato-light, Arial, Helvetica, sans-serif;
	font-weight: normal;
}

pre { margin: 0; }

textarea {
	resize: vertical;
	min-height: 5rem;
}

.v-pad-1 
{
	padding-top: 1rem;
	padding-bottom: 1rem;
}

.v-pad-2 
{
	padding-top: 2rem;
	padding-bottom: 2rem;
}


/*
.hide {
	display: none;
}
*/
.inner-container-size1 { 
	width: 100%;
	max-width: 1280px;
	margin: auto;
}
.inner-container-size2 { 
	width: 100%;
	max-width: 1400px;
	margin: auto;
}

/* mobile menu */

.navbar-header {
	float: right;
}
.navbar-toggle {
	display: block !important;
}

/*
.navbar-expand-custom {
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
}
.navbar-expand-custom .navbar-nav {
	flex-direction: row;
}
.navbar-expand-custom .navbar-nav .nav-link {
	padding-right: .5rem;
	padding-left: .5rem;
}
.navbar-expand-custom .navbar-collapse {
	display: flex!important;
}
.navbar-expand-custom .navbar-toggler {
	display: none;
}
*/

@media screen and (max-width:1200px){
	
/*
	.inner-container-size1 {
		padding-left: 20px;
		padding-right: 20px;
	}
*/
	
} /* @media screen and (max-width:992px) */


.blue-line {
	float: left;
    width: 50%;
    height: 5px;
    margin-bottom: 10px;
    background-image: linear-gradient(to right, #2e7595, #4fbec2);	
}

input[type='submit'] 
{
	color: #fff;
	background-color: #4fbec2;
	background-image: linear-gradient(to right, #2e7595, #4fbec2);	
   	padding: 10px 20px;
    border-radius: 5px;	
	border: 0;
}

/*----------heading-------------*/

.header-bar {
	width: 100%;
	height: 246px; /*370px;*/
	background-color: #0d96d3;
	color: #fff;
	background-image: -webkit-linear-gradient(left, #2e7595, #4fbec2);
	background-image: -o-linear-gradient(left, #2e7595, #4fbec2);
	background-image: linear-gradient(to right, #2e7595, #4fbec2);		
	text-align: center;
	
	display: flex;
	align-items: center;
    justify-content: center;
}

.blue .header-bar {
	width: 100%;
	height: 246px; /*370px;*/
	background-color: #3E95A9;
	color: #fff;
	background-image: -webkit-linear-gradient(left, #0d96d3, #2a2874);
	background-image: -o-linear-gradient(left, #0d96d3, #2a2874);
	background-image: linear-gradient(to right, #0d96d3, #2a2874);	
	text-align: center;
}

.header-bar h1 {
/*	margin-top: 30px;*/
}

.header-bar .the3rdmillName {
	max-width: 600px;
	margin: 50px auto;
	padding: 0 20px;
}
.header-bar .the3rdmillName img {
	width: 100%;
}

header {
	position: relative;
}
header .top-logo-bar.nav-container {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
}
header nav.navbar-inverse.top-menu-bar {
	background-color: transparent;
	border: 0 solid transparent;
	z-index:10;
}

header nav .the-logo {
	float: left;
}
header nav .the-mobile-menu {
	float: right;
}

.outage-message {
	text-align: center;
	padding-top: 20px;
	color: #2a2a2a;
	font-size: 22px;
    font-family: Lato-bold;
	max-width: 1000px;
	width:calc(100% - 170px);
	margin: auto;
	clear: both;
	position: relative;
	top: -60px;
}

header nav.navbar-inverse.top-menu-bar .the-logo img {
	margin-top: 20px;
	margin-left: 5px; /* + 15px from parent container-fluid */
	width: 40px;
}
header nav.navbar-inverse.top-menu-bar .the-phone img {
	width:32px;
	margin-top:-20px
}

header nav.navbar-inverse .navbar-toggle {
	border: 0;
}
header nav.navbar-inverse .navbar-toggle:hover {
    background-color: transparent;
}

header .navbar-toggle .icon-bar {
	width: 100%;
}

header .navbar-header > button.navbar-toggle {
	padding: 0;
    margin-top: 20px;
    margin-right: 10px; /* + 15px from parent container-fluid */
	
}
header .navbar-header > button.navbar-toggle > div {
	width: 30px;
}
header .navbar-header > button.navbar-toggle > img {
	height: 17px;
}	

header .navbar-header > .the-phone  {
	color: #fff;
    margin-top: 16px;
	margin-right: 10px;
	font-size: 1.4em;
	display: inline-block;
}

header .navbar-header > .the-phone .phone-number-wrapper {
	position: relative;
	display:inline-block;
	height: 32px;
	width: 155px; 
	overflow: hidden;
}
header .navbar-header > .the-phone .phone-number {
	position: absolute;
	margin-right: 5px;
	width: 150px; 
	right: -160px;
	text-align: center;
	border-radius: 5px;
		
}
header .navbar-header > .the-phone .phone-number a{
	text-decoration: none;
	color: #fff;
}
header .navbar-header > .the-phone i.fa-phone {
	color: #fff;
}

header .navbar-header > .the-phone:hover .phone-number{
	animation-name: animation-show-phone-number;
	animation-duration: 0.5s;
	animation-timing-function: linear;
	right:0;
}
@-webkit-keyframes animation-show-phone-number {
	0% 		{ right:-160px; }
	100%	{ right:0; }
}
@keyframes animation-show-phone-number {
	0% 		{ right:-160px; }
	100%	{ right:0; }
}
/*-----------------*/
#banner-bar-menu {
	position: fixed;
	height: 100vh;
	width: 80%;
	right:-100vw;
	top:0;
	background-color: #fff;
	background-image: linear-gradient( to right, #007798, #00B1BA );
	z-index: 200;
	
/*	overflow: hidden; */
/*	visibility: hidden;*/
}
#banner-bar-menu .the-header{
	float: right;
	margin-top: 20px;
	margin-right: 30px;
}
#banner-bar-menu .the-header button {
	color: #fff;
	background-color: transparent;
	border:0;
	border-radius: 50%;
}
#banner-bar-menu .the-header button:hover{
	cursor: pointer;
	transition-duration: 2s;

	-moz-transform: rotate(180deg); /* Firefox */
	-webkit-transform: rotate(180deg); /* WebKit */
	-o-transform: rotate(180deg); /* Opera */
	transform: rotate(180deg); /* Standard */

}

#banner-bar-menu .the-body{
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	height: 100%;
}
#banner-bar-menu.showMenu {
	animation-name: animation-show-menu;
	animation-duration: 0.5s;  
	animation-fill-mode: both;
	animation-timing-function: linear;
} 
@-webkit-keyframes animation-show-menu{
	0% 		{ right: -100vw; }
	100%	{ right: 0; }
}
@keyframes animation-show-menu {
	0% 		{ right: -100vw; }
	100%	{ right: 0; }
}

#banner-bar-menu.hideMenu {
	animation-name: animation-hide-menu;
	animation-duration: 0.5s;  
	animation-fill-mode: both;
	animation-timing-function: linear;
} 
@-webkit-keyframes animation-hide-menu {
	0% 		{ right: 0; }
	100%	{ right: -100vw; }
}
@keyframes animation-hide-menu {
	0% 		{ right: 0; }
	100%	{ right: -100vw; }
}


#banner-bar-menu .the-body > div {
	min-width: 300px;
	flex: 50%;
	text-align: center
}

#banner-bar-menu .the-body .image-wrapper {
	width: 80%;
	text-align: right;
	margin: auto;
}

#banner-bar-menu .the-body .theMenu {
	font-size:62px;
	text-align: left;
	width: 400px;
	height: 600px;
	margin:auto;
	padding-left: 10%;
}

#banner-bar-menu .the-body .theMenu a{
	color: #fff;
	font-family: Lato-bold, Arial, Helvetica, sans-serif;
}

@media screen and (max-width: 992px){
	#banner-bar-menu .the-body .left-panel {
		display: none;
	}
	
} /* @media screen and (min-width: 992px) */

@media screen and (max-width: 769px){
	#banner-bar-menu {
		width: 100%;
	}
	
} /* @media screen and (min-width: 769px) */

/*-------------- page-homepage ---------------*/
#page-homepage {
	position: relative;
}

#page-homepage #mobile-banner-bar {
	display:none;
	width: 100%;
	height: 100vh;
	
	background-size:     auto 100%;                      
    background-repeat:   no-repeat;
    background-position: center top;
	
	position: relative;
}

#page-homepage #mobile-banner-bar .sub-text-wrapper{
	position: absolute;
	text-align: center;
	top: 65vh;
	width: 100%;
}

#page-homepage #mobile-banner-bar .sub-text-1,
#page-homepage #mobile-banner-bar .sub-text-2 {
	text-align: center;
	width: 100%;
	color: #fff;
	font-family: Lato-light, Arial, Helvetica, sans-serif;
	font-weight: bold;
}
#page-homepage #mobile-banner-bar .sub-text-1 {
	font-size: 38px;
}
#page-homepage #mobile-banner-bar .sub-text-2 {
	margin-top: 10px;	
	font-size: 28px;
}

#page-homepage #banner-bar {
	width: 100%;
	height: 100vh;
	
	background-size:     cover;                      
    background-repeat:   no-repeat;
    background-position: center;

/*
	display: flex;
	align-items: center;
	justify-content: center;	
*/
	position: relative; /* for animation */
	overflow: hidden;
}

#page-homepage #banner-bar > div.title * {
	color: #fff;
}
#page-homepage #banner-bar > div.title img{
	max-width: var(--width-3rdmill-name); 
}

#page-homepage #banner-bar .sub-text-1{
	font-size: 34px;
	font-family: Lato-light, Arial, Helvetica, sans-serif;
	font-weight: bold;
	margin: 30px 0 20px;
	color: #fff;
}

#page-homepage #banner-bar .sub-text-2{
	font-size: 28px;
	font-family: Lato-light, Arial, Helvetica, sans-serif;
	font-weight: bold;
	margin: 20px 0;
	color: #fff;
}

/*----------heading animation-------------*/

#page-homepage #banner-bar img.animate-obj {
	width: 100%;
/*	height: 100%;*/
}

#page-homepage #banner-bar .title {

	position: absolute;
	width: var(--width-3rdmill-name); /* 950px */
	height: 400px;
	
	left: 0;
	right: 0;
	margin: auto;

	text-align: center;
	z-index: 100;
	
	/*margin-top: calc(50vh - var(--height-3rdmill-name)); */
}

#page-homepage #banner-bar .animation-block-1-blue {

	position: absolute;
	top: 0;
	width: 566px; /*860px; */
	height: 566px; /*860px; */

	z-index: 80;
	
	left: calc(50% - 288px); 
	margin-top: 120px; 
}


#page-homepage #banner-bar .animation-block-2-green {

	position: absolute;
	top: 0;
	width: 330px; /*518px; */
	height: 330px; /*518px; */

	z-index: 90;
	
	left: calc(50% - 155px); 
	margin-top: 360px;
}

#page-homepage #banner-bar .animation-line-2-thirdmill {

	position: absolute;
	top: 0;
	width: var(--width-3rdmill-line2); /* 133px; */
	height: 135px; 

	z-index: 100;
	
	left: calc(50% - var(--Xoffset-3rdmill-line2)); 
	margin-top: 270px;
}

#page-homepage #banner-bar .animation-sub-text-1 {

	position: absolute;
	top: 0;
	left:0;

	width: var(--width-subtext1); /*600px; */
	height: 26px; 
	text-align: center;

	/*margin-top: calc(var(--Yoffset-3rdmill-name) - (var(--height-3rdmill-name) * 0.15)); *//*540px;*/
	margin-top: var(--Yoffset-3rdmill-name); 

	z-index: 100;
	
/*	margin-left: calc(50% - var(--Xoffset-subtext1)); *//*calc(50% - 113px);	*/
}
#page-homepage #banner-bar .animation-sub-text-1 > div {
	font-size: var(--font-size-subtext1);
}


#page-homepage #banner-bar .animation-sub-text-2 {

	position: absolute;
	top: 0;
	left: calc(50% - (var(--width-subtext2) * 0.5)); /*calc(50% - 128px);*/

		
	width: var(--width-subtext2);
	height: 20px; 
	text-align: center;

	z-index: 100;
	
	/*margin-top: 600px;*/
}
#page-homepage #banner-bar .animation-sub-text-2 > div {
	font-size: var(--font-size-subtext2);
}

#page-homepage #banner-bar .animation-line-3-topleft {

	position: absolute;
	top: 0;
	width: var(--width-topleft-line3); /* 289px; */
	height: 277px; 

	z-index: 100;
	
	left: calc(50% - 760px); 
	margin-top: 105px;
}

#page-homepage #banner-bar .animation-line-1-bottomright {

	position: absolute;
	top: 0;
	width: var(--width-bottomright-line1); /*183px; */
	height: 178px; 

	z-index: 100;
	
	left: calc(50% + 400px); 
	margin-top: 595px; 
}
#page-homepage #banner-bar .animation-ball-2-thirdmill {
/*
	animation take care off by javascript :-)

	animation-name: animation-ball-2;
	animation-duration: 1.8s;  
	animation-delay: 2.7s;
	animation-fill-mode: both;
*/	
	/*animation-timing-function: ease-in; */

	position: absolute;
	top: 0; 
	left: calc(50% + var(--Xoffset-3rdmill-ball)); 

	margin-top: -80px;
	width: var(--width-3rdmill-ball); /* 55px; */
	height: var(--width-3rdmill-ball); 

	z-index: 100;
	
}
#page-homepage #banner-bar .animation-ball-1-topright {

	position: absolute;
	top: 0; 

	width: var(--width-topright-ball); /* 45px; */
	height: var(--width-topright-ball); 

	left: calc(50% + (var(--width-half-3rdmill-name) * 1.45)); /*calc(50% + 650px); */
	margin-top: calc(var(--Yoffset-3rdmill-name) - (var(--height-3rdmill-name) * 1.45));

	z-index: 100;
}


@media screen and (min-width: 576px){ /* 769px *//*992px*/
	
	#page-homepage #banner-bar .title {
		animation-name: title;
		animation-duration: 3s;  
		animation-delay: 0.1s;
		animation-fill-mode: both;
	}
	
	@-webkit-keyframes title {
		0% 		{ margin-top: -400px; }
		/*60% 	{ margin-top: 336px; } */
		100% 	{ margin-top: calc(55vh - var(--height-3rdmill-name));  }
	}
	@keyframes title {
		0% 		{ margin-top: -400px; }
		/*60% 	{ margin-top: 336px; } */
		100% 	{ margin-top: calc(55vh - var(--height-3rdmill-name));  }
	}
	
	#page-homepage #banner-bar .animation-block-1-blue {
		animation-name: animation-block-1;
		animation-duration: 3s;  
		animation-delay: 0.1s;
		animation-fill-mode: both;
	}
	@-webkit-keyframes animation-block-1 {
		0% 		{ left: calc(50% + 468px); margin-top: -636px; }
		100% 	{ left: calc(50% - 288px); margin-top: 120px;  }
	}
	@keyframes animation-block-1 {
		0% 		{ left: calc(50% + 468px); margin-top: -636px; }
		100% 	{ left: calc(50% - 288px); margin-top: 120px;  }
	}

	#page-homepage #banner-bar .animation-block-2-green {
		animation-name: animation-block-2;
		animation-duration: 3s;  
		animation-delay: 0.1s;
		animation-fill-mode: both;
	}
	@-webkit-keyframes animation-block-2 {
		/*0% 		{ left: calc(50% - 795px); margin-top: 1000px; }*/
		0% 		{ left: calc(50% - 155px - var(--full-screen-height)); margin-top: calc(360px + var(--full-screen-height)); }
		100% 	{ left: calc(50% - 155px); margin-top: 360px;	 }		
	}
	@keyframes animation-block-2 {
		/*0% 		{ left: calc(50% - 795px); margin-top: 1000px; }*/
		0% 		{ left: calc(50% - 155px - var(--full-screen-height)); margin-top: calc(360px + var(--full-screen-height)); }
		100% 	{ left: calc(50% - 155px); margin-top: 360px;	 }
	}
	#page-homepage #banner-bar .animation-line-2-thirdmill {
		animation-name: animation-line-2;
		animation-duration: 3s;  
		animation-delay: 0.1s;
		animation-fill-mode: both;
	}
	@-webkit-keyframes animation-line-2 {
		0% 		{ left: calc(50% + 420px); margin-top: -570px; }
		100% 	{ left: calc(50% - var(--Xoffset-3rdmill-line2)); margin-top: calc(var(--Yoffset-3rdmill-name) - var(--height-3rdmill-name) - (8px * var(--ratio-3rdmill-name)))}
	}
	@keyframes animation-line-2 {
		0% 		{ left: calc(50% + 420px); margin-top: -570px; }
		100% 	{ left: calc(50% - var(--Xoffset-3rdmill-line2)); margin-top: calc(var(--Yoffset-3rdmill-name) - var(--height-3rdmill-name) - (8px * var(--ratio-3rdmill-name)))}
	}	


	#page-homepage #banner-bar .animation-sub-text-1 {
		animation-name: animation-sub-text-1;
		animation-duration: 3s;  
		animation-delay: 0.1s;
		animation-fill-mode: both;
	}
	@-webkit-keyframes animation-sub-text-1 {
		0% 		{ margin-left: -230px; }
/*		100% 	{ margin-left: calc(50% - 113px); } */
		100% 	{ margin-left: var(--Xoffset-subtext1); } 		
	} 
	@keyframes animation-sub-text-1 {
		0% 		{ margin-left: -230px; }
/*		100% 	{ margin-left: calc(50% - 113px); } */
		100% 	{ margin-left: var(--Xoffset-subtext1); } 
	}
	
	#page-homepage #banner-bar .animation-sub-text-2 {
		animation-name: animation-sub-text-2;
		animation-duration: 2.5s;  
		animation-delay: 0.1s;
		animation-fill-mode: both;
	}
	@-webkit-keyframes animation-sub-text-2 {
	/*	0% 		{ margin-top: 1000px; } */
		0% 		{ margin-top: calc(var(--Yoffset-3rdmill-name) + var(--half-screen-height)); }	
		100% 	{ margin-top: calc(var(--Yoffset-3rdmill-name) + (var(--font-size-subtext1) * 2.0)); }
	} 
	@keyframes animation-sub-text-2 {
	/*	0% 		{ margin-top: 1000px; } */
		0% 		{ margin-top: calc(var(--Yoffset-3rdmill-name) + var(--half-screen-height)); }	
		100% 	{ margin-top: calc(var(--Yoffset-3rdmill-name) + (var(--font-size-subtext1) * 2.0)); }
		
	}
	
	#page-homepage #banner-bar .animation-line-3-topleft {
		animation-name: animation-line-3;
		animation-duration: 3s;  
		animation-delay: 0.1s;
		animation-fill-mode: both;
	}
	@-webkit-keyframes animation-line-3 {
	/*	0% 		{ left: calc(50% - 1260px); margin-top: 605px; }*/
		0% 		{ left: calc(50% - 760px - var(--half-screen-width)); margin-top: calc(105px + var(--half-screen-width)); }	
		/*100% 	{ left: calc(50% - 760px); margin-top: 105px; }*/
		100% 	{ left: calc(50% - var(--Xoffset-topleft-line3)); margin-top: calc(var(--Yoffset-3rdmill-name) - (var(--height-3rdmill-name) * 1.75) );  }
	} 
	@keyframes animation-line-3 {
	/*	0% 		{ left: calc(50% - 1260px); margin-top: 605px; }*/
		0% 		{ left: calc(50% - 760px - var(--half-screen-width)); margin-top: calc(105px + var(--half-screen-width)); }	
		/*100% 	{ left: calc(50% - 760px); margin-top: 105px; }*/
		100% 	{ left: calc(50% - var(--Xoffset-topleft-line3)); margin-top: calc(var(--Yoffset-3rdmill-name) - (var(--height-3rdmill-name) * 1.75) );  }
	}
	
	#page-homepage #banner-bar .animation-line-1-bottomright {
		animation-name: animation-line-1;
		animation-duration: 3s;  
		animation-delay: 0.1s;
		animation-fill-mode: both;
	}
	@-webkit-keyframes animation-line-1 {
	/*	0% 		{ left: calc(50% + 1000px); margin-top:  -5px; }*/
		0% 		{ left: calc(50% + 400px + var(--half-screen-width)); margin-top: calc(595px - var(--half-screen-width)); }
	/*	100% 	{ left: calc(50% + 400px); margin-top: 595px; }*/
		100% 	{ left: calc(50% + var(--Xoffset-bottomright-line1)); margin-top: calc(var(--Yoffset-3rdmill-name) + (var(--height-3rdmill-name) * 0.5) ); }
	}
	@keyframes animation-line-1 {
	/*	0% 		{ left: calc(50% + 1000px); margin-top:  -5px; }*/
		0% 		{ left: calc(50% + 400px + var(--half-screen-width)); margin-top: calc(595px - var(--half-screen-width)); }
	/*	100% 	{ left: calc(50% + 400px); margin-top: 595px; }*/
		100% 	{ left: calc(50% + var(--Xoffset-bottomright-line1)); margin-top: calc(var(--Yoffset-3rdmill-name) + (var(--height-3rdmill-name) * 0.5) ); }
		
	}
	
	#page-homepage #banner-bar .animation-ball-2-thirdmill {
	/*
		animation take care off by javascript :-)

		animation-name: animation-ball-2;
		animation-duration: 1.8s;  
		animation-delay: 2.7s;
		animation-fill-mode: both;
	*/	
		/*animation-timing-function: ease-in; */
/*
		position: absolute;
		top: 0; 
		left: calc(50% + 255px); 

		margin-top: -60px;
		width: 55px; 
		height: 55px; 

		z-index: 100;
*/		
	}
	/*
	@keyframes animation-ball-2 {
		0% 		{ margin-top: -60px; animation-timing-function: ease-in; }
		5%		{ margin-top: 295px; animation-timing-function: ease-out; }
		15%		{ margin-top: 200px; animation-timing-function: ease-in; }
		42%		{ margin-top: 295px; animation-timing-function: ease-out;}
		64%		{ margin-top: 260px; animation-timing-function: ease-in;}

		75%		{ margin-top: 295px; animation-timing-function: ease-out;}
		85%		{ margin-top: 280px; animation-timing-function: ease-in;}

		100%	{ margin-top: 295px; animation-timing-function: linear;}
	}
	*/
	/*
	@keyframes animation-ball-2 {
		0% 		{ margin-top: -60px; animation-timing-function: ease-in; }
		25%		{ margin-top: 295px; animation-timing-function: ease-out; }
		65%		{ margin-top: 200px; animation-timing-function: ease-in; }

		100%	{ margin-top: 295px; animation-timing-function: linear;}
	}
	*/
	/*
	@keyframes animation-ball-2 {
		0% 		{ margin-top: -60px; animation-timing-function: ease-in; }
		25%		{ margin-top: 295px; animation-timing-function: ease-out; }
		65%		{ margin-top: 240px; animation-timing-function: ease-in; }

		100%	{ margin-top: 295px; animation-timing-function: linear;}
	}
	*/
	/*
	#page-homepage #banner-bar .animation-ball-1-topright {

		animation-name: animation-ball-1;
		animation-duration: 4s;  
		animation-delay: 5.2s;
		animation-fill-mode: both;
		animation-timing-function: ease-in;

		position: absolute;
		top: 0; 

		width: 45px; 
		height: 45px; 

		left: calc(50% + 650px); 
		margin-top: 170px;

		z-index: 100;
	}
	*/
	#page-homepage #banner-bar .animation-ball-1-topright {
		animation-name: animation-ball-1;
		animation-duration: 4s;  
		animation-delay: 5.2s;
		animation-fill-mode: both;
		animation-timing-function: ease-in;
	}
	@-webkit-keyframes animation-ball-1 {
		0% 		{ opacity: 0.0; }
		100%	{ opacity: 1.1; }
	}
	@keyframes animation-ball-1 {
		0% 		{ opacity: 0.0; }
		100%	{ opacity: 1.1; }
	}
	
} /*@media screen and (min-width: 769px) */


@media screen and (max-width: 576px){ /* 768px */

	#page-homepage #mobile-banner-bar {
		display:block;
	}
	#page-homepage #banner-bar {
		display:none;
	}
	
	nav.top-menu-bar.homepage .logo-and-group > .the-logo {
		display: none;
	}
	
	nav.top-menu-bar.homepage .logo-and-group > .navbar-header {
		width: 100%;
	}

	nav.top-menu-bar.homepage .logo-and-group > .navbar-header > .the-phone{
		float: left;
	}
	nav.top-menu-bar.homepage .logo-and-group > .navbar-header > .the-phone a{
		float: left;
	}
	nav.top-menu-bar.homepage .logo-and-group > .navbar-header .phone-number {
		left: 10px;
		right: 0;
	}
	
	header nav.navbar-inverse.top-menu-bar .the-phone img {
		margin-top: 0;
	}
	
} /* @media screen and (max-width: 768px) */



/*-----------------*/
#page-homepage #banner-bar-easter-egg {
	width:100%;
	height:100vh;
	position: relative;
}

.hide-main-screen {
	animation-name: hide-main-screen;
	animation-duration: 2s;  
	animation-delay: 0s;
	animation-fill-mode: both;
	animation-timing-function: ease-in;
}
@-webkit-keyframes hide-main-screen {
	0% 		{ left: 0;}
	100%	{ left: -101vw; display: none;}
}
@keyframes hide-main-screen {
	0% 		{ left: 0;}
	100%	{ left: -101vw; display: none;}
}


.show-easter-egg {
	animation-name: show-easter-egg;
	animation-duration: 0.5s;  
	animation-delay: 2s;
	animation-fill-mode: both;
	animation-timing-function: ease-in;
	position: relative;
}
	
@-webkit-keyframes show-ester-egg {
	0% 		{ top: -100vh;}
	100%	{ top: 0; }
}
@keyframes show-ester-egg {
	0% 		{ top: -100vh;}
	100%	{ top: 0; }
}


#page-homepage #banner-bar-easter-egg .animate-thirdmill-text-3d {
	position: absolute;
	animation-name: animate-thirdmill-text-3d;
	animation-duration: 0.5s;  
	animation-delay: 3.1s;
	animation-fill-mode: both;
	text-align: center;
	left: calc((100% - 950px) / 2 );
	
}
@-webkit-keyframes animate-thirdmill-text-3d {
	0% 		{ margin-top: -200vh; }
	/*60% 	{ margin-top: 336px; } */
	100% 	{ margin-top: calc(88vh - 260px); display: block; }
}
@keyframes animate-thirdmill-text-3d {
	0% 		{ margin-top: -200vh; }
	/*60% 	{ margin-top: 336px; } */
	100% 	{ margin-top: calc(88vh - 260px); display: block; }
}

.reveal {
	animation-name: animate-reveal;
	animation-duration: 2s;  
	animation-fill-mode: both;
}

@-webkit-keyframes animate-reveal {
	0% 		{ opacity: 0; }
	100% 	{ opacity: 1; }
}
@keyframes animate-reveal {
	0% 		{ opacity: 0; }
	100% 	{ opacity: 1; }
}


#page-homepage #banner-bar-easter-egg .animate-thirdmill-photos {
	position: absolute;
	overflow: hidden;
	width: 80vw;
	height: 570px;
	left: 10%;
	margin-top: 8vh;
}

#page-homepage #banner-bar-easter-egg .animate-thirdmill-photos img {
	width: 800px;
	height: 500px;
	margin: auto;
}

#page-homepage #banner-bar-easter-egg .owl-carousel-3rdmill-photos{
	position: relative;
}

#page-homepage #banner-bar-easter-egg .owl-nav {
	visibility: hidden;
}

/*-----------------*/
#page-homepage #services-bar {
	background-color: #fff;
	text-align: center;
	min-height: 400px;
	margin: 50px 0 50px;
	
	scroll-margin-top: 100px;
}

#page-homepage #services-bar .title-message {
	color: #2E9ABE;
	font-size: 32px;
	font-family: Lato-bold;
	margin: 50px auto 40px;
	max-width: 820px;
}

#page-homepage #services-bar .flip-buttons.row {
	margin-left: 0;
	margin-right: 0;
}
#page-homepage #services-bar .flip-buttons .service-item {
	margin: 60px auto;
	max-width: 500px;
}

#page-homepage #services-bar .img-wrapper{
	height: 180px;
}
#page-homepage #services-bar .img-wrapper img{
	height: 100%;
}

#page-homepage #services-bar .btn{
	font-size: 18px;
	background-color: #2D2D2D;
	color: #fff;
	min-width: 200px;
	width: 70%;
	height: 38px;
	padding: 5px 10px;
	margin: 30px auto 10px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;

	-webkit-box-shadow: 6px 8px 5px 0px  #aaa;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
	-moz-box-shadow:    6px 8px 5px 0px  #aaa;  /* Firefox 3.5 - 3.6 */
	box-shadow:         6px 8px 5px 0px  #aaa;  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */	
/*
	-webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
	box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
*/
	
}
#page-homepage #services-bar .service-item:hover .btn {
	background-color: #2E9ABE;
	font-family: Lato-bold;
}
#page-homepage #services-bar .service-item:hover .btn-wrapper{
	cursor: pointer;
}

/* flip card */
#page-homepage #services-bar .flip-card {
	background-color: transparent;

	/*width: 300px;*/
	height: 180px;

}

#page-homepage #services-bar .flip-card-inner {
	position: relative;
	width: 100%;
	height: 100%;
	text-align: center;
	transition: transform 0.6s;
	transform-style: preserve-3d;
}

#page-homepage #services-bar .service-item:hover .flip-card .flip-card-inner {
	transform: rotateY(180deg);
	cursor: pointer;
}

#page-homepage #services-bar .flip-card-front, .flip-card-back {
	position: absolute;
	width: 100%;
	height: 100%;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

#page-homepage #services-bar .flip-card-front {
  /*background-color: #bbb;*/
	color: black;
}

#page-homepage #services-bar .flip-card-back {
	padding: 5px 10px;
	background-color: #fff; /*rgba(41,128,185, 0.8);*/ /* #2980b9; */
	color: #222; /*white;*/
	transform: rotateY(180deg);
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
	font-size: 17px;
	
	display: flex;
	align-items: center;
	justify-content: center;

}

@media only screen and (max-width: 1200px) {
	#page-homepage #services-bar .inner-container-size1 {
		padding-left: 20px;
		padding-right: 20px;
	}
	
} /* @media only screen and (max-width: 1200px) */


@media screen and (max-width:992px){

/*
	#page-homepage #services-bar .flip-buttons{
		padding-left: 20px;
		padding-right: 20px;
	}
*/
	
} /* @media screen and (max-width:992px) */

/*-----------------*/
#page-homepage #testimonial-bar {
	background-image: url('../images/diagonal-blue-white-background.png');
	background-size:     100% 100%;
    background-repeat:   no-repeat;
    background-position: center;

	height: 700px;
}

#page-homepage #testimonial-bar .text-top {
    background-repeat:   no-repeat;
    background-position: center;
}

/*
#page-homepage #testimonial-bar .shape {
    height: 100%;
    width: 50px;
    shape-margin: 2.6px;
}
*/
/*
#page-homepage #testimonial-bar .left.theBlock {
	width: 30px;
	height: 500px;
    float: left;

}
*/
#page-homepage #testimonial-bar .shape-left {
    float: left;
    shape-outside: polygon( 0 0, 0 100%, 100% 100% );
	width: 50%;
	min-height: 300px;
	height: 700px;
	background-color: beige;
	opacity: 0;
	position: relative;
	top: 0px;
}

#page-homepage #testimonial-bar .text-top{
	text-align: right;
	color: #fff;
	padding: 50px 20px 0 0;
	font-size: 22px;
}

/*
#page-homepage #testimonial-bar .right.theBlock {
	width: 30px;
	height: 500px;
    float: right;
}
*/

#page-homepage #testimonial-bar .shape-right {
    float: right;
    shape-outside: polygon( 0 0, 100% 0, 100% 100% );
	width: 50%;
	height: 250px;
	background-color: beige;
	opacity: 0;
	position: relative;
	top: 10px; 
}

#page-homepage #testimonial-bar .text-bottom{
	text-align: left;
	color: #000;
	padding-left: 20px;
	/*padding: 50px 0 0 20px;*/
	/*margin-top: 30px;*/
	font-size: 22px;
}

#page-homepage #testimonial-bar .theTestimonials{
	min-height: 400px;
}

#page-homepage #testimonial-bar .theDots {
	font-size: 16px;
	margin-top: 20px;
	height: 50px;
}

#page-homepage #testimonial-bar .theDots > span {
	display: inline-block;
	vertical-align: middle;
	line-height: normal;
}
/*
#page-homepage #testimonial-bar .theDots i {
	float:left;
}
*/
#page-homepage #testimonial-bar .theDots span:hover {
	cursor: pointer;
}
#page-homepage #testimonial-bar .theDots i.active {
	font-size: 1.3em;
	padding-top:2px;
}

#page-homepage #testimonial-bar .fancy-line {
	width: 100%;
	margin-top: 5px;
	clear:both;
}
#page-homepage #testimonial-bar .fancy-blue-line{
	float:left;
	width: 50%;
	height: 5px;
	margin-bottom: 10px;
	background-image: linear-gradient(to right, #0098D9 , #2C2678);
	
}

#page-homepage #testimonial-bar .light-gray-line{
	float:right;
	width: 50%;
	height: 5px;
	margin-bottom: 10px;
	border-top: 1px solid #ccc;
}

@media screen and (max-width:1200px){

	#page-homepage #testimonial-bar .inner-container-size1 {
		padding-left: 20px;
		padding-right: 20px;
	}

} /* @media screen and (max-width:1200px) */

@media screen and (max-width:992px){
	
	#page-homepage #testimonial-bar .shape-left,
	#page-homepage #testimonial-bar .shape-right {
		display: none;
	}
	
	#page-homepage #testimonial-bar {
		background-image: none; 
	}

	#page-homepage #testimonial-bar .inner-container-size1 {
		padding-left: 0;
		padding-right: 0;
	}
	
	#page-homepage #testimonial-bar .text-top {
		background-image: -webkit-linear-gradient(#00C1C4, #017798);
		background-image: -o-linear-gradient(#00C1C4, #017798);
		background-image: linear-gradient(#00C1C4, #017798);	
		
	}
	
	#page-homepage #testimonial-bar .text-top,
	#page-homepage #testimonial-bar .text-bottom {
		padding: 40px;
		text-align: center;
	}

	#page-homepage #testimonial-bar .theDots {
		margin: auto;
		width: 70px;
		text-align: center;
	}
	
} /* @media screen and (max-width:992px){ */

/*-----------------------*/
#page-homepage #enquire-today {
	background-size:     100% 500px;
    background-repeat:   no-repeat;
    background-position: center;

	min-height: 500px;
	margin: 50px 0 50px;
}

#page-homepage #enquire-today .row.step-numbers {
	margin-left: 0;
	margin-right: 0;
}


#page-homepage #enquire-today .img-wrapper {
	padding: 30px;
	background-size:     cover;
    background-repeat:   no-repeat;
    background-position: center;
	max-width: 400px;
	position: relative;
	margin: auto;
/*
	display:flex;
	align-items: center;
	justify-content: center;
*/
	
}
#page-homepage #enquire-today .img-wrapper > .the-text{
	
	color: #2E9ABE;
	width: 200px;
	height: auto; /*120px;*/
	font-size: 18px;
	
	position: absolute;
	top: 145px;
	right: 16%;
	text-align: center;
}

#page-homepage #enquire-today .img-wrapper img {
	margin: 20px;
    max-width: calc(100% - 50px);	
}

#page-homepage #enquire-today .btn {
    background-color: #2D2D2D;
    color: #fff;
    width: 200px;
    height: 36px;
    padding: 5px 10px;
    margin: 30px auto 10px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
	
	-webkit-box-shadow: 6px 8px 5px 0px  #aaa;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
	-moz-box-shadow:    6px 8px 5px 0px  #aaa;  /* Firefox 3.5 - 3.6 */
	box-shadow:         6px 8px 5px 0px  #aaa;  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */	
}
#page-homepage #enquire-today .btn:hover {
	background-color: #2E9ABE;
	font-family: Lato-bold;
}

/*-----------------------*/

#page-homepage #partners-with {
	--partners-with-height:600px;
	
	background-size:     50% var(--partners-width-height);
    background-repeat:   no-repeat;
    background-position: left top;
	min-height: var(--partners-with-height);

	background-color: #DDE5E7; /*#EDF5F7;*/
	background-image: url('../images/partnerships-with-background.png');
}

#page-homepage #partners-with .shape-left {
	
    float: left;
    shape-outside: polygon( 0 0, 0 100%, 100% 100% ); 
	width: 50%;
	height: var(--partners-with-height);
	background-color: beige; /*#EDF5F7;*/
	opacity: 0.0;
	
}

#page-homepage #partners-with .the-logos {
	padding: 100px 0 30px;
	text-align: right;
}

#page-homepage #partners-with > div.inner-container-size1 {
	position: relative;
}

#page-homepage #partners-with .trustworthy-message {
	
	position: absolute;
	left: 40px;
	bottom: 100px;
	min-height:  95px;
	height: auto;
	
	color: #fff;
	font-size: 22px;
}

#page-homepage #partners-with .the-logos-container {
/*	float:left;*/
/*    justify-content: center;*/

	padding: 50px 20px;
}

/*
#page-homepage #partners-with .the-logos-container .group-container{
	position: relative;
	width: calc(100% - 100px);
	overflow:hidden;
	display: inline-block;
}
#page-homepage #partners-with .the-logos-container .logos-group {
	position: relative;
	overflow: hidden;
	width: 15900px;
	height: 400px;
	padding-top: 30px;
	
	animation-duration: 2s;
	transition-timing-function: ease-out; ease-in;
	animation-fill-mode: both;

}
*/

#page-homepage #partners-with div.logo-image-wrapper,
#page-homepage #partners-with .the-logos-container div.logo-image-wrapper {
	display: inline; 
	padding: 0;
/*	margin: 0 10px;*/
	width: 275px;
	height: 275px;
	border-radius: 50%;
	background-color: #fff;
/*	position: absolute;*/
	float: left;
	box-sizing: border-box;
}
#page-homepage #partners-with .the-logos-container div.logo-image {
	
	width: 210px;
	height: 210px;
	margin: 20px;
	padding: 10px;
	background-color: #fff;
	
	background-size: 	 contain;                      
    background-repeat:   no-repeat;
	background-position: center center;
	border-radius: 20%;
	
	box-sizing: border-box;
}

#page-homepage #partners-with div.logo-image-wrapper.bgGray,
#page-homepage #partners-with .the-logos-container div.logo-image.bgGray {
	background-color: #999;
}

#page-homepage #partners-with .the-logos img{
	margin: 30px 20px 30px 20px;
	max-width: 220px;
	max-height: 80px;
}


#page-homepage #partners-with .the-logos-container .btnLeft,
#page-homepage #partners-with .the-logos-container .btnRight {	
	color: #337ab7; /*#fff;*/
/*
	background-color: #555;
	width: 50px;
	height: 50px;
	line-height: 50px;
	margin: 30px;
	text-align: center;
	border-radius: 50%;
*/
}
/*
#page-homepage #partners-with .the-logos-container .btnLeft {
	float: left;
}
#page-homepage #partners-with .the-logos-container .btnRight {	
	float: right;
}
*/
	
#page-homepage #partners-with .arrow-left, 
#page-homepage #partners-with .arrow-right {	
	
	position: relative;
	width:30px;
/*
	line-height: 320px;
	margin-top: 30px;
*/
	overflow:hidden;
	display: inline-block;
}
	
#page-homepage #partners-with .arrow-right {
	text-align: right;
	width:20px; /* because of right margin in owl carousel */
}

#page-homepage #partners-with .arrow-left > a,
#page-homepage #partners-with .arrow-right > a {
	position: absolute;
	bottom: 34px;
	left: 0;
}
#page-homepage #partners-with .group-container {
	width: calc(100% - 66px);
	display: inline-block;
}

#page-homepage #partners-with .owl-nav {
	display:none;
}

/* to fix bug in owl carousel 2 */
.owl-carousel .owl-item img {
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	-webkit-transform: translate3d(0,0,0);
	-moz-transform: translate3d(0,0,0);
	-ms-transform: translate3d(0,0,0);
	
}

@media screen and (max-width:992px){

	#page-homepage #partners-with .shape-left {
		display: none;
	}
	
	#page-homepage #partners-with {
		background-image:none;
		height: auto;
		min-height: auto;
	}
	
	#page-homepage #partners-with .the-logos,
	#page-homepage #partners-with .trustworthy-message {
		padding: 30px;
		text-align: center;
	}
	
	#page-homepage #partners-with .trustworthy-message{
		position: static;
		display:block;
		width: 100%;
		text-align: center;
		margin-top: 50px;
		padding-bottom: 60px;
		padding-top: 80px;
		min-height: 340px;
		
		background-image: -webkit-linear-gradient(#00C1C4, #017798);
		background-image: -o-linear-gradient(#00C1C4, #017798);
		background-image: linear-gradient(#0098D9, #233585);	
		
	}
	
} /* @media screen and (max-width:992px) */

/*---------------------------------------*/

#page-support.slide-page,
#page-cloud.slide-page,
#page-web.slide-page,
#page-consulting.slide-page {
	display:none;
	width: 100%;
	min-height: 100vh;
	position: fixed;

}

.service-item-page {
	font-size: 18px;	
}

.service-item-page > .service-page-body {
	min-height: 100vh;
	margin: 80px 0;
}
.service-item-page > .service-homepage > .thePageDots,
.service-item-page > .service-homepage > .thePageLogo,
.service-item-page > .service-homepage > .thePageText {
	position: absolute;
}

.service-item-page .thePageDots {
	top: 30vh;
	left: 12vw;
	z-index: 100;
}
.service-item-page .thePageLogo {
	top: 40vh;
	left: 12vw;
	/*min-width: 28vw;*/
	max-width: 23vw;
	z-index: 100;
}

.service-item-page .blue-triangle {
	--blue-triangle-ratio: 1134/851; /* h/w */
	position:absolute;
	display: none;
	top:0;
	width: 150px;
	height: calc(150px * var(--blue-triangle-ratio));
	background-image: url('../images/services/blue-corner-triangle.png');
	background-size: contain;
    background-repeat:   no-repeat;
	background-position: center center;
	
	z-index: 0;
}
/*
.service-item-page .white-triangle {
	--border-width: calc(100vw - 19px); 
	position:absolute;
	display: none;
	bottom:0;
	width: 0;
	height: 0;
	border-bottom-width: var(--border-width); / *calc(var(--border-width) * (920 / 675));* /
	border-bottom-style: solid;
	border-bottom-color: #fff;
	border-left-width: calc(var(--border-width) * (675 / 920));
	border-left-style: solid;
	border-left-color: transparent;

	z-index: 0;
}
*/
.service-item-page .thePageText {
	top: 60vh;
	left: 68vw;
	width: 28vw;
	font-size: 18px;
	padding-right: 20px;
	z-index: 100;
}
.service-item-page .thePageLogo img{
	width:100%;
}

.service-item-page .thePageDots > i.fa {
	vertical-align: middle;
	color: #fff;
	margin-right: 2px;
} 
.service-item-page .thePageDots > i:hover {
	cursor: pointer;
}
.service-item-page .thePageDots > i.active {
	font-size: 1.5em;
}

.service-item-page .thePageText h2 {
	color: #2E9ABE;
}


@media screen and (max-width:1200px) {
	.service-item-page > .service-page-body {
		padding:0 20px;	
	}
	
} /* @media screen and (max-width:1200px) */

/* page transition keyframes */

@-webkit-keyframes fadeOutLeft {
	0% 		{ 	left:0; top:0; opacity: 1; }
	100% 	{	left:-100vw; opacity: 0; display: none; }
} /* fadeOutLeft */
@keyframes fadeOutLeft {
	0% 		{ 	left:0; top:0; opacity: 1; }
	100% 	{	left:-100vw; opacity: 0; display: none; }
} /* fadeOutLeft */

@-webkit-keyframes keyframes fadeOutRight {
	0% 		{ 	left:0; top:0; opacity: 1; }
	100% 	{	left:101vw; opacity: 0; display: none; }
} /* fadeOutRight */

@keyframes fadeOutRight {
	0% 		{ 	left:0; top:0; opacity: 1; }
	100% 	{	left:101vw; opacity: 0; display: none; }
} /* fadeOutRight */

@-webkit-keyframes fadeInLeft {
	0% 		{ 	left:-101vw; top:0; display: block; }
	100% 	{	left:0; }
} /* fadeInLeft */
@keyframes fadeInLeft {
	0% 		{ 	left:-101vw; top:0; display: block; }
	100% 	{	left:0; }
} /* fadeInLeft */

@-webkit-keyframes fadeInRight {
	0% 		{ 	left:101vw; top:0; display: block;  }
	100% 	{	left:0; }
} /* fadeInRight */
@keyframes fadeInRight {
	0% 		{ 	left:101vw; top:0; display: block;  }
	100% 	{	left:0; }
} /* fadeInRight */


.slide-page {
 	 /** Basic styles for an animated element */
	animation-duration: 2s;
	transition-timing-function: ease-out; /*ease-in;*/
	animation-fill-mode: both;
	
	width: 100%;
}

.slide-page-fadeoutleft 	{ animation-name: fadeOutLeft; }
.slide-page-fadeoutright 	{ animation-name: fadeOutRight; }
.slide-page-fadeinleft 		{ 
	animation-name: fadeInLeft; 
	display: block !important; 
	top: 0; 
	left: 0;
}
.slide-page-fadeinright		{ 
	animation-name: fadeInRight; 
	display: block !important; 
	top: 0; 
	left: 0;
}

.isPageSliding {
	display: block !important; 
}

/*-------------------------*/
/* page transition keyframes */
@-webkit-keyframes fadeLogosOutLeft {
	0% 		{ 	left:0; top:0; opacity: 1; }
	100% 	{	left:-100vw; opacity: 0; display: none;}
} /* fadeOutLeft */
@keyframes fadeLogosOutLeft {
	0% 		{ 	left:0; top:0; opacity: 1; }
	100% 	{	left:-100vw; opacity: 0; display: none;}
} /* fadeOutLeft */

@-webkit-keyframes fadeLogosOutRight {
	0% 		{ 	left:0; top:0; opacity: 1; }
	100% 	{	left:101vw; opacity: 0; display: none; }
} /* fadeOutRight */
@keyframes fadeLogosOutRight {
	0% 		{ 	left:0; top:0; opacity: 1; }
	100% 	{	left:101vw; opacity: 0; display: none; }
} /* fadeOutRight */

@-webkit-keyframes fadeLogosInLeft {
	0% 		{ 	left:-101vw; top:0; display: inline; }
	100% 	{	left:0; }
} /* fadeInLeft */
@keyframes fadeLogosInLeft {
	0% 		{ 	left:-101vw; top:0; display: inline; }
	100% 	{	left:0; }
} /* fadeInLeft */

@-webkit-keyframes fadeLogosInRight {
	0% 		{ 	left:101vw; top:0; display: inline;  }
	100% 	{	left:0; }
} /* fadeInRight */
@keyframes fadeLogosInRight {
	0% 		{ 	left:101vw; top:0; display: inline;  }
	100% 	{	left:0; }
} /* fadeInRight */


.slide-logos {
 	 /** Basic styles for an animated element */
	transition-timing-function: ease-out; /*ease-in;*/
	animation-fill-mode: both;
	
	width: 100%;
}

.slide-logos-fadeoutleft { 
	animation-name: fadeLogosOutLeft; 
	animation-duration: 2s;	
	display: none; 
}
.slide-logos-fadeoutright { 
	animation-name: fadeLogosOutRight; 
	animation-duration: 2s;	
	display: none; 
}
/*
.slide-logos-fadeoutleft 	{ display: none; }
.slide-logos-fadeoutright 	{ display: none; }
*/

.slide-logos-fadeinleft 		{ 
	animation-name: fadeLogosInLeft; 
	animation-duration: 2s;
	display: inline !important; 
}
.slide-logos-fadeinright		{ 
	animation-name: fadeLogosInRight; 
	animation-duration: 2s;	
	display: inline !important; 
}


.service-item-page ul li {
	margin: 0;
	padding: 6px 0 6px 34px;
	list-style: none;
	background-image: url( '../images/Asset9.png');
	background-repeat: no-repeat;
	background-position: left 12px;
	background-size: 15px;
}

.service-item-page .white-on-blue {
	background-color: #0f72b9;
	color: #fff;
	padding: 20px;
	margin-top: 40px;
}

.service-item-page .white-on-blue ul li {
	background-image: url( '../images/Asset9-white.png');
	background-position: left 20%;
}

.enquire-today .btn {
    background-color: #2D2D2D;
    color: #fff;
    width: 200px;
    height: 36px;
    padding: 5px 10px;
    margin: 30px auto 10px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.enquire-today .btn:hover {
	background-color: #2E9ABE;
	font-family: Lato-bold;
}

.service-item-page .panel-wrapper {
	display: flex;
	flex-wrap: wrap;
}
.service-item-page .left-panel {
	flex: 70%;
	min-width: 300px;
	padding: 20px;
	
}
.service-item-page .right-panel {
	flex: 30%; 
	min-width: 300px;
	padding: 20px;
}

.service-item-page .blue-line {
	float: left;
    width: 70%;
    height: 3px;
    margin-bottom: 10px;
    background-image: linear-gradient(to right, #0098D9 , #2C2678);	
}

.service-item-page > .service-homepage {
	position: relative;
	width: 100%;
	height: 100vh;
	
	background-size:     cover;                      
    background-repeat:   no-repeat;
	background-position: center center;
	/*background-position: 70% 70%;*/
	
}

.service-item-page .logo-paragraph {
	display: flex;
	margin: 20px 0;
	align-items: center;
}

.service-item-page .logo-paragraph > .the-logo {
/*
	flex: 300px;
	min-width: 250px;
*/
	padding: 20px;	
}

.service-item-page .logo-paragraph > .the-blurb {
/*	flex: calc(100% - 300px);*/
}

.service-item-page .logo-paragraph > .the-logo.left {
	text-align: left;
}
.service-item-page .logo-paragraph > .the-logo.right {
	text-align: right;
}

#page-consulting .service-page-body .inner-container-size1 ul {
	max-width: 1100px;
    margin: 40px auto 50px;
    padding-right: 60px;
}

#page-consulting .service-page-body .inner-container-size1 ul li {
	background-position: left 15px;
}


@media only screen and (max-width: 767px) { /* 576px */
	
	.service-item-page > .service-homepage {
		background-position: 70%;
	}
/*
	.service-item-page .white-triangle {
		display: block;
	}
	
*/
	.service-item-page .thePageText {
		left: 50vw;
		width: 47vw;
	}

}

@media only screen and (max-width: 576px ) { 

	.service-item-page .blue-triangle {
		--blue-border-width: calc(120px); 
		display: block;
	}
	
	.service-item-page .thePageText {
		top: 50vh;
		left: 40vw;
		width: 57vw;
		text-align: right;
	}
	
} /* @media only screen and (max-width: 576px) */



/*---------------------------------------*/
footer {
	background-color: #2D2D2D;
	color: #fff;
}

footer a,
footer a:hover,
footer a:visited,
footer a:active{
	text-decoration: none;
	color: #fff;
}

footer .footer-top {
	display: flex;
	flex-wrap: wrap;
	padding: 30px 0;
}

footer .footer-top > div.left-panel {
	flex: 40%;
	min-width: 280px;
	padding: 0 40px 20px 20px;
}

footer .footer-top > div.right-panel {
	flex: 60%;
}

footer .footer-top .footer-left-column {
	max-width: 350px;
}
footer .footer-top .footer-left-column.second-group {
	margin-top: 30px;
}

footer .footer-top .footer-contact-column {
	padding-left: 20px;
}

footer .footer-top .footer-contact-column h4 {
	margin-top: 30px;
}

footer .footer-social-media {
	padding: 30px 20px;
}
footer .footer-social-media img {
	margin-right: 30px;
}

footer .footer-bottom {
	border-top: 1px solid #fff;
	min-height: 80px;
}

footer .footer-bottom .left-panel {
	float: left;
	margin-top: 20px;
	margin-left:20px;
}

footer .footer-bottom .right-panel {
	float: right;
	margin-top: 20px;
	margin-right: 20px;
}

footer .row {
/*
	margin-left: 0;
	margin-right: 0;
*/
}

@media screen and (max-width:1200px){
	
	footer .inner-container-size1 {
		padding-left: 20px;
		padding-right: 20px;
	}

	footer .footer-social-media > a:nth-child(1) {
		padding-left: 20px;
	}
	
} /* @media screen and (max-width:992px) */

@media screen and (max-width:767px){
	
	footer .footer-top > div.left-panel {
		padding-left: 0;
	}
	footer .footer-social-media > a:nth-child(1) {
		padding-left: 0px;
	}
	footer .footer-bottom .left-panel {
		margin-left: 0;
	}
	footer .footer-bottom .right-panel {
		float: none;
		clear: both;
		display:block;
	}
	
} /* @media screen and (max-width:767px) */

/*
#partners-with,
#enquire-today,
#testimonial-bar,
#services-bar,
#banner-bar 
{
	overflow: hidden;
}
*/


/* 
   general post page 
*/
.view-article div
{
	max-width: 100%;
}

.wpcf7-text,
.wpcf7-email,
.wpcf7-textarea,
.the-form .form-field input,
.the-form .form-field textarea,
.the-form .form-field select {
	color: #000;
	width: 100%;
	padding: 10px 5px;
	border: 1px solid #999;
	margin-bottom: 10px;
}
