/* Enter Your Custom CSS Here */
/* Kader Overlay-Effekt Juni 2020 */
.head {
  width: 250px;
  background-color: #0057b1;
  font-family: Arial;
  font-weight: normal;
  font-size: 14px;
  color: #ffffff;
  text-align: center;
  letter-spacing: 1px;
  padding: 4px 4px 4px 4px;
  margin-bottom: -25px;
  border-left: 15px solid #223f95;
  border-right: 15px solid #223f95;
  border-radius: 5px;
}

.headbar {
  width: 200px;
  margin: auto;
  background-color: #0057b1;
  font-family: Arial;
  font-weight: normal;
  font-size: 14px;
  color: #ffffff;
  text-align: center;
  letter-spacing: 1px;
  padding: 4px 4px 4px 4px;
  margin-bottom: -25px;
  border-radius: 5px;
}

* {box-sizing: border-box;}

/* Kaderbox Herren und Nachwuchs */
.kaderbox {
  position: relative;
  width: 200px;
  max-width: 250px;
  float: left;
	margin-bottom: 10px;
}

.kaderboximage {
  display: block;
  width: 180px;
  height: auto;
  border-radius: 10px 10px 10px 10px;
  border: 1px solid #223F95;	
}

.kaderboxoverlay {
  position: absolute;
  bottom: 0;
  background: rgb(35, 62, 148);
  background: rgba(35, 62, 148, 0.8); /* Black see-through */
  color: #f1f1f1;
  width: 180px;
  transition: .2s ease;
  opacity:0;
  color: white;
  font-size: 15px;
  border-radius: 0 0 10px 10px;
  padding: 15px;
  text-align: center;
}

.kaderbox:hover .kaderboxoverlay {
  opacity: 1;
}

/* Overlay und Hover Herren */
.kaderboxoverlayherren {
  position: absolute;
  top: 0;
	bottom: 0;	
  background: rgb(35, 62, 148);
  background: rgba(35, 62, 148, 0.8); /* Black see-through */
  color: #f1f1f1;
  width: 180px;
  transition: .2s ease;
  opacity:0;
  color: white;
  font-size: 15px;
  border-radius: 10px 10px 10px 10px;
  padding: 15px; 
	text-align: center;
}

.kaderbox:hover .kaderboxoverlayherren {
  opacity: 1;
}

/* Link Infokarte Herren und Nachwuchs */
a.kader:link
{
color:#ffffff;
text-decoration:none;
}

a.kader:visited
{
color:#ffffff;
text-decoration:none;
}

a.kader:hover
{
color:#ffffff;
font-weight:bold;
font-size:1.1em;
text-decoration:none;
}

/* FontAwesome Icons Herren */
p.fontAwesome {position:relative; margin-bottom: 2px; }

p.ball:before {content: "\f1e3"; padding-left: 5px;} /* Ball */
p.hashtag:before {content: "\f292"; padding-left: 5px;} /* Hashtag */
p.asterisk:before {content: "\f069"; padding-left: 5px;} /* Asterisk */
p.location:before {content: "\f124"; padding-left: 5px;} /* Location */
p.circle:before {content: "\f2bd"; padding-left: 5px; } /* Circle */
p.calendar:before {content: "\f133"; padding-left: 5px; } /* Calendar-Day */
p.file-pdf:before {content: "\f1c1"; padding-left: 5px; } /* File-PDF */
p.safe:before {content: "\f0c7"; padding-left: 5px; } /* Safe */
p.trophy:before {content: "\f091"; padding-left: 5px;} /* Trophy */
p.camera:before {content: "\f030"; padding-left: 5px;} /* Camera */

p.fontAwesome:before {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
font-family: FontAwesome;
font-size: 1.1em;
font-weight: normal;
color: #FFFFFF; }

/* Selectbox Ticker-Archiv */
.selectbox {
  position: relative;
  width: 300px;
  max-width: 350px;
  float: left;
  margin-bottom: 10px;
}

/* Echobox */
.echobox {
  position: relative;
  width: 200px;
  max-width: 250px;
  float: left;
	margin-bottom: 10px;
}

.echoboximage {
  display: block;
  width: 180px;
  height: auto;
  border-radius: 0 0 0 0px;
  border: 0px solid #223F95;	
}


/* Overlay und Hover Echo */
.echoboxoverlay {
  position: absolute;
  top: 0;
	bottom: 0;	
  background: rgb(35, 62, 148);
  background: rgba(35, 62, 148, 0.8); /* Black see-through */
  color: #f1f1f1;
  width: 180px;
  transition: .2s ease;
  opacity:0;
  color: white;
  font-size: 15px;
  padding: 15px; 
	border-radius: 0 0 0 0;
	text-align: center;
}

.echobox:hover .echoboxoverlay {
  opacity: 1;
}

/* Galeriebox */
.galeriebox {
  position: relative;
  width: 300px;
  max-width: 350px;
  float: left;
  margin-bottom: 10px;
}

.galerieboximage {
  display: block;
  width: 285px;
  height: auto;
  border-radius: 10px 10px 10px 10px;
  border: 1px solid #223F95;
}

.galerieboxoverlay {
  position: absolute;
  bottom: 0;
  background: rgb(35, 62, 148);
  background: rgba(35, 62, 148, 0.8); /* Black see-through */
  color: #f1f1f1;
  width: 285px;
  transition: .2s ease;
  opacity:0;
  color: white;
  font-size: 15px;
  border-radius: 0 0 10px 10px;
  padding: 15px;
  text-align: center;
}

.galeriebox:hover .galerieboxoverlay {
  opacity: 1;
}
