/* ------------------------
    General
------------------------*/
a:focus { text-decoration: none !important; }
a:focus, a:hover { color: #425edb; text-decoration: none !important; }
a, button, input { outline: medium none !important; color: #425edb; }

*::-moz-selection { background: #425edb; color: #fff; text-shadow: none; }
::-moz-selection { background: #425edb; color: #fff; text-shadow: none; }
::selection { background: #425edb; color: #fff; text-shadow: none; }


/* ------------------------
    Transition
------------------------*/
a, i, .btn, button, img, span, .animatedBackground, .contact-bg, .price-table, .price-table:before, .portfolio-item:before, .portfolio-item:after, .owl-item, .featured-item .featured-icon i, .featured-item, .portfolio-filter button, .post, .team-social-icon{-webkit-transition: all 0.5s ease-in-out 0s; -moz-transition: all 0.5s ease-in-out 0s; -ms-transition: all 0.5s ease-in-out 0s; -o-transition: all 0.5s ease-in-out 0s; transition: all 0.5s ease-in-out 0s; }
 

/* ------------------------
    Transform translate
------------------------*/

/*--translate-X--*/
.transform-x, .effect-1.effect-center{transform: translateX(-50%); -webkit-transform: translateX(-50%); -o-transform: translateX(-50%); -ms-transform: translateX(-50%); -moz-transform: translateX(-50%);}

/*--translate-Y--*/
.transform-y, .image-column, .align-center, .modal{transform: translateY(-50%); -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); -moz-transform: translateY(-50%);}

/*--translate-XY--*/
.clear-loader, .post-meta, .img-effect .img-2{transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%);}


/* ------------------------
    Box Shadow
------------------------*/
.box-shadow, .btn, #header-wrap.fixed-header, .breadcrumb, .post:hover, .post-meta, .team-images, .accordion .card-header a, .featured-item, .featured-item.left-pos.boxed, .service-box, .work-process, .portfolio-img, .testimonial, .testimonial:before, .testimonial:after{-webkit-box-shadow: 0px 0px 20px rgba(0,0,0,0.050); -moz-box-shadow: 0px 0px 20px rgba(0,0,0,0.050); box-shadow: 0px 0px 20px rgba(0,0,0,0.050);}
.post:hover, .modal-content, .work-process i, .price-title h3, .contact-main, .navbar-nav li ul, .price-table, .contact-form{-webkit-box-shadow: 7px 5px 30px rgba(72, 73, 121, 0.15); -moz-box-shadow: 7px 5px 30px rgba(72, 73, 121, 0.15); box-shadow: 7px 5px 30px rgba(72, 73, 121, 0.15);}


/* ------------------------
    Custom Margin
------------------------*/
.custom-mt-5{z-index: 99; position: relative; margin-top: -50px;}
.custom-mt-7{z-index: 99; position: relative; margin-top: -70px;}
.custom-mt-10{z-index: 99; position: relative; margin-top: -100px;}
.custom-mt-12{z-index: 99; position: relative; margin-top: -120px;}
.custom-mt-15{z-index: 99; position: relative; margin-top: -150px;}
.custom-mt-20{z-index: 99; position: relative; margin-top: -200px;}
.custom-mt-25{z-index: 99; position: relative; margin-top: -250px;}


/* ------------------------
    Custom Padding
------------------------*/
.custom-pt-18{ padding-top: 180px;}
.custom-pb-18{ padding-bottom: 180px;}


/* ------------------------
    Padding
------------------------*/
.px-10{padding-left: 100px !important; padding-right: 100px !important;}
.px-15{padding-left: 150px !important; padding-right: 150px !important;}
.px-20{padding-left: 200px !important; padding-right: 200px !important;}

.py-8{padding-top: 80px !important; padding-bottom: 80px !important;}
.py-10{padding-top: 100px !important; padding-bottom: 100px !important;}
.py-15{padding-top: 150px !important; padding-bottom: 150px !important;}
.py-20{padding-top: 200px !important; padding-bottom: 200px !important;}

.pl-10{padding-left: 100px !important;}
.pr-10{padding-right: 100px !important;}
.pt-8{padding-top: 80px !important;}
.pt-10{padding-top: 100px !important;}
.pt-15{padding-top: 150px !important;}
.pt-20{padding-top: 200px !important;}
.pb-10{padding-bottom: 100px !important;}
.pb-15{padding-bottom: 150px !important;}
.pb-17{padding-bottom: 170px !important;}
.pb-20{padding-bottom: 200px !important;}


/* ------------------------
    Margin
------------------------*/
.mt-8{margin-top: 80px !important;}
.mt-10{margin-top: 100px !important;}
.mt-15{margin-top: 150px !important;}

.my-8{margin-top: 80px !important; margin-bottom: 80px !important;}
.my-10{margin-top: 100px !important; margin-bottom: 100px !important;}
.my-15{margin-top: 150px !important; margin-bottom: 150px !important;}
.my-20{margin-top: 200px !important; margin-bottom: 200px !important;}


/* ------------------------
    Pre Loader
------------------------*/
#ht-preloader {background: #ffffff; bottom: 0; height: 100%; left: 0; overflow: hidden !important; position: fixed; right: 0; text-align: center; top: 0; width: 100%; z-index: 99999;}
.clear-loader {z-index: 999; box-sizing: border-box; display: inline-block; left: 50%; position: absolute; top: 50%;}
.loader {overflow: hidden; padding: 10px 0; width: 200px;}
.loader .loader-ball {background: #425edb; border-radius: 5px; display: block; height: 10px; left: 15px; position: absolute; top: 5px; width: 10px; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-name: along; -webkit-animation-timing-function: linear;}
.loader .loader-ball2 {background: #6b42db; border-radius: 5px; display: block; height: 10px; left: 15px; position: absolute; top: 5px; width: 10px; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-name: along; -webkit-animation-timing-function: linear; -webkit-animation-delay: -1s;}
.loader li {background-color: #00bff3; border-radius: 5px; display: inline-block; margin: 0; height: 10px; width: 30px; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-name: around; -webkit-animation-timing-function: linear;}
.loader li:nth-child(1) {-webkit-animation-delay: 0s;}
.loader li:nth-child(2) {background-color: #82ca9c; -webkit-animation-delay: 0.2s;}
.loader li:nth-child(3) {background-color: #f69679; -webkit-animation-delay: 0.4s;}
.loader li:nth-child(4) {background-color: #acd373; -webkit-animation-delay: 0.6s;}
.loader li:nth-child(5) {background-color: #959595; -webkit-animation-delay: 0.8s;}


/* ------------------------
    Row Eq Height
------------------------*/
.row-eq-height{ display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex;}
.row-eq-height > [class*='col-'] > div{height: 100%;}
.row-eq-height .align-item-middle > div{height: auto;}


/* ------------------------
    Background Overlay
------------------------*/
[data-overlay] {position:relative; z-index:0;}
[data-overlay]:before, .slide-overlay:before {position: absolute;  content: '';  background-color: #000000;  width: 100%;  height: 100%;  top: 0;  left: 0; z-index:-1;}
[data-overlay].white-overlay:before{background-color:#fff;}
[data-overlay].theme-overlay:before{background-color: #425edb;}
[data-overlay].grediant-overlay:before{background: rgb(66,94,219); background: linear-gradient(90deg, rgba(66,94,219,1) 20%, rgba(107,66,219,1) 100%);}
[data-overlay="1"]:before{opacity:0.1;}
[data-overlay="2"]:before{opacity:0.2;}
[data-overlay="3"]:before{opacity:0.3;}
[data-overlay="4"]:before{opacity:0.4;}
[data-overlay="5"]:before{opacity:0.5;}
[data-overlay="6"]:before{opacity:0.6;}
[data-overlay="7"]:before{opacity:0.7;}
[data-overlay="8"]:before{opacity:0.8;}
[data-overlay="9"]:before{opacity:0.9;}
[data-overlay="10"]:before{opacity:1;}
[data-overlay="0"]:before{opacity:0;}


/* ------------------------
    Scroll to Top
------------------------*/
.scroll-top {position: fixed; bottom: 30px; right: 30px; z-index: 600; opacity: 0; visibility: hidden; -webkit-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; -webkit-transform: translate3d(0, 200%, 0); -ms-transform: translate3d(0, 200%, 0); transform: translate3d(0, 200%, 0);}
.scroll-top a, .scroll-top a:visited {display: block; height: 60px; width: 60px; line-height: 60px; text-align: center; border-radius: 7px; -webkit-box-shadow: 0 0 15px 6px rgba(0,0,0,0.1); -moz-box-shadow: 0 0 15px 6px rgba(0,0,0,0.1); box-shadow: 0 0 15px 6px rgba(0,0,0,0.1); -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; font-size:32px; color: #ffffff; background: #425edb;}
.scroll-top a:hover, .scroll-top a:focus {color: #425edb; background: #ffffff;}
.scroll-top.scroll-visible {opacity: 1; visibility: visible; -webkit-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}


/* ------------------------
    Page Title
------------------------*/
.page-title {display: block; position: relative; padding: 170px 0; }
.page-title h1{font-size: 50px; color: #0e2949; line-height: 60px; font-weight: 700; text-transform: uppercase; margin-bottom: 20px;}
.page-title span{font-weight: normal; text-transform: capitalize;}
.breadcrumb {background: #ffffff; display: inline-block; margin: 0; text-transform: uppercase; color: #424141; font-weight: 700;}
.breadcrumb-item{display: inline-block;}
.breadcrumb-item a{color: #424141}
.breadcrumb-item.active, .breadcrumb-item a:hover{color: #425edb;}
.page-title-pattern {bottom: 0; position: absolute;}


/* ------------------------
    Animation
------------------------*/

/** effect-1 Animation **/
.effect-1 {position: absolute; right: 10%; top: 0; height: 200px; width: 200px; z-index: -1;}
.effect-1.effect-center{left: 50%;}
.effect-1 span {display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; height: 200px; width: 200px;}
.effect-1 span::before,
.effect-1 span::after {content: ""; display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; height: 200px; width: 200px; border: 10px solid rgba(66,94,219,0.5); border-radius: 50%; opacity: 0;
  -webkit-animation: loader-6-1 2s cubic-bezier(0.075, 0.820, 0.165, 1.000) infinite; animation: loader-6-1 2s cubic-bezier(0.075, 0.820, 0.165, 1.000) infinite;}

/** Morph Animation **/
.shape {align-items: center; justify-content: center; display: flex; height: 100%; position: absolute; width: 100%; top: 0; z-index: -1; left: 0;}
.shape > * {animation-duration: 25s; animation-iteration-count: infinite; animation-timing-function: cubic-bezier(0.17, 0.67, 0.83, 0.67); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 10px;}
.shape:nth-child(1) .shape-l-big {animation-name: morph-1; background: #e5e7ff;}
.shape:nth-child(1) .shape-l-med {animation-name: morph-2; background: rgba(66,94,219,0.8);}
.shape:nth-child(1) .shape-l-small {animation-name: morph-3;}
.shape-l-big {height: 98%; width: 98%;}
.shape-l-med {height: 87.5%; width: 87.5%;}
.shape-l-small {align-items: center; background: rgba(255,255,255,0.1); display: flex; justify-content: center; height: 75%; width: 75%;}

/** Triangle Animation **/
.triangle {width: 100%; height: 100%; position: absolute; right: 30%; top: -10%; z-index: -1}
.triangle svg {display: block; width: 100%; height: 100%;}
.triangle svg polygon{fill: none; stroke: #e8fdfa; stroke-width: 10px; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 145 76 145 76; stroke-dashoffset: 0; animation: pathTriangle 5s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;}

/** Mobile Animation **/
.page-1 {animation: page-1-animation 6000ms ease-in-out infinite;}
.page-2 {animation: page-2-animation 6000ms  ease-in-out infinite;}
.app-device-menu {animation: menu-animation 6000ms ease-in-out infinite;}
.app-device-menu g path {animation: menu-item-animation 6000ms ease-in-out infinite;}
.app-device-menu g path:nth-child(2) {animation-delay: 100ms;}
.app-device-menu g path:nth-child(3) {animation-delay: 200ms;}
.donut {transform-origin: center center; animation: donut-animation 6000ms  ease-in-out infinite;}

/** Rotation Animation **/
.anti-01-holder {width: 500px; height: 500px; opacity: 0.5; position: absolute; left: 0; top: 10%; -webkit-animation: rotation 6s infinite linear;}
.anti-01 {width: 450px; height: 450px; border-radius: 50%; border:80px solid rgba(107,66,219,1); position: absolute; left: 0px; top: 0px;}
.anti-01-holder.right{right: 0; left: inherit;}

/** Wave Animation **/
.wave-effect {position: absolute; width: 100%; overflow: hidden; height: 100%; bottom: -1px; z-index: 10;}
.wave {position: absolute; left: 0; width: 200%; height: 100%; background-repeat: repeat no-repeat !important; background-position: 0 bottom !important; transform-origin: center bottom; background-size: 50% 120px !important; animation: move_wave 10s linear infinite;}


/** effect-1 Animation **/
@-webkit-keyframes loader-6-1 {
  0%   { -webkit-transform: translate3d(0, 0, 0) scale(0); opacity: 1; }
  100% { -webkit-transform: translate3d(0, 0, 0) scale(1.5); opacity: 0; }
}
@keyframes loader-6-1 {
  0%   { transform: translate3d(0, 0, 0) scale(0); opacity: 1; }
  100% { transform: translate3d(0, 0, 0) scale(1.5); opacity: 0; }
}
.effect-1 span::after {
  -webkit-animation: loader-6-2 2s cubic-bezier(0.075, 0.820, 0.165, 1.000) .25s infinite;
          animation: loader-6-2 2s cubic-bezier(0.075, 0.820, 0.165, 1.000) .25s infinite;
}
@-webkit-keyframes loader-6-2 {
  0%   { -webkit-transform: translate3d(0, 0, 0) scale(0); opacity: 1; }
  100% { -webkit-transform: translate3d(0, 0, 0) scale(1); opacity: 0; }
}
@keyframes loader-6-2 {
  0%   { transform: translate3d(0, 0, 0) scale(0); opacity: 1; }
  100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0; }
}

/** Morph Animation **/
@keyframes morph-1 {
  0% {
    clip-path: polygon(93% 0, 100% 84%, 13% 100%, 0 11%);
  }
  20% {
    clip-path: polygon(100% 6%, 100% 91%, 6% 100%, 0 0);
  }
  40% {
    clip-path: polygon(100% 0, 94% 100%, 13% 100%, 0 11%);
  }
  60% {
    clip-path: polygon(100% 0, 100% 84%, 3% 100%, 0 15%);
  }
  80% {
    clip-path: polygon(100% 16%, 94% 100%, 3% 100%, 0 0);
  }
  100% {
    clip-path: polygon(93% 0, 100% 84%, 13% 100%, 0 11%);
  }
}
@keyframes morph-2 {
  0% {
    clip-path: polygon(100% 6%, 100% 91%, 6% 100%, 0 0);
  }
  20% {
    clip-path: polygon(100% 16%, 94% 100%, 3% 100%, 0 0);
  }
  40% {
    clip-path: polygon(90% 0, 100% 95%, 0 100%, 6% 0);
  }
  60% {
    clip-path: polygon(100% 0, 89% 100%, 0 100%, 8% 4%);
  }
  80% {
    clip-path: polygon(100% 4%, 89% 100%, 4% 100%, 0 1%);
  }
  100% {
    clip-path: polygon(100% 6%, 100% 91%, 6% 100%, 0 0);
  }
}
@keyframes morph-3 {
  0% {
    clip-path: polygon(100% 0, 94% 100%, 13% 100%, 0 11%);
  }
  20% {
    clip-path: polygon(100% 4%, 89% 100%, 4% 100%, 0 1%);
  }
  40% {
    clip-path: polygon(95% 0, 100% 88%, 0 100%, 4% 9%);
  }
  60% {
    clip-path: polygon(100% 8%, 96% 90%, 6% 100%, 0 0);
  }
  80% {
    clip-path: polygon(93% 0, 100% 84%, 13% 100%, 0 11%);
  }
  100% {
    clip-path: polygon(100% 0, 94% 100%, 13% 100%, 0 11%);
  }
}

/** Triangle Animation **/
@keyframes pathTriangle {
  33% {
    stroke-dashoffset: 74;
  }
  66% {
    stroke-dashoffset: 147;
  }
  100% {
    stroke-dashoffset: 221;
  }
}

/** Mobile Animation **/
@keyframes menu-animation {
  0%, 56%, 100% { 
    transform: translateY(-100%);
  }
  66%, 90% {
    transform: translateY(0%);
  }
}

@keyframes menu-item-animation {
  0%, 60% { 
    transform: translateX(-100%);
    opacity: 0;
  }
  64%, 100% {
    transform: translateX(0%);
    opacity: 0.4;
  }
}

@keyframes page-1-animation {
  0%, 23%, 100% { 
    transform: translateX(0);
    opacity: 1;
  }
  33%, 66%, 88% {
    transform: translateX(-50%);
    opacity: 0;
  }
}


@keyframes page-2-animation {
  0%, 23% { 
    transform: translateX(100%);
    opacity: 1;
    fill: #e3dbdb;
  }
  33%, 66% {
    transform: translateX(0%);
  }
  40% {
    fill: white;
  }
  55% {
    fill: white;
    opacity: 1;
  }
  68%, 100% {
    opacity: 0;
  }
}

@keyframes donut-animation {
  0%, 23% { 
    transform: scale(0) rotate(-360deg);
  }
  38%, 100% {
    transform: scale(1) rotate(0deg);
  }
}


/** Rotation Animation **/
@-webkit-keyframes rotation {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(359deg);
    }
}
@-webkit-keyframes anti-rotation {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(-359deg);
    }
}

/** Wave Animation **/
@keyframes move_wave {
    0% {
        transform: translateX(0) translateZ(0) scaleY(1)
    }
    50% {
        transform: translateX(-25%) translateZ(0) scaleY(0.55)
    }
    100% {
        transform: translateX(-50%) translateZ(0) scaleY(1)
    }
}

/** Loader Animation **/
@-webkit-keyframes around {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
  }
}
@-webkit-keyframes along {
  0% {
    left: 0;
    top: 5px;
  }
  5% {
    top: 3px;
  }
  10% {
    top: 5px;
  }
  15% {
    top: 3px;
  }
  20% {
    top: 5px;
  }
  25% {
    top: 3px;
  }
  30% {
    top: 5px;
  }
  35% {
    top: 3px;
  }
  40% {
    top: 5px;
  }
  45% {
    top: 3px;
  }
  50% {
    left: 100%;
    top: 5px;
  }
  100% {
    left: 100%;
  }
}

@-webkit-keyframes fill_color{
    0%{ box-shadow: inset 0px 0px 0px 0px rgba(255,255,255,0.1);}
    100%{ box-shadow: inset 0px -20px 0px 0px rgba(255,255,255,1);}
}
@-moz-keyframes fill_color{
    0%{ box-shadow: inset 0px 0px 0px 0px rgba(255,255,255,0.1);}
    100%{ box-shadow: inset 0px -20px 0px 0px rgba(255,255,255,1);}
}
@keyframes fill_color{
    0%{ box-shadow: inset 0px 0px 0px 0px rgba(255,255,255,0.1);}
    100%{ box-shadow: inset 0px -20px 0px 0px rgba(255,255,255,1);}
}