/*

*   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) 2012-2016 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: #111;

	-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);

  }



}