@media only screen and (min-width:0px) {
    * {
        box-sizing: border-box;
    }
    header nav {
        display: grid;
        grid-template-rows: 1fr 1fr 1fr;
    }
    header nav a:link {
        text-align: center;
        color: #ed145b;
        font-family: 'montserratblack';
        color: black;
        text-decoration: none;
        font-size: 6vw;
        padding: 5vw 5.5vw;
    }
    header nav a:visited {
        color: black;
        text-decoration: none;
    }
    header nav a:hover {
        color: white;
        background-color: black;
        text-decoration: none;
    }
    header nav a:active {
        color: white;
        background-color: #ed145b;
    }
    .active {
        background-color: #ed145b;
    }
    .hero img {
        width: 100%;
        display: block;
    }
    .hero .landing {
        position: absolute;
        display: grid;
        grid-auto-rows: 1fr 9fr;
        justify-content: center;
        padding-left: 10vw;
        margin-top: 8vw
    }
    h1 {
        font-size: 17.5vw;
        font-family: 'montserratblack';
    }
    .title {
        line-height: 2vw;
        font-size: 6vw;
        text-align: left;
        font-family: 'montserratregular';
    }
    .home-quote .line1 {
        text-align: center;
        font-size: 3vw;
        line-height: 8vw;
        background-color: black;
        color: white;
        font-family: 'montserratbold';
        padding: 0 20px;
    }
    .home-quote .line2 {
        text-align: center;
        font-size: 3vw;
        line-height: 8vw;
        margin-top: 10px;
        background-color: black;
        color: white;
        font-family: 'montserratbold';
        margin: 10px 60px;
    }
    .home-quote .line3 {
        line-height: 4vw;
        text-align: center;
        font-size: 3vw;
        margin-top: 2vw;
        color: white;
        font-family: 'montserratmedium';
    }
    .home-quote div {
        display: grid;
        grid-auto-rows: repeat(3, 1fr);
        padding: 20px 0;
        justify-content: center;

        background-color: #ed145b;
    }
    .donut-gallery {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(6, 1fr);
        justify-items: center;


    }
    .donut-gallery img {
        width: 40vw;
    }
    .donut-gallery p {
        color: #ed145b;
        font-size: 7vw;
        text-align: center;
        font-family: 'montserratbold';

    }
    .donut-gallery a {
        color: white;
        background-color: black;
        align-self: center;
        padding: 10px 40px;
        font-size: 3vw;
        text-decoration: none;
        font-family: 'montserratregular';
        letter-spacing: 3px;
    }
    .donut-gallery a:link {
        color: white;
    }
    .donut-gallery a:hover {
        background-color: #ed145b;
    }
    .donut-gallery a:visited {
        color: white;
    }
    .donutbox {
        width: 100%;
        justify-items: center;
        display: grid;
        grid-template-rows: 3fr 1fr 1fr;
        margin: 30px 0;

    }
    .myBtn {
        color: white;
        background-color: black;
        text-align: center;
        padding: 2vw 13vw;
        margin: 0vw 0vw 10vw 23vw;
        font-size: 2px text-decoration: none;
        font-family: 'montserratregular';
        letter-spacing: 3px;
        border: none;
    }
    .myBtn:hover {
        background-color: #ed145b;
    }
    footer {
        background-color: black;

    }
    footer nav {
        display: grid;
        grid-template-rows: 1fr 1fr;
        justify-content: center;
    }
    footer .topop {
        color: #ed145b;
        text-decoration: none;
        font-family: 'montserratbold';
        text-align: center;
        font-size: 5vw;
        align-self: center;

    }
    footer .topop:hover {
        color: white;
    }
    footer .topop:visited {
        color: #ed145b;
    }
    .iconbox {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
    }
    .iconbox img {
        width: 50px;
        padding: 5px;
        margin: 5px 5px 10px 5px
    }
    header .history {
        width: 100%;
        margin-bottom: 5vw;
    }
    .history-hero {
        position: absolute;
        display: grid;
        grid-auto-rows: 9fr 1fr;
        justify-content: center;
        padding-left: 10vw;
        margin-top: 8vw
    }
    .history-hero h1 {
        color: white;
        line-height: 20vw
    }
    .history-hero h3 {
        text-align: right;
        color: white;
        line-height: 9px;
        margin: 0 12px;
    }
    .infobox {
        display: grid;
        grid-template-rows: 1fr 1fr;
        justify-content: center;
        grid-row-gap: 15px;
        margin: 20px 35px 20px 35px;

    }

    .history-info {
        font-family: 'montserratlight';
        line-height: 5vw;
        font-size: 17px;
    }
    .history-quote {
        display: grid;
        grid-template-columns: 5fr 3fr;
        align-items: center;
        margin-top: -8vw
        
    }
    .history-quote h2 {
        font-size: 2.8vw;
        line-height: 8vw;
        font-family: 'montserratbold';
        color: white;
        background-color: black;
        padding-left: 35px;
        margin: 10px -30vw 10px 0px;
    }
    .hisotry-donut {
        width: 40vw;
        margin-left:  10vw
    }
    .facts {
        display: grid;
        grid-auto-rows: 1fr 11.5fr .5fr;
    }
    .c1 {
        width: 85vw;
        height: 85vw;
        background-color: #ed145b;
        border-radius: 360px;
        position: absolute;
        top: 90vw;
        left: -5vw;
        padding: 30vw 0 0 16vw;
    }
    .c1 h4 {
        width: 60vw;
        font-family: 'montserratregular';
        font-size: 5vw;
        color: white;
        line-height: 5vw
    }
    .c1 h3 {
        font-family: 'montserratblack';
        ;
        font-size: 8vw
    }
    .c2 {
        width: 85vw;
        height: 85vw;
        background-color: black;
        border-radius: 360px;
        position: absolute;
        top: 160vw;
        left: 10vw;
        padding: 28vw 0 0 20vw
    }
    .c2 h4 {
        width: 50vw;
        font-family: 'montserratregular';
        color: white;
        line-height: 5vw;
        font-size: 5vw;
    }
    .c2 h3 {
        font-family: 'montserratblack';
        color: #ed145b;
        font-size: 8vw;
        width: 40vw
    }
    .c3 {
        background-color: #ed145b;
        width: 60vw;
        height: 60vw;
        position: absolute;
        border-radius: 360px;
        top: 225vw;
        left: 5vw;
        padding: 22vw 0 0 7vw;
    }
    .c3 h4 {
        font-family: 'montserratregular';
        color: white;
        font-size: 3vw;
    }
    .c3 h3 {
        font-family: 'montserratblack';
        font-size: 8vw
    }
    .c4 {
        background-color: black;
        width: 50vw;
        height: 50vw;
        border-radius: 360px;
        position: absolute;
        top: 265vw;
        left: -vw;
        padding: 10vw 0 0 12vw;
    }
    .c4 h3 {
        font-family: 'montserratblack';
        color: #ed145b;
        font-size: 8vw;
    }
    .c4 h4 {
        font-family: 'montserratregular';
        color: white;
        line-height: 5vw;
        width: 35vw;
        font-size: 4vw
    }
    .c5 {
        width: 50vw;
        height: 50vw;
        border-radius: 360px;
        background-color: white;
        position: absolute;
        top: 309vw;
        right: 25vw;
        padding: 15vw 0 0 8vw
    }
    .c5 h4 {
        font-family: 'montserratregular';
        font-size: 4vw;
        line-height: 4vw;
    }
    .c5 h3 {
        font-family: 'montserratblack';
        font-size: 8vw;
        color: #ed145b;
    }
    .c6 {
        width: 100vw;
        height: 100vw;
        background-color: #ed145b;
        border-radius: 360px;
        position: absolute;
        top: 335vw;
        left: -10vw;
        padding: 33vw 0 0 20vw;
    }
    .c6 h2 {
        font-family: 'montserratblack';
        font-size: 9vw;
    }
    .c6 h3 {
        font-family: 'montserratbold';
        font-size: 7vw;
    }
    .c6 h4 {
        width: 65vw;
        font-family: 'montserratlight';
        font-size: 5vw;
        line-height: 6vw;
        color: white;
    }
    .c7 {
        width: 100vw;
        height: 100vw;
        border-radius: 360px;
        background-color: black;
        position: absolute;
        top: 400vw;
        left: -30vw;
        padding: 30vw 0 0 40vw;
    }
    .c7 h3 {
        font-family: 'montserratblack';
        color: #ed145b;
        font-size: 8vw;
        width: 40vw;
    }
    .c7 h4 {
        font-family: 'montserratregular';
        font-size: 5vw;
        width: 50vw;
        line-height: 5vw;
        color: white;
    }
    .c11 {
        width: 20vw;
        height: 20vw;
        background-color: #ed145b;
        border-radius: 360px;
        position: absolute;
        top: 87vw;
        left: 5vw
    }
    .c12 {
        width: 30vw;
        height: 30vw;
        background-color: white;
        position: absolute;
        border-radius: 360px;
        right: 0vw;
        top: 145vw;
    }
    .c13 {
        background-color: black;
        width: 20vw;
        height: 20vw;
        border-radius: 360px;
        position: absolute;
        top: 220vw;
        left: 5vw;
    }
    .c14 {
        width: 20vw;
        height: 20vw;
        background-color: black;
        border-radius: 360px;
        position: absolute;
        top: 335vw;
        right: 15vw
    }
    .c15 {
        width: 30vw;
        height: 30vw;
        background-color: #ed145b;
        border-radius: 360px;
        position: absolute;
        top: 325vw;
        left: -5vw;
    }
    .c16 {
        width: 30vw;
        height: 30vw;
        background-color: white;
        border-radius: 360px;
        position: absolute;
        top: 415vw;
        right: 10vw
    }
    .c17 {
        width: 25vw;
        height: 25vw;
        background-color: black;
        border-radius: 360px;
        position: absolute;
        top: 490vw;
        left: 10vw;
    }
    .c18 {
        width: 40vw;
        height: 40vw;
        background-color: #ed145b;
        border-radius: 360px;
        position: absolute;
        top: 500vw;
        left: 10vw;
    }
    .donut1 {
        width: 60vw;
        position: absolute;
        right: 0vw;
        top: 70vw;
    }
    .donut2 {
        width: 70vw;
        position: absolute;
        top: 147vw;
        left: -30vw
    }
    .donut3 {
        width: 70vw;
        position: absolute;
        top: 30vw;
        right: -32vw;
    }
    .donut4 {
        width: 70vw;
        position: absolute;
        top: 470vw;
        right: 0vw
    }
    .facts-footer {
        top: 590vw;
        margin-top: 0
    }
    .c23 {
        width: 80vw;
        height: 80vw;
        background-color: white;
        position: absolute;
        border-radius: 360px;
        top: 510vw;
        right: 0vw;
        padding: 20vw 0 0 17vw;
    }
    .c23 h3 {
        font-family: 'montserratblack';
        color: #ed145b;
        font-size: 8vw;
        line-height: 7vw
    }
    .c23 h4 {
        font-family: 'montserratmedium';
        color: black;
        line-height: 4vw;
        width: 50vw;
        font-size: 4vw
    }
    .c24 {
        width: 40vw;
        height: 40vw;
        background-color: black;
        border-radius: 360vw;
        position: absolute;
        top: 560vw;
        right: 0vw;
    }
    .c25 {
        width: 25vw;
        height: 25vw;
        background-color: #ed145b;
        border-radius: 360vw;
        position: absolute;
        top: 560vw;
        left: 18vw;
    }
}

@media only screen and (min-width:700px) {
    header nav {
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr;

    }
    header nav a:link {
        font-size: 3vw;
        line-height: 6vw;
        padding: 0vw 6vw;
    }
    .hero .landing {
        margin-top: 8vw;
    }
    .hero h3 {
        left: 11vw;
    }
    h1 {
        font-size: 17vw;
    }
    .title {
        font-size: 5vw;
    }
    .home-quote div {
        padding: 50px 0px;
    }
    .line1 {
        padding: 0 50px
    }
    .line2 {
        margin: 10px 110px
    }
    .donut-gallery {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: repeat(3, 1fr);
        justify-items: center;
    }
    .donut-gallery img {
        width: 20vw;
    }
    .donut-gallery a:link {
        font-size: 12px;

    }
    .donut-gallery p {
        font-size: 25px;
        align-self: center;

    }
    .donutbox {
        display: grid;
        grid-template-rows: 3fr 1fr 1fr;
        justify-items: center;
    }
    footer {
        margin-top: 40px;
    }
    footer nav {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr;
        padding: 10px 8vw 10px 12vw;
    }
    footer .topop {
        font-size: 20px;
        text-align: left;
    }
    .iconbox img {
        width: 50px;
        padding: 5px;
        margin: 0px;
    }
    .infobox {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr;
        margin: 10px 0px 10px 50px;
    }
    .history-info {
        font-size: 15px;
        line-height: 25px;
        padding-right: 40px
    }
    .history-quote {
        margin-top: 0px;
    }
    .facts {
        grid-auto-rows: 1fr 37fr 1fr;
    }
    .c1 {
        width: 55vw;
        height: 55vw;
        top: 20vw;
        padding: 20vw 0 0 12vw;
        border-radius: 400px;
    }
    .c1 h4 {
        font-size: 3vw;
        width: 35vw;
        line-height: 3vw;
    }
    .c1 h3 {
        font-size: 6vw
    }
    .c2 {
        width: 65vw;
        height: 65vw;
        top: 75vw;
        left: 20vw;
        padding: 25vw 0 0 13vw;
        border-radius: 400px;
    }
    .c2 h4 {
        font-size: 3vw;
        line-height: 3vw;
        width: 45vw;
    }
    .c2 h3 {
        font-size: 7vw;
        line-height: 6vw
    }
    .c3 {
        top: 127vw;
        left: 45vw;
        width: 50vw;
        height: 50vw;
        padding: 18vw 0 0 8vw;
    }
    .c3 h4 {
        font-size: 2vw;
    }
    .c3 h3 {
        font-size: 6vw;
    }
    .c4 {
        width: 40vw;
        height: 40vw;
        top: 160vw;
        left: 10vw;
        padding: 11vw 0 0 9vw;
    }
    .c4 h4 {
        font-size: 3vw;
        line-height: 3vw;
        width: 25vw;
    }
    .c4 h3 {
        font-size: 6vw;
        width: 25vw;
    }
    .c5 {
        width: 40vw;
        height: 40vw;
        top: 200vw;
        right: 5vw;
        padding: 15vw 0 0 6vw;
    }
    .c5 h4 {
        font-size: 3vw;
        line-height: 3vw;
        width: 30vw;
    }
    .c5 h3 {
        font-size: 6vw;
    }
    .c6 {
        width: 65vw;
        height: 65vw;
        top: 205vw;
        padding: 24vw 0 0 16vw;
        border-radius: 400px;
    }
    .c6 h4 {
        font-size: 3vw;
        line-height: 3vw;
        width: 40vw;
    }
    .c6 h3 {
        font-size: 4vw;
    }
    .c6 h2 {
        font-size: 8vw
    }
    .c7 {
        width: 70vw;
        height: 70vw;
        top: 265vw;
        left: 20vw;
        padding: 25vw 0 0 20vw;
        border-radius: 400vw;
    }
    .c7 h4 {
        font-size: 3vw;
        line-height: 3vw;
        width: 40vw;
    }
    .c7 h3 {
        font-size: 6vw;
    }
    .c8 {
        width: 18vw;
        height: 18vw;
        background-color: white;
        border-radius: 360px;
        position: absolute;
        top: 65vw;
        left: -3vw;
    }
    .c9 {
        width: 22vw;
        height: 22vw;
        background-color: black;
        border-radius: 360px;
        position: absolute;
        top: 80vw;
        left: 11vw;
    }
    .c10 {
        width: 13vw;
        height: 13vw;
        border-radius: 360px;
        background-color: black;
        ;
        position: absolute;
        top: 160vw;
        right: 10vw
    }
    .c11 {
        top: 15vw;
    }
    .c12 {
        width: 15vw;
        height: 15vw;
        top: 75vw;
        left: 30vw;
    }
    .c13 {
        top: 20vw;
        width: 25vw;
        height: 25vw;
        left: 50vw;
    }
    .c14 {
        top: 260vw;
    }
    .c15 {
        width: 0vw;
        height: 0vw;
    }
    .c16 {
        top: 123vw;
        width: 20vw;
        height: 20vw;
    }
    .c17 {
        width: 20vw;
        height: 20vw;
        top: 290vw;
        background-color: white;
    }
    .c18 {
        width: 25vw;
        height: 25vw;
        top: 320vw;
        left: 20vw;
    }
    .c19 {
        width: 25vw;
        height: 25vw;
        border-radius: 360px;
        background-color: black;
        position: absolute;
        top: 190vw;
        left: 5vw;
    }
    .c20 {
        width: 15vw;
        height: 15vw;
        border-radius: 360px;
        background-color: white;
        position: absolute;
        top: 205vw;
        left: 22vw
    }
    .c21 {
        width: 25vw;
        height: 25vw;
        border-radius: 360px;
        background-color: white;
        position: absolute;
        top: 255vw;
        left: 30vw;
    }
    .c22 {
        width: 10vw;
        height: 10vw;
        border-radius: 360px;
        background-color: black;
        position: absolute;
        top: 305vw;
        left: 3vw;
    }
    .c23 {
        width: 60vw;
        height: 60vw;
        top: 330vw;
        left: -6vw;
        padding: 15vw 0 0 13vw;
    }
    .c23 h3 {
        font-size: 6vw;
        line-height: 5vw;
    }
    .c23 h4 {
        font-size: 3vw;
        line-height: 3vw;
        width: 40vw;
    }
    .donut1 {
        top: 48vw;
        right: 0vw
    }
    .donut2 {
        width: 60vw;
        top: 110vw;
        left: -16vw
    }
    .donut3 {
        width: 50vw;
        top: 35vw;
        left: 2vw;
    }
    .donut4 {
        width: 60vw;
        top: 315vw
    }
    .c24 {
        width: 30vw;
        height: 30vw;
        top: 355vw;
        right: 2vw;
    }
    .c25 {
        width: 20vw;
        height: 20vw;
        left: 42vw;
        top: 364vw;
    }
    .facts-footer {
        top: 380vw;
        width: 100%;
    }
}

@media only screen and (min-width:1200px) {
    header nav a:link {
        color: black;
        text-decoration: none;
        font-size: 40px;
        text-align: center;
        color: black;
        font-family: 'montserratblack';
        line-height: 6vw;
        padding: 0vw 7vw;
    }
    header nav a:hover {
        color: white;
    }
    .donutfacts {
        max-width: 1200px;
        padding: 0 12vw;
    }
    .hero h3 {
        font-size: 4vw;
    }
    .donut-gallery {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: repeat(2, 1fr);
        justify-items: center;
        margin: 0 80px 20px 80px;
    }
    .donutbox {
        display: grid;
        grid-template-rows: 3fr 1fr 1fr;
    }
    .donutbox img {
        width: 140px
    }
    .home-quote h3 {
        font-size: 25px;
        letter-spacing: 2px;
    }
    .quote h3 {
        width: 45vw;
        line-height: 6vw;
        text-align: center;
        position: absolute;
        left: 27.5vw;
        font-size: 3vw;
        margin-top: 4vw;
        color: white;
        font-family: 'montserratbold';
    }
    .quote div {
        width: 100%;
        height: 40vw;
        background-color: #ed145b;
        display: block;
        text-align: center;
        padding-top: 9vw;
    }
    .donut-gallery a:link {
        font-size: 1vw;
    }
    /* *************************** pop-up windows **********/
    footer {
        margin-top: 40px;
    }
    footer nav {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr;
        max-width: 1200px;
        margin: auto;
        padding: 0 12vw;
    }
    footer .topop {
        font-size: 20px;
        text-align: left;
    }
    .iconbox {
        margin-left: 15vw
    }
    .iconbox img {
        grid-template-columns: auto 1fr 1fr 1fr 1fr;
        width: 40px;
        padding: 5px;
        margin: 0px;
    }
    header .history {
        margin-bottom: 35px;
        
    }
    .infobox {
        max-width: 1200px; 
        margin: auto;
        padding: 0 10vw;

    }
    .history-info  {
        margin: 0 40px;
        padding-right: 0px
            
    }
    .history-quote {
        max-width: 1200px;
        margin: auto;
        padding: 0 8vw;
        
        
    }
    .history-quote h2 {
        font-size: 25px;
        line-height: 60px;
        margin-right: -14vw;
        margin-left: 3vw;
    }
    .history-quote img {
        width: 300px;
        margin-left: 5vw;
        
    }
    .facts {
        grid-auto-rows: 1fr 58fr
    }
    .c1 {
        width: 45vw;
        height: 45vw;
        top: 20vw;
        padding: 15vw 0 0 8vw;
        left: 5vw;
        border-radius: 360vw;
    }
    .c1 h4 {
        font-size: 2.5vw;
        width: 30vw;
        line-height: 3vw;
    }
    .c1 h3 {
        font-size: 5vw
    }
    .c2 {
        width: 55vw;
        height: 55vw;
        top: 70vw;
        left: 25vw;
        padding: 19vw 0 0 13vw;
        border-radius: 360vw;
    }
    .c2 h4 {
        font-size: 2.5vw;
        line-height: 3vw;
        width: 35vw;
    }
    .c2 h3 {
        font-size: 6vw;
        line-height: 5vw
    }
    .c3 {
        top: 127vw;
        left: 55vw;
        width: 30vw;
        height: 30vw;
        padding: 12vw 0 0 3.5vw;
    }
    .c3 h4 {
        font-size: 1.5vw;
        width: 25vw;
    }
    .c3 h3 {
        font-size: 4.2vw;
    }
    .c4 {
        width: 40vw;
        height: 40vw;
        top: 160vw;
        left: 10vw;
        padding: 11vw 0 0 9vw;
    }
    .c4 h4 {
        font-size: 3vw;
        line-height: 3vw;
        width: 25vw;
    }
    .c4 h3 {
        font-size: 6vw;
        width: 25vw;
    }
    .c5 {
        width: 40vw;
        height: 40vw;
        top: 200vw;
        right: 7vw;
        padding: 15vw 0 0 6vw;
    }
    .c5 h4 {
        font-size: 3vw;
        line-height: 3vw;
        width: 30vw;
    }
    .c5 h3 {
        font-size: 6vw;
    }
    .c6 {
        width: 50vw;
        height: 50vw;
        top: 215vw;
        padding: 18vw 0 0 11vw;
        border-radius: 360vw;
        left: 5vw;
    }
    .c6 h4 {
        font-size: 2.5vw;
        line-height: 3vw;
        width: 35vw;
    }
    .c6 h3 {
        font-size: 3vw;
    }
    .c6 h2 {
        font-size: 6vw
    }
    .c7 {
        width: 45vw;
        height: 45vw;
        top: 255vw;
        left: 45vw;
        padding: 17vw 0 0 12vw;
        border-radius: 400vw;
    }
    .c7 h4 {
        font-size: 2vw;
        line-height: 2.5vw;
        width: 30vw;
    }
    .c7 h3 {
        font-size: 4vw;
        width: 30vw;
    }
    .c8 {
        width: 18vw;
        height: 18vw;
        background-color: white;
        border-radius: 360px;
        position: absolute;
        top: 65vw;
        left: -3vw;
    }
    .c9 {
        width: 22vw;
        height: 22vw;
        background-color: black;
        border-radius: 360px;
        position: absolute;
        top: 80vw;
        left: 11vw;
    }
    .c10 {
        width: 13vw;
        height: 13vw;
        border-radius: 360px;
        background-color: black;
        ;
        position: absolute;
        top: 160vw;
        right: 10vw
    }
    .c11 {
        top: 12vw;
    }
    .c12 {
        width: 15vw;
        height: 15vw;
        top: 70vw;
        left: 30vw;
    }
    .c13 {
        top: 20vw;
        width: 25vw;
        height: 25vw;
        left: 44vw;
    }
    .c14 {
        top: 230vw;
        right: 5vw;
    }
    .c16 {
        top: 110vw;
        right: 20vw;
        width: 20vw;
        height: 20vw;
    }
    .c17 {
        width: 0vw;
        height: 0vw;
        top: 290vw;
        background-color: white;
    }
    .c18 {
        width: 25vw;
        height: 25vw;
        top: 325vw;
        left: 20vw;
        background-color: black;
    }
    .c19 {
        width: 25vw;
        height: 25vw;
        border-radius: 360px;
        background-color: black;
        position: absolute;
        top: 190vw;
        left: 5vw;
    }
    .c20 {
        width: 15vw;
        height: 15vw;
        border-radius: 360px;
        background-color: white;
        position: absolute;
        top: 205vw;
        left: 22vw
    }
    .c21 {
        width: 25vw;
        height: 25vw;
        border-radius: 360px;
        background-color: white;
        position: absolute;
        top: 255vw;
        left: 30vw;
    }
    .c22 {
        width: 10vw;
        height: 10vw;
        border-radius: 360px;
        background-color: black;
        position: absolute;
        top: 305vw;
        left: 3vw;
    }
    .c23 {
        width: 40vw;
        height: 40vw;
        top: 300vw;
        left: 30vw;
        padding: 12vw 0 0 8vw;
    }
    .c23 h3 {
        font-size: 4vw;
        width: 30vw;
        line-height: 3.5vw;
    }
    .c23 h4 {
        font-size: 2.5vw;
        line-height: 2.5vw;
        width: 30vw;
    }
    .donut1 {
        width: 600px;
        top: 45vw;
        right: 5vw
    }
    .donut2 {
        width: 50vw;
        top: 115vw;
        left: 5vw;
    }
    .donut3 {
        width: 40vw;
        top: 40vw;
        right: 0vw;
        left: 0vw;
        margin-right: 0;
    }
    .donut4 {
        width: 50vw;
        top: 285vw;
        left: 5vw;
    }
    .c25 {
        width: 20vw;
        height: 20vw;
        left: 60vw;
        top: 295vw;
    }
    .facts-footer {
        top: 345vw;

    }
}