/*The main global design concepts for every page*/
.under-construction {
    font-size: 8vw;
    color: whitesmoke;
    border: none;

}
body {
    font-family: 'Roboto Mono', monospace;
    background-image: url(Photos/bee1color.jpg);
    background-attachment: fixed;
    background-position: center;
    overflow-x: hidden;
    margin-right: 0px;
    margin-left: 0px;
}
p img {
    max-width: 500px;
    min-width: 15%;
    margin: 30px;
    border: 2px solid rgba(218, 165, 32, 0.5);
}
p::first-letter {
    text-transform: uppercase;
    font-size: 40px;
    font-weight: bolder;
}
.awards {
    width: 30vw;
}
/*--------------------------------------------*/
/*Navigation and Slide Menu*/
.nav-bar {
    background-color: goldenrod;
    overflow: hidden;
    height: 80px;
    margin: 14px;
    padding: 14px;
    border-radius: 10px;
}
nav.nav-bar {
    padding-right: 15%;
    padding-left: 15%;
}
.nav-bar a {
    float: left;
    display: block;
    color: whitesmoke;
    text-align: center;
    text-decoration: none;
    padding: 14px 16px;
    border-radius: 10px;
}
.nav-bar a:hover {
    background-color: gold;
    color: white;
    border-radius: 10px;
}
.side-nav {
    height: 100%;
    width: 0px;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 1;
    background-color: rgba(0, 0, 0, 0.75);
    text-shadow: 0px -1px whitesmoke;
    overflow-x: hidden;
    padding-top: 60px;
    transition: 0.3s;
}
.side-nav a {
    display: block;
    padding-right: 10px;
    padding-left: 30px;
    padding-top: 10px;
    padding-bottom: 10px;
    text-decoration: none;
    font-size: 24px;
    color: rgba(218, 165, 32, 0.9);
    transition: 0.3s;
}
.side-nav a:hover {
    background-color: rgba(245, 245, 245, 0.9);
    border-right: 12px solid whitesmoke;
    border-left: 12px solid whitesmoke;
}
.side-nav .btn-close {
    position: absolute;
    top: 0px;
    right: 0px;
    font-size: 40px;
}
.side-nav .btn-close:hover {
    border: none;
}
#main {
    transition: 0.5s;
    width: 100%;
    padding: 15px;
    overflow: hidden;
}
/*when the size of the screen is less than 954px the navbar text will no longer display but the box for the slide menu will still display*/
@media(max-width: 954px){
    .nav-bar-links{display:none}
}
/*-------------------------------------*/
/*Sub Nav for the local page*/
.sub-nav {
    background-color: goldenrod;
    overflow: hidden;
    width: 70%;
    min-width: 25%;
    height: 80px;
    margin: 14px;
    padding: 14px;
    border-radius: 10px;
    position: relative;
    left: 15%;
    right: 15%;
    font-size: 1vw;
}
.sub-nav a{
    float: left;
    display: block;
    color: whitesmoke;
    text-align: center;
    text-decoration: none;
    padding: 14px 16px;
    border-radius: 10px;
}
.sub-nav a:hover {
    background-color: gold;
    color: white;
    border-radius: 10px;
}
/*header design with idividual light-up*/
header {
    background-color: rgba(218, 165, 32, 0);
    margin-right: 14px;
    margin-left: 14px;
    border-radius: 10px;
    text-align: center;
    text-shadow: 0px -1px whitesmoke;
    color: goldenrod;
}
.top-name span{
    font-size: 5vw;
    font-family: 'Roboto Mono', monospace;
}
.light-up:hover {
    color: white;
}
/*
------------------------------------------------
about me section with my image*/
#photo-of-me {
    max-width: 40%;
    min-width: 15%;
    float: left;
    margin: 30px;
    border: 2px solid rgba(218, 165, 32, 0.5);
}
#section-about-me {
    width: 70%;
    display: block;
    position: relative;
    left: 15%;
    background-color: rgba(43, 13, 63, 0.5);
    margin: 15px;
    padding-top: 30px;
    padding-right: 15px;
    padding-left: 15px;
    padding-bottom: 30px;
    border: 12px solid rgba(218, 165, 32, 0.5);
    color: goldenrod;
}
#signature-drawn {
    max-width: 25%;
    min-width: 15%;
    position: relative;
    left: 15px;
    border: none;
}
#signature {
    max-width: 25%;
    min-width: 5%;
    display: block;
    position: relative;
    left: 40px;
}
/*---------------------------------------------
the top tabs for each section*/
.head-design {
    position: absolute;
    top: 25px;
    left: 65px;
    background-color: rgba(218, 165, 32, 0.5);
    margin: 5px;
    padding: 5px;
    text-align: center;
    color: whitesmoke;
    border: 2px solid goldenrod;
    border-radius: 10px;
    max-width: 40%;
    min-width: 10%;
    overflow: hidden;
    font-size: 2vw;
} 
/*-----------------------------------------------*/
.individual-sections {
    width: 70%;
    display: flow-root;
    position: relative;
    left: 15%;
    background-color: rgba(43, 13, 63, 0.5);
    margin: 15px;
    padding-top: 30px;
    padding-right: 15px;
    padding-left: 15px;
    padding-bottom: 30px;
    border: 12px solid rgba(218, 165, 32, 0.5);
    color: goldenrod;
}
/*---------------------------------------------
footer-nav section*/

.nav-bar {
    background-color: goldenrod;
    overflow: hidden;
    height: 80px;
    margin: 14px;
    padding: 14px;
    border-radius: 10px;
}
.nav-bar a {
    float: left;
    display: block;
    color: whitesmoke;
    text-align: center;
    text-decoration: none;
    padding: 14px 16px;
    border-radius: 10px;
}
.nav-bar a:hover {
    background-color: gold;
    color: white;
    border-radius: 10px;
}
.side-nav-bottom {
    height: 0%;
    width: 100px;
    position: fixed;
    bottom: 0px;
    z-index: 1;
    background-color: rgba(0, 0, 0, 0.75);
    text-shadow: 0px -1px whitesmoke;
    overflow-y: hidden;
    overflow-x: hidden;
    padding-top: 25px;
    transition: 0.3s;
}
.side-nav-bottom a {
    display: block;
    padding-right: 10px;
    padding-left: 30px;
    padding-top: 10px;
    padding-bottom: 10px;
    text-decoration: none;
    font-size: 24px;
    color: rgba(218, 165, 32, 0.9);
    transition: 0.3s;
}
.side-nav-bottom a:hover {
    background-color: rgba(245, 245, 245, 0.9);
    border-right: 12px solid whitesmoke;
    border-left: 12px solid whitesmoke;
}
.side-nav-bottom .btn-close-bottom {
    position: absolute;
    top: 0px;
    right: 0px;
    font-size: 40px;
}
.side-nav-bottom .btn-close-bottom:hover {
    border: none;
}
#slide-menu-sub-section a {
    font-size: 12px;
}
#main {
    transition: 0.5s;
    height: 100%;
    padding: 15px;
    overflow: hidden;
}

@media(max-width: 954px){
    .nav-bar-links{display:none}
} 
#instagram {
    width: 40px;
}
#twitter {
    width: 30px;
}
@media(max-width: 902px){
    .sub-nav {display:none}
}
.LI-profile-badge {
    position: fixed;
    top: 284px;
    right: 15px;
    min-width: 50px;
}
@media(max-width: 1852px){
    .LI-profile-badge {display: none}
}
/* for all forms on the site */
form {
    background-color: rgba(0, 0, 0, 0.75);
    color: goldenrod;
    width: 40vw;
    margin: 30px;
    padding: 30px;
    text-align: right;
}
legend {
    text-align: left;
}
#contactInfoForm {
   padding-right: 150px;
}
/* ------------------------------- */
@media screen and (min-width: 414px) {
    .tab-nav {
        display: none;
    }
}
/* _________________________________________ */
/* photo gallary on portfolio html */
#photoGallary div {
    width: 29.5vw;
    height: 29.5vw;
    margin: 2.47%;
    border: 1px solid goldenrod;
    box-shadow: 1px 1px black;
    float: left;
    display: inline-block;
    text-align: center;
}
#photoGallary div:nth-of-type(1) {
    background: url(https://scontent-sjc3-1.xx.fbcdn.net/v/t1.0-9/46917933_292804681341403_8147137383771406336_n.jpg?_nc_cat=102&_nc_eui2=AeEtTXjgNZC-l_zJy394AGyWn0yyA8uEetFYzYhuYOOc5U8LK79UHsFMFznCnjZE1mT_BI6mNuwhTDnivt52q6c5cNXv4gilERYsiK9VSUxAdg&_nc_ht=scontent-sjc3-1.xx&oh=f6f040b94b6acae78d51b8bcf826fdd0&oe=5CA21115);
    background-attachment: local;
    background-position: center;
    background-size: 29.5vw;
    margin-top: 8%;
}
#photoGallary div:nth-of-type(2) {
    background: url(https://scontent-sjc3-1.xx.fbcdn.net/v/t1.0-9/47087318_292804648008073_428035663330279424_n.jpg?_nc_cat=110&_nc_eui2=AeGeJ7j3YRBkU5frWSKK3lPcYJp24ModRg6zH3in8dFymkatB43-hX3WcP0Wkp1BV4_tLsMCTuOnzQRnXhTj_9V0Tcfo3i-GfCsUmopYnRUjDA&_nc_ht=scontent-sjc3-1.xx&oh=7e1c72a9877489897315d0e8bec41cc9&oe=5C6494CD);
    background-attachment: local;
    background-position: center;
    background-size: 29.5vw;
    margin-top: 8%;
}
#photoGallary div:nth-of-type(3) {
    background: url(https://scontent-sjc3-1.xx.fbcdn.net/v/t1.0-9/47136679_292804734674731_5207161471418499072_n.jpg?_nc_cat=106&_nc_eui2=AeGMOWWO0Yck-XiGH5MN210rvwlUwy7UozP9D8BNRgnAbJNtI2pS4RuhMHYDM_OWaQNtHf8EWN0SDRH_6pCJqxyHDmiuIZ_Ly7_PvAjb8Gqgag&_nc_ht=scontent-sjc3-1.xx&oh=9793f1245718fcdd2f60085307a5a816&oe=5CAE9330);
    background-attachment: local;
    background-position: center;
    background-size: 29.5vw;
}
#photoGallary div:nth-of-type(4) {
    background: url(https://scontent-sjc3-1.xx.fbcdn.net/v/t1.0-9/47102132_292804768008061_1145186118182895616_n.jpg?_nc_cat=104&_nc_eui2=AeGQk1elTOTN--zScCMTRqNmHj6gqqkvcbM6vEnq13yE_vQl57BHULDXPAw8SXDTCJBTAyEabJ89uF7xzVFGSJbwpspvKj9om3JKW2O_bpnUxg&_nc_ht=scontent-sjc3-1.xx&oh=c543f94f956efa706e86702561b9b4ec&oe=5CAC124D);
    background-attachment: local;
    background-position: center;
    background-size: 29.5vw;
}
#photoGallary div:nth-of-type(5) {
    background: url(https://scontent-sjc3-1.xx.fbcdn.net/v/t1.0-9/47084973_292804808008057_6107615551301877760_n.jpg?_nc_cat=106&_nc_eui2=AeEhjwBGbLto589LQo4k-VP9HPCCZw8yHXYkv9R5NKLHEy-gxwOVGTPyfxjX_UkWj_bfXIXVPpGKzuZu1E5JSFy7DO9JrwBKLQ80QaZ0wBpthQ&_nc_ht=scontent-sjc3-1.xx&oh=4009d3111f271e31e5a876916b08dfbe&oe=5C635EB5);
    background-attachment: local;
    background-position: center;
    background-size: 29.5vw;
}
#photoGallary div:nth-of-type(6) {
    background: url(https://scontent-sjc3-1.xx.fbcdn.net/v/t1.0-9/47213038_292804814674723_2792061400501977088_n.jpg?_nc_cat=100&_nc_eui2=AeE5uWML7B0E4rRUKXo5WwcrFwB3L0EAm427jMqva-0PEADD9Hts0RXfxqHkWlcQF_Pf-P1v-4L7S1YFAWBazA8rjf3QIUGezmVDiVVI3KMYlA&_nc_ht=scontent-sjc3-1.xx&oh=a0d5566ad65d6ae7dd89a42b6a53e7ab&oe=5CADDC7D);
    background-attachment: local;
    background-position: center;
    background-size: 29.5vw;
}
#photoGallary div:nth-of-type(7) {
    background: url(https://scontent-sjc3-1.xx.fbcdn.net/v/t1.0-9/47123346_292804848008053_5534671715788914688_n.jpg?_nc_cat=105&_nc_eui2=AeFS-p3pDp96qi18MgS149uAqCf00NZpUCFadEsIW15Do7ai4yU7CEXQoT-9yLU4BXkFVuEr5Cf9LkVs6M-_xvCAMWEOLwTooikwV35eIM98fA&_nc_ht=scontent-sjc3-1.xx&oh=bd39ccc90c7c061d1737b2c69f61214f&oe=5CAC19AB);
    background-attachment: local;
    background-position: center;
    background-size: 29.5vw;
}
#photoGallary div:nth-of-type(8) {
    background: url(https://scontent-sjc3-1.xx.fbcdn.net/v/t1.0-9/46517387_292804964674708_5871778583545905152_n.jpg?_nc_cat=105&_nc_eui2=AeFTsN47OaC_BLPHylZbyrruTv-qa4YQuPNRg3MYL_rhcVpnJGTpHPXPmp-ncRuFQw0Zk2YH5mcYGhGLEeMdIa0KU10udiUYFgOXbodGz9mp5w&_nc_ht=scontent-sjc3-1.xx&oh=8706bff4ffc59d7f147b4ec80800bc3e&oe=5C69C14B);
    background-attachment: local;
    background-position: center;
    background-size: 29.5vw;
}
#photoGallary div:nth-of-type(9) {
    background: url(https://scontent-sjc3-1.xx.fbcdn.net/v/t1.0-9/47092033_292804904674714_2842908212649263104_n.jpg?_nc_cat=109&_nc_eui2=AeEYAA6y3gbN2dFsOIvbI1U78BbxaB4JQ-ZCtm4Ro3yq9xQ_DOq7IBU_bj_FARSIL3_lByarsU6uobNSjstVvkCnaEopyRE3JbnJeXZtATsxdQ&_nc_ht=scontent-sjc3-1.xx&oh=84fa73794bf30aae9868ebf1d5ccc494&oe=5CA3BC61);
    background-attachment: local;
    background-position: center;
    background-size: 29.5vw;
}
#photoGallary div:nth-of-type(10) {
    background: url(https://scontent-sjc3-1.xx.fbcdn.net/v/t1.0-9/47132082_292804941341377_4808600497898389504_n.jpg?_nc_cat=103&_nc_eui2=AeEhCZxyQP8FAsO9_KGBPIPoO25lOQx7_4yOgWyni8E_N5Vhd6fW3Et954IX8M5-FIj97sGxlbAVUxkSqc93JI8ifhjqv1YhPNj8Rgqeo1CAPw&_nc_ht=scontent-sjc3-1.xx&oh=14c5246418f2fb9f25a7597ff1ec7cf8&oe=5C6E26A5);
    background-attachment: local;
    background-position: center;
    background-size: 29.5vw;
}