/*
Theme Name: FCC New 2021
Author: SIMPLYGRAPHIX
Author URI: http://www.flagcolorcodes.com/
Description: Theme developed by Keshav Naidu.
Version: 2.1
Tags: Clean, Simple, White, Blue, Open
Text Domain: www.flagcolorcodes.com
*/

/*
Blue:  0359E2;
*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');

* {-moz-box-sizing: border-box; box-sizing: border-box; font-family: 'Poppins', Arial, Verdana; margin: 0; padding: 0; text-decoration-line: none;}

body {color: #555; font-size: 14px; line-height: 170%; font-weight: normal; font-family: 'Poppins', Arial, Verdana; margin: 0; padding:  0;}
html {scroll-behavior: smooth;}

a {color: #000; text-decoration: none; transition: all 0.100s ease-in-out;}
a:hover {color: #3e4a5a;}
/*input, textarea {-webkit-appearance: none; outline: none; -moz-border-radius: 0; border-radius: 0; font-size: 13px;}*/

p {font-size: 14px; padding: 0px 0 25px 0; line-height: 180%;}
p a {text-decoration: underline;}
p a:hover {text-decoration: underline; color: #000;}
h1, h2, h3, h4, h5, h6 {padding: 0 0 10px 0; margin: 0; font-weight: bold; line-height: 160%; color: #000;}
h1 {font-size: 42px; color: #000; padding: 0 0 0px 0; line-height: 130%; margin-top: -4px;}
h2 {font-size: 20px; color: #000;}
h3 {font-size: 20px; color: #333;}
h4 {font-size: 16px; color: #333;}

h1 i {display: block; width: 100%; font-style: normal;}
h1 span {font-size: 14px; display: block; width: 100%; font-style: normal;}

.clr {clear: both;}
.centered {max-width: 1100px; margin: 0 auto; padding-left: 20px; padding-right: 20px;}
.centered-medium {max-width: 1000px; margin: 0 auto; padding-left: 20px; padding-right: 20px;}
.centered-small {max-width: 800px; margin: 0 auto; padding-left: 20px; padding-right: 20px;}
.align-center {text-align: center;}
.float-right {float: right;}
.float-left {float: left;}
.space-top {padding-top: 40px;}
.space-top-10 {padding-top: 10px;}
.space-bottom {padding-bottom: 40px;}
.space-top-small {padding-top: 20px;}
.space-bottom-small {padding-bottom: 20px;}
.gray-bg {background-color: #f2f5f7;}
.blue-bg {background-color: #0359E2;}

.wp-block-image {margin-bottom: 26px;}
.wp-block-image figcaption {font-size: 11px; color: #888; background-color: #f2f2f2; padding: 0 10px;}
.wp-block-image img {display: block; width: 100%; height: auto; border:  1px solid #eee;}

.all-borders .wp-block-image {
  border:  1px solid #eee;
}

.grid{
  display:grid;
  grid-template-columns:auto 90px;
  grid-gap:5px;
  line-height:100%
}
.grid{display:grid; grid-template-columns:1fr;grid-gap:20px}
.gap5{grid-gap:5px}
.gap10{grid-gap:10px}
.gap20{grid-gap:20px}
.gap30{grid-gap:30px}
.fr1, .auto1 {grid-template-columns:1fr}
.fr2, .auto2 {grid-template-columns:1fr 1fr}
.fr3, .auto3 {grid-template-columns:1fr 1fr 1fr}
.fr4, .auto4 {grid-template-columns:1fr 1fr 1fr 1fr}
.fr5, .auto5 {grid-template-columns:1fr 1fr 1fr 1fr 1fr}
.fr6, .auto6 {grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr}




.button-style {
  font-size: 13px;
  display: inline-block;
  padding: 0 20px;
  background-color: transparent;
  border:  1px solid #999;
  line-height: 33px;
  height: 36px;
  border-radius: 20px;
  text-align: center;
}
.input-style {
  font-size: 13px;
  display: inline-block;
  padding: 0 20px;
  background-color: transparent;
  border:  2px solid #ddd;
  line-height: 33px;
  height: 36px;
  border-radius: 20px;
}
.transborder {border-color: transparent;}
.button-style:hover {background-color: #f0f0f0;}
.button-style:active {background-color: #c0c0c0;}
.button-style .icon {margin-bottom: -4px;}

.icon {
  font-size: 0;
  display: inline-block;
  width: 18px;
  height: 18px;
  /*background-color: pink;*/
  background-image: url(images/icons-sprite.svg);
  background-repeat: no-repeat;
}
.search {background-position: 0 0;}
.search-white {background-position: 0 -22px;}
.close-white {background-position: 2px -66px;}
.share {}
.fbk {background-position: 4px -113px;}
.twr {background-position: 1px -140px;}
.pin {background-position: 2px -166px;}
.ins {background-position: 1px -192px;}
.download {background-position: 2px -292px;}

.fbk-white {background-position: -16px -113px;}
.twr-white {background-position: -19px -140px;}
.pin-white {background-position: -18px -166px;}
.ins-white {background-position: -19px -192px;}

.darrow {background-position: 3px -272px;}



.logo {
  font-size: 0;
  display: inline-block;
  width: 196px;
  height: 30px;
  background-image: url(images/flag-color-codes-logo.svg);
  background-size: auto 100%;
}

header {
  width: 100%;
  /*background-color: #f0f0f0;*/
  padding: 20px 0;
  /*border-bottom: 1px solid #f0f0f0;*/
}

.headerin {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  grid-gap: 20px;
}

nav {}
nav ul {list-style: none; margin: 0; padding: 0;}
nav ul li {display: inline-block; margin: 0; padding: 0;}
nav ul li .toplevel {
  font-size: 13px;
  text-transform: uppercase;
  display: inline-block;
  height: 30px;
  line-height: 30px;
  padding: 0 16px;
  color: #333;
  font-weight: 500;
  border-radius: 15px;
}
nav ul li .toplevel:hover {
  color: #0359E2;
}
nav ul li .toplevel:active {
  color: #000;
  /*transform: scale(0.94);*/
}
nav ul li .hilight {
  color: #fff;
  background-color: #0359E2;
}
nav ul li .hilight:hover {
  color: #fff;
  opacity: 0.9;
}

.search-triger {cursor: pointer; display: inline-block; height: 30px; padding: 2px 0 0 0;}

.shadow {box-shadow: 0px 1px 32px 1px rgba(0,0,0,0.090);}

.control {
display: inline-block;
position: relative;
}

.trigger {
  cursor: pointer;
  user-select: none;
}

.duddu {padding-right: 30px!important;}
.duddu:after {
  content: '';
  display: inline-block;
  /*width: 8px; height: 8px;
  background-color: red;*/
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid #fff;
  position: absolute;
  right: 16px;
  top: 13px;
}


.dropdown {
/*display: none;*/
visibility: hidden;
  opacity: 0;
  transform: scale(0.80);
  position: absolute;
  top: 40px;
  padding: 20px;
  z-index: 10;
  background-color: #fff;
  transition: all 0.020s ease-in-out;
  border-radius: 4px;
  /*border:  1px solid #0359E2;*/
}
.dd-menu {min-width: 230px;}
.dd-menu ul li {list-style: none; font-size: 12px;}
.dd-menu ul li a {list-style: none;}
.dd-menu ul li a:hover {color: #0359E2;}
.dd-items {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
}
.dd-items li a {
  display: block;
}

.dropdown.is-open {
  /*display: block;*/
  top: 48px;
  visibility: visible;
  transform: scale(1,1);
  opacity: 1;
}
.dropdown h4 {font-size: 15px; font-weight: 400; color: #333;}
.arrow-top {}
.arrow-top:after {
  content: '';
  position: absolute;
  top: -10px;
  right: 18px;
  display: block;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #fff;
  
}
.right0 {right: 0;}


.model{
  z-index: 80;
  display:none;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  padding: 0px;
  /*background-color: #fff;*/
  /*cursor: zoom-out;*/
  background-color: rgba(0,22,73,0.9);
  /*backdrop-filter: blur(8px);*/
  z-index: 90;
  text-align: center;
}
.model-inner {
  display: table-cell;
  width: 100%;
  height: 100vh;
  vertical-align: top;
  text-align: center;
}
.close-model-hidden {
  display: table-cell;
  background-color: rgba(0,0,0,0.1);
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0; top: 0;
  z-index: 91;
}
.model-content {
  /*background-color: #fff;*/
  position: relative;
  display: block;
  /*max-width: 1000px;*/
  padding: 20px;
  margin: 0 auto;
  /*box-shadow: 0 0 140px rgba(0,0,0,0.5);*/
  border-radius: 4px;
  z-index: 100;
  top:  90px;
}

.model-content h3 {padding-bottom: 20px;}
.model-close-button {
  position: absolute;
  right: 0px;
  top: 0px;
  display: inline-block;
  width: 40px;
  height: 40px;
  text-align: center;
  cursor: pointer;
  z-index: 500;
  color: #000;
  font-size: 14px;
  line-height: 40px;
  border-radius: 50%;
  text-decoration: none;
}


.search-area {
  text-align: left;
}
.search-area h3 {color: #fff; padding-left: 20px;}
.search-area form input {
  font-size: 14px;
  font-weight: normal;
  color: #fff;
  display: block;
  width: 100%;
  background: transparent;
  outline: none;
  border: 2px solid rgba(255,255,255,0.5);
  border-radius: 40px;
  height: 50px;
  padding: 10px 50px 10px 20px;
}
.search-area form {
  position: relative;
  height: 50px;
}
.search-area form button {
  position: absolute;
  top:  3px;
  right: 20px;
  border:  none;
  background: none;
}
.search-area .model-close-button {top:  20px; right: 33px;}

.search-area form input::placeholder {
  color: rgba(255,255,255,0.6);
}
.search-area ul {margin: 20px 0 0 20px;}
.search-area ul li {list-style: none; margin: 2px 0;}
.search-area ul li a {color: rgba(255,255,255,0.5); display: block; padding: 4px 0; font-size: 12px; letter-spacing: 1px;}
.search-area ul li a .icon {margin-bottom: -5px; transform: scale(0.8);}
.search-area ul li a:hover {color: #fff;}

main {width: 100%; /*border-bottom: 1px solid #f0f0f0;*/}

main .centered {
  width: 100%;
  /*height: 46vh;*/
  /*padding: 20px;*/
  display: table;
  /*background-color: #f0f0f0;*/
  padding: 50px 20px;
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-position: right center;
}
.map-bg {
  background-image: url(images/main-world-map.svg);
}

.red-flag {
  background-image: url(images/red-flag.svg);
}

main h1 {max-width: 85%;}
main p {margin: 0; padding: 0;}
main .mainin {
  display: table-cell;
  vertical-align: middle;
}

.mainin-cols {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-gap: 20px;
}
.mainin-r {background-image: url(images/confetti-animation-svg.svg);}
.mainin-cols img {display: block; min-width: 360px; max-width: 360px; height: auto;}

main form, .form {position: relative; max-width: 340px; height: 40px; margin-top: 14px;}

.form {margin-top: 0px;}
.fullwidth {max-width: 100%; width: 100%;}


main form input,
.form input
 {
  border:  none;
  width: 100%;
  background-color: #eaeaea;
  /*border: 2px solid #eaeaea;*/
  transition: all 0.2s ease-in-out;
  height: 40px;
  border-radius: 20px;
  padding: 10px 40px 10px 20px;
}
main form input:focus,
.form input:focus
 {
  background-color: #f0f0f0;
  border-color: #c0c0c0;
}
main form button,
.form button
{
  position: absolute;
  border:  none;
  background: transparent;
  width: 20px; height: 20px;
  top: 8px; right: 14px;
  padding: 0;
  line-height: 0;
}
.search-status {
  display: block;
  font-size: 14px;
  padding: 0px 0px;
  margin-top: 0px;
}
.fullwidth input {border: 2px solid #c0c0c0;}
.fullwidth input:focus {border: 2px solid #888;}



.tabs {list-style: none; margin: 0; margin-bottom: 30px; padding: 14px 0;  border-radius: 0px; border-top: 1px solid #f0f0f0; border-bottom: 1px solid #f0f0f0;}
.tabs li {display: inline-block; }
.tabs li a {
  display: block;
  font-size: 13px;
  background-color: #f0f0f0;
  padding: 5px 20px;
  margin: 0px 20px;
  border-radius: 20px;
  transition: all 0.1s ease-in-out;
}
.tabs li a.current, .tabs li a.current:hover {background-color: #0359E2; color: #fff;}
.tabs li a:hover {background-color: #0359E2; color: #fff;}
.tabs li a:active {background-color: #000;}

.flag-list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 50px;
}
.flag-list h2 {font-size: 14px; margin: 0; padding: 0;}
.flag-list h2 a {display: block; padding: 14px;}
.flag-list li {
  box-shadow: 0px 1px 20px 1px rgba(0,0,0,0.070);
  border-radius: 5px;
  padding: 8px;
  padding-bottom: 12px;
}
.flag-list li img, .flag img, .flag-effects li img, .blog-featured-image img {width: 100%; min-height: 100px; height: auto; display: block; background: url(images/loading.svg) no-repeat center center; border: 1px solid #f2f2f2;}
.blog-featured-image {margin-bottom: 20px;}

.colors {
  display: block;
  padding: 0 14px 8px 14px;
  text-align: left;
  margin-top: -8px;
}
.colors span {
  display: inline-block;
  font-size: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  border:  1px solid rgba(0,0,0,0.2);
  cursor: pointer;
  transition: all 0.1s ease-in-out;
}
.colors span:hover {box-shadow: 0 0 0 2px rgba(0,0,0,0.3);}



.pagination {
  text-align: center;
}

.pagination span, .pagination a {
display:inline-block;
margin: 0;
padding: 0px;
text-decoration:none;
width:auto;
color:#8c98a9;
font-size: 15px;
font-weight: bold;
line-height: 38px;
border-radius: 50%;
/*background-color: #f0f0f0;*/
transition: all 0.1s ease-in-out;
}

.pagination a, .pagination .current {
  text-align: center;
  width: 38px;
  height: 38px;
  color:#000;
 margin-left: 5px;
}
/*.pagination a.next {
  width: 70px!important;
  height: 40px;
  border-radius: 20px!important;
  color: #fff;
  background-color: #0359E2;
}*/

.pagination a:hover{color:#000;background: #f0f0f0;}
.pagination a:active{background-color: #c0c0c0; color: #fff;}
 
.pagination .current{
color: #fff;
background-color: #0359E2;
}

footer {
  border-top: 4px solid #0359E2;
  background-color: #14191e;
  min-height: 200px;
  color: #f7f8f9;
}

footer p {font-size: 12px; margin:  0; padding: 0; line-height: 220%;}
footer p a {color: #fff; display: inline-block; padding: 2px 4px;}
footer p a:hover {color: #c0c0c0;}

footer .centered {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 40px;
}

.logo-footer {
  font-size: 0;
  display: inline-block;
  width: 230px;
  height: 36px;
  background: url(images/flag-color-codes-logo-white.svg) no-repeat top left;
  background-size: 100% auto;
  margin-bottom: 20px;
}
.subsribe-form {
  max-width: 310px;
  height: 42px;
  /*background-color: pink;*/
  border-radius: 22px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr auto;
  margin-bottom: 20px;
  margin-top: 10px;

}
.subsribe-form input, .subsribe-form button {border: none; height: 42px; font-size: 10px;}
.subsribe-form input {padding: 0 10px 0 20px;}
.subsribe-form button {color: #fff; background-color: #0359E2;  font-weight: normal; text-transform: uppercase; padding-left: 12px; padding-right: 12px;}


.social-icons {
  margin-top: 20px;
}
.social-icons a {display: inline-block; width: 20px; height: 20px; margin: 0 5px; padding: 0; text-align: center; line-height: 0;}
.social-icons a span {line-height: 20px;}
.social-icons a:hover {opacity: 0.6;}

.footer-links {
  color: #fff;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
}
.footer-links ul {margin: 0; padding: 0; list-style: none;}
.footer-links ul li a {font-size: 13px; display: block; padding: 6px 0;}
.footer-links h4 {color: #288dff; margin: 0 0 20px 0; padding: 0;}
.footer-links ul li a {color: #f7f8f9;}
.footer-links ul li a:hover {color: #c0c0c0;}




.bcn {
  display: block;
  font-size: 10px;
  color: #c0c0c0;
  text-transform: uppercase;
  padding-bottom: 0px;
  letter-spacing: 1px;
  list-style: none;
  margin-bottom: -30px;
  margin-top: 10px;
}
.bcn li {list-style-type: none; display: inline;}
.bcn li:after {
  content: ' / ';
  margin-left: 5px;
  margin-right: 5px;
}
.bcn li:last-child:after {content: '';}
.bcn a {color: #c0c0c0;}
.bcn a:hover {color: #333;}


.main-subpage {
  display: grid;
  grid-template-columns: 1fr 40%;
  grid-gap: 80px;
  padding: 40px 0;
}

.main-subpage-title {
  display: table;
  height: 100%;
}
.main-subpage-title div {
  display: table-cell;
  vertical-align: middle;
}

.main-circles {
  display: block;
  margin: -3px 0 0 0; padding: 0;
}
.main-circles li {display: inline-block; margin-right: 10px; font-size: 0; display: inline-block; width: 38px; height: 38px; border: 2px solid #333; border-radius: 50%; cursor: pointer;}
.main-subpage-flag figure {background-color: #fff;  padding: 10px; border-radius: 6px;} 
.main-subpage-flag img {width: 100%; height: auto; display: block; border:  1px solid #f2f2f2;}

.main-subpage-flag figure {
  position: relative;
}

.moving-bottons {
  padding-top: 12px;
  display: grid!important;
  width: 100%!important;
  grid-template-columns: repeat(4, auto);
  grid-gap: 12px;
}
.moving-bottons a {display: block;}


.download-zip-area {
  display: table;
  vertical-align: middle;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.7);
}
.download-zip-area div {
  display: table-cell;
  vertical-align: middle;
}
.download-zip-btn {
  color: #000;
  font-size: 16px;
  height: 60px;
  line-height: 55px;
  margin: 0 auto;
  display: inline-block;
  border-radius: 30px;
  padding: 0px 30px;
  border: 2px solid #000;
  background-color: rgba(255, 255, 255, 1);
  transition: all 0.1s;
  box-shadow: 0px 1px 22px rgba(0,0,0,0.2);
}
.download-zip-btn .icon {margin-bottom: -4px; transform: scale(1.8); margin-right: 10px;}
.download-zip-btn:hover {
  color: #fff;
  background-color: #000;
  box-shadow: 0px 1px 32px rgba(0,0,0,0.5);
}
.download-zip-btn:active {
  transform: scale(0.94);
}

#freeb {
  /*display: inline-block;*/
  display: inline-grid;
  grid-template-columns: 1fr auto;
  grid-gap: 20px;
  margin-top: 10px;
}
.main-download {
  font-size: 12px;
  text-transform: uppercase;
  display: inline-block;
  border:  2px solid #333;
  background-color: transparent;
  height: 38px;
  line-height: 36px;
  border-radius: 20px;
  padding: 0 20px 0 20px;
}
.main-download:hover {background-color: #eee;}

.main-download .icon {margin-bottom: -4px; margin-right: 3px;}


.download-menu {min-width: 160px;}
.download-items li {font-size: 12px; list-style: none; margin: 5px 0;}
.download-items li a {display: block; padding: 5px 6px; border:  1px solid #eee; border-radius: 16px; text-align: center;}
.download-items li a:hover {color: #0359E2;}


.h-line h2 {width: auto; display: inline-block; margin-bottom: 8px;}
.h-line h2 span {
  display: flex;
  background-color: pink;
  margin-top: 4px;
}
.h-line h2 span i {
  flex: 1;
  display: inline-block;
  height: 2px;
}


.color-boxes {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 60px;
  margin: 6px 0;
}
.color-box {
  display: block;
  background-color: #fff;
  border-radius: 5px;
  overflow: hidden;
  border-bottom: 4px solid #f0f0f0;
  /*box-shadow: 0px 1px 12px 1px rgba(0,0,0,0.060);*/
}
.color-preview {
  display: block;
  position: relative;
  height: 80px;
  overflow: hidden;
}
.color-preview h3 {
  color: #fff;
  letter-spacing: 3px;
  font-size: 16px;
  display: block;
  width: 100%;
  text-align: center;
  position: absolute;
  top: 50%;
  margin-top: -16px;
  left: 0;
  line-height: 120%;
}
.color-preview h3 span {
display: block;
width: 100%;
font-size: 12px;
}
.color-box .color-preview img {
display: block;
width: 100%;
height: auto;
}
.color-codes {
  width: 90%;
  margin:  0 auto;
  padding: 10px;
  border-collapse: collapse;
  border:  none;
  
}
.color-codes tr {border-top:  1px solid #f0f0f0;}
/*.color-codes tr:hover, .color-codes tr:nth-child(odd):hover {background-color: #f5e9d3;}*/
.color-codes th {font-size: 14px; padding: 8px 25px;}
.color-codes td {font-size: 13px; padding: 5px 25px; }
/*.color-codes tr:nth-child(odd) {background: #f8f8f8;}*/

.info {
  font-size: 0;
  display: inline-block;
  /*background-color: #f0f0f0;*/
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-left: 5px;
  background-color: #fccf3a;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M5.246 6.353l-.084.342c-.251.1-.452.174-.602.227-.15.052-.324.078-.522.078-.305 0-.541-.074-.71-.223s-.254-.337-.254-.565c0-.089.007-.181.02-.272a3.29 3.29 0 01.061-.314l.314-1.112c.028-.108.052-.209.071-.305.019-.095.028-.182.028-.261 0-.142-.029-.242-.088-.297s-.17-.084-.336-.084a.887.887 0 00-.249.038c-.086.025-.159.05-.221.072l.085-.343c.205-.083.402-.155.591-.214s.366-.09.534-.09c.302 0 .536.073.699.219a.727.727 0 01.246.57c0 .048-.005.133-.017.255a1.648 1.648 0 01-.063.335l-.312 1.109c-.025.09-.049.19-.069.306-.02.113-.03.2-.03.259 0 .146.033.247.099.301.066.053.181.08.342.08.076 0 .163-.014.26-.04.094-.028.164-.051.207-.071zm.08-4.652c0 .193-.074.358-.22.494s-.321.203-.527.203-.382-.068-.529-.204-.222-.3-.222-.493.074-.358.222-.495c.146-.138.323-.206.529-.206s.382.069.527.206c.146.137.22.302.22.495z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center center;
}
.verified {
  background-color: #4dbf33;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath fill='%23FFF' d='M1 4.191L3.055 6.25 7 2.309l-.566-.559-3.379 3.375-1.496-1.496L1 4.191z'/%3E%3C/svg%3E");
}
.verified-loc {
  background-color: #dd8b36;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath fill='%23FFF' d='M1 4.191L3.055 6.25 7 2.309l-.566-.559-3.379 3.375-1.496-1.496L1 4.191z'/%3E%3C/svg%3E");
}

.meanings {}
.meanings li {
  position: relative;
  list-style: none;
  padding: 10px 0;
  margin: 8px 0;
  margin-left: 50px;
}
.meanings li img {
  position: absolute;
  top: 0;
  left: -40px;
}

.downloads {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 30px;
  margin: 6px 0;
}
.downloads h4 {margin: 0; padding: 0 0 7px 0;}
.downloads ul {margin: 0; padding: 0; list-style: none;}
.downloads ul li {margin: 5px 0; font-size: 12px;}
.downloads ul li a {display: block; padding: 5px 0;}
.downloads ul li a:before {
  content: '';
  font-size: 0;
  display: inline-block;
  width: 15px; height: 15px;
  margin-bottom: -2px;
  margin-right: 4px;
  background-image: url(images/icons-sprite.svg);
  background-position: 0px -293px;
  opacity: 0.3;
  transition: all 0.080s ease-in-out;
}
.downloads ul li a:hover:before {
  opacity: 0.8;
}
.download-btn {
  background-color: #fff;
  padding: 10px;
  border-radius: 12px;
  display: block;
  width: 100%;
  padding: 10px;
  text-align: center;
  margin-top: 5px;
  border:  2px solid #ddd;
}
.download-btn .icon {margin-bottom: -4px; transform: scale(0.9); opacity: 0.6;}
.download-btn:hover .icon {opacity: 1;}
.download-btn:hover {border-color: #aaa;}


.auto-flag-color-palette {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 30px;
}
.auto-flag-color-palette img {
  max-width: 300px;
  height: auto;
  padding: 10px;
  background: #fff url(images/loading.svg) no-repeat center center;
  border-radius: 5px;
  box-shadow: 0px 1px 12px 1px rgba(0,0,0,0.090);
}

.related-flag-list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 40px;
  margin: 6px 0;
}
.related-flag-list li a {
  font-size: 12px;
  color: #666;
  display: grid;
  grid-template-columns: 50px 1fr;
  grid-gap: 10px;
  overflow: hidden;
  white-space: nowrap;
  /*background-color: #fff;
  border: 4px solid #fff;
  border-radius: 5px;
  box-shadow: 0px 1px 5px 1px rgba(0,0,0,0.020);*/
}
.related-flag-list li a:hover {color: #000;}
.related-flag-list li img {width: 50px; height: auto; }
.related-flag-list li a span {line-height: 30px; display: block;}

.post-edit-link {
  font-size: 0px;
  display: inline-block;
  width: 40px; height: 40px;
  position: fixed;
  bottom: 28vh;
  left: 30px;
  background-color: #0359E2;
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' x='0' y='0' viewBox='0 0 16 16' xml:space='preserve'%3E%3Cstyle%3E.st0%7Bfill:%23f7f9f9%7D%3C/style%3E%3Cpath class='st0' d='M13.14 8a.57.57 0 00-.57.57v5.71c0 .32-.26.57-.57.57H1.71a.57.57 0 01-.57-.57V2.86c0-.32.26-.57.57-.57h6.86c.32 0 .57-.26.57-.57s-.25-.58-.57-.58H1.71C.77 1.14 0 1.91 0 2.86v11.43C0 15.23.77 16 1.71 16H12c.95 0 1.71-.77 1.71-1.71V8.57a.57.57 0 00-.57-.57z'/%3E%3Cpath class='st0' d='M15.36.64a2.195 2.195 0 00-3.1 0L4.74 8.17c-.06.06-.11.14-.14.22l-1.14 3.43a.567.567 0 00.72.72l3.43-1.14c.08-.03.16-.08.22-.14l7.53-7.53c.85-.85.85-2.23 0-3.09z'/%3E%3C/svg%3E");
  background-size: 16px 16px;
  background-position: center center;
  background-repeat: no-repeat;
  border-radius: 50%;
  opacity: 0.6;
}
.post-edit-link:hover {opacity: 1;}
.blue-bg, .blue-bg h1, .blue-bg p {color: #fff;}


.contact-form-fields {width: 100%; list-style: none; margin: 0; padding: 0;}
.contact-form-fields input,
.contact-form-fields label,
.contact-form-fields textarea {
  display: block;
  width: 100%;
}
.contact-form-fields label {font-size: 12px; margin-bottom: 5px; margin-left: 5px;}
.contact-form-fields textarea {
  min-height: 120px;
  line-height: 120%;
  padding: 12px 20px;
}

/*.contact-form-fields .input-style,
 {
  border-color: #333;
}*/

.contact-form-fields .button-style {
  background-color: #0359E2;
  border-color: #0359E2;
  color: #fff;
}

#contact-form {/*position: relative;*/ text-align: left;}

.validation-info {color: #ff0000;}
.req {display: inline-block; font-size: 9px; background-color: #fff; color: #ff0000; text-transform: lowercase; width: 14px; height: 14px; text-align: center; line-height: 14px; border-radius: 50%;}

.thankyou {
  display: grid;
  grid-template-columns: 65px 1fr;
  grid-gap: 20px;
  border:  1px solid #38b458;
  padding: 14px;
  border-radius: 10px;
  margin-bottom: 20px;

}
.thankyou p {padding: 0; font-size: 12px;}

#mail-status .thankyou svg {margin-top: 3px; margin-right: 20px; width: 65px; height: 65px;}
#mail-status .error {color: #ff0000; border-color: #ff0000;}
#mail-status .thankyou blockquote {margin-top: 40px;}

.flag-effects {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
  list-style: none;
}
.flag-effects li {padding: 8px; border-radius: 4px;}
.flag-effects li img {display: block; width: 100%; height: auto; background-color: #f0f0f0;
}
.flag-effects li h2 {padding: 6px 0 0 0; font-size: 13px;}
.flag-effects li figcaption {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-gap: 10px;
  padding-top: 14px;
  padding-bottom: 6px;
  padding-left: 20px;
  padding-right: 20px;
}


.featured-box {
  width: 100%;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  /*border:  2px solid #0359E2;*/
  background-image: url(images/confetti-animation-svg.svg);
  margin-bottom: 10px;
}
.featured-title {
  /* top left sticker */
  font-size: 0;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 80px; height: 80px;
  background: url(images/featured-sticker.svg) no-repeat top left;
  background-size: 80px auto;
}

.featured-content {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 180px;
  grid-gap: 30px;
}

.featured-box .centered-small {
  padding: 20px;
}
.featured-content h3 {padding-bottom: 10px; margin: 0; font-size: 16px;}
.featured-content h3 .date {display: block; text-transform: uppercase; font-weight: normal; font-size: 10px; color: #999;}
.featured-content p {padding: 0; margin: 0; font-size: 12px;}

.window { 
  margin-top: 10px;
  height: 140px;
}
.window img {display: block; width: 100%; height: auto; border: 1px solid #f2f2f2;}

.mySlides {display: none}
/*img {vertical-align: middle;}*/

/* Slideshow container */
.slideshow-container {
  width: 100%;
  position: relative;
  margin: auto;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 48%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: #ccc;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}
.prev {
  left: -50px;
}

/* Position the "next button" to the right */
.next {
  right: -50px;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  color: #000;
}

.dots {
  text-align: center;
  margin-top: 12px;
  width: 100%;
  display: block;
  position: absolute;
  bottom: 0px;
}
/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 10px;
  width: 10px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.dot:hover {
  background-color: #717171;
}
.active {
  background-color: #000;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}


@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}


/* @@@@ Blog post style @@@@ */

#content table {
  font-size: 12px;
  border-collapse: collapse;
  width: 100%;
  margin-top: 8px;
  margin-bottom: 30px;
  text-align: left;
}
#content table td, table th {border: 1px solid #f0f0f0; padding: 10px;}
#content table th {background-color: #f9f9f9; font-weight: bold;}

#content blockquote {
  font-weight: 700;
  display: inline-block;
  color: rgba(0,0,0,0.4);
  background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='20px' height='20px' viewBox='0 0 20 20' enable-background='new 0 0 20 20' xml:space='preserve'%3E%3Cg opacity='0.4'%3E%3Cpath fill='%23c0c0c0' d='M6.868,19.434c0.505,0,1.278-0.033,2.32-0.1v-3.887c-3.165,0-4.744-1.465-4.744-4.393l0.052-1.766h3.278V0 H0v10.045C0.001,16.305,2.291,19.434,6.868,19.434z M20,15.447v3.887c-0.906,0.066-1.545,0.1-1.918,0.1 c-4.576,0-6.863-3.129-6.863-9.389V0h7.773v9.289h-3.281l-0.049,1.767C15.66,13.814,17.109,15.277,20,15.447z'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 28px auto;
  margin: 5px 0 25px 0;
}
#content blockquote div {
  padding: 14px 36px 0 36px;
  background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='20px' height='20px' viewBox='0 0 20 20' enable-background='new 0 0 20 20' xml:space='preserve'%3E%3Cg opacity='0.4'%3E%3Cpath fill='%23c0c0c0' d='M13.134-0.001c-0.505,0-1.278,0.033-2.32,0.1v3.887c3.165,0,4.744,1.465,4.744,4.393l-0.052,1.766h-3.278 v9.288h7.773V9.387C20,3.127,17.711-0.001,13.134-0.001z M0.001,3.985V0.098c0.906-0.066,1.545-0.1,1.918-0.1 c4.576,0,6.863,3.129,6.863,9.389v10.045H1.009v-9.289h3.281l0.049-1.767C4.341,5.618,2.892,4.155,0.001,3.985z'/%3E%3C/g%3E%3C/svg%3E");
  background-position: top right;
  background-repeat: no-repeat;
  background-size: 28px auto;
}

#content blockquote div p {color: rgba(0,0,0,0.4); font-style: italic;}
#content blockquote div span {font-size: 14px!important; display:block; width: 100%; text-align: right; font-style: normal!important;}


#content ul, #content ol {
  margin: -5px 0 40px 30px; padding: 0;
  line-height: 170%;
}
#content ul li, #content ol li {
  margin-bottom: 14px;
}


.fcc-listing {
  position: relative;
  border-top:  1px solid #eee;
  border-bottom:  1px solid #eee;
}

.fcc-listing .moving-list-btn {
  position: absolute;
  width: 30px;
  height: 100%;
  border:  none;
  display: inline-block;
  cursor: pointer;
  line-height: 66px;
}

.fcc-listing .moving-list-btn {line-height: 50%; font-size: 25px;}
.btl {left:  0; text-align: left; background: linear-gradient(270deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 30%);}
.btl .icon { margin-left: -19px;}
.btr {left: inherit; right: 0; text-align: right; background: linear-gradient(270deg, rgba(255,255,255,1) 70%, rgba(255,255,255,0) 100%);}
.btr .icon {display: inline-block; margin-right: -19px;}
.fcc-listing .moving-list-btn:hover .icon {opacity: 1;}

.fcc-listing .moving-list-btn:hover {opacity: 1;}

.fcc-listing ul {
  list-style: none;
  display: block;
  white-space: nowrap;
  margin: 0; padding: 14px 20px;
  width: 100%;
  overflow-x: scroll;
  scroll-behavior: smooth;
}
.fcc-listing ul::-webkit-scrollbar {display: none;}
.fcc-listing ul li {display: inline; }
.fcc-listing ul li a {
  color: #333;
  display: inline-block; font-size: 13px; height: 36px; line-height: 35px;
  padding: 0 20px;
  border:  1px solid #eee;
  background-color: #fff;
  border-radius: 16px;
}
.fcc-listing ul li a:hover {
  color: #000;
  background-color: #eee;
}
.fcc-listing ul li a:active, .fcc-listing ul li a:focus, .fcc-listing ul li .active-item {
  color: #000;
  background-color: #ddd;
  border-color: #ddd;
}


.download-flag-area {
  display: grid;
  grid-template-columns: 30% 1fr;
  grid-gap: 30px;
}
.download-flag-area img {
  display: block;
  width: 100%;
  height: auto;
  background: #fff url(images/loading.svg) no-repeat center center;
  padding: 10px;
  border-radius: 4px;
  border:  1px solid #eee;
}
.downloads-flag-btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
}



.flashing { position: fixed; z-index: 400; display: block; width: 100%; text-align: center; top: 50%;left: 0; margin-top: -50px; 
  transition: all 0.4s;
  -moz-animation: cssAnimation 0s ease-in 1s forwards;
  -webkit-animation: cssAnimation 0s ease-in 1s forwards;
  -o-animation: cssAnimation 0s ease-in 1s forwards;
  animation: cssAnimation 0s ease-in 1s forwards;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.flashing span {
  font-size: 20px;
  font-weight: bold;
  padding: 20px 40px;
  background-color: rgba(0,0,0,0.5);
  color: #fff;
  border-radius: 20px;
}
@keyframes cssAnimation {to {opacity: 0; transform: scale(1.5); visibility: hidden;/*display: none;*/}}

.small-downloads {
  width:  100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
  padding: 10px;
  padding-bottom: 0;
}


.separator {
  display: block;
  width: 100%;
  background-color: #eee;
  height: 1px;
  border:  none;
}

.quiz-content {
 border:  1px solid #eee;
 border-radius: 6px;
}

.faq-list {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 16px;
}
.faq-list details {border:  1px solid #eee; overflow: hidden; border-radius: 6px;}
.faq-list details summary {font-size: 20px; font-weight: bold; color: #000; background-color: #f5f5f5; padding: 12px 16px 12px 16px; cursor: pointer;}
.faq-list details p {margin: 0; padding: 0;}
.faq-list details p img {
  float: left;
  display: inline-block;
  max-width: 200px;
  height: auto;
  border:  1px solid #eee;
  padding: 6px;
  border-radius: 4px;
  background-color: #fff;
  margin: 0 15px 10px 0;
}
.faq-list details .short-content {
  padding: 14px 20px;
}

.similar-section {}
.similar-section table {}
.similar-section table td, table th {border: 0px solid #ececec!important; padding: 10px;}
.similar-section table th {background-color: #e7e7e7!important; font-weight: bold;}
.similar-section table tr:nth-child(odd) {background-color: #fafafa;}


.commenting {}

.commented {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 40px;
}
.commented li {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 20px;
  font-size: 12px;
}
.commented li p {font-size: 13px; margin: 0; padding: 0;}
.commented li img {
  display: block;
  width: 60px; height: 60px;
  border-radius: 50%;
  border:  1px solid rgba(0, 0, 0, 0.1);
}
.comment-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
  padding-bottom: 6px;
}
.cname {font-size: 14px; font-weight: bold;}
.cdate {text-align: right; font-size: 10px;}

.add-comment {
}
.add-comment textarea {width: 100%; min-height: 90px; line-height: 110%; padding: 14px;}
.add-comment input, .add-comment button {width: 100%;}
.awaiting {
  display: block;
  padding: 2px 5px;
  color: #000;
  background-color: #ffd775;
  border-radius: 5px;
  margin-bottom: 6px;
}
.add-comment .button-style {width: 100%; background-color: #0359E2; color: #fff; border-color: #0359E2;}
.comment-login-notice {
  display: block;
  background-color: #eee;
  border:  2px solid #ccc;
  padding: 10px;
  text-align: center;
  border-radius: 16px;
}
.capcha-and-button {
  max-width: 310px;
  margin: 0 auto;
}
.capcha-box {
  width: 310px;
  text-align: center!important;
  /*border:  2px solid #d5d5d5;*/
  padding: 0px;
  border-radius: 16px;
  margin-bottom: 22px;
  margin-top: 3px;
}
.comment-btn-box {max-width: 310px;}


.gglcptch {margin: 0 auto!important; padding: 0!important; text-align: center; width: 100%;}
.gglcptch_recaptcha {
  display: block;
  width: 100%;
  padding: 0!important;
}
.gglcptch_recaptcha div {width: 100%!important;}

.hrdots {
  display: block;
  height: 1px;
  width: 100%;
  background: none;
  border:  none;
  border-top:  1px dotted #ddd;
  margin: 10px 0;
}

.nodesktop {display: none;}


 /* @@@@@@@ Responsive @@@@@@@ */

@media screen and (max-width: 930px) {
.featured-box .centered-small {width: 80%;}
.tabs li a {padding: 5px 14px;margin: 5px 10px;}

}
@media screen and (max-width: 720px) {

.nomobile {display: none!important;}
.nodesktop {display: block;}
.centered, .centered-medium, .centered-small {max-width: 100%;}
.centered, .centered-medium, .centered-small {padding-right: 40px; padding-left: 40px;}

h1 {font-size: 26px; text-align: center; margin: 0 auto;}
p {font-size: 14px; padding: 0px 0 30px 0;}
h2 {font-size: 17px; color: #000;}
h3 {font-size: 15px; color: #333;}
h4 {font-size: 15px; color: #333;}


.mainin {text-align: center;}
main .centered {height: auto; padding: 20px 0;}
main .centered h1 {width: 100%; margin: 0 auto; padding: 0; text-align: center;}
main .centered {
  background-position: left center;
  background-size: 100% auto;
  background-image: none;
}
main form {margin: 0 auto; max-width: 60%; margin-top: 15px;}
/*main form input {border:  2px solid #333;}*/


header {padding: 14px 0; position: sticky; top: 0; background: #fff; z-index: 50; /*box-shadow: 0 2px 12px 1px rgba(0, 0, 0, 0.1);*/}
.logo {width: 170px;
  height: 26px;
}
.featured-box {width: 100%; margin: 0 auto; margin-top: 20px; background-image: none;}
.featured-content {grid-template-columns: 1fr; grid-gap: 0px; width: 100%;}
.featured-title {
  width: 70px; height: 70px;
  background-size: 70px auto;
}

.featured-box .centered-small {padding-bottom: 5px; text-align: center; width: 100%;}
.featured-content h3 {text-align: center; max-width: 98%; display: block; margin: 0 auto;}
.featured-content .window {width: 100%; height: 120px; margin: 0 auto; margin-bottom: 40px; overflow: hidden;}
.featured-content .window img {height: 100%; width: auto; margin: 0 auto;}
.dots {bottom: 15px;}
.prev {left: -10px;}
.next {right: -10px;}


.flag-list {
  grid-template-columns: 1fr 1fr;
  grid-gap: 22px;
}
.flag-list li img, .flag img {width: 100%; min-height: 60px; height: auto;}
.flag-list h2 {font-size: 12px;}
.flag-list h2 a {padding: 8px 0;}
.colors {overflow: hidden; padding: 0; width: 100%;}
.colors span {width: 16px; height: 16px;}

.small-downloads {display: grid;}

footer .centered {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 40px;
  text-align: center;
}
footer form {margin: 0 auto;}

.logo-footer {width: 160px; height: 26px; margin-bottom: 30px;}

.main-subpage {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 20px;
  padding: 20px 0;
  text-align: center;
}
.main-subpage-title {display: block;}
.main-subpage-title div {display: block;}
.main-subpage h1 {width: 100%; display: block;}
h1 span {display: block; width: 100%;}

.main-subpage-flag figure {margin: 0 auto;}
#freeb {
  margin: 0 auto;
  grid-template-columns: 1fr;
  margin-top: 10px;
}

.color-boxes {grid-template-columns: 1fr; grid-gap: 30px;}

.downloads {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 30px;
  margin: 6px 0;
}
.downloads div {
  border:  1px solid rgba(0,0,0,0.060);
  border-radius: 5px;
  padding: 20px;
}

.moving-bottons {
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 12px;
  padding-bottom: 12px;
}

.auto-flag-color-palette {
  display: grid;
  grid-template-columns: 38% 1fr;
  grid-gap: 30px;
}
.auto-flag-color-palette img {max-width: 100%;}


.related-flag-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
}
.related-flag-list li a {
  color: #000;
  font-weight: bold;
  /*background-color: #fff;*/
  overflow: hidden;
  border-radius: 5px;
  border:  1px solid rgba(0,0,0,0.060);
}
.fullonmobile {grid-template-columns:1fr}
.twoonmobile {grid-template-columns:1fr 1fr}

.flag-effects {grid-template-columns: 1fr;}


.download-flag-area {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 30px;
}

.mainin-cols {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 20px;
  text-align: center;
}
.mainin-cols div {text-align: center;}
.mainin-cols img {margin: 0 auto; min-width: 80%; max-width: 80%;}
.fullwidth {max-width: 90%!important; width: 90%!important;}
.faq-list details summary {font-size: 18px;}


.comment-btn-box {max-width: 100%; width: 100%;}

}

@media screen and (max-width: 480px) {
h1 {font-size: 24px;}
p {font-size: 14px;}
h2 {font-size: 16px; color: #000;}
h3 {font-size: 14px; color: #333;}
h4 {font-size: 14px; color: #333;}

.auto-flag-color-palette {grid-template-columns: 1fr;}
.related-flag-list {grid-template-columns: 1fr;}
.headerin {grid-gap: 12px;}
.logo {width: 143px; height: 22px; margin-top: 2px;}
.featured-title {
  width: 50px; height: 50px;
  background-size: 50px auto;
}
.featured-content .window {height: 100px;}
.dots {bottom: 14px;}



.centered, .centered-small {padding-right: 22px; padding-left: 22px;}
nav ul li .toplevel {
  font-size: 11px;
  text-transform: capitalize;
  padding: 0 20px;
}
.main-circles li {margin-right: 8px; width: 32px; height: 32px;}

.social-icons {margin-top: 30px;}
footer p {font-size: 12px;}
footer p a {text-decoration: none;}
footer p a:hover {text-decoration: underline;}


}

@media screen and (max-width: 360px) {
.headerin {grid-gap: 10px;}
.flag-list h2 {font-size: 11px;}
.logo {width: 130px; height: 20px; margin-top: 3px;}
.featured-content h3 {font-size: 12px;}
.faq-list details summary {font-size: 16px;}
}

@media screen and (max-width: 324px) {
header {border-bottom: 1px solid #f0f0f0;}
.headerin {grid-gap: 20px;}
.logo {width: 30px; height: 26px;}
.flag-list {grid-template-columns: 1fr;grid-gap: 30px;}
.flag-list h2 {font-size: 12px;}
h1 {font-size: 22px;}
.downloads {grid-template-columns: 1fr; grid-gap: 30px;}

}