/** HEADER **/
.header .header__top {
    background: rgba(0, 0, 0, .3);
}

.header .change-background.header__top {
    background: rgba(0, 0, 0, 1);
    backdrop-filter: blur(20px);
}

/* Media Queries - Header */
@media(max-height: 420px) {
    .header .header__top {
        background: rgba(0, 0, 0, .35);
    }
}

.banner {
    padding: 0;
    /*padding set to 0 for banner slideshow*/
    height: 100vh;
    flex-flow: column;
    /*center-flex class was used for banner*/
    /* background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .3)), url(../img/earth1.jpg) top / cover no-repeat; */
    /* background-attachment: fixed; */
    text-align: center;
    border-bottom: none;
    position: relative;
    perspective: 100rem;
}

.banner::before,
.banner::after {
    content: '';
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    z-index: 2;
}

.banner::before {
    left: 0;
}

.banner::after {
    right: 0;
}

.change.banner::before,
.change.banner::after {
    animation: change-bg .5s ease-in-out;
}

@keyframes change-bg {
    0% {
        width: 50%;
        background: rgba(255, 255, 255, .25);
    }

    100% {
        width: 0%;
        background: rgba(0, 0, 0, .25);
    }
}

/*for banner slideshow*/
.banner__slideshow {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.banner__slide {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    transition: all .75s ease-in-out;
}

.banner__slide.show-slide {
    opacity: 1;
    animation: change-size 1.2s
}

.banner__slide:nth-child(1) {
    background-image: url(../img/earth/earth1.jpg);
}

.banner__slide:nth-child(2) {
    background-image: url(../img/earth/earth2.jpg);
}

.banner__slide:nth-child(3) {
    background-image: url(../img/earth/earth3.jpg);
}

.banner__slide:nth-child(4) {
    background-image: url(../img/earth/earth4.jpg);
}

.banner__slide:nth-child(5) {
    background-image: url(../img/earth/earth5.jpg);
}

@keyframes change-size {
    from {
        transform: scale(1.6);
    }

    to {
        transform: scale(1);
    }
}

.banner__slide img {
    height: 100%;
    object-fit: cover;
}

.banner .spacecraft-image,
.banner .iss-image,
.banner .shuttle-image {
    position: absolute;
    width: 500px;
    opacity: 0;
}

.banner .spacecraft-image {
    animation: move-spacecraft 27s 2.7s forwards;
}

@keyframes move-spacecraft {
    0% {
        transform: translateZ(-10rem) translateY(40rem) translateX(-100rem) scale(1);
        filter: blur(0px);
        opacity: .5;
    }

    20% {
        opacity: 1;
    }

    70% {
        transform: translateZ(-400rem) translateY(-85rem) translateX(290rem) scale(.35) skew(20deg);
        filter: blur(0px);
        opacity: 0.7;
    }

    100% {
        transform: translateZ(-550rem) translateY(-85rem) translateX(290rem) scale(0) skew(25deg);
        filter: blur(10px);
        opacity: 0;
    }
}

.banner .iss-image {
    animation: move-iss 48s 8.2s forwards;
}

@keyframes move-iss {
    0% {
        transform: translateZ(-10rem) translateY(40rem) translateX(100rem) scale(1) rotate(0deg);
        filter: blur(0px);
        opacity: .5;
    }

    20% {
        opacity: 1;
    }

    70% {
        transform: translateZ(-400rem) translateY(-85rem) translateX(-290rem) scale(.35) skew(20deg) rotate(90deg);
        filter: blur(0px);
        opacity: .8;
    }

    100% {
        transform: translateZ(-400rem) translateY(-85rem) translateX(-290rem) scale(0) skew(25deg) rotate(0deg);
        filter: blur(10px);
        opacity: 0;
    }
}

.banner .shuttle-image {
    animation: move-shuttle 25s 20s forwards;
}

@keyframes move-shuttle {
    0% {
        transform: translateZ(-200rem) translateY(-85rem) translateX(-290rem) scale(1) rotate(160deg);
        filter: blur(0px);
        opacity: .5;
    }

    20% {
        opacity: 1;
    }

    70% {
        transform: translateZ(-400rem) translateY(90rem) translateX(270rem) scale(.5) skew(20deg) rotate(160deg);
        filter: blur(0px);
        opacity: .7;
    }

    100% {
        transform: translateZ(-400rem) translateY(90rem) translateX(270rem) scale(.25) skew(25deg) rotate(160deg);
        filter: blur(10px);
        opacity: 0;
    }
}

.banner__content {
    position: absolute;
    width: 80%;
}

.banner__title {
    font-size: calc(2rem + 1vw);
    font-family: 'Orbitron', sans-serif;
    color: var(--mid-gray-color);
    letter-spacing: 0px;
    position: relative;
    /*it overwrites the banner overlay using a higher z-index*/
    z-index: 4;
    margin-bottom: 7rem !important;
    -webkit-text-stroke: 1.3px var(--white-color);
}

.animated-text {
    margin: 0;
    padding: 0;
    background: url('../img/text-bg.jpg') no-repeat;
    background-clip: text;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -o-background-clip: text;
    -ms-background-clip: text;
    color: transparent;
    text-shadow: 3px 3px 5px rgba(0, 0, 0, .5);
    animation: moveBg 75s linear 2.5s, move-title 2s, change-spacing 2s 2s forwards, remove-title 8s forwards;
}

@keyframes moveBg {
    0% {
        background-position: 0% 0%;
    }

    100% {
        background-position: 100% 50%;
    }
}

@keyframes move-title {
    0% {
        transform: scale(.2) rotateX(90deg);
    }

    100% {
        transform: scale(1) rotateX(0deg);
    }
}

@keyframes change-spacing {
    from {
        letter-spacing: 0px;
    }

    to {
        letter-spacing: -4px;
    }
}

@keyframes remove-title {
    0% {
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.banner__title span {
    animation: lighting-tech 5s linear infinite;
}

@keyframes lighting-tech {
    0% {
        text-shadow: 0 0 3px #dfdfad, 0 0 3px #df6a18;
    }

    20% {
        text-shadow: 0 0 3px #dfdfad, 0 0 3px #df6a18;
    }

    40% {
        text-shadow: 3px 3px 5px rgba(0, 0, 0, .5);
    }

    100% {
        text-shadow: 3px 3px 5px rgba(0, 0, 0, .5);
    }
}

.banner__title span:nth-child(1) {
    animation-delay: 5s;
    font-size: calc(3rem + 1vw);
}

.banner__title span:nth-child(2) {
    animation-delay: 5.2s;
}

.banner__title span:nth-child(3) {
    animation-delay: 5.4s;
}

.banner__title span:nth-child(4) {
    animation-delay: 5.6s;
}

.banner__title span:nth-child(5) {
    animation-delay: 5.8s;
}

.banner__title span:nth-child(6) {
    animation-delay: 6s;
}

.banner__title span:nth-child(7) {
    animation-delay: 6.2s;
}

.banner__title span:nth-child(8) {
    animation-delay: 6.4s;
}

.banner__title span:nth-child(9) {
    animation-delay: 6.6s;
}

.banner__title span:nth-child(10) {
    animation-delay: 6.8s;
}

.banner__subtitle {
    width: 100%;
    height: 4rem;
    margin: 0 auto;
    transform: translateY(-85px);
    z-index: 4;
    display: flex;
    justify-content: center;
}

.banner__subtitle span {
    font-size: calc(1.37rem + 1vw);
    font-family: 'Play', sans-serif;
    color: var(--white-color);
    letter-spacing: 1px;
    text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black;
    -webkit-text-stroke: 1px rgba(0, 0, 0, .2);
    position: absolute;
    opacity: 0;
}

.banner__subtitle span.show-subtitle {
    animation: move-banner-subtitle 40.5s backwards infinite;
}

@keyframes move-banner-subtitle {
    0% {
        opacity: 0;
        transform: scale(2);
        filter: blur(4px);
    }

    2% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0);
    }

    10% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0);
    }

    16% {
        opacity: 0;
        filter: blur(4px);
    }

    100% {
        opacity: 0;
        filter: blur(4px);
    }
}

.banner__subtitle span:nth-child(1) {
    animation-delay: .3s;
    font-size: calc(2rem + 1vw) !important;
}

.banner__subtitle span:nth-child(2) {
    animation-delay: 5.5s;
}

.banner__subtitle span:nth-child(3) {
    animation-delay: 10.5s;
}

.banner__subtitle span:nth-child(4) {
    animation-delay: 15.5s;
}

.banner__subtitle span:nth-child(5) {
    animation-delay: 20.5s;
}

.banner__subtitle span:nth-child(6) {
    animation-delay: 25.5s;
}

.banner__subtitle span:nth-child(7) {
    animation-delay: 30.5s;
}

.banner__subtitle span:nth-child(8) {
    animation-delay: 35.5s;
}

.banner__btn {
    font-size: calc(.8rem + .7vw);
    color: var(--white-color);
    text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black;
    padding: 10px;
    background: rgba(255, 255, 255, .2);
    border: 2px solid var(--white-color);
    box-shadow: 0 0 0 2px var(--black-color), 0 0 0 3px var(--black-color), inset 0 0 0 2px rgba(0, 0, 0, 1);
    border-radius: 5px;
    letter-spacing: 2px;
    transform: translateY(-80px);
    transition: var(--transition-five);
    animation: move-banner-btn 2.5s forwards;
    position: relative;
    /*it overwrites the banner overlay using a higher z-index*/
    z-index: 4;
}

.banner__btn:hover {
    color: var(--dark-blue-color);
    background: rgba(255, 255, 255, .7);
    text-shadow: none;
    transform: translateY(0px);
    border: 2px solid var(--black-color);
    box-shadow: 0 0 0 2px var(--white-color), 0 0 0 3px var(--white-color), inset 0 0 0 2px rgba(0, 0, 0, 1);
}

@keyframes move-banner-btn {
    0% {
        opacity: 0;
        transform: translateY(80px);
    }

    100% {
        opacity: 1;
        transform: translateY(-80px);
    }
}

.banner__btn::after {
    content: '';
    height: 100%;
    width: 100%;
    border-radius: 7px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: var(--transition-five);
}

.banner__btn:hover::after {
    background-color: var(--white-color);
    transform: scale(1.6);
    opacity: 0;
}

.banner__thumbnails {
    width: 100%;
    display: flex;
    justify-content: center;
    position: absolute;
    bottom: 16px;
    /* left: 50%; */
    /* transform: translateX(-50%); */
    z-index: 5;
}

.banner__thumbnails__item {
    flex-basis: 20%;
    max-width: 97px;
    aspect-ratio: 16 / 9;
    margin-right: 12px;
    border: 2px solid var(--white-color);
    border-radius: 3px;
    cursor: pointer;
    transition: all .35s;
}

.selected.banner__thumbnails__item {
    filter: grayscale(100%);
    transform: scale(1.12);
    margin: 0 15px 0 3px;
    border: 2px solid var(--white-color);
    box-shadow: 0 0 0 2px var(--black-color), 0 0 0 2px var(--black-color);
}

.banner__thumbnails__item:hover {
    filter: brightness(70%);
}

.banner__thumbnails__item:last-child {
    margin-right: 0px;
}

.banner__thumbnails__item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Media Queries - Banner */
@media(min-width: 1028px) {
    .banner {
        background-attachment: fixed;
    }
}

@media(max-width: 820px) {
    .banner .spacecraft-image {
        width: 450px;
        animation: move-spacecraft2 43s .5s forwards;
    }

    @keyframes move-spacecraft2 {
        0% {
            transform: translateZ(-10rem) translateY(95rem) translateX(-100rem) scale(1) rotate(-20deg);
            opacity: .5;
        }

        20% {
            opacity: 1;
        }

        70% {
            transform: translateZ(-400rem) translateY(-260rem) translateX(290rem) scale(.4) skew(20deg) rotate(-20deg);
            opacity: 0.7;
        }

        100% {
            transform: translateZ(-550rem) translateY(-260rem) translateX(290rem) scale(0) skew(25deg) rotate(-20deg);
            opacity: 0;
        }
    }

    .banner .iss-image {
        width: 480px;
        animation: move-iss2 48s 7s forwards;
    }

    @keyframes move-iss2 {
        0% {
            transform: translateZ(-10rem) translateY(80rem) translateX(100rem) scale(1) rotate(0deg);
            opacity: 1;
        }

        20% {
            opacity: 1;
        }

        70% {
            transform: translateZ(-440rem) translateY(-220rem) translateX(-290rem) scale(.35) skew(20deg) rotate(90deg);
            opacity: .8;
        }

        100% {
            transform: translateZ(-490rem) translateY(-240rem) translateX(-290rem) scale(0) skew(25deg) rotate(0deg);
            opacity: 0;
        }
    }

    .banner .shuttle-image {
        width: 480px;
        animation: move-shuttle2 34s 13s forwards;
    }

    @keyframes move-shuttle2 {
        0% {
            transform: translateZ(-200rem) translateY(-255rem) translateX(-290rem) scale(1) rotate(180deg);
            opacity: .5;
        }

        20% {
            opacity: 1;
        }

        70% {
            transform: translateZ(-400rem) translateY(285rem) translateX(270rem) scale(.75) skew(20deg) rotate(180deg);
            opacity: .7;
        }

        100% {
            transform: translateZ(-400rem) translateY(285rem) translateX(270rem) scale(.4) skew(25deg) rotate(180deg);
            opacity: 0;
        }
    }
}

@media(max-width: 600px) {
    .banner__thumbnails__item {
        max-width: 80px;
        margin-right: 10px;
    }
}

@media(max-width: 500px) {
    .banner__btn {
        margin-top: 0rem;
    }

    .banner__thumbnails__item {
        max-width: 70px;
    }
}

@media(max-width: 420px) {
    .banner__title {
        font-size: calc(1.8rem + 1vw);
        letter-spacing: -2px;
    }

    .banner__subtitle span {
        font-size: calc(1.8rem + 1vw);
    }

    @keyframes change-spacing {
        from {
            letter-spacing: -2px;
        }

        to {
            letter-spacing: -4px;
        }
    }
}

@media(max-width: 375px) {
    .banner__thumbnails__item {
        max-width: 62px;
    }
}

@media(max-width: 360px) {
    .banner__thumbnails {
        display: none;
    }
}

@media(max-width: 325px) {
    .banner__title {
        font-size: calc(1.6rem + 1vw);
        letter-spacing: -4px;
    }
}

/* Height Control */
@media(max-height: 420px) {
    .banner__title {
        margin-top: 4rem !important;
    }
}

@media(max-height: 375px) {
    .banner__title {
        margin-top: 3rem !important;
    }
}

@media(max-height: 360px) {
    .banner__title {
        margin-top: 3.5rem !important;
    }
}

/** end HEADER **/

/** SERVICES **/
.services__content {
    justify-content: space-between;
    flex-wrap: wrap;
}

.services__content__image,
.services__content__skills {
    flex-basis: 48%;
}

.services__content__image {
    position: relative;
    z-index: 0;
}

.services__content__image img {
    opacity: .5;
    transition: var(--transition-five);
}

.change-opacity.services__content__image img {
    opacity: 1;
}

.services__content__image:after {
    content: "";
    position: absolute;
    width: 101%;
    height: 101%;
    top: -3px;
    left: -5px;
    z-index: -1;
    background: rgba(0, 0, 0, .25);
    box-shadow: 0 0 0 3px var(--black-color), 0 0 0 3px var(--black-color), inset 0 0 0 2px rgba(0, 0, 0, 1);
    border: 2px solid var(--white-color);
    border-radius: 7px;
    opacity: .5;
    transition: var(--transition-five);
}

.change-opacity.services__content__image::after {
    opacity: 1;
}

.services__content__image img {
    clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
}

.services__content__skill {
    margin-bottom: 1.2rem;
}

.services__content__skill:last-child {
    margin-bottom: 0;
}

.services__content__text {
    justify-content: space-between;
    font-weight: 700;
    margin-bottom: .2rem;
    font-family: 'Open Sans', sans-serif;
}

.skill-bar {
    width: 100%;
    height: 1rem;
    background-color: var(--mid-white-color);
    border-radius: 5px;
    border: 2px solid var(--white-color);
    box-shadow: 0 0 0 2px black, 0 0 0 3px black, inset 0 0 0 2px rgba(0, 0, 0, 1);
    position: relative;
}

.skill-bar__html,
.skill-bar__css,
.skill-bar__jscript,
.skill-bar__bootstrap,
.skill-bar__sass {
    width: 50%;
    height: 75%;
    border-radius: 3px;
    opacity: .5;
    position: absolute;
    top: 2px;
    left: 2px;
    transition: all .75s;
}

.change {
    opacity: 1
}

.skill-bar__html {
    background-color: #eb3b0f;
}

.skill-bar__css {
    background-color: #055488;
}

.skill-bar__jscript {
    background-color: #e7a618;
}

.skill-bar__bootstrap {
    background-color: #5d0cc0
}

.skill-bar__sass {
    background-color: #d32e80
}

.change.skill-bar__html,
.change.skill-bar__css {
    width: 90%;
}

.change.skill-bar__jscript,
.change.skill-bar__bootstrap {
    width: 80%;
}

.change.skill-bar__sass {
    width: 70%;
}

/* Media Queries - Services */
@media(min-width: 769px) {
    .services__content__image img {
        min-height: 257px;
    }
}

@media(max-width: 768px) {

    .services__content__image,
    .services__content__skills {
        flex-basis: 100%;
    }

    .services__content__image {
        margin-bottom: calc(2.3rem + 1vw);
    }
}

@media(max-width: 450px) {
    .services__content__image:after {
        left: -3px;
    }
}

/** end SERVICES **/

/** ABOUT **/
section.about {
    position: relative;
    transition: var(--transition-seven);
}

.switch-mode {
    position: absolute;
    top: 14px;
    right: 18px;
    flex-direction: column;
}

.switch-mode__text1,
.switch-mode__text2 {
    font-size: .82rem;
    font-family: 'Raleway', sans-serif;
    font-weight: 550;
}

.switch-mode__toggle {
    width: 29.7px;
    height: 62.8px;
    background-color: var(--white-color);
    border-radius: 29px;
    margin: 5px 0 3px 0;
    position: relative;
    cursor: pointer;
    border: 2px solid var(--black-color);
}

.switch-mode__indicator {
    display: block;
    width: 100%;
    height: 45%;
    background-color: var(--yellow-color);
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    transition: var(--transition-five);
}

.change-switch.switch-mode__indicator {
    top: 55%;
    background-color: var(--dark-orange-color);
}

section.about.change-switch {
    background-color: var(--dark-blue-color);
    color: var(--white-color);
}

section.about.change-switch .fa-power-off {
    color: var(--yellow-color);
}

.about__content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    column-gap: 3rem;
}

.about__item {
    transform: translateY(80px);
    opacity: .5;
    transition: var(--transition-one);
}

.about__item.show-item {
    opacity: 1;
    transform: translateY(0px);
}

.about__content__title {
    font-family: 'Play', sans-serif;
    font-size: calc(1.3rem + .7vw);
}

.about__content__paragraph {
    font-size: calc(.97rem + .3vw);
    line-height: 1.5;
    text-align: justify;
}

.about__content__btn {
    padding: .5rem;
    background: rgba(0, 0, 0, .8);
    color: var(--white-color);
    border-radius: 5px;
    font-size: calc(.8rem + .5vw);
    border: 2px solid var(--orange-color);
    display: inline-block;
    margin-top: 5px;
    transition: var(--transition-five);
    box-shadow: 0 0 3px var(--black-color), 0 0 0 3px var(--black-color), 0 0 0 2px var(--black-color);
}

.about__content__btn:hover {
    background: rgba(255, 255, 255, .3);
    color: var(--dark-blue-color);
    transform: translateY(0px);
}

.about__content__btn::after {
    content: '';
    height: 100%;
    width: 100%;
    border-radius: 7px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: var(--transition-five);
}

.about__content__btn:hover::after {
    background-color: var(--white-color);
    transform: scale(1.4);
    opacity: 0;
}

.about__content__image img {
    border: 2px solid var(--white-color);
    box-shadow: 0 0 3px var(--black-color), 0 0 0 3px var(--black-color), 0 0 0 2px var(--black-color);
    border-radius: 25px 8px;
    object-fit: cover;
    transition: var(--transition-five);
}

.change-switch .about__content__image img {
    border-radius: 8px 25px;
    border: 2px solid var(--white-color);
}

/* Media Queries - About */
@media(min-width: 769px) and (max-width: 950px) {
    .about__content__image img {
        min-height: 250px;
    }
}

@media(max-width: 768px) {
    .about__content {
        grid-template-columns: 1fr;
    }

    .about__content__btn {
        margin-bottom: 2rem;
    }
}

@media(max-width: 414px) {
    .switch-mode {
        right: 13px;
    }
}

@media(max-width: 325px) {

    .switch-mode__text1,
    .switch-mode__text2 {
        font-size: .8rem;
    }

    .switch-mode {
        right: 9px;
    }
}

/** end ABOUT **/

/** PORTFOLIO **/
.portfolio__content {
    display: grid;
    grid-gap: 1rem;
}

.portfolio__content__image {
    background-color: var(--orange-color);
    border: 2px solid var(--white-color);
    box-shadow: 0 0 0 2px black, 0 0 0 2px black;
    border-radius: 5px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--transition-five);
}

.portfolio__content__image:hover {
    border-radius: 20px 5px;
}

.portfolio-image {
    transition: var(--transition-five);
    height: 100%;
}

.portfolio__content__image:hover .portfolio-image {
    transform: scale(1.2);
    opacity: .8;
}

.portfolio__content__image i.fa-search {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: scale(1.8);
    color: var(--orange-color);
    opacity: .35;
    transition: var(--transition-five);
}

.portfolio__content__image:hover i.fa-search {
    opacity: 1;
    transform: scale(2.5);
    top: 45%;
}

.portfolio-caption {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: rgba(0, 0, 0, .35);
    padding: .4rem .5rem;
    border-radius: 5px;
    color: var(--white-color);
    opacity: .5;
    border: 1px solid transparent;
    transition: var(--transition-five);
}

.portfolio__content__image:hover .portfolio-caption {
    opacity: 1;
    bottom: 12px;
    left: 14px;
    background: rgba(0, 0, 0, .75);
    border: 1px solid var(--white-color);
}

/* Media Queries - Portfolio */
@media(max-width: 576px) {
    .portfolio__content {
        grid-template-columns: 1fr;
    }
}

@media(min-width: 577px) {
    .portfolio__content {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media(min-width: 993px) {
    .portfolio__content {
        grid-template-columns: repeat(4, 1fr);
        grid-template-areas:
            "one one two three"
            "one one four five"
            "six seven eight eight"
            "nine ten eight eight";
    }

    .item-1 {
        grid-area: one;
    }

    .item-2 {
        grid-area: two;
    }

    .item-3 {
        grid-area: three;
    }

    .item-4 {
        grid-area: four;
    }

    .item-5 {
        grid-area: five;
    }

    .item-6 {
        grid-area: six;
    }

    .item-7 {
        grid-area: seven;
    }

    .item-8 {
        grid-area: eight;
    }

    .item-9 {
        grid-area: nine;
    }

    .item-10 {
        grid-area: ten;
    }
}

/** end PORTFOLIO **/

/** SHUTTLE **/
section.shuttle {
    position: relative;
    transition: .5s;
}

section.shuttle.change-switch2 {
    background-color: var(--dark-blue-color);
}

.switch {
    position: absolute;
    top: 2.8%;
    left: 1.2%;
}

.switch__btn {
    position: relative;
    width: 70px;
    height: 30px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border-radius: 20px;
    background: #6dd1ff;
    box-shadow: 0 0 5px #6dd1ff, 0 0 0 4px #353535, 0 0 0 5px #3e3e3e, inset 0 0 0 3px rgba(0, 0, 0, 1);
    cursor: pointer;
    transition: var(--transition-five);
}

.change-switch2 .switch__btn {
    background: #334;
    box-shadow: 0 0 0 4px #353535, 0 0 0 5px #3e3e3e, inset 0 0 0 3px rgba(0, 0, 0, 1), 0 5px 20px rgba(0, 0, 0, .5);
}

.switch__btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: 1px;
    width: 45px;
    height: 30px;
    background: linear-gradient(0deg, #000, #6b6b6b);
    border-radius: 20px;
    box-shadow: 0 0 0 1px #232323;
    transform: scale(.9, .85);
    z-index: 1;
    transition: .5s;
}

.change-switch2 .switch__btn::before {
    left: 24px;
}

.switch__btn::after {
    content: "";
    position: absolute;
    top: calc(50% - 3px);
    left: 9px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #64cdff;
    box-shadow: 0 0 5px #64cdff, 0 0 5px #64cdff;
    z-index: 1;
    transition: var(--transition-five);
}

.change-switch2 .switch__btn::after {
    left: 30.5px;
    background: linear-gradient(0deg, #6b6b6b, #000);
    box-shadow: 0 0 0px #64cdff, 0 0 0px #64cdff;
}

.swith__text-dark,
.swith__text-light {
    font-size: .9rem;
    font-family: 'Orbitron', sans-serif;
    color: var(--white-color);
    letter-spacing: 2px;
}

.swith__text-dark {
    margin-left: .55rem;
    opacity: .5;
    transition: .5s;
}

.change-switch2 .swith__text-dark {
    opacity: 1;
}

.swith__text-light {
    margin-right: .55rem;
    opacity: 1;
    transition: .5s;
}

.change-switch2 .swith__text-light {
    opacity: .25;
}

.shuttle h2 {
    transition: .5s;
}

.change-switch2.shuttle h2 {
    color: var(--white-color);
}

.shuttle__content {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 2rem;
}

.shuttle__content__item {
    text-align: center;
    transform: translateX(25px);
    opacity: .5;
    transition: var(--transition-one);
}

.shuttle__content__item:nth-of-type(even) {
    transform: translateX(-25px);
}

.shuttle__content__item.change-item {
    transform: translateX(0px);
    opacity: 1;
}

.shuttle__content__item img {
    border: 2px solid var(--white-color);
    box-shadow: 0 0 3px var(--black-color), 0 0 0 3px var(--black-color), 0 0 0 2px var(--black-color);
    border-radius: 5px;
    transition: .5s;
}

.change-switch2 .shuttle__content__item img {
    border: 2px solid var(--white-color);
}

.shuttle__content__item h2 {
    font-size: 1.3rem;
    margin: .8rem 0;
    letter-spacing: 1px;
}

.shuttle__content__item .shuttle-btn {
    padding: .45rem;
    background-color: var(--light-gray-color);
    border: 3px solid var(--dark-orange-color);
    margin-bottom: .8rem;
    border-radius: 5px;
    font-size: .9rem;
    transition: var(--transition-five);
}

.shuttle__content__item .shuttle-btn:hover {
    background-color: var(--dark-blue-color);
    color: var(--white-color);
}

.shuttle__content__item p {
    font-family: 'Raleway', sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    transition: .5s;
}

.change-switch2 .shuttle__content__item p {
    color: var(--white-color);
}

.bg-dark {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .7);
    opacity: 0;
    visibility: hidden;
    transition: var(--transition-five);
    z-index: 1;
}

.bg-dark-show {
    opacity: 1;
    visibility: visible;
}

/* Shuttle Modal */
.shuttle__modal {
    position: absolute;
    top: 15%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    color: var(--white-color);
    background: rgba(25, 25, 25, 0.9);
    padding: .7rem 1.6rem 1.45rem 1.55rem;
    line-height: 2;
    border: 2px solid var(--orange-color);
    border-radius: 5px;
    font-size: 1.12rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s, visibility .5s, border-radius 1.8s, border 2s;
}

.shuttle__modal h2 {
    margin-bottom: .5rem;
}

.show-modal {
    opacity: 1 !important;
    visibility: visible !important;
    border-radius: 23px 5px;
    border: 2px solid var(--white-color) !important;
}

.close-modal-btn {
    position: absolute;
    top: 5%;
    right: 5%;
    font-size: 1.8rem;
    cursor: pointer;
    padding: 0 !important;
}

/* Media Queries - Shuttle */
@media(max-width: 992px) {
    .shuttle__content {
        grid-template-columns: repeat(2, 1fr);
    }

    .shuttle__content__item:nth-child(3) img,
    .shuttle__content__item:last-child img {
        margin-top: 1.2rem;
    }

    #modal-1,
    #modal-2 {
        top: 9%;
    }

    #modal-3,
    #modal-4 {
        top: 48%;
    }
}

@media(max-width: 768px) {
    section.shuttle {
        padding-top: calc(3.5rem + 1vw);
    }

    .shuttle__modal {
        width: 430px;
        font-size: 1rem;
    }
}

@media(max-width: 576px) {
    .shuttle__content {
        grid-template-columns: 1fr;
    }

    .shuttle__content__item:nth-child(2) img {
        margin-top: 1.2rem;
    }

    #modal-1 {
        top: 4.5%;
    }

    #modal-2 {
        top: 27%;
    }

    #modal-3 {
        top: 50%;
    }

    #modal-4 {
        top: 70%;
    }

    .switch {
        top: 1.08%;
        left: 2.5%;
    }
}

@media(max-width: 500px) {
    .shuttle__modal {
        width: 400px;
    }
}

@media(max-width: 470px) {
    .shuttle__modal {
        width: 370px;
    }
}

@media(max-width: 430px) {

    .swith__text-dark,
    .swith__text-light {
        font-size: .88rem;
    }

    .switch__btn {
        width: 70px;
        height: 23px;
    }

    .switch__btn::before {
        width: 37px;
        height: 23px;
    }

    .change-switch2 .switch__btn::before {
        left: 31px;
    }

    .switch__btn::after {
        top: calc(50% - 4px);
        left: 7px;
    }

    .change-switch2 .switch__btn::after {
        left: 37px;
    }

    .shuttle__modal {
        width: 355px;
    }
}

@media(max-width: 400px) {
    .shuttle__modal {
        width: 340px;
    }
}

@media(max-width: 375px) {
    .shuttle__modal {
        width: 310px;
        overflow: hidden;
    }
}

@media(max-width: 360px) {
    .shuttle__modal {
        width: 300px;
    }
}

@media(max-width: 320px) {
    .shuttle__modal {
        width: 290px;
    }
}

/** end SHUTTLE **/

/** LAPTOPS **/
section.laptops {
    position: relative;
}

section.laptops .section-title {
    width: 100%;
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
}

h3.banner-heading {
    height: 4rem;
    perspective: 20rem;
}

h3.banner-heading span {
    font-family: 'Montserrat', sans-serif;
    font-size: calc(2.5rem + 1vw);
    font-weight: 550;
    color: #010615;
    text-shadow: -2px -2px 0 #e28b07, 2px -2px 0 #e28b07, -2px 2px 0 #e28b07, 2px 2px 0 #e28b07;
    position: absolute;
    width: 100%;
    display: flex;
    justify-content: center;
    transform: translateZ(2rem);
    opacity: 0;
    letter-spacing: .7rem;
}

.heading-1 {
    animation: animateHeading 15s 1s infinite;
}

.heading-2 {
    animation: animateHeading 15s 4s infinite;
}

.heading-3 {
    animation: animateHeading 15s 7s infinite;
}

.heading-4 {
    animation: animateHeading 15s 10s infinite;
}

.heading-5 {
    animation: animateHeading 15s 13s infinite;
}

@keyframes animateHeading {
    0% {
        transform: translateZ(2rem);
        opacity: 0;
        letter-spacing: 2.7rem;
    }

    2% {
        transform: translateZ(0);
        opacity: 1;
        letter-spacing: .7rem;
    }

    20% {
        transform: translateZ(0);
        opacity: 1;
        letter-spacing: .7rem;
    }

    23% {
        transform: translateZ(2rem);
        opacity: 0;
        letter-spacing: 2.7rem;
    }

    100% {
        transform: translateZ(2rem);
        opacity: 0;
        letter-spacing: 2.7rem;
    }
}

.laptops__content__item {
    margin: calc(4rem + 1vw) 1rem 1rem 1rem;
    border: 2px solid var(--white-color);
    box-shadow: 0 0 0 2px var(--black-color), 0 0 0 3px var(--black-color), inset 0 0 0 2px rgba(0, 0, 0, 1);
    border-radius: 5px;
}

.laptops__image {
    position: relative;
    overflow: hidden;
}

.laptops__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, .7);
    transform: translateY(100%);
    transition: var(--transition-five);
}

.laptops__image:hover .laptops__overlay {
    transform: translateY(0%);
}

.laptops__overlay h3 {
    position: absolute;
    bottom: 10%;
    left: 5%;
    font-family: 'Orbitron', sans-serif;
}

.laptops__info {
    padding: .5rem 0;
    text-align: center;
    background-color: var(--mid-blue-color);
    border-top: 2px solid var(--black-color);
}

.laptops__info h2 {
    font-family: 'Play', sans-serif;
    color: var(--mid-white-color);
    letter-spacing: 1.45px;
    font-size: 1.3rem;
    text-shadow: 2px 2px 5px black;
}

/** end LAPTOPS **/

/** 3D CUBE **/
section.cube {
    position: relative;
    padding: 2rem 2.5rem 5.8rem 2.5rem;
}

.cube .section-title h2 {
    font-size: calc(1.2rem + .7vw);
}

.cube__buttons {
    text-align: center;
    margin: -1.45rem 0 2rem 0;
}

.cube__buttons__btn {
    padding: 4px 8px;
    margin-left: 1.4rem;
    background-color: red;
    color: var(--white-color);
    border: 2px solid var(--white-color);
    border-radius: 5px;
    box-shadow: 0 0 0 3px #3e3e3e, inset 0 0 0 1px rgba(0, 0, 0, 1), 0 5px 20px rgba(0, 0, 0, .5);
    cursor: pointer;
    transition: .5s;
}

.cube__buttons__btn:hover {
    box-shadow: 0 0 0 3px rgba(62, 62, 62, .5), inset 0 0 0 1px rgba(0, 0, 0, 1);
}

.cube__buttons__btn:nth-of-type(1) {
    margin-left: 0rem;
}

.cube__buttons__btn.active-btn {
    background-color: green;
}

.cube__buttons__btn i {
    margin-left: .3rem;
}

.cube__content {
    width: 230px;
    height: 230px;
    margin: 5.88rem auto 0rem auto;
    perspective: 1250px;
}

.cube__boxes {
    animation: animate-cube 12s ease-in-out infinite;
    transform-style: preserve-3d;
    transform-origin: 115px 115px 0;
}

.cube__boxes.stop-animation {
    animation: none;
}

.cube__boxes.change-animation {
    animation: animate-cube2 14s ease-in-out infinite;
}

.cube__boxes.change-animation.stop-animation {
    animation: none;
}

.cube__boxes>div {
    position: absolute;
    width: 230px;
    height: 230px;
    background-size: cover;
    background-position: center;
    border: 3px solid black;
    box-shadow: 0 0 5px #ffffff, 0 0 0 5px #222222;
}

.cube__boxes img {
    width: 100%;
}

.cube__box1 {
    transform: translateZ(115px);
}

.cube__box2 {
    transform: rotateY(90deg) translateZ(115px);
}

.cube__box3 {
    transform: rotateY(90deg) rotateX(90deg) translateZ(115px);
}

.cube__box4 {
    transform: rotateY(180deg) rotateZ(90deg) translateZ(115px);
}

.cube__box5 {
    transform: rotateY(-90deg) rotateZ(90deg) translateZ(115px);
}

.cube__box6 {
    transform: rotateX(-90deg) translateZ(115px);
}

.cube__boxes__title {
    position: absolute;
    bottom: 0px;
    left: 50%;
    width: 78px;
    height: 29px;
    transform: translateX(-50%);
    color: var(--white-color);
    background-color: rgba(0, 0, 0, .5);
    margin: 0;
    border-radius: 7px 7px 0 0;
    border: 2px solid var(--white-color);
    border-bottom: 0;
}

/* Option1 */
@keyframes animate-cube {
    0% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }

    16% {
        transform: rotateY(-90deg);
    }

    35% {
        transform: rotateY(-90deg) rotateZ(90deg);
    }

    50% {
        transform: rotateY(-180deg) rotateZ(90deg);
    }

    66% {
        transform: rotateY(-270deg) rotateX(90deg);
    }

    84% {
        transform: rotateX(90deg);
    }

    100% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }
}

/* Option2 */
@keyframes animate-cube2 {
    0% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }

    16% {
        transform: rotateX(90deg);
    }

    28% {
        transform: rotateY(180deg) rotateZ(90deg)
    }

    45% {
        transform: rotateY(270deg) rotateZ(0deg);
    }

    60% {
        transform: rotateY(90deg) rotateX(90deg);
    }

    80% {
        transform: rotateY(-90deg) rotateZ(90deg);
    }

    100% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }
}

/** Media Queries - 3D Cube **/
@media(max-width: 950px) {
    section.cube {
        padding: 2.7rem 2.5rem 5.8rem 2.5rem;
    }

    .cube__buttons {
        margin: 1.2rem 0 2rem 0;
    }
}

@media(max-width: 768px) {
    section.cube {
        padding: calc(2rem + 1vw) calc(2.3rem + 1vw) calc(6.5rem + 1vw) calc(2.3rem + 1vw);
    }
}

@media(max-width: 375px) {
    section.cube {
        padding: calc(2rem + 1vw) calc(2.3rem + 1vw) calc(4.8rem + 1vw) calc(2.3rem + 1vw);
    }

    .cube__content {
        width: 180px;
        height: 180px;
        margin: 5.2rem auto 0 auto;
    }

    .cube__boxes {
        transform-origin: 90px 90px 0;
    }

    .cube__boxes>div {
        width: 180px;
        height: 180px;
    }

    .cube__box1 {
        transform: translateZ(90px);
    }

    .cube__box2 {
        transform: rotateY(90deg) translateZ(90px);
    }

    .cube__box3 {
        transform: rotateY(90deg) rotateX(90deg) translateZ(90px);
    }

    .cube__box4 {
        transform: rotateY(180deg) rotateZ(90deg) translateZ(90px);
    }

    .cube__box5 {
        transform: rotateY(-90deg) rotateZ(90deg) translateZ(90px);
    }

    .cube__box6 {
        transform: rotateX(-90deg) translateZ(90px);
    }
}

/* Social Share */
ul.social-share {
    position: absolute;
    top: 15px;
    right: 18px;
}

ul.social-share li {
    cursor: pointer;
}

.social-share-icon {
    padding: 0 3px;
    background-color: var(--mid-white-color);
    border-radius: 3px 3px 0 0;
    border: 1px solid black;
}

.fa-share-alt-square {
    font-size: 2.5rem;
    transition: var(--transition-five);
}

.fa-share-alt-square:hover {
    color: var(--black-color);
}

.social-share-items {
    margin-top: -2px;
    height: 0;
    overflow: hidden;
    background-color: var(--mid-white-color);
    flex-direction: column;
    border-radius: 0px 0px 5px 5px;
    transition: var(--transition-one);
    border: 1px solid black;
}

.change-share-height {
    height: 157px;
}

.social-share-items i {
    font-size: 1.8rem;
}

.fa-facebook {
    color: var(--dark-blue-color);
    margin-top: 4px;
}

.fa-linkedin {
    color: var(--light-blue-color);
}

.fa-whatsapp-square {
    color: var(--green-color);
}

.fa-envelope {
    color: var(--light-red-color);
    transform: scale(.925);
}

.fa-facebook:hover,
.fa-linkedin:hover,
.fa-whatsapp-square:hover,
.fa-envelope:hover {
    color: var(--gray-color);
}

.social-share-items li {
    margin-top: .6rem;
}

.social-share-items li:first-child {
    margin-top: 0rem;
}

/* Media Queries - Social Share */
@media(max-width: 420px) {
    ul.social-share {
        right: 12px;
    }

    .fa-share-alt-square {
        font-size: 2rem;
    }

    .social-share-items i {
        font-size: 1.5rem;
    }

    .social-share-items li:first-child {
        margin-top: .2rem;
    }

    .change-share-height {
        height: 147px;
    }

    .fa-facebook {
        margin-top: 0px;
    }
}

@media(max-width: 375px) {
    .social-share-items li:first-child {
        margin-top: .14rem;
    }
}

@media(max-width: 360px) {
    .social-share-items li:first-child {
        margin-top: .08rem;
    }
}

/** end 3D CUBE **/

/** CITIES **/
section.cities {
    padding: calc(1rem + 1vw) calc(2.3rem + 1vw) calc(3.5rem + 1vw) calc(2.3rem + 1vw);
    position: relative;
}

.instructions {
    text-align: center;
    margin: -2rem 0 1.68rem 0;
    font-size: .95rem;
}

.cities .fa-volume-up,
.cities .fa-volume-mute {
    margin: 3px 4px 0 0;
    font-size: 20px;
}

.cities__audio-switch {
    position: absolute;
    top: 5px;
    right: 11.5px;
}

.audio-text-on,
.audio-text-off {
    font-size: .82rem;
    font-family: 'Open Sans', sans-serif;
    font-weight: 550;
    transition: var(--transition-five);
}

.audio-text-on {
    opacity: 1;
}

.change-switch3.audio-text-on {
    opacity: .5;
}

.audio-text-off {
    opacity: .5;
}

.change-switch3.audio-text-off {
    opacity: 1;
}

.audio-toggle {
    width: 52px;
    height: 28px;
    background-color: var(--white-color);
    border-radius: 30px;
    margin: 5px .25rem 3px .25rem;
    border: 2px solid var(--black-color);
    cursor: pointer;
    position: relative;
}

.audio-toggle__indicator {
    display: block;
    width: 48%;
    height: 100%;
    background-color: var(--green-color);
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    transition: var(--transition-five);
}

.change-switch3.audio-toggle__indicator {
    left: 52%;
    background-color: var(--red-color);
}

.cities__content {
    display: flex;
    margin-top: -1rem;
}

.cities__content__image {
    width: 8.5%;
    height: 65vh;
    margin-right: 1.2rem;
    border-radius: 10px;
    border: 1px solid var(--black-color);
    box-shadow: 4px 0px 8px var(--black-color);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all .7s ease-out;
}
.cities__content__image:hover {
    opacity: .5;
}

.cities__content__image:nth-child(5) {
    margin-right: 0;
}

.cities__content__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.active-image.cities__content__image {
    cursor: default;
    width: 64%;
    border: 1.4px solid var(--white-color);
    box-shadow: 0 0 0 2px var(--black-color), 0 0 0 2px var(--black-color), inset 0 0 0 2px rgba(0, 0, 0, 1);
}
.active-image.cities__content__image:hover {
    opacity: 1;
}

.cities__content__image h3 {
    padding: .2rem .4rem .25rem .4rem;
    font-size: calc(16px + .5vw);
    background: rgba(0, 0, 0, .5);
    position: absolute;
    top: 12px;
    left: 12px;
    color: var(--white-color);
    border-radius: 5px;
    border: 1px solid var(--white-color);
    opacity: 0;
    /*max-height set to fix background for small devices*/
    max-height: 35px;
}

.active-image.cities__content__image h3 {
    opacity: 1;
    transition: opacity .3s ease-in .5s;
}

/* Media Queries - Cities */
@media(max-width: 915px) {
    section.cities {
        padding: calc(2.3rem + 1vw) calc(2.3rem + 1vw) calc(3.5rem + 1vw) calc(2.3rem + 1vw);
    }

    .cities__content__image {
        width: 10.5%;
    }

    .cities__content__image:nth-child(4) {
        margin-right: 0;
    }

    .cities__content__image:nth-child(5) {
        display: none;
    }
}

@media(max-width: 700px) {
    .cities__content {
        flex-direction: column;
    }

    .cities__content__image {
        width: 100%;
        height: 11vh;
        margin: 0 0 11.5px 0;
    }

    .active-image.cities__content__image {
        width: 100%;
        height: 32vh;
    }

    .cities__content__image:nth-child(5) {
        display: block;
        margin-bottom: 0;
    }
}

/* Height Control */
@media(max-height: 540px) {
    .cities__content {
        flex-direction: row;
    }

    .cities__content__image {
        width: 11%;
        height: 65vh;
        margin-right: 1rem;
    }

    .active-image.cities__content__image {
        width: 65%;
        height: 65vh;
    }

    .cities__content__image:nth-child(5) {
        display: none;
    }
}

/** end CITIES **/