/* DIVIDER */

.frame-type-div hr {
        border-top: 0px solid #000;
}

/* button */
.section.section-default .frame-type-text .btn.btn-primary {

}


.btn-primary {
    color: #fff;
    background-color: transparent;
    border-color: white;  
    padding-left: 1.5rem;
    padding-right: 1.5rem;
     transition: 1s ease-out;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open>.dropdown-toggle.btn-primary {
    color: #fff;
    background-color: rgba(255,255,255,.1);
    background-color: #009ee3;
    border-color: #009ee3;  
    transition: .2s ease-in;
   
}




@media (min-width: 992px) {
     .align-items-center {
         display: flex;
    }
}


@media (min-width: 200px) {
    
    .section.section-default > .container {
        width: 100%;
        /*border: 0px solid red;*/
    }
    
    .section.section-default > .container .container-padding .row {
       /*border: 4px solid blue;*/
       /* min-height: 100%; */
       height: calc(100%) + 3rem;
    }
    
    
    

    .bg-kreuder-bau-verlauf {
/*        background-color: #009cde;
        background-image: radial-gradient(circle farthest-side at center bottom,#009cde,#003087 125%);*/
        background: linear-gradient(180deg, #489cdb, #2656ad);
    }
    .bg-kreuder-bau-verlauf p, 
    .bg-kreuder-bau-verlauf h1, 
    .bg-kreuder-bau-verlauf h2, 
    .bg-kreuder-bau-verlauf h3, 
    .bg-kreuder-bau-verlauf h4,
    .bg-kreuder-bau-verlauf a {
    color: white;
    }
    .bg-kreuder-bau-verlauf li { color: white; }
    
    .bg-kreuder-bau-verlauf figure { margin: 0px; padding: 0px }
    .bg-kreuder-bau-verlauf .gallery-item { padding: 0px;}
    
   
    .align-items-center>.col {
        display: flex;
        /*border: 4px solid yellow;*/
        display: flex;
        flex-direction: row;
        align-items: center;
        /* height: 100%; */
    }
    
    
    /* 3 Spalten, das dritte Element oben bündig statt vertical center */
    .align-items-center :nth-child(3) {
        /*display: flex;*/
        /*border: 4px solid yellow;*/
        /*display: flex;*/
        /*flex-direction: row;*/
        align-items: start;
    }

    
}


@media (min-width: 992px) {

    .container2-padding-left {
        /*border: 0px solid green;*/
        padding-left: calc((100vw - 992px)/2);
        width: calc((100vw - 992px)/2 + 680px);
        height: 100%;
    }
    
}

@media (min-width: 1200px) {

    .container2-padding-left {
        /*border: 0px solid green;*/
        padding-left: calc((100vw - 1100px)/2);
        width: calc((100vw - 1140px)/2 + 680px);
        height: 100%;
    }



.container-text-mittig  {
    border: 0px solid red;
    height: 100%;
    
}
.container-text-mittig  {
    border: 0px solid red;
    display: flex;
    flex-direction: row;
    align-items: center;
    min-height: 100%;

}
.container-text-mittig  .frame {
    border: 0px solid red;
     
    
    align-items: center;
    min-height: 100%;
}

}


@media (min-width: 768px) {
    
        /* Textspalten enger */
        
        .section .col .frame-type-text {
            padding-left: -20px;
            padding-right: -20px;
        }
    
        /* Abstand unten entfernen */
        .main-section {
            margin-bottom: 0px;
        }
        .main-section > .section { padding-bottom: 0rem; }
    
        .bg-kreuder-bau-verlauf-1 {
        background: linear-gradient(180deg, #489cdb, #2656ad);
        }
        .bg-kreuder-bau-verlauf-2 {
        background: linear-gradient(0deg, #489cdb, #2656ad);
        }
    
    
    .container-padding.padding-top-small {
        /* border-top: 1px solid red; */
        padding-top: 0.5rem;
    }
    .container-padding.padding-bottom-small {padding-bottom: 0.5rem;/* border-bottom: 1px solid red; */}
    
    .container-padding.padding-top-none {
        /* border-top: 1px solid green; */
        padding-top: 0rem;
    }
    .container-padding.padding-bottom-none {padding-bottom: 0rem;/* border-bottom: 1px solid green; */}
    
    
}






/* TODO - nachfragen ob gutter enger */

@media (min-width: 992px) {
            /* Textspalten enger */
        
        
        .col .gallery-row {
                margin-left: 0;
                margin-right: 0;
        }  
        
        /* bullets nicht ausrücken */
        .section .col .frame-type-text ul {
            display: block;
            list-style-type: disc;
            margin-block-start: 0em;
            margin-block-end: 0em;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
            /*padding-inline-start: 40px;*/
            padding-inline-start: 1.4em;

        }
           
    
}



/* blended frames */

@media (min-width:200px) {
    
      .section .blender-frame figure {
        margin: 0rem;
        border: 0px solid red;
        opacity: 0;
        }

        .section .blender-frame .an .gallery-row {
        background-color: rgba(90,150,250,.8);
        background-blend-mode: multiply;
        transition: all ease-out .5s;
/*        background: linear-gradient(180deg, #489cdb, #2656ad, rgba(0,0,0,.21));
        background: linear-gradient(0deg, #489cdb, #2656ad, rgba(0,0,0,.1));*/
        }
        
        .section .blender-frame .frame .gallery-item {
            
            padding-left: 0em;
            padding-right: 0em;
        }

        .section .blender-frame p {
            position: relative;
            bottom: 40px;
            color: transparent;
            border: 0px solid green;
            transition: all ease-out .3s;
            text-align: center;
            height: 0px;
            pointer-events: none; /* the fix! */
        }
        .section .blender-frame .an p {
            position: relative;
            bottom: 120px;
            color: white;
            border: 0px solid green;
            pointer-events: none; /* the fix! */
            font-size: 2rem;
        }
      
        .section .blender-frame .frame .an .gallery-row {
        margin: 0rem;
        border: 0px solid red;
        opacity: 1;
        background-color: rgba(90,150,250,.8);
        background-blend-mode: multiply;
        }
        
        

        .section .blender-frame .frame {
        margin: 0rem;
        border: 0px solid red;
        opacity: 1;
        /*background: url('');*/
        background-size: contain;
        background-repeat: no-repeat;
        padding-top: 0rem;
        padding-bottom: 0rem;
        z-index: 1005;
        }
       
}



/* Abstand der Kreuder Boxen */
@media (max-width:576px) {
    
}

@media (min-width:768px) {
    
.padding-top-small.blender-frame {
    padding-top: 2rem;
}
.padding-bottom-small.blender-frame {
    padding-bottom: 2rem;
}
}
@media (min-width:992px) {
    
}
@media (min-width:1200px) {
    
}



/* Breite breakpoints */

@media (min-width: 768px) {

    .container-padding {
        /*border: 0px solid green;*/
        padding-left: calc((100vw - 720px)/2);
        padding-right: calc((100vw - 720px)/2);
        height: 100%;
        padding-top: 3.5rem;
        padding-bottom: 3.5rem;
    }
    
    .container-padding-left {
        /*border: 0px solid green;*/
        padding-left: calc((100vw - 720px)/2);
         
        height: 100%;
    }
    .container-padding-right {
        /*border: 0px solid green;*/
        padding-right: calc((100vw - 720px)/2);
         
        height: 100%;
    }
        
}


@media (min-width: 992px) {

    .container-padding {
        /*border: 0px solid green;*/
        padding-left: calc((100vw - 980px)/2);
        padding-right: calc((100vw - 980px)/2);
        height: 100%;
        padding-top: 3.5rem;
        padding-bottom: 3.5rem;
    }
    
    .container-padding-left {
        /*border: 0px solid green;*/
        padding-left: calc((100vw - 980px)/2);
         
        height: 100%;
    }
    .container-padding-right {
        /*border: 0px solid green;*/
        padding-right: calc((100vw - 980px)/2);
         
        height: 100%;
    }
        
}



@media (min-width: 1200px) {

    .container-padding {
        /*border: 0px solid green;*/
        padding-left: calc((100vw - 1180px - 20px)/2);
        padding-right: calc((100vw - 1180px - 20px)/2);
        height: 100%;
        padding-top: 3.5rem;
        padding-bottom: 3.5rem;
    }
    
    .container-padding-left {
        /*border: 0px solid green;*/
        padding-left: calc((100vw - 1180px - 20px)/2);
         
        height: 100%;
    }
    .container-padding-right {
        /*border: 0px solid green;*/
        padding-right: calc((100vw - 1180px - 20px)/2);
         
        height: 100%;
    }
        
}



/* Letze Kachel mit blender effekt */

@media (min-width: 768px) {
    
    #c821.frame { max-height: 140px; /*border: 0px solid red;*/  }
    
}


@media (min-width: 992px) {
    
    #c821.frame { max-height: 165px; }
    
}

@media (min-width: 1200px) {
    
    #c821.frame { max-height: 208px; }
    
}