@charset "utf-8";
*, *:after, *:before {box-sizing: border-box;}
::selection {background:#435160;color:#fff;}
.cf:before, .cf:after {content:' ';display:table;}
.cf:after {clear:both;}

html {-webkit-text-size-adjust:100%;text-size-adjust:100%;}
body {
    margin: 0;
    color:#eee9df;
	font-family:'Montserrat',sans-serif;
    font-size:16px;
    -webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
    background:linear-gradient(to bottom right, #2c3b4e, #1c2632);
}

/* ------ GLOBAL ------ */

header, section, div {position:relative;display:block}
b, strong {font-weight:bold}
i, q {font-family:"Georgia";font-style:italic}
q:before,q:after {content:'"'}
p {padding:10px 0}
ul {padding:10px 0;list-style:square inside}
ol {padding:10px 0;list-style-type:decimal-leading-zero;list-style-position:inside;}
ol li::marker {font-weight:bold;}
ul li, ol li {padding-left:20px;}

hr {display:block;position:relative;width:20%;height:0;max-height:0;margin:20px auto;font-size:1px;line-height:0;clear:both;border:none;border-top:0.75px solid rgba(255,255,255,0.1);}
pre {white-space:pre-wrap;word-wrap:break-word;}
img {max-width:100%;}
button {cursor:pointer}
.fa {}
.red {color:#990000;font-weight:bold}

/* LINKS */
a {color:#ffb162;font-weight:bold;text-decoration:none;outline:0 none}
a:hover {color:#a35139}

/*  TRANSITIONS  */
a,
input,
select,
textarea,
button,
.menu-button::before,
.menu-button::after,
.menu-button span {
	transition: all 0.3s ease
}
.preloader,
.hidden {
    transition: all 2.0s ease
}

/*  Z-INDEX  */
.preloader {z-index:10}
.fancybox-container {z-index:9}
.license-modal {z-index:8}
.mobil {z-index:7}
.menu-button {z-index:6}
header {z-index:5}

/*  TITLES  
h1, h2, h3, h4, h5, h6 {margin:0} */
h1 {font-family:"Michroma";color:#fff;font-size:80px;text-align:center;margin:100px auto;}
h2 {font-family:"Oswald", sans-serif;text-transform:uppercase;font-size:20px;font-weight:500;letter-spacing:3px;}
h3, .contact-title {color:#fff;font-size:20px;font-weight:800;letter-spacing:2px;}
h4 {}
h5 {}
h6 {color:#e1aa58;font-weight:600;margin:0 0 5px} /*fancy main*/

/* ------ PRELOADER ------ */

.preloader {
    position:fixed;
    top:0;
    left:0;
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100%;
    padding:5vh 5vw;
    background:#35363b url("img/header.jpg") center center/cover no-repeat fixed;
    filter:grayscale(1);
}
.preloader-percent {
    color: rgba(255,255,255,0.2);
    font-family: "Barlow Condensed", sans-serif;
    font-size: 200px;
    font-variant-numeric: tabular-nums; /* make the numbers feel smoother, and prevents numbers from visually shifting horizontally when they change */
}
.hidden {
    opacity: 0;
    pointer-events: none;
}

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

header {
    position:fixed;
    top:0;
    left:0;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    width:100%;
    min-height:80px;
    padding:10px 20px;
    background:linear-gradient(to bottom right, #1c2632, #2c3b4e);
    box-shadow:0 20px 20px rgba(0,0,0,0.3);
}
header img {width:30px;height:30px;justify-self:start;}
nav {justify-self:center;}
nav a, .langs a {padding:0 5px;font-weight:500;text-transform:uppercase;}
nav a.active {color:#eee9df/*#ffb162;*/}
.langs {justify-self:end;}

.mobil {position:fixed;display:none;right:30px;top:30px;padding:15px;font-size:20px;background:#feb161;border:none;border-radius:3px;box-shadow:0 0 15px rgba(0,0,0,0.4)}
.mobil .fa {color:#fff}
.mobil:hover {background:#a35139}

/* ------ SECTIONS ------ */

section {max-width:1680px;min-height:100vh;margin:0 auto;padding:5%}
#home, #about {display:flex;align-items:center;justify-content:center;flex-direction:column;}

/* ------ HOME ------ */

#home {max-width:none;padding-top:80px;color:#fff;background:url("img/header.jpg") center center/cover no-repeat fixed;/*filter:sepia(8%) saturate(85%) hue-rotate(180deg) brightness(95%);*/}
#home::before {content: "";position:absolute;inset:0;background:#1B2635;opacity:0.35;pointer-events:none;}

#home > *:not(.pattern) {position:relative;z-index:1}
.pattern {position:absolute;top:0;left:0;width:100%;height:100%;background:url("img/pattern.png") top left repeat;opacity:0.4;z-index:0}
#home h1 {margin-bottom:20px;}
#home img {display:block;width:300px;margin:0 auto 50px;}

/* ------ ABOUT ------ */

#about .grid {display:grid;grid-template-columns:repeat(2, minmax(0, 50%));justify-content:center;}
#about .grid p {width:100%;padding:20px}

/* ------ SERVICES ------ */

#services .grid {display:grid;grid-template-columns:repeat(3, minmax(0, 500px));justify-content:center;gap:30px;}
#services .cell {width:100%;padding:10px;/*border:10px solid #243040;*/box-shadow:0 0 25px -5px rgba(0,0,0,0.4);}
.cell1 {color:#2c3b4e;background:#ede9de}
.cell2 {color:#1c2632;background:#c9c2b2}
.cell3 {color:#feb161;background:#2c3b4e}
.cell4 {color:#1c2632;background:#feb161}
.cell5 {color:#eee9df;background:#a35139}
.cell6 {color:#feb161;background:#1c2632}

/* ------ REFERENCES ------ */

.ref-grid {display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;width:100%;margin:50px auto 150px}
.ref-grid .row {display:flex;justify-content:center;gap:20px;width:100%}
.ref-grid .row a {display:flex;width:calc(25% - 10px);max-width:250px;aspect-ratio:1/1;align-items:center;opacity:0.8}
.ref-grid .row a:hover {opacity:1}
.ref-grid .row a img {filter:grayscale(1) brightness(10)}

#references video {display:block;margin:0 auto;}
#references .gallery {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 235px));
    justify-content: center;
    gap: 15px;
}
#references .gallery a {width:100%;height:100%;overflow:hidden;}
#references .gallery a img {width:100%;height:100%;object-fit:cover}
#references .gallery a video {width:100%;height:100%;}

/* ------ CONTACT ------ */

.contact .header-inner {height:auto;min-height:80vh;}
.contact h1 {line-height:60px;margin:30px auto 50px;}
.contact-grid {
    display:flex;
    flex-direction:row;
    justify-content:center;
    align-items:center;
    width:100%;
    height:100%;
}
.data, .form {width:40%;}
.data {text-align:center;margin-right:5%}
.form {margin-left:5%;padding:50px;box-shadow:5px 10px 20px 10px rgba(0,0,0,0.2);background:#1c2632;}
.form-row {display:flex;min-height:50px;align-items:center;/*gap:10px;*/border-bottom:1px solid #555}
#verif-box {justify-content:center;}
.form-row label {
    /*min-width:90px;*/
    color:#5a5b5f;
    white-space:nowrap;/* keeps label on one line */
}
.form-row input, 
.form-row textarea {
    width:100%;
    padding:10px;
    color:#77787D;
    cursor:pointer;
    border:none;
    outline:0px none;
    background:transparent;
}
.form-row textarea {
    max-height:300px;
    resize:vertical;
}
.form-row input:hover,
.form-row input:focus,
.form-row textarea:hover,
.form-row textarea:focus {
    color:#c7c8cc;
}
.form #verif-box img {width:calc(100% - 15px);height:50px;object-fit:cover;min-width:120px;max-width:610px;}
.form-row .veriflink {height:50px;color:#5a5b5f;font-size:14px;background:transparent;border:none;}
.form-row .veriflink:hover {color:#fbd784;box-shadow:0 8px 15px -6px rgba(0,0,0,0.5);}
.extra-info {display:none}
input[type=submit], .close-license {
    display:flex;
    width:50%;
    height:50px;
    margin:30px auto 0;
    justify-content:center;
    align-items:center;
    color:#ede9de;
    font-family:"Montserrat";
    font-size:12px;
    line-height:20px;
    font-weight:600;
    text-shadow:-1px -1px 0px rgba(0,0,0,0.2);
    text-transform:uppercase;
    cursor:pointer;
    background:transparent;
    background:linear-gradient(45deg, #feb161 5%, #a35139 95%);
    background-size:200% 200%;
    box-shadow:0px 0px 20px 10px rgba(0,0,0,0.4);
    border:none;
    border-radius:10px;
}
input[type=submit]:hover, .close-license:hover {
    width:55%;
    background-position:right center;
    box-shadow:5px 5px 20px rgba(0,0,0,0.7);
}

#response {
    width:90%;
    max-width:800px;
    margin:50px auto 0;
    padding:10px;
    color:#bf3e3e;
    font-family:"Times New Roman",serif;
    font-style:italic;
    font-size:14px;
}
#response > div {
    margin:0 auto;
    padding:5px;
    text-align:center;
    font-family:"Times New Roman",serif;
    font-style:italic;
    font-size:22px;
}
.error-message {color:#bf3e3e;}
.success-message {color:#69aa69;}

/* ------ FOOTER ------ */

footer {width:100%;font-size:12px;text-align:center;}
footer p {padding:10px}

/* ------ LICENSE MODAL ------ */

.nav-item .open-license {display:inline-block;vertical-align:top;height:19px;}
.open-license svg {height:16px;vertical-align:bottom}

/*  LICENSE MODAL WINDOW  */
.license-modal {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(to bottom right, #2c3b4e, #1c2632);
    visibility:hidden;
    opacity:0;
    transition:opacity 0.4s ease, visibility 0.4s ease;
}
.license-modal.show {
    visibility:visible;
    opacity:1;
}
.license-modal .modal-content {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    width:90vw;
    max-width:1400px;
    padding:20px;
    background:#1c2632;
    border:1px solid #444;
    border-radius:10px;
    box-shadow:0 0 10px rgba(0,0,0,0.2);
    transform:translateY(-30px);
    transition:transform 0.4s ease;
}
.license-modal.show .modal-content {
  transform:translateY(0);
}
.modal-text {max-width:800px;margin:0 auto;}
.close-license {max-width:150px;}
.close-license:hover {max-width:200px;}


@media (max-width: 1100px) {
    #services .grid {grid-template-columns: repeat(2, minmax(0, 500px));}
}
@media (max-width: 1024px) {
    header {left:-100%;min-height:100vh;grid-template-columns:1fr;grid-template-rows:auto auto auto;}
    nav a {display:block;margin-bottom:20px;}
    header img, .langs {justify-self:center}
    .mobil {display:block}
    h1 {font-size:60px;}
    h2 {max-width:100%;}
    .contact-grid {gap:5%;}
    .data, .form {margin:0}
    .form {padding:10px 20px;}
}
@media (max-width:800px){
    .contact-grid {flex-direction:column;gap:50px;}
    .data, .form {width:100%;}
    .modal-content .grid-row {grid-template-columns:1fr;gap:0px}
}
@media (max-width: 768px) {
    h1 {font-size:40px}
    section h2 {font-size:14px;word-wrap:break-word;overflow-wrap:break-word;min-width:0}
    #references .gallery {grid-template-columns:repeat(3, minmax(0, 500px));}
}
@media (max-width: 700px) {
    #services .grid,
    #about .grid {grid-template-columns: minmax(0, 500px);}
}
@media (max-width: 640px) {
    h1 {font-size:30px;}
}
@media (max-width:480px){
    #references .gallery {grid-template-columns:minmax(0, 500px);}
    #about .grid p {padding:0}
}
@media (max-width:390px){
    h1 {font-size:20px;}
    .ref-grid .row {flex-direction:column;gap:50px;margin-bottom:50px;align-items:center}
    .ref-grid .row a {width:calc(100% - 50px);aspect-ratio:inherit;justify-content:center;}
}
@media (max-width:260px){
    h1 {overflow-wrap:anywhere;word-break:break-all;}
}