/* am ++    animated-materials 
            mini-CSS
*/


/*   H E L P E R S  */

.am-center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.am-max {
    max-width: 960px;
}

.am-mid {
    max-width: 660px;
}

/* Text */
.am-textcenter {
    text-align: center;
}

.am-bullet li {
    list-style-type: square;
}

.am-bullet,
.am-bullet-right {
    padding-left: 2rem;
    padding-right: 1rem;
    list-style-type: none;
}

.am-bullet li,
.am-bullet-right li {
    padding-bottom: 6px;
}

.am-bullet li::marker {
    color: 8c7d88;
}

.am-bullet-right {
    text-align: right;
    list-style: none;
}

.am-hover:hover {
    color: #8c7d88;
}

.am-here {
    color: white !important;
    border: #5e5e5e;
    border-style: solid;
    padding-left: 5px;
    padding-right: 5px;
    background: #5e5e5e;
}

/* li::marker .am-here {
    color: red;
  }*/


/* Color */
.am-finegray {
    color: #c4c4c417;
}

.am-finegray-bg {
    background-color: #c4c4c417;
}

.am-subtlemagenta {
    color: #8c7d88;
}

.am-but-01 {
    background: #f1e0cc;
    border-color: #a38c6f;
    color: #a76511;
}

.am-but-02 {
    background: #d3bdb6;
    border-color: #a38c6f;
    color: #633627;
}

.am-but-03 {
    background: #d4e9e2;
    border-color: #8db6a9;
    color: #167e5d;
}

.am-but-04 {
    background: #f5e9a3;
    border-color: #f0df82;
    color: #87730a;
}

.am-but-05 {
    background: #f4adc0;
    border-color: #b17c8a;
    color: #762e41;
}

.am-but-06 {
    background: #faaca0;
    border-color: #bc6e62;
    color: #63271d;
}

/* ==== Animations ==== */
.am-animate-01 {
    position: relative;
    animation: slideinup;
    animation-timing-function: ease;
    animation-duration: 1.6s;
}

.am-animate-02 {
    position: relative;
    animation-name: slidein-left;
    animation-duration: 0.8s;
    animation-timing-function: ease;
    animation-delay: 0.8s;
    animation-fill-mode: backwards;
}

.am-animate-03 {
    position: relative;
    animation-name: slidein-right;
    animation-duration: 0.8s;
    animation-timing-function: ease;
    animation-delay: 0.8s;
    animation-fill-mode: backwards;
}

.am-animate-04 {
    position: relative;
    animation-name: fadein;
    animation-duration: 1.2s;
    animation-timing-function: ease;
    animation-delay: 1.2s;
    animation-fill-mode: backwards;
}

.am-animate-out {
    animation-name: fadeout;
    animation-duration: 2s;
    animation-timing-function: ease;
}

   /* <-- B A C K G R O U N D --> */
   .am-background {
    /* linear-gradient(to right, rgba(255, 255, 255, 0.8) 15%, rgba(255, 255, 255, 0.4) 25%, rgba(255, 255, 255, 0.4) 90%, rgba(255, 255, 255, 1) 100%),  */
    background-size: auto 100vh;
    background-position: top center;
    margin: 0;
    padding: 0;
    height: 100vh;
  }

@keyframes slideinup {
    0% {
        opacity: 0;
        top: 60px;
    }

    100% {
        opacity: 1;
        top: 0px;
    }
}

@keyframes slideinuphalf {
    0% {
        opacity: 0;
        top: 60px;
    }

    100% {
        opacity: 1;
        top: 0px;
    }
}

@keyframes slidein-left {
    0% {
        opacity: 0;
        left: 15px;
    }

    100% {
        opacity: 1;
        left: 0px;
    }
}

@keyframes slidein-right {
    0% {
        opacity: 0;
        left: -15px;
    }

    100% {
        opacity: 1;
        left: 0px;
    }
}

@keyframes fadein {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fadeout {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}