/*
$clr_pr_dark: #222831;
$clr_pr_light: #fff;
$clr_pr_hue1: #a6acc3;
$clr_pr_hue2: #6b8bae;
$clr_pr_hue3: #E5AA4F;
*/
/*
$clr_pr_dark: #20141F;
$clr_pr_light: #F7F3F4;
$clr_pr_hue1: #A26734;
$clr_pr_hue2: #D26F6D;
$clr_pr_hue3: #4D7C90;
*/
/*
$clr_pr_dark: #171E30;
$clr_pr_light: #DEE6EA;
$clr_pr_hue1: #594F69;
$clr_pr_hue2: #3266BE;
$clr_pr_hue3: #439DC8;
*/
/* Layout */
#holder {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
  grid-template-rows: 50px repeat(4, minmax(1px, max-content));
  max-width: 1100px;
  margin: 0 auto; }

#header {
  grid-area: 1 / 1 / 1 / span 1; }

#mainContent {
  grid-area: 2 / 1 / 2 / span 1; }

#subContent {
  grid-area: 3 / 1 / 3 / span 1; }

#recentWODs {
  grid-area: 4 / 1 / 4 / span 1;
  border-top: 2px #D5E6A2 solid; }

#footer1 {
  grid-area: 5 / 1 / 5 / span 1; }

#footer2 {
  grid-area: 6 / 1 / 6 / span 1; }

.WODGridHolder {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  margin: 0 auto; }

#about {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr 1fr;
  margin: 0 auto; }

/* Layout */
body {
  font-family: verdana;
  background-color: #282928;
  color: #F9F6F6;
  margin: 0;
  padding: 0; }

#navHolder {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  width: 100%; }

#logoHolder {
  flex-grow: 0;
  border: 0px #F9F6F6 solid; }

#navItemHolder {
  flex-grow: 1;
  border: 0px #F9F6F6 solid; }

.topNav {
  list-style-type: none;
  margin: 200;
  padding: 0;
  display: inline;
  background-color: #F9F6F6; }

.foot_this_section {
  background-color: #A9C05A !important; }

.head_this_section {
  background-color: #A9C05A !important; }

.head_link_hover {
  border-bottom: 2px #F9F6F6 solid !important; }

#logo {
  width: 80px;
  height: 80px; }

h1 {
  font-size: 40px;
  margin: 0;
  padding: 0px 0px 15px 0px;
  /*border: 1px green dotted;*/
  color: #D5E6A2; }

h2 {
  font-size: 30px;
  margin: 0;
  padding: 10px 0px;
  color: #42543E; }

h3 {
  font-size: 20px;
  margin: 0;
  padding: 15px 0px 0px 0px;
  color: #42543E; }

h4 {
  color: #D5E6A2;
  margin: 0px 0px 0px 0px; }

p {
  color: #F9F6F6;
  margin: 7px 0px 0px 0px; }

li {
  font-size: 14px; }

.box {
  border: 0px #F9F6F6 solid;
  padding: 10px 10px;
  border-radius: 1px;
  overflow: hidden;
  height: 100%; }

.contentbox {
  background-color: #F9F6F6; }

#filterMovements {
  display: block;
  margin: 0px 0px 0px 0px;
  /*border: 1px greenyellow dashed;*/ }

#filterMovements h3, p {
  display: block;
  padding: 0px;
  margin: 0px 0px 10px 0px;
  /*border: 1px greenyellow dashed;*/ }

#shownWODCount {
  /*font-size: 10px;*/ }

/*
rWOD
*/
#rWODHolder {
  display: block;
  margin-left: auto;
  margin-right: auto;
  border: 2px #A9C05A solid; }

.rWOD {
  padding: 10px;
  border: 2px #F9F6F6 solid; }

.rWODHover {
  background-color: #42543E !important; }

#rWODDetails {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  background-color: #282928;
  width: 100%;
  max-width: 390px;
  /* border: 1px blue dotted;*/ }

#rWODDetailInner {
  padding: 7px; }

.rWODdt {
  color: #F9F6F6;
  font-weight: bold;
  font-size: 10px; }

.rWODimgHolder {
  display: block;
  width: 100%;
  margin: 0 auto; }

.rWODimg {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 390px;
  border: 2px #F9F6F6 solid; }

#foot {
  margin: 0;
  padding: 7px;
  background-color: #D5E6A2;
  color: #F9F6F6;
  font-weight: bold;
  text-align: center; }

#wdMyMusings {
  border-top: 2px #D5E6A2 solid; }

#foot a {
  color: #282928;
  text-decoration: none;
  font-weight: bold;
  padding: 7px; }

#foot a:hover {
  color: #A9C05A;
  text-decoration: none; }

#disclaimer p {
  font-size: 12px;
  text-align: center; }

#aboutImg img {
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 390px;
  border: #F9F6F6 2px solid; }

.FilterAll, .data-Movement-filter {
  text-decoration: underline;
  cursor: pointer; }

.mobile {
  display: none;
  position: fixed;
  width: 100%;
  top: 0; }

.mobile div {
  display: none; }

.mobile button {
  position: absolute;
  top: 30px;
  right: 15px;
  border: 0;
  text-indent: 200%;
  overflow: hidden;
  background-size: 80%;
  outline: none;
  transition: all 400ms ease;
  background-color: transparent;
  cursor: pointer; }

.mobile button.expanded {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  background-color: transparent;
  border: 0; }

.mobile a {
  display: block; }

.icon-line {
  background-color: #F9F6F6;
  border-radius: 10px;
  display: block;
  height: 4px;
  margin: 0 0 4px;
  width: 35px; }

.navLinkItem {
  background: #D5E6A2;
  text-align: center;
  padding: 6px 0;
  text-decoration: none;
  color: #282928;
  font-weight: bold;
  border-bottom: 2px #282928 solid;
  width: 96%; }

.desktop {
  width: 100%;
  display: block;
  overflow: hidden; }

.desktop a {
  width: 25%;
  float: left;
  box-sizing: border-box; }

.desktop a:last-child {
  border-right: nones; }

article {
  padding: 0 30px 15px; }

* {
  box-sizing: border-box; }

input[type=text], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid clr_pr_light;
  border-radius: 4px;
  resize: vertical; }

label {
  padding: 12px 12px 12px 0;
  display: inline-block; }

input[type=submit] {
  background-color: #A9C05A;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float: right; }

input[type=submit]:hover {
  background-color: #D5E6A2; }

.container {
  border-radius: 5px;
  background-color: clr_pr_light;
  padding: 20px; }

.col-25 {
  float: left;
  width: 25%;
  margin-top: 6px; }

.col-75 {
  float: left;
  width: 75%;
  margin-top: 6px; }

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both; }

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 480px) {
  .col-25, .col-75, input[type=submit] {
    width: 100%;
    margin-top: 0; }

  .mobile {
    display: block; }

  .desktop {
    display: none; } }
@media screen and (max-width: 600px) {
  #about {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 1fr;
    margin: 0 auto; } }