@font-face {
  font-family: 'StainlessExt-Bold';
  src: url('./StainlessExt-Bold/StainlessExt-Bold.eot') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'StainlessExt-Bold';
  src:  url('./StainlessExt-Bold/StainlessExt-Bold.otf')  format('opentype'), url('./StainlessExt-Bold/StainlessExt-Bold.ttf')  format('truetype'), url('./StainlessExt-Bold/StainlessExt-Bold.svg#StainlessExt-Bold') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'StainlessExt-Light';
  src: url('./StainlessExt-Light/StainlessExt-Light.eot?#iefix') format('embedded-opentype'),  url('./StainlessExt-Light/StainlessExt-Light.otf')  format('opentype'),
	     url('./StainlessExt-Light/StainlessExt-Light.woff') format('woff'), url('./StainlessExt-Light/StainlessExt-Light.ttf')  format('truetype'), url('./StainlessExt-Light/StainlessExt-Light.svg#StainlessExt-Light') format('svg');
  font-weight: normal;
  font-style: normal;
}


body{
  margin: 0;
  background-color: #1c1c1c;
}


.videocontainer{
  /* width: 100vw;
  height: 100vh; */
  position: relative;
  display: flex;
}

.videos{
  width: 100%;
height: 100%;
    object-fit: cover;
}

.titleoverlay{
    position: absolute;
    top: 13vh;
    width: 35vw;
    height: 10vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(85,85,85,.77);
    padding-left: 1vw;
    padding-right: 1vw;
}


.videotitle{
  font-family: 'StainlessExt-Bold';
  text-transform: uppercase;
  color: #B4B4B4;
  font-size: 1.5rem;
  text-shadow: 2px 3px 6px rgba(0,0,0, .51);

}


.sidepanel{
  position: absolute;
  right: 0;
  height: 100%;
  top: 0;
  width: 14vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-flex-start;
  background-image: url(images/highlightsline.svg);
  background-repeat: no-repeat;
background-size: contain;
background-position: -2px 0px;
}

.thumbcontainer{
  width: 90%;

}

.thumbcontainer:hover{
  cursor: pointer;
}
.videothumb{
  width: 100%;
  box-shadow: 0px 0px 99px rgba(9,100,229, .76);
}

.videothumb img{
  display: block;
}

.thumbs{
  width: 100%;
}

.paneltitle{
color: #72788D;
font-size: 1.5rem;
font-family: 'StainlessExt-Light';
width: 82%;
text-shadow: 2px 2px 4px rgba(0,0,0, .31);


}

.subtitle{
  color: #72788D;
  font-size: .5rem;
  font-family: 'StainlessExt-Bold';
  text-transform: uppercase;
  margin-top: 1vh;
  text-shadow: 2px 2px 4px rgba(0,0,0, .31);

}

.playing{
  border: 2px solid #0964E5;
}

.nowplaying{
  font-size: .65rem;
  font-family: 'StainlessExt-Bold';
  text-transform: uppercase;
  color: #0964E5;
}

.active{
visibility: visible;
 }

.inactive{
  visibility: hidden;
}

.thumbwrapper{
  width: 83%;
    height: 83%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    margin-top: 20px;
}

.contact{
  position: relative;
    width: 100%;
    height: auto;
    background-image: radial-gradient(#585858, #050505);
}

.formwrapper{
 width: 65%;
 margin: 0 auto;
 padding-top: 2vh;
}

.formtitle{
  color: #B4B4B4;
  font-size: 1.75rem;
  font-family: 'StainlessExt-Light';
  text-align: center;
  margin-bottom: 10px;
}

input[type=text], input[type=email], input[type=tel] {
  border: 0;
  outline: 0;
  background: transparent;
  border-bottom: 1px solid #B4B4B4;
  width: 92%;
 padding: 12px;
 color: #B4B4B4;
 font-size: 1rem;
}


textarea{
  width: 96%;
  margin-top: 18px;
  border: 1px solid #B4B4B4;
  background: transparent;
  padding: 12px;
  color: #B4B4B4;
  font-size: 1rem;

}

.col-50{
  float: left;
  width: 50%;
  margin: 3px 0px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

#success_fail_info {
  color: #B4B4B4;
  font-size: .7rem;
  font-family: 'StainlessExt-Light';
  text-align: center;
  margin-bottom: 10px;
}


.submitbutton{
  text-align: center;
  margin-top: 10px;
}
.socialmedia{
  display: flex;
    justify-content: space-evenly;
    width: 17%;
    margin: 0 auto;
    padding-top: 1vh;
    padding-bottom: 4vh;
}
.socialmedia i{
font-size: 2.4rem;
  color: #B4B4B4;
}
.logo{
  position: absolute;
    right: 14vw;
    width: 15vw;
    height: 15vh;
}

.logo img{
  width: 100%;
}

.highlightsmobile{
  display: none;
}

.textcenter {
  text-align: center !important;
}


/* fade out animation title*/
.fadeouttitle {
  -webkit-animation-name: fade2;
  -webkit-animation-duration: 1s;
  animation-name: fade2;
  animation-duration: 1s;
  opacity: 0;

}

@-webkit-keyframes fade2 {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes fade2 {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* fade in animation title*/
.fadeintitle {
  -webkit-animation-name: fade3;
  -webkit-animation-duration: 1s;
  animation-name: fade3;
  animation-duration: 1s;
  opacity: 1;
}

@-webkit-keyframes fade3 {
  0% {
    opacity: 0
  }
  100% {
    opacity: 1
  }
}

@keyframes fade3 {
  0% {
    opacity: 0
  }
  100% {
    opacity: 1
  }
}



@media screen
  and (min-width: 1200px)
  and (max-width: 1600px)
  and (-webkit-min-device-pixel-ratio: 1) {

    .videotitle{
      font-size: 1.2rem;
    }
    .paneltitle{
      font-size: 1rem;
    }
    .nowplaying{
      font-size: .5rem;
    }

    .formtitle{
      font-size: 1.5rem;
    }
    .submitbutton input{
      width:  20vw;
    }
    .socialmedia i{
      font-size: 1.8rem;
    }
}

@media screen
  and (min-width: 668px)
  and (max-width: 833px) {
    .videocontainer{
      height: 100%;
    }
    .videotitle{
      font-size: 1rem;
    }

    .paneltitle{
      font-size: .7rem;
    }

    .nowplaying{
      font-size: .4rem;
    }

    .subtitle{
      font-size: 5px;

    }

    .formtitle{
      font-size: 1.2rem;
    }

    .submitbutton input{
      width: 17vw;
    }

    .col-50{
      width: 100%;
    }

    .formwrapper{
      padding-top: 5vh;
    }

    input[type=text], input[type=email], input[type=tel] {
      font-size: .8rem;
    }

    textarea{
      width: 92%;
      font-size: .8rem;

    }

    .socialmedia i{
      font-size: 1.4rem;
    }

  }



@media screen
  and (min-width: 834px)
  and (max-width: 1199px)
  and (-webkit-min-device-pixel-ratio: 1) {


    .videotitle{
      font-size: 1rem;
    }

    .paneltitle{
      font-size: .7rem;
    }

    .nowplaying{
      font-size: .4rem;
    }

    .subtitle{
      font-size: .35rem;
    }

    .formtitle{
      font-size: 1.2rem;
    }

    .submitbutton input{
      width: 17vw;
    }

    .col-50{
      width: 100%;
    }

    .formwrapper{
      padding-top: 5vh;
    }

    input[type=text], input[type=email], input[type=tel] {
      font-size: .8rem;
    }

    textarea{
      width: 92%;
      font-size: .8rem;

    }

    .socialmedia i{
      font-size: 1.4rem;
    }
}

@media screen
  and (min-width: 768px)
  and (max-width: 1024px){
    .videocontainer{
      height: 100%;
    }
    .videotitle{
      font-size: 1rem;
    }

    .paneltitle{
      font-size: .7rem;
    }

    .nowplaying{
      font-size: 7px;
    }

    .subtitle{
      font-size: 6px;
    }

    .formtitle{
      font-size: 1.2rem;
    }

    .submitbutton input{
      width: 17vw;
    }

    .col-50{
      width: 100%;
    }

    .formwrapper{
      padding-top: 5vh;
    }

    input[type=text], input[type=email], input[type=tel] {
      font-size: .8rem;
    }

    textarea{
      width: 92%;
      font-size: .8rem;

    }

    .socialmedia i{
      font-size: 1.4rem;
    }
}


@media screen
  and (min-width: 375px)
  and (max-width: 667px){
    .videocontainer{
      height: 100%;
    }
    .titleoverlay{
      top: 4vh;
      width: 37vw;
      height: 4vh;
    }
      .videotitle{
        font-size: .5rem;
      }

      .sidepanel{
        display: none;
      }

      .logo{
        right: 0;

      }

      .highlightsmobile{
        display: block;
        position: relative;
        border-top: 2px solid #0964E5;
       padding-top: 2vh;
       padding-bottom: 2vh;
       border-bottom: 2px solid #0964E5;

      }

      .mobiletitle{
        color: #B4B4B4;
        font-size: 1.3rem;
        font-family: 'StainlessExt-Light';
        text-align: center;
      }
      .slideshow-container {
          /* width: 62vw; */
          position: relative;
          margin: auto;
          padding-top: 3vh;
        }

        .prev, .next {
          cursor: pointer;
          position: absolute;
          top: 50%;
          width: auto;
          padding: 16px;
          margin-top: -22px;
          user-select: none;
        }

        .next{
          right: 0;
        }

        .mobilesubtitle{
          color: #72788D;
          font-size: .65rem;
          font-family: 'StainlessExt-Bold';
          text-transform: uppercase;
            padding-top: 5px;
            width: 55%;
            margin: 0 auto;
        }

        .slides{
          text-align: center;

        }

        .slides img{
          box-shadow: 0px 0px 99px rgba(9,100,229, .76);

        }

        .dot {
          cursor: pointer;
          height: 1.5vw;
          width: 1.5vw;
          margin: 0 2px;
          background-color: #b4b4b4;
          border-radius: 50%;
          display: inline-block;
          transition: background-color 0.6s ease;
        }

        .active, .dot:hover {
          background-color: #0964E5;
        }

        /* Fading animation */
        .fade {
          -webkit-animation-name: fade;
          -webkit-animation-duration: 1.5s;
          animation-name: fade;
          animation-duration: 1.5s;
        }

        @-webkit-keyframes fade {
          from {opacity: .4}
          to {opacity: 1}
        }

        @keyframes fade {
          from {opacity: .4}
          to {opacity: 1}
        }

      .formtitle{
        font-size: 1.2rem;
      }

      .submitbutton input{
        width: 37vw;
      }

      .col-50{
        width: 100%;
      }

      .formwrapper{
        padding-top: 5vh;
        width: 78%;
      }

      input[type=text], input[type=email], input[type=tel] {
        font-size: .8rem;
      }

      textarea{
        width: 92%;
        font-size: .8rem;

      }

      .socialmedia i{
        font-size: 1.4rem;
      }
}


/* ipad */
@media only screen
  and (min-device-width: 768px)
  and (max-device-width: 1024px)
  and (orientation: portrait)
  and (-webkit-min-device-pixel-ratio: 2) {
    .videocontainer{
      height: 100%;
    }
    .videotitle{
      font-size: 1rem;
    }

    .paneltitle{
      font-size: .7rem;
    }

    .nowplaying{
      font-size: .4rem;
    }

    .subtitle{
      font-size: 5px;
    }

    .formtitle{
      font-size: 1.2rem;
    }

    .submitbutton input{
      width: 17vw;
    }

    .col-50{
      width: 100%;
    }

    .formwrapper{
      padding-top: 5vh;
    }

    input[type=text], input[type=email], input[type=tel] {
      font-size: .8rem;
    }

    textarea{
      width: 92%;
      font-size: .8rem;

    }

    .socialmedia i{
      font-size: 1.4rem;
    }
}

/* iphone XR */
@media only screen
    and (device-width : 414px)
    and (device-height : 896px)
      {

        .videocontainer{
          height: 100%;
        }

        .titleoverlay{
          top: 4vh;
          width: 37vw;
          height: 4vh;
        }
          .videotitle{
            font-size: .6rem;
          }

        .sidepanel{
          display: none;
        }

        .logo{
          right: 0;

        }

        .highlightsmobile{
          display: block;
          position: relative;
          border-top: 2px solid #0964E5;
         padding-top: 2vh;
         padding-bottom: 2vh;
         border-bottom: 2px solid #0964E5;

        }

        .mobiletitle{
          color: #B4B4B4;
          font-size: 1.3rem;
          font-family: 'StainlessExt-Light';
          text-align: center;
        }
        .slideshow-container {
            /* width: 62vw; */
            position: relative;
            margin: auto;
            padding-top: 3vh;
          }

          .prev, .next {
            cursor: pointer;
            position: absolute;
            top: 50%;
            width: auto;
            padding: 16px;
            margin-top: -22px;
            user-select: none;
          }

          .next{
            right: 0;
          }

          .mobilesubtitle{
            color: #72788D;
            font-size: .65rem;
            font-family: 'StainlessExt-Bold';
            text-transform: uppercase;
              padding-top: 5px;
              width: 55%;
              margin: 0 auto;
          }

          .slides{
            text-align: center;

          }

          .slides img{
            box-shadow: 0px 0px 99px rgba(9,100,229, .76);

          }

          .dot {
            cursor: pointer;
            height: 1.5vw;
            width: 1.5vw;
            margin: 0 2px;
            background-color: #b4b4b4;
            border-radius: 50%;
            display: inline-block;
            transition: background-color 0.6s ease;
          }

          .active, .dot:hover {
            background-color: #0964E5;
          }

          /* Fading animation */
          .fade {
            -webkit-animation-name: fade;
            -webkit-animation-duration: 1.5s;
            animation-name: fade;
            animation-duration: 1.5s;
          }

          @-webkit-keyframes fade {
            from {opacity: .4}
            to {opacity: 1}
          }

          @keyframes fade {
            from {opacity: .4}
            to {opacity: 1}
          }


        .formtitle{
          font-size: 1.2rem;
        }

        .submitbutton input{
          width: 37vw;
        }

        .col-50{
          width: 100%;
        }

        .formwrapper{
          padding-top: 5vh;
        }

        input[type=text], input[type=email], input[type=tel] {
          font-size: .8rem;
        }

        textarea{
          width: 92%;
          font-size: .8rem;

        }

        .socialmedia i{
          font-size: 1.4rem;
        }
     }


  /* Iphone X Portrait */
@media only screen
  and (min-device-width: 375px)
  and (max-device-width: 812px)
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) {

    .videocontainer{
      height: 100%;
    }
          .titleoverlay{
            top: 4vh;
            width: 37vw;
            height: 4vh;
          }
            .videotitle{
              font-size: .5rem;
            }

            .sidepanel{
              display: none;
            }

            .logo{
              right: 0;

            }

            .highlightsmobile{
              display: block;
              position: relative;
              border-top: 2px solid #0964E5;
             padding-top: 2vh;
             padding-bottom: 2vh;
             border-bottom: 2px solid #0964E5;

            }

            .mobiletitle{
              color: #B4B4B4;
              font-size: 1.3rem;
              font-family: 'StainlessExt-Light';
              text-align: center;
            }
            .slideshow-container {
                /* width: 62vw; */
                position: relative;
                margin: auto;
                padding-top: 3vh;
              }

              .prev, .next {
                cursor: pointer;
                position: absolute;
                top: 50%;
                width: auto;
                padding: 16px;
                margin-top: -22px;
                user-select: none;
              }

              .next{
                right: 0;
              }

              .mobilesubtitle{
                color: #72788D;
                font-size: .65rem;
                font-family: 'StainlessExt-Bold';
                text-transform: uppercase;
                  padding-top: 5px;
                  width: 55%;
                  margin: 0 auto;
              }

              .slides{
                text-align: center;

              }

              .slides img{
                box-shadow: 0px 0px 99px rgba(9,100,229, .76);

              }

              .dot {
                cursor: pointer;
                height: 1.5vw;
                width: 1.5vw;
                margin: 0 2px;
                background-color: #b4b4b4;
                border-radius: 50%;
                display: inline-block;
                transition: background-color 0.6s ease;
              }

              .active, .dot:hover {
                background-color: #0964E5;
              }

              /* Fading animation */
              .fade {
                -webkit-animation-name: fade;
                -webkit-animation-duration: 1.5s;
                animation-name: fade;
                animation-duration: 1.5s;
              }

              @-webkit-keyframes fade {
                from {opacity: .4}
                to {opacity: 1}
              }

              @keyframes fade {
                from {opacity: .4}
                to {opacity: 1}
              }

            .formtitle{
              font-size: 1.2rem;
            }

            .submitbutton input{
              width: 37vw;
            }

            .col-50{
              width: 100%;
            }

            .formwrapper{
              padding-top: 5vh;
              width: 78%;
            }

            input[type=text], input[type=email], input[type=tel] {
              font-size: .8rem;
            }

            textarea{
              width: 92%;
              font-size: .8rem;

            }

            .socialmedia i{
              font-size: 1.4rem;
            }
}

/* iphone 6/7/8 */
@media only screen
  and (min-device-width: 375px)
  and (max-device-width: 667px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
    .videocontainer{
      height: 100%;
    }
    .titleoverlay{
      top: 4vh;
      width: 37vw;
      height: 4vh;
    }
      .videotitle{
        font-size: .5rem;
      }

      .sidepanel{
        display: none;
      }

      .logo{
        right: 0;

      }

      .highlightsmobile{
        display: block;
        position: relative;
        border-top: 2px solid #0964E5;
       padding-top: 2vh;
       padding-bottom: 2vh;
       border-bottom: 2px solid #0964E5;

      }

      .mobiletitle{
        color: #B4B4B4;
        font-size: 1.3rem;
        font-family: 'StainlessExt-Light';
        text-align: center;
      }
      .slideshow-container {
          /* width: 62vw; */
          position: relative;
          margin: auto;
          padding-top: 3vh;
        }

        .prev, .next {
          cursor: pointer;
          position: absolute;
          top: 50%;
          width: auto;
          padding: 16px;
          margin-top: -22px;
          user-select: none;
        }

        .next{
          right: 0;
        }

        .mobilesubtitle{
          color: #72788D;
          font-size: .65rem;
          font-family: 'StainlessExt-Bold';
          text-transform: uppercase;
            padding-top: 5px;
            width: 55%;
            margin: 0 auto;
        }

        .slides{
          text-align: center;

        }

        .slides img{
          box-shadow: 0px 0px 99px rgba(9,100,229, .76);

        }

        .dot {
          cursor: pointer;
          height: 1.5vw;
          width: 1.5vw;
          margin: 0 2px;
          background-color: #b4b4b4;
          border-radius: 50%;
          display: inline-block;
          transition: background-color 0.6s ease;
        }

        .active, .dot:hover {
          background-color: #0964E5;
        }

        /* Fading animation */
        .fade {
          -webkit-animation-name: fade;
          -webkit-animation-duration: 1.5s;
          animation-name: fade;
          animation-duration: 1.5s;
        }

        @-webkit-keyframes fade {
          from {opacity: .4}
          to {opacity: 1}
        }

        @keyframes fade {
          from {opacity: .4}
          to {opacity: 1}
        }

      .formtitle{
        font-size: 1.2rem;
      }

      .submitbutton input{
        width: 37vw;
      }

      .col-50{
        width: 100%;
      }

      .formwrapper{
        padding-top: 5vh;
        width: 78%;
      }

      input[type=text], input[type=email], input[type=tel] {
        font-size: .8rem;
      }

      textarea{
        width: 92%;
        font-size: .8rem;

      }

      .socialmedia i{
        font-size: 1.4rem;
      }
}

/* small iphone */
@media only screen
  and (min-device-width: 320px)
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
    .videocontainer{
      height: 100%;
    }

    .titleoverlay{
      top: 4vh;
      width: 37vw;
      height: 4vh;
    }
      .videotitle{
        font-size: .5rem;
      }

      .sidepanel{
        display: none;
      }

      .logo{
        right: 0;

      }

      .highlightsmobile{
        display: block;
        position: relative;
        border-top: 2px solid #0964E5;
       padding-top: 2vh;
       padding-bottom: 2vh;
       border-bottom: 2px solid #0964E5;

      }

      .mobiletitle{
        color: #B4B4B4;
        font-size: 1.3rem;
        font-family: 'StainlessExt-Light';
        text-align: center;
      }
      .slideshow-container {
          /* width: 62vw; */
          position: relative;
          margin: auto;
          padding-top: 3vh;
        }

        .prev, .next {
          cursor: pointer;
          position: absolute;
          top: 50%;
          width: auto;
          padding: 16px;
          margin-top: -22px;
          user-select: none;
        }

        .next{
          right: 0;
        }

        .mobilesubtitle{
          color: #72788D;
          font-size: .65rem;
          font-family: 'StainlessExt-Bold';
          text-transform: uppercase;
            padding-top: 5px;
            width: 55%;
            margin: 0 auto;
        }

        .slides{
          text-align: center;

        }

        .slides img{
          box-shadow: 0px 0px 99px rgba(9,100,229, .76);

        }

        .dot {
          cursor: pointer;
          height: 1.5vw;
          width: 1.5vw;
          margin: 0 2px;
          background-color: #b4b4b4;
          border-radius: 50%;
          display: inline-block;
          transition: background-color 0.6s ease;
        }

        .active, .dot:hover {
          background-color: #0964E5;
        }

        /* Fading animation */
        .fade {
          -webkit-animation-name: fade;
          -webkit-animation-duration: 1.5s;
          animation-name: fade;
          animation-duration: 1.5s;
        }

        @-webkit-keyframes fade {
          from {opacity: .4}
          to {opacity: 1}
        }

        @keyframes fade {
          from {opacity: .4}
          to {opacity: 1}
        }

      .formtitle{
        font-size: 1.2rem;
      }

      .submitbutton input{
        width: 37vw;
      }

      .col-50{
        width: 100%;
      }

      .formwrapper{
        padding-top: 5vh;
        width: 78%;
      }

      input[type=text], input[type=email], input[type=tel] {
        font-size: .8rem;
      }

      textarea{
        width: 92%;
        font-size: .8rem;

      }
      .socialmedia{
        width: 48%
      }
      .socialmedia i{
        font-size: 1.4rem;
      }
}

@supports (-ms-ime-align:auto) {
    .socialmedia{
        justify-content: space-between;
    }
}