body {
    background-color: #ededee;
    font-family: "filson-pro";
}

.offset:before { 
	display: block; 
 	content: " "; 
  	height: 80px;      /* Give height of your fixed element */
    margin-top: -80px; /* Give negative margin of your fixed element */  	
    visibility: hidden; 
}

.s-container {
    padding-bottom: 40px;
}

/* Add a black background color to the top navigation */

.topnav {
    background-color: #ededee;
    overflow: hidden;
    position: fixed;
    z-index: 100;
    width: 100%;
}

/* Style the links inside the navigation bar */

.topnav a {
    float: left;
    display: inline-block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

/* Change the color of links on hover */

.topnav a:hover {
    background-color: #ddd;
    color: black;
}

/* Add an active class to highlight the current page */

.active {
    background-color: #4CAF50;
    color: white;
}

/* Hide the link that should open and close the topnav on small screens */

.topnav .icon {
    display: none;
}


/* Extra small devices (portrait phones, less than 576px) */

@media screen and (max-width: 600px) {

    .topnav a:not(:first-child) {
        display: none;
    }
    .topnav a.icon {
        float: right;
        display: block;
    }

}

/* Extra small devices (portrait phones, less than 576px) */

@media (max-width: 600px) {

    .card-title-top {
        font-size: 20px;
        font-weight: 500;
    }
    .card-title-link {
        font-size: 16px;
        font-weight: 500;
    }
    .card-img-top {
        width: 80%;
    }
    .card-img-top-2 {
        width: 50%;
    }
    .s-body {
        font-size: 16px;
    }
    .contact-body {
        font-size: 14px;
    }
    .background-container {
        position: absolute;
        top: 0;
        left: 0;
        height: 320px;
        width: 100%;
        z-index: -500;
        background-image: url(backgroundimage.jpg);
        background-size: cover;
        background-position: center;
    }




    .topnav.responsive {
        position: fixed;
    }
    .topnav.responsive a.icon {
        position: fixed;
        right: 15px;
        top: 0;
    }
    .topnav.responsive a {
        float: none;
        display: block;
        text-align: left;
    }
    .main-logo {
        margin-top: 160px;
    }
    .main-logo img {
        width: 80%;
        margin-left: auto;
        margin-right: auto;
    }
    .our-members {
        margin-top: 100px;
        margin-bottom: 30px;
    }
    .work-title {
        margin-top: 50px;
    }
    .card-format {
        margin-top: 25px;
    }
    .s-header {
        font-weight: 900;
        color: #14A8E1;
    }
    .s-container {
        width: 96%;
        margin-left: auto;
        margin-right: auto;
    }
    .about-us-back {
        height: 480px;
        width: 100%;
        position: absolute;
        top: 1675px;
        background-color: white;
    }
    .first-section {
        padding-top: 30px;
    }


}

/* Small devices (landscape phones, 576px and up) */

@media (min-width: 600px) and (max-width: 767.98px) {
    .card-title-top {
        font-size: 25px;
        font-weight: 500;
    }
    .card-title-link {
        font-size: 20px;
        font-weight: 500;
    }
    .card-img-top {
        width: 70%;
    }
    .card-img-top-2 {
        width: 50%;
    }
    .s-body {
        font-size: 16px;
    }
    .contact-body {
        font-size: 14px;
    }
    .background-container {
        position: absolute;
        top: 0;
        left: 0;
        height: 350px;
        width: 100%;
        z-index: -500;
        background-image: url(backgroundimage.jpg);
        background-size: cover;
        background-position: center;
    }




    .main-logo {
        margin-top: 160px;
    }
    .main-logo img {
        width: 80%;
        margin-left: auto;
        margin-right: auto;
    }
    .our-members {
        margin-top: 100px;
        margin-bottom: 30px;
    }
    .work-title {
        margin-top: 50px;
    }
    .card-format {
        margin-top: 25px;
    }
    .s-header {
        font-weight: 900;
        color: #14A8E1;
    }
    .s-container {
        width: 96%;
        margin-left: auto;
        margin-right: auto;
    }
    .about-us-back {
        height: 480px;
        width: 100%;
        position: absolute;
        top: 1675px;
        background-color: white;
    }
    .first-section {
        padding-top: 30px;
    }


}

/* Medium devices (tablets, 768px and up) */

@media (min-width: 768px) and (max-width: 991.98px) {
    .card-title-top {
        font-size: 18px;
        font-weight: 500;
    }
    .card-title-link {
        font-size: 15px;
        font-weight: 500;
    }
    .card-img-top {
        width: 80%;
    }
    .card-img-top-2 {
        width: 100%;
    }
    .s-body {
        font-size: 16px;
    }
    .contact-body {
        font-size: 12px;
    }
    .background-container {
        position: absolute;
        top: 0;
        left: 0;
        height: 380px;
        width: 100%;
        z-index: -500;
        background-image: url(backgroundimage.jpg);
        background-size: cover;
        background-position: center;
    }




    .main-logo {
        margin-top: 160px;
    }
    .main-logo img {
        width: 80%;
        margin-left: auto;
        margin-right: auto;
    }
    .our-members {
        margin-top: 100px;
        margin-bottom: 30px;
    }
    .work-title {
        margin-top: 50px;
    }
    .card-format {
        margin-top: 25px;
    }
    .s-header {
        font-weight: 900;
        color: #14A8E1;
    }
    .s-container {
        width: 96%;
        margin-left: auto;
        margin-right: auto;
    }
    .about-us-back {
        height: 480px;
        width: 100%;
        position: absolute;
        top: 1675px;
        background-color: white;
    }
    .first-section {
        padding-top: 30px;
    }

}

/* Large devices (desktops, 992px and up) */

@media (min-width: 992px) and (max-width: 1199.98px) {
    .card-title-top {
        font-size: 24px;
        font-weight: 500;
    }
    .card-title-link {
        font-size: 18px;
        font-weight: 500;
    }
    .card-img-top {
        width: 80%;
    }
    .card-img-top-2 {
        width: 100%;
    }
    .s-body {
        font-size: 16px;
    }
    .contact-body {
        font-size: 14px;
    }
    .background-container {
        position: absolute;
        top: 0;
        left: 0;
        height: 410px;
        width: 100%;
        z-index: -500;
        background-image: url(backgroundimage.jpg);
        background-size: cover;
        background-position: center;
    }





    .main-logo {
        margin-top: 160px;
    }
    .main-logo img {
        width: 80%;
        margin-left: auto;
        margin-right: auto;
    }
    .our-members {
        margin-top: 100px;
        margin-bottom: 30px;
    }
    .work-title {
        margin-top: 50px;
    }
    .card-format {
        margin-top: 25px;
    }
    .s-header {
        font-weight: 900;
        color: #14A8E1;
    }
    .s-container {
        width: 96%;
        margin-left: auto;
        margin-right: auto;
    }
    .about-us-back {
        height: 480px;
        width: 100%;
        position: absolute;
        top: 1675px;
        background-color: white;
    }
    .first-section {
        padding-top: 30px;
    }

}

/* Extra large devices (large desktops, 1200px and up) */

@media (min-width: 1200px) {
    .card-title-top {
        font-size: 24px;
        font-weight: 500;
    }
    .card-title-link {
        font-size: 20px;
        font-weight: 500;
    }
    .card-img-top {
        width: 80%;
    }
    .card-img-top-2 {
        width: 100%;
    }
    .s-body {
        font-size: 18px;
    }
    .contact-body {
        font-size: 16px;
    }
    .background-container {
        position: absolute;
        top: 0;
        left: 0;
        height: 470px;
        width: 100%;
        z-index: -500;
        background-image: url(backgroundimage.jpg);
        background-size: cover;
        background-position: center;
        opacity: 0.5;
    }







    .main-logo {
        margin-top: 160px;
    }
    .main-logo img {
        width: 80%;
        margin-left: auto;
        margin-right: auto;
    }
    .our-members {
        margin-top: 130px;
        margin-bottom: 30px;
    }
    .work-title {
        margin-top: 50px;
    }
    .card-format {
        margin-top: 25px;
    }
    .s-header {
        font-weight: 900;
        color: #14A8E1;
    }
    .s-container {
        width: 96%;
        margin-left: auto;
        margin-right: auto;
    }
    .about-us-back {
        height: 480px;
        width: 100%;
        position: absolute;
        top: 1675px;
        background-color: white;
    }
    .first-section {
        padding-top: 30px;
    }

}