/*-----------------------------------------------------------------------------------
  Template Name: Educan Education HTML Template.
  Template URI: #
  Description: Educan is a unique website template designed in HTML with a simple & beautiful look. There is an excellent solution for creating clean, wonderful and trending material design corporate, corporate any other purposes websites.
  Author: HasTech
  Author URI: https://themeforest.net/user/hastech/portfolio
  Version: 1.0
-----------------------------------------------------------------------------------*/
/*

    font-family: 'Open Sans', sans-serif;

    font-family: 'Lato', sans-serif;

*/

/*---------------------
Slider images
-----------------------*/

.slider__bg--1 {
    background: #9b826f;
}

.slider__bg__color--1 {
    background: #9b826f;
}
.slider__bg__color--2 {
    background: #517b91;
}
.slider__bg__color--3 {
    background: #56a4b1;
}

.slider__bg--2 {
    background: rgba(0, 0, 0, 0) url("../../images/slider/bg/3.jpg") no-repeat scroll center center / cover ;
}
.slider__bg--3 {
    background: rgba(0, 0, 0, 0) url("../../images/slider/bg/4.jpg") no-repeat scroll center center / cover;
}
.slider__bg--5 {
    background: rgba(0, 0, 0, 0) url("../../images/slider/bg/5.jpg") no-repeat scroll center center / cover;
}
.slider__bg--6 {
    background: rgba(0, 0, 0, 0) url("../../images/slider/bg/6.jpg") no-repeat scroll center center / cover;
}
.slider__bg--4 {
    background: #56a4b1;
}

/**----------------------------------
! 8. Background variation
-------------------------------------------**/
.slider__full--screen {
    height: 100vh;
    display: block;
}

.slider__fixed_height {
    height: 752px;
    display: block;
}

@media (min-width: 992px) and (max-width: 1169px) {
    .slider__fixed_height {
        height: 720px;
    }
}

.slider__fixed_height .slide,
.slider__fixed_height .slide .container,
.slider__fixed_height .slide .container .row,
.slider__fixed_height .slide .container .row div[class*="col-"]{
    height: 100%;
}

@media ( max-width: 991px ) {
    .slider__fixed_height {
        height: auto;
    }
}

.slider__position--relative {
    position: relative;
}
.slider__activation__wrap,
.slider__activation__wrap .owl-stage-outer,
.slider__activation__wrap .owl-item,
.slider__activation__wrap .slide,
.slider__activation__wrap .owl-stage {
    height: 100%;
}

/*-------------------------------------------
  Slider Owl Activation
--------------------------------------------*/

.slide {
    height: 100%;
    display: flex;
    align-items: center;
}
.slider__activation__wrap .owl-nav div {
    height: 65px;
    left: -80px;
    line-height: 65px;
    opacity: 1;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: all 0.5s ease 0s;
    width: 65px;
    padding: 0 !important;
    text-align: center !important;
}

.slider__activation__wrap .owl-nav div.owl-next {
    left: auto;
    right: -80px;
}

.slider__activation__wrap:hover .owl-nav div{
    left: 20px;
}

.slider__activation__wrap:hover .owl-nav div.owl-next {
    left: auto;
    right: 20px;
}

.slider__activation__wrap.owl-theme .owl-nav [class*="owl-"] {
    background: rgba(0,0,0,0.10);
    border-radius: 100%;
    color: #fff;
    cursor: pointer;
}
.slider__activation__wrap.owl-theme .owl-nav [class*="owl-"] {
    font-size: 24px;
}
.slider__activation__wrap.owl-theme .owl-nav .disabled {
    opacity: 1;
}
.slider__activation__wrap.owl-theme .owl-nav [class*="owl-"]:hover {
    background: #f36371 none repeat scroll 0 0;
}

/*------------------------------------------
      Slider Inner
---------------------------------------*/
.slider__inner h1 {
    color: #fff;
    line-height: 43px;
    text-transform: uppercase;
}
.slider__inner {
    position: relative;
    text-align: center;
    z-index: 2;
}
.slider__inner p {
    color: #fff;
    font-family: Roboto Slab;
    font-size: 29px;
    font-weight: 400;
    line-height: 40px;
    margin-top: 31px;
}

/*--------------------Text Align ----------------*/

.text__align--left .slider__inner {
    text-align: left;
}
.text__align--right .slider__inner {
    text-align: right;
}

/*--------------------Text Align Center ----------------*/

.text__align--center .slider__inner {
    text-align: center;
}
.text__align--center .slider__display--center {
    justify-content: center;
}

.slider__display--center {
    align-items: center;
    display: flex;
    height: 100vh;
}
.slider__fixed_height  .slider__display--center {
    align-items: center;
    display: flex;
    height: 100%;
}

/*----------------------------
  Slider Fornt Images
-----------------------------*/
.fornt__image--right,
.fornt__image--right-2,
.fornt__image--right-3 {
    position: relative;
}
.fornt__image--right::before,
.fornt__image--right-2::before,
.fornt__image--right-3::before {
    bottom: 0;
    content: '';
    position: absolute;
    right: 180px;
    top: 14px;
    width: 757px;
    background-image: url("/site/web/themes/t1/images/slider/fornt-img/1.png");
}
.fornt__image--right-2::before {
    background-image: url("/site/web/themes/t1/images/slider/fornt-img/2.png");
    bottom: 0 !important;
    top: 15px;
}
.fornt__image--right-3::before {
    background-image: url("/site/web/themes/t1/images/slider/fornt-img/3.png");
    bottom: 0 !important;
    top: 25px;
}

/*---------------------------------
    Button Style
-----------------------------------*/

.slider__btn {
    margin-top: 37px;
}
.htc__btn {
    background: #005691 none repeat scroll 0 0;
    color: #fff;
    display: inline-block;
    font-family: Roboto Slab;
    font-size: 15px;
    font-weight: 700;
    height: 48px;
    line-height: 48px;
    overflow: hidden;
    padding: 0 38px;
    position: relative;
    text-transform: uppercase;
    z-index: 2;
}
.btn--theme {
    background: #005691 none repeat scroll 0 0;
    color: #fff;
    height: 48px;
    line-height: 48px;
    padding: 0 38px;
}


.btn--yellow {
    background: #e9ae37 none repeat scroll 0 0;
}

/*-------------------------
  Btn Hover
-------------------------*/
.htc__btn::after {
    background: #fff none repeat scroll 0 0;
    height: 0;
    left: 50%;
    opacity: 0;
    top: 50%;
    transform: translateX(-50%) translateY(-50%) rotate(45deg);
    width: 100%;
    content: "";
    position: absolute;
    transition: all 0.5s ease 0s;
    z-index: -1;
}
.btn--theme::after {
    background: #f36371 none repeat scroll 0 0;
}

.htc__btn:hover::after {
    height: 400%;
    opacity: 1;
}
.btn--theme:hover::after {
    height: 462%;
}
.btn--theme:hover {
    color: #fff;
}
.btn--smll {
    height: 44px;
    line-height: 43px;
    padding: 0 28px;
}
.btn--transparent {
    background: transparent none repeat scroll 0 0;
    border: 1px solid #fff;
    height: 46px;
    line-height: 44px;
    padding: 0 24px;
}

/*-------------------------
  Slider Style 2
---------------------------*/
.slider--2 .slider__inner h1 {
    line-height: 50px;
}
.slider--2 .slider__inner h4 {
    color: #fff;
    font-size: 30px;
    font-weight: 700;
    line-height: 30px;
    margin-bottom: 22px;
    text-transform: uppercase;
}
.slider--2 .slider__display--center {
    padding-top: 177px;
}
.slider--2 .slider__activation__wrap .owl-nav div {
    height: 64px;
    top: 50%;
    transform: translateY(50px);
    width: 64px;
    z-index: 2;
}
.slider--2 .slider__activation__wrap.owl-theme .owl-nav div:before {
    position: absolute;
    background: #000;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    content: "";
    z-index: -1;
    border-radius: 100%;
    opacity: 0.1;
}
.slider--2 .slider__btn {
    margin-top: 39px;
}
.slider--2 .slider__btn .btn--theme {
    padding: 0 26px;
}

.slider--3 .slider__display--center {
    padding-top: 109px;
}

/*--------------------
  Slider Style 3
----------------------*/
.slider--3 .slider__inner h1 {
    line-height: 72px;
    font-size: 60px;
}
.slider--3 .slider__inner h4 {
    line-height: 30px;
    font-size: 28px;
    text-transform: uppercase;
    font-weight: bold;
    color: #fff;
    margin-bottom: 8px;
}
.slider--3 .slider__btn {
    margin-top: 25px;
}

/*--------------------------
  Slider Style 4
----------------------------*/

.slider--4 .slider__fornt__images {
    align-items: flex-end;
    display: flex;
    height: 100%;
}
.slider--4 .slider__inner h2 {
    color: #fff;
    font-size: 30px;
    font-weight: 700;
    line-height: 30px;
    text-transform: uppercase;
    margin-bottom: 15px;
}
.slider--4 .slider__inner h1 {
    font-size: 72px;
    line-height: 72px;
    text-transform: uppercase;
}
.slider--4 .slider__btn {
    margin-top: 31px;
}

.slider--2 .slider__display--center,
.slider--3 .slider__display--center {
    height: 100%;
}