/* TODO siirrä nämä figuret oikeaan paikkaansa */
.contentarea figure img {
    max-width: 100% !important;
    min-width: 75px !important;
}
.contentarea figure {
    max-width: 100% !important;
}

figure.center-mobile-float-small {
	display: block;
	float: left;
	width: 100%;
}
figure.center-mobile-float-small img {
	display: block;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

/* @group Image labels */

.label[data-label] {
	padding:initial !important;
	font-size:initial !important;
	font-weight: initial !important;
	line-height: initial !important;
	color: initial !important;
	text-shadow:initial !important;
	white-space:initial !important;
	vertical-align: initial !important;
	background-color: initial !important;
	border-radius: initial !important;

    position: relative;
    font-family: Arial;
    margin: auto;
    display: inline-block;
    width: auto; 
    overflow: hidden;
}


.label[data-label].fade {
    opacity: 1 !important;
}

.label[data-label].rtl:after,
.label[data-label].rtl:before,
.label[data-label]:after,
.label[data-label]:before { 
    position: absolute;    
    height: auto;
    width: 100%;
    display: block;
    color: #fff;
    padding: 5px 3% 5px 3%;
    font-size: 12px;
    background:rgba(0, 0, 0, 0.70);    
    content:attr(data-label);    
}

/* we don't neeed these to show. */
.label[data-label].top:after,
.label[data-label].bottom:before,
.label[data-label].inside.middle:before
 { 
    display: none;
}
/* top positions*/
.label[data-label].inside.top:before {
    top: 0px;
}
/* bottom positions*/
.label[data-label].bottom:after { 
    bottom:1%;
}
/* middle positions */
.label[data-label].inside.middle:after {
    top: 45%;
}

/* Left or Right Axis */
.label[data-label].inside.left:after,.label[data-label].inside.left:before {
    float: left;
    width: auto;
    left: 0px;
}

.label[data-label].inside.right:after,.label[data-label].inside.right:before { 
    float: right;
    width: auto;
    right: 0px;
}

/* Outside Positions basics */
.label[data-label].outside {
    overflow: initial;
    opacity: 1;
    visibility: visible;

}
.label[data-label].outside:after,
.label[data-label].outside:before { 
    position: relative;
    background: none;
}
.label[data-label].outside:after {
    margin-bottom: -5%;
}
.label[data-label].outside:before {
    margin-top: -5%;
}


/* fade effect */
.label[data-label].fade:after,
.label[data-label].fade:before,
.label[data-label].float:after,
.label[data-label].float:before {
	transition:all 0.25s ease;
}
.label[data-label].fade:after,
.label[data-label].fade:before {
    opacity: 0;
    visibility: hidden;
}
.label[data-label].fade:hover:after,
.label[data-label].fade:hover:before {
    opacity: 1;
    visibility: visible;
    display: block;
    width: 100%;
}

/* float effect */
.label[data-label].inside.top.float:before {
    top: -15px;
}
.label[data-label].inside.top.float:hover:before {
    top: 0;
}
.label[data-label].inside.bottom.float:after {
    bottom: -5px;
}
.label[data-label].inside.bottom.float:hover:after {
    bottom: 5px;
}
.label[data-label].inside.middle.float:after {
    margin-top: 20px;
}
.label[data-label].inside.middle.float:hover:after {
    margin-top: 0px;
}
.label[data-label].outside.top.float:before { 
    top: 10px;
}
.label[data-label].outside.top.float:hover:before {
    top: 0px;
}
.label[data-label].outside.bottom.float:after { 
    top: -10px;
}
.label[data-label].outside.bottom.float:hover:after {
    top: 0px;
}

.label[data-label].float:after,
.label[data-label].float:before {
    opacity: 0;
    visibility: hidden;
}

.label[data-label].float:hover:after,
.label[data-label].float:hover:before {
    opacity: 1;
    visibility: visible;
}

/* @end */

@media only screen and (max-width: 719px) {

figure.center-mobile-float-small {
	display: block;
	float: left;
	width: auto;
	max-width: 120px;
}
figure.center-mobile-float-small img {
	display: block;
	text-align: left;
	margin-left: 0;
	margin-right: 30px;
	max-width: 120px;
}
}