html,
body
{

    margin: 0;
    padding: 0;

}

body
{

    display: flex;
    align-items: center;
    justify-content: center;

}

img.block
{

    display: block;
    width: 100%;
    height: auto;

}

img.clean
{

    margin: 0;
    padding: 0;
    image-rendering: -webkit-optimize-contrast;

}

#display
{

    display: flex;
    width: 100%;
    overflow: hidden;
    align-items: center;
    justify-content: center;

}

#viewport
{

    display: flex;
    position: relative;
    flex-wrap: wrap;
    width: 100%;
    max-width: 1600px;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    align-items: center;
    justify-content: center;
    background-color: white;

}

#viewport .button,
#viewport div[class*="background-"]
{

    display: block;
    position: absolute;

}

#viewport .panel 
{

    position: relative;
    flex-grow: 1;
    flex-basis: 50%;

}

#viewport .background-element-1
{

    width: 29.370833333%;
    top: initial;
    left: 26.822916666%;
    right: initial; 
    bottom: 4.074074074%;

}

#viewport #panel-1 .button.menu 
{

    width: 14.53125%;
    top: 25.925925925%;
    left: 80.625%;
    right: initial;
    bottom: initial;

}

#viewport #panel-1 .button.marker 
{

    width: 6.354166666%;
    top: 4.537037037%;
    left: 37.395833333%;
    right: initial;
    bottom: initial;

}



#viewport #panel-1 .background-main
{

    width: 55.178125%;
    top: 10.925925925%;
    left: initial;
    right: 10.208333333%;
    bottom: initial;

}

#viewport #panel-1 .background-element-1
{

    width: 19.375%;
    top: 30.925925925%;
    left: -1.354166666%;
    right: initial; 
    bottom: initial;

} 

#viewport #panel-1 .background-element-2
{

    width: 10.416666666%;
    top: 40.833333333%;
    left: 12.916666666%;
    right: initial; 
    bottom: initial;

} 

#viewport #panel-1 .background-element-3
{

    width: 29.675%;
    top: 8.518518518%;
    left: -10.104166666%;
    right: initial; 
    bottom: initial;

}

#viewport #panel-2 .button.cart 
{

    width: 11.770833333%;
    top: 6.481481481%;
    left: 35.520833333%;
    right: initial;
    bottom: initial;

}

#viewport #panel-2 .button.whatsapp 
{

    width: 36.458333333%;
    top: initial;
    left: initial;
    right: 33.4375%;
    bottom: 4.259259259%; 

}

#viewport #panel-2 .button.facebook 
{

    width: 20.520833333%;
    top: initial;
    left: initial;
    right: 17.395833333%;
    bottom: 11.203703703%;

}

#viewport #panel-2 .button.instagram 
{

    width: 8.229166666%;
    top: 18.796296296%;
    left: 14.6875%;
    right: initial;
    bottom: initial;

}

#viewport #panel-2 .background-main
{

    width: 57.75%;
    top: 10.925925925%;
    left: 18.125%;
    right: initial;
    bottom: initial;

} 

#viewport #panel-2 .background-element-1
{

    width: 89.465625%;
    top: 34.166666666%;
    left: initial;
    right: -8.854166666%; 
    bottom: initial;

}

#viewport #panel-2 .background-element-2
{

    width: 1.778125%;
    top: 23.796296296%;
    left: initial;
    right: 12.395833333%; 
    bottom: initial;

}

@media (orientation: portrait) {

    #viewport
    {

        padding-right: 11.5%;

    }
    
    #viewport .panel 
    {

        flex-basis: 100%;

    }

    #viewport .background-element-1
    {

        width: 52.214814814%;
        top: initial;
        left: initial;
        right: 0;
        bottom: 16.770833333vw;

    }

    #viewport #panel-2
    {

        left: 15.7%;
        margin-top: -21vw;
        margin-bottom: 14vw;

    }

    #viewport #panel-2 .button.whatsapp 
    {

        top: calc(100% + 1vw);
        right: 3%;
        bottom: initial;

    }

}