/* BVAEB/[Layout]/portal.css


schwarz: #000;
gruen: #84bd00;
dunkelgruen: #007a53;


zeilenkonzeptmetacontainer:
    .meta_container.mc-custom10: 3-spaltiger Zeilenkonzept_ColumnContainer wird ab einer Bildschirmbreite von 900px einspaltig
*/


/* ============================================ */
/* base settings                        - Start */
/* ============================================ */

/* Besondere Link Darstellung */

.meta_container.mc-custom10 .esvlink.button {
    background: none;
    height: 115px;
    margin: 0;
    padding: 0;
    position: absolute;
    right: 0;
    top: -10px;
    width: 115px;
    z-index: 1;
}

.meta_container.mc-custom10 .esvlink.button:hover,
.meta_container.mc-custom10 .esvlink.button:focus {
    height: 130px;
    right: -8px;
    top: -18px;
    width: 130px;
}

body.lc-subnavigation-visible .meta_container.mc-custom10 .esvlink.button  {
    top: 17px;
}

body.lc-subnavigation-visible .meta_container.mc-custom10 .columns3_layout {
    grid-column-gap: 8%;
    margin-left: -6%;
}

body.lc-subnavigation-visible .meta_container.mc-custom10 .esvlink.button:hover,
body.lc-subnavigation-visible .meta_container.mc-custom10 .esvlink.button:focus {
    height: 115px;
    width: 115px;
}


@media(min-width:2001px){

    body.lc-subnavigation-visible .meta_container.mc-custom10 .esvlink.button  {
        right: -45px;
    }

    body.lc-subnavigation-visible .meta_container.mc-custom10 .columns3_layout {
        column-gap: 8%;
        grid-template-columns: 38% 38% 38%;
        margin-left: -14%;
    }

}

@media(min-width:1300px){

    body.lc-subnavigation-visible .meta_container.mc-custom10 .esvlink.button  {
        height: 105px;
        right: -55px;
        width: 105px;
    }

}

@media(max-width:1300px){

    body.lc-subnavigation-visible .meta_container.mc-custom10 .esvlink.button  {
        height: 95px;
        right: -52px;
        width: 95px;
    }

    body.lc-subnavigation-visible .meta_container.mc-custom10 .esvlink.button:hover,
    body.lc-subnavigation-visible .meta_container.mc-custom10 .esvlink.button:focus {
        height: 105px;
        width: 105px;
    }

}

@media(max-width: 1250px) {

    .meta_container.mc-custom10 .esvlink.button {
        right: -6px;
    }
    
    .meta_container.mc-custom10 .esvlink.button:hover,
    .meta_container.mc-custom10 .esvlink.button:focus {
        right: -14px;
    }

}

@media(max-width: 1200px) {

    .meta_container.mc-custom10 .esvlink.button {
        right: -16px;
    }
    
    .meta_container.mc-custom10 .esvlink.button:hover,
    .meta_container.mc-custom10 .esvlink.button:focus {
        right: -24px;
    }

    body.lc-subnavigation-visible .meta_container.mc-custom10 .esvlink.button  {
        height: 85px;
        right: -60px;
        width: 85px;
    }

    body.lc-subnavigation-visible .meta_container.mc-custom10 .esvlink.button:hover,
    body.lc-subnavigation-visible .meta_container.mc-custom10 .esvlink.button:focus {
        height: 90px;
        width: 90px;
    }

}

@media(max-width: 1150px) {

    .meta_container.mc-custom10 .esvlink.button {
        right: -20px;
    }
    
    .meta_container.mc-custom10 .esvlink.button:hover,
    .meta_container.mc-custom10 .esvlink.button:focus {
        right: -28px;
    }

}

@media(max-width: 1100px) {

    .meta_container.mc-custom10 .esvlink.button {
        height: 105px;
        right: -22px;
        top: 0;
        width: 105px;
    }
    
    .meta_container.mc-custom10 .esvlink.button:hover,
    .meta_container.mc-custom10 .esvlink.button:focus {
        height: 120px;
        right: -30px;
        top: -8px;
        width: 120px;
    }

    body.lc-subnavigation-visible .meta_container.mc-custom10 .esvlink.button  {
        height: 80px;
        right: -60px;
        width: 80px;
    }

    body.lc-subnavigation-visible .meta_container.mc-custom10 .esvlink.button:hover,
    body.lc-subnavigation-visible .meta_container.mc-custom10 .esvlink.button:focus {
        height: 85px;
        width: 85px;
    }

}

@media(max-width: 1050px) {

    .meta_container.mc-custom10 .esvlink.button {
        height: 85px;
        right: -18px;
        top: 0;
        width: 85px;
    }
    
    .meta_container.mc-custom10 .esvlink.button:hover,
    .meta_container.mc-custom10 .esvlink.button:focus {
        height: 100px;
        right: -26px;
        width: 100px;
    }

}

@media(max-width: 1000px) {

    .meta_container.mc-custom10 .esvlink.button {
        right: -24px;
    }
    
    .meta_container.mc-custom10 .esvlink.button:hover,
    .meta_container.mc-custom10 .esvlink.button:focus {
        right: -32px;
    }

}

@media(max-width: 960px) {

    .meta_container.mc-custom10 .esvlink.button {
        right: -33px;
        top: 27px;
    }
    
    .meta_container.mc-custom10 .esvlink.button:hover,
    .meta_container.mc-custom10 .esvlink.button:focus {
        right: -41px;
        top: 19px;
    }

}

@media(max-width: 920px) {

    .meta_container.mc-custom10 .esvlink.button {
        right: -36px;
    }
    
    .meta_container.mc-custom10 .esvlink.button:hover,
    .meta_container.mc-custom10 .esvlink.button:focus {
        right: -44px;
    }

}

@media(max-width: 900px) {

    .meta_container.mc-custom10 .esvlink.button {
        height: 115px;
        right: 120px;
        top: -10px;
        width: 115px;
    }
    
    .meta_container.mc-custom10 .esvlink.button:hover,
    .meta_container.mc-custom10 .esvlink.button:focus {
        height: 130px;
        right: 112px;
        top: -18px;
        width: 130px;
    }

}

@media(max-width: 600px) {

    .meta_container.mc-custom10 .esvlink.button {
        left: 250px;
        right: 0;
    }
    
    .meta_container.mc-custom10 .esvlink.button:hover,
    .meta_container.mc-custom10 .esvlink.button:focus {
        left: 242px;
        right: 0;
    }

}

@media(max-width: 450px) {

    .meta_container.mc-custom10 .esvlink.button {
        left: 220px;
    }
    
    .meta_container.mc-custom10 .esvlink.button:hover,
    .meta_container.mc-custom10 .esvlink.button:focus {
        left: 212px;
    }

}

@media(max-width: 450px) {

    .meta_container.mc-custom10 .esvlink.button {
        left: 200px;
    }
    
    .meta_container.mc-custom10 .esvlink.button:hover,
    .meta_container.mc-custom10 .esvlink.button:focus {
        left: 192px;
    }

}

@media(max-width: 350px) {

    .meta_container.mc-custom10 .esvlink.button {
        height: 100px;
        left: 190px;
        top: 10px;
        width: 100px
    }
    
    .meta_container.mc-custom10 .esvlink.button:hover,
    .meta_container.mc-custom10 .esvlink.button:focus {
        height: 115px;
        left: 182px;
        top: 2px;
        width: 115px
    }

}


/* custom10 */

.custom10 .freetext.text, 
.mc-custom10 .freetext.text { 
    width: 100%;
    height: 100%;
    position: relative;
}

.custom10 .freetext.text iframe,
.mc-custom10 .freetext.text iframe { 
    width: 100%;
    position: relative;
    display: block;
    top: 0;
    left: 0;
}


/* ============================================ */
/* zeilenkonzeptmetacontainer           - Start */
/* ============================================ */

@media(max-width: 900px) {

    .meta_container.mc-custom10 .columns3_layout {
        grid-template-columns: 100%;
    }

}

@media(min-width: 801px) and (max-width: 900px) {

    .meta_container.mc-custom10 .tile {
        margin: 0 auto;
        width: 500px;
    }

}


/* ============================================ */
/* featherlight                         - Start */
/* ============================================ */

.targetGroupDialog .targetGroupDialogWrapper {
    overflow:auto;
}

body > .featherlight .featherlight-content {
    box-shadow: 0px 0px 12px 0px rgba(127, 128, 126, 0.67);
}

@media (min-width: 1024px){
    .featherlight .featherlight-content {
        max-width: initial;
        max-height: initial;
    }

    body > .featherlight .featherlight-content {
        width: 850px;
    }

}

@media (max-width: 1024px){
    .featherlight .featherlight-content {
        max-width: initial; 
        max-height: initial; 
    }

    body > .featherlight .featherlight-content {
        width: 850px;
    }
}

@media (max-width: 960px){
    .targetGroupDialog .lightbox {
        left: 10%;
        right: 10%;
    }

    .targetGroupDialog .targetGroupDialogWrapper {
        width: 80%;
        height: auto;
        background-color: white;
        top: 50%;
    }

    body > .featherlight .featherlight-content {
        width: 80%;
    }

}

@media only screen and (min-device-width: 320px) and (max-device-width: 480px){
    .targetGroupDialog .lightbox {
        left: 5%;
        right: 5%;
    }
}