From 7a7e0e7804d4b85e188e4f569e5642f3096ae6f5 Mon Sep 17 00:00:00 2001
From: Rahul-0007 <56648583+Rahul-0007@users.noreply.github.com>
Date: Wed, 23 Oct 2019 22:54:20 +0530
Subject: [PATCH] Add pure css flag

---
 components/flag.css | 1177 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 1177 insertions(+)
 create mode 100644 components/flag.css

diff --git a/components/flag.css b/components/flag.css
new file mode 100644
index 0000000..3b100ee
--- /dev/null
+++ b/components/flag.css
@@ -0,0 +1,1177 @@
+$black: #333;
+$yellow: #f8de1f;
+$red: #e51400;
+$blue: #204e81;
+$lightBlue: #0065bd;
+$green: #339933;
+$violet: #401e74;
+$orange: #F89406;
+
+body {background: beige}
+
+.FLAG {
+	margin: 1em;
+	height: 150px;
+	width: 200px;	
+	float: left;
+}
+
+.belgium {
+	background: -webkit-linear-gradient(left, $black 33%, $yellow 33%, $yellow 66%, $red 66%);
+	background: linear-gradient(to right, $black 33%, $yellow 33%, $yellow 66%, $red 66%);
+}
+
+.spain {
+	background: -webkit-linear-gradient(top, $red 25%, $yellow 25%, $yellow 75%, $red 75%);
+	background: linear-gradient(to bottom, $red 25%, $yellow 25%, $yellow 75%, $red 75%);
+} 
+
+.czech {
+	background: -webkit-linear-gradient(top, white 50%, $red 50%);
+	background: linear-gradient(to bottom, white 50%, $red 50%);		
+
+	.triangle {
+		width: 0;
+		height: 0;
+		border-left: 75px solid $blue;	
+		border-top: 75px solid transparent;
+		border-bottom: 75px solid transparent;
+	}
+}
+
+.denmark {
+	background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 25%, white 25%, white 33%, rgba(255, 255, 255, 0) 33%),
+	-webkit-linear-gradient(bottom, $red 45%, white 45%, white 55%, $red 55%);
+	background: linear-gradient(to right, rgba(255, 255, 255, 0) 25%, white 25%, white 33%, rgba(255, 255, 255, 0) 33%),
+	linear-gradient(to bottom, $red 45%, white 45%, white 55%, $red 55%);	 
+}
+
+.cuba {
+	background: -webkit-linear-gradient(top, $lightBlue 20%, white 20%, white 40%, $lightBlue 40%, $lightBlue 60%, white 60%, white 80%, $lightBlue 80%, $lightBlue 80%);
+	background: linear-gradient(to bottom, $lightBlue 20%, white 20%, white 40%, $lightBlue 40%, $lightBlue 60%, white 60%, white 80%, $lightBlue 80%, $lightBlue 80%);	
+		
+	.triangle {
+	  position: relative;
+		width: 0;
+		height: 0;
+		border-left: 100px solid $red;	
+		border-top: 75px solid transparent;
+		border-bottom: 75px solid transparent;
+	}
+	
+	.star-wrap {
+	  position: absolute;
+	  left: -160px;
+	  top: -85px;
+	   -webkit-transform: scale(.25);
+	   -ms-transform: scale(.25);
+	   transform: scale(.25);
+		 
+		.star {
+		   margin: 50px 0;
+		   position: relative;
+		   display: block;
+		   color: red;
+		   width: 0px;
+		   height: 0px;
+		   border-right:  100px solid transparent;
+		   border-bottom: 70px  solid white;
+		   border-left:   100px solid transparent;
+		   -webkit-transform: rotate(35deg);
+		   -ms-transform: rotate(35deg);
+		   transform: rotate(35deg);
+			 
+	 		&:before {
+	 		   border-bottom: 80px solid white;
+	 		   border-left: 30px solid transparent;
+	 		   border-right: 30px solid transparent;
+	 		   position: absolute;
+	 		   height: 0;
+	 		   width: 0;
+	 		   top: -45px;
+	 		   left: -65px;
+	 		   display: block;
+	 		   content: '';
+	 		   -webkit-transform: rotate(-35deg);
+	 		   transform: rotate(-35deg);
+	 		}
+	 		&:after {
+	 		   position: absolute;
+	 		   display: block;
+	 		   color: red;
+	 		   top: 3px;
+	 		   left: -105px;
+	 		   width: 0px;
+	 		   height: 0px;
+	 		   border-right: 100px solid transparent;
+	 		   border-bottom: 70px solid white;
+	 		   border-left: 100px solid transparent;
+	 		  content: '';
+	 		   -webkit-transform: rotate(-70deg);
+	 		   transform:      rotate(-70deg);   
+	 		}
+		}
+	}
+}
+
+.china {
+  background-color: $red;
+
+	.star1, .star2, .star3, .star4, .star5 {
+	  position: relative;  
+	}
+	.star1 {
+		top: -50px;
+	  left: -65px;
+	  -webkit-transform: scale(.2);
+	  transform: scale(.2);
+	}
+	.star2 {
+	  left: -30px;
+	  top: -190px;
+	}
+	.star3 {
+	  left: -10px;
+	  top: -295px;
+	}
+	.star4 {
+	  left: -10px;
+	  top: -394px;
+	}
+	.star5 {
+	  left: -30px;
+	  top: -500px;
+	}
+	.star2, .star3, .star4, .star5 {
+	   -webkit-transform: scale(.08);
+	   transform: scale(.08);
+	}
+	
+	.inner-star {
+	   margin: 50px 0;
+	   position: relative;
+	   display: block;
+	   color: red;
+	   width: 0px;
+	   height: 0px;
+	   border-right:  100px solid transparent;
+	   border-bottom: 70px  solid $yellow;
+	   border-left:   100px solid transparent;
+	   -webkit-transform: rotate(35deg);
+	   -ms-transform:     rotate(35deg);
+	   transform:      		rotate(35deg);
+		 
+	 	&:before {
+	 	   border-bottom: 80px solid $yellow;
+	 	   border-left: 30px solid transparent;
+	 	   border-right: 30px solid transparent;
+	 	   position: absolute;
+	 	   height: 0;
+	 	   width: 0;
+	 	   top: -45px;
+	 	   left: -65px;
+	 	   display: block;
+	 	   content: '';
+	 	   -webkit-transform: rotate(-35deg);
+	 	   transform:      		rotate(-35deg);
+	 	}
+	 	&:after {
+	 	   position: absolute;
+	 	   display: block;
+	 	   color: red;
+	 	   top: 3px;
+	 	   left: -105px;
+	 	   width: 0px;
+	 	   height: 0px;
+	 	   border-right: 100px solid transparent;
+	 	   border-bottom: 70px solid $yellow;
+	 	   border-left: 100px solid transparent;
+	 	  content: '';
+	 	   -webkit-transform: rotate(-70deg);
+	 	   transform:      rotate(-70deg);   
+	 	}
+	}
+}
+
+.greenland {
+  background: -webkit-linear-gradient(top, white 50%, $red 50%);
+  background: linear-gradient(to bottom, white 50%, $red 50%);
+	
+	&:after {
+  	border-radius: 50%;
+  	width: 70px;
+  	height: 70px;
+  	display: block;
+  	position: relative;
+  	top: 50%;
+  	margin-top: -35px;
+  	left: 20%;
+  	content: '';
+  	background: -webkit-linear-gradient(top, $red 50%, white 50%);
+  	background: linear-gradient(to bottom, $red 50%, white 50%);
+	}
+}
+
+.congo {
+  background: -webkit-linear-gradient(-56deg, #368ee0 43%,$yellow 43%,$yellow 48%,$red 48%,$red 58%,$yellow 58%,$yellow 63%, #368ee0 63%);
+  background: linear-gradient(146deg, #368ee0 43%,$yellow 43%,$yellow 48%,$red 48%,$red 58%,$yellow 58%,$yellow 63%, #368ee0 63%);
+
+	.star {
+	  position: relative;
+	  top: -40px;
+	  left: -55px;
+	  -webkit-transform: scale(.25);
+	  transform: scale(.25);
+    
+    .inner-star {
+			margin: 50px 0;
+			position: relative;
+			display: block;
+			color: red;
+			width: 0px;
+			height: 0px;
+			border-right:  100px solid transparent;
+			border-bottom: 70px  solid $yellow;
+			border-left:   100px solid transparent;
+			-webkit-transform: rotate(35deg);
+			transform: rotate(35deg);
+		 
+	 		&:before {
+	 	   border-bottom: 80px solid $yellow;
+	 	   border-left: 30px solid transparent;
+	 	   border-right: 30px solid transparent;
+	 	   position: absolute;
+	 	   height: 0;
+	 	   width: 0;
+	 	   top: -45px;
+	 	   left: -65px;
+	 	   display: block;
+	 	   content: '';
+	 	   -webkit-transform: rotate(-35deg);
+	 	   transform:      		rotate(-35deg);
+		 }
+		 
+		 &:after {
+	 	   position: absolute;
+	 	   display: block;
+	 	   color: red;
+	 	   top: 3px;
+	 	   left: -105px;
+	 	   width: 0px;
+	 	   height: 0px;
+	 	   border-right: 100px solid transparent;
+	 	   border-bottom: 70px solid $yellow;
+	 	   border-left: 100px solid transparent;
+	 	  content: '';
+	 	   -webkit-transform: rotate(-70deg);
+	 	   transform:      rotate(-70deg);   
+	 		}
+    }
+	}
+}
+
+.qatar {
+  background: -webkit-linear-gradient(left, white 50%, #a72215 50%);
+	background: linear-gradient(to right, white 30%, #a72215 30%);	
+  position: relative;
+  overflow: hidden;
+
+	.triangle1, .triangle2, .triangle3, .triangle4, .triangle5, .triangle6, .triangle7, .triangle8, .triangle9 {
+		width: 0;
+		height: 0;
+	  position: relative;
+		border-top: 25px solid transparent;
+		border-left: 110px solid white;
+		border-bottom: 25px solid transparent;
+	}
+	.triangle1 {
+	  top: -1px;
+	  border-top: none;
+	}
+	.triangle2 {
+	  top: -28px;
+	}
+	.triangle3 {
+	  top: -56px;
+	}
+	.triangle4 {
+	  top: -83px;
+	}
+	.triangle5 {
+	  top: -110px;
+	}
+	.triangle6 {
+	  top: -137px;
+	}
+	.triangle7 {
+	  top: -162px;
+	}
+	.triangle8 {
+	  border-bottom: none;
+	  top: -186px;
+	}
+}
+
+.jamaica {
+  background: $yellow;
+
+	&:before, &:after, .triangleL, .triangleR {
+	  position: relative;
+	  width: 0;
+		height: 0;  
+	}
+	&:before, &:after {
+	  content: '';
+	  left: 11px;
+	  border-left: 88px solid transparent;
+		border-right: 88px solid transparent;
+	}
+	&:before {
+	  top: 65px;
+		border-top: 65px solid $green;
+	}
+	&:after {
+	  bottom: 201px;
+		border-bottom: 67px solid $green;
+	}
+	.triangleL, .triangleR {
+	  border-top: 62px solid transparent;
+	  border-bottom: 62px solid transparent;
+	}
+	.triangleL {	
+		border-left: 85px solid $black;
+	  top: -5px;
+	}
+	.triangleR {
+		border-right: 85px solid $black;
+	  right: -114px;
+	  top: -128px;
+	}
+}
+
+.VC {
+  background: -webkit-linear-gradient(left, $blue 27%, $yellow 27%, $yellow 73%, $green 73%);
+  background: linear-gradient(to right, $blue 27%, $yellow 27%, $yellow 73%,$green 73%);
+
+	.caro1, .caro2, .caro3 {
+	  -webkit-transform: scale(.3);
+	  transform: scale(.3);
+	  position: relative;
+	}
+	
+	.caro1 {
+	  left: -5px;
+	}
+	.caro2 {
+	  left: 36px;
+	  top: -130px;
+	}
+	.caro3 {
+	  left: 15px;
+	  top: -230px;
+	}
+	.caro {
+		width: 0;
+		height: 0;
+		border: 50px solid transparent;
+		border-bottom: 80px solid $green;
+		position: relative;
+		top: -50px;
+	  
+			&:after {
+				content: '';
+				position: absolute;
+				left: -50px; 
+	  		top: 78px;
+				width: 0;
+				height: 0;
+				border: 50px solid transparent;
+				border-top: 80px solid $green;
+			}
+		}
+}
+
+.scotland {
+	background: -webkit-linear-gradient(125deg, transparent 45%, transparent 45%, white 45%, white 45%, white 55%, transparent 55%, transparent 55%), -webkit-linear-gradient(53deg, $lightBlue 45%,$lightBlue 45%, white 45%,white 45%, white 55%,$lightBlue 55%,$lightBlue 55%); 
+	background: linear-gradient(144deg, transparent 45%, transparent 45%, white 45%, white 45%, white 55%, transparent 55%, transparent 55%), linear-gradient(37deg, $lightBlue 45%,$lightBlue 45%,#ffffff 45%,#ffffff 45%,#ffffff 55%,$lightBlue 55%,$lightBlue 55%); 
+}
+
+.pakistan {
+  background: -webkit-linear-gradient(left, white 25%, #01411C 25%);
+	background: linear-gradient(to right, white 25%, #01411C 25%);
+  position: relative;
+
+	&:before, &:after {
+	  content: "";
+	  position: absolute;
+	}
+	
+	&:before {
+	  background: white;
+	  width: 100px;
+	  height: 100px;
+	  border-radius: 50%;
+	  left: 40%;
+	  top: 20%;
+	}
+	
+	&:after {
+	  background: #01411C;
+	  width: 90px;
+	  height: 90px;
+	  border-radius: 50%;
+	  left: 48%;
+	  top: 13%;
+	}
+	
+	.star {
+		z-index: 500;
+		position: relative;
+		display: block;
+		width: 0px;
+		height: 0px;
+	  left: 50px;
+	  top: 20px;
+		border-right:  100px solid transparent;
+		border-bottom: 70px  solid white;
+		border-left:   100px solid transparent;
+		-webkit-transform: rotate(20deg) scale(.2);
+		transform: rotate(20deg) scale(.2);
+		
+		&:before {
+			border-bottom: 80px solid white;
+			border-left: 30px solid transparent;
+			border-right: 30px solid transparent;
+			position: absolute;
+			height: 0;
+			width: 0;
+			top: -45px;
+			left: -65px;
+			display: block;
+			content: '';
+			-webkit-transform: rotate(-35deg);
+			transform: rotate(-35deg);
+		}
+		
+		&:after {
+		   position: absolute;
+		   display: block;
+		   color: red;
+		   top: 3px;
+		   left: -105px;
+		   width: 0px;
+		   height: 0px;
+		   border-right: 100px solid transparent;
+		   border-bottom: 70px solid white;
+		   border-left: 100px solid transparent;
+		  content: '';
+		   -webkit-transform: rotate(-70deg);
+		   transform: rotate(-70deg);   
+ 		}
+	}
+}
+
+.christies {
+  background-color: $red !important;
+  background: -webkit-radial-gradient(center, ellipse cover, $yellow 50%,$yellow 50%,$red 50%);
+  background: radial-gradient(ellipse at center, $yellow 50%,$yellow 50%, $red 50%);
+  background-size: 65px 65px;
+  background-repeat: repeat-x;
+  background-position: 3px;
+}
+
+.korea {
+  background: white;
+  position: relative;
+
+	.umyang {
+	  position: absolute;
+	  background: -webkit-linear-gradient(top, $red 50%, $blue 50%);
+	  background: linear-gradient(to bottom, $red 50%, $blue 50%);
+	  width: 80px;
+	  height: 80px;
+	  border-radius: 50%;
+	  top: 35px;
+	  left: 50%;
+	  margin-left: -40px;
+	  -webkit-transform: rotate(20deg);
+	  transform: rotate(20deg);
+	
+		&:before, &:after {
+		  content: '';
+		  display: block;
+		  position: absolute;
+		  width: 40px;
+		  height: 40px;
+		  border-radius: 50%;
+		  top: 20px;
+		}
+		&:before {
+		  background: $red;
+		}
+		&:after {
+		  background: $blue;
+		  right: 0;
+		}
+	}
+	
+	span {
+	  position: absolute;
+	  display: block;
+	  font-size: 2rem; 
+	  top: -15px;
+	
+		&:first-child {
+		  left: 90px;
+		  -webkit-transform: rotate(125deg);
+		  transform: rotate(125deg);
+		}
+		
+		&:nth-child(2) {
+		  right: 90px;
+		  -webkit-transform: rotate(-125deg);
+		  transform: rotate(-125deg); 
+		}
+	
+		br {
+	  	line-height: 140px;
+		}
+  }
+}
+
+.taiwan {
+  background: $red;
+  position: relative;
+  
+  &:after {
+    content:"";
+    display: block;
+    background: $blue;
+    width: 100px;
+    height: 75px;
+  }
+  
+  .sun {
+  z-index: 400;
+  position: absolute;
+  left: -45px;
+  top: -58px;
+  width: 190px;
+  height: 190px;
+  -webkit-transform: scale(.3);
+          transform: scale(.3);
+  
+    .tr {
+      width: 0;
+      height: 0;
+      border-left: 15px solid transparent;
+      border-right: 15px solid transparent;
+      border-bottom: 50px solid white;
+      position: absolute;
+      z-index:8000;
+      
+      &.tr1 {
+        left: 80px;
+      }
+      &.tr2 {
+        left: 80px;
+        bottom: 0;
+        -webkit-transform: rotate(180deg);
+        transform: rotate(180deg);
+      }
+      &.tr3 {
+        -webkit-transform: rotate(90deg);
+        transform: rotate(90deg);
+        top: 71px;
+        right: 10px;
+      }
+      &.tr4 {
+        -webkit-transform: rotate(-90deg);
+        transform: rotate(-90deg);
+        top: 71px;
+        left: 10px;
+      }
+      &.tr5 {
+        -webkit-transform: rotate(60deg);
+        transform: rotate(60deg);
+        right:19px;
+        top:36px;
+      }
+      &.tr6 {
+        -webkit-transform: rotate(-60deg);
+        transform: rotate(-60deg);
+        left:19px;
+        top:36px;
+      }
+      &.tr7 {
+       -webkit-transform: rotate(30deg);
+        transform: rotate(30deg); 
+        right:46px;
+        top: 12px;
+      }
+      &.tr8 {
+        left:46px;
+        top: 12px;
+        -webkit-transform: rotate(-30deg);
+        transform: rotate(-30deg);
+      }
+      &.tr9 {
+        -webkit-transform: rotate(120deg);
+        transform: rotate(120deg);
+        right:20px;
+        bottom:34px;
+      }
+      &.tr10 {
+        -webkit-transform: rotate(-120deg);
+        transform: rotate(-120deg);
+        left:20px;
+        bottom:34px;
+      }
+      &.tr11 {
+        -webkit-transform: rotate(150deg);
+        transform: rotate(150deg);
+        right:46px;
+        bottom: 11px;
+      }
+      &.tr12 {
+        -webkit-transform: rotate(-150deg);
+        transform: rotate(-150deg);
+        left:46px;
+        bottom: 11px;
+      }
+    }
+   
+    .circle {
+      width:96px;
+      height:96px;
+      border-radius:50%;
+      background: white;
+      border: 6px solid $blue;
+      z-index: 9999;
+      position:absolute;
+      top:50%;
+      left:50%;
+      margin: -54px 0 0 -54px;
+    }
+  }
+}
+
+.ab {
+  background: $black;
+  position: relative;
+  
+  &:before, &:after {
+    content: "";
+    display:block;
+    position: absolute;
+    width:200px;
+  }
+  &:before {
+    background: white;
+    height: 60px;
+    bottom: 0;
+  }
+  
+  &:after {
+    background: $lightBlue;
+    height: 33px;
+    z-index: 400;
+    bottom: 60px;
+  }
+  
+  .triangle-bl {
+    position: absolute;
+    z-index: 500;
+    width: 0;
+    height: 0;
+    bottom: 0;
+    border-bottom: 150px solid $red;
+    border-right: 100px solid transparent;
+  }
+  .triangle-br {
+    z-index: 500;
+    position: absolute;
+    width: 0;
+    height: 0;
+    border-bottom: 150px solid $red;
+    border-left: 100px solid transparent;
+    bottom: 0;
+    right: 0;
+  }
+  
+  .sun {
+  z-index: 400;
+  position: absolute;
+  left: 4px;
+  top: -44px;
+  width: 190px;
+  height: 190px;
+  -webkit-transform: scale(.5);
+          transform: scale(.5);
+  
+    .tr {
+      width: 0;
+      height: 0;
+      border-left: 15px solid transparent;
+      border-right: 15px solid transparent;
+      border-bottom: 70px solid $yellow;
+      position: absolute;
+      z-index:8000;
+      
+      &.tr1 {
+        left: 80px;
+        top: 8px;
+      }
+      &.tr2 {
+        -webkit-transform: rotate(90deg);
+        transform: rotate(90deg);
+        top: 71px;
+        right: 10px;
+      }
+      &.tr3 {
+        -webkit-transform: rotate(-90deg);
+        transform: rotate(-90deg);
+        top: 71px;
+        left: 10px;
+      }
+      &.tr4 {
+        -webkit-transform: rotate(23deg);
+        transform: rotate(23deg);
+        top: 17px;
+        right: 52px;
+      }
+      &.tr5 {
+        -webkit-transform: rotate(-23deg);
+        transform: rotate(-23deg);
+        top: 17px;
+        left: 52px;
+      }
+      &.tr6 {
+        -webkit-transform: rotate(45deg);
+        transform: rotate(45deg);
+        top: 28px;
+        right: 28px;
+      }
+      &.tr7 {
+        -webkit-transform: rotate(-45deg);
+        transform: rotate(-45deg);
+        top: 28px;
+        left: 28px;
+      }
+      &.tr8 {
+        -webkit-transform: rotate(68deg);
+        transform: rotate(68deg);
+        top: 48px;
+        right: 15px;
+      }
+      &.tr9 {
+        -webkit-transform: rotate(-68deg);
+        transform: rotate(-68deg);
+        top: 48px;
+        left: 15px;
+      }
+    }
+    .circle {
+      position: absolute;
+      width: 80px;
+      height: 80px;
+      background: $yellow;
+      border-radius: 50%;
+      top: 50%;
+      left: 50%;
+      margin: -20px 0 0 -40px;
+    }
+  }
+}
+
+.canada {
+  background: -webkit-linear-gradient(left, $red 25%, white 25%, white 75%, $red 75%);
+	background: linear-gradient(to right, $red 25%, white 25%, white 75%, $red 75%);
+  position: relative;
+  
+  .maple {
+  position: relative;
+  -webkit-transform: scale(.25);
+  transform: scale(.23);
+    top: 40px;
+  
+  .leaf1 {
+    position: absolute; 
+    left: 20px;
+    border-top: 200px solid $red;
+    border-left: 30px solid transparent;
+    border-right: 30px solid transparent;
+    height: 0;
+    width: 100px;
+    top: 15px;
+    
+    &:before {
+      content: '';
+      display: block;
+      position: absolute;
+      top: -205px;
+      left: -30px;
+      width: 0;
+      height: 0;
+      border-left: 80px solid transparent;
+      border-right: 80px solid transparent;
+      border-top: 40px solid white;
+    }
+    
+    &:after {
+      content: '';
+      display: block;
+      position: absolute;
+      width: 0;
+      height: 0;
+      border-left: 50px solid transparent;
+      border-right: 50px solid transparent;
+      border-bottom: 100px solid $red;
+      top: -260px;
+      left: 2px;
+    }
+  }
+  
+  .right {
+    position: absolute;
+    -webkit-transform: rotate(65deg);
+    transform: rotate(65deg);
+    top: 40px;
+    right: -70px;
+  }
+  
+  .left {
+    position: absolute;
+    -webkit-transform: rotate(-65deg);
+    transform: rotate(-65deg);
+    top: 40px;
+    left: -70px;
+  }
+  
+  .side-leaf {
+    position: relative;
+    border-top: 220px solid $red;
+    border-left: 40px solid transparent;
+    border-right: 40px solid transparent;
+    height: 0;
+    width: 100px;
+    -webkit-transform: scale(.65);
+    transform: scale(.65);
+    
+    &:before {
+      content: '';
+      display: block;
+      position: absolute;
+      top: -222px;
+      left: -38px;
+      width: 0;
+      height: 0;
+      border-left: 90px solid transparent;
+      border-right: 90px solid transparent;
+      border-top: 50px solid white;
+    }
+    
+    &:after {
+      content: '';
+      display: block;
+      position: absolute;
+      width: 0;
+      height: 0;
+      border-left: 50px solid transparent;
+      border-right: 50px solid transparent;
+      border-bottom: 100px solid $red;
+      top: -260px;
+      left: 2px;
+    }
+  }
+}
+  
+  .stem {
+    position: absolute;
+    top: -210px;
+    border-bottom: 600px solid $red;
+    border-left: 50px solid transparent;
+    border-right: 50px solid transparent;
+    height: 0;
+    width: 100px;
+    -webkit-transform: scale(.04);
+    transform: scale(.04);
+    
+    &:after {
+      content: "";
+      position: absolute;
+      display: block;
+      border-bottom: 300px solid $red;
+      border-left: 250px solid transparent;
+      border-right: 250px solid transparent;
+      height: 0;
+      width: 450px;
+      top: 10px;
+      left: -420px;
+    }
+  }
+  
+}
+
+.south-africa {
+  position: relative;
+  overflow: hidden;
+  
+  background: -webkit-linear-gradient(top, $red 0%, $red 33.3%, white 33.3%, white 66.6%, $violet 66.6%, $violet 100%);
+  background: linear-gradient(to bottom, $red 0%, $red 33.3%, white 33.3%, white 66.6%, $violet 66.6%, $violet 100%);
+  
+  &:after {
+    content: "";
+    background: $green;
+    width: 120px;
+    height: 26px;
+    display: block;
+    position: absolute;
+    right: 0;
+    top: 63px;
+  }
+  
+  .corner {
+    width: 85px;
+    height: 85px;
+    background: $black;
+    box-shadow: 0 0 0 12px $yellow,
+              0 0 0 38px $green,
+              0 0 0 50px white;
+  
+    -webkit-transform: rotate(-45deg);
+    transform: rotate(-45deg);
+    position: absolute;
+    top: 34px;
+    left: -55px;
+  }
+}
+
+.swiss {
+  background: $red;
+  position: relative;
+  
+  &:before, &:after {
+    content: "";
+    position: absolute;
+    background: white;
+  }
+  
+  &:before {
+    height: 80px;
+    width: 30px;
+    left: 85px;
+    top: 35px;
+  }
+  &:after {
+    width: 80px;
+    height: 30px;
+    left: 60px;   
+    top: 60px; 
+  }
+}
+
+.india {
+  position: relative;
+  background: -webkit-linear-gradient(top,  $orange 33%, white 33%, white 66%, white 66%, $green 66%);
+background: linear-gradient(to bottom, $orange 33%, white 33%, white 66%, white 66%, $green 66%);
+  
+  .inner-circle {
+    position: relative;
+    width: 200px;
+    height: 200px;
+    border-radius: 50%;
+    background: -webkit-gradient(ellipse at center, $blue 10%, white 10%, white 65%, $blue 65%);
+    background: radial-gradient(ellipse at center, $blue 10%, white 10%, white 65%, $blue 65%);  
+    
+    top: -27px;
+    left: 0ps;
+    -webkit-transform: scale(.2);
+    transform: scale(.2);
+   
+    .diamond {
+  	  width: 0;
+  	  height: 0;
+  	  border: 4px solid transparent;
+  	  border-bottom: 70px solid $blue;
+  	  position: absolute;
+      
+      &:after {
+  	    content: '';
+  	    position: absolute;
+  	    left: -4px; 
+        top: 70px;
+  	    width: 0;
+  	    height: 0;
+  	    border: 4px solid transparent;
+  	    border-top: 16px solid $blue;
+      }
+    }
+    .diamond1 {
+      top: 0px;
+      left: 96px;
+    }
+    .diamond2 {
+      top: 5px;
+      right: 72px;
+      -webkit-transform: rotate(22.5deg);
+      transform: rotate(22.5deg);
+    }
+    .diamond3 {
+      top: 18px;
+      right: 51px;
+      -webkit-transform: rotate(45deg);
+      transform: rotate(45deg);
+    }
+    .diamond4 {
+      top: 39px;
+      right: 39px;
+      -webkit-transform: rotate(67.5deg);
+      transform: rotate(67.5deg);
+    }
+    .diamond5 {
+      top: 63px;
+      right: 33px;
+      -webkit-transform: rotate(90deg);
+      transform: rotate(90deg);
+    }
+    .diamond6 {
+      top: 86px;
+      right: 38px;
+      -webkit-transform: rotate(112.5deg);
+      transform: rotate(112.5deg);
+    }
+    .diamond7 {
+      top: 108px;
+      right: 51px;
+      -webkit-transform: rotate(135deg);
+      transform: rotate(135deg);
+    }
+    .diamond8 {
+      bottom: 5px;
+      right: 72px;
+      -webkit-transform: rotate(157.5deg);
+      transform: rotate(157.5deg);
+    }
+    .diamond9 {
+      bottom: 0px;
+      left: 96px;
+      -webkit-transform: rotate(180deg);
+      transform: rotate(180deg);
+    }
+    .diamond10 {
+      bottom: 5px;
+      left: 72px;
+      -webkit-transform: rotate(202.5deg);
+      transform: rotate(202.5deg);
+    }
+    .diamond11 {
+      top: 108px;
+      left: 51px;
+      -webkit-transform: rotate(225deg);
+      transform: rotate(225deg);
+    }
+    .diamond12 {
+      top: 87px;
+      left: 38px;
+      -webkit-transform: rotate(247.5deg);
+      transform: rotate(247.5deg);
+    }
+    .diamond13 {
+      top: 63px;
+      left: 33px;
+      -webkit-transform: rotate(270deg);
+      transform: rotate(270deg);
+    }
+    .diamond14 {
+      top: 39px;
+      left: 38px;
+      -webkit-transform: rotate(292.5deg);
+      transform: rotate(292.5deg);
+    }
+    .diamond15 {
+      top: 18px;
+      left: 51px;
+      -webkit-transform: rotate(315deg);
+      transform: rotate(315deg);
+    }
+    .diamond16 {
+      top: 5px;
+      left: 72px;
+      -webkit-transform: rotate(337.5deg);
+      transform: rotate(337.5deg);
+    }
+    
+    .dot {
+      position: absolute;
+      width: 14px;
+      height: 14px;
+      background: $blue;
+      border-radius: 50%;
+    }
+    .dot1 {
+      left: 74px;
+      top: 3px;
+    }
+    .dot2 {
+      right: 74px;
+      top: 3px;
+    }
+    .dot3 {
+      left: 43px;
+      top: 17px;
+    }
+    .dot4 {
+      right: 43px;
+      top: 17px;
+    }
+    .dot5 {
+      left: 17px;
+      top: 41px;
+    }
+    .dot6 {
+      right: 17px;
+      top: 41px;
+    }
+    .dot7 {
+      left: 3px;
+      top: 75px;
+    }
+    .dot8 {
+      right: 3px;
+      top: 75px;
+    }
+    .dot9 {
+      left: 3px;
+      bottom: 75px;
+    }
+    .dot10 {
+      right: 3px;
+      bottom: 75px;
+    }
+    .dot11 {
+      left: 17px;
+      bottom: 41px;
+    }
+    .dot12 {
+      right: 17px;
+      bottom: 41px;
+    }
+    .dot13 {
+      left: 43px;
+      bottom: 17px;
+    }
+    .dot14 {
+      right: 43px;
+      bottom: 17px;
+    }
+    .dot15 {
+      left: 74px;
+      bottom: 3px;
+    }
+    .dot16 {
+      right: 74px;
+      bottom: 3px;
+    }
+  }
+}