*{ 
  margin: 0; 
  padding: 0; 
  box-sizing: border-box; 
  font-family: 'Roboto', sans-serif;
}
body{
  width: 100%;
  height: 100vh;
  font-size: 1.1rem;
  font-weight: 300;
  overflow: hidden;
}
p{
  line-height: 1.6rem;
}
h3{ font-size: 1.2rem; }
a{ font-weight: 400; color: rgba(29, 161, 242, 1); }
.font-1{font-size: 1.5rem;}
.tooltip-yellow{
  padding: 0.5rem;
  background: #FFFBEC;
  border-left: 5px solid #FFDE78;
}
/* ############################## */
.mt1{ margin-top: 1rem; }
.mt2{ margin-top: 2rem; }
.mt3{ margin-top: 3rem; }
.mb3{ margin-bottom: 3rem; }
.bold{ font-weight: 700; }
/* ############################## */
nav{
  position: fixed; top: 0; left: 0; z-index: 10;
  width: 100%;
  height: 100%;
}
nav #close_nav{
  width: 100%;
  height: 100%;
  background: rgba(40, 44, 48, 0.2); 
}
nav ul{
  /* display: block; */
  /* display: grid; */
  /* grid-gap: 1rem; */
  position: absolute; top: 0; left: 0;
  width: 75%;
  height: 100%;
  padding: 2rem 1rem;
  background: rgba(40, 44, 48, 1); 
  overflow-y: scroll;
}
nav li{ list-style: none; }
nav a{
  display: grid;
  padding: 1rem;
  text-decoration: none;
  color: white;
}
nav.close_nav{
  transition: 0.5s;
  left: -100vw;
}
nav.show_nav{
  transition: 0.5s;
  left: 0vw;
}
nav .line{ 
  width: 100%;
  height: 1px;
  margin: 1rem 0;
  background: rgba(255, 255, 255, 0.2);
 }
/* ############################## */
section#black_bar{
  position: fixed; top: 0; left: 0; z-index: 5;
  display: grid;
  grid-template-columns: 100fr 20fr;
  align-items: center;
  width: 100%;
  height: 3rem;
  padding: 0 2rem 0 0.5rem;
  background: rgba(40, 44, 48, 1);
}
section#black_bar div#logo{
  font-size: 1.5rem;
  color: white;
}
section#black_bar div#burger{
  display: grid;
  grid-gap: 0.4rem;
  width: 100%;
}
section#black_bar .line{
  width: 100%;
  height: 0.2rem;
  background: white;
}
/* ############################## */
.page{
  position: absolute; top: 3rem; left: 0;
  width: 100vw;
  height: calc(100vh - 3.5rem);
  padding: 2rem 1rem 0rem 1rem;
  overflow: hidden;
  overflow-y: scroll;
}
.page > header{
  text-align: center;
  padding: 2rem 0;
}
.page > header > h1{
  font-size: 2.5rem;
  font-weight: 700;
  color: rgba(29, 161, 242, 1);
}
/* ############################## */
.card{
  display: grid;
  grid-gap: 1rem;
  padding: 1rem 0;
}
.card p{
  text-align: justify;
}

/* ############################## */
/* ############################## */
/* ############################## */
.spa_active{
  background: rgba(29, 161, 242, 1);
}
/* ############################## */
#page_loading{
  position: fixed; top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  padding: 0;
  background: rgba(40, 44, 48, 0.5);
  z-index: 20;
}
#page_loading h1{
  position: absolute; bottom: 10rem;
  width: 100%;
  text-align: center;
  color: white;
}
#page_loading p{
  position: absolute; bottom: 8rem;
  width: 100%;
  font-size: 2rem;
  text-align: center;
  color: white;
}
/* ############################## */
.spa_hide{ display: none; }
.spa_show{ display: block; 
  -webkit-animation: spa_fadein 0.7s forwards; /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: spa_fadein 0.7s forwards; /* Firefox < 16 */
  -ms-animation: spa_fadein 0.7s forwards; /* Internet Explorer */
  -o-animation: spa_fadein 0.7s forwards; /* Opera < 12.1 */
  animation: spa_fadein 0.7s forwards;  }
@keyframes spa_fadein {from { opacity: 0; }to   { opacity: 1; }}
/* Firefox < 16 */
@-moz-keyframes spa_fadein {from { opacity: 0; }to   { opacity: 1; }}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes spa_fadein {from { opacity: 0; }to   { opacity: 1; }}
/* Internet Explorer */
@-ms-keyframes spa_fadein {from { opacity: 0; }to   { opacity: 1; }}
/* Opera < 12.1 */
@-o-keyframes spa_fadein {from { opacity: 0; }to   { opacity: 1; }}

/* ############################## */
footer{
  position: fixed; bottom: 0; left: 0;
  width: 100vw;
  height: 0.5rem;
  background-color: rgba(40, 44, 48, 1);
}


/* ############################## */
/* ############################## */
/* ############################## */
@media screen and (min-width: 900px){
  section#black_bar{
    display: none;
  }
  nav{
    width: 40%;
    left: 0vw !important;
  }
  nav ul{
    width: 100%;
  }  
  nav #close_nav{
    display: none;
  } 
  .page{
    top: 0rem;
    left: calc(40%);
    width: calc(100vw - 40%);
    height: calc(100vh - 0.5rem);
    padding: 2rem 10% 5rem 10%;
  }
  #page_loading{    
    width: 100vw;
    padding: 0;
  }
  #page_loading h1, #page_loading p{
    padding-left: 40%;
  }

}
@media screen and (min-width: 1200px){
  nav{
    width: 30%;
  }
  .page{
    left: calc(30%);
    width: calc(100vw - 30%);
    padding: 2rem 20% 5rem 20%;
  }  
  #page_loading{    
    width: 100vw;
    padding: 0;
  }
  #page_loading h1, #page_loading p{
    padding-left: 30%;
  }

}