
.home {
    /* width: 70%;
    height: 60vh;
    background-size: cover;
    font-size: 2.5rem;
    display: flex;
    align-items: center;

    --top-bottom: linear-gradient(to bottom, var(--trans-black), var(--trans) 20%, var(--trans) 80%, var(--trans-black));

    --left: linear-gradient(to right, var(--trans), var(--trans-blue) 60%, var(--black)), var(--top-bottom);
    --right: linear-gradient(to left, var(--trans), var(--trans-blue) 60%, var(--black)), var(--top-bottom); */
    /* margin: 50px 0; */
    /* padding: 50px; */
    padding: 50px;
    width: 720px;
    margin: auto;
    font-size: 1rem;
}

header {
    padding: 40px 15% 170px 15%;
    /* margin-bottom: 50px; */
    font-size: 3rem;
    background: rgba(0, 0, 0, 0.6);
}

header h1 {
  margin-bottom: 0;
}

header p {
  font-size: 2rem;
}

header .disclaimer {
    font-size: 0.5rem;
}

.london {
    background-image: url("/img/ducks_in_london.jpg");

    background-position: center;
    background-size: cover;
    /* opacity: 0.2; */
}


.left {
    text-align: left;
    justify-content: flex-end;
    border-right: 2px solid;
}

.right {
    text-align: right;
    margin-left: auto;
    border-left: 2px solid;
}

.point {
    width: 50%;
    padding: 0 4px;
    border-top: 2px solid;
}

.point > div {
    padding: 5px 15px;
}

.cta {
    font-size: 2rem;
    text-align: center;
}

.cta img {
    width: 200px;
}

.dux {
    padding: 10px;
    text-align: center;
}

.dux > div {
    padding: 20px;
}

.dux img {
    width: 500px;
}

/* -------------------MEDIA QUERIES---------------------- */

@media only screen and (max-width: 930px) {
    .home {
        font-size: 0.5rem;
        width: 80%;
    }

    .point {
        font-size: 1rem;
        /* text-align: center; */
        width: 70%;
    }

    header {
        padding: 40px 10%;
    }
    
    header h1 {
        font-size: 2.5rem;
    }

    header p {
        font-size: 1.2rem;
    }

    .dux h2 {
        font-size: 1.5rem;
    }

    .dux img {
        width: 90%;
    }
}
