@charset "UTF-8";

/*
Theme Name: Fundação Grupo Esquel Brasil
Author: Carolina Almeida
Author URI: https://carolina-almeida.com
Description: Esquel is a theme created for a NGO. 
Requires at least: 5.3
Tested up to: 5.8
Requires PHP: 5.6
Version: 1.0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: Esquel
Tags: ngo, institutional

Esquel Theme, (C) 2024 Fundação Grupo Esquel Brasil
Esquel is distributed under the terms of the GNU GPL.
*/

@import url('https://fonts.googleapis.com/css2?family=Baskervville:ital@0;1&family=Commissioner:wght@100..900&display=swap');

@font-face {
    font-family: 'fontello';
    src: url('../institutociclica/assets/font/fontello.eot?20233135');
    src: url('../institutociclica/assets/font/fontello.eot?20233135#iefix') format('embedded-opentype'),
         url('../institutociclica/assets/font/fontello.woff2?20233135') format('woff2'),
         url('../institutociclica/assets/font/fontello.woff?20233135') format('woff'),
         url('../institutociclica/assets/font/fontello.ttf?20233135') format('truetype'),
         url('../institutociclica/assets/font/fontello.svg?20233135#fontello') format('svg');
    font-weight: normal;
    font-style: normal;
  }
  /* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
  /* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
  /*
  @media screen and (-webkit-min-device-pixel-ratio:0) {
    @font-face {
      font-family: 'fontello';
      src: url('../font/fontello.svg?20233135#fontello') format('svg');
    }
  }
  */
  [class^="icon-"]:before, [class*=" icon-"]:before {
    font-family: "fontello";
    font-style: normal;
    font-weight: normal;
    speak: never;
  
    display: inline-block;
    text-decoration: inherit;
    width: 1em;
    margin-right: .2em;
    text-align: center;
    /* opacity: .8; */
  
    /* For safety - reset parent styles, that can break glyph codes*/
    font-variant: normal;
    text-transform: none;
  
    /* fix buttons height, for twitter bootstrap */
    line-height: 1em;
  
    /* Animation center compensation - margins should be symmetric */
    /* remove if not needed */
    margin-left: .2em;
  
    /* you can be more comfortable with increased icons size */
    /* font-size: 120%; */
  
    /* Font smoothing. That was taken from TWBS */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  
    /* Uncomment for 3D effect */
    /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
  }
  
.icon-orcid:before { content: '\e800'; } /* '' */
.icon-lattes:before { content: '\e801'; } /* '' */
.icon-academia:before { content: '\e802'; } /* '' */

*{
    font-family: 'Commissioner', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-optical-sizing: auto;
    font-style: normal;
    font-variation-settings:
      "slnt" 0,
      "FLAR" 0,
      "VOLM" 0;
}

:root {
	/* Font Family */
	--global--font-primary: 'Commissioner', sans-serif;
	--global--font-secondary: 'Baskervville', serif;
    
	/* Font Size */
	--global--font-size-base: 16px;
	--global--font-size-xxs: 12px;
	--global--font-size-xs: 14px;
	--global--font-size-sm: 16px;
	--global--font-size-md: 18px;
	--global--font-size-l: 24px;
	--global--font-size-lg: 36px;
	--global--font-size-xl: 48px;
	--global--font-size-xxl: 72px;
	--global--font-size-xxxl: 120px;
	--global--letter-spacing: 0.05em;

	/* Line Height */
	--global--line-height-body: 1.5;
	--global--line-height-heading: 1.2;

	/* Colors */
	--global--color-dark-blue: #1E3251;
	--global--color-white: #F5F5F5;
    --global--color-offwhite: #FFF2E0;
    --global--color-blue: #1542A3;
    --global--color-green: #00B43E;
    --global--color-green-2: #D1D8B8;
    --global--color-green-3: #4C7D4B;
    --global--color-yellow: #EBC642;
    --global--color-brown: #BCAC95;
    --global--color-bege: #FFF2E0;
	--global--color-primary: var(--global--color-dark-blue);

	/* Body text color, site title, footer text color. */
	--global--color-secondary: var(--global--color-dark-blue);

	/* Headings */
	--global--color-primary-hover: var(--global--color-primary);
	--global--color-background: var(--global--color-white);

	/* Mint, default body background */
	--global--color-border: var(--global--color-primary);
}

.admin-bar {
	--global--admin-bar--height: 32px;
}
@media only screen and (max-width: 782px) {

	.admin-bar {
		--global--admin-bar--height: 46px;
	}
}

/*GENERAL*/

body {
	font-family: var(--global--font-primary);
	font-size: var(--global--font-size-sm);
	line-height: var(--global--line-height-body);
	letter-spacing: var(--global--letter-spacing);
	margin: 0;
	position: relative;
	scrollbar-color: var(--global--color-dark-blue) var(--global--color-dark-blue);
	scrollbar-width: thin;
	overflow-x: hidden;
	z-index: -1;
	color: var(--global--color-dark-blue);
	background-color: var(--global--color-white); 
    overflow-y: scroll;
}

body.hidden {
	height: 100vh;
	overflow: hidden;
}

b {font-weight: 700;}

a {
	transition: 0.4s all;
	color: var(--global--color-blue);
    text-decoration: none;
}

a:hover{
	color: var(--global--color-green);
	transition: 0.4s all;
}

h1 font, h2 font, h3 font, h4 font, h5 font, h6 font,
h1, h2, h3, h4, h5, h6,
h1 em, h2 em, h3 em, h4 em, h5 em, h6 em {
	font-family: var(--global--font-secondary);
	font-weight: 400;
	letter-spacing: 0.03em;
	line-height: var(--global--line-height-heading);
	margin: 0;
}

h1 {
    font-size: var(--global--font-size-xl);
    color: var(--global--color-red-2);
}
h2 {font-size: var(--global--font-size-lg);}
h3 {font-size: var(--global--font-size-l);}
h4 {font-size: var(--global--font-size-md);}
h5 {font-size: var(--global--font-size-sm);}
h6 {font-size: var(--global--font-size-xs);}

button {
    transition: 0.2s all;
    user-select: none;
}

button:focus{outline: none;}

::-webkit-scrollbar-track
{
	-webkit-box-shadow: none;
	background-color: #ffffff40;
    border-radius: 20px;
}

::-webkit-scrollbar
{
	width: 10px;
	background-color: #ffffff40;
    border-radius: 20px;
}

::-webkit-scrollbar-thumb
{
	background-color: #1E3251;
	border: 2px solid #1E3251;
    border-radius: 20px;
}

.no-select {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

a.prevent {cursor: default !important;}


input[type="submit"],
.wp-block-button__link,
.btn {
    font-family: var(--global--font-primary);
    font-size: var(--global--font-size-md);
    font-weight: 400;
    text-transform: lowercase;
    background-color: transparent;
    color: var(--global--color-blue);
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    position: relative;
    transition: 0.4s all;
    margin-left: 0;
    height: 27px;
    z-index: 0;
    user-select: none;
    -webkit-user-select: none;
}

.wp-block-button__link {line-height: 1;}

input[type="submit"]:hover + label,
.wp-block-button__link:hover,
.btn.active,
a:hover .btn, .btn:hover {
    color: var(--global--color-green);
}

input[type="submit"] + label::before,
.wp-block-button__link::before,
.btn::before {
    content: "";
    width: 28px;
    height: 28px;
    border: 1px solid var(--global--color-green);
    font-size: var(--global--font-size-sm);
    border-radius: 50%;
    left: -15px;
    top: 0;
    transition: 0.4s all;
    position: absolute;
    z-index: -1;
}

input[type="submit"] + label::after,
.wp-block-button__link::after,
.btn::after {
    font-family: "Material Icons";
    content: "\e5c8";
    height: 28px;
    position: absolute;
    right: -25px;
    top: 6px;
    transition: 0.4s all;
}

input[type="submit"]:hover + label::after,
.wp-block-button__link:hover::after,
.btn.active::after,
.btn:hover::after,
a:hover .btn::after {
    right: -30px;
    top: 6px;
    transition: 0.4s all;
}

input[type="submit"]:hover + label::before,
.wp-block-button__link:hover::before,
.btn.active::before,
.btn:hover::before,
a:hover .btn::before {
    left: -10px;
    width: calc(100% + 45px);
    top: 0;
    border-radius: 20px;
    transition: 0.4s all;
    border-color: var(--global--color-green);
}

.btn:disabled {
    opacity: 0.3;
    pointer-events: none;
}

.background-blue .btn-txt,
.btn-txt {
    font-family: var(--global--font-primary);
    font-weight: 400;
    text-transform: initial;
}

.fixed {position: fixed;}

em {font-style: italic;}

strong span,
strong em,
strong {font-weight: 700;}

.clear {
    float: none;
    clear: both;
}

.txt {text-align: justify;}

input {border-radius: 0;}

/*
-----
HEADER
-----
*/

.header-principal {
    display: grid;
    grid-template-areas: "logo menu";
    grid-template-columns: 100px auto;
    width: 94vw;
    padding: 2vw 3vw;
    user-select: none;
    z-index: 3;
    top: 0;
    left: 0;
    align-items: center;
    position: fixed;
    transition: 0.4s all;
    background-color: var(--global--color-white);
}

.header-principal .logo {
    grid-area: logo;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
    transition: 0.4s all;
    height: 100px;
    width: 100%;
    margin: 0 auto;
    transition: 0.4s all;
}

.header-principal.small {padding: 20px 3vw;}

.header-principal.small .logo {height: 75px;}

.header-principal .logo a {
    height: 100%;
    width: 100%;
    display: block;
}

.home .header-principal .logo a {pointer-events: none;}

.header-principal #menu {
    grid-area: menu;
    position: relative;
}

#menu-toggle {display: none;}

.menu-toggle {display: none;}

.menu .nav {
    display: flex;
    flex-wrap: wrap;
    grid-template-areas: "menu-txt menu-socials menu-language";
    column-gap: 30px;
    justify-content: flex-end;
}

#menu-menu-principal {padding: 0 50px 0 0;}

.menu .nav ul:not(.sub-menu) {
    display: flex;
    flex-wrap: wrap;
    column-gap: 30px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.menu .nav ul a {
    text-decoration: none;
    font-size: var(--global--font-size-sm);
    font-weight: 400;
    text-transform: uppercase;
    color: var(--global--color-blue);
    transition: 0.4s all;
    position: relative;
}

.menu .nav ul li.active a,
.menu .nav ul a:hover {color: var(--global--color-green);}

/* Submenu */

.menu-item-has-children {
    display: flex;
    position: relative;
    cursor: pointer;
}

.menu .nav ul li.menu-item-has-children ul li::before {display: none;}

.menu-item-has-children::after {
    font-family: "Material Icons";
    content: "\e5cf";
    margin-left: 5px;
    transition: 0.4s all;
}

.menu-item-has-children.active::after {color: var(--global--color-green);}

.menu-item-has-children:hover::after {
    transform: rotate(-180deg);
    color: var(--global--color-green);
}

.sub-menu {
    min-width: 100%;
    padding: 0;
    top: 35px;
    position: absolute;
    background: var(--global--color-white);
    z-index: 100;
    transition: 0.5s padding, 0.5s background;
}

.menu .nav ul li.active ul.sub-menu a {color: var(--global--color-blue);}

.menu .nav ul li.active ul.sub-menu li.active a,
.menu .nav ul li.active ul.sub-menu a:hover {color: var(--global--color-green);}

.menu .nav ul.sub-menu a {font-size: var(--global--font-size-xs);}

.menu-item-has-children:not(:hover) .sub-menu li {
    visibility: hidden;
    height: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin: 0;
    color: rgba(25,25,25,0);
    transition: 
      0.5s 0.1s height,
      0.5s 0.1s padding,
      0.5s 0.1s margin,
      0.3s color,
      0.6s visibility;
    z-index: 99;
}

.menu-item-has-children .sub-menu li {
    overflow: hidden;
    height: 30px;
    padding: 5px 10px;
    background: rgba(0,0,0,0);
    white-space: nowrap;
    transition: 
      0.5s height cubic-bezier(.73,.32,.34,1.5),
      0.5s padding cubic-bezier(.73,.32,.34,1.5),
      0.5s margin cubic-bezier(.73,.32,.34,1.5),
      0.5s 0.2s color,
      0.2s visibility;
}

.socials {
    display: flex;
    align-items: flex-end;
}

.socials ul {
    display: flex;
    column-gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu .nav .socials ul {column-gap: 20px;}

.socials ul li:hover::before,
.socials ul li:hover a::before {display: none;}

.socials i {
    font-size: var(--global--font-size-sm);
    color: var(--global--color-green);
    transition: 0.4s all;
}

.socials i:hover {
    color: var(--global--color-yellow);
    transform: scale(0.9);
}

/* GTranslate */

.menu .nav ul.language {
    display: flex;
    column-gap: 15px;
    list-style: none;
    margin: 0;
    padding: 0;
}

ul.language li:not(:first-child) a::before {
    content: "";
    height: 15px;
    width: 1.5px;
    background-color: var(--global--color-green);
    position: absolute;
    top: 6px;
    left: -10px;
    opacity: 0.3;
    transition: 0.4s all;
}

.menu .nav ul.language a:not(:first-child):hover::before {
    left: -12px;
    transform: scale(1);
}

.menu .nav ul.language a,
.background-blue .menu .nav ul.language a {
    color: var(--global--color-green);
    position: relative;
    transition: 0.4s all;
}

.menu .nav ul.language a:hover,
.background-blue .menu .nav ul.language a:hover {
    color: var(--global--color-yellow);
    transform: scale(0.9);
}

.menu .nav ul.language .current-lang a,
.background-blue .menu .nav ul.language .current-lang a {
    opacity: 0.5;
    font-weight: 400;
    pointer-events: none;
}

.menu .nav ul.language a:first-child {
    margin-left: 5px;
    float: right;
}

/* Botão Lateral */

.side-btn {
    position: absolute;
    transform: rotate(-90deg);
    width: 145px;
    display: flex;
    padding: 10px 25px 10px 25px;
    background-color: var(--global--color-yellow);
    right: calc(-75px + 10px);
    top: 40vh;
    transition: 0.4s all;
    color: var(--global--color-blue);
    font-family: var(--global--font-secondary);
    text-transform: uppercase;
    -webkit-user-select: none;
    font-weight: 600;
    justify-content: center;
}

.side-btn:hover {
    background-color: var(--global--color-green);
    transform: rotate(-90deg) scale(0.95);
    color: var(--global--color-blue);
}

/*
FOOTER
*/

footer {
    margin: 0 3vw;
    padding: 2vw 0;
    display: grid;
    font-size: var(--global--font-size-xs);
    grid-template-columns: 1fr 400px 300px;
    grid-template-areas: "footer-col-1 footer-col-2 footer-col-3";
    justify-content: space-between;
    border-top: 1px solid var(--global--color-brown);
    color: var(--global--color-blue);
    width: 100%;
}

.background-blue footer {color: var(--global--color-offwhite);}

.footer-col-1 {grid-area: footer-col-1;}

.footer-col-2 {grid-area: footer-col-2;}

.footer-col-3 {grid-area: footer-col-3;}

footer h5 {
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.05em;
    font-family: var(--global--font-primary);
    margin-bottom: 10px;
}

footer p {
    margin: 0;
    line-height: 1.8em;
}

footer .socials ul {
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    column-gap: 20px;
}

footer .socials i {
    font-size: var(--global--font-size-md);
    transition: 0.3s all;
    color: var(--global--color-blue);
}

.background-blue footer .socials i {color: var(--global--color-offwhite);}

footer .socials a:hover i {color: var(--global--color-green);}

footer .socials a:hover {transform: scale(0.9);}

.background {
    position: absolute;
    z-index: -1;
    height: 100%;
    width: 100%;
    overflow: hidden;
    top: 0;
    left: 0;
}

.background-image {
    position: absolute;
    height: 500px;
    width: 500px;
    user-select: none;
    background-image: url('../esquel/assets/images/esquel-background.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.2;
}

#background-2 {
    bottom: 20vh;
    right: -200px;
}

#background-1 {
    top: 20vh;
    left: -200px;
}

.home #background-1 {top: 60vh;}

.home.background-blue .background-image {opacity: 1;}

/*
BACKGROUND OFFWHITE
*/

body.background-offwhite, 
.background-offwhite .header-principal,
.background-offwhite .sub-menu {
    background-color: var(--global--color-offwhite);
}

/*
BACKGROUND WHITE
*/

body.background-white, 
.background-white .header-principal,
.background-white .sub-menu {
    background-color: var(--global--color-white);
}

/*
BACKGROUND GREEN
*/

body.background-green, 
.background-green .header-principal,
.background-green .sub-menu {
    background-color: var(--global--color-green-2);
}

body.background-green .background-image {background-image: url('../esquel/assets/images/esquel-background-2.png');}

/*
BACKGROUND BEGE
*/

body.background-bege, 
.background-bege .header-principal,
.background-bege .sub-menu {
    background-color: var(--global--color-bege);
}

/*
BACKGROUND BLUE
*/

body.background-blue, 
.background-blue .header-principal,
.background-blue .sub-menu {
    background-color: var(--global--color-blue);
    color: var(--global--color-offwhite);
}

.background-blue  .menu .nav ul li:hover ul li a,
.background-blue .menu .nav ul a {color: var(--global--color-offwhite);}

.background-blue .menu .nav ul li ul li.active a, 
.background-blue .menu .nav ul li ul li:hover a,
.background-blue .menu .nav ul li.active a, 
.background-blue .menu .nav ul li:hover a {
    color: var(--global--color-green);
}

.background-blue footer .btn-txt,
.background-blue footer label,
.background-blue footer a,
.background-blue footer .txt {
    color: var(--global--color-offwhite);
}

.background-blue footer .btn-txt:hover,
.background-blue footer a:hover .btn-txt,
.background-blue footer a:hover {
    color: var(--global--color-green);
}

.background-blue footer .btn-txt::before {
    border-color: var(--global--color-offwhite);
}

.background-blue footer a:hover .btn-txt::before,
.background-blue footer .btn-txt:hover::before {
    border-color: var(--global--color-green);
}

.background-blue .background {opacity: 0.3;}

.background-blue .wp-block-button__link,
.background-blue .btn {
    color: var(--global--color-offwhite);
}

.background-blue .wp-block-button__link::before,
.background-blue .btn::before {
    border: 1px solid var(--global--color-green);
}

.background-blue .wp-block-button__link:hover,
.background-blue .btn.active,
.background-blue a:not(.side-btn):hover .btn, 
.background-blue a:not(.side-btn) .btn:hover {
    color: var(--global--color-green);
}

.background-blue .wp-block-button__link:hover::before,
.background-blue .btn.active::before,
.background-blue .btn:hover::before,
.background-blue a:not(.side-btn):hover .btn::before {
    border-color: var(--global--color-green);
}

.background-blue .page-description a {color: var(--global--color-offwhite);}

.background-blue .page-description a:hover {color: var(--global--color-green);}

/*
404
*/

.error404 #primary {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.error404 h1 {
    font-size: var(--global--font-size-xxxl);
    color: var(--global--color-offwhite);
    line-height: 1;
}

.error404 p {margin: 10px 0 0;}

/*
HOMEPAGE
*/

#primary {
    position: relative;
    padding: calc(4vw + 100px) 10vw 50px;
    min-height: calc(100vh - (8vw + 230px));
}

.header-content h1 {color: var(--global--color-green);}

.home #primary {padding: calc(4vw + 100px) 0 100px;}

.banner-txt-box {
    margin-top: 80px;
    margin-left: 10vw;
}

.banner-col-1 {
    width: 540px;
    max-width: 90vw;
    position: relative;
    margin-right: -150px !important;
}

.banner-col-1 p {
    max-width: 400px;
    border-top: 2px solid var(--global--color-green);
    padding-top: 20px;
    
}

.banner-col-2 img {
	margin-top: 75px;
	margin-left: 10px;
}

#home-2, #home-3 {margin: 50px calc(10vw - 5px) 0;}

.home .file-grid {margin-bottom: 30px;}

.home-txt-2 {margin-right: 10vw;}

.home-txt-2 ul {
    margin: 0;
    display: grid;
    gap: 20px;
}

.home-txt-2 ul li {
    font-family: var(--global--font-secondary);
}

/* Blog Grid */

.blog-grid {margin: 100px 10vw 50px;}

.blog-grid table {
    width: 100%;
    border: none !important;
}

.blog-grid table thead {display: none;}

.blog-grid table tbody {
    display: flex;
    flex-wrap: wrap;
    gap: 3vw;
}

.blog-item {
    width: calc((74vw - 10px)/3);
    height: auto;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    cursor: pointer;
    transition: 0.3s all;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 2px solid var(--global--color-green);
    transform: scale(1);
}

.blog-item:hover {
    transform: scale(0.95);
    transition: 0.3s all;
    border-bottom: 2px solid var(--global--color-blue);
}

.blog-grid table td {
    width: 100%;
    padding: 0 !important;
    border: none !important;
}

p.blog-date {
    margin: 0 0 5px;
    font-size: var(--global--font-size-xs);
    text-transform: uppercase;
    font-weight: 600;
    color: var(--global--color-green);
}

.blog-item:hover .blog-date p {color: var(--global--color-blue);}

.blog-categories {
    display: flex;
    flex-wrap: wrap;
    column-gap: 20px;
}

.blog-categories span {
    font-size: var(--global--font-size-xs);
    color: var(--global--color-green);
    margin-bottom: 5px;
    display: block;
}

.blog-item:hover .blog-categories span {color: var(--global--color-blue);}

.blog-item-txt {
    color: var(--global--color-dark-blue);
    transition: 0.4s all;
    display: grid;
    align-content: space-between;
}

.blog-item:hover .blog-item-txt {color: var(--global--color-blue);}

.blog-item-txt p {
    margin: 0 0 10px;
    font-size: var(--global--font-size-xxs);
    color: var(--global--color-green);
}

.blog-item:hover .blog-item-txt p {color: var(--global--color-blue);}

.blog-item-txt p span {font-weight: 600;}

.blog-item-txt .btn {
    color: var(--global--color-green);
    text-transform: uppercase;
    font-size: var(--global--font-size-xxs);
}

.blog-item:hover .blog-item-txt .btn {color: var(--global--color-blue);}

.blog-item:hover .blog-item-txt .btn::before,
.blog-item-txt .btn::before {display: none;}

.blog-item-txt .btn::after {
    right: -20px;
    top: 8px;
    transition: 0.4s all;
}

.blog-txt {margin: 10px 0 20px;}

.blog-btn {
    display: flex;
    justify-content: center;
    margin: 0 0 80px;
}

.dataTables_info,
.dataTables_length {display: none;}

.home #blog-table_paginate,
.home #blog-table_filter {display: none;}

.blog-footer {
    display: flex;
    justify-content: space-between;
    margin: 0 20px 5px 0;
}

p.blog-author {
    margin: 0 0 10px;
    color: var(--global--color-green);
}

p.blog-author span {font-weight: 600;}

/*
BLOG TEMPLATE
*/

.blog-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 15px 10px;
    margin: 20px 0 0;
}

.blog-filter input[type="radio"] {display: none;}

.blog-filter label {
    padding: 8px 35px;
    border: 1px solid var(--global--color-blue);
    color: var(--global--color-blue);
    border-radius: 30px;
    text-transform: uppercase;
    font-size: var(--global--font-size-xs);
    font-weight: 600;
    user-select: none;
    cursor: pointer;
    transition: 0.4s all;
}

.blog-filter label:hover,
.blog-filter input[type="radio"]:checked + label {
    color: var(--global--color-green-2);
    background-color: var(--global--color-blue);
    border: 1px solid var(--global--color-blue);
}

.blog-grid {
    margin: 50px 0;
}

#blog-table_filter {
    position: absolute;
    right: 0;
    top: 0;
}

.dataTables_wrapper .dataTables_filter {
    display: none;
    opacity: 0.5;
    transition: 0.3s all;
}

.dataTables_wrapper .dataTables_filter:hover {opacity: 1;}

.dataTables_wrapper .dataTables_filter input {
    width: 300px;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid var(--global--color-dark-blue);
    border-radius: 0;
    text-transform: uppercase;
    font-size: var(--global--font-size-xs);
    padding: 5px 0;
    font-family: var(--global--font-secondary);
    color: var(--global--color-dark-blue);
}

.dataTables_wrapper .dataTables_filter input::placeholder {color: var(--global--color-dark-blue);}

.dataTables_wrapper .dataTables_filter input:focus {outline: none;}

.dataTables_wrapper .dataTables_filter label::after {
    font-family: "Material Icons";
    content: "\e8b6";
    font-size: var(--global--font-size-md);
    font-weight: 400;
    position: absolute;
    display: flex;
    align-items: center;
    height: 30px;
    right: 0;
    bottom: 5px;
    z-index: 0;
    color: var(--global--color-dark-blue);
    background-color: transparent;
}

#blog-table_paginate {
    margin: 30px 0 0;
    padding: 0;
    width: 100%;
    display: flex;
    justify-content: center;
}

#blog-table_paginate span {
    display: flex;
    column-gap: 10px
}

#blog-table_paginate a {
    background: transparent;
    border: none;
    color: var(--global--color-dark-blue) !important;
    padding: 0;
    margin: 0;
    min-width: auto;
}

#blog-table_paginate a:hover,
#blog-table_paginate a.current {font-weight: 600;}


/*
FILES
*/

.page-template-files .page-header-txt {max-width: calc(80vw - 350px);}

.file-grid table.dataTable>thead>tr>th, 
.file-grid table.dataTable>thead>tr>td,
.file-grid table.dataTable.no-footer {border: none;}

.page-template-files .blog-filter label:hover, 
.page-template-files .blog-filter input[type="radio"]:checked + label {color: var(--global--color-white);}

.file-grid table.dataTable tbody th,
.file-grid table.dataTable tbody td {padding: 0;}

.file-grid #blog-table {margin-top: 30px;}

.file-grid #blog-table thead {display: none;}

.file-grid #blog-table tbody {
    display: flex;
    flex-wrap: wrap;
    gap: 2vw;
}

.file-item {
    display: grid;
    border: 1px solid var(--global--color-brown);
    border-radius: 20px;
    padding: 20px;
    transition: 0.3s all;
    cursor: pointer;
    width: calc((76vw - 136px)/3);
}

.file-place, .file-date {opacity: 0.5;}

.file-title {
    color: var(--global--color-blue);
    margin: 10px 0;
}

.file-categories {
    font-size: var(--global--font-size-xs);
    color: var(--global--color-green);
    margin: 15px 0;
}

.file-button {
    display: flex;
    justify-content: end;
    margin-right: 35px;
}

.file-item:hover {
    color: var(--global--color-green);
    border: 1px solid var(--global--color-green);
    transform: scale(0.95);
}

.file-item:hover .file-title {color: var(--global--color-green);}

/*
ABOUT TEMPLATE
*/

.page-template-about #primary {padding: calc(4vw + 100px) 0 0;}

.page-template-about .header-content {
    margin: 50px 20vw;
}

.about-icons {
    display: flex;
    flex-wrap: wrap;
    width: 80vw;
    margin: 0 10vw;
    gap: 6vw;
    justify-content: center;
}

.icon-item {
    width: calc(68vw/3);
    display: grid;
    align-content: flex-start;
}

.icon-item h2 {
    display: flex;
    color: var(--global--color-brown);
    align-items: center;
}

.icon-item span {
    width: 75px;
    height: 75px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--global--color-brown);
    border-radius: 50%;
    font-size: var(--global--font-size-xl);
    color: var(--global--color-brown);
    text-align: center;
    margin: 0 15px 0 0;
    -webkit-user-select: none;
}

.about-timeline {
    position: relative;
    margin: 50px 10vw;
    display: grid;
    grid-template-columns: 250px auto;
}

.timeline-itens::before {
    content: "";
    width: 1px;
    height: calc(100% - 50px);
    position: absolute;
    margin-left: 0;
    margin-top: 20px;
    border-left: 1px solid var(--global--color-blue);
}

.about-timeline h2 {color: var(--global--color-brown);}

.about-timeline h2 span {
    display: block;
    font-family: var(--global--font-secondary);
    font-size: var(--global--font-size-l);
}

.timeline-item {
    position: relative;
    margin-left: 30px;
}

.timeline-item::before {
    content: "";
    position: absolute;
    left: -40.5px;
    width: 20px;
    height: 20px;
    background-color: var(--global--color-blue);
    border-radius: 50%;
    border: 1px solid var(--global--color-blue);
    top: 0;
    transition: all 0.3s ease-in-out;
}

.about-btn {
    margin: 50px 0;
    display: flex;
    justify-content: center;
}

/*
PARTNERS PAGE
*/

.page-template-partners #primary {padding: calc(4vw + 100px) 0 50px 10vw;}

.partners-content {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 3vw;
    align-items: flex-start;
}

.partners-highlight {
    background-color: var(--global--color-brown);
    color: var(--global--color-white);
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    padding: 0 70px 10px 20px;
    margin-top: 75px;
}

.page-template-partners .wp-block-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 15px;
}

.page-template-partners .wp-block-list li {
    padding: 10px 30px;
    border: 1px solid var(--global--color-brown);
    color: var(--global--color-brown);
    border-radius: 50px;
}

h2.partners-title {
    color: var(--global--color-brown);
    margin-top: 50px;
}

h2.partners-title span {
    display: block;
    font-family: var(--global--font-secondary);
    font-size: var(--global--font-size-l);
}

.network-grid {
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
    gap: 3vw;
}

.network-itens {
    width: calc((70vw - 40px)/3);
    padding: 20px;
    border: 1px solid var(--global--color-brown);
    border-radius: 10px;
}

.network-itens h4 {
    font-weight: 600;
    margin-bottom: 5px;
}

.network-itens:hover {
    border: 1px solid var(--global--color-green);
    transform: scale(0.95) !important;
}

.partners-grid {
    margin-top: 30px;
    margin-right: 10vw;
    display: flex;
    flex-wrap: wrap;
    gap: 80px;
    justify-content: center;
}

.partner-itens img {
    height: 80px;
    width: auto;
}

/*
CONTACT
*/

body.page-template-contact {background-color: var(--global--color-blue);}

.page-template-contact .header-content {display: none;}

.contact-col-1 {align-content: flex-end;}

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active,
div.wpforms-container-full input[type=email],
div.wpforms-container-full input[type=text],
div.wpforms-container-full textarea {
    background-color: transparent !important;
    border-radius: 0px;
    color: var(--global--color-offwhite) !important;
    -webkit-text-fill-color: var(--global--color-offwhite) !important;
    border: 1px solid var(--global--color-offwhite);
    padding: 0 var(--wpforms-field-size-padding-h);
    font-size: var(--wpforms-field-size-font-size);
    line-height: 100%;
    box-shadow: none;
    transition: border 0.15s, box-shadow 0.15s;
    transition: background-color 5000s ease-in-out 0s;
}

div.wpforms-container-full input[type=email],
div.wpforms-container-full input[type=text] {padding-left: 100px;}

div.wpforms-container-full .wpforms-form textarea {
    line-height: 1.3;
    padding: 40px 15px 15px;
    color: var(--global--color-offwhite);
}

div.wpforms-container-full .wpforms-form textarea:focus {
    color: var(--global--color-offwhite);
    outline: none;
}

div.wpforms-container-full .wpforms-form input[type=email]:focus,
div.wpforms-container-full .wpforms-form input[type=text]:focus,
div.wpforms-container-full textarea:focus {
    color: var(--global--color-offwhite);
    outline: none;
    border: 1px solid var(--global--color-offwhite);
    box-shadow: none;
    outline: none;
}

div.wpforms-field-container textarea {resize: none;}

div.wpforms-container-full .wpforms-field-label {
    font-size: var(--global--font-size-xxs);
    position: absolute;
    top: 28px;
    color: var(--global--color-offwhite);
    font-family: var(--global--font-secondary);
    text-transform: uppercase;
    padding: 0 15px;
    user-select: none;
    opacity: 0.5;
    font-weight: 400;
}

.wpforms-required-label {display: none;}

div.wpforms-container-full button[type=submit]:focus,
div.wpforms-container-full button[type=submit]:active,
div.wpforms-container-full button[type=submit]:hover,
div.wpforms-container-full button[type=submit]:not(:hover):not(:active) {
    font-family: var(--global--font-primary);
    font-size: var(--global--font-size-md);
    font-weight: 400;
    text-transform: lowercase;
    background-color: transparent;
    color: var(--global--color-blue);
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    position: relative;
    transition: 0.4s all;
    margin-left: 0;
    height: 27px;
    z-index: 0;
    user-select: none;
    -webkit-user-select: none;
}

div.wpforms-container-full button[type=submit]:not(:hover):not(:active) {
    margin-right: 15px;
    color: var(--global--color-offwhite);
}

div.wpforms-container-full button[type=submit]:focus::before,
div.wpforms-container-full button[type=submit]:hover::before,
div.wpforms-container-full button[type=submit]:active::before,
div.wpforms-container-full button[type=submit]:not(:hover):not(:active)::before {
    content: "";
    width: 28px;
    height: 28px;
    border: 1px solid var(--global--color-green);
    font-size: var(--global--font-size-sm);
    border-radius: 50%;
    transition: 0.4s all;
    position: absolute;
    z-index: -1;
}

div.wpforms-container-full button[type=submit]:focus::after,
div.wpforms-container-full button[type=submit]:hover::after,
div.wpforms-container-full button[type=submit]:active::after,
div.wpforms-container-full button[type=submit]:not(:hover):not(:active)::after {
    font-family: "Material Icons";
    content: "\e5c8";
    height: 28px;
    position: absolute;
}

div.wpforms-container-full button[type=submit]:not(:hover):not(:active)::after {    
    right: -25px;
    top: 6px;
    transition: 0.4s all;
}

div.wpforms-container-full button[type=submit]:focus::after,
div.wpforms-container-full button[type=submit]:hover::after,
div.wpforms-container-full button[type=submit]:active::after {
    right: -30px;
    top: 6px;
    transition: 0.4s all;
}

div.wpforms-container-full button[type=submit]:hover {
    color: var(--global--color-green);
    margin-right: 0;
}

div.wpforms-container-full button[type=submit]::before {
    border: 1px solid var(--global--color-offwhite);
    left: -15px;
    top: 0;
}

div.wpforms-container-full button[type=submit]:hover::before,
div.wpforms-container-full button[type=submit]:active::before {
    left: -10px;
    width: calc(100% + 45px);
    top: 0;
    border-radius: 20px;
    transition: 0.4s all;
    border-color: var(--global--color-green);
}

div.wpforms-container-full button[type=submit]:hover {background: transparent;}

div.wpforms-container-full button[type=submit]:focus:after {border: none;}

.wpforms-submit-container {
    display: grid;
    justify-content: flex-end;
    margin-right: 10px !important;
    margin-top: 0 !important;
}

.wpforms-container input.wpforms-field-medium,
.wpforms-container select.wpforms-field-medium,
.wpforms-container .wpforms-field-row.wpforms-field-medium,
.wp-core-ui div.wpforms-container input.wpforms-field-medium,
.wp-core-ui div.wpforms-container select.wpforms-field-medium,
.wp-core-ui div.wpforms-container .wpforms-field-row.wpforms-field-medium {max-width: 100% !important;}

/*
TEAM
*/

.page-template-team #primary {
    display: grid;
    grid-template-columns: 400px auto;
    gap: 2vw;
    padding: calc(4vw + 100px) 3vw 0;
}

.page-template-team .header-content {
    display: grid;
    align-content: flex-end;
    margin-bottom: calc((90vw - 400px)/4);
}

.team-grid {
    margin: 20px 0 calc((90vw - 400px)/4);
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    position: relative;
}

.team-grid::before {
    content: "";
    width: calc((90vw - 600px)/4);
    height: calc((90vw - 600px)/4);
    background-color: var(--global--color-blue);
    position: absolute;
    z-index: -1;
    top: -20px;
    left: -20px;
}

.team-item {
    width: calc((90vw - 400px)/4);
    height: calc((90vw - 400px)/4);
    position: relative;
    overflow: hidden;
    transition: 0.4s all;
    cursor: pointer;
}

.team-img-box {
    width: 100%;
    height: 100%;
    opacity: 1;
    transition: 0.4s all;
    margin: 0;
    overflow: hidden;
    border-radius: 0;
}

.team-item:nth-child(1) .team-img-box,
.team-item:nth-child(3) .team-img-box,
.team-item:nth-child(6) .team-img-box,
.team-item:nth-child(8) .team-img-box,
.team-item:nth-child(9) .team-img-box,
.team-item:nth-child(11) .team-img-box,
.team-item:nth-child(14) .team-img-box,
.team-item:nth-child(16) .team-img-box {background-color: #c69a5b;}

.team-item:nth-child(2) .team-img-box,
.team-item:nth-child(4) .team-img-box,
.team-item:nth-child(5) .team-img-box,
.team-item:nth-child(7) .team-img-box,
.team-item:nth-child(10) .team-img-box,
.team-item:nth-child(12) .team-img-box,
.team-item:nth-child(13) .team-img-box,
.team-item:nth-child(15) .team-img-box {background-color: var(--global--color-brown);}

.team-item:hover .team-img-box {background-color: var(--global--color-green);}

.team-img {
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-blend-mode: multiply;
    opacity: 0.5;
    transition: 0.4s all;
    filter: grayscale(1);
    z-index: 0;
    position: relative;
}

.team-item:hover .team-img {
    filter: grayscale(0);
    background-blend-mode: multiply;
    opacity: 0.5;
    background-color: var(--global--color-green);
}

.team-item.active .team-img {
    background-blend-mode: normal;
    opacity: 1;
    filter: grayscale(0);
}

.team-img-txt {
    position: absolute;
    bottom: 10px;
    left: 10px;
    z-index: 1;
    opacity: 0;
    transition: 0.4s all;
}

.team-item:hover .team-img-txt {
    opacity: 1;
    color: var(--global--color-white);
}

.team-item.active .team-img-txt {opacity: 0;}

.team-img-txt p {
    margin: 0;
    font-size: var(--global--font-size-xs);
}

.team-item.active {overflow: visible;}

.team-item .team-text {opacity: 0;}

.team-item.active .team-text {
    opacity: 1;
    width: calc(2*((90vw - 400px)/4));
    height: calc(2*((90vw - 400px)/4));
    position: absolute;
    z-index: 2;
    background-color: var(--global--color-bege);
}

.team-item.active .team-text {
    top: 0;
}

.team-item:nth-child(1).active .team-text,
.team-item:nth-child(2).active .team-text,
.team-item:nth-child(5).active .team-text,
.team-item:nth-child(6).active .team-text,
.team-item:nth-child(9).active .team-text,
.team-item:nth-child(10).active .team-text,
.team-item:nth-child(13).active .team-text,
.team-item:nth-child(14).active .team-text {
    left: calc((90vw - 400px)/4);
}

.team-item:nth-child(3).active .team-text,
.team-item:nth-child(4).active .team-text,
.team-item:nth-child(7).active .team-text,
.team-item:nth-child(8).active .team-text,
.team-item:nth-child(11).active .team-text,
.team-item:nth-child(12).active .team-text,
.team-item:nth-child(15).active .team-text,
.team-item:nth-child(16).active .team-text {
    right: calc((90vw - 400px)/4);
}

.team-content {
    overflow-y: scroll;
    opacity: 1;
    transition: 0.4s all;
    font-size: var(--global--font-size-xs);
    margin: 20px 20px 0;   
    max-height: calc(100% - 200px);
}

.team-item.active .team-content {opacity: 1;}

.team-content::-webkit-scrollbar {
    width: 8px;
    background-color: transparent;
}

.team-content::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: none;
    background-color: rgba(30, 50, 82, 0.35);
    border: none;
}

.team-content::-webkit-scrollbar-track {
    border-radius: 10px;
    -webkit-box-shadow: none;
    background-color: #ffffff42;
}

.team-content p:first-child {
    margin: 0 0 1em;
}

.team-infos {margin: 20px 60px 20px 20px;}

.team-infos h3 {color: var(--global--color-green);}

p.team-job {
    margin: 5px 0 0;
    line-height: 1.2;
    font-weight: 600;
    font-size: var(--global--font-size-xxs);
}

p.team-email {
    margin: 10px 0 0;
	font-size: var(--global--font-size-xs);
}

.team-text .material-icons {
    position: absolute;
    right: 20px;
    top: 15px;
    padding: 5px;
    border-radius: 50%;
    user-select: none;
    color: var(--global--color-green);
}

.team-text .material-icons::before{
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    content: "close"; 
    transition: 0.4s all;
}

.team-link {padding: 20px;}

.team-link a {color: var(--global--color-green);}

a.team-email {display: block !important;}

/*
SERVICE
*/

.page-template-services #primary {
    display: grid;
    grid-template-columns: auto 500px;
    gap: 5vw;
    margin-bottom: 50px;
}

.services-content {
    margin: 150px 0 0 50px;
    user-select: none;
    -webkit-user-select: none;
}

.services-group {position: relative;}

.services-item {
    position: absolute;
    cursor: pointer;
    transition: 0.4s all;
}

.services-item:hover {z-index: 1;}

.services-item:nth-child(2) {left: 150px;}

.services-item:nth-child(3) {
    top: 150px;
    left: 75px;
}

.services-item h4 {
    position: absolute;
    text-align: center;
    width: 200px;
    color: var(--global--color-green);
    transition: 0.4s all;
}

.services-item:hover h4 {color: var(--global--color-green-3);}

.services-item:nth-child(1) h4 {
    top: -75px;
    left: -100px;
}

.services-item:nth-child(1):hover h4 {
    top: -60px;
    left: -80px;
} 

.services-item:nth-child(2) h4 {
    top: -75px;
    right: -100px;
}

.services-item:nth-child(2):hover h4 {
    top: -60px;
    right: -80px;
} 

.services-item:nth-child(3) h4 {
    bottom: -75px;
    right: 0;
}

.services-item:nth-child(3):hover h4 {
    bottom: -60px;
    right: 0;
} 

.service-img {
    width: 200px;
    height: 200px;
    border: 3px solid var(--global--color-green);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.4s all;
}

.services-item:hover .service-img {
    border: 3px solid var(--global--color-green-3);
    background-color: var(--global--color-green-3);
    transform: scale(0.95);
}

.services-box {margin: 0 200px 50px;}

.services-box .service-img {
    position: absolute;
    top: -40px;
    left: -40px;
    opacity: 1;
    border: none;
    background-color: #ffffff50;
}

.service-img img {
    width: auto;
    height: 80px;
    transition: 0.4s all;
}

.services-box .service-img,
.services-item:hover .service-img img {
    filter: brightness(0) invert(1);
}

/*
SINGLE
*/

.single-header h2 {margin: 20px 0;}

.related-posts {margin: 0 calc(10vw - 5px);}

.related-posts .entry-header {
    margin: 50px 0 0;
}

.share-icon h5 {
    text-transform: uppercase;
    font-size: var(--global--font-size-xxs);
    font-weight: 600;
    font-family: var(--global--color-primary);
}

.share-social-icons {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    column-gap: 20px;
}


/*  MODAL */

html.modal-active, body.modal-active {overflow: hidden;}
  
#modal-container {
    position: fixed;
    display: table;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    transform: scale(0);
    z-index: 9;
}

#modal-container {transform: scale(1);}

#modal-container .modal-background {
    background: rgba(0, 0, 0, 0);
    animation: fadeIn 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

#modal-container .modal-background .modal {
    opacity: 0;
    animation: scaleUp 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

#modal-container + .content {animation: scaleBack 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;}

#modal-container.out {animation: quickScaleDown 0s 0.5s linear forwards;}

#modal-container.out .modal-background {animation: fadeOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;}

#modal-container.out .modal-background .modal {animation: scaleDown 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;}

#modal-container.out + .content {animation: scaleForward 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;}

#modal-container .modal-background {
    display: table-cell;
    background: rgba(0, 0, 0, 0.8);
}

#modal-container .modal-background .modal {
    display: inline-block;
    border-radius: 20px;
    font-weight: 400;
    position: relative;
    overflow: hidden;
}

.page-template-services #modal-container .modal-background .modal {
    background-color: var(--global--color-green-3);
    color: var(--global--color-white);
    margin: 1vw;
    width: 98vw;
    height: calc(100vh - 2vw);
    overflow-y: auto;
}

.services-box {display: none;}

.modal-close {
    text-align: right;
    user-select: none;
    -webkit-user-select: none;
    cursor: pointer;
    margin: 30px 30px 0;
}

.modal-close span {
    font-size: var(--global--font-size-lg);
    transform: scale(1);
    transition: 0.4s all;
}

.modal-close span:hover {
    transform: scale(0.9);
    color: var(--global--color-orange);
}

.modal-title {
    font-size: var(--global--font-size-l);
    font-weight: 700;
}

.modal-form {margin: 30px 0;}

.modal-form input[type="text"], input[type="email"] {
    border-bottom: 1px solid var(--global--color-white);
    color: var(--global--color-white);
}

.modal-form input[type="submit"] {color: var(--global--color-white);}

.modal-form input::placeholder {color: var(--global--color-white);}

label.submit {
    display: inline-flex;
    position: relative;
    margin: 30px 0 20px;
}

label.submit:hover input {
    color: var(--global--color-orange);
}

label.submit::before {
    content: "";
    width: 28px;
    height: 28px;
    border: 1px solid var(--global--color-orange);
    border-radius: 50%;
    left: -15px;
    top: 0;
    transition: 0.4s all;
    position: absolute;
    z-index: -1;
}

label.submit::after {
    font-family: "Material Icons Outlined";
    content: "\e5c8";
    height: 28px;
    position: absolute;
    right: -20px;
    top: 5px;
    transition: 0.4s all;
    font-size: var(--global--font-size-xxs);
}

label.submit:hover::after {
    right: -25px;
    transition: 0.4s all;
    color: var(--global--color-orange);
}

label.submit:hover::before {
    left: -10px;
    width: calc(100% + 38px);
    top: 0;
    border-radius: 20px;
    transition: 0.4s all;
    border-color: var(--global--color-orange);
}

.wpcf7-spinner {display: none;}

.wpcf7-not-valid-tip {color: var(--global--color-red);}

.wpcf7 form .wpcf7-response-output{
    border: none !important;
    width: 70%;
    margin: 0 15%;
    font-size: var(--global--font-size-xs);
    border-radius: 10px;
}

.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output {background-color: var(--global--color-red);}

.wpcf7 form.sent .wpcf7-response-output {background-color: var(--global--color-blue);}

#circle-modal {
    bottom: -100px;
    left: -150px;
}

body.page-template-files #circle-footer {
    bottom: -200px;
    right: auto;
    left: -100px;
}

@keyframes fadeIn {
0% {
    background: rgba(0, 0, 0, 0);
}
100% {
    background: rgba(0, 0, 0, 0.7);
}
}
@keyframes fadeOut {
0% {
    background: rgba(0, 0, 0, 0.7);
}
100% {
    background: rgba(0, 0, 0, 0);
}
}
@keyframes scaleUp {
0% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
}
100% {
    transform: scale(1) translateY(0px);
    opacity: 1;
}
}
@keyframes scaleDown {
0% {
    transform: scale(1) translateY(0px);
    opacity: 1;
}
100% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
}
}
@keyframes scaleBack {
0% {
    transform: scale(1);
}
100% {
    transform: scale(0.85);
}
}
@keyframes scaleForward {
0% {
    transform: scale(0.85);
}
100% {
    transform: scale(1);
}
}
@keyframes quickScaleDown {
0% {
    transform: scale(1);
}
99.9% {
    transform: scale(1);
}
100% {
    transform: scale(0);
}
}

/*
EDITAIS
*/

.page-id-129 .wp-block-table td {
    border-left: none;
    border-right: none;
}

/*
RESPONSIVE
*/

@media (max-width: 1023px) {

    :root {
        
        /* Font Size */
        --global--font-size-base: 16px;
        --global--font-size-xxs: 13px;
        --global--font-size-xs: 14px;
        --global--font-size-sm: 16px;
        --global--font-size-md: 18px;
        --global--font-size-l: 24px;
        --global--font-size-lg: 30px;
        --global--font-size-xl: 36px;
        --global--font-size-xxl: 42px;
    }
    
    h1 {font-size: var(--global--font-size-lg);}
    h2 {font-size: var(--global--font-size-l);}
    h3 {font-size: var(--global--font-size-md);}
    h4 {font-size: var(--global--font-size-sm);}
    h5 {font-size: var(--global--font-size-xs);}
    h6 {font-size: var(--global--font-size-xxs);}
    
    #primary {min-height: auto;}

    .side-btn {right: calc(-85px + 10px);}

    .header-principal {
        width: 90vw;
        padding: 5vw;
    }

    .header-principal .logo {height: 60px;}

    .header-principal.small {
        padding: 5vw;
    }

    .header-principal.small .logo {height: 50px;}

    .menu-toggle {
        position: fixed;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 35px;
        height: 35px;
        transition: transform 250ms ease;
        cursor: pointer;
        z-index: 999;
        margin: 0;
    }

    .menu-toggle span {
        position: relative;
        display: block;
        width: 30px;
        height: 2px;
        background-color: var(--global--color-green);
        float: right;
        transform-origin: center center;
        transition: transform 250ms ease;
    }

    .menu .nav {
        position: absolute;
        right: -105vw;
        transition: right 500ms ease;
        top: calc(-12.5px - 5vw);
        height: calc(100vh - 20vw);
        width: 80vw;
        display: flex;
        background-color: var(--global--color-dark-blue);
        z-index: 99;
        padding: 10vw;
        align-content: flex-start;
    }

    #menu-menu-principal {
        padding: 0;
        display: block;
        width: 100%;
    }

    .menu .nav ul li {
        position: relative;
        margin-bottom: 30px;
    }

    .menu-item-has-children {
        display: block;
        cursor: pointer;
    }

    .background-bege .sub-menu,
    .background-offwhite .sub-menu,
    .background-green .sub-menu,
    .background-blue .sub-menu {
        background-color: transparent;
    }

    .sub-menu {
        background: transparent;
        top: 0;
        position: relative;
    }

    .menu-item-has-children::after {display: none;}

    .menu-item-has-children:not(:hover) .sub-menu li {
        visibility: visible;
        height: auto;
        padding-top: 20px;
        padding-bottom: 0;
        margin: 0;
    }

    .menu .nav ul a {color: var(--global--color-offwhite);}

    .menu .nav .socials {
        display: flex;
        align-items: flex-start;
        width: 100%;
    }

    .language {width: 100%;}

    .header-principal .language a:first-child {
        margin-left: 0;
        float: right;
    }

    .menu-toggle span:nth-of-type(1) {transform: translateY(-8px);}

    .menu-toggle span:nth-of-type(3) {transform: translateY(8px);}

    #menu-toggle:checked ~ .menu-toggle {
        background-color: transparent;
        transition: transform 250ms ease;
    }

    #menu-toggle:checked ~ .menu-toggle span {
        transition: transform 250ms ease;
        background-color: var(--global--color-green);
    }

    #menu-toggle:hover ~ .menu-toggle span:nth-of-type(1),
    #menu-toggle:checked ~ .menu-toggle span:nth-of-type(1) {transform: translateY(1px);}

    #menu-toggle:hover ~ .menu-toggle span:nth-of-type(2),
    #menu-toggle:checked ~ .menu-toggle span:nth-of-type(2) {display: none;}

    #menu-toggle:hover ~ .menu-toggle span:nth-of-type(3),
    #menu-toggle:hover ~ .menu-toggle span:nth-of-type(3) {transform: translateY(8px);}

    #menu-toggle:hover ~ .menu-toggle span:nth-of-type(3),
    #menu-toggle:checked ~ .menu-toggle span:nth-of-type(3) {transform: translateY(-1px);}

    #menu-toggle:checked ~ .nav {
        right: -5vw;
        transition: right 500ms ease;
    }

    .menu .nav ul li.active ul.sub-menu a {color: var(--global--color-offwhite);}
    
    .header-principal {
        grid-template-areas:
            "logo menu";
        grid-template-columns: auto 35px;
    }

    .menu-toggle {
        position: relative;
    }

    .socials i,
    .menu .nav ul a {font-size: var(--global--font-size-l);}
    
    .menu .nav ul.sub-menu a {font-size: var(--global--font-size-md);}

    .fixed-menu {display: none;}

    #primary {
        padding: calc(10vw + 60px) 5vw 50px;
    }

    footer {
        grid-template-columns: 100%;
    }
    /* Homepage */

    .home #primary {padding: calc(4vw + 100px) 0 0;}

    .banner-col-1 {margin: 0 5vw !important;}

    .banner-col-2 img {margin-top: 0;}

    .banner-txt-box {
        margin-top: 0;
        margin-left: 0;
    }

    .home-txt-2 {
        margin-right: 5vw;
        margin-left: 5vw;
    }

    .home-txt-2 ul {padding: 0 0 0 5vw;}

    #home-2, #home-3 {margin: 50px 5vw 0;}

    /* ABOUT */

    .page-template-about .header-content {margin: 0 5vw;}

    .about-icons {margin: 30px 5vw;}

    .icon-item {width: 90vw;}

    .about-timeline {
        grid-template-columns: 100%;
        margin: 30px 5vw;
    }

    /* TEAM */

    .page-template-team #primary {
        grid-template-columns: 100%;
        gap: 5vw;
        padding: calc(4vw + 100px) 5vw 0;
    }

    .team-grid {
        margin: 0;
        gap: 5vw 0;
    }

    .team-item {
        width: 90vw;
        height: 90vw;
    }

    .team-item.active .team-text {
        width: 90vw;
        height: auto;
        min-height: 90vw;
    }

    .team-content {
        overflow-y: auto;
        max-height: 100%;
    }

    .team-item:nth-child(1).active .team-text,
    .team-item:nth-child(2).active .team-text,
    .team-item:nth-child(5).active .team-text,
    .team-item:nth-child(6).active .team-text,
    .team-item:nth-child(9).active .team-text,
    .team-item:nth-child(10).active .team-text,
    .team-item:nth-child(13).active .team-text,
    .team-item:nth-child(14).active .team-text {
        left: 0;
    }

    .team-item:nth-child(3).active .team-text,
    .team-item:nth-child(4).active .team-text,
    .team-item:nth-child(7).active .team-text,
    .team-item:nth-child(8).active .team-text,
    .team-item:nth-child(11).active .team-text,
    .team-item:nth-child(12).active .team-text,
    .team-item:nth-child(15).active .team-text,
    .team-item:nth-child(16).active .team-text {
        right: auto;
        left: 0;
    }

    /* SERVICES */

    .page-template-services #primary {
        grid-template-columns: 100%;
    }

    .services-item {left: calc((90vw - 270px) / 2);}

    .services-item:nth-child(2) {left: calc((90vw - 270px) / 2 + 125px);}

    .services-item:nth-child(3) {
        top: 100px;
        left: calc((90vw - 270px) / 2 + 62px);
    }

    .service-img {
        width: 144px;
        height: 144px;
    }

    .service-img img {height: 60px;}

    .services-content {
        margin: 100px 0 0;
        height: 250px;
    }

    .services-item h4 {width: 150px;}

    .services-item:nth-child(1) h4 {
        top: -100px;
        left: calc((90vw - 270px) / 2 - 100px);
    }

    .services-item:nth-child(2) h4 {
        top: -100px;
        right: calc((90vw - 270px) / 2 - 100px);
    }

    .services-box {margin: 50px 5vw 5vw;}

    /* PARTNERS */

    .page-template-partners #primary {
        padding: calc(4vw + 100px) 0 50px 5vw;
    }

    .page-template-partners .header-content {margin-right: 5vw;}
    
    .partners-content {grid-template-columns: 100%;}

    .partners-highlight {
        padding: 0 5vw 5vw;
        margin-top: 30px;
    }

    .network-itens {width: calc(90vw - 40px);} 

    /* CONTACT */

    .contact-content {
        width: 100%;
        margin: 0;
        display: grid;
        grid-template-columns: 100%;
        gap: 5vw;
        align-content: flex-start;
        padding: 0;
    }

    div.wpforms-container-full {
        margin: 0 auto;
    }

    .wpforms-container .wpforms-one-half, 
    .wpforms-container .wpforms-three-sixths, 
    .wpforms-container .wpforms-two-fourths {
        width: 100%;
        margin-left: 0 !important;
    }

    /* BLOG */

    .blog-grid {margin: 30px 0;}

    #blog-table_filter {
        position: relative;
        right: 0;
        top: 0 !important;
        margin: 0 0 30px;
    }

    .dataTables_wrapper .dataTables_filter input {width: 100%;}

    .blog-grid table tbody {gap: 10vw;}

    .blog-item {width: 90vw;}

    /* SINGLE */

    .single #primary {grid-template-columns: 100%;}

    .related-posts .entry-header {margin: 0;}

    .related-posts {margin: 0 5vw;}

    /* FILES */

    .page-template-files .page-header-txt {
        max-width: 90vw;
    }

    .file-grid {margin: 30px 0;}

    .file-item {width: calc(90vw - 40px);}
    /* 404 */

    .error404 #background-2 {display: none;}

    /* FOOTER */

    footer {
        width: 90vw;
        margin: 0 5vw;
        padding: 10vw 0;
        height: auto;
        display: grid;
        font-size: var(--global--font-size-xs);
        grid-template-columns: 100%;
        grid-template-areas: 
            "footer-col-1"
            "footer-col-3"
            "footer-col-2";
    }

    .footer-col-3 {margin: 10vw 0;}

}