/**
 * header
 **/

 .section.Header h2 {
     color: #ffffff;
     font-size: 40px;
     line-height: 50px;
     text-transform: none;
     margin-bottom: 0px;
     font-weight: 700!important;
 }


 .section.Header h3 {
     color: #ffffff;
     font-size: 22px;
     line-height: 28px;
     text-transform: none;
     margin-bottom: 50px;
     margin-top: 0px;
 }


 .section.Header:after {
     content: '';
     background: linear-gradient(to top, rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0) 100%);
     position: absolute;
     height: 0.5vw;
     width: 100%;
     z-index: 10;
     bottom: 0px;
 }



 /* Header Responsive */
 @media screen and (min-width: 0px) and (max-width: 700px) {
 .section.Header .banner.has-hover {
     padding-top: 240px!important;
     min-height: 240px!important;
 }}

 @media screen and (min-width: 500px) and (max-width: 700px) {
 .section.Header h2 {
     font-size: 30px!important;
     line-height: 40px!important;
 }}


 @media screen and (min-width: 0px) and (max-width: 449px) {
 .section.Header h2 {
     font-size: 24px!important;
     line-height: 38px!important;
 }}


 @media screen and (min-width: 550px) and (max-width: 700px) {
 .section.Header h3 {
     font-size: 18px!important;
     line-height: 24px!important;
     margin-bottom: 30px;
 }}


 @media screen and (min-width: 0px) and (max-width: 549px) {
 .section.Header h3 {display: none!important;}}



 @media screen and (min-width: 850px) and (max-width: 1080px) {
 .section.Header .text-box {
     width: 70%!important;
 }}

 @media screen and (min-width: 700px) and (max-width: 850px) {
 .section.Header .text-box {
     width: 80%!important;
 }}


 @media screen and (min-width: 0px) and (max-width: 700px) {
 .section.Header .text-box {
     width: 90%!important;
 }}