/* Banner Image settings */
#banner-pic{
	max-width: 100%;
	height: auto;
	width: auto; /* for IE9 */
	display: block;
	margin: 0 auto;
}

/* To be used to display different images at different screen sizes */
@media only screen and (max-width: 700px){ /* Applies when screen size <= 700px */

	#banner-pic{
		content: url(../images/main_small.jpg);
	}
}

/*
@media only screen and (max-width: 470px){ /* Applies when screen size <= 470px */
	/*
	#banner-pic{
		content: url(../images/temp_img_3_small.jpg);
	}
	*/
/*
}/



/* Text settings */
h1{
	margin: 0px;
	padding: 100px /*<-Top&Bottom*/ 80px /*<-Sides*/;
	color: #0061a6;
	font-size: 76px;
}

#content p{
	margin: 0px;
	padding: 0px /*<-Top*/ 80px /*<-Right*/ 20px /*<-Bottom*/ 80px /*<-Left*/;
	line-height: 135%;
}

@media only screen and (max-width: 520px){ /* Applies when screen size <= 510px */
	h1{
		font-size: 28px;
	}
}

@media only screen and (max-width: 470px){ /* Applies when screen size <= 470px */
	h1{
		padding: 60px /*<-Top*/ 40px /*<-Right*/ 40px /*<-Bottom*/ 40px /*<-Left*/;
	}
}

@media only screen and (max-width: 520px){ /* Applies when screen size <= 520px */
	#content p{
		font-size: 16px;
	}
}

@media only screen and (max-width: 470px){ /* Applies when screen size <= 470px */
	#content p{
		padding: 0px /*<-Top*/ 40px /*<-Right*/ 20px /*<-Bottom*/ 40px /*<-Left*/;
	}
}



/* Announcement settings */
#announcements{
	margin: 40px /*<-Top*/ 80px /*<-Right*/ 70px /*<-Bottom*/ 80px /*<-Left*/;
}

#announcements p{
	padding: 20px;
}

@media only screen and (max-width: 470px){ /* Applies when screen size <= 470px */
	#announcements{
		margin: 20px /*<-Top*/ 40px /*<-Right*/ 70px /*<-Bottom*/ 40px /*<-Left*/;
	}
}

#a-head{
	background-color: #ffc96a;
	font: 24px 'Montserrat';
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	border: 1px solid #b47200;
}

@media only screen and (max-width: 520px){ /* Applies when screen size <= 520px */
	#announcements #a-head{
		text-align: center;
		padding: 20px /*Top&Bottom*/ 10px /*Sides*/;
	}
}

#a-body{
	background-color: #e7eaeb;
	border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px;
	border-left: 1px solid #767676;
	border-bottom: 1px solid #767676;
	border-right: 1px solid #767676;
	word-wrap:break-word;
}

.divider{
	display: block;
	border-bottom: 1px solid black;
	margin: 20px /*Top&Bottom*/ 0px /*Sides*/;
}



/* Box Links settings */
#news-box-container, #programmes-box-container, #quick-box-container, #about-box-container{
	padding: 20px /*<-Top*/ 80px /*<-Right*/ 20px /*<-Bottom*/ 80px /*<-Left*/;
	text-align: justify;
	font-size: 0.1px;
}

@media only screen and (max-width: 720px){ /* Applies when screen size <= 720px */
	#news-box-container, #programmes-box-container, #quick-box-container, #about-box-container{
		text-align: center;
		padding-top: 40px;
	}
}

@media only screen and (max-width: 600px){ /* Applies when screen size <= 720px */
	#news-box-container, #programmes-box-container, #quick-box-container, #about-box-container{
		padding: 40px /*<-Top*/ 40px /*<-Right*/ 20px /*<-Bottom*/ 40px /*<-Left*/;
	}
}

@media only screen and (max-width: 520px){ /* Applies when screen size <= 520px */
	#news-box-container, #programmes-box-container, #quick-box-container, #about-box-container{
		padding: 20px /*<-Top*/ 40px /*<-Right*/ 20px /*<-Bottom*/ 40px /*<-Left*/;
	}
}

@media only screen and (max-width: 470px){ /* Applies when screen size <= 470px */
	#news-box-container, #programmes-box-container, #quick-box-container, #about-box-container{
		padding: 20px /*<-Top*/ 0px /*<-Right*/ 20px /*<-Bottom*/ 0px /*<-Left*/;
	}
}

.link-box, .news-link-box{
	display: inline-block;
	color: #ffffff;
	background-color: #000000;
	font-size: 20px;
	margin-bottom: 80px;
	max-width: 300px;
	width: 300px;
	text-align: left;
}

.link-box-placeholder{
	visibility: hidden;
}

.link-box-text{
	height: 72.8px;
}

.link-box-text-toppad{
	padding-top: 13.2px;
}

.quick-link-div{
	display: block;
	color: #3b3b3b;
	background-color: #dbdbdb;
	-webkit-transition: .25s all ease; 
	-o-transition: .25s all ease; 
	transition: .25s all ease;
}

.quick-link-div:hover{
	background-color: #c2c2c2;
	-webkit-transition: .25s all ease;
	-o-transition: .25s all ease;
	transition: .25s all ease;
	/*
	-webkit-box-shadow: 0px 4px 8px 2px rgba(0,0,0,0.3);
	        box-shadow: 0px 4px 8px 2px rgba(0,0,0,0.3);
			*/
}

.no-deco{
	text-decoration: none !important;
}

/*
.news-link-box{
	margin-top: 10px;
	vertical-align: top;
	max-width: 350px;
}
*/

.news-link-box p{
	/*text-align: center;
	vertical-align: middle;*/
}

/*
.news-link-box:nth-of-type(odd){
	margin-left: 120px;
}

.news-link-box:nth-of-type(even){
	margin-right: 120px;
}
*/

/* Applies when screen size <= 1300px */
/*@media only screen and (max-width: 1300px){
	.news-link-box:nth-of-type(odd){
		margin-right: 40px;
	}
}
*/

/* Applies when screen size <= 1250px */
/*@media only screen and (max-width: 1250px){ 
	.news-link-box:nth-of-type(odd){
		margin-left: 80px;
	}

	.news-link-box:nth-of-type(even){
		margin-right: 80px;
	}
}
*/

/* Applies when screen size <= 1090px */
/*@media only screen and (max-width: 1090px){
	.news-link-box:nth-of-type(odd){
		margin-left: 40px;
	}

	.news-link-box:nth-of-type(even){
		margin-right: 40px;
	}
}
*/

/* Applies when screen size <= 1090px */
/*@media only screen and (max-width: 1000px){ 
	.news-link-box:nth-of-type(odd){
		margin-left: 0;
	}

	.news-link-box:nth-of-type(even){
		margin-right: 0;
	}
}
*/

/* Applies when screen size <= 950px */
@media only screen and (max-width: 950px){ 
	/*
	#news-box-container{
		text-align: center;
	}
	
	#news-box-container img{
		max-width: 100%;
		height: auto;
	}
	
	#news-box-container .news-link-box{
		margin-left: 40px;
		margin-right: 40px;
	}
	*/
	
	#news-box-container .link-box{
		font-size: 18px;
	}
}

@media only screen and (max-width: 1150px){ /* Applies when screen size <= 1150px */
	.link-box img{
		width: 262.5px;
		height: 157.5px;
	}
	.link-box{
		max-width: 262.5px;
		width: 262.5px;
	}
}

@media only screen and (max-width: 1000px){ /* Applies when screen size <= 1000px */
	.link-box img{
		width: 300px;
		height: 180px;
	}
	.link-box{
		max-width: 300px;
		width: 300px;
	}
	
	.link-box-placeholder{
		display: none;
	}
}

@media only screen and (max-width: 820px){ /* Applies when screen size <= 820px */
	.link-box img{
		width: 262.5px;
		height: 157.5px;
	}
	.link-box{
		max-width: 262.5px;
		width: 262.5px;
	}
}

@media only screen and (max-width: 720px){ /* Applies when screen size <= 1000px */
	.link-box img{
		width: 300px;
		height: 180px;
	}
	
	.link-box, .news-link-box{
		max-width: 300px;
		width: 300px;
		margin-bottom: 60px;
	}
}

@media only screen and (max-width: 520px){ /* Applies when screen size <= 510px */
	.link-box, .news-link-box{
		margin-bottom: 40px;
	}
}

@media only screen and (max-width: 470px){ /* Applies when screen size <= 470px */
	.link-box{
		max-width: 240px;
		width: 240px;
		margin-left: 40px;
		margin-right: 40px;
	}
	
	.link-box img{
		width: 100%;
		height: auto;
	}
	
	.link-box p, .news-link-box p{
		font-size: 18px;
	}
}

#news-box-container a:visited, #programmes-box-container a:visited, #quick-box-container a:visited, #about-box-container a:visited,
#news-box-container a:link, #programmes-box-container a:link, #quick-box-container a:link, #about-box-container a:link{
	color: white;
}

#news-box-container:after, #programmes-box-container:after, #quick-box-container:after, #about-box-container:after{ /* Used to trigger justified effect */
	content: '';
	width: 100%;
	display: inline-block;
}

#news-box-container p, #programmes-box-container p, #quick-box-container p, #about-box-container p{
	font-family: 'Montserrat';
	padding: 10px;
}

.link-box, .news-link-box{ 
	-webkit-transition: .25s all ease; 
	-o-transition: .25s all ease; 
	transition: .25s all ease;
}

.link-box:hover, .news-link-box:hover{
	-webkit-transition: .25s all ease;
	-o-transition: .25s all ease;
	transition: .25s all ease;
	-webkit-box-shadow: 0px 4px 8px 2px rgba(0,0,0,0.3);
	        box-shadow: 0px 4px 8px 2px rgba(0,0,0,0.3);
}

.link-box-no-img:hover{
	-webkit-transition-property: none;
	-o-transition-property: none;
	transition-property: none;
	-webkit-box-shadow: none;
	        box-shadow: none;
}

.box1{
	background-color: #0ed613;
}
.box1:hover{
	background-color: #098b0c;
}

.box2{
	background-color: #d60ea5;
}
.box2:hover{
	background-color: #8b096a;
}

.box3{
	background-color: #f2b830;
}
.box3:hover{
	background-color: #9e781f;
}

.box4{
	background-color: #de5174;
}
/*
.box4:hover{
	background-color: #91354c;
}
*/

.box5{
	background-color: #650ca4;
}
.box5:hover{
	background-color: #42086b;
}

.box6{
	background-color: #33bce8;
}
.box6:hover{
	background-color: #217997;
}


.box7{
	background-color: #283faf;
}
/*
.box7:hover{
	background-color: #1e3086;
}
*/

.box8{
	background-color: #84cc26;
}
/*
.box8:hover{
	background-color: #61961c;
}
*/

.box9{
	background-color: #ff8a00;
}
.box9:hover{
	background-color: #d37200;
}

.box10{
	background-color: #ea471c;
}
.box10:hover{
	background-color: #bb3916;
}

.box11{
	background-color: #ca1bd5;
}
.box11:hover{
	background-color: #a015a9;
}

.box12{
	background-color: #29dcbc;
}
.box12:hover{
	background-color: #1eb399;
}

.box0{
	background-color: #c40b4f;
}
.box0:hover{
	background-color: #8e0739;
}

.box13{
	background-color: #4286f4;
}
.box13:hover{
	background-color: #2f60af;
}

.box14{
	background-color: #0ed6a1;
}
.box14:hover{
	background-color: #0ba37a;
}

.box15{
	background-color: #a261e2;
}
.box15:hover{
	background-color: #643c8c;
}