@font-face {
    font-family: 'Bogam';
    src: url('../fonts/Bogam.eot');
    src: url('../fonts/Bogam.eot?#iefix') format('embedded-opentype'), url('../fonts/Bogam.woff2') format('woff2'), url('../fonts/Bogam.woff') format('woff'), url('../fonts/Bogam.svg#Bogam') format('svg');
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
    unicode-range: U+0020-00F7;
}

@font-face {
    font-family: 'Circular Std';
    src: url('../fonts/CircularStd-Book.eot');
    src: url('../fonts/CircularStd-Book.eot?#iefix') format('embedded-opentype'), url('../fonts/CircularStd-Book.woff2') format('woff2'), url('../fonts/CircularStd-Book.woff') format('woff'), url('../fonts/CircularStd-Book.svg#CircularStd-Book') format('svg');
    font-weight: 450;
    font-style: normal;
    font-stretch: normal;
    unicode-range: U+0020-00FE;
}

@font-face {
    font-family: 'Circular Std';
    src: url('../fonts/CircularStd-Medium.eot');
    src: url('../fonts/CircularStd-Medium.eot?#iefix') format('embedded-opentype'), url('../fonts/CircularStd-Medium.woff2') format('woff2'), url('../fonts/CircularStd-Medium.woff') format('woff'), url('../fonts/CircularStd-Medium.svg#CircularStd-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
    font-stretch: normal;
    unicode-range: U+0020-00FE;
}

:root {
    --main-font: 'Circular Std';
    --head-font: 'Bogam';
    --regular: 450;
    --medium: 500;
    --primarycolor: #012970;
    --secondarycolor: #565656;
    --body: 13px;
    --small: 11px;
    --transition: all .3s ease;
}


/* Reset css */

html,
body,
div,
span,
applet,
object,
iframe,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    -webkit-font-smoothing: antialiased;
}

*,
 ::after,
 ::before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

img,
svg,
video,
iframe {
    max-width: 100%;
    vertical-align: middle;
}

:focus {
    outline: 0;
}

a {
    transition: var(--transition);
    text-decoration: none;
    color: currentColor;
}

a:hover {
    color: var(--primarycolor);
    text-decoration: none;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
b,
strong {
    font-weight: var(--medium);
    line-height: 1.5;
}

h1 {
    font-size: 30px;
}

h2 {
    font-size: 24px;
}

h3 {
    font-size: 22px;
}

h4 {
    font-size: 18px;
}

h5 {
    font-size: 15px;
}

h6 {
    font-size: var(--body);
}

sup {
    top: -.3em;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
    margin: 0;
}

.table>thead {
    white-space: nowrap;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    background-color: var(--light);
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background-color: var(--light);
}

::-webkit-scrollbar-thumb {
    background-color: var(--dark);
    border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--primarycolor);
}

 ::-webkit-scrollbar-thumb:active {
    background-color: var(--primarycolor);
}

.primarycolor {
    color: var(--primarycolor);
}

.secondarycolor {
    color: var(--secondarycolor);
}

html,
body {
    overflow: hidden;
}

body {
    font-family: var(--main-font);
    font-weight: var(--medium);
    font-size: var(--body);
    color: black;
    line-height: 1.5;
    min-height: 100vh;
    max-height: 100vh;
    /* overflow: -moz-scrollbars-none;
    -ms-overflow-style: none; */
}


/* body::-webkit-scrollbar {
    width: 0 !important;
} */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    box-shadow: inset 0 0 4px var(--primarycolor);
    -webkit-box-shadow: inset 0 0 4px var(--primarycolor);
    transition: background-color 5000s ease-in-out 0s;
}

.form-control,
.form-select {
    outline: none;
    font-size: var(--body);
}

label.required:after {
    content: '*';
    color: red;
    margin-left: 2px;
}

.error-message {
    font-size: var(--small);
    color: red;
}

.form-check-input {
    min-width: 1em;
}

.small,
small {
    font-size: var(--small);
}


/* Main */

.header_home {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9;
    right: 0;
}

.wheels {
    position: relative;
    width: 100vw;
    height: 100vw;
    overflow: hidden;
}

.wheel-bg {
    position: absolute;
    top: -30vw;
    left: -50vw;
    width: 200vw;
    height: 200vw;
    z-index: 0;
    transition: all 3s ease;
    background-image: url(../img/wheel.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top center;
}

.wheel-1,
.wheel-2,
.pyramids {
    position: absolute;
    top: 0vw;
    left: -20.1vw;
    width: 140vw;
    height: 140vw;
}

.pyramids {
    top: -4.1vw;
    z-index: 0;
    transition: all 3s ease;
    background-image: url(../img/pyramids.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top center;
}

.wheel-1 {
    transition: all 5s ease;
    z-index: 1;
    background-image: url(../img/trees-clouds.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top center;
}

.wheel-2 {
    z-index: 2;
    transition: all 5s ease;
    background-image: url(../img/characters.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top center;
}

.scroll_to_explore {
    position: fixed;
    top: 47vw;
    z-index: 4;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    text-align: center;
    font-size: 1.05vw;
    letter-spacing: 5px;
    cursor: pointer;
    opacity: 0;
    font-weight: var(--regular);
    padding: 5px 20px;
}

.swiped {
    position: fixed;
    bottom: 0;
    left: 50%;
    width: 80%;
    height: 60%;
    transform: translateX(-50%);
    z-index: 5;
    display: none;
}

.wheel-btns {
    position: relative;
    z-index: 8;
}

.btnlink {
    display: none;
    position: fixed;
    top: 36.6vw;
    left: 50%;
    transform: translateX(-50%);
    z-index: 8;
    cursor: pointer;
    color: white;
    text-align: center;
    font-size: 5vw;
    white-space: nowrap;
    line-height: 1;
    opacity: 0;
    font-family: var(--head-font);
}

.btnlink.active {
    display: block;
}

.navbar-nav .nav-link {
    color: white;
    text-transform: uppercase;
}

.navbar-nav .nav-link:hover span,
.navbar-nav .nav-link.active span {
    border-color: currentColor;
}


/* Responsive */

@media screen and (max-device-width: 1920px) and (orientation: portrait) {
    .wheels {
        width: 100vh;
        height: 100vh;
    }
    .wheel-bg {
        top: -6vh;
        left: -78vh;
        width: 212vh;
        height: 212vh;
    }
    .wheel-1,
    .wheel-2,
    .pyramids {
        top: 25vh;
        left: -47.1vh;
        width: 150vh;
        height: 150vh;
    }
    .pyramids {
        top: 21vh;
    }
    .scroll_to_explore {
        top: 64vh;
        font-size: 1.05vh;
    }
    .btnlink {
        top: 100vw;
        font-size: 10vw;
    }
}

@media screen and (max-device-width: 1920px) and (orientation: landscape) {
    .wheel-bg {
        top: -35vw;
    }
    .wheel-1,
    .wheel-2,
    .pyramids {
        top: -5vw;
    }
    .scroll_to_explore {
        top: 42vw;
    }
    .btnlink {
        top: 35.6vw;
    }
}


/* Laptops */

@media screen and (max-device-width: 1366px) and (orientation: portrait) {
    .swiped {
        display: block;
    }
    .wheel-2 {
        background-image: url(../img/characters-mobile.png);
    }
    .wheel-bg {
        top: -41vw;
        left: -150vw;
        width: 400vw;
        height: 400vw;
    }
    .wheel-1,
    .wheel-2,
    .pyramids {
        top: 19vw;
        left: -90.1vw;
        width: 280vw;
        height: 280vw;
    }
}

@media screen and (max-device-width: 1280px) and (orientation: landscape) {
    .wheel-bg {
        top: -42vw;
    }
    .wheel-1,
    .wheel-2,
    .pyramids {
        top: -2vw;
        left: -10.1vw;
        width: 120vw;
        height: 120vw;
    }
    .scroll_to_explore {
        top: 38vw;
    }
    .btnlink {
        top: 32vw;
    }
}

@media screen and (max-device-width: 1200px) and (orientation: landscape) {
    .wheel-bg {
        /* top: -58vw; */
        top: -62vw;
        left: -100vw;
        width: 300vw;
        height: 300vw;
    }
    .wheel-1,
    .wheel-2,
    .pyramids {
        /* top: -8vw; */
        top: -12vw;
        left: -50vw;
        width: 200vw;
        height: 200vw;
    }
    .scroll_to_explore {
        top: 59.6vw;
    }
    .btnlink {
        top: 50.5vw;
        font-size: 7vw;
    }
}

@media screen and (max-device-width: 1170px) and (orientation: landscape) {
    .wheel-bg {
        top: -74vw;
    }
    .wheel-1,
    .wheel-2,
    .pyramids {
        top: -4vw;
        left: -30vw;
        width: 160vw;
        height: 160vw;
    }
    .scroll_to_explore {
        top: 49.8vw;
    }
    .btnlink {
        top: 41.5vw;
        font-size: 7vw;
    }
}

@media only screen and (device-width: 1200px) and (device-height: 1600px) and (orientation: portrait) {
    .wheel-bg {
        top: -66vw;
    }
    .wheel-1,
    .wheel-2,
    .pyramids {
        top: -6vw;
    }
    .scroll_to_explore {
        top: 66vh;
        font-size: 1.5vh;
    }
    .btnlink {
        top: 76vw;
    }
}

@media only screen and (device-width: 1600px) and (device-height: 1200px) and (orientation: landscape) {
    .wheel-bg {
        top: -60vw;
        left: -100vw;
        width: 300vw;
        height: 300vw;
    }
    .wheel-1,
    .wheel-2,
    .pyramids {
        top: 20vw;
    }
    .scroll_to_explore {
        top: 67vw;
    }
    .btnlink {
        top: 60.6vw;
    }
}

@media only screen and (device-width: 1200px) and (device-height: 768px) and (orientation: landscape) {
    .wheel-bg {
        top: -30vw;
        left: -50vw;
        width: 200vw;
        height: 200vw;
    }
    .wheel-1,
    .wheel-2,
    .pyramids {
        top: 0vw;
        left: -20.1vw;
        width: 140vw;
        height: 140vw;
    }
    .btnlink {
        top: 40.5vw;
    }
}


/* Tablets */

@media screen and (min-device-height: 1024px) and (max-device-height: 1366px) and (orientation: portrait) {
    .wheel-bg {
        top: -66vw;
    }
    .wheel-1,
    .wheel-2,
    .pyramids {
        top: -6vw;
    }
    .scroll_to_explore {
        top: 66.6vh;
    }
    .btnlink {
        top: 75vw;
    }
}

@media screen and (min-device-height: 321px) and (max-device-width: 1023px) and (orientation: landscape) {
    .wheel-bg {
        top: -36vw;
        left: -50vw;
        width: 200vw;
        height: 200vw;
    }
    .wheel-1,
    .wheel-2,
    .pyramids {
        top: -6vw;
        left: -20.1vw;
        width: 140vw;
        height: 140vw;
    }
    .btnlink {
        top: 35vw;
        font-size: 5vw;
    }
}

@media screen and (max-device-width: 1024px) and (orientation: landscape) {
    .swiped {
        display: block;
    }
    .wheel-2 {
        background-image: url(../img/characters-mobile.png);
    }
}

@media screen and (max-device-width: 991px) {
    .navbar-brand {
        width: 55px;
        padding: 0;
    }
    .navbar-nav {
        margin-top: 5px;
    }
    .navbar-nav .nav-link {
        letter-spacing: 4px;
    }
    .navbar-nav .nav-link:hover span,
    .navbar-nav .nav-link.active span {
        border-width: 4px;
        border-color: currentColor;
    }
}

@media screen and (max-device-width:767px) and (orientation: portrait) {
    .header_home {
        position: fixed;
        top: auto;
        bottom: 0;
        text-align: center;
    }
    .navbar-brand {
        position: fixed;
        top: 5px;
        left: 48%;
        transform: translateX(-50%);
    }
    .navbar-toggler {
        padding: 0;
        border: none;
        border-radius: 0;
        margin: 0 auto;
        width: 50px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .navbar-toggler:before {
        content: '';
        background-color: #141013;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 48px;
        transition: var(--transition);
    }
    .navbar-toggler[aria-expanded="true"]::before {
        height: 100%;
    }
    .navbar-toggler::after {
        content: '';
        background-color: #df380e;
        width: 8px;
        height: 8px;
        border-radius: 8px;
        position: fixed;
        left: 50%;
        transform: translateX(-50%);
        bottom: 20px;
    }
    .navbar-toggler[aria-expanded="true"]::after {
        display: none;
    }
    .navbar-toggler:focus {
        box-shadow: none;
    }
    .navbar-toggler .navbar-toggler-icon {
        position: relative;
        width: 50px;
        height: 2px;
        background-color: white;
    }
    .navbar-toggler .navbar-toggler-icon::before,
    .navbar-toggler .navbar-toggler-icon::after {
        content: '';
        position: absolute;
        left: 0;
        width: 50px;
        height: 2px;
        background-color: white;
        transition: var(--transition);
    }
    .navbar-toggler .navbar-toggler-icon::before {
        top: -10px;
    }
    .navbar-toggler .navbar-toggler-icon::after {
        bottom: -10px;
    }
    .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
        height: 0;
    }
    .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before {
        transform: rotate(45deg) translate(6px, 6px);
    }
    .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
        transform: rotate(-45deg) translate(6px, -6px);
    }
    .navbar-collapse .navbar-nav {
        width: 100%;
        display: block;
        position: relative;
        overflow-y: auto;
        max-height: calc(100vh - 200px);
        min-height: calc(100vh - 200px);
        margin: 15px 0 0;
        padding: 20px 0;
    }
    .navbar-nav .nav-link {
        color: white;
        display: inline-block;
        margin: 1rem auto 0;
        padding: .5rem;
    }
}

@media screen and (max-device-width:767px) and (orientation: landscape) {
    .navbar-brand {
        margin: 0;
    }
    .navbar-toggler {
        position: fixed;
        right: .75rem;
        z-index: 1;
        padding: 0;
        border: none;
        border-radius: 0;
        margin: 0;
        width: 40px;
        height: 40px;
        transition: var(--transition);
    }
    .navbar-toggler:focus {
        box-shadow: none;
    }
    .navbar-toggler[aria-expanded="true"] {
        right: 50%;
        transform: translateX(50%);
    }
    .navbar-toggler .navbar-toggler-icon {
        position: relative;
        width: 40px;
        height: 2px;
        background-color: white;
    }
    .navbar-toggler .navbar-toggler-icon::before,
    .navbar-toggler .navbar-toggler-icon::after {
        content: '';
        position: absolute;
        left: 0;
        width: 40px;
        height: 2px;
        background-color: white;
        transition: var(--transition);
    }
    .navbar-toggler .navbar-toggler-icon::before {
        top: -10px;
    }
    .navbar-toggler .navbar-toggler-icon::after {
        bottom: -10px;
    }
    .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
        height: 0;
    }
    .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before {
        transform: rotate(45deg) translate(6px, 6px);
    }
    .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
        transform: rotate(-45deg) translate(6px, -6px);
    }
    .navbar-collapse {
        background-color: #141013;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 0;
        transition: var(--transition);
        padding: 50px 0 10px;
        opacity: 0;
        visibility: hidden;
    }
    .navbar-collapse.show {
        height: 100%;
        opacity: 1;
        visibility: visible;
    }
    .navbar-collapse .navbar-nav {
        width: 100%;
        display: block;
        position: relative;
        text-align: center;
        margin: 0;
        padding: 0 0 30px;
        overflow-y: auto;
        height: calc(100vh - 140px);
    }
    .navbar-nav .nav-link {
        color: white;
        display: inline-block;
        margin: 1rem auto 0;
        padding: .2rem;
    }
    .btnlink {
        font-size: 5vw;
    }
}

@media only screen and (device-width: 800px) and (device-height: 1280px) and (orientation: portrait) {
    .wheel-bg {
        top: -40vw;
    }
    .wheel-1,
    .wheel-2,
    .pyramids {
        top: 20vw;
    }
    .scroll_to_explore {
        top: 71.6vh;
    }
    .btnlink {
        top: 101vw;
    }
}

@media only screen and (device-width: 1280px) and (device-height: 800px) and (orientation: landscape) {
    .wheel-bg {
        /* top: -80vw; */
        top: -30vw;
    }
    .wheel-1,
    .wheel-2,
    .pyramids {
        top: 0;
        left: -20.1vw;
        width: 140vw;
        height: 140vw;
    }
    .scroll_to_explore {
        top: 47vw;
    }
    .btnlink {
        top: 41vw;
        font-size: 5vw;
    }
}


/* Phones */

@media screen and (min-device-height: 737px) and (max-device-height: 812px) and (orientation: portrait) {
    .wheel-bg {
        top: -45vw;
        left: -200vw;
        width: 500vw;
        height: 500vw;
    }
    .wheel-1,
    .wheel-2,
    .pyramids {
        top: 65vw;
    }
    .btnlink {
        top: 146.5vw;
    }
}

@media screen and (max-device-height: 480px) and (orientation: portrait) {
    .wheel-bg {
        top: -56vw;
    }
    .wheel-1,
    .wheel-2,
    .pyramids {
        top: 4vw;
    }
    .btnlink {
        top: 97.5vw;
    }
}

@media screen and (max-device-width:480px) and (orientation: landscape) {
    .btnlink {
        font-size: 7vw;
    }
}


/* Devices */


/* mi 11 lite */

@media only screen and (device-width: 393px) and (device-height: 873px) and (orientation: portrait) {
    .wheel-bg {
        top: -11vw;
    }
    .wheel-1,
    .wheel-2,
    .pyramids {
        top: 49vw;
    }
    .btnlink {
        top: 131vw;
    }
}

@media only screen and (device-width: 873px) and (device-height: 393px) and (orientation: landscape) {
    .wheel-bg {
        top: -42vw;
    }
    .wheel-1,
    .wheel-2,
    .pyramids {
        top: -2vw;
        left: -10.1vw;
        width: 120vw;
        height: 120vw;
    }
    .scroll_to_explore {
        top: 38vw;
    }
    .btnlink {
        top: 32vw;
    }
}


/* iphone 4 */

@media only screen and (min-device-width: 320px) and (max-device-height: 480px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait) {
    .wheel-bg {
        top: -60vw;
        left: -170vw;
        width: 440vw;
        height: 440vw;
    }
    .wheel-1,
    .wheel-2,
    .pyramids {
        top: 10vw;
        left: -100vw;
        width: 300vw;
        height: 300vw;
    }
    .btnlink {
        top: 97.5vw;
    }
}


/* iphone 5 */

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait) {
    .wheel-bg {
        top: -60vw;
        left: -170vw;
        width: 440vw;
        height: 440vw;
    }
    .wheel-1,
    .wheel-2,
    .pyramids {
        top: 10vw;
        left: -100vw;
        width: 300vw;
        height: 300vw;
    }
    .btnlink {
        top: 97.5vw;
    }
}


/* iphone 6, 6s, 7, 8 */

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait) {
    .wheel-bg {
        top: -60vw;
        left: -170vw;
        width: 440vw;
        height: 440vw;
    }
    .wheel-1,
    .wheel-2,
    .pyramids {
        top: 10vw;
        left: -100vw;
        width: 300vw;
        height: 300vw;
    }
    .btnlink {
        top: 97.5vw;
    }
}


/* iphone 6+, 6s+, 7+, 8+ */

@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait) {
    .wheel-bg {
        top: -60vw;
        left: -170vw;
        width: 440vw;
        height: 440vw;
    }
    .wheel-1,
    .wheel-2,
    .pyramids {
        top: 10vw;
        left: -100vw;
        width: 300vw;
        height: 300vw;
    }
    .btnlink {
        top: 97.5vw;
    }
}


/* iphone X , XS, 11 Pro, 12 Mini */

@media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait) {
    .wheel-bg {
        top: -60vw;
        left: -170vw;
        width: 440vw;
        height: 440vw;
    }
    .wheel-1,
    .wheel-2,
    .pyramids {
        top: 10vw;
        left: -100vw;
        width: 300vw;
        height: 300vw;
    }
    .btnlink {
        top: 97.5vw;
    }
}

@media only screen and (device-width: 812px) and (device-height: 375px) and (orientation: landscape) {
    .wheel-bg {
        top: -34vw;
        left: -40vw;
        width: 180vw;
        height: 180vw;
    }
    .wheel-1,
    .wheel-2,
    .pyramids {
        top: -4vw;
        left: -10.1vw;
        width: 120vw;
        height: 120vw;
    }
    .btnlink {
        top: 31vw;
        font-size: 5vw;
    }
}


/* iphone 12, 12 Pro */

@media only screen and (min-device-width: 390px) and (max-device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait) {
    .wheel-bg {
        top: -60vw;
        left: -170vw;
        width: 440vw;
        height: 440vw;
    }
    .wheel-1,
    .wheel-2,
    .pyramids {
        top: 10vw;
        left: -100vw;
        width: 300vw;
        height: 300vw;
    }
    .btnlink {
        top: 98.5vw;
    }
}


/* iphone XR, 11 */

@media only screen and (min-device-width: 414px) and (max-device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait) {
    /* .wheel-bg {
        top: -60vw;
        left: -170vw;
        width: 440vw;
        height: 440vw;
    }
    .wheel-1,
    .wheel-2,
    .pyramids {
        top: 10vw;
        left: -100vw;
        width: 300vw;
        height: 300vw;
    }
    .btnlink {
        top: 98.5vw;
    } */
    .wheel-bg {
        top: -55vw;
        left: -170vw;
        width: 440vw;
        height: 440vw;
    }
    .wheel-1,
    .wheel-2,
    .pyramids {
        top: 15vw;
        left: -100vw;
        width: 300vw;
        height: 300vw;
    }
    .btnlink {
        top: 102vw;
    }
}


/* iphone XS Max, 11 Pro Max */

@media only screen and (min-device-width: 414px) and (max-device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait) {
    /* .wheel-bg {
        top: -60vw;
        left: -170vw;
        width: 440vw;
        height: 440vw;
    }
    .wheel-1,
    .wheel-2,
    .pyramids {
        top: 10vw;
        left: -100vw;
        width: 300vw;
        height: 300vw;
    }
    .btnlink {
        top: 98.5vw;
    } */
    .wheel-bg {
        top: -55vw;
        left: -170vw;
        width: 440vw;
        height: 440vw;
    }
    .wheel-1,
    .wheel-2,
    .pyramids {
        top: 15vw;
        left: -100vw;
        width: 300vw;
        height: 300vw;
    }
    .btnlink {
        top: 102vw;
    }
}

@media screen and (min-device-height: 414px) and (max-device-width: 896px) and (orientation: landscape) {
    .wheel-bg {
        top: -33vw;
        left: -40vw;
        width: 180vw;
        height: 180vw;
    }
    .wheel-1,
    .wheel-2,
    .pyramids {
        top: -3vw;
        left: -10vw;
        width: 120vw;
        height: 120vw;
    }
    .btnlink {
        top: 32vw;
    }
}


/* iphone 12 Pro Max */

@media only screen and (min-device-width: 428px) and (max-device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait) {
    .wheel-bg {
        top: -60vw;
        left: -170vw;
        width: 440vw;
        height: 440vw;
    }
    .wheel-1,
    .wheel-2,
    .pyramids {
        top: 10vw;
        left: -100vw;
        width: 300vw;
        height: 300vw;
    }
    .btnlink {
        top: 76vw;
    }
}

@media only screen and (device-width: 390px) and (device-height: 896px) and (orientation: portrait) {
    .wheel-bg {
        top: -15vw;
        left: -170vw;
        width: 440vw;
        height: 440vw;
    }
    .wheel-1,
    .wheel-2,
    .pyramids {
        top: 55vw;
        left: -100vw;
        width: 300vw;
        height: 300vw;
    }
    .btnlink {
        top: 143vw;
    }
}

@media only screen and (device-width: 411px) and (device-height: 823px) and (orientation: portrait) {
    .wheel-bg {
        top: -30vw;
        left: -170vw;
        width: 440vw;
        height: 440vw;
    }
    .wheel-1,
    .wheel-2,
    .pyramids {
        top: 40vw;
        left: -100vw;
        width: 300vw;
        height: 300vw;
    }
    .btnlink {
        top: 128vw;
    }
}

@media only screen and (device-width: 384px) and (device-height: 592px) and (orientation: portrait) {
    .wheel-bg {
        top: -57vw;
    }
    .wheel-1,
    .wheel-2,
    .pyramids {
        top: 3vw;
    }
    .btnlink {
        top: 90.5vw;
    }
}

@media only screen and (device-width: 592px) and (device-height: 384px) and (orientation: landscape) {
    .wheel-bg {
        top: -20vw;
    }
    .wheel-1,
    .wheel-2,
    .pyramids {
        top: 10vw;
    }
    .btnlink {
        top: 51vw;
    }
}

@media only screen and (device-width: 360px) and (device-height: 592px) and (orientation: portrait) {
    .wheel-bg {
        top: -49vw;
    }
    .wheel-1,
    .wheel-2,
    .pyramids {
        top: 11vw;
    }
    .btnlink {
        top: 93vw;
    }
}

@media only screen and (device-width: 592px) and (device-height: 360px) and (orientation: landscape) {
    .wheel-bg {
        top: -24vw;
    }
    .wheel-1,
    .wheel-2,
    .pyramids {
        top: 6vw;
    }
    .btnlink {
        top: 46.5vw;
    }
}

@media only screen and (device-width: 480px) and (device-height: 800px) and (orientation: portrait) {
    .wheel-bg {
        top: -93vw;
    }
    .wheel-1,
    .wheel-2,
    .pyramids {
        top: 17vw;
    }
    .btnlink {
        top: 137.5vw;
    }
}

@media only screen and (device-width: 800px) and (device-height: 480px) and (orientation: landscape) {
    .wheel-bg {
        top: -24vw;
    }
    .wheel-1,
    .wheel-2,
    .pyramids {
        top: 6vw;
    }
    .btnlink {
        top: 41vw;
        font-size: 4.5vw;
    }
}

@media only screen and (device-width: 412px) and (device-height: 869px) and (orientation: portrait) {
    .wheel-bg {
        top: -50vw;
        left: -200vw;
        width: 500vw;
        height: 500vw;
    }
    .wheel-1,
    .wheel-2,
    .pyramids {
        top: 60vw;
    }
    .btnlink {
        top: 141vw;
    }
}

@media only screen and (device-width: 412px) and (device-height: 892px) and (orientation: portrait) {
    .wheel-bg {
        top: -45vw;
        left: -200vw;
        width: 500vw;
        height: 500vw;
    }
    .wheel-1,
    .wheel-2,
    .pyramids {
        top: 65vw;
    }
    .btnlink {
        top: 146vw;
    }
}

@media only screen and (device-width: 892px) and (device-height: 412px) and (orientation: landscape) {
    .wheel-bg {
        top: -37vw;
    }
    .wheel-1,
    .wheel-2,
    .pyramids {
        top: -7vw;
    }
    .btnlink {
        top: 34vw;
    }
}

@media only screen and (min-device-width: 393px) and (device-height: 851px) and (orientation: portrait) {
    .wheel-bg {
        top: -69vw;
        left: -200vw;
        width: 500vw;
        height: 500vw;
    }
    .wheel-1,
    .wheel-2,
    .pyramids {
        top: 41vw;
    }
    .btnlink {
        top: 122vw;
    }
}


/* Google Pixel 4a */

@media only screen and (min-device-width: 463px) and (max-device-height: 1002px) and (orientation: portrait) {
    .navbar-brand {
        width: 140px;
    }
    .wheel-bg {
        top: -10vw;
    }
    .wheel-1,
    .wheel-2,
    .pyramids {
        top: 50vw;
    }
    .btnlink {
        top: 131vw;
    }
}


/* Oneplus */

@media only screen and (device-width: 384px) and (min-device-height: 854px) and (orientation: portrait) {
    .navbar-brand {
        width: 140px;
    }
    .wheel-bg {
        top: -54vw;
        left: -200vw;
        width: 500vw;
        height: 500vw;
    }
    .wheel-1,
    .wheel-2,
    .pyramids {
        top: 56vw;
    }
    .scroll_to_explore {
        top: 67vh;
        font-size: 1.05vh;
    }
    .btnlink {
        top: 137vw;
    }
}

@media only screen and (device-width: 854px) and (device-height: 384px) and (orientation: landscape) {
    .wheel-bg {
        top: -39vw;
    }
    .wheel-1,
    .wheel-2,
    .pyramids {
        top: -9vw;
        left: -20.1vw;
        width: 140vw;
        height: 140vw;
    }
    .scroll_to_explore {
        top: 38.2vw;
    }
    .btnlink {
        top: 32vw;
    }
}