@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');

* {
    padding:0;
    margin:0;
}

/*grid*/
.grid {
    font-family: 'Roboto', sans-serif;
    font-style: medium;
    display: grid;
    grid-template-columns:1fr 100px 175px 1fr;
    grid-template-areas: 
        "banner banner banner banner"
        "nav-bar nav-bar nav-bar nav-bar"
        "slider slider slider slider"
        "tutoring tutoring tutoring tutoring"
        "content content content content"
        "next-steps next-steps next-steps next-steps"
        "footer footer footer footer"
}

.banner {
    background-image: url("./img/Singapore-Nightline.jpg");
    background-size:auto;
    background-repeat:no-repeat; 
    min-height: 5em;
    grid-area: banner;
    height:100%;
    width:100%;
    grid-column-start: 1;
    grid-column-end: 5;
}

.banner h1{
    color:white;
    text-shadow: 1px 1px black;
    font-style:bold;
    font-size:30px;
    font-weight:400;
    padding:5px;
    margin-left:2em;
}

/*Navigation*/
.nav-bar{
    grid-area:nav-bar;
    grid-column-start: 1;
    grid-column-end: 5;
    background:firebrick;
}

nav {
    display:inline-block;
    margin-left:13.5%;
    overflow: hidden;
    min-height:28px;
    list-style:none;
}

.nav li{
    list-style-type:none;
    float:left;
    padding-top:6px;
}

.nav li a{
    display:block;
    transition: .75s;
    text-align:center;
    text-decoration: none;
    color: white;
    font-size:16px;
    padding:4px 20px 4px 20px;
}

.nav li a:hover{
    transition:.75s;
    background:whitesmoke;
    color:firebrick;
    list-style: none;
    text-align: center;
}

/*Slider*/
.slider{
    grid-area:slider;
    grid-column-start: 1;
    grid-column-end: 5;
    overflow: hidden;
    width:100%;
    position:relative;
    height:450px;
    margin:0 auto;
    background:#4c4c4c;
    border-top:solid 3px white;
    border-bottom:solid 18px white;
}

.slideImg{
    width:100%;
    height:100%;
    position:absolute;
}

.slideImg img{
    width:100%;
    height:100%;
    position:absolute;
}

.slideImg p{
    color:snow;
    background: rgba(0,0,0,0.65);
    max-width:44%;
    padding:10px;
    font-weight:560;
    font-size:1.125rem;
    font-style:italic;
    border-top: 4px solid firebrick;
    border-bottom: 4px solid firebrick;
    transform:translate(0%, 460%);
}

#r1, #r2, #r3, #r4{
    display:none;
}

.selectors{
    width:100%;
    height:5px;
    bottom:5%;
    position:absolute;
    text-align:center;
    z-index:99;
}

.dots{
    top:-5px;
    left:4.5px;
    width:9px;
    height:9px;
    position:relative;
    border-radius:50%;
    border:solid 0.5px white;
    display:inline-block;
    background: rgba(0,0,0,0.65);
}

#r1:checked ~ #One,
#r2:checked ~ #Two,
#r3:checked ~ #Three,
#r4:checked ~ #Four{
    z-index:9;
}

#r1:checked ~ .selectors #dot1,
#r2:checked ~ .selectors #dot2,
#r3:checked ~ .selectors #dot3,
#r4:checked ~ .selectors #dot4{
    background:#fff;
}

/*Tutoring*/
.tutoring{
    grid-area:tutoring;
    grid-column-start: 1;
    grid-column-end: 5;
    background:rgba(192,192,192,0.25);
    margin-bottom:10px;
}

.tutoring-container{
    background:rgba(0,0,0,0.85);
    border-top:4px solid firebrick;
    border-bottom:4px solid firebrick;
    color:white;
    display:flex;
    flex-direction:row wrap;
    justify-content:center;
    align-content:center;
    margin:1%;
}

.tutoring-text h3{
    margin-top:10px;
    padding-left:2px;
}

.tutoring-text p{
    padding:2px;
    margin-bottom:0.75rem;
}

.tutoring-img img{
    height:150px;
    width:225px;
    padding:10px;
}

/*Content*/
.content{
    grid-area:content;
    grid-column-start: 1;
    grid-column-end: 5;
}

.content img{
    width:100%;
    height:100%;
}

/* Featured Content */
.Featured{
    display:flex;
    flex-flow:row;
    justify-content:space-around;
}

.featured-item{
    text-align:center;
    padding:10px 0px;
}

.featured-item img{
    height:200px;
    width:275px;
    opacity:0.95;
    border-bottom:6px solid firebrick;
}

.featured-item:hover{
    text-decoration:underline;
}

.featured-item img:hover{
    filter:brightness(60%);
    transition:1s;
}

/* Next Steps */
.next-steps{
    grid-area:next-steps;
    grid-column-start: 1;
    grid-column-end: 5;
    background:rgba(192,192,192,0.25);
    margin-top:20px;
}

.next-steps h3{
    text-align:center;
    font-style:bold;
    margin:0.1% 40%;
    font-weight:600;
    padding:4px;
    border-bottom:3px solid firebrick;
}

.step-action-container{
    display:flex;
    flex-direction:row wrap;
    justify-content:space-evenly;
    align-content:center;
}

/* Button_1 */
.button_1{
    font-size:1.25rem;
    background:firebrick;
    border:2px firebrick solid;
    width:200px;
    height:2rem;
    margin:10px;
    color:snow;
}

.button_1:hover{
    background:snow;
    color:firebrick;
    transition:.4s;
}

/*Footer*/
.footer{
    grid-area:footer;
    grid-column-start: 1;
    grid-column-end: 5;
    font-family: 'Roboto', sans-serif;
    font-style: medium;
}

.footerTop{
    display:flex;
    flex-flow: row;
    min-height:120px;
    background:firebrick;
    color:white;
    /*background:rgba(25,45,95,1.0);
    color:rgba(234,193,0,1.0); */
    font-size:16px;
}

.footerSection a{
    color:white;
}

.resources{
    align-self:flex-start;
    flex-grow:1;
    text-align:left;
}

.resources h3{
    font-size:18px;
}

.resources ul{
    float:right;
    list-style:none;
    margin-right:7.5%;
}

.resources ul li{
    padding:5px 0px;
}

.resources ul li a{
    text-decoration:none;
}

.resources ul li a:hover{
    text-decoration:underline;
}

.footerBottom{
    background:linear-gradient(to bottom, #020552 0%, #141a2a 100%);
    color:white;
    text-align:center;
    font-size:16px;
    padding:1px;
}

.footerLogoSection{
    margin-left:10px;
}

.footerLogoSection h5{
    position:relative;
    transform:translate(28.5%,-120%);
}

.footerLogoSection ul li{
    display:inline-block;
}

.footerLogoSection i{
    text-decoration:none;
    list-style:none;
    color:rgba(255,255,255,0.75);
    padding:0 4px 0 4px;
    margin-bottom:0.5em;
}

.footerLogoSection i:hover{
    color:rgba(255,255,255,3.95);
}

/*Alumni Page*/
.alumGrid{
    font-family: 'Roboto', sans-serif;
    font-style: medium;
    display: grid;
    grid-template-columns:1fr 500px 500px 1fr;
    grid-template-areas: 
        "banner banner banner banner"
        "nav-bar nav-bar nav-bar nav-bar"
        "AluEvents AluEvents AluEvents AluEvents"
        "AluConnect AluConnect AluConnect AluConnect"
        "alumWrapper alumWrapper alumWrapper alumWrapper"
        "footer footer footer footer"
}

.alumWrapper{
    grid-area:alumWrapper;
    grid-column-start: 1;
    grid-column-end: 5;
}

/*Officers Page*/
.officerGrid{
    font-family: 'Roboto', sans-serif;
    font-style: medium;
    display: grid;
    grid-template-columns:1fr 500px 500px 1fr;
    grid-template-areas: 
        "banner banner banner banner"
        "nav-bar nav-bar nav-bar nav-bar"
        "oIntro oIntro oIntro oIntro"
        "pWrapper pWrapper pWrapper pWrapper"
        "empty empty empty empty"
        "footer footer footer footer"
} 

.pWrapper{
    grid-area:pWrapper;
    grid-column-start: 1;
    grid-column-end: 5;
}

.pWrapper h6{
    font-size:4px;
}

.oIntro h2{
    color:white;
    text-shadow:1px 1px black;
    text-align:center;
    padding:1em 0 0 0;
}

.oIntro h3{
    color:white;
    font-size:26px;
    text-shadow:1px 1px black;
    text-align:center;
    margin-top:4px;
    padding:0 0 0.1em 0;
}

.oIntro hr{
    margin:0.25% 10% 0.5% 10%;
    display:block;
    overflow:hidden;
}

.oIntro {
    background-image: url("./img/Singapore-Nightline.jpg");
    background-size:auto;
    background-repeat:no-repeat; 
    min-height: 7em;
    grid-area:oIntro;
    height:100%;
    width:100%;
    grid-column-start: 1;
    grid-column-end: 5;
}

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

.profile{
    margin: 5px;
    color:white;
    background:firebrick;
    border-radius:10px;
    display:grid;
    grid-template-columns:8rem 1.15rem 5rem 6rem;
    grid-template-areas:
        "imgContain . description description"
        "imgContain . description description"
        ". . description description"
        ". . . socialM"
}

.imgContain{
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 3;  
    padding-left:7px;
    padding-top:6px;
}

.imgContain img{
    border-radius:50%;
    width:90%;
}

.description{
    grid-area:description;
    grid-column-start: 3;
    grid-column-end: 5;  
    padding-top:6px;
}

.socialM{
    grid-area:socialM;
    grid-column-start:4;
    grid-column-end:5;
    text-align:right;
    padding-right:2px;
}

.empty{
    min-height:70px;
}

/* Gallery */
.galleryGrid{
    font-family: 'Roboto', sans-serif;
    font-style: medium;
    display: grid;
    grid-template-columns:1fr 500px 500px 1fr;
    grid-template-areas: 
        "banner banner banner banner"
        "nav-bar nav-bar nav-bar nav-bar"
        "gWrapper gWrapper gWrapper gWrapper"
        "footer footer footer footer"
}

.gWrapper{
    grid-area:gWrapper;
    grid-column-start: 1;
    grid-column-end: 5;    
}

/* Join Us */
.joinGrid{
    font-family: 'Roboto', sans-serif;
    font-style: medium;
    display: grid;
    grid-template-columns:1fr 500px 500px 1fr;
    grid-template-areas: 
        "banner banner banner banner"
        "nav-bar nav-bar nav-bar nav-bar"
        "jWrapper jWrapper jWrapper jWrapper"
        "footer footer footer footer"
}

.jWrapper{
    grid-area:jWrapper;
    grid-column-start: 1;
    grid-column-end: 5;
    display: flex;
    justify-content: flex-start;
    width:100%;
}

.jWrapper h6{
    font-size:2.5px;
}

.joinInfo{
    font-style:normal;
    padding:12px;
    list-style-position:inside;
    min-width:450px;
    font-weight:10;
    background: linear-gradient(to bottom right, #272727 0%, #b22222 100%);
    color:white;
    margin:5px;
}

.joinImg{
    padding: 4px 10px 2px 6.5%;
}

.joinImg img{
    height:400px;
    width:550px;
}

.joinCounter{
    display:flex;
    flex-flow:row;
    justify-content: center;
}

.countBox{
    text-align:center;
    padding:15px;
}

/* Join Button */
.join_button{
    float:right;
    height:31px;
    background:firebrick;
    border:2px firebrick solid;
    padding-left:20px;
    padding-right:20px;
    color:white;
    box-shadow: 0.2px 0.2px 2px black;
}

.joinus{
    margin: 1px 15px 10px 0px;
}

.join_button:hover{
    background:white;
    color:firebrick;
    transition:.4s;
}

.eventGrid{
    font-family: 'Roboto', sans-serif;
    font-style: medium;
    display: grid;
    grid-template-columns:1fr 500px 500px 1fr;
    grid-template-areas: 
        "banner banner banner banner"
        "nav-bar nav-bar nav-bar nav-bar"
        "calendarWrap calendarWrap calendarWrap calendarWrap"
        "ppResults ppResults ppResults ppResults"
        "footer footer footer footer"
}

.calendarWrap{
    grid-area:calendarWrap;
    grid-column-start: 1;
    grid-column-end: 5;
    display:flex;
    flex-direction:row wrap;
    justify-content:space-around;
}

.event-section h3{
    margin-top:3px;
    padding:2px;
    border-bottom:3px solid firebrick;
}

.calendar{
    padding:5px;
}

.featSec{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-content:center;
}

.featSec img{
    height:150px;
    width:225px;
    border-bottom:8px solid firebrick;
}

.featSec h4{
    transform:translate(0%, 100%);
    padding:2px;
    border-top:3px solid firebrick;
}

.featSec a{
    font-size:0.9rem;
    font-weight:600;
}

.featItem .date{
    background:firebrick;
    color:white;
    padding:1px;
    border-style: solid;
    border-color: white;
    border-width: 2px 2px 2px 0px;
    transform:translate(0%, 100%);
    width:30%;
}

.ppResults{
    grid-area:ppResults;
    grid-column-start: 1;
    grid-column-end: 5;
    display:flex;
    flex-direction:row wrap;
    justify-content:space-evenly;
    align-content:center;
    padding:10px;
    background:ghostwhite;
}

.ppResult{
    transform:translate(0%, -5%);
}

.ppResult .ppTime{
    background:firebrick;
    color:white;
    padding:1px;
    border-style: solid;
    border-color: white;
    border-width: 2px 2px 2px 0px;
    transform:translate(0%, 100%);
    width:45%;
}

.ppResult .ppDesc{
    background:firebrick;
    color:white;
    text-align:center;
}

.ppResult .ppImg img{
    height:150px;
    width:200px;
}

.ppResult .ppDesc .ppIcon i{
    color:white;
    opacity:0.30;
    position:absolute;
    right:0;
    bottom:0;
    font-size:3rem;
}

/* About */
.aboutGrid{
    font-family: 'Roboto', sans-serif;
    font-style: medium;
    display: grid;
    grid-template-columns:1fr 500px 500px 1fr;
    grid-template-areas: 
        "banner banner banner banner"
        "nav-bar nav-bar nav-bar nav-bar"
        "about about about about"
        "footer footer footer footer"
}

.about{
    grid-area:about;
    grid-column-start: 1;
    grid-column-end: 5;
    display:flex;
    flex-flow:column;
}

.about-section{
    display:flex;
    flex-flow:row;
    justify-content:center;
    margin:0.5% 2%;
    border:2px solid firebrick;
    border-radius:10px;
    background:white;
    color:black;
}

.nchs-img img{
    height:200px;
    width:300px;
    margin:5px;
    border:2px solid firebrick;
}

.nchs-img img:hover{
    filter:hue-rotate(360deg);
    transition: 5s;
}

.nchs-info h3{
    border-bottom:3px solid firebrick;
    width:33%;
}

.nchs-info{
    padding:1vh;
}

.nchs-info p{
    font-weight:600;
    padding:0.25vh;
}

.about-title h3{
    margin-left:2.25%;
    margin-top:1px;
    font-size:1.5rem;
    padding:0.25vh;
    border-bottom:3px solid firebrick;
    width:60%;
}

.nchs-stamp img{
    filter:grayscale(0.55);
    height:36px;
    width:42px;
    border-radius:50%;
    border:2px solid firebrick;
    position:absolute;
    transform:translate(562.5%, -135%);
}

/* Contact */
.contactGrid{
    font-family: 'Roboto', sans-serif;
    font-style: medium;
    display: grid;
    grid-template-columns:1fr 500px 500px 1fr;
    grid-template-areas: 
        "banner banner banner banner"
        "nav-bar nav-bar nav-bar nav-bar"
        "particle-background particle-background particle-background particle-background"
        "contactWrap contactWrap contactWrap contactWrap"
        "footer footer footer footer"
}

.particle-background{
    grid-area:particle-background;
    grid-column-start: 1;
    grid-column-end: 5; 
    background-color:#141a2a;
}

.contactWrap{
    grid-area:contactWrap;
    grid-column-start: 1;
    grid-column-end: 5;  
    display:flex;
    align-content:center;
    justify-content:center;
    background-color:#141a2a;
    height:0;
}

.contact-form{
    transform:translate(0%, -140%);
    min-width:500px;
    background-color:white;
    margin:2rem;
    border:2px solid;
    padding:2rem;
    font-weight:300;
}

#submitCF{
    cursor:pointer;
    padding:0.125rem 1rem;
    color:white;
    background-color:firebrick;
    border: 2px solid firebrick;
}

#submitCF:hover{
    color:firebrick;
    background-color:white;
    transition: all 0.3s ease;
}

.contact-form input, textarea{
    float:center;
    width:100%;
    padding-top:10px;
    border:none;
    font-size:2.35vh;
    border-bottom:1px solid black;
    outline:none;
}

.contact-form input:focus{
    transition: 0.3s ease;
    padding-bottom:2px;
    border-bottom: 2.5px solid firebrick;
}

.contact-form textarea:focus{
    transition: 0.3s ease;
    padding-bottom:1px;
    border-bottom: 2.5px solid firebrick;
}

.form-section{
    padding:10px;
}

/* Membership */
.membershipGrid{
    font-family: 'Roboto', sans-serif;
    font-style: medium;
    display: grid;
    grid-template-columns:1fr 500px 500px 1fr;
    grid-template-areas: 
        "banner banner banner banner"
        "nav-bar nav-bar nav-bar nav-bar"
        "mWrapper mWrapper mWrapper mWrapper"
        "footer footer footer footer"
}

.mWrapper{
    grid-area:mWrapper;
    grid-column-start: 1;
    grid-column-end: 5;  
    min-height:420px;
}

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

.membership-title{
    width:50%;
    padding:2.5px;
    margin-left:12%;
    margin-top:2.5px;
} 

.membership-title h3{
    padding:2px;
    border-bottom:3px solid firebrick;
} 

.membership-item{
    padding:10px;
}

/* Sponsorhip */
.sponsorGrid{
    font-family: 'Roboto', sans-serif;
    font-style: medium;
    display: grid;
    grid-template-columns:1fr 500px 500px 1fr;
    grid-template-areas: 
        "banner banner banner banner"
        "nav-bar nav-bar nav-bar nav-bar"
        "sponsWrapper sponsWrapper sponsWrapper sponsWrapper"
        "footer footer footer footer"
}

.sponsWrapper{
    grid-area:sponsWrapper;
    grid-column-start: 1;
    grid-column-end: 5;
    background-image:url(https://images.pexels.com/photos/2734512/pexels-photo-2734512.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height:36rem;
    opacity:0.9;
}

/*Mobile*/
@media screen and (min-width=720px){

}