.herobanner {
  width: 100%;
  min-height: 500px;
  max-height: 700px;
  float: left;
  clear: left;
  position: relative;
  z-index: 0;
  background:#ffffff;
}

.banner-text {
      width:55%; 
      padding: 50px 50px; 
      position: absolute; 
      top: 10%; 
      left: 1%; 
  }
  
  .banner-text .post-title {
	clear: left;
    float: left;
    font-size: 3em;
    margin-bottom: 0.5em
  }
  
  .banner-text .post-subtitle {
	clear: left;
    float: left;
    font-family: 'Quicksand', Helvetica, Arial, sans-serif;
    font-size: 1.5em;
    font-weight: bold;
    line-height: 1.2em;
	}
  
  .banner-text #button-border-white {
    clear: left;
    float: left;
    font-family: 'Quicksand', Helvetica, Arial, sans-serif;
    font-weight: bold;
    padding: 15px;
  }



<--- Banner Image Positioned Right --->
.herobanner img#bannerright {
  float: right;
  margin: 0 auto;
  opacity: 1;
}

<--- Banner Image Positioned Left --->
.herobanner img#bannerleft {
  float: right;
  margin: 0 auto;
  opacity: 1;
}

<--- Banner Image As Background Image --->
<---- Set the .herobanner container to have a background img
background: url('') center center no-repeat;background-size: cover;
---->
  



#maxheight {
  max-height: 600px;
}

div.banner-video-container {
  width: 50%;
  position: absolute;
  top:0;
  right: 0;
  margin: 50px;
}

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 35px;
    overflow: hidden;
}

.video-container iframe {
    position: absolute;
    top:10px;
    right: 10px;
    width: 100%;
    height: 100%;
/*  -o-box-shadow: 0 0px 20px 0px rgba(0,0,0,0.2);
  -moz-box-shadow: 0 0px 20px 0px rgba(0,0,0,0.2);
  -ms-box-shadow: 0 0px 20px 0px rgba(0,0,0,0.2);
  -webkit-box-shadow: 0 0px 20px 0px rgba(0,0,0,0.2);
  box-shadow: 0 0px 20px 0px rgba(0,0,0,0.2);*/
}

div.herocontent { width:50% !important; padding: 50px 50px; position: absolute; top: 20%; left: 4%; }
div.herocontent h1 { font-size: 3em; line-height: 1.2em; font-family: 'Geomanist', Arial Black, Arial Bold, Gadget, sans-serif; text-transform: uppercase; }
div.herocontent h2 { font-size: 2.2em; line-height: 1.2em; font-family: 'Geomanist', Arial Black, Arial Bold, Gadget, sans-serif; text-transform: uppercase; }
div.herocontent h3 { font-size: 2.0em; line-height: 1.2em; font-family: 'Quicksand', Helvetica, Arial, sans-serif; font-weight: bold; text-align:left; }
div.herocontent h4 { font-size: 1.8em; line-height: 1.2em; font-family: 'Quicksand', Helvetica, Arial, sans-serif; font-weight: bold; }
div.herocontent h5 { font-size: 1.6em; line-height: 1.2em; font-family: 'Quicksand', Helvetica, Arial, sans-serif; font-weight: bold; }
div.herocontent p { font-size: 1.3em; line-height: 1.6em; font-family: 'Quicksand', Helvetica, Arial, sans-serif; font-weight: bold; }
img.kickstarterlogo { padding: 35px 0 0 20px; margin: 0; width: 250px;}
img.checkmark { size: 25px;}
div.herocontent strong a { font-size: 0.9em; float: left; text-align: center; }
div.herocontent em a { font-size: 1em; font-style: normal; color: #ffffff; float: left; margin: 0; padding: 8px 0px 0px 10px; text-align: right; }
div.herocontent em { padding: 12px 0px 0px 30px;  }
div.herocontent h6 #bannersubtext { font-size: 1em !important; font-weight: normal; line-height: 1.3em; }


#button-border-white { border: 2px solid #ffffff; color: #ffffff; border-radius: 5px; padding: 10px 15px; margin-top: 15px; } 
#button-border-white:hover { border: 2px solid #eeeeee; color: #eeeeee; }

#button-border-pink { border: 2px solid #ff009b; color: #ff009b; border-radius: 5px; margin: 25px 0; padding: 12px 15px; text-align: center; text-transform: uppercase; }
#button-border-pink:hover { border: 2px solid #eb0290; color: #eb0290; }

#button-border-blue { border: 2px solid #00aeef; color: #00aeef; border-radius: 5px; padding: 10px 15px;  }
#button-border-blue:hover { border: 2px solid #64c8ee; color: #64c8ee; }

#bannercolumn { clear: both; float: left; width: 100%;}
#bannercolumntext { float: left; width: 40%; font-size: 1.2em; }
#bannercolumntext img { width: 15px; height: 15px;}


#bannersmalltext { float: left; width: 100%; font-size: 1.0em; color: #000000; margin: 20px 0 0 0 ; }

p.bannerdiscount { text-align: left; float: left;}

@media screen and (max-width: 320px){ 
    .herobanner { height: 300px !important; text-align: left !important;  } 
  .video-container iframe { width: 95%; height: 95%;}
  div.banner-video-container { position: absolute; top: 500px; margin: 50px 0; width: 75%; } 
  div.herocontent { width: 90% !important; padding: 0; top: 40% !important; left: 5%; margin: 0 auto; text-align: left !important; }
  div.herocontent h1 { font-size: 1.5em; margin-bottom: 15px; }
  div.herocontent h5 { font-size: 1.1em !important; margin-bottom: 15px; font-family: 'Quicksand', Helvetica, Arial, sans-serif; font-weight: bold; text-align: left !important; }
  div.herocontent p { font-size: 1em; margin-bottom: 15px; font-family: 'Quicksand', Helvetica, Arial, sans-serif; font-weight: bold; text-align: left !important; }
  div.herocontent p em { font-size: 1.1em; font-weight: normal; float: left; margin: 0; padding: 0px; text-align: center; } 
  div.herocontent strong a { font-size: 1.3em; padding: 10px 15px; }
  div.herocontent em { color: #ffffff; padding: 12px 0px 0px 20px;  }
  img.kickstarterlogo { clear: left; float: left; padding: 35px 0 0 10px; margin: 0; width: 150px; }
  p.bannerdiscount { clear: both; float: left; font-size: 1.3em !important; }
  #bannercolumn { clear: both; float: left; width: 80%; margin: 0 auto; }
  #bannercolumntext { width: 100%; font-size: 1.3em; color: #ffffff; }
 
  
  .banner-text {
      width:90% !important; 
      padding: 0 5%; 
      position: absolute;
      top: 11% !important; 
      left: 0% !important; 
  }
  
  .banner-text .post-title {
    font-size: 1.5em;
    margin-bottom: 0.5em
  }
  
  .banner-text .post-subtitle {
    font-size: 1.1em;
    line-height: 1.2em;
    text-align: left !important;
	}
  
  .banner-text #button-border-white {
    padding: 15px;
  }
  
}


@media screen and (min-width: 321px) and (max-width: 480px){ 
    .herobanner { height: 350px !important; } 
  .video-container iframe { width: 95%; height: 95%;}
  div.banner-video-container { position: absolute; top: 500px; margin: 0 50px; width: 75%; } 
  div.herocontent { width: 90% !important; padding: 0 5%; top: 50% !important; left: 0%; margin: 0; }
  div.herocontent h1 { font-size: 1.5em; margin-bottom: 15px; }
  div.herocontent h5 { font-size: 1.1em !important; margin-bottom: 15px; font-family: 'Quicksand', Helvetica, Arial, sans-serif; font-weight: bold; text-align: left !important; }  
  div.herocontent p { font-size: 1em; margin-bottom: 15px; font-family: 'Quicksand', Helvetica, Arial, sans-serif; font-weight: bold;}
  div.herocontent p em { font-size: 1.1em; font-weight: normal; float: left; margin: 0; padding: 0px; text-align: center; }
  div.herocontent strong a { font-size: 1.3em; padding: 10px 15px; }
  div.herocontent em { color: #ffffff; padding: 12px 0px 0px 20px;  }
  img.kickstarterlogo { clear: left; float: left; padding: 35px 0 0 10px; margin: 0; width: 150px; }
  p.bannerdiscount { clear: both; float: left; font-size: 1.3em !important; }
  #bannercolumn { clear: both; float: left; width: 80%; margin: 0 auto; }
  #bannercolumntext { width: 100%; font-size: 1.3em; color: #ffffff; }
  
  .banner-text {
      width:90% !important; 
      padding: 0 5%; 
      position: absolute;
      top: 11% !important; 
      left: 0% !important; 
  }
  
  .banner-text .post-title {
    font-size: 1.5em;
    margin-bottom: 0.5em
  }
  
  .banner-text .post-subtitle {
    font-size: 1.1em;
    line-height: 1.2em;
	}
  
  .banner-text #button-border-white {
    padding: 15px;
  }
}


@media screen and (min-width: 481px) and (max-width: 650px){ 
    .herobanner { height: 350px !important; } 
  .video-container iframe { width: 95%; height: 95%;}
  div.banner-video-container { position: absolute; top: 450px; margin: 0 50px; width: 85%; } 
  div.herocontent { width: 90% !important; padding: 0; top: 30% !important; left: 5%; margin: 0 auto; }
  div.herocontent h1 { font-size: 2em; margin-bottom: 15px; }
  div.herocontent h5 { font-size: 1.1em !important; margin-bottom: 15px; font-family: 'Quicksand', Helvetica, Arial, sans-serif; font-weight: bold; text-align: left !important; }
  div.herocontent p { font-size: 1em; margin-bottom: 15px; font-family: 'Quicksand', Helvetica, Arial, sans-serif; font-weight: bold;}
  div.herocontent p em { font-size: 1em; font-weight: normal; float: left; margin: 0; padding: 0px; text-align: center; }
  div.herocontent a { font-size: 1em; padding: 8px 10px; }
  div.herocontent em { color: #ffffff; padding: 12px 0px 0px 20px;  }
  img.kickstarterlogo { padding: 35px 0 0 10px; margin: 0; width: 150px; }
  p.bannerdiscount { clear: both; float: left; font-size: 1.2em !important; }
  #bannercolumntext { width: 48%; font-size: 1.1em; color: #ffffff; }
  
  .banner-text {
      width:55% !important; 
      padding: 50px 50px; 
      position: absolute; 
      top: 7%; 
      left: 1%; 
  }
  
  .banner-text .post-title {
	float: left;
    font-size: 2.7em;
    margin-bottom: 0.5em
  }
  
  .banner-text .post-subtitle {
	float: left;
    font-family: 'Quicksand', Helvetica, Arial, sans-serif;
    font-size: 1.2em;
    font-weight: bold;
    line-height: 1.2em;
	}
  
  .banner-text #button-border-white {
    float: left;
    font-family: 'Quicksand', Helvetica, Arial, sans-serif;
    font-weight: bold;
    padding: 15px;
  }
  
}


@media screen and (min-width: 651px) and (max-width: 768px){ 
    .herobanner { height: 350px !important; } 
  .video-container iframe { width: 95%; height: 95%;}
  div.banner-video-container { position: absolute; top: 450px; margin: 0 50px; width: 90%; } 
  div.herocontent { width: 90% !important; padding: 0; top: 30% !important; left: 5%; margin: 0 auto; }
  div.herocontent h1 { font-size: 2em; margin-bottom: 15px; }
  div.herocontent h5 { font-size: 1.1em !important; margin-bottom: 15px; font-family: 'Quicksand', Helvetica, Arial, sans-serif; font-weight: bold; text-align: left !important; }
  div.herocontent p { font-size: 1em; margin-bottom: 15px; font-family: 'Quicksand', Helvetica, Arial, sans-serif; font-weight: bold;}
  div.herocontent p em { font-size: 1em; font-weight: normal; float: left; margin: 0; padding: 0px; text-align: center; }
  div.herocontent a { font-size: 1em; padding: 8px 10px; }
  div.herocontent em { color: #ffffff; padding: 12px 0px 0px 20px;  }
  img.kickstarterlogo { padding: 35px 0 0 10px; margin: 0; width: 150px; }
  p.bannerdiscount { clear: both; float: left; font-size: 1.2em !important; }
  #bannercolumntext { width: 48%; font-size: 1.5em; color: #ffffff; margin-top: 5px; }
  
  .banner-text {
      width:55% !important; 
      padding: 50px 50px; 
      position: absolute; 
      top: 7%; 
      left: 1%; 
  }
  
  .banner-text .post-title {
	float: left;
    font-size: 2.7em;
    margin-bottom: 0.5em
  }
  
  .banner-text .post-subtitle {
	float: left;
    font-family: 'Quicksand', Helvetica, Arial, sans-serif;
    font-size: 1.2em;
    font-weight: bold;
    line-height: 1.2em;
	}
  
  .banner-text #button-border-white {
    float: left;
    font-family: 'Quicksand', Helvetica, Arial, sans-serif;
    font-weight: bold;
    padding: 15px;
  }
}

@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    .herobanner { height: 350px !important; }
  .video-container iframe { width: 95%; height: 95%;}
  div.banner-video-container { position: absolute; top: 500px; margin: 0 50px; width: 90%; } 
  div.herocontent { width: 90% !important; padding: 0; top: 30% !important; left: 5%; margin: 0 auto; }
  div.herocontent h1 { font-size: 2em; }
  div.herocontent h5 { font-size: 1.1em !important; margin-bottom: 15px; font-family: 'Quicksand', Helvetica, Arial, sans-serif; font-weight: bold; text-align: left !important; }
  div.herocontent strong a { font-size: 0.8em; }
  img.kickstarterlogo { padding: 40px 0 0 10px; margin: 0; width: 150px; }
  p.bannerdiscount { clear: both; float: left; font-size: 1.2em !important; }
  #bannercolumntext { width: 48%; font-size: 0.7m; color: #ffffff; }
}

@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    .herobanner { height: 350px !important; }
  .video-container iframe { width: 95%; height: 95%;}
  div.banner-video-container {margin: 50px 50px 0 0; width: 40%; }
  .herobanner img#bannerright { width: 60% !important; }
  .herobanner img#bannerleft { width: 60% !important; } 
  div.herocontent { width: 60% !important; padding: 0; top: 30% !important; left: 4%; margin: 0 auto; }
  div.herocontent h1 { font-size: 2em; }
  div.herocontent h5 { font-size: 1.1em !important; line-height: 1.2em; font-family: 'Quicksand', Helvetica, Arial, sans-serif; font-weight: bold; text-align: left !important; }
  div.herocontent p { font-size: 1em;}
      div.herocontent strong a { font-size: 0.9em; }
  img.kickstarterlogo { padding: 35px 0 0 10px; margin: 0; width: 150px; }
  p.bannerdiscount { clear: both; float: left; font-size: 1.2em !important; }
  #bannercolumntext { width: 48%; font-size: 0.9em; color: #ffffff; }
  
  .banner-text {
      width:55% !important; 
      padding: 50px 50px; 
      position: absolute; 
      top: 7%; 
      left: 1%; 
  }
  
  .banner-text .post-title {
	float: left;
    font-size: 3em;
    margin-bottom: 0.5em
  }
  
  .banner-text .post-subtitle {
	float: left;
    font-family: 'Quicksand', Helvetica, Arial, sans-serif;
    font-size: 1.5em;
    font-weight: bold;
    line-height: 1.2em;
	}
  
  .banner-text #button-border-white {
    float: left;
    font-family: 'Quicksand', Helvetica, Arial, sans-serif;
    font-weight: bold;
    padding: 15px;
  }
}


/* Tablets ----------- */
@media screen and (min-width: 1025px) and (max-width: 1223px){
  .herobanner { height: 400px; }
  .video-container iframe { width: 95%; height: 95%;}
  div.banner-video-container { margin: 50px; }
  div.herocontent { width: 60% !important; padding: 0; top: 20% !important; left: 5%; margin: 0 auto; }
  div.herocontent h1 { font-size: 3em; line-height: 1.2em;}
      div.herocontent strong a { font-size: 0.75em; }  
  img.kickstarterlogo { padding: 35px 0 0 10px; margin: 0; width: 250px; }
  .herobanner img#bannerright { width: 60% !important; }
  .herobanner img#bannerleft { max-height: 600px; margin-top: 40px;}
   #bannercolumntext { width: 40%; font-size: 1em; color: #ffffff; }
  
  .banner-text {
      width:55% !important; 
      padding: 50px 50px; 
      position: absolute; 
      top: 7%; 
      left: 1%; 
  }
  
  .banner-text .post-title {
	float: left;
    font-size: 3em;
    margin-bottom: 0.5em
  }
  
  .banner-text .post-subtitle {
	float: left;
    font-family: 'Quicksand', Helvetica, Arial, sans-serif;
    font-size: 1.5em;
    font-weight: bold;
    line-height: 1.2em;
	}
  
  .banner-text #button-border-white {
    float: left;
    font-family: 'Quicksand', Helvetica, Arial, sans-serif;
    font-weight: bold;
    padding: 15px;
  }
  
}


/* Laptops ----------- */
@media screen and (min-width: 1224px) and (max-width: 1365px){
  .herobanner { height: 520px; }
  .video-container iframe { width: 95%; height: 95%;}
  div.banner-video-container { margin: 50px; }
  div.herocontent { width: 60%; padding: 0; top: 20% !important; left: 5%; margin: 0 auto; }
  div.herocontent h1 { font-size: 3em; line-height: 1.2em;}
      div.herocontent strong a { font-size: 0.75em; }  
  img.kickstarterlogo { padding: 35px 0 0 10px; margin: 0; width: 250px; }
  .herobanner img#bannerright { width: 60% !important; }
  .herobanner img#bannerright { width: 60% !important; }
  .herobanner img#bannerright { width: 60% !important; }
  .herobanner img#bannerleft { max-height: 600px; margin-top: 40px;}
   #bannercolumntext { width: 40%; font-size: 1em; color: #ffffff; } 
  
  .banner-text {
      width:55% !important; 
      padding: 50px 50px; 
      position: absolute; 
      top: 7%; 
      left: 1%; 
  }
  
  .banner-text .post-title {
	float: left;
    font-size: 3em;
    margin-bottom: 0.5em
  }
  
  .banner-text .post-subtitle {
	float: left;
    font-family: 'Quicksand', Helvetica, Arial, sans-serif;
    font-size: 1.5em;
    font-weight: bold;
    line-height: 1.2em;
	}
  
  .banner-text #button-border-white {
    float: left;
    font-family: 'Quicksand', Helvetica, Arial, sans-serif;
    font-weight: bold;
    padding: 15px;
  }



/* Laptop ---------- */
@media screen and (min-width: 1366px) and (max-width: 1499px){
  .herobanner { height: 550px; }
  .video-container iframe { width: 100%; height: 100%;}
  div.banner-video-container { margin: 50px; }
  div.herocontent { width: 60%; padding: 0; top: 20% !important; left: 5%; margin: 0 auto; }
  div.herocontent h1 { font-size: 3em; line-height: 1.2em;}
      div.herocontent strong a { font-size: 0.75em; }  
  img.kickstarterlogo { padding: 35px 0 0 10px; margin: 0; width: 250px; }
  .herobanner img#bannerright { width: 60% !important; }
  .herobanner img#bannerright { width: 60% !important; }
  .herobanner img#bannerleft { max-height: 600px; margin-top: 40px;}
   #bannercolumntext { width: 40%; font-size: 1em; color: #ffffff; }
	
  .banner-text {
      width:55% !important; 
      padding: 50px 50px; 
      position: absolute; 
      top: 7%; 
      left: 1%; 
  }
  
  .banner-text .post-title {
	float: left;
    font-size: 3em;
    margin-bottom: 0.5em
  }
  
  .banner-text .post-subtitle {
	float: left;
    font-family: 'Quicksand', Helvetica, Arial, sans-serif;
    font-size: 1.5em;
    font-weight: bold;
    line-height: 1.2em;
	}
  
  .banner-text #button-border-white {
    float: left;
    font-family: 'Quicksand', Helvetica, Arial, sans-serif;
    font-weight: bold;
    padding: 15px;
  }

}
  


/* Large screens ----------- */
@media screen and (min-width: 1500px){ 
    .herobanner { height: 575px;}
  .video-container iframe { width: 100%; height: 100%;}
    div.herocontent { width: 60%; padding: 0; top: 20% !important; left: 7%; margin: 0 auto; }
  div.herocontent h1 { font-size: 3em; line-height: 1.2em;}
    div.herocontent strong a { font-size: 0.75em; }
  .herobanner img#bannerright { width: 60% !important; }
  .herobanner img#bannerleft { max-height: 600px; margin-right: 170px; margin-top: 80px;}
  div.herocontent strong a { padding: 10px 15px;}
  #bannercolumn { margin-top: 25px; }
  
  .banner-text {
      width:55% !important; 
      padding: 50px 50px; 
      position: absolute; 
      top: 7%; 
      left: 1%; 
  }
  
  .banner-text .post-title {
	float: left;
    font-size: 3em;
    margin-bottom: 0.5em
  }
  
  .banner-text .post-subtitle {
	float: left;
    font-family: 'Quicksand', Helvetica, Arial, sans-serif;
    font-size: 1.5em;
    font-weight: bold;
    line-height: 1.2em;
	}
  
  .banner-text #button-border-white {
    float: left;
    font-family: 'Quicksand', Helvetica, Arial, sans-serif;
    font-weight: bold;
    padding: 15px;
  }
}

@media screen and (min-width: 1600px){ 
      .herobanner { height: 600px;}
  div.banner-video-container { margin: 70px;}
  .video-container iframe { width: 100%; height: 100%;}
    div.herocontent { width: 60%; padding: 0; top: 20% !important; left: 10%; margin: 0 auto; }
  div.herocontent h1 { font-size: 3em; line-height: 1.2em;}
  .herobanner img#bannerright { width: 60% !important; }
  .herobanner img#bannerright { width: 60% !important; }
  .herobanner img#bannerleft { max-height: 600px; margin-right: 170px; margin-top: 80px;}
  div.herocontent strong a { padding: 10px 15px;}
  #bannercolumn { margin-top: 0px; }
  
  .banner-text {
      width:55% !important; 
      padding: 50px 50px; 
      position: absolute; 
      top: 7%; 
      left: 1%; 
  }
  
  .banner-text .post-title {
	float: left;
    font-size: 3em;
    margin-bottom: 0.5em
  }
  
  .banner-text .post-subtitle {
	float: left;
    font-family: 'Quicksand', Helvetica, Arial, sans-serif;
    font-size: 1.5em;
    font-weight: bold;
    line-height: 1.2em;
	}
  
  .banner-text #button-border-white {
    float: left;
    font-family: 'Quicksand', Helvetica, Arial, sans-serif;
    font-weight: bold;
    padding: 15px;
  }
}

@media screen and (min-width: 1700px){ 
  .herobanner { height: 750px;}
  div.banner-video-container { margin: 100px;}
  .video-container iframe { width: 100%; height: 100%;}
    div.herocontent { width: 60%; padding: 0; top: 25% !important; left: 10%; margin: 0 auto; }
  div.herocontent h1 { font-size: 3em; line-height: 1.2em;}
  .herobanner img#bannerright { width: 60% !important; }
  .herobanner img#bannerleft { max-height: 600px; margin-right: 170px; margin-top: 80px;}
  div.herocontent strong a { padding: 10px 15px;}
  #bannercolumn { margin-top: 25px; }
  
  .banner-text {
      width:55% !important; 
      padding: 50px; 
      position: absolute; 
      top: 7%; 
      left: 1%; 
  }
}