*, *::after, *::before{
    -webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-box-sizing: border-box;   
}


[class^='grid-col-']{ 
	float:left;
	padding:0;
	text-align: left;
}

.grid-col-1of10{
	width: 10%;
	margin-top: 1%;
	margin-left: 10%;
	margin-right: 10%;
}

.grid-col-3of10{
	width:30%;
}

.grid-col-4of10{
	width:40%;
	padding-top: 1%;
	padding-left: 3%;
}

.grid-col-5of10{
	width:50%;
	padding: 5%;
}

.grid-col-6of10{
	width: 60%;
	padding-left: 3%;
	padding-right: 3%;
}

.grid-col-7of10{
	width:70%;
}

.grid-col-10of10{
	width:100%;
	padding: 0;
	margin-bottom: 5%;
	margin-left: 0%;
}

.grid-col-1of5{
	width: 20%;
	margin-left: 40%;
	margin-right: 40%;
}

.grid-col-5of5{
	width: 100%;
	text-align: center;
}

.grid-col-1of2{
	width:50%;
	text-align: center;
}

.grid-col-2of2{
	width: 100%;
	text-align: center;
}

.grid-row:after {
	/*learnt from lecture on 7 Mar */

	content: "";
	/*learnt from lecture on 7 Mar */

	display: block;
	/*learnt from lecture on 7 Mar */

	clear: both;
}

/*@media (max-width: 68.3%){
	.grid-col-5of10{
		width:100%;
	}

	.grid-col-1of5{
		width:40%;
	}
}
*/
@media screen and (max-width: 1001px){
 	.grid-col-5of10{
		width:100%;
	}

	.grid-col-1of5{
		width:40%;
		margin-left: 30%;
		margin-right: 30%;
	}

	.grid-col-3of10{
		width:60%;
	}

	.grid-col-7of10{
		width:100%;
	}

	.grid-col-1of10{
		width:20%;
		margin-left:40%;
		margin-right:40%;
	}

	.transport ul{
		margin:0;
	}

	.transport ol{
		margin-left:5%;
		margin-right:5%;
	}

	.during-an-outage-r ol{
		margin-left: 5%;
		margin-right: 5%;
	}

	.before-an-outage-r ol{
		margin-left:5%;
		margin-right:5%;
	}

	.during-an-outage-b ol{
		margin-left: 5%;
		margin-right: 5%;
	}

	.before-an-outage-b ol{
		padding-left:5%;
		padding-right:5%;
	
	}

	.grid-col-4of10{
		width:80%;
		margin: 10%;
		padding-left:0;
	}

	.grid-col-6of10{
		width: 100%;
	}

	nav img{
		display:inline;
	}

	nav a, button.dropbtn{
		display:none;
	}

	nav{
		padding-top:0.5rem;
	}

	/*button.dropbtn-menubar{
		display:inline;
	}*/

	.Preparation{
		width:130%;
		margin-left:20%;
		margin-right:20%;
	}

	.Report{
		width:130%;
		margin-left:20%;
		margin-right:20%;
	}

	.map img{
		margin:0;
	}

	.align-middle {
		width: 100%;
		margin-left: 5%;
		margin-right: 5%;
	}
}


/*@media(max-width:30em){
	.grid-col-5of10{
		width:100%;
	}
}

@media(max-width:60em){
	.grid-col-10of10{
		width:100%;
	}
}


@media(max-width:60em){
	.business-bg {
		width:100%;
	}
*/