@charset "UTF-8";

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

NEIDE Theme, (C) 2024 NEIDE
NEIDE is distributed under the terms of the GNU GPL.
*/

@import url('https://fonts.googleapis.com/css2?family=Aleo:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,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: "Poppins", 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: "Poppins", serif;
	--global--font-secondary: "Aleo", 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-black: #221F20;
	--global--color-white: #F1F1E8;
    --global--color-blue: #003766;
    --global--color-green: #44988D;
    --global--color-pink: #9E1B6A;
    --global--color-yellow: #FBAF29;
    --global--color-gray: #848484;
	--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-green);
	text-decoration: none;
}

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

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: 600;
	letter-spacing: 0.03em;
	line-height: var(--global--line-height-heading);
	margin: 0;
    color: var(--global--color-pink);
}

h1 {font-size: var(--global--font-size-xl);}
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-sm);
    font-weight: 400;
    text-transform: lowercase;
    background-color: var(--global--color-green);
    color: var(--global--color-white);
    cursor: pointer;
    padding: 10px 30px;
    border: 2px solid var(--global--color-green) !important;
	border-radius: 30px;
    display: flex;
    align-items: center;
    position: relative;
    transition: 0.4s all;
    margin-left: 0;
    height: auto;
    z-index: 0;
    user-select: none;
    -webkit-user-select: none;
    line-height: 1;
}

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

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

.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;}

/* Tooltip */
/* START TOOLTIP STYLES */
[tooltip] {
  position: relative; /* opinion 1 */
}

/* Applies to all tooltips */
[tooltip]::before,
[tooltip]::after {
  text-transform: none; /* opinion 2 */
  font-size: 13px; /* opinion 3 */
  line-height: 1.25;
  user-select: none;
  pointer-events: none;
  position: absolute;
  display: none;
  opacity: 0;
}
[tooltip]::before {
  content: "";
  border: 5px solid transparent; /* opinion 4 */
  z-index: 1001; /* absurdity 1 */
}
[tooltip]::after {
  content: attr(tooltip); /* magic! */

  /* most of the rest of this is opinion */
  font-family: Helvetica, sans-serif;
  text-align: center;

  /* 
    Let the content set the size of the tooltips 
    but this will also keep them from being obnoxious
    */
  min-width: 300px;
  text-overflow: ellipsis;
  padding: 1ch 1.5ch;
  border-radius: 0.3ch;
  box-shadow: 0 1em 2em -0.5em rgba(0, 0, 0, 0.35);
  background: #333;
  color: #fff;
  z-index: 1000; /* absurdity 2 */
}

/* Make the tooltips respond to hover */
[tooltip]:hover::before,
[tooltip]:hover::after {
  display: block;
}

/* don't show empty tooltips */
[tooltip=""]::before,
[tooltip=""]::after {
  display: none !important;
}

/* FLOW: UP */
[tooltip]:not([flow])::before,
[tooltip][flow^="up"]::before {
  bottom: 100%;
  border-bottom-width: 0;
  border-top-color: #333;
}
[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::after {
  bottom: calc(100% + 5px);
}
[tooltip]:not([flow])::before,
[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::before,
[tooltip][flow^="up"]::after {
  left: 50%;
  transform: translate(-50%, -0.5em);
}

/* KEYFRAMES */
@keyframes tooltips-vert {
  to {
    opacity: 0.9;
    transform: translate(-50%, 0);
  }
}

@keyframes tooltips-horz {
  to {
    opacity: 0.9;
    transform: translate(0, -50%);
  }
}

/* FX All The Things */
[tooltip]:not([flow]):hover::before,
[tooltip]:not([flow]):hover::after,
[tooltip][flow^="up"]:hover::before,
[tooltip][flow^="up"]:hover::after {
  animation: tooltips-vert 300ms ease-out forwards;
}

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

.single-close {display: none;}

.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: transparent;
}

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

.header-principal.small {
    padding: 20px 3vw;
    background-color: var(--global--color-white);
    border-radius: 20px;
    margin: 1vw;
    width: 92vw;
}

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

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

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

.home .header-principal.normal .logo {
    filter: brightness(0) invert(1);
}

.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;
}

.home .header-principal.normal .menu .nav ul a {color: var(--global--color-white);}

.menu .nav ul li.current-menu-item a,
.home .header-principal.normal .menu .nav ul a:hover,
.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);
}

/*
* BACKGROUND
*/

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

.background-image {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
}

#background-1 {
    background-image: url('../neide/assets/images/neide-bg-1.svg');
    top: 20vh;
    right: -20vw;
    height: 750px;
    width: 750px;
}

#background-2 {
    background-image: url('../neide/assets/images/neide-bg-2.svg');
    bottom: -50px;
    left: -5vw;
    height: 400px;
    width: 400px;
}

.single .background {display: none;}

/*
FOOTER
*/

footer {
    margin: 1vw 0;
}

.footer-contact {
    display: grid;
    grid-template-areas: "contact-title contact-txt";
    grid-template-columns: 1fr 1fr;
    margin: 0 20vw;
    gap: 30px;
}

.footer-contact .section-title {
    margin-left: calc(100% - 300px);
    text-align: right;
    line-height: 1;
}

.footer-contact .footer-txt {margin: 80px 0 0;}

.footer-contact .footer-txt p {
    margin: 10px 0;
}

.footer-contact .footer-txt p a {
    text-decoration: none;
    font-weight: 600;
}

.footer-copyrights {margin: 80px 0 20px;}

.footer-copyrights p {
    font-size: 13px;
    margin: 5px 0;
}

.footer-coa a {
    font-size: 10px;
    text-decoration: none;
    color: var(--global--color-gray);
    opacity: 0.4;
    user-select: none;
    display: block;
    text-align: center;
}

/*
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-white);
    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));
}

.home #primary {padding: 0;}

.home-banner {
    background-color: var(--global--color-blue);
    height: 100vh;
    width: 100vw;
    position: relative;
    z-index: -2;
}

.banner-img {
    height: 100%;
    width: 100%;
    background-color: var(--global--color-blue);
    background-blend-mode: multiply;
    opacity: 0.5;
}

.banner-txt {
    position: absolute;
    bottom: 10vw;
    left: 3vw;
    width: 60vw;
    z-index: 1;
}

.banner-txt h1 {color: var(--global--color-yellow);}

.banner-txt p {
    color: var(--global--color-white);
    width: 60%;
}

.entry-content {margin: 0 5vw;}

.section-title {padding: 80px 0 0;}

ul.team {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 3vw 5vw;
}

ul.team li a {
    display: block;
    border-bottom: 2px solid var(--global--color-pink);
    width: calc((80vw - 15px)/3);
    padding: 0 0 15px;
    transition: 0.4s all ease-in-out;
    transform: scale(1);
    color: var(--global--color-gray);
    text-decoration: none;
}

ul.team li a strong {color: var(--global--color-black);}

ul.team li a:hover {
    color: var(--global--color-pink);
    padding: 5px 0 10px;
}

ul.team li a:hover strong {color: var(--global--color-pink);}

/*
** Section Projects
*/

.project-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 5vw;
    margin-top: 5vw;
}

.project-item {
    width: calc((80vw - 10px)/3);
    transition: 0.4s all ease-in-out;
}

.project-item a {
    display: grid;
    justify-items: center;
    text-decoration: none;
}

.project-item-txt {
    margin: 10px 0 0;
    text-align: center;
}

.project-item-txt p {margin: 5px 0;}

.project-image {
    width: 90px;
    height: 90px;
    padding: 30px;
    border-radius: 50%;
    border: 2px solid var(--global--color-gray);
    filter: grayscale(1) brightness(1);
    opacity: 0.5;
    transition: 0.4s all ease-in-out;
}

.project-item:hover {transform: scale(0.95);}

.project-item:hover .project-image {
    filter: grayscale(0) brightness(1);
    opacity: 1;
    border: 2px solid var(--global--color-green);
}

.project-item:hover .project-item-txt h3 {color: var(--global--color-green);}

.project-image-bg {
    width: 100%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.project-image .dashicons, 
.project-image .dashicons-before:before {
    color: var(--global--color-green);
    width: 90px !important;
    height: 90px !important;
    font-size: 75px !important;
    text-align: center !important;
}

ol.project-list {
  margin: 0 0 1em 0;
  padding: 0;
  counter-reset: li;
  list-style: none;
}

ol.project-list li {
  display: block;
  overflow: hidden;
  position: relative;
  padding-left: 50px;
  min-height: 35px;
  margin: 10px 0px 30px;
  padding-top: 4px;
}

ol.project-list li:before {
  position: absolute;
  top: -10px;
  left: 0px;
  text-align: center;
  font-size: var(--global--font-size-xl);
  font-weight: 700;
  color: var(--global--color-green);
  content: counter(li);
  counter-increment: li;
}

.project-list button {
    background-color: transparent;
    color: var(--global--color-green);
}

.project-list a:hover {
    background-color: transparent;
    color: var(--global--color-white);
}

.project-list button:hover {
    background-color: var(--global--color-green);
    color: var(--global--color-white);
}

.project-list a {
    display: table;
    margin: 10px 0 0;
}

/*
** Section News
*/

.news-grid {
    display: flex;
    gap: 1vw;
    width: 100vw;
    margin-top: 30px;
    margin-left: -5vw;
    flex-wrap: wrap;
}

.news-item {
    width: calc(97vw / 4);
    height: calc(97vw / 4);
    background-color: var(--global--color-gray);
    opacity: 0.2;
}

.news-txt {
    margin-top: 30px;
    text-align: center;
}

.news-txt a {
    font-size: var(--global--font-size-md);
    font-weight: 600;
    text-decoration: none;
}

.news-txt a i {margin-right: 10px;}

.news-txt p {
    margin: 5px 0 0;
    color: var(--global--color-gray);
}

/*
** Section Partners
*/

.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 {
    display: flex;
    justify-content: center;
    align-items: center;
}

/*
* SINGLE
*/

.single .project-footer img {
	width: 100%;
	margin-top: -50px;
}

.single .single-close {
    display: block;
    margin: 5vw 5vw 0;
    text-align: right;
}

.single .single-close a {display: inline-block;}

.single .single-close .material-icons {font-size: var(--global--font-size-lg);}

.single #primary {padding: 0 10vw 5vw;}

.single footer,
.single .header-principal {display: none;}

ul.team li a {width: calc((70vw - 15px)/3);}

.instagram-link a {
    font-size: var(--global--font-size-md);
    font-weight: 600;
    text-decoration: none;
}

.instagram-link a::before {
    margin-right: 10px;
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    display: inline-block;
    text-decoration: inherit;
    content: "\f16d";
}

.grid-events {
	display: flex;
	gap: 5vw;
	flex-wrap: wrap;
	margin: 30px 0;
}

.events-item {
    width: calc((70vw - 10px)/3);
    color: var(--global--color-black);
	transition: 0.3s all ease-in-out;
}

.events-item:hover {transform: scale(0.95);}

.events-item span {
    font-size: var(--global--font-size-xxs);
    background-color: var(--global--color-green);
    padding: 5px 10px;
    border-radius: 20px;
    color: var(--global--color-white);
    user-select: none;
}

.events-item .item-img {
    width: 100%;
    height: calc((70vw - 10px)/3);
    margin: 10px 0;
    border-radius: 20px;
    overflow: hidden;
	background-color: #44988d69;
    filter: grayscale(1);
	transition: 0.3s all ease-in-out;
}

.events-item .item-img img {
    width: 100%;
    height: 100%;
}

.events-item:hover .item-img {filter: grayscale(0);}

.events-item h4 {
	color: var(--global--color-black);
	transition: 0.3s all ease-in-out;
}

.events-item p {
    margin: 10px 0 0;
    color: var(--global--color-black);
	transition: 0.3s all ease-in-out;
}

.events-item:hover h4, .events-item:hover p {color: var(--global--color-green);}

/*
 * EQUIPE
 * */


.equipe-grid {
    margin: 50px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 5vw;
}

.equipe-item {
    align-items: end;
    width: calc((70vw - 10px)/3);
    height: 100%;
    position: relative;
    overflow: hidden;
    transition: 0.4s all;
    cursor: pointer;
	display: grid;
    grid-template-columns: auto 180px;
	grid-template-areas: "img txt" "bio bio";
	border-bottom: 2px solid var(--global--color-pink);
}

.equipe-img {
    width: 100%;
    height: calc((70vw - 10px)/3 - 180px);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: contain;
    background-blend-mode: normal;
    opacity: 1;
    transform: scale(1);
    transition: 0.4s all;
    -webkit-filter: grayscale(1)
		drop-shadow(5px 5px 0 #FFF)
		drop-shadow(-5px 5px 0 #FFF)
		drop-shadow(5px -5px 0 #FFF)
		drop-shadow(-5px -5px 0 #FFF);
    filter:	grayscale(1)
		drop-shadow(5px 5px 0 #FFF)
		drop-shadow(-5px 5px 0 #FFF)
		drop-shadow(5px -5px 0 #FFF)
		drop-shadow(-5px -5px 0 #FFF);
}

.equipe-bio {
	grid-area: bio;
    opacity: 1;
    transition: 0.4s all;
    display: none;
    font-size: var(--global--font-size-xs);
    padding: 13px 13px 0;
    z-index: 1;
	background-color: var(--global--color-pink);
    color: var(--global--color-white);
}

.equipe-item.active .equipe-bio {opacity: 1;}

.equipe-bio p:first-child {
    margin: 0 0 1em;
}

.equipe-text {text-align: right;}

.equipe-text span {
    font-size: var(--global--font-size-xs);
    line-height: 1.25;
    display: block;
    margin: 10px 0;
}

.equipe-item.active .equipe-img,
.equipe-item:hover .equipe-img{
    -webkit-filter: grayscale(0)
		drop-shadow(5px 5px 0 #FFF)
		drop-shadow(-5px 5px 0 #FFF)
		drop-shadow(5px -5px 0 #FFF)
		drop-shadow(-5px -5px 0 #FFF);
    filter:	grayscale(0)
		drop-shadow(5px 5px 0 #FFF)
		drop-shadow(-5px 5px 0 #FFF)
		drop-shadow(5px -5px 0 #FFF)
		drop-shadow(-5px -5px 0 #FFF);
}

.equipe-item.active .equipe-text span,
.equipe-item:hover .equipe-text span {color: var(--global--color-pink);}

/**
 * INSTAGRAM 
 **/

.sbi_bio {color: var(--global--color-gray) !important;}

.sbi_load_btn:hover,
.sbi_load_btn {
    background: transparent !important;
    border: 1px solid var(--global--color-green) !important;
    border-radius: 20px !important;
    color: var(--global--color-green) !important;
	cursor: pointer !important;
}

.sbi_load_btn:hover {
    background: var(--global--color-blue) !important;
    border: 1px solid var(--global--color-blue) !important;
    color: var(--global--color-white) !important;
}

.sbi_follow_btn a {
    background: transparent !important;
    color: transparent !important;
}

.sbi_follow_btn a svg,
.sbi_follow_btn a span {color: var(--global--color-green);}

.sbi_follow_btn a:hover {
    background: transparent !important;
    color: transparent !important;
}

.sbi_follow_btn a:hover svg,
.sbi_follow_btn a:hover span {color: var(--global--color-blue);}

/*
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: 50px;}

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

    .header-principal.small {
        padding: 5vw;
        background-color: var(--global--color-white);
        border-radius: 20px;
        margin: 3vw;
        width: calc(86vw - 10px);
    }

    .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-white);
        float: right;
        transform-origin: center center;
        transition: transform 250ms ease;
    }

    .header-principal.small .menu-toggle span {background-color: var(--global--color-blue);}

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

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

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

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

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

    .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-white);}
    
    .header-principal {
        grid-template-areas:
            "logo menu";
        grid-template-columns: auto 35px;
    }

    .menu-toggle {
        position: relative;
    }

    .menu .nav ul:not(.sub-menu) {display: inline-block;}

    .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;
    }

    .section-title {
        padding: 30px 0 0;
    }

    /* Banner */

    .banner-txt,
    .banner-txt p {width: 85vw;}

    .banner-txt {bottom: 40vw;}
    /* Team */

    ul.team li a {width: 90vw;}

    /* Projetos */
    
    .project-item {width: 100%;}

    /* News */
    
    .news-item {
        width: calc(99vw / 2);
        height: calc(99vw / 2);
    }
    
    /* Partners */

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

    /* Single */

    .single #primary {padding: 0 5vw 5vw;}

    .single ul.team li a {width: 80vw;}

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

    .equipe-item {width: calc((90vw - 10px));}

    .equipe-img {height: calc((90vw - 10px) - 180px);}

    .events-item {width: calc((90vw - 5vw) / 2);}

    .events-item .item-img {height: calc((90vw - 5vw) / 2);}

    /* FOOTER */

    .footer-contact {
        display: grid;
        grid-template-areas:
            "contact-title"
            "contact-txt";
        grid-template-columns: 100%;
        margin: 50px 5vw 5vw;
        gap: 0;
        text-align: center;
    }

    .footer-contact .section-title {
        margin-left: 0;
        text-align: center;
        line-height: 1;
    }

    .footer-contact .footer-txt {
        margin: 5px 0 0;
    }

    .footer-copyrights {
        margin: 50px 0 20px;
    }

    #background-2 {display: none;}
}