@media only screen and (min-width: 0){
    .clear {
    clear: both;
}
header div {
    background-color: #57beb6;
    width: 100%;
}
.hero {
    padding: 10px 40px 30px 40px;
    width: 95vw;
}
.scroll {
    
    
}
.arrow {
    float: left;
    width: 25%;
    margin: -1px 37.5% 0 37.5%;
    
    
}
header div h1 {
    font-family: 'ostrich_sansheavy';
    color: #fef1c1;
    font-size: 7.5vw;
    letter-spacing: 1px;
    text-align: center;
    padding-top: 40px;

}
header div h2 {
    text-align: center;
    font-family: 'ostrich_sans_roundedmedium';
    font-size: 14px;
    letter-spacing: 2px
}
#green {
    background-color: #c3da53;
    width: 100%;
    padding: 60px 45px 45px 45px;
}
#green p {
    font-family: ambleregular,sans-serif;
    font-size: 12pt;
    line-height: 20px;
    letter-spacing: .25px;
    color: #38383a;
    
}
#green .top5 .p1 {
    margin: 10px 0;
    
}
#green .one {
    font-family: 'ostrich_sansheavy';
    font-size: 10vw;
    color: #fef1c1;
    letter-spacing: 1px;
    
}
#green .two {
    font-family: 'ostrich_sansheavy';
    font-size: 18vw;
    line-height: 14vw;
    color: #26745b;
}
#green .three {
    font-family: 'ostrich_sansheavy';
    font-size: 16.2vw;
    line-height: 12vw;;
    margin-top: 5px;
    color: #a6ba46;
    letter-spacing: .5px;
}
#green .four {
    color: #fef1c1;
    font-family: ostrich_sansheavy;
    font-size: 11.5vw;
    letter-spacing: 1.5px;
    line-height: 10vw;
}
#green img {
    margin-top: 40px;
    width: 77vw;
}
#green .images {
    display: none;
}
#red {
    background-color: #d55a55;
    width: 100%;
    padding: 60px 45px 45px 45px;
    display: block;
}
#red .images {
    display: none;
}
#red img {
    width: 77vw;
    position: absolute;
}
#red .body p {
    margin: 10px 0 50px 0;
}
#red  p{
    font-family: 'ambleregular';
    font-size: 12pt;
    line-height: 20px;
    letter-spacing: .25px;
    color: #efe1c1;
}
#red .p2 {
    margin-top: 15px;
}
#red .one {
    font-family: 'ostrich_sansheavy';
    font-size: 8vw;
    color: #fef1c1;
    letter-spacing: 1px;
}
#red .two {
    margin-top: 24vw;
    color: #56bb9f;
    font-family: 'ostrich_sansheavy';
    font-size: 10vw;
    line-height: 10vw;
    letter-spacing: .5px;
}
#red .three {
    font-family: 'ostrich_sansheavy';
    font-size: 10vw;
    line-height: 10vw;
    color: #a6ba46;
    letter-spacing: .5px;
}
#red .four {
    font-family: ostrich_sansheavy;
    font-size: 23vw;
    line-height: 16vw;
    color: #56bb9f;
}
#red .five {
    font-size: 10vw;
    font-family: ostrich_sansheavy;
    color: #fef1c1;
    letter-spacing: 2px;
    line-height: 9vw;
}
#drkblue {
    background-color: #44909a;
    width: 100%;
    padding: 60px 45px 45px 45px;
    display: block;
}
#drkblue img {
    width: 77vw;
    margin-top: 2.5vw;
    
}
#drkblue .one{
    position: absolute;
    font-family: 'ostrich_sansheavy';
    font-size: 9vw;
    color: white;
    letter-spacing: 1px;
}
#drkblue .two {
    font-family: ostrich_sansheavy;
    font-size: 11.5vw;
    line-height: 11vw;
    letter-spacing: 1px;
    color: #49424e;
}
#drkblue .three {
    font-family: 'ostrich_sansheavy';
    font-size: 10vw;
    color: #56bb9f;
    letter-spacing: 1px; 
    line-height: 9vw;   
}
#drkblue .four {
    font-family: 'ostrich_sansheavy';
    font-size: 11vw;
    line-height: 9vw;;
    letter-spacing: 2px;
    color: #fab395;
}
#drkblue .five {
    font-family: ostrich_sansheavy;
    font-size: 8.6vw;
    color: white;
    letter-spacing: 1px;    
}
#drkblue .common {
    font-size: 12px;
    line-height: 16px;
    letter-spacing: .5px;
    
}
#drkblue .mind p {
    margin: 10px 0 50px 0;
    font-family: ambleregular, sans-serif;
}
#drkblue p {
    font-family: ambleregular, sans-serif;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: .25px;
    color: white;
}
#drkblue h6 {
    margin: 30px 0 6px 0;
    letter-spacing: 2px;
    color: #49424e;
    font-family: ambleregular, sans-serif;
    
}
#drkblue .images {
    display: none;
}
.mainp {
    margin: 15px 0 40px;
}
footer {
    background-color: #fef1c1;
    height: 50px;
    padding: 20px 45px;
}
footer a h6 {
    font-size: 12px;
    font-family: ostrich_sansheavy;
    text-decoration: none;
    letter-spacing: .5px;
    float: left;
    margin-right: 10px;
    color: #e83e33
}
.top {
    font-size: 12px;
    font-family: ostrich_sansheavy;
    text-decoration: none;
    letter-spacing: .5px;
    float: right;
    color: #e83e33
}
}
@media only screen and (min-width: 768px) {
    #green {
        padding: 110px 45px 45px 45px;
    }
    #green .whatis {
        width: 50%;
        float: left;
        margin-right: 30px
    }
    #green .one {
        font-size: 8vw;
    }
    #green .two {
        font-size: 14vw;
        line-height: 10vw;
    }
    #green img {
        width: 100%
    }
    #green .three {
        font-size: 9.7vw;
        line-height: 9vw;
    }
    #green .four {
        font-size: 13.5vw;
        letter-spacing: 3px;
        line-height: 11vw;
        float: left;
    }
    #green .container {
        display: flex;
        align-items: stretch;
        margin-top: 15px;
        align-content: stretch;
        float: left;
        
    }
    #green .top5 p {
        width: 50%;
        padding-right: 30px;
        
    }
    #green .top5 .p1 {
        margin-top: 0px
    }
    #green .images {
        float: left;
        height: 655px;
        width: 45%;
        position: relative;
        display: block;
    }
    #green .images img {
        max-width: 330px;
        display: flex;
        justify-content: center
        
    }
    #red {
        padding: 110px 45px 45px 45px;
    }
    #red .images {
        position: relative;
        display: block;
        align-content: flex-start;
        width: 45%;
        height: 1070px;
        margin-right: 5%;
        float: left;
        
    }
    #red .images img {
        width: 297px;
        display: block;
        margin: auto;
        position: absolute;
        
    }
    #red .body {
        float: left;
        width: 50%
    }
    #red .body img {
        width: 48%;
    }
    #red .one {
        font-size: 7vw;
        line-height: 5vw;
        margin-bottom: 8px;
        
    }
    #red .two {
        font-size: 7vw;
        margin-top: 14.5vw
    }
    #red .three {
        font-size: 7vw;
        line-height: 7vw;
        text-align: right;
    }
    #red .four {
        font-size: 13vw;
        text-align: right;
        line-height: 10vw;
    }
    #red .five {
        font-size: 8vw;
        line-height: 7.5vw;
        text-align: right;
    }
    #red .body {
        width: 50%;
        margin-bottom: 50px
    }
    #red .symptoms {
        width: 50%;
        float: left;
    }
    #drkblue {
        padding-top: 110px
    }
    #drkblue .mind {
        width: 50%;
        float: left;
    }
    #drkblue .one {
        font-size: 5.5vw;
    }
    #drkblue .images {
        display: flex;
        width: 50%;
        height: 550px ;
    }
    #drkblue .thoughtpattern {
        width: 100%;
        display: flex;
        flex-direction: column;
    }
    #drkblue .container {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;      
    }
    #drkblue .images img {
        width: 260px;
        display: block;
        margin: auto;
    }
    #drkblue img {
        width: 100%
    }
    #drkblue .mind p {
        margin: 15px 0 50px 0;
        font-family: ambleregular;
    }
    #drkblue .two {
        font-size: 6.8vw;
        line-height: 6vw;
    }
    #drkblue .three {
        font-size: 8vw;
        line-height: 6vw;
    }
    #drkblue .four {
        font-size: 10vw;
        line-height: 9vw
    }
    #drkblue .five {
        font-size: 7.7vw;
        line-height: 6vw;
    }
    #drkblue .thought {
        width: 45%;
        margin-right: 30px;
        float: left;
    }
    #drkblue .thought p {
        font-family: amblelight;
        font-size: 12px;
    }
    footer a h6{
        font-size: 13px;
    }
    .top {
        font-size: 13px;
    }
    
}
@media only screen and (min-width: 1200px) {
    #green {
        padding: 90px 150px;
    }
    #green .images {
        height: 43vw;
        text-align: center;
    }
    #green .images img {
        max-width: 23vw;
        margin-left: 5vw;
        min-width: 370px
    }
    #green .three {
        font-size: 8.3vw;
        line-height: 8vw;
    }
    #green .four {
        font-size: 12vw;
        line-height: 9vw
    }
    #red {
        padding: 15vw 150px 90px 150px;
    }
    #red .one {
        font-size: 6.5vw;
    }
    #red .two {
        width: 40vw;
        font-size: 6.8vw
    }
    #red .three {
        width: 42vw;
        font-size: 6.8vw
    }
    #red .five {
        width: 42vw;
        font-size: 8vw;
    }
    #red .images {
        height: 66vw
    }
    #red .images img {
        width: 18vw;
        min-width: 330px;
    }
    #drkblue {
        padding: 160px 150px 90px 150px
    }
    #drkblue .mind {
        position: relative;
    }
    #drkblue .one{
        font-size: 5.3vw;
        line-height: 4vw;
        position: absolute;
        top: 10px
        
    }
    #drkblue .two {
        font-size: 6vw;
    }
    #drkblue .images {
        height: 40vw;
        
    }
    #drkblue .images img {
        width: 18vw
    }
    footer {
        padding: 20px 150px;
    }
    .scroll {
        font-size: 30px
    }
}