/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/
/**
* Top Hero - Left Layout Styles * Specific styles for image-left variant */

.top-hero {
   position: relative;
}

.top-hero .cta-component {
   margin-top: auto;
}

.top-hero>.container {
display: -webkit-box;
   display: -ms-flexbox;
display: flex;
   height: 100%;
}

.top-hero__title {
   text-align: center;
   z-index: 990;
   position: relative;
}

.top-hero__sub-title {
   text-align: center;
   z-index: 990;
   position: relative;
}

.top-hero .text-col {
   width: 50%;
display: -webkit-box;
   display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
   -webkit-box-direction: normal;
   -ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
   -ms-flex-align: start;
align-items: flex-start;
}

.top-hero__sub-title {
   margin-bottom: 32px;
   margin-top: 16px;
}

.top-hero__title * {
font-family: "Lato-Bold";
   color: #3A2A1F;
   text-align: left;
   font-size: 20px;
   line-height: 1.4;
}

.top-hero__sub-title * {
font-family: "Lato-Bold";
   text-align: left;
   font-size: 36px;
   line-height: 1.4;
}

.top-hero__feature {
display: -webkit-box;
   display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
   -ms-flex-align: center;
align-items: center;
   margin-bottom: 16px;
}

.top-hero__feature p {
font-family: "Lato-Regular";
   color: #3A2A1F;
   text-align: left;
   line-height: 1.4;
}

.top-hero__feature .coffee_bean {
margin-right: 8px;
}

.top-hero .image-col {
   width: 50%;
}

.top-hero .image-col img {
   width: 100%;
   height: auto;
   border-radius: 8px;
}

@media all and (max-width:550px) {
   .top-hero>.container {
      padding: 16px !important;
   }
}