/* general */
*{-moz-box-sizing: border-box;  -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0}
body{width:100%; height:100%; background:#FFF; color:#000; font-size:1em}
header, footer, .wrapper{ width:100%; margin:0 auto; clear:both; position: relative;}
article{width:1200px; clear:both; display:block; margin:0 auto; position:relative; height:100%}
section{height:100%}
a, a:hover, input, select, textarea, button, .firma img{-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}

nav ul li{display: inline-block}

/* 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:60%; margin:0 auto; display:table; 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 .col-3{display:inline-block; width:23.5%; margin:0 2% 2% 0; background:#f0f0f0;}
.target .col-4{display:inline-block; width:32%; margin:0 2% 2% 0; background:#f0f0f0}
.target .col-4:nth-child(3n+0), .target .col-3:nth-child(4n+0){margin-right:0}

ul{list-style: none; margin-block-start:0; margin-block-end:0; margin-inline-start:0; margin-inline-end:0; padding-inline-start:0}

/* 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_30{padding:30px}
.ma_0{margin:0} .ma_10{margin:10px}.ma_15{margin:15px}.ma_20{margin:20px}.ma_30{margin:30px}
.fluid{width: 100%}

/* form */
input, select, textarea{ border:0 solid #CCC; font-size: 1em; background: #444; color: #FFF; width:100%; clear:both; margin:0 0 5px; float:left; padding:10px 15px; font-family:inherit;   -webkit-border-radius:0; border-radius:0; -webkit-appearance: none; -moz-appearance: none; appearance: none}
button, input[type=button]{ background:#CCC; border:0; width:auto; padding:10px 12px; cursor:pointer; clear:both}
button:hover, input[type=button]:hover{background:#333; color:#FFF}
select{background: url(../img/select-cross.png) center right no-repeat;}
select:focus { outline: none}
label{display: flex; padding: 5px}
input[type=checkbox]{ width: 10px; padding: 9px; float: left; border-radius: 12px; margin: 5px 7px 5px 0px; border: 0 solid #CCC;}
input[type=checkbox]:checked {background: #5CB85C}
input[type=submit] { cursor: pointer; }

.ms-error { background: #D9534F}
.ms-ok { background-color: #5CB85C}
.ms-alert{background-color:#F0AD4E}
.ms-error, .ms-ok, .ms-alert{width:100%; color:#FFF; padding:10px; margin:5px 0}

.firma{position: absolute; right: 10px; bottom: 10px}
.firma img {transform: scale(1)}
.firma img:hover{ transform:scale(1.1)}

/* 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}
	.col-2{width:33.33333333%}
	.col-3{width:50%}
	.target .col-3{width:49%}
	.target .col-3:nth-child(2n+0){margin-right:0}
}

/* de menos de 768px*/
@media only screen and (max-width: 767px) {
	article{width:450px}
	.target [class*="col-"], section [class*="col-"]{width:100%; margin-left:0; margin-right:0; padding-left:0; padding-right: 0}
}

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