/* line 1, ../sass/vice.scss */
.page--vice {
  color: black;
}
/* line 4, ../sass/vice.scss */
.page--vice .hide-on-mobile {
  display: none;
}
@media (min-width: 768px) {
  /* line 4, ../sass/vice.scss */
  .page--vice .hide-on-mobile {
    display: block;
  }
}
/* line 11, ../sass/vice.scss */
.page--vice .hide-on-desktop {
  display: block;
}
@media (min-width: 768px) {
  /* line 11, ../sass/vice.scss */
  .page--vice .hide-on-desktop {
    display: none;
  }
}
/* line 20, ../sass/vice.scss */
.page--vice .bs-container {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 30px;
}
/* line 26, ../sass/vice.scss */
.page--vice header {
  margin-bottom: 0;
  padding-top: 0;
  position: relative;
  overflow: hidden;
}
/* line 33, ../sass/vice.scss */
.page--vice .header-container,
.page--vice .footer-container,
.page--vice .footer-container a {
  background-color: black;
  color: white;
}
/* line 40, ../sass/vice.scss */
.page--vice .header-container {
  margin-bottom: 80px;
  width: 100%;
}
/* line 45, ../sass/vice.scss */
.page--vice .footer-container {
  width: 100%;
}
/* line 49, ../sass/vice.scss */
.page--vice .title-container {
  font-size: 50px;
}
/* line 53, ../sass/vice.scss */
.page--vice .logo--section {
  margin: 40px -15px;
}
@media (min-width: 768px) {
  /* line 53, ../sass/vice.scss */
  .page--vice .logo--section {
    margin: 80px -27px;
  }
}
/* line 61, ../sass/vice.scss */
.page--vice .marquee-content .logo--section {
  margin: 130px 30px 10px 30px;
}
@media (min-width: 768px) {
  /* line 61, ../sass/vice.scss */
  .page--vice .marquee-content .logo--section {
    margin: 150px 100px 80px 100px;
  }
}
/* line 71, ../sass/vice.scss */
.page--vice .marquee-container {
  position: fixed;
  margin-bottom: -10px;
  z-index: -2;
  width: 100%;
  height: 350px;
}
@media (min-width: 470px) {
  /* line 71, ../sass/vice.scss */
  .page--vice .marquee-container {
    height: 400px;
  }
}
@media (min-width: 768px) {
  /* line 71, ../sass/vice.scss */
  .page--vice .marquee-container {
    height: 550px;
  }
}
/* line 86, ../sass/vice.scss */
.page--vice .marquee-video {
  width: 200%;
  margin-left: -50%;
}
@media (min-width: 768px) {
  /* line 86, ../sass/vice.scss */
  .page--vice .marquee-video {
    width: 100%;
    margin-left: 0;
  }
}
/* line 97, ../sass/vice.scss */
.page--vice .marquee-content {
  top: 10%;
  left: 0;
}
/* line 103, ../sass/vice.scss */
.page--vice .page-section--vnt {
  background-color: white;
  position: absolute;
  width: 100%;
  top: 350px;
  top: 350px;
}
@media (min-width: 470px) {
  /* line 103, ../sass/vice.scss */
  .page--vice .page-section--vnt {
    top: 470px;
  }
}
@media (min-width: 768px) {
  /* line 103, ../sass/vice.scss */
  .page--vice .page-section--vnt {
    top: 550px;
  }
}
/* line 121, ../sass/vice.scss */
.page--vice .design-system-title {
  display: inline-block;
  font-size: 36px;
  font-weight: 900;
}
/* line 127, ../sass/vice.scss */
.page--vice .description--header.description--main {
  margin-bottom: 40px;
  padding-bottom: 10px;
  font-size: 36px;
}
/* line 133, ../sass/vice.scss */
.page--vice .design-system-title,
.page--vice .description--header {
  /*background-color: white;*/
  margin: 0 -10px;
  padding: 0 10px;
}
/* line 143, ../sass/vice.scss */
.page--vice .video-container {
  margin-bottom: 10px;
}
@media (min-width: 768px) {
  /* line 143, ../sass/vice.scss */
  .page--vice .video-container {
    /*margin-bottom: 70px;*/
  }
}
/* line 152, ../sass/vice.scss */
.page--vice .video-container video {
  width: 100%;
}
@media (min-width: 768px) {
  /* line 152, ../sass/vice.scss */
  .page--vice .video-container video {
    /*width: 100%;*/
  }
}
/* line 161, ../sass/vice.scss */
.page--vice .video-container video,
.page--vice .video-embed-container {
  border: 2px solid black;
}
/* line 166, ../sass/vice.scss */
.page--vice .video-label {
  margin-bottom: 10px;
}
/* line 170, ../sass/vice.scss */
.page--vice .video-embed-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
  height: auto;
}
/* line 179, ../sass/vice.scss */
.page--vice .browser video {
  width: 100%;
  height: auto;
}
/* line 184, ../sass/vice.scss */
.page--vice .video-embed-container iframe,
.page--vice .video-embed-container object,
.page--vice .video-embed-container embed,
.page--vice .video-embed-container video {
  border: 2px solid white;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/* line 198, ../sass/vice.scss */
.page--vice .browser {
  border: 2px solid black;
  width: 100%;
  height: 0;
  margin-bottom: 30px;
  overflow: hidden;
  border-radius: 3px;
}
/* line 207, ../sass/vice.scss */
.page--vice .browser-container img {
  width: 100%;
}
/* line 211, ../sass/vice.scss */
.page--vice .browser--mobile {
  padding-bottom: 169%;
  /*if mock is mobile on mobile*/
  border-top: 25px solid black;
  border-bottom: 25px solid black;
  border-radius: 12px;
  /*if mock is desktop on desktop*/
}
@media (min-width: 768px) {
  /* line 211, ../sass/vice.scss */
  .page--vice .browser--mobile {
    border-top: 20px solid black;
    border-bottom: 20px solid black;
    border-radius: 6px;
  }
}
/* line 228, ../sass/vice.scss */
.page--vice .browser--desktop {
  padding-bottom: 60%;
  /*if mock is desktop on mobile*/
  border-top: 10px solid black;
  border-bottom: 2px solid black;
  /*if mock is desktop on desktop*/
}
@media (min-width: 768px) {
  /* line 228, ../sass/vice.scss */
  .page--vice .browser--desktop {
    border-top: 20px solid black;
    border-bottom: 2px solid black;
    border-radius: 6px;
  }
}
/* line 243, ../sass/vice.scss */
.page--vice .browser--desktop--cover_builder {
  padding-bottom: 64.81%;
}
/* line 247, ../sass/vice.scss */
.page--vice .section {
  margin-bottom: 50px;
}
@media (min-width: 768px) {
  /* line 247, ../sass/vice.scss */
  .page--vice .section {
    margin-bottom: 100px;
  }
}
/* line 254, ../sass/vice.scss */
.page--vice .subsection {
  margin-bottom: 60px;
}
/* line 258, ../sass/vice.scss */
.page--vice .subsection--top {
  margin-bottom: 30px;
}
/* line 262, ../sass/vice.scss */
.page--vice .section-title {
  font-size: 36px;
  line-height: 1;
  font-weight: 900;
  margin-bottom: 10px;
}
@media (min-width: 768px) {
  /* line 262, ../sass/vice.scss */
  .page--vice .section-title {
    font-size: 72px;
  }
}
@media (min-width: 768px) {
  /* line 274, ../sass/vice.scss */
  .page--vice .section-title--long {
    white-space: nowrap;
  }
}
/* line 283, ../sass/vice.scss */
.page--vice .section-subtitle {
  font-size: 36px;
  font-weight: 900;
  margin-bottom: 14px;
}
/* line 290, ../sass/vice.scss */
.page--vice .image-container img {
  width: 100%;
}
/* line 294, ../sass/vice.scss */
.page--vice .image-container--diagram {
  margin-bottom: 30px;
}
/* line 298, ../sass/vice.scss */
.page--vice .section--parts img {
  border: 2px solid black;
}
/* line 302, ../sass/vice.scss */
.page--vice .parts-grid {
  margin-top: 15px;
}
/* line 306, ../sass/vice.scss */
.page--vice .parts-grid .image-container {
  margin-bottom: 30px;
}
/* line 310, ../sass/vice.scss */
.page--vice .parts-grid .description--main {
  margin-bottom: 8px;
}
/* line 314, ../sass/vice.scss */
.page--vice .description--small p {
  margin-bottom: 10px;
}
/* line 318, ../sass/vice.scss */
.page--vice .example-list li {
  margin-bottom: 5px;
}
/* line 323, ../sass/vice.scss */
.page--vice .section--tricks .section-subtitle {
  margin-bottom: 5px;
}
/* line 327, ../sass/vice.scss */
.page--vice .boxed-image {
  margin-top: 5px;
}
/* line 331, ../sass/vice.scss */
.page--vice .boxed-image-container {
  border: none;
  padding: 10px;
  margin-top: -6px;
  border: 2px solid black;
}
/* line 340, ../sass/vice.scss */
.page--vice a.link--special {
  color: gold;
}
/* line 346, ../sass/vice.scss */
.page--vice .header--obama {
  /*height: 500px;*/
  overflow: hidden;
  min-height: 200px;
  position: relative;
  margin-bottom: 20px;
}
@media (min-width: 768px) {
  /* line 346, ../sass/vice.scss */
  .page--vice .header--obama {
    min-height: 400px;
    margin-bottom: 50px;
  }
}
/* line 361, ../sass/vice.scss */
.page--vice .header--obama video {
  width: 100%;
  margin-top: -70px;
}
@media (min-width: 500px) {
  /* line 361, ../sass/vice.scss */
  .page--vice .header--obama video {
    margin-top: -100px;
  }
}
@media (min-width: 768px) {
  /* line 361, ../sass/vice.scss */
  .page--vice .header--obama video {
    margin-top: -100px;
  }
}
@media (min-width: 1000px) {
  /* line 361, ../sass/vice.scss */
  .page--vice .header--obama video {
    margin-top: -200px;
  }
}
@media (min-width: 1200px) {
  /* line 361, ../sass/vice.scss */
  .page--vice .header--obama video {
    margin-top: -280px;
  }
}
/* line 380, ../sass/vice.scss */
.page--vice .obama-logo {
  /*  z-index: 2;
    position: relative;
    width: 50%;
    margin: 0 auto;
    margin-top: 40px;*/
  margin-bottom: 20px;
}
/* line 388, ../sass/vice.scss */
.page--vice .obama-video {
  position: absolute;
  top: 50px;
  left: 0;
  z-index: 1;
}
/* line 395, ../sass/vice.scss */
.page--vice .obama-logo img {
  width: 100%;
}
/* line 400, ../sass/vice.scss */
.page--vice .description--obama_lead p {
  font-size: 24px;
  margin-bottom: 12px;
}
/* line 406, ../sass/vice.scss */
.page--vice .section--credits {
  margin-top: 40px;
}

/* line 416, ../sass/vice.scss */
.page--vice.page--vice--obama {
  text-align: center;
}
/* line 420, ../sass/vice.scss */
.page--vice.page--vice--obama .video-embed-container {
  margin-bottom: 80px;
}
/* line 424, ../sass/vice.scss */
.page--vice.page--vice--obama .video-container {
  margin-top: 80px;
}
/* line 428, ../sass/vice.scss */
.page--vice.page--vice--obama .video-container video,
.page--vice.page--vice--obama .video-embed-container {
  border: 0;
}
/* line 434, ../sass/vice.scss */
.page--vice.page--vice--obama .snack-vid {
  width: 100%;
  margin-bottom: 20px;
  border: 1px solid black;
}

/* line 444, ../sass/vice.scss */
.page--vice--vnt {
  /*  color: white;
    background-color: black;
  
  
    .title-wrapper {
      background-color: transparent;
    }
  */
}