/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 30.10.2017, 10:04:56
    Author     : Martin
*/

@media only screen and (orientation: landscape) {
    html, body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
    }

    div {
        color: grey;
        font-family: Verdana, Helvetica, Arial;
        text-align: center;
        vertical-align: middle;
    }

    #main {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
    }

    .container {
        width: 100%;
        height: 33.3%;
        box-sizing: border-box;
    }

    #left-top, 
    #left-bottom,
    #right-top,
    #right-bottom {
        width: 50%;
        height: 100%;
        box-sizing: border-box;
        border: 1px solid white;
    }

    #left-top {
        background-image: url(../images/metall01.jpg);
        background-size: 100% 100% !important;
    }

    #left-bottom {
        background-image: url(../images/metall02.jpg);
    }

    #right-top {
        background-image: url(../images/land02.jpg);
    }
    #right-bottom {
        background-image: url(../images/land01.jpg);
    }

    #left-top,
    #left-bottom,
    #right-top,
    #right-bottom {
        background-size: 100% auto;
        background-position: center;
        background-repeat: no-repeat;
    }

    .left:not(.mid){
        float: left;
    }

    .right:not(.mid) {
        float: right;
    }

    .mid {
        float: left;
        width: 33.33%;
        height: 100%;
        vertical-align: middle;
        display: inline-block;
        padding: 0;
        margin: 0;
    }

    #mid-mid {
        background-image: url(../images/logo.jpg);
        background-size: 100% auto;
        background-color: white;
        background-repeat: no-repeat;
        background-position: center;
    }

    .mid p {
        position: relative;
        top: calc(50% - 24px);
        font-size: 1em;        
        line-height: 48px;
        height: 48px;
        vertical-align: middle;
        box-sizing: border-box;
        display: inline-block;
        color: black;
        margin: 0;
        padding: 0;
    }

    #left-mid p,
    #left-mid p a {
        color: #2D378B;
        text-decoration: none;
    }

    #right-mid p,
    #right-mid p a {
        color: #A9B102;
        text-decoration: none;
    }

    #contact {
        width: 33.33%;
        max-width: 33.33%;
        height: auto;
        max-height: 23.33%;
        vertical-align: middle;
        background-color: white;
        opacity: 0.9;
        border-radius: 10px;
        position: absolute;
        left: 33.33%;
        bottom: 10px;
        padding: 0;
    }

    #contact p {
        color: black;
        font-size: 0.8em;
        line-height: 1.2em;
        font-weight: normal;
    }

    #contact p a {
        text-decoration: none;
    }

    #contact p a:hover {
        text-decoration: underline;
    }
    
    @media only screen and (width: 640px) and (height: 384px) {
        #contact p {
            font-size: 0.6em;
        }
    }
    @media only screen and (width: 640px) and (height: 360px) {
        #contact p {
            font-size: 0.6em;
        }
    }
    @media only screen and (width: 598px) and (height: 335px) {
        #contact p {
            font-size: 0.6em;
        }
    }    
    @media only screen and (width: 598px) and (height: 280px) {
        #contact p {
            font-size: 0.5em;
        }
    }    
    
    @media only screen and (width: 732px) and (height: 412px) {
        #contact p {
            font-size: 0.6em;
        }
    }     
    @media only screen and (width: 533px) and (height: 320px) {
        #contact p {
            font-size: 0.5em;
        }
    }    
    @media only screen and (width: 480px) and (height: 320px) {
        .mid p {
            font-size: 0.8em;
        }
        #contact p {
            font-size: 0.5em;
        }
    }      
    @media only screen and (width: 684px) and (height: 388px) {
        #contact p {
            font-size: 0.6em;
        }
    }  
    @media only screen and (width: 568px) and (height: 320px) {
        #contact p {
            font-size: 0.5em;
        }
    }   
    @media only screen and (width: 667px) and (height: 375px) {
        #contact p {
            font-size: 0.6em;
        }
    }
    @media only screen and (width: 736px) and (height: 414px) {
        #contact p {
            font-size: 0.6em;
        }
    }   
    @media only screen and (width: 1366px) and (height: 1024px) {
        .mid p {
            font-size: 2em;
        }        
        #contact p {
            font-size: 1.2em;
        }
    }   
    @media only screen and (width: 1920px) and (height: 1200px) {
        .mid p {
            font-size: 2em;
        }        
        #contact p {
            font-size: 1.2em;
        }
    }    
    @media only screen and (min-width: 1025px) {
        .mid p {
            font-size: 2em;
        }
        #mid-mid {
            background-image: url(../images/logo.jpg);
            background-size: 40% auto;
            background-color: white;
            background-repeat: no-repeat;
            background-position: center;
        }   
        #contact p {
            font-size: 1.2em;
        }        
    }
}

@media only screen and (orientation: portrait) {
    html, body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
    }

    div {
        color: grey;
        font-family: Verdana, Helvetica, Arial;
        font-size: 1em;
        line-height: 36px;
        text-align: center;
        vertical-align: middle;
    }

    #main {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
    }

    .container {
        width: 100%;
        height: 33.3%;
        box-sizing: border-box;
    }

    #left-top, 
    #left-bottom,
    #right-top,
    #right-bottom {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        border: 1px solid white;
    }

    #left-top {
        background-image: url(../images/metall01.jpg);
        background-size: 100% 100% !important;
    }

    #left-bottom {
        display: none;
    }

    #right-top {
        display: none;
    }
    #right-bottom {
        background-image: url(../images/land02.jpg);
    }

    #left-top,
    #left-bottom,
    #right-top,
    #right-bottom {
        background-size: 100% auto;
        background-position: center;
        background-repeat: no-repeat;
    }

    .left:not(.mid){
        float: left;
    }

    .right:not(.mid) {
        float: right;
    }

    .mid {
        float: left;
        width: 100%;
        height: 33.33%;
        vertical-align: middle;
        display: inline-block;
        padding: 0;
        margin: 0;
    }

    #mid-mid {
        background-image: url(../images/logo.jpg);
        background-size: auto 100%;
        background-color: white;
        background-repeat: no-repeat;
        background-position: center;
    }

    .mid p {
        position: relative;
        top: calc(50% - 24px);
        line-height: 48px;
        height: 48px;
        vertical-align: middle;
        box-sizing: border-box;
        display: inline-block;
        color: black;
        margin: 0;
        padding: 0;
    }

    #left-mid p,
    #left-mid p a {
        color: #2D378B;
        text-decoration: none;
    }

    #right-mid p,
    #right-mid p a {
        color: #A9B102;
        text-decoration: none;
    }

    #contact {
        width: 50%;
        max-width: 50%;
        height: auto;
        max-height: 23.33%;
        vertical-align: middle;
        background-color: white;
        opacity: 0.9;
        border-radius: 5px;
        position: absolute;
        left: 25%;
        bottom: 10px;
    }

    #contact p {
        display: inline-block;
        color: black;
        font-size: 0.5em;
        line-height: 16px;
        font-weight: normal;
    }

    #contact p a {
        text-decoration: none;
    }

    #contact p a:hover {
        text-decoration: underline;
    }
    
    @media only screen and (max-width: 384px) and (max-height: 640px) {
        #contact p {
            font-size: 0.6em;
        }
    }
    @media only screen and (max-width: 600px) and (max-height: 1024px) {
        .mid p {
            font-size: 2em;
        }
        #contact p {
            font-size: 0.5em;
            line-height: 1em;
        }
    }
    @media only screen and (max-width: 360px) and (max-height: 640px) {
        #contact p {
            font-size: 0.5em;
        }
    } 
    
    @media only screen and (width: 412px) and (height: 732px) {
        #contact p {
            font-size: 0.6em;
        }
    }     
    @media only screen and (width: 320px) and (height: 533px) {
        #contact p {
            font-size: 0.5em;
        }
    }    
    @media only screen and (width: 320px) and (height: 480px) {
        .mid p {
            font-size: 0.8em;
        }
        #contact p {
            font-size: 0.5em;
        }
    }      
    @media only screen and (width: 388px) and (height: 684px) {
        #contact p {
            font-size: 0.6em;
        }
    }  
    @media only screen and (width: 320px) and (height: 568px) {
        #contact p {
            font-size: 0.5em;
        }
    }   
    @media only screen and (width: 375px) and (height: 667px) {
        #contact p {
            font-size: 0.6em;
        }
    }
    @media only screen and (width: 414px) and (height: 736px) {
        #contact p {
            font-size: 0.6em;
        }
    }   
    @media only screen and (width: 412px) and (height: 660px) {
        #contact p {
            font-size: 0.6em;
        }
    }      
    @media only screen and (width: 1024px) and (height: 1366px) {
        .mid p {
            font-size: 2em;
        }        
        #contact p {
            font-size: 0.5em;
            line-height: 1em;
        }
    }   
    @media only screen and (width: 1200px) and (height: 1920px) {
        .mid p {
            font-size: 2em;
        }        
        #contact p {
            font-size: 0.5em;
            line-height: 1em;            
        }
    }    
    @media only screen and (width: 800px) and (height: 1280px) {
        .mid p {
            font-size: 2em;
        }
        #contact p {
            font-size: 0.5em;
            line-height: 1em;
        }
    }
    @media only screen and (width: 600px) and (height: 960px) {
        .mid p {
            font-size: 1.8em;
        }
        #contact p {
            font-size: 0.5em;
            line-height: 1em;
        }
    }
    @media only screen and (width: 480px) and (height: 854px) {
        .mid p {
            font-size: 1.8em;
        }
        #contact p {
            font-size: 0.5em;
            line-height: 1em;
        }
    }
    @media only screen and (width: 768px) and (height: 1024px) {
        .mid p {
            font-size: 1.8em;
        }
        #contact p {
            font-size: 1em;
            line-height: 1.2em;
        }
    }       
}