:root {
  --main-bg-color: #FFFFFF;
  --header-bg-color: #242E38;
  --light-bg-color: #D1E0E5; /*#eff0e6;*/ /* #daf0f5; */ /*#D1E0E5; */
  --dark-text: rgb(33, 37, 41);
  --light-text: #48646E;
  --white-text: #FFFFFF;
  --alert-accent-color: #C22028;
  --error-accent-color: #FF2222;
  --dark-accent-color: #1D252D;
  --btn-border-color: #547681;
  --button-dark-color: #242E38;
  --button-light-color: #D1E0E5;
  --image-border-color: #DDDDDD;
  --placeholder-color: #BBBBBB;
  /*--button-light-color: #E4EDF0;*/
}

header {
	margin-bottom: 3em;
}
header nav {
	display: flex;
	justify-content: space-between;
}
.main_logo {
	max-width: 100px;
	padding:  1em;
}

.desktop-nav {
	display: flex;
	list-style-type: none;
}
.mobile-logo,
.mobile-nav-toggle {
	display: none;
}
.btn {
	background-color: slategray;
	color: white;
  border:  none;
}



.btn-center {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}
.btn-table {
  /*max-width: 75px;*/
    /*height: 25px;*/
    
}
.btn-table > span:after,
.btn-table:after {
  top:  10px;
}
.btn-table > span span {
  padding-left: 3px;
  padding-right: 3px;
}
.btn-175 {
  max-width: 175px;
  width: 175px;
  min-width: 175px;
}
.btn-panel {
  max-width: 125px;
    height: 50px;
  display: inline-block;
}
.btn-panel > span:after,
.btn-panel:after {
  top:  15px;
}
.btn-left {
    float: left;
}
.btn-square {
  max-width: 60px;
  width: 60px;
  padding-left: 0;
  padding-right: 0;
}
.btn-square > span span {
  padding-left: 3px;
  padding-right: 3px;
  font-size: 36px;
}
.btn.btn-warmred.btn-square:hover span:after {
  top: 29px;
}
.btn-right {
    float: right;
}
.btn-mt1 {
  margin-top:  1rem;
}
.btn-mt2 {
  margin-top:  2rem;
}
.btn-mr1 {
  margin-right:  1rem;
}
.btn:hover {
  color: white;
  background-color: black;
}