/* Extra small devices (phones, less than 768px) */
body {
    margin: 0;
    padding: 0;
    font-family: 'Domine';
}
h1 {
    text-align: center;
    font-size: 30px;
    font-weight: normal;
}
p {
    text-align: center;
    font-size: 20px;
    line-height: 1.6;
}

/* Hero image */
#container {
    position: relative;
    text-align: center;
    color: white;
}

/* Improve hero text readability over photos */
#container::before {
    content: "";
    position: absolute;
    inset: 0;
    /* Slightly darker at the top where the hero text sits */
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.55) 0%,
        rgba(0, 0, 0, 0.40) 35%,
        rgba(0, 0, 0, 0.18) 75%,
        rgba(0, 0, 0, 0.10) 100%
    );
    z-index: 1;
    pointer-events: none;
}
#top_container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    z-index: 2;
}
@media screen and (max-width: 480px) {
    #top_container {
        top: 45%;
        width: 95%;
    }
}
#intro_text {
    font-size: 24px;
    color: white;
    line-height: 1.6;
    animation-name: my_text;
    animation-duration: 3s;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.65);
}
@keyframes my_text {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
#hero_image {
    width: 100%;
    height: auto;
    display: block;
}

.hero-line {
    display: inline-block;
    font-weight: 600;
}
.hero-line + .hero-line {
    margin-top: 0.65em;
}
.eams-acronym {
    font-weight: 700;
    font-style: normal;
    white-space: nowrap;
    text-shadow:
        0 2px 16px rgba(0, 0, 0, 0.75),
        0 0 2px rgba(0, 0, 0, 0.35),
        0 0 3px rgba(255, 255, 255, 0.25);
}
.eams-acronym .e,
.eams-acronym .s,
.eams-acronym .a,
.eams-acronym .m {
    color: #3F79C4;
}
.hero-logo {
    display: block;
    margin-top: 36px;
    padding-top: 16px;
}
.hero-logo img {
    height: auto;
    max-height: 200px;
    max-width: min(500px, 95vw);
}


@media screen and (max-width: 480px) {
    #top_container {
        top: 45%;
        width: 92%;
    }

    #intro_text {
        font-size: 24px;
        line-height: 1.35;
    }

    .hero-line {
        display: block;
    }

    .eams-acronym {
        white-space: normal;
    }

    .hero-logo {
        margin-top: 14px;
        padding-top: 24px;
    }

    .hero-logo img {
        max-height: 120px;
        max-width: 90vw;
    }

}

/* Steps */
#steps_container {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr;
}
.steps {
    position: relative;
    width: 100%;
    color:white;
    height: 360px;
}
.circle {
    position: absolute;
    left: 50%;
    margin-left: -100px;
    top: 20px;
    border: 5px solid;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border-color: transparent;
}
.circle_interior {
    display: block;
    width: 100px;
    margin: 50px auto;
}
.circle_interior_new {
    display: block;
    width: 200px;
    margin: 0px auto;
}
.circle_text {
    margin-top: 260px;
    margin-left: 10%;
    margin-right: 10%;
}

/* Circle animation */
#circle_container {
    position: absolute;
    left: 50%;
    margin-left: -100px;
    top: 20px;
    width: 210px;
    height: 210px;
    border: solid transparent 1px;
}
#halfclip {
    width: 50%;
    height: 100%;
    right: 0px;
    position: absolute;
    overflow: hidden;
    transform-origin: left center;
}
#circle_container #halfclip {
    animation: cliprotate 3s 1;
    transform: rotate(180deg);
} 
@keyframes cliprotate {
    0% {transform: rotate(0deg);}
    50% {transform: rotate(0deg);}
    50.01% {transform: rotate(180deg);}
    100% {transform: rotate(180deg);}
}
.halfcircle {
    box-sizing: border-box;
    height: 100%;
    right: 0px;
    position: absolute;
    border: solid 5px transparent;
    border-top-color: white;
    border-left-color: white;
    border-radius: 50%;
}
#clipped {
    width: 200%;
    transform: rotate(-45deg);
}
#circle_container #clipped {
    transform: rotate(135deg);
    animation: rotate 1.5s linear 2;
}
@keyframes rotate {
    0% {transform: rotate(-45deg);}
    100% {transform: rotate(135deg);}
}
#fixed {
    width: 100%;
    transform: rotate(135deg);  
    opacity: 0;
}
#circle_container #fixed {
    opacity: 1;
    animation: showfixed 3s 1;
}
@keyframes showfixed {
    0% {opacity: 0;}
    49.99% {opacity: 0;}
    50% {opacity: 1;}
    100% {opacity: 1;}
}

/* Getting started */
#getting_started{
    margin-left: 10%;
    margin-right: 10%;
    padding-top: 5%;
    padding-bottom: 3%;
    text-align: center;
}
.download {
    width: 100%;
}
#patient_portal {
    display: block;
    width: 80%;
    margin: 0 auto;
}
#patient_portal_pharmacy {
    display: block;
    width: auto;
    height: 6rem;
    margin: 0 auto;
}
.download_steps {
    display: grid;
    width: 50%;
    grid-template-columns: 1fr;
    grid-column-gap: 10%;
    margin: 0% auto 2% auto;
}

/* Features */
#feature_1 {
    color: white;
    background-color: #003F83;
    padding-top: 7%;
    padding-bottom: 7%;
}
#feature_2 {
    padding-top: 7%;
    padding-bottom: 7%;
}
#feature_3 {
    color: white;
    background-color: #003F83;
    padding-top: 7%;
    padding-bottom: 7%;
}
#feature_4 {
    padding-top: 7%;
    padding-bottom: 7%;
}
.container_a {
    display: grid;
    width: 300px;
    margin: 0 auto;
    grid-row-gap: 50px;
    justify-items: center;
    align-items: center;
}
.container_b {
    display: grid;
    width: 300px;
    margin: 0 auto;
    grid-row-gap: 50px;
    justify-items: center;
    align-items: center;
}
.phone {
    display: block;
    margin: 0 auto;
    width: 300px;
}
#patient_and_doctor {
    display: block;
    margin: 0 auto;
    width: 300px;
}

/* Tell your provider page */
#tell_your_provider {
    color: white;
    background-color: #003F83;
    padding-top: 7%;
    padding-bottom: 7%;
}

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
    #intro_text {
        font-size: 30px;
    }
    #steps_container {
        grid-template-columns: 1fr 1fr 1fr;
    }
    .download_steps {
        grid-template-columns: 1fr 1fr;
        width: 50%;
    }

    /* Features */
    .container_a {
        width: 600px;
    }
    .container_b {
        width: 600px;
    }
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {

}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    #intro_text {
        font-size: 40px;
    }

    /* Features */
    .container_a {
        width: 1100px;
        grid-column-gap: 100px;
        grid-template-columns: 500px 500px;
    }
    .container_b {
        width: 1100px;
        grid-column-gap: 100px;
        grid-template-columns: 500px 500px;
    }
    .container_b .phone {
        order: 1;
    }
    #patient_and_doctor {
        order: 1;
    }
    .container_b .text_box {
        order: 2;
    }
}
/* Largest devices (standard desktops, 1920px and up) */
@media (min-width: 1920px) {
    .download_steps {
        width: 35%;
    }

    /* Features */
    .container_a {
        width: 1700px;
        grid-column-gap: 100px;
        grid-template-columns: 800px 800px;
    }
    .container_b {
        width: 1700px;
        grid-column-gap: 100px;
        grid-template-columns: 800px 800px;
    }
    .container_b .phone {
        order: 1;
    }
    #patient_and_doctor {
        width: 500px;
        order: 1;
    }
    .container_b .text_box {
        order: 2;
    }
}