*{
	box-sizing:border-box ;
	margin : 0;
	padding :0 ;
}

@media only screen and (min-width : 100px) and (max-width: 400.9px){


.gater{
	color:white ;
	background-color: navy ;
	font-style:italic;
	text-align:center;
	padding:9% 4%;
}
.gater1{
	font-size: 9.5vw;
	font-weight:bold ;
	letter-spacing : 12px;
}

.gater1 a{
	text-decoration : none;
	color : white ;
}
	
	.magi1{
	width : 100% ;
	min-height : 310px ;
	max-height : 400px ;
	clear : both ;
	overflow : auto ;
	display : block ;
	margin-top : 0;
	margin-bottom : 0;
	}
	
	.magi2{
	width : 100% ;
	height : 320px ;		
/*	min-height : 300px ;		
	max-height : 400px ;	*/
	clear : both ;
	display : block ;
	margin-top : -21% ;
	margin-bottom : 0 ;
	overflow : scroll ; 
	}
	
	
	.magiA{
		width : 100%;
		display : block ;
		border : 2px solid orange ;
	}
	.magiA0{
		display : block ;
		width : 50% ;
		float : left ;
		clear : left ;
		padding-top : 5%;
	}
	.magiA1{
		color : blue ;
		font-size : 7vw ;
		letter-spacing : -2px ;
	}
	.magiA1 a{
		color : navy ;
		font-weight : bold ;
	}
	.magiA12{
		width : 14%;
		height : 14% ;
		margin-left : 2%;
		border-radius : 50% ;
	}
	.magiA2{
	width : 100% ;
	}
	.magiA2 a{
	text-decoration : none ;
}

	.magiA13, .magiA23{
		display : block ;
		color : green ;
		font-size : 90% ;
		font-style : italic ;
		text-align : center ;
	}
	.magiA13{
		margin-top : -3%;
	}
	.magiA22{
	color : red ;
	font-size : 100% ;
	font-weight : bold ;
	text-align : center ;
	float : right ;
	width : 50%;
}

	.magiA22A{
		color : maroon ;
		font-size : 90% ;
	}
	.magiA22B{
	width : 98% ;
	min-height : 80px ;
	max-height : 135px ;
	padding-left : 1%;
	}
	.magiB{
	width : 205%;
	padding : 0;
	height : 315px ;	
	font-size : 100% ;
	display : inline-block ;
	color : #4444ff ;
	clear : right ;
	text-align : center ;
	overflow-x : auto ;
	margin-top : 0 ;
	margin-bottom : 0;
	}
	.magiB0{
		width : 100% ;
		height : 140px ;
		padding :0 ;
		margin : 0 ;
	}
	
	
	.magiB1{
		width : 19.6%;
		border-right : 1px solid blue ;
		float : left ;
		text-align : justify ;
		margin : 0 ;
		padding : 0 ;
	}
	
	.magiB1A{
		height : 70px ;
	/*	min-height : 60px ;
		max-height : 100px ;		*/
		font-weight : bold ;
		font-size : 90% ;
		padding :0 2px ;
		margin : 0 ;
		overflow : hidden;
	}
	.magiB1B{
		height : 90px ;
	/*	min-height : 90px ;
		max-height : 150px ;	*/
		width : 100% ;
		font-size : 90% ;
		padding :0 2px ;
		margin : 0 ;
		overflow : hidden ;
	}
	
	.magiB12{
		width : 1.5%;	
		float : left ;
	}
	.magiB01{
		width : 98% ;
		height : 290px ;
		padding :0 ;
		margin : 0 ;
	}
	
	
	.magiB1 a{
		color : #786900 ;
	}
	.magiB11{
		display : block ;
	}


.boyo{
	font-size:120% ;
}

.koin{
	display : block ;
	width:100%;
	height : 450px ;
	margin-top : 0 ;
	outline:3px groove green;
	outline-offset : 5%;
	
}
.koin2{
	display:inline-block;
	width:100%;
	height : 300px ;
	outline:3px groove green;
	margin-top : 1% ;
	overflow-x : scroll ;

}
.dpple{
	width : 100% ;
	height : 120px ;
	}

.magiC1{
		width : 100% ;
		height : 120px ;
		border : 1px solid purple ;
		display : inline-block ;
		overflow : hidden ;
		margin : 0 ;
		
	}
	.magiC11{
		width : 20% ;
		float : left ;
		background-color : gold ;
	}
	.magiC12{
		width : 80% ;
		display : inline-block ;
		float :left ;
	}
		.magiC12A{
		width : 100%;
		height :120px ;
	}
	.magiC12B{
		width : 25%;
		display : block ;
		float : left ;
		text-align : center ;
		font-size : 70% ;
		padding-top : 2px ;
	}
.magiC2{
	display : block ;
		width : 100%;
		min-height : 210px ;
		max-height : 250px ;
	/*	border : 2px solid blue ;	*/
			background-color : white ;
		overflow : auto ;
		margin : -1% 0 0 0 ;
	}
	.magiC20{
		width : 250%;
		min-height : 180px ;
		max-height : 240px ;
		display : inline-block ;
		overflow : auto ;
			padding : 0;
		margin : 0;

	}
	.magiC20A{
		width : 100% ;
		height : 200px ;
		border : 2px solid grey ;
		margin : 0 ;
		padding : 0 ;
	}
	.magiC21{
		width : 20%;
		height : 200px ;
		display : inline-block ;
		float : left ;
				margin : 0 ;
		padding : 0 ;
		overflow : hidden ;
	}

	
.dpple2{
	font-family: "Times New Roman", Times, serif ;
	padding : 5% ;
	background-image : url("riverine.png") ;
	background-repeat : no-repeat ;
	background-size : 100% 300px ;	
}
.sector1{
	font-size : 6.2vw ;
	display : block ;
	color : navy ;
	font-weight : bold ;
}

.sector2{
	font-size : 4.5vw ;
	color : navy ;
	font-style : italic ;
	}


a{
	text-decoration:none;
}

.hei{
width : 100%;
height: 200px;	
}

.blu1{
	display:block ;
	width:90%;
	position:absolute ;
	top:55%;
	right:5%;
	font-size : 80%;
	color:white;
	font-weight:bold;
}

.blu2{
	display:block ;
	width:90%;
	position:absolute ;
	bottom:1%;
	left:5%;
	color:white;
	font-weight:bold;
}

}



@media only screen and (min-width : 401px) and (max-width: 700.9px){
*{
	box-sizing:border-box ;
}

.gater{
	color:white ;
/*	background-color: #663399 ;	*/
	background-color: navy ;
	font-style:italic;
	text-align:center;
	padding:12% 5% 10% 5%;
}
.gater1{
	font-size:7.5vw;
	font-weight:bold ;
	letter-spacing:20px;
	margin-bottom:0;
	line-height : 60% ;
}



.gater1 a{
	text-decoration : none;
	color : white ;
}
			
	.magi1{
	width : 100% ;
	min-height : 220px ;
	max-height : 400px ;
	clear : both ;
	overflow : auto ;
	display : block ;
	margin-top : 6px;
	margin-bottom : 10px;
	}
	.magi2{
	width : 100% ;
	/*	min-height : 300px ;
	max-height : 400px ;	*/
	height : 280px ;
	clear : both ;
	display : block ;
	margin : 30px 0 0 0 ;
	padding : 0 ;
	overflow : scroll ;
	}
	
	
	.magiA{
		width : 100%;
		display : block ;
		border : 2px solid orange ;
		padding-top : 3px ;
		padding-bottom : 3px ;
	}
	.magiA0{
		display : block ;
		width : 50% ;
		float : left ;
		clear : left ;
		padding-top : 2%;
	}
	.magiA1{
		color : blue ;
		font-size : 7vw ;
		letter-spacing : -2px ;
	}
	.magiA1 a{
		color : navy ;
		font-weight : bold ;
	}
	.magiA12{
		width : 12%;
		height : 12% ;
		margin-left : 2%;
		border-radius : 50% ;
	}
	.magiA2{
	width : 100% ;
	}
	.magiA2 a{
	text-decoration : none ;
}

	.magiA13, .magiA23{
		display : block ;
		color : green ;
		font-size : 100% ;
		font-style : italic ;
		text-align : center ;
	}
	.magiA13{
		margin-top : -3%;
	}
	
.magiA22{
	color : red ;
	font-size : 100% ;
	font-weight : bold ;
	text-align : center ;
	float : right ;
	width : 50%;
}

	.magiA22A{
		color : maroon ;
		font-size : 90% ;
	}
		.magiA22B{
	width : 98% ;
	min-height : 140px ;
	max-height : 175px ;
	padding-left : 1%;
	}	
	
	.magiB{
	width : 250%;
	padding : 0;
	/*	min-height : 300px ;	
	max-height :400px ;	*/
	max-height :280px ;	
	display : inline-block ;
	color : #4444ff ;
	clear : right ;
	text-align : center ;
	margin-top : 0px ;
	}
	
	
	.magiB0{
		width : 100% ;
		height : 130px ;
	}
	.magiB01{
		width : 98% ;
		height : 260px ;
	}
	.magiB1{
		width : 19.6%;
		border-right : 1px solid blue ;
		float : left ;
		text-align : justify ;
		margin :0 ;
		padding : 0 ;
		height : 270px ;
	}
	
	
	
	.magiB1A{
	/*	min-height : 60px ;
		max-height : 100px ;	*/
		height : 70px ;
		font-weight : bold ;
		padding :2px ;
		font-size :90% ;
	}
	.magiB1B{
	/*	min-height : 90px ;
		max-height : 150px ;		*/
		height : 120px ;
		width : 100% ;
		font-size : 90% ;
	}
	
	
	
	.magiB12{
		width : 1.5%;
		height : 270px ;
		float : left ;
	}
	.magiB1 a{
		color : #786900 ;
	}
	.magiB11{
		display : block ;
	}

.boyo{
	font-size:100% ;
	margin-top: 12px ;
	display : block ;
}

.koin{
	display : block ;
	width:100%;
	height : 450px ;
	margin-top : 0 ;
	outline:3px groove green;
	outline-offset : 5%;
	
}
.koin2{
	display:inline-block;
	width:100%;
	height : 300px ;
	outline:3px groove green;
	margin-top : 1% ;
	overflow-x : scroll ;

}
.dpple{
	width : 100% ;
	height : 120px ;
	}

.magiC1{
		width : 100% ;
		height : 120px ;
		border : 1px solid purple ;
		display : inline-block ;
		overflow : hidden ;
		margin : 0 ;
		
	}
	.magiC11{
		width : 20% ;
		float : left ;
		background-color : gold ;
	}
	.magiC12{
		width : 80% ;
		display : inline-block ;
		float :left ;
	}
		.magiC12A{
		width : 100%;
		height :120px ;
	}
	.magiC12B{
		width : 25%;
		display : block ;
		float : left ;
		text-align : center ;
		font-size : 70% ;
		padding-top : 2px ;
	}
.magiC2{
	display : block ;
		width : 100%;
		min-height : 210px ;
		max-height : 250px ;
	/*	border : 2px solid blue ;	*/
			background-color : white ;
		overflow : auto ;
		margin : -1% 0 0 0 ;
	}
	.magiC20{
		width : 250%;
		min-height : 180px ;
		max-height : 240px ;
		display : inline-block ;
		overflow : auto ;
			padding : 0;
		margin : 0;

	}
	.magiC20A{
		width : 100% ;
		height : 200px ;
		border : 2px solid grey ;
		margin : 0 ;
		padding : 0 ;
	}
	.magiC21{
		width : 20%;
		height : 200px ;
		display : inline-block ;
		float : left ;
				margin : 0 ;
		padding : 0 ;
		overflow : hidden ;
	}

.dpple2{
	font-family: "Times New Roman", Times, serif ;
	padding : 5% ;
	background-image : url("riverine.png") ;
	background-repeat : no-repeat ;
	background-size : 100% 300px ;	
}
.sector1{
	font-size : 6.2vw ;
	display : block ;
	color : navy ;
	font-weight : bold ;
}

.sector2{
	font-size : 4.5vw ;
	color : navy ;
	font-style : italic ;
	}

a{
	text-decoration:none;
}
.blu{
	display:block ;
	width:25%;
	position:absolute ;
	top:50%;
	left:15%;
	color:white;
	font-weight:bold;
}
.hei{
width:100%;
height: 400px ;	
}

.blu1{
	display:block ;
	width:25%;
	position:absolute ;
	top:50%;
	right:15%;
	color:white;
	font-weight:bold;
}
.blu2{
	display:block ;
	width:25%;
	position:absolute ;
	bottom:1%;
	left:15%;
	color:white;
	font-weight:bold;
}

}

@media only screen and (min-width : 701px){
*{
	box-sizing:border-box ;
}
.gater{
	color:white ;
	background-color: navy ;		
/*	background-color: #663399 ;		*/
	font-style:italic;
	text-align:center;
	padding:5% 5% 1% 5%;
}
.gater1{
	font-size:7.5vw;
	font-weight:bold ;
	letter-spacing:20px;
	margin-bottom:0;
	line-height : 60% ;
}
.gater1 a{
	text-decoration : none;
	color : white ;
}
	.magi1{
	width : 30% ;
	min-height : 300px ;
	max-height : 400px ;
	clear : left ;
	overflow : auto ;
	display : inline-block ;
	float : left ;
	margin-bottom : 0;
	}
	.magi2{
	width : 70% ;
	min-height : 300px ;	
	max-height : 400px ;
	clear : right ;
	overflow : auto ;
	display : inline-block ;
	float : left ;
	margin-bottom : 0 ;
	}
	.magiA{
		width : 100%;
		display : inline-block ;
		border : 2px solid orange ;
		float : left ;
		clear : left ;
	}
	.magiA1{
		color : blue ;
		font-size : 4vw ;
	}
	.magiA12{
		width : 10%;
		height : 10% ;
		margin-left : 2%;
		border-radius : 50% ;
	}
	.magiA2{
	
	}
	.magiA2 a{
	text-decoration : none ;
}

	.magiA13, .magiA23{
		display : block ;
		color : green ;
		font-size : 100% ;
		font-style : italic ;
		text-align : center ;
	}
	.magiA13{
		margin-top : -3%;
	}
	
.magiA22{
	color : red ;
	font-size : 120% ;
	font-weight : bold ;
	text-align : left ;
}

	.magiA22A{
		color : maroon ;
	}
	.magiA22B{
	width : 96% ;
	height : 200px ;
	padding-left : 2%;
	}
	.magiB{
	width : 100%;
	display : block ;
	color : #4444ff ;
	clear : right ;
	text-align : center ;
	height : 220px ;
	}
	.magiB0{
		width : 100% ;
		height : 180px ;
	}
	.magiB01{
		width : 98% ;
		min-height : 300px  ;
		max-height : 400px  ;
	}
	.magiB1{
		width : 19.5%;
		min-height : 300px ;
		max-height : auto ;
		display : inline-block ;
		border-right : 1px solid blue ;
		float : left ;
		text-align : justify ;
	}
	.magiB1A{
		min-height : 50px ;
		max-height : 90px ;
		font-weight : bold ;
		padding :2px ;
	}
	.magiB1B{
		min-height : 70px ;
		max-height : 130px ;
		width : 100% ;
		font-size : 100% ;
	}
	.magiB12{
		width : 2%;
		max-height : 400px ;
		float : left ;
	}
	.magiB1 a{
		color : #786900 ;
	}
	.magiB11{
		display : block ;
	}
.boyo{
	font-size:150% ;
	font-style :italic ;
	display : block ;
	margin-top:20px;
}
.koin{
	display : block ;
	width:100%;
	height : 450px ;
	margin-top : 0 ;
	outline:3px groove green;
	outline-offset : 5%;
	
}
.koin2{
	display:inline-block;
	width:100%;
	height : 300px ;
	outline:3px groove green;
	margin-top : 0% ;

}
.magiC1{
		width : 100%;
		height : 150px ;
		border : 1px solid purple ;	
		clear : both ;
	}
	.magiC11{
		width : 10% ;
		float : left ;
		background-color : gold ;
		height : 150px ;
	}
	.magiC12{
		width : 90% ;
		display : inline-block ;
		float :left ;
	}
		.magiC12A{
		width : 100%;
		height :150px ;
	}
	.magiC12B{
		width : 16.6%;
		height : 150px ;
		display : block ;
		float : left ;
		text-align : center ;
		font-size : 70% ;
		padding-top : 2px ;
	}
.magiC2{
	display : inline-block ;
		width : 100%;
		height : 200px ;
	/*	border : 1px solid blue ;	*/
		margin-top : 0;
	}
	.magiC20{
		width : 100%;
		display : block ;
		float : left ;
		text-align : center ;
		font-size : 80% ;
		padding-top : 2px ;
	}
	.magiC20A{
		width : 96% ;
		height : 200px ;
		border : 2px solid grey ;
	}
	.magiC21{
		width : 20%;
		display : inline-block ;
		float : left ;
				margin : 0 ;
		padding : 0 ;
	}
	.magiC21A{
		width : 100%;
		height :140px ;
				margin : 0 ;
		padding : 0 ;
	}
	.magiC21B{
		width : 100% ;
		height : 200px ;
	}

.dpple{
	width : 100% ;
	height : 140px ;
	}

.dpple2{
	font-family: "Times New Roman", Times, serif ;
	padding : 2% ;
	background-image : url("riverine.png") ;
	background-repeat : no-repeat ;
	background-size : 100% 300px ;	
}
.sector1{
	font-size : 4.2vw ;
	display : block ;
	color : navy ;
}

.sector2{
	font-size : 3vw ;
	color : chocolate ;
	font-style : italic ;
	}

a{
	text-decoration:none;
}
.blu{
	display:block ;
	width:25%;
	position:absolute ;
	top:50%;
	left:15%;
	color:white;
	font-weight:bold;
}
.hei{
width:100%;
height: 400px ;	
}

.blu1{
	display:block ;
	width:25%;
	position:absolute ;
	top:50%;
	right:15%;
	color:white;
	font-weight:bold;
}
.blu2{
	display:block ;
	width:25%;
	position:absolute ;
	bottom:1%;
	left:15%;
	color:white;
	font-weight:bold;
}


}