@charset "UTF-8";
/* 

Mpire AB
Abdul Rahman Sai
September 2020

§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§
==============================
===== Mpire Style Manual =====
==============================

00. Main Layout
01. Header
02. Menu Window
03. Social Media Aside
04. Footer
05. Mpire Music
06. Mode Toggle Switch
07. UP
08. Cookies 
09. Home Page
10. About Mpire Page
11. Serives Page
12. Works Page
13. Single Work Page
14. Contact Page
15. Lost Connection page
16. 404
17. 403
18. Effects Section
19. News

==============================
§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§

*/
@import url(../css/main.css);
@import url(../css/aos.css);
.main-dark {
  background-color: #1D1D1D; }

.main-light {
  background-color: White !important; }

/* ==================================
=====================================
========== 00. Main Layout ==========
=====================================
================================== */
.displayNone {
  display: none !important; }

body {
  background-color: #1D1D1D; }

#mainContiner {
  height: auto;
  /*position: fixed;*/
  width: 100vw;
  /* TRANSITION */
  -webkit-transition: background 1.6s;
  -moz-transition: background 1.6s;
  -o-transition: background 1.6s;
  transition: background 1.6s; }

.wrapper {
  height: 100%;
  position: absolute;
  scrollbar-width: none;
  /* for firefox */
  width: 100%; }

/* =============================
================================
========== 01. Header ==========
================================
============================= */
.mpire-logo img {
  /* Mpire's logo */
  padding-bottom: 1.5%;
  padding-left: 3%;
  padding-top: 1.5%;
  padding-right: 7%;
  position: fixed;
  width: 2.4%;
  z-index: 99;
  /* must 99 */ }

.burger-menu {
  /* the magical button */
  cursor: pointer;
  right: 0;
  margin: 4% 4% 0 0;
  padding: 0;
  position: fixed;
  top: 0;
  width: 2.5%;
  z-index: 99;
  /* must 99 */ }

/* barsButton */
.barsButton {
  display: block;
  position: relative;
  margin: -2.2em auto 0 0.2em;
  -webkit-transition: margin 600ms;
  -moz-transition: margin 600ms;
  transition: margin 600ms;
  cursor: pointer; }

.bar {
  border: 1px solid #fff;
  display: block;
  width: 2em;
  height: 0.1em;
  margin: 0.6em;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition-property: -webkit-transform, margin, border-right-color, box-shadow;
  -moz-transition-property: -moz-transform, margin, border-right-color, box-shadow;
  transition-property: transform, margin, border-right-color, box-shadow;
  -webkit-transition-duration: 600ms;
  -moz-transition-duration: 600ms;
  transition-duration: 600ms; }

.barsButton .bar:nth-of-type(1) {
  -webkit-transition: opacity 300ms;
  -moz-transition: opacity 300ms;
  transition: opacity 300ms; }

.barsButton .bar:nth-of-type(2) {
  -webkit-transform: rotate(-180deg);
  -moz-transform: rotate(-180deg);
  -ms-transform: rotate(-180deg);
  -o-transform: rotate(-180deg);
  transform: rotate(-180deg); }

.bar-light {
  background-color: black;
  border: 1px solid black; }

/*pushed*/
.pushed .barsButton {
  margin: -3.2em 0 0 0.7em; }

.pushed .bar:nth-of-type(1) {
  opacity: 0; }

.pushed .bar:nth-of-type(2) {
  margin-left: 1.35em;
  -webkit-transform: rotate(-137deg) translateY(-1.5em);
  -moz-transform: rotate(-137deg) translateY(-1.5em);
  -ms-transform: rotate(-137deg) translateY(-1.5em);
  -o-transform: rotate(-137deg) translateY(-1.5em);
  transform: rotate(-137deg) translateY(-1.5em); }

.pushed .bar:nth-of-type(3) {
  margin-left: 0.3em;
  margin-top: 1em;
  -webkit-transform: rotate(-42deg);
  -moz-transform: rotate(-42deg);
  -ms-transform: rotate(-42deg);
  -o-transform: rotate(-42deg);
  transform: rotate(-42deg); }

.pushed .barsButton:hover .bar:nth-of-type(2) {
  border-right-color: #e9b8b9;
  box-shadow: 0.4em 0 0.6em 0.1em rgba(40, 255, 227, 0.75); }

.pushed .barsButton:hover .bar:nth-of-type(3) {
  border-right-color: #ddf1da;
  box-shadow: 0.4em 0 0.6em 0.1em rgba(40, 255, 227, 0.5); }

/* ==============================
=================================
======== 02. Menu Window ========
=================================
============================== */
#menu-window {
  background-color: #1D1D1D;
  color: white;
  display: block;
  height: 100vh;
  position: fixed;
  transition: 0.6s;
  width: 100vw;
  z-index: 97;
  /*  must 97 */ }

.menu-right-side {
  bottom: 0;
  height: 100vh;
  position: absolute;
  top: 0;
  right: 0;
  width: 50vw; }

.menu-right-side-center {
  left: 0;
  position: absolute;
  top: 50%;
  -ms-transform: translateX(0%) translateY(-50%);
  transform: translateX(0%) translateY(-50%);
  width: 100%; }

/* Langunges */
.lang-links {
  display: none;
  margin: 5% 0 5% 0; }

.lang-links li {
  display: inline;
  margin-right: 5%; }

.lang-links li a {
  color: white;
  font-size: 1.2vw;
  text-transform: uppercase; }

/* active langunge */
.activeLan {
  color: #00FFCB; }

/* Pages */
.pages-links {
  margin: 5% 0;
  opacity: 0;
  transition: 4s; }

.pages-links li {
  margin: 0; }

.pages-links li a {
  color: white;
  font-family: 'Helvetica-Neue-LT-95', sans-serif !important;
  font-size: 6vw;
  text-transform: uppercase; }

.menu-left-side {
  bottom: 0;
  height: 100vh;
  left: 0;
  position: absolute;
  top: 0;
  width: 50vw; }

.menu-left-side-center {
  left: 20%;
  position: absolute;
  top: 50%;
  -ms-transform: translateX(0%) translateY(-50%);
  transform: translateX(0%) translateY(-50%);
  width: 100%; }

#menu-information {
  font-family: 'Helvetica-Neue-LT-65', sans-serif;
  font-size: 1.4vw;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 50%;
  transition: 2s;
  -ms-transform: translateX(0%) translateY(-50%);
  transform: translateX(0%) translateY(-50%); }

.menu-left-side a {
  color: white; }

.social-media-mobile {
  display: none; }

/* Glitch */
.glitch {
  position: relative;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
  margin: 0; }

.glitch:hover {
  color: #0ff; }

/*.glitch:before, .glitch:after {
    display: block;
    content: attr(data-glitch);
    text-transform: uppercase;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    opacity: 0.8;
}
.glitch:after {
    color: #f0f;
    z-index: -2;
}
.glitch:before {
    color: #0ff;
    z-index: -1;
}
.glitch:hover:before {
    animation: glitch 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both 5;
}
.glitch:hover:after {
    animation: glitch 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both 5;
}
@media only screen and (max-width: 480px) {
    .glitch {
      font-size: 3em;
    }
}
@keyframes glitch {
    0% { transform: translate(0); }
    20% { transform: translate(-4px, 3px); }
    40% { transform: translate(-3px, -3px); }
    60% { transform: translate(4px, 2px); }
    80% { transform: translate(4px, -2px); }
    to { transform: translate(0); }
}*/
/* =====================================
========================================
======== 03. Social Media Aside ========
========================================
===================================== */
#social-media-buttons {
  bottom: 3%;
  display: block;
  left: 3%;
  position: fixed;
  z-index: 99; }

#social-media-buttons h6 {
  font-size: 1em;
  letter-spacing: 2px;
  text-transform: uppercase;
  transform: rotateZ(270deg) translatex(60%) translatey(-160%);
  -webkit-transform: rotate(270deg) translatex(60%) translatey(-160%);
  /* Safari */
  -moz-transform: rotate(270deg) translatex(60%) translatey(-160%);
  /* Firefox */
  -ms-transform: rotate(270deg) translatex(60%) translatey(-160%);
  /* IE */
  -o-transform: rotate(270deg) translatex(60%) translatey(-160%);
  /* Opera */ }

.social-media-dark h6, .social-media-dark .fa {
  color: white; }

.social-media-light h6, .social-media-light .fa {
  color: black; }

.fa {
  font-size: 2vw;
  margin: 0.5vw 0 0.5vw 0;
  padding: 0.15vw 0 0.15vw 0;
  text-align: center;
  text-decoration: none;
  width: 50px; }

.fa:hover {
  opacity: 1;
  filter: grayscale(0%) contrast(100%); }

.fa-facebook {
  color: white; }

.fa-facebook:hover {
  color: #3B5998; }

.fa-linkedin {
  color: white; }

.fa-linkedin:hover {
  color: #007bb5; }

.fa-instagram {
  color: white; }

.fa-instagram:hover {
  color: #e95950; }

.fa-behance {
  color: white; }

.fa-behance:hover {
  color: #053eff; }

/* ===============================
==================================
=========== 04. Footer ===========
==================================
=============================== */
footer {
  height: auto;
  margin: 0 auto;
  position: absolute;
  left: 10%;
  width: 80vw;
  z-index: 80; }

footer figure {
  display: inline-block;
  margin: 0;
  padding: 0;
  vertical-align: top;
  width: 23.175vw; }

footer ul li {
  text-align: left; }

footer img {
  width: 25%; }

footer h5 {
  font-size: 1.4em;
  margin: 0 0 1.6vw 0;
  padding: 0;
  text-align: left;
  text-transform: capitalize; }

footer p {
  font-size: 0.8em;
  font-style: normal;
  margin: 0 0 0.5vw 0;
  padding: 0;
  text-align: left;
  text-transform: none; }

footer form {
  text-align: left;
  margin: 0;
  width: 100%; }

footer label {
  font-family: 'Helvetica-Neue-LT-45', sans-serif;
  text-align: left; }

footer input {
  background-color: transparent;
  border: 1px slategray solid;
  font-family: 'Helvetica-Neue-LT-45', sans-serif;
  margin: 0.5vw 0 0 0;
  padding: 0.5vw 1vw;
  vertical-align: middle;
  width: auto; }

.footer-dark figure, .footer-dark form, .footer-dark p,
.footer-dark a, .footer-dark label, .footer-dark input,
.copyright-v1 {
  color: white; }

.footer-light figure, .footer-light form, .footer-light p,
.footer-light a, .footer-light label, .footer-light input,
.copyright-v1-light p, .copyright-v1-light a {
  color: black; }

.footer-dark h5 {
  color: gray; }

.footer-light h5 {
  color: gray; }

#footerEmail {
  width: 21vw; }

.footer-v2 {
  bottom: 2vw;
  height: auto;
  left: auto;
  margin: 0 auto;
  position: fixed;
  right: 2%;
  width: 70vw;
  z-index: 99; }

.copyright-v1 {
  letter-spacing: 0.20em;
  margin: 6vw 0 0 0;
  padding: 1vw 0;
  text-align: center;
  width: 100%; }

.copyright-v2 {
  bottom: 2vw;
  letter-spacing: 0.20em;
  margin: 2vw 0 0 0;
  padding: 1vw 0;
  text-align: right;
  width: auto; }

/* ==========================================
=============================================
=========== 05. Mpire Music Track ===========
=============================================
========================================== */
.mpireMusic {
  bottom: 1vw;
  height: 3vh;
  opacity: 0.4;
  position: fixed;
  right: 40vw;
  width: 20vw;
  z-index: 96; }

audio::-webkit-media-controls-panel,
video::-webkit-media-controls-panel {
  background-color: gray; }

/* ===========================================
==============================================
=========== 06. Mode Toggle Switch ===========
==============================================
=========================================== */
.switch {
  display: inline-block;
  height: 34px;
  position: fixed;
  left: 3%;
  top: 16vw;
  width: 60px;
  -webkit-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  -o-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  transform: rotate(270deg);
  z-index: 96; }

.switch input {
  opacity: 0;
  width: 0;
  height: 0; }

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: gainsboro;
  -webkit-transition: .4s;
  transition: .4s; }

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: black;
  -webkit-transition: .4s;
  transition: .4s; }

input:checked + .slider {
  background-color: #fff; }

input:focus + .slider {
  box-shadow: 0 0 1px #fff; }

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px); }

/* Rounded sliders */
.slider.round {
  border-radius: 34px; }

.slider.round:before {
  border-radius: 50%; }

.dark {
  color: white; }

.light {
  color: black; }

.dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6,
.dark p, .dark a, .dark input, .dark textarea, .dark button, .dark span,
.dark li a {
  color: white; }

.light h1, .light h2, .light h3, .light h4, .light h5, .light h6,
.light p, .light a, .light input, .light textarea, .light button, .light span,
.light li a {
  color: black; }

.borderDark {
  border-color: white; }

.borderLight {
  border-color: black; }

/* ==============================
=================================
=========== 07. Go Up ===========
=================================
============================== */
.up {
  background-color: rgba(255, 255, 255, 0.1);
  bottom: 3%;
  font-size: 1.5em;
  padding: 1% 1% 1% 1%;
  position: fixed;
  right: 0;
  text-align: center;
  z-index: 100; }

.up a {
  opacity: 0.5;
  text-transform: uppercase; }

.up a:hover {
  opacity: 1; }

/* ================================
===================================
=========== 08. Cookies ===========
===================================
================================ */
.cookies {
  background-color: rgba(255, 255, 255, 0.3);
  display: block;
  left: 0;
  text-align: center;
  top: 0;
  padding: 0.5vw 0;
  position: fixed;
  width: 100%;
  z-index: 96; }

.cookies p {
  color: white;
  display: inline;
  font-size: 1em;
  text-align: center; }

.cookies button {
  cursor: pointer;
  color: white;
  margin: 0 0 0 2vw;
  padding: 0.5vw 2vw; }

.cookies button:hover {
  background-color: rgba(0, 0, 0, 0.5); }

/* ==================================
=====================================
=========== 09. Home Page ===========
=====================================
================================== */
/* Main content */
#mainPage {
  margin: 0 0 0 12vw;
  padding: 0;
  width: 80vw;
  z-index: 10; }

.spaceContiner {
  background-attachment: fixed;
  background-image: url("../img/astrology-astronomy.jpg");
  background-position: center center;
  background-repeat: repeat;
  background-size: cover;
  height: 100vh;
  position: fixed;
  width: 100vw;
  -webkit-animation: slide 120s linear infinite; }

@-webkit-keyframes slide {
  from {
    background-position: 0 0; }
  to {
    background-position: -3840px 0; } }
.griderTable {
  border: 0;
  border-spacing: 0;
  margin: 0;
  padding: 0px;
  width: 100vw;
  z-index: 2; }

.grid {
  border: 0;
  display: grid;
  grid-template-columns: 16.6% 16.6% 16.6% 16.6% 16.6% 16.6%;
  grid-column-gap: 0;
  grid-row-gap: 0;
  grid-gap: 0;
  height: 100vh;
  margin: 0;
  padding: 0px;
  position: fixed;
  width: 100vw; }

.grid-col:nth-child(1), .grid-col:nth-child(2), .grid-col:nth-child(4) {
  border-right: 1px rgba(255, 255, 255, 0.25) solid;
  margin: 0;
  padding: 0; }

.grid-col:nth-child(4), .grid-col:nth-child(6) {
  border-left: 1px rgba(255, 255, 255, 0.25) solid;
  margin: 0;
  padding: 0; }

/* Blur */
.blur {
  background-attachment: fixed;
  background-image: url("../img/astrology-astronomy.jpg");
  background-position: center center;
  background-repeat: repeat;
  background-size: cover;
  display: block;
  overflow: hidden;
  filter: blur(3px);
  top: -50px;
  left: -50px;
  right: -50px;
  bottom: -50px;
  -webkit-animation: slide 120s linear infinite; }

.biggestMpire {
  bottom: 50%;
  color: white;
  font-size: 12vw;
  left: 13.25%;
  position: absolute;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  top: 50%;
  transform: rotateZ(90deg) translateY(-50%);
  -ms-transform: rotateZ(90deg) translateY(-50%);
  width: auto; }

.mpireIntro {
  background-color: rgba(255, 255, 255, 0);
  bottom: 50%;
  color: white;
  height: 100vh;
  position: fixed;
  text-align: center;
  -ms-transform: translateX(0%) translateY(-50%);
  transform: translateX(0%) translateY(-50%);
  top: 50%;
  width: 100vw;
  z-index: 96; }

.mpireIntro figcaption {
  background-color: rgba(150, 50, 50, 0);
  left: 33.75%;
  position: absolute;
  text-align: left;
  top: 50%;
  transform: translateY(-50%);
  -ms-transform: translateY(-50%); }

.mpireIntro figcaption h2 {
  color: #c8c8c8;
  font-size: 6vw;
  font-weight: 400;
  line-height: 1em;
  padding: 0;
  width: auto;
  word-spacing: -0.25em; }

.mpireIntro figcaption button {
  cursor: pointer;
  border: 1px gray solid;
  color: white;
  font-size: 1.75vw;
  padding: 0.5em 1.25em; }

@keyframes fadein {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
/* Firefox < 16 */
@-moz-keyframes fadein {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
/* Internet Explorer */
@-ms-keyframes fadein {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
/* Opera < 12.1 */
@-o-keyframes fadein {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
/* Mpire's Magical Text */
.we {
  font: normal 40px/50px 'Josefin Sans', sans-serif;
  text-transform: capitalize;
  margin: 1vw 0;
  -webkit-animation: fadein 20s;
  /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 20s;
  /* Firefox < 16 */
  -ms-animation: fadein 20s;
  /* Internet Explorer */
  -o-animation: fadein 20s;
  /* Opera < 12.1 */
  animation: fadein 20s; }

.we p {
  float: left; }

.we b {
  float: left;
  overflow: hidden;
  height: 50px; }

.we .innerwe {
  display: inline-block;
  color: #28ffe3;
  position: relative;
  white-space: nowrap;
  top: 0;
  left: 2%;
  /*animation*/
  -webkit-animation: move 10s;
  -moz-animation: move 10s;
  -ms-animation: move 10s;
  -o-animation: move 10s;
  animation: move 10s;
  /*animation-iteration-count*/
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -ms-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  /*animation-delay*/
  -webkit-animation-delay: 2s;
  -moz-animation-delay: 2s;
  -ms-animation-delay: 2s;
  -o-animation-delay: 2s;
  animation-delay: 2s; }

@keyframes move {
  0% {
    top: 0px; }
  16.6% {
    top: -50px; }
  32.2% {
    top: -100px; }
  49.8% {
    top: -150px; }
  66.4% {
    top: -200px; }
  83.0% {
    top: -250px; } }
@-webkit-keyframes move {
  0% {
    top: 0px; }
  16.6% {
    top: -50px; }
  32.2% {
    top: -100px; }
  49.8% {
    top: -150px; }
  66.4% {
    top: -200px; }
  83.0% {
    top: -250px; } }
@-moz-keyframes move {
  0% {
    top: 0px; }
  16.6% {
    top: -50px; }
  32.2% {
    top: -100px; }
  49.8% {
    top: -150px; }
  66.4% {
    top: -200px; }
  83.0% {
    top: -250px; } }
@-o-keyframes move {
  0% {
    top: 0px; }
  16.6% {
    top: -50px; }
  32.2% {
    top: -100px; }
  49.8% {
    top: -150px; }
  66.4% {
    top: -200px; }
  83.0% {
    top: -250px; } }
@keyframes move {
  0% {
    top: 0px; }
  16.6% {
    top: -50px; }
  32.2% {
    top: -100px; }
  49.8% {
    top: -150px; }
  66.4% {
    top: -200px; }
  83.0% {
    top: -250px; } }
.astronaut {
  bottom: -45vw;
  position: fixed;
  right: -10vw;
  z-index: 1;
  /* must 1 */ }

.astronaut img {
  width: 40vw; }

.avatar {
  animation: float 25s ease-in-out infinite; }

@keyframes float {
  0% {
    transform: translatey(0px); }
  20% {
    transform: translatex(-15px); }
  40% {
    transform: translatey(-15px); }
  60% {
    transform: translatex(15px); }
  80% {
    transform: translatey(15px); }
  100% {
    transform: translatey(0px); } }
/* Mpire's NowAday information */
.nowAdayInfo {
  background-color: #7FFF00;
  display: flex;
  padding: 8vh 10vw;
  left: 0%;
  margin: 0;
  position: fixed;
  text-align: center;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 100vw;
  z-index: 100; }

.nowAdayInfo button {
  border: 0;
  cursor: pointer;
  font-size: 1em;
  height: 2.5vw;
  margin: 0;
  padding: 0;
  width: 5vw; }

.nowAdayInfo button:hover {
  font-size: 1.2em; }

.nowAdayInfo figure {
  display: flex;
  width: 80vw; }

.nowAdayInfo figcaption {
  margin: auto;
  width: 50%; }

.nowAdayInfo h2 {
  margin: 0 0 2vw 0; }

.nowAdayInfo a {
  color: black; }

.nowAdayInfo img {
  width: 40%; }

.blackLayout {
  background-color: rgba(150, 50, 50, 0.5);
  height: 100vh;
  position: relative;
  width: 100vw; }

/* ====================================
=======================================
=========== 10. About Mpire ===========
=======================================
==================================== */
/* About Mpire section */
.aboutMpire {
  height: auto;
  margin: 8vw 0 0 0;
  overflow: hidden;
  padding: 8vh 0 0 0;
  width: 100%; }
  .aboutMpire figure {
    display: flex;
    width: 100%; }
  .aboutMpire article {
    margin: 0;
    padding: 4vh 2vw;
    width: 70%; }
  .aboutMpire figcaption {
    margin: 0;
    padding: 4vh 2vw;
    width: 30%; }
  .aboutMpire small {
    margin: 50% 0; }

.grayAbout {
  color: gray !important;
  margin: 1vw auto 1vw auto !important; }

.hello-mobile {
  background-image: url("../img/hello.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  display: none;
  height: 60vh;
  width: 100%; }

.hello {
  background-image: url("../img/hello.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 60vh;
  width: 100%; }

/* Mpire's Sign section */
.mpireSign {
  height: auto;
  width: 100%; }

.signatures {
  margin: 18vh 0;
  width: 100%; }

.signature {
  display: flex;
  margin: 0 20% 0 0;
  width: 100%; }

.signature div {
  display: inline-block;
  height: auto;
  margin: 0;
  padding: 9vw 0;
  width: 40%; }

.signature figcaption {
  display: inline-block;
  height: auto;
  margin: 0;
  overflow: hidden;
  padding: 9vw 0;
  width: 60%; }
.signature p {
  font-size: 6vw;
  line-height: 1em;
  text-transform: capitalize;
  width: max-content; }

.sign_slide-left_1 {
  animation: text-slide-left 0.6s linear; }

.sign_slide-left_2 {
  animation: text-slide-left 1.6s linear; }

.sign_slide-left_3 {
  animation: text-slide-left 1s linear; }

.sign_slide-left_4 {
  animation: text-slide-left 2.4s linear; }

.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: 80% 50%;
  background-repeat: no-repeat;
  background-size: contain; }

.spaceman-intro {
  animation: spacemanfade 1s linear; }

@keyframes spacemanfade {
  0% {
    -webkit-filter: saturate(8);
    filter: saturate(8); }
  25% {
    -webkit-filter: hue-rotate(180deg);
    filter: hue-rotate(180deg); }
  50% {
    -webkit-filter: invert(0.8);
    filter: invert(0.8); }
  100% {
    -webkit-filter: hue-rotate(0deg);
    filter: hue-rotate(0deg); } }
.solution {
  background-attachment: scroll;
  background-color: transparent;
  background-image: url(../img/spaceshipRuby.png);
  background-position: 80% 100%;
  background-repeat: no-repeat;
  background-size: contain; }

.spaceship-intro {
  animation: spaceshipstart 1s linear; }

@keyframes spaceshipstart {
  from {
    margin-top: 4em; } }
.stories {
  background-attachment: scroll;
  background-color: transparent;
  background-image: url(../img/moonTurquoise.png);
  background-position: 80% 50%;
  background-repeat: no-repeat;
  background-size: 70%; }

.moon-intro {
  animation: moonrotate 1s linear; }

@keyframes moonrotate {
  from {
    opacity: 0;
    transform: rotate(-2deg);
    /* Safari */
    -webkit-transform: rotate(-2deg);
    /* Firefox */
    -moz-transform: rotate(-2deg);
    /* IE */
    -ms-transform: rotate(-2deg);
    /* Opera */
    -o-transform: rotate(-2deg);
    /* Internet Explorer */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); } }
#create {
  display: flex; }

#code {
  display: none; }

#tell {
  display: none; }

/* Mpire's Journey */
.mpireJourney {
  height: auto;
  padding: 10vh 0;
  width: 100%; }

.journeyYears {
  margin: 2vw 0; }

.journeyYears ul {
  display: flex; }

.journeyYears ul li {
  padding: 0 2vw 0 0; }

.journeyYears ul li a {
  cursor: pointer; }

.mpireJourney figure {
  display: flex;
  margin: 2vw 0;
  width: 100%; }

.mpireJourney img {
  width: 100%; }
.mpireJourney article {
  padding: 2vw;
  width: 50%; }

.journeyPoints li {
  list-style-type: disc;
  margin: 2vw 0 0 2vw; }

/* when page loud */
#mpireJourney2017 {
  display: flex; }

#mpireJourney2018 {
  display: none; }

#mpireJourney2019 {
  display: none; }

#mpireJourney2020 {
  display: none; }

#mpireJourney2021 {
  display: none; }

/* Journey slider */
.journeySlider {
  width: 50%; }

/* Slideshow container */
.journeyImage {
  display: none; }

/* Fading animation */
.sliderFade2017, .sliderFade2018, .sliderFade2019, .sliderFade2020, .sliderFade2021 {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s; }

@-webkit-keyframes fade {
  from {
    opacity: .4; }
  to {
    opacity: 1; } }
@keyframes fade {
  from {
    opacity: .4; }
  to {
    opacity: 1; } }
/* Mpire's Awqards */
.mpireAwards {
  height: auto;
  overflow: hidden;
  padding: 10vh 0;
  width: 100%; }
  .mpireAwards .prizes {
    display: flex;
    justify-content: center; }
    .mpireAwards .prizes figure {
      margin: 64px; }
      .mpireAwards .prizes figure img {
        -webkit-filter: grayscale(100%);
        /* Safari 6.0 - 9.0 */
        filter: grayscale(100%);
        height: 180px;
        width: auto; }
      .mpireAwards .prizes figure img:hover {
        -webkit-filter: grayscale(0%);
        /* Safari 6.0 - 9.0 */
        filter: grayscale(0%); }
      .mpireAwards .prizes figure figcaption {
        margin: 32px auto 0 auto;
        text-align: center; }

@-webkit-keyframes message1 {
  from {
    left: 25%; }
  to {
    left: -125%; } }
@-webkit-keyframes message2 {
  from {
    left: 35%; }
  to {
    left: -115%; } }
/* Mpire's People */
.mpirePeople {
  height: auto;
  padding: 18vh 0;
  width: 100%; }

.memberNavigator {
  width: 100%; }

.memberNavigator ul {
  display: flex; }

.memberNavigator ul li {
  padding: 0 25%; }

.memberNavigator ul li button {
  margin: 12vw 0 12vw 0;
  padding: 0.5vw 1vw; }

.nextMember {
  position: absolute;
  right: 2%; }

.previousMember {
  display: none;
  left: 2%;
  position: absolute; }

.team {
  display: flex;
  overflow-x: scroll;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  width: 100%; }

.member {
  display: flex;
  margin: 2vw 20vw 0 0;
  padding: 0;
  width: 20vw; }

.member img {
  max-width: 320px; }

.memberInfo {
  padding: 0 4vw 0 2vw;
  width: 14vw; }

.member h6 {
  font-size: 1.4em;
  text-align: left;
  text-transform: capitalize; }

.member p {
  text-transform: capitalize;
  width: max-content; }

.member a {
  display: block;
  font-size: 1em;
  font-display: none; }

.memberContact {
  display: block;
  margin: 1vw 0;
  width: 100%; }

.memberSocial {
  display: flex;
  margin: 2vw 0;
  width: 100%; }

.memberSocial a {
  margin: 0;
  padding: 0 11% 0 0; }

.memberHobby {
  opacity: 0.7;
  font-size: 1em; }

/* Mpire's Message */
.mpireMessage {
  height: auto;
  overflow: hidden;
  padding: 10vh 0;
  width: 100%; }
  .mpireMessage span {
    margin: 2vw 0; }
  .mpireMessage p {
    font-size: 6em;
    left: 0;
    position: relative;
    text-transform: uppercase;
    width: max-content; }
  .mpireMessage span p:first-child {
    animation-delay: 3s;
    -webkit-animation: message1 8s linear infinite alternate; }
  .mpireMessage span p:nth-child(2) {
    animation-delay: 5s;
    -webkit-animation: message2 10s linear infinite alternate; }

@-webkit-keyframes message1 {
  from {
    left: 25%; }
  to {
    left: -125%; } }
@-webkit-keyframes message2 {
  from {
    left: 35%; }
  to {
    left: -115%; } }
/* =====================================
========================================
========= 11. Mpire's Services =========
=======================================
===================================== */
.ball {
  border-radius: 50px;
  border-style: solid;
  border-width: 5px;
  display: inline-block;
  height: 3vw;
  line-height: auto;
  margin-top: 0;
  margin-left: -8vw;
  margin-bottom: 0;
  margin-right: 4vw;
  padding: 0;
  width: 3vw;
  z-index: 1; }

/* Services Points */
.servicesPoints {
  right: 1vw;
  top: 40vh;
  position: fixed;
  z-index: 12; }

.servicesPoints ul li {
  margin: 1vw auto 1vw auto;
  text-align: right; }

.servicesPoints a::after {
  content: "•";
  padding-left: 8px; }

.servicesPoints a:hover {
  font-size: 1em; }

.servicesPoints a {
  font-size: 0.8em;
  letter-spacing: 0.1em; }

/* Services
#branding, #digital, #marketing, #film-photo {
    opacity: 1; 
    visibility: visible;
    -webkit-transition: visibility 2s linear, opacity 2s linear;
    -moz-transition: visibility 2s linear, opacity 2s linear;
    -o-transition: visibility 2s linear, opacity 2s linear; 
} */
.services section {
  height: auto;
  padding: 18vh 0 18vh 0;
  position: relative;
  width: 70vw; }

.services article {
  left: 0;
  padding: 4vh 6vw; }

.services h2 {
  font-size: 6em;
  margin: 0 0 3vw 0; }

.services h3 {
  margin: 0 0 1vw 0;
  text-shadow: -1px 0  #1D1D1D, 0 0.5px  #1D1D1D, 0.5px 0  #1D1D1D, 0 -1px  #1D1D1D; }

.services h4 {
  margin: 0 0 5vw 0; }

.services p {
  margin: 0 0 1vw 0; }

.callToAction {
  cursor: pointer;
  margin: 1vw 0;
  padding: 1vw 2vw; }

.callToAction:hover {
  background-color: black; }

/* =====================================
========================================
=========== 12. Mpire's Work ===========
=======================================
===================================== */
#works-Main {
  background-color: transparent;
  height: 100vh;
  position: fixed;
  /* TRANSITION */
  -webkit-transition: background 1.6s;
  -moz-transition: background 1.6s;
  -o-transition: background 1.6s;
  transition: background 1.6s;
  width: 100vw; }

#worksProfile {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
  opacity: 0;
  position: fixed;
  -webkit-transition: opacity 1s;
  -moz-transition: opacity 1s;
  -o-transition: opacity 1s;
  transition: opacity 1s;
  width: 100vw; }

#premium {
  /* first level */
  display: block;
  left: 12%;
  position: absolute;
  right: 6%;
  top: 50%;
  -ms-transform: translateX(0%) translateY(-50%);
  transform: translateX(0%) translateY(-50%);
  z-index: 50; }

#deluxe {
  /* second level */
  display: none;
  left: 12%;
  position: absolute;
  right: 6%;
  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: inline;
  margin: 0 1.2vw 0 0; }

.project a {
  font-family: 'Helvetica-Neue-LT-95', sans-serif;
  font-size: 4em;
  font-weight: 900;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase; }

.project a small {
  font-family: 'Helvetica-Neue-LT-45', sans-serif;
  font-size: 0.35em;
  margin: 0 0 0 0.5vw; }

.deluxe .project {
  cursor: auto; }

/* work's slider */
.worksSlider button {
  color: white; }

.next {
  background-color: transparent;
  border: 0;
  font-size: 2em;
  position: fixed;
  right: 2%;
  top: 50%; }

.next:hover {
  cursor: pointer; }

.previous {
  background-color: transparent;
  border: 0;
  font-size: 2em;
  left: 2%;
  position: fixed;
  top: 50%; }

.previous:hover {
  cursor: pointer; }

#previous {
  display: none; }

/* ============================================
===============================================
=========== 13. Mpire's Work Single ===========
===============================================
============================================ */
.work-single {
  margin: 0 !important;
  width: 70vw !important; }

.projectLayout {
  display: flex;
  left: 25%;
  margin: 30% 0;
  position: relative;
  top: 0;
  width: 100%;
  z-index: 1; }

/* Project Information style */
.projectInformation {
  display: -webkit-box;
  margin: 0;
  padding-bottom: 2vw;
  padding-left: 2vw;
  padding-right: 2vw;
  padding-top: 2vw;
  width: 50%; }

.projectInformation h2 {
  font-size: 4em; }

.projectInformation h3 {
  font-size: 2em;
  margin: 8vw 0 1vw 0; }

.projectInformation h4 {
  font-size: 1.2em;
  margin: 2vw 0 0 0; }

.projectInformation h5 {
  font-size: 0.7em;
  margin: 0.5vw 0 0 0; }

.projectInformation p {
  line-height: 1.5em;
  margin: 0 0 2vw 0; }

/* Project Pictures style */
.projectPictures {
  padding-bottom: 1vw;
  padding-left: 1vw;
  padding-right: 1vw;
  padding-top: 1vw;
  width: 50%; }

.projectPictures img {
  width: 100%; }

.fullProject {
  background-color: transparent;
  border: 1px gray solid;
  margin: 0;
  padding: 0.5vw 1vw;
  text-transform: uppercase; }

.awardLogo {
  position: relative;
  width: 15%; }

/* =====================================
========================================
=========== 14. Contact Mpire ==========
=======================================
===================================== */
.contact {
  margin: 2vw auto;
  text-align: center; }

.contact section {
  margin: 8vw auto;
  width: 50vw; }

.contact h2 {
  margin: 2vw auto; }

.contact p {
  line-height: 1.6em;
  margin: 1vw auto; }

.contactMpire figure {
  display: flex; }

.contact-information {
  background-color: transparent;
  height: auto;
  margin: 0;
  width: 40%; }

/* Google Map */
.google-map {
  height: 400px;
  margin: 0;
  width: 60%; }

#map {
  display: block;
  height: 400px;
  opacity: 0.8;
  width: 100%; }

/* Contact Form */
.contactForm {
  text-align: left;
  width: 100%; }

.contactForm input, .contactForm textarea {
  border-bottom: 1px gray solid;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  margin: 1vw 0;
  opacity: 0.8;
  padding: 1vw 0 0 0;
  width: 50%; }

/* Good bye Astro */
.byeAstro {
  background-attachment: scroll;
  background-image: url("../img/Astronaut.png");
  background-repeat: no-repeat;
  background-size: 50%;
  background-position: 50% -10%;
  height: 75vh;
  margin: 10vh 0 0 0;
  position: absolute;
  width: 80vw;
  z-index: 2; }

/* text */
.byeAstroText {
  height: 75vh;
  margin: 0 0 0 -12vw;
  overflow-x: hidden;
  position: absolute;
  width: 99vw;
  z-index: 1; }

.byeAstroText h6 {
  animation-delay: 3s;
  -webkit-animation: bye 10s linear infinite alternate;
  font-size: 20vw;
  margin: 0;
  padding: 0;
  position: relative;
  text-transform: uppercase;
  width: max-content; }

@-webkit-keyframes bye {
  from {
    left: 15%; }
  to {
    left: -150%; } }
/* =========================================
============================================
========= 15. Lost Connection Page =========
============================================
========================================= */
.lostConnection {
  display: flex;
  flex-wrap: wrap;
  left: 10vw;
  position: absolute;
  top: 50%;
  -ms-transform: translateX(0%) translateY(-50%);
  transform: translateX(0%) translateY(-50%); }

.lostConnection figure {
  padding: 10vh 0; }

.lostConnection h1, .lostConnection p {
  color: white; }

.lostConnection h1 {
  font-size: 5em;
  margin: 0 0 64px 0; }

.radioConnection {
  color: dimgray; }

.lostAstro {
  background-attachment: scroll;
  background-image: url("../img/lostMan.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 50%;
  height: 640px;
  width: 20vw; }

/* ============================
===============================
=========== 16. 404 ===========
===============================
============================ */
/* ============================
===============================
=========== 17. 403 ===========
===============================
============================ */
/* ================================
===================================
=========== 18. Effects ===========
===================================
================================ */
/* effect */
.typing {
  width: 0%;
  white-space: nowrap;
  overflow: hidden;
  -webkit-animation: type 3s steps(50, end);
  animation: type 3s steps(55, end);
  -o-animation: type 5s steps(50, end);
  -moz-animation: type 3s steps(55, end);
  -webkit-animation-delay: 5s;
  /* Safari 4.0 - 8.0 */
  animation-delay: 2s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards; }

@keyframes type {
  from {
    width: 0; }
  to {
    width: 100%; } }
@-moz-keyframes type {
  from {
    width: 0; } }
@-webkit-keyframes type {
  from {
    width: 0; } }
/* effect */
.typewriter {
  /* animation */
  white-space: nowrap;
  overflow: hidden;
  animation: animated-text 2s steps(30, end) 1s 1 normal both; }

@keyframes animated-text {
  from {
    width: 0; }
  to {
    width: 100%; } }
/* effect */
.slide_left {
  animation: text-slide-left 1s linear; }

@keyframes text-slide-left {
  from {
    margin-left: -3em; } }
.cutLine {
  display: flex;
  height: 5000px;
  overflow-x: hidden; }
  .cutLine figure {
    width: 50%; }
  .cutLine figure:first-child {
    background-color: #0000FF;
    border-right: 1px white solid; }
    .cutLine figure:first-child h1 {
      font-size: 10em;
      position: fixed;
      top: 50%;
      transform: translateY(-50%);
      white-space: nowrap;
      left: 55vw; }

/* =============================
================================
=========== 19. NEWS ===========
================================
============================= */
.news .blog-tonicooks {
  background-color: #ff4800;
  height: 100%;
  padding-left: 128px;
  padding-top: 50%;
  position: absolute;
  width: 100%; }

/*# sourceMappingURL=style.css.map */