/* @group Settings Theme.js */ .settings { position: relative; display: none; } /* @end */ /* @group Multithemes addons version 4 Plus Code Un-compressed */ /* @group Social icons background - colored */ .fa-box-custom { background-color: #ff6623; border-radius: .1em; color: #fefffe !important; width: 1.2857142857142858em; text-align: center; padding-top: .15em !important; padding-bottom: .15em !important; line-height: 1em !important; } /* ------CIRCLE icon----- */ .fa-box-o { border-radius: 1em !important;} .fa-box-o-half { border-radius: 1em !important; border-top-left-radius:0.1em !important; -webkit-border-top-left-radius:0.1em !important; -moz-border-radius-topleft:0.1em !important; border-top-right-radius:0.7em !important; -webkit-border-top-right-radius:0.7em !important; -moz-border-radius-topright:0.7em !important; border-bottom-left-radius:0.7em !important; -webkit-border-bottom-left-radius:0.7em !important; -moz-border-radius-bottomleft:0.7em !important; border-bottom-right-radius:0.1em !important; -webkit-border-bottom-right-radius:0.1em !important; -moz-border-radius-bottomright:0.1em !important; } /* ------CIRCLE icon hover----- */ .fa-box-o-square { border-radius: 1em !important; /* Prevent Webkit text rendering */ -webkit-transform: translateZ(0px); border-radius: 0.1em !important; transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; -webkit-transition: all 0.25s ease-out; -o-transition: all 0.25s ease-out; transition-delay: 23ms; -webkit-transition-delay: 23ms; -o-transition-delay: 23ms; -moz-transition-delay: 23ms } .fa-box-o-square:hover { border-radius: 1em !important; } /* ------CIRCLE end ----- */ .fa-box-silver { /* _____BETA STYLE_______ */ background: -webkit-linear-gradient(#fefffe, #858585); background: linear-gradient(#fefffe, #858585); background: -o-linear-gradient(#fefffe, #858585); color: #4c4b4c !important; /* MSIE */ filter: progid:DXImageTransform.Microsoft.Gradient( StartColorStr='#fefffe', EndColorStr='#858585', GradientType=0); border-radius: .1em; width: 1.2857142857142858em; text-align: center; padding-top: .15em !important; padding-bottom: .15em !important; text-shadow: #f0f0f0 0 1px 0 !important; line-height: 1em !important; } .fa-box-black { background-color: #0c0c0c; border-radius: .1em; color: #fefffe !important; width: 1.2857142857142858em; text-align: center; padding-top: .15em !important; padding-bottom: .15em !important; line-height: 1em !important; } .fa-box-grey { background-color: #919191; border-radius: .1em; color: #fefffe !important; width: 1.2857142857142858em; text-align: center; padding-top: .15em !important; padding-bottom: .15em !important; line-height: 1em !important; } .fa-box-white { background-color: #f9f9f9; border-radius: .1em; color: #5f5f5f !important; width: 1.2857142857142858em; text-align: center; padding-top: .15em !important; padding-bottom: .15em !important; line-height: 1em !important; } .fa-box-google-plus { background-color: #dd4b39; border-radius: .1em; color: #fefffe !important; width: 1.2857142857142858em; text-align: center; padding-top: .15em !important; padding-bottom: .15em !important; line-height: 1em !important; } .fa-box-blogger { background-color: #FF8833; border-radius: .1em; color: #fefffe !important; width: 1.2857142857142858em; text-align: center; padding-top: .15em !important; padding-bottom: .15em !important; line-height: 1em !important; } .fa-box-facebook { background-color: #3B5998 ; border-radius: .1em; /* Prevent Webkit text rendering and also using slideshow*/ -webkit-transform: translateZ(0px); /* Prevent Webkit text rendering and also using slideshow*/ color: #fefffe !important; width: 1.2857142857142858em; text-align: center; padding-top: .15em !important; padding-bottom: .15em !important; line-height: 1em !important; } .fa-box-flickr { background-color: #FE0883 ; border-radius: .1em; color: #fefffe !important; width: 1.2857142857142858em; text-align: center; padding-top: .15em !important; padding-bottom: .15em !important; line-height: 1em !important; } .fa-box-foursquare { background-color: #0072B1; border-radius: .1em; color: #fefffe !important; width: 1.2857142857142858em; text-align: center; padding-top: .15em !important; padding-bottom: .15em !important; line-height: 1em !important; } .fa-box-instagram { background-color: #4E433C; border-radius: .1em; color: #fefffe !important; width: 1.2857142857142858em; text-align: center; padding-top: .15em !important; padding-bottom: .15em !important; line-height: 1em !important; } .fa-box-linkedin { background-color: #4875B4; border-radius: .1em; color: #fefffe !important; width: 1.2857142857142858em; text-align: center; padding-top: .15em !important; padding-bottom: .15em !important; line-height: 1em !important; } .fa-box-reddit { background-color: #CEE3F8; border-radius: .1em; color: #6d6d6d !important; width: 1.2857142857142858em; text-align: center; padding-top: .15em !important; padding-bottom: .15em !important; line-height: 1em !important; } .fa-box-rss { background-color: #FA9B39; border-radius: .1em; color: #fefffe !important; width: 1.2857142857142858em; text-align: center; padding-top: .15em !important; padding-bottom: .15em !important; line-height: 1em !important; } .fa-box-github-alt { background-color: #e57300; border-radius: .1em; color: #fefffe !important; width: 1.2857142857142858em; text-align: center; padding-top: .15em !important; padding-bottom: .15em !important; line-height: 1em !important; } .fa-box-stumbleupon { background-color: #EB4924; border-radius: .1em; color: #fefffe !important; width: 1.2857142857142858em; text-align: center; padding-top: .15em !important; padding-bottom: .15em !important; line-height: 1em !important; } .fa-box-tumblr { background-color: #34526F; border-radius: .1em; color: #fefffe !important; width: 1.2857142857142858em; text-align: center; padding-top: .15em !important; padding-bottom: .15em !important; line-height: 1em !important; } .fa-box-twitter { background-color: #00A0D1; border-radius: .1em; color: #fefffe !important; width: 1.2857142857142858em; text-align: center; padding-top: .15em !important; padding-bottom: .15em !important; line-height: 1em !important; } .fa-box-pagelines { background-color: #4f92b1; border-radius: .1em; color: #fefffe !important; width: 1.2857142857142858em; text-align: center; padding-top: .15em !important; padding-bottom: .15em !important; line-height: 1em !important; } .fa-box-vimeo-blue { background-color: #44BBFF; border-radius: .1em; color: #fefffe !important; width: 1.2857142857142858em; text-align: center; padding-top: .15em !important; padding-bottom: .15em !important; line-height: 1em !important; } .fa-box-vimeo { background-color: #AAD450 !important; border-radius: .1em; color: #fefffe !important; width: 1.2857142857142858em; text-align: center; padding-top: .15em !important; padding-bottom: .15em !important; line-height: 1em !important; } .fa-box-youtube { background-color: #C4302B !important; border-radius: .1em; color: #fefffe !important; width: 1.2857142857142858em; text-align: center; padding-top: .15em !important; padding-bottom: .15em !important; line-height: 1em !important; } .fa-box-pinterest { background-color: #c40028 !important; border-radius: .1em; color: #fefffe !important; width: 1.2857142857142858em; text-align: center; padding-top: .15em !important; padding-bottom: .15em !important; line-height: 1em !important; } .fa-box-skype { background-color: #12A5F4 !important; border-radius: .1em; color: #fefffe !important; width: 1.2857142857142858em; text-align: center; padding-top: .15em !important; padding-bottom: .15em !important; line-height: 1em !important; } .fa-box-dropbox { background-color: #007ee5 !important; border-radius: .1em; color: #fefffe !important; width: 1.2857142857142858em; text-align: center; padding-top: .15em !important; padding-bottom: .15em !important; line-height: 1em !important; } .fa-box-soundcloud { background-color: #ff3a00 !important; border-radius: .1em; color: #fefffe !important; width: 1.2857142857142858em; text-align: center; padding-top: .15em !important; padding-bottom: .15em !important; line-height: 1em !important; } .fa-box-dribbble { background-color: #ea4c89 !important; border-radius: .1em; color: #fefffe !important; width: 1.2857142857142858em; text-align: center; padding-top: .15em !important; padding-bottom: .15em !important; line-height: 1em !important; } /* .fa-box-custom .fa-box-silver .fa-box-black .fa-box-grey .fa-box-white .fa-box-google-plus .fa-box-blogger .fa-box-facebook .fa-box-flickr .fa-box-foursquare .fa-box-instagram .fa-box-linkedin .fa-box-reddit .fa-box-rss .fa-box-github-alt .fa-box-stumbleupon .fa-box-tumblr .fa-box-twitter .fa-box-pagelines .fa-box-vimeo-blue .fa-box-vimeo .fa-box-youtube .fa-box-pinterest .fa-box-skype .fa-box-dropbox .fa-box-soundcloud .fa-box-dribbble */ /* Social Media Brand Colors $twitter: #00aced; $facebook: #3b5998; $googleplus: #dd4b39; $pinterest: #cb2027; $linkedin: #007bb6; $youtube: #bb0000; $vimeo: #aad450; $tumblr: #32506d; $instagram: #517fa4; $flickr: #ff0084; $dribbble: #ea4c89; $quora: #a82400; $foursquare: #0072b1; $forrst: #5B9A68; $vk: #45668e; $wordpress: #21759b; $stumbleupon: #EB4823; $yahoo: #7B0099; $blogger: #fb8f3d; $soundcloud: #ff3a00; --- LESS Social Media Brand Colors @twitter: #00aced; @facebook: #3b5998; @googleplus: #dd4b39; @pinterest: #cb2027; @linkedin: #007bb6; @youtube: #bb0000; @vimeo: #aad450; @tumblr: #32506d; @instagram: #517fa4; @flickr: #ff0084; @dribbble: #ea4c89; @quora: #a82400; @foursquare: #0072b1; @forrst: #5B9A68; @vk: #45668e; @wordpress: #21759b; @stumbleupon: #EB4823; @yahoo: #7B0099; @blogger: #fb8f3d; @soundcloud: #ff3a00; --- Social Media Brand Colors twitter: #00aced rgb(0, 172, 237) facebook: #3b5998 rgb(59, 89, 152) googleplus: #dd4b39 rgb(221, 75, 57) pinterest: #cb2027 rgb(203, 32, 39) linkedin: #007bb6 rgb(0, 123, 182) youtube: #bb0000 rgb(187, 0, 0) vimeo: #aad450 rgb(170, 212, 80) tumblr: #32506d rgb(50, 80, 109) instagram: #517fa4 rgb(81, 127, 164) flickr: #ff0084 rgb(255, 0, 132) dribbble: #ea4c89 rgb(234, 76, 137) quora: #a82400 rgb(168, 36, 0) foursquare: #0072b1 rgb(0, 114, 177) forrst: #5B9A68 rgb(91, 154, 104) vk: #45668e rgb(69, 102, 142) wordpress: #21759b rgb(33, 117, 155) stumbleupon: #EB4823 rgb(235, 72, 35) yahoo: #7B0099 rgb(123, 0, 153) blogger: #fb8f3d rgb(251, 143, 61) soundcloud: #ff3a00 rgb(255, 58, 0) */ /* @end */ /* @group Point Out text (beta) */ .fa-font-out { padding-left: 0.2em; padding-right: 0.2em; /* color in colortag-css - Color linked to the color of the tip --> color: %colour_tips_background%; */ } .fa-font-out-custom { padding-left: 0.2em; padding-right: 0.2em; /* custom color wit this code ( and change the #aad450: .fa-font-out-custom { background-color: #aad450 !important; } */ } .fa-font-out-custom-2 { padding-left: 0.2em; padding-right: 0.2em; /* custom color wit this code ( and change the #aad450: .fa-font-out-custom-2 { background-color: #aad450 !important; } */ } .fa-font-out-custom-3 { padding-left: 0.2em; padding-right: 0.2em; /* custom color wit this code ( and change the #aad450: .fa-font-out-custom-3 { background-color: #aad450 !important; } */ } .fa-font-out-custom-4 { padding-left: 0.2em; padding-right: 0.2em; /* custom color wit this code ( and change the #aad450: .fa-font-out-custom-4 { background-color: #aad450 !important; } */ } .fa-font-out-custom-5 { padding-left: 0.2em; padding-right: 0.2em; /* custom color wit this code ( and change the #aad450: .fa-font-out-custom-5 { background-color: #aad450 !important; } */ } /* @end */ /* @group INLINE text ( Inline, Inline Table and inline block) */ .fa-inline { display: inline; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; } .fa-inline h6, .fa-inline h5, .fa-inline h4, .fa-inline h3, .fa-inline h2, .fa-inline h1, .fa-inline .font-1, .fa-inline .font-2, .fa-inline .font-3, .fa-inline .font-4, .fa-inline .fotn-5, .fa-inline .font-6, .fa-inline .font-7, .fa-inline .font-8, .fa-inline .font-9, .fa-inline .font-10, .fa-inline .font-11, .fa-inline .font-12, .fa-inline .font-13, .fa-inline .font-14, .fa-inline .font-15, .fa-inline .font-16, .fa-inline .font-17, .fa-inline .font-18, .fa-inline .font-19, .fa-inline .font-20 { display: inline; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; } /* vertical-align: top; */ .fa-inline-table {display: inline-table; vertical-align: top; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0;} .fa-inline-table h6, .fa-inline-table h5, .fa-inline-table h4, .fa-inline-table h3, .fa-inline-table h2, .fa-inline-table h1, .fa-inline-table .font-1, .fa-inline-table .font-2, .fa-inline-table .font-3, .fa-inline-table .font-4, .fa-inline-table .fotn-5, .fa-inline-table .font-6, .fa-inline-table .font-7, .fa-inline-table .font-8, .fa-inline-table .font-9, .fa-inline-table .font-10, .fa-inline-table .font-11, .fa-inline-table .font-12, .fa-inline-table .font-13, .fa-inline-table .font-14, .fa-inline-table .font-15, .fa-inline-table .font-16, .fa-inline-table .font-17, .fa-inline-table .font-18, .fa-inline-table .font-19, .fa-inline-table .font-20 { display: inline-table; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0;} /* vertical-align: top; */ .fa-inline-block {display: inline-block; vertical-align: baseline; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0;} .fa-inline-block h6, .fa-inline-block h5, .fa-inline-block h4, .fa-inline-block h3, .fa-inline-block h2, .fa-inline-block h1, .fa-inline-block .font-1, .fa-inline-block .font-2, .fa-inline-block .font-3, .fa-inline-block .font-4, .fa-inline-block .fotn-5, .fa-inline-block .font-6, .fa-inline-block .font-7, .fa-inline-block .font-8, .fa-inline-block .font-9, .fa-inline-block .font-10, .fa-inline-block .font-11, .fa-inline-block .font-12, .fa-inline-block .font-13, .fa-inline-block .font-14, .fa-inline-block .font-15, .fa-inline-block .font-16, .fa-inline-block .font-17, .fa-inline-block .font-18, .fa-inline-block .font-19, .fa-inline-block .font-20 { display: inline-block; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0;} /* vertical-align: top; */ h1 ,h2, h3, h4, h5, h6 { } /* @end */ /* @group CURSOR STYLE (beta) */ /* ------ icon - cursor apparence ------- */ ./* change the cursor icon in hover */ .fa-cursor-off-site{ cursor:alias;} .fa-cursor-not-allowed{ cursor:not-allowed;} .fa-cursor-help{ cursor:help;} .fa-cursor-wait { cursor:wait;} .fa-cursor-default { cursor:default;} .fa-cursor-pointer { cursor:pointer;} .fa-cursor-crosshair { cursor:crosshair;} .fa-cursor-move { cursor:move;} .fa-cursor-e-resize{ cursor:e-resize;} .fa-cursor-ne-resize { cursor:ne-resize;} .fa-cursor-n-resize { cursor:n-resize;} .fa-cursor-se-resize { cursor:se-resize;} .fa-cursor-sw-resize{ cursor:sw-resize;} .fa-cursor-s-resize{ cursor:s-resize;} .fa-cursor-w-resize { cursor:w-resize} .fa-cursor-progress{ cursor:progress;} .fa-cursor-all-scroll { cursor:all-scroll;} .fa-cursor-col-resize{ cursor:col-resize;} .fa-cursor-no-drop{ cursor:no-drop;} .fa-cursor-row-resize{ cursor:row-resize;} .fa-cursor-vertical-text{ cursor:vertical-text;} .fa-cursor-off-site, .fa-cursor-not-allowed, .fa-cursor-help, .fa-cursor-wait, .fa-cursor-default, .fa-cursor-pointer, .fa-cursor-crosshair, .fa-cursor-move, .fa-cursor-e-resize, .fa-cursor-ne-resize, .fa-cursor-n-resize, .fa-cursor-se-resize, .fa-cursor-sw-resize, .fa-cursor-s-resize, .fa-cursor-w-resize, .fa-cursor-progress, .fa-cursor-all-scroll, .fa-cursor-col-resize, .fa-cursor-no-drop, .fa-cursor-row-resize, .fa-cursor-vertical-text { } /* @end */ /* @group STYLES SILVER */ /* ------ icon - silver CSS3 ------- */ .fa-silver-light { background: -webkit-linear-gradient(#fefffe, #858585); background: -o-linear-gradient(transparent, transparent);/* remove gradient in OPERA */ -webkit-background-clip: text; -webkit-text-fill-color: transparent; color: #dadbda; text-shadow: none !important; /* MSIE */ /* filter: progid:DXImageTransform.Microsoft.Gradient( StartColorStr='#fefffe', EndColorStr='#858585', GradientType=0); */ } .fa-silver-light-inverse { background: -webkit-linear-gradient(#858585, #fefffe); background: -o-linear-gradient(transparent, transparent);/* remove gradient in OPERA */ -webkit-background-clip: text; -webkit-text-fill-color: transparent; color: #dadbda; text-shadow: none !important; /* MSIE */ /* filter: progid:DXImageTransform.Microsoft.Gradient( StartColorStr='#858585', EndColorStr='#fefffe', GradientType=0); */ } .fa-silver { background: -webkit-linear-gradient(#a6a6a6, #5e5e5e); background: -o-linear-gradient(transparent, transparent);/* remove gradient in OPERA */ -webkit-background-clip: text; -webkit-text-fill-color: transparent; color: #828282; text-shadow: none !important; /* MSIE */ /* filter: progid:DXImageTransform.Microsoft.Gradient( StartColorStr='#a6a6a6', EndColorStr='#5e5e5e', GradientType=0); */ } .fa-silver-inverse { background: -webkit-linear-gradient(#5e5e5e, #a6a6a6); background: -o-linear-gradient(transparent, transparent);/* remove gradient in OPERA */ -webkit-background-clip: text; -webkit-text-fill-color: transparent; color: #828282; text-shadow: none !important; /* MSIE */ /* filter: progid:DXImageTransform.Microsoft.Gradient( StartColorStr='#5e5e5e', EndColorStr='#a6a6a6', GradientType=0); */ } .fa-silver-dark{ background: -webkit-linear-gradient(#434343, #2d2d2d); background: -o-linear-gradient(transparent, transparent);/* remove gradient in OPERA */ -webkit-background-clip: text; -webkit-text-fill-color: transparent; color: #393939; text-shadow: none !important; /* MSIE */ /* filter: progid:DXImageTransform.Microsoft.Gradient( StartColorStr='#434343', EndColorStr='#2d2d2d', GradientType=0); */ } .fa-silver-dark-inverse{ background: -webkit-linear-gradient(#2d2d2d, #434343); background: -o-linear-gradient(transparent, transparent);/* remove gradient in OPERA */ -webkit-background-clip: text; -webkit-text-fill-color: transparent; color: #393939; text-shadow: none !important; /* MSIE */ /* filter: progid:DXImageTransform.Microsoft.Gradient( StartColorStr='#2d2d2d', EndColorStr='#434343', GradientType=0); */ } /* @end */ /* @group STYLES GLOW */ /* ------ GLOW FAMILY ------- */ /* ------ GLOW FIX ------- */ .fa-glow-black { color: #000 !important; text-shadow: #000 0 -2px 15px; /* visible in all browsers except IE8 */ /* filter: Shadow(Color=#010101, Direction=0, Strength=12); */ filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=8); /* FOR IE8/9 */ -webkit-filter: blur(3px); /* visible in chrome and safari */ } .fa-glow-white { color: #fefffe !important; text-shadow: #fefffe 0 -2px 15px; /* visible in all browsers except IE8 */ /* filter: Shadow(Color=#efefef, Direction=0, Strength=8); */ /* FOR IE8/9 */ filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=8); /* FOR IE8/9 */ -webkit-filter: blur(3px); /* visible in chrome and safari */ } /* ------ GLOW FIX ------- */ /* ------ GLOW - IN - ANIMATED ------- */ .fa-glow-black-in { color: #000 !important; text-shadow: #000 0 -2px 15px; /* visible in all browsers except. IE8 */ /* filter: Shadow(Color=#010101, Direction=0, Strength=12); */ filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=8); /* FOR IE8/9 */ -webkit-filter: blur(3px); /* visible in chrome and safari */ -webkit-animation: glow-black-in 1.8s ease-out both !important; -moz-animation: glow-black-in 1.8s ease-out both !important; -o-animation: glow-black-in 1.8s ease-out both !important; animation: glow-black-in 1.8s ease-out both !important; } @keyframes glow-black-in{ 0% { text-shadow: #2b2b2b 0 0px 0px; /* BLUR NOT supported in firefox */ } 30% { text-shadow: #2b2b2b 0 0px 0px; /* BLUR NOT supported in firefox */ } 100% { text-shadow: #000 0 -2px 15px; /* BLUR NOT supported in firefox */ } } @-moz-keyframes glow-black-in{ 0% { text-shadow: #2b2b2b 0 0px 0px; /* BLUR NOT supported in firefox */ } 30% { text-shadow: #2b2b2b 0 0px 0px; /* BLUR NOT supported in firefox */ } 100% { text-shadow: #000 0 -2px 15px; /* BLUR NOT supported in firefox */ } } @-webkit-keyframes glow-black-in{ 0% { text-shadow: #2b2b2b 0 0px 0px; -webkit-filter: blur(0px); } 30% { text-shadow: #2b2b2b 0 0px 0px; -webkit-filter: blur(0px); } 100% { text-shadow: #000 0 -2px 15px; -webkit-filter: blur(3px); } } @-o-keyframes glow-black-in{ 0% { text-shadow: #2b2b2b 0 0px 0px; -webkit-filter: blur(0px); } 30% { text-shadow: #2b2b2b 0 0px 0px; -webkit-filter: blur(0px); } 100% { text-shadow: #000 0 -2px 15px; -webkit-filter: blur(3px); } } @-ms-keyframes glow-black-in{ /* IE9 does not support CSS animation. */ 0% { text-shadow: #2b2b2b 0 0px 6px; -webkit-filter: blur(0px); filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=8); } 30% { text-shadow: #2b2b2b 0 0px 6px; -webkit-filter: blur(0px); filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=0); } 100% { text-shadow: #000 0 -2px 15px; -webkit-filter: blur(3px); filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=8); } } .fa-glow-white-in { color: #fefffe !important; text-shadow: #fefffe 0 -2px 15px; /* visible in all browsers exc. IE8 */ /* filter: Shadow(Color=#efefef, Direction=0, Strength=8); */ /* FOR IE8/9 */ filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=8); /* FOR IE8/9 */ -webkit-filter: blur(3px); /* visible in chrome and safari */ -webkit-animation: glow-white-in 1.8s ease-out both !important; -moz-animation: glow-white-in 1.8s ease-out both !important; -o-animation: glow-white-in 1.8s ease-out both !important; animation: glow-white-in 1.8s ease-out both !important; } @keyframes glow-white-in { 0% { text-shadow: #efefef 0 0px 0px; /* BLUR NOT supported in firefox */ } 30% { text-shadow: #efefef 0 0px 0px; /* BLUR NOT supported in firefox */ } 100% { text-shadow: #fefffe 0 -2px 15px;/* BLUR NOT supported in firefox */ } } @-moz-keyframes glow-white-in { 0% { text-shadow: #efefef 0 0px 0px; /* BLUR NOT supported in firefox */ } 30% { text-shadow: #efefef 0 0px 0px; /* BLUR NOT supported in firefox */ } 100% { text-shadow: #fefffe 0 -2px 15px;/* BLUR NOT supported in firefox */ } } @-webkit-keyframes glow-white-in { 0% { text-shadow: #efefef 0 0px 0px; -webkit-filter: blur(0px); } 30% { text-shadow: #efefef 0 0px 0px; -webkit-filter: blur(0px); } 100% { text-shadow: #fefffe 0 -2px 15px; -webkit-filter: blur(3px); } } @-o-keyframes glow-white-in { 0% { text-shadow: #efefef 0 0px 0px; -webkit-filter: blur(0px); } 30% { text-shadow: #efefef 0 0px 0px; -webkit-filter: blur(0px); } 100% { text-shadow: #fefffe 0 -2px 15px; -webkit-filter: blur(3px); } } @-ms-keyframes glow-white-in {/* IE9 does not support CSS animation. */ 0% { text-shadow: #efefef 0 0px 0px; -webkit-filter: blur(0px); filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=0); } 30% { text-shadow: #efefef 0 0px 0px; -webkit-filter: blur(0px); filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=0); } 100% { text-shadow: #fefffe 0 -2px 15px; -webkit-filter: blur(3px); filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=8); } } /* ------ GLOW - IN - ANIMATED ------- */ /* ------ GLOW - OUT - ANIMATED ------- */ .fa-glow-black-out { color: #000 !important; text-shadow: #000 0 0px 0px; /* visible in all browsers exc. IE8 */ /* filter: Shadow(Color=#010101, Direction=0, Strength=0); */ /* filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=0); */ /* FOR IE8/9 */ -webkit-filter: blur(0px); /* visible in chrome and safari */ -webkit-animation: glow-black-out 2.2s ease-in both !important; -moz-animation: glow-black-out 2.2s ease-in both !important; -o-animation: glow-black-out 2.2s ease-in both !important; animation: glow-black-out 2.2s ease-in both !important; } @keyframes glow-black-out{ 0% { text-shadow: #000 0 -1px 15px; /* BLUR NOT correctly supported in firefox */ } 30% { text-shadow: #000 0 -1px 15px; /* BLUR NOT correctly supported in firefox */ } 100% { text-shadow: #000 0 0px 0px; /* BLUR NOT correctly supported in firefox */ } } @-moz-keyframes glow-black-out{ 0% { text-shadow: #000 0 -1px 15px; /* BLUR NOT correctly supported in firefox */ } 30% { text-shadow: #000 0 -1px 15px; /* BLUR NOT correctly supported in firefox */ } 100% { text-shadow: #000 0 0px 0px; /* BLUR NOT correctly supported in firefox */ } } @-webkit-keyframes glow-black-out{ 0% { text-shadow: #000 0 -1px 15px; -webkit-filter: blur(3px); } 30% { text-shadow: #000 0 -1px 15px; -webkit-filter: blur(3px); } 100% { text-shadow: #000 0 0px 0px; -webkit-filter: blur(0px); } } @-o-keyframes glow-black-out{ 0% { text-shadow: #000 0 -1px 15px; -webkit-filter: blur(3px); } 30% { text-shadow: #000 0 -1px 15px; -webkit-filter: blur(3px); } 100% { text-shadow: #000 0 0px 0px; -webkit-filter: blur(0px); } } @-ms-keyframes glow-black-out{/* IE9 does not support CSS animation. */ 0% { text-shadow: #000 0 -1px 15px; -webkit-filter: blur(3px); filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=8); } 30% { text-shadow: #000 0 -1px 15px; -webkit-filter: blur(3px); filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=8); } 100% { text-shadow: #000 0 0px 0px; -webkit-filter: blur(0px); filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=0); } } .fa-glow-white-out { color: #fefffe !important; text-shadow: #efefef 0 0px 0px; /* visible in all browsers exc. IE8 */ /* filter: Shadow(Color=#efefef, Direction=0, Strength=6); */ /* FOR IE8/9 */ -webkit-filter: blur(0px); /* visible in chrome and safari */ -webkit-animation: glow-white-out 2.2s ease-in both !important; -moz-animation: glow-white-out 2.2s ease-in both !important; -o-animation: glow-white-out 2.2s ease-in both !important; animation: glow-white-out 2.2s ease-in both !important; } @-moz-keyframes glow-white-out { 0% { text-shadow: #fefffe 0 1px 15px; /* BLUR NOT correctly supported in firefox */ } 30% { text-shadow: #fefffe 0 1px 15px; /* BLUR NOT correctly supported in firefox */ } 100% { text-shadow: #efefef 0 0px 0px; /* BLUR NOT correctly supported in firefox */ } } @-webkit-keyframes glow-white-out { 0% { text-shadow: #fefffe 0 1px 15px; -webkit-filter: blur(3px); } 30% { text-shadow: #fefffe 0 1px 15px; -webkit-filter: blur(3px); } 100% { text-shadow: #efefef 0 0px 0px; -webkit-filter: blur(0px); } } @-o-keyframes glow-white-out { 0% { text-shadow: #fefffe 0 1px 15px; -webkit-filter: blur(3px); } 30% { text-shadow: #fefffe 0 1px 15px; -webkit-filter: blur(3px); } 100% { text-shadow: #efefef 0 0px 0px; -webkit-filter: blur(0px); } } @-ms-keyframes glow-white-out {/* IE9 does not support CSS animation. */ 0% { text-shadow: #fefffe 0 1px 15px; -webkit-filter: blur(3px);filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=8); } 30% { text-shadow: #fefffe 0 1px 15px; -webkit-filter: blur(3px); filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=8); } 100% { text-shadow: #efefef 0 0px 0px; -webkit-filter: blur(0px); filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=0); } } /* ------ GLOW FAMILY ------- */ /* @end */ /* @group STYLES SHADOW */ /* shadow-bottom is a BETA STYLE IN DEVELOPMENT: READ BEFORE USE: This stile require an image because the shadow behavior is different between browsers. Moreover Firefox don't support the blur. Use this style with caution and check the result on your selected browsers. */ /* --start beta style -- */ .fa-shadow-bottom {position: relative;} .fa-shadow-bottom:after { content: " "; height: 3px; position: absolute; width: 90%; left: 0; right: 0; text-shadow: #0c0c0c 0 0 8px;/* remove COLOR in OPERA */ -webkit-background-clip: text; /* ERASE AFTER CONTENT */ -webkit-text-fill-color: transparent; /* ERASE AFTER CONTENT */ /* filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=30) !important; */ -webkit-filter: blur(3px); box-shadow: 0px 0px 13px 0px #000 ; -webkit-box-shadow: 0px 0px 13px 0px #000 ; -moz-box-shadow: 0px 0px 13px 0px #000 ; border-radius:9px; -webkit-border-radius:9px; -moz-border-radius:9px; background: transparent url(css/webfonts/fontawesome/shadow_tile_2.png) repeat center center; padding-bottom: 0; margin-right: auto; margin-left: auto; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; filter: alpha(opacity=40); opacity: 0.48; margin-top: 1.1em; overflow: visible; } /* filter: progid:DXImageTransform.Microsoft.DropShadow(offx=1, offy=1, color=#000000); -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=90, Color='#102530')"; filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=90, Color='#102530'); filter:DropShadow(Color=#102530, OffX=0, OffY=3); zoom: 1; */ /* background: transparent url(css/webfonts/fontawesome/shadow_1.png) no-repeat center center; -webkit-background-size: cover !important; -moz-background-size: cover !important; -o-background-size: cover !important; background-size: cover !important; */ /* --end beta style -- */ /* ------ icon shadow ------- */ .fa-shadow-white-thin { text-shadow: #dcdcdc 0 1px 2px; /* filter: Shadow(Color=#dcdcdc, Direction=180, Strength=1); */ /* FOR IE8/9 */ filter:progid:DXImageTransform.Microsoft.Shadow(color='white', Direction=180, Strength=2); } .fa-shadow-white { text-shadow: #dcdcdc 0 2px 3px; /* filter: Shadow(Color=#dcdcdc, Direction=180, Strength=3); */ /* FOR IE8/9 */ filter:progid:DXImageTransform.Microsoft.Shadow(color='white', Direction=180, Strength=3); } .fa-shadow-white-big { text-shadow: #dcdcdc 0 3px 5px; /* filter: Shadow(Color=#dcdcdc, Direction=180, Strength=4); *//* FOR IE8/9 */ filter:progid:DXImageTransform.Microsoft.Shadow(color='white', Direction=180, Strength=4); } .fa-shadow-black-thin { text-shadow: #2b2b2b 0 1px 2px; /* filter: Shadow(Color=#2b2b2b, Direction=180, Strength=1); *//* FOR IE8/9 */ /* filter: progid:DXImageTransform.Microsoft.Shadow(direction=180,strength=1,color=2b2b2b); */ filter:progid:DXImageTransform.Microsoft.Shadow(color='black', Direction=180, Strength=2); } .fa-shadow-black { text-shadow: #2b2b2b 0 2px 3px; /* filter: Shadow(Color=#2b2b2b, Direction=180, Strength=3); */ /* FOR IE8/9 */ filter:progid:DXImageTransform.Microsoft.Shadow(color='black', Direction=180, Strength=3); } .fa-shadow-black-big { text-shadow: #2b2b2b 0 3px 6px; /* filter: Shadow(Color=#2b2b2b, Direction=180, Strength=4); */ /* FOR IE8/9 */ filter:progid:DXImageTransform.Microsoft.Shadow(color='black', Direction=180, Strength=4); } /* @end */ /* @group TRANSFORM SLIP */ /* ----- SLIP DOWN------ */ .fa-slip { display: inline-block; vertical-align: baseline; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; -webkit-animation: slip 1.3s ease-in both !important; animation: slip 1.3s ease-in both !important; -moz-animation: slip 1.3s ease-in both !important; -ms-animation: slip 1.3s ease-in both !important; -o-animation: slip 1.3s ease-in both !important; margin-right: auto; margin-left: auto; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; /* Prevent Webkit text rendering */ -webkit-transform: translateZ(0px); /* Prevent Webkit text rendering */ -webkit-transform-style: preserve-3d; padding-right: 1px; padding-left: 1px; } @-webkit-keyframes slip { 0% { -webkit-transform: perspective(120px)rotateX(90deg) translateY(-50%); opacity: 0; } 70% { -webkit-transform: perspective(120px)rotateX(0deg) translateY(0px); opacity: 1; } 100% {opacity: 1; -webkit-transform: perspective(0px) rotateX(0deg) translateY(0px); } } @keyframes slip { 0% {opacity: 0; transform: perspective(120px) rotateX(90deg) rotateY(0deg) translateY(-50%); -webkit-transform: perspective(120px) rotateX(90deg) rotateY(0deg) translateY(-50%) } 70% {opacity: 1; transform: perspective(120px) rotateX(0deg) rotateY(0deg) translateY(0px); -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) translateY(0px) } 100% {opacity: 1; transform: perspective(0px) rotateX(0deg) rotateY(0deg) translateY(0px); -webkit-transform: perspective(0px) rotateX(0deg) rotateY(0deg) translateY(0px) } } @-ms-keyframes slip {/* IE9 does not support CSS animation. */ 0% { -ms-transform: perspective(120px)rotateX(90deg) translateY(-50%); opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; } 70% { -ms-transform: perspective(120px)rotateX(0deg) translateY(0px); opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; } 100% { -ms-transform: perspective(0px) rotateX(0deg) translateY(0px); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; } } @-o-keyframes slip { /* Opera 12.x can't support CSS 3D Transforms */ 0% { -o-transform: perspective(120px)rotateX(90deg) translateY(-50%); opacity: 0; } 70% { -o-transform: perspective(120px)rotateX(0deg) translateY(0px); opacity: 1; } 100% { -o-transform: perspective(0px) rotateX(0deg) translateY(0px); } } /* ------------- */ /* @end */ /* @group TRANSFORM FLIP*/ /* -------flip HORIZONTAL "Y" 200------ */ .fa-flip-horizontal-200 { display: inline-block; vertical-align: baseline; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; -webkit-animation: flip-y-200 2s ease-in both !important; animation: flip-y-200 2s ease-in both !important; -moz-animation: flip-y-200 2s ease-in both !important; -ms-animation: flip-y-200 2s ease-in both !important; -o-animation: flip-y-200 2s ease-in both !important; margin-right: auto; margin-left: auto; padding-right: 1px; padding-left: 1px; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; /* Prevent Webkit text rendering */ -webkit-transform: translateZ(0px); /* Prevent Webkit text rendering */ -webkit-transform-style: preserve-3d; } @-webkit-keyframes flip-y-200 { 0% { -webkit-transform: perspective(0px)rotateY(90deg); opacity: 0; } 30% { opacity: 0; } 100% { -webkit-transform: perspective(0px) rotateY(0deg); opacity: 1; } } @keyframes flip-y-200 { 0% { opacity: 0; transform: perspective(100px) rotateX(0deg) rotateY(90deg); } 30% { opacity: 0; } 100% { opacity: 1; -webkit-transform: perspective(100px) rotateX(0deg) rotateY(0deg); } } @-ms-keyframes flip-y-200 {/* IE9 does not support CSS animation. */ 0% { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; opacity: 0; transform: perspective(100px) rotateX(0deg) rotateY(90deg); } 30% { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; opacity: 0; } 100% { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; opacity: 1; transform: perspective(100px) rotateX(0deg) rotateY(0deg); } } @-o-keyframes flip-y-200 { /* Opera 12.x can't support CSS 3D Transforms */ 0% {opacity: 0; } 30% { opacity: 0; } 100% { opacity: 1;} } /* ------------- */ /* -------flip HORIZONTAL "Y" 150------ */ .fa-flip-horizontal-150 { display: inline-block; vertical-align: baseline; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; -webkit-animation: flip-y-150 1.5s ease-in both !important; animation: flip-y-150 1.5s ease-in both !important; -moz-animation: flip-y-150 1.5s ease-in both !important; -ms-animation: flip-y-150 1.5s ease-in both !important; -o-animation: flip-y-150 1.5s ease-in both !important; padding-right: 1px; padding-left: 1px; margin-right: auto; margin-left: auto; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; /* Prevent Webkit text rendering */ -webkit-transform: translateZ(0px); /* Prevent Webkit text rendering */ -webkit-transform-style: preserve-3d; } @-webkit-keyframes flip-y-150 { 0% { -webkit-transform: perspective(0px)rotateY(90deg); opacity: 0; } 30% { opacity: 0; } 100% { -webkit-transform: perspective(0px) rotateY(0deg); opacity: 1; } } @keyframes flip-y-150 { 0% { opacity: 0; transform: perspective(100px) rotateX(0deg) rotateY(90deg); } 30% { opacity: 0; } 100% { opacity: 1; transform: perspective(100px) rotateX(0deg) rotateY(0deg); } } @-ms-keyframes flip-y-150 {/* IE9 does not support CSS animation. */ 0% { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; opacity: 0; transform: perspective(100px) rotateX(0deg) rotateY(90deg); } 30% { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; opacity: 0; } 100% { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; opacity: 1; transform: perspective(100px) rotateX(0deg) rotateY(0deg); } } @-o-keyframes flip-y-150 { /* Opera 12.x can't support CSS 3D Transforms */ 0% {opacity: 0; } 30% { opacity: 0; } 100% { opacity: 1;} } /* ------------- */ /* -------flip HORIZONTAL "Y" 100------ */ .fa-flip-horizontal-100 { display: inline-block; vertical-align: baseline; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; -webkit-animation: flip-y-100 1s ease-in both !important; animation: flip-y-100 1s ease-in both !important; -moz-animation: flip-y-100 1s ease-in both !important; -ms-animation: flip-y-100 1s ease-in both !important; -o-animation: flip-y-100 1s ease-in both !important; padding-right: 1px; padding-left: 1px; margin-right: auto; margin-left: auto; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; /* Prevent Webkit text rendering */ -webkit-transform: translateZ(0px); /* Prevent Webkit text rendering */ -webkit-transform-style: preserve-3d; } @-webkit-keyframes flip-y-100 { 0% { -webkit-transform: perspective(0px)rotateY(90deg); opacity: 0; } 30% { opacity: 0; } 100% { -webkit-transform: perspective(0px) rotateY(0deg); opacity: 1; } } @keyframes flip-y-100 { 0% { opacity: 0; transform: perspective(100px) rotateX(0deg) rotateY(90deg); } 30% { opacity: 0; } 100% { opacity: 1; transform: perspective(100px) rotateX(0deg) rotateY(0deg); } } @-ms-keyframes flip-y-100 {/* IE9 does not support CSS animation. */ 0% { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; opacity: 0; transform: perspective(100px) rotateX(0deg) rotateY(90deg); } 30% { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; opacity: 0; } 100% { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; opacity: 1; transform: perspective(100px) rotateX(0deg) rotateY(0deg); } } @-o-keyframes flip-y-100 { /* Opera 12.x can't support CSS 3D Transforms */ 0% {opacity: 0; } 30% { opacity: 0; } 100% { opacity: 1;} } /* ------------- */ /* -------flip HORIZONTAL "Y" 50------ */ .fa-flip-horizontal-50 { display: inline-block; vertical-align: baseline; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; -webkit-animation: flip-y-50 0.5s ease-in both !important; animation: flip-y-50 0.5s ease-in both !important; -moz-animation: flip-y-50 0.5s ease-in both !important; -ms-animation: flip-y-50 0.5s ease-in both !important; -o-animation: flip-y-50 0.5s ease-in both !important; padding-right: 1px; padding-left: 1px; margin-right: auto; margin-left: auto; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; /* Prevent Webkit text rendering */ -webkit-transform: translateZ(0px); /* Prevent Webkit text rendering */ -webkit-transform-style: preserve-3d; } @-webkit-keyframes flip-y-50 { 0% { -webkit-transform: perspective(0px)rotateY(90deg); opacity: 0; } 30% { opacity: 0; } 100% { -webkit-transform: perspective(0px) rotateY(0deg); opacity: 1; } } @keyframes flip-y-50 { 0% { opacity: 0; transform: perspective(100px) rotateX(0deg) rotateY(90deg); } 30% { opacity: 0; } 100% { opacity: 1; transform: perspective(100px) rotateX(0deg) rotateY(0deg); } } @-ms-keyframes flip-y-50 {/* IE9 does not support CSS animation. */ 0% { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; opacity: 0; transform: perspective(100px) rotateX(0deg) rotateY(90deg); } 30% { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; opacity: 0; } 100% { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; opacity: 1; transform: perspective(100px) rotateX(0deg) rotateY(0deg); } } @-o-keyframes flip-y-50 { /* Opera 12.x can't support CSS 3D Transforms */ 0% {opacity: 0; } 30% { opacity: 0; } 100% { opacity: 1;} } /* ------------- */ /* -------flip VERTICAL "X" 200------ */ .fa-flip-vertical-200 { display: inline-block; vertical-align: baseline; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; -webkit-animation: flip-x-200 2s ease-in both !important; animation: flip-x-200 2s ease-in both !important; -moz-animation: flip-x-200 2s ease-in both !important; -ms-animation: flip-x-200 2s ease-in both !important; -o-animation: flip-x-200 2s ease-in both !important; margin-right: auto; margin-left: auto; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; /* Prevent Webkit text rendering */ -webkit-transform: translateZ(0px); /* Prevent Webkit text rendering */ -webkit-transform-style: preserve-3d; } @-webkit-keyframes flip-x-200 { 0% { -webkit-transform: perspective(0px)rotateX(90deg); opacity: 0; } 30% { opacity: 0; } 100% { -webkit-transform: perspective(0px) rotateX(0deg); opacity: 1; } } @keyframes flip-x-200 { 0% { opacity: 0; transform: perspective(100px) rotateX(90deg) rotateY(0deg); } 30% { opacity: 0; } 100% { opacity: 1; transform: perspective(100px) rotateX(0deg) rotateY(0deg); } } @-ms-keyframes flip-x-200 {/* IE9 does not support CSS animation. */ 0% { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; opacity: 0; transform: perspective(100px) rotateX(90deg) rotateY(0deg); } 30% { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; opacity: 0; } 100% { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; opacity: 1; transform: perspective(100px) rotateX(0deg) rotateY(0deg); } } @-o-keyframes flip-x-200 { /* Opera 12.x can't support CSS 3D Transforms */ 0% {opacity: 0; } 30% { opacity: 0; } 100% { opacity: 1;} } /* ------------- */ /* -------flip VERTICAL "X" 150------ */ .fa-flip-vertical-150 { display: inline-block; vertical-align: baseline; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; -webkit-animation: flip-x-150 1.5s ease-in both !important; animation: flip-x-150 1.5s ease-in both !important; -moz-animation: flip-x-150 1.5s ease-in both !important; -ms-animation: flip-x-150 1.5s ease-in both !important; -o-animation: flip-x-150 1.5s ease-in both !important; margin-right: auto; margin-left: auto; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; /* Prevent Webkit text rendering */ -webkit-transform: translateZ(0px); /* Prevent Webkit text rendering */ -webkit-transform-style: preserve-3d; } @-webkit-keyframes flip-x-150 { 0% { -webkit-transform: perspective(0px)rotateX(90deg); opacity: 0; } 27% { opacity: 0; } 100% { -webkit-transform: perspective(0px) rotateX(0deg); opacity: 1; } } @keyframes flip-x-150 { 0% { opacity: 0; transform: perspective(100px) rotateX(90deg) rotateY(0deg); } 27% { opacity: 0; } 100% { opacity: 1; transform: perspective(100px) rotateX(0deg) rotateY(0deg); } } @-ms-keyframes flip-x-150 {/* IE9 does not support CSS animation. */ 0% { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; opacity: 0; transform: perspective(100px) rotateX(90deg) rotateY(0deg); } 27% { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; opacity: 0; } 100% { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; opacity: 1; transform: perspective(100px) rotateX(0deg) rotateY(0deg); } } @-o-keyframes flip-x-150 { /* Opera 12.x can't support CSS 3D Transforms */ 0% {opacity: 0; } 30% { opacity: 0; } 100% { opacity: 1;} } /* ------------- */ /* -------flip VERTICAL "X" 100------ */ .fa-flip-vertical-100 { display: inline-block; vertical-align: baseline; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; -webkit-animation: flip-x-100 1s ease-in both !important; animation: flip-x-100 1s ease-in both !important; -moz-animation: flip-x-100 1s ease-in both !important; -ms-animation: flip-x-100 1s ease-in both !important; -o-animation: flip-x-100 1s ease-in both !important; margin-right: auto; margin-left: auto; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; /* Prevent Webkit text rendering */ -webkit-transform: translateZ(0px); /* Prevent Webkit text rendering */ -webkit-transform-style: preserve-3d; } @-webkit-keyframes flip-x-100 { 0% { -webkit-transform: perspective(0px)rotateX(90deg); opacity: 0; } 25% { opacity: 0; } 100% { -webkit-transform: perspective(0px) rotateX(0deg); opacity: 1; } } @keyframes flip-x-100 { 0% { opacity: 0; transform: perspective(100px) rotateX(90deg) rotateY(0deg); } 25% { opacity: 0; } 100% { opacity: 1; transform: perspective(100px) rotateX(0deg) rotateY(0deg); } } @-ms-keyframes flip-x-100 {/* IE9 does not support CSS animation. */ 0% { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; opacity: 0; transform: perspective(100px) rotateX(90deg) rotateY(0deg); } 25% { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; opacity: 0; } 100% { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; opacity: 1; transform: perspective(100px) rotateX(0deg) rotateY(0deg); } } @-o-keyframes flip-x-100 { /* Opera 12.x can't support CSS 3D Transforms */ 0% {opacity: 0; } 30% { opacity: 0; } 100% { opacity: 1;} } /* -------flip VERTICAL "X" 50------ */ .fa-flip-vertical-50 { display: inline-block; vertical-align: baseline; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; -webkit-animation: flip-x-50 0.5s ease-in both !important; animation: flip-x-50 0.5s ease-in both !important; -moz-animation: flip-x-50 0.5s ease-in both !important; -ms-animation: flip-x-50 0.5s ease-in both !important; -o-animation: flip-x-50 0.5s ease-in both !important; margin-right: auto; margin-left: auto; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; /* Prevent Webkit text rendering */ -webkit-transform: translateZ(0px); /* Prevent Webkit text rendering */ -webkit-transform-style: preserve-3d; } @-webkit-keyframes flip-x-50 { 0% { -webkit-transform: perspective(0px)rotateX(90deg); opacity: 0; } 10% { opacity: 0; } 100% { -webkit-transform: perspective(0px) rotateX(0deg); opacity: 1; } } @keyframes flip-x-50 { 0% { opacity: 0; transform: perspective(100px) rotateX(90deg) rotateY(0deg); } 10% { opacity: 0; } 100% { opacity: 1; transform: perspective(100px) rotateX(0deg) rotateY(0deg); } } @-ms-keyframes flip-x-50 {/* IE9 does not support CSS animation. */ 0% { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; opacity: 0; transform: perspective(100px) rotateX(90deg) rotateY(0deg); } 20% { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; opacity: 0; } 100% { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; opacity: 1; transform: perspective(100px) rotateX(0deg) rotateY(0deg); } } @-o-keyframes flip-x-50 { /* Opera 12.x can't support CSS 3D Transforms */ 0% {opacity: 0; } 30% { opacity: 0; } 100% { opacity: 1;} } /* ------END ------- */ /* @end */ /* @group TRANSFORM SLIDE */ /* ------ SLIDE UP ------- */ .fa-slide-up { display: inline-block; vertical-align: baseline; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; -webkit-animation: slide-up 1.6s ease-out both !important; -moz-animation: slide-up 1.6s ease-out both !important; -o-animation: slide-up 1.6s ease-out both !important; animation: slide-up 1.6s ease-out both !important; -webkit-animation-delay: 0.35s; animation-delay: 0.35s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @keyframes slide-up { 0%{ opacity:0; transform: translateY(-50px); -moz-transform: translateY(-50px); -webkit-transform: translateY(-50px); -o-transform: translateY(-50px); -ms-transform: translateY(-50px); } 45%{ transform: translateY(-50px); -moz-transform: translateY(-50px); -webkit-transform: translateY(-50px); -o-transform: translateY(-50px); -ms-transform: translateY(-50px); } 75%{ opacity:0; } 100%{ opacity:1; transform: translateY(0px); -moz-transform: translateY(0px); -webkit-transform: translateY(0px); -o-transform: translateY(0px); -ms-transform: translateY(0px); } } @-webkit-keyframes slide-up { 0%{ opacity:0; -webkit-transform: translateY(-50px); } 45%{ -webkit-transform: translateY(-50px); } 75%{ opacity:0; } 100%{ opacity:1; -webkit-transform: translateY(0px); } } /* ------ SLIDE DOWN ------- */ .fa-slide-down { display: inline-block; vertical-align: baseline; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; -webkit-animation: slide-down 1.6s ease-out both !important; -moz-animation: slide-down 1.6s ease-out both !important; -o-animation: slide-down 1.6s ease-out both !important; animation: slide-down 1.6s ease-out both !important; -webkit-animation-delay: 0.35s; animation-delay: 0.35s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @keyframes slide-down { 0%{ opacity:0; transform: translateY(50px); -moz-transform: translateY(50px); -webkit-transform: translateY(50px); -o-transform: translateY(50px); -ms-transform: translateY(50px); } 45%{ transform: translateY(50px); -moz-transform: translateY(50px); -webkit-transform: translateY(50px); -o-transform: translateY(50px); -ms-transform: translateY(50px); } 75%{ opacity:0; } 100%{ opacity:1; transform: translateY(0px); -moz-transform: translateY(0px); -webkit-transform: translateY(0px); -o-transform: translateY(0px); -ms-transform: translateY(0px); } } @-webkit-keyframes slide-down { 0%{ opacity:0; -webkit-transform: translateY(50px); } 45%{ -webkit-transform: translateY(50px); } 75%{ opacity:0; } 100%{ opacity:1; -webkit-transform: translateY(0px); } } /* ------ SLIDE LEFT ------- */ .fa-slide-left { display: inline-block; vertical-align: baseline; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; -webkit-animation: slide-left 1.6s ease-out both !important; -moz-animation: slide-left 1.6s ease-out both !important; -o-animation: slide-left 1.6s ease-out both !important; animation: slide-left 1.6s ease-out both !important; -webkit-animation-delay: 0.35s; animation-delay: 0.35s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @keyframes slide-left { 0%{ opacity:0; transform: translateX(-50px); -moz-transform: translateX(-50px); -webkit-transform: translateX(-50px); -o-transform: translateX(-50px); -ms-transform: translateX(-50px); } 45%{ transform: translateX(-50px); -moz-transform: translateX(-50px); -webkit-transform: translateX(-50px); -o-transform: translateX(-50px); -ms-transform: translateX(-50px); } 75%{ opacity:0; } 100%{ opacity:1; transform: translateX(0px); -moz-transform: translateX(0px); -webkit-transform: translateX(0px); -o-transform: translateX(0px); -ms-transform: translateX(0px); } } @-webkit-keyframes slide-left { 0%{ opacity:0; -webkit-transform: translateX(-50px); } 45%{ -webkit-transform: translateX(-50px); } 75%{ opacity:0; } 100%{ opacity:1; -webkit-transform: translateX(0px); } } /* ------ SLIDE RIGHT ------- */ .fa-slide-right { display: inline-block; vertical-align: baseline; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; -webkit-animation: slide-right 1.6s ease-out both !important; -moz-animation: slide-right 1.6s ease-out both !important; -o-animation: slide-right 1.6s ease-out both !important; animation: slide-right 1.6s ease-out both !important; -webkit-animation-delay: 0.35s; animation-delay: 0.35s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @keyframes slide-right { 0%{ opacity:0; transform: translateX(50px); -moz-transform: translateX(50px); -webkit-transform: translateX(50px); -o-transform: translateX(50px); -ms-transform: translateX(50px); } 45%{ transform: translateX(50px); -moz-transform: translateX(50px); -webkit-transform: translateX(50px); -o-transform: translateX(50px); -ms-transform: translateX(50px); } 75%{ opacity:0; } 100%{ opacity:1; transform: translateX(0px); -moz-transform: translateX(0px); -webkit-transform: translateX(0px); -o-transform: translateX(0px); -ms-transform: translateX(0px); } } @-webkit-keyframes slide-right { 0%{ opacity:0; -webkit-transform: translateX(50px); } 45%{ -webkit-transform: translateX(50px); } 75%{ opacity:0; } 100%{ opacity:1; -webkit-transform: translateX(0px); } } /* @end */ /* @group TRANSFORM FADE IN */ /* ------ fade-250 ------- */ .fa-fade-250 { -webkit-animation: fade-250 2.5s ease-in both !important; -moz-animation: fade-250 2.5s ease-in both !important; -ms-animation: fade-250 2.5s ease-in both !important; -o-animation: fade-250 2.5s ease-in both !important; animation: fade-250 2.5s ease-in both !important; } @-moz-keyframes fade-250 { 0% { opacity: 0; } 35% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes fade-250 { 0% { opacity: 0; } 35% { opacity: 0; } 100% { opacity: 1; } } @-o-keyframes fade-250 { 0% { opacity: 0; } 35% { opacity: 0; } 100% { opacity: 1; } } @-ms-keyframes fade-250 {/* IE9 does not support CSS animation. */ 0% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } 35% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } 100% { opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); } } @keyframes fade-250 { 0% { opacity: 0; } 35% { opacity: 0; } 100% { opacity: 1; } } /* ---- end ----- */ /* ------ fade-200 ------- */ .fa-fade-200 { -webkit-animation: fade-200 2s ease-in both !important; -moz-animation: fade-200 2s ease-in both !important; -ms-animation: fade-200 2s ease-in both !important; -o-animation: fade-200 2s ease-in both !important; animation: fade-200 2s ease-in both !important; } @-moz-keyframes fade-200 { 0% { opacity: 0; } 35% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes fade-200 { 0% { opacity: 0; } 35% { opacity: 0; } 100% { opacity: 1; } } @-o-keyframes fade-200 { 0% { opacity: 0; } 35% { opacity: 0; } 100% { opacity: 1; } } @-ms-keyframes fade-200 {/* IE9 does not support CSS animation. */ 0% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } 35% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } 100% { opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); } } @keyframes fade-200 { 0% { opacity: 0; } 35% { opacity: 0; } 100% { opacity: 1; } } /* ---- end ----- */ /* ------ FADE-IN 1.5 SEC ------- */ /* ------ fade-150 ------- */ .fa-fade-150 { -webkit-animation: fade-150 1.5s ease-in both !important; -moz-animation: fade-150 1.5s ease-in both !important; -ms-animation: fade-150 1.5s ease-in both !important; -o-animation: fade-150 1.5s ease-in both !important; animation: fade-150 1.5s ease-in both !important; } @-moz-keyframes fade-150 { 0% { opacity: 0; } 35% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes fade-150 { 0% { opacity: 0; } 35% { opacity: 0; } 100% { opacity: 1; } } @-o-keyframes fade-150 { 0% { opacity: 0; } 35% { opacity: 0; } 100% { opacity: 1; } } @-ms-keyframes fade-150 {/* IE9 does not support CSS animation. */ 0% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } 35% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } 100% { opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); } } @keyframes fade-150 { 0% { opacity: 0; } 35% { opacity: 0; } 100% { opacity: 1; } } /* ---- end ----- */ /* ------ FADE-IN 1 SEC ------- */ /* ------ fade-100 ------- */ .fa-fade-100 { -webkit-animation: fade-100 1s ease-in both !important; -moz-animation: fade-100 1s ease-in both !important; -ms-animation: fade-100 1s ease-in both !important; -o-animation: fade-100 1s ease-in both !important; animation: fade-100 1s ease-in both !important; } @-moz-keyframes fade-100 { 0% { opacity: 0; } 35% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes fade-100 { 0% { opacity: 0; } 35% { opacity: 0; } 100% { opacity: 1; } } @-o-keyframes fade-100 { 0% { opacity: 0; } 35% { opacity: 0; } 100% { opacity: 1; } } @-ms-keyframes fade-100 {/* IE9 does not support CSS animation. */ 0% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } 35% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } 100% { opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); } } @keyframes fade-100 { 0% { opacity: 0; } 35% { opacity: 0; } 100% { opacity: 1; } } /* ---- end ----- */ /* ------ FADE-IN 0.75 SEC ------- */ /* ------ fade-75 ------- */ .fa-fade-75 { -webkit-animation: fade-75 0.75s ease-in both !important; -moz-animation: fade-75 0.75s ease-in both !important; -ms-animation: fade-75 0.75s ease-in both !important; -o-animation: fade-75 0.75s ease-in both !important; animation: fade-75 0.75s ease-in both !important; } @-moz-keyframes fade-75 { 0% { opacity: 0; } 35% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes fade-75 { 0% { opacity: 0; } 35% { opacity: 0; } 100% { opacity: 1; } } @-o-keyframes fade-75 { 0% { opacity: 0; } 35% { opacity: 0; } 100% { opacity: 1; } } @-ms-keyframes fade-75 {/* IE9 does not support CSS animation. */ 0% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } 35% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } 100% { opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); } } @keyframes fade-75 { 0% { opacity: 0; } 35% { opacity: 0; } 100% { opacity: 1; } } /* ---- end ----- */ /* ------ FADE-IN 0.5 SEC ------- */ /* ------ fade-50 ------- */ .fa-fade-50 { -webkit-animation: fade-50 0.50s ease-in both !important; -moz-animation: fade-50 0.50s ease-in both !important; -ms-animation: fade-50 0.50s ease-in both !important; -o-animation: fade-50 0.50s ease-in both !important; animation: fade-50 0.50s ease-in both !important; } @-moz-keyframes fade-50 { 0% { opacity: 0; } 35% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes fade-50 { 0% { opacity: 0; } 35% { opacity: 0; } 100% { opacity: 1; } } @-o-keyframes fade-50 { 0% { opacity: 0; } 35% { opacity: 0; } 100% { opacity: 1; } } @-ms-keyframes fade-50 {/* IE9 does not support CSS animation. */ 0% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } 35% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } 100% { opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); } } @keyframes fade-50 { 0% { opacity: 0; } 35% { opacity: 0; } 100% { opacity: 1; } } /* ---- end ----- */ /* @end */ /* @group TRANSFORM BEAT */ /* ------ beat ------- */ .fa-beat { display: inline-block; vertical-align: baseline; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; -webkit-animation: beat 1.6s linear both !important; -moz-animation: beat 1.6s linear both !important; -ms-animation: beat 1.6s linear both !important; -o-animation: beat 1.65 linear both !important; animation: beat 1.6s linear both !important; /* Prevent Webkit text rendering */ -webkit-transform: translateZ(0px); /* Prevent Webkit text rendering */ -webkit-transform-style: preserve-3d; padding: 1px; overflow: visible; } @keyframes beat { 0% { transform: scale(1); } 62% { transform: scale(1); } 77% { transform: scale(0.8); } 100% { transform: scale(1); } } @-webkit-keyframes beat { 0% { -webkit-transform: scale(1); } 62% { -webkit-transform: scale(1); } 77% { -webkit-transform: scale(0.8); } 100% { -webkit-transform: scale(1); } } @-moz-keyframes beat { 0% { transform: scale(1); -moz-transform: scale(1); } 62% { transform: scale(1); -moz-transform: scale(1); } 77% { transform: scale(0.9); -moz-transform: scale(0.8); } 100% { transform: scale(1); -moz-transform: scale(1); } } @-o-keyframes beat { 0% { transform: scale(1); -o-transform: scale(1); } 62% { transform: scale(1); -o-transform: scale(1); } 77% { transform: scale(0.8); -o-transform: scale(0.8); } 100% { transform: scale(1); -o-transform: scale(1); } } @-ms-keyframes beat {/* IE9 does not support CSS animation. */ 0% { transform: scale(1); -ms-transform: scale(1); } 62% { transform: scale(1); -ms-transform: scale(1); } 77% { transform: scale(0.8); -ms-transform: scale(0.8); } 100% { transform: scale(1); -ms-transform: scale(1); } } /* ------ icon - beat ------- */ /* ---- end ----- */ /* @end */ /* @group TRANSFORM SCALE */ /* ------ icon - zoom ------- */ .fa-scale{ display: inline-block; vertical-align: baseline; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; -webkit-animation: scale 1.4s ease-out both !important; -moz-animation: scale 1.4s ease-out both !important; -ms-animation: scale 1.4s ease-out both !important; -o-animation: scale 1.4s ease-out both !important; animation: scale 1.4s ease-out both !important; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); /* Prevent Webkit text rendering */ -webkit-transform: translateZ(0px); /* Prevent Webkit text rendering */ -webkit-transform-style: preserve-3d; padding: 1px; overflow: visible; } @keyframes scale { 0% { transform: scale(0); opacity: 0; } 30% { transform: scale(0); } 50% { opacity: 0; } 100% { transform: scale(1); opacity: 1; } } @-webkit-keyframes scale { 0% { -webkit-transform: scale(0); opacity: 0; } 30% { -webkit-transform: scale(0); } 50% { opacity: 0; } 100% { -webkit-transform: scale(1); opacity: 1; } } @-moz-keyframes scale { 0% { transform: scale(0); -moz-transform: scale(0); opacity: 0; } 30% { transform: scale(0); -moz-transform: scale(0); } 50% { opacity: 0; } 100% { transform: scale(1); -moz-transform: scale(1); opacity: 1; } } @-o-keyframes scale { 0% { transform: scale(0); -o-transform: scale(0); opacity: 0; } 30% { transform: scale(0); -o-transform: scale(0); } 50% { opacity: 0; } 100% { transform: scale(1); -o-transform: scale(1); opacity: 1; } } @-ms-keyframes scale {/* IE9 does not support CSS animation. */ 0% { transform: scale(0); -ms-transform: scale(0); opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } 30% { transform: scale(0); -ms-transform: scale(0); } 50% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } 100% { transform: scale(1); -ms-transform: scale(1); opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); } } /* ---- end ----- */ .fa-scale-inverse { display: inline-block; vertical-align: baseline; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; -webkit-animation: scale-inverse 1.4s ease-out both !important; -moz-animation: scale-inverse 1.4s ease-out both !important; -ms-animation: scale-inverse 1.4s ease-out both !important; -o-animation: scale-inverse 2.4s ease-out both !important; animation: scale-inverse 1.4s ease-out both !important; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); /* Prevent Webkit text rendering */ -webkit-transform: translateZ(0px); /* Prevent Webkit text rendering */ -webkit-transform-style: preserve-3d; padding: 1px; overflow: visible; } @keyframes scale-inverse { 0% { transform: scale(1.3); opacity: 0; } 30% { transform: scale(1.3); } 50% { opacity: 0; } 100% { transform: scale(1); opacity: 1; } } @-webkit-keyframes scale-inverse { 0% { -webkit-transform: scale(1.3); opacity: 0; } 30% { opacity: 0; -webkit-transform: scale (1.3); } 50% { } 100% { -webkit-transform: scale (1); opacity: 1; } } @-moz-keyframes scale-inverse { 0% { transform: scale(1.3); -moz-transform: scale (1.3); opacity: 0; } 30% { transform: scale(1.3); -moz-transform: scale (1.3); } 50% { opacity: 0; } 100% { transform: scale(1); -moz-transform: scale (1); opacity: 1; } } @-o-keyframes scale-inverse { 0% { transform: scale(1.3); -o-transform: scale (1.3); opacity: 0; } 30% { transform: scale(1.3); -o-transform: scale (1.3); } 50% { opacity: 0; } 100% { transform: scale(1); -o-transform: scale (1); opacity: 1; } } @-ms-keyframes scale-inverse {/* IE9 does not support CSS animation. */ 0% { transform: scale (1.3); -ms-transform: scale (1.3); opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } 30% { transform: scale (1.3); -ms-transform: scale (1.3); } 50% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } 100% { transform: scale (1); -ms-transform: scale(1); opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); } } /* @end */ /* @group TRANSFORM ROTATION */ /* ------ ROTATION ------- */ /* ------ SPIN ROTATE 360 ------- */ .fa-spin-360 { display: inline-block; vertical-align: baseline; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; -webkit-animation: spin-360 1.9s ease-out both !important; -moz-animation: spin-360 1.9s ease-out both !important; -o-animation: spin-360 1.9s ease-out both !important; animation: spin-360 1.9s ease-out both !important; /* Prevent Webkit text rendering */ -webkit-transform: translateZ(0px); /* Prevent Webkit text rendering */ -webkit-transform-style: preserve-3d; padding: 1px; overflow: visible; } @-moz-keyframes spin-360 { 0% { -moz-transform: rotate(359deg); } 100% { -moz-transform: rotate(0deg); } } @-webkit-keyframes spin-360 { 0% { -webkit-transform: rotate(359deg); } 100% { -webkit-transform: rotate(0deg); } } @-o-keyframes spin-360 { 0% { -o-transform: rotate(359deg); } 100% { -o-transform: rotate(0deg); } } @-ms-keyframes spin-360 {/* IE9 does not support CSS animation. */ 0% { -ms-transform: rotate(359deg); } 100% { -ms-transform: rotate(0deg); } } @keyframes spin-360 { 0% { transform: rotate(359deg); } 100% { transform: rotate(0deg); } } /* ---- end ----- */ /* ------ SPIN ROTATE 180 ------- */ .fa-spin-180 { display: inline-block; vertical-align: baseline; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; -webkit-animation: spin-180 1.9s ease-out both !important; -moz-animation: spin-180 1.9s ease-out both !important; -o-animation: spin-180 1.9s ease-out both !important; animation: spin-180 1.9s ease-out both !important; /* Prevent Webkit text rendering */ -webkit-transform: translateZ(0px); /* Prevent Webkit text rendering */ -webkit-transform-style: preserve-3d; padding: 1px; overflow: visible; } @-moz-keyframes spin-180 { 0% { -moz-transform: rotate(180deg); } 100% { -moz-transform: rotate(0deg); } } @-webkit-keyframes spin-180 { 0% { -webkit-transform: rotate(180deg); } 100% { -webkit-transform: rotate(0deg); } } @-o-keyframes spin-180 { 0% { -o-transform: rotate(180deg); } 100% { -o-transform: rotate(0deg); } } @-ms-keyframes spin-180 {/* IE9 does not support CSS animation. */ 0% { -ms-transform: rotate(180deg); } 100% { -ms-transform: rotate(0deg); } } @keyframes spin-180 { 0% { transform: rotate(180deg); } 100% { transform: rotate(0deg); } } /* ---- end ----- */ /* ------ SPIN ROTATE 90 ------- */ .fa-spin-90 { display: inline-block; vertical-align: baseline; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; -webkit-animation: spin-90 1.9s ease-out both !important; -moz-animation: spin-90 1.9s ease-out both !important; -o-animation: spin-90 1.9s ease-out both !important; animation: spin-90 1.9s ease-out both !important; /* Prevent Webkit text rendering */ -webkit-transform: translateZ(0px); /* Prevent Webkit text rendering */ -webkit-transform-style: preserve-3d; padding: 1px; overflow: visible; } @-moz-keyframes spin-90 { 0% { -moz-transform: rotate(90deg); } 100% { -moz-transform: rotate(0deg); } } @-webkit-keyframes spin-90 { 0% { -webkit-transform: rotate(90deg); } 100% { -webkit-transform: rotate(0deg); } } @-o-keyframes spin-90 { 0% { -o-transform: rotate(90deg); } 100% { -o-transform: rotate(0deg); } } @-ms-keyframes spin-90 {/* IE9 does not support CSS animation. */ 0% { -ms-transform: rotate(90deg); } 100% { -ms-transform: rotate(0deg); } } @keyframes spin-90 { 0% { transform: rotate(90deg); } 100% { transform: rotate(0deg); } } /* ---- end ----- */ /* ------ SPIN ROTATE 80 ------- */ .fa-spin-80 { display: inline-block; vertical-align: baseline; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; -webkit-animation: spin-80 1.9s ease-out both !important; -moz-animation: spin-80 1.9s ease-out both !important; -o-animation: spin-80 1.9s ease-out both !important; animation: spin-80 1.9s ease-out both !important; /* Prevent Webkit text rendering */ -webkit-transform: translateZ(0px); /* Prevent Webkit text rendering */ -webkit-transform-style: preserve-3d; padding: 1px; overflow: visible; } @-moz-keyframes spin-80 { 0% { -moz-transform: rotate(80deg); } 100% { -moz-transform: rotate(0deg); } } @-webkit-keyframes spin-80 { 0% { -webkit-transform: rotate(80deg); } 100% { -webkit-transform: rotate(0deg); } } @-o-keyframes spin-80 { 0% { -o-transform: rotate(80deg); } 100% { -o-transform: rotate(0deg); } } @-ms-keyframes spin-80 {/* IE9 does not support CSS animation. */ 0% { -ms-transform: rotate(80deg); } 100% { -ms-transform: rotate(0deg); } } @keyframes spin-80 { 0% { transform: rotate(80deg); } 100% { transform: rotate(0deg); } } /* ---- end ----- */ /* ------ SPIN ROTATE 70 ------- */ .fa-spin-70 { display: inline-block; vertical-align: baseline; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; -webkit-animation: spin-70 1.9s ease-out both !important; -moz-animation: spin-70 1.9s ease-out both !important; -o-animation: spin-70 1.9s ease-out both !important; animation: spin-70 1.9s ease-out both !important; /* Prevent Webkit text rendering */ -webkit-transform: translateZ(0px); /* Prevent Webkit text rendering */ -webkit-transform-style: preserve-3d; padding: 1px; overflow: visible; } @-moz-keyframes spin-70 { 0% { -moz-transform: rotate(70deg); } 100% { -moz-transform: rotate(0deg); } } @-webkit-keyframes spin-70 { 0% { -webkit-transform: rotate(70deg); } 100% { -webkit-transform: rotate(0deg); } } @-o-keyframes spin-70 { 0% { -o-transform: rotate(70deg); } 100% { -o-transform: rotate(0deg); } } @-ms-keyframes spin-70 {/* IE9 does not support CSS animation. */ 0% { -ms-transform: rotate(70deg); } 100% { -ms-transform: rotate(0deg); } } @keyframes spin-70 { 0% { transform: rotate(70deg); } 100% { transform: rotate(0deg); } } /* ---- end ----- */ /* ------ SPIN ROTATE 60 ------- */ .fa-spin-60 { display: inline-block; vertical-align: baseline; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; -webkit-animation: spin-60 1.9s ease-out both !important; -moz-animation: spin-60 1.9s ease-out both !important; -o-animation: spin-60 1.9s ease-out both !important; animation: spin-60 1.9s ease-out both !important; /* Prevent Webkit text rendering */ -webkit-transform: translateZ(0px); /* Prevent Webkit text rendering */ -webkit-transform-style: preserve-3d; padding: 1px; overflow: visible; } @-moz-keyframes spin-60 { 0% { -moz-transform: rotate(60deg); } 100% { -moz-transform: rotate(0deg); } } @-webkit-keyframes spin-60 { 0% { -webkit-transform: rotate(60deg); } 100% { -webkit-transform: rotate(0deg); } } @-o-keyframes spin-60 { 0% { -o-transform: rotate(60deg); } 100% { -o-transform: rotate(0deg); } } @-ms-keyframes spin-60 {/* IE9 does not support CSS animation. */ 0% { -ms-transform: rotate(60deg); } 100% { -ms-transform: rotate(0deg); } } @keyframes spin-60 { 0% { transform: rotate(60deg); } 100% { transform: rotate(0deg); } } /* ---- end ----- */ /* ------ SPIN ROTATE 50 ------- */ .fa-spin-50 { display: inline-block; vertical-align: baseline; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; -webkit-animation: spin-50 1.9s ease-out both !important; -moz-animation: spin-50 1.9s ease-out both !important; -o-animation: spin-50 1.9s ease-out both !important; animation: spin-50 1.9s ease-out both !important; /* Prevent Webkit text rendering */ -webkit-transform: translateZ(0px); /* Prevent Webkit text rendering */ -webkit-transform-style: preserve-3d; padding: 1px; overflow: visible; } @-moz-keyframes spin-50 { 0% { -moz-transform: rotate(50deg); } 100% { -moz-transform: rotate(0deg); } } @-webkit-keyframes spin-50 { 0% { -webkit-transform: rotate(50deg); } 100% { -webkit-transform: rotate(0deg); } } @-o-keyframes spin-50 { 0% { -o-transform: rotate(50deg); } 100% { -o-transform: rotate(0deg); } } @-ms-keyframes spin-50 {/* IE9 does not support CSS animation. */ 0% { -ms-transform: rotate(50deg); } 100% { -ms-transform: rotate(0deg); } } @keyframes spin-50 { 0% { transform: rotate(50deg); } 100% { transform: rotate(0deg); } } /* ---- end ----- */ /* ------ SPIN ROTATE 45 ------- */ .fa-spin-45 { display: inline-block; vertical-align: baseline; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; -webkit-animation: spin-45 1.9s ease-out both !important; -moz-animation: spin-45 1.9s ease-out both !important; -o-animation: spin-45 1.9s ease-out both !important; animation: spin-45 1.9s ease-out both !important; /* Prevent Webkit text rendering */ -webkit-transform: translateZ(0px); /* Prevent Webkit text rendering */ -webkit-transform-style: preserve-3d; padding: 1px; overflow: visible; } @-moz-keyframes spin-45 { 0% { -moz-transform: rotate(45deg); } 100% { -moz-transform: rotate(0deg); } } @-webkit-keyframes spin-45 { 0% { -webkit-transform: rotate(45deg); } 100% { -webkit-transform: rotate(0deg); } } @-o-keyframes spin-45 { 0% { -o-transform: rotate(45deg); } 100% { -o-transform: rotate(0deg); } } @-ms-keyframes spin-45 {/* IE9 does not support CSS animation. */ 0% { -ms-transform: rotate(45deg); } 100% { -ms-transform: rotate(0deg); } } @keyframes spin-45 { 0% { transform: rotate(45deg); } 100% { transform: rotate(0deg); } } /* ---- end ----- */ /* ------ SPIN ROTATE 40 ------- */ .fa-spin-40 { display: inline-block; vertical-align: baseline; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; -webkit-animation: spin-40 1.9s ease-out both !important; -moz-animation: spin-40 1.9s ease-out both !important; -o-animation: spin-40 1.9s ease-out both !important; animation: spin-40 1.9s ease-out both !important; /* Prevent Webkit text rendering */ -webkit-transform: translateZ(0px); /* Prevent Webkit text rendering */ -webkit-transform-style: preserve-3d; padding: 1px; overflow: visible; } @-moz-keyframes spin-40 { 0% { -moz-transform: rotate(40deg); } 100% { -moz-transform: rotate(0deg); } } @-webkit-keyframes spin-40 { 0% { -webkit-transform: rotate(40deg); } 100% { -webkit-transform: rotate(0deg); } } @-o-keyframes spin-40 { 0% { -o-transform: rotate(40deg); } 100% { -o-transform: rotate(0deg); } } @-ms-keyframes spin-40 {/* IE9 does not support CSS animation. */ 0% { -ms-transform: rotate(40deg); } 100% { -ms-transform: rotate(0deg); } } @keyframes spin-40 { 0% { transform: rotate(40deg); } 100% { transform: rotate(0deg); } } /* ---- end ----- */ /* ------ SPIN ROTATE 30 ------- */ .fa-spin-30 { display: inline-block; vertical-align: baseline; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; -webkit-animation: spin-30 1.9s ease-out both !important; -moz-animation: spin-30 1.9s ease-out both !important; -o-animation: spin-30 1.9s ease-out both !important; animation: spin-30 1.9s ease-out both !important; /* Prevent Webkit text rendering */ -webkit-transform: translateZ(0px); /* Prevent Webkit text rendering */ -webkit-transform-style: preserve-3d; padding: 1px; overflow: visible; } @-moz-keyframes spin-30 { 0% { -moz-transform: rotate(30deg); } 100% { -moz-transform: rotate(0deg); } } @-webkit-keyframes spin-30 { 0% { -webkit-transform: rotate(30deg); } 100% { -webkit-transform: rotate(0deg); } } @-o-keyframes spin-30 { 0% { -o-transform: rotate(30deg); } 100% { -o-transform: rotate(0deg); } } @-ms-keyframes spin-30 {/* IE9 does not support CSS animation. */ 0% { -ms-transform: rotate(30deg); } 100% { -ms-transform: rotate(0deg); } } @keyframes spin-30 { 0% { transform: rotate(30deg); } 100% { transform: rotate(0deg); } } /* ---- end ----- */ /* ------ SPIN ROTATE 20 ------- */ .fa-spin-20 { display: inline-block; vertical-align: baseline; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; -webkit-animation: spin-20 1.9s ease-out both !important; -moz-animation: spin-20 1.9s ease-out both !important; -o-animation: spin-20 1.9s ease-out both !important; animation: spin-20 1.9s ease-out both !important; /* Prevent Webkit text rendering */ -webkit-transform: translateZ(0px); /* Prevent Webkit text rendering */ -webkit-transform-style: preserve-3d; padding: 1px; overflow: visible; } @-moz-keyframes spin-20 { 0% { -moz-transform: rotate(20deg); } 100% { -moz-transform: rotate(0deg); } } @-webkit-keyframes spin-20 { 0% { -webkit-transform: rotate(20deg); } 100% { -webkit-transform: rotate(0deg); } } @-o-keyframes spin-20 { 0% { -o-transform: rotate(20deg); } 100% { -o-transform: rotate(0deg); } } @-ms-keyframes spin-20 {/* IE9 does not support CSS animation. */ 0% { -ms-transform: rotate(20deg); } 100% { -ms-transform: rotate(0deg); } } @keyframes spin-20 { 0% { transform: rotate(20deg); } 100% { transform: rotate(0deg); } } /* ---- end ----- */ /* @end */ /* @group TRANSFORM ROCK */ /* ------ ROCK ------- */ .fa-rock { display: inline-block; vertical-align: baseline; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; -webkit-animation: rock 1.7s ease-in-out both !important; -moz-animation: rock 1.7s ease-in-out both !important; -o-animation: rock 1.7s ease-in-out both !important; animation: rock 1.7s ease-in-out both !important; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; /* Prevent Webkit text rendering */ -webkit-transform: translateZ(0px); /* Prevent Webkit text rendering */ -webkit-transform-style: preserve-3d; overflow: visible; padding: 1px; } @-moz-keyframes rock { 0% { opacity: 0; -moz-transform: rotate(-30deg); } 51% {opacity: 0; -moz-transform: rotate(-30deg); } 70% {opacity: 1; -moz-transform: rotate(8deg); } 100% { -moz-transform: rotate(0deg); } } @-webkit-keyframes rock { 0% {opacity: 0; -webkit-transform: rotate(-30deg); } 51% {opacity: 0; -webkit-transform:rotate(-30deg); } 70% {opacity: 1; -webkit-transform: rotate(8deg); } 100% { -webkit-transform: rotate(0deg); } } @-o-keyframes rock { 0% {opacity: 0; -o-transform: rotate(-30deg); } 51% {opacity: 0; -o-transform: rotate(-30deg); } 70% {opacity: 1; -o-transform: rotate(8deg); } 100% { -o-transform: rotate(0deg); } } @-ms-keyframes rock {/* IE9 does not support CSS animation. */ 0% {opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -ms-transform: rotate(-30deg); } 51% {opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -moz-transform: rotate(-30deg); } 70% {opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; -ms-transform: rotate(8deg); } 100% { -ms-transform: rotate(0deg); } } @keyframes rock { 0% {opacity: 0; transform: rotate(-30deg); } 51% {opacity: 1; transform:rotate(-30deg); } 70% { transform: rotate(8deg); } 100% { transform: rotate(0deg); } } /* ---- end ----- */ /* @end */ /* @group TRANSFORM DANGLES */ /* ------ dangles ------- */ .fa-dangles { display: inline-block; vertical-align: baseline; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; -webkit-animation: dangles 1.3s ease-out both !important; -moz-animation: dangles 1.3s ease-out both !important; -o-animation: dangles 1.3s ease-out both !important; animation: dangles 1.3s ease-out both !important; overflow: visible; } @-moz-keyframes dangles { 0% { -moz-transform: rotate(-61deg);} 25% { -moz-transform: rotate(20deg);} 50% { -moz-transform: rotate(-21deg);} 75% { -moz-transform: rotate(13deg);} 100% { -moz-transform: rotate(0deg);} } @-webkit-keyframes dangles { 0% { -webkit-transform: rotate(-61deg);} 25% { -webkit-transform: rotate(20deg);} 50% { -webkit-transform: rotate(-21deg);} 75% { -webkit-transform: rotate(13deg);} 100% { -webkit-transform: rotate(0deg);} } @-o-keyframes dangles { 0% { -o-transform: rotate(-61deg);} 25% { -o-transform: rotate(20deg);} 50% { -o-transform: rotate(-21deg);} 75% { -o-transform: rotate(13deg);} 100% { -o-transform: rotate(0deg);} } @-ms-keyframes dangles {/* IE9 does not support CSS animation. */ 0% { -ms-transform: rotate(-61deg);} 25% { -ms-transform: rotate(20deg);} 50% { -ms-transform: rotate(-21deg);} 75% { -ms-transform: rotate(13deg);} 100% { -ms-transform: rotate(0deg);} } @keyframes dangles { 0% { transform: rotate(-61deg);} 25% { transform: rotate(20deg);} 50% { transform: rotate(-21deg);} 75% { transform: rotate(13deg);} 100% { transform: rotate(0deg);} } /* ---- end ----- */ /* @end */ /* @group TRANSFORM PULSE */ /* ------ pulse ------- */ .fa-pulse { display: inline-block; vertical-align: baseline; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; -webkit-animation: pulse 2.2s ease-in-out both !important; -moz-animation: pulse 2.2s ease-in-out both !important; -o-animation: pulse 2.2s ease-in-out both !important; animation: pulse 2.2s ease-in-out both !important; } @keyframes pulse { 0% { opacity: 1;} 39% {opacity: 1;} 50% {opacity: 0.3;} 72% {opacity: 1;} 87% {opacity: 0.3;} 100% {opacity: 1;} } @-webkit-keyframes pulse { 0% { opacity: 1;} 39% {opacity: 1;} 50% {opacity: 0.3;} 72% {opacity: 1;} 87% {opacity: 0.3;} 100% {opacity: 1;} } @-moz-keyframes pulse { 0% { opacity: 1;} 39% {opacity: 1;} 50% {opacity: 0.3;} 72% {opacity: 1;} 87% {opacity: 0.3;} 100% {opacity: 1;} } @-o-keyframes pulse { 0% { opacity: 1;} 39% {opacity: 1;} 50% {opacity: 0.3;} 72% {opacity: 1;} 87% {opacity: 0.3;} 100% {opacity: 1;} } @-ms-keyframes pulse {/* IE9 does not support CSS animation. */ 0% { opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); } 39% { opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); } 50% { opacity: 0.3; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; filter: alpha(opacity=30); } 72% { opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); } 87% { opacity: 0.3; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; filter: alpha(opacity=30); } 100% { opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); } } /* ---- end ----- */ /* ------ pulse INFINITE------- */ .fa-pulse-loop { /* infinite lineart; */ display: inline-block; vertical-align: baseline; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; -webkit-animation: pulse-loop 2.9s linear; /* ------ don't add code to prevent issues in the linnkd with FA------- */ -moz-animation: pulse-loop 2.9s lineart; -o-animation: pulse-loop 2.9s lineart; animation: pulse-loop 2.9s lineart; /* -webkit-transform-style: preserve-3d; -webkit-animation-fill-mode: both; */ -webkit-animation-iteration-count: 3; -moz-animation-iteration-count: 3; -o-animation-iteration-count: 3; animation-iteration-count: 3; } @keyframes pulse-loop { 0% {opacity: 1;} 44% {opacity: 1; } 54% {opacity: 0.55;} 76% {opacity: 1;} 91% {opacity: 0.55;} 100% { opacity: 1;} } @-webkit-keyframes pulse-loop { 0% {opacity: 1;} 44% {opacity: 1; } 54% {opacity: 0.55;} 76% {opacity: 1;} 91% {opacity: 0.55;} 100% { opacity: 1;} } @-moz-keyframes pulse-loop { 0% {opacity: 1;} 44% {opacity: 1; } 54% {opacity: 0.55;} 76% {opacity: 1;} 91% {opacity: 0.55;} 100% { opacity: 1;} } @-o-keyframes pulse-loop { 0% {opacity: 1;} 44% {opacity: 1; } 54% {opacity: 0.55;} 76% {opacity: 1;} 91% {opacity: 0.55;} 100% { opacity: 1;} } @-ms-keyframes pulse-loop {/* IE9 does not support CSS animation. */ 0% { opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); } 44% { opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); } 54% { opacity: 0.55; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=55)"; filter: alpha(opacity=55); } 76% { opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); } 91% { opacity: 0.55; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=55)"; filter: alpha(opacity=55); } 100% { opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); } } #breack { } /* ------ pulse INFINITE------- */ /* @end */ /* @group MAX HEIGHT */ /* ------ MAX 300 PIXEL ------- */ .fa-max-300 {font-size: 300px !important; margin: 0; padding: 0; line-height: 1em; /*line-height: 1.14em;*/ } @media only screen and (max-width: 1030px) { /* 300 *//* iPad - kindle - Landscape */ /* 1 */ .fa-max-300 {font-size: 300px !important; }} @media only screen and (max-width: 800px) { /* 275 */ /* iPad - Portrait */ .fa-max-300 {font-size: 280px !important; }} @media only screen and (max-width: 750px) { /* 250 */ .fa-max-300 {font-size: 275px !important; }} @media only screen and (max-width: 700px) { /* 225 */ .fa-max-300 {font-size: 260px !important; }} @media only screen and (max-width: 650px) { /* 200 */ .fa-max-300 {font-size: 240px !important; }} @media only screen and (max-width: 600px) { /* 150 */ /* kindle - Portrait + iPhone 4 - Landscape*/ .fa-max-300 {font-size: 220px !important; }} @media only screen and (max-width: 566px) { /* 125 */ .fa-max-300 {font-size: 190px !important; }} @media only screen and (max-width: 533px) { /* 100 */ .fa-max-300 {font-size: 170px !important; }} @media only screen and (max-width: 500px) { /* 75 */ /* iPhone 4 - Landscape */ .fa-max-300 {font-size: 160px !important; }} @media only screen and (max-width: 400px) { /* 50 */ /* ------------------------------------------ */ .fa-max-300 {font-size: 130px !important; }} @media only screen and (max-width: 320px) { /* 50 */ /* iPhone - Portrait + small devices Android - Landscape */ .fa-max-300 {font-size: 120px !important; }} @media only screen and (max-width: 240px) { /* 50 */ /* small devices Android - Portrait */ .fa-max-300 {font-size: 75px !important; }} /* ------ MAX 275 PIXEL ------- */ .fa-max-275 {font-size: 275px !important; line-height: 1em; margin: 0; padding: 0; } @media only screen and (max-width: 1030px) { /* 300 *//* iPad - kindle - Landscape */ /* 1 */ .fa-max-275 {font-size: 275px !important; }} @media only screen and (max-width: 800px) { /* 275 */ /* iPad - Portrait */ .fa-max-275 {font-size: 275px !important; }} @media only screen and (max-width: 750px) { /* 250 */ .fa-max-275 {font-size: 260px !important; }} @media only screen and (max-width: 700px) { /* 225 */ .fa-max-275 {font-size: 250px !important; }} @media only screen and (max-width: 650px) { /* 200 */ .fa-max-275 {font-size: 235px !important; }} @media only screen and (max-width: 600px) { /* 150 */ /* kindle - Portrait + iPhone 4 - Landscape*/ .fa-max-275 {font-size: 200px !important; }} @media only screen and (max-width: 566px) { /* 125 */ .fa-max-275 {font-size: 170px !important; }} @media only screen and (max-width: 533px) { /* 100 */ .fa-max-275 {font-size: 150px !important; }} @media only screen and (max-width: 500px) { /* 75 */ /* iPhone 4 - Landscape */ .fa-max-275 {font-size: 140px !important; }} @media only screen and (max-width: 400px) { /* 50 */ /* ------------------------------------------ */ .fa-max-275 {font-size: 125px !important; }} @media only screen and (max-width: 320px) { /* 50 */ /* iPhone - Portrait + small devices Android - Landscape */ .fa-max-275 {font-size: 110px !important; }} @media only screen and (max-width: 240px) { /* 50 */ /* small devices Android - Portrait */ .fa-max-275 {font-size: 70px !important; }} /* ------ MAX 250 PIXEL ------- */ .fa-max-250 {font-size: 250px !important; line-height: 1em; margin: 0; padding: 0; } @media only screen and (max-width: 1030px) { /* 300 *//* iPad - kindle - Landscape */ /* 1 */ .fa-max-250 {font-size: 250px !important; }} @media only screen and (max-width: 800px) { /* 275 */ /* iPad - Portrait */ .fa-max-250 {font-size: 250px !important; }} @media only screen and (max-width: 750px) { /* 250 */ .fa-max-250 {font-size: 235px !important; }} @media only screen and (max-width: 700px) { /* 225 */ .fa-max-250 {font-size: 225px !important; }} @media only screen and (max-width: 650px) { /* 200 */ .fa-max-250 {font-size: 200px !important; }} @media only screen and (max-width: 600px) { /* 150 */ /* kindle - Portrait + iPhone 4 - Landscape*/ .fa-max-250 {font-size: 180px !important; }} @media only screen and (max-width: 566px) { /* 125 */ .fa-max-250 {font-size: 160px !important; }} @media only screen and (max-width: 533px) { /* 100 */ .fa-max-250 {font-size: 140px !important; }} @media only screen and (max-width: 500px) { /* 75 */ /* iPhone 4 - Landscape */ .fa-max-250 {font-size: 130px !important; }} @media only screen and (max-width: 400px) { /* 50 */ /* ------------------------------------------ */ .fa-max-250 {font-size: 110px !important; }} @media only screen and (max-width: 320px) { /* 50 */ /* iPhone - Portrait + small devices Android - Landscape */ .fa-max-250 {font-size: 105px !important; }} @media only screen and (max-width: 240px) { /* 50 */ /* small devices Android - Portrait */ .fa-max-250 {font-size: 65px !important; }} /* ------ MAX 225 PIXEL ------- */ .fa-max-225 {font-size: 225px !important; line-height: 1em; margin: 0; padding: 0; } @media only screen and (max-width: 1030px) { /* 300 *//* iPad - kindle - Landscape */ /* 1 */ .fa-max-225 {font-size: 225px !important; }} @media only screen and (max-width: 800px) { /* 275 */ /* iPad - Portrait */ .fa-max-225 {font-size: 225px !important; }} @media only screen and (max-width: 750px) { /* 250 */ .fa-max-225 {font-size: 225px !important; }} @media only screen and (max-width: 700px) { /* 225 */ .fa-max-225 {font-size: 215px !important; }} @media only screen and (max-width: 650px) { /* 200 */ .fa-max-225 {font-size: 200px !important; }} @media only screen and (max-width: 600px) { /* 150 */ /* kindle - Portrait + iPhone 4 - Landscape*/ .fa-max-225 {font-size: 175px !important; }} @media only screen and (max-width: 566px) { /* 125 */ .fa-max-225 {font-size: 150px !important; }} @media only screen and (max-width: 533px) { /* 100 */ .fa-max-225 {font-size: 135px !important; }} @media only screen and (max-width: 500px) { /* 75 */ /* iPhone 4 - Landscape */ .fa-max-225 {font-size: 120px !important; }} @media only screen and (max-width: 400px) { /* 50 */ /* ------------------------------------------ */ .fa-max-225 {font-size: 105px !important; }} @media only screen and (max-width: 320px) { /* 50 */ /* iPhone - Portrait + small devices Android - Landscape */ .fa-max-225 {font-size: 100px !important; }} @media only screen and (max-width: 240px) { /* 50 */ /* small devices Android - Portrait */ .fa-max-225 {font-size: 60px !important; }} /* ------ MAX 200 PIXEL ------- */ .fa-max-200 {font-size: 200px !important; line-height: 1em; margin: 0; padding: 0; } @media only screen and (max-width: 1030px) { /* 300 *//* iPad - kindle - Landscape */ /* 1 */ .fa-max-200 {font-size: 200px !important; }} @media only screen and (max-width: 800px) { /* 275 */ /* iPad - Portrait */ .fa-max-200 {font-size: 200px !important; }} @media only screen and (max-width: 750px) { /* 250 */ .fa-max-200 {font-size: 200px !important; }} @media only screen and (max-width: 700px) { /* 225 */ .fa-max-200 {font-size: 200px !important; }} @media only screen and (max-width: 650px) { /* 200 */ .fa-max-200 {font-size: 180px !important; }} @media only screen and (max-width: 600px) { /* 150 */ /* kindle - Portrait + iPhone 4 - Landscape*/ .fa-max-200 {font-size: 175px !important; }} @media only screen and (max-width: 566px) { /* 125 */ .fa-max-200 {font-size: 140px !important; }} @media only screen and (max-width: 533px) { /* 100 */ .fa-max-200 {font-size: 125px !important; }} @media only screen and (max-width: 500px) { /* 75 */ /* iPhone 4 - Landscape */ .fa-max-200 {font-size: 110px !important; }} @media only screen and (max-width: 400px) { /* 50 */ /* ------------------------------------------ */ .fa-max-200 {font-size: 100px !important; }} @media only screen and (max-width: 320px) { /* 50 */ /* iPhone - Portrait + small devices Android - Landscape */ .fa-max-200 {font-size: 90px !important; }} @media only screen and (max-width: 240px) { /* 50 */ /* small devices Android - Portrait */ .fa-max-200 {font-size: 55px !important; }} /* ------ MAX 175 PIXEL ------- */ .fa-max-175 {font-size: 175px !important; line-height: 1em; margin: 0; padding: 0; } @media only screen and (max-width: 1030px) { /* 300 *//* iPad - kindle - Landscape */ /* 1 */ .fa-max-175 {font-size: 175px !important; }} @media only screen and (max-width: 800px) { /* 275 */ /* iPad - Portrait */ .fa-max-175 {font-size: 175px !important; }} @media only screen and (max-width: 750px) { /* 250 */ .fa-max-175 {font-size: 175px !important; }} @media only screen and (max-width: 700px) { /* 225 */ .fa-max-175 {font-size: 175px !important; }} @media only screen and (max-width: 650px) { /* 200 */ .fa-max-175 {font-size: 170px !important; }} @media only screen and (max-width: 600px) { /* 150 */ /* kindle - Portrait + iPhone 4 - Landscape*/ .fa-max-175 {font-size: 155px !important; }} @media only screen and (max-width: 566px) { /* 125 */ .fa-max-175 {font-size: 145px !important; }} @media only screen and (max-width: 533px) { /* 100 */ .fa-max-175 {font-size: 120px !important; }} @media only screen and (max-width: 500px) { /* 75 */ /* iPhone 4 - Landscape */ .fa-max-175 {font-size: 95px !important; }} @media only screen and (max-width: 400px) { /* 50 */ /* ------------------------------------------ */ .fa-max-175 {font-size: 90px !important; }} @media only screen and (max-width: 320px) { /* 50 */ /* iPhone - Portrait + small devices Android - Landscape */ .fa-max-175 {font-size: 85px !important; }} @media only screen and (max-width: 240px) { /* 50 */ /* small devices Android - Portrait */ .fa-max-175 {font-size: 50px !important; }} /* ------ MAX 150 PIXEL ------- */ .fa-max-150 {font-size: 150px !important; line-height: 1.1em; margin: 0; padding: 0; } @media only screen and (max-width: 1030px) { /* 300 *//* iPad - kindle - Landscape */ /* 1 */ .fa-max-150 {font-size: 150px !important; }} @media only screen and (max-width: 800px) { /* 275 */ /* iPad - Portrait */ .fa-max-150 {font-size: 150px !important; }} @media only screen and (max-width: 750px) { /* 250 */ .fa-max-150 {font-size: 150px !important; }} @media only screen and (max-width: 700px) { /* 225 */ .fa-max-150 {font-size: 150px !important; }} @media only screen and (max-width: 650px) { /* 200 */ .fa-max-150 {font-size: 150px !important; }} @media only screen and (max-width: 600px) { /* 150 */ /* kindle - Portrait + iPhone 4 - Landscape*/ .fa-max-150 {font-size: 140px !important; }} @media only screen and (max-width: 566px) { /* 125 */ .fa-max-150 {font-size: 120px !important; }} @media only screen and (max-width: 533px) { /* 100 */ .fa-max-150 {font-size: 110px !important; }} @media only screen and (max-width: 500px) { /* 75 */ /* iPhone 4 - Landscape */ .fa-max-150 {font-size: 95px !important; }} @media only screen and (max-width: 400px) { /* 50 */ /* ------------------------------------------ */ .fa-max-150 {font-size: 80px !important; }} @media only screen and (max-width: 320px) { /* 50 */ /* iPhone - Portrait + small devices Android - Landscape */ .fa-max-150 {font-size: 75px !important; }} @media only screen and (max-width: 240px) { /* 50 */ /* small devices Android - Portrait */ .fa-max-150 {font-size: 45px !important; }} /* ------ MAX 125 PIXEL ------- */ .fa-max-125 {font-size: 125px !important; line-height: 1.14em; margin: 0; padding: 0; } @media only screen and (max-width: 1030px) { /* 300 *//* iPad - kindle - Landscape */ /* 1 */ .fa-max-125 {font-size: 125px !important; }} @media only screen and (max-width: 800px) { /* 275 */ /* iPad - Portrait */ .fa-max-125 {font-size: 125px !important; }} @media only screen and (max-width: 750px) { /* 250 */ .fa-max-125 {font-size: 125px !important; }} @media only screen and (max-width: 700px) { /* 225 */ .fa-max-125 {font-size: 125px !important; }} @media only screen and (max-width: 650px) { /* 200 */ .fa-max-125 {font-size: 125px !important; }} @media only screen and (max-width: 600px) { /* 150 */ /* kindle - Portrait + iPhone 4 - Landscape*/ .fa-max-125 {font-size: 125px !important; }} @media only screen and (max-width: 566px) { /* 125 */ .fa-max-125 {font-size: 115px !important; }} @media only screen and (max-width: 533px) { /* 100 */ .fa-max-125 {font-size: 100px !important; }} @media only screen and (max-width: 500px) { /* 75 */ /* iPhone 4 - Landscape */ .fa-max-125 {font-size: 87px !important; }} @media only screen and (max-width: 400px) { /* 50 */ /* ------------------------------------------ */ .fa-max-125 {font-size: 75px !important; }} @media only screen and (max-width: 320px) { /* 50 */ /* iPhone - Portrait + small devices Android - Landscape */ .fa-max-125 {font-size: 66px !important; }} @media only screen and (max-width: 240px) { /* 50 */ /* small devices Android - Portrait */ .fa-max-125 {font-size: 42px !important; }} /* ------ MAX 100 PIXEL ------- */ .fa-max-100 {font-size: 100px !important; line-height: 1.14em; margin: 0; padding: 0; } @media only screen and (max-width: 1030px) { /* 300 *//* iPad - kindle - Landscape */ /* 1 */ .fa-max-100 {font-size: 100px !important; }} @media only screen and (max-width: 800px) { /* 275 */ /* iPad - Portrait */ .fa-max-100 {font-size: 100px !important; }} @media only screen and (max-width: 750px) { /* 250 */ .fa-max-100 {font-size: 100px !important; }} @media only screen and (max-width: 700px) { /* 225 */ .fa-max-100 {font-size: 100px !important; }} @media only screen and (max-width: 650px) { /* 200 */ .fa-max-100 {font-size: 100px !important; }} @media only screen and (max-width: 600px) { /* 150 */ /* kindle - Portrait + iPhone 4 - Landscape*/ .fa-max-100 {font-size: 100px !important; }} @media only screen and (max-width: 566px) { /* 125 */ .fa-max-100 {font-size: 90px !important; }} @media only screen and (max-width: 533px) { /* 100 */ .fa-max-100 {font-size: 85px !important; }} @media only screen and (max-width: 500px) { /* 75 */ /* iPhone 4 - Landscape */ .fa-max-100 {font-size: 80px !important; }} @media only screen and (max-width: 400px) { /* 50 */ /* ------------------------------------------ */ .fa-max-100 {font-size: 65px !important; }} @media only screen and (max-width: 320px) { /* 50 */ /* iPhone - Portrait + small devices Android - Landscape */ .fa-max-100 {font-size: 57px !important; }} @media only screen and (max-width: 240px) { /* 50 */ /* small devices Android - Portrait */ .fa-max-100 {font-size: 35px !important; }} /* ------ MAX 75 PIXEL ------- */ .fa-max-75 {font-size: 75px !important; line-height: 1.14em; margin: 0; padding: 0; } @media only screen and (max-width: 1030px) { /* 300 *//* iPad - kindle - Landscape */ /* 1 */ .fa-max-75 {font-size: 75px !important; }} @media only screen and (max-width: 800px) { /* 275 */ /* iPad - Portrait */ .fa-max-75 {font-size: 75px !important; }} @media only screen and (max-width: 750px) { /* 250 */ .fa-max-75 {font-size: 75px !important; }} @media only screen and (max-width: 700px) { /* 225 */ .fa-max-75 {font-size: 75px !important; }} @media only screen and (max-width: 650px) { /* 200 */ .fa-max-75 {font-size: 75px !important; }} @media only screen and (max-width: 600px) { /* 150 */ /* kindle - Portrait + iPhone 4 - Landscape*/ .fa-max-75 {font-size: 75px !important; }} @media only screen and (max-width: 566px) { /* 125 */ .fa-max-75 {font-size: 75px !important; }} @media only screen and (max-width: 533px) { /* 100 */ .fa-max-75 {font-size: 70px !important; }} @media only screen and (max-width: 500px) { /* 75 */ /* iPhone 4 - Landscape */ .fa-max-75 {font-size: 60px !important; }} @media only screen and (max-width: 400px) { /* 50 */ /* ------------------------------------------ */ .fa-max-75 {font-size: 55px !important; }} @media only screen and (max-width: 320px) { /* 50 */ /* iPhone - Portrait + small devices Android - Landscape */ .fa-max-75 {font-size: 40px !important; }} @media only screen and (max-width: 240px) { /* 50 */ /* small devices Android - Portrait */ .fa-max-75 {font-size: 30px !important; }} /* ------ MAX 50 PIXEL ------- */ .fa-max-50 {font-size: 50px !important; line-height: 1.14em; margin: 0; padding: 0; } @media only screen and (max-width: 1030px) { /* 300 *//* iPad - kindle - Landscape */ /* 1 */ .fa-max-50 {font-size: 50px !important; }} @media only screen and (max-width: 800px) { /* 275 */ /* iPad - Portrait */ .fa-max-50 {font-size: 50px !important; }} @media only screen and (max-width: 750px) { /* 250 */ .fa-max-50 {font-size: 50px !important; }} @media only screen and (max-width: 700px) { /* 225 */ .fa-max-50 {font-size: 50px !important; }} @media only screen and (max-width: 650px) { /* 200 */ .fa-max-50 {font-size: 50px !important; }} @media only screen and (max-width: 600px) { /* 150 */ /* kindle - Portrait + iPhone 4 - Landscape*/ .fa-max-50 {font-size: 50px !important; }} @media only screen and (max-width: 566px) { /* 125 */ .fa-max-50 {font-size: 50px !important; }} @media only screen and (max-width: 533px) { /* 100 */ .fa-max-50 {font-size: 50px !important; }} @media only screen and (max-width: 500px) { /* 75 */ /* iPhone 4 - Landscape */ .fa-max-50 {font-size: 50px !important; }} @media only screen and (max-width: 400px) { /* 50 */ /* ------------------------------------------ */ .fa-max-50 {font-size: 40px !important; }} @media only screen and (max-width: 320px) { /* 50 */ /* iPhone - Portrait + small devices Android - Landscape */ .fa-max-50 {font-size: 30px !important; }} @media only screen and (max-width: 240px) { /* 50 */ /* small devices Android - Portrait */ .fa-max-50 {font-size: 25px !important; }} /* ------ MAX 30 PIXEL ------- */ .fa-max-30 {font-size: 30px !important; line-height: 1.05em; margin: 0; padding: 0; } @media only screen and (max-width: 1030px) { /* 300 *//* iPad - kindle - Landscape */ /* 1 */ .fa-max-30 {font-size: 30px !important; }} @media only screen and (max-width: 800px) { /* 275 */ /* iPad - Portrait */ .fa-max-30 {font-size: 30px !important; }} @media only screen and (max-width: 750px) { /* 250 */ .fa-max-30 {font-size: 30px !important; }} @media only screen and (max-width: 700px) { /* 225 */ .fa-max-30 {font-size: 30px !important; }} @media only screen and (max-width: 650px) { /* 200 */ .fa-max-30 {font-size: 30px !important; }} @media only screen and (max-width: 600px) { /* 150 */ /* kindle - Portrait + iPhone 4 - Landscape*/ .fa-max-30 {font-size: 30px !important; }} @media only screen and (max-width: 566px) { /* 125 */ .fa-max-30 {font-size: 30px !important; }} @media only screen and (max-width: 533px) { /* 100 */ .fa-max-30 {font-size: 30px !important; }} @media only screen and (max-width: 500px) { /* 75 */ /* iPhone 4 - Landscape */ .fa-max-30 {font-size: 30px !important; }} @media only screen and (max-width: 400px) { /* 50 */ /* ------------------------------------------ */ .fa-max-30 {font-size: 25px !important; }} @media only screen and (max-width: 320px) { /* 50 */ /* iPhone - Portrait + small devices Android - Landscape */ .fa-max-30 {font-size: 22px !important; }} @media only screen and (max-width: 240px) { /* 50 */ /* small devices Android - Portrait */ .fa-max-30 {font-size: 22px !important; }} /* icons size */ /* @end */ /* @end */ #hello { } /* @group animation scroll */ /* 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. */ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ /*-webkit-backface-visibility: hidden;*/ } .animated { -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; } .animated.hinge { -webkit-animation-duration: 2s; -moz-animation-duration: 2s; -o-animation-duration: 2s; animation-duration: 2s; } @-webkit-keyframes flash { 0%, 50%, 100% {opacity: 1;} 25%, 75% {opacity: 0;} } @-moz-keyframes flash { 0%, 50%, 100% {opacity: 1;} 25%, 75% {opacity: 0;} } @-o-keyframes flash { 0%, 50%, 100% {opacity: 1;} 25%, 75% {opacity: 0;} } @keyframes flash { 0%, 50%, 100% {opacity: 1;} 25%, 75% {opacity: 0;} } .animated.flash { -webkit-animation-name: flash; -moz-animation-name: flash; -o-animation-name: flash; animation-name: flash; } @-webkit-keyframes shake { 0%, 100% {-webkit-transform: translateX(0);} 10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-10px);} 20%, 40%, 60%, 80% {-webkit-transform: translateX(10px);} } @-moz-keyframes shake { 0%, 100% {-moz-transform: translateX(0);} 10%, 30%, 50%, 70%, 90% {-moz-transform: translateX(-10px);} 20%, 40%, 60%, 80% {-moz-transform: translateX(10px);} } @-o-keyframes shake { 0%, 100% {-o-transform: translateX(0);} 10%, 30%, 50%, 70%, 90% {-o-transform: translateX(-10px);} 20%, 40%, 60%, 80% {-o-transform: translateX(10px);} } @keyframes shake { 0%, 100% {transform: translateX(0);} 10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);} 20%, 40%, 60%, 80% {transform: translateX(10px);} } .animated.shake { -webkit-animation-name: shake; -moz-animation-name: shake; -o-animation-name: shake; animation-name: shake; } @-webkit-keyframes bounce { 0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);} 40% {-webkit-transform: translateY(-30px);} 60% {-webkit-transform: translateY(-15px);} } @-moz-keyframes bounce { 0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);} 40% {-moz-transform: translateY(-30px);} 60% {-moz-transform: translateY(-15px);} } @-o-keyframes bounce { 0%, 20%, 50%, 80%, 100% {-o-transform: translateY(0);} 40% {-o-transform: translateY(-30px);} 60% {-o-transform: translateY(-15px);} } @keyframes bounce { 0%, 20%, 50%, 80%, 100% {transform: translateY(0);} 40% {transform: translateY(-30px);} 60% {transform: translateY(-15px);} } .animated.bounce { -webkit-animation-name: bounce; -moz-animation-name: bounce; -o-animation-name: bounce; animation-name: bounce; } @-webkit-keyframes tada { 0% {-webkit-transform: scale(1);} 10%, 20% {-webkit-transform: scale(0.9) rotate(-3deg);} 30%, 50%, 70%, 90% {-webkit-transform: scale(1.1) rotate(3deg);} 40%, 60%, 80% {-webkit-transform: scale(1.1) rotate(-3deg);} 100% {-webkit-transform: scale(1) rotate(0);} } @-moz-keyframes tada { 0% {-moz-transform: scale(1);} 10%, 20% {-moz-transform: scale(0.9) rotate(-3deg);} 30%, 50%, 70%, 90% {-moz-transform: scale(1.1) rotate(3deg);} 40%, 60%, 80% {-moz-transform: scale(1.1) rotate(-3deg);} 100% {-moz-transform: scale(1) rotate(0);} } @-o-keyframes tada { 0% {-o-transform: scale(1);} 10%, 20% {-o-transform: scale(0.9) rotate(-3deg);} 30%, 50%, 70%, 90% {-o-transform: scale(1.1) rotate(3deg);} 40%, 60%, 80% {-o-transform: scale(1.1) rotate(-3deg);} 100% {-o-transform: scale(1) rotate(0);} } @keyframes tada { 0% {transform: scale(1);} 10%, 20% {transform: scale(0.9) rotate(-3deg);} 30%, 50%, 70%, 90% {transform: scale(1.1) rotate(3deg);} 40%, 60%, 80% {transform: scale(1.1) rotate(-3deg);} 100% {transform: scale(1) rotate(0);} } .animated.tada { -webkit-animation-name: tada; -moz-animation-name: tada; -o-animation-name: tada; animation-name: tada; } @-webkit-keyframes swing { 20%, 40%, 60%, 80%, 100% { -webkit-transform-origin: top center; } 20% { -webkit-transform: rotate(15deg); } 40% { -webkit-transform: rotate(-10deg); } 60% { -webkit-transform: rotate(5deg); } 80% { -webkit-transform: rotate(-5deg); } 100% { -webkit-transform: rotate(0deg); } } @-moz-keyframes swing { 20% { -moz-transform: rotate(15deg); } 40% { -moz-transform: rotate(-10deg); } 60% { -moz-transform: rotate(5deg); } 80% { -moz-transform: rotate(-5deg); } 100% { -moz-transform: rotate(0deg); } } @-o-keyframes swing { 20% { -o-transform: rotate(15deg); } 40% { -o-transform: rotate(-10deg); } 60% { -o-transform: rotate(5deg); } 80% { -o-transform: rotate(-5deg); } 100% { -o-transform: rotate(0deg); } } @keyframes swing { 20% { transform: rotate(15deg); } 40% { transform: rotate(-10deg); } 60% { transform: rotate(5deg); } 80% { transform: rotate(-5deg); } 100% { transform: rotate(0deg); } } .animated.swing { -webkit-transform-origin: top center; -moz-transform-origin: top center; -o-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swing; -moz-animation-name: swing; -o-animation-name: swing; animation-name: swing; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes wobble { 0% { -webkit-transform: translateX(0%); } 15% { -webkit-transform: translateX(-25%) rotate(-5deg); } 30% { -webkit-transform: translateX(20%) rotate(3deg); } 45% { -webkit-transform: translateX(-15%) rotate(-3deg); } 60% { -webkit-transform: translateX(10%) rotate(2deg); } 75% { -webkit-transform: translateX(-5%) rotate(-1deg); } 100% { -webkit-transform: translateX(0%); } } @-moz-keyframes wobble { 0% { -moz-transform: translateX(0%); } 15% { -moz-transform: translateX(-25%) rotate(-5deg); } 30% { -moz-transform: translateX(20%) rotate(3deg); } 45% { -moz-transform: translateX(-15%) rotate(-3deg); } 60% { -moz-transform: translateX(10%) rotate(2deg); } 75% { -moz-transform: translateX(-5%) rotate(-1deg); } 100% { -moz-transform: translateX(0%); } } @-o-keyframes wobble { 0% { -o-transform: translateX(0%); } 15% { -o-transform: translateX(-25%) rotate(-5deg); } 30% { -o-transform: translateX(20%) rotate(3deg); } 45% { -o-transform: translateX(-15%) rotate(-3deg); } 60% { -o-transform: translateX(10%) rotate(2deg); } 75% { -o-transform: translateX(-5%) rotate(-1deg); } 100% { -o-transform: translateX(0%); } } @keyframes wobble { 0% { transform: translateX(0%); } 15% { transform: translateX(-25%) rotate(-5deg); } 30% { transform: translateX(20%) rotate(3deg); } 45% { transform: translateX(-15%) rotate(-3deg); } 60% { transform: translateX(10%) rotate(2deg); } 75% { transform: translateX(-5%) rotate(-1deg); } 100% { transform: translateX(0%); } } .animated.wobble { -webkit-animation-name: wobble; -moz-animation-name: wobble; -o-animation-name: wobble; animation-name: wobble; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes pulse { 0% { -webkit-transform: scale(1); } 50% { -webkit-transform: scale(1.1); } 100% { -webkit-transform: scale(1); } } @-moz-keyframes pulse { 0% { -moz-transform: scale(1); } 50% { -moz-transform: scale(1.1); } 100% { -moz-transform: scale(1); } } @-o-keyframes pulse { 0% { -o-transform: scale(1); } 50% { -o-transform: scale(1.1); } 100% { -o-transform: scale(1); } } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } } .animated.pulse { -webkit-animation-name: pulse; -moz-animation-name: pulse; -o-animation-name: pulse; animation-name: pulse; } @-webkit-keyframes flip { 0% { -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); -webkit-animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); -webkit-animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -webkit-animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); -webkit-animation-timing-function: ease-in; } 100% { -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); -webkit-animation-timing-function: ease-in; } } @-moz-keyframes flip { 0% { -moz-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); -moz-animation-timing-function: ease-out; } 40% { -moz-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); -moz-animation-timing-function: ease-out; } 50% { -moz-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -moz-animation-timing-function: ease-in; } 80% { -moz-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); -moz-animation-timing-function: ease-in; } 100% { -moz-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); -moz-animation-timing-function: ease-in; } } @-o-keyframes flip { 0% { -o-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); -o-animation-timing-function: ease-out; } 40% { -o-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); -o-animation-timing-function: ease-out; } 50% { -o-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -o-animation-timing-function: ease-in; } 80% { -o-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); -o-animation-timing-function: ease-in; } 100% { -o-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); -o-animation-timing-function: ease-in; } } @keyframes flip { 0% { transform: perspective(400px) translateZ(0) rotateY(0) scale(1); animation-timing-function: ease-out; } 40% { transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); animation-timing-function: ease-out; } 50% { transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); animation-timing-function: ease-in; } 80% { transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); animation-timing-function: ease-in; } 100% { transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); animation-timing-function: ease-in; } } .animated.flip { -webkit-backface-visibility: visible !important; -webkit-animation-name: flip; -moz-backface-visibility: visible !important; -moz-animation-name: flip; -o-backface-visibility: visible !important; -o-animation-name: flip; backface-visibility: visible !important; animation-name: flip; } @-webkit-keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateX(-10deg); } 70% { -webkit-transform: perspective(400px) rotateX(10deg); } 100% { -webkit-transform: perspective(400px) rotateX(0deg); opacity: 1; } } @-moz-keyframes flipInX { 0% { -moz-transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { -moz-transform: perspective(400px) rotateX(-10deg); } 70% { -moz-transform: perspective(400px) rotateX(10deg); } 100% { -moz-transform: perspective(400px) rotateX(0deg); opacity: 1; } } @-o-keyframes flipInX { 0% { -o-transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { -o-transform: perspective(400px) rotateX(-10deg); } 70% { -o-transform: perspective(400px) rotateX(10deg); } 100% { -o-transform: perspective(400px) rotateX(0deg); opacity: 1; } } @keyframes flipInX { 0% { transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { transform: perspective(400px) rotateX(-10deg); } 70% { transform: perspective(400px) rotateX(10deg); } 100% { transform: perspective(400px) rotateX(0deg); opacity: 1; } } .animated.flipInX { -webkit-backface-visibility: visible !important; -webkit-animation-name: flipInX; -moz-backface-visibility: visible !important; -moz-animation-name: flipInX; -o-backface-visibility: visible !important; -o-animation-name: flipInX; backface-visibility: visible !important; animation-name: flipInX; } @-webkit-keyframes flipOutX { 0% { -webkit-transform: perspective(400px) rotateX(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateX(90deg); opacity: 0; } } @-moz-keyframes flipOutX { 0% { -moz-transform: perspective(400px) rotateX(0deg); opacity: 1; } 100% { -moz-transform: perspective(400px) rotateX(90deg); opacity: 0; } } @-o-keyframes flipOutX { 0% { -o-transform: perspective(400px) rotateX(0deg); opacity: 1; } 100% { -o-transform: perspective(400px) rotateX(90deg); opacity: 0; } } @keyframes flipOutX { 0% { transform: perspective(400px) rotateX(0deg); opacity: 1; } 100% { transform: perspective(400px) rotateX(90deg); opacity: 0; } } .animated.flipOutX { -webkit-animation-name: flipOutX; -webkit-backface-visibility: visible !important; -moz-animation-name: flipOutX; -moz-backface-visibility: visible !important; -o-animation-name: flipOutX; -o-backface-visibility: visible !important; animation-name: flipOutX; backface-visibility: visible !important; } @-webkit-keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotateY(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateY(-10deg); } 70% { -webkit-transform: perspective(400px) rotateY(10deg); } 100% { -webkit-transform: perspective(400px) rotateY(0deg); opacity: 1; } } @-moz-keyframes flipInY { 0% { -moz-transform: perspective(400px) rotateY(90deg); opacity: 0; } 40% { -moz-transform: perspective(400px) rotateY(-10deg); } 70% { -moz-transform: perspective(400px) rotateY(10deg); } 100% { -moz-transform: perspective(400px) rotateY(0deg); opacity: 1; } } @-o-keyframes flipInY { 0% { -o-transform: perspective(400px) rotateY(90deg); opacity: 0; } 40% { -o-transform: perspective(400px) rotateY(-10deg); } 70% { -o-transform: perspective(400px) rotateY(10deg); } 100% { -o-transform: perspective(400px) rotateY(0deg); opacity: 1; } } @keyframes flipInY { 0% { transform: perspective(400px) rotateY(90deg); opacity: 0; } 40% { transform: perspective(400px) rotateY(-10deg); } 70% { transform: perspective(400px) rotateY(10deg); } 100% { transform: perspective(400px) rotateY(0deg); opacity: 1; } } .animated.flipInY { -webkit-backface-visibility: visible !important; -webkit-animation-name: flipInY; -moz-backface-visibility: visible !important; -moz-animation-name: flipInY; -o-backface-visibility: visible !important; -o-animation-name: flipInY; backface-visibility: visible !important; animation-name: flipInY; } @-webkit-keyframes flipOutY { 0% { -webkit-transform: perspective(400px) rotateY(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateY(90deg); opacity: 0; } } @-moz-keyframes flipOutY { 0% { -moz-transform: perspective(400px) rotateY(0deg); opacity: 1; } 100% { -moz-transform: perspective(400px) rotateY(90deg); opacity: 0; } } @-o-keyframes flipOutY { 0% { -o-transform: perspective(400px) rotateY(0deg); opacity: 1; } 100% { -o-transform: perspective(400px) rotateY(90deg); opacity: 0; } } @keyframes flipOutY { 0% { transform: perspective(400px) rotateY(0deg); opacity: 1; } 100% { transform: perspective(400px) rotateY(90deg); opacity: 0; } } .animated.flipOutY { -webkit-backface-visibility: visible !important; -webkit-animation-name: flipOutY; -moz-backface-visibility: visible !important; -moz-animation-name: flipOutY; -o-backface-visibility: visible !important; -o-animation-name: flipOutY; backface-visibility: visible !important; animation-name: flipOutY; } @-webkit-keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1;} } @-moz-keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1;} } @-o-keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1;} } @keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1;} } .animated.fadeIn { -webkit-animation-name: fadeIn; -moz-animation-name: fadeIn; -o-animation-name: fadeIn; animation-name: fadeIn; } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(20px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @-moz-keyframes fadeInUp { 0% { opacity: 0; -moz-transform: translateY(20px); } 100% { opacity: 1; -moz-transform: translateY(0); } } @-o-keyframes fadeInUp { 0% { opacity: 0; -o-transform: translateY(20px); } 100% { opacity: 1; -o-transform: translateY(0); } } @keyframes fadeInUp { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } } .animated.fadeInUp { -webkit-animation-name: fadeInUp; -moz-animation-name: fadeInUp; -o-animation-name: fadeInUp; animation-name: fadeInUp; } @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-20px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @-moz-keyframes fadeInDown { 0% { opacity: 0; -moz-transform: translateY(-20px); } 100% { opacity: 1; -moz-transform: translateY(0); } } @-o-keyframes fadeInDown { 0% { opacity: 0; -o-transform: translateY(-20px); } 100% { opacity: 1; -o-transform: translateY(0); } } @keyframes fadeInDown { 0% { opacity: 0; transform: translateY(-20px); } 100% { opacity: 1; transform: translateY(0); } } .animated.fadeInDown { -webkit-animation-name: fadeInDown; -moz-animation-name: fadeInDown; -o-animation-name: fadeInDown; animation-name: fadeInDown; } @-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-20px); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @-moz-keyframes fadeInLeft { 0% { opacity: 0; -moz-transform: translateX(-20px); } 100% { opacity: 1; -moz-transform: translateX(0); } } @-o-keyframes fadeInLeft { 0% { opacity: 0; -o-transform: translateX(-20px); } 100% { opacity: 1; -o-transform: translateX(0); } } @keyframes fadeInLeft { 0% { opacity: 0; transform: translateX(-20px); } 100% { opacity: 1; transform: translateX(0); } } .animated.fadeInLeft { -webkit-animation-name: fadeInLeft; -moz-animation-name: fadeInLeft; -o-animation-name: fadeInLeft; animation-name: fadeInLeft; } @-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(20px); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @-moz-keyframes fadeInRight { 0% { opacity: 0; -moz-transform: translateX(20px); } 100% { opacity: 1; -moz-transform: translateX(0); } } @-o-keyframes fadeInRight { 0% { opacity: 0; -o-transform: translateX(20px); } 100% { opacity: 1; -o-transform: translateX(0); } } @keyframes fadeInRight { 0% { opacity: 0; transform: translateX(20px); } 100% { opacity: 1; transform: translateX(0); } } .animated.fadeInRight { -webkit-animation-name: fadeInRight; -moz-animation-name: fadeInRight; -o-animation-name: fadeInRight; animation-name: fadeInRight; } @-webkit-keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translateY(2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @-moz-keyframes fadeInUpBig { 0% { opacity: 0; -moz-transform: translateY(2000px); } 100% { opacity: 1; -moz-transform: translateY(0); } } @-o-keyframes fadeInUpBig { 0% { opacity: 0; -o-transform: translateY(2000px); } 100% { opacity: 1; -o-transform: translateY(0); } } @keyframes fadeInUpBig { 0% { opacity: 0; transform: translateY(2000px); } 100% { opacity: 1; transform: translateY(0); } } .animated.fadeInUpBig { -webkit-animation-name: fadeInUpBig; -moz-animation-name: fadeInUpBig; -o-animation-name: fadeInUpBig; animation-name: fadeInUpBig; } @-webkit-keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translateY(-2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @-moz-keyframes fadeInDownBig { 0% { opacity: 0; -moz-transform: translateY(-2000px); } 100% { opacity: 1; -moz-transform: translateY(0); } } @-o-keyframes fadeInDownBig { 0% { opacity: 0; -o-transform: translateY(-2000px); } 100% { opacity: 1; -o-transform: translateY(0); } } @keyframes fadeInDownBig { 0% { opacity: 0; transform: translateY(-2000px); } 100% { opacity: 1; transform: translateY(0); } } .animated.fadeInDownBig { -webkit-animation-name: fadeInDownBig; -moz-animation-name: fadeInDownBig; -o-animation-name: fadeInDownBig; animation-name: fadeInDownBig; } @-webkit-keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translateX(-2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @-moz-keyframes fadeInLeftBig { 0% { opacity: 0; -moz-transform: translateX(-2000px); } 100% { opacity: 1; -moz-transform: translateX(0); } } @-o-keyframes fadeInLeftBig { 0% { opacity: 0; -o-transform: translateX(-2000px); } 100% { opacity: 1; -o-transform: translateX(0); } } @keyframes fadeInLeftBig { 0% { opacity: 0; transform: translateX(-2000px); } 100% { opacity: 1; transform: translateX(0); } } .animated.fadeInLeftBig { -webkit-animation-name: fadeInLeftBig; -moz-animation-name: fadeInLeftBig; -o-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig; } @-webkit-keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translateX(2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @-moz-keyframes fadeInRightBig { 0% { opacity: 0; -moz-transform: translateX(2000px); } 100% { opacity: 1; -moz-transform: translateX(0); } } @-o-keyframes fadeInRightBig { 0% { opacity: 0; -o-transform: translateX(2000px); } 100% { opacity: 1; -o-transform: translateX(0); } } @keyframes fadeInRightBig { 0% { opacity: 0; transform: translateX(2000px); } 100% { opacity: 1; transform: translateX(0); } } .animated.fadeInRightBig { -webkit-animation-name: fadeInRightBig; -moz-animation-name: fadeInRightBig; -o-animation-name: fadeInRightBig; animation-name: fadeInRightBig; } @-webkit-keyframes fadeOut { 0% {opacity: 1;} 100% {opacity: 0;} } @-moz-keyframes fadeOut { 0% {opacity: 1;} 100% {opacity: 0;} } @-o-keyframes fadeOut { 0% {opacity: 1;} 100% {opacity: 0;} } @keyframes fadeOut { 0% {opacity: 1;} 100% {opacity: 0;} } .animated.fadeOut { -webkit-animation-name: fadeOut; -moz-animation-name: fadeOut; -o-animation-name: fadeOut; animation-name: fadeOut; } @-webkit-keyframes fadeOutUp { 0% { opacity: 1; -webkit-transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-20px); } } @-moz-keyframes fadeOutUp { 0% { opacity: 1; -moz-transform: translateY(0); } 100% { opacity: 0; -moz-transform: translateY(-20px); } } @-o-keyframes fadeOutUp { 0% { opacity: 1; -o-transform: translateY(0); } 100% { opacity: 0; -o-transform: translateY(-20px); } } @keyframes fadeOutUp { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-20px); } } .animated.fadeOutUp { -webkit-animation-name: fadeOutUp; -moz-animation-name: fadeOutUp; -o-animation-name: fadeOutUp; animation-name: fadeOutUp; } @-webkit-keyframes fadeOutDown { 0% { opacity: 1; -webkit-transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(20px); } } @-moz-keyframes fadeOutDown { 0% { opacity: 1; -moz-transform: translateY(0); } 100% { opacity: 0; -moz-transform: translateY(20px); } } @-o-keyframes fadeOutDown { 0% { opacity: 1; -o-transform: translateY(0); } 100% { opacity: 0; -o-transform: translateY(20px); } } @keyframes fadeOutDown { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(20px); } } .animated.fadeOutDown { -webkit-animation-name: fadeOutDown; -moz-animation-name: fadeOutDown; -o-animation-name: fadeOutDown; animation-name: fadeOutDown; } @-webkit-keyframes fadeOutLeft { 0% { opacity: 1; -webkit-transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-20px); } } @-moz-keyframes fadeOutLeft { 0% { opacity: 1; -moz-transform: translateX(0); } 100% { opacity: 0; -moz-transform: translateX(-20px); } } @-o-keyframes fadeOutLeft { 0% { opacity: 1; -o-transform: translateX(0); } 100% { opacity: 0; -o-transform: translateX(-20px); } } @keyframes fadeOutLeft { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(-20px); } } .animated.fadeOutLeft { -webkit-animation-name: fadeOutLeft; -moz-animation-name: fadeOutLeft; -o-animation-name: fadeOutLeft; animation-name: fadeOutLeft; } @-webkit-keyframes fadeOutRight { 0% { opacity: 1; -webkit-transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(20px); } } @-moz-keyframes fadeOutRight { 0% { opacity: 1; -moz-transform: translateX(0); } 100% { opacity: 0; -moz-transform: translateX(20px); } } @-o-keyframes fadeOutRight { 0% { opacity: 1; -o-transform: translateX(0); } 100% { opacity: 0; -o-transform: translateX(20px); } } @keyframes fadeOutRight { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(20px); } } .animated.fadeOutRight { -webkit-animation-name: fadeOutRight; -moz-animation-name: fadeOutRight; -o-animation-name: fadeOutRight; animation-name: fadeOutRight; } @-webkit-keyframes fadeOutUpBig { 0% { opacity: 1; -webkit-transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); } } @-moz-keyframes fadeOutUpBig { 0% { opacity: 1; -moz-transform: translateY(0); } 100% { opacity: 0; -moz-transform: translateY(-2000px); } } @-o-keyframes fadeOutUpBig { 0% { opacity: 1; -o-transform: translateY(0); } 100% { opacity: 0; -o-transform: translateY(-2000px); } } @keyframes fadeOutUpBig { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-2000px); } } .animated.fadeOutUpBig { -webkit-animation-name: fadeOutUpBig; -moz-animation-name: fadeOutUpBig; -o-animation-name: fadeOutUpBig; animation-name: fadeOutUpBig; } @-webkit-keyframes fadeOutDownBig { 0% { opacity: 1; -webkit-transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(2000px); } } @-moz-keyframes fadeOutDownBig { 0% { opacity: 1; -moz-transform: translateY(0); } 100% { opacity: 0; -moz-transform: translateY(2000px); } } @-o-keyframes fadeOutDownBig { 0% { opacity: 1; -o-transform: translateY(0); } 100% { opacity: 0; -o-transform: translateY(2000px); } } @keyframes fadeOutDownBig { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(2000px); } } .animated.fadeOutDownBig { -webkit-animation-name: fadeOutDownBig; -moz-animation-name: fadeOutDownBig; -o-animation-name: fadeOutDownBig; animation-name: fadeOutDownBig; } @-webkit-keyframes fadeOutLeftBig { 0% { opacity: 1; -webkit-transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); } } @-moz-keyframes fadeOutLeftBig { 0% { opacity: 1; -moz-transform: translateX(0); } 100% { opacity: 0; -moz-transform: translateX(-2000px); } } @-o-keyframes fadeOutLeftBig { 0% { opacity: 1; -o-transform: translateX(0); } 100% { opacity: 0; -o-transform: translateX(-2000px); } } @keyframes fadeOutLeftBig { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(-2000px); } } .animated.fadeOutLeftBig { -webkit-animation-name: fadeOutLeftBig; -moz-animation-name: fadeOutLeftBig; -o-animation-name: fadeOutLeftBig; animation-name: fadeOutLeftBig; } @-webkit-keyframes fadeOutRightBig { 0% { opacity: 1; -webkit-transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); } } @-moz-keyframes fadeOutRightBig { 0% { opacity: 1; -moz-transform: translateX(0); } 100% { opacity: 0; -moz-transform: translateX(2000px); } } @-o-keyframes fadeOutRightBig { 0% { opacity: 1; -o-transform: translateX(0); } 100% { opacity: 0; -o-transform: translateX(2000px); } } @keyframes fadeOutRightBig { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(2000px); } } .animated.fadeOutRightBig { -webkit-animation-name: fadeOutRightBig; -moz-animation-name: fadeOutRightBig; -o-animation-name: fadeOutRightBig; animation-name: fadeOutRightBig; } @-webkit-keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(.3); } 50% { opacity: 1; -webkit-transform: scale(1.05); } 70% { -webkit-transform: scale(.9); } 100% { -webkit-transform: scale(1); } } @-moz-keyframes bounceIn { 0% { opacity: 0; -moz-transform: scale(.3); } 50% { opacity: 1; -moz-transform: scale(1.05); } 70% { -moz-transform: scale(.9); } 100% { -moz-transform: scale(1); } } @-o-keyframes bounceIn { 0% { opacity: 0; -o-transform: scale(.3); } 50% { opacity: 1; -o-transform: scale(1.05); } 70% { -o-transform: scale(.9); } 100% { -o-transform: scale(1); } } @keyframes bounceIn { 0% { opacity: 0; transform: scale(.3); } 50% { opacity: 1; transform: scale(1.05); } 70% { transform: scale(.9); } 100% { transform: scale(1); } } @-webkit-keyframes slideInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); } 100% { -webkit-transform: translateY(0); } } @-moz-keyframes slideInDown { 0% { opacity: 0; -moz-transform: translateY(-2000px); } 100% { -moz-transform: translateY(0); } } @-o-keyframes slideInDown { 0% { opacity: 0; -o-transform: translateY(-2000px); } 100% { -o-transform: translateY(0); } } @keyframes slideInDown { 0% { opacity: 0; transform: translateY(-2000px); } 100% { transform: translateY(0); } } .slideInDown { -webkit-animation-name: slideInDown; -moz-animation-name: slideInDown; -o-animation-name: slideInDown; animation-name: slideInDown; } @-webkit-keyframes slideInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); } 100% { -webkit-transform: translateX(0); } } @-moz-keyframes slideInLeft { 0% { opacity: 0; -moz-transform: translateX(-2000px); } 100% { -moz-transform: translateX(0); } } @-o-keyframes slideInLeft { 0% { opacity: 0; -o-transform: translateX(-2000px); } 100% { -o-transform: translateX(0); } } @keyframes slideInLeft { 0% { opacity: 0; transform: translateX(-2000px); } 100% { transform: translateX(0); } } .slideInLeft { -webkit-animation-name: slideInLeft; -moz-animation-name: slideInLeft; -o-animation-name: slideInLeft; animation-name: slideInLeft; } @-webkit-keyframes slideInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); } 100% { -webkit-transform: translateX(0); } } @-moz-keyframes slideInRight { 0% { opacity: 0; -moz-transform: translateX(2000px); } 100% { -moz-transform: translateX(0); } } @-o-keyframes slideInRight { 0% { opacity: 0; -o-transform: translateX(2000px); } 100% { -o-transform: translateX(0); } } @keyframes slideInRight { 0% { opacity: 0; transform: translateX(2000px); } 100% { transform: translateX(0); } } .slideInRight { -webkit-animation-name: slideInRight; -moz-animation-name: slideInRight; -o-animation-name: slideInRight; animation-name: slideInRight; } @-webkit-keyframes slideOutLeft { 0% { -webkit-transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); } } @-moz-keyframes slideOutLeft { 0% { -moz-transform: translateX(0); } 100% { opacity: 0; -moz-transform: translateX(-2000px); } } @-o-keyframes slideOutLeft { 0% { -o-transform: translateX(0); } 100% { opacity: 0; -o-transform: translateX(-2000px); } } @keyframes slideOutLeft { 0% { transform: translateX(0); } 100% { opacity: 0; transform: translateX(-2000px); } } .slideOutLeft { -webkit-animation-name: slideOutLeft; -moz-animation-name: slideOutLeft; -o-animation-name: slideOutLeft; animation-name: slideOutLeft; } @-webkit-keyframes slideOutRight { 0% { -webkit-transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); } } @-moz-keyframes slideOutRight { 0% { -moz-transform: translateX(0); } 100% { opacity: 0; -moz-transform: translateX(2000px); } } @-o-keyframes slideOutRight { 0% { -o-transform: translateX(0); } 100% { opacity: 0; -o-transform: translateX(2000px); } } @keyframes slideOutRight { 0% { transform: translateX(0); } 100% { opacity: 0; transform: translateX(2000px); } } .slideOutRight { -webkit-animation-name: slideOutRight; -moz-animation-name: slideOutRight; -o-animation-name: slideOutRight; animation-name: slideOutRight; } @-webkit-keyframes slideOutUp { 0% { -webkit-transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); } } @-moz-keyframes slideOutUp { 0% { -moz-transform: translateY(0); } 100% { opacity: 0; -moz-transform: translateY(-2000px); } } @-o-keyframes slideOutUp { 0% { -o-transform: translateY(0); } 100% { opacity: 0; -o-transform: translateY(-2000px); } } @keyframes slideOutUp { 0% { transform: translateY(0); } 100% { opacity: 0; transform: translateY(-2000px); } } .slideOutUp { -webkit-animation-name: slideOutUp; -moz-animation-name: slideOutUp; -o-animation-name: slideOutUp; animation-name: slideOutUp; } .animated.bounceIn { -webkit-animation-name: bounceIn; -moz-animation-name: bounceIn; -o-animation-name: bounceIn; animation-name: bounceIn; } @-webkit-keyframes bounceInUp { 0% { opacity: 0; -webkit-transform: translateY(2000px); } 60% { opacity: 1; -webkit-transform: translateY(-30px); } 80% { -webkit-transform: translateY(10px); } 100% { -webkit-transform: translateY(0); } } @-moz-keyframes bounceInUp { 0% { opacity: 0; -moz-transform: translateY(2000px); } 60% { opacity: 1; -moz-transform: translateY(-30px); } 80% { -moz-transform: translateY(10px); } 100% { -moz-transform: translateY(0); } } @-o-keyframes bounceInUp { 0% { opacity: 0; -o-transform: translateY(2000px); } 60% { opacity: 1; -o-transform: translateY(-30px); } 80% { -o-transform: translateY(10px); } 100% { -o-transform: translateY(0); } } @keyframes bounceInUp { 0% { opacity: 0; transform: translateY(2000px); } 60% { opacity: 1; transform: translateY(-30px); } 80% { transform: translateY(10px); } 100% { transform: translateY(0); } } .animated.bounceInUp { -webkit-animation-name: bounceInUp; -moz-animation-name: bounceInUp; -o-animation-name: bounceInUp; animation-name: bounceInUp; } @-webkit-keyframes bounceInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); } 60% { opacity: 1; -webkit-transform: translateY(30px); } 80% { -webkit-transform: translateY(-10px); } 100% { -webkit-transform: translateY(0); } } @-moz-keyframes bounceInDown { 0% { opacity: 0; -moz-transform: translateY(-2000px); } 60% { opacity: 1; -moz-transform: translateY(30px); } 80% { -moz-transform: translateY(-10px); } 100% { -moz-transform: translateY(0); } } @-o-keyframes bounceInDown { 0% { opacity: 0; -o-transform: translateY(-2000px); } 60% { opacity: 1; -o-transform: translateY(30px); } 80% { -o-transform: translateY(-10px); } 100% { -o-transform: translateY(0); } } @keyframes bounceInDown { 0% { opacity: 0; transform: translateY(-2000px); } 60% { opacity: 1; transform: translateY(30px); } 80% { transform: translateY(-10px); } 100% { transform: translateY(0); } } .animated.bounceInDown { -webkit-animation-name: bounceInDown; -moz-animation-name: bounceInDown; -o-animation-name: bounceInDown; animation-name: bounceInDown; } @-webkit-keyframes bounceInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); } 60% { opacity: 1; -webkit-transform: translateX(30px); } 80% { -webkit-transform: translateX(-10px); } 100% { -webkit-transform: translateX(0); } } @-moz-keyframes bounceInLeft { 0% { opacity: 0; -moz-transform: translateX(-2000px); } 60% { opacity: 1; -moz-transform: translateX(30px); } 80% { -moz-transform: translateX(-10px); } 100% { -moz-transform: translateX(0); } } @-o-keyframes bounceInLeft { 0% { opacity: 0; -o-transform: translateX(-2000px); } 60% { opacity: 1; -o-transform: translateX(30px); } 80% { -o-transform: translateX(-10px); } 100% { -o-transform: translateX(0); } } @keyframes bounceInLeft { 0% { opacity: 0; transform: translateX(-2000px); } 60% { opacity: 1; transform: translateX(30px); } 80% { transform: translateX(-10px); } 100% { transform: translateX(0); } } .animated.bounceInLeft { -webkit-animation-name: bounceInLeft; -moz-animation-name: bounceInLeft; -o-animation-name: bounceInLeft; animation-name: bounceInLeft; } @-webkit-keyframes bounceInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); } 60% { opacity: 1; -webkit-transform: translateX(-30px); } 80% { -webkit-transform: translateX(10px); } 100% { -webkit-transform: translateX(0); } } @-moz-keyframes bounceInRight { 0% { opacity: 0; -moz-transform: translateX(2000px); } 60% { opacity: 1; -moz-transform: translateX(-30px); } 80% { -moz-transform: translateX(10px); } 100% { -moz-transform: translateX(0); } } @-o-keyframes bounceInRight { 0% { opacity: 0; -o-transform: translateX(2000px); } 60% { opacity: 1; -o-transform: translateX(-30px); } 80% { -o-transform: translateX(10px); } 100% { -o-transform: translateX(0); } } @keyframes bounceInRight { 0% { opacity: 0; transform: translateX(2000px); } 60% { opacity: 1; transform: translateX(-30px); } 80% { transform: translateX(10px); } 100% { transform: translateX(0); } } .animated.bounceInRight { -webkit-animation-name: bounceInRight; -moz-animation-name: bounceInRight; -o-animation-name: bounceInRight; animation-name: bounceInRight; } @-webkit-keyframes bounceOut { 0% { -webkit-transform: scale(1); } 25% { -webkit-transform: scale(.95); } 50% { opacity: 1; -webkit-transform: scale(1.1); } 100% { opacity: 0; -webkit-transform: scale(.3); } } @-moz-keyframes bounceOut { 0% { -moz-transform: scale(1); } 25% { -moz-transform: scale(.95); } 50% { opacity: 1; -moz-transform: scale(1.1); } 100% { opacity: 0; -moz-transform: scale(.3); } } @-o-keyframes bounceOut { 0% { -o-transform: scale(1); } 25% { -o-transform: scale(.95); } 50% { opacity: 1; -o-transform: scale(1.1); } 100% { opacity: 0; -o-transform: scale(.3); } } @keyframes bounceOut { 0% { transform: scale(1); } 25% { transform: scale(.95); } 50% { opacity: 1; transform: scale(1.1); } 100% { opacity: 0; transform: scale(.3); } } .animated.bounceOut { -webkit-animation-name: bounceOut; -moz-animation-name: bounceOut; -o-animation-name: bounceOut; animation-name: bounceOut; } @-webkit-keyframes bounceOutUp { 0% { -webkit-transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(20px); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); } } @-moz-keyframes bounceOutUp { 0% { -moz-transform: translateY(0); } 20% { opacity: 1; -moz-transform: translateY(20px); } 100% { opacity: 0; -moz-transform: translateY(-2000px); } } @-o-keyframes bounceOutUp { 0% { -o-transform: translateY(0); } 20% { opacity: 1; -o-transform: translateY(20px); } 100% { opacity: 0; -o-transform: translateY(-2000px); } } @keyframes bounceOutUp { 0% { transform: translateY(0); } 20% { opacity: 1; transform: translateY(20px); } 100% { opacity: 0; transform: translateY(-2000px); } } .animated.bounceOutUp { -webkit-animation-name: bounceOutUp; -moz-animation-name: bounceOutUp; -o-animation-name: bounceOutUp; animation-name: bounceOutUp; } @-webkit-keyframes bounceOutDown { 0% { -webkit-transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(-20px); } 100% { opacity: 0; -webkit-transform: translateY(2000px); } } @-moz-keyframes bounceOutDown { 0% { -moz-transform: translateY(0); } 20% { opacity: 1; -moz-transform: translateY(-20px); } 100% { opacity: 0; -moz-transform: translateY(2000px); } } @-o-keyframes bounceOutDown { 0% { -o-transform: translateY(0); } 20% { opacity: 1; -o-transform: translateY(-20px); } 100% { opacity: 0; -o-transform: translateY(2000px); } } @keyframes bounceOutDown { 0% { transform: translateY(0); } 20% { opacity: 1; transform: translateY(-20px); } 100% { opacity: 0; transform: translateY(2000px); } } .animated.bounceOutDown { -webkit-animation-name: bounceOutDown; -moz-animation-name: bounceOutDown; -o-animation-name: bounceOutDown; animation-name: bounceOutDown; } @-webkit-keyframes bounceOutLeft { 0% { -webkit-transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(20px); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); } } @-moz-keyframes bounceOutLeft { 0% { -moz-transform: translateX(0); } 20% { opacity: 1; -moz-transform: translateX(20px); } 100% { opacity: 0; -moz-transform: translateX(-2000px); } } @-o-keyframes bounceOutLeft { 0% { -o-transform: translateX(0); } 20% { opacity: 1; -o-transform: translateX(20px); } 100% { opacity: 0; -o-transform: translateX(-2000px); } } @keyframes bounceOutLeft { 0% { transform: translateX(0); } 20% { opacity: 1; transform: translateX(20px); } 100% { opacity: 0; transform: translateX(-2000px); } } .animated.bounceOutLeft { -webkit-animation-name: bounceOutLeft; -moz-animation-name: bounceOutLeft; -o-animation-name: bounceOutLeft; animation-name: bounceOutLeft; } @-webkit-keyframes bounceOutRight { 0% { -webkit-transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(-20px); } 100% { opacity: 0; -webkit-transform: translateX(2000px); } } @-moz-keyframes bounceOutRight { 0% { -moz-transform: translateX(0); } 20% { opacity: 1; -moz-transform: translateX(-20px); } 100% { opacity: 0; -moz-transform: translateX(2000px); } } @-o-keyframes bounceOutRight { 0% { -o-transform: translateX(0); } 20% { opacity: 1; -o-transform: translateX(-20px); } 100% { opacity: 0; -o-transform: translateX(2000px); } } @keyframes bounceOutRight { 0% { transform: translateX(0); } 20% { opacity: 1; transform: translateX(-20px); } 100% { opacity: 0; transform: translateX(2000px); } } .animated.bounceOutRight { -webkit-animation-name: bounceOutRight; -moz-animation-name: bounceOutRight; -o-animation-name: bounceOutRight; animation-name: bounceOutRight; } @-webkit-keyframes rotateIn { 0% { -webkit-transform-origin: center center; -webkit-transform: rotate(-200deg); opacity: 0; } 100% { -webkit-transform-origin: center center; -webkit-transform: rotate(0); opacity: 1; } } @-moz-keyframes rotateIn { 0% { -moz-transform-origin: center center; -moz-transform: rotate(-200deg); opacity: 0; } 100% { -moz-transform-origin: center center; -moz-transform: rotate(0); opacity: 1; } } @-o-keyframes rotateIn { 0% { -o-transform-origin: center center; -o-transform: rotate(-200deg); opacity: 0; } 100% { -o-transform-origin: center center; -o-transform: rotate(0); opacity: 1; } } @keyframes rotateIn { 0% { transform-origin: center center; transform: rotate(-200deg); opacity: 0; } 100% { transform-origin: center center; transform: rotate(0); opacity: 1; } } .animated.rotateIn { -webkit-animation-name: rotateIn; -moz-animation-name: rotateIn; -o-animation-name: rotateIn; animation-name: rotateIn; } @-webkit-keyframes rotateInUpLeft { 0% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(0); opacity: 1; } } @-moz-keyframes rotateInUpLeft { 0% { -moz-transform-origin: left bottom; -moz-transform: rotate(90deg); opacity: 0; } 100% { -moz-transform-origin: left bottom; -moz-transform: rotate(0); opacity: 1; } } @-o-keyframes rotateInUpLeft { 0% { -o-transform-origin: left bottom; -o-transform: rotate(90deg); opacity: 0; } 100% { -o-transform-origin: left bottom; -o-transform: rotate(0); opacity: 1; } } @keyframes rotateInUpLeft { 0% { transform-origin: left bottom; transform: rotate(90deg); opacity: 0; } 100% { transform-origin: left bottom; transform: rotate(0); opacity: 1; } } .animated.rotateInUpLeft { -webkit-animation-name: rotateInUpLeft; -moz-animation-name: rotateInUpLeft; -o-animation-name: rotateInUpLeft; animation-name: rotateInUpLeft; } @-webkit-keyframes rotateInDownLeft { 0% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(0); opacity: 1; } } @-moz-keyframes rotateInDownLeft { 0% { -moz-transform-origin: left bottom; -moz-transform: rotate(-90deg); opacity: 0; } 100% { -moz-transform-origin: left bottom; -moz-transform: rotate(0); opacity: 1; } } @-o-keyframes rotateInDownLeft { 0% { -o-transform-origin: left bottom; -o-transform: rotate(-90deg); opacity: 0; } 100% { -o-transform-origin: left bottom; -o-transform: rotate(0); opacity: 1; } } @keyframes rotateInDownLeft { 0% { transform-origin: left bottom; transform: rotate(-90deg); opacity: 0; } 100% { transform-origin: left bottom; transform: rotate(0); opacity: 1; } } .animated.rotateInDownLeft { -webkit-animation-name: rotateInDownLeft; -moz-animation-name: rotateInDownLeft; -o-animation-name: rotateInDownLeft; animation-name: rotateInDownLeft; } @-webkit-keyframes rotateInUpRight { 0% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(0); opacity: 1; } } @-moz-keyframes rotateInUpRight { 0% { -moz-transform-origin: right bottom; -moz-transform: rotate(-90deg); opacity: 0; } 100% { -moz-transform-origin: right bottom; -moz-transform: rotate(0); opacity: 1; } } @-o-keyframes rotateInUpRight { 0% { -o-transform-origin: right bottom; -o-transform: rotate(-90deg); opacity: 0; } 100% { -o-transform-origin: right bottom; -o-transform: rotate(0); opacity: 1; } } @keyframes rotateInUpRight { 0% { transform-origin: right bottom; transform: rotate(-90deg); opacity: 0; } 100% { transform-origin: right bottom; transform: rotate(0); opacity: 1; } } .animated.rotateInUpRight { -webkit-animation-name: rotateInUpRight; -moz-animation-name: rotateInUpRight; -o-animation-name: rotateInUpRight; animation-name: rotateInUpRight; } @-webkit-keyframes rotateInDownRight { 0% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(0); opacity: 1; } } @-moz-keyframes rotateInDownRight { 0% { -moz-transform-origin: right bottom; -moz-transform: rotate(90deg); opacity: 0; } 100% { -moz-transform-origin: right bottom; -moz-transform: rotate(0); opacity: 1; } } @-o-keyframes rotateInDownRight { 0% { -o-transform-origin: right bottom; -o-transform: rotate(90deg); opacity: 0; } 100% { -o-transform-origin: right bottom; -o-transform: rotate(0); opacity: 1; } } @keyframes rotateInDownRight { 0% { transform-origin: right bottom; transform: rotate(90deg); opacity: 0; } 100% { transform-origin: right bottom; transform: rotate(0); opacity: 1; } } .animated.rotateInDownRight { -webkit-animation-name: rotateInDownRight; -moz-animation-name: rotateInDownRight; -o-animation-name: rotateInDownRight; animation-name: rotateInDownRight; } @-webkit-keyframes rotateOut { 0% { -webkit-transform-origin: center center; -webkit-transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: center center; -webkit-transform: rotate(200deg); opacity: 0; } } @-moz-keyframes rotateOut { 0% { -moz-transform-origin: center center; -moz-transform: rotate(0); opacity: 1; } 100% { -moz-transform-origin: center center; -moz-transform: rotate(200deg); opacity: 0; } } @-o-keyframes rotateOut { 0% { -o-transform-origin: center center; -o-transform: rotate(0); opacity: 1; } 100% { -o-transform-origin: center center; -o-transform: rotate(200deg); opacity: 0; } } @keyframes rotateOut { 0% { transform-origin: center center; transform: rotate(0); opacity: 1; } 100% { transform-origin: center center; transform: rotate(200deg); opacity: 0; } } .animated.rotateOut { -webkit-animation-name: rotateOut; -moz-animation-name: rotateOut; -o-animation-name: rotateOut; animation-name: rotateOut; } @-webkit-keyframes rotateOutUpLeft { 0% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(-90deg); opacity: 0; } } @-moz-keyframes rotateOutUpLeft { 0% { -moz-transform-origin: left bottom; -moz-transform: rotate(0); opacity: 1; } 100% { -moz-transform-origin: left bottom; -moz-transform: rotate(-90deg); opacity: 0; } } @-o-keyframes rotateOutUpLeft { 0% { -o-transform-origin: left bottom; -o-transform: rotate(0); opacity: 1; } 100% { -o-transform-origin: left bottom; -o-transform: rotate(-90deg); opacity: 0; } } @keyframes rotateOutUpLeft { 0% { transform-origin: left bottom; transform: rotate(0); opacity: 1; } 100% { transform-origin: left bottom; transform: rotate(-90deg); opacity: 0; } } .animated.rotateOutUpLeft { -webkit-animation-name: rotateOutUpLeft; -moz-animation-name: rotateOutUpLeft; -o-animation-name: rotateOutUpLeft; animation-name: rotateOutUpLeft; } @-webkit-keyframes rotateOutDownLeft { 0% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(90deg); opacity: 0; } } @-moz-keyframes rotateOutDownLeft { 0% { -moz-transform-origin: left bottom; -moz-transform: rotate(0); opacity: 1; } 100% { -moz-transform-origin: left bottom; -moz-transform: rotate(90deg); opacity: 0; } } @-o-keyframes rotateOutDownLeft { 0% { -o-transform-origin: left bottom; -o-transform: rotate(0); opacity: 1; } 100% { -o-transform-origin: left bottom; -o-transform: rotate(90deg); opacity: 0; } } @keyframes rotateOutDownLeft { 0% { transform-origin: left bottom; transform: rotate(0); opacity: 1; } 100% { transform-origin: left bottom; transform: rotate(90deg); opacity: 0; } } .animated.rotateOutDownLeft { -webkit-animation-name: rotateOutDownLeft; -moz-animation-name: rotateOutDownLeft; -o-animation-name: rotateOutDownLeft; animation-name: rotateOutDownLeft; } @-webkit-keyframes rotateOutUpRight { 0% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(90deg); opacity: 0; } } @-moz-keyframes rotateOutUpRight { 0% { -moz-transform-origin: right bottom; -moz-transform: rotate(0); opacity: 1; } 100% { -moz-transform-origin: right bottom; -moz-transform: rotate(90deg); opacity: 0; } } @-o-keyframes rotateOutUpRight { 0% { -o-transform-origin: right bottom; -o-transform: rotate(0); opacity: 1; } 100% { -o-transform-origin: right bottom; -o-transform: rotate(90deg); opacity: 0; } } @keyframes rotateOutUpRight { 0% { transform-origin: right bottom; transform: rotate(0); opacity: 1; } 100% { transform-origin: right bottom; transform: rotate(90deg); opacity: 0; } } .animated.rotateOutUpRight { -webkit-animation-name: rotateOutUpRight; -moz-animation-name: rotateOutUpRight; -o-animation-name: rotateOutUpRight; animation-name: rotateOutUpRight; } @-webkit-keyframes rotateOutDownRight { 0% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(-90deg); opacity: 0; } } @-moz-keyframes rotateOutDownRight { 0% { -moz-transform-origin: right bottom; -moz-transform: rotate(0); opacity: 1; } 100% { -moz-transform-origin: right bottom; -moz-transform: rotate(-90deg); opacity: 0; } } @-o-keyframes rotateOutDownRight { 0% { -o-transform-origin: right bottom; -o-transform: rotate(0); opacity: 1; } 100% { -o-transform-origin: right bottom; -o-transform: rotate(-90deg); opacity: 0; } } @keyframes rotateOutDownRight { 0% { transform-origin: right bottom; transform: rotate(0); opacity: 1; } 100% { transform-origin: right bottom; transform: rotate(-90deg); opacity: 0; } } .animated.rotateOutDownRight { -webkit-animation-name: rotateOutDownRight; -moz-animation-name: rotateOutDownRight; -o-animation-name: rotateOutDownRight; animation-name: rotateOutDownRight; } @-webkit-keyframes hinge { 0% { -webkit-transform: rotate(0); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate(80deg); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; } 40% { -webkit-transform: rotate(60deg); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; } 80% { -webkit-transform: rotate(60deg) translateY(0); opacity: 1; -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; } 100% { -webkit-transform: translateY(700px); opacity: 0; } } @-moz-keyframes hinge { 0% { -moz-transform: rotate(0); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; } 20%, 60% { -moz-transform: rotate(80deg); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; } 40% { -moz-transform: rotate(60deg); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; } 80% { -moz-transform: rotate(60deg) translateY(0); opacity: 1; -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; } 100% { -moz-transform: translateY(700px); opacity: 0; } } @-o-keyframes hinge { 0% { -o-transform: rotate(0); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; } 20%, 60% { -o-transform: rotate(80deg); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; } 40% { -o-transform: rotate(60deg); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; } 80% { -o-transform: rotate(60deg) translateY(0); opacity: 1; -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; } 100% { -o-transform: translateY(700px); opacity: 0; } } @keyframes hinge { 0% { transform: rotate(0); transform-origin: top left; animation-timing-function: ease-in-out; } 20%, 60% { transform: rotate(80deg); transform-origin: top left; animation-timing-function: ease-in-out; } 40% { transform: rotate(60deg); transform-origin: top left; animation-timing-function: ease-in-out; } 80% { transform: rotate(60deg) translateY(0); opacity: 1; transform-origin: top left; animation-timing-function: ease-in-out; } 100% { transform: translateY(700px); opacity: 0; } } .animated.hinge { -webkit-animation-name: hinge; -moz-animation-name: hinge; -o-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); } 100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); } } @-moz-keyframes rollIn { 0% { opacity: 0; -moz-transform: translateX(-100%) rotate(-120deg); } 100% { opacity: 1; -moz-transform: translateX(0px) rotate(0deg); } } @-o-keyframes rollIn { 0% { opacity: 0; -o-transform: translateX(-100%) rotate(-120deg); } 100% { opacity: 1; -o-transform: translateX(0px) rotate(0deg); } } @keyframes rollIn { 0% { opacity: 0; transform: translateX(-100%) rotate(-120deg); } 100% { opacity: 1; transform: translateX(0px) rotate(0deg); } } .animated.rollIn { -webkit-animation-name: rollIn; -moz-animation-name: rollIn; -o-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); } 100% { opacity: 0; -webkit-transform: translateX(100%) rotate(120deg); } } @-moz-keyframes rollOut { 0% { opacity: 1; -moz-transform: translateX(0px) rotate(0deg); } 100% { opacity: 0; -moz-transform: translateX(100%) rotate(120deg); } } @-o-keyframes rollOut { 0% { opacity: 1; -o-transform: translateX(0px) rotate(0deg); } 100% { opacity: 0; -o-transform: translateX(100%) rotate(120deg); } } @keyframes rollOut { 0% { opacity: 1; transform: translateX(0px) rotate(0deg); } 100% { opacity: 0; transform: translateX(100%) rotate(120deg); } } .animated.rollOut { -webkit-animation-name: rollOut; -moz-animation-name: rollOut; -o-animation-name: rollOut; animation-name: rollOut; } /* originally authored by Angelo Rohit - https://github.com/angelorohit */ @-webkit-keyframes lightSpeedIn { 0% { -webkit-transform: translateX(100%) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: translateX(-20%) skewX(30deg); opacity: 1; } 80% { -webkit-transform: translateX(0%) skewX(-15deg); opacity: 1; } 100% { -webkit-transform: translateX(0%) skewX(0deg); opacity: 1; } } @-moz-keyframes lightSpeedIn { 0% { -moz-transform: translateX(100%) skewX(-30deg); opacity: 0; } 60% { -moz-transform: translateX(-20%) skewX(30deg); opacity: 1; } 80% { -moz-transform: translateX(0%) skewX(-15deg); opacity: 1; } 100% { -moz-transform: translateX(0%) skewX(0deg); opacity: 1; } } @-o-keyframes lightSpeedIn { 0% { -o-transform: translateX(100%) skewX(-30deg); opacity: 0; } 60% { -o-transform: translateX(-20%) skewX(30deg); opacity: 1; } 80% { -o-transform: translateX(0%) skewX(-15deg); opacity: 1; } 100% { -o-transform: translateX(0%) skewX(0deg); opacity: 1; } } @keyframes lightSpeedIn { 0% { transform: translateX(100%) skewX(-30deg); opacity: 0; } 60% { transform: translateX(-20%) skewX(30deg); opacity: 1; } 80% { transform: translateX(0%) skewX(-15deg); opacity: 1; } 100% { transform: translateX(0%) skewX(0deg); opacity: 1; } } .animated.lightSpeedIn { -webkit-animation-name: lightSpeedIn; -moz-animation-name: lightSpeedIn; -o-animation-name: lightSpeedIn; animation-name: lightSpeedIn; -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } .animated.lightSpeedIn { -webkit-animation-duration: 0.5s; -moz-animation-duration: 0.5s; -o-animation-duration: 0.5s; animation-duration: 0.5s; } /* originally authored by Angelo Rohit - https://github.com/angelorohit */ @-webkit-keyframes lightSpeedOut { 0% { -webkit-transform: translateX(0%) skewX(0deg); opacity: 1; } 100% { -webkit-transform: translateX(100%) skewX(-30deg); opacity: 0; } } @-moz-keyframes lightSpeedOut { 0% { -moz-transform: translateX(0%) skewX(0deg); opacity: 1; } 100% { -moz-transform: translateX(100%) skewX(-30deg); opacity: 0; } } @-o-keyframes lightSpeedOut { 0% { -o-transform: translateX(0%) skewX(0deg); opacity: 1; } 100% { -o-transform: translateX(100%) skewX(-30deg); opacity: 0; } } @keyframes lightSpeedOut { 0% { transform: translateX(0%) skewX(0deg); opacity: 1; } 100% { transform: translateX(100%) skewX(-30deg); opacity: 0; } } .animated.lightSpeedOut { -webkit-animation-name: lightSpeedOut; -moz-animation-name: lightSpeedOut; -o-animation-name: lightSpeedOut; animation-name: lightSpeedOut; -webkit-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; } .animated.lightSpeedOut { -webkit-animation-duration: 0.25s; -moz-animation-duration: 0.25s; -o-animation-duration: 0.25s; animation-duration: 0.25s; } /* @end */ @media only screen and (max-width: 3280px) { .titles { width: 72%; left: 26%; } #logobox { width: 1000px;} } @media only screen and (max-width: 1500px) { .titles { width: 68%; left: 30%; } #logobox { width: 900px;} } @media only screen and (max-width: 1280px) { .titles { width: 65%; left: 33%; } #logobox { width: 800px;} } @media only screen and (min-width: 868px) { /* Hide the toolbar on responsive simulation*/ /*#navcontainer2 { display: none !important; }*/ #logoresponsive {display: none;} } @media only screen and (max-width: 868px) { #logo { position: absolute; display: block; width: 160px; top: 0; left: 35px; } #logobox { width: auto;} #logo img { max-height:60px !important; max-width:160px !important; height: auto; overflow: auto; width: auto; display: block; position: absolute; top: 0; padding-top: 0; padding-bottom: 0; padding-right: 0; margin-left: auto; margin-top: 5px; margin-right: auto; right: 0; left: 0; } nav #menuToggle { left: -90px; top: 106px; border-style: solid; border-width: 10px; transition: all 0.18s linear; -moz-transition: all 0.18s linear; -webkit-transition: all 0.18s linear; -o-transition: all 0.18s linear; } nav:before { right: 23px; top: 164px; } #contentContainer #content { padding-top: 20px; } .titles { left: 0; width: 98%; } /* @group Navcontainer HIDE */ /* @end */ } @media only screen and (max-width: 700px) { /* @group FileSharing */ .filesharing-item { display: inline; margin: 2% 3% 20px 1%; width: 96%; } /* @end */ } @media only screen and (max-width: 600px) { #footer, #breadcrumbcontainer { float: none; text-align: center; padding: 5px 0 0; width: 96%; margin-left: 2%; } .tipsy { line-height: 22px; font-size: 15px; } .tipsy-inner {padding: 8px 8px 3px; } /* @group blog */ #blog-archives { line-height: 20px; float: left; width: 42%; } #blog-categories { float: left; width: 42%; } ul.blog-tag-cloud { float: left; width: 91%; } .blog-rss-link, .blog-comments-rss-link, .blog-rss-link, .blog-comments-rss-link { padding-left: 6%; } /* @end */ /* @group quicktime album */ .movie-thumbnail-frame { width: 90%; margin: 2% 6% 4.5% 4%; } .movie-thumbnail-caption { padding-top: 13px; padding-bottom: 5px; } /* @end */ } @media only screen and (max-width: 550px) { #logo { width: 140px; left: 25px; } #logo img { max-height:40px !important; max-width:140px !important; } .titles { } /*.title h1 { font-size: 32px; JFO*/ .title h1 { font-size: 130%; width: 220px; margin-left: 90px; padding-top: 15px; /* JFO 43px */ } .slogan h2 { font-size: 7px; /* JFO 19px */ width: 200px; margin-left: 110px; } } @media only screen and (max-width: 480px) { /*.title h1 { font-size: 32px !important; }*/ /* @group photo album */ .thumbnail-wrap { margin-bottom: 10%; } /* @end */ /* @group blog */ #blog-archives { width: 89%; } #blog-categories { width: 89%; } ul.blog-tag-cloud { width: 89%; } /* @end */ /* @group Sitemap */ .rw-sitemap { width: 98% !important; transition: all 0.18s linear; -moz-transition: all 0.18s linear; -webkit-transition: all 0.18s linear; -o-transition: all 0.18s linear; } /* @end */ } @media only screen and (max-width: 380px) { nav #menuToggle { left: -46px; top: 112px; border-style: solid; border-width: 10px; width: 34px; height: 34px; } nav:before { display: none !important; } } /* ----iphone 6 plus-- */ @media only screen and (min-device-width : 540px) and (max-device-width : 960px) { #parallax_body { top: 0px !important; } #bodyimage {position: fixed !important;} #parallax_titles { top: 0px !important; } } /* ----iphone 6--- */ @media only screen and (min-device-width : 375px) and (max-device-width : 667px) { #parallax_body { top: 0px !important; } #bodyimage {position: fixed !important;} #parallax_titles { top: 0px !important; } } /* ---iphone 5---- */ @media only screen and (min-device-width : 320px) and (max-device-width : 568px) { #parallax_body { top: 0px !important; } #bodyimage {position: fixed !important;} #parallax_titles { top: 0px !important; } } /* ---iphone 3-4---- */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { #parallax_body { top: 0px !important; } #bodyimage {position: fixed !important;} #parallax_titles { top: 0px !important; } } /* ---ipad ---- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { #parallax_body { top: 0px !important; } #bodyimage {position: fixed !important;} #parallax_titles { top: 0px !important; } } /* ---samsung---- */ @media only screen and (min-device-width : 600px) and (max-device-width : 1280px) and (orientation : landscape) { #parallax_body { top: 0px !important; } #bodyimage {position: fixed !important;} #parallax_titles { top: 0px !important; } } @media only screen and (min-device-width : 600px) and (max-device-width : 1280px) and (orientation : portrait) { #parallax_body { top: 0px !important; } #bodyimage {position: fixed !important;} #parallax_titles { top: 0px !important; } } /* ------- */