.modal {
    text-align: center;
    padding: 0 !important;
  }

  .modal:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -4px;
  }

  .modal-dialog {
    display: inline-block;
    text-align: left;
    vertical-align: middle;
  }

  /* Mark input boxes that gets an error on validation: */
  .invalid {
    outline: none !important;
    border: 1px solid red !important;
    box-shadow: 0 0 10px #719ECE;
  }


  /* Hide all steps by default: */
  .tab {
    display: none;
  }


  /* Make circles that indicate the steps of the form: */
  .step {
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbbbbb;
    border: none;
    border-radius: 50%;
    display: inline-block;
    opacity: 0.5;
  }

  .step.active {
    opacity: 1;
  }

  /* Mark the steps that are finished and valid: */
  .step.finish {
    background-color: #4CAF50;
  }

  /* Center the loader */
  #loader {
    position: relative;
    left: 45%;
    top: 50%; 
    z-index: 1;
    width: 70px;
    height: 70px;
    /* margin: 75px 0 0 75px;  */
    border: 12px solid #f3f3f3;
    border-radius: 50%;
    border-top: 12px solid #909ea8;

    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
    display: none;

  }

  @-webkit-keyframes spin {
    0% {
      -webkit-transform: rotate(0deg);
    }

    100% {
      -webkit-transform: rotate(360deg);
    }
  }

  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }

    100% {
      transform: rotate(360deg);
    }
  }

  /* Add animation to "page content" */
  .animate-bottom {
    position: relative;
    -webkit-animation-name: animatebottom;
    -webkit-animation-duration: 1s;
    animation-name: animatebottom;
    animation-duration: 1s
  }

  @-webkit-keyframes animatebottom {
    from {
      bottom: -100px;
      opacity: 0
    }

    to {
      bottom: 0px;
      opacity: 1
    }
  }

  @keyframes animatebottom {
    from {
      bottom: -100px;
      opacity: 0
    }

    to {
      bottom: 0;
      opacity: 1
    }
  }

  #questionarioSuccessPage {
    display: none;
    text-align: center;
  }


.shadow-01{
	box-shadow: 0 .14rem 1.74rem 0 rgba(58,59,69,.15) !important;
}

@media (max-width: 290px){
    #videoFeed{
        max-width: 150px !important;
    }
}

@media (min-width: 291px) and (max-width: 500px){
    #videoFeed{
        max-width: 210px !important;
    }
}

@media (min-width: 501px) and (max-width: 990px){
    #videoFeed{
        max-width: 350px !important;
    }
}

@media (min-width: 991px){
    #videoFeed{
        max-width: 450px !important;
    }
}