@-webkit-keyframes slideLeftDelay {
  0% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
  50% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

@keyframes slideLeftDelay {
  0% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
  50% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

@-webkit-keyframes slideRightDelay {
  0% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
  80% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

@keyframes slideRightDelay {
  0% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
  80% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

@-webkit-keyframes jump {
  50% {
    -webkit-transform: translateY(-10px);
            transform: translateY(-10px);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes jump {
  50% {
    -webkit-transform: translateY(-10px);
            transform: translateY(-10px);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@-webkit-keyframes contactShow {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-box-shadow: 0;
            box-shadow: 0;
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1.15);
            transform: scale(1.15);
    -webkit-box-shadow: 0px 0px 20px 3px rgba(0, 0, 0, 0.4);
            box-shadow: 0px 0px 20px 3px rgba(0, 0, 0, 0.4);
  }
}

@keyframes contactShow {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-box-shadow: 0;
            box-shadow: 0;
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1.15);
            transform: scale(1.15);
    -webkit-box-shadow: 0px 0px 20px 3px rgba(0, 0, 0, 0.4);
            box-shadow: 0px 0px 20px 3px rgba(0, 0, 0, 0.4);
  }
}

@-webkit-keyframes push {
  0% {
    font-size: 12px;
  }
  50% {
    font-size: 15px;
  }
  100% {
    font-size: 12px;
  }
}

@keyframes push {
  0% {
    font-size: 12px;
  }
  50% {
    font-size: 15px;
  }
  100% {
    font-size: 12px;
  }
}

@-webkit-keyframes pushImg {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.05);
            transform: scale(1.05);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes pushImg {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.05);
            transform: scale(1.05);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@-webkit-keyframes inStand {
  0%, 30% {
    opacity: 0;
  }
  80%, 100% {
    opacity: 1;
  }
}

@keyframes inStand {
  0%, 30% {
    opacity: 0;
  }
  80%, 100% {
    opacity: 1;
  }
}

@-webkit-keyframes inPrem {
  0%, 10% {
    opacity: 0;
  }
  60%, 100% {
    opacity: 1;
  }
}

@keyframes inPrem {
  0%, 10% {
    opacity: 0;
  }
  60%, 100% {
    opacity: 1;
  }
}

@-webkit-keyframes inPro {
  0%, 50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes inPro {
  0%, 50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes faqSlideImg {
  0% {
    -webkit-transform: translateX(200%);
            transform: translateX(200%);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

@keyframes faqSlideImg {
  0% {
    -webkit-transform: translateX(200%);
            transform: translateX(200%);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

@-webkit-keyframes faqSlideCont {
  0%, 30% {
    -webkit-transform: translateX(-200%);
            transform: translateX(-200%);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

@keyframes faqSlideCont {
  0%, 30% {
    -webkit-transform: translateX(-200%);
            transform: translateX(-200%);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

@-webkit-keyframes chatScaleShow {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  80% {
    -webkit-transform: scale(1.03);
            transform: scale(1.03);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes chatScaleShow {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  80% {
    -webkit-transform: scale(1.03);
            transform: scale(1.03);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@-webkit-keyframes chatScaleHide {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  40% {
    -webkit-transform: scale(1.03);
            transform: scale(1.03);
  }
  100% {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
}

@keyframes chatScaleHide {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  40% {
    -webkit-transform: scale(1.03);
            transform: scale(1.03);
  }
  100% {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
}

@-webkit-keyframes slideFromRight {
  0% {
    -webkit-transform: translateX(130%);
            transform: translateX(130%);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideFromRight {
  0% {
    -webkit-transform: translateX(130%);
            transform: translateX(130%);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}

@-webkit-keyframes slideToRight {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(130%);
            transform: translateX(130%);
    opacity: 0;
  }
}

@keyframes slideToRight {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(130%);
            transform: translateX(130%);
    opacity: 0;
  }
}

@-webkit-keyframes slideFromLeft {
  0% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideFromLeft {
  0% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}

@-webkit-keyframes slideToLeft {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
    opacity: 0;
  }
}

@keyframes slideToLeft {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
    opacity: 0;
  }
}

.slideFromRight {
  -webkit-animation: slideFromRight 500ms forwards;
          animation: slideFromRight 500ms forwards;
}

.slideToRight {
  -webkit-animation: slideToRight 500ms forwards;
          animation: slideToRight 500ms forwards;
}

.slideFromLeft {
  -webkit-animation: slideFromLeft 500ms forwards;
          animation: slideFromLeft 500ms forwards;
}

.slideToLeft {
  -webkit-animation: slideToLeft 500ms forwards;
          animation: slideToLeft 500ms forwards;
}

.scaleZero {
  -webkit-transform: scale(0);
          transform: scale(0);
}

.scaleOne {
  -webkit-transform: scale(1);
          transform: scale(1);
}

.opacityZero {
  opacity: 0;
  pointer-events: none;
}

.opacityOne {
  opacity: 1;
}

.hiddenLeft {
  -webkit-transform: translateX(-200%);
          transform: translateX(-200%);
}

.shownLeft {
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.hiddenRight {
  -webkit-transform: translateX(200%);
          transform: translateX(200%);
}

.hiddenLeft {
  -webkit-transform: translateX(-200%);
          transform: translateX(-200%);
}

.shownRight {
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.hiddenBottom {
  -webkit-transform: translateY(200%);
          transform: translateY(200%);
}

.shownBottom {
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.shownLeftDelay {
  -webkit-animation: slideLeftDelay 1000ms forwards;
          animation: slideLeftDelay 1000ms forwards;
}

.hidden {
  opacity: 0;
  pointer-events: none;
}

.shown {
  opacity: 1;
  pointer-events: auto;
}

.red {
  color: #ee6352;
}

.slim {
  font-weight: 400;
}

.li-active {
  opacity: 1 !important;
  -webkit-transform: scale(1.07);
          transform: scale(1.07);
}

.non-exist {
  display: none;
}

.exist {
  display: block;
}

.shaded {
  opacity: .6;
  font-weight: 300;
}

/* NAVIGATION BAR */
.nav-container {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100px;
  max-width: 100%;
  margin: 0;
  background-color: rgba(61, 64, 91, 0.9);
  z-index: 20;
  -webkit-transition: all 250ms ease;
  transition: all 250ms ease;
}

.nav-container .nav img {
  position: absolute;
  top: 50% !important;
  -webkit-transform: translateY(-33%);
          transform: translateY(-33%);
  left: 6%;
  height: 50px;
  width: auto;
  -webkit-transition: none;
  transition: none;
}

.nav-container .nav ul {
  position: absolute;
  top: 10%;
  right: 5%;
  list-style-type: none;
  -webkit-transition: all 250ms ease;
  transition: all 250ms ease;
}

.nav-container .nav ul li {
  float: left;
  margin-left: 80px;
}

.nav-container .nav a {
  font-family: "Oswald", sans-serif;
  font-weight: 500;
  font-size: 24px;
  text-decoration: none;
  color: #fff;
  -webkit-transition: all 200ms ease;
  transition: all 200ms ease;
}

.nav-container .nav a:hover {
  color: #ee6352;
}

.nav-container i {
  display: none;
}

.nav-container .mobNav {
  position: fixed;
  top: 80px;
  left: 0;
  width: 100%;
  height: calc(100% - 80px);
  background-color: rgba(238, 99, 82, 0.9);
}

.nav-container .mobNav ul {
  position: absolute;
  list-style-type: none;
  -webkit-transition: all 250ms ease;
  transition: all 250ms ease;
  text-align: center;
}

/* Nav style dedicated to EDGE */
@supports (-ms-ime-align: auto) {
  .nav-container a {
    font-size: 19px;
  }
}

@supports (-ms-ime-align: auto) {
  body p {
    font-size: 15px !important;
  }
  .nav-container a {
    font-size: 19px;
  }
  .chat-container {
    width: 330px !important;
    height: 570px !important;
  }
}

/* SCROLL TOP BUTTON */
.scroll-top-btn {
  position: fixed;
  bottom: 20px;
  right: 50%;
  border-radius: 50%;
  border: none;
  width: 80px;
  height: 80px;
  margin-right: -40px;
  background-color: #fff;
  z-index: 10;
  outline: none;
  -webkit-transition: all 200ms ease;
  transition: all 200ms ease;
}

.scroll-top-btn:hover .fa-chevron-up {
  -webkit-animation: jump 800ms infinite;
          animation: jump 800ms infinite;
}

.scroll-top-btn i {
  font-size: 3em;
  color: #ee6352;
}

.portfolioInfo, .portfolioInfoWhite {
  color: #373737;
  font-size: 14px;
  font-weight: 400;
  opacity: 0.5;
  font-weight: 300;
}

.portfolioInfoWhite {
  opacity: 0.4;
  color: #ffffff;
  font-size: 13px;
}

@media screen and (max-width: 1600px) and (min-width: 1201px) {
  .nav-container .nav .nav-ul ul {
    top: 17%;
  }
  .nav-container .nav .nav-ul a {
    font-size: 20px;
  }
  .scroll-top-btn {
    width: 60px;
    height: 60px;
    bottom: 10px;
    background-color: rgba(255, 255, 255, 0.7);
  }
  .scroll-top-btn:hover {
    background-color: white;
  }
  .scroll-top-btn i {
    font-size: 2em;
  }
}

@media screen and (max-width: 1200px) {
  .scroll-top-btn {
    display: none;
  }
  .scroll-top-btn i {
    left: 29%;
    top: 25%;
  }
  .nav-container {
    height: 80px !important;
  }
  .nav ul {
    display: none;
  }
  .nav img {
    width: 130px !important;
    height: auto !important;
  }
  i {
    position: absolute;
    top: 26px;
    right: 26px;
    display: block !important;
    font-size: 30px;
    color: #ee6352;
  }
  .mobNav {
    z-index: 12;
    width: 100%;
  }
  .mobNav ul {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-75%);
            transform: translateY(-75%);
    left: 0;
    right: 0;
    width: 100%;
    padding: 0;
    font-size: 26px;
    line-height: 80px;
  }
  .mobNav ul li {
    float: none;
    margin: 0;
    -webkit-transition: all 300ms ease;
    transition: all 300ms ease;
  }
  .mobNav ul li a {
    color: #f4f1de;
  }
  .mobNav .mobNav-login {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100px;
    background-color: #3d405b;
    text-align: center;
    font-size: 26px;
    line-height: 95px;
  }
  .mobNav .mobNav-login a {
    color: #f79f79;
    text-decoration: none;
  }
}

@media screen and (max-width: 850px) and (max-height: 451px) {
  .nav-container {
    height: 65px !important;
  }
  .nav-container i {
    top: 19px !important;
  }
  .nav-container .mobNav {
    top: 65px;
    height: calc(100% - 65px);
  }
  .nav-container .mobNav ul li {
    font-size: 16px;
    line-height: 51px;
  }
  .nav-container .mobNav .mobNav-login {
    height: 50px;
    font-size: 17px;
    line-height: 50px;
  }
}

.fa-bars {
  display: none;
  z-index: 25;
}

.nav-active {
  background-color: #f4f1de !important;
  pointer-events: none;
}

.nav-active i, .nav-active p {
  color: #32354B;
}

.nav-passive {
  background: transparent;
  pointer-events: auto;
}

.nav-passive i, .nav-passive p {
  color: #EE6352;
}

.homepage-active {
  background-color: #ee6352;
  opacity: 1;
}

.homepage-passive {
  opacity: 0;
}

.visible {
  opacity: 1;
  z-index: 2;
  pointer-events: auto;
}

.hidden {
  opacity: 0;
  z-index: 0;
  pointer-events: none;
}

html {
  cursor: auto;
}

body {
  margin: 0 !important;
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 20px;
}

button, a {
  cursor: pointer;
  text-decoration: none;
  color: #f4f1de;
}

input {
  cursor: text;
}

input[type="submit"] {
  cursor: pointer;
}

/* MAIN PAGE */
.chat .chat-container {
  background-color: rgba(255, 255, 255, 0.5) !important;
}

.container {
  position: relative;
  height: 100vh;
  max-height: 100%;
  width: 100%;
  margin-bottom: 0px;
  overflow: hidden;
  -webkit-transition: opacity 1000ms ease;
  transition: opacity 1000ms ease;
}

.container .nav-container {
  position: absolute;
  left: 0;
  width: 17%;
  height: 100%;
  background-color: #32354B;
}

.container .nav-container h1, .container .nav-container h2, .container .nav-container h3, .container .nav-container ul, .container .nav-container p {
  margin: 0;
  padding: 0;
}

.container .nav-container .nav-header {
  position: absolute;
  top: 5%;
  left: 10%;
  color: #5A5D77;
}

.container .nav-container ul {
  position: absolute;
  top: 15%;
  left: 0;
  width: 100%;
  list-style-type: none;
  background: transparent;
}

.container .nav-container ul li {
  height: 70px;
  padding-left: 20%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  line-height: 70px;
  cursor: pointer;
  -webkit-transition: all 200ms ease;
  transition: all 200ms ease;
  background: transparent;
}

.container .nav-container ul li:hover {
  background-color: rgba(244, 241, 222, 0.8);
}

.container .nav-container ul li:hover p, .container .nav-container ul li:hover i {
  color: #32354B;
}

.container .nav-container ul li .img-sizer {
  width: 28px;
  height: 28px;
  float: left;
  text-align: center;
  line-height: 28px;
  margin-top: 20px;
}

.container .nav-container ul li i, .container .nav-container ul li p {
  display: inline;
  font-size: 22px;
}

.container .nav-container ul li p {
  margin-left: 7%;
  font-weight: 400;
}

.container .nav-container .user {
  position: fixed;
  bottom: 3%;
  left: 2%;
  z-index: 10;
}

.container .nav-container .user img {
  position: relative;
  left: 0;
  bottom: 40%;
  width: 45px;
  height: auto;
}

.container .nav-container .user .user-data {
  position: absolute;
  left: 150%;
  bottom: -15%;
}

.container .nav-container .user .user-data h2 {
  color: #FF9A44;
  font-weight: 400;
  font-size: 24px;
  white-space: nowrap;
}

.container .nav-container .user .user-data p {
  color: #f4f1de;
  font-weight: 400;
  font-size: 14px;
}

.container .nav-container .user .user-data .log-out {
  width: 47px;
  opacity: 0.3;
  -webkit-transition: all 200ms ease;
  transition: all 200ms ease;
}

.container .nav-container .user .user-data .log-out:hover {
  opacity: 1;
}

.container .content {
  position: fixed;
  top: 0;
  right: 0;
  width: 83%;
  height: 100vh;
  max-height: 100%;
  background: #f4f1de url("/media/dash-bg.svg") center center no-repeat;
}

.container .firstBack {
  background: #f4f1de url("/media/dash-bg.svg") center center no-repeat;
}

.container .secondBack {
  background: none;
  background-image: linear-gradient(45deg, #F4F1DE 0%, #FFD0A8 100%);
}

.container .thirdBack {
  background: #3D405B;
  background-image: none;
}

.ie {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  width: 83%;
  height: 50px;
  background-color: rgba(244, 78, 66, 0.8);
  color: #fff;
  line-height: 50px;
  font-size: 17px;
  text-align: center;
}

.ie p {
  margin: 0;
  padding: 0;
}

.homepage-handle {
  z-index: 2;
  position: fixed;
  right: 15px;
  top: 15px;
  width: 50px;
  height: 50px;
  border-radius: 30px;
  background-color: white;
  text-align: center;
  line-height: 50px;
  color: #ee6352;
  cursor: pointer;
  -webkit-transition: all 300ms ease;
  transition: all 300ms ease;
}

.homepage-handle:hover {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
  background-color: #ee6352;
}

.homepage-handle:hover i {
  color: #f4f1de;
}

.homepage-info {
  z-index: 1;
  position: fixed;
  top: 15px;
  right: 15px;
  width: 250px;
  height: 50px;
  padding-right: 50px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background-color: #fff;
  color: #ee6352;
  border-radius: 30px;
  text-align: center;
  font-size: 17px;
  font-weight: 400;
  line-height: 50px;
  -webkit-transition: all 300ms ease;
  transition: all 300ms ease;
}

.homepage-info p {
  margin: 0;
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .ie {
    display: block;
  }
}

@media screen and (max-width: 1600px) and (min-width: 1201px) {
  .container .content {
    width: 80%;
  }
  .container .nav-container {
    width: 20%;
  }
  .container .nav-container .nav-header {
    font-size: 23px;
  }
  .container .nav-container ul {
    top: 19%;
  }
  .container .nav-container ul li {
    position: relative;
    height: 60px;
  }
  .container .nav-container ul li .img-sizer {
    line-height: 22px;
  }
  .container .nav-container ul li p {
    position: absolute;
    top: 36%;
    line-height: 18px;
    font-size: 18px;
  }
  .container .nav-container .user img {
    width: 35px;
  }
  .container .nav-container .user .user-data h2 {
    font-size: 20px;
  }
  .container .nav-container .user .user-data .log-out a {
    font-size: 17px;
  }
}

@media screen and (max-width: 1200px) {
  .homepage .homepage-handle {
    right: 10px;
    bottom: 10px;
    width: 40px;
    height: 40px;
  }
  .homepage .homepage-handle i {
    top: 11px;
    right: 10px;
    font-size: 18px;
  }
  .homepage .homepage-handle:hover {
    background-color: #fff;
  }
  .homepage .homepage-handle:hover i {
    color: #ee6352;
  }
  .container .content {
    width: 100%;
  }
  .container .fa-bars {
    display: inline-block;
    position: fixed;
    top: 15px;
    left: 15px;
    width: 9%;
  }
  .container .nav-container {
    width: 100%;
    height: 100% !important;
    background-color: #32354B;
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
  .container .nav-container .nav-header {
    display: none;
  }
  .container .nav-container .user {
    left: 7%;
  }
  .container .nav-container ul {
    top: 17%;
  }
  .container .nav-container ul li {
    position: relative;
  }
  .container .nav-container ul li i {
    right: auto;
    left: 20%;
  }
}

@media screen and (max-width: 850px) and (max-height: 451px) {
  .container .nav-container {
    background-color: rgba(50, 53, 75, 0.87);
  }
  .container .nav-container ul {
    top: 13%;
    background: transparent;
  }
  .container .nav-container ul li {
    height: 45px;
    background: transparent;
    line-height: 45px;
  }
  .container .nav-container ul li p {
    font-size: 15px;
  }
  .container .nav-container ul li .img-sizer {
    width: 17px;
    height: 17px;
  }
  .container .nav-container ul li .img-sizer i {
    top: 16px !important;
    font-size: 17px;
  }
  .container .nav-container .user .user-data h2 {
    font-size: 18px;
  }
}

.slideFromRight {
  -webkit-animation: slideFromRight 500ms forwards;
          animation: slideFromRight 500ms forwards;
}

.slideToRight {
  -webkit-animation: slideToRight 500ms forwards;
          animation: slideToRight 500ms forwards;
}

.slideFromLeft {
  -webkit-animation: slideFromLeft 500ms forwards;
          animation: slideFromLeft 500ms forwards;
}

.slideToLeft {
  -webkit-animation: slideToLeft 500ms forwards;
          animation: slideToLeft 500ms forwards;
}

.scaleZero {
  -webkit-transform: scale(0);
          transform: scale(0);
}

.scaleOne {
  -webkit-transform: scale(1);
          transform: scale(1);
}

.opacityZero {
  opacity: 0;
  pointer-events: none;
}

.opacityOne {
  opacity: 1;
}

.hiddenLeft {
  -webkit-transform: translateX(-200%);
          transform: translateX(-200%);
}

.shownLeft {
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.hiddenRight {
  -webkit-transform: translateX(200%);
          transform: translateX(200%);
}

.hiddenLeft {
  -webkit-transform: translateX(-200%);
          transform: translateX(-200%);
}

.shownRight {
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.hiddenBottom {
  -webkit-transform: translateY(200%);
          transform: translateY(200%);
}

.shownBottom {
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.shownLeftDelay {
  -webkit-animation: slideLeftDelay 1000ms forwards;
          animation: slideLeftDelay 1000ms forwards;
}

.hidden {
  opacity: 0;
  pointer-events: none;
}

.shown {
  opacity: 1;
  pointer-events: auto;
}

.red {
  color: #ee6352;
}

.slim {
  font-weight: 400;
}

.li-active {
  opacity: 1 !important;
  -webkit-transform: scale(1.07);
          transform: scale(1.07);
}

.non-exist {
  display: none;
}

.exist {
  display: block;
}

.shaded {
  opacity: .6;
  font-weight: 300;
}

/* NAVIGATION BAR */
.nav-container {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100px;
  max-width: 100%;
  margin: 0;
  background-color: rgba(61, 64, 91, 0.9);
  z-index: 20;
  -webkit-transition: all 250ms ease;
  transition: all 250ms ease;
}

.nav-container .nav img {
  position: absolute;
  top: 50% !important;
  -webkit-transform: translateY(-33%);
          transform: translateY(-33%);
  left: 6%;
  height: 50px;
  width: auto;
  -webkit-transition: none;
  transition: none;
}

.nav-container .nav ul {
  position: absolute;
  top: 10%;
  right: 5%;
  list-style-type: none;
  -webkit-transition: all 250ms ease;
  transition: all 250ms ease;
}

.nav-container .nav ul li {
  float: left;
  margin-left: 80px;
}

.nav-container .nav a {
  font-family: "Oswald", sans-serif;
  font-weight: 500;
  font-size: 24px;
  text-decoration: none;
  color: #fff;
  -webkit-transition: all 200ms ease;
  transition: all 200ms ease;
}

.nav-container .nav a:hover {
  color: #ee6352;
}

.nav-container i {
  display: none;
}

.nav-container .mobNav {
  position: fixed;
  top: 80px;
  left: 0;
  width: 100%;
  height: calc(100% - 80px);
  background-color: rgba(238, 99, 82, 0.9);
}

.nav-container .mobNav ul {
  position: absolute;
  list-style-type: none;
  -webkit-transition: all 250ms ease;
  transition: all 250ms ease;
  text-align: center;
}

/* Nav style dedicated to EDGE */
@supports (-ms-ime-align: auto) {
  .nav-container a {
    font-size: 19px;
  }
}

@supports (-ms-ime-align: auto) {
  body p {
    font-size: 15px !important;
  }
  .nav-container a {
    font-size: 19px;
  }
  .chat-container {
    width: 330px !important;
    height: 570px !important;
  }
}

/* SCROLL TOP BUTTON */
.scroll-top-btn {
  position: fixed;
  bottom: 20px;
  right: 50%;
  border-radius: 50%;
  border: none;
  width: 80px;
  height: 80px;
  margin-right: -40px;
  background-color: #fff;
  z-index: 10;
  outline: none;
  -webkit-transition: all 200ms ease;
  transition: all 200ms ease;
}

.scroll-top-btn:hover .fa-chevron-up {
  -webkit-animation: jump 800ms infinite;
          animation: jump 800ms infinite;
}

.scroll-top-btn i {
  font-size: 3em;
  color: #ee6352;
}

.portfolioInfo, .portfolioInfoWhite {
  color: #373737;
  font-size: 14px;
  font-weight: 400;
  opacity: 0.5;
  font-weight: 300;
}

.portfolioInfoWhite {
  opacity: 0.4;
  color: #ffffff;
  font-size: 13px;
}

@media screen and (max-width: 1600px) and (min-width: 1201px) {
  .nav-container .nav .nav-ul ul {
    top: 17%;
  }
  .nav-container .nav .nav-ul a {
    font-size: 20px;
  }
  .scroll-top-btn {
    width: 60px;
    height: 60px;
    bottom: 10px;
    background-color: rgba(255, 255, 255, 0.7);
  }
  .scroll-top-btn:hover {
    background-color: white;
  }
  .scroll-top-btn i {
    font-size: 2em;
  }
}

@media screen and (max-width: 1200px) {
  .scroll-top-btn {
    display: none;
  }
  .scroll-top-btn i {
    left: 29%;
    top: 25%;
  }
  .nav-container {
    height: 80px !important;
  }
  .nav ul {
    display: none;
  }
  .nav img {
    width: 130px !important;
    height: auto !important;
  }
  i {
    position: absolute;
    top: 26px;
    right: 26px;
    display: block !important;
    font-size: 30px;
    color: #ee6352;
  }
  .mobNav {
    z-index: 12;
    width: 100%;
  }
  .mobNav ul {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-75%);
            transform: translateY(-75%);
    left: 0;
    right: 0;
    width: 100%;
    padding: 0;
    font-size: 26px;
    line-height: 80px;
  }
  .mobNav ul li {
    float: none;
    margin: 0;
    -webkit-transition: all 300ms ease;
    transition: all 300ms ease;
  }
  .mobNav ul li a {
    color: #f4f1de;
  }
  .mobNav .mobNav-login {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100px;
    background-color: #3d405b;
    text-align: center;
    font-size: 26px;
    line-height: 95px;
  }
  .mobNav .mobNav-login a {
    color: #f79f79;
    text-decoration: none;
  }
}

@media screen and (max-width: 850px) and (max-height: 451px) {
  .nav-container {
    height: 65px !important;
  }
  .nav-container i {
    top: 19px !important;
  }
  .nav-container .mobNav {
    top: 65px;
    height: calc(100% - 65px);
  }
  .nav-container .mobNav ul li {
    font-size: 16px;
    line-height: 51px;
  }
  .nav-container .mobNav .mobNav-login {
    height: 50px;
    font-size: 17px;
    line-height: 50px;
  }
}

@keyframes slideLeftDelay {
  0% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
  50% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

@keyframes slideRightDelay {
  0% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
  80% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

@keyframes jump {
  50% {
    -webkit-transform: translateY(-10px);
            transform: translateY(-10px);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes contactShow {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-box-shadow: 0;
            box-shadow: 0;
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1.15);
            transform: scale(1.15);
    -webkit-box-shadow: 0px 0px 20px 3px rgba(0, 0, 0, 0.4);
            box-shadow: 0px 0px 20px 3px rgba(0, 0, 0, 0.4);
  }
}

@keyframes push {
  0% {
    font-size: 12px;
  }
  50% {
    font-size: 15px;
  }
  100% {
    font-size: 12px;
  }
}

@keyframes pushImg {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.05);
            transform: scale(1.05);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes inStand {
  0%, 30% {
    opacity: 0;
  }
  80%, 100% {
    opacity: 1;
  }
}

@keyframes inPrem {
  0%, 10% {
    opacity: 0;
  }
  60%, 100% {
    opacity: 1;
  }
}

@keyframes inPro {
  0%, 50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes faqSlideImg {
  0% {
    -webkit-transform: translateX(200%);
            transform: translateX(200%);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

@keyframes faqSlideCont {
  0%, 30% {
    -webkit-transform: translateX(-200%);
            transform: translateX(-200%);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

@keyframes chatScaleShow {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  80% {
    -webkit-transform: scale(1.03);
            transform: scale(1.03);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes chatScaleHide {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  40% {
    -webkit-transform: scale(1.03);
            transform: scale(1.03);
  }
  100% {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
}

@keyframes slideFromRight {
  0% {
    -webkit-transform: translateX(130%);
            transform: translateX(130%);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideToRight {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(130%);
            transform: translateX(130%);
    opacity: 0;
  }
}

@keyframes slideFromLeft {
  0% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideToLeft {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
    opacity: 0;
  }
}

.projects {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  padding-top: 12%;
  padding-left: 12%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  white-space: nowrap;
  overflow-x: auto;
  -webkit-transition: all 300ms ease;
  transition: all 300ms ease;
}

.projects .project, .projects .add-project {
  position: relative;
  display: inline-block;
  width: 320px;
  height: 520px;
  margin-right: 100px;
  background-color: rgba(244, 241, 222, 0.8);
  color: rgba(61, 64, 91, 0.9);
  -webkit-box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.3);
          box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.3);
  -webkit-transition: all 200ms ease;
  transition: all 200ms ease;
}

.projects .project:hover, .projects .add-project:hover {
  background-color: #f4f1de;
  -webkit-transform: scale(1.02);
          transform: scale(1.02);
}

.projects .project .image, .projects .add-project .image {
  height: 40%;
  width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background: #fff url("/media/EXAMPLEMAP.png") center center no-repeat;
  background-size: cover;
}

.projects .project h3, .projects .add-project h3 {
  position: absolute;
  left: 10%;
  top: 44%;
  white-space: normal;
  width: 80%;
  text-align: center;
  margin: 0;
  color: #ee6352;
  overflow: hidden;
}

.projects .project p, .projects .add-project p {
  position: absolute;
  left: 24%;
  top: 56%;
  font-size: 15px;
  font-weight: 400;
}

.projects .project .project-time, .projects .add-project .project-time {
  top: 60.5%;
  left: 43.5%;
  opacity: 0.6;
  font-size: 13px;
}

.projects .project .menage, .projects .add-project .menage {
  position: absolute;
  left: 20%;
  top: 68%;
  width: 60%;
  height: 130px;
  border-radius: 15px;
  background-color: #ee6352;
  -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
          box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
}

.projects .project .menage button, .projects .add-project .menage button {
  display: block;
  margin: 10px auto 0 auto;
  width: 80%;
  height: 30px;
  border-radius: 10px;
  border: none;
  background-color: #f4f1de;
  color: #ee6352;
  font-family: 'Oswald', sans-serif;
  font-weight: 400;
  font-size: 16px;
  -webkit-transition: all 150ms ease;
  transition: all 150ms ease;
}

.projects .project .menage button:hover, .projects .add-project .menage button:hover {
  width: 90%;
  font-weight: 700;
  color: #d9503f;
}

.projects .project .menage .disabled, .projects .add-project .menage .disabled {
  opacity: 0.6;
  color: #373737;
  pointer-events: none;
}

.projects .add-project {
  position: relative;
  margin-top: 80px;
  width: 260px;
  height: 360px;
  cursor: pointer;
  color: #ee6352;
  -webkit-transition-property: background-color, -webkit-transform;
  transition-property: background-color, -webkit-transform;
  transition-property: background-color, transform;
  transition-property: background-color, transform, -webkit-transform;
}

.projects .add-project:hover {
  -webkit-transform: scale(1.04);
          transform: scale(1.04);
}

.projects .add-project i {
  position: absolute;
  top: 25%;
  left: 37%;
  font-size: 80px;
}

.projects .add-project h3 {
  position: absolute;
  top: 55%;
}

.add-project-modal-bg, .delete-project-modal-bg {
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(50, 53, 75, 0.85);
  width: 100%;
  height: 100%;
  z-index: 10;
  -webkit-transition: all 200ms ease;
  transition: all 200ms ease;
}

.add-project-modal-bg .add-project-modal, .add-project-modal-bg .delete-project-modal, .delete-project-modal-bg .add-project-modal, .delete-project-modal-bg .delete-project-modal {
  position: fixed;
  top: 34%;
  left: 35%;
  width: 28%;
  height: 28%;
  padding-left: 40px;
  border-radius: 15px;
  background-color: #fff;
  color: #ee6352;
}

.add-project-modal-bg .add-project-modal i, .add-project-modal-bg .delete-project-modal i, .delete-project-modal-bg .add-project-modal i, .delete-project-modal-bg .delete-project-modal i {
  position: absolute;
  right: 15px;
  top: 15px;
  cursor: pointer;
  font-size: 22px;
  -webkit-transition: all 150ms ease;
  transition: all 150ms ease;
}

.add-project-modal-bg .add-project-modal i:hover, .add-project-modal-bg .delete-project-modal i:hover, .delete-project-modal-bg .add-project-modal i:hover, .delete-project-modal-bg .delete-project-modal i:hover {
  -webkit-transform: scale(1.3);
          transform: scale(1.3);
}

.add-project-modal-bg .add-project-modal h3, .add-project-modal-bg .delete-project-modal h3, .delete-project-modal-bg .add-project-modal h3, .delete-project-modal-bg .delete-project-modal h3 {
  position: absolute;
  top: 6%;
}

.add-project-modal-bg .add-project-modal input[name=add], .add-project-modal-bg .delete-project-modal input[name=add], .delete-project-modal-bg .add-project-modal input[name=add], .delete-project-modal-bg .delete-project-modal input[name=add] {
  position: absolute;
  top: 40%;
  width: 50%;
  border: none;
  border-bottom: 1px solid #737373;
  font-size: 19px;
  font-family: 'Oswald', sans-serif;
  padding-bottom: 5px;
  outline: none;
}

.add-project-modal-bg .add-project-modal input[name=submit-add], .add-project-modal-bg .delete-project-modal input[name=submit-add], .delete-project-modal-bg .add-project-modal input[name=submit-add], .delete-project-modal-bg .delete-project-modal input[name=submit-add] {
  position: absolute;
  bottom: 40px;
  right: 40px;
  width: 160px;
  height: 40px;
  border: none;
  border-radius: 15px;
  background-color: #ee6352;
  color: #fff;
  font-family: 'Oswald', sans-serif;
  font-size: 18px;
  -webkit-transition: all 200ms ease;
  transition: all 200ms ease;
}

.add-project-modal-bg .add-project-modal input[name=submit-add]:hover, .add-project-modal-bg .delete-project-modal input[name=submit-add]:hover, .delete-project-modal-bg .add-project-modal input[name=submit-add]:hover, .delete-project-modal-bg .delete-project-modal input[name=submit-add]:hover {
  -webkit-transform: scale(1.07);
          transform: scale(1.07);
}

.add-project-modal-bg .add-project-modal .loader, .add-project-modal-bg .delete-project-modal .loader, .delete-project-modal-bg .add-project-modal .loader, .delete-project-modal-bg .delete-project-modal .loader {
  width: 40px;
  height: auto;
  position: absolute;
  bottom: 40px;
  right: 210px;
  display: none;
}

@media screen and (max-width: 1600px) and (min-width: 1201px) {
  .container .content .projects {
    padding-top: 7%;
  }
  .container .content .projects .add-project {
    margin-top: 60px;
    width: 210px;
    height: 300px;
  }
  .container .content .projects .add-project i {
    top: 25%;
    font-size: 70px;
  }
  .container .content .projects .add-project h3 {
    top: 56%;
    left: 16%;
    width: 70%;
    font-size: 18px;
  }
  .container .content .projects .project {
    width: 260px;
    height: 420px;
  }
  .container .content .projects .project h3 {
    line-height: 27px;
  }
  .container .content .projects .project .menage {
    left: 15%;
    top: 71%;
    width: 70%;
    height: 110px;
    background-color: rgba(238, 99, 82, 0.2);
  }
  .container .content .projects .project .menage button {
    background-color: #ee6352;
    color: #f4f1de;
    height: 24px;
    font-size: 13px;
    border-radius: 7px;
  }
  .container .content .projects .project p {
    left: 18%;
  }
  .container .content .projects .project .project-time {
    left: 42%;
    top: 61.5%;
  }
  .container .content .add-project-modal, .container .content .delete-project-modal {
    top: 25%;
    left: 30%;
    width: 38%;
    height: 45%;
  }
}

@media screen and (max-width: 1200px) and (min-width: 450px) {
  .container .content .projects .add-project-modal-bg .add-project-modal, .container .content .projects .delete-project-modal-bg .delete-project-modal {
    left: 11%;
    width: 73%;
  }
  .container .content .delete-project-modal-bg .delete-project-modal {
    left: 11%;
    width: 73%;
  }
}

@media screen and (max-width: 450px) {
  .container .content .projects {
    padding-top: 28%;
  }
  .container .content .projects .add-project {
    width: 270px;
    height: 320px;
    margin-top: 50px;
    margin-right: 40px;
  }
  .container .content .projects .project {
    width: 260px;
    height: 420px;
    margin-right: 50px;
  }
  .container .content .projects .project h3 {
    font-size: 18px;
  }
  .container .content .projects .project p {
    top: 54%;
    left: 17%;
  }
  .container .content .projects .project .project-time {
    left: 43.5%;
    top: 59.5%;
  }
  .container .content .projects .project .menage {
    left: 15%;
    width: 70%;
  }
  .container .content .projects .add-project-modal {
    top: 28%;
    left: 0;
    width: 100%;
    height: 40%;
    padding-left: 37px;
    border-radius: 0;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
  .container .content .projects .add-project-modal h3 {
    width: 80%;
  }
  .container .content .projects .add-project-modal .title {
    width: 80%;
  }
  .container .content .delete-project-modal-bg .delete-project-modal {
    top: 28%;
    left: 0;
    width: 100%;
    height: 40%;
    padding-left: 37px;
    border-radius: 0;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
  .container .content .delete-project-modal-bg .delete-project-modal h3 {
    width: 80%;
  }
}

@media screen and (max-width: 850px) and (max-height: 451px) {
  .container .content .projects {
    margin-top: 0;
    padding-top: 5%;
  }
  .container .content .projects .add-project {
    width: 170px;
    height: 300px;
    margin-top: 0;
    margin-bottom: 0 !important;
  }
  .container .content .projects .add-project i {
    top: 20%;
    left: 39%;
    font-size: 50px;
  }
  .container .content .projects .add-project h3 {
    font-size: 20px;
    font-weight: 400;
  }
  .container .content .projects .project {
    width: 200px;
    height: 300px;
  }
  .container .content .projects .project h3 {
    font-size: 16px;
    font-weight: 400;
  }
  .container .content .projects .project p {
    display: none;
  }
  .container .content .projects .project .menage {
    bottom: 0;
    top: unset;
    left: 0;
    width: 100%;
    height: 118px;
    border-radius: 0;
    background-color: rgba(238, 99, 82, 0.8);
  }
  .container .content .projects .project .menage button {
    height: 26px;
    font-size: 13px;
  }
  .container .content .projects .add-project-modal-bg .add-project-modal {
    width: 100%;
    height: 56%;
    left: 0;
    top: 22%;
    border-radius: 0;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
  .container .content .delete-project-modal-bg .delete-project-modal {
    width: 100%;
    height: 56%;
    left: 0;
    top: 22%;
    border-radius: 0;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
}

.dashInformerLogin, .dashInformerPassword {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  background-color: #fff;
  z-index: 10;
  color: #ee6352;
  padding-top: 8%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background-color: rgba(255, 255, 255, 0.9) !important;
  -webkit-transition: all 200ms ease;
  transition: all 200ms ease;
  cursor: pointer;
}

.dashInformerLogin img, .dashInformerPassword img {
  width: 220px;
  height: auto;
  margin-bottom: 20px;
}

.package h3 {
  position: absolute;
  top: 8%;
  left: 50px;
}

.package h1 {
  position: absolute;
  top: 20%;
  left: 50px;
  font-size: 50px;
  color: #3D405B;
}

.package p {
  position: absolute;
  top: 60%;
  left: 50px;
  font-weight: 400;
  color: #32354B;
}

.package .expire-date {
  top: 70%;
}

.account {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  -webkit-transition: all 300ms ease;
  transition: all 300ms ease;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 5% 35% 5% 50% 5%;
      grid-template-columns: 5% 35% 5% 50% 5%;
  grid-auto-rows: 5%;
}

.account h3 {
  color: #ee6352;
  font-size: 30px;
  font-weight: 400;
}

.account .actualPackage, .account .changeUsername, .account .personalData, .account .changePassword {
  position: relative;
  background-color: #f4f1de;
  -ms-grid-column: 2;
  -ms-grid-column-span: 1;
  grid-column: 2 / 3;
  -ms-grid-row: 2;
  -ms-grid-row-span: 10;
  grid-row: 2 / 12;
  -webkit-transition: all 200ms ease;
  transition: all 200ms ease;
}

.account .actualPackage:hover, .account .changeUsername:hover, .account .personalData:hover, .account .changePassword:hover {
  -webkit-transform: scale(1.01);
          transform: scale(1.01);
}

.account .changeUsername {
  -ms-grid-column: 2;
  -ms-grid-column-span: 1;
  grid-column: 2 / 3;
  -ms-grid-row: 13;
  -ms-grid-row-span: 7;
  grid-row: 13 / 20;
}

.account .changeData h3 {
  position: absolute;
  top: 6%;
  left: 24%;
}

.account .changeData input, .account .changeData button {
  position: absolute;
  top: 44%;
  left: 22%;
  display: block;
  width: 54%;
  height: 40px;
  border: none;
  border-radius: 10px;
  -webkit-box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.2);
  font-family: 'Oswald', sans-serif;
  font-weight: 400;
  font-size: 17px;
  text-align: center;
}

.account .changeData ::-webkit-input-placeholder {
  text-align: center;
}

.account .changeData :-ms-input-placeholder {
  text-align: center;
}

.account .changeData ::-ms-input-placeholder {
  text-align: center;
}

.account .changeData ::placeholder {
  text-align: center;
}

.account .changeData button {
  position: absolute;
  top: 70%;
  left: 24%;
  display: block;
  width: 50%;
  height: 50px;
  background-color: #ee6352;
  font-size: 20px;
  -webkit-transition: all 200ms ease;
  transition: all 200ms ease;
}

.account .changeData button:hover {
  -webkit-transform: scale(1.07);
          transform: scale(1.07);
}

.account .personalData {
  -ms-grid-column: 4;
  -ms-grid-column-span: 1;
  grid-column: 4 / 5;
  -ms-grid-row: 2;
  -ms-grid-row-span: 8;
  grid-row: 2 / 10;
}

.account .personalData h3 {
  position: absolute;
  top: 8%;
  left: 50px;
}

.account .personalData table {
  position: absolute;
  top: 40%;
  left: 50px;
  text-align: left;
  width: 70%;
  font-size: 19px;
  color: #32354B;
}

.account .personalData table tr {
  height: 40px;
}

.account .personalData table th {
  font-weight: 400;
}

.account .personalData table img {
  width: 30px;
  height: auto;
}

.account .personalData table .avatar-change-tr {
  height: 50px;
  position: relative;
}

.account .personalData table .avatar-change {
  position: absolute;
  bottom: 45px;
  display: inline;
  font-weight: 400;
  font-size: 15px;
  margin-left: 3%;
  cursor: pointer;
  -webkit-transition: all 200ms ease;
  transition: all 200ms ease;
}

.account .personalData table .avatar-change:hover {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}

.account .personalData table .delete-account-link {
  width: 180px;
  font-weight: 400;
  cursor: pointer;
  -webkit-transition: all 200ms ease;
  transition: all 200ms ease;
}

.account .personalData table .delete-account-link:hover {
  color: red;
}

.account .personalData .dashInformerLogin {
  cursor: auto;
}

.account .personalData input {
  position: absolute;
  display: block;
  width: 30%;
  height: 40px;
  border: none;
  border-radius: 10px;
  -webkit-box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.2);
  font-family: 'Oswald', sans-serif;
  font-weight: 400;
  font-size: 17px;
  text-align: center;
}

.account .personalData .askForMail {
  width: 50%;
  height: 40px;
  top: 45%;
  left: 24%;
}

.account .personalData .yesDelete, .account .personalData .noDelete {
  top: 70%;
  -webkit-transition: all 200ms ease;
  transition: all 200ms ease;
}

.account .personalData .yesDelete:hover, .account .personalData .noDelete:hover {
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
}

.account .personalData .noDelete {
  left: 15%;
}

.account .personalData .yesDelete {
  right: 15%;
  color: #fff;
  background-color: red;
}

.account .changePassword {
  -ms-grid-column: 4;
  -ms-grid-column-span: 1;
  grid-column: 4 / 5;
  -ms-grid-row: 11;
  -ms-grid-row-span: 9;
  grid-row: 11 / 20;
}

.account .changePassword h3 {
  left: 41%;
}

.account .changePassword input[type="password"] {
  width: 40%;
  height: 40px;
  left: 29%;
}

.account .changePassword .old-password {
  top: 29%;
}

.account .changePassword .new-password {
  top: 43%;
}

.account .changePassword .repeat-new-password {
  top: 57%;
}

.account .changePassword button {
  top: 75%;
}

.account .changePassword p {
  position: absolute;
  top: 87%;
  width: 100%;
  text-align: center;
  font-size: 15px;
  font-weight: 400;
  color: #32354B;
  cursor: pointer;
  -webkit-transition: all 200ms ease;
  transition: all 200ms ease;
}

.account .changePassword p:hover {
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
}

@media screen and (max-width: 1600px) and (min-width: 1201px) {
  .container .content .account h3 {
    font-size: 20px;
  }
  .container .content .account h1 {
    font-size: 40px;
  }
  .container .content .account p {
    font-size: 16px;
  }
  .container .content .account input {
    width: 70%;
    height: 35px;
  }
  .container .content .account button {
    height: 35px;
  }
  .container .content .account .changeUsername input {
    top: 40%;
    left: 15%;
  }
  .container .content .account .changeUsername .dashInformerLogin h2 {
    display: none;
  }
  .container .content .account .personalData table tbody {
    top: 37%;
    font-size: 15px;
  }
  .container .content .account .personalData table tbody tr {
    height: 20px;
  }
  .container .content .account .personalData .dashInformerLogin h2 {
    font-size: 20px;
    margin-top: 0;
  }
  .container .content .account .personalData .dashInformerLogin .askForMail {
    left: 15%;
  }
  .container .content .account .personalData .dashInformerLogin .noDelete, .container .content .account .personalData .dashInformerLogin .yesDelete {
    width: 30%;
    height: 40px;
  }
  .container .content .account .personalData .dashInformerLogin .noDelete {
    left: 15%;
  }
  .container .content .account .personalData .dashInformerLogin .yesDelete {
    right: 15%;
  }
  .container .content .account .personalData .deleteAccountWrongMailInformer img {
    display: none;
  }
  .container .content .account .personalData .deleteAccountWrongMailInformer h2 {
    margin-top: 10%;
  }
  .container .content .account .changePassword {
    overflow-y: auto;
  }
  .container .content .account .changePassword input {
    left: 16%;
  }
  .container .content .account .changePassword .old-password {
    top: 35%;
  }
  .container .content .account .changePassword .new-password {
    top: 57%;
  }
  .container .content .account .changePassword .repeat-new-password {
    top: 79%;
  }
  .container .content .account .changePassword button {
    top: 103%;
    left: 26%;
  }
  .container .content .account .changePassword p {
    top: 115%;
    left: 40%;
    margin-bottom: 5%;
    font-size: 15px;
  }
  .container .content .account .changePassword .dashInformerPassword {
    height: 139%;
  }
}

@media screen and (max-width: 1200px) {
  .container .content .account {
    height: 300%;
    -ms-grid-columns: 5% 90% 5%;
        grid-template-columns: 5% 90% 5%;
    grid-auto-rows: 3%;
  }
  .container .content .account h3 {
    font-size: 26px;
    left: 15%;
  }
  .container .content .account input {
    left: 10%;
    width: 80%;
  }
  .container .content .account .personalData, .container .content .account .changePassword {
    -ms-grid-column: 2;
    -ms-grid-column-span: 1;
    grid-column: 2 / 3;
  }
  .container .content .account .actualPackage {
    -ms-grid-row: 2;
    -ms-grid-row-span: 6;
    grid-row: 2 / 8;
  }
  .container .content .account .actualPackage h1 {
    font-size: 46px;
    top: 23%;
    left: 15%;
  }
  .container .content .account .changeUsername {
    -ms-grid-row: 9;
    -ms-grid-row-span: 6;
    grid-row: 9 / 15;
  }
  .container .content .account .changeUsername input {
    top: 41%;
  }
  .container .content .account .changeUsername .dashInformerLogin {
    padding-top: 20%;
  }
  .container .content .account .changeUsername .dashInformerLogin h2 {
    font-size: 23px;
  }
  .container .content .account .personalData {
    -ms-grid-row: 16;
    -ms-grid-row-span: 8;
    grid-row: 16 / 24;
  }
  .container .content .account .personalData table {
    width: 90%;
    left: 5%;
    font-size: 18px;
  }
  .container .content .account .personalData table td {
    padding-left: 8%;
  }
  .container .content .account .personalData table .delete-account-link {
    font-size: 16px;
  }
  .container .content .account .personalData .delete-account-informer .yesDelete {
    top: 65%;
  }
  .container .content .account .personalData .delete-account-informer .noDelete {
    top: 78%;
  }
  .container .content .account .changePassword {
    -ms-grid-row: 25;
    -ms-grid-row-span: 8;
    grid-row: 25 / 33;
  }
  .container .content .account .changePassword .dashInformerPassword {
    padding-top: 30%;
  }
  .container .content .account .changePassword button {
    left: 26%;
  }
}

@media screen and (max-width: 1200px) and (min-width: 451px) {
  .container .content .account {
    -ms-grid-columns: 15% 70% 15%;
        grid-template-columns: 15% 70% 15%;
  }
}

@media screen and (max-width: 850px) and (max-height: 451px) {
  .container .content .account {
    height: 500%;
  }
  .container .content .account h3 {
    font-size: 20px;
  }
  .container .content .account p {
    font-size: 15px;
  }
  .container .content .account .actualPackage p {
    left: 15%;
  }
  .container .content .account .actualPackage h1 {
    font-size: 38px;
  }
}

.interface {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  -webkit-transition: all 300ms ease;
  transition: all 300ms ease;
  text-align: center;
}

.interface h1 {
  margin-top: 10%;
  font-size: 50px;
  color: #ee6352;
}

.interface img {
  width: 20%;
  height: auto;
  display: inline-block;
  margin: 5% 3% 0 3%;
  cursor: pointer;
  -webkit-transition: all 200ms ease;
  transition: all 200ms ease;
}

.interface img:hover {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}

.interface .chosen {
  -webkit-box-shadow: 0px 0px 20px 8px rgba(0, 0, 0, 0.5);
          box-shadow: 0px 0px 20px 8px rgba(0, 0, 0, 0.5);
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}

@media screen and (max-width: 1200px) {
  .interface {
    white-space: nowrap;
    overflow-x: auto;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
  .interface h1 {
    position: fixed;
    left: 0;
    top: 8%;
    width: 100%;
    text-align: center;
    font-size: 40px;
  }
  .interface img {
    width: 33%;
    margin: 50% 5% 0 5%;
  }
}

@media screen and (max-width: 450px) {
  .interface img {
    width: 70%;
    margin: 60% 16% 0 16%;
  }
}

@media screen and (max-width: 850px) and (max-height: 451px) {
  .interface h1 {
    top: -5%;
    font-size: 25px;
  }
  .interface img {
    width: 26%;
    margin: 20% 5% 0 5%;
  }
}

.payment {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  -webkit-transition: all 300ms ease;
  transition: all 300ms ease;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 6% 26% 5% 26% 5% 26% 6%;
      grid-template-columns: 6% 26% 5% 26% 5% 26% 6%;
  -ms-grid-rows: 6% 40% 5% 43% 6%;
      grid-template-rows: 6% 40% 5% 43% 6%;
}

.payment h3 {
  color: #ee6352;
  font-size: 30px;
  font-weight: 400;
}

.payment .packagePara {
  width: 70%;
  top: 30%;
  font-size: 17px;
}

.payment .packageBtn {
  position: absolute;
  top: 70%;
  left: 15%;
  display: block;
  width: 70%;
  height: 40px;
  border: none;
  border-radius: 10px;
  -webkit-box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.2);
  font-family: "Oswald", sans-serif;
  font-weight: 400;
  font-size: 17px;
  text-align: center;
  background-color: #ee6352;
  color: #fff;
  -webkit-transition: all 200ms ease;
  transition: all 200ms ease;
}

.payment .packageBtn:hover {
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
}

.payment .actualPackage,
.payment .extendPackage,
.payment .changePackage,
.payment .paymentStory {
  position: relative;
  background-color: #f4f1de;
  -ms-grid-column: 2;
  -ms-grid-column-span: 1;
  grid-column: 2 / 3;
  -ms-grid-row: 2;
  -ms-grid-row-span: 1;
  grid-row: 2 / 3;
  -webkit-transition: all 200ms ease;
  transition: all 200ms ease;
}

.payment .actualPackage:hover,
.payment .extendPackage:hover,
.payment .changePackage:hover,
.payment .paymentStory:hover {
  -webkit-transform: scale(1.01);
          transform: scale(1.01);
}

.payment .extendPackage {
  -ms-grid-column: 4;
  -ms-grid-column-span: 1;
  grid-column: 4 / 5;
  -ms-grid-row: 2;
  -ms-grid-row-span: 1;
  grid-row: 2 / 3;
}

.payment .changePackage {
  -ms-grid-column: 6;
  -ms-grid-column-span: 1;
  grid-column: 6 / 7;
  -ms-grid-row: 2;
  -ms-grid-row-span: 1;
  grid-row: 2 / 3;
}

.payment .paymentStory {
  -ms-grid-column: 2;
  -ms-grid-column-span: 5;
  grid-column: 2 / 7;
  -ms-grid-row: 4;
  -ms-grid-row-span: 1;
  grid-row: 4 / 5;
}

.payment .paymentStory h3 {
  color: #ee6352;
  position: absolute;
  left: 15%;
}

.payment .paymentStory .paymentTable {
  position: absolute;
  top: 23%;
  left: 19%;
  width: 60%;
  max-height: 70%;
  overflow-y: auto;
}

.payment .paymentStory table {
  width: 100%;
  color: #32354b;
  font-size: 17px;
  font-weight: 400;
  text-align: center;
}

.payment .paymentStory table th {
  background-color: #ee6352;
  height: 40px;
}

.payment .paymentStory table td {
  background-color: #fff;
  height: 40px;
}

.payment .packageChoose .dotpay:hover {
  background-color: rgba(231, 170, 162, 0.5) !important;
}

.payment .packageChoose .przelewy24:hover {
  background-color: rgba(238, 124, 109, 0.5) !important;
}

.payment .packageChoose .paypal:hover {
  background-color: rgba(238, 99, 82, 0.5) !important;
}

.payment .packageChoose ul {
  width: 100%;
  height: 100%;
  padding: 10%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  list-style-type: none;
  text-align: center;
  padding: 0;
  font-weight: 400;
  font-size: 17px;
  padding-top: 1%;
}

.payment .packageChoose ul h2 {
  color: #ee6352;
}

.payment .packageChoose ul p {
  color: #32354b;
}

.payment .paymentMethodBg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 4;
  background-color: rgba(50, 53, 75, 0.85);
  -webkit-transition: all 200ms ease;
  transition: all 200ms ease;
}

.payment .paymentMethodBg .paymentMethod {
  position: fixed;
  left: 50%;
  top: 50%;
  margin-top: -10em;
  margin-left: -17.5em;
  width: 36em;
  height: 15em;
  z-index: 5;
  border-radius: 15px;
  background-color: white;
  -webkit-box-shadow: 0px 0px 20px 3px rgba(0, 0, 0, 0.4);
          box-shadow: 0px 0px 20px 3px rgba(0, 0, 0, 0.4);
}

.payment .paymentMethodBg .paymentMethod .xHideout {
  width: 40px;
  height: 40px;
  background: transparent;
  position: absolute;
  right: 1%;
  top: 2%;
}

.payment .paymentMethodBg .paymentMethod .xHideout i {
  position: absolute;
  right: 33%;
  top: 22%;
  cursor: pointer;
  color: #ee6352;
  font-size: 22px;
  z-index: 10;
  -webkit-transition: all 150ms ease;
  transition: all 150ms ease;
}

.payment .paymentMethodBg .paymentMethod .xHideout i:hover {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}

.payment .paymentMethodBg .paymentMethod .paypal,
.payment .paymentMethodBg .paymentMethod .przelewy24,
.payment .paymentMethodBg .paymentMethod .dotpay {
  position: absolute;
  top: 0%;
  left: 0%;
  display: inline-block;
  width: 12em;
  height: 100%;
  border-radius: 15px;
  background-color: #fff;
  -webkit-transition: all 200ms ease;
  transition: all 200ms ease;
  cursor: pointer;
}

.payment .paymentMethodBg .paymentMethod .paypal:hover,
.payment .paymentMethodBg .paymentMethod .przelewy24:hover,
.payment .paymentMethodBg .paymentMethod .dotpay:hover {
  background-color: rgba(146, 21, 23, 0.3);
}

.payment .paymentMethodBg .paymentMethod .paypal img,
.payment .paymentMethodBg .paymentMethod .przelewy24 img,
.payment .paymentMethodBg .paymentMethod .dotpay img {
  position: absolute;
  left: 50%;
  top: 40%;
  margin-left: -70px;
  width: 140px;
  height: auto;
}

.payment .paymentMethodBg .paymentMethod .przelewy24 {
  left: 50%;
  margin-left: -6em;
}

.payment .paymentMethodBg .paymentMethod .przelewy24:hover {
  background-color: rgba(41, 50, 60, 0.2);
}

.payment .paymentMethodBg .paymentMethod .paypal {
  left: unset;
  right: 0%;
}

.payment .paymentMethodBg .paymentMethod .paypal:hover {
  background-color: rgba(0, 156, 222, 0.3);
}

@media screen and (max-width: 1600px) and (min-width: 1201px) {
  .payment h3 {
    font-size: 20px;
  }
  .payment .actualPackage h1 {
    font-size: 40px;
  }
  .payment .actualPackage p {
    font-size: 14px;
  }
  .payment .extendPackage .packagePara,
  .payment .changePackage .packagePara {
    width: 80%;
    left: 30px;
    font-size: 14px;
  }
  .payment .paymentStory table tbody {
    font-size: 15px;
  }
  .payment .paymentStory table tbody td {
    height: 35px;
  }
}

@media screen and (max-width: 1200px) {
  .container .content .payment {
    height: 300%;
    -ms-grid-columns: 5% 90% 5%;
        grid-template-columns: 5% 90% 5%;
    grid-auto-rows: 3%;
    -ms-grid-rows: unset;
        grid-template-rows: unset;
  }
  .container .content .payment h3 {
    font-size: 26px;
  }
  .container .content .payment h1 {
    font-size: 46px;
  }
  .container .content .payment .extendPackage,
  .container .content .payment .changePackage,
  .container .content .payment .paymentStory {
    -ms-grid-column: 2;
    -ms-grid-column-span: 1;
    grid-column: 2 / 3;
  }
  .container .content .payment .actualPackage {
    -ms-grid-row: 2;
    -ms-grid-row-span: 6;
    grid-row: 2 / 8;
  }
  .container .content .payment .extendPackage {
    -ms-grid-row: 9;
    -ms-grid-row-span: 6;
    grid-row: 9 / 15;
  }
  .container .content .payment .changePackage {
    -ms-grid-row: 16;
    -ms-grid-row-span: 6;
    grid-row: 16 / 22;
  }
  .container .content .payment .paymentStory {
    -ms-grid-row: 23;
    -ms-grid-row-span: 10;
    grid-row: 23 / 33;
  }
  .container .content .payment .paymentStory .paymentTable {
    left: 0%;
    top: unset;
    bottom: 0;
    width: 100%;
    max-height: 80%;
  }
  .container .content .payment .paymentStory .paymentTable table {
    font-size: 15px;
  }
}

@media screen and (max-width: 1200px) and (min-width: 451px) {
  .container .content .payment {
    -ms-grid-columns: 15% 70% 15%;
        grid-template-columns: 15% 70% 15%;
  }
  .container .content .payment .paymentStory {
    -ms-grid-row: 23;
    -ms-grid-row-span: 7;
    grid-row: 23 / 30;
  }
  .container .content .payment .paymentStory td {
    height: 45px;
  }
}

@media screen and (max-width: 850px) and (max-height: 451px) {
  .container .content .payment {
    height: 500%;
  }
  .container .content .payment h3 {
    font-size: 20px;
  }
  .container .content .payment p {
    font-size: 15px;
  }
  .container .content .payment .actualPackage h1 {
    font-size: 38px;
  }
}

.tutorials {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  -webkit-transition: all 300ms ease;
  transition: all 300ms ease;
  overflow-y: auto;
  padding-bottom: 100px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.tutorials h1 {
  margin-top: 6%;
  margin-left: 8%;
  font-size: 50px;
  color: #ee6352;
}

.tutorial {
  background-color: #f4f1de;
  width: 20%;
  height: 50%;
  margin: 6% 0 0 10%;
  display: inline-block;
  -webkit-transition: all 200ms ease;
  transition: all 200ms ease;
}

.tutorial:hover {
  -webkit-transform: scale(1.02);
          transform: scale(1.02);
}

@media screen and (max-width: 1200px) {
  .tutorials {
    padding-top: 70px;
  }
  .tutorials h1 {
    width: 100%;
    text-align: center;
    font-size: 40px;
    margin-left: 0;
  }
  .tutorials .tutorial {
    width: 80%;
    height: 350px;
    margin: 12% 10% 0 10%;
    background-color: rgba(244, 241, 222, 0.8);
  }
}
/*# sourceMappingURL=dashboard.css.map */