/* -------------------------------- 
SECTIONS
-------------------------------- */
:focus:not(:focus-visible) {
  outline-width: 2px;
  outline-style: solid;
  outline-color: hsla(var(--brand-third),1);
  outline-offset: 2px;
}

/* Show focus styles on keyboard focus. */
:focus-visible,
input[type="radio"]:checked:active + span::before,
input[type="checkbox"]:checked:active + span::before,
input[type="radio"]:focus + span::before,
input[type="checkbox"]:focus + span::before {
  outline-width: 2px;
  outline-style: solid;
  outline-color: hsla(var(--brand-third),1);
  outline-offset: 2px;
}


[class^="sec_"]              { padding:var(--space-xxl) 0; background:transparent; position: relative;  }

.sec_transparent             { background: transparent; overflow: hidden; } 
.sec_white                   { background: hsla(var(--light),1); }
.sec_grey                    { background: hsla(var(--dark),.07); } 
.sec_grey-brand              { background: hsla(var(--brand),.1); } 
.sec_primary                 { background: hsla(var(--brand),1);} 
.sec_secondary               { background: hsla(var(--brand-second),1);} 


[class^="sec_"] .row,
[class^="sec_"] [class^="block_"] { position: relative; }


@media only screen and (max-width:47.9375em) {

[class^="sec_"] { padding:var(--space-xxl) 0; }

}
 
 

/* -------------------------------- 
BUTTONS
-------------------------------- */


[class*="button_"],
[type=button],
[type=reset],
[type=submit],
button {
    padding: var(--space-m) var(--space-l);
    border-radius: 30px;
    border:none;
    text-align: center;
    color:  hsla(var(--light),.5);
    background: hsla(var(--brand-third),1);
    font-size: var(--text-s);
    font-weight: 600;
    text-align: center;
    transform: scale(1);
    /*margin: var(--space-s) 0;*/
    display: inline-flex;
    position: relative;
    box-shadow: var(--shadow30);
    text-decoration: none;
    line-height: var(--body-line-height);
}


[class*="button_"] + [class*="button_"],
button + button {
    margin-left: var(--space-xxxs);
}

[class*="button_"]:hover,
[type=button]:hover,
[type=reset]:hover,
[type=submit]:hover,
button:hover {
  box-shadow: var(--shadow10)
}

[class*="button_"]:active,
[type=button]:active,
[type=reset]:active,
[type=submit]:active,
button:active {
    transform: scale(0.98);
}

input[disabled],
button[disabled],
input[disabled]:hover,
button[disabled]:hover {
    opacity: 0.4;
    cursor: not-allowed;
}

 

.button_primary               { color:hsl(var(--light)); background:hsl(var(--brand)); }
.button_primary:hover         { color:hsl(var(--light)); background:hsl(var(--brand-dark)); }

.button_secondary             { color:hsl(var(--light)); background:hsl(var(--brand-second));  }
.button_secondary:hover       { color:hsl(var(--light)); background:hsl(var(--brand-second-dark)); }

.button_third                 { color:hsl(var(--light)); background:hsl(var(--brand-third));  }
.button_third:hover           { color:hsl(var(--light)); background:hsl(var(--brand-third-dark)); }

.button_light--line            { color:hsl(var(--light)); background:transparent; border:2px solid hsl(var(--light)); box-shadow: none; }
.button_light--line:hover      { color:hsl(var(--brand)); background:hsl(var(--light)); }

.button_primary--line          { color:hsl(var(--brand)); background:transparent; border:2px solid hsl(var(--brand)); box-shadow: none; }
.button_primary--line:hover    { color:hsl(var(--light)); background:hsl(var(--brand)); }

.button_secondary--line        { color:hsl(var(--brand-second)); background:transparent; border:2px solid hsl(var(--brand-second)); box-shadow: none;  }
.button_secondary--line:hover  { color:hsl(var(--light)); background:hsl(var(--brand-second)); } 
 
.b-big   { font-size: var(--text-m);  padding: var(--space-m) var(--space-l);  }
.b-small { font-size: var(--text-xs);  padding: var(--space-s) var(--space-m); }

.b-full  { display:block; width: 100%; justify-content: center; }

.icon-button {
display: inline-flex;
align-items: center;
}
.icon-button > i {
margin-left: 4px;
}

[class*="button_"] small,
[class*="button_"] h3 { color:#fff; display: block; margin:0; padding:0; }


@media only screen and (max-width:31.250em) { 
 
 
[class*="button_"] + [class*="button_"],
button + button {
    margin-left: 0;
}

.full-mobile  { display: flex; width: 100%; justify-content: center; margin-left: 0!important; padding: var(--space-l); }

}



/* -------------------------------- 
FORMS & INPUTS
-------------------------------- */

 

label {
color:hsla(var(--dark),.6);
font-size: var(--text-xs);
/*font-style: italic;*/
display: block;
margin:0 0 var(--space-xs) 0;
}


input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=color]):not([type=button]):not([type=reset]),
select,
textarea,
textarea[type=text] {
font-family: inherit;
color:hsla(var(--dark),1);
padding:var(--space-m); 
border:none!important;
border-radius: 12px;
box-shadow: inset 0 0 0 1px hsla(var(--dark),.3);
-webkit-box-shadow: inset 0 0 0 1px hsla(var(--dark),.3);
font-size: var(--text-s);
transition: all 0.2s ease;
display: block;
width: 100%;
margin:0 0 var(--space-m);
-webkit-appearance:none;
}

input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=color]):not([type=button]):not([type=reset]):hover,
select:hover,
textarea:hover,
textarea[type=text]:hover {
box-shadow: inset 0 0 0 1px hsla(var(--brand-third),1);
 
}

/*input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=color]):not([type=button]):not([type=reset]):focus,
select:focus,
textarea:focus,
textarea[type=text]:focus {
outline: none;
box-shadow: inset 0 0 0 2px hsla(var(--brand-third),1);
 
 
}*/

select {
-webkit-appearance: none;
background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/9674/chevron-down.svg');
background-size: 16px;
background-position: calc(100% - 20px) center;
background-repeat: no-repeat;
background-color: #fff;
}

.mail-response-good,
.mail-response-bad {
  padding: var(--space-m)!important;
  font-size: var(--text-xs);
  font-weight: 600;
  color: hsla(var(--brand-second),1);
  background:hsla(var(--dark),.03);
  margin: 0 0 var(--space-l);
  text-align: center;
}

.mail-response-bad { color: #f00 } 

.ocultar.esconde  {
  display:none;
} 
 
  
 
/* -------------------------------- 

MODALS

-------------------------------- */
.data_modal {
  position: fixed;
  left: 0;
  top: 0;
  padding: var(--space-l);
  height: 100%;
  width: 100%;

  background-color: hsla(var(--brand),.9);
  display: flex;
  justify-content: center;
  opacity: 0;
  z-index: 9999;
  visibility: hidden;

  min-width: 100%;
  transition: opacity 0.3s 0s, visibility 0s 0.3s;
}

.data_modal.is-visible {
  opacity: 1;
  visibility: visible;
  overflow-y: scroll;
  transition: opacity 0.3s 0s, visibility 0s 0s;
  margin: 0;
}

.data_modal--container {
 
  background-color: #fff;
  position: relative;
  width: min(800px, 100%);
  /*max-width: 800px;*/
  margin: auto;
  /*padding: var(--space-xl) 0;*/
  border-radius: 12px;
  box-shadow: var(--shadow30);
  transition:all 0.3s ease-in-out;
  transform: translateY(80px);
  overflow: hidden;

}

 
.data_modal--container img     { display: block; margin: 0 auto var(--space-m); max-width: 300px; } 

.data_modal--container [class*="button_"]       { font-family: var(--font-primary); }
.data_modal--container [class*="button_"] small { font-family: var(--font-secondary); font-weight:300; color:#fff; }

.data_modal--container .row        { max-width: 90%; }
/*.data_modal--container .row + .row { margin:0 auto; }*/

.sec_modal-grey     { padding: var(--space-l) 0; background:#f2f2f2; }
.sec_modal-white    { padding: var(--space-l) 0; background:#fff; }

.sec_modal-privacy  { border-radius: 12px; padding: var(--space-xl) 0; background:#fff; }
.privacy p          { font-size: var(--text-s); }


.data_modal--close             { 
  position:absolute; 
  top:0; 
  right:0; 
  padding:var(--space-m);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z' fill='rgba(52,72,94,1)'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px;
  opacity: .6;
  z-index: 3;
  width: 30px;
  height: 30px;
} 

.data_modal--close:hover   { opacity:1; }

.is-visible .data_modal--container {
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
} 
 
 
@media only screen and (max-width:840px) {

.data_modal--container img  { display: block; margin: 0 auto var(--space-m); max-width: 300px; } 

}


@media only screen and (max-width:540px) { 

.data_modal             { padding:0; }
.data_modal--container  { border-radius: 0; } 

}

 



/* -------------------------------- 
PATTERNS
-------------------------------- */

.pattern-color:before,
.pattern-green:before,
.pattern-blue:before,
.pattern-dark:before,
.pattern-light:before,
.pattern-white:before {
  content:'';
  background:url(../imgs/dots-rectangle-big.png);
  width:300px;
  height:300px;
  display:block;
}

.pattern-color:before  { background:url(../images/svg/patterns/pattern-color.svg); background-position:-1px; } 
.pattern-green:before  { background:url(../images/svg/patterns/pattern-green.svg); background-position:-1px; }
.pattern-blue:before   { background:url(../images/svg/patterns/pattern-blue.svg);  background-position:-1px; } 
.pattern-dark:before   { background:url(../images/svg/patterns/pattern-dark.svg);  background-position:-1px; }
.pattern-light:before  { background:url(../images/svg/patterns/pattern-light.svg); background-position:-1px; } 
.pattern-white:before  { background:url(../images/svg/patterns/pattern-white.svg); background-position:-1px; }  


.pattern-top-left:before,
.pattern-top-right:before,
.pattern-bottom-left:before,
.pattern-bottom-right:before { 
  content:'';
  position:absolute;
  z-index:-1;
  display:block;
}

.pattern-top-left:before     { top:0; left:0; } 
.pattern-top-right:before    { top:0; right:0; }
.pattern-bottom-left:before  { bottom:0; left: 0; }
.pattern-bottom-right:before { bottom:0; right: 0; }


@media only screen and (max-width:31.250em) { 

.pattern-top-left:before,
.pattern-top-right:before,
.pattern-bottom-left:before,
.pattern-bottom-right:before { -webkit-transform:scale(0.7); transform:scale(0.7); }

.pattern-top-left:before     { -webkit-transform-origin:top left;     transform-origin:top left; } 
.pattern-top-right:before    { -webkit-transform-origin:top right;    transform-origin:top right; }
.pattern-bottom-left:before  { -webkit-transform-origin:bottom left;  transform-origin:bottom left; }
.pattern-bottom-right:before { -webkit-transform-origin:bottom right; transform-origin:bottom right; }
 
} 


/* -------------------------------- 
SLIDER TESTIMONIOS
-------------------------------- */

.slick-slider                           { position:relative;display:block;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;
                                          -ms-user-select:none; user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y; -webkit-tap-highlight-color:transparent; cursor: -webkit-grab; cursor: grab;}

.slick-slider:active                    { cursor: -webkit-grabbing; cursor: grabbing;} 

.slick-list                             { position:relative;display:block;margin:0; padding:var(--space-l) 0; z-index: 3;}
.slick-list:focus                       { outline:none}
.slick-list.dragging                    { cursor: -webkit-grabbing; cursor: grabbing;}

.slick-slider .slick-track,
.slick-slider .slick-list
                                        { -webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);
                                          -o-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}

.slick-track                            { position:relative;top:0;left:0;display:block;margin-left:auto;margin-right:auto}
.slick-track:before,.slick-track:after  { display:table;content:''}
.slick-track:after                      { clear:both}
.slick-loading .slick-track             { visibility:hidden}
.slick-slide                            { display: none; float: left; height:100%; min-height: 1px; position: relative; }
 
.slick-slide img                        { display:block; object-fit: cover; height: 100vh; width: 100%; position: relative;}
.slick-slide.slick-loading img          { display:none}
.slick-slide.dragging img               { pointer-events:none}
.slick-initialized .slick-slide         { display:block}
.slick-loading .slick-slide             { visibility:hidden}
.slick-vertical .slick-slide            { display:block;height:auto; border: 1px solid transparent;} 
.slick-arrow.slick-hidden               { display:none}




/***************************************************** Slick DOTS */

.slick-dots                                { padding:0; margin:0; background:rgba(40,40,40,0); position:relative; z-index: 4;
                                             list-style: none!important; display: flex; bottom: 0; width: 100%; 
                                              justify-content:center; flex-flow: row nowrap; }

.slick-dots li                             { padding: 0!important; margin-bottom:0!important; }

.slick-dots li button                      { font-size: 0; line-height: 0; display: block; width: 12px; height: 8px; border-radius: 4px; 
                                             cursor: pointer; color: transparent; border: 0; margin:0 4px; outline: none; background: hsla(var(--dark),.1); 
                                           }
.slick-dots li.slick-active button         { width: 8px; height: 8px; border-radius: 4px; }

.slick-dots li button:hover:before,
.slick-dots li button:focus:before         { opacity:1; color:hsla(var(--dark),.3);}
.slick-dots li button:before               { content:''; color:hsla(var(--dark),.3); }

.slick-dots li.slick-active button, 
.slick-dots li.slick-active button:before  { background: hsla(var(--brand),1); color:hsl(var(--light)); }

.slick-dots li.slick-active button:after   { width: 100%; }

@media only screen and (max-width:39.9375em){ 

.slick-dots                                { flex-flow: row wrap; }



