/* ==========================================================================
Estrutura Responsivo - Media Queries
========================================================================== */
/* 
*1200px - Monitores Wide
*1024px - Tablets maiores em modo paisagem, monitores antigos
*768px  - Tablets maiores em modo retrato
*600px  - Tablets pequenos
*480px  - Smartphones no modo paisagem
*320px  - Smartphones no modo retrato
*/

/* Paisagem tablet / Paisagem desktop */

@media (max-width: 1200px) { 
	.container-narrow {  
	  max-width: 380px;
	  margin-top: 8%;
	}
	
	.col-lg-2-4 { width: 20%; float: left; }
	
	.info .alert-block { min-height: auto; }

	/*.modal-dialog {
		width: 800px;
		padding: 15px;
		z-index: 99999;
	}*/
}

@media (min-width: 992px)  { 
	.col-lg-2-4  {  width: 20%; float: left; }
}


@media (max-width: 991px) { 
	a:hover { text-decoration: none; }
	.page-title { padding: 10px; }
	
	.inline-desktop { display: inherit; }
	.inline li { display: inline; margin-right: 10px; }
			
	.pull-right-desktop { float: none; }
	
	.hidden-sm.show, .visible-lg.show { display: inherit !important; }
	
	.bg-white-desktop { background-color: transparent; }
	
	.navbar > .btn { padding: 10px; }
	.navbar-brand { /*font-size: 1.5em; margin-top: 2px;*/	}
	
	
	.table-responsive {
		width: 100%;
		margin-bottom: 15px;
		overflow-y: hidden;
		overflow-x: scroll;
		border: none;
		/*border: 1px solid #dddddd;*/
	}
}


@media (min-width: 768px) { 
	/*.row { margin-left: -15px; margin-right: -15px; }*/
	
	::-webkit-scrollbar  { width: .90em; height: .25em; position: absolute; }
	::-webkit-scrollbar-thumb { background-color: rgba(0,0,0,0.15); }
	::-webkit-scrollbar-track { background-color: rgba(0,0,0,0.0); }
	
	textarea::-webkit-scrollbar { width: 1em; }
	.navbar-brand { margin-left: auto; margin-right: auto; }
	.bg .navbar-brand { border-right-color: transparent; }
	/*.navbar-form input { transition: width .3s ease-in-out 0s; }
	.navbar-form input:focus { width: 300px; }*/
	
	.nav-primary > ul > li > .dropdown-menu  { margin-top: -1px; margin-left: 0;}
	.nav-vertical > ul > li > a > i { display: block; font-size: 1.2em; margin:2px auto; }
	.nav-vertical > ul > li > a { text-align: center; border-bottom: none; font-size: 11.5px; }
	.nav-vertical.nav-icon > ul > li > a span { display: none; }
	.nav-vertical.nav-icon > ul > li > a i { margin: 8px auto; }
	.nav-primary.nav-vertical > ul > li > a > .badge { 
		font-size: 11px;
		position: absolute; 
		top: 4px; 
		right: 15px; 
		padding:3px 6px;
	}
	
	#nav { 
		width: 150px;
		position: absolute;
		top:50px;
		left: 0; 
		bottom: 0; 
		z-index:1000;
	}
	#nav.nav-vertical { width: 90px; }
	#nav + #content,
	#nav + #content-include { padding-left: 150px; }
	#nav.nav-vertical + #content,
	#nav.nav-vertical + #content-include { padding-left: 90px; }
	
	.nav-primary.nav-doc > ul > li > a { 
		border-bottom: none; 
		padding: 3px 20px; 
		text-shadow:none;
	}
	.nav-primary .affix { top: 0; min-width: 149px; }
	.nav-primary.nav-vertical .affix { top: 0; min-width: 89px; }
	.navbar-fixed .nav-primary .nav { top: 50px; }
	
	.content-sidebar {
		width:100%;
		border-bottom: 1px solid #d1d4d7;
		border-spacing: 0;
		display: table;
		table-layout: fixed;
	}
	.content-sidebar .sidebar { border:0 solid #d1d4d7; border-right-width: 1px; }
	.main + .sidebar { border-right-width: 0; border-left-width: 1px; }
	.sidebar { 
		width: 200px;
		display: table-cell;
		vertical-align: top;
	}
	.sidebar-small { width: 160px; }
	.sidebar-large { width: 300px; }
	
	.modal { overflow-y: auto; }
	.modal-content { 
		-webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
		   -moz-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
				box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
	}
	.modal-dialog {
		width: 800px;
		padding: 15px;
		z-index: 99999;
		margin: 30px auto;
	}

}


/* Retrato tablet / Paisagem desktop */
@media (max-width: 767px) { 
	
	body.slide-nav { overflow: hidden; }

	h1, h2, h3, h4, h5, h6,
	.h1, .h2, .h3, .h4, .h5, .h6 { text-align: center; }
	ul.h3, ul.h4 { padding: 5px 0 5px 0px; list-style-type: none; }
	.media-body .h6 { text-align: left; }

	
	p { text-align: center; }
	
	#header, #content  {
		padding-bottom: 1px; 
		-webkit-backface-visibility: hidden;
		-webkit-transition-delay: 0s;
		-webkit-transition: -webkit-transform 0.2s ease;
		   -moz-transition: -moz-transform 0.2s ease 0s;
				transition: transform 0.2s ease 0s;
		-webkit-transform: translate3d(0px, 0px, 0px);
		   -moz-transform: translate3d(0px, 0px, 0px);
				transform: translate3d(0px, 0px, 0px);
	}
	
	.container-narrow {  margin-top: 5%; }
	.spacing1 { margin-top: 15px; }	
	
	.menu-comandos { text-align: center; }
	.btn-esp { margin-top: 0; } 
	.nav { background-color: #233445; /*background-color: #233445;*/ }
	.slide-nav #nav { 
		position: absolute; 
		left: 0;
		top: 0;
		bottom: 0;
		width: 75%;
		display: block !important;
		overflow-y: auto;  /* barra de rolagem vertical */
		z-index: 2000;
	}
	.slide-nav .slide-nav-block { 
		display:block !important;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: 1950;
	}
	.slide-nav > #content,
	.slide-nav > #content-include  {  opacity: 0.3; filter: alpha(opacity=30); }
	.slide-nav > #header, .slide-nav > #content, 
	.slide-nav > #header, .slide-nav > #content-include  { 
		overflow: hidden;
		-webkit-transform: translate3d(75%, 0px, 0px);
		   -moz-transform: translate3d(75%, 0px, 0px);
		        transform: translate3d(75%, 0px, 0px);
	}
	.slide-nav.slide-nav-right #nav { left: auto;right: 0}
	.slide-nav.slide-nav-right > #header, .slide-nav.slide-nav-right > #content,
	.slide-nav.slide-nav-right > #header, .slide-nav.slide-nav-right > #content-include  { 
		-webkit-transform: translate3d(-75%, 0px, 0px);
		   -moz-transform: translate3d(-75%, 0px, 0px);
			   transform: translate3d(-75%, 0px, 0px);
	}
	
	.nav-primary .dropdown-menu { background-color: #233445; }
	.nav-primary .dropdown-menu { 
		position: relative; 
		left: 0; 
		float: none; 
		display: block; 
		border: none; 
		padding-bottom: 0; 
		-webkit-box-shadow: none; 
		   -moz-box-shadow: none;
				box-shadow: none; 
		z-index: 0;
	}
	.nav-primary .dropdown-menu a { background: #233445; color: #8e9eae; border-bottom: 1px solid #2a3b4c; }
	.nav-primary.bg-light .dropdown-menu a { color: #3e4e5e; border-bottom-color:#d1d4d7; }
	.nav-primary.bg-light .dropdown-menu a:hover { color: #fff; }  
	.nav-primary .nav { position: static; }
	.nav-primary .dropdown-menu > .divider { display: none; }
	
	.main.padder { padding: 0 }
	/*.row, .row .row { margin-left: -10px; margin-right: -10px; }*/
	/*.row [class*="col-"] { padding-left: 10px; padding-right: 10px; }*/
	.shift { display: none !important; }
	.shift.in { display: block !important; }
	.row-2-phone [class*="col-"] { width: 50%; float: left; }
	.row-2-phone .col-newline { clear: none; }
	.row-2-phone li:nth-child(odd)  { clear: left; margin-left: 0; }  
	.visible-xs-inline { display: inline-block !important; }
	.hidden-xs-only { display: none !important; }
	.text-center-sm { text-align: center; }
	
	.navbar { padding: 0; }
	.navbar-brand span { display: none; }
	.navbar-brand  { 
		/*font-size: 1.5em;*/
		float: none;
		display: block;
		margin: 0;
		padding-left: 48px;
		margin-top: 0;
	}
	.navbar-nav .open .dropdown-menu  {
		background-clip: padding-box; 
		position: absolute;
		background-color: #ffffff;
		border: 1px solid #cccccc;
		border: 1px solid rgba(0, 0, 0, 0.15);
		border-radius: 4px;
		-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
		   -moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
		        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
	}
	.navbar > .btn { padding: 11px; }
	.navbar-avatar > li > a { background: #fff; }
	.navbar-avatar .img-cont { margin-top: -3px; margin-bottom: -3px; } 
	.navbar-form { float: none; border: none; }
	.navbar-form  { width: 50%; }
	.nav-toggle { 
		position: absolute; 
		left: 0;
		top: 0;
	}
	
	.padder-sm { padding-left: 15px; padding-right:15px; }
	.h { font-size: 150px; }
	.line-vh {
		height: auto;
		padding: 3px 0 9px 0;
		margin-bottom: 0;
	}
	
	
	div.jGrowl div.alerta { width: 95%; }
}


/* Retrato smartphone e menor resolução */
@media (max-width: 480px) {
	h1 { font-size: 1.8em; }
	h2 { font-size: 1.5em; }
	h3 { font-size: 1.3em; }
	h4 { font-size: 1.1em; }
	h5 { font-size: 1.1em; }
	h6 { font-size: 1.0em; }

	html {
		overflow-x: hidden;  /* barra de rolagem horizontal */
		overflow-y: auto;  /* barra de rolagem vertical */
	}

  
	.btn-group a.btn { 
	  width: 100%; display: block;
	  -webkit-border-radius: 0;
		 -moz-border-radius: 0;
			  border-radius: 0;	
	}
	.container-narrow { margin-top: 0; }
	.navbar-brand { font-size: 1.2em; /*margin-top: 4px;*/ }
	.navbar-form { float: none; border: none; }
	.navbar-form  { width: 75%; }

	.modal-header { padding: 5px; }
	.modal-header .close { margin-top: 0; margin-right: -10px; margin-bottom: -15px; } 
	.modal-header h1 { font-size: 1.8em; }

	.modal-dialog { padding: 15px; z-index: 99999; }
	.modal-body { padding: 10px; }
	.modal-content {
		-webkit-box-shadow: none;
		   -moz-box-shadow: none;
				box-shadow: none;
	}
	.modal-footer { padding: 10px 10px 30px 10px; }
	
	.panel-heading .nav-tabs { background-color: transparent; border: none; border-radius: 4px 4px 0 0; } 
	.panel-heading .nav-tabs li a { padding: 5px 10px; }
	.panel-heading .nav-tabs > li.active > a, 
	.panel-heading .nav-tabs > li.active > a:hover, 
	.panel-heading .nav-tabs > li.active > a:focus { background: inherit; color: #3fcf7f; font-weight: 600; border-width: 0; border-color: transparent; }
	.panel-heading .nav { font-size: 0.9em; } 
	.panel-body { padding: 10px; }

	.toolbar a { 
		width:25%;
		float: left;
		margin-bottom: 10px;
	}
	.toolbar a:nth-child(5n) { clear: left; }
	.carousel-inner .h1 { font-size: 1.6em; }
	
	#login h1 {  font-size: 2.3em; margin-bottom: -20px; }
	#editar-colaborador h1 { margin-bottom: -15px; }
	#editar-colaborador .thumb-medium { width: 30px; display: inline-block; }
	
	footer { position: relative; }
}