├── .editorconfig
├── .gitignore
├── .postcss.json
├── Gruntfile.js
├── README.md
├── assets
    ├── js
    │   └── scripts.js
    └── scss
    │   ├── atoms
    │       ├── grid.scss
    │       └── typography.scss
    │   ├── base
    │       ├── base.scss
    │       ├── mixins.scss
    │       ├── normalize.scss
    │       └── variables.scss
    │   ├── main.scss
    │   ├── molecules
    │       └── navigation.scss
    │   └── organisms
    │       ├── flags
    │           ├── algeria.scss
    │           ├── austria.scss
    │           ├── brazil.scss
    │           ├── bulgaria.scss
    │           ├── cameroon.scss
    │           ├── chile.scss
    │           ├── china.scss
    │           ├── colombia.scss
    │           ├── cuba.scss
    │           ├── denmark.scss
    │           ├── finland.scss
    │           ├── france.scss
    │           ├── germany.scss
    │           ├── ghana.scss
    │           ├── greece.scss
    │           ├── honduras.scss
    │           ├── ireland.scss
    │           ├── israel.scss
    │           ├── italy.scss
    │           ├── japan.scss
    │           ├── netherlands.scss
    │           ├── nigeria.scss
    │           ├── norway.scss
    │           ├── peru.scss
    │           ├── south-africa.scss
    │           ├── sweden.scss
    │           ├── tunisia.scss
    │           ├── turkey.scss
    │           ├── usa.scss
    │           ├── venezuela.scss
    │           └── vietnam.scss
    │       ├── keyframes.scss
    │       └── layout.scss
├── build
    ├── css
    │   └── main.min.css
    └── js
    │   └── scripts.min.js
├── favicon.ico
├── index.html
└── package.json


/.editorconfig:
--------------------------------------------------------------------------------
 1 | # editorconfig.org
 2 | root = false
 3 | 
 4 | # Pra todos os arquivos
 5 | [*]
 6 | indent_style = space
 7 | indent_size = 4
 8 | charset = utf-8
 9 | end_of_line = lf
10 | insert_final_newline = true
11 | trim_trailing_whitespace = true
12 | 
13 | # Estilo de identação em arquivos HTML
14 | [*.html]
15 | indent_style = space
16 | indent_size = 4
17 | 
18 | # Estilo de identação em arquivos CSS
19 | [*.css]
20 | indent_style = space
21 | indent_size = 4
22 | 
23 | # Estilo de identação em arquivos JS dentro do diretório Scripts
24 | [*.js]
25 | indent_style = space
26 | indent_size = 4
27 | 
28 | [*.md]
29 | trim_trailing_whitespace = false
30 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | /node_modules
2 | npm.debug.log


--------------------------------------------------------------------------------
/.postcss.json:
--------------------------------------------------------------------------------
1 | {
2 |   "use": ["autoprefixer"],
3 |   "input": "build/css/main.min.css",
4 |   "output": "build/css/main.min.css",
5 |   "autoprefixer": {
6 |     "browsers": "> 5%"
7 |   }
8 | }


--------------------------------------------------------------------------------
/Gruntfile.js:
--------------------------------------------------------------------------------
  1 | "use strict";
  2 | 
  3 | module.exports = function( grunt ) {
  4 | 
  5 |     grunt.initConfig({
  6 | 
  7 |         // Config variable paths
  8 |         config: {
  9 | 
 10 |             // Project paths
 11 |             dev: 'assets/',
 12 |             build: 'build/'
 13 |         },
 14 | 
 15 |         // SASS _______________________________________________________________________
 16 |         sass: {
 17 | 
 18 |             // Dev
 19 |             dev: {
 20 |                 options: {
 21 |                     compass: false,
 22 |                     style: 'compressed',
 23 |                     noCache: true
 24 |                 },
 25 |                 files: {
 26 |                     '<%= config.build %>css/main.min.css': 
 27 |                     '<%= config.dev %>scss/main.scss'
 28 |                 },
 29 |             }
 30 |         },
 31 | 
 32 |         // UGLIFY _____________________________________________________________________
 33 |         uglify: {
 34 | 
 35 |             // Project files
 36 |             dev: {
 37 |                 files: {
 38 |                     '<%= config.build %>js/scripts.min.js': 
 39 |                     ['<%= config.dev %>js/scripts.js']
 40 |                 }
 41 |             }
 42 |         },
 43 | 
 44 |         // JSHINT _____________________________________________________________________
 45 |         jshint: {
 46 | 
 47 |             // Project files
 48 |             dev: ['<%= config.dev %>js/scripts.js'],
 49 |                 options: {
 50 |                     globals: {
 51 |                         jQuery: true,
 52 |                         reporter: require('jshint-stylish')
 53 |                 }
 54 |             }
 55 | 
 56 |         },
 57 | 
 58 | 
 59 |         // WATCH ______________________________________________________________________
 60 |         watch: {
 61 | 
 62 |             // PROJECT TASKS
 63 | 
 64 |             // Run SASS task for .scss files
 65 |             sass_dev: {
 66 |                 files: [
 67 |                     '<%= config.dev %>scss/**/*.scss',
 68 |                     '<%= config.dev %>scss/*.scss'
 69 |                 ],
 70 |                 tasks: ['sass:dev'],
 71 |             },
 72 | 
 73 |             // Run Uglify task when scripts are modified
 74 |             scripts_dev: {
 75 |                 files: ['<%= config.dev %>js/scripts.js'],
 76 |                 tasks: ['jshint:dev', 'uglify:dev'],
 77 |             },
 78 | 
 79 |             // Update :)
 80 |             livereload: {
 81 |                 options: { livereload: true },
 82 |                 files: [
 83 |                     // Project files
 84 |                     '*.html',
 85 |                     '<%= config.build %>css/main.min.css',
 86 |                     '<%= config.build %>js/scripts.min.js'
 87 |                 ],
 88 |             },
 89 |         }
 90 | 
 91 |     });
 92 | 
 93 |     // Load plugins
 94 |     grunt.loadNpmTasks('grunt-contrib-sass');
 95 |     grunt.loadNpmTasks('grunt-contrib-watch');
 96 |     grunt.loadNpmTasks('grunt-contrib-uglify');
 97 |     grunt.loadNpmTasks('grunt-contrib-jshint');
 98 | 
 99 |     // Grunt tasks
100 | 
101 |     // CSS
102 |     grunt.registerTask( 'css', [ 'sass' ] );
103 | 
104 |     // JS
105 |     grunt.registerTask( 'js', [ 'jshint', 'uglify' ] );
106 | 
107 |     // Watch
108 |     grunt.registerTask( 'live', [ 'watch' ] );
109 | 
110 | };


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | Flags CSS3 🚩
 2 | ===========
 3 | 
 4 | Countries flags developed using only CSS3. | [Demo](http://raphaelfabeni.github.io/flags-css3)
 5 | 
 6 | ![CSS3 Flags](https://cloud.githubusercontent.com/assets/1345662/4113601/89ee9eca-3251-11e4-8986-dd99ec515595.png)
 7 | 
 8 | ## Installing the *flags* - 🎁
 9 | 
10 | * In the root folder, run `npm install` for install all the dependencies.
11 | * Run `npm start` for run the initial *build* and start the project at `http://localhost:3000`.
12 | * It is possible to run `npm run dev` for start the develpment mode with `watch` task enable (it's necessary run a initial build before).
13 | 
14 | Thanks for [Daniel Eden](https://twitter.com/_dte) for some animations in awesome [animate.css](http://daneden.github.io/animate.css).
15 | 
16 | Inspired by [A Single Div](http://lynnandtonic.github.io/a-single-div/), despite the fact I didn't worry about using only one div.
17 | 
18 | ## License - 📯
19 | 
20 | MIT License © Raphael Fabeni
21 | 


--------------------------------------------------------------------------------
/assets/js/scripts.js:
--------------------------------------------------------------------------------
 1 | (function() {
 2 |     'use strict';
 3 | 
 4 |     var elements = document.querySelectorAll('.country'),
 5 |     content = document.getElementById('main');
 6 | 
 7 |     checkElement();
 8 | 
 9 |     window.addEventListener("scroll", checkElement, false);
10 | 
11 |     function checkElement() {
12 |         var windowHeight = window.innerHeight,
13 |         halfHeight = windowHeight / 2,
14 |         size = 55,
15 |         distance = window.scrollY,
16 |         contentHeight = content.offsetHeight;
17 | 
18 |         for( var i = 0; i< elements.length; i++ ) {
19 |             var aloha = elements[i].getBoundingClientRect();
20 | 
21 |             if( (halfHeight - size) > aloha.top ) {
22 |                 elements[i].classList.add('active');
23 |             }
24 |         }
25 | 
26 |         if((windowHeight + distance) >= contentHeight) {
27 |             if( (elements.length % 2) === 0 ) {
28 |                 elements[elements.length -2].classList.add('active');
29 |                 elements[elements.length -1].classList.add('active');
30 |             } else {
31 |                 elements[elements.length -1].classList.add('active');
32 |             }
33 |         }
34 |     }
35 | })();
36 | 


--------------------------------------------------------------------------------
/assets/scss/atoms/grid.scss:
--------------------------------------------------------------------------------
 1 | /*  ==========================================================================
 2 |     Grid
 3 |     ========================================================================== */
 4 |     body {
 5 |         width: 100%;
 6 |     }
 7 | 
 8 | 
 9 |     @media only screen {
10 | 
11 |         .main { overflow: hidden; }
12 | 
13 |         /*  Country
14 |             ========================================================================== */
15 |             .country {
16 |                 position: relative;
17 |                 overflow: hidden;
18 |                 width: 100%;
19 |                 height: 485px;
20 |                 // @include box-shadow(0 0 15px 0 rgba(0,0,0,0.5) inset);
21 | 
22 |                 //background-image: url(http://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Flag_of_Honduras.svg/800px-Flag_of_Honduras.svg.png);
23 |                 background-repeat: no-repeat;
24 |                 background-position: center center;
25 |                 @include background-size(450px 295px);
26 |             }
27 | 
28 |             .flag {
29 |                 position: absolute;
30 |                 top: 50%;
31 |                 left: 50%;
32 |                 margin: -147px 0 0 -225px;
33 |                 width: 100%;
34 |                 max-width: 450px;
35 |                 height: 295px;
36 |                 overflow: hidden;
37 |             }
38 |     }
39 | 
40 |     /*
41 |      * CSS for devices with resolution higher than breakpoint
42 |      */
43 | 
44 |     @media only screen and (min-width: $breakpoint) {
45 | 
46 |         /*  Country
47 |             ========================================================================== */
48 |             .country {
49 |                 float: left;
50 |                 width: 50%;
51 |             }
52 |     }
53 | 


--------------------------------------------------------------------------------
/assets/scss/atoms/typography.scss:
--------------------------------------------------------------------------------
 1 | /*  ==========================================================================
 2 |     Typography
 3 |     ========================================================================== */
 4 | 
 5 |     @media only screen {
 6 | 
 7 |         body {
 8 |             -webkit-text-size-adjust: none;
 9 |             -ms-text-size-adjust:none;
10 |         }
11 | 
12 |         /*  Titles
13 |             ========================================================================== */
14 |             h1,
15 |             h2,
16 |             h3,
17 |             h4,
18 |             h5,
19 |             h6 {}
20 | 
21 |         /*  Texts
22 |             ========================================================================== */
23 |             p {
24 |                 color: #666666;
25 |                 font-size: 14px;
26 |                 line-height: 20px;
27 |                 margin: 0 0 15px;
28 |                 text-align: left;
29 |             }
30 | 
31 |         /*  Links
32 |             ========================================================================== */
33 |             a {
34 |              color: #12a5a5;
35 |              text-decoration: none;
36 |            }
37 | 
38 |            a:hover { text-decoration: underline; }
39 | 
40 |     }
41 | 


--------------------------------------------------------------------------------
/assets/scss/base/base.scss:
--------------------------------------------------------------------------------
 1 | /*  ==========================================================================
 2 |     Base
 3 |     ========================================================================== */
 4 |     ::-moz-selection {
 5 |         background: #666;
 6 |         text-shadow: none;
 7 |         color: #fff;
 8 |     }
 9 | 
10 |     ::selection {
11 |         background: #666;
12 |         text-shadow: none;
13 |         color: #fff;
14 |     }
15 | 
16 |     img,
17 |     object,
18 |     embed,
19 |     iframe { max-width: 100%; }
20 | 
21 |     img { height: auto; }
22 | 
23 |     *,
24 |     *:after,
25 |     *:before { @include box-sizing(); }


--------------------------------------------------------------------------------
/assets/scss/base/mixins.scss:
--------------------------------------------------------------------------------
  1 | /*  ==========================================================================
  2 |     Mixins
  3 |     ========================================================================== */
  4 | 
  5 |     /*  Transition
  6 |         ========================================================================== */
  7 |         @mixin transition($parameters...) {
  8 |             -webkit-transition: $parameters;
  9 |                -moz-transition: $parameters;
 10 |                  -o-transition: $parameters;
 11 |                 -ms-transition: $parameters;
 12 |                     transition: $parameters;
 13 |         }
 14 | 
 15 | 
 16 |     /*  Box sizing
 17 |         ========================================================================== */
 18 |         @mixin box-sizing() {
 19 |             -webkit-box-sizing: border-box;
 20 |                -moz-box-sizing: border-box;
 21 |                 -ms-box-sizing: border-box;
 22 |                     box-sizing: border-box;
 23 |         }
 24 | 
 25 |     /*  Border radius
 26 |         ========================================================================== */
 27 |         @mixin border-radius($radius) {
 28 |             -webkit-border-radius: $radius;
 29 |                -moz-border-radius: $radius;
 30 |                     border-radius: $radius;
 31 |         }
 32 | 
 33 |     /*  Box shadow
 34 |         ========================================================================== */
 35 |         @mixin box-shadow($parameters...) {
 36 |             -webkit-box-shadow: $parameters;
 37 |                     box-shadow: $parameters;
 38 |         }
 39 | 
 40 | 
 41 |     /*  Animation
 42 |         ========================================================================== */
 43 |         @mixin animation($parameters...) {
 44 |             -webkit-animation: $parameters;
 45 |                -moz-animation: $parameters;
 46 |                 -ms-animation: $parameters;
 47 |                  -o-animation: $parameters;
 48 |                     animation: $parameters;
 49 |         }
 50 | 
 51 |         @mixin keyframes($name) {
 52 |             @-webkit-keyframes #{$name} {
 53 |                 @content; 
 54 |             }
 55 | 
 56 |             @-moz-keyframes #{$name} {
 57 |                 @content;
 58 |             }
 59 | 
 60 |             @-ms-keyframes #{$name} {
 61 |                 @content;
 62 |             }
 63 | 
 64 |             @-o-keyframes #{$name} {
 65 |                 @content;
 66 |             }
 67 | 
 68 |             @keyframes #{$name} {
 69 |                 @content;
 70 |             } 
 71 |         }
 72 | 
 73 |     /*  Transform
 74 |         ========================================================================== */
 75 |         @mixin transform($parameters) {
 76 |             -webkit-transform: $parameters;
 77 |                -moz-transform: $parameters;
 78 |                  -o-transform: $parameters;
 79 |                 -ms-transform: $parameters;
 80 |                     transform: $parameters;
 81 |         }
 82 | 
 83 |         %back-face {
 84 |             -webkit-backface-visibility: visible;
 85 |                -moz-backface-visibility: visible;
 86 |                 -ms-backface-visibility: visible;
 87 |                  -o-backface-visibility: visible;
 88 |                     backface-visibility: visible;
 89 |         }
 90 | 
 91 |     /*  Background-size
 92 |         ========================================================================== */
 93 |         @mixin background-size($value) {
 94 |             -webkit-background-size: $value;
 95 |                -moz-background-size: $value;
 96 |                  -o-background-size: $value;
 97 |                     background-size: $value;
 98 |         }
 99 | 
100 | 
101 |     /*  Gradients
102 |         ========================================================================== */
103 | 
104 |         /*  Vertical gradient
105 |             ========================================================================== */
106 |             @mixin simple-vertical-gradient($startColor, $endColor) {
107 |                 background-color: $startColor;
108 |                 background: -webkit-gradient(linear, left top, left bottom, from($startColor), to($endColor));
109 |                 background: -webkit-linear-gradient(top, $startColor, $endColor);
110 |                 background:    -moz-linear-gradient(top, $startColor, $endColor);
111 |                 background:     -ms-linear-gradient(top, $startColor, $endColor);
112 |                 background:      -o-linear-gradient(top, $startColor, $endColor);
113 |                 background:         linear-gradient(to bottom, $startColor, $endColor);
114 |                 filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#{$startColor}', EndColorStr='#{$endColor}');
115 |             }
116 | 
117 |             @mixin vertical-gradient($all, $colors...) {
118 |                 background: -webkit-linear-gradient(top, $colors) $all;
119 |                 background:    -moz-linear-gradient(top, $colors) $all;
120 |                 background:      -o-linear-gradient(top, $colors) $all;
121 |                 background:     -ms-linear-gradient(top, $colors) $all;
122 |                 background:         linear-gradient(to bottom, $colors) $all;
123 |             }
124 | 
125 |         /*  Horizontal Gradient
126 |             ========================================================================== */
127 |             @mixin simple-horizontal-gradient($startColor, $endColor) {
128 |                 background-color: $startColor;
129 |                 background: -webkit-gradient(linear, left top, right top, from($startColor), to($endColor));
130 |                 background: -webkit-linear-gradient(left, $startColor, $endColor);
131 |                 background:    -moz-linear-gradient(left, $startColor, $endColor);
132 |                 background:     -ms-linear-gradient(left, $startColor, $endColor);
133 |                 background:      -o-linear-gradient(left, $startColor, $endColor);
134 |                 background:         linear-gradient(to right, $startColor, $endColor);
135 |                 filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#{$startColor}', EndColorStr='#{$endColor}');
136 |             }
137 | 
138 |             @mixin horizontal-gradient($colors...) {
139 |                 background: -webkit-linear-gradient(left, $colors);
140 |                 background:    -moz-linear-gradient(left, $colors);
141 |                 background:      -o-linear-gradient(left, $colors);
142 |                 background:     -ms-linear-gradient(left, $colors);
143 |                 background:         linear-gradient(to right, $colors);
144 |             }


--------------------------------------------------------------------------------
/assets/scss/base/normalize.scss:
--------------------------------------------------------------------------------
  1 | html {
  2 |     font-family: sans-serif; /* 1 */
  3 |     -ms-text-size-adjust: 100%; /* 2 */
  4 |     -webkit-text-size-adjust: 100%; /* 2 */
  5 | }
  6 | 
  7 | /**
  8 | * Remove default margin.
  9 | */
 10 | 
 11 | body {
 12 |     margin: 0;
 13 | }
 14 | 
 15 | /* HTML5 display definitions
 16 | ========================================================================== */
 17 | 
 18 | /**
 19 | * Correct `block` display not defined in IE 8/9.
 20 | */
 21 | 
 22 | article,
 23 | aside,
 24 | details,
 25 | figcaption,
 26 | figure,
 27 | footer,
 28 | header,
 29 | hgroup,
 30 | main,
 31 | nav,
 32 | section,
 33 | summary {
 34 |     display: block;
 35 | }
 36 | 
 37 | /**
 38 | * 1. Correct `inline-block` display not defined in IE 8/9.
 39 | * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 40 | */
 41 | 
 42 | audio,
 43 | canvas,
 44 | progress,
 45 | video {
 46 |     display: inline-block; /* 1 */
 47 |     vertical-align: baseline; /* 2 */
 48 | }
 49 | 
 50 | /**
 51 | * Prevent modern browsers from displaying `audio` without controls.
 52 | * Remove excess height in iOS 5 devices.
 53 | */
 54 | 
 55 | audio:not([controls]) {
 56 |     display: none;
 57 |     height: 0;
 58 | }
 59 | 
 60 | /**
 61 | * Address `[hidden]` styling not present in IE 8/9.
 62 | * Hide the `template` element in IE, Safari, and Firefox < 22.
 63 | */
 64 | 
 65 | [hidden],
 66 | template {
 67 |     display: none;
 68 | }
 69 | 
 70 | /* Links
 71 | ========================================================================== */
 72 | 
 73 | /**
 74 | * Remove the gray background color from active links in IE 10.
 75 | */
 76 | 
 77 | a {
 78 |     background: transparent;
 79 | }
 80 | 
 81 | /**
 82 | * Improve readability when focused and also mouse hovered in all browsers.
 83 | */
 84 | 
 85 | a:active,
 86 | a:hover {
 87 |     outline: 0;
 88 | }
 89 | 
 90 | /* Text-level semantics
 91 | ========================================================================== */
 92 | 
 93 | /**
 94 | * Address styling not present in IE 8/9, Safari 5, and Chrome.
 95 | */
 96 | 
 97 | abbr[title] {
 98 |     border-bottom: 1px dotted;
 99 | }
100 | 
101 | /**
102 | * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
103 | */
104 | 
105 | b,
106 | strong {
107 |     font-weight: bold;
108 | }
109 | 
110 | /**
111 | * Address styling not present in Safari 5 and Chrome.
112 | */
113 | 
114 | dfn {
115 |     font-style: italic;
116 | }
117 | 
118 | /**
119 | * Address variable `h1` font-size and margin within `section` and `article`
120 | * contexts in Firefox 4+, Safari 5, and Chrome.
121 | */
122 | 
123 | h1 {
124 |     font-size: 2em;
125 |     margin: 0.67em 0;
126 | }
127 | 
128 | /**
129 | * Address styling not present in IE 8/9.
130 | */
131 | 
132 | mark {
133 |     background: #ff0;
134 |     color: #000;
135 | }
136 | 
137 | /**
138 | * Address inconsistent and variable font size in all browsers.
139 | */
140 | 
141 | small {
142 |     font-size: 80%;
143 | }
144 | 
145 | /**
146 | * Prevent `sub` and `sup` affecting `line-height` in all browsers.
147 | */
148 | 
149 | sub,
150 | sup {
151 |     font-size: 75%;
152 |     line-height: 0;
153 |     position: relative;
154 |     vertical-align: baseline;
155 | }
156 | 
157 | sup {
158 |     top: -0.5em;
159 | }
160 | 
161 | sub {
162 |     bottom: -0.25em;
163 | }
164 | 
165 | /* Embedded content
166 | ========================================================================== */
167 | 
168 | /**
169 | * Remove border when inside `a` element in IE 8/9.
170 | */
171 | 
172 | img {
173 |     border: 0;
174 | }
175 | 
176 | /**
177 | * Correct overflow displayed oddly in IE 9.
178 | */
179 | 
180 | svg:not(:root) {
181 |     overflow: hidden;
182 | }
183 | 
184 | /* Grouping content
185 | ========================================================================== */
186 | 
187 | /**
188 | * Address margin not present in IE 8/9 and Safari 5.
189 | */
190 | 
191 | figure {
192 |     margin: 1em 40px;
193 | }
194 | 
195 | /**
196 | * Address differences between Firefox and other browsers.
197 | */
198 | 
199 | hr {
200 |     -moz-box-sizing: content-box;
201 |     box-sizing: content-box;
202 |     height: 0;
203 | }
204 | 
205 | /**
206 | * Contain overflow in all browsers.
207 | */
208 | 
209 | pre {
210 |     overflow: auto;
211 | }
212 | 
213 | /**
214 | * Address odd `em`-unit font size rendering in all browsers.
215 | */
216 | 
217 | code,
218 | kbd,
219 | pre,
220 | samp {
221 |     font-family: monospace, monospace;
222 |     font-size: 1em;
223 | }
224 | 
225 | /* Forms
226 | ========================================================================== */
227 | 
228 | /**
229 | * Known limitation: by default, Chrome and Safari on OS X allow very limited
230 | * styling of `select`, unless a `border` property is set.
231 | */
232 | 
233 | /**
234 | * 1. Correct color not being inherited.
235 | *    Known issue: affects color of disabled elements.
236 | * 2. Correct font properties not being inherited.
237 | * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
238 | */
239 | 
240 | button,
241 | input,
242 | optgroup,
243 | select,
244 | textarea {
245 |     color: inherit; /* 1 */
246 |     font: inherit; /* 2 */
247 |     margin: 0; /* 3 */
248 | }
249 | 
250 | /**
251 | * Address `overflow` set to `hidden` in IE 8/9/10.
252 | */
253 | 
254 | button {
255 |     overflow: visible;
256 | }
257 | 
258 | /**
259 | * Address inconsistent `text-transform` inheritance for `button` and `select`.
260 | * All other form control elements do not inherit `text-transform` values.
261 | * Correct `button` style inheritance in Firefox, IE 8+, and Opera
262 | * Correct `select` style inheritance in Firefox.
263 | */
264 | 
265 | button,
266 | select {
267 |     text-transform: none;
268 | }
269 | 
270 | /**
271 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
272 | *    and `video` controls.
273 | * 2. Correct inability to style clickable `input` types in iOS.
274 | * 3. Improve usability and consistency of cursor style between image-type
275 | *    `input` and others.
276 | */
277 | 
278 | button,
279 | html input[type="button"], /* 1 */
280 | input[type="reset"],
281 | input[type="submit"] {
282 |     -webkit-appearance: button; /* 2 */
283 |     cursor: pointer; /* 3 */
284 | }
285 | 
286 | /**
287 | * Re-set default cursor for disabled elements.
288 | */
289 | 
290 | button[disabled],
291 | html input[disabled] {
292 |     cursor: default;
293 | }
294 | 
295 | /**
296 | * Remove inner padding and border in Firefox 4+.
297 | */
298 | 
299 | button::-moz-focus-inner,
300 | input::-moz-focus-inner {
301 |     border: 0;
302 |     padding: 0;
303 | }
304 | 
305 | /**
306 | * Address Firefox 4+ setting `line-height` on `input` using `!important` in
307 | * the UA stylesheet.
308 | */
309 | 
310 | input {
311 |     line-height: normal;
312 | }
313 | 
314 | /**
315 | * It's recommended that you don't attempt to style these elements.
316 | * Firefox's implementation doesn't respect box-sizing, padding, or width.
317 | *
318 | * 1. Address box sizing set to `content-box` in IE 8/9/10.
319 | * 2. Remove excess padding in IE 8/9/10.
320 | */
321 | 
322 | input[type="checkbox"],
323 | input[type="radio"] {
324 |     box-sizing: border-box; /* 1 */
325 |     padding: 0; /* 2 */
326 | }
327 | 
328 | /**
329 | * Fix the cursor style for Chrome's increment/decrement buttons. For certain
330 | * `font-size` values of the `input`, it causes the cursor style of the
331 | * decrement button to change from `default` to `text`.
332 | */
333 | 
334 | input[type="number"]::-webkit-inner-spin-button,
335 | input[type="number"]::-webkit-outer-spin-button {
336 |     height: auto;
337 | }
338 | 
339 | /**
340 | * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
341 | * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
342 | *    (include `-moz` to future-proof).
343 | */
344 | 
345 | input[type="search"] {
346 |     -webkit-appearance: textfield; /* 1 */
347 |     //-moz-box-sizing: content-box;
348 |     //-webkit-box-sizing: content-box; /* 2 */
349 |     //box-sizing: content-box;
350 | }
351 | 
352 | /**
353 | * Remove inner padding and search cancel button in Safari and Chrome on OS X.
354 | * Safari (but not Chrome) clips the cancel button when the search input has
355 | * padding (and `textfield` appearance).
356 | */
357 | 
358 | input[type="search"]::-webkit-search-cancel-button,
359 | input[type="search"]::-webkit-search-decoration {
360 |     -webkit-appearance: none;
361 | }
362 | 
363 | /**
364 | * Define consistent border, margin, and padding.
365 | */
366 | 
367 | fieldset {
368 |     border: 1px solid #c0c0c0;
369 |     margin: 0 2px;
370 |     padding: 0.35em 0.625em 0.75em;
371 | }
372 | 
373 | /**
374 | * 1. Correct `color` not being inherited in IE 8/9.
375 | * 2. Remove padding so people aren't caught out if they zero out fieldsets.
376 | */
377 | 
378 | legend {
379 |     border: 0; /* 1 */
380 |     padding: 0; /* 2 */
381 | }
382 | 
383 | /**
384 | * Remove default vertical scrollbar in IE 8/9.
385 | */
386 | 
387 | textarea {
388 |     overflow: auto;
389 | }
390 | 
391 | /**
392 | * Don't inherit the `font-weight` (applied by a rule above).
393 | * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
394 | */
395 | 
396 | optgroup {
397 |     font-weight: bold;
398 | }
399 | 
400 | /* Tables
401 | ========================================================================== */
402 | 
403 | /**
404 | * Remove most spacing between table cells.
405 | */
406 | 
407 | table {
408 |     border-collapse: collapse;
409 |     border-spacing: 0;
410 | }
411 | 
412 | td,
413 | th {
414 |     padding: 0;
415 | }
416 | 


--------------------------------------------------------------------------------
/assets/scss/base/variables.scss:
--------------------------------------------------------------------------------
 1 | /*  ==========================================================================
 2 |     Variables
 3 |     ========================================================================== */
 4 | 
 5 |     /*  ==========================================================================
 6 |         Grid
 7 |         ========================================================================== */
 8 |         $total-columns : 12; // Total of columns
 9 |         $column-width  : 60px; // Columns width
10 |         $gutter-width  : 20px; // Space between the columns
11 |         $grid-width    : 940px; // Width of the grid 
12 |         $breath        : 20px; // Option of lateral space for grid
13 |         $grid-full     : $grid-width + $breath + $breath; // Grid width with lateral space
14 |         $breakpoint    : 1200px; // Breakpoint for small devices
15 |         $space         : 25px; // Vertical space
16 | 
17 |     /*  ==========================================================================
18 |         Colors
19 |         ========================================================================== */
20 |         $color-default:     #eee;
21 |         $color-primary:     #1972D1;
22 |         $color-secondary:   #5CB85C;
23 |         $color-terciary:    #D9534F;
24 | 
25 |     /*  ==========================================================================
26 |         Forms
27 |         ========================================================================== */
28 |         $color-bg-form: #f7f7f7;
29 |         $color-border-form: #ddd;
30 | 
31 |         /*  Inputs
32 |             ========================================================================== */
33 |             $color-border-input: #ccc;
34 |             $color-input: #aaa;
35 | 
36 |             /*  Placeholder
37 |                 ========================================================================== */
38 |                 $placeholder-font-size: 14px;
39 |                 $color-placeholder: #ccc;
40 | 
41 |             /*  Required tip
42 |                 ========================================================================== */
43 |                 $color-required-tip: #999;
44 |                 $required-tip-font-size: 12px;
45 | 
46 |             /*  Required field
47 |                 ========================================================================== */
48 |                 $color-required: #666;
49 |                 $required-font-size: 12px;
50 | 
51 |     /*  ==========================================================================
52 |         Buttons
53 |         ========================================================================== */
54 |         $btn-font-size: 14px;
55 | 
56 |         /*  Colors
57 |             ========================================================================== */
58 | 
59 |             /*  Default
60 |                 ========================================================================== */
61 |                 $btn-bg: $color-default;
62 |                 $btn-color: #666;
63 |                 $btn-hover-bg: darken($btn-bg, 5%);
64 | 
65 |             /*  Primary
66 |                 ========================================================================== */
67 |                 $btn-primary-bg: $color-primary;
68 |                 $btn-primary-color: #fff;
69 |                 $btn-primary-hover-bg: darken($btn-primary-bg, 5%);
70 | 
71 |             /*  Success
72 |                 ========================================================================== */
73 |                 $btn-success-bg: $color-secondary;
74 |                 $btn-success-color: #fff;
75 |                 $btn-success-hover-bg: darken($btn-success-bg, 5%);
76 | 
77 |             /*  Danger
78 |                 ========================================================================== */
79 |                 $btn-danger-bg: $color-terciary;
80 |                 $btn-danger-color: #fff;
81 |                 $btn-danger-hover-bg: darken($btn-danger-bg, 5%);
82 | 


--------------------------------------------------------------------------------
/assets/scss/main.scss:
--------------------------------------------------------------------------------
 1 | /*  Start
 2 |     ========================================================================== */
 3 |     @import "base/normalize";
 4 |     @import "base/mixins";
 5 |     @import "base/variables";
 6 |     @import "base/base";
 7 | 
 8 | /*  Atoms
 9 |     ========================================================================== */
10 |     @import "atoms/grid";
11 |     @import "atoms/typography";
12 | 
13 | /*  Molecules
14 |     ========================================================================== */
15 |     @import "molecules/navigation";
16 | 
17 | /*  Organisms
18 |     ========================================================================== */
19 |     @import "organisms/keyframes";
20 | 
21 |     @import "organisms/flags/algeria.scss";
22 |     @import "organisms/flags/austria.scss";
23 |     @import "organisms/flags/bulgaria.scss";
24 |     @import "organisms/flags/brazil.scss";
25 |     @import "organisms/flags/cameroon.scss";
26 |     @import "organisms/flags/chile.scss";
27 |     @import "organisms/flags/china.scss";
28 |     @import "organisms/flags/colombia.scss";
29 |     @import "organisms/flags/cuba.scss";
30 |     @import "organisms/flags/denmark.scss";
31 |     @import "organisms/flags/france.scss";
32 |     @import "organisms/flags/finland.scss";
33 |     @import "organisms/flags/germany.scss";
34 |     @import "organisms/flags/ghana.scss";
35 |     @import "organisms/flags/greece.scss";
36 |     @import "organisms/flags/honduras.scss";
37 |     @import "organisms/flags/ireland.scss";
38 |     @import "organisms/flags/israel.scss";
39 |     @import "organisms/flags/italy.scss";
40 |     @import "organisms/flags/japan.scss";
41 |     @import "organisms/flags/netherlands.scss";
42 |     @import "organisms/flags/nigeria.scss";
43 |     @import "organisms/flags/norway.scss";
44 |     @import "organisms/flags/peru.scss";
45 |     @import "organisms/flags/south-africa.scss";
46 |     @import "organisms/flags/sweden.scss";
47 |     @import "organisms/flags/tunisia.scss";
48 |     @import "organisms/flags/turkey.scss";
49 |     @import "organisms/flags/usa.scss";
50 |     @import "organisms/flags/venezuela.scss";
51 |     @import "organisms/flags/vietnam.scss";
52 | 
53 |     @import "organisms/layout.scss";
54 | 
55 | 


--------------------------------------------------------------------------------
/assets/scss/molecules/navigation.scss:
--------------------------------------------------------------------------------
 1 | /*  ==========================================================================
 2 |     Navigation
 3 |     ========================================================================== */
 4 | 
 5 |     @media only screen {
 6 | 
 7 |         /*  Header
 8 |             ========================================================================== */
 9 |             .fork img {
10 |                 position: absolute;
11 |                 top: 0;
12 |                 right: 0;
13 |                 border: 0;
14 |                 z-index: 99;
15 |             }
16 | 
17 |             .header,
18 |             .footer {
19 |                 background-color: #333;
20 |                 padding: 15px 10px;
21 |             }
22 | 
23 |             .title {
24 |                 color: #fff;
25 |                 margin: 0;
26 |                 font-size: 38px;
27 |                 letter-spacing: -1px;
28 |                 text-align: center;
29 |                 text-shadow: 1px 1px 1px #000;
30 |             }
31 | 
32 |             .subtitle {
33 |                 margin: 5px 0 0;
34 |                 font-size: 24px;
35 |                 color: #999;
36 |                 text-align: center;
37 |                 text-shadow: 1px 1px 1px #000;
38 |             }
39 | 
40 |         /*  Footer
41 |             ========================================================================== */
42 |             .footer p {
43 |                 font-size: 14px;
44 |                 text-align: center;
45 |                 margin: 0;
46 |                 color: #fff;
47 |             }
48 | 
49 |             .footer p + p { margin-top: 10px; }
50 |     }


--------------------------------------------------------------------------------
/assets/scss/organisms/flags/algeria.scss:
--------------------------------------------------------------------------------
 1 | /*  Algeria
 2 |     ========================================================================== */
 3 |     .algeria { background-color: #f98f06; }
 4 | 
 5 |     .algeria .flag {
 6 |         background-color: #fff;
 7 |         @include box-shadow(220px 0 0 0 #006233 inset);
 8 |         @include animation(fadeInRight 0.75s ease both, enterAlgeria 1s ease 0.25s both);
 9 |     }
10 | 
11 |     .algeria .flag:before {
12 |         @include border-radius(50%);
13 |         @include box-shadow(-21px 0 0 18px #D21034);
14 |         content: "";
15 |         height: 40%;
16 |         left: 41%;
17 |         position: absolute;
18 |         top: 30%;
19 |         width: 26%;
20 |         //@include horizontal-gradient(#006233 0%, #006233 26%, #ffffff 26%, #ffffff 100%);
21 |         @include animation(fadeInDown 0.75s cubic-bezier(0.175, 0.885, 0.320, 1.275) both 1s);
22 |     }
23 | 
24 |     .algeria .flag:after {
25 |         content: '';
26 |         position: absolute;
27 |         z-index: 3;
28 |         //content: "★";
29 |         content: "\2605";
30 |         font-size: 93px;
31 |         line-height: 1;
32 |         left: 48%;
33 |         color: #D21034;
34 |         top: 33%;
35 |         @include transform(rotate(17deg));
36 |         @include animation(fadeInRight 0.75s ease both 1s);
37 |     }


--------------------------------------------------------------------------------
/assets/scss/organisms/flags/austria.scss:
--------------------------------------------------------------------------------
 1 | /*  Austria
 2 |     ========================================================================== */
 3 |     .austria { background-color: #31d9cb; }
 4 | 
 5 |     .austria .flag {
 6 |         background-color: #fff;
 7 |         @include animation(heightFlag 1s ease both);
 8 |     }
 9 | 
10 |     .austria .flag:before,
11 |     .austria .flag:after {
12 |         content: '';
13 |         position: absolute;
14 |         z-index: 1;
15 |         width: 100%;
16 |         height: 33%;
17 |         background-color: #ED2939;
18 |     }
19 | 
20 |     .austria .flag:before {
21 |         top: 0;
22 |         @include animation(fadeInUp 1s ease both 0.75s);
23 |     }
24 | 
25 |     .austria .flag:after {
26 |         bottom: -1px;
27 |         @include animation(fadeInDown 1s ease both 0.75s);
28 |     }


--------------------------------------------------------------------------------
/assets/scss/organisms/flags/brazil.scss:
--------------------------------------------------------------------------------
  1 | /*  Brazil
  2 |     ========================================================================== */
  3 |     .brazil {}
  4 | 
  5 |     .brazil .flag {
  6 |         //opacity: 0.5;
  7 |         @include box-shadow(0 295px 0 0 #FEDF00 inset);
  8 |         @include animation(enterBrazil 1s ease both 0.5s);
  9 |     }
 10 | 
 11 |     .brazil .flag:before {
 12 |         content: '';
 13 |         width: 100%;
 14 |         height: 100%;
 15 |         position: absolute;
 16 |         z-index: 1;
 17 |         background: -webkit-linear-gradient(30deg, #009B3A 30%, transparent 30%),
 18 |                     -webkit-linear-gradient(-30deg, #009B3A 30%, transparent 30%),
 19 |                     -webkit-linear-gradient(210deg, #009B3A 30%, transparent 30%),
 20 |                     -webkit-linear-gradient(-210deg, #009B3A 30%, transparent 30%);
 21 |         background:    -moz-linear-gradient(30deg, #009B3A 30%, transparent 30%),
 22 |                        -moz-linear-gradient(-30deg, #009B3A 30%, transparent 30%),
 23 |                        -moz-linear-gradient(210deg, #009B3A 30%, transparent 30%),
 24 |                        -moz-linear-gradient(-210deg, #009B3A 30%, transparent 30%);
 25 |         background:     -ms-linear-gradient(30deg, #009B3A 30%, transparent 30%),
 26 |                         -ms-linear-gradient(-30deg, #009B3A 30%, transparent 30%),
 27 |                         -ms-linear-gradient(210deg, #009B3A 30%, transparent 30%),
 28 |                         -ms-linear-gradient(-210deg, #009B3A 30%, transparent 30%);
 29 |         background:      -o-linear-gradient(30deg, #009B3A 30%, transparent 30%),
 30 |                          -o-linear-gradient(-30deg, #009B3A 30%, transparent 30%),
 31 |                          -o-linear-gradient(210deg, #009B3A 30%, transparent 30%),
 32 |                          -o-linear-gradient(-210deg, #009B3A 30%, transparent 30%);
 33 |         background:         linear-gradient(30deg, #009B3A 30%, transparent 30%),
 34 |                             linear-gradient(-30deg, #009B3A 30%, transparent 30%),
 35 |                             linear-gradient(210deg, #009B3A 30%, transparent 30%),
 36 |                             linear-gradient(-210deg, #009B3A 30%, transparent 30%);
 37 |         @include animation(boingInUp 1s ease both);
 38 |     }
 39 | 
 40 |     .brazil .flag > div {
 41 |         position: absolute;
 42 |         background: -webkit-radial-gradient(circle at 0 310px , rgba(0, 0, 0, 0) 75%, #ffffff 72%, #ffffff 78%, rgba(0, 0, 0, 0) 79%) #002776;
 43 |         background:  -moz-radial-gradient(circle at 0 310px , rgba(0, 0, 0, 0) 75%, #ffffff 72%, #ffffff 78%, rgba(0, 0, 0, 0) 79%) #002776;
 44 |         background:  -ms-radial-gradient(circle at 0 310px , rgba(0, 0, 0, 0) 75%, #ffffff 72%, #ffffff 78%, rgba(0, 0, 0, 0) 79%) #002776;
 45 |         background:  -o-radial-gradient(circle at 0 310px , rgba(0, 0, 0, 0) 75%, #ffffff 72%, #ffffff 78%, rgba(0, 0, 0, 0) 79%) #002776;
 46 |         background:  radial-gradient(circle at 0 310px , rgba(0, 0, 0, 0) 75%, #ffffff 72%, #ffffff 78%, rgba(0, 0, 0, 0) 79%) #002776;
 47 |         @include border-radius(50%);
 48 |         left: 50%;
 49 |         top: 50%;
 50 |         margin: -75px 0 0 -75px;
 51 |         width: 150px;
 52 |         height: 150px;
 53 | 
 54 |         @include animation(fadeInUp 1s cubic-bezier(0.680, -0.550, 0.265, 1.550) 0.75s both);
 55 |     }
 56 | 
 57 |     .brazil .star {
 58 |         position: absolute;
 59 |         z-index: 1;
 60 |         left: 50%;
 61 |         top: 50%;
 62 |     }
 63 | 
 64 |     .brazil .star:after {
 65 |         //content: "★";
 66 |         content: "\2605";
 67 |         font-size: 10px;
 68 |         line-height: 10px;
 69 |         color: #fff;
 70 |     }
 71 | 
 72 |     .brazil .star.small:after {
 73 |         font-size: 6px;
 74 |         line-height: 6px;
 75 |     }
 76 | 
 77 |     .brazil .star-01 { left: 4%; top: 33%; @include animation(fadeIn 0.5s ease both 1.75s); }
 78 |     .brazil .star-02 { left: 9%; top: 53%; @include animation(fadeIn 0.5s ease both 1.80s); }
 79 |     .brazil .star-03 { left: 3%; top: 58%; @include animation(fadeIn 0.5s ease both 1.85s); }
 80 |     .brazil .star-04 { left: 28%; top: 43%; @include animation(fadeIn 0.5s ease both 1.90s); }
 81 |     .brazil .star-05 { left: 21%; top: 58%; @include animation(fadeIn 0.5s ease both 1.95s); }
 82 |     .brazil .star-06 { left: 19%; top: 63%; @include animation(fadeIn 0.5s ease both 2s); }
 83 |     .brazil .star-07 { left: 3%; top: 58%; @include animation(fadeIn 0.5s ease both 2.05s); }
 84 |     .brazil .star-08 { left: 48%; top: 63%; @include animation(fadeIn 0.5s ease both 2.10s); }
 85 |     .brazil .star-09 { left: 46%; top: 57%; @include animation(fadeIn 0.5s ease both 2.15s); }
 86 |     .brazil .star-10 { left: 42%; top: 53%; @include animation(fadeIn 0.5s ease both 2.20s); }
 87 |     .brazil .star-11 { left: 47%; top: 49%; @include animation(fadeIn 0.5s ease both 2.25s); }
 88 |     .brazil .star-12 { left: 55%; top: 54%; @include animation(fadeIn 0.5s ease both 2.30s); }
 89 |     .brazil .star-13 { left: 60%; top: 68%; @include animation(fadeIn 0.5s ease both 2.35s); }
 90 |     .brazil .star-14 { left: 68%; top: 70%; @include animation(fadeIn 0.5s ease both 2.40s); }
 91 |     .brazil .star-15 { left: 63%; top: 74%; @include animation(fadeIn 0.5s ease both 2.45s); }
 92 |     .brazil .star-16 { left: 74%; top: 73%; @include animation(fadeIn 0.5s ease both 2.50s); }
 93 |     .brazil .star-17 { left: 74%; top: 78%; @include animation(fadeIn 0.5s ease both 2.55s); }
 94 |     .brazil .star-18 { left: 73%; top: 68%; @include animation(fadeIn 0.5s ease both 2.60s); }
 95 |     .brazil .star-19 { left: 79%; top: 70%; @include animation(fadeIn 0.5s ease both 2.65s); }
 96 |     .brazil .star-20 { left: 83%; top: 67%; @include animation(fadeIn 0.5s ease both 2.70s); }
 97 |     .brazil .star-21 { left: 87%; top: 63%; @include animation(fadeIn 0.5s ease both 2.75s); }
 98 |     .brazil .star-22 { left: 84%; top: 58%; @include animation(fadeIn 0.5s ease both 2.80s); }
 99 |     .brazil .star-23 { left: 92%; top: 59%; @include animation(fadeIn 0.5s ease both 2.85s); }
100 |     .brazil .star-24 { left: 65%; top: 25%; @include animation(fadeIn 0.5s ease both 2.90s); }
101 |     .brazil .star-25 { left: 63%; top: 42%; @include animation(fadeIn 0.5s ease both 2.95s); }
102 |     .brazil .star-26 { left: 27%; top: 67%; @include animation(fadeIn 0.5s ease both 3s); }
103 |     .brazil .star-27 { left: 15%; top: 50%; @include animation(fadeIn 0.5s ease both 3.05s); }
104 |     .brazil .star-28 { left: 49%; top: 80%; @include animation(fadeIn 0.5s ease both 3.15s); }


--------------------------------------------------------------------------------
/assets/scss/organisms/flags/bulgaria.scss:
--------------------------------------------------------------------------------
 1 | /*  Bulgaria
 2 |     ========================================================================== */
 3 |     .bulgaria { background-color: #ffabc1; }
 4 | 
 5 |     .bulgaria .flag {
 6 |         background-color: #fff;
 7 |         @include animation(heightFlag 1s ease both);
 8 |     }
 9 | 
10 |     .bulgaria .flag:before,
11 |     .bulgaria .flag:after {
12 |         content: '';
13 |         position: absolute;
14 |         height: 33%;
15 |         left: 0;
16 |         width: 100%;
17 |     }
18 | 
19 |     .bulgaria .flag:before {
20 |         background-color: #00966E;
21 |         bottom: 32%;     
22 |         @include animation(fadeInDown 1s cubic-bezier(0.680, -0.550, 0.265, 1.550) both);
23 |     }
24 | 
25 |     .bulgaria .flag:after {
26 |         background-color: #D62612;
27 |         bottom: -1px;
28 |         @include animation(fadeInUp 1s cubic-bezier(0.680, -0.550, 0.265, 1.550) 0.25s both);
29 |     }    


--------------------------------------------------------------------------------
/assets/scss/organisms/flags/cameroon.scss:
--------------------------------------------------------------------------------
 1 | /*  Cameroon
 2 |     ========================================================================== */
 3 |     .cameroon {
 4 |         background-color: #abdef5;
 5 |     }
 6 | 
 7 |     .cameroon .flag {
 8 |         background-color: #CE1126;
 9 |         @include animation(fadeInUp 0.5s ease-in both);
10 |     }
11 | 
12 |     .cameroon .flag:before,
13 |     .cameroon .flag:after {
14 |         content: '';
15 |         position: absolute;
16 |         height: 100%;
17 |         width: 33%;
18 |         top: 0;
19 |     }
20 | 
21 |     .cameroon .flag:before {
22 |         background-color: #007A5E;
23 |         left: 0;
24 |         @include animation(fadeInRight 1s ease 0.5s both);
25 |     }
26 | 
27 |     .cameroon .flag:after {
28 |         right: 0;
29 |         background-color: #FCD116;
30 |         @include animation(fadeInLeft 1s ease 0.5s both);
31 |     }
32 | 
33 |     .cameroon .flag > div:after {
34 |         color: #FCD116;
35 |         position: absolute;
36 |         //content: "★";
37 |         content: "\2605";
38 |         font-size: 100px;
39 |         height: 100px;
40 |         line-height: 1;
41 |         left: 50%;
42 |         top: 50%;
43 |         margin: -50px 0 0 -50px;
44 |         @include animation(zoomIn 0.75s ease-out 0.75s both);
45 |     }


--------------------------------------------------------------------------------
/assets/scss/organisms/flags/chile.scss:
--------------------------------------------------------------------------------
 1 | /*  Chile
 2 |     ========================================================================== */
 3 |     .chile { background: #ffc659; }
 4 | 
 5 |     .chile .flag {
 6 |         overflow: visible; 
 7 |         background-color: #fff;
 8 |         @include animation(heightFlag 1s ease both);
 9 |     }
10 | 
11 |     .chile .flag:after,
12 |     .chile .flag:before {
13 |         position: absolute;
14 |         left: 0;
15 |     }
16 |     
17 |     .chile .flag:before {
18 |         width: 33%;
19 |         height: 50%;
20 |         background-color: #0039A6;
21 |         top: 0;
22 |         // content: "★";
23 |         content: "\2605";
24 |         color: #fff;
25 |         font-size: 97px;
26 |         line-height: 136px;
27 |         text-align: center;
28 |         @include animation(rotateInUpRight 0.75s ease 0.5s both);
29 |     }
30 | 
31 |     .chile .flag:after {
32 |         content: '';
33 |         width: 100%;
34 |         height: 50%;
35 |         bottom: 0;
36 |         background-color: #D52B1E;
37 |         @include animation(fadeInUp 1s cubic-bezier(0.175, 0.885, 0.320, 1.275) 0.75s both);
38 |     }          


--------------------------------------------------------------------------------
/assets/scss/organisms/flags/china.scss:
--------------------------------------------------------------------------------
 1 | /*  Chine
 2 |     ========================================================================== */
 3 |     .china { background-color: #99cea8; }
 4 | 
 5 |     .china .flag {
 6 |         background-color: #DE2910;
 7 |         @include animation(rotateInUpRight 1s ease both);
 8 |     }
 9 | 
10 |     .china .flag:before,
11 |     .china .flag:after,
12 |     .china .flag > div:before,
13 |     .china .flag > div:after,
14 |     .china .flag > div > div:before {
15 |         //content: "★";
16 |         content: "\2605";
17 |         color: #FFDE00;
18 |         position: absolute;
19 |         font-size: 38px;
20 |     }
21 | 
22 |     .china .flag:before {
23 |         font-size: 105px;
24 |         line-height: 105px;
25 |         left: 7%;
26 |         top: 15px;
27 |         @include animation(fadeInDown 0.5s ease 1.5s both);
28 |     }
29 | 
30 |     .china .flag:after {
31 |         left: 30%;
32 |         top: 0;
33 |         @include transform(rotate(22deg));
34 |         @include animation(fadeInLeft 0.5s ease 0.5s both);
35 |     }
36 | 
37 |     .china .flag > div:before {
38 |         left: 36%;
39 |         top: 10%;
40 |         @include transform(rotate(-21deg));
41 |         @include animation(fadeInLeft 0.5s ease 0.75s both);
42 |     }
43 | 
44 |     .china .flag > div:after {
45 |         left: 36.5%;
46 |         top: 25%;
47 |         @include animation(fadeInLeft 0.5s ease 1s both);
48 |     }
49 | 
50 |     .china .flag > div > div:before {
51 |         left: 30%;
52 |         top: 35%;
53 |         @include transform(rotate(23deg));
54 |         @include animation(fadeInLeft 0.5s ease 1.25s both);
55 |     }


--------------------------------------------------------------------------------
/assets/scss/organisms/flags/colombia.scss:
--------------------------------------------------------------------------------
 1 | /*  Colombia
 2 |     ========================================================================== */
 3 |     .colombia { background-color: #ccbba0; }
 4 | 
 5 |     .colombia .flag {
 6 |         background-color: #FCD116;
 7 |         @include animation(heightFlag 1s ease both);
 8 |     }
 9 | 
10 |     .colombia .flag:before,
11 |     .colombia .flag:after {
12 |         content: '';
13 |         position: absolute;
14 |         left: 0;
15 |         width: 100%;
16 |     }
17 | 
18 |     .colombia .flag:before {
19 |         background: #003893;
20 |         top: 50%;
21 |         height: 25%;
22 |         z-index: 1;
23 |         @include animation(fadeInUp 0.75s ease-out 0.75s both);
24 |     }
25 | 
26 |     .colombia .flag:after {
27 |         background: #CE1126;
28 |         bottom: 0;
29 |         height: 25%;
30 |         @include animation(fadeInDown 0.75s ease-out 0.95s both);
31 |     }


--------------------------------------------------------------------------------
/assets/scss/organisms/flags/cuba.scss:
--------------------------------------------------------------------------------
 1 | /*  Cuba
 2 |     ========================================================================== */
 3 |     .cuba { background-color: #ffd570; }
 4 | 
 5 |     .cuba .flag {
 6 |         background-color: #fff;
 7 |         @include vertical-gradient(#fff, #002a8f 50%, #ffffff 50%);
 8 |         @include background-size(100% 40%);
 9 |         @include animation(zoomIn 1s ease both);
10 |     }
11 | 
12 |     .cuba .flag:before {
13 |         position: absolute;
14 |         border-bottom: 155px solid transparent;
15 |         border-left: 190px solid #CF142B;
16 |         border-top: 145px solid transparent;
17 |         content: '';
18 |         height: 0;
19 |         width: 0;
20 |         z-index: 0;
21 |         @include animation(fadeInLeft 0.75s cubic-bezier(0.175, 0.885, 0.320, 1.275) 0.75s both);
22 |     }
23 | 
24 |     .cuba .flag:after {
25 |         position: absolute;
26 |         left: 4%;
27 |         top: 50%;
28 |         height: 110px;
29 |         margin-top: -55px;
30 |         //content: "★";
31 |         content: "\2605";
32 |         color: #fff;
33 |         font-size: 110px;
34 |         line-height: 110px;
35 |         @include animation(fadeInDown 0.75s cubic-bezier(0.175, 0.885, 0.320, 1.275) 1s both);
36 |     }


--------------------------------------------------------------------------------
/assets/scss/organisms/flags/denmark.scss:
--------------------------------------------------------------------------------
 1 | /*  Denmark
 2 |     ========================================================================== */
 3 |     .denmark { background-color: #afeeee; }
 4 | 
 5 |     .denmark .flag {
 6 |         background-color: #C60C30;
 7 |         @include animation(zoomIn 1s ease both);
 8 |     }
 9 | 
10 |     .denmark .flag:before,
11 |     .denmark .flag:after {
12 |         content: '';
13 |         position: absolute;
14 |         background-color: #fff;
15 |     }
16 | 
17 |     .denmark .flag:before {
18 |         height: 44px;
19 |         top: 50%;
20 |         width: 100%;
21 |         margin-top: -22px;
22 |         @include animation(fadeInLeft 0.75s cubic-bezier(0.680, -0.550, 0.265, 1.550) both 0.75s);
23 |     }
24 | 
25 |     .denmark .flag:after {
26 |         height: 101%;
27 |         width: 44px;
28 |         left: 38%;
29 |         margin-left: -22px;
30 |         @include animation(fadeInUp 0.75s cubic-bezier(0.680, -0.550, 0.265, 1.550) both 0.5s);
31 |     }


--------------------------------------------------------------------------------
/assets/scss/organisms/flags/finland.scss:
--------------------------------------------------------------------------------
 1 | /*  Finland
 2 |     ========================================================================== */
 3 |     .finland { background-color: #008b8b; }
 4 | 
 5 |     .finland .flag {
 6 |         background-color: #fff;
 7 |         @include animation(bounceIn 1s ease both);
 8 |     }
 9 | 
10 |     .finland .flag:before,
11 |     .finland .flag:after {
12 |         content: '';
13 |         position: absolute;
14 |         background-color: #003580;
15 |     }
16 | 
17 |     .finland .flag:before {
18 |         height: 76px;
19 |         top: 50%;
20 |         width: 100%;
21 |         margin-top: -38px;
22 |         @include animation(rotateIn 1s ease both 0.5s);
23 |     }
24 | 
25 |     .finland .flag:after {
26 |         height: 101%;
27 |         width: 73px;
28 |         left: 28%;
29 |         @include animation(rotateIn 1s ease both 0.25s);
30 |     }


--------------------------------------------------------------------------------
/assets/scss/organisms/flags/france.scss:
--------------------------------------------------------------------------------
 1 | /*  France
 2 |     ========================================================================== */
 3 |     .france { background-color: #b1e6c1; }
 4 | 
 5 |     .france .flag {
 6 |         background-color: #fff;
 7 |         @include animation(widthFlag 1s ease both);
 8 |     }
 9 | 
10 |     .france .flag:before,
11 |     .france .flag:after {
12 |         content: '';
13 |         position: absolute;
14 |         top: 0;
15 |         height: 100%;
16 |         width: 33%;
17 |     }
18 | 
19 |     .france .flag:before {
20 |         right: 0;
21 |         background-color: #ED2939;
22 |         @include animation(fadeInUp 0.75s ease 0.75s both);
23 |     }
24 | 
25 |     .france .flag:after {
26 |         left: 0;
27 |         background-color: #002395;
28 |         @include animation(fadeInDown 0.75s ease 0.75s both);
29 |     }


--------------------------------------------------------------------------------
/assets/scss/organisms/flags/germany.scss:
--------------------------------------------------------------------------------
 1 | /*  Germany
 2 |     ========================================================================== */
 3 |     .germany { background-color: #84c3c9; }
 4 |     
 5 |     .germany .flag > div,
 6 |     .germany .flag:before,
 7 |     .germany .flag:after {
 8 |         position: absolute;
 9 |         width: 100%;
10 |         height: 33%;
11 |         content: '';
12 |     }
13 | 
14 |     .germany .flag > div {
15 |         top: 0;
16 |         height: 34%;
17 |         background-color: #000;
18 |         @include animation(fadeInRight 1s ease both);
19 |     }
20 | 
21 |     .germany .flag:before {
22 |         top: 34%;
23 |         background-color: #DD0000;
24 |         @include animation(fadeInLeft 1s ease both);
25 |     }
26 | 
27 |     .germany .flag:after {
28 |         top: 67%;
29 |         background-color: #FFCE00;
30 |         @include animation(fadeInRight 1s ease both);
31 |     }


--------------------------------------------------------------------------------
/assets/scss/organisms/flags/ghana.scss:
--------------------------------------------------------------------------------
 1 | /*  Ghana
 2 |     ========================================================================== */
 3 |     .ghana { background-color: #9c98ef; }
 4 | 
 5 |     .ghana .flag {
 6 |         background-color: #fcd116;
 7 |         @include animation(widthFlag 1s ease both);
 8 |     }
 9 | 
10 |     .ghana .flag:before,
11 |     .ghana .flag:after {
12 |         content: '';
13 |         position: absolute;
14 |         right: 0;
15 |         width: 100%;
16 |         height: 33%;
17 |     }
18 | 
19 |     .ghana .flag:before {
20 |         top: 0;
21 |         background-color: #ce1126;
22 |         @include animation(fadeInRight 1s ease both 0.5s);
23 |     }
24 | 
25 |     .ghana .flag:after {
26 |         bottom: -1px;
27 |         background-color: #006b3f;
28 |         @include animation(fadeInRight 1s ease both 0.5s);
29 |     }
30 |     
31 |     .ghana .flag > div:before {
32 |         //content: "★";
33 |         content: "\2605";
34 |         position: absolute;
35 |         left: 50%;
36 |         top: 50%;
37 |         width: 110px;
38 |         height: 130px;
39 |         line-height: 135px;
40 |         font-size: 125px;
41 |         margin: -67px 0 0 -56px;
42 |         color: #000;
43 |         @include animation(rotateIn 0.5s ease both 1s);
44 |     }


--------------------------------------------------------------------------------
/assets/scss/organisms/flags/greece.scss:
--------------------------------------------------------------------------------
 1 | /*  Greece
 2 |     ========================================================================== */
 3 |     .greece { background-color: #f6d2af; }
 4 | 
 5 |     .greece .flag {
 6 |         @include vertical-gradient(#0D5EAF, #0D5EAF 50%, #ffffff 50%);
 7 |         @include background-size(100% 66px);
 8 |         @include animation(fadeInLeft 0.66s ease both);
 9 |     }
10 | 
11 |     .greece .flag > div {
12 |         position: absolute;
13 |         left: 0;
14 |         top: 0;
15 |         width: 37%;
16 |         height: 56%;
17 |         background-color: #0D5EAF;
18 |         @include animation(fadeInDown 0.75s cubic-bezier(0.175, 0.885, 0.320, 1.275) 0.5s both);
19 |     }
20 | 
21 |     .greece .flag > div:before,
22 |     .greece .flag > div:after {
23 |         content: '';
24 |         position: absolute;
25 |         background-color: #fff;
26 |     }
27 | 
28 |     .greece .flag > div:before {
29 |         height: 32px;
30 |         top: 50%;
31 |         margin-top: -16px;
32 |         width: 100%;
33 |         @include animation(fadeInLeft 1s ease both 1s);
34 |     }
35 | 
36 |     .greece .flag > div:after {
37 |         width: 32px;
38 |         left: 50%;
39 |         margin-left: -16px;
40 |         height: 100%;
41 |         @include animation(fadeInDown 1s ease both 1s);
42 |     }


--------------------------------------------------------------------------------
/assets/scss/organisms/flags/honduras.scss:
--------------------------------------------------------------------------------
 1 | /*  Honduras
 2 |     ========================================================================== */
 3 |     .honduras {
 4 |     	background-color: #ddd;
 5 |     }
 6 | 
 7 |     .honduras .flag {
 8 |     	@include vertical-gradient(#fff, #0073CF 33%, #fff 33%, #fff 66%, #0073CF 66%);
 9 |     	@include animation(widthFlag 1s ease both);
10 |     }
11 | 	
12 | 	.honduras .flag:before,
13 |     .honduras .flag div:after,
14 |     .honduras .flag div:before {
15 |     	//content: "★";
16 |         content: "\2605";
17 |     	position: absolute;
18 |     	font-size: 33px;
19 |     	line-height: 33px;
20 |     	color: #0073CF;
21 |     }
22 | 
23 |     .honduras .flag:before {
24 |     	left: 50%;
25 |     	top: 50%;
26 |     	margin: -19px 0 0 -16px;
27 |     	width: 33px;
28 |     	height: 33px;
29 |     	@include animation(fadeIn 0.75s ease 1.10s both);
30 |     }
31 | 
32 |     .honduras .flag > div:before {
33 |     	left: 33%;
34 |     	top: 34%;
35 |     	@include animation(fadeIn 0.75s ease 1.40s both);
36 |     }
37 | 
38 |     .honduras .flag > div:after {
39 |     	left: 33%;
40 |     	top: 52%;
41 |     	@include animation(fadeIn 0.75s ease 1.25s both);
42 |     }
43 | 
44 |     .honduras .flag > div + div:before {
45 |     	right: 33%;
46 |     	left: auto;
47 |     	top: 34%;
48 |     	@include animation(fadeIn 0.75s ease 0.95s both);
49 |     }
50 | 
51 |     .honduras .flag > div + div:after {
52 |     	right: 33%;
53 |     	left: auto;
54 |     	top: 52%;
55 |     	@include animation(fadeIn 0.75s ease 0.8s both);
56 |     }
57 | 
58 | 


--------------------------------------------------------------------------------
/assets/scss/organisms/flags/ireland.scss:
--------------------------------------------------------------------------------
 1 | /*  Ireland
 2 |     ========================================================================== */
 3 |     .ireland { background-color: #0d5eaf; }
 4 | 
 5 |     .ireland .flag {
 6 |         background-color: #fff;
 7 |         @include animation(heightFlag 1s ease both);
 8 |     }
 9 | 
10 |     .ireland .flag:before,
11 |     .ireland .flag:after {
12 |         content: '';
13 |         position: absolute;
14 |         top: 0;
15 |         height: 101%;
16 |         width: 33%;
17 |     }
18 | 
19 |     .ireland .flag:before {
20 |         right: 0;
21 |         background-color: #FF7900;
22 |         @include animation(fadeInUp 0.75s ease 0.75s both);
23 |     }
24 | 
25 |     .ireland .flag:after {
26 |         left: 0;
27 |         background-color: #009B48;
28 |         @include animation(fadeInDown 0.75s ease 0.75s both);
29 |     }


--------------------------------------------------------------------------------
/assets/scss/organisms/flags/israel.scss:
--------------------------------------------------------------------------------
  1 | /*  Israel
  2 |     ========================================================================== */
  3 |     .israel { background-color: #fce79c; }
  4 | 
  5 |     .israel .flag {
  6 |         @include vertical-gradient(#fff, #fff 10%, #0038B8 10%, #0038B8 25%, #fff 25%, #fff 75%, #0038B8 75%, #0038B8 90%, #fff 90%);
  7 |         @include animation(widthFlag 1s ease both);
  8 |     }
  9 | 
 10 |     .israel .star {
 11 |         left: 37%;
 12 |         top: 29%;
 13 |         width: 0;
 14 |         height: 0;
 15 |         border-left: 60px solid transparent;
 16 |         border-right: 60px solid transparent;
 17 |         border-bottom: 93px solid #0038B8;
 18 |         position: absolute;
 19 |         @include animation(fadeInRight 0.75s ease 0.25s both);
 20 |     }
 21 | 
 22 |     .israel .star:after {
 23 |         width: 0;
 24 |         height: 0;
 25 |         border-left: 60px solid transparent;
 26 |         border-right: 60px solid transparent;
 27 |         border-top: 93px solid #0038B8;
 28 |         position: absolute;
 29 |         content: '';
 30 |         top: 30px;
 31 |         left: -62px;
 32 |     }
 33 | 
 34 |     .israel .center {
 35 |         height: 65px;
 36 |         left: -51px;
 37 |         top: 30px;
 38 |         position: absolute;
 39 |         width: 98px;
 40 |         z-index: 1;
 41 |         @include transform(rotate(90deg) scale(0.45));
 42 |         background-color: #fff;
 43 |     }
 44 | 
 45 |     .israel .center:before {
 46 |         content: "";
 47 |         position: absolute;
 48 |         top: -25px;
 49 |         left: 0;
 50 |         width: 0;
 51 |         height: 0;
 52 |         border-left: 50px solid transparent;
 53 |         border-right: 50px solid transparent;
 54 |         border-bottom: 27px solid #fff;
 55 |     }
 56 | 
 57 |     .israel .center:after {
 58 |         content: "";
 59 |         position: absolute;
 60 |         bottom: -25px;
 61 |         left: 0;
 62 |         width: 0;
 63 |         height: 0;
 64 |         border-left: 50px solid transparent;
 65 |         border-right: 50px solid transparent;
 66 |         border-top: 27px solid #fff;
 67 |     }
 68 | 
 69 |     .israel .triangle,
 70 |     .israel .triangle:after,
 71 |     .israel .triangle:before {
 72 |         position: absolute;
 73 |         width: 0; 
 74 |         height: 0; 
 75 |         border-left: 7px solid transparent; 
 76 |         border-right: 7px solid transparent; 
 77 |         border-bottom: 13px solid #fff;
 78 |         z-index: 2;
 79 |     }
 80 | 
 81 |     .israel .triangle:after,
 82 |     .israel .triangle:before { content: ''; }
 83 | 
 84 |     .israel .triangle-01 {
 85 |         left: 26px;
 86 |         top: 71px;
 87 |     }
 88 | 
 89 |     .israel .triangle-01:after {
 90 |         left: -42px;
 91 |         top: 23px;
 92 |         @include transform(rotate(180deg));
 93 |     }
 94 | 
 95 |     .israel .triangle-01:before {
 96 |         left: -76px;
 97 |         top: 1px;
 98 |     }
 99 | 
100 |     .israel .triangle-02 {
101 |         left: 26px;
102 |         top: 40px;
103 |         @include transform(rotate(180deg));
104 |     }
105 | 
106 |     .israel .triangle-02:after {
107 |         left: 62px;
108 |         top: 0;
109 |     }
110 | 
111 |     .israel .triangle-02:before {
112 |         left: 27px;
113 |         top: 23px;
114 |         @include transform(rotate(180deg));
115 |     }
116 | 


--------------------------------------------------------------------------------
/assets/scss/organisms/flags/italy.scss:
--------------------------------------------------------------------------------
 1 | /*  Italy
 2 |     ========================================================================== */
 3 |     .italy { background-color: #afc8dc; }
 4 | 
 5 |     .italy .flag {
 6 |         background-color: #fff;
 7 |         @include animation(zoomIn 1s ease both);
 8 |     }
 9 | 
10 |     .italy .flag:before,
11 |     .italy .flag:after {
12 |         content: '';
13 |         position: absolute;
14 |         top: 0;
15 |         height: 101%;
16 |         width: 33%;
17 |     }
18 | 
19 |     .italy .flag:before {
20 |         right: 0;
21 |         background-color: #CE2B37;
22 |         @include animation(zoomInDown 0.75s ease 0.15s both);
23 |     }
24 | 
25 |     .italy .flag:after {
26 |         left: 0;
27 |         background-color: #009246;
28 |         @include animation(zoomInDown 0.75s ease 0.15s both);
29 |     }


--------------------------------------------------------------------------------
/assets/scss/organisms/flags/japan.scss:
--------------------------------------------------------------------------------
 1 | /*  Japan
 2 |     ========================================================================== */
 3 |     .japan { background-color: #4343bb; }
 4 | 
 5 |     .japan .flag {
 6 |         background-color: #fff;
 7 |         @include animation(fadeIn 1s ease both);
 8 |     }
 9 | 
10 |     .japan .flag:before {
11 |         content: '';
12 |         position: absolute;
13 |         left: 50%;
14 |         top: 50%;
15 |         margin: -20% 0 0 -20%;
16 |         width: 40%;
17 |         height: 60%;
18 |         background-color: red;
19 |         @include border-radius(50%);
20 |         @include animation(bounceIn 1s ease 0.5s both);
21 |     }


--------------------------------------------------------------------------------
/assets/scss/organisms/flags/netherlands.scss:
--------------------------------------------------------------------------------
 1 | /*  Netherlands
 2 |     ========================================================================== */
 3 |     .netherlands { background-color: #d8ba81; }
 4 | 
 5 |     .netherlands .flag {
 6 |         background-color: #AE1C28;
 7 |         @include animation(width 1s ease both);
 8 |     }
 9 | 
10 |     .netherlands .flag:before,
11 |     .netherlands .flag:after {
12 |         content: '';
13 |         position: absolute;
14 |         height: 33%;
15 |         left: 0;
16 |         width: 100%;
17 |     }
18 | 
19 |     .netherlands .flag:before {
20 |         background-color: #fff;
21 |         bottom: 32%;     
22 |         @include animation(fadeInLeft 1s cubic-bezier(0.680, -0.550, 0.265, 1.550) both);
23 |     }
24 | 
25 |     .netherlands .flag:after {
26 |         background-color: #21468B;
27 |         bottom: -1px;
28 |         @include animation(fadeInRight 1s cubic-bezier(0.680, -0.550, 0.265, 1.550) 0.25s both);
29 |     }    


--------------------------------------------------------------------------------
/assets/scss/organisms/flags/nigeria.scss:
--------------------------------------------------------------------------------
 1 | /*  Nigeria
 2 |     ========================================================================== */
 3 |     .nigeria { background-color: #f6d35a; }
 4 | 
 5 |     .nigeria .flag {
 6 |         background-color: #fff;
 7 |         @include animation(widthFlag 1s ease both);
 8 |     }
 9 | 
10 |     .nigeria .flag:before,
11 |     .nigeria .flag:after {
12 |         content: '';
13 |         position: absolute;
14 |         top: 0;
15 |         height: 101%;
16 |         width: 33%;
17 |         background-color: #008751;
18 |     }
19 | 
20 |     .nigeria .flag:before {
21 |         right: 0;
22 |         @include animation(fadeInUp 0.75s cubic-bezier(0.175, 0.885, 0.320, 1.275) 0.5s both);
23 |     }
24 | 
25 |     .nigeria .flag:after {
26 |         left: 0;
27 |         @include animation(fadeInDown 0.75s cubic-bezier(0.175, 0.885, 0.320, 1.275) 0.5s both);
28 |     }


--------------------------------------------------------------------------------
/assets/scss/organisms/flags/norway.scss:
--------------------------------------------------------------------------------
 1 | /*  Norway
 2 |     ========================================================================== */
 3 |     .norway { background-color: #a0e2a9; }
 4 | 
 5 |     .norway .flag {
 6 |         @include vertical-gradient(#ef2b2d, #ef2b2d 36%, #fff 36%, #fff 64%, #ef2b2d 64%);
 7 |         @include animation(fadeInRight 1s ease both);
 8 |     }
 9 | 
10 |     .norway .flag:before,
11 |     .norway .flag:after {
12 |         content: '';
13 |         position: absolute;
14 |         background-color: #002868;
15 |     }
16 | 
17 |     .norway .flag:before {
18 |         height: 38px;
19 |         top: 50%;
20 |         width: 100%;
21 |         margin-top: -19px;
22 |         @include animation(fadeInLeft 0.75s ease both 0.25s);
23 |         z-index: 1;
24 |     }
25 | 
26 |     .norway .flag:after {
27 |         height: 101%;
28 |         width: 39px;
29 |         left: 36%;
30 |         margin-left: -19px;
31 |         @include box-shadow(20px 0px 0px 0px #fff, -20px 0px 0px 0px #fff);
32 |         @include animation(fadeInDown 0.75s ease both 0.75s);
33 |     }
34 | 


--------------------------------------------------------------------------------
/assets/scss/organisms/flags/peru.scss:
--------------------------------------------------------------------------------
 1 | /*  Peru
 2 |     ========================================================================== */
 3 |     .peru { background-color: #84c3c9; }
 4 | 
 5 |     .peru .flag {
 6 |         background-color: #fff;
 7 |         @include animation(rotateIn 1s ease both);
 8 |     }
 9 | 
10 |     .peru .flag:before,
11 |     .peru .flag:after {
12 |         content: '';
13 |         position: absolute;
14 |         top: 0;
15 |         height: 101%;
16 |         width: 33%;
17 |         background-color: #D91023;
18 |     }
19 | 
20 |     .peru .flag:before {
21 |         right: 0;
22 |         @include animation(zoomIn 0.75s ease 0.75s both);
23 |     }
24 | 
25 |     .peru .flag:after {
26 |         left: 0;
27 |         @include animation(zoomIn 0.75s ease 0.75s both);
28 |     }


--------------------------------------------------------------------------------
/assets/scss/organisms/flags/south-africa.scss:
--------------------------------------------------------------------------------
 1 | /*  South Africa
 2 |     ========================================================================== */
 3 |     .south-africa { background-color: #d2b48c; }
 4 | 
 5 |     .south-africa .flag {
 6 |         background-color: #007A4D;
 7 |         @include animation(heightFlag 1s ease both);
 8 |     }
 9 | 
10 |     .south-africa .flag:before,
11 |     .south-africa .flag:after {
12 |         content: '';
13 |         position: absolute;
14 |         width: 87%;
15 |         height: 33%;
16 |     }
17 | 
18 |     .south-africa .flag:before {
19 |         top: 0;
20 |         right: -102px;
21 |         background-color: #DE3831;
22 |         @include box-shadow(-26px 9px 0 10px #fff);
23 |         @include transform(skewx(57deg));
24 |         @include animation(enterSouthAfrica 1.25s ease 0.5s both);
25 |     }
26 | 
27 |     .south-africa .flag:after {
28 |         bottom: 0;
29 |         right: -102px;
30 |         background-color: #002395;
31 |         @include box-shadow(-26px -9px 0 10px #fff);
32 |         @include transform(skewx(-57deg));
33 |         @include animation(enterSouthAfrica 1.25s ease both 0.75s);
34 |     }
35 | 
36 |     .south-africa .flag > div {
37 |         border-bottom: 110px solid transparent;
38 |         border-left: 170px solid #ffb612;
39 |         border-top: 110px solid transparent;
40 |         content: '';
41 |         height: 0;
42 |         margin-top: 37px;
43 |         position: relative;
44 |         width: 0;
45 |         z-index: 0;
46 |         @include animation(fadeInLeft 1s ease both 0.5s);
47 |     }
48 | 
49 |     .south-africa .flag > div:after {
50 |         content: '';
51 |         border-bottom: 115px solid transparent;
52 |         border-left: 175px solid #000;
53 |         border-top: 115px solid transparent;
54 |         height: 0;
55 |         width: 0;
56 |         position: absolute;
57 |         left: -205px;
58 |         top: -115px;
59 |         z-index: 1;
60 |         @include animation(fadeInLeft 1s ease both 0.75s);
61 |     }


--------------------------------------------------------------------------------
/assets/scss/organisms/flags/sweden.scss:
--------------------------------------------------------------------------------
 1 | /*  Sweden
 2 |     ========================================================================== */
 3 |     .sweden { background-color: #efbea1; }
 4 | 
 5 |     .sweden .flag {
 6 |         background-color: #006AA7;
 7 |         @include animation(widthFlag 1s ease both);
 8 |     }
 9 | 
10 |     .sweden .flag:before,
11 |     .sweden .flag:after {
12 |         content: '';
13 |         position: absolute;
14 |         background-color: #FECC00;
15 |     }
16 | 
17 |     .sweden .flag:before {
18 |         height: 56px;
19 |         top: 50%;
20 |         width: 100%;
21 |         margin-top: -28px;
22 |         @include animation(fadeInRight 0.75s ease both 0.75s);
23 |     }
24 | 
25 |     .sweden .flag:after {
26 |         height: 101%;
27 |         width: 56px;
28 |         left: 38%;
29 |         margin-left: -32px;
30 |         @include animation(fadeInDown 0.75s ease both 0.5s);
31 |     }


--------------------------------------------------------------------------------
/assets/scss/organisms/flags/tunisia.scss:
--------------------------------------------------------------------------------
 1 | /*  Tunisia
 2 |     ========================================================================== */
 3 |     .tunisia { background-color: #d3dfdf; }
 4 | 
 5 |     .tunisia .flag {
 6 |         background-color: #E30A17;
 7 |         background: -webkit-radial-gradient(center, ellipse cover,  #ffffff 50%, #E30A17 50%, #E30A17 100%) #E30a17;
 8 |         background:    -moz-radial-gradient(center, ellipse cover,  #ffffff 50%,  #E30A17 50%, #E30A17 100%) #E30a17;
 9 |         background:      -o-radial-gradient(center, ellipse cover,  #ffffff 50%, #E30A17 50%, #E30A17 100%) #E30a17;
10 |         background:     -ms-radial-gradient(center, ellipse cover,  #ffffff 50%, #E30A17 50%, #E30A17 100%) #E30a17;
11 |         background:         radial-gradient(ellipse at center,  #ffffff 50%, #E30A17 50%, #E30A17 100%) #E30a17;
12 |         @include background-size(47% 71%);
13 |         background-repeat: no-repeat;
14 |         background-position: center center;
15 |         @include animation(flipInX 1.5s ease 0.25s both);
16 |         @extend %back-face;
17 |     }
18 | 
19 |     .tunisia .flag:before {
20 |         @include border-radius(50%);
21 |         @include box-shadow(-13px 0 0 12px #E30A17);
22 |         content: "";
23 |         height: 30%;
24 |         left: 43%;
25 |         position: absolute;
26 |         top: 35%;
27 |         width: 20%;
28 |         @include animation(fadeInRight 0.75s cubic-bezier(0.175, 0.885, 0.320, 1.275) both 1s);
29 |     }
30 | 
31 |     .tunisia .flag:after {
32 |         //content: "★";
33 |         content: "\2605";
34 |         color: #E30A17;
35 |         position: absolute;
36 |         font-size: 85px;
37 |         line-height: 85px;
38 |         left: 45%;
39 |         top: 35%;
40 |         @include transform(rotate(-17deg));
41 |         @include animation(fadeInLeft 1s ease both 1.25s);
42 |     }


--------------------------------------------------------------------------------
/assets/scss/organisms/flags/turkey.scss:
--------------------------------------------------------------------------------
 1 | /*  Turkey
 2 |     ========================================================================== */
 3 |     .turkey { background-color: #afeeee; }
 4 | 
 5 |     .turkey .flag {
 6 |         background-color: #E30A17;
 7 |         @include animation(fadeIn 1s ease both);
 8 |     }
 9 | 
10 |     .turkey .flag:before {
11 |         @include border-radius(50%);
12 |         @include box-shadow(-20px 0 0 17px #fff);
13 |         content: "";
14 |         height: 40%;
15 |         left: 27%;
16 |         position: absolute;
17 |         top: 30%;
18 |         width: 26%;
19 |         @include animation(fadeInDown 0.75s cubic-bezier(0.175, 0.885, 0.320, 1.275) both 1s);
20 |     }
21 | 
22 |     .turkey .flag:after {
23 |         //content: "★";
24 |         content: "\2605";
25 |         color: #fff;
26 |         position: absolute;
27 |         font-size: 92px;
28 |         line-height: 92px;
29 |         height: 92px;
30 |         margin-top: -48px;
31 |         left: 48%;
32 |         top: 50%;
33 |         @include transform(rotate(-21deg));
34 |         @include animation(rotateIn 1s ease both 1.25s);
35 |     }


--------------------------------------------------------------------------------
/assets/scss/organisms/flags/usa.scss:
--------------------------------------------------------------------------------
  1 | /*  USA
  2 |     ========================================================================== */
  3 |     .usa { background-color: #88ddd2; }
  4 | 
  5 |     .usa .flag {
  6 |         @include vertical-gradient(#B22234, #B22234 50%, #ffffff 50%);
  7 |         @include background-size(100% 46px);
  8 |         @include animation(fadeInRight 1s cubic-bezier(0.175, 0.885, 0.320, 1.275) both);
  9 |     }
 10 | 
 11 |     .usa .flag:before {
 12 |         content: '';
 13 |         background-color: #3C3B6E;
 14 |         width: 40%;
 15 |         height: 54.5%;
 16 |         position: absolute;
 17 |         left: 0;
 18 |         top: 0;
 19 |         @include animation(fadeInDown 0.75s cubic-bezier(0.175, 0.885, 0.320, 1.275) both 0.5s);
 20 |     }
 21 | 
 22 |     .usa .flag .star:before,
 23 |     .usa .flag .star:after {
 24 |         //content: "★";
 25 |         content: "\2605";
 26 |         font-size: 19px;
 27 |         color: #fff;
 28 |         position: absolute;
 29 |     }
 30 | 
 31 |     .usa .star-01:before  { left: 2%;    top: 0;    }
 32 |     .usa .star-01:after   { left: 2%;    top: 11%;  }
 33 |     .usa .star-02:before  { left: 2%;    top: 22%;  }
 34 |     .usa .star-02:after   { left: 2%;    top: 33%;  }
 35 |     .usa .star-03:before  { left: 2%;    top: 44%;  }
 36 |     .usa .star-03:after   { left: 5%;    top: 5%;   }
 37 |     .usa .star-04:before  { left: 5%;    top: 16%;  }
 38 |     .usa .star-04:after   { left: 5%;    top: 27%;  }
 39 |     .usa .star-05:before  { left: 5%;    top: 38%;  }
 40 |     .usa .star-05:after   { left: 8.5%;  top: 0;    }
 41 |     .usa .star-06:before  { left: 8.5%;  top: 11%;  }
 42 |     .usa .star-06:after   { left: 8.5%;  top: 22%;  }
 43 |     .usa .star-07:before  { left: 8.5%;  top: 33%;  }
 44 |     .usa .star-07:after   { left: 8.5%;  top: 44%;  }
 45 |     .usa .star-08:before  { left: 12%;   top: 5%;   }
 46 |     .usa .star-08:after   { left: 12%;   top: 16%;  }
 47 |     .usa .star-09:before  { left: 12%;   top: 27%;  }
 48 |     .usa .star-09:after   { left: 12%;   top: 38%;  }
 49 |     .usa .star-10:before  { left: 15%;   top: 0;    }
 50 |     .usa .star-10:after   { left: 15%;   top: 11%;  }
 51 |     .usa .star-11:before  { left: 15%;   top: 22%;  }
 52 |     .usa .star-11:after   { left: 15%;   top: 33%;  }
 53 |     .usa .star-12:before  { left: 15%;   top: 44%;  }
 54 |     .usa .star-12:after   { left: 18%;   top: 5%;   }
 55 |     .usa .star-13:before  { left: 18%;   top: 16%;  }
 56 |     .usa .star-13:after   { left: 18%;   top: 27%;  }
 57 |     .usa .star-14:before  { left: 18%;   top: 38%;  }
 58 |     .usa .star-14:after   { left: 21.5%; top: 0;    }
 59 |     .usa .star-15:before  { left: 21.5%; top: 11%;  }
 60 |     .usa .star-15:after   { left: 21.5%; top: 22%;  }
 61 |     .usa .star-16:before  { left: 21.5%; top: 33%;  }
 62 |     .usa .star-16:after   { left: 21.5%; top: 44%;  }
 63 |     .usa .star-17:before  { left: 25%;   top: 5%;   }
 64 |     .usa .star-17:after   { left: 25%;   top: 16%;  }
 65 |     .usa .star-18:before  { left: 25%;   top: 27%;  }
 66 |     .usa .star-18:after   { left: 25%;   top: 38%;  }
 67 |     .usa .star-19:before  { left: 28%;   top: 0;    }
 68 |     .usa .star-19:after   { left: 28%;   top: 11%;  }
 69 |     .usa .star-20:before  { left: 28%;   top: 22%;  }
 70 |     .usa .star-20:after   { left: 28%;   top: 33%;  }
 71 |     .usa .star-21:before  { left: 28%;   top: 44%;  }
 72 |     .usa .star-21:after   { left: 31.5%; top: 5%;   }
 73 |     .usa .star-22:before  { left: 31.5%; top: 16%;  }
 74 |     .usa .star-22:after   { left: 31.5%; top: 27%;  }
 75 |     .usa .star-23:before  { left: 31.5%; top: 38%;  }
 76 |     .usa .star-23:after   { left: 34.5%; top: 0;    }
 77 |     .usa .star-24:before  { left: 34.5%; top: 11%;  }
 78 |     .usa .star-24:after   { left: 34.5%; top: 22%;  }
 79 |     .usa .star-25:before  { left: 34.5%; top: 33%;  }
 80 |     .usa .star-25:after   { left: 34.5%; top: 44%;  }
 81 | 
 82 |     .usa .star-01:before { @include animation(fadeIn 1s ease both 1s); }
 83 |     .usa .star-03:after  { @include animation(fadeIn 1s ease both 1.05s); }
 84 |     .usa .star-06:before { @include animation(fadeIn 1s ease both 1.10s); }
 85 |     .usa .star-08:after  { @include animation(fadeIn 1s ease both 1.15s); }
 86 |     .usa .star-11:before { @include animation(fadeIn 1s ease both 1.20s); }
 87 |     .usa .star-13:after  { @include animation(fadeIn 1s ease both 1.25s); }
 88 |     .usa .star-16:before { @include animation(fadeIn 1s ease both 1.30s); }
 89 |     .usa .star-18:after  { @include animation(fadeIn 1s ease both 1.35s); }
 90 |     .usa .star-21:before { @include animation(fadeIn 1s ease both 1.40s); }
 91 |     .usa .star-16:after  { @include animation(fadeIn 1s ease both 1.45s); }
 92 |     .usa .star-14:before { @include animation(fadeIn 1s ease both 1.50s); }
 93 |     .usa .star-11:after  { @include animation(fadeIn 1s ease both 1.55s); }
 94 |     .usa .star-09:before { @include animation(fadeIn 1s ease both 1.60s); }
 95 |     .usa .star-06:after  { @include animation(fadeIn 1s ease both 1.65s); }
 96 |     .usa .star-04:before { @include animation(fadeIn 1s ease both 1.70s); }
 97 |     .usa .star-01:after  { @include animation(fadeIn 1s ease both 1.75s); }
 98 |     .usa .star-02:before { @include animation(fadeIn 1s ease both 1.80s); }
 99 |     .usa .star-04:after  { @include animation(fadeIn 1s ease both 1.85s); }
100 |     .usa .star-07:before { @include animation(fadeIn 1s ease both 1.90s); }
101 |     .usa .star-09:after  { @include animation(fadeIn 1s ease both 1.95s); }
102 |     .usa .star-12:before { @include animation(fadeIn 1s ease both 2s); }
103 |     .usa .star-07:after  { @include animation(fadeIn 1s ease both 2.05s); }
104 |     .usa .star-05:before { @include animation(fadeIn 1s ease both 2.10s); }
105 |     .usa .star-02:after  { @include animation(fadeIn 1s ease both 2.15s); }
106 |     .usa .star-03:before { @include animation(fadeIn 1s ease both 2.20s); }
107 | 
108 |     .usa .star-25:after  { @include animation(fadeIn 1s ease both 1s); }
109 |     .usa .star-23:before { @include animation(fadeIn 1s ease both 1.05s); }
110 |     .usa .star-20:after  { @include animation(fadeIn 1s ease both 1.10s); }
111 |     .usa .star-18:before { @include animation(fadeIn 1s ease both 1.15s); }
112 |     .usa .star-15:after  { @include animation(fadeIn 1s ease both 1.20s); }
113 |     .usa .star-13:before { @include animation(fadeIn 1s ease both 1.25s); }
114 |     .usa .star-10:after  { @include animation(fadeIn 1s ease both 1.30s); }
115 |     .usa .star-08:before { @include animation(fadeIn 1s ease both 1.35s); }
116 |     .usa .star-05:after  { @include animation(fadeIn 1s ease both 1.40s); }
117 |     .usa .star-10:before { @include animation(fadeIn 1s ease both 1.45s); }
118 |     .usa .star-12:after  { @include animation(fadeIn 1s ease both 1.50s); }
119 |     .usa .star-15:before { @include animation(fadeIn 1s ease both 1.55s); }
120 |     .usa .star-17:after  { @include animation(fadeIn 1s ease both 1.60s); }
121 |     .usa .star-20:before { @include animation(fadeIn 1s ease both 1.65s); }
122 |     .usa .star-22:after  { @include animation(fadeIn 1s ease both 1.70s); }
123 |     .usa .star-25:before { @include animation(fadeIn 1s ease both 1.75s); }
124 |     .usa .star-24:after  { @include animation(fadeIn 1s ease both 1.80s); }
125 |     .usa .star-22:before { @include animation(fadeIn 1s ease both 1.85s); }
126 |     .usa .star-19:after  { @include animation(fadeIn 1s ease both 1.90s); }
127 |     .usa .star-17:before { @include animation(fadeIn 1s ease both 1.95s); }
128 |     .usa .star-14:after  { @include animation(fadeIn 1s ease both 2s); }
129 |     .usa .star-19:before { @include animation(fadeIn 1s ease both 2.05s); }
130 |     .usa .star-21:after  { @include animation(fadeIn 1s ease both 2.10s); }
131 |     .usa .star-24:before { @include animation(fadeIn 1s ease both 2.15s); }
132 |     .usa .star-23:after  { @include animation(fadeIn 1s ease both 2.20s); }


--------------------------------------------------------------------------------
/assets/scss/organisms/flags/venezuela.scss:
--------------------------------------------------------------------------------
 1 | /*  Venezuela
 2 |     ========================================================================== */
 3 |     .venezuela { background-color: #66cdaa; }
 4 | 
 5 |     .venezuela .flag {
 6 |         background-color: #FFCC00;
 7 |         @include animation(heightFlag 1s ease both);
 8 |     }
 9 |     
10 |     .venezuela .flag:before,
11 |     .venezuela .flag:after {
12 |         position: absolute;
13 |         width: 100%;
14 |         height: 33%;
15 |         content: '';
16 |     }
17 | 
18 |     .venezuela .flag:before {
19 |         bottom: 32%;
20 |         background-color: #00247D;
21 |         @include animation(fadeInUp 1s ease both 0.5s);
22 |     }
23 | 
24 |     .venezuela .flag:after {
25 |         bottom: -1px;
26 |         background-color: #CF142B;
27 |         @include animation(fadeInUp 1s ease both 0.5s);
28 |     }
29 | 
30 |     .venezuela .star:before,
31 |     .venezuela .star:after {
32 |         //content: "★";
33 |         content: "\2605";
34 |         color: #fff;
35 |         font-size: 33px;
36 |         line-height: 33px;
37 |         position: absolute;
38 |     }
39 | 
40 |     .venezuela .star-01:before {
41 |         left: 28%;
42 |         top: 54%;
43 |         @include animation(fadeIn 0.5s ease both 1s);
44 |     }
45 | 
46 |     .venezuela .star-01:after {
47 |         left: 32%;
48 |         top: 45%;
49 |         @include transform(rotate(22deg));
50 |         @include animation(fadeIn 0.5s ease both 1.15s);
51 |     }
52 | 
53 |     .venezuela .star-02:before {
54 |         left: 37.5%;
55 |         top: 38%;
56 |         @include transform(rotate(43deg));
57 |         @include animation(fadeIn 0.5s ease both 1.30s);
58 |     }
59 | 
60 |     .venezuela .star-02:after {
61 |         left: 44%;
62 |         top: 35%;
63 |         @include transform(rotate(60deg));
64 |         @include animation(fadeIn 0.5s ease both 1.45s);
65 |     }
66 | 
67 |     .venezuela .star-03:before {
68 |         left: 51%;
69 |         top: 35%;
70 |         @include transform(rotate(81deg));
71 |         @include animation(fadeIn 0.5s ease both 1.60s);
72 |     }
73 | 
74 |     .venezuela .star-03:after {
75 |         left: 57.5%;
76 |         top: 39.5%;
77 |         @include transform(rotate(102deg));
78 |         @include animation(fadeIn 0.5s ease both 1.75s);
79 |     }
80 | 
81 |     .venezuela .star-04:before {
82 |         left: 63%;
83 |         top: 46%;
84 |         @include transform(rotate(123deg));
85 |         @include animation(fadeIn 0.5s ease both 1.90s);
86 |     }
87 | 
88 |     .venezuela .star-04:after {
89 |         left: 66%;
90 |         top: 54%;
91 |         @include animation(fadeIn 0.5s ease both 2.10s);
92 |     }


--------------------------------------------------------------------------------
/assets/scss/organisms/flags/vietnam.scss:
--------------------------------------------------------------------------------
 1 | /*  Vietnam
 2 |     ========================================================================== */
 3 |     .vietnam {
 4 |         background-color: #abdef5;
 5 |     }
 6 | 
 7 |     .vietnam .flag {
 8 |         background-color: #CE1126;
 9 |         @include animation(fadeInUp 0.5s ease-in both);
10 |     }
11 | 
12 |     .vietnam .flag > div:after {
13 |         color: #FCD116;
14 |         position: absolute;
15 |         //content: "★";
16 |         content: "\2605";
17 |         font-size: 250px;
18 |         height: 250px;
19 |         line-height: 1;
20 |         left: 50%;
21 |         top: 50%;
22 |         margin: -125px 0 0 -110px;
23 |         @include animation(zoomIn 0.75s ease-out 0.75s both);
24 |     }


--------------------------------------------------------------------------------
/assets/scss/organisms/keyframes.scss:
--------------------------------------------------------------------------------
   1 | /*  ==========================================================================
   2 |     Keyframes
   3 |     ========================================================================== */
   4 | 
   5 |     /*  Fade in
   6 |         ========================================================================== */
   7 |         @-webkit-keyframes fadeIn {
   8 |             0% { opacity: 0; }
   9 |             100% { opacity: 1; }
  10 |         }
  11 | 
  12 |         @-moz-keyframes fadeIn {
  13 |             0% { opacity: 0; }
  14 |             100% { opacity: 1; }
  15 |         }
  16 | 
  17 |         @-ms-keyframes fadeIn {
  18 |             0% { opacity: 0; }
  19 |             100% { opacity: 1; }
  20 |         }
  21 | 
  22 |         @-o-keyframes fadeIn {
  23 |             0% { opacity: 0; }
  24 |             100% { opacity: 1; }
  25 |         }
  26 | 
  27 |         @keyframes fadeIn {
  28 |             0% { opacity: 0; }
  29 |             100% { opacity: 1; }
  30 |         }
  31 | 
  32 |     /*  Fade in down
  33 |         ========================================================================== */
  34 |         @-webkit-keyframes fadeInDown {
  35 |             0% {
  36 |                 opacity: 0;
  37 |                 -webkit-transform: translate3d(0, -100%, 0);
  38 |                         transform: translate3d(0, -100%, 0);
  39 |             }
  40 | 
  41 |             100% {
  42 |                 opacity: 1;
  43 |                 -webkit-transform: none;
  44 |                         transform: none;
  45 |             }
  46 |         }
  47 | 
  48 |         @-moz-keyframes fadeInDown {
  49 |             0% {
  50 |                 opacity: 0;
  51 |                 -moz-transform: translate3d(0, -100%, 0);
  52 |                         transform: translate3d(0, -100%, 0);
  53 |             }
  54 | 
  55 |             100% {
  56 |                 opacity: 1;
  57 |                 -moz-transform: none;
  58 |                         transform: none;
  59 |             }
  60 |         }
  61 | 
  62 |         @-ms-keyframes fadeInDown {
  63 |             0% {
  64 |                 opacity: 0;
  65 |                 -ms-transform: translate3d(0, -100%, 0);
  66 |                         transform: translate3d(0, -100%, 0);
  67 |             }
  68 | 
  69 |             100% {
  70 |                 opacity: 1;
  71 |                 -ms-transform: none;
  72 |                         transform: none;
  73 |             }
  74 |         }
  75 | 
  76 |         @-o-keyframes fadeInDown {
  77 |             0% {
  78 |                 opacity: 0;
  79 |                 -o-transform: translate3d(0, -100%, 0);
  80 |                         transform: translate3d(0, -100%, 0);
  81 |             }
  82 | 
  83 |             100% {
  84 |                 opacity: 1;
  85 |                 -o-transform: none;
  86 |                         transform: none;
  87 |             }
  88 |         }
  89 | 
  90 |         @keyframes fadeInDown {
  91 |             0% {
  92 |                 opacity: 0;
  93 |                 -webkit-transform: translate3d(0, -100%, 0);
  94 |                     -ms-transform: translate3d(0, -100%, 0);
  95 |                         transform: translate3d(0, -100%, 0);
  96 |             }
  97 | 
  98 |             100% {
  99 |                 opacity: 1;
 100 |                 -webkit-transform: none;
 101 |                     -ms-transform: none;
 102 |                         transform: none;
 103 |             }
 104 |         }
 105 | 
 106 |     /*  Fade in down big
 107 |         ========================================================================== */
 108 |         @-webkit-keyframes fadeInDownBig {
 109 |             0% {
 110 |                 opacity: 0;
 111 |                 -webkit-transform: translate3d(0, -2000px, 0);
 112 |                         transform: translate3d(0, -2000px, 0);
 113 |             }
 114 | 
 115 |             100% {
 116 |                 opacity: 1;
 117 |                 -webkit-transform: none;
 118 |                         transform: none;
 119 |             }
 120 |         }
 121 | 
 122 |         @-moz-keyframes fadeInDownBig {
 123 |             0% {
 124 |                 opacity: 0;
 125 |                 -moz-transform: translate3d(0, -2000px, 0);
 126 |                         transform: translate3d(0, -2000px, 0);
 127 |             }
 128 | 
 129 |             100% {
 130 |                 opacity: 1;
 131 |                 -moz-transform: none;
 132 |                         transform: none;
 133 |             }
 134 |         }
 135 | 
 136 |         @-ms-keyframes fadeInDownBig {
 137 |             0% {
 138 |                 opacity: 0;
 139 |                 -ms-transform: translate3d(0, -2000px, 0);
 140 |                         transform: translate3d(0, -2000px, 0);
 141 |             }
 142 | 
 143 |             100% {
 144 |                 opacity: 1;
 145 |                 -ms-transform: none;
 146 |                         transform: none;
 147 |             }
 148 |         }
 149 | 
 150 |         @-o-keyframes fadeInDownBig {
 151 |             0% {
 152 |                 opacity: 0;
 153 |                 -o-transform: translate3d(0, -2000px, 0);
 154 |                         transform: translate3d(0, -2000px, 0);
 155 |             }
 156 | 
 157 |             100% {
 158 |                 opacity: 1;
 159 |                 -o-transform: none;
 160 |                         transform: none;
 161 |             }
 162 |         }
 163 | 
 164 |         @keyframes fadeInDownBig {
 165 |             0% {
 166 |                 opacity: 0;
 167 |                 -webkit-transform: translate3d(0, -2000px, 0);
 168 |                     -ms-transform: translate3d(0, -2000px, 0);
 169 |                         transform: translate3d(0, -2000px, 0);
 170 |             }
 171 | 
 172 |             100% {
 173 |                 opacity: 1;
 174 |                 -webkit-transform: none;
 175 |                     -ms-transform: none;
 176 |                         transform: none;
 177 |             }
 178 |         }
 179 | 
 180 |     /*  Fade in up
 181 |         ========================================================================== */
 182 |         @-webkit-keyframes fadeInUp {
 183 |             0% {
 184 |                 opacity: 0;
 185 |                 -webkit-transform: translate3d(0, 100%, 0);
 186 |                         transform: translate3d(0, 100%, 0);
 187 |             }
 188 | 
 189 |             100% {
 190 |                 opacity: 1;
 191 |                 -webkit-transform: none;
 192 |                         transform: none;
 193 |             }
 194 |         }
 195 | 
 196 |         @-moz-keyframes fadeInUp {
 197 |             0% {
 198 |                 opacity: 0;
 199 |                 -moz-transform: translate3d(0, 100%, 0);
 200 |                         transform: translate3d(0, 100%, 0);
 201 |             }
 202 | 
 203 |             100% {
 204 |                 opacity: 1;
 205 |                 -moz-transform: none;
 206 |                         transform: none;
 207 |             }
 208 |         }
 209 | 
 210 |         @-ms-keyframes fadeInUp {
 211 |             0% {
 212 |                 opacity: 0;
 213 |                 -ms-transform: translate3d(0, 100%, 0);
 214 |                         transform: translate3d(0, 100%, 0);
 215 |             }
 216 | 
 217 |             100% {
 218 |                 opacity: 1;
 219 |                 -ms-transform: none;
 220 |                         transform: none;
 221 |             }
 222 |         }
 223 | 
 224 |         @-o-keyframes fadeInUp {
 225 |             0% {
 226 |                 opacity: 0;
 227 |                 -o-transform: translate3d(0, 100%, 0);
 228 |                         transform: translate3d(0, 100%, 0);
 229 |             }
 230 | 
 231 |             100% {
 232 |                 opacity: 1;
 233 |                 -o-transform: none;
 234 |                         transform: none;
 235 |             }
 236 |         }
 237 | 
 238 |         @keyframes fadeInUp {
 239 |             0% {
 240 |                 opacity: 0;
 241 |                 -webkit-transform: translate3d(0, 100%, 0);
 242 |                     -ms-transform: translate3d(0, 100%, 0);
 243 |                         transform: translate3d(0, 100%, 0);
 244 |             }
 245 | 
 246 |             100% {
 247 |                 opacity: 1;
 248 |                 -webkit-transform: none;
 249 |                     -ms-transform: none;
 250 |                         transform: none;
 251 |             }
 252 |         }
 253 | 
 254 |     /*  Fade in up big
 255 |         ========================================================================== */
 256 |         @-webkit-keyframes fadeInUpBig {
 257 |             0% {
 258 |                 opacity: 0;
 259 |                 -webkit-transform: translate3d(0, 2000px, 0);
 260 |                         transform: translate3d(0, 2000px, 0);
 261 |             }
 262 | 
 263 |             100% {
 264 |                 opacity: 1;
 265 |                 -webkit-transform: none;
 266 |                         transform: none;
 267 |             }
 268 |         }
 269 | 
 270 |         @-moz-keyframes fadeInUpBig {
 271 |             0% {
 272 |                 opacity: 0;
 273 |                 -moz-transform: translate3d(0, 2000px, 0);
 274 |                         transform: translate3d(0, 2000px, 0);
 275 |             }
 276 | 
 277 |             100% {
 278 |                 opacity: 1;
 279 |                 -moz-transform: none;
 280 |                         transform: none;
 281 |             }
 282 |         }
 283 | 
 284 |         @-ms-keyframes fadeInUpBig {
 285 |             0% {
 286 |                 opacity: 0;
 287 |                 -ms-transform: translate3d(0, 2000px, 0);
 288 |                         transform: translate3d(0, 2000px, 0);
 289 |             }
 290 | 
 291 |             100% {
 292 |                 opacity: 1;
 293 |                 -ms-transform: none;
 294 |                         transform: none;
 295 |             }
 296 |         }
 297 | 
 298 |         @-o-keyframes fadeInUpBig {
 299 |             0% {
 300 |                 opacity: 0;
 301 |                 -o-transform: translate3d(0, 2000px, 0);
 302 |                         transform: translate3d(0, 2000px, 0);
 303 |             }
 304 | 
 305 |             100% {
 306 |                 opacity: 1;
 307 |                 -o-transform: none;
 308 |                         transform: none;
 309 |             }
 310 |         }
 311 | 
 312 |         @keyframes fadeInUpBig {
 313 |             0% {
 314 |                 opacity: 0;
 315 |                 -webkit-transform: translate3d(0, 2000px, 0);
 316 |                     -ms-transform: translate3d(0, 2000px, 0);
 317 |                         transform: translate3d(0, 2000px, 0);
 318 |             }
 319 | 
 320 |             100% {
 321 |                 opacity: 1;
 322 |                 -webkit-transform: none;
 323 |                     -ms-transform: none;
 324 |                         transform: none;
 325 |             }
 326 |         }
 327 |     
 328 |     /*  Fade in left
 329 |         ========================================================================== */
 330 |         @-webkit-keyframes fadeInLeft {
 331 |             0% {
 332 |                 opacity: 0;
 333 |                 -webkit-transform: translate3d(-100%, 0, 0);
 334 |                         transform: translate3d(-100%, 0, 0);
 335 |             }
 336 | 
 337 |             100% {
 338 |                 opacity: 1;
 339 |                 -webkit-transform: none;
 340 |                         transform: none;
 341 |             }
 342 |         }
 343 | 
 344 |         @-moz-keyframes fadeInLeft {
 345 |             0% {
 346 |                 opacity: 0;
 347 |                 -moz-transform: translate3d(-100%, 0, 0);
 348 |                         transform: translate3d(-100%, 0, 0);
 349 |             }
 350 | 
 351 |             100% {
 352 |                 opacity: 1;
 353 |                 -moz-transform: none;
 354 |                         transform: none;
 355 |             }
 356 |         }
 357 | 
 358 |         @-ms-keyframes fadeInLeft {
 359 |             0% {
 360 |                 opacity: 0;
 361 |                 -ms-transform: translate3d(-100%, 0, 0);
 362 |                         transform: translate3d(-100%, 0, 0);
 363 |             }
 364 | 
 365 |             100% {
 366 |                 opacity: 1;
 367 |                 -ms-transform: none;
 368 |                         transform: none;
 369 |             }
 370 |         }
 371 | 
 372 |         @-o-keyframes fadeInLeft {
 373 |             0% {
 374 |                 opacity: 0;
 375 |                 -o-transform: translate3d(-100%, 0, 0);
 376 |                         transform: translate3d(-100%, 0, 0);
 377 |             }
 378 | 
 379 |             100% {
 380 |                 opacity: 1;
 381 |                 -o-transform: none;
 382 |                         transform: none;
 383 |             }
 384 |         }
 385 | 
 386 |         @keyframes fadeInLeft {
 387 |             0% {
 388 |                 opacity: 0;
 389 |                 -webkit-transform: translate3d(-100%, 0, 0);
 390 |                     -ms-transform: translate3d(-100%, 0, 0);
 391 |                         transform: translate3d(-100%, 0, 0);
 392 |             }
 393 | 
 394 |             100% {
 395 |                 opacity: 1;
 396 |                 -webkit-transform: none;
 397 |                     -ms-transform: none;
 398 |                         transform: none;
 399 |             }
 400 |         }
 401 | 
 402 |     /*  Fade in right
 403 |         ========================================================================== */
 404 |         @-webkit-keyframes fadeInRight {
 405 |             0% {
 406 |                 opacity: 0;
 407 |                 -webkit-transform: translate3d(100%, 0, 0);
 408 |                         transform: translate3d(100%, 0, 0);
 409 |             }
 410 | 
 411 |             100% {
 412 |                 opacity: 1;
 413 |                 -webkit-transform: none;
 414 |                         transform: none;
 415 |             }
 416 |         }
 417 | 
 418 |         @-moz-keyframes fadeInRight {
 419 |             0% {
 420 |                 opacity: 0;
 421 |                 -moz-transform: translate3d(100%, 0, 0);
 422 |                         transform: translate3d(100%, 0, 0);
 423 |             }
 424 | 
 425 |             100% {
 426 |                 opacity: 1;
 427 |                 -moz-transform: none;
 428 |                         transform: none;
 429 |             }
 430 |         }
 431 | 
 432 |         @-ms-keyframes fadeInRight {
 433 |             0% {
 434 |                 opacity: 0;
 435 |                 -ms-transform: translate3d(100%, 0, 0);
 436 |                         transform: translate3d(100%, 0, 0);
 437 |             }
 438 | 
 439 |             100% {
 440 |                 opacity: 1;
 441 |                 -ms-transform: none;
 442 |                         transform: none;
 443 |             }
 444 |         }
 445 | 
 446 |         @-o-keyframes fadeInRight {
 447 |             0% {
 448 |                 opacity: 0;
 449 |                 -o-transform: translate3d(100%, 0, 0);
 450 |                         transform: translate3d(100%, 0, 0);
 451 |             }
 452 | 
 453 |             100% {
 454 |                 opacity: 1;
 455 |                 -o-transform: none;
 456 |                         transform: none;
 457 |             }
 458 |         }
 459 | 
 460 |         @keyframes fadeInRight {
 461 |             0% {
 462 |                 opacity: 0;
 463 |                 -webkit-transform: translate3d(100%, 0, 0);
 464 |                     -ms-transform: translate3d(100%, 0, 0);
 465 |                         transform: translate3d(100%, 0, 0);
 466 |             }
 467 | 
 468 |             100% {
 469 |                 opacity: 1;
 470 |                 -webkit-transform: none;
 471 |                     -ms-transform: none;
 472 |                         transform: none;
 473 |             }
 474 |         }
 475 | 
 476 |     /*  Height flag
 477 |         ========================================================================== */
 478 |         @include keyframes(heightFlag) {
 479 |             from { height: 0; }
 480 |             to { height: 295px; }
 481 |         }
 482 | 
 483 |     /*  Width flag
 484 |         ========================================================================== */
 485 |         @include keyframes(widthFlag) {
 486 |             from { max-width: 0; }
 487 |             to { max-width: 450px; }
 488 |         }
 489 | 
 490 |     /*  Bounce in
 491 |         ========================================================================== */
 492 |         @-webkit-keyframes bounceIn {
 493 |             0%, 20%, 40%, 60%, 80%, 100% {
 494 |                 -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 495 |                 transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 496 |             }
 497 | 
 498 |             0% {
 499 |                 opacity: 0;
 500 |                 -webkit-transform: scale3d(.3, .3, .3);
 501 |                 transform: scale3d(.3, .3, .3);
 502 |             }
 503 | 
 504 |             20% {
 505 |                 -webkit-transform: scale3d(1.1, 1.1, 1.1);
 506 |                 transform: scale3d(1.1, 1.1, 1.1);
 507 |             }
 508 | 
 509 |             40% {
 510 |                 -webkit-transform: scale3d(.9, .9, .9);
 511 |                 transform: scale3d(.9, .9, .9);
 512 |             }
 513 | 
 514 |             60% {
 515 |                 opacity: 1;
 516 |                 -webkit-transform: scale3d(1.03, 1.03, 1.03);
 517 |                 transform: scale3d(1.03, 1.03, 1.03);
 518 |             }
 519 | 
 520 |             80% {
 521 |                 -webkit-transform: scale3d(.97, .97, .97);
 522 |                 transform: scale3d(.97, .97, .97);
 523 |             }
 524 | 
 525 |             100% {
 526 |                 opacity: 1;
 527 |                 -webkit-transform: scale3d(1, 1, 1);
 528 |                 transform: scale3d(1, 1, 1);
 529 |             }
 530 |         }
 531 | 
 532 |         @-moz-keyframes bounceIn {
 533 |             0%, 20%, 40%, 60%, 80%, 100% {
 534 |                 -moz-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 535 |                 transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 536 |             }
 537 | 
 538 |             0% {
 539 |                 opacity: 0;
 540 |                 -moz-transform: scale3d(.3, .3, .3);
 541 |                 transform: scale3d(.3, .3, .3);
 542 |             }
 543 | 
 544 |             20% {
 545 |                 -moz-transform: scale3d(1.1, 1.1, 1.1);
 546 |                 transform: scale3d(1.1, 1.1, 1.1);
 547 |             }
 548 | 
 549 |             40% {
 550 |                 -moz-transform: scale3d(.9, .9, .9);
 551 |                 transform: scale3d(.9, .9, .9);
 552 |             }
 553 | 
 554 |             60% {
 555 |                 opacity: 1;
 556 |                 -moz-transform: scale3d(1.03, 1.03, 1.03);
 557 |                 transform: scale3d(1.03, 1.03, 1.03);
 558 |             }
 559 | 
 560 |             80% {
 561 |                 -moz-transform: scale3d(.97, .97, .97);
 562 |                 transform: scale3d(.97, .97, .97);
 563 |             }
 564 | 
 565 |             100% {
 566 |                 opacity: 1;
 567 |                 -moz-transform: scale3d(1, 1, 1);
 568 |                 transform: scale3d(1, 1, 1);
 569 |             }
 570 |         }
 571 | 
 572 |         @keyframes bounceIn {
 573 |             0%, 20%, 40%, 60%, 80%, 100% {
 574 |                 -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 575 |                 transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 576 |             }
 577 | 
 578 |             0% {
 579 |                 opacity: 0;
 580 |                 -webkit-transform: scale3d(.3, .3, .3);
 581 |                 -ms-transform: scale3d(.3, .3, .3);
 582 |                 transform: scale3d(.3, .3, .3);
 583 |             }
 584 | 
 585 |             20% {
 586 |                 -webkit-transform: scale3d(1.1, 1.1, 1.1);
 587 |                 -ms-transform: scale3d(1.1, 1.1, 1.1);
 588 |                 transform: scale3d(1.1, 1.1, 1.1);
 589 |             }
 590 | 
 591 |             40% {
 592 |                 -webkit-transform: scale3d(.9, .9, .9);
 593 |                 -ms-transform: scale3d(.9, .9, .9);
 594 |                 transform: scale3d(.9, .9, .9);
 595 |             }
 596 | 
 597 |             60% {
 598 |                 opacity: 1;
 599 |                 -webkit-transform: scale3d(1.03, 1.03, 1.03);
 600 |                 -ms-transform: scale3d(1.03, 1.03, 1.03);
 601 |                 transform: scale3d(1.03, 1.03, 1.03);
 602 |             }
 603 | 
 604 |             80% {
 605 |                 -webkit-transform: scale3d(.97, .97, .97);
 606 |                 -ms-transform: scale3d(.97, .97, .97);
 607 |                 transform: scale3d(.97, .97, .97);
 608 |             }
 609 | 
 610 |             100% {
 611 |                 opacity: 1;
 612 |                 -webkit-transform: scale3d(1, 1, 1);
 613 |                 -ms-transform: scale3d(1, 1, 1);
 614 |                 transform: scale3d(1, 1, 1);
 615 |             }
 616 |         }
 617 | 
 618 |     /*  Boing in up
 619 |         ========================================================================== */
 620 |         @-moz-keyframes boingInUp {
 621 |             0% {
 622 |                 opacity: 0;
 623 |                 -moz-transform-origin: 50% 0%;
 624 |                 -moz-transform: perspective(800px) rotateX(-90deg);
 625 |             }
 626 | 
 627 |             50% {
 628 |                 opacity: 1;
 629 |                 -moz-transform-origin: 50% 0%;
 630 |                 -moz-transform: perspective(800px) rotateX(50deg);
 631 |             }
 632 | 
 633 |             100% {
 634 |                 opacity: 1;
 635 |                 -moz-transform-origin: 50% 0%;
 636 |                 -moz-transform: perspective(800px) rotateX(0deg);
 637 |             }
 638 |         }
 639 | 
 640 |         @-webkit-keyframes boingInUp {
 641 |             0% {
 642 |                 opacity: 0;
 643 |                 -webkit-transform-origin: 50% 0%;
 644 |                 -webkit-transform: perspective(800px) rotateX(-90deg);
 645 |             }
 646 | 
 647 |             50% {
 648 |                 opacity: 1;
 649 |                 -webkit-transform-origin: 50% 0%;
 650 |                 -webkit-transform: perspective(800px) rotateX(50deg);
 651 |             }
 652 | 
 653 |             100% {
 654 |                 opacity: 1;
 655 |                 -webkit-transform-origin: 50% 0%;
 656 |                 -webkit-transform: perspective(800px) rotateX(0deg);
 657 |             }
 658 |         }
 659 | 
 660 |         @-o-keyframes boingInUp {
 661 |             0% {
 662 |                 opacity: 0;
 663 |                 -o-transform-origin: 50% 0%;
 664 |                 -o-transform: perspective(800px) rotateX(-90deg);
 665 |             }
 666 | 
 667 |             50% {
 668 |                 opacity: 1;
 669 |                 -o-transform-origin: 50% 0%;
 670 |                 -o-transform: perspective(800px) rotateX(50deg);
 671 |             }
 672 | 
 673 |             100% {
 674 |                 opacity: 1;
 675 |                 -o-transform-origin: 50% 0%;
 676 |                 -o-transform: perspective(800px) rotateX(0deg);
 677 |             }
 678 |         }
 679 | 
 680 |         @-ms-keyframes boingInUp {
 681 |             0% {
 682 |                 opacity: 0;
 683 |                 -ms-transform-origin: 50% 0%;
 684 |                 -ms-transform: perspective(800px) rotateX(-90deg);
 685 |             }
 686 | 
 687 |             50% {
 688 |                 opacity: 1;
 689 |                 -ms-transform-origin: 50% 0%;
 690 |                 -ms-transform: perspective(800px) rotateX(50deg);
 691 |             }
 692 | 
 693 |             100% {
 694 |                 opacity: 1;
 695 |                 -ms-transform-origin: 50% 0%;
 696 |                 -ms-transform: perspective(800px) rotateX(0deg);
 697 |             }
 698 |         }
 699 | 
 700 |         @keyframes boingInUp {
 701 |             0% {
 702 |                 opacity: 0;
 703 |                 transform-origin: 50% 0%;
 704 |                 transform: perspective(800px) rotateX(-90deg);
 705 |             }
 706 | 
 707 |             50% {
 708 |                 opacity: 1;
 709 |                 transform-origin: 50% 0%;
 710 |                 transform: perspective(800px) rotateX(50deg);
 711 |             }
 712 | 
 713 |             100% {
 714 |                 opacity: 1;
 715 |                 transform-origin: 50% 0%;
 716 |                 transform: perspective(800px) rotateX(0deg);
 717 |             }
 718 |         }
 719 | 
 720 |     /*  Zoom in
 721 |         ========================================================================== */
 722 |         @-webkit-keyframes zoomIn {
 723 |             0% {
 724 |                 opacity: 0;
 725 |                 -webkit-transform: scale3d(.3, .3, .3);
 726 |                 transform: scale3d(.3, .3, .3);
 727 |             }
 728 | 
 729 |             50% {
 730 |                 opacity: 1;
 731 |             }
 732 |         }
 733 | 
 734 |         @-moz-keyframes zoomIn {
 735 |             0% {
 736 |                 opacity: 0;
 737 |                 -moz-transform: scale3d(.3, .3, .3);
 738 |                 transform: scale3d(.3, .3, .3);
 739 |             }
 740 | 
 741 |             50% {
 742 |                 opacity: 1;
 743 |             }
 744 |         }
 745 | 
 746 |         @-ms-keyframes zoomIn {
 747 |             0% {
 748 |                 opacity: 0;
 749 |                 -ms-transform: scale3d(.3, .3, .3);
 750 |                 transform: scale3d(.3, .3, .3);
 751 |             }
 752 | 
 753 |             50% {
 754 |                 opacity: 1;
 755 |             }
 756 |         }
 757 | 
 758 |         @-o-keyframes zoomIn {
 759 |             0% {
 760 |                 opacity: 0;
 761 |                 -o-transform: scale3d(.3, .3, .3);
 762 |                 transform: scale3d(.3, .3, .3);
 763 |             }
 764 | 
 765 |             50% {
 766 |                 opacity: 1;
 767 |             }
 768 |         }
 769 | 
 770 |         @keyframes zoomIn {
 771 |             0% {
 772 |                 opacity: 0;
 773 |                 -webkit-transform: scale3d(.3, .3, .3);
 774 |                 -ms-transform: scale3d(.3, .3, .3);
 775 |                 transform: scale3d(.3, .3, .3);
 776 |             }
 777 | 
 778 |             50% {
 779 |                 opacity: 1;
 780 |             }
 781 |         }
 782 | 
 783 |     /*  Rotate in
 784 |         ========================================================================== */
 785 |         @-webkit-keyframes rotateIn {
 786 |             0% {
 787 |                 -webkit-transform-origin: center;
 788 |                 transform-origin: center;
 789 |                 -webkit-transform: rotate3d(0, 0, 1, -200deg);
 790 |                 transform: rotate3d(0, 0, 1, -200deg);
 791 |                 opacity: 0;
 792 |             }
 793 | 
 794 |             100% {
 795 |                 -webkit-transform-origin: center;
 796 |                 transform-origin: center;
 797 |                 -webkit-transform: none;
 798 |                 transform: none;
 799 |                 opacity: 1;
 800 |             }
 801 |         }
 802 | 
 803 |         @-moz-keyframes rotateIn {
 804 |             0% {
 805 |                 -moz-transform-origin: center;
 806 |                 transform-origin: center;
 807 |                 -moz-transform: rotate3d(0, 0, 1, -200deg);
 808 |                 transform: rotate3d(0, 0, 1, -200deg);
 809 |                 opacity: 0;
 810 |             }
 811 | 
 812 |             100% {
 813 |                 -moz-transform-origin: center;
 814 |                 transform-origin: center;
 815 |                 -moz-transform: none;
 816 |                 transform: none;
 817 |                 opacity: 1;
 818 |             }
 819 |         }
 820 | 
 821 |         @-ms-keyframes rotateIn {
 822 |             0% {
 823 |                 -ms-transform-origin: center;
 824 |                 transform-origin: center;
 825 |                 -ms-transform: rotate3d(0, 0, 1, -200deg);
 826 |                 transform: rotate3d(0, 0, 1, -200deg);
 827 |                 opacity: 0;
 828 |             }
 829 | 
 830 |             100% {
 831 |                 -ms-transform-origin: center;
 832 |                 transform-origin: center;
 833 |                 -ms-transform: none;
 834 |                 transform: none;
 835 |                 opacity: 1;
 836 |             }
 837 |         }
 838 | 
 839 |         @-o-keyframes rotateIn {
 840 |             0% {
 841 |                 -o-transform-origin: center;
 842 |                 transform-origin: center;
 843 |                 -o-transform: rotate3d(0, 0, 1, -200deg);
 844 |                 transform: rotate3d(0, 0, 1, -200deg);
 845 |                 opacity: 0;
 846 |             }
 847 | 
 848 |             100% {
 849 |                 -o-transform-origin: center;
 850 |                 transform-origin: center;
 851 |                 -o-transform: none;
 852 |                 transform: none;
 853 |                 opacity: 1;
 854 |             }
 855 |         }
 856 | 
 857 |         @keyframes rotateIn {
 858 |             0% {
 859 |                 -webkit-transform-origin: center;
 860 |                 -ms-transform-origin: center;
 861 |                 transform-origin: center;
 862 |                 -webkit-transform: rotate3d(0, 0, 1, -200deg);
 863 |                 -ms-transform: rotate3d(0, 0, 1, -200deg);
 864 |                 transform: rotate3d(0, 0, 1, -200deg);
 865 |                 opacity: 0;
 866 |             }
 867 | 
 868 |             100% {
 869 |                 -webkit-transform-origin: center;
 870 |                 -ms-transform-origin: center;
 871 |                 transform-origin: center;
 872 |                 -webkit-transform: none;
 873 |                 -ms-transform: none;
 874 |                 transform: none;
 875 |                 opacity: 1;
 876 |             }
 877 |         }
 878 | 
 879 |     /*  Perspective left
 880 |         ========================================================================== */
 881 |         @-moz-keyframes perspectiveLeftRetourn {
 882 |             0% {
 883 |                 -moz-transform-origin: 0 0;
 884 |                 -moz-transform: perspective(800px) rotateY(-360deg);
 885 |             }
 886 | 
 887 |             100% {
 888 |                 -moz-transform-origin: 0 0;
 889 |                 -moz-transform: perspective(800px) rotateY(0deg);
 890 |             }
 891 |         }
 892 | 
 893 |         @-webkit-keyframes perspectiveLeftRetourn {
 894 |             0% {
 895 |                 -webkit-transform-origin: 0 0;
 896 |                 -webkit-transform: perspective(800px) rotateY(-360deg);
 897 |             }
 898 | 
 899 |             100% {
 900 |                 -webkit-transform-origin: 0 0;
 901 |                 -webkit-transform: perspective(800px) rotateY(0deg);
 902 |             }
 903 |         }
 904 | 
 905 |         @-o-keyframes perspectiveLeftRetourn {
 906 |             0% {
 907 |                 -o-transform-origin: 0 0;
 908 |                 -o-transform: perspective(800px) rotateY(-360deg);
 909 |             }
 910 | 
 911 |             100% {
 912 |                 -o-transform-origin: 0 0;
 913 |                 -o-transform: perspective(800px) rotateY(0deg);
 914 |             }
 915 |         }
 916 | 
 917 |         @-ms-keyframes perspectiveLeftRetourn {
 918 |             0% {
 919 |                 -ms-transform-origin: 0 0;
 920 |                 -ms-transform: perspective(800px) rotateY(-360deg);
 921 |             }
 922 | 
 923 |             100% {
 924 |                 -ms-transform-origin: 0 0;
 925 |                 -ms-transform: perspective(800px) rotateY(0deg);
 926 |             }
 927 |         }
 928 | 
 929 |         @keyframes perspectiveLeftRetourn {
 930 |             0% {
 931 |                 transform-origin: 0 0;
 932 |                 transform: perspective(800px) rotateY(-360deg);
 933 |             }
 934 | 
 935 |             100% {
 936 |                 transform-origin: 0 0;
 937 |                 transform: perspective(800px) rotateY(0deg);
 938 |             }
 939 |         }
 940 | 
 941 |     /*  Rotate in up right
 942 |         ========================================================================== */
 943 |         @-webkit-keyframes rotateInUpRight {
 944 |             0% {
 945 |                 -webkit-transform-origin: right bottom;
 946 |                 transform-origin: right bottom;
 947 |                 -webkit-transform: rotate3d(0, 0, 1, -90deg);
 948 |                 transform: rotate3d(0, 0, 1, -90deg);
 949 |                 opacity: 0;
 950 |             }
 951 | 
 952 |             100% {
 953 |                 -webkit-transform-origin: right bottom;
 954 |                 transform-origin: right bottom;
 955 |                 -webkit-transform: none;
 956 |                 transform: none;
 957 |                 opacity: 1;
 958 |             }
 959 |         }
 960 | 
 961 |         @-moz-keyframes rotateInUpRight {
 962 |             0% {
 963 |                 -moz-transform-origin: right bottom;
 964 |                 transform-origin: right bottom;
 965 |                 -moz-transform: rotate3d(0, 0, 1, -90deg);
 966 |                 transform: rotate3d(0, 0, 1, -90deg);
 967 |                 opacity: 0;
 968 |             }
 969 | 
 970 |             100% {
 971 |                 -moz-transform-origin: right bottom;
 972 |                 transform-origin: right bottom;
 973 |                 -moz-transform: none;
 974 |                 transform: none;
 975 |                 opacity: 1;
 976 |             }
 977 |         }
 978 | 
 979 |         @-ms-keyframes rotateInUpRight {
 980 |             0% {
 981 |                 -ms-transform-origin: right bottom;
 982 |                 transform-origin: right bottom;
 983 |                 -ms-transform: rotate3d(0, 0, 1, -90deg);
 984 |                 transform: rotate3d(0, 0, 1, -90deg);
 985 |                 opacity: 0;
 986 |             }
 987 | 
 988 |             100% {
 989 |                 -ms-transform-origin: right bottom;
 990 |                 transform-origin: right bottom;
 991 |                 -ms-transform: none;
 992 |                 transform: none;
 993 |                 opacity: 1;
 994 |             }
 995 |         }
 996 | 
 997 |         @-o-keyframes rotateInUpRight {
 998 |             0% {
 999 |                 -o-transform-origin: right bottom;
1000 |                 transform-origin: right bottom;
1001 |                 -o-transform: rotate3d(0, 0, 1, -90deg);
1002 |                 transform: rotate3d(0, 0, 1, -90deg);
1003 |                 opacity: 0;
1004 |             }
1005 | 
1006 |             100% {
1007 |                 -o-transform-origin: right bottom;
1008 |                 transform-origin: right bottom;
1009 |                 -o-transform: none;
1010 |                 transform: none;
1011 |                 opacity: 1;
1012 |             }
1013 |         }
1014 | 
1015 |         @keyframes rotateInUpRight {
1016 |             0% {
1017 |                 -webkit-transform-origin: right bottom;
1018 |                 -ms-transform-origin: right bottom;
1019 |                 transform-origin: right bottom;
1020 |                 -webkit-transform: rotate3d(0, 0, 1, -90deg);
1021 |                 -ms-transform: rotate3d(0, 0, 1, -90deg);
1022 |                 transform: rotate3d(0, 0, 1, -90deg);
1023 |                 opacity: 0;
1024 |             }
1025 | 
1026 |             100% {
1027 |                 -webkit-transform-origin: right bottom;
1028 |                 -ms-transform-origin: right bottom;
1029 |                 transform-origin: right bottom;
1030 |                 -webkit-transform: none;
1031 |                 -ms-transform: none;
1032 |                 transform: none;
1033 |                 opacity: 1;
1034 |             }
1035 |         }
1036 | 
1037 |     /*  Zoom in
1038 |         ========================================================================== */
1039 |         @-webkit-keyframes zoomIn {
1040 |             0% {
1041 |                 opacity: 0;
1042 |                 -webkit-transform: scale3d(.3, .3, .3);
1043 |                 transform: scale3d(.3, .3, .3);
1044 |             }
1045 | 
1046 |             50% {
1047 |                 opacity: 1;
1048 |             }
1049 |         }
1050 | 
1051 |         @-moz-keyframes zoomIn {
1052 |             0% {
1053 |                 opacity: 0;
1054 |                 -moz-transform: scale3d(.3, .3, .3);
1055 |                 transform: scale3d(.3, .3, .3);
1056 |             }
1057 | 
1058 |             50% {
1059 |                 opacity: 1;
1060 |             }
1061 |         }
1062 | 
1063 |         @-ms-keyframes zoomIn {
1064 |             0% {
1065 |                 opacity: 0;
1066 |                 -ms-transform: scale3d(.3, .3, .3);
1067 |                 transform: scale3d(.3, .3, .3);
1068 |             }
1069 | 
1070 |             50% {
1071 |                 opacity: 1;
1072 |             }
1073 |         }
1074 | 
1075 |         @-o-keyframes zoomIn {
1076 |             0% {
1077 |                 opacity: 0;
1078 |                 -o-transform: scale3d(.3, .3, .3);
1079 |                 transform: scale3d(.3, .3, .3);
1080 |             }
1081 | 
1082 |             50% {
1083 |                 opacity: 1;
1084 |             }
1085 |         }
1086 | 
1087 |         @keyframes zoomIn {
1088 |             0% {
1089 |                 opacity: 0;
1090 |                 -webkit-transform: scale3d(.3, .3, .3);
1091 |                 -ms-transform: scale3d(.3, .3, .3);
1092 |                 transform: scale3d(.3, .3, .3);
1093 |             }
1094 | 
1095 |             50% {
1096 |                 opacity: 1;
1097 |             }
1098 |         }
1099 | 
1100 |     /*  Zoom in down
1101 |         ========================================================================== */
1102 |         @-webkit-keyframes zoomInDown {
1103 |             0% {
1104 |                 opacity: 0;
1105 |                 -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
1106 |                 transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
1107 |                 -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
1108 |                 animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
1109 |             }
1110 | 
1111 |             60% {
1112 |                 opacity: 1;
1113 |                 -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
1114 |                 transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
1115 |                 -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
1116 |                 animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
1117 |             }
1118 |         }
1119 | 
1120 |         @-moz-keyframes zoomInDown {
1121 |             0% {
1122 |                 opacity: 0;
1123 |                 -moz-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
1124 |                 transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
1125 |                 -moz-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
1126 |                 animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
1127 |             }
1128 | 
1129 |             60% {
1130 |                 opacity: 1;
1131 |                 -moz-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
1132 |                 transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
1133 |                 -moz-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
1134 |                 animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
1135 |             }
1136 |         }
1137 | 
1138 |         @-ms-keyframes zoomInDown {
1139 |             0% {
1140 |                 opacity: 0;
1141 |                 -ms-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
1142 |                 transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
1143 |                 -ms-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
1144 |                 animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
1145 |             }
1146 | 
1147 |             60% {
1148 |                 opacity: 1;
1149 |                 -ms-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
1150 |                 transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
1151 |                 -ms-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
1152 |                 animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
1153 |             }
1154 |         }
1155 | 
1156 |         @-o-keyframes zoomInDown {
1157 |             0% {
1158 |                 opacity: 0;
1159 |                 -o-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
1160 |                 transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
1161 |                 -o-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
1162 |                 animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
1163 |             }
1164 | 
1165 |             60% {
1166 |                 opacity: 1;
1167 |                 -o-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
1168 |                 transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
1169 |                 -o-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
1170 |                 animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
1171 |             }
1172 |         }
1173 | 
1174 |         @keyframes zoomInDown {
1175 |             0% {
1176 |                 opacity: 0;
1177 |                 -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
1178 |                 -ms-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
1179 |                 transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
1180 |                 -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
1181 |                 animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
1182 |             }
1183 | 
1184 |             60% {
1185 |                 opacity: 1;
1186 |                 -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
1187 |                 -ms-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
1188 |                 transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
1189 |                 -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
1190 |                 animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
1191 |             }
1192 |         }
1193 | 
1194 |     /*  Flip in X
1195 |         ========================================================================== */
1196 |         @-webkit-keyframes flipInX {
1197 |             0% {
1198 |                 -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
1199 |                 transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
1200 |                 -webkit-transition-timing-function: ease-in;
1201 |                 transition-timing-function: ease-in;
1202 |                 opacity: 0;
1203 |             }
1204 | 
1205 |             40% {
1206 |                 -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
1207 |                 transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
1208 |                 -webkit-transition-timing-function: ease-in;
1209 |                 transition-timing-function: ease-in;
1210 |             }
1211 | 
1212 |             60% {
1213 |                 -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
1214 |                 transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
1215 |                 opacity: 1;
1216 |             }
1217 | 
1218 |             80% {
1219 |                 -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
1220 |                 transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
1221 |             }
1222 | 
1223 |             100% {
1224 |                 -webkit-transform: perspective(400px);
1225 |                 transform: perspective(400px);
1226 |             }
1227 |         }
1228 | 
1229 |         @-moz-keyframes flipInX {
1230 |             0% {
1231 |                 -moz-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
1232 |                 transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
1233 |                 -moz-transition-timing-function: ease-in;
1234 |                 transition-timing-function: ease-in;
1235 |                 opacity: 0;
1236 |             }
1237 | 
1238 |             40% {
1239 |                 -moz-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
1240 |                 transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
1241 |                 -moz-transition-timing-function: ease-in;
1242 |                 transition-timing-function: ease-in;
1243 |             }
1244 | 
1245 |             60% {
1246 |                 -moz-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
1247 |                 transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
1248 |                 opacity: 1;
1249 |             }
1250 | 
1251 |             80% {
1252 |                 -moz-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
1253 |                 transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
1254 |             }
1255 | 
1256 |             100% {
1257 |                 -moz-transform: perspective(400px);
1258 |                 transform: perspective(400px);
1259 |             }
1260 |         }
1261 | 
1262 |         @-ms-keyframes flipInX {
1263 |             0% {
1264 |                 -ms-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
1265 |                 transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
1266 |                 -ms-transition-timing-function: ease-in;
1267 |                 transition-timing-function: ease-in;
1268 |                 opacity: 0;
1269 |             }
1270 | 
1271 |             40% {
1272 |                 -ms-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
1273 |                 transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
1274 |                 -ms-transition-timing-function: ease-in;
1275 |                 transition-timing-function: ease-in;
1276 |             }
1277 | 
1278 |             60% {
1279 |                 -ms-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
1280 |                 transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
1281 |                 opacity: 1;
1282 |             }
1283 | 
1284 |             80% {
1285 |                 -ms-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
1286 |                 transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
1287 |             }
1288 | 
1289 |             100% {
1290 |                 -ms-transform: perspective(400px);
1291 |                 transform: perspective(400px);
1292 |             }
1293 |         }
1294 | 
1295 |         @-o-keyframes flipInX {
1296 |             0% {
1297 |                 -o-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
1298 |                 transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
1299 |                 -o-transition-timing-function: ease-in;
1300 |                 transition-timing-function: ease-in;
1301 |                 opacity: 0;
1302 |             }
1303 | 
1304 |             40% {
1305 |                 -o-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
1306 |                 transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
1307 |                 -o-transition-timing-function: ease-in;
1308 |                 transition-timing-function: ease-in;
1309 |             }
1310 | 
1311 |             60% {
1312 |                 -o-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
1313 |                 transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
1314 |                 opacity: 1;
1315 |             }
1316 | 
1317 |             80% {
1318 |                 -o-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
1319 |                 transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
1320 |             }
1321 | 
1322 |             100% {
1323 |                 -o-transform: perspective(400px);
1324 |                 transform: perspective(400px);
1325 |             }
1326 |         }
1327 | 
1328 |         @keyframes flipInX {
1329 |             0% {
1330 |                 -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
1331 |                 -ms-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
1332 |                 transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
1333 |                 -webkit-transition-timing-function: ease-in;
1334 |                 transition-timing-function: ease-in;
1335 |                 opacity: 0;
1336 |             }
1337 | 
1338 |             40% {
1339 |                 -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
1340 |                 -ms-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
1341 |                 transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
1342 |                 -webkit-transition-timing-function: ease-in;
1343 |                 transition-timing-function: ease-in;
1344 |             }
1345 | 
1346 |             60% {
1347 |                 -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
1348 |                 -ms-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
1349 |                 transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
1350 |                 opacity: 1;
1351 |             }
1352 | 
1353 |             80% {
1354 |                 -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
1355 |                 -ms-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
1356 |                 transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
1357 |             }
1358 | 
1359 |             100% {
1360 |                 -webkit-transform: perspective(400px);
1361 |                 -ms-transform: perspective(400px);
1362 |                 transform: perspective(400px);
1363 |             }
1364 |         }
1365 | 
1366 | /*  ==========================================================================
1367 |     Specific
1368 |     ========================================================================== */
1369 | 
1370 |     /*  Algeria
1371 |         ========================================================================== */
1372 |         @include keyframes(enterAlgeria) {
1373 |             from { @include box-shadow(0 0 0 0 #006233 inset); }
1374 |             to { @include box-shadow(220px 0 0 0 #006233 inset); }
1375 |         }
1376 | 
1377 |         @include keyframes(starAlgeria) {
1378 |             from {
1379 |                 opacity: 0;
1380 |                 @include transform(rotate(-360deg) translateX(25px));
1381 |             }
1382 |             to {
1383 |                 opacity: 1;
1384 |                 @include transform(rotate(17deg) translateX(0));   
1385 |             }
1386 |         }
1387 | 
1388 |     /*  Brazil
1389 |         ========================================================================== */
1390 |         @include keyframes(enterBrazil) {
1391 |             from { @include box-shadow(0 0 0 0 #FEDF00 inset); }
1392 |             to { @include box-shadow(0 295px 0 0 #FEDF00 inset); }
1393 |         }
1394 | 
1395 |     /*  South Africa
1396 |         ========================================================================== */
1397 |         @include keyframes(enterSouthAfrica) {
1398 |             from { right: -140%; }
1399 |             to { right: -102px; }
1400 |         }
1401 | 
1402 | 


--------------------------------------------------------------------------------
/assets/scss/organisms/layout.scss:
--------------------------------------------------------------------------------
 1 | .country .flag,
 2 | .country .flag:before,
 3 | .country .flag:after,
 4 | .country .flag div,
 5 | .country .flag div:after,
 6 | .country .flag div:before {
 7 |     -webkit-animation-play-state: paused;
 8 |        -moz-animation-play-state: paused;
 9 |         -ms-animation-play-state: paused;
10 |          -o-animation-play-state: paused;
11 |             animation-play-state: paused;
12 | }
13 | 
14 | .country.active .flag,
15 | .country.active .flag:before,
16 | .country.active .flag:after,
17 | .country.active .flag div,
18 | .country.active .flag div:before,
19 | .country.active .flag div:after {
20 |     -webkit-animation-play-state: running;
21 |        -moz-animation-play-state: running;
22 |         -ms-animation-play-state: running;
23 |          -o-animation-play-state: running;
24 |             animation-play-state: running;
25 | }


--------------------------------------------------------------------------------
/build/css/main.min.css:
--------------------------------------------------------------------------------
1 | html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}.tunisia .flag{-webkit-backface-visibility:visible;backface-visibility:visible}::selection{background:#666;text-shadow:none;color:#fff}img,object,embed,iframe{max-width:100%}img{height:auto}*,*:after,*:before{-ms-box-sizing:border-box;box-sizing:border-box}body{width:100%}@media only screen{.main{overflow:hidden}.country{position:relative;overflow:hidden;width:100%;height:485px;background-repeat:no-repeat;background-position:center center;background-size:450px 295px}.flag{position:absolute;top:50%;left:50%;margin:-147px 0 0 -225px;width:100%;max-width:450px;height:295px;overflow:hidden}}@media only screen and (min-width: 1200px){.country{float:left;width:50%}}@media only screen{body{-webkit-text-size-adjust:none;-ms-text-size-adjust:none}p{color:#666666;font-size:14px;line-height:20px;margin:0 0 15px;text-align:left}a{color:#12a5a5;text-decoration:none}a:hover{text-decoration:underline}}@media only screen{.fork img{position:absolute;top:0;right:0;border:0;z-index:99}.header,.footer{background-color:#333;padding:15px 10px}.title{color:#fff;margin:0;font-size:38px;letter-spacing:-1px;text-align:center;text-shadow:1px 1px 1px #000}.subtitle{margin:5px 0 0;font-size:24px;color:#999;text-align:center;text-shadow:1px 1px 1px #000}.footer p{font-size:14px;text-align:center;margin:0;color:#fff}.footer p+p{margin-top:10px}}@-webkit-keyframes fadeIn{0%{opacity:0}100%{opacity:1}}@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0, -100%, 0);transform:translate3d(0, -100%, 0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0, -100%, 0);transform:translate3d(0, -100%, 0)}100%{opacity:1;-webkit-transform:none;transform:none}}@-webkit-keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translate3d(0, -2000px, 0);transform:translate3d(0, -2000px, 0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translate3d(0, -2000px, 0);transform:translate3d(0, -2000px, 0)}100%{opacity:1;-webkit-transform:none;transform:none}}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0, 100%, 0);transform:translate3d(0, 100%, 0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0, 100%, 0);transform:translate3d(0, 100%, 0)}100%{opacity:1;-webkit-transform:none;transform:none}}@-webkit-keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translate3d(0, 2000px, 0);transform:translate3d(0, 2000px, 0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translate3d(0, 2000px, 0);transform:translate3d(0, 2000px, 0)}100%{opacity:1;-webkit-transform:none;transform:none}}@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%, 0, 0);transform:translate3d(-100%, 0, 0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%, 0, 0);transform:translate3d(-100%, 0, 0)}100%{opacity:1;-webkit-transform:none;transform:none}}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%, 0, 0);transform:translate3d(100%, 0, 0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%, 0, 0);transform:translate3d(100%, 0, 0)}100%{opacity:1;-webkit-transform:none;transform:none}}@-webkit-keyframes heightFlag{from{height:0}to{height:295px}}@keyframes heightFlag{from{height:0}to{height:295px}}@-webkit-keyframes widthFlag{from{max-width:0}to{max-width:450px}}@keyframes widthFlag{from{max-width:0}to{max-width:450px}}@-webkit-keyframes bounceIn{0%,20%,40%,60%,80%,100%{-webkit-transition-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);transition-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1)}0%{opacity:0;-webkit-transform:scale3d(0.3, 0.3, 0.3);transform:scale3d(0.3, 0.3, 0.3)}20%{-webkit-transform:scale3d(1.1, 1.1, 1.1);transform:scale3d(1.1, 1.1, 1.1)}40%{-webkit-transform:scale3d(0.9, 0.9, 0.9);transform:scale3d(0.9, 0.9, 0.9)}60%{opacity:1;-webkit-transform:scale3d(1.03, 1.03, 1.03);transform:scale3d(1.03, 1.03, 1.03)}80%{-webkit-transform:scale3d(0.97, 0.97, 0.97);transform:scale3d(0.97, 0.97, 0.97)}100%{opacity:1;-webkit-transform:scale3d(1, 1, 1);transform:scale3d(1, 1, 1)}}@keyframes bounceIn{0%,20%,40%,60%,80%,100%{-webkit-transition-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);transition-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1)}0%{opacity:0;-webkit-transform:scale3d(0.3, 0.3, 0.3);transform:scale3d(0.3, 0.3, 0.3)}20%{-webkit-transform:scale3d(1.1, 1.1, 1.1);transform:scale3d(1.1, 1.1, 1.1)}40%{-webkit-transform:scale3d(0.9, 0.9, 0.9);transform:scale3d(0.9, 0.9, 0.9)}60%{opacity:1;-webkit-transform:scale3d(1.03, 1.03, 1.03);transform:scale3d(1.03, 1.03, 1.03)}80%{-webkit-transform:scale3d(0.97, 0.97, 0.97);transform:scale3d(0.97, 0.97, 0.97)}100%{opacity:1;-webkit-transform:scale3d(1, 1, 1);transform:scale3d(1, 1, 1)}}@-webkit-keyframes boingInUp{0%{opacity:0;-webkit-transform-origin:50% 0%;-webkit-transform:perspective(800px) rotateX(-90deg)}50%{opacity:1;-webkit-transform-origin:50% 0%;-webkit-transform:perspective(800px) rotateX(50deg)}100%{opacity:1;-webkit-transform-origin:50% 0%;-webkit-transform:perspective(800px) rotateX(0deg)}}@keyframes boingInUp{0%{opacity:0;-webkit-transform-origin:50% 0%;transform-origin:50% 0%;-webkit-transform:perspective(800px) rotateX(-90deg);transform:perspective(800px) rotateX(-90deg)}50%{opacity:1;-webkit-transform-origin:50% 0%;transform-origin:50% 0%;-webkit-transform:perspective(800px) rotateX(50deg);transform:perspective(800px) rotateX(50deg)}100%{opacity:1;-webkit-transform-origin:50% 0%;transform-origin:50% 0%;-webkit-transform:perspective(800px) rotateX(0deg);transform:perspective(800px) rotateX(0deg)}}@-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(0.3, 0.3, 0.3);transform:scale3d(0.3, 0.3, 0.3)}50%{opacity:1}}@keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(0.3, 0.3, 0.3);transform:scale3d(0.3, 0.3, 0.3)}50%{opacity:1}}@-webkit-keyframes rotateIn{0%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0, 0, 1, -200deg);transform:rotate3d(0, 0, 1, -200deg);opacity:0}100%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateIn{0%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0, 0, 1, -200deg);transform:rotate3d(0, 0, 1, -200deg);opacity:0}100%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:none;transform:none;opacity:1}}@-webkit-keyframes perspectiveLeftRetourn{0%{-webkit-transform-origin:0 0;-webkit-transform:perspective(800px) rotateY(-360deg)}100%{-webkit-transform-origin:0 0;-webkit-transform:perspective(800px) rotateY(0deg)}}@keyframes perspectiveLeftRetourn{0%{-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:perspective(800px) rotateY(-360deg);transform:perspective(800px) rotateY(-360deg)}100%{-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:perspective(800px) rotateY(0deg);transform:perspective(800px) rotateY(0deg)}}@-webkit-keyframes rotateInUpRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0, 0, 1, -90deg);transform:rotate3d(0, 0, 1, -90deg);opacity:0}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInUpRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0, 0, 1, -90deg);transform:rotate3d(0, 0, 1, -90deg);opacity:0}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:none;transform:none;opacity:1}}@-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(0.3, 0.3, 0.3);transform:scale3d(0.3, 0.3, 0.3)}50%{opacity:1}}@keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(0.3, 0.3, 0.3);transform:scale3d(0.3, 0.3, 0.3)}50%{opacity:1}}@-webkit-keyframes zoomInDown{0%{opacity:0;-webkit-transform:scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);transform:scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);-webkit-animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19);animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19)}60%{opacity:1;-webkit-transform:scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);transform:scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);-webkit-animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1);animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1)}}@keyframes zoomInDown{0%{opacity:0;-webkit-transform:scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);transform:scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);-webkit-animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19);animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19)}60%{opacity:1;-webkit-transform:scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);transform:scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);-webkit-animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1);animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1)}}@-webkit-keyframes flipInX{0%{-webkit-transform:perspective(400px) rotate3d(1, 0, 0, 90deg);transform:perspective(400px) rotate3d(1, 0, 0, 90deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotate3d(1, 0, 0, -20deg);transform:perspective(400px) rotate3d(1, 0, 0, -20deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotate3d(1, 0, 0, 10deg);transform:perspective(400px) rotate3d(1, 0, 0, 10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(1, 0, 0, -5deg);transform:perspective(400px) rotate3d(1, 0, 0, -5deg)}100%{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes flipInX{0%{-webkit-transform:perspective(400px) rotate3d(1, 0, 0, 90deg);transform:perspective(400px) rotate3d(1, 0, 0, 90deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotate3d(1, 0, 0, -20deg);transform:perspective(400px) rotate3d(1, 0, 0, -20deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotate3d(1, 0, 0, 10deg);transform:perspective(400px) rotate3d(1, 0, 0, 10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(1, 0, 0, -5deg);transform:perspective(400px) rotate3d(1, 0, 0, -5deg)}100%{-webkit-transform:perspective(400px);transform:perspective(400px)}}@-webkit-keyframes enterAlgeria{from{box-shadow:0 0 0 0 #006233 inset}to{box-shadow:220px 0 0 0 #006233 inset}}@keyframes enterAlgeria{from{box-shadow:0 0 0 0 #006233 inset}to{box-shadow:220px 0 0 0 #006233 inset}}@-webkit-keyframes starAlgeria{from{opacity:0;-webkit-transform:rotate(-360deg) translateX(25px);transform:rotate(-360deg) translateX(25px)}to{opacity:1;-webkit-transform:rotate(17deg) translateX(0);transform:rotate(17deg) translateX(0)}}@keyframes starAlgeria{from{opacity:0;-webkit-transform:rotate(-360deg) translateX(25px);transform:rotate(-360deg) translateX(25px)}to{opacity:1;-webkit-transform:rotate(17deg) translateX(0);transform:rotate(17deg) translateX(0)}}@-webkit-keyframes enterBrazil{from{box-shadow:0 0 0 0 #FEDF00 inset}to{box-shadow:0 295px 0 0 #FEDF00 inset}}@keyframes enterBrazil{from{box-shadow:0 0 0 0 #FEDF00 inset}to{box-shadow:0 295px 0 0 #FEDF00 inset}}@-webkit-keyframes enterSouthAfrica{from{right:-140%}to{right:-102px}}@keyframes enterSouthAfrica{from{right:-140%}to{right:-102px}}.algeria{background-color:#f98f06}.algeria .flag{background-color:#fff;box-shadow:220px 0 0 0 #006233 inset;-webkit-animation:fadeInRight 0.75s ease both,enterAlgeria 1s ease 0.25s both;animation:fadeInRight 0.75s ease both,enterAlgeria 1s ease 0.25s both}.algeria .flag:before{border-radius:50%;box-shadow:-21px 0 0 18px #D21034;content:"";height:40%;left:41%;position:absolute;top:30%;width:26%;-webkit-animation:fadeInDown 0.75s cubic-bezier(0.175, 0.885, 0.32, 1.275) both 1s;animation:fadeInDown 0.75s cubic-bezier(0.175, 0.885, 0.32, 1.275) both 1s}.algeria .flag:after{content:'';position:absolute;z-index:3;content:"\2605";font-size:93px;line-height:1;left:48%;color:#D21034;top:33%;-webkit-transform:rotate(17deg);transform:rotate(17deg);-webkit-animation:fadeInRight 0.75s ease both 1s;animation:fadeInRight 0.75s ease both 1s}.austria{background-color:#31d9cb}.austria .flag{background-color:#fff;-webkit-animation:heightFlag 1s ease both;animation:heightFlag 1s ease both}.austria .flag:before,.austria .flag:after{content:'';position:absolute;z-index:1;width:100%;height:33%;background-color:#ED2939}.austria .flag:before{top:0;-webkit-animation:fadeInUp 1s ease both 0.75s;animation:fadeInUp 1s ease both 0.75s}.austria .flag:after{bottom:-1px;-webkit-animation:fadeInDown 1s ease both 0.75s;animation:fadeInDown 1s ease both 0.75s}.bulgaria{background-color:#ffabc1}.bulgaria .flag{background-color:#fff;-webkit-animation:heightFlag 1s ease both;animation:heightFlag 1s ease both}.bulgaria .flag:before,.bulgaria .flag:after{content:'';position:absolute;height:33%;left:0;width:100%}.bulgaria .flag:before{background-color:#00966E;bottom:32%;-webkit-animation:fadeInDown 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) both;animation:fadeInDown 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) both}.bulgaria .flag:after{background-color:#D62612;bottom:-1px;-webkit-animation:fadeInUp 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.25s both;animation:fadeInUp 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.25s both}.brazil .flag{box-shadow:0 295px 0 0 #FEDF00 inset;-webkit-animation:enterBrazil 1s ease both 0.5s;animation:enterBrazil 1s ease both 0.5s}.brazil .flag:before{content:'';width:100%;height:100%;position:absolute;z-index:1;background:-webkit-linear-gradient(30deg, #009B3A 30%, transparent 30%),-webkit-linear-gradient(-30deg, #009B3A 30%, transparent 30%),-webkit-linear-gradient(210deg, #009B3A 30%, transparent 30%),-webkit-linear-gradient(-210deg, #009B3A 30%, transparent 30%);background:-webkit-linear-gradient(60deg, #009B3A 30%, transparent 30%),-webkit-linear-gradient(120deg, #009B3A 30%, transparent 30%),-webkit-linear-gradient(240deg, #009B3A 30%, transparent 30%),-webkit-linear-gradient(300deg, #009B3A 30%, transparent 30%);background:linear-gradient(30deg, #009B3A 30%, transparent 30%),linear-gradient(-30deg, #009B3A 30%, transparent 30%),linear-gradient(210deg, #009B3A 30%, transparent 30%),linear-gradient(-210deg, #009B3A 30%, transparent 30%);-webkit-animation:boingInUp 1s ease both;animation:boingInUp 1s ease both}.brazil .flag>div{position:absolute;background:-webkit-radial-gradient(circle at 0 310px, transparent 75%, #fff 72%, #fff 78%, transparent 79%) #002776;background:-webkit-radial-gradient(0 310px circle, transparent 75%, #fff 72%, #fff 78%, transparent 79%) #002776;background:radial-gradient(circle at 0 310px, transparent 75%, #fff 72%, #fff 78%, transparent 79%) #002776;border-radius:50%;left:50%;top:50%;margin:-75px 0 0 -75px;width:150px;height:150px;-webkit-animation:fadeInUp 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.75s both;animation:fadeInUp 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.75s both}.brazil .star{position:absolute;z-index:1;left:50%;top:50%}.brazil .star:after{content:"\2605";font-size:10px;line-height:10px;color:#fff}.brazil .star.small:after{font-size:6px;line-height:6px}.brazil .star-01{left:4%;top:33%;-webkit-animation:fadeIn 0.5s ease both 1.75s;animation:fadeIn 0.5s ease both 1.75s}.brazil .star-02{left:9%;top:53%;-webkit-animation:fadeIn 0.5s ease both 1.8s;animation:fadeIn 0.5s ease both 1.8s}.brazil .star-03{left:3%;top:58%;-webkit-animation:fadeIn 0.5s ease both 1.85s;animation:fadeIn 0.5s ease both 1.85s}.brazil .star-04{left:28%;top:43%;-webkit-animation:fadeIn 0.5s ease both 1.9s;animation:fadeIn 0.5s ease both 1.9s}.brazil .star-05{left:21%;top:58%;-webkit-animation:fadeIn 0.5s ease both 1.95s;animation:fadeIn 0.5s ease both 1.95s}.brazil .star-06{left:19%;top:63%;-webkit-animation:fadeIn 0.5s ease both 2s;animation:fadeIn 0.5s ease both 2s}.brazil .star-07{left:3%;top:58%;-webkit-animation:fadeIn 0.5s ease both 2.05s;animation:fadeIn 0.5s ease both 2.05s}.brazil .star-08{left:48%;top:63%;-webkit-animation:fadeIn 0.5s ease both 2.1s;animation:fadeIn 0.5s ease both 2.1s}.brazil .star-09{left:46%;top:57%;-webkit-animation:fadeIn 0.5s ease both 2.15s;animation:fadeIn 0.5s ease both 2.15s}.brazil .star-10{left:42%;top:53%;-webkit-animation:fadeIn 0.5s ease both 2.2s;animation:fadeIn 0.5s ease both 2.2s}.brazil .star-11{left:47%;top:49%;-webkit-animation:fadeIn 0.5s ease both 2.25s;animation:fadeIn 0.5s ease both 2.25s}.brazil .star-12{left:55%;top:54%;-webkit-animation:fadeIn 0.5s ease both 2.3s;animation:fadeIn 0.5s ease both 2.3s}.brazil .star-13{left:60%;top:68%;-webkit-animation:fadeIn 0.5s ease both 2.35s;animation:fadeIn 0.5s ease both 2.35s}.brazil .star-14{left:68%;top:70%;-webkit-animation:fadeIn 0.5s ease both 2.4s;animation:fadeIn 0.5s ease both 2.4s}.brazil .star-15{left:63%;top:74%;-webkit-animation:fadeIn 0.5s ease both 2.45s;animation:fadeIn 0.5s ease both 2.45s}.brazil .star-16{left:74%;top:73%;-webkit-animation:fadeIn 0.5s ease both 2.5s;animation:fadeIn 0.5s ease both 2.5s}.brazil .star-17{left:74%;top:78%;-webkit-animation:fadeIn 0.5s ease both 2.55s;animation:fadeIn 0.5s ease both 2.55s}.brazil .star-18{left:73%;top:68%;-webkit-animation:fadeIn 0.5s ease both 2.6s;animation:fadeIn 0.5s ease both 2.6s}.brazil .star-19{left:79%;top:70%;-webkit-animation:fadeIn 0.5s ease both 2.65s;animation:fadeIn 0.5s ease both 2.65s}.brazil .star-20{left:83%;top:67%;-webkit-animation:fadeIn 0.5s ease both 2.7s;animation:fadeIn 0.5s ease both 2.7s}.brazil .star-21{left:87%;top:63%;-webkit-animation:fadeIn 0.5s ease both 2.75s;animation:fadeIn 0.5s ease both 2.75s}.brazil .star-22{left:84%;top:58%;-webkit-animation:fadeIn 0.5s ease both 2.8s;animation:fadeIn 0.5s ease both 2.8s}.brazil .star-23{left:92%;top:59%;-webkit-animation:fadeIn 0.5s ease both 2.85s;animation:fadeIn 0.5s ease both 2.85s}.brazil .star-24{left:65%;top:25%;-webkit-animation:fadeIn 0.5s ease both 2.9s;animation:fadeIn 0.5s ease both 2.9s}.brazil .star-25{left:63%;top:42%;-webkit-animation:fadeIn 0.5s ease both 2.95s;animation:fadeIn 0.5s ease both 2.95s}.brazil .star-26{left:27%;top:67%;-webkit-animation:fadeIn 0.5s ease both 3s;animation:fadeIn 0.5s ease both 3s}.brazil .star-27{left:15%;top:50%;-webkit-animation:fadeIn 0.5s ease both 3.05s;animation:fadeIn 0.5s ease both 3.05s}.brazil .star-28{left:49%;top:80%;-webkit-animation:fadeIn 0.5s ease both 3.15s;animation:fadeIn 0.5s ease both 3.15s}.cameroon{background-color:#abdef5}.cameroon .flag{background-color:#CE1126;-webkit-animation:fadeInUp 0.5s ease-in both;animation:fadeInUp 0.5s ease-in both}.cameroon .flag:before,.cameroon .flag:after{content:'';position:absolute;height:100%;width:33%;top:0}.cameroon .flag:before{background-color:#007A5E;left:0;-webkit-animation:fadeInRight 1s ease 0.5s both;animation:fadeInRight 1s ease 0.5s both}.cameroon .flag:after{right:0;background-color:#FCD116;-webkit-animation:fadeInLeft 1s ease 0.5s both;animation:fadeInLeft 1s ease 0.5s both}.cameroon .flag>div:after{color:#FCD116;position:absolute;content:"\2605";font-size:100px;height:100px;line-height:1;left:50%;top:50%;margin:-50px 0 0 -50px;-webkit-animation:zoomIn 0.75s ease-out 0.75s both;animation:zoomIn 0.75s ease-out 0.75s both}.chile{background:#ffc659}.chile .flag{overflow:visible;background-color:#fff;-webkit-animation:heightFlag 1s ease both;animation:heightFlag 1s ease both}.chile .flag:after,.chile .flag:before{position:absolute;left:0}.chile .flag:before{width:33%;height:50%;background-color:#0039A6;top:0;content:"\2605";color:#fff;font-size:97px;line-height:136px;text-align:center;-webkit-animation:rotateInUpRight 0.75s ease 0.5s both;animation:rotateInUpRight 0.75s ease 0.5s both}.chile .flag:after{content:'';width:100%;height:50%;bottom:0;background-color:#D52B1E;-webkit-animation:fadeInUp 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.75s both;animation:fadeInUp 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.75s both}.china{background-color:#99cea8}.china .flag{background-color:#DE2910;-webkit-animation:rotateInUpRight 1s ease both;animation:rotateInUpRight 1s ease both}.china .flag:before,.china .flag:after,.china .flag>div:before,.china .flag>div:after,.china .flag>div>div:before{content:"\2605";color:#FFDE00;position:absolute;font-size:38px}.china .flag:before{font-size:105px;line-height:105px;left:7%;top:15px;-webkit-animation:fadeInDown 0.5s ease 1.5s both;animation:fadeInDown 0.5s ease 1.5s both}.china .flag:after{left:30%;top:0;-webkit-transform:rotate(22deg);transform:rotate(22deg);-webkit-animation:fadeInLeft 0.5s ease 0.5s both;animation:fadeInLeft 0.5s ease 0.5s both}.china .flag>div:before{left:36%;top:10%;-webkit-transform:rotate(-21deg);transform:rotate(-21deg);-webkit-animation:fadeInLeft 0.5s ease 0.75s both;animation:fadeInLeft 0.5s ease 0.75s both}.china .flag>div:after{left:36.5%;top:25%;-webkit-animation:fadeInLeft 0.5s ease 1s both;animation:fadeInLeft 0.5s ease 1s both}.china .flag>div>div:before{left:30%;top:35%;-webkit-transform:rotate(23deg);transform:rotate(23deg);-webkit-animation:fadeInLeft 0.5s ease 1.25s both;animation:fadeInLeft 0.5s ease 1.25s both}.colombia{background-color:#ccbba0}.colombia .flag{background-color:#FCD116;-webkit-animation:heightFlag 1s ease both;animation:heightFlag 1s ease both}.colombia .flag:before,.colombia .flag:after{content:'';position:absolute;left:0;width:100%}.colombia .flag:before{background:#003893;top:50%;height:25%;z-index:1;-webkit-animation:fadeInUp 0.75s ease-out 0.75s both;animation:fadeInUp 0.75s ease-out 0.75s both}.colombia .flag:after{background:#CE1126;bottom:0;height:25%;-webkit-animation:fadeInDown 0.75s ease-out 0.95s both;animation:fadeInDown 0.75s ease-out 0.95s both}.cuba{background-color:#ffd570}.cuba .flag{background-color:#fff;background:-webkit-linear-gradient(top, #002a8f 50%,#fff 50%) #fff;background:linear-gradient(to bottom, #002a8f 50%,#fff 50%) #fff;background-size:100% 40%;-webkit-animation:zoomIn 1s ease both;animation:zoomIn 1s ease both}.cuba .flag:before{position:absolute;border-bottom:155px solid transparent;border-left:190px solid #CF142B;border-top:145px solid transparent;content:'';height:0;width:0;z-index:0;-webkit-animation:fadeInLeft 0.75s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.75s both;animation:fadeInLeft 0.75s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.75s both}.cuba .flag:after{position:absolute;left:4%;top:50%;height:110px;margin-top:-55px;content:"\2605";color:#fff;font-size:110px;line-height:110px;-webkit-animation:fadeInDown 0.75s cubic-bezier(0.175, 0.885, 0.32, 1.275) 1s both;animation:fadeInDown 0.75s cubic-bezier(0.175, 0.885, 0.32, 1.275) 1s both}.denmark{background-color:#afeeee}.denmark .flag{background-color:#C60C30;-webkit-animation:zoomIn 1s ease both;animation:zoomIn 1s ease both}.denmark .flag:before,.denmark .flag:after{content:'';position:absolute;background-color:#fff}.denmark .flag:before{height:44px;top:50%;width:100%;margin-top:-22px;-webkit-animation:fadeInLeft 0.75s cubic-bezier(0.68, -0.55, 0.265, 1.55) both 0.75s;animation:fadeInLeft 0.75s cubic-bezier(0.68, -0.55, 0.265, 1.55) both 0.75s}.denmark .flag:after{height:101%;width:44px;left:38%;margin-left:-22px;-webkit-animation:fadeInUp 0.75s cubic-bezier(0.68, -0.55, 0.265, 1.55) both 0.5s;animation:fadeInUp 0.75s cubic-bezier(0.68, -0.55, 0.265, 1.55) both 0.5s}.france{background-color:#b1e6c1}.france .flag{background-color:#fff;-webkit-animation:widthFlag 1s ease both;animation:widthFlag 1s ease both}.france .flag:before,.france .flag:after{content:'';position:absolute;top:0;height:100%;width:33%}.france .flag:before{right:0;background-color:#ED2939;-webkit-animation:fadeInUp 0.75s ease 0.75s both;animation:fadeInUp 0.75s ease 0.75s both}.france .flag:after{left:0;background-color:#002395;-webkit-animation:fadeInDown 0.75s ease 0.75s both;animation:fadeInDown 0.75s ease 0.75s both}.finland{background-color:#008b8b}.finland .flag{background-color:#fff;-webkit-animation:bounceIn 1s ease both;animation:bounceIn 1s ease both}.finland .flag:before,.finland .flag:after{content:'';position:absolute;background-color:#003580}.finland .flag:before{height:76px;top:50%;width:100%;margin-top:-38px;-webkit-animation:rotateIn 1s ease both 0.5s;animation:rotateIn 1s ease both 0.5s}.finland .flag:after{height:101%;width:73px;left:28%;-webkit-animation:rotateIn 1s ease both 0.25s;animation:rotateIn 1s ease both 0.25s}.germany{background-color:#84c3c9}.germany .flag>div,.germany .flag:before,.germany .flag:after{position:absolute;width:100%;height:33%;content:''}.germany .flag>div{top:0;height:34%;background-color:#000;-webkit-animation:fadeInRight 1s ease both;animation:fadeInRight 1s ease both}.germany .flag:before{top:34%;background-color:#DD0000;-webkit-animation:fadeInLeft 1s ease both;animation:fadeInLeft 1s ease both}.germany .flag:after{top:67%;background-color:#FFCE00;-webkit-animation:fadeInRight 1s ease both;animation:fadeInRight 1s ease both}.ghana{background-color:#9c98ef}.ghana .flag{background-color:#fcd116;-webkit-animation:widthFlag 1s ease both;animation:widthFlag 1s ease both}.ghana .flag:before,.ghana .flag:after{content:'';position:absolute;right:0;width:100%;height:33%}.ghana .flag:before{top:0;background-color:#ce1126;-webkit-animation:fadeInRight 1s ease both 0.5s;animation:fadeInRight 1s ease both 0.5s}.ghana .flag:after{bottom:-1px;background-color:#006b3f;-webkit-animation:fadeInRight 1s ease both 0.5s;animation:fadeInRight 1s ease both 0.5s}.ghana .flag>div:before{content:"\2605";position:absolute;left:50%;top:50%;width:110px;height:130px;line-height:135px;font-size:125px;margin:-67px 0 0 -56px;color:#000;-webkit-animation:rotateIn 0.5s ease both 1s;animation:rotateIn 0.5s ease both 1s}.greece{background-color:#f6d2af}.greece .flag{background:-webkit-linear-gradient(top, #0D5EAF 50%,#fff 50%) #0D5EAF;background:linear-gradient(to bottom, #0D5EAF 50%,#fff 50%) #0D5EAF;background-size:100% 66px;-webkit-animation:fadeInLeft 0.66s ease both;animation:fadeInLeft 0.66s ease both}.greece .flag>div{position:absolute;left:0;top:0;width:37%;height:56%;background-color:#0D5EAF;-webkit-animation:fadeInDown 0.75s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s both;animation:fadeInDown 0.75s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s both}.greece .flag>div:before,.greece .flag>div:after{content:'';position:absolute;background-color:#fff}.greece .flag>div:before{height:32px;top:50%;margin-top:-16px;width:100%;-webkit-animation:fadeInLeft 1s ease both 1s;animation:fadeInLeft 1s ease both 1s}.greece .flag>div:after{width:32px;left:50%;margin-left:-16px;height:100%;-webkit-animation:fadeInDown 1s ease both 1s;animation:fadeInDown 1s ease both 1s}.honduras{background-color:#ddd}.honduras .flag{background:-webkit-linear-gradient(top, #0073CF 33%,#fff 33%,#fff 66%,#0073CF 66%) #fff;background:linear-gradient(to bottom, #0073CF 33%,#fff 33%,#fff 66%,#0073CF 66%) #fff;-webkit-animation:widthFlag 1s ease both;animation:widthFlag 1s ease both}.honduras .flag:before,.honduras .flag div:after,.honduras .flag div:before{content:"\2605";position:absolute;font-size:33px;line-height:33px;color:#0073CF}.honduras .flag:before{left:50%;top:50%;margin:-19px 0 0 -16px;width:33px;height:33px;-webkit-animation:fadeIn 0.75s ease 1.1s both;animation:fadeIn 0.75s ease 1.1s both}.honduras .flag>div:before{left:33%;top:34%;-webkit-animation:fadeIn 0.75s ease 1.4s both;animation:fadeIn 0.75s ease 1.4s both}.honduras .flag>div:after{left:33%;top:52%;-webkit-animation:fadeIn 0.75s ease 1.25s both;animation:fadeIn 0.75s ease 1.25s both}.honduras .flag>div+div:before{right:33%;left:auto;top:34%;-webkit-animation:fadeIn 0.75s ease 0.95s both;animation:fadeIn 0.75s ease 0.95s both}.honduras .flag>div+div:after{right:33%;left:auto;top:52%;-webkit-animation:fadeIn 0.75s ease 0.8s both;animation:fadeIn 0.75s ease 0.8s both}.ireland{background-color:#0d5eaf}.ireland .flag{background-color:#fff;-webkit-animation:heightFlag 1s ease both;animation:heightFlag 1s ease both}.ireland .flag:before,.ireland .flag:after{content:'';position:absolute;top:0;height:101%;width:33%}.ireland .flag:before{right:0;background-color:#FF7900;-webkit-animation:fadeInUp 0.75s ease 0.75s both;animation:fadeInUp 0.75s ease 0.75s both}.ireland .flag:after{left:0;background-color:#009B48;-webkit-animation:fadeInDown 0.75s ease 0.75s both;animation:fadeInDown 0.75s ease 0.75s both}.israel{background-color:#fce79c}.israel .flag{background:-webkit-linear-gradient(top, #fff 10%,#0038B8 10%,#0038B8 25%,#fff 25%,#fff 75%,#0038B8 75%,#0038B8 90%,#fff 90%) #fff;background:linear-gradient(to bottom, #fff 10%,#0038B8 10%,#0038B8 25%,#fff 25%,#fff 75%,#0038B8 75%,#0038B8 90%,#fff 90%) #fff;-webkit-animation:widthFlag 1s ease both;animation:widthFlag 1s ease both}.israel .star{left:37%;top:29%;width:0;height:0;border-left:60px solid transparent;border-right:60px solid transparent;border-bottom:93px solid #0038B8;position:absolute;-webkit-animation:fadeInRight 0.75s ease 0.25s both;animation:fadeInRight 0.75s ease 0.25s both}.israel .star:after{width:0;height:0;border-left:60px solid transparent;border-right:60px solid transparent;border-top:93px solid #0038B8;position:absolute;content:'';top:30px;left:-62px}.israel .center{height:65px;left:-51px;top:30px;position:absolute;width:98px;z-index:1;-webkit-transform:rotate(90deg) scale(0.45);transform:rotate(90deg) scale(0.45);background-color:#fff}.israel .center:before{content:"";position:absolute;top:-25px;left:0;width:0;height:0;border-left:50px solid transparent;border-right:50px solid transparent;border-bottom:27px solid #fff}.israel .center:after{content:"";position:absolute;bottom:-25px;left:0;width:0;height:0;border-left:50px solid transparent;border-right:50px solid transparent;border-top:27px solid #fff}.israel .triangle,.israel .triangle:after,.israel .triangle:before{position:absolute;width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:13px solid #fff;z-index:2}.israel .triangle:after,.israel .triangle:before{content:''}.israel .triangle-01{left:26px;top:71px}.israel .triangle-01:after{left:-42px;top:23px;-webkit-transform:rotate(180deg);transform:rotate(180deg)}.israel .triangle-01:before{left:-76px;top:1px}.israel .triangle-02{left:26px;top:40px;-webkit-transform:rotate(180deg);transform:rotate(180deg)}.israel .triangle-02:after{left:62px;top:0}.israel .triangle-02:before{left:27px;top:23px;-webkit-transform:rotate(180deg);transform:rotate(180deg)}.italy{background-color:#afc8dc}.italy .flag{background-color:#fff;-webkit-animation:zoomIn 1s ease both;animation:zoomIn 1s ease both}.italy .flag:before,.italy .flag:after{content:'';position:absolute;top:0;height:101%;width:33%}.italy .flag:before{right:0;background-color:#CE2B37;-webkit-animation:zoomInDown 0.75s ease 0.15s both;animation:zoomInDown 0.75s ease 0.15s both}.italy .flag:after{left:0;background-color:#009246;-webkit-animation:zoomInDown 0.75s ease 0.15s both;animation:zoomInDown 0.75s ease 0.15s both}.japan{background-color:#4343bb}.japan .flag{background-color:#fff;-webkit-animation:fadeIn 1s ease both;animation:fadeIn 1s ease both}.japan .flag:before{content:'';position:absolute;left:50%;top:50%;margin:-20% 0 0 -20%;width:40%;height:60%;background-color:red;border-radius:50%;-webkit-animation:bounceIn 1s ease 0.5s both;animation:bounceIn 1s ease 0.5s both}.netherlands{background-color:#d8ba81}.netherlands .flag{background-color:#AE1C28;-webkit-animation:width 1s ease both;animation:width 1s ease both}.netherlands .flag:before,.netherlands .flag:after{content:'';position:absolute;height:33%;left:0;width:100%}.netherlands .flag:before{background-color:#fff;bottom:32%;-webkit-animation:fadeInLeft 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) both;animation:fadeInLeft 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) both}.netherlands .flag:after{background-color:#21468B;bottom:-1px;-webkit-animation:fadeInRight 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.25s both;animation:fadeInRight 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.25s both}.nigeria{background-color:#f6d35a}.nigeria .flag{background-color:#fff;-webkit-animation:widthFlag 1s ease both;animation:widthFlag 1s ease both}.nigeria .flag:before,.nigeria .flag:after{content:'';position:absolute;top:0;height:101%;width:33%;background-color:#008751}.nigeria .flag:before{right:0;-webkit-animation:fadeInUp 0.75s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s both;animation:fadeInUp 0.75s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s both}.nigeria .flag:after{left:0;-webkit-animation:fadeInDown 0.75s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s both;animation:fadeInDown 0.75s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s both}.norway{background-color:#a0e2a9}.norway .flag{background:-webkit-linear-gradient(top, #ef2b2d 36%,#fff 36%,#fff 64%,#ef2b2d 64%) #ef2b2d;background:linear-gradient(to bottom, #ef2b2d 36%,#fff 36%,#fff 64%,#ef2b2d 64%) #ef2b2d;-webkit-animation:fadeInRight 1s ease both;animation:fadeInRight 1s ease both}.norway .flag:before,.norway .flag:after{content:'';position:absolute;background-color:#002868}.norway .flag:before{height:38px;top:50%;width:100%;margin-top:-19px;-webkit-animation:fadeInLeft 0.75s ease both 0.25s;animation:fadeInLeft 0.75s ease both 0.25s;z-index:1}.norway .flag:after{height:101%;width:39px;left:36%;margin-left:-19px;box-shadow:20px 0px 0px 0px #fff,-20px 0px 0px 0px #fff;-webkit-animation:fadeInDown 0.75s ease both 0.75s;animation:fadeInDown 0.75s ease both 0.75s}.peru{background-color:#84c3c9}.peru .flag{background-color:#fff;-webkit-animation:rotateIn 1s ease both;animation:rotateIn 1s ease both}.peru .flag:before,.peru .flag:after{content:'';position:absolute;top:0;height:101%;width:33%;background-color:#D91023}.peru .flag:before{right:0;-webkit-animation:zoomIn 0.75s ease 0.75s both;animation:zoomIn 0.75s ease 0.75s both}.peru .flag:after{left:0;-webkit-animation:zoomIn 0.75s ease 0.75s both;animation:zoomIn 0.75s ease 0.75s both}.south-africa{background-color:#d2b48c}.south-africa .flag{background-color:#007A4D;-webkit-animation:heightFlag 1s ease both;animation:heightFlag 1s ease both}.south-africa .flag:before,.south-africa .flag:after{content:'';position:absolute;width:87%;height:33%}.south-africa .flag:before{top:0;right:-102px;background-color:#DE3831;box-shadow:-26px 9px 0 10px #fff;-webkit-transform:skewx(57deg);transform:skewx(57deg);-webkit-animation:enterSouthAfrica 1.25s ease 0.5s both;animation:enterSouthAfrica 1.25s ease 0.5s both}.south-africa .flag:after{bottom:0;right:-102px;background-color:#002395;box-shadow:-26px -9px 0 10px #fff;-webkit-transform:skewx(-57deg);transform:skewx(-57deg);-webkit-animation:enterSouthAfrica 1.25s ease both 0.75s;animation:enterSouthAfrica 1.25s ease both 0.75s}.south-africa .flag>div{border-bottom:110px solid transparent;border-left:170px solid #ffb612;border-top:110px solid transparent;content:'';height:0;margin-top:37px;position:relative;width:0;z-index:0;-webkit-animation:fadeInLeft 1s ease both 0.5s;animation:fadeInLeft 1s ease both 0.5s}.south-africa .flag>div:after{content:'';border-bottom:115px solid transparent;border-left:175px solid #000;border-top:115px solid transparent;height:0;width:0;position:absolute;left:-205px;top:-115px;z-index:1;-webkit-animation:fadeInLeft 1s ease both 0.75s;animation:fadeInLeft 1s ease both 0.75s}.sweden{background-color:#efbea1}.sweden .flag{background-color:#006AA7;-webkit-animation:widthFlag 1s ease both;animation:widthFlag 1s ease both}.sweden .flag:before,.sweden .flag:after{content:'';position:absolute;background-color:#FECC00}.sweden .flag:before{height:56px;top:50%;width:100%;margin-top:-28px;-webkit-animation:fadeInRight 0.75s ease both 0.75s;animation:fadeInRight 0.75s ease both 0.75s}.sweden .flag:after{height:101%;width:56px;left:38%;margin-left:-32px;-webkit-animation:fadeInDown 0.75s ease both 0.5s;animation:fadeInDown 0.75s ease both 0.5s}.tunisia{background-color:#d3dfdf}.tunisia .flag{background-color:#E30A17;background:-webkit-radial-gradient(center, ellipse cover, #fff 50%, #E30A17 50%, #E30A17 100%) #E30a17;background:-webkit-radial-gradient(center ellipse, #fff 50%, #E30A17 50%, #E30A17 100%) #E30a17;background:radial-gradient(ellipse at center, #fff 50%, #E30A17 50%, #E30A17 100%) #E30a17;background-size:47% 71%;background-repeat:no-repeat;background-position:center center;-webkit-animation:flipInX 1.5s ease 0.25s both;animation:flipInX 1.5s ease 0.25s both}.tunisia .flag:before{border-radius:50%;box-shadow:-13px 0 0 12px #E30A17;content:"";height:30%;left:43%;position:absolute;top:35%;width:20%;-webkit-animation:fadeInRight 0.75s cubic-bezier(0.175, 0.885, 0.32, 1.275) both 1s;animation:fadeInRight 0.75s cubic-bezier(0.175, 0.885, 0.32, 1.275) both 1s}.tunisia .flag:after{content:"\2605";color:#E30A17;position:absolute;font-size:85px;line-height:85px;left:45%;top:35%;-webkit-transform:rotate(-17deg);transform:rotate(-17deg);-webkit-animation:fadeInLeft 1s ease both 1.25s;animation:fadeInLeft 1s ease both 1.25s}.turkey{background-color:#afeeee}.turkey .flag{background-color:#E30A17;-webkit-animation:fadeIn 1s ease both;animation:fadeIn 1s ease both}.turkey .flag:before{border-radius:50%;box-shadow:-20px 0 0 17px #fff;content:"";height:40%;left:27%;position:absolute;top:30%;width:26%;-webkit-animation:fadeInDown 0.75s cubic-bezier(0.175, 0.885, 0.32, 1.275) both 1s;animation:fadeInDown 0.75s cubic-bezier(0.175, 0.885, 0.32, 1.275) both 1s}.turkey .flag:after{content:"\2605";color:#fff;position:absolute;font-size:92px;line-height:92px;height:92px;margin-top:-48px;left:48%;top:50%;-webkit-transform:rotate(-21deg);transform:rotate(-21deg);-webkit-animation:rotateIn 1s ease both 1.25s;animation:rotateIn 1s ease both 1.25s}.usa{background-color:#88ddd2}.usa .flag{background:-webkit-linear-gradient(top, #B22234 50%,#fff 50%) #B22234;background:linear-gradient(to bottom, #B22234 50%,#fff 50%) #B22234;background-size:100% 46px;-webkit-animation:fadeInRight 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;animation:fadeInRight 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) both}.usa .flag:before{content:'';background-color:#3C3B6E;width:40%;height:54.5%;position:absolute;left:0;top:0;-webkit-animation:fadeInDown 0.75s cubic-bezier(0.175, 0.885, 0.32, 1.275) both 0.5s;animation:fadeInDown 0.75s cubic-bezier(0.175, 0.885, 0.32, 1.275) both 0.5s}.usa .flag .star:before,.usa .flag .star:after{content:"\2605";font-size:19px;color:#fff;position:absolute}.usa .star-01:before{left:2%;top:0}.usa .star-01:after{left:2%;top:11%}.usa .star-02:before{left:2%;top:22%}.usa .star-02:after{left:2%;top:33%}.usa .star-03:before{left:2%;top:44%}.usa .star-03:after{left:5%;top:5%}.usa .star-04:before{left:5%;top:16%}.usa .star-04:after{left:5%;top:27%}.usa .star-05:before{left:5%;top:38%}.usa .star-05:after{left:8.5%;top:0}.usa .star-06:before{left:8.5%;top:11%}.usa .star-06:after{left:8.5%;top:22%}.usa .star-07:before{left:8.5%;top:33%}.usa .star-07:after{left:8.5%;top:44%}.usa .star-08:before{left:12%;top:5%}.usa .star-08:after{left:12%;top:16%}.usa .star-09:before{left:12%;top:27%}.usa .star-09:after{left:12%;top:38%}.usa .star-10:before{left:15%;top:0}.usa .star-10:after{left:15%;top:11%}.usa .star-11:before{left:15%;top:22%}.usa .star-11:after{left:15%;top:33%}.usa .star-12:before{left:15%;top:44%}.usa .star-12:after{left:18%;top:5%}.usa .star-13:before{left:18%;top:16%}.usa .star-13:after{left:18%;top:27%}.usa .star-14:before{left:18%;top:38%}.usa .star-14:after{left:21.5%;top:0}.usa .star-15:before{left:21.5%;top:11%}.usa .star-15:after{left:21.5%;top:22%}.usa .star-16:before{left:21.5%;top:33%}.usa .star-16:after{left:21.5%;top:44%}.usa .star-17:before{left:25%;top:5%}.usa .star-17:after{left:25%;top:16%}.usa .star-18:before{left:25%;top:27%}.usa .star-18:after{left:25%;top:38%}.usa .star-19:before{left:28%;top:0}.usa .star-19:after{left:28%;top:11%}.usa .star-20:before{left:28%;top:22%}.usa .star-20:after{left:28%;top:33%}.usa .star-21:before{left:28%;top:44%}.usa .star-21:after{left:31.5%;top:5%}.usa .star-22:before{left:31.5%;top:16%}.usa .star-22:after{left:31.5%;top:27%}.usa .star-23:before{left:31.5%;top:38%}.usa .star-23:after{left:34.5%;top:0}.usa .star-24:before{left:34.5%;top:11%}.usa .star-24:after{left:34.5%;top:22%}.usa .star-25:before{left:34.5%;top:33%}.usa .star-25:after{left:34.5%;top:44%}.usa .star-01:before{-webkit-animation:fadeIn 1s ease both 1s;animation:fadeIn 1s ease both 1s}.usa .star-03:after{-webkit-animation:fadeIn 1s ease both 1.05s;animation:fadeIn 1s ease both 1.05s}.usa .star-06:before{-webkit-animation:fadeIn 1s ease both 1.1s;animation:fadeIn 1s ease both 1.1s}.usa .star-08:after{-webkit-animation:fadeIn 1s ease both 1.15s;animation:fadeIn 1s ease both 1.15s}.usa .star-11:before{-webkit-animation:fadeIn 1s ease both 1.2s;animation:fadeIn 1s ease both 1.2s}.usa .star-13:after{-webkit-animation:fadeIn 1s ease both 1.25s;animation:fadeIn 1s ease both 1.25s}.usa .star-16:before{-webkit-animation:fadeIn 1s ease both 1.3s;animation:fadeIn 1s ease both 1.3s}.usa .star-18:after{-webkit-animation:fadeIn 1s ease both 1.35s;animation:fadeIn 1s ease both 1.35s}.usa .star-21:before{-webkit-animation:fadeIn 1s ease both 1.4s;animation:fadeIn 1s ease both 1.4s}.usa .star-16:after{-webkit-animation:fadeIn 1s ease both 1.45s;animation:fadeIn 1s ease both 1.45s}.usa .star-14:before{-webkit-animation:fadeIn 1s ease both 1.5s;animation:fadeIn 1s ease both 1.5s}.usa .star-11:after{-webkit-animation:fadeIn 1s ease both 1.55s;animation:fadeIn 1s ease both 1.55s}.usa .star-09:before{-webkit-animation:fadeIn 1s ease both 1.6s;animation:fadeIn 1s ease both 1.6s}.usa .star-06:after{-webkit-animation:fadeIn 1s ease both 1.65s;animation:fadeIn 1s ease both 1.65s}.usa .star-04:before{-webkit-animation:fadeIn 1s ease both 1.7s;animation:fadeIn 1s ease both 1.7s}.usa .star-01:after{-webkit-animation:fadeIn 1s ease both 1.75s;animation:fadeIn 1s ease both 1.75s}.usa .star-02:before{-webkit-animation:fadeIn 1s ease both 1.8s;animation:fadeIn 1s ease both 1.8s}.usa .star-04:after{-webkit-animation:fadeIn 1s ease both 1.85s;animation:fadeIn 1s ease both 1.85s}.usa .star-07:before{-webkit-animation:fadeIn 1s ease both 1.9s;animation:fadeIn 1s ease both 1.9s}.usa .star-09:after{-webkit-animation:fadeIn 1s ease both 1.95s;animation:fadeIn 1s ease both 1.95s}.usa .star-12:before{-webkit-animation:fadeIn 1s ease both 2s;animation:fadeIn 1s ease both 2s}.usa .star-07:after{-webkit-animation:fadeIn 1s ease both 2.05s;animation:fadeIn 1s ease both 2.05s}.usa .star-05:before{-webkit-animation:fadeIn 1s ease both 2.1s;animation:fadeIn 1s ease both 2.1s}.usa .star-02:after{-webkit-animation:fadeIn 1s ease both 2.15s;animation:fadeIn 1s ease both 2.15s}.usa .star-03:before{-webkit-animation:fadeIn 1s ease both 2.2s;animation:fadeIn 1s ease both 2.2s}.usa .star-25:after{-webkit-animation:fadeIn 1s ease both 1s;animation:fadeIn 1s ease both 1s}.usa .star-23:before{-webkit-animation:fadeIn 1s ease both 1.05s;animation:fadeIn 1s ease both 1.05s}.usa .star-20:after{-webkit-animation:fadeIn 1s ease both 1.1s;animation:fadeIn 1s ease both 1.1s}.usa .star-18:before{-webkit-animation:fadeIn 1s ease both 1.15s;animation:fadeIn 1s ease both 1.15s}.usa .star-15:after{-webkit-animation:fadeIn 1s ease both 1.2s;animation:fadeIn 1s ease both 1.2s}.usa .star-13:before{-webkit-animation:fadeIn 1s ease both 1.25s;animation:fadeIn 1s ease both 1.25s}.usa .star-10:after{-webkit-animation:fadeIn 1s ease both 1.3s;animation:fadeIn 1s ease both 1.3s}.usa .star-08:before{-webkit-animation:fadeIn 1s ease both 1.35s;animation:fadeIn 1s ease both 1.35s}.usa .star-05:after{-webkit-animation:fadeIn 1s ease both 1.4s;animation:fadeIn 1s ease both 1.4s}.usa .star-10:before{-webkit-animation:fadeIn 1s ease both 1.45s;animation:fadeIn 1s ease both 1.45s}.usa .star-12:after{-webkit-animation:fadeIn 1s ease both 1.5s;animation:fadeIn 1s ease both 1.5s}.usa .star-15:before{-webkit-animation:fadeIn 1s ease both 1.55s;animation:fadeIn 1s ease both 1.55s}.usa .star-17:after{-webkit-animation:fadeIn 1s ease both 1.6s;animation:fadeIn 1s ease both 1.6s}.usa .star-20:before{-webkit-animation:fadeIn 1s ease both 1.65s;animation:fadeIn 1s ease both 1.65s}.usa .star-22:after{-webkit-animation:fadeIn 1s ease both 1.7s;animation:fadeIn 1s ease both 1.7s}.usa .star-25:before{-webkit-animation:fadeIn 1s ease both 1.75s;animation:fadeIn 1s ease both 1.75s}.usa .star-24:after{-webkit-animation:fadeIn 1s ease both 1.8s;animation:fadeIn 1s ease both 1.8s}.usa .star-22:before{-webkit-animation:fadeIn 1s ease both 1.85s;animation:fadeIn 1s ease both 1.85s}.usa .star-19:after{-webkit-animation:fadeIn 1s ease both 1.9s;animation:fadeIn 1s ease both 1.9s}.usa .star-17:before{-webkit-animation:fadeIn 1s ease both 1.95s;animation:fadeIn 1s ease both 1.95s}.usa .star-14:after{-webkit-animation:fadeIn 1s ease both 2s;animation:fadeIn 1s ease both 2s}.usa .star-19:before{-webkit-animation:fadeIn 1s ease both 2.05s;animation:fadeIn 1s ease both 2.05s}.usa .star-21:after{-webkit-animation:fadeIn 1s ease both 2.1s;animation:fadeIn 1s ease both 2.1s}.usa .star-24:before{-webkit-animation:fadeIn 1s ease both 2.15s;animation:fadeIn 1s ease both 2.15s}.usa .star-23:after{-webkit-animation:fadeIn 1s ease both 2.2s;animation:fadeIn 1s ease both 2.2s}.venezuela{background-color:#66cdaa}.venezuela .flag{background-color:#FFCC00;-webkit-animation:heightFlag 1s ease both;animation:heightFlag 1s ease both}.venezuela .flag:before,.venezuela .flag:after{position:absolute;width:100%;height:33%;content:''}.venezuela .flag:before{bottom:32%;background-color:#00247D;-webkit-animation:fadeInUp 1s ease both 0.5s;animation:fadeInUp 1s ease both 0.5s}.venezuela .flag:after{bottom:-1px;background-color:#CF142B;-webkit-animation:fadeInUp 1s ease both 0.5s;animation:fadeInUp 1s ease both 0.5s}.venezuela .star:before,.venezuela .star:after{content:"\2605";color:#fff;font-size:33px;line-height:33px;position:absolute}.venezuela .star-01:before{left:28%;top:54%;-webkit-animation:fadeIn 0.5s ease both 1s;animation:fadeIn 0.5s ease both 1s}.venezuela .star-01:after{left:32%;top:45%;-webkit-transform:rotate(22deg);transform:rotate(22deg);-webkit-animation:fadeIn 0.5s ease both 1.15s;animation:fadeIn 0.5s ease both 1.15s}.venezuela .star-02:before{left:37.5%;top:38%;-webkit-transform:rotate(43deg);transform:rotate(43deg);-webkit-animation:fadeIn 0.5s ease both 1.3s;animation:fadeIn 0.5s ease both 1.3s}.venezuela .star-02:after{left:44%;top:35%;-webkit-transform:rotate(60deg);transform:rotate(60deg);-webkit-animation:fadeIn 0.5s ease both 1.45s;animation:fadeIn 0.5s ease both 1.45s}.venezuela .star-03:before{left:51%;top:35%;-webkit-transform:rotate(81deg);transform:rotate(81deg);-webkit-animation:fadeIn 0.5s ease both 1.6s;animation:fadeIn 0.5s ease both 1.6s}.venezuela .star-03:after{left:57.5%;top:39.5%;-webkit-transform:rotate(102deg);transform:rotate(102deg);-webkit-animation:fadeIn 0.5s ease both 1.75s;animation:fadeIn 0.5s ease both 1.75s}.venezuela .star-04:before{left:63%;top:46%;-webkit-transform:rotate(123deg);transform:rotate(123deg);-webkit-animation:fadeIn 0.5s ease both 1.9s;animation:fadeIn 0.5s ease both 1.9s}.venezuela .star-04:after{left:66%;top:54%;-webkit-animation:fadeIn 0.5s ease both 2.1s;animation:fadeIn 0.5s ease both 2.1s}.vietnam{background-color:#abdef5}.vietnam .flag{background-color:#CE1126;-webkit-animation:fadeInUp 0.5s ease-in both;animation:fadeInUp 0.5s ease-in both}.vietnam .flag>div:after{color:#FCD116;position:absolute;content:"\2605";font-size:250px;height:250px;line-height:1;left:50%;top:50%;margin:-125px 0 0 -110px;-webkit-animation:zoomIn 0.75s ease-out 0.75s both;animation:zoomIn 0.75s ease-out 0.75s both}.country .flag,.country .flag:before,.country .flag:after,.country .flag div,.country .flag div:after,.country .flag div:before{-webkit-animation-play-state:paused;animation-play-state:paused}.country.active .flag,.country.active .flag:before,.country.active .flag:after,.country.active .flag div,.country.active .flag div:before,.country.active .flag div:after{-webkit-animation-play-state:running;animation-play-state:running}
2 | 
3 | 


--------------------------------------------------------------------------------
/build/js/scripts.min.js:
--------------------------------------------------------------------------------
1 | (function(){"use strict";var elements=document.querySelectorAll(".country"),content=document.getElementById("main");checkElement();window.addEventListener("scroll",checkElement,false);function checkElement(){var windowHeight=window.innerHeight,halfHeight=windowHeight/2,size=55,distance=window.scrollY,contentHeight=content.offsetHeight;for(var i=0;i<elements.length;i++){var aloha=elements[i].getBoundingClientRect();if(halfHeight-size>aloha.top){elements[i].classList.add("active")}}if(windowHeight+distance>=contentHeight){if(elements.length%2===0){elements[elements.length-2].classList.add("active");elements[elements.length-1].classList.add("active")}else{elements[elements.length-1].classList.add("active")}}}})();
2 | 


--------------------------------------------------------------------------------
/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/raphaelfabeni/flags-css3/21d8ac287e8be3e29bef0f694ad4689a6f5c4d95/favicon.ico


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <!--[if IE 7]>    <html class="no-js ie7" lang="pt-br">     <![endif]-->
  3 | <!--[if IE 8]>    <html class="no-js ie8" lang="pt-br">     <![endif]-->
  4 | <!--[if IE 9]>    <html class="no-js ie9" lang="pt-br">     <![endif]-->
  5 | <head>
  6 |     <meta charset="utf-8">
  7 |     <title>Flags CSS3</title>
  8 |     <meta name="description" content="Countries flags developed using only CSS3.">
  9 |     <meta name="keywords" content="css3, flags, country, countries, animation">
 10 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 11 | 
 12 |     <link rel="icon" href="favicon.ico">
 13 | 
 14 |     <!-- Facebook -->
 15 |     <meta property="fb:app_id" content="588516207935765" />
 16 |     <meta property="fb:admins" content="100003036613503" />
 17 |     <meta property="og:site_name" content="Flags CSS3"/>
 18 |     <meta property="og:title" content="Flags CSS3 | Raphael Fabeni" />
 19 |     <meta property="og:type" content="website" />
 20 |     <meta property="og:url" content="http://www.raphaelfabeni.com.br/flags-css3/" />
 21 |     <meta property="og:image" content="https://cloud.githubusercontent.com/assets/1345662/4113601/89ee9eca-3251-11e4-8986-dd99ec515595.png" />
 22 | 
 23 |     <!-- Twitter -->
 24 |     <meta name="twitter:card" content="summary_large_image">
 25 |     <meta name="twitter:site" content="@raphaelfabeni">
 26 |     <meta name="twitter:title" content="Flags CSS3 | Raphael Fabeni">
 27 |     <meta name="twitter:description" content="Countries flags developed using only CSS3.">
 28 |     <meta name="twitter:image:src" content="https://cloud.githubusercontent.com/assets/1345662/4113601/89ee9eca-3251-11e4-8986-dd99ec515595.png">
 29 | 
 30 |     <!-- CSS -->
 31 |     <link rel="stylesheet" href="build/css/main.min.css">
 32 | 
 33 |     <script async src="https://www.googletagmanager.com/gtag/js?id=UA-16831060-1"></script>
 34 | 	<script>
 35 | 		window.dataLayer = window.dataLayer || [];
 36 | 		function gtag(){dataLayer.push(arguments);}
 37 | 		gtag('js', new Date());
 38 | 
 39 | 		gtag('config', 'UA-16831060-1');
 40 | 	</script>
 41 | </head>
 42 | <body>
 43 |     <!-- Github -->
 44 |     <a class="fork" href="https://github.com/raphaelfabeni/flags-css3">
 45 |         <img src="https://camo.githubusercontent.com/652c5b9acfaddf3a9c326fa6bde407b87f7be0f4/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6f72616e67655f6666373630302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png">
 46 |     </a>
 47 |     <header id="header" class="header" role="header">
 48 |         <h1 class="title">CSS3 Flags</h1>
 49 |         <h2 class="subtitle">A CSS3 project by: <a href="http://www.raphaelfabeni.com.br">Raphael Fabeni</a></h2>
 50 |     </header>
 51 |     <main id="main" role="main" class="main">
 52 |         <!-- Algeria -->
 53 |         <div class="country algeria">
 54 |             <div class="flag"></div>
 55 |         </div>
 56 |         <!-- Austria -->
 57 |         <div class="country austria">
 58 |             <div class="flag"></div>
 59 |         </div>
 60 |         <!-- Brazil -->
 61 |         <div class="country brazil">
 62 |             <div class="flag">
 63 |                 <div>
 64 |                     <div class="star star-01"></div>
 65 |                     <div class="star small star-02"></div>
 66 |                     <div class="star small star-03"></div>
 67 |                     <div class="star small star-04"></div>
 68 |                     <div class="star small star-05"></div>
 69 |                     <div class="star small star-06"></div>
 70 |                     <div class="star small star-07"></div>
 71 |                     <div class="star small star-08"></div>
 72 |                     <div class="star small star-09"></div>
 73 |                     <div class="star small star-10"></div>
 74 |                     <div class="star small star-11"></div>
 75 |                     <div class="star small star-12"></div>
 76 |                     <div class="star small star-13"></div>
 77 |                     <div class="star small star-14"></div>
 78 |                     <div class="star small star-15"></div>
 79 |                     <div class="star small star-16"></div>
 80 |                     <div class="star small star-17"></div>
 81 |                     <div class="star small star-18"></div>
 82 |                     <div class="star small star-19"></div>
 83 |                     <div class="star small star-20"></div>
 84 |                     <div class="star small star-21"></div>
 85 |                     <div class="star small star-22"></div>
 86 |                     <div class="star small star-23"></div>
 87 |                     <div class="star small star-24"></div>
 88 |                     <div class="star small star-25"></div>
 89 |                     <div class="star small star-26"></div>
 90 |                     <div class="star small star-27"></div>
 91 |                     <div class="star small star-28"></div>
 92 |                 </div>
 93 |             </div>
 94 |         </div>
 95 |         <!-- Bulgaria -->
 96 |         <div class="country bulgaria">
 97 |             <div class="flag"></div>
 98 |         </div>
 99 |         <!-- Cameroon -->
100 |         <div class="country cameroon">
101 |             <div class="flag">
102 |                 <div></div>
103 |             </div>
104 |         </div>
105 |         <!-- Chile -->
106 |         <div class="country chile">
107 |             <div class="flag"></div>
108 |         </div>
109 |         <!-- China -->
110 |         <div class="country china">
111 |             <div class="flag">
112 |                 <div>
113 |                     <div></div>
114 |                 </div>
115 |             </div>
116 |         </div>
117 |         <!-- Colombia -->
118 |         <div class="country colombia">
119 |             <div class="flag"></div>
120 |         </div>
121 |         <!-- Cuba -->
122 |         <div class="country cuba">
123 |             <div class="flag"></div>
124 |         </div>
125 |         <!-- Denmark -->
126 |         <div class="country denmark">
127 |             <div class="flag"></div>
128 |         </div>
129 |         <!-- Finland -->
130 |         <div class="country finland">
131 |             <div class="flag"></div>
132 |         </div>
133 |         <!-- France -->
134 |         <div class="country france">
135 |             <div class="flag"></div>
136 |         </div>
137 |         <!-- Germany -->
138 |         <div class="country germany">
139 |             <div class="flag">
140 |                 <div></div>
141 |             </div>
142 |         </div>
143 |         <!-- Ghana -->
144 |         <div class="country ghana">
145 |             <div class="flag">
146 |                 <div></div>
147 |             </div>
148 |         </div>
149 |         <!-- Greece -->
150 |         <div class="country greece">
151 |             <div class="flag">
152 |                 <div></div>
153 |             </div>
154 |         </div>
155 |         <!-- Honduras -->
156 |         <div class="country honduras">
157 |             <div class="flag">
158 |                 <div></div>
159 |                 <div></div>
160 |             </div>
161 |         </div>
162 |         <!-- Ireland -->
163 |         <div class="country ireland">
164 |             <div class="flag"></div>
165 |         </div>
166 |         <!-- Israel -->
167 |         <div class="country israel">
168 |             <div class="flag">
169 |                 <div class="star">
170 |                     <div class="center"></div>
171 |                     <div class="triangle triangle-01"></div>
172 |                     <div class="triangle triangle-02"></div>
173 |                 </div>
174 |             </div>
175 |         </div>
176 |         <!-- Italy -->
177 |         <div class="country italy">
178 |             <div class="flag"></div>
179 |         </div>
180 |         <!-- Japan -->
181 |         <div class="country japan">
182 |             <div class="flag"></div>
183 |         </div>
184 |         <!-- Netherlands -->
185 |         <div class="country netherlands">
186 |             <div class="flag"></div>
187 |         </div>
188 |         <!-- Nigeria -->
189 |         <div class="country nigeria">
190 |             <div class="flag"></div>
191 |         </div>
192 |         <!-- Norway -->
193 |         <div class="country norway">
194 |             <div class="flag"></div>
195 |         </div>
196 |         <!-- Peru -->
197 |         <div class="country peru">
198 |             <div class="flag"></div>
199 |         </div>
200 |         <!-- South Africa -->
201 |         <div class="country south-africa">
202 |             <div class="flag">
203 |                 <div>
204 |                 </div>
205 |             </div>
206 |         </div>
207 |         <!-- Sweden -->
208 |         <div class="country sweden">
209 |             <div class="flag"></div>
210 |         </div>
211 |         <!-- Tunisia -->
212 |         <div class="country tunisia">
213 |             <div class="flag"></div>
214 |         </div>
215 |         <!-- Turkey -->
216 |         <div class="country turkey">
217 |             <div class="flag"></div>
218 |         </div>
219 |         <!-- USA -->
220 |         <div class="country usa">
221 |             <div class="flag">
222 |                 <div class="star star-01"></div>
223 |                 <div class="star star-02"></div>
224 |                 <div class="star star-03"></div>
225 |                 <div class="star star-04"></div>
226 |                 <div class="star star-05"></div>
227 |                 <div class="star star-06"></div>
228 |                 <div class="star star-07"></div>
229 |                 <div class="star star-08"></div>
230 |                 <div class="star star-09"></div>
231 |                 <div class="star star-10"></div>
232 |                 <div class="star star-11"></div>
233 |                 <div class="star star-12"></div>
234 |                 <div class="star star-13"></div>
235 |                 <div class="star star-14"></div>
236 |                 <div class="star star-15"></div>
237 |                 <div class="star star-16"></div>
238 |                 <div class="star star-17"></div>
239 |                 <div class="star star-18"></div>
240 |                 <div class="star star-19"></div>
241 |                 <div class="star star-20"></div>
242 |                 <div class="star star-21"></div>
243 |                 <div class="star star-22"></div>
244 |                 <div class="star star-23"></div>
245 |                 <div class="star star-24"></div>
246 |                 <div class="star star-25"></div>
247 |             </div>
248 |         </div>
249 |         <!-- Venezuela -->
250 |         <div class="country venezuela">
251 |             <div class="flag">
252 |                 <div class="star star-01"></div>
253 |                 <div class="star star-02"></div>
254 |                 <div class="star star-03"></div>
255 |                 <div class="star star-04"></div>
256 |             </div>
257 |         </div>
258 | 
259 |         <!-- Vietnam -->
260 |         <div class="country vietnam">
261 |             <div class="flag">
262 |                 <div></div>
263 |             </div>
264 |         </div>
265 | 
266 |     </main>
267 | 
268 |     <footer class="footer">
269 |         <p>Check it out on <a href="https://github.com/raphaelfabeni/flags-css3" target="_blank">GitHub</a>!</p>
270 |         <p><small>Inspired by <a href="http://lynnandtonic.github.io/a-single-div/" target="_blank">A Single Div</a>, despite the fact I didn't worry about using only one div.</small></p>
271 |         <p><small>Thanks for <a href="https://twitter.com/_dte" target="_blank">Daniel Eden</a> for the awesome <a href="http://daneden.github.io/animate.css/" target="_blank">animate.css</a>.</small></p>
272 |     </footer>
273 |     
274 |     <script src="build/js/scripts.min.js"></script>
275 | </body>
276 | </html>
277 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "flags-css3",
 3 |   "version": "1.0.0",
 4 |   "title": "Flags CSS3",
 5 |   "homepage": "http://www.raphaelfabeni.com.br/flags-css3",
 6 |   "main": "index.html",
 7 |   "repository": "https://github.com/raphaelfabeni/flags-css3",
 8 |   "scripts": {
 9 |     "test": "echo \"Error: no test specified\" && exit 1",
10 |     "build:css": "node-sass --output-style compressed assets/scss/main.scss > build/css/main.min.css",
11 |     "build:js" : "uglifyjs assets/js/scripts.js > build/js/scripts.min.js",
12 |     "server": "./node_modules/node-static/bin/cli.js -p 3000 .",
13 |     "watch:css": "watchy -w assets/scss/ -- npm run build:css",
14 |     "watch:js": "watchy -w assets/js/ -- npm run build:js",
15 |     "postcss": "postcss -c .postcss.json",
16 |     "build": "npm run build:css && npm run postcss && npm run build:js",
17 |     "dev": "npm run watch:css & npm run watch:js & browser-sync start --server . --files [build/css/*.css, assets/js/*.js]",
18 |     "start": "npm run build && browser-sync start --server ."
19 |   },
20 |   "devDependencies": {
21 |     "autoprefixer": "^6.1.2",
22 |     "browser-sync": "2.9.11",
23 |     "cssnano": "^3.3.2",
24 |     "node-sass": "^3.4.1",
25 |     "node-static": "^0.7.7",
26 |     "postcss-cli": "^2.3.2",
27 |     "uglify-js": "^2.5.0",
28 |     "watchy": "^0.6.5"
29 |   }
30 | }
31 | 


--------------------------------------------------------------------------------