html, body {
	margin: 0;
	padding: 0;
	font-family: arial, helvetica, sans-serif;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.loader {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-color: rgba(60, 60, 60, 0.9);
	text-align: center;
	font-size: 2em;
	color: #cacaca;
	padding-top: 18%;
    background-image: url(../img/registro_bg_blur.jpg);
    background-size: cover;
    z-index: 9999;
}

.loader-message-cnt {
    display: inline-block;
    padding: .5em;
    background: #333;
    -webkit-border-radius: 1em;
    -moz-border-radius: 1em;
    border-radius: 1em;
}

.loader-icon {
	-webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
}

@-moz-keyframes spin { 100% { -moz-transform: rotateY(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotateY(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotateY(360deg); transform:rotateY(360deg); } }

.loader-icon {

}

.loader-message {

}

.editor-3d {
	margin: 0;
	padding: 0;
}

.editor-3d-canvas {
	margin: 0;
	padding: 0;
	/*
	width: 100% !important;
	height: 100% !important;
	*/
}

.controles {
	position: absolute;
	bottom: -20px;
	right: 20px;
	background-color: #ccc;
	-moz-transform: perspective(600px)  rotateX(60deg) translate3d(-20px, 100px, 70px);
	-webkit-transform: perspective(600px)  rotateX(60deg) translate3d(-20px, 100px, 70px);
	transform: perspective(600px) rotateX(60deg) translate3d(-20px, 100px, 70px);
	border-radius: 5em;
	width: 10em;
	height: 10em;
	background: -webkit-linear-gradient(#888, #ccc);
    background: -o-linear-gradient(#888, #ccc);
    background: -moz-linear-gradient(#888, #ccc);
    background: linear-gradient(#888, #ccc);
    text-align: center;
    opacity:0.4;
  	filter:alpha(opacity=40);
  	display: none;
}

.controles-aux {
	position: absolute;
	bottom: -20px;
	left: 20px;
	background-color: #ccc;
	-moz-transform: perspective(600px)  rotateX(60deg) translate3d(20px, 100px, 70px);
	-webkit-transform: perspective(600px)  rotateX(60deg) translate3d(20px, 100px, 70px);
	transform: perspective(600px) rotateX(60deg) translate3d(20px, 100px, 70px);
	border-radius: 5em;
	width: 10em;
	height: 10em;
	background: -webkit-linear-gradient(#888, #ccc);
    background: -o-linear-gradient(#888, #ccc);
    background: -moz-linear-gradient(#888, #ccc);
    background: linear-gradient(#888, #ccc);
    text-align: center;
    opacity:0.4;
  	filter:alpha(opacity=40);
  	display: none;
}

.controles .fa, .controles-aux .fa {
	display: block;
	color: #666;
	font-size: 4.5em;
}

.controles:hover, .controles-aux:hover {
	opacity:0.9;
  	filter:alpha(opacity=90);
}

.controles .fa.fa-chevron-up {
	font-size: 4em;
	padding-bottom: .3em;
	border-bottom: solid 1px #bbb;
}

.controles .fa:hover, .controles-aux .fa:hover {
	color: #fff;
	cursor: pointer;
}

a .fa-spin {
	display: none;
}

.block-hidden {
	display: none;
}

.modal input {
    width: 97%;
    font-size: 16px;
    padding: 4px;
    border: solid 1px #acacac;
    border-radius: 3px;
}

.error_promo_mensaje {
	width: 100%;
	font-size: 16px;
}

/*MODAL*/
.modal-outer{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 9998;
    text-align: center;
    display: none;
}
.temporal{display: block;}
.modal{
    position:relative;
    display:inline-block;
    margin:3%;
    box-sizing: border-box;
    width: 94%;
    max-width: 900px;
    padding:3em;
    background:#fff;    
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 1px 1px 8px 0px rgba(0, 0, 0, 0.91);
    -moz-box-shadow:    1px 1px 8px 0px rgba(0, 0, 0, 0.91);
    box-shadow:         1px 1px 8px 0px rgba(0, 0, 0, 0.91);
}
.modal-close{
    position:absolute;
    top:0.4em;
    right:0.3em;
    color:#333;
    font-size:1em;
}
.modal-close a{
    color:#333;
    padding:.2em;
}
.download-links, .download-links strong, .download-links a {
    font-size: 11px;
    color: #777;
}
.button-container { text-align: right; }
a.button-lil{
    display: inline-block;
    padding:.6em 1em;  
    margin-top:.6em;  
    margin-left:.3em; 
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background: #555;    
    color:#fff;
    text-decoration: none;
    font-size:14px;
}
a.button-lil:hover{
    background:#333;
}
a.button-light{
    background:#dcdcdc;
    color:#555;
}
a.button-light:hover{
    background:#ccc;
    color:#555;
}
label.error{
    width: 100%;
    padding: 1%;
    box-sizing: border-box;
    display: none;
    margin: .3em 0 .4em 0;
    background: #FFD3D9;
    color: #FF0808;
    font-size: 11px;
}
label.error i{ margin-right:.8em; font-size:13px;}
/*/MODAL*/


#options {
  margin: 0;
  position: absolute;
  bottom: 0;
  width: 100%;
  /*background-color: rgba(255, 255, 255, 0.3);*/
  padding: .1em 1em 1em 1em;
  box-sizing:border-box;
  z-index: 999;
}

#options button {
  background-color: rgb(255, 255, 255);
  background-image: none;
  border-bottom-color: rgb(204, 204, 204);
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-image-outset: 0px;
  border-image-repeat: stretch;
  border-image-slice: 100%;
  border-image-source: none;
  border-image-width: 1;
  border-left-color: rgb(204, 204, 204);
  border-left-style: solid;
  border-left-width: 1px;
  border-right-color: rgb(204, 204, 204);
  border-right-style: solid;
  border-right-width: 1px;
  border-top-color: rgb(204, 204, 204);
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border-top-style: solid;
  border-top-width: 1px;
  box-sizing: border-box;
  color: rgb(51, 51, 51);
  cursor: pointer;
  display: inline-block;
  font-family: Verdana, sans-serif;
  font-size: 14px;
  font-stretch: normal;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  /*height: 34px;*/
  letter-spacing: normal;
  line-height: 20px;
  margin-bottom: 0px;
  margin-left: 0px;
  margin-right: 0px;
  margin-top: 0px;
  overflow-x: visible;
  overflow-y: visible;
  padding-bottom: 6px;
  padding-left: 12px;
  padding-right: 12px;
  padding-top: 6px;
  text-align: center;
  text-indent: 0px;
  text-rendering: auto;
  text-shadow: none;
  text-transform: none;
  touch-action: manipulation;
  vertical-align: middle;
  white-space: nowrap;
  word-spacing: 0px;
  writing-mode: lr-tb;
  -webkit-writing-mode: horizontal-tb;
  margin-right: .5em;
  background-color: transparent;
  border: none;
  color: rgba(255, 255, 255, .6);
  font-size: 3.5em;
  outline: none;
}

#navigation {
  text-align: center;
  display: none !important;
}

#navigation button {
  margin: 0 .5em !important;
  padding: 0 !important;
}

.hashtag {
  width: 100%;
  background-size: cover;
  color: #51a3c9;
  font-size: 1.75em;
  padding: .25em 0;
  margin-bottom: 0 !important;
  margin: 0 !important;
}

.texto {
  text-align: left;
}

.ilustracion {
  float: left;
  width: 40%;
  margin: 0 .5em .5em 0;
}

.clear {
  clear: both;
}

label {
  display: block;
  text-align: left;
  font-weight: bold;
}

.btn-promo-enviar {
  background: #51a3c9 !important;
}

.formPromo {
  border: solid 1px #dadada;
  padding: 1em .5em;
  border-radius: 3px;
}