/* UIKIT OVERWRITING */
/* IRGENDWANN IN UIKIT EINKOMPILIEREN, WENN DAS KEINE BETA MEHR IST */
/* STYLING */
.uk-navbar-dropdown-nav .uk-nav-divider {
        border-top: 1px solid rgba(67, 138, 201, 1);
        }

.uk-navbar-nav>li>a
        {
        color: rgba(67, 138, 201, 1);                
        }

.uk-navbar-nav>li.uk-active>a
        {
        color: rgba(12, 40, 86, 1);
        font-weight: 600;
        }

.uk-navbar-dropdown-nav>li>a
        {
        color: rgba(67, 138, 201, 1);                
        }

h1, h2, h3, h4, h5, h6 {
    
        color: #0c2856;
        }

.ssgx-icon-color {
        color: #0c2856;
        }

/* 
//////////////////////////////
HTML-Elemente 
//////////////////////////////
*/
/*  h1, h2, h3 {text-transform: uppercase;}   */


/* 
//////////////////////////////
Farben 
Blau des Logos: #3D8BC0;
Gelb des Logos: #FFE75E;
//////////////////////////////
*/
em {
    color:inherit;
}

a {
    color: #3D8BC0;
}

.uk-badge {
    background-color: #3D8BC0;
}
.uk-button-primary {
    background-color: #3D8BC0;
}
/* 
//////////////////////////////
Media-Queries, Responsive
//////////////////////////////
*/
@media (max-width: 640px) {  
                .ssgx-hero-responsive {
                min-height: 300px; 
                }
            }

            
@media (min-width: 641px) {  
            .ssgx-hero-responsive {
                min-height: 450px; 
                }
            }    

/* 
//////////////////////////////
Klassen-Definitionen 
/////////////////////////////
*/
 
/* Rahmen für Bilder in Bildergalerie */ 
.ssgx-rahmen {
    background:transparent;
    border:1px solid #aaa; 
}

/*
//////////////////////////////
Landing-Page-Seite
hinzugefügt:     01.05.17
letzte Änderung: 01.05.17
//////////////////////////////
*/
/* #ssgx-landingpage .uk-card-body {} würde natürlich auch funktionieren, ich wollte aber jede fehlerhafte Zuweisung ganz sicher ausschließen und benutze daher die möglichst spezifische Zuweisung per Kind-Selektor */
#ssgx-landingpage > div > .uk-card-body {
    padding: 0px;
    background: rgb(245,245,245);
}


#ssgx-landingpage .uk-button-text {
    line-height: 1em;
    padding: 20 0 0 0;
}

.ssgx-card-inner   {
    
    
    
}


.ssgx-card-caption   {
    
    
    
}


/*
 navbar styling nutzt modernizr klassen, zukunftssicher, automatische aktivierung auf browsern, die das ganze irgendwann unterstützen
*/

/* */
.ssgxmdnzr_backdropfilter .ssgx-navbar-dropdown {
            background: #fff;
            -webkit-backdrop-filter:blur(25px) brightness(180%) contrast(40%); 
            backdrop-filter:blur(25px) brightness(180%) contrast(40%);
            }

.ssgxmdnzr_no-backdropfilter .ssgx-navbar-dropdown {
            background: rgba(220,230,243,0.97);

            }


.ssgxmdnzr_backdropfilter .ssgx-navbar-desktop {
            background: url("./ssgx-images/ssgx-logo_2.svg") no-repeat, rgba(166,192,227,0.4);
            background-position: 10px 10px, 0 0;
            background-size: 200px auto, contain;
            min-height: 100px;
            -webkit-backdrop-filter:blur(25px) brightness(180%) contrast(40%); 
            backdrop-filter:blur(25px) brightness(180%) contrast(40%);
            
            }

.ssgxmdnzr_no-backdropfilter .ssgx-navbar-desktop {
             background: url("./ssgx-images/ssgx-logo_2.svg") no-repeat, rgba(220,230,243,0.97);
             background-position: 10px 10px, 0 0;
             background-size: 200px auto, contain;
             min-height: 100px;
            
            }

#logo {
    background: url("./ssgx-images/ssgx-logo_2.svg") no-repeat;
    background-size: 200px auto, contain;
    background-position: 10px 10px, 0 0;
    width: 220px;
    min-height: 100px;

}


/*
 hero unit #### hero unit
*/
.ssgx-hero-text  {
            text-transform: uppercase;
            font-weight: 600;
            background: rgb(255, 239, 108);
            display: inline;
            padding: .2em .4em .2em .4em;
            /* padding: 10px 15px 10px 15px; */
            /* Schlechte Unterstützung für box-decoration-break */
            /* ohne Attribut Farbhintergrund ungleich */
            -webkit-box-decoration-break: clone;
            box-decoration-break: clone;
            }               


.ssgx-hero_hintergrund {
            background: url("./ssgx-images/hero-schule.jpg") no-repeat top center;
            background-color: #cccccc;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
            background-clip: border-box;
            }


.ssgx-shadow {   
        -webkit-box-shadow: 0px -1px 4px 0px rgba(0,0,0,0.75);
         -moz-box-shadow: 0px -1px 4px 0px rgba(0,0,0,0.75);
         box-shadow: 0px -1px 4px 0px rgba(0,0,0,0.75);   
        }


.ssgx-opacity08 {
            -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
            filter: alpha(opacity=90); 
            opacity: 0.9;
            }   


.ssgx-nomargin {
        margin: 0px;
        padding: 0px;
        }


.ssgx-nopadding {
        padding: 0px; !important;
        }


.ssgx-primary {
            /* background: url('./styles/ssgx-images/bg.png') no-repeat center center; 
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;  */
            /*
            background-color: #aec6d6;
            background: rgba(174, 198, 214, 1);
            */
            
            background: #c3d3e0; /* Old browsers */
            background: -moz-radial-gradient(center, ellipse cover, #c3d3e0 0%, #9fbbcf 100%); /* FF3.6-15 */
            background: -webkit-radial-gradient(center, ellipse cover, #c3d3e0 0%,#9fbbcf 100%); /* Chrome10-25,Safari5.1-6 */
            background: radial-gradient(ellipse at center, #c3d3e0 0%,#9fbbcf 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c3d3e0', endColorstr='#9fbbcf',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

            }    

.ssgx-inschrift {
/* Erzeugt Container mit position:relative und übergibt an das darauffolgende div position: absolute, so dass Inschriften ermöglicht werden. Funktioniert im Moment nur mit Zentrierung */    
            position: relative;
            text-align: center;
            }
 
.ssgx-inschrift > div {
                    position:absolute;
                    top:50%; left:50%;  
                    -webkit-transform: translate(-50%, -50%);
                    -moz-transform: translate(-50%, -50%);
                    -ms-transform: translate(-50%, -50%);
                    -o-transform: translate(-50%, -50%);
                    transform: translate(-50%, -50%); 
                    margin:0px; 
                    padding:0px;
                    }


/* 
//////////////////////////////
ID- und weitere Selektoren 
//////////////////////////////
*/

/* Mobile Menu */
.ssgxmdnzr_backdropfilter #ssgx-mobile_nav_overlay {
        position: absolute;
        z-index: 1498; 
        left: 0px; top 0px;
        margin-top: 40px;
        width: 100%; height: 0%;
        opacity: 0;
        color: white;
        background: rgba(3,3,3,0.8);
	    -webkit-backdrop-filter:blur(15px) brightness(150%) contrast(60%);
        overflow: hidden;
        transition: 0.5s;
}


.ssgxmdnzr_no-backdropfilter #ssgx-mobile_nav_overlay {
        position: absolute; 
        z-index: 1498; 
        left: 0px; top 0px;
        margin-top: 40px;
        width: 100%; height: 0%;
        opacity: 0;
        color: white;
        background: rgba(30,30,30,0.95);
        overflow: hidden;
        transition: 0.5s;
}

#ssgx-mobile_nav_overlay a:hover {
        color: #fff;
        text-decoration: none;
}

#ssgx-mobile_nav_overlay a {
        color: #fff;
}

#ssgx-mobile_nav_overlay li {
        list-style-type: none;
        list-style: none;
}

#ssgx-mobile_nav_overlay ul {
        margin: 0px;
        padding: 0px;
        padding-top: 20px;
}


#ssgx-mobile_nav_overlay .ssgx-divider {
        border-bottom: 1px solid #e5e5e5;
}


button.toggler:active {
outline: none;
border: none;
}

button.toggler:focus {
outline: none;
border: none;
}

#ssgx-mobile_nav_bar_wrapper {
        position: relative; 
        left:0px; 
        top: 0px; 
        height: 40px; 
        width: 100%; 
        z-index: 1499;    
        transition: 0.5s;
        background: rgba(166,192,227,1);
}

#ssgx-mobile_nav_bar_inner {
        position: absolute; 
        width:100%; 
        top:50%;
        transform: translateY(-50%); 
        text-align: center; 
}

.mobile_nav_divider {
        border-top: 1px solid #e5e5e5;    
}

.ssgxmdnzr_no-backdropfilter .ssgx-mobile_nav_bar_inner_active {
        background: rgba(30,30,30,3.95) !important;
              
}

.ssgxmdnzr_backdropfilter .ssgx-mobile_nav_bar_inner_active {
        background: rgba(3,3,3,0.8) !important;
	    -webkit-backdrop-filter:blur(15px) brightness(150%) contrast(60%) !important;       
}


.ssgx-navbar-mobile-noscrollbutbars {
        overflow-y: scroll !important; 
        height: 100% !important;
    /* Keine Ahnung, warum dieser Code nicht funktioniert */
}

.ssgx-navbar-mobile-noscroll {
        overflow: hidden !important; 
        height: 100% !important;
}


#ssgx-wrapper {
        /* Debug */
        /* border:3; 
        border-style: dotted;  
        border-color: red; */
        min-height:300px; 
        padding: 0px; !important; 
        }

img.ssgx_pswp_knopf {
    cursor: zoom-in; 
    
}

/* Code in der main und home besser aufbauen, damit regelmäßige Vergabe möglich */
#main>.uk-container { padding: 20px; }

#footer { padding: 20px; }

#ssgx-wrapper>.uk-container { padding: 20px; }
            /* Alle Elmente die direkt im Wrapper liegen und die Klasse uk-container aufweisen, bekommen ein padding von 20 px;