#subheadline { text-align:center; }

#GridContent #subheadline h2{
    background-image: url(./../../../000Frames/site/images/line-title.png);
    background-repeat: no-repeat;
    background-position: center 66%;
    padding-bottom: 51px;
    background-size: 7%;
    font-size: 280%;
}

.cust-col {
    float:right;
    padding-bottom: calc( 20% - 30px);
    padding-bottom: -webkit-calc( 20% - 30px );
    padding-bottom: -o-calc( 20% - 35px );
    width: calc( 20% - 30px );
    width: -webkit-calc( 20% - 30px );
    width: -moz-calc( 20% - 35px );
    width: -o-calc( 20% - 35px );
}

.cust-col  a{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0px;
    }
#subheadline{
    margin-bottom: 3%;
}
@media (max-width:1024px){
}
@media (min-width:992px) and (max-width:1439px) {
    .cust-col {
        padding-bottom: calc( 25% - 30px);
        padding-bottom: -webkit-calc(25% - 30px );
        padding-bottom: -o-calc( 25% - 30px );
        width: calc( 25% - 30px );
        width: -webkit-calc( 25% - 30px );
        width: -moz-calc( 25% - 30px );
        width: -o-calc( 25% - 30px );
    }
    
}

@media (min-width:768px) and (max-width:991px) {
    .cust-col {
        padding-bottom: calc( 33% - 30px);
        padding-bottom: -webkit-calc(33% - 30px );
        padding-bottom: -o-calc( 33% - 30px );
        width: calc( 33% - 30px );
        width: -webkit-calc( 33% - 30px );
        width: -moz-calc( 33% - 30px );
        width: -o-calc( 33% - 30px );
    }
    #GridContent #subheadline h2{background-size: 10%;}
}

@media (max-width:767px) {
    .row > .cust-col {
        padding-bottom: calc( 50% - 20px);
        padding-bottom: -webkit-calc(50% - 20px );
        padding-bottom: -o-calc( 50% - 20px );
        width: calc( 50% - 20px );
        width: -webkit-calc( 50% - 20px );
        width: -moz-calc( 50% - 30px );
        width: -o-calc( 50% - 30px );
        margin-right: 10px;
        margin-left: 10px;
        margin-bottom: 20px;
    }
    #lobby{margin: 0 auto;}
    #GridContent #subheadline h2{background-size: 10%;padding-bottom: 40px;padding-top:20px;}

}

@media (max-width:375px){
    #GridContent #subheadline h2{font-size: 217%;padding-bottom: 34px;}
}


@keyframes fadeElements { 
	100% { opacity: 1; }
}

@-webkit-keyframes fadeElements { 
	100% { opacity: 1; }
}


.MediasContainer     { float: right;width: 100%; }
.MediaBoxDate        { color:#b7854a;position: absolute;bottom: 3px;text-align: center;left: 50%;width: 100%;transform: translate(-50%, -50%);-webkit-transform: translate(-50%, -50%);-moz-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);-o-transform: translate(-50%, -50%);font-size: 90%;}
.MediaBoxContainer:hover .MediaBoxDate, .MediaBoxContainer:active .MediaBoxDate{color:#231f20;}

.MediaBoxContainer   {
                       text-align: center;
                       display: inline-block;
                       vertical-align: middle;
                       background: #ececec;
                       position: relative;
                      /* animation:fadeElements 2s forwards;
                       -webkit-animation:fadeElements 2s forwards;*/
                       opacity:1;
                       min-height: 1px;
                       padding-right: 15px;
                       padding-left: 15px;
                       margin-left: 15px;
                       margin-right: 15px;
                       margin-bottom: 30px;
                       }    
.mediaText           {position: absolute;top: 50%;width: 80%;transform: translate(-50%, -50%);-webkit-transform: translate(-50%, -50%);color: #000;font-size: 108%;line-height: 1.2;left: 50%;}

.mediaText .MediaBoxTitle,.mediaText .MediaBoxPaper {}
.MediaBoxContainer:hover .mediaText, .MediaBoxContainer:active .mediaText{color:#231f20;}

.MediaBoxContainer .aLetter svg { fill: #ab8d56;max-width:100%;}
.MediaBoxContainer .yLetter svg { fill: #bea16d;max-width:100%;}
.MediaBoxContainer .aLetter,.MediaBoxContainer .yLetter { width: 70%;margin: auto;overflow: hidden;transition: opacity 450ms ease-in-out;-webkit-transition: opacity 450ms ease-in-out;position: absolute;top: 50%;transform: translate(-50%,-50%);-webkit-transform: translate(-50%,-50%);z-index: 0;left: 50%; }


.MediaBoxContainer:hover, .MediaBoxContainer:active              { background: #96a78d;color: #ffffff;}

.MediaBoxContainer:hover .aLetter,.MediaBoxContainer:hover .yLetter           { opacity:0;/*transform:scale(1.03);-webkit-transform:scale(1.03);*/}
.MediaBoxContainer:hover a, .MediaBoxContainer:hover a span            {color: #ffffff;}
.MediaBoxContainer:hover a:hover      { color: #ffffff;}

.MediaBox                             { position: absolute;padding: 25px;top: 50%;left: 50%;width: 100%;transform: translate(-50%, -50%);-webkit-transform: translate(-50%, -50%);-moz-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);-o-transform: translate(-50%, -50%);}
.MediaBox span                        { margin-top: 15px;display: block;color:#223d6f;}

.MediaBox a:hover                     { color:#223d6f; text-decoration:none;}
.MediaBoxContainer:nth-child(4n+0)    { /* margin-left: 35px; */}
.hvr-fade:active, .hvr-fade:focus, .hvr-fade:hover{background-color:transparent;}
.cust-col.hvr-fade:active, .cust-col.hvr-fade:focus, .cust-col.hvr-fade:hover{background-color: #96a78d;}



@media (min-width:1700px){
    .mediaText{font-size: 21px;}
    .MediaBoxDate{font-size: 100%;}
}


#video-pop iframe           { width: 35vw;height: 26vw;border: 0; }
.modal-content              { background:transparent;box-shadow: none;border: 0px; }

.modal-footer               { display: none; }
.modal-header               { display: none; }
img.imgpopup                { max-width: 80vw; }

@media (max-width:991px){
    #video-pop iframe   { width: 85vw;height: 63vw; }
    .mediaText          { font-size: 105%; }
    .MediaBoxDate       { font-size: 88%; }
}

@media (max-width:767px){
    .mediaText{font-size: 100%;}
    .MediaBoxDate{font-size: 80%;}
    .MediaBoxes-Container                               { margin-bottom: 22px;}
}

@media (max-width:375px){
    .MediaBoxDate{font-size: 80%;}
    .mediaText      {font-size: 88%;}
}