@media (min-width: 768px){
    /* /////////////////////////////////// INITIALS ////////////////////////////////// */

    #container{
        -ms-grid-columns: 1fr;
            grid-template-columns: 1fr;
        -ms-grid-rows: (auto)[4];
            grid-template-rows: repeat(4, auto);
        grid-template-areas: 
            "header"
            "navigation"
            "content"
            "footer";
    }

    .formular{
        width: 500px;
    }
    
    .formularLabel{
        margin: 15px 0;
        font-size: 0.9em;
    }
    
    .formularInput{
        width: 300px;
    }
    
    .formularArea{
        width: 300px;
    }
    
    .formularButton{
        width: 300px;
    }
    
    .formularButtonLink{
        width: 300px;
    }

    /* ////////////////////////////////////// HEADER ///////////////////////////////// */

    #header{
        z-index: 2;
        grid-area: header;
        height: 180px;
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: 1fr;
            grid-template-columns: 1fr;
        width: 100%;
    }
    
    #logoDiv{
        -webkit-box-flex: 2;
            -ms-flex: 2;
                flex: 2;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: start;
            -ms-flex-pack: start;
                justify-content: flex-start;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
    }
    
    #logo{
        height: 80px;
        width: 80px;
        margin: 10px 30px 0 10px;
    }
    
    #logoDiv div{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-align: start;
            -ms-flex-align: start;
                align-items: flex-start;
        margin: 0;
        padding: 0;
    }
    
    #logoDiv h1{
        font-size: 2.5em;
        color: var(--green);
        text-shadow: 0 2px 0 rgba(0, 0, 0, 0.1);
        margin: 0;
    }
    
    #logoDiv h2{
        font-size: 1.1em;
        color: var(--grey);
        margin: 0;
    }
    
    #searchDiv{
        margin: 0;
        padding: 0;
        -webkit-box-flex: 1;
            -ms-flex: 1;
                flex: 1;
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: 1fr 1fr;
            grid-template-columns: 1fr 1fr;
        height: 100%;
        width: 100%;
    }
    
    .headerInfos{
        display: none
    }
    
    #languages{
        margin: 0;
        -webkit-box-flex: 1;
            -ms-flex: 1;
                flex: 1;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -ms-flex-line-pack: center;
            align-content: center;
        justify-self: flex-end;
        -ms-flex-item-align: center;
            align-self: center;
        -ms-grid-column: 2;
            grid-column: 2;
        margin-right: 20px;
    }
    
    .flag{
        height: 25px;
        width: 25px;
        margin: 5px;
    }
    
    #searchBar{
        position: relative;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: start;
            -ms-flex-pack: start;
                justify-content: flex-start;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        grid-column: 0 / 1;
        -ms-grid-row: 1;
            grid-row: 1;
        padding-left: 10px;
    }
    
    #searchInput{
        margin: 5px;
        border: 2px solid var(--grey);
        padding: 10px 10px;
        box-shadow: 3px 3px rgba(0, 0, 0, 0.1);
        width: 350px;
        border-radius: 5px;
        height: 40px;
    }

    #searchInputButton{
        color: var(--grey);
        -webkit-transition: all 0.3s;
        transition: all 0.3s;
    }

    #searchInputButton:hover{
        color: var(--green);
    }
    
    .searchResult{
        position: absolute;
        width: 100%;
        top: 48px;
        left: 31px;
        background: white;
        border: 2px solid var(--grey);
        box-shadow: 3px 3px rgba(0, 0, 0, 0.1);
        border-radius: 5px;
        z-index: 2;
        width: 350px;
        list-style-type: none;
        padding: 0;
        margin: 0;
        max-height: 500px;
        overflow-y: scroll;
        display: none;
    }

    .searchResult li{
        margin: 0;
        padding: 0 5px;
    }
    
    .searchResult li:nth-child(even) {
        background-color: rgba(0, 0, 0, 0.05);
    }
    
    .searchResultLink{
        text-decoration: none;
        font-size: 0.8em;
        color: var(--grey);
    }
    
    .searchResultLink:hover{
        color: var(--green);
    }

    .userBrandName{
        margin: 0px 0px 10px 5px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -ms-flex-item-align: center;
            align-self: center;
        justify-self: start;
        -ms-grid-column: 1;
            grid-column: 1;
    }

    .userBrandName img{
        max-width: 20px;
        margin: 0 10px 0 0;
    }

    .userBrandName h3{
        margin: 0;
        font-size: 1.25em;
    }

    /* //////////////////////////////////// NAVIGATION ///////////////////////////////// */

    .navigationSmall{
        display: none;
    }

    .navigationMedium{
        display: block;
        grid-area: navigation;
        width: 100%;
        -webkit-transition: all 0.5s;
        transition: all 0.5s;
        z-index: 1;
        background: #424242;
    }

    .navBar{
        margin: 0;
        padding:0;
        list-style: none;
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex;
        height: 60px;
        -webkit-transition: all 0.5s;
        transition: all 0.5s;
    }

    .navLinks{
        -webkit-box-flex:1;
            -ms-flex:1;
                flex:1;
        text-align: center;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        position: relative;
    }

    #cartNotEmpty{
        color: var(--green);
        font-weight: 700;
    }

    .active{
        background: rgba(255, 255, 255, 0.1);
    }

    .navLinkDropdown{
        position: absolute;
        top: 60px;
        background: white;
        list-style-type: none;
        margin: 0;
        padding: 0;
        box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.3);
        width: 100%;
        display: none;
    }

    .active .navLinkDropdown{
        display: block;
    }

    .navLinkDropdown li{
        margin: 5px;
        padding: 0;
        font-size: 0.8em;
        text-align: left;
    }

    .navLinkDropdown li a{
        margin: 0;
        padding: 0;
        color: unset;
        font-weight: 300;
        text-transform: capitalize;
        text-shadow: none;
        font-size: 1.1em;
    }

    .navLinks.logo{
        max-width:0;
        overflow: hidden;
        background: white;
        -webkit-transition: all 1s;
        transition: all 1s;
        font-weight: 600;
        font-size: 30px;
        color: var(--green);
        text-shadow: 0 2px 0 rgba(0, 0, 0, 0.1);
    }

    .navBar a{
        text-decoration: none;
        padding: 20px;
        display: inline-block;
        -webkit-transition: all 0.3s;
        transition: all 0.3s;
        color: white;
        text-shadow: 0 2px 0 rgba(0, 0, 0, 0.1);
        font-weight: 600;
        font-size: 0.9em;
        text-transform: uppercase;
        width: 100%;
    }

    .navBar a:hover{
        color: var(--green);
    }

    /* ///////////////////////////////////////////////////////////// HOME PAGE //////////////////// */

    .userConnectedSection{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        -ms-flex-pack: distribute;
            justify-content: space-around;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        padding: 0;
    }

    .userConnectedSectionLeft h3{
        margin: 40px 0 10px 40px;
    }
    
    .userConnectedSectionLeft p{
        width: 80%;
        margin: 10px 0 10px 40px;
    }
    
    .userConnectedSectionLeft a{
        margin: 10px 0 0 40px;
    }
    
    .userConnectedSectionleft{
        width: 70%;
    }

    .userConnectedSectionRight{
        width: 30%;
        -webkit-box-align: end;
            -ms-flex-align: end;
                    -ms-grid-row-align: flex-end;
                align-items: flex-end;
    }

    #slider{
        height: 400px;
    }

    .slidesDiv{
        height: 400px;
    }

    .slidesImages{
        max-height: 400px;
    }

    #carousel{
        height: 400px;
    }

    .carouselItem{
        height: 400px;
    }

    .carouselProductImage{
        height: 200px;
    }

    /* ////////////////////////////////////////////////////// SHOP //////////////////////////////// */

    .pageCategoriesList{
        height: 60px;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
    }
    
    .pageCategoriesListItems{
        height: 60px;
    }

    .productBody{
        -ms-grid-columns: 3fr 4fr;
            grid-template-columns: 3fr 4fr;
    }

    .productThumb{
        max-width: 300px;
        max-height: 300px;
    }

    /* //////////////////////////////////////////////////////////// BLOG /////////////////////////// */

    .postsArticle{
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
    }

    .postsLeft{
        margin-right: 40px;
    }

    .postThumb{
        max-width: 300px;
        max-height: 300px;
    }

    /* //////////////////////////////////////////////////// PROFILE /////////////////////////////////////// */

    .profileInformationsDiv{
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-align: start;
            -ms-flex-align: start;
                    -ms-grid-row-align: flex-start;
                align-items: flex-start;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
    }

    .profileInformationsUnderDiv{
        margin-right: 20px;
    }
    
    .profileInformationsButtons{
        width: 300px;
        margin-left: 20px;
        display: block;
    }

    .profileOrdersTable{
        max-width: unset;
        width: calc(100% - 40px);
        overflow-x: unset;
        margin: 60px;
    }

    /* //////////////////////////////////////////////////// CART /////////////////////////////////////// */

    .cartTable{
        max-width: unset;
        width: 100%;
    }

    .checkoutPostTable{
        max-width: unset;
        width: 100%;
    }

    /* ///////////////////////////////////////////////////// FOOTER ////////////////////////////////////// */

    #footer{
        -ms-grid-columns: (1fr)[3];
            grid-template-columns: repeat(3, 1fr);
    }

    .footerLinks{
        -webkit-box-pack: start;
            -ms-flex-pack: start;
                justify-content: flex-start;
        -webkit-box-align: start;
            -ms-flex-align: start;
                    -ms-grid-row-align: flex-start;
                align-items: flex-start;
    }
    
    .footerInformations{
        -webkit-box-pack: start;
            -ms-flex-pack: start;
                justify-content: flex-start;
        -webkit-box-align: end;
            -ms-flex-align: end;
                    -ms-grid-row-align: flex-end;
                align-items: flex-end;
    }

    .contactMap{
        width: 400px;
        height: 300px;
    }
}