:root {
    --main-padding: 0;
    --maindiv-left: 0;
    --logo-dimension: 50px;
    --shapes-dimensions: calc(385px + 4vw);
    --logo1-width: calc(175px + 1.75vw);
    --logos234-width: calc(74px + 1.7vw);
    --logo5-width: calc(62px + 1.7vw);
    --logo6-width: calc(54px + 1.7vw);
    --logo7-width: calc(78px + 1.7vw);
    --logo1-left: calc(450px + 2.5vw);
    --logo1-top: calc(160px + 2.3vw);
    --logo2-left: calc(345px + 2.8vw);
    --logo2-top: calc(400px + 1vw);
    --logo3-left: calc(90px + 3.1vw);
    --logo3-top: calc(430px + 3.4vw);
    --logo4-left: calc(-55px - 1vw);
    --logo4-top: calc(278px + 3vw);
    --logo5-left: calc(-60px - 0.25vw);
    --logo5-top: calc(41px + 2.25vw);
    --logo6-left: calc(102px + 2vw);
    --logo6-top: calc(-80px - 0.75vw);
    --logo7-left: calc(337px + 3vw);
    --logo7-top: calc(-15px - 1.5vw);
    --h2-fontsize: 20px;
    --p-fontsize: 13.5px;
    --desc1-margintop: calc(65px + 2vw);
    --desc2-margintop: calc(90px + 2vw);
    --desc3-margintop: calc(85px + 2vw);
    --desc4-margintop: calc(25px + 2vw);
    --desc5-margintop: calc(25px + 2vw);
    --desc6-margintop: calc(35px + 2vw);
    --desc7-margintop: calc(70px + 2vw);
}


@media screen and (max-width: 1050px) {
    :root {
        --shapes-dimensions: calc(350px + 3vw);
        --logo1-width: calc(160px + 1.5vw);
        --logos234-width: calc(64px + 1.5vw);
        --logo5-width: calc(52px + 1.5vw);
        --logo6-width: calc(44px + 1.5vw);
        --logo7-width: calc(68px + 1.5vw);
        --logo1-left: calc(400px + 2vw);
        --logo1-top: calc(140px + 2.3vw);
        --logo2-left: calc(310px + 2vw);
        --logo2-top: calc(360px + 0.4vw);
        --logo3-left: calc(90px + 1.5vw);
        --logo3-top: calc(390px + 2.5vw);
        --logo4-left: calc(-65px - 0.5vw);
        --logo4-top: calc(247px + 2.5vw);
        --logo5-left: calc(-55px - 1vw);
        --logo5-top: calc(29px + 2.5vw);
        --logo6-left: calc(85px + 2.5vw);
        --logo6-top: calc(-75px - 1vw);
        --logo7-left: calc(305px + 2.5vw);
        --logo7-top: calc(-30px - 0.5vw);
        --h2-fontsize: 16px;
        --p-fontsize: 11px;
        --desc1-margintop: calc(69px + 1.5vw);
        --desc2-margintop: calc(89px + 1.5vw);
        --desc3-margintop: calc(100px + 1.5vw);
        --desc4-margintop: calc(40px + 1.5vw);
        --desc5-margintop: calc(36px + 1.5vw);
        --desc6-margintop: calc(50px + 1.5vw);
        --desc7-margintop: calc(85px + 1.5vw);
    }
}

@media screen and (max-width: 850px) {
    :root {
        --logo1-width: 50px;
        --logos234-width: 50px;
        --logo5-width: 50px;
        --logo6-width: 50px;
        --logo7-width: 50px;
        --logo1-left: calc(400px + 1.2vw);
        --logo1-top: calc(147px + 2.1vw);
        --logo2-left: calc(302px + 2vw);
        --logo2-top: calc(350px + 0.4vw);
        --logo3-left: calc(95px + 1.5vw);
        --logo3-top: calc(385px + 2.5vw);
        --logo4-left: calc(-60px - 0.5vw);
        --logo4-top: calc(250px + 2.5vw);
        --logo5-left: calc(-52px - 1.1vw);
        --logo5-top: calc(42px + 2vw);
        --logo6-left: calc(89px + 2vw);
        --logo6-top: calc(-70px - 1vw);
        --logo7-left: calc(295px + 2.6vw);
        --logo7-top: calc(-29px - 0.5vw);
        --desc1-margintop: calc(69px + 1.5vw);
        --desc2-margintop: calc(89px + 1.5vw);
        --desc3-margintop: calc(90px + 1.5vw);
        --desc4-margintop: calc(40px + 1.5vw);
        --desc5-margintop: calc(36px + 1.5vw);
        --desc6-margintop: calc(50px + 1.5vw);
        --desc7-margintop: calc(75px + 1.5vw);
    }
}

@media screen and (max-width: 575px) {
    :root {
        --maindiv-left: -46%;
        --logo1-left: calc(392px + 1.2vw);
        --logo1-top: calc(147px + 2.1vw);
        --logo2-left: calc(300px + 2vw);
        --logo2-top: calc(340px + 0.4vw);
        --logo3-left: calc(97px + 1.5vw);
        --logo3-top: calc(380px + 2.5vw);
        --logo4-left: calc(-56px - 0.5vw);
        --logo5-left: calc(-55px - 1.1vw);
        --logo5-top: calc(43px + 2vw);
        --logo6-left: calc(94px + 2vw);
        --logo6-top: calc(-72px - 1vw);
    }
}

@media screen and (max-width: 400px) {
    :root {
        --h2-fontsize: 14px;
        --maindiv-left: calc(var(--shapes-dimensions) * -0.575);
    }
}

@media screen and (min-width: 1350px) {
    :root {
        --p-fontsize: 13.5px;
        --desc1-margintop: calc(60px + 2vw);
        --desc2-margintop: calc(85px + 2vw);
        --desc3-margintop: calc(85px + 2vw);
        --desc4-margintop: calc(35px + 1.8vw);
        --desc5-margintop: calc(25px + 1.8vw);
        --desc6-margintop: calc(45px + 1.8vw);
        --desc7-margintop: calc(60px + 2vw);
    }
}

@media screen and (min-width: 1650px) {
    :root {
        --main-padding: calc(100px + 1vw);
        --shapes-dimensions: calc(550px + 10vw);
        --logo-dimension: 75px;
        --logo1-width: calc(275px + 5vw);
        --logos234-width: calc(122px + 2.5vw);
        --logo5-width: calc(99px + 2vw);
        --logo6-width: calc(84px + 2.5vw);
        --logo7-width: calc(129px + 2.5vw);
        --logo1-left: calc(620px + 10.5vw);
        --logo1-top: calc(235px + 4.7vw);
        --logo2-left: calc(475px + 9vw);
        --logo2-top: calc(500px + 10vw);
        --logo3-left: calc(150px + 4vw);
        --logo3-top: calc(600px + 10.5vw);
        --logo4-left: calc(-85px - 0.5vw);
        --logo4-top: calc(390px + 8vw);
        --logo5-left: calc(-75px - 1.5vw);
        --logo5-top: calc(80px + 2.5vw);
        --logo6-left: calc(160px + 3vw);
        --logo6-top: calc(-105px - 1.3vw);
        --logo7-left: calc(470px + 8.5vw);
        --logo7-top: calc(-35px - 0.5vw);
        --h2-fontsize: 26px;
        --p-fontsize: 18px;
        --desc1-margintop: calc(115px + 5vw);
        --desc2-margintop: calc(140px + 5vw);
        --desc3-margintop: calc(145px + 5vw);
        --desc4-margintop: calc(100px + 5vw);
        --desc5-margintop: calc(100px + 5vw);
        --desc6-margintop: calc(100px + 5vw);
        --desc7-margintop: calc(140px + 5vw);
    }
}

@media screen and (min-width: 2000px) {
    :root {
        --h2-fontsize: 28px;
        --p-fontsize: 20px;
        --desc1-margintop: calc(115px + 5vw);
        --desc2-margintop: calc(140px + 5vw);
        --desc3-margintop: calc(145px + 5vw);
        --desc4-margintop: calc(65px + 5vw);
        --desc5-margintop: calc(65px + 5vw);
        --desc6-margintop: calc(65px + 5vw);
        --desc7-margintop: calc(105px + 5vw);
    }
}

@media screen and (min-width: 2350px) {
    :root {
        --h2-fontsize: 31px;
        --p-fontsize: 23px;
        --desc1-margintop: calc(80px + 5vw);
        --desc2-margintop: calc(130px + 5vw);
        --desc3-margintop: calc(110px + 5vw);
        --desc4-margintop: calc(30px + 5vw);
        --desc5-margintop: calc(25px + 5vw);
        --desc6-margintop: calc(55px + 5vw);
        --desc7-margintop: calc(80px + 5vw);
    }
}

@media screen and (min-width: 2650px) {
    :root {
        --h2-fontsize: 34px;
        --p-fontsize: 26px;
        --desc1-margintop: calc(25px + 5vw);
        --desc2-margintop: calc(100px + 5vw);
        --desc3-margintop: calc(85px + 5vw);
        --desc4-margintop: calc(10px + 3.5vw);
        --desc5-margintop: calc(10px + 3.5vw);
        --desc6-margintop: calc(35px + 3.5vw);
        --desc7-margintop: calc(45px + 5vw);
    }
}

@media screen and (min-width: 3000px) {
    :root {
        --h2-fontsize: 36px;
        --p-fontsize: 28px;
        --desc1-margintop: calc(35px + 4vw);
        --desc2-margintop: calc(90px + 5vw);
        --desc3-margintop: calc(70px + 5vw);
        --desc4-margintop: calc(30px + 2.5vw);
        --desc5-margintop: calc(10px + 2.5vw);
        --desc6-margintop: calc(55px + 2.5vw);
        --desc7-margintop: calc(45px + 5vw);
    }
}

@media screen and (min-width: 3350px) {
    :root {
        --shapes-dimensions: calc(550px + 15vw);
        --logo1-width: calc(275px + 5vw);
        --logos234-width: calc(122px + 2.5vw);
        --logo5-width: calc(99px + 2vw);
        --logo6-width: calc(84px + 2.5vw);
        --logo7-width: calc(129px + 2.5vw);
        --logo1-left: calc(660px + 15vw);
        --logo1-top: calc(257px + 6.7vw);
        --logo2-left: calc(528px + 12vw);
        --logo2-top: calc(578px + 12.6vw);
        --logo3-left: calc(208px + 4.5vw);
        --logo3-top: calc(595px + 16vw);
        --logo4-left: calc(-95px - 0.5vw);
        --logo4-top: calc(430px + 10.8vw);
        --logo5-left: calc(-40px - 1.8vw);
        --logo5-top: calc(95px + 3.6vw);
        --logo6-left: calc(200px + 4vw);
        --logo6-top: calc(-50px - 2.65vw);
        --logo7-left: calc(490px + 11.8vw);
        --logo7-top: calc(-20px - 0.5vw);
        --h2-fontsize: 38px;
        --p-fontsize: 30px;
        --desc1-margintop: calc(35px + 7vw);
        --desc2-margintop: calc(90px + 7.5vw);
        --desc3-margintop: calc(70px + 7vw);
        --desc4-margintop: calc(30px + 5vw);
        --desc5-margintop: calc(10px + 5vw);
        --desc6-margintop: calc(55px + 5vw);
        --desc7-margintop: calc(45px + 7vw);
    }
}

@media screen and (min-width: 3650px) {
    :root {
        --h2-fontsize: 40px;
        --p-fontsize: 32px;
        --desc1-margintop: calc(40px + 6vw);
        --desc2-margintop: calc(95px + 6.5vw);
        --desc3-margintop: calc(90px + 6vw);
        --desc4-margintop: calc(65px + 4vw);
        --desc5-margintop: calc(60px + 4vw);
        --desc6-margintop: calc(60px + 4vw);
        --desc7-margintop: calc(50px + 6vw);
    }
}

@media screen and (min-width: 4000px) {
    :root {
        --h2-fontsize: 42px;
        --p-fontsize: 34px;
    }
}

@media screen and (min-width: 4350px) {
    :root {
        --h2-fontsize: 44px;
        --p-fontsize: 36px;
    }
}

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

    :root {
        --h2-fontsize: 46px;
        --p-fontsize: 38px;
    }
}

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

    :root {
        --h2-fontsize: 48px;
        --p-fontsize: 40px;
        --desc1-margintop: calc(40px + 5vw);
        --desc2-margintop: calc(95px + 5.5vw);
        --desc3-margintop: calc(90px + 5vw);
        --desc4-margintop: calc(65px + 3vw);
        --desc5-margintop: calc(60px + 3vw);
        --desc6-margintop: calc(60px + 3vw);
        --desc7-margintop: calc(50px + 5vw);
    }
}

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

    :root {
        --shapes-dimensions: 1352.55px;

        --logo1-width: 550px;
        --logos234-width: 259.5px;
        --logo5-width: 209px;
        --logo6-width: 218px;
        --logo7-width: 266.5px;
        --logo1-left: 1485px;
        --logo1-top: 625.5px;
        --logo2-left: 1188px;
        --logo2-top: 1271px;
        --logo3-left: 455.5px;
        --logo3-top: 1475px;
        --logo4-left: -122.5px;
        --logo4-top: 1024px;
        --logo5-left: -139px;
        --logo5-top: 293px;
        --logo6-left: 414.016px;
        --logo6-top: -191.786px;
        --logo7-left: 1121.350px;
        --logo7-top: -46.752px;
        --h2-fontsize: 50px;
        --p-fontsize: 42px;
        --desc1-margintop: 315px;
        --desc2-margintop: 397.5px;
        --desc3-margintop: 365px;
        --desc4-margintop: 230px;
        --desc5-margintop: 225px;
        --desc6-margintop: 225px;
        --desc7-margintop: 325px;
    }
}

/** help to define the logos position around the wheel - to comment when unused
.logo{
  background: blue;
}
.testLogo{
  margin-left: calc(845px + 15vw);
  margin-top: -30px;
  background: red;
  transform: unset !important;
}
**/


/* general */
#partnersLogosWheel,
#descContainer {
    width: var(--shapes-dimensions);
    height: var(--shapes-dimensions);
}

#partnersLogosWheel,
.logo,
#backgroundCircle,
#backgroundTriangle {
    position: absolute;
}

.container {
    width: 100vw;
}

.container>.container {
    width: var(--container-width);
}

main {
    padding: var(--main-padding) 0;
    overflow: hidden;
}

main>div {
    width: fit-content;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 150px auto;
    left: var(--maindiv-left);
}

/* logos wheel */
.logo {
    width: var(--logo-dimension);
    height: var(--logo-dimension);
    z-index: 2;
}

#logo1 {
    left: var(--logo1-left);
    top: var(--logo1-top);
}

#logo1>img {
    width: var(--logo1-width);
}

#logo2 {
    left: var(--logo2-left);
    top: var(--logo2-top);
}

#logo2>img {
    width: var(--logos234-width);
}

#logo3 {
    left: var(--logo3-left);
    top: var(--logo3-top);
}

#logo3>img {
    width: var(--logos234-width);
}

#logo4 {
    left: var(--logo4-left);
    top: var(--logo4-top);
}

#logo4>img {
    width: var(--logos234-width);
}

#logo5 {
    left: var(--logo5-left);
    top: var(--logo5-top);
}

#logo5>img {
    width: var(--logo5-width);
}

#logo6 {
    left: var(--logo6-left);
    top: var(--logo6-top);
}

#logo6>img {
    width: var(--logo6-width);
}

#logo7 {
    left: var(--logo7-left);
    top: var(--logo7-top);
}

#logo7>img {
    width: var(--logo7-width);
}

/* partners descriptions */
.shapeoutside {
    width: 50%;
    height: 100%;
    shape-margin: 1%;
}

.leftshape {
    content: "";
    float: left;
    shape-outside: polygon(0 0,
            98% 0,
            50% 6%,
            23.4% 17.3%,
            6% 32.6%,
            0 50%,
            6% 65.6%,
            23.4% 82.7%,
            50% 94%,
            98% 100%,
            0 100%);
}

.rightshape {
    float: right;
    shape-outside: polygon(2% 0%,
            100% 0%,
            100% 100%,
            2% 100%,
            50% 94%,
            76.6% 82.7%,
            94% 65.6%,
            100% 50%,
            94% 32.6%,
            76.6% 17.3%,
            50% 6%);
}

#descContainer {
    border-radius: 50%;
    text-align: center;
    background-color: white;
}

#edelweiss {
    margin-top: var(--desc1-margintop);
}

#ivoclar {
    margin-top: var(--desc2-margintop);
}

#garrison {
    margin-top: var(--desc3-margintop);
}

#hu-friedy {
    margin-top: var(--desc4-margintop);
}

#kerr {
    margin-top: var(--desc5-margintop);
}

#clickdudu {
    margin-top: var(--desc6-margintop);
}

#meisinger {
    margin-top: var(--desc7-margintop);
}

a {
    position: relative;
    z-index: 3;
}

/* background */
#backgroundCircle {
    width: calc(var(--shapes-dimensions) * 1.025);
    height: calc(var(--shapes-dimensions) * 1.025);
    z-index: -1;
}

#backgroundTriangle {
    width: calc(var(--shapes-dimensions) * 0.075);
    margin-left: calc(var(--shapes-dimensions) + var(--shapes-dimensions) * 0.075);
    z-index: -1;
}

@media screen and (max-width: 575px) {

    #partnersDescriptions {
        width: 100vw;
        height: 100dvh;
        position: fixed;
        top: 0;
        z-index: 4;
        overflow-y: auto;
    }

    article {
        min-height: calc(100dvh - 50px);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 50px 10px;
        margin-top: 0 !important;
    }

    main>div {
        margin-top: 100px;
    }

    .container p:not(article p) {
        width: 94.1%;
        font-size: var(--h2-fontsize);
        margin: 50px auto 0 auto;
        text-transform: uppercase;
    }

    #descContainer {
        background-color: #fafafad6;
    }
}

@media screen and (min-width: 575px) {
    .container p:not(article p) {
        display: none;
    }
}