Your IP : 216.73.216.61
/*
* name FavPromote
* version 1.7
* description Responsive and customizable Joomla!3 module
* demo http://extensions.favthemes.com/favpromote
* author FavThemes
* author URL http://www.favthemes.com
* copyright Copyright (C) 2015 FavThemes.com. All Rights Reserved.
* license Licensed under GNU/GPLv3, see http://www.gnu.org/licenses/gpl-3.0.html
*/
/*
******************************************************************************************
1. reset
2. layout
3. content
4. grid
5. layout effects
******************************************************************************************
*/
/*
******************************************************************************************
/// favpromote css
******************************************************************************************
*/
/*
/////////////////////////////////
1. reset
/////////////////////////////////
*/
div[id^="favpromote"] a,
div[id*=" favpromote"] a,
div[id^="favpromote"] a:hover,
div[id*=" favpromote"] a:hover,
div[id^="favpromote"] a:focus,
div[id*=" favpromote"] a:focus {
text-decoration: none!important;
}
/*
/////////////////////////////////
2. layout
/////////////////////////////////
*/
div[id^="favpromote-box"],
div[id*=" favpromote-box"] {
position: relative;
overflow: hidden;
margin-bottom: 14px;
margin-top: 14px;
}
div[id^="favpromote-box"]:hover,
div[id*=" favpromote-box"]:hover,
div[id^="favpromote-box"]:focus,
div[id*=" favpromote-box"]:focus {
color: #fff;
-webkit-transition: all 400ms linear;
-moz-transition: all 400ms linear;
-o-transition: all 400ms linear;
transition: all 400ms linear;
}
/*
/////////////////////////////////
3. content
/////////////////////////////////
*/
/*
/// image
*/
div[id^="favpromote-image"],
div[id*=" favpromote-image"] {
padding: 21px;
}
div[id^="favpromote-image"] img,
div[id*=" favpromote-image"] img {
border: 1px solid #ddd;
-webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, .15), 0 1px 2px rgba(0, 0, 0, .05);
-moz-box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
box-shadow: inset 0 2px 4px rgba(0, 0, 0, .15), 0 1px 2px rgba(0, 0, 0, .05);
width: 100%;
}
div[id^="favpromote-image"] img:hover,
div[id*=" favpromote-image"] img:hover {
border: 1px solid #fff;
}
/*
/// title
*/
div[id^="favpromote-box"] h4,
div[id*=" favpromote-box"] h4 {
font-weight: normal;
}
div[id^="favpromote-box"]:hover h4[id^="favpromote-title"],
div[id^="favpromote-box"]:hover h4[id*=" favpromote-title"],
div[id*=" favpromote-box"]:hover h4[id^="favpromote-title"],
div[id*=" favpromote-box"]:hover h4[id*=" favpromote-title"],
div[id^="favpromote-box"]:hover h4[id^="favpromote-title"] a,
div[id^="favpromote-box"]:hover h4[id*=" favpromote-title"] a,
div[id*=" favpromote-box"]:hover h4[id^="favpromote-title"] a,
div[id*=" favpromote-box"]:hover h4[id*=" favpromote-title"] a,
div[id^="favpromote-box"]:hover h4[id^="favpromote-title"] i,
div[id^="favpromote-box"]:hover h4[id*=" favpromote-title"] i,
div[id*=" favpromote-box"]:hover h4[id^="favpromote-title"] i,
div[id*=" favpromote-box"]:hover h4[id*=" favpromote-title"] i {
background-color: #111!important;
color: #fff!important;
}
div[id^="favpromote-box"]:hover h4[id^="favpromote-title"],
div[id^="favpromote-box"]:hover h4[id*=" favpromote-title"] {
font-weight: normal;
}
div[id^="favpromote-box"]:hover h4[id^="favpromote-title"] a:hover,
div[id^="favpromote-box"]:hover h4[id*=" favpromote-title"] a:hover {
text-decoration: none;
}
div[id^="favpromote"] div[id^="favpromote-title"] a,
div[id*=" favpromote"] div[id^="favpromote-title"] a,
div[id^="favpromote"] div[id*=" favpromote-title"] a,
div[id*=" favpromote"] div[id*=" favpromote-title"] a {
vertical-align: middle;
}
div[id^="favpromote"] div[id^="favpromote-title"] a:hover,
div[id*=" favpromote"] div[id^="favpromote-title"] a:hover,
div[id^="favpromote"] div[id*=" favpromote-title"] a:hover,
div[id*=" favpromote"] div[id*=" favpromote-title"] a:hover {
color: #fff!important;
}
/*
/// description
*/
p[id^="favpromote-text"],
p[id*=" favpromote-text"] {
padding: 4px 21px 14px;
margin: 0;
}
div[id^="favpromote-box"]:hover p[id^="favpromote-text"],
div[id*=" favpromote-box"]:hover p[id^="favpromote-text"],
div[id^="favpromote-box"]:hover p[id*=" favpromote-text"],
div[id*=" favpromote-box"]:hover p[id*=" favpromote-text"] {
color: #fff!important;
}
/*
/////////////////////////////////
4. grid
/////////////////////////////////
*/
@media (min-width: 980px) {
/*
/// 6 columns
*/
div[id^="favpromote-box"].span2 h4,
div[id*=" favpromote-box"].span2 h4 {
font-size: 14px;
}
div[id^="favpromote-box"].span2 div[id^="favpromote-description-icon"] i,
div[id*=" favpromote-box"].span2 div[id^="favpromote-description-icon"] i,
div[id^="favpromote-box"].span2 div[id*=" favpromote-description-icon"] i,
div[id*=" favpromote-box"].span2 div[id*=" favpromote-description-icon"] i {
font-size: 1.2em;
}
div[id^="favpromote-box"].span2 div[id^="favpromote-icon"] i,
div[id*=" favpromote-box"].span2 div[id^="favpromote-icon"] i,
div[id^="favpromote-box"].span2 div[id*=" favpromote-icon"] i,
div[id*=" favpromote-box"].span2 div[id*=" favpromote-icon"] i {
font-size: 3.3em;
}
/*
/// 5 columns
*/
div[id^="favpromote-box"].span2-4,
div[id*=" favpromote-box"].span2-4 {
width: 17.790056%;
}
div[id^="favpromote-box"].span2-4 h4,
div[id*=" favpromote-box"].span2-4 h4 {
font-size: 16px;
}
div[id^="favpromote-box"].span2-4 div[id^="favpromote-description-icon"] i,
div[id*=" favpromote-box"].span2-4 div[id^="favpromote-description-icon"] i,
div[id^="favpromote-box"].span2-4 div[id*=" favpromote-description-icon"] i,
div[id*=" favpromote-box"].span2-4 div[id*=" favpromote-description-icon"] i {
font-size: 1.4em;
}
div[id^="favpromote-box"].span2-4 div[id^="favpromote-icon"] i,
div[id*=" favpromote-box"].span2-4 div[id^="favpromote-icon"] i,
div[id^="favpromote-box"].span2-4 div[id*=" favpromote-icon"] i,
div[id*=" favpromote-box"].span2-4 div[id*=" favpromote-icon"] i {
font-size: 4em;
}
/*
/// 4 columns
*/
div[id^="favpromote-box"].span3 h4,
div[id*=" favpromote-box"].span3 h4 {
font-size: 18px;
}
div[id^="favpromote-box"].span3 div[id^="favpromote-description-icon"] i,
div[id*=" favpromote-box"].span3 div[id^="favpromote-description-icon"] i,
div[id^="favpromote-box"].span3 div[id*=" favpromote-description-icon"] i,
div[id*=" favpromote-box"].span3 div[id*=" favpromote-description-icon"] i {
font-size: 1.8em;
}
div[id^="favpromote-box"].span3 div[id^="favpromote-icon"] i,
div[id*=" favpromote-box"].span3 div[id^="favpromote-icon"] i,
div[id^="favpromote-box"].span3 div[id*=" favpromote-icon"] i,
div[id*=" favpromote-box"].span3 div[id*=" favpromote-icon"] i {
font-size: 5em;
}
/*
/// 3 columns
*/
div[id^="favpromote-box"].span4 h4,
div[id*=" favpromote-box"].span4 h4 {
font-size: 24px;
}
div[id^="favpromote-box"].span4 div[id^="favpromote-description-icon"] i,
div[id*=" favpromote-box"].span4 div[id^="favpromote-description-icon"] i,
div[id^="favpromote-box"].span4 div[id*=" favpromote-description-icon"] i,
div[id*=" favpromote-box"].span4 div[id*=" favpromote-description-icon"] i {
font-size: 2em;
}
div[id^="favpromote-box"].span4 div[id^="favpromote-icon"] i,
div[id*=" favpromote-box"].span4 div[id^="favpromote-icon"] i,
div[id^="favpromote-box"].span4 div[id*=" favpromote-icon"] i,
div[id*=" favpromote-box"].span4 div[id*=" favpromote-icon"] i {
font-size: 8em;
}
/*
/// 2 columns
*/
div[id^="favpromote-box"].span6 h4,
div[id*=" favpromote-box"].span6 h4 {
font-size: 28px;
}
div[id^="favpromote-box"].span6 div[id^="favpromote-description-icon"] i,
div[id*=" favpromote-box"].span6 div[id^="favpromote-description-icon"] i,
div[id^="favpromote-box"].span6 div[id*=" favpromote-description-icon"] i,
div[id*=" favpromote-box"].span6 div[id*=" favpromote-description-icon"] i {
font-size: 2.4em;
}
div[id^="favpromote-box"].span6 div[id^="favpromote-icon"] i,
div[id*=" favpromote-box"].span6 div[id^="favpromote-icon"] i,
div[id^="favpromote-box"].span6 div[id*=" favpromote-icon"] i,
div[id*=" favpromote-box"].span6 div[id*=" favpromote-icon"] i {
font-size: 12em;
}
/*
/// 1 columns
*/
div[id^="favpromote-box"].span12 h4,
div[id*=" favpromote-box"].span12 h4 {
font-size: 32px;
}
div[id^="favpromote-box"].span12 div[id^="favpromote-description-icon"] i,
div[id*=" favpromote-box"].span12 div[id^="favpromote-description-icon"] i,
div[id^="favpromote-box"].span12 div[id*=" favpromote-description-icon"] i,
div[id*=" favpromote-box"].span12 div[id*=" favpromote-description-icon"] i {
font-size: 5em;
}
div[id^="favpromote-box"].span12 div[id^="favpromote-icon"] i,
div[id*=" favpromote-box"].span12 div[id^="favpromote-icon"] i,
div[id^="favpromote-box"].span12 div[id*=" favpromote-icon"] i,
div[id*=" favpromote-box"].span12 div[id*=" favpromote-icon"] i {
font-size: 20em;
}
}
@media handheld, only screen and (max-width: 979px) {
div[id^="favpromote-box"],
div[id*=" favpromote-box"] {
margin-bottom: 21px;
}
div[id^="favpromote-icon"] i,
div[id*=" favpromote-icon"] i {
font-size: 8em;
}
div[id^="favpromote-box"].span2,
div[id*=" favpromote-box"].span2,
div[id^="favpromote-box"].span2-4,
div[id*=" favpromote-box"].span2-4,
div[id^="favpromote-box"].span3,
div[id*=" favpromote-box"].span3,
div[id^="favpromote-box"].span4,
div[id*=" favpromote-box"].span4,
div[id^="favpromote-box"].span6,
div[id*=" favpromote-box"].span6 {
margin-left: 2.127659574468085%;
float:left;
}
div[id^="favpromote-box"].span2,
div[id*=" favpromote-box"].span2,
div[id^="favpromote-box"].span2-4,
div[id*=" favpromote-box"].span2-4,
div[id^="favpromote-box"].span4,
div[id*=" favpromote-box"].span4 {
width: 31.6239%;
}
div[id^="favpromote-box"].span2:first-child,
div[id*=" favpromote-box"].span2:first-child,
div[id^="favpromote-box"].span2-4:first-child,
div[id*=" favpromote-box"].span2-4:first-child,
div[id^="favpromote-box"].span4:first-child,
div[id*=" favpromote-box"].span4:first-child,
div[id^="favpromote-box"].span6:first-child,
div[id*=" favpromote-box"].span6:first-child {
margin-left: 0;
}
div[id^="favpromote-box"].span2:nth-child(4),
div[id*=" favpromote-box"].span2:nth-child(4),
div[id^="favpromote-box"].span2-4:nth-child(4),
div[id*=" favpromote-box"].span2-4:nth-child(4) {
margin-left: 0;
clear: both;
}
div[id^="favpromote-box"].span2-4:nth-child(4),
div[id*=" favpromote-box"].span2-4:nth-child(4),
div[id^="favpromote-box"].span2-4:nth-child(5),
div[id*=" favpromote-box"].span2-4:nth-child(5) {
width: 48.93617021276595%;
}
}
@media handheld, only screen and (max-width: 767px) {
div[id^="favpromote-icon"] i,
div[id*=" favpromote-icon"] i {
font-size: 6em;
}
div[id^="favpromote-box"].span3,
div[id*=" favpromote-box"].span3 {
margin-left: 2.127659574468085%;
float:left;
}
div[id^="favpromote-box"].span3:first-child,
div[id*=" favpromote-box"].span3:first-child {
margin-left: 0;
}
div[id^="favpromote-box"].span3:nth-child(4)
div[id*=" favpromote-box"].span3:nth-child(4) {
margin-left: 0;
clear: both;
}
/* columns into 2 rows */
div[id^="favpromote-box"].span2,
div[id*=" favpromote-box"].span2,
div[id^="favpromote-box"].span2-4,
div[id*=" favpromote-box"].span2-4,
div[id^="favpromote-box"].span3,
div[id*=" favpromote-box"].span3,
div[id^="favpromote-box"].span4,
div[id*=" favpromote-box"].span4,
div[id^="favpromote-box"].span6,
div[id*=" favpromote-box"].span6 {
width: 48.93617021276595%;
}
div[id^="favpromote-box"].span2:nth-child(3),
div[id*=" favpromote-box"].span2:nth-child(3),
div[id^="favpromote-box"].span2-4:nth-child(3),
div[id*=" favpromote-box"].span2-4:nth-child(3),
div[id^="favpromote-box"].span3:nth-child(3),
div[id*=" favpromote-box"].span3:nth-child(3),
div[id^="favpromote-box"].span4:nth-child(3),
div[id*=" favpromote-box"].span4:nth-child(3),
div[id^="favpromote-box"].span2:nth-child(5),
div[id*=" favpromote-box"].span2:nth-child(5),
div[id^="favpromote-box"].span2-4:nth-child(5),
div[id*=" favpromote-box"].span2-4:nth-child(5),
div[id^="favpromote-box"].span3:nth-child(5),
div[id*=" favpromote-box"].span3:nth-child(5),
div[id^="favpromote-box"].span4:nth-child(5),
div[id*=" favpromote-box"].span4:nth-child(5) {
margin-left: 0;
clear: both;
}
div[id^="favpromote-box"].span2:nth-child(4),
div[id*=" favpromote-box"].span2:nth-child(4),
div[id^="favpromote-box"].span2-4:nth-child(4),
div[id*=" favpromote-box"].span2-4:nth-child(4),
div[id^="favpromote-box"].span3:nth-child(4),
div[id*=" favpromote-box"].span3:nth-child(4) {
margin-left: 2.127659574468085%;
clear: none;
}
div[id^="favpromote-box"].span2-4:last-child,
div[id*=" favpromote-box"].span2-4:last-child,
div[id^="favpromote-box"].span4:last-child,
div[id*=" favpromote-box"].span4:last-child {
float: none;
width: 100%;
margin-left: 0;
}
}
@media handheld, only screen and (max-width: 480px) {
div[id^="favpromote-icon"] i,
div[id*=" favpromote-icon"] i {
font-size: 8em;
}
div[id^="favpromote-box"].span2,
div[id*=" favpromote-box"].span2,
div[id^="favpromote-box"].span2-4,
div[id*=" favpromote-box"].span2-4,
div[id^="favpromote-box"].span3,
div[id*=" favpromote-box"].span3,
div[id^="favpromote-box"].span4,
div[id*=" favpromote-box"].span4,
div[id^="favpromote-box"].span6,
div[id*=" favpromote-box"].span6 {
float: none !important;
width: 100% !important;
margin-left: 0 !important;
}
}
/*
/////////////////////////////////
5. layout effects
/////////////////////////////////
*/
/*
/// js classes
*/
.favhide { opacity:0; }
.favshow { opacity:1; }
/*
/// no layout effect
*/
.layout-effect-none {
-webkit-animation: none;
-moz-animation: none;
-o-animation: none;
-ms-animation: none;
animation: none;
}
/*
/// layout effect 1
*/
.layout-effect1 {
-webkit-animation-name: layout-effect1;
-moz-animation-name: layout-effect1;
animation-name: layout-effect1;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes layout-effect1 {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-moz-keyframes layout-effect1 {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes layout-effect1 {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/*
/// layout effect 2
*/
.layout-effect2 {
-webkit-animation-name: layout-effect2;
-moz-animation-name: layout-effect2;
animation-name: layout-effect2;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes layout-effect2 {
0% {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@-moz-keyframes layout-effect2 {
0% {
opacity: 0;
-moz-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
100% {
opacity: 1;
-moz-transform: none;
transform: none;
}
}
@keyframes layout-effect2 {
0% {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
-moz-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
-moz-transform: translate3d(0, -100%, 0);
transform: none;
}
}
/*
/// layout effect 3
*/
.layout-effect3 {
-webkit-animation-name: layout-effect3;
-moz-animation-name: layout-effect3;
animation-name: layout-effect3;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes layout-effect3 {
0% {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@-moz-keyframes layout-effect3 {
0% {
opacity: 0;
-moz-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
100% {
opacity: 1;
-moz-transform: none;
transform: none;
}
}
@keyframes layout-effect3 {
0% {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
-moz-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
-moz-transform: none;
transform: none;
}
}
/*
/// layout effect 4
*/
.layout-effect4 {
-webkit-animation-name: layout-effect4;
-moz-animation-name: layout-effect4;
animation-name: layout-effect4;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes layout-effect4 {
0% {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@-moz-keyframes layout-effect4 {
0% {
opacity: 0;
-moz-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
100% {
opacity: 1;
-moz-transform: none;
transform: none;
}
}
@keyframes layout-effect4 {
0% {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
-moz-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
-moz-transform: none;
transform: none;
}
}
/*
/// layout effect 5
*/
.layout-effect5 {
-webkit-animation-name: layout-effect5;
-moz-animation-name: layout-effect5;
animation-name: layout-effect5;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes layout-effect5 {
0% {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@-moz-keyframes layout-effect5 {
0% {
opacity: 0;
-moz-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
100% {
opacity: 1;
-moz-transform: none;
transform: none;
}
}
@keyframes layout-effect5 {
0% {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
-moz-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
-moz-transform: none;
transform: none;
}
}
/*
/// layout effect 6
*/
.layout-effect6 {
-webkit-animation-name: layout-effect6;
-moz-animation-name: layout-effect6;
animation-name: layout-effect6;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes layout-effect6 {
0% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
50% {
opacity: 1;
}
}
@-moz-keyframes layout-effect6 {
0% {
opacity: 0;
-moz-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
50% {
opacity: 1;
}
}
@keyframes layout-effect6 {
0% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
-moz-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
50% {
opacity: 1;
}
}
/*
/// layout effect 7
*/
.layout-effect7 {
-webkit-animation-name: layout-effect7;
-moz-animation-name: layout-effect7;
animation-name: layout-effect7;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes layout-effect7 {
0% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
-webkit-transition-timing-function: ease-in;
transition-timing-function: ease-in;
opacity: 0;
}
40% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
-webkit-transition-timing-function: ease-in;
transition-timing-function: ease-in;
}
60% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
opacity: 1;
}
80% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
}
100% {
-webkit-transform: perspective(400px);
transform: perspective(400px);
}
}
@-moz-keyframes layout-effect7 {
0% {
-moz-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
-moz-transition-timing-function: ease-in;
transition-timing-function: ease-in;
opacity: 0;
}
40% {
-moz-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
-moz-transition-timing-function: ease-in;
transition-timing-function: ease-in;
}
60% {
-moz-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
opacity: 1;
}
80% {
-moz-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
}
100% {
-moz-transform: perspective(400px);
transform: perspective(400px);
}
}
@keyframes layout-effect7 {
0% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
-moz-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
-webkit-transition-timing-function: ease-in;
-moz-transition-timing-function: ease-in;
transition-timing-function: ease-in;
opacity: 0;
}
40% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
-moz-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
-webkit-transition-timing-function: ease-in;
-moz-transition-timing-function: ease-in;
transition-timing-function: ease-in;
}
60% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
-moz-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
opacity: 1;
}
80% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
-moz-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
}
100% {
-webkit-transform: perspective(400px);
-moz-transform: perspective(400px);
transform: perspective(400px);
}
}
/*
/// layout effect 8
*/
.layout-effect8 {
-webkit-animation-name: layout-effect8;
-moz-animation-name: layout-effect8;
animation-name: layout-effect8;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes layout-effect8 {
0% {
opacity: 0;
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}
60% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
}
@keyframes layout-effect8 {
0% {
opacity: 0;
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}
60% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
}