#slides { height: 25vw; overflow: hidden; }
    #slides .slide { display: block; }
    #slides.to-load .slide > .caption { visibility: hidden; }
    #slides > .icon-left-open { left: 20px; z-index: 10; }
    #slides > .icon-right-open { right: 20px; z-index: 10; }
    #slides > .slick-dots { }
    #slides > .slick-dots { position: absolute; bottom: 20px; display: flex; width: 100%; justify-content: center; margin: 0; padding: 0; list-style: none; }
        #slides > .slick-dots > li { padding: 10px; cursor: pointer; text-align: center; }
            #slides > .slick-dots > li > button { display: none; }
            #slides > .slick-dots > li.slick-active { color: white; }
            #slides > .slick-dots > li:after { content: '\2022'; }

#icons-1 { background: #005265; display: flex; justify-content: center; padding: 30px; }
    #icons-1 > .i { margin: 0 40px; width: 190px; text-align: center; color: white; text-transform: uppercase; font-size: 18px; font-weight: bold; text-decoration: none; cursor: pointer; }
        #icons-1 > .i > .img-w { height: 95px; justify-content: center; align-items: center; display: flex; margin-bottom: 15px; position: relative; }
            #icons-1 > .i > .img-w > .day { position: absolute; font-size: 44px; font-weight: 300; top: 30px; }
        #icons-1 > .i:hover { opacity: .8; }

h2 { font-size: 36px; text-align: center; }

#swab-match-cure { background: linear-gradient(#CCEFF5,#FFFFFF); padding: 55px 40px 0; text-align: center; }
    #swab-match-cure > x-t { max-width: 1050px; margin: 0 auto; line-height: 1.6em; }
    #swab-match-cure > f-items { display: flex; justify-content: center; margin-top: 40px; }
        #swab-match-cure > f-items > x-item { }
            #swab-match-cure > f-items > x-item > x-lbl { display: block; font-size: 18px; font-weight: bold; margin-top: 8px; }

#stories-w { padding-bottom: 80px; }
    #stories-w > h2 { margin: 68px 0 20px; }
    #stories-w > .btn-w { text-align: center; margin-bottom: 40px; }
#stories { width: 1360px; margin: 0 auto; }
    #stories .story { width: 300px; background: #F2F2F2; padding: 18px; box-sizing: border-box; margin: 0 19px; border-radius: 5px; border: solid 1px #E8E8E8; height: 520px; }
        #stories .story > .img { height: 262px; background-position: center; background-size: cover; flex: none; border-radius: 4px; }
        #stories .story > .r { display: flex; flex-direction: column; }
            #stories .story > .r > h3 { margin: 0; color: #000; font-size: 21px; }
                #stories .story > .r > h3 > a { text-decoration: none; color: inherit; }
            #stories .story > .r > .date { color: #FF4200; font-size: 15px; margin-top: 15px; font-weight: bold; text-transform: uppercase; }
            #stories .story > .r > .desc { font-size: 16px; margin-top: 12px; margin-bottom: 10px; max-height: 80px; overflow: hidden; }
            #stories .story > .r > .b { margin-top: auto; display: flex; justify-content: space-between; align-items: center; }
                #stories .story > .r > .b > .btn-g { background: white; border: solid 1px #AAAAAA; color: #555555; box-sizing: border-box; }
                #stories .story > .r > .b > .social > .with-circle { color: #AAAAAA; font-size: 24px; width: 40px; height: 40px; margin-right: 8px; }

#order-kit { background: url(/res/img/home/man-swabbing.jpg) center/cover; padding: 114px 0 121px; position: relative; }
    #order-kit:before { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(20, 49, 59, .6); content: ''; }
    #order-kit > .c { text-align: center; width: 1350px; margin: 0 auto; display: flex; align-items: flex-start; position: relative; max-width: 90%; }
        #order-kit > .c > .t { margin-right: 120px; }
            #order-kit > .c > .t > h3 { margin: 0 0; font-size: 32px; color: #FF4E00; }
            #order-kit > .c > .t > h4 { font-size: 32px; font-style: italic; color: white; margin: 0; font-weight: normal; }
            #order-kit > .c > .t > p { color: white; font-size: 18px; }
            #order-kit > .c > .t > .btns { margin-top: 40px; }
                #order-kit > .c > .t > .btns > .btn-g { margin-right: 10px; }
        #order-kit > .c > .img { max-width: 40vw; }

#stats { background: #00BBDC; display: flex; justify-content: center; padding: 50px 0 40px; }
    #stats > .stat { width: 160px; text-align: center; margin: 0 30px; }
        #stats > .stat > .img-w { height: 80px; display: flex; justify-content: center; align-items: center; }
        #stats > .stat > .num { color: white; font-size: 32px; font-weight: bold; margin: 22px 0 15px; }
        #stats > .stat > .name { font-size: 18px; font-weight: bold; text-transform: uppercase; color: #14353B; line-height: 1.2em; }

#evts-w { padding-bottom: 80px; }
    #evts-w > h2 { margin: 70px 10px 30px; }
    #evts-w > .sea { text-align: center; margin-bottom: 40px; }

#evts { width: 1360px; margin: 0 auto; }
    #evts .evt { margin: 0 19px; padding: 14px; position: relative; background: #F2F2F2; border-radius: 5px; border: solid 1px #E8E8E8; width: 300px; box-sizing: border-box; height: 424px; }
        #evts .evt > .map { height: 182px; flex: none; background-position: center; background-size: cover; margin-bottom: 10px; }
        #evts .evt > .date { position: absolute; top: 14px; right: 14px; text-align: center; width: 82px; flex: none; }
            #evts .evt > .date > .day { display: flex; justify-content: center; align-items: center; background: #00BBDC; color: white; font-size: 33px; font-weight: 600; padding: 10px 0; }
            #evts .evt > .date > .month { background: #14353B; color: #AAAAAA; text-transform: uppercase; padding: 10px 0; font-size: 15px; }
        #evts .evt > .t { overflow: hidden; }
            #evts .evt > .t > .title { font-size: 19px; font-weight: bold; text-transform: uppercase; height: 80px; }
            #evts .evt > .t > .i-t { display: flex; }
                #evts .evt > .t > .i-t > i { color: #FF4200; font-size: 24px; margin-right: 5px; }
                #evts .evt > .t > .i-t > .t { margin-top: 5px; }
            #evts .evt > .t > .share > i { color: blue; }
            #evts .evt > .t > .place { text-transform: uppercase; max-height: 50px; overflow: hidden; }
        #evts .evt.even > .date > .day { background: #F05125; }

#dc-h { display: flex; align-items: center; width: 1000px; margin: 50px auto; }
    #dc-h > .l { margin-right: 45px; }
    #dc-h > .r { }
        #dc-h > .r > h2 { text-align: left; margin: 0; }
        #dc-h > .r > p { font-size: 18px; }
        #dc-h > .r > .btn-g { border: solid 2px #F05125; }

#testimonials { background: url(/res/img/home/testimonials-bg.jpg) center/cover fixed; position: relative; padding: 80px 0; margin-top: 85px; }
    #testimonials:before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: #f14305; opacity: .65; }
    #testimonials > h2, #testimonials > .line, #testimonials > .items { position: relative; }
    #testimonials > h2 { margin: 0; color: #1c292b; }
    #testimonials > .line { background: #f14305; width: 120px; height: 2px; margin: 20px auto; }
        #testimonials > .line > .circle { position: absolute; width: 12px; height: 12px; background: white; border-radius: 50px; border: solid 2px #f14305; left: 50%; margin: -6px 0 0 -6px; }
            #testimonials > .line > .circle:after { content: ''; background: #f14305; width: 6px; height: 6px; position: absolute; top: 3px; left: 3px; border-radius: 10px; }
    #testimonials > .items { width: 1230px; margin: 70px auto 0; max-width: 100%; }
        #testimonials > .items .i { width: 260px; padding: 0 50px 40px; background: white; margin: 30px 25px; text-align: center; }
            #testimonials > .items .i > .quote { width: 60px; height: 60px; color: #f14305; background: #fff; line-height: 70px; box-shadow: 0 0 7px -2px rgb(0 0 0 / 20%); border-radius: 50%; margin-left: auto; margin-right: auto; display: block; top: -30px; position: relative; font-size: 25px; }
            #testimonials > .items .i > p { font-weight: 600; line-height: 1.8em; margin-top: -15px; }
            #testimonials > .items .i > .name { text-transform: uppercase; font-weight: bold; }
            #testimonials > .items .i > .caption { font-size: 13px; color: #8f8f8f; text-transform: capitalize; margin-top: 10px; }

#countdown { position: fixed; top: 0; right: 0; bottom: 0; left: 0; display: flex; justify-content: center; align-items: center; background: rgba(0,0,0,.5); z-index: 1000; }
    #countdown > .c { background: white; position: relative; width: 780px; margin: 0 auto; }
        #countdown > .c > .cls { width: 40px; height: 40px; background: #FF4E02; position: absolute; right: 0; color: white; display: flex; justify-content: center; align-items: center; border-radius: 100px; font-size: 24px; }
        #countdown > .c > .h { background: white; height: 70px; padding: 20px 28px; }
            #countdown > .c > .h > .logo { background-position: center; background-size: contain; height: 100%; background-repeat: no-repeat; }
    #countdown > .c { background: white; position: relative; width: 780px; margin: 0 auto; }
        #countdown > .c > .cls { width: 40px; height: 40px; background: #FF4E02; position: absolute; right: -20px; color: white; display: flex; justify-content: center; align-items: center; border-radius: 100px; font-size: 26px; top: -20px; cursor: pointer; }
        #countdown > .c > .c { background: #02384B; text-align: center; padding: 25px 20px 38px; }
            #countdown > .c > .c > .caption { color: #FF4E02; font-size: 32px; font-weight: bold; margin: 30px 0 25px; }
            #countdown > .c > .c > .time { display: flex; justify-content: center; }
                #countdown > .c > .c > .time > .part { width: 160px; }
                    #countdown > .c > .c > .time > .part > .t { font-size: 20px; color: white; }
                    #countdown > .c > .c > .time > .part > .num { color: #2A9DC6; font-size: 74px; }

#home-popup { position: fixed; top: 0; right: 0; bottom: 0; left: 0; display: flex; justify-content: center; align-items: center; background: rgba(0,0,0,.5); z-index: 1000; }
    #home-popup > .c { position: relative; max-width: 90%; width: 700px; }
        #home-popup > .c > .cls { width: 40px; height: 40px; background: #FF4E02; position: absolute; right: -20px; top: -20px; color: white; display: flex; justify-content: center; align-items: center; border-radius: 100px; font-size: 26px; cursor: pointer; z-index: 1; }
        #home-popup > .c > a > img { width: 100%; display: block; border-radius: 5px; }

/*!desktop*/
@media(max-width:1439px) {

    #stories-w { padding-bottom: 40px; }
        #stories-w > h2 { margin: 52px 10px 30px; }
    #stories { width: 705px; }
        #stories .story { margin: 0 11px; padding: 14px; height: 394px; }
            #stories .story > .img { height: 185px; }
            #stories .story > .r > .date { font-size: 10px; }
            #stories .story > .r > h3 { font-size: 15px; max-height: 60px; overflow: hidden; }
            #stories .story > .r > .desc { font-size: 14px; max-height: 75px; }

    #evts-w { padding-bottom: 50px; }
    #evts { width: 705px; }
        #evts .evt { margin: 0 11px; padding: 10px; font-size: 12px; height: 298px; }
            #evts .evt > .map { height: 128px; }
            #evts .evt > .date { width: 58px; top: 10px; right: 10px; }
                #evts .evt > .date > .day { font-size: 22px; padding: 9px; }
                #evts .evt > .date > .month { font-size: 10px; padding: 9px 0; }
            #evts .evt > .t > .i-t > i { margin-right: 2px; }
            #evts .evt > .t > .title { font-size: 14px; height: 40px; overflow: hidden; }
}

/*laptop & desktop*/
@media(min-width:1024px) {
    #swab-match-cure > f-items > x-item:not(:last-child) { margin-right: 75px; }
}

/*mobile & tablet*/
@media(max-width:1023px) {

    h2 { font-size: 32px; }

    #icons-1 { padding: 20px; }
        #icons-1 > .i { font-size: 12px; margin: 0 20px; width: 130px; }
            #icons-1 > .i > .img-w > img { width: 60%; }
            #icons-1 > .i > .img-w { height: 55px; width: -moz-fit-content; width: fit-content; margin: 0 auto 15px; }
                #icons-1 > .i > .img-w > .day { font-size: 28px; top: 14px; }

    #order-kit { padding: 90px 0; }
        #order-kit > .c { flex-direction: column; align-items: center; width: auto; }
            #order-kit > .c > .t { order: 2; margin: 50px 0 0; width: 600px; text-align: center; }
                #order-kit > .c > .t > h3 { font-size: 28px; }
                #order-kit > .c > .t > h4 { font-size: 26px; }
                #order-kit > .c > .t > p { font-size: 16px; margin-top: 30px; }
                #order-kit > .c > .t > .btns > .btn-g { margin: 0 5px; }
            #order-kit > .c > .img { width: 430px; }

    #evts-w > h2 { margin: 60px 10px 35px; }

    #stats { padding: 32px 0; }
        #stats > .stat { margin: 0 15px; width: 90px; }
            #stats > .stat > .img-w { width: fit-content; margin: 0 auto; height: 55px; }
                #stats > .stat > .img-w > img { width: 60%; }
            #stats > .stat > .num { font-size: 19px; margin: 5px 0 5px; }
            #stats > .stat > .name { font-size: 11px; }

    #swab-match-cure > f-items { flex-direction: column; align-items: center; margin-top: 20px; }
        #swab-match-cure > f-items > x-item:not(:last-child) { margin-bottom: 38px; }

    #dc-h { width: auto; padding: 40px 40px; margin-bottom: 10px; padding-top: 0; }
        #dc-h > .l { margin-right: 20px; }
            #dc-h > .l > img { width: 308px; }
        #dc-h > .r > p { font-size: 16px; line-height: 1.5em; }
        #dc-h > .r > .btn-g { margin: 20px auto; display: flex; width: 160px; }

    #testimonials { margin-top: 50px; padding: 50px 20px; }
        #testimonials > h2 { font-size: 28px; }
        #testimonials > .items { width: auto; margin: 50px 0 0; }
            #testimonials > .items .i { margin: 30px 15px; padding: 0 50px 30px; }
                #testimonials > .items .i > p { font-size: 14px; }

    #countdown > .c { width: 630px; }
        #countdown > .c > .c > .time > .part > .num { font-size: 57px; }
        #countdown > .c > .c > .time > .part > .t { font-size: 15px; }
        #countdown > .c > .c > .caption { font-size: 23px; }

    #home-popup > .c { width: 500px; }
}

/*mobile*/
@media (max-width:767px) {
    .btn-g { font-size: 14px; height: 40px; }

    #icons-1 { flex-wrap: wrap; padding: 10px; }
        #icons-1 > .i { width: 40%; margin: 20px 10px; }

    #stories-w { padding: 0; margin-bottom: 50px; }
        #stories-w > h2 { margin: 38px 10px 28px; }
    #stories { width: auto; }
        #stories .story { width: 213px }

    #order-kit > .c { }
        #order-kit > .c > .t { width: 280px; }
            #order-kit > .c > .t > h3 { font-size: 27px; line-height: 1em; margin-bottom: 18px; }
            #order-kit > .c > .t > p { text-align: left; }
            #order-kit > .c > .t > .btns { margin-left: -20px; margin-right: -20px; }
                #order-kit > .c > .t > .btns > .btn-g { padding: 0 20px; }
        #order-kit > .c > .img { width: 280px; max-width: none; }

    #evts-w > h2 { margin: 30px 10px; }
    #evts { width: auto; }
        #evts .evt { width: 213px; }

    #stats { flex-wrap: wrap; padding: 10px 0 20px; }
        #stats > .stat { width: 40%; margin: 10px; }

    #dc-h { display: block; padding: 30px; margin-top: 0px; }
        #dc-h > .l { margin: 0; }
            #dc-h > .l > img { width: 80%; mix-blend-mode: multiply; margin: 0 auto 10px; display: block; }
        #dc-h > .r > h2 { text-align: center; }

    #testimonials { margin-top: 0; background-attachment: initial; }
        #testimonials > .items .i { margin: 30px 0; }

    #countdown > .c { width: 280px; }
        #countdown > .c > .c > .time > .part > .num { font-size: 36px; }
        #countdown > .c > .c > .time > .part > .t { font-size: 13px; }
        #countdown > .c > .c > .caption { font-size: 15px; }

    #home-popup > .c { width: 92vw; max-width: none; }
        #home-popup > .c > .cls { right: 5px; top: -15px; width: 32px; height: 32px; font-size: 20px; }
}

@media(max-width:480px) {
    #slides { height: 100vw; }
}