*,*::before, *::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

/* LOADER */
.loader {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100vh;
  z-index: 999999;
  background: white;
  -webkit-animation: color 9s infinite linear;
          animation: color 9s infinite linear;
}
@-webkit-keyframes color {
0%   { background: #fafafa; }
20%  { background: #f1e8cd; }
40%  { background: #eebf78; }
60%  { background: #f1af4c; }
80%  { background: #f08e32; }
100% { background: #f39212; }
}
@keyframes color {
0%   { background: #fafafa; }
20%  { background: #f1e8cd; }
40%  { background: #eebf78; }
60%  { background: #f1af4c; }
80%  { background: #f08e32; }
100% { background: #f39212; }
}


.titulo-radar
{
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
text-align: center;
font-size: 5vw;
bottom: 60px;
color: black;
font-family: 'poppins';

}
.radar {
  width: 100%;
  min-height: 100vh;
  padding: 0px 0;
  text-align: center;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  position: absolute;
  bottom: 25%;
}

.randar-box {
width: 360px;
height: 360px;
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;
-webkit-box-pack: center;
    -ms-flex-pack: center;
        justify-content: center;
margin-top: 40px;

--green: hsl(134, 34%, 38%);
--line-color: #212121;
}

.randar-content {
position: relative;
width: 320px;
height: 320px;
border-radius: 50%;
border: 15px solid rgb(243, 236, 236);    
background: 
-o-radial-gradient( #afadad 50%, #0a0a0a),
  -o-repeating-linear-gradient(
    bottom,
    var(--line-color) 0px,
    var(--line-color) 1px,
    transparent 1px,
    transparent 25px
  ),
  -o-repeating-linear-gradient(
    left,
    var(--line-color) 0px,
    var(--line-color) 1px,
    transparent 1px,
    transparent 25px
  ),
  -o-linear-gradient(315deg, var(--green), var(--green));    
background: 
radial-gradient( #afadad 50%, #0a0a0a),
  repeating-linear-gradient(
    0deg,
    var(--line-color) 0px,
    var(--line-color) 1px,
    transparent 1px,
    transparent 25px
  ),
  repeating-linear-gradient(
    90deg,
    var(--line-color) 0px,
    var(--line-color) 1px,
    transparent 1px,
    transparent 25px
  ),
  linear-gradient(135deg, var(--green), var(--green));
  background-position-x: 20px;
  background-position-y: 7px;
  background-blend-mode: soft-light;
  will-change: transform;
}
.randar-content::before {
content: "";
display: block;
width: 296px;
height: 296px;
border-radius: 50%;
position: absolute;
border: 1px solid #355555;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
-webkit-box-shadow: inset 0 0 20px 2px #333, 0 0 12px #999;
        box-shadow: inset 0 0 20px 2px #333, 0 0 12px #999;
}
.randar-content::after {
content: "";
background: -webkit-gradient(linear, left top, left bottom, from(var(--green)), color-stop(60%, black)),-webkit-gradient(linear, right top, left top, color-stop(50%, black), color-stop(50%, var(--green)));
background: -o-linear-gradient(var(--green) 0%, black 60%),-o-linear-gradient(right, black 50%, var(--green) 50%);
background: linear-gradient(var(--green) 0%, black 60%),linear-gradient(-90deg, black 50%, var(--green) 50%);
background-blend-mode: darken;
position: absolute;
width: 290px;
height: 290px;
margin-left: -145px;
margin-top: -145px;
left: 50%;
top: 50%;
border-radius: 50%;
will-change: opacity;
opacity: 0.15;
z-index: 88;
}
.rander-pos {
width: 0;
height: 0;
position: absolute;
border-width: 12px 10px;
border-style: solid;
border-color: transparent transparent #ca4828 transparent;
left: 50%;
top: 50%;
margin-left: -10px;
margin-top: -18px;
}

.rander-ball {
width: 10px;
height: 10px;
background: #f7f459;
position: absolute;
border-radius: 50%;
-webkit-box-shadow: 0px 0px 5px #ecea68;
        box-shadow: 0px 0px 5px #ecea68;
-webkit-animation: flash 3.1s linear infinite;
        animation: flash 3.1s linear infinite;
}

.rander-ball:nth-of-type(1) {
left: 189px;
top: 94px;
}

.rander-ball:nth-of-type(2) {
  left: 58px;
  top: 65px;
}

.rander-ball:nth-of-type(3) {
  left: 56px;
  top: 78px;
}
.rander-ball:nth-of-type(4) {
left: 104px;
top: 228px;
}

.randar-top {
width: 22px;
height: 40px;
position: absolute;
top: 0;
top: -25px;
background-image: -o-linear-gradient(135deg,#f7f1f1,#c5bcbc);
background-image: linear-gradient(-45deg,#f7f1f1,#c5bcbc);
-webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
        transform: translateY(0px);
-webkit-transition: 0.2s all;
-o-transition: 0.2s all;
transition: 0.2s all;
}
.randar-top::before {
content: "";
display: block;
width: 38px;
height: 18px;
position: absolute;
left: 50%;
margin-left: -19px;
border-radius: 12px 12px 2px 2px;
top: -4px;
background: white;
background-image: -o-linear-gradient(135deg,#f7f1f1,#c4c4c4);
background-image: linear-gradient(-45deg,#f7f1f1,#c4c4c4);
cursor: pointer;
z-index: 9;
}

.randar-checkbox{
  position: absolute;
  width: 30px;
  height: 30px;
  z-index: 99;
  top: -30px;
  opacity: 0;
  cursor: pointer;
}

.randar-top-body{
  display: block;
  width: 40px;
  height: 40px;
  border-bottom-left-radius: 30px;
  border-bottom-right-radius: 30px;
  -webkit-transform: translateX(-50%) translateY(-65%);
      -ms-transform: translateX(-50%) translateY(-65%);
          transform: translateX(-50%) translateY(-65%);
  background-color: #efefef;
  background-image: -o-radial-gradient( #f1e9e9, #ebe6e6);
  background-image: radial-gradient( #f1e9e9, #ebe6e6);
  -webkit-box-shadow: inset 10px -10px 10px 2px #d6d2d2;
          box-shadow: inset 10px -10px 10px 2px #d6d2d2;
  cursor: pointer;
  position: absolute;
  left: 50%;
  top: 30px;
}
.randar-top-body::before {
height: 0;
width: 0;
border-bottom: 40px solid #d6d2d2;
border-left: 10px solid transparent;
left: -10px;
content: "";
position: absolute;
}
.randar-top-body::after {
height: 0;
width: 0;
border-bottom: 40px solid #ebe6e6;
border-right: 10px solid transparent;
content: "";
position: absolute;
right: -10px;
}


.randar-content .rander-ball,
.randar-content .rander-pos{
  display: none;
}
.randar-content::after{
  background-blend-mode: unset;
}

.randar-checkbox:checked,
.randar-checkbox:checked+.randar-top{
-webkit-transform: translateY(10px);
    -ms-transform: translateY(10px);
        transform: translateY(10px);
}

.randar-checkbox:checked~.randar-content .rander-ball,
.randar-checkbox:checked~.randar-content .rander-pos{
  display: block;
}

.randar-checkbox:checked~.randar-content::after{
  background-blend-mode: darken;
  -webkit-animation: scan 5s linear infinite;
          animation: scan 5s linear infinite;
}


@-webkit-keyframes flash {
0%,
50%,
to {
  opacity: 1;
}

25%,
75% {
  opacity: 0.1;
}
}


@keyframes flash {
0%,
50%,
to {
  opacity: 1;
}

25%,
75% {
  opacity: 0.1;
}
}

@-webkit-keyframes scan {
from {
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}
to {
  -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
}
}

@keyframes scan {
from {
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}
to {
  -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
}
}