#CybotCookiebotDialogBodyContent{padding:12px 0 8px 50px !important;}
#CybotCookiebotDialogPoweredbyLink{display:none !important;}
a#CybotCookiebotDialogBodyLevelButtonAccept {
    background-color: #000 !important;
    border: 1px solid #000 !important;
}

/*$text-color: #eff2ef;*/
/*$modal-text: #fcf5c7;*/
/*$background-color: #fcf5c7;*/
/*$cover-color: #f9f0ae;*/
.about_section .skills_wrapper { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; }
.about_section .skill_group { width: 30%; }

.my_footer { background-color: #292929; margin-top: 40px; }

.resume-wrapper button { margin-top: 50px; }

body { background-color: #292929; min-height: 100%; min-width: 300px; }

nav { margin-top: 40px; margin-bottom: 100px; }

nav ul li a { font-weight: 600; /*color: black;*/ }

.projects_container { padding: 20px 10px 0 10px; width: 100%; margin: auto; }

nav ul li a:hover { transition: none !important; background-color: transparent; }

nav ul li { transition: none !important; background-color: transparent !important; }

.nav-underline { margin: 0 25px 0 25px; width: 0%; height: 3px; /*background-color: black;*/ background-color: white; transition: width 0.3s; }

.nav-underlined, .nav-hover-underlined { width: 30%; }

.heading { color: #f2f7f2; font-weight: 200px; font-size: 2.3rem; font-family: "Josefin Slab", serif; }

.homepage-section { display: block; height: 50vh; min-height: 300px; color: #d1d4d1; position: relative; }

.quote_box { padding: 0 5% 0 5%; margin: 50px 0; }

.quote { font-size: 2rem; line-height: 2.8rem; font-weight: 300; /*text-indent: 15%;*/ /*margin-bottom: 0;*/ font-family: "Raleway", sans-serif; color: #d1d4d1; }

.author { padding-right: 5%; margin-top: 0; font-size: 1.7rem; font-family: "Josefin Slab", serif; font-style: italic; color: #d1d4d1; }

.skills_heading { margin-top: 60px; font-size: 3rem; }

.skill_names { font-size: 1.5rem; color: #292929; font-style: "Raleway", sans-serif; font-weight: 200; margin-left: 10px; }

.my_container { max-width: 1300px; margin-left: auto; margin-right: auto; color: #d1d4d1; }

.carousel-arrows { width: 50px; height: 100%; background-color: rgba(0, 0, 0, 0.1); position: absolute; z-index: 1000; top: 0; }

.carousel-arrows:hover { background-color: rgba(0, 0, 0, 0.2); }

.left-arrow { left: 0; }

.right-arrow { left: 500px; }

.projects-bottom { margin-top: 50px; }

.footer_titles { font-family: "Josefin Slab", serif; font-size: 35px; }

.footer_icons { font-size: 30px !important; }

.footer_description_link { color: #d1d4d1; font-weight: 300; font-style: italic; transition: color 0.5s linear; }

.footer_description_link:hover { color: #d1d4d1; }

.footer_link_text { font-family: "Raleway", sans-serif; font-weight: 300; font-size: 20px; }

.about_me_links { color: black; font-weight: 200; font-style: italic; }

.about_me_links:hover { font-weight: 300; }

#email_modal { background-color: #292929; color: #d1d4d1; }

.project_list .modal, .project_list .modal-footer { background-color: #292929; }
.project_list .project_info { padding: 1%; padding-top: 20px; }
.project_list .modal { color: #d1d4d1; }
.project_list .buttons .button_wrapper { box-sizing: border-box; display: inline-block; width: 30%; margin: 1%; }
.project_list .modal-footer { text-align: center !important; height: auto; height: 75px; }
.project_list .modal-footer .row { margin-bottom: 0; }
.project_list .project_icons { margin-top: 20px; font-size: 1.3em; }
.project_list h4 { margin: 0px; }
.project_list p { margin: 0 !important; }
.project_list .info_type { font-style: italic; color: darkgrey; font-family: "Josefin Slab", serif; font-size: 1.5em; letter-spacing: +1px; text-transform: capitalize; }
.project_list .modal { height: 90vh !important; margin-top: 5vh; min-height: 650px; max-height: 90vh; }
.project_list .modal .modal-content { padding: 0 !important; margin: 0; }

body { display: flex; min-height: 100vh; flex-direction: column; }

main { flex: 1 0 auto; }

.carousel { margin: 0; padding: 0; height: 100%; max-height: 550px; }

.valign-wrapper { height: 100%; }

button { position: relative; font-family: "Raleway", sans-serif; display: block; height: 45px; line-height: 45px; width: 100%; font-size: 15px; letter-spacing: 0.8px; color: #292929; border: 1px #292929 solid !important; border-radius: 3px; outline: 0; overflow: hidden; background: none; z-index: 1; cursor: pointer; transition: 0.2s ease-in; -o-transition: 0.2s ease-in; -ms-transition: 0.2s ease-in; -moz-transition: 0.2s ease-in; -webkit-transition: 0.2s ease-in; }

.buttons button { color: #d1d4d1; border: 1px #d1d4d1 solid !important; }

button:focus { background-color: transparent; }

button.fill:hover { background-color: transparent; color: #bbcdc1f2; }

button.fill:before { content: ""; position: absolute; background: #292929; bottom: 0; left: 0; right: 0; top: 100%; z-index: -1; -webkit-transition: top 0.09s ease-in; }

.buttons button.fill:hover { color: #292929; }

.buttons button.fill:before { background: #d1d4d1; }

button.fill:hover:before { top: -5px; }

.description { color: #d1d4d1; letter-spacing: +1px; font-family: "Raleway", sans-serif; font-weight: 200; font-size: 1.1rem; }

.cover { background-color: #bbcdc1f2; width: 40%; height: 100%; margin: 0; padding: 0; }

.skills { margin-bottom: 40px; color: #d1d4d1; }

.project { width: 90%; height: 400px; margin: auto; margin-top: 40px; box-shadow: 0 0 1000px 10px black inset; background-position: center left; background-size: cover; background-repeat: no-repeat; }

.skill_icon { color: #d1d4d1; font-size: 1.5rem; }

.about_skill_icon { color: #292929; font-size: 1.5rem; }

.box { height: 50vh; }

.my-borders { margin: 0; padding: 0; height: 0px; width: 0px; position: absolute; background-color: #d1d4d1; }

.about-border { bottom: 0px; right: 0; }

.algorithms-border { top: 0; right: 0; }

.contact-border { top: 0; left: -1px; }

.projects-border { bottom: 0; left: 0; }

.about_img { margin-top: 15px; margin-right: 15px; -webkit-filter: sepia(0.3); filter: sepia(0.3); }

.about_paragraph { font-size: 1.6rem; line-height: 2.4rem; letter-spacing: +0.5px; font-weight: 200; }

/* label color */
.input-field label { color: #292929 !important; }

/* label focus color */
.input-field input:focus + label { color: #292929 !important; }

/* label underline focus color */
.input-field input:focus { border-bottom: 1px solid #292929 !important; box-shadow: 0 1px 0 0 #292929 !important; }

/* valid color */
.input-field input.valid { border-bottom: 1px solid darkgreen !important; box-shadow: 0 1px 0 0 darkgreen !important; }

/* invalid color */
.input-field input.invalid { border-bottom: 1px solid red !important; box-shadow: 0 1px 0 0 red !important; }

/* icon prefix focus color */
.input-field .prefix.active { color: #292929 !important; }

textarea:focus { outline: none !important; border-bottom: 1px solid #292929 !important; box-shadow: 0 1px 0 0 #292929 !important; }

nav, nav .nav-wrapper i, nav a.button-collapse, nav a.button-collapse i { font-size: 3rem; }

@media only screen and (max-width: 993px) { .nav-underlined, .nav-underline { margin-left: 40px; }
  .nav-underlined, .nav-hover-underlined { width: 15%; } }
@media only screen and (max-width: 601px) { nav, nav .nav-wrapper i, nav a.button-collapse, nav a.button-collapse i { font-size: 2.5rem; }
  .description { font-size: 0.9rem; }
  .project_list .modal { margin-top: 2vh !important; min-height: 550px !important; height: 75vh !important; }
  .info_type { font-weight: 400 !important; letter-spacing: normal !important; font-size: 0.9rem !important; font-family: "Josefin Slab", serif !important; }
  .about_section .skill_group { width: 50%; } }
#homepage { --color-text: #fff; --color-bg: #000; --color-link: #f9d77e; --color-link-hover: #fff; --color-info: #efc453; --glitch-width: 100vw; --glitch-height: 100vh; --gap-horizontal: 20px; --gap-vertical: 10px; --time-anim: 4s; --delay-anim: 0s; --blend-mode-1: none; --blend-mode-2: none; --blend-mode-3: none; --blend-mode-4: none; --blend-mode-5: overlay; --blend-color-1: transparent; --blend-color-2: transparent; --blend-color-3: transparent; --blend-color-4: transparent; --blend-color-5: #af4949; }

.glitch__img { position: absolute; width: 100%; height: 50vh; box-shadow: inset 0 0 0 1000px rgba(41, 41, 41, 0.85); transition: box-shadow 0.5s linear; background-color: var(--blend-color-1); background-size: cover; transform: translate3d(0, 0, 0); background-blend-mode: var(--blend-mode-1); box-sizing: border-box; background-position: center center; }

.about__bkgrnd { background-image: url("../images/atomshadow.jpg"); }

/*
.projects__bkgrnd { background-image: url("../images/mixer.jpg");
}

.algorithms__bkgrnd { background-image: url("../images/resume.jpg");
}

.contact__bkgrnd { background-image: url("../images/contact.jpg");
}
*/
.glitch__img:nth-child(n + 2) { opacity: 0; }

.glitch:hover > .glitch__img:nth-child(n + 2) { box-shadow: inset 0 0 0 1000px rgba(41, 41, 41, 0.6); animation-duration: var(--time-anim); animation-delay: var(--delay-anim); animation-timing-function: linear; animation-iteration-count: infinite; }

.glitch:hover > .box { animation-name: glitch-anim-text; animation-duration: var(--time-anim); animation-timing-function: linear; animation-iteration-count: infinite; }

.glitch:hover > .glitch__img:nth-child(2) { background-color: var(--blend-color-2); background-blend-mode: var(--blend-mode-2); animation-name: glitch-anim-1; }

.glitch:hover > .glitch__img:nth-child(3) { background-color: var(--blend-color-3); background-blend-mode: var(--blend-mode-3); animation-name: glitch-anim-2; }

.glitch:hover > .glitch__img:nth-child(4) { background-color: var(--blend-color-4); background-blend-mode: var(--blend-mode-4); animation-name: glitch-anim-3; }

.glitch:hover > .glitch__img:nth-child(5) { background-color: var(--blend-color-5); background-blend-mode: var(--blend-mode-5); animation-name: glitch-anim-flash; }

/* Animations */
@keyframes glitch-anim-1 { 0% { opacity: 1; transform: translate3d(var(--gap-horizontal), 0, 0); -webkit-clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%); clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%); }
  2% { -webkit-clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%); clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%); }
  4% { -webkit-clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%); clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%); }
  6% { -webkit-clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%); clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%); }
  8% { -webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%); clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%); }
  10% { -webkit-clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%); clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%); }
  12% { -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%); clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%); }
  14% { -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%); clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%); }
  16% { -webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%); clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%); }
  18% { -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%); clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%); }
  20% { -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%); clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%); }
  21.9% { opacity: 1; transform: translate3d(var(--gap-horizontal), 0, 0); }
  22%,
  100% { opacity: 0; transform: translate3d(0, 0, 0); -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0); clip-path: polygon(0 0, 0 0, 0 0, 0 0); } }
@keyframes glitch-anim-2 { 0% { opacity: 1; transform: translate3d(calc(-1 * var(--gap-horizontal)), 0, 0); -webkit-clip-path: polygon(0 25%, 100% 25%, 100% 30%, 0 30%); clip-path: polygon(0 25%, 100% 25%, 100% 30%, 0 30%); }
  3% { -webkit-clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%); clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%); }
  5% { -webkit-clip-path: polygon(0 5%, 100% 5%, 100% 20%, 0 20%); clip-path: polygon(0 5%, 100% 5%, 100% 20%, 0 20%); }
  7% { -webkit-clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%); clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%); }
  9% { -webkit-clip-path: polygon(0 40%, 100% 40%, 100% 40%, 0 40%); clip-path: polygon(0 40%, 100% 40%, 100% 40%, 0 40%); }
  11% { -webkit-clip-path: polygon(0 52%, 100% 52%, 100% 59%, 0 59%); clip-path: polygon(0 52%, 100% 52%, 100% 59%, 0 59%); }
  13% { -webkit-clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%); clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%); }
  15% { -webkit-clip-path: polygon(0 75%, 100% 75%, 100% 75%, 0 75%); clip-path: polygon(0 75%, 100% 75%, 100% 75%, 0 75%); }
  17% { -webkit-clip-path: polygon(0 65%, 100% 65%, 100% 40%, 0 40%); clip-path: polygon(0 65%, 100% 65%, 100% 40%, 0 40%); }
  19% { -webkit-clip-path: polygon(0 45%, 100% 45%, 100% 50%, 0 50%); clip-path: polygon(0 45%, 100% 45%, 100% 50%, 0 50%); }
  20% { -webkit-clip-path: polygon(0 14%, 100% 14%, 100% 33%, 0 33%); clip-path: polygon(0 14%, 100% 14%, 100% 33%, 0 33%); }
  21.9% { opacity: 1; transform: translate3d(calc(-1 * var(--gap-horizontal)), 0, 0); }
  22%,
  100% { opacity: 0; transform: translate3d(0, 0, 0); -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0); clip-path: polygon(0 0, 0 0, 0 0, 0 0); } }
@keyframes glitch-anim-3 { 0% { opacity: 1; transform: translate3d(0, calc(-1 * var(--gap-vertical)), 0) scale3d(-1, -1, 1); -webkit-clip-path: polygon(0 1%, 100% 1%, 100% 3%, 0 3%); clip-path: polygon(0 1%, 100% 1%, 100% 3%, 0 3%); }
  1.5% { -webkit-clip-path: polygon(0 10%, 100% 10%, 100% 9%, 0 9%); clip-path: polygon(0 10%, 100% 10%, 100% 9%, 0 9%); }
  2% { -webkit-clip-path: polygon(0 5%, 100% 5%, 100% 6%, 0 6%); clip-path: polygon(0 5%, 100% 5%, 100% 6%, 0 6%); }
  2.5% { -webkit-clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%); clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%); }
  3% { -webkit-clip-path: polygon(0 10%, 100% 10%, 100% 10%, 0 10%); clip-path: polygon(0 10%, 100% 10%, 100% 10%, 0 10%); }
  5% { -webkit-clip-path: polygon(0 30%, 100% 30%, 100% 25%, 0 25%); clip-path: polygon(0 30%, 100% 30%, 100% 25%, 0 25%); }
  5.5% { -webkit-clip-path: polygon(0 15%, 100% 15%, 100% 16%, 0 16%); clip-path: polygon(0 15%, 100% 15%, 100% 16%, 0 16%); }
  7% { -webkit-clip-path: polygon(0 40%, 100% 40%, 100% 39%, 0 39%); clip-path: polygon(0 40%, 100% 40%, 100% 39%, 0 39%); }
  8% { -webkit-clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%); clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%); }
  9% { -webkit-clip-path: polygon(0 60%, 100% 60%, 100% 55%, 0 55%); clip-path: polygon(0 60%, 100% 60%, 100% 55%, 0 55%); }
  10.5% { -webkit-clip-path: polygon(0 30%, 100% 30%, 100% 31%, 0 31%); clip-path: polygon(0 30%, 100% 30%, 100% 31%, 0 31%); }
  11% { -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 69%, 0 69%); clip-path: polygon(0 70%, 100% 70%, 100% 69%, 0 69%); }
  13% { -webkit-clip-path: polygon(0 40%, 100% 40%, 100% 41%, 0 41%); clip-path: polygon(0 40%, 100% 40%, 100% 41%, 0 41%); }
  14% { -webkit-clip-path: polygon(0 80%, 100% 80%, 100% 75%, 0 75%); clip-path: polygon(0 80%, 100% 80%, 100% 75%, 0 75%); }
  14.5% { -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 51%, 0 51%); clip-path: polygon(0 50%, 100% 50%, 100% 51%, 0 51%); }
  15% { -webkit-clip-path: polygon(0 90%, 100% 90%, 100% 90%, 0 90%); clip-path: polygon(0 90%, 100% 90%, 100% 90%, 0 90%); }
  16% { -webkit-clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%); clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%); }
  18% { -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 99%, 0 99%); clip-path: polygon(0 100%, 100% 100%, 100% 99%, 0 99%); }
  20% { -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 71%, 0 71%); clip-path: polygon(0 70%, 100% 70%, 100% 71%, 0 71%); }
  21.9% { opacity: 1; transform: translate3d(0, calc(-1 * var(--gap-vertical)), 0) scale3d(-1, -1, 1); }
  22%,
  100% { opacity: 0; transform: translate3d(0, 0, 0); -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0); clip-path: polygon(0 0, 0 0, 0 0, 0 0); } }
@keyframes glitch-anim-text { 0% { transform: translate3d(calc(-1 * var(--gap-horizontal)), 0, 0) scale3d(-1, -1, 1); -webkit-clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%); clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%); }
  2% { -webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%); clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%); }
  4% { -webkit-clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%); clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%); }
  5% { -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%); clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%); }
  6% { -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%); clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%); }
  7% { -webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%); clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%); }
  8% { -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%); clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%); }
  9% { -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%); clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%); }
  9.9% { transform: translate3d(calc(-1 * var(--gap-horizontal)), 0, 0) scale3d(-1, -1, 1); }
  10%,
  100% { transform: translate3d(0, 0, 0) scale3d(1, 1, 1); -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); } }
/* Flash */
@keyframes glitch-anim-flash { 0%,
  5% { opacity: 0.2; transform: translate3d(var(--gap-horizontal), var(--gap-vertical), 0); }
  5.5%,
  100% { opacity: 0; transform: translate3d(0, 0, 0); } }
#homepage { overflow: hidden; }
#homepage a { box-sizing: border-box; padding: 0px; }
#homepage .home_heading { font-family: "Josefin Slab", serif; font-size: 4rem; }
#homepage .row { margin: 0; z-index: 10; }
#homepage .about { background-size: cover; box-shadow: inset 0 0 0 1000px rgba(41, 41, 41, 0.9); transition: box-shadow 0.5s linear; }
#homepage .projects { box-shadow: inset 0 0 0 1000px rgba(41, 41, 41, 0.9); transition: box-shadow 0.5s linear; /*background-image: url("/assets/images/projects.jpg");*/ background-size: cover; }
#homepage .projects:hover { box-shadow: inset 0 0 0 1000px rgba(41, 41, 41, 0.6); }
#homepage .contact a { margin-left: 10px; }
#homepage .contact a:hover { color: #f46036; }
#homepage .algorithms { box-shadow: inset 0 0 0 1000px rgba(41, 41, 41, 0.9); transition: box-shadow 0.5s linear; background-size: cover; }
#homepage .algorithms:hover { background-color: #443c72; box-shadow: inset 0 0 0 1000px rgba(41, 41, 41, 0.6); }
#homepage .contact { box-shadow: inset 0 0 0 1000px rgba(41, 41, 41, 0.9); transition: box-shadow 0.5s linear; background-size: cover; }
#homepage .contact:hover { box-shadow: inset 0 0 0 1000px rgba(41, 41, 41, 0.6); }
#homepage .profile_picture { border-radius: 35%; }
#homepage .words { font-size: 1.3rem; letter-spacing: +2px; font-family: "Raleway", sans-serif; font-weight: 100; }
#homepage li { display: inline-block; }
@media all and (max-height: 600px) { #homepage body { overflow: visible; }
  #homepage .box { height: 300px; } }
@media all and (max-width: 600px) { #homepage body { overflow-y: visible !important; } }

.brand-logo { margin-left: 5px; margin-top: 5px; }

.barba-old-container { position: absolute; z-index: 5; visibility: visible !important; top: 0px; left: 0px; width: 100%; background-color: transparent; overflow-y: hidden !important; }

.barba-new-container { position: absolute; overflow: hidden !important; z-index: 0; width: 100%; top: 0px; left: 0px; }

.barba-new-container-back { position: absolute; z-index: 5; visibility: visible !important; top: 0px; left: 0px; width: 100%; background-color: transparent; overflow-y: hidden !important; }

#projects h3, .about-me h3, #algorithms h3 { font-family: 'Abril Fatface', cursive; font-weight: 600; letter-spacing: 1.2; }
#projects .card-title, .about-me .card-title, #algorithms .card-title { font-family: 'Abril Fatface', cursive; font-weight: 600; letter-spacing: 1.2; }
#projects .hidden, .about-me .hidden, #algorithms .hidden { display: none; }
#projects .project-img, .about-me .project-img, #algorithms .project-img { width: 500px; height: 300px; }
#projects .project-wrapper, .about-me .project-wrapper, #algorithms .project-wrapper { width: 100%; }
#projects .card, .about-me .card, #algorithms .card { width: 31.3%; height: 520px; display: inline-block; float: left; margin: 1% 1% 1% 1%; }
#projects .content, .about-me .content, #algorithms .content { min-height: 100vh; }
@media all and (max-width: 990px) { #projects .card, .about-me .card, #algorithms .card { width: 48%; } }
@media all and (max-width: 600px) { #projects .card, .about-me .card, #algorithms .card { width: 98%; min-width: 320px; margin: 5% 1% 5% 1%; } }
#projects .description, .about-me .description, #algorithms .description { font-family: "Raleway", sans-serif; font-size: 1.1em; }
#projects .about-me p, .about-me .about-me p, #algorithms .about-me p { color: white !important; margin: 4%; font-size: 25px; font-weight: 400; text-align: justify; text-indent: 50px; font-family: "Raleway", sans-serif; }

#nav-mobile a, #mobile-demo a { font-family: "Raleway", sans-serif; font-size: 1.3rem; margin: 0 10px 0 10px; }

nav { margin-bottom: 2%; }

.about-me .bio { color: white; padding: 2%; }

.technologies { background-color: white; color: #8e5572; padding: 0 2% 0 2%; }

.about-me p, .projects-paragraph { margin: 4%; font-size: 25px; font-weight: 400; text-align: justify; text-indent: 50px; font-family: "Raleway", sans-serif; }

.projects-paragraph { color: white; }

.about-me li { font-family: 'Julius Sans One', sans-serif; font-size: 1.5em !important; width: 30%; float: left; }

i { cursor: pointer; }

.tag { background-color: white; color: black; height: 1.5rem; line-height: 1.5rem; margin: 3px; font-size: 1rem; font-weight: 800px; }

#filter { background-color: white; color: black; height: 2rem; line-height: 2rem; font-size: 1.2rem; font-weight: 400px; }

.active_tag { background-color: lightgrey; }

.tag:hover, #filter:hover { background-color: darkgrey; }

#algorithms p, .algorithm-content p { color: white !important; margin: 4%; font-size: 25px; font-weight: 400; text-align: justify; text-indent: 50px; font-family: "Raleway", sans-serif; }

#algorithms h3 { color: white; }

.algorithm h3 { color: white; font-family: 'Abril Fatface', cursive; font-weight: 600; letter-spacing: 1.2; }

#algorithms a { color: #2E294E; }

#algorithms a:hover { opacity: 0.9; }

.post { border-bottom: solid 1px #2E294E; }

.time { font-style: italic; font-family: "Raleway", sans-serif; }

.small-info { color: darkgrey !important; margin: 4%; font-size: 25px; font-weight: 400; text-align: justify; text-indent: 50px; font-family: "Raleway", sans-serif; }

.back-link { font-family: "Raleway", sans-serif; font-size: 1.2em; }

.back-link:hover { text-decoration: underline; }

/* ---- reset ---- */
body { margin: 0; font: normal 75% Arial, Helvetica, sans-serif; }

canvas { display: block; vertical-align: bottom; }

/* ---- particles.js container ---- */
#particles-js { position: absolute; width: 100%; height: 100%; background-color: #c3c3c3; background-image: url(""); background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; }

/* ---- stats.js ---- */
.count-particles { background: #000022; position: absolute; top: 48px; left: 0; width: 80px; color: #13E8E9; font-size: .8em; text-align: left; text-indent: 4px; line-height: 14px; padding-bottom: 2px; font-family: Helvetica, Arial, sans-serif; font-weight: bold; }

.js-count-particles { font-size: 1.1em; }

#stats, .count-particles { -webkit-user-select: none; margin-top: 5px; margin-left: 5px; }

#stats { border-radius: 3px 3px 0 0; overflow: hidden; }

.count-particles { border-radius: 0 0 3px 3px; }

/*
html { width: 100%; height: 100%;   overflow: hidden; padding: 0; margin: 0; outline: 0;
}

body { width: 100%; height: 100%; padding: 0; margin: 0; overflow: hidden; background: #bb71f3; background: -moz-linear-gradient(-45deg, #bb71f3 0%, #3d4d91 100%); background: -webkit-linear-gradient(-45deg, #bb71f3 0%, #3d4d91 100%); background: linear-gradient(135deg, #bb71f3 0%, #3d4d91 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bb71f3', endColorstr='#3d4d91', GradientType=1); font-family: "Helvetica Neue", "Futura", "Trebuchet MS", Arial; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
*/
.btn { background-color: transparent !important; border: none !important; padding: unset !important; box-shadow: none !important; }

/* Top Info */
.title { position: absolute; width: 100%; top: 3%; line-height: 34px; height: 34px; text-align: center; font-size: 34px; opacity: 0.9; font-weight: 300; color: #fff; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.33); }

#timer { position: absolute; top: 0; left: 3%; text-align: left; font-size: 26px; opacity: 0.9; font-weight: 300; color: #fff; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.33); }

#duration, .duration { position: absolute; top: 0; right: 3%; text-align: right; font-size: 26px; opacity: 0.5; font-weight: 300; color: #fff; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.33); }

/* Controls */
.controlsOuter { position: absolute; width: 100%; height: 70px; bottom: 3%; }

.controlsInner { position: absolute; width: 340px; height: 70px; left: 50%; margin: 0 -170px; }

.btn { position: absolute; cursor: pointer; opacity: 0.9; -webkit-filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.33)); filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.33)); -webkit-user-select: none; user-select: none; }

.btn:hover { opacity: 1; }

#playBtn { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEUAAABGCAYAAACaGVmHAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QThERThENUFDNkJEMTFFNTk2RTBDMTRBMkYyNjVGMzQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QThERThENUJDNkJEMTFFNTk2RTBDMTRBMkYyNjVGMzQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpBOERFOEQ1OEM2QkQxMUU1OTZFMEMxNEEyRjI2NUYzNCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpBOERFOEQ1OUM2QkQxMUU1OTZFMEMxNEEyRjI2NUYzNCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PnFM7yIAAAFWSURBVHja7NRJDoMwDEDRcPL2ZoVeLEUtCyoCZPBsf8mS10+Wp5zzK6X0XGdJ0bdpRcnbPgfOESUFzjmKe5wrFLc4NSjucFpQ3OD0oJjHGUExiwOBYg4HEsUMDgaKehxMFLU4FCjqcChR1OBwoIjH4UQRiyMBRRyOJBQxOBJR2HEko7DhaEAhx9GEQoajEQUdRzMKGo4FFHAcSyhgOBZRhnEso3TjeEBpxvGEUo3jEeUWxzPKKU6gFHACpYATKMfegbLDWOcRl/Jr2X7JHI+2gOEZ5RTDI8othieUagwPKM0YllG6MSyiDGNYQgHDsIACjqEZBQ1DIwo6hiYUMgwNKOQYklHYMCSisGNIQhGDIQFFHAYnilgMDhTxGJQoajAoUNRhYKKoxcBAUY8BiWIGAwLFHMYIilmMHhTzGC0objBqUNxhXKG4xSihuMfYo8yB8d9HgAEATyefBJWpw70AAAAASUVORK5CYII="); width: 69px; height: 70px; left: 50%; margin: auto -34.5px; }

#pauseBtn { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEUAAABGCAYAAACaGVmHAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MDE4MjkzRjNDNzI0MTFFNTk2RTBDMTRBMkYyNjVGMzQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MDE4MjkzRjRDNzI0MTFFNTk2RTBDMTRBMkYyNjVGMzQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpBOERFOEQ1Q0M2QkQxMUU1OTZFMEMxNEEyRjI2NUYzNCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDowMTgyOTNGMkM3MjQxMUU1OTZFMEMxNEEyRjI2NUYzNCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pne5d1AAAAB8SURBVHja7NCxCQAwAALBuP/QZoEUlinua0G4tD1j83Asv/4GChQoUKBAgQIFChQoUKBAgQIFChQoUKBAgQIFChQoUKBAgQIFChQoUKBAgQIFChQoUKBAgQIFChQoUKBAgQIFChQoUKBAgQIFChQoUKBAgQIFCpRXV4ABAOgpXYTDYwEwAAAAAElFTkSuQmCC"); width: 69px; height: 70px; left: 50%; margin: auto -34.5px; display: none; }

#prevBtn { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAjCAYAAAAe2bNZAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MDE4MjkzRkJDNzI0MTFFNTk2RTBDMTRBMkYyNjVGMzQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MDE4MjkzRkNDNzI0MTFFNTk2RTBDMTRBMkYyNjVGMzQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDowMTgyOTNGOUM3MjQxMUU1OTZFMEMxNEEyRjI2NUYzNCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDowMTgyOTNGQUM3MjQxMUU1OTZFMEMxNEEyRjI2NUYzNCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PndeAH8AAACtSURBVHja7NXJCcAgEAVQEevK0lk6M1aW6CGQQBBn+ephBv7F0wNn8Vd7OWCWnOjd2FpzYk7K2cJAxFEA78cwA6I3porohWlCoDEkBArDQmhjRAgtjApCilFFcDEQBAcTUYinKLcJCqFinGEMYxjDgDFpJkzZwDsSRf2mE4ni9gwEJW1gVZTWNKmgtEdbhELtGRYKvfRIqF4buAnV+xxUUaNu0y9q9KH8oG4BBgDjdpk0jMoz1gAAAABJRU5ErkJggg=="); width: 35px; height: 35px; left: 0; top: 50%; margin: -17.5px auto; }

#nextBtn { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAjCAYAAAAe2bNZAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MDE4MjkzRjdDNzI0MTFFNTk2RTBDMTRBMkYyNjVGMzQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MDE4MjkzRjhDNzI0MTFFNTk2RTBDMTRBMkYyNjVGMzQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDowMTgyOTNGNUM3MjQxMUU1OTZFMEMxNEEyRjI2NUYzNCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDowMTgyOTNGNkM3MjQxMUU1OTZFMEMxNEEyRjI2NUYzNCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PiFbkXsAAACvSURBVHja7NZBDoAgDARA9GPiz/yZ8DKsxgMHY1rYBQ5sshdCwiQcWpdSOqWb1BGrSn6RiTJjmKhiDANVjUGiYBgECo6pQdEwJSg6xoJqhtGgVFkeETZBekhjdqZ6g4H5QnXH5Cg/CkadiZmYiZkYdtYGb8QRMDdi144C1jfFd0AG69RG7jNB6nsvV3+IZhgNgo6xIGiYEgQcU4OAYRCIagwSUYxhIMwYJsKEuQQYABTs+qTMuF1rAAAAAElFTkSuQmCC"); width: 35px; height: 35px; right: 0; top: 50%; margin: -17.5px auto; }

#playlistBtn { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAjCAYAAAAe2bNZAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MUVBQzMwNzRDNzI0MTFFNTk2RTBDMTRBMkYyNjVGMzQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MUVBQzMwNzVDNzI0MTFFNTk2RTBDMTRBMkYyNjVGMzQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoxRUFDMzA3MkM3MjQxMUU1OTZFMEMxNEEyRjI2NUYzNCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoxRUFDMzA3M0M3MjQxMUU1OTZFMEMxNEEyRjI2NUYzNCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PnWBPa0AAADGSURBVHjaYvz//z/DYAFMDIMIjDpm1DHDwjH/0fDugXAMCxK7AojPAnEHmpo0IFaisTsqIEECLPT+Q4ALlL0bihmQ+LQGYLsYoSXwf2iovAdiYyjbdaCiaQ+S2FkopjtgHK2bCESTC5r4+4GIKuQEjAz2DGQCHhTlDAtaLtoDjSJkoATN7iMzmjrRxO+NljODsZzpwBJNs0bLGShwhToCvWHVQYes7YruGJiFgljKmpEbTa5YKsrRcmbUMaOOGXUMNQBAgAEAm2XFJrn+jrsAAAAASUVORK5CYII="); width: 35px; height: 35px; top: 50%; left: 3%; margin: -17.5px auto; }

#volumeBtn { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAjCAYAAAAe2bNZAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MUVBQzMwNzBDNzI0MTFFNTk2RTBDMTRBMkYyNjVGMzQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MUVBQzMwNzFDNzI0MTFFNTk2RTBDMTRBMkYyNjVGMzQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoxRUFDMzA2RUM3MjQxMUU1OTZFMEMxNEEyRjI2NUYzNCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoxRUFDMzA2RkM3MjQxMUU1OTZFMEMxNEEyRjI2NUYzNCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PtAZ+FgAAAHRSURBVHja7FjRbYMwEIWqC7CCO4IzgjMCHYEV6AjuCHSEMAKMkIwAI5ARXFt9rox1phDA5KMnPSGwOZ4fx/mOVCmVPIu9JE9ke5GRGpejyeQanUapkXlj5lzEIMM1GqjRAyG1eNCLCeAVyDQq9WOdRoHrDeDP7YCM8reGiNQYQER6D6DIGHDc02xFJsfqjF00GDEnRCaBegp+RmMp8oyYERcmAAvMvWl8aLSBuQ2O58D4Ff7eqJiZa4MTF1OYUsZAwF9BKaOw0tsf6pjx+wwVXWU41Pwk1DF2opQRK7+skDIyECMlrv8GfoztwMaW9K7XTqKMujeZV8SQma31eO0iNpkW8L/a3t02Yu7aITL8CDL2S2VE/jqsnnHJ3I8urnpKldhkOEFmdB6TTO7kFveVRScjoExLqBWVTIbsax765RFh7n74GoFMiQefCLXcbWFEhs/MFfeFZGon9fsx1I78PVDPyA3qmXyqnhEzV1lgRT124/rBSq+Dj/Pa7sDUPVesrEGRvUSZMlQ/rSmgCqc7qBZ0B7aQ37RVsb2QJOIp1DcNUDXbg4wFw2qV06j5ZCqQYSE/yYZ1LxVPvjJ86v50p/8ztr96X3JT+v+zKGDfAgwAZkMcn0x+AsMAAAAASUVORK5CYII="); width: 35px; height: 35px; top: 50%; right: 3%; margin: -17.5px auto; }

/* Progress */
#waveform { width: 100%; height: 30%; position: absolute; left: 0; top: 50%; margin: -15% auto; display: none; cursor: pointer; opacity: 0.8; -webkit-user-select: none; user-select: none; }

#waveform:hover { opacity: 1; }

#bar { position: absolute; top: 50%; left: 0; width: 100%; height: 2px; background-color: rgba(255, 255, 255, 0.9); box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.33); opacity: 0.9; }

#progress { position: absolute; top: 0; left: 0; width: 0%; height: 100%; background-color: rgba(0, 0, 0, 0.1); z-index: -1; }

/* Loading */
#loading { position: absolute; left: 50%; top: 50%; margin: -35px; width: 70px; height: 70px; background-color: #fff; border-radius: 100%; -webkit-animation: sk-scaleout 1.0s infinite ease-in-out; animation: sk-scaleout 1.0s infinite ease-in-out; display: none; }

@-webkit-keyframes sk-scaleout { 0% { -webkit-transform: scale(0); }
  100% { -webkit-transform: scale(1); opacity: 0; } }
@keyframes sk-scaleout { 0% { -webkit-transform: scale(0); transform: scale(0); }
  100% { -webkit-transform: scale(1); transform: scale(1); opacity: 0; } }
/* Plylist */
#playlist { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.5); display: none; }

#list { width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }

.list-song { width: 100%; height: 120px; font-size: 50px; line-height: 120px; text-align: center; font-weight: bold; color: #fff; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.33); }

.list-song:hover { background-color: rgba(255, 255, 255, 0.1); cursor: pointer; }

/* Volume */
#volume { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.5); touch-action: none; -webkit-user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); display: none; }

.bar { position: absolute; top: 50%; left: 5%; margin: -5px auto; height: 10px; background-color: rgba(255, 255, 255, 0.9); box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.33); }

#barEmpty { width: 90%; opacity: 0.5; box-shadow: none; cursor: pointer; }

#barFull { width: 90%; }

#sliderBtn { width: 50px; height: 50px; position: absolute; top: 50%; left: 93.25%; margin: -25px auto; background-color: rgba(255, 255, 255, 0.8); box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.33); border-radius: 25px; cursor: pointer; }

/* Fade-In */
.fadeout { webkit-animation: fadeout 0.5s; -ms-animation: fadeout 0.5s; animation: fadeout 0.5s; }

.fadein { webkit-animation: fadein 0.5s; -ms-animation: fadein 0.5s; animation: fadein 0.5s; }

@keyframes fadein { from { opacity: 0; }
  to { opacity: 1; } }
@-webkit-keyframes fadein { from { opacity: 0; }
  to { opacity: 1; } }
@-ms-keyframes fadein { from { opacity: 0; }
  to { opacity: 1; } }
@keyframes fadeout { from { opacity: 1; }
  to { opacity: 0; } }
@-webkit-keyframes fadeout { from { opacity: 1; }
  to { opacity: 0; } }
@-ms-keyframes fadeout { from { opacity: 1; }
  to { opacity: 0; } }
@media screen and (max-width: 500px) { .titletrack { top: 20%; }
  #playlistBtn, #volumeBtn { top: -100%; }
  .list-song { height: 50px; font-size: 22px; line-height: 32px; } }
.close-to-about { z-index: 5; }
.close-to-about * { color: #fff; font-weight: bold; font-family: Arial, Helvetica, sans-serif; }

#duration { display: none !important; }

#close-gallery { margin-top: 20px; }