@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500&display=swap');
/* @import url('https://fonts.googleapis.com/css2?family=Allan:wght@400;700&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Lilita+One&display=swap');

*{  padding: 0; margin: 0; }
a{text-decoration: none;}
/* VAR PADROES DO PROJETO */
:root{
 --cor-padrao:#3aa926;   
 --cor-padrao2:#217213;   
 --cor-titles:#081803;   
 --fonte-texts:'Inter', sans-serif;
 /* --fonte-titles: 'Allan', cursive; */
 --fonte-titles: 'Lilita One', cursive;
}
/* VAR PADROES DO PROJETO*/


/* BUTTONS */
.btn{padding: 10px 20px; background-color: #333; color: #fff; font-size: 0.8rem;
  font-family: var(--fonte-texts); font-weight: 400; border: none; border-radius: 5px;
cursor: pointer;}
.btn:hover{  background: #555;  text-decoration: none !important;}
.btn-white{ background-color: #fff;}
.btn-white:hover{background-color: #ccc;}
.btn-blue{ background-color: #0E96E5;}
.btn-blue:hover{background-color: #096397;}
.btn-green{ background-color: #00B494;}
.btn-green:hover{background-color: #008068;}
.btn-yellow{  background-color: #FAAD50;}
.btn-yellow:hover{background-color: #CC8D41;}
.btn-red{  background-color: #F45563;}
.btn-red:hover{background-color: #C54550;}

/* BUTTONS */

/* EFEITOS */

  /* transitions */
  .trs1{-webkit-transition: 0.1s;-ms-transition: 0.1s;-o-transition: 0.1s; -ms-transition: 0.1s;}
  .trs2{-webkit-transition: 0.2s;-ms-transition: 0.2s;-o-transition: 0.2s; -ms-transition: 0.2s;}
  .trs3{-webkit-transition: 0.3s;-ms-transition: 0.3s;-o-transition: 0.3s; -ms-transition: 0.3s;}
  .trs4{-webkit-transition: 0.4s;-ms-transition: 0.4s;-o-transition: 0.4s; -ms-transition: 0.4s;}
  /* transitions */
  
  /* border radius */
  .br10{border-radius: 10px;-webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px;
  -o-border-radius: 10px;}
  .br20{border-radius: 20px;-webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px;
  -o-border-radius: 20px;}
  .br30{border-radius: 30px;-webkit-border-radius: 30px; -moz-border-radius: 30px; -ms-border-radius: 30px;
  -o-border-radius: 30px;}
  .br40{border-radius: 40px;-webkit-border-radius: 40px; -moz-border-radius: 40px; -ms-border-radius: 40px;
  -o-border-radius: 40px;}
  .br50{border-radius: 50px;-webkit-border-radius: 50px; -moz-border-radius: 50px; -ms-border-radius: 50px;
  -o-border-radius: 50px;}
  /* border radius */

/* EFEITOS */

.space10{float: left; width: 100%; height: 10px;}
.space20{float: left; width: 100%; height: 20px;}
.space30{float: left; width: 100%; height: 30px;}
.space40{float: left; width: 100%; height: 40px;}
.space50{float: left; width: 100%; height: 50px;}


/*
TRIGGER
Personaliza mensagens do sistema
*/
.trigger{ display: block; width: 100%; padding:20px 10px; background: #333; font-size: 0.9em;
  color: #fff;  margin-bottom: 20px;}
.trigger-success{background-color: #00B494;}
.trigger-info{background-color: #0E96E5;}
.trigger-alert{background-color: #FAAD50;}
.trigger-error{background-color: #F45563;}


/***********************************
############ BOX MODEL #############
***********************************/
.box{  display: inline-block;  width: 100%;  vertical-align: top;}
.box:before{  clear: both;}

.box1{width: 100%; margin: 15px 0 15px 0;}
.box2{width: 45%; margin: 1% 2% 1% 0;}
.box2:nth-of-type(2n+0){margin-right: 0;}
.box3{width: 32%; margin: 1% 1% 1% 0;}
.box3:nth-of-type(0n+0){margin-right: 0;}
.box4{width: 23.5%; margin: 1% 1% 1% 0;}
.box4:nth-of-type(0n+0){margin-right: 0;}
.box5{width: 18.4%; margin: 1% 2% 1% 0;}


/***********************************
########## MEDIA QUERIES ###########
***********************************/

 @media (max-width: 34em){
  .box2,  .box3,  .box4,  .box5{width: 100%; margin: 15px 0 15px 0 !important;}
}
@media (min-width: 34em) and (max-width: 48em){
  .box2,  .box3,  .box4,  .box5{width: 49%; margin: 1% 2% 1% 0 !important;}
  .box2:nth-of-type(2n+0),  .box3:nth-of-type(2n+0),  .box4:nth-of-type(2n+0),
  .box5:nth-of-type(2n+0){margin-right: 0 !important;}
}
@media (min-width: 48em) and (max-width: 64em){
  .box3,  .box4,  .box5{width: 32%; margin: 1% 2% 1% 0 !important;}
  .box3:nth-of-type(0n+0),  .box4:nth-of-type(3n+0),
  .box5:nth-of-type(3n+0){margin-right: 0 !important;}
}
@media (min-width: 64em) and (max-width: 80em){
  .box4,  .box5{width: 23.5%; margin: 1% 1% 1% 0 !important;}
  .box4:nth-of-type(0n+0),  .box5:nth-of-type(4n+0){margin-right: 0 !important;}
}