/*13 inch retina*/
@media (min-width: 799px) and (max-width: 1350px) {
    body .timeline .swiper-pagination-bullet {
        margin: 7px 0 !important;
    }
}
 .title {
     font-size: 38px;
     color: #616161;
     font-style: italic;
     font-weight: 800;
}
 .timeline {
     width: 100%;
     background-color: #fff;
     box-shadow: 0 5px 25px 5px rgba(0, 0, 0, 0.2);
      margin-bottom: 0px !important;
     list-style: none;
      padding: 0px !important;

}
 .timeline .swiper-container {
     height: 100vh;
     width: 100%;
     position: relative;
}
 .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 center;
}
 .timeline .swiper-slide::after {
    /* content: "";
     position: absolute;
     z-index: 1;
     right: -115%;
     bottom: -10%;
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.7);
     box-shadow: -230px 0 150px 60vw rgba(0, 0, 0, 0.7);
     border-radius: 100%;
    */
}
 .timeline .swiper-slide-content {
     position: absolute;
     text-align: center;
     width: 100%;
     right: 0% !important;
     top: 50%;
     -webkit-transform: translate(50%, 0);
     transform: translate(50%, 0);
     font-size: 12px;
     z-index: 2;
}
 .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: #bad0e8;
     font-weight: 300;
     opacity: 0;
     transition: .2s ease .4s;
}
 .timeline .swiper-slide .timeline-title {
     font-weight: 800;
     font-size: 34px;
     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 {
     line-height: 2;
     opacity: 0;
     -webkit-transform: translate3d(20px, 0, 0);
     transform: translate3d(20px, 0, 0);
     transition: .2s ease .6s;
}
 .timeline .swiper-slide-active .timeline-year {
     opacity: 1;
     -webkit-transform: translate3d(0, 0, 0);
     transform: translate3d(0, 0, 0);
     transition: .4s ease 1.6s;
}
 .timeline .swiper-slide-active .timeline-title {
     opacity: 1;
     -webkit-transform: translate3d(0, 0, 0);
     transform: translate3d(0, 0, 0);
     transition: .4s ease 1.7s;
}
 .timeline .swiper-slide-active .timeline-text {
     opacity: 1;
     -webkit-transform: translate3d(0, 0, 0);
     transform: translate3d(0, 0, 0);
     transition: .4s ease 1.8s;
     font-weight: 100;
}
 .timeline .swiper-pagination {
     right: 15% !important;
     height: 100%;
     display: none;
     flex-direction: column;
     justify-content: center;
     font-weight: 300;
     font-size: 18px;
     z-index: 1;
}
 .timeline .swiper-pagination::before {
     content: "";
     position: absolute;
     left: -30px;
     top: 0;
     height: 100%;
     width: 1px;
     background-color: rgba(255, 255, 255, 0.2);
}
 .timeline .swiper-pagination-bullet {
     width: auto;
     height: auto;
     text-align: center;
     opacity: 1;
     background: transparent;
     color: #fff;
     margin: 10px 0 !important;
     position: relative;
}
 .timeline .swiper-pagination-bullet::before {
     content: "";
     position: absolute;
     top: 8px;
     left: -32.5px;
     width: 6px;
     height: 6px;
     border-radius: 100%;
     background-color: #bad0e8;
     -webkit-transform: scale(0);
     transform: scale(0);
     transition: .2s;
}
 .timeline .swiper-pagination-bullet-active {
     color: #bad0e8;
}
 .timeline .swiper-pagination-bullet-active::before {
     -webkit-transform: scale(1);
     transform: scale(1);
}
 .timeline .swiper-button-next, .timeline .swiper-button-prev {
     background-size: 20px 20px;
     top: 15%;
     width: 20px;
     height: 20px;
     margin-top: 0;
     z-index: 2;
     transition: .2s;
}
 .timeline .swiper-button-prev {
     left: 8%;
    background-size: 35px;
    width: 40px;
     background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23bad0e8'%2F%3E%3C%2Fsvg%3E");
}
 .timeline .swiper-button-prev:hover {
     -webkit-transform: translateX(-3px);
     transform: translateX(-3px);
}
 .timeline .swiper-button-next {
     right: 8%;
    background-size: 35px;
    width: 40px;
     background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23bad0e8'%2F%3E%3C%2Fsvg%3E");
}

 .timeline .swiper-button-next:hover {
     -webkit-transform: translateX(3px);
     transform: translateX(3px);
}
 @media screen and (min-width: 768px) {
     .timeline .swiper-slide::after {
         right: -30%;
         bottom: -8%;
         width: 240px;
         height: 50%;
        /*box-shadow: -230px 0 150px 50vw rgba(0, 0, 0, 0.7);
        */
    }
     .timeline .swiper-slide-content {
         right: 0%;
         top: 50%;
         -webkit-transform: translateY(-50%);
         transform: translateY(-50%);
         font-size: 13px;
         text-align: justify;
    }
     .timeline .swiper-slide .timeline-year {
         margin-bottom: 0;
         font-size: 32px;
    }
     .timeline .swiper-slide .timeline-title {
         font-size: 46px;
         margin: 0;
    }
     .timeline .swiper-pagination {
         display: flex;
    }
     .timeline .swiper-button-prev {
         top: 15%;
         left: auto;
         right: 15%;
         -webkit-transform: rotate(90deg) translate(0, 10px);
         transform: rotate(90deg) translate(0, 10px);
    }
     .timeline .swiper-button-prev:hover {
         -webkit-transform: rotate(90deg) translate(-3px, 10px);
         transform: rotate(90deg) translate(-3px, 10px);
    }
     .timeline .swiper-button-next {
         top: auto;
         bottom: 15%;
         right: 15%;
         -webkit-transform: rotate(90deg) translate(0, 10px);
         transform: rotate(90deg) translate(0, 10px);
    }
     .timeline .swiper-button-next:hover {
         -webkit-transform: rotate(90deg) translate(3px, 10px);
         transform: rotate(90deg) translate(3px, 10px);
    }
}
 @media screen and (min-width: 1024px) {
     .timeline .swiper-slide::after {
        /* right: -20%;
         bottom: -12%;
         width: 240px;
         height: 50%;
         /box-shadow: -230px 0 150px 39vw rgba(0, 0, 0, 0.7);
        */
    }
     .timeline .swiper-slide-content {
         right: 28%;
    }
}
 #timelineh {
     width: 870px;
     overflow: hidden;
     margin: 0px !important;
     position: relative;
}
 .dates {
     max-width:870px;
     width: 100% !important;
     height: 77px;
         margin: 0 !important;
     padding: 0;
     overflow: hidden;
     background: url('../images/line.png') left 45px repeat-x;
     margin-left: 158px !important;
     float: none;
    min-width: 50%;
    display: block;
    margin-left: 0 !important;
}
 .dates li {
     list-style: none;
     float: left;
     width: 6.2%;
     height: 50px;
     font-size: 16px;
     text-align: center;
     /*background: url('../images/biggerdot.png') center bottom no-repeat;*/
}
.dates a:hover{
	color: #bad0e8 !important
}
 .dates a, a.selected {
     line-height: 132px;
     padding-bottom: 10px;
     display: block;
     font-size: 12px !important;
}
 .dates .selected {
     font-size: 16px;
}
#dates_2.dates li{width: 14%}
#dates_3.dates li{width: 10%}
#dates_4.dates li{width: 12.5%}
#dates_6.dates li{width: 12.5%}
#dates_7.dates li{width: 7.6%}
#dates_8.dates li{width: 6.2%}
#dates_9.dates li{width: 8.3%}
#dates_10.dates li{width: 5%}
#dates_11.dates li{width: 10%}


 .issues {
     width: 800px;
     height: 75vh;
     overflow: hidden;
}
 .issues li {
     width: 870px;
     height: 75vh;
     list-style: none;
     float: left;
}
 .issues li img {
    margin: auto !important;
}
 .issues li h1 {
     color: #bad0e8;
     font-size: 30px;
     margin: 0px 0 10px;
     font-family: 'Abril Fatface', cursive;
}
 .issues li p {
     font-size: 14px;
     /*margin-right: 70px;*/
     color: #afafaf;
     font-weight: 100;
     line-height: 24px;
     text-align: justify;
}
 #grad_left, #grad_right {
     width: 100px;
     height: 350px;
     position: absolute;
     top: 0;
}
 #grad_left {
     left: 0;
     background: url('../images/grad_left.png') repeat-y;
}
 #grad_right {
     right: 0;
     background: url('../images/grad_right.png') repeat-y;
}
 #next, #prev {
     position: absolute;
     top: 0;
     font-size: 70px;
     top: 170px;
     width: 22px;
     height: 38px;
     background-position: 0 0;
     background-repeat: no-repeat;
     text-indent: -9999px;
     overflow: hidden;
}
 #next:hover, #prev:hover {
     background-position: 0 -76px;
}
 #next {
     right: 0;
     background-image: url('../images/next.png');
}
 #prev {
     left: 0;
     background-image: url('../images/prev.png');
}
 #next.disabled, #prev.disabled {
     opacity: 0.2;
}
 a.selected {
     color: #bad0e8;
     text-decoration: none;
}

a {
    color: #fff;
    text-decoration: none;
}

a:focus, a:hover {
    color: #fff;
    text-decoration: none;
}

.gold{
	color: #bad0e8 !important;
}