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

/* FONTS *****************/
/* https://transfonter.org */
@font-face {
    font-family: 'Inter';
    src: url('font/Inter-Italic-VariableFont.woff2') format('woff2 supports variations'),
        url('font/Inter-Italic-VariableFont.woff2') format('woff2-variations');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('font/Inter-VariableFont.woff2') format('woff2 supports variations'),
        url('font/Inter-VariableFont.woff2') format('woff2-variations');
    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: 'Inter', 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: #1C1C1C; color: #C6C6C6;
}
body {
    display: block; width: 100%; height: 100%;
    background-color: #1C1C1C; color: #C6C6C6;
}
html.anchored, html.anchored body {overflow: hidden; height: 100%;}

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-weight: normal; line-height: 1em;}
strong, em {font-weight: normal; color: #F7F7F7;}
a {color: #B9CDFA; text-decoration: underline;}
a.lnk:hover {background-color: #B9CDFA; color: #0F0F0F; text-decoration: none; box-shadow: 0.2em 0 0 #B9CDFA, -0.2em 0 0 #B9CDFA;}
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; border-radius: 1.5rem; background-color: #2E68EF !important; color: #F7F7F7 !important; text-transform: uppercase; font-size: 1rem; transition: transform .3s;}
.btn:hover {transform: scale(1.1); background-color: #0F0F0F !important;}
.btn:active {transform: scale(.9); transition: none;}
.btn.alt {background-color: #fff !important; color: #333 !important;}
a.btn {text-decoration: none !important; box-shadow: none !important;}

figure a {display: block; width: auto; height: auto; position: relative;}
figure a::after {display: block; content: ""; width: 3%; aspect-ratio: 1; opacity: .5; position: absolute; bottom: 9%; left: 5%; background: transparent url('img/enlarge_w.svg') no-repeat center center; background-size: contain; opacity: 0; visibility: hidden; transform-origin: left bottom; transition: transform 1s, opacity 1s, visibility 1s;}
figure a:hover::after {opacity: .7; visibility: visible; transform: scale(2);}

.lower {font-size: .8em;}

.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: #C6C6C6; padding-bottom: .5rem;}
.html_editor dt {font-weight: bold;}
.html_editor a:not(.raw) {color: #B9CDFA; text-decoration: underline;}
.html_editor a:not(.raw):hover {text-decoration: none; color: #0F0F0F; background-color: #B9CDFA; box-shadow: 0.2em 0 0 #B9CDFA, -0.2em 0 0 #B9CDFA;}
.html_editor table {font-size: 1rem; background-color: #0F0F0F; width: 100%; text-align: left; border-collapse: collapse; margin-bottom: 1rem;}
.html_editor table thead {background-color: #B9CDFA; color: #0F0F0F; font-weight: bold;}
.html_editor table th {background-color: #B9CDFA; color: #0F0F0F; font-size: .9rem; font-weight: bold; white-space: nowrap; padding: .5rem; text-transform: uppercase; border-bottom: 1px solid #0F0F0F;}
.html_editor table td {padding: .5rem; border-bottom: 1px solid #B9CDFA; vertical-align: top;}
.html_editor img {display: block; max-width: 100%; max-height: 50vw; margin: 1rem auto 2rem;}

/* ESPECÍFICO *****************/

header.main {display: block; padding-bottom: 3rem;}
header.main h1 {display: block; margin: 2rem auto; width: 17rem; height: auto; aspect-ratio: 10/3; background: transparent url('img/logo_mahout_g.svg') no-repeat center center; background-size: contain;}
header.main h1 a {display: block; width: 100%; height: 100%;}
header.main h1 span {display: none;}
header.main p.slogan {display: block; margin: 0 auto 1rem; width: 90vw; max-width: 1400px; text-align: center; font-size: 2.5rem; line-height: 1em; font-weight: 10;}
header.main figure {display: block; width: 90vw; max-width: 1400px; height: auto; position: relative; margin: 0 auto;}
header.main figure img {display: block; aspect-ratio: 14/9; width: 100%; height: auto; object-fit: contain; object-position: center;}
header.main p.summary {display: block; margin: 0 auto; width: 90vw; max-width: 1400px; text-align: center; font-size: 1.4rem;}

section.mh {display: block; padding: 3rem 0;}
section.mh header {display: block; width: 95vw; padding-left: 5vw; margin-bottom: 1.5rem;}
section.mh header::before {display: block; content: ""; width: 5rem; aspect-ratio: 1; border-radius: 1rem; margin-bottom: 1rem; background-color: #0F0F0F; background-position: center center; background-size: 2.5rem auto; background-repeat: no-repeat; border: 2px solid #404040;}
section.mh.database header::before {background-image: url('img/ico2_database_b.svg');}
section.mh.files header::before {background-image: url('img/ico2_folder_b.svg');}
section.mh.crop header::before {background-image: url('img/ico2_crop_b.svg');}
section.mh.analitic header::before {background-image: url('img/ico2_chart_b.svg');}
section.mh header h1 {display: block; font-size: 1.3rem; padding-bottom: .5rem; color: #2E68EF;}
section.mh header h2 {display: block; font-size: 2.4rem; padding-bottom: 1.5rem;}
section.mh header p {display: block; font-size: 1.3rem;}
section.mh div.gallery {display: block; width: 100%; height: auto; position: relative;}
section.mh div.gallery ul.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 4vw;
	overflow: hidden; overflow-x: visible; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none !important; list-style: none;
}
section.mh div.gallery ul.group li {
	flex: 0 0 auto; scroll-snap-align: center;
	display: block; width: 80vw; max-width: 800px; height: auto; position: relative;
}
section.mh div.gallery ul.group.max li {width: 90vw; max-width: 1100px;}
section.mh div.gallery ul.group li figure a {display: block; width: 100%; height: 100%; cursor: pointer;}
section.mh div.gallery ul.group li figure img {display: block; aspect-ratio: 14/9; width: 100%; height: auto; object-fit: contain; object-position: left;}
section.mh div.gallery ul.group li figure figcaption {display: block; width: 90%; height: auto; font-size: 1rem; padding-left: 3%;}
section.mh div.gallery div.btns {display: block; margin: 0 auto; width: 90vw; max-width: 1400px; text-align: right;}
section.mh div.gallery div.btns button {display: inline-block; width: 3rem; aspect-ratio: 1; border-radius: 50%; margin: .2rem .5rem; background-color: #303030; background-position: center center; background-size: 1.2rem auto; background-repeat: no-repeat;}
section.mh div.gallery div.btns button.next {background-image: url('img/btn_next_b.svg');}
section.mh div.gallery div.btns button.prev {background-image: url('img/btn_prev_b.svg');}
section.mh div.gallery div.btns button.next:disabled {background-image: url('img/btn_next_b2.svg');}
section.mh div.gallery div.btns button.prev:disabled {background-image: url('img/btn_prev_b2.svg');}
section.mh div.gallery div.btns button:hover:not(:disabled) {background-color: #0F0F0F;}
section.mh div.gallery div.btns button:disabled {opacity: .3;}
section.mh div.gallery div.btns button span {display: none;}
@media (min-width: 1400px) {
	section.mh header {width: 90vw; padding-left: 10vw;}
	section.mh div.gallery ul.group {padding-left: 9vw;}
}
@media (min-width: 1800px) {
	section.mh header {width: 85vw; padding-left: 15vw;}
	section.mh div.gallery ul.group {padding-left: 14vw;}
}
@media (min-width: 2200px) {
	section.mh header {width: 80vw; padding-left: 20vw;}
	section.mh div.gallery ul.group {padding-left: 19vw;}
}

article.faqs {display: block; padding: 4rem 0px; margin: 0 auto; width: 90vw; max-width: 1400px; border-top: 2px solid #0F0F0F;}
article.faqs h1 {display: block; font-size: 2.4rem; padding-bottom: 1.5rem;}
article.faqs dl {display: block; list-style: none;}
article.faqs dl div {display: block; border-bottom: 1px solid #0F0F0F;}
article.faqs dl div dt {display: block;}
article.faqs dl div dt a {display: block; padding: 1rem 2.5rem 1rem 0px; font-size: 1.4rem; text-decoration: none; position: relative;}
article.faqs dl div:not(.show) dt a:hover {color: #C6C6C6;}
article.faqs dl div.show dt a {color: #F7F7F7;}
article.faqs dl div dt a::after {display: block; content: ""; width: 1.5rem; aspect-ratio: 1; position: absolute; bottom: 1rem; right: 0; background: transparent url('img/ico_dropdown_b.svg') no-repeat center center; background-size: contain; transition: transform 1s;}
article.faqs dl div.show dt a::after {transform: rotate(-180deg);}
article.faqs dl div dd {display: block; width: 100%; height: auto; max-height: 0px; overflow-y: hidden; transition: max-height 1s;}
article.faqs dl div dd p {display: block; font-size: 1rem; padding-bottom: 1rem; width: 100%; height: auto;}

footer.main {display: block; padding: 2rem; background-color: #303030; font-size: .9rem; text-align: center; color: #8a8a8a;}
footer.main a.lnk {text-decoration: none;}

div#page.generic div.html_editor {display: block; width: 90%; max-width: 1400px; margin: 0 auto; padding-bottom: 3rem;}

/* 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(46,104,239,0.8); border: 2px solid #2E68EF; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); position: relative;}
section#slideshow button:hover {background-color: rgba(46,104,239,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: 60vw; height: auto; padding: 2vw; position: fixed; bottom: 4vw; left: 4vw; z-index: 99;
    background-color: #B9CDFA; color: #303030; box-shadow: 0px .2vw 2vw .5vw rgba(0,0,0,0.5);
}
div#cookies_msg.show {display: block;}
div#cookies_msg p {display: block; padding-bottom: 1rem;}
div#cookies_msg p strong {color: #0F0F0F;}
div#cookies_msg div.buttons {margin-top: 0; text-align: right;}
div#cookies_msg div.buttons .btn {margin: 0;}