/*
    1. ОБЛАСТЬ СЛАЙДЕРА
    2. ФУНКЦИОНАЛЬНАЯ ОБЛАСТЬ
    3. ОБЛАСТЬ ИНТЕРЕСНЫХ ФАКТОВ
    4. КУРС АЭРА
    5. ОБЛАСТЬ ВИДЕО
    6. ОБЛАСТЬ ТЕСТМОНИАЛА
    7. ОБЛАСТЬ БЛОГА
    8. ЧАСТО ЗАДАВАЕМЫЕ ВОПРОСЫ
    9. КОНТАКТНАЯ ЗОНА
    10. КЛИЕНТСКАЯ ЗОНА
    11. НИЖНИЙ ОБЛАСТЬ
    12. ПРОКРУТИТЕ В ВЕРХНЮЮ ОБЛАСТЬ
*/

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

/*--------------------------
    1. ОБЛАСТЬ СЛАЙДЕРА
-----------------------------*/

.slide-bg-one {
    background: rgba(0, 0, 0, 0) url("assest/img/slider/slide-1.jpg") no-repeat scroll center center / cover;
}

.slide-bg-two {
    background: rgba(0, 0, 0, 0) url("assest/img/slider/slide_1.jpg") no-repeat scroll center center / cover;
}

.slide-bg-three {
    background: rgba(0, 0, 0, 0) url("assest/img/slider/slide_2.jpg") no-repeat scroll center center / cover;
}

.welcome-slider-area .owl-controls {
    margin-top: -80px;
    position: absolute;
    right: 7%;
    top: 50%;
    opacity: 0;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.welcome-slider-area:hover .owl-controls {
    right: 10%;
    opacity: 1;
}

.welcome-slider-area .owl-nav > div {
    background: #d3ffea none repeat scroll 0 0;
    border-radius: 50%;
    bottom: 0;
    color: #31dc89;
    font-size: 35px;
    height: 50px;
    margin: 10px 0;
    padding-top: 5px;
    right: 0;
    text-align: center;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: 50px;
}

.welcome-slider-area .owl-nav > div:hover {
    background: #31dc89 none repeat scroll 0 0;
    color: #ffffff;
}

/*--------------------------------
    2. FEATURES AREA
---------------------------------*/

.row.promo-content {
    background: #ffffff none repeat scroll 0 0;
    -webkit-box-shadow: 0 9px 9px 0 #c7c7c7;
    box-shadow: 0 9px 9px 0 #c7c7c7;
    margin-top: -100px;
    padding-top: 30px;
    position: relative;
    z-index: 1;
}

.features-box-icon {
    background: #d3ffea none repeat scroll 0 0;
    border-radius: 5px;
    color: #31dc89;
    height: 70px;
    margin-bottom: 40px;
    padding-top: 15px;
    text-align: center;
    width: 70px;
}

/*----------------------------------
    3. FUN FACT AREA
----------------------------------*/

.fun-fact-area .area-bg {
    background: rgba(0, 0, 0, 0) url("assest/img/fact-bg.jpg") no-repeat scroll center center / cover;
}

.fun-fact-area .area-bg::after {
    background: #000000 none repeat scroll 0 0;
    opacity: 0.6;
}

/*---------------------------------
    4. COURSE AERA
-----------------------------------*/

.single-course {
    border-radius: 10px;
    -webkit-box-shadow: 0 7px 7px #c7c7c7;
    box-shadow: 0 7px 7px #c7c7c7;
    overflow: hidden;
}

a.enroll-button {
    background: #d3ffea none repeat scroll 0 0;
    border-radius: 50px;
    color: #0be27a;
    padding: 10px 15px;
    text-transform: capitalize;
}

a.enroll-button:hover {
    background: #171932 none repeat scroll 0 0;
    color: #ffffff;
}

.course-price {
    color: #0be27a;
    float: right;
    font-size: 22px;
    font-weight: 700;
}

.row.course-list {
    margin: 0;
}

.row.course-list .col-lg-3 {
    width: 100%;
    padding: 0;
}

.course-details {
    text-align: left;
}

/*--------------------------------
    5. VIDEO AREA
---------------------------------*/

.video-area .area-bg::before {
    background: #3ee792 none repeat scroll 0 0;
    opacity: 0.75;
}

.video-promo-details {
    border-radius: 10px;
}

.video-promo-content {
    color: #ffffff;
    left: 0;
    position: absolute;
    text-align: center;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 100%;
}

.video-area-popup {
    background: #ffffff none repeat scroll 0 0;
    border-radius: 50%;
    color: #3ee792;
    cursor: pointer;
    display: inline-block;
    font-size: 30px;
    height: 70px;
    line-height: 1;
    padding-left: 5px;
    padding-top: 20px;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: 70px;
}

.video-area-popup:hover {
    background: #3ee792 none repeat scroll 0 0;
    -webkit-box-shadow: 0 0 10px 10px #ffffff;
    box-shadow: 0 0 10px 10px #ffffff;
    color: #ffffff;
}

/*---------------------------------
    6. TESTMONIAL AREA
----------------------------------*/

.author-content {
    line-height: 1.8;
    padding-top: 63px;
    position: relative;
}

.author-content::before {
    color: #3ee792;
    content: "\f10e";
    font-family: fontawesome;
    font-size: 41px;
    left: 0;
    line-height: 1;
    opacity: 0.5;
    position: absolute;
    top: 20px;
}

.author-img {
    border-radius: 50%;
    height: 80px;
    overflow: hidden;
    width: 80px;
}

.author-name-image h4 {
    margin-bottom: 0;
}

.testmonial-slider.owl-carousel {
    overflow: hidden;
}

.testmonial-area .owl-nav > div {
    background: #3ee792 none repeat scroll 0 0;
    border-radius: 50%;
    color: #ffffff;
    font-size: 30px;
    height: 40px;
    left: -30px;
    opacity: 0;
    padding-top: 4px;
    position: absolute;
    text-align: center;
    top: 30%;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    visibility: hidden;
    width: 40px;
}

.testmonial-area .owl-nav > div.owl-next {
    left: auto;
    right: -30px;
}

.testmonial-area .owl-nav > div:hover {
    background: #586082 none repeat scroll 0 0;
}

.owl-carousel:hover .owl-nav > div.owl-next {
    opacity: 1;
    right: 0;
    visibility: visible;
}

.owl-carousel:hover .owl-nav > div.owl-prev {
    left: 0;
    opacity: 1;
    visibility: visible;
}

/*.testmonial-area .owl-controls {
    height: 20px;
    margin-top: 30px;
}*/

.testmonial-area .owl-dots {
    left: 50%;
    position: absolute;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.testmonial-area .owl-dots > div {
    border: 1px solid #586082;
    border-radius: 50%;
    display: inline-block;
    height: 15px;
    margin: 0 5px;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: 15px;
}

.testmonial-area .owl-dots > div.active {
    background: #3ee792 none repeat scroll 0 0;
    border-color: #3ee792;
}

/*--------------------------------
    7. BLOG AREA
----------------------------------*/

.single-blog-item {
    border-radius: 10px;
    -webkit-box-shadow: 0 7px 7px #c7c7c7;
    box-shadow: 0 7px 7px #c7c7c7;
    overflow: hidden;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.blog-thumb {
    overflow: hidden;
}

.blog-thumb img {
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.single-blog:hover {
    -webkit-box-shadow: 0 0 20px #ddd;
    box-shadow: 0 0 20px #ddd;
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
}

.blog-details h3 {
    line-height: 1.3;
    margin-bottom: 25px;
}

.blog-meta a {
    opacity: .7;
    margin-right: 15px;
}

.blog-meta a:hover {
    opacity: 1;
}

.blog-details a.readmore {
    display: inline-block;
    letter-spacing: 1px;
}

.single-blog-item:hover .blog-thumb img {
    opacity: 0.5;
    -webkit-transform: scale(1.3) rotate(10deg);
    transform: scale(1.3) rotate(10deg);
}

/*--------------------------------
    8. FAQS AREA
---------------------------------*/

.faqs-area .box-title {
    font-size: 18px;
    letter-spacing: 0;
}

/*---------------------------------
    9. CONTACT AREA
----------------------------------*/

.contact-form input,
.contact-form textarea {
    border: 0 none;
    border-radius: 0;
    -webkit-box-shadow: 0 0 0 1px #cacfda;
    box-shadow: 0 0 0 1px #cacfda;
    margin-bottom: 30px;
    min-height: 50px;
    padding: 10px;
}

.contact-form input:focus,
.contact-form textarea:focus {
    -webkit-box-shadow: 0 0 0 1px #3ee792;
    box-shadow: 0 0 0 1px #3ee792;
}

.contact-form button {
    background: #3ee792 none repeat scroll 0 0;
    border: 0 none;
    border-radius: 50px;
    color: #ffffff;
    font-size: 14px;
    letter-spacing: 2px;
    padding: 13px 20px;
    text-transform: capitalize;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.contact-form button:hover {
    background: #171932 none repeat scroll 0 0;
    color: #ffffff;
}

.enroll-button a {
    background: #31dc89 none repeat scroll 0 0;
    border-radius: 50px;
    color: #ffffff;
    display: inline-block;
    font-weight: 600;
    height: 50px;
    padding-top: 13px;
    text-align: center;
    width: 150px;
}

.enroll-button a:hover {
    background: #171932 none repeat scroll 0 0;
}

/*---------------------------------
    10. CLIENT AREA
---------------------------------*/

.client-area .owl-carousel .owl-item img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    width: auto;
}

/*---------------------------------
    11. FOOTER AREA
----------------------------------*/

.footer-list ul {
    list-style: outside none none;
    margin: 0;
    padding: 0;
}

.footer-list ul li {
    display: block;
    margin-bottom: 12px;
}

.footer-list ul li a:hover {
    color: #31dc89;
}

.subscriber-form {
    background: #ffffff none repeat scroll 0 0;
    border: 1px solid #dddddd;
    border-radius: 50px;
    font-size: 18px;
    height: 50px;
    position: relative;
    text-transform: capitalize;
}

.subscriber-form input {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: 0 none;
    border-radius: 5px;
    color: #000000;
    height: 100%;
    left: 0;
    letter-spacing: 1px;
    padding: 10px 10px 10px 30px;
    position: absolute;
    top: 0;
    width: 80%;
}

.subscriber-form button {
    background: #d3ffea none repeat scroll 0 0;
    border: 0 none;
    border-radius: 0 50px 50px 0;
    color: #171932;
    font-size: 20px;
    height: 100%;
    letter-spacing: 2px;
    position: absolute;
    right: 0;
    text-transform: uppercase;
    top: 0;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: 80px;
}

.subscriber-form button:hover {
    background: #31dc89 none repeat scroll 0 0;
    color: #ffffff;
}

label.mt10 {
    bottom: -52px;
    left: 0;
    position: absolute;
    right: 0;
    text-align: center;
}

label.mt10.valid {
    bottom: 8px;
    color: #31dc89;
    left: 0;
    position: absolute;
    right: 0;
    text-align: center;
}

.footer-bottom-area {
    background: #2e2e43 none repeat scroll 0 0;
}

.footer-copyright {
    padding: 30px 0;
}

/*---------------------------------
    12. SCROLL TO TOP AREA
----------------------------------*/

.scrolltotop {
    background: #404873 none repeat scroll 0 0;
    bottom: 20px;
    color: #ffffff;
    display: none;
    font-size: 20px;
    height: 40px;
    padding-top: 8px;
    position: fixed;
    right: 20px;
    text-align: center;
    width: 40px;
    z-index: 9;
}

.scrolltotop:hover {
    background: #3ee792;
    color: #ffffff;
}