/* MODALS CSS */

.arc-modals {
  display: block;
  margin: 0 auto;
}

/* IGNORE IF YOU SEE A RPAREN ERROR */
body:has(.modal-dialog:target) .nav-bar {
  z-index: 0;
}

.arc-modals .open-modal-btn-1,
.arc-modals .open-modal-btn-2 {
   display: block;
   margin: 0 auto;
   width: 200px;
   background: #4169E1;
   color: #C0C0C0;
   font: 700 16px Arial;
   text-align: center;
   text-decoration: none;
   margin-bottom: 10px;
   padding: 5px;
}

.arc-modals .open-modal-btn-1:hover,
.arc-modals .open-modal-btn-2:hover {
   background: #663399;
   color: #C0C0C0;   
}

.arc-modals .open-modal-btn-1 {
  /* ADJUST margin-top: PER TEMPLATE */
  margin-top: 10px;
  margin-bottom: 10px;
}

.arc-modals .open-modal-btn-2 {
  margin-bottom: 10px;
}

.arc-modals .modal-dialog {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    margin: 0 auto;
    background: #C0C0C0;
    font: 700 16px Arial;
    /* CENTER MODAL TEXT / IMAGES */
    text-align: center;
    opacity: 0;
    overflow-y: auto;
    overflow-x: hidden;
    pointer-events: none;
    overscroll-behavior: contain;
}

.arc-modals .modal-dialog:target {
    pointer-events: auto;
    padding-bottom: 5px;
    /* animation: flip / bounce / appear */
    animation: appear 350ms ease-in 1;
    height: 100vh;
    opacity: 1;
    /* MAKE THIS z-index: A HIGHER NUMBER THAN THE FIXED HEADER! */
    z-index: 2;
}

.arc-modals .modal-dialog > div {
    position: relitive;
    margin: 0 auto;
    width: 100%;
    height: 5000px;
    /* ADJUST PADDING TOP PER TEMPLATE */
    padding: 35px 0 0 0;
}
      
.arc-modals .modal-dialog p {
  color: #4169E1;
  font: 700 16px Arial;
  width: 100%;
  margin-bottom: 25px;
  /* ADJUST padding: PER TEMPLATE */
  padding: 0 5px 25px 5px;
}

.arc-modals .modal-dialog h2 {
  color: #663399;
  font: 700 20px Arial;
  width: 100%;
  margin-bottom: 25px;
}

.arc-modals .modal-dialog a {
  color: #663399;
}

.arc-modals .shut-arc-modal {
    position: fixed;
    float1: right;
    /* ADJUST top: PER TEMPLATE */
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: #FFF;
    color: #663399;
    text-align: right;
    width: 100%;
    /* ADJUST height: PER TEMPLATE */
    height: 25px;
    text-decoration: none;
    font: 700 20px Arial;
    /* ADJUST padding-top: PER TEMPLATE */
    padding-top: 1px;
    margin-right: -20px;
    -webkit-border-radius: none;
    -moz-border-radius: none;
    border-radius: 0;
}

.arc-modals .shut-arc-modal:hover { 
  background: #C0C0C0;
  color: #4169E1;
}

/* Width */
.arc-modals ::-webkit-scrollbar {
  width: 5px;
}

/* Track */
.arc-modals ::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px #C0C0C0;
  margin-top: 35px;
  border-radius: 10px;
}
 
/* Handle */
.arc-modals ::-webkit-scrollbar-thumb {
  background: #4169E1; 
  border-radius: 10px;
}

/* Handle On Hover */
.arc-modals ::-webkit-scrollbar-thumb:hover {
  background: #663399; 
}

/* .arc-modals .body-scroll-hidden {
  display: none;
}

.arc-modals .hide-body-scroll {
  overflow: hidden;
} */

.arc-modals .modal-video-header {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  transition: all 200ms;
  font: 700 20px Arial;
  text-align: center;
  background: #4169E1;
  color: #FFF;
  width: 650px;
  margin-top: 25px;
  text-decoration: none;
}

.arc-modals .modal-video {
  display: block;
  margin: 0 auto;
  width: 650px;
  height: 400px;
  background: #FFF;
  margin-bottom: 15px;
}

@media screen and (max-width: 768px) {
    
.arc-modals .modal-video-header {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  transition: all 200ms;
  font: 700 20px Arial;
  text-align: center;
  background: #4169E1;
  color: #FFF;
  width: 250px;
  margin-top: 25px;
  text-decoration: none;
}
  
.arc-modals .modal-video {
  display: block;
  margin: 0 auto;
  width: 250px;
  height: 200px;
  background: #FFF;
  margin-bottom: 15px;
}
}

@keyframes appear {
  0% {
    opacity: 0;
    transform: translateY(-100px);
}
}