@charset "UTF-8";

@-ms-viewport {
    width: device-width;
}

video::-webkit-media-controls-panel {
    background: none;
}

body {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

html {
    scroll-behavior: smooth;
}

/* Grid Container */

.container {
    display: grid;
    width: 100%;
    height: auto;
}

/* Extra large devices (large laptops and desktops, 1200px and up) */

@media all and (max-width: 5000px) {

    .header {
        background-color: #2b313d;
        opacity: 0.95;
         z-index: 1;
    }

    .header a {
        display: flex;
        align-items: center;
    }

    .header ul {
        list-style: none;
        display: flex;
        align-items: center;
    }

    .li01 {
        flex-grow: 0.5;
    }

    .li02 {
        flex-grow: 0.1;
    }

    .li03 {
        flex-grow: 4;
    }

    .li-menu {
        flex-grow: 0.5;
    }

    .li09 {
        flex-grow: 0.2;
    }

    .header ul li {
        position: relative;
    }

    .header li:hover .dropdown > li {
        display: block;
    }

    .dropdown {
        position: absolute;
        display: flex;
        flex-direction: column;
        margin-left: -55px;
    }

    .dropdown li {
        display: none;
        position: relative;
        background-color: #2b313d;
        padding: 10px 0px 10px 0px;
    }

    .dropdown li a {
        color: #FFFF;
        text-decoration: none;
        text-transform: uppercase;
        font-family: 'Dosis', 'Dosis-SemiBold', 'Dosis SemiBold', 'Roboto';
        font-size: 1em;
        width: 220px;
        padding: 5px 0px 5px 16px;
    }

    .sales_li {
        margin-top: 32px;
    }

    .dropdown li:hover {
        background-color: #424a58;
        font-weight: bold;
        padding: 10px 0px 10px 0px;
    }

    .nav {
        display: none;
    }

    .login-button {
        grid-area: button;
        border-radius: 10px;
        padding: 10px 20px 10px 20px;
        margin: 0px 40px 0px 0px;
        background-image: linear-gradient(rgb(242, 202, 82) 0%, rgb(242, 202, 82) 0%, rgb(218, 173, 38) 100%, rgb(218, 173, 38) 100%);
        font-family: 'Dosis SemiBold', 'Dosis-SemiBold', 'Dosis', 'Roboto';
        justify-content: center;
    }

    .main {
        display: grid;
        grid-template-areas:
            ". title_main pic ."
            ". sub pic ."
            ". desc pic ."
            ". desc pic .";
        grid-template-columns: 1% repeat(2, auto) 1%;
        grid-template-rows: 30% 25% 20%;
        background: url(assets/u15_mod2.jpg);
        background-size: cover;
    }
    
    .animation {
       grid-area: pic;
        width: 80%;
        transform: scale(1.1);
        height: auto;
        align-self: center;
        justify-self: center;
    }

    .why_assister {
        display: grid;
        grid-template-areas:
            ". title title title title title title . "
            ". subtitle subtitle subtitle subtitle subtitle subtitle ."
            ". i1 i2 i3 i4 i5 i6 ."
            ". t1 t2 t3 t4 t5 t6 ."
            ". button . . . . . .";
        grid-template-columns: 1% repeat(6, auto) 1%;
        grid-template-rows: repeat(5, auto) 10%;
        justify-content: center;
        background-image: url(assets/u20_mod3.png);
        background-size: cover;
        grid-gap: 30px;
    }

    .assister_businesses {
        display: grid;
        grid-template-areas:
            "businesses_title businesses_title businesses_title businesses_title businesses_title businesses_title"
            "apparel jewellery electronics toys coffee book"
            "health sport beauty telco bike manymore";
        grid-template-columns: repeat(6, auto);
        grid-template-rows: repeat(4, auto);
        grid-row-gap: 10px;
        grid-column-gap: 10px;
        background-color: #F2F5FA;
        justify-content: center;
        padding: 16px;
    }

    .slideshow-container {
        position: relative;
        max-height: 700px;
    }

    .mySlides {
        display: none;
        background-image: url(assets/background_slider.svg);
        background-size: cover;
        padding: 0 40px 0 40px;
        align-items: center;
    }

    .prev,
    .next {
        cursor: pointer;
        position: absolute;
        top: 50%;
        width: auto;
        padding: 16px;
        color: #E9BF41;
        font-weight: bold;
        font-size: 20px;
        border-radius: 0 3px 3px 0;
        user-select: none;
    }

    .next {
        position: absolute;
        right: 0;
        border-radius: 3px 0 0 3px;
    }

    .prev:hover,
    .next:hover {
        background-color: #2D9AA7;
        color: white;
    }

    .dot-container {
        text-align: center;
        padding-top: 10px;
    }

    .dot {
        cursor: pointer;
        height: auto;
        width: 100%;
        max-width: 300px;
        margin: 40px 2px;
        display: inline-block;
        font-size: 1.3em;
        font-family: 'Dosis SemiBold', 'Dosis-SemiBold', 'Dosis', 'Roboto';
        color: #2D9AA7;
        padding-bottom: 20px;
        border-bottom: 1.5px solid #E9BF41;
        transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1);
    }
    
    .active,
    .dot:hover {
        color: #E9BF41;
    }

    .slide-1 {
        display: grid;
        grid-template-areas:
            "sales_image2 sales_text2 sales_text2 sales_text2 sales_text2 sales_text2 sales_text2"
            "sales_image2 sales01 sales_details01 sales02 sales_details02 sales_details02 ."
            "sales_image2 sales03 sales_details03 sales04 sales_details04 sales_details04 ."
            "sales_image2  . . . . . function_section_button1";
        grid-template-columns: 40% repeat(6, auto);
        grid-template-rows: 30% 10% 15% 15%;
        grid-gap: 5px;
        padding-top: 45px;
    }

    .slide-2 {
        display: grid;
        grid-template-areas:
            "inventory_text2 inventory_text2 inventory01 inventory_details01 inventory02 inventory_details02"
            "inventory_text2 inventory_text2 inventory03 inventory_details03 inventory04 inventory_details04"
            "inventory_text2 inventory_text2 inventory05 inventory_details05 inventory06 inventory_details06"
            "function_section_button2 . . . . .";
        grid-template-columns: 35% 10% 10% 10% 5% 5%;
        grid-gap: 5px;
        align-items: center;
        justify-items: center;
        padding-top: 45px;
    }

    .slide-3 {
        display: grid;
        grid-template-areas:
            "org_image2 org_text2 org_text2 org_text2 org_text2 org_text2 org_text2"
            "org_image2 org01 org_details01 org02 org_details02 org_details02 ."
            "org_image2 org03 org_details03 org04 org_details04 org_details04 ."
            "org_image2  . . . . . function_section_button3";
        grid-template-columns: 40% repeat(6, auto);
        grid-template-rows: 30% 10% 15% 15%;
        grid-gap: 5px;
        padding-top: 45px;
    }

    .slide-4 {
        display: grid;
        grid-template-areas:
            "performance_image2 performance_text2 performance_text2 performance_text2 performance_text2 performance_text2 performance_text2"
            "performance_image2 performance01 performance_details01 performance02 performance_details02 performance_details02 ."
            "performance_image2 performance03 performance_details03 performance04 performance_details04 performance_details04 ."
            "performance_image2 . . . . . function_section_button4";
        grid-template-columns: 40% repeat(6, auto);
        grid-template-rows: 30% 10% 15% 15%;
        grid-gap: 5px;
        padding-top: 45px;
    }
    
    .assister_functions {
        display: none;
    }

    .references1 {
        display: grid;
        grid-template-areas:
            ". references_title references_title ."
            ". mt_logo mt_logo ."
            ". references_text references_text .";
        grid-template-columns: 5% repeat(2, auto) 5%;
        grid-template-rows: repeat(3, auto);
        justify-items: center;
        justify-content: center;
    }

    .mt_logo {
        height: 50px;
        margin-right: 0px;
        justify-self: center;
    }

    .references2 {
        display: grid;
        grid-template-areas:
            ". logo1 logo2 logo3 logo4 ."
            ". num1 num2 num3 num4 ."
            ". expl1 expl2 expl3 expl4 .";
        grid-template-columns: 10% repeat(4, 20%) 10%;
        grid-template-rows: repeat(3, auto);
        justify-items: center;
        justify-content: center;
    }

    .technology {
        display: grid;
        grid-template-areas:
            ". tech_title ."
            ". tech_text ."
            ". tech_button ."
            ". technology_title_02 ."
            ". tech_image .";
        grid-template-columns: 10% 90% 10%;
        grid-template-rows: repeat(5, auto);
        justify-content: center;
        //background-image: url(assets/tech_back.svg);
        background-image: url(assets/u20_mod3.png);
        background-size: cover;
    }

    .about {
        display: grid;
        grid-template-areas:
            ". about_title about_title ."
            ". about_text about_text ."
            ". get_in_touch get_in_touch ."
            ". name01 name02 ."
            ". position01 position02."
            ". email01 email02 ."
            ". phone01 phone02 .";
        grid-template-columns: 5% 20% auto 5%;
        grid-template-rows: repeat(7, auto) 10%;
        grid-gap: 5px;
        background-image: url(assets/u19_mod2.png);
        background-size: cover;
    }

    .footer {
        display: grid;
        grid-template-areas:
            ". footer_logo pin address linkedin facebook . ";
        grid-template-rows: 100%;
        grid-template-columns: 1% repeat(5, auto) 1%;
        background-color: rgba(46, 53, 63, 1);
        justify-content: stretch;
        padding: 50px 0px 50px 0px;
    }
}

/* Large devices (laptops/desktops, 992px and up) */

@media all and (max-width: 1200px) {
    
    .dot {
        width: 23%;
    }
    
      .slide-2, .slide-1 {
        grid-template-columns: 35% 10% 10% 15% 5% 5%;
        padding-top: 20px;
    }

    
     .slide-3 {
        grid-template-columns: 40% 5% 20% auto 20% 5% 5%;
        padding-top: 20px;
    }

    .slide-4 {
        grid-template-columns: 40% 15% 10% auto 20% 5% 5%;
        padding-top: 20px;
    }
     .tech_image {
        max-width: 992px;
    }

}

/* Medium devices (landscape tablets, 768px and up) */

@media all and (max-width: 992px) {

    .main {
        grid-template-rows: 20% 30% 20% 20%;
    }

    .screens {
        transform: scale(1.2);
    }
    
     .assister_businesses {
        grid-template-areas:
            "businesses_title businesses_title businesses_title businesses_title businesses_title businesses_title"
            "apparel jewellery electronics toys coffee book"
            "health sport beauty telco bike manymore";
        grid-template-columns: repeat(6, auto);
        grid-template-rows: repeat(4, auto);
        grid-row-gap: 5px;
        grid-column-gap: 5px;
        background-color: #F2F5FA;
        justify-content: center;
    }
    
     .slideshow-container {
        display: none;
    }
    
     .assister_functions {
       display: grid;
       grid-template-areas:
            ". feature_title feature_title feature_title feature_title feature_title feature_title feature_title feature_title feature_title feature_title feature_title feature_title ."
            ". sales_image sales_image sales_image sales_image sales_image sales_image sales_title sales_title sales_title sales_title sales_title sales_title ."
            ". sales_image sales_image sales_image sales_image sales_image sales_image sales_text sales_text sales_text sales_text sales_text sales_text ."
            ". sales01 sales_details01 sales_details01 sales02 sales_details02 sales_details02 sales03 sales_details03 sales_details03 sales04 sales_details04 sales_details04 ."
            ". function_section_button1 function_section_button1 . . . . . . . . . . ."
            ". . . . . . . . . . . . . ."
            ". inventory_title inventory_title inventory_title inventory_title inventory_title inventory_title . . . . . . ."
            ". inventory_text  inventory_text inventory_text inventory_text inventory_text inventory_text inventory01 inventory_details01 inventory_details01 inventory02 inventory_details02 inventory_details02 ."
            ". inventory_text inventory_text inventory_text inventory_text inventory_text inventory_text inventory03 inventory_details03 inventory_details03 inventory04 inventory_details04 inventory_details04 ."
            ". inventory_text inventory_text inventory_text inventory_text inventory_text inventory_text inventory05 inventory_details05 inventory_details05 inventory06 inventory_details06 inventory_details06 ."
            ". function_section_button2 function_section_button2 . . . . . . . . . . ."

            ". org_image org_image org_image org_image org_image org_image org_title org_title org_title org_title org_title org_title ."
            ". org_image org_image org_image org_image org_image org_image org_text org_text org_text org_text org_text org_text ."
            ". .org01 org_details01 org_details01 org_details01 org02 org_details02 org_details02 org03 org_details03 org_details03 . ."
            ". function_section_button3 function_section_button3 . . . . . . . . . . ."
            ". . . . . . . . . . . . . ."
            ". performance_title performance_title performance_title performance_title performance_title performance_title performance_title performance_title performance_title performance_title performance_title performance_title  ."
            ". performance_text performance_text performance_text performance_text performance_text performance_text performance_text performance_text performance_text performance_text performance_text performance_text ."
            ". performance_image performance_image performance_image performance_image performance_image performance_image performance_image performance_image performance_image performance_image performance_image performance_image ."
            ". . . performance01 performance_details01 performance_details01 performance02 performance_details02 performance_details02 performance03 performance_details03 performance_details03 . ."
            ". function_section_button4 function_section_button4 . . . . . . . . . . ."
            ". . . . . . . . . . . . . .";
        grid-template-columns: 1% repeat(12, 6%) 1%;
        justify-content: center;
        grid-gap: 8px;
         background-image: url(assets/back_grey.png);
        background-size: cover;
    }
    
    .function_title {
        
    }

    .org_details01 {
        margin: 0 !important;
    }

    .performance_image {
        justify-self: center;
    }

    .sales_image, .org_image {
        margin: 40px 0 0 -20px !important;
        align-self: center !important;
    }
    
    .feature_button {
        margin: 10px 0 0 0 !important;
    }
    
    .function_details {
    padding: 10px 0 0 0 !important;
}
    .functions_text {
        padding: 0px 30px 0px 30px !important;
    }


     .about {
        grid-template-areas:
            ". about_title about_title ."
            ". about_text about_text ."
            ". get_in_touch get_in_touch ."
            ". name01 name02 ."
            ". position01 position02."
            ". email01 email02 ."
            ". phone01 phone02 .";
        grid-template-columns: 5% 30% auto 5%;
        grid-template-rows: repeat(7, auto) 10%;
        grid-gap: 5px;
        background-image: url(assets/u19_mod2.png);
        background-size: cover;
    }

}

/* Small devices (portrait tablets and large phones, 400px and up) */

@media all and (max-width: 768px) {

    .li-menu,
    .li09 {
        display: none;
    }

    .li03 {
        flex-grow: 4;
    }

    .nav {
        display: flex;
        flex-grow: 1;
    }

    .navicon {
        display: none;
    }

    label {
        color: #fff;
        cursor: pointer;
    }

    .header {
        opacity: 1;
    }

    .mobile-menu {
        display: flex;
        flex-direction: column;
        position: absolute;
        margin-top: 55px;
        right: 0;
        width: 100%;
        opacity: 0;
        visibility: hidden;
    }

    .mobile-menu li a {
        color: #FFFF;
        justify-content: center;
    }

    input.navicon:checked ~ ul {
        opacity: 1;
        visibility: visible;
    }

    .nav ul li {
        text-align: center;
        background: #2b313d;
        text-decoration: none;
        text-transform: uppercase;
        font-family: 'Dosis', 'Dosis-SemiBold', 'Dosis SemiBold', 'Roboto';
        font-size: 1em;
        width: 100%;
        cursor: pointer;
        padding: 10px 0px 10px 0px;
    }


    .nav ul li:hover {
        background-color: #424a58;
        font-weight: bold;
    }


    .login-button {
        margin: 0px 150px 0px 150px;
    }

 .main {
        grid-template-areas:
            ". title_main ."
            ". sub ."
            ". desc ."
            ". pic .";
        grid-template-columns: 1% auto 1%;
        grid-template-rows: 20% 20% 10% 50%;
    }

    .why_assister {
        grid-template-areas:
            ". title title title . "
            ". subtitle subtitle subtitle subtitle"
            ". i1 i2 i3 ."
            ". t1 t2 t3 ."
            ". i4 i5 i6 ."
            ". t4 t5 t6 ."
            ". button . . .";
        grid-template-columns: 1% repeat(3, auto) 1%;
        grid-gap: 30px;
    }

    .line {
        display: none;
    }
    
     .assister_businesses {
        grid-template-areas:
            "businesses_title businesses_title businesses_title businesses_title"
            "apparel jewellery electronics toys"
            "coffee book health sport"
            "beauty telco bike manymore";
        grid-template-columns: repeat(4, auto);
        grid-template-rows: repeat(4, auto);
        grid-row-gap: 5px;
        grid-column-gap: 5px;
    }
    
    .businesses_title {
    font-size: 1.5em !important;
}

    .assister_functions {
        display: grid;
        grid-template-areas:
            ". feature_title feature_title feature_title feature_title ."
            ". sales_title sales_title sales_title sales_title ."
            ". sales_text sales_text sales_text sales_text ."
            ". sales01 sales_details01 sales02 sales_details02 ."
            ". sales03 sales_details03 sales04 sales_details04 ."
            ". sales_image sales_image sales_image sales_image ."
            ". function_section_button1 function_section_button1 function_section_button1 function_section_button1 ."
            ". inventory_title inventory_title inventory_title inventory_title ."
            ". inventory_text inventory_text inventory_text inventory_text ."
            ". inventory01 inventory_details01 inventory02 inventory_details02 ."
            ". inventory03 inventory_details03 inventory04 inventory_details04 ."
            ". inventory05 inventory_details05 inventory06 inventory_details06 ."
            ". function_section_button2 function_section_button2 function_section_button2 function_section_button2 ."
            ". org_title org_title org_title org_title ."
            ". org_text org_text org_text org_text ."
            ". org01 org_details01 org02 org_details02 ."
            ". org_image org_image org_image org_image ."
            ". function_section_button3 function_section_button3 function_section_button3 function_section_button3 ."
            ". performance_title performance_title performance_title performance_title ."
            ". performance_text performance_text performance_text performance_text ."
            ". performance01 performance_details01 performance02 performance_details02 ."
            ". performance_image performance_image performance_image performance_image ."
            ". function_section_button4 function_section_button4 function_section_button4 function_section_button4  ."
            ". . . . . .";
        grid-template-columns: 1% repeat(4, auto) 1%;
        grid-template-rows: repeat(26, auto);
    }

    .function_title,
    .feature_button {
        justify-self: center !important;
        margin-right: 0px !important;
    }

    .function_image {
        margin: 0 !important;
        justify-self: center;
    }

    .functions_text {
        padding: 0 40px 0 40px;
    }

    .inventory02,
    .inventory04,
    .inventory06,
    .org01,
    .org02,
    .org03 {
        justify-self: end !important;
        margin-right: 25px;
    }


    .performance03,
    .performance_details03,
    .org03,
    .org_details03 {
        display: none;
    }

    .feature_button {
        padding: 10px 60px 10px 60px !important;
    }

    .tech_image {
        max-width: 476px;
        transform: scale(1) !important;
        margin-bottom: 50px;
    }

    .technology_title_02 {
        font-size: 1.6em !important;
    }

    .about {
        grid-template-areas:
            ". about_title ."
            ". about_text ."
            ". get_in_touch ."
            ". name01 ."
            ". position01 ."
            ". email01 ."
            ". phone01 ."
            ". . ."
            ". name02 ."
            ". position02."
            ". email02 ."
            ". pic02 phone02 .";
        grid-template-columns: 5% repeat(2, auto) 5%;
        grid-template-rows: repeat(12, auto) 10%;
        grid-gap: 5px;
        justify-content: center;
        background-image: url(assets/u19_mod2.png);
        background-size: cover;
    }

    .email,
    .phone {
        font-size: 0.9em !important;
    }

    .footer-logo {
        margin-left: 24px !important;
    }
}

/* Extra small devices (phones, 400px and down) */

@media all and (max-width: 475px) {

    .login-button {
        margin: 0px 50px 0px 50px;
    }

    .main {
        grid-template-rows: 15% 25% 30% 30%;
    }
    
    .animation {
        width: 70%;
    }

    .why_assister {
        grid-template-areas:
            ". title . "
            ". subtitle ."
            ". i1 ."
            ". t1 ."
            ". i2 ."
            ". t2 ."
            ". i3 ."
            ". t3 ."
            ". i4 ."
            ". t4 ."
            ". i5 ."
            ". t5 ."
            ". i6 ."
            ". t6 ."
            ". button .";
        grid-template-columns: 0.5% auto 0.5%;
        grid-template-rows: repeat(15, auto) 10%;
        grid-gap: 25px;
        background: linear-gradient(180deg, rgba(48, 160, 172, 1) 0%, rgba(48, 160, 172, 1) 0%, rgba(17, 104, 127, 1) 100%, rgba(17, 104, 127, 1) 100%);
    }
    
    .why_assister_desc {
        margin: 0px !important;
    }

    .material_icons,
    .material_icons_text,
    .section_button {
        margin: auto !important;
    }

    .assister_functions {
        grid-template-areas:
            ". feature_title feature_title ."
            ". sales_title sales_title ."
            ". sales_text sales_text ."
            ". sales01 sales_details01 ."
            ". sales02 sales_details02 ."
            ". sales03 sales_details03 ."
            ". sales04 sales_details04 ."
            ". sales_image sales_image ."
            ". function_section_button1 function_section_button1 ."
            ". inventory_title inventory_title ."
            ". inventory_text inventory_text ."
            ". inventory01 inventory_details01 ."
            ". inventory02 inventory_details02 ."
            ". inventory03 inventory_details03 ."
            ". inventory04 inventory_details04 ."
            ". inventory05 inventory_details05 ."
            ". inventory06 inventory_details06 ."
            ". function_section_button2 function_section_button2 ."
            ". org_title org_title ."
            ". org_text org_text ."
            ". org01 org_details01 ."
            ". org02 org_details02 ."
            ". org03 org_details03 ."
            ". org_image org_image ."
            ". function_section_button3 function_section_button3 ."
            ". performance_title performance_title ."
            ". performance_text performance_text ."
            ". performance01 performance_details01 ."
            ". performance02 performance_details02 ."
            ". performance03 performance_details03 ."
            ". performance_image performance_image ."
            ". function_section_button4 function_section_button4  ."
            ". . . . ";
        grid-template-columns: 1% auto auto 1%;
        grid-template-rows: repeat(26, auto);
    }

    .function_image {
        max-width: 300px;
    }

    .function_title {
        font-size: 1.4em !important;
        margin-left: 10px;
    }

    .performance03,
    .performance_details03,
    .org03,
    .org_details03 {
        display: block;
    }

    .feature_button {
        justify-self: center !important;
    }
    
    .assister_businesses {
        grid-template-areas:
            "businesses_title businesses_title"
            "apparel jewellery"
            "electronics toys"
            "coffee book"
            "health sport"
            "beauty telco"
            "bike manymore";
        grid-template-columns: repeat(2, auto);
        grid-template-rows: repeat(7, auto);
    }

    .references2 {
        grid-template-areas:
            ". logo1 logo2 ."
            ". num1 num2 ."
            ". expl1 expl2 ."
            ". logo3 logo4 ."
            ". num3 num4 ."
            ". expl3 expl4 .";
        grid-template-columns: 5% repeat(2, 45%) 5%;
        grid-template-rows: repeat(6, auto);
        justify-items: center;
        justify-content: center;
    }

    .tech_button {
        margin-bottom: 20px !important;
    }

    .tech_image,
    .technology_title_02 {
        display: none;
    }

    .about {
        grid-template-areas:
            "about_title"
            "about_text"
            "get_in_touch"
            "name01"
            "position01"
            "email01"
            "phone01"
            "name02"
            "position02"
            "email02"
            "phone02";
        grid-template-columns: 100%;
        grid-template-rows: repeat(11, auto) 10%;
        grid-gap: 5px;
        justify-content: center;
        background-image: url(assets/u19_mod2.png);
        background-size: cover;
    }

    .about_title,
    .get_in_touch,
    .name,
    .position,
    .phone,
    .email {
        justify-self: center !important;
    }

    .about_text {
        margin: 0 16px 0 16px;
    }

    .footer {
        display: grid;
        grid-template-areas:
            "footer_logo footer_logo"
            "address address"
            "linkedin facebook";
        grid-template-rows: repeat(3, auto);
        grid-template-columns: repeat(2, 50%);
        background-color: rgba(46, 53, 63, 1);
        justify-content: center;
        padding: 50px 0px 50px 0px;
    }

    .footer-logo,
    .address {
        justify-self: center !important;
    }

    .linkedin {
        margin-right: 10px !important;
    }

    .facebook {
        margin-left: 10px;
    }

    .pin {
        display: none !important;
    }

}


/* Header */

a {
    text-decoration: none;
}

li {
    color: #FFFF;
}

.header-logo {
    width: 120px;
}

.language-selector {
    color: #ffff;
    font-family: 'Dosis', sans-serif, 'Dosis-SemiBold', 'Dosis SemiBold', 'Roboto';
}

.header_icon,
.pin {
    color: #FFFF;
    grid-area: icon;
    justify-self: start;
    align-self: center;

}

.menu_item {
    color: #ffff;
    text-transform: uppercase;
    font-family: 'Dosis', sans-serif, 'Dosis-SemiBold', 'Dosis SemiBold', 'Roboto';
    font-size: 1em;
}

.menu-2 {
    color: rgb(242, 202, 82);
    font-family: 'Dosis', sans-serif, 'Dosis-SemiBold', 'Dosis SemiBold', 'Roboto';
}

/* Main */

.title {
    grid-area: title_main;
    margin-left: 32px;
    font-family: 'Dosis', sans-serif, 'Dosis-SemiBold', 'Dosis SemiBold', 'Roboto';
    font-size: 5em;
    color: #F2D54D;
}

.subtitle {
    grid-area: sub;
    margin-left: 32px;
    color: #ffff;
    text-transform: uppercase;
    font-family: 'Dosis', sans-serif, 'Dosis-SemiBold', 'Dosis SemiBold', 'Roboto';
    font-size: 2em;
}


.description {
    grid-area: desc;
    margin-left: 32px;
    color: #ffff;
    font-family: 'Dosis', sans-serif, 'Dosis-SemiBold', 'Dosis SemiBold';
    font-size: 1.3em;
    padding-right: 20px;
    line-height: 1.7;
    text-align: justify;
}

.yellow_text {
    color: #F2D54D;
    font-family: 'Dosis SemiBold', 'Dosis-SemiBold', 'Dosis', 'Roboto';
}

/*Why to choose Assister block */

.material_icons {
    max-width: 50px;
    max-height: 50px;
    justify-self: center;
    font-size: 1em;
    font-family: 'Dosis SemiBold', 'Dosis-SemiBold', 'Dosis', 'Roboto';
    color: #FFF;
    text-transform: uppercase;
    align-self: center;
    text-align: center;
}

.material_icons_text {
    justify-self: center;
    font-size: 1em;
    font-family: 'Dosis SemiBold', 'Dosis-SemiBold', 'Dosis', 'Roboto';
    color: #FFF;
    text-transform: uppercase;
    align-self: center;
    text-align: center;
}

.why_assister_title {
    grid-area: title;
    margin: 24px 24px 0px 24px;
    color: #ffff;
    text-transform: uppercase;
    font-family: 'Dosis', 'Dosis-SemiBold', 'Dosis SemiBold', 'Roboto';
    font-size: 2.1em;
}

.yellow_background_text {
    color: #000;
    background-color: #F2D54D;
}

.why_assister_desc {
    grid-area: subtitle;
    margin: 0px 24px 0px 24px;
    color: #ffff;
    text-decoration: none;
    text-align: justify;
    font-family: 'Dosis', 'Dosis-SemiBold', 'Dosis SemiBold', 'Roboto';
    font-size: 1.3em;
    line-height: 1.7;
}

.time {
    grid-area: i1;
}

.fast {
    grid-area: i2;
}

.customizable {
    grid-area: i3;
}

.allinone {
    grid-area: i4;
}

.accessible {
    grid-area: i5;
}

.support {
    grid-area: i6;
}

.text1 {
    grid-area: t1;
}

.text2 {
    grid-area: t2;
}

.text3 {
    grid-area: t3;
}

.text4 {
    grid-area: t4;
}

.text5 {
    grid-area: t5;
}

.text6 {
    grid-area: t6;
}

.section_button {
    grid-area: button;
    place-self: center;
    border-radius: 5px;
    padding: 10px 40px 10px 40px;
    margin: 20px 0px 20px 0px;
    background-color: rgb(233, 191, 65);
    text-decoration: none;
    text-transform: uppercase;
    font-size: 1em;
    font-family: 'Dosis', 'Dosis SemiBold', 'Dosis-SemiBold', 'Roboto';
    text-align: center;
    color: #FFF;
}

.section_button:hover {
    background-color: #DCAF29;
}

/*Assister businesses block */

.businesses_title {
    grid-area: businesses_title;
    justify-self: center;
    text-align: center;
    color: #303741;
    text-transform: uppercase;
    font-family: 'Dosis', 'Dosis-SemiBold', 'Dosis SemiBold', 'Roboto';
    font-size: 2.1em;
}

.apparel {
    grid-area: apparel;
}

.jewellery {
    grid-area: jewellery;
}

.electronics {
    grid-area: electronics;
}

.toys {
    grid-area: toys;
}

.coffee {
    grid-area: coffee;
}

.book {
    grid-area: book;
}

.health {
    grid-area: health;
}

.sport {
    grid-area: sport;
}

.beauty {
    grid-area: beauty;
}

.telco {
    grid-area: telco;
}

.bike {
    grid-area: bike;
}

.manymore {
    grid-area: manymore;
}

.business_type {
    width: 100%;
    max-width: 220px;
    transition: all .2s ease-in-out;
}

.business_type:hover {
    transform: scale(1.1);
}

/*Assister functions block */

.function_details {
    justify-self: start;
    align-self: center;
    font-size: 1.2em;
    font-family: 'Dosis SemiBold', 'Dosis-SemiBold', 'Dosis', 'Roboto';
    color: #333333;
    padding: 30px 0 0 30px;
}

.function_title {
    justify-self: start;
    font-size: 1.5em;
    font-family: 'Dosis SemiBold', 'Dosis-SemiBold', 'Dosis', 'Roboto';
    color: #333333;
    padding: 20px 0 0 0;
}

.functions_text,
.references_text,
.expl,
.technology_text,
.about_text,
.address {
    font-family: 'Dosis', 'Dosis SemiBold', 'Dosis-SemiBold', 'Roboto';
    color: #333333;
    line-height: 1.5;
    font-size: 1.2em;
    text-align: justify;
}

.functions_text {
    padding: 0px 60px 0px 60px;
}

.function_icons {
    padding: 30px 0 0 60px;
}

.feature_button {
    border-radius: 5px;
    padding: 10px 40px 10px 40px;
    margin: 20px 0 70px 0;
    background-color: #30a0ac;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 1em;
    font-family: 'Dosis', 'Dosis SemiBold', 'Dosis-SemiBold', 'Roboto';
    text-align: center;
    place-self: center;
    justify-self: end;
    margin-right: 60px;
    margin-top: 60px;
    color: #FFF;
}

.feature_button:hover {
    background-color: #1E7F91;
}

.function_image,
.sales_image2 {
    grid-area: sales_image2;
    width: 100%;
    max-width: 900px;
    justify-self: start;
}

.sales_image {
    grid-area: sales_image;
    transform: scale(0.9);
}

.sales_title {
    grid-area: sales_title;
    justify-self: start;
}

.sales_text2 {
    grid-area: sales_text2;
    justify-self: start;
}

.sales_text {
    grid-area: sales_text;
    justify-self: start;
}

.sales01 {
    grid-area: sales01;
}

.sales02 {
    grid-area: sales02;
}

.sales03 {
    grid-area: sales03;
}

.sales04 {
    grid-area: sales04;
}

.sales_details01 {
    grid-area: sales_details01;
}

.sales_details02 {
    grid-area: sales_details02;
}

.sales_details03 {
    grid-area: sales_details03;
}

.sales_details04 {
    grid-area: sales_details04;
}

.function_section_button1 {
    grid-area: function_section_button1;
}

.inventory_title {
    grid-area: inventory_title;
    justify-self: start;
}

.inventory_text2 {
    grid-area: inventory_text2;
}

.inventory_text {
    grid-area: inventory_text;
}

.inventory01 {
    grid-area: inventory01;
}

.inventory02 {
    grid-area: inventory02;
}

.inventory03 {
    grid-area: inventory03;
}

.inventory04 {
    grid-area: inventory04;
}

.inventory05 {
    grid-area: inventory05;
}

.inventory06 {
    grid-area: inventory06;
}

.inventory_details01 {
    grid-area: inventory_details01;
}

.inventory_details02 {
    grid-area: inventory_details02;
}

.inventory_details03 {
    grid-area: inventory_details03;
}

.inventory_details04 {
    grid-area: inventory_details04;
}

.inventory_details05 {
    grid-area: inventory_details05;
}

.inventory_details06 {
    grid-area: inventory_details06;
}

.function_section_button2 {
    grid-area: function_section_button2;
    justify-self: start;
    margin-left: 50px;
}

.org_title {
    grid-area: org_title;
    justify-self: start;
}

.org_image2 {
    grid-area: org_image2;
}

.org_image {
    grid-area: org_image;
    transform: scale(0.9);
}

.organization_text2 {
    grid-area: org_text2;
    margin-right: 40px;
}

.organization_text {
    grid-area: org_text;
}

.org01 {
    grid-area: org01;

}

.org02 {
    grid-area: org02;
}

.org03 {
    grid-area: org03;
}

.org04 {
    grid-area: org04;
}

.org_details01 {
    grid-area: org_details01;
}

.org_details02 {
    grid-area: org_details02;
}

.org_details03 {
    grid-area: org_details03;
}

.org_details04 {
    grid-area: org_details04;
}

.function_section_button3 {
    grid-area: function_section_button3;
}

.performance_image2 {
    grid-area: performance_image2;
}

.performance_image {
    grid-area: performance_image;
    transform: scale(0.9);
}

.performance_title {
    grid-area: performance_title;
    align-items: start;
}

.performance_text2 {
    grid-area: performance_text2;
}

.performance_text {
    grid-area: performance_text;
}


.performance01 {
    grid-area: performance01;
}

.performance02 {
    grid-area: performance02;
}

.performance03 {
    grid-area: performance03;
}

.performance04 {
    grid-area: performance04;
}

.performance_details01 {
    grid-area: performance_details01;
}

.performance_details02 {
    grid-area: performance_details02;
}

.performance_details03 {
    grid-area: performance_details03;
}

.performance_details04 {
    grid-area: performance_details04;
}

.function_section_button4 {
    grid-area: function_section_button4;
}

.assister_functions_title,
.references_title,
.technology_title,
.about_title,
.get_in_touch,
.technology_title_02 {
    grid-area: feature_title;
    color: #303741;
    text-transform: uppercase;
    font-family: 'Dosis', 'Dosis-SemiBold', 'Dosis SemiBold', 'Roboto';
    font-size: 2.1em;
    text-align: center;
}

.blue_background_text {
    color: #FFF;
    background-color: #30a0ac;
}

/*Assister references block */

.mt_logo {
    grid-area: mt_logo;
    width: auto;
}

.num {
    font-size: 1.4em;
    font-family: 'Dosis SemiBold', 'Dosis-SemiBold', 'Dosis', 'Roboto';
    color: #333333;
    align-self: center;
    place-self: center;
    text-align: center;
}

.line {
    border-left: 1.2px solid #333333;
    justify-self: start;
    margin-top: 16px;
}


.v1 {
    grid-area: 1/3/3/3;

}

.v2 {
    grid-area: 1/4/3/4;
}

.v3 {
    grid-area: 1/5/3/5;
}

.references_title {
    grid-area: references_title;
}

.references_text {
    grid-area: references_text;
    text-align: justify;
}

.logo1 {
    grid-area: logo1;
}

.logo2 {
    grid-area: logo2;
}

.logo3 {
    grid-area: logo3;
}

.logo4 {
    grid-area: logo4;
}

.num1 {
    grid-area: num1;
}

.num2 {
    grid-area: num2;
}

.num3 {
    grid-area: num3;
}

.num4 {
    grid-area: num4;
}

.expl1 {
    grid-area: expl1;
}

.expl2 {
    grid-area: expl2;
}

.expl3 {
    grid-area: expl3;
}

.expl4 {
    grid-area: expl4;
}

/*Assister technology block */

.technology_title {
    grid-area: tech_title;
    justify-self: center;
    color: #FFFF;
    margin-top: 60px;
}

.technology_text {
    grid-area: tech_text;
    color: #FFFF;
}

.technology_title_02 {
    grid-area: technology_title_02;
    color: #FFFF;
    font-size: 1.8em;
}

.tech_image {
    grid-area: tech_image;
    justify-self: center;
    transform: scale(0.7);
}

.tech_button {
    grid-area: tech_button;
    justify-self: start;
    margin: 0 0 20px 0;
}

/*About us block */

.about_title {
    grid-area: about_title;
    color: #FFFF;
    justify-self: start;
}

.about_text {
    grid-area: about_text;
    color: #FFFF;
}

.get_in_touch {
    grid-area: get_in_touch;
    justify-self: start;
    color: #FFFF;
}


.name {
    color: #F2D54D;
    justify-self: start;
    font-size: 1.5em;
    margin-bottom: 0px;
    font-family: 'Dosis SemiBold', 'Dosis-SemiBold', 'Dosis', 'Roboto';
}

.position {
    font-size: 1.2em;
    color: #FFF;
    justify-self: start;
    margin-top: 5px;
    font-family: 'Dosis SemiBold', 'Dosis-SemiBold', 'Dosis', 'Roboto';
}

.email,
.phone {
    font-size: 1em;
    color: #FFF;
    justify-self: start;
    margin-top: 0px;
    font-family: 'Dosis', 'Dosis SemiBold', 'Dosis-SemiBold', 'Roboto';
    text-decoration: none;
}


.name01 {
    grid-area: name01;
}

.name02 {
    grid-area: name02;
}

.position01 {
    grid-area: position01;
}

.position02 {
    grid-area: position02;
}

.email01 {
    grid-area: email01;
}

.email02 {
    grid-area: email02;
}

.phone01 {
    grid-area: phone01;
}

.phone02 {
    grid-area: phone02;
}

/*Footer block */


.footer-logo {
    grid-area: footer_logo;
    width: 180px;
    padding: 5px;
    margin-left: 48px;
    justify-self: start;
    align-self: center;
}

.pin {
    grid-area: pin;
    justify-self: end;
    margin-right: 20px;
}

.brand-link {
    align-self: center;
}

.address {
    grid-area: address;
    color: #FFFF;
    font-size: 1em;
}

.linkedin {
    grid-area: linkedin;
    justify-self: end;
    margin-right: 20px;
}

.facebook {
    grid-area: facebook;
}