/* 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}
article{width:1200px; clear:both; display:block; margin:0 auto; position:relative; height:100%}
section{height:100%}
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}

nav ul li{display: inline-block}
.designer{position: absolute; bottom: 10px; right: 5px}

/* 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:40%; margin:0 auto; display:table; float:none !important}
.col-cc { width:75%; 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}
.fl-left{float: left}.fl-right{float: right}
.pa_0{padding:0} .pa_10{padding:10px}.pa_15{padding:15px}.pa_20{padding:20px}.pa_30{padding:30px} .pa_40{padding:40px} .pa_300{padding:30px 0} .pa_400{padding:40px 0} .pa_4000{padding:40px 0 0} .pa_6030{padding:60px 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:1px solid #CCC; width:95%; max-width: 350px; clear:both; margin:0 10px 5px 0; 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:focus { outline: none}

.check-label{float: left; width: 70%;}
input[type=checkbox]{width: 20px; float: left; clear: none; margin: 4px}

.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}


/* 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) {
	.target [class*="col-"], section [class*="col-"]{width:100%; margin-left:0; margin-right:0; padding-left:0; padding-right: 0}
	input, select, textarea{margin-left:0}
	.mobile-no{display: none}
	article, nav ul{width: 100%}
}

/* de menos de 480px, minimo 320px*/
@media only screen and (max-width: 479px) {
	input, select, textarea{margin-left:0; margin-right: 0; width: 100%}
}