/*
 Theme Name:   เด็กร่วมผู้ใหญ่สร้าง3
 Theme URI:    https://www.เด็กร่วมผู้ใหญ่สร้าง.com/gen3
 Description:  เด็กร่วมผู้ใหญ่สร้าง 3
 Author:       Yosaki
 Author URI:   http://www.yoskai.com/
*/

* {
    box-sizing: border-box;
}

html {
    margin: 0 !important;
}

body {
    background-color: #1C75B6;
}

.navbar-toggler {
    background: rgba(0, 0, 0, .3);
}

section.scroll>div.container {
    position: relative;
    background: url('https://www.xn--12cyt7ayackd0bzbygwcuec4c2cvagbo.com/wp-content/themes/dek2/assets/img-course-online/bg-course-online-bg.png') no-repeat bottom center #fff !important;
    background-size: contain !important;
}

section.scroll>div.container.no-bg {
    position: relative;
    background: none #fff !important;
}

footer.bg-warning {
    background-color: #205A41 !important;
}

section.scroll>div.container>div.shade {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgb(255, 255, 255);
    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 41%, rgba(222, 239, 209, 1) 65%);
    z-index: 1;
}

section.scroll>div.container>div.shade2 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(107, 164, 58, .3);
    z-index: 1;
}

section.scroll>div.container>div.shade3 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('images/road.png') no-repeat bottom center rgb(255, 255, 255);
    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 41%, rgba(222, 239, 209, 1) 65%);
    z-index: 1;
}

section.scroll>div.container>div,
section.scroll>div.container>div {
    position: relative;
    z-index: 2;
    min-height: 400px;
}

.btn-mirror {
    position: relative;
    background: url("images/btn-mirror.png") no-repeat bottom center;
    background-size: contain;
    padding: 5px 10px;
}

.btn-mirror2 {
    position: relative;
    background: url("images/green-bar2.png") no-repeat bottom center;
    background-size: contain;
    padding: 5px 10px;
}

.btn-mirror3 {
    position: relative;
    background: url("images/green-bar.png") no-repeat bottom center;
    background-size: contain;
    padding: 5px 10px;
}

/* .btn-mirror:after,
.btn-mirror:before {
    content: "";
    position: absolute;
    display: block;
    width: inherit;
    height: 50%;
    bottom: -52%;
}

.btn-mirror:after {
    background: inherit;
    transform: scaleY(-1);
}

.btn-mirror:before {
    z-index: 1;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), #fff);
} */
@media (min-width:767px) {
    .position-sm-absolute {
        position: absolute !important;
    }

    #front-page {
        padding-bottom: 150px;
    }

    .pb-sm-10 {
        padding-bottom: 100px !important;
    }
}

@media (max-width:767px) {
    .navbar-custom .navbar-nav .nav-item .nav-link {
        background: rgba(255, 255, 255, .3);
        color: #fff;
    }

    header .banner {
        padding-top: 10vh;
    }

    div#compass {
        margin-top: 10vh;

        h2 {
            font-size: 24px !important;
        }

        .text-white {
            font-size: 16px !important;
        }

        #f1 {
            top: 0 !important;
        }

        #f2 {
            bottom: 10% !important;
        }

        #f1,
        #f2 {
            left: 5% !important;
        }
    }

    #front-page {
        padding-bottom: 10px;
    }
}

.btn-active {
    background-color: #006837;
}

.btn-outline-primary {
    border-color: #006837;
    ;
}

div.navbar-collapse.collapse.show {
    background-color: rgba(0, 0, 0, .3);
}