/* ---------------------- PORTRAIT ---------------------- */

@media screen and (orientation: portrait)
{
    body {height: 100vh;}

    html {
        background: url(./img/audio-3817292_1920-hoch.jpg) no-repeat center center fixed; 
        background-size: cover;
    }

    #wrapper > img, #wrapper > a > img {
        width: 60%;
        height: auto;
        top: 5%;
        left:20%;
        transition: ease 0.5s;
    }

    #social {
        position: absolute;
        transition: ease 0.5s;
        top: 35%;
        left: 42%;
    }

    #social a:hover .roll-over, 
    #social a:focus .roll-over, 
    #social a:active .roll-over,
    #social a#wa:hover .roll-over, 
    #social a#wa:focus .roll-over, 
    #social a#wa:active .roll-over {
        display: none;
    }
}

@media screen and (orientation: portrait) and (min-width: 550px)
{
    body {height: 100vh;}
    
    html {
        background: url(./img/audio-3817292_1920-hoch.jpg) no-repeat center center fixed; 
        background-size: cover;
    }
    
    #social {
        transition: ease 0.5s;
        top: 40%;
    }
}

@media screen and (orientation: portrait) and (min-width: 700px)
{
    #social {
        transition: ease 0.5s;
        top: 45%;
    }
}

@media screen and (orientation: portrait) and (min-width: 850px)
{
    #social {
        width: 12%;
        left: 44%;
        transition: ease 0.5s;
        top: 50%;
    }
}

@media screen and (orientation: portrait) and (min-width: 950px)
{
    #social {
        width: 10%;
        left: 45%;
        transition: ease 0.5s;
        top: 55%;
    }
}

@media screen and (orientation: portrait) and (min-width: 1100px)
{
    #social {
        width: 8%;
        left: 46%;
        transition: ease 0.5s;
        top: 50%;
    }
}

/* ---------------------- LANDSCAPE ---------------------- */


@media screen and (orientation: landscape)
{
    #wrapper > img, #wrapper > a > img {
        width: 50%;
        height: auto;
        top:20%;
        left:25%;
        transition: ease 0.5s;
    }

    #social {
        width: 70px;
        position: fixed;
        transition: ease 0.5s;
        top: 35%;
        left: 10px;
    }
}
@media screen and (orientation: landscape) and (min-width: 1000px)
{
    #wrapper > img, #wrapper > a > img {
        top:23%;
        transition: ease 0.5s;
      }
}

@media screen and (orientation: landscape) and (min-width: 1300px)
{
    #wrapper > img, #wrapper > a > img {
        top:20%;
        transition: ease 0.5s;
      }
}

@media screen and (orientation: landscape) and (min-width: 1800px)
{
    #wrapper > img, #wrapper > a > img {
        width: 40%;
        height: auto;
        top:25%;
        left: 30%;
        transition: ease 0.5s;
      }
}

@media screen and (orientation: landscape) and (min-width: 2000px)
{
    #wrapper > img, #wrapper > a > img {
        width: 30%;
        height: auto;
        left: 35%;
        transition: ease 0.5s;
      }
}