body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: black; }
  body .page-cover {
    position: fixed;
    display: block;
    content: "";
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99998;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease-in-out;
    background-color: black; }
  body .navigation {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 240px;
    background-color: #141414;
    z-index: 99998;
    transform: translateX(-180px);
    transition: all 0.3s ease-in-out; }
    @media screen and (max-width: 768px) {
      body .navigation {
        transform: translateX(-100%); } }
    body .navigation .navigation-inner {
      opacity: 0;
      visibility: hidden;
      height: 100%;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      transition: all 0.2s ease-in-out; }
      body .navigation .navigation-inner .navigation-top {
        position: relative;
        width: 100%;
        text-align: center;
        padding-top: 20px; }
        body .navigation .navigation-inner .navigation-top .logo-big a {
          display: inline-block; }
          body .navigation .navigation-inner .navigation-top .logo-big a img {
            height: auto;
            width: 100px; }
      body .navigation .navigation-inner ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        margin-top: 30px; }
        body .navigation .navigation-inner ul li {
          padding-left: 20px; }
          body .navigation .navigation-inner ul li:hover {
            background-color: #b8553d;
            transition: .2 all ease-in-out; }
            body .navigation .navigation-inner ul li:hover > a {
              color: #000; }
          body .navigation .navigation-inner ul li a {
            color: #b8553d;
            width: 100%;
            height: 100%;
            display: inline-block;
            padding: 10px; }
            body .navigation .navigation-inner ul li a:hover {
              text-decoration: none; }
            body .navigation .navigation-inner ul li a span.fas {
              width: 30px; }
    body .navigation .menu-icon {
      position: absolute;
      top: 50%;
      right: 21px;
      font-size: 21px;
      color: #b8553d;
      visibility: visible;
      cursor: pointer;
      transform: translateY(-50%);
      transition: all 0.2s ease-in-out; }
  body .mobile-nav {
    position: fixed;
    display: none;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 60px;
    background-color: #141414;
    z-index: 99997;
    border-bottom: 1px solid #141414; }
    @media screen and (max-width: 768px) {
      body .mobile-nav {
        display: block; } }
    body .mobile-nav .mobile-menu-trigger {
      position: absolute;
      top: 15px;
      right: 15px;
      width: 25px;
      height: 29px;
      cursor: pointer;
      z-index: 2;
      transition: all 0.3s ease-in-out; }
      body .mobile-nav .mobile-menu-trigger > span {
        top: 50%;
        margin-top: -2px; }
      body .mobile-nav .mobile-menu-trigger > span, body .mobile-nav .mobile-menu-trigger > span:before, body .mobile-nav .mobile-menu-trigger > span:after {
        position: absolute;
        display: block;
        content: "";
        width: 100%;
        height: 2px;
        background-color: #b8553d;
        transition: all 0.3s ease-in-out; }
      body .mobile-nav .mobile-menu-trigger > span:before {
        top: -7px; }
      body .mobile-nav .mobile-menu-trigger > span:after {
        bottom: -7px; }
  body.menu-open .navigation {
    box-shadow: 3px 0 10px rgba(0, 0, 0, 0.1);
    transform: translateX(0); }
    body.menu-open .navigation .navigation-inner {
      opacity: 1;
      visibility: visible; }
    body.menu-open .navigation .menu-icon {
      opacity: 0;
      visibility: hidden; }
  body.menu-open .mobile-menu-trigger {
    transform: rotate(180deg); }
    body.menu-open .mobile-menu-trigger > span {
      background: transparent; }
    body.menu-open .mobile-menu-trigger > span:before {
      top: 0;
      transform: rotate(45deg); }
    body.menu-open .mobile-menu-trigger > span:after {
      bottom: 0;
      transform: rotate(-45deg); }
  body.menu-open .page-cover {
    opacity: .3;
    visibility: visible; }
  body main.general-container, body main.dashboard-container {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center; }
  body main.dashboard-container .dashboard-welcome {
    width: 80%;
    height: 60%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; }
    body main.dashboard-container .dashboard-welcome h1 {
      color: #b8553d;
      text-transform: uppercase;
      margin-bottom: 60px;
      font-size: calc(30px + .5vw); }
    body main.dashboard-container .dashboard-welcome ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      width: 100%;
      max-width: 600px;
      margin: 0 auto;
      display: flex;
      justify-content: space-around; }
      body main.dashboard-container .dashboard-welcome ul li {
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid #b8553d;
        border-radius: 50%;
        height: 50px;
        width: 50px; }
        body main.dashboard-container .dashboard-welcome ul li:hover {
          background-color: #b8553d; }
          body main.dashboard-container .dashboard-welcome ul li:hover > a {
            color: #000; }
        body main.dashboard-container .dashboard-welcome ul li a {
          color: #b8553d;
          display: flex;
          justify-content: center;
          height: 100%;
          width: 100%;
          align-items: center; }
          body main.dashboard-container .dashboard-welcome ul li a:hover {
            text-decoration: none; }
  body main.general-container .settings {
    width: 80%;
    height: 90%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: column; }
    body main.general-container .settings .alert {
      width: 60%;
      border-radius: 20px; }
    body main.general-container .settings h3 {
      color: #b8553d;
      text-align: center;
      text-transform: uppercase;
      margin: 40px auto;
      font-size: calc(30px + .5vw); }
      body main.general-container .settings h3#last-heading {
        margin-bottom: 0; }
    body main.general-container .settings h4 {
      color: #b8553d;
      text-transform: uppercase;
      margin: 30px auto; }
    body main.general-container .settings form {
      display: flex;
      justify-content: space-between;
      width: 60%;
      max-width: 800px; }
      body main.general-container .settings form.background-update {
        margin-bottom: 20px; }
      body main.general-container .settings form input, body main.general-container .settings form button {
        width: 200px; }
      body main.general-container .settings form input[type='file'] {
        width: 100%;
        border: none;
        padding: 0; }
      body main.general-container .settings form input {
        background-color: transparent;
        border: 1px solid #b8553d;
        border-radius: 20px;
        padding: 8px;
        color: #b8553d;
        text-align: center; }
        body main.general-container .settings form input:focus {
          outline: none; }
        body main.general-container .settings form input::placeholder {
          text-align: center;
          color: #b8553d; }
  body main.categories-container {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center; }
    @media screen and (min-width: 769px) {
      body main.categories-container {
        align-items: center; } }
    body main.categories-container .category-wrapper {
      width: auto;
      height: auto;
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      padding-left: 60px; }
      @media screen and (max-width: 1025px) {
        body main.categories-container .category-wrapper {
          padding-left: 0;
          padding-top: 80px; } }
      body main.categories-container .category-wrapper .category {
        width: 300px;
        height: 300px;
        border-radius: 50%;
        position: relative;
        margin: 20px;
        cursor: pointer;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat; }
        body main.categories-container .category-wrapper .category:after {
          content: "";
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          height: 100%;
          width: 100%;
          background-color: rgba(184, 85, 61, 0.6);
          border-radius: 50%;
          opacity: 0;
          transition-property: opacity, background-color;
          transition: .5s all ease-in-out;
          z-index: 1; }
        body main.categories-container .category-wrapper .category:hover:after {
          opacity: 1; }
        body main.categories-container .category-wrapper .category:hover h3 {
          opacity: 1; }
        body main.categories-container .category-wrapper .category h3 {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          text-transform: uppercase;
          letter-spacing: 1px;
          font-size: calc(18px + .2vw);
          font-weight: bold;
          color: #000;
          opacity: 0;
          transition: .5s opacity ease-in-out;
          z-index: 2; }
  body .category-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    display: none;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 99999;
    overflow: hidden; }
    body .category-modal .close-modal {
      position: absolute;
      right: 5%;
      top: 3%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      height: 40px;
      width: 40px;
      border: 1px solid #b8553d;
      border-radius: 50%;
      color: #b8553d;
      cursor: pointer; }
    body .category-modal .category-modal-content {
      height: 80%;
      width: 80%;
      background-color: #141414;
      border-radius: 20px;
      border: 1px solid #b8553d;
      display: flex;
      justify-content: space-around;
      position: relative;
      overflow: hidden; }
      @media screen and (max-width: 1200px) {
        body .category-modal .category-modal-content {
          flex-direction: column; } }
      body .category-modal .category-modal-content form {
        width: 45%;
        height: 100%;
        padding: 20px; }
        @media screen and (max-width: 1200px) {
          body .category-modal .category-modal-content form {
            width: 100%;
            height: auto; } }
        body .category-modal .category-modal-content form label {
          color: #b8553d; }
        body .category-modal .category-modal-content form input[type='file'] {
          width: 100%;
          border: none;
          padding: 0;
          display: block;
          background-color: transparent;
          margin-bottom: 10px;
          border-radius: 20px;
          border: 1px solid #b8553d;
          color: #b8553d; }
      body .category-modal .category-modal-content .image-gallery {
        width: 100%;
        height: 100%;
        padding: 20px;
        overflow-y: scroll; }
        @media screen and (min-width: 801px) {
          body .category-modal .category-modal-content .image-gallery {
            width: 80%; } }
        @media screen and (min-width: 1201px) {
          body .category-modal .category-modal-content .image-gallery {
            width: 45%; } }
        body .category-modal .category-modal-content .image-gallery .image-container {
          width: calc(40% - 20px);
          min-width: 150px;
          height: 100px;
          margin: 10px;
          float: right;
          position: relative;
          z-index: 1;
          background-position: center;
          background-size: cover;
          background-repeat: no-repeat; }
          @media screen and (max-width: 800px) {
            body .category-modal .category-modal-content .image-gallery .image-container {
              float: none;
              width: 100%; } }
          body .category-modal .category-modal-content .image-gallery .image-container .image-settings {
            background-color: rgba(26, 102, 46, 0.6);
            display: flex;
            justify-content: space-around;
            align-items: center;
            width: 20%;
            height: 100%;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            z-index: 2; }
            body .category-modal .category-modal-content .image-gallery .image-container .image-settings button {
              height: 30px;
              width: 100%;
              color: #FFF;
              cursor: pointer;
              background: transparent;
              border: none; }
    body .category-modal .slider-right {
      height: 100%;
      width: 100%;
      transform: translateX(100%);
      transition: 1s transform ease-in-out;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      z-index: 1;
      background: #141414; }
      @media screen and (min-width: 1201px) {
        body .category-modal .slider-right {
          width: 50%; } }
      body .category-modal .slider-right.open {
        transform: translateX(0%);
        transition: 1s transform ease-in-out; }
      body .category-modal .slider-right .slider-content {
        height: 100%;
        width: calc(100% - 30px);
        margin-right: 30px; }
        @media screen and (min-width: 1201px) {
          body .category-modal .slider-right .slider-content {
            margin-right: 0; } }
      body .category-modal .slider-right .slider-content-top {
        display: flex;
        justify-content: space-around;
        align-items: center;
        width: 100%;
        height: auto;
        flex-direction: column; }
        @media screen and (min-width: 1201px) {
          body .category-modal .slider-right .slider-content-top {
            flex-direction: row; } }
        body .category-modal .slider-right .slider-content-top form + button {
          background-color: #BA110C;
          border: none;
          color: white;
          height: 30px;
          width: 90%;
          margin: 0 auto;
          cursor: pointer; }
          @media screen and (min-width: 1201px) {
            body .category-modal .slider-right .slider-content-top form + button {
              width: auto;
              margin: unset; } }
      body .category-modal .slider-right .slider-image {
        height: 60%;
        width: 90%;
        margin: 0 auto;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        margin-top: 40px; }
        @media screen and (min-width: 1201px) {
          body .category-modal .slider-right .slider-image {
            width: 100%;
            margin: unset; } }
      body .category-modal .slider-right .slider-close {
        color: black;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 30px;
        height: 100%;
        background-color: #b8553d;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer; }

#loginBody {
  position: relative;
  height: 100vh;
  width: 100%;
  background-image: url(../css/background_images/cms_background.png);
  background-position: center;
  background-size: 100%;
  color: #b8553d; }
  #loginBody a {
    color: #b8553d !important; }
  #loginBody .loginBox {
    position: absolute;
    top: calc(50% - 30%);
    right: 30%;
    height: 60%;
    width: 20%;
    display: flex;
    flex-direction: column;
    justify-content: center; }
    @media screen and (max-width: 1024px) {
      #loginBody .loginBox {
        left: calc(50% - 30%); } }
    #loginBody .loginBox form input {
      background: transparent;
      border: none;
      border-bottom: 1px solid #b8553d;
      color: white; }
      #loginBody .loginBox form input::placeholder {
        color: white; }
      #loginBody .loginBox form input:focus {
        box-shadow: none; }
    #loginBody .loginBox button {
      background: transparent;
      color: #b8553d !important;
      border: none;
      cursor: pointer; }
      #loginBody .loginBox button:focus {
        outline: none; }

.alert {
  width: 80%;
  margin: 20px auto !important; }
  .alert + form {
    height: auto; }

.alert-danger {
  border-color: #721c24 !important;
  background-color: transparent !important; }

.alert-info {
  background-color: transparent !important;
  border-color: #0c5460 !important;
  width: 60%; }

.form-button {
  background-color: transparent;
  border: 1px solid #b8553d;
  border-radius: 20px;
  color: #b8553d;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  padding: 0 10px; }
  .form-button:hover {
    color: #000; }
    .form-button:hover:before {
      transform: scaleX(1); }
  .form-button::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #b8553d;
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition-property: transform;
    transition-duration: 0.3s;
    transition-timing-function: ease-out; }