<div class="container">
  <div class="row">
    <div class="col-md-12 col-sm-12 col-xs-12">
      <div class="half-headline">
        <h3><span class="grow">Grow</span> <span class="in">In</span><br> The Future of Indoor growing</h3>

      </div>
    </div>
  </div>
  <div class="row">
    <!-- column end -->
    <div class="col-md-6 col-sm-6 col-xs-12">
      <div class="about-content">
        <div class="about-inner">

          <div class="">
            <div class="box padding-block-bottom">
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <div class="content">
                <h4>VERTICAL SEA OF GREEN TECHNOLOGY
                </h4>
                <p>In order to accelerate and optimize production, it is proposed to use the Sea Of Green (SOG) cultivation technology as the main one.
                </p>
                <br>
                <p>The essence of technology:
                </p>
                <div class="about-details">
                  <ul class="about-list">
                    <li>clones are transferred to the flowering stage immediately after rooting, bypassing the stage of vegetation;
                    </li>
                    <li>it is possible to get a uniform "carpet of plants" for the most effective assimilation of light;
                    </li>
                    <li>harvest time is accelerated for at least 2 weeks.
                    </li>

                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- column end -->
    <div class="col-md-6 col-sm-6 col-xs-12">
      <div class="video-inner text-center">
        <div class="video-content">
          <img src="https://upload.wikimedia.org/wikipedia/ru/d/d5/508_towelie.gif">

        </div>
      </div>
    </div>
  </div>
</div>
/*-----------------------------------------------------------------------------------

    Template Name: Canbara - Marijuana Dispensary HTML Template
    Template URI: http://rockstheme.com
    Description: This is html5 template
    Author: Rocks_theme
    Author URI: http://rockstheme.com
    Version: 1.0

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

    /*-----------------------------------------------------------------------------------  
     CSS INDEX
    ===================

    1. Theme Default CSS (body, link color, section etc)
    2. Header Top Area
       2.1. middle header area
       2.2 Header Bottom Area
       2.3 Sticky Header Area
       2.4 Mobile Menu Area
    3. Slider Area
    4.Welcome Services Area
    5. About area
    6.Services Area
    7.Choose Area
    8. banner Area
    9.Product area
    10.product-add
    11. Blog Area
    12.Footer Area
  13. Breadcumbs Area
  14. About video Area
  15. Physician
  16.Testimonial Area Css
  17. Faq Area
  18. Error page
  19. Contact Us page
  20.Sub Services Pages
  21. Blog Details page
  22.Gallery area
  23.ModalCSS
  
    
-----------------------------------------------------------------------------------*/
/*----------------------------------------*/
/*  Google Fonts
/*----------------------------------------*/
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700,800|Open+Sans:400,400i,600,700|Raleway:400,500,600,700,800');


/*----------------------------------------*/
/*  1.  Theme default CSS
/*----------------------------------------*/
html, body {
    height: 100%;
    max-width: 100%;
    overflow-x: hidden;
    }
.floatleft {
  float:left;
}
.floatright {
  float:right;
}
.alignleft {
  float:left;
  margin-right:15px;
  margin-bottom: 15px;
}
.alignright {
  float:right;
  margin-left:15px;
  margin-bottom: 15px;
}
.aligncenter {
  display:block;
  margin:0 auto 15px;
}
a:focus {
  outline:0px solid;
}
img {max-width:100%;
  height:auto;
}
.fix {
  overflow:hidden;
}
p {
  margin:0 0 15px;
    color: #444;
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif;
  margin: 0 0 15px;
  color: #444;
    font-weight: 700;
}
h1{
  font-size: 48px;
  line-height: 50px;
    
}
h2{
  font-size: 40px;
  line-height: 40px;
    
}
h3{
  font-size: 30px;
  line-height: 32px;
    
}
h4{
  font-size: 24px;
  line-height: 26px;
    
}
h5{
  font-size: 20px;
  line-height: 22px;
    
}
h6{
  font-size: 16px;
  line-height: 20px;
    
}
a {
  transition: all 0.3s ease 0s;
  text-decoration:none;
}
a:hover {
  color: #16A05D;
  text-decoration: none;
}
a:active, a:hover {
  outline: 0 none;
}
a:hover, a:focus {
    color: #16A05D;
    text-decoration: none;
}
body {
  background: #fff none repeat scroll 0 0;
  color: #444;
    font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  text-align: left;
  overflow-x: hidden;
  line-height: 26px;
}
#scrollUp {
  background: #16A05D none repeat scroll 0 0;
  border-radius: 2px;
  bottom: 15px;
  border: 2px solid #16A05D;
  color: #fff;
  font-size: 38px;
  height: 50px;
  line-height: 42px;
  right: 15px;
  text-align: center;
  transition: all 0.3s ease 0s;
  width: 50px;
}
#scrollUp:hover {
    background: #fff;
    color: #16A05D;
    border: 2px solid #16A05D;
}
.clear{
  clear:both;
}
ul{
  list-style: outside none none;
  margin: 0;
  padding: 0;
}
input, select, textarea, input[type="text"], input[type="date"], input[type="url"], input[type="email"], input[type="password"], input[type="tel"], button, button[type="submit"] {
  -moz-appearance: none;
  box-shadow: none !important;
}
input:focus, textarea:focus, select:focus {
    outline: none;
}
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
  background-color: #16A05D !important;
  border-color: #16A05D;
  border-image: none;
  border-style: solid;
  border-width: 1px;
  color: #fff !important;
  cursor: default;
  position: relative;
}
div#preloader { 
  position: fixed;
  left: 0; 
  top: 0; 
  z-index: 99999;
  width: 100%;
  height: 100%;
  overflow: visible;
  background: #fff url('img/logo/preloader.gif') no-repeat center center;
}

::-moz-selection {
    background: #16A05D;
    text-shadow: none;
}
::selection {
    background: #16A05D;
    text-shadow: none;
}
.color{
    color:#16A05D;
    font-weight: 900;
}
.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}
.area-padding{
  padding: 90px 0px;
}
.area-padding-2{
    padding: 70px 0px 50px;
}
.padding-2{
    padding-bottom: 90px;
}
.section-headline{
    margin-bottom: 60px;
    position: relative;
}
.section-headline h2 {
    display: inline-block;
    font-size: 42px;
    font-weight: 900;
    text-transform: uppercase;
}
.section-headline.white-headline h2,
.section-headline.white-headline p{
    color:#fff;
}
.section-headline.text-left {
    margin-bottom: 30px;
}
.section-headline::after {
    border: 1px solid rgb(0, 0, 0);
    bottom: -27px;
    content: "";
    left: 0;
    margin: 0 auto;
    position: absolute;
    width: 60px;
    right: 0;
}
.section-headline.left-headline::after {
    bottom: -50px;
    margin: inherit;
}
.section-headline p {
    max-width: 650px;
    font-size: 16px;
    letter-spacing: 0.5px;
    margin: 0 auto;
    line-height: 26px;
}
.half-headline h4 {
    font-size: 26px;
    width: 50%;
    line-height: 32px;
    font-weight: 700;
    text-transform: inherit;
    float: left;
    padding-right: 30px;
    color: rgb(0, 0, 0);
}
.half-headline p {
    width: 50%;
    float: left;
    padding-left: 30px;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0.50px;
    color: #444;
}
.sub-head h4 {
    color: #fff;
    font-size: 30px;
    position: relative;
    padding-bottom: 30px;
}
.sub-head h4::after {
    border: 2px solid #16A05D;
    bottom:0px;
    content: "";
    left: 0;
    margin: 0 auto;
    position: absolute;
    width: 20%;
}
.sub-head p {
    color: #fff;
    font-size: 17px;
    margin-top: 20px;
    line-height: 26px;
}
.left-headline h4 {
    font-size: 26px;
    line-height: 36px;
    position: relative;
    margin-bottom: 50px;
    color: #fff;
}
.center-headline h4 {
    font-size: 26px;
    line-height: 36px;
    position: relative;
    margin-bottom: 50px;
    color: #fff;
}
.mar-row{
    margin-top: 40px;
}
.single-well p{
  margin-bottom: 0px;
}
.bg-color{
    background: #fff;
}
.parallax-bg{
    position:relative;
  z-index: 1;
  background: url(img/background/bg1.jpg);
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
}
.parallax-bg:before{
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background:#ccc;
    opacity:.9;
    content:"";
  z-index: -1;
}
.slogan {
    margin-bottom: 0px;
    padding: 14px 0px;
    color: #fff;
    font-size: 16px;
}
/*--------------------------------*/
/*  2. Header top Area
/*--------------------------------*/
.topbar-area {
    background:#16A05D;
}
.topbar-left {
    padding: 10px 0px;
}
.topbar-left a {
    color: #444;
    background: #fff;
    padding: 2px 10px;
    border: 1px solid #fff;
    margin-right: 5px;
    border-radius: 3px;
    display: inline-block;
    font-weight: 600;
    font-size: 14px;
    line-height: 22px;
}
.topbar-left a:hover{
    color: #16A05D;
}
.topbar-right {
    position: relative;
    display: block;
}
.top-social {
    float: right;
    padding: 11px 0px;
}
.top-social ul li{
    display: inline-block;
}
.top-social ul li a {
    color:#444;
    margin-left: 5px;
    display: block;
    text-align: center;
    font-size: 15px;
    width: 26px;
    height: 26px;
    border-radius: 5px;
    line-height: 25px;
  background: #fff;
}
.top-social ul li a:hover{
  color:#16A05D;
  background: #fff;
}
/*--------------------------------*/
/* 2.1. middle header area
/*--------------------------------*/
.header-middle-area{
    background: #fdfbfb;
}
.header-middle-area .header-info {
    width: 33.33%;
    float: left;
    padding: 33px 0px;
}
.header-middle-area .header-info-text span {
    display: block;
}
.header-middle-area .info-simple{
  font-weight: 700;
  color: #777;
  font-size:14px;
}
.header-middle-area .header-icon {
    float: left;
    margin-right: 10px;
}
.header-middle-area .logo a{
  padding: 25px 0;
}
.header-icon i {
    color: #fff;
    font-size: 26px;
    line-height: 48px;
    width: 50px;
    height: 50px;
    background: #16A05D;
    border-radius: 5px;
    display: inline-block;
    text-align: center;
}
.info-first {
    font-weight: 700;
    color: #444;
    font-size: 16px;
}
/*----------------------------------------*/
/*  2.2 Header Bottom Area 
/*----------------------------------------*/
.logo {
    display: block;
}
.logo a {
    display: inline-block;
    height: auto;
    padding: 25px 0;
}
.main-menu ul.navbar-nav li {
    float: left;
    position: relative;
}
.main-menu ul.navbar-nav li a {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    color: #333;
    font-size: 14px;
    font-weight: 700;
    padding: 45px 15px;
    text-transform: uppercase;
    font-family: 'Montserrat', sans-serif;
}
.main-menu ul.navbar-nav li.active a:focus {
    color: #333;
}
.main-menu ul.navbar-nav li.active a {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    color: #fff;
    position: relative;
    z-index: 9999999;
}
.main-menu ul.navbar-nav li a:hover {
    color:#333;
}
.navbar {
    border: medium none;
    margin-bottom: 0;
}
.navbar-default {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
}
.main-menu ul.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
    background: none;
    color:#333;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
    background-color: transparent;
    color: #333;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
    background: none;
}
.main-menu ul.nav li ul.sub-menu {
    background: #fff;
    border-top: 2px solid #16A05D;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 115%;
    transition: all 0.3s ease 0s;
    visibility: hidden;
    width: 220px;
    z-index: -99;
}
.pagess {
    position: relative;
}
.main-menu ul.nav li ul.sub-menu li {
    border-bottom: 1px solid #ddd;
    padding: 0;
    position: relative;
    width: 100%;
}
.main-menu ul.nav li:hover ul.sub-menu{
    top:100%;
    opacity:1;
    z-index:999;
    visibility:visible;
}
.main-menu ul.nav li ul.sub-menu li a {
    color: #666;
    display: block;
    font-size: 13px;
    font-weight: 700;
    padding: 10px 15px;
    text-transform: uppercase;
    font-family: 'Montserrat', sans-serif;
}
.main-menu ul.nav li ul.sub-menu li a span{
    color: #d00b25;
}
.main-menu ul.nav li:hover ul.sub-menu li a:hover{
    color:#fff;
    background: #16A05D;
}
.main-menu ul.nav li ul.sub-menu li:last-child {
    border:none;
}
.stick span.search-button i,.stick .header-search input{color:#444}
.search-option-5 button.button {
    display: inline-block;
    border: none;
    background: none;
    padding: 0;
}
.navbar.navbar-default {
    float: right;
}
.header-right-link {
    float: right;
}
.search-option {
    background: #fff none repeat scroll 0 0;
    color: #444;
}
.search-option input {
    background: #fff none repeat scroll 0 0;
    border: medium none;
    color: #444;
    display: block;
    float: left;
    font-size: 14px;
    font-style: italic;
    padding: 3px 10px;
    width: 210px;
    height: 36px;
    border: 1px solid #ccc;
}
.search-option button.button {
    background: #16A05D;
    border: medium none;
    color: #fff;
    display: inline-block;
    float: right;
    font-size: 17px;
    line-height: 30px;
    padding: 3px 10px;
    text-align: center;
    width: 50px;
}
.header-right-link a.main-search {
    color: #fff;
    display: inline-block;
    float: right;
    font-size: 16px;
    line-height: 38px;
    position: relative;
    text-align: center;
    margin: 34px 0px 34px 15px;
    background: #16A05D;
  width: 40px;
    height: 40px;
    border-radius: 5px;
}
.header-area {
    background: #fff;
    box-shadow: none;
    padding: 15px 0px;
}
.header-area .navbar.navbar-default {
    float: left;
    min-height: auto;
}
.header-area .main-menu ul.navbar-nav li a {
    padding: 8px 15px;
    color: #444;
    margin: 0px;
}
.header-area .main-menu ul.navbar-nav li.active >a,
.header-area .main-menu ul.navbar-nav > li > a:hover{
    background:#16A05D;
  color:#fff;
}
.header-area .header-right-link a.main-search {
    margin: 0px 0px;
}
.navbar-collapse {
    width: auto;
    border-top: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}
.header-area .navbar-collapse {
    padding-left: 0px;
}
.header-area.stick .header-right-link a.main-search {
    margin: 15px 0px 15px 15px;
}
/*--------------------------------*/
/* 2.3. Sticky Header Area
/*--------------------------------*/
.header-area.stick {
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999999;
    box-shadow: 0px 0px 2px #ccc, -2px -2px 2px #ccc;
    background: #fff;
}
.header-area.stick .logo a {
    display: inline-block;
    height: auto;
    padding: 15px 0;
}
.header-area.stick .main-menu ul.navbar-nav li a {
    padding: 8px 15px;
}
.header-area.stick .quote-button {
    float: right;
    padding: 13px 5px;
}
.header-area.stick .header-right-link a.main-search {
    margin: 24px 0px 24px 15px;
}
.header-area.stick .main-menu ul.nav li ul.sub-menu li a {
    display: block;
    font-size: 13px;
    font-weight: 700;
    padding: 10px 15px;
}
.header-area.stick .main-menu ul.nav li ul.sub-menu li a:hover{
    color: #fff;
    background: #16A05D;
}
/*----------------------------------------*/
/*  2.4. Mobile Menu Area
/*----------------------------------------*/
.mobile-menu-area {
    background: #fff none repeat scroll 0 0;
    padding: 10px 0px ;
}
.mean-container .mean-bar::after {
    content: "";
    font-size: 21px;
    left: 5%;
    position: absolute;
    top: 12px;
    text-transform: uppercase;
    font-weight: 500;
}
.mean-container a.meanmenu-reveal:hover {
    color:#252525
}
.mean-container .mean-nav ul {
    list-style-type: none;
    margin: 20px 0px;
    padding: 0;
    width: 100%;
}
.mean-container .mean-nav ul li a {
    background: #fff none repeat scroll 0 0;
    color: #444;
    display: block;
    float: left;
    font-size: 12px;
    font-weight: 700;
    margin: 0;
    padding: 13px 10px;
    text-align: left;
    text-decoration: none;
    text-transform: uppercase;
    width: 90%;
}
.mean-nav ul li.mean-last {
    margin-bottom: 20px;
}
.mean-container .mean-nav ul li a.mean-expand {
    color: #444;
    line-height: 17px;
}
.mean-container .mean-nav ul li {
    width: 99.7%;
}
/*------------------------------
 3. Slider Area
--------------------------------*/
.intro-content {
    position: relative;
    z-index: 1;
}
.intro-content::after {
    background: rgba(10, 27, 40, 0.6) none repeat scroll 0 0;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;
}
.slider-content {
    position: absolute;
    right: 0;
    text-align: center;
    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: 19px;
    letter-spacing: 0.60px;
    line-height: 30px;
    max-width: 700px;
    margin: 0 auto;
}
.layer-1-2 h1 {
    color: #fff;
    font-size: 80px;
    font-weight: 800;
    line-height: 90px;
    text-transform: uppercase;
    max-width: 1000px;
    margin: 0 auto;
}
.ready-btn {
    border: 1px solid #16A05D;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-size: 18px;
    font-weight: 700;
    margin-top: 30px;
    padding: 15px 20px;
    text-align: center;
    text-transform: uppercase;
    transition: all 0.4s ease 0s;
    z-index: 222;
    background: #16A05D;
    width: 180px;
    border-radius: 3px;
}
.ready-btn:hover{
    color: #fff;
    background: #16A05D;
    border: 1px solid #16A05D;
    text-decoration: none;
}
.ready-btn.right-btn {
    margin-left: 15px;
    background: #fff;
    border: 1px solid #fff;
  color: #444;
}
.ready-btn.right-btn:hover{
    background: #16A05D;
    border: 1px solid #16A05D;
  color: #fff;
}
.ready-btn.left-btn:hover{
    background: #fff;
    border: 1px solid #fff;
  color: #444;
}
.layer-1-2 .color {
    color: #16A05D;
    font-weight: 900;
}
.intro-carousel.owl-carousel.owl-theme .owl-controls .owl-nav div.owl-prev, 
.intro-carousel.owl-carousel.owl-theme .owl-controls .owl-nav div.owl-next {
    color: #fff;
    font-size: 28px;
    margin-top: -20px;
    position: absolute;
    top: 50%;;
    text-align: center;
    line-height: 58px;
    opacity: 0;
    border:1px solid #fff;
    width: 60px;
    height: 60px;
  border-radius: 3px;
}
.intro-carousel.owl-carousel.owl-theme .owl-controls .owl-nav div.owl-prev{
    left: 10%;
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -o-transition: 0.4s;
    -ms-transition: 0.4s;
}
.intro-carousel.owl-carousel.owl-theme .owl-controls .owl-nav div.owl-next {
    right: 10%;
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -o-transition: 0.4s;
    -ms-transition: 0.4s;
}
.intro-carousel.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;
}
.intro-carousel.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;
}
.intro-carousel.owl-carousel.owl-theme:hover .owl-controls .owl-nav div.owl-next:hover,
.intro-carousel.owl-carousel.owl-theme:hover .owl-controls .owl-nav div.owl-prev:hover{
    color:#fff;
    background: #16A05D;
    border: 1px solid #16A05D;
}
.intro-carousel .owl-item .layer-1-2{
    transform: translateY(100%);
    opacity: 0;
    transition: all 1s ease-in-out 0.3s;
}
.intro-carousel .owl-item .layer-1-1{
    transform: translateY(100%);
    opacity: 0;
    transition: all 1s ease-in-out 1s;
}
.intro-carousel .owl-item .layer-1-3{
    transform: translateY(100%);
    opacity: 0;
    transition: all 1s ease-in-out 1.5s;
}
.intro-carousel .owl-item.active .layer-1-2,
.intro-carousel .owl-item.active .layer-1-1,
.intro-carousel .owl-item.active .layer-1-3{
    transform: translateY(0);
    opacity: 1;
}
.intro-carousel .owl-item.active .slider-images img{
  transform: scale(1.1);
  transition: 10s;
}
/*--------------------------------*/
/* 4.Welcome Services Area
/*--------------------------------*/
.all-well-services {
  margin-top:-30px;
}
.well-services {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1;
    position: relative;
    margin-top: 30px;
    padding: 40px 30px;
    text-align: center;
    top: -90px;
    z-index: 999;
    background: #fff;
}
.main-services {
    display: block;
    padding-top: 20px;
}
.well-content h5 {
    display: inline-block;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 0;
    padding: 0 0 10px;
    text-transform: uppercase;
}
.well-content p{
    margin-bottom: 0px;
}
.services-icon a {
    font-size: 50px;
    line-height: 95px;
    display: inline-block;
    color: #fff;
    background: #16A05D;
    border: 2px solid #16A05D;
    width: 100px;
    height: 100px;
    text-align: center;
    transition: 0.5s;
    border-radius: 5px;
}
.service-btn {
    font-weight: 700;
    text-transform: uppercase;
    color: #444;
    position: relative;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
  z-index: 1;
}
.service-btn::after {
    position: absolute;
    content: "\f105";
    font-family: fontAwesome;
    right: -12px;
    top: -2px;
}
.service-content h5:hover{
    color: #16A05D;
}
.well-services:hover .service-btn:hover{
    color: #16A05D;
}
.well-services:hover .well-content h5 {
  color: #16A05D;
}
.well-services:hover .services-icon a {
    color: #16A05D;
    background: #fff;
  border: 2px solid #16A05D;
  transition: 0.5s;
}
/*----------------------------------------*/
/*  5. About area
/*----------------------------------------*/
.about-content p {
    margin-bottom: 5px;
  color: #444
}
.about-details {
    overflow: hidden;
    display: block;
    padding-top: 10px;
}
.about-list li {
    color: #444;
    padding-left: 25px;
    margin: 10px 0px;
    position: relative;
}
.about-list li::after {
    position: absolute;
    content: "";
    left: 5px;
    top: 10px;
    background: #16A05D;
    width: 5px;
    height: 5px;
}
.video-inner {
    background: url(img/about/vd.jpg);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    border-radius: 6px;
    margin-left: 20px;
}
.video-inner::after{
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    content:"";
   
}
.video-content {
    width: 100%;
    height: 100%;
    
}
.video-play.vid-zone {
    background: #fff;
    border-radius: 100%;
    display: inline-block;
    font-size: 28px;
    height: 70px;
    line-height: 70px;
    text-align: center;
    width: 70px;
    overflow: hidden;
    position: absolute;
    top: 50%;
    z-index: 999;
    left: 0;
    right: 0;
    margin: 0 auto;
    transition: 0.4s;
    margin-top: -35px;
}
.video-play.vid-zone i {
    color: #16A05D;
    margin-left: 5px;
}
.video-play.vid-zone:hover {
    background: #16A05D;
    color: #fff;
  transition: 0.4s;
}
.video-play.vid-zone:hover i{
    color: #fff;
}
/*--------------------------------*/
/* 6.Services Area
/*--------------------------------*/
.all-services{
  margin-top: -30px;
}
.all-services .single-services {
    margin-top: 30px;
  position: relative;
}
.service-images {
    font-size: 54px;
    color: #16A05D;
    display: block;
    margin-bottom: 15px;
    transition: 0.4s;
    line-height: 50px;
}
.service-content {
    padding-top: 20px;
}
.service-content h5 {
    display: inline-block;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 0;
    padding: 0 0 10px;
    text-transform: uppercase;
}
.single-services:hover .services-img::after{
    opacity: 1;
}
.single-services:hover .service-content h4{
    color:#16A05D;
}
.single-services .service-content p{
    color:#444;
}
.single-services .service-btn{
    color:#444;
}
.single-services{
  padding: 30px;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
    transition: 0.5s;
}
.single-services:hover{
    background: #16A05D;
    transition: 0.5s;
}
.single-services:hover .services-img a,
.single-services:hover .service-content h5,
.single-services:hover .service-content p,
.single-services:hover .service-btn{
    color:#fff;
}
.services-img a {
    font-size: 60px;
    color: #16A05D;
    line-height: 60px;
}
/*--------------------------------*/
/* 7.Choose Area
/*--------------------------------*/
.choose-area {
    background-image: url(img/ch/bg1.png);
    background-position: top center;
    background-size: cover;
    background-repeat: no-repeat;
}
.choose-wrapper {
    background: #004949;
    padding: 90px 70px 90px 40px;
}
.choose-all{
  margin-top: -30px;
}
.single-choose {
    box-shadow: none;
    margin-top: 30px;
    position: relative;
    z-index: 1;
    
    padding: 30px 20px;
}
.choose-images {
    float: left;
    font-size: 50px;
    color: #001033;
    line-height: 56px;
}
@media screen and (max-width: 480px){
    .choose-images {
        float: left;
        font-size: 50px;
        color: #16A05D;
        line-height: 56px;
    }
}

.choose-all .choose-content {
    padding-left: 75px;
}
.choose-content p {
    margin-bottom: 0px;
    color: #001033;
}
.single-choose .choose-content h5 {
    font-size: 20px;
    font-weight: 600;
}
.single-choose .choose-content h5 a {
    color: #001033;
}
.single-choose .choose-content h5 a:hover {
    color: #16A05D;
}
.single-choose:hover .choose-images{
    margin-top: 30px;
}
/*----------------------------------------*/
/*  8. banner Area
/*----------------------------------------*/
.banner-area {
    background: #f5f5f5;
        border-top: 1px solid #f5f5f5;
    border-bottom: 1px solid #f5f5f5;
}
.banner-content h3 {
    color: #444;
    font-size: 36px;
    line-height: 44px;
    font-weight: 700;
}
.banner-content {
    border-top: 1px solid #f5f5f5;
    border-bottom: 1px solid #f5f5f5;
}
.banner-left {
    background: #fff;
    padding: 80px 100px;
    width: 60%;
    position: relative;
    float: left;
}
.banner-left:after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-top: 341px solid transparent;
    border-bottom: 0px solid transparent;
    border-left: 180px solid #fff;
    top: 0;
    right: -180px;
}
.contact-button {
    margin-top: 40px;
}
.contact-button a {
    border: 1px solid #16A05D;
    color: #fff;
    background: #16A05D;
    width: 180px;
    display: inline-block;
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    margin-right: 20px;
    padding: 12px 10px;
    text-transform: uppercase;
    transition: 0.4s;
}
.brand-content {
    width: 30%;
    float: right;
    padding: 60px;
}
.contact-button a:hover{
    background: #fff;
    color:#16A05D;
     transition: 0.4s;
}
/*----------------------------------------
  9.Product area
----------------------------------------*/
.product-area{
    padding-bottom: 100px;
}
.single-product{
    position: relative;
    width: 100%;
    height: 100%;
}
.product-name > a,
.price-box .new-price{
    color: #444;
}
.best-indicator.owl-carousel.owl-theme .owl-controls .owl-dots div.owl-dot > span,
.product-item.owl-carousel.owl-theme .owl-controls .owl-dots div.owl-dot > span {
    background: #444 none repeat scroll 0 0;
    display: inline-block;
    height: 8px;
    width: 8px;
    -moz-transition:0.4s;
    -webkit-transition:0.4s;
    -o-transition:0.4s;
    -ms-transition:0.4s;
    transition:0.4s;
    border-radius: 50%;
}
.best-indicator.owl-carousel.owl-theme .owl-controls .owl-dots, .product-item.owl-carousel.owl-theme .owl-controls .owl-dots {
    bottom: 0px;
    display: block;
    left: 50%;
    margin-left: -50px;
    position: absolute;
}
.best-indicator.owl-carousel.owl-theme .owl-controls .owl-dots div.owl-dot,
.product-item.owl-carousel.owl-theme .owl-controls .owl-dots div.owl-dot {
    display: inline-block;
    margin: 0 4px;
}
.best-indicator.owl-carousel.owl-theme .owl-controls .owl-dots div.owl-dot.active span,
.product-item.owl-carousel.owl-theme .owl-controls .owl-dots div.owl-dot.active span{
    background: #3EC1D5;
}
.single-product{
    border: medium none;
    text-align: left;
}
.product-name {
    text-align: left;
}
.price-box {
    display: block;
}
.pro-rating.no-rating {
    display: block;
    float: none;
    margin: 20px 0px;
}
.product-summary {
    opacity: 1;
    position: static;
    display: block;
    overflow: hidden;
}
.add-cart {
    margin: 30px 0;
}
.add-cart a {
    color: #fff;
    font-size: 15px;
    font-weight: bold;
    padding: 11px 22px;
    text-transform: capitalize;
    border-radius: 3px;
  background: #16A05D;
  border:1px solid #16A05D;
}
.add-cart a:hover{
  background: #fff;
  border:1px solid #16A05D;
  color:#16A05D;
}
.product-content {
    padding: 0;
}
.pro-rating a {
    color: red;
    font-size: 16px;
}
.best-product{
    padding-bottom: 45px;
}
.price-box .new-price {
    color: #444;
    font-size: 22px;
    font-weight: 600;
}
.product-name {
    color: #444;
    display: block;
    font-size: 23px;
    margin-bottom: 10px;
    text-transform: capitalize;
}
.product-name a:hover{
    color: #16A05D;
}
.best-product-page {
    margin-top: -30px;
}
.best-product-page .row {
    margin-top: 30px;
}
.product-pagination .pagination {
    margin: 30px 0 0px;
}


/*----------------------------------------*/
/*  10.product-add
/*----------------------------------------*/
.product-add {
    background: rgba(0,0,0,0.80) url(img/background/bg1.jpg) no-repeat scroll center center / cover; 
    display: block;
    overflow: hidden;
  position: relative;
  z-index: 1;
}
.product-add::after{
    position: absolute;
    content: "";
    background: rgba(10, 27, 40, 0.85) none repeat scroll 0 0;
    width: 100%;
    height: 100%;
    left:0;
    top:0;
  z-index: -1;
}
.product-img img{
    position: relative;
}
.image-content {
    position: absolute;
    background: rgba(10, 27, 40, 0.95) none repeat scroll 0 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 17% 40px;
    opacity: 0;
    transition: 0.5s;
}
.product-img:hover .image-content {
    opacity: 1;
     transition: 0.5s;
}
.image-content h4 a{
    color:#fff;
}
.image-decs p{
    color:#fff;
}
.btn-image{
    color:#fff;
    font-size: 16px;
    font-weight: 700;
}
.add-carousel.owl-carousel.owl-theme .owl-controls .owl-nav div.owl-prev, 
.add-carousel.owl-carousel.owl-theme .owl-controls .owl-nav div.owl-next {
    color: #fff;
    font-size: 24px;
    margin-top: -25px;
    position: absolute;
    top: 50%;;
    text-align: center;
    line-height: 47px;
    opacity: 0;
    border:1px solid #16A05D;
    background: #16A05D;
    width: 50px;
    height: 50px;
  border-radius: 3px;
}
.add-carousel.owl-carousel.owl-theme .owl-controls .owl-nav div.owl-prev{
    left: 10%;
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -o-transition: 0.4s;
    -ms-transition: 0.4s;
}
.add-carousel.owl-carousel.owl-theme .owl-controls .owl-nav div.owl-next {
    right: 10%;
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -o-transition: 0.4s;
    -ms-transition: 0.4s;
}
.add-carousel.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;
}
.add-carousel.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;
}
.add-carousel.owl-carousel.owl-theme:hover .owl-controls .owl-nav div.owl-next:hover,
.add-carousel.owl-carousel.owl-theme:hover .owl-controls .owl-nav div.owl-prev:hover{
    color:#16A05D;
    background: #fff;
    border: 1px solid #16A05D;
}
/*----------------------------------------*/
/*  11. Blog Area
/*----------------------------------------*/
.blog-area{
  position: relative;
}
.blog-image{
  overflow: hidden;
    display: block;
}
.blog-grid{
  margin-top: -30px;
}
.blog-content {
    background: #fff;
    padding: 30px 20px 30px;
}
.blog-content a h5 {
    font-size: 20px;
    text-transform: inherit;
    font-weight: 600;
    color: #444;
    line-height: 28px;
    margin: 10px 0px;
}
.blog-meta {
    padding: 3px 10px;
    display: inline-block;
    background: #16A05D;
    border-radius: 2px;
  margin-bottom: 10px;
}
.blog-meta span {
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    padding-right: 10px;
}
.blog-content a h5:hover{
    color:#16A05D;
}
.single-blog {
    margin-top: 30px;
    box-shadow: 1px 1px 20px #f3f3f3, -1px -1px 20px #f3f3f3;
    position: relative;
}
.read-more {
    color: #444;
    display: inline-block;
    font-weight: 700;
    border-top: 1px solid #ddd;
    display: block;
    padding-top: 10px;
}
.blog-content p {
    color: #444;
    font-size: 15px;
    margin-bottom: 0px;
}
.blog-right-column .blog-image {
    overflow: hidden;
    float: left;
    width: 50%;
    min-height: 300px;
}
.blog-right-column .image-scale img{
  width: 100%;
    min-height:300px;
  display: block;
  object-fit: cover;
}
.blog-right-column .blog-content {
    background: #fff;
    float: left;
    height: 100%;
    width: 50%;
    padding: 30px 20px 10px;
    min-height: 300px;
}
.blog-right-column .single-blog{
  overflow: hidden;
}
.blog-btn {
    color: #fff;
    margin-top: 20px;
    display: inline-block;
    border: 1px solid #16A05D;
    padding: 5px 10px;
    border-radius: 3px;
    font-weight: 600;
    background: #16A05D;
}
.blog-btn:hover{
    color: #16A05D;
    background: #fff;
}
/*----------------------------------------*/
/*  12. Footer Area
/*----------------------------------------*/
.footer-1{
  background: url(img/ch/bg1.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom center;
  background-attachment: scroll;
}
.footer-1{
  position: relative;
  z-index: 1;
}
.footer-1::after {
    background: rgba(10, 27, 40, 0.95) none repeat scroll 0 0;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
  z-index: -1;
}
.footer-area {
    position: relative;
}
.footer-logo{
  margin-bottom: 15px;
}
.footer-head p {
    color: #444;
}
.footer-head h5 {
    color: #444;
    font-size: 18px;
    margin-bottom: 20px;
    text-transform: uppercase;
    font-weight: 700;
}
.footer-services-link ul.footer-list{
  width: 50%;
  float: left;
}
.footer-icons ul li {
    display: inline-block;
}
.footer-icons ul li a {
    color: #444;
    display: block;
    font-size: 20px;
    line-height: 38px;
    text-align: center;
    margin-right: 5px;
    width: 40px;
    height: 40px;
    border: 1px solid #ddd;
    border-radius: 50%;
}
.footer-icons ul li a:hover{
    color: #fff;
  background: #16A05D;
  border:1px solid #16A05D;
}
.suscribe-input input {
    background: transparent;
    border: medium none;
    color: #ddd;
    font-size: 15px;
    line-height: 24px;
    padding: 11px 15px;
    height: 42px;
    border-radius: 0;
    width: 100%;
    border: 1px solid #777;
    margin: 30px 0px 5px;
}
.suscribe-input button {
    background: #16A05D;
    border: 1px solid #16A05D;
    color: #fff;
    font-size: 20px;
    padding: 12px 24px;
    border-radius: 3px;
    transition: 0.4s;
    margin-top: 15px;
    text-transform: capitalize;
    font-weight: 700;
}
.suscribe-input button:hover {
    background: #fff;
    border: 1px solid #16A05D;
    color: #16A05D;
    transition: 0.4s;
}
.footer-contacts p span {
    color: #16A05D;
    font-weight: 700;
}
.footer-content {
    display: block;
    overflow: hidden;
}
.footer-list li a {
    color: #444;
    padding: 4px 0px 10px 20px;
    display: block;
    position: relative;
    font-weight: 500;
}
.footer-list li:first-child a{
  padding-top: 0px;
}
.footer-list li:last-child a{
  padding-bottom: 0px;
}
.footer-list li a::after {
    position: absolute;
    content: "\e876";
    right: auto;
    top: 4px;
    font-family: cannabis;
    font-size: 11px;
    left: 0;
}
.footer-list li a:hover {
    color: #16A05D;
}
.footer-1 .footer-area-bottom {
    background: rgba(10, 27, 40, 0.99) none repeat scroll 0 0;
    padding: 25px 0;
}
.footer-area-bottom {
    background: #f9f5f5;
    padding: 25px 0;
}
.copyright-text a:hover{
  text-decoration: underline;
  color:#16A05D;
}
.copyright-text a {
    color: #444;
}
.copyright > p {
    margin-bottom: 0;
    color: #444;
}
.copyright a {
    color: #16A05D;
}
.footer-1 .footer-head h5,
.footer-1 .copyright > p,
.footer-1 .footer-icons ul li a,
.footer-1 .footer-list li a,
.footer-1 .footer-head p{
    color:#fff;
}
.footer-1 .footer-list li a:hover {
    color: #16A05D;
}
/*----------------------------------------*/
/*  13. Breadcumbs Area
/*----------------------------------------*/
.page-area{
    position: relative;
}
.page-area {
    background: url(img/background/b.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
}
.breadcumb-overlay {
  position: absolute;
  background: rgba(10, 27, 40, 0.80) none repeat scroll 0 0;
  top: 0;
  width: 100%;
  left: 0;
  height: 100%;
}
.breadcrumb{
    padding: 100px 0px;
    background-color: transparent;
    margin-bottom: 0;
}
.breadcrumb .section-headline h2 {
    font-size: 42px;
    letter-spacing: 1px;
    line-height: 44px;
    text-transform: uppercase;
    color: #fff;
    font-weight: 800;
}

.breadcrumb .section-headline{
    margin-bottom: 0px;
}
.breadcrumb .section-headline h3::after {
    display: none;
}
.breadcrumb ul {
    padding: 5px 0px;
}
.breadcrumb ul li {
    display: inline-block;
    color: #fff;
    padding: 0px 10px 0px 20px;
    position: relative;
    font-size: 16px;
}
.breadcrumb ul li.home-bread{
    padding-left: 0px;
}
.breadcrumb ul li.home-bread::after {
    position: absolute;
    content: "\f105";
    font-family: fontAwesome;
    right: -10px;
    top: 0;
}
.breadcrumb .section-headline::after {
    display: none;
}
/*----------------------------------------*/
/*  14. About video Area
/*----------------------------------------*/
.marker-list li {
    color: #444;
    padding-left: 30px;
    margin: 10px 0px;
    position: relative;
}
.marker-list li::after {
    position: absolute;
    content: "\e87f";
    left: 0;
    top: 3px;
    font-family: cannabis;
    color: #16A05D;
    font-weight: 700;
}
.single-brand-item a {
    border: 1px solid #ddd;
    display: block;
}
/*----------------------------------------*/
/*  15. Physician Area
/*----------------------------------------*/
.team-area {
    background: #fff;
}
.single-member{
    border: 1px solid #f3f3f3
}
.single-member .team-img {
    display: inline-block;
    position: relative;
    overflow: hidden;
  max-height: 240px;
  max-width: 240px;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}
.team-hover li {
    display: inline-block;
    margin-right: 5px;
}
.team-hover li a {
    color: #fff;
    border: 1px solid #16A05D;
  background: #16A05D;
    display: block;
    width: 34px;
    height: 34px;
    line-height: 32px;
    border-radius:50%;
}
.team-hover li a:hover {
    color: #fff;
    border: 1px solid #16A05D;
    background: #16A05D;
}
.team-hover {
    padding: 15px 0;
    text-align: center;
    transition: all 0.4s ease 0s;
}
.single-member .team-img a {
    display: block;
}
.single-member {
    border: 1px solid #fdfbfb;
    background: #fdfbfb;
    padding: 30px;
}
.team-content {
    padding: 10px;
}
.team-content h5 a {
    color: #666;
}
.team-content p {
    margin-bottom: 0;
}
.team-content h5 {
    font-size: 17px;
    margin: 10px 0px;
    text-transform: uppercase;
    font-weight: 700;
}
.team-page-area .team-member{
    margin-top: -30px;
}
.team-page-area .single-member{
    margin-top: 30px;
}
.team-carousel .col-md-4{
  width: 100%;
}
.team-carousel.owl-carousel.owl-theme .owl-controls .owl-nav div.owl-prev, 
.team-carousel.owl-carousel.owl-theme .owl-controls .owl-nav div.owl-next {
    color: #fff;
    font-size: 20px;
    margin-top: -20px;
    position: absolute;
    top: 50%;;
    text-align: center;
    line-height: 48px;
    opacity: 0;
    border:1px solid #16A05D;
  background: #16A05D;
    width: 50px;
    height:50px;
  border-radius: 50%;
}
.team-carousel.owl-carousel.owl-theme .owl-controls .owl-nav div.owl-prev{
    left: 10%;
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -o-transition: 0.4s;
    -ms-transition: 0.4s;
}
.team-carousel.owl-carousel.owl-theme .owl-controls .owl-nav div.owl-next {
    right: 10%;
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -o-transition: 0.4s;
    -ms-transition: 0.4s;
}
.team-carousel.owl-carousel.owl-theme:hover .owl-controls .owl-nav div.owl-next{
    right: 0;
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -o-transition: 0.4s;
    -ms-transition: 0.4s;
    opacity: 1;
}
.team-carousel.owl-carousel.owl-theme:hover .owl-controls .owl-nav div.owl-prev{
    left: 0;
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -o-transition: 0.4s;
    -ms-transition: 0.4s;
    opacity: 1;
}
.team-carousel.owl-carousel.owl-theme:hover .owl-controls .owl-nav div.owl-next:hover,
.team-carousel.owl-carousel.owl-theme:hover .owl-controls .owl-nav div.owl-prev:hover{
    color:#fff;
    background: #16A05D;
    border: 1px solid #16A05D;
}
/*--------------------------------*/
/* 16.Testimonial Area Css
/*--------------------------------*/
.single-testi {
    padding: 30px 20px;
    position: relative;
    border: 1px solid #16A05D;
    overflow: hidden;
}
.testi-img {
    margin-top: 30px;
}
.testi-img img {
    width: 100%;
    max-width: 100px;
    height: auto;
    border-radius: 50%;
    float: left;
    border:5px solid #16A05D;
}
.client-rating {
    padding-bottom: 10px;
}
.client-rating a {
    display: inline-block;
    color: #fec731;
    font-size: 18px;
}
.texti-name {
    padding-left: 20px;
    margin-top: 30px;
    display: inline-block;
}
.texti-name h5 {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 18px;
    margin-bottom: 0px;
  color:#444;
}
.guest-rev a{
  color: #444; 
}
.testi-text p {
    color: #444;
    margin-bottom: 0px;
}
.testi-text h5 {
    color: #444;
    font-size: 20px;
}
.testi-text a{
  color: #16A05D;  
}
.Reviews-content {
    margin-top: -30px;
}

.testimonial-page-area .single-testi {
    margin-top: 30px;
  border: 1px solid #16A05D;
}
.testimonial-page-area .texti-name h4,
.testimonial-page-area .guest-rev a,
.testimonial-page-area .testi-text p {
    color: #444;
}
/*----------------------------------------*/
/*  17. FAQ  Area
/*----------------------------------------*/
.company-faq {
    display: block;
    overflow: hidden;
    padding: 30px 30px;
  box-shadow: 1px 1px 5px #f3f3f3, -1px -1px 5px #f3f3f3;
}
.faq-details .panel-heading {
    padding: 0;
}
.panel {
    margin-bottom: 20px;
    background-color: #fff;
    border: none;
    border-radius: 4px;
}
.panel-default {
    border-color: #f5f5f5;
    border-radius: 0 !important;
}
.panel-group .panel+.panel {
    margin-top: 10px;
}
.panel-default > .panel-heading {
    color: #666;
}
.panel-default>.panel-heading+.panel-collapse>.panel-body {
    border-top-color: #f5f5f5;
    background: #fff;
}
.faq-details h5.check-title a {
    color: #444;
    display: block;
    font-weight: 600;
    padding: 12px 10px 12px 60px;
    text-decoration: none;
    background: #fff;
}
.panel-body {
    padding: 15px 15px 0px 45px;
}
.faq-details h5.check-title {
    color: #666;
    font-size: 20px;
    margin-bottom: 0px;
    text-transform: capitalize;
}
.faq-details .panel-heading h5 a{
    position: relative;
}
.faq-details .panel-heading h5 a::before {
    color: #444;
    content:"\e880 ";
    font-family: cannabis;
    font-size: 16px;
    left:0px;
    line-height: 46px;
    position: absolute;
    text-align: center;
    top:0px;
  width: 50px;
    height: 100%;
}
.faq-details .panel-heading h5 a.active::before {
    color: #16A05D;
    content: "\e87f";
    font-family: cannabis;
    font-size: 16px;
    left: 0px;
   line-height: 46px;
    position: absolute;
    text-align: center;
    top: 0px;
    width: 50px;
    height: 100%;
}
.faq-details .panel-heading h5 a.active {
    color: #16A05D;
}
.faq-area .col-md-6{
  padding-left: 0px;
  padding-right: 0px;
}
.faq-area .faq-content {
    background: #16A05D;
    padding:10%;
    border-radius: 5px;
  border:1px solid #16A05D;
}
.faq-area .contact-form input[type="text"], 
.faq-area .contact-form input[type="email"] {
    border: 1px solid #16A05D;
    border-radius: 0;
    height: 44px;
    margin-bottom: 15px;
    padding-left: 20px;
    width: 100%;
    background: #fff;
}
.faq-content h4{
  color:#fff;
  padding-bottom: 20px;
}
.faq-area .faq-content .contact-form textarea#message {
    height: 135px;
}
.faq-area .quote-btn {
    font-weight: 600;
    color: #16A05D;
    background: #fff;
    display: inline-block;
    border: 2px solid #16A05D;
    padding: 10px 20px;
    width: 134px;
    text-transform: uppercase;
    border-radius: 3px;
    transition: 0.4s;
    margin-top: 10px;
    border: 2px solid #fff;
}
.faq-area .quote-btn:hover{
  background: transparent;
  border: 2px solid #fff;
  color: #fff;
  transition: 0.4s;
}
/*--------------------------------*/ 
/* 18. Error page
/*--------------------------------*/
.error-easy-text {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 30px;
}
.high-text{
    font-size: 200px;
    line-height: 200px;
  font-family: 'Montserrat', sans-serif;
}
.error-bot{
    font-size: 24px;
}
.error-btn {
    background: #16A05D;
    border: 2px solid #16A05D;
    color: #fff;
    font-size: 16px;
    padding: 12px 20px;
    transition: 0.4s;
    margin-top: 15px;
    text-transform: capitalize;
    margin-top: 30px;
    display: inline-block;
  font-weight: 700;
}
.error-btn:hover{
    background: #fff;
    border: 2px solid #16A05D;
    color: #16A05D;
}
/*----------------------------------------*/
/*  19. Contact Us page
/*----------------------------------------*/
.contact-details {
    display: block;
    overflow: hidden;
    background: #f5f5f5;
    padding: 40px 30px;
    margin-bottom: 40px;
}
.contact-head {
    background: #f9f9f9;
    padding: 40px 30px;
}
.contact-head h3 {
    font-weight: 600;
    font-size: 30px;
}
.contact-inner a i {
    color: #16A05D;
    display: inline-block;
    font-size: 20px;
    text-align: center;
    line-height: 40px;
    margin-right: 15px;
    border-radius: 50%;
}
.contact-inner a {
    color: #666;
    font-size: 16px;
    display: block;
}
.contact-head p {
    font-size: 16px;
}
.contact-form input[type="text"], .contact-form input[type="email"] {
    border: 1px solid #ccc;
    border-radius: 0;
    height: 44px;
    margin-bottom: 15px;
    padding-left: 20px;
    width: 100%;
}
.contact-form textarea#message {
    border: 1px solid #ccc;
    border-radius: 0px;
    height: 180px;
    padding: 20px;
    width: 100%;
}
.contact-page .contact-btn {
    background: #16A05D;
    border: 2px solid #16A05D;
    color: #fff;
    display: inline-block;
    font-size: 16px;
    margin-top: 5px;
    padding: 10px 40px;
    transition: 0.4s;
    width: auto;
    float: left;
    text-transform: uppercase;
  border-radius: 2px;
  font-weight: 700;
}
.contact-page .contact-btn:hover {
    background:transparent;
    border: 2px solid #16A05D ;
    color: #16A05D;
    transition: 0.4s;
}
/*----------------------------------------*/
/* 20.Sub Services Pages
/*----------------------------------------*/
.single-page-head {
    margin-bottom: 30px;
}
.left-menu li:first-child {
    margin: 0px 0px 2px
}
.left-contact h4 {
    font-size: 24px;
    text-transform: uppercase;
    margin-bottom: 30px;
}
.left-menu li {
    display: block;
    margin-bottom: 3px;
}
.build-img .page-img {
    padding-bottom: 0;
}
.left-menu ul li.active a {
    background: #16A05D none repeat scroll 0 0;
    color: #fff;
    position: relative;
}
.left-menu ul li a:hover {
    color: #fff;
    background: #16A05D; 
}
.left-menu ul li a {
    background: #f9f9f9;
    color: #666;
    display: block;
    font-size: 15px;
    font-weight: 700;
    padding: 14px 10px 14px 15px;
    position: relative;
    text-decoration: none;
    text-transform: uppercase;
}
.left-menu ul li.active a::after, .left-menu ul li a:hover::after {
    content: "\e87a";
    font-family: cannabis;
    font-size: 14px;
    position: absolute;
    right: 15px;
    top: 15px;
}
.down-btn {
    color: #444;
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    padding: 15px;
    text-align: left;
    text-transform: uppercase;
    width: 100%;
    position: relative;
  background: #f5f5f5;
  margin-top: 5px;
  border: 1px solid #f5f5f5;
}
.services-side-content .down-btn i {
    padding-right: 10px;
    font-size: 22px;
    line-height: 24px;
}
.down-btn:hover{
    color:#fff;
    background: #16A05D;
  border: 1px solid #16A05D;
}
.single-well h3 {
    margin-bottom: 15px;
    font-size: 30px;
}
.page-content h3 {
    font-weight: 600;
    padding: 15px 0 0;
}
.single-well {
    margin-top: 20px;
}
.single-well a h4 {
    font-weight: 600;
    line-height: 30px;
}
.single-page {
    overflow: hidden;
}
.service-list li {
    display: block;
    position: relative;
    padding-left: 30px;
    color: #666;
}
.service-list li::before{
    position: absolute;
    left: 0;
    content:"\f00c";
    font-family:fontawesome;
    top:0;
    color: #16A05D;
}
.single-page-head .service-btn{
    width: 100%;
    margin: 20px 0px 0px 0px;
}
.single-services-page .marker-list li {
    color: #666;
}
.mar-row .single-well {
    margin-top: 0px;
}
.marker-list li {
    color: #666;
    padding-left: 30px;
    margin: 10px 0px;
    position: relative;
    font-size: 15px;
}
.marker-list li::after {
    position: absolute;
    content: "\e87f";
    left: 0;
    top: 3px;
    font-family: cannabis;
    color: #16A05D;
    font-weight: 700;
}
.clients-support {
    position: relative;
    width: 100%;
    height: auto;
}
.support-text {
    padding:30px 20px 20px;
    background: #16A05D;
    transition: 0.4s;
}
.support-text h4{
    color:#fff;
    font-weight: 700;
}
.support-text a {
    margin: 30px 0px 15px;
    display: block;
    font-size: 22px;
    color: #fff;
    font-weight: 700;
}
.support-text p {
    font-size: 17px;
    line-height: 26px;
    color: #fff;
    font-weight: 600;
}
.support-text a i {
    display: inline-block;
    font-size: 30px;
    line-height: 22px;
    padding-right: 8px;
}
/*----------------------------------------
   21. Blog Details page
----------------------------------------*/
.blog-search-option input {
    padding: 5px 15px;
    width: 80%;
    border: none;
    height: 42px;
}
.blog-search-option {
    margin-bottom: 30px;
    display: block;
    border: 1px solid #ccc;
}
.blog-search-option button {
    background: transparent;
    border: none;
    float: right;
    padding: 10px 7px;
}
.blog-search-option button i {
    line-height: 16px;
    font-size: 20px;
    padding: 0px 10px;
}
.blog-search-option button i:hover {
    color: #16A05D;
}
.left-blog h4 {
    border-bottom: 1px solid #ddd;
    color: #444;
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 0;
    padding: 15px 0px;
    text-transform: capitalize;
}
.left-blog {
    overflow: hidden;
    padding-bottom: 20px;
}
.recent-single-post img {
    width: 100%;
    max-width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 5px;
}
.left-blog li {
    display: block;
}
.left-blog ul li a {
    color: #444;
    display: block;
    font-size: 16px;
    padding: 10px 15px 10px 25px;
    text-transform: capitalize;
    position: relative;
    font-weight: 500;
}
.left-blog ul li a:before {
    position: absolute;
    content: "\e87a";
    font-family: cannabis;
    left: 0px;
    top: 10px;
    font-size: 14px;
}
.popular-tag.left-blog ul li a:before {
    display: none;
}
.recent-single-post {
    display: block;
    overflow: hidden;
    padding: 15px 0px;
}
.post-img {
    display: inline-block;
    float: left;
    padding: 0 5px;
}
.pst-content {
    padding-left: 100px;
}
.pst-content p a:hover,.left-blog ul li a:hover {
    color: #16A05D;
}
.pst-content p a {
    color: #444;
    font-size: 16px;
}
.blog-tags {
    padding: 1px 0;
}
.left-blog li:last-child {
    border-bottom: 0 ;
}
.left-head-blog .date-type {
    font-size: 14px;
    font-weight: 500;
}
.popular-tag.left-blog ul li a:hover{
    color: #fff;
}
.pst-content p {
    margin-bottom: 5px;
    font-weight: 600;
}
.popular-tag.left-side-tags.left-blog ul {
    padding:0px;
}
.left-tags .left-side-tags ul li {
    border-bottom: 0;
    display: inline-block;
    margin: 5px 0px;
}
.left-tags .left-side-tags ul li a {
    padding: 3px 10px;
    width: auto;
    border: 2px solid #16A05D;
    background: #16A05D;
    color: #fff;
    border-radius: 5px;
    font-weight: 700;
    font-size: 14px;
}
.left-tags .left-side-tags ul li a:hover {
    border: 2px solid #16A05D;
    background: #fff;
  color:#16A05D;
}
.left-side-tags h4 {
    margin-bottom: 15px;
}
.comments-heading h4,.comment-reply-title {
    border-bottom: 1px solid #e8e8e9;
    color: #444;
    font-size: 22px;
    margin: 0 0 20px;
    padding: 0 0 5px;
    text-transform: capitalize;
}
.comments-list ul li{
    margin-bottom: 25px;
}
.comments-list-img{
    float: left;
    margin-right: 15px;
}
.comments-content-wrap {
    color: #444;
    font-size: 16px;
    margin: 0 0 15px 60px;
    padding: 10px;
    position: relative;
}
.blog-content p {
    font-size: 16px;
  letter-spacing: 0.50px;
}
blockquote {
    padding: 0px 20px;
    margin: 20px 0 20px;
    font-size: 15px;
    border-left: 5px solid #444;
    font-style: italic;
}
blockquote p {
    font-size: 16px !important;
    line-height: 28px;
    font-weight: 600;
}
.author-avatar {
    display: inline-block;
    float: left;
    width: 10%;
}
.blog-details .blog-content {
    padding: 0px;
}
.author-description h2 {
    color: #777;
    font-size: 20px;
    text-transform: uppercase;
}
.author-description h2 a {
    color: #333;
}
.blog-details-page-area .blog-content {
    background: #fff;
    padding: 30px 0px 0px;
}
.comments-content-wrap span b{margin-right:5px}
.comments-content-wrap span a:hover{}
span.post-time{margin-right:5px}
.comments-content-wrap p {
    color: #444;
    margin-top: 10px;
}
li.threaded-comments{margin-left:50px}
.comment-respond {
    margin-top: 20px;
}
span.email-notes{color: #42414f;
    display: block;
    font-size: 14px;
    margin-bottom: 10px;}
.comment-respond p {
    color: #444;
    margin-bottom: 5px;
}
.comment-respond input[type=text],.comment-respond input[type=email]{
    border: 1px solid #e5e5e5;
    border-radius: 0;
    height: 32px;
    margin-bottom: 15px;
    padding: 0 0 0 10px;
    width: 100%;}
.comment-respond textarea#message-box{
    border: 1px solid #e5e5e5;
    border-radius: 0;
    max-width: 100%;
    padding: 10px;
  height: 160px;
    width: 100%;
}
.comments-content-wrap span a {
    color: #16A05D;
}
.comments-content-wrap span a:hover {
    color: #16A05D;
}
.comment-respond .add-btn.contact-btn {
    background: #16A05D;
    color: #fff;
    display: block;
    font-size: 16px;
    margin-top: 5px;
    padding: 12px 20px;
    transition: 0.4s;
    border-radius: 5px;
    width: auto !important;
    margin-top: 20px;
    border: 2px solid #16A05D;
    text-transform: uppercase;
    font-weight: 700;
}
.comment-respond .add-btn.contact-btn:hover{
    background: #fff;
  color: #16A05D;
    border:2px solid #16A05D;
}
.pagination {
    display: inline-block;
    padding-left: 0;
    margin: 50px 0 0px;
    border-radius: 4px;
}
.pagination>li>a, .pagination>li>span {
    position: relative;
    float: left;
    padding: 6px 12px;
    line-height: 1.42857143;
    text-decoration: none;
    color: #444;
    background-color: #fff;
    border: none;
    margin-left: -1px;
    border-radius: 5px;
    border: 1px solid #444;
}
.pagination>li {
    display: inline-block;
    margin: 0px 3px;
}
.pagination>.active>a, 
.pagination>.active>span, 
.pagination>.active>a:hover, 
.pagination>.active>span:hover, 
.pagination>.active>a:focus, 
.pagination>.active>span:focus{
    z-index: 3;
    color: #fff;
    background-color: #16A05D;
    border:1px solid #16A05D;
    cursor: default;
    border-radius: 5px;
}
.pagination>li>a:hover, .pagination>li>span:hover, .pagination>li>a:focus, .pagination>li>span:focus {
    z-index: 2;
    color: #fff;
    background-color: #16A05D;
    border-color: #16A05D;
    border-radius: 2px;
}
.blog-page-details .left-blog-page {
    margin-top:0px;
    margin-bottom:30px;
}
.single-post-comments {
    margin-top: 30px;
}
/*--------------------------------*/
/* 22.Gallery area
/*--------------------------------*/
.gallery-menu li a {
    color: #444;
    display: inline-block;
    font-size: 14px;
    padding: 5px 10px;
    text-transform: uppercase;
    transition: all 0.3s ease 0s;
    font-weight: 700;
    letter-spacing: 0.5px;
    border-radius: 2px;
}
.gallery-menu li a.active,
.gallery-menu li a:hover {
    color: #fff;
    text-decoration: none;
  background: #16A05D;
}
.gallery-menu {
    margin-bottom: 10px;
}
.gallery-menu li {
    display: inline-block;
}
.gallery-menu li a:hover {
    color: #fff;
    text-decoration: none;
}
.gallery-content .single-awesome-gallery{
  margin-top: 30px;
}
.single-awesome-gallery {
    float: left;
    overflow: hidden;
    width:100%;
}
.first-item {
    margin-bottom: 30px;
}
.awesome-img{
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}
.awesome-img img{
    transform: scale(1.1);
    transition: 0.4s;
}
.single-awesome-gallery:hover .awesome-img img{
    transform: scale(1);
    transition: 0.4s;
}
.awesome-img > a {
    display: block;
    position: relative;
}
.single-awesome-gallery:hover .awesome-img > a::after{
    opacity: 1;
}
.single-awesome-gallery:hover .add-actions{
    opacity: 1;
}
.awesome-img > a::after {
    background: rgba(0, 0, 0, 0.35) none repeat scroll 0 0;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    opacity: 0;
    transition: 0.4s;
}
.add-actions {
    display: block;
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    text-align: center;
    transition: all 0.4s ease 0s;
    width: 100%;
    z-index: 9999;
    top: 0;
    cursor: pointer;
}
.port-icon {
    color: #fff;
    display: inline-block;
    cursor: pointer;
    top: 41%;
    position: relative;
    font-size: 40px;
}
.gallery-details {
    position: absolute;
    bottom: 20px;
    left: 40px;
}
.gallery-dec {
    display: block;
    padding: 15px 0px 15px 20px;
    position: relative;
    opacity: 0;
}
.gallery-dec::before {
    position: absolute;
    left: 0px;
    content: "";
    top: 5px;
    width: 6px;
    height: 15px;
    background: #16A05D;
    transition: 1s;
}
.single-awesome-gallery:hover .gallery-dec{
    opacity: 1;
}
.single-awesome-gallery:hover .gallery-dec::before {
    width: 6px;
    height: 70%;
    transition: 1s;
}
.gallery-dec h4 {
    color: #fff;
    font-size: 24px;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    margin-bottom: 5px;
    cursor: pointer;
}
.gallery-dec a {
    color: #fff;
}
.gallery-dec a:hover {
    color: #fff;
}
.gallery-dec p {
    color: #fff;
    font-weight: 400;
}
/*----------------------------------------
 23.ModalCSS
----------------------------------------*/
.modal-content {
    background-clip: padding-box;
    background-image:url(img/footer/g1.jpg);
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
    outline: 0 none;
    position: relative;
}
.o-form{
    color: #444;
    font-weight: 700;
    margin-bottom: 0;
    padding: 20px 0;
    text-transform: uppercase;
}
.section-headline.white-head > h2 {
    color: #fff;
}
.modal-form .input-text.suscribe-input input {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background: #fff none repeat scroll 0 0;
    border-color: #fff currentcolor #fff #fff;
    border-image: none;
    border-style: solid none solid solid;
    border-width: 1px medium 1px 1px;
}
.modal-form .email.width-80 {
    border: medium none;
    color: #333;
    display: inline-block;
    width: 75%;
}
.modal-form .add-btn.width-20 {
    background: #252525 none repeat scroll 0 0;
    border: 1px solid #252525;
    color: #fff;
    float: right;
    font-size: 20px;
    padding: 10px 15px 11px;
    width: 25%;
    -webkit-transition:0.5s;
    -moz-transition:0.5s;
    -o-transition: 0.5s;
    -ms-transition: 0.5s;
    font-weight: 700;
}
.add-btn.width-20:hover{
    background: #ddd;
    border: 1px solid #fff;
    color: #333;
    -webkit-transition:0.5s;
    -moz-transition:0.5s;
    -o-transition: 0.5s;
    -ms-transition: 0.5s;
}
.modal-form .form-control.width-50 {
    display: inline-block;
    width: 48%;
}
.modal-form .form-control.width-50.last-name {
    margin-left: 16px;
}
.modal-body {
    padding: 20px 40px 40px;
    position: relative;
}
.form-head {
    color: #444;
    font-weight: 600;
    line-height: 36px;
    margin-bottom: 30px;
}
.modal-form .form-control {
    background-color: transparent;
    background-image: none;
    border: 1px solid #969696;
    border-radius: 0;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
    color: #444;
    display: block;
    font-size: 14px;
    height: 45px;
    line-height: 1.42857;
    padding: 5px 12px;
    transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
    width: 100%;
}
.modal-form button.contact-btn {
    background: #16A05D;
    border: 1px solid #16A05D;
    border-radius: 5px;
    font-size: 20px;
    font-weight: 700;
    padding: 15px 0;
    width: 100%;
  text-transform: uppercase;
    color: #fff;
    -moz-transition: 0.4s;
    -webkit-transition: 0.4s;
    -o-transition: 0.4s;
    -ms-transition: 0.4s;
}
.modal-form .submit-btn {
    margin-top: 30px;
}
.modal-form button.contact-btn:hover {
    background: #fff none repeat scroll 0 0;
    border: 1px solid #16A05D;
    color: #16A05D;
    -moz-transition: 0.4s;
    -webkit-transition: 0.4s;
    -o-transition: 0.4s;
    -ms-transition: 0.4s;
}
.modal {
    bottom: 0;
    display: none;
    left: 0;
    outline: 0 none;
    overflow: hidden;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 999999999;
}
.left{
    display: flex;
    justify-content: start;
}
@media screen and (max-width: 480px){
.logo{
    transform: translateY(-10px);
    width: 100px;
    height: auto;
}
}
.grow{
    color: #018a36;
}
.in{
    color: #ff9c00;
}

.logosl{
    width: 100px;
    height: auto;
}
@media screen and (max-width: 480px){
    .logosl{
        transform: translateX(50px);
        width: 100px;
        height: auto;
    }
    }
@media screen and (min-width: 1280px){
.fr{
    position: relative;
    text-align: right;
}
}
@media screen and (max-width: 480px){
    .choose-wrapper {
        background: rgb(25, 187, 109);
        padding: 90px 70px 90px 40px;
    }
    }
    .section-headline1{
        margin-bottom: 60px;
        position: relative;
    }
    .section-headline1 h2 {
        display: inline-block;
        font-size: 42px;
        font-weight: 900;
        text-transform: uppercase;
    }
    .section-headline1.white-headline h2,
    .section-headline1.white-headline p{
        color:#fff;
    }
    .section-headline1.text-left {
        margin-bottom: 30px;
    }
    .section-headline1::after {
        border: 1px solid rgb(18, 172, 82);
        color: linear-gradient(45deg, #EECFBA, #C5DDE8);
        bottom: -27px;
        content: "";
        left: 0;
        margin: 0 auto;
        position: absolute;
        width: 1140px;
        right: 0;
    }
    .section-headline1.left-headline::after {
        bottom: -50px;
        margin: inherit;
    }
    .section-headline1 p {
        max-width: 650px;
        font-size: 16px;
        letter-spacing: 0.5px;
        margin: 0 auto;
        line-height: 26px;
    }
    @media screen and (max-width: 480px){
        .left-headline h4 {
            font-size: 26px;
            line-height: 36px;
            position: relative;
            margin-bottom: 50px;
            color: #000000;
        }
        }
        @media screen and (max-width: 480px){
            .center-headline h4 {
                font-size: 26px;
                line-height: 36px;
                position: relative;
                margin-bottom: 50px;
                color: #000000;
            }
        }
    
    .content h4{ font-size:19px;}

    .box{
      position: relative;
      box-sizing: border-box;
      overflow: hidden;
      box-shadow: 0 20px 50px rgb(23, 32, 90);
      border: 2px solid #14cf5c;
      color: white;
      padding: 20px;
      padding-bottom: 20px;
    }
    
    
    .box:before{
      content: '';
      position:absolute;
      top:0;
      left:-100%;
      width:100%;
      height:100%;
      background: rgba(255,255,255,0.1);
      transition:0.5s;
      pointer-events: none;
    }
    
    .box:hover:before{
      left:-50%;
      transform: skewX(-5deg);
    }
    
    
    .box .content{
      border:1px solid #f0a591;
      padding:20px;
      text-align:center;
      box-shadow: 0 5px 10px rgba(9,0,0,0.5);
    }
    
    .box span{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: block;
      box-sizing: border-box;
      
    }
    
    .box span:nth-child(1)
    {
      transform:rotate(0deg);
    }
    
    .box span:nth-child(2)
    {
      transform:rotate(0deg);
    }
    
    .box span:nth-child(3)
    {
      transform:rotate(180deg);
    }
    
    .box span:nth-child(4)
    {
      transform:rotate(180deg);
    }
    
    .box span:before
    {
      content: '';
      position: absolute;
      width:100%;
      height: 2px;
      background: #50dfdb;
    }

    .box span:nth-child(1):before,
    .box span:nth-child(3):before
    {
      animation: animate-hor 4s linear infinite;
    }

    .box span:nth-child(2):before,
    .box span:nth-child(4):before
    {
      width:2px;
      height: 100%;
      animation: animate-vert 4s linear infinite;
    }
    
    @keyframes animate-hor {
      0% {
      transform:scaleX(0);
      transform-origin: left;
      }
      50%
      {
        transform:scaleX(1);
      transform-origin: left;
      }
      50.1%
      {
        transform:scaleX(1);
      transform-origin: right;
        
      }
      
      100%
      {
        transform:scaleX(0);
      transform-origin: right;
        
      }
      
      
    }

@keyframes animate-vert {
      0% {
      transform:scaleY(0);
      transform-origin: bottom;
      }
      50%
      {
        transform:scaleY(1);
      transform-origin: bottom;
      }
      50.1%
      {
        transform:scaleY(1);
      transform-origin: top;
        
      }
      
      100%
      {
        transform:scaleY(0);
      transform-origin: top;
        
      }
      
      
    } 

    @media screen (max-width: 480px){
        .padding-block-bottom{
            padding-bottom:40px;
        }
    }
    

/*----------------------------------------
 .End CSS
----------------------------------------*/

External CSS

  1. https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.