html {
  width: 100% !important;
  margin: 0 !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
}

.browsehappy {
  margin: 0.2em 0;
  background: #ccc;
  color: #000;
  padding: 0.2em 0;
}

.videoItem {
  text-align: center !important;
  height: 100px;
}

.videoItemThumb {
  float: left !important;
  margin-right: 5% !important;
  max-width: 20% !important;
}

.videoItemHr {
  width: 70% !important;
  border-color: #439ad5;
  margin: 0px !important;
}

.videoItemSubHeading {
  text-align: left !important;
}

#myModal {
  width: 70% !important;
  height: 80% !important;
  margin: 0 auto;
  border-radius: 25px !important;
  text-align: left !important;
  padding-right: 0px !important;
  padding-top: 10% !important;
}

.customModalSignUp {
  text-align: left !important;
}

.fluid-width-video-wrapper {
  padding-top: 3% !important;
}

.videoPlayer {
  width: 100% !important;
}

/* DESKTOP */
@media (min-width: 768px) {
  .navbar-default {
    background-color: transparent !important;
    color: #fff !important;
    border-width: 0px !important;
  }

  .navScrolled {
    background-color: #ab363e !important;
    color: #ffffff !important;
  }

  .navbar-nav li a, .navbar-brand {
    color: #fff !important;
  }

  #video-background {
    position: absolute;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 0;
  }

  .whiteHeadingCust {
    color: #fff !important;
  }

  .videoItemHeading {
    text-align: left !important;
    border-color: #439ad5;
    font-size: 1.9em !important;
  }

  .headingWelcomeButton {
    font-size: 1.8em !important;
    margin-top: 2em !important;
  }

  .borderRadius {
    border: 2px solid #e9fbfc !important;
    border-radius: 45px !important;
  }

  .floatingLeft {
    text-align: left !important;
  }

  .modalHeading {
    background-color: #ab363e !important;
    color: #fff !important;
    margin: 0 auto !important;
    width: 100% !important;
    height: 77px;
    vertical-align: middle !important;
    padding-top: 1% !important;
  }

  .customFeatureHeading {
    font-size: 20px !important;
  }
  .availableLiveStreams {
    position: relative !important;
    height: auto;
    margin-bottom: 200px !important;
    cursor: pointer !important;
  }

  .customizedModalPageHeader {
    width: 100% !important;
    margin: 0 auto !important;
    border: none !important;
    margin-left: 0% !important;
  }

  #modal-sign-up-detail  {
    width:55% !important;
    height:55% !important;
    top: 10% !important;
    margin: 0 auto;
  }



  .featureDesc {
    width: 253px;
    text-align: center;
    min-height: 100px !important;
    height: 100px !important;
    font-size: 14px;
  }

  .featureDesc2 {
    width: 274px;
    text-align: center;
    min-height: 100px !important;
    height: 100px !important;
    font-size: 14px;
  }

  #modal-video-detail, #modal-video-prepared  {
    width:80% !important;
    height:85% !important;
    top: 5% !important;
    margin: 0 auto;
  }

  .logoCustom {
    background-image: url("../images/logo.png") !important;
    background-repeat: no-repeat;
    background-size: contain;
    width: 20px !important;
    height: 20px !important;
    float: left;
    margin-right: 10px;
  }

  .logoCustomBigger {
    background-image: url("../images/logo.png") !important;
    background-repeat: no-repeat;
    background-size: contain;
    width: 35px !important;
    height: 35px !important;
    float: left;
    margin-right: 10px;
    margin-top: 12px;
    vertical-align: middle;
  }

  .intro-text-wrapper {
    width: 280px;
    margin: 0 auto;
  }

  .blueColor2 {
    color: #ab363e !important;
  }

  .p__circle {
    background: url(../images/logo_certicon.png) no-repeat center center;
    background-size: cover;
    width: 200px;
    height: 85px;
    display: block;
    position: absolute;
    right: 15px;
    top: 10px;
    margin-top: 5px;
    z-index: 10;
    cursor: pointer;
    opacity: 0.5;
  }

}


/* MOBILE */
@media (max-width: 768px) {
  #nav {
    background-color: #f8f8f8 !important;
    color: #439ad5 !important;
    border-width: 0px !important;
  }

  .navbar-nav li a, .navbar-brand {
    color: #ab363e !important;
    background-color: transparent !important;
  }

  .navbar-brand {
    background-color: #f8f8f8 !important;
  }

  .whiteHeadingCust {
    color: #ab363e !important;
  }

  .navbar-nav > .active > a {
    background-color: #ffffff !important;
    color: #439ad5 !important;
  }

  #video-background {
    position: absolute;
    right: 0;
    top: 5%;
    height: 73% !important;
    width: auto !important;
    z-index: 0;
  }

  .videoItemHeading {
    text-align: left !important;
    border-color: #439ad5;
    font-size: 1.1em !important;
  }

  .browser-demo .contact {
    height: 80px !important;
  }

  .headingWelcomeButton {
    font-size: 1.5em !important;
    margin-top: 2em !important;
    border: 5px solid #26d3e2 !important;
    border-radius: 45px !important;
  }


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

  .availableLiveStreams {
    position: relative !important;
    height: auto;
    margin-bottom: 100px !important;
  }

  .customizedModalPageHeader {
    width: 100% !important;
    margin: 0 auto !important;
    border: none !important;
    margin-left: 0% !important;
  }

  .featureDesc {
    width: 251px;
    text-align: center;
    min-height: 35px !important;
    height: 35px !important;
    font-size: 14px;
  }

  .featureDesc2 {
    width: 253px;
    text-align: center;
    min-height: 100px !important;
    height: 100px !important;
    font-size: 14px;
  }

  .logoCustom {
    background-image: url("../images/logo_mobile.png") !important;
    background-repeat: no-repeat;
    background-size: contain;
    width: 20px !important;
    height: 20px !important;
    float: left;
    margin-right: 10px;
  }

  .logoCustomBigger {
    background-image: url("../images/logo.png") !important;
    background-repeat: no-repeat;
    background-size: contain;
    width: 35px !important;
    height: 35px !important;
    float: left;
    margin-right: 10px;
    margin-top: 0px;
    vertical-align: middle;
  }

  .intro-text-wrapper {
    width: 160px;
    margin: 0 auto;
  }


  .blueColor2 {
    color: #ab363e !important;
  }

  .customHeadingPadding{
    padding-top: 11% !important;
  }

  /*
   .p__circle {
     background-image: url(../images/logo_certicon_mobile.png);
     width: 150px;
     height: 65px;
     display: block;
     position: absolute;
     right: 10px;
     top: 0px;
     margin-top: 61px;
     z-index: 10;
     cursor: pointer;
     opacity: 0.5;
   }
   */
}

.videoEvents {
  text-align: left;
}

.pointer {
  cursor: pointer !important;
}

.headingWelcomeButton {
  color: #fff !important;
  cursor: pointer !important;
  padding-left: 5% !important;
  padding-right: 5% !important;
}

.customFontWeight {
  font-weight: 200 !important;
  text-transform: uppercase;
}

.infoBlue {
  color: #fff !important;
}

.infoBlueHeading {
  color: #26D3E2 !important;
}

.infoBlue_bg {
  background-color: #ab363e !important;
}

.infoBlue_bg_lighter {
  background-color: #e9fbfc !important;
}

.lockedContent_bg {
  background-color: #00c7da !important;
}


.darkHeading {
  color: #404040 !important;
}

.label-white {
  background-color: #ffffff !important;
  color: #000000 !important;
  border: 5px solid #ffffff !important;
  border-radius: 20px !important;
  margin-top: 10px !important;
  display: inline-block !important;
  cursor: pointer !important;
  opacity: 0.6 !important;
}

.label-blue {
  background-color: #26d3e2 !important;
  color: #fff !important;
  border: 5px solid #26d3e2 !important;
  border-radius: 20px !important;
  margin-top: 10px !important;
  display: inline-block !important;
  cursor: pointer !important;
  opacity: 0.6 !important;
}

span.label-blue:hover  {
  background-color: #ffffff !important;
  opacity: 1 !important;
  color: #000000 !important;
  border: 5px solid #26d3e2 !important;
}


.label-locked-blue {
  background-color: #c9f5f9 !important;
  color: #fff !important;
  border: 5px solid #c9f5f9 !important;
  border-radius: 20px !important;
  margin-top: 10px !important;
  display: inline-block !important;
  cursor: pointer !important;
  opacity: 1 !important;
}

.label-locked {
  background-color: #63e2ed !important;
  color: #fff !important;
  border: 5px solid #63e2ed !important;
  border-radius: 20px !important;
  margin-top: 10px !important;
  display: inline-block !important;
  cursor: pointer !important;
  opacity: 1 !important;
}

.exampleSubheading {
  font-style: italic !important;
  font-size: 120% !important;
}


.centerContent {
  margin:  0 auto !important;
  float: none !important;
}

.videoWrappper {
  margin:  0 auto !important;
}

.underline {
  text-decoration: underline !important;
}

/* http://www.cssmatic.com/gradient-generator# */
.lockedItemsCover {
  padding: 5%;
  opacity: 0.6 !important;
  background: linear-gradient(to bottom, #00c7da 0%, #00c7da 80%) !important;
  z-index: 99999 !important;
}

span.label-white:hover  {
  background-color: #ffffff !important;
  opacity: 1 !important;
}

span.label-locked:hover  {
  background-color: #ffffff !important;
  color: #000000 !important;
  opacity: 1 !important;
  border-color: #ffffff !important;
}


.modalHeading {
  background-color: #26d3e2 !important;
  color: #fff !important;
  margin: 0 auto !important;
  width: 100% !important;
  height: 77px;
  vertical-align: middle !important;
  padding-top: 1% !important;
}

.customizedModalContainer {
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0px !important;
}


.closeModalWrapper {
  padding-top: 1% !important;
  position: absolute !important;
  float: right !important;
  right: 2% !important;
  /*background-color: red !important;*/
  top: -35px !important;
  height: 50px;
  vertical-align: middle;
  cursor: pointer !important;
}

.customCloseModalBtn {
  font-size: 5em !important;
}

.customContentPadding {
  padding-left: 2%;
  padding-right: 2%;
}

.imgExampleLiveStream {
  width: 100% !important;
}

.videoPlayerStatic {
  width: 100% !important;
}

.pointer {
  cursor: pointer !important;
}

.paragraphDescription {
  margin-bottom: 5%;
}

.videoItemSecondType {
  margin-bottom: 30px !important;
}

.vjs-default-skin {
  width: 100% !important;
}

.itemCustomWidth {
  margin: 0px !important;
}

.whiteHeading {
  color: #fff !important;
}

.colorizedEvent {
  background-color: #26d3e2 !important;
  color: #ffffff !important;
}

.videoItemLi {
  padding-left: 1%;
}

.justify {
  text-align: justify !important;
}