.view {
    height: 100%;
    width: 100%;
    background: url('/themes/zanor-zanor-mdb-loaded/assets/img/start/BG_image_neu.jpg')no-repeat center center; 
    background-size: cover;
    
}
.start-overlay {
    height: 100%;
    width: 100%;
    background-color: rgba(0,0,0,0.6);
}

.start-intro-text {
    position: relative !important;
    text-shadow: 1px 1px 1px #fff !important;
    color:#ec0000 !important;
    top: calc(10% + 20px) !important;
    height: calc(40%-40px);
}

.display-1 {
    font-size: 10vh !important;
}

.display-2 {
    font-size: 8vh !important;
}
/* 
    -----------------------------------
    Carousel
    -----------------------------------*/
.carousel {
    top: 20% !important;
    height:calc(60% - 40px); !important;
    width: 100% !important; 
}
.carousel-inner {
    height: 100% !important;
    width: 100% !important; 
}
.carousel-item {
    height: 100% !important;
}

.carousel-caption {
    /*height: 500px !important;*/
    text-shadow: 0px 0px 3px #000000; 
}

.display-3 {
    font-size: 6vh !important;
}
.display-4 {
    font-size: 4vh !important;
}

/* 
    -----------------------------------
    Button
    -----------------------------------*/
.btn-white {
    border: 1px solid #fff;
}
.btn-white:hover {
    background-color: #666 !important;
    color: #fff !important;
    border: 1px solid #fff !important;
}








/*  
    -----------------------------------
    MEDIA-QUERRY
    ----------------------------------- */
@media only screen and (max-width: 576px) {
    .start-intro-text {
        top: calc(10% + 50px) !important;
    }
    .display-1 {
        font-size: 6vh !important;
    }
    .display-2 {
        font-size: 4vh !important;
    }
    .display-3 {
        font-size: 4vh !important;
    }
    .display-4 {
        font-size: 3vh !important;
    }
}

@media only screen and (min-width: 577px) and (max-width: 767px) {
    .start-intro-text {
        top: calc(10% + 50px) !important;
    }
    .carousel {
        top: 10% !important;
        height:calc(60% - 40px); !important;
        width: 100% !important; 
    }
    .display-1 {
        font-size: 6vh !important;
    }
    .display-2 {
        font-size: 4vh !important;
    }
    .display-3 {
        font-size: 4vh !important;
    }
    
}

@media only screen and (min-width: 768px) and (max-width: 992px) {
    .start-intro-text {
        top: calc(10% + 50px) !important;
    }
    .carousel {
        top: 10% !important;
        height:calc(60% - 40px); !important;
        width: 100% !important; 
    }
    .display-1 {
        font-size: 4vh !important;
    }
    .display-2 {
        font-size: 3vh !important;
    }
    .display-3 {
        font-size: 4vh !important;
    }
    
}