.youtube-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
}
.youtube-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* simple-bullet */
.simple-bullet{
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.simple-bullet::before{
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
}
.simple-bullet-red::before{
  background: var(--mel-red);
}
.simple-bullet-cyan::before{
  background: var(--mel-cyan);
}

/* filter-toggle */
[filter-toggle]{
  display: inline-block;
  border: 1px solid currentColor;
  padding: 5px 15px;
  cursor: pointer;

  font-family: Mulish;
  font-weight: 600;
  font-size: 20px;

  margin-bottom: 20px;
}

/* grid-dashes */
.grid-dashes{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0px 20px;
}
.grid-dashes > :nth-child(3n+2){
  border-bottom: 1px dashed;
}

.list-dashes{

}
.list-dashes > li{
  display: grid;
  grid-template-columns: auto 1fr 500px;
  grid-gap: 10px;
}
.list-dashes > li > :nth-child(2){
  border-bottom: 1px dashed;
  height: 0.9em;
}
/* .list-dashes > li > :last-child{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
} */

/* course */

.course-direction{
  display: flex;
  align-items: center;
}
.course-direction > :first-child:not(:last-child){
  flex-shrink: 0;
  width: 75px;
  height: 75px;
  background-size: cover;
  background-position: top center;
  border-radius: 100%;
  display: inline-block;
  border: 4px solid var(--mel-blue);
  margin-right: 10px;
}

.course-short-infos{
  padding-bottom: 0;
}
.course-short-infos > :last-child{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  justify-content: center;
  justify-items: center;
  margin: 0;
}
.course-short-info {
  display: inline-grid;
  justify-items: center;
  grid-template-rows: min-content 1fr;
}
.course-short-info > :last-child {
  display: inline-grid;
  justify-items: center;
  padding: 8px 0px;
  white-space: normal;
  text-align: center;
}
.course-short-info > :first-child {
  color: var(--mel-dark-grey-hl);
  font-weight: bold;
  font-size: 14px;
}
.course-short-info > :last-child {
  font-weight: bold;
  font-size: 25px;
}

.edition-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.edition-bullet svg{
  width: 40px;
  height: 40px;
  padding: 10px;
  margin: 5px;
  background: var(--mel-med-dark-cyan);
}

/* copy */
.copy-button{
  cursor: pointer;
}
.copy-button > svg{
  fill: var(--mel-red);
}

/* filter-check */
.filter-check{
  display: inline-block;
  cursor: pointer;
  margin: 5px;
  line-height: 2em;
  margin: 0 5px;
}
.filter-check > input{
  display: none;
}
.filter-check > input + span{
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid black;
  margin-right: 5px;
  font-size: 20px;
  vertical-align: text-bottom;
}
.filter-check > input:checked + span{
  background: var(--mel-cyan);
  border-color: var(--mel-cyan);
}
.filter-check > input:checked + span::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  display: block;
  width: 100%; height: 100%;
  background: white;
  /* mask: url('/assets/svg/check.svg') 50% 50% no-repeat; */
  mask: url('data:image/svg+xml;charset=UTF-8,<svg width="16" height="13" viewBox="0 0 16 13" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.0017 0.390545C13.2677 0.137278 13.6217 -0.00273854 13.989 4.05937e-05C14.3563 0.00281973 14.7082 0.148177 14.9703 0.405441C15.2325 0.662704 15.3845 1.01175 15.3942 1.37893C15.4039 1.74611 15.2706 2.1027 15.0224 2.37346L7.4873 11.797C7.35774 11.9366 7.20136 12.0486 7.02752 12.1263C6.85368 12.204 6.66595 12.2459 6.47555 12.2494C6.28515 12.253 6.096 12.2181 5.9194 12.1468C5.7428 12.0756 5.58238 11.9694 5.44774 11.8348L0.450798 6.83784C0.311641 6.70817 0.200028 6.55181 0.122615 6.37807C0.0452019 6.20433 0.00357586 6.01678 0.000220424 5.8266C-0.00313501 5.63642 0.031849 5.44752 0.103085 5.27116C0.17432 5.0948 0.280349 4.93459 0.414844 4.80009C0.54934 4.6656 0.709548 4.55957 0.88591 4.48833C1.06227 4.4171 1.25118 4.38211 1.44135 4.38547C1.63153 4.38882 1.81908 4.43045 1.99282 4.50786C2.16656 4.58527 2.32293 4.69689 2.45259 4.83605L6.40709 8.78865L12.9658 0.432092C12.9776 0.417552 12.9902 0.403681 13.0036 0.390545H13.0017Z" fill="white"/></svg>') 50% 50% no-repeat;
  -webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg width="16" height="13" viewBox="0 0 16 13" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.0017 0.390545C13.2677 0.137278 13.6217 -0.00273854 13.989 4.05937e-05C14.3563 0.00281973 14.7082 0.148177 14.9703 0.405441C15.2325 0.662704 15.3845 1.01175 15.3942 1.37893C15.4039 1.74611 15.2706 2.1027 15.0224 2.37346L7.4873 11.797C7.35774 11.9366 7.20136 12.0486 7.02752 12.1263C6.85368 12.204 6.66595 12.2459 6.47555 12.2494C6.28515 12.253 6.096 12.2181 5.9194 12.1468C5.7428 12.0756 5.58238 11.9694 5.44774 11.8348L0.450798 6.83784C0.311641 6.70817 0.200028 6.55181 0.122615 6.37807C0.0452019 6.20433 0.00357586 6.01678 0.000220424 5.8266C-0.00313501 5.63642 0.031849 5.44752 0.103085 5.27116C0.17432 5.0948 0.280349 4.93459 0.414844 4.80009C0.54934 4.6656 0.709548 4.55957 0.88591 4.48833C1.06227 4.4171 1.25118 4.38211 1.44135 4.38547C1.63153 4.38882 1.81908 4.43045 1.99282 4.50786C2.16656 4.58527 2.32293 4.69689 2.45259 4.83605L6.40709 8.78865L12.9658 0.432092C12.9776 0.417552 12.9902 0.403681 13.0036 0.390545H13.0017Z" fill="white"/></svg>') 50% 50% no-repeat;
  mask-size: 14px 14px;
}

.filter-check > input:not(:checked) ~ span{
  opacity: 0.5;
}
.filter-check:hover > input ~ span{
  opacity: 1;
}

/* simple-radio */
.simple-radio{
  display: inline-block;
  cursor: pointer;
  margin: 5px;
  line-height: 2em;
  margin: 0 5px;
}
.simple-radio > input{
  display: none;
}
.simple-radio > input + span{
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid black;
  border-radius: 100%;
  margin-right: 5px;
  font-size: 20px;
  vertical-align: text-bottom;
}
.simple-radio > input:checked + span{
  background: var(--mel-red);
  border-color: var(--mel-red);
}
.simple-radio > input:checked + span::before {
  content: "";
  position: absolute;
  top: 0%; left: 0%;
  display: block;
  width: 100%; height: 100%;
  background: white;
  /* mask: url('/assets/svg/check.svg') 50% 50% no-repeat; */
  mask: url('data:image/svg+xml;charset=UTF-8,<svg width="16" height="13" viewBox="0 0 16 13" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.0017 0.390545C13.2677 0.137278 13.6217 -0.00273854 13.989 4.05937e-05C14.3563 0.00281973 14.7082 0.148177 14.9703 0.405441C15.2325 0.662704 15.3845 1.01175 15.3942 1.37893C15.4039 1.74611 15.2706 2.1027 15.0224 2.37346L7.4873 11.797C7.35774 11.9366 7.20136 12.0486 7.02752 12.1263C6.85368 12.204 6.66595 12.2459 6.47555 12.2494C6.28515 12.253 6.096 12.2181 5.9194 12.1468C5.7428 12.0756 5.58238 11.9694 5.44774 11.8348L0.450798 6.83784C0.311641 6.70817 0.200028 6.55181 0.122615 6.37807C0.0452019 6.20433 0.00357586 6.01678 0.000220424 5.8266C-0.00313501 5.63642 0.031849 5.44752 0.103085 5.27116C0.17432 5.0948 0.280349 4.93459 0.414844 4.80009C0.54934 4.6656 0.709548 4.55957 0.88591 4.48833C1.06227 4.4171 1.25118 4.38211 1.44135 4.38547C1.63153 4.38882 1.81908 4.43045 1.99282 4.50786C2.16656 4.58527 2.32293 4.69689 2.45259 4.83605L6.40709 8.78865L12.9658 0.432092C12.9776 0.417552 12.9902 0.403681 13.0036 0.390545H13.0017Z" fill="white"/></svg>') 50% 50% no-repeat;
  -webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg width="16" height="13" viewBox="0 0 16 13" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.0017 0.390545C13.2677 0.137278 13.6217 -0.00273854 13.989 4.05937e-05C14.3563 0.00281973 14.7082 0.148177 14.9703 0.405441C15.2325 0.662704 15.3845 1.01175 15.3942 1.37893C15.4039 1.74611 15.2706 2.1027 15.0224 2.37346L7.4873 11.797C7.35774 11.9366 7.20136 12.0486 7.02752 12.1263C6.85368 12.204 6.66595 12.2459 6.47555 12.2494C6.28515 12.253 6.096 12.2181 5.9194 12.1468C5.7428 12.0756 5.58238 11.9694 5.44774 11.8348L0.450798 6.83784C0.311641 6.70817 0.200028 6.55181 0.122615 6.37807C0.0452019 6.20433 0.00357586 6.01678 0.000220424 5.8266C-0.00313501 5.63642 0.031849 5.44752 0.103085 5.27116C0.17432 5.0948 0.280349 4.93459 0.414844 4.80009C0.54934 4.6656 0.709548 4.55957 0.88591 4.48833C1.06227 4.4171 1.25118 4.38211 1.44135 4.38547C1.63153 4.38882 1.81908 4.43045 1.99282 4.50786C2.16656 4.58527 2.32293 4.69689 2.45259 4.83605L6.40709 8.78865L12.9658 0.432092C12.9776 0.417552 12.9902 0.403681 13.0036 0.390545H13.0017Z" fill="white"/></svg>') 50% 50% no-repeat;
  mask-size: 12px 12px;
}

.simple-radio > input:not(:checked) ~ span{
  opacity: 0.5;
}
.simple-radio:hover > input ~ span{
  opacity: 1;
}

/* simple-check */
.simple-check{
  display: inline-block;
  cursor: pointer;
  margin: 5px;
  line-height: 2em;
  margin: 0 5px;
}
.simple-check > input{
  display: none;
}
.simple-check > input + span{
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid currentColor;
  margin-right: 5px;
  font-size: 20px;
  vertical-align: text-bottom;
}
.simple-check > input:checked + span{
  background: var(--mel-red);
  border-color: var(--mel-red);
}
.simple-check > input:checked + span::before {
  content: "";
  position: absolute;
  top: 0%; left: 0%;
  display: block;
  width: 100%; height: 100%;
  background: white;
  mask: url('data:image/svg+xml;charset=UTF-8,<svg width="16" height="13" viewBox="0 0 16 13" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.0017 0.390545C13.2677 0.137278 13.6217 -0.00273854 13.989 4.05937e-05C14.3563 0.00281973 14.7082 0.148177 14.9703 0.405441C15.2325 0.662704 15.3845 1.01175 15.3942 1.37893C15.4039 1.74611 15.2706 2.1027 15.0224 2.37346L7.4873 11.797C7.35774 11.9366 7.20136 12.0486 7.02752 12.1263C6.85368 12.204 6.66595 12.2459 6.47555 12.2494C6.28515 12.253 6.096 12.2181 5.9194 12.1468C5.7428 12.0756 5.58238 11.9694 5.44774 11.8348L0.450798 6.83784C0.311641 6.70817 0.200028 6.55181 0.122615 6.37807C0.0452019 6.20433 0.00357586 6.01678 0.000220424 5.8266C-0.00313501 5.63642 0.031849 5.44752 0.103085 5.27116C0.17432 5.0948 0.280349 4.93459 0.414844 4.80009C0.54934 4.6656 0.709548 4.55957 0.88591 4.48833C1.06227 4.4171 1.25118 4.38211 1.44135 4.38547C1.63153 4.38882 1.81908 4.43045 1.99282 4.50786C2.16656 4.58527 2.32293 4.69689 2.45259 4.83605L6.40709 8.78865L12.9658 0.432092C12.9776 0.417552 12.9902 0.403681 13.0036 0.390545H13.0017Z" fill="white"/></svg>') 50% 50% no-repeat;
  -webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg width="16" height="13" viewBox="0 0 16 13" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.0017 0.390545C13.2677 0.137278 13.6217 -0.00273854 13.989 4.05937e-05C14.3563 0.00281973 14.7082 0.148177 14.9703 0.405441C15.2325 0.662704 15.3845 1.01175 15.3942 1.37893C15.4039 1.74611 15.2706 2.1027 15.0224 2.37346L7.4873 11.797C7.35774 11.9366 7.20136 12.0486 7.02752 12.1263C6.85368 12.204 6.66595 12.2459 6.47555 12.2494C6.28515 12.253 6.096 12.2181 5.9194 12.1468C5.7428 12.0756 5.58238 11.9694 5.44774 11.8348L0.450798 6.83784C0.311641 6.70817 0.200028 6.55181 0.122615 6.37807C0.0452019 6.20433 0.00357586 6.01678 0.000220424 5.8266C-0.00313501 5.63642 0.031849 5.44752 0.103085 5.27116C0.17432 5.0948 0.280349 4.93459 0.414844 4.80009C0.54934 4.6656 0.709548 4.55957 0.88591 4.48833C1.06227 4.4171 1.25118 4.38211 1.44135 4.38547C1.63153 4.38882 1.81908 4.43045 1.99282 4.50786C2.16656 4.58527 2.32293 4.69689 2.45259 4.83605L6.40709 8.78865L12.9658 0.432092C12.9776 0.417552 12.9902 0.403681 13.0036 0.390545H13.0017Z" fill="white"/></svg>') 50% 50% no-repeat;
  mask-size: 12px 12px;
}

/* .simple-check > input:not(:checked) ~ span{
  opacity: 0.5;
}
.simple-check:hover > input ~ span{
  opacity: 1;
} */

/* simple-slider */
.simple-slider{
  display: inline-block;
  cursor: pointer;
  margin: 5px;
  line-height: 2em;
  margin: 0 5px;
}
.simple-slider > input{
  display: none;
}
.simple-slider > input + span{
  position: relative;
  display: inline-block;
  width: 35px;
  height: 20px;
	border-radius: 20px;
  margin-right: 5px;
  font-size: 20px;
  vertical-align: text-bottom;
	background: var(--mel-dark-grey-hl);
}
.simple-slider > input:checked + span {
	background: var(--mel-red);
}
.simple-slider > input:disabled + span{
	background: var(--mel-grey);
}
.simple-slider > input + span::before {
	content: "";
  position: absolute;
  top: 0%; left: 0%;
  display: block;
	width: 20px;
	height: 20px;
	border-radius: 20px;
  background: white;
	box-shadow: 0px 0px 1px rgba(0,0,0,0.5);
}
.simple-slider > input:checked + span::before {
	left: auto; right: 0%;
}


/* PAGE SEARCH */
.page-search{
	/* padding: 0px 20px; */
}
.page-search input{
  height: 70px;
  border: 2px solid var(--mel-top-grey);
  background: white;
  margin: 30px 0px;
  width: 100%;
  font-size: 20px;
  padding: 20px;
}
.page-search input::placeholder{
  color: var(--mel-top-grey);
  opacity: 1;
}
.page-search input:focus{
  border-color: var(--mel-blue);
  outline: none;
}
.page-search input:focus::placeholder{
  color: var(--mel-blue);
  opacity: 0.7;
}

/* PRETTY LIST */
.pretty-list{
  display: flex;
  flex-direction: column;
  padding-left: 30px;
}
.pretty-list li{
  list-style: none;
  position: relative;
  padding-bottom: 15px;
  border-bottom: 1px dashed;
  margin-bottom: 15px;
}
.pretty-list li::before{
  content: "";
  width: 10px;
  height: 10px;
  display: block;
  background: var(--text-grey);
  position: absolute;
  top: 0.5em;
  right: 100%;
  margin-right: 15px;
}

/* LINK LIST */
.link-list{
  padding-left: 0px;
  /* padding: 10px 0px; */
}
.link-list li{
  list-style: none;
  padding: 0;
  margin: 5px 0px;

  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.link-list li::before{
  /* content: url('/assets/svg/mel-arrow.svg');
  margin-right: 10px; */
  content: '';
  margin-right: 10px;
  width: 20px;
  height: 20px;
  display: inline-block;
  background: var(--mel-red);
  mask: url('/assets/svg/mel-arrow.svg') 50% 50% no-repeat;
  -webkit-mask: url('/assets/svg/mel-arrow.svg') 50% 50% no-repeat;
}
.link-list li a{
  font-size: 18px;
  color: black;
  border-bottom: 1px dashed currentColor;
}
.link-list li a:hover{
  text-decoration: none;
  border-bottom: 1px dashed currentColor;
}

/* File list */
.file-list{
  margin: 0;
  padding: 0;
}
.file-list li{
  display: grid;
  list-style: none;
  grid-template-columns: 1fr max-content;
  align-items: center;
}
.file-list li:not(:last-child){
  border-bottom: 1px dashed black;
}
.file-list li > div{
  display: grid;
}

/* Content Nav */
.content-nav{
  padding: 0;
  margin: 0;
}
.content-nav li{
  list-style: none;
}
.content-nav li a{
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 10px 20px;
  font-weight: 600;
  color: white;
  background: var(--mel-cyan);
  overflow: hidden;
}
.content-nav li a:hover{
  color: white;
  text-decoration: none;
}
.content-nav li a::before{
  content:"";
  position: absolute;
  bottom: 0; left: 0;
  width: 100%;
  height: 5px;
  transform: translateY(100%);
  background: var(--mel-blue);
  transition: transform 100ms ease-in-out;
}
.content-nav li a:hover::before{
  transform: translateY(0%);
}

/* new nav */
.content-nav-top > a{
  display: flex;
  align-items: center;
  color: black;
  padding: 15px 15px;
  background: var(--content-nav);
  border-bottom: 1px dashed black;
}
.content-nav-top > a:hover{
  color: black;
}
.content-nav-top > a svg{
  height: 1.5em;
  width: 1.5em;
  fill: black;
  margin-right: 5px;
}
.content-nav-top.open > a{
  border-color: white;
  color: white;
  background: var(--content-nav-open);
}

.content-nav-item > a,
.content-nav-subitem > a{
  display: block;
  padding: 10px 30px;
  border-bottom: 1px dashed black;
  color: black;
  background: var(--content-nav);
}

.content-nav-item.open > a{
  border-color: white;
  color: white;
    background: var(--content-nav-open);
}
.content-nav-item > a:hover{
  color: black;
}
.content-nav-item.open > a:hover{
  color: white;
}

.content-nav-subitem > a{
  background: var(--mel-cyan);
  padding-left: 45px;
  border-color: black;
}
.content-nav-subitem > a:hover{
  color: black;
}

/* MEL MODAL */
.mel-modal-wrapper{
  position: fixed;
  top:0; left:0;
  width: 100%; height: 100%;
  padding: 50px;
  padding-top: 120px;
  background: rgba(0,0,0,0.5);
  overflow: auto;
  z-index: 10000;
}
.mel-modal-wrapper:not(.show){
  display: none;
}
.mel-modal{
  width: 750px;
  margin: auto;
  background: var(--mel-white);
}
.mel-modal-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 75px;
  padding: 0px 30px;
  background: black;
  color: white;
}
.mel-modal-header > *{
  margin: 0;
}
.mel-modal .close-button{
  font-size: 40px;
  cursor: pointer;
  margin-right: -10px;
}
.mel-modal-body{
  padding: 30px;
}


/* TWO LINES */
.two-lines{
  position: relative;
  width: 24px;
  height: 12px;
}
.two-lines::before,
.two-lines::after{
  content: "";
  position: absolute;
  left: 0;
  display: block;
  width: 100%;
  height: 25%;
  background: currentColor;
}
.two-lines::before{
  top: 0;
  transition: top 100ms 100ms ease-in-out, transform 100ms ease-in-out, height 100ms 100ms ease-in-out;
}
.two-lines::after{
  bottom: 0;
  transition: bottom 100ms 100ms ease-in-out, transform 100ms ease-in-out, height 100ms 100ms ease-in-out;
}
.two-lines.active::before{
  top: calc(50% - 25% / 2);
  transform: rotate(45deg);
  height: 20%;
  transition: top 100ms ease-in-out, transform 100ms 100ms ease-in-out, height 100ms 100ms ease-in-out;
}
.two-lines.active::after{
  bottom: calc(50% - 25% / 2);
  transform: rotate(-45deg);
  height: 20%;
  transition: bottom 100ms ease-in-out, transform 100ms 100ms ease-in-out, height 100ms 100ms ease-in-out;
}

/* Badges */
.inst-badge{
  background: #ededed;
  border-radius: 100px;
  padding: 0.4em 0.8em;
  font-size: 0.8em;
  font-weight: 600;
  white-space: nowrap;
	margin-right: 2px;
	margin-bottom: 2px;
}
.inst-badge-mel{
  color: var(--mel-blue);
}

/* CLOSE BUTTON */
.close-button{
  font-size:30px;

  position:relative;
  display:inline-block;
  width:1em;
  height:1em;
}
.close-button::before,
.close-button::after{
  content:"";
  position:absolute;
  top:50%; left:50%;
  width:80%; height:0.05em;
  background: currentColor;
}
.close-button.close-button-white::before,
.close-button.close-button-white::after{
  background:white;
}
.close-button::before{
  transform: translate(-50%, -50%) rotate(45deg);
}
.close-button::after{
  transform: translate(-50%, -50%) rotate(-45deg);
}

#search-container{
  /* max-width: 1000px;
  margin: auto; */
}
#search-results-group{
  display: flex;
}
#search-results-group > h5{
  cursor: pointer;
  padding: 5px 15px;
  margin-top: 0;

  font-family: Montserrat, sans-serif;
  font-size: 18px;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--mel-mid-grey);
}
#search-results-group > h5:not(:last-child){
  margin-right: 10px;
}
#search-results-group > h5.selected{
  color: var(--mel-black);
  border-bottom: 5px solid var(--mel-cyan);
}
#search-results-group > h5:not(.selected):hover{
  border-bottom: 5px solid var(--mel-yellow);
}
.search-result{
  position: relative;
  display: grid;
  grid-template-columns: 1fr max-content;
  margin: 20px 0px;
}
.search-result .search-result-image{
  flex-shrink: 0;
  width: 100px;
  height: 100px;
  margin-left: 10px;
  background-position: center;
  background-size: cover;
}
#header-quick-search .search-result .search-result-image{
  width: 60px;
  height: 60px;
}
#header-quick-search .search-result .search-result-image:not(.loaded),
.search-result .search-result-image:not(.loaded){
  height: 0;
  /* width: 0;
  margin: 0; */
}
.search-result .search-result-name {
  font-family: Montserrat, sans-serif;
  font-size: 1.1em;
  color: black;
  font-weight: 700;
}
.search-result .search-result-name.with-badges{
  display: flex;
}
.search-result .search-result-name small{
  font-size: 1.1em;
  font-style: italic;
  color: var(--mel-mid-grey);
  margin-right: 5px;
}
.search-result .search-result-desc{
  font-family: Montserrat, sans-serif;
  /* white-space: nowrap; */
  overflow: hidden;
  text-overflow: ellipsis;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  line-height: 1.5em;
  max-height: 3em;
  -webkit-line-clamp: 2;
  color: black;
}
.search-result .search-result-badges{
  margin-left: 10px;
}
.search-result a{
  color: var(--mel-red);
  text-decoration: underline;
}
#search-pages{
  display: flex;
  justify-content: flex-end;
}
.search-page-button{
  display: inline-block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  color: var(--mel-black);
  text-decoration: none;
}
.search-page-button:hover{
  background: var(--mel-yellow);
  color: var(--mel-black);
  text-decoration: none;
}
.search-page-button.selected{
  background: var(--mel-cyan);
}
#search-results-number{
  margin-top: 15px;
  font-family: Montserrat, sans-serif;
  font-size: 16px;
  color: var(--mel-mid-grey);
}
#header-quick-search-inner .search-result.see-all{
  font-size: 14px;
}
#header-quick-search-inner .search-result.see-all:hover{
  color: var(--mel-red);
}
/* courses-filters-manage */
#courses-filters-manage {
  margin: 20px 0px 30px 20px;
}

/* faq result */
.faq-result{
  position: relative;
  padding: 10px 20px;
}
.faq-result::after{
  content: "";
  position: absolute;
  display: block;
  top: 100%; left: 10%;
  width: 80%; height: 1px;
  margin-top: -1px;
  background: var(--mel-grey);
}
.faq-result-cats > :not(:last-child)::after{
  content: "/";
  margin: 0px 5px;
}
.faq-result-desc{
  font-size: 14px;
  line-height: 1.2em;
  color: grey;
}

.info-box {
  background: #eee;
  padding: 10px 20px;
  border-radius: 5px;
  margin-bottom: 20px;
}

/* RELATION */
.relation-group {
  display: grid;
  position: relative;
  padding-top: 5px;
}
.relation-group::before {
  content: "";
  display: block;
  position: absolute;
  left: 15px;
  height: calc(100% - 1em);
  width: 2px;
  background: var(--mel-top-grey);
}

.relation {
  font-size: 0.8em;
  line-height: 2em;
  position: relative;
  margin-left: 15px;
  padding-left: 35px;
}
.relation::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  width: 30px;
  height: 50%;
  top: 50%;
  border: 2px solid var(--mel-top-grey);
}
.relation.relation-above::before{
  border-bottom: 0;
  border-right: 0;
  border-top-left-radius: 5px;
}
.relation.relation-below::before{
  border-top: 0;
  border-right: 0;
  border-bottom-left-radius: 5px;
  top: auto;
  bottom: 40%;
}


/* SIDE LINKS */
#side-links {
  position: fixed;
  top: 50%; right: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 50px;
  transform: translateY(-50%);
  z-index: 100;
}

.side-link-wrapper{
  position: relative;
}
.side-link-title{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  z-index: 1;
  cursor: pointer;
	transition: background 250ms ease-in-out, color 250ms ease-in-out;
}
.side-link-title span{
  transform: rotate(90deg) translateY(0px);
	transition: transform 250ms ease-in-out;
}
.side-link-wrapper .side-link-title:hover span,
.side-link-wrapper.open .side-link-title span{
  transform: rotate(90deg) translateY(3px);
	transition: transform 100ms ease-in-out;
}
.side-link-wrapper.open .side-link-body{
  transform: translateX(0);
  margin-right: 2px;
}

/* side links services */
.side-link-services{
  height: 202px;
}
.side-link-services .side-link-title{
  height: 100%;
  color: var(--mel-black);
  background: var(--mel-yellow);
}
.side-link-services .side-link-title:hover,
.side-link-services.open .side-link-title{
	color: white;
	background: var(--mel-dark-grey);
}
.side-link-services .side-link-body{
  position: absolute;
  top: 0; right: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: 1fr 1fr;
  grid-gap: 2px;
  transform: translateX(100%);
  direction: rtl;
  transition: transform 250ms ease-in-out, margin 250ms ease-in-out;
}
.side-link-services .side-link-body > * {
  grid-row: 1;
  width: 100px;
  padding: 0px 5px;
  background: var(--mel-dark-grey);
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(0px);
  transition: background 100ms ease-in-out, backdrop-filter 100ms ease-in-out;
}
.side-link-services .side-link-body > *:nth-child(2n){
  grid-row: 2;
}
.side-link-services .side-link-body > *:hover {
  background: #4f4f4f99;
  color: white;
  text-decoration: none;
  backdrop-filter: blur(5px);
}
.side-link-services .side-link-body img {
  height: 30px;
  margin-bottom: 5px;
  stroke-linejoin: round;
  fill: none;
  stroke: var(--mel-white);
}
.side-link-services .side-link-body > *:hover img{
}
.side-link-services .side-link-body span {
  text-align: center;
  line-height: 1em;
}

/* side links cinema */
.side-link-cinema{
  height: 122px;
}
.side-link-cinema .side-link-title{
  color: white;
  background: #82368C;
  font-weight: bold;
}

.side-link-wrapper.side-link-cinema{
  transition: width 250ms ease-in-out, margin-left 250ms ease-in-out;
}
.side-link-wrapper.side-link-cinema .side-link-title{
  position: relative;
  padding: 5px;
}
/* .side-link-wrapper.side-link-cinema .side-link-title span{
  transition: transform 100ms ease-in-out, opacity 100ms ease-in-out;
}
.side-link-wrapper.side-link-cinema.open .side-link-title span{
  opacity: 0;
}
.side-link-wrapper.side-link-cinema .side-link-title .side-link-title-alt{
  position: absolute;
  left: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
  transition: opacity 250ms ease-in-out;
}
.side-link-wrapper.side-link-cinema:not(.open) .side-link-title .side-link-title-alt{
  opacity: 0;
}
.side-link-wrapper.side-link-cinema .side-link-title .side-link-title-alt img:first-child{
  max-width: none;
  max-height: 100%;
}
.side-link-wrapper.side-link-cinema .side-link-title .side-link-title-alt img:last-child{
  position: absolute;
  top: 0; bottom: 0; right: 0;
  padding: 25px;
  padding-right: 12.5px;
  opacity: 0;
  transform: translateX(100%);
  transition: opacity 250ms ease-in-out, transform 250ms ease-in-out;
}
.side-link-wrapper.side-link-cinema.open .side-link-title .side-link-title-alt img:last-child{
  opacity: 1;
  transform: translateX(0%);
} */

.side-link-cinema .side-link-body{
  position: absolute;
  top: 0; right: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: 1fr 1fr;
  grid-gap: 2px;
  transform: translateX(100%);
  direction: rtl;
  transition: transform 250ms ease-in-out, margin 250ms ease-in-out;
}
.side-link-cinema .side-link-body > * {
  grid-row: 1;
  height: 60px;
  padding: 0px 20px;
  background: #82368C;
  color: white;

  white-space: nowrap;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(5px);
  transition: background 100ms ease-in-out, backdrop-filter 100ms ease-in-out;
}
.side-link-cinema .side-link-body > *:hover{
	background: #82368C99;
	color: white;
	text-decoration: none;
}
.side-link-cinema .side-link-body > *:nth-child(2n){
  grid-row: 2;
}

/* cinema-film */
#cinema-films{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	grid-gap: 10px;
	margin: 20px;
}
.cinema-film{
	/* display: flex; */
}
.cinema-film img + div{
  padding: 5px;
}
.cinema-film h2{
	font-size: 20px;
	margin: 0;
}
#cinema-sessions{
  display: grid;
  grid-template-columns: 50%;
  gap: 40px;
  padding-top: 20px;
}

@media (max-width:900px){
  #cinema-sessions{
    grid-template-columns: 100%;
  }
}

/* FILTER PAGE */
#page-filter-results{
  display: grid;
}
.filter-course-result{
  padding-bottom: 50px;
  border-bottom: 2px dotted;
}
.filter-course-name{
  font-size: 30px;
  margin-bottom: 0;
}
.filter-course-label{
  display: inline-block;
  background: var(--mel-cyan);
  color: white;
  padding: 5px;
  font-weight: 600;
  line-height: 1em;
  text-transform: uppercase;
}
.filter-course-desc{
  margin-top: 20px;
  color: var(--mel-dark-grey-hl);
}

/* COURSES SEARCH */
#courses-page .max-width{
  padding: 0px 50px;
}
#courses-filters{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0px 50px;
}
#courses-filters > *{
  /* display: grid;
  justify-items: flex-start;
  align-content: flex-start; */
}

/* INDEX COURSE SEARCH SECTION */
#section-course-search{
  padding: 100px;
}
#section-course-search p{
  font-size: 18px;
  font-weight: 400;
}
#section-course-search p b{
  font-weight: 500;
}
#section-course-search small{
  display: block;
  font-size: 14px;
  font-weight: 300;
  padding: 0px 25px;
  margin-top: 10px;
}
#section-course-search small a{
  margin-right: 2px;
  white-space: nowrap;
}

/* COURSE DETAIL */
#course-banner{
  position: relative;
  display: flex;
  align-items: center;
  height: calc(100vh);
  padding: 20px 50px;
  padding-top: 120px;
  background-size: cover;
  background-color: var(--mel-blue);
}
#course-banner::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
}
#course-banner > #animated-institution{
  position: absolute;
  height: 90%;
  width: 90%;
  left: 5%;
  opacity: 0.3;
}
#course-banner > #animated-institution path{
  stroke-width: 1px;
  /* stroke: white; */
}
#course-banner-info {
  position: relative;
  display: flex;
  align-items: center;
  grid-gap: 50px;
  width: 100%;
  max-width: 1300px;
  margin: auto;
  color: white;
  z-index: 1;

  text-align: center;
  flex-direction: column;
  grid-gap: 20px;
}
#course-banner-info > *{
  width: 50%;
}
#course-banner-info > :first-child{
  width: 100% !important;
}
#course-banner-info.course-banner-info-wide > :first-child{
  width: 80%;
}
#course-banner-info h1 {
  font-size: 3vw;
  font-weight: 600;
  margin: 0;

  font-size: 6vw;
}
#course-banner-info.course-banner-info-wide h1{
  font-size: 4vw;
}
#course-banner-info h1 > *{
  display: block;
  line-height: 1em;
}
#course-banner-info h1 small{
  font-size: 1.5vw;
  font-weight: 400;

  font-size: 1.8vw;
  /* font-size: 25px; */
}
#course-banner-info h1 span{
  white-space: pre-wrap;
}
#course-banner-info #course-banner-enroll{
  display: block;
  width: 100%;
  max-width: 35vw;
  margin: auto;
  padding: 1.2vw;
  background: var(--mel-red);
  color: var(--mel-white);
  text-align: center;
  text-transform: uppercase;
  margin-top: 40px;
  font-family: Mulish;
  font-weight: 800;
  font-size: 18px;
  font-size: 1.2vw;
}
#course-banner-info #course-banner-enroll:hover{
  text-decoration: none;
}
#course-banner #course-banner-presentation{
  font-family: Montserrat, sans-serif;
  font-size: 1.5vw;
  line-height: 1.3em;
  /* white-space: pre-wrap; */
  /*
  display: -webkit-box;
  -webkit-box-orient: vertical;
  max-height: 16em;
  overflow: hidden;
  -webkit-line-clamp: 10;
  text-overflow: ellipsis;

  font-size: 1.2vw;
  max-height: 4.8em;
  -webkit-line-clamp: 3; */
}
#course-banner-presentation-button{
  background: var(--mel-red);
  color: white;
  border: 0;
  padding: 5px 10px;
  margin-top: 5px;
  float: right;
}
#course-presentation-full{
  white-space: pre-wrap;
}

#course-links{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10px, 1fr));
  grid-gap: 1px;
  height: 60px;
  margin-bottom: 30px;
  /* border-bottom: 1px solid var(--mel-grey); */
}
#course-links > * {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mel-black);
  font-size: 20px;
  font-weight: 500;
}
#course-links > *:not(:last-child){
  /* border-right: 1px solid var(--mel-grey); */
}
#course-links > *:hover {
  text-decoration: none;
}

#course-reasons{
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-gap: 50px;
  padding: 50px;
}
#page-container{
  display: grid;
  grid-template-columns: 2fr 1fr;
  /* grid-template-columns: 66.666666666% 33.333333333%; */
  grid-gap: var(--page-container-gap);
  align-items: flex-start;
  padding: var(--page-container-padding);
}
#page-container-lift{
  background: white;
  margin-top: -160px;
  position: relative;
}
.page-padding{
  padding: var(--page-container-padding);
}

@media (max-width: 959px){
  #page-container{
    grid-template-columns: minmax(1px, 1fr);
    overflow: hidden;
  }
  #page-container > :not(.mobile-show){
    display: none;
  }
}
@media (min-width: 960px){
  #page-container{
    margin-top: 40px;
  }
}

.page-section{
  padding: 40px;
}
.page-section h3{
  color: var(--text-grey);
}
.page-section .page-section-text{
  white-space: pre-wrap;
  column-count: 2;
  column-gap: 40px;
  margin-bottom: 1em;
}
.page-section.no-columns .page-section-text{
  column-count: 1;
}

.page-section.page-section-full{
  padding: 50px 0px;
}
.page-section.page-section-full h3{
  padding: 0px 50px;
}
.page-section.page-section-full .page-section-full-wrap{
  width: calc(150% + 20px);
}

.page-section.page-section-full .page-section-full-wrap.page-section-full-wrap-shorten{
  width: 100%;
}

.page-section.page-section-no-padding{
  padding-bottom: 0px;
}
.program-page-side-section-legend{
  margin: 0;
  font-size: 14px;
}

.max-width-full{
  margin-left: min(calc((-1 / 2) * (100vw - var(--max-width))), 0);
  margin-right: min(calc((-1 / 2) * (100vw - var(--max-width))), 0);
}
.page-section-pull-left{
  margin-left: min(calc((-1 / 2) * (100vw - var(--max-width)) - var(--page-container-padding)), calc(-1 * var(--page-container-padding)));
  padding-left: calc((1 / 2) * (100vw - var(--max-width)) + var(--page-container-padding));
}
.page-section-full-width{
  margin-left: min(calc((-1 / 2) * (100vw - var(--scrollbar) - var(--max-width)) - var(--page-container-padding)), calc(-1 * var(--page-container-padding)));
  margin-right: calc((-1/3) * (var(--max-width) - var(--page-container-padding)) - var(--page-container-gap) * (1/2) - (1 / 2) * (100vw - var(--scrollbar) - var(--max-width)) - var(--page-container-padding));
}


.teacher-holder{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.teacher-element{
  position: relative;
  background: black;
  background-position: center;
  background-size: cover;
}
.teacher-element::before{
  content: "";
  display: block;
  padding-top: 125%;
  /* background-color: #C5006E40;
  background-image: linear-gradient(to bottom, #C5006E00, #280017B2); */
  opacity: 0.6;
  transition: opacity 250ms ease-in-out;
}
.teacher-holder.dep-ects .teacher-element::before{
  /* background-color: var(--dep-ects-trans); */
  background-image: linear-gradient(to bottom, var(--dep-ects-trans), var(--dep-ects-trans-dark));
}
.teacher-holder.dep-eceo .teacher-element::before{
  /* background-color: var(--dep-eceo-trans); */
  background-image: linear-gradient(to bottom, var(--dep-eceo-trans), var(--dep-eceo-trans-dark));
}
.teacher-holder.dep-ecati .teacher-element::before{
  /* background-color: var(--dep-ecati-trans); */
  background-image: linear-gradient(to bottom, var(--dep-ecati-trans), var(--dep-ecati-trans-dark));
}
.teacher-holder.dep-epcv .teacher-element::before{
  /* background-color: var(--dep-epcv-trans); */
  background-image: linear-gradient(to bottom, var(--dep-epcv-trans), var(--dep-epcv-trans-dark));
}
.teacher-holder.dep-fcsea .teacher-element::before{
  /* background-color: var(--dep-fcsea-trans); */
  background-image: linear-gradient(to bottom, var(--dep-fcsea-trans), var(--dep-fcsea-trans-dark));
}
.teacher-holder.dep-fd .teacher-element::before{
  /* background-color: var(--dep-fd-trans); */
  background-image: linear-gradient(to bottom, var(--dep-fd-trans), var(--dep-fd-trans-dark));
}
.teacher-holder.dep-fefd .teacher-element::before{
  /* background-color: var(--dep-fefd-trans); */
  background-image: linear-gradient(to bottom, var(--dep-fefd-trans), var(--dep-fefd-trans-dark));
}
.teacher-holder.dep-fe .teacher-element::before{
  /* background-color: var(--dep-fe-trans); */
  background-image: linear-gradient(to bottom, var(--dep-fe-trans), var(--dep-fe-trans-dark));
}
.teacher-holder.dep-fmv .teacher-element::before{
  /* background-color: var(--dep-fmv-trans); */
  background-image: linear-gradient(to bottom, var(--dep-fmv-trans), var(--dep-fmv-trans-dark));
}
.teacher-holder.dep-iss .teacher-element::before{
  /* background-color: var(--dep-iss-trans); */
  background-image: linear-gradient(to bottom, var(--dep-iss-trans), var(--dep-iss-trans-dark));
}
.teacher-holder.dep-fdcp .teacher-element::before{
  /* background-color: var(--dep-fdcp-trans); */
  background-image: linear-gradient(to bottom, var(--dep-fdcp-trans), var(--dep-fdcp-trans-dark));
}
.teacher-holder.dep-fcese .teacher-element::before{
  /* background-color: var(--dep-fcese-trans); */
  background-image: linear-gradient(to bottom, var(--dep-fcese-trans), var(--dep-fcese-trans-dark));
}
.teacher-holder.dep-fcaati .teacher-element::before{
  /* background-color: var(--dep-fcaati-trans); */
  background-image: linear-gradient(to bottom, var(--dep-fcaati-trans), var(--dep-fcaati-trans-dark));
}
.teacher-holder.dep-fcnet .teacher-element::before{
  /* background-color: var(--dep-fcnet-trans); */
  background-image: linear-gradient(to bottom, var(--dep-fcnet-trans), var(--dep-fcnet-trans-dark));
}
.teacher-holder.dep-fped .teacher-element::before{
  /* background-color: var(--dep-fped-trans); */
  background-image: linear-gradient(to bottom, var(--dep-fped-trans), var(--dep-fped-trans-dark));
}
.teacher-holder .teacher-element:hover::before{
  opacity: 0;
}

.teacher-element > .teacher-element-name {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.teacher-element h4 {
  font-family: Montserrat, sans-serif;
  color: white;
  font-weight: 800;
  font-size: 2.5vw;
  line-height: 1em;
  text-align: right;
  padding: 2vw;
}
.teacher-element:hover h4{
  /* color: transparent; */
  /* -webkit-text-stroke: 1px white; */
}

.teacher-element-more > div{
  display: flex;
  align-items: center;
  height: 100%;
}
.teacher-element-more h4{
  font-size: 2vw;
  padding: 2vw;
  text-align: right;
  color: black;
}
.teacher-element-more:hover h4{
  text-decoration: underline;
}

.teacher-element-more h4::before{
  content: '';
  margin-right: 10px;
  width: 20px;
  height: 20px;
  display: inline-block;
  background: currentColor;
  mask: url('/assets/svg/mel-arrow.svg') 50% 50% no-repeat;
  -webkit-mask: url('/assets/svg/mel-arrow.svg') 50% 50% no-repeat;
}

.page-section-full-wrap.page-section-full-wrap-shorten .teacher-holder > a:nth-child(-n+2){
  display: none;
}
.page-section-full-wrap.page-section-full-wrap-shorten .teacher-holder{
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 959px){
  .teacher-holder{
    display: flex;
    width: 100%;
  }
  .teacher-element,
  .teacher-element-more{
    width: 30%;
    flex-shrink: 0;
  }
}
@media (max-width: 599px){
  .teacher-element,
  .teacher-element-more{
    width: 45%;
  }
}
@media (min-width: 1250px){
  .teacher-element h4 {
    font-size: 20px;
    padding: 25px;
  }
  .teacher-element-more h4{
    font-size: 25px;
    padding: 25px;
  }
}


.course-calendar-item{
  /* border-bottom: 2px solid var(--mel-cyan); */
  margin: 0px 20px 0px 30px;
}
.course-calendar-item > small{
  display: inline-block;
  padding: 0px 5px;
  color: white;
  background: var(--mel-cyan);
  font-weight: 600;
}
.course-calendar-item h5{
  margin-bottom: 10px;
}
.course-calendar-item h5 small{
  display: block;
  font-size: 13px;
  font-style: italic;
  color: var(--mel-blue);
  font-weight: 600;
  text-transform: capitalize;
}

.tuition-list{
  /* background: #FFF2D0; */
}
.tuition-list-element{
  display: flex;
  align-items: center;
  /* border-top: 1px solid var(--mel-cyan); */
  padding: 5px 0px;
  font-size: 14px;
}
.tuition-list-element .tuition-list-name,
.tuition-list-element .tuition-list-price{
  flex-shrink: 1;
}
.tuition-list-name{
  white-space: pre-line;
}
.tuition-list-line {
  flex: 1 0 25%;
  height: 0px;
  border-bottom: 1px dashed black;
  margin: 0px 10px;
  margin-top: 3px;
}
.tuition-list-element .tuition-list-price{
  background: white;
  border: 2px solid var(--mel-cyan);
  border-radius: 1000px;
  padding: 2px 10px;
  font-weight: 500;
}
.tuition-list-tooltip{
  font-size: 16px;
  font-weight: bold;
  width: 1.25em;
  height: 1.25em;
  text-align: center;
  background: white;
  line-height: 1.25em;
  border-radius: 100%;
  border: 2px solid;
  box-sizing: content-box;
  cursor: default;
  margin-left: 10px;
}

.page-side-section {
  padding: 20px 10px;
}
.page-side-section h4{
  color: var(--text-grey);
}
.page-side-section-legend{
  padding: 10px;
  margin: 0;
  line-height: 1.38em;
  font-size: 14px;
  color: var(--mel-mid-grey);
}

/* CLASS */
#class-banner{
  position: relative;
  display: flex;
  align-items: center;
  height: calc(100vh - 100px);
  padding: 20px 50px;
}
#class-banner > #animated-institution{
  position: absolute;
  height: 90%;
  width: 90%;
  left: 5%;
}
#class-banner > #animated-institution path{
  /* stroke: black; */
  stroke-width: 1px;
}
#class-banner-info > *{
  /* width: 50%; */
}
#class-banner-info {
  position: relative;
  display: flex;
  align-items: center;
  grid-gap: 50px;
  width: 100%;
  max-width: 1300px;
  margin: auto;
  z-index: 1;
}
#class-banner-info h1 {
  font-size: 3vw;
  font-weight: 600;
  margin: 0;
}
#class-banner-enroll{
  display: block;
  width: 100%;
  margin: auto;
  padding: 20px;
  color: var(--mel-black);
  border: 2px solid var(--mel-black);
  background: white;
  text-align: center;
  text-transform: uppercase;
  margin-top: 40px;
  font-family: Mulish;
  font-weight: 800;
  font-size: 18px;
}
#class-banner-info #class-banner-enroll:hover{
  text-decoration: none;
}
#class-banner-info small{
  background: var(--mel-blue);
  color: white;
  padding: 0px 5px;
  font-weight: 800;
  line-height: 1em;
}
#class-banner-info small + *{
  display: block;
  font-size: 5vw;
  font-weight: 800;
  line-height: 1em;
  white-space: pre-line;
}

#back-button.inverted{
  border-color: var(--mel-black);
}
#back-button.inverted:hover{
  background: var(--mel-white);
  border-color: var(--mel-white);
}
#back-button.inverted svg{
  fill: var(--mel-black);
}
#back-button.inverted:hover svg{
  fill: var(--mel-red);
}

#class-div{
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-gap: 20px;
}
.class-section{
  padding: 20px 50px;
}
.class-section.cols-2 > div{
  column-count: 2;
  gap: 50px;
}

.class-2cols{
  column-count: 2;
  padding: 0px 50px;
  gap: 50px;
}
.class-2cols > *{
  break-inside: avoid;
  padding: 50px 0px;
}

/* Teacher */
#teacher-page{
  max-width: 1000px;
  margin: auto;
  margin-top: 20px;
}
.teacher-header{
  display: flex;
}
.teacher-header-image{
  flex-shrink: 0;
  width: 150px;
  height: 150px;
  border-radius: 100%;
  border: 4px solid var(--mel-blue);
  background-position: center;
  background-size: cover;
}
.teacher-header-body{
  padding: 10px 20px;
}


/* NEWS */
#news-list-top{
  height: 420px;
  background: var(--mel-blue);
}
#news-list{
  max-width: 750px;
  padding: 20px;
  margin-top: -80px;
  background: white;
}
#news-list h1{
  font-size: 80px;
  margin-bottom: 50px;
}

.news-detail-date{
  font-family: "Montserrat";
  font-size: 16px;
}
.news-old .lead{
  display: none;
}


/***********
  ELEMENTS
***********/

/* homepage featured */
.homepage-featured{
  position: relative;
  height: 65vh;
  display: grid;
  grid-template-columns: 50% 50%;
	z-index: 1;
	/* transition: height 250ms ease-in-out; */
}
/* .homepage-featured.has-vimeo{
	height: calc(100vh - var(--header-height));
} */
.homepage-featured-main{
  width: 100%;
  height: 100%;
  left: 0; right: 0;
  transition: opacity 250ms ease-in-out, left 250ms ease-in-out, right 250ms ease-in-out;
}
.homepage-featured-main-layer{
	position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.homepage-featured-main video{
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.homepage-featured-main picture{
  position: absolute;
  width: 100%;
  height: 100%;
}
.homepage-featured-main picture img{
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.homepage-featured-title{
  position: relative;
  z-index: 12;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-weight: 600;
  padding: 0px 6vw;
  margin: 0;
	opacity: 1;
  transition: transform 250ms ease-in-out, opacity 250ms ease-in-out;
}
.homepage-featured-title h1{
  font-size: 40px;
  line-height: 1.1em;
  margin: 0;
  margin-bottom: 10px;
}
.homepage-featured-main .homepage-featured-title h1 + div{
  line-height: 1.2em;
  font-weight: 400;
}
html body .homepage-featured-title .uk-button{
  background: var(--mel-yellow-trans);
  border-color: var(--mel-yellow);
  color: white;
	backdrop-filter: blur(20px);
}
.homepage-featured-title .uk-button:hover{
  background: var(--mel-yellow-trans);
  border-color: var(--mel-yellow);
}

.homepage-featured-main.enter {
  position: absolute;
  /* right: -50px;
  left: auto; */
  opacity: 0;
	z-index: 3;
}
.homepage-featured-main.enter picture{
	z-index: 11;
}
.homepage-featured-main.enter .homepage-featured-title{
	z-index: 15
}
.homepage-featured-main.anim.enter{
  /* right: 0;
  left: auto; */
  opacity: 1;
}
.homepage-featured-main.enter .homepage-featured-title{
  width: 50%;
}
.homepage-featured-main.leave .homepage-featured-title{
  transform: translateX(-50px);
	opacity: 0;
}
.homepage-featured-main.enter .homepage-featured-title{
  transform: translateX(50px);
}
.homepage-featured-main.anim.enter .homepage-featured-title{
  transform: translateX(0px);
}


.homepage-featured .homepage-featured-overlay-bottom,
.homepage-featured .homepage-featured-overlay-right{
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.homepage-featured .homepage-featured-overlay-bottom{
  z-index: 11;
  background-image: linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 50%);
}
.homepage-featured .homepage-featured-overlay-right{
  z-index: 9;
  background-image: linear-gradient(to left, rgba(0,0,0,0.5) 0%, transparent 50%);
}

.homepage-featured-main.is-light .homepage-featured-title h1,
.homepage-featured-main.is-light .homepage-featured-title h1 + div{
  color: white;
}
/* .homepage-featured-main.is-light .homepage-featured-title .uk-button{
  color: white;
  border-color: white;
} */

.homepage-featured-main.is-dark .homepage-featured-title h1,
.homepage-featured-main.is-dark .homepage-featured-title h1 + div{
  color: black;
}
/* .homepage-featured-main.is-dark .homepage-featured-title .uk-button{
  color: black;
  border-color: black;
} */

.homepage-featured-side{
  position: relative;
  z-index: 20;
  display: flex;
  justify-content: flex-end;
  height: 100%;
  padding: 50px 6vw;
  color: white;
  overflow: hidden;
  transition: opacity 250ms ease-in-out;
}
.homepage-featured.homepage-featured-single .homepage-featured-side{
  display: none;
}
.homepage-featured-side-wrapper{
  height: 100%;
  overflow: auto;
  overflow-x: hidden;
  width: auto;
  display: inline-block;
  padding: 0px 40px;
}
.homepage-featured-side-scroll .scrollbar{
  opacity: 0.7;
}
.homepage-featured-side-scroll:hover .scrollbar{
  opacity: 1;
}
.homepage-featured-side-element {
  display: grid;
  font-weight: 600;
  color: white;
  margin-right: auto;
  width: 220px;
  margin-left: auto;
  grid-template-rows: max-content 1fr;
  opacity: 0.7;
  text-decoration: none;
}
.homepage-featured-side-element.active{
  /* opacity: 0.5; */
}
.homepage-featured-side-element:hover{
  text-decoration: none;
  opacity: 1;
}
.homepage-featured-side-element:not(:last-child) {
  margin-bottom: 20px;
}
.homepage-featured-side-element img {
  display: block;
  width: 100%;
  height: 120px;
  object-fit: cover;
  border: 2px solid white;
  transition: border-color 100ms ease-in-out;
}
.homepage-featured-side-element h2{
  color: white;
  padding-top: 5px;
  box-sizing: content-box;
  margin: 0;
  font-size: 16px;
  font-weight: 600;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  line-height: 1.2em;
  height: 2.4em;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}
.homepage-featured-side-element picture{
  flex-shrink: 0;
}

.homepage-featured.has-vimeo .homepage-featured-title,
.homepage-featured.has-vimeo .homepage-featured-side{
	opacity: 0;
}

.homepage-featured-vimeo-container{
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	z-index: 30;
}
.homepage-featured-vimeo-container.vimeo-fade{
	opacity: 0;
	transition: opacity 250ms ease-in-out;
}
.homepage-featured-vimeo-wrapper{
	position: absolute;
	top: 50%; left: 0;
	width: 100%;
	transform: translateY(-50%);
	background: black;
}
.homepage-featured-vimeo-wrapper::before{
	content: "";
	display: block;
	width: 100%;
	padding-top: 56.25%;
}
.homepage-featured-vimeo{
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}
.homepage-featured-vimeo-skip.uk-button{
  display: inline-block;
  position: absolute;
  bottom: 0;
  right: 50%;
	margin-bottom: 20px;
	transform: translateX(50%);
	background: var(--mel-yellow-trans);
  border-color: var(--mel-yellow);
  color: white;
	font-weight: 600;
	backdrop-filter: blur(20px);
}
.homepage-featured-vimeo-skip.uk-button:hover{
  background: var(--mel-yellow-trans);
  border-color: var(--mel-yellow);
	color: white;
}

/* DID YOU KNOW */
.did-you-know{
  position: relative;
  padding: 10px 30px;
  margin-bottom: 30px;
}
.did-you-know::before {
  content: "";
  display: block;
  height: 75%;
  width: 8px;
  background: var(--mel-yellow);
  position: absolute;
  top: 0;
  left: 0;
}
.did-you-know h5{
  font-family: Mulish;
  font-weight: 600;
}

/* ICON SEARCH */
.icon-search{
  display: flex;
  align-items: center;
  background: white;
  height: 50px;
  border-radius: 50px;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
.icon-search:focus-within{
  box-shadow: 0px 0px 0px 2px var(--mel-red);
}
.icon-search input{
  flex: 1;
  border: 0;
  padding: 10px 20px 10px 30px;
  outline: none !important;
  box-shadow: none !important;
  background: none !important;
}
.icon-search button{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 40px;
  border: 0;
  border-radius: 35px;
  margin-right: 7px;
  color: white;
  background: var(--mel-red);
  cursor: pointer;
}
.icon-search button svg{
  height: 20px;
}

/* MEL-COLLAPSE */
.mel-collapse {
  display: grid;
  grid-template-areas:
    "a b"
    "a c";
  grid-template-columns: max-content;
  padding: 20px;
  cursor: pointer;
}
.mel-collapse.open{
  background: var(--mel-grey-light);
}
.mel-collapse .plus{
  grid-area: a;
  width: 30px;
  height: 30px;
  color: var(--mel-red);
  margin-right: 30px;
}
.mel-collapse.open .plus::before{
  display: none;
}
.mel-collapse h4{
  margin: 0;
}
.mel-collapse .mel-collapse-body{
  margin-top: 20px;
  grid-area: c;
  cursor: auto;
}
.mel-collapse:not(.open) .mel-collapse-body{
  display: none;
}

.mel-collapse-wrapper{
  border: 1px solid black;
  padding: 0px 15px;
}
.mel-collapse-wrapper .mel-collapse.mel-collapse-alt:last-child{
  border: none;
}

.mel-collapse.mel-collapse-alt{
  padding: 0;
  display: grid;
  grid-template-areas: "a b" "c c";
  grid-template-columns: min-content 1fr;
  align-items: center;
  margin-bottom: 1px;
  border-bottom: 1px dashed black;
}
.mel-collapse.mel-collapse-alt.open{
  background: none;
}
.mel-collapse.mel-collapse-alt .plus{
  width: 20px;
  height: 20px;
  margin: 20px 10px;
  margin-left: 0px;
  font-size: 14px;
}
.mel-collapse.mel-collapse-alt h4{
  justify-self: flex-start;
  font-size: 16px;
  font-weight: 600;
}
.mel-collapse.mel-collapse-alt .mel-collapse-body{
  padding-bottom: 25px;
  margin-top: 0;
}

/* teses */
.ul-tese{
  margin: 10px 0px;
  padding-bottom: 10px;
  border-bottom: 1px dashed black;
}
.ul-tese h5{
  margin: 0;
  /* margin-bottom: 10px; */
}
.ul-tese .ul-tese-extra{
  margin-right: 10px;
}
.ul-tese .ul-tese-extra::before{
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 5px;
  background: var(--mel-cyan);
}

@media (max-width: 1199px){
  .homepage-featured{
    grid-template-columns: 1fr;
    height: auto;
  }
  .homepage-featured-main{
    position: relative;
    height: 80vh;
    width: 100%;
  }
  .homepage-featured-main .homepage-featured-title{
    max-width: 600px;
    padding: 50px;
    padding-bottom: calc(50px + 50px);
  }
  .homepage-featured-main .homepage-featured-title h1{
    font-size: 30px;
  }
  .homepage-featured-side{
    width: 100%;
    margin-top: -50px;
    height: auto;
    padding: 0px;
  }
  .homepage-featured-side-wrapper{
    display: flex;
    justify-content: space-between;
    width: 100%;
    gap: 20px;
    padding: 0px 40px;
    overflow: visible;
  }
  .homepage-featured-side-wrapper.scrollable{
		overflow: auto;
  }
  .homepage-featured-side-element{
    position: relative;
    max-width: 300px;
    margin: 0;
    opacity: 1;
  }
  .homepage-featured-side-element:not(:last-child){
    margin-bottom: 0;
  }
  .homepage-featured-side-element h2{
    margin: 0;
    width: 100%;
    color: black;
    font-size: 16px;
    padding: 0px;
    padding-top: 5px;
  }

  .homepage-featured-main.enter .homepage-featured-title{
    width: 100%;
  }

  .homepage-featured .homepage-featured-overlay-bottom,
  .homepage-featured .homepage-featured-overlay-right{
    display: none;
  }

  .homepage-featured-side{
    z-index: 12;
  }
  .homepage-featured-side-scroll{
    width: 100%;
  }

  .homepage-featured-side-element img{
    border: none;
    box-shadow: 0 0 5px rgba(0,0,0,0.75);
  }
  .homepage-featured-side-element h2{
    color: black;
  }
}
@media (max-width: 959px){

  .page-section-pull-left{
    margin-right: calc(-1 * var(--page-container-padding));
  }
	.page-search{
		padding: 0px 20px;
	}

  .course-short-info{
    margin: 20px 0px;
  }

  .edition-list {
    grid-template-columns: repeat(1, 1fr);
  }

  .list-dashes{
    max-width: 100%;
  }
  .list-dashes > li{
    grid-template-columns: 1fr;
    gap: 0;
    margin-bottom: 10px;
  }
  .list-dashes > li > :nth-child(2) {
    display: none;
  }

  #side-links {
    display: none;
  }
}
@media (max-width: 767px){
  .grid-dashes{
    grid-template-columns: 1fr;
  }
  .grid-dashes > :nth-child(3n+2){
    display: none;
  }

  .homepage-featured-main .homepage-featured-title{
    max-width: 600px;
    padding: 20px;
  }
  .homepage-featured-main .homepage-featured-title h1{
    font-size: 30px;
  }
  /* .homepage-featured-side{
    margin-top: 0px;
  } */
  .homepage-featured-side-wrapper.scrollable{
		width: 100%;
		overflow: auto;
  }
  .homepage-featured-side-element{
		flex: 1 0 40%;
    /* display: flex;
    flex-direction: row-reverse;
    width: 100%;
    max-width: none;
    padding-bottom: 10px;
    border-bottom: 1px dashed black; */
		border: none;
  }
  .homepage-featured-side-element:not(:last-child){
    margin-bottom: 10px;
  }
  /* .homepage-featured-side-element img{
    width: 150px;
    height: 150px;
    border: none;
  } */
  /* .homepage-featured-side-element h2{
    padding: 10px;
    -webkit-line-clamp: unset;
    height: auto;
  } */

}
@media (max-width: 639px){
	.page-search{
		padding: 0px 10px;
	}
	.course-short-infos > :last-child{
		grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
	}
	.course-short-info > :last-child{
		line-height: 1em;
		font-size: 18px;
		padding: 0;
	}
	.homepage-featured-side-element{
		flex: 1 0 60%;
	}
}
@media (max-width: 420px){

  .course-short-info{
    margin: 10px 0px;
  }
	.course-short-infos > :last-child{
		grid-template-columns: 1fr;
	}

}