@import url("https://cloud.email.myplanportal.com/cvs-health-open-sans-font");
@import url('https://fonts.googleapis.com/css2?family=Karla:wght@300;400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Solway:wght@300;400;500;700;800&display=swap');

body {
    font-family: 'CVSHealthSans', 'Open Sans', sans-serif;
}

main {
    padding: 5% 0;
}

.menu-overlay {
    position: relative;
}

.menu-btn {
    background: transparent;
    border: none;    
    color: #fff;
    padding: 0;
}

.pos-abs {
    position: absolute;
}

.top-right { 
    cursor: pointer;  
    right: 8%;
}

.nav-pos, .top-right {
    top: 7.5%;
}

.top-right-about {
    right: 6%;
}

.top-right-stories {
    right: 17%;
}

.top-right-goal {
    right: 32%;
}

@media (min-width: 768px) {
    .top-right-pledge {
        right: 53%;
    }
}

@media (min-width: 992px) {
    .top-right-pledge {
        right: 50%;
    }
}

.top-left {
    top: 21%;
    left: 10%;
} 

.top-left-arrow {
    top: 24%;
    left: 10%;
}

.top-left-back {
    top: 24%;
    left: 15%;
}

.top-left-tablet-arrow {
    top: 35%;
    left: 10%;
}

.top-left-tablet-back {
    top: 35%;
    left: 15%;
}

.top-left-dk-arrow {
    top: 42.5%;
    left: 11.5%;
}

.top-left-dk-back {
    top: 42.5%;
    left: 14%;
}

.back-link {
    color: #fff;
    cursor: pointer;
    font-size: 0.6rem;
    text-decoration: none;
}

.back-link:hover {
    color: #fff;
}

@media (min-width: 375px) {
    .back-link {
        font-size: 0.7rem;
    }
}

@media (min-width: 768px) {
    .back-link {
        font-size: 0.8rem;
    }
}

@media (min-width: 992px) {
    .back-link {
        font-size: 0.9rem;
    }
}

.arrow {
    display: inline-block;
    height: 9px;
    position: relative;
    width: 9px;
}

.arrow::after {
    border-bottom-style: solid;
    border-bottom-width: 2px;
    border-right-style: solid;
    border-right-width: 2px;
    content: '';
    display: inline-block;
    height: 10px;
    left: 0;
    position: absolute;
    top: 0;
    width: 10px;
}

.arrow.arrow-bar::before {
    bottom: 1px;
    content: '';
    height: 16px;
    position: absolute;
    right: 0;
    transform-origin: bottom;
    width: 2px;
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.arrow.is-left {
    -moz-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
}

.arrow::after,
.arrow .arrow::after {
    border-color: #fff;
}

.arrow::before,
.arrow .arrow::before {
  background-color: #fff;
}

#mob-sm {
    display: block;
}

#mob-md-arrow, #mob-md-back {
    display: none;
}

@media (min-width: 375px) {
    #mob-sm {
        display: none;
    }

    #mob-md-arrow, #mob-md-back {
        display: block;
    }
}

.hamburger-icon {
    width: 20px;
    height: 2px;
    background-color: #fff;
    margin: 3px 0;
}

.back-link, .header-link, .menu-px {
  font-family: 'Solway', 'CVSHealthSans', 'Open Sans', sans-serif;
  font-weight: bold;
}

.header-link, .header-link:hover {
    color: #fff;
    cursor: pointer;
    font-size: 0.8rem;
}

@media(min-width: 992px) {
    .header-link, .header-link:hover {
        font-size: 0.9rem;
    }
}

#mobile-view {
    display: block;
 position: relative;
}

#tablet-view, #desktop-view {
    display: none;
 position: relative;
}

@media (min-width: 500px) {
    #mobile-view {
        display: none;
    }

    #tablet-view {
        display: block;
    }
}

@media (min-width: 768px) {
    #tablet-view {
        display: none;
    }

    #desktop-view {
        display: block;
    }
}

#mobile-footer {
    display: block;
}

#desktop-footer, #tablet-footer {
    display: none;
}

@media (min-width: 500px) {
    #mobile-footer {
        display: none;
    }

    #tablet-footer {
        display: block;
    }
}

@media (min-width: 768px) {
    #tablet-footer {
        display: none;
    }

    #desktop-footer {
        display: block;
    }
}

.mobile-arrow, .mobile-facebook, .mobile-instagram, .mobile-twitter {
    cursor: pointer;
    position: absolute;
}

.mobile-arrow {
    width: 20px;
    height: 20px;
    bottom: 35.5%;
    left: 37.5%;
}

.mobile-facebook, .mobile-instagram {
    width: 22px;
    height: 22px;
    bottom: 20%;
}

.mobile-facebook {    
    left: 37.5%;
}

.mobile-instagram {
    left: 45%;
}

.mobile-twitter {
    width: 23px;
    height: 23px;
    bottom: 19%;
    left: 54%;
}

.tablet-arrow, .tablet-facebook, .tablet-instagram, .tablet-twitter {
    cursor: pointer;
    position: absolute;
} 

.tablet-arrow {   
    width: 16px;
    height: 16px;
    top: 36.5%;
    right: 8%;
}

.tablet-facebook, .tablet-instagram, .tablet-twitter {
    width: 22px;
    height: 22px;
    bottom: 22%;
}

.tablet-facebook {
    right: 17.5%;
}

.tablet-instagram {
    right: 12.5%;
}


.tablet-twitter {
    right: 7.5%;
}

.desktop-arrow, .desktop-facebook, .desktop-instagram, .desktop-twitter {
    cursor: pointer;
    position: absolute;
} 

.desktop-arrow {   
    width: 14px;
    height: 14px;
    top: 39%;
    right: 12%;
}

.desktop-facebook, .desktop-instagram, .desktop-twitter {
    bottom: 24%;
    width: 22px;
    height: 22px;
}

.desktop-facebook {  
    right: 20%;
}

.desktop-instagram {
    right: 16%;
}

.desktop-twitter {
    right: 12%;
}

@media (min-width: 992px) {
    .desktop-arrow {
        width: 16px;
        height: 16px;
        top: 41%;
    }
    
    .desktop-facebook {
        bottom: 28%;
    }
    
    .desktop-instagram {
        bottom: 28%;
    }
    
    .desktop-twitter {
        bottom: 28%;
    }  
}

@media (min-width: 1200px) {
    .desktop-arrow {
        width: 20px;
        height: 20px;
        top: 42%;
    }
    
    .desktop-facebook, .desktop-instagram, .desktop-twitter {
        bottom: 26%;
        width: 26px;
        height: 26px;
    }
}