*{
	margin: 0;
	padding: 0;
  box-sizing:border-box;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
}

html,body {
  background: #f0f0f0;
}

.content {
  width: 260px;
  margin: 50px auto;
}

.colors {
  width: 0px;
  float: left;
  margin: 0px auto;
}

.colors a {
  width: 43.3px;
  height: 30px;
  float: left;
}

.colors .default {
  background: #414956;
}

.colors .blue {
  background: #4A89DC;
}

.colors .green {
  background: #03A678;
}

.colors .red {
  background: #ED5565;
}

.colors .white {
  background: #fff;
}

.colors .black {
  background: #292929;
}


@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700);

.jquery-accordion-menu {
  font-family:'Open Sans',sans-serif; box-sizing:border-box;
  -moz-box-sizing:border-box;-webkit-box-sizing:border-box;
  outline:0;
}

.jquery-accordion-menu {
  min-width:260px; float:left; position:relative;
  box-shadow:0 20px 50px #333;
}

.jquery-accordion-menu .jquery-accordion-menu-footer,.jquery-accordion-menu .jquery-accordion-menu-header{
  width:100%;height:80px;padding-top:20px;float:left;
  font-weight:600;color:#f0f0f0;background:#414956;
}

.jquery-accordion-menu ul {
  margin:0; padding:0; list-style:none;
}

.jquery-accordion-menu ul li{
  width:100%; display:block; float:left;
  position:relative;
}

.jquery-accordion-menu ul li a{
  width:100%;padding:20px 22px;float:left;
  text-decoration:none;color:#f0f0f0;
  font-size:13px;background:#414956;
  white-space:nowrap;position:relative;
  overflow:hidden;-o-transition:color .2s linear,background .2s linear;
  -moz-transition:color .2s linear,background .2s linear;
  -webkit-transition:color .2s linear,background .2s linear;
  transition:color .2s linear,background .2s linear;
}

.jquery-accordion-menu>ul>li.active>a,.jquery-accordion-menu>ul>li:hover>a{
  color:#fff;background:#3b424d;
}

.jquery-accordion-menu>ul>li>a{
  border-bottom:solid 1px #3b424d;
}

.jquery-accordion-menu ul li a i{
  width:34px;float:left;line-height:18px;font-size:16px;text-align:left;
}

.jquery-accordion-menu .submenu-indicator{
  float:right; right:22px; position:absolute;
  line-height:19px; font-size:20px;
  transition:transform .3s linear;
  -moz-transition:transform .3s linear;
  -webkit-transition:transform .3s linear;
  -ms-transition:transform .3s linear;
}

.jquery-accordion-menu ul ul.submenu .submenu-indicator{
  line-height:16px;
}

.jquery-accordion-menu .submenu-indicator-minus>.submenu-indicator{
  -ms-transform:rotate(45deg);-moz-transform:rotate(45deg);
  -webkit-transform:rotate(45deg);transform:rotate(45deg);
}

.jquery-accordion-menu ul ul.submenu,.jquery-accordion-menu ul ul.submenu li ul.submenu{
  width:100%;display:none;position:static;
}

.jquery-accordion-menu ul ul.submenu li { clear:both;width:100%;}

.jquery-accordion-menu ul ul.submenu li a{
  width:100%;float:left;font-size:11px;
  background:#383838;border-top:none;
  position:relative;border-left:solid 6px transparent;
  -o-transition:border .2s linear;
  -moz-transition:border .2s linear;
  -webkit-transition:border .2s linear;
  transition:border .2s linear;
}

.jquery-accordion-menu ul ul.submenu li:hover>a{
  border-left-color:#414956;
}

.jquery-accordion-menu ul ul.submenu>li>a{
  padding-left:30px;
}

.jquery-accordion-menu ul ul.submenu>li>ul.submenu>li>a{
  padding-left:45px;
}

.jquery-accordion-menu ul ul.submenu>li>ul.submenu>li>ul.submenu>li>a{
  padding-left:60px;
}

.jquery-accordion-menu ul li .jquery-accordion-menu-label,.jquery-accordion-menu ul ul.submenu li .jquery-accordion-menu-label{
  min-width:20px;padding:1px 2px 1px 1px;
  position:absolute;right:18px;top:14px;
  font-size:11px;font-weight:800;color:#555;
  text-align:center;line-height:18px;background:#f0f0f0;
  border-radius:100%;
}

.jquery-accordion-menu ul ul.submenu li .jquery-accordion-menu-label{top:12px;}

.ink{display:block;position:absolute;background:rgba(255,255,255,.3);
  border-radius:100%;-webkit-transform:scale(0);
  -moz-transform:scale(0);-ms-transform:scale(0);
  -o-transform:scale(0);transform:scale(0);
}

.animate-ink{
  -webkit-animation:ripple .5s linear;
  -moz-animation:ripple .5s linear;-ms-animation:ripple .5s linear;
  -o-animation:ripple .5s linear;animation:ripple .5s linear;
}

@-webkit-keyframes ripple{100%{opacity:0;-webkit-transform:scale(2.5)}}@-moz-keyframes ripple{100%{opacity:0;-moz-transform:scale(2.5)}}@-o-keyframes ripple{100%{opacity:0;-o-transform:scale(2.5)}}@keyframes ripple{100%{opacity:0;transform:scale(2.5)}}.blue.jquery-accordion-menu .jquery-accordion-menu-footer,.blue.jquery-accordion-menu .jquery-accordion-menu-header,.blue.jquery-accordion-menu ul li a{background:#4A89DC}.blue.jquery-accordion-menu>ul>li.active>a,.blue.jquery-accordion-menu>ul>li:hover>a{background:#3e82da}.blue.jquery-accordion-menu>ul>li>a{border-bottom-color:#3e82da}.blue.jquery-accordion-menu ul ul.submenu li:hover>a{border-left-color:#3e82da}.green.jquery-accordion-menu .jquery-accordion-menu-footer,.green.jquery-accordion-menu .jquery-accordion-menu-header,.green.jquery-accordion-menu ul li a{background:#03A678}.green.jquery-accordion-menu>ul>li.active>a,.green.jquery-accordion-menu>ul>li:hover>a{background:#049372}.green.jquery-accordion-menu>ul>li>a{border-bottom-color:#049372}.green.jquery-accordion-menu ul ul.submenu li:hover>a{border-left-color:#049372}.red.jquery-accordion-menu .jquery-accordion-menu-footer,.red.jquery-accordion-menu .jquery-accordion-menu-header,.red.jquery-accordion-menu ul li a{background:#ED5565}.red.jquery-accordion-menu>ul>li.active>a,.red.jquery-accordion-menu>ul>li:hover>a{background:#DA4453}.red.jquery-accordion-menu>ul>li>a{border-bottom-color:#DA4453}.red.jquery-accordion-menu ul ul.submenu li:hover>a{border-left-color:#DA4453}.white.jquery-accordion-menu .jquery-accordion-menu-footer,.white.jquery-accordion-menu .jquery-accordion-menu-header,.white.jquery-accordion-menu ul li a{background:#fff;color:#555}.white.jquery-accordion-menu>ul>li.active>a,.white.jquery-accordion-menu>ul>li:hover>a{background:#f0f0f0}.white.jquery-accordion-menu>ul>li>a{border-bottom-color:#f0f0f0}.white.jquery-accordion-menu ul ul.submenu li:hover>a{border-left-color:#f0f0f0}.white.jquery-accordion-menu ul ul.submenu li a{color:#f0f0f0}.white.jquery-accordion-menu>ul>li>a>.ink{background:rgba(0,0,0,.1)}.black.jquery-accordion-menu .jquery-accordion-menu-footer,.black.jquery-accordion-menu .jquery-accordion-menu-header,.black.jquery-accordion-menu ul li a{background:#292929}.black.jquery-accordion-menu>ul>li.active>a,.black.jquery-accordion-menu>ul>li:hover>a{background:#222}.black.jquery-accordion-menu>ul>li>a{border-bottom-color:#222}.black.jquery-accordion-menu ul ul.submenu li:hover>a{border-left-color:#222}

.hm-gradient {

    background-image: linear-gradient(to top, #f3e7e9 0%, #e3eeff 99%, #e3eeff 100%);

}

.darken-grey-text {

    color: #2E2E2E;

}

.navbar .dropdown-menu a:hover {

    color: #616161 /*!important*/;

}

.darken-grey-text {

    color: #2E2E2E;

}
.fullheight {

  /*com isso o header ficará sempre com o tamanho da tela */

  height:100vh;

  /*background geralmente uso o modo compacto, mas aqui vou colocar separadamente para explicar cada parte*/

  /* aqui defino a imagem maior*/

  background-image:url();

  /*deixa o background com efeito paralax*/

  background-attachment: fixed;

  /* cover é para nunca deixar espaço sem imagem*/

  background-size:cover;

}


.fullheight {
  /* Center the content */
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;

  /* Take full size */
  height: 100vh;
  width: 100%;

  /* Background */
  background: url('/servanpredio.jpg') center center / cover no-repeat;
}


/* aqui troco a imagem pra cada resolução na ordem do maior pro menor

@media screen and (max-width: 1500px) {

}



header.fullheight {

   background-image: url(servanpredio.jpg);

  }

}

@media screen and (max-width: 1000px) {

  .header.fullheight {

    background-image: url();

  }

}

@media screen and (max-width: 800px) {

  .header.fullheight {

  background-image: url();

  }

}

@media screen and (max-width: 600px) {

  .header.fullheight {

   background-image: url();

  }

}

@media screen and (max-width: 400px) {

.header fullheight {

    background-image: url();

  }

}

@media screen and (max-width: 320px) {

  .fullheight {

    background-image: url();

  }

}

*/



.body{

    margin: 0;

    padding:0;

   -webkit-background-size: cover;

   -moz-background-size: cover;

   -o-background-size: cover;

    background-size: cover;
}

.login-box{

    width: 320px;

    height: 420px;

    background: rgba(0, 0, 0, 0.5);

    color: #F5FFFA;

    top: 50%;

    left: 50%;

    position: absolute;

    transform: translate(-50%,-50%);

    box-sizing: border-box;

    padding: 70px 30px;
}

.avatar{

    width: 100px;

    height: 100px;

    border-radius: 50%;

    position: absolute;

    right:100px;

    top:-50px;

    left: calc(-50% -50px);
}

.h1{

    margin:2px;

    padding:20px;

    text-align:center;

    font-size: 22px;
}

.login-box p{

    margin: 0;

    padding: 0;

    font-weight: bold;

}

.login-box input{

    width: 100%;

    margin-bottom: 20px;

}

.login-box input[type="text"], input[type="password"]

{

    border: none;

    border-bottom: 1px solid #fff;

    outline: none;

    height: 40px;

    color: #FF0000;

    font-size: 16px;

}

.login-box input[type="submit"]

{
  border: none;
  outline: none;
  height: 40px;
  background: #1c8adb;
  color: #fff;
  font-size: 18px;
  border-radius: 20px;
}

.login-box input[type="submit"]:hover{
  cursor: pointer;
  background: #39dc79;
  color: #000;
}

.login-box a{
  text-decoration: none;
  font-size: 14px;
  color: #fff;
}

.login-box a:hover{
  color: #FF0000;
}

@charset "utf-8";

@import url("https://use.fontawesome.com/releases/v5.0.11/css/all.css");

.Button {
	height: 50px;

	position: relative;

	background: #ccc;

	padding-top: 10px;

	padding-bottom: 10px;

	padding-left: 0px;

	left: 0px;

	right: 0px;

	width: 100%;

	overflow: hidden;
}

.nav-side-menu {

  overflow: auto;

  font-family: verdana;

  font-size: 12px;

  font-weight: 200;

  background-color: #2e353d;

  position: fixed;

  top: 0px;

  padding-left: 0px;

  height: 100%;

  width: 17%;

  color: #e1ffff;
}

.nav-side-menu .brand {

  background-color: #23282e;

  line-height: 50px;

  display: block;

  text-align: center;

  font-size: 14px;

}

.nav-side-menu .toggle-btn {

  display: none;

}

.nav-side-menu ul,

.nav-side-menu li {

  list-style: none;

  padding: 0px;

  margin: 0px;

  line-height: 35px;

  cursor: pointer;

}

.nav-side-menu ul :not(collapsed) .arrow:before,

.nav-side-menu li :not(collapsed) .arrow:before {

  font-family: 'Font Awesome 5 Free';

  content: "\f13a";

  display: inline-block;

  padding-left: 10px;

  padding-right: 10px;

  vertical-align: middle;

  float: right;

  font-weight: 900;

}

.nav-side-menu ul .active,

.nav-side-menu li .active {

  border-left: 3px solid #d19b3d;

  background-color: #4f5b69;

}

.nav-side-menu ul .sub-menu li.active,

.nav-side-menu li .sub-menu li.active {

  color: #d19b3d;

}

.nav-side-menu ul .sub-menu li.active a,

.nav-side-menu li .sub-menu li.active a {

  color: #d19b3d;

}

.nav-side-menu ul .sub-menu li,

.nav-side-menu li .sub-menu li {

  background-color: #181c20;

  border: none;

  line-height: 28px;

  border-bottom: 1px solid #23282e;

  margin-left: 1px;

}

.nav-side-menu ul .sub-menu li:hover,

.nav-side-menu li .sub-menu li:hover {

  background-color: #020203;

}

.nav-side-menu ul .sub-menu li:before,

.nav-side-menu li .sub-menu li:before {

  font-family: 'Font Awesome 5 Free';

  content: "\f105";

  display: inline-block;

  padding-left: 10px;

  padding-right: 10px;

  vertical-align: middle;

  font-weight: 900;

}

.nav-side-menu li {

  padding-left: 1px;

  border-left: 3px solid #84a3c6;

  border-bottom: 1px solid #23282e;

}

.nav-side-menu li a {

  text-decoration: none;

  color: #e1ffff;

}

.nav-side-menu li a i {

  padding-left: 10px;

  width: 20px;

  padding-right: 20px;

}

.nav-side-menu li:hover {

  border-left: 3px solid #d19b3d;

  background-color: #4f5b69;

  -webkit-transition: all 1s ease;

  -moz-transition: all 1s ease;

  -o-transition: all 1s ease;

  -ms-transition: all 1s ease;

  transition: all 1s ease;

}

@media (max-width: 767px) {

  .nav-side-menu {

    position: relative;

    width: 100%;

    margin-bottom: 10px;

  }

  .nav-side-menu .toggle-btn {

    display: block;

    cursor: pointer;

    position: absolute;

    right: 10px;

    top: 10px;

    z-index: 10; /*!important*/

    padding: 3px;

    background-color: #ffffff;

    color: #000;

    width: 40px;

    text-align: center;

  }

  .brand {

    text-align: left /*!important*/;

    font-size: 22px;

    padding-left: 20px;

    line-height: 50px /*!important*/;

  }

}

@media (min-width: 767px) {

  .nav-side-menu .menu-list .menu-content {

    display: block;

  }

}

.body {

  margin: 0px;

  padding: 0px;
}