jQuery(document).ready(function ($) {
/* Adjust height to read more */
function adjustHeightsConvocations() {
if ($(window).width() > 767.98) {
var highestBoxText = 0;
var highestBoxTitle = 0;
$('.convocations-section .title-course').css('height', 'auto').each(function () {
highestBoxText = Math.max(highestBoxText, $(this).height());
});
$('.convocations-section .tag-course-container').css('height', 'auto').each(function () {
highestBoxTitle = Math.max(highestBoxTitle, $(this).height());
});
$('.convocations-section .title-course').height(highestBoxText);
$('.convocations-section .tag-course-container').height(highestBoxTitle);
} else {
$('.convocations-section .title-course').css('height', 'auto');
$('.convocations-section .tag-course-container').css('height', 'auto');
}
}
adjustHeightsConvocations();
$(window).resize(adjustHeightsConvocations);
var $modal = $('#training-date-modal');
var $body = $('#modal-td-body');
$( ".open-td-modal" ).on( "click", function() {
var btn = $(this);
$body.empty();
if (btn.data('programa')) {
$body.append('<p class="info-title">Programación</p><p class="info-text">' + btn.data('programa') + '</p>');
}
if (btn.data('alumno')) {
$body.append('<p class="info-title">El alumno recibirá</p><p class="info-text">' + btn.data('alumno') + '</p>');
}
if (btn.data('certificado')) {
$body.append('<p class="info-title">Certificado</p><p class="info-text">' + btn.data('certificado') + '</p>');
}
if (btn.data('reconocimientos')) {
$body.append('<p class="info-title">Reconocimientos</p><p class="info-text">' + btn.data('reconocimientos') + '</p>');
}
if (btn.data('profesorado')) {
$body.append('<p class="info-title">Profesorado</p><p class="info-text">' + btn.data('profesorado') + '</p>');
}
if (btn.data('observaciones')) {
$body.append('<p class="info-title">Observaciones</p><p class="info-text">' + btn.data('observaciones') + '</p>');
}
$modal.show()
});
$( ".close-td-modal" ).on( "click", function() {
$modal.hide()
});
$(window).on('click', function(e){
if ($(e.target).is($modal)) {
$modal.hide();
}
});
});
.convocations-section {
margin: 40px auto 35px;
}
.convocations-section .title-section {
font-family: SohoStd-Medium;
color: var(--brand-color-3, #29337f);
}
.convocations-section .courses-container {
padding-right: 0;
padding-left: 0;
column-gap: 1%;
}
.convocations-section .item-course {
border: 1px solid #e0e0e0;
padding: 20px 14px 16px;
border-radius: 4px;
width: 100%;
}
.convocations-section .image-course {
width: 100%;
height: 210px;
object-fit: cover;
}
.convocations-section .tag-course-container {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin: 0 0 16px 0;
gap: 4px 0;
}
.convocations-section .tag-item {
font-family: Segoe-UI-This-Bold;
font-size: 12px;
line-height: 13.2px;
text-align: left;
padding: 4px;
border-radius: 4px;
text-transform: uppercase;
margin: 0 4px 0 0;
height: fit-content;
}
.convocations-section .tag-item.blue-tag {
background-color: #3cb4e5;
border: 1px solid #3cb4e5;
color: #fff;
}
.convocations-section .tag-item.orange-tag {
background-color: #ff7e33;
border: 1px solid #ff7e33;
color: #fff;
}
.convocations-section .tag-item.white-tag {
background-color: #fff;
border: 1px solid #8a8a8a;
color: #3a3a39;
}
.convocations-section .date-ISO {
font-family: Segoe-UI-This;
font-size: 14px;
font-weight: 400;
line-height: 18.62px;
text-align: left;
color: #444;
}
.convocations-section .title-course {
font-family: SohoStd-Medium;
font-size: 18px;
font-weight: 500;
line-height: 24px;
text-align: left;
color: #232f5e;
margin-bottom: 0;
}
.convocations-section .description-text {
font-family: SohoGothicPro-Regular;
font-size: 16px;
font-weight: 400;
line-height: 24px;
text-align: left;
color: #212121;
}
.convocations-section .price-container {
display: flex;
flex-direction: column;
margin: 16px 0;
text-align: left;
letter-spacing: -0.02em;
}
.convocations-section .price-container .price-text {
font-family: SohoGothicPro-Regular;
font-size: 12px;
font-weight: 400;
line-height: 13.2px;
color: #000;
}
.convocations-section .price-container .price-ae {
font-family: SohoGothicPro-Medium;
font-size: 20px;
font-weight: 500;
line-height: 22px;
color: var(--brand-color-1, #1f57a3);
padding-top: 4px;
}
.convocations-section .info-container {
display: flex;
flex-direction: column;
justify-content: end;
align-items: start;
}
.convocations-section .info-container .course-mode {
background-color: #f5f5f5;
font-family: Segoe-UI-This-Bold;
font-size: 12px;
font-weight: 500;
line-height: 13.2px;
text-align: right;
color: #3a3a39;
padding: 10px;
margin-bottom: 16px;
display: flex;
align-items: center;
gap: 2px;
}
.convocations-section .info-container .course-date {
background-color: #f5f5f5;
font-family: Segoe-UI-This-Bold;
font-size: 12px;
font-weight: 500;
line-height: 13.2px;
text-align: right;
color: #3a3a39;
padding: 10px;
margin-bottom: 16px;
display: flex;
align-items: center;
gap: 6px;
}
.convocations-section .info-container .course-mode img, .convocations-section .info-container .course-date img, .convocations-section .info-container .course-mode picture, .convocations-section .info-container .course-date picture {
width: 16px;
}
.convocations-section .info-container .course-mode {
margin-right: 16px;
}
.convocations-section .course-button {
padding: 17px;
width: 100%;
text-align: center;
display: block;
background-color: var(--brand-color-1, #1f57a3);
color: #fff;
text-transform: uppercase;
font-family: SohoStd-Medium;
font-size: 14px;
font-weight: 500;
line-height: 14px;
text-align: center;
}
@media (min-width:768px){
.convocations-section .item-course {
max-width:24%;
}
}
/* The Modal*/
.open-td-modal, .open-td-modal-select {
border: none;
background: none;
padding: 0;
margin: inherit;
font-family: "SohoGothicPro-Regular";
color: #232f5e;
font-size: 1rem;
font-weight: 600;
line-height: 1.5rem;
text-align: left;
}
.open-td-modal:hover, .open-td-modal-select:hover {
text-decoration: underline;
text-underline-offset: .23em;
}
.modal-td {
display: none;
position: fixed;
z-index: 4;
left: 0;
top: 0;
width: 100%;
height: 100vh;
background-color: rgba(0,0,0,0.4);
}
/* Modal Content/Box */
.modal-td .modal-td-content {
background-color: #fefefe;
margin: 150px auto;
border: 1px solid #888;
max-width: 40vw;
max-height: 75vh;
overflow: auto;
}
@media (max-width: 1024px) {
.modal-td .modal-td-content {
max-width: 65vw;
}
}
@media (max-width: 768px) {
.modal-td .modal-td-content {
max-width: 80vw;
}
}
@media (max-width: 425px) {
.modal-td .modal-td-content {
max-width: 90vw;
}
}
/* The Close Button */
.modal-td .close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.modal-td .close:hover,
.modal-td .close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
.modal-td .modal-header {
height: auto;
min-height: 4rem;
align-items: flex-start;
}
.modal-td .modal-header .close {
background: transparent;
border: none;
margin-top: 16px;
font-size: 20px;
color: var(--ae-350, #4F607C);
}
.modal-td .modal-header .modal-td-title {
color: var(--brand-color-3, #29337f);
font-family: "SohoStd-Medium";
font-size: 1.5rem;
font-weight: 500;
line-height: 28px;
margin-bottom: 0;
padding: 16px 16px 16px 40px;
width: 100%;
text-align: center;
}
.modal-td .modal-body {
padding: 10px 10px 10px 24px;
height: auto;
}
.modal-td .modal-body .info-title {
padding-left: 0;
font-family: SohoStd-Medium;
font-size: 1.25rem;
font-weight: 400;
line-height: 26px;
text-align: left;
color: var(--brand-color-1, #1F57A3);
}
.modal-td .modal-body .info-text {
font-size: 1rem;
margin-bottom: 2rem;
}
.modal-td .modal-footer {
display: flex;
justify-content: center;
gap: 10px;
}
.modal-td .modal-footer button {
width: 176px;
}
.modal-td button:focus-visible {
box-shadow: #fff 0px 0px 0px 0.125rem, #80acff 0px 0px 0px 0.25rem;
outline: 0px;
}
UNE-EN 10152:2017
List of cited standards
