/* <<<<<<<<<<<<<<<<<<Variaveis globais>>>>>>>>>>>>>>>>>>>>. */
 * {
     padding: 0;
     margin: 0;

 }

 .tema {
     font-family: 'danley';
 }

 .subtema {
     font-family: 'bank gothic medium bt';
 }

 .corpo {
     background-color: #f2f2f2;
 }

 .azul {
     color: #00558C;

 }

 .text-padrao {
     color: #58585a;
 }

 .alinhamento {
     text-align: justify;

 }

 input::placeholder {
     font-family: 'bank gothic medium bt';
     font-size: 13px;
 }

 textarea::placeholder {
     font-family: 'bank gothic medium bt';
     font-size: 13px;
 }

 @font-face {
     font-family: 'bank gothic medium bt';
     src: url('/fonts/bank_gothic_medium_bt.ttf') format('truetype');
 }

 @font-face {
     font-family: 'danley';
     src: url('/fonts/danley.ttf') format('truetype');
 }

 /* <<<<<<<<<<<<<<<<<<,<<<<Variaveis globais>>>>>>>>>>>>>>>>>>>>>>>>>>>>>. */


 /* Primeiro Caroussel */
 .carousel-indicators button.active {
     background-color: #00558C;
 }

 /*Fim Primeiro Caroussel */

 /*Hover das imagens no inicio*/

 .box {
     position: relative;
     overflow: hidden;
 }

 .box img {
     width: 100%;
     height: 100%
 }

 .content {
     background-color: black;
     color: white;
     position: absolute;
     bottom: -80%;
     left: 0;
     width: 100%;
     height: 100%;
     padding: 20px;
     transition: all 0.7s;
     opacity: 0.7
 }

 .box:hover .content {
     bottom: 0
 }

 .content p {
     border-top: 1px solid white;
     border-bottom: 1px solid white;
     padding: 17px 0px
 }
 .content p1 {
    padding: 17px 0px
}

 /*Horas de Codigo>>>> Circular bars*/
 .circulo {
     position: relative;
     width: 100px;
     height: 100px;
     border-radius: 50%;
     background: radial-gradient(circle at center, var(--bg-color) 50%, transparent 52%);
     display: flex;
     justify-content: center;
     align-items: center;
     overflow: hidden;
     margin-bottom: 20px;
 }

 .circulo::after {
     content: "";
     position: absolute;
     width: 100%;
     height: 100%;
     border-radius: 50%;
     background: conic-gradient(from 90deg, #bcbdbd 0%, #fff var(--fill), var(--bg-color) var(--fill), var(--bg-color) 100%);
     transform-origin: center;
     animation: rotate 2s linear;
 }

 .circulo-overlay {
     position: absolute;
     width: 90px;
     height: 90px;
     border-radius: 50%;
     background-color: #fff;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     z-index: 1;
 }

 .circulo-text-container {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     text-align: center;
     z-index: 2;
 }

 .circulo-text {
     font-size: 11px;
     color: #58585a;
     font-family: 'bank gothic medium bt';
 }

 @keyframes rotate {
     0% {
         transform: rotate(0deg);
     }

     100% {
         transform: rotate(360deg);
     }
 }

 .circulo:nth-child(1) {
     --bg-color: #00558C;
     --fill: 20%;
 }

 .circulo:nth-child(2) {
     --bg-color: #00558C;
     --fill: 60%;
 }

 .circulo:nth-child(3) {
     --bg-color: #00558C;
     --fill: 30%;
 }

 .circulo:nth-child(4) {
     --bg-color: #00558C;
     --fill: 10%;
 }

 .circulo:nth-child(5) {
     --bg-color: #00558C;
     --fill: 0%;
 }

 /*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< RESPONSIVIDADE >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/

 /* Ajustes de layout e estilo para dispositivos com largura máxima de 450px celular */
 @media (max-width: 450px) {

     .box {
         height: 300px !important;
     }

 }