@import url("https://fonts.googleapis.com/css?family=Libre+Franklin:300,400,600,700,800,900&display=swap");
@import url("https://fonts.googleapis.com/css?family=Roboto:300&display=swap");

* {
    outline: none;
}

.or{
padding-top: 95px;
}


table th, table td {
    padding: 0em;
    text-align: left;
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-size: 14px;
    color: #ffffff;
}





.or h5 {
    font-family: 'Marcellus SC', serif;
font-size: 2.5em;
    color: #2b2a27;
    text-shadow: none;
}

.off-board{
background-color: #1a2631;
    border-radius: 27px;
    /* width: 500px; */
    margin: 0 auto;
     background-image: url(../images/main-bg.jpg);
    background-size: cover;
    padding: 20px;
box-shadow: 5px 5px 6px #4d4d4d87;
}

.off-board p{
color: #fff;
    font-size: 2em;
    border: 1px solid #3fc6ef;
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
}


.off-board h5{
margin-top: 0;
    margin-bottom: .5rem;
    font-weight: 500;
    line-height: 1;
    color: #fff;
font-size: 3.8em;
}


.mainCP {
    height: 100%;
}

.slick-next:before, .slick-prev:before {
color: #ffffff;
}

.cpicons {
    width: 12% !important;
}

hr {
    border: 0;
    height: 1px;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+50,ffffff+100&0+0,1+50,0+100 */
    background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 */
}




.card {
    background-color: #1a263100;
}


.btn-warning {
    color: #000;
    background-color: #82b8df;
    border-color: #82b8df;
}

/*.cp-image img {
    width: 90%;
}*/

h5 {
    color: #000000;
    text-shadow: none;
}

.timeline-carousel {

    font-family: "Roboto", sans-serif;
    font-weight: 400;
    padding: 18px 6.9444% 10px 6.9444%;
    position: relative;
    overflow: hidden;
    height: 100%;
/*    padding-top: 70px;*/
}

    .timeline-carousel:after, .timeline-carousel:before {
        content: "";
        position: absolute;
        display: block;
        top: 0;
        height: 100%;
        width: 6.9444%;
        z-index: 3;
        width: 6.9444%;
    }

    .timeline-carousel:after {
        left: 0;
    }

    .timeline-carousel:before {
        right: 0;
        opacity: 0;
    }

    .timeline-carousel .swiper-pagination {
        display: none !important;
    }

    /* Swiper Navigation Fixes */
    .timeline-carousel .swiper-button-prev,
    .timeline-carousel .swiper-button-next {
    position: absolute;
    top: 93px;
    z-index: 10;
    width: 30px;
    height: 30px;
    background: #1a2631;
    color: #ffffff;
    background-color: #ffffff00;
    font-family: "Libre Franklin", sans-serif;
    font-size: 7px;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    }

    .timeline-carousel .swiper-button-prev:after,
    .timeline-carousel .swiper-button-next:after {
        font-size: 14px;
        font-weight: bold;
    }

    .timeline-carousel .swiper-button-prev {
        left: 0;
    }

    .timeline-carousel .swiper-button-next {
        right: 0;
    }

    .timeline-carousel h1 {
        color: white;
        font-family: "Libre Franklin", sans-serif;
        font-weight: 700;
    }

    .timeline-carousel p {
        color: white;
        font-weight: 300;
    }

.timeline-carousel__image {
    padding-right: 30px;
}

.timeline-carousel__item {
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
}

    .timeline-carousel__item .media-wrapper {
        padding-bottom: 71.4%;
        -webkit-transition: all 0.4s cubic-bezier(0.55, 0.085, 0.68, 0.53);
        -o-transition: all 0.4s cubic-bezier(0.55, 0.085, 0.68, 0.53);
        transition: all 0.4s cubic-bezier(0.55, 0.085, 0.68, 0.53);
        border-radius: 27px;
    }

    .timeline-carousel__item:last-child .timeline-carousel__item-inner:after {
        width: calc(100% - 30px);
    }

.timeline-carousel__item-inner {
    position: relative;
    padding-top: 45px;
}

    .timeline-carousel__item-inner:after {
        position: absolute;
        width: 100%;
        top: 45px;
        left: 0;
        content: "";
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }

    .timeline-carousel__item-inner .year {
        font-family: 'Marcellus SC', serif;
        font-size: 25px;
        line-height: 36px;
/*        color: white;*/
        display: table;
        letter-spacing: -1px;
        padding: 10px;
        background-color: white;
        z-index: 1;
        position: relative;
        margin: -15px 0 20px;
    }

    .timeline-carousel__item-inner .year2 {
font-family: 'Marcellus SC', serif;
    font-size: 23px;
    line-height: 36px;
    /* color: white; */
    display: table;
    letter-spacing: -1px;
    padding: 10px;
    background-color: #82b8df;
    z-index: 1;
    position: relative;
    margin: -15px 0 20px;
}
    



        .timeline-carousel__item-inner .year:after {
            content: "";
            position: absolute;
            display: block;
            left: -10px;
            top: 0;
            height: 100%;
            width: 10px;
            background-color: white;
            z-index: 3;
        }

    .timeline-carousel__item-inner .month {
        font-family: 'Barlow Semi Condensed', sans-serif;
        font-size: 20px;
        text-transform: uppercase;
        color: #82b8df;
        display: block;
        margin-bottom: 10px;
        font-weight: 600;
    }

    .timeline-carousel__item-inner p {
        font-size: 17px;
        line-height: 24px;
        color: #1a1a1a;
        /* width: 60%; */
        font-weight: 400;
        margin-bottom: 15px;
    }

    .timeline-carousel__item-inner .read-more {
        font-size: 16px;
        color: #82b8df;
        display: table;
        margin-bottom: 0px;
        font-weight: 900;
        text-decoration: none;
        position: relative;
    }

        .timeline-carousel__item-inner .read-more:after {
            content: "";
            position: absolute;
            left: 0;
            bottom: -1px;
            width: 0;
            border-bottom: 2px solid #82b8df;
            -webkit-transition: all 0.2s cubic-bezier(0.55, 0.085, 0.68, 0.53);
            -o-transition: all 0.2s cubic-bezier(0.55, 0.085, 0.68, 0.53);
            transition: all 0.2s cubic-bezier(0.55, 0.085, 0.68, 0.53);
        }

        .timeline-carousel__item-inner .read-more:hover:after {
            width: 100%;
        }

    .timeline-carousel__item-inner .pointer {
        /* height: 29px; */
        /* position: relative; */
        z-index: 1;
        margin: 0px 19px 16px;
        text-align: left;
    }

        .timeline-carousel__item-inner .pointer:after, .timeline-carousel__item-inner .pointer:before {
            position: absolute;
            content: "";
        }

        .timeline-carousel__item-inner .pointer:after {
            width: 9px;
            height: 9px;
            border-radius: 100%;
            top: 0;
            left: 0;
            background-color: #82b8df;
        }

        .timeline-carousel__item-inner .pointer:before {
            width: 1px;
            height: 100%;
            top: 0;
            left: 4px;
            background-color: #82b8df;
        }

.timeline-carousel .swiper-slide-active .media-wrapper {
    opacity: 1 !important;
}

/* Swiper pagination cleanup if needed */

.link {
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 20px;
    z-index: 9999;
}

    .link a {
        display: flex;
        align-items: center;
        text-decoration: none;
        color: #fff;
    }

    .link .fa {
        font-size: 28px;
        margin-right: 8px;
        color: #fff;
    }

/* Navigation styles handled by .swiper-button classes */



/*Media Queries*/
@media screen and (min-width: 240px) and (max-width: 480px) and (orientation: portrait) {
    .timeline-carousel__image {
    padding-right: 0px;
}
    .snip1543 img {
        height: 350px;
        width: 510px;
    }
    .or h5 {
    font-size: 2em;
}
.off-board h5{
font-size: 3.8em!important;
}

}


@media screen and (max-width: 600px) {
        .timeline-carousel__image {
    padding-right: 0px;
}
    .snip1543 img {
        height: 350px;
        width: 510px;
    }
.off-board h5{
font-size: 3.8em!important;
}
}

@media screen and (min-width: 481px) and (max-width: 812px) and (orientation: landscape) {
    .timeline-carousel {
        padding-top: 50px;
    }
        .timeline-carousel__image {
    padding-right: 0px;
}
    .snip1543 img {
        height: 350px;
        width: 510px;
    }
        .or h5 {
    font-size: 2em;
}
.off-board h5{
font-size: 3.8em!important;
}
}

@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    .timeline-carousel {
        padding-top: 50px;
    }
}

@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    .timeline-carousel {
        padding-top: 50px;
    }
}

@media screen and (min-width: 1024px) and (max-width: 1366px) and (orientation: portrait) {
    .timeline-carousel {
        padding-top: 50px;
    }
}

@media screen and (min-width: 992px) and (max-width: 1366px) and (orientation: landscape) {
    .timeline-carousel {
        padding-top: 50px;
    }
}