html, body{
    font-family: 'Nunito Sans', sans-serif;
}

h1{
    font-weight: 800;
}

.main-header{
    box-shadow: none;
}

.hero-image {
    background-image:  url(/wp-content/themes/smilebox-plus/images/general/about-us-hero-image.jpg);
    height: 50vw;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.hero-overlay{
    pointer-events: none;
    padding-top: 1vh;
}

.about-us-main-title{
    font-size: calc(16px + 1.1vw);
    font-weight: 700;
    color: #fff;
    margin-top: 25%;
    transform: translate(0, -55%);
}

.about-us-title{
    font-size: calc(16px + 5vw);
    font-weight: 700;
    color: #868b8b;
}

.story-title,
.story-text{
    font-size: calc(12px + 0.65vw);
    font-weight: 700;
    color: #868b8b;
}
.story-title
{
    font-weight: 700;
}

.story-text{
    font-weight: 300;
}

.about-us-bottom-text{
    font-size: calc(16px + 2vw);
    font-weight: 300;
    color: #868b8b;
}
.about-us-stats{
    background-color: #73cbc5;
}

.stats-title{
    font-size: calc(16px + 4.75vw);
    font-weight: 700;
    color: #fff;
}

.stats-item{
    width: 60vw;
    height: 60vw;
    background-color: #fff;
    border-radius: 50%;
    max-width: 400px;
    max-height: 400px;
}
.stats-data-title{
    font-size: calc(30px + 5.75vw);
    font-weight: 700;
    color: #73cbc5;
    margin-bottom: -10%;
    padding: 25% 5% 5% 5%;
}
.stats-data-description{
    font-size: calc(16px + 0.25vw);
    color: #73cbc5;
    padding: 0% 5% 5% 5%;
    line-height: 19px;
}
.divider-braek {
    width: 18%;
    height: 10px;
}
.image-wrapper{
    
padding: 0 10% 0 10%;
}
/* Small devices (landscape phones, 450px and up) */
@media (min-width: 450px) { 
.about-us-main-title{
    font-size: calc(16px + 2vw);
    }
 }

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) { 

 }

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

.about-us-main-title{
    font-size: calc(16px + 2.5vw);
    }
 }
/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) { 
    .main-header{
        float: left;
    }
    .main-header{
        background-color: rgba(255, 255, 255, 0.9);
    }    
    .about-us-main{
        
padding: 10% 18% 10% 19%;
    }
.about-us-main-title {
    font-size: calc(20px + 3vw);
    transform: translate(0, -80%);
}    
.about-us-title {
    font-size: calc(16px + 4vw);
}
.about-us-bottom-text {
    font-size: calc(10px + 2vw);
    font-weight: 200;
    color: #868b8b;
}
.divider-braek {
    width: 10%
    }
    .image-wrapper {
    padding: 7% 0% 0 0%;
}
.story-title, .story-text {
    font-size: calc(12px + 0.6vw);
    line-height: 24px;
}
.about-us-stats {
    padding: 5% 10% 5% 10%;
}
.stats-item {
    width: 15vw;
    height: 15vw;
    background-color: #fff;
    border-radius: 50%;
    max-width: 300px;
    max-height: 300px;
}

.stats-title {
    font-size: calc(16px + 2.75vw);
    font-weight: 700;
    color: #fff;
}


.stats-data-title {
    font-size: calc(18px + 2.75vw);
    margin-bottom: -10%;
    padding: 25% 5% 5% 5%;
}
.stats-data-description {
    font-size: calc(12px + 0.25vw);
    padding: 0% 5% 5% 5%;
}
}
/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) { 

 }

 /* Extra large devices (large desktops, 1500px and up)*/
@media (min-width: 1500px) { 

.about-us-main {
    padding: 10% 18% 10% 18%;
}
}    

 /* Extra large devices (large desktops, 1700px and up)*/
@media (min-width: 1700px) { 

.about-us-main {
    padding: 10% 22% 10% 22%;
}

.divider-braek {
    width: 9%;
}
.navbar {
    /* margin-top: -1.4%; */
}
.sbp-logo-desktop-wrapper {
    margin: 1.25% 0 1% 1%;
    /* padding: 0% 4% 0% 2%; */
}

}


 /* Extra large devices (large desktops, 1920px and up)*/
@media (min-width: 1920px) { 
.story-title, .story-text {
    font-size: calc(12px + 0.6vw);
    line-height: 32px;
    margin: 0;
}

.stats-data-description {
    font-size: calc(12px + 0.65vw);
    font-weight: 300;
    line-height: 35px;
}

 }