/* LAYOUT FILE FOR CSS GRIDS */ 

/********************* DESKTOP LAYOUT ****************************/
@media screen and (min-width: 1650px) {
    article {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(7, auto);
    }
    

    .summaryPara {
        grid-row: 1;
        grid-column: 1/4;
        margin-top: 3%;
        margin-left: 10%;
        margin-right: 10%;
    }  
    

    /* HEADER CSS */
    header {
        grid-row: 1;
        grid-column: 1/-1;
        height: 680px;
    }

    
    #capImg {
        object-fit: cover;
        object-position: 50% 20%;
        width: 100%;
        height:700px;
    }
  
    #titleBox {
        background-color: #9c9c9c;
        opacity: .9;
        height: 15.0vw;
        width: 43%;
        position: absolute;
        top: 20%;
        left: 29%;
        z-index: 1;
        color: white;
        font-size: 3vw;
        font-family: "Rawline";
        font-weight: bold;
        padding: 2% 1% 10% 1%;
        text-align: center;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }
        
    /* NAV */
    nav {
        background-color: #ECECEC;
        grid-row: 2;
        grid-column: 1/-1;
        height: 50px;
        font-family: "Rawline";
        font-size: 22px;
        font-weight: bold;
        color: black;
    }
    
    nav ul {
        list-style-type: none;
        overflow: hidden;
        text-align: center;
        margin-right: 2%;
    }
    
    nav li {
        margin-top: 0.2%;
        display: inline-block;
        padding: 4px 8px;
        text-align: center;
    }
    
    li a {
        text-decoration: none;
        color: black;
        text-decoration: none;
    }
    
    li a:hover {
        color: darkgrey;
    }
    
    #nav-pin-wrapper {
        background-color: black;
        grid-row: 2;
        grid-column: 1/-1;
        z-index: 99;
    }
    
    #nav-pin-wrapper ul {
        margin-top: -3px;
    } 
    
    
    /* Overview Section */




    .boxTitle{
        font-family: "Raleway ExtraBold";
        font-weight: bold;
        font-size: 24px;
        color: #1d2e81;
        text-align: center;
/*         margin-top: 0%;
        margin-bottom: -5%; */
    }
        	
    
    

    .calloutContainer {
        display: grid;
        grid-gap: 1em;
        margin-bottom: 10%;
        margin-left: 12%;
        margin-right: 12%;
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: repeat(auto);
        padding: 0px 0px 0 0px;
    }
    .calloutNumber {
        grid-column: 3 / 5;
        grid-row: 1;
    }

    .calloutText {
        grid-column: 3 / 5;
        grid-row: 2;
        margin-top: -10px;
        margin-right: 20px;
    }

    .calloutNumber1 {
        grid-column: 6 / 8;
        grid-row: 1;
    }

    .calloutText1 {
        grid-column: 6 / 8;
        grid-row: 2;
        margin-top: -10px;
    }

    .calloutNumber2 {
        grid-column: 9 / 11;
        grid-row: 1;
    }

    .calloutText2 {
        grid-column: 9 / 11;
        grid-row: 2;
        margin-top: -10px;
    }



    /* REPORT SECTION */
    #report {
        grid-row: 17;
        grid-column: 1/-1;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(4, auto);
        margin-top: -5%;
    }
    
    #reportTitle {
        grid-row: 1;
        grid-column: 1/-1;
    }
    #reportPara {
        grid-row: 2;
        grid-column: 1/3;
        margin-left: 200px;
        margin-right: 200px;
    }
    #reportPara button {
        background-color: white;
        border: solid rgb(107, 106, 106);
        margin-top: 20px;
        width: 250px;
        height: 50px;
        font-family: "Rawline";
        font-size: 23px;
    }

    #reportPara div {
        width: 100px;
        height: 30px;
        margin-left: 75px;
    }

    div#excelIcon {
        grid-row: 2;
        grid-column: 1;
        width: 60px;
        height: 100px;
        margin-top: 10px;
        margin-left: 75px;
    }

    div#socialIcon {
        grid-row: 2;
        grid-column: 2;
        width: 60px;
        height: 100px;
        margin-top: -100px;
        margin-left: 125px;
    }

    #reportImage {
        grid-row: 2;
        grid-column: 3;
        height: 346px;
        width: 425px;
    }

    #project_team{        
        background-color:#F1F1F2;
        justify-content: center;
        align-items: center;
        text-align: center;    
    }    

    #team {
        grid-row: 3;
        grid-column: 1/-1;
        display: flex;
        flex-direction: row;
        margin-top: 5%;
        margin-bottom: 0%;
        height: 60%;
        justify-content: center;
        align-items: center;
    }
    
    #team h2 {
        text-align: center;    
    }
    /********************* LAPTOP LAYOUT ****************************/
@media screen and (max-width: 1650px) {
    article {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(7, auto);
    }
    

    .summaryPara {
        grid-row: 1;
        grid-column: 1/4;
        margin-top: 3%;
        margin-left: 10%;
        margin-right: 10%;
    }  

    /* HEADER CSS */
    header {
        grid-row: 1;
        grid-column: 1/-1;
        height: 480px;
    }

    
    #capImg {
        object-fit: cover;
        object-position: 50% 20%;
        width: 100%;
        height:480px;
    }

    #udrcLogo {
        height: 90px;
        width: auto;
        position: absolute;
        top: 27px;
        left: 20px;
        z-index: 1;
    }
    
    .boxTitle{
        font-family: "Raleway ExtraBold";
        font-weight: bold;
        font-size: 24px;
        color: #1d2e81;
        text-align: center;
/*         margin-top: 0%;*/
        margin-bottom: -5%; 
    }
    

    #titleBox {
        background-color: #9c9c9c;
        opacity: .9;
        height: 20.0vw;
        width: 43%;
        position: absolute;
        top: 12%;
        left: 29%;
        z-index: 1;
        color: white;
        font-size: 3vw;
        font-family: "Rawline";
        font-weight: bold;
        padding: 2% 1% 10% 1%;
        text-align: center;
    }

        
    /* NAV */
    nav {
        background-color: #ECECEC;
        grid-row: 2;
        grid-column: 1/-1;
        height: 50px;
        font-family: "Rawline";
        font-size: 22px;
        font-weight: bold;
        color: black;
    }
    
    nav ul {
        list-style-type: none;
        overflow: hidden;
        text-align: center;
        margin-right: 2%;
    }
    
    nav li {
        margin-top: 0.2%;
        display: inline-block;
        padding: 4px 8px;
        text-align: center;
    }
    
    li a {
        text-decoration: none;
        color: black;
        text-decoration: none;
    }
    
    li a:hover {
        color: darkgrey;
    }
    
    #nav-pin-wrapper {
        background-color: black;
        grid-row: 2;
        grid-column: 1/-1;
        z-index: 99;
    }
    
    #nav-pin-wrapper ul {
        margin-top: -3px;
    } 
    
    
    /* Introduction Section */
    #summary {
        grid-row: 3;
        grid-column: 1/-1;
    }
    
 /*   #summaryPara {
        grid-row: 1;
        grid-column: 1/4;
        margin-top: 3%;
        margin-left: 25%;
        margin-right: 25%;
    }  
    */
    .donutContainer {
        display: grid;
        grid-gap: 10px;
        grid-template-columns: repeat(8, [col] auto ) ;
        grid-template-rows: repeat(8, [row] auto  );
        margin-top: 10%;
        margin-bottom: -60%;
    }

    .donutpara {
        grid-column: col / span 6;
        grid-row: row / span 4;
        text-align: justify;
        padding-right: 10%;
    }

    .donutone {
        grid-column: col 6 / span 2;
        grid-row: row / span 2;
        width: 500;
        height: auto;
        margin-left: 60%;
        margin-bottom: -50%;

    }

    .donuttwo {
        grid-column: col 6 / span 2;
        grid-row: row 3 / span 2;
        width: 500;
        height: auto;
        margin-left: 60%;
        margin-bottom: 60%;

    }

    .donutlabel {
        grid-column: col 6 / span 2;
        grid-row: row 5/ span 3;
        margin-left: 60%;
        margin-top: -110%;
        font-family: 'Raleway';
        font-weight: bold;
        font-size: 16px;
        text-align: center;
        color: #34495e;
      }



/*     #conclusion {
        grid-row: 16;
        grid-column: 1/-1;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: repeat(3, auto);
        margin-top: -10%;
        font-size: 20px;
        margin-left: 25%;
        margin-right: 25%;
        margin-bottom: 5%;
    } */

	
    .calloutContainer {
        display: grid;
        grid-gap: 1em;
        margin-bottom: 10%;
        margin-left: 12%;
        margin-right: 12%;
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: repeat(auto);
        padding: 0px 0px 0 0px;
    }
    .calloutNumber {
        grid-column: 3 / 5;
        grid-row: 1;
    }

    .calloutText {
        grid-column: 3 / 5;
        grid-row: 2;
        margin-top: -10px;
        margin-right: 20px;
    }

    .calloutNumber1 {
        grid-column: 6 / 8;
        grid-row: 1;
    }

    .calloutText1 {
        grid-column: 6 / 8;
        grid-row: 2;
        margin-top: -10px;
    }

    .calloutNumber2 {
        grid-column: 9 / 11;
        grid-row: 1;
    }

    .calloutText2 {
        grid-column: 9 / 11;
        grid-row: 2;
        margin-top: -10px;
    }



    /* REPORT SECTION */
    #report {
        grid-row: 17;
        grid-column: 1/-1;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(4, auto);
        margin-top: -5%;
    }
    
    #reportTitle {
        grid-row: 1;
        grid-column: 1/-1;
    }
    #reportPara {
        grid-row: 2;
        grid-column: 1/3;
        margin-left: 200px;
        margin-right: 200px;
    }
    #reportPara button {
        background-color: white;
        border: solid rgb(107, 106, 106);
        margin-top: 20px;
        width: 250px;
        height: 50px;
        font-family: "Rawline";
        font-size: 23px;
    }
    #reportPara div {
        width: 100px;
        height: 30px;
        margin-left: 75px;
    }

    div#excelIcon {
        grid-row: 2;
        grid-column: 1;
        width: 60px;
        height: 100px;
        margin-top: 10px;
        margin-left: 75px;
    }

    div#socialIcon {
        grid-row: 2;
        grid-column: 2;
        width: 60px;
        height: 100px;
        margin-top: -100px;
        margin-left: 125px;
    }

    #reportImage {
        grid-row: 2;
        grid-column: 3;
        margin-top: 8%;
        height: 346px;
        width: 425px;
    }
   
    #project_team{        
        background-color:#F1F1F2;
        justify-content: center;
        align-items: center;
        text-align: center;    
    }	


    /********************* TABLET LANDSCAPE ****************************/
    @media screen and (max-width: 1310px) { 
        article {
            display: grid;
            grid-template-columns: 1fr;
            grid-template-rows: repeat(7, auto);
        }
        
        .summaryPara {
            grid-row: 1;
            grid-column: 1/4;
            margin-top: 3%;
            margin-left: 10%;
            margin-right: 10%;
        }  
        
        /* HEADER CSS */
        header {
            grid-row: 1;
            grid-column: 1/-1;
            height: 380px;
        }
    
        
        #capImg {
            object-fit: cover;
            object-position: 50% 20%;
            width: 100%;
            height:380px;
        }
        
        
        #titleBox {
            background-color: #9c9c9c;
            opacity: .9;
            height: 20.0vw;
            width: 43%;
            position: absolute;
            top: 8%;
            left: 29%;
            z-index: 1;
            color: white;
            font-size: 3vw;
            font-family: "Rawline";
            font-weight: bold;
            padding: 2% 1% 10% 1%;
            text-align: center;
        }
        .boxTitle{
            font-family: "Raleway ExtraBold";
            font-weight: bold;
            font-size: 24px;
            color: #1d2e81;
            text-align: center;
    /*         margin-top: 0%;*/
            margin-bottom: -5%; 
        }
        
        #publishdate {
            margin-top: 3%;
        }
            
        /* NAV */
        nav {
            background-color: #ECECEC;
            grid-row: 2;
            grid-column: 1/-1;
            height: 100px;
            font-family: "Rawline";
            font-size: 22px;
            font-weight: bold;
            color: black;
        }
        
        nav ul {
            list-style-type: none;
            overflow: hidden;
            text-align: center;
            margin-right: 2%;
        }
        
        nav li {
            margin-top: 0.2%;
            display: inline-block;
            padding: 4px 8px;
            text-align: center;
        }
        
        li a {
            text-decoration: none;
            color: black;
            text-decoration: none;
        }
        
        li a:hover {
            color: darkgrey;
        }
        
        #nav-pin-wrapper {
            background-color: black;
            grid-row: 2;
            grid-column: 1/-1;
            z-index: 99;
        }
        
        #nav-pin-wrapper ul {
            margin-top: -3px;
        } 
        
        
        /* Overview Section */
        #summary {
            grid-row: 3;
            grid-column: 1/-1;
        }
        
        #summaryPara {
            grid-row: 1;
            grid-column: 1/4;
            margin-top: 3%;
            margin-left: 20%;
            margin-right: 20%;
        }  
        
        .donutContainer {
            display: grid;
            grid-gap: 10px;
            grid-template-columns: repeat(8, [col] auto ) ;
            grid-template-rows: repeat(8, [row] auto  );
            margin-top: 10%;
            margin-bottom: -65%;
        }
    
        .donutpara {
            grid-column: col / span 6;
            grid-row: row / span 4;
            text-align: justify;
            padding-right: 10%;
        }
    
        .donutone {
            grid-column: col 6 / span 2;
            grid-row: row / span 2;
            width: 500;
            height: auto;
            margin-left: 60%;
            margin-bottom: -50%;
    
        }
    
        .donuttwo {
            grid-column: col 6 / span 2;
            grid-row: row 3 / span 2;
            width: 500;
            height: auto;
            margin-left: 60%;
            margin-bottom: 60%;
    
        }
    
        .donutlabel {
            grid-column: col 6 / span 2;
            grid-row: row 5/ span 3;
            margin-left: 60%;
            margin-top: -110%;
            font-family: 'Raleway';
            font-weight: bold;
            font-size: 16px;
            text-align: center;
            color: #34495e;
          }
    
    
    
/*         #conclusion {
            grid-row: 16;
            grid-column: 1/-1;
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            grid-template-rows: repeat(3, auto);
            margin-top: -20%;
            font-size: 20px;
            margin-left: 20%;
            margin-right: 20%;
            margin-bottom: 5%;
        }
 */

        .calloutContainer {
            display: grid;
            grid-gap: 1em;
            margin-bottom: 10%;
            margin-left: 12%;
            margin-right: 12%;
            grid-template-columns: repeat(12, 1fr);
            grid-template-rows: repeat(auto);
            padding: 0px 0px 0 0px;
        }
        .calloutNumber {
            grid-column: 2 / 5;
            grid-row: 1;
            padding-right: 20px;
        }

        .calloutText {
            grid-column: 2 / 5;
            grid-row: 2;
            margin-top: -10px;
/*             margin-right: 20px; */
        }

        .calloutNumber1 {
            grid-column: 6 / 8;
            grid-row: 1;
        }

        .calloutText1 {
            grid-column: 6 / 8;
            grid-row: 2;
            margin-top: -10px;
        }

        .calloutNumber2 {
            grid-column: 9 / 11;
            grid-row: 1;
        }

        .calloutText2 {
            grid-column: 9 / 11;
            grid-row: 2;
            margin-top: -10px;
        }


    
        /* REPORT SECTION */
        #report {
            grid-row: 17;
            grid-column: 1/-1;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(4, auto);
        }
        
        #reportTitle {
            grid-row: 1;
            grid-column: 1/-1;
        }
        #reportPara {
            grid-row: 2;
            grid-column: 1/3;
            margin-left: 18%;
            margin-right: 18%;
        }
        #reportPara button {
            background-color: white;
            border: solid rgb(107, 106, 106);
            margin-top: 20px;
            width: 250px;
            height: 50px;
            font-family: "Rawline";
            font-size: 23px;
        }
        #reportPara div {
            width: 100px;
            height: 30px;
            margin-left: 75px;
        }
    
        div#excelIcon {
            grid-row: 2;
            grid-column: 1;
            width: 60px;
            height: 100px;
            margin-top: 10px;
            margin-left: 75px;
        }
    
        div#socialIcon {
            grid-row: 2;
            grid-column: 2;
            width: 60px;
            height: 100px;
            margin-top: -100px;
            margin-left: 125px;
        }
    
        #reportImage {
            grid-row: 2;
            grid-column: 3;
            margin-top: 25%;
            height: 346px;
            width: 425px;
            margin-right: 23%;
        }
        
   


        
    
    /*************************** TABLET PORTRAIT ***********************************/
    @media screen and (max-width: 960px) {
        article {
            display: grid;
            grid-template-columns: 1fr;
            grid-template-rows: repeat(7, auto);
        }
        
        .summaryPara {
            grid-row: 1;
            grid-column: 1/4;
            margin-top: 3%;
            margin-left: 19%;
            margin-right: 30%;
        }  

        header {
            grid-row: 1;
            grid-column: 1/-1;
            height: 380px;
        }
    
    
        #capImg {
            object-fit: cover;
            object-position: 50% 20%;
            width: 100%;
            height:380px;
        }
    
        #titleBox {
            background-color: #9c9c9c;
            opacity: .9;
            height: 20.0vw;
            width: 43%;
            position: absolute;
            top: 12%;
            left: 35%;
            z-index: 1;
            color: white;
            font-size: 3vw;
            font-family: "Rawline";
            font-weight: bold;
            padding: 2% 1% 10% 1%;
            text-align: center;
        }
    
    
            
            /* NAV */
            nav {
                background-color: #ececec;
                grid-row: 2;
                grid-column: 1/-1;
                height: 35px;
                font-family: "Rawline";
                font-size: 16px;
                font-weight: bold;
                color: black;
                display: flex;
                align-items: center;
                padding-left: 15%;
                padding-top: 1%;
            }
            
            nav ul {
                list-style-type: none;
                overflow: hidden;
                text-align: center;
                margin-left: -14.5%;
            }
            
            nav li {
                margin-top: 0%;
                display: inline-block;
                padding: 4px 8px;
                text-align: center;
            }
            
            li a {
                text-decoration: none;
                color: black;
                text-decoration: none;
            }
            
            li a:hover {
                color: darkgrey;
            }
            
            #nav-pin-wrapper {
                background-color: #FFFFFF;
                grid-row: 2;
                grid-column: 1/-1;
                z-index: 99;
            }
            
            #nav-pin-wrapper ul {
                margin-top: -5px;
            } 
        
        
        /* Introduction Section */
        #summary {
            grid-row: 3;
            grid-column: 1/-1;
        }
        
        #summaryPara {
            grid-row: 1;
            grid-column: 1/4;
            margin-top: 3%;
            margin-left: 20%;
            margin-right: 20%;
        }  

        .donutContainer {
            display: grid;
            grid-gap: 10px;
            grid-template-columns: repeat(8, [col] auto ) ;
            grid-template-rows: repeat(8, [row] auto  );
            margin-top: 10%;
            margin-bottom: -70%;
        }
    
        .donutpara {
            grid-column: col / span 6;
            grid-row: row / span 4;
            text-align: justify;
            padding-right: 10%;
        }
    
        .donutone {
            grid-column: col 6 / span 2;
            grid-row: row / span 2;
            width: 500;
            height: auto;
            margin-left: 60%;
            margin-bottom: -30%;
            margin-top: 10%;
        }
    
        .donuttwo {
            grid-column: col 6 / span 2;
            grid-row: row 3 / span 2;
            width: 500;
            height: auto;
            margin-left: 60%;
            margin-bottom: 60%;
    
        }
    
        .donutlabel {
            grid-column: col 6 / span 2;
            grid-row: row 5/ span 3;
            margin-left: 60%;
            margin-top: -110%;
            font-family: 'Raleway';
            font-weight: bold;
            font-size: 16px;
            text-align: center;
            color: #34495e;
          }
    

/*     
        #conclusion {
            grid-row: 16;
            grid-column: 1/-1;
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            grid-template-rows: repeat(3, auto);
            margin-top: -20%;
            font-size: 20px;
            margin-left: 19%;
            margin-right: 30%;
            margin-bottom: 5%;
        } */
    

        .calloutContainer {
            display: grid;
            grid-gap: 1em;
            margin-bottom: 10%;
            margin-left: 12%;
            margin-right: 12%;
            grid-template-columns: repeat(12, 1fr);
            grid-template-rows: repeat(auto);
            padding: 0px 0px 0 0px;
        }
        .calloutNumber {
            grid-column: 3 / 9;
            grid-row: 1/2;
            padding-right: 20px;
        }

        .calloutText {
            grid-column: 3 / 9;
            grid-row: 3;
            margin-top: -10px;
             margin-right: 20px;
        }

        .calloutNumber1 {
            grid-column: 3 / 9;
            grid-row: 4/5;
        }

        .calloutText1 {
            grid-column: 3 / 9;
            grid-row: 6;
            margin-top: -10px;
        }

        .calloutNumber2 {
            grid-column: 3 / 9;
            grid-row: 7/8;
        }

        .calloutText2 {
            grid-column: 3 / 9;
           grid-row: 9;
            margin-top: -10px;
        }

    
        /* REPORT SECTION */
        #report {
            grid-row: 17;
            grid-column: 1/-1;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(4, auto);
        }
        
        #reportTitle {
            grid-row: 1;
            grid-column: 1/-1;
            margin-left: -13%;
        }
        #reportPara {
            grid-row: 2;
            grid-column: 1/3;
            margin-left: 28%;
            margin-right: -7%;
        }
        #reportPara button {
            background-color: white;
            border: solid rgb(107, 106, 106);
            margin-top: 20px;
            width: 250px;
            height: 50px;
            font-family: "Rawline";
            font-size: 23px;
            margin-left: 24%;
        }
        #reportPara div {
            width: 100px;
            height: 30px;
            margin-left: 75px;
        }
    
        div#excelIcon {
            grid-row: 2;
            grid-column: 1;
            width: 60px;
            height: 100px;
            margin-top: 10px;
            margin-left: 260px;
        }
    
        div#socialIcon {
            grid-row: 2;
            grid-column: 2;
            width: 60px;
            height: 100px;
            margin-top: -100px;
            margin-left: 205px;
        }
    
        #reportImage {
            display: none;
        }
        
        
    
    /*************************** MOBILE ***********************************/
    @media screen and (max-width: 760px) {

        
                article {
                    display: grid;
                    grid-template-columns: 1fr;
                    grid-template-rows: repeat(7, auto);
                }

                .summaryPara {
                    grid-row: 1;
                    grid-column: 1/4;
                    margin-top: 2%;
                    margin-left: 10%;
                    margin-right: 10%;
                }  

                header {
                    grid-row: 1;
                    grid-column: 1/-1;
                    height: 380px;
                }
            
            
                #capImg {
                    object-fit: cover;
                    object-position: 50% 20%;
                    width: 100%;
                    height:300px;
                }
            
            
                #titleBox {
                    background-color: #9c9c9c;
                    opacity: .9;
                    height: 20.0vw;
                    width: 43%;
                    position: absolute;
                    top: 12%;
                    left: 50%;
                    z-index: 1;
                    color: white;
                    font-size: 3vw;
                    font-family: "Rawline";
                    font-weight: bold;
                    padding: 1% 1% 10% 1%;
                    text-align: center;
                }
                
                /* NAV */
                nav {
                    background-color: #ececec;
                    grid-row: 2;
                    grid-column: 1;
                    height: 30px;
                    width: 100%;
                    font-family: "Rawline";
                    font-size: 2.3vw;
                    font-weight: bold;
                    color: black;
                    padding-left: 30px;
                    align-items: center;

                }
                
                nav ul {
                    list-style-type: none;
                    overflow: hidden;
                    text-align: center;
                    margin-left: -5%;
                }
                
                nav li {
                    margin-top: 1%;
                    display: inline-block;
                    padding: 1px 2px;
                    text-align: center;
                }
                
                li a {
                    text-decoration: none;
                    color: black;
                    text-decoration: none;
                }
                
                li a:hover {
                    color: darkgrey;
                }
                
                #nav-pin-wrapper {
                    background-color: #FFFFFF;
                    grid-row: 2;
                    grid-column: 1;
                    z-index: 99;
                    width: 100%;
                }
                
                #nav-pin-wrapper ul {
                    margin-top: -3px;
                } 
            
            
            /* Overview Section */
            #summary {
                grid-row: 3;
                grid-column: 1/-1;
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                grid-template-rows: repeat(1, auto);
            }
            
            #summaryPara {
                grid-row: 1;
                grid-column: 1/4;
                margin-top: 2%;
                margin-left: 5%;
                margin-right: 5%;
            }  
            
            .donutContainer {
                display: grid;
                grid-gap: 10px;
                grid-template-columns: repeat(8, [col] auto ) ;
                grid-template-rows: repeat(8, [row] auto  );
                margin-top: 10%;
                margin-bottom: -50%;
            }
        
            .donutpara {
                grid-column: col / span 6;
                grid-row: row / span 4;
                text-align: justify;
                padding-right: 10%;
            }
        
            .donutone {
                grid-column: col 6 / span 2;
                grid-row: row / span 2;
                width: 350;
                height: auto;
                margin-left: 60%;
                margin-bottom: -55%;
                margin-top: -8%;      
            }
        
            .donuttwo {
                grid-column: col 6 / span 2;
                grid-row: row 3 / span 2;
                width: 350;
                height: auto;
                margin-left: 60%;
                margin-bottom: 60%;
        
            }
        
            .donutlabel {
                grid-column: col 6 / span 2;
                grid-row: row 5/ span 3;
                margin-left: 60%;
                margin-top: -120%;
                font-family: 'Raleway';
                font-weight: bold;
                font-size: 16px;
                text-align: center;
                color: #34495e;
              }
        
/*             #conclusion {
                grid-row: 17;
                grid-column: 1/-1;
                display: grid;
                grid-template-columns: repeat(5, 1fr);
                grid-template-rows: repeat(3, auto);
                margin-top: -60%;
                font-size: 20px;
                margin-left: 5%;
                margin-right: 5%;
                margin-bottom: 5%;
            }
 */        
        

            .calloutContainer {
                display: grid;
                grid-gap: 1em;
                margin-bottom: 10%;
                margin-left: 12%;
                margin-right: 12%;
                grid-template-columns: repeat(12, 1fr);
                grid-template-rows: repeat(auto);
                padding: 0px 0px 0 0px;
            }
            .calloutNumber {
                grid-column: 3 / 9;
                grid-row: 1/2;
                padding-right: 20px;
            }
    
            .calloutText {
                grid-column: 3 / 9;
                grid-row: 3;
                margin-top: -40px;
/*                 margin-right: 20px;
 */            }
    
            .calloutNumber1 {
                grid-column: 3 / 9;
                grid-row: 4/5;
            }
    
            .calloutText1 {
                grid-column: 3 / 9;
                grid-row: 6;
                margin-top: -40px;
            }
    
            .calloutNumber2 {
                grid-column: 3 / 9;
                grid-row: 7/8;
            }
    
            .calloutText2 {
               grid-column: 3 / 9;
               grid-row: 9;
               margin-top: -40px;
               padding-bottom: 5%;
            }
            
            /* REPORT SECTION */
            #report {
                grid-row: 17;
                grid-column: 1/-1;
                display: grid;
                grid-template-columns: 1fr;
                grid-template-rows: repeat(2, auto);
                margin-top: -10%;
            }
            
            #reportTitle {
                grid-row: 1;
                grid-column: 1/-1;
                font-size: 32px;
                margin-left: 0%;
            }
            #reportPara {
                grid-row: 2;
                grid-column: 1;
                margin-top: 2%;
                margin-left: 5%;
                margin-right: 5%;
            }
            #reportPara button {
                background-color: white;
                border: solid rgb(107, 106, 106);
                margin-top: 20px;
                width: 80%;
                margin-left: 10%;
                height: 50px;
                font-family: "Rawline";
                font-size: 23px;
            }
            #reportPara div {
                width: 10%;
                height: 30px;
                margin-left: 45%;
            }
    
        
            div#excelIcon {
                grid-row: 3;
                grid-column: 1;
                width: 60px;
                height: 100px;
                margin-top: 10px;
                margin-left: 37%;
            }
        
            div#socialIcon {
                grid-row: 3;
                grid-column: 2;
                width: 60px;
                height: 100px;
                margin-top: -100px;
                margin-left: 50%;
            }
    
        
            #reportImage {
                display: none;
            }