html,body {
	padding: 0;
	margin: 0;
	height: 100%;
	min-height: 100%;
	white-space: nowrap;
}
div.spacer, div.slice {
	position: relative;
	display: inline-block;
	float: left;
}

/* slice-uri */
div.slice {
	width: 32%;
	height: 100%;
	overflow: hidden;
	text-align: center;
	-webkit-transition: all 0.4s ease;
	cursor: pointer;
}

div.slice.docked {
	width: 4.5%;
}

div.slice.expanded {
	width: 87%;
}

/* floating buttons */
.btn-wrap {
	position: fixed;
	display: block;
	top: 10px;
	left: 10px;
	z-index: 999;
	opacity: 0.75;
			transition: all 0.3s;
	-webkit-transition: all 0.3s;
	   -moz-transition: all 0.3s;
		-ms-transition: all 0.3s;
}

.btn-wrap.hidden {
	opacity: 0.25;
}

.btn-wrap:hover {
	opacity: 1;
}

.btn-wrap .small-wrap {
	position: relative;
	display: block;
}

.btn-wrap .small-wrap .button {
	display: inline-block;
	*display: inline;
	zoom: 1;
	height: 80px;
	width: 80px;
	background-position: center center;
	background-repeat: no-repeat;
			transition: all 0.3s;
	-webkit-transition: all 0.3s;
	   -moz-transition: all 0.3s;
		-ms-transition: all 0.3s;
}

.btn-wrap .small-wrap .button.see, .btn-wrap:hover .small-wrap .button.see {background-color: #00499b; border: 1px solid #00499b;}
.btn-wrap .small-wrap .button.etu, .btn-wrap:hover .small-wrap .button.etu {background-color: #00499b; border: 1px solid #00499b;}
.btn-wrap .small-wrap .button.gu, .btn-wrap:hover .small-wrap .button.gu {background-color: #e62025; border: 1px solid #e62025;}

.btn-wrap:hover .small-wrap .button.see, .btn-wrap .small-wrap .button.see {background-image: url(../images/splash-screen/industriall-etu-see-logo.png);}
.btn-wrap:hover .small-wrap .button.etu, .btn-wrap .small-wrap .button.etu {background-image: url(../images/splash-screen/industriall-etu-logo.png);}
.btn-wrap:hover .small-wrap .button.gu, .btn-wrap .small-wrap .button.gu {background-image: url(../images/splash-screen/industriall-global-union-logo.png);}

.btn-wrap.hidden .small-wrap .button {background-color: #fff;}
.btn-wrap.hidden .small-wrap .button.see {background-image: url(../images/splash-screen/industriall-etu-see-logo.png); border-color: #00499b; border: 1px solid #00499b;}
.btn-wrap.hidden .small-wrap .button.etu {background-image: url(../images/splash-screen/industriall-etu-logo.png); border-color: #00499b; border: 1px solid #00499b;}
.btn-wrap.hidden .small-wrap .button.gu {background-image: url(../images/splash-screen/industriall-global-union-logo.png); border-color: #e62025; border: 1px solid #e62025;}

.btn-wrap .small-wrap .title-wrap {
	display: inline-block;
	*display: inline;
	zoom: 1;
	width: 0px;
	height: 80px;
	overflow: hidden;
			transition: all 0.3s;
	-webkit-transition: all 0.3s;
	   -moz-transition: all 0.3s;
		-ms-transition: all 0.3s;
}

.btn-wrap .small-wrap .title-wrap .title {
	display: table-cell;
	width: 280px;
	height: 60px;
	padding: 10px 0 10px 0;
	background-color: #fff;
	font-family: 'Arial Bold';
	font-size: 1em;
	line-height: 1.2em;
	vertical-align: middle;
	text-align: center;
}

.btn-wrap .small-wrap .title-wrap .title.see {color: #00499b;}
.btn-wrap .small-wrap .title-wrap .title.etu {color: #00499b;}
.btn-wrap .small-wrap .title-wrap .title.gu {color: #e62025;}

.btn-wrap .small-wrap .button:hover ~ .title-wrap {
	width: 280px;
}

/* slice stanga, dreapta */
div.slice.left {background: #fff;}
div.slice.middle {background: #fff;}
div.slice.right {background: #eee url('../images/splash-screen/gradient-europe.jpg') center center no-repeat;}

/* spatiu intre slice-uri */
div.spacer {
	position: relative;
	width: 2%;
	height: 100%;
	background-color: #444;
	box-shadow: 0 0 15px rgba(0,0,0,0.6) inset;
	z-index: 1;
			transition: all 0.4s ease;
	-webkit-transition: all 0.4s ease;
	   -moz-transition: all 0.4s ease;
		-ms-transition: all 0.4s ease;
}
div.spacer.union {background: #E52125;}
div.spacer.europe {background: #01499B;}

/* imaginea */
div.slice .img {
	display: block;
	visibility: visible;
	position: absolute;
	top: 0; left: 0;
	opacity: 1;
	height: 100%;
	width: 100%;
			transition: all 0.5s, display 0s 0.5s;
	-webkit-transition: all 0.5s, display 0s 0.5s;
	   -moz-transition: all 0.5s, display 0s 0.5s;
		-ms-transition: all 0.5s, display 0s 0.5s;
	margin: 0 auto;
	background-repeat: no-repeat;
	background-position: center center;
}

div.slice.expanded .img{
	visibility: hidden;
	opacity: 0;
}

div.slice .img.etu-see {background-image: url('../images/splash-screen/industriall-etu-see.jpg')}
div.slice .img.etu {background-image: url('../images/splash-screen/industriall-etu.jpg')}
div.slice .img.gu {background-image: url('../images/splash-screen/industriall-gu.jpg')}

/* film */
div.slice video {
	height: 100%;
	max-width: 100%;
	cursor: default;
	/*display: none;*/
}

/* background */
div.slice .back {
	position: absolute;
	visibility: hidden;
	opacity: 0;
	width: 100%;
	height: 100%;
	background-image: url('../images/splash-screen/tiny.png');
	z-index: 1;
	cursor: default;
			transition: all 0.5s;
	-webkit-transition: all 0.5s;
	   -moz-transition: all 0.5s;
		-ms-transition: all 0.5s;
}
div.slice.left .back {background-position: top left;}
div.slice.middle .back {background-position: top center;}
div.slice.right .back {background-position: top right;}

div.slice.ended .back, div.slice.docked .back {
	display: block;
	visibility: visible;
	opacity: 1;
}

/* link */
div.slice .link {
	position: absolute;
	display: block;
	visibility: hidden;
	opacity: 0;
	bottom: 20px;
	left: 50%;
	margin-top: -40px;
	margin-left: -150px;
			transition: all 0.4s, opacity 1s;
	-webkit-transition: all 0.4s, opacity 1s;
	   -moz-transition: all 0.4s, opacity 1s;
		-ms-transition: all 0.4s, opacity 1s;
	z-index: 2;
}

div.slice.ended .link {
	visibility: visible;
	opacity: 0.6;
}

div.slice .link:hover {
	opacity: 1;
}

/* text de pe link */
div.slice .link .text {
	position: relative;
	display: table-cell;
	height: 40px;
	width: 300px;
	color: #000;
	vertical-align: middle;
	font-family: 'Open Sans';
	font-size: 0.9em;
	text-align: center;
	text-decoration: none;
	background-color: rgba(0,0,0,0.1);
	cursor: pointer;
	z-index: 2;
}

/* sageata link */
/*
div.slice .link .arrow {
	position: absolute;
	height: 80px;
	width: 80px;
	right: 0;
	top: 0;
	background: url('../images/splash-screen/arrow.png') center center no-repeat;
	-webkit-transition: all 0.4s;
	z-index: 1;
}
*/

/* muta link si sageata link pe hover */
/*
div.slice .link:hover {margin-left: -170px; box-shadow: 0 0 20px rgba();}
div.slice .link:hover .arrow {visibility: visible;right: -80px;}
*/

/* buton replay film */
div.slice .replay {
	position: absolute;
	display: block;
	visibility: hidden;
	opacity: 0;
	width: 60px;
	height: 60px;
	top: 0;
	left: 50%;
	margin-left: -30px;
	background: transparent url('../images/splash-screen/replay.png') center center no-repeat;
	z-index: 1;
	cursor: default;
			transition: opacity 1s 2s;
	-webkit-transition: opacity 1s 2s;
	   -moz-transition: opacity 1s 2s;
		-ms-transition: opacity 1s 2s;
}
div.slice .replay:hover {
			transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
	   -moz-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
			transition: all 0.8s;
	-webkit-transition: all 0.8s;
	   -moz-transition: all 0.8s;
		-ms-transition: all 0.8s;
}
div.slice.ended .replay {
	visibility: visible;
	opacity: 1;
}

.rotate {
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);

  /* also accepts left, right, top, bottom coordinates; not required, but a good idea for styling */
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  transform-origin: 50% 50%;

  /* Should be unset in IE9+ I think. */
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

/* div following pointer */
.adasda {
	background: #fff;
	font-family: Open Sans;
	font-size: 1em;
	color: #333;
}

.mcontrol {
	z-index: 999;
}

.mcontrol .popup {
	display: block;
	position: absolute;
	height: 20px;
	padding: 5px 10px 5px 10px;
	top: 50%;
	margin-top: -15px;
	left: 0px;
	background-color: rgba(255,255,255,0.9);
	border: 1px solid #ccc;
	border-radius: 0px 20px 20px 0px;
	font-family: Open Sans;
	font-size: 0.75em;
	line-height: 1.5em;
	color: #333;
	opacity: 0;
			transition: opacity 0.2s, left 1s;
	-webkit-transition: opacity 0.2s, left 1s;
	   -moz-transition: opacity 0.2s, left 1s;
		-ms-transition: opacity 0.2s, left 1s;
}

.mcontrol:hover > .popup {
	left: 40px;
	opacity: 1;
			transition: all 0.4s 1s;
	-webkit-transition: all 0.4s 1s;
	   -moz-transition: all 0.4s 1s;
		-ms-transition: all 0.4s 1s;
}

.mcontrol.pause{
	display: block;
	position: fixed;
	width: 24px;
	height: 29px;
	bottom: 80px;
	left: 50%;
	margin-left: -12px;
}

.mcontrol.pause .line {
	position: absolute;
	height: 100%;
	border: 1px solid #999;
	background-color: #fff;
	width: 7px;
	box-shadow: 3px 3px 5px transparent;
	opacity: 0.3;
			transition: all 0.4s;
	-webkit-transition: all 0.4s;
	   -moz-transition: all 0.4s;
		-ms-transition: all 0.4s;
}
.mcontrol.pause .line.left { left: 0; }
.mcontrol.pause .line.right { right: 0; }

.mcontrol.pause:hover > .line {
	height: 100%;
	border: 1px solid #fff;
	background-color: #00499B;
	box-shadow: 3px 3px 5px rgba(0,0,0,0.4);
	opacity:1 ;
}