* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

[class*=grid-]{
	float: left;
    padding-top: 2px;
    padding-bottom: 2px;
	padding-left: 15px;
	padding-right: 15px;
	display: inline-block;
}

[class*=grid-]>input,[class*=grid-]>select,[class*=grid-]>textarea {
	width: 100%;
}

/* grid global independente do tamanho da tela */

.grid-xs-1 { width: 5%; }
.grid-xs-2 { width: 10%; }
.grid-xs-3 { width: 15%; }
.grid-xs-4 { width: 20%; }
.grid-xs-5 { width: 25%; }
.grid-xs-6 { width: 30%; }
.grid-xs-7 { width: 35%; }
.grid-xs-8 { width: 40%; }
.grid-xs-9 { width: 45%; }
.grid-xs-10 { width: 50%; }
.grid-xs-11 { width: 55%; }
.grid-xs-12 { width: 60%; }
.grid-xs-13 { width: 65%; }
.grid-xs-14 { width: 70%; }
.grid-xs-15 { width: 75%; }
.grid-xs-16 { width: 80%; }
.grid-xs-17 { width: 85%; }
.grid-xs-18 { width: 90%; }
.grid-xs-19 { width: 95%; }
.grid-xs-20 { width: 100%; }

/* grid para dispositivos com tela estreita e.g.: smartphones */
@media (max-width: 767px){
	.hidden-xs, .visible-sm, .visible-md, .visible-lg {display: none !important;}
}

@media (min-width: 768px) and (max-width: 991px){
	.visible-xs, .hidden-sm, .visible-md, .visible-lg {display: none !important;}
}

@media (min-width: 992px) and (max-width: 1199px){
	.visible-xs, .visible-sm, .hidden-md, .visible-lg {display: none !important;}
}

@media (min-width: 1200px){
	.visible-xs, .visible-sm, .visible-md, .hidden-lg {display: none !important;}
}

/* grid para dispositivos com tela pequena e.g.: tablets e monitores de baixa resolução */
@media (min-width: 768px){
	
	.grid-sm-1 { width: 5%; }
	.grid-sm-2 { width: 10%; }
	.grid-sm-3 { width: 15%; }
	.grid-sm-4 { width: 20%; }
	.grid-sm-5 { width: 25%; }
	.grid-sm-6 { width: 30%; }
	.grid-sm-7 { width: 35%; }
	.grid-sm-8 { width: 40%; }
	.grid-sm-9 { width: 45%; }
	.grid-sm-10 { width: 50%; }
	.grid-sm-11 { width: 55%; }
	.grid-sm-12 { width: 60%; }
	.grid-sm-13 { width: 65%; }
	.grid-sm-14 { width: 70%; }
	.grid-sm-15 { width: 75%; }
	.grid-sm-16 { width: 80%; }
	.grid-sm-17 { width: 85%; }
	.grid-sm-18 { width: 90%; }
	.grid-sm-19 { width: 95%; }
	.grid-sm-20 { width: 100%; }
}

/* grid para dispositivos com tela media e.g.: monitores de computador */
@media (min-width: 992px){
	
	.grid-md-1 { width: 5%; }
	.grid-md-2 { width: 10%; }
	.grid-md-3 { width: 15%; }
	.grid-md-4 { width: 20%; }
	.grid-md-5 { width: 25%; }
	.grid-md-6 { width: 30%; }
	.grid-md-7 { width: 35%; }
	.grid-md-8 { width: 40%; }
	.grid-md-9 { width: 45%; }
	.grid-md-10 { width: 50%; }
	.grid-md-11 { width: 55%; }
	.grid-md-12 { width: 60%; }
	.grid-md-13 { width: 65%; }
	.grid-md-14 { width: 70%; }
	.grid-md-15 { width: 75%; }
	.grid-md-16 { width: 80%; }
	.grid-md-17 { width: 85%; }
	.grid-md-18 { width: 90%; }
	.grid-md-19 { width: 95%; }
	.grid-md-20 { width: 100%; }	
}

/* grid para dispositivos com tela media e.g.: monitores widescreen e smartTVs */
@media (min-width: 1200px){
	
	.grid-lg-1 { width: 5%; }
	.grid-lg-2 { width: 10%; }
	.grid-lg-3 { width: 15%; }
	.grid-lg-4 { width: 20%; }
	.grid-lg-5 { width: 25%; }
	.grid-lg-6 { width: 30%; }
	.grid-lg-7 { width: 35%; }
	.grid-lg-8 { width: 40%; }
	.grid-lg-9 { width: 45%; }
	.grid-lg-10 { width: 50%; }
	.grid-lg-11 { width: 55%; }
	.grid-lg-12 { width: 60%; }
	.grid-lg-13 { width: 65%; }
	.grid-lg-14 { width: 70%; }
	.grid-lg-15 { width: 75%; }
	.grid-lg-16 { width: 80%; }
	.grid-lg-17 { width: 85%; }
	.grid-lg-18 { width: 90%; }
	.grid-lg-19 { width: 95%; }
	.grid-lg-20 { width: 100%; }
	
}

[class^=line]{
	display: inline-block;
	width: 100%;
}

.line {
	margin: 0;
}

.line-xs {
	margin-top: 5px; 
	margin-bottom: 5px; 
}

.line-sm {
	margin-top: 10px; 
	margin-bottom: 10px; 
}

.line-md {
	margin-top: 15px; 
	margin-bottom: 15px; 
}

.line-lg {
	margin-top: 20px; 
	margin-bottom: 20px; 
	display: inline-block;
	width: 100%;
}

.line-xl {
	margin-top: 35px; 
	margin-bottom: 35px; 
	display: inline-block;
	width: 100%;
}

.right{
	margin-right: 0;
	padding-right: 0;
}

.left{
	margin-left: 0;
	padding-left: 0;
}

.top{
	margin-top: 0;
	padding-top: 0;
}

.bottom{
	margin-bottom: 0;
	padding-bottom: 0;
}

.npadding{
	padding: 0 !important;
}

.fit {
	width: 100%;
	margin: 0;
	padding: 0;
}