#rc-box {
font-family: "DIN Pro", Arial, sans-serif!important;
}

.rc-red {
font-family: "DIN Pro", Arial, sans-serif!important;
color: rgb(226, 0, 26)!important;
}
.rc-black {
font-family: "DIN Pro", Arial, sans-serif!important;
color: rgb(0, 0, 0)!important;
}
.text-box p {
font-family: "DIN Pro", Arial, sans-serif!important;
font-weight: 300;
}
.text-box ul {
font-family: "DIN Pro", Arial, sans-serif!important;
font-weight: 300;
margin-left: 50px;
}
.post-category {
border-bottom: 2px solid #666666!important;
color: rgb(226, 0, 26)!important;
margin: 0 10px 15px 10px;
}

#portfolio-navigation a:hover {
color: rgb(226, 0, 26)!important;
}
.rc-post-title {
font-size: 40px;
font-weight: 300;
font-family: "DIN Pro", Arial, sans-serif;
color: rgb(226, 0, 26)!important;
Margin-bottom: 10px;
}
.rc-post-sub-title {
font-size: 20px;
font-weight: 300;
margin: 0 0 20px 0;
}

.post-title {
margin: 15px 10px 0 10px;
}
.post-title a {
font-size: 30px;
font-weight: 300;
font-family: "DIN Pro", Arial, sans-serif;
color: rgb(226, 0, 26)!important;
}


.post-sub-title {
font-size: 20px;
font-weight: 300;
margin: 0 10px 20px 10px;
}
.rc-post-summary {
font-size: 18px;
font-weight: 500;
margin: 0 0 35px 0;
}
.rc-sub-head {
font-size: 24px;
font-weight: 300;
color: rgb(226, 0, 26);
margin: 0 0 20px 0!important;
}
#lang {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1em;
  border-bottom: 1px solid #333;
  padding: 30px 0;
  margin: 0 0 30px 0;
}
#lang-bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1em;
}
#icons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1em;

  padding: 0;
  margin: -60px 0 50px 0;
}
#icons-wcc {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1em;

  padding: 0;
  margin: 20px 0 50px 0;
}
#icons img {
width: 8%;
}
#icons-wcc img {
width: 8%;
}
.red-outline a {
margin-top: 0px;
margin-bottom: 1.25rem;
}
.red-outline-current {
background-color: rgb(226, 0, 26)!important;
color: rgb(255, 255, 255)!important;
}
/* white button - red border */
.red-outline {
background-color: rgb(255, 255, 255);
border-color: rgb(226, 0, 26);
border-width: 2px;
border-radius: 2em;
border-style: solid;
color: rgb(226, 0, 26);
cursor: pointer;
font-family: "DIN Pro", Arial, sans-serif;
font-size: 1rem;
font-weight: 500;
line-height: 1.625rem;
max-width: 100%;
overflow-x: hidden;
overflow-y: hidden;
padding: 0.5625rem 2rem;
position: relative;
text-align: center;
text-decoration-line: none;
display: inline-block;
width: auto;
}
a.red-outline.btn:hover {
background-color: rgb(226, 0, 26);
color: rgb(255, 255, 255)!important;
}
/* red button */
.red-solid {
appearance: none;
background-color: rgb(226, 0, 26);
border-color: rgb(226, 0, 26);
border-width: 2px;
border-radius: 2em;
border-top-style: solid;
color: rgb(255, 255, 255);
cursor: pointer;
font-family: "DIN Pro", Arial, sans-serif;
font-size: 1rem;
font-weight: 500;
line-height: 1.625rem;
max-width: 100%;
overflow-x: hidden;
overflow-y: hidden;
padding: 0.5625rem 2rem;
position: relative;
text-align: center;
text-decoration-line: none;
display: inline-block;
width: auto;
}
a.red-solid.btn:hover {
background-color: rgb(255, 255, 255);
color: rgb(0, 0, 0)!important;
}
.gold-box {
display: flex;
position: relative;
flex-direction: column;
border: 3px solid rgb(226, 174, 73);
border-radius: 0.75rem;
padding: 1rem;
background-color: rgb(255, 255, 255);
}
#rc.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus {
color: #FFF !important;
background-color: rgb(226, 0, 26) !important;
border-color: rgb(226, 0, 26) !important;
}
#rc.pagination > li > a, .pagination > li > span, .pagination > li > a:hover, .pagination > li > span:hover, .pagination > li > a:focus, .pagination > li > span:focus {
color: rgb(226, 0, 26)!important;
}
.red-box {
display: flex;
position: relative;
flex-direction: column;
border: 1px solid rgb(226, 0, 26);
padding: 2.5rem;
}
.key-title {
font-size: 26px;
font-weight: 300;
color: rgb(226, 0, 26);
}
.key-text {
font-family: "DIN Pro", Arial, sans-serif;
font-size: 16px!important;
font-weight: 300!important;
line-height: 24px!important;
border-bottom: 1px solid #eee;
padding-bottom: 30px;
}
.author-title {
font-family: "DIN Pro", Arial, sans-serif;
font-size: 26px;
font-weight: 300;
color: rgb(226, 0, 26);
margin-bottom: 0;
}
.author-quals {
font-family: "DIN Pro", Arial, sans-serif;
font-weight: 500;
}
.author-text {
font-family: "DIN Pro", Arial, sans-serif;
font-weight: 300;
}
/**
 * Make images responsive
 */
.flex .col img {
	width: 100%;
	height: auto;
}

/**
 * Make .flex children same
 * height using display flex.
 * Justify property prepares
 * cols for being centered.
 */
.flex {
	display: flex;
	justify-content: center;
	/*
	width: 960px;
	*/
	max-width: 100%;
	margin: auto;
	flex-wrap: wrap;
}

/**
 * Make cols flexible to
 * auto push button at the
 * col bottom.
 */
.flex .col {
	display: flex;
	flex-direction: column;
	flex: 0 1 250px;
	/* 
	In the order, equal to
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: 300px;
	*/
	margin: 2em 1em;
  box-shadow: 0 5px 10px -5px #888;
  padding: 0 0 25px 0;
}

/**
 * Margin-top auto pushes
 * button to bottom.
 * Align self makes button
 * stuck to the left.
 */
.flex .col .btn {
	align-self: flex-start;
	margin-top: auto;
}

/**
 * Under 900px wrap cols
 */
 /*
@media (max-width: 900px) {
	.flex {
		flex-wrap: wrap;
	}
}