* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

h1 {
  font-size: 2em;
}

h2 {
  font-size: 1.7em;
}

h3 {
  font-size: 1.4em;
}

h4 {
  font-size: 1.1em;
}

h5 {
  font-size: 0.6em;
}

a {
  list-style: none;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a:visited {
  color: #fff;
}

ul {
  list-style-type: none;
}

h1, h2, h3, h4, h5, h6, p {
  font-family: 'Roboto', sans-serif;
}

.contactUs {
  color: #fff;
  text-decoration: none;
  padding: 25px 10px 0 20px;
  display: inline-block;
}

.phoneNumber {
  color: #fff;
  text-decoration: none;
  padding: 10px auto;
  display: inline-block;
}

.phoneNumber:hover {
  text-decoration: underline;
}

/*=============================================================
Header Phone Width
=============================================================*/

.mainHeader {
  height: 540px;
  background: url("../images/headerImage.jpg") no-repeat -650px -300px;
  background-size: auto;
}

.headerGreenBackground {
  height: 150px;
  background: rgba(254, 128, 7, 0.8);
}

.headerLogo {
  text-align: center;
  margin-right: 25px;
}

.headerLogo img {
  width: 90%;
  max-width: 500px;
  margin-top: 25px;
  margin-left: 25px;
}

.menuList {
  list-style: none;
  padding: 0 10px;
  margin: 10px 20px;
  display: flex;
  justify-content: space-between;
}

 .list a {
  color: #fff;
  font-size: 1.5em;
}

.headerDarkGreenBackground {
  height: 75px;
  background: rgba(255, 69, 2, 0.8);
}

.headerDarkGreenBackground img {
  margin: 8px 10px;
  margin-right: 5px;
  float: left;
}

.headerDarkGreenBackground h3 {
  color: #fff;
  /*font-size: 1.2em;*/
  display: inline-block;
  margin-top: 25px;
  margin-left: 10px;
}

.bigBass {
  display: flex;
  justify-content: flex-end;
}

.bigBass img {
  margin-top: 80px;
  height: 285px;
}

.desktopLogo img {
  height: 0;
}

/*=============================================================
Meet your guide Phone Width
=============================================================*/

.meetYourGuide h1 {
  color: #96070a;
  margin: 55px 0 20px;
  text-align: center;
}

.meetYourGuide p {
  color: #2f4430;
  padding: 0 20px;
  text-align: left;
}

.meetYourGuide h3 {
  color: #fe8007;
  margin-top: 50px;
  padding: 0 20px;
  text-transform: uppercase;
}

.meetYourGuide .verse {
  font-weight: 300;
  text-transform: uppercase;
}

/*=============================================================
About Caddo Lake Phone Width
=============================================================*/

.aboutCaddoGradient {
  background: #fe8007; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(right, #fe8007 , rgba(119, 131, 100, 0.5)); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(left, #fe8007, rgba(119, 131, 100, 0.5)); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(left, #fe8007, rgba(119, 131, 100, 0.5)); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to left, #fe8007 , rgba(119, 131, 100, 0.5)); /* Standard syntax */

  height: 650px;
}

.aboutCaddoLake {
  background: url("../images/aboutCaddoLake.png") no-repeat -10px -20px;
}

.aboutCaddoLake .copy h1 {
  color: #fff;
  margin: 100px 0 0 0;
  padding: 100px 20px 0;
  text-align: left;
  text-transform: uppercase;
  /*font-size: 2.4em;*/
}

.aboutCaddoLake .copy p {
  color: #fff;
  margin-top: 0;
  padding: 50px 20px 0 20px;
  /*font-size: 1.3em;*/
  text-align: left;
}

/*=============================================================
Testimonials Phone Width
=============================================================*/

.testimonials {
  background: #e3d6b3;
}

.testimonialContent {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.indexTestimonialImage {
  margin-top: 100px;
}

.testimonialQuoteBox {
  max-width: 420px;
  height: 320px;
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px 20px 350px 20px;
}

.testimonialQuoteBox img {
  width: 100px;
}

.testimonialQuoteBox h1 {
  text-align: center;
  color: #96070a;
}

.quoteName {
  align-self: flex-start;
}

.quote2 {
  margin-left: 270px;
}

.moreTestimonials {
  display: flex;
  justify-content: center;
}

.moreTestimonials h1 {
  text-transform: uppercase;
  text-align: center;
  max-width: 400px;
  border: 3px solid #fff;
  border-radius: 5px;
  padding: 10px;
  color: #fff;
}

.moreTestimonials a:hover {
  color: #fff;
  text-decoration: none;
}

.moreTestimonials h1:hover {
  background: rgba(255, 255, 255, .3);
}

.moreTestimonials a:visited {
  color: #fff;
}

/*=============================================================
Services Phone Width
=============================================================*/

.services {
  max-width: 600px;
  padding: 0 10px 0 20px;
  margin: 100px auto 0;
}

.services h1 {
  color: #96070a;
  text-align: center;
  text-transform: uppercase;
}

.services h3 {
  font-weight: 300;
}

.services ul {
  list-style-type: disc;
}

.services li {
  padding: 10px;
}


/*=============================================================
Contact Phone Width
=============================================================*/

.contactGuide {
  text-align: center;
  /*font-size: 2em;*/
}

.contactGuide img {
  display: block;
  margin: 100px auto 50px;
}

.contactGuide h1 {
  color: #96070a;
  text-transform: uppercase;
}

.contactGuide h3 {
  text-transform: uppercase;
  padding: 5px 0;
  font-weight: 300;
}

.contactGuide h4 {
  font-weight: 300;
}


.contactGuide a {
  color: #000
}

/*=============================================================
Sponsorship Phone Width
=============================================================*/

.sponsorshipHeading {
  text-align: center;
  text-transform: uppercase;
  color: #96070a;
  margin-top: 200px;
}

.logos {
  text-align: center;
  margin: 70px 0;
}

.logos img {
  padding: 15px 0;
}

/*=============================================================
Footer Phone Width
=============================================================*/

.footer {
  height: 850px;
  background: #ff4502;
  text-align: center;
}

.footerList {
  padding: 20px 0;
}

.footerList li {
  text-transform: uppercase;
  padding: 15px 0;
}

.footer a {
  color: #fff;
}

.footer h3 {
  color: #fff;
  text-transform: uppercase;
}

.facebookFooter img {
  padding-bottom: 20px;
}

.footerPhone {

}

.footerLogo {
  padding: 50px 0;
}

.mfnLogo {
  margin-top: 100px;
}

.mfnLogo h5 {
  color: #fff;
}

/*=============================================================
800 PX and Wider Medie Queries
=============================================================*/

@Media screen and (min-width: 800px) {

  .headerGreenBackground {
    display: flex;
    flex-direction: column;
  }

  .headerLogo img {
    text-align: right;
    width: 500px;
  }

  .menuList {
    display: flex;
    justify-content: space-around;
  }

  .aboutCaddoLake .copy {
    width: 800px;
    margin-left: auto;
    margin-right: 100px;
  }

  .aboutCaddoLake .copy p {
    color: #fff;
    margin-top: 0;
    padding: 50px 20px 0 20px;
    text-align: left;
  }

  .testimonialContent {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-end;
  }

  .testimonialQuoteBox {
    height: 467px;
  }

  .moreTestimonials {
    margin-top: 30px;
    padding-bottom: 30px;
  }

  .sponsorshipHeading {
    text-decoration: underline;
  }

  .footer {
    height: 600px;
  }

  .footerListAndFacebook {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .footerList {
    display: flex;
    justify-content: center;
  }

  .footerLogo {
    padding: 30px 0 50px 0;
  }

  .footerList li {
    padding: 20px 30px 30px;
  }

  .contactFooter h3 {
    display: inline-block;
    margin-right: 20px;
  }

  .contactFooter a {
    font-size: 1.4em;
  }

  .contactFooter a:hover {
    color: #fff;
    text-decoration: underline;
  }

}


/*=============================================================
1200 PX and Wider Media Queries
=============================================================*/


@Media screen and (min-width: 1200px) {

/*=============================================================
Header 1200px Width
=============================================================*/

  .mainHeader {
    height: 540px;
    background: url("../images/headerImage.jpg") no-repeat 0px -200px;
    background-size: auto;
  }

  .headerGreenBackground {
    height: 100px;
    display: flex;
    flex-direction: row;
  }

  .headerLogo {
    margin-right: auto;
  }

  .headerLogo img {
    width: 400px;
  }

  .menuList {
    padding-top: 25px;
    margin-right: 80px;
  }

  .menuList li {
    padding: 0 20px;
  }

  .facebookIcon {
    position: relative;
    top: -80px;
    right: -300px;
  }

  .headerDarkGreenBackground {
    height: 60px;
    display: flex;
    justify-content: flex-end;
  }

  .headerDarkGreenBackground img {
    margin: 0;
    padding: 0;
  }

  .headerDarkGreenBackground h3 {
    margin-top: 20px;
    padding: 0;
    vertical-align: middle;
    padding-right: 25px;
  }

  .headerContactInfo {
    margin-right: 30px;
  }

  .largeHeaderImages {
    display: flex;
    justify-content: center;
  }

  .bigBass img {
    margin-top: 49px;
    margin-right: 40px;
    height: 400px;
  }

  .desktopLogo {
    align-self: center;
  }

  .desktopLogo img {
    height: 270px;
  }

/*=============================================================
Meet Your Guide 1200px Width
=============================================================*/
  .meetYourGuide {
    max-width: 800px;
    margin: 0 auto;
  }

  .meetYourGuide h1 {
    margin: 100px 0 30px 30px;
    /*font-size: 1.5em;*/
    text-align: left;
  }

  .meetYourGuide p {
    color: #2f4430;
  }

  .meetYourGuide h2 {
    padding-top: 50px;
  }

  .aboutCaddoLake {
    width: 100%;
  }

/*=============================================================
Testimonials 1200px Width
=============================================================*/

  .testimonials {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .quote1 {
    padding: 0 0 0 10px;
    align-self: flex-start;
    position: relative;
    top: 60px;
  }

  .testimonialQuoteBox p {
    color: #2f4430;
    padding: 0 20px;
    font-size: 1.2em;
    text-align: left;
    position: relative;
    top: 30px;
  }

  .quote2 {
    padding: 0 10px 0 0;
    align-self: flex-end;
    position: relative;
    top: -60px;
  }

  /*.quoteName {
    position: relative;
    top: 0px;
  }*/

/*=============================================================
About Caddo Lake 1200px Width
=============================================================*/

  .aboutCaddoGradient {
    background: #fe8007; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(right, #fe8007 , rgba(119, 131, 100, 0.5)); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(left, #fe8007, rgba(119, 131, 100, 0.5)); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(left, #fe8007, rgba(119, 131, 100, 0.5)); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to left, #fe8007 , rgba(119, 131, 100, 0.5)); /* Standard syntax */

    height: 650px;
  }

  .aboutCaddoLake {
    background: url("../images/lillypads.png") no-repeat -10px -20px;
  }

  .aboutCaddoLake .copy {
    width: 600px;
    margin-left: auto;
    margin-right: 400px;
  }

/*=============================================================
Services 1200px Width
=============================================================*/

.services {
  max-width: 1500px;
}
.servicesLists {
  display: flex;
  justify-content: space-between;;
}

.servicesLists .list1 {
  max-width: 550px;
  margin-left: 150px;
  padding-right: 30px;
}

.servicesLists .list2 {
  max-width: 550px;
  margin-right: 50px;
}

/*=============================================================
Contact Guide 1200px Width
=============================================================*/
  .contactGuide {
    display: flex;
    justify-content: center;
  }

  .contact {
    margin-right: 50px;
  }

  .logos {
    margin: 50px 200px 100px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
  }

  .logos img {
    padding: 20px 50px;
  }

  .footerList {
    display: flex;
    justify-content: center;
  }

  .contactFooter {
    display: flex;
    justify-content: center;
  }

}

/*=============================================================
1999px Media Query
=============================================================*/

@Media screen and (min-width: 1999px) {

/*=============================================================
Header 1999px Width
=============================================================*/

  .mainHeader {
    height: 540px;
    background: url("../images/headerImage.jpg") no-repeat 0px -313px;
    background-size: cover;
    max-width: 3000px;
  }

  .aboutCaddoLake .copy {
    margin-right: 700px;
  }

}
