@charset "UTF-8";
* .buttonbox, * .infobox, * .mediabox {
  display: none;
}
.right .buttonbox, .right .infobox, .right .mediabox {
  display: block;
}
/** ButtonBox *****************************************************************************************************************/
.buttonbox {
  background: rgba(69, 69, 69, 0.85);
  transition: all ease 0.5s;
}
.buttonbox * {
  margin: 0;
  padding: 0;
}
.buttonbox h3 {
  font-size: 100%;
  padding: 0.75rem 1rem;
}
.buttonbox a {
  line-height: 1rem;
  color: #fff !important;
  text-transform: uppercase;
  margin: 0;
  transition: all ease 0.5s;
  letter-spacing: 0.01rem;
}
.buttonbox a:after {
  line-height: 1rem;
  font-size: 150%;
  font-style: normal;
  font-family: FontAwesome;
  color: rgba(255, 255, 255, 0.9) !important;
  content: '';
  float: right;
}
.buttonbox a:hover:after, .buttonbox a:hover {
  color: #fff !important;
}
.buttonbox:hover {
  background: #454545;
  box-shadow: 0 2px 10px 0px rgba(0, 0, 0, 0.2);
}
/** infobox *****************************************************************************************************************/
.infobox {
  background: rgba(69, 69, 69, 0.85);
  transition: all ease 0.5s;
  padding: 1rem;
  color: #fff;
}
.infobox * {
  margin: 0;
  padding: 0;
}
.infobox h3 {
  margin-bottom: 0.5rem;
  text-transform: none;
  letter-spacing: 0.01rem;
  color: #fff !important;
  letter-spacing: 0.01rem;
  text-transform: uppercase;
}
.infobox a {
  color: rgba(255, 255, 255, 0.9) !important;
}
.infobox a:hover {
  color: #fff !important;
}
.infobox ul {
  padding-left: 20px;
}
.infobox:hover {
  background: #454545;
  box-shadow: 0 2px 10px 0px rgba(0, 0, 0, 0.2);
}
/** infobox *****************************************************************************************************************/
.mediabox {
  transition: all ease 0.2s;
  color: #323232 !important;
}
.mediabox * {
  margin: 0;
  padding: 0;
}
.mediabox h3 {
  margin-bottom: 0.5rem;
  text-transform: none;
  letter-spacing: 0.01rem;
  text-transform: uppercase;
}
.mediabox ul {
  padding-left: 20px;
}
.mediabox img {
  max-width: 100%;
  height: auto;
}
.mediabox > div {
  padding-top: 10px;
}
.mediabox .stil1 {
  background: white;
  padding: 10px 15px;
}
.mediabox .stil2 {
  background: white;
  padding: 10px 15px 15px;
  border: 1px solid #efefef;
  border-top: 0;
}
.mediabox .stil3 {
  background-color: rgba(76, 62, 62, 0.2);
  padding: 10px 15px;
}
.mediabox .stil4 {
  background-color: #454545;
  padding: 10px 15px;
}
.mediabox .stil4 * {
  color: rgba(255, 255, 255, 0.9);
}
.mediabox:hover {
  background: #454545;
  box-shadow: 0 2px 10px 0px rgba(0, 0, 0, 0.2);
}
/** Color variations **/
.orange .infobox, .orange .buttonbox {
  background: rgba(169, 70, 17, 0.9);
}
.orange .mediabox .stil3 {
  background-color: rgba(178, 67, 8, 0.2);
}
.orange .mediabox .stil4 {
  background-color: #a94611;
}
.blue .infobox, .blue .buttonbox {
  background: rgba(52, 96, 151, 0.85);
}
.blue .mediabox .stil3 {
  background-color: rgba(42, 95, 161, 0.2);
}
.blue .mediabox .stil4 {
  background-color: #346097;
}
.green .infobox, .green .buttonbox {
  background: rgba(64, 108, 3, 0.85);
}
.green .mediabox .stil3 {
  background-color: rgba(64, 111, 0, 0.2);
}
.green .mediabox .stil4 {
  background-color: #406c03;
}
.grey .infobox, .grey .buttonbox {
  background: rgba(153, 153, 153, 0.85);
}
.grey .mediabox .stil3 {
  background-color: rgba(163, 143, 143, 0.2);
}
.grey .mediabox .stil4 {
  background-color: #999;
}
.red .infobox, .red .buttonbox {
  background: rgba(165, 15, 25, 0.85);
}
.red .mediabox .stil3 {
  background-color: rgba(174, 6, 17, 0.2);
}
.red .mediabox .stil4 {
  background-color: #a50f19;
}
.turquoise .infobox, .turquoise .buttonbox {
  background: rgba(29, 114, 95, 0.85);
}
.turquoise .mediabox .stil3 {
  background-color: rgba(22, 121, 99, 0.2);
}
.turquoise .mediabox .stil4 {
  background-color: #1d725f;
}
.violett .infobox, .violett .buttonbox {
  background: rgba(134, 49, 119, 0.85);
}
.violett .mediabox .stil3 {
  background-color: rgba(143, 40, 125, 0.2);
}
.violett .mediabox .stil4 {
  background-color: #863177;
}
.yellow .infobox, .yellow .buttonbox {
  background: rgba(245, 245, 7, 0.85);
}
.yellow .mediabox .stil3 {
  background-color: rgba(252, 252, 0, 0.2);
}
.yellow .mediabox .stil4 {
  background-color: #f5f507;
}