/* CSS Document */
#dynamiccontent {
    float: left;
    width: 100%;
    margin-top: 80px;
    margin-bottom: 80px;
}

#dynamiccontent div {
    float: left;
}

#dynamiccontent .row,
#dynamiccontent .text,
#dynamiccontent .bilder,
#dynamiccontent .dokumente,
#dynamiccontent .videos {
    width: 100%;
}

#dynamiccontent .row {
    margin-bottom: 0;
    box-sizing: border-box;
    float: left;
    width: 100%;
    margin-bottom: 40px;
}

#dynamiccontent .row:last-of-type {
    margin-bottom: 0;
}

#dynamiccontent .text-container-right {
    float: left;
    width: 100%;
    background-color: #F1F1F1;
    padding: 30px;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

#dynamiccontent .text-container-right .h2 {
    font-size: 22px;
}


/* Dokumente */


/* Bilder */
#dynamiccontent img {
    max-width: 100%;
}

#dynamiccontent .bild {
    width: 100%;
    height: auto;

    margin-bottom: 20px;
}

#dynamiccontent .bild.nocolumns {
    width: 340px;
    margin: 0 20px 20px 0;
}

#dynamiccontent .bild.nocolumns:nth-child(2n) {
    margin-right: 0;
}


/* Videos */
#dynamiccontent .video img {
    max-width: 100%;
}

#dynamiccontent .video {
    margin-bottom: 20px;
}

#dynamiccontent .video.adjust.nocolumns {
    margin: 0 20px 20px 0;
    width: 100%;
    height: 378px;
    background-image: url('/modules/DynamicContent/images/video.png');
    background-position: bottom right;
    background-repeat: no-repeat;
}

#dynamiccontent .video.adjust.nocolumns:nth-child(n) {
    margin-right: 0;
}

#dynamiccontent .video.adjust.nocolumns.fancybox {
    height: auto;
}

/* Videos-iframe */
#dynamiccontent .video a {
    position: relative;
    float: left;
    width: 100%;
}

#dynamiccontent .video.adjust.nocolumns img {
    width: 100%;
}

#dynamiccontent .video .play {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 60px; /* Workaround da sonst top: -50% nicht geht? */
}

#dynamiccontent .video .play img {
    position: relative;
    left: -50%;
    top: -50%;
}

#dynamiccontent .video.columns iframe {
    width: 100%;
    height: 100%;
}

#dynamiccontent .video.adjust.nocolumns iframe {
    width: 340px;
    height: 192px;
}

#dynamiccontent .video.adjust.nocolumns > div,
#dynamiccontent .video.adjust.nocolumns > div > div {
    width: 521px !important;
    height: 294px !important;
}

#dynamiccontent .video div {
    float: none;
}


/* Google Maps */
#google_maps {
    width: 100%;
    height: 400px;
}

#googlemaps_link {
    clear: left;
}


#dynamiccontent_inner {
    margin-top: 12px;
}

#gallery-bg,
#gallery-bgtop,
#gallery-bgbtm,
#foobar,
#sidebar-bgtop,
#sidebar-bgbtm {
    width: 100%;
    box-sizing: border-box;
}

/*
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-o-transform: rotate(270deg);
writing-mode: tb-rl;
*/


/* Ausbildungspfeil */
#ausbildungspfeil {
    float: left;
}

#aus-header {
    float: left;
    width: 100%;
}

#ausbildungspfeil #aus-header p {
    color: #444;
    margin-bottom: 15px;
}

#ausbildungspfeil h3 {
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    text-transform: uppercase;
    margin-bottom: 0;
    line-height: 28px;
}

#ausbildungspfeil p {
    font-size: 16px;
    font-weight: normal;
    color: #fff;
    margin-bottom: 0;
    line-height: 28px;
    margin-top: 0;
}

#ausbildungspfeil .float {
    float: left;
}

.widthfixfrench1 {
    width: 250px !important;
}

.widthfixfrench2 {
    width: 230px !important;
}

.widthfixfrench3 {
    width: 240px !important;
}

/* HEADERS */
#one-header,
#two-header,
.star {
    height: 127px;
    color: #fff;
}

#one-header {
    background-color: rgba(229, 139, 65, 0.75);
    width: 300px;
}

#one-star-header i,
#two-star-header i {
    line-height: 40px;
    font-size: 23px;
}

#two-star-header i:first-of-type {
    margin-right: 5px;
}

#two-star-header i:nth-of-type(2n+2) {
    margin-left: 5px;
}

.arrow {
    float: left;
    display: block;
    height: 0px;
    width: 0px;
    border-left: 10px solid transparent;
    border-bottom: 63px solid transparent;
    border-top: 64px solid transparent;
    margin-left: 0px;
}

.arrow.invert {
    margin-left: 0px;
}

#one-header-arrow {
    border-left-color: rgba(229, 139, 65, 0.75);
}

#one-header-arrow-invert {
    border-bottom-color: #005961;
    border-top-color: #005961;
}

#one-star-arrow {
    border-left-color: #005961;
}

#one-star-arrow-invert {
    border-bottom-color: #E58B41;
    border-top-color: #E58B41;
}

#two-header-arrow {
    border-left-color: #E58B41;
}

#two-header-arrow-invert {
    border-bottom-color: #005961;
    border-top-color: #005961;
}

#two-star-arrow {
    border-left-color: #005961;
}


#two-header {
    width: 200px;
    background-color: #E58B41;
}

#one-header,
#two-header {
    padding-top: 5px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 1px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

#one-star-header {
    width: 90px;
}

#two-star-header {
    width: 90px;
}

.star {
    text-align: center;
    background-color: #005961;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 0;
    line-height: 14px;
    padding-top: 43px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

#one-star,
#two-star {
    float: left;
}

/* END HEADER */
#one-sub,
#two-sub,
#zertifikat,
#diplom {
    height: 110px;
    margin-top: 10px;
}

#one-sub,
#two-sub {
    background-color: #E58B41;
    padding-top: 15px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

#one-sub {
    width: 300px;
    background-color: rgba(229, 139, 65, 0.75);
}

#one-sub p,
#two-sub p {
    color: #fff;
    line-height: 28px;
}

#zertifikat,
#diplom {
    background-color: rgba(0, 89, 97, 0.80);
    margin-left: 10px;
}

#zertifikat {
    width: 100px;
}

#zertifikat p,
#diplom p {
    text-align: center;
    line-height: 20px;
    color: #fff;
    float: left;
    position: relative;
    left: 17px;
    display: block;
    bottom: -34px;
    transform: rotate(270deg);
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
}

#two-sub {
    margin-left: 0px;
    padding-left: 20px;
    width: 210px;
}

#diplom {
    width: 100px;
}

#diplom p {
    left: 17px;
}

#dynamiccontent td {
    padding: 0 10px 10px 0;
}

#dynamiccontent td strong {
    float: left;
    margin: 20px 0 0;
}

#dynamiccontent .banner {
    display: block;
    margin-bottom: 60px;
    clear: both;
}

#dynamiccontent .banner__container {
    display: block;
    width: 100%;
    position: relative;
    float: none;
}

#dynamiccontent .banner__figure {
    display: block;
    margin: 0;
    padding: 0;
    float: none;
}

#dynamiccontent .banner__figure img {
    display: block;
    float: none;
    width: 100%;
}

#dynamiccontent .banner__link {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

/**************************************************************************************************
 *
 * #Media Queries
 *
 *************************************************************************************************/

/* Smaller than standard 1024 (devices and browsers) */
@media only screen and (max-width: 1060px) {
    #one-header,
    #one-sub {
        width: 215px;
    }

    #zertifikat {
        width: 70px;
    }

    #zertifikat p,
    #diplom p {
        left: 1px;
        bottom: -27px;
    }

    #diplom p {
        left: 16px;
    }

    #one-header, #one-sub {
        width: 189px;
        height: 85px;
    }

    #one-header,
    #two-header,
    .star {
        height: 83px;
    }

    .star {
        padding-top: 20px;
    }

    #one-star-header {
        width: 60px;
    }

    #ausbildungspfeil p {
        line-height: 22px;
    }

    .arrow {
        border-bottom: 41.5px solid transparent;
        border-top: 41.5px solid transparent;
    }

    #one-sub,
    #two-sub,
    #zertifikat,
    #diplom {
        height: 96px;
    }

    #inhalt .buttons {
        margin-left: 15px;
    }

    .button_text.left.four.columns.alpha.omega,
    .button_text.right.four.columns.alpha.omega.offset-by-two {
        width: 340px;
        padding-left: 0;
    }

    .button_text.right.four.columns.alpha.omega.offset-by-two {
        padding-left: 30px;
    }
}

/**************************************************************************************************
 * Browser normal
 *
 * Greater than 959 ()
 *************************************************************************************************/
@media only screen and (min-width: 960px) {

}


/**************************************************************************************************
 * Browser schmal
 * Smartphone Landscape
 * Smartphone Portrait
 *
 * Smaller than standard 960 (devices and browsers)
 *************************************************************************************************/
@media only screen and (max-width: 959px) {
    #dynamiccontent .video.adjust.columns > div,
    #dynamiccontent .video.adjust.nocolumns > div,
    #dynamiccontent .video.adjust.columns > div > div,
    #dynamiccontent .video.adjust.nocolumns > div > div {
        height: 313px !important;
    }

    /* nine -> 412 */
    #one-header {
        width: 350px;
    }

    #one-star-header {
        width: 90px;
    }

    #one-sub {
        width: 350px;
    }

    #zertifikat {
        width: 100px;
        margin-bottom: 10px;
    }

    #zertifikat p {
        left: 16px;
    }


    #one-star-arrow-invert {
        margin-left: 0;
    }

    #two-header {
        width: 339px;
    }

    #two-sub {
        margin-left: 0;
        width: 350px;
    }

    #inhalt .buttons {
        margin-left: 0;
        margin-top: -50px;
    }

    #inhalt .buttons .button_text.four.columns {
        clear: left;
        margin-left: 0;
        margin-top: 40px;
        width: 100%;
    }

    #inhalt .buttons .button_text.left.four.columns {
        margin-top: 0px;
    }

    .button_text.right.four.columns.alpha.omega.offset-by-two {
        padding-left: 0;
        margin-top: 40px;
    }

}


/**************************************************************************************************
 * Browser schmal
 *
 * Tablet Portrait size to standard 960 (devices and browsers)
 *************************************************************************************************/
@media only screen and (min-width: 768px) and (max-width: 959px) {

}


/**************************************************************************************************
 * Smartphone Landscape
 * Smartphone Portrait
 *
 * All Mobile Sizes (devices and browser)
 *************************************************************************************************/
@media only screen and (max-width: 767px) {
    #dynamiccontent .video.adjust.nocolumns {
        height: 320px;
    }

    #dynamiccontent .video.adjust.columns > div,
    #dynamiccontent .video.adjust.nocolumns > div,
    #dynamiccontent .video.adjust.columns > div > div,
    #dynamiccontent .video.adjust.nocolumns > div > div {
        height: 237px !important;
    }

    #google_maps {
        height: 250px;
    }


    #one-header,
    #one-sub {
        width: 300px;
    }

    #two-header {
        width: 290px;
    }

    #two-sub {
        margin-left: 0;
        width: 300px;
    }

    #one-header, #two-header, .star {
        height: 63px;
    }

    .arrow {
        border-bottom: 31.5px solid transparent;
        border-top: 31.5px solid transparent;
    }

    .star {
        padding-top: 12px;
    }
}


/**************************************************************************************************
 * Smartphone Landscape
 *
 * Mobile Landscape Size to Tablet Portrait (devices and browsers)
 *************************************************************************************************/
@media only screen and (min-width: 480px) and (max-width: 767px) {

}


/**************************************************************************************************
 * Smartphone Portrait
 *
 * Mobile Portrait Size to Mobile Landscape Size (devices and browsers)
 *************************************************************************************************/
@media only screen and (max-width: 479px) {
    #dynamiccontent .video.adjust.nocolumns {
        height: 260px;
    }

    #dynamiccontent .video.adjust.columns > div,
    #dynamiccontent .video.adjust.nocolumns > div,
    #dynamiccontent .video.adjust.columns > div > div,
    #dynamiccontent .video.adjust.nocolumns > div > div {
        height: 169px !important;
    }

    #one-header,
    #one-sub {
        width: 205px;
    }

    #two-header {
        width: 195px;
    }

    #two-sub {
        margin-left: 0;
        width: 205px;
    }

    #two-star-header,
    #one-star-header {
        width: 65px;
    }

    #zertifikat,
    #diplom {
        width: 75px;
    }

    #zertifikat p,
    #diplom p {
        left: 6px;
    }

    #one-header,
    #two-header,
    .star {
        height: 85px;
    }

    .arrow {
        border-bottom: 42.5px solid transparent;
        border-top: 42.5px solid transparent;
    }

    .star {
        padding-top: 22px;
    }

    .button_text.left.four.columns.alpha.omega,
    .button_text.right.four.columns.alpha.omega.offset-by-two {
        width: 100%;
    }

    #inhalt .buttons .button_text a .text {
        font-size: 17px;
    }
}


/**************************************************************************************************
 *
 * Bilder-/Videohöhe in Relation zu Breite
 * & inline-Bild
 *
 *************************************************************************************************/
#dynamiccontent .bild.alpha,
#dynamiccontent .video.alpha {
    clear: left;
}

#dynamiccontent .bild.adjust,
#dynamiccontent .video.adjust {
    overflow: hidden;
}

#dynamiccontent .bild.adjust img,
#dynamiccontent .video.adjust img {
    width: 100%;
}

#dynamiccontent .bild_outer {
    position: relative;
    top: 50%;
}

#dynamiccontent .bild_middle {
    height: 1000px;
    position: relative;
    top: -500px
}

#dynamiccontent .bild_inner {
    height: 1000px;
    display: table-cell;
    vertical-align: middle;
    float: none;
}

/* Browser breit */
/*@media only screen and (min-width: 960px) {*/
#dynamiccontent .bild.adjust.one, #dynamiccontent .video.adjust.one {
    height: 22px;
}

#dynamiccontent .bild.adjust.two, #dynamiccontent .video.adjust.two {
    height: 56px;
}

#dynamiccontent .bild.adjust.three, #dynamiccontent .video.adjust.three {
    height: 90px;
}

#dynamiccontent .bild.adjust.four, #dynamiccontent .video.adjust.four {
    height: 123px;
}

#dynamiccontent .bild.adjust.five, #dynamiccontent .video.adjust.five {
    height: 157px;
}

#dynamiccontent .bild.adjust.six, #dynamiccontent .video.adjust.six {
    height: 191px;
}

#dynamiccontent .bild.adjust.seven, #dynamiccontent .video.adjust.seven {
    height: 225px;
}

#dynamiccontent .bild.adjust.eight, #dynamiccontent .video.adjust.eight {
    height: 258px;
}

#dynamiccontent .bild.adjust.nine, #dynamiccontent .video.adjust.nine {
    height: 292px;
}

#dynamiccontent .bild.adjust.ten, #dynamiccontent .video.adjust.ten {
    height: 326px;
}

#dynamiccontent .bild.adjust.eleven, #dynamiccontent .video.adjust.eleven {
    height: 360px;
}

#dynamiccontent .bild.adjust.twelve, #dynamiccontent .video.adjust.twelve {
    height: 393px;
}

#dynamiccontent .bild.adjust.thirteen, #dynamiccontent .video.adjust.thirteen {
    height: 427px;
}

#dynamiccontent .bild.adjust.fourteen, #dynamiccontent .video.adjust.fourteen {
    height: 461px;
}

#dynamiccontent .bild.adjust.fifteen, #dynamiccontent .video.adjust.fifteen {
    height: 495px;
}

#dynamiccontent .bild.adjust.sixteen, #dynamiccontent .video.adjust.sixteen {
    height: 528px;
}
#dynamiccontent .bilder {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.bild.nine.columns.alpha.omega {
    width: calc((100% - 30px) / 2);
}

/*}*/
/* Browser schmal - Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {
    #dynamiccontent .bild.adjust.one, #dynamiccontent .video.adjust.one {
        height: 15px;
    }

    #dynamiccontent .bild.adjust.two, #dynamiccontent .video.adjust.two {
        height: 42px;
    }

    #dynamiccontent .bild.adjust.three, #dynamiccontent .video.adjust.three {
        height: 69px;
    }

    #dynamiccontent .bild.adjust.four, #dynamiccontent .video.adjust.four {
        height: 96px;
    }

    #dynamiccontent .bild.adjust.five, #dynamiccontent .video.adjust.five {
        height: 123px;
    }

    #dynamiccontent .bild.adjust.six, #dynamiccontent .video.adjust.six {
        height: 150px;
    }

    #dynamiccontent .bild.adjust.seven, #dynamiccontent .video.adjust.seven {
        height: 177px;
    }

    #dynamiccontent .bild.adjust.eight, #dynamiccontent .video.adjust.eight {
        height: 204px;
    }

    #dynamiccontent .bild.adjust.nine, #dynamiccontent .video.adjust.nine {
        height: 231px;
    }

    #dynamiccontent .bild.adjust.ten, #dynamiccontent .video.adjust.ten {
        height: 285px;
    }

    #dynamiccontent .bild.adjust.eleven, #dynamiccontent .video.adjust.eleven {
        height: 385px;
    }

    #dynamiccontent .bild.adjust.twelve, #dynamiccontent .video.adjust.twelve {
        height: 312px;
    }

    #dynamiccontent .bild.adjust.thirteen, #dynamiccontent .video.adjust.thirteen {
        height: 339px;
    }

    #dynamiccontent .bild.adjust.fourteen, #dynamiccontent .video.adjust.fourteen {
        height: 366px;
    }

    #dynamiccontent .bild.adjust.fifteen, #dynamiccontent .video.adjust.fifteen {
        height: 393px;
    }

    #dynamiccontent .bild.adjust.sixteen, #dynamiccontent .video.adjust.sixteen {
        height: 420px;
    }
}

/* Smartphone Landscape - Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {
    #dynamiccontent .bild.adjust, #dynamiccontent .video {
        height: 217px;
    }
}

/* Smartphone Portrait - Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {
    #dynamiccontent .bild.adjust, #dynamiccontent .video {
        height: 155px;
    }
}