﻿@import url("https://use.typekit.net/pzp2mxi.css");

body {
    font-family: "sofia-pro", Arial, Sans-Serif;
}

.landing-top {
    background-image: url("https://www.rims.org/images/default-source/event-webpages/annual-conference-2021/1920px-rims2021-homepage-bkgrd-yellow.png?sfvrsn=177e6fcf_2");
    background-size: cover;
    height: auto;
}

    .landing-top a {
        color: white;
        font-size: 16px;
        font-weight: 600;
        font-family: "sofia-pro", Arial, Sans-Serif;
    }

.clipped-box {
    margin: 2rem auto 0 auto;
    height: auto;
    background-color: white;
    width: 80%;
    text-align: center;
    transition: 0.5s;
    -webkit-transition: 0.5s;
    box-shadow: 0 4px 8px 0 grey, 0 6px 20px 0 grey;
}

    .clipped-box .row {
        display: grid;
    }

.stats-box {
    width: 100%;
    height: 5rem;
    background-color: #2376b9;
    margin-top: 2rem;
    opacity: 0.9;
}

.button-box {
    margin: 2rem auto 0 auto;
    text-align: center;
    width: 170px;
}

.long {
    width: 290px;
}

.btn-medium {
    width: 260px;
}

.text-box {
    margin: 0 auto;
    text-align: center;
    padding-top: 2rem;
    font-size: 1.5rem;
    font-weight: 600;
    color: #1c6ea4;
}

    .text-box h2::after {
        content: "\00a0";
        display: block;
        width: 100px;
        margin: 0 auto;
        border-top: 4px solid #782d7d;
        margin-top: 5px;
    }

.stats-box img {
    width: 80%;
    margin: 0 auto;
}

.landing-middle {
    background-color: #fedb32;
    min-height: 180vh;
    padding-top: 2rem;
    padding-bottom: 8%;
}

.main-logo-header-container {
    text-align: center;
    padding-top: 4rem;
}

    .main-logo-header-container img {
        max-width: 80vw;
    }

.main-logo-container {
    text-align: center;
    /* margin-top: 2rem; */
}

.sub-btn {
    position: relative;
    margin: 0.1rem 0.5rem;
    cursor: pointer;
}

    .sub-btn:hover .left-side {
        left: 0.5% !important;
    }

    .sub-btn .right-side,
    .sub-btn .left-side {
        color: white;
        text-transform: uppercase;
    }

    .sub-btn .left-side {
        position: absolute;
        height: 90%;
        /* width: 6.5%; */
        width: 14%;
        z-index: 10;
        top: 0;
        transition: 0.5s;
        -webkit-transition: 0.5s;
        clip-path: polygon( 19% 0, 100% 0, 100% 81%, 70% 100%, 71% 50%, 22% 100%, 0 80%, 51% 29%, 0 30% );
        -webkit-clip-path: polygon( 19% 0, 100% 0, 100% 81%, 70% 100%, 71% 50%, 22% 100%, 0 80%, 51% 29%, 0 30% );
        background: #853f94;
        left: -5%;
    }

.long .sub-btn .left-side {
    left: -6%;
    width: 9%;
}

.btn-medium .sub-btn .left-side {
    left: -6%;
    width: 10%;
}

.white .left-side {
    background: white;
}

.white .right-side {
    background: white !important;
    color: #2376b9 !important;
    font-weight: 800;
}

.sub-btn .right-side {
    background: #853f94;
    transition: 0.5s;
    -webkit-transition: 0.5s;
    color: White;
    margin: 1rem;
    padding: 0.25rem 1.75rem;
}

.dark-blue {
    background-color: #2376b9 !important;
}

.light-blue {
    background-color: #2fb5d1 !important;
    margin-top: -1rem !important;
}

.purple-bkg {
    background-color: #853f94 !important;
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {

    #weekly-tab {
        margin: 0 auto;
        padding-left: 1.8rem;
        width: 600px;
        display: block !important;
    }
}

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
    .clipped-box {
        margin: 2rem auto 0 auto;
        padding-left: 1.4rem;
        padding-bottom: 1rem;
        height: auto;
        background-color: white;
        width: 1015px;
        text-align: center;
        transition: 0.5s;
        -webkit-transition: 0.5s;
        clip-path: polygon(5% 0, 100% 0, 100% 80%, 95% 100%, 0 100%, 0 20%);
        -webkit-clip-path: polygon(5% 0, 100% 0, 100% 80%, 95% 100%, 0 100%, 0 20%);
        -webkit-box-shadow: 5px 5px 15px 5px #000000;
        box-shadow: 5px 5px 15px 5px #000000;
    }

        .clipped-box .row {
            display: flex;
        }

    .main-logo-header-container img {
        max-width: 50vw;
    }

    .long {
        width: 380px;
    }

    .navbar {
        height: 3rem;
    }

    .week-tab {
        padding: 0 1.8rem 0 1.8rem;
        margin-top: -1rem;
    }

    #weekly-tab {
        margin: 0 auto;
        padding-left: 1.8rem;
        width: 990px;
    }

        #weekly-tab li {
            width: 50%;
        }

            #weekly-tab li a {
                background-color: #853f94;
                color: white;
                border-radius: none !important;
            }

        #weekly-tab .nav-pills .nav-link.active,
        .nav-pills .show > .nav-link {
            background-color: #f89521;
        }

    .btn-medium {
        width: 260px;
    }

    #weekly-tab {
        margin: 0 auto;
        padding-left: 1.8rem;
        width: 990px;
        display: block !important;
    }
}

.navbar {
    height: 4rem;
}

#header {
    height: auto !important;
}

    #header.header-sticky {
        position: relative !important;
    }

.clipped-1-text {
    text-align: initial;
    padding: 2rem 2rem;
    font-size: 17px;
    font-weight: 500;
}

    .clipped-1-text span {
        font-size: 18px;
        font-weight: 900;
        color: #2376b9;
    }

    .clipped-1-text h3 {
        font-size: 1.75rem;
        font-weight: 900;
        color: #2376b9;
    }

.dark-blue .clipped-1-text h3 {
    color: white;
    font-weight: 600;
    margin: 0 2rem 1rem 3rem;
}

.light-blue .clipped-1-text h3,
.purple-bkg .clipped-1-text h3 {
    color: white;
    font-weight: 600;
    margin: 0 2rem 1rem rem;
}

.light-blue p,
.purple-bkg p {
    color: white;
    margin-bottom: 0;
}

.light-blue .button-box {
    margin: 0.5rem auto 0 auto;
}

.purple-bkg .button-box {
    margin: 0.5rem auto 0.5rem auto !important;
    padding-bottom: 1rem;
}

.clipped-1-text h4 {
    font-size: 1rem;
    font-weight: 900;
    color: #2fb5d1;
    padding-bottom: 0.5rem;
}

.clipped-1-text li {
    color: #515151;
    line-height: 15.75pt;
    tab-stops: list 0.5in;
    background: white;
}

.list-p {
    list-style-type: none;
}

.speaker-title {
    color: #fedb32;
    margin: 0.5rem 0 0 0.5rem;
}

.speaker-name {
    color: white;
    margin: 0 0.5rem;
}

.sponsor-type {
    color: #853f94;
    font-weight: 700;
}

.week-tab {
    padding: 0 1.8rem 0 1.8rem;
    margin-top: -1rem;
}

#weekly-tab {
    display: none;
}

    #weekly-tab li {
        width: 50%;
    }

        #weekly-tab li a {
            background-color: #853f94;
            color: white;
            border-radius: none !important;
        }

    #weekly-tab .nav-pills .nav-link.active,
    .nav-pills .show > .nav-link {
        background-color: #f89521;
    }


.tech-slideshow {
    height: 5rem;
    max-width: 100%;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    transform: translate3d(0, 0, 0);
}

    .tech-slideshow > div {
        width: 2526px;
        background: url(https://www.rims.org/images/default-source/event-webpages/annual-conference-2021/2000x75-rims-stats-horiz-scroll.png?sfvrsn=6055c41b_2);
        position: absolute;
        top: -1.5rem;
        left: 0;
        height: 100%;
        transform: translate3d(0, 0, 0);
    }

    .tech-slideshow .mover-1 {
        animation: moveSlideshow 20s linear infinite;
    }

@keyframes moveSlideshow {
    100% {
        transform: translateX(-66.6666%);
    }
}
