/* ---------------------------------------------------------------------- */
/*  Settings -> Variables
/* ---------------------------------------------------------------------- */


:root {

    /* Colors */

    --main-bg-color: #ffce00;
    --secondary-bg-color: rgba(250, 250, 250, .87);

    --main-font-color: #5d5b5b;
    --secondary-font-color: rgba(5, 5, 1, .66);
    --tertiary-font-color: #999;

    --error-color: #bf1a1a;


    /* Typography */

    --main-font-family: 'Open Sans', sans-serif;
    --serif-font: 'Lobster', serif;

    --base-font-size: 15px;
    --smaller-font-size: .7rem; /* 11px */
    --small-font-size: .8rem; /* 12px */
    --big-font-size: 24px; 
    --bigger-font-size: 45px; 


    /* Box Model */

    --spacer: 36px;
    --spacer-2x: 72px;
    --spacer-2x-neg: -72px;
    --spacer-3x: 108px;
    --spacer-half: 18px;

 

}

@media all and (min-width: 1690px) {

    :root {
        --bigger-font-size: 4rem;
    }

}

@media all and (max-width: 767px) {

    :root {
        --bigger-font-size: 2rem;

        --spacer: 20px;
        --spacer-2x: 20px;
        --spacer-half: 10px;

        
    }

}

@media all and (max-width: 700px) {

    :root {
        --base-font-size: 12px;
        --big-font-size: 2rem;
    }

}

@media all and (max-width: 600px) {

    :root {
        --spacer-2x: 40px;
    }

}



/* ---------------------------------------------------------------------- */
/*  Generic –> Box Sizing
/* ---------------------------------------------------------------------- */

*, *:before, *:after {box-sizing: border-box;}


/* ---------------------------------------------------------------------- */
/*  Generic –> Shared
/* ---------------------------------------------------------------------- */

html, body {font-family: var(--main-font-family); font-size: var(--base-font-size); font-weight: 300; color: #5d5b5b; line-height: 1.7; letter-spacing: 1px; background: #fff}
body {margin: 0}

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

h1 {margin: 0; font-family: var(--serif-font); font-size: var(--bigger-font-size); font-weight: 300; line-height: 1;}
h2 {margin: 0 0 var(--spacer) 0; font-family: var(--serif-font); font-size: var(--big-font-size); font-weight: 300; line-height: 1;}
p+h2 {margin-top: var(--spacer-2x)}
h2 span, h2 a {font-family: var(--main-font-family);     font-size: 15px;
    text-decoration: underline;
    font-weight: 400;
    margin-left: 10px;}

h3 {margin:10px 0 0 0; font-family: var(--main-font-family); font-size: 22px; font-weight: 300; line-height: 1; color: #fff}

a {color: var(--main-font-color); text-decoration: none; transition: .6s;}
a:hover {opacity: .8; text-decoration: none;}

p a {text-decoration: underline;}
p:first-child {margin-top: 0;}
p:last-child {margin-bottom: 0;}

img {display: block; max-width: 100%;}

nav ul {margin: 0; padding: 0; list-style: none;}
main {display: flex; flex-flow: column;  justify-content: center; padding: 0;}
.wrapper {max-width: 65%; margin: 0 auto}


strong {font-weight: 600}
.smalltext {font-size:13px;}

@media all and (max-width: 800px) {
    .wrapper {width: 100%; max-width: 100%; padding: var(--spacer)}
}


/* ---------------------------------------------------------------------- */
/*  Elements –> Header
/* ---------------------------------------------------------------------- */

.header-main {padding: var(--spacer-2x);}
.site-logo {margin: 0 auto;}
.langs {position: absolute; top: 36px; right: 36px; z-index: 9999}
.langs a {color: #fff;}

@media all and (max-width: 800px) {
    a.reservas {font-weight: 400}
    .langs {top: 31px; right: 66px; font-weight: 400;}
    .header-main {padding: 30px var(--spacer);}
    .site-logo {width: 230px; margin: 0}

}


/* ---------------------------------------------------------------------- */
/*  Elements –> Navigation
/* ---------------------------------------------------------------------- */

a.reservas {
    position: absolute;
    left: var(--spacer); top:var(--spacer);
    border: 1px solid #fff;
    text-transform: uppercase;
    z-index: 999; color: #fff; padding: 14px;
    letter-spacing: 2px;
    font-size: 13px
}
a.reservas:after {
    content: '> OBSERVAÇÃO DE GOLFINHOS';
    position: absolute;
    width: 300px;
    left: 120px;
    opacity: 0;
    transition: all 1s;
}
a.reservas.en:after {
    content: '> DOLPHINS WATCHING';
}

a.reservas:hover:after {opacity: 1}

a.reservas:hover {background-color: rgba(255,255,255,0.2);}


nav {position:absolute; left:36px; top: 100px; border-left: 1px solid #fff; padding-left: 10px; 
top: 50%; transform: translateY(-50%); z-index: 999}
nav ul {list-style-type: none; margin:0; padding: 0; }
nav a {color: #fff; text-decoration: none; }
nav a:hover {color: #333}
nav ul li {margin: 10px 0px; position: relative;}
nav>ul>li {margin: 20px 0px}
nav ul ul li {font-weight: 300; opacity: 0.8 }
nav>ul>li:after {content: ''; border-bottom: 2px solid #fff; position: absolute; width: 5px; left: 0px; bottom: -10px}
nav>ul>li:last-of-type:after{border-bottom: 0px}
nav>ul>li:first-of-type {margin-top: 5px}
nav>ul>li:last-of-type {margin-bottom: 5px}


.hamburger {display: none; width: 40px; height: 40px; padding: 10px;  border-radius: 100%; position: fixed; top: 62px; left: calc(var(--site-margin) / 2 - 20px); z-index: 3;}
.hamburger:focus {outline: 0;}
.hamburger-box {width: 20px; height: 16px;}
.hamburger-inner {margin-top: -1px;}
.hamburger-inner, .hamburger-inner::after, .hamburger-inner::before {width: 20px; height: 1px; background-color: var(--main-font-color);}
.hamburger-inner::before {top: -5px;}
.hamburger-inner::after {bottom: -5px;}

a.playvideo {position: relative; top: -54px; left: 120px; border-bottom: 1px solid #fff; color: #fff;}


@media all and (max-width: 1024px) {

    a.reservas:after {display: none;}
    main.home .site-logo img {width: 50vw}

    .nav-main {height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; background: #fff; top: 0; bottom: 0; left: 0; transform: initial; opacity: 0; z-index: -100; transition: opacity .6s;}
    .nav-is-open .nav-main {opacity: 1; z-index: 2;}
    .nav-main ul {display: block; justify-content: center; margin-bottom: 10px; writing-mode: initial; transform: initial; text-align: center;}

    nav a {color: #000}
    .hamburger {display: block; position: absolute; top: 30px; right: 20px; z-index: 9999; top:var(--spacer);}
    .nav-main .hamburger {display: none;}

}




/* ---------------------------------------------------------------------- */
/*  Elements –> Home
/* ---------------------------------------------------------------------- */

main.home {margin: 0; padding: 0}
main.home video {width: 100%; height: 100vh; object-fit: cover;}
main.home .site-logo {position: absolute; top: 0; left: 0; width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center;}
main.home .site-logo img {width: 30vw}

@media all and (max-width: 1024px) {

    main.home .site-logo img {width: 50vw}

}

/* ---------------------------------------------------------------------- */
/*  Elements –> pages
/* ---------------------------------------------------------------------- */

.programas-page.is-index-page .nav-main, .programas-page.is-index-page .reservas {display: none;}
.meioenvolvente-page.is-index-page .nav-main, .meioenvolvente-page.is-index-page .reservas {display: none;}
.embarcacoes-page.is-index-page .nav-main, .embarcacoes-page.is-index-page .reservas {display: none;}
.publicacoes-page.is-index-page .nav-main, .publicacoes-page.is-index-page .reservas {display: none;}

.is-contacts-page .nav-main, .is-contacts-page.is-index-page .reservas {display: none;}


main.programas h1, main.meioenvolvente h1, main.embarcacoes h1,  main.publicacoes h1, .is-contacts-page h1  {margin:var(--spacer-2x) 0;}
.item {position: relative; margin-bottom: var(--spacer)}
.item .overlay {position: absolute; width: 100%; height: 100%; top: 0; left: 0; display: flex;  align-items: flex-end; padding: var(--spacer)}
.item .overlay h2 {margin: 0; color: #fff; text-transform: lowercase;}
.item img {width: 100%;}

.slideshow {height: 100vh; margin-bottom: var(--spacer-2x)}
.slideshow img {height: 100vh; width: 100%; object-fit: cover; object-position: center;}
.slideshow .overlay {position: absolute; right:0; top:var(--spacer-2x); z-index: 9999; text-align: right; width: 65%; left: 50%; transform: translateX(-50%)}
.slideshow .overlay h1 {color:#fff;}
.submenu-overlay {position: absolute; left: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.3); z-index: 9999; width: 100%; padding: 20px 10px; color: #fff;}
.submenu-overlay .submenu-nav {display: flex; list-style: none; padding: 0; position: relative;}
.submenu-overlay .submenu-nav li {margin: 0 5px;}
.submenu-overlay .submenu-nav li:not(:last-of-type):after {content: '|';  margin-left: 10px}
.submenu-overlay .submenu-nav li:first-of-type {margin-left: 0}
.submenu-overlay  a {color: #fff; }
.submenu-overlay .home {position: absolute; left: var(--spacer)}


.is-contacts-page img {margin-bottom: var(--spacer-2x)}

.grid {display: grid; grid-template-columns: 1fr 1fr; grid-gap: var(--spacer); }
.grid img {width: 100%;}
.grid h2 {font-family: var(--main-font-family); font-style: italic; margin-top: var(--spacer-2x)}
.text img {width: 100%!important; height: auto!important}
.text a {color: #293d75!important}
.text h3 {color: #000;}
video {width: 100%; outline: 0}

.videos h2 {margin-top: 60px}
.videos a {font-weight: 400;}

form {margin-bottom: 60px;}
form input[type="text"], form input[type="email"] {width: 100%; padding: 8px 12px; font-size: var(--base-font-size); font-weight: 300;
    color: #5d5b5b; border: 1px solid #ddd;  margin-top: 4px;}

form input[type="date"] {font-size: var(--base-font-size); font-weight: 300;
    color: #5d5b5b;  padding: 8px 12px; border: 1px solid #ddd; margin-top: 4px;}  

form input[type="radio"] {margin-right: 5px;}

form button {border: 1px solid #ddd;  padding: 12px 18px; background: #fff; font-size: var(--base-font-size); font-weight: 300;
    color: #5d5b5b; cursor: pointer; transition: all 0.6s; text-transform: uppercase; letter-spacing: 2px; font-family: var(--main-font-family)}

form button:hover {background:rgba(0,0,0,0.2); color: #000}

form label{display: block;}
form label.error {color: #eb4747}
form p {margin-bottom: 24px;}


@media all and (max-width: 1024px) {
    .slideshow {z-index: 1}
    .slideshow, .slideshow img {height: 50vh}
    .slideshow .overlay {width: 100%; height: 100%; left: 0; top:0; transform: none; padding: var(--spacer); text-align: left; display: flex;  justify-content: flex-end; flex-flow: column;}
    .text {padding: 0 var(--spacer) var(--spacer) var(--spacer)}
    .submenu-overlay {display: none;}
    .grid {grid-template-columns: 1fr}
    .grid h2 {margin-top: 10px;}
    main.programas h1, main.meioenvolvente h1, main.embarcacoes h1, main.publicacoes h1, .is-contacts-page h1{margin-top: var(--spacer)}
    .publicacoes-page.is-index-page .nav-main, .is-contacts-page .nav-main, .is-contacts-page.is-index-page .reservas, .programas-page.is-index-page .nav-main{display: flex;}

    .is-contacts-page a.reservas {display: none;}
    .is-contacts-page .text {padding:0;}

.meioenvolvente-page.is-index-page .nav-main, .meioenvolvente-page.is-index-page .reservas {display: flex;}

}
 
/* ---------------------------------------------------------------------- */
/*  Elements –> Footer
/* ---------------------------------------------------------------------- */

footer {width: 100%; padding: var(--spacer) 0; border-top: 1px solid #ccc; margin-top: var(--spacer-2x); font-size: 13px}
footer .wrapper {display: flex;}
footer ul {list-style-type: none; padding: 0; margin:0; text-transform: lowercase; flex-shrink: 0;}
footer ul li:first-of-type a {color: #000; font-size: 14px; font-weight: 400}
footer .logo  {position: absolute; left: 36px}
footer .logo img {width: 80px}
footer .logo, footer ul {margin-right: 30px}
.welcome-page footer {display: none;}

footer .social {display: flex;}
footer .social a {
    width: 30px;
    height: 30px;
    display: inline-block;
    border-radius: 30px;
    border: 1px solid #ccc;
    display: flex; justify-content: center; align-items: center;
    margin-right: 4px;

}
footer .social i {font-style: 18px}

@media all and (max-width: 1024px) {

    footer {display: none;}

}





/* ---------------------------------------------------------------------- */
/*  Pages –> Single Page
/* ---------------------------------------------------------------------- */

.pages-page .main-grid .aside {position: relative; left: calc(var(--site-margin) / 2 * -1);}
.pages-page .aside .img-block {padding-bottom: 100%;}
.pages-page .aside.map {margin-left: calc(var(--site-margin) / 2 * -1);}

@media all and (max-width: 700px) {

    .pages-page .main-grid .aside {left: 0;}
    .pages-page .aside.map {height: 400px; margin-left: 0;}

}