/**
Project:    Slider Plugin
Version:    1.0
Author: TopNotch


End of Table of Content Css End **/
/*-------------------------------
Custom Css
-------------------------------*/
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900');

* {
    margin: 0;
    padding: 0;
}
body {
    margin: 0px;
    padding: 0px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #868686;
}
body p {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 28px;
    margin: 0;
    color: #868686;
}
body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
body strong {
    font-family: 'Roboto', sans-serif;
    color: #3a4552;
    font-weight: 400;
    letter-spacing: 0.5px;
    margin: 0;
}
h1 span,
h2 span,
h3 span,
h4 span,
h5 span,
h6 span,
strong span{
    font-weight: 700;
}
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a,
strong a {
    color: #3a4552;
}
body h2 {
    font-weight: 400;
    font-size: 30px;
    margin: 0 0 25px;
    line-height: 40px;
}
body h3 {
    font-weight: 400;
    font-size: 24px;
}
body h4 {
    font-weight: 600;
    font-size: 20px;
}
.tnit-wrapper,
.tnit-main-content {
    width: 100%;
    position: relative;
}
figure {
    position: relative;
    overflow: hidden;
    float: left;
    width: 100%;
    margin: 0;
    padding: 0;
}
figure figcaption {
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    z-index: 9;
    margin: 0;
}
ul,
ol {
    margin: 0;
    padding: 0;
}
ul ul,
ol ol {
    padding-left: 30px;
}
.tnit-wrapper {
    float: left;
    width: 100%;
    position: relative;
    z-index: 999;
}
.tnit-wrapper a,
.tnit-wrapper a:hover,
.tnit-wrapper a:focus {
    text-decoration: none;
    outline: none;
}
.tnit-main-content {
    float: left;
    width: 100%;
    position: relative;
}
.tnit-thumb {
    float: left;
    width: 100%;
    position: relative;
    overflow: hidden;
}
.tnit-thumb img {
    max-width: 100%;
    width: 100%;
    height: auto;
}
.tnit-thumb:hover img {
    -webkit-transform: scale(1.2) rotate(3deg);
    -moz-transform: scale(1.2) rotate(3deg);
    -ms-transform: scale(1.2) rotate(3deg);
    -o-transform: scale(1.2) rotate(3deg);
    transform: scale(1.2) rotate(3deg);
}

/*--------------------------------------------
Banner Css
---------------------------------------------*/
.tnit-banner{
    float: left;
    width: 100%;
    overflow: hidden;
    position: relative;
    z-index: 99;
}
#tnit-banner-slider:before{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: rgba(0,0,0,0.3);
    z-index: -1;
}
#tnit-banner-slider{
    float: left;
    width: 100%;
    z-index: inherit;
}
.slider-item{
    float: left;
    width: 100%;
    position: relative;
    z-index: 11;
}
.slider-item img{
    height: auto;
    max-width: 100%;
}
.banner-caption .banner-man-img{
    width: 100%;
    float: right;
}

#tnit-banner-slider .owl-controls{
    position: absolute;
    top: 43%;
    width: 100%;
    display: block;
}
#tnit-banner-slider .owl-nav [class*="owl-"]{
    width: 70px;
    height: 70px;
    line-height: 70px;
    display: table-cell;
    position: relative;
    border-radius: 0;
    color: #222;
    margin: 0;
    padding: 0;
    text-align: center;
    z-index: 11;
    background-color: #fff;
}
#tnit-banner-slider .owl-nav [class*="owl-"]:after{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0;
    background-color: #fff;
    z-index: -1;
}
#tnit-banner-slider .owl-nav [class*="owl-"]:hover:after{
    background-color: rgba(0,0,0,0.42);
    width: 100%;
}
#tnit-banner-slider .owl-nav [class*="owl-"]:hover{
    color: #fff;
    background-color: transparent;
}
#tnit-banner-slider .owl-nav [class*="owl-"]:hover:before{
    -webkit-animation: ZoomIn 0.7s ease-in-out;
       -moz-animation: ZoomIn 0.7s ease-in-out;
        -ms-animation: ZoomIn 0.7s ease-in-out;
         -o-animation: ZoomIn 0.7s ease-in-out;
            animation: ZoomIn 0.7s ease-in-out;
}
#tnit-banner-slider .owl-nav .owl-prev{
    float: left;
    left: -100%;
}
#tnit-banner-slider .owl-nav .owl-next{
    float: right;
    right: -100%;
}
.tnit-banner:hover #tnit-banner-slider .owl-nav .owl-prev{
    left: 0;
}
.tnit-banner:hover #tnit-banner-slider .owl-nav .owl-next{
    right: 0;
}
#tnit-banner-slider .owl-nav .owl-prev:before{
    content: '\f104';
    font-family:'FontAwesome';
    font-size: 36px;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 12;
}
#tnit-banner-slider .owl-nav .owl-next:before{
    content: '\f105';
    font-family:'FontAwesome';
    font-size: 36px;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 12;
}

/*--------------------------------------------
 Css Tranistion and Effects
---------------------------------------------*/
a,ul,ul li,img,.tnit-thumb:before,.tnit-caption,.tnit-thumb,.listed,.owl-nav [class*="owl-"],.banner-caption h2,.banner-caption p,.banner-caption a,
.animateBottomFromTop,.animateTopFromBottom,.animateLeftFromRight,.animateRightFromLeft,.animateBounceInUp,.animateZoomIn,.tnit-btn:before,.curve-img{
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
/* Animate Bottom From Top Css */
.animateBottomFromTop{
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateY(150px);
       -moz-transform: translateY(150px);
        -ms-transform: translateY(150px);
         -o-transform: translateY(150px);
            transform: translateY(150px);
}
.owl-item.active .animateBottomFromTop{
    opacity: 1;
    visibility: visible;
    transition-delay: 0.4s;
    -webkit-transition-delay: 0.4s;
    -moz-transition-delay: 0.4s;
    -webkit-transform: translateY(0px);
       -moz-transform: translateY(0px);
        -ms-transform: translateY(0px);
         -o-transform: translateY(0px);
            transform: translateY(0px);
}
/* Animate Top From Bottom Css */
.animateTopFromBottom{
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateY(-150px);
       -moz-transform: translateY(-150px);
        -ms-transform: translateY(-150px);
         -o-transform: translateY(-150px);
            transform: translateY(-150px);
}
.owl-item.active .animateTopFromBottom{
    opacity: 1;
    visibility: visible;
     transition-delay: 0.7s;
    -webkit-transition-delay: 0.7s;
    -moz-transition-delay: 0.7s;
    -webkit-transform: translateY(0px);
       -moz-transform: translateY(0px);
        -ms-transform: translateY(0px);
         -o-transform: translateY(0px);
            transform: translateY(0px);
}
/* Animate Left From Right Css */
.animateLeftFromRight{
    opacity: 0;
    visibility: hidden;
     -webkit-transform: translateX(-150px);
       -moz-transform: translateX(-150px);
        -ms-transform: translateX(-150px);
         -o-transform: translateX(-150px);
            transform: translateX(-150px);
}
.owl-item.active .animateLeftFromRight{
    opacity: 1;
    visibility: visible;
     transition-delay: 0.9s;
    -webkit-transition-delay: 0.9s;
    -moz-transition-delay: 0.9s;
    -webkit-transform: translateX(0px);
       -moz-transform: translateX(0px);
        -ms-transform: translateX(0px);
         -o-transform: translateX(0px);
            transform: translateX(0px);
}
/* Animate Right From Left Css */
.animateRightFromLeft{
    opacity: 0;
    visibility: hidden;
     -webkit-transform: translateX(150px);
       -moz-transform: translateX(150px);
        -ms-transform: translateX(150px);
         -o-transform: translateX(150px);
            transform: translateX(150px);
}
.owl-item.active .animateRightFromLeft{
    opacity: 1;
    visibility: visible;
     transition-delay: 1.1s;
    -webkit-transition-delay: 1.1s;
    -moz-transition-delay: 1.1s;
    -webkit-transform: translateX(0px);
       -moz-transform: translateX(0px);
        -ms-transform: translateX(0px);
         -o-transform: translateX(0px);
            transform: translateX(0px);
}
/* Animate ZoomIn Css */
.animateZoomIn{
    opacity: 0;
    visibility: hidden;
    -webkit-transform: scale(1.2) rotate(45deg);
    -moz-transform: scale(1.2) rotate(45deg);
    -ms-transform: scale(1.2) rotate(45deg);
    -o-transform: scale(1.2) rotate(45deg);
    transform: scale(1.2) rotate(45deg);
}
.owl-item.active .animateZoomIn{
    opacity: 1;
    visibility: visible;
     transition-delay: 0.5s;
    -webkit-transition-delay: 0.5s;
    -moz-transition-delay: 0.5s;
    -webkit-transform: scale(1) rotate(0deg);
    -moz-transform: scale(1) rotate(0deg);
    -ms-transform: scale(1) rotate(0deg);
    -o-transform: scale(1) rotate(0deg);
    transform: scale(1) rotate(0deg);
}


/*
TopFromBottom Css */
@-webkit-keyframes toTopFromBottom {
    49% {
        -webkit-transform: translateY(50%);
    }
    50% {
        opacity: 0;
        -webkit-transform: translateY(-50%);
    }
    51% {
        opacity: 1;
    }
}
@-moz-keyframes toTopFromBottom {
    49% {
        -moz-transform: translateY(50%);
    }
    50% {
        opacity: 0;
        -moz-transform: translateY(-50%);
    }
    51% {
        opacity: 1;
    }
}
@-ms-keyframes toTopFromBottom {
    49% {
        -ms-transform: translateY(50%);
    }
    50% {
        opacity: 0;
        -ms-transform: translateY(-50%);
    }
    51% {
        opacity: 1;
    }
}
@keyframes toTopFromBottom {
    49% {
        transform: translateY(50%);
    }
    50% {
        opacity: 0;
        transform: translateY(-50%);
    }
    51% {
        opacity: 1;
    }
}
/* 
Animate ToLeftFromRight CSS*/
@keyframes toLeftFromRight{
    49%{
        transform: translateX(200%);
    }
    50%{
        opacity: 0;
        transform: translateX(50%);
    }
    51%{
        opacity: 1;
        
    }
}

@-webkit-keyframes toLeftFromRight{
    49%{
        webkit-transform: translateX(200%);
    }
    50%{
        opacity: 0;
        webkit-transform: translateX(50%);
    }
    51%{
        opacity: 1;
        
    }
}

@-moz-keyframes toLeftFromRight{
    49%{
        -moz-transform: translateX(200%);
    }
    50%{
        opacity: 0;
        -moz-transform: translateX(50%);
    }
    51%{
        opacity: 1;
        
    }
}

/* 
Animate ToRightFromLeft CSS*/
@keyframes toRightFromLeft{
    49%{
        transform: translateX(-200%);
    }
    50%{
        opacity: 0;
        transform: translateX(-50%);
    }
    51%{
        opacity: 1;
        
    }
}

@-webkit-keyframes toRightFromLeft{
    49%{
        webkit-transform: translateX(-200%);
    }
    50%{
        opacity: 0;
        webkit-transform: translateX(-50%);
    }
    51%{
        opacity: 1;
        
    }
}

@-moz-keyframes toRightFromLeft{
    49%{
        -moz-transform: translateX(-200%);
    }
    50%{
        opacity: 0;
        -moz-transform: translateX(-50%);
    }
    51%{
        opacity: 1;
        
    }
}

/* 
Animate ZoomIn Css*/
@-webkit-keyframes ZoomIn {
    49% {
        -webkit-transform: scale(0);
    }
    50% {
        opacity: 0;
        -webkit-transform: scale(1);
    }
    51% {
        opacity: 1;
        -webkit-transform: scale(1.2);
    }
}
@-moz-keyframes ZoomIn {
    49% {
        -moz-transform: scale(0);
    }
    50% {
        opacity: 0;
        -moz-transform: scale(1);
    }
    51% {
        opacity: 1;
        -moz-transform: scale(1.2);
    }
}
@-ms-keyframes ZoomIn {
    49% {
        -ms-transform: scale(0);
    }
    50% {
        opacity: 0;
        -ms-transform: scale(1);
    }
    51% {
        opacity: 1;
        -ms-transform: scale(1.2);
    }
}
@keyframes ZoomIn {
    49% {
        transform: scale(0);
    }
    50% {
        opacity: 0;
        transform: scale(1);
    }
    51% {
        opacity: 1;
        transform: scale(1.2);
    }
}

/*--------------------------------------------
 Responsive Custom Css
---------------------------------------------*/
@media (max-width: 360px) {
.owl-stage-outer .owl-item .slider-item .banner-caption.tnit-text-top{
    top: 10px;
    left: 0;
}
.owl-stage-outer .owl-item .banner-caption .text-inner h2{
    font-size: 20px;
    line-height: 30px;
    margin-bottom: 8px;
}
.owl-stage-outer .owl-item .banner-caption .text-inner h4{
    font-size: 14px;
    margin-bottom: 12px;
}


}

@media (max-width: 480px) {
.owl-item .banner-caption .text-inner h2{
    font-size: 24px;
    margin-bottom: 10px;
}
.owl-item .banner-caption .text-inner h4{
    font-size: 16px;
    margin-bottom: 12px;
}
.owl-item .slider-item .banner-caption{
    bottom: 20px;
}
.owl-item .banner-caption .banner-man-img{
    position: relative;
    top: 80px;
    margin-top: 0;
}

}

@media (max-width: 640px) {
    
.owl-item .slider-item .banner-caption.tnit-text-top {
    top: 50px;
    left: 20px;
}
.text-inner .tnit-btn{
    font-size: 14px;
    padding: 12px 30px;
}


}

@media (max-width: 767px) {
 
.banner-caption .text-inner h2{
    font-size: 30px;
    margin-bottom: 15px;
}
.banner-caption .text-inner h4{
    font-size: 20px;
}
.text-inner,.banner-caption .banner-man-img {
    margin-top: 50px;
}
.tnit-text-top .text-inner,.tnit-text-top .text-inner{
    margin-top: 0px;
}
#tnit-banner-slider .owl-controls .owl-nav [class*="owl-"]{
    width: 45px;
    height: 45px;
    line-height: 45px;
}


}

@media (max-width: 991px) {
.owl-item .slider-item .tnit-text-top {
    top: 100px;
    left: 50px;
}
.owl-item .slider-item .tnit-text-top.text-center{
    left: 0;
}

}

@media (min-width: 768px) and (max-width: 1040px) {
.banner-caption .text-inner h2{
    font-size: 46px;
    margin-bottom: 20px;
}
.text-inner {
    margin-top: 50px;
}
.tnit-text-top .text-inner,.tnit-text-top .text-inner{
    margin-top: 0px;
}

}

@media (min-width: 991px) and (max-width: 1199px) {
.slider-item .tnit-text-top{
    top: 200px;
}
.text-inner {
    margin-top: 50px;
}
.tnit-text-top .text-inner,.tnit-text-top .text-inner{
    margin-top: 0px;
}



}