:root {  

  --cor-p0: #071D41;
  --cor-p1: #155BCB;  
  --cor-p2: #73B3E7;
  --cor-n0: #f8f8f8;  
  --cor-n1: #CCCCCC;
  --cor-n2: #071D41;

  --cor-w: #FFF;

  --cor-ex1: #FFBE2E;
  --cor-ex1-h: #FFE396;
  --cor-ex2: #0081A1;
  --cor-ex2-h: #A8F2FF;

  --err: #E52207;     
  --err-h: #FF8D7B;   
  --act: #168821;   
  --act-h:  #70E17B;  
  
  --sombra-peq: 2px 2px 5px 0 rgba(0, 0, 0, 0.1);   
  --sombra-peq-d: 2px 0px 2px 0 rgba(0, 0, 0, 0.1);   
  --sombra-peq-e: -2px 0px 2px 0 rgba(0, 0, 0, 0.1);   
  --sombra-nav: 0px 0px 5px 0 rgba(0, 0, 0, 0.3);   
    
  --fonte-0: 0.65em;
  --fonte-1: 0.8em;
  --fonte-2: 1.15em;
  --fonte-3: 1.35em;
  --fonte-4: 1.7em;
  --fonte-5: 2.35em;
  --fonte-6: 3.2em;

  --espaco-0: .25em;
  --espaco-1: .5em;
  --espaco-2: 1.2em;
  --espaco-3: 2.5em;
  --espaco-4: 4em;

  --altura-0: 6vh;
  --altura-1: 12vh;
  --altura-2: 40vh;    
  --altura-3: 40vh; 

  --borda-rad-1: .25em;
  --borda-rad-2: .6em;
  --borda-rad-3: 1em;


  
}

@media screen and (max-width:1179px) {  
  
  :root {

    --fonte-6: 2.6em; 

  }
}


@media screen and (max-width:680px) {  

  :root {


    --espaco-4: 2.6em;

  }
}

@media screen and (max-width:400px) {  
  :root {

  --espaco-4: 2.6em;

  }
}

@media screen and (max-height:400px) {  
  :root {

--espaco-4: 2.6em;
  } 
}

@keyframes is-rotating {
  to{transform: rotate(1turn)}
}

*{
  font-family: 'Ralleway', sans-serif;
  box-sizing: border-box;    
}
   
body{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background-color: var(--cor-n0);
}

a{
  text-decoration: none;
}

h1,h2,h3,l,h5{
  color: var(--cor-p1);
  font-weight: 600;
  font-family: 'Rawline', sans-serif;
}

p{
  font-family: 'Rawline', sans-serif;
}

l{
  font-size: var(--fonte-2);
}

i{
  font-size: var(--fonte-2);
}

h1{
 font-size:var(--fonte-5);
}

h2{
  font-size:var(--fonte-4);
  font-weight: 400;
 }

 h3{
  font-size:var(--fonte-3);
  font-weight: 400;
 }

 #notLi{
  font-size: var(--fonte-1);
  font-weight: 200;
  text-transform:uppercase;
  font-family: 'Ralleway', sans-serif;
 }


#load {
  background-color: var(--cor-n0);
  position: fixed;
  display: block;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#carregando{

  animation: is-rotating 1s infinite;
  width:2em;
  height:2em;
  border: 5px solid var(--cor-n1);
  border-top: 5px solid var(--cor-p2);
  border-radius: 50%;    

}

.active{
  cursor: grabbing;
  cursor: -webkit-grabbing;
}

.grab{
  cursor: grab;
  cursor: -webkit-grab;
}