puzzle.less

/*
	Fuentes
*/
@font-face {
    font-family: 'airstream_itcregular';
    src: url('css/fuentes/airstreamitc-webfont.eot');
    src: url('css/fuentes/airstreamitc-webfont.eot?#iefix') format('embedded-opentype'),
         url('css/fuentes/airstreamitc-webfont.woff') format('woff'),
         url('css/fuentes/airstreamitc-webfont.ttf') format('truetype'),
         url('css/fuentes/airstreamitc-webfont.svg#airstream_itcregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'skiaregular';
    src: url('css/fuentes/skia-webfont.eot');
    src: url('css/fuentes/skia-webfont.eot?#iefix') format('embedded-opentype'),
         url('css/fuentes/skia-webfont.woff') format('woff'),
         url('css/fuentes/skia-webfont.ttf') format('truetype'),
         url('css/fuentes/skia-webfont.svg#skiaregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
/*
	Fuentes
*/

@font-face{
    font-family:"VAG-Thin";
    src:url("css/fuentes/739798/86f553bb-9889-4e15-8969-ee64b49110e1.eot?#iefix");
    src:url("css/fuentes/739798/86f553bb-9889-4e15-8969-ee64b49110e1.eot?#iefix") format("eot"),
        url("css/fuentes/739798/5674c507-56c6-44d0-a73f-536f772201a4.woff") format("woff"),
        url("css/fuentes/739798/901e337a-35a9-4313-b7f2-e7557b153a9b.ttf") format("truetype"),
        url("css/fuentes/739798/82ff45d7-0bff-43e7-9dae-e19141e58f73.svg#82ff45d7-0bff-43e7-9dae-e19141e58f73") format("svg");
}

@font-face{
    font-family:"VAG-Light";
    src:url("css/fuentes/739801/44b3f5eb-d85f-4909-809d-6c122c12ea63.eot?#iefix");
    src:url("css/fuentes/739801/44b3f5eb-d85f-4909-809d-6c122c12ea63.eot?#iefix") format("eot"),
        url("css/fuentes/739801/1a4c2794-fc7f-4a89-ab1c-0be23dbee8b1.woff") format("woff"),
        url("css/fuentes/739801/6023c3ba-862b-4de6-b8c6-59ae434b7629.ttf") format("truetype"),
        url("css/fuentes/739801/0f3940be-21d0-4e65-9247-2dc7c12caef3.svg#0f3940be-21d0-4e65-9247-2dc7c12caef3") format("svg");
}

@font-face{
    font-family:"VAG-Bold";
    src:url("css/fuentes/739804/643a3fec-739a-44e6-9f17-e26e0c711eef.eot?#iefix");
    src:url("css/fuentes/739804/643a3fec-739a-44e6-9f17-e26e0c711eef.eot?#iefix") format("eot"),
        url("css/fuentes/739804/55c27d30-e9d4-405b-a4a2-954120b0bb2c.woff") format("woff"),
        url("css/fuentes/739804/12f01f1a-0c0c-44ee-9d95-8c597ae8d67e.ttf") format("truetype"),
        url("css/fuentes/739804/fdd56b34-68a5-4fee-b9ce-30b282397623.svg#fdd56b34-68a5-4fee-b9ce-30b282397623") format("svg");
}

/* Fin fuentes */

@import "css/elements.less";
@import "css/flexslider";

@morado: #00362B;
@verdefondo: #00E3AE;

html ,
body {
	height: 100%;
}

body {
	background-attachment: fixed;
	background-image: url(css/img/fondo-rooommm.jpg);
	background-position: center top;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;
	color: #00362B;
	font-family:"VAG-Thin";
	text-align: center;

	h1{
	    font-family:"VAG-Bold";
	    font-size: 2.4em;
	    letter-spacing: 2px;
	}

	h2{
	    display: inline-block;
	    font-family:"VAG-Thin";
	}

	header{
	    padding: 0 0 0 1em;
	    overflow: hidden;
	    width: 100%;
	    text-align: left;
	}

	header h1{
	    display: inline-block;
	    font-size: 4em;
	    text-shadow: 0 2px 0 #FFF;
	    margin: 0;
	    padding: 12px 0 0;
	}
	header h2{
	    display: block;
	    margin: 0;
	    padding: 12px 0 0;
	    text-shadow: 0 1px 0 #FFF;
	}

	#logo{
	    display: inline-block;
	    vertical-align: middle;
	    float: left;
	    margin-right: 1em;
	}

	canvas {
		.border-radius(5px,5px,5px,5px);
		position: relative;
	}

	.content {
		margin:0 auto;
		max-width: 934px;

		#mas {
			background-color: #EFE9F5;
			border-radius: 5px 5px 0 0;
			color: #00514E;
			display: inline-block;
			position: absolute;
			right: 50px;
			top:-40px;
			height: 40px;
			padding: 0 10px;
			line-height: 40px;
			font-weight: bold;
			text-decoration: none;
			font-size: 1.2em;
		}

		.otros {

			background-color: #EFE9F5;
			padding: 10px 50px;
			position: fixed;
			bottom: 0px;
			left: 0;
			margin: 0 0px;
			overflow-x: visible;
			overflow-y: visible !important;
			z-index: 1000;
			.transition;

			h2 {
				text-align: left;
			}

			ul.slides {
				list-style-type: none;
				margin: 0;
				padding: 0;
				text-align: center;

				li {
					background-color: @verdefondo;
					display: inline-block;
					margin:0 5px 5px 0;
					padding: 0;
					.rounded(5px);
					.box-shadow(0 1px 1px 0 rgba(0, 26, 20, 0.8));
					.transition;

					img {
						cursor:pointer;
						margin:0;
						padding: 0;
					}
				}

				li:hover {
					.box-shadow(0 2px 2px 0 rgba(0, 26, 20, 0.8));
					// .scale(1.3);
				}

			}
		}

	}

	.puzzle-container {
		background-color: rgba(255,255,255,.6);
		.border-radius(5px,5px,5px,5px);
		.box-shadow(0 1px 1px 3px rgba(0, 26, 20, 0.2));
		margin: 0 auto 20px;
		padding: 12px;
		width: 934px;
		position:relative;

		#play {
			background-color: rgba(0,83,94,.3);
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 100;

			.ir {
				background-image: url('css/img/img_01.png');
				background-position: -34px -22px;
				display: block;
				height: 98px;
				left: 50%;
				margin-left: -49px;
				margin-top: -49px;
				position: absolute;
				top: 50%;
				width: 98px;
				color: rgba(255, 255, 255, 0);
				font-family: 0px;
			}

			.ir:hover {
				background-position: -152px -22px;
			}

			.ir:active {
				background-position: -263px -22px;
			}
		}
	}
}

/* this works */
#canvas:-webkit-full-screen	{ width: 100% }
#canvas:-moz-full-screen		{ width: 100% }
#canvas:-ms-full-screen		{ width: 100% }
#canvas:-o-full-screen		{ width: 100% }
#canvas:full-screen			{ width: 100% }


body.loading {

	canvas {
		display: none;
	}

	.puzzle-container {
		background: url('img/load.gif') 50% 50% no-repeat @morado;
		min-height:547px;
	}

}