/*

Highways England - Responsive Stylesheet

*/


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

	#lobby-slideshow .lobby-slideshow-nav {
		width: 60%;
		}
	
}


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

	#content #copy form {
		width: 100%;
		}
	
}


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

	#header #tools li:nth-child(1),
	#header #tools li:nth-child(2) {
		display: none;
		}
	
	body#lobby,
	#content {
		background-size: 30% 100%;
		}
	
	#sidebar {
		width: 30%;
		}
	
	#copy {
		width: 70%;
		}
	
	#chat-man {
		bottom: -138px;
		}
	
	#navigation-buttons {
		padding: 45px 0 0 0;
		}	

	#navigation-buttons a {
		padding: 15px 20px;
		}
	
	#lobby-slideshow .lobby-slideshow-nav {
		width: 70%;
		}

}


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

	#content #copy .widget.col {
		float: none;
		margin-right: 0;
		width: 100%;
		}
	
}


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

	#lobby-slideshow .lobby-slideshow-nav {
		width: 80%;
		}
	
}


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

	#header {
		padding: 20px;
		}
	
	body#lobby,
	#content {
		background-size: 35% 100%;
		}
	
	#sidebar {
		padding: 130px 20px 85px 20px;
		width: 35%;
		}
	
	#copy {
		width: 65%;
		}
	
	#copy-inner {
		padding: 130px 20px 85px 20px;
		}
	
	#navigation-buttons {
		padding: 25px 0 0 0;
		}
	
	#breadcrumb {
		margin-bottom: 25px;
		}
	
	#copy h2 {
		padding-bottom: 5px;
		}
	
	#navigation-explorer #panels a {
		width: calc(33.33333333333333% - 10px);
		}

	#navigation-explorer #panels a:nth-child(4n+4) {
		margin-right: 15px;
		}	
	
	#navigation-explorer #panels a:nth-child(3n+3) {
		margin-right: 0;
		}	

	#content #copy #video-thumbnails .video {
		margin: 20px 20px 0 0;
		width: calc(50% - 10px);
		}

	#content #copy #video-thumbnails .video:nth-child(2n+2) {
		margin-right: 0;
		}
	
	#content #copy .gallery-thumbnails a {
		width: calc(50% - 10px);
		}

	#content #copy .gallery-thumbnails a:nth-child(3n+3) {
		margin-right: 20px;
		}

	#content #copy .gallery-thumbnails a:nth-child(2n+2) {
		margin-right: 0;
		}

	#content #copy .gallery-thumbnails a:nth-child(3) {
		margin-top: 20px;
		}
	
	#lobby-slideshow .lobby-slideshow-nav {
		width: 90%;
		}

}


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

	#content #copy form .row.checkbox {
		width: 50%;
		}
	
}


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

	#lobby-slideshow .lobby-slideshow-nav {
		width: 100%;
		}
	
}


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

	#header #title h1 {
		font-size: 20px;
		line-height: 25px;
		padding-top: 16px;
		}
	
	#header #tools .button.social {
		display: none;
		}

	#header #tools .button.menu {
		display: inline-block;
		}
	
	#content {
		background: none;
		/*
		padding-top: 97px;
		*/
		}
	
	body#lobby {
		background: none;
		padding-top: 97px;
		}
	
	#sidebar {
		background-color: #021f40;
		display: none;
		padding: 30px 20px;
		float: none;
		width: 100%;
		}

	#copy-inner {
		padding: 30px 20px 85px 20px;
		}
	
	#breadcrumb span.divider {
		padding: 0px 5px;
		}
	
	#navigation a {
		border-bottom: 1px solid #1c3653;
		color: #fff;
		font-size: 18px;
		font-weight: 400;
		line-height: 28px;
		}	
	
	#navigation a:hover {
		color: #009fe3;
		}

	#navigation-buttons a {
		border: 2px solid #008bcb;
		color: #fff;
		}
	
	#navigation-buttons a:hover {
		background-color: #008bcb;
		color: #fff;
		}
	
	#copy {
		width: 100%;
		}
	
	#chat-man {
		display: none;
		}
	
	#navigation-explorer-inner {
		padding: 35px 20px 0px 20px;
		}
	
	#footer {
		padding-bottom: 10px;
		text-align: center;
		}
	
	#footer ul {
		display: inline-block;
		float: none;
		margin: 0 auto;
		padding-top: 20px;
		}
	
	#footer li:first-child::after {
		padding-left: 15px;
		margin-right: 15px;
		}
	
	/* Styles for the lobby slideshow */
	
	#lobby-slideshow {
		display: none;
		}
	
	#lobby.lobby #footer #view-content {
		display: none;
		}
	
	#lobby.lobby #footer ul {
		padding-top: 0;
		}
	
	#lobby.lobby #footer {
		padding-top: 20px;
		}
	
	#lobby.lobby #content {
		padding: 20px;
		}
	
	#lobby-gallery {
		position: static;
		float: left;
		width: calc(50% - 10px);
		}
	
	#lobby-videos {
		position: static;
		float: right;
		width: calc(50% - 10px);
		}
	
	#lobby-gallery .inner img, 
	#lobby-videos .inner img {
		width: 100%;
		}
	
	#lobby-navigation {
		display: block;
		padding-bottom: 50px;
		}
	
	#lobby-navigation .panel {
		float: left;
		margin: 20px 20px 0 0;
		position: relative;
		width: calc(50% - 10px);
		}
	
	#lobby-navigation a:nth-child(2n+2) .panel {
		margin-right: 0;
		}
	
	#lobby-navigation .panel img {
		float: left;
		height: auto;
		width: 100%;
		}
	
	#lobby-navigation .panel p {
		background-color: #fff;
		color: #021f40;
		font-size: 17px;
		font-weight: 400;
		line-height: 27px;
		padding: 5px 10px;
		position: absolute;
		bottom: 20px;
		left: 30px;
		text-align: center;
		width: calc(100% - 60px);
		}

	#lobby-navigation .panel:hover p {
		background-color: #021f40;
		color: #fff;
		}
	
	#header {
		position: static;
		}
	
	body#lobby {
		padding-top: 0;
		}
	
	#lobby.lobby #footer {
		position: static;
		}
	
	#lobby-navigation {
		padding-bottom: 0;
		}
	
}


@media screen and (max-height: 780px) {
	
	#lobby-slideshow .lobby-slideshow-nav {
		padding-top: 20px;
		}
	
}


@media screen and (max-width: 750px) {
	
	#navigation-explorer #panels a {
		width: calc(50% - 7.5px);
		}

	#navigation-explorer #panels a:nth-child(3n+3) {
		margin-right: 15px;
		}	
	
	#navigation-explorer #panels a:nth-child(2n+2) {
		margin-right: 0;
		}	
	
}


@media screen and (max-height: 700px) {

	#home #welcome,
	#exit #welcome {
		padding-top: 50px;
		position: static;
		left: auto;
		top: auto;
		width: 100%;
		-webkit-transform: translateY(0);
		-ms-transform: translateY(0);
		transform: translateY(0);
		}
	
	#home #welcome-furniture,
	#exit #welcome-furniture {
		position: static;
		left: auto;
		bottom: auto;
		}

}


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

	#home #logos p,
	#exit #logos p {
		display: block;
		float: none;
		}
	
	/*
	#home #logos p:first-child,
	#exit #logos p:first-child {
		border-right: none;
		margin-right: 0;
		padding-right: 0;
		border-bottom: 1px solid #3e546d;
		margin-bottom: 30px;
		padding-bottom: 30px;
		}
	*/
	
	#header #title h1 {
		display: none;
		}
	
	#home #welcome form .col,
	#exit #welcome form .col {
		display: block;
		}
	
	#home #welcome form button,
	#exit #welcome form button {
		margin: 15px 0 0 0;
		}
	
	#lobby-gallery .inner p, 
	#lobby-videos .inner p {
		left: 10px;
		bottom: 10px;
		width: calc(100% - 20px);
		}
	
	#lobby-navigation .panel p {
		left: 10px;
		bottom: 10px;
		width: calc(100% - 20px);
		}

}


@media screen and (max-height: 650px) {
	
	#lobby-slideshow .lobby-slideshow-nav {
		padding-top: 0;
		margin-top: -10px;
		}
	
	#lobby-slideshow .lobby-slideshow-nav li:first-child {
		padding-left: 80px;
		text-indent: -999999px;
		}
	
	#lobby-slideshow .lobby-slideshow-nav li:last-child {
		padding-right: 80px;
		text-indent: -999999px;
		}
	
}


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

	#home #welcome-furniture p,
	#exit #welcome-furniture p {
		display: block;
		float: none;
		width: 100%;
		}
	
	#home #welcome-furniture ul,
	#exit #welcome-furniture ul {
		display: inline-block;
		float: none;
		width: auto;
		}

	#home #welcome-furniture li:first-child::after,
	#exit #welcome-furniture li:first-child::after {
		padding-left: 15px;
		margin-right: 15px;
		}
	
	#content #copy #video-thumbnails .video {
		margin: 20px 0 0 0;
		width: 100%;
		}
	
	#content #copy #video-thumbnails .video:nth-child(2) {
		margin-top: 20px;
		}
	
	#content #copy form .row.col {
		width: 100%;
		}
	
	#content #copy form .row.select label {
		float: none;
		padding-top: 25px;
		width: 100%;
		}
	
	#content #copy form .row.select select {
		float: none;
		width: 100%;
		}
	
}


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

	#lobby-gallery,
	#lobby-videos {
		float: none;
		width: 100%;
		}
	
	#lobby-videos {
		margin-top: 20px;
		}
	
	#lobby-navigation .panel {
		margin: 20px 0 0 0;
		width: 100%;
		}
	
}


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

	#home #welcome form input[type="email"] {
		width: 100%;
		}

	#home #welcome form button {
		width: 100%;
		}
	
}


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

	#home #welcome-furniture,
	#exit #welcome-furniture {
		padding: 30px;
		}
	
	#home #welcome,
	#exit #welcome {
		padding: 0 30px;
		}
	
	#navigation-explorer #panels a {
		margin-right: 0;
		width: 100%;
		}
	
	#content #copy .gallery-thumbnails a {
		margin: 20px 0 0 0;
		width: 100%;
		}

	#content #copy .gallery-thumbnails a:nth-child(2) {
		margin-top: 20px;
		}
	
}


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

	#content #copy form .row.checkbox {
		padding-right: 0;
		width: 100%;
		}

	#navigation-explorer #navigation-explorer-close {
		padding-left: 34px;
		text-indent: -999999px;
		}
	
}


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

	#home #welcome form input[type="email"] {
		padding: 12px 30px;
		}
	
}


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

	#header .button {
		padding: 12px 30px;
		}
	
	#lobby.lobby #footer {
		padding: 20px;
		}
	
}


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

	#home #logos p img,
	#exit #logos p img {
		float: left;
		height: auto;
		width: 100%;
		}
	
}