@media only screen and (min-width: 320px) {
    /* For mobile phones: */
    @font-face {
		font-family: EBGaramond;
		src: url('../fonts/static/EBGaramond-Regular.ttf');
	}
	
	@font-face {
		font-family: EBGaramond-Bold;
		src: url('../fonts/static/EBGaramond-Bold.ttf');
	}

	@font-face {
		font-family: EBGaramond-Semibold;
		src: url('../fonts/static/EBGaramond-SemiBold.ttf');
	}

    html {
        font-size: 10px;
    }

    body {
        /*background-color: rgb(0,136,193, .1);*/
        background-color:rgb(200, 135, 30, .15);
        /*font-family: 'Poppins', sans-serif;*/
        font-family: EBGaramond;
    }

    article, .row {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    .btop {
        border-top:5px solid #C8871E;
    }

    .hide-mobile,
    .hide {
        display: none;
    }

    .show {
        display: block;
    }

    .white {
        color: white;
    }

    .black {
        color: black;
    }

    .bg-white {
        background-color: white;
    }

    .bg-black {
        background-color: black;
    }

    .bg-blue {
        background-color: #0064A5;
    }

    .blue {
        color: #00325A;
    }

    .rubrik {
        font-size: 1.2rem;
        font-weight: 700;
        padding-bottom: 1rem;
    }

    .head-move .rubrik {
        color: gold;
        font-size: 1.8rem;
    }

    .row > div {
        padding: 2rem;
    }

    h0 {
        font-family: EBGaramond-Semibold;
        color: #00325A;
        font-size: 4rem;
        line-height: 1;
        font-weight: 400;
    }

    h1 {
        font-size: 2.8rem;
        margin-top: 0;
    }

    h2 {
        font-size: 2rem;
    }

    .s1 {
        font-size: 1.4rem;
    }

    .navbar {
        position: fixed;
        width: 100%;
        z-index: 1;
    }

    .container-fluid {
        padding: .5rem 0;
    }

    .navbar-brand {
        float: left;
    }

    .navbar-header {
        width: 100%;
    }

    .navbar-header button {
        float: right;
        padding: .8rem .8rem .4rem .8rem;
        position: relative;
        margin-right: 1rem;
        z-index: 3;
        border: 0;
    }
    
    .navbar .icon-bar {
        display: block;
        width: 22px;
        height: 2px;
        margin-bottom: .4rem;
        background-color: black;
        border-radius: 1px;
    }

    #myNavbar {
        background-color: rgb(0,136,193);
        position: relative;
        top: -3.5rem;
    }

    #myNavbar ul li {
        margin: auto;
        text-align: center;
    }

    #myNavbar ul li a {
        color: white;
        float: right;
        font-size: 1.8rem;
        padding: 1rem;
    }

    .head .s1 {
        padding: 0 2rem 4rem 2rem;
    }

    .module-header header {
        position: relative;
        top: -12rem;
        color: white;
        text-align: center;
    }

    .module-header {
        padding-top: 5rem;
    }

    .module-img-wrap {
        height: 18rem;
        overflow: hidden;
        background-color: rgb(0,0,0,0.5);
    }

    .module-img-wrap img {
        position: relative;
        z-index: -1;
    }

    #head-pflaster {
        top: -5rem;
    }

    .compare img {
        width: 100%;
    }

    .module-header header h1 {
        font-size: 6rem;
    }

    .col-md-12 img {
        width: 100%;
    }

    .col-md-3 img {
        width: 100%;
    }

    .row > .col-md-3 {
        padding: 4rem 3rem;
    }

    .row > .kontakt-col {
        padding: 4rem 0 4rem 3rem;
    }

    .row > .kontakt-col .s1 {
        font-size: 1.6rem;
    }

    .row > .cleft {
        padding-bottom: 0;
    }

    .row > .cright {
        padding-top: 0;
    }

    .shrinker {
        height: 0;
    }

    #head-img {
        width: 110%;
        position: relative;
        top: -10rem;
        left: -3rem;
        z-index: -1;
    }

    .header-img {
        width: 100%;
    }

    .head-move {
        position: relative;
        top: -15rem;
        padding: 2rem;
        height: 0;
    }

    #teaser-video {
        width: 100%;
        position: relative;
        z-index: -1;
    }

    .head-img-wrap {
        height: 18rem;
        overflow: hidden;
        background-color: rgb(0,0,0,0.2);
    }

    .intro-logo-wrap {
        text-align: center;
    }

    #intro-logo {
        width: 20rem;
        padding-bottom: 2rem;
    }

    .counter {
        text-align: center;
        font-size: 1.4rem;
        color: white;
    }

    .preview img,
    .modal-content-1 img,
    .modal-content-2 img,
    .modal-content-3 img,
    .modal-content-4 img,
    .modal-content-5 img,
    .modal-content-6 img {
        width: 100%;
    }

    .modal {
        display: none;
        position: fixed;
        z-index: 1;
        padding-top: 100px;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: black;
      }

      .modal-nav {
          text-align: center;
          height: 4rem;
      }

      .modal-nav a {
          margin: 1rem 1rem 0 1rem;
          font-size: 2rem;
      }
      
      /* Modal Content */
      .modal-content-1,
      .modal-content-2,
      .modal-content-3,
      .modal-content-4,
      .modal-content-5,
      .modal-content-6 {
        position: relative;
        background-color: #fefefe;
        margin: auto;
        padding: 0;
        width: 90%;
        max-width: 1200px;
      }

      .modal-content-1 img,
      .modal-content-2 img,
      .modal-content-3 img,
      .modal-content-4 img,
      .modal-content-5 img,
      .modal-content-6 img {
          margin-bottom: 1rem;
      }
      
      /* The Close Button */
      .close {
        color: white;
        position: absolute;
        top: 10px;
        right: 25px;
        font-size: 35px;
        font-weight: bold;
      }

    .footer {
        width: 100%;
        margin: auto;
        text-align: center;
        padding: 1rem;
        font-size: 1.8rem;
        font-weight: 700;
    }

    .link {
        padding-bottom: 1rem;
    }

    .head-impressum,
    .head-dsgvo {
        padding: 6rem 2rem 3rem 2rem;
    }

    .imph1 h1 {
        padding: 3rem 2rem 0 2rem;
        margin-bottom: 0;
    }

    .mapouter{
        position:relative;
    }

    .gmap_canvas {
        overflow:hidden;
        background:none!important;
    }

}


@media only screen and (min-width: 576px) {
    /* Extra break point for some boostrapping */
    .head-img-wrap {
        height: 30rem;
    }

    .head-move {
        top: -18rem;
        padding: 0;
        width: 85%;
        margin: auto;
    }

    #head-img {
        top: -18rem;
        left: -5rem;
    }

    .head .s1 {
        padding: 3rem 0 5rem 0;
        width: 85%;
        margin: auto;
    }

    #intro-logo {
        text-align: unset;
        float: right;
        padding-bottom: 0;
    }

    .module-img-wrap {
        height: 25rem;
    }

    .module-header header {
        top: -16rem
    }

    article .row {
        padding-bottom: 3rem;
    }

    .row > div {
        padding: 4rem 0 1rem 0;
        width: 85%;
        margin: auto;
    }

    #gmap_canvas {
        width: 100%;
        height: 28rem;
    }

    .mapouter {
        padding-top: .4rem;
    }

    .head-impressum,
    .head-dsgvo,
    .imph1 h1 {
        padding-left: 4rem;
    }
}



@media only screen and (min-width: 768px) {
    /* For landscape tablets: */
    .hide-mobile {
        display: block;
    }

    .head-move .rubrik {
        font-size: 2.2rem;
    }

    .s1 {
        font-size: 1.6rem;
    }

    h2 {
        font-size: 2.6rem;
    }

    .navbar-brand {
        z-index: 1;
        position: relative;
    }

    .navbar-brand img {
        margin-left: 5rem;
        width: 16rem;
    }

    #intro-logo {
        width: 35rem;
    }

    .flex-container {
        display: flex;
        flex-direction: row;
        float: right;
        padding-right: 4rem;
    }

    .module-img-wrap {
        height: 25rem;
        margin-bottom: 2rem;
    }

    .module-header header {
        top: -20rem
    }

    #myNavbar ul li {
        margin: unset;
        padding-left: 2rem;
    }

    .row > div {
        padding-left: 6rem;
        padding-right: 4rem;
    }

    .row > .cleft {
        padding-bottom: 2rem;
        padding-right: 0;
    }

    .cutleft {
        overflow: hidden;
        height: 31.2rem;
    }

    .cutright {
        overflow: hidden;
        height: 31.2rem;
    }

    .cutleft img {
        position: relative;
        top: -32%;
    }

    .cutright img {
        position: relative;
        top: 0;
    }

    .row > .cright {
        padding-top: 3rem;
        padding-left: 0;
    }

    .row > #cr {
        padding-top: 3rem;
    }

    .collapse:not(.show) {
        display: block;
    }

    .navbar-toggle {
        display: none;
    }

    #myNavbar {
        background-color: transparent;
        position: relative;
        top: -12rem;
        font-size: 1.8rem;
    }

    #myNavbar ul li a {
        font-size: 2.4rem;
    }

    .head-move {
        top: -22rem;
    }

    .head-img-wrap {
        height: 40rem;
    }

    .rubrik {
        font-size: 1.4rem;
    }

    h0 {
        font-size: 6rem;
    }

    .head .s1 {
        padding-top: 2rem;
        background-color: white;
        position: relative;
        top: -5rem;
        padding: 4rem 8rem;
    }

    .bg-white {
        width: unset;
        margin: 0 6rem;
    }

    .row > div {
        padding-left: 6rem;
        padding-right: 6rem;        
    }

    .row .right {
        padding-left: 2rem;
    }

    .bg-white .row > div {
        padding-left: 4rem;
        padding-right: 2rem;
    }

    #kontakt {
        padding-bottom: 3rem;
    }

    .footer {
        width: 100%;
        margin: unset;
        padding: 3rem 0;
        font-size: 2.4rem;
    }


    .head-impressum,
    .head-dsgvo {
        padding-top: 20rem;
        padding-left: 8rem;
    }

    .imph1 h1 {
        padding-left: 8rem;
    }

    .head-impressum > .s1,
    .head-dsgvo > .s1 {
        padding-left: 4rem;
        padding-right: 8rem;
    }

    #gmap_canvas {
        width: 100%;
        height: 33.3rem;
    }

    .col-md-3 img {
        width: 25rem;
    }

    .row > .col-md-3 {
        width: 50%;
        max-width: 50%;
        flex: 0 0 50%;
        padding: 2rem 2rem;
    }

    #kontakt .row {
        padding: 0 3rem;
    }

}


@media only screen and (min-width: 992px) {
    .head-img-wrap {
        height: 50rem;
    }

    #head-img {
        top: -32rem;
        left: -8rem;
    }

    .head-move {
        width: 75%;
    }

    .head .s1 {
        width: 75%;
    }

    .bg-white {
        width: 75%;
        margin: auto;
    }

    .module .row {
        width: 75%;
        margin: auto;
    }

    #head-pflaster {
        top: -25rem;
    }

    #head-fassade {
        top: -25rem;
    }

    .module-img-wrap {
        height: 35rem;
    }

    .module-header header {
        top: -22rem
    }

    .module-header {
        padding-top: 10rem;
    }

    .bg-white .row {
        width: 100%;
        margin: auto;
    }

    .cutleft {
        height: 30.2rem;
    }

    .cutleft img {
        top: -12rem;
    }

    .row .right {
        padding-right: 2rem;
    }

    .footer {
        width: 100%;
    }

    .head-impressum,
    .imph1 h1 {
        padding-left: 16rem;
    }

    .head-dsgvo {
        padding-left: 0;
    }

    .head-dsgvo > .s1 {
        padding-left: 6rem;
        padding-right: 6rem;
        width: 85%;
        margin: auto;
    }
}


@media only screen and (min-width: 1200px) {
    /* For desktops: */
    .navbar .container-fluid {
        width: 86%;
    }

    .head-move .rubrik {
      font-size: 2.8rem;
    }

    .rubrik {
        font-size: 2rem;
    }

    #myNavbar .flex-container {
        padding-right: 6rem;
    }

    .head-img-wrap {
        height: 68rem;
    }

    #intro-logo {
        padding-bottom: 2rem;
        position: relative;
        top: -2rem;
        right: -2rem;
    }

    .row > .cright {
        padding-left: 0;
    }

    .row > .cleft {
        padding-right: 0;
    }

    .cutleft {
        height: 37.8rem;
    }

    .cutleft img {
        top: -14rem;
    }

    .module-header {
        padding-top: 15rem;
    }

    #kontakt-logo {
        width: 32rem;
    }

    .row > .kontakt-col .s1 {
        font-size: 1.7rem;
    }

    #head-img {
        top: -80%;
    }

    .head-move {
        top: -40rem;
    }

    h0 {
        font-size: 8rem;
    }

    .rubrik {
        font-size: 1.6rem;
    }
    
    .head .s1 {
        top: -12rem;
    }

    .s1 {
        font-size: 2.4rem;
        line-height: 1.3;
    }

    .main-sub {
        padding-bottom: 5rem;
    }

    .head-move {
        max-width: 90rem;
    }

    .head .s1 {
        max-width: 90rem;
    }

    .bg-white {
        max-width: 108rem;
    }

    .module .row {
        max-width: 108em;
    }

    .head-dsgvo > .s1 {
        max-width: 90rem;
    }

    .row > div {
        max-width: 90rem;
    }

    .navbar > .container-fluid {
        max-width: 100rem;
    }

    .module-row {
        margin-bottom: 8rem;
    }

    .modal-content-1,
    .modal-content-2,
    .modal-content-3,
    .modal-content-4,
    .modal-content-5,
    .modal-content-6 {
        width: 50%;
        height: 60rem;
        text-align: center;
        background-color: black;
    }

    .modal-content-1 img,
    .modal-content-2 img,
    .modal-content-3 img,
    .modal-content-4 img,
    .modal-content-5 img,
    .modal-content-6 img {
        height: 95%;
        width: auto;
    }

    .footer {
        max-width: 100%;
    }

    #kontakt > .row {
        width: 95%;
        max-width: 120rem;
    }

    .head-impressum,
    .imph1 h1 {
        max-width: 113rem;
        margin: auto;
    }

    .row > .col-md-3 {
        width: 25%;
        max-width: 25%;
        flex: 0 0 25%;
        padding: 2rem 2rem;
    }

    .mapouter {
        width: 25rem;
    }

    .row > .col-logo {
        padding-left: 0;
    }
}

@media only screen and (min-width: 1400px) {
    /* For large desktops: */
    .head-move {
        top: -37rem;
    }

    #kontakt > .row {
        max-width: 140rem;
    }

    #head-img {
        left: -10%;
    }

    #head-dach {
        top: -16rem;
    }
}