/*

Southwest Motorhomes - Responsive Stylesheet
https://www.southwestmotorhomes.co.uk/
Handwritten by Oliver Coningham

*/

@media screen and (max-width: 1700px) {
    #branding .logo {
		padding: 20px;
		left: 30px;
		}
}

@media screen and (max-width: 1640px) {
    #navigation li a {
		font-size: 12px;
		line-height: 22px;
		}
}

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

	#navigation {
		padding: 0 30px;
		}

	#branding .logo {
		padding: 20px;
		left: 30px;
		}

	#navigation li {
		margin-left: 20px;
		}
	
	#features {
		padding: 0 30px;
		}
	
	#copy {
		padding: 60px;
		}
	
	#furniture {
		padding: 20px 30px;
		}
	
	#footer {
		padding: 40px 30px;
		}
	
	#footer .footer a {
		word-break: break-word;
		}
	
	#brand-logos {
		overflow: hidden;
		padding: 40px 30px;
		}

	.slider-motorhomes {
		padding: 40px 0 40px 30px;
		}
	
	.slider-slides {
		padding-right: 90px;
		}
		
}


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

	#slideshow .caption {
		font-size: 70px;
		line-height: 70px;
		}
	
	#slideshow .caption strong {
		font-size: 110px;
		line-height: 110px;
		}
	
	#hero-caption {
		font-size: 70px;
		line-height: 70px;
		}
	
	#hero-caption strong {
		font-size: 110px;
		line-height: 110px;
		}
	
	#footer .footer .logo img {
		float: left;
		height: auto;
		width: 100%;
		}
		#motorhome-hire #copy .vehicles a .vehicle {
			width: calc(50% - 30px);
		}	
		#contact #enquiry-form form .col {
			float:  none;
			margin: 0;
			width: 100%;
			margin-top: 10px;
		}
}


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

	#navigation li a {
		font-size: 12px;
		line-height: 22px;
		}
	
	#branding .logo img {
		float: left;
		height: auto;
		width: 180px;
		}
	
	#slideshow .caption {
		font-size: 50px;
		line-height: 50px;
		}
	
	#slideshow .caption strong {
		font-size: 90px;
		line-height: 90px;
		}
	
	#hero-caption {
		font-size: 50px;
		line-height: 50px;
		}
	
	#hero-caption strong {
		font-size: 90px;
		line-height: 90px;
		}

	#slides-nav {
		bottom: 150px;
		}
	
	.slider-copy {
		padding-right: 40px;
		width: 25%;
		}
	
	.slider-slides {
		width: 75%;
		}
		
}


@media screen and (max-width: 1280px) {
    
    #navigation ul {
		background-color: #0C3261;
		display: none;
		height: 100%;
		padding: 45px 20px;
		position: fixed;
		top: 0;
		left: 0;
		text-align: center;
		width: 100%;
		z-index: 20;
		}
	
	#navigation ul li {
		display: block;
		float: none;
		margin: 15px 0;
		width: 100%;
		}
	
	#navigation ul li a {
        font-size: 18px;
        line-height: 28px;
		}
	
	#navigation #nav-show {
		background: url("../img/icon-menu.svg") no-repeat 0 0;
		cursor: pointer;
		display: inline-block;
		height: 21px;
		margin: 30px 0;
		text-align: left;
		text-indent: -999999px;
		width: 23px;
		}
	
	#navigation #nav-hide {
		background: url("../img/icon-close.svg") no-repeat center center;
		cursor: pointer;
		display: none;
		height: 21px;
		position: fixed;
		top: 30px;
		right: 20px;
		text-align: left;
		text-indent: -999999px;
		width: 21px;
		z-index: 21;
		}

	#features .feature h2 {
		font-size: 35px;
		line-height: 35px;
		}

	#features .feature strong {
		font-size: 30px;
		line-height: 30px;
		}
	
	#features {
		margin-top: -90px;
		}

	#hero {
		height: 500px;
		}
	#sidebar,
	#contact #enquiry-form,
	#contact #copy {
		float: none;
		width: 100%;
		padding: 40px;
	}
	#new-motorhomes #sidebar form .form-row,
	#used-motorhomes #sidebar form .form-row {
		width: 50%;
		float: left;
	}
	#new-motorhomes #sidebar form input.search-button,
	#new-motorhomes #sidebar form .button,
	#used-motorhomes #sidebar form input.search-button,
	#used-motorhomes #sidebar form .button {
		float: right;
		margin-right: 0;
		margin-left: 20px;
	}
	body.page #copy {
		width: 100%;
	}
	
}


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

	#navigation {
		padding: 0px 20px;
		}
	
	#branding .logo {
		left: 20px;
		}
	
	#branding .logo img {
		width: 150px;
		}
	
	#navigation ul {
		padding: 30px 0;
		}
	
	#slideshow .caption {
		font-size: 40px;
		line-height: 40px;
		}
	
	#slideshow .caption strong {
		font-size: 70px;
		line-height: 70px;
		}
	
	#hero-caption {
		font-size: 40px;
		line-height: 40px;
		}
	
	#hero-caption strong {
		font-size: 70px;
		line-height: 70px;
		}
	
	#features {
		margin-top: -60px;
		}
	
	#slides-nav {
		bottom: 120px;
		}

	#features {
		padding: 0 20px;
		}
	
	#copy {
		padding: 40px;
		}
	
	#copy h1 {
		padding-bottom: 15px;
		}
	
	#furniture {
		padding: 20px;
		}
	
	#footer {
		padding: 40px 20px;
		}
	
	#copyright li {
		margin-left: 20px;
		}
	
	#footer .footer {
		margin: 0 20px 0 0;
		width: calc(25% - 15px);
		}
	
	#footer .footer:first-child {
		margin: 0 0 40px 0;
		text-align: center;
		width: 100%;
		}
	
	#footer .footer:first-child .logo {
		margin: 0 auto;
		width: 25%;
		}
	
	#footer .footer .social {
		clear: both;
		display: block;
		font-size: 0;
		line-height: 0;
		text-align: center;
		width: 100%;
		}
	
	#footer .footer .social li {
		float: none;
		display: inline-block;
		}
	
	#brand-logos {
		padding: 0 20px 40px 20px;
		}
	
	#brand-logos li {
		float: left;
		margin: 40px 40px 0 0;
		width: calc(20% - 32px);
		}
	
	#brand-logos li:nth-child(10n+10) {
		margin-right: 40px;
		}
	
	#brand-logos li:nth-child(5n+5) {
		margin-right: 0;
		}
	
	.slider-motorhomes {
		padding: 40px 0 40px 20px;
		}
	
	.slider-slides {
		padding-right: 80px;
		width: 65%;
		}
	
	.slider-copy {
		width: 35%;
		}
	#slideshow {
		margin-top: 85px;
		}
		body.page #content.motorhome #media .gallery .img,
		body.page #content.motorhome #media .gallery .img:nth-child(4n+4) {
			width: calc(33.33% - 15px);
			margin-right: 22px;
		}
		body.page #content.motorhome #media .gallery .img:nth-child(3n+3) {
			margin-right: 0;
		}
		body.page #content.motorhome #copy ul li {
			width: 50%;
			margin-right: 0;
		}
	.why-choose-us-container .why-choose-us .item,
	.service-item-container .service-item .item {
		width: 48%;
	}
}


@media screen and (max-width: 1080px) {
	
	#features .feature {
		width: 50%;
		}
	
	#features a:nth-child(1) .feature,
	#features a:nth-child(2) .feature {
		margin-bottom: 40px;
		}
	
	#features .feature:hover {
		-webkit-transform: translateY(-20px);
		-ms-transform: translateY(-20px);
		transform: translateY(-20px);
		}

	#copy h1 {
		font-size: 40px;
		line-height: 40px;
		}

	#copy h1 strong {
		font-size: 45px;
		line-height: 45px;
		}
	
	#hero {
		height: 400px;
		}
	
	#copyright {
		display: block;
		float: none;
		text-align: center;
		width: 100%;
		}
	
	#copyright p {
		display: block;
		float: none;
		width: 100%;
		}
	
	#copyright ul {
		display: inline-block;
		float: none;
		padding-top: 10px;
		width: auto;
		}

	#copyright ul li:first-child {
		margin-left: 0;
		}
	
	#credit {
		display: block;
		float: none;
		margin-top: 7px;
		text-align: center;
		width: 100%;
		}
		#slideshow {
			margin-top: 75px;
			}
}


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

	#footer {
		text-align: center;
		}
	
	#footer .footer {
		margin: 0 0 40px 0;
		width: 100%;
		}
	
	.slider-copy {
		margin: 0 0 40px 0;
		padding: 0;
		width: 100%;
		}
	
	.slider-slides {
		width: 100%;
		}
	
}


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

	#features {
		margin-top: -40px;
		}
	
	#slides-nav {
		bottom: 80px;
		}
	
	#copy {
		padding: 40px 20px;
		width: 100%;
		}
	
	#copy h1 {
		margin-top: 0;
		}

	#copy-image {
		height: 450px;
		position: static;
		top: auto;
		right: auto;
		clear: both;
		width: auto;
		}
	#new-motorhomes #sidebar form .form-row, #used-motorhomes #sidebar form .form-row {
		width: 100%;
		float: none;
		margin-top: 5px;
	}
	#new-motorhomes #sidebar form label, #used-motorhomes #sidebar form label {
		font-weight: 300;
		padding-top: 2px;
	}
	#new-motorhomes #sidebar form select, #used-motorhomes #sidebar form select {
		line-height: 20px;
		padding: 5px;
	}
	body.page #content.motorhome #media,
	body.page #content.motorhome #copy {
		float: none;
		width: 100%;
	}
	body.page #content.motorhome #media .gallery .img,
	body.page #content.motorhome #media .gallery .img:nth-child(3n+3),
		body.page #content.motorhome #media .gallery .img:nth-child(4n+4) {
			width: calc(20% - 15px);
			margin-right: 18px;
		}
		body.page #content.motorhome #media .gallery .img:nth-child(5n+5) {
			margin-right: 0;
		}

		body.page #content.motorhome #media img,
		body.page #content.motorhome #media .gallery,
		#copy {
			padding: 50px 40px 20px 40px;
		}
		#contact #contact-details .col {
			float: none;
			margin: 40px 0 0 0;
			width: 100%;
		}
}


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

	#home #slides-nav {
		display: none;
		}
	
	#slideshow .caption {
		padding-top: 40px;
		}
	
	#hero {
		height: 300px;
		}
	
	#footer .footer:first-child .logo {
		width: 35%;
		}
	
	#brand-logos li {
		width: calc(25% - 30px);
		}
	
	#brand-logos li:nth-child(5n+5) {
		margin-right: 40px;
		}
	
	#brand-logos li:nth-child(4n+4) {
		margin-right: 0;
		}

		.why-choose-us-container .why-choose-us .item,
		.service-item-container .service-item .item {
			width: 100%;
		}
	
}


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

	#slideshow .caption {
		font-size: 30px;
		line-height: 30px;
		}
	
	#slideshow .caption strong {
		font-size: 60px;
		line-height: 60px;
		}	
	
	#hero-caption {
		font-size: 30px;
		line-height: 30px;
		}
	
	#hero-caption strong {
		font-size: 60px;
		line-height: 60px;
		}	
	
	#copy h1 {
		font-size: 35px;
		line-height: 35px;
		padding-bottom: 5px;
		}

	#copy h1 strong {
		font-size: 40px;
		line-height: 40px;
		}
	
	#copy-image {
		height: 350px;
		}
	
	#copy h1::before {
		font-size: 100px;
		line-height: 100px;
		}
	
	.slider-slides-content .slide .title {
		padding: 20px;
		}
	
	.slider-slides-content .slide .desc {
		padding: 20px;
		}
	
	.slider-slides-content .slide .button a {
		padding: 15px 20px;
		}
	
	.slider-slides .slick-dots li {
		width: 30px;
		}
		#motorhomes-overviews .item .item-img {
			width: 100%;
		}
		#motorhomes-overviews .item .item-img .slide {
			padding-right: 0;
		}
		#motorhomes-overviews .item .item-copy {
			padding: 20px;
			width: 100%;
		}
		#motorhomes-overviews .item .item-copy li {
			float: none;
			width: 100%;
		}
		#motorhomes-overviews .item .item-img .count, #motorhomes-overviews .item .item-img .tag-line, .slider-slides-content .slide .tag-line {
			right: 20px;
		}
		body.page #content.motorhome #motorhome-cta form .col {
			float: none;
			margin: 0 0 10px 0;
			width: 100%;
		}
}


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

	#slideshow .caption strong {
		font-size: 40px;
		line-height: 40px;
		}
	
	#hero-caption strong {
		font-size: 40px;
		line-height: 40px;
		}
	
	#slideshow .caption {
		padding-top: 90px;
		}

	#slideshow .caption.caption-page {
		padding-top: 30px;
		}

	#features {
		margin-top: -20px;
		}
	
	#features .feature {
		margin-bottom: 40px;
		width: 100%;
		}
	
	#features a:nth-child(4) .feature {
		margin-bottom: 0;
		}
	
	#features .feature-copy {
		padding: 30px 0 0 0;
		}
	
	#hero {
		height: 250px;
		}
	
	#footer .footer:first-child .logo {
		width: 45%;
		}
	
	#brand-logos li {
		width: calc(33.33333333333333% - 26.66666666666667px);
		}
	
	#brand-logos li:nth-child(4n+4) {
		margin-right: 40px;
		}
	
	#brand-logos li:nth-child(3n+3) {
		margin-right: 0;
		}
	
	.slider-nav a {
		background-size: 30px 30px;
		height: 50px;
		width: 50px;
		}
	
	.slider-slides {
		padding-right: 50px;
		}
	
	.slider-slides .slick-dots li {
		width: 10px;
		}
		body.page #content.motorhome #media .gallery .img,
		body.page #content.motorhome #media .gallery .img:nth-child(3n+3),
		body.page #content.motorhome #media .gallery .img:nth-child(4n+4),
		body.page #content.motorhome #media .gallery .img:nth-child(5n+5) {
			width: calc(33.33% - 15px);
			margin-right: 22px;
		}
		body.page #content.motorhome #media .gallery .img:nth-child(3n+3) {
			margin-right: 0;
		}
		body.page #content.motorhome #copy ul.features li {
			float: none;
			margin: 10px 0 8px 0;
			width: 100%;
		}
		body.page #content.motorhome #copy ul {
			margin: 15px 0 0 0;
		}
		body.page #content.motorhome #copy ul li {
			width: 100%;
		}
		body.page #content.motorhome #breadcrumb {
			padding:0 40px;
		}
		#motorhome-hire #copy .vehicles a .vehicle {
			width: 100%;
			margin-right: 0;
		}	
}


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

	#slideshow .caption {
		font-size: 25px;
		line-height: 25px;
		}
	
	#slideshow .caption strong {
		font-size: 30px;
		line-height: 30px;
		}
	
	#hero-caption {
		font-size: 25px;
		line-height: 25px;
		}
	
	#hero-caption strong {
		font-size: 30px;
		line-height: 30px;
		}
	
	#slideshow .caption {
		padding-top: 65px;
		}
	
	#branding .logo img {
		width: 120px;
		}
	
	#hero {
		height: 200px;
		}
	
	#copyright li {
		float: none;
		margin-left: 0;
		}
	
	#copyright ul li:first-child {
		margin-bottom: 10px;
		}
	
	#footer .footer:first-child .logo {
		width: 55%;
		}
	#new-motorhomes #sidebar form label,
	#used-motorhomes #sidebar form label {
		width: 50%;
	}
	#new-motorhomes #sidebar form input.search-button,
	#new-motorhomes #sidebar form .button,
	#used-motorhomes #sidebar form input.search-button,
	#used-motorhomes #sidebar form .button,
	#sidebar-brands p a,
	#motorhomes-overviews .item .item-copy .button,
	body.page #content.motorhome #motorhome-cta form button,
	body.page #content.motorhome #copy .button {
		background-position: right 5px center;
		cursor: pointer;
		padding: 10px 60px 10px 20px;
		font-size: 13px;
		background-size: 30px 30px;
	}
	body.page #content.motorhome #copy .button {
		background-position: left 5px center;
		padding: 10px 20px 10px 60px;
	}
	#motorhomes-overviews .item .item-copy .button {
		position: relative;
		bottom: 0;
		right: 0;
	}
	#motorhomes-overviews .item .item-img .slick-dots li {
		width: 40px;
	}
}


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

	#slideshow .caption {
		font-size: 20px;
		line-height: 20px;
		padding-top: 75px;
		}
	
	#slideshow .caption strong {
		font-size: 25px;
		line-height: 25px;
		padding-top: 5px;
		}
	
	/*
	#hero-caption {
		font-size: 20px;
		line-height: 20px;
		}
	
	#hero-caption strong {
		font-size: 25px;
		line-height: 25px;
		padding-top: 5px;
		}
	*/
	
	#brand-logos li {
		width: calc(50% - 20px);
		}
	
	#brand-logos li:nth-child(3n+3) {
		margin-right: 40px;
		}
	
	#brand-logos li:nth-child(2n+2) {
		margin-right: 0;
		}
	
	
}


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

	#slideshow .caption {
		display: none;
		}
	
	#footer .footer:first-child .logo {
		width: 65%;
		}
	
}