@media only screen and (min-width: 320px) {
    /* For mobile phones: */
	@font-face {
		font-family: JosefinSans;
		src: url('/fonts/JosefinSans-Regular.ttf');
		font-weight: 600;
	}
	
	@font-face {
		font-family: JosefinSansLight;
		src: url('/fonts/JosefinSans-Light.ttf');
		font-weight: 400;
	}
	  
	@font-face {
		font-family: JosefinSansBold;
		src: url('/fonts/JosefinSans-Bold.ttf');
		font-weight: 800;
	}

    html {
		font-size: 10px;
		scroll-behavior: smooth;
		overflow-x: hidden;
		font-family: Garamond;
    }

	ul li {
		font-size: 1.4rem;
	}

	.nav > li > a:hover, .nav > li > a:focus {
		background-color: unset;
		font-weight: 600;
	}

	#main {
		overflow: hidden;
	}

	main,
	article {
		font-family: Garamond;
	}

	#home-welcome {
		box-shadow: .5rem .5rem .5rem .5rem rgb(168, 167, 167);
		margin-bottom: 6rem;
	}

	#footer .footer-ben img {
		max-width: 100%;
	}

	.text-box .rubrik {
		margin-bottom: 3rem;
	}

	.text-box .header {
		font-size: 2.4rem;
		font-weight: 600;
		line-height: 1.5;
		margin-bottom: 3rem;
	}

	.text-box .text {
		font-size: 1.6rem;
	}

	.acc-6 {
		width: 100%;
	}

	.text-box {
		padding: 2rem;
	}

	article {
		margin-left: 2rem;
		margin-right: 2rem;
	}

	body {
		hyphens: auto;
	}

	#mym-insert-here-75881 .mym-widget-container.mym-widget-video.embedded {
		min-width: 100%;
		margin-top: 1rem;
		margin-bottom: 1rem;
	}

	#numbers-video,
	.happy img {
		width: 100%;
		margin-top: 1rem;
		margin-bottom: 1rem;
	}

	.acc-4 {
		width: 100%;
	}

	.datev-logo img {
		width: 50%;
		margin-top: 1rem;
		margin-bottom: 1rem;
	}

	.acc-3 .mb-0,
	.acc-6 .mb-0 {
		padding: 1rem;
	}

	.rubrik a {
		color: black;
	}

	#beratung-anchor .rubrik,
	#mandanten-anchor .rubrik,
	#spezial-anchor .rubrik,
	.honorar .rubrik,
	#download-anchor .rubrik,
	#karriere-anchor .rubrik {
		font-size: 1.6rem;
		padding-top: 3rem;
	}

	.imprint .header,
	.dsgvo .header {
		padding-top: 3rem;
	}

	#spezial-anchor,
	.honorar,
	#download-anchor,
	#karriere-anchor,
	.imprint, .dsgvo {
		margin-bottom: 3rem;
	}

	.happy-2 {
		margin-top: 2rem;
		margin-bottom: 1rem;
	}

	.happy-3 {
		max-width: 50%;
	}

	#spezial-anchor #numbers-video {
		margin-bottom: 4rem;
	}

	.mb-0 {
		background-color: lightgrey;
	}

	.mb-0 .s2 {
		color: black;
	}

	.acc-2 {
		width: 100%;
	}

	.pm {
		position: absolute;
		right: 5rem;
	}

	.mb-0 > button:hover{
		text-decoration:none!important;
	}
	
	.mb-0 > button:active {
		text-decoration:none!important;
	}
	  
	#home-picture-label-mobile {
		font-size: 3rem;
		padding-top: 3rem;
		font-weight: 600;
		padding-bottom: 4rem;
	}

	.icon-bar {
		background-color: black;
	}

	#mobile-collapse-front {
		display: none;
		position: absolute;
		right: 0;
		top: 0;
		padding-top: 7rem;
		background-color: #f0c822;
		font-size: 2rem;
		width: 100vw;
		height: 100vh;
		text-align: center;
		align-items: center;
		z-index: 1;
	}

	.nav {
		width: 100%;
	}

	#mobile-collapse-front a {
		color: black;
		padding-bottom: 3.5rem;
		font-family: Garamond;
	}

	#navbox {
		width: 100%;
		height: 5rem;
		background-color: #f0c822;
	}

	#navbutton {
		position: absolute;
		z-index: 2;
		right: 0;
	}

	#home-picture {
		height: 25rem;
		overflow: hidden;
		background-image: url("../images/Home-img1.jpg");
		background-repeat: repeat;
		background-position: center;
		position: relative;
		left: -42.5%;
		width: 170%;
		background-size: cover;
		max-width: 65rem;
	}
    
    .white {
		color:white;
    }

	.red {
		color: red;
	}
	
	.italics {
		font-style: italic;
	}

    .center {
		text-align: center;
    }

	.inline {
		display: inline;
	}

	.cp {
		cursor: pointer;
	}
	  
  	.underline {
    	text-decoration: underline;
  	}

	#btn-close-nav {
		width: 4rem;
	}

	.flex-container {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.shadow-box {
		box-shadow: .5rem .5rem .5rem .5rem rgb(168, 167, 167);
		margin-top: 3rem;
		margin-bottom: 3rem;
	}

	.sb-1,
	.sb-3 {
		width: 100%;
		height: 32rem;
		padding: 1rem;
		margin-top: 1rem;
		overflow: hidden;
	}

	.flex-container-x1,
	.flex-container-x2 {
		padding-top: 1rem;
	}

	.sb-1 img,
	.sb-3 img {
		width: 100%;
		position: relative;
		bottom: 2rem;
	}

	.hide-footer-1,
	.hide-footer-2 {
		display: none;
	}

	#logo img,
	.logo img {
		width: 20rem;
	}

	.logo {
		text-align: center;
		padding-top: 4rem;
		padding-bottom: 3rem;
	}

	.home-picture-label-desktop {
		display: none;
	}

	#footerbox {
		bottom: 0;
		width: 100%;
		text-align: center;
		background-color: #454343;
		color: white;
		text-align: left;
		padding: 9rem 4rem;
		line-height: 2;
		font-family: Garamond;
	}

	#team .header {
		margin-top: 3rem;
	}

	#footerbox a {
		color: white;
	}

	.footer-logos img {
		position: relative;
		padding-top: 3rem;
	}

	.hide-element {
		display: none;
	}

	.hide-mobile {
		display: none;
	}

	.hide-tablet {
		display: block;
	}

	.hide-desktop {
		display: block;
	}
}


@media only screen and (min-width: 375px) {
	#home-picture {
		height: 30rem;
		max-width: 75rem;
	}

	#footer .footer-ben img {
		max-width: 80%;
		padding-bottom: 2rem;
	}

	#mobile-collapse-front a {
		padding-bottom: 4rem;
	}

	.sb-1,
	.sb-3 {
		height: 30rem;
	}
}


@media only screen and (min-width: 450px) {
	#home-picture {
		max-width: 85rem;
		left: -39%;
		height: 34rem;
	}

	#footer .footer-ben img {
		max-width: 20rem;
	}

	.sb-1,
	.sb-3 {
		text-align: center;
	}

	.sb-1 img,
	.sb-3 img {
		max-width: 26rem;
	}
}


@media only screen and (min-width: 525px) {
	#home-picture {
		left: -19rem;
		height: 38rem;
	}

	#footer .footer-ben img {
		max-width: 20rem;
		padding-bottom: 0;
		padding-right: 2rem;
	}
}


@media only screen and (min-width: 576px) {
    /* Extra break point for some boostrapping */
    /* Not required in case of Sommereck */
	.hide-tablet {
		display: none;
	}

	.sb-1, .sb-3 {
		height: 38rem;
	}

	.acc-3 {
		width: 100%;
	}

	.datev-logo img {
		width: 30%;
	}

	.footer-logos img {
		right: unset;
		padding-top: 0;
	}
	
	#home-picture {
		height: 38rem;
		left: -17rem;
	}
}


@media only screen and (min-width: 600px) {
	#home-picture {
		max-width: 85rem;
	}
}


@media only screen and (min-width: 680px) {
	#home-picture {
		left: -4rem;
		max-width: 72rem;
	}
}


@media only screen and (min-width: 700px) {
	#home-picture {
		left: -4rem;
		max-width: 80rem;
	}
}


@media only screen and (min-width: 768px) {
    /* For landscape tablets: */
	#home-picture {
		left: -8rem;
		max-width: 107rem;
		height: 44rem;
	}

	.mb-0 .s2,
	.card-body .s3  {
		font-size: 1.6rem;
	}

	

	.flex-container-x1,
	.flex-container-x2 {
		display: flex;
	}

	.flex-container-x1 .text-box,
	.flex-container-x2 .text-box {
		padding-top: 1rem;
	}

	.flex-container-x2 .sb-3 {
		width: 28rem;
	}

	.flex-container-x1 .flex-item {
		width: 45%;
	}

	.navbar-toggle {
		display: block;
		top: 0;
		padding-top: 4rem;
		padding-right: 3rem;
	}

	.footer-2 {
		font-size: 1.8rem;
	}

	.footer-4 {
		margin-left: 0;
	}

	#footerbox {
		padding: 5rem 4rem;
	}

	#spezial-anchor #numbers-video {
		margin-top: 5rem;
		margin-bottom: 8rem;
	}

	.home-picture-label {
		display: block;
		font-size: 3.5rem;
		margin-left: 5rem;
		font-weight: 600;
		line-height: 1.3;
		padding: 20rem 52rem 0 4rem;
		color: wheat;
		position: relative;
		top: 3rem;
	}

	.footer-1 {
		width: 30%;
		align-items: baseline;
		padding-right: 2rem;
	}

	#home-welcome {
		position: relative;
		bottom: 2rem;
		background-color: white;
		margin-left: 6rem;
		margin-right: 6rem;
		padding: 4.5rem 5rem;
	}

	#home-picture-label-mobile {
		display: none;
	}

	.text-box .rubrik,
	.text-box .header {
		margin-bottom: 4.5rem;
	}

	.text-box .header {
		font-size: 3rem;
	}

	.text-box .text,
	ul li {
		font-size: 2rem;
	}

	.footer-2 {
		width: 40%;
	}

	.footer-4 {
		width: 30%;
	}

	#footer .footer-1 img {
		width: 100%;
		object-fit: cover;
	}

	.hide-footer-1 {
		display: flex;
	}

	.navbar-toggle .icon-bar {
		width: 3.5rem;
	}

	.logo {
		text-align: left;
		padding-left: 2rem;
	}

	.sb-1 {
		text-align: center;
	}

	.sb-2, .sb-4 {
		width: 45%;
	}
}


@media only screen and (min-width: 840px) {
	.flex-container-x2 {
		margin-right: 13rem;
	}

	.hide-footer-2 {
		display: block;
		width: 25%;
		margin-right: 2rem;
		overflow: hidden;
	}

	#gmap_canvas {
		height: 30rem;
	}
}


@media only screen and (min-width: 992px) {
    /* For smaller desktops and laptops: */
	#gmap_canvas {
		height: 35rem;
	}

	#mobile-collapse-front ul li a {
		font-size: 1.6rem;
	}

	.footer-2 {
		width: 47%;
	}

	#mobile-collapse-front > .nav,
	#mobile-collapse-front > .home,
	#mobile-collapse-front > .nav > li {
		display: inline-block;
	}

	.nav > li > a {
		padding: 10px 2px;
	}

	#footerbox .footer-1,
	#footerbox .footer-4 {
		flex: 1;
	}

	#footerbox .footer-ben {
		flex: inherit;
	}

	#footerbox .footer-4 img {
		width: 22rem;
	}

	.home-picture-label-desktop {
		hyphens: manual;
	}

	.btn, .s2 {
		font-size: 1.6rem;
	}

	.acc-8 {
		width: 100%;
	}

	.happy-3 {
		max-width: 35rem;
	}

	#main,
	main {
		margin-top: 8rem;
	}

	.sb-1 {
		text-align: right;
	}

	.sb-3 {
		display: flex;
		width: 38%;
	}

	.sb-3 img {
		width: 100%;
		height: auto;
		object-fit: cover;
		padding: 2rem 1rem;
	}

	.flex-container-x2 .sb-1,
	.flex-container-x2 .sb-3 {
		height: 40rem;
	}

	.flex-container-x2 .sb-4 {
		width: 58%;
	}

	.flex-container-x2 {
		margin-right: 22rem;
	}

	.sb-2, .sb-4 {
		width: 29%;
	}

	.home-picture-label {
		padding: 27rem 53rem 0 5rem;
		font-size: 4rem;
	}

	#home-picture {
		height: 54.5rem;
		max-width: 122rem;
	}

	#mobile-collapse-front {
		right: unset;
		display: block;
		position: relative;
		height: 8rem;
	}

	.footer-1 {
		padding-right: 5rem;
		margin-left: 7rem;
	}

	.footer-4 {
		width: 30%;
	}

	.navbar-nav-front {
		font-size: 1.6rem;
		position: relative;
		bottom: 5rem;
	}

	#logo {
		display: none;
	}

	#navbox {
		height: 0;
		background-color: unset;
	}

	#navbar-toggle,
	#navbutton {
		display: none;
	}

	.nav > li > a::before {
		display: block;
		content: attr(title);
		font-weight: bold;
		height: 0;
		overflow: hidden;
		visibility: hidden;
	}

	.nav > li > a.nav-item:hover {
		font-weight: 800;
		background-color: unset;
	}

	.hide-mobile {
		display: block;
	}

	.hide-tablet {
		display: block;
	}

	.hide-desktop {
		display: none;
	}
}


@media only screen and (min-width: 1200px) {
    /* For desktops: */
	html,
	body {
		max-width: 120rem;
		margin: auto;
	}

	#mobile-collapse-front ul li a {
		font-size: 2rem;
	}

	.nav > li > a {
		padding: 10px 4px;
	}

	.sb-1,
	.sb-3 {
		height: auto;
	}

	.flex-container-x2 {
		margin-right: 33rem;
	}

	.honorar > .rubrik,
	.honorar > .header,
	.honorar > .text {
		padding-left: 15rem;
		padding-right: 15rem;
	}

	.card-body > .s3 {
		line-height: 1.7;
	}

	#beratung-anchor > div,
	#mandanten-anchor > div,
	#digital-anchor > div,
	#spezial-anchor > div {
		width: 48%;
	}

	.acc-6 {
		width: 66%;
	}

	.acc-2, .acc-3, .acc-4, .acc-5, .acc-6, .acc-8 {
		margin-left: 4rem;
		margin-top: 9.5rem;
	}

	.acc-8 {
		width: 60%;
	}

	.acc-7, .acc-9 {
		width: 30%;
	}

	.pm {
		right: calc((100vw - 120rem) / 2 + 6rem);
	}

	.s3 {
		font-size: 1.6rem;
	}

	.home-picture-label {
		padding-right: 50rem;
		font-size: 4.5rem;
		top: 0;
		margin-left: 0;
	}

	#home-picture {
		left: -3rem;
	}

	#home-welcome {
		margin-left: 23rem;
		margin-right: 23rem;
	}

	#navbox {
		position: absolute;
		left: 0;
	}

	#footerbox {
		position: relative;
		left: calc((100vw - 120rem) / -2);
		width: 100vw;
	}

	#footer {
		max-width: 120rem;
		margin: auto;
	}

	.navbar-nav-front {
		font-size: 1.7rem;
	}

	#gmap_canvas,
	.gmap_canvas {
		width: 100%;
		height: 100%;
	}

	#footer {
		line-height: 1.5;
	}

	.footer-1 {
		width: 20%;
		padding-right: 2rem;
		margin-left: 0;
	}

	.footer-2 {
		width: 35%;
	}

	.footer-3 {
		display: flex;
		width: 25%;
		padding-right: 3rem;
		margin-right: 0rem;
	}

	.footer-4 {
		width: 15%;
	}

}