@import url('https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;400&family=Roboto+Mono:wght@100;300&display=swap');


/**************************************************************/
/*General*/
/**************************************************************/
body {
font-family: 'Montserrat', sans-serif;
}

.content-section {
    padding: 150px 20px;
}

@media screen and (max-width:992px) {
.content-section {
    padding: 80px 20px;
}

}

a {
    text-decoration: none;
}

iframe {
    border: 0;
    width: 100%;
    height: 350px;
    filter: grayscale(1);
}

p {
        font-size: 16px;
    letter-spacing: 1.3px;
    line-height: 1.6em;
    font-weight: 500;
}
#header h1 {
    font-size: 40px;
}
#header p {
    font-size: 20px;
}

@media screen and (max-width:992px) {
    #header h1 {
        font-size: 52px;
    }
}

body {
    background: url(../luxdach-media/BG-Lux-Dach.png);
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
}
/**************************************************************/
/*Seperator*/
/**************************************************************/

.separator {
    text-align: center;
    position: relative;
    height: 750px;
    background-size: cover !important;
}

@media screen and (max-width:992px) {
.separator {
    text-align: center;
    position: relative;
    height: 350px;
    background-size: cover !important;
}

}

#flachDach .separator {
    background: url(../luxdach-media/Lux-Dach-Flachdach/Luxdach-Flachdach-header.jpg);
}

#steilDach .separator {
    background: url(../luxdach-media/Lux-Dach-Steildach/Luxdach-Steildach-header.jpg);
}

#bauSpenglerei .separator {
    background: url(../luxdach-media/Lux-Dach-Bauspenglerei/Luxdach-Bauspenglerei-header.jpg);
}

#reperaturDienste .separator {
    background: url(../luxdach-media/Lux-Dach-Reparaturdienste/Luxdach-Reparaturdienste-header.jpg);
}


.separator h2 {
    color: white;
    font-size: 35px;
    text-transform: uppercase;
    width: 70%;
    margin-bottom: 0;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}

.separator h2 span {
    display: block;
    font-size: 20px;
}

.blockSeperator {
    height: 25vh;
    background: url(../luxdach-media/Lux-Dach-Separator.jpg) center;
}

.blockSeperator h2 {
    font-size: 48px;
    color: white;
}

.borderLine {
    width: 100%;
    height: 2px;
    background: #173986;
    border-radius: 50%;
    margin: 20px 5px;
}


/**************************************************************/
/*Navigation*/
/**************************************************************/
#mainNav a {
    color: white !important;
}

.navbar {
    margin-top: 5vh;
}

.navbar img {
    width: 350px;
    transition: 0.3s;
}

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

    .navbar {
        margin-top: 0vh;
        background: #173986;
    }

    .navbar img {
        width: 150px;
    }

    :not(:last-child).nav-item {
        border-bottom: solid 0.5px rgba(255, 255, 255, 0.2);
        padding: 5px 0;
    }
}

.navbar-shrink img {
    width: 150px;
    transition: 0.3s;
}

.navbar-shrink {
    margin-top: 0vh !important;
    background: rgba(23, 57, 134, 0.9);
    transition: 0.6s;
}

.navbar-toggler {
    color: white !important;
    border: none;
}

#mainNav .navbar-nav .nav-item .nav-link.active {
    color: #9BB8EE !important;
}



/**************************************************************/
/*Header*/
/**************************************************************/

header {
    padding-top: 10rem;
    padding-bottom: calc(10rem - 4.5rem);
    background: linear-gradient(to bottom, rgba(24, 24, 24, .5) 0%, #ffffff 100%), url("../luxdach-media/luxdach-slider/luxdach-slider-1-big.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-size: cover;
}

header i {
    font-weight: 100;
    color: white;
    background: #173986;
    padding: 10px;
    border-radius: 100px;
}

header.masthead h1,
header.masthead .h1 {
    font-size: 2.25rem;
}

@media (min-width: 992px) {
    header {
        height: 50vh;
        min-height: 40rem;
        padding-top: 4.5rem;
        padding-bottom: 0;
    }

    header p {
        font-size: 16px;
        letter-spacing: 1.5px;
    }

    header.masthead h1,
    header.masthead .h1 {
        font-size: 24px;
    }
}

/**************************************************************/
/*Service*/
/**************************************************************/

#service {
    background: #f9f9f9;
}

#service ul {
  list-style: none;
    padding: 10px;
}

#service ul li::before {
  content: "\2022";
  color: #173986;
  font-weight: bold;
  display: inline-block; 
  width: 1em;
  margin-left: -1em;
}


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

footer {
    background: #173986;
    color: white;
    text-transform: uppercase;
    font-size: 14px;
}

footer h3 {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
}

footer a {
    color: white;
	text-decoration: none;
    transition: 0.6s;
}

footer a:hover {
    margin-left: 15px;
    transition: 0.6s;
    color: white;
    border-bottom: solid 1px;
	text-decoration: none;
}

.copyRight a:hover  {
	margin-left:0 !important;
	text-decoration: none;
}

#currentYear {
    font-size: 12px;
}

.businessTimeBox {
    display: flex;
    justify-content: space-between;
}

/**AdressBlock**/
.addressItem {
    margin-bottom: 10px;
}

.itemIcon {
    width: 30px;
    float: left;
    margin-top: 2px;
    text-align: center;
}


.itemValue {
    margin-left: 35px;
}

footer ul {
    list-style: none;
}

/**************************************************************/
/*KONTAKT*/
/**************************************************************/

.form-control {
    border: soldi 1px black;
    border-radius: 0;
}

input {
    height: 50px;
}

.btn-default {
    padding: 10px 35px;
    background: #173986;
    color: white;
    border: solid 1px white;
    font-size: 14px;
    transition: 0.3s cubic-bezier(0.4, 0, 1, 1);
}

.btn-default:hover {
    padding: 10px 35px;
    background: white;
    color: #173986;
    border: solid 1px #173986;
    font-size: 14px;
}

/**************************************************************/
/*ImgZoom*/
/**************************************************************/

.img-hover-zoom {
    overflow: hidden;
}

.img-hover-zoom img {
    transition: transform 1s ease;
}

.img-hover-zoom:hover img {
    transform: scale(1.2);
    transition: transform 1s ease;

}






/**************************************************************/
/*Reserve*/
/************************************************************

#home {
    margin-top: -100px;
    color: white;
}

@media screen and (max-width:992px) {
    #home {
        margin-top: -50px;
        color: white;
    }
}

.owl-stage-outer {
    box-shadow: -1px -13px 20px 3px rgb(0 0 0 / 30%);
}
.card {
    border: none;
    background: none;
}

.card h5 {
    text-align: center;
    color: black;
    margin: 0;
    font-size: 14px;
}

*/