/* -- PORTRAIT --*/

@media (orientation: portrait) and (min-width: 410px) {



  /* -- GENERAL -- */

  h2.title {

    font-size: 2.4rem;

  }



  h3 {

    font-size: 2.2rem;

  }



  /* -- HEADER -- */

  h1.slogan {

    padding: 10px;

    font-size: 3rem;

    line-height: 1.5;

  }



  /* -- CONTACT -- */

  .contact .map {

    height: 40vh;

  }

}



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



  /* -- GENERAL -- */

  h2.title {

    font-size: 3.2rem;

  }



  h3 {

    font-size: 2.4rem;

  }



  /* -- HEADER -- */

  h1.slogan {

    padding: 20px;

    font-size: 3.8rem;

    line-height: 1.7;

    letter-spacing: 2px;

    word-spacing: 4px;

  }



  /* -- PROFITS -- */

  .profit {

    float: left;

    width: 50%;

  }



  .profit:nth-of-type(odd) {

    padding-right: 20px;

  }



  .profit:nth-of-type(even) {

    padding-left: 20px;

  }



  /* -- OFFER -- */

  .offer {

    margin-top: 0;

  }



  .camp {

    margin-bottom: 20px;

  }



  .camp a {

    width: 50%;

  }



  .camp:nth-of-type(odd) a {

    float: left;

    padding-right: 20px;

  }



  .camp:nth-of-type(even) a {

    float: right;

    padding-left: 20px;

  }



  .camp .description {

    width: 50%;

  }



  .camp:nth-of-type(odd) .description {

    float: left;

    padding-left: 20px;

  }



  .camp:nth-of-type(even) .description {

    float: right;

    padding-right: 20px;

  }



  .description h3 {

    padding-top: 0;

  }



  /* -- BANNER -- */

  section.banner {

    display: block;

    height: 50vh;

    margin-top: 60px;

    background-image: url(img/banner.jpg);

  }



  section.banner h1.slogan {

    top: auto;

    bottom: 0;

  }



  /* -- GALLERY -- */

  .gallery a {

    width: 25%;

    height: 20vw;

  }



  /* -- FAQ -- */

  .faq {

    display: block;

    max-width: 960px;

    margin: 40px auto 0;

  }



  .faq h3~h3 {

    margin-top: 20px;

  }



  .faq a.link {

    position: static;

    display: inline-block;

    font-size: 1.6rem;

    color: #222;

    background-color: transparent;

    text-transform: lowercase;

  }

}



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



  /* -- GENERAL -- */

  .intro,

  .profits,

  .offer,

  .galleries,

  .faq {

    max-width: 1024px;

    margin-left: auto;

    margin-right: auto;

  }



  h2.title {

    font-size: 3.4rem;

  }



  h3 {

    font-size: 2.6rem;

  }



  /* -- HEADER -- */

  h1.slogan {

    padding: 20px;

    font-size: 4.4rem;

    letter-spacing: 4px;

    word-spacing: 8px;

  }



  /* -- CONTACT -- */

  .contact .wrap {

    width: 1024px;

    margin: 0 auto;

  }



  .contact h2 {

    font-size: 3.2rem;

  }



  .contact ul {

    margin: 20px auto;

    font-size: 2.4rem;

  }



  .contact ul li {

    float: left;

    width: 25%;

    /* padding-left: 20px; */

    line-height: 1.5;

  }

  

    .contact ul li:last-child {

    float: left;

    width: 50%;

    /* padding-left: 20px; */

    line-height: 1.5;

  }



  .contact .map {

    float: none;

    width: 100%;

    height: 30vh;

  }

}



/* -- LANDSCAPE --*/

@media (orientation: landscape) {



  /* -- GENERAL -- */

  .profits,

  .offer,

  .galleries,

  .faq,

  .contact {

    margin-top: 20px;

  }



  /* -- HEADER -- */

  .banner {

    height: calc(100vh - 50px);

  }



  /* -- INTRO -- */

  .intro a {

    top: calc(100vh - 50px);

    height: 50px;

    font-size: 40px;

  }



  p#start {

    padding-top: 60px;

  }



  /* -- PROFITS -- */

  .pic {

    height: 40vh;

  }



  .profit {

    float: left;

    width: 50%;

  }



  .profit:nth-of-type(odd) {

    padding-right: 20px;

  }



  .profit:nth-of-type(even) {

    padding-left: 20px;

  }



  /* -- OFFER -- */

  .offer {

    margin-top: 0;

  }



  .camp {

    margin-bottom: 20px;

  }



  .camp a {

    width: 50%;

    height: 60vw;

  }



  .camp:nth-of-type(odd) a {

    float: left;

    padding-right: 20px;

  }



  .camp:nth-of-type(even) a {

    float: right;

    padding-left: 20px;

  }



  .camp .description {

    width: 50%;

    font-size: 1.4rem;

  }



  .camp:nth-of-type(odd) .description {

    float: left;

    padding-left: 20px;

  }



  .camp:nth-of-type(even) .description {

    float: right;

    padding-right: 20px;

  }



  .description h3 {

    padding-top: 0;

  }



  /* -- GALLERY -- */

  .gallery a {

    width: 25%;

    height: 20vw;

    padding: 0 3px;

  }



  /* -- CONTACT -- */

  .contact .wrap {

    float: right;

    width: 50%;

  }



  .contact h2 {

    font-size: 2.4rem;

  }



  .contact ul {

    margin: 20px auto;

    font-size: 1.6rem;

  }



  .contact ul li {

    line-height: 2;

    text-align: left;

  }



  .contact .map {

    float: right;

    width: 50%;

    height: 90vh;

  }

}



@media (orientation: landscape) and (min-width: 640px) {



  /* -- HEADER -- */

  .banner {

    height: calc(100vh - 60px);

  }



  h1.slogan {

    font-size: 3.6rem;

    line-height: 1.5;

    letter-spacing: 2px;

    word-spacing: 4px;

  }



  /* -- INTRO -- */

  .intro {

    margin-top: 60px;

  }



  .intro a {

    top: calc(100vh - 60px);

    height: 60px;

    font-size: 50px;

  }



  p#start {

    padding-top: 60px;

  }



  /* -- OFFER -- */

  .camp a {

    height: 50vw;

  }



  .camp .description {

    font-size: 1.6rem;

  }



  /* -- BANNER -- */

  section.banner {

    display: block;

    height: calc(100vh - 40px);

    margin-top: 40px;

    background-image: url(img/banner.jpg);

  }



  section.banner h1.slogan {

    top: auto;

    bottom: 0;

  }



  /* -- FAQ -- */

  .faq {

    display: block;

    margin: 40px auto 0;

  }



  .faq a.link {

    position: static;

    display: inline-block;

    font-size: 1.6rem;

    color: #222;

    background-color: transparent;

    text-transform: lowercase;

  }



  /* -- CONTACT -- */

  .contact h2 {

    font-size: 2.8rem;

  }



  .contact ul {

    font-size: 2rem;

  }

}



@media (orientation: landscape) and (min-width: 800px) {



  /* -- GENERAL -- */

  h3 {

    font-size: 2rem;

  }



  /* -- OFFER -- */

  .camp a {

    height: 40vw;

  }



  /* -- CONTACT -- */

  .contact h2 {

    font-size: 3rem;

  }



  .contact ul {

    font-size: 2rem;

    padding-left: 30px;

  }

}



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



  /* -- GENERAL -- */

  .intro,

  .profits,

  .offer,

  .galleries,

  .faq {

    max-width: 1024px;

    margin-left: auto;

    margin-right: auto;

    padding: 0 20px;

  }



  h2.title {

    padding-top: 60px;

    font-size: 2.4rem;

  }



  /* -- HEADER -- */

  .banner {

    height: calc(100vh - 60px);

  }



  h1.slogan {

    font-size: 4.2rem;

    line-height: 1.7;

    letter-spacing: 4px;

    word-spacing: 8px;

    cursor: default;

  }



  /* -- NAVIGATION -- */

  nav {

    display: block;

    position: fixed;

    z-index: 1;

    top: 0;

    width: 100%;

    background-color: rgba(250, 250, 250, 0.8);

  }



  nav .wrap {

    max-width: 1024px;

    margin: 0 auto;

    padding-left: 20px;

    padding-right: 20px;

  }



  nav ul {

    list-style: none;

    font-size: 0;

  }



  nav li {

    display: inline-block;

    width: 20%;

  }



  nav li span {

    display: block;

    color: #333;

    font-size: 1.8rem;

    line-height: 40px;

    font-weight: 700;

    text-align: center;

    text-transform: uppercase;

    cursor: pointer;

    transition: 0.3s;

  }



  nav li span:hover {

    font-weight: 400;

    color: white;

    background-color: deepskyblue;

  }



  .navbtn.active {

    color: deepskyblue;

    border-bottom: 2px solid currentColor;

  }



  .navbtn.active:hover {

    color: white;

  }



  /* -- INTRO -- */

  .intro a {

    transition: .2s;

  }



  .intro a:hover {

    top: calc(100vh - 55px);

    color: deepskyblue;

  }



  /* -- PROFITS -- */

  .pic {

    width: 100%;

    height: 40vh;

    background-size: 100%;

    transition: 0.3s;

  }



  .pic:hover {

    background-size: 130%;

  }



  /* -- OFFER -- */

  .camp a {

    height: 50vh;

  }



  .camp a p {

    display: block;

    font-size: 2rem;

    font-weight: 700;

    line-height: 50vh;

    text-align: center;

    color: white;

    transition: .4s;

  }



  .camp a p:hover {

    font-size: 2.8rem;

    background-color: rgba(0, 0, 0, .5);

  }



  /* -- GALLERY -- */

  .gallery a {

    width: calc(25% - 10px);

    height: 15vw;

    margin: 5px;

    padding: 0;

  }



  .gallery img {

    transition: .3s;

  }



  .gallery img:hover {

    width: 120%;

    height: 120%;

  }



  /* -- FAQ -- */

  .faq a.link {

    transition: .2s;

  }



  .faq a.link:hover {

    color: deepskyblue;

  }



  /* -- CONTACT -- */

  .contact .wrap {

    float: none;

    width: 1024px;

    margin: 0 auto;

  }



  .contact h2 {

    font-size: 3.2rem;

  }



  .contact ul {

    margin: 20px auto;

    font-size: 2.2rem;

  }



  .contact ul li {

    float: left;

    width: 25%;

    /* padding-left: 20px; */

    line-height: 1.5;

  }

  

    .contact ul li:last-child {

    float: left;

    width: 50%;

    /* padding-left: 20px; */

    line-height: 1.5;

  }



  .contact .map {

    float: none;

    width: 100%;

    height: 50vh;

  }

}



@media (min-width: 1200px) {

  .faq a.tothetop {

    display: block;

    position: fixed;

    bottom: 0;

    right: 0;

    padding-left: 10px;

    padding-right: 10px;

    font-size: 50px;

    line-height: 1;

    color: white;

    background-color: black;

    opacity: 0.2;

    transition: .3s;

  }



  .faq a.tothetop:hover {

    bottom: 10px;

    opacity: 1;

  }

}