/* CSS Document */
/* Phones */
<style>
body { height:100%; color:#fff; font-size:18px;  margin: 0; padding: 0;}

.nav-bg { position:fixed; width:100%; height:30px; background-color:fff; z-index:99; text-align:center; box-shadow:-4.23px 4.06px 5px 9px rgba(0, 0, 0, 0.6); }
nav { width:100%; margin: 0 auto; background-color:#fff; }
nav a { text-decoration:none; color:#000; margin:0 auto !important; line-height:30px; width:50% !important; float:none !important;}
.logoleft { margin:auto 50px 0 0;}
.logoright { margin:auto 0 0 50px;}
.no-margin { margin-left:0; }
.sect {min-height:100%; background-size: cover; width:90%; margin: 0 auto;}
.home {margin: 0 auto; padding: 110px 15px; }
.home h1 { font-family: 'Cardo', serif; }
.non-semantic-protector { position: relative; z-index: 1; }
.ribbon { font-size: 17px !important; /* This ribbon is based on a 16px font side and a 24px vertical rhythm. I've used em's to position each element for scalability. If you want to use a different font size you may have to play with the position of the ribbon elements */ width: 270px; position: absolute; background: rgba(28, 26, 26, 1); color: #fff; text-align: center; padding: 13px; /* Adjust to suit */ margin: 0 auto 80px; /* Based on 24px vertical rhythm. 48px bottom margin - normally 24 but the ribbon 'graphics' take up 24px themselves so we double it. */ border: 1px solid rgba(110, 105, 104, 1); box-shadow: -0.45px 12.99px 4px 0px rgba(0, 0, 0, 0.6); }
.ribbon:before, .ribbon:after { content: ""; position: absolute; display: block; bottom: -1em; border: 38px solid rgba(28, 26, 26, 1); z-index: -1; }
.ribbon:before { left: -41px; border-right-width: 20px; border-left-color: transparent; }
.ribbon:after { right: -40px; border-left-width: 20px; border-right-color: transparent; }
.ribbon .ribbon-content:before, .ribbon .ribbon-content:after { content: ""; position: absolute; display: block; border-style: solid; border-color: rgba(33, 33, 33, 1) transparent transparent transparent; bottom: -1em; }
.ribbon .ribbon-content:before { right: 0; border-width: 0 0 16px 19px; border-color: transparent transparent transparent rgba(47, 46, 46, 1); }
.ribbon .ribbon-content:after { left: 0; border-width: 0 17px 16px 0; border-color: transparent rgba(47, 46, 46, 1) transparent transparent; }
.services { margin: 0 auto; padding: 40px 15px; background-color: rgba(249, 248, 248, .6);  }
.services h3 { width:100%; font-size: 25px; padding:10px 0; margin:0 auto; box-shadow: -5px 5.85px 4px 1px rgba(0, 0, 0, 0.6); }
.services h5 { font-size:20px; margin-bottom:2px;  }
.bottommargin { margin:0 0 50px 0; }
.important {margin:0 !important; line-height:35px; }

.service-detail { min-height:200px; }
.work { min-height: 0 !important; margin: 0 auto; padding: 30px 15px; background-color: rgba(0, 0, 0, .6); }
.work h3 { font-size: 40px; text-align:center; }
.dash { width:39px; height:3px; margin:0 auto 27px; }
.container { position:relative; }
.container img { width:100%; }
.mySlides img { width:100%; margin:4px;  }
#arrowL, #arrowR { font-size:60px; }
.work p { width:80%; margin:30px auto 0; }
.testimonials { margin: 0 auto; padding: 30px 15px; background-color: rgba(0, 0, 0, 1); }
.testimonials h3 { font-family: 'Cardo', serif; font-size:40px; }
.testimonial-divide { background-color:#999; margin:0 auto; width: 100px; height:3px; }
.specialize { width:94%; margin:0 auto; }
.about { margin: 0 auto; text-align:justify; padding-top:40px; }
.owner { text-decoration:underline; }
.footer { background-color: rgba(47, 46, 46, 1); padding: 50px 0; }
.fa { font-size:24px; }
.contact { padding:20px 0; }
.contact h4 { text-align:center; text-decoration:underline; font-size:44px; font-family: 'Cardo', serif; font-style:italic; }
.contact span { font-size:30px; }
input, textarea { margin:0 0 8px; padding:4px; width:90%;  }
.submit { width:40%;  }
.modal { display: none; position: fixed; z-index: 100; padding-top: 100px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: black;}
.modal-content { position: relative; background-color: #000; margin: auto; padding: 0; width: 90%;}
.myImages { display: none;}
.myImages img { width:100%; }
.close { color: white; position: absolute; top: 0; right: 1%; font-size: 40px; font-weight: bold;}
.cursor { cursor: pointer}
.modal-content { margin:0 auto; } 
.harvest, .carpentry { margin: 0 auto; padding: 110px 15px; background-color: rgba(249, 248, 248, .8);  }
.harvest-title, .custom-carpentry { background-image:url(../_elements/mini-title-g-bg.png); background-repeat:no-repeat; margin:0 auto; width:250px; text-align:center; padding: 0 0 60px; font-family: 'Cardo', serif; font-size:14px; color:#fff; line-height:42px; }
.harvest p, .milling p, .carpentry p { width:70%; margin:0 auto; text-align:center; margin-bottom:45px; }
.call { font-size:18px; }
.milling { margin: 0 auto; padding: 110px 15px; background-color: rgba(0, 0, 0, .6); }
.custom-milling { background-image:url(../_elements/mini-title-w-bg.png); background-repeat:no-repeat; margin:0 auto; width:250px; text-align:center; padding: 0 0 60px; font-size:26px; color:#2F2F2E;  font-family: 'Cardo', serif;}
.underline { text-decoration:underline; }
.list-style { list-style-type:none; }
.material-icons { vertical-align:-5px; }



/*Tablet Portrait*/
@media screen and (min-width: 600px) {
 html, body { font-size:15px;}
 .nav-bg { height:50px;}
 nav a {line-height:50px;}
 .logoleft { margin:auto 90px 0 0;}
.logoright { margin:auto 0 0 90px;}
 .sect { width:90%;}
 .ribbon { width: 345px; }
 #arrowL, #arrowR { font-size:45px; }
 .services h3 { width:500px; }
 .about { width: 70%;}
 .harvest p, .milling p, .carpentry p { font-size: 18px; }
  .harvest-title, .custom-carpentry { background-image:url(../_elements/title-g-bg.png); background-repeat:no-repeat; margin:0 auto; width:424px; font-size:23px; line-height:66px;}
 .custom-milling { background-image:url(../_elements/title-w-bg.png); background-repeat:no-repeat; margin:0 auto; width:424px; font-size:42px; }
 .modal-content { width: 50%;}
}
/* Tablet Landscape */
@media screen and (min-width: 1000px) {
 .nav-bg { height:80px;}
 nav a {  line-height:80px;}
 .ribbon { font-size: 23px !important; width: 450px;}
 .ribbon:before, .ribbon:after { border: 48px solid rgba(28, 26, 26, 1);}
 .ribbon:before { left: -49px; border-right-width: 20px; border-left-color: transparent;}
 .ribbon:after { right: -48px; border-left-width: 20px; border-right-color: transparent;}
 .ribbon .ribbon-content:before { border-width: 0 0 22px 19px; border-color: transparent transparent transparent rgba(47, 46, 46, 1);}
 .ribbon .ribbon-content:after { border-width: 0 17px 22px 0; border-color: transparent rgba(47, 46, 46, 1) transparent transparent;}
  .services { padding:10px 15px; }
 .about { padding:90px 0; }
 .testimonial-divide { visibility:hidden;}
 .harvest, .milling, .shed { padding: 140px 15px; }
}
/* Desktop */
@media screen and (min-width: 1200px) {

 .sect { width:60%;}

}
/* Big Desktop */
@media screen and (min-width: 1800px) {

 .sect { width:52%;}
 .specialize { width:60%;}
}