@font-face {
    font-family: 'Star Jedi';
    src: url('fonts/StarJedi.eot');
    src: url('fonts/StarJedi.eot?#iefix') format('embedded-opentype'),
        url('fonts/StarJedi.woff2') format('woff2'),
        url('fonts/StarJedi.woff') format('woff'),
        url('fonts/StarJedi.ttf') format('truetype');
    font-weight: normal;font-style: normal;font-display: swap;
}

:root {
    --c-white: #ffffff;
    --c-gray: #808080;
    --c-bg: #131313;
    --c-black: #131313;
    --c-bg2: #222222;
    --c-yellow: #FDDF00;


    --s5-black: rgba(19, 19, 19, 0.5);

    --s5-bg2: rgba(34, 34, 34, 0.5);

    --s2-yellow: rgba(253, 223, 0, 0.2);
}

::-webkit-scrollbar {width: .35vw;}
::-webkit-scrollbar-track {background: var(--c-black);}
::-webkit-scrollbar-thumb {background: var(--c-yellow);border-radius: 0.35vw;}

::selection  {background-color: var(--c-black);color: var(--c-yellow);}

.noselect, img {
    -webkit-touch-callout: none; /* iOS Safari */
      -webkit-user-select: none; /* Safari */
       -khtml-user-select: none; /* Konqueror HTML */
         -moz-user-select: none; /* Old versions of Firefox */
          -ms-user-select: none; /* Internet Explorer/Edge */
              user-select: none; /* Non-prefixed version, currently
                                    supported by Chrome, Edge, Opera and Firefox */
}

body, html {
    width: 100%;height: 100%;margin: 0;padding: 0;
    color: var(--c-white);font-weight: 100;
    font-family: 'Roboto', sans-serif;background-color: var(--c-bg);
}
h1, h2, h3, h4, h5, h6 {line-height: 1;font-weight: normal;display:block;position:relative;margin: 0;padding: 0;}
.medium {font-weight: 500 !important;}
.normal {font-weight: 400 !important;}
.thin {font-weight: 100 !important;}

.starwars, .starwarsmc {font-family: 'Star Jedi' !important;}
.roboto, .regular {font-family: 'Roboto', sans-serif;}

.extra-title {font-size:34px;}
h1, .s1 {font-size: 24px;}
h2, .s2 {font-size: 20px;}
h3, .s3 {font-size: 18px;}
h4, .s4 {font-size: 16px;}
h5, .s5 {font-size: 14px;}
h6, .s6 {font-size: 12px;}
.center {text-align: center;}
.left {text-align: left;}
.right {text-align: right;}

.white {color: var(--c-white);}
.yellow {color: var(--c-yellow);}
.gray {color: var(--c-gray);}
.inherit {color: inherit;}

.line-1 {line-height:1;}
.line-2 {line-height:1.25;}
.line-3 {line-height:1.5;}
.line-4 {line-height:1.75;}

.inline {position: relative;display:inline-block;vertical-align: middle;}


.in-grid {display: inline-grid;position:relative;}
.in-grid-wrap {position:relative;}



menu {
    width: calc(100% - 10vh);z-index:900;gap: 1vh;
    display: grid;grid-template-columns: min-content auto min-content;
    margin:0;padding:2vh 5vh;background-color: var(--c-black);
}
menu .right {white-space: nowrap;}
menu a {text-decoration: none;margin: 0 2vh;position:relative;transition: all 0.2s ease-in-out;}
menu .in-grid {align-items: center;}
menu a img {height: 30px;}
menu .right a {margin: 0 3vh;}
.no-p {padding: 0;margin: 0;}

menu a:hover {
    color: var(--c-yellow) !important;
}

@keyframes shake {
    0% {transform: rotate(0deg);}
    33% {transform: rotate(-10deg);}
    66% {transform: rotate(-0deg);}
    100% {transform: rotate(10deg);}
}
.shake-anim:hover {animation: shake 0.15s linear;}



header {position:relative;width:100%;height:calc(100% - 4vh - 30px);margin:0;padding:0;overflow:hidden;}
.bg-gallery, .bg-gallery-in {position:absolute;width:100%;height:100%;}
.bg-gallery {overflow:hidden;}
.bg-gallery-in {object-fit:cover;object-position:center;opacity:0;transition: all 0.3s ease-in-out;}

.active-gallery {opacity:1;}

.bg-gallery::after {
    position:absolute;width:100%;height:100%;left:0;top:0;content:"";
    background-color: var(--c-black);opacity: 0.5;
}


.logo-circle-wrap {
    position:absolute;top:50%;left:50%;transform: translate(-50%, -50%);
    z-index:20;
}

@keyframes logoanim {
    0% {transform:scale(3);background-color: var(--c-bg);}
    100% {transform:scale(1);background-color: var(--s5-black);}
}
@keyframes fade-logo {
    0% {opacity: 1;transform:scale(1);}
    100% {opacity: 0;transform:scale(0.5);}
}

.logo-circle {
    position:relative;display:block;width:60vh;height:60vh;border-radius: 100%;
    animation: logoanim 0.4s ease-in-out forwards, fade-logo 0.3s ease-in-out 5s forwards;
}
.logo-circle-img {
    width:50vh;position:absolute;top:50%;left:50%;transform: translate(-50%, -50%);
}


.dots {
    position:absolute;bottom:5vh;left:0%;width:100%;z-index:50;
}
.dots span {
    margin: 0 1vh;height:5px;width:2vw;background-color: var(--c-white);
    border-radius:5px;transition: all 0.2s ease-in-out;cursor: pointer;
}
.dots .active-dot {width: 2.5vw;background-color: var(--c-yellow);}
.dots span:hover {
    transform: scale(1.1);
}



.input-field {display:block;position:relative;margin-bottom:3vh;}
.input-field input {
    display:block;position:relative;width:100%;padding: 1vh 2vh;
    background-color: var(--c-bg2);border-radius:4px;color: var(--c-white);
    font-family: 'Roboto', sans-serif;font-weight:normal;line-height:1.5;
    outline:none;border: none;font-size:20px;
}
.input-field label {
    position:absolute;top:1vh;left:2vh;font-size:20px;color: var(--c-yellow);
    font-family: 'Roboto', sans-serif;font-weight:normal;line-height:1.5;
    transition: all 0.2s ease-in-out;
}
.input-field input:not(:placeholder-shown) ~ label,
.input-field input:focus ~ label,
.input-field input:hover ~ label,
.input-field label:hover {left:0;top: -2.75vh;transform: scale(0.75);transform-origin: left;color: var(--c-white);opacity:0.5;}

.input-field input[type="submit"] {
    background-color: var(--c-yellow);color: var(--c-bg);
    width:auto;display: inline-block !important;
    margin-top: 2vh;cursor: pointer;
}



article {
    display:block;margin: 2.5% 10%;width: 80%;
}


.phone-burger {display:none;}
.burger-icon {
    display:inline-block;width:8vw;height:4px;background-color: var(--c-white);border-radius:4px;
    position:relative;
}
.burger-icon::before, .burger-icon::after {
    content: "";position:absolute;left:0;width:100%;height:4px;border-radius:4px;background-color: var(--c-white);
}
.burger-icon::before {top:-8px;}
.burger-icon::after {bottom:-8px;}
.phone-menu {display:none;}
@media (max-width: 980px) {
    menu {grid-template-columns: repeat(2, minmax(0, 1fr));align-items: center;}
    .links-menu {display: none;}
    .social-menu {display:none;}
    .phone-burger {
        display:block;position:relative;
    }

    .phone-menu a {text-decoration: none;}
    .phone-menu.active-phone {
        display:flex;position:fixed;top:0;left:0;width:100%;height:100%;background-color: var(--c-bg);
        z-index:999;padding: 10% 10%;box-sizing: border-box;
        flex-direction: column;gap:4vh;align-items: center;
    }
    .wrap-navigation-links {margin: auto 0 auto 0;}
    .wrap-navigation-links a {padding: 1vh 2vh;width:100%;box-sizing: border-box;display:block;margin-bottom:1vh;}

    .wrap-social-links {display:inline-flex;gap:4vh;}


    .logo-circle {width:45vh;height:45vh;}
    .logo-circle-img {width:35vh;}

    
    .dots span {width:8vw;}
    .dots .active-dot {width: 12vw;}
}