/* general*/

section{
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 125px 100px;
}

nav
	{
	display: flex;
	flex-direction: row;
	}

.back
{
	justify-content: flex-end;
	text-align: center;
}
	
ul.grid{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}


a{
	text-decoration: none;
	color: inherit;
	cursor: pointer;

	opacity: 0.9;
}

a:hover{
	color: #FF0000;
	opacity: 1;
	background-color: #FFFFFF;
}

a.btn{
	color: #fff;
	border-radius: 4px;
	text-transform: uppercase;
	background-color: #2196F3;
	font-weight: 800;
	text-align: center;
}
.text-indent
{
	text-indent: 5%;
}

@media (max-width: 1000px){

	section{
		padding: 100px 50px;
	}

}

@media (max-width: 600px){

	section{
		padding: 80px 30px;
			}
		

}

section h3.title{
	color: #414a4f;
	/*text-transform: capitalize; */
	margin-bottom: 35px;
	text-align: center;
}

section p{
	max-width: 800px;
	text-align: center;
	margin-bottom: 35px;
	padding: 0 20px;
	line-height: 2;
}

@media (max-width: 1000px){

	section{
		padding: 100px 50px;
	}

}

@media (max-width: 600px){

	section{
		padding: 80px 30px;
			}
	nav li
			{
				flex-direction: column;
			}	
}
/* image styles*/
.img-responsive { max-width: 100%; height: auto;}
.img-left{border:none;float:left;margin:0 8px 0 0}
.img-right{border:none;float:right;margin:0 0 0 4px}
.img-middle{border:none;display:block;margin-left:auto;margin-right:auto}
.img-flex-center{display:flex;justify-content:center}
.boarder { border: 3px solid red; border-radius: 20px;}

/*table*/

.table {
	alignment: central;
	table-layout: auto;
	width: 100%;
	color: #000000;
	text-align: center;
}


/*header*/

header{
	/*position: absolute;
	top: 0;
	left: 0;
	z-index: 10;*/
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: row;
	align-items: center;
	color: #000066; /*padding: 35px 100px 0;*/;
	background-image: url('Sydney-Harbour-East.jpeg');
	background-size: cover;
	text-shadow: 1px 1px #FF00FF;
}

header h1
			{
			font-size: 48px;
			text-align: center;
			text-shadow: 2px 2px #FF00FF;

			}
header h3
			{
	font-size: 20px;
	text-align: center;
	text-shadow: 2px 2px #FF00FF;

	}

header nav{
	display: flex;
	flex-direction: row;
	justify-content: space-between;

}

header nav li{
	margin: 0 15px;
	list-style:none;
}

header nav li:first-child{
	margin-left: 0;	
}

header nav li:last-child{
	margin-right: 0;	
}

header section{
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 125px 100px;
}

/*media 1000 */
@media (max-width: 1000px)
{
	header{
		padding: 20px 50px;
	}
}

/*media 700 */
@media (max-width: 700px)
{
	header{
		flex-direction: column;	
		flex-flow: column wrap;
		justify-content: center;}

	

		header h1
				{
		flex-direction: row;
		flex-flow: column wrap;
		justify-content: center;
		font-size: 40px;
		}
	
	  	header nav
	  		{
			display: flex;
			flex-flow: row wrap;
			flex-direction: column;
			}

		
}
/*media 700 end*/

	header h2{
		margin-bottom: 15px;
	}


.hero{
	flex-flow: column wrap;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	color: #fff;
	text-align: center;
}

.header h1{
	font-size: 48px;
	/*margin-bottom: 10px;*/
}

.header h2{
	font-size: 24px;
	margin-bottom: 10px;
}

.hero a.btn{
	padding: 20px 46px;
}

@media (max-width: 800px){

	.hero{
		min-height: 600px;
	}

	.hero h1{
		font-size: 48px;
	}

	.hero h3{
		font-size: 24px;
	}

	.hero a.btn{
		padding: 15px 40px;
	}

}





/* whatsons*/

.whats-on {
	background-color: #EFEFEF;
}

.whats-on h3{
	font-size: 20px;
}

/* what-we-did*/

.whatwedid
{
	background-color: #FFFFFF ;
}

.whatwedid h3{
	font-size: 20px;
}

.whatwedid .p{
	
	text-align:left
	}

.whatwedid .grid li{
	padding: 0 30px;
	flex-basis: 33%;
	text-align: center;
	list-style-type: none;
	text-align:left
}

.whatwedid .grid li i{
    font-size: 50px;
    color: #2196F3;
    margin-bottom: 25px;
    

}

.whatwedid .grid li h4{
	color: #555;
    font-size: 20px;
    margin-bottom: 25px;
}

.whatwedid .grid li p{
    margin.: 0;
}

@media (max-width: 1000px){

	.whatwedid .grid li{
		flex-basis: 70%;
		margin-bottom: 65px;
		
	}

	.whatwedid .grid li:last-child{
		margin-bottom: 0;
	}

}


@media (max-width: 600px){

	.whatwedid .grid li{
		flex-basis: 100%;
	}

}

/* reports*/


.reports
{
	background-color: #f7f7f7 ;
}

.article-center 
	{

	text-align:center;
	}
	
.article-report
	{
	text-align: left;
	padding-right: 10px;
	margin-right: 10px;
	padding-left: 10px;
	margin-left: 10px;
}
	
article a{
	text-decoration: none;
	color: #FF0000;
	cursor: pointer;

}
	
article a:hover
	{
	color: #0000FF;
	opacity: 1;
	background-color: #FFFFFF;
	}

.ul {
	width: 90%;
	display: flex;
	justify-content: space-around;
	list-style-type: none;
}
.ul a{
	text-decoration: none;
	color: #000000;
	cursor: pointer;
}
.ul a:hover
	{
	color: #FF0000;
	opacity: 1;
	background-color: #FFFFFF;
}

/* who we are*/

.whoweare
{
	background-color: #EFEFEF;;
}

.whoweare h3{
	font-size: 20px;
}

.whoweare .grid li{
	padding: 0 30px;
	flex-basis: 33%;
	text-align: center;
	list-style-type: none;
	text-align:left
}

.whoweare .grid li i{
    font-size: 50px;
    color: #2196F3;
    margin-bottom: 25px;
    

}

.whoweare .grid li h4{
	color: #555;
    font-size: 20px;
    margin-bottom: 25px;
}

.whoweared .grid li p{
    margin.: 0;
}

@media (max-width: 1000px){

	.whoweare .grid li{
		flex-basis: 70%;
		margin-bottom: 25px;
		
	}

	.whoweare .grid li:last-child{
		margin-bottom: 0;
	}

}


@media (max-width: 600px){

	.whoweare .grid li{
		flex-basis: 100%;
	}

}

/* oursites*/

.oursites{
	background-color: #FFFFFF;
}

.oursites h3{
	font-size: 20px;
}

.oursites .grid li{
	padding: 0 30px;
	flex-basis: 33%;
	text-align: center;
	list-style-type: none;
	text-align:left
}

.oursites .grid li i{
    font-size: 50px;
    color: #2196F3;
    margin-bottom: 25px;
    

}

.oursites .grid li h4{
	color: #555;
    font-size: 20px;
    margin-bottom: 25px;
}

.oursites .grid li p{
    margin.: 0;
}

@media (max-width: 1000px){

	.oursites .grid li{
		flex-basis: 70%;
		margin-bottom: 65px;
		
	}

	.oursites.grid li:last-child{
		margin-bottom: 0;
	}

}


@media (max-width: 600px){

	.oursites .grid li{
		flex-basis: 100%;
	}

}

/* codes*/

.codes
{
	background-color:#EFEFEF ;
}

.codes h3{
	font-size: 20px;
}

.codes .grid li{
	padding: 0 30px;
	flex-basis: 33%;
	text-align: center;
	list-style-type: none;
	text-align:left
}

.codes .grid li i{
    font-size: 50px;
    color: #2196F3;
    margin-bottom: 25px;
    

}

.codes .grid li h4{
	color: #555;
    font-size: 20px;
    margin-bottom: 25px;
}

.codes .grid li p{
    margin.: 0;
}

@media (max-width: 1000px){

	.codes .grid li{
		flex-basis: 70%;
		margin-bottom: 65px;
		
	}

	.codes.grid li:last-child{
		margin-bottom: 0;
	}

}


@media (max-width: 600px){

	.codes .grid li{
		flex-basis: 100%;
	}

}


/* location*/

.location {
	background-color: #FFFFFF ;
	flex-direction: column;		

}

.location h3{
	font-size: 20px;
}

.location .grid li{
	padding: 0 30px;
	flex-basis: 33%;
	text-align: center;
	list-style-type: none;
	text-align:left
}

.location .grid li i{
    font-size: 50px;
    color: #2196F3;
    margin-bottom: 25px;
    

}

.location .grid li h4{
	color: #555;
    font-size: 20px;
    margin-bottom: 25px;
}

.location .grid li p{
    margin.: 0;
}

.caption {
	justify-content:center;
	text-align:center;
	font-family:serif;
	font-style:italic;
	font-weight:700;
	margin-top:0
	}


@media (max-width: 1000px){

	.location .grid li{
		flex-basis: 70%;
		margin-bottom: 65px;
		
	}

	.location .grid li:last-child{
		margin-bottom: 0;
	}

}


@media (max-width: 600px){

	.location .grid li{
		flex-basis: 100%;
	}

}


/* contact*/


.contact{
	background-color: #EFEFEF;
}

.contact h3{
	font-size: 20px;
}


.contact .grid li{
	padding: 0 30px;
	flex-basis: 33%;
	text-align: center;
	list-style-type: none;
	
}

.contact .grid li i{
    font-size: 50px;
    color: #2196F3;
    margin-bottom: 25px;
    

}

.contact .grid li h4{
	color: #555;
    font-size: 20px;
    margin-bottom: 25px;
}

.contact .grid li p{
    margin.: 0;
}

@media (max-width: 1000px){

	.contact .grid li{
		flex-basis: 70%;
		margin-bottom: 20px;
		
	}

	.contact .grid li:last-child{
		margin-bottom: 0;
	}

}


@media (max-width: 600px){

	.contact .grid li{
		flex-basis: 100%;
	}

}

/*Footer*/

footer{
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	color: #fff;
	background-color: #414a4f;
	font-size: 10px;
	font-weight: bold;
}

@media (max-width: 700px){

	footer{
		padding: 80px 15px;
	}

}

article a {
	text-decoration: none;
	color: #FF0000;
	cursor: pointer;
	font-weight: bold;
}
ul.grid report {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}