﻿body {
  background-image: url(/images/general/marina_login_clean.svg);
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color: #464646;
}

.vertical-center {
  min-height: 100%; /* Fallback for browsers do NOT support vh unit */
  min-height: 100vh; /* These two lines are counted as one :-)       */
  display: flex;
}
@media (max-width: 767.98px) {
  .vertical-center {
    display: block;
    flex-direction: column;
  }
}

.vertical-center > .infos {
  flex: 6;
  display: flex;
  flex-direction: column;
}
.vertical-center > .infos > .content {
  flex: auto;
}
.vertical-center > .infos > div {
  display: flex;
  flex-direction: column;
}
.vertical-center > .infos > div::before {
  content: "";
  flex: 1;
}
@media (max-width: 767.98px) {
  .vertical-center > .infos > div::before {
    flex: 0;
  }
}
.vertical-center > .infos > div::after {
  content: "";
  flex: 3;
}
@media (max-width: 767.98px) {
  .vertical-center > .infos > div::after {
    flex: 0;
  }
}

@media (min-width: 576px) {
  .vertical-center > .login {
    flex: 5;
    display: flex;
    flex-direction: column;
  }
  .vertical-center > .login > .content {
    flex: auto;
  }
  .vertical-center > .login > div {
    height: 50px;
    display: flex;
    flex-direction: column;
  }
  .vertical-center > .login > div::before {
    content: "";
    flex: 1;
  }
  .vertical-center > .login > div::after {
    content: "";
    flex: 1;
  }
}

@media (max-width: 767.98px) {
  .vertical-center, .footer {
    backdrop-filter: blur(2px);
    background-color: rgba(102, 190, 254, 0.4);
  }
}

.imgCh {
  width: 100%;
  margin-left: -3em;
}

.imgCh.logo {
  width: 35%;
  margin: auto;
}

@media (min-width: 576px) {
  .blur-2 {
    backdrop-filter: blur(2px);
  }
}

@media (max-width: 767.98px) {
  .footer {
    position: relative;
  }
}

.logofixed {
  position: fixed;
  top: 0;
  right: 0;
  left: inherit;
  z-index: 1030;
  display: flex;
  justify-content: center;
}
@media (max-width: 767.98px) {
  .logofixed {
    position: relative;
    left: inherit;
  }
}
