/*================
 Template Name: Savy - Css3 Image Hover Animation Effects
 Description: Savy - Css3 Image Hover Animation Effects
 Version: 1.0
 Author: https://themeforest.net/user/epic_theme

 Primary Color: #FFD500
 Secondary Color: #2FF2DF
 Text Black Color: #111111
 Text Gray Color: #707070

=======================*/

/*TABLE OF CONTENTS FOR DEMO PURPOSE ONLY*/
/*=====================
01. RESET CSS
02. BASE TYPOGRAPHY
03. PRE DEFINE CLASSES CSS
04. PRELOADER CSS
05. BACK TO TOP CSS
06. HEADING SECTION CSS
=======================*/


/*CARD STYLES CSS*/
/*=====================
07. CARD BOX STYLE 1 CSS
08. CARD BOX STYLE 2 CSS
09. CARD BOX STYLE 3 CSS
10. CARD BOX STYLE 4 CSS
11. CARD BOX STYLE 5 CSS
12. CARD BOX STYLE 6 CSS
13. CARD BOX STYLE 7 CSS
14. CARD BOX STYLE 8 CSS
15. CARD BOX STYLE 9 CSS
16. CARD BOX STYLE 10 CSS
17. CARD BOX STYLE 11 CSS
18. CARD BOX STYLE 12 CSS
19. CARD BOX STYLE 13 CSS
20. CARD BOX STYLE 14 CSS
21. CARD BOX STYLE 15 CSS
22. CARD BOX STYLE 16 CSS
23. CARD BOX STYLE 17 CSS
24. CARD BOX STYLE 18 CSS
=======================*/

/* -----------------------------------------
			   01. RESET CSS
-------------------------------------------- */

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

body {
    line-height: 1;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

html {
    overflow-y: scroll;
    font-size: 15px;
}

/* -----------------------------------------
           02. BASE TYPOGRAPHY
-------------------------------------------- */

body, h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, p, a {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}

body {
    background-color: #ffffff;
    font-family: 'Open Sans', sans-serif;
    font-size: 1rem;
    color: #707070;
    font-weight: 400;
    line-height: 1.85;
}

h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5 {
    margin: 0 0 1rem;
    font-family: 'Work Sans', sans-serif;
    font-weight: 600;
    line-height: 1.35;
    color: #111111;
}

h1 {
    margin-top: 0;
    font-size: 2.852em;
}

h2 {
    font-size: 2.125em;
}

h3 {
    font-size: 1.853em;
}

h4 {
    font-size: 1.563em;
}

h5 {
    font-size: 1.126em;
}

a {
    color: #3264f5;
    text-decoration: none !important;
    background-color: transparent;
    transition: all .3s ease-in-out;
}
/*========================================
        03. PRE DEFINE CLASS CSS
==========================================*/
.ptb-100 {
    padding: 100px 0;
}

.gray-light-bg {
    background: #f7f7f7;
}

.primary-bg {
    background: #FFD500;
}

.secondary-bg {
    background: #2FF2DF;
}

.color-primary {
    color: #3264f5;
}

.color-secondary {
    color: #7202bb
}

.white-bg {
    background: #ffffff;
}

.badge::before {
  display: none;
}

/*=========================================
            04. PRELOADER CSS
============================================*/

.preloader {
  position: fixed;
  left: 0;
  width: 0;
  height: 100%;
  width: 100%;
  text-align: center;
  z-index: 9999999;
  -webkit-transition: .9s;
  transition: .9s;
}

.preloader .loader {
  position: absolute;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: inline-block;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 45%;
  -webkit-transform: translateY(-45%);
          transform: translateY(-45%);
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

.preloader .loader .loader-outter {
  position: absolute;
  border: 4px solid #000;
  border-left-color: transparent;
  border-bottom: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  -webkit-animation: loader-outter 1s cubic-bezier(0.42, 0.61, 0.58, 0.41) infinite;
          animation: loader-outter 1s cubic-bezier(0.42, 0.61, 0.58, 0.41) infinite;
}

.preloader .loader .loader-inner {
  position: absolute;
  border: 4px solid #000;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  left: calc(50% - 20px);
  top: calc(50% - 20px);
  border-right: 0;
  border-top-color: transparent;
  -webkit-animation: loader-inner 1s cubic-bezier(0.42, 0.61, 0.58, 0.41) infinite;
          animation: loader-inner 1s cubic-bezier(0.42, 0.61, 0.58, 0.41) infinite;
}

.preloader::before, .preloader::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 60%;
  z-index: -1;
  background: #FFD500;
  -webkit-transition: .9s;
  transition: .9s;
}

.preloader::after {
  top: auto;
  bottom: 0;
}

.preloader.preloader-deactivate {
  visibility: hidden;
}

.preloader.preloader-deactivate::after, .preloader.preloader-deactivate::before {
  height: 0;
}

.preloader.preloader-deactivate .loader {
  opacity: 0;
  visibility: hidden;
}

@-webkit-keyframes loader-outter {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes loader-outter {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@-webkit-keyframes loader-inner {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(-360deg);
            transform: rotate(-360deg);
  }
}

@keyframes loader-inner {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(-360deg);
            transform: rotate(-360deg);
  }
}

/*=========================================
            05. BACK TO TOP CSS
============================================*/

.go-top {
  position: fixed;
  cursor: pointer;
  top: 0;
  right: 15px;
  color: #ffffff;
  background: #2ff2df;
  z-index: 4;
  width: 40px;
  text-align: center;
  height: 42px;
  line-height: 42px;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: .9s;
  transition: .9s;
}

.go-top.active {
  top: 98%;
  -webkit-transform: translateY(-98%);
          transform: translateY(-98%);
  opacity: 1;
  visibility: visible;
}

.go-top i {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  left: 0;
  right: 0;
  margin: 0 auto;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

.go-top i:last-child {
  opacity: 0;
  visibility: hidden;
  top: 60%;
}

.go-top::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: #ffd500;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

.go-top:hover, .go-top:focus {
  color: #ffffff;
}

.go-top:hover::before, .go-top:focus::before {
  opacity: 1;
  visibility: visible;
}

.go-top:hover i:first-child, .go-top:focus i:first-child {
  opacity: 0;
  top: 0;
  visibility: hidden;
}

.go-top:hover i:last-child, .go-top:focus i:last-child {
  opacity: 1;
  visibility: visible;
  top: 50%;
}

/*=========================================
            06. SECTION HEADING CSS
============================================*/

.section-heading .title span {
    position: relative;
}

.section-heading .title span::before {
    content: '';
    height: 60px;
    width: 105px;
    position: absolute;
    left: -7px;
    top: -8px;
    z-index: -1;
    border-radius: 8px;
    background: #2FF2DF;
}

/*=========================================
            07. CARD BOX STYLE 1 CSS
============================================*/

.card-box-style1 {position: relative;overflow: hidden;background: #000;}
.card-box-style1 * {-webkit-transition: all 0.45s ease;transition: all 0.45s ease;}
.card-box-style1 *::before,
.card-box-style1 *::after {-webkit-transition: all 0.45s ease;transition: all 0.45s ease;}
.card-box-style1 img {vertical-align: top;backface-visibility: hidden;}
.card-box-style1 .card-hover {position: absolute;top: 0;bottom: 0;left: 0;right: 0;align-items: center;display: flex;flex-direction: column;justify-content: center;line-height: 1.1em;opacity: 0;z-index: 2;-webkit-transition-delay: 0s;transition-delay: 0s;}
.card-box-style1 .card-hover h3 {margin: 0;text-transform: uppercase;color: #fff;}
.card-box-style1 .card-hover h3 span {display: block;font-weight: normal;}
.card-box-style1 .card-hover:hover {opacity: 1;-webkit-transition-delay: 0.1s;transition-delay: 0.1s;}
.card-box-style1::before,
.card-box-style1::after {background-color: rgba(0, 0, 0, 0.5);border-top: 50px solid rgba(0, 0, 0, 0.5);border-bottom: 50px solid rgba(0, 0, 0, 0.5);position: absolute;top: 0;bottom: 0;left: 0;right: 0;content: '';z-index: 1;opacity: 0;-webkit-transform: scaleY(2);transform: scaleY(2);-webkit-transition: all 0.3s ease;transition: all 0.3s ease;}
.card-box-style1:hover::before,
.card-box-style1:hover::after {-webkit-transform: scale(1);transform: scale(1);opacity: 1;}

/* responsive */
@media only screen and (max-width: 767px) {
  .card-box-style1 {margin-bottom: 50px;}
  .card-box-style1 img {width: 100%;}
}

/*=========================================
            08. CARD BOX STYLE 2 CSS
============================================*/

.card-box-style2 {position: relative;overflow: hidden;background: #000;}
.card-box-style2 * {-webkit-transition: all 0.25s ease;transition: all 0.25s ease;}
.card-box-style2 *::before {-webkit-transition: all 0.25s ease;transition: all 0.25s ease;}
.card-box-style2 img {vertical-align: top;backface-visibility: hidden;}
.card-box-style2 .card-hover {position: absolute;top: 0;bottom: 0;left: 0;right: 0;z-index: 1;align-items: center;display: flex;flex-direction: column;justify-content: center;}
.card-box-style2 .card-hover h3,
.card-box-style2 .card-hover h5 {margin: 0;opacity: 0;letter-spacing: 1px;}
.card-box-style2 .card-hover h3 {margin-bottom: 5px;color: #fff;-webkit-transform: translateY(-100%);transform: translateY(-100%);text-transform: uppercase;-webkit-transition-delay: 0.05s;transition-delay: 0.05s;}
.card-box-style2 .card-hover h5 {font-weight: normal;background-color: #2FF2DF;color: #000;padding: 3px 10px;-webkit-transform: translateY(-100%);transform: translateY(-100%);-webkit-transition-delay: 0s;transition-delay: 0s;}
.card-box-style2::before {position: absolute;top: 10px;bottom: 10px;left: 10px;right: 10px;top: 100%;content: '';background-color: rgba(0, 0, 0, 0.5);-webkit-transition: all 0.25s ease;transition: all 0.25s ease;-webkit-transition-delay: 0.25s;transition-delay: 0.25s;}
.card-box-style2:hover::before {top: 10px;-webkit-transition-delay: 0s;transition-delay: 0s;}
.card-box-style2:hover .card-hover h3,
.card-box-style2:hover .card-hover h5 {-webkit-transform: translateY(0);transform: translateY(0);opacity: 1;}
.card-box-style2:hover .card-hover h3 {-webkit-transition-delay: 0.3s;transition-delay: 0.3s;}
.card-box-style2:hover .card-hover h5 {-webkit-transition-delay: 0.2s;transition-delay: 0.2s;}

/* responsive */
@media only screen and (max-width: 767px) {
  .card-box-style2 {margin-bottom: 50px;}
  .card-box-style2 img {width: 100%;}
}



/*=========================================
            09. CARD BOX STYLE 3 CSS
============================================*/

.card-box-style3 {position: relative;overflow: hidden;background: #000;}
.card-box-style3 * {-webkit-transition: all 0.35s;transition: all 0.35s;}
.card-box-style3 img {vertical-align: top;backface-visibility: hidden;}
.card-box-style3 .card-hover {position: absolute;top: 0;bottom: 0;left: 0;right: 0;padding: 20px;background-color: rgba(0, 0, 0, 0.75);}
.card-box-style3 .card-hover h3 {margin-bottom: 3px;color: #fff;}
.card-box-style3 .card-hover h5 {font-weight: normal;color: #707070;margin: 0;}
.card-box-style3:hover .card-hover {top: 20px;left: 20px;right: 20px;bottom: 20px;background-color: #fff;}
.card-box-style3:hover h3 {color: #000;}

/* responsive */
@media only screen and (max-width: 767px) {
  .card-box-style3 {margin-bottom: 50px;}
  .card-box-style3 img {width: 100%;}
}


/*=========================================
            10. CARD BOX STYLE 4 CSS
============================================*/

.card-box-style4 {position: relative;overflow: hidden;background: #000;}
.card-box-style4 * {-webkit-transition: all 0.35s;transition: all 0.35s;}
.card-box-style4 *::before,
.card-box-style4 *::after {-webkit-transition: all 0.35s;transition: all 0.35s;}
.card-box-style4 img {vertical-align: top;backface-visibility: hidden;}
.card-box-style4 .card-hover {position: absolute;left: 0;bottom: 0;padding: 15px 20px;}
.card-box-style4 .card-hover h3,
.card-box-style4 .card-hover h5 {margin-bottom: 0;opacity: 0;color: #fff;}
.card-box-style4 .card-hover h3 {-webkit-transition-delay: 0.3s;transition-delay: 0.3s;}
.card-box-style4 .card-hover h5 {-webkit-transition-delay: 0.35s;transition-delay: 0.35s;}
.card-box-style4::before,
.card-box-style4::after {content: '';position: absolute;top: 20px;right: 20px;background-color: #fff;z-index: 1;opacity: 0;-webkit-transition: all 0.4s ease;transition: all 0.4s ease;}
.card-box-style4::before {width: 0;height: 1px;}
.card-box-style4::after {width: 1px;height: 0;}
.card-box-style4:hover:before {width: 40px;}
.card-box-style4:hover::after {height: 40px;}
.card-box-style4:hover::before,
.card-box-style4:hover::after {opacity: 1;-webkit-transition-delay: 0.25s;transition-delay: 0.25s;}
.card-box-style4:hover img {zoom: 1;filter: alpha(opacity=20);-webkit-opacity: 0.2;opacity: 0.2;}
.card-box-style4:hover h3,
.card-box-style4:hover h5 {opacity: 1;}

/* responsive */
@media only screen and (max-width: 767px) {
  .card-box-style4 {margin-bottom: 50px;}
  .card-box-style4 img {width: 100%;}
}


/*=========================================
            11. CARD BOX STYLE 5 CSS
============================================*/

.card-box-style5 {position: relative;overflow: hidden;background: #fff;}
.card-box-style5 * {-webkit-transition: all 0.45s ease;transition: all 0.45s ease;}
.card-box-style5 *::after {-webkit-transition: all 0.45s ease;transition: all 0.45s ease;}
.card-box-style5 img {vertical-align: top;backface-visibility: hidden;}
.card-box-style5 .card-hover {position: absolute;top: 0;bottom: 0;left: 0;right: 0;align-items: center;z-index: 1;display: flex;flex-direction: column;justify-content: center;line-height: 1.1em;opacity: 0;-webkit-transition-delay: 0s;transition-delay: 0s;}
.card-box-style5 .card-hover h3 {letter-spacing: 1px;margin: 0;text-transform: uppercase;}
.card-box-style5 .card-hover h3 span {display: block;font-weight: normal;}
.card-box-style5 .card-hover:hover {opacity: 1;-webkit-transition-delay: 0.1s;transition-delay: 0.1s;}
.card-box-style5::after {content: '';background-color: #2FF2DF;height: 150%;bottom: -149%;left: 0;right: 0;position: absolute;-webkit-transition: all 0.5s linear;transition: all 0.5s linear;}
.card-box-style5:hover {opacity: 1;-webkit-transition-delay: 0.4s;transition-delay: 0.4s;}
.card-box-style5:hover img {filter: alpha(opacity=10);-webkit-opacity: 0.1;opacity: 0.1;}
.card-box-style5:hover::after {bottom: 99%;}

/* responsive */
@media only screen and (max-width: 767px) {
  .card-box-style5 {margin-bottom: 50px;}
  .card-box-style5 img {width: 100%;}
}


/*=========================================
            12. CARD BOX STYLE 6 CSS
============================================*/

.card-box-style6 {position: relative;overflow: hidden;background: #000;}
.card-box-style6 * {-webkit-transition: all 0.35s ease;transition: all 0.35s ease;}
.card-box-style6 *::before {-webkit-transition: all 0.35s ease;transition: all 0.35s ease;}
.card-box-style6 img {vertical-align: top;backface-visibility: hidden;}
.card-box-style6 .card-hover {bottom: 30px;left: 0;position: absolute;z-index: 0;}
.card-box-style6 .card-hover h4 {background-color: #2FF2DF;color: #000;letter-spacing: 1px;margin: 0;padding: 5px 10px;text-transform: uppercase;z-index: 1;}
.card-box-style6 .card-hover::before {background-color: #ffffff;bottom: -5px;content: '';left: 0;position: absolute;right: 100%;top: -5px;z-index: -1;}
.card-box-style6:hover .card-hover::before {right: -5px;}
.card-box-style6:hover img {filter: alpha(opacity=10);-webkit-opacity: 0.1;opacity: 0.1;}

/* responsive */
@media only screen and (max-width: 767px) {
  .card-box-style6 {margin-bottom: 50px;}
  .card-box-style6 img {width: 100%;}
}


/*=========================================
            13. CARD BOX STYLE 7 CSS
============================================*/

.card-box-style7 {position: relative;overflow: hidden;background-color: #000;}
.card-box-style7 * {-webkit-transition: all 0.25s ease;transition: all 0.25s ease;}
.card-box-style7 img {max-width: 100%;position: relative;vertical-align: top;filter: alpha(opacity=50);-webkit-opacity: 0.5;opacity: 0.5;}
.card-box-style7 .card-hover {position: absolute;top: 0;bottom: 0;left: 0;right: 0;z-index: 1;}
.card-box-style7 .card-hover h3 {-webkit-transform: translateY(-100%);transform: translateY(-100%);background-color: #000000;top: 0;color: #fff;letter-spacing: -0.4px;margin: 0;padding: 10px 20px;position: absolute;width: 100%;}
.card-box-style7 .card-hover p {position: absolute;width: 100%;top: 35%;padding: 50px 20px;opacity: 0;text-align: center;-webkit-transition-delay: 0.15s;transition-delay: 0.15s;color: #fff;}
.card-box-style7 .card-icon {position: absolute;top: 0;bottom: 0;left: 0;right: 0;align-items: center;background-color: rgba(47, 242, 223, 0.75);display: flex;font-size: 65px;justify-content: center;opacity: 0;}
.card-box-style7 i {position: absolute;top: 50%;left: 50%;font-size: 30px;-webkit-transform: translate(-50%, -50%) scale(1);transform: translate(-50%, -50%) scale(1);color: #fff;}
.card-box-style7:hover .card-hover h3 {-webkit-transform: translateY(0%);transform: translateY(0%);}
.card-box-style7:hover .card-hover p {opacity: 1;}
.card-box-style7:hover .card-overlay {opacity: 1;}
.card-box-style7:hover i {opacity: 0;}

/* responsive */
@media only screen and (max-width: 767px) {
  .card-box-style7 {margin-bottom: 50px;}
  .card-box-style7 img {width: 100%;}
}


/*=========================================
            14. CARD BOX STYLE 8 CSS
============================================*/

.card-box-style8 {position: relative;overflow: hidden;-webkit-transform: translateZ(0);transform: translateZ(0);}
.card-box-style8 * { -webkit-transition: all 0.4s ease;transition: all 0.4s ease;}
.card-box-style8 img {max-width: 100%;position: relative;vertical-align: top;}
.card-box-style8 .card-hover {position: absolute;top: 20px;bottom: 20px;left: 20px;right: 20px;background-color: #2FF2DF;-webkit-transform: translateX(50%);transform: translateX(50%);opacity: 0;}
.card-box-style8 .card-hover i {position: absolute;top: 50%;left: 50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);font-size: 4em;z-index: 1;color: #fff;}
.card-box-style8:hover .card-hover {opacity: 1;-webkit-transform: translateX(0);transform: translateX(0);}

/* responsive */
@media only screen and (max-width: 767px) {
  .card-box-style8 {margin-bottom: 50px;}
  .card-box-style8 img {width: 100%;}
}


/*=========================================
            15. CARD BOX STYLE 9 CSS
============================================*/

.card-box-style9 {position: relative;overflow: hidden;background: #2FF2DF;}
.card-box-style9 * {-webkit-transition: all 0.45s ease;transition: all 0.45s ease;}
.card-box-style9 *::after {-webkit-transition: all 0.45s ease;transition: all 0.45s ease;}
.card-box-style9 img {vertical-align: top;backface-visibility: hidden;}
.card-box-style9 .card-hover {position: absolute;top: 0;bottom: 0;left: 0;right: 0;z-index: 1;line-height: 1em;opacity: 0;}
.card-box-style9 .card-hover h3 { position: absolute;left: 10px;bottom: 10px;font-weight: 600;line-height: 1.1em;margin: 0;text-transform: uppercase;}
.card-box-style9::after {background-color: #fff;opacity: 0.6;top: 0;bottom: 0;content: '';left: -100%;position: absolute;width: 200px;box-shadow: 0 0 100px white;-webkit-transform: skew(-20deg);transform: skew(-20deg);-webkit-transition: all 0.6s ease;transition: all 0.6s ease;}
.card-box-style9:hover img {opacity: 0.4;-webkit-filter: grayscale(100%);filter: grayscale(100%);}
.card-box-style9:hover::after {left: 200%;}
.card-box-style9:hover .card-hover {opacity: 1;}

/* responsive */
@media only screen and (max-width: 767px) {
  .card-box-style9 {margin-bottom: 50px;}
  .card-box-style9 img {width: 100%;}
}


/*=========================================
            16. CARD BOX STYLE 10 CSS
============================================*/

.card-box-style10 {position: relative;overflow: hidden;background: rgba(0,0,0,0.5);}
.card-box-style10 * {-webkit-transition: all 0.45s ease;transition: all 0.45s ease;}
.card-box-style10 *::after {-webkit-transition: all 0.45s ease;transition: all 0.45s ease;}
.card-box-style10 img {vertical-align: top;backface-visibility: hidden;}
.card-box-style10 .card-hover {position: absolute;top: 0;bottom: 0;left: 0;right: 0;align-items: center;z-index: 1;display: flex;flex-direction: column;justify-content: center;line-height: 1em;opacity: 0;}
.card-box-style10 .card-hover h3 {margin: 0;text-transform: uppercase;}
.card-box-style10 .card-hover h3 span {display: block;font-weight: normal;}
.card-box-style10::after {background-color: #2FF2DF;bottom: 0;content: '';height: 0%;right: 0;position: absolute;width: 10px;-webkit-transition: all 0.45s ease;transition: all 0.45s ease;}
.card-box-style10:hover img {opacity: 0.1;-webkit-filter: grayscale(100%);filter: grayscale(100%);}
.card-box-style10:hover::after {height: 100%;}
.card-box-style10:hover .card-hover {opacity: 1;}

/* responsive */
@media only screen and (max-width: 767px) {
  .card-box-style10 {margin-bottom: 50px;}
  .card-box-style10 img {width: 100%;}
}


/*=========================================
            17. CARD BOX STYLE 11 CSS
============================================*/

.card-box-style11 {position: relative;overflow: hidden;}
.card-box-style11 * {-webkit-transition: all 0.35s ease;transition: all 0.35s ease;}
.card-box-style11 *::before,
.card-box-style11 *::after {-webkit-transition: all 0.35s ease;transition: all 0.35s ease;}
.card-box-style11 img {vertical-align: top;backface-visibility: hidden;}
.card-box-style11 i {position: absolute;right: 20px;bottom: 20px;background-color: #333333;border-radius: 3px;color: #000000;display: block;font-size: 20px;line-height: 34px;text-align: center;width: 34px;opacity: 0;}
.card-box-style11 i::before {color: #fff;}
.card-box-style11::before {position: absolute;top: 10px;bottom: 10px;left: 10px;right: 10px;content: '';background-color: #ffffff;opacity: 0;-webkit-transform: scale(0.1);transform: scale(0.1);-webkit-transition: all 0.3s ease;transition: all 0.3s ease;}
.card-box-style11:hover::before {opacity: 1;-webkit-transform: scale(1);transform: scale(1);}
.card-box-style11 i:hover {background-color: #d2b17f;cursor: pointer;}
.card-box-style11:hover i {-webkit-transition-delay: 0.25s;transition-delay: 0.25s;opacity: 1;}

/* responsive */
@media only screen and (max-width: 767px) {
  .card-box-style11 {margin-bottom: 50px;}
  .card-box-style11 img {width: 100%;}
}


/*=========================================
            18. CARD BOX STYLE 12 CSS
============================================*/

.card-box-style12 {position: relative;overflow: hidden;background-color: #1a1a1a;}
.card-box-style12 * {-webkit-transition: all 0.45s ease;transition: all 0.45s ease;}
.card-box-style12 img {vertical-align: top;backface-visibility: hidden;}
.card-box-style12 .card-hover {position: absolute;top: 0;bottom: 0;left: 0;right: 0;z-index: 1;padding: 30px;background-color: #202123;-webkit-transform: translateX(100%);transform: translateX(100%);-webkit-box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);}
.card-box-style12 .card-hover h3,
.card-box-style12 .card-hover h5,
.card-box-style12 .card-hover p {margin: 0;}
.card-box-style12 .card-hover h3 {color: #2ff2df;}
.card-box-style12 .card-hover h5 {color: #ebebeb;}
.card-box-style12 .card-hover p {border-top: 1px solid rgba(255, 255, 255, 0.2);font-size: 0.9em;margin-top: 12px;padding: 12px 0 15px;line-height: 1.5em;color: #ebebeb;}
.card-box-style12:hover .card-hover {-webkit-transform: translateX(0%);transform: translateX(0%);}
.card-box-style12:hover img {-webkit-transform: translateX(100%);transform: translateX(100%);}

/* responsive */
@media only screen and (max-width: 767px) {
  .card-box-style12 {margin-bottom: 50px;}
  .card-box-style12 img {width: 100%;}
}


/*=========================================
            19. CARD BOX STYLE 13 CSS
============================================*/

.card-box-style13 {position: relative;overflow: hidden;background-color: #fff;}
.card-box-style13 * {-webkit-transition: all 0.45s ease;transition: all 0.45s ease;}
.card-box-style13 img {vertical-align: top;backface-visibility: hidden;}
.card-box-style13 .card-hover {position: absolute;top: 0;bottom: 0;left: 0;right: 0;align-items: center;z-index: 1;display: flex;flex-direction: column;justify-content: center;line-height: 1em;opacity: 0;-webkit-transform: translateX(75%) rotate(180deg);transform: translateX(75%) rotate(180deg);}
.card-box-style13 .card-hover h3 {color: #fff;margin: 0;}
.card-box-style13 .card-hover h3 span {display: block;font-weight: normal;}
.card-box-style13 .card-hover::before {-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);background-color: #000000;border-radius: 50%;content: '';height: 140px;left: 50%;position: absolute;top: 50%;width: 140px;z-index: -1;}
.card-box-style13:hover .card-hover {-webkit-transform: translate(0px) rotate(0deg);transform: translate(0px) rotate(0deg);opacity: 1;}
.card-box-style13:hover img {filter: alpha(opacity=10);-webkit-opacity: 0.1;opacity: 0.1;}

/* responsive */
@media only screen and (max-width: 767px) {
  .card-box-style13 {margin-bottom: 50px;}
  .card-box-style13 img {width: 100%;}
}


/*=========================================
            20. CARD BOX STYLE 14 CSS
============================================*/

.card-box-style14 {position: relative;overflow: hidden;background-color: #fff;}
.card-box-style14 * {-webkit-transition: all 0.35s ease;transition: all 0.35s ease;}
.card-box-style14 img {vertical-align: top;backface-visibility: hidden;}
.card-box-style14 .card-hover {position: absolute;background-color: #fff;z-index: 1;top: 50%;left: 50%;padding: 5px 20px;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);line-height: 1.1em;overflow: hidden;height: 44px;}
.card-box-style14 .card-hover h3 {text-transform: uppercase;font-size: 1.5em;font-weight: 400;margin: 0;letter-spacing: 2px;color: #000;}
.card-box-style14 .card-hover .hover {color: #ffffff;font-weight: 800;font-size: 1.2em;}
.card-box-style14:hover .card-hover {background-color: #000;}
.card-box-style14:hover .card-hover .title {-webkit-transform: translateY(-100%);transform: translateY(-100%);}
.card-box-style14:hover .card-hover .hover {-webkit-transform: translateY(-100%);transform: translateY(-100%);}
.card-box-style14:hover img {filter: alpha(opacity=0);-webkit-opacity: 0;opacity: 0;}

/* responsive */
@media only screen and (max-width: 767px) {
  .card-box-style14 {margin-bottom: 50px;}
  .card-box-style14 img {width: 100%;}
}


/*=========================================
            21. CARD BOX STYLE 15 CSS
============================================*/

.card-box-style15 {position: relative;overflow: hidden;background-color: #fff;text-align: right;}
.card-box-style15 * {-webkit-transition: all 0.45s ease;transition: all 0.45s ease;}
.card-box-style15 img {vertical-align: top;backface-visibility: hidden;}
.card-box-style15 .card-hover {position: absolute;top: 0;left: 0;width: 100%;z-index: 1;opacity: 0;padding: 20px 30px 20px 50px;}
.card-box-style15 .card-hover h3,
.card-box-style15 .card-hover p {line-height: 1.5em;}
.card-box-style15 .card-hover h3 {opacity: 0.8;margin: 0;display: inline-block;padding-bottom: 5px;border-bottom: 1px solid rgba(0, 0, 0, 0.2);}
.card-box-style15 .card-hover p {margin: 0;padding: 8px 0 15px;-webkit-transform: translateY(50%);transform: translateY(50%);color: #707070;}
.card-box-style15:hover .card-hover {opacity: 1;-webkit-transition-delay: 0.2s;transition-delay: 0.2s;}
.card-box-style15:hover img {-webkit-filter: blur(30px);filter: blur(30px);-webkit-transform: scale(1.2);transform: scale(1.2);filter: alpha(opacity=15);-webkit-opacity: 0.15;opacity: 0.15;}
.card-box-style15:hover .card-hover p {-webkit-transform: translateY(0%);transform: translateY(0%);}

/* responsive */
@media only screen and (max-width: 767px) {
  .card-box-style15 {margin-bottom: 50px;}
  .card-box-style15 img {width: 100%;}
}

/*=========================================
            22. CARD BOX STYLE 16 CSS
============================================*/

.card-box-style16 {position: relative;}
.card-box-style16 * {-webkit-transition: all 0.35s;transition: all 0.35s;}
.card-box-style16 *::before,
.card-box-style16 *::after {-webkit-transition: all 0.35s;transition: all 0.35s;}
.card-box-style16 img {vertical-align: top;backface-visibility: hidden;}
.card-box-style16 .card-image {margin-right: 16px;margin-bottom: 32px;position: relative;z-index: 1;}
.card-box-style16 .card-image::before {position: absolute;content: "";width: 100%;height: 100%;top: 16px;left: 16px;z-index: -1;border: 5px solid #2FF2DF;}
.card-box-style16 .card-image img {-webkit-transform: scale(1);transform: scale(1);}
.card-box-style16 .card-hover {text-align: center;}
.card-box-style16 .card-hover h3 {margin-bottom: 10px;color: #111;}
.card-box-style16 .card-image:hover img {-webkit-transform: scale(1.05);transform: scale(1.05);-webkit-transition: all 0.35s ease;transition: all 0.35s ease;}

/* responsive */
@media only screen and (max-width: 767px) {
  .card-box-style16 {margin-bottom: 50px;}
  .card-box-style16 img {width: 100%;}
}

/*=========================================
            23. CARD BOX STYLE 17 CSS
============================================*/

.card-box-style17 {position: relative;overflow: hidden;background: #000;}
.card-box-style17::before {content: "";position: absolute;left: 170%;z-index: 1;height: 100%;width: 100%;background: hsla(0,0%,100%,.2);transform: skewX(45deg);transition: .8s;}
.card-box-style17 * {-webkit-transition: all 0.35s;transition: all 0.35s;}
.card-box-style17 *::before,
.card-box-style17 *::after {-webkit-transition: all 0.35s;transition: all 0.35s;}
.card-box-style17 img {vertical-align: top;backface-visibility: hidden;-webkit-filter: grayscale(100%);filter: grayscale(100%);-webkit-transition: 1s;transition: 1s;}
.card-box-style17 .card-hover {position: absolute;background: #2FF2DF;width: 100%;bottom: 0;transition: all .5s;transform: perspective(300px) rotateX(90deg);transform-origin: bottom;text-align: center;padding: 15px 10px;}
.card-box-style17 .card-hover h3 {margin-bottom: 0px;color: #fff;}
.card-box-style17 .card-hover span {display: block;margin-top: 5px;color: #fff;}
.card-box-style17:hover::before {left: -170%;-webkit-transition-delay: .3s;transition-delay: .3s;}
.card-box-style17:hover img {-webkit-filter: grayscale(0);filter: grayscale(0);-webkit-transform: scale(1.2);transform: scale(1.2);}
.card-box-style17:hover .card-hover {-webkit-transform: perspective(300px) rotateX(0deg);transform: perspective(300px) rotateX(0deg);}


/* responsive */
@media only screen and (max-width: 767px) {
  .card-box-style17 {margin-bottom: 50px;}
  .card-box-style17 img {width: 100%;}
}


/*=========================================
            24. CARD BOX STYLE 18 CSS
============================================*/

.card-box-style18 {position: relative;overflow: hidden;}
.card-box-style18 * {-webkit-transition: all 0.35s;transition: all 0.35s;}
.card-box-style18 *::before,
.card-box-style18 *::after {-webkit-transition: all 0.35s;transition: all 0.35s;}
.card-box-style18 img {vertical-align: top;backface-visibility: hidden;}
.card-box-style18 .card-hover {position: absolute;left: 0;bottom: 0;opacity: 0;padding: 20px 25px;width: 70%;overflow: hidden;}
.card-box-style18 .card-hover::before {position: absolute;content: "";left: 0;top: 0;width: 100%;height: 100%;background-color: #fff;opacity: 0;-webkit-transform: translateX(-80px);transform: translateX(-80px);-webkit-transition: .5s;transition: .5s;}
.card-box-style18 .card-hover span {position: relative;display: block;padding-left: 40px;margin-bottom: 5px;color: #2ff2df;opacity: 0;-webkit-transition: .5s;transition: .5s;}
.card-box-style18 .card-hover span::before {position: absolute;content: "";left: 0;top: 14px;width: 0px;height: 2px;line-height: initial;background: #2ff2df;}
.card-box-style18 .card-hover h3 {margin-bottom: 0px;opacity: 0;color: #111;-webkit-transform: translateY(10px);transform: translateY(10px);}
.card-box-style18:hover img {-webkit-transform: scale(1.2);transform: scale(1.2);}
.card-box-style18:hover .card-hover {opacity: 1;-webkit-transition: .5s;transition: .5s;}
.card-box-style18:hover .card-hover::before {opacity: 1;-webkit-transform: translateX(0);transform: translateX(0);}
.card-box-style18:hover .card-hover span {opacity: 1;}
.card-box-style18:hover .card-hover span::before {width: 30px;-webkit-transition: .5s;transition: .5s;-webkit-transition-delay: .5s;transition-delay: .5s;}
.card-box-style18:hover .card-hover h3 {opacity: 1;-webkit-transform: translateY(0);transform: translateY(0);-webkit-transition: .5s;transition: .5s;-webkit-transition-delay: .5s;transition-delay: .5s;}


/* responsive */
@media only screen and (max-width: 767px) {
  .card-box-style18 {margin-bottom: 50px;}
  .card-box-style18 img {width: 100%;}
}