/* -----------------------main page hero image and text-------------------------- */

body{
    background-color: rgb(219, 105, 80);
}

.spacer{
    height: 7vh;
}

#hero-container-office {
    width: 100%;
    height: 20vh;
    background-image: url('../images/IMG_20150505_130019_905.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    padding-top: 5%;
    text-align: justify;
    font-size: .750em;
}

.quote {
  margin: 0 1em !important;
  clear: none !important;
  
}

/* -----------------------main page logo-------------------------- */

 #logo-container {
    /* display: inline-flex; */
    /* max-height: 50vh;  */
    height: 10vh;
    /* width: 100vw; */
}

.logo {
    float: left;
    width: 60%;
   /* height: 30vh; */
    margin-bottom: 20%;
    margin-left: 20%;
    margin-top: -23%;
}

.logo-text {
    /* display:inline-block; */
    position: absolute;
    margin-left: 22%;
    margin-top: -13%;
    text-align: center;
    padding-top: 10%;
    color: rgb(226,198,170);
    text-shadow: 1px 1px 0 rgb(28, 49, 68),
    -1px 1px 0 rgb(28, 49, 68),
    1px -1px 0 rgb(28, 49, 68),
    -1px -1px 0 rgb(28, 49, 68),
    0px 1px 0 rgb(28, 49, 68),
    0px -1px 0 rgb(28, 49, 68),
    -1px 0px 0 rgb(28, 49, 68),
    1px 0px 0 rgb(28, 49, 68),
    2px 2px 0 rgb(28, 49, 68),
    -2px 2px 0 rgb(28, 49, 68),
    2px -2px 0 rgb(28, 49, 68),
    -2px -2px 0 rgb(28, 49, 68),
    0px 2px 0 rgb(28, 49, 68),
    0px -2px 0 rgb(28, 49, 68),
    -2px 0px 0 rgb(28, 49, 68),
    2px 0px 0 rgb(28, 49, 68),
    1px 2px 0 rgb(28, 49, 68),
    -1px 2px 0 rgb(28, 49, 68),
    1px -2px 0 rgb(28, 49, 68),
    -1px -2px 0 rgb(28, 49, 68),
    2px 1px 0 rgb(28, 49, 68),
    -2px 1px 0 rgb(28, 49, 68),
    2px -1px 0 rgb(28, 49, 68),
    -2px -1px 0 rgb(28, 49, 68);

}

.title-text {
    margin: 0;
    border-bottom: 5px solid rgb(28, 49, 68);

}

.title-text-two{
    margin: 0;
}


/* -----------------------main text -------------------------- */

#opening-text {
    height: 40vh;
    max-width: 100vw;
    background-image: url('../images/3earth.jpg');
    background-size: cover;
    text-align: right;
    padding-top: 30%;
}

.main-text, .quote {
 clear: left;
 max-width: 50%;
 margin: 0 .8em 0 auto;
 font-size: 1.2em;
 text-shadow: 1px 1px 0 rgb(28, 49, 68),
 -1px 1px 0 rgba(28, 49, 68, .4),
 1px -1px 0 rgba(28, 49, 68, .4),
 -1px -1px 0 rgba(28, 49, 68, .4),
 0px 1px 0 rgba(28, 49, 68, .4),
 0px -1px 0 rgba(28, 49, 68, .4),
 -1px 0px 0 rgba(28, 49, 68, .4),
 1px 0px 0 rgba(28, 49, 68, .4),
 2px 2px 0 rgba(28, 49, 68, .4),
 -2px 2px 0 rgba(28, 49, 68, .4),
 2px -2px 0 rgba(28, 49, 68, .4),
 -2px -2px 0 rgba(28, 49, 68, .4),
 0px 2px 0 rgba(28, 49, 68, .4),
 0px -2px 0 rgba(28, 49, 68, .4),
 -2px 0px 0 rgba(28, 49, 68, .4),
 2px 0px 0 rgba(28, 49, 68, .4),
 1px 2px 0 rgba(28, 49, 68, .4),
 -1px 2px 0 rgba(28, 49, 68, .4),
 1px -2px 0 rgba(28, 49, 68, .4),
 -1px -2px 0 rgba(28, 49, 68, .4),
 2px 1px 0 rgba(28, 49, 68, .4),
 -2px 1px 0 rgba(28, 49, 68, .4),
 2px -1px 0 rgba(28, 49, 68, .4),
 -2px -1px 0 rgba(28, 49, 68, .4);

}

/* ----------------------------footer ---------------------------- */
    #footer-container{
        height: 17vh;
    }
    .foot-flex-container{
        /* height: 30vh; */
    }

@media only screen and (max-height: 640px){
/* -----------------hero -----------------*/
    #hero-container-office {
        min-height: 30vh;
    }
    .quote {
      font-size: 1em;
    }


/*------------------logo------------------- */

    .title-text,
    .title-text-two{
        font-size: 1.7em;
    }

/* -----------------main text-------------- */
    #opening-text{
        height: 60%;
    }

    .main-text{
        clear: both;
        display: block;
        margin-bottom: 30%;
    }



}

@media only screen and (max-width: 823px) and (orientation: landscape){

/* -----------------Nav bar-------------------- */

    #nav-container{
        height: 20vh;
    }

/* ---------------hero landing------------------ */

    #hero-container-office{
        height: 60vh;
    }

    .quote {
        font-size: 1.5em;
        margin: 1em 1em;
    }

/* ----------------logo section----------------- */

    #logo-container{
        height: 30vh;
    }
    
    .logo{
        width: 40%;
        margin-left: 21em;
        margin-top: -5em;
    }

    .logo-text{
        font-size: 1.5em;
        margin-top: -2.7em;
        margin-left: 7em;
    }

/* -------------Main text ---------------------- */

    #opening-text{
        height: 57vh;
        font-size: 1.2em;
    }

/* -------------footer -------------------------- */

    footer{
        padding-top: 2em;
    }

    .tab-n-desk-foot{
        font-size: .5em;
    }
    
    .address-header, 
    .phone-header,
    .facebook-header{
        font-size: 1em;
    }
}

@media only screen and (min-width: 768px) and (orientation: portrait){

/* ----------------------hero landing ---------------- */

    #hero-container-office{
        height: 30vh;
    }

    .quote {
        font-size: 1.7em;
    }

/* ----------------------logo ---------------------- */

    #logo-container{
        height: 15vh
    }

    .logo{
        max-width: 50%;
        margin-left: 22em;
        margin-top: -8em;
        margin-bottom: 0;
    }

    .logo-text{
        font-size: 1.7em;
        margin-left: 6.7em;
        margin-top: -2.5em;
    }

/* ----------------------main text ----------------- */

    .main-text{
        height: 100%;
        font-size: 2em;
        
    }
}

@media only screen and (min-width:1024px) and (orientation: portrait){

/* -------------------------logo --------------------- */

    #logo-container{
        height: 20vh;
    }

    .logo{
        margin-left: 30em;
    }

    .logo-text{
        margin-top: -1.7em;
        margin-left: 10em;
        font-size: 2em;
    }
}

@media only screen and (min-width: 1024px) and ( orientation: landscape){

/* -------------------------hero --------------------- */

    #hero-container-office{
        height: 40vh;
    }

    .quote{
       font-size: 2em;
    }

/* -------------------------logo ---------------------- */

    #logo-container {
        height: 27vh;
      }

    .logo{
        width: 25em;
        margin: -6em 0 2em 34em;
    }

    .logo-text{
        font-size: 2em;
        margin-top: -2.6em;
        margin-left: 9em;
    }

/* -------------------------Main text------------------ */

    .main-text{
        font-size: 2em;
    }
}

@media only screen and (min-width: 1366px) and ( orientation: landscape) {

/* ---------------------------logo ------------------- */

  #logo-container {
        height: 37vh;
  }

   .logo {
        width: 45em;
        margin: -12.2em 0 2em 37em;
   }

   .logo-text {
        font-size: 3.4em;
        margin-top: -1.6em;
        margin-left: 5.5em;
   }

/* ----------------------------main text -------------- */

   #opening-text{
       padding-top: 20%;
   }

   .main-text {
      font-size: 3em;
   }


}

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

/* ------------------------hero--------------------- */

    #hero-container-office{
        height: 54vh;
    }

    .quote{
        font-size: 1.6em;
    }

/* ------------------------logo ---------------------- */

    #logo-container{
        height: 30vh;
    }

    .logo{
        width: 40%;
        margin: -5.2em 0 2em 30em;

    }

     .logo-text {
       font-size: 2em;
       margin-top: -2.2em;
       margin-left: 6.5em;
     }

/* -----------------------main text------------------ */

     #opening-text{
         padding-top: 16%;
     }

     .main-text{
         font-size: 2em;
     }

}

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

/* ------------------------logo ---------------------- */

    .logo {
        width: 40%;
        margin: -5.2em 0 2em 32em;
    }

    .logo-text {
        font-size: 2.5em;
        margin-top: -2.2em;
        margin-left: 5.5em;
    }



}

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

/* ------------------------logo ---------------------- */

    #logo-container{
        height: 60vh;
    }

    .logo {
        width: 50%;
        margin: -5.2em 0 2em 32em;
    }

    .logo-text {
        font-size: 3.5em;
        margin-top: -1em;
        margin-left: 3.8em;
    }

/* -----------------------main text------------------ */

     .main-text{
         font-size: 2em;
         margin-bottom: 3em;
     }
}

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

/* ------------------------logo ---------------------- */


    .logo {
        max-width: 40%;
        margin: -5.2em 0 2em 40em;
    }

}

@media only screen and (min-width: 1336px) {
    /* ------------------------logo ---------------------- */

    #logo-container {
      height: 60vh;
    }

    .logo {
      max-width: 40%;
      margin: -5.2em 0 2em 50em;
    }

    .logo-text {
      font-size: 3.5em;
      margin-top: -1em;
      margin-left: 6.8em;
    }

}