@media screen and (min-width: 690px) {
    /**
     * -------------  [NOTE: Primitive Section ] -------------
     *
     * The following section, is contains, all primitive elements
     * that are being restyled for this specific project
     *
     */
    body {
        font: 120% Roboto, Calibri, Arial, Sans-serif
    }

    /* [x] Title */
    .title {
        font: 120% Montserrat;
    }

    .dmsn {
        width: 95%
    }

    /**
     * ---------------  [NOTE: Banner Section ] --------------
     *
     * The following section, is the banner section,
     * which might be considered as the head section of the 
     * website
     *
     */
    #banner{

    }    
        /* [+1] Menu section */
        #banner > #menu-section {
            padding: 0;
            font: 70% Montserrat;
            font-weight: 700;
            background: #fff;
            border-bottom: 1px solid #ebe4e4;
        }
            /* First-generation */
            #menu-section > .dmsn > div {
                position: relative;
            }

            /* White Block */
            #menu-section .white-piece{
                position: absolute;
                top: 0;
                left: 0;
                width: 5%;
                padding: 47.6px 0;
                background: #fff;
            }

            /* Paragraph */ 
            #contbox > p{
                font: 110% Roboto;
                font-weight: 300;
            }

            /* [+1] Logo  */
            #menu-section > .dmsn > .logo {
                width: 19%;
                padding: 1.6% 0;
                background: #fff;
            }
                #menu-section > .dmsn > .logo img {
                    max-width: 100%;
                    display: block;
                }

            /* [+2] Menu */
            #menu-section > .dmsn > .ui-menu {
                display: block;
            }
                /* Each tab */
                #menu-section > .dmsn > .ui-menu li {
                    font-size: 85%;
                    padding: 5% 3.5%;
                }
                    #menu-section .ui-menu a {
                        color: #737789;
                    }

            /* Mobile Label */
            #menu-section > .dmsn > .mobile-label {
                display: none;
            }

            /* [+3] Login Button */
            #menu-section > .dmsn > .login-button{
                padding: 1.6% 0;
            }
                #menu-section > .dmsn > .login-button > div{
                    float: left;
                    padding: 5px;
                }
                    #menu-section > .dmsn > .login-button button{
                        width: 150px;
                        color: #fff;
                        font: 100% Poppins;
                        font-weight: 500;
                        padding: 10% 0;
                        color: #000;
                        background: #fff;
                        border: 2px solid #ef940b;
                    }

        /* Slides */
        #banner .inner-slide{
            padding: 5% 0;
            height: 430px;
        }   
            /* Content Box */ 
            #contbox{
                width: 450px;
                padding: 40px;
            } 
                /* Left */ 
                #contbox .left{

                }
                    /* Headline */ 
                    #contbox > .headline{
                        font-size: 180%;
                    }

                    /* Button */ 
                    #contbox button{
                        max-width: 170px;
                    }

                /* Paperwork Cell */
                #banner .inner-slide .content > .paperwork-cell{
                    display: block;
                    max-width: 390px;
                    margin-left: 120px;
                }
                    #banner .inner-slide .content > .paperwork-cell img{
                        max-width: 100%;
                    }

    /**
     * -------------  [NOTE: Sepcific Pages] ---------------
     *
     * From now on, the following styling is for specific pages
     */
    
    /* [+1] Homepage */
    #home-page {
        
    }
        /* [+] Who We are Section */
        #home-page #home-splash{
            padding-top: 5%;
            padding-bottom: 7%;
        }
            #home-splash p{
                color: #fff!important;
            }

        /* Support Section*/
        #home-page .support{

        }
        
    /* Prizing Box */
    #pricing-grid {
        margin-top: 3%;
    }
        #pricing-grid .box {
            width: 33.3%!important;
            font: 80% Rubik;
            font-size: 1rem;
            font-weight: 400;
            line-height: 1.6;
        }

    /* Pricing Box */
    .ui-pricing-box {
        font: 100% Roboto;
    }

    .ui-splash .ui-ctru-box {
        padding: 1.5% 4%
    }
    .montitle {
        max-width: 450px
    }
    .title {
        font-size: 150%
    }
    .ui-splash .text {
        margin: 1% auto;
        width: 50%
    }
    .slanted.inner-page-splash {
        padding: 2% 0 18%
    }
    #default-splash .ui-ctru-box {
        padding: 20px
    }

    .ui-focalsoft-logo > .right {
        display: block;
        font-size: 140%
    }

    #default-splash .ui-ctru-box {
        max-width: 200px
    }

    #home-splash .main-image {
        padding: 2.5% 0
    }

    .focal-product-page .pricing-div p {
        font-size: 110%;
    }
    
    #home-splash .text {
        margin: 2% auto;
        max-width: 480px;
        font-weight: 300;
        width: 90%;
        font-size: 110%
    }
    #home-splash img {
        max-width: 35%
    }

    #work-grid > .box {
        width: 31.3%!important;
        padding: 1%
    }
    #social-media-section p {
        margin: 10px auto 40px;
        width: 350px
    }

    .focal-product-page .introduction {
        padding: 3% 0 1%
    }

    .focal-product-page .color-div p {
        max-width: 700px;
    }

    #color-grid .box {
        width: 50%!important
    }

    #focal-splash {
        padding: 5% 0 17%
    }
    #focal-splash .ui-ctru-box {
        max-width: 170px
    }
    #focal-splash .description {
        margin: 2% auto;
        max-width: 450px
    }

    .focal-product-page .introduction p {
        margin: 3% auto 2%;
        font-size: 110%;
        max-width: 560px
    }

    #branding-page .introduction .box {
        width: 50%!important
    }

    .pricing-box {
        font: 100% Roboto
    }
    .pricing-box .ui-custom-list {
        height: 330px
    }
    .pricing-box button {
        margin-top: 0
    }

    .ui-focalsoft-small-logo {
        display: block
    }

    /**
     * -------------  [NOTE: Global Pages] ---------------
     *
     * The following section has all our global styles that
     * can be used to the style the page. Note, global styles
     * are not specific thus called "Global"
     */
    /* Title */
    .title { padding: 25px 0; }

    /* Dimension */ 
    .dmsn { width: 90%; }
}

@media screen and (min-width: 601px),
media screen and (max-width: 800px) {
    #menu-section > .dmsn > .ui-menu {

    }
        #menu-section > .dmsn > .ui-menu li {
            padding: 5% 2.7%
        }
}

@media screen and (min-width: 801px) {
    .texty {
        margin: 1% auto;
        width: 50%
    }
}

@media screen and (min-width: 921px) {
    #menu-section > .dmsn > .ui-menu {

    }

    #menu-section > .dmsn > .ui-menu li {
        font-size: 100%;
        padding: 5% 4%
    }
}

@media screen and (min-width: 1000px) {
    /* Dropdown Pointer */
    #menu-section .ui-menu li > .dropdown-pointer {
        position: absolute;
        top: 49%;
        right: 0;
        width: 13px;
    }
        #menu-section .ui-menu ul {
            position: absolute;
            left: 0;
            top: 90px;
            width: 50%!important;
            background: #fff;
            text-align: left!important;
            padding: 20px;
        }

        #menu-section .ui-menu .dropdown{
            position: absolute;
            left: -300px!important;
            top: 85px;
            width: 1311px!important;
            background: #fff;
            text-align: left!important;
        }
            #menu-section .ui-menu ul > li {
                float: left;
                width: 50%;
                padding: 10px 0!important;
            }
                /* Link */
                #menu-section .ui-menu ul a {
                    color: #353333!important
                }
                    #menu-section .ui-menu .label a:hover {
                        color: #ef6a41!important
                    }

                    #menu-section .ui-menu ul > li > a > div {
                        float: left
                    }

                    #menu-section .ui-menu .label > a:hover {
                        color: #2352b3!important
                    }
    #detail-solution {
        position: relative!important;
        width: auto!important;
        top: 0!important;
        padding: 0!important;
        height: 155px
    }
    #detail-solution > li {
        float: none!important;
        width: 100%!important;
        padding: 10px 0!important;
        text-align: left;
        border: 0!important;
        font: 90% Roboto!important
    }
}

@media screen and (min-width: 801px),
media screen and (max-width: 1280px) {
    #home-splash .text {
        width: 70%;
        font-size: 110%
    }
}

@media screen and (min-width: 1024px) {
    #menu-section > .dmsn > .ui-menu {

    }

    #menu-section > .dmsn > .ui-menu li {
        padding: 5% 5.42%
    }

    #menu-section .planner {
        float: right;
        padding: 1.7% 0;
        display: block;
        padding-left: 15px
    }

    #menu-section .planner .ui-ctru-box {
        max-width: 150px;
        padding: 15px 20px;
        color: #fff;
        font: 85% Franklin Gothic Heavy;
        border: 3px solid #fff!important
    }
    #menu-section .social-media {
        float: right;
        width: 20%;
        padding: 2.2% 0;
        padding-left: 15px
    }
        #menu-section .social-media a {
            float: left
        }
            #menu-section .social-media .icon {
                width: 41px;
                height: 37px;
            }

            #menu-section .social-media a:not(:last-child) {
                padding-right: 8px;
            }

            #menu-section .social-media .icon.facebook {
                background: url(../images/ui/facebook.png);
            }

            #menu-section .social-media .icon.linkedin {
                background: url(../images/ui/linkedin.png);
            }

            #menu-section .social-media .icon.gplus {
                background: url(../images/ui/google+.png);
            }
}

@media screen and (min-width: 1200px) {
    #menu-section > .dmsn > .ui-menu li {
        padding: 35px 4%;
        min-width: 11.1%;
        font: 125% Poppins;
    }

    #menu-section > .dmsn > .ui-menu li.active-tab a{
        color: #39a629;
    }
}

@media screen and (min-width: 1280px) {
    #menu-section .ui-menu {

    }

    #menu-section .ui-menu li {
        padding: 5.29% 4%
    }
    #menu-section .social-media {
        width: 15%
    }
}

@media screen and (min-width: 1380px) {
    #menu-section > .dmsn > .ui-menu li {
        padding: 4.6% 3%;
    }
}