/*=============================================================================
Iconbox
=============================================================================*/
.iconbox {
    padding-left: 1.75%;
	padding-right: 1.75%;
}
.iconbox2 {
	padding: 2.5%;
	margin-bottom: 2.5rem;
}
.iconbox figure {
    position: relative;
    left: 20%;
    width: 60%;
    height: auto;
    border-radius: 100%;
    overflow: hidden;
    background-color: #fff;
    box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.2);
}
.iconbox figure img {
	width: 110%;
	height: 110%;
}
.iconbox.content-text {
	overflow: visible; 
}

.iconbox .rte {
	margin-top: -100px;
	padding: 120px 1.75% 2rem 1.75%;
	text-align: center;
}


.iconbox.content-text .icon2 {
    position: absolute;
    top: 2px;
    left: 20px;
    width: 80px;
    height: 80px;
    border-radius: 100%;
    background-color: #fff;
    font-size: 32px;
    line-height: 80px;
    text-align: center;
    box-shadow: 0 0 3px 0px rgba(0, 0, 0, 0.2);
}
.rot.iconbox.content-text p:last-child a, 
.blau.iconbox.content-text p:last-child a, 
.apricot.iconbox.content-text p:last-child a, 
.grau.iconbox p:last-child a {
    display: inline-block;
    padding: 6px 12px;
    border: 2px solid #ffffff;
    color: #ffffff;
    font-size: 0.9em;
    text-decoration: none;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px transparent;
    position: relative;
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
}
.rot.iconbox.content-text p:last-child a:before,
.blau.iconbox.content-text p:last-child a:before,
.apricot.iconbox.content-text p:last-child a:before,
.grau.iconbox.content-text p:last-child a:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #ffffff;
    color: #5a5a5a;
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

.iconbox2.content-text {
  color: #fff;
  text-align: left;
}
.iconbox2 h2 {
    color: #fff;
    border-bottom: 1px solid #fff;
}

.grau.iconbox2,
.grau.iconbox .rte {
	background: #a5a5a0;
}
.apricot.iconbox2,
.apricot.iconbox .rte {
    background: #d38c76;
}
.blau.iconbox2,
.blau.iconbox .rte {
    background: #8babb8;
}


.bg-apricot.iconbox .icon {
  color: #b47361;
}
.bg-red.iconbox .icon {
  color: #9e1d48;
}
.grau.iconbox .icon {
  color: #a5a5a0;
}
.blau.iconbox .icon {
  color: #8babb8;
}
.bg-pink.iconbox,
.bg-pink.iconbox .text {
    background: #9e1d48;
    color: #fff;
}
.bg-rot.iconbox,
.bg-rot.iconbox .text,
.bg-rot .innertext {
    background: #9c484d;
    color: #fff;
}

.bg-blau h2,
.bg-apricot h2,
.bg-grau h2,
.br-rot h2,
.bg-pink h2 {
	color: #fff;
}
.rot h2, .blau h2, .grau h2, .apricot h2,
.rot h3, .blau h3, .grau h3, .apricot h3 {
	color: #fff;
}






/*=============================================================================
IMAGEHOVERBOX
=============================================================================*/
.imagehoverbox figure {
	position: absolute;
	top: 0;
	z-index: 1;
}
.imagehoverbox h4 {
	width: 100%;
	padding: 10px;
	background-color: rgba(0,0,0,0.5);
	position: absolute;
	top: 20%;
	z-index: 2;
	color: #fff;
}