/* styles */


/* Inhaltsverzeichnis
1. Random
2. Pages
    2.1 index.php
    2.2 Main Page
    2.3 Sub Pages
3. Navigation
	 3.1 Goal Pages
	 3.2 Corona Pages
4. Header
5. Footer
*/


/* ================================== 1. Random ================================== */

* {
    font-family: Verdana, Geneva, sans-serif;
}

html,
body,
main {
    padding: 0;
    margin: 0;
    background: lightblue;
}

body {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    min-height: 100vh;
    -ms-flex-direction: column;
    flex-direction: column;
}


/* ================================== 2. Pages ================================== */


/* ------------------------------ 2.1 index.php ------------------------------ */

.flex-box-theme {
    background: rgba(255, 255, 255, 0.5);
    border: 20px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    -ms-flex: 1;
    flex: 1;
}

.flex-box-theme .wsd {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-left: 50px;
    margin-right: 50px;
    font-size: 30px;
    font-weight: bold;
    text-transform: uppercase;
}

.flex-box-theme .wsd .w {
    color: #4bacc6;
}

.flex-box-theme .wsd .s {
    color: #ffc000;
}

.flex-box-theme .wsd .d {
    color: #c00000;
}


/* ------------------------------ 2.2 Main Pages ------------------------------ */


/* #--- geborgteZukunft.php ---# */


/* flexBox elements */

.flex-box-general-index,
.flex-box-general,
.flex-box-goals {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    flex-wrap: wrap;
    text-align: center;
}

.flex-box-general-index div,
.flex-box-general div,
.flex-box-goals div {
    background: rgba(255, 255, 255, 0.80);
    border: 20px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    flex-basis: 50px;
}

.flex-box-general div,
.flex-box-goals div {
    margin: 50px;
    font-size: 24pt;
}

.flex-box-general div {
    margin-bottom: 120px;
}

.flex-box-general-index div {
    margin-left: 90px;
    margin-right: 90px;
    margin-top: 50px;
    margin-bottom: 50px;
    font-size: 17pt;
}

.flex-box-general-index div img {
    width: 400px;
    height: auto;
}

.flex-box-general div img {
    width: 450px;
    height: 431px;
}

.flex-box-general-index div a,
.flex-box-general div a,
.flex-box-goals div a {
    font-size: 25px;
    /*background-color: transparent;*/
    text-decoration: none;
    color: #555555;
}

.flex-box-general div a,
.flex-box-goals div a {
    font-weight: bold;
    font-size: 20pt;
}

.flex-box-general-index div a {
    font-size: 15pt;
}


/* hover effect */

.flex-box-general-index div:hover,
.flex-box-general div:hover,
.flex-box-goals div:hover {
    animation: scaling-overview 0.15s;
    transform: scale(1.15);
    -moz-transform: scale(1.15);
    -ms-transform: scale(1.15);
    -o-transform: scale(1.15);
    -webkit-transform: scale(1.15);
    background: rgba(255, 255, 255, 1);
}

@keyframes scaling-overview {
    0% {
        transform: scale3d(1, 1, 1);
    }
    100% {
        transform: scale3d(1.15, 1.15, 1.15);
    }
}


/* text */

.text-index {
    margin: 50px;
    text-align: center;
    font-size: 20px;
    line-height: 1.5;
}

.text-index p a {
    color: black;
    /*text-decoration: none;*/
}

.text-index p img {
    width: 30%;
    height: auto;
}

.headline {
    margin-top: 80px;
    text-align: center;
    font-size: 40pt;
    font-weight: bold;
}

.text-index-bottom {
    margin: 50px;
    font-size: 15px;
}

.text-index-bottom p b {
    line-height: 2;
}


/* /--- contact.php ---/ */

.contact-container {
    width: 80%;
    max-width: 1200px;
    margin: 0 auto;
    margin-top: 50px;
    margin-bottom: 50px;
}

.contact-container * {
    box-sizing: border-box;
}

.contact-container div {
    background: rgba(255, 255, 255, 0.60);
    /*border: 20px solid rgba(255, 255, 255, 0.15);*/
    border-radius: 20px;
    padding-bottom: 20px;
}

.contact-container div p {
    padding-top: 20px;
    text-align: center;
    font-size: 30px;
    font-weight: bold;
    color: #3a3a3a;
}

.contact-container div I {
    font-size: 13px;
    font-weight: bold;
    color: #3a3a3a;
}

.flex-outer,
.flex-inner {
    list-style-type: none;
    padding: 0;
}

.flex-outer {
    max-width: 800px;
    margin: 0 auto;
}

.flex-outer li,
.flex-inner {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    -webkit-align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.flex-inner {
    padding: 0 8px;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.flex-outer>li:not(:last-child) {
    margin-bottom: 20px;
}

.flex-outer li label {
    padding: 8px;
    font-weight: 600;
    letter-spacing: .05em;
    /*text-transform: uppercase;*/
    flex: 1 0 120px;
    max-width: 220px;
    font-size: 18px;
    color: #3a3a3a;
}

.flex-outer li label+*,
.flex-inner {
    flex: 1 0 220px;
}

.flex-outer li input,
.flex-outer li textarea {
    padding: 15px;
    border: none;
    border-radius: 10px;
    font-size: 15px;
}

.flex-outer li button {
    margin-left: auto;
    padding: 8px 16px;
    border: none;
    background: rgba(51, 99, 137, 1);
    color: white;
    letter-spacing: .09em;
    font-weight: 600;
    border-radius: 10px;
}

.flex-inner li {
    width: 100px;
}


/* #--- about.php ---# */

.flex-box-theme .both .center {
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
    font-size: 20px;
}

.flex-box-theme .both .center b {
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
    line-height: 2.5;
    font-size: 30px;
    font-weight: bold;
    color: #3a3a3a;
    text-transform: uppercase;
}

.flex-box-theme .both .center .uppercase {
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
    font-size: 21px;
    font-weight: bold;
    line-height: 2.5;
    text-transform: uppercase;
}

.flex-box-theme .both .center a {
    color: black;
}


/* #--- privacy.php ---# */

.flex-box-theme .both .center .subtitle {
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
    font-size: 21px;
    font-weight: bold;
    line-height: 2.5;
    color: #3a3a3a;
    text-transform: uppercase;
}

.flex-box-theme .both .center .subtitle div {
    font-size: 21px;
    text-transform: none;
}

.flex-box-theme .both .center p ul li {
    position: absolute;
    float: left;
}


/* ------------------------------ 2.3 Sub Pages ------------------------------ */

.bild_im_text {
    margin: 40px;
}

.flex-box-theme {
    background: rgba(255, 255, 255, 0.80);
    border: 20px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    margin: 40px;
    -ms-flex: 1;
    flex: 1;
}

.flex-box-theme .both {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-align-items: flex-start;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
}

.flex-box-theme .both .left {
    -ms-flex-pack: left;
    justify-content: left;
    text-align: left;
}

.flex-box-theme .both .left img {
    width: 377px;
}

.flex-box-theme .both .left .play {
    margin-top: 10px;
    width: 377px;
}

.flex-box-theme .text-index p a img:hover,
.flex-box-theme .both .left .play:hover {
    animation: scaling-play 0.05s;
    transform: scale(1.05);
    background: none;
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
    -webkit-transform: scale(1.05);
}

@keyframes scaling-play {
    0% {
        transform: scale3d(1, 1, 1);
    }
    100% {
        transform: scale3d(1.05, 1.05, 1.05);
    }
}

.flex-box-theme .both .right p {
    margin-left: 50px;
    margin-top: 0px;
    font-size: 20px;
    line-height: 1.5;
}

.flex-box-theme .both .right p b {
    font-size: 21px;
    line-height: 2.5;
}

.flex-box-theme .both .right p I {
    font-size: 15px;
}

.flex-box-theme .both .right p a,
.flex-box-theme .both .right p I a {
    color: black;
    /*text-decoration: none;*/
}

.flex-box-theme .both .right ul {
    font-size: 20px;
    line-height: 1.75;
    padding-left: 5em;
}


/* ================================== 3. Navigation ================================== */

.flex-box-nav {
    background: rgba(255, 255, 255, 0.5);
    border: 20px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    -ms-flex: 1;
    flex: 1;
    height: 40px;
}

.flex-box-nav .nav {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-left: 50px;
    margin-right: 50px;
}

/* ------------------------------ 3.1 Goal Pages ------------------------------ */

.flex-box-nav .nav .nav-gg-overview:hover,
.flex-box-nav .nav .nav-goal-1:hover,
.flex-box-nav .nav .nav-goal-2:hover,
.flex-box-nav .nav .nav-goal-3:hover,
.flex-box-nav .nav .nav-goal-4:hover,
.flex-box-nav .nav .nav-goal-5:hover,
.flex-box-nav .nav .nav-goal-6:hover,
.flex-box-nav .nav .nav-goal-7:hover,
.flex-box-nav .nav .nav-goal-8:hover,
.flex-box-nav .nav .nav-goal-9:hover,
.flex-box-nav .nav .nav-goal-10:hover,
.flex-box-nav .nav .nav-goal-11:hover,
.flex-box-nav .nav .nav-goal-12:hover,
.flex-box-nav .nav .nav-goal-13:hover,
.flex-box-nav .nav .nav-goal-14:hover,
.flex-box-nav .nav .nav-goal-15:hover,
.flex-box-nav .nav .nav-goal-16:hover,
.flex-box-nav .nav .nav-goal-17:hover {
    animation: scaling-nav 0.05s;
    transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    background: none;
}

@keyframes scaling-nav {
    0% {
        transform: scale3d(1, 1, 1);
    }
    100% {
        transform: scale3d(1.2, 1.2, 1.2);
    }
}

#button {
    height: 40px;
    width: 40px;
    cursor: pointer;
    border: none;
}

.flex-box-nav .nav .nav-gg-overview #button {
    background: url(../images/pages/media/graphics/gg_nav_1.png);
    background-size: 100% 100%;
}

.flex-box-nav .nav .nav-cg-overview #button {
    background: url(../images/pages/media/graphics/Corona-Global_nav.png);
    background-size: 100% 100%;
}

.flex-box-nav .nav .nav-goal-1 #button {
    background-color: #e5243b;
}

.flex-box-nav .nav .nav-goal-2 #button {
    background-color: #dda63a;
}

.flex-box-nav .nav .nav-goal-3 #button {
    background-color: #4c9f38;
}

.flex-box-nav .nav .nav-goal-4 #button {
    background-color: #c5192d;
}

.flex-box-nav .nav .nav-goal-5 #button {
    background-color: #ff3a21;
}

.flex-box-nav .nav .nav-goal-6 #button {
    background-color: #26bde2;
}

.flex-box-nav .nav .nav-goal-7 #button {
    background-color: #fcc30b;
}

.flex-box-nav .nav .nav-goal-8 #button {
    background-color: #a21942;
}

.flex-box-nav .nav .nav-goal-9 #button {
    background-color: #fd6925;
}

.flex-box-nav .nav .nav-goal-10 #button {
    background-color: #dd1367;
}

.flex-box-nav .nav .nav-goal-11 #button {
    background-color: #fd9d24;
}

.flex-box-nav .nav .nav-goal-12 #button {
    background-color: #bf8b2e;
}

.flex-box-nav .nav .nav-goal-13 #button {
    background-color: #3f7e44;
}

.flex-box-nav .nav .nav-goal-14 #button {
    background-color: #0a97d9;
}

.flex-box-nav .nav .nav-goal-15 #button {
    background-color: #56c02b;
}

.flex-box-nav .nav .nav-goal-16 #button {
    background-color: #00689d;
}

.flex-box-nav .nav .nav-goal-17 #button {
    background-color: #19486a;
}


/* ------------------------------ 3.2 Corona Pages ------------------------------ */

.flex-box-nav .nav .nav-cg-overview:hover,
.flex-box-nav .nav .nav-Malawi-1:hover,
.flex-box-nav .nav .nav-Mali-2:hover,
.flex-box-nav .nav .nav-Nigeria-3:hover,
.flex-box-nav .nav .nav-Kamerun-4:hover,
.flex-box-nav .nav .nav-Uganda-5:hover,
.flex-box-nav .nav .nav-Kenia-6:hover,
.flex-box-nav .nav .nav-Philippinen-7:hover,
.flex-box-nav .nav .nav-Bolivia-8:hover,
.flex-box-nav .nav .nav-Georgia-9:hover,
.flex-box-nav .nav .nav-Atacama-10:hover,
.flex-box-nav .nav .nav-Namibia-11:hover,
.flex-box-nav .nav .nav-Kolumbien-12:hover,
.flex-box-nav .nav .nav-Ukraine-13:hover,
.flex-box-nav .nav .nav-BMZ-14:hover, {
    animation: scaling-nav 0.05s;
    transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    background: none;
}

@keyframes scaling-nav {
    0% {
        transform: scale3d(1, 1, 1);
    }
    100% {
        transform: scale3d(1.2, 1.2, 1.2);
    }
}

#button {
    height: 40px;
    width: 40px;
    cursor: pointer;
    border: none;
}

.flex-box-nav .nav .nav-cg-overview #button {
    background: url(../images/pages/media/graphics/Corona-Global_nav.png);
    background-size: 100% 100%;
}

.flex-box-nav .nav .nav-Malawi-1 #button {
    background: url(../images/pages/media/graphics/Flag_of_Malawi.png);
    background-size: 100% 100%;
}

.flex-box-nav .nav .nav-Mali-2 #button {
    background: url(../images/pages/media/graphics/Flag_of_Mali.png);
    background-size: 100% 100%;
}

.flex-box-nav .nav .nav-Nigeria-3 #button {
    background: url(../images/pages/media/graphics/Flag_of_Nigeria.png);
    background-size: 100% 100%;
}

.flex-box-nav .nav .nav-Kamerun-4 #button {
    background: url(../images/pages/media/graphics/Flag_of_Cameroon.png);
    background-size: 100% 100%;
}

.flex-box-nav .nav .nav-Uganda-5 #button {
    background: url(../images/pages/media/graphics/Flag_of_Uganda.png);
    background-size: 100% 100%;
}

.flex-box-nav .nav .nav-Kenia-6 #button {
    background: url(../images/pages/media/graphics/Flag_of_Kenia.png);
    background-size: 100% 100%;
}

.flex-box-nav .nav .nav-Philippinen-7 #button {
    background: url(../images/pages/media/graphics/Flag_of_the_Philippines.png);
    background-size: 100% 100%;
}

.flex-box-nav .nav .nav-Boliva-8 #button {
    background: url(../images/pages/media/graphics/Flag_of_Bolivien.png);
    background-size: 100% 100%;
}

.flex-box-nav .nav .nav-Georgia-9 #button {
    background: url(../images/pages/media/graphics/Flag_of_Georgia.png);
    background-size: 100% 100%;
}

.flex-box-nav .nav .nav-Atacama-10 #button {
    background: url(../images/pages/media/graphics/Atacama.png);
    background-size: 100% 100%;
}

.flex-box-nav .nav .nav-Namibia-11 #button {
    background: url(../images/pages/media/graphics/Flag_of_Namibia.png);
    background-size: 100% 100%;
}

.flex-box-nav .nav .nav-Kolumbien-12 #button {
    background: url(../images/pages/media/graphics/Flag_of_Colombia.png);
    background-size: 100% 100%;
}

.flex-box-nav .nav .nav-Ukraine-13 #button {
    background: url(../images/pages/media/graphics/Flag_of_Ukraine.png);
    background-size: 100% 100%;
}

.flex-box-nav .nav .nav-BMZ-14 #button {
    background: url(../images/pages/media/graphics/Flag_of_Uganda.png);
    background-size: 100% 100%;
}


/* ================================== 4. Header ================================== */

header {
    width: 100%;
    height: 300px;
    background: linear-gradient(to top, rgba(173, 216, 230, 1), rgba(255, 255, 255, 0) 50%), url(../images/pages/header/header_2t.png);
    background-size: 100% 100%;
    -ms-flex: auto;
    flex: auto;
}

header .header-container {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

header .header-container .logo-aul-t {
    -webkit-align-items: flex-start;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -ms-flex-pack: left;
    justify-content: left;
    margin: 8px;
    opacity: 0;
}

header .header-container .logo-future {
    -webkit-align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    /*display: inline-block;
margin-left: 34.25%;
margin-top: 1%;
padding: 0;*/
}

header .header-container .logo-aul {
    -webkit-align-items: flex-start;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -ms-flex-pack: right;
    justify-content: right;
    margin: 8px;
    /*position: relative;
margin: 5px;
float: right;*/
}


/* ================================== 5. Footer ================================== */

footer {
    width: 100%;
    height: 4em;
    background: rgba(51, 99, 137, 1);
    /*background: linear-gradient(to top, rgba(51, 99, 137, 1), rgba(255, 255, 255, 0)100%);*/
    -ms-flex: 1;
    flex: 1;
}

footer .footer-container {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    justify-content: center;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

footer .footer-container div {
    margin: 20px;
    font-size: 20px;
}

footer .footer-container div a {
    margin-left: 15px;
    margin-right: 15px;
    text-decoration: none;
    color: #ffffff;
}