<ol class="countries-list">
<li><a href="#australia" class="todo">Australia</a></li>
<li><a href="#burindi" class="todo">Burundi</a></li>
<li><a href="#eritrea" class="todo">Eritrea</a></li>
<li><a href="#fiji" class="todo">Fiji</a></li>
<li><a href="#israel" class="todo">Israel</a></li>
<li><a href="#kiribati" class="todo">Kiribati</a></li>
<li><a href="#marshall-islands" class="todo">Marshall Islands</a></li>
<li><a href="#nauru" class="todo">Nauru</a></li>
<li><a href="#nepal" class="todo">Nepal</a></li>
<li><a href="#new-zealand" class="todo">New Zealand</a></li>
<li><a href="#samoa" class="todo">Samoa</a></li>
<li><a href="#sao-tome-principe" class="todo">São Tomé and Principe</a></li>
<li><a href="#solomon-islands" class="todo">Solomon Islands</a></li>
<li><a href="#tonga" class="todo">Tonga</a></li>
<li><a href="#tuvalu" class="todo">Tuvalu</a></li>
<li><a href="#vanuatu" class="todo">Vanuatu</a></li>
<li><a href="#afghanistan">Afghanistan</a></li>
<li><a href="#albania">Albania</a></li>
<li><a href="#algeria" class="todo todo--partial">Algeria</a></li>
<li><a href="#andorra">Andorra</a></li>
<li><a href="#angola">Angola</a></li>
<li><a href="#argentina">Argentina</a></li>
<li><a href="#armenia">Armenia</a></li>
<li><a href="#australia-aboriginal">Australia - Aboriginal</a></li>
<li><a href="#austria">Austria</a></li>
<li><a href="#azerbaijan">Azerbaijan</a></li>
<li><a href="#bahamas">The Bahamas</a></li>
<li><a href="#bahrain">Bahrain</a></li>
<li><a href="#belgium">Belgium</a></li>
<li><a href="#bengladesh">Bengladesh</a></li>
<li><a href="#benin">Benin</a></li>
<li><a href="#bhutan">Bhutan</a></li>
<li><a href="#bolivia">Bolivia</a></li>
<li><a href="#bosnia-herzegovina">Bosnia and Herzegovina</a></li>
<li><a href="#botswana">Botswana</a></li>
<li><a href="#brazil">Brazil</a></li>
<li><a href="#brunei">Brunei</a></li>
<li><a href="#bulgaria">Bulgaria</a></li>
<li><a href="#burkina-faso">Burkina Faso</a></li>
<li><a href="#cambodia">Cambodia</a></li>
<li><a href="#cameroon">Cameroon</a></li>
<li><a href="#canada">Canada</a></li>
<li><a href="#cape-verde">Cape Verde</a></li>
<li><a href="#central-african-republic">Central African Republic</a></li>
<li><a href="#chad">Chad</a></li>
<li><a href="#chile">Chile</a></li>
<li><a href="#china">China</a></li>
<li><a href="#comoros">Comoros</a></li>
<li><a href="#congo-brazzaville">Congo (Brazzaville)</a></li>
<li><a href="#congo-kinshasa">Congo (Kinshasa)</a></li>
<li><a href="#cornwall">Cornwall</a></li>
<li><a href="#colombia">Colombia</a></li>
<li><a href="#costa-rica">Costa Rica</a></li>
<li><a href="#croatia">Croatia</a></li>
<li><a href="#cuba">Cuba</a></li>
<li><a href="#curacao">Curaçao</a></li>
<li><a href="#cyprus">Cyprus</a></li>
<li><a href="#czech">Czech Republic</a></li>
<li><a href="#denmark">Denmark</a></li>
<li><a href="#djibouti">Djibouti</a></li>
<li><a href="#dominican-republic">Dominican Republic</a></li>
<li><a href="#east-timor">East Timor</a></li>
<li><a href="#ecuador">Ecuador</a></li>
<li><a href="#egypt">Egypt</a></li>
<li><a href="#el-salvador">El Salvador</a></li>
<li><a href="#england">England</a></li>
<li><a href="#equatorial-guinea">Equatorial Guinea</a></li>
<li><a href="#estonia">Estonia</a></li>
<li><a href="#ethiopia">Ethiopia</a></li>
<li><a href="#faroe">Faroe Islands</a></li>
<li><a href="#finland">Finland</a></li>
<li><a href="#france">France</a></li>
<li><a href="#gabon">Gabon</a></li>
<li><a href="#gambia">The Gambia</a></li>
<li><a href="#georgia">Georgia</a></li>
<li><a href="#germany">Germany</a></li>
<li><a href="#ghana">The Ghana</a></li>
<li><a href="#greece">Greece</a></li>
<li><a href="#greenland">Greenland</a></li>
<li><a href="#guatemala">Guatemala</a></li>
<li><a href="#guinea">Guinea</a></li>
<li><a href="#guinea-bissau">Guinea-Bissau</a></li>
<li><a href="#guyana">Guyana</a></li>
<li><a href="#haiti">Haiti</a></li>
<li><a href="#honduras">Honduras</a></li>
<li><a href="#hungary">Hungary</a></li>
<li><a href="#iceland">Iceland</a></li>
<li><a href="#india">India</a></li>
<li><a href="#indonesia">Indonesia</a></li>
<li><a href="#iran" class="todo todo--partial">Iran</a></li>
<li><a href="#iraq">Iraq</a></li>
<li><a href="#ireland">Ireland</a></li>
<li><a href="#italy">Italy</a></li>
<li><a href="#ivory-coast">Ivory Coast</a></li>
<li><a href="#jamaica">Jamaica</a></li>
<li><a href="#japan">Japan</a></li>
<li><a href="#jordan">Jordan</a></li>
<li><a href="#kazakhstan">Kazakhstan</a></li>
<li><a href="#kenya">Kenya</a></li>
<li><a href="#kuwait">Kuwait</a></li>
<li><a href="#kyrgyzstan">Kyrgyzstan</a></li>
<li><a href="#laos">Laos</a></li>
<li><a href="#latvia">Latvia</a></li>
<li><a href="#lebanon">Lebanon</a></li>
<li><a href="#lesotho">Lesotho</a></li>
<li><a href="#liberia">Liberia</a></li>
<li><a href="#liechtenstein">Liechtenstein</a></li>
<li><a href="#lithuania">Lithuania</a></li>
<li><a href="#luxembourg">Luxembourg</a></li>
<li><a href="#lybia">Lybia</a></li>
<li><a href="#macedonia">Macedonia</a></li>
<li><a href="#madagascar">Madagascar</a></li>
<li><a href="#malaysia" class="todo todo--partial">Malaysia</a></li>
<li><a href="#malawi">Malawi</a></li>
<li><a href="#maldives">Maldives</a></li>
<li><a href="#mali">Mali</a></li>
<li><a href="#malta">Malta</a></li>
<li><a href="#mauritania">Mauritania</a></li>
<li><a href="#mauritius">Mauritius</a></li>
<li><a href="#mexico">Mexico</a></li>
<li><a href="#moldova">Moldova</a></li>
<li><a href="#monaco">Monaco</a></li>
<li><a href="#mongolia">Mongolia</a></li>
<li><a href="#montenegro">Montenegro</a></li>
<li><a href="#morocco" class="todo todo--partial">Morocco</a></li>
<li><a href="#mozambique">Mozambique</a></li>
<li><a href="#myanmar">Myanmar</a></li>
<li><a href="#namibia" class="todo todo--partial">Namibia</a></li>
<li><a href="#netherlands">Netherlands</a></li>
<li><a href="#nicaragua">Nicaragua</a></li>
<li><a href="#niger">Niger</a></li>
<li><a href="#nigeria">Nigeria</a></li>
<li><a href="#north-korea">North Korea</a></li>
<li><a href="#norway">Norway</a></li>
<li><a href="#oman">Oman</a></li>
<li><a href="#pakistan">Pakistan</a></li>
<li><a href="#palau">Palau</a></li>
<li><a href="#palestine">Palestine</a></li>
<li><a href="#panama">Panama</a></li>
<li><a href="#papua-new-guinea">Papua New Guinea</a></li>
<li><a href="#paraguay">Paraguay</a> (<a href="#paraguay2">reverse</a>)</li>
<li><a href="#peru">Peru</a></li>
<li><a href="#philippines">Philippines</a></li>
<li><a href="#poland">Poland</a></li>
<li><a href="#portugal">Portugal</a></li>
<li><a href="#puerto-rico">Puerto Rico</a></li>
<li><a href="#qatar">Qatar</a></li>
<li><a href="#romania">Romania</a></li>
<li><a href="#russia">Russia</a></li>
<li><a href="#rwanda">Rwanda</a></li>
<li><a href="#st-kitts-nevis">Saint Kitts and Nevis</a></li>
<li><a href="#st-lucia">Saint Lucia</a></li>
<li><a href="#st-vincent-grenadines">Saint Vincent and the Grenadines</a></li>
<li><a href="#san-marino">San Marino</a></li>
<li><a href="#saudi-arabia">Saudi Arabia</a></li>
<li><a href="#scotland">Scotland</a></li>
<li><a href="#senegal">Senegal</a></li>
<li><a href="#serbia">Serbia</a></li>
<li><a href="#seychelles">Seychelles</a></li>
<li><a href="#sierra-leone">Sierra Leone</a></li>
<li><a href="#singapore">Singapore</a></li>
<li><a href="#slovakia">Slovakia</a></li>
<li><a href="#slovenia">Slovenia</a></li>
<li><a href="#somalia">Somalia</a></li>
<li><a href="#south-africa">South Africa</a></li>
<li><a href="#south-korea">South Korea</a></li>
<li><a href="#south-sudan">South Sudan</a></li>
<li><a href="#spain">Spain</a></li>
<li><a href="#sri-lanka">Sri Lanka</a></li>
<li><a href="#sudan">Sudan</a></li>
<li><a href="#suriname">Suriname</a></li>
<li><a href="#swaziland">Swaziland</a></li>
<li><a href="#sweden">Sweden</a></li>
<li><a href="#switzerland">Switzerland</a></li>
<li><a href="#syria">Syria</a></li>
<li><a href="#taiwan">Taiwan</a></li>
<li><a href="#tajikistan">Tajikistan</a></li>
<li><a href="#tanzania">Tanzania</a></li>
<li><a href="#thailand">Thailand</a></li>
<li><a href="#togo">Togo</a></li>
<li><a href="#trinidad-tobago">Trinidad and Tobago</a></li>
<li><a href="#tunisia">Tunisia</a></li>
<li><a href="#turkey">Turkey</a></li>
<li><a href="#turkmenistan">Turkmenistan</a></li>
<li><a href="#uganda">Uganda</a></li>
<li><a href="#ukraine">Ukraine</a></li>
<li><a href="#united-arab-emirates">United Arab Emirates</a></li>
<li><a href="#united-kingdom" class="todo todo--partial">United Kingdom</a></li>
<li><a href="#usa">United States of America</a></li>
<li><a href="#uruguay">Uruguay</a></li>
<li><a href="#uzbekistan">Uzbekistan</a></li>
<li><a href="#venezuela">Venezuela</a></li>
<li><a href="#vietnam">Vietnam</a></li>
<li><a href="#wales">Wales</a></li>
<li><a href="#yemen">Yemen</a></li>
<li><a href="#zambia">Zambia</a></li>
<li><a href="#zimbabwe">Zimbabwe</a></li>
</ol>
<div class="flag flag--afghanistan" id="afghanistan" title="Afghanistan">
<img src="http://www.vexilla-mundi.com/afghanistan/afghanistan_detail.png" alt="" id="afghanistan_coat">
</div>
<div class="flag flag--albania" id="albania" title="Albania">
<img src="http://www.vexilla-mundi.com/albania/albania_detail.png" alt="" id="albania_coat">
</div>
<div class="flag flag--algeria" id="algerie" title="Algeria">
<div class="star__container">
<div class="star__spikes star__spikes--5"></div>
</div>
</div>
<div class="flag flag--andorra" id="andorra" title="Andorra">
<img src="https://upload.wikimedia.org/wikipedia/commons/4/4e/Coat_of_arms_of_Andorra.svg" alt="" id="andorra_coat">
</div>
<div class="flag flag--angola" id="angola" title="Angola">
<img src="http://www.vexilla-mundi.com/angola/angola_detail.png" alt="" id="angola_coat">
</div>
<div class="flag flag--argentina" id="argentina" title="Argentina">
<img src="https://upload.wikimedia.org/wikipedia/commons/9/9d/Sol_de_Mayo-Bandera_de_Argentina.svg" alt="" id="argentina_coat" />
</div>
<div class="flag flag--armenia" id="armenia" title="Armenia"></div>
<div class="flag flag--australia-aboriginal" id="australia-aboriginal" title="Australia-aboriginal"></div>
<div class="flag flag--austria" id="austria" title="Austria"></div>
<div class="flag flag--azerbaijan" id="azerbaijan" title="Azerbaijan">
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="600">
<path d="M680,250 689.567,276.903 715.355,264.645 703.097,290.433 730,300 703.097,309.567 715.355,335.355 689.567,323.097 680,350 670.433,323.097 644.645,335.355 656.903,309.567 630,300 656.903,290.433 644.645,264.645 670.433,276.903 680,250z" fill="#fff"/>
</svg>
</div>
<div class="flag flag--bahamas" id="bahamas" title="Bahamas"></div>
<div class="flag flag--bahrain" id="bahrain" title="Bahrain">
<div class="triangle triangle--1"></div>
<div class="triangle triangle--2"></div>
<div class="triangle triangle--3"></div>
<div class="triangle triangle--4"></div>
<div class="triangle triangle--5"></div>
</div>
<div class="flag flag--belgium" id="belgium" title="Belgium"></div>
<div class="flag flag--bengladesh" id="bengladesh" title="Bengladesh"></div>
<div class="flag flag--benin" id="benin" title="Benin"></div>
<div class="flag flag--bhutan" id="bhutan" title="Bhutan">
<img src="http://www.vexilla-mundi.com/bhutan/bhutan_detail.png" alt="" id="bhutan_coat" />
</div>
<div class="flag flag--bolivia" id="bolivia" title="Bolivia"></div>
<div class="flag flag--bosnia-herzegovina" id="bosnia-herzegovina" title="Bosnia and Herzegovina">
<div class="star__container star-1">
<div class="star__spikes star__spikes--5"></div>
</div>
<div class="star__container star-2">
<div class="star__spikes star__spikes--5"></div>
</div>
<div class="star__container star-3">
<div class="star__spikes star__spikes--5"></div>
</div>
<div class="star__container star-4">
<div class="star__spikes star__spikes--5"></div>
</div>
<div class="star__container star-5">
<div class="star__spikes star__spikes--5"></div>
</div>
<div class="star__container star-6">
<div class="star__spikes star__spikes--5"></div>
</div>
<div class="star__container star-7">
<div class="star__spikes star__spikes--5"></div>
</div>
<div class="star__container star-8">
<div class="star__spikes star__spikes--5"></div>
</div>
<div class="star__container star-9">
<div class="star__spikes star__spikes--5"></div>
</div>
</div>
<div class="flag flag--botswana" id="botswana" title="Botswana"></div>
<div class="flag flag--brazil" id="brazil" title="Brazil">
<img src="http://www.vexilla-mundi.com/brazil/brazil_detail.png" alt="" id="brazil_coat">
</div>
<div class="flag flag--brunei" id="brunei" title="Brunei">
<img src="http://www.vexilla-mundi.com/brunei/brunei_detail.png" alt="" id="brunei_coat">
</div>
<div class="flag flag--bulgaria" id="bulgaria" title="Bulgaria"></div>
<div class="flag flag--burkina-faso" id="burkina-faso" title="Burkina Faso"> <div class="star__container star-1">
<div class="star__spikes star__spikes--5"></div>
</div>
</div>
<div class="flag flag--cambodia" id="cambodia" title="Cambodia">
<img src="http://www.vexilla-mundi.com/cambodia/cambodia_detail.png" alt="" id="cambodia_coat">
</div>
<div class="flag flag--cameroon" id="cameroon" title="Cameroon">
<div class="star__container star-1">
<div class="star__spikes star__spikes--5"></div>
</div>
</div>
<div class="flag flag--canada" id="canada" title="Canada">
<img src="https://upload.wikimedia.org/wikipedia/commons/f/fd/Maple_Leaf.svg" id="canada_leaf" alt="Red maple leaf" />
</div>
<div class="flag flag--cape-verde" id="cape-verde" title="Cape Verde">
<div class="star__container star-1">
<div class="star__spikes star__spikes--5"></div>
</div>
<div class="star__container star-2">
<div class="star__spikes star__spikes--5"></div>
</div>
<div class="star__container star-3">
<div class="star__spikes star__spikes--5"></div>
</div>
<div class="star__container star-4">
<div class="star__spikes star__spikes--5"></div>
</div>
<div class="star__container star-5">
<div class="star__spikes star__spikes--5"></div>
</div>
<div class="star__container star-6">
<div class="star__spikes star__spikes--5"></div>
</div>
<div class="star__container star-7">
<div class="star__spikes star__spikes--5"></div>
</div>
<div class="star__container star-8">
<div class="star__spikes star__spikes--5"></div>
</div>
<div class="star__container star-9">
<div class="star__spikes star__spikes--5"></div>
</div>
<div class="star__container star-10">
<div class="star__spikes star__spikes--5"></div>
</div>
</div>
<div class="flag flag--central-african-republic" id="central-african-republic" title="Central African Republic">
<div class="star__container star-1">
<div class="star__spikes star__spikes--5"></div>
</div>
</div>
<div class="flag flag--chad" id="chad" title="Chad"></div>
<div class="flag flag--chile" id="chile" title="Chile">
<div class="star__container star-1">
<div class="star__spikes star__spikes--5"></div>
</div>
</div>
<div class="flag flag--china" title="China" id="china">
<div class="star__container star-0">
<div class="star__spikes star__spikes--5"></div>
</div>
<div class="star__container star-1">
<div class="star__spikes star__spikes--5"></div>
</div>
<div class="star__container star-2">
<div class="star__spikes star__spikes--5"></div>
</div>
<div class="star__container star-3">
<div class="star__spikes star__spikes--5"></div>
</div>
<div class="star__container star-4">
<div class="star__spikes star__spikes--5"></div>
</div>
</div>
<div class="flag flag--comoros" id="comoros" title="Comoros">
<div class="canton">
<div class="star__container star-1">
<div class="star__spikes star__spikes--5"></div>
</div>
<div class="star__container star-2">
<div class="star__spikes star__spikes--5"></div>
</div>
<div class="star__container star-3">
<div class="star__spikes star__spikes--5"></div>
</div>
<div class="star__container star-4">
<div class="star__spikes star__spikes--5"></div>
</div>
</div>
</div>
<div class="flag flag--colombia" id="colombia" title="Colombia"></div>
<div class="flag flag--congo-brazzaville" id="congo-brazzaville" title="Congo Brazzaville"></div>
<div class="flag flag--congo-kinshasa" id="congo-kinshasa" title="Congo Kinshasa">
<div class="star__container star-1">
<div class="star__spikes star__spikes--5"></div>
</div>
</div>
<div class="flag flag--cornwall" id="cornwall" title="Cornwall"></div>
<div class="flag flag--costa-rica" id="costa-rica" title="Costa Rica"></div>
<div class="flag flag--croatia" id="croatia" title="Croatia">
<img src="https://upload.wikimedia.org/wikipedia/commons/c/c9/Coat_of_arms_of_Croatia.svg" alt="" id="croatia_coat" />
</div>
<div class="flag flag--cuba" id="cuba" title="Cuba">
<div class="star__container star-1">
<div class="star__spikes star__spikes--5"></div>
</div>
</div>
<div class="flag flag--curacao" id="curacao" title="Curaçao">
<div class="star__container star-1">
<div class="star__spikes star__spikes--5"></div>
</div>
<div class="star__container star-2">
<div class="star__spikes star__spikes--5"></div>
</div>
</div>
<div class="flag flag--cyprus" id="cyprus" title="Cyprus">
<img src="https://upload.wikimedia.org/wikipedia/commons/d/d4/Flag_of_Cyprus.svg" alt="" id="cyprus_coat">
</div>
<div class="flag flag--czech" id="czech" title="Czech"></div>
<div class="flag flag--denmark" id="denmark" title="Denmark"></div>
<div class="flag flag--djibouti" id="djibouti" title="Djibouti">
<div class="star__container star-1">
<div class="star__spikes star__spikes--5"></div>
</div>
</div>
<div class="flag flag--dominican-republic" id="dominican-republic" title="Dominican Republic">
<img src="https://upload.wikimedia.org/wikipedia/commons/2/26/Coat_of_arms_of_the_Dominican_Republic.svg" alt="" id="dominican-republic_coat">
</div>
<div class="flag flag--east-timor" id="east-timor" title="East Timor">
<div class="canton"></div>
<div class="star__container star-1">
<div class="star__spikes star__spikes--5"></div>
</div>
</div>
<div class="flag flag--ecuador" id="ecuador" title="Ecuador">
<img src="https://upload.wikimedia.org/wikipedia/commons/e/e7/Coat_of_arms_of_Ecuador.svg" alt="" id="ecuador_coat">
</div>
<div class="flag flag--egypt" id="egypt" title="Egypt">
<img src="https://upload.wikimedia.org/wikipedia/commons/c/c2/Coat_of_arms_of_Egypt_%28on_flag%29.svg" alt="" id="egypt_coat">
</div>
<div class="flag flag--el-salvador" id="el-salvador" title="El Salvador">
<img src="https://upload.wikimedia.org/wikipedia/commons/a/ae/%E8%90%A8%E5%B0%94%E7%93%A6%E5%A4%9A%E5%9B%BD%E5%BE%BD.png" alt="" id="el-salvador_coat">
</div>
<div class="flag flag--england" id="england" title="England"></div>
<div class="flag flag--equatorial-guinea" id="equatorial-guinea" title="Equatorial Guinea">
<img src="https://upload.wikimedia.org/wikipedia/commons/f/f8/Coat_of_arms_of_Equatorial_Guinea.svg" alt="" id="equatorial-guinea_coat">
</div>
<div class="flag flag--estonia" id="estonia" title="Estonia"></div>
<div class="flag flag--ethiopia" id="ethiopia" title="Ethiopia">
<img src="https://upload.wikimedia.org/wikipedia/commons/3/3f/Emblem_of_Ethiopia.svg" alt="" id="ethiopia_coat">
</div>
<div class="flag flag--faroe" id="faroe" title="Faroe Islands"></div>
<div class="flag flag--finland" id="finland" title="Finland"></div>
<div class="flag flag--france" id="france" title="France"></div>
<div class="flag flag--gabon" id="gabon" title="Gabon"></div>
<div class="flag flag--gambia" id="gambia" title="The Gambia"></div>
<div class="flag flag--georgia" id="georgia" title="Georgia">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 300 200">
<defs>
<g id="smallcross"><clipPath id="vclip"><path d="M-109,104 a104,104 0 0,0 0,-208 H109 a104,104 0 0,0 0,208 z"/></clipPath><path id="varm" d="M-55,74 a55,55 0 0,1 110,0 V-74 a55,55 0 0,1 -110,0 z" clip-path="url(#vclip)"/>
<use xlink:href="#varm" transform="rotate(90)"/></g>
</defs>
<use xlink:href="#smallcross" transform="translate(64.45,39.45)" fill="#f00"/>
<use xlink:href="#smallcross" transform="translate(235.55,160.55)" fill="#f00"/>
<use xlink:href="#smallcross" transform="translate(235.55,39.45)" fill="#f00"/>
<use xlink:href="#smallcross" transform="translate(64.45,160.55)" fill="#f00"/>
</svg>
</div>
<div class="flag flag--germany" id="germany" title="Germany"></div>
<div class="flag flag--ghana" id="ghana" title="The Ghana">
<div class="star__container star-1">
<div class="star__spikes star__spikes--5"></div>
</div>
</div>
<div class="flag flag--greece" id="greece" title="Greece"></div>
<div class="flag flag--greenland" id="greenland" title="Greenland"></div>
<div class="flag flag--guatemala" id="guatemala" title="Guatemala">
<img src="https://upload.wikimedia.org/wikipedia/commons/1/15/Coat_of_arms_of_Guatemala.svg" alt="" id="guatemala_coat">
</div>
<div class="flag flag--guinea" id="guinea" title="Guinea"></div>
<div class="flag flag--guinea-bissau" id="guinea-bissau" title="Guinea Bissau">
<div class="star__container star-1">
<div class="star__spikes star__spikes--5"></div>
</div>
</div>
<div class="flag flag--guyana" id="guyana" title="Guyana"></div>
<div class="flag flag--haiti" id="haiti" title="Haiti">
<img src="https://upload.wikimedia.org/wikipedia/commons/7/75/Coat_of_arms_of_Haiti.svg" alt="" id="haiti_coat">
</div>
<div class="flag flag--honduras" id="honduras" title="Honduras">
<div class="star__container star-1">
<div class="star__spikes star__spikes--5"></div>
</div>
<div class="star__container star-2">
<div class="star__spikes star__spikes--5"></div>
</div>
<div class="star__container star-3">
<div class="star__spikes star__spikes--5"></div>
</div>
<div class="star__container star-4">
<div class="star__spikes star__spikes--5"></div>
</div>
<div class="star__container star-5">
<div class="star__spikes star__spikes--5"></div>
</div>
</div>
<div class="flag flag--hungary" id="hungary" title="Hungary"></div>
<div class="flag flag--iceland" id="iceland" title="Iceland"></div>
<div class="flag flag--india" id="india" title="India">
<span id="india_ashoka"></span>
</div>
<div class="flag flag--indonesia" id="indonesia" title="Indonesia"></div>
<div class="flag flag--iran" id="iran" title="Iran">
<img src="https://upload.wikimedia.org/wikipedia/commons/a/aa/Allahu_akbar_Kufic.svg" alt="" class="iran__kufi-script iran__kufi-script--green" /><img src="https://upload.wikimedia.org/wikipedia/commons/a/aa/Allahu_akbar_Kufic.svg" alt="" class="iran__kufi-script iran__kufi-script--green" /><img src="https://upload.wikimedia.org/wikipedia/commons/a/aa/Allahu_akbar_Kufic.svg" alt="" class="iran__kufi-script iran__kufi-script--green" /><img src="https://upload.wikimedia.org/wikipedia/commons/a/aa/Allahu_akbar_Kufic.svg" alt="" class="iran__kufi-script iran__kufi-script--green" /><img src="https://upload.wikimedia.org/wikipedia/commons/a/aa/Allahu_akbar_Kufic.svg" alt="" class="iran__kufi-script iran__kufi-script--green" /><img src="https://upload.wikimedia.org/wikipedia/commons/a/aa/Allahu_akbar_Kufic.svg" alt="" class="iran__kufi-script iran__kufi-script--green" /><img src="https://upload.wikimedia.org/wikipedia/commons/a/aa/Allahu_akbar_Kufic.svg" alt="" class="iran__kufi-script iran__kufi-script--green" /><img src="https://upload.wikimedia.org/wikipedia/commons/a/aa/Allahu_akbar_Kufic.svg" alt="" class="iran__kufi-script iran__kufi-script--green" /><img src="https://upload.wikimedia.org/wikipedia/commons/a/aa/Allahu_akbar_Kufic.svg" alt="" class="iran__kufi-script iran__kufi-script--green" /><img src="https://upload.wikimedia.org/wikipedia/commons/a/aa/Allahu_akbar_Kufic.svg" alt="" class="iran__kufi-script iran__kufi-script--green" /><img src="https://upload.wikimedia.org/wikipedia/commons/a/aa/Allahu_akbar_Kufic.svg" alt="" class="iran__kufi-script iran__kufi-script--green" />
<img src="https://upload.wikimedia.org/wikipedia/commons/a/aa/Allahu_akbar_Kufic.svg" alt="" class="iran__kufi-script iran__kufi-script--red" /><img src="https://upload.wikimedia.org/wikipedia/commons/a/aa/Allahu_akbar_Kufic.svg" alt="" class="iran__kufi-script iran__kufi-script--red" /><img src="https://upload.wikimedia.org/wikipedia/commons/a/aa/Allahu_akbar_Kufic.svg" alt="" class="iran__kufi-script iran__kufi-script--red" /><img src="https://upload.wikimedia.org/wikipedia/commons/a/aa/Allahu_akbar_Kufic.svg" alt="" class="iran__kufi-script iran__kufi-script--red" /><img src="https://upload.wikimedia.org/wikipedia/commons/a/aa/Allahu_akbar_Kufic.svg" alt="" class="iran__kufi-script iran__kufi-script--red" /><img src="https://upload.wikimedia.org/wikipedia/commons/a/aa/Allahu_akbar_Kufic.svg" alt="" class="iran__kufi-script iran__kufi-script--red" /><img src="https://upload.wikimedia.org/wikipedia/commons/a/aa/Allahu_akbar_Kufic.svg" alt="" class="iran__kufi-script iran__kufi-script--red" /><img src="https://upload.wikimedia.org/wikipedia/commons/a/aa/Allahu_akbar_Kufic.svg" alt="" class="iran__kufi-script iran__kufi-script--red" /><img src="https://upload.wikimedia.org/wikipedia/commons/a/aa/Allahu_akbar_Kufic.svg" alt="" class="iran__kufi-script iran__kufi-script--red" /><img src="https://upload.wikimedia.org/wikipedia/commons/a/aa/Allahu_akbar_Kufic.svg" alt="" class="iran__kufi-script iran__kufi-script--red" /><img src="https://upload.wikimedia.org/wikipedia/commons/a/aa/Allahu_akbar_Kufic.svg" alt="" class="iran__kufi-script iran__kufi-script--red" />
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500" height="491.927" viewBox="-1 -0.967708 2 1.967708" id="iran_coat">
<g id="emblem_half" fill="#db0000">
<path d="M-0.54815,0.83638A0.912046,0.912046 0 0,0 0.328544,-0.722384A1,1 0 0,1 -0.54815,0.83638"/>
<path d="M0.618339,0.661409A0.763932,0.763932 0 0,0 0.421644,-0.741049A1,1 0 0,1 0.618339,0.661409"/>
<path d="M0,1 -0.05,0 0,-0.787278A0.309995,0.309995 0 0,0 0.118034,-0.688191V-0.100406L0.077809,0.892905z"/>
<path d="M-0.02,-0.85 0,-0.831217A0.14431,0.14431 0 0,0 0.252075,-0.967708A0.136408,0.136408 0 0,1 0,-0.924634"/>
</g>
<use xlink:href="#emblem_half" transform="scale(-1,1)"/>
</svg>
</div>
<div class="flag flag--iraq" id="iraq" title="Iraq">
<img src="http://www.vexilla-mundi.com/iraq/iraq_detail.png" alt="" id="iraq_coat" />
</div>
<div class="flag flag--ireland" id="ireland" title="Ireland"></div>
<div class="flag flag--italy" id="italy" title="Italy"></div>
<div class="flag flag--ivory-coast" id="ivory-coast" title="Ivory Coast"></div>
<div class="flag flag--jamaica" id="jamaica" title="Jamaica"></div>
<div class="flag flag--japan" id="japan" title="Japan"></div>
<div class="flag flag--jordan" id="jordan" title="Jordan">
<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:xl="http://www.w3.org/1999/xlink" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="31.287327 66.83333 333.42535 325.06568" width="333.42535" height="325.06568" class="star-7">
<g id="Graphic_17">
<path d="M 198 76.5 L 224.84807 182.7494 L 324.6567 137.49465 L 258.32707 224.73074 L 355.93832 274.5484 L 246.37855 277.0806 L 268.28917 384.45696 L 198 300.3785 L 127.71083 384.45696 L 149.62145 277.0806 L 40.06168 274.5484 L 137.67293 224.73074 L 71.3433 137.49465 L 171.15193 182.7494 Z" />
</g>
</svg>
</div>
<div class="flag flag--kazakhstan" id="kazakhstan" title="Kazakhstan">
<img src="http://www.vexilla-mundi.com/kazakhstan/kazakhstan_detail2.png" alt="" id="kazakhstan_coat-1">
<img src="http://www.vexilla-mundi.com/kazakhstan/kazakhstan_detail1.png" alt="" id="kazakhstan_coat-2">
</div>
<div class="flag flag--kenya" id="kenya" title="Kenya">
<img src="https://upload.wikimedia.org/wikipedia/commons/e/e2/Flag_of_Kenya_%28shield%29.svg" alt="" id="kenya_coat">
</div>
<div class="flag flag--kuwait" id="kuwait" title="Kuwait"></div>
<div class="flag flag--kyrgyzstan" id="kyrgyzstan" title="Kyrgyzstan">
<img src="http://www.vexilla-mundi.com/kyrgyzstan/kyrgyzstan_detail.png" alt="" id="kyrgyzstan_coat">
</div>
<div class="flag flag--laos" id="laos" title="Laos"></div>
<div class="flag flag--latvia" id="latvia" title="Latvia"></div>
<div class="flag flag--lebanon" id="lebanon" title="Lebanon">
<img src="http://www.vexilla-mundi.com/lebanon/lebanon_detail.png" alt="" id="lebanon_coat" />
</div>
<div class="flag flag--lesotho" id="lesotho" title="Lesotho">
<img src="https://fotw.info/images/l/ls)hat2006.gif" alt="" id="lesotho_coat" />
</div>
<div class="flag flag--liberia" id="liberia" title="Liberia">
<div class="canton">
<div class="star__container star-1">
<div class="star__spikes star__spikes--5"></div>
</div>
</div>
</div>
<div class="flag flag--liechtenstein" id="liechtenstein" title="Liechtenstein"></div>
<div class="flag flag--lithuania" id="lithuania" title="Lithuania"></div>
<div class="flag flag--luxembourg" id="luxembourg" title="Luxembourg"></div>
<div class="flag flag--lybia" id="lybia" title="Lybia">
<div class="star__container star-1">
<div class="star__spikes star__spikes--5"></div>
</div>
</div>
<div class="flag flag--macedonia" id="macedonia" title="Macedonia"></div>
<div class="flag flag--madagascar" id="madagascar" title="Madagascar"></div>
<div class="flag flag--malaysia" id="malaysia" title="Malaysia">
<div class="canton"></div>
</div>
<div class="flag flag--malawi" id="malawi" title="Malawi">
<img src="http://www.vexilla-mundi.com/malawi/malawi_detail.png" alt="" id="malawi_coat" />
</div>
<div class="flag flag--maldives" id="maldives" title="Maldives"></div>
<div class="flag flag--mali" id="mali" title="Mali"></div>
<div class="flag flag--malta" id="malta" title="Malta">
<img src="http://www.vexilla-mundi.com/malta/malta_detail.png" alt="" id="malta_coat" />
</div>
<div class="flag flag--mauritania" id="mauritania" title="Mauritania">
<div class="star__container star-1">
<div class="star__spikes star__spikes--5"></div>
</div>
</div>
<div class="flag flag--mauritius" id="mauritius" title="Mauritius"></div>
<div class="flag flag--mexico" id="mexico" title="Mexico">
<img src="https://upload.wikimedia.org/wikipedia/commons/2/2a/Coat_of_arms_of_Mexico.svg" alt="" id="mexico_coat" />
</div>
<div class="flag flag--moldova" id="moldova" title="Moldova">
<img src="https://upload.wikimedia.org/wikipedia/commons/a/a3/Coat_of_arms_of_Moldova.svg" alt="" id="moldova_coat">
</div>
<div class="flag flag--monaco" id="monaco" title="Monaco"></div>
<div class="flag flag--mongolia" id="mongolia" title="Mongolia">
<img src="http://www.vexilla-mundi.com/mongolia/mongolia_detail.png" alt="" id="mongolia_coat">
</div>
<div class="flag flag--montenegro" id="montenegro" title="Montenegro">
<img src="https://upload.wikimedia.org/wikipedia/commons/2/23/Coat_of_arms_of_Montenegro.svg" alt="" id="montenegro_coat">
</div>
<div class="flag flag--morocco" id="morocco" title="Morocco">
<div class="star__container star-1">
<div class="star__spikes star__spikes--5"></div>
</div>
</div>
<div class="flag flag--mozambique" id="mozambique" title="Mozambique">
<img src="http://www.vexilla-mundi.com/mozambique/mozambique_detail.png" alt="" id="mozambique_coat">
</div>
<div class="flag flag--myanmar" id="myanmar" title="Myanmar">
<div class="star__container star-1">
<div class="star__spikes star__spikes--5"></div>
</div>
</div>
<div class="flag flag--namibia" id="namibia" title="Namibia">
<img src="" alt="" id="namibia_coat">
</div>
<div class="flag flag--netherlands" id="netherlands" title="Netherlands"></div>
<div class="flag flag--nicaragua" id="nicaragua" title="Nicaragua">
<img src="https://upload.wikimedia.org/wikipedia/commons/c/cc/Coat_of_arms_of_Nicaragua.svg" alt="" id="nicaragua_coat">
</div>
<div class="flag flag--niger" id="niger" title="Niger"></div>
<div class="flag flag--nigeria" id="nigeria" title="Nigeria"></div>
<div class="flag flag--north-korea" id="north-korea" title="North Korea">
<div class="star__container star-1">
<div class="star__spikes star__spikes--5"></div>
</div>
</div>
<div class="flag flag--norway" id="norway" title="Norway"></div>
<div class="flag flag--oman" id="oman" title="Oman">
<img src="http://www.vexilla-mundi.com/oman/oman_detail.png" alt="" id="oman_coat">
</div>
<div class="flag flag--pakistan" id="pakistan" title="Pakistan">
<div class="star__container">
<div class="star__spikes star__spikes--5"></div>
</div>
</div>
<div class="flag flag--palau" id="palau" title="Palau"></div>
<div class="flag flag--palestine" id="palestine" title="Palestine"></div>
<div class="flag flag--panama" id="panama" title="Panama">
<div class="star__container star-1">
<div class="star__spikes star__spikes--5"></div>
</div>
<div class="star__container star-2">
<div class="star__spikes star__spikes--5"></div>
</div>
</div>
<div class="flag flag--papua-new-guinea" id="papua-new-guinea" title="Papua New Guinea">
<img src="http://www.vexilla-mundi.com/papua_new_guinea/papua_new_guinea_detail.png" alt="" id="papua-new-guinea_coat">
<div class="star__container star-1">
<div class="star__spikes star__spikes--5"></div>
</div>
<div class="star__container star-2">
<div class="star__spikes star__spikes--5"></div>
</div>
<div class="star__container star-3">
<div class="star__spikes star__spikes--5"></div>
</div>
<div class="star__container star-4">
<div class="star__spikes star__spikes--5"></div>
</div>
<div class="star__container star-5">
<div class="star__spikes star__spikes--5"></div>
</div>
</div>
<div class="flag flag--paraguay" id="paraguay" title="Paraguay">
<img src="https://upload.wikimedia.org/wikipedia/commons/7/70/Coat_of_arms_of_Paraguay.svg" alt="" id="paraguay_coat">
</div>
<div class="flag flag--paraguay" id="paraguay2" title="Paraguay - reverse">
<img src="https://upload.wikimedia.org/wikipedia/commons/9/9c/Coat_of_arms_of_Paraguay_%28reverse%29.svg" alt="" id="paraguay_coat">
</div>
<div class="flag flag--peru" id="peru" title="Peru"></div>
<div class="flag flag--philippines" id="philippines" title="Philippines">
<div class="star__container star-1">
<div class="star__spikes star__spikes--5"></div>
</div>
<div class="star__container star-2">
<div class="star__spikes star__spikes--5"></div>
</div>
<div class="star__container star-3">
<div class="star__spikes star__spikes--5"></div>
</div>
<img src="https://upload.wikimedia.org/wikipedia/commons/5/5a/Sun_Symbol_of_the_National_Flag_of_the_Philippines.svg" alt="" id="philippines_coat">
</div>
<div class="flag flag--poland" id="poland" title="Poland"></div>
<div class="flag flag--portugal" id="portugal" title="Portugal">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Coat_of_arms_of_Portugal_%28Lesser%29.svg/480px-Coat_of_arms_of_Portugal_%28Lesser%29.svg.png" alt="" id="portugal_coat" />
</div>
<div class="flag flag--puerto-rico" id="puerto-rico" title="Puerto Rico">
<div class="star__container star-1">
<div class="star__spikes star__spikes--5"></div>
</div>
</div>
<div class="flag flag--qatar" id="qatar" title="Qatar">
<div class="triangle triangle--1"></div>
<div class="triangle triangle--2"></div>
<div class="triangle triangle--3"></div>
<div class="triangle triangle--4"></div>
<div class="triangle triangle--5"></div>
<div class="triangle triangle--6"></div>
<div class="triangle triangle--7"></div>
<div class="triangle triangle--8"></div>
<div class="triangle triangle--9"></div>
</div>
<div class="flag flag--romania" id="romania" title="Romania"></div>
<div class="flag flag--russia" id="russia" title="Russia"></div>
<div class="flag flag--rwanda" id="rwanda" title="Rwanda">
<img src="http://www.vexilla-mundi.com/rwanda/rwanda_detail.png" alt="" id="rwanda_coat" />
</div>
<div class="flag flag--st-kitts-nevis" id="st-kitts-nevis" title="Saint Kitts and Nevis">
<div class="star__container star-1">
<div class="star__spikes star__spikes--5"></div>
</div>
<div class="star__container star-2">
<div class="star__spikes star__spikes--5"></div>
</div>
</div>
<div class="flag flag--st-lucia" id="st-lucia" title="Saint Lucia">
<div class="canton"></div>
</div>
<div class="flag flag--st-vincent-grenadines" id="st-vincent-grenadines" title="Saint Vincent Grenadines">
<div class="canton">
<div class="diamond"></div>
<div class="diamond"></div>
<div class="diamond"></div>
</div>
</div>
<div class="flag flag--san-marino" id="san-marino" title="San Marino">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4e/Coat_of_arms_of_San_Marino.svg/405px-Coat_of_arms_of_San_Marino.svg.png" alt="" id="san-marino_coat">
</div>
<div class="flag flag--saudi-arabia" id="saudi-arabia" title="Saudi Arabia">
<img src="http://www.vexilla-mundi.com/saudi_arabia/saudi_arabia_detail.png" alt="" id="saudi-arabia_coat">
</div>
<div class="flag flag--scotland" id="scotland" title="Scotland"></div>
<div class="flag flag--senegal" id="senegal" title="Senegal">
<div class="star__container star-1">
<div class="star__spikes star__spikes--5"></div>
</div>
</div>
<div class="flag flag--serbia" id="serbia" title="Serbia">
<img src="https://upload.wikimedia.org/wikipedia/commons/0/0f/Coat_of_arms_of_Serbia_small.svg" alt="" id="serbia_coat" />
</div>
<div class="flag flag--seychelles" id="seychelles" title="Seychelles"></div>
<div class="flag flag--sierra-leone" id="sierra-leone" title="Sierra Leone"></div>
<div class="flag flag--singapore" id="singapore" title="Singapore">
<div class="star__container star-1">
<div class="star__spikes star__spikes--5"></div>
</div>
<div class="star__container star-2">
<div class="star__spikes star__spikes--5"></div>
</div>
<div class="star__container star-3">
<div class="star__spikes star__spikes--5"></div>
</div>
<div class="star__container star-4">
<div class="star__spikes star__spikes--5"></div>
</div>
<div class="star__container star-5">
<div class="star__spikes star__spikes--5"></div>
</div>
</div>
<div class="flag flag--slovakia" id="slovakia" title="Slovakia">
<img src="https://upload.wikimedia.org/wikipedia/commons/d/d2/Coat_of_arms_of_Slovakia.svg" alt="" id="slovakia_coat" />
</div>
<div class="flag flag--slovenia" id="slovenia" title="Slovenia">
<img src="https://upload.wikimedia.org/wikipedia/commons/8/8f/Coat_of_arms_of_Slovenia.svg" alt="" id="slovenia_coat" />
</div>
<div class="flag flag--somalia" id="somalia" title="Somalia">
<div class="star__container star-1">
<div class="star__spikes star__spikes--5"></div>
</div>
</div>
<div class="flag flag--south-africa" id="south-africa" title="South Africa"></div>
<div class="flag flag--south-korea" id="south-korea" title="South Korea">
<div class="yin-yang"></div>
<div class="trigram trigram--1"></div>
<div class="trigram trigram--2"></div>
<div class="trigram trigram--3"></div>
<div class="trigram trigram--4"></div>
</div>
<div class="flag flag--south-sudan" id="south-sudan" title="South Sudan">
<div class="star__container star-1">
<div class="star__spikes star__spikes--5"></div>
</div>
</div>
<div class="flag flag--spain" id="spain" title="Spain">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/56/Coat_of_Arms_of_Spain_%28corrections_of_heraldist_requests%29.svg/217px-Coat_of_Arms_of_Spain_%28corrections_of_heraldist_requests%29.svg.png" id="spain_coat" alt="" />
</div>
<div class="flag flag--sri-lanka" id="sri-lanka" title="Sri Lanka">
<img src="http://www.vexilla-mundi.com/sri_lanka/sri_lanka_detail.png" id="sri-lanka_coat" alt="" />
</div>
<div class="flag flag--sudan" id="sudan" title="Sudan"></div>
<div class="flag flag--suriname" id="suriname" title="Suriname">
<div class="star__container star-1">
<div class="star__spikes star__spikes--5"></div>
</div>
</div>
<div class="flag flag--swaziland" id="swaziland" title="Swaziland">
<img src="http://www.vexilla-mundi.com/swaziland/swaziland_detail.png" alt="" id="swaziland_coat" />
</div>
<div class="flag flag--sweden" id="sweden" title="Sweden"></div>
<div class="flag flag--switzerland" id="switzerland" title="Switzerland"></div>
<div class="flag flag--syria" id="syria" title="Syria">
<div class="star__container star-1">
<div class="star__spikes star__spikes--5"></div>
</div>
<div class="star__container star-2">
<div class="star__spikes star__spikes--5"></div>
</div>
</div>
<div class="flag flag--taiwan" id="taiwan" title="Taiwan">
<div id="taiwan_coat">
<img src="https://upload.wikimedia.org/wikipedia/commons/8/8b/National_Emblem_of_the_Republic_of_China.svg" alt="">
</div>
</div>
<div class="flag flag--tajikistan" id="tajikistan" title="Tajikistan">
<img src="http://www.vexilla-mundi.com/tajikistan/tajikistan_detail.png" alt="" id="tajikistan_coat">
</div>
<div class="flag flag--tanzania" id="tanzania" title="Tanzania"></div>
<div class="flag flag--thailand" id="thailand" title="Thailand"></div>
<div class="flag flag--togo" id="togo" title="Togo">
<div class="canton">
<div class="star__container star-1">
<div class="star__spikes star__spikes--5"></div>
</div>
</div>
</div>
<div class="flag flag--trinidad-tobago" id="trinidad-tobago" title="Trinidad and Tobago"></div>
<div class="flag flag--tunisia" id="tunisia" title="Tunisia">
<div class="star__container">
<div class="star__spikes star__spikes--5"></div>
</div>
</div>
<div class="flag flag--turkey" id="turkey" title="Turkey">
<div class="star__container">
<div class="star__spikes star__spikes--5"></div>
</div>
</div>
<div class="flag flag--turkmenistan" id="turkmenistan" title="Turkmenistan">
<img src="http://www.vexilla-mundi.com/turkmenistan/turkmenistan_detail.png" alt="" id="turkmenistan_coat">
<div class="star__container star-1">
<div class="star__spikes star__spikes--5"></div>
</div>
<div class="star__container star-2">
<div class="star__spikes star__spikes--5"></div>
</div>
<div class="star__container star-3">
<div class="star__spikes star__spikes--5"></div>
</div>
<div class="star__container star-4">
<div class="star__spikes star__spikes--5"></div>
</div>
<div class="star__container star-5">
<div class="star__spikes star__spikes--5"></div>
</div>
</div>
<div class="flag flag--uganda" id="uganda" title="Uganda">
<div class="container">
<img src="https://b.kisscc0.com/20180816/ecq/kisscc0-flag-of-uganda-national-flag-country-grey-crowned-crane-5b760db897b169.1367370415344634166213.png" alt="" id="uganda_coat" />
</div>
</div>
<div class="flag flag--ukraine" id="ukraine" title="Ukraine"></div>
<div class="flag flag--united-arab-emirates" id="united-arab-emirates" title="United Arab Emirates"></div>
<div class="flag flag--united-kingdom" id="united-kingdom" title="United Kingdom"></div>
<div class="flag flag--usa" id="usa" title="United States of America">
<ul class="canton">
<li class="star__container star__container--5"><div class="star__spikes star__spikes--5"></div></li>
<li class="star__container"><div class="star__spikes star__spikes--5"></div></li>
<li class="star__container"><div class="star__spikes star__spikes--5"></div></li>
<li class="star__container"><div class="star__spikes star__spikes--5"></div></li>
<li class="star__container"><div class="star__spikes star__spikes--5"></div></li>
<li class="star__container"><div class="star__spikes star__spikes--5"></div></li>
<li class="star__container"><div class="star__spikes star__spikes--5"></div></li>
<li class="star__container"><div class="star__spikes star__spikes--5"></div></li>
<li class="star__container"><div class="star__spikes star__spikes--5"></div></li>
<li class="star__container"><div class="star__spikes star__spikes--5"></div></li>
<li class="star__container"><div class="star__spikes star__spikes--5"></div></li>
<li class="star__container"><div class="star__spikes star__spikes--5"></div></li>
<li class="star__container"><div class="star__spikes star__spikes--5"></div></li>
<li class="star__container"><div class="star__spikes star__spikes--5"></div></li>
<li class="star__container"><div class="star__spikes star__spikes--5"></div></li>
<li class="star__container"><div class="star__spikes star__spikes--5"></div></li>
<li class="star__container"><div class="star__spikes star__spikes--5"></div></li>
<li class="star__container"><div class="star__spikes star__spikes--5"></div></li>
<li class="star__container"><div class="star__spikes star__spikes--5"></div></li>
<li class="star__container"><div class="star__spikes star__spikes--5"></div></li>
<li class="star__container"><div class="star__spikes star__spikes--5"></div></li>
<li class="star__container"><div class="star__spikes star__spikes--5"></div></li>
<li class="star__container"><div class="star__spikes star__spikes--5"></div></li>
<li class="star__container"><div class="star__spikes star__spikes--5"></div></li>
<li class="star__container"><div class="star__spikes star__spikes--5"></div></li>
<li class="star__container"><div class="star__spikes star__spikes--5"></div></li>
<li class="star__container"><div class="star__spikes star__spikes--5"></div></li>
<li class="star__container"><div class="star__spikes star__spikes--5"></div></li>
<li class="star__container"><div class="star__spikes star__spikes--5"></div></li>
<li class="star__container"><div class="star__spikes star__spikes--5"></div></li>
<li class="star__container"><div class="star__spikes star__spikes--5"></div></li>
<li class="star__container"><div class="star__spikes star__spikes--5"></div></li>
<li class="star__container"><div class="star__spikes star__spikes--5"></div></li>
<li class="star__container"><div class="star__spikes star__spikes--5"></div></li>
<li class="star__container"><div class="star__spikes star__spikes--5"></div></li>
<li class="star__container"><div class="star__spikes star__spikes--5"></div></li>
<li class="star__container"><div class="star__spikes star__spikes--5"></div></li>
<li class="star__container"><div class="star__spikes star__spikes--5"></div></li>
<li class="star__container"><div class="star__spikes star__spikes--5"></div></li>
<li class="star__container"><div class="star__spikes star__spikes--5"></div></li>
<li class="star__container"><div class="star__spikes star__spikes--5"></div></li>
<li class="star__container"><div class="star__spikes star__spikes--5"></div></li>
<li class="star__container"><div class="star__spikes star__spikes--5"></div></li>
<li class="star__container"><div class="star__spikes star__spikes--5"></div></li>
<li class="star__container"><div class="star__spikes star__spikes--5"></div></li>
<li class="star__container"><div class="star__spikes star__spikes--5"></div></li>
<li class="star__container"><div class="star__spikes star__spikes--5"></div></li>
<li class="star__container"><div class="star__spikes star__spikes--5"></div></li>
<li class="star__container"><div class="star__spikes star__spikes--5"></div></li>
<li class="star__container"><div class="star__spikes star__spikes--5"></div></li>
</ul>
</div>
<div class="flag flag--uruguay" id="uruguay" title="Uruguay">
<img src="https://upload.wikimedia.org/wikipedia/commons/9/92/Sol_de_Mayo-Bandera_de_Uruguay.svg" id="uruguay_coat" alt="" />
</div>
<div class="flag flag--uzbekistan" id="uzbekistan" title="Uzbekistan">
<div class="star__container star-15">
<div class="star__spikes star__spikes--5"></div>
</div>
<div class="star__container star-14">
<div class="star__spikes star__spikes--5"></div>
</div>
<div class="star__container star-13">
<div class="star__spikes star__spikes--5"></div>
</div>
<div class="star__container star-25">
<div class="star__spikes star__spikes--5"></div>
</div>
<div class="star__container star-24">
<div class="star__spikes star__spikes--5"></div>
</div>
<div class="star__container star-23">
<div class="star__spikes star__spikes--5"></div>
</div>
<div class="star__container star-22">
<div class="star__spikes star__spikes--5"></div>
</div>
<div class="star__container star-35">
<div class="star__spikes star__spikes--5"></div>
</div>
<div class="star__container star-34">
<div class="star__spikes star__spikes--5"></div>
</div>
<div class="star__container star-33">
<div class="star__spikes star__spikes--5"></div>
</div>
<div class="star__container star-32">
<div class="star__spikes star__spikes--5"></div>
</div>
<div class="star__container star-31">
<div class="star__spikes star__spikes--5"></div>
</div>
</div>
<div class="flag flag--venezuela" id="venezuela" title="Venezuela">
<div class="star__container star-1">
<div class="star__spikes star__spikes--5"></div>
</div>
<div class="star__container star-2">
<div class="star__spikes star__spikes--5"></div>
</div>
<div class="star__container star-3">
<div class="star__spikes star__spikes--5"></div>
</div>
<div class="star__container star-4">
<div class="star__spikes star__spikes--5"></div>
</div>
<div class="star__container star-5">
<div class="star__spikes star__spikes--5"></div>
</div>
<div class="star__container star-6">
<div class="star__spikes star__spikes--5"></div>
</div>
<div class="star__container star-7">
<div class="star__spikes star__spikes--5"></div>
</div>
<div class="star__container star-8">
<div class="star__spikes star__spikes--5"></div>
</div>
</div>
<div class="flag flag--vietnam" id="vietnam" title="Vietnam">
<div class="star__container star-1">
<div class="star__spikes star__spikes--5"></div>
</div>
</div>
<div class="flag flag--wales" id="wales" title="Wales">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bb/Y_Ddraig_Goch_in_Flag_of_Wales.svg/2000px-Y_Ddraig_Goch_in_Flag_of_Wales.svg.png" id="wales_dragon" alt="Red dragon of Cadwaladr" />
</div>
<div class="flag flag--yemen" id="yemen" title="Yemen"></div>
<div class="flag flag--zambia" id="zambia" title="Zambia">
<img src="http://www.vexilla-mundi.com/zambia/zambia_detail.png" id="zambia_coat" alt="" />
</div>
<div class="flag flag--zimbabwe" id="zimbabwe" title="Zimbabwe">
<div class="canton">
<img src="http://www.vexilla-mundi.com/zimbabwe/zimbabwe_detail.png" id="zimbabwe_coat" alt="" />
</div>
</div>
<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:xl="http://www.w3.org/1999/xlink" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="31.287327 66.83333 333.42535 325.06568" width="333.42535" height="325.06568" class="star-7">
<g id="Graphic_17">
<path d="M 198 76.5 L 224.84807 182.7494 L 324.6567 137.49465 L 258.32707 224.73074 L 355.93832 274.5484 L 246.37855 277.0806 L 268.28917 384.45696 L 198 300.3785 L 127.71083 384.45696 L 149.62145 277.0806 L 40.06168 274.5484 L 137.67293 224.73074 L 71.3433 137.49465 L 171.15193 182.7494 Z" />
</g>
</svg>
<div class="yin-yang"></div>@mixin stripes($direction, $colours...) {
$length: length($colours);
$stripes: ();
@for $i from 1 through $length {
$stripes: append($stripes, nth($colours, $i) calc(100% / #{$length} * (#{$i} - 1)), comma);
$stripes: append($stripes, nth($colours, $i) calc(100% / #{$length} * #{$i}), comma);
}
background-image: linear-gradient($direction, $stripes);
}
@mixin stripesOdd($direction, $colours...) {
$length: length($colours);
$stripes: ();
@for $i from 1 through $length {
@if $i % 2 == 0 {
$stripes: append($stripes, nth($colours, $i) nth($colours, $i - 1), comma);
$stripes: append($stripes, nth($colours, $i) nth($colours, $i + 1), comma);
}
}
background-image: linear-gradient($direction, $stripes);
}
:root {
--black: #000;
--white: #fff;
}
.flag {
$w: 25vw;
margin: 1rem auto;
box-shadow: 0.35rem 0.35rem 1.5rem rgba(0, 0, 0, 0.5);
width: $w;
height: calc(#{$w} / 3 * 2);
background-color: transparent;
transition: 0.3s ease;
&:hover {
transform: scale(1.01);
box-shadow: 0.5rem 0.5rem 1.2rem rgba(0, 0, 0, 0.45);
}
&::after {
display: none;
position: absolute;
top: 0;
left: 0;
margin: 1rem;
content: attr(title);
text-shadow: 0 0 3px white;
font-family: sans-serif;
font-weight: 600;
}
&:hover::after {
display: block;
z-index: 10;
}
$horizontal: to right;
$vertical: to bottom;
$w16: calc(100 / 6 * 1%);
$w20: 20%;
$w25: 25%;
$w33: calc(100 / 3 * 1%);
$w40: 40%;
$w50: 50%;
$w60: 60%;
$w66: calc(100 / 3 * 2 * 1%);
$w75: 75%;
$w80: 80%;
$w84: calc(100 / 6 * 5 * 1%);
&--afghanistan {
--green: #006341;
--red: #c8102e;
position: relative;
@include stripes($horizontal, var(--black), var(--red), var(--green));
#afghanistan_coat {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: calc(#{$w} / 3 * 2 / 12 * 7);
height: auto;
}
}
&--albania {
--red: #e5181a;
position: relative;
height: calc(#{$w} / 7 * 5);
background-color: var(--red);
#albania_coat {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: calc(#{$w} / 7 * 3);
}
}
&--algeria {
--green: #007229;
--red: #d21034;
position: relative;
background-color: var(--red);
// -webkit-mask-image: url(#clippin);
// -webkit-mask-mode: alpha;
// clip-path: url(#clipping);
background-image:
radial-gradient(
circle closest-side at calc(#{$w} / 15 * 8) 50%,
var(--white) 0%, var(--white) 42%,
transparent 42%, transparent 100%
),
radial-gradient(
circle closest-side at 50% 50%,
var(--red) 0%, var(--red) 50%,
transparent 50%, transparent 100%
),
linear-gradient(
to right,
var(--green) 0%, var(--green) 50%,
var(--white) 50%, var(--white) 100%
);
.star__container .star__spikes {
--starColour: var(--red);
}
.star__container {
--width: #{$w} / 3 * 2 / 80 * 18;
top: 50%;
left: 50%;
transform: translate(0, -50%) rotate(19deg);
}
}
&--andorra {
--blue: #10069f;
--red: #d50032;
--yellow: #fedd00;
position: relative;
height: calc(#{$w} / 10 * 7);
@include stripesOdd($horizontal, 0%, var(--blue), 32%, var(--yellow), 68%, var(--red), 100%);
#andorra_coat {
position: absolute;
left: 50%;
top: 26.4%;
transform: translateX(-50%);
max-width: 33%;
height: auto;
}
}
&--angola {
--red: #c8102e;
position: relative;
height: calc(#{$w} / 8 * 5);
@include stripes($vertical, var(--red), var(--black));
#angola_coat {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -41%);
max-width: 26%;
}
}
&--argentina {
--blue: #75aadb;
position: relative;
height: calc(#{$w} / 8 * 5);
@include stripes($vertical, var(--blue), var(--white), var(--blue));
#argentina_coat {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
max-width: 50%;
max-height: 28%;
}
}
&--armenia {
--red: #f00;
--blue: #00a;
--yellow: #f90;
height: calc(#{$w} / 2);
@include stripes($vertical, var(--red), var(--blue), var(--yellow));
}
&--australia-aboriginal {
--red: #e03c31;
--yellow: #ffc72c;
background-image:
radial-gradient(
circle at center,
var(--yellow) 0%, var(--yellow) calc((100% / 3 * 2) / 5 * 2.5),
transparent calc((100% / 3 * 2) / 5 * 2.5), transparent 100%
),
linear-gradient(
#{$vertical},
#000 0%, #000 $w50,
var(--red) $w50, var(--red) 100%
);
}
&--austria {
--red: #ee2436;
@include stripes($vertical, var(--red), var(--white), var(--red));
}
&--azerbaijan {
--blue: #0097c3;
--red: #e00034;
--green: #00ae65;
position: relative;
height: calc(#{$w} / 2);
background-image:
radial-gradient(
circle at 52%,
var(--red) 0%, var(--red) calc(#{$w} / 2 / 3 / 2.7),
transparent calc(#{$w} / 2 / 3 / 2.7), transparent 100%
),
radial-gradient(
circle at 50%,
#fff 0%, #fff calc(#{$w} / 2 / 3 / 2.2),
transparent calc(#{$w} / 2 / 3 / 2.2), transparent 100%
),
linear-gradient(
#{$vertical},
var(--blue) 0%, var(--blue) $w33,
var(--red) $w33, var(--red) $w66,
var(--green) $w66, var(--green) 100%
);
svg {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-49.7%, -50%) scale(0.3);
}
}
&--bahamas {
--blue: #00778b;
--yellow: #ffc72c;
position: relative;
height: calc(#{$w} / 2);
@include stripes($vertical, var(--blue), var(--yellow), var(--blue));
&::before {
display: block;
position: relative;
top: 0;
left: 0;
border-top: calc(#{$w} / 2 / 2) solid transparent;
border-bottom: calc(#{$w} / 2 / 2) solid transparent;
border-left: calc(1.732 / 2 * (#{$w} / 2)) solid #000;
width: calc(#{$w} - 1.732 / 2 * (#{$w} / 2));
height: 0;
content: '';
}
}
&--bahrain {
--red: #da291c;
position: relative;
height: calc(#{$w} / 10 * 6);
@include stripesOdd($horizontal, 0%, var(--white), 25%, var(--red), 100%);
.triangle {
position: absolute;
left: 25%;
border-top: calc(#{$w} / 10 * 6 / 10) solid transparent;
border-bottom: calc(#{$w} / 10 * 6 / 10) solid transparent;
border-left: calc(#{$w} / 10 * 1.5) solid var(--white);
}
.triangle--1 {
top: 0;
}
.triangle--2 {
top: 20%;
}
.triangle--3 {
top: 40%;
}
.triangle--4 {
top: 60%;
}
.triangle--5 {
top: 80%;
}
}
&--belgium {
--red: #ff0f21;
--yellow: #ffe936;
height: calc(#{$w} / 15 * 13);
@include stripes($horizontal, var(--black), var(--yellow), var(--red));
}
&--bengladesh {
--green: #006a4d;
--red: #f4253f;
height: calc(#{$w} / 10 * 6);
background-color: var(--green);
background-image:
radial-gradient(
circle at calc(100% / 10 * 4.5 ),
var(--red) 0%, var(--red) calc(100% / 2 / 3 * 2),
transparent calc(100% / 2 / 3 * 2), transparent 100%
);
}
&--benin {
--green: #008751;
--red: #e8112d;
--yellow: #fcd116;
background-image:
conic-gradient(
at 40% 50%,
var(--yellow) 0%, var(--yellow) 25%,
var(--red) 25%, var(--red) 50%,
var(--green) 50%, var(--green) 100%
);
}
&--bhutan {
--orange: #e03c31;
--yellow: #f1b434;
position: relative;
background-image:
linear-gradient(
-33.33deg,
var(--orange) 0%, var(--orange) 50%,
var(--yellow) 50%, var(--yellow) 100%
);
#bhutan_coat {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: calc(#{$w} / 135 * 97);
}
}
&--bolivia {
--green: #007934;
--red: #d52b1e;
--yellow: #fcd116;
height: calc(#{$w} / 22 * 15);
@include stripes($vertical, var(--red), var(--yellow), var(--green));
}
&--bosnia-herzegovina {
--blue: #002395;
--yellow: #fecb00;
position: relative;
height: calc(#{$w} / 2);
overflow: hidden;
background-color: var(--blue);
background-image:
linear-gradient(
90deg,
transparent 0, transparent 75%,
var(--blue) 75%, var(--blue) 100%
),
linear-gradient(
45deg,
transparent 0%, transparent 50%,
var(--yellow) 50%, var(--yellow) 100%
);
.star__container .star__spikes {
--starColour: #fff;
}
.star__container {
--width: calc(#{$w} / 12.4);
width: var(--width);
}
.star-1 {
top: 0;
left: 0;
transform: translate(210%, -55%);
}
.star-2 {
top: 0;
left: 0;
transform: translate(280%, 25%);
}
.star-3 {
top: 0;
left: 0;
transform: translate(350%, 105%);
}
.star-4 {
top: 0;
left: 0;
transform: translate(420%, 185%);
}
.star-5 {
top: 0;
left: 0;
transform: translate(490%, 265%);
}
.star-6 {
top: 0;
left: 0;
transform: translate(560%, 345%);
}
.star-7 {
top: 0;
left: 0;
transform: translate(630%, 425%);
}
.star-8 {
top: 0;
left: 0;
transform: translate(700%, 505%);
}
.star-9 {
top: 0;
left: 0;
transform: translate(770%, 585%);
}
}
&--botswana {
--blue: #75aadb;
@include stripesOdd($vertical, 0%, var(--blue), calc(100% / 24 * 9), var(--white), calc(100% / 24 * 10), var(--black), calc(100% / 24 * 14), var(--white), calc(100% / 24 * 15), var(--blue), 100%);
}
&--brazil {
--green: #009c3b;
--yellow: yellow;
position: relative;
height: calc(#{$w} / 10 * 7);
background-color: var(--yellow);
background-image:
linear-gradient(
30deg,
transparent 0%, transparent calc(#{$w} / 1.3),
var(--green) calc(#{$w} / 1.3), var(--green) 100%
),
linear-gradient(
150deg,
transparent 0%, transparent calc(#{$w} / 1.3),
var(--green) calc(#{$w} / 1.3), var(--green) 100%
),
linear-gradient(
210deg,
transparent 0%, transparent calc(#{$w} / 1.3),
var(--green) calc(#{$w} / 1.3), var(--green) 100%
),
linear-gradient(
330deg,
transparent 0%, transparent calc(#{$w} / 1.3),
var(--green) calc(#{$w} / 1.3), var(--green) 100%
);
#brazil_coat {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
max-width: 50%;
max-height: 54%;
}
}
&--brunei {
--yellow: #fedd00;
position: relative;
height: calc(#{$w} / 2);
background-image:
linear-gradient(
12deg,
var(--yellow) 0%, var(--yellow) 35%,
var(--black) 35%, var(--black) 50%,
var(--white) 50%, var(--white) 67%,
var(--yellow) 67%, var(--yellow) 100%
);
#brunei_coat {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: calc(#{$w} / 3);
}
}
&--bulgaria {
--green: #00966e;
--red: #d62612;
height: calc(#{$w} / 5 * 3);
@include stripes($vertical, var(--white), var(--green), var(--red));
}
&--burkina-faso {
--green: #009e49;
--red: #ef2b2d;
--yellow: #fcd116;
position: relative;
@include stripes($vertical, var(--red), var(--green));
.star__container .star__spikes {
--starColour: var(--yellow);
}
.star-1 {
--width: calc(#{$w} / 4.5);
top: 50%;
left: 50%;
transform: translate(-50%, -55%);
width: var(--width);
}
}
&--cambodia {
--blue: #002f6c;
--red: #d50032;
position: relative;
@include stripes($vertical, var(--blue), var(--red), var(--red), var(--blue));
#cambodia_coat {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
height: calc(#{$w} / 3 / 45 * 43);
}
}
&--cameroon {
--green: #007a5e;
--red: #ce1126;
--yellow: #fcd116;
position: relative;
@include stripes($horizontal, var(--green), var(--red), var(--yellow));
.star__container .star__spikes {
--starColour: var(--yellow);
}
.star-1 {
--width: calc(#{$w} / 6);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: var(--width);
}
}
&--canada {
--red: #f00;
position: relative;
height: calc(#{$w} / 2);
@include stripesOdd($horizontal, 0%, var(--red), 25%, var(--white), 75%, var(--red), 100%);
#canada_leaf {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: calc(100% / 2 * .85);
}
}
&--cape-verde {
--blue: #003087;
--red: #c8102e;
--yellow: #ffcd00;
position: relative;
height: calc(#{$w} / 17 * 10);
@include stripesOdd($vertical, 0%, var(--blue), 50%, var(--white), calc(100% / 12 * 7), var(--red), calc(100% / 12 * 8), var(--white), calc(100% / 12 * 9), var(--blue), 100%);
.star__container .star__spikes {
--starColour: var(--yellow);
}
.star__container {
--width: calc(#{$w} / 612 * 32);
transform: translate(-50%, -50%);
width: var(--width);
}
.star-1 {
top: calc(#{$w} / 612 * 130);
left: calc(#{$w} / 612 * 230);
}
.star-2 {
top: calc(#{$w} / 612 * 153);
left: calc(#{$w} / 612 * 285);
}
.star-3 {
top: calc(#{$w} / 612 * 195);
left: calc(#{$w} / 612 * 320);
}
.star-4 {
top: calc(#{$w} / 612 * 255);
left: calc(#{$w} / 612 * 320);
}
.star-5 {
top: calc(#{$w} / 612 * 297);
left: calc(#{$w} / 612 * 285);
}
.star-6 {
top: calc(#{$w} / 612 * 320);
left: calc(#{$w} / 612 * 230);
}
.star-7 {
top: calc(#{$w} / 612 * 297);
left: calc(#{$w} / 612 * 175);
}
.star-8 {
top: calc(#{$w} / 612 * 255);
left: calc(#{$w} / 612 * 140);
}
.star-9 {
top: calc(#{$w} / 612 * 195);
left: calc(#{$w} / 612 * 140);
}
.star-10 {
top: calc(#{$w} / 612 * 153);
left: calc(#{$w} / 612 * 175);
}
}
&--central-african-republic {
--blue: #003082;
--green: #289728;
--red: #d21034;
--yellow: #ffce00;
position: relative;
height: calc(#{$w} / 5 * 3);
@include stripes($vertical, var(--blue), var(--white), var(--green), var(--yellow));
&::before {
display: block;
position: relative;
left: 50%;
transform: translateX(-50%);
width: calc(#{$w} / 5 * 3 / 4);
height: 100%;
background-color: var(--red);
content: '';
}
.star__container .star__spikes {
--starColour: var(--yellow);
}
.star-1 {
--width: calc(#{$w} / 5 * 3 / 4 * .9);
top: calc(#{$w} / 5 * 3 / 4 / 2);
left: calc(#{$w} / 3 / 2);
transform: translate(-50%, -50%);
width: var(--width);
}
}
&--chad {
--blue: #002664;
--red: #c60c30;
--yellow: #fecb00;
@include stripes($horizontal, var(--blue), var(--yellow), var(--red));
}
&--chile {
--blue: #0039a6;
--red: #d52b1e;
position: relative;
background-image: conic-gradient(
at calc(100% / 3) 50%,
#fff 0%, #fff 25%,
var(--red) 25%, var(--red) 75%,
var(--blue) 75%, var(--blue) 100%
);
.star__container .star__spikes {
--starColour: #fff;
}
.star-1 {
--width: calc(#{$w} / 6);
top: calc(#{$w} / 3 / 2);
left: calc(#{$w} / 3 / 2);
transform: translate(-50%, -50%);
width: var(--width);
}
}
&--china {
--red: #f00;
--starColour: gold;
position: relative;
height: calc(#{$w} / 3 * 2);
background-color: var(--red);
.star__container .star__spikes {
--starColour: gold;
}
.star-0 {
--width: calc(#{$w} / 15 * 3);
top: calc((#{$w} / 2 * 3) / 15);
left: calc(#{$w} / 15);
width: var(--width);
}
.star-1,
.star-2,
.star-3,
.star-4 {
--width: calc(#{$w} / 15);
width: var(--width);
}
.star-1 {
top: calc(100% / 20);
left: calc(100% / 30 * 9);
transform: rotate(18deg);
}
.star-2 {
top: calc(100% / 20 * 3);
left: calc(100% / 30 * 11);
transform: rotate(-32deg);
}
.star-3 {
top: calc(100% / 20 * 6);
left: calc(100% / 30 * 11);
}
.star-4 {
top: calc(100% / 20 * 8);
left: calc(100% / 30 * 9);
transform: rotate(22deg);
}
}
&--comoros {
--blue: #0072ce;
--green: #4c8c2b;
--red: #c8102e;
--yellow: #ffc72c;
position: relative;
height: calc(#{$w} / 5 * 3);
@include stripes($vertical, var(--yellow), var(--white), var(--red), var(--blue));
.canton {
position: absolute;
width: 50%;
height: 100%;
background-image:
radial-gradient(
circle at 40% 50%,
var(--green) 0%, var(--green) calc(100% / 200 * 54),
transparent calc(100% / 200 * 54), transparent 100%
),
radial-gradient(
circle at 34% 50%,
var(--white) 0%, var(--white) calc(100% / 200 * 54),
transparent calc(100% / 200 * 54), transparent 100%
),
conic-gradient(
at 100% 50%,
transparent 0%, transparent 66.5%,
var(--green) 66.5%, var(--green) 83.7%,
transparent 83.7%, transparent 100%
);
}
.star__container .star__spikes {
--starColour: var(--white);
}
.star-1,
.star-2,
.star-3,
.star-4 {
--width: calc(#{$w} / 200 * 8);
left: 40%;
transform: translate(-50%, -50%) rotate(24deg);
width: var(--width);
}
.star-1 {
top: calc(100% / 120 * 42);
}
.star-2 {
top: calc(100% / 120 * 54);
}
.star-3 {
top: calc(100% / 120 * 66);
}
.star-4 {
top: calc(100% / 120 * 78);
}
}
&--colombia {
--blue: #003893;
--red: #ce1126;
--yellow: #fcd116;
@include stripesOdd($vertical, 0%, var(--yellow), 50%, var(--blue), 75%, var(--red), 100%);
}
&--congo-brazzaville {
--green: #009543;
--red: #dc241f;
--yellow: #fbde4a;
background-image: linear-gradient(
135deg,
var(--green) 0%, var(--green) 40%,
var(--yellow) 40%, var(--yellow) 60%,
var(--red) 60%, var(--red) 100%,
);
}
&--congo-kinshasa {
--blue: #007fff;
--red: #ce1021;
--yellow: #f7d618;
position: relative;
height: calc(#{$w} / 4 * 3);
background-image: linear-gradient(
150deg,
var(--blue) 0%, var(--blue) 40.5%,
var(--yellow) 40.5%, var(--yellow) 43.5%,
var(--red) 43.5%, var(--red) 56.5%,
var(--yellow) 56.5%, var(--yellow) 59.5%,
var(--blue) 59.5%, var(--blue) 100%,
);
.star__container .star__spikes {
--starColour: var(--yellow);
}
.star-1 {
--width: calc(#{$w} / 4);
top: calc(25%);
left: calc(#{$w} / 4 * 3 / 4);
transform: translate(-50%, -50%);
width: var(--width);
}
}
&--cornwall {
height: calc(#{$w} / 5 * 3);
background-color: #000;
background-image:
linear-gradient(
#{$horizontal},
transparent 0%, transparent 45%,
#fff 45%, #fff 55%,
transparent 55%, transparent 100%
),
linear-gradient(
#{$vertical},
transparent 0%, transparent calc((100% - (100% / 6)) / 2),
#fff calc((100% - (100% / 6)) / 2), #fff calc((100% - (100% / 6)) / 2 + (100% / 6)),
transparent calc((100% - (100% / 6)) / 2 + (100% / 6)), transparent 100%
);
}
&--costa-rica {
--blue: #002b7f;
--red: #ce1126;
height: calc(#{$w} / 5 * 3);
@include stripesOdd($vertical, 0%, var(--blue), 16.66%, var(--white), 33.33%, var(--red), 66.66%, var(--white), 83.33%, var(--blue), 100%);
}
&--croatia {
--blue: #171796;
--red: #f00;
position: relative;
height: calc(#{$w} / 2);
@include stripes($vertical, var(--red), var(--white), var(--blue));
#croatia_coat {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -57%);
width: calc(#{$w} / 4);
}
}
&--cuba {
--blue: #002a8f;
--red: #f00;
position: relative;
height: calc(#{$w} / 2);
@include stripes($vertical, var(--blue), var(--white), var(--blue), var(--white), var(--blue));
&::before {
display: block;
position: relative;
top: 0;
left: 0;
border-top: calc(#{$w} / 2 / 2) solid transparent;
border-bottom: calc(#{$w} / 2 / 2) solid transparent;
border-left: calc(1.732 / 2 * (#{$w} / 2)) solid var(--red);
width: calc(#{$w} - 1.732 / 2 * (#{$w} / 2));
height: 0;
content: '';
}
.star__container .star__spikes {
--starColour: #fff;
}
.star-1 {
--width: calc(#{$w} / 2 / 20 * 6);
top: calc(50%);
left: calc(1.732 / 2 * (#{$w} / 2) / 2 - var(--width));
transform: translateY(-50%);
width: var(--width);
}
}
&--curacao {
--blue: #012169;
--yellow: #fce300;
position: relative;
@include stripesOdd($vertical, 0%, var(--blue), 62.5%, var(--yellow), 75%, var(--blue), 100%);
.star__container .star__spikes {
--starColour: var(--white);
}
.star-1,
.star-2 {
width: var(--width);
transform: translate(-50%, -50%);
}
.star-1 {
--width: calc(#{$w} / 3 * 2 / 6);
top: var(--width);
left: var(--width);
}
.star-2 {
--width: calc(#{$w} / 3 * 2 / 9 * 2);
top: calc(#{$w} / 3 * 2 / 3);
left: calc(#{$w} / 3 * 2 / 3);
}
}
&--cyprus {
position: relative;
background-color: #fff;
#cyprus_coat {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: $w;
height: calc(#{$w} / 3 * 2);
}
}
&--czech {
--blue: #11457e;
--red: #d7141a;
border-top: calc(#{$w} / 3) solid #fff;
border-bottom: calc(#{$w} / 3) solid var(--red);
border-left: calc(#{$w} / 2) solid var(--blue);
width: calc(#{$w} / 2);
height: 0;
&:hover:after {
position: absolute;
left: -$w / 2;
top: calc(#{$w} / -3);
}
}
&--denmark {
--red: #c60c30;
height: calc(#{$w} / 37 * 28);
background-color: var(--red);
background-image:
linear-gradient(
#{$horizontal},
transparent 0%, transparent calc(100% / 17 * 6),
#fff calc(100% / 17 * 6), #fff calc(100% / 17 * 8),
transparent calc(100% / 17 * 8), transparent 100%
),
linear-gradient(
#{$vertical},
transparent 0%, transparent calc(100% / 7 * 3),
#fff calc(100% / 7 * 3), #fff calc(100% / 7 * 4),
transparent calc(100% / 7 * 4), transparent 100%
);
}
&--djibouti {
--blue: #69b3e7;
--green: #43b02a;
--red: #e03c31;
position: relative;
@include stripes($vertical, var(--blue), var(--green));
&::before {
display: block;
position: relative;
top: 0;
left: 0;
border-top: calc(#{$w} / 3) solid transparent;
border-bottom: calc(#{$w} / 3) solid transparent;
border-left: calc(1.732 / 2 * (#{$w} / 3 * 2)) solid var(--white);
width: calc(#{$w} - 1.732 / 2 * (#{$w} / 2));
height: 0;
content: '';
}
.star__container .star__spikes {
--starColour: var(--red);
}
.star-1 {
--width: calc(#{$w} / 2 / 20 * 6);
top: calc(50%);
left: calc(1.732 / 2 * (#{$w} / 3 * 2) / 2 - var(--width));
transform: translateY(-50%);
width: var(--width);
}
}
&--dominican-republic {
--red: #ce1126;
--blue: #002d62;
position: relative;
background-image:
linear-gradient(
#{$horizontal},
transparent 0%, transparent calc(100% / 30 * 13),
#fff calc(100% / 30 * 13), #fff calc(100% / 30 * 17),
transparent calc(100% / 30 * 17), transparent 100%
),
linear-gradient(
#{$vertical},
transparent 0%, transparent calc((100% - (100% / 5)) / 2),
#fff calc((100% - (100% / 5)) / 2), #fff calc((100% - (100% / 5)) / 2 + (100% / 5)),
transparent calc((100% - (100% / 5)) / 2 + (100% / 5)), transparent 100%
),
conic-gradient(
at center,
var(--red) 0%, var(--red) 25%,
var(--blue) 25%, var(--blue) 50%,
var(--red) 50%, var(--red) 75%,
var(--blue) 75%, var(--blue) 100%
);
#dominican-republic_coat {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: calc(#{$w} / 30 * 3.5);
height: auto;
}
}
&--east-timor {
--red: #e03c31;
--yellow: #ff0;
position: relative;
height: calc(#{$w} / 2);
background-color: var(--red);
&::before {
display: block;
position: absolute;
top: 0;
left: 0;
border-top: calc(#{$w} / 2 / 2) solid transparent;
border-bottom: calc(#{$w} / 2 / 2) solid transparent;
border-left: calc(#{$w} / 2) solid var(--yellow);
width: 0;
height: 0;
content: '';
}
.canton {
position: absolute;
top: 0;
left: 0;
border-top: calc(#{$w} / 2 / 2) solid transparent;
border-bottom: calc(#{$w} / 2 / 2) solid transparent;
border-left: calc(#{$w} / 3) solid var(--black);
width: 0;
height: 0;
}
.star__container .star__spikes {
--starColour: var(--white);
}
.star-1 {
--width: calc(#{$w} / 2 / 20 * 6);
top: calc(50%);
left: calc(#{$w} / 3 / 2);
transform: translate(-81%, -50%) rotate(-27deg);
width: var(--width);
}
}
&--ecuador {
--blue: #003893;
--red: #ce1126;
--yellow: #fcd116;
position: relative;
@include stripesOdd($vertical, 0%, var(--yellow), 50%, var(--blue), 75%, var(--red), 100%);
#ecuador_coat {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: auto;
height: calc(#{$w} / 3);
}
}
&--egypt {
--red: #ce1126;
position: relative;
@include stripes($vertical, var(--red), var(--white), var(--black));
#egypt_coat {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: auto;
height: calc(#{$w} / 3 * 2 / 3);
}
}
&--el-salvador {
--blue: #0047ab;
position: relative;
height: calc(#{$w} / 335 * 189);
@include stripes($vertical, var(--blue), var(--white), var(--blue));
#el-salvador_coat {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
max-width: 50%;
max-height: 28%;
}
}
&--england {
--red: #f00;
height: calc(#{$w} / 5 * 3);
background-color: #fff;
background-image:
linear-gradient(
#{$horizontal},
transparent 0%, transparent 45%,
var(--red) 45%, var(--red) 55%,
transparent 55%, transparent 100%
),
linear-gradient(
#{$vertical},
transparent 0%, transparent calc((100% - (100% / 6)) / 2),
var(--red) calc((100% - (100% / 6)) / 2), var(--red) calc((100% - (100% / 6)) / 2 + (100% / 6)),
transparent calc((100% - (100% / 6)) / 2 + (100% / 6)), transparent 100%
);
}
&--equatorial-guinea {
--blue: #0073ce;
--green: #3e9a00;
--red: #e32118;
position: relative;
@include stripes($vertical, var(--green), var(--white), var(--red));
&::before {
display: block;
position: relative;
top: 0;
left: 0;
border-top: calc(#{$w} / 3) solid transparent;
border-bottom: calc(#{$w} / 3) solid transparent;
border-left: calc(#{$w} / 4) solid var(--blue);
width: calc(#{$w} / 4 * 3);
height: 0;
content: '';
}
#equatorial-guinea_coat {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
max-height: calc(#{$w} / 3 * 2 / 3 * .9);
width: auto;
}
}
&--estonia {
--blue: #0072ce;
height: calc(#{$w} / 11 * 7);
@include stripes($vertical, var(--blue), var(--black), var(--white));
}
&--ethiopia {
--green: #078930;
--red: #da121a;
--yellow: #fcdd09;
position: relative;
height: calc(#{$w} / 2);
@include stripes($vertical, var(--green), var(--yellow), var(--red));
#ethiopia_coat {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
max-height: calc(#{$w} / 2 / 3 * 2);
width: auto;
}
}
&--faroe {
--red: #dc1e35;
--blue: #0065bd;
height: calc(#{$w} / 25 * 18);
background-color: #fff;
background-image:
linear-gradient(
#{$horizontal},
transparent 0%, transparent calc(100% / 25 * 8),
var(--red) calc(100% / 25 * 8), var(--red) calc(100% / 25 * 10),
transparent calc(100% / 25 * 10), transparent 100%
),
linear-gradient(
#{$vertical},
transparent 0%, transparent calc(100% / 18 * 8),
var(--red) calc(100% / 18 * 8), var(--red) calc(100% / 18 * 10),
transparent calc(100% / 18 * 10), transparent 100%
),
linear-gradient(
#{$horizontal},
transparent 0%, transparent calc(100% / 25 * 7),
var(--blue) calc(100% / 25 * 7), var(--blue) calc(100% / 25 * 11),
transparent calc(100% / 25 * 11), transparent 100%
),
linear-gradient(
#{$vertical},
transparent 0%, transparent calc(100% / 18 * 7),
var(--blue) calc(100% / 18 * 7), var(--blue) calc(100% / 18 * 11),
transparent calc(100% / 18 * 11), transparent 100%
)
}
&--finland {
--blue: #002f6c;
height: calc(#{$w} / 18 * 11);
background-color: #fff;
background-image:
linear-gradient(
#{$horizontal},
transparent 0%, transparent calc(100% / 18 * 5),
var(--blue) calc(100% / 18 * 5), var(--blue) calc(100% / 18 * 8),
transparent calc(100% / 18 * 8), transparent 100%
),
linear-gradient(
#{$vertical},
transparent 0%, transparent calc(100% / 11 * 4),
var(--blue) calc(100% / 11 * 4), var(--blue) calc(100% / 11 * 7),
transparent calc(100% / 11 * 7), transparent 100%
);
}
&--france {
--blue: #0050a4;
--red: #ef4135;
@include stripes($horizontal, var(--blue), var(--white), var(--red));
}
&--gabon {
--blue: #3a75c4;
--green: #009e60;
--yellow: #fcd116;
height: calc(#{$w} / 4 * 3);
@include stripes($vertical, var(--green), var(--yellow), var(--blue));
}
&--gambia {
--blue: #0c1c8c;
--green: #3a7728;
--red: #ce1126;
@include stripesOdd($vertical, 0%, var(--red), calc(100% / 3), var(--white), calc(100% / 3 + 100% / 18), var(--blue), calc(100% / 3* 2 - 100% / 18), var(--white), calc(100% / 3 * 2), var(--green), 100%);
}
&--georgia {
--red: #f00;
background-color: #fff;
background-image:
linear-gradient(
#{$horizontal},
transparent 0%, transparent 45%,
var(--red) 45%, var(--red) 55%,
transparent 55%, transparent 100%
),
linear-gradient(
#{$vertical},
transparent 0%, transparent calc((100% - (100% / 6)) / 2),
var(--red) calc((100% - (100% / 6)) / 2), var(--red) calc((100% - (100% / 6)) / 2 + (100% / 6)),
transparent calc((100% - (100% / 6)) / 2 + (100% / 6)), transparent 100%
);
}
&--germany {
--red: #f00;
--yellow: #fc0;
@include stripes($vertical, var(--black), var(--red), var(--yellow));
}
&--ghana {
--green: #006b3f;
--red: #ce1126;
--yellow: #fcd116;
position: relative;
@include stripes($vertical, var(--red), var(--yellow), var(--green));
.star__container .star__spikes {
--starColour: var(--black);
}
.star-1 {
--width: calc(#{$w} / 3 * 2 / 3);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: var(--width);
}
}
&--greece {
--blue: #0072ce;
position: relative;
@include stripes($vertical, var(--blue), var(--white), var(--blue), var(--white), var(--blue), var(--white), var(--blue), var(--white), var(--blue));
&::before {
display: block;
position: relative;
top: 0;
left: 0;
width: calc(#{$w} / 27 * 10);
height: calc(#{$w} / 3 * 2 / 9 * 4.99);
background-color: var(--blue);
background-image:
linear-gradient(
#{$horizontal},
transparent 0%, transparent $w40,
#fff $w40, #fff $w60,
transparent $w60, transparent 100%
),
linear-gradient(
#{$vertical},
transparent 0%, transparent $w40,
#fff $w40, #fff $w60,
transparent $w60, transparent 100%
);
content: '';
}
}
&--greenland {
--red: #c8102e;
position: relative;
@include stripes($vertical, var(--white), var(--red));
&::before {
display: block;
position: absolute;
top: 50%;
left: calc(#{$w} / 18 * 7);
transform: translate(-50%, -50%);
border-radius: 50%;
width: calc(#{$w} / 18 * 8);
height: calc(#{$w} / 18 * 8);
@include stripes($vertical, var(--red), var(--white));
content: '';
}
}
&--guatemala {
--blue: #4997d0;
position: relative;
height: calc(#{$w} / 8 * 5);
@include stripes($horizontal, var(--blue), var(--white), var(--blue));
#guatemala_coat {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
max-width: 25%;
height: auto;
}
}
&--guinea {
--green: #009460;
--yellow: #fcd116;
--red: #ce1126;
@include stripes($horizontal, var(--red), var(--yellow), var(--green));
}
&--guinea-bissau {
--green: #009e49;
--red: #ce1126;
--yellow: #fcd116;
height: calc(#{$w} / 2);
position: relative;
background-image:
conic-gradient(
at 33.33% 50%,
var(--yellow) 0%, var(--yellow) 25%,
var(--green) 25%, var(--green) 50%,
var(--red) 50%, var(--red) 100%
);
.star__container .star__spikes {
--starColour: var(--black);
}
.star-1 {
--width: calc(#{$w} / 3 / 2);
top: 50%;
left: calc(#{$w} / 3 / 2);
transform: translate(-50%, -50%);
width: var(--width);
}
}
&--guyana {
--green: #009e49;
--yellow: #fcd116;
--red: #ce1126;
position: relative;
height: calc(#{$w} / 5 * 3);
overflow: hidden;
background-color: var(--yellow);
background-image:
linear-gradient(
16deg,
transparent 0%, transparent 67%,
var(--green) 67%, var(--green) 100%
),
linear-gradient(
-16deg,
var(--green) 0%, var(--green) 32.8%,
transparent 32.8%, transparent 100%
),
linear-gradient(
16deg,
transparent 0%, transparent 65%,
var(--white) 65%, var(--white) 67%,
transparent 67%, transparent 100%
),
linear-gradient(
-16deg,
transparent 0%, transparent 33%,
var(--white) 33%, var(--white) 35%,
transparent 35%, transparent 100%
);
&::before {
display: block;
position: absolute;
left: 0;
top: 0;
transform: rotate(37deg) translate(-34%, 40%) skew(-15deg);
transform-origin: center center;
border: 10px solid var(--black);
width: calc(#{$w} / 5 * 3 * .73);
height: calc(#{$w} / 5 * 3 * .73);
background-color: var(--red);
content: '';
}
}
&--haiti {
--blue: #00209f;
--red: #d21034;
position: relative;
height: calc(#{$w} / 5 * 3);
@include stripes($vertical, var(--blue), var(--red));
#haiti_coat {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: auto;
height: 25%;
background-color: #fff;
}
}
&--honduras {
--blue: #0073cf;
position: relative;
height: calc(#{$w} / 2);
@include stripes($vertical, var(--blue), var(--white), var(--blue));
.star__container .star__spikes {
--starColour: var(--blue);
}
.star-1,
.star-2,
.star-3,
.star-4,
.star-5{
--width: calc(#{$w} / 18);
width: var(--width);
}
.star-1 {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.star-2 {
top: 50%;
left: calc(100% / 3);
transform: translate(-50%, -140%);
}
.star-3 {
top: 50%;
left: calc(100% / 3 * 2);
transform: translate(-50%, -140%);
}
.star-4 {
top: 50%;
left: calc(100% / 3);
transform: translate(-50%, 40%);
}
.star-5 {
top: 50%;
left: calc(100% / 3 * 2);
transform: translate(-50%, 40%);
}
}
&--hungary {
--green: #416f4c;
--red: #ce253c;
height: calc(#{$w} / 2);
@include stripes($vertical, var(--red), var(--white), var(--green));
}
&--iceland {
--red: #dc1e35;
--blue: #02529c;
height: calc(#{$w} / 25 * 18);
background-color: var(--blue);
background-image:
linear-gradient(
#{$horizontal},
transparent 0%, transparent calc(100% / 25 * 8),
var(--red) calc(100% / 25 * 8), var(--red) calc(100% / 25 * 10),
transparent calc(100% / 25 * 10), transparent 100%
),
linear-gradient(
#{$vertical},
transparent 0%, transparent calc(100% / 18 * 8),
var(--red) calc(100% / 18 * 8), var(--red) calc(100% / 18 * 10),
transparent calc(100% / 18 * 10), transparent 100%
),
linear-gradient(
#{$horizontal},
transparent 0%, transparent calc(100% / 25 * 7),
#fff calc(100% / 25 * 7), #fff calc(100% / 25 * 11),
transparent calc(100% / 25 * 11), transparent 100%
),
linear-gradient(
#{$vertical},
transparent 0%, transparent calc(100% / 18 * 7),
#fff calc(100% / 18 * 7), #fff calc(100% / 18 * 11),
transparent calc(100% / 18 * 11), transparent 100%
)
}
&--india {
--green: #008522;
--yellow: #f79b2e;
position: relative;
@include stripes($vertical, var(--yellow), var(--white), var(--green));
#india_ashoka {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: url(https://upload.wikimedia.org/wikipedia/commons/1/17/Ashoka_Chakra.svg) 50% 50%;
background-size: cover;
width: calc((100% / 3 * 2) / 6.3 * 1.295);
height: calc(100% / 6.3 * 1.295);
}
}
&--indonesia {
--red: #f00;
@include stripes($vertical, var(--red), var(--white));
}
&--iran {
--green: #1ea03e;
--red: #db0000;
position: relative;
height: calc(#{$w} / 7 * 4);
@include stripes($vertical, var(--green), var(--white), var(--red));
.iran__kufi-script {
position: relative;
width: calc(#{$w} / 11);
&--green {
top: calc(33% - 17px);
}
&--red {
top: calc(66% - 27px);
}
svg.iran__kufi-script--red path {
fill: var(--red);
}
}
#iran_coat {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: calc((100% / 3 * 2) / 6.3 * 1.295);
height: calc(100% / 6.3 * 1.295);
}
}
&--iraq {
--red: #ce1126;
position: relative;
@include stripes($vertical, var(--red), var(--white), var(--black));
#iraq_coat {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: calc(100% / 3);
}
}
&--ireland {
--green: #169b62;
--orange: #ff883e;
height: calc(#{$w} / 2);
@include stripes($horizontal, var(--green), var(--white), var(--orange));
}
&--italy {
--green: #009246;
--red: #ce2b37;
@include stripes($horizontal, var(--green), var(--white), var(--red));
}
&--ivory-coast {
--green: #009e60;
--orange: #f77f00;
@include stripes($horizontal, var(--orange), var(--white), var(--green));
}
&--jamaica {
--green: #009b3a;
--gold: #fed100;
height: calc(#{$w} / 2);
background-image:
linear-gradient(
to top right,
transparent 0%, transparent calc(100% / 26 * 11.5),
var(--gold) calc(100% / 26 * 11.5), var(--gold) calc(100% / 26 * 14.5),
transparent calc(100%/ 26 * 14.5), transparent 100%
),
linear-gradient(
to bottom right,
transparent 0%, transparent calc(100% / 26 * 11.5),
var(--gold) calc(100% / 26 * 11.5), var(--gold) calc(100% / 26 * 14.5),
transparent calc(100%/ 26 * 14.5), transparent 100%
),
conic-gradient(
at center,
var(--green) 0%, var(--green) 64deg,
#000 64deg, #000 117deg,
var(--green) 117deg, var(--green) 244deg,
#000 244deg, #000 297deg,
var(--green) 297deg, var(--green) 100%
);
}
&--japan {
--red: #ef3340;
background-image:
radial-gradient(
circle at center,
var(--red) 0%, var(--red) calc(100% / 1.8 / 5 * 3),
#fff calc(100% / 1.8 / 5 * 3), #fff 100%
);
}
&--jordan {
--green: #007a3d;
--red: #ce1126;
position: relative;
height: calc(#{$w} / 2);
@include stripes($vertical, var(--black), var(--white), var(--green));
&::before {
display: block;
position: relative;
top: 0;
left: 0;
border-top: calc(#{$w} / 2 / 2) solid transparent;
border-bottom: calc(#{$w} / 2 / 2) solid transparent;
border-left: calc(#{$w} / 2) solid var(--red);
width: calc(#{$w} - 1.732 / 2 * (#{$w} / 2));
height: 0;
content: '';
}
.star-7 {
position: absolute;
left: calc(#{$w} / 6.5);
top: 50%;
transform: translate(-50%, -50%);
width: calc(#{$w} / 14);
height: calc(#{$w} / 14);
path {
fill: var(--white);
}
}
}
&--kazakhstan {
--blue: #00aec7;
position: relative;
height: calc(#{$w} / 2);
background-color: var(--blue);
#kazakhstan_coat-1 {
position: absolute;
left: 3%;
top: calc(#{$w} / 2 / 200 * 11);
height: 89%;
}
#kazakhstan_coat-2 {
position: absolute;
left: 54.5%;
top: 50%;
transform: translate(-50%, -50%);
width: calc(#{$w} / 2000 * 629);
}
}
&--kenya {
--green: #008c51;
--red: #a23339;
position: relative;
@include stripesOdd($vertical, 0%, var(--black), calc(#{$w} / 3 * 2 / 20 * 6), var(--white), calc(#{$w} / 3 * 2 / 20 * 7), var(--red), calc(#{$w} / 3 * 2 / 20 * 13), var(--white), calc(#{$w} / 3 * 2 / 20 * 14), var(--green), calc(#{$w} / 3 * 2));
#kenya_coat {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
max-height: calc(#{$w} / 3 * 2 / 20 * 13);
}
}
&--kuwait {
--green: #007a3d;
--red: #ce1126;
position: relative;
height: calc(#{$w} / 2);
@include stripes($vertical, var(--green), var(--white), var(--red));
&::before {
display: block;
position: relative;
top: 0;
left: 0;
border-top: calc(#{$w} / 2 / 3) solid transparent;
border-bottom: calc(#{$w} / 2 / 3) solid transparent;
border-left: calc(#{$w} / 4) solid var(--black);
width: 0;
height: calc(#{$w} / 2 / 3);
content: '';
}
}
&--kyrgyzstan {
--red: #e4002b;
position: relative;
height: calc(#{$w} / 5 * 3);
background-color: var(--red);
#kyrgyzstan_coat {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: calc(#{$w} / 5000 * 900 * 2);
}
}
&--laos {
--blue: #002868;
--red: #c00;
background-image:
radial-gradient(
circle at center,
var(--white) 0%, var(--white) 20%,
transparent 20%, transparent 100%
),
linear-gradient(
#{$vertical},
var(--red) 0%, var(--red) 25%,
var(--blue) 25%, var(--blue) 75%,
var(--red) 75%, var(--red) 100%
);
}
&--latvia {
--red: #9e1b34;
height: calc(#{$w} / 2);
@include stripesOdd($vertical, 0%, var(--red), 40%, var(--white), 60%, var(--red), 100%);
}
&--lebanon {
--red: #f9423a;
position: relative;
@include stripesOdd($vertical, 0%, var(--red), 25%, var(--white), 75%, var(--red), 100%);
#lebanon_coat {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
height: 50%;
}
}
&--lesotho {
--blue: #00209f;
--green: #009543;
position: relative;
@include stripes($vertical, var(--blue), var(--white), var(--green));
#lesotho_coat {
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
height: calc(#{$w} / 3 * 2 / 3 * .95);
}
}
&--liberia {
--red: #bf0a30;
--blue: #002868;
height: calc(#{$w} / 19 * 10);
position: relative;
@include stripes($vertical, var(--red), var(--white), var(--red), var(--white), var(--red), var(--white), var(--red), var(--white), var(--red), var(--white), var(--red));
.canton {
--cantonW: calc(#{$w} / 19 * 10 / 11 * 5);
box-sizing: border-box;
position: relative;
top: 0;
left: 0;
width: var(--cantonW);
height: var(--cantonW);
background-color: var(--blue);
}
.star__container .star__spikes {
--starColour: var(--white);
}
.star__container {
--width: calc(#{$w} / 19 * 10 / 11 * 5 / 2);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
&--liechtenstein {
--blue: #002b7f;
--red: #ce1126;
position: relative;
height: calc(#{$w} / 5 * 3);
@include stripes($vertical, var(--blue), var(--red));
}
&--lithuania {
--green: #006a44;
--red: #c1272d;
--yellow: #fdb913;
height: calc(#{$w} / 5 * 3);
@include stripes($vertical, var(--yellow), var(--green), var(--red));
}
&--luxembourg {
--blue: #00a2df;
--red: #ee2436;
height: calc(#{$w} / 5 * 3);
@include stripes($vertical, var(--red), var(--white), var(--blue));
}
&--lybia {
--green: #239e46;
--red: #e70013;
position: relative;
height: calc(#{$w} / 2);
@include stripesOdd($vertical, 0%, var(--red), 25%, var(--black), 75%, var(--green), 100%);
&::before {
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-image:
radial-gradient(
circle closest-side at 51.5% 50%,
var(--black) 0%, var(--black) calc(100% / 4.6),
transparent calc(100% / 4.6), transparent 100%
),
radial-gradient(
circle closest-side at 50% 50%,
var(--white) 0%, var(--white) calc(100% / 4),
transparent calc(100% / 8), transparent 100%
);
content: '';
}
.star__container .star__spikes {
--starColour: var(--white);
}
.star__container {
--width: #{$w} / 10;
top: 50%;
left: calc(#{$w} / 15 * 8.7);
transform: translate(-50%, -50%) rotate(-21deg);
}
}
&--macedonia {
--red: #d20000;
--yellow: #ffe600;
height: calc(#{$w} / 2);
background-image:
radial-gradient(circle, var(--yellow) 0%, var(--yellow) 14.28%, var(--red) 14.28%, var(--red) 17.85%, transparent 16%),
conic-gradient(
var(--yellow) 0%, var(--yellow) 4%, //y t
var(--red) 4%, var(--red) 15%, //r
var(--yellow) 15%, var(--yellow) 17.8%, //y tr
var(--red) 17.8%, var(--red) 23.35%, //r
var(--yellow) 23.35%, var(--yellow) 26.65%, //y r
var(--red) 26.65%, var(--red) 32.8%, //r
var(--yellow) 32.8%, var(--yellow) 35.6%, //y rb
var(--red) 35.6%, var(--red) 46%, //r
var(--yellow) 46%, var(--yellow) 54%, //y b
var(--red) 54%, var(--red) 64.8%, //r
var(--yellow) 64.8%, var(--yellow) 67.65%, //y bl
var(--red) 67.65%, var(--red) 73.35%, //r
var(--yellow) 73.35%, var(--yellow) 76.65%, //y l
var(--red) 76.65%, var(--red) 82.25%, //r
var(--yellow) 82.25%, var(--yellow) 85%, //y tl
var(--red) 85%, var(--red) 96%, //r
var(--yellow) 96%, var(--yellow) 100% //y t
);
}
&--madagascar {
--green: #007e3a;
--red: #fc3d32;
background-image:
conic-gradient(
at 33.333% 50%,
var(--green) 0%, var(--green) 25%,
var(--red) 25%, var(--red) 50%,
var(--white) 50%, var(--white) 100%
);
}
&--malaysia {
--red: #cc0001;
--blue: #010066;
--yellow: #fc0;
height: calc(#{$w} / 2);
position: relative;
@include stripes($vertical, var(--red), var(--white), var(--red), var(--white), var(--red), var(--white), var(--red), var(--white), var(--red), var(--white), var(--red), var(--white), var(--red), var(--white));
.canton {
--cantonW: calc(#{$w} / 2);
box-sizing: border-box;
position: relative;
top: 0;
left: 0;
width: var(--cantonW);
height: calc(#{$w} / 2 / 14 * 8);
background-color: var(--blue);
background-image:
radial-gradient(
circle at calc(#{$w} / 28 * 6.75),
var(--blue) 0%, var(--blue) calc(#{$w} / 2 / 14 * 5.33 / 2),
transparent calc(#{$w} / 2 / 14 * 5.33 / 2), transparent 100%
),
radial-gradient(
circle at calc(#{$w} / 28 * 5.75),
var(--yellow) 0%, var(--yellow) calc(#{$w} / 2 / 14 * 6 / 2),
transparent calc(#{$w} / 2 / 14 * 6 / 2), transparent 100%
);
}
}
&--malawi {
--green: #009639;
--red: #c8102e;
position: relative;
@include stripes($vertical, var(--black), var(--red), var(--green));
#malawi_coat {
position: relative;
left: 50%;
top: calc(100% / 3 / 2);
transform: translate(-50%, -50%);
height: calc(#{$w} / 3 * 2 / 3 * .925);
}
}
&--maldives {
--green: #007367;
--red: #bf0d3e;
position: relative;
background-image:
radial-gradient(
circle farthest-side at calc(#{$w} / 24 * 14) 50%,
var(--green) 0%, var(--green) calc(100% / 9 * 2),
transparent calc(100% / 9 * 2), transparent 100%
),
radial-gradient(
circle farthest-side at calc(#{$w} / 24 * 13) 50%,
var(--white) 0%, var(--white) calc(100% / 9 * 2),
transparent calc(100% / 9 * 2), transparent 100%
),
linear-gradient(
#{$horizontal},
var(--red) 0%, var(--red) calc(#{$w} / 3 * 2 / 4),
transparent calc(#{$w} / 3 * 2 / 4), transparent calc(#{$w} - (#{$w} / 3 * 2 / 4)),
var(--red) calc(#{$w} - (#{$w} / 3 * 2 / 4)), var(--red) 100%
),
linear-gradient(
#{$vertical},
var(--red) 0%, var(--red) $w25,
var(--green) $w25, var(--green) $w75,
var(--red) $w75, var(--red) 100%
);
}
&--mali {
--green: #14b53a;
--red: #ce1126;
--yellow: #fcd116;
@include stripes($horizontal, var(--green), var(--yellow), var(--red));
}
&--malta {
--red: #c8102e;
position: relative;
@include stripes($horizontal, var(--white), var(--red));
#malta_coat {
position: absolute;
left: calc(#{$w} / 810 * 20);
top: calc(#{$w} / 810 * 20);
width: calc(100% / 81 * 15);
}
}
&--mauritania {
--red: #d01c1f;
--green: #00a95c;
--yellow: #ffd700;
position: relative;
@include stripesOdd($vertical, 0%, var(--red), 20%, var(--green), 80%, var(--red), 100%);
&::before {
display: block;
position: relative;
top: 20%;
width: 100%;
height: calc(#{$w} / 3 * 2 / 5 * 3);
background-image:
radial-gradient(
circle farthest-side at 50% -5%,
var(--green) 0%, var(--green) calc(#{$w} / 3.5),
transparent calc(#{$w} / 3.5), transparent 100%
),
radial-gradient(
circle farthest-side at 50% 20%,
var(--yellow) 0%, var(--yellow) calc(#{$w} / 4),
transparent calc(#{$w} / 4), transparent 100%
);
content: '';
}
.star__container .star__spikes {
--starColour: var(--yellow);
}
.star__container {
--width: #{$w} / 3 * 2 / 5;
top: 50%;
left: 50%;
transform: translate(-50%, -100%);
}
}
&--mauritius {
--blue: #1a206d;
--green: #00a551;
--red: #ea2839;
--yellow: #ffd500;
height: calc(#{$w} / 5 * 3);
@include stripes($vertical, var(--red), var(--blue), var(--yellow), var(--green));
}
&--mexico {
--green: #006847;
--red: #ce1126;
position: relative;
height: calc(#{$w} / 7 * 4);
@include stripes($horizontal, var(--green), var(--white), var(--red));
#mexico_coat {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: calc(#{$w} / 4);
}
}
&--moldova {
--blue: #0046ae;
--red: #cc092f;
--yellow: #ffd200;
position: relative;
height: calc(#{$w} / 2);
@include stripes($horizontal, var(--blue), var(--yellow), var(--red));
#moldova_coat {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
height: 56%;
width: auto;
}
}
&--monaco {
--red: #f00;
height: calc(#{$w} / 5 * 4);
@include stripes($vertical, var(--red), var(--white));
}
&--mongolia {
--blue: #407ec9;
--red: #ed2939;
position: relative;
height: calc(#{$w} / 2);
@include stripes($horizontal, var(--red), var(--blue), var(--red));
#mongolia_coat {
position: absolute;
left: calc(#{$w} / 3 / 2);
top: 50%;
transform: translate(-50%, -50%);
width: calc(#{$w} / 60 * 11);
}
}
&--montenegro {
--red: #f00;
--gold: #d4af38;
position: relative;
width: calc(#{$w} / 40 * 38);
height: calc(#{$w} / 40 * 38 / 2);
border: calc(#{$w} / 40) solid var(--gold);
background-color: var(--red);
#montenegro_coat {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
height: 72%;
}
}
&--morocco {
--red: #d50032;
--starColour: #00843d;
position: relative;
background-color: var(--red);
.star__container .star__spikes {
--starColour: #00843d;
}
.star-1 {
--width: calc(#{$w} / 3);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: var(--width);
}
}
&--mozambique {
--green: #007367;
--red: #c8102e;
--yellow: #fedd00;
position: relative;
@include stripesOdd($vertical, 0%, var(--green), calc(100% / 32 * 10), var(--white), calc(100% / 32 * 11), var(--black), calc(100% / 32 * 21), var(--white), calc(100% / 32 * 22), var(--yellow), 100%);
&::before {
display: block;
position: relative;
top: 0;
left: 0;
border-top: calc(#{$w} / 3) solid transparent;
border-bottom: calc(#{$w} / 3) solid transparent;
border-left: calc(#{$w} / 16 * 7) solid var(--red);
width: calc(#{$w} / 16 * 9);
height: 0;
content: '';
}
#mozambique_coat {
position: absolute;
left: calc(#{$w} / 3 * 2 / 32 * 7);
top: 50%;
height: calc(#{$w} / 3 * 2 / 32 * 12);
transform: translate(-50%, -50%);
}
}
&--myanmar {
--green: #34b233;
--red: #ea2839;
--yellow: #fecb00;
position: relative;
@include stripes($vertical, var(--yellow), var(--green), var(--red));
.star__container .star__spikes {
--starColour: var(--white);
}
.star-1 {
--width: calc(#{$w} / 2);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: var(--width);
}
}
&--namibia {
--blue: #003580;
--green: #009543;
--red: #d21034;
position: relative;
background-image: linear-gradient(
145.5deg,
var(--blue) 0%, var(--blue) calc(50% - (10 / 9 * 10 * 1%)),
var(--white) calc(50% - (10 / 9 * 10 * 1%)), var(--white) calc(50% - (7.5 / 9 * 10 * 1%)),
var(--red) calc(50% - (7.5 / 9 * 10 * 1%)), var(--red) calc(50% + (7.5 / 9 * 10 * 1%)),
var(--white) calc(50% + (7.5 / 9 * 10 * 1%)), var(--white) calc(50% + (10 / 9 * 10 * 1%)),
var(--green) calc(50% + (10 / 9 * 10 * 1%)), var(--green) 100%,
);
#namibia_coat {
position: absolute;
left: calc(#{$w} / 5);
top: calc(#{$w} / 3 * 2 / 4);
transform: translate(-50%, -50%);
border-radius: 50%;
width: calc(#{$w} / 9 * 2);
height: calc(#{$w} / 9 * 2);
background-color: #ffce00;
}
}
&--netherlands {
--blue: #21468b;
--red: #ae1c28;
@include stripes($vertical, var(--red), var(--white), var(--blue));
}
&--nicaragua {
--blue: #0067c6;
position: relative;
height: calc(#{$w} / 335 * 189);
@include stripes($vertical, var(--blue), var(--white), var(--blue));
#nicaragua_coat {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
max-width: 50%;
max-height: 28%;
}
}
&--niger {
--green: #0db02b;
--orange: #e05206;
position: relative;
height: calc(#{$w} / 7 * 6);
position: relative;
@include stripes($vertical, var(--orange), var(--white), var(--green));
&::before {
display: block;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
width: calc(#{$w} / 7 * 2 * .85);
height: calc(#{$w} / 7 * 2 * .85);
background-color: var(--orange);
content: '';
}
}
&--nigeria {
--green: #008753;
height: calc(#{$w} / 2);
@include stripes($horizontal, var(--green), var(--white), var(--green));
}
&--north-korea {
--blue: #024fa2;
--red: #ed1c27;
position: relative;
height: calc(#{$w} / 2);
@include stripesOdd($vertical, 0%, var(--blue), calc(100% / 36 * 6), var(--white), calc(100% / 36 * 7), var(--red), calc(100% / 36 * 29), var(--white), calc(100% / 36 * 30), var(--blue), 100%);
.star__container .star__spikes {
--starColour: var(--red);
}
.star-1 {
--width: calc(#{$w} / 9 * 2);
top: 50%;
left: calc(100% / 3);
transform: translate(-50%, -50%);
border-radius: 50%;
width: var(--width);
height: calc(var(--width) / 2.4);
background-color: var(--white);
}
}
&--norway {
--blue: #3f4a75;
--red: #f65058;
height: calc(#{$w} / 11 * 8);
background-color: var(--red);
background-image:
linear-gradient(
#{$horizontal},
transparent 0%, transparent calc(100% / 22 * 7),
var(--blue) calc(100% / 22 * 7), var(--blue) calc(100% / 22 * 9),
transparent calc(100% / 22 * 9), transparent 100%
),
linear-gradient(
#{$vertical},
transparent 0%, transparent calc(100% / 16 * 7),
var(--blue) calc(100% / 16 * 7), var(--blue) calc(100% / 16 * 9),
transparent calc(100% / 16 * 9), transparent 100%
),
linear-gradient(
#{$horizontal},
transparent 0%, transparent calc(100% / 22 * 6),
#fff calc(100% / 22 * 6), #fff calc(100% / 22 * 10),
transparent calc(100% / 22 * 10), transparent 100%
),
linear-gradient(
#{$vertical},
transparent 0%, transparent calc(100% / 16 * 6),
#fff calc(100% / 16 * 6), #fff calc(100% / 16 * 10),
transparent calc(100% / 16 * 10), transparent 100%
)
}
&--oman {
--green: #009a44;
--red: #f9423a;
position: relative;
height: calc(#{$w} / 2);
background-image:
linear-gradient(
$horizontal,
var(--red) 0%, var(--red) calc(100% / 2 / 3 * 2),
transparent calc(100% / 2 / 3 * 2), transparent 100%
),
linear-gradient(
$vertical,
var(--white) 0%, var(--white) calc(100% / 3),
var(--red) calc(100% / 3), var(--red) calc(100% / 3 * 2),
var(--green) calc(100% / 3 * 2), var(--green) 100%
);
#oman_coat {
position: absolute;
left: calc(#{$w} / 2 / 3);
top: calc(#{$w} / 2 / 30);
transform: translateX(-50%);
width: calc(#{$w} / 2 / 3);
}
}
&--pakistan {
--green: #060;
position: relative;
background-image:
radial-gradient(
circle at calc(50% + (25% / 2) + 10%) calc(50% - 12%),
var(--green) 0%, var(--green) calc(100% / 2.4 / 10 * 6),
transparent calc(100% / 2.4 / 10 * 6), transparent 100%
),
radial-gradient(
circle at calc(50% + (25% / 2)),
#fff 0%, #fff calc(100% / 2.14 / 10 * 6),
transparent calc(100% / 2.15 / 10 * 6), transparent 100%
),
linear-gradient(
#{$horizontal},
#fff 0%, #fff $w25,
var(--green) $w25, var(--green) 100%
);
.star__container {
--width: 30px;
// width: calc(100% / 3 * 2 / 10);
top: calc(100% / 4);
left: calc((100% / 4) + (100% / 4 * 1.65));
transform: rotate(45deg);
}
}
&--palau {
--blue: #418fde;
--yellow: #f7ea48;
height: calc(#{$w} / 8 * 5);
background-image:
radial-gradient(
circle closest-side at calc(100% / 16 * 7) 50%,
var(--yellow) 0%, var(--yellow) calc(100% / 10 * 6),
var(--blue) calc(100% / 10 * 6), var(--blue) 100%
);
}
&--palestine {
--green: #007a3d;
--red: #ce1126;
position: relative;
height: calc(#{$w} / 2);
@include stripes($vertical, var(--black), var(--white), var(--green));
&::before {
display: block;
position: relative;
top: 0;
left: 0;
border-top: calc(#{$w} / 2 / 2) solid transparent;
border-bottom: calc(#{$w} / 2 / 2) solid transparent;
border-left: calc(#{$w} / 3) solid var(--red);
width: calc(#{$w} - 1.732 / 2 * (#{$w} / 2));
height: 0;
content: '';
}
}
&--panama {
--red: #d21034;
--blue: #005293;
position: relative;
background-image:
conic-gradient(
at center,
var(--red) 0%, var(--red) 90deg,
#fff 90deg, #fff 50%,
var(--blue) 50%, var(--blue) 75%,
#fff 75%, #fff 100%
);
.star__container {
--width: calc(#{$w} / 6);
transform: translate(-50%, -50%);
}
.star-1 {
top: 25%;
left: 25%;
.star__spikes {
--starColour: var(--blue);
}
}
.star-2 {
top: 75%;
left: 75%;
.star__spikes {
--starColour: var(--red);
}
}
}
&--papua-new-guinea {
--red: #c8102e;
position: relative;
height: calc(#{$w} / 4 * 3);
background-image:
linear-gradient(
36.6deg,
var(--black) 0%, var(--black) 50%,
var(--red) 50%, var(--red) 100%
);
#papua-new-guinea_coat {
position: absolute;
left: calc(#{$w} / 192 * 128);
top: calc(100% / 144 * 46);
transform: translate(-50%, -50%);
width: calc(#{$w} / 192 * 64);
}
.star__spikes {
--starColour: var(--white);
}
.star__container {
--width: calc(#{$w} / 192 * 18);
transform: translate(-50%, -50%);
}
.star-1 {
top: calc(100% / 144 * 54);
left: calc(100% / 192 * 48);
}
.star-2 {
top: calc(100% / 144 * 80);
left: calc(100% / 192 * 69);
}
.star-3 {
top: calc(100% / 144 * 120);
left: calc(100% / 192 * 48);
}
.star-4 {
top: calc(100% / 144 * 82);
left: calc(100% / 192 * 26);
}
.star-5 {
--width: calc(#{$w} / 192 * 10);
top: calc(100% / 144 * 100);
left: calc(100% / 192 * 57);
}
}
&--paraguay {
--blue: #0038a8;
--red: #d52b1e;
position: relative;
height: calc(#{$w} / 335 * 189);
@include stripes($vertical, var(--red), var(--white), var(--blue));
#paraguay_coat {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
max-width: 50%;
max-height: 28%;
}
}
&--peru {
--red: #d91023;
@include stripes($horizontal, var(--red), var(--white), var(--red));
}
&--philippines {
--blue: #0038a8;
--yellow: #fdc116;
--red: #ce1126;
position: relative;
border-top: calc(#{$w} / 2 / 2) solid var(--blue);
border-bottom: calc(#{$w} / 2 / 2) solid var(--red);
border-left: calc(1.732 / 2 * (#{$w} / 2)) solid #fff;
width: calc(#{$w} - 1.732 / 2 * (#{$w} / 2));
height: 0;
&:hover:after {
position: absolute;
left: calc(-1.732 / 2 * (#{$w} / 2));
top: calc(#{$w} / -4);
}
.star__container .star__spikes {
--starColour: var(--yellow);
}
.star-1,
.star-2,
.star-3 {
--width: calc(#{$w} / 18);
width: var(--width);
}
.star-1 {
top: calc(#{$w} / -4 + var(--width) / 2);
left: calc(-1.732 / 2 * (#{$w} / 2));
transform: rotate(-30deg);
}
.star-2 {
top: 50%;
left: calc(var(--width) * -2);
transform: translateY(-50%) rotate(90deg);
}
.star-3 {
top: calc(#{$w} / 4 - var(--width) * 1.5);
left: calc(-1.732 / 2 * (#{$w} / 2));
transform: rotate(30deg);
}
#philippines_coat {
position: absolute;
top: 0;
left: calc(-1.732 / 2 * (#{$w} / 2) + (#{$w} / 20));
transform: translate(0, -50%);
width: calc(#{$w} / 180 * 38);
}
}
&--poland {
--red: #f00;
height: calc(#{$w} / 8 * 5);
@include stripes($vertical, var(--white), var(--red));
}
&--portugal {
--green: #060;
--red: #f00;
position: relative;
@include stripesOdd($horizontal, 0%, var(--green), 40%, var(--red), 100%);
#portugal_coat {
position: absolute;
left: calc(100% / 5 * 2);
top: 50%;
transform: translate(-50%, -50%);
width: calc(100% / 5 / 26 * 46);
}
}
&--puerto-rico {
--blue: #0050f0;
--red: #ed0000;
position: relative;
@include stripes($vertical, var(--red), var(--white), var(--red), var(--white), var(--red));
&::before {
display: block;
position: relative;
top: 0;
left: 0;
border-top: calc(#{$w} / 3) solid transparent;
border-bottom: calc(#{$w} / 3) solid transparent;
border-left: calc(#{$w} / 2) solid var(--blue);
width: calc(#{$w} / 2);
height: 0;
content: '';
}
.star__container .star__spikes {
--starColour: #fff;
}
.star-1 {
--width: calc(#{$w} / 2 / 5 * 2);
top: calc(50%);
left: calc(#{$w} / 4);
transform: translate(-85%, -50%);
width: var(--width);
}
}
&--qatar {
--maroon: #8a1538;
position: relative;
height: calc(#{$w} / 28 * 11);
@include stripesOdd($horizontal, 0%, var(--white), calc(#{$w} / 7 * 2), var(--maroon), 100%);
.triangle {
position: absolute;
left: calc(#{$w} / 7 * 2);
border-top: calc(#{$w} / 28 * 11 / 18) solid transparent;
border-bottom: calc(#{$w} / 28 * 11 / 18) solid transparent;
border-left: calc(#{$w} / 14) solid var(--white);
}
.triangle--1 {
top: 0;
}
.triangle--2 {
top: calc(#{$w} / 28 * 11 / 9);
}
.triangle--3 {
top: calc(#{$w} / 28 * 11 / 9 * 2);
}
.triangle--4 {
top: calc(#{$w} / 28 * 11 / 9 * 3);
}
.triangle--5 {
top: calc(#{$w} / 28 * 11 / 9 * 4);
}
.triangle--6 {
top: calc(#{$w} / 28 * 11 / 9 * 5);
}
.triangle--7 {
top: calc(#{$w} / 28 * 11 / 9 * 6);
}
.triangle--8 {
top: calc(#{$w} / 28 * 11 / 9 * 7);
}
.triangle--9 {
top: calc(#{$w} / 28 * 11 / 9 * 8);
}
}
&--romania {
--blue: #002b7f;
--red: #ce1126;
--yellow: #fdc116;
@include stripes($horizontal, var(--blue), var(--yellow), var(--red));
}
&--russia {
--blue: #0039a6;
--red: #d52b1e;
@include stripes($vertical, var(--white), var(--blue), var(--red));
}
&--rwanda {
--blue: #0077c8;
--green: #007749;
--yellow: #ffd100;
position: relative;
@include stripesOdd($vertical, 0%, var(--blue), 50%, var(--yellow), 75%, var(--green), 100%);
#rwanda_coat {
position: absolute;
right: calc(#{$w} / 39 * 7);
top: calc(#{$w} / 3 * 2 / 260 * 64);
width: calc(#{$w} / 39 * 6);
transform: translate(50%, -50%);
}
}
&--st-kitts-nevis {
--green: #009e49;
--red: #ce1126;
--yellow: #fcd116;
position: relative;
background-image:
linear-gradient(
-33deg,
var(--red) 0%, var(--red) 36.666%,
var(--yellow) 36.666%, var(--yellow) 40%,
var(--black) 40%, var(--black) 60%,
var(--yellow) 60%, var(--yellow) 63.333%,
var(--green) 63.333%, var(--green) 100%
);
.star__container .star__spikes {
--starColour: #fff;
}
.star-1 {
--width: calc(#{$w} / 2 / 5 * 2);
top: 70%;
left: 22%;
transform: translate(0%, -50%) rotate(184deg);
width: var(--width);
}
.star-2 {
--width: calc(#{$w} / 2 / 5 * 2);
top: 36%;
left: 78%;
transform: translate(-100%, -50%) rotate(184deg);
width: var(--width);
}
}
&--st-lucia {
--blue: #9bcbeb;
--yellow: #fcd116;
position: relative;
height: calc(#{$w} / 2);
background-color: var(--blue);
.canton {
position: absolute;
left: 50%;
top: 10%;
transform: translateX(-50%);
border-right: calc(#{$w} / 100 * 18) solid transparent;
border-bottom: calc(#{$w} / 2 / 4 * 3) solid var(--white);
border-left: calc(#{$w} / 100 * 18) solid transparent;
&::before {
position: absolute;
left: 50%;
top: calc(#{$w} / 20);
z-index: 1;
transform: translateX(-50%);
border-right: calc(#{$w} / 100 * 15) solid transparent;
border-bottom: calc(#{$w} / 2 / 4 * 3 * .865) solid var(--black);
border-left: calc(#{$w} / 100 * 15) solid transparent;
content: '';
}
&::after {
position: absolute;
left: 50%;
top: calc(#{$w} / 2 / 4 * 3 / 2);
z-index: 1;
transform: translateX(-50%);
border-right: calc(#{$w} / 100 * 18) solid transparent;
border-bottom: calc(#{$w} / 2 / 4 * 3 / 2) solid var(--yellow);
border-left: calc(#{$w} / 100 * 18) solid transparent;
content: '';
}
}
}
&--st-vincent-grenadines {
--blue: #0072c6;
--green: #009e60;
--yellow: #fcd116;
position: relative;
@include stripesOdd($horizontal, 0%, var(--blue), 25%, var(--yellow), 75%, var(--green), 100%);
.canton {
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%);
width: calc(#{$w} / 4);
height: calc(#{$w} / 8);
.diamond {
&:nth-child(1) {
top: 0;
left: 0;
}
&:nth-child(2) {
top: 100%;
left: 50%;
transform: translateX(-50%);
}
&:nth-child(3) {
top: 0;
right: 0;
}
}
}
.diamond {
position: absolute;
border-top: calc(#{$w} / 8 / 8 * 7) solid var(--green);
border-right: calc(#{$w} / 4 / 9 * 2) solid transparent;
border-left: calc(#{$w} / 4 / 9 * 2) solid transparent;
&::before {
display: block;
position: absolute;
top: calc(#{$w} / 8 / 8 * -7 * 2);
left: calc(#{$w} / 4 / 9 * -2);
border-right: calc(#{$w} / 4 / 9 * 2) solid transparent;
border-bottom: calc(#{$w} / 8 / 8 * 7) solid var(--green);
border-left: calc(#{$w} / 4 / 9 * 2) solid transparent;
content: '';
}
}
}
&--san-marino {
--blue: #62b5e5;
position: relative;
height: calc(#{$w} / 4 * 3);
@include stripes($vertical, var(--white), var(--blue));
#san-marino_coat {
position: absolute;
left: 50%;
top: 47.5%;
transform: translate(-50%, -50%);
width: calc(100% / 3);
}
}
&--saudi-arabia {
--green: #009a44;
position: relative;
background-color: var(--green);
#saudi-arabia_coat {
position: absolute;
left: 50%;
top: 25%;
transform: translateX(-50%);
width: calc(#{$w} / 2);
}
}
&--scotland {
--blue: #005eb8;
height: calc(#{$w} / 5 * 3);
background-color: var(--blue);
background-image:
linear-gradient(
to top right,
transparent 0%, transparent calc(100% / 26 * 11.5),
#fff calc(100% / 26 * 11.5), #fff calc(100% / 26 * 14.5),
transparent calc(100%/ 26 * 14.5), transparent 100%
),
linear-gradient(
to bottom right,
transparent 0%, transparent calc(100% / 26 * 11.5),
#fff calc(100% / 26 * 11.5), #fff calc(100% / 26 * 14.5),
transparent calc(100%/ 26 * 14.5), transparent 100%
);
}
&--senegal {
--green: #00853f;
--red: #e31b23;
--yellow: #fdef42;
position: relative;
@include stripes($horizontal, var(--green), var(--yellow), var(--red));
.star__container .star__spikes {
--starColour: var(--green);
}
.star-1 {
--width: calc(#{$w} / 5);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: var(--width);
}
}
&--serbia {
--blue: #0c4076;
--red: #c6363c;
position: relative;
@include stripes($vertical, var(--red), var(--blue), var(--white));
#serbia_coat {
position: absolute;
left: calc(100% / 2 - (100% / 7));
top: 46%;
transform: translate(-50%, -50%);
width: 25%;
}
}
&--seychelles {
--blue: #002f6c;
--green: #007a33;
--red: #d22630;
--yellow: #fed141;
height: calc(#{$w} / 2);
background-image:
conic-gradient(
at 0% 100%,
var(--blue) 0%, var(--blue) 7.5%,
var(--yellow) 7.5%, var(--yellow) 15%,
var(--red) 15%, var(--red) 20%,
var(--white) 20%, var(--white) 22.5%,
var(--green) 22.5%, var(--green) 25%
);
}
&--sierra-leone {
--blue: #0072c6;
--green: #1eb53a;
@include stripes($vertical, var(--green), var(--white), var(--blue));
}
&--singapore {
--red: #f00;
position: relative;
background-image:
radial-gradient(
circle at calc(#{$w} / 54 * 15) 25%,
var(--red) 0%, var(--red) calc(100% / 216 * 59 / 2),
transparent calc(100% / 216 * 59 / 2), transparent 100%
),
radial-gradient(
circle at calc(#{$w} / 432 * 91) 25%,
var(--white) 0%, var(--white) calc(100% / 216 * 53 / 2),
transparent calc(100% / 216 * 53 / 2), transparent 100%
),
linear-gradient(
$vertical,
var(--red) 0%, var(--red) 50%,
var(--white) 50%, var(--white) 100%
);
.star__container .star__spikes {
--starColour: var(--white);
}
.star-1,
.star-2,
.star-3,
.star-4,
.star-5{
--width: calc(#{$w} / 135 * 8);
width: var(--width);
}
.star-1 {
top: calc(#{$w} / 3 * 2 / 90 * 13);
left: calc(#{$w} / 54 * 15);
transform: translate(-50%, -50%);
}
.star-2 {
top: calc(#{$w} / 3 * 2 / 90 * 13);
left: calc(#{$w} / 135 * 47);
transform: translate(-50%, 50%);
}
.star-3 {
top: calc(#{$w} / 3 * 2 / 45 * 16);
left: calc(#{$w} / 135 * 47);
transform: translate(-100%, -60%);
}
.star-4 {
top: calc(#{$w} / 3 * 2 / 45 * 16);
left: calc(#{$w} / 432 * 91);
transform: translate(0, -60%);
}
.star-5 {
top: calc(#{$w} / 3 * 2 / 90 * 13);
left: calc(#{$w} / 432 * 91);
transform: translate(-50%, 50%);
}
}
&--slovakia {
--blue: #0b4ea2;
--red: #ee1c25;
position: relative;
@include stripes($vertical, var(--white), var(--blue), var(--red));
#slovakia_coat {
position: absolute;
border: 4px solid #fff;
border-bottom-right-radius: 60% 75%;
border-bottom-left-radius: 60% 75%;
left: calc(100% / 2);
top: 50%;
transform: translate(-100%, -50%);
height: calc(100% / 5 * 2.4);
background-color: #fff;
}
}
&--slovenia {
--blue: #005da4;
--red: #ed1c24;
position: relative;
height: calc(#{$w} / 2);
@include stripes($vertical, var(--white), var(--blue), var(--red));
#slovenia_coat {
position: absolute;
left: calc(100% / 4);
top: 50%;
transform: translate(-50%, -100%);
height: calc(100% / 3);
}
}
&--somalia {
--blue: #4189dd;
--starColour: #fff;
position: relative;
height: calc(#{$w} / 202 * 135);
background-color: var(--blue);
.star__container .star__spikes {
--starColour: #fff;
}
.star-1 {
--width: calc(#{$w} / 202 * 135 * 13 / 27);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: var(--width);
}
}
&--south-africa {
--blue: #001489;
--green: #007749;
--red: #e03c31;
--yellow: #ffb81c;
position: relative;
@include stripesOdd($vertical, 0%, var(--red), calc(100% / 15 * 5), var(--white), calc(100% / 15 * 6), var(--green), calc(100% / 15 * 9), var(--white), calc(100% / 15 * 10), var(--blue), 100%);
&::before {
position: absolute;
display: block;
left: 0;
top: 0;
width: 52%;
height: 50%;
background-image: linear-gradient(
32.5deg,
var(--black) 0%, var(--black) 31%,
var(--yellow) 31%, var(--yellow) 38%,
var(--green) 38%, var(--green) 60%,
var(--white) 60%, var(--white) 67%,
var(--red) 67%, var(--red) 100%,
);
content: '';
}
&::after {
position: absolute;
display: block;
top: auto;
left: 0;
bottom: 0;
margin: 0;
width: 52%;
height: 50%;
background-image: linear-gradient(
147deg,
var(--black) 0%, var(--black) 31%,
var(--yellow) 31%, var(--yellow) 38%,
var(--green) 38%, var(--green) 60%,
var(--white) 60%, var(--white) 67%,
var(--blue) 67%, var(--blue) 100%,
);
content: '';
}
}
&--south-korea {
--blue: #002f6c;
--red: #c8102e;
position: relative;
.yin-yang {
--colour-1: var(--red);
--colour-2: var(--blue);
--width: calc(#{$w} / 3 / 2);
left: 50%;
top: 50%;
transform: translate(-50%, -50%) rotate(35deg);
border-width: 0 0 var(--width) 0;
&::before {
background-color: var(--colour-2);
}
&::after {
background-color: var(--colour-1);
}
}
.trigram {
position: absolute;
transform-origin: center center;
width: calc(#{$w} / 144 * 24);
height: calc(#{$w} / 144 * 16);
background-image:
linear-gradient(
$vertical,
var(--black) 0%, var(--black) calc(100% / 16 * 4),
var(--white) calc(100% / 16 * 4), var(--white) calc(100% / 16 * 6),
var(--black) calc(100% / 16 * 6), var(--black) calc(100% / 16 * 10),
var(--white) calc(100% / 16 * 10), var(--white) calc(100% / 16 * 12),
var(--black) calc(100% / 16 * 12), var(--black) 100%
);
&--1 {
left: 25%;
top: 25%;
transform: translate(-50%, -50%) rotate(-55deg);
}
&--2 {
left: 75%;
top: 25%;
transform: translate(-50%, -50%) rotate(-125deg);
&::before,
&::after {
display: block;
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: calc(100% / 12);
height: calc(100% / 16 * 5);
background-color: var(--white);
content: '';
}
&::after {
top: 0;
bottom: auto;
}
}
&--3 {
left: 75%;
top: 75%;
transform: translate(-50%, -50%) rotate(-55deg);
&::before {
display: block;
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: calc(100% / 12);
height: 100%;
background-color: var(--white);
content: '';
}
}
&--4 {
left: 25%;
top: 75%;
transform: translate(-50%, -50%) rotate(-125deg);
&::before {
display: block;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: calc(100% / 12);
height: calc(100% / 16 * 5);
background-color: var(--white);
content: '';
}
}
}
}
&--south-sudan {
--blue: #0f47af;
--green: #078930;
--red: #da121a;
--yellow: #fcdd09;
position: relative;
height: calc(#{$w} / 2);
@include stripesOdd($vertical, 0%, var(--black), 30%, var(--white), 35%, var(--red), 65%, var(--white), 70%, var(--green), 100%);
&::before {
display: block;
position: relative;
top: 0;
left: 0;
border-top: calc(#{$w} / 2 / 2) solid transparent;
border-bottom: calc(#{$w} / 2 / 2) solid transparent;
border-left: calc(1.732 / 2 * (#{$w} / 2)) solid var(--blue);
width: calc(#{$w} - 1.732 / 2 * (#{$w} / 2));
height: 0;
content: '';
}
.star__container .star__spikes {
--starColour: var(--yellow);
}
.star-1 {
--width: calc(#{$w} / 2 / 20 * 6);
top: calc(50%);
left: calc(1.732 / 2 * (#{$w} / 2) / 2 - var(--width));
transform: translateY(-50%) rotate(-20deg);
width: var(--width);
}
}
&--spain {
--red: #aa151b;
--yellow: #f1bf00;
position: relative;
@include stripesOdd($vertical, 0%, var(--red), 25%, var(--yellow), 75%, var(--red), 100%);
#spain_coat {
position: absolute;
left: calc(100% / 3);
top: 50%;
transform: translate(-50%, -50%);
height: calc(100% / 5 * 2);
}
}
&--sri-lanka {
--green: #007a33;
--orange: #ff8200;
--red: #9b2743;
--yellow: #ffcd00;
position: relative;
height: calc(#{$w} / 2);
background-image:
linear-gradient(
$vertical,
var(--yellow) 0%, var(--yellow) calc(#{$w} / 2 / 75 * 7),
transparent calc(#{$w} / 2 / 75 * 7), transparent calc(#{$w} / 2 / 75 * 68),
var(--yellow) calc(#{$w} / 2 / 75 * 68), var(--yellow) 100%
),
linear-gradient(
$horizontal,
var(--yellow) 0%, var(--yellow) calc(#{$w} / 150 * 7),
var(--green) calc(#{$w} / 150 * 7), var(--green) calc(#{$w} / 150 * 26.5),
var(--orange) calc(#{$w} / 150 * 26.5), var(--orange) calc(#{$w} / 150 * 46),
var(--yellow) calc(#{$w} / 150 * 46), var(--yellow) calc(#{$w} / 150 * 53),
var(--red) calc(#{$w} / 150 * 53), var(--red) calc(#{$w} / 150 * 143),
var(--yellow) calc(#{$w} / 150 * 143), var(--yellow) 100%
);
#sri-lanka_coat {
position: relative;
top: 50%;
left: calc(#{$w} / 150 * 98);
transform: translate(-50%, -50%);
width: calc(#{$w} / 15 * 8.4);
}
}
&--sudan {
--green: #007229;
--red: #d21034;
position: relative;
height: calc(#{$w} / 2);
@include stripes($vertical, var(--red), var(--white), var(--black));
&::before {
display: block;
position: relative;
top: 0;
left: 0;
border-top: calc(#{$w} / 2 / 2) solid transparent;
border-bottom: calc(#{$w} / 2 / 2) solid transparent;
border-left: calc(#{$w} / 3) solid var(--green);
width: calc(#{$w} - 1.732 / 2 * (#{$w} / 2));
height: 0;
content: '';
}
}
&--suriname {
--green: #377e3f;
--red: #b40a2d;
--starColour: #ecc81d;
position: relative;
@include stripesOdd($vertical, 0%, var(--green), 20%, var(--white), 30%, var(--red), 70%, var(--white), 80%, var(--green), 100%);
.star__container .star__spikes {
--starColour: #ecc81d;
}
.star-1 {
--width: calc(#{$w} / 3.75);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: var(--width);
}
}
&--swaziland {
--blue: #00afd7;
--red: #d50032;
--yellow: #fce300;
position: relative;
@include stripesOdd($vertical, 0%, var(--blue), calc(100% / 8 * 1.5), var(--yellow), calc(100% / 4), var(--red), calc(100% / 4 * 3), var(--yellow), calc(100% / 8 * 6.5), var(--blue), 100%);
#swaziland_coat {
position: absolute;
left: 50%;
top: 50%;
height: 45%;
transform: translate(-50%, -50%);
}
}
&--sweden {
--blue: #006aa7;
--yellow: #fecc00;
height: calc(#{$w} / 8 * 5);
background-color: var(--blue);
background-image:
linear-gradient(
#{$horizontal},
transparent 0%, transparent calc(100% / 17 * 5),
var(--yellow) calc(100% / 17 * 5), var(--yellow) calc(100% / 17 * 7),
transparent calc(100% / 17 * 7), transparent 100%
),
linear-gradient(
#{$vertical},
transparent 0%, transparent $w40,
var(--yellow) $w40, var(--yellow) $w60,
transparent $w60, transparent 100%
);
}
&--switzerland {
--red: #da291c;
height: $w;
background-color: var(--red);
background-image:
linear-gradient(
#{$horizontal},
var(--red) 0%, var(--red) calc(100% / 32 * 6),
transparent calc(100% / 32 * 6), transparent calc(100% / 32 * 26),
var(--red) calc(100% / 32 * 26), var(--red) 100%
),
linear-gradient(
#{$vertical},
var(--red) 0%, var(--red) calc(100% / 32 * 6),
transparent calc(100% / 32 * 6), transparent calc(100% / 32 * 26),
var(--red) calc(100% / 32 * 26), var(--red) 100%
),
linear-gradient(
#{$horizontal},
transparent 0%, transparent calc(100% / 32 * 13),
#fff calc(100% / 32 * 13), #fff calc(100% / 32 * 19),
transparent calc(100% / 32 * 19), transparent 100%
),
linear-gradient(
#{$vertical},
transparent 0%, transparent calc(100% / 32 * 13),
#fff calc(100% / 32 * 13), #fff calc(100% / 32 * 19),
transparent calc(100% / 32 * 19), transparent 100%
);
}
&--syria {
--green: #007a3d;
--red: #ce1126;
position: relative;
@include stripes($vertical, var(--red), var(--white), var(--black));
.star__container .star__spikes {
--starColour: var(--green);
}
.star-1,
.star-2 {
--width: calc(#{$w} / 3 * 2 / 4);
top: 50%;
left: 30%;
transform: translate(-50%, -50%);
width: var(--width);
}
.star-2 {
left: 70%;
}
}
&--taiwan {
--blue: #000095;
--red: #fe0000;
position: relative;
background-color: var(--red);
&::before {
display: block;
position: relative;
background-color: var(--blue);
content: '';
}
#taiwan_coat {
position: absolute;
top: 0;
left: 0;
width: calc(#{$w} / 2);
height: calc(#{$w} / 3);
background-color: var(--blue);
text-align: center;
img {
max-height: 100%;
}
}
}
&--tajikistan {
--green: #78be20;
--red: #e40046;
position: relative;
height: calc(#{$w} / 2);
@include stripesOdd($vertical, 0%, var(--red), calc(100% / 7 * 2), var(--white), calc(100% / 7 * 5), var(--green), 100%);
#tajikistan_coat {
position: absolute;
left: 50%;
top: 50%;
width: calc(#{$w} / 2 / 14 * 6);
transform: translate(-50%, -50%);
}
}
&--tanzania {
--blue: #00a3dd;
--green: #1eb53a;
--yellow: #fcd116;
background-image: linear-gradient(
147.5deg,
var(--green) 0%, var(--green) 40.5%,
var(--yellow) 40.5%, var(--yellow) 43.5%,
var(--black) 43.5%, var(--black) 56.5%,
var(--yellow) 56.5%, var(--yellow) 59.5%,
var(--blue) 59.5%, var(--blue) 100%,
);
}
&--thailand {
--red: #ef3340;
--blue: #00205b;
@include stripesOdd($vertical, 0%, var(--red), 16.66%, var(--white), 33.33%, var(--blue), 66.66%, var(--white), 83.33%, var(--red), 100%);
}
&--togo {
--green: #006a4e;
--red: #d21034;
--yellow: #ffce00;
height: calc(#{$w} / 1.618);
position: relative;
@include stripes($vertical, var(--green), var(--yellow), var(--green), var(--yellow), var(--green));
.canton {
--cantonW: calc(#{$w} / 1.618 / 5 * 3);
box-sizing: border-box;
position: relative;
top: 0;
left: 0;
width: var(--cantonW);
height: var(--cantonW);
background-color: var(--red);
}
.star__container .star__spikes {
--starColour: var(--white);
}
.star__container {
--width: calc(#{$w} / 1.618 / 5 * 3 / 5 * 3);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
&--trinidad-tobago {
--red: #e30a17;
--start: 41.5%;
height: calc(#{$w} / 5 * 3);
background-color: var(--red);
background-image:
linear-gradient(
40.7deg,
transparent 0%, transparent var(--start),
var(--white) var(--start), var(--white) calc(var(--start) + #{$w} / 30),
var(--black) calc(var(--start) + #{$w} / 30), var(--black) calc(var(--start) + #{$w} / 35 + #{$w} / 15 * 2),
var(--white) calc(var(--start) + #{$w} / 35 + #{$w} / 15 * 2), var(--white) calc(var(--start) + #{$w} / 35 + #{$w} / 15 * 2 + #{$w} / 30),
transparent calc(var(--start) + #{$w} / 35 + #{$w} / 15 * 2 + #{$w} / 30), transparent 100%
);
}
&--tunisia {
--red: #e70013;
position: relative;
background-color: var(--red);
background-image:
radial-gradient(
circle closest-side at calc(#{$w} / 15 * 8) 50%,
var(--white) 0%, var(--white) calc(100% / 10 * 3),
transparent calc(100% / 10 * 3), transparent 100%
),
radial-gradient(
circle closest-side at 50% 50%,
var(--red) 0%, var(--red) calc(100% / 8 * 3),
var(--white) calc(100% / 8 * 3), var(--white) calc(100% / 8 * 4),
transparent calc(100% / 8 * 4), transparent 100%
);
.star__container .star__spikes {
--starColour: var(--red);
}
.star__container {
--width: #{$w} / 3 * 2 / 80 * 18;
top: 50%;
left: calc(#{$w} / 15 * 8);
transform: translate(-50%, -50%) rotate(-21deg);
}
}
&--turkey {
--red: #e30a17;
position: relative;
background-color: transparent;
background-image:
radial-gradient(
circle at calc(#{$w} / 3 + (#{$w} / 3 * 2 / 30) + (#{$w} / 3 * 2 / 16)),
var(--red) 0%, var(--red) calc(#{$w} / 3 * .4),
transparent calc(#{$w} / 3 * .4), transparent 100%
),
radial-gradient(
circle at calc(#{$w} / 3 + (#{$w} / 3 * 2 / 30)),
#fff 0%, #fff calc(#{$w} / 3 / 2),
transparent calc(#{$w} / 3 / 2), transparent 100%
),
linear-gradient(
#{$horizontal},
#fff 0%, #fff calc(#{$w} / 3 * 2 / 30),
var(--red) calc(#{$w} / 3 * 2 / 30), var(--red) 100%
);
.star__container {
--width: #{$w} / 3 * 2 / 4;
top: 50%;
left: calc(#{$w} / 3 + (#{$w} / 3 * 2 / 30) + (#{$w} / 3 * 2 / 16));
transform: translate(55%, -50%) rotate(-21deg);
}
}
&--turkmenistan {
--green: #006747;
--red: #a6192e;
position: relative;
background-image:
radial-gradient(
circle at calc(100% / 1500 * 695) calc(100% / 1000 * 206),
var(--green) 0%, var(--green) calc(100% / 1500 * 124),
transparent calc(100% / 1500 * 124), transparent 100%
),
radial-gradient(
circle at calc(100% / 1500 * 726) calc(100% / 1000 * 225),
var(--white) 0%, var(--white) calc(100% / 1500 * 124),
var(--green) calc(100% / 1500 * 124), var(--green) 100%
);
#turkmenistan_coat {
position: absolute;
top: 0;
left: calc(100% / 25 * 3);
border-bottom: calc(#{$w} / 3 * 2 / 100) solid var(--red);
height: calc(99%);
background-color: var(--red);
}
.star__container {
--width: #{$w} / 125 * 4;
transform: translate(50%, -50%) rotate(180deg);
}
.star-1 {
left: calc(100% / 1500 * 562);
top: calc(100% / 1000 * 203);
}
.star-2 {
left: calc(100% / 1500 * 626);
top: calc(100% / 1000 * 107);
}
.star-3 {
left: calc(100% / 1500 * 626);
top: calc(100% / 1000 * 171);
}
.star-4 {
left: calc(100% / 1500 * 626);
top: calc(100% / 1000 * 235);
}
.star-5 {
left: calc(100% / 1500 * 690);
top: calc(100% / 1000 * 139);
}
}
&--uganda {
--red: #c8102e;
--yellow: #ffcd00;
position: relative;
@include stripes($vertical, var(--black), var(--yellow), var(--red), var(--black), var(--yellow), var(--red));
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
height: calc(#{$w} / 3 * 2 / 3);
width: calc(#{$w} / 3 * 2 / 3);
background-color: var(--white);
text-align: center;
}
#uganda_coat {
margin-top: 5%;
height: 90%;
}
}
&--ukraine {
--blue: #005bbb;
--yellow: #ffd500;
@include stripes($vertical, var(--blue), var(--yellow));
}
&--united-arab-emirates {
--green: #00732f;
--red: #f00;
height: calc(#{$w} / 2);
position: relative;
@include stripes($vertical, var(--green), var(--white), var(--black));
&::before {
display: block;
position: relative;
top: 0;
left: 0;
width: calc(#{$w} / 4);
height: 100%;
background-color: var(--red);
content: '';
}
}
&--united-kingdom {
--red: #c60c30;
--blue: #002776;
height: calc(#{$w} / 2);
background-color: var(--blue);
background-image:
linear-gradient(
#{$horizontal},
transparent 0%, transparent 45%,
var(--red) 45%, var(--red) 55%,
transparent 55%, transparent 100%
),
linear-gradient(
#{$vertical},
transparent 0%, transparent calc((100% - (100% / 6)) / 2),
var(--red) calc((100% - (100% / 6)) / 2), var(--red) calc((100% - (100% / 6)) / 2 + (100% / 6)),
transparent calc((100% - (100% / 6)) / 2 + (100% / 6)), transparent 100%
),
linear-gradient(
#{$horizontal},
transparent 0%, transparent 41.66%,
#fff 41.66%, #fff 58.33%,
transparent 58.33%, transparent 100%
),
linear-gradient(
#{$vertical},
transparent 0%, transparent $w33,
#fff $w33, #fff $w66,
transparent $w66, transparent 100%
),
linear-gradient(
to top right,
transparent 0%, transparent calc(100% / 26 * 12.25),
var(--red) calc(100% / 26 * 12.25), var(--red) calc(100% / 26 * 13),
transparent calc(100%/ 26 * 13), transparent 100%
),
linear-gradient(
to bottom right,
transparent 0%, transparent calc(100% / 26 * 12.25),
var(--red) calc(100% / 26 * 12.25), var(--red) calc(100% / 26 * 13),
transparent calc(100%/ 26 * 13), transparent 100%
),
linear-gradient(
to top right,
transparent 0%, transparent calc(100% / 26 * 11.5),
#fff calc(100% / 26 * 11.5), #fff calc(100% / 26 * 14.5),
transparent calc(100%/ 26 * 14.5), transparent 100%
),
linear-gradient(
to bottom right,
transparent 0%, transparent calc(100% / 26 * 11.5),
#fff calc(100% / 26 * 11.5), #fff calc(100% / 26 * 14.5),
transparent calc(100%/ 26 * 14.5), transparent 100%
);
}
&--usa {
--red: #cc0c2f;
--blue: #002c77;
height: calc(#{$w} / 19 * 10);
position: relative;
@include stripes($vertical, var(--red), var(--white), var(--red), var(--white), var(--red), var(--white), var(--red), var(--white), var(--red), var(--white), var(--red), var(--white), var(--red));
.canton {
--cantonW: calc(#{$w} / 5 * 2);
box-sizing: border-box;
position: relative;
margin: 0;
top: 0;
left: 0;
width: var(--cantonW);
height: calc(#{$w} / 19 * 10 / 13 * 7);
background-color: var(--blue);
padding: 0;
padding: calc(var(--cantonW) / 16 / 1.3) calc(var(--cantonW) / 16 / 2 * 1.5);
line-height: calc(var(--cantonW) / 16 / 2);
}
.star__container {
--width: calc(var(--cantonW) / 15);
display: inline-block;
margin-right: var(--width);
margin-bottom: 0;
width: var(--width);
height: calc(var(--width) / 3);
display: inline-block;
position: relative;
left: auto;
top: auto;
&:nth-child(6),
&:nth-child(17),
&:nth-child(28),
&:nth-child(39),
&:nth-child(50) {
margin-right: 0;
}
&:nth-child(7),
&:nth-child(18),
&:nth-child(29),
&:nth-child(40) {
margin-left: calc(var(--width) + 3px);
}
}
}
&--uruguay {
--blue: #0038a8;
position: relative;
@include stripes($vertical, var(--white), var(--blue), var(--white), var(--blue), var(--white), var(--blue), var(--white), var(--blue), var(--white));
&::before {
display: block;
position: relative;
top: 0;
left: 0;
width: calc(#{$w} / 3 * 2 / 9 * 5);
height: calc(#{$w} / 3 * 2 / 9 * 4.99);
background-color: #fff;
content: '';
}
#uruguay_coat {
position: absolute;
left: calc(#{$w} / 3 * 2 / 9 * 5 / 2);
top: calc(#{$w} / 3 * 2 / 9 * 5 / 2);
transform: translate(-50%, -50%);
width: calc(#{$w} / 3 * 2 / 9 * 4);
}
}
&--uzbekistan {
--blue: #0092bc;
--green: #43b02a;
--red: #e03c31;
position: relative;
height: calc(#{$w} / 2);
background-image:
radial-gradient(
circle at calc(#{$w} / 1000 * 167) calc(100% / 25 * 4),
var(--blue) 0%, var(--blue) calc(100% / 50 * 2.5),
transparent calc(100% / 50 * 2.5), transparent 100%
),
radial-gradient(
circle at calc(#{$w} / 50 * 7) calc(100% / 25 * 4),
var(--white) 0%, var(--white) calc(100% / 50 * 3),
transparent calc(100% / 50 * 3), transparent 100%
),
linear-gradient(
$vertical,
var(--blue) 0%, var(--blue) calc(100% / 50 * 16),
var(--red) calc(100% / 50 * 16), var(--red) calc(100% / 50 * 17),
var(--white) calc(100% / 50 * 17), var(--white) calc(100% / 50 * 33),
var(--red) calc(100% / 50 * 33), var(--red) calc(100% / 50 * 34),
var(--green) calc(100% / 50 * 34), var(--green) 100%,
);
.star__container .star__spikes {
--starColour: var(--white);
}
.star-13,
.star-14,
.star-15,
.star-25,
.star-24,
.star-23,
.star-22,
.star-35,
.star-34,
.star-33,
.star-32,
.star-31 {
--width: calc(#{$w} / 125 * 3);
width: var(--width);
top: calc(100% / 125 * 32);
transform: translate(50%, -75%);
}
.star-22,
.star-23,
.star-24,
.star-25 {
top: calc(100% / 25 * 4);
}
.star-13,
.star-14,
.star-15 {
top: calc(100% / 125 * 8);
}
.star-31 {
left: calc(100% / 1000 * 167);
}
.star-32,
.star-22 {
left: calc(100% / 1000 * 215);
}
.star-33,
.star-23,
.star-13 {
left: calc(100% / 1000 * 263);
}
.star-34,
.star-24,
.star-14 {
left: calc(100% / 1000 * 311);
}
.star-35,
.star-25,
.star-15 {
left: calc(100% / 1000 * 359);
}
}
&--venezuela {
--blue: #003893;
--red: #ce1126;
--yellow: #fc0;
position: relative;
@include stripes($vertical, var(--yellow), var(--blue), var(--red));
.star__container {
--width: #{$w} / 3 * 2 / 12;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.star-1 {
top: calc(#{$w66} - var(--width) * 0.3);
left: $w33;
transform: translate(-50%, -100%);
}
.star-2 {
top: calc(#{$w33} + var(--width) * 1.6);
left: calc(50% - var(--width) * 2.6);
transform: translate(-50%, 0) rotate(-55deg);
}
.star-3 {
top: calc(#{$w33} + var(--width) * 0.7);
left: calc(50% - var(--width) * 1.7);
transform: translate(-50%, 0) rotate(-35deg);
}
.star-4 {
top: calc(#{$w33} + var(--width) * 0.3);
left: calc(50% - var(--width) * 0.15);
transform: translate(-100%, 0) rotate(-10deg);
}
.star-5 {
top: calc(#{$w33} + var(--width) * 0.3);
left: calc(50% + var(--width) * 0.15);
transform: translate(0, 0) rotate(10deg);
}
.star-6 {
top: calc(#{$w33} + var(--width) * 0.7);
left: calc(50% + var(--width) * 1.7);
transform: translate(-50%, 0) rotate(35deg);
}
.star-7 {
top: calc(#{$w33} + var(--width) * 1.6);
left: calc(50% + var(--width) * 2.6);
transform: translate(-50%, 0) rotate(55deg);
}
.star-8 {
top: calc(#{$w66} - var(--width) * 0.3);
left: $w66;
transform: translate(-50%, -100%);
}
}
&--vietnam {
--red: #da251d;
--starColour: #ff0;
position: relative;
background-color: var(--red);
.star__container .star__spikes {
--starColour: #ff0;
}
.star-1 {
--width: calc(#{$w} / 5 * 2);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: var(--width);
}
}
&--wales {
--green: green;
position: relative;
height: calc(#{$w} / 5 * 3);
@include stripes($vertical, var(--white), var(--green));
#wales_dragon {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 80%;
}
}
&--yemen {
--red: #ce1126;
position: relative;
@include stripes($vertical, var(--red), var(--white), var(--black));
}
&--zambia {
--green: #009e49;
--orange: #fcad56;
--red: #ef3340;
position: relative;
@include stripesOdd($horizontal, 0%, var(--green), calc(100% / 336 * 216), var(--red), calc(100% / 336 * 256), var(--black), calc(100% / 336 * 296), var(--orange), 100%);
&::before {
display: block;
position: relative;
top: 0;
left: 0;
width: 100%;
height: calc(#{$w} / 3 * 2 / 28 * 10);
background-color: var(--green);
content: '';
}
#zambia_coat {
position: absolute;
top: calc(#{$w} / 3 * 2 / 224 * 19);
right: calc(#{$w} / 336 * 7);
width: calc(#{$w} / 336 * 106);
}
}
&--zimbabwe {
--green: #00843d;
--red: #e4002b;
--yellow: #ffc72c;
position: relative;
height: calc(#{$w} / 2);
overflow: hidden;
@include stripes($vertical, var(--green), var(--yellow), var(--red), var(--black), var(--red), var(--yellow), var(--green));
&::before {
display: block;
position: absolute;
top: 0;
left: calc(#{$w} / 252 * 8);
border-top: calc(#{$w} / 2 / 2) solid transparent;
border-bottom: calc(#{$w} / 2 / 2) solid transparent;
border-left: calc(#{$w} / 3) solid var(--black);
width: calc(#{$w} / 3 * 2);
transform: scale(1.08);
height: 0;
content: '';
}
.canton {
display: block;
position: absolute;
top: 0;
left: 0;
z-index: 1;
border-top: calc(#{$w} / 2 / 2) solid transparent;
border-bottom: calc(#{$w} / 2 / 2) solid transparent;
border-left: calc(#{$w} / 3) solid var(--white);
width: calc(#{$w} / 3 * 2);
height: 0;
content: '';
}
#zimbabwe_coat {
position: absolute;
left: 0;
top: 0;
transform: translate(calc(#{$w} / 3 * -1 + 2.5%), -58%);
width: calc(#{$w} / 504 * 128);
}
}
}
.star {
&__container {
--width: 200px;
--starColour: #fff;
position: absolute;
left: 250px;
top: 0;
z-index: 10;
width: var(--width);
background: transparent;
padding-top: calc(var(--width) * .36);
padding-bottom: calc(var(--width) * .24);
}
&__spikes {
--starColour: white;
&--5 {
position: relative;
border-left: calc(var(--width) / 2) solid transparent;
border-right: calc(var(--width) / 2) solid transparent;
border-top: calc(var(--width) * .35) solid var(--starColour);
width: 0;
height: 0;
&:before {
position: absolute;
top: calc(var(--width) * -.36);
left: calc(var(--width) * -.24 * 2);
border-left: calc(var(--width) / 2) solid transparent;
border-right: calc(var(--width) / 2) solid transparent;
border-top: calc(var(--width) * .35) solid var(--starColour);
width: 0;
height: 0;
transform: rotate(-72deg);
content: '';
}
&:after {
position: absolute;
top: calc(var(--width) * -.36);
left: calc(var(--width) * -.52);
border-left: calc(var(--width) / 2) solid transparent;
border-right: calc(var(--width) / 2) solid transparent;
border-top: calc(var(--width) * .35) solid var(--starColour);
width: 0;
height: 0;
transform: rotate(73deg);
content: '';
}
&-2 {
position: absolute;
top: 37%;
border-top-color: var(--color-uj-red);
transform: scale(0.7);
&:before,
&:after {
border-top-color: var(--color-uj-red);
}
}
}
}
}
.star-7 {
path {
// stroke: yellow;
fill: red;
stroke-width: 0;
stroke-linejoin: arcs;
}
}
.yin-yang {
--colour-1: #eee;
--colour-2: red;
--width: 48px;
position: relative;
border-color: var(--colour-2);
border-style: solid;
border-width: 2px 2px calc(var(--width) + 2px) 2px;
border-radius: 100%;
width: calc(var(--width) * 2);
height: var(--width);
box-sizing: content-box;
background: var(--colour-1);
&::before {
position: absolute;
top: 50%;
left: 50%;
border: calc(var(--width) / 8 * 3) solid var(--colour-2);
border-radius: 100%;
width: calc(var(--width) / 4);
height: calc(var(--width) / 4);
background: var(--colour-1);
box-sizing: content-box;
content: '';
}
&::after {
position: absolute;
top: 50%;
left: 0;
border: calc(var(--width) / 8 * 3) solid var(--colour-1);
border-radius: 100%;
width: calc(var(--width) / 4);
height: calc(var(--width) / 4);
background: var(--colour-2);
box-sizing: content-box;
content: '';
}
}
.countries-list {
display: inline-block;
margin: 0;
padding: 0;
li {
float: left;
list-style-type: decimal;
margin: 0 1.5rem;
}
}
/*
General appearance, nothing related to what you see ;-)
*/
* {
box-model: border-box;
}
body {
line-height: 1.2em;
font-family: "Segoe UI", sans-serif;
}
a {
color: inherit;
&.todo {
opacity: 0.5;
text-decoration: none;
cursor: default;
&--partial {
text-decoration: underline;
cursor: pointer;
}
}
}
@function sqrt($r) {
$x0: 1; // initial value
$solution: false;
@for $i from 1 through 10 {
@if abs(2 * $x0) < 0,00000000000001 { // Don't want to divide by a number smaller than this
$solution: false;
}
$x1: $x0 - ($x0 * $x0 - abs($r)) / (2 * $x0) !global;
@if ( abs($x1 - $x0) / abs($x1)) < 0,0000001 { // 7 digit accuracy is desired
$solution: true;
}
$x0: $x1;
}
@if $solution == true {
// If $r is negative, then the output will be multiplied with <a href="http://en.wikipedia.org/wiki/Imaginary_number">i = √-1</a>
// (√xy = √x√y) => √-$r = √-1√$r
@if $r < 0 {
@return $x1 #{i};
}
@else {
@return $x1;
}
}
@else {
@return "No solution";
}
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.