@import "_mixins";

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

    a.read-more {
        font-size: 12px !important;
        &:before {
            width: 30px !important;
            height: 30px !important;
            line-height: 28px !important;
            margin-right: 15px !important;
        }
    }

    .fancy-bg {
        min-height: 35px;
    }

    header {
        background: rgba(251,251,251,1);
        .logo {
            width: 100px;
            margin: 15px 0;
            img {
                height: auto;
            }
        }
        .navbar-toggler {
            position: absolute;
            top: -55px;
            right: 0;
            display: block;
            width: 24px;
            height: 24px;
            border: 0;
            border-radius: 0;
            color: $red;
            padding: 0;
            font-size: 24px;
            &:focus {
                outline: none;
            }
        }
        .primary-menu {
            margin: 0;
            nav {
                font-size: 14px;
                line-height: 28px;
                .collapse {
                    display: none;
                    &.show {
                        display: block;
                    }
                }
                .navbar-toggleable-sm {
                    -webkit-transition: all 0.5s;
                    -moz-transition: all 0.5s;
                    -ms-transition: all 0.5s;
                    -o-transition: all 0.5s;
                    transition: all 0.5s;
                    .nav {
                        float: none !important;
                        margin: 0 0 10px;
                        li {
                            margin: 0;
                            a {
                                line-height: 28px;
                                display: block;
                                padding: 0 10px !important;
                                &:hover {
                                    background: $red;
                                    color: #fff;
                                    &:after {
                                        display: none;
                                    }
                                }
                            }
                            &.active {
                                a {
                                    background: $red;
                                    color: #fff;
                                    &:after {
                                        display: none;
                                    }
                                }
                            }
                            ul {
                                width: 100%;
                                position: static;
                                background: rgba(0,0,0,0.1);
                                li {
                                    background: none;
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    .hero-banner.video-banner {
        margin-top: 95px;
        max-height: none;
        height: 320px;
        video {
            top: 0;
            height: 100%;
            width: auto;
        }
        h1 {
            margin: 80px 0 35px;
            font-size: 22px;
        }
    }

    .goals-wrap {
        h2 {
            font-size: 22px;
            margin: 0 0 25px;
        }
        p {
            font-size: 12px;
            line-height: 20px;
        }
    }

    .solutions-wrap {
        padding: 50px 0 20px;
        h2 {
            font-size: 22px;
            margin: 0 0 25px;
        }
        .solution-box {
            border: none !important;
            padding: 0;
            margin: 0 0 25px;
            .custom-icon {
                margin-bottom: 20px;
            }
            h3 {
                min-height: 0;
                line-height: 20px;
                font-size: 16px;
                margin: 0 0 20px;
            }
            p {
                font-size: 12px;
                min-height: 0;
                height: auto;
                line-height: 24px;
                margin: 0 0 20px;
            }
            a {
                font-size: 12px;
            }
        }
    }

    .about-wrap {
        background-size: auto 475px !important;
        background-repeat: no-repeat;
        background-position: right bottom !important;
        background-color: #fff;
        .our-company {
            padding: 0 25px;
            margin: 0 0 40px;
            h2 {
                font-size: 22px;
                margin: 35px 0 25px;
            }
            p {
                font-size: 12px;
                line-height: 20px;
                padding: 0;
                margin: 0 0 20px;
            }
            a {
                font-size: 12px;
            }
        }
        .insight-wrap {
            margin: 40px 0 0;
            .insight {
                margin: 15px;
                padding: 20px;
                img {
                    max-width: 100%;
                    margin: 0 0 40px;
                }
                .download-btn {
                    float: none;
                    margin: 20px 0 0;
                }
            }
        }
    }

    .peoples-wrap {
        padding: 50px 0 40px;
        h2 {
            font-size: 22px;
            margin: 0 0 30px;
        }
        .slick-dots {
            padding: 0;
            margin: 30px 0 0;
            list-style: none;
            line-height: 7px;
            li {
                display: inline-block;
                width: 10px;
                height: 10px;
                background: #ccc;
                text-indent: -9999px;
                border-radius: 50%;
                margin: 0 2px;
                &.slick-active {
                    background: $red;
                }
            }
        }
        .peoples-text-slider {
            h3 {
                font-size: 20px;
            }
            h6 {
                margin: 0;
            }
            p {
                padding: 0;
                font-size: 12px;
                margin: 0 0 25px;
            }
        }
    }

    .news-wrap {
        padding: 50px 0 40px;
        h2 {
            font-size: 22px;
            margin: 0 0 25px;
        }
        .post {
            padding: 0;
            margin: 0 0 15px;
            figure {
                width: 40%;
                margin: 0 15px 0 0;
                img {
                    width: 100%;
                }
            }
            .content {
                padding: 0 15px 0 0;
                .date {
                    font-size: 10px;
                    margin: 10px 0 5px;
                }
                h5 {
                    font-size: 12px;
                    margin: 0 0 5px;
                    line-height: 18px;
                    height: 52px;
                    text-overflow: ellipsis;
                    overflow: hidden;
                }
                a.read-more {
                    font-size: 10px !important;
                    &:before {
                        display: none;
                    }
                }
            }
        }
    }

    .inner-banner {
        height: 115px;
        margin-top: 93px;
        h1 {
            padding-top: 50px;
            font-size: 18px;
        }
    }

    footer {
        .widget {
            .nav-flat {
                font-size: 10px;
                line-height: 20px;
            }
            .nav-social {
                float: left;
                margin-bottom: 20px;
            }
        }
    }

    .link-blocks-wrap {
        padding: 35px 0 10px;
        .block {
            margin-bottom: 30px;
            img {
                width: 40%;
                margin-right: 20px;
            }
            h5 {
                font-size: 16px;
                margin-bottom: 30px;
            }
        }
    }

    .bottom-blocks-wrap {
        .block {
            padding: 25px;
            img {
                max-width: 100%;
            }
            h6 {
                font-size: 16px;
                margin-left: 0;
            }
            p {
                font-size: 14px;
            }
            .read-more {
                margin-left: 0;
            }
        }
    }
    header .primary-menu .mobile-lang {
        display: block;
    }

}