/* 
    CSS Guide 

    1.  GENERAL STYLES

    2.  HEADER

    3.  SECTION 1 - Event
        3a. Hero Banner
        3b. Intro Video
        3c. Event Info

    4.  SECTION 2 - Course
        4a. Project Exhibit
        4b. Testimonials
        4c. Course Info
    
    5.  SECTION 3 - Student
        5a. Featured Work
        5b. Student Portfolios
        5c. Developer Portfolios

    6.  THANK YOU

    7.  FOOTER
*/

/* 1. GENERAL STYLES */

/* Thin (100) */
@font-face {
    font-family: 'Metropolis';
    src: url('../fonts/Metropolis-Thin.otf') format('opentype'),
         url('../fonts/Metropolis-Thin.woff') format('woff'),
         url('../fonts/Metropolis-Thin.woff2') format('woff2');
    font-weight: 100;
    font-style: normal;
}

/* Regular (400) */
@font-face {
    font-family: 'Metropolis';
    src: url('../fonts/Metropolis-Regular.otf') format('opentype'),
         url('../fonts/Metropolis-Regular.woff') format('woff'),
         url('../fonts/Metropolis-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}

/* Medium (500) */
@font-face {
    font-family: 'Metropolis';
    src: url('../fonts/Metropolis-Medium.otf') format('opentype'),
         url('../fonts/Metropolis-Medium.woff') format('woff'),
         url('../fonts/Metropolis-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
}

/* SemiBold (600) */
@font-face {
    font-family: 'Metropolis';
    src: url('../fonts/Metropolis-SemiBold.otf') format('opentype'),
         url('../fonts/Metropolis-SemiBold.woff') format('woff'),
         url('../fonts/Metropolis-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
}

/* Bold (700) */
@font-face {
    font-family: 'Metropolis';
    src: url('../fonts/Metropolis-Bold.otf') format('opentype'),
         url('../fonts/Metropolis-Bold.woff') format('woff'),
         url('../fonts/Metropolis-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}

/* Extra Bold (800) */
@font-face {
    font-family: 'Metropolis';
    src: url('../fonts/Metropolis-ExtraBold.otf') format('opentype'),
         url('../fonts/Metropolis-ExtraBold.woff') format('woff'),
         url('../fonts/Metropolis-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
}

/* Black (900) */
@font-face {
    font-family: 'Metropolis';
    src: url('../fonts/Metropolis-Black.otf') format('opentype'),
         url('../fonts/Metropolis-Black.woff') format('woff'),
         url('../fonts/Metropolis-Black.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
}

.hidden {
    display: none;
}

img, embed, object, video, picture {
    max-width: 100%; 
}
  
html, body {
    height: 100%;
    min-height: 100vh;
    margin: 0;
    font-size: 16px;
    box-sizing: border-box; 
    background-color: #F5F5F5;
    scroll-behavior: smooth;
}

*, *::before, *::after {
    box-sizing: inherit;
}

body, button {
    font-family: 'Metropolis', sans-serif;
    box-sizing: border-box;
}

a {
    text-decoration: none;
    color: inherit;
}

p {
    line-height: 1.2;
}

.mobile-break {
    display: block;
}

.mobile-hide {
    display: none;
}

#back-to-top {
    display: none;
}

.dot-container {
    text-align: center;
    position: absolute;
    bottom: -10%;
    left: 0;
    right: 0;
}

.dot {
    display: inline-block;
    width: .75rem;
    height: .75rem;
    background-color: #D9D8D8;
    border-radius: 50%;
    margin: 0.3125rem;
    cursor: pointer;
}

.dot.active {
    background-color: #AFAFAF;
}

/* 2. HEADER */

#banner {
    background-color: #B5262D;
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    display: flex;
    justify-content: space-between;
    padding: 0 1.5625rem;
    align-items: center;
    position: sticky;
    top: 0;
    left: 0;
    height: 3.125rem;
    box-sizing: border-box;
    z-index: 10;
    overflow: hidden;
}

#right-banner img {
    display: none;
}

/* 3. SECTION 1 - Event */

/* 3a. Hero Banner */

#hamburger-menu {
    cursor: pointer;
    width: 1.875rem;
    height: 1.5rem;
    position: absolute;
    top: 4.375rem;
    right: 1.25rem;
    z-index: 3;
}

#hamburger-menu div {
    width: 100%;
    height: 0.25rem;
    background-color: #BA3026;
    position: absolute;
    transition: 0.4s ease-in-out;
    border-radius: 0.1875rem;
}

#line1 { 
    margin: 0;
}

#line2 { 
    margin-top: 0.625rem; 
}

#line3 { 
    margin-top: 1.25rem; 
}

.activate #line1 {
    transform: rotate(45deg) translate(0.4375rem, 0.4375rem);
}

.activate #line2 {
    opacity: 0;
}

.activate #line3 {
    transform: rotate(-45deg) translate(0.4375rem, -0.4375rem);
}

#full-menu {
    display: none;
}

#mobile-menu {
    display: none;
    background-color: rgba(255, 255, 255, 0.95);
    padding: 1.5625rem 0;
    position: absolute;
    z-index: 2;
    border-radius: 0;
    left: 0;
    right: 0;
}

#mobile-menu ul {
    margin: 2.5rem 0rem 1rem 0;
    padding: 0;
}

#mobile-menu.show {
    display: block;
}

.mobile-menu-item {
    font-size: 1.875rem;
    font-weight: 700;
    position: relative;
    cursor: pointer;
    margin-left: 1rem;
    list-style-type: none;
    padding: 0.75rem 1.875rem;
}

.mobile-menu-item  a {
    width: 100vw;
    display: block;
}

@keyframes fadeInMobile {
    0% { 
        opacity: 0; 
    }
    100% { 
        opacity: 1; 
    }
}

#mobile-menu.show .mobile-menu-item  {
    animation: fadeInMobile 0.5s ease-in-out forwards;
    opacity: 0;
}

#mobile-menu.show .mobile-menu-item:nth-of-type(1) { 
    animation-delay: 0.1s; 
}

#mobile-menu.show .mobile-menu-item:nth-of-type(2) { 
    animation-delay: 0.2s; 
}

#mobile-menu.show .mobile-menu-item:nth-of-type(3) { 
    animation-delay: 0.3s; 
}

#hero-banner {
    background-image: url("../images/grey-background.png");
    background-size: cover;
}

#hero-con {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 3.125rem;
    perspective: 1000px;
}

#hero-logo {
    width: 100%;
    max-width: 25rem;
    opacity: 0.5;
    animation: rotateLogo 15s infinite linear;
}

@keyframes rotateLogo {
    0% {
        transform: rotateY(0deg);
    }

    25% {
        transform: rotateY(-20deg);
    }

    50% {
        transform: rotateY(0deg);
    }

    75% {
        transform: rotateY(20deg);
    }

    100% {
        transform: rotateY(0deg);
    }
}

#hero-title {
    position: absolute;
    top: 41%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#hero-title h3 {
    font-weight: 900;
    letter-spacing: 0.1875rem;
    color: #1D1D1D;
    font-size: 1.25rem;
    text-align: center;
}

#hero-title span:first-of-type {
    margin-top: 0.3125rem;
    display: block;
}

#hero-title span {
    color: #B5262D;
    font-size: 2.1875rem;
}

#hero-text {
    text-align: center;
    color: #1D1D1D;
    font-size: 1.5625rem;
    font-weight: 700;
    margin-top: -8.75rem;
}

#hero-text span {
    color: #B5262D;
}

#hero-text button {
    margin-top: 0;
    padding: 0.9375rem 4.0625rem;
}

/* 3b. Intro Video */

#scroll-con {
    background-color: #160305;
    overflow: hidden;
    color: white;
    font-weight: 500;
    font-size: 0.625rem;
    margin-top: 1.875rem;
    white-space: nowrap;
    padding: 1.25rem;
}

#scroll-text {
    display: inline-block;
    animation: scrollingText 30s linear infinite;
}

#scroll-text span {
    display: inline-block;
    padding-right: 1.25rem;
}

@keyframes scrollingText {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

#event-video-con {
    display: flex;
    justify-content: center;
}

.plyr--video {
    width: 90vw;
    margin: 0 auto;
    margin-top: 1.875rem;
    --plyr-color-main: #BC2519;
    --plyr-control-icon-size: 0.9375rem;
    --plyr-control-radius: 1.25rem;
    --plyr-font-family: Metropolis, sans-serif;
    --plyr-control-spacing: 0.9375rem;
}

/* 3c. Event Info */

#event-info {
    margin-top: 1.875rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#trophy-logo {
    width: 85vw;
    margin-top: 1.875rem;
}

#event-info-heading {
    margin-top: 0;
}

#event-info-text p {
    font-size: 0.8125rem;
    margin: 1.5rem auto;
    text-align: center;
    line-height: 1.3;
}

#address-mobile {
    margin-top: 1.25rem;
    font-weight: 700;
    font-size: 0.6875rem;
    width: 60vw;
}

#address {
    display: none;
}

#event-map {
    margin: 3.75rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#event-map span {
    font-size: 0.6875rem;
    text-align: center;
    display: block;
    margin-top: 0.625rem;
}

.section-headings {
    font-size: 2.1875rem;
    font-weight: 800;
    color: #1D1D1D;
    text-align: center;
    margin-bottom: 0;
}

.section-headings span {
    color: #BA3026;
}

.section-subheadings {
    font-size: 0.8125rem;
    font-weight: 500;
    text-align: center;
    margin-top: 0.3125rem;
}

.event-card {
    position: relative;
    color: white;
    border-radius: 0.9375rem;
    overflow: hidden;
    height: 29.6875rem;
    max-width: 18.75rem;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
    display: none;
}

#event-card-wrapper {
    position: relative;
    display: flex;
    gap: 2rem;
}

#event-next-btn {
    right: -6%;
    top: 45%;
    background-image: url(../images/right-arrow.svg);
}

#event-prev-btn {
    left: -6%;
    top: 45%;
    background-image: url(../images/left-arrow.svg);
}

.event-card-con {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    bottom: 2.5rem;
    background-color: #1D1D1D;
    padding: 1.25rem;
}

.event-heading-con {
    display: flex;
    align-items: center;
}

.event-number {
    color: #BA3026;
    font-size: 3.75rem;
    font-weight: 800;
    margin-left: 0.625rem;
    margin-right: 1.25rem;
}

.event-heading {
    font-size: 1.375rem;
    font-weight: 800;
    margin: 0;
}

.event-text {
    font-size: 1rem;
    margin-top: 0.9375rem;
    width: 92%;
    margin-left: 0.625rem;
    text-align: left;
}

.event-time {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #BA3026;
    padding: 0.9375rem;
    font-size: 1.375rem;
    font-weight: 900;
    text-align: center;
}

#event-stats-con {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    margin-top: 3.75rem;
    margin-bottom: -2.5rem;
}

.event-stats {
    display: flex;
    align-items: center;
    color: #1D1D1D;
    margin-top: 1.875rem;
}

.stats-number {
    color: #BA3026;
    font-size: 3.125rem;
    font-weight: 900;
    width: 6.25rem;
    text-align: center;
    margin-right: 3.125rem;
}

.stats-text {
    font-size: 1.25rem;
}

/* 4. SECTION 2 - Course */

/* 4a. Project Exhibit */

.project-card {
    border-radius: 1.5625rem;
    position: relative;
    max-width: 18.75rem;
    height: 29.875rem;
    border-radius: 1.25rem;
    overflow: hidden;
    margin: 1.875rem auto 5rem auto;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
    background-color: #1D1D1D;
    display: none;
}

.project-card img {
    position: absolute;
    height: 45%;
    width: 100%;
}

.project-placement {
    background-color: #BA3026;
    color: #FFFFFF;
    position: absolute;
    top: 45%;
    font-size: 1.625rem;
    font-weight: 800;
    width: 100%;
    padding: 1.25rem;
    text-align: center;
    margin-top: 0;
}

.project-names {
    position: absolute;
    color: white;
    font-size: 1.25rem;
    padding: 1.25rem 1.5625rem;
    text-align: center;
    bottom: 0;
    left: 0;
    right: 0;
}

#finalists-wrapper, #honour-wrapper {
    position: relative;
    padding: 0;
    width: 100%;
    max-width: 18.75rem;
    margin: 0 auto;
}

#finalists-next-btn {
    right: -5%;
    top: 42%;
    background-image: url(../images/right-arrow.svg);
}

#finalists-prev-btn {
    left: -5%;
    top: 42%;
    background-image: url(../images/left-arrow.svg);
}

#honour-next-btn {
    right: -5%;
    top: 42%;
    background-image: url(../images/right-arrow.svg);
}

#honour-prev-btn {
    left: -5%;
    top: 42%;
    background-image: url(../images/left-arrow.svg);
}

#scroll-images-con {
    overflow: hidden;
    margin: 3.125rem 0 4.6875rem 0;
    transition: 150ms ease;
}

#scroll-images-con * {
    transition: 150ms ease;
}

.scroll-images {
    display: flex;
    width: calc((18.75rem) * 14);
    animation: scrollImages 25s linear infinite;
}

.scroll-images:nth-of-type(2) {
    display: none;
}

.scroll-images:nth-of-type(3) {
    display: none;
}

.scroll-content {
    display: flex;
    list-style-type: none;
    padding: 0;
    margin: 0;
}

#scroll-images-con li {
    width: 18.75rem;
    border-radius: 1.5625rem;
    overflow: hidden;
    transform: scale(0.9);
}

#scroll-images-con img {
    border-radius: 1.5625rem;
}

@keyframes scrollImages {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

#project-exhibit {
    margin-top: 6.25rem;
    overflow: hidden;
}

#wave-background-1 {
    width: 100%;
    background-image: url(../images/Hackathon-wave-412-1.png);
    padding-bottom: 56.25%;
    margin-bottom: -5%;
    margin-top: -30%;
    background-size: 150%;
    background-position: center;
    background-repeat: no-repeat; 
    overflow: hidden;
    pointer-events: none;
}

#project-heading h4 {
    text-align: center;
    margin: 0.625rem 0 0.9375rem 0;
    font-size: 1.25rem;
}

#project-text h4 {
    font-size: 1.875rem;
    font-weight: 800;
    margin: 1.875rem 0 1.5625rem 0;
}

#project-photo {
    margin: 0 auto;
    margin-top: 1.25rem;
    width: 80vw;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
    border-radius: 1.5625rem;
}

#project-text {
    font-size: 0.8125rem;
    width: 80vw;
    margin: 0 auto;
}

#project-goals {
    width: 80vw;
    margin: 0 auto;
}

#project-goals h4 {
    font-size: 1.875rem;
    font-weight: 800;
}

.goals-con {
    display: flex;
    padding-bottom: 2.5rem;
    padding-right: 1.5625rem;
}

.goals-con:last-of-type {
    padding-bottom: 0.625rem;
}

.goal-number {
    font-size: 1.25rem;
    font-weight: 800;
    color: #1D1D1D;
    text-align: right;
    flex-shrink: 0;
    width: 1.875rem;
}

.goal-text {
    font-size: 0.9375rem;
    color: #1D1D1D;
    margin-left: 3.125rem;
    line-height: 1.3;
}

.goal-text span {
    color: #B5262D;
    font-weight: 900;
}

#goals-button {
    margin: 3rem auto;
}

/* 4b. Testimonials */

#testimonial-container {
    position: relative;
    max-width: 18.75rem;
    width: 100%;
    margin: 0 auto;
}

#testimonial-container .dot-container {
    bottom: -7%;
}

#testimonial-heading {
    white-space: nowrap;
}

.testimonial-card {
    color: white;
    margin: 1.25rem 0;
    border-radius: 1.25rem;
    padding: 2rem;
    max-width: 18.75rem;
    height: auto;
    background-image: url("../images/testimonial-background.png");
    background-size: cover;
}

.testimonial-image {
    width: 6.375rem;
    margin-left: -0.3125rem;
    margin-top: 0.3125rem;
}

.testimonial-name {
    font-size: 1.5625rem;
    font-weight: 800;
    margin-bottom: 0;
}

.testimonial-job {
    font-size: 0.9375rem;
    margin-top: 0;
}

.testimonial-text {
    margin-top: 1.25rem;
    font-size: 0.75rem;
}

#testimonial-next-btn {
    right: -5%;
    top: 40%;
    background-image: url(../images/right-arrow.svg);
}

#testimonial-prev-btn {
    left: -5%;
    top: 40%;
    background-image: url(../images/left-arrow.svg);
}

.arrow {
    color: #1D1D1D;
    top: 45%;
    cursor: pointer;
    position: absolute;
    background-size: cover;
    padding: 1rem;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
    border-radius: 50%;
}

#wave-background-2 {
    width: 100%;
    background-image: url(../images/Hackathon-wave-412-2.png);
    padding-bottom: 56.25%;
    background-size: 130%;
    margin-top: -10%;
    background-position: center;
    background-repeat: no-repeat; 
    pointer-events: none;
}

/* 4c. Course Info */

#course-info-con {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#course-info-con img {
    width: 80vw;
    margin: 1.5625rem 0;
    border-radius: 1.5625rem;
}

.course-text {
    font-size: 0.8125rem;
    width: 80vw;
    margin: 0.4375rem;
}

#course-text-con {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.main-buttons {
    margin: 2.5rem 0;
    border-radius: 2.1875rem;
    border: none;
    background-color: #BC2519;
    padding: 0.9375rem 3.125rem;
    font-size: 0.9375rem;
    font-weight: 700;
    color: white;
    cursor: pointer;
}

/* 5. SECTION 3 - Student */

/* 5a. Featured Work */

.featured-work-card {
    position: relative;
    width: 19.4375rem;
    height: 29.875rem;
    border-radius: 1.5625rem;
    overflow: hidden;
    margin: 1.875rem auto;
    background-color: white;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
}

.featured-work-image {
    position: absolute;
    top: 0;
}

.featured-work-content {
    position: absolute;
    top: 45%;
    bottom: 0;
    background: white;
    padding: 1.5625rem;
    text-align: center;
    margin-top: -0.625rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.featured-work-heading {
    font-size: 1.5625rem;
    font-weight: 800;
    text-align: left;
    margin: 0;
}

.featured-work-subheading {
    font-size: 0.8125rem;
    font-weight: 700;
    color: #BC2519;
    margin: 0;
    text-align: left;
}

.featured-work-text {
    font-size: 0.8125rem;
    text-align: left;
    line-height: 1.2;
}

.featured-work-button {
    color: white;
    font-size: 0.9375rem;
    font-weight: 600;
    background-color: #BA3026;
    border: none;
    border-radius: 2.1875rem;
    padding: 0.75rem 2.1875rem;
    align-self: center;
    margin-top: auto; 
    margin-bottom: 0.625rem;
    cursor: pointer;
}

/* 5b. Student Portfolios */

#portfolio-background {
    background: radial-gradient(ellipse at top, #A7A7A7 0%, #888888 20%, #444444 70%, #1D1D1D 100%);
    margin-top: 3.125rem;
}

.portfolio-headings h3 {
    color: white;
    font-size: 1.875rem;
    width: 100%;
}

#student-heading {
    margin: 4rem 0;
}

#student-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

#student-grid div {
    display: flex;
    box-sizing: border-box;
    flex-direction: column;
    position: relative; 
    justify-content: center;
    align-items: center;
    margin-bottom: 0.5rem;
    border-radius: 0.625rem;
    border: 0.0625rem solid white;
    padding: 0.9375rem 0.3125rem;
    cursor: pointer;
    overflow: hidden;
}

#student-grid div a {
    font-size: 0.9375rem;
    font-weight: 700;
    color: white;
    text-align: center;
    z-index: 1;
}

/* 5c. Developer Portfolios */

#developer-heading {
    margin-top: 3rem;
    margin-bottom: 2rem;
}

#developer-portfolios {
    padding-bottom: 6.25rem;
}

#developer-grid div {
    display: flex;
    margin: 0 auto;
    box-sizing: border-box;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-top: 1.5625rem;
    margin-bottom: 1.5625rem;
    border: 0.1rem solid white;
    border-radius: 1rem;
    width: 85vw;
    padding: 1.5rem 1.25rem;
    position: relative;
    overflow: hidden; 
    z-index: 1;
}

#developer-grid div::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    background-color: #D03A29;
    z-index: -1; 
}

#developer-grid div p {
    font-size: 1.125rem;
    font-weight: 700;
    color: white;
    text-decoration: none;
    text-align: center;
    margin: 0;
    z-index: 1;
    margin-right: auto;
}

#developer-grid div a {
    font-size: 0.875rem;
    font-weight: 700;
    color: white;
    border: none;
    width: 50%;
    background-color: transparent;
    text-align: center;
    position: absolute;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 0rem 1rem 1rem 0rem;
    z-index: 1;
}

/* 6. THANK YOU */

#thankyou {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-image: url("../images/grey-background.png");
    background-size: cover;
    margin: 3.125rem 0;
}

.thankyou-heading p {
    margin-top: 1rem;
}

#trophy-logo-stand {
    margin-top: 3.75rem;
    width: 85vw;
}

#social-media p {
    text-align: center;
    font-weight: 700;
    color: #1D1D1D;
    font-size: 1.25rem;
    line-height: 1.3;
}

#social-media p span {
    color: #BC2519;
}

#sm-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5625rem;
    margin: 1.875rem 0;
}

#sm-icons a img {
    height: 1.25rem;
    width: 100%;
}

#thankyou-fanshawe h3 {
    font-weight: 900;
    letter-spacing: 0.1875rem;
    color: #1D1D1D;
    font-size: 1.25rem;
    text-align: center;
    margin-top: -1.25rem;
}

#thankyou-fanshawe span {
    color: #B5262D;
    font-size: 2.1875rem;
}

/* 7. FOOTER */

footer {
    background-color: #C92B1F;
    color: white;
    text-align: center;
}

#footer {
    margin: 3.125rem 0;
}

#footer-menu {
    list-style-type: none;
    padding: 0;
    display: block;
}

#footer-menu a {
    font-size: 1.5625rem;
    font-weight: 800;
    display: flex;
    justify-content: center;
    margin-top: 1.25rem;
}

#footer img {
    margin-top: 3.125rem;
}

#footer p {
    font-size: 0.8125rem;
    width: 70%;
    margin: 0 auto;
    margin-top: 1.25rem;
    line-height: 1.25rem;
}

/* MEDIA QUERIES */

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

    /* 1. GENERAL STYLES */

    html {
        font-size: 14px;
    }

    .mobile-break {
        display: none;
    }

    .mobile-hide {
        display: inline-block;
    }

    .section-headings {
        font-size: 2.8125rem;
    }

    .section-subheadings {
        font-size: 1.25rem;
        margin-top: 0.625rem;
    }

    .dot-container {
        display: none;
    }

    /* 2. HEADER */

    #banner {
        justify-content: space-between;
        font-size: .9rem;
    }

    #right-banner p {
        display: block;
    }

    /* 3. SECTION 1 - Event */

    /* 3a. Hero Banner */

    #hero-con {
        width: 100%;
    }

    #hero-logo {
        transform: scale(1.2);
        max-width: 30rem;
    }

    #hero-title h3 {
        font-size: 1.5625rem;
    }

    #hero-title span {
        font-size: 3.125rem;
    }

    #hero-text {
        margin: 0 0 4.125rem 0;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: left;
    }

    /* 3b. Intro Video */

    #scroll-con {
        padding: 1.875rem;
        font-size: 0.9375rem;
        margin-top: -3.75rem;
    }

    /* 3c. Event Info */

    #event-info-con {
        justify-content: left;
        margin: 3.125rem 0 5rem 0;
    }

    #trophy-logo {
        width: 100%;
        height: 100%;
        object-fit: cover;
        margin-top: 0;
        padding: 1rem;
    }

    #event-info-heading h3 {
        text-align: left;
        width: 100%;
        margin: 0;
        margin-top: 1rem;
        font-size: 2.5rem;
    }

    #event-info-text p {
        font-size: 0.875rem;
        text-align: left;
        margin: 1rem 0;   
    }

    #event-info-text {
        position: relative;
    }

    #address {
        display: block;
        width: 80%;
        font-size: 0.8125rem;
        margin: 0;
        margin-top: 0.9375rem;
        font-weight: 700;
    }

    #address-mobile {
        display: none;
    }

    #event-map {
        margin: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    #event-map span {
        display: none;
    }

    #event-info-right {
        margin-right: 1.875rem;
    }

    #map-marker {
        height: 1.6875rem;
        margin-right: 2rem;
    }

    #event-stats-con {
        flex-direction: row;
    }

    .event-stats {
        margin-right: 3.125rem;
    }

    .event-stats:first-of-type {
        margin-left: 3.125rem;
    }

    .stats-text {
        font-size: 0.9375rem;
    }

    .stats-number {
        width: 100%;
        margin-right: 1.25rem;
    }

    /* 4. SECTION 2 - Course */

    /* 4a. Project Exhibit */

    .event-card {
        display: block !important;
        max-width: 13.75rem;
        height: 20rem;
        background-color: white;
        transition: 150ms ease;
    }

    .event-number {
        font-size: 3.75rem;
        margin-left: 0;
        margin-right: 0.625rem;
    }

    .event-heading {
        font-size: 1rem;
    }

    .event-card-con {
        top: 45%;
        display: flex;
        justify-content: center;
        flex-direction: column;
    }

    .event-card * {
        transition: 150ms ease;
    }

    .event-heading-con {
        margin-top: -0.3125rem;
    }

    .event-text {
        margin-top: 0;
        font-size: 0.75rem;
        width: 100%;
        margin-left: 0;
    }

    .event-time {
        font-size: 1rem;
    }

    #finalists-wrapper,
    #honour-wrapper {
        max-width: 100vw;
        display: flex;
        flex-direction: row;
        gap: 1.875rem;
        justify-content: center;
    }

    .project-card {
        display: block !important;
        width: 100%;
        max-width: 13.75rem;
        height: 20rem;
        margin: 4.6875rem 0 4.6875rem 0;
        background-color: white;
        transition: 150ms ease;
    }

    .project-placement {
        font-size: 1rem;
        padding: 0.625rem;
        background-color: #1D1D1D;
        color: #CE3226;
    }

    .project-names {
        font-size: 0.9375rem;
        top: 53%;
        color: #1D1D1D;
        background-color: white;
    }

    .project-card * {
        transition: 150ms ease;
    }

    #wave-background-1 {
        margin-top: -20%;
        margin-bottom: -10%;
        background-size: 125%;
    }

    #project-text h4 {
        margin-top: 3.125rem;
    }

    #project-text p {
        font-size: 1rem;
    }

    .goals-con div {
        font-size: 1.25rem;
    }

    #goals-button {
        margin: 4rem auto 2.5rem auto;
    }

    #goals-button a {
        font-size: 1.375rem;
        padding: 0.9375rem 3.125rem;
    }

    /* 4b. Testimonials */

    #testimonial-container {
        max-width: 37.5rem;
    }

    #testimonial-container .dot-container {
        display: block;
    }

    .testimonial-card {
        max-width: 37.5rem;
    }

    .testimonial-image {
        width: 7.8125rem;
        margin-left: 0.3125rem;
        margin-top: 1.25rem;
    }

    .testimonial-name {
        font-size: 2.1875rem;
        width: 95%;
        margin-left: auto;
        margin-right: auto;
    }

    .testimonial-job {
        font-size: 1.25rem;
        width: 95%;
        margin-left: auto;
        margin-right: auto;
    }

    .testimonial-text {
        font-size: 1.125rem;
        width: 95%;
        margin-left: auto;
        margin-right: auto;
    }

    .arrow {
        display: none;
    }

    #testimonial-next-btn {
        display: block;
        right: -3%;
    }

    #testimonial-prev-btn {
        display: block;
        left: -3%;
    }

    /* 4c. Course Info */

    #course-info-con img {
        width: 75vw;
    }

    .course-text {
        font-size: 1rem;
        width: 75vw;
    }

    #course-button {
        font-size: 1.375rem;
        padding: 0.9375rem 3.125rem;
        margin-bottom: 3.125rem;
    }

    /* 5. SECTION 3 - Student */

    /* 5a. Featured Work */

    .featured-work-card {
        width: 85vw;
        height: 15rem;
        box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
        transition: 150ms ease;
        border-radius: 1.25rem;
    }

    .featured-work-image {
        position: absolute;
        max-width: 50%;
    }

    .featured-work-card * {
        transition: 150ms ease;
    }

    .featured-work-image img {
        height: 100%;
        width: 100%;
    }

    .featured-work-content {
        left: 50%;
        position: absolute;
        height: auto;
        top: 0;
        justify-content: flex-start;
    }

    .featured-work-heading {
        font-size: 1.5rem;
        margin: 0.3125rem 0;
    }

    .featured-work-subheading {
        font-size: 0.875rem;
    }

    .featured-work-text {
        font-size: 0.875rem;
    }

    .featured-work-button {
        bottom: 0.625rem;
        right: 1.25rem;
        position: absolute;
        padding: 0.625rem 1.5625rem;
        font-size: 0.875rem;
    }

    /* 5b. Student Portfolios */

    .portfolio-headings h3 {
        font-size: 2.8125rem;
        width: 100%;
    }

    #student-grid {
        gap: 3rem;
        grid-template-columns: repeat(3, 1fr);
    }

    #student-grid div {
        margin-bottom: 0;
    }

    #student-grid div a {
        font-size: 1.25rem;
    }

    /* 5c. Developer Portfolios */

    #developer-grid div {
        margin-top: 3.125rem;
        width: auto;
        padding: 2rem;
    }

    #developer-grid div a {
        height: 4.875rem;
        font-size: 1.25rem;
    }

    #developer-grid div p {
        font-size: 1.875rem;
    }

    /* 6. THANK YOU */

    #trophy-logo-stand {
        width: 75vw;
    }

    #social-media p {
        font-size: 1.875rem;
    }

    #sm-icons {
        gap: 2.5rem;
        margin: 3.125rem 0;
    }

    #sm-icons a img {
        height: 1.875rem;
    }

    #thankyou-fanshawe h3 {
        font-size: 2.5rem;
        margin-top: -1.25rem;
    }

    #thankyou-fanshawe span {
        font-size: 4.6875rem;
    }

    /* 7. FOOTER */

    #footer img {
        margin-top: 0;
        width: 30%;
    }

    #footer p {
        margin-top: 1.875rem;
        width: 100%;
        font-size: 0.9375rem;
    }

    #footer-menu {
        font-size: 1.5625rem;
        display: flex;
        justify-content: center;
        gap: 3.5rem;
    }

    #footer-menu a {
        margin: 1rem 0 5rem 0;
    }
}

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

    /* 1. GENERAL STYLES */

    .section-headings {
        font-size: 4.0625rem;
    }

    .section-subheadings {
        font-size: 1.5625rem;
    }

    .main-buttons {
        font-size: 1.375rem;
        padding: 0.9375rem 3.75rem;
        margin-top: 3.75rem;
    }

    .main-buttons:hover {
        background-color: black;
        transition: 0.3s ease;
    }

    #back-to-top {
        position: fixed;
        bottom: 3%;
        right: 3%;
        z-index: 10;
        display: block;
    }
    
    #back-to-top:hover #to-top-arrow line, #back-to-top:hover #to-top-rectangle rect {
        stroke: #BC2518;
    }
    
    #to-top-rectangle rect {
        transition: height 0.2s ease, transform 0.2s ease;
        transform-origin: bottom;
    }
    
    #to-top-arrow {
        transition: transform 0.3s ease;
    }
    
    svg:hover #to-top-rectangle rect {
        height: 100px;
        transform: translateY(-10px);
    }
    
    svg:hover #to-top-arrow {
        transform: translate(18px, 20px);
    }

    /* 2. HEADER */

    #banner {
        font-size: 1rem;
    }

    #hamburger-menu {
        display: none;
    }

    #mobile-menu {
        display: none;
    }

    #full-menu {
        position: absolute;
        right: 3.125rem;
        display: block;
    }
    
    #full-menu ul {
        display: flex;
        flex-direction: row;
        margin-top: 1.875rem;
    }

    .full-menu-item {
        position: relative;
        color: #1D1D1D;
        font-size: 1.25rem;
        font-weight: 700;
        list-style-type: none;
        width: 12.5rem;
        text-align: center;
    }
    
    .full-menu-item a {
        padding: 0.625rem 0.9375rem;
        display: block;
    }
    
    .full-menu-item:hover {
        background-color: white;
        transition: 150ms ease;
        box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1);
    }
    
    .submenu {
        display: none;
        position: absolute;
        background-color: white;
        width: 100%;
    }
    
    .full-menu-item:hover .submenu {
        display: flex;
        flex-direction: column;
    }
    
    .submenu a {
        padding: 0.9375rem 0;
        font-size: 1rem;
        font-weight: 700;
        opacity: 0;
        overflow: hidden;
    }
    
    .submenu a:hover {
        color: white;
        transition: 150ms ease;
    }

    .submenu a::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        height: 100%;
        width: 100%;
        background-color: #BC2519;
        transition: 150ms ease;
        z-index: -1;
    }

    .submenu a:hover::before {
        left: 0;
    }
    
    @keyframes fadeInDesktop {
        0% {
            opacity: 0;
            transform: translateY(-0.625rem);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    .full-menu-item:hover .submenu a {
        animation: fadeInDesktop 0.1875s ease-in-out forwards;
    }
    
    .full-menu-item:hover .submenu a:nth-child(1) {
        animation-delay: 0.0625s;
    }
    
    .full-menu-item:hover .submenu a:nth-child(2) {
        animation-delay: 0.125s;
    }
    
    .full-menu-item:hover .submenu a:nth-child(3) {
        animation-delay: 0.1875s;
    }

    .full-menu-item:hover .submenu a:nth-child(4) {
        animation-delay: 0.25s;
    }

    #right-banner img {
        display: block;
        margin-left: 0.9375rem;
        fill: white;
        height: 0.9375rem;
    }

    #right-banner p {
        margin-right: 4.375rem;
    }

    #right-banner {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    /* 3. SECTION 1 - Event */

    /* 3a. Hero Banner */

    #hero-text {
        line-height: 1.2;
        font-size: 1.875rem;
        margin: 0 0 8.75rem 0;
    }

    #hero-title h3 {
        font-size: 2.5rem;
    }

    #hero-title span {
        font-size: 4.6875rem;
    }

    #hero-logo {
        transform: scale(1.1);
        max-width: none;
    }

    /* 3b. Intro Video */

    #scroll-text {
        font-size: 1.25rem;
    }

    #event-video-con {
        max-width: 80%;
        margin: 3.125rem auto;
    }

    /* 3c. Event Info */

    #event-info-con {
        margin-top: 5rem;
    }

    #trophy-logo {
        padding-left: 3.5rem;
        padding-right: 0rem;
    }

    #event-info-text p {
        font-size: 1.125rem;
        line-height: 1.2;
        padding-right: 4rem;
    }

    #event-info-right {
        margin-right: 1.875rem;
    }

    #map-marker {
        height: 2.1875rem;
    }

    .event-card-con {
        top: 70%;
        flex-direction: row;
        bottom: 0;
    }

    .event-card {
        display: block !important;
        margin-top: 2.5rem;
        max-width: 17.1875rem;
        height: 27rem;
    }

    .event-text {
        display: none;
    }

    .event-time {
        display: none;
    }
    
    .event-number {
        font-size: 3.75rem;
    }

    .event-heading-con {
        margin-top: 0;
    }

    .event-heading {
        font-size: 1.25rem;
    }

    .event-card img {
        -webkit-filter: grayscale(100%);
        filter: grayscale(100%);
    }

    .event-card:hover .event-card-con {
        top: 50%;
        display: block;
    }

    .event-card:hover .event-heading-con {
        margin-top: -0.3125rem;
    }

    .event-card:hover .event-text {
        font-size: 1rem;
        margin-top: 0.625rem;
        display: block;
        width: 100%;
        margin-left: 0;
    }

    .event-card:hover .event-time {
        font-size: 1.25rem;
        display: block;
    }

    .event-card:hover {
        background-color: #1D1D1D;
        box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
        transform: scale(1.05);
    }

    .event-card:hover img {
        background-color: #1D1D1D;
        -webkit-filter: none;
        filter: none;
    }

    .event-stats {
        margin-right: 4.375rem;
        margin-bottom: 3.125rem;
    }

    .event-stats:first-of-type {
        margin-left: 4.375rem;
    }

    .stats-text {
        font-size: 1.25rem;
    }

    .stats-number {
        font-size: 5rem;
        margin-right: 1.875rem;
    }

    /* 4. SECTION 2 - Course */

    /* 4a. Project Exhibit */

    .project-card {
        max-width: 18.4375rem;
        height: 27.8125rem;
        margin: 4.6875rem 0 4.6875rem 0;
    }

    .project-placement {
        font-size: 1.4375rem;
        padding: 1.25rem;
    }

    .project-names {
        font-size: 1.125rem;
        top: 57%;
        line-height: 1.3;
    }

    .project-card img {
        -webkit-filter: grayscale(100%);
        filter: grayscale(100%);
    }
    
    .project-card:hover {
        background-color: #1D1D1D;
        box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
        transform: scale(1.01);
    }

    .project-card:hover img {
        background-color: #1D1D1D;
        -webkit-filter: none;
        filter: none;
    }

    .project-card:hover .project-placement {
        background-color: #BC2519;
        color: white;
    }

    .project-card:hover .project-names {
        background-color: #1D1D1D;
        color: white;
    }

    #scroll-images-con {
        margin: 4.6875rem 0 6.25rem 0;
    }

    #scroll-images-con img {
        -webkit-filter: grayscale(100%);
        filter: grayscale(100%);
    }

    #scroll-images-con:hover .scroll-images img {
        animation-play-state: paused;
    }

    #scroll-images-con img:hover {
        -webkit-filter: none;
        filter: none;
        box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
    }
    
    #scroll-images-con li:hover {
        transform: scale(1);
    }    
    
    .scroll-images:hover {
        animation-play-state: paused;
    }
    
    #scroll-images-con img:hover {
        -webkit-filter: none;
        filter: none;
        box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
    }

    .scroll-images:nth-of-type(2) {
        display: flex;
        animation-direction: reverse;
    }

    .scroll-images:nth-of-type(3) {
        display: flex;
    }

    #wave-background-1 {
        background-image: url(../images/Hackathon-wave-1200-top.png);
        transform: rotate(-5deg);
        background-size: 150%;
        margin-bottom: -25%;
        margin-top: -20%;
    }

    #project-text {
        width: 100%;
        margin: 0;
        padding-right: 3.125rem;
        line-height: 1.3;
    }

    #project-wrapper p {
        font-size: 1.125rem;
    }

    #project-goals {
        width: 100%;
        margin: 0;
    }

    #project-goals div {
        font-size: 1.125rem;
    }

    #project-photo {
        width: 100%;
    }

    #project-goals h4 {
        margin: 3.125rem 0 2.5rem 0;
    }

    #project-text h4 {
        margin: 3.125rem 0 2.5rem 0;
    }

    #project-heading h4 {
        font-size: 2.1875rem;
    }

    /* 4b. Testimonials */

    #wave-background-2 {
        margin-top: -22%;
        margin-bottom: -12%;
        background-size: 150%;
        background-image: url(../images/Hackathon-wave-1200-bot.png);
    }

    /* 4c. Course Info */

    #course-info-con img {
        width: 100%;
        margin-top: 3.25rem;
        border-radius: 1.5625rem;
    }

    #course-text-con {
        margin-top: 2.5rem;
        width: 95%;
        display: flex;
        flex-direction: column;
    }

    .course-text {
        font-size: 1.0625rem;
        width: 100%;
        margin-left: 3.125rem;
        margin-top: 0.625rem;
        line-height: 1.3;
    }

    #course-button {
        margin: 1.25rem auto 3.125rem 1rem;
    }

    /* 5. SECTION 3 - Student */

    /* 5a. Featured Work */

    .featured-work-card {
        height: 21.875rem;
        width: 95%;
    }

    .featured-work-image {
        -webkit-filter: grayscale(100%);
        filter: grayscale(100%);
    }

    .featured-work-heading {
        font-size: 1.875rem;
        margin-top: 0.625rem;
    }

    .featured-work-subheading {
        font-size: 1.25rem;
    }

    .featured-work-text {
        font-size: 1.25rem;
        width: 85%;
    }

    .featured-work-button {
        bottom: 1.25rem;
        right: 1.875rem;
        padding: 0.9375rem 2.5rem;
        font-size: 1.375rem;
    }

    .featured-work-button:hover {
        background-color: black;
        transition: 0.3s ease;
    }

    .featured-work-card:hover {
        box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
        transform: scale(1.01);
    }

    .featured-work-card:hover .featured-work-image {
        filter: none;
        -webkit-filter: none;
    }

    /* 5b. Student Portfolios */

    #student-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 4rem;
        margin: 0 5rem;
    }

    #student-grid div {
        margin-bottom: -2rem;
    }
    
    #student-grid div::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        height: 100%;
        width: 100%;
        background-color: #BC2519;
        transition: 150ms ease;
        z-index: 0;
    }
    
    #student-grid div:hover::before {
        left: 0;
    }
    
    #student-grid div:hover {
        transition: 150ms ease;
    }

    /* 5c. Developer Portfolios */

    #developer-heading {
        margin-top: 7rem;
    }

    #developer-grid {
        margin: 0 5rem;
    }

    #developer-grid div {
        margin-top: 3.75rem;
        width: auto;
        cursor: pointer;
        padding: 2rem;
    }

    #developer-grid div a {
        font-size: 1.5625rem;
    }

    #developer-grid div:hover {
        transition: 150ms ease;
    }
    
    #developer-grid div::before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        height: 100%;
        width: 0%;
        background-color: #BC2519;
        transition: 150ms ease;
        z-index: -1;
    }
    
    #developer-grid div:hover::before {
        width: 50%;
    }

    /* 6. THANK YOU */

    #thankyou-wrapper {
        margin-top: 9.375rem;
        margin-bottom: -9.375rem;
    }

    #trophy-logo-stand {
        transform: scale(1.1);
        margin-top: 0;
    }

    #social-media p {
        font-size: 1.875rem;
    }

    #sm-icons {
        gap: 2.5rem;
        margin: 3.125rem 0;
    }

    #sm-icons a img {
        height: 1.875rem;
    }

    #thankyou-fanshawe {
        margin-top: 5.5rem;
    }

    #thankyou-fanshawe h3 {
        font-size: 2.5rem;
        margin-top: -1.25rem;
    }

    #thankyou-fanshawe span {
        font-size: 4.6875rem;
    }

    /* 7. FOOTER */

    #footer img {
        max-width: 10%;
    }

    #footer p {
        font-size: 1.125rem;
    }

    #footer-menu {
        display: none;
    }

}