/*** font family ***/
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700');
.itpl-layout{
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    line-height: 18px;
}
/***------------------- itpl-framework --------------------***/
a{
    cursor: pointer;
}
/* flex & grid */
.itpl-flex{
    display: flex !important;
}
.itpl-grid{
    display: flex !important;
    flex-wrap: wrap;
}
.itpl-grid-small{
    margin-left: -20px;
}
.itpl-grid-small > *{
    padding-left: 20px;
}
.itpl-flex-top{
    align-items: flex-start;
}
.itpl-flex-middle{
    align-items: center;
}
.itpl-flex-bottom{
    align-items: flex-end;
}
.itpl-flex-center{
    justify-content: center;
}
.itpl-flex-between{
    justify-content: space-between;
}
.itpl-flex-around{
    justify-content: space-around;
}
.itpl-content-main {
    z-index: 9999;
}
/* width */
[class*='itpl-width'],
[class*='itpl-child-width']>* {
    box-sizing: border-box;
    width: 100%;
}
.itpl-width-1-1{
    width: 100%;
}
.itpl-width-1-2{
    width: 50%;
}
.itpl-width-1-3{
    width: 33.333%;
}
.itpl-width-2-3{
    width: 66.666%;
}
.itpl-width-1-4{
    width: 25%;
}
.itpl-width-3-4{
    width: 75%;
}
.itpl-width-1-5{
    width: 20%;
}
.itpl-width-4-5{
    width: 80%;
}
.itpl-width-2-5{
    width: 40%;
}
.itpl-width-3-5{
    width: 60%;
}
.itpl-child-width-1-2 > *{
    width: 50%;
}
.itpl-child-width-1-3 > *{
    width: 33.3333%;
}
.itpl-margin{
    margin: 10px;
}
.itpl-margin-top{
    margin-top: 10px !important;
}
.itpl-margin-right{
    margin-right: 10px;
}
.itpl-margin-bottom{
    margin-bottom: 10px;
}
.itpl-margin-left{
    margin-left: 10px;
}
.itpl-relative{
    position: relative;
}
.itpl-absolute{
    position: absolute!important;
}
.itpl-absolute-center{
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.itpl-absolute-top{ top: 0px; }
.itpl-absolute-right{ right: 0px; }
.itpl-absolute-bottom{ bottom: 0px; }
.itpl-absolute-left{ left: 0px; }

.itpl-absolute-top10{ top: 10px; }
.itpl-absolute-right10{ right: 10px; }
.itpl-absolute-bottom10{ bottom: 10px; }
.itpl-absolute-left10{ left: 10px; }

.itpl-absolute-top20{ top: 20px; }
.itpl-absolute-right20{ right: 20px; }
.itpl-absolute-bottom20{ bottom: 20px; }
.itpl-absolute-left20{ left: 20px; }

.itpl-text-muted{
    color: #aaa;
}
.itpl-bg-black{
    background-color: #000;
    color: #fff;
}
.itpl-bg-white{
    background-color: #fff;
}
.itpl-bg-yellow{
    background: #FFF001;
}
.itpl-bg-red{
    background: #E12A22;
    color: #fff;
}
.itpl-color-red{
    color: #E12A22;
}
.itpl-bg-red-light{
    background: #FFEAEA;
}
.itpl-bg-blue-light{
    background: #CDE3F8;
}
.itpl-bg-purple{
    background: #D800F9;
    color: #fff;
}
.itpl-bg-brown{
    background: #CA8661;
    color: #fff;
}
.itpl-bg-gradient-red{
    color: #fff;
    background: rgb(241,97,97);
    background: linear-gradient(90deg, rgba(241,97,97,1) 0%, rgba(239,86,142,1) 100%);
    padding: 10px 15px;
    border-radius: 5px;
    border: 2px solid rgba(255,255,255,0.4);
}
.itpl-bg-gradient-red a{
    color: #fff !important;
}
.itpl-bg-gradient-red a:hover{
    color: #fdcccc !important;
}
.itpl-bg-gradient-red .itpl-text-muted{
    color: #fdcccc;
}
.itpl-bg-gradient-green{
    color: #fff;
    background: rgb(125,198,129);
    background: linear-gradient(90deg, rgba(125,198,129,1) 0%, rgba(91,188,119,1) 100%);
    padding: 10px 15px;
    border-radius: 5px;
    border: 2px solid rgba(255,255,255,0.4);
}
.itpl-bg-gradient-green a{
    color: #fff !important;
}
.itpl-bg-gradient-green a:hover{
    color: #c9f7cc !important;
}
.itpl-bg-gradient-green .itpl-text-muted{
    color: #c9f7cc;
}
.itpl-circle{
    border-radius: 50%!important;
}
.itpl-radius-5{
    border-radius: 5px;
}
.itpl-radius-10{
    border-radius: 10px;
}
.itpl-radius-15{
    border-radius: 15px;
}
.itpl-border-bottom{
    border-bottom: 1px solid #ddd;
}
.itpl-text-center{
    text-align: center;
}
.itpl-text-medium{
    font-size: 22px !important;
}
.itpl-text-large{
    font-size: 45px !important;
}
.itpl-display-block{
    display: block !important;
}



/*Animations*/
.itpl-anim-underline{
    display: inline !important;
    background-image: linear-gradient(120deg, #E12A22 0%, #E12A22 100%);
    background-repeat: no-repeat;
    background-size: 0% 1px;
    background-position: 50% 100%;
    padding-bottom: 2px;
    line-height: 23px;
}
.itpl-anim-underline:hover{
    background-size: 100% 1px;
}
.itpl-anim-zoomin{
    transition: 300ms;
}
.itpl-anim-zoomin:hover{
    transform: scale(0.9);
}
.itpl-anim-zoomout{
    transition: 300ms;
}
.itpl-anim-zoomout:hover{
    transform: scale(1.1);
}
.itpl-anim-counter{
    overflow: hidden;
}
.itpl-anim-counter > span{
    display: inline-block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    box-sizing: border-box;
    transition: 300ms;
}
.itpl-anim-counter > i{
    display: inline-block;
    font-style: normal;
    width: 30px !important;
    height: 30px !important;
    line-height: 30px !important;
    box-sizing: border-box;
    position: absolute;
    left: 0px;
    top: 100%;
    transition: 300ms;
    opacity: 0;
}
.itpl-anim-counter > i > img{
    max-width: 22px;
    max-height: 22px;
    margin-top: 3px;
}
.itpl-image-main:hover .itpl-anim-counter > span,
.itpl-anim-counter:hover > span{
    transform: translateY(-100%);
    opacity: 0;
}
.itpl-image-main:hover .itpl-anim-counter > i,
.itpl-anim-counter:hover > i{
    top: 0px;
    opacity: 1;
}
.itpl-anim-hide-counter:before,
.itpl-anim-hide-counter .itpl-counter{
    transition: 300ms;
}
.itpl-anim-hide-counter:hover:before,
.itpl-anim-hide-counter:hover .itpl-counter{
    opacity: 0;
}
.itpl-counter:hover .itpl-post-recent .itpl_inner_main:before{
    opacity: 0;
}
.itpl-anim-scale-up{
    overflow: hidden;
}
.itpl-anim-scale-up > .itpl-img,
.itpl-anim-scale-up > img{
    transition: 200ms;
}
.itpl-anim-scale-up:hover > .itpl-img,
.itpl-anim-scale-up:hover > img,
.itpl_carousel .swiper-slide:hover .itpl-anim-scale-up > img{
    transform: scale(1.1);
}
.itpl-anim-scale-down{
    overflow: hidden;
}
.itpl-anim-scale-down > .itpl-img,
.itpl-anim-scale-down > img{
    transition: 200ms;
    transform: scale(1.1);
}
.itpl-anim-scale-down:hover > .itpl-img,
.itpl-anim-scale-down:hover > img,
.itpl_carousel .swiper-slide:hover .itpl-anim-scale-down > img{
    transform: scale(1);
}
.itpl-anim-bgdark-rotate{
    overflow: hidden;
}
.itpl-anim-bgdark-rotate:after{
    content: " ";
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    background: rgba(0,0,0,0.4);
    transition: 400ms;
    transform-origin: top left;
    transform: rotate(90deg);
}
.itpl-anim-bgdark-rotate:hover:after{
    transform: rotate(0deg);
}
.itpl-anim-bgdark-scaleup:before{
    transform: scale(0.8);
    opacity: 0;
}
.itpl-anim-bgdark-scaleup:hover:before{
    opacity: 1;
    transform: scale(1);
}
.itpl-anim-bgdark-scaleup:after{
    content: " ";
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    background: rgba(0,0,0,0.2);
    transition: 450ms;
    opacity: 0;
    transform: scale(0.3);
}
.itpl-anim-bgdark-scaleup:hover:after{
    opacity: 1;
    transform: scale(1);
}

.itpl-anim-bgdark-scaledown:before{
    opacity: 0;
    transform: scale(1);
    transition: 450ms;
}
.itpl-anim-bgdark-scaledown:hover:before{
    opacity: 0.75;
    transform: scale(0.85);
}
.itpl-anim-bgdark-scaledown:after{
    content: " ";
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    background: rgba(0,0,0,0.5);
    transition: 300ms;
    opacity: 0;
    transform: scale(0.6);
}
.itpl-anim-bgdark-scaledown:hover:after{
    opacity: 1;
    transform: scale(1);
}
.itpl-anim-bgdark-bottomtop:after{
    content: " ";
    position: absolute;
    left: 0px;
    bottom: 0px;
    right: 0px;
    background: rgba(0,0,0,0.5);
    transition: 450ms;
    top: 100%;
}
.itpl-anim-bgdark-bottomtop:hover:after{
    -webkit-animation: bgdark-bottomtop 600ms ease-in-out forwards;
    animation: bgdark-bottomtop 600ms ease-in-out forwards;
}
@keyframes bgdark-bottomtop {
    45%{
        top: 0px;
        bottom: 0px;
    }
    70%{
        top: 0px;
        bottom: 0px;
    }
    100%{
        top: 0px;
        bottom: 100%;
    }
}
.itpl-anim-bgdark-skew-y{
    overflow: hidden;
}
.itpl-anim-bgdark-skew-y:after{
    content: " ";
    position: absolute;
    top: 50%;
    left: 0px;
    bottom: 0px;
    right: 0px;
    background: rgba(0,0,0,0.5);
    transition: 400ms;
    transform: skewY(90deg) translateY(-50%);
    height: 0px;
    overflow: hidden;
}
.itpl-anim-bgdark-skew-y:hover:after{
    transform: skewY(0deg) translateY(-50%);
    height: 100%;
}
.itpl-anim-bgdark-skew-x{
    overflow: hidden;
}
.itpl-anim-bgdark-skew-x:after{
    content: " ";
    position: absolute;
    top: 0px;
    left: 50%;
    bottom: 0px;
    right: 0px;
    background: rgba(0,0,0,0.5);
    transition: 300ms;
    transform: skewX(90deg) translateX(-50%);
    transform-origin: center;
    width: 0px;
    overflow: hidden;
}
.itpl-anim-bgdark-skew-x:hover:after{
    transform: skewX(0deg) translateX(-50%);
    width: 100%;
    transition: 700ms;
}
.itpl-anim-content-go-top .itpl-content-main{
    transition: 300ms;
}
.itpl-anim-content-go-top:hover .itpl-content-main{
    margin-bottom: 30px !important;
}