@charset "utf-8";
/*
*  The .sino-info-img-wrapper and img styles should be
*  changed to suit your project. The only crucial
*  properties are the opacity values and CSS3 transitions
*  defined on the img tags.
*/

.sino-info-img-wrapper {
  position: relative;
  overflow: hidden;
  line-height: 0;
}

.sino-info-img-wrapper img{
    max-width: 100%;
    opacity: 0;

    -webkit-transition: opacity .5s;
    -moz-transition: opacity .5s;
    -ms-transition: opacity .5s;
    transition: opacity .5s;
}

.sino-info-img-wrapper.loaded img{
    opacity: 1;
}

.sino-info-img-wrapper.loaded .css_spinner{
    display: none;
}

/*
* CSS loading spinner styles for second example.
* You could also use a background image .gif
* on the img_wrapper, or any rotating element.
*/
.sino-info-img-wrapper ion-spinner {
	position: absolute;
	width: 48px;
	height: 48px;
	left: 50%;
	top: 50%;
	margin: -24px 0 0 -24px;
	opacity: 0.5;
}

.sino-info-img-wrapper.loaded ion-spinner {
	display: none;
}
