/*
 * ABFI
 *
 * main colour: #0173BC ;
 */
 
/* 
 * bg-* colours - for the vertical-pop-ups. 
 */

.bg-beer 		{ background-color: #d2af1f ; }
.bg-cider 		{ background-color: #008f4f ; }
.bg-spirits		{ background-color: #b52431 ; }
.bg-whiskey		{ background-color: #56b8bb ; }
.bg-wine 		{ background-color: #852d6a ; }
 
 
.container-header {
	}


.banner-item { 
	position: relative ;  
	overflow: hidden ; 
	height: 406px ;  
	background-position: center center ;
	background-repeat: no-repeat ;
	background-attachment: scroll ;
	}

	.banner-content {
		/* width: auto ; */
		height: 100% ;
		position: relative ;
	}
	.banner-item.banner-promotion {
		height: auto ;
		text-align: center ;
	}
	.banner-item.banner-promotion img {
		width: 100% ;
		max-width: 980px ;
	} 



	.banner-content .box-article {
		width: 47% ;
		margin: 5% 0 0 1% ;
		float: left ;
		}
		.banner-content .box-article .box-text {
			font-size: 1.92em ;
			padding: 5% ;
			color: white ;
			font-family: RobotoSlab, arial, helvetica, sans-serif ;
			}
		.banner-content .box-article .box-link a {
			font-size: 1em ;
			font-weight: bold ;
			text-transform: uppercase ;
			display: inline-block ;
			background-color: #0173BC ;
			padding: 3% 4% ;
			color: white ;
			}

	.banner-content .box-news {
			position: absolute ;
			top: 0 ;
			bottom: 0 ;
			right: 1% ;
	
			width: 31% ;
			padding: 2.5% ;
			margin: 0 ;

		}
		.banner-content .box-news .title {
			font-size: 2em ;
			font-weight: normal ;
			text-align: center ;
			border-width: 0 0 1px 0 ;
			padding-bottom: 0.75em ;
			color: white ;
		}

		.banner-content .box-news ol {
			list-style: none ;
			margin: 0 ;
			padding: 0 ;
		}
			.banner-content .box-news li {
				border-width: 0 0 1px 0 ;
				margin: 0.5em 0 ;
				padding: 0.5em 0 ;
				font-size: 1.1428em ;
			}
			.banner-content .box-news a {
				color: white ;
			}
			.banner-content .box-news a small {
				font-weight: normal ;
			}

/* * * * * * * * * * * * * * *
 * 4 x information boxes 
 * * * * * * * * * * * * * * */
.container-info-box {
	margin-top: 2em ;
	margin-bottom: 2em ; 
	}
	.container-info-box .box-info {
		background: #0173bc ;
		color: white ;
	}
	.container-info-box .box-info a {
		display: block ;
		padding: 4% 4%;
		color: white ;
		min-height: 116px ;
	}
		.container-info-box .box-info a h2 {
			color: white ;
			margin: 0 0 0.5em 0 ;
			padding-top: 0 ;
		}
		.container-info-box .box-info a p {
			margin: 0 ;
		}
		.lt-ie8 .container-info-box .box-info a h2 {
			font-size: 1.15em ;
		} 


/* * * * * * * * * * * * * * *
 * 4/5/6 x vertical pop-up boxes 
 * * * * * * * * * * * * * * */
.container-sector-box {
	height: 345px ;
	overflow:hidden ;
	background-color: #dce8c0 ;
	}
	.container-sector-box  > div > h2 {
		text-align: center ;
		padding: 1em 0 0.25em 0 ;
		font-size: 2.55em ;
		color: #0072bd ;
		font-weight: normal ;
	}


	.container-sector-box  a {
		display: block ;
		color: white ;
	}
	.container-sector-box  a * {
		color: white ;				/* bug fix for IE7/8 */
	}
	
		.sector-box {
			margin: 20px 0 0 0 ; 		/* space for bopping up/down ... */
			height: 270px ;				/* 345 - 100(height of h2) + margin + fudge */				
			text-align: center ;
			padding: 1.5em 1em 1em 1em ;
			
			transition: margin-top 1s;
			-webkit-transition: margin-top 1s;
		}

	
		/* 
		 * in hover state, reduce the top margin to reveal the contents of the box ...
		 * - the transition styles above controls the sliding speeding ...  
		*/
		.sector-box-1:hover ,
		.sector-box-2:hover ,
		.sector-box-3:hover ,
		.sector-box-4:hover , 
		.sector-box-5:hover , 
		.sector-box-6:hover  {
			margin-top: 0 ;
		}
			
		/* box title */
		.sector-box h2 {
			padding-top: 1em ;
			color: inherit ;
		}

  

@media screen and (max-width: 768px) {

	.banner-item {
		height: 335px ;
	}
	
	.banner-content .box-article {
		margin-left: 2% ;
	}
	
	.banner-content .box-news {
		width: 35% ;
		right: 2% ;
	}
	
	.container-info-box .box-info a h2 {
		font-size: 1.25em ;
	}
	
	.container-sector-box  {
		height: 300px ;
	}
	
}