/* Reusable Calendly Modal CSS */
/* Look for the demo tab on single product pages to see the implementation */

@media (min-width: 900px) {
    .calendly-modal {
        display: none;
        position: fixed;
        z-index: 10;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgba(0, 0, 0, 0.5);
    }
    .calendly-modal > .modal-content {
        margin-top: 5%; 
        background-color: #fefefe;
        position: absolute;
        border-radius: 3px;
        padding: 10px;
        width: 60%;
        height: 80%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .close-calendly {
      color: #aaaaaa;
      float: right;
      margin-right: 20px;
      font-size: 28px;
      line-height: 3.0rem;
      font-weight: bold;
    }
    .close-calendly:focus {
    	color: black;
    	text-decoration: none;
    	cursor: pointer;
    }
    .close-calendly:hover {
    	color: #1413136b;
    	text-decoration: none;
    	cursor: pointer;
    }

    h3.schedule-modal-header {
      margin-top: - 50%;
    }

    div#modal-body {
      transform: translateY(-4rem);
    }
}

/* Responsive Rules */
@media screen and (max-width: 480px) {
  .calendly-modal {
    transform: translateX(-9%);
  }
}
@media screen and (max-width: 768px) {
  .calendly-modal {
    transform: translateX(-9%);
  }
}
/* quick fix instead of going in and removing all that html  */
.calendly-modal {
	display: none !important;
}