/*
* SchoolAwesome CSS v1.0 (https://byflamez.de)
* Copyright 2018 byFlameZ.de
* Licensed under MIT (https://byflamez.de/mit-licence.txt)
*
* Written for http://www.huttenschule-frankfurt-o.de/
*/

body {
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
color: #7F7F7F;
}

a:hover, a:focus {
text-decoration: none;
}

.strong {
font-weight: bold;
color: #777;
}

.section {
padding: 5px 0;
}

.header {
padding: 5px 0;
}

.header-border {
border-top: 1px solid #337AB7;
}

.header-left {
float: left;
}

.header-title {
font-size: 22px;
font-variant: small-caps;
font-weight: 500;
}

.header-right {
float: right;
text-align: right;
}

.header-right .header-ul {
list-style: none;
padding: 0;
}

.header-right .header-ul li {
margin-left: 10px;
display: inline-block;
list-style: none;
}

.header-right .header-ul li i {
margin-right: 5px;
}

.header-right nav li {
margin-right: 5px;
padding-right: 10px;
border-right: 1px solid #DDD;
}

.header-right nav li:last-child {
margin-right: 0;
padding-right: 0;
border: none;
}

.navbar {
border: 1;
}

.nav>li a {
display: block;
color: #737373;
border-bottom: 1px solid transparent;
transition: all 0.2s;
}

.nav>li a:hover {
background-color: rgba(0, 0, 0, 0.1);
color: #024D8E;
border-bottom: 0px solid #337AB7;
}

.nav>li a:focus {
color: #737373;
}

.nav-border {
border-top: 1px solid #E1E0DF;
}

.nav-bg {
background-color: #F7F7F7;
margin-bottom: 0;
}

.carousel-inner {
background-repeat: no-repeat;
background-position: center;
background-size: cover;
min-height: 500px;
width: 100%;
z-index: -1000;
}

.carousel-caption {
position: static;
}

.carousel-info {
background-color: rgba(0, 0, 0, 0.3);
padding: 20px 20px;
min-height: 210px;
}

.carousel-inner .item {
transition-property: opacity;
}

.carousel-img {
margin: auto;
}

.carousel-indicators {
bottom: 0;
}

.carousel-indicators li {
width: 14px;
height: 14px;
border: 2px solid rgba(255, 255, 255, 0.5);
}

.carousel-indicators .active {
width: 16px;
height: 16px;
background: rgba(255, 255, 255, 0.2);
}

.wp-separator {
background-color: #EEE;
}

.descrip {
font-size: 15px;
text-align: justify;
}

.item {
padding-bottom: 20px;
}

.thumbnail {
border-radius: 0;
}

.footer {
background-color: #337AB7;
color: #EEE;
padding-top: 30px;
}

.foot-geo {
text-align: left;
}

.footer-p {
background-color: #2B679A;
color: #EEE;
padding-top: 20px;
text-align: center;
}

.footer-nav {
display: inline-block;
list-style: none;
}

.footer-nav li {
float: left;
margin-right: 15px;
}

.footer-nav li a {
display: inline-block;
background-color: #EEE;
border-radius: 50%;
font-size: 25px;
height: 45px;
width: 45px;
padding-top: 3px;
transition: all 1s;
}

.footer-nav li a:hover {
background-color: #FFF;
}

.footer-info {
text-align: right;
}

.galerie {
box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.26);
margin-top: 20px;
}

.galerie-img {
max-width: 100%;
margin: auto;
}

.galerie-info {
padding: 20px;
min-height: 180px;
}

.title {
    border-bottom: 1px solid #dedede;
    margin-bottom: 20px;
}

a {
  cursor: pointer;
}

ul.counter {
  counter-reset: section;                /* Erstellt mit jedem ol Element
                                            eine neue Instanz des
                                            Abschnittszählers. */
  list-style-type: none;
}

ul.counter>li::before {
  counter-increment: section;            /* Inkrementiert nur diese Instanz
                                            des Abschnittszählers. */
  content: counters(section,".") ". ";    /* Fügt den Wert aller Instanzen
                                            des Abschnittszählers durch "."
                                            getrennt hinzu. */
                                         /* Falls < IE8 unterstützt werden soll,
                                            sollte sichergestellt werden, dass
                                            kein Leerzeichen nach dem ',' steht. */
}

@media (min-width: 768px) {

    .brand-pills > li > a {
        border-top-right-radius: 0px;
            border-bottom-right-radius: 0px;
    }

    li.brand-nav.active a:after{
            content: " ";
            display: block;
            width: 0;
            height: 0;
            border-top: 20px solid transparent;
            border-bottom: 20px solid transparent;
            border-left: 9px solid #337ab7;
            position: absolute;
            top: 50%;
            margin-top: -20px;
            left: 100%;
            z-index: 2;
    }
}

#team {
    background: #eee !important;
}

#team .card {
    border: none;
    background: #ffffff;
}

.image-flip:hover .backside,
.image-flip.hover .backside {
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg);
    border-radius: .25rem;
}

.image-flip:hover .frontside,
.image-flip.hover .frontside {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

.mainflip {
    -webkit-transition: 1s;
    -webkit-transform-style: preserve-3d;
    -ms-transition: 1s;
    -moz-transition: 1s;
    -moz-transform: perspective(1000px);
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transition: 1s;
    transform-style: preserve-3d;
    position: relative;
}

.frontside {
    position: relative;
    -webkit-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    z-index: 2;
    margin-bottom: 30px;
}

.panel-shadow {
  -webkit-box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
  -moz-box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
  box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
}

.backside {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: white;
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
    -webkit-box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
    -moz-box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
    box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
}

.frontside,
.backside {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: 1s;
    -webkit-transform-style: preserve-3d;
    -moz-transition: 1s;
    -moz-transform-style: preserve-3d;
    -o-transition: 1s;
    -o-transform-style: preserve-3d;
    -ms-transition: 1s;
    -ms-transform-style: preserve-3d;
    transition: 1s;
    transform-style: preserve-3d;
}

.frontside .card,
.backside .card {
    min-height: 312px;
}

.backside .card a {
    font-size: 18px;
    color: #007b5e !important;
}

.frontside .card .card-title,
.backside .card .card-title {
    color: #007b5e !important;
}

.frontside .card .card-body img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
}


@media screen and (max-width: 768px) {

.header-left, .header-right {
    float: none;
    text-align: center;
}
.header-right {
    display: block;
    width: auto;
}

.navbar-collapse {
    background-color: #EEE;
}
.navbar-toggle {
    border: 1px solid rgb(220, 220, 220);
}

.descrip {
    text-align: start;
}

.footer-geo, .footer-info {
    text-align: center;
}
}

@media screen and (min-width: 768px) {

.nav>li.active {
    background-color: #EAEAEA;
}
.navbar-collapse {
    padding-left: 0;
}
.navbar-nav>li>a {
    padding-top: 15px;
    padding-bottom: 15px;
}
.dropdown-menu {
    padding: 0;
    margin: 0;
    border-radius: 0;
}
.dropdown-menu>li>a {
    padding: 10px 15px;
}

.carousel-caption {
    padding-top: 100px;
}

}