/* ========================================================================== */
/* ALL BANNER SIZES                                                           */
/* ========================================================================== */


.banner
{
    background-color:       #404040;
    -webkit-font-smoothing: antialiased;
}

.item:after
{
    position:               absolute;
    background-color:       transparency;
    width:                  100%;
    height:                 100%;
    z-index:                2;
    content:                "\20 ";
}

.item:before
{
    background-color:       #EDEDED;
    transform:              rotate(355deg);
    position:               absolute;
    width:                  460px;
    height:                 440px;
    top:                    -128px;
    left:                   auto;
    content:                "\20 ";
    z-index:                3;
    right:                  157px;
    transition:             all ease 0.7s;
    animation:              slidedeal 10s ease-in-out infinite;
    -webkit-animation:      slidedeal 10s ease-in-out infinite;
    -moz-animation:         slidedeal 10s ease-in-out infinite;
    -o-animation:           slidedeal 10s ease-in-out infinite;
}

.logo:before
{
    position:               absolute;
}

.products
{
    background-color:       #EDEDED;
}

.products:before
{
    background-position:    0 0;
    background-image:       url(../images/luxury/sprite.png);
    background-repeat:      no-repeat;
    position:               absolute;
    width:                  234px;
    height:                 351px;
    right:                  -40px;
    left:                   auto;
    content:                "\20 ";
    top:                    -61px;
    z-index:                2;
    background-size:        contain;
    transition:             all ease 0.5s;
    animation:              slideimage 10s ease-in-out infinite;
    -webkit-animation:      slideimage 10s ease-in-out infinite;
    -moz-animation:         slideimage 10s ease-in-out infinite;
    -o-animation:           slideimage 10s ease-in-out infinite;
}

.products:after
{
    position:               absolute;
}

.item
{
    width:                  100%;
    height:                 100%;
    background-color:       #EDEDED;
}

.item:hover .metadata-manufacturer, .item.fx-hover .metadata-manufacturer
{
    left:                   7px;
}

.item:hover .metadata-title, .item.fx-hover .metadata-title
{
    left:                   7px;
    padding-top:            7px;
}

.item:hover .banner-item-image, .item.fx-hover .banner-item-image
{
    left:                   95px;
}

.item:hover .metadata-c2a, .item.fx-hover .metadata-c2a
{
    left:                   12px;
}

.item:hover:before, .item.fx-hover:before
{
    right:                  80px;
}

.item:hover .metadata-new-icon, .item.fx-hover .metadata-new-icon
{
    color:                  transparent;
}

.banner-item-image
{
    width:                  112px;
    height:                 148px;
    top:                    77px;
    left:                   19px;
    z-index:                3;
    background-size:        contain;
    transition:             all ease 0.7s;
    animation:              fadeimage 10s ease-in-out infinite;
    -webkit-animation:      fadeimage 10s ease-in-out infinite;
    -moz-animation:         fadeimage 10s ease-in-out infinite;
    -o-animation:           fadeimage 10s ease-in-out infinite;
}

.metadata-manufacturer
{
    display:                block;
    width:                  80px;
    height:                 12px;
    line-height:            12px;
    font-size:              10px;
    top:                    120px;
    left:                   -100px;
    font-weight:            normal;
    text-transform:         uppercase;
    z-index:                3;
    transition:             all ease 0.7s;
    animation:              transparency 10s ease-in-out infinite;
    -webkit-animation:      transparency 10s ease-in-out infinite;
    -moz-animation:         transparency 10s ease-in-out infinite;
    -o-animation:           transparency 10s ease-in-out infinite;
}

.metadata-title
{
    display:                block;
    width:                  80px;
    height:                 20px;
    top:                    136px;
    left:                   -100px;
    line-height:            10px;
    font-size:              8px;
    padding-top:            7px;
    font-weight:            normal;
    z-index:                3;
    transition:             all ease 0.7s;
    animation:              transparency 10s ease-in-out infinite;
    -webkit-animation:      transparency 10s ease-in-out infinite;
    -moz-animation:         transparency 10s ease-in-out infinite;
    -o-animation:           transparency 10s ease-in-out infinite;
}

.metadata-title:before
{
    background-color:       black;
    position:               absolute;
    width:                  100%;
    height:                 1px;
    top:                    0;
    left:                   0;
    content:                "\20 ";
    font-weight:            normal;
}

.metadata-c2a
{
    display:                block;
    height:                 17px;
    line-height:            17px;
    width:                  68px;
    top:                    167px;
    left:                   -100px;
    z-index:                3;
    font-size:              8px;
    font-weight:            normal;
    transition:             all ease 0.7s;
    animation:              transparency 10s ease-in-out infinite;
    -webkit-animation:      transparency 10s ease-in-out infinite;
    -moz-animation:         transparency 10s ease-in-out infinite;
    -o-animation:           transparency 10s ease-in-out infinite;
}

.metadata-c2a:before
{
    background-color:       #030303;
    position:               absolute;
    width:                  100px;
    height:                 1px;
    top:                    0;
    left:                   0;
    content:                "\20 ";
}

.metadata-c2a:after
{
    background-color:       #030303;
    position:               absolute;
    width:                  100px;
    height:                 1px;
    bottom:                 0;
    content:                "\20 ";
    left:                   0;
}

.metadata-new-icon
{
    display:                block;
    width:                  20px;
    height:                 10px;
    line-height:            10px;
    font-size:              8px;
    top:                    76px;
    left:                   10px;
    z-index:                3;
    opacity:                1;
    transition:             all ease 0.7s;
    animation:              fadeimage 10s ease-in-out infinite;
    -webkit-animation:      fadeimage 10s ease-in-out infinite;
    -moz-animation:         fadeimage 10s ease-in-out infinite;
    -o-animation:           fadeimage 10s ease-in-out infinite;
}



/* ========================================================================== */
/* BANNER SIZE 1                                                              */
/* ========================================================================== */


.banner-size-1 .logo
{
    background-image:       url(../images/luxury/logo.png);
    background-repeat:      no-repeat;
    background-color:       transparent;
    z-index:                2;
    width:                  118px;
    height:                 52px;
    top:                    1px;
    left:                   10px;
    filter:                 brightness(10%);
    animation:              slidelogo 10s ease-in-out infinite;
    -webkit-animation:      slidelogo 10s ease-in-out infinite;
    -moz-animation:         slidelogo 10s ease-in-out infinite;
    -o-animation:           slidelogo 10s ease-in-out infinite;
}

.banner-size-1 .products
{
    height:                 248px;
    z-index:                1;
}

.banner-size-1 .item
{
    background-color:       ´;
    display:                block;
}



/* ========================================================================== */
/* ANIMATION DEFINITIONS                                                      */
/* ========================================================================== */


@keyframes slidelogo {
0% {
    transform:              translate3d(-300px, 0px,0px);
}

4% {
    transform:              translate3d(-300px, 100px,0px);
}

5% {
    transform:              translate3d(0px, 100px,0px);
}

20% {
    transform:              translate3d(0px, 100px,0px);
}

22% {
    transform:              translate3d(0px,0px,0px);
}

100% {
    transform:              translate3d(0px,0px,0px);
}

}

@-webkit-keyframes slidelogo {
0% {
    transform:              translate3d(-300px, 0px,0px);
}

4% {
    transform:              translate3d(-300px, 100px,0px);
}

5% {
    transform:              translate3d(0px, 100px,0px);
}

20% {
    transform:              translate3d(0px, 100px,0px);
}

22% {
    transform:              translate3d(0px,0px,0px);
}

100% {
    transform:              translate3d(0px,0px,0px);
}

}

@-moz-keyframes slidelogo {
0% {
    transform:              translate3d(-300px, 0px,0px);
}

4% {
    transform:              translate3d(-300px, 100px,0px);
}

5% {
    transform:              translate3d(0px, 100px,0px);
}

20% {
    transform:              translate3d(0px, 100px,0px);
}

22% {
    transform:              translate3d(0px,0px,0px);
}

100% {
    transform:              translate3d(0px,0px,0px);
}

}

@-o-keyframes slidelogo {
0% {
    transform:              translate3d(-300px, 0px,0px);
}

4% {
    transform:              translate3d(-300px, 100px,0px);
}

5% {
    transform:              translate3d(0px, 100px,0px);
}

20% {
    transform:              translate3d(0px, 100px,0px);
}

22% {
    transform:              translate3d(0px,0px,0px);
}

100% {
    transform:              translate3d(0px,0px,0px);
}

}

@keyframes transparency {
0% {
    opacity:                0;
}

4% {
    opacity:                0;
}

5% {
    opacity:                0;
}

20% {
    opacity:                0;
}

22% {
    opacity:                1;
}

100% {
    opacity:                1;
}

}

@-webkit-keyframes transparency {
0% {
    opacity:                0;
}

4% {
    opacity:                0;
}

5% {
    opacity:                0;
}

20% {
    opacity:                0;
}

22% {
    opacity:                1;
}

100% {
    opacity:                1;
}

}

@-moz-keyframes transparency {
0% {
    opacity:                0;
}

4% {
    opacity:                0;
}

5% {
    opacity:                0;
}

20% {
    opacity:                0;
}

22% {
    opacity:                1;
}

100% {
    opacity:                1;
}

}

@-o-keyframes transparency {
0% {
    opacity:                0;
}

4% {
    opacity:                0;
}

5% {
    opacity:                0;
}

20% {
    opacity:                0;
}

22% {
    opacity:                1;
}

100% {
    opacity:                1;
}

}

@keyframes slidedeal {
0% {
    transform:              rotate(355deg) translate3d(-300px, 0px,0px);
}

4% {
    transform:              rotate(355deg) translate3d(-300px, 0px,0px);
}

7% {
    transform:              rotate(355deg) translate3d(0px, 0px,0px);
}

100% {
    transform:              rotate(355deg) translate3d(00px, 0px,0px);
}

}

@-webkit-keyframes slidedeal {
0% {
    transform:              rotate(355deg) translate3d(-300px, 0px,0px);
}

4% {
    transform:              rotate(355deg) translate3d(-300px, 0px,0px);
}

7% {
    transform:              rotate(355deg) translate3d(0px, 0px,0px);
}

100% {
    transform:              rotate(355deg) translate3d(00px, 0px,0px);
}

}

@-moz-keyframes slidedeal {
0% {
    transform:              rotate(355deg) translate3d(-300px, 0px,0px);
}

4% {
    transform:              rotate(355deg) translate3d(-300px, 0px,0px);
}

7% {
    transform:              rotate(355deg) translate3d(0px, 0px,0px);
}

100% {
    transform:              rotate(355deg) translate3d(00px, 0px,0px);
}

}

@-o-keyframes slidedeal {
0% {
    transform:              rotate(355deg) translate3d(-300px, 0px,0px);
}

4% {
    transform:              rotate(355deg) translate3d(-300px, 0px,0px);
}

7% {
    transform:              rotate(355deg) translate3d(0px, 0px,0px);
}

100% {
    transform:              rotate(355deg) translate3d(00px, 0px,0px);
}

}

@keyframes slideimage {
0% {
    transform:              translate3d(300px, 0px,0px);
}

4% {
    transform:              translate3d(300px, 0px,0px);
}

10% {
    transform:              translate3d(0px, 0px,0px);
}

30% {
    transform:              translate3d(0px, 0px,0px) scale(1);
}

35% {
    transform:              translate3d(0px, 0px,0px) scale(0.8);
}

80% {
    transform:              translate3d(0px, 0px,0px) scale(0.8);
}

85% {
    transform:              translate3d(0px, 0px,0px) scale(1);
}

100% {
    transform:              translate3d(0px,0px,0px);
}

}

@-webkit-keyframes slideimage {
0% {
    transform:              translate3d(300px, 0px,0px);
}

4% {
    transform:              translate3d(300px, 0px,0px);
}

10% {
    transform:              translate3d(0px, 0px,0px);
}

30% {
    transform:              translate3d(0px, 0px,0px) scale(1);
}

35% {
    transform:              translate3d(0px, 0px,0px) scale(0.8);
}

80% {
    transform:              translate3d(0px, 0px,0px) scale(0.8);
}

85% {
    transform:              translate3d(0px, 0px,0px) scale(1);
}

100% {
    transform:              translate3d(0px,0px,0px);
}

}

@-moz-keyframes slideimage {
0% {
    transform:              translate3d(300px, 0px,0px);
}

4% {
    transform:              translate3d(300px, 0px,0px);
}

10% {
    transform:              translate3d(0px, 0px,0px);
}

30% {
    transform:              translate3d(0px, 0px,0px) scale(1);
}

35% {
    transform:              translate3d(0px, 0px,0px) scale(0.8);
}

80% {
    transform:              translate3d(0px, 0px,0px) scale(0.8);
}

85% {
    transform:              translate3d(0px, 0px,0px) scale(1);
}

100% {
    transform:              translate3d(0px,0px,0px);
}

}

@-o-keyframes slideimage {
0% {
    transform:              translate3d(300px, 0px,0px);
}

4% {
    transform:              translate3d(300px, 0px,0px);
}

10% {
    transform:              translate3d(0px, 0px,0px);
}

30% {
    transform:              translate3d(0px, 0px,0px) scale(1);
}

35% {
    transform:              translate3d(0px, 0px,0px) scale(0.8);
}

80% {
    transform:              translate3d(0px, 0px,0px) scale(0.8);
}

85% {
    transform:              translate3d(0px, 0px,0px) scale(1);
}

100% {
    transform:              translate3d(0px,0px,0px);
}

}

@keyframes fadeimage {
0% {
    opacity:                0;
}

22% {
    opacity:                0;
}

25% {
    opacity:                1;
}

100% {
    opacity:                1;
}

}

@-webkit-keyframes fadeimage {
0% {
    opacity:                0;
}

22% {
    opacity:                0;
}

25% {
    opacity:                1;
}

100% {
    opacity:                1;
}

}

@-moz-keyframes fadeimage {
0% {
    opacity:                0;
}

22% {
    opacity:                0;
}

25% {
    opacity:                1;
}

100% {
    opacity:                1;
}

}

@-o-keyframes fadeimage {
0% {
    opacity:                0;
}

22% {
    opacity:                0;
}

25% {
    opacity:                1;
}

100% {
    opacity:                1;
}

}



/* ========================================================================== */
/* CSS FULLY LOADED BEACON USED BY JS TIMEOUT TO DETERMINE WHEN CSS IS LOADED */
/* ========================================================================== */


.css-fully-loaded
{
    font-family:            Loaded;
}