html{height: 100%}
body{font-family: 'Roboto', sans-serif; color: #343434; background:#343434}
body .wrapper{ background: url(../img/bg-body.png)}

h1{font-size: 1.3em; color: #e4a030}
h2{font-size: 1.2em}
h2 img{margin-bottom: -2px}

a{color: #e4a030}
a:hover{color: #ffb744}

/*botones*/
.btn{border-radius: 24px; padding: 10px 25px; margin: 15px 5px 5px 0 !important; background: #e4a030; display: inline-block}
.btn:hover{padding: 10px 25px; background: #fab035}
input[type=button].btn{ padding: 11px 28px; font-weight: 300; margin-right: 5px}
input[type=button].btn:hover{ padding: 11px 28px; margin-right: 5px}
.btn-center{width: 100%; text-align: center}
.btn-center .btn{float: none}

.comment {font-size:11px; }

/*color botones*/
.bg-green{ background: #68b164 !important}
.bg-green:hover{background: #78cf73 !important}
.bg-black{ background: #343434 !important}
.bg-black:hover{ background: #e4a030 !important; color: #343434}
.bg-grey{background: #c1c0bf !important}
.bg-grey:hover{background: #a2a2a2 !important}
.bg-red{background: #D03436  !important}
.bg-red:hover{background: #F73032 !important}

/*form*/
input, select, textarea{border: 1px solid #bebebe; font-weight: 500; font-size: 1em}
select{background: url(../img/select.png) right center no-repeat}

/*notificaciones*/
.ms-error, .ms-alert, .ms-ok{padding: 15px}
.ms-error{background: #f3d6d6; }
.ms-alert{background:  #f7e7ca; color: #b37509}
.ms-ok{background: #d7f4d5}

/*login*/
.login, .login article, .login section, .login .wrapper{height: 100%}
.login{background: url(../img/bg-login.jpg) center center; background-size: cover}
.login .col-c{background: #f7f7f7; padding: 30px; max-width: 500px; -webkit-box-shadow: 0px 0px 27px 2px rgba(0,0,0,0.2); -moz-box-shadow: 0px 0px 27px 2px rgba(0,0,0,0.2); box-shadow: 0px 0px 27px 2px rgba(0,0,0,0.2);}
.login .logo{position: absolute; top: -130px; text-align: center; margin-left: calc(50% - 140px)}
.login {margin:39px 0 -80px}

/*header*/
header{background: #FFF; display: inline-block}
.isologo{position: absolute; top: 13px; left: 13px; z-index: 100000}

/*menu*/
.nav{background: #343434; width: 100%; font-size: .9em}
.stellarnav {width: 100%}
.stellarnav ul{text-align: right}
.stellarnav>ul>li>a{padding: 20px}
.stellarnav.light, .stellarnav.light ul ul{background: #343434;}
.stellarnav.light li a{color:#FFF}
.stellarnav.light .call-btn-mobile, .stellarnav.light .close-menu, .stellarnav.light .location-btn-mobile, .stellarnav.light .menu-toggle {color: #FFF;text-align: right}
.fa-bars{font-size: 2em}
.stellarnav .menu-toggle{padding: 15px 15px 10px}
.usuario {position: absolute; top: 0; right: 0}
.usuario a{padding:0 !important}
.usuario a img{float: right; width: 56px}
.usuario-name{color:#888; padding: 15px !important;}

/*tablas*/
table { width: 100%; border-collapse: collapse}
tr:nth-of-type(odd) {background: #fff}
tr{border-bottom: 1px solid #ccc;}
th { background: #777; color: white; font-weight: bold}
td, th { padding: 6px; text-align: left}
.col-order{text-align: center}
.col-actions{text-align: right}
.col-actions .fa-lg{margin: 2px 3px;}
.col-actions .menu-activo, .col-actions .menu-inactivo{float: left; margin-left: 5px;}

/*cards*/
.wrapper{padding: 20px 0 30px}
.target div[class^='col-'], .carta-card{ background: #FFF; -webkit-box-shadow: 0px 0px 27px 2px rgba(0,0,0,0.2); -moz-box-shadow: 0px 0px 27px 2px rgba(0,0,0,0.2); box-shadow: 0px 0px 27px 2px rgba(0,0,0,0.2);}


/* carta */
.carta-card{width:calc((100% / 3) - 10px); position: relative; border-radius: 20px; border: 0; padding: 20px;}
.carta-card h2{margin: 0 0 15px; font-size:1.4em}
.carta-card h4{margin: 5px 0 0; font-size: .8em; color: #888;}
.carta-card .carta-action{position: absolute; right: 15px; top: 15px;}
.carta-card .carta-action i{font-size: 1.6em; padding: 0 0 0 5px;}
.carta-card .carta-options{display: inline-block;}
.carta-card .carta-options a{float: left; text-align: center; width: calc((100% / 2) - 10px); padding: 10px; display: inline-block; background: #f2f2f2; margin: 5px; border-radius: 20px;}
.carta-card .carta-options i{display: block; padding: 15px;}


.menu-activo, .menu-inactivo{background: #68b164; color: #fff; padding: 3px 12px; border-radius: 15px; float: left;}
.menu-inactivo{background: #888; color: #fff}

/*footer*/
footer{color: #CCC; padding: 20px; text-align: right}



.editChico {width:90px }
.editMedio {width:150px }
.editGrande {width:360px }
.editExtraGrande {width:560px }
.editExtraGrande2 {width:760px }


input[type=checkbox]{ width: 10px; padding: 9px; float: left; border-radius: 5px; margin: 5px 7px 5px 0px; border: 2px solid #CCC;}
input[type=checkbox]:checked {background: #5CB85C}

input[type=radio]{ width: 11px;  height:11px; float: left; border-radius: 12px; margin: 4px 7px 4px 0px; border: 2px solid #CCC;}
input[type=radio]:checked {background: #5CB85C}

.contentHome{width:97%; min-width:970px; margin:0 auto; position:relative}

.items {text-align:center}
.items li{background:#FFCC33; float:left; margin:10px; opacity:0.90; filter:alpha(opacity=90); border-radius: 20px; text-align:center; color:#FFF; padding:25px 10px 10px; margin:5px; display:inline-block; width:calc((100% / 3) - 10px); ma}
.items li:hover{opacity:1; filter:alpha(opacity=100)}
.items p{text-align:center}
.items img{width: 60%;}
.items h2, .items a{color:#FFF}
.items a:hover{ text-decoration:none; color:#FFF}

.itemsPago {text-align:center}
.itemsPago li{background:#19a1e1; float:left; margin:10px; opacity:0.90; filter:alpha(opacity=90); border-radius: 20px; text-align:center; color:#FFF; padding:10px 10px 10px; margin:5px; display:inline-block; width:calc((100% / 1) - 10px); ma}
.itemsPago li:hover{opacity:1; filter:alpha(opacity=100)}
.itemsPago p{text-align:center}
.itemsPago img{width: 60%;}
.itemsPago h2, .itemsPago a{color:#FFF}
.itemsPago a:hover{ text-decoration:none; color:#FFF}

.error, .bien, .nota{ background:url(images/ico_error.png) 6px center no-repeat #FEECEC; cursor:pointer; padding:6px; margin:8px 0; border:1px dashed #F4DEDE; color:#822A2A; font-size:.9em; padding-left:25px}
.bien{ background:url(images/ico_bien.png) 6px center no-repeat #EAF7D9; color:#597f27}
.nota{ background:url(images/ico_nota.png) 6px center no-repeat #FDF4CB; color:#7d7033}

/* modificadores */
.ta_l{text-align:left} .ta_r{text-align:right} .ta_c{text-align:center}  .ta_j{text-align: justify} 
.modificadores a{opacity:0.80; filter:alpha(opacity=80)}
.modificadores a:hover{opacity:1; filter:alpha(opacity=100)}
.borrar, .editar, .act, .inact, .fotos, .videos, .audios, .ampliar, .ico_config, .ico_activo, .ico_inactivo{ background:url(../img/ico_modificadores.png) no-repeat 0 0; float:left; margin:0 3px 3px 0; display:inline-block; overflow:hidden; text-indent:10000em; width:25px; height:25px}
.act{ background-position:0 -26px}
.inact{ background-position:-26px -26px}
.editar{ background-position:-26px 0}
.borrar{ background-position:-52px 0}
.audios{ background-position:-78px 0}
.videos{ background-position:-104px 0}
.ampliar{ background-position:-130px 0}

.ico_inactivo{ background-position:0 -52px}
.ico_activo{ background-position:-26px -52px}
.ico_config{ background-position:-52px -52px; position:absolute; left:-34px; top:4px}

.edit_images{ padding:15px; margin:12px 0; clear:both; background:#F2F2F2; }
.edit_images .imagen{ background:#FFF; margin:0 5px 5px 0; width:200px; height:250px; float:left}
.edit_images .imagen p{padding:5px; font-size:.8em}
.edit_images .imagen a{float:right}
.edit_images .imagen input{width:40px}
.carga_imagen{ float:left; border-top:1px #CCC solid; width:100%}

.edit_images .imagenPre{ background:#FFF; margin:0 5px 5px 0; width:200px; height:150px; float:left; padding:10px}

/*** FIXES ***/
.clfix:after{visibility:hidden; display:block; content:"."; clear:both; height:0} /*clearfix*/
.clfix{display:block}


/* formularios 2021 */
.estilo-form label:first-child{border: 0;}
.estilo-form label, .form-cols{width: 100%; border-top:1px solid #f2f2f2 ; margin-top: 12px;}
.estilo-form .input-activo{line-height: 2.2em}
.estilo-form .radio-content{padding: 1px}
.estilo-form input[type=text]{max-width: 500px}
.estilo-form input[type=radio]{width: 14px; height: 14px; margin: 3px 7px 4px 0}
.estilo-form h4{display: inline-block; margin: 25px 0 0;}
.estilo-form .comment{float: left; padding: 10px;}
.form-cols{display: inline-block;}
.form-cols div:first-child{padding-left: 0;}
.form-cols div[class*='col-']{box-shadow: none; margin: 0;}


.editChico {width:150px;}
.codigoQR {width:150px;}
.editMedio {width:210px;}
.editGrande {width:310px;}


.refes{ float: left; display: inline; background: #f2f2f2; padding: 1px 10px 5px 5px; margin: 1px; border-radius: 20px}
.refes img{width: 23px; margin-bottom: -8px}
/* de menos de 1280px*/
@media only screen and (max-width: 1279px) {
}

/* de menos de 1024px*/
@media only screen and (max-width: 1023px) {
	.carta-card{width:calc((100% / 2) - 10px)}
}

/* de menos de 768px (480)*/
@media only screen and (max-width: 767px) {
	.login .logo{width: 75px; top: -95px; margin-left: calc(50% - 64px)}
	header h1{padding: 0 15px;}
	.stellarnav{width: 100%;}
	.stellarnav .menu-toggle{padding: 12px 15px}
	.has-sub ul li{background: #444 !important;}
	.items li {width:calc((100% / 2) - 10px);}
	.isologo{width: 58px; top: 10px;}
	
	.carta-card{width:calc(100% - 30px); margin: 15px;}

	/* estilo tablas */
	.stacktable{border: 1px solid #ccc; margin-bottom: 12px;}
	.col-actions, .col-order{text-align: left;}
	.stacktable tr, .stacktable tr:nth-of-type(odd){ background: #fff !important;}
	.stacktable .st-key{font-weight: bold; padding: 5px; width: 30%; background: #f2f2f2;}
	.stacktable td, .stacktable th{border: 0;}
	.col-actions .menu-activo, .col-actions .menu-inactivo{float: right}

	.form-cols div[class*='col-']{padding: 10px 0;}

    /* Force table to not be like tables anymore 
	table, thead, tbody, th, td, tr { 
		display: block; 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) 
	thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	tr { border: 1px solid #ccc; }
	
	td { 
		/* Behave  like a "row" 
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 50%; 
	}
	
	td:before { 
		/* Now like a table header 
		position: absolute;
		/* Top/left values mimic padding 
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
	}
	
	
	/*Label the data
	
	td:nth-of-type(1):before { content: ""; }
	td:nth-of-type(2):before { content: ""; }
	td:nth-of-type(3):before { content: ""; }

	*/

}

/* de menos de 480px, minimo 320px (320)*/
@media only screen and (max-width: 479px) {
	
	
}

