/*
  Theme Name: Sol de Ibiraquera
  Author: Guilherme Rutkosky Pacheco
  Author URI: grutkosky.com
  Version: 1.0
*/

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline
}

:focus {
  outline: 0
}

body {
  line-height: 1;
  color: black;
  background: white
}

ol,
ul {
  list-style: none
}

table {
  border-collapse: separate;
  border-spacing: 0
}

caption,
th,
td {
  text-align: left;
  font-weight: normal
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: ""
}

blockquote,
q {
  quotes: "" ""
}

* {
  font-family: 'Raleway', sans-serif;
  font-weight: 200
}

img {
  max-width: 100%
}

h2 {
  margin-bottom: 20px;
  font-size: 3em;
  font-weight: 700
}

p {
  line-height: 1.4
}

.two-column {
  display: flex;
  flex-direction: row;
  max-height: 350px;
  margin-top: 20px;
  justify-content: space-between;
  flex-wrap: wrap
}

.two-column > * {
  width: 48%
}

body {
  background-image: url(./img/fotos/footer.jpg);
  background-position: center bottom -280px;
  background-repeat: no-repeat;
  background-size: contain
}

header#welcome-screen {
  height: 100vh;
  position: relative;
  display: flex;
  align-content: center;
  align-items: center;
  flex-wrap: wrap;
  z-index: 9
}

header#welcome-screen .container {
  flex-grow: 1;
  text-align: center
}

header#welcome-screen .container h1 {
  color: transparent;
  font-size: 0px
}

header#welcome-screen .container svg {
  width: 50%;
  fill: #fff;
  overflow: visible;
  -webkit-filter: drop-shadow(0px 10px 30px 5px #000);
  filter: drop-shadow(0px 10px 30px 5px #000)
}

header#welcome-screen .cta-group {
  width: 100%;
  margin-top: 25px;
  text-align: center
}

header#welcome-screen .cta-group .cta {
  display: inline-block;
  margin: 0px 8px;
  padding: 10px 25px;
  color: #fff;
  font-size: 1.45em;
  letter-spacing: 1.2px;
  text-decoration: none;
  text-transform: uppercase;
  border: 2px solid #fff
}

header#welcome-screen .cta-group .cta:hover,
header#welcome-screen .cta-group .cta + .cta {
  color: #444;
  background-color: #fff;
  transition-duration: 0.5s
}

header#welcome-screen .bg-video {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: -2
}

header#welcome-screen .bg-video video {
  width: 100%;
  height: 100%;
  position: absolute;
  object-fit: cover;
  display: block;
  filter: hue-rotate(-340deg);
  filter: saturate(1.25)
}

header#welcome-screen:after {
  display: block;
  content: '';
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  background-color: rgba(0, 0, 0, 0.2);
  z-index: -1
}

main {
  position: relative;
  padding: 4vh;
  z-index: 1
}

main > .border {
  content: '';
  position: fixed;
  transition-duration: 1s;
  background-color: #fafafa;
  z-index: 3
}

main > .border.top {
  height: 0px;
  top: 0px;
  left: 0px;
  right: 0px
}

main > .border.top figure {
  width: 200px;
  position: absolute;
  left: 50%;
  top: -70px;
  margin-left: -100px;
  transition-duration: 1s
}

main > .border.right {
  width: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px
}

main > .border.bottom {
  height: 0px;
  bottom: 0px;
  right: 0px;
  left: 0px
}

main > .border.left {
  width: 165px;
  top: 0px;
  left: -140px;
  bottom: 0px
}

main section {
  height: calc(100vh - (2 * 4vh));
  min-height: 600px;
  box-sizing: border-box;
  position: relative
}

main section .container {
  position: absolute;
  top: 50px;
  bottom: 50px;
  left: 50px;
  right: 50px;
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  justify-content: flex-end
}

main section .container.right {
  justify-content: flex-start
}

.content.upper {
  width: 50%;
  min-height: 80%;
  position: absolute;
  top: 60px;
  left: 70px;
  right: auto;
  padding: 30px 50px;
  background-color: #fff;
  z-index: 2;
  box-sizing: border-box
}

.content.lower {
  width: 70%;
  max-height: 100%;
  position: relative;
  margin: 0px
}

.content.lower img {
  object-fit: contain
}

.right .content.upper {
  right: 70px;
  left: auto
}

.content.upper ul li {
  display: block;
  padding: 10px 0px;
  border-bottom: 1px solid #ddd
}

main.atual > .top,
main.atual > .bottom {
  height: 4vh
}

main.atual > .left {
  left: -112px
}

main.atual > .right {
  width: 4vh
}

main.atual > .top figure {
  top: -6px
}

#about {
  padding: 50px
}

#about p {
  line-height: 1.4
}

#about a {
  margin-top: 15px;
  padding: 8px 25px;
  display: inline-block;
  color: #444;
  font-weight: 400;
  letter-spacing: 0.3px;
  text-decoration: none;
  text-transform: uppercase;
  border: 2px solid #555
}

#space {
  margin: 150px 0px 120px
}

#ibiraquera .container {
  padding-left: 120px;
}

#ibiraquera header {
  width: 30%;
}

#ibiraquera ul {
  width: 70%;
  display: flex;
  flex-wrap: wrap;
}

#ibiraquera ul li {
  width: 30%;
  height: 150px;
  height: fit-content;
  margin: 1.5%;
} 

#book .container {
  padding-left: 120px
}

#book .container h2 {
  width: 32%;
  margin-bottom: 40px
}

#book .container h2 small {
  display: block;
  margin-top: 16px;
  padding-right: 50px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4
}

#book .container h2 a img {
  width: 100%
}

#book .container .content {
  width: 50%
}

#book .container .content .send-message {
  display: block;
  margin-top: 15px;
  padding: 16px 50px;
  display: inline-block;
  cursor: pointer;
  color: #444;
  font-size: 1em;
  font-weight: 400;
  letter-spacing: 0.3px;
  text-decoration: none;
  text-transform: uppercase;
  background: transparent;
  border: 2px solid #555;
  transition-duration: 0.3s
}

#book .container .content .send-message:focus,
#book .container .content .send-message:hover {
  color: #fff;
  transition-duration: 0.3s;
  background-color: #222
}

#book .container .content .badges {
  display: flex;
  padding-top: 24px;
}

#book .container .content .airbnb {
  width: 120px;
  height: 60px;
  display: block;
  margin-right: 24px;
  padding: 5px 12px 0px;
  border-radius: 4px;
  border: 1px solid #aaa
}

#book .container .content .booking {
  width: 200px;
  display: block;
  padding: 0px;
}

.grecaptcha-badge { display: none !important;}

nav.left {
  display: flex;
  align-items: center;
  justify-content: space-between
}

nav.left > span {
  position: relative;
  margin-right: -6px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 3px;
  transform: rotateZ(-90deg)
}

nav.left > span:before {
  width: 17.3px;
  height: 11px;
  content: '';
  display: block;
  position: absolute;
  left: -26px;
  top: 1px;
  background-image: url(./img/icone-menu.svg);
  background-size: contain
}

nav.left > ul {
  margin-left: 10px
}

nav.left > ul li {
  margin: 22px 0px
}

nav.left > ul li a {
  position: relative;
  padding: 0px 2px;
  color: #000;
  font-size: 0.9em;
  text-decoration: none
}

nav.left > ul li a:before {
  width: 0px;
  height: 2px;
  position: absolute;
  left: 0px;
  bottom: -4px;
  content: '';
  background-color: #ccc;
  transition-duration: 0.3s;
  transition-timing-function: ease-out
}

nav.left > ul li a:hover:before {
  width: 100%;
  transition-duration: 0.3s
}

nav.left:hover {
  left: 0px;
  transition-duration: 0.4s
}

nav.left:hover > span {
  opacity: 0.7
}

.slider .slick-dots {
  width: 15px;
  position: absolute;
  top: 0px;
  left: 10px;
  bottom: 0px;
  display: flex;
  align-content: center;
  flex-wrap: wrap
}

.slider .slick-dots li {
  display: inline-block
}

.slider .slick-dots li button {
  width: 10px;
  height: 10px;
  padding: 0px;
  font-size: 0px;
  color: transparent;
  cursor: pointer;
  background-color: transparent;
  border: 1px solid #fff
}

.slider .slick-dots li.slick-active button {
  background-color: #fff
}

.slick-prev,
.slick-next {
  width: 30px;
  height: 30px;
  position: absolute;
  left: -38px;
  cursor: pointer;
  color: transparent;
  font-size: 0px;
  background-color: #fff;
  border: none;
  z-index: 2
}

.slick-prev:after,
.slick-next:after {
  width: 10px;
  height: 10px;
  position: absolute;
  top: 9px;
  left: 11px;
  content: '';
  border-left: 2px solid #999;
  border-top: 2px solid #999;
  transform: rotate(-45deg)
}

.slick-prev:hover:after,
.slick-next:hover:after {
  border-color: #333
}

.slick-prev {
  top: 50%;
  margin-top: -32px
}

.slick-next {
  bottom: 50%;
  margin-bottom: -32px
}

.slick-next:after {
  left: 7px;
  transform: rotate(135deg)
}

footer {
  height: 900px;
  position: relative;
  padding: 0px 0px 40px;
  z-index: 0
}

footer p {
  width: 100%;
  position: absolute;
  display: block;
  bottom: 50px;
  color: #aaa;
  text-align: center;
  font-size: 0.9em
}

@media only screen and (max-device-width: 812px) {
  header#welcome-screen .container svg {
    width: 86%
  }
  header#welcome-screen .cta-group {
    margin-top: 15px
  }
  header#welcome-screen .cta-group .cta {
    width: 70%;
    margin: 15px auto 0px
  }
  body {
    background-size: 580px;
    background-position: center bottom -180px
  }
  main {
    height: auto !important;
    overflow: hidden
  }
  main section {
    height: auto
  }
  main section .container {
    position: static
  }
  main section .container h2 {
    font-size: 2.2em
  }
  main section .container .content.lower,
  main section .container .content.upper {
    width: 100%;
    position: static;
    padding: 0px;
    margin-bottom: 16px
  }
  main #space,
  main #about,
  main #book,
  main #ibiraquera {
    padding: 50px 20px 5px 50px
  }
  main #space a,
  main #about a,
  main #book a {
    display: block;
    text-align: center
  }
  main #space .content.lower,
  main #about .content.lower,
  main #book .content.lower {
    order: -1
  }
  main #space {
    margin: 50px 0px
  }
  main #space .two-column {
    max-height: none
  }
  main #space .two-column > * {
    width: 100%
  }
  main #ibiraquera {
    min-height: 0px;
  }
  main #ibiraquera header {
    margin-bottom: 32px;
  }
  main #ibiraquera header,
  main #ibiraquera ul {
    width: 100%;
  }
  main #ibiraquera ul li {
    width: 47%;
  }
  main #book .container,
  main #ibiraquera .container {
    padding: 0px
  }
  main #book .container h2 {
    width: 100%
  }
  main #book .container h2 small {
    padding: 0px
  }
  main #book .container .content {
    width: 100%
  }
  footer {
    height: 300px
  }
}