.header-banner{
    position: relative;
    min-height: 100vh;
    background-position: center;
    background-size: cover;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.inner-banner-wrap{width: 100%;}

#banner-image {
  position: relative;
  height: 100%;
}

#banner-image svg{
  position: absolute;
  width: 180%!important;
  height: auto !important;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%)!important;
  -webkit-transform: translate(-50%,-50%)!important;
  -moz-transform: translate(-50%,-50%)!important;
  opacity: 0.85;
}


.banner-grid{
  margin: 150px 0 100px;
grid-gap: 6%;
}

.banner-grid .grid-item{
  display: flex;
  justify-content: center;
  align-items: center;
}


.header-banner.is-preview  {
    min-height: 700px;
}

.header-banner h1, .header-banner.is-preview h1{
  margin-top: 0;
  font-size: 55px;
  color: #fff;
  margin-bottom: 0;
  line-height: 1;
}

.header-banner h1 span, .header-banner.is-preview h1 span{
	display: inline-flex;
}

.header-banner.text-only-banner h1 span, .header-banner.text-only-banner.is-preview h1 span{
	  font-size: 70px;
	  line-height: 1;
}

.header-banner h1 span{
  font-family: 'Lexia Ad', Arial, Helvetica, sans-serif;
}


.header-banner p, .header-banner.is-preview p{
  font-size: 20px;
  color: #fff;
  margin-bottom: 0;
}

.header-banner.text-only-banner p, .header-banner.text-only-banner.is-preview p{
  font-size: 25px;
}

.is-preview #banner-image {
  position: relative;
  height: 100%;
  opacity: 0.85;
}

.banner-img-wrap, .is-preview .banner-img-wrap{
	position: relative;
	text-align: center;
	width: 100%;
}

.shortcode-banner, .is-preview .shortcode-banner{
	display: flex;
	flex-direction: column;
	width: 100%;
}

.is-preview #banner-image svg{
  position: absolute;
  width: 150%!important;
  height: auto !important;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%)!important;
  -webkit-transform: translate(-50%,-50%)!important;
  -moz-transform: translate(-50%,-50%)!important;
}

.is-preview .banner-grid{
  margin: 0;
  grid-template-columns: 100%;
}

.banner-text-wrap{width: 100%;}

.button-list, .is-preview .button-list{
	padding:0;
	margin: 0;
}

.button-list li, .is-preview .button-list li{
	padding:0;
	display: inline;
	margin-right: 10px;
}

.is-preview #typed-strings p{display: none;}
.is-preview #typed-strings p:first-child{display: block;}

/* ---------------------------------------------- /*
 * Responsive
/* ---------------------------------------------- */


@media only screen 
      and (min-width: 0px) 
      and (max-width: 768px) 
{ 
  #banner-image {
    position: relative;
    min-height: 300px;
  }
	.header-banner.text-only-banner h1{
	  font-size: 55px;
}
  .header-banner{min-height: 100vh;}
  .banner-grid{grid-template-columns: 100% !important;grid-gap:50px 0;margin: 80px 0 80px;} 
  .banner-text-wrap{width: 100%;}
  .header-banner h1{font-size: 40px;color: #fff;}
  .header-banner p{max-width: 100%;font-size: 20px;}
	.banner-text-wrap {text-align: center;}
.right-triangles, .left-triangles{max-width: 50%; }
 .banner-img-wrap img{ max-height: 250px;width: 100%;max-width: 80%;}
	.button-list li{margin-right: 0;}
}

@media only screen 
      and (min-width: 769px) 
      and (max-width: 1023px) 
{ 
  .header-banner h1{
    font-size: 50px;

  }
  
  .header-banner p{
    max-width: 550px;
    font-size: 20px;
  }
    
}

@media only screen 
and (min-width: 1024px) 
and (max-width: 1100px) 
 { 
	 
  .header-banner h1{
    font-size: 50px;
  }
  
  .header-banner p{
  font-size: 19px;
  }
  
   
}

@media only screen 
   and (min-width: 1101px) and (max-width: 1280px) 
 { 
	 .header-banner p{
   font-size: 20px;
}

}