body {
    background-color: rgb(244, 244, 244);
}
.ui.footer.segment {
    margin: 3em 0em 0em;
    padding: 1em 0em;
}
.masthead.segment {
    min-height: 100px;
    padding: 1em 0em;
    padding-top: 20em;
}

/*******************************
              Logo
*******************************/

/* All sizes */

/* .ui[class*="top fixed"].menu {} */
.ui.top.menu {
  border-radius: 0 !important;
  transition: all 0.5s ease;
}
.ui.top.menu.unhide {
  transform: translateY(0%);
}
.logo.image.item>* img {
  border-radius: 500rem;
  overflow: hidden;
  vertical-align: middle;
  position: relative;
}

/* Small Monitor and up */

@media only screen and (min-width: 992px) {

  .logo.image.item {
    position: absolute;
    left: 48.3%;
    margin-left: -28px;
    z-index: 1;
  }
  .logo.image.item>* {
    border-radius: 500rem;
    max-width: 100%;
  }
  .logo.image.item img {
    width: 75px;
    background-color: #ffffff;
  }

}

/* Small Mobile */

@media only screen and (max-width: 374px) {
  /* make it tiny */
  .ui.top.menu {
    font-size: .85714286rem;
  }
}

/* Mobile */

@media only screen and (max-width: 767px) {
}

/* Tablet */

@media only screen and (min-width: 768px) and (max-width: 991px) {
}

/* Small Monitor */

@media only screen and (min-width: 992px) and (max-width: 1199px) {
}

/* Large Monitor */

@media only screen and (min-width: 1200px) {
}


/**
 * taken from https://github.com/Semantic-Org/Semantic-UI/issues/1114#issuecomment-201057438
 * same snippet with semantic variables https://github.com/Semantic-Org/Semantic-UI/issues/1114#issuecomment-213146552

// Semantic UI has these classes, however they're only applicable to
// grids, containers, rows and columns.
// plus, there isn't any `mobile hidden`, `X hidden` class.
// this snippet is using the same class names and same approach
// plus a bit more but to all elements.
//
// see https://github.com/Semantic-Org/Semantic-UI/issues/1114
*/

/* Mobile */
@media only screen and (max-width: 767px) {
  [class*="mobile hidden"],
  [class*="tablet only"]:not(.mobile),
  [class*="computer only"]:not(.mobile),
  [class*="large screen only"]:not(.mobile),
  [class*="widescreen only"]:not(.mobile),
  [class*="or lower hidden"] {
    display: none !important;
  }
}

/* Tablet / iPad Portrait */
@media only screen and (min-width: 768px) and (max-width: 991px) {
  [class*="mobile only"]:not(.tablet),
  [class*="tablet hidden"],
  [class*="computer only"]:not(.tablet),
  [class*="large screen only"]:not(.tablet),
  [class*="widescreen only"]:not(.tablet),
  [class*="or lower hidden"]:not(.mobile) {
    display: none !important;
  }
}

/* Computer / Desktop / iPad Landscape */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  [class*="mobile only"]:not(.computer),
  [class*="tablet only"]:not(.computer),
  [class*="computer hidden"],
  [class*="large screen only"]:not(.computer),
  [class*="widescreen only"]:not(.computer),
  [class*="or lower hidden"]:not(.tablet):not(.mobile) {
    display: none !important;
  }
}

/* Large Monitor */
@media only screen and (min-width: 1200px) and (max-width: 1919px) {
  [class*="mobile only"]:not([class*="large screen"]),
  [class*="tablet only"]:not([class*="large screen"]),
  [class*="computer only"]:not([class*="large screen"]),
  [class*="large screen hidden"],
  [class*="widescreen only"]:not([class*="large screen"]),
  [class*="or lower hidden"]:not(.computer):not(.tablet):not(.mobile) {
    display: none !important;
  }
}

/* Widescreen Monitor */
@media only screen and (min-width: 1920px) {
  [class*="mobile only"]:not([class*="widescreen"]),
  [class*="tablet only"]:not([class*="widescreen"]),
  [class*="computer only"]:not([class*="widescreen"]),
  [class*="large screen only"]:not([class*="widescreen"]),
  [class*="widescreen hidden"],
  [class*="widescreen or lower hidden"] {
    display: none !important;
  }
}