.footer-home {
    background-image: url("../images/footer-home.png");
    background-size: cover;
    padding: 40px 75px;
}

.footer-home .btn-outline-primary {
    width: 132px;
    height: 41px;

    color: white;
    background: transparent;
    border: var(--primary) solid 1.52px !important;

    font-family: Lato;
    font-size: 16px;
    font-weight: 400;
    line-height: 19.2px;
    letter-spacing: 0.15em;
}

.footer-home .btn-outline-primary img {
    width: 20px;
}

.footer-home .btn-outline-primary:hover {
    background: var(--primary) !important;
    border: var(--primary) solid 1.52px !important;
}

.footer-home .btn-outline-primary.btn-1 {
    min-width: 100% !important;
    height: auto !important;
    margin-top: 20.53px;
    padding: 16.21px 13.51px 16.21px 13.51px;
    border: var(--primary) solid 1.52px !important;
    color: white;

    font-family: Lato;
    font-size: 16px;
    font-weight: 400;
    line-height: 19.2px;
    letter-spacing: 0.1em;
}

.footer-home .btn-outline-primary.btn-1:hover {
    background: var(--primary) !important;
    border: var(--primary) solid 1.52px !important;
    color: white;
}

.footer-home .btn-outline-primary.btn-1 img {
    margin-top: -5px;
}

.footer-home img.logo {
    margin-top: 18%;
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (min-width: 0px) {
    .footer-home {
        padding: 20px 25px;
    }

    .footer-home img.logo {
        margin-top: 0%;
    }

    .footer-home .btn-outline-primary.btn-1 {
        font-size: 10px;    
    }

    .home-background {
        background-color: black;
        z-index: 1;
    }

    /*.home-background .left {
        width: 0vw;
        height: 100vh;
    }*/

    .home-background {
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        opacity: 1;
        width: 100%;
        height: 33vh;
    }

    section.home {
        z-index: 2;
        position: absolute;
        padding: 0 calc(75px / var(--to-sm));
        top: 15%;
        left: 0;
        right: 5px;
        

    }

    section.home h1 {
        font-family: Playfair Display;
        font-size: calc(66px / var(--to-sm));
        font-weight: 500;
        line-height: calc(0.8px / var(--to-sm));
        text-align: left;
    }

    section.home h1 span {
        color: var(--primary);
        font-weight: 700;
    }

    section.home h1 span.year {
        font-family: Playfair Display;
        font-size: calc(76px / var(--to-sm));
        font-weight: 700;
        line-height: calc(98.8px / var(--to-sm));
        text-align: left;
    }

    section.home h4 {
        font-family: Lato;
        font-size: calc(20px / var(--to-sm));
        font-weight: 700;
        line-height: calc(22.4px / var(--to-sm));
        letter-spacing: 0.15em;
        text-align: left;
    }

    section.home h5 {
        font-family: Lato;
        font-size: calc(20px / var(--to-sm));
        font-weight: 700;
        line-height: calc(22.4px / var(--to-sm));
        letter-spacing: 0.15em;
        text-align: left;
    }



    section.timeline .p-title {
        font-family: Lato;
        font-size: calc(22px / var(--to-sm));
        font-weight: 700;
        line-height: calc(22.4px / var(--to-sm));
        letter-spacing: 0.15em;
        text-align: center;
    }

    section.timeline .p-body {
        font-family: Lato;
        font-size: calc(22px / var(--to-sm));
        font-weight: 700;
        line-height: calc(22.4px / var(--to-sm));
        letter-spacing: 0.15em;
        text-align: center;
    }

    section.home h4 span {
        color: var(--primary);
    }

    section.home h5 span {
        color: var(--primary);
    }


    section.home button {
        color: white;
        background: transparent;
        border: var(--primary) solid 1.52px !important;

        font-family: Lato;
        font-size: calc(20px / var(--to-sm));
        font-weight: 400;
        line-height: calc(19.2px / var(--to-sm));
        letter-spacing: 0.15em;
    }

    section.home button.btn-login {
        width: 100px;
        height: 36px;
    }

    section.home button.btn-register {
        width: 185px;
        height: 36px;
    }

    section.home div.gap-text-to-button {
        height: calc(40px / var(--to-sm));
    }

    section.home div.gap-button {
        width: calc(30px / var(--to-sm));
    }

    section.home button:hover {
        background: var(--primary) !important;
        border: var(--primary) solid 1.52px !important;
    }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    .home-background {
        background-color: black;
        z-index: 1;
    }

    .home-background .left {
        width: 20vw;
        height: 100vh;
    }

    .home-background {
/*        background-image: url("../images/image-home-1.png");*/
        background-size: cover;
        /* <------ */
        background-repeat: no-repeat;
        background-position: inherit;
        opacity: 0.8;
        width: 100%;
        height: 100vh;
    }

    section.home {
        z-index: 2;
        position: absolute;
        /* height: 100vh; */
        padding: 0 calc(75px / var(--to-tablet));
        top: 25%;
    }

    section.home h1 {
        font-family: Playfair Display;
        font-size: calc(76px / var(--to-tablet));
        font-weight: 500;
        line-height: calc(98.8px / var(--to-tablet));
        text-align: left;
    }

    section.home h1 span {
        color: var(--primary);
        font-weight: 700;
    }

    section.home h1 span.year {
        font-family: Playfair Display;
        font-size: calc(76px / var(--to-tablet));
        font-weight: 700;
        line-height: calc(98.8px / var(--to-tablet));
        text-align: left;
    }

    section.home h4 {
        font-family: Lato;
        font-size: calc(16px / var(--to-tablet));
        font-weight: 700;
        line-height: calc(22.4px / var(--to-tablet));
        letter-spacing: 0.15em;
        text-align: left;
    }

    section.home h5 {
        font-family: Lato;
        font-size: calc(16px / var(--to-tablet));
        font-weight: 700;
        line-height: calc(22.4px / var(--to-tablet));
        letter-spacing: 0.15em;
        text-align: left;
    }

    section.timeline .p-title {
        font-family: Lato;
        font-size: calc(22px / var(--to-tablet));
        font-weight: 700;
        line-height: calc(22.4px / var(--to-tablet));
        letter-spacing: 0.15em;
        text-align: center;
    }

    section.timeline .p-body {
        font-family: Lato;
        font-size: calc(22px / var(--to-tablet));
        font-weight: 700;
        line-height: calc(22.4px / var(--to-tablet));
        letter-spacing: 0.15em;
        text-align: center;
    }

    section.home h4 span {
        color: var(--primary);
    }

    section.home h5 span {
        color: var(--primary);
    }


    section.home button {
        color: white;
        background: transparent;
        border: var(--primary) solid 1.52px !important;

        font-family: Lato;
        font-size: calc(16px / var(--to-tablet));
        font-weight: 400;
        line-height: calc(19.2px / var(--to-tablet));
        letter-spacing: 0.15em;
    }

    section.home button.btn-login {
        width: calc(200px / var(--to-tablet));
        height: calc(56px / var(--to-tablet));
    }

    section.home button.btn-register {
        width: calc(285px / var(--to-tablet));
        height: calc(56px / var(--to-tablet));
    }

    section.home div.gap-text-to-button {
        height: calc(40px / var(--to-tablet));
    }

    section.home div.gap-button {
        width: calc(30px / var(--to-tablet));
    }

    section.home button:hover {
        background: var(--primary) !important;
        border: var(--primary) solid 1.52px !important;
    }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 992px) {
    .footer-home .btn-outline-primary.btn-1 {
        font-size: 10px;    
    }

    .home-background {
        background-color: black;
        z-index: 1;
    }

    .home-background .left {
        width: 20vw;
        height: 100vh;
    }

    .home-background {
        background-size: cover;
        background-repeat: no-repeat;
        background-position: inherit;
        opacity: 0.8;
        width: 100%;
        height: 100vh;
    }

    section.home {
        z-index: 2;
        position: absolute;
        /* height: 100vh; */
        padding: 0 calc(75px / var(--to-md));
        top: 25%;
    }

    section.home h1 {
        font-family: Playfair Display;
        font-size: calc(76px / var(--to-md));
        font-weight: 500;
        line-height: calc(98.8px / var(--to-md));
        text-align: left;
    }

    section.home h1 span {
        color: var(--primary);
        font-weight: 700;
    }

    section.home h1 span.year {
        font-family: Playfair Display;
        font-size: calc(76px / var(--to-md));
        font-weight: 700;
        line-height: calc(98.8px / var(--to-md));
        text-align: left;
    }

    section.home h4 {
        font-family: Lato;
        font-size: calc(16px / var(--to-md));
        font-weight: 700;
        line-height: calc(22.4px / var(--to-md));
        letter-spacing: 0.15em;
        text-align: left;
    }

    section.home h5 {
        font-family: Lato;
        font-size: calc(16px / var(--to-md));
        font-weight: 700;
        line-height: calc(22.4px / var(--to-md));
        letter-spacing: 0.15em;
        text-align: left;
    }

    section.timeline .p-title {
        font-family: Lato;
        font-size: calc(22px / var(--to-md));
        font-weight: 700;
        line-height: calc(22.4px / var(--to-md));
        letter-spacing: 0.15em;
        text-align: center;
    }

    section.timeline .p-body {
        font-family: Lato;
        font-size: calc(22px / var(--to-md));
        font-weight: 700;
        line-height: calc(22.4px / var(--to-md));
        letter-spacing: 0.15em;
        text-align: center;
    }

    section.home h4 span {
        color: var(--primary);
    }

    section.home h5 span {
        color: var(--primary);
    }


    section.home button {
        color: white;
        background: transparent;
        border: var(--primary) solid 1.52px !important;

        font-family: Lato;
        font-size: calc(16px / var(--to-md));
        font-weight: 400;
        line-height: calc(19.2px / var(--to-md));
        letter-spacing: 0.15em;
    }

    section.home button.btn-login {
        width: calc(200px / var(--to-md));
        height: calc(56px / var(--to-md));
    }

    section.home button.btn-register {
        width: calc(285px / var(--to-md));
        height: calc(56px / var(--to-md));
    }

    section.home div.gap-text-to-button {
        height: calc(40px / var(--to-md));
    }

    section.home div.gap-button {
        width: calc(30px / var(--to-md));
    }

    section.home button:hover {
        background: var(--primary) !important;
        border: var(--primary) solid 1.52px !important;
    }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
    .footer-home .btn-outline-primary.btn-1 {
        font-size: 10px;    
    }

    .home-background {
        background-color: black;
        z-index: 1;
    }

    .home-background .left {
        width: 20vw;
        height: 100vh;
    }

    .home-background {
        background-size: cover;
        background-repeat: no-repeat;
        background-position: inherit;
        opacity: 0.8;
        width: 100%;
        height: 100vh;
    }

    section.home {
        z-index: 2;
        position: absolute;
        /* height: 100vh; */
        padding: 0 calc(75px / var(--to-lg));
        top: 25%;
    }

    section.home h1 {
        font-family: Playfair Display;
        font-size: calc(76px / var(--to-lg));
        font-weight: 500;
        line-height: calc(98.8px / var(--to-lg));
        text-align: left;
    }

    section.home h1 span {
        color: var(--primary);
        font-weight: 700;
    }

    section.home h1 span.year {
        font-family: Playfair Display;
        font-size: calc(76px / var(--to-lg));
        font-weight: 700;
        line-height: calc(98.8px / var(--to-lg));
        text-align: left;
    }

    section.home h4 {
        font-family: Lato;
        font-size: calc(30px / var(--to-lg));
        font-weight: 700;
        line-height: calc(22.4px / var(--to-lg));
        letter-spacing: 0.15em;
        text-align: left;
    }

    section.home h5 {
        font-family: Lato;
        font-size: calc(16px / var(--to-lg));
        font-weight: 700;
        line-height: calc(22.4px / var(--to-lg));
        letter-spacing: 0.15em;
        text-align: left;
    }

    section.timeline .p-title {
        font-family: Lato;
        font-size: calc(15px / var(--to-lg));
        font-weight: 700;
        line-height: calc(22.4px / var(--to-lg));
        letter-spacing: 0.15em;
        text-align: center;
    }

    section.timeline .p-body {
        font-family: Lato;
        font-size: calc(15px / var(--to-lg));
        font-weight: 700;
        line-height: calc(22.4px / var(--to-lg));
        letter-spacing: 0.15em;
        text-align: center;
    }

    section.home h4 span {
        color: var(--primary);
    }

    section.home h5 span {
        color: var(--primary);
    }


    section.home button {
        color: white;
        background: transparent;
        border: var(--primary) solid 1.52px !important;

        font-family: Lato;
        font-size: calc(16px / var(--to-lg));
        font-weight: 400;
        line-height: calc(19.2px / var(--to-lg));
        letter-spacing: 0.15em;
    }

    section.home button.btn-login {
        width: calc(200px / var(--to-lg));
        height: calc(56px / var(--to-lg));
    }

    section.home button.btn-register {
        width: calc(285px / var(--to-lg));
        height: calc(56px / var(--to-lg));
    }

    section.home div.gap-text-to-button {
        height: calc(40px / var(--to-lg));
    }

    section.home div.gap-button {
        width: calc(30px / var(--to-lg));
    }

    section.home button:hover {
        background: var(--primary) !important;
        border: var(--primary) solid 1.52px !important;
    }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1367px) {
    .footer-home .btn-outline-primary.btn-1 {
        font-size: 16px;    
    }

    .home-background {
        background-color: black;
        z-index: 1;
    }

    .home-background .left {
        width: 20vw;
        height: 100vh;
    }

    .home-background {
        background-size: cover;
        background-repeat: no-repeat;
        background-position: inherit;
        opacity: 0.8;
        width: 100%;
        height: 100vh;
    }

    section.home {
        z-index: 2;
        position: absolute;
        /* height: 100vh; */
        padding: 0 calc(75px / var(--to-xl));
        top: 25%;
    }

    section.home h1 {
        font-family: Playfair Display;
        font-size: calc(76px / var(--to-xl));
        font-weight: 500;
        line-height: calc(98.8px / var(--to-xl));
        text-align: left;
    }

    section.home h1 span {
        color: var(--primary);
        font-weight: 700;
    }

    section.home h1 span.year {
        font-family: Playfair Display;
        font-size: calc(76px / var(--to-xl));
        font-weight: 700;
        line-height: calc(98.8px / var(--to-xl));
        text-align: left;
    }


    section.home h4 {
        font-family: Lato;
        font-size: calc(20px / var(--to-xl));
        font-weight: 700;
        line-height: calc(22.4px / var(--to-xl));
        letter-spacing: 0.15em;
        text-align: left;
    }

    section.home h5 {
        font-family: Lato;
        font-size: calc(16px / var(--to-xl));
        font-weight: 700;
        line-height: calc(22.4px / var(--to-xl));
        letter-spacing: 0.15em;
        text-align: left;
    }

    section.timeline .p-title {
        font-family: Lato;
        font-size: calc(22px / var(--to-xl));
        font-weight: 700;
        line-height: calc(22.4px / var(--to-xl));
        letter-spacing: 0.15em;
        text-align: center;
    }

    section.timeline .p-body {
        font-family: Lato;
        font-size: calc(22px / var(--to-xl));
        font-weight: 700;
        line-height: calc(22.4px / var(--to-xl));
        letter-spacing: 0.15em;
        text-align: center;
    }

    section.home h4 span {
        color: var(--primary);
    }

    section.home h5 span {
        color: var(--primary);
    }


    section.home button {
        color: white;
        background: transparent;
        border: var(--primary) solid 1.52px !important;

        font-family: Lato;
        font-size: calc(16px / var(--to-xl));
        font-weight: 400;
        line-height: calc(19.2px / var(--to-xl));
        letter-spacing: 0.15em;
    }

    section.home button.btn-login {
        width: calc(200px / var(--to-xl));
        height: calc(56px / var(--to-xl));
    }

    section.home button.btn-register {
        width: calc(285px / var(--to-xl));
        height: calc(56px / var(--to-xl));
    }

    section.home div.gap-text-to-button {
        height: calc(40px / var(--to-xl));
    }

    section.home div.gap-button {
        width: calc(30px / var(--to-xl));
    }

    section.home button:hover {
        background: var(--primary) !important;
        border: var(--primary) solid 1.52px !important;
    }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1519px) {
    .footer-home .btn-outline-primary.btn-1 {
        font-size: 16px;    
    }

    .home-background {
        background-color: black;
        z-index: 1;
    }

    .home-background .left {
        width: 20vw;
        height: 100vh;
    }

    .home-background {
        background-size: cover;
        background-repeat: no-repeat;
        background-position: inherit;
        opacity: 0.8;
        width: 100%;
        height: 100vh;
    }

    section.home {
        z-index: 2;
        position: absolute;
        /* height: 100vh; */
        padding: 0 75px;
        top: 25%;
    }

    section.home h1 {
        font-family: Playfair Display;
        font-size: 76px;
        font-weight: 500;
        line-height: 98.8px;
        text-align: left;
    }

    section.home h1 span {
        color: var(--primary);
        font-weight: 700;
    }

    section.home h1 span.year {
        font-family: Playfair Display;
        font-size: 76px;
        font-weight: 700;
        line-height: 98.8px;
        text-align: left;
    }

    ection.home h4 {
        font-family: Lato;
        font-size: 20px;
        font-weight: 700;
        line-height: 22.4px;
        letter-spacing: 0.15em;
        text-align: left;
    }

    section.home h5 {
        font-family: Lato;
        font-size: 16px;
        font-weight: 700;
        line-height: 22.4px;
        letter-spacing: 0.15em;
        text-align: left;
    }

    section.timeline .p-title {
        font-family: Lato;
        font-size: 22px;
        font-weight: 700;
        line-height: 22.4px;
        letter-spacing: 0.15em;
        text-align: center;
    }


    section.timeline .p-body {
        font-family: Lato;
        font-size: 22px;
        font-weight: 700;
        line-height: 22.4px;
        letter-spacing: 0.15em;
        text-align: center;
    }

    section.home h4 span {
        color: var(--primary);
    }

    section.home h5 span {
        color: var(--primary);
    }


    section.home button {
        color: white;
        background: transparent;
        border: var(--primary) solid 1.52px !important;

        font-family: Lato;
        font-size: 16px;
        font-weight: 400;
        line-height: 19.2px;
        letter-spacing: 0.15em;
    }

    section.home button.btn-login {
        width: 200px;
        height: 56px;
    }

    section.home button.btn-register {
        width: 285px;
        height: 56px;
    }

    section.home div.gap-text-to-button {
        height: 40px;
    }

    section.home div.gap-button {
        width: 30px;
    }

    section.home button:hover {
        background: var(--primary) !important;
        border: var(--primary) solid 1.52px !important;
    }
}