@import url(all.css);
@import url(color.css);
@import url(header.css);

/* -------------------- Landing -------------------- */

body{
    background-color: var(--color-black);
}

.main{
    position: absolute;
    width: 100%;
    height: 100vh;
    top: 0;
    background-image: url(../img/Help-background.jpg);
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
    z-index: -1;
}

@supports (-webkit-touch-callout : none) {
    .main {
        background-attachment: scroll
    }
}

@supports not (-webkit-touch-callout : none) {
    .main {
        background-attachment: fixed;
    }
}

/* Only this file */

div.help{
    position: relative;
    width: 100%;
    margin-top: 872px;
    height: auto;
    padding-bottom: 40px;
}

div.help > h2{
    color: var(--color-white);
    font-size: var(--subtitle-font);
    width: 80%;
    max-width: 1100px;
    margin: 30px auto;
    text-align: center;
}

div.help div.break::after {
    content: "";
    position: absolute;
    width: 50%;
    height: 2px;
    background-color: var(--color-white);
    left: 50%;
    transform: translate(-50%);
}

div.help div.break::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: calc(100% - 100px);
    width: 100%;
    height: 250px;
    background: linear-gradient(rgba(0, 0, 0, 0), black 80%);
    z-index: -1;
}

div.help > p{
    width: 80%;
    max-width: 1100px;
    margin: auto;
    margin-top: 60px;
    color: var(--color-white);
}


.question-image{
    width: 350px;
    margin-top: 20px;
}