.mainblock{
	padding-bottom:110px;
}
.mainblock .content {
    padding: 0px;
}

.gallery {
    position: relative;
    width: 100%;
    padding-bottom: 59.854%;
    height: 0;
}
body.phone .gallery {
	padding: 0;
	height: calc( (100vw - 24px) * 0.59854 );
	opacity:0;
}

.gallery .scrollable{
	width: 100%;
    height: 100%;
    position: absolute;
 	overflow: hidden;
	left: 0;
	background: #cccccc;
}


.gallery .scrollable .items{
    clear: both;
    position: absolute;
    width: 20000em;
}
.gallery .scrollable .items > div.item{
	float:left;
    width: 1px;
    height: 100%;
	position: relative;
}
.gallery .scrollable .items > div.item > div,
.gallery .scrollable .slide{
	width: 100%;
    height: 100%;
    position: absolute;
 	overflow: hidden;
	left: 0;
    background: url("../images/trans.gif") no-repeat scroll center center transparent;
    background-size: cover;
}


.gallery .browser{
    position: absolute;
    left 0;
    top: 0;
    right:0;
    width: 100%;
	z-index:500;
}
.gallery .browser a{
    position: absolute;
    left: 0;
    top: 0;
    display: block;
	width:60px;
	height: 100%;
    background: url("../images/Left-arrow.png") no-repeat scroll center center transparent;
    cursor: pointer;
    opacity: 0.2;
}
.gallery .browser a.next{
    background: url("../images/Right-arrow.png") no-repeat scroll center center transparent;
    left: auto;
    right: 0;
}
.gallery:hover .browser a{
    opacity: 0.5;
}
.gallery .browser a:hover{
    opacity: 1;
}
.gallery .preload{
    display: inline;
    height: 0;
    width: 0;
}


.gallery .navi{
    position: absolute;
    left 0;
    bottom: 0;
    right:0;
    width: 100%;
	height: 20px;
	text-align: center;
	z-index:500;
}
.gallery .navi a{
    display: inline-block;
	height: 12px;
	width: 12px;
	background-color: rgba(234, 234, 234, 0.5);
	border-radius: 6px;
	margin: 0 4px;
}
.gallery .navi a:hover{
	background-color: rgba(255, 255, 255, 0.5);
}
.gallery .navi a.cycle-pager-active{
	background-color: rgba(234, 234, 234, 1);;
}




@media screen and (orientation: landscape) { 
	body.phone .gallery{
		width: 50%;
	    padding-bottom: 29.927%;
	    margin: auto;
	}
}

body.phone .page {
    padding: 60px 12px 0 12px;
    position: relative;
}

.scrollable > img,
.scrollable > div.slide{
	transform: scale(1.1);
    -webkit-transform: scale(1.1);
	opacity: 0 !important;
    transition:  opacity 2.0s ease-out 0s, transform 2s step-end 0s;
   -webkit-transition:  opacity 2.0s ease-out 0s, -webkit-transform 2s step-end 0s;
   float: left;
}

.scrollable > img.cycle-slide-active,
.scrollable > div.slide.cycle-slide-active{
	transform: scale(1.0);
	-webkit-transform: scale(1.0);
	opacity: 1 !important;
    transition:  opacity 2.0s ease-out 0s, transform 2s ease-out 0s;
    -webkit-transition:  opacity 2.0s ease-out 0s, -webkit-transform 2s ease-out 0s;
}