:root {
    --swiper-theme-color: #d4a024;
}

.share_side, .red_side { display: none !important; }

.container-timeline { overflow:hidden; display: flex; justify-content: center; align-items: center; background-color: #fff; flex-direction: column; position: relative; }
.container-timeline .wrap-video { position: absolute; display: none; width: 100%; height: 100%; justify-content: center; align-items: center; background-color: rgba(0,0,0,0.7); z-index: 1; left: 0; top:0; }
.container-timeline .wrap-video .btn-close { position: absolute; top: 20px; right: 30px; color: #FFF; font-size: 30px; cursor: pointer; }
.container-timeline .wrap-video video {width: 90%; margin: 0 auto; display: block;}

.timeline { width: 100%; background-color: #fff; box-shadow: 0 5px 25px 5px rgba(0, 0, 0, 0.2); }
.timeline .swiper-container { height: 100vh; max-height: 670px; width: 100%; position: relative; background-color: #000000; }

.timeline .swiper-wrapper {
    transition: 2s cubic-bezier(0.68, -0.4, 0.27, 1.34) 0.2s;
}
.timeline .swiper-slide { position: relative; color: #fff; overflow: hidden; background-size: cover; background-repeat: no-repeat; background-position: center left 15%; }
.timeline .swiper-slide::after { content: ""; position: absolute; z-index: 1; right: 0; bottom: 0; width: 100%; height: 100%; content: ''; display: block;
    background: linear-gradient(135deg,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 45%,rgba(0,0,0,0.5) 65%,rgba(0,0,0,0.9) 95%,rgba(0,0,0,0.95) 100%);
}
.marine .timeline .swiper-slide::after { content: ""; position: absolute; z-index: 1; right: 0; bottom: 0; width: 100%; height: 100%; content: ''; display: block;
    background: linear-gradient(135deg,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 45%,rgba(0,0,0,0.5) 65%,rgba(0,0,0,0.9) 95%,rgba(0,0,0,0.95) 100%);
}


.timeline .swiper-slide .timeline-year { display: block; font-style: italic; font-size: 42px; margin-bottom: 50px; -webkit-transform: translate3d(20px, 0, 0); transform: translate3d(20px, 0, 0); color: #d4a024; font-weight: 300; opacity: 0; transition: .2s ease .2s; }
.timeline .swiper-slide .timeline-subtitle { width: 75%; float: right; margin: 12px 0 20px; color: #d4a024; font-weight: 700; font-size: 18px; line-height: 22px; opacity: 0; -webkit-transform: translate3d(20px, 0, 0); transform: translate3d(20px, 0, 0); transition: .2s ease .3s; }
.timeline .swiper-slide .timeline-cta { clear: both; margin: 15px 0; -webkit-transform: translate3d(20px, 0, 0); transform: translate3d(20px, 0, 0); transition: .2s ease .4s; opacity: 0; }
.timeline .swiper-slide .timeline-title { clear: both; font-weight: 800; font-size: 28px; margin: 0 0 30px; opacity: 0; -webkit-transform: translate3d(20px, 0, 0); transform: translate3d(20px, 0, 0); transition: .2s ease .5s; }
.timeline .swiper-slide .timeline-text { font-size:13px; line-height: 18px; opacity: 0; -webkit-transform: translate3d(20px, 0, 0); transform: translate3d(20px, 0, 0); transition: .2s ease .6s; }
.timeline .swiper-slide ol { margin: 0 10px 0 0; padding: 0; opacity: 0; -webkit-transform: translate3d(20px, 0, 0); transform: translate3d(20px, 0, 0); transition: .2s ease .6s; }
.timeline .swiper-slide ol li { list-style-position: inside; padding: 0; }
.timeline .swiper-slide ul { margin: 0; list-style: none; padding: 0; opacity: 0; -webkit-transform: translate3d(20px, 0, 0); transform: translate3d(20px, 0, 0); transition: .2s ease .6s; }
.timeline .swiper-slide ul li { list-style-position: inside; padding: 0; }
.timeline .swiper-slide .timeline-cta a { color: #FFF; text-decoration: none; font-size: 20px; }
.timeline .swiper-slide .timeline-cta a .fa { margin-right: 5px; }
.timeline .swiper-slide .timeline-cta .thumb { clear: both; position: relative; width: 160px; display: inline-block; cursor: pointer; }
.timeline .swiper-slide .timeline-cta .thumb img { width: 100%; border: 1px solid #FFF; }
.timeline .swiper-slide .timeline-cta .thumb .fa { position: absolute; top: 50%; left: 50%; margin: -20px 0 0 -17px; font-size: 40px; color: #FFF; transition: color 200ms ease-out; }
.timeline .swiper-slide .timeline-cta .thumb:hover .fa { color: #d4a024; }
.timeline .swiper-slide-active .timeline-year { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); transition: .4s ease 1.5s; }
.timeline .swiper-slide-active .timeline-subtitle { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); transition: .4s ease 1.6s; }
.timeline .swiper-slide-active .timeline-cta { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); transition: .4s ease 1.7s; }
.timeline .swiper-slide-active .timeline-title { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); transition: .4s ease 1.8s; }
.timeline .swiper-slide-active .timeline-text { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); transition: .4s ease 1.9s; }
.timeline .swiper-slide-active ol { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); transition: .4s ease 1.9s; }
.timeline .swiper-slide-active ul { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); transition: .4s ease 1.9s; }
.swiper-button-next,
.swiper-button-prev { background-size: 20px 20px; top: 15%; width: 24px; height: 50px; margin-top: 0; z-index: 2; transition: .2s; }
.swiper-button-prev { left: 8%; }
.swiper-button-prev:hover { -webkit-transform: translateX(-3px); transform: translateX(-3px); }
.swiper-button-next { right: 8%; }
.swiper-button-next:hover { -webkit-transform: translateX(3px); transform: translateX(3px); }
.timeline .swiper-container-vertical>.swiper-pagination-bullets { width: 50px; right: 5%; }
.timeline .swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet { margin: 10px auto; display: block !important; }
.swiper-pagination-bullet { background: none; width: 100%; height: auto; }
.swiper-button-next,
.swiper-button-prev,
.swiper-pagination .anno:focus { outline: 0; }
.swiper-pagination .anno { font-size: 18px; line-height:20px; text-align: center; width: 50px; color: #d4a024; font-style: italic; text-indent: -4px; }
.timeline .swiper-slide::after { width: 100%; }
.timeline .mobile-img { display: block; width: 100%; margin-bottom: -50%; }

.pagination-main { position: absolute; cursor: move; right: 3.5%; width: 50px; text-align: center; height: 396px; top: 50%; transform: translateY(-50%); z-index: 2; }
.pagination-wrapper { position: absolute; cursor:move; right: 5%; width: 50px; text-align: center; height: 396px; overflow: hidden; top: 50%; transform: translateY(-50%); z-index: 2; }
.pagination-wrapper .swiper-pagination { margin: 0 auto; top: 0; transition: all 500ms ease-out; }
.pagination-wrapper .swiper-pagination.ui-draggable-dragging { transition: none !important; }
.pagination-wrapper .swiper-pagination.ui-draggable-dragging div { pointer-events: none; }
.pagination-wrapper .swiper-pagination div { margin: 4px auto; outline: none; cursor:move; }

.pagination-main { width: 150px; } /* babs */
.pagination-wrapper { left: 50%; margin-left: -25px; } /* babs */
.bck-nav-ico { background: url(/AllSites/Images/storia/0_nav_ico.png) right center no-repeat; background-size: 25%; } /* babs */


@media screen and (min-width: 768px) and (max-width: 1024px) {
    .timeline .swiper-slide-content { right: 20% !important; }
}

@media screen and (max-width: 767px) {
    .timeline { padding-top: 32px; }
    .timeline .swiper-slide { background-image: none !important; }
    .swiper-button-next,
    .swiper-button-prev { top: 35%; }
    .timeline .wrap-text { position: relative; width: 90%; top: 35%; left: 5%; height: 62%; text-align: center; z-index: 2; margin-bottom: 40px; }
    .timeline .swiper-slide .timeline-year { margin-bottom: 20px; }
    .timeline .swiper-container { max-height: none; min-height: auto; height: auto; overflow: visible; }
    .swiper-button-next:after, .swiper-button-prev:after { font-size: 30px; }
    .swiper-button-prev { left: 5%; }
    .swiper-button-next { right: 5%; }
    .container-timeline .wrap-video { position: fixed; }
    .container-timeline .wrap-video .btn-close { top: 29%; right: 18px; }
    .swiper-lazy-preloader { top: 20%; }
    .timeline .swiper-slide .timeline-cta { margin-bottom: 30px; }    
    .swiper-button-next,
    .swiper-button-prev { display: none; }
    .pagination-main,
    .pagination-wrapper { right: auto; width: 100%; left: 0; margin-left: 0; height: 32px; top: 0; transform: none; background-color: #000; overflow-x:scroll; }
    .pagination-wrapper div { margin: 2px 4px; }
    .swiper-pagination-bullet { opacity: .4; background: none; width: auto; }
    .swiper-pagination-bullet-active { opacity: 1; }
    .swiper-pagination .anno { width: 44px; line-height:18px; }
    .timeline .swiper-slide .timeline-subtitle { width: 100%; }
    .pagination-wrapper .swiper-pagination div { margin: 3px; display: inline-block; }
    .timeline .swiper-slide .timeline-text { font-size:12px; }
    .swiper-pagination { text-align: left; left: 0; }
    .custom-button-prev,
    .custom-button-next { display: none; }
    .bck-nav-ico  { background-image: none; }
    .timeline .swiper-slide-content { right: 22%; } /* babs */
    .marine .timeline .swiper-container {
        background: rgb(2,32,45);
        background: -moz-linear-gradient(top, rgba(2,32,45,1) 50%, rgba(0,0,0,1) 90%, rgba(0,0,0,1) 100%);
        background: -webkit-linear-gradient(top, rgba(2,32,45,1) 50%,rgba(0,0,0,1) 90%,rgba(0,0,0,1) 100%);
        background: linear-gradient(to bottom, rgba(2,32,45,1) 50%,rgba(0,0,0,1) 90%,rgba(0,0,0,1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#000000',GradientType=0 );
    }
}

@media screen and (min-width: 768px) {
    .marine .timeline .swiper-container { background-color:black; }

    .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction { bottom: 0; }
    .timeline .mobile-img { display: none; }
    .timeline .swiper-slide-content { position: absolute; width: 430px; max-width: 430px; right: 50%; -webkit-transform: translate(50%, 0); transform: translate(50%, 0); z-index: 2; right: 14%; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); font-size: 11px; text-align: right; }
    .timeline .swiper-slide .timeline-year { margin-bottom: 10px; font-size: 32px; margin-right: 2px; }
    .timeline .swiper-slide .timeline-title { line-height: 32px; margin: 0 0 15px; }
      
    .swiper-button-prev { 
        top: -10%; right: calc(50% - 20px); left:auto; position: absolute; z-index: 2;
        background-color: #d4a024; height: 25px; line-height: 24px; width: 25px; border-radius: 25px; text-align:center;
        font-size: 24px; color: #013044; -webkit-transform: rotate(90deg) translate(0, 10px); transform: rotate(90deg) translate(0, 10px);
    }
    .swiper-button-prev:hover { -webkit-transform: rotate(90deg) translate(-3px, 10px); transform: rotate(90deg) translate(-3px, 10px); }
    .swiper-button-next { 
        bottom: -10%; top:auto; right: calc(50% - 20px); left:auto; position: absolute; z-index: 2;
        background-color: #d4a024; height: 25px; line-height: 24px; width: 25px; border-radius: 25px; text-align:center;
        font-size: 24px; color: #013044; -webkit-transform: rotate(90deg) translate(0, 10px); transform: rotate(90deg) translate(0, 10px);
    }
    .swiper-button-next:hover { -webkit-transform: rotate(90deg) translate(3px, 10px); transform: rotate(90deg) translate(3px, 10px); }
    .swiper-button-prev:after,
    .swiper-button-next:after { display: none; }
    .swiper-button-prev i,
    .swiper-button-next i { line-height: 23px; font-size: 22px; }

    .custom-button-prev { top: -20%; right: calc(50% - 10px); position: absolute; z-index: 2; font-size: 24px; color: #013044; transition: .2s; cursor: pointer; background-color: #d4a024; height: 25px; line-height: 24px; width: 25px; border-radius: 25px; }
    .custom-button-next { bottom: -20%; right: calc(50% - 10px); position: absolute; z-index: 2; font-size: 24px; color: #013044; transition: .2s; cursor: pointer; background-color: #d4a024; height: 25px; line-height: 24px; width: 25px; border-radius: 25px; }
    .custom-button-prev i,
    .custom-button-next i { line-height: 24px; }
    .custom-button-prev.new,
    .custom-button-next.new {
        font-size:16px;
    }

    .custom-button-prev:hover { -webkit-transform: translateY(-3px); transform: translateY(-3px); }
    .custom-button-next:hover { -webkit-transform: translateY(3px); transform: translateY(3px); }
}