/*
Theme Name: AG Landing Page
Theme URI: //ajudagarden.pt/
Author: Vivyane Fernando
Author URI: vivyanefernando.info
*/

html {scroll-behavior: smooth;}

/* INTRO ANIMATION */
.animation-wrapper {position: fixed;width:100%;height: 100%;text-align: center; background-color: #EAE8E2; z-index: 999;}
.animation {position: relative;width:100%;height: 100%;text-align: center;}
#animation_container {padding: 0;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
#canvas {width: 100%;height: 100%;}

    .animation-wrapper, .animation, #animation_container, #canvas{
    animation:fadeOut 1s 1;
    -webkit-animation:fadeOut 1s 1;
    animation-fill-mode: forwards;
    animation-delay:9s;
    -webkit-animation-delay:9s;
    -webkit-animation-fill-mode: forwards;
    } 
    @-webkit-keyframes fadeOut{
        0%   {opacity: 1;}
        50%   {opacity: 0.5;}
        100% {opacity: 0;display: none; z-index: -1;background-color: rgba(255,255,255,0);}
    }

/* GENERAL */
body,html {height: 100%;margin: 0; -webkit-font-smoothing: antialiased; background-color:rgb(0, 104, 94);}
* {margin:0;padding: 0;box-sizing: border-box;}
ul, ul li {list-style: none; list-style-type: none;}
.visuallyhidden {display: none; visibility:hidden;opacity: 0;}
.visuallyvisible {display:block; visibility:visible;opacity: 1;}
.clearfix {width: 100%;clear: both;}

/*///////////////////
////    TYPE      ///
///////////////////*/

body, form, input, textarea {font-family: 'Montserrat', sans-serif; -webkit-font-smoothing: antialiased; color:white; letter-spacing: 0.1em;}
h1, h2, h3, h4, h5, input[type='submit'], p.status {font-family: 'Playfair Display', serif; -webkit-font-smoothing: antialiased; color: white; font-weight: normal;} h2 {letter-spacing: 0.01em;}
.view-gallery {text-transform:uppercase;}
address {font-style: normal; letter-spacing: 0.1em;} .privacy-notice {letter-spacing: 0.03em;}
input[type='submit'] {letter-spacing: 0.03em;}

/* Fix for address on 2 lines only */
@media screen and (max-width: 467px) {
    address {font-size: 8.5px; line-height: 14.5px;}
}
@media screen and (min-width: 468px) {
    address {font-size: calc(12px + 2 * ((100vw - 320px) /2240)); line-height: calc(18px + 2 * ((100vw - 320px) / 2240));}
}

/* Mobile 320px-1023px */
@media screen and (min-width: 320px) {
    body, form, input, textarea, .tipologies-wrapper, .error-messages {font-size: 16px; line-height: 24px;}
    p {margin-top: 0;margin-left: 0;margin-right: 0;margin-bottom: 24px;}
    h2 {font-size: calc(36px + 12 * ((100vw - 320px) / 704)); line-height: calc(42px + 18 * ((100vw - 320px) / 704));}
    h3 {font-size: 28px; line-height: 34px;}
    input[type='submit'] {font-size: 48px;}
    p.status {font-size: 24px; line-height: 29px;}
    nav.nav-lang {font-size: 12px;}
    .view-gallery {font-size: 12px;}
    footer {font-size: 12px}
    .privacy-notice {font-size: 12px; line-height: 18px;}
    .privacy-notice .p {margin-top: 0;margin-left: 0;margin-right: 0;margin-bottom: 12px;}
}

/* Laptop 1172px-1398px */
@media screen and (min-width: 1172px) {
    body, form, input, textarea, .tipologies-wrapper, .error-messages {font-size: 13px; line-height: 21px;}
    .contact.desktop {font-size: 14px; line-height: 22px;}
    p {margin-top: 0;margin-left: 0;margin-right: 0;margin-bottom: 22px;}
    h2 {font-size: calc(40px + 8 * ((100vw - 1172px) / 227)); line-height: calc(51px + 9 * ((100vw - 1172px) / 227));}
    h3 {font-size: 24px; line-height: 29px;}
    input[type='submit'] {font-size: 40px;}
    p.status {font-size: 24px; line-height: 29px;}
    nav.nav-lang {font-size: 12px;}
    .view-gallery {font-size: 12px;}
    footer {font-size: 10px}
    .privacy-notice {font-size: calc(10px + 2 * ((100vw - 1172px) / 227)); line-height: calc(15px + 3 * ((100vw - 1172px) / 227));}
    .privacy-notice p {margin-top: 0;margin-left: 0;margin-right: 0;margin-bottom:calc(10px + 2 * ((100vw - 1172px) / 227));}
    #result {}
}

/* Desktop 1399px-2560px */
@media screen and (min-width: 1399px) {
    body, form, input, textarea, .tipologies-wrapper, .error-messages {font-size: 16px; line-height: 24px;}
    p {margin: 0 0 24px 0;}
    h2 {font-size: 48px; line-height: 60px;}
    h3 {font-size: 28px; line-height: 34px;}
    address {font-size: 14px; line-height:20px;}
    input[type='submit'] {font-size: 48px;}
    p.status {font-size: 24px; line-height: 29px;}
    .privacy-notice {font-size: 12px; line-height: 18px;}
    .privacy-notice p {margin-top: 0;margin-left: 0;margin-right: 0;margin-bottom: 12px;}
}

/*///////////////////
////    LINKS     ///
///////////////////*/

/* GENERAL LINKS */
a {text-decoration: none; color: white; cursor: pointer;-webkit-font-smoothing: antialiased; border-bottom: 0; transition: border-bottom 0.3 ease;}
a:hover, a:active {text-decoration: none; color: white; cursor: pointer; -webkit-font-smoothing: antialiased; border-bottom: 1px solid white;}
/* LANG */
a.selected {background-color:rgba(25, 119, 110, 0); color:white;transition: background-color 0.3s ease; border: 0;}
a.selected:hover, a.selected:active {background-color: rgba(25, 119, 110, 0.6); border: 0;}
a.not-selected {background-color: #EAE8E2; color:#00685E; border: 0;}
/* VIEW GALLERY BUTTON */
.view-gallery {background-color:rgba(255,255,255,0); color:white;transition: background-color 0.3s ease;}
.view-gallery:hover, .view-gallery:active {background-color: white;color:rgb(0, 104, 94);}
/* SUBMIT */
input[type='submit'] {cursor: pointer; transition: color 0.3s ease; color: rgba(255, 255, 255, 1)}
input[type='submit']:hover, input[type='submit']:active {cursor: pointer; color: rgba(255, 255, 255, 0.5)}


/*////////////////////////
////    STRUCTURE      ///
////////////////////////*/

main, header, nav-top {width: 100%; clear: both;}

/*//////////////////////
////    NAV TOP      ///
//////////////////////*/

.nav-top {position: fixed; top: 0; left: 0; width: 100%; height: 64px; z-index: 100;}
address {width: calc(100% - 128px); height: 64px; float: left; background-color: rgb(0, 94, 85);position: relative;padding-right: 43px; padding-left:43px;} 
address div {position:absolute;top: 50%;transform: translateY(-50%);}
nav.nav-lang {width: 128px; float: right;}
nav.nav-lang a {float: left; width: 64px; height: 64px;text-align: center; padding-top: 20px;}


/*///////////////////
////    HEADER    ///
///////////////////*/

header {width: 100%; clear: both; float: none;padding-top: 64px;}
header .logo {background-color:rgb(0, 104, 94); width: 100%; height: 300px; z-index: 99;transition: padding 0.3s ease;}
/* logo on scroll */ header .logo.scroll {position: fixed; top: 0;left: 0;}
.logo-right.logo-fade {
    animation:fadeOut 0.3s 1;
    -webkit-animation:fadeOut 0.3s 1;
    animation-fill-mode: forwards;
    animation-delay:0;
    -webkit-animation-delay:0;
    -webkit-animation-fill-mode: forwards;
    } 
    
.logo .tableCell {float: left;}

/* Mobile */
@media screen and (min-width: 320px) {
    header .logo {padding-top: 95px; padding-left:43px;transition: all 0.3s ease;}
    /* logo on scroll */ header .logo.scroll {padding-top:100px; height: 250px;}
    img.logo-left {width: 64px; height: 97px;}
    img.logo-right {width:146px; height:97px; padding-left:27px;}
}

/* Laptop */
@media screen and (min-width: 1024px) {
    header .logo {padding-top:145px;padding-left:9.857142857142857%}
    /* logo on scroll */ header .logo.scroll {padding-top: 128px;padding-left:9.857142857142857%; height:330px;}
    img.logo-left {width:75px; height: 112px;}
    img.logo-right {width:163px; height:112px; padding-left:20px;}
}

/* Desktop */
@media screen and (min-width: 1399px) {
    header .logo {padding-top:145px;padding-left:9.857142857142857%}
    /* logo on scroll */ header .logo.scroll {padding-top: 128px;padding-left:9.857142857142857%; height:330px;}
    img.logo-left {width:92px; height: 134px;}
    img.logo-right {width:195px; height:134px; padding-left:20px;}
}

/*///////////////////
////  MAIN        ///
///////////////////*/
main {width: 100%; clear: both;}

/* Mobile */
@media screen and (min-width: 320px) {
    main {padding-left:43px;padding-right: 43px;}
    .leftWrapper, .rightWrapper {width: 100%; clear: both;float: none;padding-right: 0;}
    .contact.mobile, .view-gallery.mobile {display: block;}
    .contact.desktop, .view-gallery.desktop {display: none;}
    h2.scroll {padding-top: 300px;}
    .contact.mobile h3 {padding-top: 100px; width: 100%; padding-bottom: 30px;}
    .view-gallery.mobile {margin-top: 56px;width: 212px; height: 45px; text-align: center; border: 2px solid white;cursor: pointer;padding-top:9px;margin-bottom: 100px;}
    footer {width: 100%; clear: both; height: auto;margin-top: 100px;}
    .mexto {padding: 20px 0 35px 0;}
}

@media screen and (min-width: 1024px) {
    main {padding-left:9.857142857142857%;padding-right:9.857142857142857%;padding-top: 45px; width: 100%;}
    main .table {display: table; vertical-align: top;text-align: left;width: 100%;height: 100%;} main .tableRow {display: table-row;vertical-align: top;text-align: left;width: 100%;} main .tableCell {display: table-cell;vertical-align: top;text-align: left;}
    #leftWrapper {width:49.214285714285714%;}
    #rightWrapper {width:15.142857142857143%; padding-left:17.142857142857143%;}
    .contact.mobile, .view-gallery.mobile {display: none;}
    .contact.desktop, .view-gallery.desktop {display: block;}
    .contact.desktop h3 {width: 100%; padding-bottom: 30px;}
    .view-gallery.desktop {margin-top: 90px;width:100%; height: 45px; text-align: center; border: 2px solid white;cursor: pointer;padding-top:9px;margin-bottom:0;}
    .contact.desktop.scroll {padding-top: 300px;height: 50%;}
    .tableCell.footer {vertical-align: bottom;}
    .mexto {padding: 20px 0 145px 0;}
}

/* Desktop */
@media screen and (min-width: 1399px) {
}

/*///////////////////
////    FORM      ///
///////////////////*/


/* form general */
form {position: relative;border:0; border-radius:0;-moz-border-radius:0;-webkit-border-radius:0;-webkit-appearance: none;-moz-appearance: none;appearance: none;overflow: hidden; padding:0;}
input, textarea, textarea {outline: 0;border:0; cursor: text;color:white; text-align: left; border-radius: 0;-moz-border-radius:0;-webkit-border-radius:0;-webkit-appearance: none;-moz-appearance: none;appearance: none;overflow: hidden; padding: 0 10px 0 10px;} textarea {padding-top: 25px;}
input[type='text'], input[type='tel'], input[type='submit'], label[for='services'], textarea[name='message'], .tipologies-wrapper {width: 100%; clear: both; overflow: visible;}
input[name='name'] {margin-top:0;}
input[name='name'], input[name='email'], input[name='country'], input[name='surname'], input[name='telephone'], .tipologies-wrapper {background-color:rgba(255, 255, 255, 0);border-bottom: 2px solid rgb(76, 149, 142);} textarea[name='message'] {background-color:rgba(255, 255, 255, 0);}
input[type='submit'] {background-color: rgba(255,255,255,0);padding-left: 0;}

/* tiplogies section */
.tipologies-wrapper {padding: 25px 10px 25px 10px; overflow: auto;}
.tipologies-wrapper label {padding-bottom: 15px;}
input[type='checkbox'] {outline: 0;border:0; cursor: text;color:white; text-align: left; border-radius: 25px;-moz-border-radius:25px;-webkit-border-radius:25px;-webkit-appearance: none;-moz-appearance: none;appearance: none;overflow: hidden; padding: 0 0 0 10px;}
.round{position:relative}.round label{background-color:rgba(255,255,255,0);border:2px solid white;border-radius:50%;cursor:pointer;height:21px;left:0;position:absolute;top:0;width:21px}.round label:after{border:2px solid white;border-top:none;border-right:none;content:"";height:4px;left:3px;opacity:0;position:absolute;top:4px;transform:rotate(-45deg);width:8px}.round input[type=checkbox]{visibility:hidden}.round input[type=checkbox]:checked+label{background-color:rgba(255,255,255,0);border-color:white}.round input[type=checkbox]:checked+label:after{opacity:1}.round,
label[for='services'],.tipology{float:left}.tipology{margin-left:15px}
::-webkit-input-placeholder{color:white;padding-top:0}::-moz-placeholder{color:white;opacity:1;padding-top:0}:-ms-input-placeholder{color:white;opacity:1;padding-top:0}:-moz-placeholder{color:white;opacity:1;padding-top:0}
.tipology {margin-right: 40px;}

.pp {padding-left: 40px;}

.error-messages {position: absolute; top:23px; width: 100%; z-index: 98;}
.form-error {background-color: rgb(0, 84,76); color: white; border-bottom: 2px solid rgb(76, 149, 142); padding:20px 10px 20px 10px; cursor: pointer;}

.error-messages{
    animation:fadeOutError 3s 1;
    -webkit-animation:fadeOutError 3s 1;
    animation-fill-mode: forwards;
    animation-delay:1s;
    -webkit-animation-delay:1s;
    -webkit-animation-fill-mode: forwards;
    } 
    @-webkit-keyframes fadeOutError{
        0%   {opacity: 1;}
        70%  {opacity: 1;}
        100% {opacity: 0;display: none; z-index: -1;}
    }


.privacy-notice {padding-top: 40px;}
.resultBorder {width: 100%; height: 4px; background: rgb(255, 255, 255);margin-top: 40px;}

/* Mobile */

@media screen and (max-width: 487px) {
    .tip-g-top, .tip-g-bottom {width: 100%; clear: both;} .tip-g-bottom {padding-top: 20px;}
    
}
@media screen and (min-width: 320px) {
    input[type='text'], input[type='tel'], .form-error {min-height: calc(60px + 5 * ((100vw - 320px) / 1079));}
    .tipologies-wrapper {min-height: calc(100px + 15 * ((100vw - 320px) / 1079));}
    textarea[name='message'] {min-height: calc(126px + 10 * ((100vw - 320px) / 1079));}
    input[type='submit'], p.status {text-align: left;float: none; width: 100%; clear: both;}
    input[type='submit'] {min-height: calc(75px + 20 * ((100vw - 320px) / 1079));}
    .tipology {padding-right: 5px;}
    form {padding-bottom: 35px;}
}

/* Laptop */
@media screen and (min-width: 1024px) {
    input[type='submit'], p.status {text-align: left; float: left;} p.status {padding-top: 28px;}
    input[type='submit'] {width: 30%; clear: left;}
    p.status {width: 70%; clear: right;}
    .tipology {padding-right: 35px;}
    form {padding-bottom: 125px;}
}
/* Desktop */
@media screen and (min-width: 1800px) {
    input[type='text'], input[type='tel'], .form-error {min-height: 65px;} 
    .tipologies-wrapper {min-height: 115px;}
    textarea[name='message'] {min-height: 136px;}
    input[type='submit'] {min-height: 95px;}
}

/*//////////////////////
///  Slideshow    //////
//////////////////////*/

.slideShow {
    animation:fadeIn 0.6s 1;
    -webkit-animation:fadeIn 0.6s 1 ease;
    animation-fill-mode: forwards;
    animation-delay:0;
    -webkit-animation-delay:0;
    -webkit-animation-fill-mode: forwards;
    } 
    @-webkit-keyframes fadeIn{
        0%   {opacity: 0;}
        50%   {opacity: 0.5;}
        100% {opacity: 1;display:block; z-index: 999;}
    }


.slideShow {display: none;}
.slideShow {width: 100%;height: 100vh; background: white; position: fixed; top: 0; left: 0; overflow: hidden; z-index: 999;}
.slideShow .carousel .carousel-cell {width: 100%;height:100vh;position: relative; top: 0; left: 0;z-index: 999; margin:0;}

/* ---- previous/next buttons ---- */
.slideShow .flickity-prev-next-button.previous {cursor:pointer;background: rgba(255, 255, 255, 0); border:0; border-radius: 0; box-shadow:none;z-index: 999999;}.slideShow .flickity-prev-next-button.next {cursor:pointer;background: rgba(255, 255, 255, 0); border:0; border-radius: 0; box-shadow:none;z-index: 999999;}.slideShow .flickity-prev-next-button.previous .arrow, .slideShow .flickity-prev-next-button.next .arrow {fill: rgba(255, 255, 255, 0);}.slideShow .flickity-prev-next-button.previous:hover, .slideShow .flickity-prev-next-button.next:hover {background: rgba(255, 255, 255, 0);}

/* Mobile */ 
@media screen and (max-width: 1023px) { 
    .full-width {position:absolute;top:0;left:0;width:100%;height:100vh;z-index:0;overflow:hidden;}
    .full-width .background-image {background-size:cover;background-position:center;background-repeat:no-repeat;position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;display: block}
    /* Prev/Next Arrows */
    .slideShow .flickity-prev-next-button.previous {display: block;margin-left: 16px;top:calc(100vh - 55px);}
    .slideShow .flickity-prev-next-button.next {display: block;margin-right: 16px;top:calc(100vh - 55px);}
    .slideShow .prev-img-wrapper, .slideShow .next-img-wrapper {display: block; position: absolute; bottom: 23px; width: 55px;height: 55px;border-radius:none; cursor:pointer;-webkit-transform:none;transform:none;border:0;z-index: 0; background-size: 41px 41px;background-repeat: no-repeat;}
    .slideShow .prev-img-wrapper {left: 23px;background-image: url(images/slideshow_arrow_left_white.svg);background-position: 0 50%; background-size: 41px 41px;}
    .slideShow .next-img-wrapper {right: 23px;background-image: url(images/slideshow_arrow_right_white.svg); background-position:100% 50%; background-size: 41px 41px;}
    /* Close Button */
    .slideShow .close-slideshow-wrapper {display: block; position:absolute; right: 23px; top:23px; border:0;z-index: 9999999;width: 41px;height: 41px;border-radius:none; cursor:pointer;background-image: url(images/close_white.svg);background-position: 100% 100%; background-size: 41px 41px;}
}

/* Laptop */ 
@media screen and (min-width: 1024px) { 
    .full-width {position:absolute;top:33px;left:33px;width:calc(100% - 66px);height:calc(100vh - 66px);z-index:0;overflow:hidden;}
    .full-width .background-image {background-size:cover;background-position:center;background-repeat:no-repeat;position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;display: block}
    /* Prev/Next Arrows */
    .slideShow .flickity-prev-next-button.previous {display: block; margin-left: 72px;}
    .slideShow .flickity-prev-next-button.next {display: block;margin-right: 72px;}
    .slideShow .prev-img-wrapper, .slideShow .next-img-wrapper {display: block; position: absolute;top: 50%; width: 55px;height: 55px;border-radius:none; cursor:pointer;-webkit-transform: translateY(-50%);transform: translateY(-50%);border:0;z-index: 0; background-size: 41px 41px;background-repeat: no-repeat;}
    .slideShow .prev-img-wrapper {left: 80px;background-image: url(images/slideshow_arrow_left_white.svg);background-position: 0 50%; background-size: 41px 41px;}
    .slideShow .next-img-wrapper {right: 80px;background-image: url(images/slideshow_arrow_right_white.svg); background-position:100% 50%; background-size: 41px 41px;}
    /* Close Button */
    .slideShow .close-slideshow-wrapper {display: block; position:absolute; right: 80px; top: 80px; border:0;z-index: 9999999;width: 41px;height: 41px;border-radius:none; cursor:pointer;background-image: url(images/close_white.svg);background-position: 100% 100%; background-size: 41px 41px;}
}