.header-section {
  min-height: 500px;
}
#studio-page {
  background-image: url(header-03.jpg); /* fallback for when video doesn't load */
    background-size: cover;
}
.fill-gradient-bottom {
  min-height: 400px;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#3db0a6+0,34b3d2+85 */
  background: #8A8BCD; /* Old browsers */
  background: -moz-linear-gradient(45deg,  #8A8BCD 25%, #6364a7 95%); /* FF3.6-15 */
  background: -webkit-linear-gradient(45deg,  #8A8BCD 25%,#6364a7 95%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(45deg,  #8A8BCD 25%,#6364a7 95%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8A8BCD', endColorstr='#6364a7',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.icon-illustration {
  background: transparent url(icon-01.svg) 0 0 no-repeat;
  background-size: 280px 40px;
  height: 40px;
  width: 40px;
}

.customer-logos {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.customer-logos div {
    height: 50px;
    position: relative;
    width: 12.5%;
    float: left;
}

.customer-logos div:last-of-type {
  height: 80px;
  margin-top: -15px;
}

.button.fill-white.text-purple {
  color: #8A8BCD;
}
.button.fill-white.text-purple:hover {
  background: rgba(255,255,255,0.9);
}

.data.icon-illustration  { background-position:  0px 0px;}
.design.icon-illustration  { background-position:  -40px 0px;}
.cartography.icon-illustration  { background-position:  -80px 0px;}
.integrate.icon-illustration  { background-position:  -120px 0px;}


.create.icon-illustration  { background-position:  -160px 0px;}
.export.icon-illustration  { background-position:  -200px 0px;}
.visualize.icon-illustration  { background-position:  -240px 0px;}


.fill-gradient-bottom:before {
  background-image: url('bg_shape.png');
  content: '';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left top;
}

  .feature-highlight {
    float: left;
    width: 22%;
  }
  .margin5r { margin-right: 2%; }
  .margin5l { margin-left: 2%; }
  .space-right0 { margin-right: 5px; }
.small-thumb img { width: 29px; }
.pad00 { padding: 2px; }
.space-top3 { margin-top: 30px; }
.space-left6 { margin-left: 60px; }
.text-blue { color: #3887be; }
.width10 {width: 100px; float: left;}
.block-link:hover {
  opacity: 0.7;
}


.center-y {
	top: 50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
}



.video-container {
  position: absolute;
  top: 43%; left: 43%;
  min-width: 100%;
  height: 500px;
  width: auto;
  height: auto;
  -webkit-transform: translate(-43%, -43%);
  -moz-transform: translate(-43%, -43%);
  -ms-transform: translate(-43%, -43%);
  -o-transform: translate(-43%, -43%);
  transform: translate(-43%, -43%);
}

video[poster]{
  width:100%;
  height: auto;
}

.section-image { max-width: 800px; }

@media only screen and (max-width: 1120px) {
  .video-container {min-height: 100%; }
  .image-container { width: 50%; }
  .content-container { width: 50%; }
  .content-container.margin7 { margin-left: 50%; }
}

@media only screen and (max-width: 900px) {
  video[poster]{
    width:auto;
    height: 100%;
  }
}

@media only screen and (max-width: 720px) {
  .feature-highlight { width: 50%; padding: 0px 5px; min-height: 120px;}
  .margin5r, .margin5l { margin: 10px 0px 15px 0px;}
  .header-section { min-height: inherit; }
  .width40 { width: 100%; }

  .customer-logos div { width: 33.333%; }

  .content-container .space-left4 { margin-left: 0px; }
}

@media only screen and (max-width: 640px) {
   .logo-section { background: #f8f8f8; }
  .content-container.margin7 { margin-left: 0%; }
  .content-container { width: 100%; }

  .content-container { margin-top: 20px; }
.section { margin-top: 0px; padding-top: 0px;}
  }
}