.c-stage {position: relative; margin: 0 -50px; overflow: hidden;}
.c-stage__item {position: absolute;}
.c-stage__wrap {position: absolute; }
.c-stage__image {display: none; width: 100%; height: auto;}

.c-stage__play-button {
    content:"\0020";
    display: block;
    background: url(../img/icon-play.png) center center no-repeat;
    background-size: 130px 130px;
    width: 130px;
    height: 130px;
    position: absolute;
    z-index: 10;
    top: 50%;
    left: 50%;
    margin: -106px 0 0 -65px;
    opacity: 0.7;
    transition: all 0.3s ease-in-out;
}

.c-stage__play-button:hover:before {
    opacity: 1;
}

/******************************************
FRONT / INTRO
*******************************************/
.c-stage--front {
	height: 388px;
	top:-50px;
}

.c-stage--intro {
	height: 388px;
}

.c-stage__fence {
	z-index: 1;
	top: 190px;
	left: 26px;
    width: 1148px;
    height: 126px;
    background: url(../img/stages/front/fence.jpg) top left no-repeat;
    background-size: 1148px 126px;
}

.c-stage__notebook {
	z-index: 2;
    top: 0px;
    left: 300px;
    width: 601px;
    height: 364px;
    background: url(../img/stages/front/notebook.png) top left no-repeat;
    background-size: 601px 364px;
}

.c-stage__vase {
	z-index: 2;
    top: 216px;
    left: 10px;
    width: 66px;
    height: 109px;
    background: url(../img/stages/front/vase.png) top left no-repeat;
    background-size: 66px 109px;
}

.c-stage__tree {
	z-index: 2;
	top: 142px;
    left: 1094px;
    width: 86px;
    height: 186px;
    background: url(../img/stages/front/tree.png) top left no-repeat;
    background-size: 86px 186px;
}

.c-stage__fishman {
	top: 139px;
	left: 892px;
	z-index: 2;
    background: url(../img/stages/front/fishman.png) top left no-repeat;
    background-size: 231px 215px;
    width: 231px;
    height: 215px;
}


.c-stage__cat {
	z-index: 3;
	top: 284px;
	left: 1009px;
    width: 80px;
    height: 51px;
    position: absolute;
    background: url(../img/stages/front/cat.png) top left no-repeat;
    background-size: 80px 51px;
}


.c-stage__crow {
	z-index: 4;
    top: 257px;
    left: 1060px;
    width: 76px;
    height: 61px;
    background: url(../img/stages/front/crow.png) top left no-repeat;
    background-size: 76px 61px;
}


.c-stage__oldman {
	z-index: 3;
    top: 5px;
    left: 750px;
    width: 116px;
    height: 356px;
    background: url(../img/stages/front/oldman.png) top left no-repeat;
    background-size: 116px 356px;
}

.c-stage__drawer {
	z-index: 3;
    top: 165px;
    left: 77px;
    width: 147px;
    height: 187px;
    background: url(../img/stages/front/drawer.png) top left no-repeat;
    background-size: 147px 187px;
}

.c-stage__poet {
	z-index: 4;
    top: 89px;
    left: 177px;
    width: 198px;
    height: 287px;
    background: url(../img/stages/front/poet.png) top left no-repeat;
    background-size: 198px 287px;
}

.c-stage__fairy {
	z-index: 3;
    top: 0px;
    left: 307px;
    width: 81px;
    height: 130px;
    background: url(../img/stages/front/fairy.png) top left no-repeat;
    background-size: 81px 130px;
}

.c-stage__gnome {
	z-index: 5;
	top: 255px;
    left: 443px;
    width: 139px;
    height: 125px;
    background: url(../img/stages/front/gnome.png) top left no-repeat;
    background-size: 139px 125px;
}


.c-stage__pot {
	z-index: 5;
	top: 297px;
	left: 611px;
    width: 119px;
    height: 87px;
    background: url(../img/stages/front/pot.png) top left no-repeat;
    background-size: 119px 87px;
}

.c-stage__boy {
	z-index: 5;
	top: 144px;
    left: 830px;
    width: 85px;
    height: 244px;
    background: url(../img/stages/front/boy.png) top left no-repeat;
    background-size: 85px 244px;
}

.c-stage__plane {
	z-index: 5;
	top: 52px;
    left: 0;
    width: 70px;
    height: 43px;
    background: url(../img/stages/front/plane.png) top left no-repeat;
    background-size: 70px 43px;
}

.c-stage__cloud {
	z-index: 6;
	top: 0;
	left: 112px;
    width: 163px;
    height: 116px;
    background: url(../img/stages/front/cloud.png) top left no-repeat;
    background-size: 163px 116px;
}

/******************************************
SPECIALIST
*******************************************/
.c-stage--specialist {
	height: 421px;
}

.c-stage__tv {
	z-index: 1;
    top: 36px;
    left: 406px;
    width: 271px;
    height: 196px;
    background: url(../img/stages/specialist/tv.jpg) top left no-repeat;
    background-size: 271px 196px;
}

.c-stage__desktop {
	z-index: 2;
    top: 143px;
    left: 213px;
    width: 225px;
    height: 201px;
	background: url(../img/stages/specialist/desktop.png) top left no-repeat;
    background-size: 225px 201px;
}

.c-stage__smart-table {
	z-index: 2;
    top: 133px;
    left: 615px;
    width: 172px;
    height: 211px;
	background: url(../img/stages/specialist/table.png) top left no-repeat;
    background-size: 172px 211px;
}

.c-stage__notebook-small {
	z-index: 3;
    top: 240px;
    left: 372px;
    width: 257px;
    height: 137px;
	background: url(../img/stages/specialist/notebook.png) top left no-repeat;
    background-size: 257px 137px;
}


.c-stage__specialist {
	z-index: 4;
    top: 0px;
    left: 650px;
    width: 374px;
    height: 421px;
	background: url(../img/stages/specialist/woman.png) top left no-repeat;
    background-size: 374px 421px;
}

/******************************************
LOGOMER 2
*******************************************/
.c-stage--logomer-2 {
	height: 535px;
}

.c-stage__logomer2-card-1 {
	z-index: 1;
    top: 46px;
    left: 50%;
    margin-left: -414px;
    width: 193px;
    height: 232px;
    background: url(../img/stages/logomer-2/card-1.png) top left no-repeat;
    background-size: 193px 232px;
}

.c-stage__logomer2-card-2 {
	z-index: 3;
    top: 175px;
    left: 50%;
    margin-left: 244px;
    width: 127px;
    height: 191px;
    background: url(../img/stages/logomer-2/card-2.png) top left no-repeat;
    background-size: 127px 191px;
}

.c-stage__logomer2-card-3 {
	z-index: 4;
    top: 194px;
    left: 50%;
    margin-left: 263px;
    width: 166px;
    height: 215px;
    background: url(../img/stages/logomer-2/card-3.png) top left no-repeat;
    background-size: 166px 215px;
}

.c-stage__logomer2-card-4 {
	z-index: 5;
    top: 229px;
    left: 50%;
    margin-left: 301px;
    width: 204px;
    height: 228px;
    background: url(../img/stages/logomer-2/card-4.png) top left no-repeat;
    background-size: 204px 228px;
}

.c-stage__logomer2-box {
	z-index: 1;
    top: 20px;
    left: 50%;
    margin-left: 287px;
    width: 285px;
    height: 364px;
    background: url(../img/stages/logomer-2/box.png) top left no-repeat;
    background-size: 285px 364px;
}

.c-stage__logomer2-book {
	z-index: 2;
    top: 0;
    left: 50%;
    margin-left: 210px;
    width: 287px;
    height: 375px;
    background: url(../img/stages/logomer-2/book.png) top left no-repeat;
    background-size: 287px 375px;
}

.c-stage__logomer2-license {
	z-index: 2;
    top: 116px;
    left: 50%;
    margin-left: -509px;
    width: 264px;
    height: 207px;
    background: url(../img/stages/logomer-2/license.png) top left no-repeat;
    background-size: 264px 207px;
}

.c-stage__logomer2-stories {
	z-index: 3;
    top: 195px;
    left: 50%;
    margin-left: -525px;
    width: 382px;
    height: 205px;
    background: url(../img/stages/logomer-2/stories.png) top left no-repeat;
    background-size: 382px 205px;
}

.c-stage__logomer2-disk {
	z-index: 4;
    top: 242px;
    left: 50%;
    margin-left: -573px;
    width: 260px;
    height: 242px;
    background: url(../img/stages/logomer-2/disk.png) top left no-repeat;
    background-size: 260px 242px;
}


.c-stage__logomer2-notebook {
	z-index: 6;
    top: 55px;
    left: 50%;
    margin-left: -350px;
    width: 701px;
    height: 448px;
    background: url(../img/stages/logomer-2/notebook.png) top left no-repeat;
    background-size: 701px 448px;
}

.c-stage__logomer2-usb {
	z-index: 7;
    top: 336px;
    left: 50%;
    margin-left: 173px;
    width: 176px;
    height: 195px;
    background: url(../img/stages/logomer-2/usb.png) top left no-repeat;
    background-size: 176px 195px;
}





/******************************************
MERSIBO PLUS 2
*******************************************/
.c-stage--mersiboplus-2 {
	height: 535px;
}

.c-stage__mersiboplus2-notebook {
	z-index: 6;
    top: 55px;
    left: 50%;
    margin-left: -350px;
    width: 701px;
    height: 448px;
    background: url(../img/stages/mersiboplus-2/notebook.png) top left no-repeat;
    background-size: 701px 448px;
}

.c-stage__mersiboplus2-usb {
	z-index: 7;
    top: auto;
    bottom: 0;
    left: 50%;
    margin-left: 173px;
    width: 206px;
    height: 226px;
    background: url(../img/stages/mersiboplus-2/usb.png) top left no-repeat;
    background-size: 206px 226px;
}


/******************************************
STABILOMER
*******************************************/
.c-stage--stabilomer {
	height: 535px;
}

.c-stage__stabilomer-notebook {
	z-index: 6;
    top: 55px;
    left: 50%;
    margin-left: -330px;
    width: 660px;
    height: 488px;
    background: url(../img/stages/stabilomer/stabilomer.png) top left no-repeat;
    background-size: 660px 448px;
}

/******************************************
INTERACTIVE
*******************************************/
.c-stage--interactive {
	height: 223px;
}

.c-stage__interactive-table {
	z-index: 6;
    top: 0;
    left: 50%;
    margin-left: -288px;
    width: 577px;
    height: 223px;
    background: url(../img/stages/interactive/table.png) top left no-repeat;
    background-size: 577px 223px;
}

.c-stage__interactive-screen {
	z-index: 6;
    top: 14px;
    left: 50%;
    margin-left: -210px;
    width: 419px;
    height: 109px;
    background: url(../img/stages/interactive/screen.png) top left no-repeat;
    background-size: 419px 109px;
}













/**********************************************/
@media (max-width: 1023px) {/******************/
/**********************************************/
	.c-stage {
		height: auto;
		top:0;
		margin: 0 -20px;
		padding: 20px 0;
	}
	
	.c-stage .c-stage__item {display: none;}
	.c-stage__image {display: block;}
    .c-stage__visible-element {display: inline;}
/**********************************************/
} /********************************************/
/**********************************************/






