/* fonts */

/* exo-100 - latin */
/* exo-100italic - latin_latin-ext */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Exo';
    font-style: italic;
    font-weight: 100;
    src: url('../fonts/exo-v21-latin_latin-ext-100italic.eot');
    /* IE9 Compat Modes */
    src: url('../fonts/exo-v21-latin_latin-ext-100italic.eot?#iefix') format('embedded-opentype'),
        /* IE6-IE8 */
        url('../fonts/exo-v21-latin_latin-ext-100italic.woff2') format('woff2'),
        /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
        url('../fonts/exo-v21-latin_latin-ext-100italic.woff') format('woff'),
        /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
        url('../fonts/exo-v21-latin_latin-ext-100italic.ttf') format('truetype'),
        /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
        url('../fonts/exo-v21-latin_latin-ext-100italic.svg#Exo') format('svg');
    /* Legacy iOS */
}

/* exo-200 - latin_latin-ext */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Exo';
    font-style: normal;
    font-weight: 200;
    src: url('../fonts/exo-v21-latin_latin-ext-200.eot');
    /* IE9 Compat Modes */
    src: url('../fonts/exo-v21-latin_latin-ext-200.eot?#iefix') format('embedded-opentype'),
        /* IE6-IE8 */
        url('../fonts/exo-v21-latin_latin-ext-200.woff2') format('woff2'),
        /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
        url('../fonts/exo-v21-latin_latin-ext-200.woff') format('woff'),
        /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
        url('../fonts/exo-v21-latin_latin-ext-200.ttf') format('truetype'),
        /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
        url('../fonts/exo-v21-latin_latin-ext-200.svg#Exo') format('svg');
    /* Legacy iOS */
}

/* exo-200italic - latin_latin-ext */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Exo';
    font-style: italic;
    font-weight: 200;
    src: url('../fonts/exo-v21-latin_latin-ext-200italic.eot');
    /* IE9 Compat Modes */
    src: url('../fonts/exo-v21-latin_latin-ext-200italic.eot?#iefix') format('embedded-opentype'),
        /* IE6-IE8 */
        url('../fonts/exo-v21-latin_latin-ext-200italic.woff2') format('woff2'),
        /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
        url('../fonts/exo-v21-latin_latin-ext-200italic.woff') format('woff'),
        /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
        url('../fonts/exo-v21-latin_latin-ext-200italic.ttf') format('truetype'),
        /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
        url('../fonts/exo-v21-latin_latin-ext-200italic.svg#Exo') format('svg');
    /* Legacy iOS */
}

/* exo-300 - latin_latin-ext */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Exo';
    font-style: normal;
    font-weight: 300;
    src: url('../fonts/exo-v21-latin_latin-ext-300.eot');
    /* IE9 Compat Modes */
    src: url('../fonts/exo-v21-latin_latin-ext-300.eot?#iefix') format('embedded-opentype'),
        /* IE6-IE8 */
        url('../fonts/exo-v21-latin_latin-ext-300.woff2') format('woff2'),
        /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
        url('../fonts/exo-v21-latin_latin-ext-300.woff') format('woff'),
        /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
        url('../fonts/exo-v21-latin_latin-ext-300.ttf') format('truetype'),
        /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
        url('../fonts/exo-v21-latin_latin-ext-300.svg#Exo') format('svg');
    /* Legacy iOS */
}

/* exo-regular - latin_latin-ext */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Exo';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/exo-v21-latin_latin-ext-regular.eot');
    /* IE9 Compat Modes */
    src: url('../fonts/exo-v21-latin_latin-ext-regular.eot?#iefix') format('embedded-opentype'),
        /* IE6-IE8 */
        url('../fonts/exo-v21-latin_latin-ext-regular.woff2') format('woff2'),
        /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
        url('../fonts/exo-v21-latin_latin-ext-regular.woff') format('woff'),
        /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
        url('../fonts/exo-v21-latin_latin-ext-regular.ttf') format('truetype'),
        /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
        url('../fonts/exo-v21-latin_latin-ext-regular.svg#Exo') format('svg');
    /* Legacy iOS */
}

/* exo-italic - latin_latin-ext */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Exo';
    font-style: italic;
    font-weight: 400;
    src: url('../fonts/exo-v21-latin_latin-ext-italic.eot');
    /* IE9 Compat Modes */
    src: url('../fonts/exo-v21-latin_latin-ext-italic.eot?#iefix') format('embedded-opentype'),
        /* IE6-IE8 */
        url('../fonts/exo-v21-latin_latin-ext-italic.woff2') format('woff2'),
        /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
        url('../fonts/exo-v21-latin_latin-ext-italic.woff') format('woff'),
        /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
        url('../fonts/exo-v21-latin_latin-ext-italic.ttf') format('truetype'),
        /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
        url('../fonts/exo-v21-latin_latin-ext-italic.svg#Exo') format('svg');
    /* Legacy iOS */
}

/* style.css */

body,
html {
    height: 100%;
    margin: 0;
    font-family: 'Exo';
    font-style: normal;
    font-weight: 100;
}

* {
    margin: 0;
    padding: 0;
}

.container {
    width: 100%;
}

.goethe {
    background: url(../images/goethe.jpg) fixed 100%;

}

.konfuzius {
    background: url(../images/chinese-garden.jpg) fixed 100%;

}

/* spinner */

.spinner-wrapper {
    background-color: #181818;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.9s;
}

.spinner-border {
    width: 60px;
    height: 60px;
    border: none;
    background: url(../images/logo-60.png);
    background-repeat: no-repeat;

}

/* spinner ende*/

/* SCROLLBAR STYLE*/
::-webkit-scrollbar {
    width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #272727;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #9BC7EC;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* SCROLLBAR STYLE ende*/

.full-screen-section {
    height: 100vh;
    background-color: #000;
    /* 100% of the viewport height */
}

#section1 {
    background: url("../images/gestresster-junge.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center bottom;
    background-attachment: fixed 100%;
    display: -webkit-box; /* Für ältere Versionen von Safari */
    display: -webkit-flex; /* Für ältere Versionen von Safari */
    display: flex;
}

#section1 .fa-long-arrow-down {
    font-size: 20px;
    margin-top: 14px;
    color: #9BC7EC;
    display: block;
    -webkit-transition: color 1s ease-out;
    -moz-transition: color 1s ease-out;
    -o-transition: color 1s ease-out;
    transition: color 1s ease-out;
}

#section1 .fa-long-arrow-down:hover {
    color: #ffffff;

}

#section1 h1 {
    font-size: 40px;
    margin-top: 10rem;
    margin-bottom: 0;
    padding: 0;
    color: #9BC7EC;
    -webkit-transition: color 1s ease-out;
    -moz-transition: color 1s ease-out;
    -o-transition: color 1s ease-out;
    transition: color 1s ease-out;
}

#section1 a {
    font-size: 15px;
    margin-top: 10px;
    color: #9BC7EC;
    display: inline-block;
    text-decoration: none;
    display: block;
    -webkit-transition: color 1s ease-out;
    -moz-transition: color 1s ease-out;
    -o-transition: color 1s ease-out;
    transition: color 1s ease-out;
}

#section1 p {
    color: #fff;
    font-size: 18px;
    z-index: 9000;
}

#section3 img {
    margin-top: 50px;
}

#copyright {
    width: 100%;

}

.spalte img {
    padding-top: 2px;
    max-width: 100%;
    height: auto;
    padding: 10px;
    margin: 10px;
    border: 1px solid #9BC7EC;
}

.spalte {
    display: flex;
    justify-content: left;
    align-items:baseline;
    flex-direction: column;
}

#datenschutz {
    width: 100%;
}

#datenschutz a {
    text-decoration: none;
    color: #9BC7EC;
    display: block;
}

/* styles */
.tutor-blue {
    color: #9BC7EC;
    line-height: 1.2;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Exo';
    font-style: normal;
    font-weight: 300;
    line-height: 2.5;
}

.block {
    display: block;
}

.tutor-blue-big {
    color: #222;
    background: #9BC7EC;
}

.funfhundert {
    width: 500px;
    height: 500px;
}

.list-group {
    border: none;
}

.list-group-item {
    color: azure;
    background: transparent;
    border-bottom: 1px solid #181818;
}

/* styles ende*/
/* Navbar */
.navbar {
    background-color: transparent;
}

/* Set your desired background color for the navbar */

.navbar a {
    color: #fff;
    margin: 0 15px 0 15px;
    -webkit-transition: color 1s ease-out;
    -moz-transition: color 1s ease-out;
    -o-transition: color 1s ease-out;
    transition: color 1s ease-out;

    /* Set your desired background color for the navbar */
}

.navbar a:hover {
    color: #9BC7EC;
    /* Set your desired background color for the navbar */
}

.navbar-scrolled {
    background-color: #9BC7EC;
    /* Set your desired background color for the navbar */
}

.navbar-scrolled a {
    color: #fff;

    /* Set your desired background color for the navbar */
}

.navbar-scrolled a:hover {
    color: #222;
    /* Set your desired background color for the navbar */
}

/* Navbar Ende*/

/* Social Icons*/

.social-icons {
    font-size: 24px;
    margin-top: 10px;
    text-align: center;

}

.social-icons a {
    color: #181818;
    /* Set your desired color for the social icons */
    margin: 10px 10px 10px 0;
    text-decoration: none;
    -webkit-transition: color 1s ease-out;
    -moz-transition: color 1s ease-out;
    -o-transition: color 1s ease-out;
    transition: color 1s ease-out;
}

.social-icons a:hover {
    color: #9BC7EC;
    margin: 10px 10px 10px 0;margin: 10px 10px 10px 0;
}


.social-icons ul li {
    display: inline;
    list-style-type: none;
}

/* Social Icons Ende*/

/* Footer*/

footer a {
    color: azure;
    text-decoration: none;
}

footer .infobox a {
    color: azure;
    display: inline-block;
    font-size: 20px;
    margin: 20px;
    text-align: center;
    text-decoration: none;
    -webkit-transition: color 1s ease-out;
    -moz-transition: color 1s ease-out;
    -o-transition: color 1s ease-out;
    transition: color 1s ease-out;
}

footer .infobox a:hover {
    color: #9BC7EC;

}


/* Footer Ende*/

@media (min-width: 1200px) and (max-width: 1400px) {

    #section2 img {
        width: 350px;
        height: 410px
    }

    #section3 img {
        width: 400px;
        height: 400px;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {

    #section2 img {
        width: 300px;
        height: 351px
    }

    #section3 img {
        width: 350px;
        height: 350px;
    }
}

@media (min-width: 769px) and (max-width: 991.99px) {

    .navbar {
        background-color: #9BC7EC;
        text-align: center;
    }

    .navbar a {
        color: #313131;
        line-height: 2;

    }

    .navbar a:hover,
    a:focus {
        color: #ffffff;
        /* Set your desired background color for the navbar */
    }

    #section2 img {
        width: 260px;
        height: 305px;
    }

    #section3 img {
        width: 300px;
        height: 300px;
    }

    footer .infobox a {
        line-height: 2.2;
        font-size: 24px;
        margin: 15px;
    }


}

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


    .navbar {
        background-color: #9BC7EC;
        text-align: center;
        margin: 0;
        padding: 5px;
    }

    .navbar a {
        color: #313131;
        line-height: 2;
    }

    .navbar a:hover,
    a:focus {
        color: #ffffff;
        /* Set your desired background color for the navbar */
    }

    #section1 .lead {
        font-size: 16px;
    }

    #section1 h1 {
        font-size: 24px;
    }

    #section2 img {
        width: 260px;
        height: 305px;
    }

    #section3 img {
        width: 300px;
        height: 300px;
        margin-bottom: 40px;
        margin-top: 0;
    }

    .social-icons a {
        margin: 10px 15px 10px 0;
    }

    .social-icons a:hover,a:focus {
        margin: 10px 15px 10px 0;
    }

    .social-icons ul li {
        display: list-item;
        line-height: 2;
    }

    footer .infobox a {
        line-height: 2.2;
        font-size: 22px;
        margin: 15px;
    }


}

@media (max-width: 575.98px) {

    .navbar {
        background-color: #9BC7EC;
        text-align: center;
        margin: 0;
        padding: 0;
    }

    .navbar img {
        width: 35px;
    }

    .navbar-toggler-icon {
        width: 1em;
        height: 1em;
    }

    .navbar a {
        color: #313131;
        line-height: 1.4;

    }

    .navbar a:hover,
    a:focus {
        color: #ffffff;
        /* Set your desired background color for the navbar */
    }

    #section1 .lead {
        font-size: 16px;
    }

    #section1 h1 {
        font-size: 22px;
        margin-top: 7rem;
    }

    #section2 img {
        width: 200px;
        height: 234px;
        text-align: center;
    }

    #section3 img {
        width: 300px;
        height: 300px;
        margin-bottom: 40px;
        margin-top: 0;
    }

    .social-icons a {
        margin: 10px 15px 10px 0;
    }

    .social-icons a:hover,a:focus {
        margin: 10px 15px 10px 0;
    }

    .social-icons ul li {
        display: list-item;
        line-height: 2;
    }

    footer .infobox a {
        line-height: 1.4;
        font-size: 20px;
        margin: 10px;
    }
}