body{
    font-family: 'Crimson Text', serif;
}



/*############# Header for each page ############*/
.header{
    position:relative;
}

.headText{
    padding-top:17px;
    padding-bottom:0;
}

.nav-item.nav-link{
    text-decoration:none;
    color:black;
    padding:0 0;
    padding-left:0 !important;
    padding-right:0 !important;
}

.nav-item.nav-link:hover{
    border-bottom: solid 1px lightblue;
}

.activeLink{
    border-bottom: solid 1px red;
}

.title{
    padding-top:2em;
}
.title h2{
    font-family: 'Molle', cursive;
    font-size:3em;
    padding:1.5em 0;   
}

.title a{
    font-family: 'Molle', cursive;
    font-size:3em;
    padding:0;   
    text-decoration:none;
    color:black;
    
}

.title h3{
    font-weight:bold;
}




/*######## ABout Section #######*/
.about {
    margin:auto;
    margin-top:10%;
    text-align:center;
}

.about p{
    text-align:left;
}

.about img{
    width:100%;
    padding:2% 15% 5% 15%;
    
}


.pm img{
    width:100%;
    padding:2% 5% 5% 5%;
    margin:auto;
    text-align:center;
}

.pm img.small{
    padding-left:25%;
    padding-right:25%;
}

.smallText{
    font-size:90%;
}

.centerText{
    text-align:center;
}

.lightText{
    color:grey;
}

.extraPaddingText{
    padding-left:10%;
    padding-right:10%;
}
/*######### Footer / Contact ######*/

.footer{
    padding-bottom:5%;
}
.contact{
    height:1.5em;
    display:inline-block;
    width:100%;
}

.emailLink{
    height:100%;
    vertical-align:middle;
    font-size:1em;
    display:inline-block;
    color:white;
    background-color:black;
    text-align:right;
    width:80%;
    margin:0;
    padding:0;
    padding-right:2%;
}

.emailLink:hover{
    text-decoration:none;
    background-color:grey;
    color:black;
}

.linkedin img{
    height:100%;
    vertical-align:middle;
    margin:0;
    padding:0;
}


/*####### Artwork Switch ########*/

.artworkSwitch{
    text-align:center;
    margin-top:5%;
}
.artworkSwitch a{
    text-decoration:none;
    color:black;
    text-align:center;
}

.artworkSwitch a:hover{
    cursor:pointer;
    border-bottom:1px solid pink;
}

.artworkSwitch a.redUnderline{
    border-bottom:1px solid red;
}
.artworkSwitch a.redUnderline:hover{
    cursor:default;
}

/*####### Picture Container ########*/

.pictureContainer{
    width:100%;
    height:auto;
    text-align:center;
}

.pictureContainer img{
    width:100%;
    margin:5% 0;
    cursor:pointer;
}

.pictureContainer img:hover{
    opacity:0.8;
}

/*############## Modal #############*/
.modal{
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 998; /* Sit on top */
    padding-top: 5%; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: hidden; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

.modal.scroll{
    overflow:auto;
}

.modal-content {
    margin: auto;
    display: block;
    max-height:90%;
    width:auto;
    z-index:998;
}

.modal-content.scroll{
    max-height:none;
}
#captionID {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}

.modal-content, #caption { 
  animation-name: zoom;
  animation-duration: 0.6s;
}

.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
  z-index:999;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

@keyframes zoom {
  from {transform:scale(0)} 
  to {transform:scale(1)}
}

/*####### Mobile Navbar ########*/

.navbarMobile{
    display:none;
    position:absolute;
}

/*#####Carousel########*/
.carouselContainer{
    margin-top:0;
}

/*#########   UI/UX Container    #######*/

.uiContainer{
    margin:5% 10%;
    width:90%;
    max-width:700px;
    overflow:hidden;
    height:50vh;
    border:2px solid black;
    box-shadow:4px 4px 4px #9e9e9e;
}

.uiContainer:hover{
    opacity:0.7;
    cursor:pointer;
}

.uiContainer img{
    width:100%;
}


/*######### Media Screen Sizes #######*/
@media only screen and (max-width: 991px) {
    .navbarMain{
        display:none;
    }
    
    .navbarMobile{
        display:block;
        position:absolute;
        right:0;
        top:0;
        text-align:right;
        z-index:997;
    }

    .navbarMobile :nth-child(1){
        display:block;
    }

    .navbarMobile :not(:first-child){
        display:none;
    }

    .navbarMobile.responsive :not(:first-child){
        display:block;
    }

    .navbarMobile a{
        display:block;
        text-decoration-style:none;
        color:black;
        font-size:1em;
        padding-top:2%;
        width:100%;
        padding-right:10%;
        padding-left:10%;
    }

    .navbarMobile a.current{
        color:red;
    }

    .navbarMobile div.icon{
        position:relative;
        background-color:white;
        height:20px;
        width:60px;
        margin:auto;
        float:right;
    }

    .ham1, .ham2, .ham3 {
        position:absolute;
        height:2px;
        background-color:black;
        width:100%;
        display:none;
        left:0%;
        transition:all 0.7s ease-out;
    }

    .ham1{
        top:0;
    }

    .ham2{
        bottom:50%;
    }

    .ham3{
        bottom:0;
    }

    .navbarMobile.responsive div.icon .ham1{
        top:52%;
        opacity:0;

    }
    
    .navbarMobile.responsive div.icon .ham2{

    }

    .navbarMobile.responsive div.icon .ham3{
        bottom:50%;
        opacity:0;

    }
    
    .title{
        padding-top:0;
    }
    
    .title a{
    padding:0;
    margin:0 0 30% 0;
    }

    .title h3{
        padding:0;
        margin:0;
    }
    
    .headText{
        margin:0;
        padding:0;
        text-align:left;
    }
    
    .headText div{
        padding-left:0;
    }
    
    .header{
        margin:10% 5%;
    }
    
    .about img{
        width:100%;
        margin-bottom:15%;
        margin-top:5%;
    }
    
    .pm img{
        margin-bottom:5%;
    }

    .headText p{
        font-size:1.
    }
    
    .ham1, .ham2, .ham3 {
        display:block !important; 
    }
    
    .modal-content {
        width: 100%;
        transform:translate(0%,-50%);
        top:50%;
    }
    
    .close{
        color:white;
        background-color:black;
        right:5px;
        top:5px;
        font-size:60px;
    }
    
    #captionID{
        position:absolute;
        bottom:10%;
        text-align:bottom;
        z-index:999;
        color:white;
        width:100%;
        padding:0;
        height:auto;
        text-shadow:1px 1px 2px black, -1px -1px 2px black;
    }
    
    .modal-content, #caption { 
        animation-name: zoom;
        animation-duration: 0s;
}
    .emailLink{
        width:90%;
    }
    
    .uiContainer{
        height:25vh;
    }

}

@media only screen and (max-width: 500px){
    
     .title h2{
    margin:0 0 5% 0;
    }
    
    .headText p{
        margin:0;
    }
    
    .header{
        margin-bottom:4%;
    }

}