@charset "utf-8"; 
@font-face { font-family: "FontAwesome"; font-display: swap; font-style: normal; src: url("fontawesome-webfont.woff2") format("woff2"); }

:root {--background-color: #e9d2a6; --main-color: #c42a0f; --decor-color: #4e1a17; --font-color: #2b2b2b;}

/* Obsolete */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

/* Root */
html { font-size: 62.5%; }
body {display: flex;justify-content: center;flex-direction: column;line-height: 1.5;padding: 0rem;margin: 0rem;overflow-x: hidden;font-size: 1.4rem;font-weight: 400;z-index: -111110;font-family: "Fira Sans", sans-serif;background: var(--background-color);}

/* Heading */
h1 { font-size: 3rem; line-height: 1.5; color: #2B2B2B; text-align: center; width: 100%; display: block; font-weight: 400; }
h1 { font-size: 2rem; line-height: 1.5; color: #2B2B2B; text-align: center; width: 100%; display: block; font-weight: 400; }
h3 { font-size: 1.4rem; line-height: 1.5; margin: 0; padding: 0; color: #2B2B2B; font-weight: 400; }
h4 { font-size: 1.4rem; line-height: 1.5; margin: 0; padding: 0; color: #2B2B2B; }
h5 { font-size: 1.4rem; line-height: 1.5; margin: 0; padding: 0; color: #2B2B2B; }
h6 { font-size: 1.4rem; line-height: 1.5; margin: 0; padding: 0; color: #2B2B2B; }

/* Link */
a { color: #2b2b2b; }

/* Paragraph */
p { font-size: 1.4rem; line-height: 1.5; padding: 0; color: #2B2B2B; margin: 0 0 1.6rem 0; text-align: left; }
strong, b { font-weight: 700; }
strike, s { text-decoration: line-through; }
blockquote, q { quotes: none; }
blockquote { background: #f7f7f7; border-left: 0.1rem solid #bbb; font-style: italic; margin: 1.5rem 1rem; padding: 1.5rem 1rem; } 
blockquote::before { color: #bbb; content: "\201C"; font-size: 3rem; line-height: 0.1rem; margin-right: 0.2rem; vertical-align: -.4rem; }
blockquote::after { color: #bbb; content: "\201D"; font-size: 3rem; line-height: 0.1rem; vertical-align: -0.8rem; }
blockquote > p:first-child { display: inline; } ol { font-size: 1.4rem; line-height: 1.5; margin: 0; padding: 0; color: #2B2B2B; transition: all 0.5s; }
del { color: #d20303; }
ins { text-decoration: none; }
code { font-size: 1.2rem; background: #282c34; padding: 1rem; text-indent: 0; display: block; color: #abb2bf; }

/* List */
ol { font-size: 1.4rem; line-height: 1.5; padding: 0; color: #2B2B2B; transition: all 0.2s; margin: 0 1rem 1.6rem 4.6rem; }
ul { font-size: 1.4rem; line-height: 1.5; padding: 0; color: #2B2B2B; transition: all 0.2s; margin: 0 1rem 1.6rem 4.6rem; }
li { font-size: 1.4rem; line-height: 1.5; padding: 0; color: #2B2B2B; transition: all 0.2s; margin: 0 0 1.6rem 0; }

/* Image */
img { max-width: 100%; height: auto; }

/* Navigation */
nav {display: flex;position: sticky;top: 0;padding: 1rem 0;z-index: 1; background-image: url(background.svg); background-size: 40rem; background-position: center;}
nav.nav_isstick {padding: 0.5rem 0; box-shadow: 0 4px 4px var(--decor-color)}
nav .wrapper {display: flex;flex-direction: row;justify-content: space-between;max-width: 128rem;width: 100%;margin: 0 auto;align-items: center;}
nav .wrapper .menu {display: flex;flex-direction: row;align-items: center;margin: 0;position: relative;}
nav .wrapper .menu .item {font-size: 2rem; text-decoration: none; margin: 0 1rem 0 0; text-transform: uppercase; padding: 0.8rem 1rem 0.4rem; color: var(--decor-color); transition: all 0.5s; background: #FFF; font-weight: 300;}
nav.nav_isstick .wrapper .menu .item {font-size: 1.6rem;}
nav .wrapper .logo {display: flex;color: #FFF;line-height: initial;--radius: 4px;padding: var(--radius);filter: drop-shadow(0 0 1px #0005) drop-shadow(0 0 1px #0005);background: radial-gradient(50% 50%, #0000 65%, #fff 67%) round var(--radius) var(--radius) / calc(2 * var(--radius)) calc(2 * var(--radius));}
nav .wrapper .logo .link {color: var(--main-color);text-decoration: none;padding: 1rem 2rem;outline: 1px solid var(--main-color);outline-offset: -6px;background: #FFF;font-size: 2rem;font-weight: 800; transition: all 0.5s;}
nav.nav_isstick .wrapper .logo .link {font-size: 1.2rem;}
nav .wrapper .menu .item:hover {background: var(--decor-color); color: #FFF;}
nav .wrapper .menu .item:hover + .submenu {display:flex; opacity: 1;}
nav .wrapper .menu .item:has(+ .submenu:hover) {background: var(--decor-color); color: #FFF;}
nav .wrapper .menu .submenu {display: none;position: absolute;flex-direction: column;top: 100%;background: var(--decor-color);width: -webkit-fill-available;opacity: 0;transition: all linear 0.5s;border-top: 2px solid #FFF;}
nav .wrapper .menu .submenu:hover {display: flex; opacity: 1;}
nav .wrapper .menu .submenu .link {color: #FFF;font-size: 2rem;font-weight: 200;text-decoration: none;padding: 0.4rem 1rem;}
nav .wrapper .menu .submenu .link:hover {background: var(--background-color);color: #2b2b2b}
nav .wrapper .contact {display: flex;flex-direction: column;align-items: flex-end;}
nav .wrapper .contact .address {display: flex;font-size: 1.6rem; color: #FFF; font-weight: 200; transition: all 0.5s;}
nav .wrapper .contact .phone-email { display: flex; flex-direction: row; font-size: 1.6rem; justify-content: right;}
nav .wrapper .contact .phone-email .phone {text-decoration: none;font-size: 1.6rem;margin: 0 2rem 0 0; color: #FFF; font-weight: 200;  transition: all 0.5s;}
nav .wrapper .contact .phone-email .email {text-decoration: none;font-size: 1.6rem; color: #FFF; font-weight: 200;  transition: all 0.5s;}
nav.nav_isstick .wrapper .contact .address {font-size: 1.4rem;}
nav.nav_isstick .wrapper .contact .phone-email .phone {font-size: 1.4rem;}
nav.nav_isstick .wrapper .contact .phone-email .email {font-size: 1.4rem;}

/* Global */
main { display: flex; flex-direction: column; justify-content: space-between; width: 100%; margin: auto; }
footer {display: flex;flex-direction: column;justify-content: space-between;width: 100%;margin: auto; background: #4E1A17; background-image: url("background 3.svg");}

/* Footer */
footer .wrapper {display: flex; flex-direction: row; justify-content: space-between; max-width: 128rem; width: 100%; margin: 0 auto; align-items: center;}
footer .wrapper .logo {display: flex;color: #FFF;line-height: initial;--radius: 4px;padding: var(--radius);filter: drop-shadow(0 0 1px #0005) drop-shadow(0 0 1px #0005);background: radial-gradient(50% 50%, #0000 65%, #fff 67%) round var(--radius) var(--radius) / calc(2 * var(--radius)) calc(2 * var(--radius));margin: 4rem 0;}
footer .wrapper .logo .link {color: var(--main-color);text-decoration: none;padding: 1rem 2rem;outline: 1px solid var(--main-color);outline-offset: -6px;background: #FFF;font-size: 5rem;font-weight: 800;transition: all 0.5s;}
footer .wrapper .text {display: flex;align-items: flex-end;max-width: 72rem;flex-direction: column;width: 100%;text-align: left;}
footer .wrapper .text .title {font-size: 2.4rem;font-weight: 500;text-align: center;line-height: normal;color: var(--background-color);margin: 0 0 1rem 0;}
footer .wrapper .text .description {font-size: 2rem;font-weight: 300;text-align: center;max-width: 600px;margin: 0;color: var(--background-color);}
footer .wrapper .text .description .phone {color: var(--background-color);text-decoration: none;}
footer .wrapper .text .description .email {color: var(--background-color);text-decoration: none;}

/* Image */
canvas {width: 100%;outline: 1px solid #36132e;border-radius: 1rem;}

/* Block */
.block {display: flex;flex-direction: column;justify-content: space-between;width: 100%;margin: auto;}
.block .container {display: flex;width: 100%;max-width: 128rem;margin: auto;align-items: center;justify-content: space-between;flex-direction: column;}
.block .container .interactive {width: 100%;}
.block .container .text {display: flex; justify-content: center; align-items: center; max-width: 36rem; flex-direction: column; width: 100%; text-align: left; height: 48rem;}
.block .container .text .title {font-size: 4rem; font-weight: 700; text-align: center; color: var(--main-color); line-height: normal; margin: 0 0 3rem 0;}
.block .container .text .description {font-size: 2rem; font-weight: 300; text-align: center; color: var(--font-color); max-width: 600px;}
.block .container .button {background: var(--main-color);padding: 2rem 2rem;border-radius: 2rem;color: var(--background-color);text-decoration: none;font-weight: 300;transition: all 0.5s;font-size: 2rem;}
.block .container .button:hover {background: var(--decor-color);}

.block#intro {background: var(--background-color);}
.block#intro .container {background-image: url(banner_01.jpg); background-size: contain; background-repeat: no-repeat; flex-direction: row; justify-content: end;}

.block#sites {background: var(--background-color); background-image: url("background 2.svg");}
.block#sites .container {flex-direction: row;padding: 10rem 0;}
.block#sites .container .text {align-items: flex-end;}
.block#sites .container .text .title {color: #000000; text-align: right;}
.block#sites .container .text .title .accent {color: var(--main-color);}
.block#sites .container .text .description {color: var(--font-color); text-align: right;}
.block#sites .container .score {margin: 0; font-size: 2rem; color: #FFF; text-align: right;}
.block#sites .container .poster {box-shadow: 0px 0px 4px var(--font-color); transform: rotate(-4deg);}

.block#content {background: #4E1A17; background-image: url("background 3.svg");}
.block#content .container {flex-direction: row; padding: 10rem 0;}
.block#content .container .content {display: flex; flex-direction: column;}
.block#content .container .content .interactive {width: 100%;height: 613px; position: relative;}
.block#content .container .content .interactive .before {width: 50%;height: 100%;background-size: auto;background-repeat: no-repeat;position: absolute;}
.block#content .container .content .interactive .after {width: 100%;height: 100%;background-size: auto;background-repeat: no-repeat;position: absolute;}
.block#content .container .content .interactive .before {background-image: url(/content_before_01.png);}
.block#content .container .content .interactive .after {background-image: url(/content_after_01.png);}
.block#content .container .content .interactive .slider {position: absolute; appearance: none; width: 100%; height: 100%; outline: none; margin: 0; padding: 0; transition: all .2s; background: rgb(255 255 255 / 10%); overflow:hidden;}
.block#content .container .content .interactive .slider:hover {background: rgb(255 255 255 / 0%);}
.block#content .container .content .interactive .slider::-webkit-slider-thumb {-webkit-appearance: none; appearance: none; width: 2px; height: 1000px; background: white; cursor: pointer; position: relative;}
.block#content .container .content .interactive .button {pointer-events: none;position: absolute;width: 32px;height: 32px;border-radius: 50%;background-color: var(--main-color);left: calc(50% - 32px);top: calc(50%);color: #ffffff;font-size: 2.6rem;line-height: 17px;}
.block#content .container .content .interactive .button::before {font-family: 'FontAwesome';content: "\f07e";font-size: 5rem;display: flex;justify-content: center;align-items: center;height: 100%;}
.block#content .container .content .control {display: flex; flex-direction: column;}
.block#content .container .content .control .description {color: var(--background-color); text-align: center;}
.block#content .container .content .control .buttons {margin: 0 0 2rem 0; display: flex; justify-content: center;}
.block#content .container .content .control .buttons .button {font-size: 1.4rem;margin: 0 0.5rem; font-weight: 400;}
.block#content .container .content .control .buttons .button.active {color: var(--decor-color);background: var(--background-color);outline: 2px solid;}
.block#content .container .text {margin: 0 10rem 0 0; align-items: flex-start;}
.block#content .container .text .title {color: var(--background-color);}
.block#content .container .text .description {color: var(--background-color); text-align: left;}
.block#content .container .text .list {margin: 0;}
.block#content .container .text .list .item {color: var(--background-color); font-size: 2rem; font-weight: 300;}
.block#content .container .button {color: var(--background-color); background: #4e1a17; outline: 2px solid;}
.block#content .container .button:hover {color: var(--decor-color); background: var(--background-color);}

.block#support {background: var(--background-color); background-image: url("background 2.svg");}
.block#support .container {flex-direction: row; padding: 10rem 0;}
.block#support .container .interactive {position: relative;max-width: 72rem;margin: 0 4rem 0 0;outline: none;border-right: 0.4rem dotted var(--main-color);border-radius: 10rem;}
.block#support .container .text {align-items: flex-end;}
.block#support .container .text .title {color: #000000; text-align: right;}
.block#support .container .text .title .accent {color: var(--main-color);}
.block#support .container .text .description {color: var(--font-color); text-align: right;}

@media (max-width: 768px)
{
	nav .wrapper {flex-direction: column;}
	.block#intro .container {padding: 0; flex-direction: column;}
	.block#sites .container {padding: 0; flex-direction: column;}
	.block#content .container {padding: 0; flex-direction: column;}
	.block#sites .container .text {margin: 0;}
	.block#content .container .text {margin: 0;}
	.block#content .container .interactive {width: 360px;height: 600px;}

}