/* Index page */
body {
    background-color: #ffffff;
    margin: 0;
    color: #ffffff;
}

/* Image on left and text on right */
.imageText {
    display: flex;
    align-items: center;
    gap: 20px;
    /* margin-left: 250px;
    padding-top: 100px; */
    margin-left: 10vw;
    padding-top: 5vh;
}

/* text styling */
.imageText .text {
    display: flex;
    flex-direction: column;
    margin-left: 250px;
}

/* img styling */
.imageText img {
    position: relative;
    z-index: 2;
}


/* More padding bottom */
.padding {
    padding-bottom: 100px;
}

/* Image on right and text on left */
.imageTextRight {
    display: flex;
    align-items: flex-end;
    gap: 20px;
    margin-left: 400px;
    padding-top: 100px;
}

.imageTextRight .text {
    display: flex;
    flex-direction: column;
    margin-left: 10px;
}

/* Logo left Navigation on right */
.logoNav {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 20px;
    margin-left: 50px;
}

.logoNav .text {
    display: flex;
    flex-wrap: wrap;
    padding-left: 220px;
}

/* Navigation bar */
.navBar {
    /* margin-left: 180px; */
    padding: 0px 5px 15px 5px;
    background-color: #E5E6E7;
    font-size: 60px !important;
    border-radius: 50px;
}

/* Add the long decorative background lines only to the index.html page */
/* Only hit top level divs */
.indexPage > div:not(.greyBackground):not(.logoNav):not(.blackText) {
    position: relative;
    z-index: 0;
}


/* To make the background image more transparent */
.indexPage > div:not(.greyBackground):not(.logoNav):not(.blackText)::before { 
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image:
    url('../images/longDecorativeLines.svg');
    background-size: cover;
    opacity: 0.4;
    z-index: -1;

}

/* Text colours */

h1 {
    color: #ffffff;
    font-family: "Teachers-Regular";
}

h2 {
    font-family: "Teachers-Regular";
    font-size: 20pt;
}

/* Index page black text heading */
.blackText {
    color: black;
    position: absolute;
    top: 730px;
    left: 100px;
    width: 1700px;
    font-size: 18pt;
}

.blueText {
    color: #1F858C;
}

.whiteText {
    color: #ffffff;
    font-size: 12pt;
}

.whiteTextHeadings {
    color: #ffffff;
    font-size: 12pt;
    text-align: left;
    margin-top: 40%;
}

/* Heading text on index page */
.orangeText h1 {
    color: #FDA000;
    position: absolute;
    top: 210px;
    left: 100px;
    /* width: 330px; */
    width: 390px;
    font-size: 28pt;
}

.orangeText {
    color: #FDA000;
    width: 300px;
}

.orangeTextWebinar h1 {
    color: #FDA000;
}

.orangeTextWebinar {
    color: #FDA000;
}

/* Text width */
p {
    font-family: "Teachers-Regular";
    width: 490px;
    font-size: 16pt;
}

ul {
    font-family: "Teachers-Regular";
    width: 440px;
    font-size: 14pt;
}

.smallerText p {
    font-size: 12pt;
    width: 500px;
}





/* Background colours */

.greyBackground {
    background-color: #8E9BB2;
    width: 100%;
}

#whiteBackground {
    background-color: #ffffff;
}

.whiteBackgroundSmall {
    margin: 0;
    background-color: #ffffff;
}

.aboutUs {
    background-color: #FDA000;
    height: 860px;
}

.meetTheTeams {
    width: 100%;
    background-color: #8A1A1D;
    height: 850px;
}

.conferences {
    background-color: #1F858C;
    height: 850px;
}

.webinars {
    background-color: #CC5F36;
    height: 850px;
}

.webinarsLong {
    background-color: #CC5F36;
}

.partners {
    background-color: #023342;
}

/* Home page backgrounds */


.indexAboutUs {
    background-color: #FDA000;
}

.indexMeetTheTeams {
    background-color: #8A1A1D;
}

.indexConferences {
    background-color: #1F858C;
}

.indexWebinars {
    background-color: #CC5F36;
}

.indexPartners {
    background-color: #023342;
}



/* Buttons */
button {
    border-radius: 20px;
    padding: 10px;
    width: 140px;
    /* font-weight: bold; */
    font-family: 'Teachers-Regular';
    font-size: 14pt;
    border: none;
    cursor: pointer;
}

.navbutton {
    border-radius: 20px;
    width: fit-content;
    padding: 10px 50px 0px 50px;
    border: none;
    margin-left: 0px;
    font-size: 20px;
    background-color: #E5E6E7;
}

.blueExteriorButton {
    background-color: #1F858C;
    border: none;
}

.darkBlueButton {
    color: #023342;
}

.orangeButton {
    color: #CC5F36;
}

.blueButton {
    color: #1F858C;
}

.redButton {
    color: #8A1A1D;
}

.yellowButton {
    color: #FDA000;
}


.universityButtons {
    display: flex;
    justify-content: center;
    padding: 15px 15px 15px 15px;
    background-color: #E5E6E7;
    font-size: 60px !important;
    border-radius: 50px;
    margin: 10px;
}

.universitiesBtn {
    border-radius: 20px;
    width: 200px;
    font-size: 20px;
    height: 100px;
    background-color: #E5E6E7;
}

.hidden {
    display: none;
}

#meetTheTeamsLeft {
    font-size: 18pt;
    font-weight: bold;
    width: 100px;
}

#meetTheTeamsRight {
    font-size: 18pt;
    font-weight: bold;
    width: 100px;
}



/* Fonts */
@font-face {
    font-family: 'Teachers-Regular';
    src: url('../fonts/Teachers-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.partners table {
    margin: 0 auto;
}

/* Text position for text in the table on strategic partners page */
.partners td p {
    margin-left: 0px;
    max-width: 350px;
}

.partners td h1 {
    margin-left: 0px;
    max-width: 350px;
}

/* Hide the boarder of the table on the partners page. */
.partners td {
    padding: 50px;
    border: none;
    vertical-align: top;
    margin: 0 auto;
}

/* conferences table */
.whiteBackground table {
    margin: 0 auto;
}

/* Hide the boarder of the table on the partners page. */
.whiteBackground td {
    padding: 50px;
    border: none;
    vertical-align: top;
    margin: 0 auto;
}

/* Round out image of team member */
.meetTheTeams td img {
    border-radius: 15px;
    width: 400px;
}

/* Hide the border of the table on the Meet the team page */
.meetTheTeams td {
    padding: 50px;
    border: none;
}

.meetTheTeamsLayout > div:first-child { /* Left button container */
    order: -1; 
}

.meetTheTeamsLayout > div:last-child { /* Right button container */
    order: 3; 
}

.team {
    flex: 0 0 auto;
    padding: 50px;
}

.centered {
    text-align: center;
    padding: 40px;
}

.yellowText {
    color: #FDA000;
}

.yellowTextHeadings {
    color: #eb9604;
    font-size: 12pt;
    text-align: left;
    margin-top: 40%;
}

/* webinars table styling */

.webinarsLong td {
    margin: 0 auto;
    padding: 50px;
    border: none;
    vertical-align: top;
}

.webinarsLong table {
    margin: 0 auto;
}

/* Webinars heading styling */

.webinarsHeading {
    padding-left: 110px;
}

/* Meet the teams page layout */
.meetTheTeamsLayout {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center; 
    padding: 70px;
}

.meetTheTeamsLayout > div {
    margin: 10px;
    text-align: left;
    font-size: 10px;
}

/* Index page main image styling */
img[src="images/telescopeMan.svg"] {
    margin-bottom: 0;
    vertical-align: bottom;
}

.aboutUsSecond {
    position: relative;
    background-color: #FDA000;
}

.meetTheTeamsSecond {
    background-color: #8A1A1D;
}

/* */
.cropImage {
    width: 500px;
    height: 300px;
    object-fit: cover;
    display: block;
}

/* Makes all team boxes align */

.indexSection {
    display: flex;
    /* height: 600px; */
    height: 60vh;
    justify-content: center;
}

/*  Grid for the person image and text */

.grid-container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr 2fr 1fr;
    height: 755px;
}

.grid-container > div {
    color:#000;
    font-size: 30px;
    text-align: center;
}

.grid-container .item2 {
    align-self: end;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
}

.grid-container .item4 {
    justify-content: center;
}

.grid-container .item2 img {
    position: relative;
    z-index: 1;
}

.grid-container .item4Swap img {
    position: relative;
    z-index: 1;
}

.grid-container .item4Swap {
    align-self: end;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

/* Backgrounds for each page */

.yellowBackground {
    background-color: #FDA000;
    height: 80%;
}

.yellowBackground2 {
    background-color: #FDA000;
    height: 80%;
}

#redBackground {
    background-color: #8A1A1D;
    height: 80%;
}

#blueBackground {
    background-color: #1F858C;
    height: 80%;
}

#orangeBackground {
    background-color: #CC5F36;
    height: 80%;
}

#darkBlueBackground {
    background-color: #023342;
    height: 80%;
}

/* Positioning the decorative lines */

.yellowBackground > img:last-child {
    position: absolute;
    bottom: -30px;
}

.yellowBackground2 > img:last-child {
    position: absolute;
    bottom: -1750px;
}

.aboutUs > img:last-child {
    position: absolute;
    bottom: -1750px;
}

#whiteBackground > img:last-child {
    position: absolute;
    bottom: -870px;
}


#redBackground > img:last-child {
    position: absolute;
    bottom: -30px;
}

#blueBackground > img:last-child {
    position: absolute;
    bottom: -30px;
}

#orangeBackground > img:last-child {
    position: absolute;
    bottom: -30px;
}

#darkBlueBackground > img:last-child {
    position: absolute;
    bottom: -30px;
}

/* Adding text on the left and image on the right */
.imageText2 {
    display: flex;
    align-items: flex-end;
    
}

.imageText2 .text {
    align-self: center;
    display: flex;
    flex-direction: column;
    margin-left: 250px;
}

.imageText2 .img {
    display: flex;
    flex-direction: column;
    margin-left: 250px;
    align-self: flex-end;
}

/* Adding image on the left and text on the right */
.imageText3 {
    display: flex;
    align-items: flex-end;
}

.imageText3 .text {
    align-self: center;
    display: flex;
    flex-direction: column;
    margin-right: 150px;
}

.imageText3 .img {
    display: flex;
    flex-direction: column;
    margin-right: 250px;
    align-self: flex-end;
}

/* Goes behind the conferences */
#placeholder-background {
    background-color: #252525;
    width: 400px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Invisible link on the Waikato University team */
.invisibleLink {
    text-decoration: none;
    color: inherit;
}

/* Styling for meet the teams page */
.team {
    align-self: flex-start;
    padding: 50px;
}

/* For tablets 992px on less */
@media screen and (max-width: 992px){

    .universityButtons {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        padding: 0px;
    }

    .logoNav {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 20px;
        /* margin-left: 50px; */
    }
    
    .logoNav .text {
        display: flex;
        flex-wrap: wrap;
        padding-left: 0px;
    }
    
    /* Navigation bar */
    .navBar {
        padding: 10px 10px 10px 10px;
        background-color: #E5E6E7;
        font-size: 60px !important;
        border-radius: 50px;
        margin-left: 0px;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        /* width: 600px; */

    } 

    .navbutton {
        width: 200px;
        padding: 10px 50px 0px 50px;
        border: none;
        font-size: 20px;
        background-color: #E5E6E7;
        margin: 5px;
    }

    .orangeText h1 {
        color: #FDA000;
        position: absolute;
        top: 14vh;
        left: 10vw;
        width: 330px;
        font-size: 20px;
    }

    .partners table {
        display: block;
    }

    .partners tr {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .partners td {
        width: 100%;
        max-width: 400px;
        padding: 2px;
    }

    .conferences table {
        display: block;
    }

    .conferences-row {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .conferences-data {
        width: 100%;
        max-width: 400px;
        padding: 2px;
    }

    /* .imageText2 {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .indexSection {
        height: 90vh;
        justify-content: center;
    }

    .imageText3 {
        display: flex;
        flex-direction: column;
        align-items: center;
    } */

    .webinarsTable {
        display: block;
    }

    .webinarsRow {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .webinarsTableData {
        width: 100%;
        max-width: 400px;
        padding: 2px;
    }

    /* Images on the index page */
    .redGirlIndex, 
    .groupOfPeopleIndex,
    .orangeGirlIndex,
    .blueManIndex,
    .orangeManIndex {
        width: 300px;
    }


    /* Images on the other pages */
    .lightOrangeGirl,
    .noBackgroundGirl,
    .blueMan,
    .orangeMan,
    .redGirl,
    .groupOfPeople {
        width: 300px;
    }

    .pText {
        width: 300px;
    }

    
    .imageText {
        flex-direction: column;
        margin-left: 0px;
        align-items: left;
    }

    .imageText .text {
        margin-left: 0px;
        text-align: left;
        padding-left: 10px;
    }

    .web {
        width: 200px;
    }

    .grid-container {
        height: 700px;
    }

    .blackText {
        top: 360px;
        left: 20px;
        font-size: 12pt;
        width: 400px;
    }


}

/* For phones 600px or less */
@media screen and (max-width: 600px){

.navbutton {
    border-radius: 20px;
    width: fit-content;
    padding: 10px 50px 0px 50px;
    border: none;
    margin-left: 0px;
    font-size: 20px;
    background-color: #E5E6E7;
    font-size: 10pt;
}

.aut {
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 55px !important;
    padding-right: 55px !important;
}

.yellowBackground2 {
    height: 475px;

}

    
#whiteBackground {
    background-color: #ffffff;
    height: 475px;
}

.indexPartners {
    background-color: #023342;
    height: 395px;
}

    
.indexAboutUs {
    background-color: #FDA000;
    height: 395px;
}

.indexMeetTheTeams {
    background-color: #8A1A1D;
    height: 395px;
}

.indexConferences {
    background-color: #1F858C;
    height: 395px;
}

.indexWebinars {
    background-color: #CC5F36;
    height: 395px;
}

    /* .imageText3 {
        display: flex;
        align-items: flex-end;
    }
    
    .imageText3 .text {
        order: -1;
        align-self: center;
        display: flex;
        flex-direction: column;
        margin-right: 150px;
    }
    
    .imageText3 .img {
        display: flex;
        flex-direction: column;
        margin-right: 250px;
        align-self: flex-end;
    }*/

    .imageText2 {
        display: flex;
        align-items: flex-end;
        /* flex-direction: column; */
    }
    
    .imageText2 .text {
        /* order: -1; */
        align-self: center;
        display: flex;
        flex-direction: column;
        margin-left: 20px;
    }
    
    .imageText2 .img {
        display: flex;
        flex-direction: column;
        margin-left: 20px;
        align-self: flex-end;
    }

    .imageText3 {
        display: flex;
        align-items: flex-end;
    }
    
    .imageText3 .text {
        align-self: center;
        display: flex;
        flex-direction: column;
        margin-right: 0px;
    }
    
    .imageText3 .img {
        display: flex;
        flex-direction: column;
        margin-right: 0px;
        align-self: flex-end;
    }

    .smallerText p {
        font-size: 12pt;
        width: 400px;
    }
    
    
    .meetTheTeamsLayout {
        padding: 0px;
        flex-direction: column;
    }

    .cropImage {
        width: 350px;
        height: 200px;
        object-fit: cover;
        display: block;
    }

    .team {
        margin: 10px;
        padding: 0px;
    }

    .imageText {
        flex-direction: column;
        margin-left: 0px;
        align-items: left;
    }

    .imageText .text {
        margin-left: 0px;
        text-align: left;
        padding-left: 10px;
    }

    #redBackground {
        height: 500px;
    }

    .pTextPartners {
        width: 400px;
        font-size: 10pt;
    }

    .yellowBackground2 {
        background-color: #FDA000;
        /* height: 410px; */
    }

    .pText {
        width: 200px;
    }

    #yellowDecLines {
        top: 670px;
    }

    #yellowDecLines2 {
        top: 1010px !important;
    }

    .navBar {
        margin: 10px;
    }

    .orangeText h1 {
        font-size: 8pt;
        width: 150px;
        top: 80px;
        left: 20px;
    }

    .blackText {
        top: 180px;
        left: 20px;
        font-size: 6pt;
        width: 250px;
    }

    .conference {
        width: 300px !important;
    }

    .conferenceTxt {
        width: 300px;
    }

    .universityButtons {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        padding: 0px;
    }

    .webinarPlaceholderImg {
        width: 350px;
    }

    .pText {
        font-size: 10pt;
        max-width: 300px;
    }

    .grid-container {
        height: 355px;
    }

    /* Images on the index page */
    .redGirlIndex, 
    .groupOfPeopleIndex,
    .orangeGirlIndex,
    .blueManIndex,
    .orangeManIndex {
        width: 150px;
    }


    /* Images on the other pages */
    .lightOrangeGirl,
    .noBackgroundGirl,
    .blueMan,
    .orangeMan,
    .redGirl,
    .groupOfPeople {
        width: 150px;
    }

    .NZUCELogo {
        width: 150px;
    }


    .logoNav {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 20px;
        margin-left: 0px;
    }
    
    .logoNav .text {
        display: flex;
        flex-wrap: wrap;
    }
    
    /* Navigation bar */
    .navBar {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        padding: 15px 5px 15px 5px;
        background-color: #E5E6E7;
    }

    .navbutton {
        margin: 5px;
        padding: 2px;
    }

    .partners table {
        display: block;
    }

    .partners tr {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .partners td {
        width: 100%;
        max-width: 400px;
        padding: 2px;
    }

    .webinar {
        width: 290px !important;
    }

    .webinarTxt {
        font-size: 10pt;
        width: 300px;
    }



    /* .hamburgerMenu {
        visibility: visible;
    } */
}

#telescopeMan {
    width: 100%;
}

/* 
.hamburgerMenu {
    visibility: hidden;
} */

#responsiveTxt {
    position: relative;
    width: 100%;
}

.logos {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.aut {
    height: 60px;
    width: auto;
}

.logo {
    padding-left: 10px;
    padding-right: 10px;
}

.conference {
    width: 400px;
}

.webinar {
    width: 350px;
}