@font-face {
   font-family: 'Wojo Sans';
   font-style: normal;
   font-weight: 700;
   unicode-range: U+0020-0237;
   src: local(''), url('../fonts/WojoSansBold.woff2') format('woff2'), url('../fonts/WojoSansBold.woff') format('woff');
}
@font-face {
   font-family: 'Wojo Sans';
   font-style: normal;
   font-weight: 600;
   unicode-range: U+0020-0237;
   src: local(''), url('../fonts/WojoSansDemi.woff2') format('woff2'), url('../fonts/WojoSansDemi.woff') format('woff');
}
@font-face {
   font-family: 'Wojo Sans';
   font-style: normal;
   font-weight: 500;
   unicode-range: U+0020-0237;
   src: local(''), url('../fonts/WojoSansMedium.woff2') format('woff2'), url('../fonts/WojoSansMedium.woff') format('woff');
}
@font-face {
   font-family: 'Wojo Sans';
   font-style: normal;
   font-weight: 400;
   unicode-range: U+0020-0237;
   src: local(''), url('../fonts/WojoSansRegular.woff2') format('woff2'), url('../fonts/WojoSansRegular.woff') format('woff');
}
@font-face {
   font-family: 'Wojo Sans';
   font-style: normal;
   font-weight: 300;
   unicode-range: U+0020-0237;
   src: local(''), url('../fonts/WojoSansLight.woff2') format('woff2'), url('../fonts/WojoSansLight.woff') format('woff');
}
@font-face {
   font-family: 'Wojo Sans';
   font-style: normal;
   font-weight: 200;
   unicode-range: U+0020-0237;
   src: local(''), url('../fonts/WojoSansExtraLight.woff2') format('woff2'), url('../fonts/WojoSansExtraLight.woff') format('woff');
}
html,
body {
   font-size: 16px;
   height: 100%;
}
body {
   font-family: "Wojo Sans", Helvetica, Arial, sans-serif;
   color: var(--body-color);
   background-color: var(--body-bg-color);
   font-weight: 400;
   line-height: 1.5;
   text-align: left;
   margin: 0;
   padding: 0;
   display: flex;
   flex-direction: column;
}
a,
a.dark,
a.white,
a.grey {
   cursor: pointer;
   color: var(--primary-color);
   text-decoration: none;
   transition: all .35s ease;
   outline: none;
}
a:hover,
a.hover,
a:focus {
   color: var(--primary-color-hover);
   transition: all .55s ease;
   outline: none;
   text-decoration: none
}
a.grey {
   color: var(--grey-color);
}
a.grey:hover,
a.grey.hover,
a.grey:focus {
   color: var(--primary-color);
}
a.white {
   color: var(--white-color);
}
a.white:hover,
a.white.hover,
a.white:focus {
   color: var(--primary-color);
}
h1,
h2,
h3,
h4,
h5,
h6 {
   font-weight: 500;
   line-height: 1.5;
   margin: 0 0 .5rem 0;
}
h1 {
   font-size: var(--h1-size);
   line-height: 2rem;
   margin: 0 0 1rem 0;
}
h2 {
   font-size: var(--h2-size);
   line-height: 2rem;
   font-weight: 500;
}
h3 {
   font-size: var(--h3-size);
   line-height: 1.75rem;
}
h4 {
   font-size: var(--h4-size);
   line-height: 1.75rem;
}
h5 {
   font-size: var(--h5-size);
   line-height: 1.5rem;
   font-weight: 600;
}
h6 {
   font-size: var(--h6-size);
   line-height: 1.3rem;
   font-weight: 700;
}
h1.basic,
h2.basic,
h3.basic,
h4.basic,
h5.basic,
h6.basic,
p.basic {
   margin-bottom: 0;
}
header {
   padding: 1.5rem 0 0 0;
   background-image: url('../images/login.jpg');
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center;
}
header .logo {
   display: inline-block;
}
header .logo img {
   height: 2rem;
}
.toolbar {
   padding: 1.5rem 0 14rem 0;
   margin-top: 1rem;
   position: relative;
   z-index: 1;
   border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.toolbar .shape {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   margin-bottom: -5rem;
   z-index: 1
}
.toolbar .caption {
   margin-top: 2rem;
   padding-bottom: 1rem;
}
.toolbar .caption h4 {
   font-size: 1.25rem;
   margin: 0;
   font-weight: 500;
   color: var(--white-color);
}
.toolbar .caption p {
   font-size: .875rem;
   margin: 0;
   color: var(--white-color);
}
main {
   flex: 1 0 auto;
   margin-top: -12rem;
   position: relative;
   z-index: 2;
}
.mainContainer {
   padding: 2rem;
   min-height: 20rem;
   border-radius: 1.5rem;
   background-color: #f7f8fa;
   box-shadow: 0 .125rem .5rem 0 var(--shadow-color);
}
footer {
   flex-shrink: 0;
   text-align: center;
   padding: 2rem 1rem 1rem 1rem;
   font-weight: 400;
   font-size: .875rem;
}
footer p small {
   margin-left: .250rem;
}
#notFound {
   position: relative;
}
#notFound div {
   text-align: center;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}
#notFound div h1 {
   font-size: 5rem;
   line-height: 2em;
}
/* == Phone == */
@media screen and (max-width: 640px) {
   nav.wojo.menu {
      margin-top: 1rem
   }
   #mainRow {
      justify-content: space-between;
   }
   .wojo.icon.button.is-alone {
      border-radius: .375rem;
   }
   .mainContainer {
      padding: .75rem;
      border-radius: 1.5rem;
   }
}
/* == Mobile == */
@media screen and (min-width: 641px) and (max-width: 768px) {
   nav.wojo.menu {
      margin-top: 1rem
   }
   #mainRow {
      justify-content: space-between;
   }
}
/* == Tablet == */
@media screen and (min-width: 769px) and (max-width: 1199px) {
   .wojo.icon.button.is-alone {
      border-radius: .375rem;
   }
}