:root { 
     --main-cinza: #CCCCCC; 
     --main-branco: #FFFFFF; 
     --main-preto: #000000; 
 } 
  
 * { 
     box-sizing: border-box; 
 } 
  
 body { 
     background: url(../img/fundo.jpg); 
     background-position: center center; 
     background-size: cover cover; 
     padding: 0; 
     margin: 0; 
     font-weight: 300; 
 } 
  
 body, input { 
     font-family: 'Teko', sans-serif; 
 } 
  
 main { 
     width: 80vw; 
     height: 80vh; 
     margin: 10vh 8vw 10vh 12vw; 
     display: flex; 
     gap: 1vw; 
 } 
  
 .robotron { 
     background: url(../img/estrutura.png) no-repeat; 
     background-position: center center; 
     margin: 0; 
     flex-basis: 40%; 
     position: relative; 
 } 
  
 .robo { 
     height: 110%; 
     z-index: 1; 
     position: absolute; 
     left: -20%; 
     top: -5%; 
 } 
  
 .titulo { 
     transform: rotate(180deg); 
     font-weight: 500; 
     font-size: 130px; 
     position: absolute; 
     bottom: 7rem; 
     left: -3rem; 
     line-height: 0.8; 
     writing-mode: vertical-rl; 
     text-orientation: mixed; 
     color: rgba(255,255,255,0.8) 
 } 
  
 .box { 
     background: rgba(0,0,0,0.6); 
     clip-path: polygon(calc(100% - 30px) 0, 100% 30px, 100% calc(100% - 30px), calc(100% - 30px) 100%, 30px 100%, 0 calc(100% - 30px), 0 30px, 30px 0); 
     border-left: 5px solid var(--main-cinza); 
     height: 80%; 
 } 
  
 /****************************** Equipamentos *****/ 
  
 .equipamentos { 
     flex-basis: 32%; 
 } 
  
 .montador { 
     height: 100%;; 
 } 
  
 .montador-conteudo { 
     padding: 2em 10%; 
 } 
  
 .peca { 
     padding: 1em 0; 
 } 
  
 .peca-titulo { 
     color: var(--main-branco); 
     text-transform: uppercase; 
     font-size: 2.5em; 
 } 
  
 .controle { 
     background: var(--main-preto); 
     border-radius: 25px; 
     float: right; 
     display: inline-flex; 
     padding: 5px; 
     align-items: center; 
     align-self: flex-end; 
 } 
  
 .controle-contador { 
     width: 40px; 
     height: 35px; 
     background: none; 
     border: 0; 
     margin: 0 1rem; 
     color: var(--main-branco); 
     text-align: center; 
     font-size: 2.5em; 
     display: inline-flex; 
     align-items: center; 
     padding-top: 8px; 
 } 
  
 .controle-ajuste { 
     display: inline-block; 
     width: 40px; 
     height: 40px; 
     line-height: 44px; 
     border-radius: 50%; 
     color: var(--main-cinza); 
     font-size: 4em; 
     background: var(--main-preto); 
     text-align: center; 
     border: 3px solid var(--main-cinza); 
     cursor: pointer; 
 } 
  
 .linha { 
     border-color: var(--main-cinza); 
 } 
  
 .producao { 
     margin-top: 1em; 
     font-size: 2em; 
     text-transform: uppercase; 
     padding: 0.2em 1em; 
     float: right; 
     border: 3px solid var(--main-branco); 
     background: var(--main-branco); 
     clip-path: polygon(100% 0, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%, 0 0); 
     cursor: pointer; 
 } 
  
 .producao:hover { 
     background: var(--main-preto); 
     color: var(--main-branco) 
 } 
  
  
  
 /****************************** Estatísticas *****/ 
 .estatisticas { 
     flex-basis: 23%; 
     padding: 2em 2em 0; 
 } 
  
 .estatistica { 
     color: var(--main-branco); 
     display: flex; 
     align-items: flex-start; 
     height: 25%; 
 } 
  
 .estatistica-titulo { 
     font-size: 1.5em; 
     border-bottom: 1px solid var(--main-cinza); 
     flex-basis: 40%; 
     text-transform: uppercase; 
     order: 1 
 } 
  
 .estatistica-valor { 
     flex-basis: 60%; 
     position: relative; 
     margin: 10px 0 0; 
     order: 2; 
     margin: -10px 0 0; 
 } 
  
 .estatistica-valor::after { 
     content: ""; 
     display: block; 
     padding-bottom: 100%; 
     border: 1px solid var(--main-cinza); 
     border-radius: 50%; 
 } 
  
 .estatistica-numero { 
     position: absolute; 
     top: 50%; 
     transform: translateY(-46%); 
     width: 100%; 
     line-height: 100%; 
     text-align: center; 
     font-size: 3em; 
     margin: 0; 
 } 
  
 .estatistica:nth-child(2n) .estatistica-titulo { 
     order: 2; 
     text-align: right; 
 } 
  
 .estatistica:nth-child(2n) .estatistica-valor { 
     order: 1; 
     flex-basis: 35%; 
     margin: 10px 0 0; 
 } 
  
 @media screen and (max-width: 1600px) { 
     body {  
         font-size: 12px; 
     } 
     main { 
         width: 90vw; 
         height: 80vh; 
         margin: 5vh auto; 
     } 
 } 
  
 @media screen and (max-width: 1200px) { 
     body {  
         font-size: 13px; 
     } 
  
     main { 
         width: 96vw; 
         height: 80vh; 
         margin: 10vh auto; 
     } 
 }