/*! HTML5 Boilerplate v8.0.0 | MIT License | https://html5boilerplate.com/ */

/* main.css 2.1.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
* What follows is the result of much research on cross-browser styling.
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
* Kroc Camen, and the H5BP dev community and team.
*/

/* ==========================================================================
  Base styles: opinionated defaults
  ========================================================================== */

html {
color: #222;
font-size: 1em;
line-height: 1.4;
}

/*
* Remove text-shadow in selection highlight:
* https://twitter.com/miketaylr/status/12228805301
*
* Vendor-prefixed and regular ::selection selectors cannot be combined:
* https://stackoverflow.com/a/16982510/7133471
*
* Customize the background color to match your design.
*/

::-moz-selection {
background: #b3d4fc;
text-shadow: none;
}

::selection {
background: #b3d4fc;
text-shadow: none;
}

/*
* A better looking default horizontal rule
*/

hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}

/*
* Remove the gap between audio, canvas, iframes,
* images, videos and the bottom of their containers:
* https://github.com/h5bp/html5-boilerplate/issues/440
*/

audio,
canvas,
iframe,
img,
svg,
video {
vertical-align: middle;
}

/*
* Remove default fieldset styles.
*/

fieldset {
border: 0;
margin: 0;
padding: 0;
}

/*
* Allow only vertical resizing of textareas.
*/

textarea {
resize: vertical;
}

/* ==========================================================================
  Author's custom styles
  ========================================================================== */
  
/* ************************************************
General Styles 
***************************************************/
  
  html {
    font-size: 16px;
  }
  
  body {
    font-family: 'Open Sans', sans-serif;
    font-size: 1em;
    color: #e2e3ed;
    text-align: left;
  }
  
  ul, 
  ol {
    list-style-type: none;
    padding: 0;
    margin: 0;
  }
  
  a {
    color: #e2e3ed;
    text-decoration: none;
  }

  h1{
    font-family: 'Poppins', Helvetica, Arial, sans-serif;
    font-size: 2.25rem;
    line-height: 43px;
    font-weight: 500;
  }
  
  h2 {
    font-family: 'Poppins', sans-serif;
    font-size: 1.875rem;
    font-weight: 500;
  }
  
  h3, 
  h4 {
    font-family: 'Poppins', sans-serif;
    font-size: 1.125rem;
    font-weight: 500;
    margin: 20px 0;
  }
  
  p {
    font-size: .875rem;
    line-height: 18px;
  }
  
  img {
    width: 100%;
  }
  
  figure {
    margin: 0;
  }
  
  address {
    font-style: normal;
  }
  
/*Content Wrapper*/

  .content-wrapper{
  width: 90%;
  margin: 50px 0;
}

  /* Header styles  */
header{
  display: flex;
  justify-content: center;
  padding: 15px 0;
  background-color: #202322;
  ;

}
header .header-divider{
  width: 100%;
  height: 1px;
  margin: 10px 0 20px 0;
  color: #3a3a3a;
}
header nav {
  width: 60%;
  font-size: 1.125rem;
  font-weight: bold;
}

header .content-wrapper{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: row wrap;
  margin: 0;

}
header nav ul{
  display: flex;
  justify-content:space-around;
  width: 100%;
  }

  /* Main styles */

  .features{
  display:flex;
  justify-content: center;
  background: url('../img/unplugged-retreat-features.jpg') center no-repeat black;
    background-size: cover;
  }
  .features .features-items{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: row wrap;
  }
  .features article{
  width: 62%;
  margin: 30px 0;
  }
  .features h2{
  margin-bottom:  60px;
  }
  .features p{
  margin: 0;
  }
  .features .fontawesome-icon{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3.75rem;
    padding-left: 0px;
  }
  .features i {
    margin-bottom: 40px;
    color: #9ce1f0;
}
  .reviews{
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #2a423a;
}
.reviews h2{
  line-height: 30px;
}
  .reviews h3{
  width: 57%;
  }
  .reviews .lacrue{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .reviews .lacrue .lacrue-image{
    margin-right: 100px;
    margin-top: 20px;
  }
  .review .lacrue-content{
     display: flex;
     justify-content: center;
     align-items: center;
     padding: 0 20px;
  }
  .lacrue-content h3{
     padding-top: 20px ;
     margin: 0;
  }
  .hero-area { 
    display: flex;
    justify-content: center;
    padding-left: 12px;
    padding-right: 12px;
    background: url('../img/unplugged-retreat.jpg') center no-repeat black;
    background-size: cover;

  }
  
  aside{
  display: flex;
  justify-content: center;
  background-color: #527158;
  flex-direction: column;
  align-items: center;
  }
  aside .retreat{
  margin-right: 50px;
  }
  aside .join-reatreat{
  margin-left: 0px;
  }

.social .social-icons a{
  font-size: 1.3125rem;
  background-color: #527158;
  border-radius: 100px;
  width: 50px;
  height: 30px;
  padding-top: 10px;
  margin: 0 10px;
}
.social .social-icons a fa-twitter{
  margin: 0 10px;
}
   /* footer styles  */
   footer{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background-color: #202322;
  
  }
  footer .content-wrapper{
    width: 55%;
  }
  .footer-content{
    margin-bottom: 50px;
    
  }
  footer .social-icons{
    display:flex;
    justify-content: space-around;
    align-items: center;
  }
  footer .social-icons p{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  footer .copyright{
    margin: 20px 0;
  }
  footer p{
    margin: 0;
  }
  /* About/index.html*/
  .mission{
  display: flex;
  justify-content: center;
  background-color: #527158;

  }
  .contact-section{
  display: flex;
  justify-content: center;
  background-color: #2a423a;
  

  }
  .contact-content p{
    margin: 0;
  }
  .map figure {
  width: 100%;
  height: 0; 
  padding-bottom: 125%; 
  overflow: hidden;
  position: relative;
}

.map iframe {
  width: 100%;
  height: 100%;
  position: absolute; 
  top: 0; 
  left: 0; 
}
  /*FAQ/index.html*/
  .faq{
    display: flex;
    justify-content: center;
    background-color: #527158;

  }
  .faq .content-wrapper{
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-flow: row wrap;
  margin: 50px 0 0 0;
  }
  .faq h2{
  line-height: 1;
  margin: 40px;
  }
  .faq-content{
  margin-bottom: 50px;
  }
  .faq-content h4{
    line-height: 1.3333;
  }
  /* Form Style*/
  aside .form {
  margin-top: 30px;
}
  
input[type=text] {
  box-sizing: border-box;
  width: 100%;
  color: #2a423a;
  font-style: italic;
  padding: 1em;
  font-size: 1.125rem;
  font-weight: 500;
  background-color: #e2e3ed;
}
  
input[type=button] {
  width: 100%;
  padding: 20px 0;
  margin-top: 20px;
  background-color: #2a423a;
  font-family: 'Poppins', Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-size: 1.125em;
  color: #e2e3ed;
  border: none;
  text-align: center;
  text-transform: uppercase;
  background-color: #2a423a;
}



/* ==========================================================================
  Helper classes
  ========================================================================== */

/*
* Hide visually and from screen readers
*/

.hidden,
[hidden] {
display: none !important;
}

/*
* Hide only visually, but have it available for screen readers:
* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
*
* 1. For long content, line feeds are not interpreted as spaces and small width
*    causes content to wrap 1 word per line:
*    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
*/

.sr-only {
border: 0;
clip: rect(0, 0, 0, 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
width: 1px;
/* 1 */
}

/*
* Extends the .sr-only class to allow the element
* to be focusable when navigated to via the keyboard:
* https://www.drupal.org/node/897638
*/

.sr-only.focusable:active,
.sr-only.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
white-space: inherit;
width: auto;
}

/*
* Hide visually and from screen readers, but maintain layout
*/

.invisible {
visibility: hidden;
}

/*
* Clearfix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
*    `contenteditable` attribute is included anywhere else in the document.
*    Otherwise it causes space to appear at the top and bottom of elements
*    that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
*    `:before` to contain the top-margins of child elements.
*/

.clearfix::before,
.clearfix::after {
content: " ";
display: table;
}

.clearfix::after {
clear: both;
}

/* ==========================================================================
  EXAMPLE Media Queries for Responsive Design.
  These examples override the primary ('mobile first') styles.
  Modify as content requires.
  ========================================================================== */


@media only screen and (min-width: 768px){
/*Tablet styles */

    /* General styles */
  .content-wrapper {
    max-width: 640px;
    margin: 100px 0;
  }
  h1{
    font-size: 3rem;
    line-height: 48px;
  }
  h2{
    font-size: 2.25rem;
    line-height: 48px;
  }
  h3{
    font-size: 1.5rem;
    line-height: 30px;
  }


  /* Header */

  header {
    padding: 33px 0;

  }

  header .content-wrapper {
      width: 100%;
      justify-content: center;
  }

  header nav {
    width: 20%;
      
  }

  header nav ul {
    justify-content: space-between;

  }

  .header-divider {
      display: none;
  }

  /* Hero Area */

  /* Aside */
  aside .content-wrapper {
      margin: 50px 0;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
  }

  aside .content-wrapper .form-description,
  aside .content-wrapper .form {        
      width:  40%;       
      margin: 0;
  }

  /* Features */

  .features article {
    display: flex;
    align-items: center;
    flex-flow: column wrap;
    flex-basis: 50%;

  }

  .features .features-item-description {
      width: 50%;
  }
  .features .fontawesome-icon i{
    padding-right: 40px;
  }
  

  /* Reviews */
  .reviews article {
    display: flex;
    justify-content: space-between;

  }

  .reviews article div {
      width: 50%;        
  }
  .reviews .lacrue{
    flex-direction: row;
    justify-content: space-between
  }
  .reviews .lacrue .lacrue-image img{
  margin-top: 0 ;
  height: 200px;
  width:300px;
  }
  .lacrue-content h3{
    padding-top: 20px ;
    margin: 0;
    width: 250px;
 }
  /* Footer */
  footer .content-wrapper {
      width: 50%;
      margin: 100px 0;
  }
  footer h4{
    font-size: 1.5rem;
  }

  .footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;

  }

  footer .contact {
      margin-bottom: 0;
  }

  footer .copyright {
      width:100%;
  }
  footer h4,
  .contact h4{
    font-size: 1.5rem;
  }
  footer p{
    line-height: 18px;
  }

  /* ==========================================================================
    About Page
    ========================================================================== */

  .mission-content {
    display: flex;
    justify-content: space-between;
    align-items:flex-start;
    padding: 20px 0 0 0;
    }

    .mission-content p {
        width: 45%;
    }
      .contact h4{
        font-size: 1.5rem;
      }
    .contact-section .content-wrapper h2 {
        width: 80%;
    }

    .contact-content {
        display: flex;
        justify-content:space-between;
        align-items: flex-start;
    }
    .map figure {
      padding-bottom: 45%;
    }
    /* ==========================================================================
    FAQ Page
    ========================================================================== */
    .faq .content-wrapper {
    width: 75%;
    justify-content: space-between;
    }

    .faq-content {
        flex-basis: 45%;
    }

    .faq h2 {
        width: 100%;
        line-height: 40px;
    }
    .faq h4,
    .faq p{
      font-size: 0.875rem;
      line-height: 1.125;
    }
}

@media only screen and (min-width: 1200px) {
/*Desktop styles here*/

  /* General styles*/
  h1{
    font-size: 3.75rem;
  }
  h2{
    font-size: 2.25rem;
  }

  p{
    font-size: 1.125rem;
    line-height: 24px;
  }
  header {
    padding:15px 0;
  }

  .content-wrapper {
      max-width: 960px;
  }
  header .content-wrapper{
  justify-content: space-between;
  }

  /* Hero */
  .hero-area h1 {
    width: 80%;
  }

  /* Aside */
  aside .content-wrapper {
    justify-content: space-around;
  }

  aside .content-wrapper .form-description,
  aside .content-wrapper .form {
    width: 30%;
  }

  /* Features */
  .features h2 {
    width: 90%;
  }

  .features article {
    flex-basis: 33%;
  }
  features .fontawesome-icon{
  width:100%;
  padding-right: 100px;
  }
  .features .fontawesome-icon i{
    padding-left: 10px;
  }
  /* Reviews */ 
  .reviews .lacrue{
  flex-direction: row;
  justify-content: space-between
  }
  .reviews .lacrue .lacrue-image img{
  margin-top: 20px ;
  height: 250px;
  width: 450px;
  }
  .reviews article div {
    width: 42%;
  }

  /* ==========================================================================
  About Page
  ========================================================================== */
  .mission h2,
  .contact-section .content-wrapper h2 {
    width: 95%;
  }
  .map figure {
  padding-bottom: 37.5%; 

  }

  /* ==========================================================================
  FAQ Page
  ========================================================================== */
  .faq .content-wrapper {
  width: 75%;
  justify-content: space-between;
  }
  .faq h2 {
    width: 100%;
  }
  .faq h2,
  .mission h2{
  font-size: 3rem;
  }
  .faq h3,
  .faq h4,
  .mission h3,
  .mission h4{
  font-size: 1.875rem;
  }

  .faq h2 {
    width: 100%;
    font-size: 3em;
  }

  .faq h4,
  .faq p {
    font-size: 1.125em;
    line-height: 1;
  }

}


/* ==========================================================================
  Print styles.
  Inlined to avoid the additional HTTP request:
  https://www.phpied.com/delay-loading-your-print-css/
  ========================================================================== */

@media print {
*,
*::before,
*::after {
  background: #fff !important;
  color: #000 !important;
  /* Black prints faster */
  box-shadow: none !important;
  text-shadow: none !important;
}

a,
a:visited {
  text-decoration: underline;
}

a[href]::after {
  content: " (" attr(href) ")";
}

abbr[title]::after {
  content: " (" attr(title) ")";
}

/*
  * Don't show links that are fragment identifiers,
  * or use the `javascript:` pseudo protocol
  */
a[href^="#"]::after,
a[href^="javascript:"]::after {
  content: "";
}

pre {
  white-space: pre-wrap !important;
}

pre,
blockquote {
  border: 1px solid #999;
  page-break-inside: avoid;
}

/*
  * Printing Tables:
  * https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
  */
thead {
  display: table-header-group;
}

tr,
img {
  page-break-inside: avoid;
}

p,
h2,
h3 {
  orphans: 3;
  widows: 3;
}

h2,
h3 {
  page-break-after: avoid;
}
}