/*EN FIX*/
#lookingAhead .PGgg_text p {display: none}

h3.theCrossClass {display: inline-block}


/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
.GROUPTAB {
    background-color: #dddddd;
    border: 1px solid #aaaaaa;
    border-radius: 0 14px 0 0;
    display: inline-block;
    margin-right: 0;
    padding: 3px 12px;
}
.GROUPTAB.active{background-color: #4c4646; color: #fff}
/*.txtbox, .PGgg_text p {display: none}*/

#lb_Back{position: fixed; background-color: rgba(0,0,0,0.75);bottom: 0;left: 0;position: fixed;right: 0;top: 0;z-index: 999999}
#lb_content{position: fixed; background-color: #fff;left: 15%;right: 15%; top: 10%; padding: 50px;overflow: auto; box-shadow: 2px 2px 5px rgba(0,0,0,0.6); max-width: 1060px;z-index: 9999999; bottom: 10%;max-height: 650px;}
#lb_content .institution {margin-top: -15px;color: #848484;font-weight: bold;font-size: 14px; margin-bottom: 0px}
#AGLINK {font-weight: bold;font-size: 14px; color: #848484; margin-top:0}
#AGLINK a {color: #848484}
#AGLINK a:after {
    font-family: "Fontawesome";
    content: "\f061";
    display: inline-block;
    margin: 0 5px;
    text-decoration: none !important;
    border-bottom: 1px solid transparent;
    font-size: 12px;
    -webkit-transform: rotate(-45deg);
    -webkit-transform-origin: 35% 40%;
    -moz-transform: rotate(-45deg);
    -moz-transform-origin: 35% 40%;
    -o-transform: rotate(-45deg);
    -o-transform-origin: 35% 40%;
    -ms-transform: rotate(-45deg);
    -ms-transform-origin: 35% 40%;
    transform: rotate(-45deg);
    transform-origin: 35% 40%;
}

.closer {
    background-color: #4c4646;
    border: 1px solid #4c4646;
    border-radius: 50%;
    color: #fff;
    font-size: 25px;
    font-weight: bold;
    height: 35px;
    padding: 0 9px;
    position: absolute;
    right: 6px;
    top: 6px;
    width: 35px;
    }
/*
#lb_content:before {content: "\f057";
    font: normal normal normal 14px/1 FontAwesome;
    position: absolute;
    right: 5px;
    top: 5px;
    color: rgb(76, 70, 70);
    z-index: 999999999999;
    font-size: 30px;cursor: pointer;
    -webkit-transition: all .45s cubic-bezier(.23,1,.32,1);
    -moz-transition: all .45s cubic-bezier(.23,1,.32,1);
    -ms-transition: all .45s cubic-bezier(.23,1,.32,1);
    -o-transition: all .45s cubic-bezier(.23,1,.32,1);
    transition: all .45s cubic-bezier(.23,1,.32,1);}
    */
#lb_content:hover {cursor: pointer}    
#lb_content:hover:before {opacity: 0.6}   


.txtbox {opacity: 0;position: absolute;width: 100%;text-align: center;top: 32%;transform: scale(0); cursor: pointer}
.txtbox a {color: #fff; text-decoration: none; font-size: 18px; font-weight: 700; border: 2px solid; padding: 5px 40px}

.openSpan {
    position: absolute;
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    top: 2px; right: 2px; bottom: 2px; 
    left: 2px;cursor: pointer}


.col-md-4.doubled {width: 40% !important}
.col-md-4.triple {width: 60% !important}

/*------------------ MORE INFOBOX ---------------------*/
.gg_moreInfoBox {background-color: #eee;border: 1px solid #ddd;padding: 15px;font-size: 13px;line-height: 18px}
.gg_moreInfoBox li {display: inline-block; vertical-align: top}
.gg_moreInfoBox ul {margin-bottom: 10px}
.gg_moreInfoBox ul li:first-child {width:20%; font-weight: bold}
.gg_moreInfoBox ul li:last-child {width:75%; margin-left: 5%}



/*-------------------------------------------------*/
/*------------------ GENERALS ---------------------*/
/*-------------------------------------------------*/
#groupgalerie {min-height: 300px}
.largerow {margin: 0 auto; width: 100%;position: relative;overflow: hidden; clear: both}
.col-md-4 {width: 20%;float: left;padding-bottom: 0; position: relative}
.hidden {height: 0 !important; padding: 0 !important; overflow: hidden}

.sorticon {padding-bottom: 0 !important;height: 197px;overflow: hidden}
.sorticon img {display: block;}
.hide-sorticon {margin: 0 !important;min-height: 0 !important;overflow: hidden;padding: 0 !important;opacity: 0;  transform: scale(0.01);transform: rotateY(270deg)}


.StylePattern .bgPic {-webkit-filter: grayscale(0%) !important;filter: grayscale(0%) !important}
.StylePattern .openSpan {cursor: default !important}

.StylePattern .openSpan, .StylePattern .txtbox, .StylePattern .PGgg_text::before  {display: none}
/*-------------------------------------------------*/
/*------------------ TRANSITION ---------------------*/
.sorticon, .PGgg_text p
{
    -webkit-transition: all .45s cubic-bezier(.23,1,.32,1);
    -moz-transition: all .45s cubic-bezier(.23,1,.32,1);
    -ms-transition: all .45s cubic-bezier(.23,1,.32,1);
    -o-transition: all .45s cubic-bezier(.23,1,.32,1);
    transition: all .45s cubic-bezier(.23,1,.32,1);
}

/*-------------------------------------------------*/
/*------------------ NAVIGATION ---------------------*/
ul.sorter {width: 100%; margin: 0 auto;text-align: center; display: none}
#ki-konkret > section > h1 {display: none}

button.gg_sort {cursor: pointer;
    display: inline-block; 
    text-align: center;
    list-style: none;
    padding: 1%;
    margin: 2px;
    border-bottom: 4px solid #D2D2D2;
    font-size: 0.7em;
    position: relative;
    padding-top: 99px;
    /*background-color: #eaeaea;*/
    width: 10.5%;
    vertical-align: bottom;
    height: 150px;
    font-weight: bold;
        -webkit-transition: all .45s cubic-bezier(.23,1,.32,1);
    -moz-transition: all .45s cubic-bezier(.23,1,.32,1);
    -ms-transition: all .45s cubic-bezier(.23,1,.32,1);
    -o-transition: all .45s cubic-bezier(.23,1,.32,1);
    transition: all .45s cubic-bezier(.23,1,.32,1);
    }
button.gg_sort.active, button.gg_sort:hover {border-bottom: 4px solid;/*box-shadow: inset 2px 2px 15px rgba(0,0,0,0.5)*/}   
.sorter li.active:before, .sorter li:hover:before { background-color: #920f30}

.sorter > button:before {position: absolute;
    top: 30px;
    left: calc(50% - 25px);
    width: 92%;
    text-align: center;
    font-size: 34px !important;
    width: 50px;
    height: 50px;
    background-color: #7e7e7e;
    border-radius: 50%;
    padding: 8px;
    box-sizing: border-box;
    color: #fff;}


.sorter > button:before {content: "\f141";font: normal normal normal 14px/1 FontAwesome;}        
.sorter > button.Technologien-und-Data-Science:before {content: "\f1c0";font: normal normal normal 14px/1 FontAwesome;}    
.sorter > button.Mensch-Maschine-Interaktion:before {content: "\f007";font: normal normal normal 14px/1 FontAwesome;}
.sorter > button.IT-Sicherheit:before {content: "\f023";font: normal normal normal 14px/1 FontAwesome;}
/*-------------------------------------------------*/
/*------------------ CONTENT ---------------------*/
.sorticon .bgPic {-webkit-filter: grayscale(100%);filter: grayscale(100%)}

#ki-konkret .PGgg_text p {display: none}

.PGgg_text {
	color: #fff; text-align: center;
    position: absolute;
    top: 0;
    bottom: 0;
	left: 0; right: 0;background: rgba(0, 0, 0, 0.0);
    width: 100%}

.PGgg_text::before {
position: absolute;
    top: 5%;
    right: 5%;
    bottom: 5%;
    left: 5%;
    border: 2px solid #fff;
    content: '';
opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: scale(0);
    transform: scale(0);
    pointer-events: none;
}
.PGgg_text h3 {
    text-transform: uppercase;
    font-weight: bold;
    font-size: 4em;
    line-height: normal;
    max-width: 70%;
    margin: auto;
    margin-top: 7%;
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform: translate3d(0,100%,0);
    transform: translate3d(0,100%,0);}
.PGgg_text p {
    position: absolute;
    bottom: -12px;
    padding: 1%;
    font-size: 12px;
    background-color: #920f30;
    width: 90%;
    left: 5%;
}


/*-------------------------------------------------*/
/*------------------ HOVER EFFECTS ----------------*/
/*.sorticon:hover .PGgg_text {background: rgba(0, 0, 0, 0.8)}*/
.sorticon:hover .txtbox {opacity: 1;transform: scale(2)}
.sorticon:hover .PGgg_text::before {opacity: 1;-webkit-transform: scale(1);transform: scale(1);}
.sorticon:hover .PGgg_text h3 {-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);}
.sorticon:hover .PGgg_text p {opacity: 0}
.sorticon:hover .bgPic {-webkit-filter: grayscale(0%);filter: grayscale(0%)}


/*-------------------------------------------------*/
/*------------------ MEDIA BREAKS ----------------*/

@media (max-width: 1280px)
{
	body.android #lb_content {overflow: scroll; height: 80%; background-color: #eee; width: 80%; left: 10%; max-width: none}
}

@media (max-width: 768px)
{
	.col-md-4, .col-md-4.doubled, .col-md-4.triple {width: 100% !important; float: none}
	.col-md-4, .bgPic {height: 250px !important}
	#lb_content {transform: scale(0.9);top: 0%; left: 1%; right: 1%; overflow: scroll; height: 100%}
	.col-md-4.doubled, .col-md-4.triple {height: 150px !important}
	.col-md-4.doubled .bgPic, .col-md-4.triple .bgPic {height: 150px !important; background-size: contain}
}