@font-face{
    font-family: 'TragicMarker';
    src: url(assets/fonts/TragicMarker.otf);
}
*{
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}
body, html{
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
}

hero{
    background: url(assets/LS-hero-bg-img300dpi.png);
    background-size: cover;
    display: block;
    height: fit-content;
    padding: 50px;
}

hero h1{
    line-height: 1.2;
    font-size: 5em;
    margin: 0;
}

.light{
    color: #fff;
}

.pink-text{
    color: #f0629c;
    font-weight: bold;
    font-size: 1.2em;
}

.cta-container{
    display: flex;
    align-items: baseline;
    justify-content: center;
}

.cta-container .cta{
    margin: 10px;
}

.cta-container p{
    text-align: right;
    margin: 5px 10px;
}

.table-container{
    display: flex;
}

.cta{
    color: #fff;
    padding: 15px 30px;
    font-size: 1em;
    font-weight: bold;
    text-transform: uppercase;
    border: 0;
    border-radius: 10px;
    box-shadow: 3px 3px 5px #00000069;
    display: block;
    width: 300px;
}

.pink-bg{
    background: #f0629c;
}

.blue-bg{
    background: #18c2e8;
}

.dark{
    background: #212322;
    color: #fff;
    padding: 30px;
}

div{
    padding: 0;
    margin: 0;
}

td.step{
    color: #18c2e8;
    width: 29%;
    font-weight: bold;
    font-size: 1.5em;
    text-align: right;
}
td{
    padding: 5px;
}

.logo-container{
    padding: 20px;
    display: flex;
}

.logo-container img{
    height: 80px;
    width: auto;
}

.footer{
    color: #000;
    background: #ffd600;
    padding: 30px;
    font-size: 0.6em;
    font-weight: bold;
}

.footer img{
    height: 25px;
    width: auto;
}

hr{
    margin: 10px;
    border: 0;
    border-bottom: 1px solid;
}

.footer-flex-row{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px;
    font-size: 0.6em;
}

.slogan{
    color: #fff;
    font-size: 2em;
    text-transform: uppercase;
    font-family: "TragicMarker";
}

.mySlides{
    width: 100%;
    justify-content: space-around;
    flex-wrap: wrap;
}

.w3-button{
    color: #fff;
    background: transparent;
    border: none;
    font-size: 2em;
}

.right-align{
    font-style: italic;
    font-size: 0.7em;
}

.slide{
    display: flex;
}

.slidemobile{
    display: none;
}

@media screen and (max-width: 900px) {
    .pink-bg{
        background: #f0629c;
        margin: 0 auto;
    }

    .slide{
        display: none;
    }
    .slidemobile{
        display: flex;
        justify-content: space-between;
    }
    hero{
        background: url(assets/hero-bg-img300dpi.png);
        background-size: cover;
        text-align: center;
        height: 70vh;
        padding: 30px;
    }

    hero h1{
        line-height: 1;
        font-size: 3em;
    }

    td.step{
        text-align: left;
    }

    .cta{
        width: fit-content;
    }

    .cta-container{
        display: block;
    }

    .cta-container .cta{
        margin: 10px auto;
    }

    .logo-container img{
        padding: 5px;
    }
    .table-container{
        flex-direction: column;
    }
    .footer{
        text-align: center;
    }
}