/*--------------------------------------------------------------------------------------
Theme Name: Vzdělávací institut
Theme URI: https://www.mklusak.cz
Author URI: https://www.mklusak.cz
Description: 100% Responsive, Highly Customizable, SEO Friendly Education Based HTML5 template using Twitter Bootstrap Latest, Search Engine Friendly.
Author: Marek Klusák
Author Email: marek.klusak@gmail.com
Version: 1.0
----------------------------------------------------------------------------------------
    1. SLIDER AREA
    2. FEATURES AREA
    3. FUN FACT AREA
    4. COURSE AERA
    5. VIDEO AREA
    6. TESTMONIAL AREA
    7. BLOG AREA
    8. FAQS AREA
    9. CONTACT AREA
    10. CLIENT AREA
    11. FOOTER AREA
    12. SCROLL TO TOP AREA
----------------------------------------------------------------------------------------*/

html {
	
	--vilight: #D18D8D;
	--vidark: #9D2222;
	--vibright: #B01414;
}

.button {
    background: var(--vidark) none repeat scroll 0 0;
    border-radius: 500px;
    color: #ffffff;
    display: inline-block;
    font-weight: 600;
    padding: 13px 30px;
    text-align: center;
}

.button:hover {
    background: #070607 none repeat scroll 0 0;
}




/*--------------------------
    1. SLIDER AREA
-----------------------------*/

.slide-bg-one {
    background: rgba(0, 0, 0, 0) url("assets/img/promo2-small.jpg") no-repeat scroll top center / cover;
}

@media (min-width: 768px) {
	.slide-bg-one { background-image: url(assets/img/promo2.jpg); }
	.slide-bg-one { background-position: 50% 25%; }
}

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

.slide-bg-three {
    background: rgba(0, 0, 0, 0) url("assets/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: var(--vilight) none repeat scroll 0 0;
    border-radius: 50%;
    bottom: 0;
    color: var(--vidark);
    font-size: 35px;
    line-height: 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: var(--vidark) 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: #D18D8D none repeat scroll 0 0;
    border-radius: 5px;
    color: #9D2222;
    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("assets/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;
}


.course-price {
    color: var(--vibright);
    float: right;
    font-size: 22px;
    font-weight: 700;
}

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

.row.course-list .col-md-6 {
    width: 100%;
    max-width: 100%;
    padding: 0;
}

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

@media (min-width: 768px) {
	.course-archive .course-price { margin-top: 10px; }
}





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

.video-area .area-bg::before {
    background: var(--vibright) 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: var(--vibright);
    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: var(--vibright) 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: var(--vibright);
    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: var(--vibright) none repeat scroll 0 0;
    border-radius: 50%;
    color: #ffffff;
    font-size: 30px;
    line-height: 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: var(--vibright) none repeat scroll 0 0;
    border-color: var(--vibright);
}

/*--------------------------------
    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-area { margin: 50px 0; }

@media (min-width: 992px) {
	.contact-area { margin: 100px 0; }
}

.contact-form__alert { display: none; padding-bottom: 30px; color: red; font-weight: 700; }
.contact-form__alert .success { color: green; }

.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 var(--vibright);
    box-shadow: 0 0 0 1px var(--vibright);
}

.contact-form button {
    background: var(--vibright) 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: var(--vidark) 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;
}

.grecaptcha-badge { visibility: hidden }


/*---------------------------------
    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: var(--vidark);
}

.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: var(--vilight) 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: var(--vidark) 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: var(--vidark);
    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;
    line-height: 20px;
    height: 40px;
    padding-top: 8px;
    position: fixed;
    right: 20px;
    text-align: center;
    width: 40px;
    z-index: 9;
}

.scrolltotop:hover {
    background: var(--vibright);
    color: #ffffff;
}






.pgnts { clear: both; text-align: center; font-weight: 700; }
.pgnts .page-numbers { display: inline-block; padding: 10px 5px; min-width: 40px; margin: 0 2px; line-height: 1; color: var(--vibright); font-size: 16px; background-color: #fff; border: 2px solid var(--vibright); }
.pgnts a.page-numbers { text-decoration: none;  }
.pgnts a.page-numbers:hover { background-color: var(--vibright); color: #fff; border-color: var(--vibright); }
.pgnts .page-numbers.current { background-color: var(--vibright); color: #fff; border-color: var(--vibright);  }







/*
88           88888888888  88      a8P   888888888888    ,ad8888ba,    88888888ba   88  
88           88           88    ,88'         88        d8"'    `"8b   88      "8b  88  
88           88           88  ,88"           88       d8'        `8b  88      ,8P  88  
88           88aaaaa      88,d88'            88       88          88  88aaaaaa8P'  88  
88           88"""""      8888"88,           88       88          88  88""""88'    88  
88           88           88P   Y8b          88       Y8,        ,8P  88    `8b    88  
88           88           88     "88,        88        Y8a.    .a8P   88     `8b   88  
88888888888  88888888888  88       Y8b       88         `"Y8888Y"'    88      `8b  88  
*/

.lector__img { max-width: 300px; aspect-ratio: 1 / 1; object-fit: cover; object-position: center center;  }
.lector__img { border-radius: 50%; }