@media all and (min-width: 50px) {
    body {
        font-size: 0.9em;
    }
}

@media all and (min-width: 700px) {
    body {
        font-size: 0.7em;
    }
}

@media all and (min-width: 1000px) {
    body {
        font-size: 0.8em;
    }
}

@media all and (min-width: 1100px) {
    body {
        font-size: 0.9em;
    }
}

@media all and (min-width: 1400px) {
    body {
        font-size: 1.0em;
    }
}



.lt1280,
.mobile {
    display: none;
}

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

    /* tablet */
    #main-container {
        /*        background: green;*/
    }

    #policy,
    #repository {
        /* flex: 1; */
        background: rgba(255, 255, 255, .8);
        width: 80%;
        padding: 10px;
    }

    #policy-title,
    #repository-title {
        padding: 10px;
        margin: 0;
        position: relative;
        left: 0;
        width: 80%;
        text-align: left;
        background: rgba(255, 255, 255, .8);
        color: #122e5c !important;
        font-weight: 700;
    }

    .repository-title {
        max-width: 12%;
    }

    #content.index>.col {
        padding: 0px 0px;
    }

    .btn-event {
        margin: 1.8%;
    }

    .gt1280 {
        display: none !important;
    }

    .lt1280 {
        display: flex;
    }
}

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

    .btn-event {
        margin: 2% 1.6%;
    }


    .logo-novartis:before {
        background-position: center right;
        background-size: auto 80%;
    }

    #btn-home {
        background-position: center;
        background-size: 70%;
        top: 10px;
        left: 10px;
    }

    #header {
        min-height: 100px;
    }

    .user-welcome,
    .user-info {
        margin-top: 0px;
    }
}

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

    /* smartphones, iPhone, portrait 480x320 phones */
    #main-container {
        /*    background: red;*/
    }

    .index .description {

        padding-right: 0;
        margin: 40px auto;
        width: 80%;
    }

    #policy,
    #repository {
        /* flex: 1; */
        width: 95%;
    }

    #policy-title,
    #repository-title {
        width: 95%;
        margin-bottom: 2px;
        text-align: center;
    }

    #policy-title {
        margin-top: 100px;

    }

    #footer {
        z-index: 5;
        padding-left: 0;
        text-align: center;
        font-size: 0.8em;
    }

    .repository-title {
        max-width: auto;
        min-width: 32%;
    }

    #header,
    #content {
        flex-wrap: wrap;
    }

    #header .row {
        align-items: center;
        justify-content: center;
    }

    #header>.col {
        flex-basis: 100%;
        padding: 30px 10px;
        justify-content: center;
    }

    #content>.col {
        flex-basis: 100%;
        padding: 0px 10px;
    }

    #content.index>.col {
        justify-content: center;
    }

    #content.index>.col:first-child>div {
        align-items: center;
        margin: 60px auto;
    }

    .btn-event {
        flex-basis: 35%;
        font-size: 1.3em;
    }

    .btn-event:after,
    .repository-title:before {
        width: 14px;
        height: 14px;
    }

    .repository-title {
        font-size: 1.2em;
    }

    .logo-novartis:before {
        background-size: 100% auto;
        width: 12%;
    }

    .user-welcome {
        margin-left: 0px;
        flex: 1;
        font-size: 1.2em;
    }

    #header .team-score,
    #header .team {
        font-size: 1em;
    }

    .hideTeam {
        display: none;
    }

    .border-shadow-bottom:after {
        background-image: url(./img/border-shadow-center.png);
        /* background: url(./img/border-shadow-center.png) no-repeat;*/
    }


    #btn-home {
        height: 40px;
        width: 40px;

        top: 10px;
        left: 10px;
    }

    #content.logo-corner {
        background: none;

    }

    .event-page-buttons {
        flex-wrap: wrap;
    }

    .event-page-buttons .btn {
        min-width: 60%;
    }

    .event-page-date {
        font-size: 2em;
        line-height: 1.6em;
        display: flex;
        flex-direction: column;
        padding: 30px 10px;
        width: 100%;
    }

    .event-page-title {
        font-size: 1.8em;
        margin: 20px 0;
    }

    .lt1280,
    .desktop {
        display: none !important;
    }

    .mobile {
        display: flex;
    }

    .header-mobile>.row {
        align-items: center;
        justify-content: center;
        padding: 30px 0;
    }

    .header-mobile .logo-mobile {
        width: 50%;
    }

    .header-mobile .logo-novartis-mobile {
        position: absolute;
        right: 0;
        width: 20%;
        /*        margin-left: 20px;*/
    }

    .user-welcome-mobile {
        flex: 1;
        margin-left: 40px;
        font-size: 1em;
        flex-wrap: wrap;
    }

    .info-mobile {
        align-items: center;
        justify-content: center;
    }

    .user-info-mobile {
        flex: 0;

    }

    #btn-home-mobile {
        background: url(./img/btn-home.png) no-repeat;
        background-position: top center;
        background-size: 100%;
        height: 30px;
        width: 30px;
        margin: 10px;
        cursor: pointer;
    }

    .team-mobile {
        font-size: 1em;
        justify-content: flex-start;
        margin-left: 0;
    }

    .team-mobile:before {
        content: '';
        width: 50px;
        height: 50px;
        position: relative;
        top: auto;
        right: auto;
        background-repeat: no-repeat;
        background-position: top right;
        background-size: auto 100%;
        pointer-events: none;
    }

    .team-mobile-container {
        /*            height: 50%;*/
        border-left: 1px solid #fff;
        justify-content: flex-start;
        padding-left: 12px;
        margin-left: 20px;
    }

    .team-mobile-container .team-score {
        justify-content: center;
        font-size: 1.0em;
        flex: 0;
        margin-left: 0;
        margin-right: 10px;
    }

    .team-mobile-container .team-score-label {

        padding: 10px 14px;

        text-align: center;

    }

    .team-mobile-container .team-score-label span {
        margin-left: 10px;
    }

    #content.index>.col.btn-event-container {
        padding: 30px 0;
    }

    .btn-content-repository-container-mobile {
        padding: 20px 0;
        background: rgba(255, 255, 255, 0.6);
        justify-content: center;
    }

    .btn-content-repository-header-mobile .btn-content-repository,
    .btn-content-repository-container-mobile .btn-content-repository {
        font-size: 1.2em;
        padding: 15px 25px;
        margin: 0 10px;
    }

    .btn-logout {
        margin-right: 20px;
    }

    .btn-content-repository-header-mobile {
        padding: 20px;
        justify-content: center;
    }


    .btn-content-repository-header-mobile.PC .PC,
    .btn-content-repository-header-mobile.NET .NET {
        background: transparent;
        color: #ffcf00;
        border-color: #ffcf00;
        pointer-events: none;
    }


    /*    RANKING */
    .ranking-mobile .cup {
        width: 30%;
    }

    .ranking-mobile .cup-container {
        padding: 20px 0;
        align-items: center;
        justify-content: center;
        color: #ffcf00;
    }

    .ranking-mobile .ranking-team-row.row {
        margin-left: 80px;
    }

    #content>.col.ranking-mobile {
        padding: 0;
    }

    .mobile-flex-col {
        flex-direction: column;
    }

    .ranking-mobile .ranking-team-img {
        width: 100px;

    }

    .ranking-mobile .team-score {
        margin-left: 0;
        font-size: 1.2em;
    }

    .ranking-mobile .team-score .team-score-label {
        padding: 10px 22px;
            background: #122e5c;
    }
}