/* http://meyerweb.com/eric/tools/css/reset/ 
v2.0 | 20110126
License: none (public domain)
*/
            * {box-sizing: border-box;}

            html, body, div, span, applet, object, iframe,
            h1, h2, h3, h4, h5, h6, p, blockquote, pre,
            a, abbr, acronym, address, big, cite, code,
            del, dfn, em, img, ins, kbd, q, s, samp,
            small, strike, strong, sub, sup, tt, var,
            b, u, i, center,
            dl, dt, dd, ol, ul, li,
            fieldset, form, label, legend,
            table, caption, tbody, tfoot, thead, tr, th, td,
            article, aside, canvas, details, embed, 
            figure, figcaption, footer, header, hgroup, 
            menu, nav, output, ruby, section, summary,
            time, mark, audio, video {
                margin: 0;
                padding: 0;
                border: 0;
                font-size: 100%;
                font: inherit;
                vertical-align: baseline;
            }
            /* HTML5 display-role reset for older browsers */
            article, aside, details, figcaption, figure, 
            footer, header, hgroup, menu, nav, section {
                display: block;
            }
            body {
                line-height: 1;
            }
            ol, ul {
                list-style: none;
            }
            blockquote, q {
                quotes: none;
            }
            blockquote:before, blockquote:after,
            q:before, q:after {
                content: '';
                content: none;
            }
            table {
                border-collapse: collapse;
                border-spacing: 0;
            }
            body { background: #281e32; font-family: 'PT Sans Narrow', helvetica, arial, sans-serif; }
            .clearfix {
                overflow: auto;
            }
            .no-flag {
                width: 100%;
                height: 0;
                padding-top: 100%;
            }
            .draw-container {
                background: transparent;
                background-position: center;
                background-repeat: no-repeat;
                background-size: contain;
                width: 100%;
                height: 0;
                max-height: 100%;
                padding-bottom: 56.25%;
                position:absolute;
                top:50%;
                margin-top:-28.125%;
                overflow:hidden;
            }
            .men .draw-container   { background-image: url("2024-pontoon-draw-men.png"); }
            .women .draw-container { background-image: url("2024-pontoon-draw-women.png"); }
            .relay .draw-container { background-image: url("2024-pontoon-draw-relay.png"); }

            #numbers {
                position: absolute;
                top: 31%;
                bottom: 0;
                left: 0;
                right: 0;
                z-index: 1000;
                width: 100%;
            }

            .relay #numbers { max-width: 1000px; margin: 0 auto; }

            .arrow { width: 10%; }
            .arrow-left { float:left; margin-left: 5%;}
            .arrow-right { float:right; margin-right: 5%;}

            h1,h2,h3,h4,h5,h6 { color: #fff; font-family: 'PT Sans Narrow', helvetica, arial, sans-serif; }
            h1 { font-size: 36px; }
            h2 { font-size: 28px; }
            h3 { font-size: 24px; }
            h4 { font-size: 20px; }
            h5 { font-size: 18px; }
            h6 { font-size: 14px; }

            .flag {
                width: 100%;
                height: 0;
                padding-top: 60%;
                background-size: cover;
                background-repeat: no-repeat;
                background-position: center center;
            }

            .hidden { display: none; }
            .cols {
                display: flex;
                flex-flow:row;
            }
            .cols li {
                flex-grow: 1;
                font-family: 'PT Sans Narrow', helvetica, arial, sans-serif;
                font-size: 14px;
                font-weight: bold;
                width: 100%;
                text-align:center;
                min-height: 300px;
                padding: 4px 1px;
                color: #fff;
                background-image: linear-gradient(rgba(11,24,70,0.5) 50%, rgba(255,255,255,0));
            }
            .cols li:nth-child(2n) {
                background-image: linear-gradient(rgba(11,24,70,0.8) 50%, rgba(255,255,255,0));
            }
            .cols li.reserved {
                /* background-image: repeating-linear-gradient(48.5deg, #214edd, #224fdf 2px, #6e1623 2px, #701523 4px);
                color: #ccd1d7;
                -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
                mask-image: linear-gradient(rgba(0,0,0,1), rgba(0,0,0,0)); */
                background-image: linear-gradient(rgb(255,0,66) 50%, rgba(255,255,255,0));

                
            }
            .cols li.restricted {
                background-image: repeating-linear-gradient(48.5deg, rgba(11,24,70,1), rgba(11,24,70,1) 2px, rgba(0,0,0,0.9) 2px, rgba(0,0,0,0.9) 4px);
                color: #2f2f2f;
                -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
                mask-image: linear-gradient(rgba(0,0,0,1), rgba(0,0,0,0));
                /* background-image: linear-gradient(rgb(0,0,0) 50%, rgba(255,255,255,0)); */
                
            }
            .cols li .flag {
                margin-top: 5px;
                margin-bottom: 5px;
                padding-left: 1px; padding-right: 1px;
            }
            .cols li .country {
                font-size: 9px;

            }
            .cols li .athlete-name {
                display:block;
                padding-top: 10px;
                padding-bottom: 5px;
                position: relative;
                display: flex;
                align-items:center;
                justify-content:center;
            }
            .cols li .athlete-name span {
                white-space: nowrap;
                
                
                writing-mode: vertical-lr;
                transform: rotate(0deg);
                position: relative;
                font-size: 18px;
                text-transform: uppercase;
                line-height: 1em;
            }

            .cols li .athlete-name span:after {
                content: "";
                float: left;
                margin-top: 100%;
            }

            .cols li .start-number {
                background: #312782;
                padding: 3px;
                font-size: 8px;
                color: #fff;
                min-width: 14px;
                display: inline-block;
            }
            .rotate-180 {
              -webkit-transform: rotate(180deg);     /* Chrome and other webkit browsers */
              -moz-transform: rotate(180deg);        /* FF */
              -o-transform: rotate(180deg);          /* Opera */
              -ms-transform: rotate(180deg);         /* IE9 */
              transform: rotate(180deg);             /* W3C compliant browsers */

              /* IE8 and below */
              filter: progid:DXImageTransform.Microsoft.Matrix(M11=-1, M12=0, M21=0, M22=-1, DX=0, DY=0, SizingMethod='auto expand');
            }