@charset "ISO-8859-1";

article{
	overflow: hidden;
}

.breadcrumbs a:hover{color:#0099ff;}

.breadcrumbs {
	margin-left:5px;
	margin-top:-30px;
	font-size: 1.05em;
}

.image-header{
	position: relative;
	pointer-events: none;
}

.image-header .non-mobile{
	margin-left: 50%;
    transform: translateX(-50%);
    width: 1922px;
}

.image-header .mobile{
	display:none;
}

.image-header .non-mobile{
	display:block;
}

.safety-image-header{
	position: relative;
}
.safety-image-header img{
	position: relative;
}
.safety-image-header .safety-notice-title{
	position: absolute;
	font-size: 50px;
	margin-left:0;
	/*font-family:'Roboto';
	font-weight:1000;*/
	color: #0099FF;
	z-index: 2;
	top: 40%;
}

.info-landing-page-title{
	color:white;
	position: relative;
    top: -180px;
    font-size: 50px;
	margin-left:0;
	/*font-family:'Roboto';
	font-weight:1000;*/
}

@media(max-width:767px){
	.image-header .mobile{
		display:block;
	}
	
	.image-header .non-mobile{
		display:none;
	}
	
	.info-landing-page-title{
	/*	top: -350px;
		margin-left:unset;
		margin:auto;
		text-align:center;*/
		position:absolute;
		top: 10%;
		/* top:150px; */
		left:0;
		right:0;
		margin:auto;
		width:400px;
		text-align: center;
	}
	.safety-image-header .safety-notice-title{
		position:absolute;
		top: 10%;
		left:0;
		right:0;
		margin:auto;
		width:400px;
		text-align: center;
	}

	.breadcrumbs{
		margin-left:30px;
		margin-top:20px;
	}
}

/******************************
 * Common section attributes
 */

.main .col1 section,
.main .col2 section {
	padding:			20px; 
	border:				1px solid #dbdcde;
/*	margin-top:			10px;*/
	margin-bottom:		20px;
	background-color:	#ffffff;
}

/******************************
 * Left column (Static page list)
 */

.static .img-container img {
	margin-left:auto;
	margin-right:auto;
}

.static .col1 {
	margin:				0;
	float:				left;
}

	/*.static .col1 section {
		margin-right:20px;
	}*/
		.static .col1 section div h2 {
			margin-top: 0;
		}
		.static .col1 section div h3 {
			margin: 0;
		}

		.static .col1 section div ul {
			margin-left:20px;
			margin-bottom:10px;
		}

			.static .col1 section div ul li {
				list-style:none;
				line-height:1.4em;
			}

			@media (min-width: 1200px) {	
				.static .col1 section div ul li {
					font-size:1.1em;
					line-height:1.5em;
				}
			}

			.static .col1 section div ul li a {
				text-decoration:none;
			}

			/*.static .col1 section div ul li a:link,
			.static .col1 section div ul li a:visited {
			}*/

			.static .col1 section div ul li a:hover,
			.static .col1 section div ul li a:active {
				color:#0099ff;
			}

			.static .col1 section div ul li a.current:link,
			.static .col1 section div ul li a.current:visited,
			.static .col1 section div ul li a.current:hover,
			.static .col1 section div ul li a.current:active {
				text-decoration:none;
				font-weight:700;
				color:#0099ff;			
			}

/******************************
 * Right column (Static page content)
 */

.static .col2 {
	margin-top:20px;
}

	.static .col2 section {
	overflow:auto;
	}

		.static .col2 section a:link,
		.static .col2 section a:visited,
		.static .col2 section a:hover,
		.static .col2 section a:active {
			text-decoration:none;
			color:#0099ff;
		}

		.static .col2 section a.pushbutton,
		.static .col2 section a.pushbutton:link,
		.static .col2 section a.pushbutton:active,
		.static .col2 section a.pushbutton:visited, 
		.static .col2 section a.pushbutton:hover {
			color:				#ffffff;
			margin-left:0px;
			width:70%;
		}


		/*.static .col2 section div {
		}*/
		
			.static .col2 section div div.img-container {
				text-align:center;
				margin:20px;
			}
			
		
		.main .col2 section .banner {
			padding:0;
			margin:0;
			border:0;
			width:100%;
		}
		
		.main .col2 section .banner img {
			-moz-border-radius:15px;
		    border-radius:15px;
		    width: 100%;
   			/*max-width: 700px;*/
		}
	
/***************************
 * Commonly used styles
 */ 	
 
.static .col2 img.left {
	float:left;
	margin-right:20px;
	margin-bottom:10px;
}

.static .col2 img.right {
	float:right;
	margin-left:20px;
	margin-bottom:20px;
}



.static .col2 .static h1 {
	width:100%;
	color:#0099ff;
	font-weight:300;
	font-size:30px;
	line-height:40px;
}

.static .col2 div.center {
	width:100%;
	text-align:center;
}

.static .col2 ul {
	margin-top:20px;
	padding-left:40px;
}

	.static .col2 ul li {
		margin-top:5px;
		margin-bottom:5px;
		line-height:1.4em;
	}

/*.static .col2 ul.bullets {
}*/

	/*.static .col2 ul.bullets li {
	}*/

/*.static .col2 ul.no-bullets {
}*/

	.static .col2 ul.no-bullets li {
		list-style:none;
	}
	

.static .col2 table.lined {
	margin-top:10px;
	margin-top:10px;
	border-collapse:collapse;
}
	/*.static .col2 table.lined tr {
	}*/
		.static .col2 table.lined tr th {
			border:1px solid #e6e6e6;
			padding:5px;
			font-weight:700;	
		}
		.static .col2 table.lined tr td {
			padding:5px;
			border:1px solid #e6e6e6;
		}

.static .col2 dt{
	font-weight:		 700;
}

.static .col2 dd{
	margin-left:		 30px;
	margin-top:			 10px;
	margin-bottom:		 10px;
}
	
	
.error {
	background-color:	 #fdaaaa;
}

p.error {
	padding:			 4px;
}



/******************************
 * Additional styles for each specialised page are stored in their
 * separate style files. Each is prefixed with a named selector
 * (e.g. .about-us, .recycling, etc.). This is required for jquery-mobile
 * when we have to pre-load each individual css file and would
 * otherwise experience style clashes.
 */	
 
 /* Karam's BOOTSTRAP */
 
 /*@media (max-width: 1000px) {	
	.col1 {
		display:none;
	}
	
	.static {
		padding-right: 10px;
		padding-left: 10px;
	}
	
	#smallmap {
		width: 75%;
		height: auto;
	}

}
*/
.responsive-map {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

.responsive-map iframe,   
.responsive-map object,  
.responsive-map embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.about-us {
	padding:0px!important;
}
.about-us .header {
	position:relative;
}
.about-us .header-text {
	position: absolute;
	top:40px;
	right:40px;
	color:#fff;
	width:50%;
}
.about-us .sub-headers {
	color:#0099ff;
	font-size:1.6em!important;
}
.about-us .text-boxes {
	font-size:1.2em;
	padding:20px;
}
.about-us .float-left {
	float:left;
}
.about-us .float-right {
	float:right;
}
@media (max-width:1200px) {
	.about-us .header-text {
		top:20px;
		width:55%;
	}
}

/* Zip */
.col2 .zip ul {
    margin-top: 0;
}
.zip h3 {
    margin: 20px 0 0;
}

/* Finance Pages */
#finance-providers {
	text-align:center;
}
	#finance-providers div {
		padding:3px;
	}
	#finance-providers p {
		font-size:1.3em;
	}
	#finance-providers div.barclays img {
		margin-top:5px;
	}

/* Safety notice styling */
#safety-notice-page .info-container{
	text-align: center;
	margin-top: 60px;
	margin-bottom: 60px;
}
#safety-notice-page .info-container .content{
	display:inline-block;
	padding:0;
	background-color:#fff;
	max-width: 582px;
	padding: 52px 77px 52px 77px;
	border-radius: 3px;
}
#safety-notice-page .info-container .content .title{
	font-family: 'Centrale Sans Bold', Trebuchet, sans-serif;
	font-size: 22px;
	color: #0099FF;
	font-weight: 600;
	line-height: 1.2em;
}
#safety-notice-page .info-container .content p{
	margin-top: 16px;
	font-size: 15px;
}
#safety-notice-page .safety-notice-container{
	background-color:#fff;
	text-align: center;
	border-radius: 3px;
	margin-bottom: 60px;
}
#safety-notice-page .safety-notice-container .item{
	background-color:#F5F5F5;
	margin-bottom: 34px;
	display: flex;
	flex-wrap: wrap;
	min-height: 62px;
	border-radius: 3px;
}
#safety-notice-page .safety-notice-container .item div{
	margin: auto;
}
#safety-notice-page .safety-notice-container .items{
	padding: 52px 77px 52px 77px;
}
#safety-notice-page .item .download-button{
	width: 100%;
	max-width: 300px;
	padding: 8px 0px;
	background-color: #0099FF;
	border-radius: 3px;
	color: white;
	text-decoration: underline;
	border: none;
}
#safety-notice-page .item{
	font-size: 18px;
	line-height: 1.2em;
	font-weight: 450;
}
#safety-notice-page .item .title{
	color: #0099FF;
}
#safety-notice-page .info-landing-page-title{
	color: #0099FF;
}
#safety-notice-page .item img{
	margin-right: 10px;
	width: 35px;
}
#safety-notice-page .sn-mobile{
	display: none;
}

#safety-notice-page .sn-non-mobile{
	margin-left: 50%;
	transform: translateX(-50%);
	width: 1922px;
}
#safety-notice-page .item:last-child{
	margin-bottom:0px;
}

@media(max-width:767px){
	#safety-notice-page .info-container{
		margin: 36px;
		
	}
	#safety-notice-page .safety-notice-container{
		margin-bottom: 36px;
	}
	#safety-notice-page .safety-notice-container .items{
		padding: 46px 36px 46px 36px;
	}
	#safety-notice-page .item{
		row-gap: 20px;
		padding: 25px;
	}

	#safety-notice-page .info-container .content{
		padding: 46px 36px;
	}
}
@media(max-width: 414px){
	#safety-notice-page .sn-mobile{
		display: block;
	}
	#safety-notice-page .sn-non-mobile{
		display: none;
	}
}
#safety-notice-page .pagination > .active > a,
#safety-notice-page .pagination > .active > span,
#safety-notice-page .pagination > .active > a:hover,
#safety-notice-page .pagination > .active > span:hover,
#safety-notice-page .pagination > .active > a:focus,
#safety-notice-page .pagination > .active > span:focus{
	background-color:#0099FF;
}
#safety-notice-page .pagination > .active > a{
	color: white;
}
#safety-notice-page .pagination > li > a, .pagination > li > span{
	color:#0099FF;
}
#safety-notice-page .pagination{
	font-size: 16px;
}