*{
    box-sizing: border-box;
    margin:0;
    padding:0;
}

body{
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}


.wrapper{
    width:100vw;
    height:auto;
    min-width:375px;
    background-color: #f4ecd8;
    display: flex;
    flex-direction: column;
    overflow-x:hidden;
}
header{
    width:100%;
    height:auto;
    background-image:radial-gradient(white 30%,#f4ecd8 70%) ;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex-shrink:0 ;
}
.backgroundimage{
    position: absolute;
    width: 100%;
    z-index: 1;
}
#headerLogo{
    display: block;
    width:85%;
    margin:1rem auto;
    position: relative;
    z-index: 2;
}
nav{
    justify-content: flex-end;
    width: 100%;
    z-index: 2;
}
ul{
    width: 100%;
    padding:.6rem;
    text-align: center;
    background-color: #800000;
}
li{
    display: inline;
    color:white;
    padding-right:.8rem;
}
.qualities{
    display: none;
}
a{
    cursor:pointer;
    text-decoration: none;
    color:white;
}
a:hover{
    text-decoration: none;
}
.media{
    display: block;
    width:100vw;
    z-index: 2;
    position: relative;
}
#mainImage{
    width: 100%;
    height:100%;
    object-fit:cover;
    display: block;
}
#myVideo{
    display: block;
    height:60vh;
    object-fit: cover;
    position:relative;
    left:-70%;
}
footer{
    display:block;
    text-align: center;
    padding:2rem;
    
}

.footerelements{
    margin-bottom: 1rem;
}

#footerLogo{
    z-index: 2;
    width:40%;
    min-width:100px;
    max-width: 250px;
    margin-bottom: 1rem;
}

footer p{
    z-index: 2;
}

#phonenumberfooter{
    z-index: 2;
    color:black;
}

.socials{
    z-index: 2;
    width:8%;
    margin-right:.5rem;
    margin-left:.5rem;
}










@media (orientation:landscape) and (hover:none) and (pointer: coarse){

    #headerLogo{
        width:60%;
    }
    li{
        font-size: 1.5rem;
        padding-right:1.4rem
    }
    #myVideo{
        width:150%;
        left:-30%;
        height:99vh;
    }
    .socials{
        width:5%;
    }

}










@media (pointer: coarse) and (orientation: portrait) and (max-width:540px){

    #myVideo{
        left:-30%;
    }

}








@media (orientation:landscape) and (hover:hover) and (pointer: fine){

    .wrapper{
        flex-direction: row;
    }
    header{
        display: flex;
        width:40%;
        min-width:400px;
        height:100vh;
        z-index: 2;
    }
    .qualities{
        display: block;
        text-align: center;
        font-size: 2rem;
        line-height:3rem;
        color:#800000;
        margin:2rem auto;
    }
    .phonenumber{
        display: block;
        position:relative;
        z-index: 3;
    }

    .media{
        display: flex;
        flex-grow:1;
        height:100vh;
        position: relative;
        overflow:hidden;
        justify-content: center;
        background-color:rgb(230, 219, 188);
    }
    #mainImage{
        height:100%;
        width:auto;
        object-fit:contain;
    }
    footer{
        display: none;
    }


}





@media (orientation:portrait) and (hover:hover) and (pointer: fine){

    .media{
        display: block;
    }
    #myVideo{
        position: static;
        height:110vh;
        transform:translateX(-40%);
        z-index: 1;
        left:0;
    }


}