﻿body {
	background-color:#E9EDE8;
}
/*Mobile Menu styling*/
#search-box input{
	width: 100%;
	margin-right: 0!important;
}
.ecsa-logo {
	margin-top:10px;
}
.section-home--mobile{
	padding-bottom: 20px;
}
.section-home--heading h1{
	color: #000;
}
.section-home--heading #sectionMenu{
	width: 100%;
	margin-top: 10px;
	background-color: none;
	border: 1px solid #fff;
}

.section-home--heading #contentsMenu{
	width: 100%;
	margin-top: 10px;
	background-color: none;
	border: 1px solid #fff;
}

.section-home--heading  button#sectionMenu:hover{
	box-shadow: none;
}

.section-home--heading button#contentsMenu:hover{
	box-shadow: none;
}

ul.section-list{
	padding-left: 0px;
}

.section-home--heading{
	opacity: 0;
	animation: fadein 2s linear 3s forwards;
}
.home-nav--mobile{
}

.home-nav--mobile h1{
	font-size: 1.4em;
}

.home-nav--mobile ul li{
	background-color: #e9ede8;
	margin: 3px 0px;
	font-size: 1.4em;
}
.home-nav--mobile ul li a{
	color: #007cde;
}
.home-nav--mobile ul li a:active{
	border: none;
}

/*End Mobile menu styling*/

.section-banner{
	background: #e9ede8;
	height: 100vh;
	overflow: hidden;
}
.svg-row{
	height:100vh;
}
.openScreen{
	position: absolute;
	top: 0;
	left: 15px;
	height: 100vh;
	width: 100vw;
	opacity: 1;
	background-color: #e9ede8;
	-webkit-animation: adjustWidth 1s linear 2s forwards;
	-moz-animation: adjustWidth 1s linear 2s forwards;
	-o-animation: adjustWidth 1s linear 2s forwards;
	animation: adjustWidth 1s linear 2s forwards;
	z-index: 100
}.tas{
	opacity: 0;
	-webkit-animation: fadeInAndLeft 2s linear 0s forwards;
	-moz-animation: fadeInAndLeft 2s linear 0s forwards;
	-o-animation: fadeInAndLeft 2s linear 0s forwards;
	animation: fadeInAndLeft 2s linear 0s forwards;
	fill: #fff;
}
.openScreen-left{
	opacity: 0;
	-webkit-animation: fadeInAndRight 4s linear 2s forwards;
	-moz-animation: fadeInAndRight 4s linear 2s forwards;
	-o-animation: fadeInAndRight 4s linear 2s forwards;
	animation: fadeInAndRight 4s linear 2s forwards;
}.openHeading{
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	width: 500px;
	margin: auto;
}.st0{clip-path:url(#SVGID_2_);}
.st0{clip-path:url(#SVGID_4_);}
	.st1{fill:#fff;}
	mask path {
    fill: none;
    stroke: white;
    stroke-width: 60;
    stroke-dasharray: 1800 1800;
    stroke-dashoffset: 1800;
    -webkit-animation: brush 5s ease forwards;
    -moz-animation: brush 5s ease forwards;
    -o-animation: brush 5s ease forwards;
    animation: brush 5s ease forwards;
}
.australiaSVG{
	-webkit-animation: adjustHeight 5s ease forwards;
	-moz-animation: adjustHeight 5s ease forwards;
	-o-animation: adjustHeight 5s ease forwards;
	animation: adjustHeight 5s ease forwards;
}
.australiaSVG-1{
	height: 180px;
	margin-left: 120px;

}
.openScreenContent1{
	padding-bottom: 40px;
}
#section-home--select{
	width: 100%;
	text-align: center;
	background-color: #007ddb;
	cursor: pointer;
}
#section-home--select:hover{
	background-color: #006BBB;
}
/*Keyframes and prefixes*/
@keyframes adjustHeight{
	0%{
		height: 600px;
	}
	100%{
		height: 140px;
	}
}
@-webkit-keyframes adjustHeight{
	0%{
		height: 600px;
	}
	100%{
		height: 140px;
	}
}
@-moz-keyframes adjustHeight{
	0%{
		height: 600px;
	}
	100%{
		height: 140px;
	}
}
@-o-keyframes adjustHeight{
	0%{
		height: 600px;
	}
	100%{
		height: 140px;
	}
}
@-webkit-keyframes fadeInAndRight{
	0%{
		opacity: 0;
		transform: translateX(0px);
	}
	50%{
		transform: translateX(40px);
	}
	100%{
		opacity: 1;
	}
}
@-moz-keyframes fadeInAndRight{
	0%{
		opacity: 0;
		transform: translateX(0px);
	}
	50%{
		transform: translateX(40px);
	}
	100%{
		opacity: 1;
	}
}
@-o-keyframes fadeInAndRight{
	0%{
		opacity: 0;
		transform: translateX(0px);
	}
	50%{
		transform: translateX(40px);
	}
	100%{
		opacity: 1;
	}
}
@keyframes fadeInAndRight{
	0%{
		opacity: 0;
		transform: translateX(0px);
	}
	50%{
		transform: translateX(40px);
	}
	100%{
		opacity: 1;
	}
}
@keyframes fadeInAndLeft{
	0%{
		opacity: 0;
		transform: translateX(100px);
	}
	50%{
		transform: translateX(0px);
	}
	100%{
		opacity: 1;
	}
}
@-webkit-keyframes fadeInAndLeft{
	0%{
		opacity: 0;
		transform: translateX(100px);
	}
	50%{
		transform: translateX(0px);
	}
	100%{
		opacity: 1;
	}
}
@-moz-keyframes fadeInAndLeft{
	0%{
		opacity: 0;
		transform: translateX(100px);
	}
	50%{
		transform: translateX(0px);
	}
	100%{
		opacity: 1;
	}
}
@-o-keyframes fadeInAndLeft{
	0%{
		opacity: 0;
		transform: translateX(100px);
	}
	50%{
		transform: translateX(0px);
	}
	100%{
		opacity: 1;
	}
}
@-webkit-keyframes fadeOut{
	0%{
		opacity: 1;
	}
	100%{
		opacity: 0;
	}
}@-o-keyframes fadeOut{
	0%{
		opacity: 1;
	}
	100%{
		opacity: 0;
	}
}@-moz-keyframes fadeOut{
	0%{
		opacity: 1;
	}
	100%{
		opacity: 0;
	}
}@-webkit-keyframes fadeOut{
	0%{
		opacity: 1;
	}
	100%{
		opacity: 0;
	}
}
@keyframes adjustWidth{
	0%{
		width: 100vw;
		opacity: 1;
	}
	97%{
		width: 50vw;
		opacity: 1;
	}
	98%{
		width: 50vw;
		opacity: 0.7;
	}
	99%{
		width: 50vw;
		opacity:0.3;
	}
	100%{
		opacity: 0;
	}
}@-webkit-keyframes adjustWidth{
	0%{
		width: 100vw;
		opacity: 1;
	}
	97%{
		width: 50vw;
		opacity: 1;
	}
	98%{
		width: 50vw;
		opacity: 0.7;
	}
	99%{
		width: 50vw;
		opacity:0.3;
	}
	100%{
		opacity: 0;
	}
}
@-o-keyframes adjustWidth{
	0%{
		width: 100vw;
		opacity: 1;
	}
	97%{
		width: 50vw;
		opacity: 1;
	}
	98%{
		width: 50vw;
		opacity: 0.7;
	}
	99%{
		width: 50vw;
		opacity:0.3;
	}
	100%{
		opacity: 0;
	}
}
@-moz-keyframes adjustWidth{
	0%{
		width: 100vw;
		opacity: 1;
	}
	97%{
		width: 50vw;
		opacity: 1;
	}
	98%{
		width: 50vw;
		opacity: 0.7;
	}
	99%{
		width: 50vw;
		opacity:0.3;
	}
	100%{
		opacity: 0;
	}
}
@keyframes brush {
      0% { stroke-dashoffset: 1800; }
     5% { stroke-dashoffset: 1800; }
     80% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: 0; }
}
@-webkit-keyframes brush {
      0% { stroke-dashoffset: 1800; }
     5% { stroke-dashoffset: 1800; }
     80% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: 0; }
}
@-moz-keyframes brush {
      0% { stroke-dashoffset: 1800; }
     5% { stroke-dashoffset: 1800; }
     80% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: 0; }
}
@-o-keyframes brush {
      0% { stroke-dashoffset: 1800; }
     5% { stroke-dashoffset: 1800; }
     80% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: 0; }
}
@keyframes fadein{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}
@-webkit-keyframes fadein{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}
@-moz-keyframes fadein{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}
@-o-keyframes fadein{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}
/*Keyframes and prefixes*/
@media screen and (max-width: 1199px){
	.openScreen, .section-homepage--svg, .svg-row{
		height: 20vh;
	}
	.openScreen{
		display: none;
	}
}

@media screen and (max-width: 611px){
	.section-home--mobile h1{
		font-size: 2rem;
	}
	.section-home--mobile h2{
		font-size: 2rem
	}
}
/*Check if IE browser*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	.section-home--heading{
		opacity: 0;
		-webkit-animation: fadein 2s linear 1.8s forwards;
		-moz-animation: fadein 2s linear 1.8s forwards;
		-o-animation: fadein 2s linear 1.8s forwards;
		animation: fadein 2s linear 1.8s forwards;
	}
  .st0{
	  opacity: 0;
	  clip-path:url(#SVGID_2_);
	  -webkit-animation: fadein 2s linear 0s forwards;
	  -moz-animation: fadein 2s linear 0s forwards;
	  -o-animation: fadein 2s linear 0s forwards;
	  animation: fadein 2s linear 0s forwards;
	}
  .st0{clip-path:url(#SVGID_4_);}
	.st1{fill:#fff;}
	mask path {
    fill: #fff;
	width:100%;
    stroke: white;
    stroke-width: 60;
    stroke-dashoffset: 100;
}
	.openScreen{
	position: absolute;
	top: 0;
	left: 0;
	height: 100vh;
	width: 100vw;
	opacity: 1;
	background-color: #E9EDE8;
	-webkit-animation: adjustWidth 1s linear 1s forwards;
	-moz-animation: adjustWidth 1s linear 1s forwards;
	-o-animation: adjustWidth 1s linear 1s forwards;
	animation: adjustWidth 1s linear 1s forwards;
	z-index: 100
}
	.tas{
	opacity: 0;
	-webkit-animation: fadeInAndLeft 2s linear 0s forwards;
	-moz-animation: fadeInAndLeft 2s linear 0s forwards;
	-o-animation: fadeInAndLeft 2s linear 0s forwards;
	animation: fadeInAndLeft 2s linear 0s forwards;
	fill: #fff;
}
		
	.australiaSVG{
		height: 240px;
		-webkit-animation: adjustHeight 5s ease forwards;
		-moz-animation: adjustHeight 5s ease forwards;
		-o-animation: adjustHeight 5s ease forwards;
		animation: adjustHeight 5s ease forwards;
	}
	
}