#studio-page {
    background-image: url(header-03.jpg); /* fallback for when video doesn't load */
    background-size: cover;
  }

#design {
  background : -moz-linear-gradient(50% 100% 90deg,rgba(52, 126, 185, 1) 0%,rgba(57, 173, 204, 1) 95.09%);
  background : -webkit-linear-gradient(90deg, rgba(52, 126, 185, 1) 0%, rgba(57, 173, 204, 1) 95.09%);
  background : -webkit-gradient(linear,50% 100% ,50% 0% ,color-stop(0,rgba(52, 126, 185, 1) ),color-stop(0.9509,rgba(57, 173, 204, 1) ));
  background : -o-linear-gradient(90deg, rgba(52, 126, 185, 1) 0%, rgba(57, 173, 204, 1) 95.09%);
  background : -ms-linear-gradient(90deg, rgba(52, 126, 185, 1) 0%, rgba(57, 173, 204, 1) 95.09%);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#347eB9', endColorstr='#39adcc' ,GradientType=0)";
  background : linear-gradient(0deg, rgba(52, 126, 185, 1) 0%, rgba(57, 173, 204, 1) 95.09%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#39adcc',endColorstr='#347eB9' , GradientType=0);
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#347eb9+0,39adcc+100 */

}
#data {
  background : -moz-linear-gradient(50% 100% 90deg,rgba(138, 138, 203, 1) 0%,rgba(52, 126, 185, 1) 95.09%);
  background : -webkit-linear-gradient(90deg, rgba(138, 138, 203, 1) 0%, rgba(52, 126, 185, 1) 95.09%);
  background : -webkit-gradient(linear,50% 100% ,50% 0% ,color-stop(0,rgba(138, 138, 203, 1) ),color-stop(0.9509,rgba(52, 126, 185, 1) ));
  background : -o-linear-gradient(90deg, rgba(138, 138, 203, 1) 0%, rgba(52, 126, 185, 1) 95.09%);
  background : -ms-linear-gradient(90deg, rgba(138, 138, 203, 1) 0%, rgba(52, 126, 185, 1) 95.09%);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#8a8acb', endColorstr='#347eB9' ,GradientType=0)";
  background : linear-gradient(0deg, rgba(138, 138, 203, 1) 0%, rgba(52, 126, 185, 1) 95.09%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#347eB9',endColorstr='#8a8acb' , GradientType=0);
}

#integration {
background: rgb(138,138,203); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(138,138,203,1) 25%, rgba(52,126,185,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(25%,rgba(138,138,203,1)), color-stop(100%,rgba(52,126,185,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(138,138,203,1) 25%,rgba(52,126,185,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(138,138,203,1) 25%,rgba(52,126,185,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(138,138,203,1) 25%,rgba(52,126,185,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(138,138,203,1) 25%,rgba(52,126,185,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8a8acb', endColorstr='#347eb9',GradientType=0 ); /* IE6-9 */

}

.integration-graphic {
      margin-top: -240px;
}

  .integration-graphic-image img {
    max-width: 125%;
  }
.design-section.row16 {
  -webkit-box-shadow: -2px 55px 32px -46px rgba(32, 109, 143,0.4);
-moz-box-shadow: -2px 55px 32px -46px rgba(32, 109, 143,0.4);
box-shadow: -2px 55px 32px -46px rgba(32, 109, 143,0.4);
}
.bubble { position: absolute; width: 140px; }

.bubble-land { left: 20%; top: 12%; }
.bubble-path { right: 15%; top: 8%; }
.bubble-label { top: 0%; right: 40%; }
.design-graphic { padding-top: 200px; }
.design-graphic img {
      max-width: 110%;
    margin-left: -5%;
}
.design-section { overflow-x: hideen;}
.bubble-data { top: 8%; left: 25%; }
.bubble-style { top: 50%; right: 40%; }
.bubble-xray { top: 30%; right: 15%; }

.bubble-datasource { right: 48%; top: 45%; }
.bubble-draft { top: 25%; right: -5%; }
.bubble-platform { bottom: 15%; right: -5%; }

.integration-content { padding-right: 20px; }
.studio-header h1 { font-size: 50px; line-height: 65px; }

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

.column-block {	width: 30%; float: left; }
.margin-right5 { margin-right: 5%; }
.margin-right3 { margin-right: 3%; }

.dark input[type=email].studio-signup {
    border-color: rgba(238, 238, 238, 0);
    color: #142736;
}
@media only screen and (max-width: 1300px) {
  .design-section.row16 {
    min-height: initial;
    height: initial;
    box-shadow: none;
  }
  .design-section.row16 .pad4y { padding-bottom: 0px;}
}
@media only screen and (max-width: 1000px) {
  .integration-content,
  .integration-graphic {
    width: 100%;
    max-width: 1000px;
    padding-right: 0px;
  }
  .integration-block {
    width: 30%;
    float: left;
  }
  .integration-block .col2 {
    width: 100%;
  }
  .integration-block:nth-of-type(1),
  .integration-block:nth-of-type(2) {
    margin-right: 5%;
  }
  .integration-graphic-image {
    width: 30%;
    margin-left: 35%;
    margin-top: 240px;
  }
  .bubble-datasource { right: 55%; top: 45%; }
  .bubble-draft { top: 30%; right: 22%; }
  .bubble-platform { bottom: 10%; right: 22%; }

  .column-content {
    width: 100%;
  }

  }


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

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


/*********  Quote *********/
blockquote {
    color: rgba(0,0,0,.5);
    padding: 0 0 0 30px;
    background: transparent;
    position: relative;
    margin: 20px 0px
}


blockquote .wired-logo {
    left: -20px;
    position: relative;
    width: 200px;
    max-height: 60px;
    height: 60px;
    padding-bottom: 0;
}

.dark blockquote {
   color: white;
}

blockquote::after {
    content: '';
    position: absolute;
    width: 4px;
    left: -20px;
    bottom: 0;
    top: 35px;
    background-color: rgba(0,0,0,.1);
    border-radius: 10px;
}

.dark blockquote::after {
    background-color: rgba(255,255,255,.5);
}

blockquote::before {
    content: '\201C';
    padding-top: 15px;
    font-family: Georgia, serif;
    font-size: 60px;
    font-weight: bold;
    color: rgba(0,0,0,.1);
    position: absolute;
    left: -40px;
    height: 35px;
}

.dark blockquote::before {
    color: rgba(255,255,255,.5);
}




@media only screen and (max-width: 800px){
  .bubble-land { left: 15%; top: 4%; }
  .bubble-path { right: 15%; top: 3%; }
  .bubble-label { top: -8%; right: 40%; }
  .integration-graphic-image img { max-width: 100%; }
} 

@media only screen and (max-width: 640px) {
  .bubble { width: 110px; }
  .bubble-land { left: 8%; top: 4%; }
  .bubble-path { top: 3%; right: 14%;}
  .bubble-label { top: 5%; }
  .column-block, .integration-block { width: 100% ; margin-bottom: 30px;}
  .data-graphic { margin-bottom: 30px;}
  .design-section { padding-bottom: 30px; }
  .column-content {
    width: 85%;
    float: right;
  }
  .integration-block .col2 {
    width: 15%;
  }
   .bubble-draft { top: 5%; right: 24%; }
  .bubble-platform { bottom: 10%; right: 26%; }
  .bubble-datasource { top: 30%; right: 55%; }
  #studio-page {
    background-image: url(header-03.jpg);
    background-size: cover;
  }
  .integration-graphic { margin-top: 0px;}
  video {display: none;}
  .integration-graphic-image {
    width: 30%;
    margin-left: 35%;
    margin-top: 0px;
  }
  #mapbox-gl .space-top8 { margin-top: 90px; }
  fieldset.pill .icon.mail { float: left; display: block; width: auto; }
  form fieldset:last-child { margin-bottom: 40px; }

}

@media only screen and (max-width: 480px) {
  .bubble { width: 100px;}
  .bubble-path { right: 5%; top: 3%; }
  .bubble-label { top: 0%; left: 38%; }

  .bubble-data { top: 0%;}
  .bubble-style { top: 60%; }
  .bubble-style .pin-bottomright { top:0; bottom: initial; }
  .bubble-xray { right: 9%; }

   .column-content {
    width: 80%;
    float: right;
  }
    .integration-block .col2 {
    width: 20%;
  }
   .bubble-datasource { right: 64%; top: 45%; }
     .bubble-draft { top: 5%; right: 22%; }
  .bubble-platform { bottom: 10%; right: 21%; }
  .integration-graphic-image {
    width: 50%;
    margin-left: 25%;
    margin-top: 0px;
  }
}

/* Guides + Pricing */

.img-guides { max-width: 160px; }
.studio-classic-fill { background: #2995B7;}

#studio-classic .col6 { max-width: none; }

@media only screen and (max-width: 960px) {
  #studio-classic .col6 { width: 100%;}
}

@media only screen and (min-width: 400px) and (max-width: 640px) { 
  .icon-1.dot.contain.col2
  {
    width: 20%;
  }
  .icon-1 + .col10 {
    width: 75%;
    margin-left: 5%;
  }
}

input[type=email].dot-field  {
  background: white;
  border-color: #eee;
  border-color: rgba(255,255,255,0.25);
  color: #e47855;
  box-shadow: none;
  border-radius: 30px 0px 0px 30px;
}

.input-pill .dot-button {
  border-left-width: 0;
  border-radius: 0 30px 30px 0;
}

#beta-gl-form .icon.mail { color: rgba(0,0,0,0.3);}
h2.studio-page {
  font-size: 24px;
}