@import url('https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i');


select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none; /* Remove default arrow */
    background-image: url(...); /* Add custom arrow */
    background-image: url(../images/menu-arrow.png);
    background-repeat: no-repeat;
    background-position: 95% center;
}


body, html {
    height: 100%;
}

body {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    background-color: #fff;
    color: #666;
    line-height: 28px;
    margin: 0px;
    font-weight: 400;
    overflow-x: hidden;
}

html {
    scroll-behavior: smooth;
}

a {
    transition: all 0.5s ease-in 0s;
    text-decoration: none;
    outline: none;
}

    a:focus, a:active, a, focus, select {
        border: 0px;
        outline: none;
    }

.clear {
    clear: both;
}

p {
    margin-top: 0px;
    text-align: justify;
}

img {
    border: 0px;
}

form {
    margin: 0px;
}

input {
    outline: none;
}

* {
    box-sizing: border-box;
}

h2 {
    font-size: 36px;
    color: #2b2e4b;
    text-align: center;
    margin: 40px 0px 20px 0px;
}

    h2:after {
        display: block;
        width: 40px;
        height: 2px;
        content: '';
        background-image: url(../images/gradient.png);
        background-size: 100% 100%;
        margin: 20px auto;
    }

h3 {
    font-size: 30px;
    color: #2b2e4b;
    text-align: left;
    margin: 20px 0px 20px 0px;
    font-weight: 300;
    line-height: 36px;
}

.box-content h3 {
    font-size: 16px;
    font-weight: 700;
}

.hline {
    border-bottom: 1px solid #ddd;
    padding-top: 40px;
}





/* Header */

header.darker, header {
    position: fixed;
    z-index: 100;
    left: 0px;
    top: 0px;
    background-color: #fff;
}


    header.darker .logo img {
        width: 150px;
    }

header {
    display: table;
    width: 100%;
}

    header.darker .user-option {
        margin-top: 13px;
    }

    header.darker .search {
        margin-top: 8px;
    }

    header.darker .searchtextbox {
        padding: 8px 20px;
    }

    header.darker .signup {
        margin-top: 20px;
    }

.top-stripe {
    width: 100%;
    display: table;
    background-color: #f1f1f1;
    transition: all 0.5s ease-in 0s;
    height: 38px;
}

.top-left-links {
    margin: 0px;
    padding: 0px;
    display: inline-block;
}

    .top-left-links li {
        list-style: none;
        padding: 5px 10px;
        color: #2b2f4c;
        font-weight: 600;
    }

.top-right-links {
    margin: 8px 20px 0px 0px;
    padding: 0px;
    float: right;
}

    .top-right-links li {
        list-style: none;
        color: #2b2f4c;
        display: inline-block;
        margin-left: 10px;
    }

        .top-right-links li a {
            color: #2b2f4c;
            float: left;
            font-size: 12px;
            border-bottom: 1px solid #2b2f4c;
            line-height: 13px;
        }

.gradient-line {
    width: 100%;
    height: 2px;
    display: block;
}

.logo {
    display: inline-block;
    float: left;
    margin: 10px;
    transition: all 0.5s ease-in 0s;
}

    .logo a, .logo img {
        display: block;
        transition: all 0.5s ease-in 0s;
    }

    .logo img {
        display: block;
        transition: all 0.5s ease-in 0s;
        width: 195px;
    }

.top-navigation {
    display: table;
    width: 100%;
    background-color: #2b2e4b;
    transition: all 0.5s ease-in 0s;
}

    .top-navigation a:hover {
        background-color: #070924;
    }

.signup {
    display: inline-block;
    float: right;
    margin-right: 20px;
    margin-top: 30px;
    transition: all 0.5s ease-in 0s;
}

    .signup a {
        border-radius: 100px;
        background-image: url(../images/gradient.png);
        background-size: 100% 100%;
        padding: 10px 20px;
        color: #fff;
    }

.search {
    display: inline-block;
    float: right;
    margin-top: 12px;
    width: 62%;
    margin-right: 5%;
    transition: all 0.5s ease-in 0s;
}

.searchtextbox {
    background-color: #f1f1f1;
    border: 0px;
    padding: 10px 20px;
    font-size: 24px;
    font-family: poppins;
    font-weight: 200;
    border-radius: 100px;
    width: 100%;
    background-image: url(../images/lens.png);
    background-size: 21px 21px;
    background-repeat: no-repeat;
    background-position: 98% center;
    font-weight: 300;
    transition: all 0.5s ease-in 0s;
}

.header-gap {
    width: 100%;
    height: 170px;
    background: #2b2e4b;
}

/* Header */








/* Banner */

.home-banner1 {
    width: 100%;
    height: 412px;
    background-image: url(../images/homepage-banner1.jpg);
    background-size: cover !important;
    background-position: center center;
}

.home-banner2 {
    width: 100%;
    height: 412px;
    background-image: url(../images/homepage-banner2.jpg);
    background-size: cover !important;
    background-position: center center;
}

.home-banner3 {
    width: 100%;
    height: 412px;
    background-image: url(../images/homepage-banner3.jpg);
    background-size: cover !important;
    background-position: center center;
}

.home-banner4 {
    width: 100%;
    height: 412px;
    background-image: url(../images/homepage-banner4.jpg);
    background-size: cover !important;
    background-position: center center;
}

.home-banner5 {
    width: 100%;
    height: 412px;
    background-image: url(../images/homepage-banner5.jpg);
    background-size: cover !important;
    background-position: center center;
}

.banner-text {
    color: #fff;
    font-size: 36px;
    font-weight: 700;
    width: 600px;
    line-height: 125%;
    padding: 110px 90px;
}


.colorful-sticker-text {
    width: 880px;
    border: 0px solid red;
    margin: auto;
}

.small-sticker-text {
    display: inline-block;
    width: 190px;
    border: 0px solid red;
    height: 160px;
    margin: 60px 18px 0px 15px;
    overflow: hidden;
    color: #000;
    font-size: 13px;
    line-height: 140%;
    float: left;
}

    .small-sticker-text:last-child {
        margin-right: 0px;
    }

.sticker-test {
    width: 1080px;
    border: 0px solid red;
    margin: auto;
}

.sticker-text1 {
    display: inline-block;
    float: left;
    margin-top: 70px;
    width: 45%;
    margin-left: 20px;
    text-align: center;
    height: 150px;
    overflow: hidden;
    color: #000;
    font-size: 13px;
    line-height: 160%;
}

.sticker-text2 {
    display: inline-block;
    float: right;
    margin-top: 70px;
    width: 45%;
    margin-right: 20px;
    text-align: center;
    height: 150px;
    overflow: hidden;
    color: #000;
    font-size: 13px;
    line-height: 160%;
}



.blog-banner1 {
    width: 100%;
    height: 290px;
    background-image: url(../images/blog-banner-a.jpg);
    background-size: cover;
    background-position: center center;
}

.blog-banner2 {
    width: 100%;
    height: 290px;
    background-image: url(../images/blog-banner-b.jpg);
    background-size: cover;
    background-position: center center;
}

.blog-banner3 {
    width: 100%;
    height: 290px;
    background-image: url(../images/blog-banner-c.jpg);
    background-size: cover;
    background-position: center center;
}

#sliderh4 .banner-text {
    color: #fff;
    font-size: 36px;
    font-weight: 700;
    width: 600px;
    line-height: 125%;
    padding: 70px;
}

#sliderh4 .slider .slide {
    display: block;
    position: relative;
    float: left;
    height: 290px !important;
}

/* Banner */






/* Lastest News */

.lastest-news {
    width: 50%;
    padding: 40px;
    float: left;
    background-color: #eee;
    border-right: 1px solid #ccc;
    height: 680px;
}

    .lastest-news ul {
        margin: 0px;
        padding: 0px;
    }

    .lastest-news li {
        margin: 0px;
        padding: 0px;
        list-style: none;
        margin-bottom: 20px;
        display: table;
        width: 100%;
    }

        .lastest-news li a {
            display: block;
        }

            .lastest-news li a img {
                float: left;
                margin-right: 20px;
            }

        .lastest-news li h4 {
            margin: 0px;
            font-size: 18px;
            font-weight: 700;
            color: #2b2e4b;
            line-height: 120%;
        }

        .lastest-news li p {
            line-height: 140%;
            color: #666;
        }

.date {
    font-size: 12px;
    color: #666;
}

    .date a {
        color: #c01d4e !important;
        font-weight: 400;
        display: inline-block !important
    }



.news {
}

    .news ul {
        margin: 0px;
        padding: 0px;
    }

    .news li {
        margin: 0px;
        padding: 0px;
        list-style: none;
        margin-bottom: 20px;
        display: table;
        width: 50%;
        float: left;
        padding: 15px;
    }

        .news li a {
            display: block;
        }

            .news li a img {
                float: left;
                margin-right: 20px;
            }

        .news li h4 {
            margin: 0px;
            font-size: 18px;
            font-weight: 700;
            color: #2b2e4b;
            line-height: 120%;
        }

        .news li p {
            line-height: 140%;
            color: #666;
        }

.date {
    font-size: 12px;
    color: #666;
}

    .date a {
        color: #c01d4e !important;
        font-weight: 400;
        display: inline-block !important
    }

/* Lastest News */







/* Sponsors */

.sponsors {
    width: 50%;
    padding: 40px;
    float: right;
    background-color: #eee;
    height: 680px;
}

    .sponsors img {
        width: 100%;
    }

    .lastest-new h2, .sponsors h2 {
        text-align: left;
    }

        .lastest-new h2:after, .sponsors h2:after {
            margin: 20px 0px;
        }

    .sponsors ul {
        margin: 0px;
        padding: 0px;
    }

        .sponsors ul li {
            float: left;
            display: inline-block;
            list-style: none;
            margin: 16px;
            float: left;
        }

/* Sponsors */



/* Inside Banner  */

.inside-page {
    width: 100%;
    height: 100px;
    background-size: cover;
    background-position: center bottom;
}

    .inside-page .banner-text {
        padding: 25px;
    }

    .inside-page strong {
        font-weight: 700;
        display: inline-block;
        float: left;
        margin-right: 20px;
    }

    .inside-page p {
        text-align: left;
        font-size: 14px;
        text-transform: uppercase;
        font-weight: 500;
        letter-spacing: 2px;
        display: inline-block;
        float: left;
    }

.blog-big-banner {
    width: 100%;
    height: 290px;
    background-size: cover;
    background-position: center bottom;
}

    .blog-big-banner strong {
        font-weight: 700;
        display: block;
    }

    .blog-big-banner p {
        text-align: left;
        font-size: 14px;
        text-transform: uppercase;
        font-weight: 500;
        letter-spacing: 2px;
    }

    .blog-big-banner .banner-text {
        padding: 100px 50px;
    }

.fullsize {
    width: 100%;
}

/* Inside Banner  */





/* Inside Content Area  */

.inside-left-panel {
    width: calc(100% - 300px);
    display: inline-block;
    float: left;
    padding: 20px;
}

    .inside-left-panel .blog-box {
        width: 19%;
        margin: .5%;
        float: left;
        border: 1px solid #eee;
        background-color: #fff;
        box-shadow: 0px 0px 5px 0px #ddd;
    }

        .inside-left-panel .blog-box img {
            display: block;
            width: 100%;
        }

        .inside-left-panel .blog-box div {
            display: block;
            padding: 20px;
        }

        .inside-left-panel .blog-box h3 {
            line-height: 140%;
            margin: 0px;
            color: #2b2e4b;
        }

            .inside-left-panel .blog-box h3:before {
                margin-right: 16px;
                display: inline-block;
                float: left;
                margin-left: -20px;
                background-image: url(../images/gradient2.png);
                background-size: 100% 100%;
                content: '';
                width: 3px;
                height: 25px;
            }

.inside-right-panel {
    width: 300px;
    display: inline-block;
    float: right;
    padding: 20px 20px 20px 0px;
}





.tutorials-left-panel {
    width: 300px;
    display: inline-block;
    float: left;
    padding: 20px 0px 20px 20px;
}

.tutorials-right-panel {
    width: calc(100% - 300px);
    display: inline-block;
    float: right;
    padding: 20px;
}

.tutorial-advt-panel {
    width: 300px;
    display: inline-block;
    float: right;
    padding: 20px 20px 20px 0px;
}

.tutorial-middle-panel {
    width: calc(100% - 600px);
    display: inline-block;
    float: left;
    padding: 20px;
}

    .tutorial-middle-panel h5 {
        font-size: 18px;
        font-weight: 500;
        color: #000;
        margin: 10px 0px;
    }

    .tutorial-middle-panel ul {
        margin: 0px 0px 0px 20px;
        padding: 0px;
    }

    .tutorial-middle-panel li {
        list-style: disc;
        padding-left: 10px;
    }




#t-container {
    width: 100%;
}

.cols {
    column-count: 3;
    column-gap: 1.5%;
    column-width: 30%;
}


.box {
    margin-bottom: 20px;
    background-color: #eee;
    border-radius: 10px;
    display: table;
    width: 100%;
    padding: 20px;
}

    .box ul {
        margin: 0px;
        padding: 0px;
    }

    .box li {
        list-style: none;
    }

        .box li a {
            color: #2b2e4b;
        }

            .box li a:hover {
                padding-left: 10px;
            }

    .box h4 {
        font-size: 18px;
        color: #2b2e4b;
        margin: 0px;
    }

        .box h4::after {
            display: block;
            width: 30px;
            height: 2px;
            content: '';
            background-image: url(../images/gradient.png);
            background-size: 100% 100%;
            margin: 10px 0px;
        }



.comment-box-bottom {
    border: 1px solid #ccc;
    padding: 10px;
    display: table;
    width: 100%;
}

    .comment-box-bottom img {
        float: left;
        border-radius: 1000px;
        margin-right: 20px;
        width: 55px;
    }

.comment-textbox {
    border-radius: 100px;
    border: 0px;
    background-color: #eee;
    padding: 15px;
    width: 60%;
    margin-top: 2px;
    font-family: poppins;
    font-size: 14px;
    color: #666;
}

.add-comment {
    border: 0px;
    padding: 15px 30px;
    border-radius: 100px;
    background-image: url(../images/gradient.png);
    background-size: 100% 100%;
    font-family: poppins;
    font-size: 14px;
    color: #fff;
    margin-left: 10px;
}






.post-button a {
    width: 100%;
    display: block;
    color: #fff;
    font-weight: 500;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    background-image: url(../images/gradient.png);
    background-size: 100% 100%;
    padding: 10px;
    border-radius: 100px;
}

.categories {
    margin: 0px;
    padding: 0px;
}

    .categories li {
        list-style: none;
        display: block;
        border-top: 1px solid #ccc;
    }

        .categories li:last-child {
            border-bottom: 1px solid #ccc;
        }

        .categories li a {
            display: block;
            padding: 5px 0px;
            font-weight: 300;
        }

            .categories li a span {
                display: inline-block;
                float: right;
            }

            .categories li a:hover {
                background-color: #2b2e4b;
                color: #2b2e4b;
                background-color: #eee;
                padding: 5px;
            }

    .categories input {
        margin: 12px 5px;
    }

.tag-coulds {
    margin: 0px;
    padding: 0px;
}

    .tag-coulds li {
        list-style: none;
        display: inline-block;
        float: left;
        margin: 2px;
    }

        .tag-coulds li a {
            display: block;
            padding: 5px 8px;
            background-color: #eee;
            font-weight: 300;
        }

            .tag-coulds li a:hover {
                background-color: #2b2e4b;
                color: #fff;
            }

.right-panel-heading {
    font-weight: 20px;
    color: #2b2e4b;
    text-transform: uppercase;
    font-size: 18px;
    font-weight: 700;
}

    .right-panel-heading::after {
        display: block;
        width: 30px;
        height: 2px;
        content: '';
        background-image: url(../images/gradient.png);
        background-size: 100% 100%;
        margin: 5px 0px;
    }

.recent-post-box {
    display: block;
    border-bottom: 1px solid #ccc;
    padding: 10px 0px 20px 0px;
    margin-bottom: 10px;
}

    .recent-post-box img {
        float: left;
        width: 60px;
        margin-right: 10px;
    }

    .recent-post-box h5 {
        margin: 0px;
        color: #2b2e4b;
        font-size: 16px;
        line-height: 120%;
    }

    .recent-post-box p {
        margin: 0px;
        text-align: left;
        line-height: 130%;
    }

    .recent-post-box a {
        display: block;
    }



.relevant-tutorial-box {
    display: block;
    border-bottom: 1px solid #ccc;
    padding: 10px 0px 20px 0px;
    margin-bottom: 10px;
}

    .relevant-tutorial-box img {
        float: left;
        width: 60px;
        margin-right: 10px;
    }

    .relevant-tutorial-box h5 {
        margin: 0px;
        color: #2b2e4b;
        font-size: 16px;
        line-height: 120%;
        font-weight: 600;
    }

    .relevant-tutorial-box p {
        margin: 0px;
        text-align: left;
        line-height: 130%;
    }

    .relevant-tutorial-box a {
        display: block;
    }



/* Inside Content Area  */





/* Comment */

.textbox1 {
    font-family: poppins;
    font-size: 14px;
    border-radius: 5px;
    border: 1px solid #ddd;
    background-color: #f7f7f7;
    padding: 10px;
    width: 100%;
    float: left;
    margin-right: 1%;
    margin-bottom: 1%;
}

.textbox2 {
    font-family: poppins;
    font-size: 14px;
    border-radius: 5px;
    border: 1px solid #ddd;
    min-height: 100px;
    background-color: #f7f7f7;
    padding: 10px;
    width: 100%;
    float: left;
    margin-right: 1%;
    margin-bottom: 1%;
}

.textbox1.last {
    margin-right: 0px;
}

.submit-button {
    border: 0px;
    border-radius: 100px;
    font-family: poppins;
    font-size: 14px;
    background-image: url(../images/gradient.png);
    background-size: 100% 100%;
    padding: 10px 40px;
    color: #fff;
}

.blue.right-links {
    color: #1297e3 !important;
    border-bottom: 1px solid #1297e3 !important;
    float: right;
}

.comment-box {
    display: table;
    width: 100%;
    margin-bottom: 30px;
}

.face {
    display: inline-block;
    width: 10%;
    float: left;
}

    .face img {
        display: block;
        margin: auto;
        border-radius: 1000px;
        width: 80px;
    }

    .face span {
        display: block;
        margin: auto;
        text-align: center;
        color: #2b2e4b;
        font-weight: 500;
    }

.comment {
    border-radius: 10px;
    width: 90%;
    float: right;
    background-color: #f1f1f1;
    border-radius: 10px;
    padding: 20px;
    font-family: Georgia;
    font-style: italic;
    font-size: 16px;
    line-height: 150%
}

    .comment:before {
        width: 0;
        height: 0;
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        border-right: 10px solid #f1f1f1;
        content: '';
        position: absolute;
        margin-left: -30px;
        margin-top: .8%;
    }

    .comment em {
        display: block;
        font-style: normal;
        font-family: poppins;
    }

.sharing-buttons {
    display: table;
    width: 100%;
}

    .sharing-buttons a {
        display: inline-block;
        margin-right: 5px;
    }

        .sharing-buttons a img {
            display: block;
        }

/* Comment */






/* Questions */

.question-box .question {
    background-color: #2a2d4a;
    color: #fff;
    padding: 20px;
    display: block;
    font-size: 20px;
    font-weight: 700;
}

    .question-box .question em {
        display: block;
        font-weight: 700;
        font-style: normal;
        text-transform: uppercase;
        font-size: 14px;
    }

    .question-box .question:after {
        display: inline-block;
        float: left;
        margin-top: 47px;
        margin-left: 20px;
        content: '';
        width: 0px;
        height: 0px;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-top: 10px solid #2a2d4a;
        position: absolute;
        left: 0;
    }

.question-box .answer {
    background-color: #fff;
    color: #666;
    padding: 20px;
    display: block;
    font-size: 14px;
    line-height: 160%;
    font-weight: 400;
}

    .question-box .answer em {
        display: block;
        font-weight: 500;
        font-style: normal;
        text-transform: uppercase;
        font-size: 14px;
        color: #bf1d4e;
    }

    .question-box .answer a {
        color: #2a2d4a;
    }

.question-left-panel {
    width: 300px;
    display: inline-block;
    float: left;
    padding: 20px 0px 20px 20px;
}

    .question-left-panel .right-panel-heading:first-child, .question-middle-panel .right-panel-heading:first-child {
        margin-top: 0px;
    }

.question-middle-panel {
    width: calc(100% - 300px);
    display: inline-block;
    float: left;
    padding: 20px 30px 20px 30px;
}

.question-middle {
    display: block;
    font-weight: 600;
    padding: 10px 15px;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    background-image: url(../images/small-arrow.png);
    background-repeat: no-repeat;
    background-position: 98% center;
}

    .question-middle:hover {
        box-shadow: 0px 0px 10px 0px #ccc;
    }

.relevent-questions {
    margin: 0px;
    padding: 0px;
}

    .relevent-questions li {
        list-style: none;
        line-height: 130%;
        font-weight: 700;
        font-size: 15px;
        border-top: 1px solid #ccc;
    }

        .relevent-questions li a {
            color: #2b2e4b;
            display: block;
            padding: 15px 0px;
        }

            .relevent-questions li a:hover {
                background-color: #f7f7f7;
                padding: 15px 5px;
            }

.detail-question {
    font-weight: 600;
    margin-top: 0px;
    font-size: 24px;
}

.add-question {
    background-color: #eee;
    padding: 20px;
    margin-bottom: 20px;
    display: table;
    width: 100%;
}

.question-search-box {
    border: 1px solid #ddd;
    border-radius: 100px;
    padding: 10px;
    font-family: poppins;
    width: 75%;
    float: left;
    margin-right: 20px;
    color: #666;
}

.add-question h4 {
    margin: 0px 0px 5px 0px;
    font-weight: 400;
    color: #2b2e4b;
    font-size: 20px;
}

#add-question-button {
    width: 20%;
    float: left;
    cursor: pointer;
}


.middle-and-right {
    display: table;
    width: calc(100% - 300px);
    float: right;
}


.question-details-box {
    border: 1px solid #ccc;
    padding: 15px;
    margin-bottom: 15px;
}

.source {
    display: table;
    width: 100%;
}

    .source strong {
        font-weight: 700;
    }

    .source a {
        color: #1469c9;
        font-weight: 300;
    }

.cross {
    float: right;
    display: inline-block;
}

.question-details-head {
    display: table;
    width: 100%;
}

    .question-details-head .face {
        float: left;
        border-radius: 100px;
        width: 60px;
        border: 3px solid #ccc;
        margin-right: 10px;
    }

.answer-line {
    font-size: 12px;
    display: block;
    margin-bottom: 10px;
}

    .answer-line a {
        border-bottom: 1px solid #ccc;
    }

.answer-person-name {
    color: #000;
}

.question-details-footer {
    display: table;
    width: 100%;
    padding: 15px 0px 10px 0px;
    padding-top: 15px;
    border-top: 1px solid #ccc;
    margin-top: 20px;
}

    .question-details-footer a {
        display: inline-block;
        float: left;
        margin-right: 10px;
        line-height: 20px;
        margin-right: 20px;
    }

        .question-details-footer a img {
            float: left;
            margin-right: 5px;
        }

    .question-details-footer .float-right {
        float: right;
        margin-left: 20px;
        margin-right: 0px;
    }

/* Questions */








/* Footer */

footer {
    display: table;
    width: 100%;
    background-color: #05050a;
    padding: 20px;
    color: #999;
}

.footer-column {
    width: 25%;
    float: left;
    padding-right: 30px;
}

    .footer-column a {
        color: #999;
    }

    .footer-column p {
        text-align: left;
    }

    .footer-column h5 {
        color: #fff;
        font-weight: 400;
        font-size: 20px;
        margin-bottom: 0px;
    }

        .footer-column h5:after {
            display: block;
            width: 40px;
            height: 2px;
            content: '';
            background-image: url(../images/gradient.png);
            background-size: 100% 100%;
            margin: 20px 0px;
        }

    .footer-column ul {
        margin: 0px;
        padding: 0px;
    }

    .footer-column li {
        list-style: none;
        font-size: 13px;
    }

footer a:hover {
    padding-left: 10px;
    color: #fff;
}

.copyright {
    display: inline-block;
    float: left;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 2px;
}

.social-media {
    display: inline-block;
    float: right;
    margin-right: 60px;
}

    .social-media ul {
        margin: 0px;
        padding: 0px;
    }

    .social-media li {
        list-style: none;
        float: left;
        margin-left: 10px;
    }

        .social-media li a {
            display: inline-block;
            border-radius: 100px;
            opacity: 0.5;
            width: 40px;
            height: 40px;
            background-image: url(../images/gradient.png);
            background-size: 100% 100%;
            background-repeat: no-repeat;
            background-position: 60px 0px;
            text-align: center;
            padding-top: 7px;
            transition: all 0.5s ease-in 0s;
        }

            .social-media li a:hover {
                background-image: url(../images/gradient.png);
                background-size: 100% 100%;
                background-position: 110% 0px;
                padding-left: 0px;
                transition: all 0.5s ease-in 0s;
                opacity: 1.0;
            }

/* Footer */














/* Scrolling Button */
html {
    scroll-behavior: smooth;
}

body {
    position: relative;
}



.scrolltop-wrap {
    box-sizing: border-box;
    position: absolute;
    top: 12rem;
    right: 1rem;
    bottom: 0;
    pointer-events: none;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

    .scrolltop-wrap #scrolltop-bg {
        fill: transparent;
    }

    .scrolltop-wrap #scrolltop-arrow {
        fill: white;
    }

    .scrolltop-wrap a:hover #scrolltop-bg {
        fill: transparent;
    }

    .scrolltop-wrap a:hover #scrolltop-arrow {
        fill: #fff;
    }

@supports (-moz-appearance: meterbar) {
    .scrolltop-wrap {
        clip: rect(0, 3rem, auto, 0);
    }
}

.scrolltop-wrap a {
    position: fixed;
    position: -webkit-sticky;
    position: sticky;
    top: -4rem;
    width: 3rem;
    height: 3rem;
    margin-bottom: -5rem;
    -webkit-transform: translateY(100vh);
    transform: translateY(100vh);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    display: inline-block;
    text-decoration: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: all;
    outline: none;
    overflow: hidden;
    background-image: url(../images/gradient.png);
    background-size: 100% 100%;
    border-radius: 1000px;
}

    .scrolltop-wrap a svg {
        display: block;
        border-radius: 50%;
        width: 100%;
        height: 100%;
    }

        .scrolltop-wrap a svg path {
            -webkit-transition: all 0.1s;
            transition: all 0.1s;
        }

    .scrolltop-wrap a #scrolltop-arrow {
        -webkit-transform: scale(0.66);
        transform: scale(0.66);
        -webkit-transform-origin: center;
        transform-origin: center;
    }

@media print {
    .scrolltop-wrap {
        display: none !important;
    }
}

/* Scrolling Button */





.user-option {
    display: inline-block;
    float: right;
    margin-top: 20px;
    margin-right: 20px;
    transition: all 0.5s ease-in 0s;
}

.logout-button {
    border-radius: 100px;
    background-image: url(../images/gradient.png);
    background-size: 100% 100%;
    padding: 10px 20px;
    color: #fff;
}










.dropbtn {
    background-color: #fff;
    color: #000;
    padding: 10px 20px;
    font-size: 14px;
    border: none;
    cursor: pointer;
    border: 0px;
    font-family: poppins;
    font-size: 14px;
    min-width: 120px;
    text-align: left;
    margin-right: 20px;
    background-image: url(../images/small-arrow2.png);
    background-position: 90% center;
    background-repeat: no-repeat;
    background-size: 12px auto;
}

    .dropbtn:hover, .dropbtn:focus {
        background-color: #eee;
    }

.dropdown {
    position: relative;
    display: inline-block;
    border: 0px;
    background-color: #fff;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

    .dropdown-content a {
        color: black;
        padding: 10px;
        text-decoration: none;
        display: block;
        border-bottom: 1px solid #ddd;
        font-size: 13px;
        color: #666;
    }

.dropdown a:hover {
    background-color: #ddd;
    color: #000;
}

.show {
    display: block;
}





.next-and-previous {
    display: table;
    width: 100%;
    padding-top: 20px;
}

    .next-and-previous .prev, .next-and-previous .next {
        border-radius: 100px;
        background-image: url(../images/gradient.png);
        background-size: 100% 100%;
        padding: 10px 30px;
        color: #fff;
        float: left;
    }

    .next-and-previous .next {
        float: right;
    }


.aboutus {
    width: 100%;
    display: table;
    padding: 20px;
    max-width: 1300px;
    margin: auto;
}

    .aboutus .half-right img {
        float: right;
        width: 100%;
    }

    .aboutus .half-left {
        padding-right: 60px;
    }

.contactus {
    width: 100%;
    display: table;
    padding: 20px;
    max-width: 1340px;
    margin: auto;
}

    .contactus h3 {
        text-align: center;
    }

    .contactus .textbox1 {
        width: 31.3%;
        float: left;
        margin: 1%;
    }

    .contactus .textbox2 {
        width: 98%;
        float: left;
        margin: 1%;
    }

    .contactus .submit-button {
        display: block;
        margin: 1% auto;
    }




.half-left {
    width: 50%;
    float: left;
}

.half-right {
    width: 50%;
    float: right;
}


.contact-box {
    width: 31.3%;
    float: left;
    border: 1px solid #ddd;
    margin: 1%;
    border-radius: 10px;
    text-align: center;
    padding-bottom: 40px;
}

    .contact-box img {
        display: block;
        text-align: center;
        margin: 40px auto;
    }





.contact-line {
    display: table;
    width: 100%;
    line-height: 50px;
    margin-bottom: 20px;
}

    .contact-line img {
        float: left;
        margin-right: 10px;
    }

.sponsor-grid a {
    display: inline-block;
    float: left;
    border: 1px solid #ddd;
    margin: 15px;
}

    .sponsor-grid a:hover {
        box-shadow: 0px 0px 10px 0px #ccc;
    }

.login-area {
    width: 370px;
    margin: auto;
    border-radius: 20px;
    padding: 20px 20px;
    background-color: #fff;
}

    .login-area .textbox1, .login-area .submit-button {
        width: 100%;
        border-radius: 1000px;
        padding: 10px 30px;
        margin: 5px 0px;
    }

    .login-area a {
        color: #1671DD;
        border-bottom: 1px solid #1671DD;
    }

    .login-area p {
        text-align: center;
    }


.facebook-button {
    width: 100%;
    border-radius: 1000px;
    display: block;
    text-align: left;
    border: 0px !important;
    padding: 10px 20px;
    background-color: #4a6bb9;
    color: #fff !important;
    margin: 10px 0px;
}

.twitter-button {
    width: 100%;
    border-radius: 1000px;
    display: block;
    text-align: left;
    border: 0px !important;
    padding: 10px 20px;
    background-color: #55acee;
    color: #fff !important;
    margin: 10px 0px;
}

.google-button {
    width: 100%;
    border-radius: 1000px;
    display: block;
    text-align: left;
    border: 0px !important;
    padding: 10px 20px;
    background-color: #ddd;
    color: #000 !important;
    margin: 10px 0px;
}


    .facebook-button img, .twitter-button img, .google-button img {
        float: left;
        margin-top: 5px;
        margin-right: 20px;
    }


.cd-accordion__item.current-page a {
    background-color: #0a0b15 !important;
}

.signup-bg {
    width: 100%;
    min-height: 600px;
    background-image: url(../images/signup-bg.jpg);
    background-position: center bottom;
    background-size: cover;
}

    .signup-bg h2 {
        color: #fff;
    }

.accordion {
    color: #444;
    cursor: pointer;
    padding: 15px 15px 13px 15px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
    border: 1px solid #ddd;
    background-color: #fff;
    margin-top: 10px;
    font-family: poppins;
    font-weight: 600;
}

    .active, .accordion:hover {
        background-color: #fff;
    }

    .accordion.active {
        border-bottom: 0px;
        margin-bottom: 0px;
    }



    .accordion:after {
        content: '\002B';
        color: #777;
        font-weight: 300;
        float: right;
        margin-left: 5px;
        font-size: 18px;
    }

.active:after {
    content: "\2212";
}

.panel {
    padding: 0;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    background-color: #f8f8f8;
}

    .panel div {
        border: 1px solid #ddd;
        padding: 10px;
        border-top: 0px;
    }

        .panel div a {
            color: #CF0978;
        }












.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 200;
    top: 0;
    left: 0;
    background-color: #eee;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 30px;
    box-shadow: 0px 0px 5px 0px;
}

    .sidenav a {
        padding: 10px;
        text-decoration: none;
        font-size: 25px;
        color: #818181;
        display: block;
        transition: 0.3s;
        font-weight: 300;
    }


        .sidenav a:hover {
            color: #000;
        }

    .sidenav .closebtn {
        position: absolute;
        top: 0;
        right: 10px;
        font-size: 36px;
        margin-left: 0px;
        font-weight: 300;
    }



.sticky-button {
    position: fixed;
    right: 0px;
    top: 190px;
    z-index: 100;
    display: block;
    background-color: transparent;
}

    .sticky-button img, .sticky-button a {
        display: block;
    }

.subscribe-form {
    padding: 20px;
    display: table;
    width: 100%;
}

    .subscribe-form h4 {
        margin: 10px 0px;
        color: #000;
    }

    .subscribe-form .submit-button {
        width: 100%;
        border-radius: 5px;
    }







/* responsive menu */

.responsive-menu-icon {
    display: none;
}


.responsive-menu-icon {
    display: block;
    cursor: pointer;
    background-color: #bc0b23;
    width: 47px;
    height: 47px;
    position: fixed;
    right: 0;
    top: 68px;
    padding: 13px 12px;
    box-sizing: border-box;
    z-index: 10000;
    display: none;
    z-index: 1000;
    background-image: url(../images/button-bg.png);
    background-size: 100% 100%;
    margin-top: 40px;
    display: none;
}

.bar1, .bar2, .bar3 {
    width: 23px;
    height: 2px;
    background-color: #fff;
    margin: 4px 0;
    transition: 0.4s;
}

.change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px);
    transform: rotate(-45deg) translate(-4px, 4px);
}

.change .bar2 {
    opacity: 0;
}

.change .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px);
    transform: rotate(45deg) translate(-4px, -5px);
}


/* responsive menu */


.mobilemenu {
    display: none;
}


.login-area {
    width: 370px;
    margin: auto;
    border-radius: 20px;
    padding: 20px 20px;
    background-color: #fff;
}

    .login-area .textbox1, .login-area .submit-button {
        width: 100%;
        border-radius: 1000px;
        padding: 10px 30px;
        margin: 5px 0px;
        font-family: poppins;
        font-size: 14px;
        border-radius: 100px;
        background-color: #f7f7f7;
        border: 1px solid #ddd;
    }

    .login-area a {
        color: #1671DD;
        border-bottom: 1px solid #1671DD;
    }

    .login-area p {
        text-align: center;
    }

.login {
    width: 100%;
    min-height: 100%;
    background-image: url(../images/signup-bg.jpg);
    background-position: center bottom;
    background-size: cover;
}

    .login h2 {
        color: #fff;
    }

    .login .textbox1 {
        width: 100%%;
        float: left;
        margin: 1% 0px;
    }

    .login .submit-button {
        display: block;
        margin: 2% auto;
    }














/* Dashboard  */

.dashboard-left {
    width: 270px;
    background-color: #eee;
    display: table;
    float: left;
    margin: 15px;
    padding: 15px;
}

.dashboard-middle {
    width: calc(100% - 300px);
    background-color: #fff;
    display: table;
    float: left;
    margin: 20px 0px;
}

.dashboard-right {
    width: 270px;
    background-color: #eee;
    display: table;
    margin: 15px;
    float: left;
    padding: 15px;
}


    .dashboard-left h6, .dashboard-right h6 {
        margin: 0px 0px 3px 0px;
        font-size: 16px;
        color: #000;
        font-weight: 500;
        background-image: url(../images/gradient.png);
        background-size: 100% 100%;
        color: #fff;
        padding: 5px 15px;
    }

    .dashboard-left a, .dashboard-right a {
        color: #666;
        display: block;
        padding: 5px 0px;
        border-bottom: 1px solid #ccc;
    }

        .dashboard-left a:hover, .dashboard-right a:hover {
            padding-left: 5px;
            color: #000;
        }

.dashboard-user-box {
    width: 100%;
    display: table;
    border: 1px solid #ddd;
    padding: 10px;
    margin-bottom: 10px;
}

    .dashboard-user-box h3 {
        font-size: 20px;
        font-weight: 600;
        margin: 10px 0px 0px 0px;
        clear: both;
    }

.dashboard-middle .face {
    float: left;
    width: 30px;
    margin-right: 10px;
    border-radius: 100px;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

    .data-table th, .data-table td {
        padding: 5px 10px;
        border: 1px solid #ccc;
        text-align: left;
    }

    .data-table th {
        background-color: #2b2e4b;
        color: #fff;
        text-align: left;
        font-weight: 500;
    }


.full-size-area {
    width: 100%;
    display: table;
    padding: 15px;
}

/* Dashboard  */


.form-field-two-column {
    width: 48%;
    float: left;
    margin: 1%;
}

    .form-field-two-column label {
        width: 30%;
        float: left;
        display: inline-block;
        line-height: 40px;
        font-size: 13px;
    }

    .form-field-two-column .textbox1 {
        width: 68.5%;
        float: left;
        display: inline-block;
    }

.textbox1.select {
    font-weight: 300;
}

.form-field-three-column {
    width: 31.3%;
    float: left;
    margin: 1%;
}

    .form-field-three-column label {
        width: 28%;
        float: left;
        display: inline-block;
        line-height: 40px;
        font-size: 13px;
    }

    .form-field-three-column .textbox1 {
        width: 70%;
        float: left;
        display: inline-block;
    }

.form-field-one-column {
    width: 98%;
    float: left;
    margin: 1%;
}

    .form-field-one-column label {
        width: 10%;
        float: left;
        display: inline-block;
        line-height: 40px;
        font-size: 13px;
    }

    .form-field-one-column .textbox1 {
        width: 89%;
        float: left;
        display: inline-block;
    }

/* kk custom css */
#ContentPlaceHolder1_lblMessage {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    background-color: #fff;
    color: red;
}

#lblMessage {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    background-color: #fff;
    color: red;
}

.lblMessage {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    background-color: #fff;
    color: red;
}

#ValidationSummary1 {
    color: red;
}

#ContentPlaceHolder1_ValidationSummary1 {
    color: red;
}

.seeMoreDetail {
    color:red;
    font:bold;
}

/* end of kk custom css*/