/* Mobile CSS of TEDxLakeComo.com
(c) 2018 TEDxLakeComo.com. All rights reserved. */

:root {
    /* Mobile Variables */
    --header-min-height-mobile: 450px;
    --main-header-logo-width-mobile: 256px;
}

@media (max-width: 768px) {
    html, body {
        font-size: 67.5%;
    }

    header {    
        min-height: var(--header-min-height-mobile);
    }

    #header-logo-container {
        width: var(--main-header-logo-width-mobile);
        max-width: var(--main-header-logo-width-mobile);
    }
    
    #header-logo {
        margin-bottom: 1.5rem;
    }
    
    #header-venue {
        margin-bottom: 1rem;
    }
    

    #header-venue span {
        font-size: 1.8rem;
    }

    .button {
        font-size: 1.8rem;
        padding: 1rem 1.5rem;
    }

    .panoramic-box .grid-item {
        width: 100% !important;
    }

    section#team {
        background-attachment: scroll;
    }

    .flex-container {
        justify-content: center;
    }

    .about-ted-container div {
        width: 100% !important;
    }

    .maximize-width-on-mobile {
        width: 100%;
    }

    #newsletter-email {
        width: 100%;
        line-height: 3;
    }
    
    #newsletter-button {
        margin-top: 1rem;
        width: 100%;
    }

    span.patron {
        border: 0px !important;
        width: 100%;
        text-align: center;
    }

    .protagonista-hover {
        display: none;
    }

    .container-video {
        max-width: 100% !important;
        width: 100% !important;
    }
}

@media (min-width: 768px) and (max-width: 900px) {

    /* CSS for YouTube Video Thumbnails */

    .container-video {
        max-width: 50% !important;
        width: 50% !important;
    }
}