/* rdc css html, body and main
*/

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

.body {
  margin: 0;
  font-family: Arial;
  font-size: 17px;
}

.main {
  max-width: 1350px;
  margin: auto;
  font-size: 20px;
}

h1 {
  font-size: 40px;
  word-break: break-all;
}

.brdr {
  border-style: solid;
  border-width: 0px 0px 0.5px 0px; /* 25px top, 10px right, 4px bottom and 35px left */
}

a.anchor {
    display: block;
    position: relative;
    top: -130px;
    visibility: hidden;
}

/* SI colours */

.si-red { color: #d2131d; }
.si-purple { color: #ede7f6; }
.si-blue { color: #e3f2fd; }
.si-grey-200 { color: #eeeeee; }
.white { color: #ffffff; }
.black { color: #000000; }
.si-indigo-txt { color: #283593; }

/* Create three equal columns that floats next to each other */
.si-column {
  float: left;
  width: 33.33%;
  padding: 10px;
  height: 300px; /* Should be removed. Only for demonstration */
}

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

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .si-column {
    width: 100%;
  }
}





/* rdc: flex containers row, columns
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
display: flex; /* or inline-flex */    /*
flex-direction: row | row-reverse | column | column-reverse;
flex-wrap: nowrap | wrap | wrap-reverse;
    nowrap (default): all flex items will be on one line
    wrap: flex items will wrap onto multiple lines, from top to bottom.
    wrap-reverse: flex items will wrap onto multiple lines from bottom to top.
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
    stretch (default): stretch to fill the container (still respect min-width/max-width)
    flex-start / start / self-start: items are placed at the start of the cross axis. The difference between these is subtle, and is about respecting the flex-direction rules or the writing-mode rules.
    flex-end / end / self-end: items are placed at the end of the cross axis. The difference again is subtle and is about respecting flex-direction rules vs. writing-mode rules.
    center: items are centered in the cross-axis
    baseline: items are aligned such as their baselines align
align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
*/

.flex-container-row {
  display: flex;
  flex-flow: row wrap;
}

.flex-container-column {
  display: flex;
  flex-wrap: wrap;
}

.flex-container-column .fl-column {
  flex: 1 0;
  padding: 20px;
  margin: 10px;
/*  margin-top: 10px;
  margin-bottom: 10px; */
  text-align: justify;
}
 
.flex-container-column .fl-column-nb {
  flex: 1 0 ;
  padding: 10px;
  text-align: justify;
} 

.flex-container-row-nowrap {
  display: flex;
  flex-flow: row nowrap;
}

.flex-container-row-center {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}

.flex-container-row-spacearound {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
}

.flex-container-reverse-row {
  display: flex;
  flex-flow: row-reverse wrap;
}

.flex-container-rev-row-spacearound {
  display: flex;
  flex-flow: row-reverse wrap;
  justify-content: space-around;
}

/* rdc: flex items */

.flex-item {
  padding: 50px;
  margin-top: 10px;
}

.flex-item-justify {
  padding: 50px;
  margin-top: 10px;
  text-align: justify;
}

.flex-item-center {
  padding: 50px;
  margin-top: 10px;
  text-align: center;
}

.flex-item-300 {
  padding: 20px;
  width: 300px;
  margin-top: 10px;
}

.flex-item-300-justify {
  padding: 50px;
  width: 300px;
  margin-top: 10px;
  text-align: justify;
}

.flex-item-300-center {
  padding: 50px;
  width: 300px;
  margin-top: 10px;
  text-align: center;
}


.flex-item-500-justify {
  padding: 50px;
  width: 500px;
  margin-top: 10px;
  text-align: justify;
}

.flex-item-500-center {
  padding: 50px;
  width: 500px;
  margin-top: 10px;
  text-align: center;
}

/* Filter elements: The "show" class is added to the filtered elements */
.show {
  display: block;
}

/* Masonry addition
https://masonry.desandro.com 
*/

.grid-item { width: 337px;
  padding: 20px;
  text-align: justify;
}

.grid-item--width2 { width: 400px; }

/* rdc: Columns within the containers */

.col-md-12{width:100%}
.col-md-11{width:91.66666667%}
.col-md-10{width:83.33333333%}
.col-md-9{width:75%}
.col-md-8{
    width:66.66666667%;
/*    margin-top: 30px;
    margin-bottom: 30px */
}
.col-md-7{width:58.33333333%}
.col-md-6{width:50%}
.col-md-5{width:41.66666667%}
.col-md-4{
    width:33.33333333%;
/*    margin-top: 30px;
    margin-bottom: 30px */
}
.col-md-3{width:25%}
.col-md-2{width:16.66666667%}
.col-md-1{width:8.33333333%}

/* rdc: Menu buttons */

.grid-btn {
  border: 2px solid white;
  background-color: white;
  color: black;
  padding: 14px 15px;
  font-size: 18px;
  cursor: pointer;
  border-radius: 10px;
  z-index: 1;
  position: relative;
}

.grid-btn:hover {
  background: #eeeeee;
  color: black;
  z-index: 1;
  position: relative;
}

.menu-btn {
  border: 1px solid white;
  background-color: white;
  color: black;
  padding: 14px 15px;
  font-size: 18px;
  cursor: pointer;
}

.menu-btn:hover {
  background: #d2131d;
  color: white;
}

/* rdc: red buttons with rounded sides */

.red-btn {
  border: 3px solid #d2131d;
  background-color: white;
  color: #d2131d;
  padding: 14px 28px;
  font-size: 20px;
  cursor: pointer;
  border-radius: 10px;
}

.red-btn:hover {
  background: #d2131d;
  color: white;
}