@font-face { font-family:'Montserrat-Light'; src:url('../fonts/Montserrat-Light.ttf'); }
* { padding:0; margin:0; font-family:Montserrat-Light; -webkit-tap-highlight-color:transparent; }

::-webkit-scrollbar { background:transparent; width:5px; }
::-webkit-scrollbar-thumb { background:rgba(200,200,200,.5); border-radius:7px; }

a { text-decoration:none; }

button { background:transparent; border:none; cursor:pointer; }

ul, li { list-style:none; }

input, button { outline:none; }

pre { white-space: pre-wrap; word-wrap: break-word; }

.header { position:relative; display:block; padding:10px 10%; background-color: rgb(25,25,25); }
.header img { height:30px; }
.header img.icon { display:none; }

.header > div { display:inline-block; vertical-align:top; margin:5px 0; float:right; }
.header > div > input { border:none; border-radius:10px; padding:5px 10px; max-width:130px;  }
.header > div > button { color:rgb(255,255,255); margin:0 10px; }
.header > div > button:hover { color:rgb(230,230,230); }

.barra { width:100%; }
.barra > img { width:100%; }

.content { display:block; padding:15px; text-align:center; }
.content > div { display:inline-block; width:20%; padding:10px; vertical-align:top; }
.content > div > strong { font-size:22px; color:#123C5D; }
.content > div > pre { padding:10px; }

.folder { position:relative; display:block; text-align:center; min-height: 400px; background-color: transparent; background-image: url(../image/background.jpg); background-size: auto auto; background-repeat: no-repeat; background-position: center 25%; }
.folder > img { position:absolute; right:0; left:0; top:0; bottom:25%; margin:auto; min-width:270px; max-width:65%; }
.folder > div { position:absolute; right:0; left:20%; top:15%; bottom:0; margin:auto; width:50%; height:50px; font-size:18px; color:white; }
.folder > a { position:absolute; bottom:15%; left:0; right:0; margin:auto; padding:10px 15px; color:white; background-color:rgb(36,80,160); transition:all .3s; }
.folder > a:hover { background-color:rgb(54,97,176); }
.folder > a:active { color:rgb(54,97,176); background-color:rgba(0,0,0,0); }

.footer { position:relative; display:block; padding:15px 0; text-align:center; border-top:1px solid gray; }
.footer a { display:inline-block; margin:10px; filter:grayscale(80%); transition:all .3s; }
.footer a:hover { filter:grayscale(0%); }
.footer p { margin:10px 0; color:rgb(153, 153, 153); }

/* ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... */

.vid { margin:auto; padding:0 15%; }

/* ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... */

.vid-titulo { font-size:36px; padding:15px; }
.vid-titulo > small { padding:0 10px; color:rgb(100,100,100); }

/* ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... */

.vid-tags { position:relative; display:block; margin:10px 0; }
.vid-tags ul { /*min-width:300px; /* padding-left:10%; */ }
.vid-tags li { padding:5px 5px 5px 5px; }
.vid-tags li > strong { padding:0 5px; color:rgb(85,85,85); }
/*.vid-tags li > pre { padding:15px 25px; margin:10px 25px; } */
.vid-tags li > pre { padding:15px 25px; margin:10px 15px; }
.vid-tags li:hover > pre { color: grey; }

.vid-tags li > pre > img,
.vid-tags li > pre > canvas { max-width: 200px; margin:auto; }

/* ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... */

.vid-historico { width:80%; margin:auto; font-size:12px; padding-bottom:25px; }
.vid-historico > table { width:100%; text-align:center; border-collapse: collapse; border-spacing:0; color:rgb(153,153,153); }

.vid-historico > table > tr,
.vid-historico > table > tbody > tr { cursor:pointer; transition:all .3s; }

.vid-historico > table > tr:nth-of-type(n+2):hover,
.vid-historico > table > tbody > tr:nth-of-type(n+2):hover { background-color:rgb(240,240,240); }

.vid-historico > table > tr:nth-of-type(odd),
.vid-historico > table > tbody > tr:nth-of-type(odd) { color:rgb(0,0,0); }

.vid-historico > table > tr > th,
.vid-historico > table > tbody > tr > th { padding:15px 0; font-size:20px; color:rgb(0,0,0); -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

.vid-historico > table > tr > th > span,
.vid-historico > table > tbody > tr > th > span { padding:0 7px; }

.vid-historico > table > tr > td,
.vid-historico > table > tbody > tr > td { padding:7px 3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100px; }

/* ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... */

.entidade-contato { display:block; padding:15px; text-align:center; background-color:rgb(250,250,250); border-top:1px solid gray; }
.entidade-contato > label { display:block; padding:5px; margin:auto; width:75%; }
.entidade-contato > label > span { display:table-cell; text-align:left; }
.entidade-contato > label > strong { display:table-cell; padding:0 7px; width:80px; overflow-x:hide; text-overflow:ellipsis; text-align:left; }
.entidade-contato > iframe { width:75%; margin:15px 0; height:200px; }
.entidade-contato > pre { padding:15px; margin:20px 0; }

/* ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... */

.janela { position:fixed; left:0; right:0; bottom:0; top:0; background-color:rgba(25,25,25,.75); }
.janela > div { position:absolute; left:0; right:0; bottom:0; top:0; margin:auto; width:50%; height:80%; background-color:rgb(255,255,255); box-shadow:2px 3px 15px rgba(0,0,0,.5); }
.janela > div > div { position:absolute; left:0; right:0; top:0; margin:auto; max-height:100%; overflow-y:scroll; overflow-x:hide; }

.janela-header { display:block;	padding:15px; border-bottom:1px solid rgba(25,25,25,.5); }
.janela-header > span { float:right; padding:15px 25px; font-size:18px; color:red; cursor:pointer; }
.janela-header > strong { display:block; font-size:22px; }
.janela-header > small { color:rgb(100,100,100); font-size:16px; }

.janela-body { padding:15px; }
.janela-body > label { display:block; }
.janela-body > label > span { display:table-cell; }
.janela-body > label > strong { display:table-cell; color:rgb(100,100,100); padding:0 15px; width:100px; overflow-x:hide; text-overflow:ellipsis; }

/* ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... */
	
@media  only screen and (max-width:840px) {
	
	.content > div { display: block; width:auto; }
	
}
	
@media  only screen and (max-width:480px) {
	
	.header img.logo { display:none; }
	.header img.icon { display:inline-block; }
	
	.entidade-contato > label { font-size:12px; width:100%; }
	
	.vid { padding:0; }
	
	.janela > div { width:80%; }
	
}