/*==================================
Template Name: Reptro 
Description: Reptro is a Multipurpose Business Template.
Version: 1.0
====================================*/   
/* INDEX
----------------------------------------------------------------------------------------
0. Theme default CSS
1. Home One
    1.1 Header Top and Navigation css
    1.2 Home Slider  css
    1.3 Quick look Section  css
    1.4 About Us Css
    1.5 What We Offer css
    1.6 Happy Clients Css
    1.7 Testimonial Area Css
    1.8 All Team Member Css
    1.9 Latest Blog News Css
    1.10 Footer Top Area Css
    1.11 Footer Bottom Area Css

2. Home Page Sliders
    2.1 Home Slider css
    2.2 Home Slider css
    2.3 Home Slider css

3. About Us Page CSS
    3.1 About Us section Css
    3.2 Our Expert Team  Css
    3.3 Client Satisfaction Css
    3.4 FaQ css
    3.5 Client Logo css

4. Company History Page CSS
    4.1 Our History Section css
    4.2 1995 Section css
    4.2 2010 Section css
    4.2 2018 Section css

5. Services Page CSS
    5.1 Main Services Section css
    5.2 Middle Banner Area css
    5.2 Pricing Plane css
    

6. Service Single Page CSS
    6.1 Single Service css


7. Project Page CSS
    7.1 Main Project css

8. Project Details Page CSS
    8.1 Project details  css

9. Our Team Page CSS
    9.1 Chairman section css
    9.2 Our Expert section css
    9.3 Join The Team section css

10. Team Member Details Page CSS
    10.1 Member Details css
    10.2 Recent Works css

11. Blog List Page CSS
    11.1 Blog list section css
    
12. Blog Grid Page CSS
    12.1 Blog Grid section css
    

13. Single Blog Page CSS
    13.1 Single Blog Section css

14. Contact Page CSS
    14.1 Cotact Address Section css
    14.2 Map Section css
    14.3 Form  Section css


-------------------------------------------------------------------------------------- */
/*----------------------------------------*/
/*  0. Theme default CSS
/*----------------------------------------*/
/*-- Common Style --*/
*, *::after, *::before {
  -webkit-box-sizing: border-box;
  box-sizing: border-box; 
}
html, body {
  height: 100%; 
}
a:hover{color: #18ba60}
body {
  background-color: #ffffff;
  line-height: 24px;
  font-size: 16px;
  font-style: normal;
  font-weight: normal;
  font-family: 'Open Sans', sans-serif;
  color: #777777; 
}
img{max-width: 100%;display: block;}
h1, h2, h3, h4, h5, h6 {
  color: #000;
 font-family: 'Roboto Slab', serif;
  font-weight: 400;
  margin-top: 0; 
}
h1 {
  font-size: 36px;
  line-height: 42px; 
}
h2 {
  font-size: 32px;
  line-height: 36px; 
}
h3 {
  font-size: 24px;
  line-height: 30px; 
}
h4 {
  font-size: 18px;
  line-height: 24px; 
}
h5 {
  font-size: 14px;
  line-height: 18px; 
}
h6 {
  font-size: 12px;
  line-height: 14px; 
}
p:last-child {
  margin-bottom: 0; 
}
p{color: #777777;line-height: 27px}
a{color: #fff}
a, button {
  color: inherit;
  display: inline-block;
  line-height: inherit;
  text-decoration: none;
  cursor: pointer; 
}
a, button, img, input, span {
  -webkit-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s; 
}
*:focus {
  outline: none !important; 
}
.btn:focus {
  outline: none;
}
.btn-primary.focus, .btn-primary:focus {
-webkit-box-shadow: none!important;
box-shadow: none!important;
}
.call-back-form button.call-back-btn:focus {
-webkit-box-shadow: none!important;
box-shadow: none!important;
}
.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle {
    color: #fff;
    background-color: #18ba60;
    border-color: #18ba60;
}
a:focus {
  color: inherit;
  outline: none;
  text-decoration: none; 
}
a:hover {
  text-decoration: none;
}
button, input[type="submit"] {
  cursor: pointer; 
}
ul {
  list-style: outside none none;
  margin: 0;
  padding: 0; 
}
.btn.repto-btn {
  background: #18ba60;
  text-transform: uppercase;
  font-size: 16px;
  padding: 10px 30px;
  display: inline-block;
  border-radius: 30px;
  margin-right: 30px;
  border: 2px solid #18ba60;color: #fff
}
.slider-one-item a.repto-transparent {
  background: transparent;
  border: 2px solid #fff;color: #fff
}
.btn:focus{
    box-shadow:none !important;
}
/*-- 
    - Common Classes
-----------------------------------------*/
.fix {
  overflow: hidden; 
}
.hidden {
  display: block; 
}
.clear {
  clear: both; 
}
.capitalize {
  text-transform: capitalize; 
}
.uppercase {
  text-transform: uppercase; 
}
/*Custom Padding Style */
.space-padding{ padding: 160px 0;}
.pt-160 {
  padding-top: 160px;
}
.pt-100{padding-top:75px}
.pb-100{padding-bottom:75px}
.pt-130{padding-top:130px}
.pb-130{padding-bottom: 130px }
.pt-125{padding-top:125px;}
.pt-80{padding-top: 80px}
.pt-85{padding-top: 85px}
.pt-90{padding-top: 90px}
.pt-300 {
  padding-top: 300px;
}
.pt-35 {
  padding-top: 35px;
}
.pt-25 {
  padding-top: 0px;
}
.pt-45 {
  padding-top: 45px;
}
.pt-50 {
  padding-top: 50px;
}
.pt-10 {
  padding-top: 10px;
}
.pt-30 {
  padding-top: 30px;
}
.pt-55 {
  padding-top: 55px;
}
.pb-50 {
  padding-bottom: 50px;
}
.pb-140 {
  padding-bottom: 140px;
}
.pt-145 {
  padding-top: 145px;
}
.pt-150 {
  padding-top: 150px;
}
.pb-150 {
  padding-bottom: 150px;
}
.no-padding{padding-left: 0px;padding-right: 0px}
/*Desktop Devices Css*/
#moble-device-section{display: none}
.form-desktop{display: block}
.form-mobile{display: none}
/*Default Page Titlte*/
.section-default-title{}
.section-default-title h2::before {
  position: absolute;
  content: "";
  background: #252726;
  height: 5px;
  left: 0;
  width: 80px;
  border-radius: 5px;
  top: 43%;
}
.section-default-title h2::after {
  position: absolute;
  content: "";
  background: #252726;
  height: 5px;
  right: 0;
  width: 80px;
  border-radius: 5px;
  top: 46%;
}
.section-default-title h2 {
  font-size: 32px;
  font-weight: 400;
  color: #000000;
  line-height: 25px;
  position: relative;
  width: 50%;
  text-align: center;
  margin: 0px auto;
  margin-bottom: 24px;
}
.section-default-title p {
  letter-spacing: 1px;
  line-height: 24px;
}
/*Default Home Page Titlte*/
.section-default-title-second h2::after {
  position: absolute;
  content: "";
  background: #18ba60;
  height: 3px;
  right: 0;
  width: 80px;
  border-radius: 5px;
  left: 0;
  text-align: center;
  display: block;
  margin: 0px auto;
  bottom: -24px;
}
.section-default-title-second h2 {
  font-size: 32px;
  font-weight: 400;
  color: #000000;
  line-height: 42px;
  position: relative;
  text-align: center;
  margin: 0px auto;
  margin-bottom: .5rem;
  line-height: 25px;
}
/*----------------------------------------*/
/*  scroll-top-top css
/*----------------------------------------*/
.scroll-top-top {
    background-color: #11954b;
    bottom: 15px;
    right: 20px;
    position: fixed;
    width: 50px;
    height: 50px;
    cursor: pointer;
    display: none;
    z-index: 129;
    border-radius: 5px 5px 0 0px;
}
.scroll-top-top i {
    color: #fff;
    text-align: center;
    display: block;
    font-size: 20px;
    padding-top: 15px;
}
/*----------------------------------------*/
/*  Preloader Css
/*----------------------------------------*/
#loading {
  background-color: #fff;
  height: 100%;
  width: 100%;
  position: fixed;
  z-index: 999999;
  margin-top: 0px;
  top: 0px;
}
#loading-center{
  width: 100%;
  height: 100%;
  position: relative;
  }
#loading-center-absolute {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 200px;
  width: 200px;
  margin-top: -100px;
  margin-left: -100px;  
}
.object{
    -moz-border-radius: 50% 50% 50% 50%;
  -webkit-border-radius: 50% 50% 50% 50%;
  border-radius: 50% 50% 50% 50%;
  position: absolute;
  border-left: 5px solid #18ba60;
  border-right: 5px solid #18ba60;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  -webkit-animation: animate 2s infinite;
  animation: animate 2s infinite; 
}
#object_one{
  left: 75px;
  top: 75px;
  width: 50px;
  height: 50px;
}              
#object_two{
  left: 65px;
  top: 65px;
  width: 70px;
  height: 70px;
  -webkit-animation-delay: 0.1s;
    animation-delay: 0.1s;
}
#object_three{
  left: 55px;
  top: 55px;
  width: 90px;
  height: 90px;
  -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
}
#object_four{
  left: 45px;
  top: 45px;
  width: 110px;
  height: 110px;
  -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
  
} 
@-webkit-keyframes animate {

50% {
  -ms-transform: rotate(180deg); 
    -webkit-transform: rotate(180deg); 
    transform: rotate(180deg); 
  }
    
100% {
  -ms-transform: rotate(0deg); 
    -webkit-transform: rotate(0deg); 
    transform: rotate(0deg); 
  }   
}
@keyframes animate {

50% {
  -ms-transform: rotate(180deg); 
    -webkit-transform: rotate(180deg); 
    transform: rotate(180deg); 
  }
    
100% {
  -ms-transform: rotate(0deg); 
    -webkit-transform: rotate(0deg); 
    transform: rotate(0deg); 
  }
  
}

/*About Us Page Default Title*/
.section-default-about-us-title{}
.section-default-about-us-title h2::before {
  position: absolute;
  content: "";
  background: #18ba60;
  height: 5px;
  left: 0;
  width: 80px;
  border-radius: 5px;
  top: 43%;
}
.section-default-about-us-title h2::after {
  position: absolute;
  content: "";
  background: #18ba60;
  height: 5px;
  right: 0;
  width: 80px;
  border-radius: 5px;
  top: 46%;
}
.section-default-about-us-title h2 {
  font-size: 32px;
  font-weight: 400;
  color: #000000;
  line-height: 25px;
  position: relative;
  width:40%;
  text-align: center;
  margin: 0px auto;
  margin-bottom: .5rem;
}
.section-default-about-us-title p{letter-spacing: 1px}
/*Customer section Background */
.section-bg-white{background-color: #fff}
.section-bg-gray{background-color: #f8f9ff}
.slider1-bg-opacity {
  background: #000;
  width: 100%;
  height: 100%;
  position: absolute;
  opacity: 0.15;
}
.counter-bg-opacity {
  background: #000;
  width: 100%;
  height: 100%;
  position: absolute;
  opacity: 0.65;
}
/*Default Breadcrumb Css*/
#default-breadcrumb {
    background: url(../images/normal/breadcrumb.jpg) no-repeat center center ;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 302px;
    position: relative;
}
.breadcrumb-opacity {
    background-color: #000000;
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0.5;
    filter: alpha(opacity=50); /* For IE8 and earlier */
}
.default-breadcrumb-title {
  padding-top: 122px;
  position: relative;
}
.default-breadcrumb-title h4 {
  font-size: 36px;
  color: #fff;
  font-weight: 400;
  text-transform: uppercase;
  position: relative;
}
.default-breadcrumb-title ul.breadcrumb-list {
  margin: 0;
  padding: 0px;
  list-style: none;
  padding-top: 10px;
}
.default-breadcrumb-title ul.breadcrumb-list li{display: inline-block;line-height: 24px}
.default-breadcrumb-title ul.breadcrumb-list li a {
/*  display: block;*/
  font-size: 16px;
  color: #c6c6c6;
  text-decoration: none;
  padding: 0px 10px 0px 0px;
}
.default-breadcrumb-title ul.breadcrumb-list li a:hover{color: #fff}
.default-breadcrumb-title ul.breadcrumb-list li.active{color: #fff}
.default-breadcrumb-title ul.breadcrumb-list li.active a {
  color: #fff;
  padding-right: 0;
}
.breadcrumb-list li + li::before {
  color: #c6c6c6;
  content: "/";
  padding: 0 12px 0px 0px;
  font-size: 16px;
}
/*----------------------------------------*/
/* 1. Home One
    1.1 Header Top css
/*----------------------------------------*/
.header-top {
  background-color: #252726;
  padding-top: 10px;
  padding-bottom: 10px;
}
.office-time{}
.office-time span:first-child{margin-left: 0px}
.office-time span{margin-left: 10px}
.office-time span i{color: #c6c6c6;margin-right: 10px}
.office-time p {
    color: #c6c6c6;
    font-size: 14px;
    text-transform: uppercase;
}
.login-register{position: relative;}
.login-register ul{margin:0;padding: 0;list-style: none}
.login-register ul li {
    float: left;
    padding-right: 14px;
    line-height: 22px;
}
.login-register ul li::before {
    position: absolute;
    content: "/";
    width: 10px;
    height: 10px;
    left: 51%;
    right: 0;
    color: #c6c6c6;
}
.login-register ul li:last-child{
  padding-right: 0px;
}
.login-register ul li span i {
  color: #c6c6c6;
  padding-right: 10px;
}
.login-register ul li a {
  color: #c6c6c6;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 14px;
  list-style: none;
  display: inline-block;
}
.login-register ul li a:hover{color: #fff}

/*Naviation css*/
.header-bottom {
  position: relative;
  background-color: #ffffff;
  /*---- Sticky Header ----*/ }
.header-bottom.is-sticky {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    background-color: #ffffff;
    -webkit-animation: 300ms ease-in-out 0s normal none 1 running fadeInDown;
    animation: 300ms ease-in-out 0s normal none 1 running fadeInDown;
    -webkit-box-shadow: 0 10px 15px rgba(25, 25, 25, 0.1);
    box-shadow: 0 10px 15px rgba(25, 25, 25, 0.1);
    z-index: 123; }
.header-bottom.is-sticky nav {
  line-height: 14px; padding-top: 22px;
  padding-bottom: 22px;
}
#main-header .is-sticky .nav li a{padding: 32px 0;  -moz-transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;}
#main-header .is-sticky .logo {
  padding-top: 30px;  -moz-transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
#main-header .is-sticky .nav li.top-support:last-child {
  margin: 0;
  margin-top: 20px;margin-bottom:20px; -moz-transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
#main-header .is-sticky .nav li .dropdown li a {
  padding: 15px 15px; -moz-transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
/*-- Sticky Animation --*/
@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0); }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none; } }

@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0); }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none; } }

.header-bottom nav {
  padding-top: 25px;
  padding-bottom: 24px;
}
.logo {
  padding-top: 38px;
}
.logo img{max-width: 100%}
/* Main Menu */
#main-header .main-menu {
  position:relative;
}
#main-header .navbar {
  float: right;
  padding: 0;
}
#main-header .nav li {
  margin-right: 36px;
  position: relative;
}
#main-header .nav li:last-child {
    margin: 0;
    margin-top:0px;margin-bottom:0px
}
#main-header .nav li a {
  text-transform: uppercase;
  color: #333333;
  position: relative;
  -moz-transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  display: block;
  background: transparent;
  border-radius:0px;
  padding: 28px 0;
}
#main-header .nav li.top-support a {
  display: block;
  background: #18ba60;
  color: #fffffe;
  font-size: 16px;
  text-transform: uppercase;
  padding: 13px 40px;
  border-radius: 60px;
  font-weight: 600;position: relative;
}
#main-header .nav li:last-child.top-support a:hover{background-color: #11954b;color: #fff !important}
#main-header .nav li.active a, 
#main-header .nav li:hover a {
color: #18ba60 
}
#main-header .nav li .dropdown li.active a{
background-color: #18ba60;color:#fff;
}
#main-header .nav li a::before {
  position: absolute;
  top: -1px;
  left: 0;
  width: 0%;
  height: 2px;
  content: "";
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  opacity: 0;
  visibility: hidden;
}
#main-header .nav li.active a:before,
#main-header .nav li:hover a:before{
  width:100%;
  opacity:1;
  visibility:visible;
}
#main-header .nav li a i{
  margin-left:5px;
}
#main-header .nav .dropdown {
  position: absolute;
  left: 0;
  width: 220px;
  z-index: 99;
  background: #fff;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  opacity: 0;
  visibility: hidden;
  -webkit-transform:translate(50px, 50px);
  -moz-transform:translate(50px, 50px);
  transform:translate(50px, 50px);
  -webkit-box-shadow: 0px 0px 5px #0000004d;
  -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.30);
  box-shadow: 0px 0px 5px #0000004d;
  visibility: hidden;
  top: 100%;
}
#main-header .nav li:hover .dropdown{
  opacity:1;
  visibility:visible;
  transform:translateX(0px);
}
#main-header .nav .dropdown li {
  display: block;
  width: 100%;
  margin: 0;
  float: none;
}
#main-header .nav li .dropdown li a {
  color: #333333;
  padding: 10px 15px;
  text-transform: capitalize;
  border-radius: 0px;
  font-weight: 400;
  border-bottom: 1px solid #e7e7e7;
}
#main-header .nav li .dropdown li:last-child a{
  border-bottom:0px;
}
#main-header .nav li .dropdown li a:hover {
  color: #fff;
  padding-left:25px;
  border-color:transparent;background-color: #18ba60 
}
#main-header .nav li .dropdown li a:before{
  display:none;
}
/*Mobile Menu CSS*/


/*! #######################################################################

  MeanMenu 2.0.7
  --------

  To be used with jquery.meanmenu.js by Chris Wharton (http://www.meanthemes.com/plugins/meanmenu/)

####################################################################### */

/* hide the link until viewport size is reached */
a.meanmenu-reveal {
  display: none;
}
/* when under viewport size, .mean-container is added to body */
.mean-container .mean-bar {
  float: left;
  width: 100%;
  position: relative;
/*  padding: 4px 0;*/
  min-height: 42px;
  z-index: 123;
}
.mean-container a.meanmenu-reveal {
    width: 22px;
    height: 22px;
    padding: 13px 13px 11px 13px;
    position: absolute;
    top: 22px;
    /*right: 25px !important;*/
    cursor: pointer;
    color: #fff;
    text-decoration: none;
    font-size: 16px;
    text-indent: -9999em;
    line-height: 22px;
    font-size: 1px;
    display: block;
    font-weight: 700;
}
.mean-container a.meanmenu-reveal span {
  display: block;
  background: #fff;
  height: 3px;
  margin-top: 3px;
}
.mean-container .mean-nav {
  float: left;
  width: 100%;
  margin-top: 44px;
}
.mean-container .mean-nav ul {
  padding: 0;
  margin: 0;
  width: 100%;
  list-style-type: none;
}
.mean-container .mean-nav ul li {
  position: relative;
  float: left;
  width: 100%;
}
.mean-container .mean-nav ul li a {
  display: block;
  float: left;
  width: 90%;
  padding: 1em 5%;
  margin: 0;
  text-align: left;
  color: #fff;
  border-top: 1px solid #383838;
  border-top: 1px solid rgba(255,255,255,0.5);
  text-decoration: none;
  text-transform: uppercase;
}
.mean-container .mean-nav ul li li a {
  width: 80%;
  padding: 1em 10%;
  border-top: 1px solid #f1f1f1;
  border-top: 1px solid rgba(255,255,255,0.25);
  opacity: 0.75;
  filter: alpha(opacity=75);
  text-shadow: none !important;
  visibility: visible;
}
.mean-container .mean-nav ul li.mean-last a {
  border-bottom: none;
  margin-bottom: 0;
}
.mean-container .mean-nav ul li li li a {
  width: 70%;
  padding: 1em 15%;
}
.mean-container .mean-nav ul li li li li a {
  width: 60%;
  padding: 1em 20%;
}
.mean-container .mean-nav ul li li li li li a {
  width: 50%;
  padding: 1em 25%;
}
.mean-container .mean-nav ul li a:hover {
  background: #252525;
  background: rgba(255,255,255,0.1);
}
.mean-container .mean-nav ul li a.mean-expand {
  margin-top: 1px;
  width: 26px;
  height: 32px;
  padding: 12px !important;
  text-align: center;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 2;
  font-weight: 700;
  background: rgba(255,255,255,0.1);
  border: none !important;
  border-left: 1px solid rgba(255,255,255,0.4) !important;
  border-bottom: 1px solid rgba(255,255,255,0.2) !important;
}
.mean-container .mean-nav ul li a.mean-expand:hover {
  background: rgba(12, 105, 53, 0.46);
}
.mean-container .mean-push {
  float: left;
  width: 100%;
  padding: 0;
  margin: 0;
  clear: both;
}
.mean-nav .wrapper {
  width: 100%;
  padding: 0;
  margin: 0;
}
/* Fix for box sizing on Foundation Framework etc. */
.mean-container .mean-bar, .mean-container .mean-bar * {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}
.mean-remove {
  display: none !important;
}

/*----------------------------------------*/
/* 1. Home One
    Quick look Section  css
/*----------------------------------------*/
.quick-look-section {
  border: 1px solid #D8D8D8;
  padding: 30px;
  border-radius: 4px;position: relative;
}
.quick-look-item{}
.quick-look-item h2 {
  margin-top:50px;
  font-size: 24px;
  color: #18ba60;
  font-weight: 400;
  text-align: center;
  display: block;
  margin-bottom: 20px;
  line-height: 25px;
}
.quick-look-item p {
  font-size: 16px;
  color: #777777;
  line-height: 27px;
}
.quick-icon {
  position: absolute;
  left: 0;
  right: 0;
  top: -20%;text-align: center;
}
.quick-icon span {
  border: 1px solid #ccc;
  display: inline-block;
  border-radius: 90px;
  width: 94px;
  height: 94px;
  background: #fff;
}
.quick-icon span i::before {
  font-size:40px;
  color: #18ba60;
  text-align: center;
  margin: 0px auto;
  display: block;
  padding-top: 36px;line-height: 22px;
}
div.quick-look-section:hover{
    -webkit-box-shadow: 0px 0px 35px 0px rgba(232, 232, 232, 0.9);
-moz-box-shadow: 0px 0px 35px 0px rgba(232, 232, 232, 0.9);
box-shadow: 0px 0px 35px 0px rgba(232, 232, 232, 0.9);-webkit-transition: all 0.55s ease;
  -o-transition: all 0.55s ease;
  transition: all 0.55s ease;cursor: crosshair;border: 1px solid #fff;
}
div.quick-look-section:hover .quick-icon span{color: #fff;background-color: #18ba60;
-webkit-transition: all 0.55s ease;
  -o-transition: all 0.55s ease;
  transition: all 0.55s ease;
}
div.quick-look-section:hover .quick-icon span i::before{color: #fff;
-webkit-transition: all 0.55s ease;
  -o-transition: all 0.55s ease;
  transition: all 0.55s ease;
}

/*----------------------------------------*/
/* 1. Home One
    1.4 About Us Css
/*----------------------------------------*/
.about-us-left{}
.about-us-left h2 {
  font-size: 29px;
  color: #000000;
  line-height: 25px;
  font-weight: 400;
  margin-bottom: 32px;
}
.about-us-left a{}
.about-us-right{}
.about-us-left a {
  text-decoration: none;
  color: #02137a;
  font-weight: 600;
  font-size: 16px;
  display: inline-block;
}
.about-us-left a span i {
  color: #18ba60;
  margin-left: 8px;
}
.about-us-right {
  position: relative;
  margin-top: 15px;
}
.about-us-right img {
  display: block;
  border-radius: 6px;
  position: relative;
}
.about-us-right::before {
  content: '';
  border: 20px solid #78e6a9;
  background: none;
  position: absolute;
  top: -15px;
  right: -15px;
  width: 100%;
  height: 100%;
  border-radius: 6px;
}
.about-us-right a.icon-video {
  position: absolute;
  border-radius: 50px;
  border: 7px solid #dcdcdc;
  padding: 10px;
  width: 60px;
  height: 60px;
  background: #FFF;
  color: #18ba60;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: inline-block;
  text-align: center;
  z-index: 12;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.about-us-right:hover:after {
  background-color: #18ba60cc;
}
.about-us-right:after {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    content: "";
    transition: .4s;
/*    background-color: rgba(0, 52, 69, .85);*/
border-radius: 6px;
}
.about-us-right a.icon-video:hover {
  background: #18ba60;
  color: #FFF;  -webkit-transition: 0.3s;
  transition: 0.3s;
}

/*----------------------------------------*/
/* 1. Home One
    1.5 What We Offer css
/*----------------------------------------*/
.offer-item-section {
  border: 1px solid #D8D8D8;
  padding: 30px 21px 30px 21px;
  border-radius: 4px;
  position: relative;
}
.offer-item{}
.offer-item h2 {
  margin-top: 0px;
  font-size: 24px;
  color: #333;
  font-weight: 400;
  text-align: center;
  display: block;
  margin-bottom: 22px;
}
.offer-item p {
  font-size: 16px;
  color: #777777;
  line-height: 27px;
  margin-bottom: 20px;
}
.quick-icon-offer {
  position: absolute;
  left: 0;
  right: 0;
  top: -12%;text-align: center;
}
.quick-icon-offer span {
  border: 1px solid #ccc;
  display: inline-block;
  border-radius: 10px;
  width: 70px;
  height: 70px;
  background: #fff;
}
.quick-icon-offer span i::before {
  font-size: 40px;
  color: #ACACAC;
  text-align: center;
  margin: 0px auto;
  display: block;
  padding-top: 15px;
  line-height: 40px;
}
div.offer-item-section:hover{
    -webkit-box-shadow: 0px 0px 35px 0px rgba(232, 232, 232, 0.9);
-moz-box-shadow: 0px 0px 35px 0px rgba(232, 232, 232, 0.9);
box-shadow: 0px 0px 35px 0px rgba(232, 232, 232, 0.9);-webkit-transition: all 0.55s ease;
  -o-transition: all 0.55s ease;
  transition: all 0.55s ease;border: 1px solid #fff;
}
div.offer-item-section:hover .offer-item h2{color: #02137a;
-webkit-transition: all 0.55s ease;
  -o-transition: all 0.55s ease;
  transition: all 0.55s ease;
}
div.offer-item-section:hover .quick-icon-offer span{color: #fff;background-color: #18ba60;
-webkit-transition: all 0.55s ease;
  -o-transition: all 0.55s ease;
  transition: all 0.55s ease;
}
div.offer-item-section:hover .quick-icon-offer span i::before{color: #fff
;
-webkit-transition: all 0.55s ease;
  -o-transition: all 0.55s ease;
  transition: all 0.55s ease;
}
.offer-item a {
  color: #333333;
  font-size: 16px;
  font-weight: 600;
}
div.offer-item-section:hover .offer-item a{color: #02137a;
-webkit-transition: all 0.55s ease;
  -o-transition: all 0.55s ease;
  transition: all 0.55s ease;
}
/*----------------------------------------*/
/* 1. Home One
    1.6 Happy Clients Area
/*----------------------------------------*/
#counter-area {
  background: url(../images/normal/counter-bg.jpg) no-repeat center center;
  background-size: cover;
  height: 100%;
  width: 100%;
  position: relative;
}
.conter-item{}
#counter-area .conter-item .counter {
  color: #fff;
  font-size: 36px;
  font-weight: 700;
  line-height: 50px;
  text-align: center;
  display: block;
}
#counter-area .conter-item span i::before {
    color: #fff;
    font-size: 40px;
    display: block;
    text-align: center;
    margin-left: 0px;
    margin-bottom: 15px;
    line-height: 42px;
    margin-top: 0px;
}
#counter-area .conter-item p{font-size:18px;line-height: 28px;color: #fff;text-align: center;font-weight: 400}
.conter-item .counter {
  color: #fff;
  font-size: 36px;
  font-weight: 700;
  line-height: 50px;
  text-align: center;
  display: block;
}
.conter-item span i::before {
    color: #fff;
    font-size: 40px;
    display: block;
    text-align: center;
    margin-left: 0px;
    margin-bottom: 15px;
    line-height: 42px;
    margin-top: 8px;
}
.conter-item p{font-size:18px;line-height: 28px;color: #fff;text-align: center;font-weight: 400}
/*----------------------------------------*/
/* 1. Home One
    1.7 Testimonial Area Css
/*----------------------------------------*/
/*----------------------------------------*/
.testimonial-area {
  position: relative;
}
#testimonial .owl-item {
  background-color: #18ba60;
  border-radius: 5px;
}
.right-position{position: relative;}
.testimoni {
  position: absolute;
  background: #18ba60;
  width: 80%;
  z-index: 12;
  top: -198px;
  -webkit-box-shadow: 0 25px 32px rgba(184, 184, 184, 0.3);
  -moz-box-shadow: 0 25px 32px rgba(184, 184, 184, 0.3);
  box-shadow: 0 25px 32px rgba(184, 184, 184, 0.3);
  margin: 20px auto;
  left: 0;
  right: 0;
  border-radius: 5px;
}
.client-info {
  padding-left: 100px !important;
  padding-right:  20px !important;
  padding-top: 130px !important;position: relative;
}
.client-info::before {
  position: absolute;
  content: '';
  background: url('../images/normal/arrow.png') no-repeat center center;
  width: 66px;
  height: 56px;
  left: 6%;
  top: 12%;
}
.client-info p{color: #fff}
.client-info span strong{font-size: 18px;color: #fff;font-weight: 600}

#testimonial .client-photo img {
  display: block;
  width: 100%;
  border-radius: 5px 0px 0 0px;
}
#testimonial .owl-nav {
  position: absolute;
  z-index: 12;
  right: 0;
  bottom: 0%;
  background-color: #fff;
  display: block;
}
#testimonial .owl-nav button.owl-next{color:#18ba60;}
#testimonial .owl-nav button.owl-next i{color:#18ba60;font-size: 35px}
#testimonial .owl-nav button.owl-prev{color:#18ba60;}
#testimonial .owl-nav button.owl-prev i{color:#18ba60;font-size: 35px}
#testimonial .owl-nav [class*="owl-"]:hover{background: transparent;}

/* 1. Home One
    1.8 All Team Member Css
/*----------------------------------------*/
.team-item{position: relative;}
.team-thumb{}
.team-thumb img {
  display: block;
  margin: 0px auto;
  border-radius: 8px;
  max-width: 100%;
}
.team-info-caption {
  background-color: #fff;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -13%;
  width: 90%;
  margin: 0px auto;
  border-radius: 5px;
  padding: 10px;
    -webkit-box-shadow: 0 5px 25px rgba(127, 127, 127, 0.15);
-moz-box-shadow: 0 5px 25px rgba(127, 127, 127, 0.15);
box-shadow: 0 5px 25px rgba(127, 127, 127, 0.15);
}
.team-info-caption h4 {
  font-size: 18px;
  color: #333333;
  line-height: 28px;
  margin-bottom: 0;
}
.team-info-caption p{color: #777777;font-size: 16px;line-height:27px}

div.team-item:hover .team-info-caption{color: #fff;background-color: #18ba60;
-webkit-transition: all 0.55s ease;
  -o-transition: all 0.55s ease;
  transition: all 0.55s ease;
}
div.team-item:hover .team-info-caption h4{color: #fff;
-webkit-transition: all 0.55s ease;
  -o-transition: all 0.55s ease;
  transition: all 0.55s ease;
}
div.team-item:hover .team-info-caption p{color: #fff;
-webkit-transition: all 0.55s ease;
  -o-transition: all 0.55s ease;
  transition: all 0.55s ease;
}
.team-item:hover:before {
    background-color: #18ba6099;
}
.team-item:before {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    content: "";
    transition: .4s;
/*    background-color: rgba(0, 52, 69, .85);*/
border-radius: 6px;
}

/*
Request a Call Back*/
.padding-0{padding-left: 0px}
#request-call-back{padding-top: 40px
;padding-bottom: 40px}
.person-avatar{}
.person-avatar span i::before {
  color: #18ba60;
  font-size: 100px;
  display: block;
  text-align: center;
  line-height: 100px;
  line-height: 118px;
}
.call-back-form{}
.call-back-form h1 {
  font-size: 32px;
  color: #000000;
  margin-bottom: 20px;
}
.call-back-form input[type="text"] {
  border-radius: 35px;
  padding: 0 19px;
}
.call-back-form input[type="email"]{  border-radius: 35px;
  padding: 0 19px;}
.call-back-form select {
  display: block;
  border-radius: 35px;
  height: 38px;
  padding-left: 15px;
  margin-top: 61px;
}
.call-back-form input[type=text]:focus, input[type=email]:focus, .call-back-form select:focus {
  -webkit-transition: all 0.30s ease-in-out;
  -moz-transition: all 0.30s ease-in-out;
  -ms-transition: all 0.30s ease-in-out;
  -o-transition: all 0.30s ease-in-out;
  outline: none;
  border: 1px solid #18ba60;
  box-shadow: none;
  -webkit-box-shadow: none;
}
.call-back-form button.call-back-btn {
  background: #18ba60;
  border: none;
  font-size: 16px;
  text-transform: uppercase;
  display: block;
  padding: 7px 28px;
  border-radius: 50px;
  margin-top: 61px;
  font-weight: 600;
}
/* 1. Home One
    1.9 Latest Blog News Css
/*----------------------------------------*/
#latest-blog-area{}
.blog-item{}
.blog-thumb {
  margin-bottom: 25px;
  overflow: hidden;
}
.blog-thumb img {
  display: block;
  border-radius: 6px;
  max-width: 100%;
  overflow: hidden;
}
.blog-details{}
.blog-details h3 a{color: #333333;font-size: 22px;}
.blog-details p{}
.blog-details a.read-more{color: #333333;font-size: 16px;text-decoration: none;font-weight: 600}
.blog-details a span i{}
.meta-info{}
.meta-info ul {
  margin: 0px;
  padding: 0px;
  list-style: none;
}
.meta-info ul li {
  float: left;
  margin-right: 25px;
}
.meta-info ul li a {
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  list-style: none;
}
.meta-info ul li span i {
  padding-right: 5px;color: #18ba60
}

#latest-blog-area .blog-item:hover .blog-details a.read-more{color:#18ba60;-webkit-transition: all 0.55s ease;
  -o-transition: all 0.55s ease;
  transition: all 0.55s ease}

#latest-blog-area .blog-item:hover .blog-details h3 a{color:#18ba60;-webkit-transition: all 0.55s ease;
  -o-transition: all 0.55s ease;
  transition: all 0.55s ease}

/*Looking For A consultant*/

#looking-consultant{
  padding-top: 40px;
  padding-bottom: 40px;
}
.submit-ticket{}
.submit-ticket h2 {
  color: #333333;
  font-size: 32px;
  line-height: 50px;
  margin-bottom: 0;
}
.submit-ticket a{}
.submit-ticket a.submit-ticket-btn {
  background: #18ba60;
  border: none;
  font-size: 16px;
  text-transform: uppercase;
  display: inline-block;
  padding: 14px 32px;
  border-radius: 50px;
  margin-top: 0;
  font-weight: 600;color: #fff
}
.submit-ticket a.submit-ticket-btn:hover{color:#fff;background:#11954b;-webkit-transition: all 0.55s ease;
  -o-transition: all 0.55s ease;
  transition: all 0.55s ease}

/*----------------------------------------*/
/* 1. Home One
    1.10 Footer Top Area
/*----------------------------------------*/
#footer-top{background-color: #162336}
.footer-widget{}
.footer-widget h3 {
  font-size: 18px;
  color: #fff;
  font-weight: 400;
  line-height: 25px;
  text-transform: uppercase;
  margin-bottom: 40px;
  line-height: 12px;
}
.footer-widget p {
  font-size: 16px;
  line-height: 27px;
  color: #c6c6c6;
  margin-bottom: 30px;
}
.footer-widget ul{margin:0px;padding: 0px;list-style: none}
.footer-widget ul li{float: none}
.footer-widget ul li a {
  color: #c6c6c6;
  font-size: 16px;
  line-height: 32px;
  display: block;
  text-decoration: none;
}
.footer-widget ul li a:hover{color: #fff;-webkit-transition: all 0.55s ease;
  -o-transition: all 0.55s ease;
  transition: all 0.55s ease}
.footer-logo {
  margin-bottom: 33px;
}
.footer-logo img{display: block;max-width: 100%}
.widget-info{position: relative;}
.widget-info p{  font-size: 16px;
  line-height: 27px;
  color: #c6c6c6;
  margin-bottom: 30px;}
.widget-info ul{margin:0px;padding: 0px;list-style: none}
.widget-info ul li{float: left;}
.widget-info ul li a {
  display: block;
  padding: 0px 8px;
  border: 1px solid #fff;
  margin-right: 12px;color: #fff;text-decoration: none
}
.widget-info ul li a span i{color: #fff}
.widget-info ul li a:hover span i{color: #18ba60;-webkit-transition: all 0.55s ease;
  -o-transition: all 0.55s ease;
  transition: all 0.55s ease}
.widget-info ul li a:hover{  border: 1px solid #18ba60;-webkit-transition: all 0.55s ease;
  -o-transition: all 0.55s ease;
  transition: all 0.55s ease}
.subscribe-here{position: relative;}
.subscribe-here span {
  padding: 5px 18px;
  background-color: #18ba60;
  position: absolute;
  right: 4px;
  top: 0;
  margin-top: 3px;
  border-radius: 42px;
  cursor: pointer;
}
.subscribe-here span i {
  color: #fff;
  font-size: 25px;
  text-align: center;
  margin: 0px auto;
  padding-top: 2px;
  display: block;
}
.subscribe-here input[type="email"] {
  border-radius: 35px;
  padding: 21px 20px;
  display: block;
}
.subscribe-here input[type=email]:focus{
  -webkit-transition: all 0.30s ease-in-out;
  -moz-transition: all 0.30s ease-in-out;
  -ms-transition: all 0.30s ease-in-out;
  -o-transition: all 0.30s ease-in-out;
  outline: none;
  border: 1px solid #18ba60;
    box-shadow: none;
    -webkit-box-shadow: none;
}
/*----------------------------------------*/
/* 1. Home One
    1.11 Footer Bottom Area Css
/*----------------------------------------*/
#footer-bottom {
  padding-top: 25px;
  background-color: #252726;
  padding-bottom: 25px;
}
.copy-text{}
.copy-text a:hover{color: #162336}
.copy-text p{font-size: 14px;font-size: 400;font-family: 'Roboto Slab', serif;color: #fff}
.footer-menu{}
.footer-menu ul{margin:0px;padding: 0px;list-style: none}
.footer-menu ul li{float: left;}
.footer-menu ul li a {
  font-size: 16px;
  font-weight: 400;
  font-family: 'Roboto Slab', serif;
  color: #fff;
  text-decoration: none;
  display: block;
  padding-left: 35px;
}
.footer-menu ul li a:hover{
  color: #162336 ;-webkit-transition: all 0.55s ease;
  -o-transition: all 0.55s ease;
  transition: all 0.55s ease
}
/*----------------------------------------*/
/* 2. Home One
    2.1 Home Slider  css
/*----------------------------------------*/
#slider-one {position: relative;}
.intro-content-1 {
    position: relative;
    z-index: 1;
}
.intro-content-1::after {
/*    background: rgba(23, 23, 23, 0.31);
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1; */ 
}
.slider-content {
    position: absolute;
    right: 0;
    text-align: left;
    top: 50%;
    z-index: 3;
    left: 0;
    margin: 0 auto;
    margin-top: -170px;
}
.layer-1-2-slide-1 {
    margin: 20px 0;
}
.layer-1-1-slide-1 p {
    color: #777777;
    font-size: 16px;
    letter-spacing: 0.60px;
    line-height: 27px;
    max-width: 700px;
}
.layer-1-2-slide-1 h1 {
    color: #18ba60;
    font-size: 40px;
    font-weight: 700;
    line-height: 52px;
    text-transform: uppercase;
    max-width: 880px;
    letter-spacing: 2px;
}
.layer-1-2-slide-1 h1 span.subtitle {
  font-size: 36px;
  font-weight: 400;
  line-height: 52px;
  display: inline-block;color: #333333
}
.slider-content .align-center {
  text-align: center;
}
.slider-content .align-center h1{
    max-width: 100%;
    padding: 0 100px;
  }
  .slider-content .align-center p{
    max-width: 100%;
    padding: 0 130px;
  }
  
.rep-btn-slide-1 {
  border: 2px solid #18ba60;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-size: 16px;
  font-weight: 600;
  margin-top: 20px;
  padding: 13px 10px;
  text-align: center;
  text-transform: uppercase;
  transition: all 0.4s ease 0s;
  z-index: 222;
  background: #18ba60;
  width: 182px;
  border-radius: 55px;
}
.rep-btn-slide-1:hover{
    color: #fff;
    background: #11954b;
    border: 2px solid #11954b;
    text-decoration: none;
}
.rep-btn-slide-1.right-btn {
    margin-left: 15px;
    background: #11954b;
    border: 2px solid #11954b;
}
.rep-btn-slide-1.right-btn {
  margin-left: 15px;
  background: transparent;
  border: 2px solid #18ba60;color: #18ba60
}
.rep-btn-slide-1.right-btn:hover{
    background: #11954b;
    border: 2px solid #11954b;
    color: #fff;
}
.rep-btn-slide-1.left-btn:hover{
    background: #11954b;
    border: 2px solid #11954b;
}
.layer-1-2-slide-1 .color {
    color: #2e2e95;
    font-weight: 900;
}
#main-slider-1 #slider-one .owl-nav {
  margin-top: 0;
  position: absolute;
  right: 10px;
  bottom: 40%;
  z-index: 12;
  /* background-color: #18ba60; */
  padding: 0;
}
#slider-one.owl-nav button div.owl-prev, 
#slider-one.owl-nav button div.owl-next {
    color: #fff;
    font-size: 18px;
    margin-top: -20px;
    position: absolute;
    top: 50%;;
    text-align: center;
    line-height: 39px;
    opacity: 0;
    border:1px solid #fff;
    width: 40px;
    height: 40px;
  border-radius: 2px;
}
#slider-one .owl-nav button.owl-prev{
    left: 10%;
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -o-transition: 0.4s;
    -ms-transition: 0.4s;background-color: #18ba60;
padding: 10px 10px !important;
display: block;
margin-bottom: 10px;
border-radius: 3px;border:3px solid transparent;
}
#slider-one .owl-nav button.owl-next {
    right: 10%;
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -o-transition: 0.4s;
    -ms-transition: 0.4s;background-color: #18ba60;
padding: 10px 10px !important;
display: block;

border-radius: 3px;border:3px solid transparent;margin-top: 10px;
}
#slider-one .owl-nav button.owl-prev i{font-size:26px;
color: #fff;
display: block;}
#slider-one .owl-nav button.owl-next i{font-size:26px;
color: #fff;
display: block;}
#slider-one .owl-nav button.owl-prev i:hover{color: #18ba60;   -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -o-transition: 0.4s;
    -ms-transition: 0.4s;}
#slider-one .owl-nav button.owl-next i:hover{color: #18ba60;   -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -o-transition: 0.4s;
    -ms-transition: 0.4s;}
#slider-one .owl-nav [class*="owl-"]:hover {

    background: transparent;
    color: #000;
    text-decoration: none;border:3px solid#18ba60;

}
#slider-one.owl-carousel.owl-theme:hover .owl-controls .owl-nav div.owl-next{
    right: 2%;
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -o-transition: 0.4s;
    -ms-transition: 0.4s;
    opacity: 1;
}
#slider-one.owl-carousel.owl-theme:hover .owl-controls .owl-nav div.owl-prev{
    left: 2%;
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -o-transition: 0.4s;
    -ms-transition: 0.4s;
    opacity: 1;
}
#slider-one.owl-carousel.owl-theme:hover .owl-controls .owl-nav button div.owl-next:hover,
#slider-one.owl-carousel.owl-theme:hover .owl-controls .owl-nav button div.owl-prev:hover{
    color:#fff;
    background: #ef434c;
    border: 1px solid #ef434c;
}
#slider-one .owl-item .layer-1-2-slide-1{
    transform: translateY(100%);
    opacity: 0;
    transition: all 1s ease-in-out 0.3s;
}
#slider-one .owl-item .layer-1-1-slide-1{
    transform: translateY(100%);
    opacity: 0;
    transition: all 1s ease-in-out 1s;
}
#slider-one .owl-item .layer-1-3-slide-1{
    transform: translateY(100%);
    opacity: 0;
    transition: all 1s ease-in-out 1.5s;
}
#slider-one .owl-item.active .layer-1-2-slide-1,
#slider-one .owl-item.active .layer-1-1-slide-1,
#slider-one .owl-item.active .layer-1-3-slide-1{
    transform: translateY(0);
    opacity: 1;
}
#slider-one .owl-item.active .slider-images img{
  transform: scale(1.1);
  transition: 10s;
}
/*Home One Custom Css*/
.top-social-icons{}
.top-social-icons ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.top-social-icons ul li {
  float: left;
  line-height: 24px;
}
/*.top-social-icons ul li a.active i{color:#18ba60;}*/
.top-social-icons ul li a {
  display: inline-block;
  padding: 0 12px 0 4px;
}
.top-social-icons ul li a i {
  font-size: 18px;
  color: #757575;
  line-height: 24px;
}
.top-social-icons ul li a i:hover{color: #18ba60}
.header-home-2{position: relative;background-color:#18ba60; }
/*Naviation css*/
  /*---- Sticky Header ----*/ 
.header-home-2.is-sticky {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    background-color: #18ba60;
    -webkit-animation: 300ms ease-in-out 0s normal none 1 running fadeInDown;
    animation: 300ms ease-in-out 0s normal none 1 running fadeInDown;
    -webkit-box-shadow: 0 10px 15px rgba(25, 25, 25, 0.1);
    box-shadow: 0 10px 15px rgba(25, 25, 25, 0.1);
    z-index: 123; }
.header-home-2.is-sticky nav {
  line-height: 14px; padding-top: 22px;

padding-bottom: 22px;}
#main-header-2 .is-sticky .nav li a{padding: 32px 0;  -moz-transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;}
#main-header-2 .is-sticky .logo {
  padding-top: 33px;  -moz-transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
#main-header-2-2 .is-sticky .nav li.top-support:last-child {
  margin: 0;
  margin-top: 20px;margin-bottom:20px; -moz-transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
#main-header-2 .is-sticky .nav li .dropdown li a {

  padding: 15px 15px; -moz-transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
/*-- Sticky Animation --*/
@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0); }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none; } }

@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0); }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none; } }

.header-home-2 nav {
  padding-top: 25px;
  padding-bottom: 24px;
}
.logo {
  padding-top: 18px;
}
.logo img{max-width: 100%}
/* Main Menu */
#main-header-2 .main-menu {
  position:relative;
}
#main-header-2 .navbar {
  float: right;
  padding: 0;
}
#main-header-2 .nav li {
  margin-right: 36px;
  position: relative;
}
#main-header-2 .nav li:last-child {
    margin: 0;
    margin-top: 24px;margin-bottom:24px
}
#main-header-2 .nav li a {
  text-transform: uppercase;
  color: #fff;
  position: relative;
  -moz-transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  display: block;
  background: transparent;
  border-radius:0px;
  padding: 37px 0;
}
#main-header-2 .nav li.top-support a {
  display: block;
  background: #11954b;
  color: #fff;
  font-size: 16px;
  text-transform: uppercase;
  padding: 13px 40px;
  border-radius: 60px;
  font-weight: 600;position: relative;
}
#main-header-2 .nav li:last-child.top-support a:hover{background-color: #fff;color: #333 !important}
#main-header-2 .nav li.active a, 
#main-header-2 .nav li:hover a {
color: #333 
}
#main-header-2 .nav li .dropdown li.active a{
background-color: #18ba60;color:#fff;
}
#main-header-2 .nav li a::before {
  position: absolute;
  top: -1px;
  left: 0;
  width: 0%;
  height: 2px;
  content: "";
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  opacity: 0;
  visibility: hidden;
}
#main-header-2 .nav li.active a:before,
#main-header-2 .nav li:hover a:before{
  width:100%;
  opacity:1;
  visibility:visible;
}
#main-header-2 .nav li a i{
  margin-left:5px;
}
#main-header-2 .nav .dropdown {
  position: absolute;
  left: 0;
  width: 220px;
  z-index: 99;
  background: #fff;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  opacity: 0;
  visibility: hidden;
  -webkit-transform:translate(50px, 50px);
  -moz-transform:translate(50px, 50px);
  transform:translate(50px, 50px);
  -webkit-box-shadow: 0px 0px 5px #0000004d;
  -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.30);
  box-shadow: 0px 0px 5px #0000004d;
  visibility: hidden;
  top: 100%;
}
#main-header-2 .nav li:hover .dropdown{
  opacity:1;
  visibility:visible;
  transform:translateX(0px);
}
#main-header-2 .nav .dropdown li {
  display: block;
  width: 100%;
  margin: 0;
  float: none;
}
#main-header-2 .nav li .dropdown li a {
  color: #333333;
  padding: 10px 15px;
  text-transform: capitalize;
  border-radius: 0px;
  font-weight: 400;
  border-bottom: 1px solid #e7e7e7;
}
#main-header-2 .nav li .dropdown li:last-child a{
  border-bottom:0px;
}
#main-header-2 .nav li .dropdown li a:hover {
  color: #fff;
  padding-left:25px;
  border-color:transparent;background-color: #18ba60 
}
#main-header-2 .nav li .dropdown li a:before{
  display:none;
}
/*Quick look section*/
.no-padding{padding-right: 0px;padding-left: 0px}
#home-1-quick-look{}
.home1-quick-icon{}
.home1-quick-icon span i::before {
  font-size: 38px;
  color: #18ba60;
  text-align: center;
    display: inline-block;
  border: 1px solid #18ba60;
  line-height: 52px;
  padding: 10px 16px;
  margin-left: 0px;
  border-radius: 12px;
  margin-right: 18px;
}
.home1-quick-info{}
.home1-quick-info h2 {
  font-size: 24px;
  color: #18ba60;
  line-height: 20px;
  margin-bottom: 25px;
}
/*Home one offer section */
.offer-item-section-2 {
  border: 1px solid #D8D8D8;
  padding: 22px;
  border-radius: 4px;position: relative;
}
.offer-item-2{}
.offer-item-2 h2 {
  margin-top: 45px;
  font-size: 24px;
  color: #333333;
  font-weight: 400;
  text-align: left;
  display: block;
  margin-bottom: 18px;
  line-height: 25px;
}
.offer-item-2 p {
  font-size: 16px;
  color: #777777;
  line-height: 27px;
}
.quick-icon-offer-2 {
  position: absolute;
  left: 20px;
  right: 0;
  top: -12%;
  text-align: left;
}
.quick-icon-offer-2 span {
  border: 1px solid #ccc;
  display: inline-block;
  width: 65px;
  height: 65px;
  background: #fff;
  border-radius: 50px;
}
.quick-icon-offer-2 span i::before {
  font-size: 32px;
  color: #ACACAC;
  text-align: center;
  margin: 0px auto;
  display: block;
  padding-top: 21px;
  line-height: 25px;
}
div.offer-item-section-2:hover{
    -webkit-box-shadow: 0px 0px 35px 0px rgba(232, 232, 232, 0.9);
-moz-box-shadow: 0px 0px 35px 0px rgba(232, 232, 232, 0.9);
box-shadow: 0px 0px 35px 0px rgba(232, 232, 232, 0.9);-webkit-transition: all 0.55s ease;
  -o-transition: all 0.55s ease;
  transition: all 0.55s ease;border: 1px solid #fff
}
div.offer-item-section-2:hover .quick-icon-offer-2 span{color: #fff;background-color: #18ba60;
-webkit-transition: all 0.55s ease;
  -o-transition: all 0.55s ease;
  transition: all 0.55s ease;
}
div.offer-item-section-2:hover .offer-item-2 h2{color: #18ba60;
-webkit-transition: all 0.55s ease;
  -o-transition: all 0.55s ease;
  transition: all 0.55s ease;
}
div.offer-item-section-2:hover .quick-icon-offer-2 span i::before{color: #fff;
-webkit-transition: all 0.55s ease;
  -o-transition: all 0.55s ease;
  transition: all 0.55s ease;
}
.offer-item-2 a {
  color: #333333;
  font-size: 16px;
  font-weight: 600;
}
div.offer-item-section-2:hover .offer-item-2 a{color: #18ba60;
-webkit-transition: all 0.55s ease;
  -o-transition: all 0.55s ease;
  transition: all 0.55s ease;
}
/*Home form section*/
#home-contact-form h2.home-contact-titele {
  color: #333;
  font-size: 32px;
  font-weight: 400;
  position: relative;
  margin-bottom: 75px;
  line-height: 25px;
}
#home-contact-form h2.home-contact-titele::after {
  position: absolute;
  content: "";
  background: #18ba60;
  height: 3px;
  right: 0;
  width: 80px;
  border-radius: 5px;
  left: 0;
  display: block;
  bottom: -24px;
}
.home-form input[type="text"] {
outline: none;
box-shadow: none;
color: #777777;
font-size: 16px;
border: 1px solid #E8E8E8;
padding: 23px 20px;
display: block;background-color: transparent;
}
.home-form input[type=email]{outline: none;
box-shadow: none;
color: #777777;
font-size: 16px;
border: 1px solid #E8E8E8;
padding: 23px 20px;
display: block;background-color: transparent;}
.home-form textarea{
  color: #777777;
  font-size: 16px;
  border: 1px solid #E8E8E8;
  padding: 15px;background-color: transparent;
}
.home-form #name-field input[type=text]:focus, #name-email input[type=email]:focus, #message-field textarea:focus {
  -webkit-transition: all 0.30s ease-in-out;
  -moz-transition: all 0.30s ease-in-out;
  -ms-transition: all 0.30s ease-in-out;
  -o-transition: all 0.30s ease-in-out;
  outline: none;
  border: 1px solid #18ba60;
  box-shadow: none;
  -webkit-box-shadow: none;background-color: #fff;
}
#send-btn{margin-bottom: 0px}
#send-btn input.contact-submit-btn {
  display: inline-block;
  margin-left: 0;
  margin-top: 15px;
  background-color: #18ba60;
  color: #fff;
  padding: 11px 58px;
  border-radius: 35px;
  font-weight: 600;
  letter-spacing: 1px;
  border: 1px solid #18ba60;
  font-size: 16px;
  text-decoration: none;
  cursor: pointer;
  text-transform: uppercase;
}
#send-btn input.contact-submit-btn:hover{
    background-color: #11954b;
    color: #fff;
    border: 1px solid #11954b;-webkit-transition: all 0.55s ease;
  -o-transition: all 0.55s ease;
  transition: all 0.55s ease;text-decoration: none
}
div.home-form .form-group {
  margin-bottom: 30px;
}
/*Home accordion*/
.home-accordion{}
.home-accordion .card {
  border: none;
  border-radius: 4px;
  background: none;
  margin-bottom: 12px;
}
.home-accordion .card-header {
  border-radius: 2px;
  background-color: #f5f5f5;
  border: none;
  padding: 20px;
}
.home-accordion .card-body {
  background: none;
  line-height: 27px;
  font-size: 16px;
}
.home-accordion .card-header a {
  color: #333333;
  font-size: 18px;
  font-family: 'Roboto Slab', serif;
  background: none;
}
.home-accordion span p i {
  color: #333333;
}
.home-accordion span.expanded p i {
  color: #18ba60;
}
/*What people Say*/
#people-say-section{background-color: #18ba60;position: relative;}
.bg-left-section{position: static;}
.bg-right-section{position: static;}
.happy-client-bg{
    background: url(../images/normal/happy-client-bg.jpg) no-repeat center center;
    /*background-size: cover;*/
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width:49%;
    background-position: 3% 0 
}
.home-tab-section h2{font-size: 32px;font-weight: 400;color: #fff;line-height: 25px;position: relative;margin-bottom: 65px}
.home-tab-section h2::after {
  position: absolute;
  content: "";
  background: #fff;
  height: 3px;
  right: 0;
  width: 70px;
  border-radius: 5px;
  left: 0;
  display: block;
  bottom: -24px;
}
.home-tab-list ul.nav-tabs {
  border: none;
  margin-bottom: 15px;
}
.home-tab-list ul.nav-tabs li{  margin-right: 21%;}
.home-tab-list ul.nav-tabs li:last-child{ margin-right: 0px;}
.home-tab-list ul.nav-tabs li a img {

  display: block;
  border: 5px solid #18ba60;
  border-radius: 100px;-webkit-transition: all 0.55s ease;
  -o-transition: all 0.55s ease;
  transition: all 0.55s ease
}
.home-tab-list ul.nav-tabs li a.active img {
  display: block;
  border: 5px solid #13d76a;
  border-radius: 100px;-webkit-transition: all 0.55s ease;
  -o-transition: all 0.55s ease;
  transition: all 0.55s ease
}
.fade.in {
    opacity: 1;
}
.home-tab-content{position: relative;}
.home-tab-content::after {
  position: absolute;
  content: '';
  background: url('../images/normal/h-arrow.png') no-repeat center center;
  width: 66px;
  height: 56px;
  left: 45%;
  bottom: 35%;
}
.home-tab-content p{color: #fff}
.home-tab-content p:last-child{font-style: italic;}
.home-tab-content span strong {
  color: #fff;
  font-size: 18px;
  line-height: 32px;
  font-family: 'Roboto Slab', serif;
  margin-top: 0px;
  display: block;
}
.happy-client-bg:after {
    background-color: #0009;
}
.happy-client-bg:after {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    content: "";
    transition: .4s;
/*    background-color: rgba(0, 52, 69, .85);*/

}

/*----------------------------------------*/
/* 2. Home Two
    2.2 Home Slider Two  css
/*----------------------------------------*/
#slider-two {position: relative;}
.intro-content {
    position: relative;
    z-index: 1;
}
.intro-content::after {
    background: rgba(23, 23, 23, 0.31);
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;  
}
.slider-content {
    position: absolute;
    right: 0;
    text-align: left;
    top: 50%;
    z-index: 3;
    left: 0;
    margin: 0 auto;
    margin-top: -170px;
}
.layer-1-2 {
    margin: 20px 0;
}
.layer-1-1 p {
    color: #fff;
    font-size: 16px;
    letter-spacing: 0.60px;
    line-height: 27px;
    max-width: 700px;
}
.layer-1-2 h1 {
    color: #fff;
    font-size: 40px;
    font-weight: 700;
    line-height: 52px;
    text-transform: uppercase;
    max-width: 880px;
    letter-spacing: 2px;
}
.layer-1-2 h1 span.subtitle {
  font-size: 36px;
  font-weight: 400;
  line-height: 52px;
  display: inline-block;
}
.slider-content .align-center {
  text-align: center;
}
.slider-content .align-center h1{
    max-width: 100%;
    padding: 0 100px;
  }
  .slider-content .align-center p{
    max-width: 100%;
    padding: 0 130px;
}
  
.rep-btn {
  border: 2px solid #18ba60;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-size: 16px;
  font-weight: 600;
  margin-top: 20px;
  padding: 13px 10px;
  text-align: center;
  text-transform: uppercase;
  transition: all 0.4s ease 0s;
  z-index: 222;
  background: #18ba60;
  width: 182px;
  border-radius: 55px;
}
.rep-btn:hover{
    color: #fff;
    background: #11954b;
    border: 2px solid #11954b;
    text-decoration: none;
}
.rep-btn.right-btn {
    margin-left: 15px;
    background: #11954b;
    border: 2px solid #11954b;
}
.rep-btn.right-btn {
  margin-left: 15px;
  background: transparent;
  border: 2px solid #fff;
}
.rep-btn.right-btn:hover{
    background: #11954b;
    border: 2px solid #11954b;
}
.rep-btn.left-btn:hover{
    background: #11954b;
    border: 2px solid #11954b;
}
.layer-1-2 .color {
    color: #2e2e95;
    font-weight: 900;
}
#main-slider-2 #slider-two .owl-nav {
  margin-top: 0;
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 12;
  /* background-color: #18ba60; */
  padding: 0;
}
#slider-two .owl-nav button div.owl-prev, 
#slider-two .owl-nav button div.owl-next {
    color: #fff;
    font-size: 18px;
    margin-top: -20px;
    position: absolute;
    top: 50%;;
    text-align: center;
    line-height: 39px;
    opacity: 0;
    border:1px solid #fff;
    width: 40px;
    height: 40px;
  border-radius: 2px;
}
#slider-two .owl-nav button.owl-prev{
    left: 10%;
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -o-transition: 0.4s;
    -ms-transition: 0.4s;background-color: #252726;
border-radius: 0;
margin: 0;
padding: 10px 12px !important;
}
#slider-two .owl-nav button.owl-next {
    right: 10%;
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -o-transition: 0.4s;
    -ms-transition: 0.4s;background-color: #252726;
border-radius: 0;
margin: 0;
padding: 10px 12px !important;
}
#slider-two .owl-nav button.owl-prev i{font-size: 35px;

color: #fff;

display: block;}
#slider-two .owl-nav button.owl-next i{font-size: 35px;

color: #fff;

display: block;}
#slider-two .owl-nav [class*="owl-"]:hover {
    background: transparent;
    color: #000;
    text-decoration: none;
}
#slider-two.owl-carousel.owl-theme:hover .owl-controls .owl-nav div.owl-next{
    right: 2%;
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -o-transition: 0.4s;
    -ms-transition: 0.4s;
    opacity: 1;
}
#slider-two.owl-carousel.owl-theme:hover .owl-controls .owl-nav div.owl-prev{
    left: 2%;
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -o-transition: 0.4s;
    -ms-transition: 0.4s;
    opacity: 1;
}
#slider-two.owl-carousel.owl-theme:hover .owl-controls .owl-nav button div.owl-next:hover,
#slider-two.owl-carousel.owl-theme:hover .owl-controls .owl-nav button div.owl-prev:hover{
    color:#fff;
    background: #ef434c;
    border: 1px solid #ef434c;
}
#slider-two .owl-item .layer-1-2{
    transform: translateY(100%);
    opacity: 0;
    transition: all 1s ease-in-out 0.3s;
}
#slider-two .owl-item .layer-1-1{
    transform: translateY(100%);
    opacity: 0;
    transition: all 1s ease-in-out 1s;
}
#slider-two .owl-item .layer-1-3{
    transform: translateY(100%);
    opacity: 0;
    transition: all 1s ease-in-out 1.5s;
}
#slider-two .owl-item.active .layer-1-2,
#slider-two .owl-item.active .layer-1-1,
#slider-two .owl-item.active .layer-1-3{
    transform: translateY(0);
    opacity: 1;
}
#slider-two .owl-item.active .slider-images img{
  transform: scale(1.1);
  transition: 10s;
}

/*----------------------------------------*/
/* 2. Home three
    2.3 Home Slider Three  css
/*----------------------------------------*/
#slider-three {position: relative;}
.intro-content-3 {
    position: relative;
    z-index: 1;
}
.intro-content-3::after {
    background: rgba(23, 23, 23, 0.31);
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;  
}
.slider-content {
    position: absolute;
    right: 0;
    text-align: left;
    top: 50%;
    z-index: 3;
    left: 0;
    margin: 0 auto;
    margin-top: -170px;
}
.layer-1-3-slide-3 {
    margin: 20px 0;
}
.layer-1-3-slide-3 p {
    color: #fff;
    font-size: 16px;
    letter-spacing: 0.60px;
    line-height: 27px;
    max-width: 700px;
}
.layer-1-3-slide-3 h1 {
    color: #fff;
    font-size: 40px;
    font-weight: 700;
    line-height: 52px;
    text-transform: uppercase;
    max-width: 880px;
    letter-spacing: 2px;
}
.layer-1-3-slide-3 h1 span.subtitle {
  font-size: 36px;
  font-weight: 400;
  line-height: 52px;
  display: inline-block;
}
.slider-content .align-center {
  text-align: center;
}
.slider-content .align-center h1{
    max-width: 100%;
    padding: 0 100px;
  }
  .slider-content .align-center p{
    max-width: 100%;
    padding: 0 130px;
  }
.rep-btn-3 {
  border: 2px solid #18ba60;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-size: 16px;
  font-weight: 600;
  margin-top: 20px;
  padding: 13px 10px;
  text-align: center;
  text-transform: uppercase;
  transition: all 0.4s ease 0s;
  z-index: 222;
  background: #18ba60;
  width: 182px;
  border-radius: 55px;
}
.rep-btn-3:hover{
    color: #fff;
    background: #11954b;
    border: 2px solid #11954b;
    text-decoration: none;
}
.rep-btn-3.right-btn {
    margin-left: 15px;
    background: #11954b;
    border: 2px solid #11954b;
}
.rep-btn-3.right-btn {
  margin-left: 15px;
  background: transparent;
  border: 2px solid #fff;
}
.rep-btn-3.right-btn:hover{
    background: #11954b;
    border: 2px solid #11954b;
}
.rep-btn-3.left-btn:hover{
    background: #11954b;
    border: 2px solid #11954b;
}
.layer-1-2 .color {
    color: #2e2e95;
    font-weight: 900;
}
#main-slider-3 #slider-three .owl-dots {
  margin-top: 0;
  position: absolute;
  right: 0;
  bottom: 3%;
  z-index: 12;
  /* background-color: #18ba60; */
  padding: 0;
  left: 0;
}
/*#slider-three .owl-dots button div.owl-dot, 
#slider-three .owl-dots button div.owl-dot {
    color: #fff;
    font-size: 18px;
    margin-top: -20px;
    position: absolute;
    top: 50%;;
    text-align: center;
    line-height: 39px;
    opacity: 0;
    border:1px solid #fff;
    width: 40px;
    height: 40px;
  border-radius: 2px;
}*/
#slider-three .owl-dots button.active span {
  border: 1px solid #18ba60;
  background: #18ba60;
}
#slider-three .owl-dots button.owl-dot span{
    left: 10%;
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -o-transition: 0.4s;
    -ms-transition: 0.4s;
}
#slider-three .owl-dots .owl-dot span {
  background: #fff;
}
#slider-three .owl-dots button.owl-dot:hover span{
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -o-transition: 0.4s;
    -ms-transition: 0.4s;color: #fff

}

#slider-three .owl-item .layer-1-3-slide-3{
    transform: translateY(100%);
    opacity: 0;
    transition: all 1s ease-in-out 0.3s;
}
#slider-three .owl-item .layer-1-3-slide-3{
    transform: translateY(100%);
    opacity: 0;
    transition: all 1s ease-in-out 1s;
}
#slider-three .owl-item .layer-1-3-slide-3{
    transform: translateY(100%);
    opacity: 0;
    transition: all 1s ease-in-out 1.5s;
}
#slider-three .owl-item.active .layer-1-3-slide-3,
#slider-three .owl-item.active .layer-1-3-slide-3,
#slider-three .owl-item.active .layer-1-3-slide-3{
    transform: translateY(0);
    opacity: 1;
}
#slider-three .owl-item.active .slider-images img{
  transform: scale(1.1);
  transition: 10s;
}
/*Quick Service Section*/

#quick-service-section{}
.home3-quick-service{position: relative;
  ;}
.quick-service-img{}
.quick-service-img img {
  display: block;
  border-radius: 5px;
}
.quick-service-img span.icon {
  position: absolute;
  top: 30%;
  right: 0;
  left: 0;
  bottom: 0;
  margin: 0px auto;
  text-align: center;
  display: block;opacity: 0;z-index: 12;
}
.quick-service-img span i {
  font-size: 60px;color: #fff
}
.quick-service-title {
  position: absolute;
  bottom: 0px;
  background-color: #18ba60;
  left: 0;
  right: 0;
  border-radius: 0px 0px 5px 5px;z-index: 12;
}
.quick-service-title h2 {
  font-size: 24px;
  text-align: center;
  line-height: 36px;
  color: #fff;
  padding: 8px;
}
.home3-quick-service:hover:after {
    background-color: #06214799;-webkit-transition: all 0.55s ease;
  -o-transition: all 0.55s ease;
  transition: all 0.55s ease
}
.home3-quick-service:after {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    content: "";
    transition: .4s;
/*    background-color: rgba(0, 52, 69, .85);*/
border-radius: 6px;
}
div.home3-quick-service:hover .quick-service-img span.icon {opacity: 1;-webkit-transition: all 0.55s ease;
  -o-transition: all 0.55s ease;
  transition: all 0.55s ease}
/*----------------------------------------*/
/* 3. About Us Page CSS
    3.1 About Us section Css
/*----------------------------------------*/

#about-us-section{}
.who-we-are {
  margin-top: 5px;
}
.who-we-are h3 {
  color: #333333;
  font-size: 32px;
  margin-bottom: 25px;
  line-height: 25px;
}
.who-we-are p{}
.who-we-are span.qoute {
  padding-left: 15px;
  height: 85px;
  display: block;
  border-left: 4px solid #18ba60;
  margin-bottom:20px;
}
.who-we-are span {
  font-style: italic;
  color: #777777;
  font-size: 16px;line-height: 27px
}
.who-we-are a {
  text-decoration: none;
  color: #18ba60;
  font-weight: 600;
  font-size: 16px;
  display: inline-block;
}
.who-we-are a span i {
  color: #18ba60;
  margin-left: 8px;
}
.who-we-are a:hover{
  color: #11954b;-webkit-transition: all 0.55s ease;
  -o-transition: all 0.55s ease;
  transition: all 0.55s ease
}
.who-we-are-video {
  position: relative;
}
.who-we-are-video img {
  display: block;
  border-radius: 6px;
  position: relative;
  border: 3px solid #78e6a9;
}
.who-we-are-video a.icon-video {
  position: absolute;
  border-radius: 50px;
  border: 7px solid #dcdcdc;
  padding: 10px;
  width: 60px;
  height: 60px;
  background: #FFF;
  color: #18ba60;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: inline-block;
  text-align: center;
  z-index: 12;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.who-we-are-video a.icon-video:hover {
  background: #18ba60;
  color: #FFF;  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.who-we-are-video:hover:after {
    background-color: #18ba60cc;
}
.who-we-are-video:after {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    content: "";
    transition: .4s;
/*    background-color: rgba(0, 52, 69, .85);*/
border-radius: 6px;
}
/*----------------------------------------*/
/* 3. About Us Page CSS
    3.2 Our Expert Team  Css
/*----------------------------------------*/
#our-team-expert{}
.expert-team{}
.expert-team-thumb{position: relative;}
.expert-team-thumb img {
  max-width: 100%;
  display: block;
  border-radius: 5px;
}
.expert-social-accounts {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #18ba60;
  border-radius: 0 0px 5px 5px;
  padding: 10px;
}
.expert-social-accounts ul {
  margin: 0px;
  padding: 0px;
  list-style: none;
}
.expert-social-accounts ul li {
  display: inline-block;
}
.expert-social-accounts ul li a {
  padding: 8px 10px 5px 10px;
  text-align: center;
  display: block;
}
.expert-social-accounts ul li a:hover {
  background-color: #22de75;
  border-radius: 30px;-webkit-transition: all 0.55s ease;
  -o-transition: all 0.55s ease;
  transition: all 0.55s ease
}
.expert-social-accounts ul li a span i {
  font-size: 18px;
  color: #fff;
}
.expert-info{margin-top: 25px}
.expert-info h4 {
  color: #333333;
  text-align: center;
  display: block;
  font-size: 18px;
  line-height: 25px;
  margin: 0;
}
.expert-info p {
  text-align: center;
  line-height: 12px;
  margin-top: 10px;
}
/*----------------------------------------*/
/* 3. About Us Page CSS
    3.3 Client Satisfaction Css
/*----------------------------------------*/

#about-counter-area {
  background: url(../images/normal/counter-bg2.jpg) no-repeat center center;
        background-size: auto auto;
    background-size: cover;
  height: 440px;
  width: 100%;
  background-position: 100% -0%;position: relative;
}
.about-counter-bg-opacity {
  background: #000;
  width: 100%;
  height: 100%;
  position: absolute;
  opacity: 0.65;
}
.about-conter-item span {
  margin-bottom: 15px;
  display: block;
}
.about-conter-item .counter {
  color: #fff;
  font-size: 42px;
  font-weight: 700;
  line-height: 50px;
  text-align: center;
  display: block;
}
.about-conter-item span i {
  color: #fff;
  font-size: 35px;
}
.about-conter-item p{font-size:18px;line-height: 28px;color: #fff;text-align: center;font-weight: 400;font-family: 'Roboto Slab', serif;}

/*----------------------------------------*/
/* 3. About Us Page CSS
    3.4 FaQ css
/*----------------------------------------*/

#accordion .card-header, .card-link,.card-link:hover{background-color:#000;text-align:left;color:hotpink;}
#accordion .card-header {
  padding: 20px 30px;
}
.about-accordion h3, .about-testimoni h3 {
  margin-bottom: 30px;
  line-height: 25px;
}
#accordion .card-body {
  padding: 13px 30px 22px 30px;
  color: #777;
  font-size: 16px;
  line-height: 27px;
  border-top: 1px solid #ccc;
}
#accordion .card{border: none;-webkit-box-shadow: 0 0px 35px rgba(232, 232, 232, 1.1);
-moz-box-shadow: 0 0px 35px rgba(232, 232, 232, 1.1);
box-shadow: 0 0px 35px rgba(232, 232, 232, 1.1);}
#accordion .card-header, .card-link, .card-link:hover {
  background-color: #fff;
  text-align: left;
  color: #777;
  font-size: 16px;
  border: none;
  font-weight: normal;
}
.card-header span{position:absolute;top:20px;right:20px;font-size:20px;color:#777;
-webkit-animation: minus 0.5s;}

@keyframes minus {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}
[aria-expanded="false"] > .expanded, [aria-expanded="true"] > .collapsed {display: none;}
/*.home-accordion .card-header a.current span.collapsed i{ color: #18ba60}*/
.home-accordion span.expanded i{ color: #18ba60}
#accordion span.expanded i{ color: #18ba60}
/*#accordion .card-header a.current span.collapsed i{ color: #18ba60}*/
#accordion .card-header a.current{color:#18ba60 }
.home-accordion .card-header a.current{color:#18ba60 }
/*
Right Side Testimoni*/
.about-testi {
  background-color: #fff;
  padding: 40px 15px 40px 15px;    -webkit-box-shadow: 0 0px 35px rgba(232, 232, 232, 1.1);
-moz-box-shadow: 0 0px 35px rgba(232, 232, 232, 1.1);
box-shadow: 0 0px 35px rgba(232, 232, 232, 1.1);
}
.about-client-area{}
.about-client-photo{}
.about-client-photo img {
  display: block;
  margin: 0px auto;
  border-radius: 100px;
  border: 2px solid #18ba60;
  text-align: center;
  max-width: 100px;
}
.client-details {
  margin-top: 28px;
}
.client-details p{}
.client-details span strong{}

#testimonial-2 .owl-nav {
  position: absolute;
  z-index: 12;
  right: 0;
  bottom: 0%;
  display: block;
  top: 5%;
  left: 0;
}
#testimonial-2 .owl-nav button.owl-next {
  color: #18ba60;
  float: right;
  margin-right: 70px;
}
#testimonial-2 .owl-nav button.owl-next i{color:#18ba60;font-size: 35px}
#testimonial-2 .owl-nav button.owl-prev {
  color: #18ba60;
  float: left;
  margin-left: 70px;
}
#testimonial-2 .owl-nav button.owl-prev i{color:#18ba60;font-size: 35px}
#testimonial-2 .owl-nav [class*="owl-"]:hover {
  background: transparent;
  color: transparent;
  text-decoration: none;
}
/*----------------------------------------*/
/* 3. About Us Page CSS
    3.5 Client Logo css
/*----------------------------------------*/
#client-logo-area {
  background-color: #18ba60;
  padding-top: 15px;
  padding-bottom: 15px;
}
#client-logo .item img {
  max-width: 220px;
  min-height: 120px;
  max-height: 100%;
  display: block;
  text-align: center;
  margin: 0px auto;
}

/*----------------------------------------*/
/* 4. Company History Page CSS
    4.1 Our History Section css
/*----------------------------------------*/
.company-info-left{}
.company-info-left h2{font-size: 32px;color: #333333;line-height: 42px;font-weight: 400;margin-bottom: 30px}
.company-info-left a{}
.company-info-video{}
.company-info-right{}
.company-info-left a {
  text-decoration: none;
  color: #18ba60;
  font-weight: 600;
  font-size: 16px;
  display: inline-block;
}
.company-info-left a span i {
  color: #18ba60;
  margin-left: 8px;
}
.company-video-right {
  position: relative;
  margin-top: 25px;
}
.company-video-right img {
  display: block;
  border-radius: 6px;
  position: relative;
}
.company-video-right::before {
  content: '';
  border: 30px solid #18ba60;
  background: none;
  position: absolute;
  top: -15px;
  right: -30px;
  width: 100%;
  height: 90%;
  border-radius: 6px;
}
.company-video-right::before {
  content: '';
  border: 30px solid #18ba60;
  background: none;
  position: absolute;
  top: -15px;
  right: -15px;
  width: 100%;
  height: 100%;
  border-radius: 6px;
}
.company-video-right a.icon-video {
  position: absolute;
  border-radius: 50px;
  border: 7px solid #dcdcdc;
  padding: 10px;
  width: 60px;
  height: 60px;
  background: #FFF;
  color: #18ba60;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: inline-block;
  text-align: center;
  z-index: 12;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.company-video-right:hover:after {
    background-color: #18ba60cc;
}
.company-video-right:after {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    content: "";
    transition: .4s;
/*    background-color: rgba(0, 52, 69, .85);*/
border-radius: 6px;
}
.company-video-right a.icon-video:hover {
  background: #18ba60;
  color: #FFF;  -webkit-transition: 0.3s;
  transition: 0.3s;
}
/*Company Left Section*/
.company-info-right{}
.company-info-right h2{font-size: 32px;color: #333333;line-height: 42px;font-weight: 400;margin-bottom: 40px}
.company-info-right a{}
.company-info-video{}
.company-info-right{}
.company-info-right a {
  text-decoration: none;
  color: #18ba60;
  font-weight: 600;
  font-size: 16px;
  display: block;
}
.company-info-right a span i {
  color: #18ba60;
  margin-left: 8px;
}
.company-video-left {
  position: relative;
  margin-top: 25px;
}
.company-video-left img {
  display: block;
  border-radius: 6px;
  position: relative;
}
.company-video-left::before {
  content: '';
  border: 30px solid #18ba60;
  background: none;
  position: absolute;
  top: -15px;
  right: -30px;
  width: 100%;
  height: 100%;
  border-radius: 6px;
}
.company-video-left::before {
  content: '';
  border: 30px solid #18ba60;
  background: none;
  position: absolute;
  top: -15px;
  left: -15px;
  width: 100%;
  height: 100%;
  border-radius: 6px;
}
.company-video-left a.icon-video {
  position: absolute;
  border-radius: 50px;
  border: 7px solid #dcdcdc;
  padding: 10px;
  width: 60px;
  height: 60px;
  background: #FFF;
  color: #18ba60;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: inline-block;
  text-align: center;
  z-index: 12;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.company-video-left a.icon-video:hover {
  background: #18ba60;
  color: #FFF;  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.company-video-left:hover:after {
    background-color: #18ba60cc;
}
.company-video-left:after {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    content: "";
    transition: .4s;
/*    background-color: rgba(0, 52, 69, .85);*/
border-radius: 6px;
}
/*----------------------------------------*/
/* 5. Services Page CSS
    5.1 Main Services Section css
/*----------------------------------------*/
.services-info h5 {
  font-size: 24px;
  color: #333333;
  display: block;
  margin-top: 20px;
  margin-bottom: 22px;
}
.services-info p{}
.services-info a {
  color: #333333;
  font-size: 24px;
  font-weight: 400;
}
.services-info a.read-more {
  color: #777;
  font-size: 16px;
  font-weight: 600;
}
.services-info a span i{}
#main-services-section .card:hover{    -webkit-box-shadow: 0px 0px 35px 0px rgba(232, 232, 232, 1.1);
-moz-box-shadow: 0px 0px 35px 0px rgba(232, 232, 232, 1.1);
box-shadow: 0px 0px 35px 0px rgba(232, 232, 232, 1.1);-webkit-transition: all 0.55s ease;
  -o-transition: all 0.55s ease;
  transition: all 0.55s ease;border: 1px solid#f3f3f3}
#main-services-section .card:hover .services-info a.read-more{color:#18ba60;-webkit-transition: all 0.55s ease;
  -o-transition: all 0.55s ease;
  transition: all 0.55s ease}
#main-services-section .card:hover .services-info a.read-more span i{color:#18ba60;-webkit-transition: all 0.55s ease;
  -o-transition: all 0.55s ease;
  transition: all 0.55s ease}
#main-services-section .card:hover .services-info h5 a{color:#18ba60;-webkit-transition: all 0.55s ease;
  -o-transition: all 0.55s ease;
  transition: all 0.55s ease}

/*----------------------------------------*/
/* 5. Services Page CSS
    5.2 Middle Banner Area css

/*----------------------------------------*/
#middle-banner-area {
 background: url(../images/services/service-banner.jpg) no-repeat center center;
    background-size: cover;
    height:460px;
    width:100%;position: relative;
}
.service-bg-opacity {
  background: #000;
  width: 100%;
  height: 100%;
  position: absolute;
  opacity: 0.45;
}
.business-section {
  padding-bottom: 125px;
  display: block;
}
.business-section h3 {
  font-size: 32px;
  color: #fff;
  margin-bottom: 25px;
  text-transform: uppercase;
  line-height: 25px;
}
.business-section p {
  color: #fff;
  margin-bottom: 25px;
}
.business-section ul{}
.business-section ul li {
  color: #fff;
  font-size: 16px;
  line-height: 35px;
  position: relative;
  padding-left: 40px;
}
.business-section ul li span i {
  color: #fff;
  margin-right: 12px;
  display: inline-block;
  font-size: 25px;
  position: absolute;
  left: 0;
  top: 6px;
}
/*----------------------------------------*/
/* 5. Services Page CSS
    5.2 Pricing Plane css

/*----------------------------------------*/
#pricing-plane .pricing-table {
  border: 1px solid #ccc;
  padding: 50px 0 50px 0px;
  display: block;
}
#pricing-plane .pricing-table:hover{
  -webkit-box-shadow: 0px 0px 35px 0px rgba(232, 232, 232, 1.1);
-moz-box-shadow: 0px 0px 35px 0px rgba(232, 232, 232, 1.1);
box-shadow: 0px 0px 35px 0px rgba(232, 232, 232, 1.1);-webkit-transition: all 0.55s ease;
  -o-transition: all 0.55s ease;
  transition: all 0.55s ease;border: 1px solid#f3f3f3
   
}
#pricing-plane .pricing-table ul{}
#pricing-plane .pricing-table ul li{}
#pricing-plane .pricing-table ul li span.price-title {
  font-size: 24px;
  color: #333333;
  text-align: center;
  text-transform: uppercase;
  display: block;font-family: 'Roboto Slab', serif;font-weight: 400
}
#pricing-plane .pricing-table ul li span.price-sub {
  font-size: 16px;
  color: #333333;
  text-align: center;
  padding-bottom: 20px;
  display: block;
  font-weight: 400;
  border-bottom: 1px solid #ccc;
  margin-bottom: 20px;
}
#pricing-plane .pricing-table ul li {
  font-size: 16px;
  color: #777777;
  line-height: 38px;
}
#pricing-plane .pricing-table ul li.pricing-details span.pricing-price {
  font-size: 24px;
  color: #333333;
  font-weight: 700;
  margin-bottom: 20px;
  display: block;
  margin-top: 10px;font-family: 'Roboto Slab', serif;
}
#pricing-plane .pricing-table ul li a.reptro-price-btn {
  border: 2px solid #18ba60;
  display: inline-block;
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  background-color: transparent;
  color: #18ba60;
  border-radius: 25px;
  padding: 10px 40px;
}
#pricing-plane .pricing-table:hover a.reptro-price-btn{background:#18ba60;-webkit-transition: all 0.55s ease;
  -o-transition: all 0.55s ease;
  transition: all 0.55s ease;color: #fff;}

/*----------------------------------------*/
/* 6. Service Single Page CSS
    6.1 Single Service css

/*----------------------------------------*/
#service-details .single-tab-list ul.nav-pills {
  margin: 0px;
  padding: 0px;
  list-style: none;
}
#service-details .single-tab-list ul.nav-pills li.nav-item {
  float: none;
  width: 100%;
  display: block;
  border-left: 4px solid #18ba60;
  border: 1px solid #ccc;
  margin-bottom: 30px;
}
#service-details .single-tab-list ul.nav-pills li.nav-item a {
  background: #fff;
  color: #333;
  font-size: 18px;
  font-weight: 400;
  border-left: 4px solid #18ba60;
  border-radius: 0px;
  padding: 20px 25px;
  display: block;font-family: 'Roboto Slab', serif;position: relative;
}
#service-details .single-tab-list ul.nav-pills li.nav-item a i {
  position: absolute;
  z-index: 1;
  right: 6%;
  font-size: 28px;
  top: 26%;
}
#service-details .single-tab-list ul.nav-pills li.nav-item a :hover{background-color: #18ba60;color: #fff;-webkit-transition: all 0.55s ease;
  -o-transition: all 0.55s ease;
  transition: all 0.55s ease;}
#service-details .single-tab-list ul.nav-pills li.nav-item a i:hover{background-color: transparent;color: #333;-webkit-transition: all 0.55s ease;
  -o-transition: all 0.55s ease;
  transition: all 0.55s ease;}
#service-details .single-tab-list ul.nav-pills li.nav-item a.active{background-color: #18ba60;color: #fff;-webkit-transition: all 0.55s ease;
  -o-transition: all 0.55s ease;
  transition: all 0.55s ease;}
/*Single Page Accordion*/
.single-page-accordion .card-header, .card-link,.card-link:hover{background-color:#000;text-align:left;color:hotpink;}
.single-page-accordion .card-header {
  padding: 20px 30px;
}
.single-page-accordion .card-body {
  padding: 13px 30px 22px 30px;
  color: #777;
  font-size: 16px;
  line-height: 27px;
  border-top: 1px solid #ccc;
}
.single-page-accordion .card{border: none;-webkit-box-shadow: 0 0px 35px rgba(232, 232, 232, 1.1);
-moz-box-shadow: 0 0px 35px rgba(232, 232, 232, 1.1);
box-shadow: 0 0px 35px rgba(232, 232, 232, 1.1);}
.single-page-accordion .card-header, .card-link, .card-link:hover {
  background-color: #fff;
  text-align: left;
  color: #777;
  font-size: 16px;
  border: none;
  font-weight: normal;
}
 .card-header span{position:absolute;top:20px;right:20px;font-size:20px;color:#777;
-webkit-animation: minus 0.5s;}

@keyframes minus {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}
[aria-expanded="false"] > .expanded, [aria-expanded="true"] > .collapsed {display: none;}
.single-page-accordion span.expanded i{ color: #18ba60}
.single-page-accordion .card-header a.current{color:#18ba60 }
/*Free Contact From*/
.free-consult {
  padding: 45px 30px;
  background-color: #f8f8f8;
}
.free-consult h4{font-size: 24px;color: #333333;margin-bottom: 25px}

.free-consult input[type="text"] {
  border-radius: 0px;
  padding: 0 19px;
}
.free-consult input[type="email"]{  border-radius: 0px;
  padding: 0 19px;}
.free-consult textarea{  border-radius: 0px;
}
.free-consult input[type=text]:focus, input[type=email]:focus, .free-consult textarea:focus {
  -webkit-transition: all 0.30s ease-in-out;
  -moz-transition: all 0.30s ease-in-out;
  -ms-transition: all 0.30s ease-in-out;
  -o-transition: all 0.30s ease-in-out;
  outline: none;
  border: 1px solid #18ba60;
    box-shadow: none;
    -webkit-box-shadow: none;
}
.free-consult button.free-btn {
  background: #18ba60;
  border: none;
  font-size: 16px;
  text-transform: uppercase;
  display: block;
  padding: 10px 45px;
  border-radius: 50px;
  font-weight: 600;
}
/*Tab content css*/
.top-tab-content {
  margin-bottom: 30px;
}
.top-tab-content h4 {
  font-size: 24px;
  color: #333333;
  position: relative;
  padding-bottom: 50px;
}
.top-tab-content h4::after {
  content: "";
  background: #18ba60;
  position: absolute;
  width: 80px;
  height: 5px;
  left: 0;
  border-radius: 5px;
  top: 45px;
}
.top-tab-content p{}
.tab-qoute p{
  padding: 20px;
  background-color: #f8f8f8;
  margin-top: 30px;
  margin-bottom: 30px;
  font-style: italic;display: block;
}
.tab-content-p{
  margin-bottom: 30px;display: block;
}
.tab-md-content{max-width: 100%;display: block;}
.tab-accordion{}
.tab-accordion h4 {
  color: #333;
  font-size: 23px;
  line-height: 36px;
  display: block;
  margin-bottom: 30px;
}
/*----------------------------------------*/
/*7. Project Page CSS
    7.1 Main Project css

/*----------------------------------------*/
.custom-padding {
  margin-left: 18.667%;
}
.filters {
  position: relative;
}
.filters ul {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid #ccc;
  overflow: hidden;
  display: block;
  border-radius: 50px;
}
.filters ul li.active{color: #fff;-webkit-transition:all 0.25s ease-in-out;
    -moz-transition:all 0.25s ease-in-out;
    -o-transition:all 0.25s ease-in-out;
    -ms-transition:all 0.25s ease-in-out;
    transition:all 0.25s ease-in-out;background-color: #18ba60;

border-radius: 35px;}
.filters ul li:last-child {
    padding-right: 39px;
}
.filters ul li {
    padding: 0;
    list-style: none;
    float: left;
    color: #333333;
    font-size: 18px;
    font-weight: 400;
    display: inline-block;
    padding:15px 37px;
    cursor: pointer;
    position: relative;font-family: 'Roboto Slab', serif;line-height: 18px;margin:3px;
}
.single-content {
    margin-top: 50px;
    display: block;
    overflow: hidden;
}
.project-captions {
    padding: 10px;
}
.project-item img {
    display: block;
    margin: 0px auto;
    width: 100%;
    height: auto;
}
.project-item figure{
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    
}
.project-item figure {
    float: left;
    padding: 0px;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: auto;
}
.project-item figure:hover .caption{
    opacity: 1;
}
.project-item figure:hover img{
    opacity: 1;
    transform: scale(1.15,1.15);
    -webkit-transform:scale(1.15,1.15);
    -moz-transform:scale(1.15,1.15);
    -ms-transform:scale(1.15,1.15);
    -o-transform:scale(1.15,1.15);
}
.project-item figure img {
  margin: 0px;
  padding: 0px;
  float: left;
  z-index: 0;
  border-radius: 6px;
}
.project-item figure .caption{

    position: absolute;
    opacity: 0;
    -webkit-transition:all 0.45s ease-in-out;
    -moz-transition:all 0.45s ease-in-out;
    -o-transition:all 0.45s ease-in-out;
    -ms-transition:all 0.45s ease-in-out;
    transition:all 0.45s ease-in-out;width: 100%;
    height: 100%;
    left: 0;
    right: 0;
}
.project-item figure img{
    -webkit-transition:all 0.25s ease-in-out;
    -moz-transition:all 0.25s ease-in-out;
    -o-transition:all 0.25s ease-in-out;
    -ms-transition:all 0.25s ease-in-out;
    transition:all 0.25s ease-in-out;
}
.project-item figure .blur {
  background-color: #18ba60cc;
  width: 100%;
  height: 100%;
  z-index: 5;
  position: absolute;
}
.project-item figure .project-captions h1{
    text-transform: uppercase;
    font-size: 24px;
}
.project-item figure .project-captions {
    z-index: 10;
    color: #fff;
    position: absolute;
width: 100%;
    height: 100%;
    text-align: center;
    padding: 28px;
}
div.project-item figure .project-captions h4 {
    font-size: 24px;
    font-weight: 400;
    color: #fff;
    text-align: left;
    margin-bottom: 20px;
}
div.project-item figure .project-captions p {
    color: #fff;
    font-size: 16px;
    text-align: left;
    line-height: 27px;
}
div.project-item figure .project-captions a {
  position: absolute;
  z-index: 123;
  right: 0;
  bottom: 18px;
  background-color: #fff;
  border: none;
  border-radius: 0;
  color: #333333;
  font-size: 16px;
  padding: 15px 20px;
  font-weight: 600;
}
.project-captions a.btn-primary.focus, .project-captions a.btn-primary:focus {
    -webkit-box-shadow: none!important;
    box-shadow: none!important;
    background-color: #18ba60!important;
    
}
div.project-item figure .project-captions a:hover{background-color: #18ba60;
;-webkit-transition: all 0.55s ease;
  -o-transition: all 0.55s ease;
  transition: all 0.55s ease;color: #fff
}
.project-captions .info span i {
  margin-left: 5px;
}
/*----------------------------------------*/
/* 8. Project Details Page CSS
    8.1 Project details  css
/*----------------------------------------*/

#project-details {
  margin-top: 10px;
}
.project-details-thumb{}
.project-details-thumb img {
  display: block;
  max-width: 100%;
  border-radius: 6px;
}
.project-details-right{}
.project-details-right h4 {
  font-size: 24px;
  color: #18ba60;
  display: block;
  margin-bottom: 20px;
}
.project-details-right p{}
.client-data {
  display: block;
  overflow: hidden;
  background-color: #f8f8f8;
  padding: 15px 25px;
  border: 1px solid #ccc;
  border-left: 3px solid #18ba60;
}
.client-data span{color: #333333;font-size: 18px;font-family: 'Roboto Slab', serif;font-weight: 400}
.client-data p{}
.project-information{}
.project-information p{}
.user-pro-list{}
.user-pro-list ul{}
.user-pro-list ul li {
  font-size: 16px;
  color: #333;
  line-height: 39px;
  font-family: 'Roboto Slab', serif;
  display: block;
  position: relative;
  padding-left: 25px;
}
.user-pro-list ul li::before {
  position: absolute;
  content: "";
  width: 15px;
  height: 15px;
  left: 0;
  background: #18ba60;
  top: 37%;
}
.project-details-video {
  position: relative;
  margin-top: 5px;
}
.project-details-video img {
  display: block;
  border-radius: 6px;
  position: relative;
}
.project-details-video:hover:after {
    background-color: #18ba60cc;
}
.project-details-video:after {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    content: "";
    transition: .4s;
/*    background-color: rgba(0, 52, 69, .85);*/
border-radius: 6px;
}
.project-details-video a.icon-video {
  position: absolute;
  border-radius: 50px;
  border: 7px solid #dcdcdc;
  padding: 10px;
  width: 60px;
  height: 60px;
  background: #FFF;
  color: #18ba60;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: inline-block;
  text-align: center;
  z-index: 12;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.project-details-video a.icon-video:hover {
  background: #18ba60;
  color: #FFF;  -webkit-transition: 0.3s;
  transition: 0.3s;
}

/*----------------------------------------*/
/* 9. Our Team Page CSS
    9.1 Chairman section css
/*----------------------------------------*/
#chairman-info{}
.chairman-info{}
.chairman-info h3{color: #000000;font-size: 32px;line-height: 32px;margin-bottom: 20px}
.charim-hr {
  margin-top: 110px;
  display: block;
  margin-bottom: 0px;
}
.chairman-thumb img{max-width: 100%;border-radius: 6px;display: block;}
/*----------------------------------------*/
/* 9. Our Team Page CSS
     9.2 Our Expert section css
/*----------------------------------------*/
.our-experts-title{}
.our-experts-title h2 {
  font-size: 32px;
  color: #000000;
  font-weight: 400;
  margin-bottom: 0;line-height: 25px
}

.our-experts{}
.our-experts-thumb{position: relative;}
.our-experts-thumb img {
  max-width: 100%;
  display: block;
  border-radius: 5px;
/*  border: 2px solid #fff;*/
}
.our-experts-thumb:hover:before {
    background-color: #18ba6099;
}
.our-experts-thumb:before {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    content: "";
    transition: .4s;
/*    background-color: rgba(0, 52, 69, .85);*/
border-radius: 6px;
}
.our-experts-accounts {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 4px 0 0 0;
  margin-right: 25px;
  margin-left: 25px;
  border-radius: 5px 5px 0px 0px;opacity: 0;-webkit-transition: all 0.55s ease;
  -o-transition: all 0.55s ease;
  transition: all 0.55s ease
}
.our-experts:hover .our-experts-accounts{opacity: 1;-webkit-transition: all 0.55s ease;
  -o-transition: all 0.55s ease;
  transition: all 0.55s ease}
div.our-experts:hover .our-experts-info h4{color: #18ba60;-webkit-transition: all 0.55s ease;
  -o-transition: all 0.55s ease;
  transition: all 0.55s ease}
/*.our-experts:hover .our-experts-thumb img{border:2px solid#18ba60; -webkit-transition: all 0.55s ease;
  -o-transition: all 0.55s ease;
  transition: all 0.55s ease}*/
.our-experts-accounts ul.social-accounts {
  margin: 0px;
  padding: 0px;
  list-style: none;
}
.our-experts-accounts ul.social-accounts li {
  display: inline-block;
}
.our-experts-accounts ul.social-accounts li a {
  padding: 8px 10px 5px 10px;
  text-align: center;
  display: block;
}
.our-experts-accounts ul.social-accounts li a:hover {
 color: #18ba60;-webkit-transition: all 0.55s ease;
  -o-transition: all 0.55s ease;
  transition: all 0.55s ease
}
.our-experts-accounts ul.social-accounts li a span i:hover {
 color: #18ba60;-webkit-transition: all 0.55s ease;
  -o-transition: all 0.55s ease;
  transition: all 0.55s ease
}
.our-experts-accounts ul.social-accounts li a span i {
  font-size: 18px;
  color: #a0a0a0;
}
.our-experts-info{margin-top: 25px}
.our-experts-info h4 {
  color: #333333;
  text-align: center;
  display: block;
  font-size: 18px;
  line-height: 25px;
  margin: 0;
}
.our-experts-info p {
  text-align: center;
  line-height: 12px;
  margin-top: 10px;
}
.expert-team-thumb:hover:before {
    background-color: #18ba6099;
}
.expert-team-thumb:before {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    content: "";
    transition: .4s;
/*    background-color: rgba(0, 52, 69, .85);*/
border-radius: 6px;
}
/*----------------------------------------*/
/* 9. Our Team Page CSS
    9.3 Join The Team section css
/*----------------------------------------*/

#join_our_team{}
.join-team{}
.join-team h4 {
  font-size: 32px;
  color: #000000;
  font-weight: 400;
  margin-bottom: 30px;
}
.join-team p{margin-bottom: 30px}
.join-team a{font-weight: 600;font-size: 16px;color: #fffffe;}
.join-team a.btn-primary {
  background-color: #18ba60;
  display: inline-block;
  border: none;
  padding: 10px 30px;
  text-decoration: none;
  border-radius: 25px;
}
.join-team a:hover{
  background-color:#11954b;-webkit-transition: all 0.55s ease;
  -o-transition: all 0.55s ease;
  transition: all 0.55s ease

}
/*----------------------------------------*/
/* 10. Team Member Details Page CSS
    10.1 Member Details css
/*----------------------------------------*/
.recent-project-title h2 {
  font-size: 32px;
  color: #000000;
  font-weight: 400;
  margin-bottom: 0;
}

.member-details-thumb{}
.member-details-thumb img{max-width: 100%;border-radius: 6px;display: block;}
.single-member-info{}
.single-member-info h3 {
  font-size: 24px;
  color: #333333;
  font-weight: 400;
  line-height: 16px;
  margin-bottom: 15px;
}
.single-member-info p{margin-bottom: 20px}
.single-member-info span {
  font-size: 16px;
  color: #777777;
  margin-bottom: 15px;
  display: block;
}

.team-details-icon span i{
  display: inline-block;
  text-align: center;
  color: #18ba60;
  font-size: 18px;
  margin-left: 0px;
  line-height: 0;
  margin-right: 10px;
}
.team-details-icon span i.flaticon-mail::before {
  font-size: 20px;
}
.team-details-icon span strong{ margin-right: 10px;font-weight: 600;color: #000}
.team-member-info p{}
.team-member-info{}
#member-details span.member-phone i{color: #18ba60;margin-right: 5px;

}
#member-details span.member-email i{color: #18ba60;margin-right: 5px;

}
#member-details span.member-phone {
  font-size: 16px;
  color: #777;
  line-height: 24px;
  display: block;
  font-weight: 400;
}
#member-details span.member-phone strong{font-size: 18px;color: #333333;font-family: 'Roboto Slab', serif;font-weight: 400;margin-right: 10px;}
#member-details span.member-email{}
#member-details span.member-email strong{font-size: 18px;color: #333333;font-family: 'Roboto Slab', serif;font-weight: 400;margin-right: 10px;}

.single-member-info ul#member-accounts {
  margin: 0px;
  padding: 0px;
  list-style: none;
  display: block;
  overflow: hidden;
  margin-top: 15px;
}
.single-member-info ul#member-accounts li{float: left}
.single-member-info ul#member-accounts li a {
  padding: 7px 12px;
  margin-right: 12px;
  color: #fff;
  text-decoration: none;
  border: 1px solid #ddd;
  text-align: center;
  display: block;
}
.single-member-info ul#member-accounts li a span{font-size: 14px;margin-bottom: 0px}
.single-member-info ul#member-accounts li a span i{color: #18ba60}
.single-member-info ul#member-accounts li a:hover span i{color: #fff}
.single-member-info ul#member-accounts li a:hover{  border: 1px solid #000;background-color: #18ba60}
/*----------------------------------------*/
/* 10. Team Member Details Page CSS
    10.2 Recent Works css
/*----------------------------------------*/
.recent-project-captions {
    padding: 10px;
}
.recent-project-item img {
    display: block;
    margin: 0px auto;
    width: 100%;
    height: auto;
}
.recent-project-item figure{
    list-style-type: none;
    margin: 0px;
    padding: 0px;   
}
.recent-project-item figure {
    float: left;
    padding: 0px;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: auto;
}
.recent-project-item figure:hover .caption{
    opacity: 1;
}
.recent-project-item figure:hover img{
    opacity: 1;
    transform: scale(1.15,1.15);
    -webkit-transform:scale(1.15,1.15);
    -moz-transform:scale(1.15,1.15);
    -ms-transform:scale(1.15,1.15);
    -o-transform:scale(1.15,1.15);
}
.recent-project-item figure img {
  margin: 0px;
  padding: 0px;
  float: left;
  z-index: 0;
  border-radius: 6px;
}
.recent-project-item figure .caption{
    position: absolute;
    opacity: 0;
    -webkit-transition:all 0.45s ease-in-out;
    -moz-transition:all 0.45s ease-in-out;
    -o-transition:all 0.45s ease-in-out;
    -ms-transition:all 0.45s ease-in-out;
    transition:all 0.45s ease-in-out;width: 100%;
    height: 100%;
    left: 0;
    right: 0;
}
.recent-project-item figure img{
    -webkit-transition:all 0.25s ease-in-out;
    -moz-transition:all 0.25s ease-in-out;
    -o-transition:all 0.25s ease-in-out;
    -ms-transition:all 0.25s ease-in-out;
    transition:all 0.25s ease-in-out;
}
.recent-project-item figure .blur {
  background-color: #18ba60cc;
  width: 100%;
  height: 100%;
  z-index: 5;
  position: absolute;
}
.recent-project-item figure .recent-project-captions h1{
    text-transform: uppercase;
    font-size: 24px;
}
.recent-project-item figure .recent-project-captions {
    z-index: 10;
    color: #fff;
    position: absolute;
width: 100%;
    height: 100%;
    text-align: center;
    padding: 28px;
}
div.recent-project-item figure .recent-project-captions {}
div.recent-project-item figure .recent-project-captions h4 {
    font-size: 24px;
    font-weight: 400;
    color: #fff;
    text-align: left;
    margin-bottom: 20px;
}
div.recent-project-item figure .recent-project-captions p {
    color: #fff;
    font-size: 16px;
    text-align: left;
    line-height: 27px;
}
div.recent-project-item figure .recent-project-captions a {
  position: absolute;
  z-index: 123;
  right: 0;
  bottom: 18px;
  background-color: #fff;
  border: none;
  border-radius: 0;
  color: #333333;
  font-size: 16px;
  padding: 15px 20px;
  font-weight: 600;
}
.recent-project-captions a.btn-primary.focus, .recent-project-captions a.btn-primary:focus {
    -webkit-box-shadow: none!important;
    box-shadow: none!important;
    background-color: #18ba60!important;
}
div.recent-project-item figure .recent-project-captions a:hover{background-color: #18ba60;
;-webkit-transition: all 0.55s ease;
  -o-transition: all 0.55s ease;
  transition: all 0.55s ease;color: #fff
}
.recent-project-captions .info span i {
  margin-left: 5px;
}
/*----------------------------------------*/
/* 11. Blog List Page CSS
    11.1 Blog list section css
/*----------------------------------------*/
.blog-list-content h3 a {
  color: #333333;
  font-size: 24px;
}
.blog-list-content a.read-more {
  color: #333333;
  font-size: 16px;
  text-decoration: none;font-weight: 600
}
.blog-list-thumb img{display: block;border-radius: 6px;max-width: 100%}
.blog-list-content .meta-info {
  display: block;
  overflow: hidden;
  margin-bottom: 15px;
}
.blog-list-content .meta-info ul {
  margin: 0px;
  padding: 0px;
  list-style: none;
}
.blog-list-content .meta-info ul li {
  float: left;
  margin-right: 25px;
}
.blog-list-content .meta-info ul li a {
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  list-style: none;
}
.blog-list-content .meta-info ul li span i {
  padding-right: 5px;color: #18ba60
}

#blog-list .blog-list-content:hover a.read-more{color:#18ba60;-webkit-transition: all 0.55s ease;
  -o-transition: all 0.55s ease;
  transition: all 0.55s ease}

#blog-list .blog-list-content:hover h3 a{color:#18ba60;-webkit-transition: all 0.55s ease;
  -o-transition: all 0.55s ease;
  transition: all 0.55s ease}

.load-more-posts a.load-p:hover{background: #11954b;-webkit-transition: all 0.55s ease;
  -o-transition: all 0.55s ease;
  transition: all 0.55s ease}
.load-more-posts a.load-p {
  background: #18ba60;
  border: none;
  font-size: 16px;
  text-transform: uppercase;
  padding: 13px 38px;
  border-radius: 50px;
  font-weight: 600;
  color: #fff;
  display: inline-block;
}
/*----------------------------------------*/
/* 12. Blog Grid Page CSS
    12.1 Blog Grid section css
/*----------------------------------------*/
#blog-section .card {
  border-radius: 0px;
  border: none;
}
#blog-section .card-body {
  padding: 0px;
 
}
#blog-section .blog-info {
  margin-bottom: 15px;
  display: block;
}
#blog-section .card-title {
  margin-bottom: .75rem;
  margin-top: 15px;
}
/*#blog-section .card:hover{    -webkit-box-shadow: 0px 0px 24px 0px rgba(81, 81, 81, 0.12);
-moz-box-shadow: 0px 0px 24px 0px rgba(81, 81, 81, 0.12);
box-shadow: 0px 0px 24px 0px rgba(81, 81, 81, 0.12);-webkit-transition: all 0.55s ease;
  -o-transition: all 0.55s ease;
  transition: all 0.55s ease;}*/
#blog-section .card:hover .blog-info a.read-more{color:#18ba60;-webkit-transition: all 0.55s ease;
  -o-transition: all 0.55s ease;
  transition: all 0.55s ease}
#blog-section .card:hover .blog-info a.read-more span i{color:#18ba60;-webkit-transition: all 0.55s ease;
  -o-transition: all 0.55s ease;
  transition: all 0.55s ease}
#blog-section .card:hover .blog-info h5 a{color:#18ba60;-webkit-transition: all 0.55s ease;
  -o-transition: all 0.55s ease;
  transition: all 0.55s ease}

.blog-grid-thumb{}
.blog-grid-thumb img {
  max-width: 100%;
  min-height: auto;
  display: block;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  border-radius: 6px;
}
.post-details-img img {
    border-radius: 5px;
    max-width: 100%;
}
.blog-dates span a{
    color: #777;
    font-size: 12px;text-decoration: none
}
.blog-dates span{margin-right: 30px}
.blog-dates a:hover{
color:#18ba60;-webkit-transition: all 0.55s ease;
  -o-transition: all 0.55s ease;
  transition: all 0.55s ease
}
.blog-dates span i{    color: #18ba60;
    font-size: 16px;margin-right: 10px}
.blog-info h5 a{font-size: 24px;color: #333333;font-weight: 400; line-height: 1.4;}
.blog-info p {
    color: #777;
    font-size: 16px;
    line-height: 27px;
    margin-bottom: 15px;
}
.blog-info a.read-more {
    color: #333333;
    font-size: 16px;
    font-weight: 400;
    text-decoration: none;
    position: relative;
}
.blog-info a.read-more span i {
  font-size: 24px;
  color: #333333;
  position: absolute;
  right: -30px;
  top: 1px;
}
/*----------------------------------------*/
/* 13. Single Blog Page CSS
    13.1 Single Blog Section css

/*----------------------------------------*/
.single-post-detail h2 {
  font-size: 32px;
  margin: 0;
  color: #333333;
}
.post-info {
  padding: 8px 0 15px 0px;
}
.post-details-img img {
    border-radius: 5px;
}
.post-details-img {
    padding-bottom: 20px;
}
.single-post-detail p {
    margin: 0;
    padding-bottom: 20px;
    line-height: 27px;
    font-size: 16px;
    color: #888888;
}
.post-info span {
  margin-right: 30px;
  font-size: 14px;
  color: #888888;
}
.post-info span a {
    color: #929292;
}
.post-info span i {
  padding-right: 5px;
  color: #18ba60;
  font-size: 16px;
}
.post-content-end hr {
  border-color: #e9e9e9;
  margin-top: 30px;
  margin-bottom: 20px;
}
.post-tags b {
    text-transform: capitalize;
    color: #1d2025;
}
.post-tags a {
    display: inline-block;
    color: #888888;
    transition: .3s;
    padding-left: 5px;
    text-transform: capitalize;
}
.post-tags a:hover {
    color: #fab702;-webkit-transition: all 0.55s ease;
  -o-transition: all 0.55s ease;
  transition: all 0.55s ease
}
.post-social-share ul {
    margin: 0;
    padding: ;
    padding: 0;
}
.post-social-share ul li {
    padding-left: 10px;
}
.post-social-share ul li:first-child{
  padding-left: 0;
  color: #333333;
}
.post-social-share ul li a {
    display: inline-block;
    width: 30px;
    height: 30px;
    border: 1px solid;
    text-align: center;
    line-height: 30px;
    border-radius: 50%;
    color: #cccccc;text-decoration: none
}
.post-social-share ul li a.fb{background-color: #1679c6;color: #fff;border:1px solid#1679c6;}
.post-social-share ul li a.skype{background-color: #00abea;color: #fff;border:1px solid#00abea;}
.post-social-share ul li a.be{background-color: #1c48f3;color: #fff;border:1px solid#1c48f3;}
.post-social-share ul li a.gplus{background-color: #ea3d00;color: #fff;border:1px solid#ea3d00;}
.post-social-share ul li a:hover{border:1px solid#18ba60;background-color: #18ba60;color: #fff;-webkit-transition: all 0.55s ease;
  -o-transition: all 0.55s ease;
  transition: all 0.55s ease}
.post-social-share ul li a i {
    display: block;
    padding-top: 6px;
}
.comment-display h5 span.reply a{color: #fab702}
.comment-display h5 span.reply i {
    color: #fab702;
    margin-right: 5px;
}
.post-social-share ul li a i {
    display: block;
    font-size: 12px;
    padding-top: 8px;
}
.comment-area h2, .post-comment-form h2 {
    padding: 50px 0 30px 0;
    font-size: 30px;
    color: #333333;
}
.post-comment-form h2 {
    padding-top: 0;
}
.comment-display h5 {
    font-size: 18px;
    margin-bottom: 20px;
    color: #333333;
    font-weight: 500;
}
.comment-display span {
    display: block;
    font-size: 12px;
    margin-top: 8px;
    color: #777777;
}
.post-comment-form input, .post-comment-form textarea {
    outline: none;
    box-shadow: none;
    border: 1px solid #e7e7e7;
    border-radius: 5px;
    width: 100%;
    padding: 13px;
    color: #777777;
}
.post-comment-form textarea {
    resize: none;
    margin-top: 30px;
}
.comment-submit-btn {
  display: inline-block;
  margin-left: 15px;
  margin-top: 50px;
  background-color: #18ba60;
  color: #fff;
  padding: 13px 40px;
  border-radius: 35px;
  letter-spacing: 1px;
  border: 1px solid #18ba60;
  font-size: 16px;
  text-decoration: none;
  font-weight: 600;
}
a.comment-submit-btn{color: #fff;text-transform: uppercase;}
.comment-submit-btn:hover{
    background-color: #11954b;
    color: #fff;
    border: 1px solid #18ba60;-webkit-transition: all 0.55s ease;
  -o-transition: all 0.55s ease;
  transition: all 0.55s ease;text-decoration: none
}
.author-blog img{width: 100%;height: auto;display: block;}

.post-comment-form input[type=text]:focus,.post-comment-form textarea:focus {
  -webkit-transition: all 0.30s ease-in-out;
  -moz-transition: all 0.30s ease-in-out;
  -ms-transition: all 0.30s ease-in-out;
  -o-transition: all 0.30s ease-in-out;
  outline: none;
  border: 1px solid #18ba60;
}
.search-widget{position: relative;}
.search-widget a.search-icon{position: absolute;right: 0;z-index: 12}
.single-widget.cat-widget-right ul {
    margin: 0;
    padding: 0;
}
.single-widget.cat-widget-right ul li a {
    display: inline-block;
    color: #333;
    margin-bottom: 0;
    padding: 15px;
    text-transform: capitalize;
    letter-spacing: 1px;
    width: 100%;
    border-radius: 5px;
    transition: .3s;
    font-size: 16px;
}
.single-widget.cat-widget-right ul li a i {
  margin-right: 10px;
}
.single-widget.cat-widget-right ul li {
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-bottom: 20px;
}
.single-widget.cat-widget-right ul li a:hover {
background: #18ba60;
    color: #fff;-webkit-transition: all 0.55s ease;
  -o-transition: all 0.55s ease;
  transition: all 0.55s ease
}
.sidget-title h2 {
    font-size: 32px;
    margin: 50px 0 25px 0;
    letter-spacing: 1px;
    color: #333;
}
.single-widget.search-widget input {
    padding: 15px 12px;
    border-radius: 5px;
    outline: none;
    border: 1px solid #e7e7e7;
    position: relative;
}
.single-widget.search-widget input {
    width: 100%;
}
.single-widget.search-widget a {
    display: inline-block;
    position: absolute;
    right: 0;
    top: 0;
    background: #18ba60;
    color: #fff;
    padding: 16px 20px;
    border-radius: 5px;
}
.single-widget.small-posts .media-body h5 {
    font-size: 16px;
    line-height: 28px;
    margin-bottom: 30px;
}
.single-widget.small-posts .media-body h5 span {
  display: block;
  color: #777;
  font-size: 12px;
  font-weight: 400;
}
.small-posts .media-body h5 a {
  color: #777777;
  transition: .3s;
}
.about-p{
margin-top: 15px
}
.small-posts .media-body h5 a:hover {
    color: #18ba60;-webkit-transition: all 0.55s ease;
  -o-transition: all 0.55s ease;
  transition: all 0.55s ease
}
/*----------------------------------------*/
/* 14. Contact Page CSS
   14.1 Cotact Address Section css

/*----------------------------------------*/
#address-section{}
.contact-address{}
.contact-address span i::before {
  display: block;
  text-align: center;
  color: #18ba60;
  font-size: 30px;
  margin-left: 0px;line-height: 35px;
}
.contact-address span {
  font-size: 18px;
  color: #333333;
  line-height: 25px;
  font-family: 'Roboto Slab', serif;
  font-weight: 400;
  display: block;
  margin-bottom: 15px;
}
.contact-address p {
  line-height: 10px;
}
/*----------------------------------------*/
/* 14. Contact Page CSS
   14.2 Map Section css

/*----------------------------------------*/
#map {
    height: 450px;
    width: 100%;
}
/*----------------------------------------*/
/* 14. Contact Page CSS
   14.3 Form  Section css

/*----------------------------------------*/

.contact-title h1{font-size: 32px;color: #333333;line-height: 38px}
.controls .form-row {
    margin-right: 0px;
    margin-left: 0px;
    margin-bottom: 15px;
}
#contact-form {
    margin-bottom: 0px;
}
.controls .form-row > .col, .form-row > [class*="col-"] {
    padding-right: 16px;
    padding-left: 15px;
}
.controls input[type="text"] {
outline: none;
box-shadow: none;
color: #777777;
font-size: 16px;
border: 1px solid #E8E8E8;
padding: 23px 20px;
display: block;
}
.controls input[type=email]{outline: none;
  box-shadow: none;
  color: #777777;
  font-size: 16px;
  border: 1px solid #E8E8E8;
  padding: 23px 20px;
  display: block;
}
.controls textarea{    color: #777777;
  font-size: 16px;
  border: 1px solid #E8E8E8;
  padding: 15px;}

.controls input[type=text]:focus, input[type=email]:focus,.controls textarea:focus {
  -webkit-transition: all 0.30s ease-in-out;
  -moz-transition: all 0.30s ease-in-out;
  -ms-transition: all 0.30s ease-in-out;
  -o-transition: all 0.30s ease-in-out;
  outline: none;
  border: 1px solid #18ba60;
    box-shadow: none;
    -webkit-box-shadow: none;
}
.contact-submit-btn {
    display: inline-block;
    margin-left: 0;
    margin-top: 50px;
    background-color: #18ba60;
    color: #fff;
    padding: 13px 40px;
    border-radius: 35px;
    font-weight: 600;
    letter-spacing: 1px;
    border: 1px solid #18ba60;
    font-size: 16px;
    text-decoration: none;
    cursor: pointer;text-transform: uppercase;
}
.contact-submit-btn:hover{
    background-color: #11954b;
    color: #fff;
    border: 1px solid #11954b;-webkit-transition: all 0.55s ease;
  -o-transition: all 0.55s ease;
  transition: all 0.55s ease;text-decoration: none
}
/*Preloader animate css*/


@charset "UTF-8";
/*!
Animate.css - http://daneden.me/animate
Licensed under the MIT license - http://opensource.org/licenses/MIT

Copyright (c) 2014 Daniel Eden
*/

.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.hinge {
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
}
@-webkit-keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
  }
  40%, 43% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
            transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -30px, 0);
            transform: translate3d(0, -30px, 0);
  }

  70% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
            transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -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 {
  0%, 20%, 53%, 80%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
  }

  40%, 43% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
            transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -30px, 0);
            transform: translate3d(0, -30px, 0);
  }

  70% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
            transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -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;
      -ms-transform-origin: center bottom;
          transform-origin: center bottom;
}
@-webkit-keyframes flash {
  0%, 50%, 100% {
    opacity: 1;
  }

  25%, 75% {
    opacity: 0;
  }
}
@keyframes flash {
  0%, 50%, 100% {
    opacity: 1;
  }

  25%, 75% {
    opacity: 0;
  }
}
.flash {
  -webkit-animation-name: flash;
          animation-name: flash;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes pulse {
  0% {
    -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);
  }

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

@keyframes pulse {
  0% {
    -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);
  }

  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}
.pulse {
  -webkit-animation-name: pulse;
          animation-name: pulse;
}

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

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

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

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
            transform: scale3d(1.15, 0.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);
  }

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

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

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

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

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
            transform: scale3d(1.15, 0.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);
  }

  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}
.rubberBand {
  -webkit-animation-name: rubberBand;
          animation-name: rubberBand;
}

@-webkit-keyframes shake {
  0%, 100% {
    -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 {
  0%, 100% {
    -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 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);
  }

  100% {
    -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);
  }

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

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

@-webkit-keyframes tada {
  0% {
    -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);
  }

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

@keyframes tada {
  0% {
    -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);
  }

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

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

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes wobble {
  0% {
    -webkit-transform: none;
            transform: none;
  }

  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);
  }

  100% {
    -webkit-transform: none;
            transform: none;
  }
}

@keyframes wobble {
  0% {
    -webkit-transform: none;
            transform: none;
  }

  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);
  }

  100% {
    -webkit-transform: none;
            transform: none;
  }
}

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

@-webkit-keyframes bounceIn {
  0%, 20%, 40%, 60%, 80%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  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);
  }

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

@keyframes bounceIn {
  0%, 20%, 40%, 60%, 80%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  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);
  }

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

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

@-webkit-keyframes bounceInDown {
  0%, 60%, 75%, 90%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  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);
  }

  100% {
    -webkit-transform: none;
            transform: none;
  }
}

@keyframes bounceInDown {
  0%, 60%, 75%, 90%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  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);
  }

  100% {
    -webkit-transform: none;
            transform: none;
  }
}

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

@-webkit-keyframes bounceInLeft {
  0%, 60%, 75%, 90%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  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);
  }

  100% {
    -webkit-transform: none;
            transform: none;
  }
}

@keyframes bounceInLeft {
  0%, 60%, 75%, 90%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  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);
  }

  100% {
    -webkit-transform: none;
            transform: none;
  }
}

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

@-webkit-keyframes bounceInRight {
  0%, 60%, 75%, 90%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  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);
  }

  100% {
    -webkit-transform: none;
            transform: none;
  }
}

@keyframes bounceInRight {
  0%, 60%, 75%, 90%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  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);
  }

  100% {
    -webkit-transform: none;
            transform: none;
  }
}

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

@-webkit-keyframes bounceInUp {
  0%, 60%, 75%, 90%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    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);
  }

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

@keyframes bounceInUp {
  0%, 60%, 75%, 90%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    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);
  }

  100% {
    -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);
  }

  100% {
    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);
  }

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

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

@-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);
  }

  100% {
    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);
  }

  100% {
    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);
  }

  100% {
    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);
  }

  100% {
    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);
  }

  100% {
    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);
  }

  100% {
    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);
  }

  100% {
    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);
  }

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

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

@-webkit-keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

@keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

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

@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

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

@-webkit-keyframes fadeInDownBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
            transform: translate3d(0, -2000px, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

@keyframes fadeInDownBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
            transform: translate3d(0, -2000px, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

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

@-webkit-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

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

@-webkit-keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
            transform: translate3d(-2000px, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

@keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
            transform: translate3d(-2000px, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

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

@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

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

@-webkit-keyframes fadeInRightBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
            transform: translate3d(2000px, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

@keyframes fadeInRightBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
            transform: translate3d(2000px, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

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

@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}
@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

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

@-webkit-keyframes fadeInUpBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
            transform: translate3d(0, 2000px, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

@keyframes fadeInUpBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
            transform: translate3d(0, 2000px, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

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

@-webkit-keyframes fadeOut {
  0% {opacity: 1;}
  100% {opacity: 0;}
}

@keyframes fadeOut {
  0% {opacity: 1;}
  100% {opacity: 0;}
}

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

@-webkit-keyframes fadeOutDown {
  0% {
    opacity: 1;
  }

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

@keyframes fadeOutDown {
  0% {
    opacity: 1;
  }

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

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

@-webkit-keyframes fadeOutDownBig {
  0% {
    opacity: 1;
  }

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

@keyframes fadeOutDownBig {
  0% {
    opacity: 1;
  }

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

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

@-webkit-keyframes fadeOutLeft {
  0% {
    opacity: 1;
  }

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

@keyframes fadeOutLeft {
  0% {
    opacity: 1;
  }

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

.fadeOutLeft {
  -webkit-animation-name: fadeOutLeft;
          animation-name: fadeOutLeft;
}
@-webkit-keyframes fadeOutLeftBig {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
            transform: translate3d(-2000px, 0, 0);
  }
}
@keyframes fadeOutLeftBig {
  0% {
    opacity: 1;
  }

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

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

@-webkit-keyframes fadeOutRight {
  0% {
    opacity: 1;
  }

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

@keyframes fadeOutRight {
  0% {
    opacity: 1;
  }

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

.fadeOutRight {
  -webkit-animation-name: fadeOutRight;
          animation-name: fadeOutRight;
}
@-webkit-keyframes fadeOutRightBig {
  0% {
    opacity: 1;
  }

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

@keyframes fadeOutRightBig {
  0% {
    opacity: 1;
  }

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

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

@-webkit-keyframes fadeOutUp {
  0% {
    opacity: 1;
  }

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

@keyframes fadeOutUp {
  0% {
    opacity: 1;
  }

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

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

@-webkit-keyframes fadeOutUpBig {
  0% {
    opacity: 1;
  }

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

@keyframes fadeOutUpBig {
  0% {
    opacity: 1;
  }

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

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

@-webkit-keyframes flip {
  0% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
            transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }

  40% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
            transform: perspective(400px) 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) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
            transform: perspective(400px) 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);
            transform: perspective(400px) scale3d(.95, .95, .95);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }

  100% {
    -webkit-transform: perspective(400px);
            transform: perspective(400px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
}

@keyframes flip {
  0% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
            transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }

  40% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
            transform: perspective(400px) 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) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
            transform: perspective(400px) 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);
            transform: perspective(400px) scale3d(.95, .95, .95);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }

  100% {
    -webkit-transform: perspective(400px);
            transform: perspective(400px);
    -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 {
  0% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
            transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-transition-timing-function: ease-in;
            transition-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-transition-timing-function: ease-in;
            transition-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);
  }

  100% {
    -webkit-transform: perspective(400px);
            transform: perspective(400px);
  }
}

@keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
            transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-transition-timing-function: ease-in;
            transition-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-transition-timing-function: ease-in;
            transition-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);
  }

  100% {
    -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 {
  0% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
            transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-transition-timing-function: ease-in;
            transition-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-transition-timing-function: ease-in;
            transition-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);
  }

  100% {
    -webkit-transform: perspective(400px);
            transform: perspective(400px);
  }
}

@keyframes flipInY {
  0% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
            transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-transition-timing-function: ease-in;
            transition-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-transition-timing-function: ease-in;
            transition-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);
  }

  100% {
    -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 {
  0% {
    -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;
  }

  100% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
            transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}

@keyframes flipOutX {
  0% {
    -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;
  }

  100% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
            transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}

.flipOutX {
  -webkit-animation-name: flipOutX;
          animation-name: flipOutX;
  -webkit-animation-duration: .75s;
          animation-duration: .75s;
  -webkit-backface-visibility: visible !important;
          backface-visibility: visible !important;
}

@-webkit-keyframes flipOutY {
  0% {
    -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;
  }

  100% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
            transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0;
  }
}

@keyframes flipOutY {
  0% {
    -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;
  }

  100% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
            transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0;
  }
}

.flipOutY {
  -webkit-backface-visibility: visible !important;
          backface-visibility: visible !important;
  -webkit-animation-name: flipOutY;
          animation-name: flipOutY;
  -webkit-animation-duration: .75s;
          animation-duration: .75s;
}

@-webkit-keyframes lightSpeedIn {
  0% {
    -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);
    opacity: 1;
  }

  100% {
    -webkit-transform: none;
            transform: none;
    opacity: 1;
  }
}

@keyframes lightSpeedIn {
  0% {
    -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);
    opacity: 1;
  }

  100% {
    -webkit-transform: none;
            transform: none;
    opacity: 1;
  }
}

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

@-webkit-keyframes lightSpeedOut {
  0% {
    opacity: 1;
  }

  100% {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
            transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}

@keyframes lightSpeedOut {
  0% {
    opacity: 1;
  }

  100% {
    -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 {
  0% {
    -webkit-transform-origin: center;
            transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
            transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: center;
            transform-origin: center;
    -webkit-transform: none;
            transform: none;
    opacity: 1;
  }
}
@keyframes rotateIn {
  0% {
    -webkit-transform-origin: center;
            transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
            transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: center;
            transform-origin: center;
    -webkit-transform: none;
            transform: none;
    opacity: 1;
  }
}
.rotateIn {
  -webkit-animation-name: rotateIn;
          animation-name: rotateIn;
}

@-webkit-keyframes rotateInDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
            transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
            transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: left bottom;
            transform-origin: left bottom;
    -webkit-transform: none;
            transform: none;
    opacity: 1;
  }
}

@keyframes rotateInDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
            transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
            transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: left bottom;
            transform-origin: left bottom;
    -webkit-transform: none;
            transform: none;
    opacity: 1;
  }
}

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

@-webkit-keyframes rotateInDownRight {
  0% {
    -webkit-transform-origin: right bottom;
            transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
            transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: right bottom;
            transform-origin: right bottom;
    -webkit-transform: none;
            transform: none;
    opacity: 1;
  }
}

@keyframes rotateInDownRight {
  0% {
    -webkit-transform-origin: right bottom;
            transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
            transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: right bottom;
            transform-origin: right bottom;
    -webkit-transform: none;
            transform: none;
    opacity: 1;
  }
}

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

@-webkit-keyframes rotateInUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
            transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
            transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: left bottom;
            transform-origin: left bottom;
    -webkit-transform: none;
            transform: none;
    opacity: 1;
  }
}

@keyframes rotateInUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
            transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
            transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: left bottom;
            transform-origin: left bottom;
    -webkit-transform: none;
            transform: none;
    opacity: 1;
  }
}

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

@-webkit-keyframes rotateInUpRight {
  0% {
    -webkit-transform-origin: right bottom;
            transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -90deg);
            transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: right bottom;
            transform-origin: right bottom;
    -webkit-transform: none;
            transform: none;
    opacity: 1;
  }
}

@keyframes rotateInUpRight {
  0% {
    -webkit-transform-origin: right bottom;
            transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -90deg);
            transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: right bottom;
            transform-origin: right bottom;
    -webkit-transform: none;
            transform: none;
    opacity: 1;
  }
}

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

@-webkit-keyframes rotateOut {
  0% {
    -webkit-transform-origin: center;
            transform-origin: center;
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: center;
            transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, 200deg);
            transform: rotate3d(0, 0, 1, 200deg);
    opacity: 0;
  }
}

@keyframes rotateOut {
  0% {
    -webkit-transform-origin: center;
            transform-origin: center;
    opacity: 1;
  }

  100% {
    -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 {
  0% {
    -webkit-transform-origin: left bottom;
            transform-origin: left bottom;
    opacity: 1;
  }

  100% {
    -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 {
  0% {
    -webkit-transform-origin: left bottom;
            transform-origin: left bottom;
    opacity: 1;
  }

  100% {
    -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 {
  0% {
    -webkit-transform-origin: right bottom;
            transform-origin: right bottom;
    opacity: 1;
  }

  100% {
    -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 {
  0% {
    -webkit-transform-origin: right bottom;
            transform-origin: right bottom;
    opacity: 1;
  }
  100% {
    -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 {
  0% {
    -webkit-transform-origin: left bottom;
            transform-origin: left bottom;
    opacity: 1;
  }

  100% {
    -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 {
  0% {
    -webkit-transform-origin: left bottom;
            transform-origin: left bottom;
    opacity: 1;
  }

  100% {
    -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 {
  0% {
    -webkit-transform-origin: right bottom;
            transform-origin: right bottom;
    opacity: 1;
  }

  100% {
    -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 {
  0% {
    -webkit-transform-origin: right bottom;
            transform-origin: right bottom;
    opacity: 1;
  }

  100% {
    -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;
  }

  100% {
    -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;
  }

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

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

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes rollIn {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
            transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

@keyframes rollIn {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
            transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

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

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes rollOut {
  0% {
    opacity: 1;
  }

  100% {
    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 {
  0% {
    opacity: 1;
  }

  100% {
    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 {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
            transform: scale3d(.3, .3, .3);
  }

  50% {
    opacity: 1;
  }
}

@keyframes zoomIn {
  0% {
    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 {
  0% {
    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(0.550, 0.055, 0.675, 0.190);
            animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  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(0.175, 0.885, 0.320, 1);
            animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

@keyframes zoomInDown {
  0% {
    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(0.550, 0.055, 0.675, 0.190);
            animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  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(0.175, 0.885, 0.320, 1);
            animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

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

@-webkit-keyframes zoomInLeft {
  0% {
    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(0.550, 0.055, 0.675, 0.190);
            animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  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(0.175, 0.885, 0.320, 1);
            animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

@keyframes zoomInLeft {
  0% {
    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(0.550, 0.055, 0.675, 0.190);
            animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  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(0.175, 0.885, 0.320, 1);
            animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

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

@-webkit-keyframes zoomInRight {
  0% {
    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(0.550, 0.055, 0.675, 0.190);
            animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  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(0.175, 0.885, 0.320, 1);
            animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

@keyframes zoomInRight {
  0% {
    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(0.550, 0.055, 0.675, 0.190);
            animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  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(0.175, 0.885, 0.320, 1);
            animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

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

@-webkit-keyframes zoomInUp {
  0% {
    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(0.550, 0.055, 0.675, 0.190);
            animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  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(0.175, 0.885, 0.320, 1);
            animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

@keyframes zoomInUp {
  0% {
    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(0.550, 0.055, 0.675, 0.190);
            animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  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(0.175, 0.885, 0.320, 1);
            animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

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

@-webkit-keyframes zoomOut {
  0% {
    opacity: 1;
  }

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

  100% {
    opacity: 0;
  }
}

@keyframes zoomOut {
  0% {
    opacity: 1;
  }

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

  100% {
    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(0.550, 0.055, 0.675, 0.190);
            animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  100% {
    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(0.175, 0.885, 0.320, 1);
            animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 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(0.550, 0.055, 0.675, 0.190);
            animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  100% {
    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(0.175, 0.885, 0.320, 1);
            animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 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);
  }

  100% {
    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);
  }

  100% {
    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);
  }

  100% {
    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);
  }

  100% {
    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(0.550, 0.055, 0.675, 0.190);
            animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  100% {
    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(0.175, 0.885, 0.320, 1);
            animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 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(0.550, 0.055, 0.675, 0.190);
            animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  100% {
    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(0.175, 0.885, 0.320, 1);
            animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

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

@-webkit-keyframes slideInDown {
  0% {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
    visibility: visible;
  }

  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes slideInDown {
  0% {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
    visibility: visible;
  }

  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

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

@-webkit-keyframes slideInLeft {
  0% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
    visibility: visible;
  }

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

@keyframes slideInLeft {
  0% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
    visibility: visible;
  }

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

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

@-webkit-keyframes slideInRight {
  0% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
    visibility: visible;
  }

  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@keyframes slideInRight {
  0% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
    visibility: visible;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
.slideInRight {
  -webkit-animation-name: slideInRight;
          animation-name: slideInRight;
}
@-webkit-keyframes slideInUp {
  0% {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
    visibility: visible;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@keyframes slideInUp {
  0% {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
    visibility: visible;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
.slideInUp {
  -webkit-animation-name: slideInUp;
          animation-name: slideInUp;
}
@-webkit-keyframes slideOutDown {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    visibility: hidden;
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
}
@keyframes slideOutDown {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    visibility: hidden;
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
}
.slideOutDown {
  -webkit-animation-name: slideOutDown;
          animation-name: slideOutDown;
}
@-webkit-keyframes slideOutLeft {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    visibility: hidden;
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}
@keyframes slideOutLeft {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    visibility: hidden;
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}
.slideOutLeft {
  -webkit-animation-name: slideOutLeft;
          animation-name: slideOutLeft;
}
@-webkit-keyframes slideOutRight {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    visibility: hidden;
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
}
@keyframes slideOutRight {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    visibility: hidden;
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
}
.slideOutRight {
  -webkit-animation-name: slideOutRight;
          animation-name: slideOutRight;
}
@-webkit-keyframes slideOutUp {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    visibility: hidden;
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
}
@keyframes slideOutUp {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    visibility: hidden;
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
}
.slideOutUp {
  -webkit-animation-name: slideOutUp;
          animation-name: slideOutUp;
}