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


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

.item:before
{
    position:               absolute;
    display:                block;
    width:                  229px;
    height:                 84px;
    bottom:                 40px;
    top:                    auto;
    content:                "\20 ";
    z-index:                3;
    transition:             all 0.3s;
    background-position:    -14px 0;
    background-image:       url(../images/cruises/spritemap.png);
    background-size:229px;
    background-repeat:      no-repeat;
    left:                   0;
    animation:              voiture 10s infinite ease-out;
    -webkit-animation:      voiture 10s infinite ease-out;
    -moz-animation:         voiture 10s infinite ease-out;
    -o-animation:           voiture 10s infinite ease-out;
}

.item:after
{
    background-color:       #052850;
    width:                  100%;
    height:                 40px;
    content:                "\20 \20 ";
    z-index:                2;
    position:               absolute;
    bottom:                 40px;
    top:                    auto;
    transition:             opacity .3s;
    display:                block;
    animation:              voitureleft 10s infinite ease-out;
    -webkit-animation:      voitureleft 10s infinite ease-out;
    -moz-animation:         voitureleft 10s infinite ease-out;
    -o-animation:           voitureleft 10s infinite ease-out;
}

.logo
{
    background-color:       transparent;
    animation:              slidelogotop 10s infinite ease-out;
    -webkit-animation:      slidelogotop 10s infinite ease-out;
    -moz-animation:         slidelogotop 10s infinite ease-out;
    -o-animation:           slidelogotop 10s infinite ease-out;
    background-size:contain;
}

.products
{
    background-color:       #1FABC4;
    opacity:                1;
}

.item
{
    background-color:       transparent;
    display:                block;
    width:                  298px;
    height:                 228px;
    top:                    20px;
}

.item:hover:before, .item.fx-hover:before
{
    left:                   -16px;
}

.item:hover:after, .item.fx-hover:after
{
    opacity:                1;
    left:                   0;
}

.item:hover .metadata-title, .item.fx-hover .metadata-title
{
    left:                   10px;
}

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

.item:hover .metadata-text, .item.fx-hover .metadata-text
{
    left:                   10px;
}

.item:hover .metadata-price-parts, .item.fx-hover .metadata-price-parts
{
    opacity:                1;
}

.item:hover .metadata-sale-price-parts, .item.fx-hover .metadata-sale-price-parts
{
    opacity:                1;
}

.item:hover .metadata-c2a, .item.fx-hover .metadata-c2a
{
    color:                  #EB4B19;
    opacity:                1;
}

.item:hover .item:after, .item.fx-hover .item:after
{
    opacity:                1;
}

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

.item:hover .metadata-c2a:before, .item.fx-hover .metadata-c2a:before
{
    background-color:       #fff;
    color:                  #1FABC4;
}

.banner-item-image
{
    width:                  376px;
    height:                 188px;
    background-size:        cover;
    transition:             all linear 2s;
    left:                   -48px;
}

.metadata-price-parts
{
    display:                block;
    font-size:              12px;
    height:                 16px;
    color:                  #fff;
    transition:             opacity .3s;
    width:                  100px;
    bottom:                 50px;
    right:                  8px;
    line-height:            16px;
    font-family:            'Brown', Arial, "Helvetica Neue", Helvetica, sans-serif;
    text-align:             right;
    z-index:                4;
    -webkit-font-smoothing: antialiased;
    animation:              voitureleft 10s infinite ease-out;
    -webkit-animation:      voitureleft 10s infinite ease-out;
    -moz-animation:         voitureleft 10s infinite ease-out;
    -o-animation:           voitureleft 10s infinite ease-out;
}


.metadata-manufacturer
{
    display:                block;
    width:                  160px;
    height:                 10px;
    font-family:            Futura, "Century Gothic", AppleGothic, sans-serif;
    font-size:              8px;
    line-height:            10px;
    bottom:                 52px;
    left:                   20px;
    color:                  #EB4B19;
    transition:             all 0.3s;
    text-align:             left;
    z-index:                3;
    -webkit-font-smoothing: antialiased;
    font-stretch:           normal;
    animation:              voiture 10s infinite ease-out;
    -webkit-animation:      voiture 10s infinite ease-out;
    -moz-animation:         voiture 10s infinite ease-out;
    -o-animation:           voiture 10s infinite ease-out;
}

.metadata-title
{
    display:                block;
    font-family:            Futura, "Century Gothic", AppleGothic, sans-serif;
    color:                  #052850;
    bottom:                 82px;
    font-size:              12px;
    line-height:            14px;
    height:                 28px;
    z-index:                3;
    transition:             all 0.3s;
    width:                  150px;
    left:                   20px;
    text-align:             left;
    text-transform:         uppercase;
    font-stretch:           normal;
    animation:              voiture 10s infinite ease-out;
    -webkit-animation:      voiture 10s infinite ease-out;
    -moz-animation:         voiture 10s infinite ease-out;
    -o-animation:           voiture 10s infinite ease-out;
}

.metadata-text
{
    display:                block;
    color:                  #052850;
    font-size:              9px;
    line-height:            11px;
    height:                 11px;
    width:                  160px;
    text-align:             left;
    left:                   20px;
    bottom:                 70px;
    font-family:            Futura, "Century Gothic", AppleGothic, sans-serif;
    transition:             all 0.3s;
    z-index:                3;
    font-stretch:           normal;
    animation:              voiture 10s infinite ease-out;
    -webkit-animation:      voiture 10s infinite ease-out;
    -moz-animation:         voiture 10s infinite ease-out;
    -o-animation:           voiture 10s infinite ease-out;
}

.metadata-price-after
{
    font-size:              8px;
    margin-left:            2px;
}

.metadata-price-before
{
    font-size:              8px;
    margin-right:           18px;
}

.metadata-price-decimal
{
    display:                none;
}

.metadata-price-separator
{
    display:                none;
}

.metadata-price-currency-right
{
    display:                none;
}

.metadata-sale-price-after
{
    font-size:              10px;
    margin-left:            2px;
}

.metadata-sale-price-before
{
    font-size:              10px;
    margin-right:           18px;
}

.metadata-sale-price-decimal
{
    display:                none;
}

.metadata-sale-price-separator
{
    display:                none;
}

.metadata-sale-price-currency-right
{
    display:                none;
}

.metadata-price-integer:before
{
    position:               absolute;
    content:                "\20AC ";
    margin-left:            -15px;
}

.metadata-sale-price-integer:before
{
    position:               absolute;
    content:                "\20AC ";
    margin-left:            -15px;
}

.metadata-c2a
{
    background-color:       #1FABC4;
    height:                 40px;
    display:                block;
    z-index:                5;
    -webkit-font-smoothing: antialiased;
}

.metadata-c2a:before
{
    background-color:       transparent;
    box-sizing:             border-box;
    width:                  100px;
    height:                 20px;
    display:                block;
    border:                 1px solid #FFFFFF;
    font-family:            Futura, "Century Gothic", AppleGothic, sans-serif;
    font-size:              8px;
    line-height:            19px;
    color:                  #fff;
    left:                   99px;
    bottom:                 9px;
    transition:             all 0.3s;
    font-stretch:           normal;
    position:               absolute;
    content:                "LEARN MORE";
    animation:              fadeincta 10s infinite ease-in;
    -webkit-animation:      fadeincta 10s infinite ease-in;
    -moz-animation:         fadeincta 10s infinite ease-in;
    -o-animation:           fadeincta 10s infinite ease-in;
}

.metadata-c2a:after
{
    position:               absolute;
}

.metadata-price-parts:before
{
    position:               absolute;
}

.metadata-price-parts:after
{
    position:               absolute;
}



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


.banner-size-1
{
    width:                  300px;
}

.banner-size-1 .logo
{
    background-image:       url(../images/cruises/logo.png);
    background-repeat:      no-repeat;
    top:                    1px;
    left:                   1px;
    width:                  298px;
    height:                 40px;
    z-index:                2;
}

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

.banner-size-1 .item
{
    height:                 248px;
    top:                    0;
}

.banner-size-1 .item:hover .metadata-c2a, .banner-size-1 .item.fx-hover .metadata-c2a
{
    color:                  #1FABC4;
}

.banner-size-1 .banner-item-image
{
    height:                 208px;
}

.banner-size-1 .metadata-manufacturer
{
    color:                  #1FABC4;
}

.banner-size-1 .metadata-price-parts
{
    font-family:            Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-stretch:           normal;
}

.banner-size-1 .metadata-sale-price-parts
{
    font-family:            Arial, "Helvetica Neue", Helvetica, sans-serif;
}



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


@keyframes slidelogotop {
0% {
    transform:              translate3d(0px, -500px,0px);
}
6% {
    transform:              translate3d(0px,0px,0px);
}
100% {
    transform:              translate3d(0px,0px,0px);
}

}


@-webkit-keyframes slidelogotop {
0% {
    transform:              translate3d(0px, -500px,0px);
}
6% {
    transform:              translate3d(0px,0px,0px);
}
100% {
    transform:              translate3d(0px,0px,0px);
}

}



@-moz-keyframes slidelogotop {
0% {
    transform:              translate3d(0px, -500px,0px);
}
6% {
    transform:              translate3d(0px,0px,0px);
}
100% {
    transform:              translate3d(0px,0px,0px);
}

}



@-o-keyframes slidelogotop {
0% {
    transform:              translate3d(0px, -500px,0px);
}
6% {
    transform:              translate3d(0px,0px,0px);
}
100% {
    transform:              translate3d(0px,0px,0px);
}

}


@keyframes voiture {
0% {
    transform:              translateX(-229px);
    -webkit-transform:      translateX(-229px);
    -moz-transform:         translateX(-229px);
    -o-transform:           translateX(-229px);
}
6% {
    transform:              translateX(-229px);
    -webkit-transform:      translateX(-229px);
    -moz-transform:         translateX(-229px);
    -o-transform:           translateX(-229px);
}
11% {
    transform:              translateX(0);
    -webkit-transform:      translateX(0);
    -moz-transform:         translateX(0);
    -o-transform:           translateX(0);
}
100% {
    transform:              translateX(0);
    -webkit-transform:      translateX(0);
    -moz-transform:         translateX(0);
    -o-transform:           translateX(0);
}

}

@-webkit-keyframes voiture {
0% {
    transform:              translateX(-300px);
    -webkit-transform:      translateX(-300px);
    -moz-transform:         translateX(-300px);
    -o-transform:           translateX(-300px);
}
6% {
    transform:              translateX(-300px);
    -webkit-transform:      translateX(-300px);
    -moz-transform:         translateX(-300px);
    -o-transform:           translateX(-300px);
}
11% {
    transform:              translateX(0);
    -webkit-transform:      translateX(0);
    -moz-transform:         translateX(0);
    -o-transform:           translateX(0);
}
100% {
    transform:              translateX(0);
    -webkit-transform:      translateX(0);
    -moz-transform:         translateX(0);
    -o-transform:           translateX(0);
}

}

@-moz-keyframes voiture {
0% {
    transform:              translateX(-229px);
    -webkit-transform:      translateX(-229px);
    -moz-transform:         translateX(-229px);
    -o-transform:           translateX(-229px);
}
6% {
    transform:              translateX(-229px);
    -webkit-transform:      translateX(-229px);
    -moz-transform:         translateX(-229px);
    -o-transform:           translateX(-229px);
}
11% {
    transform:              translateX(0);
    -webkit-transform:      translateX(0);
    -moz-transform:         translateX(0);
    -o-transform:           translateX(0);
}
100% {
    transform:              translateX(0);
    -webkit-transform:      translateX(0);
    -moz-transform:         translateX(0);
    -o-transform:           translateX(0);
}

}
@-o-keyframes voiture {
0% {
    transform:              translateX(-229px);
    -webkit-transform:      translateX(-229px);
    -moz-transform:         translateX(-229px);
    -o-transform:           translateX(-229px);
}
6% {
    transform:              translateX(-229px);
    -webkit-transform:      translateX(-229px);
    -moz-transform:         translateX(-229px);
    -o-transform:           translateX(-229px);
}
11% {
    transform:              translateX(0);
    -webkit-transform:      translateX(0);
    -moz-transform:         translateX(0);
    -o-transform:           translateX(0);
}
100% {
    transform:              translateX(0);
    -webkit-transform:      translateX(0);
    -moz-transform:         translateX(0);
    -o-transform:           translateX(0);
}

}

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

15% {
    opacity:                0;
}

19% {
    opacity:                1;
}
100% {
    opacity:                1;
}

}

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

15% {
    opacity:                0;
}

19% {
    opacity:                1;
}
100% {
    opacity:                1;
}

}

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

15% {
    opacity:                0;
}

19% {
    opacity:                1;
}
100% {
    opacity:                1;
}

}

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

15% {
    opacity:                0;
}

19% {
    opacity:                1;
}
100% {
    opacity:                1;
}

}


@keyframes voitureleft {
0% {
    transform:              translateY(40px);
    -webkit-transform:      translateY(40px);
    -moz-transform:         translateY(40px);
    -o-transform:           translateY(40px);
}
11% {
    transform:              translateY(40px);
    -webkit-transform:      translateY(40px);
    -moz-transform:         translateY(40px);
    -o-transform:           translateY(40px);
}

15% {
    transform:              translateY(0);
    -webkit-transform:      translateY(0);
    -moz-transform:         translateY(0);
    -o-transform:           translateY(0);
}

100% {
    transform:              translateY(0);
    -webkit-transform:      translateY(0);
    -moz-transform:         translateY(0);
    -o-transform:           translateY(0);
}
}
@-webkit-keyframes voitureleft {
0% {
    transform:              translateY(40px);
    -webkit-transform:      translateY(40px);
    -moz-transform:         translateY(40px);
    -o-transform:           translateY(40px);
}
11% {
    transform:              translateY(40px);
    -webkit-transform:      translateY(40px);
    -moz-transform:         translateY(40px);
    -o-transform:           translateY(40px);
}

15% {
    transform:              translateY(0);
    -webkit-transform:      translateY(0);
    -moz-transform:         translateY(0);
    -o-transform:           translateY(0);
}

100% {
    transform:              translateY(0);
    -webkit-transform:      translateY(0);
    -moz-transform:         translateY(0);
    -o-transform:           translateY(0);
}
}
@-moz-keyframes voitureleft {
0% {
    transform:              translateY(40px);
    -webkit-transform:      translateY(40px);
    -moz-transform:         translateY(40px);
    -o-transform:           translateY(40px);
}
11% {
    transform:              translateY(40px);
    -webkit-transform:      translateY(40px);
    -moz-transform:         translateY(40px);
    -o-transform:           translateY(40px);
}

15% {
    transform:              translateY(0);
    -webkit-transform:      translateY(0);
    -moz-transform:         translateY(0);
    -o-transform:           translateY(0);
}

100% {
    transform:              translateY(0);
    -webkit-transform:      translateY(0);
    -moz-transform:         translateY(0);
    -o-transform:           translateY(0);
}
}
@-o-keyframes voitureleft {
0% {
    transform:              translateY(40px);
    -webkit-transform:      translateY(40px);
    -moz-transform:         translateY(40px);
    -o-transform:           translateY(40px);
}
11% {
    transform:              translateY(40px);
    -webkit-transform:      translateY(40px);
    -moz-transform:         translateY(40px);
    -o-transform:           translateY(40px);
}

15% {
    transform:              translateY(0);
    -webkit-transform:      translateY(0);
    -moz-transform:         translateY(0);
    -o-transform:           translateY(0);
}

100% {
    transform:              translateY(0);
    -webkit-transform:      translateY(0);
    -moz-transform:         translateY(0);
    -o-transform:           translateY(0);
}
}



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


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