@font-face {
	font-family: 'HelveticaNeueB';
	src: url('../../shared/fonts/HelveticaNeue-Bold.eot');
	src: local('ò?'),
			 url('../../shared/fonts/HelveticaNeue-Bold.woff') format('woff'),
			 url('../../shared/fonts/HelveticaNeue-Bold.ttf') format('truetype'),
			 url('../../shared/fonts/HelveticaNeue-Bold.svg#webfont') format('svg');
}
@font-face {
	font-family: 'HelveticaNeueBC';
	src: url('../../shared/fonts/HelveticaNeue-BoldCond.eot');
	src: local('ò?'),
			 url('../../shared/fonts/HelveticaNeue-BoldCond.woff') format('woff'),
			 url('../../shared/fonts/HelveticaNeue-BoldCond.ttf') format('truetype'),
			 url('../../shared/fonts/HelveticaNeue-BoldCond.svg#webfont') format('svg');
}
@font-face {
	font-family: 'HelveticaNeueLC';
	src: url('../../shared/fonts/HelveticaNeue-LightCond.eot');
	src: local('ò?'),
			 url('../../shared/fonts/HelveticaNeue-LightCond.woff') format('woff'),
			 url('../../shared/fonts/HelveticaNeue-LightCond.ttf') format('truetype'),
			 url('../../shared/fonts/HelveticaNeue-LightCond.svg#webfont') format('svg');
}

.pantalla { margin: 0; padding: 0; position: relative; background: url(img/bg.png) black no-repeat; width: 1920px; height: 1080px; }
.app { margin: 20px; padding: 0; }
.box { position: absolute; width: 400px; height: 400px; background-image: url(img/estat_0.png); top: 332px; }
.box img { position: absolute; width: 200px; height: 100px; top: 332; }
.estat0 { background-image: url(img/estat_0.png); }
.estat1 { background-image: url(img/estat_1.png); }
.estat2 { background-image: url(img/estat_2.png); }
.estat3 { background-image: url(img/estat_3.png); }
.estat4 { background-image: url(img/estat_4.png); }
.estat5 { background-image: url(img/estat_5.png); }
.estat6 { background-image: url(img/estat_6.png); }
#cont1 { left: 99px; }
#cont2 { left: 559px; }
#cont3 { left: 1018px; }
#cont4 { left: 1421px; }
.box p { width: 400px; text-align: center; margin: 0; font: 150px HelveticaNeueB, sans-serif; color: black; position: absolute; top: 130px; letter-spacing: 2px; }
.msg { font: 22px HelveticaNeueLC, sans-serif; color: #555; position: absolute; left: 45px; top: 973px }

h1 { font: 36px HelveticaNeueLC, sans-serif; text-align: center; color: black; }
h1 b { font-family: HelveticaNeueBC, sans-serif; text-transform: uppercase; color: #00652C; }
h1 span { color: gray; display: inline-block; margin: 0 10px; }

.color0 { background-color: rgb(171,171,171) !important; }
.color1 { background-color: rgb(0,155,219) !important; }
.color2 { background-color: rgb(112,168,59) !important; }
.color3 { background-color: rgb(254,209,0) !important; }
.color4 { background-color: rgb(207,20,37) !important; }
.color5 { background-color: rgb(140,44,54) !important; }
.color6 { background-color: rgb(162,91,164) !important; }
.box2 { height: 230px; background-color: rgb(171,171,171); position: relative; margin: 0 30%; }
.box2 p { text-align: center; margin: 0; font: 120px/120px HelveticaNeueB, sans-serif; color: black; letter-spacing: 2px; }
h2 { background: rgba(0,0,0,0.3); font-family: HelveticaNeueB, sans-serif; padding: 10px; max-width: 30%; color: white; margin-bottom: 5px; }
h2 span { font-size: 0.75em }
.color3 .estat { color: rgba(0,0,0,0.6) !important; }
.estat { position: absolute; bottom: 5px; font-size: 1.3em; letter-spacing: 1px; font-family: HelveticaNeueBC, sans-serif; color: white; text-align: center; text-transform: uppercase; width: 100%; }
.msg2 { font: 18px HelveticaNeueLC, sans-serif; color: #555; padding: 10px 0; text-align: center; border-top: 1px solid #CCC; padding-top: 10px; margin-top: 15px; }

.titol { font: 20px HelveticaNeueB, sans-serif; text-align: center; color: black; margin: 5px 30% 3px 30%;}
.txt { font: 16px Arial, sans-serif; text-align: center; color: black; margin: 0 30% 20px 30%; }


@media only screen and (max-width: 640px)
{
	.box2 { margin: 0; }
	.titol { margin: 5px 0 3px 0; }
	.txt { margin: 0 0 20px 0; }
	h1 span { display: none; }
}