@keyframes line-scale-pulse-out-rapid {
  0% {
    transform: scaley(1);
  }
  80% {
    transform: scaley(0.3);
  }
  90% {
    transform: scaley(1);
  }
}

@media (max-width: 860px) {
  #myHinModal{
    width: 400px !important;
    width: 93% !important;
  }
  #externalIframe{
    height: 635px ;
  }
  .externalIframeVideo{
    height: 452.79px !important;
  }
  .noPadding{      
    padding: 0px !important;
    height: 452.79px !important;
  }	
}

    #myHinModal{      
      top: 50%;  /* changed */
      left: 50%; /* added */
      transform: translate(-50%, -50%); /* added */
      max-width: 900px !important;
      margin: 0px;
      padding: 2px;
      background-color: rgba(255,255,255,0.89);
      border-radius: 9px;
      color: #333;
    }	
  .noPadding{      
      padding: 0px !important;
      height: 452.79px;
    background-color: transparent !important;
    }	
    
    #myHinModal .form-wrapper {
          max-width: 860px;
          margin: 0 auto 0px;
          display: flex;
          align-items: center;
          vertical-align: middle;
    }
  #myHinModal .form-wrapper .loading {
    width: 100%;
    text-align: center;
}
    
    #myHinModal .actions {
        margin-top:15px;
    }
    
    #myHinModal .actions {
        height:40px;
    }
  .close-reveal-modal-type-close{
    font-size:16px !important;
    font-family: 'Dosis', Helvetica, sans-serif !important;
    top: -20px !important;
    right: 5px !important;
  }
#myHinModal .close-reveal-modal {
  color: #ccc !important;
}

#myHinModal .reveal-modal-bg {
    background: rgba(0,0,0,0.8) !important;
    opacity: 0.8 !important; 
    -moz-opacity: 0.8 !important;
    -webkit-opacity: 0.8 !important;
    filter: alpha(opacity=80) !important;
}
.reveal-modal-bg-2 {
    position: fixed;
    height: 100%;
    width: 100%;
    background: #000;
    background: rgba(0,0,0,.8);
    z-index: 100;
    display: none;
    top: 0;
    left: 0;
    overflow-y: scroll;
}

.loaded {
  margin: auto;
  max-width: 547px;
}
.error-browser,
.error-media,
.err-studio {
  margin: auto;
  max-width: 547px;
  text-align: center;
}

.loaded .sample {
    position: relative;
    width: 100%;
    height: 34px;
    border-radius: 4px;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 700;
    color: #484546;
    overflow: hidden;
    cursor: pointer;
    background: rgb(124,206,223);
}
.loaded .play-pause-buttons {
    position: absolute;
    left: 0;
    top: 0;
    width: 34px;
    height: 35px;
    padding: 4px 0 0 5px;
    cursor: pointer;
    z-index: 2;
}
.loaded .fa-play,
.loaded .fa-pause {
    width: 25px;
    height: 25px;
}
.loaded i.fa svg {
    width: 25px;
    height: 25px;
    fill: #fff;
    transition: all .3s ease;
    vertical-align: bottom;
}
.loaded .fa-play:before,
.loaded .fa-pause:before {
    content: "";
}
.loaded span.title,
.error-browser span.title, 
.error-media span.title,
.err-studio span.title {
    position: absolute;
    top: 0px;
    left: 38px;
    width: 97%;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    line-height: 35px;
    transition: all .3s ease;
    z-index: 7;
    color: #fff;
    pointer-events: all;
    font-family: 'Dosis';
    font-size: 15px;
    font-weight: 500;
}
.loaded .jp-progress {
    position: absolute;
    left: 34px;
    top: 0;
    width: calc(100% - 34px);
    height: 35px;
    padding: 0px;
    cursor: pointer;
    z-index: 6;
    -moz-mask-position: top left;
    -o-mask-position: top left;
    -webkit-mask-position: top left;
    -moz-mask-size: 99% 31px;
    -o-mask-size: 99% 31px;
    -webkit-mask-size: 99% 31px;
    -webkit-mask-repeat: no-repeat;
    -moz-mask-repeat: no-repeat;
    -o-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    background: rgb(0,164,215);
    pointer-events: none;
}
.loaded .jp-seek-bar {
    width: 0px;
    height: 35px;
    position: relative;
    background: #00a4d7;
    margin-left: 0px;
    z-index: 0;
    transition: width .3s linear;
}
.loaded .sample.active .jp-seek-bar {
  width: 34px;
}
.loaded .sample.active .jp-play-bar {
    background: rgb(0,164,215);
}
.loaded .jp-play-bar {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    width: 0px;
    height: 35px;
    transition: width .3s linear;
    opacity: 1;
    z-index: 0;
}
.loaded .jp-time-holder.preview-time-holder {
    width: initial;
    top: 0px;
    right: 0px;
    color: #fff;
    position: absolute;
    font-weight: 400;
    font-size: 13px;
    z-index: 30;
    pointer-events: none;
    font-family: 'Dosis';
}
.loaded .jp-time-holder span {
    width: initial;
    top: 9px;
    right: 10px;
    color: #fff;
    font-weight: 400;
    font-size: 13px;
    z-index: 30;
    pointer-events: none;
    position: relative;
    display: inline-block;
}
.line-scale-pulse-out-rapid {
    width: 40px;
    height: 39px;
    position: relative;
    margin: auto;
}
.line-scale-pulse-out-rapid > div {
  width: 4px;
  height: 35px;
  border-radius: 2px;
  margin: 2px;
  animation-fill-mode: both;
  display: inline-block;
  vertical-align: middle;
  animation: line-scale-pulse-out-rapid 0.9s -0.5s infinite cubic-bezier(0.11, 0.49, 0.38, 0.78);
  background: rgb(0,185,216);
}
.line-scale-pulse-out-rapid > div:nth-child(1), 
.line-scale-pulse-out-rapid > div:nth-child(5) {
    animation-delay: 0s !important;
}
.line-scale-pulse-out-rapid > div:nth-child(2), 
.line-scale-pulse-out-rapid > div:nth-child(4) {
    animation-delay: -0.25s !important;
}
.loaded .stitle,
.loaded .stitle2,
.error-browser .stitle2,
.error-media .stitle2,
.err-studio .stitle2 {
    display: inline-block;
    width: 100%;
    text-align: center;
    font-family: 'Dosis';
    max-width: 547px;
}
.loaded .stitle,
.error-browser .stitle,
.error-media .stitle,
.err-studio .stitle {
    font-size: 34px;
    font-weight: 300;
    margin-top: 35px;
}

.err-studio .stitle {
  margin-top: 20px;
  font-family: 'Dosis';
}

.error-browser .stitle,
.error-media .stitle {
  margin-top: 19px;
  font-family: 'Dosis';
}

.error-browser .stitle2 a, 
.error-media .stitle2 a,
.err-studio .stitle2 a {
  color: #00a2ba;
}

.loaded .stitle2,
.error-browser .stitle2,
.error-media .stitle2,
.err-studio .stitle2 {
    font-size: 15px;
    font-weight: 300;
    margin-top: 10px;
    color: #888;
    margin-bottom: 20px;  
}
.error-browser .stitle2,
.error-media .stitle2,
.err-studio .stitle2 {
    text-align: left;
    color: #111;
}

.error-browser .stitle2 ul,
.error-media .stitle2 ul,
.err-studio .stitle2 ul {
  list-style: none;
  padding: 14px 2px 10px 14px;
}
.error-browser .stitle2 ul li,
.error-media .stitle2 ul li,
.err-studio .stitle2 ul li {
  padding-bottom: 5px;
}
.error-browser .stitle2 ul li d,
.error-media .stitle2 ul li d,
.err-studio .stitle2 ul li d {
  font-weight: 600;
}


.loaded .but {
    width: 100%;
    display: inline-block;
    text-align: center;
}
.loaded button.btn-get-started.btn {
    background-color: rgb(43,43,43);
    color: #fff !important;
    font-weight: 400;
    text-transform: uppercase;
    font-size: 15px;
    padding: 6px 20px;
    margin-top: 15px;
    margin-bottom: 34px;
}
.loaded button.btn-get-started.btn:hover {
    color: #fff !important;
}

.loading {
    text-align: center;
  padding: 70px 0px 90px 0px;
}
.loading .msg {
    font-size: 21px;
    font-family: 'Dosis';
    font-weight: 200;
    margin-top: 13px;
}

.g-recaptcha.mycap#captchaStudioWidget {
    margin-top: 15px !important;
    display: flex;
    align-items: center;
    width: 100%;
    text-align: center;
    margin-left: 0px !important;
}
.g-recaptcha.mycap#captchaStudioWidget > div {
    margin: auto;
}


@media (max-width: 898px) {
    .section2 .hin-container {
      margin-top: 20px !important;
      width: 100% !important;
      padding: 0px !important;
      float: left !important;
  	}
}