@font-face {
    font-family: mandarin;
    src: url(fonts/ink_bandits.ttf);
}

@font-face {
    font-family: avenir;
    src: url(fonts/Avenir.ttf);
}

*
{
	font-family:avenir;
}
			.canvas-container
			{
				width:100% !important;
				height:100% !important;
			}
			
			.button
			{
				padding: 5px 20px;
				font-family: Nunito,sans-serif;
				color: #e83643 !important;
				text-decoration:none !important;
				text-transform: uppercase;
				border: 2px solid #e83643;
				text-decoration:none;
				transition: all .35s;
			}
			
			
			#toolbar
			{
				
				width:100%;
				background-color:#999999 !important;
				margin:0px;
/*				position:fixed;
				bottom:0;*/
				clear:both;
				margin-top:20px;
				
			}
			
			#toolbar img
			{
				
				width:auto;
				height:65px;
				
			}
			
			#toolbar a img
			{
				
				width:auto;
				height:24px;
				width:24px;
				
			}
			
			
			#toolbar img:hover,.imagenFondo:hover
			{
				cursor:pointer;
				opacity:0.7;
				-moz-opacity:0.7;
				-webkit-opacity:0.7;
				-ms-opacity:0.7;
				-o-opacity:0.7;
			}
			
			.button:hover,.button:active,button:focus
			{
				color: #fff !important;
				background-color:#e83643 !important;
				text-decoration:none !important;
			}
			
			.contenidoCanvas
			{
				padding:0px;
				margin:0px;
				width:600px;
				height:686px;
			}
			.canvas
			{
				display: block;
				
				margin: 0 auto;
			}
			.canvasActivo
			{
				border:1px solid #e83643 !important;
			}
			
			.large-12
			{
				height:auto !important;
			}
			
			
						
						
			.modal {
				display: none;
				position: fixed;
				z-index: 10000000;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				overflow: auto;
				background-color: rgb(0,0,0);
				background-color: rgba(0,0,0,0.4);
				-webkit-animation-name: fadeIn;
				-webkit-animation-duration: 0.4s;
				animation-name: fadeIn;
				animation-duration: 0.4s
			}


			.modal-content {
				position: fixed;
				bottom: 0;
				background-color: #fefefe;
				width: 100%;
				min-width:340px;
				-webkit-animation-name: slideIn;
				-webkit-animation-duration: 0.4s;
				animation-name: slideIn;
				animation-duration: 0.4s
			}


			.close {
				color: white;
				float: right;
				font-size: 28px;
				font-weight: bold;
			}

			.close:hover,
			.close:focus {
				color: #000;
				text-decoration: none;
				cursor: pointer;
			}

			.modal-header {
				padding: 2px 16px;
				background-color: #263238;
				color: white;
			}

			.modal-body {padding: 2px 16px;}

			.modal-footer {
				padding: 2px 16px;
				background-color: #e83643;
				color: white;
			}


			@-webkit-keyframes slideIn {
				from {bottom: -300px; opacity: 0} 
				to {bottom: 0; opacity: 1}
			}

			@keyframes slideIn {
				from {bottom: -300px; opacity: 0}
				to {bottom: 0; opacity: 1}
			}

			@-webkit-keyframes fadeIn {
				from {opacity: 0} 
				to {opacity: 1}
			}

			@keyframes fadeIn {
				from {opacity: 0} 
				to {opacity: 1}
			}

			#contenedorIframe iframe
			{
				width:100%;height:800px;border:0px;margin:0px;padding:0px;
			}

			#fondos
			{
				display:none;
				background-color:#FFF;
				border:1px solid #CCC;
				padding:20px;
				margin:10px;
				position:absolute;
				z-index:900;
				width:auto;
			}

			.imagenFondo
			{
				height:100px !important;
				width:auto;
				padding-left:5px;
				padding-right:5px;
			}

			.tool
			{
				
				z-index:700;
			}


			/* The Modal (background) */
			.modal {
				display: none; /* Hidden by default */
				position: fixed; /* Stay in place */
				z-index: 999; /* Sit on top */
				padding-top: 100px; /* Location of the box */
				left: 0;
				top: 0;
				width: 100%; /* Full width */
				height: 100%; /* Full height */
				overflow: auto; /* Enable scroll if needed */
				background-color: rgb(0,0,0); /* Fallback color */
				background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
			}

			/* Modal Content */
			.modal-content {
				position: relative;
				background-color: #fefefe;
				margin: auto;
				padding: 0;
				border: 1px solid #888;
				width: 20%;
				box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
				-webkit-animation-name: animatetop;
				-webkit-animation-duration: 0.4s;
				animation-name: animatetop;
				animation-duration: 0.4s
			}

			/* Add Animation */
			@-webkit-keyframes animatetop {
				from {top:-300px; opacity:0} 
				to {top:0; opacity:1}
			}

			@keyframes animatetop {
				from {top:-300px; opacity:0}
				to {top:0; opacity:1}
			}

			/* The Close Button */
			.close {
				color: white;
				float: right;
				font-size: 28px;
				font-weight: bold;
			}

			.close:hover,
			.close:focus {
				color: #000;
				text-decoration: none;
				cursor: pointer;
			}

			#myBtn
			{
				position:relative;
				margin-top:40px !important;
				z-index:200;
			}

			.modal-body {padding: 2px 16px;}
			#toolbarCromos .owl-stage-outer
			{
				
				overflow:visible !important;
			}
			
			
			@media screen and (max-width: 1000px) 
			{
				#elCarrusel,#elCarrusel .owl-stage-outer
				{
					width:100% !important;
				}
			}
			
			#info
			{
				display:inline-block;
			}
			
			#infoResponsive
			{
				display:none;
			}
			
			
			@media screen and (max-width: 1500px) 
			{
				#info
				{
					display:none !important;
				}
				
				#infoResponsive
				{
					display:inline-block !important;
				}
			}
			
			@media screen and (min-width: 1000px)
			{
				#elCarrusel .owl-nav .owl-next
				{
					margin-right:-115px !important;
				}
				#elCarrusel .owl-nav .owl-prev
				{
					margin-left:-138px !important;
				}
			}			
			#toolbarCromos .owl-nav .owl-prev,#toolbarCromos .owl-nav .owl-next
			{
				top:10% !important;
				
			}
			#toolbarCromos .owl-nav .owl-prev
			{
				left:-25px !important;
			}
			
			#toolbarCromos .owl-nav .owl-next
			{
				right:11% !important;
			}
			
			body
			{
				background-image:url(../img/imagen_patron_v2.png);
				background-size: cover;
				background-repeat:   no-repeat;
    			background-position: center center;
			}
			
			.contenidoCanvas
			{
				/*background-color:rgba(255,255,255,1);*/
				/*background-image:url(../img/albumfy_logo_a4-04.png);*/
				/*background-size:485px 686px;*/
			}
			
			.contenidoCanvas{
				position: absolute;
				top:0px;
				width: 95%;
				height: 95%;
				border: 2px dashed #ccc;
				margin: 3%;
			}
			
			
			#contenidoDeCromos
			{
				padding-top:7px;
				width:100%;
				margin-left:10% !important;
				/*float:right;*/
				background-color:#999;
			}
			#contenidoDeBoton
			{
				/*height:95px !important;*/
				padding-top:38px;
				left:70px;
				position:absolute;
				background-color:#999;
				z-index:777;
			}
			
			section
			{
				padding-top:15px;
				overflow:hidden;
			}

			.iconosFuera,.iconosRight,.iconosLeft
			{
				width:35px;
				height:35px;
				transition: all .35s;
				-moz-transition: all .35s;
				-webkit-transition: all .35s;
				-o-transition: all .35s;
				-ms-transition: all .35s;
			}
			.iconosFuera:hover,.iconosRight:hover,.iconosLeft:hover,#elCarrusel .owl-nav .owl-prev img:hover,#elCarrusel .owl-nav .owl-next img:hover
			{
				opacity:0.50;
				-moz-opacity:0.50;
				-webkit-opacity:0.50;
				-o-opacity:0.50;
				-ms-opacity:0.50;
			}
			.iconosRight
			{
				right:0px;
			}
			.iconosLeft
			{
				left:0px;
			}
			.iconosLeft,.iconosRight
			{
				width:24px !important;
				height:24px !important;
				position:absolute;
				
				
				z-index:500;
			}
			
			#elCarrusel .owl-nav .owl-prev,#elCarrusel .owl-nav .owl-next
			{
				background:none !important;
				box-shadow: 0px 0px 0px !important;
				-o-box-shadow: 0px 0px 0px !important;
				-ms-box-shadow: 0px 0px 0px !important;
				-webkit-box-shadow: 0px 0px 0px !important;
				-moz-box-shadow: 0px 0px 0px !important;
				
				width:80px;
				height:80px;
			}
			
			#elCarrusel .owl-nav .owl-prev img,#elCarrusel .owl-nav .owl-next img
			{
				width:auto;
				height:100%;
			}
			
			#elCarrusel .owl-nav .disabled img:hover
			{
				opacity:1;
				-moz-opacity:1;
				-webkit-opacity:1;
				-o-opacity:1;
				-ms-opacity:1;
			}