/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 360px)
and (max-device-width : 480px){

    
       
    .container {
        width: 320px;
    }

    /*NAVIGATION*/
    .navigation .show-for-small-only,
    .headerStyles .show-for-small-only{
        display: block !important;
        color: #FFF;
        text-align: center;
        font-size: 24px;
    }


    .navigation {
        margin-top: 0px;
        z-index: 90;
        color: #fff;
        width: 270px;
        height: auto;
        min-height: 100%;
        position: absolute;
        left: -100%;
        top: 0px;
        background-color: #811743;
        overflow-y: scroll;
    }

    .navigation ul {
        margin-top: 30px;
        float: left;
        padding-left: 15px;
    }

    .navigation ul li a{
        color: #FFF;
    }

    .navigation ul li a:hover {
        color: #FFF;
    }

    .navigation ul li{
        float: none;
        margin-bottom: 10px;
    }

    .navigation ul li:after {
        content: "";
    }

    .navigation li.deeper.parent ul {
        display: block;
        position: relative;
        width: 100%;
    }

    .navigation ul li:nth-child(2),
    .navigation ul li:nth-child(4) {
        height: 20px;
    }

    .collapse li:nth-child(2),
    .collapse li:nth-child(4) {
        height: auto !important;
    }

    .navigation li.deeper.parent ul {
        height: auto;
        overflow: hidden;
    }

    .navigation .submenu {
        position: relative;
        font-size: 24px;
        left: 205px;
        top: -20px;
        width: 20px;
    }

    .collapsed {
        max-height: 0;
        transition: max-height 0.25s ease-out;
    }

    .collapse {
        max-height: 500px;
        transition: max-height 0.25s ease-in;
    }

    .toggleMenu{
        position: relative !important;
        top: 65px !important;
        right: -110px !important;
    }

    .svg-menu-toggle {
        fill: #811743;
        pointer-events: all;
        cursor: pointer;
    }
    .svg-menu-toggle .bar {
        -webkit-transform: rotate(0) translateY(0) translateX(0);
        -ms-transform: rotate(0) translateY(0) translateX(0);
        -o-transform: rotate(0) translateY(0) translateX(0);
        -moz-transform: rotate(0) translateY(0) translateX(0);
        transform: rotate(0) translateY(0) translateX(0);
        opacity: 1;
        -webkit-transform-origin: 20px 10px;
        -ms-transform-origin: 20px 10px;
        -o-transform-origin: 20px 10px;
        -moz-transform-origin: 20px 10px;
        transform-origin: 20px 10px;
        -webkit-transition: -webkit-transform 0.4s ease-in-out, opacity 0.2s ease-in-out;
        -ms-transition: -webkit-transform 0.4s ease-in-out, opacity 0.2s ease-in-out;
        -o-transition: -webkit-transform 0.4s ease-in-out, opacity 0.2s ease-in-out;
        -moz-transition: -webkit-transform 0.4s ease-in-out, opacity 0.2s ease-in-out;
        transition: transform 0.4s ease-in-out, opacity 0.2s ease-in-out;
    }
    .svg-menu-toggled .bar:nth-of-type(1) {
        -webkit-transform-origin: 20px 10px;
        -ms-transform-origin: 20px 10px;
        -o-transform-origin: 20px 10px;
        -moz-transform-origin: 20px 10px;
        transform-origin: 20px 10px;
    }
    .svg-menu-toggled .bar:nth-of-type(3) {
        -webkit-transform-origin: 20px 20px;
        -ms-transform-origin: 20px 20px;
        -o-transform-origin: 20px 20px;
        -moz-transform-origin: 20px 20px;
        transform-origin: 20px 20px;
    }

    .svg-menu-toggled .bar:nth-of-type(1) {
        -webkit-transform: rotate(-45deg) translateY(0) translateX(0);
        -ms-transform: rotate(-45deg) translateY(0) translateX(0);
        -o-transform: rotate(-45deg) translateY(0) translateX(0);
        -moz-transform: rotate(-45deg) translateY(0) translateX(0);
        transform: rotate(-45deg) translateY(0) translateX(0);
    }
    .svg-menu-toggled .bar:nth-of-type(2) {
        opacity: 0;
    }
    .svg-menu-toggled .bar:nth-of-type(3) {
        -webkit-transform: rotate(45deg) translateY(0em) translateX(0em);
        -ms-transform: rotate(45deg) translateY(0em) translateX(0em);
        -o-transform: rotate(45deg) translateY(0em) translateX(0em);
        -moz-transform: rotate(45deg) translateY(0em) translateX(0em);
        transform: rotate(45deg) translateY(0em) translateX(0em);
    }

    .inline-svg {
        display: block;
        margin: 0 auto;
    }
    
    .overlay {
        display: none;
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
        position: fixed;
        background-color: rgba(0,0,0,0.5);
    }
    
    
    /*NAVIGATION*/

    /* MODAL BOX */
    
    #sbox-window h2 {
        text-transform: none !important;
    }
    
    .KAS .kasFirst,
    .KAS .kasSecond,
    .KAS .kasThird {
        width: 100% !important;
        clear: both;
    }
    
    #sbox-content .mieterList .mieter {
        width: 320px;
    }
    #container ul {
        width: 320px;
    }
    
    ul.auswahl {
        padding-left: 25px;
    }
    
    #sbox-window {
        width: 90vw !important;
        left: 10px !important;
        top:20px !important;
    }

    #sbox-window img {
        max-width: 320px !important;
    }
    
    #sbox-window .rueboGas .auswahl img,
    #sbox-window .rueboGas #auswahl img {
        max-width: 270px !important;
        height: auto;

    }
    
    #sbox-window .auswahl img {
        max-width: 270px !important;
        height: auto;

    }
    
    h3 {
        font-size: 13pt;
    }
    
    #sbox-window .spanLeft .mLogo img {
        padding-right: 0px !important; 
    }
    
    #sbox-content .mieterList .mieter .mLogo {
        float: none;
    }
    
    #sbox-content .impLeft {
        width: auto;
    }
    
    #sbox-window img {
        padding-right: 0px !important;
    }
    
    #sbox-content .news img {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }

    #sbox-window h2 {
        font-size: 24px;
    }

    #sbox-btn-close {
        right: 10px;
    }
    
    #sbox-content .spanRight {
        width: 320px;
        padding-left: 0px;
    }
    
    #sbox-content .spanLeft {
        width: 320px;
        margin-bottom: 10px;
    }
    
    .onlyImages img {
        width: 320px;
        height: auto;
    }
    
    #sbox-content .infoRight {
        width: 320px;
        margin-left: 0px;
    }
    
    #contact-form legend, #jform_contact_name, #jform_contact_email, #jform_contact_emailmsg, #jform_contact_message {
        width: 320px;
    }
    
    #sbox-content .ruebo .spanRight #ausgabe img {
        width: 280px !important;
    }
    
    #sbox-content .ruebo  .auswahl img{
        height: auto !important;
        width: 120px;
    }
    #sbox-content .spanRight .auswahl {
        width: 320px !important;
    }
    
    .contact-form input, 
    .contact-form textarea{
        background-color: rgba(129,23,67,0.6);
        color: #FFF;
    }
    
    .contactInfo {
        width: 320px !important;
    }
    
    .startImage {
        width: 100% !important;
    }
    
    .contactText {
        width: 100% !important;
    }
    
    .outroImage {
        width: 100% !important;
    }
    
    .philImage1 {
        float: none !important;
    }
    
    .philImage2 {
        float: none !important;
        padding-left: 0px !important;
    }
    
    .philImage3 {
        float: left !important;
        margin-bottom: 10px;
    }
    /* MODAL BOX */


    /*FOOTER */

    footer {
        margin-top: 255px;
    }
    footer .moduletable {
        float: none;
        border-right: 0px;
        border-bottom: 1px solid #fff; 
        margin: 0 auto;
        padding-bottom: 50px;
        padding-top: 40px;
        height: auto;
    }


    footer .moduletable:first-child {
        padding-left: 20px;
        padding-bottom: 50px;
    }

    footer .container {
        width: 100vw;
    }

    footer .main, 
    footer .historie, 
    footer .portfolio{
        width: auto;
        padding-left: 20px;
    }

    footer .kontakt {
        height: 150px;
    }

    /*FOOTER*/

    /*BG IMAGE*/
    #bgContainer img{
        transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        -webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        -o-transform: rotate(-90deg);
        margin-left: 0;
        margin-left: -70%;
        overflow: hidden;
        height: 100vw;
    }

    #bgContainer {
        height: 100vw;
        margin: 0;
        width: auto;

    }
    #push {
        height: 300px;
    }

    .house a{
        width: 20px;
        height: 20px;
        background-size: cover;
    }

    .house a:hover{
        width: 20px;
        height: 20px;
        background-size: cover;
    }

    .house.one {
        top: 425px;
        left: 270px;
    }

    .house.two {
        top: 485px;
        left: 225px;
    }

    .house.three {
        top: 230px;
        left: 146px;
    }

    .house.four {
        top: 325px;
        left: 95px;
    }

    .house.six {
        top: 323px;
        left: 63px;
    }

    .house.seven {
        top: 155px;
        left: 135px;
    }

    .house.eight {
        top: 100px;
        left: 95px;
    }

    .house.nine {
        top: 160px;
        left: 55px;
    }

    .house.ten {
        top: 445px;
        left: 315px;
    }

    .house.eleven {
        top: 140px;
        left: 185px;
    }

    .house.twelve {
        top: 30px;
        left: 35px;
    }

    .house.thirteen {
        top: 245px;
        left: 35px;
    }

    /*BG IMAGE*/

    /*IMAGE GALLERY*/
    #container {
        width: 320px !important;
    }

    #ausgabe {
        width: 320px !important;
        height: 235px !important;
    }

    #links {
        margin-top: 10px !important;
        position: relative !important;
        width: 300px !important;
    }

    #ausgabe li img {
        height: auto !important;
    }

    #auswahl {
        width: 320px !important;
        margin-left: 20px !important;
        height: auto !important;
    }

    #links ul#auswahl li {
        margin-bottom: 5px;
    }
    /*IMAGE GALLERY*/
    
    .footerStyles a {
        color: #fff !important;
    }
    
}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 480px)
and (max-width : 736px){
    
    .KAS .kasFirst,
    .KAS .kasSecond,
    .KAS .kasThird {
        width: 100% !important;
        clear: both;
    }
    
    #bgContainer {
        width: 100vw;
        height: auto;
    }
    
    .headerStyles {
        //width: 450px;
        width: 95vw;
        padding-left: 10px;
    }
    /*NAVIGATION*/
    .navigation .show-for-small-only,
    .headerStyles .show-for-small-only{
        display: block !important;
        color: #FFF;
        text-align: center;
        font-size: 24px;
    }


    .navigation {
        margin-top: 0px;
        z-index: 90;
        color: #fff;
        width: 270px;
        height: auto;
        min-height: 100%;
        position: absolute;
        left: -100%;
        top: 0px;
        background-color: #811743;
        overflow-y: scroll;
    }

    .navigation ul {
        margin-top: 30px;
        float: left;
        padding-left: 15px;
    }

    .navigation ul li a{
        color: #FFF;
    }

    .navigation ul li a:hover {
        color: #FFF;
    }

    .navigation ul li{
        float: none;
        margin-bottom: 10px;
    }

    .navigation ul li:after {
        content: "";
    }

    .navigation li.deeper.parent ul {
        display: block;
        position: relative;
        width: 100%;
    }

    .navigation ul li:nth-child(2),
    .navigation ul li:nth-child(4) {
        height: 20px;
    }

    .collapse li:nth-child(2),
    .collapse li:nth-child(4) {
        height: auto !important;
    }

    .navigation li.deeper.parent ul {
        height: auto;
        overflow: hidden;
    }

    .navigation .submenu {
        position: relative;
        font-size: 24px;
        left: 205px;
        top: -20px;
        width: 20px;
    }

    .collapsed {
        max-height: 0;
        transition: max-height 0.25s ease-out;
    }

    .collapse {
        max-height: 500px;
        transition: max-height 0.25s ease-in;
    }

    .toggleMenu{
        position: relative !important;
        top: 65px !important;
        right: -32% !important;
    }

    .svg-menu-toggle {
        fill: #811743;
        pointer-events: all;
        cursor: pointer;
    }
    .svg-menu-toggle .bar {
        -webkit-transform: rotate(0) translateY(0) translateX(0);
        -ms-transform: rotate(0) translateY(0) translateX(0);
        -o-transform: rotate(0) translateY(0) translateX(0);
        -moz-transform: rotate(0) translateY(0) translateX(0);
        transform: rotate(0) translateY(0) translateX(0);
        opacity: 1;
        -webkit-transform-origin: 20px 10px;
        -ms-transform-origin: 20px 10px;
        -o-transform-origin: 20px 10px;
        -moz-transform-origin: 20px 10px;
        transform-origin: 20px 10px;
        -webkit-transition: -webkit-transform 0.4s ease-in-out, opacity 0.2s ease-in-out;
        -ms-transition: -webkit-transform 0.4s ease-in-out, opacity 0.2s ease-in-out;
        -o-transition: -webkit-transform 0.4s ease-in-out, opacity 0.2s ease-in-out;
        -moz-transition: -webkit-transform 0.4s ease-in-out, opacity 0.2s ease-in-out;
        transition: transform 0.4s ease-in-out, opacity 0.2s ease-in-out;
    }
    .svg-menu-toggled .bar:nth-of-type(1) {
        -webkit-transform-origin: 20px 10px;
        -ms-transform-origin: 20px 10px;
        -o-transform-origin: 20px 10px;
        -moz-transform-origin: 20px 10px;
        transform-origin: 20px 10px;
    }
    .svg-menu-toggled .bar:nth-of-type(3) {
        -webkit-transform-origin: 20px 20px;
        -ms-transform-origin: 20px 20px;
        -o-transform-origin: 20px 20px;
        -moz-transform-origin: 20px 20px;
        transform-origin: 20px 20px;
    }

    .svg-menu-toggled .bar:nth-of-type(1) {
        -webkit-transform: rotate(-45deg) translateY(0) translateX(0);
        -ms-transform: rotate(-45deg) translateY(0) translateX(0);
        -o-transform: rotate(-45deg) translateY(0) translateX(0);
        -moz-transform: rotate(-45deg) translateY(0) translateX(0);
        transform: rotate(-45deg) translateY(0) translateX(0);
    }
    .svg-menu-toggled .bar:nth-of-type(2) {
        opacity: 0;
    }
    .svg-menu-toggled .bar:nth-of-type(3) {
        -webkit-transform: rotate(45deg) translateY(0em) translateX(0em);
        -ms-transform: rotate(45deg) translateY(0em) translateX(0em);
        -o-transform: rotate(45deg) translateY(0em) translateX(0em);
        -moz-transform: rotate(45deg) translateY(0em) translateX(0em);
        transform: rotate(45deg) translateY(0em) translateX(0em);
    }

    .inline-svg {
        display: block;
        margin: 0 auto;
    }
    
    .overlay {
        display: none;
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
        position: fixed;
        background-color: rgba(0,0,0,0.5);
    }
    
    
    /*NAVIGATION*/

    /* MODAL BOX */
    #container ul {
        width: 590px;
    }
    
    
    ul.auswahl {
        padding-left: 25px;
    }
    
    #sbox-window {
        width: 90vw !important;
        left: 10px !important;
        top:20px !important;
    }

    #sbox-window img {
        max-width: 320px;
    }

    #sbox-window h2 {
        font-size: 24px;
    }

    #sbox-btn-close {
        right: 10px;
    }
    
    #sbox-content .spanRight {
        width: 400px;
        padding-left: 0px;
    }
    
    #ausgabe img{
        padding-left: 70px;
    }
    
    #sbox-content .spanLeft {
        width: 590px;
        margin-bottom: 10px;
    }
    
    .onlyImages img {
        width: 320px;
        height: auto;
    }
    
    #sbox-content .infoRight {
        width: 320px;
        margin-left: 0px;
    }
    
    #contact-form legend, #jform_contact_name, #jform_contact_email, #jform_contact_emailmsg, #jform_contact_message {
        width: 590px !important;
        max-width: 590px !important;
    }
    
    #sbox-content .ruebo .spanRight #ausgabe img {
        width: 280px !important;
    }
    
    #sbox-content .ruebo  .auswahl img{
        height: auto !important;
        width: 120px;
    }
    #sbox-content .spanRight .auswahl {
        width: 590px !important;
    }
    
    #sbox-content .ruebo .spanRight .auswahl {
        width: 590px !important;
        padding-left: 100px;
    }
    
    #sbox-content .ruebo .spanRight #ausgabe {
        width: 470px !important;
        padding-left: 110px;
    }
    
    .rueboContact {
        padding-left: 0px !important;
    }
    
    .contact-form input, 
    .contact-form textarea{
        background-color: rgba(129,23,67,0.6);
        color: #FFF;
    }
    
    #sbox-content .mapStyles {
        width: 590px !important;
    }
    
    .contactInfo {
        width: 590px !important;
    }
    
    .startImage {
        width: 50% !important;
    }
    
    .contactText {
        width: 50% !important;
    }
    
    .outroImage {
        width: 100% !important;
        float: left !important;
    }
    
    .outroImage img {
        float: left !important;
    }
    
    .philImage1 {
        float: none !important;
    }
    
    .philImage2 {
        float: none !important;
        padding-left: 0px !important;
    }
    
    .philImage3 {
        float: left !important;
        margin-bottom: 10px;
        margin-right: 10px;
    }
    
    .contact .contact-image img {
        width: 280px !important;
    }
    
    #sbox-content .contact .infoRight {
        width: 310px;
        margin-left: 10px;
    }
    
    #sbox-content .contact .spanLeft {
        width: 280px !important;
    }
    
    #sbox-content .contact .spanSmall {
        width: 590px !important;
    }
    /*NAVIGATION*/
    
    
    /* MODAL BOX */
    #sbox-window {
        width: 95vw !important;
        left: 10px !important;
        height: 50vw !important;
        top: 15px !important;
    }
    #sbox-window .onlyGallery img {
        max-width: 500px !important;
    }
    
    #sbox-window img {
        max-width: 500px !important;
        float: left;
        margin-bottom: 5px;
    }
    
    #sbox-window .mieterList img {
        max-width: 500px !important;
    }
    
    #sbox-content .management .spanRight img {
         max-width: 500px !important;
    }
    
    #sbox-window .mieterList #ausgabe img {
        padding-left: 100px;
    }
    
    #sbox-window .news img {
        max-width: 290px !important;
        float: left;
    }

    #sbox-window h2 {
        font-size: 24px;
    }

    #sbox-btn-close {
        right: 10px;
    }
    
    .extraWidth {
        width: 300px !important;
    }
    
    .inetCom img{
        float: none !important;
    }
    
    .management .mDesc {
        width: 300px; 
    }
    
    #sbox-content .rueboGas .mieterList .mieter .mLogo {
        width: auto !important;
        float: right !important;
    }
    
    #sbox-content .rueboGas .mieterList .mieter {
        clear: none;
        float: left;
        width: 290px !important;
    }
    
    #sbox-window .onlyGallery #ausgabe img {
        width: auto !important;
    }
    
    
    .onlyGallery #container ul {
        width: 400px;
        padding-left: 0px;
    }
    
    .onlyGallery #container ul img{
        width: 400px;
        padding-left: 0px;
    }
    /* MODAL BOX */

    /*FOOTER*/
    footer .moduletable:first-child {
        padding-left: 20px;
    }

    footer .kontakt p {
        float: none;
    }

    footer .kontakt img {
        margin: 10px 0 0 0px;
    }
    
    
    /*FOOTER*/

    /*BG IMAGE*/
    #bgContainer {
        overflow: hidden;
    }

    #bgContainer img {
        margin-left: 0;
        width: 100vw;
    }
    
    .house {
        width: 15px;
        height: 15px;
    }
    
    .house a {
        background-size: cover;
    }
    
    .house a:hover{
        width: 15px;
        height: 15px;
        background-size: cover;
    }
    
    .house.one {
        top: 31vw;
        left: 20vw;
    }

    .house.two {
        top: 26vw;
        left: 13vw;
    }

    .house.three {
        top: 17vw;
        left: 42vw;
    }

    .house.four {
        top: 11vw;
        left: 31vw;
    }

    .house.six {
        top: 7vw;
        left: 31vw;
    }

    .house.seven {
        top: 15vw;
        left: 51vw;
    }

    .house.eight {
        top: 11vw;
        left: 57vw;
    }

    .house.nine {
        top: 6vw;
        left: 50vw;
    }

    .house.ten {
        top: 36vw;
        left: 17vw;
    }

    .house.eleven {
        top: 21vw;
        left: 52vw;
    }

    .house.twelve {
        top: 3vw;
        left: 65vw;
    }

    .house.thirteen {
        top: 4vw;
        left: 40vw;
    }
    /*BG IMAGE*/
    
    .footerStyles {
        min-height: 450px;
    }
    
    footer a {
        color: #fff !important;
    }
    
    footer .main, footer .historie, footer .portfolio {
        width: 28vw;
        padding-left: 10px;
    }
}

/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1023px) {
    
    
    
    
    .headerStyles {
        width: 700px;
    }
    
    /*BG IMAGE*/
    #bgContainer {
        overflow-y: hidden;
        overflow-x: scroll;
        width: 100vw;
    }
    
    #bgContainer img {
        margin-left: 0;
    }
    
    .house.one {
        top: 490px;
        left: 315px;
    }

    .house.two {
        top: 415px;
        left: 210px;
    }

    .house.three {
        top: 270px;
        left: 680px;
    }

    .house.four {
        top: 175px;
        left: 495px;
    }

    .house.six {
        top: 120px;
        left: 500px;
    }

    .house.seven {
        top: 245px;
        left: 820px;
    }

    .house.eight {
        top: 175px;
        left: 920px;
    }

    .house.nine {
        top: 105px;
        left: 810px;
    }

    .house.ten {
        top: 570px;
        left: 265px;
    }

    .house.eleven {
        top: 335px;
        left: 835px;
    }

    .house.twelve {
        top: 55px;
        left: 1045px;
    }

    .house.thirteen {
        top: 65px;
        left: 645px;
    }
    /*BG IMAGE*/
    
    /*NAVIGATION*/
    .navigation .show-for-small-only,
    .headerStyles .show-for-small-only{
        display: block !important;
        color: #FFF;
        text-align: center;
        font-size: 24px;
    }


    .navigation {
        margin-top: 0px;
        z-index: 90;
        color: #fff;
        width: 270px;
        height: auto;
        min-height: 100%;
        position: absolute;
        left: -100%;
        top: 0px;
        background-color: #811743;
    }

    .navigation ul {
        margin-top: 30px;
        float: left;
        padding-left: 15px;
    }

    .navigation ul li a{
        color: #FFF;
    }

    .navigation ul li a:hover {
        color: #FFF;
    }

    .navigation ul li{
        float: none;
        margin-bottom: 10px;
    }

    .navigation ul li:after {
        content: "";
    }

    .navigation li.deeper.parent ul {
        display: block;
        position: relative;
        width: 100%;
    }

    .navigation ul li:nth-child(2),
    .navigation ul li:nth-child(4) {
        height: 20px;
    }

    .collapse li:nth-child(2),
    .collapse li:nth-child(4) {
        height: auto !important;
    }

    .navigation li.deeper.parent ul {
        height: auto;
        overflow: hidden;
    }

    .navigation .submenu {
        position: relative;
        font-size: 24px;
        left: 205px;
        top: -20px;
        width: 20px;
    }

    .collapsed {
        max-height: 0;
        transition: max-height 0.25s ease-out;
    }

    .collapse {
        max-height: 500px;
        transition: max-height 0.25s ease-in;
    }

    .toggleMenu{
        position: relative !important;
        top: 65px !important;
        right: -230px !important;
    }

    .svg-menu-toggle {
        fill: #811743;
        pointer-events: all;
        cursor: pointer;
    }
    .svg-menu-toggle .bar {
        -webkit-transform: rotate(0) translateY(0) translateX(0);
        -ms-transform: rotate(0) translateY(0) translateX(0);
        -o-transform: rotate(0) translateY(0) translateX(0);
        -moz-transform: rotate(0) translateY(0) translateX(0);
        transform: rotate(0) translateY(0) translateX(0);
        opacity: 1;
        -webkit-transform-origin: 20px 10px;
        transform-origin: 20px 10px;
        -webkit-transition: -webkit-transform 0.4s ease-in-out, opacity 0.2s ease-in-out;
        transition: transform 0.4s ease-in-out, opacity 0.2s ease-in-out;
    }
    .svg-menu-toggled .bar:nth-of-type(1) {
        -webkit-transform-origin: 20px 10px;
        -ms-transform-origin: 20px 10px;
        -o-transform-origin: 20px 10px;
        -moz-transform-origin: 20px 10px;
        transform-origin: 20px 10px;
    }
    .svg-menu-toggled .bar:nth-of-type(3) {
        -webkit-transform-origin: 20px 20px;
        -ms-transform-origin: 20px 20px;
        -o-transform-origin: 20px 20px;
        -moz-transform-origin: 20px 20px;
        transform-origin: 20px 20px;
    }

    .svg-menu-toggled .bar:nth-of-type(1) {
        -webkit-transform: rotate(-45deg) translateY(0) translateX(0);
        -ms-transform: rotate(-45deg) translateY(0) translateX(0);
        -o-transform: rotate(-45deg) translateY(0) translateX(0);
        -moz-transform: rotate(-45deg) translateY(0) translateX(0);
        transform: rotate(-45deg) translateY(0) translateX(0);
    }
    .svg-menu-toggled .bar:nth-of-type(2) {
        opacity: 0;
    }
    .svg-menu-toggled .bar:nth-of-type(3) {
        -webkit-transform: rotate(45deg) translateY(0em) translateX(0em);
        -ms-transform: rotate(45deg) translateY(0em) translateX(0em);
        -o-transform: rotate(45deg) translateY(0em) translateX(0em);
        -moz-transform: rotate(45deg) translateY(0em) translateX(0em);
        transform: rotate(45deg) translateY(0em) translateX(0em);
    }

    .inline-svg {
        display: block;
        margin: 0 auto;
    }
    
    .overlay {
        display: none;
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
        position: fixed;
        background-color: rgba(0,0,0,0.5);
    }
    /*NAVIGATION*/
    
    /*MODAL BOX*/
    #sbox-window {
        width: 95vw !important;
        left: 10px !important;
        top:80px !important;
        height: 100vw !important;
    }
    
    #sbox-content {
        font-size: 16px;
    }
    
    #sbox-content .spanRight {
        width: 710px;
    }
    
    #sbox-content .spanRight #ausgabe img {
        padding-left: 130px;
    }
    
    #sbox-content .spanLeft {
        width: 710px;
    }
    
    #sbox-content #container {
        width: 710px;
    }
    
    #container ul {
        width: 710px;
    }
    
    .onlyGallery #container ul {
        width: 550px;
    }
    
    #sbox-content .onlyGallery  #container {
        width: 400px;
    }
    
    .extraWidth {
        width: 350px !important;
    }
    
    
    .contact .spanLeft {
        width: 350px !important;
    }
    
    .contact .spanRight {
        width: 350px !important;
    }
    
    .contact .contact-image img {
        width: 310px;
    }
    
    .contact-form input, 
    .contact-form textarea{
        background-color: rgba(129,23,67,0.6);
        color: #FFF;
    }
    
    #sbox-window h2 {
        font-size: 24px;
    }
    
    .philImage3 {
        float: left !important;
        padding-right: 10px !important;
    }
    
    .hisImage1,
    .hisImage2 {
        width: 340px !important;
        float: left !important;
        height: auto !important;
    }
    
    .hisImage1 {
        padding-right: 5px;
    }
    
    .hisImage2 {
        padding-left: 5px;
    }
    
    .contactInfo{
        width: 710px !important;
    }
    
    .contactText,
    .startImage,
    .outroImage{
        width: 100% !important;
    }
    
    .startImage {
        margin-bottom: 10px;
    }
    
    .outroImage img {
        float: none !important;
    }
    
    .outroImage {
        text-align: center;
    }
    
    .extraWidth img {
        width: 320px;
        height: auto;
    }
    
    #sbox-content .rueboContact {
        padding-left: 0px !important;
        width: 310px;
        float: left; 
    }
    
    #sbox-content .ruebo #ausgabe {
        width: 390px !important;
        float: left;
    }
    
    #sbox-content .ruebo .auswahl {
        width: 390px !important;
        padding-left: 330px !important;
    }
    
    #sbox-content .ruebo .auswahl img {
        height: 85px;
        width: auto;
    }
    
    #sbox-content .ruebo .spanRight #ausgabe img {
        padding-left: 0px;
    }
    
    #sbox-content .rueboGas .mieter {
        width: 300px;
        float: left;
        clear: none;
    }
    
    /*IMAGES*/
    .onlyImages img {
        width: 350px;
        height: auto;
    }
    
    
    /*IMAGES*/
    
    /*MODAL BOX*/
    
    
    
    /*FOOTER*/
    footer {
        padding-left: 10px;
    }
    .footerStyles a {
        color: #fff !important;
    }
    /*FOOTER*/
}

/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 1024px)
and (max-device-width : 1224px){
    
    /*NAVIGATION*/
    .navigation .show-for-small-only,
    .headerStyles .show-for-small-only{
        display: block !important;
        color: #FFF;
        text-align: center;
        font-size: 24px;
    }


    .navigation {
        margin-top: 0px;
        z-index: 90;
        color: #fff;
        width: 250px;
        height: auto;
        min-height: 100%;
        position: absolute;
        left: -100%;
        top: 0px;
        background-color: #811743;
    }

    .navigation ul {
        margin-top: 30px;
        float: left;
        padding-left: 15px;
    }

    .navigation ul li a{
        color: #FFF;
    }

    .navigation ul li a:hover {
        color: #FFF;
    }

    .navigation ul li{
        float: none;
        margin-bottom: 10px;
    }

    .navigation ul li:after {
        content: "";
    }

    .navigation li.deeper.parent ul {
        display: block;
        position: relative;
        width: 100%;
    }

    .navigation ul li:nth-child(2),
    .navigation ul li:nth-child(4) {
        height: 20px;
    }

    .collapse li:nth-child(2),
    .collapse li:nth-child(4) {
        height: auto !important;
    }

    .navigation li.deeper.parent ul {
        height: auto;
        overflow: hidden;
    }

    .navigation .submenu {
        position: relative;
        font-size: 24px;
        left: 205px;
        top: -20px;
        width: 20px;
    }

    .collapsed {
        max-height: 0;
        transition: max-height 0.25s ease-out;
    }

    .collapse {
        max-height: 500px;
        transition: max-height 0.25s ease-in;
    }

    .toggleMenu{
        position: relative !important;
        top: 65px !important;
        right: -330px !important;
    }

    .svg-menu-toggle {
        fill: #811743;
        pointer-events: all;
        cursor: pointer;
    }
    .svg-menu-toggle .bar {
        -webkit-transform: rotate(0) translateY(0) translateX(0);
        -ms-transform: rotate(0) translateY(0) translateX(0);
        -o-transform: rotate(0) translateY(0) translateX(0);
        -moz-transform: rotate(0) translateY(0) translateX(0);
        transform: rotate(0) translateY(0) translateX(0);
        opacity: 1;
        -webkit-transform-origin: 20px 10px;
        transform-origin: 20px 10px;
        -webkit-transition: -webkit-transform 0.4s ease-in-out, opacity 0.2s ease-in-out;
        transition: transform 0.4s ease-in-out, opacity 0.2s ease-in-out;
    }
    .svg-menu-toggled .bar:nth-of-type(1) {
        -webkit-transform-origin: 20px 10px;
        -ms-transform-origin: 20px 10px;
        -o-transform-origin: 20px 10px;
        -moz-transform-origin: 20px 10px;
        transform-origin: 20px 10px;
    }
    .svg-menu-toggled .bar:nth-of-type(3) {
        -webkit-transform-origin: 20px 20px;
        -ms-transform-origin: 20px 20px;
        -o-transform-origin: 20px 20px;
        -moz-transform-origin: 20px 20px;
        transform-origin: 20px 20px;
    }

    .svg-menu-toggled .bar:nth-of-type(1) {
        -webkit-transform: rotate(-45deg) translateY(0) translateX(0);
        -ms-transform: rotate(-45deg) translateY(0) translateX(0);
        -o-transform: rotate(-45deg) translateY(0) translateX(0);
        -moz-transform: rotate(-45deg) translateY(0) translateX(0);
        transform: rotate(-45deg) translateY(0) translateX(0);
    }
    .svg-menu-toggled .bar:nth-of-type(2) {
        opacity: 0;
    }
    .svg-menu-toggled .bar:nth-of-type(3) {
        -webkit-transform: rotate(45deg) translateY(0em) translateX(0em);
        -ms-transform: rotate(45deg) translateY(0em) translateX(0em);
        -o-transform: rotate(45deg) translateY(0em) translateX(0em);
        -moz-transform: rotate(45deg) translateY(0em) translateX(0em);
        transform: rotate(45deg) translateY(0em) translateX(0em);
    }

    .inline-svg {
        display: block;
        margin: 0 auto;
    }
    
    .overlay {
        display: none;
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
        position: fixed;
        background-color: rgba(0,0,0,0.5);
    }
    
    
    /*NAVIGATION*/
    
    /*CONTACT*/
    #sbox-content .spanSmall {
        width: 470px;
    }
    
    .contact-form input, 
    .contact-form textarea{
        background-color: rgba(129,23,67,0.6);
        color: #FFF;
    }
    
    #contact-form legend, #jform_contact_name, #jform_contact_email, #jform_contact_emailmsg, #jform_contact_message {
        width: 420px;
        max-width: 420px;
    }
    
    #sbox-content .contact .spanRight {
        padding-left: 0px;
    }
    
    #sbox-content .backstein .spanRight {
        width: 700px;
    }
    /*CONTACT*/
    
    /*BG IMAGE*/
    #bgContainer {
        overflow-y: hidden;
        overflow-x: scroll;
        width: 100vw;
    }
    
    #bgContainer img {
        margin-left: 0;
    }
    
    .house.one {
        top: 490px;
        left: 315px;
    }

    .house.two {
        top: 415px;
        left: 210px;
    }

    .house.three {
        top: 270px;
        left: 680px;
    }

    .house.four {
        top: 175px;
        left: 495px;
    }

    .house.six {
        top: 120px;
        left: 500px;
    }

    .house.seven {
        top: 245px;
        left: 820px;
    }

    .house.eight {
        top: 175px;
        left: 920px;
    }

    .house.nine {
        top: 105px;
        left: 810px;
    }

    .house.ten {
        top: 570px;
        left: 265px;
    }

    .house.eleven {
        top: 335px;
        left: 835px;
    }

    .house.twelve {
        top: 55px;
        left: 1045px;
    }

    .house.thirteen {
        top: 65px;
        left: 645px;
    }
    /*BG IMAGE*/
    
    /*FOOTER*/
    footer .main, footer .historie, footer .portfolio {
        width: 30%;
    }
    
    .footerStyles a {
        color: #fff !important;
    }
    /*FOOTER*/
    
}

/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px)
and (max-width : 1680px) {
    

}

/* Large screens ----------- */
@media only screen
and (min-width : 1730px) {


}

/* x-Large screens ----------- */
@media only screen
and (min-width : 2048px) {

}


@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 359px) 
and (orientation : portrait) {
    .container {
        width: 310px !important;
    }

    /*NAVIGATION*/
    .navigation .show-for-small-only,
    .headerStyles .show-for-small-only{
        display: block !important;
        color: #FFF;
        text-align: center;
        font-size: 24px;
    }


    .navigation {
        margin-top: 0px;
        z-index: 90;
        color: #fff;
        width: 250px;
        height: auto;
        min-height: 100%;
        position: absolute;
        left: -100%;
        top: 0px;
        background-color: #811743;
    }

    .navigation ul {
        margin-top: 30px;
        float: left;
        padding-left: 15px;
    }

    .navigation ul li a{
        color: #FFF;
    }

    .navigation ul li a:hover {
        color: #FFF;
    }

    .navigation ul li{
        float: none;
        margin-bottom: 10px;
    }

    .navigation ul li:after {
        content: "";
    }

    .navigation li.deeper.parent ul {
        display: block;
        position: relative;
        width: 100%;
    }

    .navigation ul li:nth-child(2),
    .navigation ul li:nth-child(4) {
        height: 20px;
    }

    .collapse li:nth-child(2),
    .collapse li:nth-child(4) {
        height: auto !important;
    }

    .navigation li.deeper.parent ul {
        height: auto;
        overflow: hidden;
    }

    .navigation .submenu {
        position: relative;
        font-size: 24px;
        left: 205px;
        top: -20px;
        width: 20px;
    }

    .collapsed {
        max-height: 0;
        transition: max-height 0.25s ease-out;
    }

    .collapse {
        max-height: 500px;
        transition: max-height 0.25s ease-in;
    }

    .toggleMenu{
        position: relative !important;
        top: 65px !important;
        right: -90px !important;
    }

    .svg-menu-toggle {
        fill: #811743;
        pointer-events: all;
        cursor: pointer;
    }
    .svg-menu-toggle .bar {
        -webkit-transform: rotate(0) translateY(0) translateX(0);
        -ms-transform: rotate(0) translateY(0) translateX(0);
        -o-transform: rotate(0) translateY(0) translateX(0);
        -moz-transform: rotate(0) translateY(0) translateX(0);
        transform: rotate(0) translateY(0) translateX(0);
        opacity: 1;
        -webkit-transform-origin: 20px 10px;
        -ms-transform-origin: 20px 10px;
        -o-transform-origin: 20px 10px;
        -moz-transform-origin: 20px 10px;
        transform-origin: 20px 10px;
        -webkit-transition: -webkit-transform 0.4s ease-in-out, opacity 0.2s ease-in-out;
        -ms-transition: -webkit-transform 0.4s ease-in-out, opacity 0.2s ease-in-out;
        -o-transition: -webkit-transform 0.4s ease-in-out, opacity 0.2s ease-in-out;
        -moz-transition: -webkit-transform 0.4s ease-in-out, opacity 0.2s ease-in-out;
        transition: transform 0.4s ease-in-out, opacity 0.2s ease-in-out;
    }
    .svg-menu-toggled .bar:nth-of-type(1) {
        -webkit-transform-origin: 20px 10px;
        -ms-transform-origin: 20px 10px;
        -o-transform-origin: 20px 10px;
        -moz-transform-origin: 20px 10px;
        transform-origin: 20px 10px;
    }
    .svg-menu-toggled .bar:nth-of-type(3) {
        -webkit-transform-origin: 20px 20px;
        -ms-transform-origin: 20px 20px;
        -o-transform-origin: 20px 20px;
        -moz-transform-origin: 20px 20px;
        transform-origin: 20px 20px;
    }

    .svg-menu-toggled .bar:nth-of-type(1) {
        -webkit-transform: rotate(-45deg) translateY(0) translateX(0);
        -ms-transform: rotate(-45deg) translateY(0) translateX(0);
        -o-transform: rotate(-45deg) translateY(0) translateX(0);
        -moz-transform: rotate(-45deg) translateY(0) translateX(0);
        transform: rotate(-45deg) translateY(0) translateX(0);
    }
    .svg-menu-toggled .bar:nth-of-type(2) {
        opacity: 0;
    }
    .svg-menu-toggled .bar:nth-of-type(3) {
        -webkit-transform: rotate(45deg) translateY(0em) translateX(0em);
        -ms-transform: rotate(45deg) translateY(0em) translateX(0em);
        -o-transform: rotate(45deg) translateY(0em) translateX(0em);
        -moz-transform: rotate(45deg) translateY(0em) translateX(0em);
        transform: rotate(45deg) translateY(0em) translateX(0em);
    }

    .inline-svg {
        display: block;
        margin: 0 auto;
    }
    
    .overlay {
        display: none;
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
        position: fixed;
        background-color: rgba(0,0,0,0.5);
    }
    
    
    /*NAVIGATION*/

    /* MODAL BOX */
    #sbox-content .mieterList .mieter {
        width: 320px;
    }
    #container ul {
        width: 320px;
    }
    
    ul.auswahl {
        padding-left: 25px;
    }
    
    #sbox-window {
        width: 90vw !important;
        left: 10px !important;
        top:20px !important;
    }

    #sbox-window img {
        max-width: 320px !important;
    }
    
    #sbox-window .rueboGas .auswahl img,
    #sbox-window .rueboGas #auswahl img {
        max-width: 270px !important;
        height: auto;

    }
    
    #sbox-window .auswahl img {
        max-width: 270px !important;
        height: auto;

    }
    
    h3 {
        font-size: 13pt;
    }
    
    #sbox-window .spanLeft .mLogo img {
        padding-right: 0px !important; 
    }
    
    #sbox-content .mieterList .mieter .mLogo {
        float: none;
    }
    
    #sbox-content .impLeft {
        width: auto;
    }
    
    #sbox-window img {
        padding-right: 0px !important;
    }
    
    #sbox-content .news img {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }

    #sbox-window h2 {
        font-size: 24px;
    }

    #sbox-btn-close {
        right: 10px;
    }
    
    #sbox-content .spanRight {
        width: 320px;
        padding-left: 0px;
    }
    
    #sbox-content .spanLeft {
        width: 320px;
        margin-bottom: 10px;
    }
    
    .onlyImages img {
        width: 320px;
        height: auto;
    }
    
    #sbox-content .infoRight {
        width: 320px;
        margin-left: 0px;
    }
    
    #contact-form legend, #jform_contact_name, #jform_contact_email, #jform_contact_emailmsg, #jform_contact_message {
        width: 320px;
    }
    
    #sbox-content .ruebo .spanRight #ausgabe img {
        width: 280px !important;
    }
    
    #sbox-content .ruebo  .auswahl img{
        height: auto !important;
        width: 120px;
    }
    #sbox-content .spanRight .auswahl {
        width: 320px !important;
    }
    
    .contact-form input, 
    .contact-form textarea{
        background-color: rgba(129,23,67,0.6);
        color: #FFF;
    }
    
    .contactInfo {
        width: 320px !important;
    }
    
    .startImage {
        width: 100% !important;
    }
    
    .contactText {
        width: 100% !important;
    }
    
    .outroImage {
        width: 100% !important;
    }
    
    .philImage1 {
        float: none !important;
    }
    
    .philImage2 {
        float: none !important;
        padding-left: 0px !important;
    }
    
    .philImage3 {
        float: left !important;
        margin-bottom: 10px;
    }
    /* MODAL BOX */


    /*FOOTER */

    footer {
        margin-top: 255px;
    }
    footer .moduletable {
        float: none;
        border-right: 0px;
        border-bottom: 1px solid #fff; 
        margin: 0 auto;
        padding-bottom: 50px;
        padding-top: 40px;
        height: auto;
    }


    footer .moduletable:first-child {
        padding-left: 20px;
        padding-bottom: 50px;
    }

    footer .container {
        width: 100vw;
    }

    footer .main, 
    footer .historie, 
    footer .portfolio{
        width: auto;
        padding-left: 20px;
    }

    footer .kontakt {
        height: 200px;
    }

    /*FOOTER*/

    /*BG IMAGE*/
    #bgContainer img{
        transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        -webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        -o-transform: rotate(-90deg);
        margin-left: 0;
        margin-left: -70%;
        overflow: hidden;
        height: 100vw;
    }

    #bgContainer {
        height: 100vw;
        margin: 0;
        width: auto;

    }
    #push {
        height: 300px;
    }

    .house a{
        width: 20px;
        height: 20px;
        background-size: cover;
    }

    .house a:hover{
        width: 20px;
        height: 20px;
        background-size: cover;
    }

    .house.one {
        top: 375px;
        left: 235px;
    }

    .house.two {
        top: 430px;
        left: 200px;
    }

    .house.three {
        top: 204px;
        left: 130px;
    }

    .house.four {
        top: 290px;
        left: 80px;
    }

    .house.six {
        top: 289px;
        left: 55px;
    }

    .house.seven {
        top: 135px;
        left: 118px;
    }

    .house.eight {
        top: 85px;
        left: 85px;
    }

    .house.nine {
        top: 135px;
        left: 50px;
    }

    .house.ten {
        top: 395px;
        left: 280px;
    }

    .house.eleven {
        top: 123px;
        left: 160px;
    }

    .house.twelve {
        top: 25px;
        left: 25px;
    }

    .house.thirteen {
        top: 210px;
        left: 30px;
    }

    /*BG IMAGE*/

    /*IMAGE GALLERY*/
    #container {
        width: 320px !important;
    }

    #ausgabe {
        width: 320px !important;
        height: 235px !important;
    }

    #links {
        margin-top: 10px !important;
        position: relative !important;
        width: 300px !important;
    }

    #ausgabe li img {
        height: auto !important;
    }

    #auswahl {
        width: 320px !important;
        margin-left: 20px !important;
        height: auto !important;
    }

    #links ul#auswahl li {
        margin-bottom: 5px;
    }
    /*IMAGE GALLERY*/

    footer .kontakt img {
        margin-top: 10px;
    }
    
    footer .container{
        width: 100vw;
    }
}