.navbar-toggler:focus,
 a,
 a:active,
 a:focus,
 a:hover,
 button:focus,
 input:focus,
 textarea:focus {
     outline: 0;
 }

 a,
 button {
     transition: 0.5s;
 }

 .aster-alter,
 .horizontal-line,
 .hosta {
     background-color: #fff;
 }

 .btn-link,
 .btn-link:hover,
 .card-header .btn-link:focus,
 .card-header .btn-link:hover,
 a,
 a:hover,
 a:link,
 a:visited {
     text-decoration: none;
 }

 .header-area-s3,
 .login-s2,
 .overflow {
     overflow: hidden;
 }

 @font-face {
     font-family: Poppins;
     src: url("../fonts/Poppins-Bold.eot");
     src: local("Poppins Bold"), local("Poppins-Bold"), url("../fonts/Poppins-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/Poppins-Bold.woff2") format("woff2"), url("../fonts/Poppins-Bold.woff") format("woff"),
         url("../fonts/Poppins-Bold.ttf") format("truetype");
     font-weight: 700;
     font-style: normal;
 }

 @font-face {
     font-family: Poppins;
     src: url("../fonts/Poppins-SemiBold.eot");
     src: local("Poppins SemiBold"), local("Poppins-SemiBold"), url("../fonts/Poppins-SemiBold.eot?#iefix") format("embedded-opentype"), url("../fonts/Poppins-SemiBold.woff2") format("woff2"),
         url("../fonts/Poppins-SemiBold.woff") format("woff"), url("../fonts/Poppins-SemiBold.ttf") format("truetype");
     font-weight: 600;
     font-style: normal;
 }

 @font-face {
     font-family: Poppins;
     src: url("../fonts/Poppins-Regular.eot");
     src: local("Poppins Regular"), local("Poppins-Regular"), url("../fonts/Poppins-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/Poppins-Regular.woff2") format("woff2"), url("../fonts/Poppins-Regular.woff") format("woff"),
         url("../fonts/Poppins-Regular.ttf") format("truetype");
     font-weight: 400;
     font-style: normal;
 }

 @font-face {
     font-family: Poppins;
     src: url("../fonts/Poppins-Light.eot");
     src: local("Poppins Light"), local("Poppins-Light"), url("../fonts/Poppins-Light.eot?#iefix") format("embedded-opentype"), url("../fonts/Poppins-Light.woff2") format("woff2"), url("../fonts/Poppins-Light.woff") format("woff"),
         url("../fonts/Poppins-Light.ttf") format("truetype");
     font-weight: 300;
     font-style: normal;
 }

 @font-face {
     font-family: Lato;
     src: url("../fonts/Lato-Regular.eot");
     src: local("Lato Regular"), local("Lato-Regular"), url("../fonts/Lato-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/Lato-Regular.woff2") format("woff2"), url("../fonts/Lato-Regular.woff") format("woff"),
         url("../fonts/Lato-Regular.ttf") format("truetype");
     font-weight: 400;
     font-style: normal;
 }

 @font-face {
     font-family: "Hind Madurai";
     src: url("../fonts/HindMadurai-Regular.eot");
     src: local("Hind Madurai Regular"), local("HindMadurai-Regular"), url("../fonts/HindMadurai-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/HindMadurai-Regular.woff2") format("woff2"),
         url("../fonts/HindMadurai-Regular.woff") format("woff"), url("../fonts/HindMadurai-Regular.ttf") format("truetype");
     font-weight: 400;
     font-style: normal;
 }

 @font-face {
     font-family: "Hind Madurai";
     src: url("../fonts/HindMadurai-SemiBold.eot");
     src: local("Hind Madurai SemiBold"), local("HindMadurai-SemiBold"), url("../fonts/HindMadurai-SemiBold.eot?#iefix") format("embedded-opentype"), url("../fonts/HindMadurai-SemiBold.woff2") format("woff2"),
         url("../fonts/HindMadurai-SemiBold.woff") format("woff"), url("../fonts/HindMadurai-SemiBold.ttf") format("truetype");
     font-weight: 600;
     font-style: normal;
 }

 @font-face {
     font-family: "Hind Madurai";
     src: url("../fonts/HindMadurai-Bold.eot");
     src: local("Hind Madurai Bold"), local("HindMadurai-Bold"), url("../fonts/HindMadurai-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/HindMadurai-Bold.woff2") format("woff2"),
         url("../fonts/HindMadurai-Bold.woff") format("woff"), url("../fonts/HindMadurai-Bold.ttf") format("truetype");
     font-weight: 700;
     font-style: normal;
 }

 /*!  02 - Reset !*/
 body {
     font-family: Poppins;
     font-size: 14px;
     line-height: 1.875;
     font-weight: 400;
     color: #222;
     background-color: #f8fbff;
     position: relative;
     min-width: 320px;
 }

 body,
 html {
     overflow-x: hidden;
 }

 .h1,
 .h2,
 .h3,
 .h4,
 .h5,
 .h6,
 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
     line-height: 1.33;
     font-weight: 600;
 }

 .hosta .lead,
 .lead,
 .sec-title-sm {
     font-weight: 400;
 }

 .h1,
 h1 {
     font-size: 2.93em;
 }

 .h2,
 h2 {
     font-size: 1em;
 }

 .h3,
 h3 {
     font-size: 1.87em;
 }

 .h4,
 h4 {
     font-size: 1.6em;
 }

 .h5,
 h5 {
     font-size: 1.33em;
 }

 .h6,
 h6 {
     font-size: 1.07em;
 }

 .lead {
     font-size: 1.1em;
     line-height: 1.8;
 }

 ol,
 ul {
     padding: 0;
 }

 ol li,
 ul li {
     list-style: none;
 }

 .cta-s2,
 .faq-s2,
 .feature,
 .footer-area,
 .header-area-s2,
 .input-s3,
 .partners4,
 .relative,
 .subscriber-s3,
 .team,
 .testimonial-text-s3,
 .why-xiom-s4 {
     position: relative;
 }

 b,
 strong {
     font-weight: 600;
 }

 button {
     cursor: pointer;
 }

 .container {
     position: relative;
     z-index: 5;
 }

 /*!  03 - Common css  !*/
 .aster {
     font-family: Lato;
 }

 .aster h1,
 .aster h2,
 .aster h3,
 .aster h4,
 .aster h5,
 .aster h6 {
     font-family: Poppins;
     color: #222326;
 }

 .aster blockquote,
 .footer-widget a,
 .partner h4 {
     color: #4a4f55;
 }

 .hosta blockquote,
 .hosta h1,
 .hosta h2,
 .hosta h3,
 .hosta h4,
 .hosta h5,
 .hosta h6,
 .hosta span {
     font-family: "Hind Madurai";
     color: #4a5b7a;
 }

 .hosta p {
     font-weight: 300;
 }

 a:hover {
     color: #fff;
 }

 img {
     max-width: 100%;
 }

 textarea {
     height: 60px;
 }

 .sec-heading {
     padding-bottom: 30px;
 }

 .feature-text-s4,
 .header-img-s4,
 .pt-sm,
 .quick-access-text,
 .sec-heading p {
     padding-top: 20px;
 }

 .about-us-heading,
 .header-text-s2,
 .sec-heading-s3,
 .why-box-sm .why-img {
     padding-bottom: 20px;
 }

 .sec-heading-s3 p {
     padding-top: 10px;
     color: #4a5b7a;
 }

 /* .sec-heading h2::before { */
 /* content: ""; */
 /* position: absolute; */
 /* width: 100px; */
 /* height: 40px; */
 /* border-radius: 40px; */
 /* background-color: #f9dfea; */
 /* -webkit-transform: rotate(-30deg); */
 /* -moz-transform: rotate(-30deg); */
 /* left: 36%; */
 /* top: -4%; */
 /* z-index: -1; */
 }

 @media all and (min-width: 361px) {
     .sec-heading h2::before {
         left: 38%;
     }
 }

 @media all and (min-width: 481px) {
     .sec-heading h2::before {
         width: 120px;
         height: 50px;
     }
 }

 .text-block,
 .text-block-2 {
     padding-top: 30px;
 }

 .text-block p {
     padding: 0;
     margin: 0;
 }

 .text-block-1 h2 {
     font-weight: 600;
     font-size: 1.5em;
     line-height: 1.5;
 }

 .text-block-2 p {
     padding-top: 5px;
     padding-bottom: 10px;
     margin: 0;
 }

 .sec-img {
     max-width: 250px;
     margin: 0 auto;
     text-align: center;
 }

 .header-img,
 .header-img-s3 {
     max-width: 200px;
 }

 .sec-title-sm {
     font-size: 1em;
     line-height: 1.8;
 }

 .sec-title-lg,
 .sec-title-md {
     line-height: 1.5;
 }

 .sec-title-lg {
     font-size: 1.4em;
 }

 .sec-title-xl {
     font-size: 1.5em;
     font-weight: 700;
     line-height: 1.375;
 }

 .sec-title-xxl {
     font-size: 1.6em;
     line-height: 1.5;
 }

 .btn-menu,
 .dropdown-item,
 .navbar-light .navbar-nav .nav-link {
     font-family: Poppins;
     font-size: 0.875em;
     line-height: 2.5;
 }

 .cta-content-s2,
 .header-text-lg,
 .pt {
     padding: 25px;
 }

 .header-area-s4,
 .partner-info-s3 h2,
 .pb,
 .quick-access-img,
 .tools-img-s3 {
     padding-bottom: 50px;
 }

 .horizontal-line {
     height: 1px;
     width: 100px;
     margin-bottom: 5px;
     margin-left: 2px;
     display: inline-block;
 }

 .error {
     color: #d63031;
     width: 96%;
     display: flex;
     justify-content: left;
 }

 /*!  04 - Utility !*/
 .section-pad,
 .section-pad-md,
 .section-pad-sm,
 .section-pad-xs {
     padding-bottom: 60px;
 }

 .section-pad-lg {
     padding-top: 60px;
     padding-bottom: 60px;
 }

 .section-pad-xl {
     padding-top: 70px;
     padding-bottom: 70px;
 }

 .section-pad.nopd {
     padding-top: 0;
     padding-bottom: 0;
 }

 .section-pad.nopb,
 .subscriber-box h2 {
     padding-bottom: 0;
 }

 .section-pad.nopt {
     padding-top: 0;
 }

 .mb-x1 {
     margin-bottom: 10px;
 }

 .mb-x2,
 .why-xiom-item-s2 {
     margin-bottom: 20px;
 }

 .address-box-s2,
 .feature-item-s4,
 .mb-x3 {
     margin-bottom: 30px;
 }

 .mb-x4 {
     margin-bottom: 40px;
 }

 .mb-x5,
 .why-xiom-img {
     margin-bottom: 50px;
 }

 .mbn-x1 {
     margin-bottom: -10px;
 }

 .mbn-x2 {
     margin-bottom: -20px;
 }

 .mbn-x3 {
     margin-bottom: -30px;
 }

 .mbn-x4 {
     margin-bottom: -40px;
 }

 .mbn-x5 {
     margin-bottom: -50px;
 }

 .mt-x1 {
     margin-top: 10px;
 }

 .input-field-s2,
 .mt-x2,
 .subscriber-content-s3 .subscribe-results.alert {
     margin-top: 20px;
 }

 .mt-x3,
 .subscribe-results.alert,
 .subscriber-btn,
 .team-content {
     margin-top: 30px;
 }

 .mt-x4 {
     margin-top: 40px;
 }

 .form-results.alert,
 .mt-x5 {
     margin-top: 50px;
 }

 .mtn-x1 {
     margin-top: -10px;
 }

 .mtn-x2 {
     margin-top: -20px;
 }

 .mtn-x3 {
     margin-top: -30px;
 }

 .mtn-x4 {
     margin-top: -40px;
 }

 .mtn-x5 {
     margin-top: -50px;
 }

 /*!  05 - Header  !*/
 .navbar-brand {
     transition: 0.5s linear;
     padding: 0;
     height: auto;
 }


 .header-area-s2 .site-header,
 .header-area-s3 .site-header,
 .site-header {
     position: relative;
     transition: 0.5s linear;
 }

 .header-area-s2 .site-header .navbar,
 .header-area-s3 .site-header .navbar,
 .site-header .navbar {
     background: 0 0;
     position: relative;
     z-index: 2000;
     top: 0;
     width: 100%;
     transition: 0.5s linear;
 }

 .site-header.has-fixed .navbar {
     position: fixed;
     width: 100%;
     transition: padding 0.5s linear;
     padding: 10px 0;
     top: 0;
     background-color: #fff;
     box-shadow: 0 .125rem 1.25rem rgba(0, 0, 0, .055) !important
 }

 .header-area-s2 .site-header.has-fixed .navbar-brand,
 .header-area-s3 .site-header.has-fixed .navbar-brand,
 .site-header.has-fixed .navbar-brand {
     padding-top: 0;
     padding-bottom: 0;
     height: 50px;
     transition: 0.5s linear;
 }

 .header-area-s2 .site-header.has-fixed .navbar {
     position: fixed;
     width: 100%;
     transition: padding 0.5s linear;
     padding: 10px 0;
     top: 0;
     background-color: #8b9aff;
 }

 .header-area-s3 .site-header.has-fixed .navbar {
     position: fixed;
     width: 100%;
     transition: padding 0.5s linear;
     padding: 10px 0;
     top: 0;
     background-color: #4e3bb1;
 }

 .navbar.is-transparent.active {
     background: #dee4ff;
 }

 .header-area-s2 .navbar.is-transparent.active {
     background: #8b9aff;
 }

 .header-area-s3 .navbar.is-transparent.active {
     background: #1a0c52;
 }

 .navbar-toggler {
     background-color: #8b9aff;
 }

 .header-area-s2 .navbar-toggler {
     background-color: #3742fa;
 }

 .dropdown-menu,
 .header-area-s3 .navbar-toggler {
     background-color: #6580ce;
 }

 .active .pricing-list,
 .active .pricing-list-s2,
 .active .pricing-note,
 .active .pricing-note-s2,
 .active .pricing-price,
 .active .pricing-price-s2,
 .active .pricing-title-s2,
 .active-box-s2 span,
 .footer-widget-s3 .social-icon a,
 .header-area-s2 .navbar-light .navbar-nav .nav-link,
 .header-area-s3 .navbar-light .navbar-nav .nav-link,
 .navbar-icon i,
 .tools-s3 .text-block-2 h2,
 .why-xiom-s4 h2,
 .why-xiom-s4 p {
     color: #fff;
 }

 .navbar-light .navbar-nav .nav-link {
     color: #222;
     font-weight: 600;
 }

 .dropdown:focus .nav-link,
 .dropdown:hover .nav-link,
 .login-text a:hover,
 .navbar-light .navbar-nav .nav-link:hover {
     color: #1155a2;
 }

 .header-area-s2 .dropdown:focus .nav-link,
 .header-area-s2 .dropdown:hover .nav-link,
 .header-area-s2 .navbar-light .navbar-nav .nav-link:hover {
     color: #3742fa;
 }

 .header-area-s3 .dropdown:focus .nav-link,
 .header-area-s3 .dropdown:hover .nav-link,
 .header-area-s3 .navbar-light .navbar-nav .nav-link:hover {
     color: #fff200;
 }

 .nav-item {
     padding: 0 5px;
 }

 .nav-item:last-child {
     padding-right: 0;
     padding-left: 5px;
     padding-top: 0;
 }

 .logo {
     width: 136px;
     height: auto;
 }

 .dropdown-menu {
     padding: 0;
     top: 115%;
     border: none;
     border-radius: 0;
 }

 .dropdown-item {
     color: #606985;
     font-weight: 400;
     padding: 5px 30px;
     text-align: left;
 }

 .dropdown-item:hover {
     background-color: #1155a2;
     color: #fff;
 }

 .dropdown-item:focus {
     background-color: #6580ce;
     color: #fff;
 }

 .btn-menu,
 .btn-menu-3:hover i {
     color: #3d486a;
 }

 .dropdown-item.active {
     background-color: #0d427d;
 }

 .dropdown-toggle:after {
     vertical-align: 1px;
     border-top: 5px solid;
     border-right: 5px solid transparent;
     border-bottom: 0;
     border-left: 5px solid transparent;
 }

 /*!  06 - Button  !*/
 .btn-menu {
     display: inline-block;
     border: none;
     padding: 2px 30px;
     border-radius: 30px;
     font-weight: 600;
     background-color: #1155a2;
     color: #fff;
 }
 }

 .btn-lg,
 .btn-lg-s3 {
     padding: 5px 30px;
     display: inline-block;
 }

 .btn-lg,
 .btn-link {
     font-size: 1em;
     font-weight: 400;
 }

 .btn-menu:hover {
     background-color: #01448e;
 }

 .btn-menu-2 {
     border: 2px solid #fff;
     background-color: transparent;
     color: #fff;
 }

 .btn-menu-2:hover {
     background-color: transparent;
     border: 2px solid #ff5e8d;
 }

 .btn-menu-3 {
     font-family: "Hind Madurai";
     background-color: rgba(255, 255, 255, 0.1);
     color: #fff;
     transition: 0.5s;
 }

 .btn-menu-3 i {
     transition: 0.5s;
     color: #f7949c;
     padding-left: 10px;
 }

 .btn-menu-3:hover {
     background-color: #c8cfe7;
     color: #3d486a;
 }

 .btn-link {
     color: #ff5e8d;
     font-family: Lato;
     line-height: 2.25em;
     border-bottom: 1px solid #ff5e8d;
 }

 .btn-link:focus {
     color: #ff5e8d;
     border: none;
 }

 .btn-link:hover {
     color: #7c98e7;
     border-bottom: 1px solid #7c98e7;
 }

 .btn-hover:hover {
     color: #ff5e8d;
     background-color: #fff;
     box-shadow: 0 25px 35px rgba(255, 255, 255, 0.3);
 }

 .btn-lg {
     border: none;
     border-radius: 50px;
     font-family: Poppins;
     color: #fff;
     box-shadow: 0 25px 35px rgba(17, 85, 162, 0.15);
     line-height: 2;
     background-color: #1155a2;
 }
 }

 .btn-lg:hover {
     background-color: #01448e;
     box-shadow: 0 25px 35px rgba(124, 152, 231, 0.3);
 }

 .btn-lg-s3 {
     font-family: "Hind Madurai";
     font-weight: 600;
     position: relative;
     border: none;
     border-radius: 30px;
     background: linear-gradient(to right, #f5848f, #fdb8ab);
     -webkit-backface-visibility: hidden;
     z-index: 1;
 }

 .input-line-s3,
 .login-s2 .check-text,
 .team-info-s2 h2 {
     font-family: Poppins;
 }

 .btn-lg-s3 span {
     color: #fff;
     position: relative;
     z-index: 3;
 }

 .btn-lg-s3:after {
     position: absolute;
     content: "";
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     border-radius: 30px;
     background: linear-gradient(to right, #fdb8ab, #f5848f);
     transition: opacity 0.5s ease-out;
     z-index: 2;
     opacity: 0;
 }

 .header-area-s2:before,
 .header-area-s3:before,
 .header-area:before {
     position: absolute;
     left: 0;
     height: 100%;
     width: 100%;
     z-index: 0;
     content: "";
     top: 0;
 }

 .btn-lg-s3:hover:after {
     opacity: 1;
 }

 .btn-s2:hover {
     box-shadow: none;
     background-color: #fff;
     color: #ff5e8d;
 }

 .btn-price {
     background-color: #c8cfe7;
     color: #3d486a;
     box-shadow: none;
 }

 .btn-price:hover {
     color: #fff;
     background-color: #ff5e8d;
     box-shadow: 0 25px 35px rgba(255, 94, 141, 0.3);
 }

 .why-box,
 .why-box-sm:hover {
     box-shadow: 0 0 90px rgba(14, 0, 137, 0.06);
 }

 .btn-xl {
     padding: 8px 50px;
 }

 .btn-xl-s3 {
     padding: 7px 45px;
 }

 .btn-md {
     padding: 8px 35px;
 }

 .active-box-s2 .btn-lg-s3 {
     background: linear-gradient(to right, #f5848f, #fdb8ab);
 }

 .active-box-s2 .btn-lg-s3:hover:after {
     opacity: 0;
 }

 @media only screen and (min-width: 480px) {
     .btn-lg {
         padding: 7px 40px;
     }

     .btn-lg-s3 {
         padding: 7px 30px;
     }

     .btn-xl {
         padding: 8px 55px;
     }

     .btn-xl-s3 {
         padding: 7px 50px;
     }

     .btn-md {
         padding: 8px 40px;
     }
 }

 @media only screen and (min-width: 768px) {
     .btn-lg {
         padding: 15px 50px;
         font-size: 1.2em;
     }

     .btn-lg-s3 {
         padding: 7px 35px;
         font-size: 1.125em;
     }

     .btn-xl {
         padding: 8px 60px;
     }

     .btn-xl-s3 {
         padding: 7px 58px;
     }

     .btn-md {
         padding: 8px 50px;
     }

     .btn-link {
         font-size: 1.25em;
     }
 }

 /*!  07 - Elements !*/
 /* .header-area { */
 /* position: relative; */
 /* background: linear-gradient(to bottom, #e5f1ff, #edf5ff, #f8fbff); */
 /* } */
 .address-box,
 .why-box,
 .why-xiom-icon {
     background-color: #fbfbfb;
 }

 /* .header-area:before { */
 /* background: url(../images/shape-a.svg) 100% 40% / cover no-repeat; */
 /* } */
 .header-area-s2:before {
     background: url(../images/shape-e.svg) 100% 100%/100% no-repeat, url(../images/shape-k.svg) 100% 100%/100% no-repeat, linear-gradient(to bottom, #7585ff, #8a98ff, #b1bbff) 100% 100%/100% no-repeat;
 }

 .header-area-s3 {
     position: relative;
     padding-bottom: 80px;
 }

 .header-area-s3:before {
     background: url(../images/shape-i.svg) 100% 100%/100% no-repeat, linear-gradient(to right, #d184f3 0, #3b36be 100%) 100% 100%/100% no-repeat;
 }

 .config,
 .team-photo,
 .why-box-sm,
 .why-box-sm:hover,
 .why-xiom-item h2 {
     position: relative;
 }

 .address-list,
 .header-content,
 .header-text,
 .login-s2 .login-btn-s2,
 .login-text,
 .testimonial-client-details,
 .why-xiom-btn,
 .why-xiom-item p {
     padding-top: 22px;
 }
 .header-text-lg h1 {
     font-size: 2em;
     font-weight: 700;
     line-height: 1.2;
 }

 .header-text-s2 h1 {
     color: #fff;
     font-size: 1.5em;
     line-height: 1.375;
 }

 .header-text-s2 p {
     color: #fff;
     padding: 5px 0;
 }

 .header-text-s3,
 .tools-text-s3 {
     padding-top: 20px;
     color: #fff;
 }

 .header-text-s3 h1 {
     line-height: 1.125;
     color: #fff;
 }

 .header-img {
     margin-left: auto;
     margin-right: auto;
 }

 .header-area-s4 .header-text-s3 {
     padding-top: 50px;
     margin-top: -100px;
 }

 .header-area-s4 .header-text-s3 h5 {
     display: inline-block;
     font-size: 1.125em;
     line-height: 2em;
     color: #fff;
 }

 .header-area-s4 .header-text-s3 p {
     padding: 5px 0 0;
 }

 .header-area-s4 .about-header-img {
     padding-top: 20px;
     max-width: 200px;
 }

 .why-box {
     padding: 10px 8px;
     max-width: 450px;
     margin-left: auto;
     margin-right: auto;
     margin-bottom: 30px;

 }

 a.e-mail {
     color: #1756a0;
 }

 a.e-mail:hover {
     color: #1756a0;
 }

 .flag-title {
     color: #787878;
     font-size: 40px;
 }

 .partner-list {
     padding-top: 0 !important;
 }

 .pricing-box.active .btn-price:hover,
 .why-box-sm {
     box-shadow: none;
 }

 .why-box .why-img {
     width: 90px;
     height: auto;
     padding-bottom: 10px;
     margin: 0 auto;
 }

 .why-box h2 {
     font-size: 1.03em;
     line-height: 1.8;
     font-weight: 600;
 }

 .why-box-sm {
     transition: 0.3s;
 }


 #digital-learning .why-box:hover {
     transform: scale(1);
 }

 .why-this-content {
     padding: 5px 0;
     text-align: center;
 }

 .why-this-content h2 {
     font-weight: 700;
     font-size: 1em;
     line-height: 2;
 }

 .tools-s3:before,
 .why-xiom-s4:before {
     content: "";
     position: absolute;
     background: #1a0c52;
     height: 100%;
     width: 110%;
     top: -2%;
     left: -5%;
     transform: rotate(-2deg);
     z-index: 0;
 }

 .why-xiom-item {
     margin: 5px 0;
     text-align: center;
 }

 .why-xiom-icon,
 .why-xiom-icon-s2,
 .why-xiom-item-s2 .why-xiom-icon {
     width: 40px;
     margin-left: auto;
     margin-right: auto;
 }

 .why-xiom-item h2 {
     top: 3px;
     display: inline-block;
     font-size: 1.2em;
     line-height: 1.25;
     padding-top: 10px;
     margin-bottom: 0;
 }

 .why-xiom-item-s2 .why-xiom-icon {
     display: block;
     height: 50px;
     margin-bottom: 0;
 }

 .breadcrumb {
     background-color: transparent;
     font-size: 20px;
     justify-content: center;
     padding: 0;
     margin-bottom: 13px;
 }

 .breadcrumb .breadcrumb-item a {
     color: #000;
 }

 .breadcrumb .breadcrumb-item.active {
     color: #2262ac;
 }

 .header-content.header-section:before {
     padding-top: 250px;
     width: 102%;
     background: url(../images/breadcrumb.svg) 0 0/100% no-repeat, linear-gradient(to bottom, #e5f1ff, #edf5ff, #f8fbff) 0 0/100% no-repeat;
 }

 .align-section {
     display: flex;
     justify-content: center;
     align-items: center;
 }

 .feature:before,
 .team:before {
     width: 102%;
     background: url(../../images/wave-2.svg) 0 0/100% no-repeat, linear-gradient(183deg, rgba(198, 215, 235, 1) 0%, rgba(237, 245, 255, 1) 71%, rgba(253, 254, 255, 1) 100%);
 }
 .acc:before {
    width: 102%;
    background: url(../../images/wave-2.svg) 0 0/100% no-repeat, linear-gradient(183deg, rgba(198, 215, 235, 1) 0%, rgba(237, 245, 255, 1) 1%, rgba(253, 254, 255, 1) 100%) !important;
}

 .feature-wave:before {
     width: 102%;
     background: url(../../images/wave-2.svg) 0 0/100% no-repeat, linear-gradient(to bottom, #e5f1ff, #f8fbff) 0 0/100% no-repeat;
 }

 .feature-orange:before,
 .team-orange:before {
     width: 102%;
     background: url(../../images/wave-2.svg) 0 0/100% no-repeat, linear-gradient(to bottom, #CBEBFF, #E5F5FF, #f8fbff) 0 0/100% no-repeat !important;
 }

 .feature-yellow:before,
 .team-yellow:before {
     width: 102%;
     background: url(../../images/wave-2.svg) 0 0/100% no-repeat, linear-gradient(to bottom, #DBF3FA, #F5FCFF, #f8fbff) 0 0/100% no-repeat !important;
 }

 .feature-grey:before,
 .team-grey:before {
     width: 102%;
     background: url(../../images/wave-2.svg) 0 0/100% no-repeat, linear-gradient(to bottom, #BDD8FF, #EBF3FF, #f8fbff) 0 0/100% no-repeat !important;
 }

 .why-xiom-item-s2 h2 {
     display: block;
     font-weight: 600;
     font-size: 1.25em;
     line-height: 1.5;
 }

 .why-xiom-item-s2 p {
     padding-left: 0;
     padding-right: 0;
 }

 .feature-content ul i {
     margin-right: 20px;
     font-size: 18px;
     color: #97a7bd;
     line-height: 30px;
 }

 .feature-content ul li {
     display: flex;
     margin: 0;
     padding: 10px 0;

 }

 .why-xiom-icon {
     display: block;
     height: 40px;
     border-radius: 3px;
     padding: 5px;
     box-shadow: 0 14px 35px 0 rgba(0, 0, 0, 0.05);
 }

 .why-xiom-icon-s2 {
     height: 40px;
     margin-bottom: 10px;
 }

 .address-box,
 .team-photo,
 .team-photo-s2 {
     margin-left: auto;
     margin-right: auto;
 }

 .about-us-heading .lead {
     padding: 10px 0 5px;
     margin-bottom: 0;
 }

 .about-us-content h2,
 .feature-text-s3 h2,
 .feature-text-s4 h2 {
     font-size: 1.25em;
     line-height: 1.5;
 }

 .address-box {
     padding: 20px 0 25px;
     box-shadow: 0 0 90px rgba(14, 0, 137, 0.06);
     margin-bottom: 30px;
     max-width: 320px;
 }

 .address-box h2 {
     font-size: 1.03em;
     font-weight: 600;
     line-height: 1;
 }

 .address-box-s2 h2 {
     font-size: 1.5em;
     line-height: 1;
     color: #3d486a;
     padding-bottom: 10px;
     margin: 0;
 }

 .team:before {
     content: "";
     position: absolute;
     top: 0;
     left: -5px;
     height: 100%;
     z-index: 0;
 }

 .header-content.header-section:before {
     content: "";
     position: absolute;
     top: 0;
     left: -5px;
     height: 100%;
     z-index: 0;
 }

 .cta-s2:before,
 .feature:before,
 .footer-area-s2:before,
 .footer-area:before,
 .subscriber-s3:before {
     content: "";
     top: 0px;
     left: 0;
     height: 100%;
     z-index: 0;
 }

 .team-photo {
     width: 110px;
 }

 .team-photo img {
     border-radius: 50%;
     border: 8px solid #ccd8ff;
 }

 .team-photo-s2 {
     max-width: 200px;
 }

 .team-photo-s2 img {
     border-radius: 5px;
 }

 .team-info {
     margin-top: 10px;
     margin-bottom: 10px;
 }

 .team-info h2 {
     font-size: 1em;
     font-weight: 600;
 }

 .team-info h2 span {
     color: #6f7c8a;
     font-size: 1em;
     font-weight: 400;
     display: block;
 }

 .team-info-s2 h2 {
     font-size: 1.125em;
     color: #3d486a;
     padding-top: 5px;
 }

 .team-info-s2 span {
     font-family: Lato;
     line-height: 1.5;
 }

 .config {
     background: #f8fbff;
 }

 .config-shape {
     position: absolute;
     width: 100%;
     height: 100%;
 }

 .config-shape svg {
     height: 100%;
     width: auto;
     background: linear-gradient(to right, #e3e8ff, #f2f6ff);
 }

 .config-shape path {
     fill: #f8fbff;
 }

 .config-alt {
     background: #fff;
 }

 .config-alt .config-shape path {
     fill: #fff;
 }

 .quick-access-icon,
 .tools-icon-s3 {
     background: linear-gradient(to right, #674ece, #b476e9);
     border-radius: 10px;
     margin-left: auto;
     position: relative;
 }

 .tools-s3 {
     position: relative;
     color: #fff;
 }

 .tools-icon-s3 {
     width: 40px;
     height: 40px;
     margin-right: auto;
 }

 .quick-access-icon img,
 .tools-icon-s3 img {
     width: 20px;
     height: 20px;
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
 }

 .tools-text-s3 h2 {
     color: #fff;
     padding-bottom: 10px;
 }

 .quick-access-icon {
     width: 40px;
     height: 40px;
     margin-right: auto;
 }

 .quick-access-text h2 {
     padding-bottom: 10px;
 }

 .feature:before {
     position: absolute;
 }

 .feature-s2:before {
     background: url(../images/shape-g.svg) 0 0/100% no-repeat, linear-gradient(to bottom, #f1f2ff, #fafbff, #fff) 0 0/100% no-repeat;
 }

 .feature-item {
     margin: 10px 0;
     text-align: center;
 }

 .feature-item h2 {
     font-weight: 600;
     font-size: 1em;
     line-height: 2;
     margin: 0;
 }

 .feature-item img {
     height: 60px;
     width: auto;
     margin-bottom: 5px;
 }

 .feature-item-s3 {
     margin-bottom: 30px;
     padding: 20px 10px;
     box-shadow: 0 0 60px 0 rgba(76, 63, 196, 0.06);
     background-color: #fff;
     display: block;
     height: calc(100% - 30px);
 }

 .cta-box,
 .map,
 .testimonial-box {
     box-shadow: 0 0 90px rgba(14, 0, 137, 0.06);
 }

 .feature-text-s3 {
     text-align: center;
     padding-top: 20px;
 }

 .feature-icon-s3 {
     width: 60px;
     height: 60px;
     margin: 0 auto;
 }

 .feature-icon-s4 {
     width: 65px;
     height: 65px;
     margin: 0 auto;
 }

 .testimonial-box {
     padding: 30px 25px 40px;
     color: #919ca7;
     background-color: #fff;
     max-width: 450px;
     margin-left: auto;
     margin-right: auto;
 }

 .input-contact,
 .input-line {
     color: #000;
     font-size: 1em;
 }

 .testimonial-client {
     position: relative;
     top: -35px;
 }

 .testimonial-client-img {
     width: 60px;
     margin: 0 auto;
 }

 .testimonial-client-img img,
 .testimonial-client-photo-a-s3 img,
 .testimonial-client-photo-b-s3 img,
 .testimonial-client-photo-c-s3 img,
 .testimonial-client-photo-d-s3 img {
     border-radius: 50%;
 }

 .testimonial-client-details h6 {
     font-size: 1em;
     font-weight: 600;
     display: block;
 }

 .testimonial-client-details span {
     font-weight: 400;
     font-size: 0.875em;
     display: block;
 }

 .testimonial-client-s3 {
     width: 3000px;
     height: 400px;
     background: linear-gradient(to right, #453bc1 0, #d385f4 20%, #d385f4 100%);
     border-radius: 50px 0 0 50px;
     transform: rotate(-2deg);
     position: relative;
 }

 .testimonial-client-photo-a-s3 {
     width: 100px;
     height: 100px;
     position: absolute;
     top: 150px;
     left: 10px;
 }

 .testimonial-client-photo-b-s3 {
     width: 45px;
     height: 45px;
     position: absolute;
     top: 70px;
     left: 120px;
 }

 .testimonial-client-photo-c-s3 {
     width: 45px;
     height: 45px;
     position: absolute;
     bottom: 75px;
     left: 120px;
 }

 .testimonial-client-photo-d-s3 {
     width: 60px;
     height: 60px;
     position: absolute;
     top: 180px;
     left: 200px;
 }

 .testimonial-text-s3 span {
     position: absolute;
     top: 10px;
     font-size: 9.375em;
     line-height: 0.04;
     color: #3931ec;
     font-weight: 400;
 }

 .testimonial-text-s3 blockquote {
     font-size: 1.2em;
     line-height: 1.6;
 }

 .testimonial-text-s3 p {
     color: #b7bdc5;
 }

 .service-accordian .card-body p,
 .service-accordian p {
     font-size: 1.18rem;
     color: #333;
     line-height: 1.9;
     padding: 0;
 }

 .card-header .btn-link {
     font-weight: 400;
     font-size: 1.2rem;
 }

 .why-box:hover .why-img {
     transform: rotateY(360deg);
     transition: all 1s ease-out;
     transform: scale(1.2);
 }

 .why-box {
     padding: 35px 20px;
     min-height: 340px;
     /* margin-bottom: 30px; */
 }

 .bg {
    background: linear-gradient(to bottom, rgba(246,249,255,1) 0%, rgba(230,240,255,0.5) 100%);
 }

 .bg-1 {
     background-image: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgb(237, 245, 255, 0.3));
 }

 .small {
     width: 70%;
     margin-left: auto;
     margin-right: auto;
 }

 .video {
     width: 560;
     height: 315;
 }






 /* Responsive Queries */
 @media all and (min-width: 400px) {
     .testimonial-text-s3 {
         margin-top: 120px;
     }

     .testimonial-text-s3 blockquote {
         font-size: 1.8em;
     }

     .testimonial-client-photo-b-s3,
     .testimonial-client-photo-c-s3 {
         left: 180px;
     }

     .testimonial-client-photo-d-s3 {
         left: 300px;
     }

 }

 @media all and (min-width: 480px) {
     .text-block-1 p {
         padding-top: 10px;
     }

     .header-text-lg h1,
     .header-text-s2 h1,
     .sec-title-xl,
     .sec-title-xxl,
     .text-block-1 h2 {
         font-size: 2.5em;
     }

     .sec-title-lg {
         font-size: 2.2em;
     }

     .logo {
         height: auto;
     }

     .header-text {}

     .header-text p {
         padding: 10px 0;
     }

     .address-box,
     .header-img {
         max-width: 350px;
     }

     .why-box {
         padding: 30px 20px;
     }

     .why-box h2 {
         font-size: 1.1em;
         margin-bottom: 0;
     }

     .why-this-content {
         padding: 10px 0;
     }

     .team-info h2,
     .why-this-content h2 {
         font-size: 1.125em;
     }

     .address-box h2 {
         font-size: 1.5em;
     }

     .team-photo {
         width: 120px;
     }

     .team-info h2 span {
         font-size: 0.875em;
     }

     .testimonial-client-s3 {
         height: 550px;
     }

     .testimonial-client-photo-a-s3 {
         width: 150px;
         height: 150px;
         top: 150px;
     }

     .testimonial-client-photo-b-s3,
     .testimonial-client-photo-c-s3 {
         width: 60px;
         height: 60px;
         left: 250px;
     }

     .testimonial-client-photo-c-s3 {
         bottom: 140px;
     }

     .testimonial-client-photo-d-s3 {
         width: 80px;
         height: 80px;
         left: 365px;
     }
 }

 @media all and (min-width: 576px) {
     body {
         font-size: 15px;
     }

     .lead {
         /*font-size: 1.15rem;
         color: #222;*/
         font-size: 1.18rem;
         color: #333;
         line-height: 1.9;
     }

     .sec-heading,
     .sec-heading-s3 {
         padding-bottom: 30px;
     }

     /* .header-text-s3, */
     /* .sec-heading p { */
     /* padding-top: 50px; */
     /* } */
     .sec-heading-s3 p {
         padding-top: 20px;
     }

     .header-text-s3 .header-btn,
     .quick-access-text,
     .sec-heading-xl p,
     .tools-text-s3 {
         padding-top: 30px;
     }

     .sec-img {
         max-width: 450px;
     }

     .pt {
         padding-top: 100px;
     }

     .pb {
         padding-bottom: 100px;
     }

     .section-pad {
         padding-top: 80px;
         padding-bottom: 80px;
     }

     .section-pad-xs {
         padding-top: 50px;
         padding-bottom: 50px;
     }

     .section-pad-sm {
         padding-top: 60px;
         padding-bottom: 60px;
     }

     .section-pad-md {
         padding-top: 50px;
         padding-bottom: 50px;
     }

     .section-pad-lg {
         padding-top: 90px;
         padding-bottom: 90px;
     }

     .section-pad-xl {
         padding-top: 100px;
         padding-bottom: 100px;
     }

     .header-text-s3 .lead {
         padding-top: 20px;
         padding-bottom: 10px;
     }

     .header-img-s3 {
         max-width: 400px;
     }

     .header-area-s4 .about-header-img {
         max-width: 300px;
     }

     .why-xiom-item {
         margin: 25px 0;
     }

     .why-xiom-item h2 {
         font-size: 1.5em;
     }

     .address-box {
         padding: 35px 0 40px;
         max-width: 450px;
     }

     .address-box-s2 h2 {
         padding-bottom: 15px;
     }

     .team-photo-s2 {
         max-width: 250px;
     }

     .team-info-s2 h2 {
         padding-top: 15px;
     }

     .quick-access-icon,
     .tools-icon-s3 {
         width: 60px;
         height: 60px;
     }

     .quick-access-text h2,
     .tools-text-s3 h2 {
         padding-bottom: 20px;
     }

     .testimonial-client-photo-a-s3 {
         width: 180px;
         height: 180px;
         left: 50px;
     }

     .testimonial-client-photo-b-s3,
     .testimonial-client-photo-c-s3 {
         width: 70px;
         height: 70px;
         left: 280px;
     }

     .testimonial-client-photo-d-s3 {
         width: 90px;
         height: 90px;
         left: 400px;
     }
 }

 @media all and (min-width: 620px) {
     .testimonial-client-photo-a-s3 {
         width: 200px;
         height: 200px;
         left: 100px;
     }

     .testimonial-client-photo-b-s3,
     .testimonial-client-photo-c-s3 {
         width: 70px;
         height: 70px;
         left: 340px;
     }

     .testimonial-client-photo-d-s3 {
         width: 90px;
         height: 90px;
         left: 450px;
     }
 }

 @media all and (min-width: 768px) {
     .sec-heading h2::before {
         width: 140px;
         left: 40%;
     }

     .text-block,
     .text-block-2 {
         padding-top: 0;
     }

     .text-block p {
         padding: 10px 0;
     }

     .text-block-2 p {
         padding-top: 20px;
         padding-bottom: 30px;
     }

     .sec-title {
         font-size: 3em;
     }

     .sec-title-sm {
         font-size: 1.25em;
     }

     .sec-title-lg {
         font-size: 2.2em;
     }

     .sec-title-xl {
         font-size: 2.7em;
     }

     .header-area-s3 {
         padding-bottom: 100px;
     }

     .header-text-lg h1 {
         font-size: 3.75em;
     }

     .header-text-s2 {
         padding-left: 30px;
         padding-right: 30px;
     }

     .header-text-s2 p {
         padding: 10px 15px;
     }

     .header-text-s3,
     .why-xiom-btn {
         padding-top: 20px;
     }

     .header-text-s3 .lead {
         padding-top: 10px;
     }

     .header-text-s3 .header-content-s2 h1 {
         font-size: 2.5em;
     }

     .header-img,
     .header-img-s3 {
         max-width: 450px;
     }

     .header-img-s2 {
         max-width: 300px;
     }

     .header-area-s4 .about-header-img {
         max-width: 400px;
     }

     .header-area-s4 .header-content {
         padding-bottom: 50px;
     }

     .why-box {
         padding: 85px 35px;
         max-width: 100%;
     }

     .why-box p {
         font-size: 16px;
     }

     .why-box .why-img {
         width: 70px;
         padding-bottom: 30px;
     }

     .why-box-sm {
         padding: 30px 40px 40px;
     }

     .why-box-sm .why-img {
         width: 100px;
         padding-bottom: 20px;
     }

     .why-this-content {
         padding: 20px 0;
         text-align: left;
     }

     .why-xiom-item {
         text-align: left;
     }

     .why-xiom-item h2 {
         padding-left: 15px;
         padding-top: 0;
     }

     .why-xiom-item-s2 {
         margin: 0;
     }

     .why-xiom-item-s2 .why-xiom-icon {
         margin-bottom: 35px;
     }

     .why-xiom-icon {
         display: inline-block;
     }

     .why-xiom-icon-s2 {
         margin-bottom: 30px;
     }

     .about-us-heading {
         padding-bottom: 40px;
     }

     .address-box {
         padding: 50px 0 55px;
         max-width: 100%;
     }

     .address-box-s2 {
         margin-bottom: 0;
     }

     .address-box-s2 h2 {
         padding-bottom: 20px;
     }

     .team-photo-s2 {
         max-width: 100%;
     }

     .team-info-s2 h2 {
         padding-top: 25px;
     }

     .tools .text-block h2 {
         padding-left: 5px;
     }

     .tools-icon-s3 {
         margin-left: auto;
         margin-right: 0;
     }

     .quick-access-img,
     .tools-img-s3 {
         padding-bottom: 0;
     }

     .quick-access-icon {
         margin-left: 0;
     }

     .feature-item {
         margin: 20px 0;
         text-align: left;
     }

     .feature-item-s3 {
         display: flex;
         padding: 30px 40px 40px 30px;
     }

     .feature-text-s3 {
         text-align: left;
         padding-left: 20px;
         padding-top: 8px;
     }

     .feature-icon-s3 {
         flex-shrink: 0;
     }

     .feature-icon-s4 {
         width: 85px;
         height: 85px;
     }

     .testimonial-box {
         padding: 40px 35px 50px;
         max-width: 100%;
     }

     .testimonial-client-details h6 {
         font-size: 1.125em;
     }

     .testimonial-client-photo-a-s3 {
         top: 120px;
         left: 5px;
     }

     .testimonial-client-photo-b-s3 {
         top: 40px;
         left: 300px;
     }

     .testimonial-client-photo-c-s3 {
         bottom: 100px;
         left: 300px;
     }

     .testimonial-client-photo-d-s3 {
         top: 180px;
         left: 500px;
     }
 }

 @media all and (min-width: 992px) {
     .sec-text-pad {
         padding-right: 20px;
         padding-left: 20px;
     }

     .sec-heading h2::before {
         width: 150px;
         height: 60px;
         left: 37%;
     }

     .text-block-1 p {
         padding-right: 80px;
     }

     .text-block-1 h2 {
         font-size: 2.88em;
     }

     .sec-img {
         max-width: 100%;
     }

     .pt {
         padding-top: 130px;
     }

     .pt-sm {
         padding-top: 50px;
     }

     .pb {
         padding-bottom: 130px;
     }

     .section-pad {
         padding-top: 175px;
         padding-bottom: 175px;
     }

     .section-pad-xs {
         padding-top: 80px;
         padding-bottom: 80px;
     }

     .section-pad-sm {
         padding-top: 110px;
         padding-bottom: 110px;
     }

     .section-pad-md {
         padding-top: 50px;
         padding-bottom: 50px;
     }

     .section-pad-lg {
         padding-top: 190px;
         padding-bottom: 190px;
     }

     .section-pad-xl {
         padding-top: 245px;
         padding-bottom: 245px;
     }

     .box-border {
         border: 1px solid #e1e4ec;
     }

     .box-border-tn {
         border-top: none;
     }

     .box-border-bn {
         border-bottom: none;
     }

     .box-border-rn {
         border-right: none;
     }

     .box-border-ln {
         border-left: none;
     }

     .navbar-brand {
         height: 70px;
     }

     .header-area-s2 .site-header .navbar,
     .header-area-s3 .site-header .navbar,
     .site-header .navbar {
         position: absolute;
         padding: 15px 0;
     }

     .header-area-s2 .navbar.is-transparent.active,
     .header-area-s3 .navbar.is-transparent.active,
     .navbar.is-transparent.active {
         background: 0 0;
     }

     .nav-item:last-child {
         padding-right: 0;
         padding-left: 18px;
         padding-top: 5px;
     }

     .header-content {
         padding-top: 123px;
     }

     .header-content-s2 {
         padding-top: 100px;
     }

     .header-text-lg p {
         padding-top: 10px;
     }

     .header-text-s2 {
         padding-bottom: 50px;
     }

     .header-img-s3 {
         max-width: 100%;
         margin-right: -140px;
     }

     .header-img-s4 {
         margin-top: -90px;
         max-width: 550px;
         padding-left: 50px;
     }

     .header-area-s4 .header-text-s3 {
         padding-top: 120px;
         margin-top: 0;
     }

     .header-area-s4 .header-text-s3 h1 {
         padding-right: 70px;
     }

     .header-area-s4 .header-text-s3 p {
         padding: 20px 0 0;
     }

     .header-area-s4 .header-content {
         padding-bottom: 0;
     }

     .address-box,
     .why-box,
     .why-xiom-img {
         margin-bottom: 0;
     }

     .why-box {
         padding: 35px 20px;
         min-height: 340px;
         /* margin-bottom: 30px; */
     }

     .why-this-content {
         padding: 0;
     }

     .why-xiom-item-s2 p {
         padding-left: 45px;
         padding-right: 45px;
     }

     .team-info h2 span {
         padding-top: 5px;
     }

     .config-img {
         margin-left: -50px;
     }

     .config-img.nomr {
         margin-left: 0;
     }

     .feature-item h2 {
         font-size: 1.125em;
     }

     .feature-item img {
         margin-bottom: 30px;
     }

     .testimonial-client-photo-a-s3 {
         top: 120px;
         left: -120px;
     }

     .testimonial-client-photo-b-s3 {
         top: 70px;
         left: 150px;
     }

     .testimonial-client-photo-c-s3 {
         bottom: 100px;
         left: 150px;
     }

     .testimonial-client-photo-d-s3 {
         top: 180px;
         left: 250px;
     }
 }


 @media all and (min-width: 1200px) {
     .nav-item {
         padding: 0 18px;
     }

     .testimonial-client-photo-a-s3 {
         width: 270px;
         height: 270px;
     }

     .testimonial-client-photo-b-s3,
     .testimonial-client-photo-c-s3 {
         width: 80px;
         height: 80px;
         left: 250px;
     }

     .testimonial-client-photo-d-s3 {
         width: 110px;
         height: 110px;
         left: 400px;
     }
 }

 .cta,
 .subscriber {
     position: relative;
     margin-bottom: -200px;
     z-index: 6;
 }

 .cta-box {
     background-color: #fff;
     padding: 40px 30px;
     text-align: center;
     border-radius: 30px;
 }

 .footer-widget-s3 .social-icon:hover,
 .social-icon {
     background-color: #c8cfe7;
 }

 .cta-box .input-heading {
     font-size: 1.5em;
     font-weight: 600;
     line-height: 0.75;
     margin-bottom: 20px;
 }

 .cta-box h2 {
     font-size: 1.2em;
     font-weight: 600;
     line-height: 1.6;
     padding-bottom: 20px;
 }

 .subscriber-box {
     padding: 60px 0;
 }

 .subscriber-box .subscriber-text {
     font-size: 1.3em;
     font-weight: 600;
     line-height: 1.6;
     padding: 0 20px;
 }

 .subscriber-box .subscriber-text-xl {
     font-size: 1.5em;
     font-weight: 600;
     line-height: 1;
 }

 .input-contact {
     width: 100%;
     border: none;
     border-bottom: 1px solid #e2e7ed;
     line-height: 1.5;
 }

 .input-field {
     margin: 10px auto 20px;
     width: 80%;
 }

 .input-line {
     width: 100%;
     border: none;
     border-bottom: 1px solid #ff5e8d;
     line-height: 1.6;
     padding-bottom: 5px;
 }

 .contact-info {
     padding: 60px 30px 50px;
 }

 @media all and (min-width: 480px) {
     .cta-box .input-heading {
         font-size: 2.5em;
     }

     .cta-box h2 {
         font-size: 1.5em;
     }

     .input-field {
         margin: 30px auto 20px;
     }

     .input-line {
         font-size: 1.875em;
         padding-bottom: 10px;
     }
 }

 .map {
     min-height: 350px;
     margin-top: 50px;
     border: 8px solid #fff;
 }

 .cta-s2:before,
 .subscriber-s3:before {
     position: absolute;
     width: 100%;
     background: url(../images/shape-j.svg) 0 0/100% no-repeat, linear-gradient(to right, #3b36be 0, #d184f3 100%) 0 0/100% no-repeat;
 }

 .cta-content-s2 h2 {
     color: #fff;
     line-height: 0.83;
     padding-bottom: 35px;
 }

 .subscriber-s2 {
     margin-bottom: 0;
 }

 .subscriber-s2 h2 {
     font-weight: 600;
     font-size: 3em;
     line-height: 0.75;
     color: #505a77;
 }

 label.error {
     font-size: 13px;
 }

 .card-header h5,
 .footer-widget-header-s3,
 .input-icon-s3 i,
 .input-line-s3 {
     font-size: 1.125em;
 }

 .subscriber-content-s3 {
     padding-top: 80px;
 }

 .subscriber-content-s3 h2 {
     color: #fff;
     padding-bottom: 50px;
 }

 .subscriber-content-s3 label.error {
     margin-top: 10px;
     color: #fff;
 }

 .input-line-s3 {
     width: 100%;
     border: none;
     color: #a5adbb;
     line-height: 1.87;
     padding: 20px 0;
     border-radius: 50px;
     text-align: center;
 }

 .input-icon-s3 {
     position: absolute;
     top: 22px;
     left: 30px;
 }

 .input-icon-s3 i {
     color: #4a5b7a;
 }

 .input-btn-s3 {
     display: block;
     padding-top: 30px;
 }

 .input-s3 input[type="email"] {
     padding-left: 40px;
 }

 @media (min-width: 576px) {
     .input-line-s3 {
         padding: 35px 0;
         text-align: left;
     }

     .input-icon-s3 {
         left: 45px;
         top: 39px;
     }

     .input-btn-s3 {
         position: absolute;
         right: 30px;
         top: 28px;
         padding-top: 0;
     }

     .input-s3 input[type="email"] {
         padding-left: 80px;
     }
 }

 .footer-widget,
 .footer-widget-s3 {
     text-align: center;
 }

 .footer-area:before {
     position: absolute;
     width: 100%;
     background: url(../../images/wave-2.svg) 0 0/100% no-repeat, linear-gradient(to bottom, #e5f1ff, #edf5ff, #f8fbff) 0 0/100% no-repeat;
 }

 .footer-area-s2:before {
     position: absolute;
     width: 100%;
     background: url(../images/shape-h.svg) 0 0/100% no-repeat, linear-gradient(to bottom, #e3e8ff, #f2f6ff) 0 0/100% no-repeat;
 }

 .footer-content {
     position: relative;
     padding-top: 240px;
     padding-bottom: 35px;
 }

 .footer-widget {
     margin-top: 20px;
 }

 .footer-widget a:hover,
 .footer-widget-s3 a:hover {
     color: #3498db;
 }

 .footer-widget-s3 a {
     color: #adb4bb;
 }

 .footer-widget-s3 .social-icon {
     background-color: #4a5b7a;
 }

 .footer-widget-s3 .social-icon:hover a {
     color: #4a5b7a;
 }

 .footer-list {
     padding-left: 0;
     margin: 0;
 }

 .footer-text {
     padding: 30px 0 40px;
     font-size: 0.875em;
     font-weight: 400;
     line-height: 1.5;
     border-top: 1px solid #dadee3;
 }

 .footer-text-s3 {
     font-family: "Hind Madurai";
     font-size: 0.87em;
     line-height: 1.5;
     color: #adb4bb;
     padding-top: 12px;
 }

 .footer-text-s3 span {
     font-weight: 600;
     color: #adb4bb;
 }

 .check-box,
 .social {
     padding-top: 15px;
 }

 .social-icon {
     width: 30px;
     height: 30px;
     border-radius: 50%;
     display: inline-block;
     position: relative;
     transition: 0.5s;
 }

 .pricing-box.active .btn-price,
 .up-icon {
     background-color: #ff5e8d;
     color: #fff;
 }

 .social-icon a {
     color: #424c6d;
     display: block;
 }

 .social-icon i,
 .up-icon i {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
 }

 .social-icon:hover {
     background-color: #424c6d;
 }

 .social-icon:hover a {
     color: #c8cfe7;
 }

 .social-icon+.social-icon {
     margin-left: 5px;
 }

 .up-icon {
     width: 52px;
     height: 52px;
     border-radius: 50%;
     display: inline-block;
     position: absolute;
     bottom: 6%;
     right: 0;
     cursor: pointer;
     box-shadow: 0 25px 35px rgba(17, 85, 162, 0.15);
     background-color: #1155a2;
     transition: 0.3s;
 }

 .login-content,
 .login-content-s2,
 .pricing-box {
     box-shadow: 0 0 90px rgba(14, 0, 137, 0.06);
 }

 .up-icon:hover {
     background-color: #0d427d;
     box-shadow: 0px 25px 35px rgba(124, 152, 231, 0.3);
     transition: 0.3s;
 }

 .login {
     min-height: 100vh;
     padding: 50px 0;
     background-color: #f8fbff;
 }

 .login .input-field {
     margin: 0;
     width: 100%;
 }

 .login .input-field-s2 {
     margin: 20px 0 10px;
 }

 .login-content {
     background-color: #fff;
     padding: 30px 0 15px;
     border-radius: 10px;
     max-width: 500px;
     margin-left: auto;
     margin-right: auto;
     position: relative;
 }

 .ball-lg,
 .ball-sm,
 .zigzag-shape {
     position: absolute;
 }

 .login-content h2 {
     font-size: 2em;
     font-weight: 700;
     line-height: 1.5;
 }

 .login-content-s2 {
     padding: 0 20px;
 }

 .check-box-2,
 .login-btn {
     padding-left: 15%;
 }

 .login-title {
     padding-bottom: 15px;
 }

 .login-text p {
     font-size: 1em;
     line-height: 4.5;
 }

 .login-text span {
     padding-left: 5px;
 }

 .login-btn {
     text-align: left;
     padding-top: 10px;
 }

 .ball-lg {
     top: 20%;
     left: -120px;
     width: 80px;
     height: 80px;
 }

 .ball-sm {
     top: 30%;
     right: -70px;
     width: 50px;
     height: 50px;
 }

 .zigzag-shape {
     bottom: -30%;
     left: 30%;
     width: 200px;
     height: 200px;
     z-index: -1;
 }

 .input-login {
     width: 70%;
     border: none;
     font-size: 0.875em;
     border-bottom: 1px solid #e2e7ed;
 }

 .check-text {
     padding-left: 5px;
     font-family: Lato;
 }

 .checkbox-label {
     display: block;
     position: relative;
     padding-left: 35px;
     cursor: pointer;
     text-align: left;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
 }

 .checkbox-label input {
     position: absolute;
     opacity: 0;
     cursor: pointer;
 }

 .checkmark {
     position: absolute;
     top: 0;
     left: 0;
     height: 25px;
     width: 25px;
     background-color: transparent;
     border: 1px solid #bfc9d4;
     border-radius: 5px;
 }

 .checkmark:after {
     content: "";
     position: absolute;
     display: none;
 }

 .checkbox-label input:checked~.checkmark:after {
     display: block;
 }

 .checkbox-label .checkmark:after {
     left: 9px;
     top: 5px;
     width: 5px;
     height: 10px;
     border: solid #6f7c8a;
     border-width: 0 3px 3px 0;
     -webkit-transform: rotate(45deg);
     -ms-transform: rotate(45deg);
     transform: rotate(45deg);
 }

 .pricing-box-s2:hover,
 .pricing-box-s4:hover,
 .pricing-box:hover {
     transform: translateY(-8px);
 }

 .pricing-box,
 .pricing-box-s2,
 .pricing-box-s4 {
     background-color: #fff;
     margin-bottom: 30px;
     max-width: 350px;
     margin-left: auto;
     margin-right: auto;
     transition: 0.5s;
 }

 .login-s2 {
     padding: 50px 0;
     position: relative;
     background-color: #fff;
 }

 .login-s2:before {
     content: "";
     position: absolute;
     left: 0;
     top: 0;
     height: 80%;
     width: 101%;
     background: url(../images/shape-i.svg) 100% 100%/100% no-repeat, linear-gradient(to right, #d184f3 0, #3b36be 100%) 100% 100%/100% no-repeat;
     z-index: 0;
 }

 .login-s2 .input-login {
     width: 100%;
 }

 .login-s2 .login-img {
     padding: 50px 0 20px;
 }

 .login-s2 .login-img img {
     max-height: 200px;
 }

 .pricing-box {
     padding: 0 0 40px;
 }

 .pricing-box sup,
 .pricing-box-s2 sup {
     font-size: 0.3em;
     top: -40px;
     left: 15px;
 }

 .pricing-box:hover {
     z-index: 8;
 }

 .pricing-box.active {
     background-color: #7c98e7;
     transition: 0.5s;
 }

 .pricing-box-s2 {
     padding: 35px 0 45px;
     border: 1px solid #d9d9d9;
     border-radius: 5px;
 }

 .pricing-box-s2.active {
     background: linear-gradient(to right, #674ece, #b476e9);
     z-index: 5;
     border: none;
     position: relative;
     transform: scale(1.05);
     transition: 0.3s;
 }

 .faq-s2:before,
 .partners4:before {
     content: "";
     position: absolute;
     height: 100%;
     width: 110%;
     top: -2%;
     left: -5%;
     transform: rotate(-2deg);
 }

 .pricing-box-s2.active:hover {
     transform: translateY(-8px) scale(1.05);
 }

 .pricing-box-s4 {
     padding: 0 0 40px;
     box-shadow: 0 0 49px 0 rgba(134, 142, 167, 0.1);
 }

 .pricing-box-s4 sup {
     font-size: 0.3em;
     top: -40px;
     left: 10px;
 }

 .pricing-title {
     width: 100%;
     border-bottom: 1px solid #e6edf7;
     font-size: 1.5em;
     line-height: 1;
     padding: 20px 0;
     font-weight: 700;
 }

 .pricing-title-s2,
 .pricing-title-s4 {
     font-size: 1.125em;
     line-height: 1.6;
     font-weight: 400;
 }

 .active .pricing-title {
     color: #fff;
     border-bottom: 1px solid #e6edf7;
 }

 .pricing-title-s4 {
     color: #4a5b7a;
     padding-top: 30px;
 }

 .pricing-price {
     font-size: 3.5em;
     line-height: 1.5;
     display: block;
     color: #3d486a;
     padding-right: 25px;
 }

 .pricing-price-s2,
 .pricing-price-s4 {
     font-size: 4.5em;
     display: block;
     padding-right: 25px;
     color: #3d486a;
 }

 .pricing-price-s2 {
     line-height: 1.2;
 }

 .pricing-price-s4 {
     font-weight: 400;
     line-height: 1.5;
 }

 .pricing-list-s4,
 .pricing-note-s4 {
     font-family: Poppins;
     font-size: 1em;
     font-weight: 400;
 }

 .pricing-note {
     margin-top: -30px;
     color: #3d486a;
 }

 .pricing-note-s2 {
     font-family: Poppins;
     color: #8a95a1;
 }

 .pricing-note-s4 {
     margin-top: -30px;
     color: #8a95a1;
     display: inherit;
     padding-top: 5px;
     padding-bottom: 20px;
 }

 .pricing-list {
     line-height: 2.25;
     padding: 10px 0;
 }

 .pricing-list-s2 {
     color: #8a95a1;
     padding: 20px 0 30px;
 }

 .pricing-list-s4 {
     line-height: 1.875;
     color: #8a95a1;
     padding: 10px 0;
 }

 @media all and (min-width: 576px) {
     .cta-box {
         padding: 60px 50px;
     }

     .cta-box .input-heading,
     .login-content h2 {
         font-size: 3em;
     }

     .cta-box h2 {
         font-size: 1.5em;
     }

     .subscriber-box .subscriber-text {
         font-size: 1.875em;
     }

     .subscriber-box .subscriber-text-xl {
         font-size: 2.77em;
     }

     .input-field {
         margin: 50px auto 40px;
     }

     .input-field-s2 {
         margin-top: 40px;
     }

     .subscriber-btn {
         margin-top: 60px;
     }

     .contact-info {
         padding: 80px 50px 70px;
     }

     .footer-content {
         padding-top: 280px;
     }

     .footer-text {
         /*padding: 40px 0 45px;*/
         padding: 20px 0 5px;
     }

     .login .input-field-s2 {
         margin: 60px 0 20px;
     }

     .login-content {
         padding: 75px 0 15px;
         max-width: 100%;
     }

     .login-content-s2 {
         padding: 0 50px;
     }

     .login-title {
         padding-bottom: 20px;
     }

     .login-text {
         padding-top: 25px;
     }

     .input-login {
         font-size: 1em;
     }

     .login-s2 .check-box {
         padding-right: 0;
     }

     .pricing-box,
     .pricing-box-s2 {
         max-width: 400px;
     }

     .pricing-box-s4 {
         max-width: 450px;
     }

     .pricing-title {
         font-size: 1.875em;
         padding: 40px 0;
     }

     .pricing-price {
         font-size: 4em;
     }
 }

 .partners4:before {
     background: linear-gradient(to bottom, #f6faff, #fff);
     z-index: 0;
 }

 .partner-list {
     padding-top: 10px;
     padding-left: 0;
     padding-right: 0;
 }

 .partner-list li {
     display: inline-block;
     margin: 5px;
 }

 .partner-list img {
     width: 120px;
     height: auto;
 }

 .partner-info-s3 li {
     display: inline-block;
     margin: 10px;
 }

 .partner-img-s3 {
     width: 140px;
     height: 40px;
 }

 @media all and (min-width: 768px) {
     .cta-box {
         padding: 70px 30px;
         text-align: left;
     }

     .cta-box h2,
     .partner {
         padding-bottom: 0;
     }

     .subscriber-box .subscriber-text {
         padding: 0;
     }

     .input-field {
         width: 90%;
         margin-left: auto;
         margin-right: auto;
     }

     .footer-widget,
     .footer-widget-s3 {
         text-align: left;
     }

     .footer-content {
         /* padding-top: 290px;*/
         padding-top: 170px;
     }

     .footer-widget {
         margin-top: 0;
     }

     .up-icon {
         bottom: 14%;
     }

     .login-btn {
         padding-left: 0;
         padding-top: 0;
         text-align: center;
     }

     .login-s2 .login-btn-s2 {
         text-align: right;
         padding-top: 0;
     }

     .pricing-box,
     .pricing-box-s2,
     .pricing-box-s4 {
         max-width: 100%;
     }

     .pricing-box {
         padding: 0 0 75px;
     }

     .partner-list {
         padding-top: 30px;
     }

     .partner-list li {
         margin: 10px 15px;
     }

     .partner-list img {
         width: 100%;
     }

     .partner-info-s3 h2 {
         padding-bottom: 80px;
     }

     .partner-info-s3 li {
         margin: 20px 30px;
     }

     .partner-img-s3 {
         width: 160px;
         height: 60px;
     }
 }

 @media all and (min-width: 992px) {
     .cta-box {
         padding: 35px;
     }

     .cta-btn {
         text-align: right;
     }

     .login-s2,
     .subscriber-box {
         padding: 100px 0;
     }

     .map {
         width: 100%;
         height: 100%;
         margin-top: 0;
     }

     .footer-widget-s3 {
         padding-left: 80px;
     }

     .footer-widget-first {
         padding-left: 0;
     }

     .up-icon {
         bottom: 4%;
     }

     .login-content-s2 {
         padding: 80px 0 60px;
     }

     .login-s2 .login-title {
         padding-bottom: 60px;
     }

     .login-s2 .login-img {
         padding: 0;
     }

     .login-s2 .login-img img {
         max-height: 500px;
     }

     .pricing-box,
     .pricing-box-s2,
     .pricing-box-s4 {
         margin-bottom: 0;
     }

     .partner-info-s3 li {
         margin: 20px 60px;
     }
 }

 .faq-s2:before {
     background: #f6f9ff;
     z-index: 1;
 }

 .accordion-custom {
     margin-bottom: 10px;
     border: none;
 }

 .card-header {
     background: #fff;
     border: 0;
     padding: 3px 30px;
     position: relative;
 }

 .card-header .btn-link {
     width: 100%;
     font-family: "Hind Madurai";
     font-weight: 600;
     color: #4a5b7a;
     border: none;
 }

 .overlay-bar-1:before,
 .overlay-bar:before {
     content: "";
     background: #fff;
     width: 110%;
     left: -5%;
     z-index: 0;
 }

 .card-body {
     border-top: 1px solid #e7e9ee;
 }

 .card-body p {
     font-weight: 400;
     color: #9fa8b1;
     line-height: 2.25;
     padding: 0 25px;
 }

 .collapsed .faq-icon {
     transform: rotate(180deg);
 }

 .faq-icon {
     position: absolute;
     right: 5%;
 }

 .overlay-bar {
     position: absolute;
     background: linear-gradient(to right, rgba(202, 88, 252, 0.7) 0, rgba(59, 54, 190, 0.7) 100%);
     transform: rotate(6deg);
     left: -10%;
     height: 650px;
     width: 120%;
     top: 100%;
     margin-top: -240px;
 }

 .overlay-bar:before {
     position: absolute;
     transform: rotate(-8deg);
     height: 650px;
     top: 196px;
 }

 .overlay-bar-1,
 .overlay-bar-1:before {
     position: absolute;
     height: 650px;
     top: 0;
 }

 .overlay-bar-1 {
     background: linear-gradient(to right, rgba(59, 54, 190, 0.7) 0, rgba(209, 132, 243, 0.7) 100%);
     left: -10%;
     width: 120%;
     margin-top: -380px;
 }

 .overlay-bar-1:before {
     transform: rotate(-6deg);
     margin-top: -265px;
 }

 .overlay-bar-3 {
     top: 80%;
 }

 @media all and (min-width: 1400px) {
     body {
         font-size: 18px;
     }

     .header-content-s2 {
         padding-top: 150px;
     }

     .header-text-s2 {
         padding-left: 100px;
         padding-right: 100px;
         padding-bottom: 75px;
     }

     .header-text-s2 p {
         padding: 15px 25px;
     }

     .header-text-s3 {
         padding-top: 50px;
     }

     .header-text-s3 .lead {
         padding-top: 20px;
     }

     .header-text-s3 .header-content-s2 h1 {
         font-size: 3em;
     }

     .about-header-img,
     .header-img,
     .header-img-s2,
     .header-img-s4 {
         max-width: 100%;
     }

     .overlay-bar {
         top: 95%;
     }

     .overlay-bar:before {
         top: 230px;
     }

     .overlay-bar-3 {
         top: 75%;
     }
 }

 @media all and (min-width: 2000px) {
     .header-area-s3 {
         padding-bottom: 250px;
     }

     .overlay-bar {
         top: 78%;
     }

     .overlay-bar:before {
         top: 385px;
     }

     .overlay-bar-2 {
         top: 68%;
     }

     .overlay-bar-3 {
         top: 60%;
     }
 }

 @media all and (min-width: 2500px) {
     .overlay-bar-3 {
         top: 62%;
     }
 }

 @media all and (min-width: 3000px) {
     .header-area-s3 {
         padding-bottom: 400px;
     }

     .overlay-bar {
         top: 50%;
         height: 950px;
     }

     .overlay-bar:before {
         height: 850px;
         top: 630px;
     }

     .overlay-bar-2 {
         top: 28%;
     }

     .overlay-bar-3 {
         top: 55%;
     }
 }

 /* Custom CSS */
 @-webkit-keyframes bounce {

     20%,
     53%,
     80%,
     from,
     to {
         -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
         animation-timing-function: cubic-bezier(.215, .61, .355, 1);
         -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0)
     }

     40%,
     43% {
         -webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06);
         animation-timing-function: cubic-bezier(.755, .05, .855, .06);
         -webkit-transform: translate3d(0, -30px, 0);
         transform: translate3d(0, -30px, 0)
     }

     70% {
         -webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06);
         animation-timing-function: cubic-bezier(.755, .05, .855, .06);
         -webkit-transform: translate3d(0, -15px, 0);
         transform: translate3d(0, -15px, 0)
     }

     90% {
         -webkit-transform: translate3d(0, -4px, 0);
         transform: translate3d(0, -4px, 0)
     }
 }

 @keyframes bounce {

     20%,
     53%,
     80%,
     from,
     to {
         -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
         animation-timing-function: cubic-bezier(.215, .61, .355, 1);
         -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0)
     }

     40%,
     43% {
         -webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06);
         animation-timing-function: cubic-bezier(.755, .05, .855, .06);
         -webkit-transform: translate3d(0, -30px, 0);
         transform: translate3d(0, -30px, 0)
     }

     70% {
         -webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06);
         animation-timing-function: cubic-bezier(.755, .05, .855, .06);
         -webkit-transform: translate3d(0, -15px, 0);
         transform: translate3d(0, -15px, 0)
     }

     90% {
         -webkit-transform: translate3d(0, -4px, 0);
         transform: translate3d(0, -4px, 0)
     }
 }

 .bounce {
     -webkit-animation-name: bounce;
     animation-name: bounce;
     -webkit-transform-origin: center bottom;
     transform-origin: center bottom
 }

 @-webkit-keyframes flash {

     50%,
     from,
     to {
         opacity: 1
     }

     25%,
     75% {
         opacity: 0
     }
 }

 @keyframes flash {

     50%,
     from,
     to {
         opacity: 1
     }

     25%,
     75% {
         opacity: 0
     }
 }

 .flash {
     -webkit-animation-name: flash;
     animation-name: flash
 }

 @-webkit-keyframes pulse {
     from {
         -webkit-transform: scale3d(1, 1, 1);
         transform: scale3d(1, 1, 1)
     }

     50% {
         -webkit-transform: scale3d(1.05, 1.05, 1.05);
         transform: scale3d(1.05, 1.05, 1.05)
     }

     to {
         -webkit-transform: scale3d(1, 1, 1);
         transform: scale3d(1, 1, 1)
     }
 }

 @keyframes pulse {
     from {
         -webkit-transform: scale3d(1, 1, 1);
         transform: scale3d(1, 1, 1)
     }

     50% {
         -webkit-transform: scale3d(1.05, 1.05, 1.05);
         transform: scale3d(1.05, 1.05, 1.05)
     }

     to {
         -webkit-transform: scale3d(1, 1, 1);
         transform: scale3d(1, 1, 1)
     }
 }

 .pulse {
     -webkit-animation-name: pulse;
     animation-name: pulse
 }

 @-webkit-keyframes rubberBand {
     from {
         -webkit-transform: scale3d(1, 1, 1);
         transform: scale3d(1, 1, 1)
     }

     30% {
         -webkit-transform: scale3d(1.25, .75, 1);
         transform: scale3d(1.25, .75, 1)
     }

     40% {
         -webkit-transform: scale3d(.75, 1.25, 1);
         transform: scale3d(.75, 1.25, 1)
     }

     50% {
         -webkit-transform: scale3d(1.15, .85, 1);
         transform: scale3d(1.15, .85, 1)
     }

     65% {
         -webkit-transform: scale3d(.95, 1.05, 1);
         transform: scale3d(.95, 1.05, 1)
     }

     75% {
         -webkit-transform: scale3d(1.05, .95, 1);
         transform: scale3d(1.05, .95, 1)
     }

     to {
         -webkit-transform: scale3d(1, 1, 1);
         transform: scale3d(1, 1, 1)
     }
 }

 @keyframes rubberBand {
     from {
         -webkit-transform: scale3d(1, 1, 1);
         transform: scale3d(1, 1, 1)
     }

     30% {
         -webkit-transform: scale3d(1.25, .75, 1);
         transform: scale3d(1.25, .75, 1)
     }

     40% {
         -webkit-transform: scale3d(.75, 1.25, 1);
         transform: scale3d(.75, 1.25, 1)
     }

     50% {
         -webkit-transform: scale3d(1.15, .85, 1);
         transform: scale3d(1.15, .85, 1)
     }

     65% {
         -webkit-transform: scale3d(.95, 1.05, 1);
         transform: scale3d(.95, 1.05, 1)
     }

     75% {
         -webkit-transform: scale3d(1.05, .95, 1);
         transform: scale3d(1.05, .95, 1)
     }

     to {
         -webkit-transform: scale3d(1, 1, 1);
         transform: scale3d(1, 1, 1)
     }
 }

 .rubberBand {
     -webkit-animation-name: rubberBand;
     animation-name: rubberBand
 }

 @-webkit-keyframes shake {

     from,
     to {
         -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0)
     }

     10%,
     30%,
     50%,
     70%,
     90% {
         -webkit-transform: translate3d(-10px, 0, 0);
         transform: translate3d(-10px, 0, 0)
     }

     20%,
     40%,
     60%,
     80% {
         -webkit-transform: translate3d(10px, 0, 0);
         transform: translate3d(10px, 0, 0)
     }
 }

 @keyframes shake {

     from,
     to {
         -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0)
     }

     10%,
     30%,
     50%,
     70%,
     90% {
         -webkit-transform: translate3d(-10px, 0, 0);
         transform: translate3d(-10px, 0, 0)
     }

     20%,
     40%,
     60%,
     80% {
         -webkit-transform: translate3d(10px, 0, 0);
         transform: translate3d(10px, 0, 0)
     }
 }

 .shake {
     -webkit-animation-name: shake;
     animation-name: shake
 }

 @-webkit-keyframes headShake {
     0% {
         -webkit-transform: translateX(0);
         transform: translateX(0)
     }

     6.5% {
         -webkit-transform: translateX(-6px) rotateY(-9deg);
         transform: translateX(-6px) rotateY(-9deg)
     }

     18.5% {
         -webkit-transform: translateX(5px) rotateY(7deg);
         transform: translateX(5px) rotateY(7deg)
     }

     31.5% {
         -webkit-transform: translateX(-3px) rotateY(-5deg);
         transform: translateX(-3px) rotateY(-5deg)
     }

     43.5% {
         -webkit-transform: translateX(2px) rotateY(3deg);
         transform: translateX(2px) rotateY(3deg)
     }

     50% {
         -webkit-transform: translateX(0);
         transform: translateX(0)
     }
 }

 @keyframes headShake {
     0% {
         -webkit-transform: translateX(0);
         transform: translateX(0)
     }

     6.5% {
         -webkit-transform: translateX(-6px) rotateY(-9deg);
         transform: translateX(-6px) rotateY(-9deg)
     }

     18.5% {
         -webkit-transform: translateX(5px) rotateY(7deg);
         transform: translateX(5px) rotateY(7deg)
     }

     31.5% {
         -webkit-transform: translateX(-3px) rotateY(-5deg);
         transform: translateX(-3px) rotateY(-5deg)
     }

     43.5% {
         -webkit-transform: translateX(2px) rotateY(3deg);
         transform: translateX(2px) rotateY(3deg)
     }

     50% {
         -webkit-transform: translateX(0);
         transform: translateX(0)
     }
 }

 .headShake {
     -webkit-animation-timing-function: ease-in-out;
     animation-timing-function: ease-in-out;
     -webkit-animation-name: headShake;
     animation-name: headShake
 }

 @-webkit-keyframes swing {
     20% {
         -webkit-transform: rotate3d(0, 0, 1, 15deg);
         transform: rotate3d(0, 0, 1, 15deg)
     }

     40% {
         -webkit-transform: rotate3d(0, 0, 1, -10deg);
         transform: rotate3d(0, 0, 1, -10deg)
     }

     60% {
         -webkit-transform: rotate3d(0, 0, 1, 5deg);
         transform: rotate3d(0, 0, 1, 5deg)
     }

     80% {
         -webkit-transform: rotate3d(0, 0, 1, -5deg);
         transform: rotate3d(0, 0, 1, -5deg)
     }

     to {
         -webkit-transform: rotate3d(0, 0, 1, 0deg);
         transform: rotate3d(0, 0, 1, 0deg)
     }
 }

 @keyframes swing {
     20% {
         -webkit-transform: rotate3d(0, 0, 1, 15deg);
         transform: rotate3d(0, 0, 1, 15deg)
     }

     40% {
         -webkit-transform: rotate3d(0, 0, 1, -10deg);
         transform: rotate3d(0, 0, 1, -10deg)
     }

     60% {
         -webkit-transform: rotate3d(0, 0, 1, 5deg);
         transform: rotate3d(0, 0, 1, 5deg)
     }

     80% {
         -webkit-transform: rotate3d(0, 0, 1, -5deg);
         transform: rotate3d(0, 0, 1, -5deg)
     }

     to {
         -webkit-transform: rotate3d(0, 0, 1, 0deg);
         transform: rotate3d(0, 0, 1, 0deg)
     }
 }

 .swing {
     -webkit-transform-origin: top center;
     transform-origin: top center;
     -webkit-animation-name: swing;
     animation-name: swing
 }

 @-webkit-keyframes tada {
     from {
         -webkit-transform: scale3d(1, 1, 1);
         transform: scale3d(1, 1, 1)
     }

     10%,
     20% {
         -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
         transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg)
     }

     30%,
     50%,
     70%,
     90% {
         -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
         transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)
     }

     40%,
     60%,
     80% {
         -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
         transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)
     }

     to {
         -webkit-transform: scale3d(1, 1, 1);
         transform: scale3d(1, 1, 1)
     }
 }

 @keyframes tada {
     from {
         -webkit-transform: scale3d(1, 1, 1);
         transform: scale3d(1, 1, 1)
     }

     10%,
     20% {
         -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
         transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg)
     }

     30%,
     50%,
     70%,
     90% {
         -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
         transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)
     }

     40%,
     60%,
     80% {
         -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
         transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)
     }

     to {
         -webkit-transform: scale3d(1, 1, 1);
         transform: scale3d(1, 1, 1)
     }
 }

 .tada {
     -webkit-animation-name: tada;
     animation-name: tada
 }

 @-webkit-keyframes wobble {
     from {
         -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0)
     }

     15% {
         -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
         transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg)
     }

     30% {
         -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
         transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg)
     }

     45% {
         -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
         transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg)
     }

     60% {
         -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
         transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg)
     }

     75% {
         -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
         transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg)
     }

     to {
         -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0)
     }
 }

 @keyframes wobble {
     from {
         -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0)
     }

     15% {
         -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
         transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg)
     }

     30% {
         -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
         transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg)
     }

     45% {
         -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
         transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg)
     }

     60% {
         -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
         transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg)
     }

     75% {
         -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
         transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg)
     }

     to {
         -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0)
     }
 }

 .wobble {
     -webkit-animation-name: wobble;
     animation-name: wobble
 }

 @-webkit-keyframes jello {

     11.1%,
     from,
     to {
         -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0)
     }

     22.2% {
         -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
         transform: skewX(-12.5deg) skewY(-12.5deg)
     }

     33.3% {
         -webkit-transform: skewX(6.25deg) skewY(6.25deg);
         transform: skewX(6.25deg) skewY(6.25deg)
     }

     44.4% {
         -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
         transform: skewX(-3.125deg) skewY(-3.125deg)
     }

     55.5% {
         -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
         transform: skewX(1.5625deg) skewY(1.5625deg)
     }

     66.6% {
         -webkit-transform: skewX(-.78125deg) skewY(-.78125deg);
         transform: skewX(-.78125deg) skewY(-.78125deg)
     }

     77.7% {
         -webkit-transform: skewX(.390625deg) skewY(.390625deg);
         transform: skewX(.390625deg) skewY(.390625deg)
     }

     88.8% {
         -webkit-transform: skewX(-.1953125deg) skewY(-.1953125deg);
         transform: skewX(-.1953125deg) skewY(-.1953125deg)
     }
 }

 @keyframes jello {

     11.1%,
     from,
     to {
         -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0)
     }

     22.2% {
         -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
         transform: skewX(-12.5deg) skewY(-12.5deg)
     }

     33.3% {
         -webkit-transform: skewX(6.25deg) skewY(6.25deg);
         transform: skewX(6.25deg) skewY(6.25deg)
     }

     44.4% {
         -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
         transform: skewX(-3.125deg) skewY(-3.125deg)
     }

     55.5% {
         -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
         transform: skewX(1.5625deg) skewY(1.5625deg)
     }

     66.6% {
         -webkit-transform: skewX(-.78125deg) skewY(-.78125deg);
         transform: skewX(-.78125deg) skewY(-.78125deg)
     }

     77.7% {
         -webkit-transform: skewX(.390625deg) skewY(.390625deg);
         transform: skewX(.390625deg) skewY(.390625deg)
     }

     88.8% {
         -webkit-transform: skewX(-.1953125deg) skewY(-.1953125deg);
         transform: skewX(-.1953125deg) skewY(-.1953125deg)
     }
 }

 .jello {
     -webkit-animation-name: jello;
     animation-name: jello;
     -webkit-transform-origin: center;
     transform-origin: center
 }

 @-webkit-keyframes heartBeat {
     0% {
         -webkit-transform: scale(1);
         transform: scale(1)
     }

     14% {
         -webkit-transform: scale(1.3);
         transform: scale(1.3)
     }

     28% {
         -webkit-transform: scale(1);
         transform: scale(1)
     }

     42% {
         -webkit-transform: scale(1.3);
         transform: scale(1.3)
     }

     70% {
         -webkit-transform: scale(1);
         transform: scale(1)
     }
 }

 @keyframes heartBeat {
     0% {
         -webkit-transform: scale(1);
         transform: scale(1)
     }

     14% {
         -webkit-transform: scale(1.3);
         transform: scale(1.3)
     }

     28% {
         -webkit-transform: scale(1);
         transform: scale(1)
     }

     42% {
         -webkit-transform: scale(1.3);
         transform: scale(1.3)
     }

     70% {
         -webkit-transform: scale(1);
         transform: scale(1)
     }
 }

 .heartBeat {
     -webkit-animation-name: heartBeat;
     animation-name: heartBeat;
     -webkit-animation-duration: 1.3s;
     animation-duration: 1.3s;
     -webkit-animation-timing-function: ease-in-out;
     animation-timing-function: ease-in-out
 }

 @-webkit-keyframes bounceIn {

     20%,
     40%,
     60%,
     80%,
     from,
     to {
         -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
         animation-timing-function: cubic-bezier(.215, .61, .355, 1)
     }

     0% {
         opacity: 0;
         -webkit-transform: scale3d(.3, .3, .3);
         transform: scale3d(.3, .3, .3)
     }

     20% {
         -webkit-transform: scale3d(1.1, 1.1, 1.1);
         transform: scale3d(1.1, 1.1, 1.1)
     }

     40% {
         -webkit-transform: scale3d(.9, .9, .9);
         transform: scale3d(.9, .9, .9)
     }

     60% {
         opacity: 1;
         -webkit-transform: scale3d(1.03, 1.03, 1.03);
         transform: scale3d(1.03, 1.03, 1.03)
     }

     80% {
         -webkit-transform: scale3d(.97, .97, .97);
         transform: scale3d(.97, .97, .97)
     }

     to {
         opacity: 1;
         -webkit-transform: scale3d(1, 1, 1);
         transform: scale3d(1, 1, 1)
     }
 }

 @keyframes bounceIn {

     20%,
     40%,
     60%,
     80%,
     from,
     to {
         -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
         animation-timing-function: cubic-bezier(.215, .61, .355, 1)
     }

     0% {
         opacity: 0;
         -webkit-transform: scale3d(.3, .3, .3);
         transform: scale3d(.3, .3, .3)
     }

     20% {
         -webkit-transform: scale3d(1.1, 1.1, 1.1);
         transform: scale3d(1.1, 1.1, 1.1)
     }

     40% {
         -webkit-transform: scale3d(.9, .9, .9);
         transform: scale3d(.9, .9, .9)
     }

     60% {
         opacity: 1;
         -webkit-transform: scale3d(1.03, 1.03, 1.03);
         transform: scale3d(1.03, 1.03, 1.03)
     }

     80% {
         -webkit-transform: scale3d(.97, .97, .97);
         transform: scale3d(.97, .97, .97)
     }

     to {
         opacity: 1;
         -webkit-transform: scale3d(1, 1, 1);
         transform: scale3d(1, 1, 1)
     }
 }

 .bounceIn {
     -webkit-animation-duration: .75s;
     animation-duration: .75s;
     -webkit-animation-name: bounceIn;
     animation-name: bounceIn
 }

 @-webkit-keyframes bounceInDown {

     60%,
     75%,
     90%,
     from,
     to {
         -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
         animation-timing-function: cubic-bezier(.215, .61, .355, 1)
     }

     0% {
         opacity: 0;
         -webkit-transform: translate3d(0, -3000px, 0);
         transform: translate3d(0, -3000px, 0)
     }

     60% {
         opacity: 1;
         -webkit-transform: translate3d(0, 25px, 0);
         transform: translate3d(0, 25px, 0)
     }

     75% {
         -webkit-transform: translate3d(0, -10px, 0);
         transform: translate3d(0, -10px, 0)
     }

     90% {
         -webkit-transform: translate3d(0, 5px, 0);
         transform: translate3d(0, 5px, 0)
     }

     to {
         -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0)
     }
 }

 @keyframes bounceInDown {

     60%,
     75%,
     90%,
     from,
     to {
         -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
         animation-timing-function: cubic-bezier(.215, .61, .355, 1)
     }

     0% {
         opacity: 0;
         -webkit-transform: translate3d(0, -3000px, 0);
         transform: translate3d(0, -3000px, 0)
     }

     60% {
         opacity: 1;
         -webkit-transform: translate3d(0, 25px, 0);
         transform: translate3d(0, 25px, 0)
     }

     75% {
         -webkit-transform: translate3d(0, -10px, 0);
         transform: translate3d(0, -10px, 0)
     }

     90% {
         -webkit-transform: translate3d(0, 5px, 0);
         transform: translate3d(0, 5px, 0)
     }

     to {
         -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0)
     }
 }

 .bounceInDown {
     -webkit-animation-name: bounceInDown;
     animation-name: bounceInDown
 }

 @-webkit-keyframes bounceInLeft {

     60%,
     75%,
     90%,
     from,
     to {
         -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
         animation-timing-function: cubic-bezier(.215, .61, .355, 1)
     }

     0% {
         opacity: 0;
         -webkit-transform: translate3d(-3000px, 0, 0);
         transform: translate3d(-3000px, 0, 0)
     }

     60% {
         opacity: 1;
         -webkit-transform: translate3d(25px, 0, 0);
         transform: translate3d(25px, 0, 0)
     }

     75% {
         -webkit-transform: translate3d(-10px, 0, 0);
         transform: translate3d(-10px, 0, 0)
     }

     90% {
         -webkit-transform: translate3d(5px, 0, 0);
         transform: translate3d(5px, 0, 0)
     }

     to {
         -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0)
     }
 }

 @keyframes bounceInLeft {

     60%,
     75%,
     90%,
     from,
     to {
         -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
         animation-timing-function: cubic-bezier(.215, .61, .355, 1)
     }

     0% {
         opacity: 0;
         -webkit-transform: translate3d(-3000px, 0, 0);
         transform: translate3d(-3000px, 0, 0)
     }

     60% {
         opacity: 1;
         -webkit-transform: translate3d(25px, 0, 0);
         transform: translate3d(25px, 0, 0)
     }

     75% {
         -webkit-transform: translate3d(-10px, 0, 0);
         transform: translate3d(-10px, 0, 0)
     }

     90% {
         -webkit-transform: translate3d(5px, 0, 0);
         transform: translate3d(5px, 0, 0)
     }

     to {
         -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0)
     }
 }

 .bounceInLeft {
     -webkit-animation-name: bounceInLeft;
     animation-name: bounceInLeft
 }

 @-webkit-keyframes bounceInRight {

     60%,
     75%,
     90%,
     from,
     to {
         -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
         animation-timing-function: cubic-bezier(.215, .61, .355, 1)
     }

     from {
         opacity: 0;
         -webkit-transform: translate3d(3000px, 0, 0);
         transform: translate3d(3000px, 0, 0)
     }

     60% {
         opacity: 1;
         -webkit-transform: translate3d(-25px, 0, 0);
         transform: translate3d(-25px, 0, 0)
     }

     75% {
         -webkit-transform: translate3d(10px, 0, 0);
         transform: translate3d(10px, 0, 0)
     }

     90% {
         -webkit-transform: translate3d(-5px, 0, 0);
         transform: translate3d(-5px, 0, 0)
     }

     to {
         -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0)
     }
 }

 @keyframes bounceInRight {

     60%,
     75%,
     90%,
     from,
     to {
         -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
         animation-timing-function: cubic-bezier(.215, .61, .355, 1)
     }

     from {
         opacity: 0;
         -webkit-transform: translate3d(3000px, 0, 0);
         transform: translate3d(3000px, 0, 0)
     }

     60% {
         opacity: 1;
         -webkit-transform: translate3d(-25px, 0, 0);
         transform: translate3d(-25px, 0, 0)
     }

     75% {
         -webkit-transform: translate3d(10px, 0, 0);
         transform: translate3d(10px, 0, 0)
     }

     90% {
         -webkit-transform: translate3d(-5px, 0, 0);
         transform: translate3d(-5px, 0, 0)
     }

     to {
         -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0)
     }
 }

 .bounceInRight {
     -webkit-animation-name: bounceInRight;
     animation-name: bounceInRight
 }

 @-webkit-keyframes bounceInUp {

     60%,
     75%,
     90%,
     from,
     to {
         -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
         animation-timing-function: cubic-bezier(.215, .61, .355, 1)
     }

     from {
         opacity: 0;
         -webkit-transform: translate3d(0, 3000px, 0);
         transform: translate3d(0, 3000px, 0)
     }

     60% {
         opacity: 1;
         -webkit-transform: translate3d(0, -20px, 0);
         transform: translate3d(0, -20px, 0)
     }

     75% {
         -webkit-transform: translate3d(0, 10px, 0);
         transform: translate3d(0, 10px, 0)
     }

     90% {
         -webkit-transform: translate3d(0, -5px, 0);
         transform: translate3d(0, -5px, 0)
     }

     to {
         -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0)
     }
 }

 @keyframes bounceInUp {

     60%,
     75%,
     90%,
     from,
     to {
         -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
         animation-timing-function: cubic-bezier(.215, .61, .355, 1)
     }

     from {
         opacity: 0;
         -webkit-transform: translate3d(0, 3000px, 0);
         transform: translate3d(0, 3000px, 0)
     }

     60% {
         opacity: 1;
         -webkit-transform: translate3d(0, -20px, 0);
         transform: translate3d(0, -20px, 0)
     }

     75% {
         -webkit-transform: translate3d(0, 10px, 0);
         transform: translate3d(0, 10px, 0)
     }

     90% {
         -webkit-transform: translate3d(0, -5px, 0);
         transform: translate3d(0, -5px, 0)
     }

     to {
         -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0)
     }
 }

 .bounceInUp {
     -webkit-animation-name: bounceInUp;
     animation-name: bounceInUp
 }

 @-webkit-keyframes bounceOut {
     20% {
         -webkit-transform: scale3d(.9, .9, .9);
         transform: scale3d(.9, .9, .9)
     }

     50%,
     55% {
         opacity: 1;
         -webkit-transform: scale3d(1.1, 1.1, 1.1);
         transform: scale3d(1.1, 1.1, 1.1)
     }

     to {
         opacity: 0;
         -webkit-transform: scale3d(.3, .3, .3);
         transform: scale3d(.3, .3, .3)
     }
 }

 @keyframes bounceOut {
     20% {
         -webkit-transform: scale3d(.9, .9, .9);
         transform: scale3d(.9, .9, .9)
     }

     50%,
     55% {
         opacity: 1;
         -webkit-transform: scale3d(1.1, 1.1, 1.1);
         transform: scale3d(1.1, 1.1, 1.1)
     }

     to {
         opacity: 0;
         -webkit-transform: scale3d(.3, .3, .3);
         transform: scale3d(.3, .3, .3)
     }
 }

 .bounceOut {
     -webkit-animation-duration: .75s;
     animation-duration: .75s;
     -webkit-animation-name: bounceOut;
     animation-name: bounceOut
 }

 @-webkit-keyframes bounceOutDown {
     20% {
         -webkit-transform: translate3d(0, 10px, 0);
         transform: translate3d(0, 10px, 0)
     }

     40%,
     45% {
         opacity: 1;
         -webkit-transform: translate3d(0, -20px, 0);
         transform: translate3d(0, -20px, 0)
     }

     to {
         opacity: 0;
         -webkit-transform: translate3d(0, 2000px, 0);
         transform: translate3d(0, 2000px, 0)
     }
 }

 @keyframes bounceOutDown {
     20% {
         -webkit-transform: translate3d(0, 10px, 0);
         transform: translate3d(0, 10px, 0)
     }

     40%,
     45% {
         opacity: 1;
         -webkit-transform: translate3d(0, -20px, 0);
         transform: translate3d(0, -20px, 0)
     }

     to {
         opacity: 0;
         -webkit-transform: translate3d(0, 2000px, 0);
         transform: translate3d(0, 2000px, 0)
     }
 }

 .bounceOutDown {
     -webkit-animation-name: bounceOutDown;
     animation-name: bounceOutDown
 }

 @-webkit-keyframes bounceOutLeft {
     20% {
         opacity: 1;
         -webkit-transform: translate3d(20px, 0, 0);
         transform: translate3d(20px, 0, 0)
     }

     to {
         opacity: 0;
         -webkit-transform: translate3d(-2000px, 0, 0);
         transform: translate3d(-2000px, 0, 0)
     }
 }

 @keyframes bounceOutLeft {
     20% {
         opacity: 1;
         -webkit-transform: translate3d(20px, 0, 0);
         transform: translate3d(20px, 0, 0)
     }

     to {
         opacity: 0;
         -webkit-transform: translate3d(-2000px, 0, 0);
         transform: translate3d(-2000px, 0, 0)
     }
 }

 .bounceOutLeft {
     -webkit-animation-name: bounceOutLeft;
     animation-name: bounceOutLeft
 }

 @-webkit-keyframes bounceOutRight {
     20% {
         opacity: 1;
         -webkit-transform: translate3d(-20px, 0, 0);
         transform: translate3d(-20px, 0, 0)
     }

     to {
         opacity: 0;
         -webkit-transform: translate3d(2000px, 0, 0);
         transform: translate3d(2000px, 0, 0)
     }
 }

 @keyframes bounceOutRight {
     20% {
         opacity: 1;
         -webkit-transform: translate3d(-20px, 0, 0);
         transform: translate3d(-20px, 0, 0)
     }

     to {
         opacity: 0;
         -webkit-transform: translate3d(2000px, 0, 0);
         transform: translate3d(2000px, 0, 0)
     }
 }

 .bounceOutRight {
     -webkit-animation-name: bounceOutRight;
     animation-name: bounceOutRight
 }

 @-webkit-keyframes bounceOutUp {
     20% {
         -webkit-transform: translate3d(0, -10px, 0);
         transform: translate3d(0, -10px, 0)
     }

     40%,
     45% {
         opacity: 1;
         -webkit-transform: translate3d(0, 20px, 0);
         transform: translate3d(0, 20px, 0)
     }

     to {
         opacity: 0;
         -webkit-transform: translate3d(0, -2000px, 0);
         transform: translate3d(0, -2000px, 0)
     }
 }

 @keyframes bounceOutUp {
     20% {
         -webkit-transform: translate3d(0, -10px, 0);
         transform: translate3d(0, -10px, 0)
     }

     40%,
     45% {
         opacity: 1;
         -webkit-transform: translate3d(0, 20px, 0);
         transform: translate3d(0, 20px, 0)
     }

     to {
         opacity: 0;
         -webkit-transform: translate3d(0, -2000px, 0);
         transform: translate3d(0, -2000px, 0)
     }
 }

 .bounceOutUp {
     -webkit-animation-name: bounceOutUp;
     animation-name: bounceOutUp
 }

 @-webkit-keyframes fadeIn {
     from {
         opacity: 0
     }

     to {
         opacity: 1
     }
 }

 @keyframes fadeIn {
     from {
         opacity: 0
     }

     to {
         opacity: 1
     }
 }

 .fadeIn {
     -webkit-animation-name: fadeIn;
     animation-name: fadeIn
 }

 @-webkit-keyframes fadeInDown {
     from {
         opacity: 0;
         -webkit-transform: translate3d(0, -100%, 0);
         transform: translate3d(0, -100%, 0)
     }

     to {
         opacity: 1;
         -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0)
     }
 }

 @keyframes fadeInDown {
     from {
         opacity: 0;
         -webkit-transform: translate3d(0, -100%, 0);
         transform: translate3d(0, -100%, 0)
     }

     to {
         opacity: 1;
         -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0)
     }
 }

 .fadeInDown {
     -webkit-animation-name: fadeInDown;
     animation-name: fadeInDown
 }

 @-webkit-keyframes fadeInDownBig {
     from {
         opacity: 0;
         -webkit-transform: translate3d(0, -2000px, 0);
         transform: translate3d(0, -2000px, 0)
     }

     to {
         opacity: 1;
         -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0)
     }
 }

 @keyframes fadeInDownBig {
     from {
         opacity: 0;
         -webkit-transform: translate3d(0, -2000px, 0);
         transform: translate3d(0, -2000px, 0)
     }

     to {
         opacity: 1;
         -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0)
     }
 }

 .fadeInDownBig {
     -webkit-animation-name: fadeInDownBig;
     animation-name: fadeInDownBig
 }

 @-webkit-keyframes fadeInLeft {
     from {
         opacity: 0;
         -webkit-transform: translate3d(-100%, 0, 0);
         transform: translate3d(-100%, 0, 0)
     }

     to {
         opacity: 1;
         -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0)
     }
 }

 @keyframes fadeInLeft {
     from {
         opacity: 0;
         -webkit-transform: translate3d(-100%, 0, 0);
         transform: translate3d(-100%, 0, 0)
     }

     to {
         opacity: 1;
         -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0)
     }
 }

 .fadeInLeft {
     -webkit-animation-name: fadeInLeft;
     animation-name: fadeInLeft
 }

 @-webkit-keyframes fadeInLeftBig {
     from {
         opacity: 0;
         -webkit-transform: translate3d(-2000px, 0, 0);
         transform: translate3d(-2000px, 0, 0)
     }

     to {
         opacity: 1;
         -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0)
     }
 }

 @keyframes fadeInLeftBig {
     from {
         opacity: 0;
         -webkit-transform: translate3d(-2000px, 0, 0);
         transform: translate3d(-2000px, 0, 0)
     }

     to {
         opacity: 1;
         -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0)
     }
 }

 .fadeInLeftBig {
     -webkit-animation-name: fadeInLeftBig;
     animation-name: fadeInLeftBig
 }

 @-webkit-keyframes fadeInRight {
     from {
         opacity: 0;
         -webkit-transform: translate3d(100%, 0, 0);
         transform: translate3d(100%, 0, 0)
     }

     to {
         opacity: 1;
         -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0)
     }
 }

 @keyframes fadeInRight {
     from {
         opacity: 0;
         -webkit-transform: translate3d(100%, 0, 0);
         transform: translate3d(100%, 0, 0)
     }

     to {
         opacity: 1;
         -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0)
     }
 }

 .fadeInRight {
     -webkit-animation-name: fadeInRight;
     animation-name: fadeInRight
 }

 @-webkit-keyframes fadeInRightBig {
     from {
         opacity: 0;
         -webkit-transform: translate3d(2000px, 0, 0);
         transform: translate3d(2000px, 0, 0)
     }

     to {
         opacity: 1;
         -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0)
     }
 }

 @keyframes fadeInRightBig {
     from {
         opacity: 0;
         -webkit-transform: translate3d(2000px, 0, 0);
         transform: translate3d(2000px, 0, 0)
     }

     to {
         opacity: 1;
         -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0)
     }
 }

 .fadeInRightBig {
     -webkit-animation-name: fadeInRightBig;
     animation-name: fadeInRightBig
 }

 @-webkit-keyframes fadeInUp {
     from {
         opacity: 0;
         -webkit-transform: translate3d(0, 100%, 0);
         transform: translate3d(0, 100%, 0)
     }

     to {
         opacity: 1;
         -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0)
     }
 }

 @keyframes fadeInUp {
     from {
         opacity: 0;
         -webkit-transform: translate3d(0, 100%, 0);
         transform: translate3d(0, 100%, 0)
     }

     to {
         opacity: 1;
         -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0)
     }
 }

 .fadeInUp {
     -webkit-animation-name: fadeInUp;
     animation-name: fadeInUp
 }

 @-webkit-keyframes fadeInUpBig {
     from {
         opacity: 0;
         -webkit-transform: translate3d(0, 2000px, 0);
         transform: translate3d(0, 2000px, 0)
     }

     to {
         opacity: 1;
         -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0)
     }
 }

 @keyframes fadeInUpBig {
     from {
         opacity: 0;
         -webkit-transform: translate3d(0, 2000px, 0);
         transform: translate3d(0, 2000px, 0)
     }

     to {
         opacity: 1;
         -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0)
     }
 }

 .fadeInUpBig {
     -webkit-animation-name: fadeInUpBig;
     animation-name: fadeInUpBig
 }

 @-webkit-keyframes fadeOut {
     from {
         opacity: 1
     }

     to {
         opacity: 0
     }
 }

 @keyframes fadeOut {
     from {
         opacity: 1
     }

     to {
         opacity: 0
     }
 }

 .fadeOut {
     -webkit-animation-name: fadeOut;
     animation-name: fadeOut
 }

 @-webkit-keyframes fadeOutDown {
     from {
         opacity: 1
     }

     to {
         opacity: 0;
         -webkit-transform: translate3d(0, 100%, 0);
         transform: translate3d(0, 100%, 0)
     }
 }

 @keyframes fadeOutDown {
     from {
         opacity: 1
     }

     to {
         opacity: 0;
         -webkit-transform: translate3d(0, 100%, 0);
         transform: translate3d(0, 100%, 0)
     }
 }

 .fadeOutDown {
     -webkit-animation-name: fadeOutDown;
     animation-name: fadeOutDown
 }

 @-webkit-keyframes fadeOutDownBig {
     from {
         opacity: 1
     }

     to {
         opacity: 0;
         -webkit-transform: translate3d(0, 2000px, 0);
         transform: translate3d(0, 2000px, 0)
     }
 }

 @keyframes fadeOutDownBig {
     from {
         opacity: 1
     }

     to {
         opacity: 0;
         -webkit-transform: translate3d(0, 2000px, 0);
         transform: translate3d(0, 2000px, 0)
     }
 }

 .fadeOutDownBig {
     -webkit-animation-name: fadeOutDownBig;
     animation-name: fadeOutDownBig
 }

 @-webkit-keyframes fadeOutLeft {
     from {
         opacity: 1
     }

     to {
         opacity: 0;
         -webkit-transform: translate3d(-100%, 0, 0);
         transform: translate3d(-100%, 0, 0)
     }
 }

 @keyframes fadeOutLeft {
     from {
         opacity: 1
     }

     to {
         opacity: 0;
         -webkit-transform: translate3d(-100%, 0, 0);
         transform: translate3d(-100%, 0, 0)
     }
 }

 .fadeOutLeft {
     -webkit-animation-name: fadeOutLeft;
     animation-name: fadeOutLeft
 }

 @-webkit-keyframes fadeOutLeftBig {
     from {
         opacity: 1
     }

     to {
         opacity: 0;
         -webkit-transform: translate3d(-2000px, 0, 0);
         transform: translate3d(-2000px, 0, 0)
     }
 }

 @keyframes fadeOutLeftBig {
     from {
         opacity: 1
     }

     to {
         opacity: 0;
         -webkit-transform: translate3d(-2000px, 0, 0);
         transform: translate3d(-2000px, 0, 0)
     }
 }

 .fadeOutLeftBig {
     -webkit-animation-name: fadeOutLeftBig;
     animation-name: fadeOutLeftBig
 }

 @-webkit-keyframes fadeOutRight {
     from {
         opacity: 1
     }

     to {
         opacity: 0;
         -webkit-transform: translate3d(100%, 0, 0);
         transform: translate3d(100%, 0, 0)
     }
 }

 @keyframes fadeOutRight {
     from {
         opacity: 1
     }

     to {
         opacity: 0;
         -webkit-transform: translate3d(100%, 0, 0);
         transform: translate3d(100%, 0, 0)
     }
 }

 .fadeOutRight {
     -webkit-animation-name: fadeOutRight;
     animation-name: fadeOutRight
 }

 @-webkit-keyframes fadeOutRightBig {
     from {
         opacity: 1
     }

     to {
         opacity: 0;
         -webkit-transform: translate3d(2000px, 0, 0);
         transform: translate3d(2000px, 0, 0)
     }
 }

 @keyframes fadeOutRightBig {
     from {
         opacity: 1
     }

     to {
         opacity: 0;
         -webkit-transform: translate3d(2000px, 0, 0);
         transform: translate3d(2000px, 0, 0)
     }
 }

 .fadeOutRightBig {
     -webkit-animation-name: fadeOutRightBig;
     animation-name: fadeOutRightBig
 }

 @-webkit-keyframes fadeOutUp {
     from {
         opacity: 1
     }

     to {
         opacity: 0;
         -webkit-transform: translate3d(0, -100%, 0);
         transform: translate3d(0, -100%, 0)
     }
 }

 @keyframes fadeOutUp {
     from {
         opacity: 1
     }

     to {
         opacity: 0;
         -webkit-transform: translate3d(0, -100%, 0);
         transform: translate3d(0, -100%, 0)
     }
 }

 .fadeOutUp {
     -webkit-animation-name: fadeOutUp;
     animation-name: fadeOutUp
 }

 @-webkit-keyframes fadeOutUpBig {
     from {
         opacity: 1
     }

     to {
         opacity: 0;
         -webkit-transform: translate3d(0, -2000px, 0);
         transform: translate3d(0, -2000px, 0)
     }
 }

 @keyframes fadeOutUpBig {
     from {
         opacity: 1
     }

     to {
         opacity: 0;
         -webkit-transform: translate3d(0, -2000px, 0);
         transform: translate3d(0, -2000px, 0)
     }
 }

 .fadeOutUpBig {
     -webkit-animation-name: fadeOutUpBig;
     animation-name: fadeOutUpBig
 }

 @-webkit-keyframes flip {
     from {
         -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
         transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
         -webkit-animation-timing-function: ease-out;
         animation-timing-function: ease-out
     }

     40% {
         -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
         transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
         -webkit-animation-timing-function: ease-out;
         animation-timing-function: ease-out
     }

     50% {
         -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
         transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
         -webkit-animation-timing-function: ease-in;
         animation-timing-function: ease-in
     }

     80% {
         -webkit-transform: perspective(400px) scale3d(.95, .95, .95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
         transform: perspective(400px) scale3d(.95, .95, .95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
         -webkit-animation-timing-function: ease-in;
         animation-timing-function: ease-in
     }

     to {
         -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
         transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
         -webkit-animation-timing-function: ease-in;
         animation-timing-function: ease-in
     }
 }

 @keyframes flip {
     from {
         -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
         transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
         -webkit-animation-timing-function: ease-out;
         animation-timing-function: ease-out
     }

     40% {
         -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
         transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
         -webkit-animation-timing-function: ease-out;
         animation-timing-function: ease-out
     }

     50% {
         -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
         transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
         -webkit-animation-timing-function: ease-in;
         animation-timing-function: ease-in
     }

     80% {
         -webkit-transform: perspective(400px) scale3d(.95, .95, .95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
         transform: perspective(400px) scale3d(.95, .95, .95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
         -webkit-animation-timing-function: ease-in;
         animation-timing-function: ease-in
     }

     to {
         -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
         transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
         -webkit-animation-timing-function: ease-in;
         animation-timing-function: ease-in
     }
 }

 .animated.flip {
     -webkit-backface-visibility: visible;
     backface-visibility: visible;
     -webkit-animation-name: flip;
     animation-name: flip
 }

 @-webkit-keyframes flipInX {
     from {
         -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
         transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
         -webkit-animation-timing-function: ease-in;
         animation-timing-function: ease-in;
         opacity: 0
     }

     40% {
         -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
         transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
         -webkit-animation-timing-function: ease-in;
         animation-timing-function: ease-in
     }

     60% {
         -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
         transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
         opacity: 1
     }

     80% {
         -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
         transform: perspective(400px) rotate3d(1, 0, 0, -5deg)
     }

     to {
         -webkit-transform: perspective(400px);
         transform: perspective(400px)
     }
 }

 @keyframes flipInX {
     from {
         -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
         transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
         -webkit-animation-timing-function: ease-in;
         animation-timing-function: ease-in;
         opacity: 0
     }

     40% {
         -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
         transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
         -webkit-animation-timing-function: ease-in;
         animation-timing-function: ease-in
     }

     60% {
         -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
         transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
         opacity: 1
     }

     80% {
         -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
         transform: perspective(400px) rotate3d(1, 0, 0, -5deg)
     }

     to {
         -webkit-transform: perspective(400px);
         transform: perspective(400px)
     }
 }

 .flipInX {
     -webkit-backface-visibility: visible !important;
     backface-visibility: visible !important;
     -webkit-animation-name: flipInX;
     animation-name: flipInX
 }

 @-webkit-keyframes flipInY {
     from {
         -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
         transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
         -webkit-animation-timing-function: ease-in;
         animation-timing-function: ease-in;
         opacity: 0
     }

     40% {
         -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
         transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
         -webkit-animation-timing-function: ease-in;
         animation-timing-function: ease-in
     }

     60% {
         -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
         transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
         opacity: 1
     }

     80% {
         -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
         transform: perspective(400px) rotate3d(0, 1, 0, -5deg)
     }

     to {
         -webkit-transform: perspective(400px);
         transform: perspective(400px)
     }
 }

 @keyframes flipInY {
     from {
         -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
         transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
         -webkit-animation-timing-function: ease-in;
         animation-timing-function: ease-in;
         opacity: 0
     }

     40% {
         -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
         transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
         -webkit-animation-timing-function: ease-in;
         animation-timing-function: ease-in
     }

     60% {
         -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
         transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
         opacity: 1
     }

     80% {
         -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
         transform: perspective(400px) rotate3d(0, 1, 0, -5deg)
     }

     to {
         -webkit-transform: perspective(400px);
         transform: perspective(400px)
     }
 }

 .flipInY {
     -webkit-backface-visibility: visible !important;
     backface-visibility: visible !important;
     -webkit-animation-name: flipInY;
     animation-name: flipInY
 }

 @-webkit-keyframes flipOutX {
     from {
         -webkit-transform: perspective(400px);
         transform: perspective(400px)
     }

     30% {
         -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
         transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
         opacity: 1
     }

     to {
         -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
         transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
         opacity: 0
     }
 }

 @keyframes flipOutX {
     from {
         -webkit-transform: perspective(400px);
         transform: perspective(400px)
     }

     30% {
         -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
         transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
         opacity: 1
     }

     to {
         -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
         transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
         opacity: 0
     }
 }

 .flipOutX {
     -webkit-animation-duration: .75s;
     animation-duration: .75s;
     -webkit-animation-name: flipOutX;
     animation-name: flipOutX;
     -webkit-backface-visibility: visible !important;
     backface-visibility: visible !important
 }

 @-webkit-keyframes flipOutY {
     from {
         -webkit-transform: perspective(400px);
         transform: perspective(400px)
     }

     30% {
         -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
         transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
         opacity: 1
     }

     to {
         -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
         transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
         opacity: 0
     }
 }

 @keyframes flipOutY {
     from {
         -webkit-transform: perspective(400px);
         transform: perspective(400px)
     }

     30% {
         -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
         transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
         opacity: 1
     }

     to {
         -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
         transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
         opacity: 0
     }
 }

 .flipOutY {
     -webkit-animation-duration: .75s;
     animation-duration: .75s;
     -webkit-backface-visibility: visible !important;
     backface-visibility: visible !important;
     -webkit-animation-name: flipOutY;
     animation-name: flipOutY
 }

 @-webkit-keyframes lightSpeedIn {
     from {
         -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
         transform: translate3d(100%, 0, 0) skewX(-30deg);
         opacity: 0
     }

     60% {
         -webkit-transform: skewX(20deg);
         transform: skewX(20deg);
         opacity: 1
     }

     80% {
         -webkit-transform: skewX(-5deg);
         transform: skewX(-5deg)
     }

     to {
         -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0)
     }
 }

 @keyframes lightSpeedIn {
     from {
         -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
         transform: translate3d(100%, 0, 0) skewX(-30deg);
         opacity: 0
     }

     60% {
         -webkit-transform: skewX(20deg);
         transform: skewX(20deg);
         opacity: 1
     }

     80% {
         -webkit-transform: skewX(-5deg);
         transform: skewX(-5deg)
     }

     to {
         -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0)
     }
 }

 .lightSpeedIn {
     -webkit-animation-name: lightSpeedIn;
     animation-name: lightSpeedIn;
     -webkit-animation-timing-function: ease-out;
     animation-timing-function: ease-out
 }

 @-webkit-keyframes lightSpeedOut {
     from {
         opacity: 1
     }

     to {
         -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
         transform: translate3d(100%, 0, 0) skewX(30deg);
         opacity: 0
     }
 }

 @keyframes lightSpeedOut {
     from {
         opacity: 1
     }

     to {
         -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
         transform: translate3d(100%, 0, 0) skewX(30deg);
         opacity: 0
     }
 }

 .lightSpeedOut {
     -webkit-animation-name: lightSpeedOut;
     animation-name: lightSpeedOut;
     -webkit-animation-timing-function: ease-in;
     animation-timing-function: ease-in
 }

 @-webkit-keyframes rotateIn {
     from {
         -webkit-transform-origin: center;
         transform-origin: center;
         -webkit-transform: rotate3d(0, 0, 1, -200deg);
         transform: rotate3d(0, 0, 1, -200deg);
         opacity: 0
     }

     to {
         -webkit-transform-origin: center;
         transform-origin: center;
         -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0);
         opacity: 1
     }
 }

 @keyframes rotateIn {
     from {
         -webkit-transform-origin: center;
         transform-origin: center;
         -webkit-transform: rotate3d(0, 0, 1, -200deg);
         transform: rotate3d(0, 0, 1, -200deg);
         opacity: 0
     }

     to {
         -webkit-transform-origin: center;
         transform-origin: center;
         -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0);
         opacity: 1
     }
 }

 .rotateIn {
     -webkit-animation-name: rotateIn;
     animation-name: rotateIn
 }

 @-webkit-keyframes rotateInDownLeft {
     from {
         -webkit-transform-origin: left bottom;
         transform-origin: left bottom;
         -webkit-transform: rotate3d(0, 0, 1, -45deg);
         transform: rotate3d(0, 0, 1, -45deg);
         opacity: 0
     }

     to {
         -webkit-transform-origin: left bottom;
         transform-origin: left bottom;
         -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0);
         opacity: 1
     }
 }

 @keyframes rotateInDownLeft {
     from {
         -webkit-transform-origin: left bottom;
         transform-origin: left bottom;
         -webkit-transform: rotate3d(0, 0, 1, -45deg);
         transform: rotate3d(0, 0, 1, -45deg);
         opacity: 0
     }

     to {
         -webkit-transform-origin: left bottom;
         transform-origin: left bottom;
         -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0);
         opacity: 1
     }
 }

 .rotateInDownLeft {
     -webkit-animation-name: rotateInDownLeft;
     animation-name: rotateInDownLeft
 }

 @-webkit-keyframes rotateInDownRight {
     from {
         -webkit-transform-origin: right bottom;
         transform-origin: right bottom;
         -webkit-transform: rotate3d(0, 0, 1, 45deg);
         transform: rotate3d(0, 0, 1, 45deg);
         opacity: 0
     }

     to {
         -webkit-transform-origin: right bottom;
         transform-origin: right bottom;
         -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0);
         opacity: 1
     }
 }

 @keyframes rotateInDownRight {
     from {
         -webkit-transform-origin: right bottom;
         transform-origin: right bottom;
         -webkit-transform: rotate3d(0, 0, 1, 45deg);
         transform: rotate3d(0, 0, 1, 45deg);
         opacity: 0
     }

     to {
         -webkit-transform-origin: right bottom;
         transform-origin: right bottom;
         -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0);
         opacity: 1
     }
 }

 .rotateInDownRight {
     -webkit-animation-name: rotateInDownRight;
     animation-name: rotateInDownRight
 }

 @-webkit-keyframes rotateInUpLeft {
     from {
         -webkit-transform-origin: left bottom;
         transform-origin: left bottom;
         -webkit-transform: rotate3d(0, 0, 1, 45deg);
         transform: rotate3d(0, 0, 1, 45deg);
         opacity: 0
     }

     to {
         -webkit-transform-origin: left bottom;
         transform-origin: left bottom;
         -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0);
         opacity: 1
     }
 }

 @keyframes rotateInUpLeft {
     from {
         -webkit-transform-origin: left bottom;
         transform-origin: left bottom;
         -webkit-transform: rotate3d(0, 0, 1, 45deg);
         transform: rotate3d(0, 0, 1, 45deg);
         opacity: 0
     }

     to {
         -webkit-transform-origin: left bottom;
         transform-origin: left bottom;
         -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0);
         opacity: 1
     }
 }

 .rotateInUpLeft {
     -webkit-animation-name: rotateInUpLeft;
     animation-name: rotateInUpLeft
 }

 @-webkit-keyframes rotateInUpRight {
     from {
         -webkit-transform-origin: right bottom;
         transform-origin: right bottom;
         -webkit-transform: rotate3d(0, 0, 1, -90deg);
         transform: rotate3d(0, 0, 1, -90deg);
         opacity: 0
     }

     to {
         -webkit-transform-origin: right bottom;
         transform-origin: right bottom;
         -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0);
         opacity: 1
     }
 }

 @keyframes rotateInUpRight {
     from {
         -webkit-transform-origin: right bottom;
         transform-origin: right bottom;
         -webkit-transform: rotate3d(0, 0, 1, -90deg);
         transform: rotate3d(0, 0, 1, -90deg);
         opacity: 0
     }

     to {
         -webkit-transform-origin: right bottom;
         transform-origin: right bottom;
         -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0);
         opacity: 1
     }
 }

 .rotateInUpRight {
     -webkit-animation-name: rotateInUpRight;
     animation-name: rotateInUpRight
 }

 @-webkit-keyframes rotateOut {
     from {
         -webkit-transform-origin: center;
         transform-origin: center;
         opacity: 1
     }

     to {
         -webkit-transform-origin: center;
         transform-origin: center;
         -webkit-transform: rotate3d(0, 0, 1, 200deg);
         transform: rotate3d(0, 0, 1, 200deg);
         opacity: 0
     }
 }

 @keyframes rotateOut {
     from {
         -webkit-transform-origin: center;
         transform-origin: center;
         opacity: 1
     }

     to {
         -webkit-transform-origin: center;
         transform-origin: center;
         -webkit-transform: rotate3d(0, 0, 1, 200deg);
         transform: rotate3d(0, 0, 1, 200deg);
         opacity: 0
     }
 }

 .rotateOut {
     -webkit-animation-name: rotateOut;
     animation-name: rotateOut
 }

 @-webkit-keyframes rotateOutDownLeft {
     from {
         -webkit-transform-origin: left bottom;
         transform-origin: left bottom;
         opacity: 1
     }

     to {
         -webkit-transform-origin: left bottom;
         transform-origin: left bottom;
         -webkit-transform: rotate3d(0, 0, 1, 45deg);
         transform: rotate3d(0, 0, 1, 45deg);
         opacity: 0
     }
 }

 @keyframes rotateOutDownLeft {
     from {
         -webkit-transform-origin: left bottom;
         transform-origin: left bottom;
         opacity: 1
     }

     to {
         -webkit-transform-origin: left bottom;
         transform-origin: left bottom;
         -webkit-transform: rotate3d(0, 0, 1, 45deg);
         transform: rotate3d(0, 0, 1, 45deg);
         opacity: 0
     }
 }

 .rotateOutDownLeft {
     -webkit-animation-name: rotateOutDownLeft;
     animation-name: rotateOutDownLeft
 }

 @-webkit-keyframes rotateOutDownRight {
     from {
         -webkit-transform-origin: right bottom;
         transform-origin: right bottom;
         opacity: 1
     }

     to {
         -webkit-transform-origin: right bottom;
         transform-origin: right bottom;
         -webkit-transform: rotate3d(0, 0, 1, -45deg);
         transform: rotate3d(0, 0, 1, -45deg);
         opacity: 0
     }
 }

 @keyframes rotateOutDownRight {
     from {
         -webkit-transform-origin: right bottom;
         transform-origin: right bottom;
         opacity: 1
     }

     to {
         -webkit-transform-origin: right bottom;
         transform-origin: right bottom;
         -webkit-transform: rotate3d(0, 0, 1, -45deg);
         transform: rotate3d(0, 0, 1, -45deg);
         opacity: 0
     }
 }

 .rotateOutDownRight {
     -webkit-animation-name: rotateOutDownRight;
     animation-name: rotateOutDownRight
 }

 @-webkit-keyframes rotateOutUpLeft {
     from {
         -webkit-transform-origin: left bottom;
         transform-origin: left bottom;
         opacity: 1
     }

     to {
         -webkit-transform-origin: left bottom;
         transform-origin: left bottom;
         -webkit-transform: rotate3d(0, 0, 1, -45deg);
         transform: rotate3d(0, 0, 1, -45deg);
         opacity: 0
     }
 }

 @keyframes rotateOutUpLeft {
     from {
         -webkit-transform-origin: left bottom;
         transform-origin: left bottom;
         opacity: 1
     }

     to {
         -webkit-transform-origin: left bottom;
         transform-origin: left bottom;
         -webkit-transform: rotate3d(0, 0, 1, -45deg);
         transform: rotate3d(0, 0, 1, -45deg);
         opacity: 0
     }
 }

 .rotateOutUpLeft {
     -webkit-animation-name: rotateOutUpLeft;
     animation-name: rotateOutUpLeft
 }

 @-webkit-keyframes rotateOutUpRight {
     from {
         -webkit-transform-origin: right bottom;
         transform-origin: right bottom;
         opacity: 1
     }

     to {
         -webkit-transform-origin: right bottom;
         transform-origin: right bottom;
         -webkit-transform: rotate3d(0, 0, 1, 90deg);
         transform: rotate3d(0, 0, 1, 90deg);
         opacity: 0
     }
 }

 @keyframes rotateOutUpRight {
     from {
         -webkit-transform-origin: right bottom;
         transform-origin: right bottom;
         opacity: 1
     }

     to {
         -webkit-transform-origin: right bottom;
         transform-origin: right bottom;
         -webkit-transform: rotate3d(0, 0, 1, 90deg);
         transform: rotate3d(0, 0, 1, 90deg);
         opacity: 0
     }
 }

 .rotateOutUpRight {
     -webkit-animation-name: rotateOutUpRight;
     animation-name: rotateOutUpRight
 }

 @-webkit-keyframes hinge {
     0% {
         -webkit-transform-origin: top left;
         transform-origin: top left;
         -webkit-animation-timing-function: ease-in-out;
         animation-timing-function: ease-in-out
     }

     20%,
     60% {
         -webkit-transform: rotate3d(0, 0, 1, 80deg);
         transform: rotate3d(0, 0, 1, 80deg);
         -webkit-transform-origin: top left;
         transform-origin: top left;
         -webkit-animation-timing-function: ease-in-out;
         animation-timing-function: ease-in-out
     }

     40%,
     80% {
         -webkit-transform: rotate3d(0, 0, 1, 60deg);
         transform: rotate3d(0, 0, 1, 60deg);
         -webkit-transform-origin: top left;
         transform-origin: top left;
         -webkit-animation-timing-function: ease-in-out;
         animation-timing-function: ease-in-out;
         opacity: 1
     }

     to {
         -webkit-transform: translate3d(0, 700px, 0);
         transform: translate3d(0, 700px, 0);
         opacity: 0
     }
 }

 @keyframes hinge {
     0% {
         -webkit-transform-origin: top left;
         transform-origin: top left;
         -webkit-animation-timing-function: ease-in-out;
         animation-timing-function: ease-in-out
     }

     20%,
     60% {
         -webkit-transform: rotate3d(0, 0, 1, 80deg);
         transform: rotate3d(0, 0, 1, 80deg);
         -webkit-transform-origin: top left;
         transform-origin: top left;
         -webkit-animation-timing-function: ease-in-out;
         animation-timing-function: ease-in-out
     }

     40%,
     80% {
         -webkit-transform: rotate3d(0, 0, 1, 60deg);
         transform: rotate3d(0, 0, 1, 60deg);
         -webkit-transform-origin: top left;
         transform-origin: top left;
         -webkit-animation-timing-function: ease-in-out;
         animation-timing-function: ease-in-out;
         opacity: 1
     }

     to {
         -webkit-transform: translate3d(0, 700px, 0);
         transform: translate3d(0, 700px, 0);
         opacity: 0
     }
 }

 .hinge {
     -webkit-animation-duration: 2s;
     animation-duration: 2s;
     -webkit-animation-name: hinge;
     animation-name: hinge
 }

 @-webkit-keyframes jackInTheBox {
     from {
         opacity: 0;
         -webkit-transform: scale(.1) rotate(30deg);
         transform: scale(.1) rotate(30deg);
         -webkit-transform-origin: center bottom;
         transform-origin: center bottom
     }

     50% {
         -webkit-transform: rotate(-10deg);
         transform: rotate(-10deg)
     }

     70% {
         -webkit-transform: rotate(3deg);
         transform: rotate(3deg)
     }

     to {
         opacity: 1;
         -webkit-transform: scale(1);
         transform: scale(1)
     }
 }

 @keyframes jackInTheBox {
     from {
         opacity: 0;
         -webkit-transform: scale(.1) rotate(30deg);
         transform: scale(.1) rotate(30deg);
         -webkit-transform-origin: center bottom;
         transform-origin: center bottom
     }

     50% {
         -webkit-transform: rotate(-10deg);
         transform: rotate(-10deg)
     }

     70% {
         -webkit-transform: rotate(3deg);
         transform: rotate(3deg)
     }

     to {
         opacity: 1;
         -webkit-transform: scale(1);
         transform: scale(1)
     }
 }

 .jackInTheBox {
     -webkit-animation-name: jackInTheBox;
     animation-name: jackInTheBox
 }

 @-webkit-keyframes rollIn {
     from {
         opacity: 0;
         -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
         transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg)
     }

     to {
         opacity: 1;
         -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0)
     }
 }

 @keyframes rollIn {
     from {
         opacity: 0;
         -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
         transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg)
     }

     to {
         opacity: 1;
         -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0)
     }
 }

 .rollIn {
     -webkit-animation-name: rollIn;
     animation-name: rollIn
 }

 @-webkit-keyframes rollOut {
     from {
         opacity: 1
     }

     to {
         opacity: 0;
         -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
         transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg)
     }
 }

 @keyframes rollOut {
     from {
         opacity: 1
     }

     to {
         opacity: 0;
         -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
         transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg)
     }
 }

 .rollOut {
     -webkit-animation-name: rollOut;
     animation-name: rollOut
 }

 @-webkit-keyframes zoomIn {
     from {
         opacity: 0;
         -webkit-transform: scale3d(.3, .3, .3);
         transform: scale3d(.3, .3, .3)
     }

     50% {
         opacity: 1
     }
 }

 @keyframes zoomIn {
     from {
         opacity: 0;
         -webkit-transform: scale3d(.3, .3, .3);
         transform: scale3d(.3, .3, .3)
     }

     50% {
         opacity: 1
     }
 }

 .zoomIn {
     -webkit-animation-name: zoomIn;
     animation-name: zoomIn
 }

 @-webkit-keyframes zoomInDown {
     from {
         opacity: 0;
         -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
         transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
         -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
         animation-timing-function: cubic-bezier(.55, .055, .675, .19)
     }

     60% {
         opacity: 1;
         -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
         transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
         -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
         animation-timing-function: cubic-bezier(.175, .885, .32, 1)
     }
 }

 @keyframes zoomInDown {
     from {
         opacity: 0;
         -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
         transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
         -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
         animation-timing-function: cubic-bezier(.55, .055, .675, .19)
     }

     60% {
         opacity: 1;
         -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
         transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
         -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
         animation-timing-function: cubic-bezier(.175, .885, .32, 1)
     }
 }

 .zoomInDown {
     -webkit-animation-name: zoomInDown;
     animation-name: zoomInDown
 }

 @-webkit-keyframes zoomInLeft {
     from {
         opacity: 0;
         -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
         transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
         -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
         animation-timing-function: cubic-bezier(.55, .055, .675, .19)
     }

     60% {
         opacity: 1;
         -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
         transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
         -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
         animation-timing-function: cubic-bezier(.175, .885, .32, 1)
     }
 }

 @keyframes zoomInLeft {
     from {
         opacity: 0;
         -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
         transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
         -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
         animation-timing-function: cubic-bezier(.55, .055, .675, .19)
     }

     60% {
         opacity: 1;
         -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
         transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
         -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
         animation-timing-function: cubic-bezier(.175, .885, .32, 1)
     }
 }

 .zoomInLeft {
     -webkit-animation-name: zoomInLeft;
     animation-name: zoomInLeft
 }

 @-webkit-keyframes zoomInRight {
     from {
         opacity: 0;
         -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
         transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
         -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
         animation-timing-function: cubic-bezier(.55, .055, .675, .19)
     }

     60% {
         opacity: 1;
         -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
         transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
         -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
         animation-timing-function: cubic-bezier(.175, .885, .32, 1)
     }
 }

 @keyframes zoomInRight {
     from {
         opacity: 0;
         -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
         transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
         -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
         animation-timing-function: cubic-bezier(.55, .055, .675, .19)
     }

     60% {
         opacity: 1;
         -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
         transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
         -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
         animation-timing-function: cubic-bezier(.175, .885, .32, 1)
     }
 }

 .zoomInRight {
     -webkit-animation-name: zoomInRight;
     animation-name: zoomInRight
 }

 @-webkit-keyframes zoomInUp {
     from {
         opacity: 0;
         -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
         transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
         -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
         animation-timing-function: cubic-bezier(.55, .055, .675, .19)
     }

     60% {
         opacity: 1;
         -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
         transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
         -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
         animation-timing-function: cubic-bezier(.175, .885, .32, 1)
     }
 }

 @keyframes zoomInUp {
     from {
         opacity: 0;
         -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
         transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
         -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
         animation-timing-function: cubic-bezier(.55, .055, .675, .19)
     }

     60% {
         opacity: 1;
         -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
         transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
         -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
         animation-timing-function: cubic-bezier(.175, .885, .32, 1)
     }
 }

 .zoomInUp {
     -webkit-animation-name: zoomInUp;
     animation-name: zoomInUp
 }

 @-webkit-keyframes zoomOut {
     from {
         opacity: 1
     }

     50% {
         opacity: 0;
         -webkit-transform: scale3d(.3, .3, .3);
         transform: scale3d(.3, .3, .3)
     }

     to {
         opacity: 0
     }
 }

 @keyframes zoomOut {
     from {
         opacity: 1
     }

     50% {
         opacity: 0;
         -webkit-transform: scale3d(.3, .3, .3);
         transform: scale3d(.3, .3, .3)
     }

     to {
         opacity: 0
     }
 }

 .zoomOut {
     -webkit-animation-name: zoomOut;
     animation-name: zoomOut
 }

 @-webkit-keyframes zoomOutDown {
     40% {
         opacity: 1;
         -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
         transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
         -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
         animation-timing-function: cubic-bezier(.55, .055, .675, .19)
     }

     to {
         opacity: 0;
         -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
         transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
         -webkit-transform-origin: center bottom;
         transform-origin: center bottom;
         -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
         animation-timing-function: cubic-bezier(.175, .885, .32, 1)
     }
 }

 @keyframes zoomOutDown {
     40% {
         opacity: 1;
         -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
         transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
         -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
         animation-timing-function: cubic-bezier(.55, .055, .675, .19)
     }

     to {
         opacity: 0;
         -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
         transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
         -webkit-transform-origin: center bottom;
         transform-origin: center bottom;
         -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
         animation-timing-function: cubic-bezier(.175, .885, .32, 1)
     }
 }

 .zoomOutDown {
     -webkit-animation-name: zoomOutDown;
     animation-name: zoomOutDown
 }

 @-webkit-keyframes zoomOutLeft {
     40% {
         opacity: 1;
         -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
         transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0)
     }

     to {
         opacity: 0;
         -webkit-transform: scale(.1) translate3d(-2000px, 0, 0);
         transform: scale(.1) translate3d(-2000px, 0, 0);
         -webkit-transform-origin: left center;
         transform-origin: left center
     }
 }

 @keyframes zoomOutLeft {
     40% {
         opacity: 1;
         -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
         transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0)
     }

     to {
         opacity: 0;
         -webkit-transform: scale(.1) translate3d(-2000px, 0, 0);
         transform: scale(.1) translate3d(-2000px, 0, 0);
         -webkit-transform-origin: left center;
         transform-origin: left center
     }
 }

 .zoomOutLeft {
     -webkit-animation-name: zoomOutLeft;
     animation-name: zoomOutLeft
 }

 @-webkit-keyframes zoomOutRight {
     40% {
         opacity: 1;
         -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
         transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0)
     }

     to {
         opacity: 0;
         -webkit-transform: scale(.1) translate3d(2000px, 0, 0);
         transform: scale(.1) translate3d(2000px, 0, 0);
         -webkit-transform-origin: right center;
         transform-origin: right center
     }
 }

 @keyframes zoomOutRight {
     40% {
         opacity: 1;
         -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
         transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0)
     }

     to {
         opacity: 0;
         -webkit-transform: scale(.1) translate3d(2000px, 0, 0);
         transform: scale(.1) translate3d(2000px, 0, 0);
         -webkit-transform-origin: right center;
         transform-origin: right center
     }
 }

 .zoomOutRight {
     -webkit-animation-name: zoomOutRight;
     animation-name: zoomOutRight
 }

 @-webkit-keyframes zoomOutUp {
     40% {
         opacity: 1;
         -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
         transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
         -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
         animation-timing-function: cubic-bezier(.55, .055, .675, .19)
     }

     to {
         opacity: 0;
         -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
         transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
         -webkit-transform-origin: center bottom;
         transform-origin: center bottom;
         -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
         animation-timing-function: cubic-bezier(.175, .885, .32, 1)
     }
 }

 @keyframes zoomOutUp {
     40% {
         opacity: 1;
         -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
         transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
         -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
         animation-timing-function: cubic-bezier(.55, .055, .675, .19)
     }

     to {
         opacity: 0;
         -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
         transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
         -webkit-transform-origin: center bottom;
         transform-origin: center bottom;
         -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
         animation-timing-function: cubic-bezier(.175, .885, .32, 1)
     }
 }

 .zoomOutUp {
     -webkit-animation-name: zoomOutUp;
     animation-name: zoomOutUp
 }

 @-webkit-keyframes slideInDown {
     from {
         -webkit-transform: translate3d(0, -100%, 0);
         transform: translate3d(0, -100%, 0);
         visibility: visible
     }

     to {
         -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0)
     }
 }

 @keyframes slideInDown {
     from {
         -webkit-transform: translate3d(0, -100%, 0);
         transform: translate3d(0, -100%, 0);
         visibility: visible
     }

     to {
         -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0)
     }
 }

 .slideInDown {
     -webkit-animation-name: slideInDown;
     animation-name: slideInDown
 }

 @-webkit-keyframes slideInLeft {
     from {
         -webkit-transform: translate3d(-100%, 0, 0);
         transform: translate3d(-100%, 0, 0);
         visibility: visible
     }

     to {
         -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0)
     }
 }

 @keyframes slideInLeft {
     from {
         -webkit-transform: translate3d(-100%, 0, 0);
         transform: translate3d(-100%, 0, 0);
         visibility: visible
     }

     to {
         -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0)
     }
 }

 .slideInLeft {
     -webkit-animation-name: slideInLeft;
     animation-name: slideInLeft
 }

 @-webkit-keyframes slideInRight {
     from {
         -webkit-transform: translate3d(100%, 0, 0);
         transform: translate3d(100%, 0, 0);
         visibility: visible
     }

     to {
         -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0)
     }
 }

 @keyframes slideInRight {
     from {
         -webkit-transform: translate3d(100%, 0, 0);
         transform: translate3d(100%, 0, 0);
         visibility: visible
     }

     to {
         -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0)
     }
 }

 .slideInRight {
     -webkit-animation-name: slideInRight;
     animation-name: slideInRight
 }

 @-webkit-keyframes slideInUp {
     from {
         -webkit-transform: translate3d(0, 100%, 0);
         transform: translate3d(0, 100%, 0);
         visibility: visible
     }

     to {
         -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0)
     }
 }

 @keyframes slideInUp {
     from {
         -webkit-transform: translate3d(0, 100%, 0);
         transform: translate3d(0, 100%, 0);
         visibility: visible
     }

     to {
         -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0)
     }
 }

 .slideInUp {
     -webkit-animation-name: slideInUp;
     animation-name: slideInUp
 }

 @-webkit-keyframes slideOutDown {
     from {
         -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0)
     }

     to {
         visibility: hidden;
         -webkit-transform: translate3d(0, 100%, 0);
         transform: translate3d(0, 100%, 0)
     }
 }

 @keyframes slideOutDown {
     from {
         -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0)
     }

     to {
         visibility: hidden;
         -webkit-transform: translate3d(0, 100%, 0);
         transform: translate3d(0, 100%, 0)
     }
 }

 .slideOutDown {
     -webkit-animation-name: slideOutDown;
     animation-name: slideOutDown
 }

 @-webkit-keyframes slideOutLeft {
     from {
         -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0)
     }

     to {
         visibility: hidden;
         -webkit-transform: translate3d(-100%, 0, 0);
         transform: translate3d(-100%, 0, 0)
     }
 }

 @keyframes slideOutLeft {
     from {
         -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0)
     }

     to {
         visibility: hidden;
         -webkit-transform: translate3d(-100%, 0, 0);
         transform: translate3d(-100%, 0, 0)
     }
 }

 .slideOutLeft {
     -webkit-animation-name: slideOutLeft;
     animation-name: slideOutLeft
 }

 @-webkit-keyframes slideOutRight {
     from {
         -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0)
     }

     to {
         visibility: hidden;
         -webkit-transform: translate3d(100%, 0, 0);
         transform: translate3d(100%, 0, 0)
     }
 }

 @keyframes slideOutRight {
     from {
         -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0)
     }

     to {
         visibility: hidden;
         -webkit-transform: translate3d(100%, 0, 0);
         transform: translate3d(100%, 0, 0)
     }
 }

 .slideOutRight {
     -webkit-animation-name: slideOutRight;
     animation-name: slideOutRight
 }

 @-webkit-keyframes slideOutUp {
     from {
         -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0)
     }

     to {
         visibility: hidden;
         -webkit-transform: translate3d(0, -100%, 0);
         transform: translate3d(0, -100%, 0)
     }
 }

 @keyframes slideOutUp {
     from {
         -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0)
     }

     to {
         visibility: hidden;
         -webkit-transform: translate3d(0, -100%, 0);
         transform: translate3d(0, -100%, 0)
     }
 }

 .slideOutUp {
     -webkit-animation-name: slideOutUp;
     animation-name: slideOutUp
 }

 .animated {
     -webkit-animation-duration: 1s;
     animation-duration: 1s;
     -webkit-animation-fill-mode: both;
     animation-fill-mode: both
 }

 .animated.infinite {
     -webkit-animation-iteration-count: infinite;
     animation-iteration-count: infinite
 }

 .animated.delay-1s {
     -webkit-animation-delay: 1s;
     animation-delay: 1s
 }

 .animated.delay-2s {
     -webkit-animation-delay: 2s;
     animation-delay: 2s
 }

 .animated.delay-3s {
     -webkit-animation-delay: 3s;
     animation-delay: 3s
 }

 .animated.delay-4s {
     -webkit-animation-delay: 4s;
     animation-delay: 4s
 }

 .animated.delay-5s {
     -webkit-animation-delay: 5s;
     animation-delay: 5s
 }

 .animated.fast {
     -webkit-animation-duration: .8s;
     animation-duration: .8s
 }

 .animated.faster {
     -webkit-animation-duration: .5s;
     animation-duration: .5s
 }

 .animated.slow {
     -webkit-animation-duration: 2s;
     animation-duration: 2s
 }

 .animated.slower {
     -webkit-animation-duration: 3s;
     animation-duration: 3s
 }

 @media (print),
 (prefers-reduced-motion:reduce) {
     .animated {
         -webkit-animation-duration: 1ms !important;
         animation-duration: 1ms !important;
         -webkit-transition-duration: 1ms !important;
         transition-duration: 1ms !important;
         -webkit-animation-iteration-count: 1 !important;
         animation-iteration-count: 1 !important
     }
 }

 /*===== Custom Animations =====*/
 @-webkit-keyframes dtr-rotate-1-in {
     0% {
         -webkit-transform: rotateX(180deg);
         opacity: 0
     }

     35% {
         -webkit-transform: rotateX(120deg);
         opacity: 0
     }

     65% {
         opacity: 0
     }

     100% {
         -webkit-transform: rotateX(360deg);
         opacity: 1
     }
 }

 @-moz-keyframes dtr-rotate-1-in {
     0% {
         -moz-transform: rotateX(180deg);
         opacity: 0
     }

     35% {
         -moz-transform: rotateX(120deg);
         opacity: 0
     }

     65% {
         opacity: 0
     }

     100% {
         -moz-transform: rotateX(360deg);
         opacity: 1
     }
 }

 @keyframes dtr-rotate-1-in {
     0% {
         -webkit-transform: rotateX(180deg);
         -moz-transform: rotateX(180deg);
         -ms-transform: rotateX(180deg);
         -o-transform: rotateX(180deg);
         transform: rotateX(180deg);
         opacity: 0
     }

     35% {
         -webkit-transform: rotateX(120deg);
         -moz-transform: rotateX(120deg);
         -ms-transform: rotateX(120deg);
         -o-transform: rotateX(120deg);
         transform: rotateX(120deg);
         opacity: 0
     }

     65% {
         opacity: 0
     }

     100% {
         -webkit-transform: rotateX(360deg);
         -moz-transform: rotateX(360deg);
         -ms-transform: rotateX(360deg);
         -o-transform: rotateX(360deg);
         transform: rotateX(360deg);
         opacity: 1
     }
 }

 @-webkit-keyframes dtr-rotate-1-out {
     0% {
         -webkit-transform: rotateX(0);
         opacity: 1
     }

     35% {
         -webkit-transform: rotateX(-40deg);
         opacity: 1
     }

     65% {
         opacity: 0
     }

     100% {
         -webkit-transform: rotateX(180deg);
         opacity: 0
     }
 }

 @-moz-keyframes dtr-rotate-1-out {
     0% {
         -moz-transform: rotateX(0);
         opacity: 1
     }

     35% {
         -moz-transform: rotateX(-40deg);
         opacity: 1
     }

     65% {
         opacity: 0
     }

     100% {
         -moz-transform: rotateX(180deg);
         opacity: 0
     }
 }

 @keyframes dtr-rotate-1-out {
     0% {
         -webkit-transform: rotateX(0);
         -moz-transform: rotateX(0);
         -ms-transform: rotateX(0);
         -o-transform: rotateX(0);
         transform: rotateX(0);
         opacity: 1
     }

     35% {
         -webkit-transform: rotateX(-40deg);
         -moz-transform: rotateX(-40deg);
         -ms-transform: rotateX(-40deg);
         -o-transform: rotateX(-40deg);
         transform: rotateX(-40deg);
         opacity: 1
     }

     65% {
         opacity: 0
     }

     100% {
         -webkit-transform: rotateX(180deg);
         -moz-transform: rotateX(180deg);
         -ms-transform: rotateX(180deg);
         -o-transform: rotateX(180deg);
         transform: rotateX(180deg);
         opacity: 0
     }
 }

 @-webkit-keyframes slide-in {
     0% {
         opacity: 0;
         -webkit-transform: translateY(-100%)
     }

     60% {
         opacity: 1;
         -webkit-transform: translateY(20%)
     }

     100% {
         opacity: 1;
         -webkit-transform: translateY(0)
     }
 }

 @-moz-keyframes slide-in {
     0% {
         opacity: 0;
         -moz-transform: translateY(-100%)
     }

     60% {
         opacity: 1;
         -moz-transform: translateY(20%)
     }

     100% {
         opacity: 1;
         -moz-transform: translateY(0)
     }
 }

 @keyframes slide-in {
     0% {
         opacity: 0;
         -webkit-transform: translateY(-100%);
         -moz-transform: translateY(-100%);
         -ms-transform: translateY(-100%);
         -o-transform: translateY(-100%);
         transform: translateY(-100%)
     }

     60% {
         opacity: 1;
         -webkit-transform: translateY(20%);
         -moz-transform: translateY(20%);
         -ms-transform: translateY(20%);
         -o-transform: translateY(20%);
         transform: translateY(20%)
     }

     100% {
         opacity: 1;
         -webkit-transform: translateY(0);
         -moz-transform: translateY(0);
         -ms-transform: translateY(0);
         -o-transform: translateY(0);
         transform: translateY(0)
     }
 }

 @-webkit-keyframes slide-out {
     0% {
         opacity: 1;
         -webkit-transform: translateY(0)
     }

     60% {
         opacity: 0;
         -webkit-transform: translateY(120%)
     }

     100% {
         opacity: 0;
         -webkit-transform: translateY(100%)
     }
 }

 @-moz-keyframes slide-out {
     0% {
         opacity: 1;
         -moz-transform: translateY(0)
     }

     60% {
         opacity: 0;
         -moz-transform: translateY(120%)
     }

     100% {
         opacity: 0;
         -moz-transform: translateY(100%)
     }
 }

 @keyframes slide-out {
     0% {
         opacity: 1;
         -webkit-transform: translateY(0);
         -moz-transform: translateY(0);
         -ms-transform: translateY(0);
         -o-transform: translateY(0);
         transform: translateY(0)
     }

     60% {
         opacity: 0;
         -webkit-transform: translateY(120%);
         -moz-transform: translateY(120%);
         -ms-transform: translateY(120%);
         -o-transform: translateY(120%);
         transform: translateY(120%)
     }

     100% {
         opacity: 0;
         -webkit-transform: translateY(100%);
         -moz-transform: translateY(100%);
         -ms-transform: translateY(100%);
         -o-transform: translateY(100%);
         transform: translateY(100%)
     }
 }

 @-webkit-keyframes push-in {
     0% {
         opacity: 0;
         -webkit-transform: translateX(-100%)
     }

     60% {
         opacity: 1;
         -webkit-transform: translateX(10%)
     }

     100% {
         opacity: 1;
         -webkit-transform: translateX(0)
     }
 }

 @-moz-keyframes push-in {
     0% {
         opacity: 0;
         -moz-transform: translateX(-100%)
     }

     60% {
         opacity: 1;
         -moz-transform: translateX(10%)
     }

     100% {
         opacity: 1;
         -moz-transform: translateX(0)
     }
 }

 @keyframes push-in {
     0% {
         opacity: 0;
         -webkit-transform: translateX(-100%);
         -moz-transform: translateX(-100%);
         -ms-transform: translateX(-100%);
         -o-transform: translateX(-100%);
         transform: translateX(-100%)
     }

     60% {
         opacity: 1;
         -webkit-transform: translateX(10%);
         -moz-transform: translateX(10%);
         -ms-transform: translateX(10%);
         -o-transform: translateX(10%);
         transform: translateX(10%)
     }

     100% {
         opacity: 1;
         -webkit-transform: translateX(0);
         -moz-transform: translateX(0);
         -ms-transform: translateX(0);
         -o-transform: translateX(0);
         transform: translateX(0)
     }
 }

 @-webkit-keyframes push-out {
     0% {
         opacity: 1;
         -webkit-transform: translateX(0)
     }

     60% {
         opacity: 0;
         -webkit-transform: translateX(110%)
     }

     100% {
         opacity: 0;
         -webkit-transform: translateX(100%)
     }
 }

 @-moz-keyframes push-out {
     0% {
         opacity: 1;
         -moz-transform: translateX(0)
     }

     60% {
         opacity: 0;
         -moz-transform: translateX(110%)
     }

     100% {
         opacity: 0;
         -moz-transform: translateX(100%)
     }
 }

 @keyframes push-out {
     0% {
         opacity: 1;
         -webkit-transform: translateX(0);
         -moz-transform: translateX(0);
         -ms-transform: translateX(0);
         -o-transform: translateX(0);
         transform: translateX(0)
     }

     60% {
         opacity: 0;
         -webkit-transform: translateX(110%);
         -moz-transform: translateX(110%);
         -ms-transform: translateX(110%);
         -o-transform: translateX(110%);
         transform: translateX(110%)
     }

     100% {
         opacity: 0;
         -webkit-transform: translateX(100%);
         -moz-transform: translateX(100%);
         -ms-transform: translateX(100%);
         -o-transform: translateX(100%);
         transform: translateX(100%)
     }
 }

 @-webkit-keyframes zoom-in {
     0% {
         opacity: 0;
         -webkit-transform: translateZ(100px)
     }

     100% {
         opacity: 1;
         -webkit-transform: translateZ(0)
     }
 }

 @-moz-keyframes zoom-in {
     0% {
         opacity: 0;
         -moz-transform: translateZ(100px)
     }

     100% {
         opacity: 1;
         -moz-transform: translateZ(0)
     }
 }

 @keyframes zoom-in {
     0% {
         opacity: 0;
         -webkit-transform: translateZ(100px);
         -moz-transform: translateZ(100px);
         -ms-transform: translateZ(100px);
         -o-transform: translateZ(100px);
         transform: translateZ(100px)
     }

     100% {
         opacity: 1;
         -webkit-transform: translateZ(0);
         -moz-transform: translateZ(0);
         -ms-transform: translateZ(0);
         -o-transform: translateZ(0);
         transform: translateZ(0)
     }
 }

 @-webkit-keyframes zoom-out {
     0% {
         opacity: 1;
         -webkit-transform: translateZ(0)
     }

     100% {
         opacity: 0;
         -webkit-transform: translateZ(-100px)
     }
 }

 @-moz-keyframes zoom-out {
     0% {
         opacity: 1;
         -moz-transform: translateZ(0)
     }

     100% {
         opacity: 0;
         -moz-transform: translateZ(-100px)
     }
 }

 @keyframes zoom-out {
     0% {
         opacity: 1;
         -webkit-transform: translateZ(0);
         -moz-transform: translateZ(0);
         -ms-transform: translateZ(0);
         -o-transform: translateZ(0);
         transform: translateZ(0)
     }

     100% {
         opacity: 0;
         -webkit-transform: translateZ(-100px);
         -moz-transform: translateZ(-100px);
         -ms-transform: translateZ(-100px);
         -o-transform: translateZ(-100px);
         transform: translateZ(-100px)
     }
 }

 @-moz-keyframes arrowBounce {

     0%,
     100%,
     20%,
     50%,
     80% {
         -moz-transform: translateY(0);
         transform: translateY(0)
     }

     40% {
         -moz-transform: translateY(-10px);
         transform: translateY(-10px)
     }

     60% {
         -moz-transform: translateY(-5px);
         transform: translateY(-5px)
     }
 }

 @-webkit-keyframes arrowBounce {

     0%,
     100%,
     20%,
     50%,
     80% {
         -webkit-transform: translateY(0);
         transform: translateY(0)
     }

     40% {
         -webkit-transform: translateY(-10px);
         transform: translateY(-10px)
     }

     60% {
         -webkit-transform: translateY(-5px);
         transform: translateY(-5px)
     }
 }

 @keyframes arrowBounce {

     0%,
     100%,
     20%,
     50%,
     80% {
         -moz-transform: translateY(0);
         -ms-transform: translateY(0);
         -webkit-transform: translateY(0);
         transform: translateY(0)
     }

     40% {
         -moz-transform: translateY(-10px);
         -ms-transform: translateY(-10px);
         -webkit-transform: translateY(-10px);
         transform: translateY(-10px)
     }

     60% {
         -moz-transform: translateY(-5px);
         -ms-transform: translateY(-5px);
         -webkit-transform: translateY(-5px);
         transform: translateY(-5px)
     }
 }

 /*===== Animated Headline =====*/
 .dtr-words-wrapper {
     display: inline-block;
     position: relative;
 }

 .dtr-words-wrapper b {
     display: inline-block;
     position: absolute;
     white-space: nowrap;
     left: 0;
     top: 0;
     font-weight: inherit;
 }

 .dtr-words-wrapper b.is-visible {
     position: relative;
 }

 .no-js .dtr-words-wrapper b {
     opacity: 0;
 }

 .no-js .dtr-words-wrapper b.is-visible {
     opacity: 1;
 }

 /* rotate-1 */
 .dtr-animated-headline.rotate-1 .dtr-words-wrapper {
     -webkit-perspective: 300px;
     -moz-perspective: 300px;
     perspective: 300px;
 }

 .dtr-animated-headline.rotate-1 b {
     opacity: 0;
     -webkit-transform-origin: 50% 100%;
     -moz-transform-origin: 50% 100%;
     -ms-transform-origin: 50% 100%;
     -o-transform-origin: 50% 100%;
     transform-origin: 50% 100%;
     -webkit-transform: rotateX(180deg);
     -moz-transform: rotateX(180deg);
     -ms-transform: rotateX(180deg);
     -o-transform: rotateX(180deg);
     transform: rotateX(180deg);
 }

 .dtr-animated-headline.rotate-1 b.is-visible {
     opacity: 1;
     -webkit-transform: rotateX(0deg);
     -moz-transform: rotateX(0deg);
     -ms-transform: rotateX(0deg);
     -o-transform: rotateX(0deg);
     transform: rotateX(0deg);
     -webkit-animation: dtr-rotate-1-in 1.2s;
     -moz-animation: dtr-rotate-1-in 1.2s;
     animation: dtr-rotate-1-in 1.2s;
 }

 .dtr-animated-headline.rotate-1 b.is-hidden {
     -webkit-transform: rotateX(180deg);
     -moz-transform: rotateX(180deg);
     -ms-transform: rotateX(180deg);
     -o-transform: rotateX(180deg);
     transform: rotateX(180deg);
     -webkit-animation: dtr-rotate-1-out 1.2s;
     -moz-animation: dtr-rotate-1-out 1.2s;
     animation: dtr-rotate-1-out 1.2s;
 }

 /* xslide */
 .dtr-animated-headline.slide span {
     display: inline-block;
     padding: .0;
 }

 .dtr-animated-headline.slide .dtr-words-wrapper {
     overflow: hidden;
     vertical-align: top;
 }

 .dtr-animated-headline.slide b {
     opacity: 0;
     top: 0;
 }

 .dtr-animated-headline.slide b.is-visible {
     top: 0;
     opacity: 1;
     -webkit-animation: slide-in 0.6s;
     -moz-animation: slide-in 0.6s;
     animation: slide-in 0.6s;
 }

 .dtr-animated-headline.slide b.is-hidden {
     -webkit-animation: slide-out 0.6s;
     -moz-animation: slide-out 0.6s;
     animation: slide-out 0.6s;
 }

 /* xpush */
 .dtr-animated-headline.push b {
     opacity: 0;
 }

 .dtr-animated-headline.push b.is-visible {
     opacity: 1;
     -webkit-animation: push-in 0.6s;
     -moz-animation: push-in 0.6s;
     animation: push-in 0.6s;
 }

 .dtr-animated-headline.push b.is-hidden {
     -webkit-animation: push-out 0.6s;
     -moz-animation: push-out 0.6s;
     animation: push-out 0.6s;
 }

 /* zoom */
 .dtr-animated-headline.zoom .dtr-words-wrapper {
     -webkit-perspective: 300px;
     -moz-perspective: 300px;
     perspective: 300px;
 }

 .dtr-animated-headline.zoom b {
     opacity: 0;
 }

 .dtr-animated-headline.zoom b.is-visible {
     opacity: 1;
     -webkit-animation: zoom-in 0.8s;
     -moz-animation: zoom-in 0.8s;
     animation: zoom-in 0.8s;
 }

 .dtr-animated-headline.zoom b.is-hidden {
     -webkit-animation: zoom-out 0.8s;
     -moz-animation: zoom-out 0.8s;
     animation: zoom-out 0.8s;
 }

 .dtr-animated-headline {
     font-family: 'Poppins', sans serif;
 }

 .dropdown-menu {
     background-color: #fff;
     box-shadow: .2rem .125rem .25rem rgba(0, 0, 0, .075) !important;
     padding: 15px 0 !important;
 }

 .why-box:hover {
     box-shadow: 0 0 10px rgb(203 203 203 / 30%);
     transition: all .3s ease-in-out;
 }

 .text-underline:hover {
     text-decoration: underline !important;
 }

 .why-this a .why-box p {
     color: #4a4f55;
 }

 .why-this a:hover .why-box p {
     color: #000;
 }

 .static {
     position: absolute;
     background: #fbfbfb;
 }

 .why-this a:hover .static {
     opacity: 0;
 }

 .h6 {
     line-height: 2.4;
 }

 .footer-area.footer-orange:before {
     background: url(../../images/wave-2.svg) 0 0/100% no-repeat, linear-gradient(to bottom,
             #CBEBFF,
             #E5F5FF,
             #f8fbff) 0 0/100% no-repeat;
 }

 .footer-area.footer-yellow:before {
     background: url(../../images/wave-2.svg) 0 0/100% no-repeat, linear-gradient(to bottom,
             #DBF3FA,
             #F5FCFF,
             #f8fbff) 0 0/100% no-repeat;
 }

 .footer-area.footer-grey:before {
     background: url(../../images/wave-2.svg) 0 0/100% no-repeat, linear-gradient(to bottom,
             #BDD8FF,
             #EBF3FF,
             #f8fbff) 0 0/100% no-repeat;
 }


 h2.list-title {
     margin-bottom: 3em;
     text-align: center;
     text-decoration: underline;
 }

 #subtitling {
     margin-top: 5em;
 }

 .section-title-sm {
     font-family: Poppins !important;
     color: #222326 !important;
     font-size: 25px;
     margin-bottom: 3em;
 }

 #digital-learning .why-box {
     height: auto;
     padding: 35px;
     min-height: 36em;
 }

 #digital-learning .why-box p {
     padding-top: 10px;
     text-align: left;
     font-size: 18px;
 }

 #digital-learning .why-box h2 {

     font-size: 20px !important;
     height: 2em;
 }

 .content-box {
     padding: 50px 100px;
 }

 .content-box h3 {

     text-transform: capitalize;
     margin-bottom: 35px;
     font-size: 38px;
     line-height: 1.3;

 }

 .content-box .section-content ul li {
     text-transform: capitalize;
 }

 .content-box .section-content i {
     margin-right: 10px;
     font-size: 10px;
     color: #1756a0;
 }

 .localization-services {
     display: block;
     position: relative;
     background-color: #1756a0;
     background-position: center;
     background-size: cover;
     color: #2c2c2c;

 }

 .localization-services .content {
     padding: 80px 0;
 }

 p.more-button {
     text-align: end;
     color: #1756a0;
     font-size: 18px;
 }

 .navbar-light .navbar-nav .nav-link.active {
     color: #0d427d;
     text-decoration: underline;
 }

 .section-title {
     margin-bottom: 35px;
 }

 .section-title h3 {
     margin-bottom: 0;
     font-size: 38px;
     line-height: 1.3;
 }

 .section-title h3:after {
     content: "";
     margin-top: 20px;
     position: absolute;
     display: block;
     width: 85px;
     height: 2px;
     background: #1e5fa8;
 }

 .localization-services .section-title h3 {
     margin-bottom: 0;
     font-size: 25px;
     line-height: 1.3;
     color: #fff;
 }

 .localization-services .list {

     padding: 0;
     list-style-type: none;
 }

 .localization-services .list .services {
     webkit-box-align: center;
     -ms-flex-align: center;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     align-items: center;
 }

 .localization-services .list li {
     margin-bottom: 30px;
 }

 .localization-services .list .icon img {
     display: flex;
     flex: 0 0 70px;
     align-items: center;
     justify-content: center;
     margin-right: 34px;
 }

 .localization-services .list .title {
     color: #fff;
     font-size: 22px;

 }

 .localization-services .section-title h3:after {
     content: "";
     margin-top: 20px;
     position: absolute;
     display: block;
     width: 85px;
     height: 2px;
     background: #fff;
 }

 .localization-services p {
     color: #fff;

 }

 .localization-services .container-fluid {
     display: flow-root;
     box-sizing: content-box;
     max-width: 1200px;
     margin-left: auto;
     margin-right: auto;
     padding-left: 15px;
     padding-right: 15px;
 }

 .section-sub-title {
     margin-bottom: 35px;
 }

 .section-sub-title h3 {
     padding-left: 70px;
     position: relative;
     display: inline-block;
     text-align: center;
     color: #1756a0;
     font-size: 20px;
     line-height: 26px;
     font-weight: 500;
 }

 .section-sub-title h3:before {
     position: absolute;
     height: 4px;
     width: 60px;
     content: "";
     left: 0;
     top: 11px;
     transform: rotate(-180deg);
     background: linear-gradient(246.06deg, #66a1e7 15.37%, rgba(255, 255, 255, 0) 116.95%);
 }

 .section-content p {

     /*line-height: 30px;
     font-size: 17px;*/

     font-size: 1.18rem;
     color: #333;
     line-height: 1.9;
 }

 .top-section-pad-lg {
     padding-top: 190px;

 }

 .cta-section {
     position: relative;
     z-index: 1;
     background-position: center center;
     background-size: cover !important;
     background-repeat: no-repeat;
     background-attachment: fixed;
     background: url(../../images/cta-bg.jpg);
     padding: 80px 0;

     text-align: center;

 }

 .cta-section:after {
     background: linear-gradient(90deg, #072342db 0%, #000306ce 100%);
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     content: "";
     z-index: -1;
     opacity: 0.9;
 }

 .cta-section .section-title {
     margin-bottom: 0
 }

 .cta-section .section-title h2 {
     color: #fff;
     font-size: 25px;
     line-height: 45px;
 }

 .management .section-title {}

 .team-box {
     background-color: #fff;
 }

 .team-details {
     text-align: center;
     padding: 20px 10px;
 }

 .teams.sec-img:after {
     position: absolute;
     top: -21px;
     left: 1.5em;
     content: "";
     width: 0;
     height: 0;
     border-top: 208px solid #2161a9;
     border-right: 210px solid transparent;
     z-index: -1;
 }

 .cta-guarntee {
     padding: 80px 0;
     background: linear-gradient(90deg, #2161a9 0%, #739dcb 100%);

 }

 .cta-guarntee h3 {
     color: #fff;
     text-align: center;
 }

 .languages {
     position: relative;
 }

 .languages .overlay {
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     height: 80%;
     background: #000;
     background-size: cover;
     z-index: -1;
 }

 .popup {
     border: 1px solid #1756a0;
     padding: 15px;
     position: absolute;
     z-index: 2;
     margin-left: 8.4em;
     margin-top: -36px;
     border-radius: 4px;
 }

 .popup .play {

     display: flex;
     align-items: center;
     justify-content: center;
     background: #1756a0;
     width: 100px;
     height: 100px;
     border-radius: 4px;
 }

 .popup .play span {
     color: #fff;
 }

 .get-in-touch {
     display: flex;
 }

 .get-in-touch span {
     color: #2161a9;
     margin-left: 10px;
     text-decoration: underline;
 }

 .languages .box {
     border-radius: 5px;
     background: #fff;
     margin-top: -47.5%;
     padding: 60px;
     margin-right: -5px;
 }

 .languages .image-video {
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .bg-blue {
     background-color: #f8fbff;
 }

 .z-index-1 {
     z-index: 1;
 }

 .img-over {
     z-index: 9;

     margin-top: -63.7%;
     position: relative;
     margin-left: auto;
 }

 .layout {
     background-position: center center;
     background-size: cover;
     background-repeat: no-repeat;
     /* background-image:url(https://via.placeholder.com/1920x750); */
     background-color: #fcfcfd;

 }

 .subscriber-box.contact-info {
     padding: 25px 32px 45px !important;
 }

 .section-title.middle h3 {
     margin-bottom: 0;
     font-size: 38px;
     line-height: 1.3;
 }

 .section-title.middle h3:after {
     content: "";
     position: absolute;
     display: block;
     width: 85px;
     height: 2px;
     background: #1e5fa8;
     left: calc(50% - 50px);

 }

 .section-title.middle {
     margin-bottom: 3.5em;
 }

 .select-wrapper #country {
     width: 100%;
     border: none;
     border-bottom: 1px solid #e2e7ed;
     line-height: 1.5;
     padding-bottom: 10px;
     padding-top: 10px;
     color: #75758a;
     font-size: 1em;
     background: #fff;
 }

 .select-wrapper #country:focus-visible {
     width: 100%;
     border: none;

 }

 .voice-over .section-title.middle h3 {
     font-size: 30px;
 }

 .voice-over .outer-box {
     background-color: #fff;
     border-radius: 20px;
     padding: 50px 50px 40px;
     height: 16em;
 }

 .voice-over .mt-5em {
     margin-top: 5em;
 }

 .voice-over .outer-box .service-img {
     height: auto;
     margin: 0 auto;
     width: 96px;
     padding-bottom: 30px;
 }

 .voice-over .outer-box h2 {
     text-align: center;
     margin-bottom: 20px;
     font-size: 1.2em;
 }

 .languages.sec-img:after {

     position: absolute;
     bottom: -14px;
     left: 7px;
     content: "";
     width: 0;
     height: 0;
     border-bottom: 175px solid #2161a9;
     border-right: 195px solid transparent;
     z-index: -1;
 }

 .languages.sec-img:before {
     position: absolute;
     bottom: 7.8em;
     left: 19em;
     content: "";
     width: 0;
     height: 0;
     border-top: 175px solid #2161a9;
     border-left: 195px solid transparent;
     z-index: -1;
 }


 .newsletter {

     position: relative;
     z-index: 1;
     background-position: center center;
     background-size: cover;
     background-repeat: no-repeat;
     background-attachment: fixed;
     background: url(../../images/translation-cta.png);


     text-align: center;

 }

 .newsletter:after {
     background: rgb(1 12 42 / 70%);
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     content: "";
     z-index: -1;
     opacity: 0.9;
 }

 .newsletter h4 {
     font-weight: 500;
     color: #fff;

 }

 .expertise {
     padding: 80px 0;
 }

 .subtitling-box {
     padding: 35px;
     margin-top: 40px;

     box-shadow: 0px 0px 100px 0px rgb(226 228 231);
     border-radius: 20px;
     border-left: 5px solid var(--e-global-color-white);
     background: #fff;
     height: 27.5em;

 }

 .subtitling-box h4 {
     font-size: 20px;
     margin-bottom: 20px;
 }

 .layout-right {
     padding: 50px 50px 50px 0;
 }

 .experience-box {
     margin-left: -353px;
     padding: 40px 0;
     display: flex;
     background: #010C2A;
     border-radius: 5px;
     margin-top: 70px;
 }

 .experience-box .box:nth-child(1) {
     padding-left: 60px;
 }

 .experience-box .box {
     padding-left: 65px;
     border-right: 1px solid #E8E8E9;
     width: 33.333%;
     padding-right: 50px;
 }

 .experience-box .box .icon span {
     color: #00B0FC;
     font-size: 60px;
     line-height: 1;
 }

 .experience-box .box .box-couter p {
     font-size: 16px;
     line-height: 24px;
     color: #fff;
     margin-top: 20px;
     font-weight: 500;
     position: relative;
     padding-left: 15px;
     margin-bottom: 0;
     text-transform: capitalize;
 }

 .experience-box .box .box-couter p::before {
     position: absolute;
     left: 0;
     top: 2px;
     width: 4px;
     height: 20px;
     background: #00B0FC;
     content: "";
 }

 .section-title h2 {
     margin-bottom: 0;
     font-size: 38px;
     line-height: 1.3;
 }

 .languages .image-video img {
     max-width: 100%;
     height: auto;
     transform: scale(1);
     border-radius: 5px;

     margin-left: auto;
 }

 .pb-150 {
     padding-bottom: 150px !important
 }

 .pb-100 {
     padding-bottom: 100px !important
 }

 .pt-10 {
     padding-top: 10px;
 }

 .section-innerpage {
     padding: 40px 0;

 }

 .section-padding {
     padding: 60px 0;
 }

 .mr-15 {
     margin-right: 15px;
 }

 .wrap-icon-box {
     margin-top: 30px;
     padding: 10px 0;
     border-bottom: none;
     display: flex;
     align-items: center;
     justify-content: flex-start;
     margin-bottom: 0;
 }

 .icon-box.st2 {
     display: flex;
     align-items: center;
     justify-content: flex-start;
     background: transparent;
     padding: 0;
     width: 34%;
 }

 .icon-box.st2 .desc {
     margin-left: 14px;
     font-size: 18px;
     line-height: 28px;
     /* font-weight: 500; */

     color: #010C2A;
     text-transform: capitalize;
 }

 .img2 {
     z-index: 9;
     width: 49%;
     margin-top: -47.7%;
     position: relative;
     margin-left: auto;

 }

 /*.img2::after {
     position: absolute;
     left: -10px;
     content: "";
     top: -10px;
     background: #fff;
     width: 95%;
     height: 106%;
     z-index: -1;
     border-radius: 5px;
 }*/

 .mb-0 {
     margin-bottom: 0px;
 }

 .more {
     color: #1756a0;

 }

 .mb-20 {
     margin-bottom: 20px;
 }

 .right-img {
     display: block;
     position: absolute;
     top: 0px;
     left: 0;
     width: 50vw;
     height: 100%;
     background: url(../../images/local-4.png);
     background-position: left center;
     background-size: cover;
 }

 .card-header,
 .card {
     background: #fff0;
 }

 .why-box {
     border-radius: 16px;
 }

 .font-large {
     font-size: 1.6rem;
     line-height: 0;
     letter-spacing: -1px;
 }

 .why-box:hover {
     transform: scale(1.16);
 }

 .why-box {
     transition: all .7s ease;
 }

 .cta-inner p.lead {
     font-size: 1.2rem;
 }

 /* Responsive */

 @media screen and (min-width: 1600px) {}

 @media screen and (min-width: 1280px) and (max-width:1400px) {}


 @media (min-width: 1600px) {
     .why-box {
         min-height: 380px;
     }
 }

 @media (max-width: 1545px) {
     .why-box {
         min-height: 370px;
     }
 }

 @media (max-width: 1300px) {
     .why-box {
         min-height: 350px;
     }
 }

 @media (max-width: 1200px) {
     .why-box {
         min-height: 380px;
     }
 }

 @media screen and (min-width: 1200px) {


     .read-more-txt1 {
         margin-left: -617px;
     }

     .read-more-txt4.collapsed,
     .read-more-txt1.collapsed {
         margin-left: 0;
     }

     .why-this {
         padding-top: 150px;
     }

     .btn.btn-link.collapsed {
         /*margin-top: -55px; */
     }

     .card-body {
         padding-top: 5px;
     }

     .sec-title-xl {

         margin-bottom: 20px;
     }
 }

 @media screen and (max-width: 992px) {
     .why-box {
         padding: 40px 45px;
     }

     .header-img,
     .header-img-s3 {
         max-width: 100%;
     }

     .btn-lg {
         padding: 15px 30px;
         margin-top: 20px;
     }

     .sec-title-xl+p.lead {
         margin-bottom: 30px;
     }

     .navbar-toggler {
         background-color: #1155a2;
         border: 0;
         padding: 8px 15px;
     }

     .btn-lg {
         box-shadow: none;

     }

     .why-box {
         min-height: 335px;
     }
 }


 @media (min-width: 768px) and (max-width: 1024px) {}

 @media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {}

 @media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {}


 @media screen and (max-width: 768px)and (max-width: 992px) {}

 @media screen and (max-width: 767px) {
     .nav-item .btn-menu {
         padding: 2px 15px;
     }

     .btn.btn-link.text-left {
         text-align: center !important;
     }

     .service-accordian .card-body p,
     .service-accordian p {
         font-size: 1rem;
         color: #333;
         line-height: 2;
         padding: 0;
         text-align: center;
     }

     .why-box {
         min-height: auto;
     }
 }

 @media screen and (min-width:1200px) and (max-width:1440px) {
     .content-box {
         padding: 0px;
     }


 }

 /*Large Device*/
 @media screen and (min-width:992px) and (max-width:1199.98px) {
     .section-title h3 {
         margin-bottom: 0;
         font-size: 20px;
         line-height: 1.3;
     }

     .section-content p {

         line-height: 26px;
     }

     .img-over {
         z-index: 9;
         margin-top: -62.7%;
         position: relative;
         margin-left: auto;
         left: -18px;
     }

     .top-section-pad-lg {
         padding-top: 150px;
     }

     .teams.sec-img:after {
         position: absolute;
         top: -22px;
         left: -0.5em;
         content: "";
         width: 0;
         height: 0;
         border-top: 208px solid #2161a9;
         border-right: 210px solid transparent;
         z-index: -1;
     }

     .experience-box {
         margin-left: -340px;
         padding: 40px 0;
         display: flex;
         background: #010C2A;
         border-radius: 5px;
         margin-top: 20px;
     }

     .experience-box .box {
         padding-left: 25px;
         border-right: 1px solid #E8E8E9;
         width: 33.333%;
         padding-right: 0px;
     }

     .experience-box .box:nth-child(1) {
         padding-left: 30px;
     }

     .section-title h2 {
         margin-bottom: 0;
         font-size: 20px;
         line-height: 1.3;
     }

     #digital-learning .why-box h2 {
         font-size: 16px !important;

         height: 2em;
     }

     #digital-learning .why-box {
         height: 41em;
         padding: 35px;
         /* min-height: auto; */
         margin-bottom: 30px;

     }

     #digital-learning {
         padding: 0;
     }

     .content-box {
         padding: 10px 30px;
     }

     .content-box h3 {
         text-transform: capitalize;
         margin-bottom: 5px;
         font-size: 27px;
         line-height: 1.3;
     }

     .localization-services .container-fluid {
         display: flow-root;
         box-sizing: content-box;
         max-width: 960px;
         margin-left: auto;
         margin-right: auto;
         padding-left: 15px;
         padding-right: 15px;
     }

     .localization-services .content {
         padding: 80px 0px 80px 35px;
     }

     .voice-over .outer-box {
         background-color: #fff;
         border-radius: 20px;
         padding: 30px 35px 40px;
         height: 15em;
     }

     .languages.sec-img:before {
         position: absolute;
         bottom: 8.8em;
         left: 19em;
         content: "";
         width: 0;
         height: 0;
         border-top: 165px solid #2161a9;
         border-left: 177px solid transparent;
         z-index: -1;
     }

     .languages.sec-img:after {
         position: absolute;
         bottom: -12px;
         left: -11px;
         content: "";
         width: 0;
         height: 0;
         border-bottom: 161px solid #2161a9;
         border-right: 185px solid transparent;
         z-index: -1;
     }

     .subscriber.section-pad-md {
         padding-top: 40px;
         padding-bottom: 100px;
     }

     .voiceover .subtitling-box {
         padding: 35px;
         margin-top: 40px;
         box-shadow: 0px 0px 100px 0px rgb(226 228 231);
         border-radius: 20px;
         border-left: 5px solid var(--e-global-color-white);
         background: #fff;
         height: 28.5em;
     }

     .voiceover .subtitling-box h4 {
         font-size: 18px;
         margin-bottom: 20px;
     }

     .dtp-service.section-pad-md {
         padding-top: 50px;
         padding-bottom: 80px
     }

 }

 /*Medium Device*/
 @media screen and (min-width:768px) and (max-width:991.98px) {

     .experience,
     .teams,
     .communicate {
         display: flex;
         flex-direction: column-reverse;
     }

     .section-title h3 {

         margin-bottom: 0;
         font-size: 25px;
         line-height: 1.3;
     }

     .section-content p {

         line-height: 26px;
     }

     .md-img-none {
         display: none;
     }

     .sec-img {
         max-width: 100%;
         margin: 10px 0 0 0;
         padding: 10px 0;
     }

     .sec-img img {
         width: 100%;
     }

     .team-box {
         margin-bottom: 20px;
     }

     .team-member img {
         width: 100%;
     }

     .subtitling-box {
         padding: 35px;
         margin-top: 40px;
         box-shadow: 0px 0px 100px 0px rgb(226 228 231);
         border-radius: 20px;
         border-left: 5px solid var(--e-global-color-white);
         background: #fff;
         height: auto;
         min-height: 17em;
     }

     .top-section-pad-lg {
         padding-top: 120px;
     }

     .teams.sec-img:after {
         position: absolute;
         top: -3px;
         left: -0.5em;
         content: "";
         width: 0;
         height: 0;
         border-top: 140px solid #2161a9;
         border-right: 162px solid transparent;
         z-index: -1;
     }

     .popup {
         border: 1px solid #1756a0;
         padding: 15px;
         position: absolute;
         z-index: 2;
         margin-left: 14.4em;
         margin-top: -36px;
         border-radius: 4px;
     }

     .experience-box {
         margin-left: 10px;
         padding: 40px 0;
         display: flex;
         background: #010C2A;
         border-radius: 5px;
         margin-top: 20px;
     }

     .experience-box .box {
         padding-left: 25px;
         border-right: 1px solid #E8E8E9;
         width: 33.333%;
         padding-right: 50px;
     }

     .experience-box .box:nth-child(1) {
         padding-left: 30px;
     }

     .layout-right {
         padding: 50px 0px 50px 0
     }

     .layout .container-fluid {
         max-width: 720px;
     }

     .translation-img {
         display: none;
     }

     .header-content {
         padding-top: 41px;
     }

     .logo {
         width: 160px;
         height: auto;
     }

     .section-title h2 {
         margin-bottom: 0;
         font-size: 20px;
         line-height: 1.3;
     }

     #digital-learning .why-box h2 {
         font-size: 23px !important;
         margin-bottom: 3em;
         height: 0em;
         text-align: center;
     }

     #digital-learning .why-box {
         height: 32em;
         padding: 35px;
         /* min-height: auto; */
         margin-bottom: 30px;

     }

     #digital-learning {
         padding: 0;
     }

     .teams-img {
         display: none;
     }

     .content-box {
         padding: 80px 10px;
     }

     .localization-services .content {
         padding: 80px 30px;
     }

     p.text-size-16 {
         margin-top: 20px;

     }

     .cta-box {
         padding: 28px 30px;
         text-align: left;
     }

     .voice-over .outer-box {
         background-color: #fff;
         border-radius: 20px;
         padding: 30px 35px 40px;
         height: 15em;
         margin-bottom: 25px;
     }

     .languages.sec-img:before {
         display: none;
     }

     .languages.sec-img:after {
         display: none;
     }

     .subscriber.section-pad-md {
         padding-top: 40px;
         padding-bottom: 190px;
     }

     .voiceover .subtitling-box {
         padding: 35px;
         margin-top: 40px;
         box-shadow: 0px 0px 100px 0px rgb(226 228 231);
         border-radius: 20px;
         border-left: 5px solid var(--e-global-color-white);
         background: #fff;
         height: 22em;

     }

     .voiceover .subtitling-box h4 {
         font-size: 18px;
         margin-bottom: 20px;
     }

     .dtp-service.section-pad-md {
         padding-top: 50px;
         padding-bottom: 80px
     }

     .voice-over .section-title.middle h3 {
         font-size: 20px;
     }

     .why-xiom-item-s2 h2 {
         display: block;
         font-weight: 600;
         font-size: 13px;
         line-height: 1.5;
     }
 }

 /*Small Device*/
 @media screen and (min-width:576px) and (max-width:767.98px) {

     .experience,
     .teams,
     .communicate {
         display: flex;
         flex-direction: column-reverse;
     }

     .section-title h3 {
         margin-bottom: 10px;
         font-size: 25px;
         line-height: 1.3;
     }

     .section-content p {

         line-height: 26px;
     }

     .md-img-none {
         display: none;
     }

     .sec-img {
         max-width: 100%;
         margin: 10px 0 0 0;
         padding: 10px 0;
     }

     .sec-img img {
         width: 100%;
     }

     .team-box {
         margin-bottom: 20px;
     }

     .team-member img {
         width: 100%;
     }

     .top-section-pad-lg {
         padding-top: 100px;
     }

     .teams.sec-img:after {
         display: none;
     }

     .subtitling-box {
         padding: 35px;
         margin-top: 40px;
         box-shadow: 0px 0px 100px 0px rgb(226 228 231);
         border-radius: 20px;
         border-left: 5px solid var(--e-global-color-white);
         background: #fff;
         height: 20.5em;
     }

     .popup {
         border: 1px solid #1756a0;
         padding: 15px;
         position: absolute;
         z-index: 2;
         margin-left: 21.4em;
         margin-top: -98px;
         border-radius: 4px;
     }

     .layout-right {
         padding: 0;
     }

     .experience-box {
         margin-left: 0px;
         padding: 0px 0;
         display: block;
         background: #010C2A;
         border-radius: 5px;
         margin-top: 20px;
         width: 100%;
         margin-bottom: 40px;
     }

     .experience-box .box {
         padding-left: 25px;
         border-bottom: 1px solid #E8E8E9;
         border-right: 0px solid #E8E8E9;
         width: 100%;
         padding-right: 50px;
         /* margin: 0px auto 25px; */
         align-items: center;
         /* justify-content: center; */
         display: flex;
     }

     .experience-box .box .icon {
         margin: 10px 0;
     }

     .experience-box .box:nth-child(1) {
         padding-left: 30px;

     }

     .experience-box .box .box-couter p {
         margin-bottom: 20px;
         padding-left: 40px;
     }

     .experience-box .box .box-couter p::before {
         position: absolute;
         left: 26px;
         top: 2px;
         width: 4px;
         height: 20px;
         background: #00B0FC;
         content: "";
     }

     .experience-box .icon img {
         width: 80px;
         height: 80px
     }

     p.text-size-16 {
         margin-top: 20px;

     }

     .languages .box {
         border-radius: 5px;
         background: #fff;
         margin-top: -39.5%;
         padding: 40px 25px;
         margin-right: -5px;
     }

     .translation-img {
         display: none;
     }

     .layout .container-fluid {
         max-width: 540px;
     }

     .get-in-touch {
         display: block;
         margin-top: 30px;
     }

     .breadcrumb {
         background-color: transparent;
         justify-content: center;
     }

     .header-content {
         padding-top: 36px;
     }

     .logo {
         width: 160px;
         height: auto;
     }

     .site-header {
         padding-top: 5px;
     }

     .section-title {
         margin-bottom: 0px;
     }

     .section-title h2 {
         margin-bottom: 0;
         font-size: 20px;
         line-height: 1.3;
     }

     #digital-learning .why-box h2 {
         font-size: 22px !important;
         margin-bottom: 3em;
         height: 0em;
         text-align: center;
     }

     #digital-learning .why-box {
         height: 35em;
         padding: 35px 18px;
         /* min-height: auto; */
         margin-bottom: 30px;


     }

     #digital-learning {
         padding: 0;
     }

     #digital-learning {
         padding: 0;
     }

     .teams-img {
         display: none;
     }

     .content-box {
         padding: 80px 10px;
     }

     .localization-services .content {
         padding: 80px 30px;
     }

     .cta-box {
         padding: 30px 30px;
         text-align: left;
     }

     .voice-over .outer-box {
         background-color: #fff;
         border-radius: 20px;
         padding: 30px 35px 40px;
         height: 20em;
         margin-bottom: 25px;
     }

     .languages.sec-img:before {
         display: none;
     }

     .languages.sec-img:after {
         display: none;
     }

     .subscriber.section-pad-md {
         padding-top: 40px;
         padding-bottom: 190px;
     }

     .voiceover .subtitling-box {
         padding: 35px;
         margin-top: 40px;
         box-shadow: 0px 0px 100px 0px rgb(226 228 231);
         border-radius: 20px;
         border-left: 5px solid var(--e-global-color-white);
         background: #fff;
         height: 22em;

     }

     .voiceover .subtitling-box h4 {
         font-size: 18px;
         margin-bottom: 20px;
     }

     .dtp-service.section-pad-md {
         padding-top: 50px;
         padding-bottom: 80px
     }

     .voice-over .section-title.middle h3 {
         font-size: 20px;
     }

     .why-xiom-item-s2 h2 {
         display: block;
         font-weight: 600;
         font-size: 13px;
         line-height: 1.5;
     }

     .section-title h3:after {
         display: none;
     }

     .bg-blue.section-padding.pt-md-0.voice-over {
         padding: 0;
     }


 }

 @media screen and (max-width:768px) {

     .service-accordian .card-body p,
     .service-accordian .card-body {
         text-align: center;
     }

     .service-accordian .card-body ul li {

         padding-left: 110px;
         text-align: left;
     }
 }

 /*Extra-Small Device*/
 @media screen and (min-width:375px) and (max-width:575.98px) {

     .experience,
     .teams,
     .communicate {
         display: flex;
         flex-direction: column-reverse;
     }

     .section-title h3 {
         text-align: center;
         margin-bottom: 0;
         font-size: 25px;
         line-height: 1.3;
     }

     .section-title h3:after {
         display: none;
         ;
     }

     .d-xs-block {
         display: block;
     }

     .section-content p {

         line-height: 26px;
     }

     .md-img-none {
         display: none;
     }

     .sec-img {
         max-width: 100%;
         margin: 10px 0 0 0;
         padding: 10px 0;
     }

     .sec-img img {
         width: 100%;
     }

     .team-box {
         margin-bottom: 20px;
     }

     .team-member img {
         width: 100%;
     }

     .management.container {
         max-width: 400px;
     }

     .management .section-title {
         margin-bottom: 15px;
     }

     .top-section-pad-lg {
         padding-top: 70px;
     }

     .icon-box.st2 {
         display: flex;
         align-items: center;
         justify-content: flex-start;
         background: transparent;
         padding: 0;
         width: 50%;
     }

     .section-innerpage {
         padding: 40px 0 20px;

     }

     .teams.sec-img:after {
         display: none;
     }

     .subtitling-box {
         padding: 35px;
         margin-top: 40px;
         box-shadow: 0px 0px 100px 0px rgb(226 228 231);
         border-radius: 20px;
         border-left: 5px solid var(--e-global-color-white);
         background: #fff;
         height: Auto;
     }

     .popup {
         border: 1px solid #1756a0;
         padding: 15px;
         position: absolute;
         z-index: 2;
         margin-left: 14.4em;
         margin-top: 90px;
         border-radius: 4px;
     }

     .popup .play {
         display: flex;
         align-items: center;
         justify-content: center;
         background: #1756a0;
         width: 50px;
         height: 50px;
         border-radius: 4px;
     }

     .layout-right {
         padding: 0;
     }

     .experience-box {
         margin-left: 0px;
         padding: 0px 0;
         display: block;
         background: #010C2A;
         border-radius: 5px;
         margin-top: 20px;
         width: 100%;
         margin-bottom: 40px;
     }

     .experience-box .box {
         padding-left: 25px;
         border-bottom: 1px solid #E8E8E9;
         border-right: 0px solid #E8E8E9;
         width: 100%;
         padding-right: 50px;
         /* margin: 0px auto 25px; */
         align-items: center;
         /* justify-content: center; */
         display: flex;
     }

     .experience-box .box .icon {
         margin: 10px 0;
     }

     .experience-box .box:nth-child(1) {
         padding-left: 30px;

     }

     .experience-box .box .box-couter p {
         margin-bottom: 20px;
         padding-left: 40px;
     }

     .experience-box .box .box-couter p::before {
         position: absolute;
         left: 26px;
         top: 2px;
         width: 4px;
         height: 20px;
         background: #00B0FC;
         content: "";
     }

     .experience-box .icon img {
         width: 80px;
         height: 80px
     }

     p.text-size-16 {
         margin-top: 10px;

     }

     .img-box {
         display: flex;
         justify-content: center
     }

     .img-box img {
         max-width: 25%;
         margin: 15px 0;
     }

     .subtitling-box h4 {
         font-size: 20px;
         margin-bottom: 0px;
     }

     .languages .box {
         border-radius: 5px;
         background: #fff;
         margin-top: 10%;
         padding: 40px 25px;
         margin-right: -5px;
     }

     .section-sub-title {
         margin: 15px 0;
     }

     .translation-img {
         display: none;
     }


     .layout {
         padding-right: 15px;
         padding-top: 25px;
         padding-left: 15px;
         margin-right: auto;
         margin-left: auto;
     }

     .bg-blue.pb-150,
     .bg-blue.pb-100 {
         display: none;
     }

     .get-in-touch {
         display: block;
         margin-top: 30px;

     }

     .image-video img.language.img-fluid {
         display: none;
     }

     .section-padding {
         padding: 50px 0;
     }

     .text-block,
     .text-block-2 {
         padding-top: 0px;
     }

     .section-sub-title h3 {
         padding: 0 20px;

     }

     .section-sub-title h3:before {
         display: none;
     }

     .site-header {
         padding-top: 5px;
     }

     .section-title {
         margin-bottom: 15px;
     }

     .section-title h2 {
         margin-bottom: 0;
         text-align: center;
         font-size: 20px;
         line-height: 1.3;
     }

     #digital-learning .why-box h2 {
         font-size: 18px !important;

         height: 2em;
         text-align: center;
     }

     #digital-learning .why-box {
         height: max-content;
         padding: 35px 18px;
         /* min-height: auto; */
         margin-bottom: 30px;


     }

     #digital-learning {
         padding: 0;
     }

     #digital-learning {
         padding: 0;
     }

     #digital-learning .p-0 {
         padding-right: 15px !important;
         padding-left: 15px !important;
     }

     .teams-img {
         display: none;
     }

     .content-box {
         padding: 80px 10px;
     }

     .localization-services .content {
         padding: 80px 30px;
     }

     .localization-services .container-fluid {
         display: flow-root;
         box-sizing: border-box;
         max-width: 1200px;
         margin-left: auto;
         margin-right: auto;
         padding-left: 15px;
         padding-right: 15px;
     }

     .localization-services .section-title h3 {
         margin-bottom: 35px;
         font-size: 15px;
         line-height: 1.3;
         color: #fff;
     }

     .localization-services .section-title h3:after {
         display: none;
     }

     .cta-box {
         padding: 25px 30px;
         text-align: left;
     }

     .voice-over .outer-box {
         background-color: #fff;
         border-radius: 20px;
         padding: 30px 35px 40px;
         height: 17.5em;
         margin-bottom: 25px;
     }

     .languages.sec-img:before {
         display: none;
     }

     .languages.sec-img:after {
         display: none;
     }

     .subscriber.section-pad-md {
         padding-top: 40px;
         padding-bottom: 190px;
     }

     .voiceover .subtitling-box {
         padding: 35px;
         margin-top: 40px;
         box-shadow: 0px 0px 100px 0px rgb(226 228 231);
         border-radius: 20px;
         border-left: 5px solid var(--e-global-color-white);
         background: #fff;
         height: 26em;
     }

     .voiceover .subtitling-box h4 {
         font-size: 16px;
         margin-bottom: 10px;
     }

     .dtp-service.section-pad-md {
         padding-top: 50px;
         padding-bottom: 80px
     }

     .voice-over .section-title.middle h3 {
         font-size: 20px;
     }

     .why-xiom-item-s2 h2 {
         display: block;
         font-weight: 600;
         font-size: 13px;
         line-height: 1.5;
     }

     .section-title h3:after {
         display: none;
     }

     .bg-blue.section-padding.pt-md-0.voice-over {
         padding: 0;
     }
 }


 @media screen and (min-width:250px) and (max-width:374px) {

     .experience,
     .teams,
     .communicate {
         display: flex;
         flex-direction: column-reverse;
     }

     .section-title h3 {
         text-align: center;
         margin-bottom: 0;
         font-size: 25px;
         line-height: 1.3;
     }

     .section-title h3:after {
         display: none;
         ;
     }

     .d-xs-block {
         display: block;
     }

     .section-content p {

         line-height: 26px;
     }

     .md-img-none {
         display: none;
     }

     .sec-img {
         max-width: 100%;
         margin: 10px 0 0 0;
         padding: 10px 0;
     }

     .sec-img img {
         width: 100%;
     }

     .team-box {
         margin-bottom: 20px;
     }

     .team-member img {
         width: 100%;
     }

     .management.container {
         max-width: 400px;
     }

     .management .section-title {
         margin-bottom: 15px;
     }

     .top-section-pad-lg {
         padding-top: 50px;
     }

     .icon-box.st2 {
         display: flex;
         align-items: center;
         justify-content: flex-start;
         background: transparent;
         padding: 0;
         width: 50%;
     }

     .section-innerpage {
         padding: 40px 0 20px;

     }

     .teams.sec-img:after {
         display: none;
     }

     .subtitling-box {
         padding: 35px;
         margin-top: 40px;
         box-shadow: 0px 0px 100px 0px rgb(226 228 231);
         border-radius: 20px;
         border-left: 5px solid var(--e-global-color-white);
         background: #fff;
         height: auto;
     }

     .popup {
         border: 1px solid #1756a0;
         padding: 15px;
         position: absolute;
         z-index: 2;
         margin-left: 14.4em;
         margin-top: 90px;
         border-radius: 4px;
     }

     .popup .play {
         display: flex;
         align-items: center;
         justify-content: center;
         background: #1756a0;
         width: 50px;
         height: 50px;
         border-radius: 4px;
     }

     .layout-right {
         padding: 0;
     }

     .experience-box {
         margin-left: 0px;
         padding: 0px 0;
         display: block;
         background: #010C2A;
         border-radius: 5px;
         margin-top: 20px;
         width: 100%;
         margin-bottom: 40px;
     }

     .experience-box .box {
         padding-left: 25px;
         border-bottom: 1px solid #E8E8E9;
         border-right: 0px solid #E8E8E9;
         width: 100%;
         padding-right: 50px;
         /* margin: 0px auto 25px; */
         align-items: center;
         /* justify-content: center; */
         display: flex;
     }

     .experience-box .box .icon {
         margin: 10px 0;
     }

     .experience-box .box:nth-child(1) {
         padding-left: 30px;

     }

     .experience-box .box .box-couter p {
         margin-bottom: 20px;
         padding-left: 40px;
     }

     .experience-box .box .box-couter p::before {
         position: absolute;
         left: 26px;
         top: 2px;
         width: 4px;
         height: 20px;
         background: #00B0FC;
         content: "";
     }

     .experience-box .icon img {
         width: 80px;
         height: 80px
     }

     p.text-size-16 {
         margin-top: 10px;

     }

     .img-box {
         display: flex;
         justify-content: center
     }

     .img-box img {
         max-width: 25%;
         margin: 15px 0;
     }

     .subtitling-box h4 {
         font-size: 20px;
         margin-bottom: 0px;
     }

     .languages .box {
         border-radius: 5px;
         background: #fff;
         margin-top: 10%;
         padding: 40px 25px;
         margin-right: -5px;
     }

     .section-sub-title {
         margin: 15px 0;
     }

     .translation-img {
         display: none;
     }

     .layout {
         padding-right: 15px;
         padding-top: 25px;
         padding-left: 15px;
         margin-right: auto;
         margin-left: auto;
     }

     .bg-blue.pb-150,
     .bg-blue.pb-100 {
         display: none;
     }

     .get-in-touch {
         display: block;
         margin-top: 30px;

     }

     .image-video img.language.img-fluid {
         display: none;
     }

     .section-padding {
         padding: 35px 0;
     }

     .text-block,
     .text-block-2 {
         padding-top: 0px;
     }

     .section-sub-title h3 {
         padding: 0 20px;

     }

     .section-sub-title h3:before {
         display: none;
     }

     .breadcrumb {
         background-color: transparent;
         justify-content: center;
     }

     .header-content {
         padding-top: 36px;
     }

     .logo {
         width: 160px;
         height: auto;
     }

     .site-header {
         padding-top: 5px;
     }

     .section-title {
         margin-bottom: 15px;
     }

     .section-title h2 {
         margin-bottom: 0;
         text-align: center;
         font-size: 20px;
         line-height: 1.3;
     }

     #digital-learning .why-box h2 {
         font-size: 14px !important;
         margin-bottom: 1.5em;
         height: 0em;
         text-align: center;
     }

     #digital-learning .why-box {
         height: auto;
         padding: 35px 18px;
         min-height: 42em;
         margin-bottom: 30px;


     }

     #digital-learning {}

     #digital-learning .p-0 {
         padding-right: 15px !important;
         padding-left: 15px !important;
     }

     .teams-img {
         display: none;
     }

     .content-box {
         padding: 80px 10px;
     }

     .localization-services .content {
         padding: 80px 30px;
     }

     .localization-services .container-fluid {
         display: flow-root;
         box-sizing: border-box;
         max-width: 1200px;
         margin-left: auto;
         margin-right: auto;
         padding-left: 15px;
         padding-right: 15px;
     }

     .localization-services .section-title h3 {
         margin-bottom: 35px;
         font-size: 15px;
         line-height: 1.3;
         color: #fff;
     }

     .localization-services .section-title h3:after {
         display: none;
     }

     .voice-over .outer-box {
         background-color: #fff;
         border-radius: 20px;
         padding: 20px 25px 30px;
         height: 15em;
         margin-bottom: 25px;
     }

     .languages.sec-img:before {
         display: none;
     }

     .languages.sec-img:after {
         display: none;
     }

     .subscriber.section-pad-md {
         padding-top: 40px;
         padding-bottom: 190px;
     }

     .voiceover .subtitling-box {
         padding: 15px 25px;
         margin-top: 40px;
         box-shadow: 0px 0px 100px 0px rgb(226 228 231);
         border-radius: 20px;
         border-left: 5px solid var(--e-global-color-white);
         background: #fff;
         height: 28em;

     }

     .voice-over .outer-box h2 {
         text-align: center;
         margin-bottom: 10px;
         font-size: 15px;
     }

     .voiceover .subtitling-box h4 {
         font-size: 12px;
         margin-bottom: 8px;
     }

     .dtp-service.section-pad-md {
         padding-top: 50px;
         padding-bottom: 80px
     }

     .voice-over .section-title.middle h3 {
         font-size: 20px;
     }

     .why-xiom-item-s2 h2 {
         display: block;
         font-weight: 600;
         font-size: 13px;
         line-height: 1.5;
     }

     .section-title h3:after {
         display: none;
     }

     .bg-blue.section-padding.pt-md-0.voice-over {
         padding: 0;
     }
 }



 /*------------------- Custom Style ------------------------------*/
 .section-title{
    margin-bottom: 20px !important;
 }
 .link{
    color: #0056b3 !important;
 }
 .link:hover{
    color: #2980b9 !important;
 }