/* Extra small devices (portrait phones, less than 576px)
No media query for `xs` since this is the default in Bootstrap */

/* Small devices "sm" (landscape phones, 576px and up) */
@media (min-width: 576px) {  }

/* Medium devices "md" (tablets, 768px and up) */
@media (min-width: 768px) {  }

/* Large devices "lg" (desktops, 992px and up) */
@media (min-width: 992px) {  }

/* Extra large devices "xl" (large desktops, 1200px and up) */
@media (min-width: 1200px) {  }


/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {  }

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {  }

/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {  }

/* Large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {  }

/* Extra large devices (large desktops)
No media query since the extra-large breakpoint has no upper bound on its width */


*
{
    /* Very smooth text */
    -webkit-font-smoothing: antialiased;
    -webkit-text-shadow: rgba(0,0,0,.01) 0 0 1px;
    text-shadow: rgba(0,0,0,.01) 0 0 1px;
}

.mt-first-0 > :first-child { margin-top: 0 !important; margin-left: 0 !important; }
.mb-last-0 > :last-child { margin-bottom: 0 !important; margin-right: 0 !important; }

.no-select{
    -ms-user-select: none; 
    -moz-user-select: none; 
    -webkit-user-select: none; 
    user-select: none; 
}
.transition-all
{
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

.mark-disabled{
    background-color:inherit;
    background-image: repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(200,200,200,.5) 35px, rgba(200,200,200,.5) 70px);
}
.mark-none{background-image:none;}

.o-transition
{
    -webkit-transition: opacity .2s ease-in-out;
    -moz-transition: opacity .2s ease-in-out;
    -ms-transition: opacity .2s ease-in-out;
    -o-transition: opacity .2s ease-in-out;
    transition: opacity .2s ease-in-out;
}
.o-100{opacity:1;}
.o-75{opacity:.75;}
.o-50{opacity:.5;}
.o-25{opacity:.25;}
.o-0{opacity:0;}

@media (min-width: 576px){
    .mark-sm-disabled
    {
        background-color:inherit;
        background-image: repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(200,200,200,.5) 35px, rgba(200,200,200,.5) 70px);
    }
    .mark-sm-none{background-image:none;}
    .transition-sm-all
    {
        -webkit-transition: all .2s ease-in-out;
        -moz-transition: all .2s ease-in-out;
        -ms-transition: all .2s ease-in-out;
        -o-transition: all .2s ease-in-out;
        transition: all .2s ease-in-out;
    }    
    .o-sm-transition
    {
        -webkit-transition: opacity .2s ease-in-out;
        -moz-transition: opacity .2s ease-in-out;
        -ms-transition: opacity .2s ease-in-out;
        -o-transition: opacity .2s ease-in-out;
        transition: opacity .2s ease-in-out;
    }
    .o-sm-100{opacity:1;}
    .o-sm-75{opacity:.75;}
    .o-sm-50{opacity:.5;}
    .o-sm-25{opacity:.25;}
    .o-sm-0{opacity:0;}    
}
@media (min-width: 768px){
    .mark-md-disabled
    {
        background-color:inherit;
        background-image: repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(200,200,200,.5) 35px, rgba(200,200,200,.5) 70px);
    }
    .mark-md-none{background-image:none;}
    .transition-md-all
    {
        -webkit-transition: all .2s ease-in-out;
        -moz-transition: all .2s ease-in-out;
        -ms-transition: all .2s ease-in-out;
        -o-transition: all .2s ease-in-out;
        transition: all .2s ease-in-out;
    }    
    .o-md-transition
    {
        -webkit-transition: opacity .2s ease-in-out;
        -moz-transition: opacity .2s ease-in-out;
        -ms-transition: opacity .2s ease-in-out;
        -o-transition: opacity .2s ease-in-out;
        transition: opacity .2s ease-in-out;
    }
    .o-md-100{opacity:1;}
    .o-md-75{opacity:.75;}
    .o-md-50{opacity:.5;}
    .o-md-25{opacity:.25;}
    .o-md-0{opacity:0;}    
}

.text-big{ font-size:22px; }
.text-bigger{ font-size:48px; }
.text-biggest{ font-size:86px; }
.text-smaller-line-height{ line-height:1; }
.pt-big{ padding-top:160px; }
.pb-big{ padding-bottom:160px; }
.darken{ position:relative; z-index:0; }
.darken > div{ position:relative; z-index:1; }
.darken:after
{
    z-index:0;
    content: '\A';
    position: absolute;
    width: 100%; 
    height:100%;
    top:0; 
    left:0;
    background:rgba(34, 25, 12 ,0.7);
}
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px)
{  

}

.content-area{ border-top:1px rgba(0,0,0,0.5) solid; border-bottom:1px rgba(0,0,0,0.5) solid; }

.parallax
{
    /* The image used */
    background-image: url("https://via.placeholder.com/800x400/484134/fff?text=XXXXXXX");
    background-image: url("https://source.unsplash.com/random/800x400");

    /* Set a specific height */
    min-height: 500px;

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: rgb(34, 25, 12);
    background-blend-mode: screen;
    background-image: url("https://via.placeholder.com/800x400/484134/fff?text=XXXXXXX");
}

 /* Turn off parallax scrolling for all tablets and phones. Increase/decrease the pixels if needed */
 @media only screen and (max-width: 1199.98px) {
    .parallax {
        background-attachment: scroll;
    }
} 

a:not([href]) {
    position:relative;
    margin-top:-100px;
}

/* Bootstrap Schatten Erweiterung um links u. rechts Schatten */
@media (min-width: 992px) 
{  
.shadow-x:before {
    box-shadow: -15px 0 15px -15px lightgray inset;
    content: " ";
    height: 100%;
    left: -15px;
    position: absolute;
    top: 0;
    width: 15px;
}
.shadow-x:after {
    box-shadow: 15px 0 15px -15px lightgray inset;
    content: " ";
    height: 100%;
    position: absolute;
    top: 0;
    right: -15px;
    width: 15px;
}
.shadow-x{
    position: relative;
}
}