/* Font */
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,400;0,700;1,400&display=swap');

/* Stile generico */

body {
    margin: 0;
    font-family: Raleway, sans-serif;
    font-size: 18px;
    color: #4a4a4a;
}

body > section {
    padding: 0px 70px;
}

body > nav, body > footer {
    padding: 20px 70px;
}

a {
    color: #4a4a4a;
    text-decoration: none;
}

.t-center {
    text-align: center;
}

.m30 {
    margin: 30px;
}

.mt0 {
    margin-top: 0px;
}

.mt30 {
    margin-top: 30px;
}

.align-self {
    align-self: center;
}

.btn-margin-top{
    margin-top: 40px;
}

.nav-active {
    font-weight: bolder;
    text-decoration: underline;
}

.t-underline {
    text-decoration: underline;
}

.general-list {
    list-style-type: none;
    padding: 0;
}

.general-list li {
    margin-top: 15px;
}

/* Navigation */

nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 0px;
}

.nav-login {
    display: flex;
    align-items: center;
}

.nav-login button {
    margin-left: 20px;
}

.nav-logo-menu {
    display: flex;
    align-items: center;
}

.nav-logo-menu a img {
    margin-right: 20px;
    margin-left: 0px;
}

.nav-logo-menu ul {
    list-style: none;
}

.nav-logo-menu ul li {
    display: inline-block;
}

nav a {
    margin: 0px 15px;
}

nav a:hover {
    font-weight: bold;
    text-decoration: underline;
}

#mobile-menu-g {
    display: none;
}

/* Header Homepage */

.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10%;
}

.header-hp {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 70px;
}

.headline {
    font-size: 60px;
    font-weight: bold;
}

.general-title {
    font-size: 45px;
    font-weight: bold;
    text-align: center;
    margin-top: 70px;
}


/* Schedina corsi */

.row-corsi {
    display: flex;
    justify-content: center;
    margin: 50px 0;
}

.schedina {
    display: flex;
    align-items: center;
    max-width: 580px;
    max-height: 200px;
    padding: 2% 5%;
    border-radius: 10px;
    color: #fff;
    background-image: url(img/bg-schedina1.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin: 0px 3%;
    transition: all linear .2s;
    position: relative;
    width: 50%;
}

.schedina:hover {
    cursor: pointer;
    transform: scaleX(1.05) scaleY(1.05);
}

.schedina1 {
    background-image: url(img/bg-schedina1.png);
}

.schedina2 {
    background-image: url(img/bg-schedina2.png);
}

.schedina-img, .schedina-description {
    flex: 1;
}
.schedina-img, .schedina-img img {
    height: 100%;
}

/*Hompege */
#hp-sponsor {
text-align: center;
bottom: 3px;
font-weight: 500;
font-size: 22px;
}

#img-sponsor {
    padding-top: 16px;
    margin-left: 40px;
    display: flex;
    justify-content: space-evenly;
}

.info-generali {
    margin: 70px 0;
}

.info-g {
    display: flex;
    justify-content: space-between;
}

.box-caratteristiche {
    text-align: center;
    align-items: center;
    margin: 20px;
   
}
.hp-descrizione {
    align-items: center;
    margin-bottom: 80px;
}
.hp-descrizione h2 {
    font-weight: bolder;
    font-size: 44px;
}
.hp-descrizionetop {
    display: flex;
    align-items: center;
    margin-bottom: 60px;
}
.hp-descrizionetop section {
    margin: 0px 4%;
}

.hp-caratteristiche {
    display: flex;
    justify-content: flex-start;
    margin-left: 0px;
}

.hp-caratteristiche {
    margin-left: 0!important;
}

/* Box abbonamenti */
.abbonamenti {
    display: flex;
    justify-content: space-evenly;
    background-color: #F1F3FD;
    border-radius: 0 0 40px 40px;
    margin-left: 70px;
    margin-right: 70px;
    margin-bottom: 140px;
}

.box-abbonamenti {
    margin-bottom: -50px;
    margin-top: 50px;
    width: 300px;
    padding: 30px;
    border-radius: 25px; 
    background: #fff;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.box-abbonamenti ul {
    margin: 0;
}
.box-abbonamenti ul li {
    margin: 8px 0;
}

.immagineb{
    position: absolute;;
}

/* FAQ */
#faq {
    display: flex;
    justify-content: center;
    margin: 0 25%;
}

#faq ul {
    list-style-type: none;
}

#faq ul li {
    margin-top: 15px;
}

#faq ul a:hover {
    text-decoration: underline;
}

#faq ul li::before {
    content: '';
    background-image: url(img/faq.svg);
    width: 22px;
    height: 22px;
    display: inline-block;
    margin-right: 10px;
    background-repeat: no-repeat;
    vertical-align: middle;
}


/* Box nutrizionista */

#nutrizionista {
    background-image: url(img/bg-nutrizionista.svg);
    background-repeat: no-repeat;
    background-position: bottom;
    display: flex;
    justify-content: center;
    margin-top: 140px;
    padding: 0;
    width: 100%;
}

.box-nutrizionista {
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
    border-radius: 20px;
    background-color: #FFFFFF;
    width: 60%;
    display: flex;
    justify-content: space-between;
    padding: 30px 30px 10px 30px;
    margin-bottom: 20px;
}

.box-nutrizionista img {
    margin-top: -120px;
}

/* Footer */
footer {
    padding: 30px;
}
.list-footer {
    display: flex;
    justify-content: space-between;
}

.list-footer ul {
    list-style-type: none;
    padding-left: 0px;
    line-height: 30px;
}

.list-footer ul a:hover {
    text-decoration: underline;
}

/* Video */

.container-video {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    max-height: 800px;
    background: #000;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 0;
}

.video {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    margin: 0;
    object-fit: cover;
}


/* Come funziona Page */
.page-title {
    font-size: 40px;
    font-weight: bold;
}

.custom-list {
    list-style-type: none;
    padding-left: 0px;
}

.custom-list2 {
    list-style-type: none;
    padding-left: 0px;
}
.custom-list li::before {
    content: '';
    background-image: url(img/list-style.svg);
    width: 22px;
    height: 22px;
    display: inline-block;
    margin-right: 10px;
    background-repeat: no-repeat;
}

.custom-list li{
    display: flex;
    margin-bottom: 15px;
}

.box-step {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10%;
    margin: 70px 0;
}

.box-step img {
    margin-right: 50px;
}

/* Dettaglio corso Page */

.nav-white {
    position: absolute;
    top: 0;
    left: 70px;
    width: calc(100% - 140px);
    color: #fff;
    z-index: 999;
}

.nav-white li a, .nav-white a {
    color: #fff;
}

.course-info {
    position: absolute;
    right: 0;
    background-color: #fff;
    top: auto;
    bottom: 25%;
    border-radius: 20px 0 0 20px;
    padding: 20px 30px;
    display: flex;
}

.course-info-dx {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    max-width: 167px;
}
.course-info-sx {
    width: 60%;
}

/* Personal Trainer */
.box-personal-trainer {
    border-radius: 0px 0px 120px 0px;
    background-color: #F1F3FD;
    width: 60%;
    display: flex;
    justify-content: space-between;
    padding: 30px 30px 0px 30px;
    margin: 200px auto 100px auto;
}

.box-personal-trainer img {
    margin-top: -100px;
    margin-left: -140px;
    bottom: 0px;
}

.img-personaltrainer {
    margin-bottom: -4px;
}

.box-pt-description {
    padding: 4% 8%;
}

#pt-quote {
    text-align: center;
}

blockquote {
    text-align: center;
    font-size: 38px;
    font-weight: bold;
}

blockquote::before {
    content: '';
    background-image: url(img/open-quote.svg);
    width: 60px;
    height: 50px;
    display: inline-block;
    background-repeat: no-repeat;
}

/* Tabella Pricing */
#tabella-pricing {
    margin-top: 70px;
    margin-bottom: 70px;
    padding: 0 6%;
}
table {
    width:100%;
    border-collapse: collapse;
}
td, th {
  height: 55px;
}

#tabella-pricing td {
    border-bottom:1px solid #DDD;
    border-left: 0px;
    border-right: 0px;
    padding:10px;
}

td+td { /* dà lo stile a tutti i td che si trovano dopo un td */
  text-align: center;
}
.pricing-b tr:first-child td {
    border-bottom:0px;
}
.section {
  font-weight:bold;
  font-size: 22px;
}
.section td {
  padding-top: 40px;
}
.txt-princing {
    font-size:38px;
    font-weight:bold;
}
.hide {
  border:0;
  background:none;
}
tbody tr:hover:not(.section) {
    background-color: #F1F3FD;
}

/* Tabella orari */

#tabella-orari table {
    overflow: hidden;
}

#tabella-orari td {
    border-bottom:1px solid #DDD;
    border-right:1px solid #DDD;
    border-left: 0px;
    padding:10px;
}

.bg-yoga {
    background-color: #2139EE;
    color: #fff;
}
.bg-cardio {
    background-color: #118840;
    color: #fff;
}
.bg-pilates {
    background-color: #8158F3;
    color: #fff;
}
.bg-zumba {
    background-color: #BE507A;
    color: #fff;
}
.bg-aerobica {
    background-color: #94184B;
    color: #fff;
}
.bg-spinning {
    background-color: #A150D3;
    color: #fff;
}
.bg-yoga {
    background-color: #077DB1;
    color: #fff;
}
.bg-posturale {
    background-color: #4F6AE8;
    color: #fff;
}
.bg-workout {
    background-color: #AC660C;
    color: #fff;
}

/* Persona Trainer */
#curriculum {
    display: flex;
    padding: 0;
}

.curriculum-sx {
    width: 40%;
    padding-top: 50px;
}

.curriculum-sx img {
    width: 120%;
    z-index: 9;
    position: relative;
}

.curriculum-sx h2, .curriculum-sx h3 {
    margin-left: 70px;
}

.curriculum-dx {
    width: 60%;
    padding-top: 50px;
    background-color: #F1F3FD;
    border-bottom-left-radius: 30%;
}

.curriculum-row {
    display: flex;
}

.curriculum-row .curriculum-icon {
    width: 25%;
    padding: 20px;
    text-align: right;
}

.curriculum-row .curriculum-description {
    width: 60%;
    padding: 20px;
}

.subtitle-blue {
    color: #2139EE;
    font-size: small;
}

/* Faq */
.faq-row {
    display: flex;
    margin: 40px 4%;
}

.faq-col {
    flex: 1;
    margin: 0 5%;
}

/* Login Page */

.container-login {
    background-image: url(img/bg-login.png);
    background-repeat: no-repeat;
    background-size: auto;
    background-position: right;
}
.container-registrazione {
    background-image: url(img/bg-registrazione.png);
    background-repeat: no-repeat;
    background-size: auto;
    background-position: right;
}

.login-header {
    display: flex;
    align-items: center;
    padding: 15px 0px;
}

.login-header img {
    margin-right: 50px;
    margin-left: 15px;
}

.login-form {
    margin-top: 80px;
}

/* Prenotazione */

#form-prenotazione {
    display: flex;
    margin-top: 50px;
    padding: 0;
}

.prenotazione-sx {
    width: 50%;
    padding-top: 50px;
    background-color: #F1F3FD;
    border-bottom-right-radius: 30%;
    padding: 50px 0;
}

.prenotazione-sx form, .prenotazione-sx h4 {
    margin-left: 70px;
}

.prenotazione-sx form .input80 {
    width: 80%;
}

.prenotazione-dx {
    width: 50%;
    padding-top: 50px;
}

.prenotazione-dx img {
    width: 100%;
    z-index: 9;
    position: relative;
}

#pricing-table td {
    font-size: 20px;
}

/* Questionario gradimento */

#form-gradimento1, #form-gradimento2, #form-gradimento3 {
    display: flex;
    margin-top: 60px;
    padding: 0;
}

.questionario-sx fieldset {
    margin-bottom: 80px;
}

.questionario-sx {
    width: 70%;
    padding-top: 50px;
    background-color: #F1F3FD;
    padding: 30px 70px;
}

.questionario-dx p {
    padding-left: 30px;
}

.questionario-sx p {
    font-weight: bold;
}

.questionario-sx fieldset {
    display: flex;
    justify-content: space-between;
}

.questionario-sx .input80 {
    width: 80%;
}

fieldset {
    border-color: #ededed;
    padding: 20px;
}

/* Profilo */

#profile-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 50px 50px 50px 0px;
    padding: 0 100px;
    background-color: #F1F3FD;
    border-bottom-right-radius: 90px;
}

#riepilogo {
    width: 50%;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
    border-radius: 20px;
    padding: 20px;
    margin-right: 30px;
}

.grafico-calorie {
    display: flex;
    align-items: center;
    justify-content: center;
}

.n-calorie {
    font-size: 30px;
    margin-bottom: 0;
}
.statistiche {
    display: flex;
}

#gradient-statistiche {
    display: flex;
    justify-content: space-between;
}

.indicatori {
    display: flex;
    justify-content: space-around;
}

.indicatore-statistiche {
    display: flex;
    align-items: center;
}

.indicatore-statistiche section {
    margin-left: 20px;
}

.indicatore-statistiche section p:first-child {
    margin-bottom: 5px;
}

.perc-t {
    font-size: 15px;
    margin-top: 0;
    font-style: italic;
}

.statistiche-dx {
    width: 50%;
}

.indicatori-info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-left: 35px;
    width: 43%;
    padding: 2%;
    background: linear-gradient(52.26deg, #9076dc 1.15%, #B49CF8 65.71%);
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
    border-radius: 20px;
    color: #fff;
    text-align: center;
}

#testo-ore {
    font-size: 25px;
    margin-top: 0px;
}

.box-amici {
    display: flex;
    margin-top: 30px;
    background: #FFFFFF;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
    border-radius: 20px;
}

.amico {
    padding: 21px;
    text-align: center;
}

.row-missioni {
    display: flex;
    justify-content: space-around ;
    align-items: center;
    border-bottom: 1px solid #cdcdcd;
    padding: 2% 0;
}

.barra progress {
    width: 100%;
}

.barra p {
 color: #2156EE;
 padding: 8px;
 background-color: #e2ecff;
 border-radius: 10px;
}

.icone-missioni  {
    display: flex;
    justify-content: center;
    text-align:center;
}

.icone-missioni p {
    color: #2156EE;
    display: flex;
    margin-bottom: 0px;
}

.icone-missioni section {
    padding: 0 10px;
}

.bottone-missioni {
margin-top: 30px;
text-align: center;
}

/* Chi siamo */

.box-purple {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    padding: 3% 0;
    background: linear-gradient(52.26deg, #8158F3 1.15%, #B49CF8 65.71%);
    color: #fff;
    font-size: 22px;
    width: 100%;
}

#header-chisiamo {
    text-align: center;
}

#header-chisiamo img {
    margin-bottom: -4px;
}

#vieni-a-trovarci {
    display: flex;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
    border-radius: 20px;
    margin: 0 70px;
    padding: 0;
}

.info-mappa {
    padding: 50px;
    width: 30%;
    font-style: normal;
}

.info-mappa ul {
    margin: 40px 0;
}

.mappa {
    width: 70%;
}

.mappa iframe {
    width: 100%;
    height: 100%;
    border-radius: 0 20px 20px 0;
}

#contact-form {
    display: flex;
    margin-top: 100px;
    padding: 0;
}

.contact-form-sx {
    width: 40%;
}

.contact-form-sx img {
    width: 120%;
    z-index: 9;
    position: relative;
}

.contact-form-sx h2, .contact-form-sx h4 {
    margin-left: 70px;
}

.contact-form-dx {
    width: 60%;
    padding-top: 50px;
    background-color: #F1F3FD;
    border-bottom-left-radius: 30%;
}

.contact-form-dx form {
    margin-left: 22%;
    padding-right: 70px;
}

.contact-form-dx form .input, .contact-form-dx form .textarea {
    width: 100%;
}

/* Button sizes */

.btn-xs {
    padding: 5px 10px;
    font-size: 14px;
    text-transform: uppercase;
}

.btn-sm {
    padding: 10px 15px;
    font-size: 20px;
}

.btn-md {
    padding: 15px 20px;
    font-size: 20px;
}

.btn-lg {
    padding: 20px 30px;
    font-size: 20px;
}

/* Button blue */
.btn-blue {
    background: #2139EE;
    border-radius: 70px;
    color: #fff;
    border: 0px;
    display: inline-block;
    transition: all linear .2s;
    -webkit-appearance: none!important; /* per il btn submit su iPhone/iPad */
}

.btn-blue:hover {
    background: #1C48C7;
    transform: scaleX(1.05) scaleY(1.05);
    border: 0px;
    cursor: pointer;
    text-decoration: none;
}

/* Button outline blue */
.btn-blue-outline {
    background: #FFFFFF;
    border: 2px solid #2139EE;
    border-radius: 70px;
    color: #2139EE;
}

.btn-blue-outline:hover {
    background-color: #2139EE;
    color: #fff;
    cursor: pointer;
}

/* Button outline green */
.btn-green-outline {
    background: #FFFFFF;
    margin-top: 20px;
    border: 2px solid #7BCA9A;
    border-radius: 70px;
    color: #7BCA9A;
}
.btn-green-hover:hover {
    background: #7BCA9A;
    color: #ffffff;
    cursor: pointer;
}

/* Button outline white */
.btn-white-outline {
    border: 2px solid #fff;
    border-radius: 70px;
    color: #fff;
}

.btn-white-outline:hover {
    background-color: #fff;
    color: #B49CF8;
    cursor: pointer;
}

/* Button login */
.btn-login {
    background: #2139EE;
    border-radius: 70px;
    color: #fff;
    border: 0px;
    width: 350px;
}
.btn-login:hover {
    background: #1C48C7;
    cursor: pointer;
}

.btn-padding-x {
    padding: 5px 50px;
}

/* Input */
.input, .date-picker {
    background: #FFFFFF;
    border: 1px solid #E0E0E0;
    border-radius: 4px;
    height: 30px;
    min-width: 350px;
    margin: 15px 0px;
    padding: 10px;
    font-size: 16px;
    font-family: 'Raleway', sans-serif;
}

.textarea {
    background: #FFFFFF;
    border: 1px solid #E0E0E0;
    border-radius: 4px;
    min-width: 350px;
    margin: 15px 0px;
    padding: 10px;
    font-size: 16px;
    font-family: 'Raleway', sans-serif;
}

select {
    height: auto!important;
}

/* Responsive Tablet */
@media all and (max-width: 1200px) {
    .hp-descrizione, .header-hp section {
        width: 50%;
    }

    .hp-descrizionetop .img-descrizione img, .header-hp section img {
        max-width: 100%;
    }
    #nutrizionista {
        background-size: cover;
    }
}

/* Responsive mobile */
@media all and (max-width: 768px) {

    .input, .date-picker {
        min-width: 50px;
        max-width: 100%;
    }

    .info-g, .header-hp, .abbonamenti, .row-corsi, .list-footer,
    .header, .box-step, .faq-row, #profile-info, .statistiche, .indicatori, .row-missioni,
    .box-personal-trainer, .questionario-sx fieldset, .box-purple,
    #vieni-a-trovarci, #mobile-menu-g {
        display: block;
    }

    .hp-descrizionetop section {
        margin: 0px;
    }

    .hp-descrizionetop {
        margin-bottom: 0;
        flex-direction: column;
    }

    section.mobile-reverse {
        flex-direction: column-reverse;
    }

    body > section, body > header, .header-hp, body > nav, body > footer {
        padding: 5%;
    }

    .box-purple {
        padding: 5%;
        width: 90%;
    }

    .headline {
        font-size: 40px;
    }

    #contact-form {
        margin-top: 40px;
    }

    #contact-form .contact-form-dx form {
        margin-left: 20px;
    }

    #contact-form .contact-form-dx {
        width: 100%;
        padding: 50px 0;
        border-bottom-left-radius: 0;
    }

    .hp-descrizione, .header-hp section, .img-descrizione img, .questionario-sx,
    #header-chisiamo img, .contact-form-dx, .mappa {
        width: 100%;
    }

    .info-mappa {
        width: auto;
    }

    .hp-caratteristiche, .info-mappa {
        display: block;
        text-align: center;
    }

    #vieni-a-trovarci {
        margin: 0 40px;
    }

    .hp-caratteristiche > div {
        margin-bottom: 20px;
    }

    #img-sponsor {
        display: block;
        padding-top: 0px;
        margin-left: 0px;
    }

    .header-hp section a, .box-nutrizionista section img, .questionario-dx,
    #desktop-menu, .contact-form-sx, .prenotazione-dx {
        display: none;
    }

    .abbonamenti {
        margin-left: initial;
        margin-right: initial;
        margin-bottom: 0px;
    }
    .box-abbonamenti {
        width: calc(100% - 60px);
        margin-bottom: 50px;
    }

    #tabella-orari {
        overflow: scroll;
    }

    .schedina, .hp-descrizione, .hp-caratteristiche, .box-caratteristiche, .header-hp section img,
    .prenotazione-sx {
        width: 100%;
        margin-bottom: 5%;
    }
    
    #faq, .box-caratteristiche, #profile-info {
        margin: 0px;
    }

    .schedina {
        padding: inherit;
        margin: 0 auto 70px;
    }

    .header section img, .box-step img, .statistiche-dx, #header-chisiamo img {
        width: 100%;
    }

    .box-step, .box-nutrizionista, .header {
        text-align: center;
    }

    .page-title, .general-title {
        font-size: 30px;
    }

    .general-title {
        margin-top: 30px;
    }

    .schedina-img img {
        width: 80%;
    }

    #tabella-pricing, #profile-info, #header-chisiamo {
        padding: 0;
    }

    .container-registrazione, .container-login {
        background-image: none;
    }

    .login-form > form > .input, .list-footer > section > .input {
        width: 90%;
        min-width: auto;
    }

    .login-form {
        margin-top: 0px;
    }

    #riepilogo {
        margin-right: 0px;
        width: 90%;
        margin-bottom: 20px;
    }

    .grafico-calorie img {
        width: 40%;
    }

    .box-amici {
        flex-wrap: wrap;
    }

    .row-missioni, #profile-info, footer {
        text-align: center;
    }

    #profile-info {
        padding: 20px;
    }

    .guarda-video {
        margin: 50px 0!important;
    }

    #nutrizionista {
        margin-top: 80px;
    }

    .box-personal-trainer {
        margin: 40px 0;
        width: 90%;
        padding: 5%;
    }

    .box-personal-trainer section img {
        width: 100%;
        margin: 0;
    }

    .nav-white-t {
        position: relative;
        z-index: 999;
        background-color: #000;
    }

    .nav-white-t a {
        color: #fff;
    }

    #mobile-menu summary {
        list-style: none;
        text-align: right;
    }

    #mobile-menu summary:focus {
        outline: 0;
    }

    /* Togliere outline per browser Chromium */
    #mobile-menu summary::-webkit-details-marker {
        display: none;
    }
    
    .logo-mobile {
        display: flex;
        justify-content: space-between;
        position: absolute;
        left: 15px;
        z-index: 9999;
    }

    .nav-logo-menu {
        width: 100%;
        display: block;
    }

    .nav-logo-menu ul, .nav-login {
        padding: 0;
        text-align: center;
    }

    .nav-logo-menu ul li {
        display: block;
        line-height: 50px;
    }

    .profile-menu-logout {
        display: flex;
        justify-content: space-around;
        align-items: center;
    }

    #curriculum {
        flex-direction: column;
    }

    .curriculum-sx, .curriculum-dx {
        width: 100%;
    }

    .curriculum-sx img {
        width: 100%;
    }
}