/************************************************/
/*												*/
/*	IL DISORDINE DELLE COSE						*/
/*	CSS - GENERALE								*/
/*	DEVEL BY TIWI								*/
/*												*/
/************************************************/

section.scotch {
	min-width:0px;
}
section.scotch #scotch-video-container {
	position:absolute; width:100%; height:100%;
	top:0px; left:0px;
	z-index:0;
} section.scotch #scotch-gui {
	position:absolute; width:100%; height:100%;
	top:0px; left:0px;
	z-index:50; background-color:transparent;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
} section.scotch #scotch-gui #scotch-gui-close {
	width:40px; height:40px; overflow:hidden; display:block;
	position:fixed;
	background-image:url(./../img/50.10.scotch/gui/close.png);
	background-repeat:no-repeat; background-position:0px 0px;
	background-size:100%;
	top: 20px; right: 20px;
	cursor:pointer;
	opacity:1; filter:alpha(opacity=1);
	transition: opacity 0.3s, transform 0.3s;
} section.scotch #scotch-gui .controls {
	width:100%; position:fixed; bottom:0px; left:0px;
	height:130px; background-color:#333333;
	background-image:url(./../img/50.10.scotch/controls-bg.jpg);
	border-top:1px solid black; 
	background-size:none;
	background-repeat:no-repeat;
	background-size:100% 100%;
	background-position:right top;
	transition: bottom 0.3s linear 0s;
	-webkit-transition: bottom 0.3s linear 0s;
	-ms-transition: bottom 0.3s linear 0s;
	-o-transition: bottom 0.3s linear 0s;
	-moz-transition: bottom 0.3s linear 0s;
} section.scotch #scotch-gui .controls.forcehide {
	bottom:-300px;
	transition: bottom 0.3s linear 2s;
	-webkit-transition: bottom 0.3s linear 2s;
	-ms-transition: bottom 0.3s linear 2s;
	-o-transition: bottom 0.3s linear 2s;
	-moz-transition: bottom 0.3s linear 2s;
} section.scotch #scotch-gui .controls.loading {
	background-size:100% 100%;
	animation:loaderControlsImage 3s;
    -moz-animation: loaderControlsImage 3s infinite; /* Firefox */
    -webkit-animation: loaderControlsImage 3s infinite; /* Safari and Chrome */
	
} section.scotch #scotch-gui .controls.hidden {
	display:none;
} section.scotch #scotch-gui .controls #scotch-gui-seekbar {
	position:absolute;
	top:50%; left:50%; margin-left:-45%; margin-top:-10px;
	width:90%; height:75px;
	background-image:url(./../img/50.10.scotch/gui/seekbar-viewing.png);
	background-repeat:repeat-x; 
} section.scotch #scotch-gui .controls #scotch-gui-seekbar #scotch-gui-seekbar-viewed {
	width:0%; height:75px; overflow:hidden; position:absolute;
	background-image:url(./../img/50.10.scotch/gui/seekbar-viewed.png);
	background-repeat:repeat-x; 
} section.scotch #scotch-gui .controls #scotch-gui-seekbar #scotch-gui-seekbar-viewed a.fragment {
	width:50px; height:10px; border-top:3px solid #999999;
	position:absolute; top:20px; left:0%;
} section.scotch #scotch-gui .controls #scotch-gui-seekbar #scotch-gui-seekbar-viewed a.overlapped {
	width:50px; height:10px; border-top:3px solid #999999;
	position:absolute; top:33px; left:0%;
} section.scotch #scotch-gui .controls #scotch-gui-seekbar #scotch-gui-seekbar-viewed a.fragment.magenta {
	border-top:5px solid #f11b7b;
} section.scotch #scotch-gui .controls #scotch-gui-seekbar #scotch-gui-seekbar-viewed a.fragment.aqua {
	border-top:5px solid #18b3bd;
} section.scotch #scotch-gui .controls #scotch-gui-seekbar #scotch-gui-seekbar-viewed a.fragment.acid-green {
	border-top:5px solid #1bf1ad;
} section.scotch #scotch-gui .controls #scotch-gui-seekbar #scotch-gui-seekbar-viewed a.fragment.acid-yellow {
	border-top:5px solid #e4f11b;
} section.scotch #scotch-gui .controls #scotch-gui-seekbar #scotch-gui-seekbar-viewed a.fragment.brown {
	border-top:5px solid #cb9746;
} section.scotch #scotch-gui .controls #scotch-gui-seekbar #scotch-gui-seekbar-viewed a.fragment.white {
	border-top:5px solid #ffffff;
} section.scotch #scotch-gui .controls #scotch-gui-seekbar #scotch-gui-seekbar-viewed a.fragment.green {
	border-top:5px solid #1fa97d;
} section.scotch #scotch-gui .controls #scotch-gui-seekbar #scotch-gui-seekbar-viewed a.fragment.vivid-green {
	border-top:5px solid #30f11b;
} section.scotch #scotch-gui .controls #scotch-gui-seekbar #scotch-gui-seekbar-position {
	position:absolute;
	width:1px; height:100%; background-color:#ffffff; 
} section.scotch #scotch-gui .controls #scotch-gui-seekbar #scotch-gui-seekbar-position.hidden {
	display:none;
} 

section.scotch #scotch-gui .controls #scotch-gui-seekbar-showall {
	width:17px; height:17px; overflow:hidden;
	background-image:url(./../img/50.10.scotch/gui/seekbar-show-all.png);
	background-repeat:no-repeat; display:block;
	background-position: 0px 0px;
	position: absolute;
	top: 50%;
	margin-top: -13px; 
	left: 95%; 
	margin-left:7px; cursor:pointer;
} section.scotch #scotch-gui .controls #scotch-gui-seekbar-showall:hover {
	background-position: -17px 0px;
}

section.scotch #scotch-gui .controls #scotch-gui-highlightbar {
	position: absolute;
	width: 90%;
	left: 50%;
	margin-left: -45%;
	top: -55px;
} section.scotch #scotch-gui .controls #scotch-gui-highlightbar.hidden {
	
} section.scotch #scotch-gui .controls #scotch-gui-highlightbar.forcehide {
	display:none;
} section.scotch #scotch-gui .controls #scotch-gui-highlightbar .highlight {
	display:block; overflow:hidden; width:500px; margin-left:-8px;
	height:0px; top:98px; position:absolute;
	transition: top 0.3s, height 1s cubic-bezier(0, 1.8, 1, 1.8); 
	-webkit-transition: top 0.3s, height 1s cubic-bezier(0, 1.8, 1, 1.8); 
	-ms-transition: top 0.3s, height 1s cubic-bezier(0, 1.8, 1, 1.8); 
	-o-transition: top 0.3s, height 1s cubic-bezier(0, 1.8, 1, 1.8); 
	-moz-transition: top 0.3s, height 1s cubic-bezier(0, 1.8, 1, 1.8); 
} section.scotch #scotch-gui .controls #scotch-gui-highlightbar .highlight .play-button {
	width: 30px;
	height: 30px;
	overflow: hidden;
	display: block;
	position: absolute;
	background-image: url(./../img/50.10.scotch/gui/play.png);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	background-size: 200%;
	top: 33px;
	left: 78px;
	cursor: pointer;
} section.scotch #scotch-gui .controls #scotch-gui-highlightbar .highlight.right {
	margin-left:-325px;
} section.scotch #scotch-gui .controls #scotch-gui-highlightbar .highlight.right .play-button {
	right: 78px; left:auto;
} section.scotch #scotch-gui .controls #scotch-gui-highlightbar .highlight.visible {
	display:block; overflow:hidden; width:500px;
	height:98px; top:0px;
} section.scotch #scotch-gui .controls #scotch-gui-highlightbar.hidden .highlight {
	height:0px; top:98px;
	transition: none; 
	-webkit-transition: none; 
	-ms-transition: none; 
	-o-transition: none; 
	-moz-transition: none; 
} section.scotch #scotch-gui .controls #scotch-gui-highlightbar.hidden .highlight.preview {
	display:block; overflow:hidden; width:500px;
	height:98px; top:0px;
} section.scotch #scotch-gui .controls #scotch-gui-highlightbar .highlight .frame {
	display:block; 
	width:170px; height:90px;
	padding-left:8px; padding-right:8px; padding-top:8px;
	padding-bottom:0px;
	background:url(./../img/50.10.scotch/gui/highlight-frame-bg.jpg);
	background-repeat:repeat-x;
	float:left; margin-right:8px;
} section.scotch #scotch-gui .controls #scotch-gui-highlightbar .highlight.right .frame {
	float:right; margin-right:0px; margin-left:8px;
} section.scotch #scotch-gui .controls #scotch-gui-highlightbar .highlight h3 {
	float:right; width:305px; margin-top:35px; margin-bottom:0px;
	font-family: "museo-slab", sans-serif;
	font-size:15px; line-height:15px;
	color:white; font-weight:800;
	text-transform:uppercase;
} section.scotch #scotch-gui .controls #scotch-gui-highlightbar .highlight.right h3 {
	float:left; text-align:right;
} section.scotch #scotch-gui .controls #scotch-gui-highlightbar .highlight h5 {
	float: right;
	width: 305px;
	margin-top: 10px;
	font-family: "museo-slab", sans-serif;
	font-size: 16px;
	line-height: 18px;
	color: #d0d0d0;
	font-weight: 200;	
} section.scotch #scotch-gui .controls #scotch-gui-highlightbar .highlight.right h5 {
	float:left; text-align:right;
}



/* COVER */
section.scotch #scotch-gui .cover {
	display:block; position:fixed;
	width:100%; height:100%; z-index:100; top:0px; left:0px;
	background-color:#333333; overflow: hidden;
	transition: height 1s; transition-delay: 0.5s;
	-webkit-transition: height 1s; -webkit-transition-delay: 0.5s;
	-ms-transition: height 1s; -ms-transition-delay: 0.5s;
	-o-transition: height 1s; -o-transition-delay: 0.5s;
	-moz-transition: height 1s; -moz-transition-delay: 0.5s;
	
} section.scotch #scotch-gui .cover.hidden {
	height:0%;
} section.scotch #scotch-gui .cover img#cover-image {
	opacity:0.1; filter:alpha(opacity=10);
} section.scotch #scotch-gui .cover .contenuto {
	height:450px; top:50%; overflow:hidden; 
	margin-top:-280px; width:800px; padding-left:160px;
} section.scotch #scotch-gui .cover .contenuto #cover-logo {
	position:relative; margin-top:0px; display:block;
} section.scotch #scotch-gui .cover .contenuto #cover-title {
	position:relative; display:block;
	margin-top:32px;
} section.scotch #scotch-gui .cover .contenuto .cover-description {
	width:750px;
	font-family: "museo-slab", sans-serif;
	font-size:25px; line-height:32px;
	color:#ffffff;
	font-weight:200;
	margin-top:20px;
} section.scotch #scotch-gui .cover #scotch-gui-play {
	width:130px; height:130px; overflow:hidden; display:block;
	position:absolute;
	background-image:url(./../img/50.10.scotch/gui/play.png);
	background-repeat:no-repeat; background-position:0px 0px;
	background-size:200%;
	top: 50%;
	left: 50%;
	margin-left: -65px; margin-top:60px; cursor:pointer;
	opacity:1; filter:alpha(opacity=1);
	transition: opacity 0.3s, transform 0.3s;
	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
	-ms-transition: opacity 0.3s, -ms-transform 0.3s;
	-o-transition: opacity 0.3s, -o-transform 0.3s;
	-moz-transition: opacity 0.3s, -moz-transform 0.3s;
} section.scotch #scotch-gui .cover a:hover#scotch-gui-play {
	background-position:-130px 0px;
} section.scotch #scotch-gui .cover.hidden #scotch-gui-play {
	opacity:0; filter:alpha(opacity=0);
	transform: scale(1.5); -webkit-transform: scale(1.5);
	-ms-transform: scale(1.5); -o-transform: scale(1.5); -moz-transform: scale(1.5);
} section.scotch #scotch-gui .cover.loading #scotch-gui-play {
	opacity:0; filter:alpha(opacity=0);
	transition: opacity 1s, transform 1s;
	transform: scale(0) rotate(0deg);
	-webkit-transform: scale(0) rotate(0deg);
	-webkit-transition: opacity 1s, -webkit-transform 1s;
	-ms-transition: opacity 1s, -ms-transform 1s;
	-o-transition: opacity 1s, -o-transform 1s;
	-moz-transition: opacity 1s, -moz-transform 1s;
} section.scotch #scotch-gui .cover.loading a:hover#scotch-gui-play {
	background-position:0px 0px;
}

section.scotch #scotch-gui .cover #scotch-logo {
	position:absolute; bottom:50px; left:50%;
	margin-left:-30px;
	width:60px; height:60px;
	background-image:url(./../img/50.10.scotch/logo.png);
	background-repeat:no-repeat;
	background-position:0px 0px;
	background-size:100%;
} section.scotch #scotch-gui .cover #share {
	position: absolute;
	bottom: 50px;
	left: 50%;
	margin-left: 30px;
	display: block;
	margin-top: 10px;
} body.mobile section.scotch #scotch-gui .cover #share, body.tablet section.scotch #scotch-gui .cover #share {
	display:none;
}

 section.scotch #scotch-gui .cover.hidden #scotch-logo {
	opacity:0; filter:alpha(opacity=0);
	transition: opacity 1s, transform 1s;
	transform: scale(0) rotate(0deg);
	-webkit-transform: scale(0) rotate(0deg);
	-webkit-transition: opacity 1s, -webkit-transform 1s;
	-ms-transition: opacity 1s, -ms-transform 1s;
	-o-transition: opacity 1s, -o-transform 1s;
	-moz-transition: opacity 1s, -moz-transform 1s;
}

/* FRAGMENT PLAYBACK */
section.scotch #scotch-gui .fragment-playback {
	display:block; position:fixed; 
	width:100%; height:100%; z-index:0; top:0px; left:0px;
	background-color:#000000; overflow: hidden;
	transition: height 0.5s; 
	-webkit-transition: height 0.5s; 
	-ms-transition: height 0.5s;
	-o-transition: height 0.5s; 
	-moz-transition: height 0.5s;
	pointer-events: none;
	
} section.scotch #scotch-gui .fragment-playback.hidden {
	height:0%;
} section.scotch .fragment-playback #scotch-playback-container {
	position:absolute; width:100%; height:100%;
	top:0px; left:0px;
	z-index:0;
}





/* animations */
@keyframes loaderScale {
	0%   { transform: scale(1); }
	50%  { -webkit-transform: scale(0.3); }
	100% { transform: scale(1); }
} @-webkit-keyframes loaderScale {
	0%   { -webkit-transform: scale(1); }
	50%  {-webkit-transform: scale(0.3); }
	100% {-webkit-transform: scale(1); }
} @keyframes loaderControls {
	0%   { background-color: #333333; }
	50%  { background-color: #000000; }
	100% { background-color: #333333; }
} @-webkit-keyframes loaderControls {
	0%   { background-color: #333333; }
	50%  { background-color: #4A3333; }
	100% { background-color: #333333; }
} @-moz-keyframes loaderControls {
	0%   { background-color: #333333; }
	50%  { background-color: #000000; }
	100% { background-color: #333333; }
} @keyframes loaderControlsImage {
	0%   { background-size:100% 100%; }
	50%  { background-size:0% 100%; }
	100% { background-size:100% 100%; }
} @-webkit-keyframes loaderControlsImage {
	0%   { background-size:100% 100%; }
	50%  { background-size:0% 100%; }
	100% { background-size:100% 100%; }
} @-moz-keyframes loaderControlsImage {
	0%   { background-size:100% 100%; }
	50%  { background-size:0% 100%; }
	100% { background-size:100% 100%; }
}