/* Small screen devices */
@media screen and (max-width: 599px) {
    html {
        font-size: 10px;
    }

    div.main {
        padding: 1em 1em 2em 1em;
    }


    .bannerSection .bannerGroup .bannerList {
        width: var(--banner-width);
        margin: 0 auto;
    }

    .bannerSection .bannerGroup .mediumTiles {
        width: var(--medium-banner-width);
        margin: 0 auto;
    }

    div.paragraph {
        flex-wrap: wrap;
    }


    div.img-wrap.gallery {
        display: flex;
        justify-content: center;
    }

    div.formSection .form-columnwrapper {
        display: block;
    }

    .whiteFadeoutOverlay {
        width: 200%;
    }

    .whiteFadeoutOverlay::before {
        width: 200%;
    }

    #formPageParent.introFull {
        background-size: 200% auto !important;
    }
}
/* Other mobile devices */
@media screen and (min-width:600px) and (max-width: 889px) {
    html {
        font-size: 12px;
    }

    div.main {
        padding: 1em 1em 2em 1em;
    }

    #speakers-carousel .main-carousel-wrap {
        width:22.25rem;
        margin: 0 auto;
    }

    .bannerSection .bannerGroup .bannerList {
        width: 548px;
        margin: 0 auto;
    }

    .bannerSection .bannerGroup .mediumTiles {
        width: var(--medium-banner-width);
        margin: 0 auto;
    }

}

/* All mobile devices */
@media screen and (max-width: 889px) {

    .toggle-group {
        flex-wrap: wrap;
    }

    body {
        line-height: 1.5rem;
    }

    #talksPromo h2 {
        padding: 0 20%;
    }

    #partnersParent h2 {
        padding: 0 20%;
    }

    #partnersParent p {
        width: 90%;
        margin: 0 auto;
    }

    #introPanel #mainLogo {
        width: 12rem;
    }

    #introPanel #eventDate h2 {
        font-size: 0.95rem;
    }

    #introPanel #eventText h1 {
        font-size: 1.5em;
        margin-top: 1rem;
    }

    #introPanel #eventDescription h2 {
        font-size: 1em;
        line-height: 1.5em;
    }

    #content.mainPage p {
        text-align: center;
    }

    div.paragraph div {
        width: 100%;
        margin: 0 auto;
    }

    div.ilustration-image {
        width: 75% !important;
        height: auto;
        aspect-ratio: 1.628/1;
        display: flex;
        margin-left: 5rem !important;
    }

    #accomodation div.paragraph:nth-of-type(even) .venueImgMask {
        transform: scaleX(1);
    }

    #accomodation div.paragraph:nth-of-type(even) .venueImgMask > img {
        transform: scaleX(1);
    }

    #footerPanel .pages .elem {
        width: 100%;
    }

    #footerPanel .footerMenu {
        line-height: 1.5rem;
    }

    #footerPanel #socialNetworks {
        margin-top: -1rem;
    }

    #footerPanel .logoAndInfo {
        margin-right: 0;
    }

    #footerPanel .contacts {
        margin-right: 0;
    }

    #form-main-container {
        flex-wrap: wrap;
    }

    #form-main-col {
        width: 100%;
    }

    #registration-side-col {
        width: 100%;
    }

    .currencyBox {
        width: 9rem;
        height: 2.8rem;
        vertical-align: middle;
    }

    .toggle-button {
        font-size: 1rem;
    }

    .no-show-mobile {
        display: none;
    }

    div.fileInput input {
        padding: 1px;
    }

    div.badgeParent .roundTop {
        background-color: var(--secondary-color-sat50);
        border-bottom: 0px;
    }

    div.badgeParent h2 {
        text-align: left !important;
    }

    div.badgeParent .roundTop p {

    }

    .promo {
        display: block;
        margin-top: 4rem;
    }

    .promo_img {
        width: 100%;
    }

    .promo_info {
        width: 100%;
        margin-top: 1.5rem;
    }
}


@media screen and (max-width: 1003px)
{

    #expo-carousel {
        display: block;
    }

    .expo-item {
        display: flex;
        height: 400px;
        margin-bottom: 2rem;
    }

    .expo-title h3 {
        width: 100%;
        margin-top: 3rem;
        text-align: center;
        font-size: 3rem !important;
    }

    .scheduleDetail .talkName {
        margin-top: 1rem;
    }
}