html
{
    background:#111;
    /* background: linear-gradient(356deg, rgba(0,0,0,1) 82%, rgba(40,40,40,1) 100%); */
    color:#fff;
    /* font-family: 'Lato', sans-serif; */
    height: 100%;
}
body
{
    font-size: 21px;
    color: #fff;
    line-height: 170%;
    font-weight: 300;
}
b, strong, i, em, h1, h2, h3, h4, h5, h6, p
{
    color: #fff;
}
.page
{
    margin: 0 4rem;
    /* max-width: 1024px; */
    /* min-width: 800px; */
    transition: color 0.5s;
}
.invisi-list
{
    list-style: none;
}
.invisi-list li
{
    margin-bottom: 1.4rem;
}
.section-head
{
    font-size: 4rem;
    padding: 1rem 0 4rem 0;
    word-break: keep-all;
}
.header
{
    text-align: center;
    margin-bottom: 5rem;
    letter-spacing: 1.4rem;
    text-transform: uppercase;
    font-family: "Lato", sans-serif;
    font-weight: 700;
}
.extra-padding
{
    padding-left: 8rem !important;
    padding-right: 8rem !important;
}

/* Slider caption text */
.slider-text
{
    color: #f2f2f2;
    font-size: 18px;
    padding: 8px 12px;
    position: absolute;
    bottom: 8px;
    width: 100%;
    margin-bottom: 1rem;
    text-align: center;
}
.slider
{
    width: 90%;
    margin: 0 auto;
    font-size: 18px;
    height: 100%;
}
.slide
{
    margin: 0 20% 10% 20%;
}
.full-title
{
    font-size: 10rem;
    line-height: 10rem !important;
    /* font-family: 'Lato', sans-serif; */
    font-weight: 400;
}
.t-circle
{
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 6rem;
    height: 6rem;
    margin: 0.5rem auto 0 auto;
    border-radius: 50%;
    animation: chromaShadowMove 4500ms ease infinite;
}
.testimonial-quote
{
    font-size: 16px;
}
/* Next & previous buttons */
.prev, .next
{
    cursor: pointer;
    position: absolute;
    top: 250%;
    width: auto;
    margin-top: -22px;
    padding: 16px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
}
.my-work
{
    margin: 0 auto 0 auto;
    max-width: 836px;
}

/* Position the "next button" to the right */
.next
{
    right: 0;
    border-radius: 3px 0 0 3px;
}
.prev
{
    left: 0 !important;
}
.bio-image, .bio-image-container
{
    border-radius: 50%;
    width: 40%;
}
.bio-image-container
{
    margin: 2rem 0 2rem 4rem;
    shape-outside: circle(50%);
}
.testimonial-name
{
    margin: 1.4rem 0 0.5rem 0 !important;
    font-size: 120%;
}
.testimonial-title
{
    font-size: 90%;
}

.bigger
{
    font-size: 2rem;
}
.smaller
{
    font-size: 70%;
}
.lead-title
{
    min-width: 760px;
}
.lead-text
{
    min-width: 400px;
}
.chroma
{
    color: #111;
    text-shadow: -12px 0px 2px rgba(255, 2, 162, 0.5), 12px 0px 2px rgba(32, 210, 245, 0.5), -6px 0px 2px rgba(255, 211, 34, 0.5), 6px 0px 2px rgba(32, 75, 245, 0.5);
    animation: chromaticMove 4500ms ease infinite/*, pulse ease 200ms infinite*/;
}
.chromahover:hover
{
    animation: chromaticMoveSmall 4500ms ease infinite;
    color: rgba(17,17,17,1) !important;
    transition: color 0.5s;
}
.colorcycle
{
    animation: colorPulse linear 9000ms infinite;
}
@keyframes colorPulse
{
    0% {color: rgb(32, 210, 245);}
    20% {color: rgb(32, 75, 245);}
    40% {color: rgb(235, 45, 108);}
    60% {color: rgb(235,65,45);}
    80% {color: rgb(255, 211, 34);}
    100% {color: rgb(146, 235, 45);}
}
.cyanpulse
{
    animation: cyanPulse ease 9000ms infinite;
    text-shadow: 0 0 8px rgba(135, 253, 255, 0.2);
}
@keyframes cyanPulse
{
    0% {color: rgb(0, 153, 255)}
    15% {color: rgb(135, 253, 255)}
    30% {color: rgb(0, 102, 255)}
    45% {color: rgb(108, 187, 255)}
    60% {color: rgb(0, 162, 255)}
    75% {color: rgb(173, 225, 255)}
    90% {color: #00e5ff}
    100% {color: rgb(0, 153, 255)}
}
.magentapulse
{
    animation: magentaPulse ease 9000ms infinite;
    text-shadow: 0 0 8px rgba(255, 0, 76, 0.2);
}
.project-link, .project-link a
{
    color: rgb(255, 0, 89) !important;
}
.project-link a:hover
{
    animation: magentaPulse ease 9000ms infinite !important;
    text-shadow: 0 0 8px rgba(255, 0, 76, 0.2) !important;
}
@keyframes magentaPulse
{
    0% {color: rgb(255, 0, 89)}
    15% {color: rgb(255, 183, 184)}
    30% {color: rgb(225, 18, 125)}
    45% {color: rgb(236, 165, 255)}
    60% {color: rgb(255, 37, 193)}
    75% {color: rgb(255, 173, 180)}
    90% {color: rgb(255, 43, 89)}
    100% {color: rgb(255, 0, 89)}
}
.cyanpulselink
{
    color: rgb(92, 212, 255);
    transition: color 0.25s;
}
.cyanpulselink:hover
{
    color: rgb(142, 223, 255) !important;
    animation: cyanPulseLink ease 9000ms infinite;
    text-shadow: 0 0 4px rgba(0, 217, 255, 0.2);
    transition: color 0.25s;
}
@keyframes cyanPulseLink
{
    0% {color: rgb(142, 223, 255); text-shadow: 0 0 4px rgba(0, 217, 255, 0.2);}
    20% {color: rgb(193, 238, 255); text-shadow: 0 0 4px rgba(0, 217, 255, 0.2);}
    40% {color: rgb(24, 232, 255); text-shadow: 0 0 4px rgba(0, 217, 255, 0.2);}
    60% {color: rgb(154, 255, 253); text-shadow: 0 0 4px rgba(0, 217, 255, 0.2);}
    80% {color: rgb(210, 228, 255); text-shadow: 0 0 4px rgba(0, 217, 255, 0.2);}
    100% {color: rgb(142, 223, 255); text-shadow: 0 0 4px rgba(0, 217, 255, 0.2);}
}
.yellowpulse
{
    animation: yellowPulse ease 9000ms infinite;
    text-shadow: 0 0 8px rgba(255, 225, 0, 0.2);
}
@keyframes yellowPulse
{
    0% {color: rgb(255, 196, 0)}
    15% {color: rgb(255, 235, 171)}
    30% {color: rgb(255, 179, 48)}
    45% {color: rgb(234, 255, 130)}
    60% {color: rgb(255, 162, 0)}
    75% {color: rgb(239, 255, 68)}
    90% {color: rgb(255, 227, 184)}
    100% {color: rgb(255, 196, 0)}
}
.red
{
    color: rgba(235,65,45) !important;
}
.magenta
{
    color: rgb(235, 45, 108) !important;
}
.yellow
{
    color: rgba(255, 211, 34) !important;
}
.blue
{
    color: rgba(32, 75, 245) !important;
}
.cyan
{
    color: rgba(32, 210, 245) !important;
}
.green
{
    color: rgb(146, 235, 45) !important;
}
.pulse
{
    animation: pulse ease 200ms infinite;
}
.highlight-magenta
{
    background: linear-gradient(0deg, rgba(34,193,195,0) 20%, rgba(45, 211, 253, 0.1) 100%);
    border-radius: 16px;
    padding: 2rem;
}
.highlight-cyan
{
    background: linear-gradient(0deg, rgba(34,193,195,0) 20%, rgba(253,45,68,0.1) 100%);
    border-radius: 16px;
    padding: 2rem;
}
small
{
    display: block;
    text-transform: initial;
    font-size: 24px;
    
}
@keyframes gradientMove { 
    0%{background-size: 100% 4px}
    50%{background-size: 100% 2px}
    100%{background-size: 100% 4px}
}
@keyframes pulse
{ 
    0%{ opacity:.9;transform: skewX(1.5deg);}
    25%{ opacity:1;}
    50%{opacity:.9;}
    75%{ opacity:1; transform:skewX(.5deg);}
    100%{opacity:.9;}
}
@keyframes chromaticMove
{ 
    0% {text-shadow: -12px 0px 2px rgba(255, 2, 48, 0.5), 12px 0px 2px rgba(32, 210, 245, 0.5), -6px 0px 2px rgba(255, 211, 34, 0.5), 6px 0px 2px rgba(32, 75, 245, 0.5);}
    33% {text-shadow: 0px 6px 2px rgba(255, 2, 162, 0.5), 0px -6px 2px rgba(32, 210, 245, 0.5), 6px 3px 2px rgba(178, 255, 34, 0.5), 0px -3px 2px rgba(32, 75, 245, 0.5);}
    66% {text-shadow: 12px -6px 2px rgba(255, 2, 48, 0.5), -12px 6px 2px rgba(32, 210, 245, 0.5), 6px 3px 2px rgba(255, 211, 34, 0.5), -6px 3px 2px rgba(32, 75, 245, 0.5);}
    100% {text-shadow: -12px 0px 2px rgba(255, 2, 162, 0.5), 12px 0px 2px rgba(32, 210, 245, 0.5), -6px 0px 2px rgba(178, 255, 34, 0.5), 6px 0px 2px rgba(32, 75, 245, 0.5);}
}
@keyframes chromaticMoveSmall
{ 
    0% {text-shadow: -3px 0px 1px rgba(255, 2, 48, 0.5), 3px 0px 1px rgba(32, 210, 245, 0.5), -3px 0px 1px rgba(255, 211, 34, 0.5), 3px 0px 1px rgba(32, 75, 245, 0.5);}
    33% {text-shadow: 0px 3px 1px rgba(255, 2, 162, 0.5), 0px -1px 1px rgba(32, 210, 245, 0.5), 3px 1px 1px rgba(178, 255, 34, 0.5), 0px -1px 1px rgba(32, 75, 245, 0.5);}
    66% {text-shadow: 1px -1px 1px rgba(255, 2, 48, 0.5), -3px 1px 1px rgba(32, 210, 245, 0.5), 3px 1px 1px rgba(255, 211, 34, 0.5), -3px 1px 1px rgba(32, 75, 245, 0.5);}
    100% {text-shadow: -3px 0px 1px rgba(255, 2, 162, 0.5), 3px 0px 1px rgba(32, 210, 245, 0.5), -3px 0px 1px rgba(178, 255, 34, 0.5), 3px 0px 1px rgba(32, 75, 245, 0.5);}
}
.featured_logo
{
    vertical-align: middle;
    display: inline-block;
    max-width: 96px;
    max-height: 96px;
    min-width: 48px;
    transform: scale(1.0);
    transition: transform 1s;
    margin: 0 1rem;
}
.featured_logo:hover
{
    transform: scale(1.2);
    transition: transform 1s;
}
@keyframes attract
{
    0% {transform: scale(1.0)}
    50% {transform: scale(1.1)}
    100% {transform: scale(1.0)}
}
.button_container
{
    margin: 2rem 0;
}
a.mdlink
{
    color: rgb(133, 229, 250);
}
a:hover.mdlink
{
    /* color: rgb(140, 211, 255); */
    animation: colorPulse ease 4500ms infinite;
}
.project-card
{
    background-color: rgba(255,255,255,0.2);
}
.project-image img
{
    filter: saturate(1);
    filter: brightness(1);
    transition: filter 1s;
}
.project-image img:hover
{
    filter: saturate(3);
    filter: brightness(1.5);
    transition: filter 1s;
}
.chroma-shadow
{
    box-shadow: -12px 0px 0px rgba(255, 2, 162, 0.5), 12px 0px 0px rgba(32, 210, 245, 0.5), -6px 0px 0px rgba(255, 211, 34, 0.5), 6px 0px 0px rgba(32, 75, 245, 0.5);
    animation: chromaShadowMove 4500ms ease infinite;
}
/* @keyframes chromaShadowMove
{ 
    0% {box-shadow: -12px 4px 0px rgba(255, 2, 48, 0.5), 12px -4px 0px rgba(32, 210, 245, 0.5), -6px 4px 0px rgba(255, 211, 34, 0.5), 6px -4px 0px rgba(32, 75, 245, 0.5);}
    33% {box-shadow: 4px 6px 0px rgba(255, 2, 162, 0.5), -4px -6px 0px rgba(32, 210, 245, 0.5), 6px 3px 0px rgba(178, 255, 34, 0.5), -4px -3px 0px rgba(32, 75, 245, 0.5);}
    66% {box-shadow: 12px -6px 0px rgba(255, 2, 48, 0.5), -12px 6px 0px rgba(32, 210, 245, 0.5), 6px 3px 0px rgba(255, 211, 34, 0.5), -6px 3px 0px rgba(32, 75, 245, 0.5);}
    100% {box-shadow: -12px 4px 0px rgba(255, 2, 48, 0.5), 12px -4px 0px rgba(32, 210, 245, 0.5), -6px 4px 0px rgba(255, 211, 34, 0.5), 6px -4px 0px rgba(32, 75, 245, 0.5);}
} */
@keyframes chromaShadowMove
{ 
    0% {box-shadow: -12px 4px 0px rgba(255, 2, 48, 0.25), 12px -4px 0px rgba(32, 210, 245, 0.25), -6px 4px 0px rgba(255, 211, 34, 0.25), 6px -4px 0px rgba(32, 75, 245, 0.25);}
    33% {box-shadow: 4px 6px 0px rgba(255, 2, 162, 0.25), -4px -6px 0px rgba(32, 210, 245, 0.25), 6px 3px 0px rgba(178, 255, 34, 0.25), -4px -3px 0px rgba(32, 75, 245, 0.25);}
    66% {box-shadow: 12px -6px 0px rgba(255, 2, 48, 0.25), -12px 6px 0px rgba(32, 210, 245, 0.25), 6px 3px 0px rgba(255, 211, 34, 0.25), -6px 3px 0px rgba(32, 75, 245, 0.25);}
    100% {box-shadow: -12px 4px 0px rgba(255, 2, 48, 0.25), 12px -4px 0px rgba(32, 210, 245, 0.25), -6px 4px 0px rgba(255, 211, 34, 0.25), 6px -4px 0px rgba(32, 75, 245, 0.25);}
}
.hover-color
{
    filter: saturate(0);
    transition: filter 1s;
}
.hover-color:hover
{
    filter: brightness(1);
    filter: saturate(1);
    transition: filter 1s;
}
.section
{
    margin-bottom: 4rem;
}

* {box-sizing:border-box}

/* Slideshow container */
.slideshow-container
{
    position: relative;
    margin: auto;
}

/* Hide the images by default */
.tSlides
{
    /* display: none; */
    visibility: hidden;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover
{
    background-color: rgba(0,0,0,0.8);
}

.t-gradient
{
    padding: 2rem 2.5rem;
    background: rgb(34,193,195);
    background: linear-gradient(180deg, rgba(0,0,0,0) 1%, rgba(0,0,0,0.75) 1%, rgba(0,0,0,0.75) 99%, rgba(0,0,0,0) 99%);
}

.cyan-halo
{
    box-shadow: -12px 6px 0px rgba(2, 166, 255, 0.5), 12px -6px 0px rgba(2, 251, 255, 0.5), 0px -12px 0px rgba(136, 237, 255, 0.5);
    animation: cyan-halo-move 4500ms linear infinite;
    border: 1px solid rgba(10,255,255,0.5);
}
@keyframes cyan-halo-move
{
    0%
    {
        box-shadow: -12px 6px 0px rgba(2, 166, 255, 0.5), 12px -6px 0px rgba(2, 251, 255, 0.5), 0px -12px 0px rgba(136, 237, 255, 0.5);
    }
    20%
    {
        box-shadow: 0px 6px 0px rgba(2, 166, 255, 0.5), -6px 0px 0px rgba(2, 251, 255, 0.5), -6px 0px 0px rgba(136, 237, 255, 0.5);
    }
    40%
    {
        box-shadow: 12px 6px 0px rgba(2, 166, 255, 0.5), -12px 6px 0px rgba(2, 251, 255, 0.5), 0px 12px 0px rgba(136, 237, 255, 0.5);
    }
    60%
    {
        box-shadow: 12px -6px 0px rgba(2, 166, 255, 0.5), -12px 6px 0px rgba(2, 251, 255, 0.5), 6px 0px 0px rgba(136, 237, 255, 0.5);
    }
    80%
    {
        box-shadow: 0px -6px 0px rgba(2, 166, 255, 0.5), 0px 6px 0px rgba(2, 251, 255, 0.5), 6px -6px 0px rgba(136, 237, 255, 0.5);
    }
    100%
    {
        box-shadow: -12px 6px 0px rgba(2, 166, 255, 0.5), 12px -6px 0px rgba(2, 251, 255, 0.5), 0px -12px 0px rgba(136, 237, 255, 0.5);
    }
}
.yellow-halo
{
    box-shadow: -12px 6px 0px rgba(255, 217, 2, 0.5), 12px -6px 0px rgba(255, 174, 0, 0.5), 0px -12px 0px rgba(255, 235, 168, 0.5);
    animation: yellow-halo-move 4500ms linear infinite;
    border: 1px solid rgba(255, 243, 194, 0.5);
}
@keyframes yellow-halo-move
{
    0%
    {
        box-shadow: -12px 6px 0px rgba(255, 217, 2, 0.5), 12px -6px 0px rgba(255, 174, 0, 0.5), 0px -12px 0px rgba(255, 235, 168, 0.5);
    }
    20%
    {
        box-shadow: 0px 6px 0px rgba(255, 217, 2, 0.5), -6px 0px 0px rgba(255, 174, 0, 0.5), -6px 0px 0px rgba(255, 235, 168, 0);
    }
    40%
    {
        box-shadow: 12px 6px 0px rgba(255, 217, 2, 0.5), -12px 6px 0px rgba(255, 174, 0, 0.5), 0px 12px 0px rgba(255, 235, 168, 0);
    }
    60%
    {
        box-shadow: 12px -6px 0px rgba(255, 217, 2, 0.5), -12px 6px 0px rgba(255, 174, 0, 0.5), 6px 0px 0px rgba(255, 235, 168, 0);
    }
    80%
    {
        box-shadow: 0px -6px 0px rgba(255, 217, 2, 0.5), 0px 6px 0px rgba(255, 174, 0, 0.5), 6px -6px 0px rgba(255, 235, 168, 0);
    }
    100%
    {
        box-shadow: -12px 6px 0px rgba(255, 217, 2, 0.5), 12px -6px 0px rgba(255, 174, 0, 0.5), 0px -12px 0px rgba(255, 235, 168, 0.5);
    }
}
.magenta-halo
{
    box-shadow: -12px 6px 0px rgba(255, 10, 55, 0.5), 12px -6px 0px rgba(255, 24, 24, 0.5), 0px -12px 0px rgba(255, 172, 237, 0.5);
    animation: magenta-halo-move 4500ms linear infinite;
    border: 1px solid rgba(255, 211, 228, 0.5);
}
@keyframes magenta-halo-move
{
    0%
    {
        box-shadow: -12px 6px 0px rgba(255, 10, 55, 0.5), 12px -6px 0px rgba(255, 24, 24, 0.5), 0px -12px 0px rgba(255, 172, 237, 0.5);
    }
    20%
    {
        box-shadow: 0px 6px 0px rgba(255, 10, 55, 0.5), -6px 0px 0px rgba(255, 24, 24, 0.5), -6px 0px 0px rgba(255, 172, 237, 0.5);
    }
    40%
    {
        box-shadow: 12px 6px 0px rgba(255, 10, 55, 0.5), -12px 6px 0px rgba(255, 24, 24, 0.5), 0px 12px 0px rgba(255, 172, 237, 0.5);
    }
    60%
    {
        box-shadow: 12px -6px 0px rgba(255, 10, 55, 0.5), -12px 6px 0px rgba(255, 24, 24, 0.5), 6px 0px 0px rgba(255, 172, 237, 0.5);
    }
    80%
    {
        box-shadow: 0px -6px 0px rgba(255, 10, 55, 0.5), 0px 6px 0px rgba(255, 24, 24, 0.5), 6px -6px 0px rgba(255, 172, 237, 0.5);
    }
    100%
    {
        box-shadow: -12px 6px 0px rgba(255, 10, 55, 0.5), 12px -6px 0px rgba(255, 24, 24, 0.5), 0px -12px 0px rgba(255, 172, 237, 0.5);
    }
}

/* Fading animation */
.fade
{
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
}
  
@-webkit-keyframes fade
{
    from {opacity: .4}
    to {opacity: 1}
}
  
@keyframes fade
{
    from {opacity: .4}
    to {opacity: 1}
}

/* Color-Breathing Animation */
.color-breath
{
    -webkit-animation: color-breath 4000ms ease infinite;
    animation: color-breath 4000ms ease infinite;
}
.breath-0
{
    animation-delay: 0s;
}
.breath-1
{
    animation-delay: 0.4s;
}
.breath-2
{
    animation-delay: 0.8s;
}
.breath-3
{
    animation-delay: 1.2s;
}
.breath-4
{
    animation-delay: 1.6s;
}
.breath-5
{
    animation-delay: 2s;
}
  
@-webkit-keyframes color-breath
{
    0% {filter: saturate(0);}
    50% {filter: saturate(1);}
    100% {filter: saturate(0);}
}
  
@keyframes color-breath
{
    0% {filter: saturate(0);}
    50% {filter: saturate(1);}
    100% {filter: saturate(0);}
}

@media only screen and (max-width: 768px)
{
    .full-title
    {
        font-size: 6rem;
        line-height: 6rem !important;
        font-family: 'Lato', sans-serif;
        font-weight: 700;
    }
    .section-head
    {
        font-size: 2.5rem;
        padding: 1rem 0 4rem 0;
        word-break: keep-all;
    }
    .extra-padding
    {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }

}
@media only screen and (max-width: 600px)
{
    body
    {
        margin: 0rem !important;
    }
    .page
    {
        margin: 0 0.2rem;
        /* max-width: 1024px; */
        /* min-width: 800px; */
    }
    .full-title
    {
        font-size: 4rem;
        word-break: keep-all;
        line-height: 4rem !important;
        font-family: 'Lato', sans-serif;
        font-weight: 700;
    }
    .flex-me
    {
        display: flex;
    }
    .section-head
    {
        font-size: 2rem;
        word-break: keep-all;
        padding: 1rem 0 4rem 0;
    }
    .t-circle
    {
        /* height: 12rem;
        width: 12rem; */
        margin-bottom: 2rem;
    }
    .next
    {
        right: -1rem !important;
    }
    .prev
    {
        left: -1rem !important;
    }
    .p-text
    {
        margin-bottom: 6rem !important;
    }
    .bio-image, .bio-image-container
    {
        border-radius: 50%;
        width: 100%;
    }
    .bio-image-container
    {
        margin: 0 0 2rem 0;
        clear: both;
        float: none !important;
    }
    .hover-color
    {
        -webkit-animation: color-breath 4000ms ease infinite;
        animation: color-breath 4000ms ease infinite;
    }
    .hover-color:hover
    {
        /* filter: saturate(1); */
        /* transition: filter 1s; */
    }
    .bigger
    {
        font-size: 1.8rem !important;
    }
    .featured_logo
    {
        padding: 0.5rem;
    }
    .header
    {
        margin-bottom: 3rem;
        letter-spacing: 0.6rem !important;
    }
}
@media only screen and (max-width: 411px)
{
    .full-title
    {
        font-size: 3.4rem;
        word-break: keep-all;
        line-height: 3rem !important;
        font-family: 'Lato', sans-serif;
        font-weight: 700;
    }
    .bigger
    {
        font-size: 1.6rem !important;
    }
}