body, html {

    margin: 0;
    font-family: auto;
    overflow-x: hidden;
}


/**********************************************************************/
/**** Opener *****/

.bg-img {
    background-image: url("rebrush-2023-images/rebrush-img-21.webp");
    min-height: 850px;

    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}


.bg-img.contact {
    margin: 0;
    background-image: url("rebrush-2023-images/rebrush-img-23.webp");
    min-height: 850px;

    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}


.centered {

    position: absolute;
    top: 50%;
    left: 26.5%;
    width: 30%;
    -webkit-transform: translate3d(-50%, -50%, 0);
    -ms-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    color: white;
    font-size: 45px;

}

@media (max-width: 960px) {
    .bg-img {
        /* The image used */
        background-image: url("rebrush-2023-images/rebrush-img-21.webp");
        min-height: 700px;

        /* Center and scale the image nicely */
        background-position: 40%;
        background-repeat: no-repeat;
        background-size: 300%;
        position: relative;

    }


    .centered {
        position: absolute;
        top: 50%;
        left: 30%;
        -webkit-transform: translate3d(-50%, -50%, 0);
        -ms-transform: translate3d(-50%, -50%, 0);
        transform: translate3d(-50%, -50%, 0);
        color: white;
        font-size: 20px;
        text-align: left;

    }

    .bg-img.contact {
        background-image: url("rebrush-2023-images/rebrush-img-23.webp");
        min-height: 700px;

        /* Center and scale the image nicely */
        background-position: 40%;
        background-repeat: no-repeat;
        background-size: 300%;
        position: relative;
    }

}

/**** End Opener *****/
/**********************************************************************/
/**** Navbar *****/
nav.navbar {
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
}

.navbar {
    backdrop-filter: none;
    border: none !important;
    margin-bottom: 0;

    font-size: 30px !important;
    letter-spacing: 4px;
    opacity: 1; /* start opacity for scroll effect */
    padding: 0 0 5px 0;
}


/*  color  navbar links */
.navbar li a, .navbar .navbar-brand {
    color: white !important;
    padding-right: 65px;
    padding-top: 20px;
    padding-bottom: 20px;
    font-size: 22px;
    /* font-family: inherit; OPTIONAL */
    font-family: auto;
}

.navbar-nav {
    /* Padding der Menu Points */
    padding: 17px 0 8px 0;
}

.navbar-nav li a {
    transition: 0.3s ease-in-out;
    font-size: 20px;
    font-weight: 300;
    font-family: "Roboto Light", sans-serif;
    padding: 0 0 5px 0;
    line-height: normal;
    letter-spacing: 1px;
}


/* hover - white links */
.navbar-nav li a:hover {
    transition: 0.3s ease-in-out;
    color: #6c6c6c !important;
}

/* Remove border color button */
.navbar-default .navbar-toggle {
    border-color: transparent;
}

#section2 {
    padding-top: 100px;
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
    background-color: transparent !important;
}

/**** End Navbar *****/
/**********************************************************************/
/* Anfang mobile Navbar  */

@media (max-width: 1200px) {
    .navbar {
        background-color: rgba(22, 22, 23, 0.8);
        backdrop-filter: blur(3px);
    }

    .navbar-header {
        float: none;
    }

    .navbar-left, .navbar-right {
        float: none !important;
    }

    .navbar-toggle {
        display: block;
    }

    .navbar-collapse {
        border-top: 0px solid transparent;
        -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }

    .navbar-fixed-top {
        top: 0;
        border-width: 0px;
        color: #222;
    }

    .navbar-collapse.collapse {
        display: none !important;
    }

    .navbar-nav {
        float: none !important;
        margin-top: 7.5px;
    }

    .navbar-nav > li {
        float: none;
    }

    .navbar-nav > li > a {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .collapse.in {
        display: block !important;
    }
}

/* End mobile Navbar  */
/**********************************************************************/
/* Meine Designs  */

.designs {
    margin: 0 0 160px 0;
}

@media screen and (max-width: 800px) {
    .designs {
        margin: 0 0 80px 0;
    }
}


.designs p {
    margin: 40px 0 40px 0;
    font-size: 20px;
    font-weight: 300;
    font-family: "Roboto Light", sans-serif;
}


.designs .row {
    padding: 0 15px 0 15px;
}


.header {
    text-align: center;
    padding: 32px;
}

.row {
    display: -ms-flexbox; /* IE10 */
    display: -webkit-box;
    display: flex;
    -ms-flex-wrap: wrap; /* IE10 */
    flex-wrap: wrap;
    padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.column {
    -ms-flex: 25%; /* IE10 */
    -webkit-box-flex: 25%;
    flex: 25%;
    max-width: 25%;
    padding: 0 4px;
}

.column img {
    margin-top: 8px;
    vertical-align: middle;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
    .column {
        -ms-flex: 50%;
        -webkit-box-flex: 50%;
        flex: 50%;
        max-width: 50%;
    }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
    .column {
        -ms-flex: 100%;
        -webkit-box-flex: 100%;
        flex: 100%;
        max-width: 100%;
    }
}

/* End meine Designs  */
/**********************************************************************/
/* Content Fade in */

#fade {
    animation: fadein 5s;
    -moz-animation: fadein 5s; /* Firefox */
    -webkit-animation: fadein 5s; /* Safari and Chrome */
    -o-animation: fadein 5s; /* Opera */
}

@keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@-moz-keyframes fadein { /* Safari and Chrome */
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@-o-keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* End Fade-in  */
/**********************************************************************/
/* Adress Fade in */


.adress_information {
    font-family: auto;
    font-size: 22px;
    color: white;
}

/**********************************************************************/
/* adress background pixeled */

.link_hover {
    color: black;
}

.link_hover:hover {
    color: grey;
}

.link_hover:visited {
    color: grey;
}


/* Position text in the middle of the page/image */
.bg-text {
    /* Black w/opacity/see-through */
    font-weight: bold;
    border: 3px solid #f1f1f1;
    display: block;
    margin-left: auto;
    margin-right: auto;
    top: 50%;
    left: 50%;

    z-index: 2;
    width: 100%;
    padding: 20px;
    text-align: center;
}

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

    .bg-text {
        /* Black w/opacity/see-through */
        font-weight: bold;
        border: none;
        display: block;
        margin-left: auto;
        margin-right: auto;
        top: 50%;
        left: 50%;

        z-index: 2;
        width: 100%;
        padding: 20px;
        text-align: center;
    }
}

/* End background pixeled */
/**********************************************************************/
/* Mein Design Cut Out */


.image-container h2 {
    margin: 0 0 20px 0;
    font-size: 40px;
    font-family: "Libre Franklin", sans-serif;
    font-weight: 300;

}


/*
.text {
  color: black;
  font-size: 90px;
  font-weight: bold;
  padding: 10px;
  width: 50%;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate3d(-50%, -50%,0);
      -ms-transform: translate3d(-50%, -50%,0);
          transform: translate3d(-50%, -50%,0);
}

*/


@media (max-width: 1024px) {
    .text {
        font-size: 35px !important;
        width: 80%;
    }
}

/* Ende Mein Design Cut Out */
/**********************************************************************/
/* Anfang Polaroid */


div.polaroid {
    width: 100%;
    padding: 5px;
    background-color: white;
    -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    margin-bottom: 40px;
    margin-right: 0px !important;
    transition: 0.7s ease-in-out;
    transform: translateY(140px);
    opacity: 0;
}


div.polaroid.slide {
    transition: 0.7s ease-in-out;
    transform: translateY(0px);
    opacity: 1;
}


div.container {
    margin: auto;
}

div.row {
    padding: 20px;
}


.designs .polaroid img {
    height: 50vh;
    object-fit: cover;
}


.designs .hvrbox-layer_top {
    top: 0;
}


.designs .col-lg-6 {
    padding: 0;
}


.designs .polaroid .hvrbox {
    display: block;
}


.polaroid.slideanim.more {
    margin: 0;
}


.hvrbox a {
    cursor: pointer;

}

/* Ende Polaroid */
/**********************************************************************/
/* Anfang Parallax*/


.parallax {
    /* The image used */
    background-image: url("rebrush-2023-images/rebrush-img-22.webp");

    /* Set a specific height */
    height: 300px;
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
}


.parallax.gallery {
    margin: 160px 0 0 0;
    background-image: url("rebrush-2023-images/rebrush-header.webp");
}


@media screen and (max-width: 1024px) {
    .parallax {


        /* Set a specific height */
        height: 350px;


        /* Create the parallax scrolling effect */
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 70%;
    }

    .parallax.gallery {
        margin: 80px 0 0 0;
    }
}

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


    @supports (-webkit-overflow-scrolling: touch) {
        .parallax {


            height: 0px;
            background-attachment: none;
            background-image: none;
            width: 100%;
            background-size: cover;
        }
    }
}

/*****************************************************************************************************/
/* Footer */

.footer-style {
    padding-top: 100px;
    padding-bottom: 30px;
    background-color: white;
    color: #222;
}

.a-footer {
    padding: 30px;
    color: black;
    font-size: 14px;
}

.t-style {
    font-size: 12px;
}

@media screen and (max-width: 800px) {
    .footer-style {
        padding-top: 60px;
        padding-bottom: 30px;
        background-color: white;
        color: #222;
        border: 3px solid #f1f1f1;
    }

    .a-footer {
        padding: 10px;
        color: black;
        font-size: 14px;
    }

    .t-style {
        padding-top: 60px;
    }
}


/*rebrush 2023*/
.centered h1 {
    font-weight: 300;
    font-family: 'Libre Franklin', sans-serif;
    width: 70%;
}


@media (max-width: 960px) {
    .centered h1 {
        margin: 0 0 20px 0;
        font-size: 20px;
    }


}

.centered {
    top: 65%;
    left: 35.5%;
    width: 50%;
}


@media (max-width: 960px) {
    .centered {
        left: 30%;
    }


}

.centered h1 {
    font-family: "Libre Franklin", sans-serif;
    font-size: 50px;
}


.centered a {
    padding: 5px 30px 5px 30px;
    transition: 0.3s ease-in-out;
    color: #ffffff;
    border: 1px solid #ffffff;
    text-decoration: none;
    font-size: 20px;
    font-weight: 300;
    font-family: "Roboto Light", sans-serif;
}


.centered a:hover {
    transition: 0.3s ease-in-out;
    color: #000000;
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(3px);
    font-size: 20px;
    padding: 5px 30px 5px 30px;
    border: 1px solid rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-weight: 300;
    font-family: "Roboto Light", sans-serif;
}

/*navbar*/

.navbar {
    background-color: transparent;
}

@media (max-width: 1024px) {
    .navbar {
        background-color: rgba(22, 22, 23, 0.8);
        backdrop-filter: blur(3px);
    }
}


.navbar .container-fluid {
    transition: 0.3s;
    padding: 0 50px 0 50px;
}

@media (max-width: 1024px) {
    .navbar .container-fluid {
        padding: 0 30px 0 30px;
    }
}


img.logo {
    width: 150px;
    padding: 5px 0 0 0;
}


@media (max-width: 1024px) {
    img.logo {
        width: 140px
    }

}


.navbar-nav {
    /* Padding der Menu Points */
    display: flex;
    flex-direction: row;
    gap: 50px;
}


@media (max-width: 1024px) {
    .navbar-nav {
        /* Padding der Menu Points */
        display: flex;
        flex-direction: column;
        gap: 0;
    }

}


.navbar-nav li a {
    transition: 0.3s ease-in-out;
    font-size: 20px;
    font-weight: 300;
    font-family: "Roboto Light", sans-serif;
    padding: 0 0 5px 0;
}


.intro-text {
    margin: 160px 0 160px 0;
}


@media (max-width: 1024px) {
    .intro-text {
        margin: 80px 0 80px 0;
    }
}

.intro-text p {
    font-size: 20px;
    font-weight: 300;
    font-family: "Roboto Light", sans-serif;
}


.intro-text h2 {
    margin: 0 0 40px 0;
    font-size: 40px;
    font-weight: 300;
    font-family: 'Libre Franklin', sans-serif;
}


/*design*/


/*
.designs{
    height: 100vh;
}

@media (max-width: 1024px) {
    .designs{
        height: auto;
    }
}

*/


/*Slide*/


.image-container .text {
    font-family: "Libre Franklin", sans-serif;
    font-weight: 300;
}


.image-container a:hover {
    text-decoration: none;
}

.image-container.text:hover {
    text-decoration: none;
}

/*outro text*/

.outro-text {
    margin: 160px 0 160px 0;
}


@media (max-width: 1024px) {
    .outro-text {
        margin: 80px 0 80px 0;
    }
}


.outro-text .row {
    padding: 0;
    margin: 0 0 80px 0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 20px;
}


.outro-text .row:before {
    display: none !important;
}


.outro-text .row:after {
    display: none !important;
}


@media (max-width: 1024px) {
    .outro-text .row {
        margin: 0;
        flex-direction: column;
        flex-wrap: nowrap;
    }
}


.outro-text .row .col {
    width: 50%;
}

@media (max-width: 1024px) {
    .outro-text .row .col {
        width: 100%;
    }
}


.outro-text p {
    font-family: "Roboto Light", sans-serif;
    font-weight: 300;
    font-size: 20px;
}

/*partner*/
.partner {
    margin: 0 0 160px 0;
}


@media (max-width: 1024px) {
    .partner {
        margin: 0 0 80px 0;
    }
}


.partner .row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}


@media (max-width: 1024px) {
    .partner .row {
        gap: 40px;
        flex-direction: column;
        flex-wrap: wrap;
    }
}


.partner .row .col {
    width: 25%;
    display: flex;
    justify-content: center;
}

@media (max-width: 1024px) {
    .partner .row .col {
        width: 100%;

    }
}


.partner .row .col a {
    display: flex;
    align-items: center;
    flex-direction: row;
}


.partner .row .col img {
    width: 200px;
    height: auto;
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}


@media (max-width: 1024px) {
    .partner .row .col img {
        width: 140px;
    }
}


.partner .row:before {
    display: none !important;
}


.partner .row:after {
    display: none !important;
}

.partner h2 {
    margin: 0 0 40px 0;
    font-size: 40px;
    font-weight: 300;
    font-family: 'Libre Franklin', sans-serif;
}

/*polaroids*/
.col-lg-6 p {
    margin: 0;
    padding: 10px;
    color: #000000;
    font-family: "Roboto Light", sans-serif;
    font-weight: 300;
    font-size: 20px;
}


.col-lg-6 a {
    margin: 0;
    padding: 10px;
    text-decoration: none !important;
    color: #ffffff;
    transition: 0.3s ease-in-out;
    font-family: "Roboto Light", sans-serif;
    font-weight: 300;
    font-size: 20px;
}


.col-lg-6 a:hover {
    opacity: 0.3;
    text-decoration: none;
    transition: 0.3s ease-in-out;
    font-family: "Roboto Light", sans-serif;
    font-weight: 300;
    font-size: 20px;
}

@media (max-width: 1024px) {
    .col-lg-6 {
        width: 100%;
    }
}


/*contact*/

.contact {
    margin: 80px 0 80px 0;
    font-family: "Roboto Light", sans-serif;
    font-weight: 300;
    font-size: 20px;
}

@media (max-width: 1024px) {
    .contact {
        margin: 0;
    }
}


.contact h2 {
    margin: 0 0 40px 0;
    font-size: 40px;
    font-weight: 300;
    font-family: 'Libre Franklin', sans-serif;
}


.bg-text {
    padding: 0;
    display: flex;
    flex-direction: column;
    row-gap: 40px;
}

.contact .bg-text .row {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
}

.contact .row:before {
    display: none !important;
}


.contact .row:after {
    display: none !important;
}


@media (max-width: 1024px) {
    .contact .bg-text .row {
        flex-direction: column;
        row-gap: 20px;
    }
}

.contact .bg-text .row .col {
    width: 50%;
}

@media (max-width: 1024px) {
    .contact .bg-text .row .col {
        width: 100%;
    }
}


.contact .bg-text {
    border: none;
}

.contact .bg-text .row .col h2, h3 {
    margin: 0;
}

.contact .bg-text .row .col h2, h3, p {
    text-align: left;
}

.contact .bg-text .row p {
    color: #000000;
    font-family: "Roboto Light", sans-serif;
    font-weight: 300;
    font-size: 20px;
    line-height: 20px;
}


/*footer*/


.footer {
    text-align: center;
    margin: auto;
}


@media (max-width: 1024px) {
    .footer {

        text-align: left;
    }
}


footer {
    margin: 160px 0 0 0;
    background-color: rgba(22, 22, 23, 0.8);
    backdrop-filter: blur(3px);
}


@media (max-width: 1024px) {
    footer {
        margin: 80px 0 0 0;
        padding: 20px 0 20px 0;
    }
}


footer .container {
    display: flex;
    flex-direction: column;
    row-gap: 20px;
}


@media (max-width: 1024px) {

    footer .container {
        display: flex;
        flex-direction: column;
        row-gap: 40px;
    }
}


footer .a-footer {
    padding: 0;
    transition: 0.3s ease-in-out;
    color: #ffffff;
    font-size: 20px;
    font-family: "Roboto Light", sans-serif;
    font-weight: 300;
    letter-spacing: 1px;
}


footer .a-footer:hover {
    transition: 0.3s ease-in-out;
    color: #939393;
    text-decoration: none;
}


footer .footer {
    margin: 0;
    display: flex;
    gap: 20px;
    width: 100%;
    justify-content: flex-end;
}

@media (max-width: 1024px) {
    footer .footer {
        justify-content: flex-start;
        display: flex;
        flex-direction: column;
    }
}


.footer-image-wrapper img {
    width: 160px;
}


footer .row {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

@media (max-width: 1024px) {
    footer .row {
        row-gap: 20px;
        flex-direction: column;
    }
}


footer .col.social {
    display: flex;
    flex-direction: row;
    gap: 20px;
}


.col.social i {
    color: white;
    font-size: 40px;
    width: 20px;
    height: 20px;
}

footer .row:before {
    display: none !important;
}


footer .row:after {
    display: none !important;
}


footer .row.social {
    gap: 20px;
    justify-content: flex-end;
}


@media (max-width: 1024px) {

    footer .row.social {
        gap: 20px;
        justify-content: flex-start;
    }
}


@media (max-width: 1024px) {
    footer .row .col {
        width: 100%;
    }
}

.fa-brands {
    color: white;
    font-size: 40px;
}


div.polaroid {
    width: 100%;
    padding: 5px;
    background-color: white;
    -webkit-box-shadow: none;
    box-shadow: none;
    margin-bottom: 40px;
    margin-right: 0px !important;
}


.contact .link_hover:hover {
    text-decoration: none;
    transition: 0.3s ease-in-out;
    color: #939393;
}


.bg-img.galerie {
    background-image: url("rebrush-2023-images/rebrush-img-18.webp");
    min-height: 850px;

    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;

}


.bg-img.galerie.data {
    background-image: url("rebrush-2023-images/rebrush-header.webp");
}


.bg-img.galerie.imprint {
    background-image: url("rebrush-2023-images/rebrush-header.webp");

}


@media (max-width: 960px) {
    .bg-img.galerie.imprint {
        background-position-x: -540px;
    }

    .bg-img.galerie.data {
        background-position-x: -540px;
    }

}


@media (max-width: 960px) {
    .bg-img.galerie {
        min-height: 700px;

        /* Center and scale the image nicely */
        background-position: 20%;
        background-repeat: no-repeat;
        background-size: 300%;
        position: relative;
    }
}


.more-button {
    padding: 5px 30px 5px 30px;
    transition: 0.3s ease-in-out;
    color: #000000;
    border: 1px solid #000000;
    text-decoration: none;
    font-size: 20px;
    font-weight: 300;
    font-family: "Roboto Light", sans-serif;
}


@media (max-width: 1024px) {
    .more-button {
        width: fit-content;
    }
}

.more-button:visited {
    color: #000000;
    text-decoration: none;
}


.more-button:hover {
    padding: 5px 30px 5px 30px;
    transition: 0.3s ease-in-out;
    background-color: rgba(22, 22, 23, 0.8);
    backdrop-filter: blur(3px);
    color: #ffffff;
    border: 1px solid rgba(22, 22, 23, 0.8);
    text-decoration: none;
}


.headline {
    margin: 0 0 40px 0;
    font-size: 40px;
    font-weight: 300;
    font-family: 'Libre Franklin', sans-serif;
}


.container.security {
    margin-top: 40px;
    font-size: 20px;
    font-weight: 300;
    font-family: "Roboto Light", sans-serif;
}


@media (max-width: 1024px) {
    .container.security {
        margin: 40px 0 40px 0;
        display: flex;
        flex-direction: column;
    }
}


.intro-text.contact-side .row {
    display: flex;
    gap: 20px;
    flex-direction: row;
    flex-wrap: nowrap;
}


@media (max-width: 1024px) {
    .intro-text.contact-side .row {
        flex-direction: column;
        flex-wrap: nowrap;
        row-gap: 40px;
    }
}

.intro-text.contact-side .row .col {
    width: 50%;
    height: fit-content;

}


@media (max-width: 1024px) {
    .intro-text.contact-side .row .col {
        width: 100%;

    }
}


.intro-text.contact-side .row .col img {
    width: 100%;
    margin: auto;
    height: 370px;
    object-fit: contain;
    filter: grayscale(1);
}

@media (max-width: 1024px) {
    .intro-text.contact-side .row .col img {
        height: auto;
    }
}


.intro-text.contact-side .row .col a.link_hover:hover {
    text-decoration: none;
}

.fa-square-facebook:before {
    display: block;
    height: 20px;
    width: 20px;

}