@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500&display=swap');

/*=========== CONTAINER ==========*/
.container {width: 100%; float:  botton; padding: 0.5% 1%; text-align: center;}

/* RODAPÉ */
.social-icons a {font-size: 1.5em; color: rgba(255,255,255,0.7); margin-right: 3%; }
.social-icons a:last-child {margin-right: 0;}
.social-icons a:hover {color: rgb(255,255,255);}
.copyright {color: rgba(255, 255, 255, 0.7); margin-top:1%;}

/*=========== RESET ==========*/
* {
  margin: 0; 
  padding: 0; 
  font-size: 100%; 
  border: none; 
  outline: none; 
  
  box-sizing: border-box;
  /*font-family: 'Lato', sans-serif;*/
  font-family: 'Poppins', sans-serif;
  }
  
body {background-color: #f5f5f5;}
a {text-decoration: none;}
ul {list-style: none;}
img {max-width: 100%;}

body .topo {
  background-color: #4B0082;
   height: 65px; 
    }
	
	
	
 header{
    position: relative;
}

 header .image-text{
    display: flex;
    align-items: center;
	white-space: nowrap;
}
 header .logo-text{
    display: flex;
    flex-direction: column;
	white-space: nowrap;
}
header .image-text .name {
    color: #FFFAFA;
    margin-top: 2px;
    font-size: 14px;
    font-weight: 600;
	max-width: 50ch;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
	  
}

header .image-text .profession{
    font-size: 12px;
	color: #FFFAFA;
    margin-top: -2px;
    display: block;
	max-width: 60ch;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
}

 header .image{
    display: flex;
    align-items: center;
    justify-content: center;
	margin-left: 15px;
	margin-right: 15px;
	margin-bottom: 15px;
	margin-top: 15px;
}

 header .image img{
    width: 40px;
    border-radius: 6px;
}	
	
.text-nav-text{
    list-style: none;
    height: 100%;
    background-color: transparent;
    display: flex;
    align-items: center;
    height: 100%;
    width: 100%;
    border-radius: 6px;
    text-decoration: none;
    transition: var(--tran-03);
}

.text-nav-text:hover{
    background-color: var(--primary-color);
}

.text-nav-text:hover .icon,
.text-nav-text:hover .text{
    color: var(--sidebar-color);
}	
	
.content {
margin-left: 15px;
	margin-right: 1px;
	margin-bottom: 15px;
	margin-top: auto;
}

	
	
	
	
	
	
	
	
	
	
	
	
body .topo .image {
    height=20px;
  }
/*=========== CONTAINER ==========*/
.container { text-align: left; margin: 40px 10px 30px 15px}
/*=========== BG COLORS ==========*/
.bg-gradient {background: linear-gradient(to right,#ce2e3c,#da6709);}
.bg-black {background-color: #130400; }
.bg-white {background-color: #fff;}
.bg-pastel{background-color: #FFFAF0;}
/*=========== HELPERS ==========*/
.radius {border-radius: 7px;}
/* CABEÇALHO */
/*.logo {width: 56px; height: 56px; float: left; background: url(../img/logo-mobile.png) center center/56px no-repeat; font-size: 0;}*/
.btn-menu {width: 60px; height: 60px; float: right; text-align: center; color: #fff; border-radius:56px; cursor: pointer;}
/* MENU */
.menu {display:none; width: 100%; height: 100%; position: fixed; background-color: rgba(0,0,0,0.9); top: 0; left: 0;}
.btn-close {font-size: 1.5em; color: #fff; float: right; cursor: pointer; margin: 2% 3% 0 0;}
.menu ul {width: 100%; float: left; text-align: center;}
.menu li {padding: 1.5%;}
.menu li a {font-size: 2em; color: #fff; padding: 1.5% 3%;}
.menu li a:hover {border:1px solid #da6709;}
/* BANNER */
.banner {background: url(../img/painel.jpg) no-repeat fixed;}
.title {width: 100%;}
.title h2 {font-size: 2.5em; color: #fff; font-weight: 700;}
.title h3 {font-size: 1.5em; color: #fff;}
.buttons {width: 100%; margin-top: 1%;}
.buttons i {float: right;}
.btn-geral {width: 100%; font-size: 1.0em; text-align: left; cursor: pointer; padding: 1%; }
.btn-cadastrar { color: #130400;}
.btn-sobre {color:#fff ; margin-top: 2%;}
/* SERVIÇOS */
.servico {width: 100%; text-align: left;  margin-bottom: 1%;}
.servico img {border-radius: 4px 4px 0 0;}
.servico2 {width: 100%;  text-align: left;  margin-bottom: 3%;}
.servico2 img {border-radius: 7px 7px 0 0; }
.inner {padding: 3%;}
.inner a {font-size: 1.0em; color: #130400; font-weight: 700; }
.inner h4 {font-size: 1.2em; color: #130400; margin-top: 2%; }
.inner p {margin-top: 2%; color: #130400; line-height: 1.5em;}
/* NEWSLETTER */
.newsletter h2 {font-size: 1.5em; color: #fff; font-weight: 700;}
.newsletter h3 {color: #fff;}
.newsletter form {margin-top: 2%;}
.newsletter input {width: 100%;  padding: 5%; }
.newsletter button {width: 100%;  color:#130400; padding: 5%; cursor: pointer; margin-top: 2%; }
/* RODAPÉ */
.social-icons a {font-size: 1.5em; color: rgba(255,255,255,0.7); margin-right: 3%;}
.social-icons a:last-child {margin-right: 0;}
.social-icons a:hover {color: rgb(255,255,255);}
.copyright {color: rgba(255, 255, 255, 0.7); margin-top:2%;}




 nav{
  
  
  font-family: 'Poppins', sans-serif;
  
    width: 100%;
	height: 55px;
	background-color: #7e9c57;
	line-height: 75px;
	padding: 0px 10px;
  }
  
  nav  .logo{
    float: left;
  }
  
  nav  .logo p{
    font-size: 15px;
	font-weight: bold;
	letter-spacing: 0px;
	color:#fff;
	text-transform: uppercase;
	  max-width: 40ch;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
  }
  
  nav  ul{
    float: right;
  }
  
  nav  ul li{
    list-style: none;
	display: inline-block;	
	
  }
  nav  ul li a{
     text-decoration: none;
	 color:#fff;
	 font-size: 15px;
	 text-transform: uppercase;
     padding: 0px 20px;
	  
  }
  nav  ul li a:hover{
     color:#000000;	 
  }
  
  nav  ul .active{     
	 color:#000000;	
  }
  
   nav ul li span {
	margin-right:10px;
}
  
  .checkbtn{
    color:#fff;
	font-size: 25px;
	cursor: pointer;
	float: right;
	display: none;
  }
  
  #check{
    display: none;
  }
 




 @media screen and (max-width: 990px) {
    nav{
	   padding: 0px 50px;
	}
	.checkbtn{    
	  display: block;
    }
	nav  .logo{
      font-size: 30px;
    }
	
	nav  .logo p{
      font-size: 20px;
	  max-width: 20ch;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
	
  
	
	nav ul{
	  width: 100%;
	  height: 100vh;
	  background-color: #53694c;
	  position: fixed;
	  top: 75px;
	  left: -100%;
	  text-align: center;
	  transition: 0.4s ease;
	}
  nav ul li{
      display: block;
	  margin: 60px 0px;
	  line-height: 20px;	  
	}
	#check:checked ~ ul{
	  left:0;
	}
  }
  



/* ========== MOBILE FIRST ==========*/
/* SMALL DEVICES - SMARTPHONES */
@media screen and (min-width: 480px) {
/*.logo {width: 214px; background: url(../img/logo.png) center center/214px no-repeat;} */
.btn {font-size: 2em;}
}
/* SMALL DEVICES - TABLETS*/
@media screen and (min-width: 768px) {
.servico {width: 49%; float: left; margin-right: 2%;}
.servico:nth-child(2){margin-right: 0;}

.servico2 {width: 49%; float: left; margin-right: 2%;}
.servico2:nth-child(2){margin-right: 0;}

.newsletter h2 {font-size: 2em;}
.newsletter h3 {font-size: 1.5em;}
.newsletter input {width: 70%; padding: 2%; float: left; margin-right: 1%;}
.newsletter button {width: 29%; padding: 2%; float: right; margin-top: 0;}
}
/* MEDIUM DEVICES - TABLETS & DESKTOPS*/
@media screen and (min-width: 960px) {
.title {width: 70%; float: left; text-align: left;}
.title h2 {font-size: 3em;}
.title h3 {font-size: 2em;}
.buttons {width: 30%; float: right; margin-top: 0; }
.servico {width: 32%; }
.servico:nth-child(2){margin-right: 2%;}
.servico:nth-child(3){margin-right: 0;}

.servico2 {width: 60%; }
.servico2:nth-child(2){margin-right: 2%;}
.servico2:nth-child(3){margin-right: 0;}

.newsletter input {width: 60%; float: none;}
.newsletter button {width: 20%; float: none;}
}
/* LARGE DEVICES - WIDE SCREENS*/
@media screen and (min-width: 1280px) {
.btn-menu {display: none;}
.btn-close {display: none;}
.menu {width: auto; height: 56px; line-height: 56px; float: right; background-color: #f5f5f5; 
display: block !important; position: static;}
.menu li {padding: 0; float: left;}
.menu li a {color:#130400; font-size: 1em; padding: 15px; }
.menu li a:hover {border: none; color:#da6709; }
}


textarea {
  width: 100%;
  height: 150px;
  padding: 12px 20px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  background-color: #f8f8f8;
  resize: none;
}