/* =============================================================================
   FLAGS CIRCLE LAYOUT
   ============================================================================= */

.circle-container
{
    position: relative;
    width: 100%;
    height: 100%;
    top: 5em;
}

.circle-container a
{
    display: block;
    position: absolute;
    left: 50%;
    width: 8em;
    margin: -2em;
}

.circle-container img
{
    display: block;
    width: 65%;
    cursor: pointer;
}

.divFlags
{
    width: 100%;
    height: 48em;
    padding-top: 12em;
}

.divInPortrait
{
    display: none;
    font-size: larger;
    text-align: center;
}

/* Hide circle and show portrait message on touch-only devices in portrait mode */
@media only screen and (orientation: portrait) and (any-pointer: coarse)
{
    .divFlags      { display: none; }
    .divInPortrait { display: block; }
}


/* =============================================================================
   CENTER CIRCLE - invisible flexbox container that centers the text
   Sized to fit the empty inner area of the flag ring.
   ============================================================================= */

#center_circle
{
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);

    /* Sized to fit inside the flag ring */
    width: 18em;
    height: 18em;

    display: flex;
    align-items: center;
    justify-content: center;

    /* Sits above the flag wrappers */
    pointer-events: none;
}

#center_text
{
    width: 100%;
    text-align: center;
    color: purple;
    pointer-events: none;
}


/* =============================================================================
   CENTER TEXT
   Only font-size and font-weight vary per flag - no positioning needed.
   ============================================================================= */

.noFlag      { font-size: 3em;   font-weight: bold; }
.albaniaFlag    { font-size: 0.85em; }
.argentinaFlag  { font-size: 0.8em;  }
.australiaFlag  { font-size: 1em;    }
.bulgariaFlag   { font-size: 1em;    }
.canadaFlag     { font-size: 1em;    }
.chileFlag      { font-size: 1em;    }
.columbiaFlag   { font-size: 1.2em;  }
.costaRicaFlag  { font-size: 1.2em;  }
.icelandFlag    { font-size: 1em;    }
.kenyaFlag      { font-size: 1.5em;  font-weight: bold; }
.mexicoFlag     { font-size: 0.85em; }
.norwayFlag     { font-size: 1em;    }
.peruFlag       { font-size: 1.2em;  font-weight: bold; }
.polandFlag     { font-size: 1em;    }
.southAfricaFlag{ font-size: 1em;    }
.spainFlag      { font-size: 1.2em;  font-weight: bold; }
.swedenFlag     { font-size: 1em;    }
.ukFlag         { font-size: 1em;    }
.usaFlag        { font-size: 1.5em;  font-weight: bold; }
.venezuelaFlag  { font-size: 1.2em;  font-weight: bold; }


/* =============================================================================
   RESPONSIVE BREAKPOINTS
   ============================================================================= */

@media only screen and (max-width: 1334px)
{
    .flagText { width: 39%; left: 32%; }
}

@media only screen and (max-width: 705px)
{
    .flagText { font-weight: normal; }
}

/* 1199px - medium screens */
@media only screen and (max-width: 1199px)
{
    .southAfricaFlag { font-size: smaller; }
    .ukFlag          { font-size: smaller; }
}

/* 991px - DNN layout shift */
@media only screen and (max-width: 991px)
{
    .noFlag          { font-size: 2.5em; }
    .canadaFlag      { font-size: smaller; }
}

/* 710px - small screens like iPhone 8 */
@media only screen and (max-width: 710px)
{
    .noFlag          { font-size: 2em; }
    .chileFlag       { font-size: smaller; }
    .norwayFlag      { font-size: smaller; }
}