
/* Responsive */

@media only screen and (max-width:1023px) {
	body {
		font-size: 4vw;
	}
    .col-left .more-text {
        font-size: 4vw;
        text-align: left;
    }
    #navigation #logo-c {
        width: 32px;
        top: 10px;
        left: 3vw;
        opacity: 1 !important;
        transform: scale(1) !important;
        filter: none !important;
        height: 24px;
    }
    .hamburger {
        padding-top: 15px;
        width: 35px;
    }
	.hamburger.active {
		padding-top: 25px;
	}
    .hamb_line {
        margin-bottom: 8px;
        padding-bottom: 2px;
        background: #000!important;
    }
	
    .menu {
        padding-left: 18vw;
    }
    .menu a {
        font-size: 10vw;
        margin: 1.5vh 0;
    }	
	.menu A:before {
		content: "";
		left: -8.2vw;
		bottom: 0vw;
		width: 8vw;
		height: 1vw;
	}	
	
	.mobile {
		display: initial;
	}
	.desktop {
		display: none!important;
	}
	#preloader .logo {
		width: 18vw;
		left: 41%;
		top: 45%;
		font-size: 20vw;
		padding-bottom: 0;
		text-align: center;
		padding: 0 0 0 0;
	}
	.header {
		background: #fff;
		width: 100%;
		height: 42px;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 9999;
		box-shadow: 0 0 5px rgba(0,0,0,0.3);
	}
    #lang-nav {
        bottom: 4.5vw;
        right: 4.5vw;
        font-size: 19px;
        top: initial;
        left: initial;
    }	
	.logo {
		width: 9%;
		font-size: 10vw;
		margin: 0.5% 2.8%;
	}
	#navigation .links ul li A {
        font-size: 12vw;
        white-space: nowrap;
    }
	#navigation .links ul li A:before {
		left: -6vw;
		bottom: 0.4vw;
		width: 6vw;
		height: 3px;
	}
	#navigation .links ul li.hover A:before {
		left: -8vw;
		width: 8vw;
	}
	#navigation .links ul li A:after, #navigation .links ul li A:hover:after {
		display: none;
	}
	
	.flex {
		flex-direction: column;
	}	
	section {
		overflow: hidden;
	}	
	section.hero {
		margin-top: 41px;
	}	
    .section-content, .subpage .section-content, #about .section-content {
        width: 90vw;
        margin: 8vw 5vw 12vw 5vw;
    }
	.section-content.slim, .subpage .section-content.slim {
		width: 90%;
		margin: 8vh 5%;
	}
	.hero .section-content {
		height: 100%;
		margin-top: 0!important;
		margin-bottom: 0!important;
	}
    .hero .headline-1 {
        font-size: 11vw;
        margin-left: 5vw;
        padding-left: 5vw;
        width: 100%;
    }
	.headline-1, .headline-2 {
		position: relative;
		padding-left: 5vw;
	}		
	.show .headline-1:before, .show .headline-2:before, .hero.show .headline-1:before {
		margin-left: -5vw;
		width: 5vw;
	}	
	p, ul {
		margin-bottom: 1.1em;
		margin-top: 1.1em;
	}
	h2, .headline-2, .page-default .headline-2, .headline-wrapper h2, #kontakt .headline-2 {
		font-size: 12vw;
		height: auto;
		white-space: normal;
		line-height: 1.4;
		margin-bottom: 4vw;
		margin-top: 2vw;
		white-space: nowrap;
	}	
	#justus h2.headline-2 {
		margin-bottom: 4vw;
	}
	h2 span.subtitle {
		font-size: 4.5vw;
		white-space: normal;
	}
	h3 {
        font-size: 5vw;
        margin-top: 10vw;
    }
	.page-default h3 {
		font-size: 17px;
		letter-spacing: 0;
	}	
	.page-default.longtext li {
		margin-bottom: 12px;
	}	
	a.underline:after, .underline a:after, .footer-menue a:after {
		height: 1px;
	}
	ul {
		padding-left: 5vw;
	}
	
    .section-content.flexbox {
        flex-direction: column;
        gap: 8vw;
        flex-wrap: wrap;
    }
	.col-left {
		width: 100%;
	}
	#about .flexbox > div.col-left {
		flex-basis: 100%;
	}
    .col-left h2.headline-2, .col-left .headline-2, #about h2.headline-2 {
        font-size: 12vw;
        text-align: left;
        margin-bottom: 8vw;
        margin-top: 4vw;
    }
	.no-br-mob br {
		display: none;
	}
	.no-br-mob span {
		display: inline;
	}
	
    .parallax-section {
        height: 110vw;
    }
	.home .parallax-section {
        height: 100vh;
    }
    .parallax-section .video-wrapper {
        width: 100%;
        height: 100%;
        min-width: 100%;
    }
	
	
/* Home */	
    section#home {
        height: calc(100vh - 41px);
        /* height: calc(120vw - 41px); */
        margin-top: 41px;
    }
	.home .section-content {
		margin: 12vw 5vw 14vw 5vw !important;
	}
	.home .parallax-section .section-content {
		height: auto;
	}	
	.home .video-wrapper.hero {
        height: 120vw;
        height: calc(100vh - 41px);
    }
    .home .video-wrapper.hero video {
        position: absolute;
        height: 100%;
        left: -100%;
    }
	#hero_title .fied, #hero_title .law {
		font-size: 20.6vw;
		letter-spacing: -0.2vw;
	}
	#home .titel {
		bottom: 40vw;
        bottom: initial;
        top: 55vh;
	}
	#home .titel .titel1 {
		text-align: center;
		margin-left: 0;
	}
	#home .titel .titel2 {
        font-size: 4.5vw;
        letter-spacing: 0vw;
        width: 86vw;
        text-align: center;
    }
    a.btn_form {
        position: absolute;
        right: 32vw;
        margin: 0;
        bottom: initial;
        top: calc(55vh + 32vw);
        height: 11vw;
    }
	.slidebutton {
		border-radius: 6vw;
		margin: 2vw;
		height: 10vw;
	}
    .slide-inner span {
        border-radius: 6vw;
        padding: 2.5vw 3vw;
        height: 10vw;
        font-size: 5vw;
        width: 30vw;
        text-align: center;
    }
	.btn_form .slidebutton {
		height: 11vw;
	}
    .btn_form .slide-inner span {
        padding: 3vw 3vw;
        height: 11vw;
        width: 30vw;
    }
	span.slide2 {
		display: none;
	}
	#aboutVideo {
		width: 100%;
	}	
	
	.video-wrapper.hero, section.hero, section#hero {
        height: 90vw;
        margin-top: 41px;
    }
	.video-wrapper.hero {
        display: flex;
        justify-content: center;
    }
    .video-wrapper video, .video-wrapper.hero video {
        position: relative;
        height: 100%;
        width: auto;
        min-height: initial;
        min-width: initial;
    }
	
	.titel .contact-buttons {
		text-align: center;
		margin-top: 5vh;
	}	
	.headline-wrapper {
		justify-content: flex-start;
	}
    .headline-wrapper .img-cover-wrapper {
        margin-bottom: 6.5vw;
        width: auto !important;
        margin-left: 3vw !important;
    }
	.headline-wrapper .img-cover-wrapper img {
		display: none;
	}
	.headline-wrapper .img-cover {
		height: 130%;
	}
    .img-cover-wrapper.col-right {
        width: 90vw;
        height: 90vw;
        border-radius: 50%;
        padding: 0;
    }
	.col-right .video-wrapper {
		height: 100%;
	}
    .img-cover-wrapper img, .img-cover-wrapper video {
        min-width: 100%;
        max-width: initial;
        height: 101%;
        /* object-fit: cover; */
        width: auto;
        margin-left: -25%;
    }
	
	.section-content.border {
		padding-bottom: 12vw;
	}	
	p.team-data {
		margin-bottom: 4vw;
	}
	.team-data span {
		margin-right: 1.2vw;
	}
    .team-data {
        margin-top: 0;
        font-size: 3.6vw;
        letter-spacing: -0.01vw;
    }
	a.linkedin.black img {
		width: 6vh;
		margin-top: 1vh;
	}	
	.team .hero .section-content {
		display: none;
	}	
	.full.slider {
		margin: 8vw auto 12vw auto;
	}
	.slideshow, .full.slider, .slideshow .slides, .slideshow a, .slides div, .slideshow img, .slideshow video {
		height: 40vw;
	}
	.slideshow a, .slides div {
		width: 60vw;
		flex-shrink: 0;
	}	
	.slideshow.pics4 .slides {
		width: 480vw;
		animation: moveSlideshow 8s linear infinite;
	}		
	.slideshow.pics5 .slides {
		width: 600vw;
		animation: moveSlideshow 10s linear infinite;
	}	
	.slideshow.pics6 .slides {
		width: 720vw; /* Anzahl Bilder x 2 x 60 Breite */
		animation: moveSlideshow 12s linear infinite; 
	}
	
	.number {
	}
	.flex > p {
		margin-top: 0;
	}
	p.text-right {
		float: left!important;
		margin-top: 4vw!important;
		width: 96%!important;
		text-align: left!important;
		margin-left: 2%;
	}	
	p.text-left {
		width: 96%!important;
		text-align: left!important;
		float: left!important;
		margin-left: 2%;
		margin-right: 2%;
		margin-top: 72vw!important;
		margin-bottom: 5vw!important;
	}
	
	#kontakt {
		font-size: 1.2em;
		line-height: 1.5;
	}	
	
	#contactform .bigtext {
		font-size: 5.5vw;
		margin-top: 8vw;
		margin-bottom: 16vw;
	}		
    #contactform h2 {
        font-size: 10vw;
    }
	#contactform form {
		width: 100%;
		margin-left: 0;
	}
    input[type="text"], input[type="email"], textarea, #form-modal.active input[type="text"], #form-modal.active input[type="email"], #form-modal.active textarea {
        padding: 2vw;
        font-size: 4.3vw;
        margin-bottom: 2vh;
        width: initial;
        border-radius: 0 !important;
        margin-top: 0;
    }	
    textarea {
        margin-top: 3vw;
    }	
	::placeholder {
		font-size: 4.5vw!important;
	}
    .privacy-accept, #form-modal.active .privacy-accept {
        margin-bottom: 3.5vw;
        text-align: right;
        font-size: 3.4vw;
        line-height: 1.2;
    }
	input.submit-button, #form-modal.active input.submit-button {
		width: 50%;
		font-size: 4.5vw;
		padding: 2.5vw 0;
        border-radius: 0 !important;
	}
	
    #form-modal.active {
        left: 5%;
        top: calc(41px + 1.5vh);
        width: 80%;
        height: auto;
        padding: 1vh 5% 5vh 5%;
        background: rgba(255, 255, 255, .95);
    }
    #form-modal.active .headline-2 {
        font-size: 8vw;
        margin-top: 2vw;
        padding-left: 3.5vw;
        margin-bottom: 0.5vh;
    }
	#btn_form_close {
		width: 6vw;
	}

	p.text-right br, p.text-left br {
		display: none;
	}	
	p.text-right.left-line {
		margin-left: 5vw;
	}
	.headline-1:after, .headline-2:after {
		bottom: -8px;
		width: 7.8vw;
	}	
	.page-default h1, .page-default .headline-1, .page-default .headline-2 {
		font-size: 10vw !important;
		margin-top: 12vw !important;
		margin-bottom: 4vw !important;
		height: auto;
	}
	.left-line a:after {
		width: 2.2vw!important;
		height: 2px!important;
		top: 3.8vw!important;
		left: -2.2vw!important;
	}
	.left-line a:hover:after, .left-line a.active:after {
		width: 11px!important;
		left: -12px!important;
	}
	
	#faq .bezeichnung {
		line-height: 1.4;
		padding: 4vw .5vw 4vw .5vw;
		display: block;
		font-size: 15px;
	}
	a.loadmore {
		margin-top: 5vw;
		line-height: 1.2;
	}
	.down-link {
		display: none;
	}
	
/* Kompetenzen */	
    #kompetenzen .headline-2 {
        margin-bottom: 12vw;
        font-size: 11.4vw;
        margin-bottom: 14vh;
    }
    .flexbox.buttons {
        width: 82vw;
        gap: 7vw;
    }
    #kompetenzen .slidebutton {
        height: 10vw;
        letter-spacing: 0.2vw;
        width: 100%;
        margin: 0;
    }
	#kompetenzen .slidebutton.active .slide-inner {
		    transform: none;
	}	
	#kompetenzen .slide-inner > span {
        padding: 2.5vw 0;
        height: 10vw;
        width: 100%;
    }
	#verkehrsrechtVideo, #speditionsrechtVideo {
		display: none;
	}
	
/* Team */
	figure.round {
		height: auto;
		margin: 0 auto 4vw auto;
		width: 80vh;
		max-width: 90vw;
	}	
	
/* Karriere */
    #karriere video {
        left: -110%;
    }
    .parallax-section#karriere .section-content {
        height: calc(100% - 26vw);
        height: 80vh;
        margin-top: 12vw !important;
        margin-bottom: 14vw !important;
        height: calc(100vh - 26vw);
    }
	#karriere .more-text {
		font-size: 4.5vw;
		position: absolute;
		left: 0;
		bottom: 0;
	}
	
/* Kontakt */
    .parallax-section#kontakt {
        height: 100vh;
    }
	section#kontakt .bg-img {
		left: initial;
		right: 0;
		object-fit: unset;
		height: 100vh;
		max-width: initial;
		width: auto;
		min-height: 100vh;
	}

/* Blog */
    figcaption {
        margin-bottom: 20px;
        width: 90vw;
        margin-left: 5vw;
        font-size: 4.5vw;
    }	

	
/* Kompetenzen Page */
    section#accordions {
        padding-bottom: 8vw;
    }
	.accordion .bezeichnung {
		height: 14vw;
	}
    .accordion .bezeichnung h2 {
        font-size: 4.3vw;
        font-weight: 500;
        white-space: normal;
        line-height: 1.2;
        padding-right: 5%;
        width: 95%;
    }
	.accordion .bezeichnung h2:after {
		width: 2.5vw;
		height: 2.5vw;
	}
	.accordion h3 {
		font-size: 4.5vw;
		margin-bottom: .5em;
		margin-top: 2em;
		line-height: 1.3;
	}
	.section-content.mt0 {
		margin-top: 0 !important;
	}
	
	
	/* Impressum, Datenschutz */
    .page-default .headline-3 {
        font-size: 5.5vw;
        margin-top: 9vw;
        letter-spacing: 0;
    }
    .textpage h3.headline-3 {
        font-size: 4.5vw;
        letter-spacing: 0;
        margin-top: 7vw;
    }
	.page-default ul {
		padding-left: 6vw;
	}
	.button-back {
		width: 6vw;
		height: 6vw;
		right: 0;
		top: 2vw;
	}

}

@media only screen and (max-width: 600px) {
    .home .video-wrapper.hero video {
        position: absolute;
        height: 100%;
        left: -170%;
    }
}
