@charset "UTF-8";
/*
Theme Name: IRES
Theme URI: www.ires.cu
Author: Ernesto Castillo
Author URI: www.ires.cu
Description: IRES
Version: 1
*/

@import "fonts/lato.css";

:root {
	--ires-default-value: 8px;
	--ires-silver: #aeb9bb;
	--ires-brown: #8e715d;
	--ires-blue: #5cbdd0;
	--ires-green: #5ba879;
	--ires-light-green: #eaf7eb;
	--ires-primary-green: #2f6a00;
	--ires-red: #aa2222;
	--ires-dark-green: #05421f;
	--ires-dark: #272727;
	--ires-grey: #6a6a6a;
	
	--ires-symbol: url(images/brand/symbol.svg);
	--ires-logo: url(images/brand/logo.svg);
	--ires-logo-full: url(images/brand/logo_full.svg);
	
	/* Partners */
	--ires-fao: url(images/brand/_fao.svg);
	--ires-minag: url(images/brand/_minag.svg);
	--ires-gcf: url(images/brand/_gcf.svg);
	--ires-citma: url(images/brand/_citma.svg);
	
	--ires-x: url(images/x.svg);
	--ires-facebook: url(images/facebook.svg);
	--ires-youtube: url(images/youtube.svg);
	--ires-instagram: url(images/instagram.svg);
	
	--ires-email: url(images/email.svg);
	--ires-phone: url(images/phone.svg);
	--ires-download: url(images/download.svg);
	--ires-next: url(images/next.svg);
	--duration: 0.25s;
	--ires-gap: calc(var(--ires-default-value)*6);
}

* {
	padding: 0;
	margin: 0;
}

body {
	font-family: "Lato";
}

a {
	color: var(--ires-primary-green);
	text-decoration: none;
}

h1, h2, h3 {
	font-family: "LatoBlack";
}

h1 { font-size: xxx-large; }
h2 { font-size: xx-large; }
h3, h4 { font-size: x-large; }

h4, h5, h6 {
	font-family: "LatoBold";
}

.readmore {
	font-family: "LatoBold";
	font-size: large;
	color: #fff;
	background-color: var(--ires-primary-green);
	transition-property: background-color;
	transition-duration: var(--duration);
	display: inline-block;
	box-sizing: border-box;
	padding: calc(var(--ires-default-value)*2) calc(var(--ires-default-value)*3);
	&:hover {
		background-color: var(--ires-dark-green);
	}
}

.download-btn {
	display: block;
	width: calc(var(--ires-default-value)*6);
	aspect-ratio: 1/1;
	text-indent: -1000px;
	overflow: hidden;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	background-image: var(--ires-download);

}

.back {
	text-transform: uppercase;
	display: inline-flex;
	align-items: center;
	gap: var(--ires-default-value);
	&:before {
		content: "";
		border-top: #fff solid 1px;
		border-left: #fff solid 1px;
		display: inline-block;
		width: var(--ires-default-value);
		height: var(--ires-default-value);
		transform: rotate(-45deg);
	}
}

.ires-mssg {
	p {
		font-size: xx-large;
		text-align: center;
		padding: calc(var(--ires-default-value)*4);
	}
	&.ires-error-mssg {
		p {
			color: var(--ires-silver);
		}
	}
}

.main-wrapper {
	padding-left: 2em;
	padding-right: 2em;
	max-width: 1440px;
	margin-left: auto;
	margin-right: auto;
}

.img-wrapper {
	background-repeat: no-repeat;
	background-size: cover;
}

.square-format { aspect-ratio: 1/1; }

.flex-between-center {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.ires-2-column-layout {
	display: grid;
	gap: calc(var(--ires-default-value)*8);
	grid-template-columns: repeat(2, 1fr);
}

.no-content {
	color: white;
	width: 100vw;
	box-sizing: border-box;
	font-size: 64pt;
	text-align: center;
	padding: 1em 0;
	background-color: var(--ires-dark-green);
	font-family: "LatoBlack";
}

/* Main Sections */
.main-section {
	padding-top: calc(var(--ires-default-value)*8);
	padding-bottom: calc(var(--ires-default-value)*8);
	.main-wrapper {
		& > h2 {
			text-transform: uppercase;
			margin-bottom: 16px;
		}
	}
	&.light-main-section {
		background-color: var(--ires-light-green);
	}
	&.mid-main-section {
		background-color: var(--ires-green);
		h2 { a { color: #fff; } }
	}
	&.dark-main-section {
		background-color: var(--ires-dark-green);
		.main-wrapper {
			* {
				color: #fff;
			}
		}
	}
	&.page-layout {
		article {
			.article-content {
				display: flex;
				flex-direction: column;
				justify-content: center; 
				article {
					& > * {
						margin-bottom: calc(var(--ires-default-value)*2);
					}	
				}
			}
		}
	}
	&.news {
		.cards-content {
			grid-template-columns: repeat(5, 1fr);
			grid-template-rows: repeat(6, auto);
			gap: calc(var(--ires-default-value)*3);
			.ires-card {
				&:first-of-type {
					grid-column: 1/4;
					grid-row: 1/7;
				}
				&:nth-child(2), &:nth-child(3), &:last-of-type {
					grid-column: 4/6;
					padding: 0 !important;
					display: grid;
					grid-template-columns: repeat(4, 1fr);
					grid-template-rows: 1fr;
					gap:  calc(var(--ires-default-value)*3);
					.card-img, .card-content {
						grid-row: 1/2;
					}
					.card-img {
						grid-column: 1/3;
						aspect-ratio: auto;
					}
					.card-content {
						grid-column: 3/5;
						padding: 0 !important;
						display: flex;
						flex-direction: column;
						justify-content: center;
						h4 { font-size: large; }
					}
					.readmore {
						display: none !important;
					}
				}
				&:nth-child(2) {
					grid-row: 1/3;
				}
				&:nth-child(3) {
					grid-row: 3/5
				}
				&:last-of-type {
					grid-row: 5/7;
				}

			}
		}
	}
}

/* Main Menu */
.mobile-main-menu, .mobile-menu-btn { display: none; }

.main-menu {
	.menu {
		list-style: none;
		& > li {
			&.menu-item-has-children {
				position: relative;
				& > a {
					&::after {
						content: "";
						display: block;
						width: 8px;
						height: 8px;
						border-top: var(--ires-silver) solid 1px;
						border-right: var(--ires-silver) solid 1px;
						transform: rotate(135deg);
					}
				}
			}
			& > a {
				margin-left: var(--ires-default-value);
				margin-right: var(--ires-default-value);
				padding: 0.5em 0.75em;
				display: flex;
				align-items: center;
				gap: 0.5em;
			}
			
		}
		li {
			a {
				text-transform: uppercase;
				color: var(--ires-grey);
				&:hover {
					color: var(--ires-green );
					&::after {
						border-top-color:  var(--ires-green );
						border-right-color: var(--ires-green );
					}
				}
			}
		}
		.sub-menu {
			z-index: 1000;
			background-color: #fff;
			list-style: none;
			width: 15vw;
			box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
			li {
				a {
					padding: calc(var(--ires-default-value)*3);
					display: block;
				}
			}
		}
	}
}

.pc-main-menu {
	.menu {
		display: flex;
		& > li {
			&::last-of-type { border-right: none; }
			& > a {
				
			}
			&.menu-item-has-children {
				.sub-menu {
					display: none;
				}
				&:hover {
					.sub-menu { /* Temporal */
						display: block;
						position: absolute;
						left: 0;
						top: calc(var(--ires-default-value)*4);
					}
				}
			}
		}
	}
}

/* Header */
header {
	.main-wrapper {
		height: auto;
		padding-top: calc(var(--ires-default-value)*2);
		padding-bottom: calc(var(--ires-default-value)*2);
		/* Logo */
		.ires-brand {
			display: flex;
			align-items: center;
			gap: calc(var(--ires-default-value)*2);
			.logo {
				display: block;
				width: 148px;
				aspect-ratio: 7/3;
				height: auto;
				background-image: var(--ires-logo);
				background-size: contain;
				background-position: center;
				background-repeat: no-repeat;
				text-indent: -1000px;
				overflow: hidden;
			}
			.slogan {
				font-family: "LatoItalic";
				color: var(--ires-dark-green);
				font-size: x-large;
			}
		}
		
	}
}

/* Home Page */
.home {
	.ires-main {
		.main-wrapper {
			.ires-logo {
				background-image: var(--ires-logo-full);
				background-size: contain;
				background-position: center;
				background-repeat: no-repeat;
			}
			.ires-main-slider {
				width: 100%;
				aspect-ratio: 1/1;
				background-color: black;
				position: relative;
				overflow: hidden;
				.wp-block-gallery, .wp-block-gallery > .wp-block-image {
					display: block;
					position: absolute;
					width: 100% !important;
					height: 100%;
					box-sizing: border-box;
					top: 0;
					left: 0;
				}
				.wp-block-gallery {
					.wp-block-image {
						opacity: 0;
						animation: fadeSlide 21s infinite; 
					}
				}
			}
		}
	}
}

@keyframes fadeSlide {
  0% { opacity: 0; }
  15% { opacity: 1; }
  30% { opacity: 1; }
  45% { opacity: 0; }
  100% { opacity: 0; }
}

.ires-partners {
	padding-bottom: calc(var(--ires-default-value)*6);
	.menu {
		position: relative;
		top: calc(var(--ires-default-value)*4);
		list-style: none;
		padding: calc(var(--ires-default-value)*4);
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
		gap: calc(var(--ires-default-value)*3);
		li {
			&.fao {
				a {
					width: 231px;
					aspect-ratio: 231/50;
					background-image: var(--ires-fao);
				}
			}
			&.minag {
				a {
					width: 168px;
					aspect-ratio: 168/50;
					background-image: var(--ires-minag);
				}
			}
			&.gcf {
				a {
					width: 112px;
					aspect-ratio: 112/70;
					background-image: var(--ires-gcf);
				}
			}
			&.citma {
				
				a {
					width: 65px;
					aspect-ratio: 65/70;
					background-image: var(--ires-citma);
				}
			}
			a {
				
				display: block;
				background-size: contain;
				background-position: center;
				background-repeat: no-repeat;
				text-indent: -1000px;
				overflow: hidden;
			}
		}
	}
}

.main-heading {
	padding: calc(var(--ires-default-value)*4) 0 calc(var(--ires-default-value)*2) 0;
	background-color: var(--ires-dark-green);
	position: sticky;
	z-index: 100;
	top: 0;
	* {
		color: #fff;
	}
	h1 {
		text-transform: uppercase;
	}
}

.main-content {
	max-width: 900px;
	padding: calc(var(--ires-default-value)*3);
	background-color: #fff;
	margin-left: auto;
	margin-right: auto;
	strong {
		font-family: "LatoBlack";
		em {
			font-family: "LatoBlackItalic";
		}
	}
	p { margin-bottom: calc(var(--ires-default-value)*2); }
	.wp-block-image {
		text-align: center;
		img {
			max-width: 100%;
			margin-left: auto;
			margin-right: auto;
		}
	}
	
	ul, ol {
		margin-left: calc(var(--ires-default-value)*8);
		margin-bottom: calc(var(--ires-default-value)*3);
	}
	
	/* Social */
	.addtoany_content {
		display: flex;
		align-items: center;
		gap: var(--ires-default-value);
		& > * { margin-bottom: 0 !important; }
	}
}

.category-list {
	.main-wrapper {
		h2 {
			display: none;
		}
	}
}

.ires-title {
	display: flex;
	justify-content: space-between;
}

.cards-content {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax(320px, 1fr) );
	gap: calc(var(--ires-default-value)*3);
	
	.ires-card {
		position: relative;
		background-color: #fff;
		.card-img {
			background-position: center;
			background-size: cover;
		}
		.card-content {
			width: 100%;
			box-sizing: border-box;
			padding:  calc(var(--ires-default-value)*3)  calc(var(--ires-default-value)*3) calc(var(--ires-default-value)*10) calc(var(--ires-default-value)*3);
			h4 {
				margin-bottom: 8px;
			}
			.date {
				font-size: small;
				color: var(--ires-silver);
				margin-bottom: var(--ires-default-value);
			}
			.readmore {
				position: absolute;
				display: flex;
				align-items: center;
				width: 100%;
				height: 56px;
				justify-content: center;
				bottom: 0;
				left: 0;
			}
		}
	}
}

.ires-card-testimonio {
	overflow: hidden;
	.readmore, .card-img, .date {
		display: none !important;
	}
	.card-content {
		text-align: center;
		position: relative;
		padding: calc(var(--ires-default-value)*5) calc(var(--ires-default-value)*7) !important;
		display: flex;
		flex-direction: column-reverse;
		h4 {
			font-size: medium !important;
			color: var(--ires-green);
			padding-top: calc(var(--ires-default-value)*2);
			border-top: var(--ires-silver) solid 1px;
			text-transform: uppercase;
		}
		.excerpt {
			font-family: "LatoItalic";
			font-size: x-large;
			padding-bottom: calc(var(--ires-default-value)*2);
		}
		&::before {
			font-family: serif;
			content: '"';
			display: block;
			font-size: 120pt;
			position: absolute;
			top: calc((var(--ires-default-value)*2)*(-1));
			left: var(--ires-default-value);
			color: var(--ires-green);
		}
	}
}

.events-content {
	
	.events-img {
		aspect-ratio: 16/9;
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
	}
	.events-dates {
		border-bottom: var(--ires-silver) solid 1px;
		ul {
			display: flex;
			justify-content: space-between;
			align-items: center;
			list-style: none;
			margin: 0 !important;
			li {
				padding: calc(var(--ires-default-value)*2);
				span {
					font-size: x-small;
					letter-spacing: 2pt;
					text-transform: uppercase;
					color: var(--ires-grey);
				}
				p {
					font-family: "LatoBlack";
				}
			}
			.event-date-from {
				p { color: var(--ires-primary-green); }
			}
			.event-place {
				text-align: center;
				p {
					color: var(--ires-dark);
					text-transform: uppercase;
				}
			}
			.event-date-to {
				text-align: right;
				p { color: var(--ires-red); }
			}

		}
	}
	.excerpt {
		border-bottom: var(--ires-silver) solid 1px;
		padding: calc(var(--ires-default-value)*2) calc(var(--ires-default-value)*3) calc(var(--ires-default-value)*3) calc(var(--ires-default-value)*3);
	}
}

.documents-section {
	.documents-content {
		.documents-title {
			position: sticky;
			top: calc(var(--ires-default-value)*13);
			border-bottom: var(--ires-silver) solid 1px;
			text-transform: uppercase;
			font-size: large;
			font-family: "LatoBlack";
			color: var(--ires-dark-green);
			padding: calc(var(--ires-default-value)*2) var(--ires-default-value);
			background-color: #fff;
			z-index: 2;	
		}
		.documents-list {
			position: relative;
			z-index: 1;
			margin-bottom: calc(var(--ires-default-value)*2);
			.document-item {
				border-bottom: var(--ires-silver) solid 1px;
				padding: calc(var(--ires-default-value)*3) calc(var(--ires-default-value)*8) calc(var(--ires-default-value)*5) calc(var(--ires-default-value)*3);
				position: relative;
				h5 {
					font-size: large;
				}
				.download-btn {
					position: absolute;
					right: 0;
					top: calc(var(--ires-default-value)*2);
				}
			}
		}
	}
}

footer {
	.main-wrapper {
		padding-top: calc(var(--ires-default-value)*4);
		padding-bottom: calc(var(--ires-default-value)*4);
		.ires-footer-info {
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-top: var(--ires-silver) solid 1px;
			padding-top: calc(var(--ires-default-value)*3);
			gap: calc(var(--ires-default-value)*3);
			.widget_text {
				color: var(--ires-grey);
				display: flex;
				justify-content: flex-start;
				align-items: center;
				flex-direction: row-reverse;
				gap: calc(var(--ires-default-value)*3);
				&:after {
					content: url(images/brand/symbol.svg);
					width: calc(var(--ires-default-value)*5);
					height: auto;
				}
			}
		}
	}
}

#menu-social {
	display: flex;
	justify-content: flex-end;
	gap: calc(var(--ires-default-value)*4);
	list-style: none;
	li {
		a {
			display: block;
			width: calc(var(--ires-default-value)*3);
			aspect-ratio: 1/1;
			text-indent: -1000px;
			overflow: hidden;
			background-size: contain;
			&[href*='facebook.com'] {
				background-image: var(--ires-facebook);
			}
			&[href*='x.com'] {
				background-image: var(--ires-x);
			}
			&[href*='instagram.com'] {
				background-image: var(--ires-instagram);
			}
			&[href*='youtube.com'] {
				background-image: var(--ires-youtube);
			}
		}
	}
}

.contacts {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(4, auto);
	gap: var(--ires-gap);
	.ires-card-cargo {
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		gap: calc(var(--ires-default-value)*2);
		text-align: center;
		&:first-of-type,
		&:nth-child(2) {
			grid-column: 2/4;
			grid-row: 1/2;
		}
		&:nth-child(2) {
			grid-row: 2/3;
		}
		&:nth-child(3), &:nth-child(5)  {
			grid-column: 1/3;
		}
		&:nth-child(3), &:nth-child(4) {
			grid-row: 3/4;
		}
		&:nth-child(5), &:nth-child(6) {
			grid-row: 4/5;
		}
		&:nth-child(4), &:nth-child(6) {
			grid-column: 3/5;
		}
		.card-img {
			background-color: #ccc;
			width: calc(var(--ires-default-value)*40);
			border-radius: 50%;
			background-position: center;
			background-repeat: no-repeat;
			background-size: cover;
		}
		.card-content {
			width: 100%;
			.info {
				display: block;
				list-style: none;
				margin: 0 !important;
				.field {
					a {
						display: flex;
						justify-content: center;
						gap: var(--ires-default-value);
						font-size: x-large;
						padding: calc(var(--ires-default-value)*2) 0;
						&:before {
							content: "";
							display: block;
							width: calc(var(--ires-default-value)*4);
							aspect-ratio: 1/1;
						}
					}
				}
				.field-email {
					a {
						&:before {
							background-image: var(--ires-email);
						}
					}
				}
				.field-telf {
					border-bottom: var(--ires-silver) solid 1px;
					a {
						&:before {
							background-image: var(--ires-phone);
						}
					}
				}
			}
		}
	}
}

/* Tablet */
@media screen and ( max-width: 1280px ) {
	.main-section {
		&.news {
			.cards-content {
				display: flex;
				flex-direction: column;
				gap: calc(var(--ires-default-value)*3);
			}
		}
	}
	/*.mobile-main-menu, .mobile-menu-btn { display: block; }*/
	.mobile-menu-btn {
		width: calc(var(--ires-default-value)*6);
		height: calc(var(--ires-default-value)*6);
		position: relative;
		z-index: 2000;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		gap: calc(var(--ires-default-value)/2);
		background-color: #fff;
		border: none;
		&.btn-open {
			.line {
				&:first-of-type {
					transform: rotate(45deg);
					top: 5px;
				}
				&:nth-child(2) {
					opacity: 0;
				}
				&:last-of-type {
					transform: rotate(-45deg);
					top: -6px;
				}
			}
		}
		.line {
			position: relative;
			top: 0;
			display: block;
			height: 2px;
			width: calc(var(--ires-default-value)*3);
			background-color: var(--ires-primary-green);
			transition-property: opacity transform top;
			transition-duration: 0.25s;
			transition-timing-function: ease-out;
		}
	}
	.mobile-main-menu {
		right: -50vw;
		transition-property: right;
		transition-duration: 0.25s;
		transition-timing-function: ease-out;
		
		&.open {
			display: block;
			position: fixed;
			right: 0;
			top: 0;
			width: 50vw;
			height: 100vh;
			background-color: #fff;
			box-sizing: border-box;
			padding-top: calc(var(--ires-default-value)*9);
			border-left: var(--ires-silver) solid 1px;
			z-index: 1999;
			.menu {
				border-bottom: var(--ires-silver) solid 1px;
				.menu-item {
					border-top: var(--ires-silver) solid 1px;
					a {
						padding: calc(var(--ires-default-value)*3);
					}
				}
			}
			.menu-item-has-children {
				&:hover {
					.sub-menu {
						display: block;
						width: 100% !important;
						border-top: var(--ires-silver) solid 1px;
						border-bottom: var(--ires-silver) solid 1px;
						box-shadow: none;
						background-color: var(--ires-light-green);
					}
				}
			}
		}
		.sub-menu {
			display: none;
		}
	}
	.pc-main-menu {
		display: none;
	}
	header {
		.main-wrapper {
			.ires-brand {
				.logo {
					width: calc(var(--ires-default-value)*5);
					aspect-ratio: 1/1;
					background-image: var(--ires-symbol);
				}
			}
		}
	}
	
	.events-content {
		.events-dates {
			ul {
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				grid-template-rows: calc(var(--ires-default-value)*7) auto;
				gap: 0 calc(var(--ires-default-value)*2);
				li { padding: 0 !important; }
				.event-place {
					grid-column: 1/3;
					grid-row: 1/2;
				}
				.event-date-from,
				.event-date-to {
					grid-row: 2/3;
				}
				.event-date-from {
					grid-column: 1/2;
				}
				.event-date-to {
					grid-column: 2/3;
				}
			}
		}
	}
	
	/* Social */
	.addtoany_content {
		flex-direction: column;
		justify-content: center;
		gap: calc(var(--ires-default-value)*2) !important;
		.addtoany_list {
			a {
				padding: 0 calc(var(--ires-default-value)*3);
				border-right: var(--ires-silver) solid 1px;
				&:last-of-type {
					border-right: none;
				}
				& > span {
					&:first-of-type {
						width: 56px !important;
						height: 56px !important;
					}
				}
			}
		}
	}
	
	#menu-social {
		li {
			a {
				width: calc(var(--ires-default-value)*5);
			}
		}
	}

}

/* Middle BP */
@media screen and ( max-width: 1024px ) {
	footer {
		.main-wrapper {
			.ires-footer-info {
				flex-direction: column;
				/* display: block; */
				.widget_text {
					/* margin-bottom: calc(var(--ires-default-value)*4); */
				}
			}
		}
	}
}


/* Phone */
@media screen and ( max-width: 640px ) {
	/*.mobile-main-menu, .mobile-menu-btn { display: block; }*/
	header {
		
	}
	.mobile-main-menu {
		right: -100vw;
		
		&.open {
			width: 100vw;
		}
	}
	.ires-2-column-layout {
		display: flex;
		flex-direction: column;
		gap: calc(var(--ires-default-value)*4);
	}
	.home {
		.ires-main {
			.main-wrapper {
				.ires-logo {
					height: calc(var(--ires-default-value)*20);
				}
			}
		}
	}
	
	.ires-partners {
		.menu {
			flex-direction: column;
			gap: calc(var(--ires-default-value)*6);

		}
	}
		
	#menu-social {
		width: 100% !important;
		justify-content: space-between;
		padding: 0 calc(var(--ires-default-value)*4);
	}
	
	footer {
		.main-wrapper {
			.ires-footer-info {
				display: block;
				.widget_text {
					margin-bottom: calc(var(--ires-default-value)*4);
					flex-direction: column-reverse;
					border-bottom: var(--ires-silver) solid 1px;
					padding-bottom: calc(var(--ires-default-value)*2);
					&:after {
						width: calc(var(--ires-default-value)*10);
					}
				}
			}
		}
	}

}