@font-face {
    font-family: "Akkurat Bold";
    src: url("../webFonts/Akkurat-Bold.woff")format("woff");

}

:root{
    --mainBannerSize: 70vw;
    --heading: calc(var(--mainBannerSize) * 0.05);
    --mainBannerLeft: calc((100vw - var(--mainBannerSize)) * 0.5);
   /* --mainBannerTop: calc((100vh - calc(var(--mainBannerSize) * 1.4)) * 0.5); */
    --mainBannerTop: calc(var(--heading) * 6);
    --mainBannerTopInverse: calc(var(--heading) * -64.6);
    --letterSpacing: calc(var(--heading) * 0.8) ;
    --lineHeight: calc(var(--heading) * 1.5);
}

body{
    margin: 0;
    padding: 0;
    background-color: rgb(98, 110, 112);
    font-family:"Akkurat Bold";
	font-style:normal;
	color: #FFF;
    object-position: center;
    overflow: hidden;
}

.mainBanner{
  /*  max-width: var(--mainBannerMaxSize); */
    width: calc(var(--mainBannerSize) + 50px);
   /* max-height: var(--mainBannerMaxSize); */
    height: var(--mainBannerSize);
    font-size: var(--heading);
    letter-spacing: var(--letterSpacing);
    line-height: var(--lineHeight);
    object-position: center;
    left: var(--mainBannerLeft);
    top: var(--mainBannerTop);
    position: absolute;
}
.saleontomorrowImage{
    background-image: url(../images/ba8d085221814b92a524e5483216ead1.webp);
    background-size: cover;
  /*  max-width: var(--mainBannerMaxSize); */
    width: var(--mainBannerSize);
  /*  max-height: var(--mainBannerMaxSize); */
    height: calc(var(--mainBannerSize) - 11px);
}
.op{
    margin: 0;
    padding: 0;
    opacity: 1;
    float: left;
}
.no-op{
    margin: 0;
    padding: 0;
    opacity: 0.1;
    float: left;
    color: rgb(37, 68, 61);
}
.no-float{
    float: none;
}

.leftBanner{
    top: var(--mainBannerTop);
    position: absolute;
    right: calc(var(--mainBannerLeft) + var(--mainBannerSize) + 0px);
    font-size: var(--heading);
    letter-spacing: var(--letterSpacing);
    line-height: var(--lineHeight);
    margin: 0;
    padding: 0;
}
.topLeftBanner{
    top: var(--mainBannerTopInverse);
    position: absolute;
    right: calc(var(--mainBannerLeft) + var(--mainBannerSize) + 0px);
    font-size: var(--heading);
    letter-spacing: var(--letterSpacing);
    line-height: var(--lineHeight);
    margin: 0;
    padding: 0;
}
.topBanner{
    top: var(--mainBannerTopInverse);
    position: absolute;
    left: var(--mainBannerLeft);
    font-size: var(--heading);
    letter-spacing: var(--letterSpacing);
    line-height: var(--lineHeight);
    margin: 0;
    padding: 0;
}
.rightBanner{
    top: var(--mainBannerTop);
    position: absolute;
    left: calc(var(--mainBannerLeft) + var(--mainBannerSize) + 12px);
    font-size: var(--heading);
    letter-spacing: var(--letterSpacing);
    line-height: var(--lineHeight);
    margin: 0;
    padding: 0;
}
.topRightBanner{
    top: var(--mainBannerTopInverse);
    position: absolute;
    left: calc(var(--mainBannerLeft) + var(--mainBannerSize) + 12px);
    font-size: var(--heading);
    letter-spacing: var(--letterSpacing);
    line-height: var(--lineHeight);
    margin: 0;
    padding: 0;
}

@media screen and (min-width: 500px) {

    :root{
        --mainBannerSize: calc(500px * 0.7);
    }

}