/* dissolve */
.dissolve {width: 614px;
height: 250px;
position: relative;
overflow: hidden}
.dissolve .item {position: absolute;
left: 0;
right: 0;
opacity: 0;
-webkit-animation: dissolve 20s linear infinite;
-moz-animation: dissolve 20s linear infinite;
-ms-animation: dissolve 20s linear infinite;
animation: dissolve 20s linear infinite}
.dissolve .item:nth-child(2) {-webkit-animation-delay: 4s;
-moz-animation-delay: 4s;
-ms-animation-delay: 4s;
animation-delay: 4s}
.dissolve .item:nth-child(3) {-webkit-animation-delay: 10s;
-moz-animation-delay: 10s;
-ms-animation-delay: 10s;
animation-delay: 10s}
.dissolve .item:nth-child(4) {-webkit-animation-delay: 15s;
-moz-animation-delay: 15s;
-ms-animation-delay: 15s;
animation-delay: 15s}
.dissolve .item:nth-child(5) {-webkit-animation-delay: 20s;
-moz-animation-delay: 20s;
-ms-animation-delay: 20s;
animation-delay:20s}
.dissolve .item:nth-child(6) {-webkit-animation-delay: 22s;
-moz-animation-delay: 22s;
-ms-animation-delay: 22s;
animation-delay:22s}
/*
/* The keyframes calculations are based on assumption of 4 items in the carousel.
/* You should notice the pattern for your own calculations.
*/
/* If you plan to support Safari 4 for any reason, you *must* have 0% and 100% frames */
@-webkit-keyframes dissolve {0%, 30%, 100% {opacity: 0}
5%, 25% {opacity: 1}}
@-moz-keyframes dissolve {0%, 30%, 100% {opacity: 0}
5%, 25% {opacity: 1}}
@-ms-keyframes dissolve {0%, 30%, 100% {opacity: 0}
5%, 25% {opacity: 1}}
@keyframes dissolve {0%, 30%, 100% {opacity: 0}
5%, 25% {opacity: 1}}

/* dissolve */
@width: 300px; // width of the carousel
@height: 200px; // height of the carousel
@numberofitems: 4; // the number of items in the carousel
@visibleitemduration: 4s; // time during which a carousel item is fully visible
@transitionduration: 1s; // duration of the transition between two carousel items
@oneitemduration: @visibleitemduration + @transitionduration;
@carouselperiod: @oneitemduration * @numberofitems;

.dissolve {width:@width;
height: @height;
position:relative;
overflow: hidden} .item {position:absolute;
left: 0;
right: 0;
opacity: 0;

-webkit-animation: dissolve @carouselperiod linear infinite;
-moz-animation: dissolve @carouselperiod linear infinite;
-ms-animation: dissolve @carouselperiod linear infinite;
animation: dissolve @carouselperiod linear infinite;}

&:nth-child(2) {-webkit-animation-delay: @oneitemduration;
-moz-animation-delay: @oneitemduration;
-ms-animation-delay: @oneitemduration;
animation-delay: @oneitemduration}
&:nth-child(3) {-webkit-animation-delay: 2 * @oneitemduration;
-moz-animation-delay: 2 * @oneitemduration;
-ms-animation-delay: 2 * @oneitemduration;
animation-delay: 2 * @oneitemduration}
&:nth-child(4) {-webkit-animation-delay: 3 * @oneitemduration;
-moz-animation-delay: 3 * @oneitemduration;
-ms-animation-delay: 3 * @oneitemduration;
animation-delay: 3 * @oneitemduration}
&:nth-child(5) {-webkit-animation-delay: 4 * @oneitemduration;
-moz-animation-delay: 4 * @oneitemduration;
-ms-animation-delay: 4 * @oneitemduration;
animation-delay: 4 * @oneitemduration}
&:nth-child(6) {-webkit-animation-delay: 5 * @oneitemduration;
-moz-animation-delay: 5 * @oneitemduration;
-ms-animation-delay: 5 * @oneitemduration;
animation-delay: 5 * @oneitemduration}


/*
/* The keyframes calculations are based on assumption of 4 items in the carousel.
/* You should notice the pattern for your own calculations.
*/
/* If you plan to support Safari 4 for any reason, you *must* have 0% and 100% frames */
@-webkit-keyframes dissolve {0%, 30%, 100% {opacity: 0}
5%, 25% {opacity: 1}}
@-moz-keyframes dissolve {0%, 30%, 100% {opacity: 0}
5%, 25% {opacity: 1}}
@-ms-keyframes dissolve {0%, 30%, 100% {opacity: 0}
5%, 25% {opacity: 1}}
@keyframes dissolve {0%, 30%, 100% {opacity: 0}
5%, 25% {opacity: 1}}

/*g2*/
.dissolve1 {width: 400px;
height: 250px;
position: relative;
overflow: hidden}
.dissolve1 .item {position: absolute;
left: 0;
right: 0;
opacity: 0;
-webkit-animation: dissolve 20s linear infinite;
-moz-animation: dissolve 20s linear infinite;
-ms-animation: dissolve 20s linear infinite;
animation: dissolve 20s linear infinite}
.dissolve1 .item:nth-child(2) {-webkit-animation-delay: 4s;
-moz-animation-delay: 4s;
-ms-animation-delay: 4s;
animation-delay: 4s}
.dissolve1 .item:nth-child(3) {-webkit-animation-delay: 10s;
-moz-animation-delay: 10s;
-ms-animation-delay: 10s;
animation-delay: 10s}
.dissolve1 .item:nth-child(4) {-webkit-animation-delay: 15s;
-moz-animation-delay: 15s;
-ms-animation-delay: 15s;
animation-delay: 15s}
.dissolve1 .item:nth-child(5) {-webkit-animation-delay: 20s;
-moz-animation-delay: 20s;
-ms-animation-delay: 20s;
animation-delay: 20s}
.dissolve1 .item:nth-child(6) {-webkit-animation-delay: 22s;
-moz-animation-delay: 22s;
-ms-animation-delay: 22s;
animation-delay: 22s}
/*
/* The keyframes calculations are based on assumption of 4 items in the carousel.
/* You should notice the pattern for your own calculations.
*/
/* If you plan to support Safari 4 for any reason, you *must* have 0% and 100% frames */
@-webkit-keyframes dissolve1 {0%, 30%, 100% {opacity: 0}
5%, 25% {opacity: 1}}
@-moz-keyframes dissolve1 {0%, 30%, 100% {opacity: 0}
5%, 25% {opacity: 1}}
@-ms-keyframes dissolve1 {0%, 30%, 100% {opacity: 0}
5%, 25% {opacity: 1}}
@keyframes dissolve1 {0%, 30%, 100% {opacity: 0}
5%, 25% {opacity: 1}}

/* dissolve */
@width: 300px; // width of the carousel
@height: 200px; // height of the carousel
@numberofitems: 4; // the number of items in the carousel
@visibleitemduration: 4s; // time during which a carousel item is fully visible
@transitionduration: 1s; // duration of the transition between two carousel items
@oneitemduration: @visibleitemduration + @transitionduration;
@carouselperiod: @oneitemduration * @numberofitems;

.dissolve1 {width:@width;
height: @height;
position:relative;
overflow: hidden} .item {position:absolute;
left: 0;
right: 0;
opacity: 0;

-webkit-animation: dissolve @carouselperiod linear infinite;
-moz-animation: dissolve @carouselperiod linear infinite;
-ms-animation: dissolve @carouselperiod linear infinite;
animation: dissolve @carouselperiod linear infinite;}

&:nth-child(2) {-webkit-animation-delay: @oneitemduration;
-moz-animation-delay: @oneitemduration;
-ms-animation-delay: @oneitemduration;
animation-delay: @oneitemduration}
&:nth-child(3) {-webkit-animation-delay: 2 * @oneitemduration;
-moz-animation-delay: 2 * @oneitemduration;
-ms-animation-delay: 2 * @oneitemduration;
animation-delay: 2 * @oneitemduration}
&:nth-child(4) {-webkit-animation-delay: 3 * @oneitemduration;
-moz-animation-delay: 3 * @oneitemduration;
-ms-animation-delay: 3 * @oneitemduration;
animation-delay: 3 * @oneitemduration}
&:nth-child(5) {-webkit-animation-delay: 4 * @oneitemduration;
-moz-animation-delay: 4 * @oneitemduration;
-ms-animation-delay: 4 * @oneitemduration;
animation-delay: 4 * @oneitemduration}
&:nth-child(6) {-webkit-animation-delay: 5 * @oneitemduration;
-moz-animation-delay: 5 * @oneitemduration;
-ms-animation-delay: 5 * @oneitemduration;
animation-delay: 5 * @oneitemduration}

/*
/* The keyframes calculations are based on assumption of 4 items in the carousel.
/* You should notice the pattern for your own calculations.
*/
/* If you plan to support Safari 4 for any reason, you *must* have 0% and 100% frames */
@-webkit-keyframes dissolve1 {0%, 30%, 100% {opacity: 0}
5%, 25% {opacity: 1}}
@-moz-keyframes dissolve1 {0%, 30%, 100% {opacity: 0}
5%, 25% {opacity: 1}}
@-ms-keyframes dissolve1 {0%, 30%, 100% {opacity: 0}
5%, 25% {opacity: 1}}
@keyframes dissolve1 {0%, 30%, 100% {opacity: 0}
5%, 25% {opacity: 1}}

/*g3 e g4*/
.dissolve2 {width:302px;
height: 250px;
position: relative;
overflow: hidden}
.dissolve2 .item {position: absolute;
left: 0;
right: 0;
opacity: 0;
-webkit-animation: dissolve 20s linear infinite;
-moz-animation: dissolve 20s linear infinite;
-ms-animation: dissolve 20s linear infinite;
animation: dissolve 20s linear infinite}
.dissolve2 .item:nth-child(2) {-webkit-animation-delay: 4s;
-moz-animation-delay: 4s;
-ms-animation-delay: 4s;
animation-delay: 4s}
.dissolve2 .item:nth-child(3) {-webkit-animation-delay: 10s;
-moz-animation-delay: 10s;
-ms-animation-delay: 10s;
animation-delay: 10s}
.dissolve2 .item:nth-child(4) {-webkit-animation-delay: 15s;
-moz-animation-delay: 15s;
-ms-animation-delay: 15s;
animation-delay: 15s}
.dissolve2 .item:nth-child(5) {-webkit-animation-delay: 20s;
-moz-animation-delay: 20s;
-ms-animation-delay: 20s;
animation-delay: 20s}
.dissolve2 .item:nth-child(6) {-webkit-animation-delay: 22s;
-moz-animation-delay: 22s;
-ms-animation-delay: 22s;
animation-delay: 22s}

/*
/* The keyframes calculations are based on assumption of 4 items in the carousel.
/* You should notice the pattern for your own calculations.
*/
/* If you plan to support Safari 4 for any reason, you *must* have 0% and 100% frames */
@-webkit-keyframes dissolve2 {0%, 30%, 100% {opacity: 0}
5%, 25% {opacity: 1}}
@-moz-keyframes dissolve2 {0%, 30%, 100% {opacity: 0}
5%, 25% {opacity: 1}}
@-ms-keyframes dissolve2 {0%, 30%, 100% {opacity: 0}
5%, 25% {opacity: 1}}
@keyframes dissolve2 {0%, 30%, 100% {opacity: 0}
5%, 25% {opacity: 1}}

/* dissolve */
@width: 300px; // width of the carousel
@height: 200px; // height of the carousel
@numberofitems: 4; // the number of items in the carousel
@visibleitemduration: 4s; // time during which a carousel item is fully visible
@transitionduration: 1s; // duration of the transition between two carousel items
@oneitemduration: @visibleitemduration + @transitionduration;
@carouselperiod: @oneitemduration * @numberofitems;

.dissolve2 {width:@width;
height: @height;
position:relative;
overflow: hidden} .item {position:absolute;
left: 0;
right: 0;
opacity: 0;

-webkit-animation: dissolve @carouselperiod linear infinite;
-moz-animation: dissolve @carouselperiod linear infinite;
-ms-animation: dissolve @carouselperiod linear infinite;
animation: dissolve @carouselperiod linear infinite;}

&:nth-child(2) {-webkit-animation-delay: @oneitemduration;
-moz-animation-delay: @oneitemduration;
-ms-animation-delay: @oneitemduration;
animation-delay: @oneitemduration}
&:nth-child(3) {-webkit-animation-delay: 2 * @oneitemduration;
-moz-animation-delay: 2 * @oneitemduration;
-ms-animation-delay: 2 * @oneitemduration;
animation-delay: 2 * @oneitemduration}
&:nth-child(4) {-webkit-animation-delay: 3 * @oneitemduration;
-moz-animation-delay: 3 * @oneitemduration;
-ms-animation-delay: 3 * @oneitemduration;
animation-delay: 3 * @oneitemduration}
&:nth-child(5) {-webkit-animation-delay: 4 * @oneitemduration;
-moz-animation-delay: 4 * @oneitemduration;
-ms-animation-delay: 4 * @oneitemduration;
animation-delay: 4 * @oneitemduration}

&:nth-child(6) {-webkit-animation-delay: 5 * @oneitemduration;
-moz-animation-delay: 5 * @oneitemduration;
-ms-animation-delay: 5 * @oneitemduration;
animation-delay: 5 * @oneitemduration}


/*
/* The keyframes calculations are based on assumption of 4 items in the carousel.
/* You should notice the pattern for your own calculations.
*/
/* If you plan to support Safari 4 for any reason, you *must* have 0% and 100% frames */
@-webkit-keyframes dissolve2 {0%, 30%, 100% {opacity: 0}
5%, 25% {opacity: 1}}
@-moz-keyframes dissolve2 {0%, 30%, 100% {opacity: 0}
5%, 25% {opacity: 1}}
@-ms-keyframes dissolve2 {0%, 30%, 100% {opacity: 0}
5%, 25% {opacity: 1}}
@keyframes dissolve2 {0%, 30%, 100% {opacity: 0}
5%, 25% {opacity: 1}}

/*g5*/
.dissolve3 {width:400px;
height: 120px;
position: relative;
overflow: hidden}
.dissolve3 .item {position: absolute;
left: 0;
right: 0;
opacity: 0;
-webkit-animation: dissolve 20s linear infinite;
-moz-animation: dissolve 20s linear infinite;
-ms-animation: dissolve 20s linear infinite;
animation: dissolve 20s linear infinite}
.dissolve3 .item:nth-child(2) {-webkit-animation-delay: 4s;
-moz-animation-delay: 4s;
-ms-animation-delay: 4s;
animation-delay: 4s}
.dissolve3 .item:nth-child(3) {-webkit-animation-delay: 10s;
-moz-animation-delay: 10s;
-ms-animation-delay: 10s;
animation-delay: 10s}
.dissolve3 .item:nth-child(4) {-webkit-animation-delay: 15s;
-moz-animation-delay: 15s;
-ms-animation-delay: 15s;
animation-delay: 15s}
.dissolve3 .item:nth-child(5) {-webkit-animation-delay: 20s;
-moz-animation-delay: 20s;
-ms-animation-delay: 20s;
animation-delay: 20s}
.dissolve3 .item:nth-child(6) {-webkit-animation-delay: 22s;
-moz-animation-delay: 22s;
-ms-animation-delay: 22s;
animation-delay: 22s}
/*
/* The keyframes calculations are based on assumption of 4 items in the carousel.
/* You should notice the pattern for your own calculations.
*/
/* If you plan to support Safari 4 for any reason, you *must* have 0% and 100% frames */
@-webkit-keyframes dissolve3 {0%, 30%, 100% {opacity: 0}
5%, 25% {opacity: 1}}
@-moz-keyframes dissolve3 {0%, 30%, 100% {opacity: 0}
5%, 25% {opacity: 1}}
@-ms-keyframes dissolve3 {0%, 30%, 100% {opacity: 0}
5%, 25% {opacity: 1}}
@keyframes dissolve3 {0%, 30%, 100% {opacity: 0}
5%, 25% {opacity: 1}}

/* dissolve */
@width: 300px; // width of the carousel
@height: 200px; // height of the carousel
@numberofitems: 4; // the number of items in the carousel
@visibleitemduration: 4s; // time during which a carousel item is fully visible
@transitionduration: 1s; // duration of the transition between two carousel items
@oneitemduration: @visibleitemduration + @transitionduration;
@carouselperiod: @oneitemduration * @numberofitems;

.dissolve3 {width:@width;
height: @height;
position:relative;
overflow: hidden} .item {position:absolute;
left: 0;
right: 0;
opacity: 0;

-webkit-animation: dissolve @carouselperiod linear infinite;
-moz-animation: dissolve @carouselperiod linear infinite;
-ms-animation: dissolve @carouselperiod linear infinite;
animation: dissolve @carouselperiod linear infinite;}

&:nth-child(2) {-webkit-animation-delay: @oneitemduration;
-moz-animation-delay: @oneitemduration;
-ms-animation-delay: @oneitemduration;
animation-delay: @oneitemduration}
&:nth-child(3) {-webkit-animation-delay: 2 * @oneitemduration;
-moz-animation-delay: 2 * @oneitemduration;
-ms-animation-delay: 2 * @oneitemduration;
animation-delay: 2 * @oneitemduration}
&:nth-child(4) {-webkit-animation-delay: 3 * @oneitemduration;
-moz-animation-delay: 3 * @oneitemduration;
-ms-animation-delay: 3 * @oneitemduration;
animation-delay: 3 * @oneitemduration}
&:nth-child(5) {-webkit-animation-delay: 4 * @oneitemduration;
-moz-animation-delay: 4 * @oneitemduration;
-ms-animation-delay: 4 * @oneitemduration;
animation-delay: 4 * @oneitemduration}

&:nth-child(6) {-webkit-animation-delay: 5 * @oneitemduration;
-moz-animation-delay: 5 * @oneitemduration;
-ms-animation-delay: 5 * @oneitemduration;
animation-delay: 5 * @oneitemduration}


/*
/* The keyframes calculations are based on assumption of 4 items in the carousel.
/* You should notice the pattern for your own calculations.
*/
/* If you plan to support Safari 4 for any reason, you *must* have 0% and 100% frames */
@-webkit-keyframes dissolve3 {0%, 30%, 100% {opacity: 0}
5%, 25% {opacity: 1}}
@-moz-keyframes dissolve3 {0%, 30%, 100% {opacity: 0}
5%, 25% {opacity: 1}}
@-ms-keyframes dissolve3 {0%, 30%, 100% {opacity: 0}
5%, 25% {opacity: 1}}
@keyframes dissolve3 {0%, 30%, 100% {opacity: 0}
5%, 25% {opacity: 1}}

/*pg10*/
.dissolve4 {width:714px;
height: 250px;
position: relative;
overflow: hidden}
.dissolve4 .item {position: absolute;
left: 0;
right: 0;
opacity: 0;
-webkit-animation: dissolve 20s linear infinite;
-moz-animation: dissolve 20s linear infinite;
-ms-animation: dissolve 20s linear infinite;
animation: dissolve 20s linear infinite}
.dissolve4 .item:nth-child(2) {-webkit-animation-delay: 4s;
-moz-animation-delay: 4s;
-ms-animation-delay: 4s;
animation-delay: 4s}
.dissolve4 .item:nth-child(3) {-webkit-animation-delay: 10s;
-moz-animation-delay: 10s;
-ms-animation-delay: 10s;
animation-delay: 10s}
.dissolve4 .item:nth-child(4) {-webkit-animation-delay: 15s;
-moz-animation-delay: 15s;
-ms-animation-delay: 15s;
animation-delay: 15s}
.dissolve4 .item:nth-child(5) {-webkit-animation-delay: 20s;
-moz-animation-delay: 20s;
-ms-animation-delay: 20s;
animation-delay: 20s}
.dissolve4 .item:nth-child(6) {-webkit-animation-delay: 22s;
-moz-animation-delay: 22s;
-ms-animation-delay: 22s;
animation-delay: 22s}
/*
/* The keyframes calculations are based on assumption of 4 items in the carousel.
/* You should notice the pattern for your own calculations.
*/
/* If you plan to support Safari 4 for any reason, you *must* have 0% and 100% frames */
@-webkit-keyframes dissolve4 {0%, 30%, 100% {opacity: 0}
5%, 25% {opacity: 1}}
@-moz-keyframes dissolve4 {0%, 30%, 100% {opacity: 0}
5%, 25% {opacity: 1}}
@-ms-keyframes dissolve4 {0%, 30%, 100% {opacity: 0}
5%, 25% {opacity: 1}}
@keyframes dissolve4 {0%, 30%, 100% {opacity: 0}
5%, 25% {opacity: 1}}

/* dissolve */
@width: 300px; // width of the carousel
@height: 200px; // height of the carousel
@numberofitems: 4; // the number of items in the carousel
@visibleitemduration: 4s; // time during which a carousel item is fully visible
@transitionduration: 1s; // duration of the transition between two carousel items
@oneitemduration: @visibleitemduration + @transitionduration;
@carouselperiod: @oneitemduration * @numberofitems;

.dissolve4 {width:@width;
height: @height;
position:relative;
overflow: hidden} .item {position:absolute;
left: 0;
right: 0;
opacity: 0;

-webkit-animation: dissolve @carouselperiod linear infinite;
-moz-animation: dissolve @carouselperiod linear infinite;
-ms-animation: dissolve @carouselperiod linear infinite;
animation: dissolve @carouselperiod linear infinite;}

&:nth-child(2) {-webkit-animation-delay: @oneitemduration;
-moz-animation-delay: @oneitemduration;
-ms-animation-delay: @oneitemduration;
animation-delay: @oneitemduration}
&:nth-child(3) {-webkit-animation-delay: 2 * @oneitemduration;
-moz-animation-delay: 2 * @oneitemduration;
-ms-animation-delay: 2 * @oneitemduration;
animation-delay: 2 * @oneitemduration}
&:nth-child(4) {-webkit-animation-delay: 3 * @oneitemduration;
-moz-animation-delay: 3 * @oneitemduration;
-ms-animation-delay: 3 * @oneitemduration;
animation-delay: 3 * @oneitemduration}
&:nth-child(5) {-webkit-animation-delay: 4 * @oneitemduration;
-moz-animation-delay: 4 * @oneitemduration;
-ms-animation-delay: 4 * @oneitemduration;
animation-delay: 4 * @oneitemduration}
&:nth-child(6) {-webkit-animation-delay: 5 * @oneitemduration;
-moz-animation-delay: 5 * @oneitemduration;
-ms-animation-delay: 5 * @oneitemduration;
animation-delay: 5 * @oneitemduration}
/*
/* The keyframes calculations are based on assumption of 4 items in the carousel.
/* You should notice the pattern for your own calculations.
*/
/* If you plan to support Safari 4 for any reason, you *must* have 0% and 100% frames */
@-webkit-keyframes dissolve4 {0%, 30%, 100% {opacity: 0}
5%, 25% {opacity: 1}}
@-moz-keyframes dissolve4 {0%, 30%, 100% {opacity: 0}
5%, 25% {opacity: 1}}
@-ms-keyframes dissolve4 {0%, 30%, 100% {opacity: 0}
5%, 25% {opacity: 1}}
@keyframes dissolve4 {0%, 30%, 100% {opacity: 0}
5%, 25% {opacity: 1}}