* {
  box-sizing: border-box;
}

body {
	margin: 0;
	padding: 0;
  	font-family: "Montserrat", sans-serif;
	font-optical-sizing: auto;
	font-weight: 300;
	font-style: normal;
	font-size: 1em;
}

.row {
	/*background-color: #f1f1f1;*/
	width: 100%;	
	margin: 0;
	padding: 0 50px 50px;
}

.row::after {
	content: "";
	display: table;
	clear: both;
}

.row h1 {
		display: inline-block;
		width: 95%;
		margin: 0 auto;
		padding: 15px 0;
		color: #fff;
		text-shadow: 1px 1px #333;
}
	
.row span {
	display: inline-block;
	margin: 0 7.5px;
	padding: 0;
	text-shadow: none;
	font-weight: normal;
	font-size: 0.6em;
}

.head_opc h1, .head_opc h2 {
	display: inline-block;
	width: 90%;
	text-align: right;
	font-size: 2em;
	color: #941b1f;
	text-shadow: 1px 1px #333;
	margin: 0 5%;
	padding: 5px 0 2px;
	font-weight: 800;
}
	.head_opc h2 {
		display: inline-block;
		width: 90%;
		text-align: right;
		font-size: 1em;
		color: #fff;
		text-shadow: 1px 1px #333;
		font-weight: 300;
		line-height: 1em;
	}	

a:hover {
	cursor: pointer;
	text-decoration: none;
}

.topnav {
  overflow: hidden;
  background-color:#cc0000;
  position: relative;
  color: #fff;
  padding-top: 15px;
}

.topnav #myLinks {
  display: none;
}

.topnav a {
  color:#FFF;
  padding: 7.5px 25px 7.5px 10px;
  text-decoration: none;
  font-size: 1em;
  display: block;
}

.topnav a.icon {
  padding: 0 15px 15px;
  text-align: center;
  color:#FFF;
  display: block;
  right: 0;
  top: 0;
}

#myLinks a:hover {
	padding: 7.5px 15px 7.5px 20px;
}

.active {
  background-color: #FFF;
}

.row button {
	vertical-align: top;
	display: inline-block;
	width: 47%;
	margin: 15px 7.5px 3.75px;
	text-align: center;
	padding: 15px;
	border: none;
	border-radius: 3px;
	cursor: pointer;
	background-color: #B22222;
	color: #fff;
	text-shadow: 1px 1px #333;
	font-size: 1.3em;
	font-weight: 600;
}

.row button:hover {
	background: #911717;
}

button#azul {
	background-color: #4d79ff;
}

button#azul:hover {
	background: #1a53ff;
}

button#amarelo {
	background-color: #FFC107;
}

button#amarelo:hover {
	background: #c29308;
}

button#filtro {
    vertical-align: top;
	display: inline-block;
	float: right;
	width: 100px;
	margin: 7.5px;
	text-align: center;
	padding: 5px;
	border: none;
	border-radius: 3px;
	cursor: pointer;
	color: #fff;
	text-shadow: 1px 1px #333;
	font-size: 1em;
	font-weight: 300;
	background-color: #FFC107;
}

button#filtro:hover {
	background: #c29308;
}

table {
  text-align: center;
  background:#fafafa ;
  margin: 0 auto;
  width: 95%;
  background-color: #f9f9f9;
}

table thead tr th {
	padding: 30px 15px;
	background-color: #fff;
}

tr:nth-child(even) {
  background: #e6e6ff;
}

.painel-central {
	align-items: center;
	justify-content: center;
}
	#painel-slider {
		vertical-align: center;
	}
	.painel-central #painel-slider h1, .painel-central #painel-slider h2, .painel-central #painel-slider h3 {
		display: block;
		margin: 0;
		padding: 15px;
		text-align: center;
		font-size: 7em;
		color: #941b1f;
		text-shadow: 1px 1px #333;
		font-weight: 600;
	}
		.painel-central #painel-slider h2 {
			background-color: #941b1f;
			padding: 25px;
			font-size: 2em;
			color: #FFF;
			text-shadow: none;
			font-weight: 600;
		}
		.painel-central #painel-slider h3 {
			color: #fff;
			padding: 15px;
			font-size: 7em;
			text-shadow: 2px 2px #333;
			font-weight: 600;
		}
	.painel-central #chamada-principal {
		padding: 25px;
		background-color: #4d79ff;
		border-radius: 5px;
		color: darkblue;
	}
		.painel-central #chamada-principal h1, .painel-central #chamada-principal h2, .painel-central #chamada-principal h3, .painel-central #historico h2, .painel-central #historico h3, .painel-central #historico h4 {
			color: #fff;
			margin: 0;
			padding: 0;
			width: 100%;
			height: auto;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			align-items: center;
			justify-content: center;
			line-height: 1em;
		}
			.painel-central #chamada-principal h1 {
				font-size: 3.5em;
				text-shadow: 1px 1px #333;
				margin: 25px auto;
				font-weight: 700;
			}
				.painel-central #chamada-principal h2 {
				font-size: 2em;
				color: darkblue;
				margin: 0 auto 25px;
				}
				.painel-central #chamada-principal h3 {
				font-size: 1.6em;
				color: #aec2fd;
				margin: 25px auto 0;
				}

			.painel-central #historico {
				padding: 25px 15px 15px;
				background-color: #fff;
				border-radius: 5px;
				vertical-align: top;
				color: #999;
			}
				.painel-central #historico h2 {
					font-size: 1.8em;
					color: #3d62cf;
					margin: 15px auto 25px;
					font-weight: 700;
				}
					.painel-central #historico h3 {
					font-size: 1.3em;
					color: #333;
					}
					.painel-central #historico h4 {
					font-size: 1em;
					color: #999;
					margin: 14px auto 0;
					}

h1#alarme {
	font-size: 4.5em;
	text-shadow: 1px 1px #333;
	margin: 25px auto;
	padding: 0 35px;
	font-weight: 700;
	line-height: 1em;
}
h2#alarme {
	font-size: 2.5em;
	color: #666;
	margin: 20px auto;
}
h3#alarme {
	font-size: 1.9em;
	color: #666;
	margin: 16px auto;
}

.row table tr td button {
	width: 75%;
	margin: 15px 7.5px;
	padding: 7.5px;
	font-size: 1em;
}

.loading {
	background: url('../img/loading.gif') no-repeat 50% -200%;
}

	.loading h3 {
		display: inline-block;
		margin: 0;
		padding: 15px;
	}

.footer {
	padding: 20px;
	text-align: center;
	background: #ddd;
	margin: 0;
}


h6 {
        padding: 0;
        margin: 0;
	text-align: justify;
        text-justify: auto;
	font-size: 0.6em;
	font-weight: 100;
	line-height: 0.8em;
	}	











@media screen and (max-width: 800px) {
  #leftcolumn, .row {   
    width: 100%;
    padding: 0;
  }
}

@media screen and (max-width: 400px) {
  .topnav a {
    float: none;
    width: 100%;
  }
}