body { overscroll-behavior: contain; width:98%; } td { white-space: nowrap; } table th{ background:#000; color:#fff; } table tr:nth-child(odd) td{ background:#ccc; } table tr:nth-child(even) td{ background:#fff; } .fixtop { position: sticky; background-color:white; padding: 10px 0; top: 0px; left: -100%; z-index: 999; width: 100%; height: 150px; } .imgbutton{ cursor:pointer; } select { min-width: 10px; font-size: 1.15rem; padding: 0.175em 1em 0.175em 0.2em; background-color: #fff; border: 1px solid #caced1; border-radius: 0.25rem; color: #222; cursor: pointer; } body{ font-family:arial; } h1,h2,h3{ color:#4096C6; } hr{ border-top: 2px solid #4096C6; } a{ font-weight:bold; } a:link { color: #1E4B64; } a:visited { color: #1E4B64; } a:hover { color: #4096C6; } a:active { color: #4096C6; } .color-anim { background-image: -webkit-linear-gradient(#004566 80%, #BFEBFF 20%); background-size: 100% 50px; -webkit-text-fill-color: transparent; -webkit-background-clip: text; -webkit-animation: stripes 2s linear infinite; animation: stripes 2s linear infinite; font-size:50px; } @-webkit-keyframes stripes { 100% { background-position: 0 -50px; } } @keyframes stripes { 100% { background-position: 0 -50px; } } .color-anim2 { background-image: -webkit-linear-gradient(#09C185 80%,#046243 20%); background-size: 100% 50px; -webkit-text-fill-color: transparent; -webkit-background-clip: text; -webkit-animation: stripes 3.5s linear infinite; animation: stripes 3.5s linear infinite; font-size:35px; } .slide-in-elliptic-bottom-bck { -webkit-animation: slide-in-elliptic-bottom-bck 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; animation: slide-in-elliptic-bottom-bck 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; } @-webkit-keyframes slide-in-elliptic-bottom-bck { 0% { -webkit-transform: translateY(600px) rotateX(-30deg) scale(6.5); transform: translateY(600px) rotateX(-30deg) scale(6.5); -webkit-transform-origin: 50% -100%; transform-origin: 50% -100%; opacity: 0; } 100% { -webkit-transform: translateY(0) rotateX(0) scale(1); transform: translateY(0) rotateX(0) scale(1); -webkit-transform-origin: 50% 500px; transform-origin: 50% 500px; opacity: 1; } } @keyframes slide-in-elliptic-bottom-bck { 0% { -webkit-transform: translateY(600px) rotateX(-30deg) scale(6.5); transform: translateY(600px) rotateX(-30deg) scale(6.5); -webkit-transform-origin: 50% -100%; transform-origin: 50% -100%; opacity: 0; } 100% { -webkit-transform: translateY(0) rotateX(0) scale(1); transform: translateY(0) rotateX(0) scale(1); -webkit-transform-origin: 50% 500px; transform-origin: 50% 500px; opacity: 1; } } .bounce-in-top { -webkit-animation: bounce-in-top 1.1s both; animation: bounce-in-top 1.1s both; } @-webkit-keyframes bounce-in-top { 0% { -webkit-transform: translateY(-500px); transform: translateY(-500px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 38% { -webkit-transform: translateY(0); transform: translateY(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; opacity: 1; } 55% { -webkit-transform: translateY(-65px); transform: translateY(-65px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 72% { -webkit-transform: translateY(0); transform: translateY(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 81% { -webkit-transform: translateY(-28px); transform: translateY(-28px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 90% { -webkit-transform: translateY(0); transform: translateY(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 95% { -webkit-transform: translateY(-8px); transform: translateY(-8px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: translateY(0); transform: translateY(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @keyframes bounce-in-top { 0% { -webkit-transform: translateY(-500px); transform: translateY(-500px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 38% { -webkit-transform: translateY(0); transform: translateY(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; opacity: 1; } 55% { -webkit-transform: translateY(-65px); transform: translateY(-65px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 72% { -webkit-transform: translateY(0); transform: translateY(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 81% { -webkit-transform: translateY(-28px); transform: translateY(-28px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 90% { -webkit-transform: translateY(0); transform: translateY(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 95% { -webkit-transform: translateY(-8px); transform: translateY(-8px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: translateY(0); transform: translateY(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } .swing-in-right-bck { -webkit-animation: swing-in-right-bck 5.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both; animation: swing-in-right-bck 5.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both; } @-webkit-keyframes swing-in-right-bck { 0% { -webkit-transform: rotateY(70deg); transform: rotateY(70deg); -webkit-transform-origin: right; transform-origin: right; opacity: 0; } 100% { -webkit-transform: rotateY(0); transform: rotateY(0); -webkit-transform-origin: right; transform-origin: right; opacity: 1; } } @keyframes swing-in-right-bck { 0% { -webkit-transform: rotateY(70deg); transform: rotateY(70deg); -webkit-transform-origin: right; transform-origin: right; opacity: 0; } 100% { -webkit-transform: rotateY(0); transform: rotateY(0); -webkit-transform-origin: right; transform-origin: right; opacity: 1; } } .swing-in-left-bck { -webkit-animation: swing-in-left-bck 5.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both; animation: swing-in-left-bck 5.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both; } @-webkit-keyframes swing-in-left-bck { 0% { -webkit-transform: rotateY(-70deg); transform: rotateY(-70deg); -webkit-transform-origin: left; transform-origin: left; opacity: 0; } 100% { -webkit-transform: rotateY(0); transform: rotateY(0); -webkit-transform-origin: left; transform-origin: left; opacity: 1; } } @keyframes swing-in-left-bck { 0% { -webkit-transform: rotateY(-70deg); transform: rotateY(-70deg); -webkit-transform-origin: left; transform-origin: left; opacity: 0; } 100% { -webkit-transform: rotateY(0); transform: rotateY(0); -webkit-transform-origin: left; transform-origin: left; opacity: 1; } } .fade-in { animation: fadeIn 5s ease-in-out; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .fade-in::after { opacity: 1; } a,button { cursor:pointer; } .form_container { display: flex; flex-wrap: wrap; gap: 10px; } input,textarea { font-size: 11pt; } label { font-weight:bold; font-size: 11pt; } .cookie-banner { position: fixed; bottom: 0; left: 0; width: 100%; background-color: #3B3B3B; color:white; padding: 10px; text-align: center; box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1); font-weight:bold; font-size:1.4vmax; opacity:.8; } .cookie-banner a:link { color: #FFFF4F; } .cookie-banner a:visited { color: #FFFF4F; } .cookie-banner a:hover { color: #53C7FF; } .cookie-banner a:active { color: #53C7FF; } .bloque_convocatoria a:link { color: #FFFF4F; } .bloque_convocatoria a:visited { color: #FFFF4F; } .bloque_convocatoria a:hover { color: #53C7FF; } .bloque_convocatoria a:active { color: #53C7FF; } .card-container { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; } .card { background-color: #f0f0f0; border-radius: 10px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); margin-bottom: 20px; margin-left: 40px; padding: 20px; width: 220px; height: 220px; display: flex; flex-direction: column; } .card img { width: auto; height: 200px; /* ajusta la altura según tus necesidades */ border-radius: 10px 10px 0 0; /* para redondear solo las esquinas superiores */ object-fit: contain; /* ajusta la imagen para que cubra todo el contenedor sin distorsionar su relación de aspecto */ } .card h2 { margin: 10px 0; font-size: 1.2em; } .minicard-container { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; } .minicard { border-radius: 10px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); margin-bottom: 10px; margin-left: 20px; padding: 10px; width: 160px; height: 160px; display: flex; flex-direction: column; } .minicard img { width: auto; height: 140px; /* ajusta la altura según tus necesidades */ border-radius: 5px 5px 0 0; /* para redondear solo las esquinas superiores */ object-fit: contain; /* ajusta la imagen para que cubra todo el contenedor sin distorsionar su relación de aspecto */ } .minicard p { color:#4096C6; text-align:center; margin: 5px 0; font-size: 0.7em; }