/* new showcase */
.gutter--right {
  padding-right: 0px !important;
}

.gutter--left {
  padding-left: 0px !important;
}

/*.site-header__push-menu--toggle {
  padding-left: 2% !important;
}*/

.site-header__avalanche-logo {
  padding-right: 2% !important;
}

#showcase-page-container {
  width:100%;
  height:100%;
  color:#4d4d4d;
  overflow: auto;
}

#showcase-header {
  position:relative;
  display:block;
  max-width:1200px;
  margin:0 auto;
  width: 100%;
  height: auto;
  padding:15px;
}

#showcase-header h1 {
  height:50px;
  margin:0px;
  font-family:'Gotham';
  font-weight:700;
  font-size:42px;
  color:#4d4d4d;
}

#showcase-header h3 {
  color:#AAAAAA;
}

#options-container {
  position:relative;
  min-height:650px;
  height:calc(100% - 100px);
  width:100%;
  background-color:#46B2DA;
}

#options-subcontainer {
  position:relative;
  display:block;
  text-align:center;
  width:100%;
  background-color:#46B2DA;
  max-width:1200px;
  margin:0 auto;
}

#formats {
  height:100%;
  background-color: #46B2DA;
  float:left;
}

#formats h1, #usecases h1 {
  color:white;
}

#formats a {
  position:relative;
  display:block;
  /*may change*/
  height:81.5px;
  line-height:81.5px;
  width:90%;
  background-color:rgba(255,255,255,.55);
  margin:0 auto;
  margin-bottom:15px;
  text-decoration:none;
  border-radius:5px;
  -webkit-box-shadow: 0px 6px 5px 0px rgba(0,0,0,.10);
  -moz-box-shadow: 0px 6px 5px 0px rgba(0,0,0,.10);
  box-shadow: 0px 6px 5px 0px rgba(0,0,0,.10);
}

#formats a img {
  position:relative;
  display:inline-block;
  vertical-align:middle;
  line-height:normal;
  margin-right:20px;
}

#formats a img:last-child {
  margin-bottom: 0px;
}

#formats a span {
  text-align:center;
  display:inline-block;
  vertical-align:middle;
  color:#4d4d4d;
  /*may change*/
  font-size:29px;
  width:175px;
}

/*may change*/
#formats a span:last-child {
  line-height:normal;
  width:190px;
}

#usecases {
  height:100%;
  background-color:#46B2DA;
  float:left;
}

#usecases div a {
  display:block;
  height: auto;
  line-height:100px;
  width:90%;
  background-color:rgba(255,255,255,.55);
  margin:0 auto;
  margin-bottom:15px;
  text-decoration:none;
  border-radius:5px;
  -webkit-box-shadow: 0px 6px 5px 0px rgba(0,0,0,.10);
  -moz-box-shadow: 0px 6px 5px 0px rgba(0,0,0,.10);
  box-shadow: 0px 6px 5px 0px rgba(0,0,0,.10);
}

#usecases div a:first-child {
  margin-bottom:15px;
}

#usecases div a img {
  position:relative;
  display:inline-block;
  vertical-align:middle;
  /*may change*/
  line-height:normal;
  margin-right:20px;
}

/*may change*/
#usecases div a:first-child img {
}

/*may change*/
#usecases div a:nth-child(2) img {
}

#usecases div a span {
  position:relative;
  display:inline-block;
  vertical-align:middle;
  color:#4d4d4d;
  /*may change*/
  line-height:normal;
  font-size:29px;
}

/*may change*/
#usecases div a:first-child span {
  width:217px;
}

/*may change*/
#usecases div a:nth-child(2) span {
  width:217px;
  padding: 7.5px;
}

@media only screen and (min-width: 64.0625em) {
  #formats a {
    height:81.5px;
    line-height:81.5px;
    width:450px;
  }

  #formats a span {
    font-size:29px;
    width:175px;
  }

  #formats a span:last-child {
    line-height:normal;
    width:190px;
  }

  #usecases div a {
    height:275px;
    line-height:100px;
    width:450px;
  }

  #usecases div a:first-child img {
    top:35%;
    margin-top:-20px;
  }

  #usecases div a:nth-child(2) img {
    top:30%;
  }

  #usecases div a span {
    font-size:29px;
  }

  #usecases div a:first-child span {
    width:217px;
    top:35%;
    margin-top:-14.5px;
  }

  #usecases div a:nth-child(2) span {
    width:275px;
    top:30%;
  }
}

@media only screen and (max-width: 64.0625em) {
  span {
    font-size: 20px !important;
  }
}

@media only screen and (max-width: 509px) {
  #showcase-header h3 {
    font-size: 12px;
  }
}

@media only screen and (max-width: 360px) {
  #usecases div a img {
    display: none;
  }

  #formats div a img {
    display: none;
  }
}

@supports (-webkit-overflow-scrolling: touch) {
  @media only screen and (max-width: 470px) {
    .app-content {
      overflow: scroll;
      -webkit-overflow-scrolling: touch;
    }
  }
}

/* showcase product page */
.desktop {
  display: block;
}

.mobile {
  display: none;
}

#showcase-product {
  margin:0 auto;
  font-family:Light;
}

.tab {
  display: inline !important;
  padding: 5px !important;
  padding-left:0px !important;
  font-weight: 100 !important;
  opacity: .65 !important;
}

.safari-tab {
  display: inline !important;
  padding: 5px !important;
  font-weight: 100 !important;
}

.active-tab {
  font-weight: 400 !important;
  opacity: 1 !important;
  text-decoration: underline;
}

.gutter--right {
  padding-right: 0px !important;
}

.gutter--left {
  padding-left: 0px !important;
}

/*.site-header__push-menu--toggle {
  padding-left: 2% !important;
}
*/
.site-header__avalanche-logo {
  padding-right: 2% !important;
}

#showcase-header {
  position:relative;
  display:block;
  max-width:1200px;
  margin:0 auto;
  width: 100%;
  height: auto;
  padding:15px;
}

#showcase-header h1 {
  height:50px;
  margin:0px;
  font-family:'Gotham';
  font-weight:700;
  font-size:42px;
  color:#4d4d4d;
}

#showcase-header h1 a {
  text-decoration:none;
  color:#4d4d4d;
}

#showcase-header h3 {
  color:#AAAAAA;
}

.pre-load {
  position:relative;
  display:block;
  height:50px;
  width:65px;
  left:50%;
  margin-left:-32.5px;
  padding:10px;
  top:150px;
}

.arrow-container {
  position:relative;
  display:block;
  max-width:1200px;
  width:100%;
  margin:0 auto;
}

#selection-container {
  position:relative;
  display:block;
  width:100%;
  height:100%;
  background-color:#AADDF0;
}

#format-selections {
  position:relative;
  display:block;
  height:100%;
  width:100%;
}

.showcase-header {
  position:relative;
  max-width:1200px;
  margin:0 auto;
}

.showcase-header-container {
  width:100%;
  background-color:#47B3DB;
  padding-top:15px;
  padding-bottom:15px;
}

.showcase-header-list {
  position:absolute;
  display:block;
  width:50%;
  height:43px;
}

.showcase-header-list h3 {
  padding:0px;
  margin:0px;
  color:#FFFFFF;
}

.showcase-header-list ul {
  color:#FFFFFF;
  font-weight:400;
  line-height:30px;
  font-size:13px;
  margin:0px;
  padding:0px;
}

.showcase-header-list ul li a {
  text-decoration:none;
  color:inherit;
}

.showcase-header-list ul li:first-child {
  padding-left:0px !important;
}

.showcase-header-usecase-list {
  right:0px;
}

.showcase-header-usecase-list div {
  position:relative;
  display:block;
  height:100%;
  float:right;
}

.blue-container {
  position:relative;
  max-width:1200px;
  height:625px;
  width:100%;
  z-index:10;
  margin:0 auto;
}

.slideshow-container {
  height:90%;
  padding-top:25px;
  padding-bottom:25px;
}

.header-container {
  height:75px;
}

.header-container img {
  display:inline;
  height:75px;
  width:75px;
  margin-right:15px;
}

.header-container img:first-child {
  margin-right:5px;
}

.header-container p {
  display:inline;
  font-size:32px;
  line-height:75px;
  vertical-align:middle;
  font-family:Light;
  font-weight:100;
  color:#4d4d4d;
  margin-right:-100px;
}

.ott-blue-container .header-container p {
  margin-right: 0px;
}

.description-container {
  font-family:Light;
  font-size:14px;
  padding-left:60px;
  color:#4d4d4d;
  height:75px;
  line-height:75px;
}

.description-container p {
  display:inline-block;
  vertical-align:middle;
  line-height:normal;
  text-align:left;
}

.feature-list-container {
  padding-top:10px;
}

.feature-container {
  height:500px;
  padding-top:30px;
}

.feature-header {
  color:#47B3DB;
  font-size:22px;
}

.showcase-table {
  position:relative;
  display:table;
  overflow:auto;
  height:auto;
}

.showcase-table td {
  padding:15px;
  color:#4d4d4d;
  list-style-position: outside;
}

.video-container object {
  height:100%;
  width:100%;
}

.video-container img {
  position:relative;
  display:block;
  width:657px;
  height:501px;
  left:50%;
  margin-left:-326.5px;
  margin-top:60px;
}

.ott-blue-container {
  position:relative;
  max-width:1200px;
  height:625px;
  width:100%;
  z-index:10;
  margin:0 auto;
}

.ott-feature-container {
  height:500px;
  padding-top:30px;
}

#usecase-selections { 
  position:relative;
  display:block;
  height:100%;
  width:100%;
  margin:0 auto;
}

#usecase-selections-subcontainer {
  width:100%;
  height:100%;
  min-height:calc(100vh - 185px);
  background-color:#AADDF0;
}

.usecase-header {
  width: 100%;
  color:#4D4D4D;
  font-size:32px;
  font-weight:lighter;
  padding-left:0px !important;
}

.usecase-header img {
  margin:0px;
  margin-right:15px;
}

.showcase-bucket {
  position:relative;
  max-width:1200px;
  height:100%;
  width:100%;
  padding:25px;
  background-color:#AADDF0;
  margin:0 auto;
  font-family:Light;
}

.usecase-description {
  padding:0px !important;
  margin-top:25px;
}

.description-divide {
  height:1px;
  background:black;
  opacity:.25;
  margin-top:25px;
}

.casestudies {
  width:100%;
  height:300px;
  cursor:pointer;
}

.casestudies h3 {
  text-align:center;
  color:rgba(0,0,0,.75);
}

.casestudy-container {
  padding:5px;
}

.casestudy-container > div:first-child {
  position:relative;
  display:block;
  width:100%;
  height:200px;
  padding:5px;
}

.casestudy-container > div:nth-child(2) {
  display:inline-block;
  width:100%;
  text-align:center;
}

.casestudy-container > div:first-child > div {
  position:relative;
  display:block;
  margin:0 auto;
  width:304px;
}

.casestudy-container img {
  width:150px;
  margin: 0px;
  padding: 0px;
}

.paddles {
  position: absolute;
  display: block;
  left: 50%;
  width: 100%;
  height: calc(100% - 65px);
}

.paddle {
  position: absolute;
  display: block;
  height: 50px;
  width: 50px;
  z-index: 10;
  top: 50%;
  margin-top: -25px;
  text-align: center;
  cursor: pointer;
  color: white !important;
  font-weight: bold;
  font-size: 18px;
  padding: 12px;
  /* transition: 0.6s ease; */
  border-radius: 0 3px 3px 0;
  border: 1px solid white;
  background-color: transparent;
}

.paddle:hover {
  background-color: #46B2DA;
}

.left-paddle {
  left: -75px;
}

.right-paddle {
  right: -75px;
}

.hidden {
  display: none;
}

@media only screen and (max-width: 64.0625em) {
  .blue-container {
    height: auto !important;
  }

  .slideshow-container > div {
    height: auto;
  }

  .slideshow-container > div > div {
    float: none !important;
  }

  .slideshow-container {
    padding: 25px;
    padding-bottom: 0px;
    height: auto !important;
    float: none !important;
  }

  .slideshow-container .description-container {
    height: auto;
    padding: 25px 0px !important;
  }

  .showcase-header {
    padding: 0px 25px;
    height: auto !important;
  }

  .showcase-header-list {
    position:relative;
    width:100%;
    height:auto;
  }

  .showcase-bucket {
    overflow: unset !important;
  }

  .usecase-description {
    margin-bottom: 50px;
  }

  .casestudies {
    height: auto;
  }

  .casestudies h3 {
    text-align:left;
    margin-bottom: 5px;
    color: #47B3DB;
    font-size: 22px;
  }

  .casestudy-container img {
    display: inline-block;
    width: 50%;
  }

  .casestudy-container img:first-child {
    border-right: 1px solid black;
  }

  .casestudy-container img:nth-child(2) {
    left: 0px;
    position: relative;
    width: calc(50% - 5px);
  }

  .casestudy-container > div:first-child {
    height:auto;
    padding-bottom:15px;
    width: calc(100% + 50px);
    left: -25px;
  }

  .casestudy-container > div:first-child > div {
    width: 100%;
  }

  .casestudy-container > div:nth-child(2) {
    text-align:left;
  }

  .video-container {
    padding-top: 25px;
  }

  .ott-feature-container {
    height: auto !important;
  }

  .ott-feature-container table {
    margin-bottom: 0px;
  }

  .desktop {
    display: none;
  }

  .mobile {
    display: block;
  }

  .mobile-1 {
    height: 500px !important;
  }

  .box-shadow {
    -webkit-box-shadow: unset;
    -moz-box-shadow: unset;
    box-shadow: unset;
  }
}

@media only screen and (max-width: 950px) {
  .arrow-container {
    display: none;
  }

  .paddle {
    display: none !important;
  }
}

@media only screen and (max-width: 768px) {
  .usecase-header {
    font-size: 24px;
  }

  .usecase-header[ng-if="selection === 'distribution'"] {
    font-size: 18px;
  }
}

@media only screen and (max-width: 509px) {
  #showcase-header h3 {
    font-size: 12px;
  }
}

@media only screen and (max-width: 470px) {
  .usecase-header {
    font-size: 15px;
  }

  .usecase-header[ng-if="selection === 'distribution'"] {
    font-size: 13px;
  }

  .usecase-header img {
    width: 50px;
  }

  .cell {
    zoom: 0.5;
    -moz-transform: scale(0.5);
  }

  .mobile-1 {
    height: 300px !important;
  }

  .pubAdv {
    font-size: 18px !important;
  }

  .adv {
    font-size: 22px !important;
  }

  .info-container .info {
    font-size: 16px !important;
  }

  .viewButton {
    font-size: 18px !important;
  }
}

@supports (-webkit-overflow-scrolling: touch) {
  @media only screen and (max-width: 470px) {
    .app-content {
      overflow: scroll;
      -webkit-overflow-scrolling: touch;
    }

    .pubAdv {
      font-size: 9px !important;
    }

    .adv {
      font-size: 11px !important;
    }

    .adv > span {
      font-size: 11px !important;
    }

    .info-container .info {
      font-size: 8px !important;
    }

    .viewButton {
      font-size: 9px !important;
    }
  }
}

.blue-container table > tbody > tr > td,
.ott-blue-container table > tbody > tr > td {
  display:block;float: left;height:100%;
}

#format-selections .mobile-1 {
  position:relative;
  height:450px;
  width:100%;
  border-bottom:1px solid #4d4d4d;
  background-color:#4d4d4d;
  -webkit-box-shadow: inset 0px 6px 5px 0px rgba(0,0,0,.48);
  -moz-box-shadow: inset 0px 6px 5px 0px rgba(0,0,0,.48);
  box-shadow: inset 0px 6px 5px 0px rgba( 0,0,0,.48);
}

#format-selections .mobile-1 .examples {
  color:#FFFFFF;
  font-size:20px;
  font-weight:lighter;
  padding:25px;
  padding-bottom:10px;
  max-width:1200px;
  margin:0 auto;
  width:100%;
}

#format-selections .mobile-1 .creative-container {
  position:relative;
  overflow-x:auto;
  max-width:1200px;
  margin:0 auto;
  width:100%;
}

#format-selections .mobile-1 .creative-container .container-inner {
  position:relative;
  height:100%;
  margin:0 auto;
}

#format-selections .mobile-1 .creative-container .container-inner .cell {
  float:left;
}

#format-selections .mobile-1 .creative-container .container-inner .cell .ad-img {
  text-align:left;
}

#format-selections .mobile-1 .creative-container .container-inner .cell .ad-img .text-container > p {
  margin-right:5px;
}

#format-selections .mobile-1 .creative-container .container-inner .cell .ad-img .text-container > p > div > span {
  position:relative;
  top:-5px;
}

#format-selections .mobile-1 .creative-container .container-inner .cell .ad-img:first-child .info-container > p:first-child,
#format-selections .mobile-1 .creative-container .container-inner .cell .ad-img:last-child .info-container > div:first-child > p:first-child {
  width:175px;
  white-space:nowrap;
  text-overflow:ellipsis;
  overflow-x:hidden;
}

#format-selections .mobile-1 .creative-container .container-inner .cell .ad-img:first-child .info-container > p:first-child > span,
#format-selections .mobile-1 .creative-container .container-inner .cell .ad-img:last-child .info-container > div:first-child > p:first-child > span {
  position:relative;
  top:-5px;
}

#format-selections .mobile-1 .creative-container .container-inner .cell .ad-img:first-child .info-container > div.nomojo {
  position:absolute;
  bottom:15px;
}

#format-selections .mobile-1 .creative-container .container-inner .cell .ad-img:first-child .info-container > div.nomojo > a:first-child {
  text-decoration:none;
}

#format-selections .mobile-1 .creative-container .container-inner .cell .ad-img .info-container > div > a:last-child {
  margin-left:-10px;
}

#format-selections .mobile-1 .creative-container .container-inner .cell .ad-img:last-child .info-container > div:last-child > div.pubAdv {
  width:200px;
  padding:5px;
  margin:2.5px;
}

#format-selections .mobile-1 .creative-container .container-inner .cell .ad-img:last-child .info-container > div:last-child > div.pubAdv > div > span > a {
  text-decoration:none;
}

#format-selections .mobile-1 .creative-container .container-inner .cell .ad-img:last-child .info-container > div:last-child > div.pubAdv > div > span > a > button {
  width:85px;
  margin:2.5px !important;
}

#format-selections .mobile-1 .creative-container .container-inner .cell .ad-img:last-child .info-container > div:last-child > div:last-child {
  position:absolute;
  bottom:15px;
}

#format-selections .mobile-1 .creative-container .container-inner .cell .ad-img:last-child .info-container > div:last-child > div:last-child > a {
  margin-left:-10px;
}

#usecase-selections .desktop {
  margin-top:15px;
  text-align:center;
}

#usecase-selections .desktop .cell {
  display:inline-block;
  font-family:Light !important;
}

#usecase-selections .desktop .cell .ad-img {
  text-align:left;
}

#usecase-selections .desktop .cell .ad-img .text-container p {
  margin-right:5px;
}

#usecase-selections .desktop .cell .ad-img .text-container p span {
  position:relative;
  top:-5px;
}

#usecase-selections .desktop .cell .ad-img .info-container p.pubAdv {
  width:175px;
  white-space:nowrap;
  text-overflow:ellipsis;
  overflow-x:hidden;
}

#usecase-selections .desktop .cell .ad-img .info-container p.pubAdv > span {
  position:relative;
  top:-5px;
  font-family:Light;
}

#usecase-selections .desktop .cell .ad-img .info-container div.nomojo {
  position:absolute;
  bottom:15px;
}

#usecase-selections .desktop .cell .ad-img .info-container div.nomojo > a:first-child {
  text-decoration:none;
}

#usecase-selections .desktop .cell .ad-img .info-container div > a:last-child {
  margin-left:-10px;
}

#usecase-selections .desktop .cell .ad-img .info-container div:last-child > div.pubAdv {
  width:200px;
  padding:5px;
  margin:2.5px;
}

#usecase-selections .desktop .cell .ad-img .info-container div:last-child > div.pubAdv a {
  text-decoration:none;
}

#usecase-selections .desktop .cell .ad-img .info-container div:last-child > div.pubAdv button {
  width:85px;
  margin:2.5px !important;
}

#usecase-selections .desktop .cell .ad-img .info-container div:last-child > div:last-child {
  position:absolute;
  bottom:15px;
}

#usecase-selections .desktop .cell .ad-img .info-container div:last-child > div:last-child > a {
  margin-left:-10px;
}

#usecase-selections .mobile-1 {
  position:relative;
  height:500px;
  width:100%;
  border-bottom:1px solid #4d4d4d;
  background-color:#4d4d4d;
  -webkit-box-shadow: inset 0px 6px 5px 0px rgba(0,0,0,.48);
  -moz-box-shadow: inset 0px 6px 5px 0px rgba(0,0,0,.48);
  box-shadow: inset 0px 6px 5px 0px rgba( 0,0,0,.48);
}

#usecase-selections .mobile-1 .examples {
  color:#FFFFFF;
  font-size:20px;
  font-weight:lighter;
  padding:25px;
  padding-bottom:10px;
  max-width:1200px;
  margin:0 auto;
  width:100%;
}

#usecase-selections .mobile-1 .creative-container {
  position:relative;
  overflow-x:auto;
  max-width:1200px;
  margin:0 auto;
  width:100%;
}

#usecase-selections .mobile-1 .creative-container > div {
  position:relative;
  height:100%;
  margin:0 auto;
}

#usecase-selections .mobile-1 .creative-container > div .cell {
  float:left;
}

#usecase-selections .mobile-1 .creative-container > div .cell .ad-img {
  text-align:left;
}

#usecase-selections .mobile-1 .creative-container > div .cell .ad-img .text-container p.pubAdv {
  margin-right:5px;
}

#usecase-selections .mobile-1 .creative-container > div .cell .ad-img .text-container p.pubAdv span {
  position:relative;
  top:-5px;
}

#usecase-selections .mobile-1 .creative-container > div .cell .ad-img .info-container p.pubAdv {
  width:175px;
  white-space:nowrap;
  text-overflow:ellipsis;
  overflow-x:hidden;
}

#usecase-selections .mobile-1 .creative-container > div .cell .ad-img .info-container p.pubAdv > span {
  position:relative;
  top:-5px;
}

#usecase-selections .mobile-1 .creative-container > div .cell .ad-img .info-container div.nomojo {
  position:absolute;
  bottom:15px;
}

#usecase-selections .mobile-1 .creative-container > div .cell .ad-img .info-container div.nomojo > a:first-child {
  text-decoration:none;
}

#usecase-selections .mobile-1 .creative-container > div .cell .ad-img .info-container div > a:last-child) {
  margin-left:-10px;
}

#usecase-selections .mobile-1 .creative-container > div .cell .ad-img .info-container > div:nth-child(2) > div.pubAdv {
  width:200px;
  padding:5px;
  margin:2.5px;
}

#usecase-selections .mobile-1 .creative-container > div .cell .ad-img .info-container > div:nth-child(2) > div.pubAdv > div > span > a {
  text-decoration:none;
}

#usecase-selections .mobile-1 .creative-container > div .cell .ad-img .info-container > div:nth-child(2) > div.pubAdv > div > span > a > button {
  width:85px;
  margin:2.5px !important;
}

#usecase-selections .mobile-1 .creative-container > div .cell .ad-img .info-container > div:nth-child(2) > div:last-child {
  position:absolute;
  bottom:15px;
}

#usecase-selections .mobile-1 .creative-container > div .cell .ad-img .info-container > div:nth-child(2) > div:last-child > a {
  margin-left:-10px;
}