body {
    background-image:url('../img/barnetgrass.jpg');
    background-position:left top;
    background-size:cover;
    background-repeat:no-repeat;
    background-attachment:fixed;
    font-family:sans-serif;
    margin:0px;
}

.headerFooter{
    position:fixed;
    width:100vw;
    background-color: #fff;
    display:flex;
    justify-content:center;
}

#header{
    top:0;
    left:0;
    padding-top:10px;
    padding-bottom:10px;
}

#logoImage{
    height:64px;
    width:64px;
    padding-right:10px;
    box-sizing:content-box;
}

#logoTitle{
    font-size:56px;
    font-weight:700;
    padding-top:3px;
    line-height:1;
}

#content {
    margin:10px;
    margin-top:94px;
}

#bubbleTable {
    width:100%;
}

#bubbles {
    display:inline;
}

.speechBubble {
    background-color: rgba(256,256,256,.85);
    margin-top:5px;
    margin-bottom:5px;
    margin-left:15px;
    margin-right:15px;
    padding:12px;
    border-radius:15px;
    position:relative;
    font-size:30px;
    line-height:1;
}

.bubbleLeft {
    float:left;
    clear:left;
}

.bubbleRight {
    float:right;
    clear:right;
}

.speechBubble:after {
    content: '';
    position: absolute;
    top: 60%;
    width: 0;
    height: 0;
    border: 14px solid transparent;
    border-bottom: 0;
    margin-top: -7px;
}

.bubbleLeft:after {
    left: 0;
    border-right-color: rgba(256,256,256,.85);
    border-left: 0;
    margin-left: -14px;
}

.bubbleRight:after {
    right: 0;
    border-left-color: rgba(256,256,256,.85);
    border-right: 0;
    margin-right: -14px;
}

#info{
    display:inline-block;
    padding-left:15px;
    padding-right:15px;
}

#about{
    background-color: rgba(256,256,256,.85);
    margin-top:10px;
    padding-left:30px;
    padding-right:30px;
    border-radius:15px;
    display:inline-block;
    width:100%;
    box-sizing: border-box;
    font-size:30px;
}

.aboutPara{
    margin-top:30px;
    line-height:1.2;
}

.lastPara{
    margin-bottom:30px;
}

#testimonials{
    width:100%;
    float:none;
    display:inline-block;
    box-sizing: border-box;
    padding:20px;
    margin-bottom:60px;
}

.quoteBubble {
    float:none;
    clear:none;
    font-size:20px;
}

.quote{
    font-style:italic;
    line-height:1.2;
}

.quoteSource{
    text-align:right;
}

.protect {
    unicode-bidi: bidi-override;
    direction: rtl;
}

#footer{
    bottom:0;
    left:0;
}

.footerLink {
    margin:10px;
}

.footerIcon {
    height:50px;
    width:50px;
}

@media screen and (max-width: 799px), screen and (max-height:899px) {

    .speechBubble, #about {
        font-size:26px;
    }

    .aboutPara {
        margin-top:20px;
        margin-left:-10px;
        margin-right:-10px;
    }

    .lastPara{
        margin-bottom:20px;
    }

    .quoteBubble{
        font-size:18px;
    }

}

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

    .speechBubble, #about {
        font-size:22px;
        border-radius:14px;
    }

    .quoteBubble{
        font-size:16px;
    }

}

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

    .speechBubble, #about {
        font-size:18px;
        border-radius:13px;
    }

    .speechBubble:after {
        content: '';
        position: absolute;
        top: 60%;
        width: 0;
        height: 0;
        border: 12px solid transparent;
        border-bottom: 0;
        margin-top: -6px;
    }

    .bubbleLeft:after {
        left: 0;
        border-right-color: rgba(256,256,256,.85);
        border-left: 0;
        margin-left: -12px;
    }

    .bubbleRight:after {
        right: 0;
        border-left-color: rgba(256,256,256,.85);
        border-right: 0;
        margin-right: -12px;
    }

    .quoteBubble{
        font-size:14px;
    }

}

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

    .speechBubble, #about {
        font-size:16px;
        border-radius:12px;
    }

    .speechBubble {
        margin-left:10px;
        margin-right:10px;
    }

    #info {
        padding-left:10px;
        padding-right:10px;
    }

    #logoImage{
        height:58px;
        width:58px;
    }

    #logoTitle {
        font-size:50px;
        padding-top:6px;
    }

    #content {
        margin-top:88px;
    }

    .aboutPara {
        margin-top:16px;
        margin-left:-12px;
        margin-right:-12px;
    }

    .lastPara{
        margin-bottom:16px;
    }

    .quoteBubble{
        font-size:13px;
    }

}

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

    .speechBubble, #about {
        font-size:14px;
        border-radius:11px;
    }

    #logoImage{
        height:52px;
        width:52px;
    }

    #logoTitle {
        font-size:44px;
    }

    #content {
        margin-top:82px;
    }

    #testimonials{
        padding:15px;
    }

    .quoteBubble{
        font-size:12px;
    }

}

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

    .speechBubble, #about {
        font-size:12px;
        border-radius:10px;
    }

    .speechBubble {
        margin-left:5px;
        margin-right:5px;
    }

    #info {
        padding-left:5px;
        padding-right:5px;
    }

    #logoImage{
        height:46px;
        width:46px;
    }

    #logoTitle {
        font-size:38px;
    }

    #content {
        margin-top:76px;
    }

    .quoteBubble{
        font-size:11px;
    }

}

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

    .speechBubble, #about {
        font-size:11px;
        border-radius:9px;
    }

    #logoImage{
        height:40px;
        width:40px;
    }

    #logoTitle {
        font-size:32px;
    }

    #content {
        margin-top:70px;
    }

    .aboutPara {
        margin-top:12px;
        margin-left:-16px;
        margin-right:-16px;
    }

    .lastPara{
        margin-bottom:12px;
    }

    .quoteBubble{
        font-size:10px;
    }

}