style.css

* {
    color: 	#000000;
    font-family: 'Lato', sans-serif;
}

#covid-19-awareness {
    position: relative;
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #000000;
}

#covid-19-awareness, #covid-19-awareness a, .fa-info-circle {
    background-color: #FF6347;
    color: white;
    text-align: center;
    font-weight: 600;
    letter-spacing: 1px;
}

#covid-19-awareness a:hover {
    text-decoration: none;
}

.fa-angle-right {
    margin-left: 10px;
    color: #FF6347;
    font-size: inherit;
}

#covid-19-awareness .fa-angle-right {
    color: #ffffff; /* color had to be changed due to the orange background */
    margin-left: 5px;
}

.fa-info-circle {
    margin-right: 10px; /* to ensure space for aesthetics */
}

#custom-nav-css {
    border-bottom: 1px solid #000000;
}

.navbar-brand img {
    height: 33px;
    width: 33px;
}

.mha-nav { 
    color: #000000 !important; /* !important had to be used as then the bootstrap stylings would take priority over the custom css stylings */
    font-weight: 600;
    font-family: 'Lato', sans-serif;
    font-size: 18px;
}

.mha-nav:hover, .mha-nav:hover span {
    color: #FF6347 !important; /* !important had to be used as then the bootstrap stylings would take priority over the custom css stylings */
} 

.mha-active, .mha-active span {
    color: #FF6347 !important; /* !important had to be used as then the bootstrap stylings would take priority over the custom css stylings */
}

a.mha-active:hover, a.mha-active:hover span { /* !important had to be used as then the bootstrap stylings would take priority over the custom css stylings */
    color: #FF4500 !important; /* a little bit of a darker orange color to have the user notice a difference but still maintain aesthetic integrity */
}


#mha-navbar-right-space {
    padding-left: 10px;
    padding-right: 10px;
}

.mha-link {
    text-decoration: none;
}

.mha-get-started {
    margin-top: 62px;
    text-align: center;
    margin-bottom: 40px; 
}

.get-started-button {
    font-size: 20px;
    font-weight: 500;
    color: #ffffff;
    background-color: #FF6347;
    border: 1px solid #000000;
    border-radius: 8px;
    width: 100%;
    padding: 13px 0px; /* chosen by guess-work, not purely consistent with other numbers */
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 40px;
}

.get-started-button:hover {
    background-color: #FF4500;
    font-weight: 500;
}

.mha-get-started a:first-child {
    width: 20%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.mha-get-started a:hover {
    text-decoration: none;
    color: #FF6347;
}

.start-spreading-awareness {
    color: #FF6347;
    font-size: 24px; /* bigger size than the call out to grasp the viewer's attention */
    font-weight: 500;
}

.full-size-image {
    width: 100%;
    height: auto;
    top: 0;
    left: 0;
}

.mha-heading {
    font-size: 32px;
    font-weight: 600;
    padding-bottom: 20px;
}

.mha-paragraph {
    font-size: 20px;
    font-weight: 400;
    padding-bottom: 20px;
}

.black-background { 
    height: 75px;
    background-color: #000000;
    width: 100%;
}

footer {
    background-color: #000000;
}

footer div {
    background-color: #000000;
    color: #ffffff;
}

.top-footer, .bottom-footer {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    background-color: #000000;
}

.top-footer {
    padding-top: 15px;
    border-top: 1px solid rgba(128,128,128,0.35); /* color taken from https://squareup.com/us/en footer through the use of Chrome's DevTools */
    border-bottom: 1px solid rgba(128,128,128,0.35);
    padding-bottom: 15px;
}

.bottom-footer {
    padding-top: 15px;
    padding-bottom: 75px;
}

.top-left .bottom-left {
    background-color: #000000;
    float: left;
}

.top-right, .bottom-right {
    background-color: #000000;
    float: right;
}

#flag {
    background-color: #000000;
    width: 40px;
    height: 40px;
    margin-right: 20px;
}

.top-left {
    background-color: #000000;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
}

.top-right {
    margin-top: -30px; /* adjusts the social media icons to be of correct y-position */
    background-color: #000000;
}

.top-right i {
    margin-right: 10px; /* done for aesthetic purposes */
    margin-left: 10px;
    background-color: #000000;
    font-size: 20px;
    color: #ffffff;
}

.bottom-left {
    background-color: #000000;
    color: #737373;
    font-size: 14px;
}

.bottom-right {
    background-color: #000000;
    text-align: right;
    margin-right: 10px;
    margin-top: -25px;
    letter-spacing: 0.5px;
}

.bottom-right span {
    color: #ffffff;
    text-align: right;
    font-size: 14px;
    font-weight: 600;
}

/* Extra small devices (phones) */
@media only screen and (max-width:717px) {
    #custom-navbar-brand-mobile-responsiveness { 
        font-size: 16px; /* smaller font for the navbar-brand text on small devices */
    }
    #custom-navbar-brand-mobile-responsiveness img { /* a little of a smaller logo on small devices */
        height: 28px;
        width: 28px;
    }
    .mha-nav {
        font-size: 16px;
    }
    .fa-angle-right {
        margin-left: 5px; /* smaller margin to stay consistent with the size of the device */
    }
    .black-background {
        height: 50px;
    }
    .bottom-footer {
        padding-bottom: 30px;
    }
    .top-left, .bottom-left, .bottom-right span {
        font-size: 10px;
    }
    .top-right i {
        font-size: 14px;
    }
    .bottom-left, .bottom-right {
        float: none;
        text-align: center;
        margin-right: auto;
        margin-left: auto;
        display: block;
    }
    .bottom-left {
        margin-top: 15px;
    }
    .bottom-right {
        margin-top: 15px;
    }
}

/* Small devices (Tablets and landscape phones) */
@media only screen and (min-width:718px) and (max-width:992px) {
    .fa-angle-right {
        margin-left: 8px; /* smaller margin to stay consistent with the size of the device */
    }
    #covid-19-awareness .fa-angle-right {
        margin-left: 5px;
    }
    .black-background {
        height: 50px; /* smaller height as the device is smaller */
    }
    .bottom-footer {
        padding-top: 20px; /* more seperation for aesthetic purposes */
    }
    .top-left, .bottom-left, .bottom-right span {
        font-size: 12px;
    }
    .top-right i {
        font-size: 16px;
    }
}

/* Large devices (Large desktops and laptops) */
@media only screen and (min-width: 1824px) {
    .top-footer, .bottom-footer {
        width: 75%; /* ensures that the footer elements are not too far apart */
    }
}

/* Home page */
.hero-text {
    font-size: 62px;
    margin-top: 62px;
    margin-bottom: 28px;
    text-align: center;
    font-weight: 600;
    text-decoration: none; /* needed to remove text decoration since they are links */
}

.hero-text div {
    margin-bottom: 40px;
}

.mha-hero-underline {
    border-bottom: 3px solid #000000;
}

.hero-text a {
    color: #000000;
}

.hero-text a:hover {
    color: #FF6347;
    text-decoration: none;
}

.hero-image-home {
    margin-top: 124px;
}

.hero-image {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    background: linear-gradient(#ffffff 50%, #030303 50%) /* the way to do this found in https://stackoverflow.com/questions/8541081/css-set-a-background-color-which-is-50-of-the-width-of-the-window */
}

.hero-image img { 
    width: 85%;
    height: auto;
    border-radius: 5%;
    border: 1px solid #ffffff;
    /* specifications found in https://css-tricks.com/perfect-full-page-background-image/ but had to be altered 
    since the hero image is not a background image */
}

.content {
    padding-top: 50px;
    background-color: #030303;
    text-align: center;
}

.content h1, #message-summary {
    padding-top: 30px;
    margin-bottom: 30px;
    color: #ffffff;
    background-color: #030303;
}

.content h1 {
    font-size: 50px;
    padding-left: 50px;
    padding-right: 50px;
}

#message-summary {
    font-size: 26px;
    width: 70%;
    margin-left: auto;
    margin-right: auto;
}

#callout-hero-image {
    font-size: 30px;
    font-weight: 600;
    margin-left: auto;
    margin-right: auto;
    background-color: #030303;
    color: #FF6347;
    padding-bottom: 96px;
    margin-bottom: 128px;
}

.content a:hover {
    text-decoration: none;
}

.depression-home, .anxiety-home, .ptsd-home {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
}

.depression-home, .anxiety-home {
    padding-bottom: 150px;
}

.depression-image, .anxiety-image, .ptsd-image {
    max-width: 50%;
    position: relative;
}

.depression-image, .ptsd-image { /* different than the anxiety section for aesthetic purposes */
    float: left;
}

.anxiety-image {
    float: right;
    padding-left: 80px;
}

#depressed-man, #anxious-woman, #woman-with-PTSD {
    width: 100%;
    position: relative;
    border-radius: 2%;
    border: 4px solid #FF6347;
}

.depression-text, .anxiety-text, .ptsd-text {
    max-width: 50%;
}

.depression-text, .ptsd-text {
    padding-left: 80px;
    float: right;
}

.anxiety-text {
    padding-left: 10px;
    padding-top: 20px;
    float: left;
}

.depression-text h1, .anxiety-text h1, .ptsd-text h1 {
    text-align: left;
    font-weight: 600;
    font-size: 28px;
    padding-right: 40px;
    padding-bottom: 30px;
}

.depression-text>p, .anxiety-text>p, .ptsd-text>p {
    text-align: left;
    font-size: 20px;
    font-weight: 400;
    padding-right: 80px;
    padding-bottom: 30px;
    color: #000000;
}

.depression-text a, .anxiety-text a, .ptsd-text a {
    text-align: left;
    font-size: 20px;
    font-weight: 600;
    padding-right: 80px;
    padding-bottom: 30px;
}

.depression-text a p, .anxiety-text a p, .ptsd-text a p {
    color: #FF6347;
}

.depression-text a:hover, .anxiety-text a:hover, .ptsd-text a:hover {
    text-decoration: none;
}

.mental-health-awareness-newsletter-home {
    margin-top: 128px;
    background-color: #E5EBED;
}

.newsletter-callout {
    background-color: #E5EBED;
    padding-top: 64px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    padding-bottom: 64px;
}

.newsletter-callout h1, .newsletter-callout p {
    background-color: #E5EBED;
    width: 65%;
    margin-left: auto;
    margin-right: auto;
}

.newsletter-callout h1 {
    font-size: 28px;
    padding: 0 0 14px;
    font-weight: 600;
}

.newsletter-callout p {
    font-size: 20px;
    padding-bottom: 10px; 
    width: 62%;
}

.newsletter-form {
    background-color: #E5EBED;
    padding-bottom: 64px;
}

.newsletter-form form {
    background-color: #E5EBED;
    padding-bottom: 30px;
    width: 60%;
    margin-left: auto;
    margin-right: auto;
}

.newsletter-form form label {
    display: none;
}

.newsletter-form form input[type=email] {
    background-color: #ffffff;
    text-align: left;
    width: 75%;
    padding: 10px 20px;
    font-size: 16px;
    border: 2px solid #000000;
    border-radius: 2%;
}

textarea:focus, input:focus{  /* removes the blue border that appears when the email input is selected  */
    outline: none;
} 

.newsletter-form form input[type=submit] {
    font-size: 16px;
    background-color: #FF6347;
    color: #ffffff;
    font-weight: 500;
    float: right;
    padding: 10px 20px;
    height: 50px;
    border: 1px solid #000000;
    border-radius: 8px;
}

.newsletter-form form input[type=submit]:hover {
    background-color: #FF4500;
}

.mental-health-awareness-community-home {
    background-color: #ffffff;
    padding-top: 64px;
}

.community-callout-text {
    color: #000000;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    width: 70%;
}

.community-callout-text .mha-heading {
    padding-bottom: 40px;
}

.community-callout-text .mha-get-started a:first-child {
    width: 28.6%;
}

.mental-health-emergency {
    background-color: #E5EBED;
    padding-top: 64px;
    padding-bottom: 400px;
}

.mental-health-emergency>h1 {
    background-color: #E5EBED;
    font-size: 32px;
    text-align: center;
    color: #000000;
    margin-left: auto;
    margin-right: auto;
    font-weight: 600;
    padding-bottom: 50px;
}

.call-emergency, .support-center {
    width: 40%;
    border: 1px solid #000000;
    background-color: #ffffff;
}

.call-emergency {
    margin-left: 50px;
    float: left;
}

.support-center {
    margin-right: 50px;
    float: right;
}

.call-emergency h1, .support-center h1 {
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    padding: 20px;
}

.call-emergency>p, .support-center>p {
    font-size: 20px;
    font-weight: 400;
    text-align: center;
    padding: 20px;
    height: 150px; /* height had to be fixed so that the two side-by-side div elements appear to have equal height */
    overflow: hidden;
} 

.call-emergency a p, .support-center a p {
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    padding: 20px;
    color: #FF6347;
}

.call-emergency a:hover, .support-center a:hover {
    color: #FF6347;
    text-decoration: none;
}

/* Extra small devices (phones) */
@media only screen and (max-width:717px) {
    .hero-text {
        font-size: 38px;
    }
    .mha-get-started a:first-child {
        width: 40%;
    }
    .content h1 {
        font-size: 32px;
        padding-left: 16px;
        padding-right: 16px;
    }
    #message-summary {
        font-size: 20px;
    }
    #callout-hero-image {
        font-size: 24px;
        margin-bottom: 62px;
    }
    .depression-home, .anxiety-home, .ptsd-home {
        padding-left: 10px;
        padding-right: 10px;
        width: 100%;
    }
    .depression-home, .anxiety-home {
        padding-bottom: 100px;
    }
    .ptsd-home {
        padding-bottom: 32px;
    }
    .depression-image, .anxiety-image, .ptsd-image {
        max-width: 90%;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        float: none;
    }
    .anxiety-image {
        padding-left: 0px;
    }
    .depression-text, .anxiety-text, .ptsd-text {
        max-width: 100%;
        float: none;
        padding-left: 30px;
        padding-right: 0px;
        padding-top: 0px;
    }
    .depression-text h1, .anxiety-text h1, .ptsd-text h1 {
        text-align: left;
        font-size: 22px;
        padding-top: 30px;
        padding-left: 0px;
        padding-right: 0px;
        width: 80%;
    }
    .depression-text>p, .anxiety-text>p, .ptsd-text>p {
        text-align: left;
        font-size: 16px;
        padding-left: 0px;
        padding-right: 0px;
        width: 80%;
    }
    .depression-text a, .anxiety-text a, .ptsd-text a {
        text-align: left;
        font-size: 16px;
        padding-left: 0px;
        padding-right: 0px;
    }
    .mental-health-awareness-newsletter-home {
        margin-top: 0px;
    }
    .newsletter-callout {
        padding-bottom: 30px;
    }
    .newsletter-callout h1 {
        font-size: 22px;
        width: 75%;
    }
    .newsletter-callout p {
        font-size: 16px;
        width: 80%;
    }
    .newsletter-form {
        padding-bottom: 30px;
    }
    .newsletter-form form {
        width: 100%;
        text-align: center;
    }
    .newsletter-form form input[type=email] {
        margin-left: auto;
        margin-right: auto;
        font-size: 14px;
    }
    .newsletter-form form input[type=submit] {
        float: none;
        margin-top: 40px;
        font-size: 14px;
    }
    .community-callout-text {
        width: 85%;
    }
    .community-callout-text .mha-heading {
        font-size: 22px;
        padding-bottom: 20px;
    }
    .community-callout-text .mha-paragraph {
        font-size: 16px;
        padding-bottom: 10px;
    }
    .community-callout-text .mha-get-started {
        margin-top: 30px;
        width: 100%;
    }
    .community-callout-text .mha-get-started a:first-child {
        width: 35%;
    }
    .community-callout-text .get-started-button {
        font-size: 16px;
    }
    .mental-health-emergency {
        padding-bottom: 50px;
    }
    .mental-health-emergency>h1 {
        font-size: 22px;
    }
    .call-emergency, .support-center {
        width: 75%;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        float: none;
    }
    .support-center {
        margin-top: 50px;
    }
    .call-emergency h1, .call-emergency>p, .call-emergency a p, .support-center h1, .support-center>p, .support-center a p {
        font-size: 16px;
        padding: 15px;
        height: auto;
    }
}

/* Small devices (Tablets and landscape phones) */
@media only screen and (min-width:718px) and (max-width:992px) {
    .hero-text {
        font-size: 50px;
        margin-top: 50px;
    }
    .mha-get-started {
        margin-bottom: 0px;
    }
    .mha-get-started a:first-child {
        width: 25%;
    }
    .hero-image-home {
        margin-top: 80px;
    }
    .content {
        padding-left: 75px;
        padding-right: 75px;
    }
    .content h1 {
        font-size: 40px;
    }
    #message-summary {
        font-size: 24px;
    }
    #callout-hero-image {
        padding-top: 20px;
        font-size: 26px;
    }
    .mental-health-more-information-home {
        margin-top: -40px;
    }
    .depression-home, .anxiety-home, .ptsd-home {
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 80px;
        text-align: center;
        width: 100%;
    }
    .depression-image, .anxiety-image, .ptsd-image {
        max-width: 85%;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        float: none;
    }
    .anxiety-image {
        padding-left: 0px;
    }
    .depression-text, .anxiety-text, .ptsd-text {
        float: none;
        max-width: 900%;
        margin-left: auto;
        margin-right: auto;
        padding-left: 0px;
        padding-right: 0px;
        padding-top: 20px;
    }
    .depression-text h1, .anxiety-text h1, .ptsd-text h1 {
        text-align: center;
        font-size: 24px;
        padding-top: 30px;
        padding-bottom: 20px;
        padding-left: 0px;
        padding-right: 0px;
        width: 80%;
        margin-left: auto;
        margin-right: auto;
    }
    .depression-text>p, .anxiety-text>p, .ptsd-text>p {
        text-align: center;
        font-size: 20px;
        padding-bottom: 20px;
        padding-left: 0px;
        padding-right: 0px;
        width: 67%;
        margin-left: auto;
        margin-right: auto;
    }
    .depression-text a, .anxiety-text a, .ptsd-text a {
        text-align: center;
        font-size: 20px;
        padding-bottom: 20px;
        padding-left: 0px;
        padding-right: 0px;
        margin-left: auto;
        margin-right: auto;
    }
    .mental-health-awareness-newsletter-home {
        margin-top: 0px;
    }
    .newsletter-callout {
        padding-bottom: 10px;
    }
    .newsletter-callout h1 {
        font-size: 24px;
    }
    .newsletter-callout p {
        font-size: 18px;
    }
    .newsletter-form {
        padding-bottom: 30px;
    }
    .newsletter-form form {
        width: 100%;
        text-align: center;
    }
    .newsletter-form form input[type=email] {
        margin-left: auto;
        margin-right: auto;
        float: none;
        width: 70%;
        display: block;
    }
    .newsletter-form form input[type=submit] {
        float: none;
        margin-top: 40px;
        width: 20%;
    }
    .community-callout-text .mha-heading {
        padding-bottom: 22px;
        font-size: 24px;
    }
    .community-callout-text .mha-paragraph {
        padding-bottom: 10px;
        font-size: 18px;
    }
    .community-callout-text .mha-get-started {
        margin-top: 40px;
    }
    .community-callout-text .get-started-button {
        font-size: 18px;
    }
    .mental-health-emergency {
        padding-bottom: 375px;
    }
    .mental-health-emergency>h1 {
        font-size: 24px;
    }
    .call-emergency h1, .call-emergency>p, .call-emergency a p, .support-center h1, .support-center>p, .support-center a p {
        font-size: 18px;
        padding: 18px;
    }
}

/* Medium devices (Large tablets and small laptops) */
@media only screen and (min-width:993px) and (max-width:1310px) { 
    /* only use of this @media screen size to make the mental-health-more-information-home section of the home page look better aesthetically */
    .depression-home, .anxiety-home, .ptsd-home {
        width: 90%;
    }
}

/* Large devices (Large desktops and laptops) */
@media only screen and (min-width: 1824px) {
    .mha-get-started a:first-child {
        width: 10%;
    }
    .hero-image img {
        width: 50%; /* image appears to large for large desktops */
    }
    .content h1 { /* content is too wide and needs to be narrower */
        padding-left: 250px;
        padding-right: 250px;
    } 
    .depression-home, .anxiety-home, .ptsd-home {
        width: 50%;
    }
    .depression-home, .anxiety-home {
        padding-bottom: 200px;
    }
    .newsletter {
        width: 50%;
        margin-left: auto;
        margin-right: auto;
        padding-top: 50px;
        padding-bottom: 50px;
    }
    .hero-image-home-2 img {
        display: none; /* image appears to large for large desktops therefore it will be removed, set as a background, and cropped out */
    }
    /* idea taken from https://css-tricks.com/crop-top/ */
    .hero-image-home-2 { /* cropping the removed image and adding it back as a background for the div element */
        width: 100%;
        height: 1000px;
        background-image: url(../../assets/images/community.jpg);
        background-size: cover;
        background-position: center center;
    }
    .community-callout-text {
        width: 40%;
        padding-top: 50px;
        padding-bottom: 50px;
    }
    .mental-health-emergency>h1 {
        padding-top: 50px;
    }
    .mental-health-emergency-content {
        width: 60%;
        margin-left: auto;
        margin-right: auto;
        padding-top: 50px;
    }

}

/* Educate Yourself page */

.educate-yourself-statistics {
    background-color: #ffffff;
}

.educate-yourself-statistics .statistics {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    font-weight: 600;
    font-size: 62px;
    padding-top: 62px;
}

.educate-yourself-statistics .statistics div {
    text-align: center;
    padding-bottom: 196px;
}

.educate-yourself-statistics .statistics div span {
    color: #FF6347;
}

.educate-yourself-call-to-action {
    background-color: #FF6347;
    width: 100%;
    font-family: 'Lato', sans-serif;
    margin-top: 32px;
}

.textual-info {
    padding-top: 164px;
    background-color: #FF6347;
    width: 65%;
    margin-left: auto;
    margin-right: auto;
}

.textual-info h1, .textual-info a p {
    background-color: #FF6347;
    text-align: center;
}

.textual-info h1 {
    font-size: 62px;
    font-weight: 600;
    padding-top: 62px;
    padding-bottom: 20px;
    color: #000000;
}

.textual-info p {
    font-size: 30px;
    color: #ffffff;
}

.textual-info a p { /* had to use margins so the link hover wouldn't be as wide as it is with paddings */
    margin-top: 62px;
    margin-bottom: 62px;
    text-decoration: none;
}

.textual-info a:hover {
    text-decoration: none;
}

.textual-info .fa-angle-right {
    color: #ffffff;
}

.educate-yourself-call-to-action .mha-get-started {
    background-color: #FF6347;
    padding-bottom: 186px;
    margin-bottom: 0px;
}

.educate-yourself-call-to-action .mha-get-started a:hover {
    color: #000000; /* set the color of the icon to white to match with the text */
}

.educate-yourself-call-to-action .get-started-button {
    color: #ffffff;
    background-color: #000000;
    border: 2px solid #ffffff;
    font-weight: 500;
    font-size: 20px;
    margin-bottom: 62px;
}

.educate-yourself-call-to-action .get-started-button:hover {
    background-color: #ffffff;
    border-color: #000000;
    color: #000000;
    font-weight: 600; 
}

.educate-yourself-call-to-action .start-spreading-awareness, .educate-yourself-call-to-action .start-spreading-awareness:hover {
    color: #000000;
    text-decoration: none;
    font-size: 30px; 
    font-weight: 600;
}

.angle-color-black .fa-angle-right {
    color: #000000; /* set the color of the icon to black to match with the text */
}

/* Extra small devices (phones) */
@media only screen and (max-width:717px) {
    .educate-yourself-statistics .statistics {
        font-size: 32px;
        padding-top: 62px;
    }
    .educate-yourself-statistics .statistics div {
        padding-bottom: 96px; /* 32px times 3 = 96px */
    }
    .educate-yourself-call-to-action {
        margin-top: 0px;
    }
    .textual-info {
        padding-top: 62px;
        width: 70%;
    }
    .textual-info h1 {
        padding-top: 34px; /* 34px + 62px = 96px which is equal to the padding-bottom of .educate-yourself-statistics .statistics div */
        font-size: 32px;
    }
    .textual-info p {
        font-size: 20px;
    }
    .textual-info a p {
        margin-top: 32px;
        margin-bottom: 32px;
    }
    .textual-info .fa-angle-right {
        margin-left: 5px; /* make sure the icon does not jump over to the next line */
    }
    .educate-yourself-call-to-action .mha-get-started {
        padding-bottom: 62px;
    }
    .educate-yourself-call-to-action .get-started-button {
        font-size: 16px;
        margin-bottom: 32px;
    }
    .educate-yourself-call-to-action .start-spreading-awareness, .educate-yourself-call-to-action .start-spreading-awareness:hover {
        font-size: 20px;
    }
}

/* Small devices (Tablets and landscape phones) */
@media only screen and (min-width:718px) and (max-width: 992px) {
    .educate-yourself-statistics .statistics {
        font-size: 45px;
        padding-top: 62px;
    }
    .educate-yourself-statistics .statistics:first-child {
        padding-top: 45px;
    }
    .educate-yourself-statistics .statistics div {
        padding-bottom: 135px;  /* 45px times 3 = 135px */
    }
    .educate-yourself-call-to-action {
        margin-top: 0px;
    }
    .textual-info {
        padding-top: 65px;
        width: 60%; 
    }
    .textual-info h1 {
        padding-top: 70px; /* 70px + 65px = 135px which is the padding bottom of .educate-yourself-statistics .statistics div */
        font-size: 45px;
    }
    .textual-info p {
        font-size: 24px;
    }
    .textual-info a p {
        margin-top: 45px;
        margin-bottom: 45px;
    }
    .educate-yourself-call-to-action .mha-get-started {
        padding-bottom: 45px;
    }
    .educate-yourself-call-to-action .get-started-button {
        font-size: 18px;
        margin-bottom: 45px;
    }
    .educate-yourself-call-to-action .start-spreading-awareness, .educate-yourself-call-to-action .start-spreading-awareness:hover {
        font-size: 24px;
    }
}

/* Large devices (Large desktops and laptops) */
@media only screen and (min-width: 1824px) {
    .educate-yourself-statistics .statistics {
        width: 50%;
    }
    .textual-info {
        padding-top: 62px;
        width: 35%;
    }
    .educate-yourself-call-to-action .mha-get-started {
        padding-bottom: 62px;
    }
}

/* Help Yourself page */ 

#help-yourself-title {
    background-color: #030303;
    color: #ffffff;
}

#help-yourself-title div {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-size: 62px;
    padding-top: 62px;
    padding-bottom: 155px;
    width: 75%;
    color: #ffffff;
}

#help-yourself-looking-after-yourself, .main-header, .looking-after-description {
    background-color: #030303;
    text-align: center;
    color: #ffffff;
}

#help-yourself-looking-after-yourself {
    padding-bottom: 124px;
}

.main-header {
    font-size: 40px;
    padding-bottom: 62px;
    width: 67%;
    margin-left: auto;
    margin-right: auto;
}

.looking-after-tip {
    font-size: 32px;
    padding-bottom: 32px;
    color: #FF6347;
}

.looking-after-description {
    font-size: 24px;
    font-weight: 500;
    padding-bottom: 124px;
    width: 67%;
    margin-left: auto;
    margin-right: auto;
}

#help-yourself-looking-after-yourself img {
    margin-right: auto;
    margin-left: auto;
    width: 67%;
    height: auto;
    border-radius: 5%;
    margin-bottom: 124px;
}

#help-yourself-specific-disorders, #help-yourself-specific-disorders .main-header, #help-yourself-resources, #help-yourself-resources .main-header {
    padding-top: 124px;
    background-color: #ffffff;
}

#help-yourself-specific-disorders {
    padding-bottom: 248px;
}

#help-yourself-specific-disorders .main-header, #help-yourself-resources .main-header { 
     color: #000000;
     font-weight: 600;
     padding-bottom: 0px;
 }

.specific-disorder-header, .specific-disorder-tip {
    text-align: center;
    width: 40%;
    margin-left: auto;
    margin-right: auto;
    font-weight: 500;
}

.specific-disorder-header {
    color: #FF6347;
    font-size: 32px;
    padding-top: 124px;
    padding-bottom: 32px;
}

.specific-disorder-tip {
    color: #000000;
    font-size: 24px;
    padding-bottom: 24px;
}

#help-yourself-suicide-hotlines {
    background-color: #030303;
    padding-bottom: 248px;
}

#help-yourself-suicide-hotlines .main-header {
    padding-top: 248px;
}

.suicide-hotlines-body {
    height: 500px;
    width: 67%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    overflow-y: scroll;
    border: 5px solid #FF6347;
    padding-bottom: 62px;
}

.suicide-hotlines-title {
    font-size: 32px;
    padding-top: 62px;
    color: #FF6347;
    font-weight: 600;
}

.suicide-hotlines-country {
    color: #ffffff;
    font-size: 24px;
    padding-top: 62px;
    font-weight: 500;
}

.suicide-hotlines-organization {
    color:  #ffffff; 
    padding-top: 40px;
    padding-bottom: 5px;
    font-size: 20px;
    width: 50%;
    margin-left: auto;
    margin-right: auto;
}

.suicide-hotlines-link {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
}

.suicide-hotlines-link a {
    text-decoration: none;
    padding-top: 5px;
    font-size: 20px; 
    word-wrap: break-word; 
}

.suicide-hotlines-phone, .suicide-hotlines-email {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
}

.suicide-hotlines-phone a, .suicide-hotlines-email a {
    font-size: 20px;
    color: #ffffff;
    padding-top: 5px;
    letter-spacing: 1px;
}

.suicide-hotlines-phone a:hover, .suicide-hotlines-email a:hover {
    text-decoration: none;
}

#help-yourself-resources {
    padding-bottom: 96px;
}

.help-yourself-resources-title {
    font-size: 32px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-weight: 600;
    color: #000000;
    padding-top: 62px;
}

.help-yourself-resources-videos {
    margin-top: -32px;
    padding-bottom: 96px;
}

.help-yourself-resources-videos iframe, .help-yourself-resources-articles iframe {
    margin-left: auto;
    margin-right: auto;
    display: block;
    border-radius: 2%;
    margin-top: 96px;
}

.help-yourself-resources-videos iframe {
    width: 67%;
    height: 480px;
    border: none;
}

.help-yourself-resources-articles {
    margin-bottom: 62px;
}

.help-yourself-resources-articles iframe {
    width: 85%;
    height: 500px;
    border: 2px solid #000000;
}

.help-yourself-resources-links {
    padding-top: 62px;
}

.help-yourself-resources-links a {
    display: block;
    width: 50%;
    margin-left: auto;
    margin-right: auto;
    font-size: 24px;
    color: #49A4D5;
    padding-bottom: 62px;
    text-align: center;
}

.help-yourself-resources-links a:hover {
    text-decoration: none;
    color: #49A4D5;
}

.help-yourself-resources-links .fa-angle-right {
    color: #49A4D5; /* the color of the icon should match the color of the text */
}

/* Extra small devices (phones) */
@media only screen and (max-width:717px) {
    #help-yourself-title div {
        font-size: 32px;
        padding-top: 32px;
        padding-bottom: 32px;
    }
    #help-yourself-looking-after-yourself {
        padding-bottom: 62px;
    }
    .main-header {
        font-size: 20px;
        padding-bottom: 30px;
    }
    .looking-after-tip {
        font-size: 18px;
        padding-bottom: 18px;
    }
    .looking-after-description {
        font-size: 16px;
        padding-bottom: 62px;
    }
    #help-yourself-looking-after-yourself img {
        margin-bottom: 62px;
    }
    #help-yourself-specific-disorders, #help-yourself-specific-disorders .main-header, #help-yourself-resources .main-header {
        padding-top: 62px;
    }
    #help-yourself-specific-disorders {
        padding-bottom: 62px;
    }
    .specific-disorder-header, .specific-disorder-tip {
        width: 50%;
    }
    .specific-disorder-header {
        font-size: 18px;
        padding-top: 30px;
        padding-bottom: 18px;
    }
    .specific-disorder-tip {
        font-size: 16px;
        padding-bottom: 16px;
    }
    #help-yourself-suicide-hotlines {
        padding-bottom: 62px;
    }
    #help-yourself-suicide-hotlines .main-header {
        padding-top: 62px;
    }
    .suicide-hotlines-body {
        height: 300px;
        margin-top: 30px;
        width: 80%;
        border: 2px solid #FF6347;
    }
    .suicide-hotlines-title {
        font-size: 18px;
        padding-top: 30px;
    }
    .suicide-hotlines-country {
        font-size: 16px;
        padding-top: 30px;
    }
    .suicide-hotlines-organization {
        font-size: 12px;
        padding-top: 20px;
    }
    .suicide-hotlines-link, .suicide-hotlines-phone, .suicide-hotlines-email {
        width: 50%;
    }
    .suicide-hotlines-link a, .suicide-hotlines-phone a, .suicide-hotlines-email a {
        padding-top: 3px;
        font-size: 10px;
        word-wrap: break-word;
        letter-spacing: 0px;
    }
    #help-yourself-resources {
        padding-bottom: 20px;
        padding-top: 0px;
    }
    .help-yourself-resources-title {
        font-size: 18px;
        padding-top: 30px;
        padding-bottom: 30px;
    }
    .help-yourself-resources-videos {
        padding-bottom: 0px;
    }
    .help-yourself-resources-videos iframe {
        margin-top: 30px;
        height: 200px;
    }
    #media-display-none {
        display: none;
    }
    .help-yourself-resources-articles iframe {
        display: none; /* the article does not look good on mobile so the options of its ommitance was selected  */
    }
    .help-yourself-resources-links {
        padding-bottom: 30px;
    }
    #mobile-special-padding { /* for unidentified reasons the top- and bottom-padding for the "External Links" title was off */
        padding-top: 0px;
        padding-bottom: 0px;
        margin-top: -10px;
        margin-bottom: -30px;
    }
    .help-yourself-resources-links a {
        font-size: 16px;
        padding-bottom: 30px;
    }
}

/* Small devices (Tablets and landscape phones) */
@media only screen and (min-width:718px) and (max-width:992px) {
    #help-yourself-title div {
        font-size: 45px;
        padding-top: 45px;
        padding-bottom: 45px;
    }
    #help-yourself-looking-after-yourself {
        padding-bottom: 45px;
    }
    .main-header {
        font-size: 30px;
        padding-bottom: 45px;
    }
    .looking-after-tip {
        font-size: 26px;
        padding-bottom: 26px;
    }
    .looking-after-description {
        font-size: 20px;
        padding-bottom: 45px;
    }
    #help-yourself-looking-after-yourself img {
        margin-bottom: 90px;
    }
    #help-yourself-specific-disorders {
        padding-top: 45px;
    }
    #help-yourself-specific-disorders .main-header, #help-yourself-resources .main-header {
        padding-top: 45px;
    }
    #help-yourself-specific-disorders {
        padding-bottom: 90px;
    }
    .specific-disorder-header, .specific-disorder-tip {
        width: 50%;
    }
    .specific-disorder-header {
        font-size: 26px;
        padding-bottom: 26px;
        padding-top: 45px;
    }
    .specific-disorder-tip {
        font-size: 20px;
        padding-bottom: 20px;
    }
    #help-yourself-suicide-hotlines {
        padding-bottom: 90px;
    }
    #help-yourself-suicide-hotlines .main-header {
        padding-top: 90px;
    }
    .suicide-hotlines-body {
        height: 400px;
        margin-top: 45px;
        width: 75%;
        border: 2px solid #FF6347;
    }
    .suicide-hotlines-title {
        font-size: 26px;
        padding-top: 30px;
    }
    .suicide-hotlines-country {
        font-size: 20px;
        padding-top: 45px;
    }
    .suicide-hotlines-organization {
        font-size: 18px;
        padding-bottom: 0px;
        padding-top: 30px;
    }
    .suicide-hotlines-email, .suicide-hotlines-link, .suicide-hotlines-phone {
        padding-top: 5px;
        width: 50%;
    }
    .suicide-hotlines-email a, .suicide-hotlines-link a, .suicide-hotlines-phone a {
        font-size: 16px;
        letter-spacing: 0px;
        word-wrap: break-word;
    }
    #help-yourself-resources {
        padding-bottom: 30px;
        padding-top: 45px;
    }
    .help-yourself-resources-title {
        font-size: 26px;
        padding-top: 45px;
        padding-bottom: 45px;
    }
    .help-yourself-resources-videos {
        padding-bottom: 0px;
    }
    .help-yourself-resources-videos iframe {
        margin-top: 45px;
        height: 400px;
    }
    #media-display-none {
        display: none;
    }
    .help-yourself-resources-articles iframe {
        display: none; /* the tablet width and height do not allow for good article functionality */
    }
    .help-yourself-resources-links {
        padding-top: 0px;
        padding-bottom: 0px;
    }
    .help-yourself-resources-links a {
        font-size: 20px;
        padding-bottom: 45px;
    }
}

/* Medium devices (Large tablets and small laptops) */
@media only screen and (min-width:993px) and (max-width:1310px) {
    #help-yourself-title div {
        padding-bottom: 62px;
    }
    #help-yourself-looking-after-yourself {
        padding-bottom: 62px;
    }
    #help-yourself-specific-disorders {
        padding-top: 0px;
        padding-bottom: 124px;
    }
    #help-yourself-suicide-hotlines {
        padding-bottom: 124px;
    }
    #help-yourself-suicide-hotlines .main-header {
        padding-top: 124px;
    }
    #help-yourself-resources {
        padding-bottom: 62px;
    }
    #help-yourself-resources .main-header {
        padding-top: 0px;
    }
    .help-yourself-resources-title {
        padding-top: 32px;
    }
    .help-yourself-resources-videos {
        padding-bottom: 0px;
    }
    #media-display-none {
        display: none;
    }
    .help-yourself-resources-articles iframe {
        display: none; /* the width and height do not allow for good article functionality */
    }
}

/* Large devices (Large desktops and laptops) */
@media only screen and (min-width: 1824px) {
    #help-yourself-title div, .main-header {
        width: 50%;
    }
    #help-yourself-title div {
        padding-bottom: 62px;
    }
    #help-yourself-suicide-hotlines .main-header {
        padding-top: 124px;
    }
    .looking-after-description, #help-yourself-looking-after-yourself img {
        width: 40%;
    }
    #help-yourself-looking-after-yourself {
        padding-bottom: 62px;
    }
    #help-yourself-specific-disorders, #help-yourself-specific-disorders .main-header, #help-yourself-resources, #help-yourself-resources .main-header {
        padding-top: 62px;
    }
    #help-yourself-specific-disorders {
        padding-bottom: 124px;
    }
    .specific-disorder-header, .specific-disorder-tip {
        width: 25%;
    }
    .suicide-hotlines-body {
        height: 1000px;
    }
    .help-yourself-resources-videos iframe {
        height: 750px;
        width: 65%;
    }
    .help-yourself-resources-articles iframe {
        height: 1250px;
        width: 70%;
    }
    .help-yourself-resources-links a {
        width: 35%;
    }
}

/* Help Others page */

.help-others-title {
    margin-top: 62px;
    text-align: center;
    font-size: 62px;
    color: #000000;
    background-color: #ffffff;
    font-weight: 600;
    margin-bottom: 124px;
}

.help-others-title div {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

.help-others-acquaintance-struggling {
    margin-bottom: 0px;
}

.help-others-row-one, .help-others-row-two, .help-others-row-three, .help-others-row-four {
    height: 800px;
}

.help-others-portion-left {
    float: left;
    width: 50%;
    text-align: center;
    margin-bottom: 20px;
    overflow: auto;
}

.help-others-portion-right {
    float: right;
    width: 50%;
    text-align: center;
    margin-bottom: 20px;
    overflow: auto;
}

.portion-img {
    overflow: hidden;
    display: flex; /* display:flex and align-items:center used to vertically align images into the center of the container */
    align-items: center;
    justify-content: center;
    height: 300px;
}

.portion-img img {
    width: 75%;
}

.portion-heading {
    font-size: 32px;
    font-weight: 600;
    width: 75%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 16px;
    padding-bottom: 32px;
    height: 150px;
}

.portion-body {
    font-size: 24px;
    width: 75%;
    margin-left: auto;
    margin-right: auto;
    height: 250px;
    overflow: hidden; /* change the height settings for .portion-body, .portion-heading and 
    .help-others-portion-left & -right in other screen sizes*/
}

.help-others-big-image {
    margin-bottom: 124px;
}

.help-others-big-image img {
    width: 85%;
    height: auto;
    border-radius: 5%;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.help-others-tips {
    margin-bottom: 62px;
}

.help-others-tips div {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
    font-size: 40px;
    text-align: center;
    font-weight: 600;
    padding-bottom: 80px;
}

.help-others-tips a, .help-others-tips a:hover {
    color: #FF6347;
    text-decoration: none;
}

/* Extra small devices (phones) */
@media only screen and (max-width:717px) {
    .help-others-title {
        font-size: 32px;
        margin-top: 32px;
        margin-bottom: 62px;
    }
    .help-others-row-one, .help-others-row-two, .help-others-row-three, .help-others-row-four {
        height: auto;
    }
    .help-others-portion-left, .help-others-portion-right {
        float: none;
        width: 75%;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        margin-bottom: 62px;
    }
    .portion-img {
        height: auto;
        text-align: center;
    }
    .portion-img img {
        width: 90%;
    }
    .portion-heading {
        font-size: 18px;
        height: auto;
        padding-top: 10px;
        padding-bottom: 18px;
    }
    .portion-body {
        font-size: 16px;
        height: auto;
    }
    .help-others-big-image {
        margin-bottom: 62px;
    }
    .help-others-big-image img {
        width: 100%;
        border-radius: 0%;
    }
    .help-others-tips {
        margin-bottom: 32px;
    }
    .help-others-tips div {
        font-size: 20px;
        padding-bottom: 40px;
    }
}

/* Small devices (Tablets and landscape phones) */
@media only screen and (min-width:718px) and (max-width:992px) {
    .help-others-title {
        font-size: 45px;
        margin-top: 45px;
        margin-bottom: 45px;
    }
    .help-others-acquaintance-struggling {
        margin-bottom: 600px;
    }
    .help-others-row-one, .help-others-row-two, .help-others-row-three, .help-others-row-four {
        height: 500px;
    }
    .help-others-portion-left, .help-others-portion-right {
        margin-bottom: 18px;
    }
    .portion-img {
        height: 225px; /* 45px times 5 = 225px */
    }
    .portion-heading {
        font-size: 26px;
        padding-top: 12px;
        padding-bottom: 26px;
    }
    .portion-body {
        font-size: 20px;
        height: 275px;
    }
    .help-others-big-image {
        margin-top: 45px;
        margin-bottom: 90px;
    }
    .help-others-tips {
        margin-bottom: 45px;
    }
    .help-others-tips div {
        font-size: 30px;
        padding-bottom: 60px;
        width: 67%;
    }
}

/* Large devices (Large desktops and laptops) */
@media only screen and (min-width: 1824px) {
    .help-others-title div {
        width: 60%;
    }
    .help-others-acquaintance-struggling {
        width: 60%;
        margin-left: auto;
        margin-right: auto;
    }
    .help-others-big-image {
        width: 50%;
        margin-left: auto;
        margin-right: auto;
    }
    .help-others-tips {
        width: 75%;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Spread the Word page */ 

.spread-the-word-title {
    background-color: #ffffff;
    color: #000000;
    text-align: center;
    font-size: 62px;
    font-weight: 600;
    margin-top: 62px;
    margin-bottom: 30px;
}

.spread-the-word-title div {
    width: 75%;
    padding-bottom: 94px;
    margin-left: auto;
    margin-right: auto;
}

.spread-the-word-title div span {
    color: #FF6347; 
}

.spread-the-word-full-image-white-to-black {
    background: linear-gradient(#ffffff 50%, #030303 50%)
}

.spread-the-word-full-image-black-to-white {
    background: linear-gradient(#030303 50%, #ffffff 50%)
}

.spread-the-word-full-image-white-to-black img, .spread-the-word-full-image-black-to-white img {
    width: 85%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
    border-radius: 5%;
}

.talking-mental-health-reasons {
    background-color: #030303;
    text-align: center;
    padding-bottom: 62px;
}

.talking-heading, .stigma-heading {
    color: #ffffff;
    font-size: 40px;
    font-weight: 600;
    width: 67%;
    padding-top: 62px;
    margin-left: auto;
    margin-right: auto;
}

.talking-point {
    color: #FF6347;
    font-size: 32px;
    font-weight: 600;
    width: 50%;
    padding-top: 62px;
    margin-left: auto;
    margin-right: auto;
}

.talking-description {
    color: #ffffff;
    font-size: 24px;
    font-weight: 500;
    width: 50%;
    padding-top: 32px;
    margin-left: auto;
    margin-right: auto;
}

.ways-to-fight-stigma {
    background-color: #030303;
    text-align: center;
    padding-bottom: 124px;
}

.stigma-tip {
    font-size: 40px;
    font-weight: 300;
    width: 67%;
    padding-top: 62px;
    margin-left: auto;
    margin-right: auto;
}

.tip-white {
    color: #ffffff;
}

.tip-orange {
    color: #FF6347;
}

.world-mental-health-day {
    text-align: center;
    padding-top: 62px;
    padding-bottom: 62px;
    margin-bottom: 62px;
}

.world-mental-health-day-heading {
    font-size: 40px;
    font-weight: 600;
    width: 67%;
    padding-top: 62px;
    margin-left: auto;
    margin-right: auto;
    color: #FF6347;
}

.world-mental-health-day-body {
    font-size: 24px;
    font-weight: 600;
    width: 50%;
    padding-top: 62px;
    margin-left: auto;
    margin-right: auto;
}

.suicide-prevention {
    padding-top: 62px;
    padding-bottom: 124px;
    background-color: #030303;
}

.suicide-prevention-week {
    text-align: center;
}

.suicide-week-heading {
    font-size: 40px;
    font-weight: 500;
    color: #FF6347;
    width: 67%;
    padding-top: 62px;
    margin-left: auto;
    margin-right: auto;
}

.suicide-week-body {
    font-size: 24px;
    font-weight: 400;
    color: #ffffff;
    width: 50%;
    padding-top: 62px;
    margin-left: auto;
    margin-right: auto;
}

.shop {
    background-color: #ffffff;
    padding-top: 124px;
    padding-bottom: 62px;
    text-align: center;
}

.shop-heading {
    font-size: 32px;
    font-weight: 600;
    color: #000000;
    width: 67%;
    padding-bottom: 62px;
    margin-left: auto;
    margin-right: auto;
}

.shop-heading a, .shop-heading a:hover {
    color: #FF6347;
    text-decoration: none;
}

.shop-text {
    font-size: 24px;
    font-weight: 400;
    color: #000000;
    width: 50%;
    padding-bottom: 62px;
    margin-left: auto;
    margin-right: auto;
}

.shop-text a, .shop-text a:hover {
    color: #FF6347;
    font-size: 32px;
    text-decoration: none;
}

.image-row-one, .image-row-two {
    padding-left: 0;
    padding-right: 0;
}

.image-row-one a img, .image-row-two a img {
    width: 49%;
    height: auto;
}

/* Extra small devices (phones) */
@media only screen and (max-width:717px) {
    .spread-the-word-title {
        font-size: 32px;
        margin-top: 32px;
        margin-bottom: 32px;
    }
    .spread-the-word-title div {
        padding-bottom: 32px;
    }
    .spread-the-word-full-image-black-to-white img, .spread-the-word-full-image-white-to-black img {
        width: 100%;
        border-radius: 0%;
    }
    .talking-mental-health-reasons {
        padding-top: 32px;
        padding-bottom: 32px;
    }
    .talking-heading, .stigma-heading {
        font-size: 20px;
        padding-top: 32px;
    }
    .talking-point {
        font-size: 18px;
        padding-top: 32px;
    }
    .talking-description {
        font-size: 16px;
        padding-top: 18px;
        width: 80%;
    }
    .ways-to-fight-stigma {
        padding-top: 32px;
        padding-bottom: 62px;
    }
    .stigma-tip {
        font-size: 20px;
        padding-top: 32px;
        width: 75%;
    }
    .world-mental-health-day {
        padding-top: 0px;
        padding-bottom: 32px;
        margin-bottom: 32px;
    }
    .world-mental-health-day-heading {
        font-size: 20px;
        padding-top: 32px;
        width: 80%;
    }
    .world-mental-health-day-body {
        font-size: 16px;
        padding-top: 32px;
        width: 75%;
    }
    .suicide-prevention {
        padding-top: 0px;
        padding-bottom: 62px;
    }
    .suicide-week-heading {
        font-size: 20px;
        padding-top: 32px;
        width: 80%;
    }
    .suicide-week-body {
        font-size: 16px;
        padding-top: 32px;
        width: 75%;
    }
    .shop {
        padding-top: 32px;
        padding-bottom: 0px;
    }
    .shop-heading {
        font-size: 18px;
        padding-bottom: 32px;
    }
    .shop-text {
        font-size: 16px;
        padding-bottom: 32px;
    }
    .shop-text a, .shop-text a:hover {
        font-size: 18px;
    }
    .image-row-one a img, .image-row-two a img {
        width: 100%;
    }
}

/* Small devices (Tablets and landscape phones) */
@media only screen and (min-width:718px) and (max-width:992px) {
    .spread-the-word-title {
        font-size: 45px;
        margin-top: 45px;
        margin-bottom: 45px;
    }
    .spread-the-word-title div {
        padding-bottom: 45px;
    }
    .talking-mental-health-reasons {
        padding-bottom: 45px;
    }
    .talking-heading, .stigma-heading {
        font-size: 30px;
        padding-top: 45px;
    }
    .talking-point {
        font-size: 26px;
        padding-top: 45px;
    }
    .talking-description {
        font-size: 20px;
        padding-top: 26px;
        width: 60%;
    }
    .ways-to-fight-stigma {
        padding-bottom: 90px;
    }
    .stigma-tip {
        font-size: 30px;
        padding-top: 45px;
    }
    .world-mental-health-day {
        padding-top: 0px;
        padding-bottom: 45px;
        margin-bottom: 45px;
    }
    .world-mental-health-day-heading {
        font-size: 30px;
        padding-top: 45px;
    }
    .world-mental-health-day-body {
        font-size: 20px;
        padding-top: 45px;
    }
    .suicide-prevention {
        padding-top: 0px;
        padding-bottom: 45px;
    }
    .suicide-week-heading {
        font-size: 30px;
        padding-top: 45px;
    }
    .suicide-week-body {
        font-size: 20px;
        padding-top: 45px;
    }
    .shop {
        padding-top: 45px;
        padding-bottom: 0px;
    }
    .shop-heading {
        font-size: 26px;
        padding-bottom: 45px;
    }
    .shop-text {
        font-size: 20px;
        padding-bottom: 45px;
    }
    .shop-text a, .shop-text a:hover {
        font-size: 26px;
    }
}

/* Large devices (Large desktops and laptops) */
@media only screen and (min-width: 1824px) {
    .spread-the-word-title div, .talking-heading, .stigma-heading, .suicide-week-heading {
        width: 60%;
    }
    .spread-the-word-full-image-black-to-white img, .spread-the-word-full-image-white-to-black img, .talking-point, .talking-description, .world-mental-health-day-heading {
        width: 40%;
    } 
    .stigma-tip, .shop-heading {
        width: 50%;
    }
    .world-mental-health-day-body, .suicide-week-body, .shop-text {
        width: 30%;
    }
    .image-row-one, .image-row-two {
        width: 75%;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Sign In page + Sign Up page */

.sign-in-page, .sign-up-page {
    margin-top: 62px;
    margin-bottom: 62px;
}

.sign-in, .sign-up {
    text-align: center;
    width: 50%;
    padding-bottom: 62px;
    margin-left: auto;
    margin-right: auto;
    color: #ffffff;
}

.sign-in-logo, .sign-up-logo {
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 20px;
}

.sign-in-logo img, .sign-up-logo img {
    height: 80px;
    width: 80px;
}

.sign-in-form, .sign-up-form {
    padding-bottom: 40px;
}

.sign-in-form label, .sign-up-form label {
    display: none;
}

.sign-in-form input[type=password], .sign-in-form input[type=email], .sign-up-form input[type=text], 
.sign-up-form input[type=password], .sign-up-form input[type=email] {
    padding: 20px 10px;
    margin-bottom: 10px;
    width: 75%;
    font-size: 16px;
    font-weight: 500;
    color: #000000;
    border: 2px solid #000000;
}

.sign-in-form input[type=submit], .sign-up-form input[type=submit] {
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 1px;
    color: #ffffff;
    border: 1px solid #000000;
    border-radius: 8px;
    background-color: #FF6347;
    width: 35%;
    padding: 16px 10px;
}

.sign-in-form input[type=submit] {
    margin-top: 10px;
}

.sign-up-form input[type=submit] {
    margin-top: 30px;
}

.sign-in-form input[type=submit]:hover, .sign-up-form input[type=submit]:hover {
    background-color: #FF4500;
}

.sign-in-redirect, .sign-up-redirect, .sign-up-tos {
    font-size: 17px;
}

.sign-up-tos {
    margin-bottom: 20px;
    width: 75%;
    margin-left: auto;
    margin-right: auto;
}

.sign-up-tos span {
    font-weight: 600;
}

.sign-in-redirect a, .sign-in-redirect a:hover, .sign-up-redirect a, .sign-up-redirect a:hover {
    margin-left: 10px;
    color: #FF6347;
    text-decoration: none;
}

.sign-in-redirect .fa-angle-right, .sign-up-redirect .fa-angle-right {
    margin-left: 5px; /* smaller margins to accomodate the smaller font */
}

/* Extra small devices (phones) */
@media only screen and (max-width:717px) {
    .sign-in-page, .sign-up-page {
        margin-top: 32px;
        margin-bottom: 32px;
    }
    .sign-in, .sign-up {
        width: 90%;
        padding-bottom: 32px;
    }
    .sign-in-form input[type=password], .sign-in-form input[type=email], .sign-up-form input[type=text], 
    .sign-up-form input[type=password], .sign-up-form input[type=email] {
        font-size: 14px;
        width: 90%;
    }
    .sign-in-form input[type=submit], .sign-up-form input[type=submit] {
        font-size: 14px;
        width: 40%;
        margin-top: 20px;
    }
    .sign-in-redirect, .sign-up-redirect, .sign-up-tos {
        font-size: 15px;
    }
}

/* Small devices (Tablets and landscape phones) */
@media only screen and (min-width:718px) and (max-width:992px) {
    .sign-in-page { /* bigger margins are used for aesthetic purposes */
        margin-top: 135px;
        margin-bottom: 135px;
    }
    .sign-up-page {
        margin-top: 45px;
        margin-bottom: 45px;
    }
    .sign-in, .sign-up {
        width: 60%;
        padding-bottom: 45px;
    }
    .sign-in-form input[type=password], .sign-in-form input[type=email], .sign-up-form input[type=text], 
    .sign-up-form input[type=password], .sign-up-form input[type=email] {
        font-size: 14px;
    }
    .sign-in-form input[type=submit], .sign-up-form input[type=submit] {
        font-size: 14px;
        margin-top: 24px;
    }
    .sign-in-redirect, .sign-up-redirect, .sign-up-tos {
        font-size: 16px;
    }
    .sign-in-redirect .fa-angle-right, .sign-up-redirect .fa-angle-right {
        margin-left: 5px; /* smaller margins to accomodate the smaller font and smaller device screen size */
    }
}

/* Large devices (Large desktops and laptops) */
@media only screen and (min-width: 1824px) {
    .sign-in-page, .sign-up-page {
        width: 50%;
        margin-left: auto;
        margin-right: auto;
    }
}

/* @media queries with min-height settings to ensure the footer stays at the bottom of the sign-in and sign-up pages */
@media only screen and (min-height:940px) {
    .sign-in-page {
        margin-top: 150px;
        margin-bottom: 150px;
    }
    .sign-up-page {
        margin-top: 100px;
        margin-bottom: 100px;
    }
}

@media only screen and (min-height:1110px) {
    .sign-in-page {
        margin-top: 200px;
        margin-bottom: 200px;
    }
    .sign-up-page {
        margin-top: 125px;
        margin-bottom: 125px;
    }
}

@media only screen and (min-height:1230px) {
    .sign-in-page {
        margin-top: 300px;
        margin-bottom: 300px;
    }
    .sign-up-page {
        margin-top: 180px;
        margin-bottom: 180px;
    }
}

@media only screen and (min-height:1430px) {
    .sign-in-page {
        margin-top: 400px;
        margin-bottom: 400px;
    }
    .sign-up-page {
        margin-top: 240px;
        margin-bottom: 240px;
    }
}

@media only screen and (min-height:1570px) {
    .sign-in-page {
        margin-top: 500px;
        margin-bottom: 500px;
    }
    .sign-up-page {
        margin-top: 300px;
        margin-bottom: 300px;
    }
}

@media only screen and (min-height:1760px) {
    .sign-in-page {
        margin-top: 600px;
        margin-bottom: 600px;
    }
    .sign-up-page {
        margin-top: 480px;
        margin-bottom: 480px;
    }
}

@media only screen and (min-height:2030px) {
    .sign-in-page {
        margin-top: 800px;
        margin-bottom: 800px;
    }
    .sign-up-page {
        margin-top: 640px;
        margin-bottom: 640px;
    }
}

@media only screen and (min-height:2430px) {
    .sign-in-page {
        margin-top: 1000px;
        margin-bottom: 1000px;
    }
    .sign-up-page {
        margin-top: 850px;
        margin-bottom: 850px;
    }
}

@media only screen and (min-height:2850px) {
    .sign-in-page {
        margin-top: 1400px;
        margin-bottom: 1400px;
    }
    .sign-up-page {
        margin-top: 1200px;
        margin-bottom: 1200px;
    }
}