html,body
{
    /* font-size: 15px; */
    overflow-x: hidden;
    box-sizing: border-box;
}

body
{
    overflow-y:hidden;  
}

h2:after
{
    display: block;
    height: 2px;
    background-color: #22a5e6;
    content: " ";
    width: 100px;
    margin: 0 auto;
    margin-top: 15px;
}

h3
{
    font-size: 1.55rem;
}

#experiences h3
{
    background-color: #e5f6ff;   
} 

.experience-slide
{
    background-color: #f7f7f7;
    border-radius: 10px;
    box-shadow: 1px 1px 1px 1px rgb(202, 202, 202);
    margin: 10px auto;
    text-align: left;
}

.navbar-portfolio
{
    background-color: rgb(4, 79, 125);
    box-shadow: 0 0 6px 0px #949494;
    border-bottom: 2px solid rgb(112, 153, 182);
}

section.experiences h2
{
    margin-bottom: 30px;
}

section.project-details 
{
    display: none;
    opacity: 0;
    background-color: rgb(240, 238, 238);
    transition: opacity 0.5s,max-height 1s,background-color 1s;
    max-height: 1px;
    margin-top: 60px;
}

section.project-details.active
{
    max-height: 2000px;
    display: block;
    opacity: 1;
    background-color: rgb(243, 243, 243);
    transition: all ease 1s;

}

#aboutme
{
    color:#fff;
    background-color: rgb(64, 64, 64);
     width: 100%; 
     max-height: 2000px;
     padding: 5px;
     margin-top: 60px;
     transition: opacity 0.5s,max-height 1s;
}

#aboutme .section-container
{
    width: auto;
    height: auto; 
    margin: 0 auto;
    word-break: break-all;
    text-align: center;
    padding: 5px;
}

#experiences,
#projects
{
    max-height: 2000px;    
    transition: opacity 0.25s,max-height 0.5s;
}

#experiences .section-container
{
    background-color: #fcfcfc; 
    width: 100%; 
    height: auto;
    padding: 5px;
    text-align: center;
}



#technologies .section-container
{
    background-color: #fcfcfc; 
    width: 100%; 
    height: auto;
    padding: 5px;
    text-align: center;
    font-size: 5rem;
}


@keyframes tilt {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(5deg); }
    50% { transform: rotate(0eg); }
    75% { transform: rotate(-5deg); }
    100% { transform: rotate(0deg); }
}

#technologies .section-container i:hover,
#technologies .section-container i:active
#technologies .section-container i:focus
{
    color: #0f70a0;
}

#aboutme.hide,
#experiences.hide,
#projects.hide
{
    opacity: 0;
    max-height: 0;
    transition: opacity 0.25s,max-height 0.5s;

}

#projects .section-container
{
    background-color: rgb(240, 238, 238);
     width: 100%; 
     padding: 5px;
     text-align: center;
}

.heading-seperator:first-of-type
{
    margin:1px auto 0 auto;
    width: 300px; 
    height: 1px; 
    background-color: green;
}

.project-details 
{
    padding: 5px;

}
.project-details h2,
.project-details h3
{
    margin-top: 10px;
    text-align: center;

}

.project-details h3:after
{
    display: block;
    height: 2px;
    background-color: #22a5e6;
    content: " ";
    width: 100px;
    margin: 0 auto;
    margin-top: 15px;
}

.project-details .section-container
{
    padding: 1.5rem;
    margin: 0 auto;
    border-width: .2rem;
    max-width: 100vh;
    text-align: center;
}

.projects-tech-container
{
    background-color: rgb(243, 243, 243);
    padding: 5px;
}

.projects-features-container
{
    background-color: rgb(240, 238, 238);
    padding: 5px;
}
/****************************************
*
* PROJECT THUMBNAIL
*
*****************************************/

.project-thumbnail
{
    position: relative;
    border-radius: 5px;
    width: auto;
    height:  auto;
    max-width: 450px;
    min-width: 300px;
    

    display: block;
    background-color: rgb(233, 233, 233);
    margin: 10px auto;
    box-shadow: 1px 1px 1px 1px rgb(202, 202, 202);
    padding: 0px;

}

.project-thumbnail .thumbnail-btn
{
    padding: 0;
    margin: 0;
    border: 0;
    outline: none;
}

.project-thumbnail .top-bar
{
    background-color: rgb(116, 111, 255);
    width: 100%;
    color: #fff;
    height: auto;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;

}

.project-thumbnail .image-container
{
    padding:0 0px 0px 0px;
    transition: all ease-in 0.2s;
    position: relative;

}


.project-thumbnail button:hover  .image-container,
.project-thumbnail button:active .image-container,
.project-thumbnail button:focus  .image-container
{
    background-color: rgb(74, 74, 74);
    transition: all ease-in 0.2s;
}

.project-thumbnail button:hover .image-container img,
.project-thumbnail button:active .image-container img,
.project-thumbnail button:focus .image-container img
{
    opacity: 0.2;
    transition: all ease-in 0.2s;
}

.project-thumbnail button:hover .image-container .project-info,
.project-thumbnail button:active .image-container .project-info,
.project-thumbnail button:focus .image-container .project-info
{
    opacity:1;
    transition: all ease-in 0.2s;
}


.project-thumbnail img
{
    width: 100%;
    height: auto;
    opacity: 1;
    transition: all ease-in 0.2s;
}

.project-info
{
    color: #fff;
    opacity: 0;
    font-size: 90%;
    width: 100%;
    height: 90%;
    position:absolute;
    top: 0;
    padding:5px;
    transition: all ease-in 0.2s;
}

ul.projects-tech-list li,
.project-info ul li
{

    display: inline-block;
    border: 1px solid rgb(103, 166, 255);
    background-color: #0f70a0;
    box-shadow: 1px 1px 1px 1px rgb(175, 175, 175);
    border-radius: 5px;
    padding: 5px;
    margin: 2px;
    color: #fff;
}

ul.projects-tech-list 
{
   text-align: center;
   padding: 0;

}

ul.projects-features-list
{
    margin: 0 auto;
    max-width: 800px;
}

ul.projects-tech-list li
{
    margin: 5px;
}

ul.projects-features-list li
{
    margin-bottom: 15px;
}
footer
{
    background-color: rgb(59, 59, 59);
    height: 50px;
    color: white;
}
footer p
{
    text-align: center;
}

.my-picture
{
    background-image:url('../images/me.png');
    background-size: cover;
    width: 120px;
    height: 120px; 
    margin:0 auto;
    border-radius: 60px;
    box-shadow: 1px 1px 10px 1px grey;
}

.section-container p,
.project-details p
{
    margin: 0 auto;
      max-width: 800px;
      padding:5px;
}
/*************************
*
* Bootstrap Overrides
************************/
a.carousel-control-next,
a.carousel-control-prev

{
    background-color: transparent;
    transition: all ease-in 0.3s;
}


.project-details a.carousel-control-next:hover,
.project-details a.carousel-control-prev:hover

{
    background-color: rgb(135, 135, 135);
    transition: all ease-in 0.3s;
}


.project-details .carousel-indicators
{
    background-color: #000000a8;
    margin: 0;
}