live_style.css

/* -------------------- SPLASH PAGE + NAVBAR -------------------- */

.main {
    height: 100%;
    width: 100%;
    background: url("assets/img/splash.jpg");
    background-size: cover;
}

#helloWorldPeople {
    width: 50%;
    height: 130px;
    margin: 20 auto;
    background-color: none;
    opacity: none;
    font-family: Lato;
    font-size: 30px;
    color: white;
}
            
.nice {
    background-color: azure;
    height: 75%;
}

.header img {
    display: block;
    width: 300px;
    height: 120px;
    margin: auto;
    padding-top: 175px;
}
            
.header {
    background-color: dimgray;
    opacity: 0.8;
    width: 100%;
    height: 100%;
    z-index: 100;
}
            
.header h1 {
    text-align: center;
    font-family: Avenir;
    opacity: 1;
    color: white;
    font-weight: bold;
    font-size: 58px;
    padding-top: 200px;
    z-index: -1;
}
            
.header h1 span {
    font-size: 28px;
}

.header h1 #timer {
    color: white;
    font-size: 36px;
}
            
.header h4 {
    font-size: 25px;
    color: white;
    font-family: Lato;
    text-align: center;
    margin-top: 0;
}

/*NAV*/

#nav {
        width: 100%;
        height: 5%;
        text-align: center;
        position: fixed;
        z-index: 3;
        background-color: dimgray;
        opacity: 1;
    
    
      /*left: 0;
      right: 0;
      padding: 10px;
      top: 0;
      color: #fff;
      background-color: rgba(40,40,40,0);
      position: fixed;
      z-index: 1;
      height: 5%;
      text-align: center;*/


}

#nav a {
        display: inline-block;
        margin: 0 auto;
        padding-right: 60px;
        text-decoration: none;
        padding-left: 60px;
}

#nav a p {
        font-size: 16px;
        color: white;
        font-family: Avenir;
        text-decoration: none;
        text-decoration-line: none;
}

@media(max-width: 800px ) {
    
    #helloWorldPeople {
        font-size: 22px;
    }

}

@media(max-width: 500px ) {
    
    #helloWorldPeople {
        font-size: 17px;
    }

}

/* -------------------- INFO SECTION -------------------- */

.info {
    width: 100%;
    height: 60%;
    background-color: #D4D9DB;
}

.info h2 {
    font-weight: 300;
    text-align: center;
    //letter-spacing: 1px;
    padding-top: 25px;
    font-family: Lato;
    font-size: 40px;
}

.info h4 {
    font-size: 30px;
    font-weight: 300;
    font-family: Lato;
    text-align: center;
}

.info h5 {
    font-size: 18px;
    text-align: center;
    font-weight: 100;
}

/* -------------------- Speakers -------------------- */

#speakers{
  padding: 90px 0;
  text-align: center;
}

#speakers h2 {
    font-family: Lato;
    font-weight: 100;
    font-size: 40px;
    margin-top: -60px;
}

/*This class 'cover' gives it the gray-ish color and the opacity styling */
.cover {
    width: 100%;
    height: 100%;
    background-color: dimgray;
    border-radius: 15px;
    opacity: 0.68;

}

.speakerName {
    color: whitesmoke;
    position: relative;
    top: 200px;
    font-size: 21px;
}

.speakerInfo {
    color: whitesmoke;
    position: relative;
    top: 175px;
    font-size: 12px;
}

/*Speaker 1,2, and 3 are up. Once there are more, I'll add them in */
.speakerOne {
    background: url('../public/assets/img/conrad.jpg');
    background-size: cover;
    height: 250px;
    border-radius: 15px;
}

.speakerTwo {
    background: url('../public/assets/img/Rauch.png');
    background-size: cover;
    height: 250px;
    border-radius: 15px;
}

.speakerThree {
    background: url('../public/assets/img/vivian.jpg');
    background-size: cover;
    height: 250px;
    border-radius: 15px;
}

.speakerFour {
    background: url('../public/assets/img/liam.png');
    background-size: cover;
    height: 250px;
    border-radius: 15px;
}

.speakerFive {
    background: url('../public/assets/img/sam.png');
    background-size: cover;
    height: 250px;
    border-radius: 15px;
}

.speakerSix {
    background: url('../public/assets/img/azat.jpg');
    background-size: cover;
    height: 250px;
    border-radius: 15px;
}

.speakerEight {
    background: url('../public/assets/img/andrew.jpg');
    background-size: cover;
    height: 250px;
    border-radius: 15px;
}

.speakerNine {
    background: url('../public/assets/img/evan.png');
    background-size: cover;
    height: 250px;
    border-radius: 15px;
}

.speakerTen {
    background: url('../public/assets/img/jeremy.jpg');
    background-size: cover;
    height: 250px;
    border-radius: 15px;
}

.speakerEleven {
    background: url('../public/assets/img/elizabethdouglas.jpg');
    background-size: cover;
    height: 250px;
    border-radius: 15px;
}

.speakerTwelve {
    background: url('../public/assets/img/ashley.jpg');
    background-size: cover;
    height: 250px;
    border-radius: 15px;
}

.speakerThirteen {
    background: url('../public/assets/img/matthew.jpg');
    background-size: cover;
    height: 250px;
    border-radius: 15px;
}

.speakerFourteen {
    background: url('../public/assets/img/dave.jpg');
    background-size: cover;
    height: 250px;
    border-radius: 15px;
}

.speakerFifteen {
    background: url('../public/assets/img/maegan.jpg');
    background-size: cover;
    height: 250px;
    border-radius: 15px;
}

.speakerSixteen {
    background: url('../public/assets/img/evadora.jpg');
    background-size: cover;
    height: 250px;
    border-radius: 15px;
}

.speakerSeventeen {
    background: url('../public/assets/img/alex.jpg');
    background-size: cover;
    height: 250px;
    border-radius: 15px;
}

.speakerEighteen {
    background: url('../public/assets/img/niko.jpg');
    background-size: cover;
    height: 250px;
    border-radius: 15px;
}

.speakerNineteen {
    background: url('../public/assets/img/jack.jpg');
    background-size: cover;
    height: 250px;
    border-radius: 15px;
}

.speakerTwenty {
    background: url('../public/assets/img/josh_tyler.jpg');
    background-size: cover;
    height: 250px;
    border-radius: 15px;
}

.speakerTwentyOne {
    background: url('../public/assets/img/jiquan.jpg');
    background-size: cover;
    height: 250px;
    border-radius: 15px;
}

.speakerTwentyTwo {
    background: url('../public/assets/img/pk.png');
    background-size: cover;
    height: 250px;
    border-radius: 15px;
}

.speakerTwentyThree {
    background: url('../public/assets/img/samaltman.jpg');
    background-size: cover;
    height: 250px;
    border-radius: 15px;
}

.speakerTwentyFour {
    background: url('../public/assets/img/mike.jpg');
    background-size: cover;
    height: 250px;
    border-radius: 15px;
}

.speakerTwentyFive {
    background: url('../public/assets/img/geoffschmidt.jpg');
    background-size: cover;
    height: 250px;
    border-radius: 15px;
}

.speakerTwentySix {
    background: url('../public/assets/img/laurievoss.jpg');
    background-size: cover;
    height: 250px;
    border-radius: 15px;
}

.speakerTwentySeven {
    background: url('../public/assets/img/randyterbush.jpg');
    background-size: cover;
    height: 250px;
    border-radius: 15px;
}

.speakerTwentyEight {
    background: url('../public/assets/img/jadewang.jpeg');
    background-size: cover;
    height: 250px;
    border-radius: 15px;
}

.speakerTwentyNine {
    background: url('../public/assets/img/andrewsutherland.jpg');
    background-size: cover;
    height: 250px;
    border-radius: 15px;
}

.speakerThirty {
    background: url('../public/assets/img/erinbeitel.jpeg');
    background-size: cover;
    height: 250px;
    border-radius: 15px;
}

.speakerThirtyOne {
    background: url('../public/assets/img/annedwane.jpg');
    background-size: cover;
    height: 250px;
    border-radius: 15px;
}

.speakerThirtyTwo {
    background: url('../public/assets/img/muzzammilzaveri.jpg');
    background-size: cover;
    height: 250px;
    border-radius: 15px;
}

.speakerThirtyThree {
    background: url('../public/assets/img/emilyleproust.jpg');
    background-size: cover;
    height: 250px;
    border-radius: 15px;
}

.speakerThirtyFour {
    background: url('../public/assets/img/jurgisorups.jpg');
    background-size: cover;
    height: 250px;
    border-radius: 15px;
}

.speaker {
    width: 22%;
    height: 250px;
    display: inline-block;
    margin: auto;
    margin-left: 10px;
    margin-right: 10px;
    border-radius: 15px;
    vertical-align: top;
    margin-top: 30px;
    z-index: 1;
}


/*Media Queries for the speaker section -- makes it more responsive */

@media(max-width: 970px ) {

    .speaker {
        width: 35%;
    }
}

@media(max-width: 850px ) {

    .speaker {
        width: 40%;
    }

}

@media(max-width: 580px ) {

    .speaker {
        width: 70%;
    }
}



            
/* -------------------- Schedule -------------------- */
            
.schedule {
    width: 100%;
    background-color: #f3f3f3;
}

.schedule .map {
    text-decoration: none;
}

.schedule .map h5 {
    color: black;
    font-family: Lato;
    font-weight: 200;
    font-size: 18px;
    text-align: center;
}
.schedule h1 {
    padding-top: 25px;
    text-align: center;
    font-size: 40px;
    font-weight: 200;
    color: #8FB7EB;
    font-family: Lato;                
}
            
.schedule h4 {
    text-align: center;
    font-family: Lato;
    font-weight: 200;
}
            
.column1 {
    display: inline-block;
    width: 33%;
    height: 50px;
}
            
.column2 {
    display: inline-block;
    width: 33%;    
    height: 50px;
}

.column3 {
    display: inline-block;
    width: 33%;
    height: 50px;
}

.column3 h5 {
    padding-left: 15px;
    font-size: 18px;
    font-family: Lato;
    font-weight: 300;
    padding-top: 12px;
    padding-bottom: 10px;
}
            
.column1 h5 {
    padding-left: 15px;
    font-size: 18px;
    font-family: Lato;
    font-weight: 300;
    padding-top: 12px;
    padding-bottom: 10px;
}
            
.column2 h5 {
    text-align: left;
    padding-right: 15px;
    font-size: 18px;
    font-family: Lato;
    font-weight: 300;
    padding-top: 12px;
    padding-bottom: 10px;
}
            
.event {
    border-bottom: 1px solid black;
}
            
.awesome {
    display: block;
    width: 55%;
    margin: 0 auto;
}
            
/* -------------------- TRANSPORTATION -------------------- */
            
.shuttles {
    background-color: #DEE5EA;
    width: 100%;
    height: 80%;
}
            
.shuttles h1 {
    padding-top: 25px;
    font-family: Avenir;
    text-align: center;
    font-weight: 200;
    font-size: 35px;
    letter-spacing: 1px;
}

.shuttles h2 {
    text-align: center;
    font-weight: 700px;
    font-family: Lato;
    font-size: 22px;
    text-decoration: underline;
}
          
.shuttles h6 {
    margin-top: 25px;
    text-align: center;
    color: ;
    font-weight: 100;
    font-size: 20px;
    font-family: Avenir;
}
            
.shuttles p {
    text-align: center;
    font-size: 20px;
    font-family: Avenir;
}
            
.transportInfo {
    width: 40%;
    margin: 0 auto;
    height: 40%;
    background-color: slategrey;
}
            
/* -------------------- FAQ -------------------- */
            
.justified{
    text-align: justify;
    
}
            
#nice {
    margin: 10 auto;
    margin-right: 25px;
    display: inline-block;
    width: 30%;
    vertical-align: top;
    z-index: -2;
}
            
.row {
    text-align: center;
}
            
#faq {
    background-color: #eeeeee;
    z-index: -10;
    margin-top: -20px;
}

#faq h2 {
    font-size: 35px;
    letter-spacing: 1px;
    padding-top: 25px;
    z-index: -2;
}
            
#nice strong {
    font-size: 16px;
}

#nice p {
    font-size: 13px;
}
            
#question {
    font-size: 14px;
}

/* -------------------- SPONSORS/PARTNERS -------------------- */

#sponsors {
  background: white;
  width:   100%;
  padding: 90px 0;
    text-align: center;
}


#sponsors .sponsorName{ background: url('http://static.planetminecraft.com/files/resource_media/screenshot/1327/1328800264_minecraft-logo_5843730_lrg.jpg')}
#sponsors .chegg      { background: url('http://cdn0.hackingedu.co/img/sponsors/chegg.png');      }
#sponsors .PayPal     { background: url('http://cdn1.hackingedu.co/img/sponsors/paypal.png');     }
#sponsors .Worldquant { background: url('http://cdn2.hackingedu.co/img/sponsors/worldquant_logo.jpg'); }
#sponsors .ibm        { background: url('../public/assets/img/sponsors/ibm_bluemix.png');        }
#sponsors .auto       { background: url('http://cdn4.hackingedu.co/img/sponsors/automattic.jpg'); }
#sponsors .pebble     { background: url('http://cdn5.hackingedu.co/img/sponsors/pebble.png');     }
#sponsors .club       { background: url('http://cdn0.hackingedu.co/img/sponsors/club1.png');      }
#sponsors .leapmotion { background: url('http://cdn1.hackingedu.co/img/sponsors/leapmotion.png'); }
#sponsors .wolfram { background: url('../public/assets/img/sponsors/wolframalpha.png'); }
#sponsors .makeschool { background: url('http://cdn2.hackingedu.co/img/sponsors/makeschool.png'); }
#sponsors .twilio     { background: url('http://cdn3.hackingedu.co/img/sponsors/twilio.png');     }
#sponsors .twist      { background: url('http://cdn4.hackingedu.co/img/sponsors/twist.png')       }
#sponsors .draper     { background: url('../public/assets/img/sponsors/draper.png')      }
#sponsors .bootstrap  { background: url('http://cdn0.hackingedu.co/img/sponsors/bootstrap.png');  }
#sponsors .lyft       { background: url('http://cdn1.hackingedu.co/img/sponsors/lyft.png')        }
#sponsors .namecheap  { background: url('http://cdn2.hackingedu.co/img/sponsors/namecheap1.png'); }
#sponsors .socket     { background: url('http://cdn3.hackingedu.co/img/sponsors/socket.png');     }
#sponsors .edsurge    { background: url('http://cdn4.hackingedu.co/img/sponsors/edsurge.jpg')     }
#sponsors .kubby    { background: url('../public/assets/img/sponsors/kubby.png')     }
#sponsors .google     { background: url('http://cdn5.hackingedu.co/img/sponsors/google.png')      }
#sponsors .wikihow   { background: url('../public/assets/img/sponsors/wikihow.png')    }
#sponsors .gun        { background: url('http://cdn1.hackingedu.co/img/sponsors/gun.png');        }
#sponsors .pearlhacks { background: url('http://cdn2.hackingedu.co/img/sponsors/pearlhacks.png')  }
#sponsors .nwhacks    { background: url('http://cdn3.hackingedu.co/img/sponsors/nwhacks.jpg')     }
#sponsors .lahacks    { background: url('http://cdn4.hackingedu.co/img/sponsors/lahacks.jpeg')    }
#sponsors .redbull    { background: url('http://cdn5.hackingedu.co/img/sponsors/redbull.png')     }
#sponsors .roko       { background: url('http://cdn0.hackingedu.co/img/sponsors/roko.png')        }
#sponsors .target     { background: url('http://cdn1.hackingedu.co/img/sponsors/target.png')      }
#sponsors .linode     { background: url('http://cdn2.hackingedu.co/img/sponsors/linode.png')      }
#sponsors .galvanize  { background: url('http://cdn3.hackingedu.co/img/sponsors/galvanize.png');  }
#sponsors .edmodo     { background: url('http://cdn4.hackingedu.co/img/sponsors/edmodo.png');     }
#sponsors .codinghouse{ background: url('http://cdn4.hackingedu.co/img/sponsors/coding_house.png');       }
#sponsors .thalmiclabs{ background: url('http://cdn5.hackingedu.co/img/sponsors/thalmiclabs.png');        }
#sponsors .rubicon    { background: url('http://cdn0.hackingedu.co/img/sponsors/RubiconProject.png');     }
#sponsors .ga         { background: url('http://cdn1.hackingedu.co/img/sponsors/general_assembly.png');   }
#sponsors .dolby      { background: url('http://cdn3.hackingedu.co/img/sponsors/dolby.png');              }
#sponsors .hack4baltimore { background: url('http://cdn2.hackingedu.co/img/sponsors/hack4baltimore.png'); }
#sponsors .globalcommit   { background: url('http://cdn3.hackingedu.co/img/sponsors/globalcommit.png');   }
#sponsors .clusterpoint { background: url('../public/assets/img/sponsors/clusterpoint.png');     }
#sponsors .rocket {background: url('../public/assets/img/sponsors/rocketfuel.png'); }
#sponsors .studyblue {background: url('../public/assets/img/sponsors/studyblue.jpg'); }

#sponsors .coursehero { background: url('../public/assets/img/sponsors/coursehero.png');     }
#sponsors .moback { background: url('../public/assets/img/sponsors/moback.png');     }
#sponsors .roblox { background: url('../public/assets/img/sponsors/roblox.png');     }
#sponsors .hackerrank { background: url('../public/assets/img/sponsors/HackerRank.png');     }
#sponsors .braintree { background: url('../img/sponsors/braintree.png');     }
#sponsors .muse { background: url('../public/assets/img/sponsors/muse.png');     }
#sponsors .emotiv { background: url('../public/assets/img/sponsors/Emotiv.png');     }
#sponsors .ibmbluemix { background: url('../img/sponsors/ibm_bluemix.png');     }

#sponsors .uber { background: url('../public/assets/img/sponsors/uber.png');     }
#sponsors .particle { background: url('../public/assets/img/sponsors/particle.png');     }
#sponsors .hacksterio { background: url('../public/assets/img/sponsors/hacksterio.png');     }
#sponsors .nanovr { background: url('../public/assets/img/sponsors/nanovr.png');     }
#sponsors .kpcb { background: url('../public/assets/img/sponsors/kpcb.jpg');     }
#sponsors .dashdoc { background: url('../public/assets/img/sponsors/dashdoc.png');     }
#sponsors .edtechworldtour { background: url('../public/assets/img/sponsors/edtechworldtour.jpeg');     }
#sponsors .ostem { background: url('../public/assets/img/sponsors/ostemlogo.svg');     }
#sponsors .alienware { background: url('../public/assets/img/sponsors/alienware.png');     }

#sponsors .bde { background: url('../public/assets/img/sponsors/bde.png');     }
#sponsors .devnetwork { background: url('../public/assets/img/sponsors/dev_network.png');     }
#sponsors .femresources { background: url('../public/assets/img/sponsors/femresources.png');     }
#sponsors .greenathon { background: url('../public/assets/img/sponsors/greenathon.png');     }

#sponsors .nyntech { background: url('../public/assets/img/sponsors/nyntech.png');     }
#sponsors .aboutme { background: url('../public/assets/img/sponsors/aboutme.png');     }
#sponsors .oculus { background: url('../public/assets/img/sponsors/oculus.png');     }
#sponsors .gsvlabs { background: url('../public/assets/img/sponsors/gsvlabs.png');     }

#sponsors .audible { background: url('../public/assets/img/sponsors/audible.png');     }
#sponsors .moxtra { background: url('../public/assets/img/sponsors/moxtra.png');     }
#sponsors .capitalone { background: url('../public/assets/img/sponsors/capitalone.png');     }
#sponsors .medhacks { background: url('../public/assets/img/sponsors/medhacks.png');     }
#sponsors .citrus { background: url('../public/assets/img/sponsors/citrus.png');     }
#sponsors .teachforamerica { background: url('../public/assets/img/sponsors/teachforamerica.jpg');     }
#sponsors .oreilly { background: url('../public/assets/img/sponsors/oreilly.png');     }



#sponsors .table { background: url('../img/sponsors/table.svg'); }


.tier, .tier a {
  display: inline-block;
}

#sponsors figure, #sponsors a {
  margin:  0 20px;
  padding: 0;

  //box-sizing: border-box;
    background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat !important
}

.tier {
  width: 100%;
}

.tier a {
  margin: 20px !important;
}

.tier1 a {
  min-width: 250px;
  width:       50%;
  height:     90px;
}

.tier2 a {
  min-width: 250px; /* Split into 2 columns */
  width:       30%;
  height:     90px;
}

.tier3 a {
  margin: 10px !important; /* Split into 3 columns */
  min-width: 240px;
  width:       10%;
  height:     90px;
}

.tier4 a {
  margin: 10px 35px !important; /* Split into 4 columns */
  min-width: 160px;
  width:       10%;
  height:     90px;
}



#partners .tier4 a {
  z-index: -1;
}

/* -------------------- FOOTER -------------------- */

footer {
    width: 100%;
    height: 30%;
    background-color: #193148;
    text-align: center;
}

footer h3 {
    padding-top: 15px;
    text-align: center;
    color: whitesmoke;
    font-weight: 100;
    font-family: Avenir;
}

footer .social {
    display: inline-block;
    margin: 10 auto;
    width: 60px;
    height: 40px;
    background-color: #193148;
    vertical-align: top;
}

footer .socialHolder .social a i {
    display: block;
    margin-left: -15px;
}

footer a {
    text-decoration: none;
}

footer .socialHolder {
    //background-color: red;
    text-align: center;
    height: 60px;
}

footer a h4 {
    color: whitesmoke;
    text-align: center;
    font-family: Avenir;
    font-weight: 100;
    font-size: 18px;
}

/*Media Queries */
            
@media(max-width: 980px) {
                
    #nice {
        width: 85%;
        display: block;
        margin: 10 auto;
    }
                
    #nice strong {
        text-align: left;
    }
                
    .column1 h5 {
        font-size: 15px;
    }
                
    .column2 h5 {
        font-size: 15px;
    }
    
    .column3 h5 {
        font-size: 15px;
    }
    
    #nav {
        width: 100%;
        height: 5%;
        text-align: center;
    }

    #nav a {
        display: inline-block;
        margin: 0 auto;
        padding-left: 40px;
        padding-right: 40px;
        text-decoration: none;
    }

    #nav a p {
        font-size: 16px;
        color: white;
        font-family: Avenir;
        text-decoration: none;
        text-decoration-line: none;
    }
}

@media(max-width: 740px ) {
    #nav {
        width: 100%;
        height: 5%;
        text-align: center;
    }

    #nav a {
        display: inline-block;
        margin: 0 auto;
        padding-left: 30px;
        padding-right: 30px;
        text-decoration: none;
    }

    #nav a p {
        font-size: 16px;
        color: white;
        font-family: Avenir;
        text-decoration: none;
        text-decoration-line: none;
    }
}
            
@media(max-width: 600px) {
    .column1 h5 {
        font-size: 13px;
    }
                
    .column2 h5 {
        font-size: 13px;
    }
    
    .column3 h5 {
        font-size: 13px;
    }
    
    #nav {
        //background-color: red;
        width: 100%;
        height: 5%;
        text-align: center;
    }

    #nav a {
        display: inline-block;
        margin: 0 auto;
        padding-left: 5px;
        padding-right: 5px;
        text-decoration: none;
    }

    #nav a p {
        font-size: 16px;
        color: white;
        font-family: Avenir;
        text-decoration: none;
        text-decoration-line: none;
    }
    
    .header h1 {
        padding-top: 150px;
    }
    
    .schedule {
        //text-align: center;
    }
    
    .awesome {
        display: inline-block;
        margin: auto;
        width: 70%;
    }
}

@media (max-width: 520px) {
    .column1 h5 {
        font-size: 12px;
    }
    
    .column2 h5 {
        font-size: 12px;
    }
    
    .column3 h5 {
        font-size: 11px;
    }
    
    .awesome {
        display: inline-block;
        width:100%;
    }
    
}