/* 

Mpire AB
Abdul Rahman Sai
April 2020

=================================
§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§
====================================
=========== Mobile Style ===========
====================================

A. max-width: 320px - Smart Phones, small screens.
B. max-width: 480px - Smart Phones, big screens.

§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§
================================= */


/* A. Small Devices ( Phones, 480px ) */



h2 { font-size: 2.8em !important; }
h3 { font-size: 2em !important; }
h4 { font-size: 1.2em !important; }







/* ==================================
========== 00. Main Layout ==========
================================== */

/* Main content */
#mainPage {
    margin: 0;    
    padding: 0;
    width: 100vw;
}


.grid {
    border: 0;
    display: grid;
    grid-template-columns: 33.3% 33.3% 33.3%;
    grid-column-gap: 0;
    grid-row-gap: 0;
    grid-gap: 0;
    height: 100vh;
    margin: 0;
    padding: 0px;
    position: fixed;
    width: 100vw;
}
.grid-col:first-child, .grid-col:nth-child(2), .grid-col:nth-child(3) {
    border-bottom: 0;
    border-left: 0;
    border-right: 1px rgba(255, 255, 255, 0.25) solid;
    border-top: 0;
    margin: 0;
    padding: 0;
}
.grid-col:nth-child(4), .grid-col:nth-child(5), .grid-col:last-child { display: none; }
.blur { display: none; }



/* Mpire's NowAday information */

.nowAdayInfo {
    height: 70vh;
    left: 0;
    margin: 0;
    opacity: 0.95;
    padding: 30vh 0 0 10vw;
    position: relative;
    width: 100vw;
}
.nowAdayInfo figure figcaption { 
    margin: 0;
    width: 100%;}
.nowAdayInfo figure figcaption:nth-child(2) { display: none;}
.nowAdayInfo h2 { font-size: 1.6em !important}
.nowAdayInfo p { font-size: 1em; }


/* =================================
============ 01. Header ============
================================= */

.mpire-logo { /* Mpire's logo */
    background-color: transparent;
    margin: 5% 33.3%;
    position: absolute;
    text-align: center;
    width: 33.3%;
}
.mpire-logo img {
    padding: 5%;  
    position: relative;      
    width: 25%;
}
.burger-menu { /* the magical button */
    right: 15%;
    margin: 0;
    position: absolute;
    top: 7.5%;
}


/* ==============================
======== 02. Menu Window ========
============================== */

/* Right Side of Menu */
.menu-right-side {
    height: 50vh;
    position: absolute;
    text-align: center;
    width: 100vw;
    z-index: 2;
}
.menu-right-side-center { top: 90%; }
    
/* Langunges */
.lang-links { margin: 20% 0 10% 0; }
.lang-links li { margin-right: 5%; }
.lang-links li a { font-size: 3.6vw; }
    
/* Pages */
.pages-links li { margin: 5% 0; }
.pages-links li a { font-size: 12vw; }

/* Left Side of Menu */
.menu-left-side {
    height: 50vh;
    top: 55%;
    width: 100vw;
}    
.menu-left-side-center { left: 28vw }    
#menu-information { font-size: 4.5vw; text-align: center; }  
.social-media-mobile { display: block; }
.fa { 
    margin: 2vw 0;
    padding: 0 1vw;
    width: max-content; 
}   


/* =====================================
======== 03. Social Media Aside ========
===================================== */

.social-media-dark {
    display: none; /* for desktop version */
}



/* ===============================
=========== 04. Footer ===========
=============================== */

footer {
    height: auto;
    margin: 10vh 0 2vh 0;
    position: absolute;
    left: 0;
    width: 100%;
    z-index: 1;
}
footer figure {
    display: block;    
    margin: 8vw 0 0 0;
    padding: 0;
    width: 100%;
}
footer ul li { text-align: center; }
footer img { width: 25%; }

footer h5 {
    font-size: 1.4em;
    margin: 0 0 2vw 0;
    padding: 0;
    text-align: center;
    text-transform: capitalize;
}
footer p {
    font-size: 1em;
    font-style: normal;
    margin: 0 0 0.5vw 0;
    padding: 0;
    text-align: center;
}
footer form {
    text-align: center;
    margin: 2vw 0 0 0;
}
footer label { 
    display: block;
    margin: 4vw 0 2vw 0;
    text-align: center;
}
footer input {
    margin: 0;
    padding: 0.5vw 1vw;
}
#footerEmail { width: 28vw; }

.copyright-v1 {
    border-top: 1px gray solid;
    letter-spacing: 0.20em;
    margin: 10vw 0 0 0;;
    padding: 4vw 0 0 0;
    text-align: center;
    width: 100%;
}


/* footer V2 */
.footer-v2 {
    bottom: 0;
    height: auto;
    left: 0;
    margin: 0;
    position: fixed;
    right: 0;
    width: 100%;
    z-index: 1;
}

.copyright-v2 {
    bottom: 0;
    letter-spacing: 0.1em;
    margin: 2vw 0;
    padding: 2vw 0;
    text-align: center;
    width: 100%;
}




/* ==========================================
=========== 05. Mpire Music Track ===========
========================================== */

.mpireMusic {
    bottom: 34vw;
    height: 3vh;
    left: 0;
    opacity: 0.5;
    transform: rotateZ(90deg) translateY(125%);
    -ms-transform: rotateZ(90deg) translateY(125%);
    width: 29vw;
}


/* ===========================================
=========== 06. Mode Toggle Switch ===========
=========================================== */

.switch {
    left: 2vw;
    position: absolute;
    top: 9vw;
}



/* ==============================
=========== 07. Go Up ===========
============================== */

.up {
    background-color: rgba(255, 255, 255, 0.5);
    bottom: 8%;
    font-size: 1.25em;
}



/* ==============================
========== 08. cookies ==========
============================== */
.cookies {
    bottom: 0;
    top: auto;
}
.cookies button {
    margin: 0 0 0 2vw;
    padding: 0.5vw 4vw;
}


/* ================================
========== 09. Home Page ==========
================================ */

.mpireIntro {
    -ms-transform: translateX(0%) translateY(-55%);
    transform: translateX(0%) translateY(-55%);
}

.biggestMpire { 
    left: auto;
    top: auto;
    transform: rotateZ(0deg) translateY(-220%) translateX(45%);
    -ms-transform: rotateZ(0deg) translateY(-220%) translateX(45%);
} /* for desktop version */

.mpireIntro figcaption {
    left: 55%;
    top: 45%;
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    width: 74%;
}
.mpireIntro figcaption h2 { font-size: 8vw; }
.mpireIntro figcaption button {
    border: 2px rgba(255, 255, 255, 0.85) solid;
    font-size: 4vw;
    margin: 2vw 0 0 0;
    padding: 0.5em 0.5em;
    width: auto;        
}
.we { display: none; } /* Slogan for desktop */

.astronaut {
    bottom: -115vw;
    -ms-transform: translateX(0%) translateY(15%);
    transform: translateX(0%) translateY(15%);
}
.astronaut img {
    text-align: center;
    -ms-transform: translateX(-5.5%);
    transform: translateX(-5.5%);
    width: 100%;
}  
.avatar {
    animation: 0;
}

/* ====================================
=========== 10. About Mpire ===========
==================================== */


/* About Mpire */

.aboutMpire {
    margin: 0;
    padding: 20vh 6vw 5vh 6vw;
    width: 88vw; /* 100vw - 12vw(6vw*2) from padding */
}

.aboutMpire figure {
    display: flex;
    width: 100%;
}
.aboutMpire article {
    margin: 0;
    padding: 4vh 0;
    width: 100%;
}
.aboutMpire figcaption {
    margin: 0;
    padding: 0;
    width: 0;
}
.aboutMpire small {
    margin: 50% 0;
}
.aboutMpire p {
    margin: 6vw 0;
    padding: 0;
    width: 100%;
}
.aboutMpire img {
    margin: 0;
    padding: 0;
    width: 100%;
}

.grayAbout {
    color: gray !important;
    margin: 1vw auto 1vw auto !important;
}
.hello { display: none; } /* for desktop version */
.hello-mobile { 
    display: block;
    margin: 10vw 0 10vw 0 !important;
}



/* Mpire's Sign section */

.mpireSign {
    margin: 0;
    padding: 0 6vw 10vh 6vw;
    width: 88vw; /* 100vw - 12vw(6vw*2) from padding */    
}

.signatures {
    display: block;
    margin: 0;
    /*overflow-x: hidden;
    overflow-y: hidden;*/
    width: 100%;
}

.signature {
    display: block;
    height: auto;
    margin: 0 0 10vh 0;
    padding: 0;
    width: 100%;
}

.signature div {
    display: block;
    height: 90vh;
    margin: 0;
    padding: 0;
    width: 100%;
}

.signature figcaption {
    display: block;
    height: auto;
    margin: -70vh 0 0 0;
    padding: 20vw 0;
    width: 100%;
}

.signature p {
    font-size: 14vw;
    line-height: 1.1em;
    text-align: left;
}
.signature strong { background-color: rgba(142, 142, 142, 0.5);}

.experiences {
    background-attachment: scroll;
    background-color: transparent;
    background-image: url(../img/yellowSpaceMan.png);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: 80%;
}
.solution {
    background-attachment: scroll;
    background-color: transparent;
    background-image: url(../img/spaceshipRuby.png);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: 80%;
}
.stories {
    background-attachment: scroll;
    background-color: transparent;
    background-image: url(../img/moonTurquoise.png);
    background-position:  50% 50%;
    background-repeat: no-repeat;
    background-size: 80%;
}
#create { display: block;}
#code { display: none;}
#tell { display: none;}




/* Mpire's Journey */

.mpireJourney {
    height: auto;
    margin: 0;
    padding: 10vh 6vw;
    width: 88vw; /* 100vw - (12vw*2) from padding */
}
.journeyYears { margin: 8vw 0; }
.journeyYears ul { display: flex; }
.journeyYears ul li { padding: 0 10vw 0 0; }
.journeyYears ul li a { cursor: pointer; }

.mpireJourney figure {
    display: block;
    margin: 2vw 0;
    width: 100%;    
}
.mpireJourney img { width: 100%; }
.mpireJourney article {
    margin: 6vw 0;
    padding: 2vw;
    width: 100%;
}

.journeyPoints li { margin: 2vw 0 0 2vw; } 

/* when page loud */
#mpireJourney2017 { display: block; }
#mpireJourney2018 { display: none; }
#mpireJourney2019 { display: none; }
#mpireJourney2020 { display: none; }

/* Journey slider */
.journeySlider { width: 100%; } /* Slideshow container */



/* Mpire's Awards */

.mpireAwards {    
    padding: 10vh 0;
    width: 100%; 
}
.mpireAwards h2  { margin: 0 0 0 6vw; }
.mpireAwards span  { margin: 2vw 0; }
.mpireAwards p { font-size: 4em; }
.mpireAwards span p:first-child { animation-delay: 3s; -webkit-animation: awards1 10s linear infinite alternate;}
.mpireAwards span p:nth-child(2) { animation-delay: 5s; -webkit-animation: awards2 15s linear infinite alternate;}

@-webkit-keyframes awards1 {
    from { 
        left: 10%;
    }
    to { 
        left: -450%;
    }
}
@-webkit-keyframes awards2 {
    from { 
        left: 30%;
    }
    to { 
        left: -400%;
    }
}



/* Mpire's People */

.mpirePeople {
    margin: 0 6vw;
    padding: 10vh 0;    
    width: 88vw; /* 100vw - (12vw*2) from margin */
}

.memberNavigator { display: none; }

.team {
    display: block;
    margin: 0;
    overflow-x: hidden;
    overflow-y: hidden;
    width: 100%;
}
.member {
    display: block;
    margin: 20vw 0 0 0;
    padding: 0;
    width: 100%;
}
.member img { width: 100%; }
.memberInfo {
    padding: 5vw 0;
    width: 100%;
}
.member h6 {
    font-size: 1.8em;
    width: max-content;
}
.member p { font-size: 1.5em; }
.member a {
    display: block;
    font-size: 1em;
    font-display: none;
}
.memberContact { margin: 4vw 0; }
.memberSocial {margin: 4vw 0; }
.memberSocial a { padding: 0 10% 0 0; }
.memberHobby { font-size: 1.2em !important; }



/* =====================================
========= 11. Mpire's Services =========
===================================== */

.ball { display: none; }

.servicesPoints { display: none } /* Services Points */

.services section {
    height: auto;
    margin: 0;
    padding: 16vh 0 0 0;
    position: relative;  
    width: 100%;    
}
.services article { padding: 4vh 6vw 2vh 6vw; }
.services h2 {
    margin: 6vw 0;
    padding: 0;
}
.services h3 {
    margin: 0 0 2vw 0;
    padding: 0;
}
.services h4 {    
    margin: 4vw 0 10vw 0;
    padding: 0;    
}
.services p {
    margin: 3vw 0;
    padding: 0;
    text-align: left;
}
.callToAction {
    margin: 8vw 0 0 0;
    padding: 4vw 6vw;
}


/* =====================================
=========== 12. Mpire's Work ===========
===================================== */

#premium { /* first level */
    display: block;
    position: absolute;
    text-align: left;
    top: 16%;
    -ms-transform: translateX(0%) translateY(0%);
    transform: translateX(0%) translateY(0%);
    width: fit-content;
    z-index: 1;
}

#deluxe { /* second level */
    display: none;
    position: absolute;
    top: 50%;
    -ms-transform: translateX(0%) translateY(-50%);
    transform: translateX(0%) translateY(-50%);
    transition: ease-in 2s;
    z-index: 50;
}
.deluxe h3 { margin: 0 0 4vw 0; }


.project {
    cursor: pointer;
    display: block;
    margin: 0 0 2px 0;
}
.project a {
    font-size: 1.4em;    
}
.project a small {
    font-size: 0.35em;
    margin: 0 0 0 0.5vw;
}


/* ============================================
=========== 13. Mpire's Work Single ===========
============================================ */

#work-single {    
    height: auto;
    margin: 0;
    width: 100vw;
}

.projectLayout {
    display: flex;
    flex-direction: column;
    left: 0;
    margin: 50% 0 0 0;
    position: relative;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 1;
}

/* Project Information style */
.projectInformation {
    display: block;
    order: 1;
    margin: 0;
    padding-bottom: 10vw;
    padding-left: 6vw;
    padding-right: 6vw;
    padding-top: 10vw;    
    width: 88vw;
}
.projectInformation h2 {
    margin: 0;
    padding: 0;
}
.projectInformation h3 {
    margin: 10vw 0 1vw 0;
    padding: 0;
}
.projectInformation h4 {
    margin: 4vw 0 0 0;
    padding: 0;
}
.projectInformation h5 {
    font-size: 0.8em;
    margin: 2vw 0 0 0;
    padding: 0;
}
.projectInformation p {
    line-height: 1.5em;
    margin: 0 0 6vw 0;
    padding: 0;
}


/* Project Pictures style */
.projectPictures {
    order: 2;
    margin: 0;
    padding: 0;
    width: 100vw;
}
.projectPictures figcaption {
    margin: 0;
    padding: 0;
}
.projectPictures img {    
    width: 100%;
}

.fullProject {
    margin: auto;
    padding: 0.75vw 1vw;
}

.awardLogo { 
    position: absolute;
    right: 10%;
    top: -60px;
    width: 17.5%;
}

/* =====================================
=========== 14. Contact Mpire ==========
===================================== */

.contact {
    margin: 0;
}

.contact section {
    margin: 0;
    padding: 20vh 6vw 10vh 6vw;
    width: 88vw;
}

.contact h2 {
    margin: 8vw 0;
}
.contact p {
    line-height: 1.6em;
    margin: 1vw 0;
    padding: 0;
}
.contactMpire figure { display: block; }

.contact-information {
    height: auto;
    margin: 10vh 0 10vh 0;
    width: 100%;
}

/* Google Map */

.google-map {
    height: 400px;
    margin: 0;
    width: 100%;
}

/* Contact Form */

.contactForm { text-align: center; }
.contactForm input, .contactForm textarea { 
    border-left: 0;
    border-right: 0;
    border-top: 0;
    margin: 1vw 0;
    opacity: 0.8;
    padding: 1vw 0 0 0;
    width: 100%;
}

.byeAstro {
    background-size: 100%;
    background-position: 50% 0;
    height: 50vh;
    margin: 10vh 0 0 0;
    width: 100%;
}
/* text */
.byeAstroText {    
    height: 50vh;
    margin: 10vh 0 0 0;
    width: 100%;
}
.byeAstroText h6 {
    font-size: 40vw;
    margin: 0;
    padding: 0;
}

@-webkit-keyframes bye {
    from { left: 25%; }
    to { left: -250%; }
}

/* =====================================
========== 15. Lost Connection =========
===================================== */
.lostConnection {
    display:  block;
    flex-wrap: nowrap;
    left: 0;
    top: 20%;
    -ms-transform: translateX(0%) translateY(0%);
    transform: translateX(0%) translateY(0%);
}
.lostConnection figure { padding: 0 6vw; }
.lostConnection h1 { 
    font-size: 2em;
    margin: 0 0 32px 0;
}
.lostAstro {
    background-position: 90% 20%;
    background-size: 50%;
    height: 320px;
    width: 100%;
}








/* B. Big Devices ( Phones, 360px ) */

@media screen and (max-width: 360px) {

    
    h2 { font-size: 2.6em !important; }   

    .mpireMusic { display: none; }

    /* Home Page */
    .mpireIntro figcaption {
        left: 56%;
        width: 76%;
    }
    .mpireIntro figcaption button {
        margin: 2vw 0 0 0;
        padding: 0.75em 0.75em;
    }
    .astronaut {
        bottom: -130vw;
        margin: 0;
        position: fixed;
        -ms-transform: translateX(0%) translateY(15%);
        transform: translateX(0%) translateY(15%);
        width: 110%;
        z-index: 96; /* must 96 */ 
    }
    .astronaut img {
        text-align: center;
        -ms-transform: translateX(-5.5%);
        transform: translateX(-5.5%);
        width: 100%;
    }

    /* About Page */
    .signature figcaption {
        margin: -70vh 0 0 0;
        padding: 25vw 0;
    }

    /* Works Page */
    .project {
        margin: 0 0 1vw 0;
    }
}