@media only screen and (min-width: 414px) and (max-width: 450px) 
{
    /* 414 is screen width on iPhone 6/7/8 Plus */
    body {
        font-size: 1.1rem;
    }

    h1 {
        font-size: 2.2rem;
    }

    h2 {
        font-size: 2.0rem;
    }

    #header {
        background: url(/img/header-450.jpg) top left no-repeat;
        background-size: contain;
        padding-top: 30%;
    }

    #content {
        width: 85%; /*320px;*/
    }

    .logo-short  { display: grid !important; }
    .logo-full   { display: none !important; }
    .menu-short  { display: grid !important; }
    .menu-full   { display: none !important; }

    /* Committee Table - reformat vertically */
    #comite {
        display: grid;
        grid-template-columns: min-content;
        grid-template-rows: min-content min-content 3rem;
        justify-content: center;
        align-content: center;
        justify-items: center;
        align-items: start;
        column-gap: 2rem;
        margin: auto; 
    }

    #comite .last {
        margin-bottom: 2rem;
    }


    .photo {
        width: 320px;
        height: 200px;
        margin: auto;
        border-radius: 10px;

    }

    .spectacle {
        background: url(/img/spectacle-320.jpg) no-repeat;
        background-size: contain;
    }
    
    .stages {
        background: url(/img/stages-320.jpg) no-repeat;
        background-size: contain;
    }
    
    .compagnie {
        background: url(/img/compagnie-320.jpg) no-repeat;
        background-size: contain;
    }

    .compagnieBBC3T {
        background: url(/img/compagnieBBC3T-320.jpg) no-repeat;
        background-size: contain;
    }
    
    .cours {
        background: url(/img/camera.png) no-repeat;
        background-size: contain;
        background-color: lightgrey;
        background-position: center center;
        background-size: 128px 128px;
    }
    
    .presentation {
        background: url(/img/camera.png) no-repeat;
        background-size: contain;
        background-color: lightgrey;
        background-position: center center;
        background-size: 128px 128px;
    }

    #map iframe {
        width: 100%;
        height: 32rem;
    }

    .crazybuttons a {
        margin: 0.25rem auto 0.25rem auto !important;
    }

    form > div {
        width: 100% !important;
        margin: 0 !important;
    }

    .courselist {
        row-gap: 0.8rem !important;
        padding: 0.5rem 1rem 0.5rem 0.5rem;
    }

    .discountlist {
        row-gap: 0.8rem !important;
        padding: 0.5rem;
    }

    .termslist {
        row-gap: 0.8rem !important;
        padding: 0.5rem;
    }
}