﻿/* Foundation Media Queries */
/* https://foundation.zurb.com/sites/docs/media-queries.html */

/* Small only */
@media screen and (max-width: 39.9375em) {

	html, body {overflow-x: hidden !important;}

   /* header.banner {outline: 3px solid pink;}  */

	/* Banner */

	.navigation-container {padding-top: 0.3rem !important; padding-bottom: 0.3rem !important;}
	.logo-container {display: block; width: 100%; margin-top: 0.3rem; margin-bottom: 0.3rem;}
	.search-container {display: block !important; width: 95% !important; margin-top: 0.8rem; margin-bottom: 0.8rem;}
	/* .search-container ul.menu {width: 99% !important; float: left !important;} */
	/* .search-input-container {width: 75% !important;}  */
	.search-box {width: 75% !important;} 
	/* .search-button-container {width: 25% !important;} */
	 #search-btn {width: 25% !important; padding: 0.605rem 0.55rem 0.605rem 0.55rem !important;} 

	/* Home page banner */

	ul.home-my-accounts,
	ul.home-my-accounts li {
		display: block;
	}

	 ul.home-my-accounts li a:link, ul.home-my-accounts li a:visited, ul.home-my-accounts li a:hover, ul.home-my-accounts li a:active {
		display: block;
		padding-left: 0rem;
	}

	.home h1 {font-size: 2.3rem; margin: 0.5rem 0rem; width: 90% !important;}
	.home h1 {font-size: 1.85rem; margin: 0.5rem 0rem; width: 95% !important;}

	.home .home-search-box {display: block !important; width: 100% !important; margin: 1rem 0rem 1.3rem 0rem;}
	.home .home-search-box .search-box {width: 75% !important;} 
	.home .home-search-box #search-btn {width: 23% !important; margin: -0.25rem 0rem 0rem -0.25rem !important; padding: 0.23rem 0.00rem 0.23rem 0.00rem !important;} 
	.home .home-search-box #search-btn {width: 23% !important; margin: -0.15rem 0rem 0rem -0.25rem !important; padding: 0.6rem 0.00rem 0.6rem 0.00rem !important;} 
	/* .home-promotion-row img, .slp-promotion img {width: 75% !important;} */
	
	.home .services {margin-top: -1.4rem;}

	/* Service landing page */
	main.slp .tasks .grid-container {margin-top: -1.6rem;}

	/* Standard pages */

	main.sp {
		overflow: hidden !important;
	}

	main.map-location img,
	main.sp img  {
		display: block !important;
		width: 100% !important;
		border: none !important;
		padding: 0.15rem;
	}

	main.sp img.third  {
		display: inline !important;
		margin: 0rem 0.5rem 0.5rem 0rem;
	}


	/* Forms */
	
	li.sys_cms-form-item div.sys_fieldcontent {
		margin-bottom: 1.5em;
	}


	#main-content .sys_cms-form-body li.sys_cms-form-item label {
		display: inline-block !important;	
	}

	#main-content .sys_cms-form-body li {
		display: block !important;
		margin: 1.5rem 0rem !important;
		line-height: 1rem !important;
		position: static;
		margin: 0.5rem 0.5rem !important; /* 01072020 */

		}

	div.sys_fieldcontent > input,
	div.sys_fieldcontent > select,
	div.sys_buttons, button.sys_form-submit,
	div.sys_namesubelement,
	div.sys_timesubelement, div.sys_timesubelement input,
	.sys_address input,
	li.sys_pagebreak button {
		display: block !important;
		width: 100% !important;		
	}

	.sys_sectionbreak, .sys_sectionbreak-header, .sys_legend {display: block !important; margin: 1rem 0rem !important;}
	.sys_cms-form-body li.sys_name {margin: 0rem 0rem !important; padding: 0rem 0rem !important;}
	li.sys_buttons {margin: 5rem 0rem !important;}

	/* Events */

	.keywords {display: block; margin-right: 0; width: 100%;}
    .date-field {display: block; width: 100%;}
    .date-field-from {margin-right: 0;}

	/* My Property */

	main.home div.maps div.cell {
		border: none !important;
		padding: 0rem !important;
	}

	/* News */

	.home .news .cell {
		height: 300px;
	}

	/* Domestic button */

	#btn_domestic {
		left: 0px !important;
		bottom: 0% !important;
		width: 100% !important;	
		z-index: 999 !important;
	}

	#btn_domestic a {
		padding: 0.85rem 2.5rem 0.75rem 2.5rem !important;
		text-align: left;
		width: 100% !important;
		text-decoration: none;
		white-space: nowrap;
		font-weight: 400;
	}

	/* Tables */

	table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
	}

	#collection-date-request input#postcode {width: 100% !important;}

	#postcode-loading {
		display:block;
		margin:auto;
		padding-top: 1rem;
		padding-left: 0;
	}
	#collection-date-results table {
		white-space:normal;
	}

	/* BrowseAloud icon */
    /*	div#__ba_floatingLaunch {
		left: 295px !important;
	} */

    span.responsive {
		display: block;
		width: 100%;
	}

	div.recycling-a-to-z-top-nav {
		display: none !important;
	}

	.videoWrapper {
		padding-bottom: 80%; /* 4:3 ratio */
	}

	/* Logos */
	div.partner-logos {
		padding-left: 1rem;
	}

	div.partner-logos img {
		width: 23%;
	}

}




/* Medium and up */
@media screen and (min-width: 40em) {
	/* header.banner {outline: 3px solid purple;}   */
	.grid-container {max-width: 61.5rem;}
	.home .home-search-box .search-box {width: 75% !important;} 
	.home .home-search-box #search-btn {width: 23% !important; margin: -0.1rem 0rem 0rem -0.2rem !important; padding: 0.24rem 0.00rem 0.24rem 0.00rem !important;} 
	.home .home-search-box #search-btn {width: 23% !important; margin: -0.12rem 0rem 0rem -0.2rem !important; padding: 0.6rem 0.00rem 0.6rem 0.00rem !important;} 
}

/* Medium only */
@media screen and (min-width: 40em) and (max-width: 63.9375em) {
	
	/* header.banner {outline: 3px solid yellow;}  */
	.navigation-container {padding-top: 0.3rem !important; padding-bottom: 0.3rem !important;}
	.logo-container {display: block; width: 100%; margin-top: 0.3rem; margin-bottom: 0.3rem;}
	.search-container {display: block !important; width: 97% !important; margin-top: 0.8rem; margin-bottom: 0.8rem;}
	/* .search-container ul.menu {width: 99% !important; float: left !important;} */
	/* .search-input-container {width: 85% !important;} */
	/* .search-box {width: 100% !important;} */
	/* .search-button-container {width: 15% !important;} */
	/* #search-btn {width: 100% !important; padding: 0.60rem 0.55rem 0.60rem 0.55rem !important;} */
	.sys_fieldcontent > input,
	.sys_fieldcontent > select,
	.sys_fieldcontent > textarea,
	.sys_cms-form-body .sys_namesubelement, .sys_cms-form-body .sys_namesubelement input,
	.sys_address input {width: 100% !important;}
}





/* Large and up */
@media screen and (min-width: 64em) {
/*	header.banner {outline: 3px solid red;}    */
	#search-btn {padding: 0.61rem 0.55rem 0.61rem 0.55rem;}
	.home .home-search-box .search-box {width: 78% !important;} 
	.home .home-search-box #search-btn {width: 20% !important; margin: -0.15rem 0rem 0rem -0.2rem !important; padding: 0.24rem 0.00rem 0.24rem 0.00rem !important;} 
	.home .home-search-box #search-btn {width: 20% !important; margin: -0.20rem 0rem 0rem -0.2rem !important; padding: 0.6rem 0.00rem 0.6rem 0.00rem !important;} 

/* Forms */

	.sys_pagebreak {
	 width: 49.5% !important; /* Aligns next button with form fields */ 
	}

	textarea.sys_small, textarea.sys_medium {
		width: 50% !important;
	}

	@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	#search-btn {padding: 0.60rem 0.55rem 0.60rem 0.55rem !important;}
	}

}

/* Large only */
@media screen and (min-width: 64em) and (max-width: 74.9375em) {
	/*  header.banner {outline: 3px solid green;}  */
	 #search-btn {padding: 0.60rem 0.55rem 0.60rem 0.55rem !important;}
 	.home .home-search-box .search-box {width: 75% !important;} 
	.home .home-search-box #search-btn {width: 23% !important; margin: -0.15rem 0rem 0rem -0.2rem !important; padding: 0.24rem 0.00rem 0.24rem 0.00rem !important;} 
	.home .home-search-box #search-btn {width: 23% !important; margin: -0.15rem 0rem 0rem -0.2rem !important; padding: 0.6rem 0.00rem 0.6rem 0.00rem !important;} 

}



/* Fix IE 11 search button margin */

 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
  /* IE10+ specific styles go here */  
	.home .home-search-box #search-btn {
		margin: -0.4rem 0rem 0rem -0.25rem !important;
	}	
}

 
/* Tablets */

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
  	div.popular-box ul li:nth-child(4),
	div.popular-box ul li:nth-child(5) {  
  		display: none !important;
	}

	div.search-container #search-btn {margin: -0.05 0rem 0rem -0.2rem !important; padding: 0.55rem 0.55rem 0.605rem 0.55rem !important;} 


	div.cookies-settings {
		/* margin-left: 0rem !important; */
		margin-right: 0rem !important;

	}

	 div.cookies-settings a {
		padding-left: 0rem !important;
		padding-right: 0rem !important;

	} 


	.home .maps .cell {
		height: 200px;
	}

	.home .news .cell {
		height: 475px;
	}

		
}

