/*! normalize.css v2.1.3 | MIT License | git.io/normalize */
/ * = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
HTML5 display definitions
= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = * /
/ * *
* Correct ` block ` display not defined in IE 8 / 9 .
* /
article ,
aside ,
details ,
figcaption ,
figure ,
footer ,
header ,
hgroup ,
main ,
nav ,
section ,
summary {
display : block ;
}
/ * *
* Correct ` inline-block ` display not defined in IE 8 / 9 .
* /
audio ,
canvas ,
video {
display : inline-block ;
}
/ * *
* Prevent modern browsers from displaying ` audio ` without controls .
* Remove excess height in iOS 5 devices .
* /
audio : not ( [ controls ] ) {
display : none ;
height : 0 ;
}
/ * *
* Address ` [ hidden ] ` styling not present in IE 8 / 9 .
* Hide the ` template ` element in IE , Safari , and Firefox < 22 .
* /
[ hidden ] ,
template {
display : none ;
}
/ * = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
Base
= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = * /
/ * *
* 1 . Set default font family to sans-serif .
* 2 . Prevent iOS text size adjust after orientation change , without disabling
* user zoom .
* /
html {
font-family : sans-serif ;
/* 1 */
-ms-text-size-adjust : 100 % ;
/* 2 */
-webkit-text-size-adjust : 100 % ;
/* 2 */
}
/ * *
* Remove default margin .
* /
body {
margin : 0 ;
}
/ * = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
Links
= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = * /
/ * *
* Remove the gray background color from active links in IE 10 .
* /
a {
background : transparent ;
}
/ * *
* Address ` outline ` inconsistency between Chrome and other browsers .
* /
a : focus {
outline : thin dotted ;
}
/ * *
* Improve readability when focused and also mouse hovered in all browsers .
* /
a : active ,
a : hover {
outline : 0 ;
}
/ * = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
Typography
= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = * /
/ * *
* Address variable ` h1 ` font-size and margin within ` section ` and ` article `
* contexts in Firefox 4 + , Safari 5 , and Chrome .
* /
h1 {
font-size : 2em ;
margin : 0 . 67em 0 ;
}
/ * *
* Address styling not present in IE 8 / 9 , Safari 5 , and Chrome .
* /
abbr [ title ] {
border-bottom : 1px dotted ;
}
/ * *
* Address style set to ` bolder ` in Firefox 4 + , Safari 5 , and Chrome .
* /
b ,
strong {
font-weight : bold ;
}
/ * *
* Address styling not present in Safari 5 and Chrome .
* /
dfn {
font-style : italic ;
}
/ * *
* Address differences between Firefox and other browsers .
* /
hr {
-moz-box-sizing : content-box ;
box-sizing : content-box ;
height : 0 ;
}
/ * *
* Address styling not present in IE 8 / 9 .
* /
mark {
background : # ff0 ;
color : # 000 ;
}
/ * *
* Correct font family set oddly in Safari 5 and Chrome .
* /
code ,
kbd ,
pre ,
samp {
font-family : monospace , serif ;
font-size : 1em ;
}
/ * *
* Improve readability of pre-formatted text in all browsers .
* /
pre {
white-space : pre-wrap ;
}
/ * *
* Set consistent quote types .
* /
q {
quotes : "\201C" "\201D" "\2018" "\2019" ;
}
/ * *
* Address inconsistent and variable font size in all browsers .
* /
small {
font-size : 80 % ;
}
/ * *
* Prevent ` sub ` and ` sup ` affecting ` line-height ` in all browsers .
* /
sub ,
sup {
font-size : 75 % ;
line-height : 0 ;
position : relative ;
vertical-align : baseline ;
}
sup {
top : -0 . 5em ;
}
sub {
bottom : -0 . 25em ;
}
/ * = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
Embedded content
= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = * /
/ * *
* Remove border when inside ` a ` element in IE 8 / 9 .
* /
img {
border : 0 ;
}
/ * *
* Correct overflow displayed oddly in IE 9 .
* /
svg : not ( : root ) {
overflow : hidden ;
}
/ * = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
Figures
= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = * /
/ * *
* Address margin not present in IE 8 / 9 and Safari 5 .
* /
figure {
margin : 0 ;
}
/ * = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
Forms
= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = * /
/ * *
* Define consistent border , margin , and padding .
* /
fieldset {
border : 1px solid # c0c0c0 ;
margin : 0 2px ;
padding : 0 . 35em 0 . 625em 0 . 75em ;
}
/ * *
* 1 . Correct ` color ` not being inherited in IE 8 / 9 .
* 2 . Remove padding so people aren ' t caught out if they zero out fieldsets .
* /
legend {
border : 0 ;
/* 1 */
padding : 0 ;
/* 2 */
}
/ * *
* 1 . Correct font family not being inherited in all browsers .
* 2 . Correct font size not being inherited in all browsers .
* 3 . Address margins set differently in Firefox 4 + , Safari 5 , and Chrome .
* /
button ,
input ,
select ,
textarea {
font-family : inherit ;
/* 1 */
font-size : 100 % ;
/* 2 */
margin : 0 ;
/* 3 */
}
/ * *
* Address Firefox 4 + setting ` line-height ` on ` input ` using ` ! important ` in
* the UA stylesheet .
* /
button ,
input {
line-height : normal ;
}
/ * *
* Address inconsistent ` text-transform ` inheritance for ` button ` and ` select ` .
* All other form control elements do not inherit ` text-transform ` values .
* Correct ` button ` style inheritance in Chrome , Safari 5 + , and IE 8 + .
* Correct ` select ` style inheritance in Firefox 4 + and Opera .
* /
button ,
select {
text-transform : none ;
}
/ * *
* 1 . Avoid the WebKit bug in Android 4 . 0 . * where ( 2 ) destroys native ` audio `
* and ` video ` controls .
* 2 . Correct inability to style clickable ` input ` types in iOS .
* 3 . Improve usability and consistency of cursor style between image-type
* ` input ` and others .
* /
button ,
html input [ type = "button" ] ,
input [ type = "reset" ] ,
input [ type = "submit" ] {
-webkit-appearance : button ;
/* 2 */
cursor : pointer ;
/* 3 */
}
/ * *
* Re-set default cursor for disabled elements .
* /
button [ disabled ] ,
html input [ disabled ] {
cursor : default ;
}
/ * *
* 1 . Address box sizing set to ` content-box ` in IE 8 / 9 / 10 .
* 2 . Remove excess padding in IE 8 / 9 / 10 .
* /
input [ type = "checkbox" ] ,
input [ type = "radio" ] {
box-sizing : border-box ;
/* 1 */
padding : 0 ;
/* 2 */
}
/ * *
* 1 . Address ` appearance ` set to ` searchfield ` in Safari 5 and Chrome .
* 2 . Address ` box-sizing ` set to ` border-box ` in Safari 5 and Chrome
* ( include ` -moz ` to future-proof ) .
* /
input [ type = "search" ] {
-webkit-appearance : textfield ;
/* 1 */
-moz-box-sizing : content-box ;
-webkit-box-sizing : content-box ;
/* 2 */
box-sizing : content-box ;
}
/ * *
* Remove inner padding and search cancel button in Safari 5 and Chrome
* on OS X .
* /
input [ type = "search" ] :: -webkit-search-cancel-button ,
input [ type = "search" ] :: -webkit-search-decoration {
-webkit-appearance : none ;
}
/ * *
* Remove inner padding and border in Firefox 4 + .
* /
button :: -moz-focus-inner ,
input :: -moz-focus-inner {
border : 0 ;
padding : 0 ;
}
/ * *
* 1 . Remove default vertical scrollbar in IE 8 / 9 .
* 2 . Improve readability and alignment in all browsers .
* /
textarea {
overflow : auto ;
/* 1 */
vertical-align : top ;
/* 2 */
}
/ * = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
Tables
= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = * /
/ * *
* Remove most spacing between table cells .
* /
table {
border-collapse : collapse ;
border-spacing : 0 ;
}
/ * !
Animate . css - http : / / daneden . me / animate
Licensed under the MIT license
Copyright ( c ) 2013 Daniel Eden
Permission is hereby granted , free of charge , to any person obtaining a copy of this software and associated documentation files ( the "Software" ) , to deal in the Software without restriction , including without limitation the rights to use , copy , modify , merge , publish , distribute , sublicense , and / or sell copies of the Software , and to permit persons to whom the Software is furnished to do so , subject to the following conditions :
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software .
THE SOFTWARE IS PROVIDED "AS IS" , WITHOUT WARRANTY OF ANY KIND , EXPRESS OR IMPLIED , INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY , FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT . IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM , DAMAGES OR OTHER LIABILITY , WHETHER IN AN ACTION OF CONTRACT , TORT OR OTHERWISE , ARISING FROM , OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE .
* /
. animated {
-webkit-animation-duration : 1s ;
animation-duration : 1s ;
-webkit-animation-fill-mode : both ;
animation-fill-mode : both ;
}
. animated . hinge {
-webkit-animation-duration : 2s ;
animation-duration : 2s ;
}
@ -webkit-keyframes bounce {
0 % , 20 % , 50 % , 80 % , 100 % {
-webkit-transform : translateY ( 0 ) ;
transform : translateY ( 0 ) ;
}
40 % {
-webkit-transform : translateY ( -30px ) ;
transform : translateY ( -30px ) ;
}
60 % {
-webkit-transform : translateY ( -15px ) ;
transform : translateY ( -15px ) ;
}
}
@ keyframes bounce {
0 % , 20 % , 50 % , 80 % , 100 % {
-webkit-transform : translateY ( 0 ) ;
-ms-transform : translateY ( 0 ) ;
transform : translateY ( 0 ) ;
}
40 % {
-webkit-transform : translateY ( -30px ) ;
-ms-transform : translateY ( -30px ) ;
transform : translateY ( -30px ) ;
}
60 % {
-webkit-transform : translateY ( -15px ) ;
-ms-transform : translateY ( -15px ) ;
transform : translateY ( -15px ) ;
}
}
. bounce {
-webkit-animation-name : bounce ;
animation-name : bounce ;
}
@ -webkit-keyframes flash {
0 % , 50 % , 100 % {
opacity : 1 ;
}
25 % , 75 % {
opacity : 0 ;
}
}
@ keyframes flash {
0 % , 50 % , 100 % {
opacity : 1 ;
}
25 % , 75 % {
opacity : 0 ;
}
}
. flash {
-webkit-animation-name : flash ;
animation-name : flash ;
}
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@ -webkit-keyframes pulse {
0 % {
-webkit-transform : scale ( 1 ) ;
transform : scale ( 1 ) ;
}
50 % {
-webkit-transform : scale ( 1 . 1 ) ;
transform : scale ( 1 . 1 ) ;
}
100 % {
-webkit-transform : scale ( 1 ) ;
transform : scale ( 1 ) ;
}
}
@ keyframes pulse {
0 % {
-webkit-transform : scale ( 1 ) ;
-ms-transform : scale ( 1 ) ;
transform : scale ( 1 ) ;
}
50 % {
-webkit-transform : scale ( 1 . 1 ) ;
-ms-transform : scale ( 1 . 1 ) ;
transform : scale ( 1 . 1 ) ;
}
100 % {
-webkit-transform : scale ( 1 ) ;
-ms-transform : scale ( 1 ) ;
transform : scale ( 1 ) ;
}
}
. pulse {
-webkit-animation-name : pulse ;
animation-name : pulse ;
}
@ -webkit-keyframes shake {
0 % , 100 % {
-webkit-transform : translateX ( 0 ) ;
transform : translateX ( 0 ) ;
}
10 % , 30 % , 50 % , 70 % , 90 % {
-webkit-transform : translateX ( -10px ) ;
transform : translateX ( -10px ) ;
}
20 % , 40 % , 60 % , 80 % {
-webkit-transform : translateX ( 10px ) ;
transform : translateX ( 10px ) ;
}
}
@ keyframes shake {
0 % , 100 % {
-webkit-transform : translateX ( 0 ) ;
-ms-transform : translateX ( 0 ) ;
transform : translateX ( 0 ) ;
}
10 % , 30 % , 50 % , 70 % , 90 % {
-webkit-transform : translateX ( -10px ) ;
-ms-transform : translateX ( -10px ) ;
transform : translateX ( -10px ) ;
}
20 % , 40 % , 60 % , 80 % {
-webkit-transform : translateX ( 10px ) ;
-ms-transform : translateX ( 10px ) ;
transform : translateX ( 10px ) ;
}
}
. shake {
-webkit-animation-name : shake ;
animation-name : shake ;
}
@ -webkit-keyframes swing {
20 % {
-webkit-transform : rotate ( 15deg ) ;
transform : rotate ( 15deg ) ;
}
40 % {
-webkit-transform : rotate ( -10deg ) ;
transform : rotate ( -10deg ) ;
}
60 % {
-webkit-transform : rotate ( 5deg ) ;
transform : rotate ( 5deg ) ;
}
80 % {
-webkit-transform : rotate ( -5deg ) ;
transform : rotate ( -5deg ) ;
}
100 % {
-webkit-transform : rotate ( 0deg ) ;
transform : rotate ( 0deg ) ;
}
}
@ keyframes swing {
20 % {
-webkit-transform : rotate ( 15deg ) ;
-ms-transform : rotate ( 15deg ) ;
transform : rotate ( 15deg ) ;
}
40 % {
-webkit-transform : rotate ( -10deg ) ;
-ms-transform : rotate ( -10deg ) ;
transform : rotate ( -10deg ) ;
}
60 % {
-webkit-transform : rotate ( 5deg ) ;
-ms-transform : rotate ( 5deg ) ;
transform : rotate ( 5deg ) ;
}
80 % {
-webkit-transform : rotate ( -5deg ) ;
-ms-transform : rotate ( -5deg ) ;
transform : rotate ( -5deg ) ;
}
100 % {
-webkit-transform : rotate ( 0deg ) ;
-ms-transform : rotate ( 0deg ) ;
transform : rotate ( 0deg ) ;
}
}
. swing {
-webkit-transform-origin : top center ;
-ms-transform-origin : top center ;
transform-origin : top center ;
-webkit-animation-name : swing ;
animation-name : swing ;
}
@ -webkit-keyframes tada {
0 % {
-webkit-transform : scale ( 1 ) ;
transform : scale ( 1 ) ;
}
10 % , 20 % {
-webkit-transform : scale ( 0 . 9 ) rotate ( -3deg ) ;
transform : scale ( 0 . 9 ) rotate ( -3deg ) ;
}
30 % , 50 % , 70 % , 90 % {
-webkit-transform : scale ( 1 . 1 ) rotate ( 3deg ) ;
transform : scale ( 1 . 1 ) rotate ( 3deg ) ;
}
40 % , 60 % , 80 % {
-webkit-transform : scale ( 1 . 1 ) rotate ( -3deg ) ;
transform : scale ( 1 . 1 ) rotate ( -3deg ) ;
}
100 % {
-webkit-transform : scale ( 1 ) rotate ( 0 ) ;
transform : scale ( 1 ) rotate ( 0 ) ;
}
}
@ keyframes tada {
0 % {
-webkit-transform : scale ( 1 ) ;
-ms-transform : scale ( 1 ) ;
transform : scale ( 1 ) ;
}
10 % , 20 % {
-webkit-transform : scale ( 0 . 9 ) rotate ( -3deg ) ;
-ms-transform : scale ( 0 . 9 ) rotate ( -3deg ) ;
transform : scale ( 0 . 9 ) rotate ( -3deg ) ;
}
30 % , 50 % , 70 % , 90 % {
-webkit-transform : scale ( 1 . 1 ) rotate ( 3deg ) ;
-ms-transform : scale ( 1 . 1 ) rotate ( 3deg ) ;
transform : scale ( 1 . 1 ) rotate ( 3deg ) ;
}
40 % , 60 % , 80 % {
-webkit-transform : scale ( 1 . 1 ) rotate ( -3deg ) ;
-ms-transform : scale ( 1 . 1 ) rotate ( -3deg ) ;
transform : scale ( 1 . 1 ) rotate ( -3deg ) ;
}
100 % {
-webkit-transform : scale ( 1 ) rotate ( 0 ) ;
-ms-transform : scale ( 1 ) rotate ( 0 ) ;
transform : scale ( 1 ) rotate ( 0 ) ;
}
}
. tada {
-webkit-animation-name : tada ;
animation-name : tada ;
}
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@ -webkit-keyframes wobble {
0 % {
-webkit-transform : translateX ( 0 % ) ;
transform : translateX ( 0 % ) ;
}
15 % {
-webkit-transform : translateX ( -25 % ) rotate ( -5deg ) ;
transform : translateX ( -25 % ) rotate ( -5deg ) ;
}
30 % {
-webkit-transform : translateX ( 20 % ) rotate ( 3deg ) ;
transform : translateX ( 20 % ) rotate ( 3deg ) ;
}
45 % {
-webkit-transform : translateX ( -15 % ) rotate ( -3deg ) ;
transform : translateX ( -15 % ) rotate ( -3deg ) ;
}
60 % {
-webkit-transform : translateX ( 10 % ) rotate ( 2deg ) ;
transform : translateX ( 10 % ) rotate ( 2deg ) ;
}
75 % {
-webkit-transform : translateX ( -5 % ) rotate ( -1deg ) ;
transform : translateX ( -5 % ) rotate ( -1deg ) ;
}
100 % {
-webkit-transform : translateX ( 0 % ) ;
transform : translateX ( 0 % ) ;
}
}
@ keyframes wobble {
0 % {
-webkit-transform : translateX ( 0 % ) ;
-ms-transform : translateX ( 0 % ) ;
transform : translateX ( 0 % ) ;
}
15 % {
-webkit-transform : translateX ( -25 % ) rotate ( -5deg ) ;
-ms-transform : translateX ( -25 % ) rotate ( -5deg ) ;
transform : translateX ( -25 % ) rotate ( -5deg ) ;
}
30 % {
-webkit-transform : translateX ( 20 % ) rotate ( 3deg ) ;
-ms-transform : translateX ( 20 % ) rotate ( 3deg ) ;
transform : translateX ( 20 % ) rotate ( 3deg ) ;
}
45 % {
-webkit-transform : translateX ( -15 % ) rotate ( -3deg ) ;
-ms-transform : translateX ( -15 % ) rotate ( -3deg ) ;
transform : translateX ( -15 % ) rotate ( -3deg ) ;
}
60 % {
-webkit-transform : translateX ( 10 % ) rotate ( 2deg ) ;
-ms-transform : translateX ( 10 % ) rotate ( 2deg ) ;
transform : translateX ( 10 % ) rotate ( 2deg ) ;
}
75 % {
-webkit-transform : translateX ( -5 % ) rotate ( -1deg ) ;
-ms-transform : translateX ( -5 % ) rotate ( -1deg ) ;
transform : translateX ( -5 % ) rotate ( -1deg ) ;
}
100 % {
-webkit-transform : translateX ( 0 % ) ;
-ms-transform : translateX ( 0 % ) ;
transform : translateX ( 0 % ) ;
}
}
. wobble {
-webkit-animation-name : wobble ;
animation-name : wobble ;
}
@ -webkit-keyframes bounceIn {
0 % {
opacity : 0 ;
-webkit-transform : scale ( 0 . 3 ) ;
transform : scale ( 0 . 3 ) ;
}
50 % {
opacity : 1 ;
-webkit-transform : scale ( 1 . 05 ) ;
transform : scale ( 1 . 05 ) ;
}
70 % {
-webkit-transform : scale ( 0 . 9 ) ;
transform : scale ( 0 . 9 ) ;
}
100 % {
-webkit-transform : scale ( 1 ) ;
transform : scale ( 1 ) ;
}
}
@ keyframes bounceIn {
0 % {
opacity : 0 ;
-webkit-transform : scale ( 0 . 3 ) ;
-ms-transform : scale ( 0 . 3 ) ;
transform : scale ( 0 . 3 ) ;
}
50 % {
opacity : 1 ;
-webkit-transform : scale ( 1 . 05 ) ;
-ms-transform : scale ( 1 . 05 ) ;
transform : scale ( 1 . 05 ) ;
}
70 % {
-webkit-transform : scale ( 0 . 9 ) ;
-ms-transform : scale ( 0 . 9 ) ;
transform : scale ( 0 . 9 ) ;
}
100 % {
-webkit-transform : scale ( 1 ) ;
-ms-transform : scale ( 1 ) ;
transform : scale ( 1 ) ;
}
}
. bounceIn {
-webkit-animation-name : bounceIn ;
animation-name : bounceIn ;
}
@ -webkit-keyframes bounceInDown {
0 % {
opacity : 0 ;
-webkit-transform : translateY ( -2000px ) ;
transform : translateY ( -2000px ) ;
}
60 % {
opacity : 1 ;
-webkit-transform : translateY ( 30px ) ;
transform : translateY ( 30px ) ;
}
80 % {
-webkit-transform : translateY ( -10px ) ;
transform : translateY ( -10px ) ;
}
100 % {
-webkit-transform : translateY ( 0 ) ;
transform : translateY ( 0 ) ;
}
}
@ keyframes bounceInDown {
0 % {
opacity : 0 ;
-webkit-transform : translateY ( -2000px ) ;
-ms-transform : translateY ( -2000px ) ;
transform : translateY ( -2000px ) ;
}
60 % {
opacity : 1 ;
-webkit-transform : translateY ( 30px ) ;
-ms-transform : translateY ( 30px ) ;
transform : translateY ( 30px ) ;
}
80 % {
-webkit-transform : translateY ( -10px ) ;
-ms-transform : translateY ( -10px ) ;
transform : translateY ( -10px ) ;
}
100 % {
-webkit-transform : translateY ( 0 ) ;
-ms-transform : translateY ( 0 ) ;
transform : translateY ( 0 ) ;
}
}
. bounceInDown {
-webkit-animation-name : bounceInDown ;
animation-name : bounceInDown ;
}
@ -webkit-keyframes bounceInLeft {
0 % {
opacity : 0 ;
-webkit-transform : translateX ( -2000px ) ;
transform : translateX ( -2000px ) ;
}
60 % {
opacity : 1 ;
-webkit-transform : translateX ( 30px ) ;
transform : translateX ( 30px ) ;
}
80 % {
-webkit-transform : translateX ( -10px ) ;
transform : translateX ( -10px ) ;
}
100 % {
-webkit-transform : translateX ( 0 ) ;
transform : translateX ( 0 ) ;
}
}
@ keyframes bounceInLeft {
0 % {
opacity : 0 ;
-webkit-transform : translateX ( -2000px ) ;
-ms-transform : translateX ( -2000px ) ;
transform : translateX ( -2000px ) ;
}
60 % {
opacity : 1 ;
-webkit-transform : translateX ( 30px ) ;
-ms-transform : translateX ( 30px ) ;
transform : translateX ( 30px ) ;
}
80 % {
-webkit-transform : translateX ( -10px ) ;
-ms-transform : translateX ( -10px ) ;
transform : translateX ( -10px ) ;
}
100 % {
-webkit-transform : translateX ( 0 ) ;
-ms-transform : translateX ( 0 ) ;
transform : translateX ( 0 ) ;
}
}
. bounceInLeft {
-webkit-animation-name : bounceInLeft ;
animation-name : bounceInLeft ;
}
@ -webkit-keyframes bounceInRight {
0 % {
opacity : 0 ;
-webkit-transform : translateX ( 2000px ) ;
transform : translateX ( 2000px ) ;
}
60 % {
opacity : 1 ;
-webkit-transform : translateX ( -30px ) ;
transform : translateX ( -30px ) ;
}
80 % {
-webkit-transform : translateX ( 10px ) ;
transform : translateX ( 10px ) ;
}
100 % {
-webkit-transform : translateX ( 0 ) ;
transform : translateX ( 0 ) ;
}
}
@ keyframes bounceInRight {
0 % {
opacity : 0 ;
-webkit-transform : translateX ( 2000px ) ;
-ms-transform : translateX ( 2000px ) ;
transform : translateX ( 2000px ) ;
}
60 % {
opacity : 1 ;
-webkit-transform : translateX ( -30px ) ;
-ms-transform : translateX ( -30px ) ;
transform : translateX ( -30px ) ;
}
80 % {
-webkit-transform : translateX ( 10px ) ;
-ms-transform : translateX ( 10px ) ;
transform : translateX ( 10px ) ;
}
100 % {
-webkit-transform : translateX ( 0 ) ;
-ms-transform : translateX ( 0 ) ;
transform : translateX ( 0 ) ;
}
}
. bounceInRight {
-webkit-animation-name : bounceInRight ;
animation-name : bounceInRight ;
}
@ -webkit-keyframes bounceInUp {
0 % {
opacity : 0 ;
-webkit-transform : translateY ( 2000px ) ;
transform : translateY ( 2000px ) ;
}
60 % {
opacity : 1 ;
-webkit-transform : translateY ( -30px ) ;
transform : translateY ( -30px ) ;
}
80 % {
-webkit-transform : translateY ( 10px ) ;
transform : translateY ( 10px ) ;
}
100 % {
-webkit-transform : translateY ( 0 ) ;
transform : translateY ( 0 ) ;
}
}
@ keyframes bounceInUp {
0 % {
opacity : 0 ;
-webkit-transform : translateY ( 2000px ) ;
-ms-transform : translateY ( 2000px ) ;
transform : translateY ( 2000px ) ;
}
60 % {
opacity : 1 ;
-webkit-transform : translateY ( -30px ) ;
-ms-transform : translateY ( -30px ) ;
transform : translateY ( -30px ) ;
}
80 % {
-webkit-transform : translateY ( 10px ) ;
-ms-transform : translateY ( 10px ) ;
transform : translateY ( 10px ) ;
}
100 % {
-webkit-transform : translateY ( 0 ) ;
-ms-transform : translateY ( 0 ) ;
transform : translateY ( 0 ) ;
}
}
. bounceInUp {
-webkit-animation-name : bounceInUp ;
animation-name : bounceInUp ;
}
@ -webkit-keyframes bounceOut {
0 % {
-webkit-transform : scale ( 1 ) ;
transform : scale ( 1 ) ;
}
25 % {
-webkit-transform : scale ( 0 . 95 ) ;
transform : scale ( 0 . 95 ) ;
}
50 % {
opacity : 1 ;
-webkit-transform : scale ( 1 . 1 ) ;
transform : scale ( 1 . 1 ) ;
}
100 % {
opacity : 0 ;
-webkit-transform : scale ( 0 . 3 ) ;
transform : scale ( 0 . 3 ) ;
}
}
@ keyframes bounceOut {
0 % {
-webkit-transform : scale ( 1 ) ;
-ms-transform : scale ( 1 ) ;
transform : scale ( 1 ) ;
}
25 % {
-webkit-transform : scale ( 0 . 95 ) ;
-ms-transform : scale ( 0 . 95 ) ;
transform : scale ( 0 . 95 ) ;
}
50 % {
opacity : 1 ;
-webkit-transform : scale ( 1 . 1 ) ;
-ms-transform : scale ( 1 . 1 ) ;
transform : scale ( 1 . 1 ) ;
}
100 % {
opacity : 0 ;
-webkit-transform : scale ( 0 . 3 ) ;
-ms-transform : scale ( 0 . 3 ) ;
transform : scale ( 0 . 3 ) ;
}
}
. bounceOut {
-webkit-animation-name : bounceOut ;
animation-name : bounceOut ;
}
@ -webkit-keyframes bounceOutDown {
0 % {
-webkit-transform : translateY ( 0 ) ;
transform : translateY ( 0 ) ;
}
20 % {
opacity : 1 ;
-webkit-transform : translateY ( -20px ) ;
transform : translateY ( -20px ) ;
}
100 % {
opacity : 0 ;
-webkit-transform : translateY ( 2000px ) ;
transform : translateY ( 2000px ) ;
}
}
@ keyframes bounceOutDown {
0 % {
-webkit-transform : translateY ( 0 ) ;
-ms-transform : translateY ( 0 ) ;
transform : translateY ( 0 ) ;
}
20 % {
opacity : 1 ;
-webkit-transform : translateY ( -20px ) ;
-ms-transform : translateY ( -20px ) ;
transform : translateY ( -20px ) ;
}
100 % {
opacity : 0 ;
-webkit-transform : translateY ( 2000px ) ;
-ms-transform : translateY ( 2000px ) ;
transform : translateY ( 2000px ) ;
}
}
. bounceOutDown {
-webkit-animation-name : bounceOutDown ;
animation-name : bounceOutDown ;
}
@ -webkit-keyframes bounceOutLeft {
0 % {
-webkit-transform : translateX ( 0 ) ;
transform : translateX ( 0 ) ;
}
20 % {
opacity : 1 ;
-webkit-transform : translateX ( 20px ) ;
transform : translateX ( 20px ) ;
}
100 % {
opacity : 0 ;
-webkit-transform : translateX ( -2000px ) ;
transform : translateX ( -2000px ) ;
}
}
@ keyframes bounceOutLeft {
0 % {
-webkit-transform : translateX ( 0 ) ;
-ms-transform : translateX ( 0 ) ;
transform : translateX ( 0 ) ;
}
20 % {
opacity : 1 ;
-webkit-transform : translateX ( 20px ) ;
-ms-transform : translateX ( 20px ) ;
transform : translateX ( 20px ) ;
}
100 % {
opacity : 0 ;
-webkit-transform : translateX ( -2000px ) ;
-ms-transform : translateX ( -2000px ) ;
transform : translateX ( -2000px ) ;
}
}
. bounceOutLeft {
-webkit-animation-name : bounceOutLeft ;
animation-name : bounceOutLeft ;
}
@ -webkit-keyframes bounceOutRight {
0 % {
-webkit-transform : translateX ( 0 ) ;
transform : translateX ( 0 ) ;
}
20 % {
opacity : 1 ;
-webkit-transform : translateX ( -20px ) ;
transform : translateX ( -20px ) ;
}
100 % {
opacity : 0 ;
-webkit-transform : translateX ( 2000px ) ;
transform : translateX ( 2000px ) ;
}
}
@ keyframes bounceOutRight {
0 % {
-webkit-transform : translateX ( 0 ) ;
-ms-transform : translateX ( 0 ) ;
transform : translateX ( 0 ) ;
}
20 % {
opacity : 1 ;
-webkit-transform : translateX ( -20px ) ;
-ms-transform : translateX ( -20px ) ;
transform : translateX ( -20px ) ;
}
100 % {
opacity : 0 ;
-webkit-transform : translateX ( 2000px ) ;
-ms-transform : translateX ( 2000px ) ;
transform : translateX ( 2000px ) ;
}
}
. bounceOutRight {
-webkit-animation-name : bounceOutRight ;
animation-name : bounceOutRight ;
}
@ -webkit-keyframes bounceOutUp {
0 % {
-webkit-transform : translateY ( 0 ) ;
transform : translateY ( 0 ) ;
}
20 % {
opacity : 1 ;
-webkit-transform : translateY ( 20px ) ;
transform : translateY ( 20px ) ;
}
100 % {
opacity : 0 ;
-webkit-transform : translateY ( -2000px ) ;
transform : translateY ( -2000px ) ;
}
}
@ keyframes bounceOutUp {
0 % {
-webkit-transform : translateY ( 0 ) ;
-ms-transform : translateY ( 0 ) ;
transform : translateY ( 0 ) ;
}
20 % {
opacity : 1 ;
-webkit-transform : translateY ( 20px ) ;
-ms-transform : translateY ( 20px ) ;
transform : translateY ( 20px ) ;
}
100 % {
opacity : 0 ;
-webkit-transform : translateY ( -2000px ) ;
-ms-transform : translateY ( -2000px ) ;
transform : translateY ( -2000px ) ;
}
}
. bounceOutUp {
-webkit-animation-name : bounceOutUp ;
animation-name : bounceOutUp ;
}
@ -webkit-keyframes fadeIn {
0 % {
opacity : 0 ;
}
100 % {
opacity : 1 ;
}
}
@ keyframes fadeIn {
0 % {
opacity : 0 ;
}
100 % {
opacity : 1 ;
}
}
. fadeIn {
-webkit-animation-name : fadeIn ;
animation-name : fadeIn ;
}
@ -webkit-keyframes fadeInDown {
0 % {
opacity : 0 ;
-webkit-transform : translateY ( -20px ) ;
transform : translateY ( -20px ) ;
}
100 % {
opacity : 1 ;
-webkit-transform : translateY ( 0 ) ;
transform : translateY ( 0 ) ;
}
}
@ keyframes fadeInDown {
0 % {
opacity : 0 ;
-webkit-transform : translateY ( -20px ) ;
-ms-transform : translateY ( -20px ) ;
transform : translateY ( -20px ) ;
}
100 % {
opacity : 1 ;
-webkit-transform : translateY ( 0 ) ;
-ms-transform : translateY ( 0 ) ;
transform : translateY ( 0 ) ;
}
}
. fadeInDown {
-webkit-animation-name : fadeInDown ;
animation-name : fadeInDown ;
}
@ -webkit-keyframes fadeInDownBig {
0 % {
opacity : 0 ;
-webkit-transform : translateY ( -2000px ) ;
transform : translateY ( -2000px ) ;
}
100 % {
opacity : 1 ;
-webkit-transform : translateY ( 0 ) ;
transform : translateY ( 0 ) ;
}
}
@ keyframes fadeInDownBig {
0 % {
opacity : 0 ;
-webkit-transform : translateY ( -2000px ) ;
-ms-transform : translateY ( -2000px ) ;
transform : translateY ( -2000px ) ;
}
100 % {
opacity : 1 ;
-webkit-transform : translateY ( 0 ) ;
-ms-transform : translateY ( 0 ) ;
transform : translateY ( 0 ) ;
}
}
. fadeInDownBig {
-webkit-animation-name : fadeInDownBig ;
animation-name : fadeInDownBig ;
}
@ -webkit-keyframes fadeInLeft {
0 % {
opacity : 0 ;
-webkit-transform : translateX ( -20px ) ;
transform : translateX ( -20px ) ;
}
100 % {
opacity : 1 ;
-webkit-transform : translateX ( 0 ) ;
transform : translateX ( 0 ) ;
}
}
@ keyframes fadeInLeft {
0 % {
opacity : 0 ;
-webkit-transform : translateX ( -20px ) ;
-ms-transform : translateX ( -20px ) ;
transform : translateX ( -20px ) ;
}
100 % {
opacity : 1 ;
-webkit-transform : translateX ( 0 ) ;
-ms-transform : translateX ( 0 ) ;
transform : translateX ( 0 ) ;
}
}
. fadeInLeft {
-webkit-animation-name : fadeInLeft ;
animation-name : fadeInLeft ;
}
@ -webkit-keyframes fadeInLeftBig {
0 % {
opacity : 0 ;
-webkit-transform : translateX ( -2000px ) ;
transform : translateX ( -2000px ) ;
}
100 % {
opacity : 1 ;
-webkit-transform : translateX ( 0 ) ;
transform : translateX ( 0 ) ;
}
}
@ keyframes fadeInLeftBig {
0 % {
opacity : 0 ;
-webkit-transform : translateX ( -2000px ) ;
-ms-transform : translateX ( -2000px ) ;
transform : translateX ( -2000px ) ;
}
100 % {
opacity : 1 ;
-webkit-transform : translateX ( 0 ) ;
-ms-transform : translateX ( 0 ) ;
transform : translateX ( 0 ) ;
}
}
. fadeInLeftBig {
-webkit-animation-name : fadeInLeftBig ;
animation-name : fadeInLeftBig ;
}
@ -webkit-keyframes fadeInRight {
0 % {
opacity : 0 ;
-webkit-transform : translateX ( 20px ) ;
transform : translateX ( 20px ) ;
}
100 % {
opacity : 1 ;
-webkit-transform : translateX ( 0 ) ;
transform : translateX ( 0 ) ;
}
}
@ keyframes fadeInRight {
0 % {
opacity : 0 ;
-webkit-transform : translateX ( 20px ) ;
-ms-transform : translateX ( 20px ) ;
transform : translateX ( 20px ) ;
}
100 % {
opacity : 1 ;
-webkit-transform : translateX ( 0 ) ;
-ms-transform : translateX ( 0 ) ;
transform : translateX ( 0 ) ;
}
}
. fadeInRight {
-webkit-animation-name : fadeInRight ;
animation-name : fadeInRight ;
}
@ -webkit-keyframes fadeInRightBig {
0 % {
opacity : 0 ;
-webkit-transform : translateX ( 2000px ) ;
transform : translateX ( 2000px ) ;
}
100 % {
opacity : 1 ;
-webkit-transform : translateX ( 0 ) ;
transform : translateX ( 0 ) ;
}
}
@ keyframes fadeInRightBig {
0 % {
opacity : 0 ;
-webkit-transform : translateX ( 2000px ) ;
-ms-transform : translateX ( 2000px ) ;
transform : translateX ( 2000px ) ;
}
100 % {
opacity : 1 ;
-webkit-transform : translateX ( 0 ) ;
-ms-transform : translateX ( 0 ) ;
transform : translateX ( 0 ) ;
}
}
. fadeInRightBig {
-webkit-animation-name : fadeInRightBig ;
animation-name : fadeInRightBig ;
}
@ -webkit-keyframes fadeInUp {
0 % {
opacity : 0 ;
-webkit-transform : translateY ( 20px ) ;
transform : translateY ( 20px ) ;
}
100 % {
opacity : 1 ;
-webkit-transform : translateY ( 0 ) ;
transform : translateY ( 0 ) ;
}
}
@ keyframes fadeInUp {
0 % {
opacity : 0 ;
-webkit-transform : translateY ( 20px ) ;
-ms-transform : translateY ( 20px ) ;
transform : translateY ( 20px ) ;
}
100 % {
opacity : 1 ;
-webkit-transform : translateY ( 0 ) ;
-ms-transform : translateY ( 0 ) ;
transform : translateY ( 0 ) ;
}
}
. fadeInUp {
-webkit-animation-name : fadeInUp ;
animation-name : fadeInUp ;
}
@ -webkit-keyframes fadeInUpBig {
0 % {
opacity : 0 ;
-webkit-transform : translateY ( 2000px ) ;
transform : translateY ( 2000px ) ;
}
100 % {
opacity : 1 ;
-webkit-transform : translateY ( 0 ) ;
transform : translateY ( 0 ) ;
}
}
@ keyframes fadeInUpBig {
0 % {
opacity : 0 ;
-webkit-transform : translateY ( 2000px ) ;
-ms-transform : translateY ( 2000px ) ;
transform : translateY ( 2000px ) ;
}
100 % {
opacity : 1 ;
-webkit-transform : translateY ( 0 ) ;
-ms-transform : translateY ( 0 ) ;
transform : translateY ( 0 ) ;
}
}
. fadeInUpBig {
-webkit-animation-name : fadeInUpBig ;
animation-name : fadeInUpBig ;
}
@ -webkit-keyframes fadeOut {
0 % {
opacity : 1 ;
}
100 % {
opacity : 0 ;
}
}
@ keyframes fadeOut {
0 % {
opacity : 1 ;
}
100 % {
opacity : 0 ;
}
}
. fadeOut {
-webkit-animation-name : fadeOut ;
animation-name : fadeOut ;
}
@ -webkit-keyframes fadeOutDown {
0 % {
opacity : 1 ;
-webkit-transform : translateY ( 0 ) ;
transform : translateY ( 0 ) ;
}
100 % {
opacity : 0 ;
-webkit-transform : translateY ( 20px ) ;
transform : translateY ( 20px ) ;
}
}
@ keyframes fadeOutDown {
0 % {
opacity : 1 ;
-webkit-transform : translateY ( 0 ) ;
-ms-transform : translateY ( 0 ) ;
transform : translateY ( 0 ) ;
}
100 % {
opacity : 0 ;
-webkit-transform : translateY ( 20px ) ;
-ms-transform : translateY ( 20px ) ;
transform : translateY ( 20px ) ;
}
}
. fadeOutDown {
-webkit-animation-name : fadeOutDown ;
animation-name : fadeOutDown ;
}
@ -webkit-keyframes fadeOutDownBig {
0 % {
opacity : 1 ;
-webkit-transform : translateY ( 0 ) ;
transform : translateY ( 0 ) ;
}
100 % {
opacity : 0 ;
-webkit-transform : translateY ( 2000px ) ;
transform : translateY ( 2000px ) ;
}
}
@ keyframes fadeOutDownBig {
0 % {
opacity : 1 ;
-webkit-transform : translateY ( 0 ) ;
-ms-transform : translateY ( 0 ) ;
transform : translateY ( 0 ) ;
}
100 % {
opacity : 0 ;
-webkit-transform : translateY ( 2000px ) ;
-ms-transform : translateY ( 2000px ) ;
transform : translateY ( 2000px ) ;
}
}
. fadeOutDownBig {
-webkit-animation-name : fadeOutDownBig ;
animation-name : fadeOutDownBig ;
}
@ -webkit-keyframes fadeOutLeft {
0 % {
opacity : 1 ;
-webkit-transform : translateX ( 0 ) ;
transform : translateX ( 0 ) ;
}
100 % {
opacity : 0 ;
-webkit-transform : translateX ( -20px ) ;
transform : translateX ( -20px ) ;
}
}
@ keyframes fadeOutLeft {
0 % {
opacity : 1 ;
-webkit-transform : translateX ( 0 ) ;
-ms-transform : translateX ( 0 ) ;
transform : translateX ( 0 ) ;
}
100 % {
opacity : 0 ;
-webkit-transform : translateX ( -20px ) ;
-ms-transform : translateX ( -20px ) ;
transform : translateX ( -20px ) ;
}
}
. fadeOutLeft {
-webkit-animation-name : fadeOutLeft ;
animation-name : fadeOutLeft ;
}
@ -webkit-keyframes fadeOutLeftBig {
0 % {
opacity : 1 ;
-webkit-transform : translateX ( 0 ) ;
transform : translateX ( 0 ) ;
}
100 % {
opacity : 0 ;
-webkit-transform : translateX ( -2000px ) ;
transform : translateX ( -2000px ) ;
}
}
@ keyframes fadeOutLeftBig {
0 % {
opacity : 1 ;
-webkit-transform : translateX ( 0 ) ;
-ms-transform : translateX ( 0 ) ;
transform : translateX ( 0 ) ;
}
100 % {
opacity : 0 ;
-webkit-transform : translateX ( -2000px ) ;
-ms-transform : translateX ( -2000px ) ;
transform : translateX ( -2000px ) ;
}
}
. fadeOutLeftBig {
-webkit-animation-name : fadeOutLeftBig ;
animation-name : fadeOutLeftBig ;
}
@ -webkit-keyframes fadeOutRight {
0 % {
opacity : 1 ;
-webkit-transform : translateX ( 0 ) ;
transform : translateX ( 0 ) ;
}
100 % {
opacity : 0 ;
-webkit-transform : translateX ( 20px ) ;
transform : translateX ( 20px ) ;
}
}
@ keyframes fadeOutRight {
0 % {
opacity : 1 ;
-webkit-transform : translateX ( 0 ) ;
-ms-transform : translateX ( 0 ) ;
transform : translateX ( 0 ) ;
}
100 % {
opacity : 0 ;
-webkit-transform : translateX ( 20px ) ;
-ms-transform : translateX ( 20px ) ;
transform : translateX ( 20px ) ;
}
}
. fadeOutRight {
-webkit-animation-name : fadeOutRight ;
animation-name : fadeOutRight ;
}
@ -webkit-keyframes fadeOutRightBig {
0 % {
opacity : 1 ;
-webkit-transform : translateX ( 0 ) ;
transform : translateX ( 0 ) ;
}
100 % {
opacity : 0 ;
-webkit-transform : translateX ( 2000px ) ;
transform : translateX ( 2000px ) ;
}
}
@ keyframes fadeOutRightBig {
0 % {
opacity : 1 ;
-webkit-transform : translateX ( 0 ) ;
-ms-transform : translateX ( 0 ) ;
transform : translateX ( 0 ) ;
}
100 % {
opacity : 0 ;
-webkit-transform : translateX ( 2000px ) ;
-ms-transform : translateX ( 2000px ) ;
transform : translateX ( 2000px ) ;
}
}
. fadeOutRightBig {
-webkit-animation-name : fadeOutRightBig ;
animation-name : fadeOutRightBig ;
}
@ -webkit-keyframes fadeOutUp {
0 % {
opacity : 1 ;
-webkit-transform : translateY ( 0 ) ;
transform : translateY ( 0 ) ;
}
100 % {
opacity : 0 ;
-webkit-transform : translateY ( -20px ) ;
transform : translateY ( -20px ) ;
}
}
@ keyframes fadeOutUp {
0 % {
opacity : 1 ;
-webkit-transform : translateY ( 0 ) ;
-ms-transform : translateY ( 0 ) ;
transform : translateY ( 0 ) ;
}
100 % {
opacity : 0 ;
-webkit-transform : translateY ( -20px ) ;
-ms-transform : translateY ( -20px ) ;
transform : translateY ( -20px ) ;
}
}
. fadeOutUp {
-webkit-animation-name : fadeOutUp ;
animation-name : fadeOutUp ;
}
@ -webkit-keyframes fadeOutUpBig {
0 % {
opacity : 1 ;
-webkit-transform : translateY ( 0 ) ;
transform : translateY ( 0 ) ;
}
100 % {
opacity : 0 ;
-webkit-transform : translateY ( -2000px ) ;
transform : translateY ( -2000px ) ;
}
}
@ keyframes fadeOutUpBig {
0 % {
opacity : 1 ;
-webkit-transform : translateY ( 0 ) ;
-ms-transform : translateY ( 0 ) ;
transform : translateY ( 0 ) ;
}
100 % {
opacity : 0 ;
-webkit-transform : translateY ( -2000px ) ;
-ms-transform : translateY ( -2000px ) ;
transform : translateY ( -2000px ) ;
}
}
. fadeOutUpBig {
-webkit-animation-name : fadeOutUpBig ;
animation-name : fadeOutUpBig ;
}
@ -webkit-keyframes flip {
0 % {
-webkit-transform : perspective ( 400px ) translateZ ( 0 ) rotateY ( 0 ) scale ( 1 ) ;
transform : perspective ( 400px ) translateZ ( 0 ) rotateY ( 0 ) scale ( 1 ) ;
-webkit-animation-timing-function : ease-out ;
animation-timing-function : ease-out ;
}
40 % {
-webkit-transform : perspective ( 400px ) translateZ ( 150px ) rotateY ( 170deg ) scale ( 1 ) ;
transform : perspective ( 400px ) translateZ ( 150px ) rotateY ( 170deg ) scale ( 1 ) ;
-webkit-animation-timing-function : ease-out ;
animation-timing-function : ease-out ;
}
50 % {
-webkit-transform : perspective ( 400px ) translateZ ( 150px ) rotateY ( 190deg ) scale ( 1 ) ;
transform : perspective ( 400px ) translateZ ( 150px ) rotateY ( 190deg ) scale ( 1 ) ;
-webkit-animation-timing-function : ease-in ;
animation-timing-function : ease-in ;
}
80 % {
-webkit-transform : perspective ( 400px ) translateZ ( 0 ) rotateY ( 360deg ) scale ( 0 . 95 ) ;
transform : perspective ( 400px ) translateZ ( 0 ) rotateY ( 360deg ) scale ( 0 . 95 ) ;
-webkit-animation-timing-function : ease-in ;
animation-timing-function : ease-in ;
}
100 % {
-webkit-transform : perspective ( 400px ) translateZ ( 0 ) rotateY ( 360deg ) scale ( 1 ) ;
transform : perspective ( 400px ) translateZ ( 0 ) rotateY ( 360deg ) scale ( 1 ) ;
-webkit-animation-timing-function : ease-in ;
animation-timing-function : ease-in ;
}
}
@ keyframes flip {
0 % {
-webkit-transform : perspective ( 400px ) translateZ ( 0 ) rotateY ( 0 ) scale ( 1 ) ;
-ms-transform : perspective ( 400px ) translateZ ( 0 ) rotateY ( 0 ) scale ( 1 ) ;
transform : perspective ( 400px ) translateZ ( 0 ) rotateY ( 0 ) scale ( 1 ) ;
-webkit-animation-timing-function : ease-out ;
animation-timing-function : ease-out ;
}
40 % {
-webkit-transform : perspective ( 400px ) translateZ ( 150px ) rotateY ( 170deg ) scale ( 1 ) ;
-ms-transform : perspective ( 400px ) translateZ ( 150px ) rotateY ( 170deg ) scale ( 1 ) ;
transform : perspective ( 400px ) translateZ ( 150px ) rotateY ( 170deg ) scale ( 1 ) ;
-webkit-animation-timing-function : ease-out ;
animation-timing-function : ease-out ;
}
50 % {
-webkit-transform : perspective ( 400px ) translateZ ( 150px ) rotateY ( 190deg ) scale ( 1 ) ;
-ms-transform : perspective ( 400px ) translateZ ( 150px ) rotateY ( 190deg ) scale ( 1 ) ;
transform : perspective ( 400px ) translateZ ( 150px ) rotateY ( 190deg ) scale ( 1 ) ;
-webkit-animation-timing-function : ease-in ;
animation-timing-function : ease-in ;
}
80 % {
-webkit-transform : perspective ( 400px ) translateZ ( 0 ) rotateY ( 360deg ) scale ( 0 . 95 ) ;
-ms-transform : perspective ( 400px ) translateZ ( 0 ) rotateY ( 360deg ) scale ( 0 . 95 ) ;
transform : perspective ( 400px ) translateZ ( 0 ) rotateY ( 360deg ) scale ( 0 . 95 ) ;
-webkit-animation-timing-function : ease-in ;
animation-timing-function : ease-in ;
}
100 % {
-webkit-transform : perspective ( 400px ) translateZ ( 0 ) rotateY ( 360deg ) scale ( 1 ) ;
-ms-transform : perspective ( 400px ) translateZ ( 0 ) rotateY ( 360deg ) scale ( 1 ) ;
transform : perspective ( 400px ) translateZ ( 0 ) rotateY ( 360deg ) scale ( 1 ) ;
-webkit-animation-timing-function : ease-in ;
animation-timing-function : ease-in ;
}
}
. animated . flip {
-webkit-backface-visibility : visible ;
-ms-backface-visibility : visible ;
backface-visibility : visible ;
-webkit-animation-name : flip ;
animation-name : flip ;
}
@ -webkit-keyframes flipInX {
0 % {
-webkit-transform : perspective ( 400px ) rotateX ( 90deg ) ;
transform : perspective ( 400px ) rotateX ( 90deg ) ;
opacity : 0 ;
}
40 % {
-webkit-transform : perspective ( 400px ) rotateX ( -10deg ) ;
transform : perspective ( 400px ) rotateX ( -10deg ) ;
}
70 % {
-webkit-transform : perspective ( 400px ) rotateX ( 10deg ) ;
transform : perspective ( 400px ) rotateX ( 10deg ) ;
}
100 % {
-webkit-transform : perspective ( 400px ) rotateX ( 0deg ) ;
transform : perspective ( 400px ) rotateX ( 0deg ) ;
opacity : 1 ;
}
}
@ keyframes flipInX {
0 % {
-webkit-transform : perspective ( 400px ) rotateX ( 90deg ) ;
-ms-transform : perspective ( 400px ) rotateX ( 90deg ) ;
transform : perspective ( 400px ) rotateX ( 90deg ) ;
opacity : 0 ;
}
40 % {
-webkit-transform : perspective ( 400px ) rotateX ( -10deg ) ;
-ms-transform : perspective ( 400px ) rotateX ( -10deg ) ;
transform : perspective ( 400px ) rotateX ( -10deg ) ;
}
70 % {
-webkit-transform : perspective ( 400px ) rotateX ( 10deg ) ;
-ms-transform : perspective ( 400px ) rotateX ( 10deg ) ;
transform : perspective ( 400px ) rotateX ( 10deg ) ;
}
100 % {
-webkit-transform : perspective ( 400px ) rotateX ( 0deg ) ;
-ms-transform : perspective ( 400px ) rotateX ( 0deg ) ;
transform : perspective ( 400px ) rotateX ( 0deg ) ;
opacity : 1 ;
}
}
. flipInX {
-webkit-backface-visibility : visible ! important ;
-ms-backface-visibility : visible ! important ;
backface-visibility : visible ! important ;
-webkit-animation-name : flipInX ;
animation-name : flipInX ;
}
@ -webkit-keyframes flipInY {
0 % {
-webkit-transform : perspective ( 400px ) rotateY ( 90deg ) ;
transform : perspective ( 400px ) rotateY ( 90deg ) ;
opacity : 0 ;
}
40 % {
-webkit-transform : perspective ( 400px ) rotateY ( -10deg ) ;
transform : perspective ( 400px ) rotateY ( -10deg ) ;
}
70 % {
-webkit-transform : perspective ( 400px ) rotateY ( 10deg ) ;
transform : perspective ( 400px ) rotateY ( 10deg ) ;
}
100 % {
-webkit-transform : perspective ( 400px ) rotateY ( 0deg ) ;
transform : perspective ( 400px ) rotateY ( 0deg ) ;
opacity : 1 ;
}
}
@ keyframes flipInY {
0 % {
-webkit-transform : perspective ( 400px ) rotateY ( 90deg ) ;
-ms-transform : perspective ( 400px ) rotateY ( 90deg ) ;
transform : perspective ( 400px ) rotateY ( 90deg ) ;
opacity : 0 ;
}
40 % {
-webkit-transform : perspective ( 400px ) rotateY ( -10deg ) ;
-ms-transform : perspective ( 400px ) rotateY ( -10deg ) ;
transform : perspective ( 400px ) rotateY ( -10deg ) ;
}
70 % {
-webkit-transform : perspective ( 400px ) rotateY ( 10deg ) ;
-ms-transform : perspective ( 400px ) rotateY ( 10deg ) ;
transform : perspective ( 400px ) rotateY ( 10deg ) ;
}
100 % {
-webkit-transform : perspective ( 400px ) rotateY ( 0deg ) ;
-ms-transform : perspective ( 400px ) rotateY ( 0deg ) ;
transform : perspective ( 400px ) rotateY ( 0deg ) ;
opacity : 1 ;
}
}
. flipInY {
-webkit-backface-visibility : visible ! important ;
-ms-backface-visibility : visible ! important ;
backface-visibility : visible ! important ;
-webkit-animation-name : flipInY ;
animation-name : flipInY ;
}
@ -webkit-keyframes flipOutX {
0 % {
-webkit-transform : perspective ( 400px ) rotateX ( 0deg ) ;
transform : perspective ( 400px ) rotateX ( 0deg ) ;
opacity : 1 ;
}
100 % {
-webkit-transform : perspective ( 400px ) rotateX ( 90deg ) ;
transform : perspective ( 400px ) rotateX ( 90deg ) ;
opacity : 0 ;
}
}
@ keyframes flipOutX {
0 % {
-webkit-transform : perspective ( 400px ) rotateX ( 0deg ) ;
-ms-transform : perspective ( 400px ) rotateX ( 0deg ) ;
transform : perspective ( 400px ) rotateX ( 0deg ) ;
opacity : 1 ;
}
100 % {
-webkit-transform : perspective ( 400px ) rotateX ( 90deg ) ;
-ms-transform : perspective ( 400px ) rotateX ( 90deg ) ;
transform : perspective ( 400px ) rotateX ( 90deg ) ;
opacity : 0 ;
}
}
. flipOutX {
-webkit-animation-name : flipOutX ;
animation-name : flipOutX ;
-webkit-backface-visibility : visible ! important ;
-ms-backface-visibility : visible ! important ;
backface-visibility : visible ! important ;
}
@ -webkit-keyframes flipOutY {
0 % {
-webkit-transform : perspective ( 400px ) rotateY ( 0deg ) ;
transform : perspective ( 400px ) rotateY ( 0deg ) ;
opacity : 1 ;
}
100 % {
-webkit-transform : perspective ( 400px ) rotateY ( 90deg ) ;
transform : perspective ( 400px ) rotateY ( 90deg ) ;
opacity : 0 ;
}
}
@ keyframes flipOutY {
0 % {
-webkit-transform : perspective ( 400px ) rotateY ( 0deg ) ;
-ms-transform : perspective ( 400px ) rotateY ( 0deg ) ;
transform : perspective ( 400px ) rotateY ( 0deg ) ;
opacity : 1 ;
}
100 % {
-webkit-transform : perspective ( 400px ) rotateY ( 90deg ) ;
-ms-transform : perspective ( 400px ) rotateY ( 90deg ) ;
transform : perspective ( 400px ) rotateY ( 90deg ) ;
opacity : 0 ;
}
}
. flipOutY {
-webkit-backface-visibility : visible ! important ;
-ms-backface-visibility : visible ! important ;
backface-visibility : visible ! important ;
-webkit-animation-name : flipOutY ;
animation-name : flipOutY ;
}
@ -webkit-keyframes lightSpeedIn {
0 % {
-webkit-transform : translateX ( 100 % ) skewX ( -30deg ) ;
transform : translateX ( 100 % ) skewX ( -30deg ) ;
opacity : 0 ;
}
60 % {
-webkit-transform : translateX ( -20 % ) skewX ( 30deg ) ;
transform : translateX ( -20 % ) skewX ( 30deg ) ;
opacity : 1 ;
}
80 % {
-webkit-transform : translateX ( 0 % ) skewX ( -15deg ) ;
transform : translateX ( 0 % ) skewX ( -15deg ) ;
opacity : 1 ;
}
100 % {
-webkit-transform : translateX ( 0 % ) skewX ( 0deg ) ;
transform : translateX ( 0 % ) skewX ( 0deg ) ;
opacity : 1 ;
}
}
@ keyframes lightSpeedIn {
0 % {
-webkit-transform : translateX ( 100 % ) skewX ( -30deg ) ;
-ms-transform : translateX ( 100 % ) skewX ( -30deg ) ;
transform : translateX ( 100 % ) skewX ( -30deg ) ;
opacity : 0 ;
}
60 % {
-webkit-transform : translateX ( -20 % ) skewX ( 30deg ) ;
-ms-transform : translateX ( -20 % ) skewX ( 30deg ) ;
transform : translateX ( -20 % ) skewX ( 30deg ) ;
opacity : 1 ;
}
80 % {
-webkit-transform : translateX ( 0 % ) skewX ( -15deg ) ;
-ms-transform : translateX ( 0 % ) skewX ( -15deg ) ;
transform : translateX ( 0 % ) skewX ( -15deg ) ;
opacity : 1 ;
}
100 % {
-webkit-transform : translateX ( 0 % ) skewX ( 0deg ) ;
-ms-transform : translateX ( 0 % ) skewX ( 0deg ) ;
transform : translateX ( 0 % ) skewX ( 0deg ) ;
opacity : 1 ;
}
}
. lightSpeedIn {
-webkit-animation-name : lightSpeedIn ;
animation-name : lightSpeedIn ;
-webkit-animation-timing-function : ease-out ;
animation-timing-function : ease-out ;
}
@ -webkit-keyframes lightSpeedOut {
0 % {
-webkit-transform : translateX ( 0 % ) skewX ( 0deg ) ;
transform : translateX ( 0 % ) skewX ( 0deg ) ;
opacity : 1 ;
}
100 % {
-webkit-transform : translateX ( 100 % ) skewX ( -30deg ) ;
transform : translateX ( 100 % ) skewX ( -30deg ) ;
opacity : 0 ;
}
}
@ keyframes lightSpeedOut {
0 % {
-webkit-transform : translateX ( 0 % ) skewX ( 0deg ) ;
-ms-transform : translateX ( 0 % ) skewX ( 0deg ) ;
transform : translateX ( 0 % ) skewX ( 0deg ) ;
opacity : 1 ;
}
100 % {
-webkit-transform : translateX ( 100 % ) skewX ( -30deg ) ;
-ms-transform : translateX ( 100 % ) skewX ( -30deg ) ;
transform : translateX ( 100 % ) skewX ( -30deg ) ;
opacity : 0 ;
}
}
. lightSpeedOut {
-webkit-animation-name : lightSpeedOut ;
animation-name : lightSpeedOut ;
-webkit-animation-timing-function : ease-in ;
animation-timing-function : ease-in ;
}
@ -webkit-keyframes rotateIn {
0 % {
-webkit-transform-origin : center center ;
transform-origin : center center ;
-webkit-transform : rotate ( -200deg ) ;
transform : rotate ( -200deg ) ;
opacity : 0 ;
}
100 % {
-webkit-transform-origin : center center ;
transform-origin : center center ;
-webkit-transform : rotate ( 0 ) ;
transform : rotate ( 0 ) ;
opacity : 1 ;
}
}
@ keyframes rotateIn {
0 % {
-webkit-transform-origin : center center ;
-ms-transform-origin : center center ;
transform-origin : center center ;
-webkit-transform : rotate ( -200deg ) ;
-ms-transform : rotate ( -200deg ) ;
transform : rotate ( -200deg ) ;
opacity : 0 ;
}
100 % {
-webkit-transform-origin : center center ;
-ms-transform-origin : center center ;
transform-origin : center center ;
-webkit-transform : rotate ( 0 ) ;
-ms-transform : rotate ( 0 ) ;
transform : rotate ( 0 ) ;
opacity : 1 ;
}
}
. rotateIn {
-webkit-animation-name : rotateIn ;
animation-name : rotateIn ;
}
@ -webkit-keyframes rotateInDownLeft {
0 % {
-webkit-transform-origin : left bottom ;
transform-origin : left bottom ;
-webkit-transform : rotate ( -90deg ) ;
transform : rotate ( -90deg ) ;
opacity : 0 ;
}
100 % {
-webkit-transform-origin : left bottom ;
transform-origin : left bottom ;
-webkit-transform : rotate ( 0 ) ;
transform : rotate ( 0 ) ;
opacity : 1 ;
}
}
@ keyframes rotateInDownLeft {
0 % {
-webkit-transform-origin : left bottom ;
-ms-transform-origin : left bottom ;
transform-origin : left bottom ;
-webkit-transform : rotate ( -90deg ) ;
-ms-transform : rotate ( -90deg ) ;
transform : rotate ( -90deg ) ;
opacity : 0 ;
}
100 % {
-webkit-transform-origin : left bottom ;
-ms-transform-origin : left bottom ;
transform-origin : left bottom ;
-webkit-transform : rotate ( 0 ) ;
-ms-transform : rotate ( 0 ) ;
transform : rotate ( 0 ) ;
opacity : 1 ;
}
}
. rotateInDownLeft {
-webkit-animation-name : rotateInDownLeft ;
animation-name : rotateInDownLeft ;
}
@ -webkit-keyframes rotateInDownRight {
0 % {
-webkit-transform-origin : right bottom ;
transform-origin : right bottom ;
-webkit-transform : rotate ( 90deg ) ;
transform : rotate ( 90deg ) ;
opacity : 0 ;
}
100 % {
-webkit-transform-origin : right bottom ;
transform-origin : right bottom ;
-webkit-transform : rotate ( 0 ) ;
transform : rotate ( 0 ) ;
opacity : 1 ;
}
}
@ keyframes rotateInDownRight {
0 % {
-webkit-transform-origin : right bottom ;
-ms-transform-origin : right bottom ;
transform-origin : right bottom ;
-webkit-transform : rotate ( 90deg ) ;
-ms-transform : rotate ( 90deg ) ;
transform : rotate ( 90deg ) ;
opacity : 0 ;
}
100 % {
-webkit-transform-origin : right bottom ;
-ms-transform-origin : right bottom ;
transform-origin : right bottom ;
-webkit-transform : rotate ( 0 ) ;
-ms-transform : rotate ( 0 ) ;
transform : rotate ( 0 ) ;
opacity : 1 ;
}
}
. rotateInDownRight {
-webkit-animation-name : rotateInDownRight ;
animation-name : rotateInDownRight ;
}
@ -webkit-keyframes rotateInUpLeft {
0 % {
-webkit-transform-origin : left bottom ;
transform-origin : left bottom ;
-webkit-transform : rotate ( 90deg ) ;
transform : rotate ( 90deg ) ;
opacity : 0 ;
}
100 % {
-webkit-transform-origin : left bottom ;
transform-origin : left bottom ;
-webkit-transform : rotate ( 0 ) ;
transform : rotate ( 0 ) ;
opacity : 1 ;
}
}
@ keyframes rotateInUpLeft {
0 % {
-webkit-transform-origin : left bottom ;
-ms-transform-origin : left bottom ;
transform-origin : left bottom ;
-webkit-transform : rotate ( 90deg ) ;
-ms-transform : rotate ( 90deg ) ;
transform : rotate ( 90deg ) ;
opacity : 0 ;
}
100 % {
-webkit-transform-origin : left bottom ;
-ms-transform-origin : left bottom ;
transform-origin : left bottom ;
-webkit-transform : rotate ( 0 ) ;
-ms-transform : rotate ( 0 ) ;
transform : rotate ( 0 ) ;
opacity : 1 ;
}
}
. rotateInUpLeft {
-webkit-animation-name : rotateInUpLeft ;
animation-name : rotateInUpLeft ;
}
@ -webkit-keyframes rotateInUpRight {
0 % {
-webkit-transform-origin : right bottom ;
transform-origin : right bottom ;
-webkit-transform : rotate ( -90deg ) ;
transform : rotate ( -90deg ) ;
opacity : 0 ;
}
100 % {
-webkit-transform-origin : right bottom ;
transform-origin : right bottom ;
-webkit-transform : rotate ( 0 ) ;
transform : rotate ( 0 ) ;
opacity : 1 ;
}
}
@ keyframes rotateInUpRight {
0 % {
-webkit-transform-origin : right bottom ;
-ms-transform-origin : right bottom ;
transform-origin : right bottom ;
-webkit-transform : rotate ( -90deg ) ;
-ms-transform : rotate ( -90deg ) ;
transform : rotate ( -90deg ) ;
opacity : 0 ;
}
100 % {
-webkit-transform-origin : right bottom ;
-ms-transform-origin : right bottom ;
transform-origin : right bottom ;
-webkit-transform : rotate ( 0 ) ;
-ms-transform : rotate ( 0 ) ;
transform : rotate ( 0 ) ;
opacity : 1 ;
}
}
. rotateInUpRight {
-webkit-animation-name : rotateInUpRight ;
animation-name : rotateInUpRight ;
}
@ -webkit-keyframes rotateOut {
0 % {
-webkit-transform-origin : center center ;
transform-origin : center center ;
-webkit-transform : rotate ( 0 ) ;
transform : rotate ( 0 ) ;
opacity : 1 ;
}
100 % {
-webkit-transform-origin : center center ;
transform-origin : center center ;
-webkit-transform : rotate ( 200deg ) ;
transform : rotate ( 200deg ) ;
opacity : 0 ;
}
}
@ keyframes rotateOut {
0 % {
-webkit-transform-origin : center center ;
-ms-transform-origin : center center ;
transform-origin : center center ;
-webkit-transform : rotate ( 0 ) ;
-ms-transform : rotate ( 0 ) ;
transform : rotate ( 0 ) ;
opacity : 1 ;
}
100 % {
-webkit-transform-origin : center center ;
-ms-transform-origin : center center ;
transform-origin : center center ;
-webkit-transform : rotate ( 200deg ) ;
-ms-transform : rotate ( 200deg ) ;
transform : rotate ( 200deg ) ;
opacity : 0 ;
}
}
. rotateOut {
-webkit-animation-name : rotateOut ;
animation-name : rotateOut ;
}
@ -webkit-keyframes rotateOutDownLeft {
0 % {
-webkit-transform-origin : left bottom ;
transform-origin : left bottom ;
-webkit-transform : rotate ( 0 ) ;
transform : rotate ( 0 ) ;
opacity : 1 ;
}
100 % {
-webkit-transform-origin : left bottom ;
transform-origin : left bottom ;
-webkit-transform : rotate ( 90deg ) ;
transform : rotate ( 90deg ) ;
opacity : 0 ;
}
}
@ keyframes rotateOutDownLeft {
0 % {
-webkit-transform-origin : left bottom ;
-ms-transform-origin : left bottom ;
transform-origin : left bottom ;
-webkit-transform : rotate ( 0 ) ;
-ms-transform : rotate ( 0 ) ;
transform : rotate ( 0 ) ;
opacity : 1 ;
}
100 % {
-webkit-transform-origin : left bottom ;
-ms-transform-origin : left bottom ;
transform-origin : left bottom ;
-webkit-transform : rotate ( 90deg ) ;
-ms-transform : rotate ( 90deg ) ;
transform : rotate ( 90deg ) ;
opacity : 0 ;
}
}
. rotateOutDownLeft {
-webkit-animation-name : rotateOutDownLeft ;
animation-name : rotateOutDownLeft ;
}
@ -webkit-keyframes rotateOutDownRight {
0 % {
-webkit-transform-origin : right bottom ;
transform-origin : right bottom ;
-webkit-transform : rotate ( 0 ) ;
transform : rotate ( 0 ) ;
opacity : 1 ;
}
100 % {
-webkit-transform-origin : right bottom ;
transform-origin : right bottom ;
-webkit-transform : rotate ( -90deg ) ;
transform : rotate ( -90deg ) ;
opacity : 0 ;
}
}
@ keyframes rotateOutDownRight {
0 % {
-webkit-transform-origin : right bottom ;
-ms-transform-origin : right bottom ;
transform-origin : right bottom ;
-webkit-transform : rotate ( 0 ) ;
-ms-transform : rotate ( 0 ) ;
transform : rotate ( 0 ) ;
opacity : 1 ;
}
100 % {
-webkit-transform-origin : right bottom ;
-ms-transform-origin : right bottom ;
transform-origin : right bottom ;
-webkit-transform : rotate ( -90deg ) ;
-ms-transform : rotate ( -90deg ) ;
transform : rotate ( -90deg ) ;
opacity : 0 ;
}
}
. rotateOutDownRight {
-webkit-animation-name : rotateOutDownRight ;
animation-name : rotateOutDownRight ;
}
@ -webkit-keyframes rotateOutUpLeft {
0 % {
-webkit-transform-origin : left bottom ;
transform-origin : left bottom ;
-webkit-transform : rotate ( 0 ) ;
transform : rotate ( 0 ) ;
opacity : 1 ;
}
100 % {
-webkit-transform-origin : left bottom ;
transform-origin : left bottom ;
-webkit-transform : rotate ( -90deg ) ;
transform : rotate ( -90deg ) ;
opacity : 0 ;
}
}
@ keyframes rotateOutUpLeft {
0 % {
-webkit-transform-origin : left bottom ;
-ms-transform-origin : left bottom ;
transform-origin : left bottom ;
-webkit-transform : rotate ( 0 ) ;
-ms-transform : rotate ( 0 ) ;
transform : rotate ( 0 ) ;
opacity : 1 ;
}
100 % {
-webkit-transform-origin : left bottom ;
-ms-transform-origin : left bottom ;
transform-origin : left bottom ;
-webkit-transform : rotate ( -90deg ) ;
-ms-transform : rotate ( -90deg ) ;
transform : rotate ( -90deg ) ;
opacity : 0 ;
}
}
. rotateOutUpLeft {
-webkit-animation-name : rotateOutUpLeft ;
animation-name : rotateOutUpLeft ;
}
@ -webkit-keyframes rotateOutUpRight {
0 % {
-webkit-transform-origin : right bottom ;
transform-origin : right bottom ;
-webkit-transform : rotate ( 0 ) ;
transform : rotate ( 0 ) ;
opacity : 1 ;
}
100 % {
-webkit-transform-origin : right bottom ;
transform-origin : right bottom ;
-webkit-transform : rotate ( 90deg ) ;
transform : rotate ( 90deg ) ;
opacity : 0 ;
}
}
@ keyframes rotateOutUpRight {
0 % {
-webkit-transform-origin : right bottom ;
-ms-transform-origin : right bottom ;
transform-origin : right bottom ;
-webkit-transform : rotate ( 0 ) ;
-ms-transform : rotate ( 0 ) ;
transform : rotate ( 0 ) ;
opacity : 1 ;
}
100 % {
-webkit-transform-origin : right bottom ;
-ms-transform-origin : right bottom ;
transform-origin : right bottom ;
-webkit-transform : rotate ( 90deg ) ;
-ms-transform : rotate ( 90deg ) ;
transform : rotate ( 90deg ) ;
opacity : 0 ;
}
}
. rotateOutUpRight {
-webkit-animation-name : rotateOutUpRight ;
animation-name : rotateOutUpRight ;
}
@ -webkit-keyframes slideInDown {
0 % {
opacity : 0 ;
-webkit-transform : translateY ( -2000px ) ;
transform : translateY ( -2000px ) ;
}
100 % {
-webkit-transform : translateY ( 0 ) ;
transform : translateY ( 0 ) ;
}
}
@ keyframes slideInDown {
0 % {
opacity : 0 ;
-webkit-transform : translateY ( -2000px ) ;
-ms-transform : translateY ( -2000px ) ;
transform : translateY ( -2000px ) ;
}
100 % {
-webkit-transform : translateY ( 0 ) ;
-ms-transform : translateY ( 0 ) ;
transform : translateY ( 0 ) ;
}
}
. slideInDown {
-webkit-animation-name : slideInDown ;
animation-name : slideInDown ;
}
@ -webkit-keyframes slideInLeft {
0 % {
opacity : 0 ;
-webkit-transform : translateX ( -2000px ) ;
transform : translateX ( -2000px ) ;
}
100 % {
-webkit-transform : translateX ( 0 ) ;
transform : translateX ( 0 ) ;
}
}
@ keyframes slideInLeft {
0 % {
opacity : 0 ;
-webkit-transform : translateX ( -2000px ) ;
-ms-transform : translateX ( -2000px ) ;
transform : translateX ( -2000px ) ;
}
100 % {
-webkit-transform : translateX ( 0 ) ;
-ms-transform : translateX ( 0 ) ;
transform : translateX ( 0 ) ;
}
}
. slideInLeft {
-webkit-animation-name : slideInLeft ;
animation-name : slideInLeft ;
}
@ -webkit-keyframes slideInRight {
0 % {
opacity : 0 ;
-webkit-transform : translateX ( 2000px ) ;
transform : translateX ( 2000px ) ;
}
100 % {
-webkit-transform : translateX ( 0 ) ;
transform : translateX ( 0 ) ;
}
}
@ keyframes slideInRight {
0 % {
opacity : 0 ;
-webkit-transform : translateX ( 2000px ) ;
-ms-transform : translateX ( 2000px ) ;
transform : translateX ( 2000px ) ;
}
100 % {
-webkit-transform : translateX ( 0 ) ;
-ms-transform : translateX ( 0 ) ;
transform : translateX ( 0 ) ;
}
}
. slideInRight {
-webkit-animation-name : slideInRight ;
animation-name : slideInRight ;
}
@ -webkit-keyframes slideOutLeft {
0 % {
-webkit-transform : translateX ( 0 ) ;
transform : translateX ( 0 ) ;
}
100 % {
opacity : 0 ;
-webkit-transform : translateX ( -2000px ) ;
transform : translateX ( -2000px ) ;
}
}
@ keyframes slideOutLeft {
0 % {
-webkit-transform : translateX ( 0 ) ;
-ms-transform : translateX ( 0 ) ;
transform : translateX ( 0 ) ;
}
100 % {
opacity : 0 ;
-webkit-transform : translateX ( -2000px ) ;
-ms-transform : translateX ( -2000px ) ;
transform : translateX ( -2000px ) ;
}
}
. slideOutLeft {
-webkit-animation-name : slideOutLeft ;
animation-name : slideOutLeft ;
}
@ -webkit-keyframes slideOutRight {
0 % {
-webkit-transform : translateX ( 0 ) ;
transform : translateX ( 0 ) ;
}
100 % {
opacity : 0 ;
-webkit-transform : translateX ( 2000px ) ;
transform : translateX ( 2000px ) ;
}
}
@ keyframes slideOutRight {
0 % {
-webkit-transform : translateX ( 0 ) ;
-ms-transform : translateX ( 0 ) ;
transform : translateX ( 0 ) ;
}
100 % {
opacity : 0 ;
-webkit-transform : translateX ( 2000px ) ;
-ms-transform : translateX ( 2000px ) ;
transform : translateX ( 2000px ) ;
}
}
. slideOutRight {
-webkit-animation-name : slideOutRight ;
animation-name : slideOutRight ;
}
@ -webkit-keyframes slideOutUp {
0 % {
-webkit-transform : translateY ( 0 ) ;
transform : translateY ( 0 ) ;
}
100 % {
opacity : 0 ;
-webkit-transform : translateY ( -2000px ) ;
transform : translateY ( -2000px ) ;
}
}
@ keyframes slideOutUp {
0 % {
-webkit-transform : translateY ( 0 ) ;
-ms-transform : translateY ( 0 ) ;
transform : translateY ( 0 ) ;
}
100 % {
opacity : 0 ;
-webkit-transform : translateY ( -2000px ) ;
-ms-transform : translateY ( -2000px ) ;
transform : translateY ( -2000px ) ;
}
}
. slideOutUp {
-webkit-animation-name : slideOutUp ;
animation-name : slideOutUp ;
}
@ -webkit-keyframes hinge {
0 % {
-webkit-transform : rotate ( 0 ) ;
transform : rotate ( 0 ) ;
-webkit-transform-origin : top left ;
transform-origin : top left ;
-webkit-animation-timing-function : ease-in-out ;
animation-timing-function : ease-in-out ;
}
20 % , 60 % {
-webkit-transform : rotate ( 80deg ) ;
transform : rotate ( 80deg ) ;
-webkit-transform-origin : top left ;
transform-origin : top left ;
-webkit-animation-timing-function : ease-in-out ;
animation-timing-function : ease-in-out ;
}
40 % {
-webkit-transform : rotate ( 60deg ) ;
transform : rotate ( 60deg ) ;
-webkit-transform-origin : top left ;
transform-origin : top left ;
-webkit-animation-timing-function : ease-in-out ;
animation-timing-function : ease-in-out ;
}
80 % {
-webkit-transform : rotate ( 60deg ) translateY ( 0 ) ;
transform : rotate ( 60deg ) translateY ( 0 ) ;
opacity : 1 ;
-webkit-transform-origin : top left ;
transform-origin : top left ;
-webkit-animation-timing-function : ease-in-out ;
animation-timing-function : ease-in-out ;
}
100 % {
-webkit-transform : translateY ( 700px ) ;
transform : translateY ( 700px ) ;
opacity : 0 ;
}
}
@ keyframes hinge {
0 % {
-webkit-transform : rotate ( 0 ) ;
-ms-transform : rotate ( 0 ) ;
transform : rotate ( 0 ) ;
-webkit-transform-origin : top left ;
-ms-transform-origin : top left ;
transform-origin : top left ;
-webkit-animation-timing-function : ease-in-out ;
animation-timing-function : ease-in-out ;
}
20 % , 60 % {
-webkit-transform : rotate ( 80deg ) ;
-ms-transform : rotate ( 80deg ) ;
transform : rotate ( 80deg ) ;
-webkit-transform-origin : top left ;
-ms-transform-origin : top left ;
transform-origin : top left ;
-webkit-animation-timing-function : ease-in-out ;
animation-timing-function : ease-in-out ;
}
40 % {
-webkit-transform : rotate ( 60deg ) ;
-ms-transform : rotate ( 60deg ) ;
transform : rotate ( 60deg ) ;
-webkit-transform-origin : top left ;
-ms-transform-origin : top left ;
transform-origin : top left ;
-webkit-animation-timing-function : ease-in-out ;
animation-timing-function : ease-in-out ;
}
80 % {
-webkit-transform : rotate ( 60deg ) translateY ( 0 ) ;
-ms-transform : rotate ( 60deg ) translateY ( 0 ) ;
transform : rotate ( 60deg ) translateY ( 0 ) ;
opacity : 1 ;
-webkit-transform-origin : top left ;
-ms-transform-origin : top left ;
transform-origin : top left ;
-webkit-animation-timing-function : ease-in-out ;
animation-timing-function : ease-in-out ;
}
100 % {
-webkit-transform : translateY ( 700px ) ;
-ms-transform : translateY ( 700px ) ;
transform : translateY ( 700px ) ;
opacity : 0 ;
}
}
. hinge {
-webkit-animation-name : hinge ;
animation-name : hinge ;
}
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@ -webkit-keyframes rollIn {
0 % {
opacity : 0 ;
-webkit-transform : translateX ( -100 % ) rotate ( -120deg ) ;
transform : translateX ( -100 % ) rotate ( -120deg ) ;
}
100 % {
opacity : 1 ;
-webkit-transform : translateX ( 0px ) rotate ( 0deg ) ;
transform : translateX ( 0px ) rotate ( 0deg ) ;
}
}
@ keyframes rollIn {
0 % {
opacity : 0 ;
-webkit-transform : translateX ( -100 % ) rotate ( -120deg ) ;
-ms-transform : translateX ( -100 % ) rotate ( -120deg ) ;
transform : translateX ( -100 % ) rotate ( -120deg ) ;
}
100 % {
opacity : 1 ;
-webkit-transform : translateX ( 0px ) rotate ( 0deg ) ;
-ms-transform : translateX ( 0px ) rotate ( 0deg ) ;
transform : translateX ( 0px ) rotate ( 0deg ) ;
}
}
. rollIn {
-webkit-animation-name : rollIn ;
animation-name : rollIn ;
}
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@ -webkit-keyframes rollOut {
0 % {
opacity : 1 ;
-webkit-transform : translateX ( 0px ) rotate ( 0deg ) ;
transform : translateX ( 0px ) rotate ( 0deg ) ;
}
100 % {
opacity : 0 ;
-webkit-transform : translateX ( 100 % ) rotate ( 120deg ) ;
transform : translateX ( 100 % ) rotate ( 120deg ) ;
}
}
@ keyframes rollOut {
0 % {
opacity : 1 ;
-webkit-transform : translateX ( 0px ) rotate ( 0deg ) ;
-ms-transform : translateX ( 0px ) rotate ( 0deg ) ;
transform : translateX ( 0px ) rotate ( 0deg ) ;
}
100 % {
opacity : 0 ;
-webkit-transform : translateX ( 100 % ) rotate ( 120deg ) ;
-ms-transform : translateX ( 100 % ) rotate ( 120deg ) ;
transform : translateX ( 100 % ) rotate ( 120deg ) ;
}
}
. rollOut {
-webkit-animation-name : rollOut ;
animation-name : rollOut ;
}
@ font-face {
font-family : 'popcorn' ;
src : url ( "../fonts/popcorn.eot?yuu85v" ) ;
src : url ( "../fonts/popcorn.svg?yuu85v#popcorn" ) format ( "svg" ) , url ( "../fonts/popcorn.eot?#iefixyuu85v" ) format ( "embedded-opentype" ) , url ( "../fonts/popcorn.woff?yuu85v" ) format ( "woff" ) , url ( "../fonts/popcorn.ttf?yuu85v" ) format ( "truetype" ) ;
font-weight : normal ;
font-style : normal ;
}
@ font-face {
font-family : 'BrandonText' ;
src : url ( "../fonts/brandontext-regular-webfont.eot" ) ;
src : url ( "../fonts/brandontext-regular-webfont.eot?#iefix" ) format ( "embedded-opentype" ) , url ( "../fonts/brandontext-regular-webfont.woff" ) format ( "woff" ) , url ( "../fonts/brandontext-regular-webfont.ttf" ) format ( "truetype" ) , url ( "../fonts/brandontext-regular-webfont.svg#BrandonText" ) format ( "svg" ) ;
font-weight : normal ;
font-style : normal ;
}
@ font-face {
font-family : 'BrandonText' ;
src : url ( "../fonts/brandontext-bold-webfont.eot" ) ;
src : url ( "../fonts/brandontext-bold-webfont.eot?#iefix" ) format ( "embedded-opentype" ) , url ( "../fonts/brandontext-bold-webfont.woff" ) format ( "woff" ) , url ( "../fonts/brandontext-bold-webfont.ttf" ) format ( "truetype" ) , url ( "../fonts/brandontext-bold-webfont.svg#BrandonText" ) format ( "svg" ) ;
font-weight : bold ;
font-style : normal ;
}
@ font-face {
font-family : 'BrandonText' ;
src : url ( "../fonts/brandontext-light-webfont.eot" ) ;
src : url ( "../fonts/brandontext-light-webfont.eot?#iefix" ) format ( "embedded-opentype" ) , url ( "../fonts/brandontext-light-webfont.woff" ) format ( "woff" ) , url ( "../fonts/brandontext-light-webfont.ttf" ) format ( "truetype" ) , url ( "../fonts/brandontext-light-webfont.svg#BrandonText" ) format ( "svg" ) ;
font-weight : 400 ;
font-style : normal ;
}
@ font-face {
font-family : 'BrandonText' ;
src : url ( "../fonts/brandontext-regularitalic-webfont.eot" ) ;
src : url ( "../fonts/brandontext-regularitalic-webfont.eot?#iefix" ) format ( "embedded-opentype" ) , url ( "../fonts/brandontext-regularitalic-webfont.woff" ) format ( "woff" ) , url ( "../fonts/brandontext-regularitalic-webfont.ttf" ) format ( "truetype" ) , url ( "../fonts/brandontext-regularitalic-webfont.svg#BrandonText" ) format ( "svg" ) ;
font-weight : normal ;
font-style : italic ;
}
[ class ^ = "icon-" ] : before , [ class * = " icon-" ] : before {
font-family : 'popcorn' ;
speak : none ;
font-style : normal ;
font-weight : normal ;
font-variant : normal ;
text-transform : none ;
line-height : 1 ;
margin-right : 10px ;
/* Better Font Rendering =========== */
-webkit-font-smoothing : antialiased ;
-moz-osx-font-smoothing : grayscale ;
}
. icon-github : before {
content : "\e600" ;
}
. icon-browser : before {
content : "\e601" ;
}
. icon-linux : before {
content : "\e60f" ;
}
. icon-win : before {
content : "\e602" ;
}
. icon-vlc : before {
content : "\e603" ;
}
. icon-hd : before {
content : "\e604" ;
}
. icon-facebook : before {
content : "\e605" ;
}
. icon-ghost : before {
background : url ( . . / images / blog . png ) no-repeat ;
content : "\00a0\00a0\00a0\00a0" ;
}
. icon-twitter : before {
content : "\e606" ;
}
. icon-eye : before {
content : "\e607" ;
}
. icon-play : before {
content : "\e608" ;
}
. icon-mac : before {
content : "\e609" ;
}
. icon-laptop : before {
content : "\e60a" ;
}
. icon-screen : before {
content : "\e60b" ;
}
. icon-window : before {
content : "\e60c" ;
}
. icon-info : before {
content : "\e60d" ;
}
. icon-close : before {
content : "\e60e" ;
}
body {
font-family : "BrandonText" ;
font-size : 16px ;
line-height : 19px ;
color : # 7a818e ;
}
section {
width : 100 % ;
max-width : 100 % ;
}
. container {
background : # fff ;
top : 670px ;
position : relative ;
z-index : 1 ;
}
img {
pointer-events : none ;
user-select : none ;
-webkit-user-select : none ;
-moz-user-select : none ;
}
. fixed-width {
max-width : 980px ;
margin : 0 auto ;
position : relative ;
}
h1 {
font-weight : 400 ;
font-size : 48px ;
line-height : 48px ;
}
h2 {
font-weight : 400 ;
font-size : 36px ;
line-height : 36px ;
}
h3 {
font-weight : 400 ;
font-size : 30px ;
line-height : 30px ;
}
h4 {
font-weight : 400 ;
font-size : 24px ;
line-height : 24px ;
}
h5 {
font-weight : bold ;
font-size : 20px ;
line-height : 20px ;
color : # 122a4a ;
margin : 0 ;
}
. clear-fix : after {
clear : both ;
content : "" ;
display : block ;
height : 0 ;
width : 0 ;
}
. align-center {
margin : 0 auto ;
display : block ;
}
. width-70 {
width : 70 % ;
text-align : center ;
}
span . code {
font-family : "Courier" ;
background : rgba ( 0 , 0 , 0 , 0 . 05 ) ;
border : 1px solid rgba ( 0 , 0 , 0 , 0 . 1 ) ;
padding : 2px ;
border-radius : 2px ;
font-size : 14px ;
}
@ media screen and ( max-width : 500px ) {
. width-70 {
width : 100 % ;
}
}
[ class ^ = "btn-" ] {
border-radius : 3px ;
box-shadow : 0px 1px 3px 0px rgba ( 0 , 0 , 0 , 0 . 4 ) , inset 0px 1px rgba ( 255 , 255 , 255 , 0 . 2 ) ;
padding : 14px 20px ;
font-size : 18px ;
color : # fff ;
text-decoration : none ;
font-weight : bold ;
display : inline-block ;
text-shadow : 0px -1px 1px rgba ( 0 , 0 , 0 , 0 . 3 ) ;
-webkit-transition : background-color ease . 2s , box-shadow ease . 2s ;
-moz-transition : background-color ease . 2s , box-shadow ease . 2s ;
transition : background-color ease . 2s , box-shadow ease . 2s ;
}
. btn-disabled {
background-color : # a2a2a2 ;
cursor : default ;
pointer-events : none ;
}
. btn-main {
background-color : # e74c3c ;
}
. btn-main : hover {
background-color : # d62c1a ;
}
. btn-main : active {
background-color : # a82315 ;
box-shadow : 0px 0px 0px 0px rgba ( 0 , 0 , 0 , 0 ) , inset 0px 1px rgba ( 255 , 255 , 255 , 0 . 2 ) ;
}
. icon-ghost {
background : # E5850A ;
}
. icon-ghost : before {
font-size : 16px ;
}
. icon-ghost : hover {
background : # E79338 ;
}
. icon-twitter : active {
background : # E5850A ;
}
. icon-twitter {
background : # 36bff4 ;
}
. icon-twitter : before {
font-size : 16px ;
}
. icon-twitter : hover {
background : # 3cd0fa ;
}
. icon-twitter : active {
background : # 35bef3 ;
}
. icon-facebook {
background : # 1b6fbb ;
}
. icon-facebook : hover {
background : # 2081d1 ;
}
. icon-facebook : active {
background : # 1864a9 ;
}
. btn-wider {
padding : 14px 45px ;
}
. btn-wide {
width : 200px ;
}
. btn-med {
width : 130px ;
display : block ;
margin : 0 auto ;
text-align : center ;
}
# header {
height : 670px ;
overflow : visible ;
background : url ( . . / images / bg-header . jpg ) no-repeat center top # 0a0b28 ;
color : # fff ;
text-align : center ;
font-size : 24px ;
font-weight : 400 ;
box-sizing : border-box ;
-moz-box-sizing : border-box ;
padding-top : 30px ;
position : fixed ;
-webkit-transform : translateX ( 0 ) ;
-moz-transform : translateX ( 0 ) ;
transform : translateX ( 0 ) ;
}
# header nav {
position : relative ;
z-index : 1000 ;
}
# header nav . align-left {
position : absolute ;
top : 0 ;
left : 0 ;
}
# header nav . align-right {
position : absolute ;
top : 0 ;
right : 0 ;
}
# header nav ul {
list-style : none ;
margin : 5px 0 ;
padding : 0 ;
}
# header nav ul li {
display : inline-block ;
margin : 0 10px ;
}
# header nav ul li . text {
font-size : 18px ;
padding : 0 ;
}
# header nav ul li . text a {
color : # fff ;
text-decoration : none ;
}
# header nav ul li . social a {
display : block ;
width : 26px ;
height : 26px ;
text-align : center ;
color : # fff ;
text-decoration : none ;
line-height : 32px ;
border-radius : 50 % ;
position : relative ;
}
# header nav ul li . social a . icon-facebook : before {
font-size : 16px ;
position : absolute ;
top : 5px ;
left : 9px ;
}
# header nav ul li . social a . icon-ghost : before {
font-size : 15px ;
position : absolute ;
top : 5px ;
left : 6px ;
}
# header nav ul li . social a . icon-twitter : before {
font-size : 12px ;
position : absolute ;
top : 7px ;
left : 6px ;
}
# header nav ul li . social a . icon-github : before {
position : absolute ;
top : 0px ;
left : 0px ;
font-size : 25px ;
}
# header . text {
padding : 0 0 40px ;
z-index : 100 ;
}
# header h1 {
margin-bottom : 5px ;
margin-top : 0px ;
}
# header p {
margin-bottom : 0 ;
}
# header . ui-screenshot {
max-width : 100 % ;
box-shadow : 0px -10px 30px 10px rgba ( 67 , 244 , 249 , 0 . 25 ) ;
}
# logo {
display : block ;
text-indent : -9999px ;
overflow : hidden ;
width : 211px ;
height : 71px ;
background : url ( . . / images / header-logo . png ) no-repeat ;
margin : 0 auto ;
text-align : left ;
}
# links {
font-size : 18px ;
font-weight : normal ;
padding : 0 ;
margin : 0 0 30px ;
}
# links li {
list-style : none ;
display : inline-block ;
text-align : center ;
/* margin: 0 25px; */
vertical-align : top ;
}
# links li . download {
line-height : 40px ;
margin-right : 0 ;
}
# links li . download a {
line-height : 19px ;
}
# links li . github {
position : relative ;
top : 16px ;
}
# links li . github a : before {
position : absolute ;
left : -30px ;
}
# links li small {
font-size : 12px ;
color : rgba ( 0 , 0 , 0 , 0 . 5 ) ;
font-weight : normal ;
font-style : italic ;
}
# links a {
color : # fff ;
text-decoration : none ;
}
@ media screen and ( max-width : 1024px ) {
. align-left {
left : 4 % ;
}
. align-right {
right : 4 % ;
}
}
@ media screen and ( max-width : 510px ) {
# header {
height : 480px ;
position : static ;
}
. container {
position : static ;
}
. text {
max-width : 90 % ;
margin : 0 auto ;
font-size : 0 . 8em ;
}
. text h1 {
font-size : 2em ;
}
nav . align-left , nav . align-right {
display : none ;
}
# links {
display : none ;
}
}
# features {
padding : 35px 0 ;
}
# features article {
width : 400px ;
float : left ;
padding : 30px 0 ;
}
# features article : nth-child ( even ) {
margin-left : 180px ;
}
# features article img {
float : left ;
margin-right : 25px ;
position : relative ;
top : -10px ;
}
# features . action {
padding-top : 25px ;
}
# features . pochoclin {
padding-left : 150px ;
}
# features hr {
border : none ;
border-top : 1px solid # b7bbc2 ;
position : relative ;
top : 10px ;
z-index : -1 ;
margin-top : 20px ;
}
# features hr + h2 {
background : # fff ;
display : inline-block ;
padding : 0 20px ;
margin-top : -50px ;
}
# features small {
display : block ;
font-style : italic ;
color : # 6496b7 ;
line-height : 25px ;
}
. warning {
background : rgba ( 251 , 249 , 93 , 0 . 5 ) ;
font-size : 16px ;
padding : 15px 0 ;
color : # 858230 ;
}
. warning h5 {
font-size : 18px ;
color : # 858230 ;
display : block ;
max-width : 880px ;
margin : 0 auto ;
position : relative ;
}
. warning h5 : before {
position : absolute ;
left : -50px ;
font-size : 30px ;
}
. warning p {
font-style : italic ;
display : block ;
max-width : 880px ;
margin : 5px auto ;
}
@ media screen and ( max-width : 980px ) {
# features article {
-webkit-box-sizing : border-box ;
-moz-box-sizing : border-box ;
box-sizing : border-box ;
width : 100 % ;
max-width : 800px ;
margin : 40px auto ! important ;
padding : 0 8 % ;
overflow : hidden ;
float : none ;
}
. warning {
text-align : center ;
}
. warning h5 : before {
display : none ;
}
}
@ media screen and ( max-width : 750px ) {
# features . pochoclin {
padding : 0 ;
}
# features hr {
display : none ;
}
# features hr + h2 {
margin-top : 20px ;
font-size : 30px ;
color : black ;
}
}
@ media screen and ( max-width : 500px ) {
# features article {
padding-top : 20px ;
max-width : 400px ;
}
# features article p {
margin-left : 105px ;
}
# features article img {
max-width : 80px ;
}
}
# how {
background : url ( . . / images / bg-how . jpg ) no-repeat center # 0e1226 ;
height : 569px ;
position : relative ;
color : # fff ;
box-sizing : border-box ;
-moz-box-sizing : border-box ;
padding-top : 105px ;
overflow : hidden ;
}
# how : before , # how : after {
content : "" ;
height : 20px ;
width : 100 % ;
background : url ( . . / images / film-tile . png ) repeat-x center ;
position : absolute ;
top : 0 ;
left : 0 ;
}
# how : after {
top : auto ;
bottom : 0 ;
}
# how h2 , # how h4 {
margin : 0 0 10px ;
}
# how . steps {
position : relative ;
font-weight : bold ;
margin-top : 50px ;
}
# how . steps a {
color : # f2a500 ;
}
# how . steps a : hover {
text-decoration : none ;
}
# how . steps : before {
content : "" ;
width : 2px ;
height : 100 % ;
background : # 42485e ;
opacity : . 5 ;
position : absolute ;
left : 22px ;
top : 0px ;
bottom : 0px ;
}
# how . steps li {
line-height : 42px ;
position : relative ;
list-style : none ;
padding-left : 25px ;
margin : 0 0 50px 0 ;
}
# how . steps li : last-child {
margin : 0 ;
}
# how . steps li : before {
border-width : 2px ;
border-color : # 10152d ;
border-style : solid ;
border-radius : 50 % ;
background-image : -moz-linear-gradient ( 90deg , # 80bde4 0 % , # e4f2fa 100 % ) ;
background-image : -webkit-linear-gradient ( 90deg , # 80bde4 0 % , # e4f2fa 100 % ) ;
background-image : -ms-linear-gradient ( 90deg , # 80bde4 0 % , # e4f2fa 100 % ) ;
box-shadow : 0px 0px 6px 0px rgba ( 28 , 92 , 145 , 0 . 3 ) ;
display : block ;
width : 40px ;
height : 40px ;
text-align : center ;
color : # 0e1328 ;
text-shadow : 0px 1px # fff ;
line-height : 42px ;
position : absolute ;
left : -40px ;
top : 0 ;
}
# how . steps li . icon-vlc : before {
font-size : 18px ;
line-height : 40px ;
}
# how . steps li . icon-eye : before {
font-size : 13px ;
}
# how . steps li . icon-hd : before {
font-size : 18px ;
}
# how . steps li . icon-play : before {
font-size : 12px ;
text-indent : 3px ;
}
# how . ui-screenshot {
position : absolute ;
bottom : 0 ;
left : 50 % ;
display : block ;
margin-left : -150px ;
}
@ media screen and ( max-width : 830px ) {
# how {
background-position : left ;
}
# how . ui-screenshot {
display : none ;
}
# how . fixed-width {
max-width : 270px ;
}
}
# get-app {
text-align : center ;
font-size : 24px ;
padding : 50px 0 0 0 ;
color : # 444c5e ;
}
# get-app . platforms {
padding : 50px 0 ;
}
# get-app . platforms li {
list-style : none ;
display : inline-block ;
padding : 0 40px ;
}
# get-app . platforms li : before {
display : block ;
font-size : 86px ;
text-indent : 8px ;
margin-bottom : 20px ;
color : # 0e1226 ;
}
# get-app . platforms li small {
display : block ;
color : # 6496b7 ;
font-size : 12px ;
font-style : italic ;
}
# get-app . platforms li [ class ^ = "btn-" ] {
margin-bottom : 5px ;
}
@ media screen and ( max-width : 830px ) {
# get-app . text {
padding : 0 5 % ;
font-size : 0 . 7em ;
}
# get-app . text h2 {
font-size : 1 . 5em ;
line-height : 1 ;
}
# get-app . platforms {
padding : 0 ;
}
# get-app . platforms li {
display : block ;
margin : 40px 0 ;
}
}
# browse-movies {
background : # 0e1226 ;
text-align : center ;
}
# browse-movies h2 {
padding : 50px 0 ;
color : # fff ;
}
# mailchimp-signup # mc_embed_signup {
padding : 0 30 % 0 30 % ;
}
# footer {
width : 980px ;
margin : 0 auto ;
}
# footer . logo {
display : block ;
float : left ;
text-indent : -9999px ;
overflow : hidden ;
width : 193px ;
height : 46px ;
background : url ( . . / images / footer-logo . png ) no-repeat ;
margin-top : 21px ;
}
# footer nav {
padding : 10px 0 45px ;
}
# footer ul {
float : right ;
padding : 0 ;
margin : 0 ;
}
# footer ul li {
display : inline-block ;
list-style : none ;
vertical-align : middle ;
margin-left : 35px ;
}
# footer ul li . social {
margin-left : 10px ;
}
# footer ul li . social + : not ( . social ) {
margin-left : 50px ;
}
# footer ul li . download {
position : relative ;
top : 9px ;
}
# footer ul li . github {
position : relative ;
margin-left : 70px ;
}
# footer ul a {
color : # a2a2a2 ;
text-decoration : none ;
position : relative ;
}
# footer ul a : hover {
color : # 444 ;
}
# footer ul a . btn-main {
color : # fff ;
}
# footer ul a . icon-github : before {
position : absolute ;
left : -30px ;
}
# footer ul a . icon-facebook ,
# footer ul a . icon-twitter ,
# footer ul a . icon-ghost ,
# footer ul a . icon-github {
width : 30px ;
height : 30px ;
line-height : 30px ;
display : block ;
border-radius : 50 % ;
font-size : 14px ;
color : # fff ;
text-indent : 12px ;
background : # 0072bc ;
-webkit-transition : background ease . 2s ;
-moz-transition : background ease . 2s ;
transition : background ease . 2s ;
}
# footer ul a . icon-facebook : hover ,
# footer ul a . icon-twitter : hover ,
# footer ul a . icon-ghost : hover ,
# footer ul a . icon-github : hover {
background : # 005c98 ;
}
# footer ul a . icon-twitter {
text-indent : 5px ;
background : # 00bff3 ;
}
# footer ul a . icon-twitter : hover {
background : # 00a3cf ;
}
# footer ul a . icon-github {
text-indent : 5px ;
background-color : white ;
}
# footer ul a . icon-github : hover {
background-color : white ;
}
# footer ul a . icon-ghost {
text-indent : 10px ;
background : # E5850A ;
}
# footer ul a . icon-ghost : hover {
background : # E79338 ;
}
# footer ul a . icon-facebook : before ,
# footer ul a . icon-twitter : before ,
# footer ul a . icon-github : before {
display : block ;
position : absolute ;
top : 8px ;
left : 50 % ;
margin-left : -15px ;
}
# footer ul a . icon-github : before {
color : # 333 ;
font-size : 28px ;
text-align : center ;
top : 1px ;
left : 11px ;
}
# footer ul a . icon-github : hover : before {
color : # 464646 ;
}
# footer ul a . icon-twitter : before {
font-size : 12px ;
top : 9px ;
margin-left : -12px ;
}
# footer ul small {
display : block ;
color : # 6496b7 ;
font-size : 12px ;
font-style : italic ;
}
# footer hr {
border : none ;
border-top : 1px solid # a2a2a2 ;
}
# footer hr + i {
display : block ;
width : 40px ;
height : 20px ;
background : url ( . . / images / footer-film . png ) no-repeat ;
margin : -18px auto 0 ;
}
# footer footer {
text-align : center ;
font-size : 14px ;
}
# footer footer p {
padding : 20px 0 ;
}
# footer footer p span {
color : # e74c3c ;
}
# footer footer small {
display : block ;
font-size : 14px ;
color : # d7d4d4 ;
}
# footer footer small a {
color : # 6496b7 ;
}
@ media screen and ( max-width : 830px ) {
# footer nav {
padding : 20px 6 % ;
padding-bottom : 40px ;
}
}
@ media screen and ( max-width : 500px ) {
# footer . logo {
float : none ;
width : 193px ;
margin : 10px auto ;
}
# footer nav ul {
float : none ;
width : 100 % ;
text-align : center ;
}
}
. page # header {
height : auto ;
position : static ;
background-image : none ;
}
. page . container {
top : auto ;
}
. page . container article {
border-top : 1px solid # eee ;
padding : 10px 0 15px ;
}
. page . container h1 {
font-size : 36px ;
font-weight : bold ;
color : # 0e1226 ;
margin-bottom : 10px ;
}
. page . container # what {
border-top : 0 ;
padding : 0 ;
}
. page . container # what p {
font-size : 24px ;
line-height : 32px ;
margin-bottom : 20px ;
margin-top : 0 ;
}
. page . container article : not ( # what ) p {
font-size : 18px ;
line-height : 22px ;
}
. page . container h2 {
font-size : 24px ;
font-weight : bold ;
color : # 0e1226 ;
margin-bottom : 5px ;
}
. page . container h2 + p {
margin-top : 0 ;
}
. page . container strong {
color : # 0e1226 ;
opacity : . 6 ;
}
. page . container . icon-mac ,
. page . container . icon-win {
position : relative ;
padding-left : 50px ;
}
. page . container . icon-mac : before ,
. page . container . icon-win : before {
position : absolute ;
left : 18px ;
top : 0 ;
}
. page . container . warning {
padding : 10px 10px 10px 50px ;
border-radius : 2px ;
position : relative ;
}
. page . container . warning : before {
position : absolute ;
top : 10px ;
left : 18px ;
font-family : 'popcorn' ;
speak : none ;
font-style : normal ;
font-weight : normal ;
font-variant : normal ;
text-transform : none ;
line-height : 1 ;
margin-right : 10px ;
/* Better Font Rendering =========== */
-webkit-font-smoothing : antialiased ;
-moz-osx-font-smoothing : grayscale ;
content : "\e60d" ;
font-size : 18px ;
color : # 858230 ;
}
. page . container . warning a {
color : # 858230 ;
font-weight : bold ;
}
. page . container . warning a : hover {
text-decoration : none ;
}
. page . container . step-code li {
list-style : none ;
padding : 5px 0 5px 10px ;
}
. beta # footer . download {
display : none ! important ;
}
. beta # footer ul {
padding-top : 22px ;
}
. beta # footer > hr {
display : block ! important ;
opacity : . 2 ;
}
. beta # get-app . platforms {
margin-bottom : 0 ;
}
. beta # browse-movies {
display : none ;
}
. soon # links . download ,
. soon # features . action {
display : none ! important ;
}
. soon # links . social {
margin : 0 10px ;
}
body . mac . dl-win ,
body . mac . dl-lin-32 ,
body . mac . dl-lin-64 ,
body . win . dl-mac ,
body . win . dl-lin-32 ,
body . win . dl-lin-64 ,
body . lin-32 . dl-mac ,
body . lin-64 . dl-mac ,
body . lin-32 . dl-win ,
body . lin-64 . dl-win ,
body . nope . dl-win ,
body . nope . dl-mac {
display : none ! important ;
}
body . dl-win , body . dl-lin-32 , body . dl-lin-64 {
display : none ! important ;
}
body . win . dl-win {
display : inline-block ! important ;
}
body . lin-32 . dl-lin-32 ,
body . lin-64 . dl-lin-64 {
display : inline-block ! important ;
}
. tos {
background : # 111 ;
margin : 20px 0 ;
}
. tos header {
text-align : center ;
}
. tos-container {
width : 600px ;
margin : 0 auto ;
line-height : 1 . 3em
}
/* ---------------------------------------------------------------------- */
/ * "Polyglot" Language Switcher
/ * ----------------------------------------------------------------------
Version : 1 . 4
Author : Ixtendo
Author URI : http : / / www . ixtendo . com
License : MIT License
License URI : http : / / www . opensource . org / licenses / mit-license . php
------------------------------------------------------------------------- * /
/* ---------------------------------------------------------------------- */
/ * Generic
/* ---------------------------------------------------------------------- */
# langswitch , # langswitch * {
margin : 0 ;
padding : 0 ;
outline : none ;
}
# langswitch ul {
list-style : none ;
}
# langswitch {
font-family : "Helvetica Neue" , Helvetica , Arial , sans-serif ;
font-size : 12px ;
color : # 444 ;
line-height : normal ;
position : relative ; /* sets the initial position for the drop-down menu */
z-index : 100 ;
display : inline-block ;
}
# langswitch form {
display : none ;
}
/* ---------------------------------------------------------------------- */
/ * JS-created Code
/* ---------------------------------------------------------------------- */
# langswitch a {
text-decoration : none ;
display : block ;
padding : 0 . 5em 0px 0 . 5em 0px ; /* 6px 6px 6px 28px */
color : # 444 ;
width : 36px ;
background-repeat : no-repeat ;
background-position : 6px center ;
}
# langswitch a : hover {
color : # 000 ;
}
# langswitch a . current : link , # langswitch a . current : visited , # langswitch a . current : active {
position : relative ; /* sets the initial position for the trigger arrow */
background-color : # FFF ;
border : 1px solid # E5E5E5 ;
border-radius : 3px ;
height : 1 . 25em ; /* 15px */
width : 44px ;
}
# langswitch ul . dropdown li {
padding-left : 8px ;
}
# langswitch a . current : hover ,
# langswitch ul . dropdown li : hover {
background-color : # F7F7F7 ;
}
# langswitch a . active {
border-bottom : none ! important ;
border-radius : 3px 3px 0 0 ! important ;
}
# langswitch span . trigger {
display : block ;
position : absolute ;
width : 9px ;
height : 5px ;
text-indent : -10000em ;
top : 12px ;
right : 6px ;
}
# langswitch a . current : link span . trigger , # langswitch a . current : visited span . trigger {
background : url ( . . / images / arrow-down . gif ) no-repeat left top ;
}
# langswitch a . current : hover span . trigger , # langswitch a . current : active span . trigger , # langswitch a . active span . trigger {
background-position : left bottom ! important ;
}
/* Drop-Down Menu */
# langswitch ul . dropdown {
display : none ;
position : absolute ;
top : 23px ;
left : 0 ;
background-color : # FFF ;
border : 1px solid # E5E5E5 ;
border-top : none ! important ;
border-radius : 0 0 3px 3px ;
z-index : 200 ;
}
# langswitch ul . dropdown li {
border-top : 1px dotted # D4D4D4 ;
margin : 0 ;
}
# langswitch ul . dropdown li : last-child {
border-radius : 0 0 3px 3px ;
}
/* social modal */
# modal_popup {
display : none ;
position : absolute ; /* makes the div go into a position that’
left : 50 % ; /* positions the div half way horizontally */
top : 50 % ; /* positions the div half way vertically */
margin-top : -200px ;
margin-left : -300px ;
background-color : # ffffff ;
width : 600px ;
height : 400px ;
z-index : 100 ; /* makes the div the top layer, so it’
}
. header-modal {
background : # 0A0B28 ;
height : 60px ;
padding : 10px 30px ;
color : # FFF ;
font-size : 25px ;
line-height : 60px ;
font-weight : bold ;
text-align : center ;
}
. modal-body {
padding : 30px 10px 10px ;
font-size : 17px ;
color : # 000 ;
text-align : center ;
}
. pochoclin-img {
position : absolute ;
bottom : 0 ;
width : 150px ;
left : 10px ;
}
/* buttons to share */
. share-container {
margin : 0 auto 10px ;
text-align : center ;
}
. share-btn {
display : inline-block ;
vertical-align : top ;
position : relative ;
margin : 0 20px ;
padding-top : 40px ;
width : 80px ;
font-weight : bold ;
text-align : center ;
text-decoration : none ;
border-radius : 8px ;
-webkit-box-shadow : 0 2px 2px rgba ( 0 , 0 , 0 , 0 . 2 ) ;
box-shadow : 0 2px 2px rgba ( 0 , 0 , 0 , 0 . 2 ) ;
}
. share-btn : active {
margin-top : 3px ;
}
. share-btn : active . share-btn-action {
padding-bottom : 3px ;
-webkit-box-shadow : inset 0 -3px rgba ( 0 , 0 , 0 , 0 . 15 ) , inset 0 -1px rgba ( 0 , 0 , 0 , 0 . 15 ) ;
box-shadow : inset 0 -3px rgba ( 0 , 0 , 0 , 0 . 15 ) , inset 0 -1px rgba ( 0 , 0 , 0 , 0 . 15 ) ;
}
. share-btn : active . share-btn-action : after {
bottom : 3px ;
}
. share-btn-count {
position : absolute ;
top : 10px ;
left : 0 ;
right : 0 ;
line-height : 30px ;
font-size : 19px ;
letter-spacing : -1px ;
color : # 555 ;
text-shadow : 0 1px white ;
background : # E7E7E7 ;
border-width : 1px 1px 0 ;
border-style : solid ;
border-color : # c5c5c5 # bbb ;
border-radius : 8px 8px 0 0 ;
background-image : -webkit-linear-gradient ( top , rgba ( 0 , 0 , 0 , 0 . 03 ) , transparent 40 % ) ;
background-image : -moz-linear-gradient ( top , rgba ( 0 , 0 , 0 , 0 . 03 ) , transparent 40 % ) ;
background-image : -o-linear-gradient ( top , rgba ( 0 , 0 , 0 , 0 . 03 ) , transparent 40 % ) ;
background-image : linear-gradient ( to bottom , rgba ( 0 , 0 , 0 , 0 . 03 ) , transparent 40 % ) ;
-webkit-box-shadow : inset 0 1px rgba ( 255 , 255 , 255 , 0 . 5 ) , 0 1px rgba ( 0 , 0 , 0 , 0 . 18 ) , 0 2px rgba ( 0 , 0 , 0 , 0 . 07 ) ;
box-shadow : inset 0 1px rgba ( 255 , 255 , 255 , 0 . 5 ) , 0 1px rgba ( 0 , 0 , 0 , 0 . 18 ) , 0 2px rgba ( 0 , 0 , 0 , 0 . 07 ) ;
}
. share-btn-count : before , . share-btn-count : after {
content : '' ;
position : absolute ;
top : 100 % ;
left : 50 % ;
margin-left : -6px ;
border : 6px solid transparent ;
border-top-color : # e6eff5 ;
}
. share-btn-count : before {
margin-left : -7px ;
margin-top : 1px ;
border-width : 7px ;
border-top-color : rgba ( 0 , 0 , 0 , 0 . 07 ) ;
}
. share-btn-action {
display : block ;
position : relative ;
line-height : 32px ;
padding : 2px 0 6px ;
font-size : 12px ;
color : white ;
text-shadow : 0 1px 1px rgba ( 0 , 0 , 0 , 0 . 4 ) ;
border : solid rgba ( 0 , 0 , 0 , 0 . 18 ) ;
border-width : 0 1px ;
border-radius : 0 0 8px 8px ;
}
. share-btn-action : before {
content : '' ;
display : inline-block ;
vertical-align : top ;
margin : 8px 2px 0 0 ;
width : 18px ;
height : 18px ;
background-image : url ( "icons.png" ) ;
}
. share-btn-action : after {
content : '' ;
position : absolute ;
top : 0 ;
bottom : 6px ;
left : 0 ;
right : 0 ;
border-radius : 0 0 6px 6px ;
-webkit-box-shadow : inset 0 -1px 2px rgba ( 255 , 255 , 255 , 0 . 25 ) ;
box-shadow : inset 0 -1px 2px rgba ( 255 , 255 , 255 , 0 . 25 ) ;
}
. share-btn-tweet {
background : # 83cfe8 ;
background-image : -webkit-linear-gradient ( top , # 83cfe8 , # 6ebbd4 ) ;
background-image : -moz-linear-gradient ( top , # 83cfe8 , # 6ebbd4 ) ;
background-image : -o-linear-gradient ( top , # 83cfe8 , # 6ebbd4 ) ;
background-image : linear-gradient ( to bottom , # 83cfe8 , # 6ebbd4 ) ;
-webkit-box-shadow : inset 0 -6px rgba ( 0 , 0 , 0 , 0 . 16 ) , inset 0 -1px rgba ( 0 , 0 , 0 , 0 . 15 ) ;
box-shadow : inset 0 -6px rgba ( 0 , 0 , 0 , 0 . 16 ) , inset 0 -1px rgba ( 0 , 0 , 0 , 0 . 15 ) ;
}
. share-btn-tweet : before {
margin-left : -3px ;
}
. share-btn-tweet : after {
-webkit-box-shadow : inset 0 -1px 2px rgba ( 255 , 255 , 255 , 0 . 5 ) ;
box-shadow : inset 0 -1px 2px rgba ( 255 , 255 , 255 , 0 . 5 ) ;
}
. share-btn-tweet + . share-btn-count {
-webkit-box-shadow : inset 0 1px rgba ( 255 , 255 , 255 , 0 . 5 ) , 0 1px rgba ( 0 , 0 , 0 , 0 . 12 ) , 0 2px rgba ( 0 , 0 , 0 , 0 . 04 ) ;
box-shadow : inset 0 1px rgba ( 255 , 255 , 255 , 0 . 5 ) , 0 1px rgba ( 0 , 0 , 0 , 0 . 12 ) , 0 2px rgba ( 0 , 0 , 0 , 0 . 04 ) ;
}
. share-btn-tweet + . share-btn-count : before {
border-top-color : rgba ( 0 , 0 , 0 , 0 . 05 ) ;
}
. share-btn-like {
background : # 6480bd ;
background-image : -webkit-linear-gradient ( top , # 6480bd , # 3c5894 ) ;
background-image : -moz-linear-gradient ( top , # 6480bd , # 3c5894 ) ;
background-image : -o-linear-gradient ( top , # 6480bd , # 3c5894 ) ;
background-image : linear-gradient ( to bottom , # 6480bd , # 3c5894 ) ;
-webkit-box-shadow : inset 0 -6px rgba ( 0 , 0 , 0 , 0 . 15 ) , inset 0 -1px rgba ( 0 , 0 , 0 , 0 . 2 ) ;
box-shadow : inset 0 -6px rgba ( 0 , 0 , 0 , 0 . 15 ) , inset 0 -1px rgba ( 0 , 0 , 0 , 0 . 2 ) ;
}
. share-btn-like : before {
background-position : -18px 0 ;
}
. share-btn-plus {
background : # 626262 ;
background-image : -webkit-linear-gradient ( top , # 626262 , # 404040 ) ;
background-image : -moz-linear-gradient ( top , # 626262 , # 404040 ) ;
background-image : -o-linear-gradient ( top , # 626262 , # 404040 ) ;
background-image : linear-gradient ( to bottom , # 626262 , # 404040 ) ;
-webkit-box-shadow : inset 0 -6px rgba ( 0 , 0 , 0 , 0 . 08 ) , inset 0 -1px rgba ( 0 , 0 , 0 , 0 . 3 ) ;
box-shadow : inset 0 -6px rgba ( 0 , 0 , 0 , 0 . 08 ) , inset 0 -1px rgba ( 0 , 0 , 0 , 0 . 3 ) ;
}
. share-btn-plus : before {
display : none ;
}
# modal_overlay {
display : none ; /* ensures it’ ’
position : absolute ; /* makes the div go into a position that’
left : 0 % ; /* makes the div span all the way across the viewing area */
top : 0 % ; /* makes the div span all the way across the viewing area */
background-color : black ;
-moz-opacity : 0 . 7 ; /* makes the div transparent, so you have a cool overlay effect */
opacity : . 70 ;
filter : alpha ( opacity = 70 ) ;
width : 100 % ;
height : 100 % ;
z-index : 90 ; /* makes the div the second most top layer, so it’
}
div . addthis_toolbox {
width : 500px ;
margin : 0 auto ;
}
/* Flags */
# ad { background-image : url ( ../images/flags/ad.png ) }
# ae { background-image : url ( ../images/flags/ae.png ) }
# af { background-image : url ( ../images/flags/af.png ) }
# ag { background-image : url ( ../images/flags/ag.png ) }
# ai { background-image : url ( ../images/flags/ai.png ) }
# al { background-image : url ( ../images/flags/al.png ) }
# am { background-image : url ( ../images/flags/am.png ) }
# an { background-image : url ( ../images/flags/an.png ) }
# ao { background-image : url ( ../images/flags/ao.png ) }
# aq { background-image : url ( ../images/flags/aq.png ) }
# ar { background-image : url ( ../images/flags/ar.png ) }
# as { background-image : url ( ../images/flags/as.png ) }
# at { background-image : url ( ../images/flags/at.png ) }
# au { background-image : url ( ../images/flags/au.png ) }
# aw { background-image : url ( ../images/flags/aw.png ) }
# az { background-image : url ( ../images/flags/az.png ) }
# ba { background-image : url ( ../images/flags/ba.png ) }
# bb { background-image : url ( ../images/flags/bb.png ) }
# bd { background-image : url ( ../images/flags/bd.png ) }
# be { background-image : url ( ../images/flags/be.png ) }
# bf { background-image : url ( ../images/flags/bf.png ) }
# bg { background-image : url ( ../images/flags/bg.png ) }
# bh { background-image : url ( ../images/flags/bh.png ) }
# bi { background-image : url ( ../images/flags/bi.png ) }
# bj { background-image : url ( ../images/flags/bj.png ) }
# bm { background-image : url ( ../images/flags/bm.png ) }
# bn { background-image : url ( ../images/flags/bn.png ) }
# bo { background-image : url ( ../images/flags/bo.png ) }
# bs { background-image : url ( ../images/flags/bs.png ) }
# bt { background-image : url ( ../images/flags/bt.png ) }
# bw { background-image : url ( ../images/flags/bw.png ) }
# by { background-image : url ( ../images/flags/by.png ) }
# bz { background-image : url ( ../images/flags/bz.png ) }
# ca { background-image : url ( ../images/flags/ca.png ) }
# cd { background-image : url ( ../images/flags/cd.png ) }
# cf { background-image : url ( ../images/flags/cf.png ) }
# cg { background-image : url ( ../images/flags/cg.png ) }
# ch { background-image : url ( ../images/flags/ch.png ) }
# ci { background-image : url ( ../images/flags/ci.png ) }
# ck { background-image : url ( ../images/flags/ck.png ) }
# cl { background-image : url ( ../images/flags/cl.png ) }
# cm { background-image : url ( ../images/flags/cm.png ) }
# co { background-image : url ( ../images/flags/co.png ) }
# cr { background-image : url ( ../images/flags/cr.png ) }
# cu { background-image : url ( ../images/flags/cu.png ) }
# cv { background-image : url ( ../images/flags/cv.png ) }
# cy { background-image : url ( ../images/flags/cy.png ) }
# cz { background-image : url ( ../images/flags/cz.png ) }
# da { background-image : url ( ../images/flags/da.png ) }
# de { background-image : url ( ../images/flags/de.png ) }
# dj { background-image : url ( ../images/flags/dj.png ) }
# dm { background-image : url ( ../images/flags/dm.png ) }
# do { background-image : url ( ../images/flags/do.png ) }
# dz { background-image : url ( ../images/flags/dz.png ) }
# ec { background-image : url ( ../images/flags/ec.png ) }
# ee { background-image : url ( ../images/flags/ee.png ) }
# eg { background-image : url ( ../images/flags/eg.png ) }
# eh { background-image : url ( ../images/flags/eh.png ) }
# el { background-image : url ( ../images/flags/el.png ) }
# en { background-image : url ( ../images/flags/en.png ) }
# er { background-image : url ( ../images/flags/er.png ) }
# es { background-image : url ( ../images/flags/es.png ) }
# et { background-image : url ( ../images/flags/et.png ) }
# eu { background-image : url ( ../images/flags/eu.png ) }
# fi { background-image : url ( ../images/flags/fi.png ) }
# fj { background-image : url ( ../images/flags/fj.png ) }
# fm { background-image : url ( ../images/flags/fm.png ) }
# fo { background-image : url ( ../images/flags/fo.png ) }
# fr { background-image : url ( ../images/flags/fr.png ) }
# ga { background-image : url ( ../images/flags/ga.png ) }
# gb { background-image : url ( ../images/flags/gb.png ) }
# gd { background-image : url ( ../images/flags/gd.png ) }
# ge { background-image : url ( ../images/flags/ge.png ) }
# gg { background-image : url ( ../images/flags/gg.png ) }
# gh { background-image : url ( ../images/flags/gh.png ) }
# gi { background-image : url ( ../images/flags/gi.png ) }
# gl { background-image : url ( ../images/flags/gl.png ) }
# gm { background-image : url ( ../images/flags/gm.png ) }
# gn { background-image : url ( ../images/flags/gn.png ) }
# gp { background-image : url ( ../images/flags/gp.png ) }
# gq { background-image : url ( ../images/flags/gq.png ) }
# gt { background-image : url ( ../images/flags/gt.png ) }
# gu { background-image : url ( ../images/flags/gu.png ) }
# gw { background-image : url ( ../images/flags/gw.png ) }
# gy { background-image : url ( ../images/flags/gy.png ) }
# hk { background-image : url ( ../images/flags/hk.png ) }
# hn { background-image : url ( ../images/flags/hn.png ) }
# hr { background-image : url ( ../images/flags/hr.png ) }
# ht { background-image : url ( ../images/flags/ht.png ) }
# hu { background-image : url ( ../images/flags/hu.png ) }
# id { background-image : url ( ../images/flags/id.png ) }
# ie { background-image : url ( ../images/flags/ie.png ) }
# il { background-image : url ( ../images/flags/il.png ) }
# im { background-image : url ( ../images/flags/im.png ) }
# in { background-image : url ( ../images/flags/in.png ) }
# iq { background-image : url ( ../images/flags/iq.png ) }
# ir { background-image : url ( ../images/flags/ir.png ) }
# is { background-image : url ( ../images/flags/is.png ) }
# it { background-image : url ( ../images/flags/it.png ) }
# je { background-image : url ( ../images/flags/je.png ) }
# jm { background-image : url ( ../images/flags/jm.png ) }
# jo { background-image : url ( ../images/flags/jo.png ) }
# jp { background-image : url ( ../images/flags/jp.png ) }
# ke { background-image : url ( ../images/flags/ke.png ) }
# kg { background-image : url ( ../images/flags/kg.png ) }
# kh { background-image : url ( ../images/flags/kh.png ) }
# ki { background-image : url ( ../images/flags/ki.png ) }
# km { background-image : url ( ../images/flags/km.png ) }
# kn { background-image : url ( ../images/flags/kn.png ) }
# kp { background-image : url ( ../images/flags/kp.png ) }
# kr { background-image : url ( ../images/flags/kr.png ) }
# kw { background-image : url ( ../images/flags/kw.png ) }
# ky { background-image : url ( ../images/flags/ky.png ) }
# kz { background-image : url ( ../images/flags/kz.png ) }
# la { background-image : url ( ../images/flags/la.png ) }
# lb { background-image : url ( ../images/flags/lb.png ) }
# lc { background-image : url ( ../images/flags/lc.png ) }
# li { background-image : url ( ../images/flags/li.png ) }
# lk { background-image : url ( ../images/flags/lk.png ) }
# lr { background-image : url ( ../images/flags/lr.png ) }
# ls { background-image : url ( ../images/flags/ls.png ) }
# lt { background-image : url ( ../images/flags/lt.png ) }
# lu { background-image : url ( ../images/flags/lu.png ) }
# lv { background-image : url ( ../images/flags/lv.png ) }
# ly { background-image : url ( ../images/flags/ly.png ) }
# ma { background-image : url ( ../images/flags/ma.png ) }
# mc { background-image : url ( ../images/flags/mc.png ) }
# md { background-image : url ( ../images/flags/md.png ) }
# me { background-image : url ( ../images/flags/me.png ) }
# mg { background-image : url ( ../images/flags/mg.png ) }
# mh { background-image : url ( ../images/flags/mh.png ) }
# mk { background-image : url ( ../images/flags/mk.png ) }
# ml { background-image : url ( ../images/flags/ml.png ) }
# mm { background-image : url ( ../images/flags/mm.png ) }
# mn { background-image : url ( ../images/flags/mn.png ) }
# mo { background-image : url ( ../images/flags/mo.png ) }
# mq { background-image : url ( ../images/flags/mq.png ) }
# mr { background-image : url ( ../images/flags/mr.png ) }
# ms { background-image : url ( ../images/flags/ms.png ) }
# mt { background-image : url ( ../images/flags/mt.png ) }
# mu { background-image : url ( ../images/flags/mu.png ) }
# mv { background-image : url ( ../images/flags/mv.png ) }
# mw { background-image : url ( ../images/flags/mw.png ) }
# mx { background-image : url ( ../images/flags/mx.png ) }
# my { background-image : url ( ../images/flags/my.png ) }
# mz { background-image : url ( ../images/flags/mz.png ) }
# na { background-image : url ( ../images/flags/na.png ) }
# nc { background-image : url ( ../images/flags/nc.png ) }
# ne { background-image : url ( ../images/flags/ne.png ) }
# ng { background-image : url ( ../images/flags/ng.png ) }
# ni { background-image : url ( ../images/flags/ni.png ) }
# nl { background-image : url ( ../images/flags/nl.png ) }
# no { background-image : url ( ../images/flags/no.png ) }
# np { background-image : url ( ../images/flags/np.png ) }
# nr { background-image : url ( ../images/flags/nr.png ) }
# nz { background-image : url ( ../images/flags/nz.png ) }
# om { background-image : url ( ../images/flags/om.png ) }
# pa { background-image : url ( ../images/flags/pa.png ) }
# pe { background-image : url ( ../images/flags/pe.png ) }
# pf { background-image : url ( ../images/flags/pf.png ) }
# pg { background-image : url ( ../images/flags/pg.png ) }
# ph { background-image : url ( ../images/flags/ph.png ) }
# pk { background-image : url ( ../images/flags/pk.png ) }
# pl { background-image : url ( ../images/flags/pl.png ) }
# pr { background-image : url ( ../images/flags/pr.png ) }
# ps { background-image : url ( ../images/flags/ps.png ) }
# pt-br { background-image : url ( ../images/flags/pt-br.png ) }
# pt { background-image : url ( ../images/flags/pt.png ) }
# pw { background-image : url ( ../images/flags/pw.png ) }
# py { background-image : url ( ../images/flags/py.png ) }
# qa { background-image : url ( ../images/flags/qa.png ) }
# re { background-image : url ( ../images/flags/re.png ) }
# ro { background-image : url ( ../images/flags/ro.png ) }
# rs { background-image : url ( ../images/flags/rs.png ) }
# ru { background-image : url ( ../images/flags/ru.png ) }
# rw { background-image : url ( ../images/flags/rw.png ) }
# sa { background-image : url ( ../images/flags/sa.png ) }
# sb { background-image : url ( ../images/flags/sb.png ) }
# sc { background-image : url ( ../images/flags/sc.png ) }
# sd { background-image : url ( ../images/flags/sd.png ) }
# se { background-image : url ( ../images/flags/se.png ) }
# sg { background-image : url ( ../images/flags/sg.png ) }
# si { background-image : url ( ../images/flags/si.png ) }
# sk { background-image : url ( ../images/flags/sk.png ) }
# sl { background-image : url ( ../images/flags/sl.png ) }
# sm { background-image : url ( ../images/flags/sm.png ) }
# sn { background-image : url ( ../images/flags/sn.png ) }
# so { background-image : url ( ../images/flags/so.png ) }
# sr { background-image : url ( ../images/flags/sr.png ) }
# st { background-image : url ( ../images/flags/st.png ) }
# sv { background-image : url ( ../images/flags/sv.png ) }
# sy { background-image : url ( ../images/flags/sy.png ) }
# sz { background-image : url ( ../images/flags/sz.png ) }
# tc { background-image : url ( ../images/flags/tc.png ) }
# td { background-image : url ( ../images/flags/td.png ) }
# tg { background-image : url ( ../images/flags/tg.png ) }
# th { background-image : url ( ../images/flags/th.png ) }
# tj { background-image : url ( ../images/flags/tj.png ) }
# tl { background-image : url ( ../images/flags/tl.png ) }
# tm { background-image : url ( ../images/flags/tm.png ) }
# tn { background-image : url ( ../images/flags/tn.png ) }
# to { background-image : url ( ../images/flags/to.png ) }
# tr { background-image : url ( ../images/flags/tr.png ) }
# tt { background-image : url ( ../images/flags/tt.png ) }
# tv { background-image : url ( ../images/flags/tv.png ) }
# tz { background-image : url ( ../images/flags/tz.png ) }
# ua { background-image : url ( ../images/flags/ua.png ) }
# ug { background-image : url ( ../images/flags/ug.png ) }
# uy { background-image : url ( ../images/flags/uy.png ) }
# uz { background-image : url ( ../images/flags/uz.png ) }
# va { background-image : url ( ../images/flags/va.png ) }
# vc { background-image : url ( ../images/flags/vc.png ) }
# ve { background-image : url ( ../images/flags/ve.png ) }
# vg { background-image : url ( ../images/flags/vg.png ) }
# vi { background-image : url ( ../images/flags/vi.png ) }
# vn { background-image : url ( ../images/flags/vn.png ) }
# vu { background-image : url ( ../images/flags/vu.png ) }
# ws { background-image : url ( ../images/flags/ws.png ) }
# ye { background-image : url ( ../images/flags/ye.png ) }
# za { background-image : url ( ../images/flags/za.png ) }
# zh-cn { background-image : url ( ../images/flags/zh-cn.png ) }
# zh-tw { background-image : url ( ../images/flags/zh-tw.png ) }
# zm { background-image : url ( ../images/flags/zm.png ) }
# zw { background-image : url ( ../images/flags/zw.png ) }
