/* @group Settings Theme.js */ .settings { position: relative; display: none; } /* ------------- */ /* @group Plus Code 1_1 Awesome Font icon animated */ /* @group Social icons background - colored */ .fa-box-custom { background-color: #FFE913 !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; } /* ------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; border-top-right-radius:0.7em !important; -webkit-border-top-right-radius:0.7em !important; border-bottom-left-radius:0.7em !important; -webkit-border-bottom-left-radius:0.7em !important; border-bottom-right-radius:0.1em !important; -webkit-border-bottom-right-radius: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; -webkit-transition: all 0.25s ease-out; transition-delay: 23ms; -webkit-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; filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#fefffe', EndColorStr='#858585', GradientType=0); /* MSIE */ 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 !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-grey { background-color: #919191 !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-white { background-color: #f9f9f9 !important; 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 !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-blogger { background-color: #FF8833 !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-facebook { background-color: #3B5998 !important; border-radius: .1em; /* Prevent Webkit text rendering and also using slideshow*/ -webkit-transform: translateZ(0px); 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 !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-foursquare { background-color: #0072B1 !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-instagram { background-color: #4E433C !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-linkedin { background-color: #4875B4 !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-reddit { background-color: #CEE3F8 !important; 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 !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-github-alt { background-color: #e57300 !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-stumbleupon { background-color: #EB4924 !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-tumblr { background-color: #34526F !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-twitter { background-color: #00A0D1 !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-pagelines { background-color: #4f92b1 !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-vimeo-blue { background-color: #44BBFF !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-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; } /* @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 !important; margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; } .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; */ /* @end */ /* @group STYLES SILVER - For TEXT and ICONS ONLY */ /* ------ 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; filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#fefffe', EndColorStr='#858585', GradientType=0); /* MSIE */ } .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; filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#858585', EndColorStr='#fefffe', GradientType=0); /* MSIE */ } .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; filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#a6a6a6', EndColorStr='#5e5e5e', GradientType=0); /* MSIE */ } .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; filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#5e5e5e', EndColorStr='#a6a6a6', GradientType=0);/* MSIE */ } .fa-silver-dark, .fa-silver-dark q { background: -webkit-linear-gradient(#434343, #2d2d2d) !important; background: -o-linear-gradient(transparent, transparent);/* remove gradient in OPERA */ -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; color: #393939 !important; text-shadow: none !important; filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#434343', EndColorStr='#2d2d2d', GradientType=0); /* MSIE */ } .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; filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#2d2d2d', EndColorStr='#434343', GradientType=0); /* MSIE */ } /* @end */ /* @group STYLES GLOW - For TEXT and ICONS ONLY */ /* ------ GLOW FAMILY ------- */ /* ------ GLOW FIX ------- */ .fa-glow-black { color: #000 !important; text-shadow: #000 0 -2px 15px; filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=8); -webkit-filter: blur(3px); /* visible in modern browsers only */ } .fa-glow-white { color: #fefffe !important; text-shadow: #fefffe 0 -2px 15px; filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=8); -webkit-filter: blur(3px);/* visible in modern browsers only */ } /* ------ GLOW FIX ------- */ /* ------ GLOW - IN - ANIMATED ------- */ .fa-glow-black-in { color: #000 !important; text-shadow: #000 0 -2px 15px; filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=8); -webkit-filter: blur(3px); -webkit-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;} 30% {text-shadow: #2b2b2b 0 0px 0px;} 100% {text-shadow: #000 0 -2px 15px;} } @-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); } } .fa-glow-white-in { color: #fefffe !important; text-shadow: #fefffe 0 -2px 15px; filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=8); -webkit-filter: blur(3px); -webkit-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;} 30% {text-shadow: #efefef 0 0px 0px;} 100% {text-shadow: #fefffe 0 -2px 15px;} } @-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);} } /* ------ GLOW - IN - ANIMATED ------- */ /* ------ GLOW - OUT - ANIMATED ------- */ .fa-glow-black-out { color: #000 !important; text-shadow: #000 0 0px 0px; filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=0); -webkit-filter: blur(0px); -webkit-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; } 30% {text-shadow: #000 0 -1px 15px;} 100% {text-shadow: #000 0 0px 0px;} } @-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);} } .fa-glow-white-out { color: #fefffe !important; text-shadow: #efefef 0 0px 0px; -webkit-filter: blur(0px); -webkit-animation: glow-white-out 2.2s ease-in both !important; animation: glow-white-out 2.2s ease-in both !important; } @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);} } @-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);} } /* ------ GLOW FAMILY ------- */ /* @end */ /* @group STYLES SHADOW - For TEXT and ICONS ONLY */ /* 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 */ -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; } /* ------ icon shadow ------- */ .fa-shadow-white-thin {text-shadow: #dcdcdc 0 1px 2px; filter:progid:DXImageTransform.Microsoft.Shadow(color='white', Direction=180, Strength=2);} /* OLD IE */ .fa-shadow-white {text-shadow: #dcdcdc 0 2px 3px; filter:progid:DXImageTransform.Microsoft.Shadow(color='white', Direction=180, Strength=3);} .fa-shadow-white-big {text-shadow: #dcdcdc 0 3px 5px; filter:progid:DXImageTransform.Microsoft.Shadow(color='white', Direction=180, Strength=4);} .fa-shadow-black-thin {text-shadow: #2b2b2b 0 1px 2px; filter:progid:DXImageTransform.Microsoft.Shadow(color='black', Direction=180, Strength=2);} .fa-shadow-black {text-shadow: #2b2b2b 0 2px 3px; filter:progid:DXImageTransform.Microsoft.Shadow(color='black', Direction=180, Strength=3);} .fa-shadow-black-big {text-shadow: #2b2b2b 0 3px 6px; 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; margin-right: auto; margin-left: auto; -webkit-transform: translateZ(0px); -webkit-transform-style: preserve-3d; padding-right: 1px; padding-left: 1px; opacity: 1; -webkit-animation: slip 1.3s ease-in both !important; animation: slip 1.3s ease-in both !important; } @-webkit-keyframes slip { 0% {-webkit-transform: perspective(200px)rotateX(90deg) translateY(-50%); opacity: 0;} 70% {-webkit-transform: perspective(500px)rotateX(0deg) translateY(0px); opacity: 1;} 100% {-webkit-transform: perspective(600px) rotateX(0deg) translateY(0px); opacity: 1;} } @keyframes slip { 0% {opacity: 0; transform: perspective(200px) rotateX(90deg) rotateY(0deg) translateY(-50%);} 70% {opacity: 1; transform: perspective(500px) rotateX(0deg) rotateY(0deg) translateY(0px);} 100% {opacity: 1; transform: perspective(600px) rotateX(0deg) rotateY(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; -ms-animation: flip-y-200 2s ease-in both !important; margin-right: auto; margin-left: auto; padding-right: 1px; padding-left: 1px; opacity: 1; -webkit-transform: translateZ(0px); -webkit-transform-style: preserve-3d; -webkit-animation: flip-y-200 2s ease-in both !important; animation: flip-y-200 2s ease-in both !important; } @-webkit-keyframes flip-y-200 { 0% {-webkit-transform: perspective(3000px) rotateY(90deg); opacity: 0;} 30% {opacity: 0;} 100% {-webkit-transform: perspective(3000px) rotateY(0deg); opacity: 1;} } @keyframes flip-y-200 { 0% {opacity: 0;transform: perspective(3000px) rotateX(0deg) rotateY(90deg);} 30% {opacity: 0; } 100% { opacity: 1; -webkit-transform: perspective(2600px) rotateX(0deg) rotateY(0deg); } /*100% { opacity: 1; -webkit-transform: perspective(1600px) rotateX(0deg) rotateY(0deg); }*/ } /* -------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; padding-right: 1px; padding-left: 1px; margin-right: auto; margin-left: auto; opacity: 1; -webkit-transform: translateZ(0px); -webkit-transform-style: preserve-3d; -webkit-animation: flip-y-150 1.5s ease-in both !important; animation: flip-y-150 1.5s ease-in both !important; } @-webkit-keyframes flip-y-150 { 0% {-webkit-transform: perspective(3000px) rotateY(90deg); opacity: 0;} 30% {opacity: 0;} 100% {-webkit-transform: perspective(3000px) rotateY(0deg); opacity: 1;} } @keyframes flip-y-150 { 0% { opacity: 0; transform: perspective(3000px) rotateX(0deg) rotateY(90deg);} 30% { opacity: 0;} 100% { opacity: 1; transform: perspective(3000px) rotateX(0deg) rotateY(0deg);} } /* -------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; padding-right: 1px; padding-left: 1px; margin-right: auto; margin-left: auto; opacity: 1; -webkit-transform: translateZ(0px); -webkit-transform-style: preserve-3d; -webkit-animation: flip-y-100 1s ease-in both !important; animation: flip-y-100 1s ease-in both !important; } @-webkit-keyframes flip-y-100 { 0% {-webkit-transform: perspective(3000px)rotateY(90deg); opacity: 0;} 30% {opacity: 0;} 100% {-webkit-transform: perspective(3000px) rotateY(0deg); opacity: 1;} } @keyframes flip-y-100 { 0% {opacity: 0; transform: perspective(3000px) rotateX(0deg) rotateY(90deg);} 30% {opacity: 0;} 100% {opacity: 1; transform: perspective(3000px) rotateX(0deg) rotateY(0deg);} } /* -------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; padding-right: 1px; padding-left: 1px; margin-right: auto; margin-left: auto; opacity: 1; -webkit-transform: translateZ(0px); -webkit-transform-style: preserve-3d; -webkit-animation: flip-y-50 0.5s ease-in both !important; animation: flip-y-50 0.5s ease-in both !important; } @-webkit-keyframes flip-y-50 { 0% {-webkit-transform: perspective(3000px)rotateY(90deg); opacity: 0;} 30% {opacity: 0;} 100% {-webkit-transform: perspective(3000px) rotateY(0deg); opacity: 1;} } @keyframes flip-y-50 { 0% {opacity: 0; transform: perspective(3000px) rotateX(0deg) rotateY(90deg);} 30% { opacity: 0;} 100% { opacity: 1; transform: perspective(3000px) rotateX(0deg) rotateY(0deg);} } /* -------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; margin-right: auto; margin-left: auto; opacity: 1; -webkit-transform: translateZ(0px); -webkit-transform-style: preserve-3d; -webkit-animation: flip-x-200 2s ease-in both !important; animation: flip-x-200 2s ease-in both !important; } @-webkit-keyframes flip-x-200 { 0% {-webkit-transform: perspective(600px)rotateX(90deg); opacity: 0;} 30% {opacity: 0;} 100% {-webkit-transform: perspective(600px) rotateX(0deg); opacity: 1;} } @keyframes flip-x-200 { 0% { opacity: 0; transform: perspective(600px) rotateX(90deg) rotateY(0deg);} 30% {opacity: 0;} 100% {opacity: 1; transform: perspective(600px) rotateX(0deg) rotateY(0deg);} } /* -------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; margin-right: auto; margin-left: auto; opacity: 1; -webkit-transform: translateZ(0px); -webkit-transform-style: preserve-3d; -webkit-animation: flip-x-150 1.5s ease-in both !important; animation: flip-x-150 1.5s ease-in both !important; } @-webkit-keyframes flip-x-150 { 0% {-webkit-transform: perspective(600px)rotateX(90deg); opacity: 0;} 27% {opacity: 0;} 100% {-webkit-transform: perspective(600px) rotateX(0deg); opacity: 1;} } @keyframes flip-x-150 { 0% {opacity: 0; transform: perspective(600px) rotateX(90deg) rotateY(0deg);} 27% {opacity: 0;} 100% {opacity: 1; transform: perspective(600px) rotateX(0deg) rotateY(0deg);} } /* -------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; margin-right: auto; margin-left: auto; opacity: 1; -webkit-transform: translateZ(0px); -webkit-transform-style: preserve-3d; -webkit-animation: flip-x-100 1s ease-in both !important; animation: flip-x-100 1s ease-in both !important; } @-webkit-keyframes flip-x-100 { 0% {-webkit-transform: perspective(600px)rotateX(90deg); opacity: 0;} 25% {opacity: 0;} 100% {-webkit-transform: perspective(600px) rotateX(0deg); opacity: 1;} } @keyframes flip-x-100 { 0% {opacity: 0; transform: perspective(600px) rotateX(90deg) rotateY(0deg); } 25% {opacity: 0;} 100% {opacity: 1; transform: perspective(600px) rotateX(0deg) rotateY(0deg);} } /* -------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; margin-right: auto; margin-left: auto; opacity: 1; -webkit-transform: translateZ(0px); -webkit-transform-style: preserve-3d; -webkit-animation: flip-x-50 0.5s ease-in both !important; animation: flip-x-50 0.5s ease-in both !important; } @-webkit-keyframes flip-x-50 { 0% {-webkit-transform: perspective(600px)rotateX(90deg); opacity: 0;} 10% {opacity: 0;} 100% {-webkit-transform: perspective(600px) rotateX(0deg); opacity: 1;} } @keyframes flip-x-50 {0% {opacity: 0; transform: perspective(600px) rotateX(90deg) rotateY(0deg);} 10% {opacity: 0;} 100% {opacity: 1; transform: perspective(600px) rotateX(0deg) rotateY(0deg);} } /* @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; 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); } 45%{ transform: translateY(-50px); } 75%{ opacity:0; } 100%{ opacity:1; 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; 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); } 45%{ transform: translateY(50px); } 75%{ opacity:0; } 100%{ opacity:1; 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; 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);} 45%{ transform: translateX(-50px); } 75%{ opacity:0; } 100%{ opacity:1; 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; 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); } 45%{ transform: translateX(50px); } 75%{ opacity:0; } 100%{ opacity:1; 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; animation: fade-250 2.5s ease-in both !important; } @-webkit-keyframes fade-250 { 0% {opacity: 0;} 35% {opacity: 0;} 100% {opacity: 1;} } @keyframes fade-250 { 0% {opacity: 0;} 35% {opacity: 0;} 100% {opacity: 1;} } /* ------ fade-200 ------- */ .fa-fade-200 { -webkit-animation: fade-200 2s ease-in both !important; animation: fade-200 2s ease-in both !important; } @-webkit-keyframes fade-200 { 0% {opacity: 0;} 35% {opacity: 0;} 100% {opacity: 1;} } @keyframes fade-200 { 0% {opacity: 0;} 35% {opacity: 0;} 100% {opacity: 1;} } /* ------ fade-150 ------- */ .fa-fade-150 { -webkit-animation: fade-150 1.5s ease-in both !important; animation: fade-150 1.5s ease-in both !important; } @-webkit-keyframes fade-150 { 0% {opacity: 0;} 35% {opacity: 0;} 100% {opacity: 1;} } @keyframes fade-150 { 0% {opacity: 0;} 35% {opacity: 0;} 100% {opacity: 1;} } /* ------ fade-100 ------- */ .fa-fade-100 { -webkit-animation: fade-100 1s ease-in both !important; animation: fade-100 1s ease-in both !important; } @-webkit-keyframes fade-100 { 0% {opacity: 0;} 35% {opacity: 0;} 100% {opacity: 1;} } @keyframes fade-100 { 0% {opacity: 0;} 35% {opacity: 0;} 100% {opacity: 1;} } /* ------ fade-75 ------- */ .fa-fade-75 { -webkit-animation: fade-75 0.75s ease-in both !important; animation: fade-75 0.75s ease-in both !important; } @-webkit-keyframes fade-75 { 0% {opacity: 0;} 35% {opacity: 0;} 100% {opacity: 1;} } @keyframes fade-75 { 0% {opacity: 0;} 35% {opacity: 0;} 100% {opacity: 1;} } /* ------ fade-50 ------- */ .fa-fade-50 { -webkit-animation: fade-50 0.50s ease-in both !important; animation: fade-50 0.50s ease-in both !important; } @-webkit-keyframes fade-50 { 0% {opacity: 0;} 35% {opacity: 0;} 100% {opacity: 1;} } @keyframes fade-50 { 0% {opacity: 0;} 35% {opacity: 0;} 100% {opacity: 1;} } /* @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; animation: beat 1.6s linear both !important; -webkit-transform: translateZ(0px); -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);} } /* ------ icon - beat ------- */ /* @end */ /* @group TRANSFORM BEAT - FAST */ .fa-beat-fast { display: inline-block; vertical-align: baseline; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; -webkit-animation: beat-fast 0.4s linear both !important; animation: beat-fast 0.4s linear both !important; -webkit-transform: translateZ(0px); -webkit-transform-style: preserve-3d; padding: 1px; overflow: visible; } @keyframes beat-fast { 0% {transform: scale(1);} 20% {transform: scale(0.8);} 100% {transform: scale(1);} } @-webkit-keyframes beat-fast { 0% {-webkit-transform: scale(1);} 20% {-webkit-transform: scale(0.8);} 100% {-webkit-transform: scale(1);} } /* ------ icon - beat fast ------- */ /* @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-transform: translateZ(0px); -webkit-transform-style: preserve-3d; opacity: 1; padding: 1px; overflow: visible; -webkit-animation: scale 1.4s ease-out both !important; animation: scale 1.4s ease-out both !important; } @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;} } /* ---- end ----- */ .fa-scale-inverse { display: inline-block; vertical-align: baseline; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; opacity: 1; -webkit-transform: translateZ(0px); -webkit-transform-style: preserve-3d; padding: 1px; overflow: visible; -webkit-animation: scale-inverse 1.4s ease-out both !important; animation: scale-inverse 1.4s ease-out both !important; } @keyframes scale-inverse { 0% {opacity: 0; transform: scale(1.3);} 30% {transform: scale(1.3);} 50% {opacity: 0;} 100% {opacity: 1; transform: scale(1.0);} } @-webkit-keyframes scale-inverse { 0% {opacity: 0; -webkit-transform: scale(1.3);} 30% {opacity: 0; -webkit-transform: scale(1.3);} 50% {opacity: 0;} 100% {opacity: 1; -webkit-transform: scale(1.0);} } /* @end */ /* @group TRANSFORM 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-transform: translateZ(0px); -webkit-transform-style: preserve-3d; padding: 1px; overflow: visible; -webkit-animation: spin-360 1.9s ease-out both !important; animation: spin-360 1.9s ease-out both !important; } @-webkit-keyframes spin-360 { 0% {-webkit-transform: rotate(359deg);} 100%{-webkit-transform: rotate(0deg);} } @keyframes spin-360 { 0% {transform: rotate(359deg);} 100% {transform: rotate(0deg);} } /* ------ 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-transform: translateZ(0px); -webkit-transform-style: preserve-3d; padding: 1px; overflow: visible; -webkit-animation: spin-180 1.9s ease-out both !important; animation: spin-180 1.9s ease-out both !important; } @-webkit-keyframes spin-180 { 0% {-webkit-transform: rotate(180deg);} 100% {-webkit-transform: rotate(0deg);} } @keyframes spin-180 { 0% {transform: rotate(180deg);} 100% {transform: rotate(0deg);} } /* ------ 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-transform: translateZ(0px); -webkit-transform-style: preserve-3d; padding: 1px; overflow: visible; -webkit-animation: spin-90 1.9s ease-out both !important; animation: spin-90 1.9s ease-out both !important; } @-webkit-keyframes spin-90 { 0% {-webkit-transform: rotate(90deg);} 100% {-webkit-transform: rotate(0deg);} } @keyframes spin-90 { 0% {transform: rotate(90deg);} 100% {transform: rotate(0deg);} } /* ------ 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-transform: translateZ(0px); -webkit-transform-style: preserve-3d; padding: 1px; overflow: visible; -webkit-animation: spin-80 1.9s ease-out both !important; animation: spin-80 1.9s ease-out both !important; } @-webkit-keyframes spin-80 { 0% {-webkit-transform: rotate(80deg);} 100% {-webkit-transform: rotate(0deg);} } @keyframes spin-80 { 0% {transform: rotate(80deg);} 100% {transform: rotate(0deg);} } /* ------ 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-transform: translateZ(0px); -webkit-transform-style: preserve-3d; padding: 1px; overflow: visible; -webkit-animation: spin-70 1.9s ease-out both !important; animation: spin-70 1.9s ease-out both !important; } @-webkit-keyframes spin-70 { 0% {-webkit-transform: rotate(80deg);} 100% {-webkit-transform: rotate(0deg);} } @keyframes spin-70 { 0% {transform: rotate(80deg);} 100% {transform: rotate(0deg);} } /* ------ SPIN ROTATE 60 ------- */ .fa-spin-70 { display: inline-block; vertical-align: baseline; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; -webkit-transform: translateZ(0px); -webkit-transform-style: preserve-3d; padding: 1px; overflow: visible; -webkit-animation: spin-70 1.9s ease-out both !important; animation: spin-70 1.9s ease-out both !important; } @-webkit-keyframes spin-70 { 0% {-webkit-transform: rotate(80deg);} 100% {-webkit-transform: rotate(0deg);} } @keyframes spin-70 { 0% {transform: rotate(80deg);} 100% {transform: rotate(0deg);} } /* ------ 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-transform: translateZ(0px); -webkit-transform-style: preserve-3d; padding: 1px; overflow: visible; -webkit-animation: spin-50 1.9s ease-out both !important; animation: spin-50 1.9s ease-out both !important; } @-webkit-keyframes spin-50 { 0% {-webkit-transform: rotate(80deg);} 100% {-webkit-transform: rotate(0deg);} } @keyframes spin-50 { 0% {transform: rotate(80deg);} 100% {transform: rotate(0deg);} } /* ------ 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-transform: translateZ(0px); -webkit-transform-style: preserve-3d; padding: 1px; overflow: visible; -webkit-animation: spin-45 1.9s ease-out both !important; animation: spin-45 1.9s ease-out both !important; } @-webkit-keyframes spin-45 { 0% {-webkit-transform: rotate(80deg);} 100% {-webkit-transform: rotate(0deg);} } @keyframes spin-45 { 0% {transform: rotate(80deg);} 100% {transform: rotate(0deg);} } /* ------ 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-transform: translateZ(0px); -webkit-transform-style: preserve-3d; padding: 1px; overflow: visible; -webkit-animation: spin-40 1.9s ease-out both !important; animation: spin-40 1.9s ease-out both !important; } @-webkit-keyframes spin-40 { 0% {-webkit-transform: rotate(80deg);} 100% {-webkit-transform: rotate(0deg);} } @keyframes spin-40 { 0% {transform: rotate(80deg);} 100% {transform: rotate(0deg);} } /* ------ 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-transform: translateZ(0px); -webkit-transform-style: preserve-3d; padding: 1px; overflow: visible; -webkit-animation: spin-30 1.9s ease-out both !important; animation: spin-30 1.9s ease-out both !important; } @-webkit-keyframes spin-30 { 0% {-webkit-transform: rotate(80deg);} 100% {-webkit-transform: rotate(0deg);} } @keyframes spin-30 { 0% {transform: rotate(80deg);} 100% {transform: rotate(0deg);} } /* ------ 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-transform: translateZ(0px); -webkit-transform-style: preserve-3d; padding: 1px; overflow: visible; -webkit-animation: spin-20 1.9s ease-out both !important; animation: spin-20 1.9s ease-out both !important; } @-webkit-keyframes spin-20 { 0% {-webkit-transform: rotate(80deg);} 100% {-webkit-transform: rotate(0deg);} } @keyframes spin-20 { 0% {transform: rotate(80deg);} 100% {transform: rotate(0deg);} } /* ------ SPIN ROTATE 10 ------- */ .fa-spin-10 { display: inline-block; vertical-align: baseline; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; -webkit-transform: translateZ(0px); -webkit-transform-style: preserve-3d; padding: 1px; overflow: visible; -webkit-animation: spin-10 1.9s ease-out both !important; animation: spin-10 1.9s ease-out both !important; } @-webkit-keyframes spin-10 { 0% {-webkit-transform: rotate(80deg);} 100% {-webkit-transform: rotate(0deg);} } @keyframes spin-10 { 0% {transform: rotate(80deg);} 100% {transform: rotate(0deg);} } /* @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; opacity: 1; -webkit-transform: translateZ(0px); -webkit-transform-style: preserve-3d; overflow: visible; padding: 1px; -webkit-animation: rock 1.7s ease-in-out both !important; animation: rock 1.7s ease-in-out both !important; } @-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);} } @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; overflow: visible; -webkit-animation: dangles 1.3s ease-out both !important; animation: dangles 1.3s ease-out both !important; } @-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);} } @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; 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;} } /* ------ 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; /* ------ don't add code to prevent issues in the linnkd with FA------- */ -webkit-animation: pulse-loop 2.9s linear; animation: pulse-loop 2.9s linear; -webkit-animation-iteration-count: 11; animation-iteration-count: 11; } @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;} } /* ------ pulse INFINITE------- */ /* @end */ /* @group MAX HEIGHT - For TEXT and ICONS ONLY */ /* ------ MAX 300 PIXEL ------- */ .fa-max-300 {font-size: 300px; margin: 0; padding: 0; line-height: 0.9em;} @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 - 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 - 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 - 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 - 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 - 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 - 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 - 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 - 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 - 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 - 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 - 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 - 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 - 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 - 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 - 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 - 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 - 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 - 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 - 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 - 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 - 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 - 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 - 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 - 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 */ /* @group SWAP */ .fa-swap { /* vertical */ -webkit-animation: swap-vertical 0.45s ease-in-out both !important; animation: swap-vertical 0.45s ease-out both !important; -webkit-animation-fill-mode: both; animation-fill-mode: both; overflow: hidden !important; } @keyframes swap-vertical { 0%{ transform: translateY(0px); opacity: 1;} 18%{transform: translateY(20px);opacity: 0.15;} 20%{opacity: 0.2; } 50%{ transform: translateY(60px);} 51%{ transform: translateY(-80px); opacity: 0.0;} 52%{ transform: translateY(-40px); opacity: 0.0;} 58%{ transform: translateY(-10px); opacity: 0.6;} 70%{ transform: translateY(15px); opacity: 1;} 100%{ transform: translateY(0px); opacity: 1;} } @-webkit-keyframes swap-vertical { 0%{ -webkit-transform: translateY(0px); opacity: 1;} 18%{-webkit-transform: translateY(20px);opacity: 0.15;} 20%{opacity: 0.2; } 50%{ -webkit-transform: translateY(60px);} 51%{ -webkit-transform: translateY(-80px); opacity: 0.0;} 52%{ -webkit-transform: translateY(-40px); opacity: 0.0;} 58%{ -webkit-transform: translateY(-10px); opacity: 0.6;} 70%{ -webkit-transform: translateY(15px); opacity: 1;} 100%{ -webkit-transform: translateY(0px); opacity: 1;} } .fa-swap-horizontal { -webkit-animation: swap-horizontal 0.45s ease-in-out both !important; animation: swap-horizontal 0.45s ease-out both !important; -webkit-animation-fill-mode: both; animation-fill-mode: both; overflow: hidden !important; } @keyframes swap-horizontal { 0%{ transform: translateX(0px); opacity: 1;} 18%{transform: translateX(20px);opacity: 0.15;} 20%{opacity: 0.2; } 50%{ transform: translateX(60px);} 51%{ transform: translateX(-80px); opacity: 0.0;} 52%{ transform: translateX(-40px); opacity: 0.0;} 58%{ transform: translateX(-10px); opacity: 0.6;} 70%{ transform: translateX(15px); opacity: 1;} 100%{ transform: translateX(0px); opacity: 1;} } @-webkit-keyframes swap-horizontal { 0%{ -webkit-transform: translateX(0px); opacity: 1;} 18%{-webkit-transform: translateX(20px);opacity: 0.15;} 20%{opacity: 0.2; } 50%{ -webkit-transform: translateX(60px);} 51%{ -webkit-transform: translateX(-80px); opacity: 0.0;} 52%{ -webkit-transform: translateX(-40px); opacity: 0.0;} 58%{ -webkit-transform: translateX(-10px); opacity: 0.6;} 70%{ -webkit-transform: translateX(15px); opacity: 1;} 100%{ -webkit-transform: translateX(0px); opacity: 1;} } /* END */ /* pinch fa-pinch inverse ( for buttons ) */ .fa-pinch { display: inline-block; vertical-align: baseline; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; -webkit-transform: translateZ(0px); -webkit-transform-style: preserve-3d; opacity: 1; padding: 1px; overflow: visible; -webkit-animation: pinch 0.55s ease-out both !important; animation: pinch 0.55s ease-out both !important; } /* @end */ /* @group PINCH */ @keyframes pinch { 0% {opacity: 1; transform: scale(1.0) translateX(0) translatey(0);} 25% {opacity: 0.5; transform: scale(0.5) translateX(0) translatey(0);} 33% {opacity: 0; transform: scale(0.0) translateX(0) translatey(0);} 35% {opacity: 0; transform: scale(0.0) translateX(0) translatey(0);} 40% {opacity: 0.0; transform: scale(1.7) translateX(0) translatey(0);} 50% {opacity: 0.2;} 70% {opacity: 0.9;} 100% {opacity: 1; transform: scale(1.0) translateX(0) translatey(0);} } @-webkit-keyframes pinch { 0% {opacity: 1; -webkit-transform: scale(1.0) translateX(0) translatey(0);} 25% {opacity: 0.5; -webkit-transform: scale(0.5) translateX(0) translatey(0);} 33% {opacity: 0; -webkit-transform: scale(0.0) translateX(0) translatey(0);} 35% {opacity: 0; -webkit-transform: scale(0.0) translateX(0) translatey(0);} 40% {opacity: 0.0; -webkit-transform: scale(1.7) translateX(0) translatey(0);} 50% {opacity: 0.2;} 70% {opacity: 0.9;} 100% {opacity: 1; -webkit-transform: scale(1.0) translateX(0) translatey(0);} } .fa-pinch-inverse { display: inline-block; vertical-align: baseline; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0;margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; -webkit-transform: translateZ(0px); -webkit-transform-style: preserve-3d; opacity: 1; padding: 1px; overflow: visible; -webkit-animation: pinch-inverse 0.55s ease-out both !important; animation: pinch-inverse 0.55s ease-out both !important; } @keyframes pinch-inverse { 100% {opacity: 1; transform: scale(1.0) translateX(0) translatey(0);} 70% {opacity: 0.5; transform: scale(0.5) translateX(0) translatey(0);} 50% {opacity: 0; transform: scale(0.0) translateX(0) translatey(0);} 40% {opacity: 0; transform: scale(0.0) translateX(0) translatey(0);} 35% {opacity: 0.0; transform: scale(1.7) translateX(0) translatey(0);} 33% {opacity: 0.2;} 25% {opacity: 0.9;} 0% {opacity: 1; transform: scale(1.0) translateX(0) translatey(0);} } @-webkit-keyframes pinch-inverse { 100% {opacity: 1; -webkit-transform: scale(1.0) translateX(0) translatey(0);} 70% {opacity: 0.5; -webkit-transform: scale(0.5) translateX(0) translatey(0);} 50% {opacity: 0; -webkit-transform: scale(0.0) translateX(0) translatey(0);} 40% {opacity: 0; -webkit-transform: scale(0.0) translateX(0) translatey(0);} 35% {opacity: 0.0; -webkit-transform: scale(1.7) translateX(0) translatey(0);} 33% {opacity: 0.2;} 25% {opacity: 0.9;} 0% {opacity: 1; -webkit-transform: scale(1.0) translateX(0) translatey(0);} } /* @end */ /* @group BLURRED */ /* --- BLUR BLURRED--- */ .fa-blurred { filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=0); -webkit-filter: blur(0px); -webkit-animation: blurred 0.8s ease-in both !important; animation: blurred 0.8s ease-in both !important; -ms-animation: blurred 0.8s ease-in both !important; } @keyframes blurred{ 0% {filter: blur(0px); -webkit-filter: blur(0px);} 20% {filter: blur(3px); -webkit-filter: blur(3px);} 100% {filter: blur(0px); -webkit-filter: blur(0px);} } @-webkit-keyframes blurred{ 0% {-webkit-filter: blur(0px);} 20% {-webkit-filter: blur(3px);} 100% {-webkit-filter: blur(0px);} } /* @end */ /* @group FLIPPED */ .fa-flipped { /* vertical */ display: inline-block; vertical-align: baseline; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; margin-right: auto; margin-left: auto; -webkit-transform: translateZ(0px); -webkit-transform-style: preserve-3d; -webkit-animation: flipped-y 1s ease-in-out both !important; animation: flipped-y 1s ease-in-out both !important; } @-webkit-keyframes flipped-y { 0% {-webkit-transform: perspective(3000px)rotateY(0deg);} 100% {-webkit-transform: perspective(3000px) rotateY(360deg);} } @keyframes flipped-y { 0% {transform: perspective(3000px) rotateY(00deg) rotateX(0deg);} 100% {transform: perspective(3000px) rotateY(360deg) rotateX(0deg);} } .fa-flipped-horizontal { display: inline-block; vertical-align: baseline; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; margin-right: auto; margin-left: auto; -webkit-transform: translateZ(0px); -webkit-transform-style: preserve-3d; -webkit-animation: flipped-x 1s ease-in-out both !important; animation: flipped-x 1s ease-in-out both !important; } @-webkit-keyframes flipped-x { 0% {-webkit-transform: perspective(3000px)rotateX(0deg);} 100% {-webkit-transform: perspective(3000px) rotateX(360deg);} } @keyframes flipped-x { 0% {transform: perspective(3000px) rotateX(00deg) rotateY(0deg);} 100% {transform: perspective(3000px) rotateX(360deg) rotateY(0deg);} } /* @end */ /* @group BOUNCE - center */ .fa-bounce { -webkit-animation-name: fa-bounce-center ; animation-name: fa-bounce-center ; -webkit-animation-duration: 0.90s; animation-duration: 0.90s; } @-webkit-keyframes fa-bounce-center {from, 20%, 40%, 60%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.230, 0.670, 0.390, 1.300); animation-timing-function: cubic-bezier(0.230, 0.670, 0.390, 1.300);} 0% { opacity: 0; -webkit-transform: scale3d(.4, .4, .4); transform: scale3d(.4, .4, .4); } 20% { -webkit-transform: scale3d(1.14, 1.14, 1.14); transform: scale3d(1.14, 1.14, 1.14); } 40% { -webkit-transform: scale3d(.8, .8, .8); transform: scale3d(.8, .8, .8); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(.95, .95, .95); transform: scale3d(.95, .95, .95); } to {opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes fa-bounce-center { from, 20%, 40%, 60%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.230, 0.670, 0.390, 1.300); animation-timing-function: cubic-bezier(0.230, 0.670, 0.390, 1.300);} 0% { opacity: 0; -webkit-transform: scale3d(.4, .4, .4); transform: scale3d(.4, .4, .4);} 20% { -webkit-transform: scale3d(1.14, 1.14, 1.14); transform: scale3d(1.14, 1.14, 1.14); } 40% { -webkit-transform: scale3d(.8, .8, .8); transform: scale3d(.8, .8, .8); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(.95, .95, .95); transform: scale3d(.95, .95, .95); } to { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } /* @end */ /* @group ENLARGE - REDUCE - Buttons States */ /* ------ icon - zoom ------- */ .fa-reduce { /*display: inline-block; vertical-align: baseline;*/ -webkit-transform: translateZ(0px); -webkit-transform-style: preserve-3d; overflow: visible; -webkit-animation: reduce 0.20s ease-in both !important; animation: reduce 0.20s ease-in both !important; } @keyframes reduce { 0% {transform: scale(1);} 100% {transform: scale(0.9);} } @-webkit-keyframes reduce { 0% {-webkit-transform: scale(1);} 100% {-webkit-transform: scale(0.9);} } /* ---- end ----- */ .fa-enlarge { /*display: inline-block; vertical-align: baseline; */ -webkit-transform: translateZ(0px); -webkit-transform-style: preserve-3d; overflow: visible; -webkit-animation: enlarge 0.25s ease-out both !important; animation: enlarge 0.25s ease-out both !important; } @keyframes enlarge { 0% {transform: scale(0.9) translateX(0) translatey(0);} 100% {transform: scale(1.0) translateX(0) translatey(0);} } @-webkit-keyframes enlarge { 0% {-webkit-transform: scale(0.9) translateX(0) translatey(0);} 100% {-webkit-transform: scale(1.0) translateX(0) translatey(0);} } /* @end */ /* @end */ /* ------------- */ /* @end */ #hello { } @media only screen and (min-width: 868px) { /* Hide the toolbar on responsive simulation*/ #navcontainer2 { display: none !important; } } #hello { } /* ------- */ @media only screen and (max-width: 868px) { #drop { top: -48px; } #drop.boxopened:after, #drop:after { border-left-style: solid; border-left-width: 2px; padding: 16px 13px 12px; border-top-style: solid; border-top-width: 2px; border-right-style: solid; border-right-width: 2px; border-top-left-radius:15px; -webkit-border-top-left-radius:15px; -moz-border-radius-topleft:15px; border-top-right-radius:15px; -webkit-border-top-right-radius:15px; -moz-border-radius-topright:15px; border-bottom-left-radius:0px; -webkit-border-bottom-left-radius:0px; -moz-border-radius-bottomleft:0px; border-bottom-right-radius:0px; -webkit-border-bottom-right-radius:0px; -moz-border-radius-bottomright:0px; } #contentContainer { border-top-width: 2px; border-top-style: solid; } #contentContainer #content { padding-top: 20px; } .titles { left: 0; width: 100%; } #navigation_position { top: 1px !important; } /*#pageHeader {padding-top: 45px;}*/ #nav_button { display: block; transition: all 0s linear; -webkit-transition: All 0s linear; -moz-transition: All 0s linear; } /* @group Navcontainer HIDE */ #topnav { padding-top: 0 !important; padding-bottom: 0 !important; transition: all 0s linear; } .parent:after {display: none;} #navcontainer {display: none;} #navcontainer a { display: none; opacity: 0.34; } /* @end */ #navcontainer2 { display: none;} #navcontainer2 ul ul{ min-width: 200px; min-width: auto !important; } } @media only screen and (max-width: 600px) { .title h1 { font-size: 45px !important; } .slogan h2 { font-size: 22px !important; } #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 FileSharing */ .filesharing-item { display: inline; margin: 2% 3% 20px 1%; width: 96%; } /* @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: 500px) { #navcontainer2 { width: 90%; margin-right: 3%; margin-left: 3%; padding-right: 2%; padding-left: 2%; } #pageHeader img { max-width:295px !important; height: auto !important; } } @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; } /* @end */ } @media only screen and (max-width: 320px) { #navcontainer2 { width: 96%; margin-right: 0; margin-left: 0; border-radius: 0px !important; -moz-border-radius: 0px !important; -webkit-border-radius: 0px !important; padding-right: 2%; padding-left: 2%; } } /* ----mobile-- */ @media only screen and (min-device-width : 540px) and (max-device-width : 960px) { #parallax_body { top: 0px !important; } #bodyimage, #bodyimage2{position: fixed !important;} #parallax_titles { top: 0px !important; } } @media only screen and (min-device-width : 375px) and (max-device-width : 667px) { #parallax_body { top: 0px !important; } #bodyimage, #bodyimage2{position: fixed !important;} #parallax_titles { top: 0px !important; } } @media only screen and (min-device-width : 320px) and (max-device-width : 568px) { #parallax_body { top: 0px !important; } #bodyimage, #bodyimage2{position: fixed !important;} #parallax_titles { top: 0px !important; } } @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { #parallax_body { top: 0px !important; } #bodyimage, #bodyimage2{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, #bodyimage2{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, #bodyimage2{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, #bodyimage2{position: fixed !important;} #parallax_titles { top: 0px !important; } } /* ------- */