/***********************************************************************************
*	Design by Moxxie Design
*	All rights reserved (c) 2020
***********************************************************************************/
@media screen and (min-width: 960px) {
	
	/***********************************************************************************
	*	General
	***********************************************************************************/	
	h2 {
		font-size: 2em;
	}	
	
	.button {
		width: auto;
	}

	/***********************************************************************************
	*	Wrappers
	***********************************************************************************/
	#content-wrapper {
		padding-top: 140px;
	}

	/***********************************************************************************
	*	Header
	***********************************************************************************/
	#wrapper #logo-container {
		border: none;
	}

	#wrapper.scrolling #logo-container {
		border-style: solid;
		border-width: 0px 0px 1px 0px;
		border-color: rgba(1, 83, 143, 1);
	}

	#logo-container .logo {
		width: 128px;
		height: 64px;
	}

	#logo-container .scrolling-title {
		line-height: 16px;
		top: 20px; left: 60px;
	}

	#wrapper.scrolling .scrolling-title {
		font-size: 16px;
	}

	#wrapper.scrolling .logo {
		width: auto;
		height: 20px;
	}

	.quick-contact-home {
		display: block;
		opacity: 1;
	
		position: absolute;
		top: 10px;
		right: 0px; 

		font-size: 0.8em;
		line-height: 1.2em;
	
		text-align: right;
		transition: 0.2s all ease-out;
	}

	.social-contacts {
		position: absolute;
		top: 10px;
		bottom: auto;
		right: 0px;
	
		display: flex;
		flex-direction: row;
		gap: 10px;

		transition: 0.2s all ease-out;
	}
	
	.social-contacts a {
		width: 30px;
		height: 30px;
	}

	#logo-container.scrolling .social-contacts {
		bottom: 15px;
	}

	.social-contacts a.social-whatsapp.mobile {
		display: none;
	}

	.social-contacts a.social-whatsapp.desktop {
		display: block;
	}
	
	/***********************************************************************************
	*	Navigation
	***********************************************************************************/
	#navigation {
		width: 100%;
		transition: all 0.2s ease-in-out;
	}

	#navigation * {
		transition: all 0.2s ease-in-out;
	}

	#wrapper.home.scrolling #navigation,
	#wrapper.home.scrolling #navigation * {
		height: 0px;
		opacity: 0;
	}

	#navigation .hamburger {
		display: none;
	}
	
	#navigation {
		height: auto;

		padding-top: 0px;
		position: relative;

		background-color: rgba(60, 60, 60, 1);

		z-index: 9;
		overflow: visible;
	}
	
	#navigation ul.menu {
		width: 960px;
		margin: auto;

		display: flex;
		flex-direction: row;
		gap: 0px;
	}
	
	#navigation .menu {
		display: block;
		text-align: left;

		background-color: transparent;
	}
	
	#navigation .menu > li {
		border: none;
		transition: 0.2s all ease-out;
	}
	
	#navigation .menu > li:hover,
	#navigation .menu > li:focus {
		background-color: rgba(0, 0, 0, 1);
	}
	
	#navigation .menu > li > a {
		width: 100%;
		padding: 15px 15px 15px 15px;
		display: block;
		
		text-align: center;
		box-sizing: border-box;

	}
	
	#navigation .menu li > ul.sub-menu {
		min-width: 100%;
		margin-left: 0px;

		position: absolute;
		top: 100%; left: 0px;
		
		text-align: left;
		display: none;
	}
	
	#navigation .menu li:hover > ul.sub-menu,
	#navigation .menu li a:focus + ul.sub-menu {
		display: block;
	}
	
	#navigation .menu ul.sub-menu > li {
		width: 100%;
		background-color: rgba(60, 60, 60, 1);
	}
	
	#navigation .menu > li a {
		box-sizing: border-box;
	}

	#navigation .menu ul.sub-menu a {
		padding: 10px 15px;
		white-space: nowrap;
	}
	
	/***********************************************************************************
	*	Hero image
	***********************************************************************************/
	.hero .inner {
		top: 41px;
	}
	
	.hero-content-container {
		max-width: 400px;
		max-height: 100%;

		margin-left: 80px;

		position: absolute;
		top: 50px;
		left: 50%;
	}
	
	/***********************************************************************************
	*	Front page content
	***********************************************************************************/
	#front-container {			
		box-sizing: border-box;
	}

	#front-container .front-section > p {
		max-width: 720px;
	}

	/***********************************************************************************
	*	Vehicles overview
	***********************************************************************************/
	#page #vehicle-container,
	#front-container .front-section.vehicles #vehicle-container {
		flex-direction: row;
		flex-wrap: wrap;
	}

	#page .vehicle,
	#front-container .front-section.vehicles .vehicle {
		width: calc(33% - 20px);
		margin: 0px;
	}

	/***********************************************************************************
	*	News
	***********************************************************************************/
	#news-slider .slick-arrow.slick-prev,
	#news-slider .slick-arrow.slick-next {
		width: 40px;
		height: 80px;
	}

	#news-slider .slick-arrow.slick-prev {
		left: -60px;
		background-color: rgba(237, 28, 36, 1);
	}

	#news-slider .slick-arrow.slick-next {
		right: -60px;
		background-color: rgba(237, 28, 36, 1);
	}

	#news-slider .slick-arrow.slick-next::before,
	#news-slider .slick-arrow.slick-prev::before {
		color: rgba(255, 255, 255, 1);
	}
	
	/***********************************************************************************
	*	Content
	***********************************************************************************/
	#page {
		width: 960px;
		
		padding: 20px 0px 90px 0px;
		margin: auto auto;
		
		box-sizing: border-box;
		align-items: flex-start;
	}
	

	#page.single-content {
		flex-direction: row;
		align-items: flex-start;
	}

	#page.has-sidebar .page-inner,
	#page.has-sidebar .float-right,
	#content.has-sidebar .float-right {
		width: 75%;
	}
	
	#content-backdrop {
		width: 960px;
		
		position: fixed;
		top: 0px; bottom: 0px;
		left: 50%;
		
		margin-left: -480px;
		background-color: rgba(255, 255, 255, 1);
	}
	
	.has-sidebar #page {
		display: flex;
		padding: 20px 0px;
	}
	
	.float-right h3:first-child {
		margin-top: 0px;
	}

	#page .mox-children li,
	ul.projects-container li {
		flex-basis: calc(20% - 10px);
	}

	#page .mox-children li a {
		font-size: 0.8em;
	}

	#page figure.left {
		width: 30%;
		float: left;
		
		margin: 0px 20px 10px 0px;
	}
	
	#page figure.right {
		width: 30%;
		float: right;
		
		margin: 0px 0px 10px 20px;
	}
	
	.page-privacybeleid h2 {
		text-align: left;
	}

	.wp-block-columns {
		display: flex;
		gap: 20px;
	}

	/***********************************************************************************
	*	Contact
	***********************************************************************************/
	#quick-contact {
		flex-direction: row;
	}
	
	#quick-contact a {
		width: 50%;
		
		background-size: auto 50%;
		padding: 20px 20px 20px 75px;
		background-position: 20px center;
	}
	
	div.wpcf7-response-output {
		top: -40px;
	}

	.contact-container {
		display: flex;
		flex-direction: row;
		gap: 20px;
	}
	
	/***********************************************************************************
	*	Sitemap
	***********************************************************************************/
	#page ul.wsp-pages-list {
		padding-left: 0px;
	}
	
	#page .wsp-pages-list li {
		list-style-type: none;
	}
	
	/***********************************************************************************
	*	Footer
	***********************************************************************************/
	#footer {
		width: 960px;
		margin: auto auto;
	}
	
	#footer .footer-section.section-right {
		text-align: right;
	}
	
	#footer .footer-section {
		margin-bottom: 0px;
	}

	/***********************************************************************************
	*	Testimonials
	***********************************************************************************/
	.testimonials-slider {
		padding: 40px 10px;
	}

	.testimonials-item .inner {
		flex-direction: row;
		align-items: flex-start;
	}

	.testimonials-item .testimonials-featured {
		height: 100%;
		padding-top: 0px;
	}

	.slick-arrow.slick-prev {
		left: -25px;
	}
	
	.slick-arrow.slick-next {
		right: -25px;
	}

	.slick-track
	{
		display: flex !important;
	}

	.slick-slide div {
		height: 100%;
	}
}