/* CSS Document */
/* Documento creado por Adumbro */
/* https://adumbro.es */

/* FONTS *****************/
/* https://transfonter.org */
@font-face {
    font-family: 'Calistoga';
    src: url('font/Calistoga-Regular.woff2') format('woff2'),
        url('font/Calistoga-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'IBM Plex Sans';
    src: url('font/IBMPlexSans-Italic.woff2') format('woff2'),
        url('font/IBMPlexSans-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'IBM Plex Sans';
    src: url('font/IBMPlexSans-Regular.woff2') format('woff2'),
        url('font/IBMPlexSans-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* GENERAL *****************/
* {
	margin: 0px;
	padding: 0px;
    box-sizing: border-box;
}
html {
    display: block; width: 100%; height: 100%;
    font-family: 'IBM Plex Sans', sans-serif; font-weight: normal;
    /* calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width]))); */
    font-size: calc(12px + (18 - 12) * ((100vw - 300px) / (1800 - 300)));
    background-color: #F6F6F6; color: #1A1A1A;
}
body {
    display: block; width: 100%; height: 100%;
    background-color: #F6F6F6; color: #1A1A1A;
}
html.anchored, html.anchored body {overflow: hidden;}

div#page {display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; grid-column-gap: 0px; grid-row-gap: 0px; min-height: 100%; max-width: 100%; position: relative;}
div#page header.main {grid-area: 1 / 1 / 2 / 2; width: 100%; overflow: hidden;}
div#page main {grid-area: 2 / 1 / 3 / 2; width: 100%; overflow: hidden;}
div#page footer.main {grid-area: 3 / 1 / 4 / 2; width: 100%; overflow: hidden;}

h1, h2, h3, h4, h5, h6 {font-family: 'Calistoga'; font-weight: normal; color: #06517D;}
p {display: block;}
a {color: #06517D; text-decoration: underline;}
button, input, select, textarea {background: none; color: inherit; border: none; font: inherit; cursor: pointer; outline: none !important; -moz-appearance: none; -webkit-appearance: none; appearance: none;}
img {max-width: 100%; height: auto;}

.btn {display: inline-block; padding: .5rem 1rem; background-color: #06517D !important; color: #F6F6F6 !important; border-radius: .5rem; text-transform: uppercase; font-size: 1rem; line-height: 1.1rem; transition: transform .3s;}
.btn.arrow {padding-right: 3rem; background-image: url('img/btn_arrow_w.svg'); background-position: right 1rem center; background-size: 1rem; background-repeat: no-repeat;}
.btn.alt {background-color: #F6F6F6 !important; color: #06517D !important;}
.btn.alt.arrow {background-image: url('img/btn_arrow_b.svg');}
.btn:hover {background-color: #44CCFF !important; color: #1A1A1A !important;}
.btn:active {transform: scale(.9); transition: none;}
.btn.arrow:hover, .btn.arrow:active {background-image: url('img/btn_arrow_b.svg');}
a.btn {text-decoration: none !important; box-shadow: none !important;}
.lnk {text-decoration: underline; color: #06517D;}
.lnk.alt {text-decoration: underline; color: #FFF;}
.lnk:hover {text-decoration: none; background-color: #06517D; color: #FFF; box-shadow: 0.2em 0 0 #06517D, -0.2em 0 0 #06517D;}
.lnk.alt:hover {text-decoration: none; background-color: #FFF; color: #06517D; box-shadow: 0.2em 0 0 #FFF, -0.2em 0 0 #FFF;}
.lnk:active,
.lnk.alt:active {text-decoration: none; background-color: #44CCFF; color: #06517D; box-shadow: 0.2em 0 0 #44CCFF, -0.2em 0 0 #44CCFF;}

.html_editor h1 {font-size: 1.8rem; padding: .5rem 0 1.4rem 0;}
.html_editor h2 {font-size: 1.6rem; padding: .5rem 0 1.4rem 0;}
.html_editor h3 {font-size: 1.4rem; padding: .5rem 0 1.2rem 0;}
.html_editor h4 {font-size: 1.2rem; padding: .5rem 0 1.2rem 0;}
.html_editor h5 {font-size: 1.1rem; padding: .5rem 0 1rem 0;}
.html_editor h6 {font-size: 1rem; padding: .5rem 0 1rem 0;}
.html_editor p {font-size: 1rem; padding-bottom: 1rem;}
.html_editor ul, .html_editor ol {padding: 0 0 .5rem 2rem;}
.html_editor dl {padding-bottom: .5rem;}
.html_editor ul li, .html_editor ol li, .html_editor dl dt, .html_editor dl dd {font-size: 1rem; color: #1A1A1A; padding-bottom: .5rem;}
.html_editor dt {font-weight: bold;}
.html_editor a:not(.raw) {color: #06517D; text-decoration: underline;}
.html_editor a:not(.raw):hover {text-decoration: none; color: #F6F6F6; background-color: #06517D; box-shadow: 0.2em 0 0 #06517D, -0.2em 0 0 #06517D;}
.html_editor table {font-size: 1rem; background-color: #F6F6F6; width: 100%; text-align: left; border-collapse: collapse; margin-bottom: 1rem;}
.html_editor table thead {background-color: #06517D; color: #F6F6F6; font-weight: bold;}
.html_editor table th {background-color: #06517D; color: #F6F6F6; font-size: .9rem; font-weight: bold; white-space: nowrap; padding: .5rem; text-transform: uppercase; border-bottom: 1px solid #F6F6F6;}
.html_editor table td {padding: .5rem; border-bottom: 1px solid #06517D; vertical-align: top;}
.html_editor img {display: block; max-width: 100%; max-height: 50vw; margin: 1rem auto 2rem;}

ul.rrss {display: inline-block; list-style: none; line-height: 0;}
ul.rrss li {display: inline-block; width: 2rem; height: auto; margin: .5rem .25rem; aspect-ratio: 1; position: relative;}
ul.rrss li a {display: block; width: 100%; height: 100%; background-color: transparent; background-repeat: no-repeat; background-position: center center; background-size: contain;}
ul.rrss li a:hover {transform: scale(1.05);}
ul.rrss li a:active {transform: scale(.95);}
ul.rrss li.insta a {background-image: url('img/rrss_insta.png');}
ul.rrss li.tiktok a {background-image: url('img/rrss_tiktok.png');}
ul.rrss li.x a {background-image: url('img/rrss_x.png');}
ul.rrss li.youtube a {background-image: url('img/rrss_youtube.png');}
ul.rrss li.messenger a {background-image: url('img/rrss_messenger.png');}
ul.rrss li.linkedin a {background-image: url('img/rrss_linkedin.png');}
ul.rrss li a span {display: none;}

.loading::after {
	display: inline-block; content: ""; width: 2rem; height: auto; aspect-ratio: 1;
    border: 3px solid #FFF; border-top: 3px solid #44CCFF;
    border-radius: 50%; box-sizing: border-box;
    animation: spin 1s linear infinite;
}
.loading span {display: none;}
div.load_more {padding: 2rem; background-color: #C7F0FF; text-align: center; border-radius: .5rem;}
div.load_more:not(.is_loading) div.loading,
div.load_more.is_loading button {display: none;}
/* KEYFRAMES *****************/
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ESPECÍFICO *****************/
div#menu {
	display: none; flex-flow: column nowrap; justify-content: center; align-items: center;
	position: fixed; bottom: 0; left: 0; right: 0; top: 0; width: 100%; height: 100%;
	background-color: rgba(6,81,125,.9); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
	z-index: 50; overflow-y: auto;
}
div#menu.show {display: flex;}
div#menu h2 {display: block; width: 6rem; height: auto; aspect-ratio: 3/4; background: transparent url('img/comef_logo_w.svg') no-repeat top left; background-size: contain; margin-bottom: 2rem;}
div#menu h2 span {display: none;}
div#menu nav {display: inline-block; width: auto; height: auto;}
div#menu nav ul {display: inline-block; width: auto; height: auto; list-style: none; text-align: center;}
div#menu nav ul li {display: block; padding-bottom: .2rem;}
div#menu nav ul li a {display: inline-block; color: #FFF; font-size: 1.2rem; text-transform: uppercase; text-decoration: none; padding: .5rem;}
div#menu nav ul li a:hover {background-color: #FFF; color: #06517D; box-shadow: 0.5em 0 0 #FFF, -0.5em 0 0 #FFF;}
div#menu nav ul li a:active {transform: scale(.9);}
div#menu button.close {display: block; width: 2rem; height: auto; aspect-ratio: 1; background: transparent url('img/btn_menu_close_w.svg') no-repeat center center; background-size: contain; position: fixed; top: 3rem; right: 3rem;}
div#menu button.close:active {transform: scale(.9);}
div#menu button.close span {display: none;}
@media (max-height: 500px) {
	div#menu h2 {display: none;}
}

header.main h1 {display: block; width: 6rem; height: auto; aspect-ratio: 3/4; background: transparent url('img/comef_logo_b.svg') no-repeat top left; background-size: contain;}
header.main h1 a {display: block; width: 100%; height: 100%;}
header.main h1 span {display: none;}
header.main button.menu {display: block; width: 2rem; height: auto; aspect-ratio: 1; background: transparent url('img/btn_menu_b.svg') no-repeat center center; background-size: contain;}
header.main button.menu:active {transform: scale(.9);}
header.main button.menu span {display: none;}
header.main.generic {display: grid; grid-template-columns: 4rem 1fr; grid-template-rows: repeat(2, auto); grid-column-gap: 1rem; grid-row-gap: 10px; padding: 2rem; background-color: #44CCFF;}
header.main.generic h1 {width: 4rem; background-image: url('img/comef_logo_w.svg'); grid-area: 1 / 1 / 3 / 2; justify-self: start; align-self: start;}
header.main.generic button.menu {grid-area: 1 / 2 / 2 / 3; justify-self: end; align-self: start; background-image: url('img/btn_menu_w.svg');}
header.main.generic p.slogan {grid-area: 2 / 2 / 3 / 3; justify-self: end; align-self: end; text-align: right; color: #fff; font-style: italic; font-size: 1.1rem; line-height: 1.2rem;}
header.main.carousel {display: block; width: 100%; height: auto; position: relative;}
header.main.carousel h1 {position: absolute; top: 3rem; left: 3rem; z-index: 3;}
header.main.carousel button.menu {display: block; position: absolute; top: 3rem; right: 3rem; z-index: 3;}
div#carousel {display: block; width: 100%; height: auto; position: relative;}
div#carousel div.group {
	display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: stretch; gap: 0; width: 100%; min-width: 100%; max-width: 100%; min-height: 50vw; padding-bottom: 2rem;
	overflow: hidden; overflow-x: visible; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none !important;
}
div#carousel div.group div.block {
	flex: 0 0 100%; scroll-snap-align: center;
	display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: 1fr; justify-items: stretch; align-items: end; grid-column-gap: 1rem; grid-row-gap: 0px;
}
div#carousel div.group div.block.ban_a.var_1 {background-color: #E7A7B8;}
div#carousel div.group div.block.ban_a.var_2 {background-color: #B8E7A7;}
div#carousel div.group div.block.ban_a.var_3 {background-color: #A7B8E7;}
div#carousel div.group div.block.ban_b {grid-template-columns: 2fr 1fr; background-color: #A7B8E7;}
div#carousel div.group div.block div.cell {display: block; width: 100%; height: 100%;}
div#carousel div.group div.block div.cell.img {grid-area: 1 / 1 / 2 / 2; padding-top: 2rem;}
div#carousel div.group div.block div.cell.img::before {display: block; content: ""; width: 100%; height: 100%; background-color: transparent; background-repeat: no-repeat; background-position: bottom right; background-size: contain;}
div#carousel div.group div.block.ban_a.var_1 div.cell.img::before {background-image: url('img/character_a.png');}
div#carousel div.group div.block.ban_a.var_2 div.cell.img::before {background-image: url('img/character_b.png');}
div#carousel div.group div.block.ban_a.var_3 div.cell.img::before {background-image: url('img/character_c.png');}
div#carousel div.group div.block.ban_b div.cell.img::before {background-image: url('img/characters_group_a.png'); background-position: bottom center;}
div#carousel div.group div.block div.cell.txt {grid-area: 1 / 2 / 2 / 3; padding-top: 6rem; display: flex; flex-flow: column nowrap; justify-content: center; align-items: flex-start; gap: 0;}
div#carousel div.group div.block div.cell div.msg {display: block; padding: 0 3rem 0 0;}
div#carousel div.group div.block div.cell div.msg h2 {display: block; color: #06517D; font-size: 2.8rem; line-height: 2.8rem; padding-bottom: 1rem;}
div#carousel div.group div.block div.cell div.msg p {display: block; font-size: 1.2rem; padding-bottom: 1rem; opacity: .9;}
div#carousel ul.pag {display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: stretch; gap: .8rem; position: absolute; bottom: 5rem; left: 3rem; z-index: 3; list-style: none;}
div#carousel ul.pag li {display: block; width: 1rem; height: auto;}
div#carousel ul.pag li a {display: block; width: 100%; height: auto; aspect-ratio: 1; background-color: transparent; border: 2px solid #FFF; border-radius: 50%;}
div#carousel ul.pag li.sel a {background-color: #FFF;}
div#carousel ul.pag li a span {display: none;}
div#carousel div.group div.block div.cell div.activities {display: inline-block; background-color: rgba(255, 255, 255, .5); max-width: 27rem; padding: 1rem 8.5rem 1rem 1rem; margin: 3rem 7rem 1rem 0; border-radius: .5rem; position: relative;}
div#carousel div.group div.block div.cell div.activities h3 {color: #06517D; font-family: 'IBM Plex Sans'; font-size: 1.2rem; padding-bottom: 1rem;}
div#carousel div.group div.block div.cell div.activities::after {
	display: block; content: ""; width: 14rem; aspect-ratio: 1; position: absolute; bottom: -2rem; right: -6rem;
	background: transparent url('img/icon_check.png') no-repeat bottom left; background-size: contain;
}
@media (max-width: 800px) {
	div#carousel div.group div.block div.cell div.msg h2 {font-size: 2rem; line-height: 2rem;}
}
@media (max-width: 600px) {
	div#carousel div.group div.block,
 	div#carousel div.group div.block.ban_b {grid-template-columns: 1fr; grid-template-rows:repeat(2, auto);}
	div#carousel div.group div.block div.cell.img {grid-area: 2 / 1 / 3 / 2; aspect-ratio: 2/1; width: auto; height: 100%;}
	div#carousel div.group div.block.ban_b div.cell.img::before {background-size: 110% auto;}
	div#carousel div.group div.block div.cell.txt {grid-area: 1 / 1 / 2 / 2; padding: 14rem 3rem 0px;}
	div#carousel div.group div.block div.cell.img {padding-top: 0;}
	div#carousel div.group div.block div.cell div.msg {padding: 0;}
	div#carousel div.group div.block div.cell div.activities {max-width: none; padding: 1rem; margin: 1rem 0 1rem 0;}
	div#carousel div.group div.block div.cell div.activities::after {display: none;}
}

section#interest_links {display: block; padding: 2rem 3rem;}
section#interest_links h1 {display: none;}
section#interest_links ul {display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: 1fr; justify-items: stretch; align-items: stretch; grid-column-gap: 2rem; grid-row-gap: 0px; list-style: none;}
section#interest_links ul li {display: block; width: 100%; height: 16rem;}
section#interest_links ul li a {display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr auto; justify-items: center; align-items: center; grid-column-gap: 0px; grid-row-gap: .5rem; width: 100%; height: 100%; text-decoration: none;}
section#interest_links ul li a div.ico {display: block; position: relative;}
section#interest_links ul li a div.ico::before {display: block; content: ""; width: 10rem; height: auto; aspect-ratio: 1; position: absolute; top: 50%; transform: translate(-50%, -50%); background-color: #44CCFF; opacity: .3; border-radius: 50%; transition: all 1s; z-index: 1;}
section#interest_links ul li a:hover div.ico::before {background-color: #63D471;}
section#interest_links ul li a div.ico::after {display: block; content: ""; width: 10rem; height: auto; aspect-ratio: 1; background-color: transparent; background-repeat: no-repeat; background-position: center center; background-size: contain; position: relative; transition: all 1s; z-index: 2;}
section#interest_links ul li.kit a div.ico::before {left: 60%;}
section#interest_links ul li.kit a:hover div.ico::before {left: 40%;}
section#interest_links ul li.kit a div.ico::after {background-image: url('img/icon_kit.png'); transform: translateX(-10%);}
section#interest_links ul li.kit a:hover div.ico::after { transform: translateX(10%);}
section#interest_links ul li.plane a div.ico::before {left: 40%;}
section#interest_links ul li.plane a:hover div.ico::before {left: 60%;}
section#interest_links ul li.plane a div.ico::after {background-image: url('img/icon_plane.png'); transform: translate(10%, -10%);}
section#interest_links ul li.plane a:hover div.ico::after {transform: translate(-10%, 10%);}
section#interest_links ul li.mega a div.ico::before {left: 40%;}
section#interest_links ul li.mega a:hover div.ico::before {left: 60%;}
section#interest_links ul li.mega a div.ico::after {background-image: url('img/icon_mega.png'); transform: translate(10%, 10%);}
section#interest_links ul li.mega a:hover div.ico::after {transform: translate(-10%, -10%);}
section#interest_links ul li.hat a div.ico::before {left: 60%;}
section#interest_links ul li.hat a:hover div.ico::before {left: 40%;}
section#interest_links ul li.hat a div.ico::after {background-image: url('img/icon_hat.png'); transform: translateX(-10%);}
section#interest_links ul li.hat a:hover div.ico::after {transform: translateX(10%);}
section#interest_links ul li a div.lbl {display: block; text-align: center; max-width: 10rem; font-size: 1.8rem; line-height: 2rem; font-family: 'Calistoga'; font-weight: normal; color: #06517D; transition: all 1s;}
section#interest_links ul li a:hover div.lbl {color: #428D4B;}
@media (max-width: 900px) {
	section#interest_links ul {grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); grid-row-gap: 2rem;}
}
@media (max-width: 400px) {
	section#interest_links ul {grid-template-columns: auto; grid-template-rows: repeat(4, 1fr); grid-row-gap: 2rem;}
}

section#last_news {display: block; padding: 2rem 3rem;}
section#last_news header.news {display: grid; grid-template-columns: auto 1fr; grid-template-rows: 1fr; justify-items: end; align-items: center; grid-column-gap: 1rem; grid-row-gap: 0; padding-bottom: 2rem;}
section#last_news header.news div.title {display: flex; align-items: center; padding-left: 7rem; position: relative; height: 6rem;}
section#last_news header.news div.title::before {display: block; content: ""; width: 6rem; height: auto; aspect-ratio: 1; position: absolute; top: 0; left: 0; background-color: #44CCFF; opacity: .3; border-radius: 50%; z-index: 1;}
section#last_news header.news div.title::after {display: block; content: ""; width: 6rem; height: auto; aspect-ratio: 1; position: absolute; top: 0; left: 0; background: transparent url('img/icon_news.png') no-repeat center center; background-size: contain; z-index: 2;}
section#last_news header.news div.title h1 {display: inline; font-size: 2.5rem; vertical-align: middle;}
section#last_news div.articles {
	display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); justify-items: stretch; align-items: start; grid-column-gap: 3rem; grid-row-gap: 2rem;
}
section#last_news div.articles article.a1 { grid-area: 1 / 1 / 3 / 3; text-align: center;}
section#last_news div.articles article.a2 { grid-area: 1 / 3 / 2 / 4; text-align: left;}
section#last_news div.articles article.a3 { grid-area: 2 / 3 / 3 / 4; align-self: end; text-align: left;}
section#last_news div.articles article figure {display: block; width: 100%; aspect-ratio: 3/2; overflow: hidden; border-radius: .5rem; position: relative;}
section#last_news div.articles article figure:hover {outline: 6px solid #44CCFF;}
section#last_news div.articles article figure a {display: block; width: 100%; height: 100%; cursor: pointer;}
section#last_news div.articles article figure img {display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 1s;}
section#last_news div.articles article figure a:hover img {transform: scale(1.1);}
section#last_news div.articles article.a1 header.post {padding: 1rem 0px; display: grid; grid-template-columns: 1fr; grid-template-rows: repeat(3, auto); grid-column-gap: 0; grid-row-gap: 1rem;}
section#last_news div.articles article.a1 header.post p.classif { grid-area: 1 / 1 / 2 / 2; }
section#last_news div.articles article.a1 header.post h1 { grid-area: 2 / 1 / 3 / 2; display: block;}
section#last_news div.articles article.a1 header.post p.date { grid-area: 3 / 1 / 4 / 2; }
section#last_news div.articles article header.post h1 a {display: inline-block; text-decoration: none; font-size: 1.5rem; line-height: 1.8rem; position: relative;}
section#last_news div.articles article header.post h1 a:hover {text-decoration: underline;}
section#last_news div.articles article.a1 header.post h1 a {font-size: 2rem; line-height: 2.3rem}
section#last_news div.articles article header.post p.classif {font-size: 1.1rem; color: #44CCFF; text-transform: uppercase; font-weight: bold;}
section#last_news div.articles article header.post p.date {font-size: .9rem; color: #06517D; font-style: italic;}
section#last_news div.articles article:not(.a1) header.post {display: grid; grid-template-columns: auto 1fr; grid-template-rows: repeat(2, auto); grid-column-gap: 1rem; grid-row-gap: .5rem; padding-top: 1rem;}
section#last_news div.articles article:not(.a1) header.post p.classif { grid-area: 1 / 1 / 2 / 2; align-self: end;}
section#last_news div.articles article:not(.a1) header.post p.date  { grid-area: 1 / 2 / 2 / 3; align-self: end;}
section#last_news div.articles article:not(.a1) header.post h1  { grid-area: 2 / 1 / 3 / 3;}
section#last_news div.articles article.a1 div.summary p {padding-bottom: .5rem;}
section#last_news div.articles article.a1 div.summary a.btn {margin-top: 1rem;}
section#last_news div.articles article:not(.a1) div.summary {display: none;}
section#last_news div.articles article:not(.a1) header.post h1 a::after {display: inline-block; content: ""; width: 1rem; height: 1rem; margin-left: .5rem; background: transparent url('img/btn_arrow_b.svg') no-repeat center bottom; background-size: contain;}
@media (max-width: 1200px) {
	section#last_news div.articles {grid-template-columns: repeat(5, 1fr);}
	section#last_news div.articles article.a1 { grid-area: 1 / 1 / 3 / 4; }
	section#last_news div.articles article.a2 { grid-area: 1 / 4 / 2 / 6; }
	section#last_news div.articles article.a3 { grid-area: 2 / 4 / 3 / 6; }
}
@media (max-width: 700px) {
	section#last_news {padding-bottom: 0px;}
	section#last_news div.articles {display: block;}
	section#last_news div.articles article {padding-bottom: 3rem;}
}
@media (max-width: 500px) {
	section#last_news header.news {display: block;}
	section#last_news header.news div.opt {text-align: right;}
}

section#last_photos {display: block; padding: 2rem 0;}
section#last_photos header.photos {display: grid; grid-template-columns: auto 1fr; grid-template-rows: 1fr; justify-items: end; align-items: center; grid-column-gap: 1rem; grid-row-gap: 0; padding: 2rem 3rem;}
section#last_photos header.photos div.title {display: flex; align-items: center; padding-left: 7rem; position: relative; height: 6rem;}
section#last_photos header.photos div.title::before {display: block; content: ""; width: 6rem; height: auto; aspect-ratio: 1; position: absolute; top: 0; left: 0; background-color: #44CCFF; opacity: .3; border-radius: 50%; z-index: 1;}
section#last_photos header.photos div.title::after {display: block; content: ""; width: 6rem; height: auto; aspect-ratio: 1; position: absolute; top: 0; left: 0; background: transparent url('img/icon_photo.png') no-repeat center center; background-size: contain; z-index: 2;}
section#last_photos header.photos div.title h1 {display: inline; font-size: 2.5rem; vertical-align: middle;}
section#last_photos div.gallery {display: block; width: 100%; height: auto; position: relative;}
section#last_photos div.gallery div.group {
	display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: stretch; gap: 1rem; width: 100%; height: auto; min-width: 100%; max-width: 100%; padding: 1rem 3rem 2rem 3rem;
	overflow: hidden; overflow-x: visible; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none !important;
}
section#last_photos div.gallery div.group figure {
	flex: 0 0 20rem; scroll-snap-align: center;
	display: block; width: 20rem; aspect-ratio: 1; overflow: hidden; border-radius: .5rem; position: relative;
}
section#last_photos div.gallery div.group figure:hover {outline: 6px solid #44CCFF;}
section#last_photos div.gallery div.group figure a {display: block; width: 100%; height: 100%; cursor: pointer;}
section#last_photos div.gallery div.group figure img {display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 1s;}
section#last_photos div.gallery div.group figure a:hover img {transform: scale(1.2);}
section#last_photos div.gallery div.group figure a figcaption {display: inline-block; padding: .2rem .5rem; height: auto; position: absolute; bottom: 1rem; left: 0; max-width: 90%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.2rem; font-family: 'Calistoga'; font-weight: normal; background-color: #F7F7F7; color: #06517D; border-top-right-radius: .5rem; border-bottom-right-radius: .5rem;}
section#last_photos div.gallery div.group figure a:hover figcaption {background-color: #44CCFF; color: #FFF;}
section#last_photos div.gallery div.btns {display: block; text-align: right; margin: 0 2.5rem;}
section#last_photos div.gallery div.btns button {display: inline-block; width: 2rem; aspect-ratio: 1; border-radius: .5rem; margin: .2rem .5rem; background-color: #06517D; background-image: url('img/btn_arrow_w.svg'); background-position: center center; background-size: 1rem auto; background-repeat: no-repeat;}
section#last_photos div.gallery div.btns button.next {background-image: url('img/btn_next_w.svg');}
section#last_photos div.gallery div.btns button.prev {background-image: url('img/btn_prev_w.svg');}
section#last_photos div.gallery div.btns button:hover {background-color: #44CCFF;}
section#last_photos div.gallery div.btns button.next:hover:not(:disabled) {background-image: url('img/btn_next_b.svg');}
section#last_photos div.gallery div.btns button.prev:hover:not(:disabled) {background-image: url('img/btn_prev_b.svg');}
section#last_photos div.gallery div.btns button:active:not(:disabled) {transform: scale(.9);}
section#last_photos div.gallery div.btns button:disabled {background-color: #ccc;}
section#last_photos div.gallery div.btns button span {display: none;}
@media (max-width: 500px) {
	section#last_photos header.photos {display: block;}
	section#last_photos header.photos div.opt {text-align: right;}
}

div#photos_list {display: block; padding: 2rem 0;}
div#photos_list header.photos {display: block; padding: 0px 3rem 2rem;}
div#photos_list header.photos div.title {display: flex; align-items: center; padding-left: 7rem; position: relative; height: 6rem;}
div#photos_list header.photos div.title::before {display: block; content: ""; width: 6rem; height: auto; aspect-ratio: 1; position: absolute; top: 0; left: 0; background-color: #44CCFF; opacity: .3; border-radius: 50%; z-index: 1;}
div#photos_list header.photos div.title::after {display: block; content: ""; width: 6rem; height: auto; aspect-ratio: 1; position: absolute; top: 0; left: 0; background: transparent url('img/icon_photo.png') no-repeat center center; background-size: contain; z-index: 2;}
div#photos_list header.photos div.title h1 {display: inline; font-size: 2.5rem; vertical-align: middle;}
div#photos_list h2 {display: block; padding: 0 3rem; font-size: 2rem; line-height: 2.2rem;}
div#photos_list div.gallery {display: block; width: 100%; height: auto; position: relative; margin-bottom: 2rem;}
div#photos_list div.gallery div.group {
	display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: stretch; gap: 1rem; width: 100%; height: auto; min-width: 100%; max-width: 100%; padding: 1rem 3rem 2rem 3rem;
	overflow: hidden; overflow-x: visible; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none !important;
}
div#photos_list div.gallery div.group figure {
	flex: 0 0 20rem; scroll-snap-align: center;
	display: block; width: 20rem; aspect-ratio: 1; overflow: hidden; border-radius: .5rem; position: relative;
}
div#photos_list div.gallery div.group figure:hover {outline: 6px solid #44CCFF;}
div#photos_list div.gallery div.group figure a {display: block; width: 100%; height: 100%; cursor: pointer;}
div#photos_list div.gallery div.group figure img {display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 1s;}
div#photos_list div.gallery div.group figure a:hover img {transform: scale(1.2);}
div#photos_list div.gallery div.btns {display: block; text-align: right; margin: 0 2.5rem;}
div#photos_list div.gallery div.btns button {display: inline-block; width: 2rem; aspect-ratio: 1; border-radius: .5rem; margin: .2rem .5rem; background-color: #06517D; background-image: url('img/btn_arrow_w.svg'); background-position: center center; background-size: 1rem auto; background-repeat: no-repeat;}
div#photos_list div.gallery div.btns button.next {background-image: url('img/btn_next_w.svg');}
div#photos_list div.gallery div.btns button.prev {background-image: url('img/btn_prev_w.svg');}
div#photos_list div.gallery div.btns button:hover {background-color: #44CCFF;}
div#photos_list div.gallery div.btns button.next:hover:not(:disabled) {background-image: url('img/btn_next_b.svg');}
div#photos_list div.gallery div.btns button.prev:hover:not(:disabled) {background-image: url('img/btn_prev_b.svg');}
div#photos_list div.gallery div.btns button:active:not(:disabled) {transform: scale(.9);}
div#photos_list div.gallery div.btns button:disabled {background-color: #ccc;}
div#photos_list div.gallery div.btns button span {display: none;}
div#photos_list div.load_more {margin: 0 3rem;}

section#follow_us {display: block; background-color: #A7B8E7; margin-top: 2rem;}
section#follow_us div.block {display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr; justify-items: stretch; align-items: stretch; grid-column-gap: 2rem; grid-row-gap: 0;}
section#follow_us div.txt {padding: 2rem 0 2rem 3rem;}
section#follow_us div.txt h1 {font-size: 2.4rem; line-height: 2.4rem; padding-bottom: 1rem;}
section#follow_us div.txt p {padding-bottom: 1rem;}
section#follow_us div.txt div.btns {display: block; padding-top: 1rem; text-align: left;}
section#follow_us div.txt div.btns h2 {display: none;}
section#follow_us div.txt div.btns ul.rrss {vertical-align: middle;}
section#follow_us div.txt div.btns a.contact.btn {vertical-align: middle; margin: .5rem .25rem;}
section#follow_us div.img {display: block; width: 100%; height: 100%; padding-top: 1rem;}
section#follow_us div.img::before {display: block; content: ""; width: 100%; height: 100%; background: transparent url('img/characters_group_c.png') no-repeat bottom left; background-size: contain;}
@media (max-width: 1200px) {
	section#follow_us div.block {grid-template-columns: 1fr 1fr;}
}
@media (max-width: 750px) {
	section#follow_us div.block {grid-template-columns: 1fr; grid-template-rows: 1fr 1fr;}
	section#follow_us div.txt {padding: 2rem 3rem 1rem;}
	section#follow_us div.img {padding-top: 0;}
	section#follow_us div.img::before {background-position: bottom center;}
}

section#about_us {display: block; background-color: #BEBEC6; margin-top: 2rem;}
section#about_us div.block {display: grid; grid-template-columns: 1fr 2fr; grid-template-rows: 1fr; justify-items: stretch; align-items: stretch; grid-column-gap: 0; grid-row-gap: 0;}
section#about_us div.block div.cell.img { grid-area: 1 / 1 / 2 / 2; display: block; width: 100%; height: 100%;}
section#about_us div.block div.cell.txt { grid-area: 1 / 2 / 2 / 3; padding: 2rem 3rem 2rem 0;}
section#about_us div.txt h1 {font-size: 2.4rem; line-height: 2.4rem; padding-bottom: 1rem;}
section#about_us div.txt p {padding-bottom: 1rem;}
section#about_us div.img::before {display: block; content: ""; width: 100%; height: 100%; background: transparent url('img/scene_a.png') no-repeat bottom left; background-size: contain;}
section#about_us div.block div.cell div.team {display: inline-block; background-color: rgba(255, 255, 255, .5); max-width: 23rem; padding: 1rem 7.5rem 1rem 1rem; margin: 1.5rem 8.5rem 1rem 0; border-radius: .5rem; position: relative;}
section#about_us div.block div.cell div.team h3 {color: #06517D; font-family: 'IBM Plex Sans'; font-size: 1.2rem; padding-bottom: 1rem;}
section#about_us div.block div.cell div.team::after {
	display: block; content: ""; width: 18rem; aspect-ratio: 5/3; position: absolute; bottom: -1rem; right: -9rem;
	background: transparent url('img/icon_team.png') no-repeat center center; background-size: contain;
}
@media (max-width: 1200px) {
	section#about_us div.block {grid-template-columns: 1fr 1fr;}
}
@media (max-width: 750px) {
	section#about_us div.block {grid-template-columns: 1fr; grid-template-rows: 1fr 1fr;}
	section#about_us div.block div.cell.txt,
	section#about_us div.block div.cell.img {grid-area: auto;}
	section#about_us div.block div.cell.txt {padding: 2rem 3rem 0;}
	section#about_us div.img {padding-top: 0;}
}
@media (max-width: 600px) {
	section#about_us div.block div.cell div.team {max-width: none; padding: 1rem; margin: 1rem 0 1rem 0;}
	section#about_us div.block div.cell div.team::after {display: none;}
}

div#news_list {display: block; padding: 2rem;}
div#news_list header.news {display: grid; grid-template-columns: auto 1fr; grid-template-rows: 1fr; justify-items: end; align-items: center; grid-column-gap: 1rem; grid-row-gap: 0; padding-bottom: 2rem;}
div#news_list header.news div.title {display: flex; align-items: center; padding-left: 7rem; position: relative; height: 6rem;}
div#news_list header.news div.title::before {display: block; content: ""; width: 6rem; height: auto; aspect-ratio: 1; position: absolute; top: 0; left: 0; background-color: #44CCFF; opacity: .3; border-radius: 50%; z-index: 1;}
div#news_list header.news div.title::after {display: block; content: ""; width: 6rem; height: auto; aspect-ratio: 1; position: absolute; top: 0; left: 0; background: transparent url('img/icon_news.png') no-repeat center center; background-size: contain; z-index: 2;}
div#news_list header.news div.title h1 {display: inline; font-size: 2.5rem; vertical-align: middle;}
div#news_list header.news div.opt h2 {display: none;}
div#news_list header.news div.opt ul.categories {display: block; text-align: right; list-style: none; padding: 1rem 0;}
div#news_list header.news div.opt ul.categories li {display: inline-block; padding: .1rem .25rem;}
div#news_list header.news div.opt ul.categories li a {display: inline; text-decoration: none; text-transform: uppercase; color: #44CCFF; font-size: 1.1rem; font-weight: bold;}
div#news_list header.news div.opt ul.categories li.sel a {color: #06517D;}
div#news_list header.news div.opt ul.categories li a:hover {background-color: #06517D; color: #FFF; box-shadow: 0.2em 0 0 #06517D, -0.2em 0 0 #06517D;}
div#news_list header.news div.opt ul.categories li a:active {background-color: #44CCFF; color: #06517D; box-shadow: 0.2em 0 0 #44CCFF, -0.2em 0 0 #44CCFF;}
div#news_list div.articles {
	display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-flow: row dense; justify-items: stretch; align-items: start; grid-column-gap: 2rem; grid-row-gap: 3rem; margin-bottom: 3rem;
}
div#news_list div.articles article figure {display: block; width: 100%; aspect-ratio: 3/2; overflow: hidden; border-radius: .5rem; position: relative;}
div#news_list div.articles article figure:hover {outline: 6px solid #44CCFF;}
div#news_list div.articles article figure a {display: block; width: 100%; height: 100%; cursor: pointer;}
div#news_list div.articles article figure img {display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 1s;}
div#news_list div.articles article figure a:hover img {transform: scale(1.1);}
div#news_list div.articles article header.post h1 a {display: inline-block; text-decoration: none; font-size: 1.5rem; line-height: 1.8rem; position: relative;}
div#news_list div.articles article header.post h1 a:hover {text-decoration: underline;}
div#news_list div.articles article header.post p.classif {font-size: 1.1rem; color: #44CCFF; text-transform: uppercase; font-weight: bold;}
div#news_list div.articles article header.post p.date {font-size: .9rem; color: #06517D; font-style: italic;}
div#news_list div.articles article:not(.a1) header.post {display: grid; grid-template-columns: auto 1fr; grid-template-rows: repeat(2, auto); grid-column-gap: 1rem; grid-row-gap: .5rem; padding-top: 1rem;}
div#news_list div.articles article:not(.a1) header.post p.classif { grid-area: 1 / 1 / 2 / 2; align-self: end;}
div#news_list div.articles article:not(.a1) header.post p.date { grid-area: 1 / 2 / 2 / 3; align-self: end;}
div#news_list div.articles article:not(.a1) header.post h1 { grid-area: 2 / 1 / 3 / 3;}
div#news_list div.articles article.a1 div.summary p {padding-bottom: .5rem;}
div#news_list div.articles article.a1 div.summary a.btn {margin-top: 1rem;}
div#news_list div.articles article:not(.a1) div.summary {display: none;}
div#news_list div.articles article:not(.a1) header.post h1 a::after {display: inline-block; content: ""; width: 1rem; height: 1rem; margin-left: .5rem; background: transparent url('img/btn_arrow_b.svg') no-repeat center bottom; background-size: contain;}
div#news_list div.articles article.a1 {grid-area: 1 / 1 / 2 / 4; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr; justify-items: stretch; align-items: end; grid-column-gap: 2rem; grid-row-gap: 0px;}
div#news_list div.articles article.a1 figure {grid-area: 1 / 1 / 2 / 3;}
div#news_list div.articles article.a1 div.txt {grid-area: 1 / 3 / 2 / 4; display: block;}
div#news_list div.articles article.a1 header.post {padding: 1rem 0px; display: grid; grid-template-columns: 1fr; grid-template-rows: repeat(3, auto); grid-column-gap: 0; grid-row-gap: 1rem;}
div#news_list div.articles article.a1 header.post p.classif { grid-area: 1 / 1 / 2 / 2; }
div#news_list div.articles article.a1 header.post h1 { grid-area: 2 / 1 / 3 / 2; display: block;}
div#news_list div.articles article.a1 header.post p.date { grid-area: 3 / 1 / 4 / 2; }
div#news_list div.articles article.a1 header.post h1 a {font-size: 2rem; line-height: 2.3rem;}
div#news_list div.articles article.a1 div.summary {display: block;}
div#news_list div.articles article.a1 div.summary p {padding-bottom: .5rem;}
div#news_list div.articles article.a1 div.summary a.btn {margin-top: 1rem;}
@media (max-width: 1000px) {
	div#news_list div.articles {grid-template-columns: repeat(2, 1fr);}
	div#news_list div.articles article.a1 {grid-area: 1 / 1 / 2 / 3; display: block; text-align: center;}
	div#news_list div.articles article.a1 figure {margin-bottom: .5rem;}
}
@media (max-width: 600px) {
	div#news_list div.articles {display: block;}
	div#news_list div.articles article {margin-bottom: 2rem;}
	div#news_list header.news {display: block;}
	div#news_list header.news div.opt {text-align: right;}
}

div#new_detail header.news {display: grid; grid-template-columns: auto 1fr; grid-template-rows: 1fr; justify-items: end; align-items: center; grid-column-gap: 1rem; grid-row-gap: 0; padding: 2rem;}
div#new_detail header.news div.title {display: flex; align-items: center; padding-left: 7rem; position: relative; height: 6rem;}
div#new_detail header.news div.title::before {display: block; content: ""; width: 6rem; height: auto; aspect-ratio: 1; position: absolute; top: 0; left: 0; background-color: #44CCFF; opacity: .3; border-radius: 50%; z-index: 1;}
div#new_detail header.news div.title::after {display: block; content: ""; width: 6rem; height: auto; aspect-ratio: 1; position: absolute; top: 0; left: 0; background: transparent url('img/icon_news.png') no-repeat center center; background-size: contain; z-index: 2;}
div#new_detail header.news div.title h1 {display: inline; font-size: 2.5rem; vertical-align: middle;}
div#new_detail div.detail {display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: auto; justify-items: stretch; align-items: start; grid-column-gap: 3rem; grid-row-gap: 0; padding: 0 2rem 2rem;}
div#new_detail div.detail article figure {display: block; width: 100%; aspect-ratio: 3/2; overflow: hidden; border-radius: .5rem; position: relative;}
div#new_detail div.detail div.articles article figure:hover {outline: 6px solid #44CCFF;}
div#new_detail div.detail article figure a {display: block; width: 100%; height: 100%; cursor: pointer;}
div#new_detail div.detail article figure img {display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 1s;}
div#new_detail div.detail article figure a:hover img {transform: scale(1.1);}
div#new_detail div.detail article header.post h1 a {display: inline-block; text-decoration: none; font-size: 1.5rem; line-height: 1.8rem; position: relative;}
div#new_detail div.detail article header.post h1 a:hover {text-decoration: underline;}
div#new_detail div.detail article header.post p.classif {font-size: 1.1rem; color: #44CCFF; text-transform: uppercase; font-weight: bold;}
div#new_detail div.detail article header.post p.date {font-size: .9rem; color: #06517D; font-style: italic;}
div#new_detail div.detail div.main {display: block;}
div#new_detail div.detail div.main article figure {margin-bottom: .5rem;}
div#new_detail div.detail div.main article header.post {padding: 1rem 0px; display: grid; grid-template-columns: 1fr; grid-template-rows: repeat(3, auto); grid-column-gap: 0; grid-row-gap: 1rem; text-align: center;}
div#new_detail div.detail div.main article header.post p.classif { grid-area: 1 / 1 / 2 / 2; }
div#new_detail div.detail div.main article header.post h1 { grid-area: 2 / 1 / 3 / 2; display: block; font-size: 2rem; line-height: 2.3rem;}
div#new_detail div.detail div.main article header.post p.date { grid-area: 3 / 1 / 4 / 2; font-style: normal; font-size: 1rem;}
div#new_detail div.detail div.main article div.summary {display: block; text-align: center; font-size: .9rem; color: #06517D; font-style: italic; margin-bottom: 1rem;}
div#new_detail div.detail div.main article div.summary p {padding-bottom: .5rem;}
div#new_detail div.detail div.main article div.content {display: block; position: relative; text-align: justify;}
div#new_detail div.detail div.main article div.btns {display: block; margin: 1rem 0; text-align: center;}
div#new_detail div.detail div.articles {display: block;}
div#new_detail div.detail div.articles article {display: block; margin-bottom: 2rem;}
div#new_detail div.detail div.articles article header.post {display: grid; grid-template-columns: auto 1fr; grid-template-rows: repeat(2, auto); grid-column-gap: 1rem; grid-row-gap: .5rem; padding-top: 1rem;}
div#new_detail div.detail div.articles article header.post p.classif { grid-area: 1 / 1 / 2 / 2; align-self: end;}
div#new_detail div.detail div.articles article header.post p.date { grid-area: 1 / 2 / 2 / 3; align-self: end;}
div#new_detail div.detail div.articles article header.post h1 { grid-area: 2 / 1 / 3 / 3;}
div#new_detail div.detail div.articles article div.summary {display: none;}
div#new_detail div.detail div.articles article header.post h1 a::after {display: inline-block; content: ""; width: 1rem; height: 1rem; margin-left: .5rem; background: transparent url('img/btn_arrow_b.svg') no-repeat center bottom; background-size: contain;}
@media (max-width: 1000px) {
	div#new_detail div.detail {display: block;}
	div#new_detail div.detail div.main {margin-bottom: 5rem;}
	div#new_detail div.detail div.articles {display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-flow: row dense; justify-items: stretch; align-items: start; grid-column-gap: 2rem; grid-row-gap: 3rem;}
	div#new_detail div.detail div.articles article {margin-bottom: 0;}
}
@media (max-width: 600px) {
	div#new_detail div.detail div.articles {display: block;}
	div#new_detail div.detail div.articles article {margin-bottom: 2rem;}
}
@media (max-width: 400px) {
	div#new_detail header.news {display: block;}
	div#new_detail header.news div.opt {text-align: right;}
}

footer.main.home {display: block; padding: 2rem; text-align: center; background-color: #06517D;}
footer.main.generic {display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; gap: 2rem; padding: 2rem; background-color: #06517D;}
footer.main.generic h1 {display: none;}
footer.main p {color: #FFF;}
@media (max-width: 800px) {
	footer.main.generic {display: block; text-align: center;}
	footer.main.generic ul.rrss {margin-bottom: 1rem;}
}

div#contact_form {display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; grid-column-gap: 0px; grid-row-gap: 0px; align-items: center; min-height: 100%;}
div#contact_form h1 {display: block; margin-bottom: 1rem;}
div#contact_form div.form {display: block; position: relative; padding: 2rem;}
div#contact_form div.form div.frm {display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(4, auto); grid-column-gap: 1rem; grid-row-gap: 1rem;}
div#contact_form div.form div.frm div.row {display: block; position: relative;}
div#contact_form div.form div.frm div.row.name { grid-area: 1 / 1 / 2 / 3; }
div#contact_form div.form div.frm div.row.email { grid-area: 2 / 1 / 3 / 2; }
div#contact_form div.form div.frm div.row.phone { grid-area: 2 / 2 / 3 / 3; }
div#contact_form div.form div.frm div.row.msg { grid-area: 3 / 1 / 4 / 3; }
div#contact_form div.form div.frm div.row.btns { grid-area: 4 / 1 / 5 / 3; }
div#contact_form div.form div.frm label {display: none;}
div#contact_form div.form div.frm input,
div#contact_form div.form div.frm textarea {display: block; font-size: 1rem; width: 100%; padding: .4rem; background-color: #fff; color: #06517D;}
div#contact_form div.form div.frm textarea {resize: none; height: 8em;}
div#contact_form div.form div.frm input::placeholder,
div#contact_form div.form div.frm textarea::placeholder {color: rgba(4,45,91,.5);}
div#contact_form div.form div.frm button {font-size: 1em; margin: 0;}
div#contact_form div.form div.frm div.row.btns {text-align: right;}
div#contact_form div.form div.frm div.row div.error {display: inline-block; width: auto; height: auto; max-width: 100%; position: absolute; bottom: calc(100% + .2rem); left: 0; background-color: #06517D; color: #fff; font-size: .9rem; text-align: left; padding: .2rem .5rem; border-radius: .5rem; z-index: 5; box-shadow: 0px 0px 1rem .5rem rgba(0,0,0,0.3);}
div#contact_form div.form div.frm div.row div.error::before {display: block; content: " "; position: absolute; top: 98%; left: 1rem; margin-left: -.3rem; border-width: .4rem; border-style: solid; border-color: #06517D transparent  transparent transparent;}
div#contact_form div.form div.modal {display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(246,246,246,.9); visibility: hidden; opacity: 0; transition: opacity .5s, visibility .5s; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); z-index: 80;}
div#contact_form div.form div.modal.show {visibility: visible; opacity: 1;}
div#contact_form div.form div.modal div.w {display: inline-block; height: auto; width: auto; max-height: 90%; max-width: 70%; padding: 1rem; font-size: 1rem; text-align: center; background-color: #06517D; color: #FFF; border-radius: 1rem;}
div#contact_form div.form div.modal div.w::before {display: inline-block; content: ""; width: 5rem; height: 5rem; margin-bottom: .5rem; background: transparent url('img/ico_alert.svg') no-repeat center center; background-size: contain;}
div#contact_form div.form div.modal.cfm div.w::before {background-image: url('img/ico_question.svg');}
div#contact_form div.form div.modal.response.ok div.w::before {background-image: url('img/ico_ok.svg');}
div#contact_form div.form div.modal div.w div.row.text {padding-bottom: 1rem;}
div#contact_form div.form div.modal div.w div.row.text p {display: block; font-size: .9rem; padding-bottom: .5rem;}
div#contact_form div.form div.modal div.w div.row.text p strong {font-size: 1rem;}
div#contact_form div.form div.modal div.w button.btn,
div#contact_form div.form div.modal div.w a.lnk {margin: 0 1rem;}
div#contact_form div.img {justify-self: stretch; align-self: stretch; display: block; position: relative;}
div#contact_form div.img::after {display: block; content: ""; width: 98%; height: 98%; position: absolute; bottom: 0; right: 0; background: transparent url('img/mobile_contact.png') no-repeat bottom right; background-size: contain;}
@media (orientation: portrait) {
	div#contact_form {grid-template-columns: 1fr; grid-template-rows: 1fr 1fr;}
	div#contact_form div.img::after {width: 100%; height: 100%;}
	div#contact_form div.form div.frm {grid-template-columns: auto; grid-template-rows: repeat(5, auto); grid-column-gap: 0;}
	div#contact_form div.form div.frm div.row.name { grid-area: 1 / 1 / 2 / 2; }
	div#contact_form div.form div.frm div.row.email { grid-area: 2 / 1 / 3 / 2; }
	div#contact_form div.form div.frm div.row.phone { grid-area: 3 / 1 / 4 / 2; }
	div#contact_form div.form div.frm div.row.msg { grid-area: 4 / 1 / 5 / 2; }
	div#contact_form div.form div.frm div.row.btns { grid-area: 5 / 1 / 6 / 2; }
}

div#team {display: block; padding: 2rem; width: 100%; overflow: hidden;}
div#team header {display: block;}
div#team header div.title {display: flex; align-items: center; padding-left: 7rem; position: relative; height: 6rem;}
div#team header div.title::before {display: block; content: ""; width: 6rem; height: auto; aspect-ratio: 1; position: absolute; top: 0; left: 0; background-color: #44CCFF; opacity: .3; border-radius: 50%; z-index: 1;}
div#team header div.title::after {display: block; content: ""; width: 6rem; height: auto; aspect-ratio: 1; position: absolute; top: 0; left: 0; background: transparent url('img/icon_team.png') no-repeat center center; background-size: contain; z-index: 2;}
div#team header div.title h1 {display: inline; font-size: 2.5rem; vertical-align: middle;}
div#team h2 {display: block; padding: 2rem .5rem; font-size: 2.2rem; line-height: 2.2rem;}
div#team ul { /* 8 Columnas */display: grid; grid-template-columns: repeat(8, 1fr); gap: 2rem; list-style: none; width: 100%; margin-bottom: 3rem;}
div#team ul li {display: block; width: 100%; height: auto; position: relative;}
div#team ul li figure {display: block; width: 100%; height: auto; aspect-ratio: 1; border-radius: 1rem; overflow: hidden;}
div#team ul li figure img {display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 1s;}
div#team ul li div.details {display: block; margin: 1rem 0 0 .5rem;}
div#team ul li div.details h3 {display: block; font-size: 1.2rem; line-height: 1.4rem; padding-bottom: .2rem;}
div#team ul li div.details p {font-size: 1rem; line-height: 1.1rem; color: #06517D; opacity: .8;}
div#team ul li div.links {display: block; padding-top: 1rem;}
div#team ul li div.links a {display: inline-block; width: 2.4rem; height: auto; margin: 0px .5rem .25rem 0px; aspect-ratio: 1; position: relative; background-color: transparent; background-repeat: no-repeat; background-position: center center; background-size: contain;}
div#team ul li div.links a.linkedin {background-image: url('img/rrss_linkedin.png');}
div#team ul li div.links a:hover {transform: scale(1.05);}
div#team ul li div.links a:active {transform: scale(.95);}
div#team ul li div.links a span {display: none;}
@media (max-width: 2150px) { /* 7 Columnas */
	div#team ul {grid-template-columns: repeat(7, 1fr);}
}
@media (max-width: 1850px) { /* 6 Columnas */
	div#team ul {grid-template-columns: repeat(6, 1fr);}
}
@media (max-width: 1550px) { /* 5 Columnas */
	div#team ul {grid-template-columns: repeat(5, 1fr);}
}
@media (max-width: 1250px) { /* 4 Columnas */
	div#team ul {grid-template-columns: repeat(4, 1fr);}
}
@media (max-width: 950px) { /* 3 Columnas */
	div#team ul {grid-template-columns: repeat(3, 1fr);}
}
@media (max-width: 650px) { /* 2 Columnas */
	div#team ul {grid-template-columns: repeat(2, 1fr);}
}
@media (max-width: 300px) { /* 1 Columna */
	div#team ul {display: block;}
	div#team ul li {margin-bottom: 2rem;}
}

#generic_page {display: block; padding: 2rem;}

/* SLIDESHOW *****************/
section#slideshow {
	display: block; width: 100%; height: 100%; background-color: rgba(0,0,0,0.8);
	position: fixed; top: 0; left: 0; z-index: 90; overflow: hidden;
	-webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
	-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
}
section#slideshow::before {display: block; content: ""; width: 2rem; height: 2rem; aspect-ratio: 1; border: 2px solid #222; border-top: 2px solid #fff; border-radius: 50%; position: fixed; top: calc(50% - 1rem); left: calc(50% - 1rem); animation: rotating 2s linear infinite;}
section#slideshow h1 {display: inline-block; max-width: calc(100% - 6rem); font-size: 1.4rem; line-height: 1.6rem; color: #fff; padding: .5rem; position: fixed; top: 1rem; left: 1rem; z-index: 10; text-shadow: 0px 0px 5px rgba(0,0,0,0.7);}
section#slideshow button span {display: none;}
section#slideshow button {display: block; width: 3rem; aspect-ratio: 1; height: auto; border-radius: 50%; background-color: rgba(0,0,0,0.8); border: 2px solid #000; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); position: relative;}
section#slideshow button:hover {background-color: rgba(0,0,0,1);}
section#slideshow button:active {transform: scale(.9);}
section#slideshow button.close {position: fixed; top: 1rem; right: 1rem;}
section#slideshow button.close::before,
section#slideshow button.close::after {display: block; content: ""; width: 2px; height: 1rem; position: absolute; top: 50%; left: 50%; background-color: #fff;}
section#slideshow button.close::before {transform: translate(-50%, -50%) rotate(45deg);}
section#slideshow button.close::after {transform: translate(-50%, -50%) rotate(-45deg);}
/* scrollbar-width */
section#slideshow ul.photos {
	display: flex; flex-flow: row nowrap; gap: 0; width: 100%; height: 100%; list-style: none; position: relative;
	scroll-snap-type: x mandatory; overflow: hidden; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none !important;
	visibility: visible; opacity: 1;
}
section#slideshow ul.photos li {
	flex: 0 0 100%; scroll-snap-align: center;
	display: flex; flex-flow: column nowrap; justify-content: center; width: 100%; height: 100%; position: relative;
}
section#slideshow ul.photos li img {display: block; width: auto; max-width: 100%; height: auto; max-height: 100%; object-fit: contain; margin: auto;}
section#slideshow nav {display: block; position: fixed; bottom: 0; left: 0; width: 100%; height: auto; visibility: visible; opacity: 1;}
section#slideshow nav div.pagination {display: grid; grid-template-columns: 3rem auto 3rem; grid-template-rows: auto; gap: 1rem; justify-items: center; align-items: center; padding: 1rem;}
section#slideshow nav div.pagination ol {display: flex; flex-flow: row wrap; gap: 4px; justify-content: center; width: 100%; height: auto; text-align: center;}
section#slideshow nav div.pagination ol li {display: block; width: 12px; height: 4px; border-radius: 2px; background-color: #000; position: relative;}
section#slideshow nav div.pagination ol li.sel {background-color: #fff;}
section#slideshow nav div.pagination ol li span {display: none;}
section#slideshow nav div.pagination button::before {display: block; content: ""; width: .5rem; height: .5rem; position: absolute; top: 50%; left: 50%;}
section#slideshow nav div.pagination button.next::before {border-top: 2px solid #fff; border-right: 2px solid #fff; transform: translate(-70%, -50%) rotate(45deg);}
section#slideshow nav div.pagination button.prev::before {border-bottom: 2px solid #fff; border-left: 2px solid #fff; transform: translate(-30%, -50%) rotate(45deg);}
section#slideshow.loading ul.photos,
section#slideshow.loading nav {visibility: hidden; opacity: 0;}
@keyframes rotating {
  from {transform: rotate(0deg);}
  to {transform: rotate(360deg);}
}

/* COOKIES *****************/
div#cookies_msg {
	display: none; width: 80vw; max-width: 50rem; height: auto; padding: 2rem; position: fixed; bottom: 4vw; left: 4vw; z-index: 99;
    background-color: #B8E7A7; color: #1A1A1A; box-shadow: 0px .2vw 2vw .5vw rgba(0,0,0,0.5); border-radius: .5rem;
}
div#cookies_msg.show {display: block;}
div#cookies_msg p {display: block; font-size: 1.2rem; padding-bottom: 2rem;}
div#cookies_msg div.buttons {margin-top: 0; text-align: right;}
div#cookies_msg div.buttons .btn {margin: 0;}