/*------------------------------------
    ?MODAL Escuela Didactica
 ------------------------------------*/

.openInModal {
   z-index: 999;
   background-color: rgba(0, 0, 0, 0);
   padding: 15px;
   position: fixed;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   overflow: auto;
   visibility: hidden;
   opacity: 0;
}

.openInModal--active {
   visibility: visible;
   opacity: 1;
   background-color: rgba(0, 0, 0, 0.3);
   transition: background-color .4s;
}

.openInModal--active .openInModal__content {
   opacity: 1;
   transform: translateY(0);
}

.openInModal__background {
   position: absolute;
   top: 0;
   bottom: 0;
   right: 0;
   left: 0;
}

.openInModal__container {
   max-width: 1000px;
   width: 100%;
   min-height: calc(100% - 80px);
   height: 100%;
   display: flex;
   align-items: center;
   margin: 0 auto;
}

.openInModal__content {
   width: 100%;
   min-height: 30px;
   height: 100%;
   max-height: calc(100vh - 80px);
   background-color: #fff;
   border-radius: 10px;
   box-shadow: 0 3px 5px hsla(0, 0%, 0%, .2);
   opacity: 0;
   transition: transform .6s, opacity .6s;
   transform: translateY(-100px);
   border: 7px solid red;
}

.openInModal__header {
   display: flex;
   justify-content: flex-end;
   padding: 15px 15px 5px;
}

.openInModal__close {
   position: absolute;
   right: -20px;
   top: -20px;
   border: 0;
   display: inline-flex;
   justify-content: center;
   align-items: center;
   width: 30px;
   height: 30px;
   background-color: red;
   border-radius: 50%;
   transition: background-color .3s;
   z-index: 9;
   transition: all .3s;
}

.openInModal__close:hover {
   cursor: pointer;
   transform: scale(1.1);
}

.openInModal__closeIcon {
   width: 80%;
}

.openInModal__closeIcon path {
   fill: #fff;
}

.openInModal__body {
   padding: 5px 30px 15px;
}

.openInModal__body .openInModal__iframe {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}


/*------------------------------------
  ?BACKDROP Escuela Didactica
------------------------------------*/

.openInBackdrop {
   position: fixed;
   top: 1.5vh;
   left: calc(-100% - 20px);
   width: 98vw;
   height: 97vh;
   background-color: #fff;
   z-index: 9999;
   transition: left .6s;
   border: 5px solid yellow;
   border-radius: 10px;
   box-shadow: 0 0 50px 10px rgba(0, 0, 0, .5);
}

.openInBackdrop--in {
   left: 1vw;
}

.openInBackdrop__close {
   height: 30px;
   width: 30px;
   position: absolute;
   top: -10px;
   right: -10px;
   border: none;
   border-radius: 50%;
   padding-bottom: 2px;
   background-color: red;
   box-shadow: 0 0 3px hsla(0, 0%, 0%, .2);
   display: flex;
   justify-content: center;
   align-items: center;
   transform: scale(1);
   z-index: 9;
   transition: transform .3s;
}

.openInBackdrop__close:hover {
   cursor: pointer;
   transform: scale(1.1);
}

.openInBackdrop__closeIcon {
   width: 77%;
}

.openInBackdrop__closeIcon path {
   fill: #fff;
}

.openInBackdrop__iframe {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}

.openInBackdrop__preload {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: #fff;
   overflow: hidden;
   z-index: 8;
}

@keyframes preloadInvisible {
   0% {
      opacity: 1;
   }

   99% {
      opacity: 0;
      height: 100%;
   }

   100% {
      opacity: 1;
      height: 0;
   }
}

.openInBackdrop__preload--invisible {
   animation: preloadInvisible .6s forwards;
}

@keyframes loading {
   0% {
      transform: translate(-50%, -50%) rotate(0deg);
   }

   100% {
      transform: translate(-50%, -50%) rotate(360deg);
   }
}

.openInBackdrop__preloadIcon {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 50px;
   transform: translate(-50%, -50%);
   animation: loading 0.9s infinite;
}

.openInBackdrop__preloadIcon path {
   fill: gray;
}