body {
    font-family: 'Source Sans Pro', sans-serif !important;
    font-weight: 400 !important;
}

h1 {
    font-family: 'Source Sans Pro', sans-serif !important;
    font-weight: 600 !important;
    color: #0a8251;
    font-size: 3em;
    width: 60%;
    margin-left: 20%;
    line-height: 1.2em;
    text-align: center;


}
.h2 {
    font-family: 'Source Sans Pro', sans-serif !important;
    font-weight: 600 !important;
    color: #0a8251;
    font-size: 1.5em;
    text-transform: none;
    margin-top: 50px;
    width: 85%;


}


#tip5 {

    margin-top: 10px !important;
}


.subheading {
    border-left: solid 1px;
    float: right;
    padding-left: 10px;
    width: 97%;

}

.clear {
    clear: both;
}

#intro {
    color: #0a8251;
    font-size: 1.8em;
    max-width: 55%;
    float: left;

}

#paragraphs {

    font-size: 1.3em;

}

#tips {
    margin-bottom: 50px;
}

#conclusion {

    margin-top: 50px;
}
.img-right, .img-left {
    padding: 5px 40px 1px;


}

.img-intro {

    padding: 0 0 0 0;

}

.img-right {
    float: right;
    padding-right: 0;
}

.img-left {
    float: left;
    padding-left: 0;

}

.img-banner {


    margin-top: -5%;
    width: 50%;
    float: left;

}


.banner {

    height: 220px;
    margin-top: 20px;
    position: relative;
    margin-bottom: 100px;
}
.green {

    background-color: #4fab5c;
    width: 100%;
    height: 61%;
    position: absolute;
    bottom: 0;
    color: white;
    font-weight: 600;
    font-size: 2em;

}

#green-left {

    float: left;
    text-align: right;
    width: 25%


}
#green-right {
   float: left;
    text-align: left;
    width: 15%

}

.green-text {



    line-height: 1em;
}

#green-left .green-text {

    margin-top: 15%;
    margin-left: 20%;
    width: 70%;

}

#green-right .green-text {
    margin-top: 25%;
    margin-left: 15%;
    width: 60%;
}


.left-video, .right-video {

    width: 50%;
}

.left-video {
    float: left;
}

.right-video {

    float: right;
}


.hr-left, .hr-right, hr {

    height: 2px;
    border: 0;
    background: #fff;
    margin: 30px 0;
}
hr  {

    background: -webkit-gradient(linear, 0 0, 100% 0, from(white), to(white), color-stop(50%, #e3e3e3));
    background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0), #e3e3e3), rgba(0, 0, 0, 0));
    background: -moz-linear-gradient(left, rgba(0, 0, 0, 0), #e3e3e3, rgba(0, 0, 0, 0));
    background: -o-linear-gradient(left, rgba(0, 0, 0, 0), #e3e3e3, rgba(0, 0, 0, 0));
    background: linear-gradient(left, rgba(0, 0, 0, 0), #e3e3e3, rgba(0, 0, 0, 0));
    background: -ms-linear-gradient(left, rgba(0, 0, 0, 0), #e3e3e3, rgba(0, 0, 0, 0)); /* IE10+ */
}


.hr-left, .hr-right {
    width: 50%;
    margin-top: 0 !important;

}
.hr-left {

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff',
    endColorstr='#e3e3e3',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    -ms-filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff',
    endColorstr='#e3e3e3',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

    float: left;

}

.hr-right {

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e3e3e3',
    endColorstr='#ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    -ms-filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e3e3e3',
    endColorstr='#ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

    float: right;

}

.btn {
    background-color: #1a98e7;
    color: white;
    font-size: 2em;
    width: 270px;
    height: 75px;
    text-align: center;
    padding: 15px;
    margin: 55px auto 25px;
    border-radius: 10px;
}

.btn:hover {

    background-color: royalblue;
}

#paragraphs a {

    color: #0a8251 !important;
    text-decoration: none !important;
    font-weight: 600;
}
.btn a{

    color: white !important;
    text-decoration: none !important;

}

#videos {

    margin-top: 65px;
    color: #4fab5c;
    font-size: 1.8em;


}

.left-caption {

    float: left;
    margin-left: 50px;
    margin-bottom: 10px;
}

.right-caption {

    float: right;
    margin-right: 125px;
    margin-bottom: 10px;
}

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

    .btn {

        font-size: 1.9em;
    }

    h1 {
        width: 80%;
        margin-left: 10%;
    }

   #intro {
       width: 100% !important;
       max-width: 100% !important;
     }

   .img-intro {

       float: none;
       margin: auto 0;
       width: 100%;

   }

   .h2 {
       width: 100%;
   }

   .subheading {
       width: 93%;
   }


   iframe {

       width: 98%;

   }

   .right-caption, .left-caption {

       width: 100%;
       float: none;
       margin-left: 0;

   }

   .right-video, .left-video {
       width: 100%;
       float: none;
   }


}

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

    .banner {
        height: 170px;
    }

    .green {
        font-size: 1.5em;
    }

}

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

    .banner {
        height: 120px;
    }

    .green {

        font-size: 1.2em;
    }

}


@media only screen and (max-width: 480px) {
    h1 {
    width: 100%;
    margin-left: 0;
    text-align: left;
   }

    img {
       float: none !important;
       width: 100%;
       max-width: 400px;
       margin-right: 100%;
       padding: 5px !important;
   }



   #intro {
       width: 100% !important;
       max-width: 100% !important;
     }

   .h2 {
       width: 100%;
   }

   .subheading {
       width: 93%;
   }

   .banner {
       height: 90px;
       margin-bottom: 50px;
   }

   .green {
       font-size: 1em;
   }

   #green-left .green-text {

       margin-top: 10%;
   }

   .img-banner {

       margin-right: 0;
       float: left !important;
   }

   #videos {

       margin-top: 50px;
   }

   iframe {
       height: 99%;
   }



}

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

    .banner {
        height: 80px;
    }

    .green {

        font-size: .8em;
    }

   iframe {

       width: 90%;
       height: 90%;

   }

}