/* general */
*{ box-sizing: border-box; -moz-box-sizing: border-box;  -webkit-box-sizing: border-box}
body{width:100%; background:#FFF; color:#828282; font-size:.9em}
header, footer, .wrapper{ width:100%; margin:0 auto; clear:both; display:flex; position:relative}
article{width:1200px; clear:both; display:block; margin:0 auto; position:relative; height:100%}
section{height:100%}
.tran, a, a:hover, input, select, textarea, button{-moz-transition:all 300ms ease; -webkit-transition:all 300ms ease; -o-transition:all 300ms ease; transition:all 300ms ease}
.rad{-moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px}
a{text-decoration:none; color:#666}
a:hover{color:#09F}
.link_mf{ position:absolute; right:13px; bottom:10px}

ul{ -webkit-margin-before: 0em;    -webkit-margin-after: 0em;    -webkit-margin-start: 0px;    -webkit-margin-end: 0px;    -webkit-padding-start: 0px;}

/* grid 12 */
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-8-4, .col-9,.col-9-3, .col-10, .col-10-2, .col-11, .col-12{float:left; height:100%}

.col-12 {width: 100%}
.col-11 { width: 91.66666667%}
.col-10 { width: 83.33333333%}
.col-9 { width: 75%}
.col-8 { width: 66.66666667%}
.col-7 { width: 58.33333333%}
.col-6 { width: 50%}
.col-5 { width: 41.66666667%}
.col-4, .col-8-4 { width: 33.33333333%}
.col-3, .col-9-3 { width: 25%}
.col-2, .col-10-2 { width: 16.66666667%}
.col-1 { width: 8.33333333%}
.col-c { width: 100%; max-width: 500px; margin:20px auto !important; display:table !important; float:none !important}

.col-pull-12 {right: 100%}
.col-pull-11 {right: 91.66666667%}
.col-pull-10 {right: 83.33333333%}
.col-pull-9 {right: 75%}
.col-pull-8 {right: 66.66666667%}
.col-pull-7 {right: 58.33333333%}
.col-pull-6 {right: 50%}
.col-pull-5 {right: 41.66666667%}
.col-pull-4 {right: 33.33333333%}
.col-pull-3 {right: 25%}
.col-pull-2 {right: 16.66666667%}
.col-pull-1 {right: 8.33333333%}

.col-push-12 {left: 100%}
.col-push-11 {left: 91.66666667%}
.col-push-10 {left: 83.33333333%}
.col-push-9 {left: 75%}
.col-push-8 {left: 66.66666667%}
.col-push-7 {left: 58.33333333%}
.col-push-6 {left: 50%}
.col-push-5 {left: 41.66666667%}
.col-push-4 {left: 33.33333333%}
.col-push-3 {left: 25%}
.col-push-2 {left: 16.66666667%}
.col-push-1 {left: 8.33333333%}


.target div[class^='col-']{display:inline-block; margin:10px; padding: 20px}
.target .col-12{ width: calc(100% - 20px) }
.target .col-11{ width: calc((100% / 12) * 11 - 20px)}
.target .col-10{ width: calc((100% / 12) * 10 - 20px)}
.target .col-9{ width: calc((100% / 12) * 9 - 20px)}
.target .col-8{ width: calc((100% / 12) * 8 - 20px)}
.target .col-7{ width: calc((100% / 12) * 7 - 20px)}
.target .col-6{ width: calc((100% / 12) * 6 - 20px)}
.target .col-5{ width: calc((100% / 12) * 5 - 20px)}
.target .col-4{ width: calc((100% / 12) * 4 - 20px)}
.target .col-3{ width: calc((100% / 12) * 3 - 20px)}
.target .col-2{ width: calc((100% / 12) * 2 - 20px)}
.target .col-1{ width: calc((100% / 12) - 20px)}



.fluid{width: 100%}

/* micro-estilos */
.al-vertical{  position: relative;  top: 50%;  transform: translateY(-50%)}
.al-left{text-align:left}
.al-right{text-align:right}
.al-center{text-align:center}
.pa_0{padding:0} .pa_10{padding:10px}.pa_15{padding:15px} .pa_20{padding:20px} .pa_40{padding:40px} .pa_40_0{padding:40px 0} 
.ma_0{margin:0} .ma_10{margin:10px} .ma_15{margin:15px} .ma_20{margin:20px} .ma_20_0{margin:20px 0}

/* form */
input, select, textarea{ border:1px solid #d0d0d0; font-weight:700; background:#FFF; width: 100%; max-width: 700px; clear:both; margin:0 0 5px; float:left; padding:10px 15px;  -webkit-border-radius:0; border-radius:0; -webkit-appearance: none; -moz-appearance: none; appearance: none}
button, input[type=button]{ background:#383838; color:#FFF; border:0; width:auto; padding:10px 12px; cursor:pointer; clear:both}
button:hover, input[type=button]:hover{background:#333; color:#FFF}
select:focus { outline: none}
label{display: block; float:left; padding:10px 0 5px}




::-webkit-input-placeholder { /* Chrome/Opera/Safari */	font-style:italic; color:#CCC}
::-moz-placeholder { /* Firefox 19+ */	font-style:italic; color:#CCC}
:-ms-input-placeholder { /* IE 10+ */	font-style:italic; color:#CCC}
:-moz-placeholder { /* Firefox 18- */	font-style:italic; color:#CCC}

.ms-ok, .ms-error,  .ms-alert{width: 100%; padding: 10px; background: #F0EECF}
.ms-error { color: #b94a48}
.ms-ok { color: #468847}
.ms-alert {color: #111}

/* botones */
.btn, button .btn, input[type=button].btn{padding: 7px 10px; margin: 5px 0; color: white}
.btn:hover, button .btn:hover, input[type=button].btn:hover{ padding: 7px 10px; margin: 5px 0; color: white}

button, input[type=submit]{ background:#383838; color:#FFF; border:0;  width:auto; min-width:100px; padding:10px 12px; cursor:pointer; clear:both}
button:hover, input[type=submit]:hover{background:#333; color:#FFF}


/* iconos */
.ico-next{  display: inline-block;  width: 14px;  height: 14px;  margin: 3px -6px 2px 4px;  line-height: 14px;  vertical-align: text-top;  background-image: url("../img/ico-next.png");  background-position: 0 0;  background-repeat: no-repeat}
.ico-prev{  display: inline-block;  width: 14px;  height: 14px;  margin: 3px 4px 2px -6px; transform: rotate(180deg); line-height: 14px;  vertical-align: text-top;  background-image: url("../img/ico-next.png");  background-position: 0 0;  background-repeat: no-repeat}


.paginator{text-align: center}
.paginator a{background: #C0C0C0; color: #111; padding: 3px 8px; margin: 1px}
.paginator a:hover{background: #555; color: #CCC; text-decoration: none}
.paginator strong{background: #A8A8A8; color: #777; padding: 3px 8px; margin: 1px}

/* de menos de 1280px*/
@media only screen and (max-width: 1279px) {
	article{width:960px}
}

/* de menos de 1024px*/
@media only screen and (max-width: 1023px) {
	article{width:730px}
}

/* de menos de 768px*/
@media only screen and (max-width: 767px) {
	article{width:100%}
	.target div[class^='col-']{width: calc(100% - 20px); margin: 5px 10px}
}

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