@charset "utf-8";

/*------------------------------------------------------------------
[Responsive Stylesheet]

Project:		Portfolio Web Site
Version:		2.0
Finish Date:	10/18/21
Create By:		Damir Mehinagic  
-------------------------------------------------------------------*/


/*------------------------------------------------------------------
[Table of contents]

1. Tablet Portrait
2. Phone
3. Small Phone
-------------------------------------------------------------------*/


/* ==============================
   Tablet Portrait
   ============================== */

@media(max-width: 862px) {

    .flex-grid .about-container {
        display: block;
        text-align: center;
    }
    
    .user-image {
        padding-top: 0px;
        padding-bottom: 48px;
    }
}


/* ==============================
   Tablet Portrait
   ============================== */

@media(max-width: 654px) {

    .flex-grid .work-item {
        /*--flex: 100%;--*/
        max-width: 100%;
    }

    .c-hamburger-block {
        display: block;
    }

    .menu-links {
        background-color: rgba(23, 23, 23, 0.8);
        margin: 0 auto;
        position: relative;
        top: -264px;

        border-radius: 3px;
        border: 1px solid #252525;
        padding-bottom: 5px;

        filter: drop-shadow(7px 7px 10px rgba(23, 23, 23, .8));

        -webkit-transition: all 0.5s cubic-bezier(0.000, 0.000, 0.580, 1.000);
        -moz-transition: all 0.5s cubic-bezier(0.000, 0.000, 0.580, 1.000);
        -o-transition: all 0.5s cubic-bezier(0.000, 0.000, 0.580, 1.000);
        -ms-transition: all 0.5s cubic-bezier(0.000, 0.000, 0.580, 1.000);
        transition: all 0.5s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    }

    .menu-links.active-nav {
        position: relative;
        top: 164px;
    }

    .menu-links ul {
        width: 210px;
        margin: 0 auto;
        display: block;
        padding: 0px;
    }

    .menu-links ul li {
        width: 200px;
        margin: 0 auto;
        text-align: center;
        background-color: rgba(23, 23, 23, 1);
        border: 1px solid #252525;
        margin-top: 5px;

        -webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
        -moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
        -o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
        -ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
        transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    }

    .menu-links ul li a {
        display: block;
        margin-left: 0px;
        padding: 15px;
        border-radius: 3px;
    }

    .navbar a {
        padding: 0px;
        margin: 0px;
    }

    .banner-content {
        opacity: 1;
        
        -webkit-transition: all 0.5s cubic-bezier(0.000, 0.000, 0.580, 1.000);
        -moz-transition: all 0.5s cubic-bezier(0.000, 0.000, 0.580, 1.000);
        -o-transition: all 0.5s cubic-bezier(0.000, 0.000, 0.580, 1.000);
        -ms-transition: all 0.5s cubic-bezier(0.000, 0.000, 0.580, 1.000);
        transition: all 0.5s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    }

    .banner-content.active-nav {
        opacity: 0;
    }

    .work-banner-detail.active-nav {
        height: 410px;
    }

    .hb.active-nav {
        opacity: 0;
    }

    /*-- Reverse order of images in Work page index --*/
    .img-reverse {
        display: flex;
        flex-direction: column-reverse;
    }
}


@media(max-width: 620px) {

    .flex-grid .container-2 {
        display: block;
        text-align: center;
    }

    .app-preview-box {
        flex: 1;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        max-width: 570px;
    }

    .app-container {
        flex: 1;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        max-width: 570px;
    }

    .thumb2-align-left {
        position: relative;
        left: 0px;
    }

    .thumb2-align-right {
        position: relative;
        right: 0px;
    }

    .work-item-app {
        /*--margin: 10px;--*/
        width: 18%;
    } 
}


@media(max-width: 604px) {

    .app-preview-box {
        flex: 1;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        max-width: 570px;
    }

    .app-container {
        flex: 1;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        max-width: 570px;
    }

    .work-detail {
        display: flex;
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
    }  
}


@media(max-width: 560px) {

    .flex-grid .container {
        display: block;
        text-align: center;
    }

    .banner-content h1 {
        /*--font-size: 104px;--*/
        font-size: 184px;
    }

    .resp-gmr {
        margin: 0 0 15px 0;
    }

    .work-item-app {
        /*--margin: 10px;--*/
        width: 18%;
    }
}



/* ==============================
   Phone
   ============================== */

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

    .work-item-app {
        /*--margin: 15px;--*/
        width: 15%;
    }

    h2 {
        font-size: 32px;
    }

    .banner-content h1 {
        /*--font-size: 80px;--*/
        font-size: 144px;
    }

    .work-hero, .about-hero, .contact-hero {
        height: 304px;

        -webkit-transition: all 0.5s cubic-bezier(0.000, 0.000, 0.580, 1.000);
        -moz-transition: all 0.5s cubic-bezier(0.000, 0.000, 0.580, 1.000);
        -o-transition: all 0.5s cubic-bezier(0.000, 0.000, 0.580, 1.000);
        -ms-transition: all 0.5s cubic-bezier(0.000, 0.000, 0.580, 1.000);
        transition: all 0.5s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    }

    .work-hero.active-nav {
        height: 404px;
    }

    .about-hero.active-nav {
        height: 404px;
    }

    .contact-hero.active-nav {
        height: 404px;
    }

    .user-name {
        font-size: 36px;
    }

    .text-section {
        font-size: 18px;
    }

    .footer {
        font-size: 12px;
    }
}


@media only screen and (max-width: 375px) {
    
    .banner-content h1 {
        /*--font-size: 70px;--*/
        font-size: 128px;
    }
}


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

    .banner-content h1 {
        /*--font-size: 70px;--*/
        font-size: 120px;
    }

    .user-name {
        font-size: 32px;
    } 
}


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

    .work-item-app {
        /*--margin: 15px;--*/
        width: 12%;
    }
}



/* ==============================
   Small Phone
   ============================== */

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

    .banner-content h1 {
        /*--font-size: 58px;--*/
        font-size: 104px;
    }

    .user-name {
        font-size: 28px;
    }
}