/* navbar */
.app-navbar {
  font-weight: 500;
  letter-spacing: .05em;
  position: absolute;
}
a.navbar-brand{
  padding-top: 3px !important;
}
.app-header-simple {
  height: 100px;
}
.nav li a.navbar-social-icon {
  max-height: 50px;
  padding-left: 8px;
  padding-right: 8px;
}
.navbar-social-icon .fa{
  font-size: 21px;
}
/*.navbar-transparent .navbar-nav>.active>a{
  color: #fff;
  border-bottom: 2px solid #fff;
}*/

/* anchors */
a:hover, a:hover h5, a:hover svg, a:hover span, button:hover{
  -webkit-transition: all 150ms linear;
  -moz-transition: all 150ms linear;
  -o-transition: all 150ms linear;
  transition: all 150ms linear;
}
li>a, a{
  cursor: pointer;
}


/* video header block */
.video-header{
  display: table;
  min-height: 100%;
}
@media (min-width: 800px) {
  .video-header{
    min-height: 500px;
  }
}
@media (min-width: 1060px) {
  .video-header{
    min-height: 600px;
  }
}
@media (min-width: 1225px) {
  .video-header{
    min-height: 650px;
  }
  .video-background{
    top: -50px !important;
  }
}
.video-overlay{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-box-shadow: inset 0 0 100px rgba(0,0,0,1);
  box-shadow: inset 0 0 100px rgba(0,0,0,1);
  background: rgba(0,0,0,0.2);
}
.video-background{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
#mobile-image-header{
  background-image: url("/assets/img/screenshots/collaboration.jpg");
}


/* Youtube video */
 #trailer-modal .modal-content {
  -webkit-box-shadow: none;
  box-shadow: none;
  background:transparent;
  border:none;
  outline:none;
}
#trailer-modal .modal-content iframe {
  border:none;
  padding:0;
  margin:0;
}


/* iphone block */
.app-iphone-block {
  padding-bottom: 60px;
}
@media (min-width: 768px) {
  .app-iphone-block {
    padding-bottom: 0;
  }
}


/* code block */
.app-code-block {
  overflow: hidden;
}
.app-code {
  color: #6EA4CF;
  border: #495158 1px solid;
  background: transparent;
  font-size: 12px;
  padding: 20px;
  line-height: 1.55;
  margin-bottom: 30px;
}
.app-code span {
  color: #8496A5;
}
@media (min-width: 768px) {
  .app-code {
    width: 600px;
    margin-bottom: 0;
  }
}
@media (min-width: 992px) {
  .app-code {
    padding: 50px;
    font-size: 15px;
  }
}


/* pull quote block */
.app-high-praise img {
  width: 100%;
}


/* brand ribbon block */
.app-ribbon .container {
  padding-left: 0;
  padding-right: 0;
  margin-bottom: -30px;
}
.app-ribbon img {
  margin: 0 10px 30px;
}


/* features grid block */
.app-block-features-grid {
  padding-top: 75px;
  padding-bottom: 75px;
}
.app-block-features-grid .container {
  margin-bottom: -30px;
}
.app-features-grid .m-b {
  margin-bottom: 10px !important;
}
@media (max-width: 768px) {
  .app-features-grid .m-b-md {
    margin-bottom: 30px !important;
  }
}


/* feature blocks */
/* allows for empty blocks with an image background alone */
.block-feature .container {
  min-height: 120px;
}
@media (min-width: 768px) {
  .block-feature .container {
    min-height: 175px;
  }
}
#feature-pcgames{
  background-image: url("/assets/img/screenshots/campfire.jpg");
}
#feature-lanparty{
  background-image: url("/assets/img/screenshots/lanparty_lq.jpg");
}
#feature-movies{
  background-image: url("/assets/img/screenshots/netflix3.jpg");
}
#feature-work{
  background-image: url("/assets/img/screenshots/work_lq.jpg");
}


/* screenshots grid block */
.screenshots-grid{
  padding-top: 10px !important;
}


/* download block */
#download-app{
  padding-top: 75px !important;
  padding-bottom: 75px !important;
}
.app-download-stores svg, .app-download-stores a{
  height: 60px;
}
.app-download-stores a:hover svg{
  fill: #666;
}
.block-inverse .app-download-stores svg, .block-inverse .app-download-stores a{
  fill: #fff;
  height: 47px;
}
.block-inverse .app-download-stores a:hover svg{
  fill: rgba(255, 255, 255, .7);
}
.headset-img.col-sm-3 {
  height: 240px;
  position: absolute;
}
.headset-img.col-md-4 {
  height: 320px;
  position: absolute;
}
.headset-img img{
  max-width: 100%;
  max-height: 100%;
  position: absolute;
}


/* price plan block */
.app-price-plans {
  background-color: #F4F5F6;
}
.app-price-plans .container {
  margin-bottom: -60px;
}

/* quote block */
blockquote a, blockquote a:hover{
  text-decoration: none;
}
.app-quote blockquote{
  border-left: none;
}
.app-quote .fa.fa-quote-left{
  font-size: 24px;
}


/* press logos */
#press-logos img{
   border: 1px solid #272727;
   border-radius: 5px;
   margin: 10px 0px 8px;
   box-sizing: border-box;
   position: relative;
   padding: 30px 15px;
   background-image: linear-gradient(45deg, rgb(46, 48, 51) 25%, transparent 25%, transparent 75%, rgb(46, 48, 51) 75%, rgb(46, 48, 51)), linear-gradient(45deg, rgb(46, 48, 51) 25%, transparent 25%, transparent 75%, rgb(46, 48, 51) 75%, rgb(46, 48, 51));
   background-size: 20px 20px;
   background-position: 0px 0px, 30px 30px;
   max-width: 100%;
}
#press-logos img.logo-black-on-white{
  border: 1px solid #ddd;
  background-color: #fff;
  background-image: linear-gradient(45deg, #ddd 25%, transparent 25%, transparent 75%, #ddd 75%, #ddd),
                    linear-gradient(45deg, #ddd 25%, transparent 25%, transparent 75%, #ddd 75%, #ddd);
}
#press-logos a{
  position: absolute;
  bottom: 10px;
  right: 15px;
}


/* cross platform */
#cross-platform-text{
  padding-top: 100px !important;
  padding-bottom: 100px !important;
}


/* footer block */
.app-footer a{
  color: #fff;
  text-decoration: none;
}
.app-footer a:hover h5, .footer-social a:hover span{
  color: #1db8f1;
}
.app-footer .footer-social a{
  font-size: 24px;
  width: 40px !important;
  height: 40px !important;
  display: block;
}
.app-footer-legal li a{
  text-decoration: underline;
}
a:hover .fa-twitter{
  color: #55acee !important;
}
a:hover .fa-facebook-official{
  color: #3b5998 !important;
}
a:hover .fa-reddit-alien{
  color: #FF5700 !important;
}
a:hover .fa-steam{
  color: rgba(255,255,255,0.7) !important;
}
a:hover .fa-youtube{
  color: #bb0000 !important;
}


/* general block overrrides */
@media (max-width: 768px) {
  .block .lead {
    line-height: 1.3;
  }
  .block h3 {
    line-height: 1.15;
  }
}


/* general inverse overrides */
.block-inverse .text-muted {
  color: rgba(255, 255, 255, .7);
}
.block-inverse .block-bg-img {
  background-color: transparent;
}


/* general btn overrides */
.btn-lg {
  font-size: 18px;
  border-radius: 4px;
}
.block-secondary .btn-lg {
  width: 100%;
}
.btn-lg:not(.btn-block) {
  padding: 12px 50px;
}
@media (min-width: 768px) {
  .btn-lg:not(.btn-block) {
    width: auto;
  }
}
.btn-lg:not(.btn-block).btn-circle{
  padding: 12px 20px;
  /*border-radius: 50px;*/
}


/* ie10+ */
@media (min-width: 768px) {
  .app-align-center {
    display: flex;
    align-items: center;
  }
}


/*colors */
.bg-bigscreen-blue {
  background-color: #1db8f1 !important;
}
.bg-bigscreen-ultralightgrey, .bg-bigscreen-ultralightgray {
  background-color: #eee !important;
}
.bg-bigscreen-lightgrey, .bg-bigscreen-lightgray {
  background-color: rgb(65, 67, 78) !important;
}
.bg-bigscreen-grey, .bg-bigscreen-gray {
  background-color: rgb(56, 58, 68) !important;
}
.bg-bigscreen-darkgrey, .bg-bigscreen-darkgray {
  background-color: #272727 !important;
}
.bg-blurred{
  background-color: rgba(0,0,0,0.6);
}
.bg-black{
  background-color: #000 !important;
}
.bg-white{
  background-color: #fff !important;
}
.color-bigscreen-red{
  color: #a94442;
}
.color-white{
  color: #fff;
}
.color-ultralightgray, .color-ultralightgrey{
  color: #eee;
}

/* borders */
.border{
  border-radius: 4px;
}
.block-inverse .callout{
  border-color: rgb(65, 67, 78);
}


/* image as a div background */
.block-img-bg {
  background-repeat: no-repeat;
  background-size: cover;
  background-position-x: center;
  background-position-y: center;
}


/* jobs - job openings */
a.callout {
  text-decoration: none;
}

/* help */
#help-header{
  background-image: url("/assets/img/screenshots/campfire.jpg");
}
.help-articles li span.fa{
  height: 30px;
  line-height: 30px;
  font-size: 25px;
}

/* 404 */
#error-404{
  background-image: url("/assets/img/screenshots/desktop.jpg");
}

.separator {
  height: 1px;
  width: 100%;
  background: #ddd;
}