* {
  box-sizing: border-box;
}

.site-header-top {height:14px;}

.site-header {
  border: 1px solid #dddddd;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  background: #263238;
  color: white;
  margin-top:14px;
  height:80px;
}

.site-header__content {
  display: flex;
  align-items: center;
  width: 100%;
/*  max-width: 1000px; */
  height: 72px;
}

.site-header__content--left {
  display: flex;
  align-items: center;
  width: 50%;
}

.site-header__content--right {
  display: flex;
  align-items: center;
  margin-top:-4px;
}


.site-header__content--right a {
  margin: 0 24px;
  font-size: 14px;
  color: white;
}


.logo {
  display: flex;
  float:left;
  justify-content: center;
  align-items: center;
  height: 104px;
  width: 104px;
  margin: 20px;
  border-radius: 50%;
  background: #006d41;
  box-shadow: 0 2px 6px 1px rgba(0, 0, 0, 0.15);
  transition: background-color 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.logo:hover, .login-logo:focus {
  background:  #00b96f;
}

.logo-image {
  width: 30px;float:left;
}

body, html {
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

html {
  font-family: 'Inter UI', sans-serif;
  font-size: 15px;
}


body {
  background: #f5f6fa;
  display: grid;
  grid-template-rows: [header] 72px [body] 1fr [footer] auto;
}

.site-body {
  padding: 24px;
}

.site-body h2 {margin-top:20px;}

.site-body h1 {margin-top:20px;}

li, dt, dd {padding:5px;}

dt {font-weight: bold}

.columns {
  justify-content: space-between;
  width: 100%;
}

.columns:after {
  content: "";
  display: table;
  clear: both;
}

.column2 {
  float:left;
  width:50%;
  padding:10px;
}

.column-image { width: 568px;height:375px;}


@media screen and (max-width: 600px) {
  .column2 {
    width: 100%;
  }
}