/* --------------------------------------------------------------------------------------------- */
/* ########################################## LOADER ########################################### */
/* --------------------------------------------------------------------------------------------- */
#loader {
  z-index: 10000;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.7); }
#loader > .content { 
  position: relative; 
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  margin-top: 200px;
  animation: updown 4s infinite linear; }
/* ------------------------------------------------------------------------- */
#loader > .content > .smoke {
  position: absolute;
  width: 250px;
  height: 250px;
  top: -200px;
  background-color: rgba(255, 255, 255, .8);
  border-radius: 100% 100% 100% 0;
  transform: rotate(-45deg);
  animation: smokeBounce 3s infinite linear; }
/* ------------------------------------------------------------------------- */
#loader > .content > .backpack { transform: scale(.6); animation: backpackBounce 1.5s infinite linear; }
#loader > .content > .backpack > .content1 {
  position: relative;
  width: 170px;
  height: 240px;
  background-color: #0789bd;
  border-radius: 100px 100px 40px 40px; }
#loader > .content > .backpack > .content1:before {
  z-index: -1;
  content: "";
  position: absolute;
  width: 25px;
  height: 14px;
  left: 50%;
  transform: translateX(-50%);
  top: -14px;
  border: 5px solid #0789bd;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px; }
#loader > .content > .backpack > .content2 {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 160px;
  height: 230px;
  left: 5px;
  bottom: 0;
  background-color: #056e9a;
  border-radius: 100px 100px 40px 40px; }
#loader > .content > .backpack > .content3 {
  z-index: 1;
  position: absolute;
  width: 170px;
  height: 220px;
  left: 0;
  bottom: 0;
  background-color: #0789bd;
  border-radius: 100px 100px 40px 40px; }
#loader > .content > .backpack > .content4 {
  z-index: 2;
  position: absolute;
  width: 154px;
  height: 205px;
  left: 8px;
  bottom: 0;
  background-color: #079bd7;
  border-radius: 100px 100px 40px 40px; }
#loader > .content > .backpack > .content4 > .pocket1 {
  position: absolute;
  width: calc(100% - 16px);
  height: 84px;
  top: 8px;
  left: 8px;
  background-color: #46454d;
  border-top-left-radius: 100px;
  border-top-right-radius: 100px;
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px; }
#loader > .content > .backpack > .content4 > .pocket1 > .belt1,
#loader > .content > .backpack > .content4 > .pocket1 > .belt2 {
  position: absolute;
  width: 10px;
  height: 15px;
  top: 100%;
  background-color: #46454d;
  border-bottom-left-radius: 100px;
  border-bottom-right-radius: 100px; }
#loader > .content > .backpack > .content4 > .pocket1 > .belt1 { left: 25px; }
#loader > .content > .backpack > .content4 > .pocket1 > .belt2 { right: 25px; }
#loader > .content > .backpack > .content4 > .pocket1 > .belt1:after,
#loader > .content > .backpack > .content4 > .pocket1 > .belt2:after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  left: 2px;
  bottom: 2px;
  background-color: #fff;
  border-radius: 100px; }
#loader > .content > .backpack > .left_lug,
#loader > .content > .backpack > .right_lug { position: absolute; width: 90px; height: 110px; top: -10px; border: 26px solid transparent; border-top-color: #079bd7; }
#loader > .content > .backpack > .left_lug {
  left: -15px;
  border-top-right-radius: 90px;
  border-left-color: #056e9a;
  border-right-color: #079bd7;
  transform: skewX(10deg) rotate(-5deg); }
#loader > .content > .backpack > .right_lug {
  right: -15px;
  border-top-left-radius: 90px;
  border-right-color: #056e9a;
  border-left-color: #079bd7;
  transform: skewX(-10deg) rotate(5deg); }
#loader > .content > .backpack > .left_pocket,
#loader > .content > .backpack > .right_pocket { position: absolute; width: 10px; height: 50px; bottom: 30px; background-color: #0789bd; }
#loader > .content > .backpack > .left_pocket { left: -7px; border-top-left-radius: 25px; border-bottom-left-radius: 50px; transform: rotate(-5deg); }
#loader > .content > .backpack > .right_pocket { right: -7px; border-top-right-radius: 25px; border-bottom-right-radius: 50px; transform: rotate(5deg); }
#loader > .content > .backpack > .content4 > .pocket2 {
  position: absolute;
  width: calc(100% - 40px);
  height: 50px;
  bottom: 30px;
  left: 20px;
  background-color: #46454d;
  border-radius: 8px; }
#loader > .content > .backpack > .content4 > .pocket2 > .zipper {
  content: "";
  position: absolute;
  width: 100%;
  height: 4px;
  top: 10px;
  left: 0;
  border-top: 3px dotted #079bd7; }
/* ------------------------------------------------------------------------- */
#loader > .content > .backpack > .content2 > .book {
  display: flex;
  justify-content: center;
  position: absolute;
  width: 100px;
  height: 100px;
  animation: book_animation 4s ease-in-out infinite both; }
#loader > .content > .backpack > .content2 > .book > .square1 {
  z-index: 1;
  position: relative;
  width: 80px;
  height: 80%;
  transform: skew(15deg) rotate(-10deg);
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
  background-color: #2a87fc;
  border-left: 6px solid #015cce; }
#loader > .content > .backpack > .content2 > .book > .square1:after {
  content: "";
  position: absolute;
  width: 45px;
  height: 20px;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #c1dbfc;
  border-radius: 4px; }
#loader > .content > .backpack > .content2 > .book > .square2 {
  position: absolute;
  width: 95px;
  height: 100%;
  left: -10px;
  top: 3px;
  transform: skew(15deg) rotate(-10deg);
  border-top-left-radius: 20px;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  background-color: #0f71ec;
  border-right: 5px solid #015cce;
  border-bottom: 5px solid #015cce; }
#loader > .content > .backpack > .content2 > .book > .square2:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 21px;
  bottom: -5px;
  left: 2px;
  background-color: #fef1db;
  border-top-left-radius: 100px;
  border-bottom-left-radius: 100px;
  border: 5px solid #015cce;
  border-right: none;
  transform: skew(-35deg) rotate(0deg); }
#loader > .content > .backpack > .content2 > .book > .square2 > .sheets { position: absolute; width: 85%; height: 1px; bottom: 5px; right: -2px; background-color: rgba(0,0,0,.1); }
#loader > .content > .backpack > .content2 > .book > .square2 > .sheets:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  top: -3px;
  right: -2px;
  background-color: rgba(0,0,0,.1); }
#loader > .content > .backpack > .content2 > .book > .square2 > .sheets:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  bottom: -3px;
  right: 2px;
  background-color: rgba(0,0,0,.1); }
/* ------------------------------------------------------------------------- */
#loader > .content > .backpack > .content2 > .pencil {
  display: flex;
  justify-content: center;
  position: absolute;
  width: 100px;
  height: 100px;
  transform: scale(0.8);
  animation: pencil_animation 4s ease-in-out infinite both; }
#loader > .content > .backpack > .content2 > .pencil > .body {
  position: relative;
  width: 25px;
  height: 80px;
  transform: rotate(45deg);
  margin-top: 8px;
  background-color: #ffc600; }
#loader > .content > .backpack > .content2 > .pencil > .body:before { content: ""; position: absolute; width: 100%; height: 15px; background-color: #eee; }
#loader > .content > .backpack > .content2 > .pencil > .body:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 15px;
  top: -15px;
  left: 0;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  background-color: #fb5058; }
#loader > .content > .backpack > .content2 > .pencil > .body > .wood {
  position: absolute;
  width: 0;
  height: 0;
  top: 100%;
  border-left: 13px solid transparent;
  border-right: 13px solid transparent;
  border-top: 30px solid #ffdbaa; }
#loader > .content > .backpack > .content2 > .pencil > .body > .wood:before,
#loader > .content > .backpack > .content2 > .pencil > .body > .wood:after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  top: -36px;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #ffdbaa; }
#loader > .content > .backpack > .content2 > .pencil > .body > .wood:before { left: -12px; }
#loader > .content > .backpack > .content2 > .pencil > .body > .wood:after { right: -12px; }
#loader > .content > .backpack > .content2 > .pencil > .body > .wood > .tip {
  position: absolute;
  width: 0;
  height: 0;
  top: -12px;
  left: -5px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 12px solid #5a5d59; }
/* ------------------------------------------------------------------------- */
#loader > .content > .backpack > .content2 > .lightbulb {
  display: flex;
  justify-content: center;
  position: absolute;
  width: 100px;
  height: 100px;
  padding-top: 20px;
  transform: scale(0.8);
  animation: lightbulb_animation 4s ease-in-out infinite both; }
#loader > .content > .backpack > .content2 > .lightbulb > .circle {
  width: 60px;
  height: 60px;
  background-color: #fcd462;
  border-radius: 100%; }
#loader > .content > .backpack > .content2 > .lightbulb > .trapeze {
  position: absolute;
  width: 52px;
  height: 0;
  bottom: 0px;
  border-top: 35px solid #fcd462;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent; }
#loader > .content > .backpack > .content2 > .lightbulb > .trapeze > .coil {
  position: absolute;
  width: 0;
  height: 0;
  bottom: 0;
  left: 2px;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 45px solid #f6c358; }
#loader > .content > .backpack > .content2 > .lightbulb > .trapeze > .coil::after {
  content: '';
  position: absolute;
  bottom: 10px;
  left: -6.5px;
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 32px solid #fcd462; }
#loader > .content > .backpack > .content2 > .lightbulb > .trapeze > .coil > .coil_circle1,
#loader > .content > .backpack > .content2 > .lightbulb > .trapeze > .coil > .coil_circle2 {
  position: absolute;
  width: 14px;
  height: 14px;
  bottom: 41px;
  border: 3px solid #f6c358;
  border-radius: 100%;
  border-bottom-right-radius: 0; }
#loader > .content > .backpack > .content2 > .lightbulb > .trapeze > .coil > .coil_circle1 { left: -21px; }
#loader > .content > .backpack > .content2 > .lightbulb > .trapeze > .coil > .coil_circle2 { right: -21px; }
#loader > .content > .backpack > .content2 > .lightbulb > .base { position: absolute; width: 30px; height: 20px; bottom: -12px; background-color: #657a85; }
#loader > .content > .backpack > .content2 > .lightbulb > .base:after {
  content: "";
  z-index: -1;
  position: absolute;
  width: 60%;
  height: 10px;
  bottom: -5px;
  left: 20%;
  background-color: #30465b;
  border-radius: 50%; }
#loader > .content > .backpack > .content2 > .lightbulb > .base > .spirals {
  position: absolute;
  width: 114%;
  height: 3px;
  top: 50%;
  transform: translateY(-50%);
  left: -5%;
  border-radius: 100px;
  background: #3a556a; }
#loader > .content > .backpack > .content2 > .lightbulb > .base > .spirals:before,
#loader > .content > .backpack > .content2 > .lightbulb > .base > .spirals:after {
  content: "";
  z-index: 1;
  position: absolute;
  width: 100%;
  height: 3px;
  left: 0;
  border-radius: 100px;
  background: #3a556a; }
#loader > .content > .backpack > .content2 > .lightbulb > .base > .spirals:before { top: -5px; }
#loader > .content > .backpack > .content2 > .lightbulb > .base > .spirals:after { bottom: -5px; }
/* ------------------------------------------------------------------------- */
#loader > .content > .backpack > .content2 > .erlenmeyer_flask {
  display: flex;
  justify-content: center;
  position: absolute;
  width: 130px;
  height: 120px;
  margin-top: 20px;
  transform: scale(0.9);
  animation: erlenmeyer_flask_animation 4s ease-in-out infinite both; }
#loader > .content > .backpack > .content2 > .erlenmeyer_flask > .base {
  position: relative;
  width: 0;
  height: 0;
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
  border-bottom: 100px solid #fff;
  margin-top: 15px; }
#loader > .content > .backpack > .content2 > .erlenmeyer_flask > .base:before {
  content: "";
  position: absolute;
  width: 30px;
  height: 50px;
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #fff; }
#loader > .content > .backpack > .content2 > .erlenmeyer_flask > .base:after {
  content: "";
  position: absolute;
  width: 40px;
  height: 12px;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 100px;
  background-color: #eee; }
#loader > .content > .backpack > .content2 > .erlenmeyer_flask > .base > .lines,
#loader > .content > .backpack > .content2 > .erlenmeyer_flask > .base > .lines:before,
#loader > .content > .backpack > .content2 > .erlenmeyer_flask > .base > .lines:after { position: absolute; width: 12px; height: 3px; background-color: #ddd; border-radius: 100px; }
#loader > .content > .backpack > .content2 > .erlenmeyer_flask > .base > .lines { top: 6px; left: -10px; }
#loader > .content > .backpack > .content2 > .erlenmeyer_flask > .base > .lines:before, #loader > .content > .backpack > .content2 > .erlenmeyer_flask > .base > .lines:after { content: ""; left: 0; }
#loader > .content > .backpack > .content2 > .erlenmeyer_flask > .base > .lines:before { top: 7px; }
#loader > .content > .backpack > .content2 > .erlenmeyer_flask > .base > .lines:after { top: 14px; }
#loader > .content > .backpack > .content2 > .erlenmeyer_flask > .base > .trapeze {
  position: absolute;
  bottom: -92px;
  left: -45px;
  width: 90px;
  height: 0;
  border-bottom: 30px solid #d9df61;
  border-left: 19px solid transparent;
  border-right: 19px solid transparent; }
#loader > .content > .backpack > .content2 > .erlenmeyer_flask > .base > .trapeze:before {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  top: 13px;
  left: 10px;
  border-radius: 50%;
  background-color: #eaed9e; }
#loader > .content > .backpack > .content2 > .erlenmeyer_flask > .base > .trapeze:after {
  content: "";
  position: absolute;
  width: 13px;
  height: 13px;
  top: 5px;
  left: 34px;
  border-radius: 50%;
  background-color: #eaed9e; }
/* ------------------------------------------------------------------------- */
#loader > .content > .backpack > .content2 > .atoms {
  position: absolute;
  width: 100px;
  height: 100px;
  transform: scale(0.8);
  animation: atoms_animation 4s ease-in-out infinite both; }
#loader > .content > .backpack > .content2 > .atoms:before {
  content: "";
  position: absolute;
  width: 24px;
  height: 24px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #eb423f;
  border-radius: 100%; }
#loader > .content > .backpack > .content2 > .atoms > .orbit1,
#loader > .content > .backpack > .content2 > .atoms > .orbit2,
#loader > .content > .backpack > .content2 > .atoms > .orbit3 {
  position: absolute;
  width: 50px;
  height: 100px;
  left: 50%;
  top: 0;
  border-radius: 50%; }
#loader > .content > .backpack > .content2 > .atoms > .orbit1 { transform: translateX(-50%); border: 4px solid #3397e8; }
#loader > .content > .backpack > .content2 > .atoms > .orbit2 { transform: translateX(-50%) rotate(60deg); border: 4px solid #2978b8; }
#loader > .content > .backpack > .content2 > .atoms > .orbit3 { transform: translateX(-50%) rotate(-60deg); border: 4px solid #1261a0; }
#loader > .content > .backpack > .content2 > .atoms > .orbit1:after,
#loader > .content > .backpack > .content2 > .atoms > .orbit2:after,
#loader > .content > .backpack > .content2 > .atoms > .orbit3:after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 100%;
  background-color: #f7b030; }
#loader > .content > .backpack > .content2 > .atoms > .orbit1:after { right: 3px; top: -2px; }
#loader > .content > .backpack > .content2 > .atoms > .orbit2:after { left: 4px; bottom: -2px; }
#loader > .content > .backpack > .content2 > .atoms > .orbit3:after { left: 2px; bottom: -2px; }
/* ------------------------------------------------------------------------- */
#loader > .text { color: #fff; margin-bottom: 0; margin-top: -40px; }
/* ------------------------------------------------------------------------- */
@keyframes backpackBounce {
  0% { transform: scale(.6) translate(0, 0); }
  50% { transform: scale(.6) translate(0, 4px); }
  100% { transform: scale(.6) translate(0, 0); }
}
@keyframes smokeBounce {
  0% { width: 250px; height: 250px; }
  50% { width: 230px; height: 230px; }
  100% { width: 250px; height: 250px; }
}
@keyframes book_animation {
  0% { transform: translate(0, 0); }
  8.333% { transform: translate(-100px, -450px); }
  50% { transform: translate(-100px, -450px); }
  58.333% { transform: translate(0, 0); }
  100% { transform: translate(0, 0); }
}
@keyframes pencil_animation {
  0% { transform: translate(0, 0); }
  8.333% { transform: translate(0, 0); }
  16.666% { transform: translate(100px, -450px); }
  58.333% { transform: translate(100px, -450px); }
  66.666% { transform: translate(0, 0); }
  100% { transform: translate(0, 0); }
}
@keyframes lightbulb_animation {
  0% { transform: translate(0, 0); }
  16.666% { transform: translate(0, 0); }
  25% { transform: translate(0, -350px); }
  66.666% { transform: translate(0, -350px); }
  75% { transform: translate(0, 0); }
  100% { transform: translate(0, 0); }
}
@keyframes erlenmeyer_flask_animation {
  0% { transform: translate(0, 0); }
  25% { transform: translate(0, 0); }
  33.333% { transform: translate(-100px, -250px); }
  75% { transform: translate(-100px, -250px); }
  83.333% { transform: translate(0, 0); }
  100% { transform: translate(0, 0); }
}
@keyframes atoms_animation {
  0% { transform: translate(0, 0); }
  33.333% { transform: translate(0, 0); }
  41.666% { transform: translate(120px, -240px); }
  83.333% { transform: translate(120px, -240px); }
  91.666% { transform: translate(0, 0); }
  100% { transform: translate(0, 0); }
}