@media only screen and (max-width: 900px) {

    /* Tab Animations */
    .tabContainer:not(:last-of-type) .clip:hover{
        margin-top: 50%;
    }

    .tabContainer:last-of-type .clip:hover{
        margin-top: -50%;
    }

    .tabContainer .clip h3:hover{
        color: #000000;
    }

    .dots {
        transition: all .4s;
    }

    .dot{
        animation: FadeIn 1s linear;
        animation-fill-mode: both;
    }

    @media (hover: hover) {
        .dot:hover{
            animation: FadeOut 1s linear;
            animation-fill-mode: both;
        }
    }


    /* CSS3 clipImg Animation */

    @keyframes clipImg { 
        0% {clip-path: circle(0% at 26% 55%); width: 100%;}
        25% {clip-path: circle(6% at 33% 50%); }
        100% {clip-path: circle(22% at 33% 50%); }
    }
    .imgAnimation{
        animation: clipImg 5s normal both;
        animation-delay: .25s;
    }

    .profImgParent{   
        clip-path: circle(22% at 33% 50%);
        width:100%;
        padding: 0;
        aspect-ratio:4912/1800;
        -webkit-aspect-ratio:4912/1800;
        overflow:hidden;
        transform: translateX(-12%);
        -webkit-transform: translateX(-12%);
        margin-top:20px;
    }

    /*Slide Out & In*/
    .slideLeft{
        transition: transform .6s;
    }

    /*Text Opacity Transition*/
    .tab h3 {
        transition: all .5s;
    }
    
    @media (hover: hover) {
        /*Project Title Animation*/
        .projectTitle:hover{
            transform: translateY(7%);
            cursor: pointer;
        }
    }

}

@media only screen and (min-width: 900px) {
    @media (hover: hover) {    
        /* Bounce Transition */
        .clip h3:hover {
            transform:scale(108%);
            opacity:.8;
        }
    }

    /* CSS3 FadeIn Animation */
    @keyframes FadeIn { 
    0% {opacity: 0; transform: scale(.1);}
    85% {opacity: 1; transform: scale(1.05);}
    100% {transform: scale(1);}
    }

    .dots {
        transition: all .4s;
    }

    .dot{
        animation: FadeIn 1s linear;
        animation-fill-mode: both;
    }

    @media (hover: hover) {
        .dot:hover{
            animation: FadeOut 1s linear;
            animation-fill-mode: both;
        }
    }

    .dot:nth-of-type(1) { animation-delay: .3s }
    .dot:nth-of-type(2) { animation-delay: .6s }
    .dot:nth-of-type(3) { animation-delay: 1s }

    /* CSS3 clipImg Animation */

    @keyframes clipImg { 
        0% {clip-path: circle(0% at 26% 55%); width: 0;}
        25% {clip-path: circle(6% at 33% 50%); width: 100%; }
        100% {clip-path: circle(22% at 33% 50%); }
    }
    .imgAnimation{
        animation: clipImg 5s normal both;
        animation-delay: .25s;
    }
    .profImgParent{   

        clip-path: circle(22% at 33% 50%);
        width:100%;
        padding-bottom: 35%;
        /*padding-bottom: 66.5%;*/
        aspect-ratio:4912/1800;
        overflow:hidden;
        transform: translateX(-12%);
    }

    /*Slide Out & In*/

    .slideLeft{
        transition: transform .6s;
    }

    /*Text Opacity Transition*/
    .tab h3 {
        transition: all .5s;
    }

    /*Project Title Animation*/
    .projectTitle:hover{
        transform: translateY(7%);
        cursor: pointer;
    }

    #content{
        transition: transform .6s, width .2s;
    }

    .tab:active{
        z-index: 999;
    }

}