/* Import fonts from Google */
@import url('https://fonts.googleapis.com/css?family=Rubik:300,400,500,700|Roboto:300,400,500,700|Poppins:400,500,700');

/**
 * -------------  [NOTE: Primitive Section ] -------------
 *
 * The following section, is contains, all primitive elements
 * that are being restyled for this specific project
 *
 */
body {
    font: 100% Roboto, Calibri, Arial, Sans-serif;
    position: relative;
    background: transparent;
}   
    /* Buttons */
    button {
        font: 100% Dosis;
        font-weight: 700;
        padding: 3%;
        background: #e98721;
        border-radius: 5px;
    }

    button:focus,
    button:hover {
        background: #063088;
        transition: background linear .4s
    }

    /* Green Button */
    button.green{
        background: #1e971c;
    }

    /* Spalsh */
    .splash{
        padding: 5% 0;
    }
        .splash .title{
            font: 150% Poppins;
            font-weight: 700;
            color: #fff;
        }

    .green{
        color: #39a629;
    }

/**
 * --------------------  [NOTE] -----------------------
 *
 * The following section, is the banner section,
 * which might be considered as the head section of the 
 * website
 *
 */
#banner{
    position: relative;
}
    /* [+1] Menu section */
    #banner > #menu-section {
        padding: 15px 20px 15px 0;
        background: #12ac3a;
    }

    /* Fixed Menu */
    #banner > #menu-section.fixed {
        position: fixed;
        width: 100%;
        top: 0;
        z-index: 10000;
        -webkit-box-shadow: 0px 9px 22px -12px rgba(0,0,0,0.24);
        -moz-box-shadow: 0px 9px 22px -12px rgba(0,0,0,0.24);
        -ms-box-shadow: 0px 9px 22px -12px rgba(0,0,0,0.24);
        box-shadow: 0px 9px 22px -12px rgba(0,0,0,0.24);
    }
        /* First-generation */
        #menu-section > .dmsn > div {
            float: left;
        }

        /* First-generation */
        #menu-section > .dmsn .ui-icon {   
            float: right;
        }

        /* Logo */
        #menu-section > .dmsn > .logo {

        }
            #menu-section > .dmsn > .logo img {
                max-width: 70%;
                display: none;
            }

        /* Login Button */
        #menu-section > .dmsn > .login-button {
            float: right;
        }

        /* Menu */
        #menu-section > .dmsn > .ui-menu {
            width: 67%;
            /*width: 35%;*/
            color: #fff;
            display: none;
        }
            /* Each Tab */
            #menu-section > .dmsn > .ui-menu li {
                padding: 3% 7.7%;
                border-bottom: 5px solid transparent;
            }

            .ui-dropdown-icon {
                width: 10px;
                height: 6px;
                background: url(../genode/images/ui/d-w-pointer.png);
            }

            #menu-section > .dmsn > .ui-menu li.active-tab a{
                /*color: #12ac3a!important;*/
            }

        #menu-section > .dmsn > .mobile-label {
            /*width: 65%;*/
            color: #fff;
            font: 100% Montserrat;
            font-weight: 700;
            margin: 12px auto;
        }

        #banner > #menu-section .ui-mobile-menu-button {
            display: block;
            top: 21px;
            right: 105px;
        }
            #banner > #menu-section .ui-mobile-menu-button > div {
                height: 3px;
                background: #fff;
            }

        #banner > #menu-section .ui-mobile-menu-button:hover,
        #banner > #menu-section .ui-mobile-menu-button.active {
            background: #fff
        }

        #banner > #menu-section .ui-mobile-menu-button.active > div,
        #banner > #menu-section .ui-mobile-menu-button:hover > div,
        #banner > #menu-section .ui-mobile-menu-button:hover > div {
            background: #2d5ab8
        }

    /* Slides */
    #banner .inner-slide{
        padding: 5% 3%;
    }   
        /* First-generation */ 
        #banner .inner-slide .content > div{
            float: left;
        }   

        /* Content Box */ 
        #contbox{
            color: #000;
            padding: 7%;
            background: #fff;
        } 

        #contbox.center{
            margin: 0 auto;
        }

        #contbox.left{
            text-align: left;
        }
            /* Left Side */ 
            #contbox .right{
                display: none;
            }
                /* Headline */ 
                #contbox > .headline{
                    font: 160% Montserrat;
                    font-weight: 700;
                }

                #contbox.center > .headline{
                    font-size: 120%;
                }

                /* Paragraph */ 
                #contbox > p{
                    font: 135% Roboto;
                    font-weight: 300;
                }
                    #contbox a{
                        font-weight: 500;
                        color: #ef6c43;
                    }

        /* Paperwork Cell */
        #banner .inner-slide .content > .paperwork-cell{
            display: none;
        }

    /**
     * -------------  [NOTE: Sepcific Pages] ---------------
     *
     * From now on, the following styling is for specific pages
     */

    /* [+] Homepage */
    #home-page {
        
    }
        /* [+] Who We are Section */
        #home-page #home-splash{
            padding-bottom: 7%;
            background: url(../images/splash/home.jpg);
        }
            #home-page #home-splash .ui-status-bar.green{
                color: #fff;
                background: #ef6a41;
            }
            
            #home-page #home-splash .content{
                margin: 2% auto;
                width: 50%;
                max-width: 600px;
            }
                #home-page #home-splash .content .title-text{
                    font: 160% Poppins;
                    color: #fff;
                    font-weight: 500;
                    max-width: 500px;
                    margin: 0 auto;
                }

                #home-page #home-splash .content .ui-form{
                    max-width: 550px;
                    margin: 2% auto;
                }
                    #home-page #home-splash .content .ui-form input{
                        font-weight: 400;
                        font: 80% Poppins;
                        color: #2b2b2d;
                        padding: 4% 4.5%;
                        width: 90%;
                        margin-bottom: 1px;
                        background: #fff;
                        border-radius: 3px;
                        border: 0;
                    }

                    #home-page #home-splash .content .ui-form button{
                        padding: 3.5% 0;
                        background: #e98721;
                        font: 100% Dosis;
                        font-weight: 600;
                        text-transform: uppercase;
                        letter-spacing: 0.5px;
                    }

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

        }
            .fothy-sixthy-panel > div{
                float: left;
            }

            /* Left part*/
            .fothy-sixthy-panel > .left{
                width: 40%;
                padding: 15.5% 0;
                background: url(../images/ui/support-agent.jpg);
            }

            /* Right Part */
            .fothy-sixthy-panel > .right{
                width: 54%;
                padding: 3%;
                text-align: left;
            }
                .fothy-sixthy-panel .title{
                    font: 150% Dosis;
                    font-weight: 700;
                    text-align: left;
                }

                .fothy-sixthy-panel .content{
                    color: #1f1d1d;
                    font: 110% Roboto;
                    line-height: 30px;
                    font-weight: 300;
                    max-width: 70%;
                }
                
                /* Buttons*/
                .fothy-sixthy-panel .buttons{
                    float: left;
                    width: 70%;
                    margin-left: -1%;
                }
                    .fothy-sixthy-panel .buttons > div{
                        float: left;
                        width: 48%;
                        padding: 0 1%;
                    }
                        .fothy-sixthy-panel .buttons > .whatsapp{
                           
                        }

                        .fothy-sixthy-panel .buttons > div button{
                            padding: 5% 0;
                            text-transform: uppercase;
                        }

                        .fothy-sixthy-panel .buttons > .whatsapp button{
                            background: #6fd95f;
                        }

        /* About Section */
        #home-page #about-section{
            background: #f8fcfa;
        }
            /* Left part*/
            #home-page #about-section > .left{
                padding: 15.5% 0;
                background: url(../images/ui/smeplus-product.jpg);
            }

            #home-page #about-section .content{
                max-width: 85%;
            }

        /* About */
        #home-page .about{
            background: #eee;
        }

        /* Our steps */
        #home-page .our-steps{
            padding: 0% 0 2%;
            background: url(../images/ui/senior-woman.jpg);
            color: #fff;
        }
            #home-page .our-steps .title{
                margin: 4% auto;
                width: 50%;
                font: 200% Dosis;
                font-weight: 500;
                color: #fff;
            }

            #home-page #steps-grid > div{
                width: 33.3%!important;
            }
                #home-page #steps-grid > div .big-label{

                }
                    #home-page #steps-grid > div .big-label > .top{
                        font: 100% Poppins;
                        font-weight: 700;
                        margin-bottom: 15px;
                    }
                        #home-page #steps-grid > div .big-label > div > div{
                            float: left;
                        }

                        #home-page #steps-grid > div .big-label .circle-rounding{
                            color: #303230;
                            font: 130% Roboto;
                            text-align: center;
                            width: 50px;
                            padding-top: 10px;
                            height: 40px;
                            margin-right: 20px;
                            margin-top: -8px;
                            background: #ffffff;
                        }

                        #home-page #steps-grid > div .big-label .label{
                            padding: 2px 0;
                            font-weight: 500;
                        }

                   .rubik-text{
                        font: 100% Roboto;
                        font-weight: 300;
                        line-height: 180%;
                        color: #000;
                        width: 90%;
                        text-align: left;
                        padding: 5% 0;
                    }

                    .our-steps .rubik-text {
                        color: #fff;
                    }

        /* Button */
        #who-is-for-section .button{
            margin: 4% auto;
            width: 30%;
        }
            #who-is-for-section .button button{
                font: 109% Dosis;
                font-weight: 600;
                text-transform: uppercase;
                padding: 5% 0;
                background: transparent;
                border-radius: 5px;
                border: 2px solid #fff;
            }

        /* features */
        #home-page .features{

        }
            #home-page .features .grid{
              
            }
                #home-page .feature-content{
                    margin-top: -20px;
                }

                /* Image */
                #home-page .features img{
                    max-width: 70%;
                }

                /* Text */
                #home-page .features .text-box{
                    text-align: left;
                }

                #home-page .features .text-box.alt{
                    margin-left: 12%;
                }
                    #home-page .features .text-box .title{
                        font: 170% Dosis;
                        font-weight: 600;
                        max-width: 70%;
                        padding: 15px 0;
                    }

                    #home-page .features .text-box.alt .title{
                        max-width: 90%;
                    }

                    #home-page .features .text-box p{
                        max-width: 80%;
                        padding: 4% 0;
                        margin: 0;
                        font: 110% Roboto;
                        font-weight: 300;
                        line-height: 160%;
                    }

                    #home-page .features .text-box.alt p{
                        max-width: 90%;
                    }

                    #home-page .features .text-box .button{
                        padding: 10px 0;
                    }
                        #home-page .features .text-box button{
                            max-width: 45%;
                            font: 90% Rubik;
                            background: #ef940b;
                        }

        /** Introduction */
        #home-page #features .introduction{
            margin: 3% auto;
            width: 60%;
        }
            #home-page #features .introduction .title{
                padding: 2% 0;
                font-weight: 500;
            }

            #home-page #features .introduction p{
                font: 110% Roboto;
                font-weight: 300;
            }

        /** Content */
        #home-page #features .content{
            padding: 5% 0 2%;
        }
            #home-page #features .content > div{
                float: left;
            }

            /* Left */
            #home-page #features .content > .left{
                width: 10%;
                margin-left: 10%;
                max-width: 400px;
                min-height: 300px;
                font: 100% Poppins;
                color: #eee;
            }
                #home-page #features .content > .left .row{
                    cursor: pointer;
                    text-align: left;
                    padding: 15%;
                    font-size: 90%;
                    color: #7c7a7a;
                    border-left: 2px solid #eee;
                }

                #home-page #features .content > .left .row.active,
                #home-page #features .content > .left .row:active,
                #home-page #features .content > .left .row:hover{
                    color: #000;
                    border-color: #e98721;
                }

            /* Right */
            #home-page #features .content > .right{
                width: 80%;
            }

        /** Button */
        #home-page #features .create-account{
            margin: 1% auto 5%;
            width: 30%;
            max-width: 250px;
        }
            #home-page #features .create-account button{
                padding: 6% 0;
                font: 110% Dosis;
                font-weight: 600;
                background: #e98721;
            }

    /* Pricing Div*/
    .focal-product-page .pricing-div{
        font-size: 100%!important;
        padding: 3% 0;
    }
        /* Prize */
        .ui-pricing-box .ui-camel-prize {
            font: 200% Montserrat;
            font-weight: 700;
        }

        .focal-product-page .pricing-div p{
            margin: 0 auto;
            max-width: 400px;
            font-weight: 300;
            font-size: 120%;
        }

        .focal-product-page #pricing-grid > div > div {
            padding-bottom: 30px;
        }


    /* Prizing Box */
    #pricing-grid{
        
    }
        #pricing-grid .box {
           
        }
            /* Button */
            #pricing-grid .box button {
                width: 300px;
                font: 120% Dosis;
                text-transform: uppercase;
                border-radius: 5px;
                padding: 4% 0;
                background: #cc641a;
            }

            #pricing-grid .box:nth-child(2) button{
                color: #fff;
                background: transparent;
                border: 2px solid #fff;
            }


/**
 * -------------  [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"
 */
.bold { font: 100% Roboto Bold }

/* [x] Title */
.title {
    color: #000;
    font: 150% Montserrat;
    font-weight: 700;
    padding: 10px 0
}
    .title .ui-line {
        width: 70px;
        height: 7px;
        margin: 10px auto;
    }

    .ui-status-bar{
        width: 100%;
    }

/* [x] Line */
.ui-line {
    min-width: 30px;
    width: 50px;
    margin: 10px auto;
    height: 6px;
    background: #16aae8;
}

/* [x] Package Name */
.ui-pricing-box .package-name {
    padding: 20px 0;
    margin: 0 auto;
    font-size: 110%;
    font-weight: 300;
    text-align: center;
    font: 100% Poppins;
    font-weight: 400;
    border-bottom: 1px solid #e0dada;
}


.box:nth-child(2) .package-name span{
    color: #000;
    background: #fff;
}
.box:nth-child(2) .ui-pricing-box .package-name {
    border-color: #7afb67;
}
    .ui-pricing-box .package-name span{
        color: #fff;
        padding: 2px 8px;
        margin-left: 10px;
        background: #39a629;
    }

/* [x] Mobile Menu */
.ui-mobile-menu {
    background: #fff
}
    .ui-mobile-menu li {
        color: #544f4f;
        font-size: 100%;
        padding: 25px 10px;
        border-bottom: 1px solid #dedede
    }
        .ui-mobile-menu li a {
            color: #000
        }
            .ui-mobile-menu li:active a,
            .ui-mobile-menu li:hover a {
                color: #fff
            }

    .ui-mobile-menu li:active,
    .ui-mobile-menu li:hover {
        background: #0989bf;
    }

    .ui-mobile-menu #detail-solution {
        margin-top: 10px
    }

.ui-custom-list {
    margin: 0 auto;
    width: 80%;
}
    .ui-custom-list li{
        font: 100% Poppins;
        line-height: 1.6;
        color: #554c4c;
        padding: 3% 0;
    }

    .box:nth-child(2) .ui-pricing-box .ui-custom-list li{
        color: #fff;
    }

/* Montitle */
.montitle {
    margin: 3% auto;
    width: auto;
    max-width: 350px;
    color: #000;
    font: 150% Dosis;
    font-weight: 700;
}

/* Rubik Title */
.rubik-title{
    font: 140% Rubik;
    font-weight: 500;
    max-width: 70%;
    padding: 2.5% 0;
    max-width: 450px;
    text-align: center;
    margin: 0 auto;
}

#hilight {
    font-size: 95%;
    color: #fff;
    padding: 1px 10px;
    background: #1388b9;
}
    #hilight.gb{
        font-size: 120%;
        background: #28a726;
    }

.ui-parent-menu-list li:first-child {
    display: none
}

.ui-pricing-box {
    font: 120% Roboto;
    border: 0;
}

#pricing-grid .box:nth-child(1) .ui-pricing-box{
    border-top: 2px solid #eee;
    border-left: 2px solid #eee;
    border-bottom: 2px solid #eee;
}

#pricing-grid .box:nth-child(2) .ui-pricing-box{
    color: #fff;
    background: #39a629;
    padding-top: 50px;
    margin-top: -35px;
    padding-bottom: 50px;
}

#pricing-grid .box:nth-child(3) .ui-pricing-box{
    border-top: 2px solid #eee;
    border-right: 2px solid #eee;
    border-bottom: 2px solid #eee;
}
    .ui-pricing-box #hilight{
        font: 70% Montserrat;
        border-radius: 35px;
        padding: 6px 10px;
    }

.ui-pricing-box.active {
    border: 5px solid #565555
}

.ui-scroll-btn {
    top: 72.17%;
    left: 91.1%;
    width: 60px;
    height: 60px;
    background: #1388b9;
    border-radius: 50%;
}

.ui-scroll-btn:hover {
    background: #dc5329
}

.dmsn {
    width: 90%
}

.ui-parent-menu-list .ui-mobile-menu > li:active,
.ui-parent-menu-list .ui-mobile-menu > li:hover {
    background: transparent
}

.ui-parent-menu-list .ui-mobile-menu > li:active a,
.ui-parent-menu-list .ui-mobile-menu > li:hover a {
    color: #000
}

.inner-page-splash {
    padding: 4% 0
}

.slanted.inner-page-splash {
    padding: 2% 0 30%
}

.inner-page-splash .ui-ctru-box {
    font-weight: 700;
    max-width: 130px;
    font: 120% Franklin Gothic Heavy;
    border-radius: 0;
    border: 6px solid #fff
}

.inner-page-splash .description {
    font-size: 70%;
    color: #fff;
    max-width: 300px;
    margin: 2% auto 0
}

.ui-focalsoft-logo {
    border: 0
}

.ui-focalsoft-logo > .left {
    width: 20%;
    border: 0
}

.ui-focalsoft-logo > .left img {
    margin-top: -10px;
    max-width: 80%
}

.ui-focalsoft-logo > .right {
    display: none
}

.ui-highlight span {
    font: 130% Montserrat;
    font-weight: 700;
    background: #1388b9;
}

.ui-splash .ui-ctru-box {
    font: 120% Roboto;
    padding: 12px 4%;
    max-width: 150px;
    margin: 2% auto;
    background: #1388b9;
    border-color: #1388b9
}

.ui-splash .text {
    margin: 4% auto 6%;
    font: 120% Roboto;
    width: 100%;
    max-width: 500px
}

.texty {
    margin: 5% auto;
    font: 110% Roboto;
    font-weight: 300;
    width: 100%
}
    .texty #hilight{
        font-weight: bold;
        font-size: 80%;
    }

.or {
    margin: 0 auto;
    width: 30px;
    height: 27px;
    padding: 12px 10px 10px;
    font: 110% Roboto;
    font-weight: 700;
    color: #fff;
    background: #2352b3
}

#default-splash .ui-ctru-box {
    margin-top: 2%;
    max-width: 175px;
    min-width: 100px;
    font-size: 120%;
    padding: 12px
}

#default-splash .text {
    width: 44%;
    margin: 2% auto
}

.page {
    color: #000
}

#blue-hl span {
    background: #2352b3
}

#home-page .our-work {
    border-top: 1px solid #dedede;
    min-height: 500px
}

#work-grid > .box {
    width: 48%!important;
    padding: 1%
}

#work-grid > .box img {
    max-width: 100%
}

#home-page .our-work > .work-table #bck-ctru-box {
    margin: 15px auto
}

#social-media-section {
    background: #eee
}

#social-media-section p {
    margin: -10px auto 20px;
    font: 110% Roboto;
    width: 250px;
    font-weight: 300
}

#bck-ctru-box {
    max-width: 100px;
    color: #000;
    border-color: #2251b1;
    border-radius: 0;
    font: 100% Roboto;
    font-weight: 700
}

#bck-ctru-box:hover {
    color: #fff;
    background: #214ba0
}

#focal-splash {
    position: relative;
    left: 0;
    padding: 5% 0 35%
}

#focal-splash .ui-ctru-box {
    max-width: 130px;
    border: 6px solid #1388b9!important
}

#focal-splash .description {
    font-size: 100%;
    max-width: 300px;
    margin: 6% auto 8%
}

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

#branding-page .introduction {
    padding: 2% 0
}

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

#branding-page .introduction img {
    max-width: 100%
}

.focal-product-page .introduction p {
    margin: 11% auto;
    color: #4a4747;
    font-weight: 300;
    font-size: 120%
}

.focal-product-page p {
    padding: 0 15px
}

.focal-product-page{
    background: #ffffff;
    padding-bottom: 2%;
}

.focal-product-page #color-grid > div {
    padding: 3% 0
}

.focal-product-page .color-div .montitle,
.focal-product-page .color-div p {
    color: #000;
}

.focal-product-page .color-div p {
    margin: 2% auto 6%;
    max-width: 450px;
    font-weight: 300;
    font-size: 120%;
}

.focal-product-page .color-div .image img {
    max-width: 70%
}

#startup-page .color-div .image {
    max-width: 100%;
    padding: 10px;
    background: #fff
}

#startup-page .color-div .image img {
    max-width: 100%
}

.focal-product-page a {
    color: #de4e21
}

.focal-product-page a:hover {
    text-decoration: underline
}

#color-grid .box,
#pricing-grid .box {
    width: 100%!important
}

#logo-design-page .color-div {
    background: #3fb94b
}

.sumdiv > .row.alt {
    color: #fff;
    background: #e25a30
}

.sumdiv > .row > .title {
    font-size: 100%;
    padding: 5px 0
}

.sumdiv > .row.alt .title {
    color: #fff
}

.sumdiv > .row.alt .title .ui-line {
    background: #000
}

.description-section {
    color: #383737;
    padding: 0 30px;
    line-height: 1.5
}

.alt .description-section {
    color: #fff
}

.description-section ul {
    margin: 0 auto;
    text-align: left;
    padding-left: 10px;
    width: 95%;
    list-style-image: url(../genode/images/ui/black-dot.png)
}

.description-section ul li {
    padding-top: 10px;
    padding-left: 12px
}

#pricing-splash {
    position: relative;
    left: 0;
    background: url(../images/ui/pricing-splash.jpg)
}

.even {
    background: #eee
}

.ui-form-submit button {
    padding: 20px
}

/**
 *   Footer
 */
#footer{
    border-top: 1px solid #eee;
}

.ui-trinity-footer {
    padding: 3% 0;  
}
    .ui-trinity-footer li a{
        color: #5d5959;
    }

    #fs-link {
        font-size: 80%;
        padding: 1% 0;
        color: #eee;
        border-top: 1px solid #eee;
        background: #fff;
    }
        #fs-link, #fs-link a {
            color: #5d5959;
        }

        #fs-link a {
            font-weight: 700
        }

        #fs-link a:hover {
            color: #eee
        }


.ui-pricing-box .ui-camel-prize {
    font-weight: 700;
    padding: 10% 0;
    font: 300% Dosis;
    text-align: center;
}

@media screen and (max-width: 460px) {
    #sponsors-grid > .box {
        width: 100%!important
    }
}

@media screen and (min-width: 490px) {
    .dmsn {
        max-width: 1300px
    }

    .ui-trinity-footer {
        padding: 1.2% 0
    }
}

@media screen and (min-width: 601px),
media screen and (max-width: 1000px) {
    .grid > .box {
        width: 33.3%!important
    }
}

@media screen and (min-width: 1000px) {
    .grid > .box {
        width: 50%!important
    }
}

@media screen and (min-width: 1400px) {
    #menu-section > .dmsn > .btn .ui-ctru-box {
        padding: 15px 40px
    }
    #menu-section > .dmsn > .ui-menu li {
        padding: 1.8% 8%
    }
}