/* *{
			border: 1px dashed red;
		} 
      */
 body,
 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
   font-family: "Alegreya", serif;
   margin: 0 0 6px 0;
 }

 h2 {
   font-style: italic;
   margin: 100px 0 20px 20px;
   color: #5a3c05;
 }

 h6 {
   text-align: center;
 }

 body {
   font-family: "Alegreya", serif;
   /*background-image: url(../img/subtle_white_feathers_@2X.jpg);
  background-repeat: repeat;*/
  background-color: #fff;
 }

 a {
   text-decoration: none;
 }

 .bodyCopy {
   font-family: "alegreya", serif;
   font-size: 16px;
   line-height: 2.4rem;
   color: #666666;
   margin: 0 0 8px 0;
   opacity: 8.8;
   padding: 20px;
 }

 #mainLogo {
   height: 58px;
   margin: 14px 0 0 20px
 }


 nav li {
   color: #685a1c;
   text-decoration: none;
   list-style: none;
   display: inline;
   padding-right: 40px;
   font-family: "Alegreya Sans", sans-serif;
   font-size: 16px;
 }

 nav ul {
   margin: 24px 0 0 120px;
 }

 .navBckgrnd {
   background-color: #fff;
   width: 100%;
   height: 78px;
   position: fixed;
   top: 0;
   overflow: hidden;
   z-index: 1;
   background-image: url(../img/treeBranch.png);
   background-repeat: no-repeat;
   background-position: top right;
   background-size: 22.5%;
 }

 .flex {
   margin: 0;
   display: flex;
 }

 .flex div:first-child {
   flex: 3;
   background-size: cover;
   background-position: left;
   margin-top: 78px;
 }

 .flex div:last-child {
   margin: 2rem;
   flex: 2;
 }

 .flex p:first-of-type {
   margin-bottom: 0;
   padding: 0 20px 20px 10px;
   font-style: italic;
   color: #5a3c05;
 }

 .flex:first-of-type div:first-child {
   background-image: url(../img/tufted-titmouse_thumb.ngsversion.1492443003387.adapt.1900.1.jpg);
   background-position: top left;
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;
 }

 #darkOrangeDiv {
   background-color: rgb(209, 145, 6);
   margin: 0;
 }

 #birdwatchers {
   width: 47%;
   margin-top: 0px;
 }

 #robin {
   width: 45%;
   margin: 20px 20px 0 20px;
 }

 /*p:last-of-type {
   margin-top: 20px;
   margin: 20px 20px 0 20px;
 }*/

 #tree {
   width: 33%;
   margin-bottom: 12px;
 }

 div p {
   margin-top: 20px;
   margin: 20px 20px 0 20px;
   color: #666666;
 }

 form {
   font-family: "alegreya sans", sans-serif;
   margin: 0 auto;
   display: block;
 }

 .email {
   text-align: center;
 }

 input.button {
   background-color: darkred;
   color: #fff;
   font-family: "Alegreya sans", sans-serif;
   border: none;
   margin: 0 auto;
   display: block;
   width: 100px;
 }

 .spacer {
   height: 15px;
 }

 button {
   background-color: darkred;
   color: #fff;
   border: none;
   font-family: "alegreya sans", sans-serif;
 }

 footer {
   background-color: #759244;
 }

 .grayLine1,
 .grayLine2 {
   background-color: #c9c9c9;
   height: 1px;
   width: 70%;
   margin: 18px auto 0 auto;
 }

 #spacer2 {
   width: 20px;
   display: inline-block;
 }

 /* -----------------------------------Queries-------------------------------*/

 @media only screen and (min-width: 320px) and (max-width: 400px) {
   .titmouse {
     display: none;
   }
 }

 @media only screen and (min-width: 320px) and (max-width: 550px) {

   #menu-icon {
     position: fixed;
     top: 6px;
     right: 16px;
     font-size: 26px;
     z-index: 3;
     color: #000;
   }

   #whiteLine {
     display: none;
   }

   .sidenav {
     height: 100%;
     width: 0%;
     position: fixed;
     z-index: 10;
     top: 0;
     left: 0;
     background-color: rgb(204, 75, 16);
     overflow-x: hidden;
     transition: 0.5s;
     padding-top: 60px;
     background-image: url(../img/mathew-schwartz-5iFZBM7qgWc-unsplash.png);
     background-position: 32% bottom;
     background-repeat: no-repeat;
     background-size: 300%;
   }

   .sidenav a {
     padding: 8px 8px 8px 32px;
     text-decoration: none;
     font-size: 18px;
     color: #ffffff;
     display: block;
     transition: 0.3s;
   }

   .sidenav a:hover {
     color: #f1f1f1;
   }

   footer {
     background-color: #759244;
     padding: 16px;
   }

   ul {
     display: none;
   }

   .navBckgrnd {
     background-image: url(../img/treeBranch.png);
     background-repeat: no-repeat;
     background-position: top right;
     background-size: 42.5%;
   }

   #birdwatchers {
     width: 67%;
     margin-top: 0px;
   }

   #cta {
     margin-bottom: 0;
     color: #fff;
     font-style: italic;
     text-align: center;
     float: none;
   }

   input {
     text-align: center;
   }

   .email {
     text-align: center;
   }

   form input {
     width: 50%;
   }

   .columns {
     width: 100%;
   }

   #icons {
     text-align: center;
   }

   .smIcon {
     width: 36px;
     margin-top: 40px;
   }
 }

 @media only screen and (min-width: 550px) {

   #menu-icon {
     position: fixed;
     top: 6px;
     right: 16px;
     font-size: 26px;
     z-index: 3;
     color: #000;
   }

   #whiteLine {
     display: none;
   }

   .sidenav {
     height: 100%;
     width: 0;
     position: fixed;
     z-index: 10;
     top: 0;
     left: 0;
     background-color: rgb(204, 75, 16);
     overflow-x: hidden;
     transition: 0.5s;
     padding-top: 60px;
     background-image: url(../img/mathew-schwartz-5iFZBM7qgWc-unsplash.png);
     background-position: 32% bottom;
     background-repeat: no-repeat;
     background-size: 300%;
   }

   .sidenav a {
     padding: 8px 8px 8px 32px;
     text-decoration: none;
     font-size: 18px;
     color: #ffffff;
     display: block;
     transition: 0.3s;
   }

   .sidenav a:hover {
     color: #f1f1f1;
   }

   .navBckgrnd {
     background-image: url(../img/treeBranch.png);
     background-repeat: no-repeat;
     background-position: top right;
     background-size: 41.5%;
   }

   #birdwatchers {
     width: 67%;
     margin-top: 0px;
   }

   .columns {
     width: 100%;
   }

   #icons {
     text-align: center;
   }

   .smIcon {
     width: 36px;
     margin-top: 40px;
   }

   form input {
    width: 50%;
  }
 }

 @media only screen and (min-width: 551px) and (max-width: 700px) {

   #cta {
     margin-bottom: 0;
     color: #fff;
     font-style: italic;
     text-align: center;
     float: none;
   }

   ul {
     display: none;
   }

   .bodyCopy {
     font-size: 16px;
     line-height: 2.1rem;

   }

   footer {
     background-color: #759244;
     padding: 16px;
   }

   #whiteLine {
     display: none;
   }

   .smIcons {
     display: none;
   }

   .navBckgrnd {
     background-image: url(../img/treeBranch.png);
     background-repeat: no-repeat;
     background-position: top right;
     background-size: 35.5%;
   }

   #birdwatchers {
     width: 67%;
     margin-top: 0px;
   }

 }

 @media only screen and (min-width: 701px) {

   .grayLine1 {
     display: none;
   }

   footer {
     background-color: #759244;
     padding: 16px;
   }

   #menu-icon {
     display: none;
   }

   nav li {
     padding-right: 11px;
   }

   #whiteLine {
     display: block;
     width: 1px;
     height: 46px;
     background-color: yellowgreen;
     position: absolute;
     top: 12px;
     left: 157px;
   }


   .sidenav {
     display: none;
   }

   .navBckgrnd {
     background-image: url(../img/treeBranch.png);
     background-repeat: no-repeat;
     background-position: top right;
     background-size: 31.5%;
   }

   #cta {
     margin-bottom: 0;
     color: #fff;
     font-style: italic;
     text-align: center;
     float: none;
   }
 }

 @media only screen and (min-width: 768px) {
   .navBckgrnd {
     background-image: url(../img/treeBranch.png);
     background-repeat: no-repeat;
     background-position: top right;
     background-size: 25.5%;
   }
 }

 @media only screen and (min-width: 960px) {
   .navBckgrnd {
     background-image: url(../img/treeBranch.png);
     background-repeat: no-repeat;
     background-position: top right;
     background-size: 28.5%;
   }

   nav li {
     padding-right: 26px;
   }

   .navBckgrnd {
     background-image: url(../img/treeBranch.png);
     background-repeat: no-repeat;
     background-position: top right;
     background-size: 21.5%;
   }
 }

 @media only screen and (min-width: 1100px) {
   .navBckgrnd {
     background-image: url(../img/treeBranch.png);
     background-repeat: no-repeat;
     background-position: top right;
     background-size: 18.5%;
   }

   nav li {
     padding-right: 26px;
   }

   form button input {
     width: 200px;
   }
 }

 @media only screen and (min-width: 1340px) {

   .navBckgrnd {
     background-image: url(../img/treeBranch.png);
     background-repeat: no-repeat;
     background-position: top right;
     background-size: 14.5%;
   }
 }

 @media only screen and (min-width: 1650px) {

   nav li {
     padding-right: 26px;
   }

   .navBckgrnd {
     background-image: url(../img/treeBranch.png);
     background-repeat: no-repeat;
     background-position: top right;
     background-size: 11.5%;
   }
 }