@font-face {
    font-family: 'DIN Offc Pro';
    src: url('/css/font/DINWeb.woff') format('woff');
}

@font-face {
    font-family: 'DIN Offc Pro';
    src: url('/css/font/DINWeb-Bold.woff') format('woff');
    font-weight: bold;
}

@font-face {
    font-family: 'DIN Offc Pro';
    src: url('/css/font/DINWeb-Light.woff') format('woff');
    font-weight: lighter;
}
@font-face {
    font-family: 'Avenir Next';
    src: url('/css/font/Avenir/AvenirNext-Regular-08.ttf') format('ttf');
}
body {
    background-color: #fff;
    /*overflow: hidden;*/
}

.ground {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    overflow: hidden;
    transition: 0.3s all ease;
}

.groundOffset {
    left: 165px;
}

.groundpicture {
    position: absolute;
    top: 0px;
    left: -200px;
    right: -320px;
    bottom: 0px;
    background-position: center center;
    background-size: cover;
    transition: all 0.5s ease;
    opacity: 0;
}

.backgroundvideo {
    position: absolute;
    width: 112%;
    height: 112%;
    top: -6%;
    left: -3%;
    right: -9%;
    bottom: -6%;
}

.viewscreen {
    transition: all 0.3s ease;
    overflow: visible;
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
}

.mainlabel {
    position: absolute;
    font-family: 'Segoe UI', SgFont, Arial; /*Segoe, 'DejaVu Sans', 'Trebuchet MS', Verdana, sans-serif;*/
    font-weight: lighter;
    color: #fff;
    /*font-size: 50px;*/
    kerning: auto;
    letter-spacing: -2px;
    top: 44px;
    left: 126px;
    z-index: 100;
}

.simpleTransition {
    transition: all 0.5s ease;
}

.debuglabel {
    position: absolute;
    font-family: Consolas, 'Lucida Console', 'DejaVu Sans Mono', monospace;
    font-weight: lighter;
    color: #fff;
    font-size: 12px;
    kerning: auto;
    letter-spacing: 0px;
    bottom: 20px;
    right: 20px;
    text-align: right;
    background-color: rgba(0,0,0,0.3);
    padding: 5px;
    display: none;
}

.scrollDetector {
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 1000;
    background-color: rgba(0,0,0,0);
    width: 100%;
    height: 30px;
    background-position: 0px center;
    background-repeat: repeat-x;
    opacity: 0.5;
    transition: all ease 0.5s;
}

    .scrollDetector:hover {
        background-color: rgba(0,0,0,0.1);
        background-image: url('icons/Schraffur45g32qpx.png');
    }

.scrollDetectorBlock {
    width: 1%;
    height: 30px;
    margin-left: 1%;
    float: left;
    border-left: solid 2px rgba(0,0,0,0);
}

    .scrollDetectorBlock:hover {
        /*border-left:solid 2px rgba(0,0,0,1);*/
    }

.tile {
    float: left;
    cursor: pointer;
    text-align: left;
    font-family: 'Segoe UI';
    font-weight: lighter;
    color: #fff;
    font-size: 12px;
    kerning: auto;
    letter-spacing: 0px;
    margin: 0px 8px 8px 0px;
    vertical-align: text-bottom;
    transition: all 0.3s ease;
}

    .tile:hover {
        box-shadow: rgba(255,255,255,0.7) 0px 0px 0px 2px;
    }

.tabletile {
    cursor: pointer;
    text-align: left;
    font-family: 'Segoe UI', Arial, 'DejaVu Sans', 'Liberation Sans', Freesans, sans-serif;
    font-weight: lighter;
    color: #fff;
    font-size: 12px;
    kerning: auto;
    letter-spacing: 0px;
    margin: 4px;
    transition: all 0.3s ease;
    float: left;
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    border-radius: 0%;
    position: relative;
    overflow: hidden;
    /*transform: rotateY(90deg) scale(1,0.1);*/
}

    .tabletile:hover {
        box-shadow: rgba(255,255,255,0.7) 0px 0px 0px 2px;
    }

    .tabletile:focus {
        animation-name: tileclick;
        animation-duration: 0.2s;
        animation-iteration-count: 1;
        animation-timing-function: ease;
        animation-direction: normal;
    }

@keyframes tileclick {
    0% {
        transform: scale(1,1);
    }

    50% {
        transform: scale(0.95,0.95);
    }

    75% {
        transform: scale(1.01,1.01);
    }

    100% {
        transform: scale(1,1);
    }
}

@keyframes tileclick_normal {
    0% {
        transform: scale(1,1);
    }

    25% {
        transform: scale(0.75,0.75);
    }

    40% {
        transform: scale(1.1,1.1);
    }

    55% {
        transform: scale(0.85,0.85);
    }

    70% {
        transform: scale(1.05,1.05);
    }

    85% {
        transform: scale(0.94,0.94);
    }

    100% {
        transform: scale(1,1);
    }
}

.expandtabletrigger {
    background-color: rgba(255,255,255,0.2);
    opacity: 0;
    width: 50px;
    height: auto;
    position: absolute;
    top: 90px;
    bottom: 20px;
    transition: all 0.4s ease;
}

.view3d {
    transition: all 0.7s ease;
    overflow: visible;
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    perspective: 500px;
}

    .view3d:hover {
        /*transform: rotateY(0deg);*/
    }

.metroview {
    position: absolute;
    top: 115px;
    left: 120px;
    width: auto;
    min-width: 1000%;
    height: 90%;
    transition: all 0.5s ease;
    max-height: 81%;
    overflow: visible;
}

    .metroview:hover {
    }

.metrocolumn {
    float: left;
    min-width: 260px;
    margin-right: -100px;
    margin-top: 50px;
    transition: all 0.3s ease;
    padding-bottom: 34px;
    border-style: solid;
    border-width: 1px;
    border-color: rgba(255,255,255,0);
    padding-left: 4px;
    padding-top: 4px;
    padding-right: 150px;
}

.columngrouplabel {
    /*font-family: 'Segoe UI', SgFont, Arial;*/ /*Segoe, 'DejaVu Sans', 'Trebuchet MS', Verdana, sans-serif;*/
    font-family: 'DIN Offc Pro';
    /*font-weight: lighter;*/
    /*color: #784d96;*/
    color: #FFFFFF;
    font-size: 18pt;
    kerning: auto;
    letter-spacing: -1px;
    position: relative;
    top: -8px;
    left: 4px;
}

.columngrouplabelInvisible {
    font-family: 'Segoe UI', SgFont, Arial; /*Segoe, 'DejaVu Sans', 'Trebuchet MS', Verdana, sans-serif;*/
    font-weight: lighter;
    color: #fff;
    font-size: 18pt;
    kerning: auto;
    letter-spacing: -1px;
    position: relative;
    top: -8px;
    left: 4px;
    visibility: hidden;
}

.icon {
    background-position: center center;
    background-size: contain;
}

.tile_wide {
    width: 248px;
    height: 120px;
    background: linear-gradient(to right, rgb(140,140,200) 0%,rgb(155,155,215) 100%);
}

.tile_wide_terravideo {
    width: 400px;
    height: 244px;
    background-color: #FFF;
    color: #333;
    margin-right: 10px;
    margin-bottom: 10px;
    background-image: none !important;
}

.tile_wide_terravideo:hover .videoplayer {
    /*display: block;*/
}

.tile_wide_terravideo .tileImageBottomText{
    font-size: 2em;
    padding-left: 2px;
    padding-top: 5px;
    padding-bottom: 10px;
    color: #333;
    background-color: rgba(0,0,0,0);
    left: 5px;
    right: 5px;
    bottom: 5px;
    width: auto;
    cursor: default;
    transition: all 0.5s ease;
    /*
    font-size: 3em;
    padding-left: 80px;
    padding-top: 5px;
    padding-bottom: 10px;
    background-color: rgba(0,0,0,0.8);
    background-position: 24px center;
    background-repeat: no-repeat;
    background-size: 32px;
    background-image: url(/MMUI/icons/windows10icons/TutorialWF_white32qpx.png);*/
}

.tile_wide_terravideo .tileBottomText {
    padding-left: 7px;
    top: 240px;
    font-size: 22px;
}

.tile_wide_terravideo .tileBottomText:nth-child(2n +1) {
    top: 274px;
    width: 342px;
    font-size: 15px;
}

.tile_wide_terravideo .tileImageBottomText::first-line {
    font-size: 14px;
    padding-bottom: 12px;
    text-decoration: underline;
}

    .tile_wide_terravideo:hover .tileImageBottomText {
        /*display: none;*/
    }

.tile_wide_terravideo .videoplayer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 82%;
    /*display: none;*/
}

.tile_video_preview_image {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    -moz-transition: height 0.5s ease;
    -o-transition: height 0.5s ease;
    -webkit-transition: height 0.5s ease;
    transition: height 0.5s ease;
    z-index: 10;
}

.terravpi01 {
    background-image: url('videos/VideoPreview_KundenErstellen.jpg');
}

.terravpi02 {
    background-image: url('videos/VideoPreview_SubscriptionErstellen.jpg');
}

.terravpi03 {
    background-image: url('videos/VideoPreview_SubscriptionAendern.jpg');
}

.terravpi04 {
    background-image: url('videos/VideoPreview_MeineGeraete.jpg');
}

.tile_wide_terravideo:hover .tile_video_preview_image {
    height: 0;
}

.tile_square_mid {
    width: 120px;
    height: 120px;
    background: linear-gradient(to right, rgb(140,140,200) 0%,rgb(155,155,215) 100%);
}

.tile_square_small {
    width: 56px;
    height: 56px;
    background: linear-gradient(to right, rgb(140,140,200) 0%,rgb(155,155,215) 100%);
}

.tile_bigsquare {
    width: 248px;
    height: 248px;
    background: linear-gradient(to right, rgb(140,140,200) 0%,rgb(155,155,215) 100%);
}

.tile_bigwide {
    width: 504px;
    height: 248px;
    background: linear-gradient(to right, rgb(140,140,200) 0%,rgb(155,155,215) 100%);
}

/* Wird im Moment überschrieben, damit das XML nicht geändert werden muss (hat sonst Auswirkung auf mp.bytes.....) */
/*.tile_commercial {
    width: 504px;
    height: 504px;
    background: linear-gradient(to right, rgb(140,140,200) 0%,rgb(155,155,215) 100%);
}*/

.tile_commercial {
    width: 604px;
    height: 504px;
    background: linear-gradient(to right, rgb(140,140,200) 0%,rgb(155,155,215) 100%);
}

.tile_dsCommercial {
    width: 669px;
    height: 376px;
    background: linear-gradient(to right, rgb(140,140,200) 0%,rgb(155,155,215) 100%);
}

.tile_dsCommercialBig {
    width: 896px;
    height: 504px;
    background: linear-gradient(to right, rgb(140,140,200) 0%,rgb(155,155,215) 100%);
}

.tile_bulletList {
    width: 248px;
    height: 56px;
}

.tile4x_holder {
    float: left;
    margin: 0px;
    width: 128px;
    height: 128px;
}

.tileBottomText {
    text-align: left;
    font-family: 'Segoe UI', Arial, 'DejaVu Sans', 'Liberation Sans', Freesans, sans-serif;
    font-weight: lighter;
    font-size: 12px;
    width: 100%;
    padding-left: 5px;
    padding-bottom: 1px;
    margin-bottom: 0px;
    position: absolute;
    left: 0px;
    bottom: 0px;
    vertical-align: bottom;
}

.tileImageBottomText {
    text-align: left;
    font-family: 'Segoe UI', Arial, 'DejaVu Sans', 'Liberation Sans', Freesans, sans-serif;
    font-weight: normal;
    font-size: 12px;
    width: 100%;
    padding-left: 5px;
    padding-bottom: 1px;
    margin-bottom: 0px;
    position: absolute;
    left: 0px;
    bottom: 0px;
    vertical-align: bottom;
    background-color: rgba(0,0,0,0.5);
}

.tileTopText {
    text-align: left;
    font-family: 'Segoe UI', Arial, 'DejaVu Sans', 'Liberation Sans', Freesans, sans-serif;
    font-weight: lighter;
    font-size: 13px;
    width: 100%;
    padding-left: 5px;
    padding-top: 1px;
    position: absolute;
    left: 0px;
    top: -10px;
}

.tileScrollText {
    text-align: left;
    font-family: 'Segoe UI', Arial, 'DejaVu Sans', 'Liberation Sans', Freesans, sans-serif;
    font-weight: lighter;
    font-size: 12px;
    right: -18px;
    height: 100%;
    overflow-y: scroll;
    padding-left: 5px;
    padding-top: 3px;
    padding-right: 7px;
    position: absolute;
    left: 0px;
    top: -12px;
}

.tileBulletListText {
    text-align: left;
    font-family: 'Segoe UI', Arial, 'DejaVu Sans', 'Liberation Sans', Freesans, sans-serif;
    font-weight: bold;
    font-size: 10px;
    width: 100%;
    padding-left: 5px;
    padding-bottom: 1px;
    margin-bottom: 0px;
    position: absolute;
    left: 60px;
    bottom: 0px;
    top: 0px;
    vertical-align: bottom;
    list-style-type: none;
    margin-top: 0px;
    white-space: pre-wrap;
    color: #784d96;
}

.tileTextOff {
    display: none;
}

.toolmenu {
    position: fixed;
    padding: 0px;
    top: -575px;
    left: 10px;
    width: 50px;
    height: 600px;
    z-index: 100;
    transition: all 0.3s ease;
    background-color: rgba(0,0,0,0.4);
}

.toolmenubutton {
    float: left;
    width: 48px;
    height: 48px;
    background-position: center;
    background-size: contain;
    color: #fff;
    cursor: pointer;
    text-align: center;
    font-family: 'Segoe UI', Arial, 'DejaVu Sans', 'Liberation Sans', Freesans, sans-serif;
    font-weight: lighter;
    font-size: 12px;
    margin: 1px;
}

    .toolmenubutton:hover {
        box-shadow: 0 0 3px rgb(255,255,255);
    }

.coloreditor {
    position: fixed;
    padding: 0px;
    top: 0px;
    left: -90px;
    width: 20px;
    height: 150px;
    z-index: 100;
    margin-top: -10px;
    transition: all 0.3s ease;
    background-color: rgba(0,0,0,0.7);
    border: 10px solid rgba(0,0,0,0.4);
    overflow: visible;
}

.colorvalueslider {
    width: 100%;
    height: 60%;
    background-size: 100% 100%;
    cursor: pointer;
    position: relative;
}

.colorvaluesliderPointer {
    background-image: url('toolicons/Colorslider_Pointer16qpx.png');
    background-position-y: top;
    background-position-x: 18px;
    background-repeat: no-repeat;
    background-size: 16px 16px;
    width: 32px;
    height: 16px;
    position: absolute;
    top: -10px;
    left: 0px;
    font-size: 9px;
    font-family: 'Segoe UI', Arial, 'DejaVu Sans', 'Liberation Sans', Freesans, sans-serif;
    font-weight: bold;
    text-align: left;
    color: #ccc;
    cursor: default;
    transition: all 0.3s ease;
}

.tilesizeMenu {
    height: 100px;
    width: 100%;
    color: #fff;
    background-color: rgba(0,0,0,0);
    position: fixed;
    top: -200px;
    z-index: 400;
    transition: all 0.3s ease;
}

.tileSizeMenuTable {
    width: 100%;
    height: 100%;
}

.tileSizeTDbutton {
    background-color: rgba(20,20,20,0.7);
    color: #fff;
    cursor: pointer;
    width: 20%;
    transition: all 0.3s ease;
    background-position: center center;
    background-size: auto, 100%;
    background-repeat: no-repeat;
    font-size: 14px;
    font-family: 'Segoe UI', Arial, 'DejaVu Sans', 'Liberation Sans', Freesans, sans-serif;
    font-weight: lighter;
    text-align: center;
    color: #ccc;
    vertical-align: bottom;
}

    .tileSizeTDbutton:hover {
        background-color: rgba(90,90,90,0.8);
    }

table {
    /*box-shadow: 0 0 1px rgba(255,255,255,0.7);*/
}

.special_td {
    background-color: rgba(0,0,0,0);
    width: 256px;
    padding: 0px;
    margin: 0px;
    vertical-align: top;
    height: 100%;
}

tr {
    /*height:90%;*/
}

.livetileImage {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    transition: all 0.7s ease;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    /*animation-name: lifetile;
    animation-duration: 1s;
    animation-play-state:paused;
    animation-iteration-count: 1;
    animation-timing-function: ease;
    animation-direction: normal;
    z-index: 2;*/
}

.commercialIframe, .videoTileDSCommercialIframe {
    width: 100%;
    height: 100%;
    border: none;
}

.o365OrderLiveTileBody {
    width: 100%;
    height: 100%;
    background-color: green;
}

.pictureDivDetailCloudPartnerPremium {
    width: 160px;
    height: 249px;
    background-image: url('/images/MMUI/content/terracloudPremium.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-color: white;
}

.coverDivCloudPartnerPremium {
    width: 100%;
    height: 249px;
    position: relative;
}

.pForPremiumPartnerDescription {
    width: 427px;
    height: 249px;
    position: absolute;
    left: 130px;
    top: 0px;
    margin: 56px;
}

.titleForPPremiumPartnerDescription {
    position: absolute;
    left: 0px;
    top: -30px;
    color: #784d96;
    font-size: 22px;
    font-weight: bolder;
}

.pictureDivDetailCloudPartner {
    width: 160px;
    height: 215px;
    background-image: url('/images/MMUI/content/terracloud.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-color: white;
}

.coverDivCloudPartner {
    width: 100%;
    height: 215px;
    position: relative;
}

.pForCloudPartnerDescription {
    width: 427px;
    height: 215px;
    position: absolute;
    left: 130px;
    top: 0px;
    margin: 56px;
}

.titleForPCloudpartnerDescription {
    position: absolute;
    left: 0px;
    top: -30px;
    color: #784d96;
    font-size: 22px;
    font-weight: bolder;
}

.decimalListType {
    list-style-type: decimal;
    margin-left: 20px;
}

.decimalListTypeMoreMargin {
    list-style-type: decimal;
    margin-left: 25px;
}

.pictureDivAutomationDetail {
    width: 618px;
    height: 350px;
    background-image: url('/images/MMUI/content/automation.png');
    background-size: contain;
    background-repeat: no-repeat;
}

@keyframes lifetile {
    0% {
        top: 100%;
        z-index: 1;
    }

    100% {
        top: 0%;
        z-index: 2;
    }
}

@keyframes lifetile1 {
    0% {
        top: 100%;
        z-index: 1;
    }

    10% {
        top: 0%;
        z-index: 2;
    }

    90% {
        top: 0%;
        z-index: 2;
    }

    100% {
        top: -100%;
        z-index: 0;
    }
}

@media only screen and (max-height: 860px) and (orientation: landscape) {
    .viewscreen {
        transition: all 1s ease;
        overflow: visible;
        position: absolute;
        top: 0px;
        left: 0px;
        bottom: 0px;
        right: 0px;
        transform: scale(0.9, 0.9) translate(-6%, -8%);
    }

    .tileImageBottomText {
        font-size: 14px;
    }
}


@media only screen and (max-height: 720px) and (orientation: landscape) {
    .viewscreen {
        transition: all 1s ease;
        overflow: visible;
        position: absolute;
        top: 0px;
        left: 0px;
        bottom: 0px;
        right: 0px;
        transform: scale(0.8, 0.8) translate(-12%, -16%);
    }

    .tileImageBottomText {
        font-size: 16px;
    }
}

.sitenamelabelcontent {
    font-size: 50px;
}
/*.mainlabel .BackButton {
    top: 7px;
}*/

.mainlabelMMUINavSite {
    top: 103px;
}

.tile_wide_terravideo:hover .videotileFullscreenBtn{
    display:block;
}

.videotileFullscreenBtn {
    width: 40px;
    height: 40px;
    background-color: rgba(0,0,0,0.7);
    background-image: url(/MMUI/icons/windows10icons/OpenInNewTab32qpx_WHITE.png);
    background-size: 32px 32px;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
    display:none;
}

.videotileFullscreenBtn:hover {
    background-color: rgb(92,92,92);
}

/*--------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*--------------------------- Ansatz Nr. 2: Marke/Modell egal -> auf die CCS Width und CSS Height und die Pixel-Ratio kommt es an! ---------------------------*/
/*--------------------------------------------------------------------------------------------------------------------------------------------------------*/

/*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------Smartphones-----------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/* width:320px && portrait | (z.B. Microsoft Lumia 830, 920, 925, 1020; HTC 8X; Apple iPhone 4) */
@media only screen and (device-width: 320px) and (orientation: portrait) {
    .metroview {
        position: absolute;
        top: 12px;
        left: 0px;
        width: 100%;
        /*min-width: 1000%;*/
        height: 90%;
        transition: all 0.5s ease;
        /*max-height: 81%;*/
    }

    .metrocolumn {
        float: left;
        /*min-width: 10%;*/
        /*margin-right: 44px;*/
        width: 100%;
        margin-top: 50px;
        transition: all 0.3s ease;
        padding-bottom: 0px;
        border-style: solid;
        border-width: 1px;
        border-color: rgba(255,255,255,0);
        padding-left: 4px;
        padding-top: 4px;
        /*padding-right: 150px;*/
    }

    .mainlabel {
        position: absolute;
        font-family: 'Segoe UI', SgFont, Arial; /*Segoe, 'DejaVu Sans', 'Trebuchet MS', Verdana, sans-serif;*/
        font-weight: lighter;
        color: #fff;
        /*font-size: 50px;*/
        kerning: auto;
        letter-spacing: -2px;
        top: 17px;
        left: 7px;
        z-index: 100;
        transition: all 0.5s ease;
    }

    .sitenamelabelcontent {
        font-size: 28px;
    }

    .columngrouplabel {
        /*font-family: 'Segoe UI', SgFont, Arial;*/ /*Segoe, 'DejaVu Sans', 'Trebuchet MS', Verdana, sans-serif;*/
        font-family: 'DIN Offc Pro';
        font-weight: lighter;
        color: #fff;
        font-size: 13pt;
        kerning: auto;
        letter-spacing: -1px;
        position: relative;
        top: -8px;
        left: 4px;
    }

    .muiTable {
        width: 400px;
        table-layout: fixed;
    }

    .special_td {
        background-color: rgba(0,0,0,0);
        width: 100%;
        padding: 0px;
        margin: 0px;
        vertical-align: top;
        height: 100%;
        float: left;
    }

    .tile_bigwide {
        width: 305px;
        height: 150.1px;
        background: linear-gradient(to right, rgb(140,140,200) 0%,rgb(155,155,215) 100%);
    }

    .tile_bigsquare {
        width: 148.5px;
        height: 150.1px;
        background: linear-gradient(to right, rgb(140,140,200) 0%,rgb(155,155,215) 100%);
    }

    .tile_wide {
        width: 148.5px;
        height: 71.05px;
        background: linear-gradient(to right, rgb(140,140,200) 0%,rgb(155,155,215) 100%);
    }

    .tile_square_mid {
        width: 70.25px;
        height: 71.05px;
        background: linear-gradient(to right, rgb(140,140,200) 0%,rgb(155,155,215) 100%);
    }

    .tile_square_small {
        width: 31.125px;
        height: 31.525px;
        background: linear-gradient(to right, rgb(140,140,200) 0%,rgb(155,155,215) 100%);
        background-position: center center;
        background-size: contain;
    }
}
/* width:360px  && portrait | (z.B. Sony Xperia P, Xperia S, Xperia Z; HTC One; Samsung Galaxy S3, Galaxy S4 mini, Galaxy S4, Galaxy S5, Galaxy Note 2) */
@media only screen and (device-width: 360px) and (orientation: portrait) {
    body {
        touch-action: none;
    }

    .metroview {
        position: absolute;
        top: 12px;
        left: 15px;
        width: 100%;
        /*min-width: 1000%;*/
        height: 90%;
        transition: all 0.5s ease;
        /*max-height: 81%;*/
    }

    .metrocolumn {
        float: left;
        /*min-width: 10%;*/
        /*margin-right: 44px;*/
        width: 100%;
        margin-top: 50px;
        transition: all 0.3s ease;
        padding-bottom: 0px;
        border-style: solid;
        border-width: 1px;
        border-color: rgba(255,255,255,0);
        padding-left: 4px;
        padding-top: 4px;
        /*padding-right: 150px;*/
    }

    .mainlabel {
        position: absolute;
        font-family: 'Segoe UI', SgFont, Arial; /*Segoe, 'DejaVu Sans', 'Trebuchet MS', Verdana, sans-serif;*/
        font-weight: lighter;
        color: #fff;
        /*font-size: 50px;*/
        kerning: auto;
        letter-spacing: -2px;
        top: 35px;
        left: 25px;
        z-index: 100;
        transition: all 0.5s ease;
    }

    .sitenamelabelcontent {
        font-size: 28px;
    }

    .columngrouplabel {
        /*font-family: 'Segoe UI', SgFont, Arial;*/ /*Segoe, 'DejaVu Sans', 'Trebuchet MS', Verdana, sans-serif;*/
        font-family: 'DIN Offc Pro';
        font-weight: lighter;
        color: #fff;
        font-size: 13pt;
        kerning: auto;
        letter-spacing: -1px;
        position: relative;
        top: -8px;
        left: 4px;
    }

    .muiTable {
        width: 400px;
        table-layout: fixed;
    }

    .special_td {
        background-color: rgba(0,0,0,0);
        width: 100%;
        padding: 0px;
        margin: 0px;
        vertical-align: top;
        height: 100%;
        float: left;
    }

    .tile_dsCommercial {
        width: 370px;
        height: 208px;
        background: linear-gradient(to right, rgb(140,140,200) 0%,rgb(155,155,215) 100%);
    }


    .tile_commercial {
        width: 370px;
        height: 370px;
        background: linear-gradient(to right, rgb(140,140,200) 0%,rgb(155,155,215) 100%);
        border: 1px solid #784d96;
        background-color: green;
    }

    .tile_bigwide {
        width: 343px;
        height: 174.5px;
        background: linear-gradient(to right, rgb(140,140,200) 0%,rgb(155,155,215) 100%);
    }

    .tile_bigsquare {
        width: 181px;
        height: 181px;
        background: linear-gradient(to right, rgb(140,140,200) 0%,rgb(155,155,215) 100%);
    }

    .tile_wide {
        width: 181px;
        height: 86.5px;
        background: linear-gradient(to right, rgb(140,140,200) 0%,rgb(155,155,215) 100%);
    }

    .tile_square_mid {
        width: 79.75px;
        height: 83.25px;
        background: linear-gradient(to right, rgb(140,140,200) 0%,rgb(155,155,215) 100%);
    }

    .tile_square_small {
        width: 35.875px;
        height: 37.625px;
        background: linear-gradient(to right, rgb(140,140,200) 0%,rgb(155,155,215) 100%);
        background-position: center center;
        background-size: contain;
    }
}
/* width:640px && landscape (z.B. Sony Xperia Z2) */
@media only screen and (device-width: 640px) and (orientation: landscape) {
    body {
        touch-action: none;
    }

    .sitenamelabelcontent {
        font-size: 28px;
    }

    .metroview {
        position: absolute;
        top: 0px;
        left: 30px;
        width: auto;
        /*min-width: 1000%;*/
        height: 90%;
        transition: all 0.5s ease;
        /*max-height: 81%;*/
    }

    .metrocolumn {
        float: left;
        /*min-width: 10%;*/
        /*margin-right: 44px;*/
        width: 100%;
        margin-top: 50px;
        transition: all 0.3s ease;
        padding-bottom: 0px;
        border-style: solid;
        border-width: 1px;
        border-color: rgba(255,255,255,0);
        padding-left: 4px;
        padding-top: 4px;
        /*padding-right: 150px;*/
    }

    .mainlabel {
        position: absolute;
        font-family: 'Segoe UI', SgFont, Arial; /*Segoe, 'DejaVu Sans', 'Trebuchet MS', Verdana, sans-serif;*/
        font-weight: lighter;
        color: #fff;
        /*font-size: 50px;*/
        kerning: auto;
        letter-spacing: -2px;
        top: 20px;
        left: 35px;
        z-index: 100;
        transition: all 0.5s ease;
    }

    .special_td {
        background-color: rgba(0,0,0,0);
        width: 160px;
        padding: 0px;
        margin: 0px;
        vertical-align: top;
        height: 100%;
    }

    .tile_dsCommercial {
        width: 441px;
        height: 248px;
        background: linear-gradient(to right, rgb(140,140,200) 0%,rgb(155,155,215) 100%);
    }

    .tile_bigsquare {
        width: 160px;
        height: 160px;
        background: linear-gradient(to right, rgb(140,140,200) 0%,rgb(155,155,215) 100%);
    }

    .tile_wide {
        width: 160px;
        height: 76px;
        background: linear-gradient(to right, rgb(140,140,200) 0%,rgb(155,155,215) 100%);
    }
}

/*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------Tablets-----------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*  Second Try  */
/*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

/* 800px && portrait | ( Samsung Nexus 10 | Samsung Galaxy Tab 2 10" | Samsung Galaxy Tab (8.9") | Amazon Kindle Fire HD 8.9) */
@media only screen and (device-width:800px) and (orientation: portrait) {
    body {
        touch-action: none;
    }

    /*  START | Auflistungsseite    */
    .metroview {
        position: absolute;
        top: 115px;
        left: 45px;
        width: 555px;
        /*min-width: 1000%;*/
        height: 90%;
        transition: all 0.5s ease;
        /*max-height: 81%;*/
    }

    .metrocolumn {
        float: left;
        /*min-width: 10%;*/
        /*margin-right: 44px;*/
        width: 100%;
        margin-top: 5px;
        transition: all 0.3s ease;
        padding-bottom: 0px;
        border-style: solid;
        border-width: 1px;
        border-color: rgba(255,255,255,0);
        padding-left: 4px;
        padding-top: 4px;
        /*padding-right: 150px;*/
    }

    .mainlabel {
        position: absolute;
        font-family: 'Segoe UI', SgFont, Arial; /*Segoe, 'DejaVu Sans', 'Trebuchet MS', Verdana, sans-serif;*/
        font-weight: lighter;
        color: #fff;
        /*font-size: 50px;*/
        kerning: auto;
        letter-spacing: -2px;
        top: 17px;
        left: 50px;
        z-index: 100;
        transition: all 0.5s ease;
    }

    .sitenamelabelcontent {
        font-size: 50px;
    }

    .columngrouplabel {
        /*font-family: 'Segoe UI', SgFont, Arial;*/ /*Segoe, 'DejaVu Sans', 'Trebuchet MS', Verdana, sans-serif;*/
        font-family: 'DIN Offc Pro';
        font-weight: lighter;
        color: #fff;
        font-size: 13pt;
        kerning: auto;
        letter-spacing: -1px;
        position: relative;
        top: -8px;
        left: 4px;
    }

    .muiTable {
        width: 700px;
        table-layout: fixed;
    }

    .special_td {
        background-color: rgba(0,0,0,0);
        width: 716px;
        padding: 0px;
        margin: 0px;
        vertical-align: top;
        height: 100%;
        float: left;
    }

    .tile_wide {
        width: 346px;
        height: 163px;
        background: linear-gradient(to right, rgb(140,140,200) 0%,rgb (155,155,215) 100%);
    }


    .tile_bigsquare {
        width: 346px;
        height: 346px;
        background: linear-gradient(to right, rgb(140,140,200) 0%,rgb (155,155,215) 100%);
    }

    .tile_dsCommercial {
        width: 700px;
        height: 394px;
        background: linear-gradient(to right, rgb(140,140,200) 0%,rgb(155,155,215) 100%);
    }

    .tile_commercial {
        width: 700px;
        height: 700px;
        background: linear-gradient(to right, rgb(140,140,200) 0%,rgb(155,155,215) 100%);
    }

    .tile_square_mid {
        width: 169px;
        height: 169px;
        background: linear-gradient(to right, rgb(140,140,200) 0%,rgb(155,155,215) 100%);
    }
    /*  ENDE    | Auflistungsseite    */
}

/* 1280px && landscape | (Samsung Galaxy Tab 3 10" | Samsung Galaxy Tab 2 10" | Samsung Galaxy Tab (8.9") | Amazon Kindle Fire HD 8.9) */
@media only screen and (device-width:1280px) and (orientation: landscape) {
    body {
        touch-action: none;
        overflow-y: hidden;
        z-index: 0;
        /*-webkit-transform: translate(0);*/
        -webkit-overflow-scrolling: touch;
    }

    /*  START | Auflistungsseite    */

    .viewscreen {
        transition: all 1s ease;
        overflow: visible;
        position: absolute;
        top: 0px;
        left: 0px;
        bottom: 0px;
        right: 0px;
        transform: scale(0.9, 0.9) translate(-8%,-8%);
    }
    /*  Ende | Auflistungsseite    */
}

/*  First Try   */
/* 768px && portrait | (Apple iPad 1, 2, 3, 4, Air, mini) */
@media only screen and (device-width: 768px) and (orientation: portrait) {
    .metroview {
        position: absolute;
        top: 115px;
        left: 45px;
        width: 100%;
        /*min-width: 1000%;*/
        height: 90%;
        transition: all 0.5s ease;
        /*max-height: 81%;*/
    }

    .metrocolumn {
        float: left;
        /*min-width: 10%;*/
        /*margin-right: 44px;*/
        width: 100%;
        margin-top: 50px;
        transition: all 0.3s ease;
        padding-bottom: 0px;
        border-style: solid;
        border-width: 1px;
        border-color: rgba(255,255,255,0);
        padding-left: 4px;
        padding-top: 4px;
        /*padding-right: 150px;*/
    }

    .mainlabel {
        position: absolute;
        font-family: 'Segoe UI', SgFont, Arial; /*Segoe, 'DejaVu Sans', 'Trebuchet MS', Verdana, sans-serif;*/
        font-weight: lighter;
        color: #fff;
        /*font-size: 50px;*/
        kerning: auto;
        letter-spacing: -2px;
        top: 17px;
        left: 50px;
        z-index: 100;
        transition: all 0.5s ease;
    }

    .sitenamelabelcontent {
        font-size: 50px;
    }

    .columngrouplabel {
        /*font-family: 'Segoe UI', SgFont, Arial;*/ /*Segoe, 'DejaVu Sans', 'Trebuchet MS', Verdana, sans-serif;*/
        font-family: 'DIN Offc Pro';
        font-weight: lighter;
        color: #fff;
        font-size: 13pt;
        kerning: auto;
        letter-spacing: -1px;
        position: relative;
        top: -8px;
        left: 4px;
    }

    .muiTable {
        width: 700px;
        table-layout: fixed;
    }

    .special_td {
        background-color: rgba(0,0,0,0);
        width: 100%;
        padding: 0px;
        margin: 0px;
        vertical-align: top;
        height: 100%;
        float: left;
    }

    .tile_bigwide {
        width: 659px;
        height: 324.3px;
        background: linear-gradient(to right, rgb(140,140,200) 0%,rgb (155,155,215) 100%);
    }

    .tile_bigsquare {
        width: 325.5px;
        height: 324.3px;
        background: linear-gradient(to right, rgb(140,140,200) 0%,rgb (155,155,215) 100%);
    }

    .tile_wide {
        width: 325.5px;
        height: 158.15px;
        background: linear-gradient(to right, rgb(140,140,200) 0%,rgb (155,155,215) 100%);
    }

    .tile_square_mid {
        width: 158.75px;
        height: 158.15px;
        background: linear-gradient(to right, rgb(140,140,200) 0%,rgb (155,155,215) 100%);
    }

    .tile_square_small {
        width: 75.375px;
        height: 75.075px;
        background: linear-gradient(to right, rgb(140,140,200) 0%,rgb (155,155,215) 100%);
    }

    .body, html {
        position: fixed;
    }
}