/* su-main */

.top-container .img {
    background-color: white;
    padding: 0;
    text-align: left;
    height: auto;
}

html body {
    height: 100%;
    width: 100%;
    font-family: Helvetica, Arial, Verdana, Georgia;
    line-height: 1.7rem;
    font-size: 1.15rem;
    -webkit-font-smoothing: antialiased;
    color: #333333;
    background-color: transparent;
    overflow-y: scroll;
    margin: 0 auto;
}

.container-m {
    background-color: transparent;
    margin-left: auto;
    margin-right: auto;
    width: 75%;
    text-align: left;
}

.maintext {
    background-color: transparent;
    margin-left: auto;
    margin-right: auto;
    width: 75%;
    text-align: left;
}

.maintext-0 {
    background-color: transparent;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    text-align: left;
}

.columntext {
    background-color: white;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    text-align: left;
}


/* Hyperlinks */

a,
a:visited,
a:focus,
a:active,
a:link {
    color: steelblue;
    text-decoration: none;
}


/*
a:hover {
    color: lightsteelblue;
    text-decoration: none;
}
*/


/* Blockquote */

.blockquote {
    margin-left: 0.75em;
    font-style: italic;
    font-family: Helvetica, Arial, Verdana, Georgia;
    border-left: 3px solid;
    border-color: steelblue;
    padding-left: 15px;
}


/* Header tags */

h1 {
    font-size: 22px;
    line-height: 1.2em;
}

h2 {
    font-size: 15px;
}


/* Container holding the image and the text */

.container {
    position: relative;
    text-align: left;
    color: transparent;
}

.bottom-left {
    position: absolute;
    bottom: 8px;
    left: 10px;
    background-color: black;
    padding: 5px 10px;
}

.top-left {
    position: absolute;
    top: 8px;
    left: 16px;
}

.top-right {
    position: absolute;
    top: 8px;
    right: 16px;
}

.bottom-right {
    position: absolute;
    bottom: 8px;
    right: 16px;
}

.centered-left {
    position: absolute;
    top: 50%;
    left: 10px;
    /* Original: left: 50%; */
    transform: translate(0px, -50%);
    /* Original: transform: translate(-50%, -50%); */
    background-color: black;
    /* opacity: 50%; */
    padding: 5px 10px;
}

.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* background-color: black; */
    /* opacity: 50%; */
    /* padding: 5px 10px; */
}


/* End Container holding the image and the text */


/* Column-based flex */

* {
    box-sizing: border-box;
}


/* Create two equal columns that floats next to each other */

.column {
    float: left;
    width: 50%;
    padding: 10px;
}


/* Clear floats after the columns */

.row:after {
    content: "";
    display: table;
    clear: both;
}


/* Responsive layout - makes a 1 column-layout instead of 2 columns */

@media screen and (max-width: 900px) {
    .column {
        width: 50%;
        /* font-size:10px; */
    }
}


/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */

@media screen and (max-width: 700px) {
    .column {
        width: 100%;
        font-size:10px;
    }
}


/* End column-based flex */


/* Flex-based flex */

* {
    box-sizing: border-box;
}

.flex-container0 {
    /* width: 243px; -- for max. 600px will be 243px */
    /* width: 303px; -- for more than 600px will be 303px */
	width:303px;
    display: flex;
    flex-wrap: nowrap;
    font-size: 15px;
    text-align: left;
}
/*Logo width for max. 600px */
@media screen and (max-width: 600px) {
	div.flex-container0 {
        width:243px;
    }
}

.flex-item-left0 {
    /* 33px Breite */
    /*background-color: white; --not needed*/
    /*padding: 0px;*/
    flex: 0;
}

.flex-item-middle0 {
    /* 30px Breite */
    /*background-color: white; --not needed*/
    /*padding: 0px;*/
    flex: 0;
}

/* --for max. width of 600px --> width:180px */
/* --for width more than 600px --> width:240px */
.flex-item-right0 {
    /*background-color: white; --not needed*/
    /*padding: 0px;*/
    flex: auto;
}


/* If the screen size is 600px wide or less, set the font-size of <div> to different pixel values */

@media screen and (max-width: 600px) {
    div.flex-container0 {
        font-size: 12px; 
    }
}

.flex-container1 {
    display: flex;
    flex-wrap: wrap;
    font-size: 14px;
    text-align: center;
}

.flex-item-left1 {
    background-color: white;
    padding: 5px;
    flex: 50%;
}

.flex-item-right1 {
    background-color: white;
    padding: 5px;
    flex: 50%;
}

.flex-container2 {
    display: flex;
    flex-wrap: wrap;
    font-size: 15px;
    text-align: center;
}

.flex-item-left2 {
    background-color: white;
    padding: 10px;
    flex: 20%;
}

.flex-item-middle2 {
    background-color: grey;
    padding: 10px;
    flex: 60%;
}

.flex-item-right2 {
    background-color: white;
    padding: 10px;
    flex: 20%;
}

.flex-container3 {
    display: flex;
    flex-wrap: wrap;
    font-size: 0.9em;
    line-height: 1.1em;
    text-align: left;
    -webkit-font-smoothing: antialiased;
}

.flex-item-left3 {
    background-color: white;
    padding: 0px;
    flex: 33%;
}

.flex-item-middle3 {
    background-color: rgb(245, 245, 245 );
    padding: 0px;
    flex: 33%;
}

.flex-item-right3 {
    background-color: white;
    padding: 0px;
    flex: 33%;
}

.flex-container4 {
    display: flex;
    flex-wrap: wrap;
    font-size: 0.9em;
    line-height: 1.1em;
    text-align: left;
}

.flex-item-left4 {
    background-color: rgba(245, 245, 245, 0.750);
    padding: 0px;
    flex: 33%;
    }

.flex-item-middle4 {
    background-color: white;
    padding: 0px;
    flex: 33%;
}

.flex-item-right4 {
    background-color: whitesmoke;
    padding: 0px;
    flex: 33%;
}

.flex-container5 {
    display: flex;
    flex-wrap: wrap;
    font-size: 0.9em;
    line-height: 1.1em;
    text-align: left;
}

.flex-item-left5 {
    background-color: white;
    padding: 0px;
    flex: 33%;
}

.flex-item-middle5 {
    background-color: whitesmoke;
    padding: 0px;
    flex: 33%;
}

.flex-item-right5 {
    background-color: white;
    padding: 0px;
    flex: 33%;
}

.flex-container6 {
    display: flex;
    flex-wrap: wrap;
    text-align: left;
}

.flex-item-left6 {
    background-color: white;
    flex: 35%;
}

.flex-item-right6 {
    background-color: white;
    flex: 65%;
}

.flex-container7 {
    display: flex;
    flex-wrap: wrap;
    text-align: left;
}

.flex-item-left7 {
    background-color: white;
    flex: 50%;
}

.flex-item-right7 {
    background-image: linear-gradient(90deg, white 99%, lightgrey 99%);
    /* background-color: rgba(255, 0, 0, 0.5); */
    text-align: right;
    flex: 50%;
}

/* Responsive layout - makes a one column-layout instead of a three-column layout */

@media (max-width: 600px) {
    .flex-item-right3,
    .flex-item-middle3,
    .flex-item-left3 {
        flex: 100%;
    }
}

@media (max-width: 600px) {
    .flex-item-right4,
    .flex-item-middle4,
    .flex-item-left4 {
        flex: 100%;
    }
}

@media (max-width: 600px) {
    .flex-item-right5,
    .flex-item-middle5,
    .flex-item-left5 {
        flex: 100%;
    }
}


/* Responsive layout - makes a one column-layout instead of a two-column layout */

@media (max-width: 600px) {
    .flex-item-right1,
    .flex-item-left1 {
        flex: 100%;
    }
}

@media (max-width: 600px) {
    .flex-item-right6,
    .flex-item-left6 {
        flex: 100%;
    }
}

@media (max-width: 600px) {
    .flex-item-right7,
    .flex-item-left7 {
        text-align: left;
        flex: 100%;
    }
}


/* Responsive layout - makes a one column-layout instead of a three-column layout */

@media (max-width: 800px) {
    .flex-item-middle2 {
        flex: 100%;
    }
}


/* End flex-based flex */


/* If the screen size is 601px wide or more, set the font-size of <div> to 20px */

@media screen and (min-width: 601px) {
     div.maintext {
        font-size: 20px;
    } 
}

@media screen and (max-width: 700px) {
    div.top-container .img {
        background-color: transparent;
        line-height: 1.3em;
        padding: 0;
        text-align: left;
        height: auto;
    }
}

@media screen and (max-width: 700px) {
    div.container-m {
        background-color: transparent;
        line-height: 1.3em;
        margin-left: auto;
        margin-right: auto;
        width: 95%;
        text-align: left;
    }
}


/* If the screen size is 600px wide or less, set the font-size of <div> to 16px and width to 85% */

@media screen and (max-width: 700px) {
    div.maintext {
        font-size: 16px;
        line-height: 1.3em;
        /* Check this out */
        width: 95%;
    }
}

@media screen and (max-width: 700px) {
    div.columntext {
        font-size: 16px;
        line-height: 1.3em;
        /* Check this out */
        width: 100%;
    }
}


/* Width 90% or @media screen 100% */

.imagewide90 {
    background-color: #ffffff;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
    text-align: left;
}

@media screen and (max-width: 700px) {
    div.imagewide90 {
        background-color: #ffffff;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        text-align: center;
    }
}


/* Width 100% or @media screen 100% */

.imagewide100 {
    background-color: #ffffff;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    text-align: left;
}

@media screen and (max-width: 700px) {
    div.imagewide100 {
        background-color: #ffffff;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        text-align: center;
    }
}

/* Width 100%, if @media screen max. 600px 50% */

.imagewide100-75 {
    background-color: #ffffff;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    text-align: left;
}

@media screen and (max-width: 600px) {
    div.imagewide100-75 {
        background-color: #ffffff;
        margin-left: 0%;
        margin-right: auto;
        width: 75%;
        text-align: left;
    }
}


/* Width 70% or @media screen 100% */

.imagewide70 {
    background-color: #ffffff;
    margin-left: auto;
    margin-right: auto;
    width: 70%;
    text-align: left;
}

@media screen and (max-width: 700px) {
    div.imagewide70 {
        background-color: #ffffff;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        text-align: center;
    }
}


/* 100% wide image */

.imagewide100 {
    background-color: #ffffff;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    text-align: center;
}


/* Image centered */

.imagewide {
    background-color: #ffffff;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}


/* Width 75% or @media screen 100% */

.imagewide75-100 {
    background-color: #ffffff;
    margin-left: auto;
    margin-right: auto;
    width: 75%;
    text-align: center;
}

@media screen and (max-width: 700px) {
    div.imagewide75-100 {
        background-color: #ffffff;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        text-align: center;
    }
}

/* Width 65% or @media screen 100% */

.imagewide65-100 {
    background-color: #ffffff;
    margin-left: auto;
    margin-right: auto;
    width: 65%;
    text-align: center;
}

@media screen and (max-width: 700px) {
    div.imagewide65-100 {
        background-color: #ffffff;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        text-align: center;
    }
}

/* Width 50% or @media screen 100% */

.imagewide50-100 {
    background-color: #ffffff;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    text-align: center;
}

@media screen and (max-width: 700px) {
    div.imagewide50-100 {
        background-color: #ffffff;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        text-align: center;
    }
}


/* Width 60% or @media screen 100% */

.imagewide60-100 {
    background-color: #ffffff;
    margin-left: auto;
    margin-right: auto;
    width: 60%;
    text-align: center;
}

@media screen and (max-width: 700px) {
    div.imagewide60-100 {
        background-color: #ffffff;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        text-align: center;
    }
}

.iframe-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
}

.iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding-left: 25px;
    padding-right: 25px;
    padding-bottom: 25px;
}

@media screen and (max-width: 700px) {
    div.center {
        display: block;
        margin-left: auto;
        margin-right: auto;
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 25px;
    }
}

.calwidth {
    width: 8%;
}

@media screen and (max-width: 700px) {
    div.calwidth {
        width: 15%;
    }
}

.cmdweiter {
    width: 15%;
    padding-top: 15px;
}

@media screen and (max-width: 700px) {
    div.cmdweiter {
        width: 30%;
        padding-top: 15px;
    }
}

.icoadobe {
    width: 4%;
}

@media screen and (max-width: 700px) {
    div.icoadobe {
        width: 8%;
    }
}