
/*
     CSS HEX
    --eerie-black: #141414;
    --forest-green-traditional: #084921;
    --green-pigment: #009e3c;
    --turquoise-green: #99d6b0;
    --cultured: #f5f5f5;
    --orange-peel: #ffa10a;

     CSS HSL
    --eerie-black: hsla(0, 0%, 8%, 1);
    --forest-green-traditional: hsla(143, 80%, 16%, 1);
    --green-pigment: hsla(143, 100%, 31%, 1);
    --turquoise-green: hsla(143, 43%, 72%, 1);
    --cultured: hsla(0, 0%, 96%, 1);
    --orange-peel: hsla(37, 100%, 52%, 1);

     SCSS RGB
    $eerie-black: rgba(20, 20, 20, 1);
    $forest-green-traditional: rgba(8, 73, 33, 1);
    $green-pigment: rgba(0, 158, 60, 1);
    $turquoise-green: rgba(153, 214, 176, 1);
    $cultured: rgba(245, 245, 245, 1);
    $orange-peel: rgba(255, 161, 10, 1);
 */


    * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }

    .landing .intro {
    position: relative;
    margin: 2em;
    margin-left: 30%;
    padding:1rem 3rem;
    color: #141414;
    background: rgba(245, 245, 246, 0.8 );
    font-size: 1rem;
    max-width: 65%;
    border-radius: 5px;
    box-shadow: 2px 2px 5px rgba(0, 158, 60, 0.6);
    background: rgba( 245, 245, 245, 0.75 );
    backdrop-filter: blur( 15px );
    -webkit-backdrop-filter: blur( 15px );
    border-radius: 5px;
    border: 1px solid rgba( 255, 255, 255, 0.18 );
    }
    .landing .text-content {
        width: 100%;
    }
    .landing .intro h1 {
        line-height: 1;
        font-weight: 400;
        color: #009e3c;
        text-align: start;
    }
    .landing .intro p {
        color: #141414;
        text-align: justify;
    }
    .landing .intro b {
        color: #009e3c;
    }
    .landing .intro strong {
        color: #009e3c;
    }
    .landing #CrossFade {
    background: #fff;
    display: flex;
    align-items: flex-end;
    height: 100vh;
    overflow: hidden;
    position: relative;
    }
    .landing #CrossFade img {
    position: absolute;
    min-width: 100%;
    min-height: 100%;
    height: auto;
    background: #000;
    backface-visibility: hidden;
    opacity: 0;
    transform: scale(1.4) rotate(12deg);
    animation: CrossFade 18s infinite;
    }
    .landing #CrossFade img:nth-child(3) {
    animation-delay: 6s;
    }
    .landing #CrossFade img:nth-child(2) {
    animation-delay: 12s;
    }


    @-moz-keyframes CrossFade {
    25% {
    opacity: 1;
    transform: scale(1) rotate(0);
    }
    40% {
    opacity: 0;
    }
    }
    @-webkit-keyframes CrossFade {
    25% {
    opacity: 1;
    transform: scale(1) rotate(0);
    }
    40% {
    opacity: 0;
    }
    }
    @-o-keyframes CrossFade {
    25% {
    opacity: 1;
    transform: scale(1) rotate(0);
    }
    40% {
    opacity: 0;
    }
    }
    @keyframes CrossFade {
    25% {
    opacity: 1;
    transform: scale(1) rotate(0);
    }
    40% {
    opacity: 0;
    }
    }

    .pullUpDown a:nth-child(1):before
    {
        height: 100%;
    }

    .pullUpDown a:nth-child(1):after
    {
        height: 100%;
    }
