html, body {
    overflow: auto;
}

.page-wrapper{
   -webkit-perspective:2000px;
   -moz-perspective: 2000px;
   -ms-perspective: 2000px;
   perspective: 2000px;
   
   cursor: pointer;
}

.magazine-viewport .depth {
    background-image: url(../images/pages-depth.png);
    position: absolute;
    top: 0%;
    bottom: 0%;
    width: 16px;
   
    background-size: cover;
}

.magazine-viewport .front-side .depth {
    left: -4px;
    background-position: 0 0;
}

.magazine-viewport .back-side .depth {
    right: -4px;
    background-position: right 0;
}




.nav-arrow {
    cursor: pointer;
    top: 0;
    bottom: 0;
    width: 50px;
    cursor: pointer;
    z-index: 10;
    display: none;
    position: absolute;
}

.nav-arrow.arrow-right {
    right: 0;
}

.nav-arrow:before {
    content: "";
    background-color: #cba85c;
    top: 50%;
    margin: -40px 10px 0;
    width: 34px;
    cursor: pointer;
    height: 80px;
    position: absolute;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 10;
}

.nav-arrow.arrow-left:before {
    background-image: url("../images/slider-arrow-left.png");
    left: 0;
}

.nav-arrow.arrow-right:before {
    background-image: url("../images/slider-arrow-right.png");
    right: 0;
}


.magazine {
    z-index: 0;
}

.magazine-viewport {
    width: 100%;
    height: 100%;
    padding: 50px 50px;
    box-sizing: border-box;
}

.magazine-viewport.full {
    padding: 0px;
}

.magazine-viewport .loader{
    background:url(../images/preload.gif) no-repeat center;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: auto;
}



.magazine > div:not(.page-wrapper) {
    z-index: 1000 !important;
}

.magazine div.shadow {
    z-index: auto !important;
}




.turnjs-slider{
	max-width:600px;
        width: 90%;
	height:8px;
	background:rgba(0,0,0, 0.2);
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	-o-border-radius:5px;
	-ms-border-radius:5px;
	border-radius:5px;
	margin:-20px auto;
        position: relative;
}

.turnjs-slider .thumbnail{
	width:115px;
	height: auto; /*85px;*/
	position:absolute;
	z-index:10000;
	top:-100px;
	left:-17px;
	display:none;

	-webkit-transform:translate3d(0px, 50px, 0px) scale(0.1, 0.1);
	-webkit-transition:all 0.2s, width 0s, left 0s;

	-moz-transform:translate3d(0px, 50px, 0px) scale(0.1, 0.1);
	-moz-transition:all 0.2s, width 0s, left 0s;

	-o-transform:translate3d(0px, 50px, 0px) scale(0.1, 0.1);
	-o-transition:all 0.2s, width 0s, left 0s;

	-ms-transform:translate3d(0px, 50px, 0px) scale(0.1, 0.1);
	-ms-transition:all 0.2s, width 0s, left 0s;

	transform:translate3d(0px, 50px, 0px) scale(0.1, 0.1);
	transition:all 0.2s, width 0s, left 0s;

}

.no-transition{
	-webkit-transition:none;
	-moz-transition:none;
	-o-transition:none;
	-ms-transition:none;
}

.turnjs-slider .thumbnail {
   -webkit-transition: -webkit-box-shadow .5s;
    -moz-transition: -moz-box-shadow .5s;
    -o-transition: -webkit-box-shadow .5s;
    -ms-transition: -ms-box-shadow .5s;
    -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.2); 
    -moz-box-shadow: 0 0 5px rgba(0,0,0,0.2); 
    -o-box-shadow: 0 0 5px rgba(0,0,0,0.2); 
    -ms-box-shadow: 0 0 5px rgba(0,0,0,0.2); 
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
    border: 2px solid #666;
    border-radius:2px;
    overflow: hidden;
}

.turnjs-slider .ui-state-hover .thumbnail{
	display:block;
	opacity:0;
}

.turnjs-slider .ui-state-active .thumbnail{
	display:block;
	opacity:1;
	-webkit-transform:scale(1, 1);
	-moz-transform:scale(1, 1);
	-o-transform:scale(1, 1);
	-ms-transform:scale(1, 1);
	transform:scale(1, 1);
}

.turnjs-slider .pages1 span {
    display: inline-block;
    width: 100%;
    height: 100%;
    background-size: cover;
}

.turnjs-slider .pages2 span {
    display: inline-block;
    width: 50%;
    height: 100%;
    background-size: cover;
}

/* Layout helpers
----------------------------------*/

/* Interaction Cues
----------------------------------*/
.ui-state-disabled {
	cursor: default !important;
}


/* Misc visuals
----------------------------------*/

/* Overlays */
.turnjs-slider .ui-widget-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.turnjs-slider .ui-slider {
	position: relative;
	text-align: left;
        border: 0;
}

.turnjs-slider .ui-slider-handle{
	position: absolute;
	z-index:0;
	width:80px;
	height: 8px;
	cursor: default;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	-ms-border-radius:5px;
	border-radius:5px;
}

.turnjs-slider .ui-slider-horizontal {
	height: 8px;
	width:520px;
	margin-left:39px;
        background: none;
}

.turnjs-slider .ui-slider-horizontal .ui-slider-handle {
	margin-left:-40px;
	margin-top:0px;
        top: 0;
}

/* Interaction states
----------------------------------*/
.turnjs-slider .ui-slider-handle{
	border:1px solid white;
	background-color:black;
	opacity:0.2;
	display:block;
	-webkit-transition:opacity 0.2s;
	-moz-transition:opacity 0.2s;
	-ms-transition:opacity 0.2s;
	-o-transition:opacity 0.2s;
	transition:opacity 0.2s;
}

.turnjs-slider .ui-state-hover{
	opacity:0.4;
}

.turnjs-slider .ui-state-active{
	opacity:1;
}







.kronika-box {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    text-align: center;
}

.toplayer-bg:after {
    content: '';
    background: url(../images/bg1.jpg) center no-repeat;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0.2;
}




.kronika-box.loaded {
    background-image: none;
    background: #FFF;
}

/*
.kronika-box:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../images/bg1.jpg) center no-repeat;
    background-size: cover;
    opacity: 0.2;
}
*/


/* mobile */
@media screen and (min-width: 320px) {
    /*
            body:before {
                    content:"320px";
            }
    */


}

/* iPhone, etc landscape ---- */
@media only screen and (min-width: 480px) {
    /*
            body:before {
                    content:"480px";
            }
    */


}

@media only screen and (min-width: 650px) {
    /*
            body:before {
                    content:"480px";
            }
    */


    .nav-arrow:before {
        width: 44px;
    }

}


/* iPad, tablets etc portrait ---- */
@media screen and (min-width: 768px) {
    /*
            #body { border:3px solid #33CC66; }
    */

    #icon_overview li {
        width: 50%;
    }


}



/* Laptops, Desktops, etc ---- */
@media screen and (min-width: 1100px) {

    /*
            body:before {
                    content:"1024px";
            }
    */
  

}


/* Desktop */
@media screen and (min-width: 1440px) {
    /*
            body:before {
                    content:"1280px";
            }
    */

}

@media screen and (min-width: 1680px) {
    /*
            body:before {
                    content:"1680px";
            }
    */

}