/* File containing all main contents of projects section */

/* projects section container */
#middle_4
    {
        position: absolute;
        margin: 0;
        padding: 0;
        width: 100%;
        height: 1500px;
        top: 64%;
        left: 0;
        order: 2;
        background: #620a0a;
        opacity: 1;
        transition: opacity 1s;
    }

/* main page contents */
#pp_title /* main title for projects section */
    {
        position: absolute;
        margin: 0;
        padding: 0;
        width: 300px;
        height: 60px;
        top: 1%;
        left: 37%;
    }

#project_1
    {
        position: absolute;
        margin: 0;
        padding: 0;
        width: 98%;
        height: 425px;
        bottom: 1%;
        left: 1%;
    }

#project_2
    {
        position: absolute;
        margin: 0;
        padding: 0;
        width: 98%;
        height: 425px;
        bottom: 32%;
        left: 1%;
    }

#project_3
    {
        position: absolute;
        margin: 0;
        padding: 0;
        width: 98%;
        height: 475px;
        top: 6%;
        left: 1%;
    }

.sec_title_wrapper /* container for subheading and year */
    {
        position: absolute;
        margin: 0;
        padding: 0;
        width: 430px;
        height: 25px;
        top: 2%;
        left: 5%;
    }

.sec_title_pp /* subheading */
    {
        position: absolute;
        margin: 0;
        padding: 0;
        width: 90%;
        height: 0;
        top: 0;
        left: 0;
    }

.year /* year */
    {
        position: absolute;
        margin: 0;
        padding: 0;
        width: 10%;
        height: 50px;
        top: 30%;
        left: 85%;
    }

.year_2 /* year */
    {
        position: absolute;
        margin: 0;
        padding: 0;
        width: 10%;
        height: 50px;
        top: 30%;
        left: 69%;
    }

.year_3 /* year */
    {
        position: absolute;
        margin: 0;
        padding: 0;
        width: 10%;
        height: 50px;
        top: 30%;
        left: 53%;
    }

.image_container /* container for image viewer */
    {
        position: absolute;
        background: #030000;
        margin: 0;
        padding: 0;
        width: 650px;
        height: 330px;
        top: 10%;
        left: 5%;
    }

.pp_image /* class for JS function to display images in image viewer */
    {
        position: absolute;
        background: #030000;
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        border-width: 0.15vw;
        border-style: solid;
        border-color: #030000;
        z-index: 0;
        opacity: 1;
        transition: opacity 0.75s;
    }

.pp_image_2 /* class for JS function to display images in image viewer */
    {
        position: absolute;
        background: #030000;
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        border-width: 0.15vw;
        border-style: solid;
        border-color: #030000;
        z-index: 0;
        opacity: 1;
        transition: opacity 0.75s;
    }

.pp_image_3 /* class for JS function to display images in image viewer */
    {
        position: absolute;
        background: #030000;
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        border-width: 0.15vw;
        border-style: solid;
        border-color: #030000;
        z-index: 0;
        opacity: 1;
        transition: opacity 0.75s;
    }

/* back button for image viewer and mouse over effect*/
.btn_back
    {
        position: absolute;
        margin: 0;
        padding: 0;
        background: #030000;
        width: 50px;
        height: 50px;
        top: 42%;
        left: 0;
        opacity: 30%;
        z-index: 2;
    }

.btn_back:hover
    {
        opacity: 80%;
        transition: opacity 0.5s;
    }

/* forward button for image viewer and mouse over effect*/
.btn_forward
    {
        position: absolute;
        margin: 0;
        padding: 0;
        background: #030000;
        width: 50px;
        height: 50px;
        top: 42%;
        left: 92.8%;
        opacity: 30%;
        z-index: 2;
    }

.btn_forward:hover
    {
        opacity: 80%;
        transition: opacity 0.5s;
    }

.pp_text /* project text */
    {
        position: absolute;
        margin: 0;
        padding: 0;
        width: 47%;
        height: 200px;
        top: 15%;
        right: 4%;
    }

.pp_text_2 /* project text for larger contents*/
    {
        position: absolute;
        margin: 0;
        padding: 0;
        width: 47%;
        height: 200px;
        top: 10%;
        right: 4%;
    }

.dl_link /* container for download button */
    {
        position: absolute;
        margin: 0;
        padding: 0;
        width: 600px;
        height: 50px;
        top: 76%;
        left: 50%;
        border-style: solid;
        border-color: #030000;
        border-width: 0.1vw;
    }

.dl_text /* download text */
    {
        position: absolute;
        margin: 0;
        padding: 0;
        width: 400px;
        height: 20px;
        top: 30%;
        left: 7%;
    }

.dl_button_2 /* download button */
    {
        position: absolute;
        margin: 0;
        padding: 0;
        width: 65px;
        height: 40px;
        top: 10%;
        right: 10%;
    }

.dl_link_2
    {
        position: absolute;
        margin: 0;
        padding: 0;
        width: 600px;
        height: 50px;
        top: 62%;
        left: 50%;
        border-style: solid;
        border-color: #030000;
        border-width: 0.1vw;
    }

.dl_link_3 /* container for download button */
    {
        position: absolute;
        margin: 0;
        padding: 0;
        width: 600px;
        height: 50px;
        top: 67%;
        left: 50%;
        border-style: solid;
        border-color: #030000;
        border-width: 0.1vw;
    }

.dl_link_4
    {
        position: absolute;
        margin: 0;
        padding: 0;
        width: 600px;
        height: 50px;
        top: 55%;
        left: 50%;
        border-style: solid;
        border-color: #030000;
        border-width: 0.1vw;
    }

.dl_link_5 /* container for download button */
    {
        position: absolute;
        margin: 0;
        padding: 0;
        width: 600px;
        height: 50px;
        top: 79%;
        left: 50%;
        border-style: solid;
        border-color: #030000;
        border-width: 0.1vw;
    }

.dl_text_2
    {
        position: absolute;
        margin: 0;
        padding: 0;
        width: 300px;
        height: 20px;
        top: 30%;
        left: 7%;
    }

.dl_button_2_2
    {
        position: absolute;
        margin: 0;
        padding: 0;
        width: 65px;
        height: 40px;
        top: 10%;
        right: 10%;
    }

button /* button object */
    {
        width: 100%;
        height: 100%;

    }

/* styling overrides for screen over 3840px (4K) */
@media only screen and (min-width: 3840px){

#pp_title
    {
        top: 2%;
        left: 48%;
    }

#project_1
    {
        left: 23%;
        width: 54%
    }

#project_2
    {
        left: 23%;
        width: 54%
    }

#project_3
    {
        left: 23%;
        width: 54%
    }

.pp_text /* project text */
    {
        width: 47%;
        top: 15%;
        right: 3%;
    }

.pp_text_2 /* project text */
    {
        width: 47%;
        top: 15%;
        right: 3%;
    }
}

/* styling overrides for screen over 2560px (QHD) */
@media only screen and (min-width: 2560px) and (max-width: 3839px){

#pp_title
    {
        left: 46%;
    }

#project_1
    {
        left: 13%;
        width: 74%
    }

#project_2
    {
        left: 13%;
        width: 74%
    }

#project_3
    {
        left: 13%;
        width: 74%
    }

.pp_text /* project text */
    {
        width: 47%;
        right: 4%;
    }

.pp_text_2 /* project text */
    {
        width: 47%;
        right: 4%;
    }
}

/* styling overrides for screen under 2560px (QHD) */
@media only screen and (max-width: 2560px){

#pp_title
    {
        left: 46%;
    }

#project_1
    {
        left: 13%;
        width: 74%
    }

#project_2
    {
        left: 13%;
        width: 74%
    }

#project_3
    {
        left: 13%;
        width: 74%
    }

.pp_text /* project text */
    {
        width: 47%;
        right: 3%;
    }

.pp_text_2 /* project text */
    {
        width: 47%;
        right: 3%;
    }
}

/* styling overrides for screen under 2225px */
@media only screen and (max-width: 2225px){

#pp_title
    {
        left: 43.5%;
    }

#project_1
    {
        left: 8%;
        width: 84%
    }

#project_2
    {
        left: 8%;
        width: 84%
    }

#project_3
    {
        left: 8%;
        width: 84%
    }

.pp_text /* project text */
    {
        width: 47%;
        right: 3%;
    }

.pp_text_2 /* project text */
    {
        width: 47%;
        right: 3%;
    }
}

/* styling overrides for screen under 1850px */
@media only screen and (max-width: 1920px){

#pp_title
    {
        left: 44%;
    }

#project_1
    {
        left: 5%;
        width: 90%
    }

#project_2
    {
        left: 5%;
        width: 90%
    }

#project_3
    {
        left: 5%;
        width: 90%
    }

.pp_text /* project text */
    {
        width: 47%;
        right: 5%;
    }

.pp_text_2 /* project text */
    {
        width: 47%;
        right: 5%;
    }

.dl_link
    {
        left: 48%;
    }

.dl_link_2
    {
        left: 48%;
    }

.dl_link_3
    {
        left: 48%;
    }

.dl_link_4
    {
        left: 48%;
    }

.dl_link_5
    {
        left: 48%;
    }
}

/* styling overrides for screen under 1850px */
@media only screen and (max-width: 1850px){

#middle_4
    {
        top: 65.5%;
    }

#project_1
    {
        left: 0%;
        width: 98%
    }

#project_2
    {
        left: 0%;
        width: 98%
    }

#project_3
    {
        left: 0%;
        width: 98%
    }

.pp_text /* project text */
    {
        width: 47%;
        right: 3%;
    }

.pp_text_2 /* project text */
    {
        width: 47%;
        right: 3%;
    }

.dl_link
    {
        left: 50%;
    }

.dl_link_2
    {
        left: 50%;
    }

.dl_link_3
    {
        left: 50%;
    }

.dl_link_4
    {
        left: 50%;
    }

.dl_link_5
    {
        left: 50%;
    }
}

/* styling overrides for screen under 1536px */
@media only screen and (max-width: 1536px){

#pp_title
    {
        left: 42.5%;
    }

.sec_title_wrapper
    {
        left: 2%;
    }

.image_container
    {
        width: 600px;
        height: 300px;
        left: 2%;
    }

.pp_text
    {
        width: 50%;
        right: 0%;
    }

.pp_text_2
    {
        width: 50%;
        right: 0%;
    }

.dl_link /* container for download button */
    {
        top: 81%;
    }

.dl_link_2
    {
        top: 68%;
    }

.dl_link_3 /* container for download button */
    {
        top: 72%;
    }

.dl_link_4
    {
        top: 59%;
    }

.dl_link_5 /* container for download button */
    {
        top: 85%;
    }

.btn_forward
    {
        left: 92%;
    }
}

/* styling overrides for screen under 1366px */
@media only screen and (max-width: 1366px){

#middle_4
    {
        top: 65%;
        height: 1525px;
    }

#pp_title
    {
        top: 0.5%;
        left: 42.5%;
    }

#project_1
    {
        bottom: 2.5%;
    }

#project_2
    {
        bottom: 33.5%;
    }

#project_3
    {
        top: 5%;
    }

.sec_title_wrapper
    {
        left: 2%;
    }

.image_container
    {
        width: 550px;
        height: 275px;
        left: 2%;
    }

.pp_text
    {
        width: 45%;
        right: 0%;
    }

.pp_text_2
    {
        width: 45%;
        right: 0%;
    }

.dl_link /* container for download button */
    {
        top: 89%;
        left: 55%;
        width: 480px;
    }

.dl_link_2
    {
        top: 76%;
        left: 55%;
        width: 480px;
    }

.dl_link_3 /* container for download button */
    {
        top: 79%;
        left: 55%;
        width: 480px;
    }

.dl_link_4
    {
        top: 66%;
        left: 55%;
        width: 480px;
    }

.dl_link_5 /* container for download button */
    {
        top: 92%;
        left: 55%;
        width: 480px;
    }

.dl_button_2
    {
        right: 4%;
    }

.dl_button_2_2
    {
        right: 4%;
    }

.dl_text
    {
        left: 4%;
    }

.dl_text_2
    {
        left: 4%;
    }

.btn_forward
    {
        left: 91%;
    }
}

/* styling overrides for screen under 1100px */
@media only screen and (max-width: 1100px){

#middle_4
    {
        height: 2400px;
        top: 61.7%;
    }

#pp_title
    {
        top: 0.2%;
        left: 38%;
    }

#project_1
    {
        bottom: 0.15%;
        height: 750px;
    }

#project_2
    {
        bottom: 33%;
        height: 750px;
    }

#project_3
    {
        top: 2.7%;
        height: 750px;
    }

.sec_title_wrapper
    {
        width: 420px;
        top: 1%;
    }

.image_container
    {
        top: 5%;
    }

.pp_text /* project text */
    {
        top: 45%;
        width: 480px;
    }

.pp_text_2 /* project text */
    {
        top: 45%;
        width: 480px;
    }

.dl_link /* container for download button */
    {
        top: 87.5%;
        left: auto;
        right: 0;
    }

.dl_link_2
    {
        top: 80%;
        left: auto;
        right: 0;
    }

.dl_link_3 /* container for download button */
    {
        top: 87.8%;
        left: auto;
        right: 0;
    }

.dl_link_4
    {
        top: 80%;
        left: auto;
        right: 0;
    }

.dl_link_5 /* container for download button */
    {
        top: 95.5%;
        left: auto;
        right: 0;
    }
}

/* styling overrides for screen under 620px */
@media only screen and (max-width: 620px){

#middle_4
    {
        height: 2350px;
        top: 63.3%;
    }

#pp_title
    {
        left: 22%;
    }

#project_1
    {
        bottom: -0.5%;
    }

#project_2
    {
        bottom: 32.5%;
    }

#project_3
    {
        top: 2.7%;
    }

.sec_title_wrapper
    {
        width: 400px;
        top: 1%;
    }

.image_container
    {
        width: 455px;
        height: 235px;
    }

.btn_forward
    {
        width: 75px;
        height: 75px;
        top: 36%;
        left: 84.1%;
    }

.btn_back
    {
        width: 75px;
        height: 75px;
        top: 36%;
        opacity: 30%;
    }

.pp_text /* project text */
    {
        top: 39%;
        width: 460px;
    }

.pp_text_2 /* project text */
    {
        top: 39%;
        width: 460px;
    }

.dl_link /* container for download button */
    {
        width: 460px;
        top: 87.5%;
    }

.dl_link_2
    {
        width: 460px;
        top: 78%;
    }

.dl_link_3 /* container for download button */
    {
        top: 84%;
        width: 460px;
    }

.dl_link_4
    {
        width: 460px;
        top: 74%;
    }

.dl_link_5 /* container for download button */
    {
        width: 460px;
        top: 94%;
    }

.dl_button_2
    {
        right: 2%;
    }

.dl_button_2_2
    {
        right: 2%;
    }

.dl_text
    {
        left: 2%;
    }

.dl_text_2
    {
        left: 2%;
    }
}

/* styling overrides for screen under 500px */
@media only screen and (max-width: 500px) {

#middle_4
    {
        height: 2375px;
        top: 63.4%;
    }

#pp_title
    {
        left: 19%;
        width: 250px;
    }

#project_1
    {
        bottom: -0.5%;
    }

#project_2
    {
        bottom: 32.5%;
    }

#project_3
    {
        top: 2.7%;
    }

.image_container
    {
        width: 405px;
        height: 200px;
    }

.btn_forward
    {
        top: 32%;
        left: 82%;
    }

.btn_back
    {
        top: 32%;
    }

.pp_text
    {
        right: auto;
        left: 2%;
        width: 96%;
        top: 34%;
    }

.pp_text_2
    {
        right: auto;
        left: 2%;
        width: 96%;
        top: 34%;
    }

.dl_link /* container for download button */
    {
        width: 400px;
        right: auto;
        left: 2%;
    }

.dl_link_2
    {
        width: 400px;
        right: auto;
        left: 2%;
    }

.dl_link_3 /* container for download button */
    {
        width: 400px;
        right: auto;
        left: 2%;
    }

.dl_link_4
    {
        width: 400px;
        right: auto;
        left: 2%;
    }

.dl_link_5 /* container for download button */
    {
        width: 400px;
        right: auto;
        left: 2%;
    }

.dl_button_2
    {
        right: 2%;
    }

.dl_button_2
    {
        right: 1%;
    }

.dl_button_2_2
    {
        right: 1%;
    }

.dl_text
    {
        left: 1%;
        width: 325px;
    }

.dl_text_2
    {
        left: 1%;
        width: 325px;
    }
}

/* styling overrides for screen under 420px */
@media only screen and (max-width: 420px) {

#middle_4
    {
        top: 62.9%;
    }

.sec_title_wrapper
    {
        width: 380px;
    }

.image_container
    {
        width: 375px;
        height: 190px;
    }

.btn_forward
    {
        left: 80.1%;
    }

.dl_link /* container for download button */
    {
        width: 370px;
    }

.dl_link_2
    {
        width: 370px;
    }

.dl_link_3 /* container for download button */
    {
        width: 370px;
    }

.dl_link_4
    {
        width: 370px;
    }

.dl_link_5 /* container for download button */
    {
        width: 370px;
    }

.dl_text
    {
        width: 300px;
    }

.dl_text_2
    {
        width: 300px;
    }
}

/* styling overrides for screen under 390px */
@media only screen and (max-width: 390px) {

#middle_4
    {
        height: 2375px;
        top: 61.3%;
    }

#pp_title
    {
        left: 19%;
        width: 220px;
    }

.sec_title_wrapper
    {
        width: 345px;
    }

.image_container
    {
        width: 360px;
        height: 190px;
    }

.btn_forward
    {
        left: 79.9%;
    }

.dl_link /* container for download button */
    {
        width: 350px;
    }

.dl_link_2
    {
        width: 350px;
    }

.dl_link_3 /* container for download button */
    {
        width: 350px;
    }

.dl_link_4
    {
        width: 350px;
    }

.dl_link_5 /* container for download button */
    {
        width: 350px;
    }

.dl_text
    {
        width: 280px;
    }

.dl_text_2
    {
        width: 280px;
    }
}

/* styling overrides for screen under 370px */
@media only screen and (max-width: 370px) {

#middle_4
    {
        height: 2250px;
        top: 62.2%;
    }

#project_1
    {
        height: 700px;
    }

#project_2
    {
        height: 700px;
    }

#project_3
    {
        height: 700px;
    }

.image_container
    {
        width: 340px;
        height: 190px;
    }

.btn_forward
    {
        left: 79%;
    }

.dl_link /* container for download button */
    {
        width: 335px;
    }

.dl_link_2
    {
        width: 335px;
    }

.dl_link_3 /* container for download button */
    {
        width: 335px;
    }

.dl_link_4
    {
        width: 335px;
    }

.dl_link_5 /* container for download button */
    {
        width: 335px;
    }
}