/* colors
/* ====== COLORS ============
lightblue= #6ABCCE; rgb(106, 188, 206)
logo green: #8CC541;
DARK ORANGE:#e07800;rgba(224, 120, 0, 1);
LIGHT ORANGE:#fc8906;rgba(252, 137, 6, 1);
LIGHT GREEN (fluo):#c5e557;rgba(197, 229, 87, 1);
LIGHT GREEN: #b2c76b; rgba(178, 199, 107, 1);
DARK GREEN:#819639; rgba(129, 150, 57, 1);
DARKER GREEN: #515f24;rgba(81, 95, 36, 1);
BROWN:#4f2217;rgba(79, 34, 23, 1);
color:#333;/*rgb(51, 51, 51);*/
green shades generated:http://www.colorhexa.com/819639;
*/

*{-webkit-box-sizing: border-box; box-sizing: border-box;}

.cf:after {
  content:" ";
  display:block;
  clear:both;
}
/*  +++ FONTS +++
font-family: 'Rambla', sans-serif;
font-family: 'Merriweather', serif;
*/
html{
  background-color:white;
}
body{
  font-family: 'Merriweather', serif;
  font-size: 100%;
  line-height: 1.5;
  width:100%;
  min-width:320px;
  margin:0;
  position:relative;
  color:#333;/*rgb(51, 51, 51);*/
  background-color:white;
  min-width: 320px;

}
h2, h3, h4, h4{
  /*min-height: 100px;*/
  font-family: 'Rambla', sans-serif;
  color:#b2c76b;
}
h1{
  text-indent:-9999px;
  background: white url(../images/newLogoOrganize.gif)center no-repeat;
  background-size:contain;
  width:110px;
  height:110px;
  margin:0 auto;
  border-radius:50%;
  margin-top:-2em;
  position:relative;
  z-index:5;
}
header{
  background-color: #8CC541;
  padding:1em;
  text-align:center;
  margin-top: 3em;
  background: url(../images/diningGreen2.jpg)center top no-repeat;
  background-size:cover;
}
header h2,
header h3{
  color:white;
  letter-spacing: 0.02em;
  line-height:1.3
}

header h2{
  font-size:2em;
  line-height: 1.1;
  margin-bottom:0;
}
header h3{
  text-transform: uppercase;
  font-size:2em;
  margin-top:0;
}
header h5{
  margin-top:-2em;
  font-style: italic;
  color:#333;

}
header section{
  text-align:center;
}
nav
{
  position: absolute;
  top: -1em;
  left: 1em;
  padding:0.35em;
  background-color:white;
  text-align:center;
  border:1px #8cc541 solid;
  border-radius:5px;
  box-shadow: 0 0 6px 1px #819639;/* FF3.5+, Opera 9+, Saf1+, Chrome, IE10 */
  width:20%;
}

a{
  display:block;
  color:#6ABCCE;
  font-weight: bold;
  text-decoration: none;
}
header a:hover{
  color:#8cc541;
  text-decoration: underline;
}
a[href="#offer"]{
  display:block;
  color:#6ABCCE;
  font-size:1.5em;
  font-weight: bold;
  text-decoration: none;
  width:80%;
  margin:0 auto;
  padding:1em;
  background-color:white;
  border-radius:5px;
  border:1px #6abcce solid;

}

main{
  padding:1em 2em;
  position:relative;
}
main h3,
main h4{
  line-height: 1.2;
}

main h3{
  font-size:2em;
  margin-bottom:0.5em;
  margin-top:0;
  color:#6ABCCE;
  text-align:center;

}
main h4{
  font-size:1.5em;
  margin-top:0;
  color:#8CC541;
  text-align:center;
  margin-bottom:0.5em;
}
main p{
  font-size:0.9em;
}

main section:first-of-type{
  background: url(../images/sunroomXS.jpg) center bottom no-repeat;
  min-height:600px;
}
main section:nth-of-type(4) p:first-of-type{
  background:url(../images/livingroomBook.jpg)left bottom no-repeat;
  min-height:600px;
}
main section:nth-of-type(4) p:nth-of-type(2){
  background:url(../images/diningdesXS.jpg)center bottom no-repeat;
  min-height:320px;
}
main section:nth-of-type(5){
  background-color:#6abcce;
  color:white;
  color:#444;
  padding:1em;
  margin-top:3.5em;
}
main section:nth-of-type(5) h4{
  font-size:1.3em;
  color:white;
  color:#333;
  font-weight: bold;
}
main section:nth-of-type(5) div{
  width:100px;
  height:100px;
  text-indent:-9999px;
  border-radius: 50%;
  border:6px solid white;
  background: white url(../images/tiziS.jpg)center no-repeat;
  background-size:100%;
  display:block;
  margin:0 auto;
  margin-top:-3em;
  margin-bottom:1em;
}
main ul{
  list-style: none;
}
main ul a{
  color:#819639;
  font-weight: bold;
  text-decoration: none;
  display:block;
}
main ul a:hover{
  color:#6abcce;
  text-decoration:underline;
  font-weight: bold;

}
main ul li:first-of-type{
  background: white url(../images/instagram20.jpg)left no-repeat;
  padding-left:30px;


}
main ul li:nth-of-type(2){
  background: white url(../images/pinterest20.jpg)left no-repeat;

  padding-left:30px;

}
main ul li:last-of-type{
  background: white url(../images/FB20.jpg)left no-repeat;
  padding-left:30px;


}
main article{
  border:4px solid #819639;
  padding:1em;
  margin-bottom:1em;
  background-color: rgba(178, 199, 107, 0.3);
}
form{
  font-family: 'Rambla', sans-serif;
  font-size:0.9em;

}
legend{
  font-weight: bold;
  margin-bottom:1em;
  color:#555;
  font-size:2em;
}
label{
  display: block;
  margin-top:0.5em;
  font-weight: bold;
  color:#6ABCCE;
  text-transform:uppercase;
}
input, textarea{
  width:100%;
  padding:0.5em;
  margin-bottom:0.75em;
  /*background-color:rgba(106, 188, 206, 0.3);*/
  border:none;
  border-bottom:0.5px #ccc solid;
  border-right:0.5px #ccc solid;
}

input[type="submit"]{
  background-color:#6abcce;
  color:white;
  margin-top:0.75em;
  border:0;
  border-radius:5px;
  letter-spacing:0.8px;
  font-size:1.2em;
  font-family: 'Rambla', sans-serif;
  max-width:40%;
}
input,
textarea{
  /* necessary for Firefox or it will show courier*/
  font-family:inherit;
}

/*style the placeholder text */
::-webkit-input-placeholder {
  color: #999;
  font-style: italic;

}

:-moz-placeholder { /* Firefox 18- */
  color: #444;
  font-style: italic;
}

::-moz-placeholder {  /* Firefox 19+ */
  color: #444;
  font-style: italic;
}

:-ms-input-placeholder {
  color: #444;
  font-style: italic;
}

footer{
  background-color: #8CC541;
  color:#333;
  text-align:center;
  padding:2em 0;
}
footer small{
  font-style: italic;
}
.success{
  font-family:'Rambla', sans-serif;
  font-size:1.5em;
  text-align:center;
  position:absolute;
  left:0;
  top:0;
  width:100%;
  max-width:1300px;
  z-index:99;
  background-color: rgba(51, 51, 51, 0.8);
  color:white;
  animation-name: disappear;
  animation-duration: 2s;
  animation-delay:5s;
  animation-iteration-count: 1;
  animation-fill-mode:forwards;
}
.success p{
  padding:1em;
}
/* ===== gallery page ======= */
.gallery header{
  background-image: url("../images/bedBlue.jpg")
}
.gallery nav{
  box-shadow: 0 0 6px 1px #69BCCF;
  border-color:#69BCCF;
}
.gallery main section:first-of-type{
  background-image:none;
  min-height:0;
  margin-bottom:2em;
  width: 90%;
  margin: 0 auto;
  padding: 0;
}
.captions{
  width:95%;
  margin:0 auto 2em auto;
}
.captions img{
  width:45%;
  display:block;
  float:left;
  padding:0.25em;
}

/* slideshow settings */
.lg-sub-html{
  position:absolute;
  top:3em;
  font-size:0.9em;
  font-style: italic;
  /*z-index:1079;*/
  max-height: 60px;
  border-top:1px solid #ccc;
}

@keyframes disappear{
  0%{
    background-color: rgba(51, 51, 51, 0.5);

  }
  99%{
    background-color: rgba(51, 51, 51, 0);
    opacity:0;
    visibility:hidden;

  }
  100%{
    display:none;
    opacity:0
  }
}
@-webkit-keyframes disappear {
  0%{
    background-color: rgba(51, 51, 51, 0.5);

  }
  99%{
    background-color: rgba(51, 51, 51, 0);
    opacity:0;
    visibility:hidden;

  }
  100%{
    display:none;
    opacity:0;
  }
}

/* +++++++++++++++++++ MEDIA QUERIES +++++++++++++++++++++++*/
@media only screen and (min-width:400px){
  header h2{
    padding: 0 1.5em;
    font-size: 2.3em;
  }
  a[href="#offer"]{
    max-width:50%;
    font-size:1.3em;
    line-height:1.3;
  }
  main section:first-of-type{
    background: url(../images/sunroomSml.jpg) center bottom no-repeat;
    min-height:630spx;
  }
  main section:nth-of-type(4) p:first-of-type{
    min-height:560px;
  }
  main section:nth-of-type(4) p:nth-of-type(2){
    background:url(../images/diningdes.jpg)center bottom no-repeat;
    min-height:560px;
  }
}

@media only screen and (min-width:570px){
  h1{
    width:130px;
    height:130px;
  }
  header h2{
    font-size: 2.5em;
  }
  main h3{
    font-size:2.5em;
    margin-top:0.8em;
  }
  main h4{
    font-size:2em;
  }
  main {
    padding:0 2em;
  }
  main p{
    font-size:1em;
  }
  main section:first-of-type{
    background: url(../images/sunroomSml.jpg) center bottom no-repeat;
    min-height:650px;

  }
  main section:nth-of-type(4) p:first-of-type{
    min-height:600px;
  }
  main section:nth-of-type(4) p:nth-of-type(2){
    background:url(../images/diningdes.jpg)center bottom no-repeat;
    min-height:560px;
  }
  main section:nth-of-type(5) {
    padding: 1em 2em;
  }
  main section:last-of-type{
    padding:1em 2em;
  }
  main article{
    padding:1em 2em;
  }
  legend{
    font-size:2.5em;
  }
  label{
    font-size: 1.1em;
    letter-spacing: 1.1px;
  }
  input[type="submit"]{
    font-size: 1.5em;
  }
  /* ===================== gallery ======================*/
.captions img{
  width:31%;
}
.gallery .overview p{
  font-size:2em;
  }
}

@media only screen and (min-width:800px){
  header section,
  header a{
    display:inline-block;
    vertical-align:middle;
  }
  header section{
    width:60%;
  }
  header a{
    width:30%;
  }
  nav{
   width:10%;
   text-align:center;
 }
 nav a{
   width:100%;
 }
 a[href="#offer"]{
   width:40%;
 }

  main{
    background: url(../images/sunroomXL.jpg)120% top no-repeat;

  }
  main h3,
  main h4{
    text-align:left;

  }
  main section{
    width:45%;
  }
  main section p{
    padding-right:0.75em;
  }
  main section:first-of-type{
    background: transparent;
    min-height: 0;
  }
  main section:nth-of-type(4){
    width:100%;
    padding-right:3em;

  }

  main section:nth-of-type(4) p:nth-of-type(n){
    width:45%;
    display:inline-block;
    vertical-align: top;
    min-height:600px;
    background-position:center bottom;
  }

  main section:nth-of-type(4) p:first-of-type{
    background:url(../images/livingL.jpg)center bottom no-repeat;
    min-height:560px;
  }
  main section:nth-of-type(4) p:nth-of-type(2){
    background:url(../images/diningL.jpg)center bottom no-repeat;
    min-height:560px;
  }

  main section:nth-of-type(5),
  main section:nth-of-type(6){
    width:40%;
    display:inline-block;
    vertical-align: middle;
  }


  main article{
    width:40%;
    float:right;
    margin-top:1em;
  }
  form{
    width:45%;
    float:left;
    margin-top:1em;
  }

  form + p,
  footer{
    clear:both;
  }
  /* =========================== gallery ========================*/


    .captions{
    clear:both;
    width:99%;
  }
  .captions img{
    width:18%;
    /*padding:.25em;*/
  }
  .gallery main{
    background-image:none;
    font-size:1.1em;
    padding:0 4em;
  }
  .gallery main section{
    line-height: 1.7;
    padding:0 0.5em
  }
  .gallery main section:first-of-type{
    width:100%;
  }
}

@media only screen and (min-width:1000px){
  html{
    background-color:white;
  }

  body{
    max-width:1300px;
    margin:0 auto;
    box-shadow: 0 0 30px 3px rgba(189,189,189,0.8);/* FF3.5+, Opera 9+, Saf1+, Chrome, IE10 */
    margin-top:3.5em;
  }
  header{

    background: url(../images/diningXL.jpg)center center no-repeat;
    background-size: cover;
  }
  header section{
    width:50%;
  }
  h1{
    box-shadow: 3px -14px 29px -14px rgba(189,189,189,0.8);

  }
  main{
    background-position:110% top;
  }
  main section
  {
    padding:0 3em;
    width:50%;

  }
  main section p{
    font-size:1.2em;
  }
  main section:nth-of-type(4){
    padding:0;
    margin-top:6.5em;
  }
  main section:nth-of-type(4) h3{
    padding-left:1em;
  }
  main section:nth-of-type(4) p:nth-of-type(n){
    width:43%;
    padding-left:2.5em;
  }
  /*============== gallery ============== */
  .gallery main{
    padding:0 6em;
  }
  .gallery header{
    background-image: url("../images/bedBlueXL.jpg");
  }

}

  @media only screen and (min-width:1200px){
    header section{
      width:40%;
    }
    main{
      background: url(../images/sunroomXL.jpg)100% top no-repeat;
    }
    /*============= gallery ================*/
    nav{
      width:5%;
      left:5em;
    }
  }