.sidebar{

  position: fixed;
  z-index: 999;
  width: 221px;
  left:  -240px;
  height: 0%;
  padding-left: 0px;
  padding-right: 10px;
  /* background-color: #202020; */
  transition: all .5s ease;
  border-radius: 0px 10px 10px 10px;
  -webkit-border-radius: 0px 10px 0px 0px;
  -moz-border-radius: 0px 10px 10px 0px;
  /* From https://css.glass */
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(5.5px);
}

.sidebar header{

  font-size: 28px;
  color: #ffffff;
  line-height: 20px;
  text-align: center;
  /* background-color: #202020; */
  user-select: none;
  font-family: 'Lato', sans-serif;
  border-radius: 0px 10px 10px 0px;
-webkit-border-radius: 0px 10px 10px 0px;
-moz-border-radius: 0px 10px 0px 0px;

}

.sidebar .link-sidebar{

  display: block;
  height: 65px;
  width: 100%;
  color: #ffffff;
  line-height: 65px;
  padding-left: 30px;
  box-sizing: border-box;
  border-left: 5px solid transparent;
  font-family: 'Lato', sans-serif;
  text-decoration: none;
  transition: all .5s ease;
}

.link-sidebar.active,.link-sidebar:hover{
  border-left: 5px solid var(--accent-color);
  color: #fff;
   background: linear-gradient(to left, var(--accent-color), var(--gradient-color));
}

.sidebar .link-sidebar i{
  font-size: 23px;
  margin-right: 16px;
}

.sidebar .link-sidebar span{
  letter-spacing: 1px;
  text-transform: uppercase;
}

#check{
  display: none;
}

label #btn,label #cancel{
  
  position: fixed;
  z-index: 999;
  left: 50px;
  cursor: pointer;
  color: #ffffff;
  border-radius: 50px;
  margin: 15px 30px;
  margin-left: 30px;
  font-size: 22px;
  /* From https://css.glass */
  background: rgba(95, 78, 154, 0.51);
  border-radius: 10px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  height: 45px;
  width: 45px;
  text-align: center;
  line-height: 44px;
  transition: all .5s ease;

}

label #cancel{
  opacity: 0;
  visibility: hidden;
}

#check:checked ~ .sidebar{
  left: 0;
}

#check:checked ~ label #btn{
  margin-left: 245px;
  opacity: 0;
  visibility: hidden;
}

#check:checked ~ label #cancel{
  margin-left: 245px;
  opacity: 1;
  visibility: visible;
}

@media(max-width : 860px){

  .sidebar{
    height: auto;
    width: 70px;
    left: 0;
    margin: 100px 0;
  }

  header,#btn,#cancel{
    display: none;
  }
  
  span{
    position: absolute;
    margin-left: 23px;
    opacity: 0;
    visibility: hidden;
  }
  
  .sidebar .link-sidebar{
    height: 60px;
  }
  
  .sidebar .link-sidebar i{
    margin-left: -10px;
  }
  
  .link-sidebar:hover {
    width: 200px;
    background: inherit;
  }
  
  .sidebar .link-sidebar:hover span{
    opacity: 1;
    visibility: visible;
  }

}

.sidebar > .link-sidebar.active,.sidebar > .link-sidebar:hover {
  --accent-color: #f7c92b;
  --gradient-color: #fc9f08;
}
 
nav.bg {
     
     width:100%;
     float:left; 
     text-align:center;  
     background-color: #202020;
     padding:1.5em 0em; 

 }

 nav a {

  position: relative;
  display: inline-block;
  margin:5px 30px;
  outline: none;
  color: #fff;
  text-decoration: none;
  font-weight: normal;
  font-size: 1.3em;
  transition:0.6s; 

 }

 nav a:hover,
 nav a:focus {

  transition:0.4s;
  outline: none;
  color:#f7c92b; 

 }

 /* Efeito circulo 
 .hover-circulo a::before,
    .hover-circulo a::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 75px;
  height: 75px;
  border: 2px solid #fc9f086b;
  border-radius: 50%;
  content: '';
  opacity: 0;
  -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
  -moz-transition: -moz-transform 0.3s, opacity 0.3s;
  transition: transform 0.3s, opacity 0.3s;
  -webkit-transform: translateX(-50%) translateY(-50%) scale(0.2);
  -moz-transform: translateX(-50%) translateY(-50%) scale(0.2);
  transform: translateX(-50%) translateY(-50%) scale(0.2);
    }

 .hover-circulo a::after {
  width: 50px;
  height: 50px;
  border-width: 6px;
  -webkit-transform: translateX(-50%) translateY(-50%) scale(0.8);
  -moz-transform: translateX(-50%) translateY(-50%) scale(0.8);
  transform: translateX(-50%) translateY(-50%) scale(0.8);
 }

 .hover-circulo a:hover::before,
 .hover-circulo a:hover::after,
 .hover-circulo a:focus::before,
 .hover-circulo a:focus::after {
  opacity: 1;
  -webkit-transform: translateX(-50%) translateY(-50%) scale(1);
  -moz-transform: translateX(-50%) translateY(-50%) scale(1);
  transform: translateX(-50%) translateY(-50%) scale(1);
 }

     Efeito Hover Circulo */

a{text-decoration:none;color:rgba(255,255,255,1)}
a:hover{color:rgba(255,255,255,1);text-decoration:none}
h1{position:absolute;top:-12px;left:50%;margin-right:-50%;transform:translate(-50%,-50%);font-family:'Open Sans Condensed',sans-serif}

#header{position:fixed;top:0;left:0;z-index:100;transition:all .5s;overflow-y:auto;background:rgba(255,255,255,0);padding:20px 20px 0px}
.nav-menu *{margin:0;padding:0;list-style:none}
.nav-menu > ul > li{position:relative;white-space:nowrap}
.nav-menu a{display:flex;align-items:center;color:#f7c92b;padding-left:18px;margin-bottom:8px;margin-left:8px;transition:.3s;font-size:15px;border-radius:10px;/* From https://css.glass */
background: rgba(255, 255, 255, 0.2);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.3);height:46px;width:85%;overflow:hidden;transition:.3s}
.nav-menu a i{font-size:16px}
.nav-menu a span{padding:0 5px 0 7px;color:black}
.nav-menu li:hover > a{color:blue;background:#00cc45}
.nav-menu li:hover > a span{color:#fff}

.mobile-nav-toggle{position:fixed;right:15px;top:15px;z-index:99;border:0;background:none;font-size:24px;transition:all .4s;outline:none!important;line-height:1;cursor:pointer;text-align:right}
.mobile-nav-toggle i{color:#fff}
.mobile-nav-active {overflow:hidden}
.mobile-nav-active #header{left:0}
.mobile-nav-active .mobile-nav-toggle i{color:#fff}

#player {margin:0px auto;width:100%;height:100%;}

.background_hora{width:196px;height:46px;/* From https://css.glass */
background: rgba(95, 78, 154, 0.29);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.3);position:absolute;right:20px;bottom:550px;border-radius:10px}
#relogio{margin:0;position:absolute;top:50%;left:50%;margin-right:-50%;transform:translate(-50%,-50%);font-size:30px;font-family:"Poppins",sans-serif;color:#fcf8e3}

.back-to-top{position:fixed;display:none;width:40px;height:40px;border-radius:50px;right:15px;bottom:15px;background:#3a0d5c;color:#fff;transition:display .5s ease-in-out;z-index:99999}
.back-to-top i{font-size:24px;position:absolute;top:7px;left:8px}
.back-to-top:hover{color:#fff;background:#0678e3;transition:background .2s ease-in-out}



@media (min-width: 992px) {
.mobile-nav-toggle{display:none}
}

@media (max-width: 991px) {
#header{width:auto;background:#fff;border-right:1px solid #e6e9ec;left:-300px;padding:20px 30px 100vh 10px;}
}

@media only screen and (max-width: 768px) {
#player{width:100%;height:100%;}
.background_hora{display:none}
#relogio{display:none}
}

  footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 40px;
    background: rgba(95, 78, 154, 0.29); /* Vidro fusco */
    backdrop-filter: blur(10px); /* Efeito de vidro fusco */
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .modal-button {
    /*background-color: #4CAF50; /* Cor de fundo do botão */
	/* From https://css.glass */
	background: rgba(255, 255, 255, 0.2);
	border-radius: 0px;
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	border: 1px solid rgba(255, 255, 255, 0.3);
    border: none;
  color: white;
  padding-top: 9px;
  padding-right: 12px;
  padding-left: 12px;
  padding-bottom: 9px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
  margin-top: 50px;
  margin-right: 90px;
  margin-bottom: 50px;
  margin-left: 90px;
  cursor: pointer;
  border-radius: 100px;
  transition: background-color 0.3s;
}

  .modal-button:hover {
    background: rgba(95, 78, 154, 0.29); /* Cor de fundo do botão ao passar o mouse */
  }

  .modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    /* background: rgba(255, 255, 255, 0.2); /* Cor de fundo do modal */
  }

  .modal-content {
    /* From https://css.glass */
background: rgba(255, 255, 255, 0.2);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.3);
    margin: 20% auto;
    padding: 40px;
    border: 1px solid #888;
    width: 67.5%;
  }

  .modal-title {
    font-size: 20px;
    margin-bottom: 10px;
  }

  .close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }

  .close:hover,
  .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
  }
  
  
  .profile {

  font-family: 'Open Sans', Arial, sans-serif;
  position: relative;
  display: inline-block;
  margin: 20px 0px;
  min-width: 0px;
  max-width: 315px;
  padding-left: 4px;
  width: 100%;
  color: #000;
  text-align: left;
  font-size: 16px;
/* From https://css.glass */
  background: rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 1px 1px 2px 0px #cacaca;

}

.profile *,
.profile:before,
.profile:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.profile img {
  max-width: 35%;
  margin-top: -20px;
  margin-left: 5%;
  margin-bottom: 15px;
  backface-visibility: hidden;
  vertical-align:top;
  border-radius:100%;
  border: 2px #ada5cc solid;
}

.profile figcaption {
  position: absolute;
  top: 0;
  right:0;
  left:40%;
  bottom:0;
  padding:10px;
}

.profile h3 {
  margin: 0;
  font-size: 1.1em;
  font-weight: normal;
}

.profile .icons {
  font-size: 1.6rem;
}

.profile .icons a {
  color: #333;
  text-decoration:none;
}

.profile .icons a:hover {
  color: #0cced7;
}

.sobre { 

    width:100%;
    float:left;
    /* From https://css.glass */
background: rgba(95, 78, 154, 0.51);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
border: 1px solid rgba(95, 78, 154, 0.3);
    padding: 10px 20px;
    border-top: 1px #e8e8e8 solid;
    border-radius: 0px 0px 8px 8px;
    z-index:1;
}

.sobre span { 

    width:100%; 
    float:left; 
    color:#fff; 
    font-size:16px; 
    font-family:'open_sansbold'; 
    position:relative; 
    z-index:1; 
    cursor:pointer; 
}

.sobre p  { 

    width:100%; 
    overflow:hidden; 
    float:left; 
    color:#fff; 
    font-size:14px; 
    font-family:'open_sansregular';  
    display:none;
}

.sobre .ativo { color:#000; }

  .botoes-container {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .botao-rs {
    padding: 0.5em;
    border-radius: 100vw;
    display: inline-flex;
    margin: 0.5em;
    color: #ffffff;
    width: auto;
  }

  .botao-rs a {
    text-decoration: none;
    color: #fff;
    display: inherit;
  }

  .instagram {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  }

  .facebook {
    background: #3b5998;
  }

  .twitter {
    background: #1DA1F2;
  }

  .whatsapp {
    background: #15cc31;
  }

  .pinterest {
    background: #e60023;
  }

  .botao-rs:hover {
    cursor: pointer;
  }

  .botao-rs i {
    width: 25px;
    height: 25px;
    line-height: 25px;
    font-size: 1.9em;
  }

  .botao-rs span {
    display: inline-block;
    white-space: nowrap;
    width: 0px;
    overflow: hidden;
    transition: 350ms ease;
  }

  .botao-rs:hover span {
    width: 100px;
    margin-left: 0;
  }
  
  .artigos-home { 

    padding:0.5em; 
    width:100%;
    /* float:left; */
    margin:0px auto; 
    background: #e9ecf0;
}

.artigos-home ul { 

    display:block; 
    margin-bottom:10px;
	margin-left: 80px;
	

}

.artigos-home ul li { 

    list-style:none; 
    background-color:#fff; 
    padding:8px 20px; 
    border-radius:5px; 
    margin:3px; 
    cursor:pointer; 
    display:flex; 
    float:left; 

}

.artigos-home ul li.active { 

    background-color:#03a9f4; 
    color:#fff;  

}

.row-articles { 

    width:100%; 
    display:flex; 
    flex-wrap:wrap;
    margin-left: 22px;	
}

.row-articles .itemBox { 

    position:relative; 
    width:100%; 
    height:auto; 
    margin:5px; 
    background-color:#fff; 
    padding:0.8em;
    border-radius:4px; 
    overflow:hidden; 
    display:grid; 
}

.row-articles .itemBox img { 

    width:100%; 
    margin-bottom:6px; 
    float:left; 
}

.row-articles .itemBox h1 { 

    color:#4297cb; 
    font-size:1.5em; 
    margin-bottom:5px; 
    padding-bottom:5px; 
    border-bottom:1px #f4f4f4 solid;
    width:100%;
    float:left;

}

.row-articles .itemBox p { 
    
    width:100%;
    float:left;
    margin-bottom:10px;
    color:#444; 
    font-size:1em; 

}

.row-articles .itemBox a { 
    
    text-decoration:none;
    color:#4297cb; 
    font-size:1em; 

}

.row-articles .itemBox a:hover { 
    
    text-decoration:underline;
    color:#444; 

}

/*Responsivo*/

/*480PX BREAKPOINT*/
@media (min-width:30em){


}

/*600PX BREAKPOINT*/
@media (min-width:37em){


}

/*768PX BREAKPOINT*/
@media (min-width:48em){

.row-articles .itemBox { width:20.0%; }

}

/*960PX BREAKPOINT*/
@media (min-width:60em){

}

/*1280PX BREAKPOINT*/
@media (min-width:80em){

.artigos-home ul    { display:flex; }
.artigos-home ul li { display:block; }

}

/*Formulario*/

.container-form {

  position: relative;
  max-width: 870px;
  width: 100%;
  margin: auto;
  background: rgba(255, 255, 255, 0.61);
  padding: 25px;
  border-radius: 8px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);

}

.container-form .title-form {
  font-size: 1.2em;
  color: #000;
  font-weight: 600;
  text-align: center;
}

.container-form .form {
  margin-top: 15px;
}

.form .input-box {
  width: 100%;
  margin-top: 10px;
}

.input-box label {
  color: #000;
}

.form :where(.input-box input, .select-box) {
  
  position: relative;
  height: 35px;
  width: 100%;
  outline: none;
  font-size: 1rem;
  color: #333;
  margin-top: 5px;
  border: 1px solid #A4E3F0;
  border-radius: 6px;
  padding: 0 1px;
  background: #E9F8FB;

}

.input-box input:focus {
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}

.form :where(.input-box textarea) {
  
  position: relative;
  height: 100px;
  width: 100%;
  outline: none;
  font-size: 1rem;
  color: #333;
  margin-top: 5px;
  border: 1px solid #A4E3F0;
  border-radius: 6px;
  padding: 0 1px;
  background: #E9F8FB;

}

.input-box textarea:focus {
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}

.form .column {
  display: flex;
  column-gap: 15px;
}

.form .gender-box {
  margin-top: 10px;
}

.form :where(.gender-option, .gender) {
  display: flex;
  align-items: center;
  column-gap: 50px;
  flex-wrap: wrap;
}

.form .gender {
  column-gap: 5px;
}

.gender input {

  accent-color: #007CFF;
  float: left;
  width: 15px;
  height: 15px;

}

.form :where(.gender input,.gender textarea, .gender label) {
  cursor: pointer;
}

.gender label {
  color: #000;
}

.address :where(input, .select-box) {
  margin-top: 10px;
}

.select-box select {
  height: 100%;
  width: 100%;
  outline: none;
  border: none;
  color: #808080;
  font-size: 1em;
  background: #e9f8fb;
}

.form button {
  height: 40px;
  width: 100%;
  color: #ffffff;
  font-size: 1rem;
  font-weight: 400;
  margin-top: 15px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  background: #007cff;
}

.form button:hover {
  background: #28D1F2;
}

/*Anti-span*/
.naoexibir { display:none; }

/*Formulario*/