/*
Theme Name: Online UTP
Theme URI: https://online.utp.edu.co/
Version: 1.0
Author: CRIE
Author URI: https://crie.utp.edu.co/
Template: 1plantilla-utp
Tags: reacreditación, Centro, Recusos, Informáticos, Educativos, facultades, institucional, industrial, mecanica, ingenierías, ingenierias, artes, musica, música, agro, agroindustria, ciencias, ambientales, ambiental, educación, empresariales, salud, facultad, facultades, básicas, basicas, tecnología, tecnologia, agrarias, rudecolombia, doctorado, planetario utp, planetario, astronomía, Asociacón Jubilados
*/

/* Comienza iconos redes sociales */
.social-icon-blue img:hover {
  animation: tada;
  animation-duration: 0.5s;
}

.social-icon-blue {
  animation-duration: 0.5s;
  animation-iteration-count: infinite;
}


@keyframes tada {
  0% {
    transform: scale3d(1, 1, 1);
  }
  
  10%,
  20% {
    transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
  }
  
  30%,
  50%,
  70%,
  90% {
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }
  
  40%,
  60%,
  80% {
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }
  
  100% {
    transform: scale3d(1, 1, 1);
  }
}

.tada {
  animation-name: tada;
}

/* Termina iconos redes sociales */

/* Comienza estilos menu lateral */

.infoRegistro {
  padding: 0;
}

.btnMenuLateral2, .sidebarH {
  display: none;
  ;
}

/* Termina estilos menu lateral */


/*Comienza seccion accesos directos */
.step{
    font-family: 'Roboto';
    font-size: 18px;
    height: auto;
    text-align: center;
    overflow: hidden;
    margin: 3px 0; 
    box-shadow: 12px 12px 10px -8px rgba(0,0,0,0.17);
    -moz-box-shadow: 12px 12px 10px -8px rgba(0,0,0,0.17);
    -webkit-box-shadow: 12px 12px 10px -8px rgba(0,0,0,0.17);

    --s: 330px;   /* the size of the image */
    --b: 0px;     /* the border thickness*/
    --g: 14px;    /* the gap */
    --c: #CACACA26; /* the color */
    width: var(--s);
    outline: calc(var(--s)/2) solid #fff0;
    outline-offset: calc(var(--s)/-2);
    cursor: pointer;
    transition: 0.3s;
}

.step:hover{
    transition: 1s;
    background-color: white;
    outline: var(--b) solid var(--c);
    outline-offset: var(--g);

    box-shadow: 12px 12px 10px -8px rgba(255, 255, 255, 0.17);
    -moz-box-shadow: 12px 12px 10px -8px rgba(255, 255, 255, 0.17);
    -webkit-box-shadow: 12px 12px 10px -8px rgba(255, 255, 255, 0.17);
    color: var(--institucional);
}

.row > .step{
    padding: 0;
}

.acceso-directo{
    padding: 15px;
}
.acceso-directo:hover .step-icon {
    transform: scale(1.2);
    overflow: hidden;
    transition: 1s;
}
/*Termina seccion accesos directos */

/*Comienza seccion video embebido */
.contenedor-videoOnline iframe{
    margin: 0 auto;
    width: 100%;
    height: 100%;
    aspect-ratio: 16/9;
    /* -webkit-box-shadow: 0px 0px 15px 0px rgba(0,63,122,1);
    -moz-box-shadow: 0px 0px 15px 0px rgba(0,63,122,1);
    box-shadow: 0px 0px 15px 0px rgba(0,63,122,1);
    border-radius: 3px; */

}

.contenedor-videoOnline > iframe{
    padding: 0 40px;
}

.titulo-videoOnline{
    color: var(--institucional);
    text-align: center;
}

.categoria-videoOnline:hover {
    transform: scale(1.2);
    transition: 1s;
    text-decoration: underline;
    color: #B30000;
}
.categoria-videoOnline i:hover {
    transform: scale(1.5);
    transition: 1s;
    color: #B30000;
}

.categoria-videoOnline a{
    color: #B30000;
}

.enlace-redes-sociales p{
    text-align: end;
    font-size: 20px;
}
.enlace-redes-sociales i{
    font-size: 60px;
}
/*Termina seccion video embebido */

@media (min-width: 576px) {

}

@media (min-width: 768px) {}

@media (min-width:992px) {

}

@media (min-width:1200px) {
    .step-icon img{
      width: 64px;
      height: 64px;
  }
      .contenedor-videoOnline{
        /* background: rgb(242,242,242);
        background: linear-gradient(90deg, rgba(242,242,242,0.02843144093574934) 0%, rgba(12,48,84,0.4822129535407913) 35%, rgba(209,209,209,0) 99%); */
        overflow: hidden;
        padding: 0 40px;
    }
}

@media (min-width:1400px) {
  .cuerpoCont {
    padding: 0 30px;
  }
}

@media (min-width: 1600px) {
  
}

@media (min-width: 1900px) {}