.bg {
    background: #ffffff url(../img/bg.jpg) center center no-repeat fixed;
    background-size: cover;
}

img {
    width: 100%;
}

.logobox {
    display: flex;
    flex-direction: column;
    padding: 1% 34% 10% 34%;
    margin: auto;
}

@media (min-width: 450px) {
    .logobox {
        padding: 1% 40% 2% 40%;
    }
}

.logo {
    flex: 1;
    flex-basis: 20%;
    margin-bottom: 9%;
}

.butbox {
    padding: 0 0%;
}

@media (min-width: 450px) {
    .butbox {
        display: flex;
        padding: 0 20%;
        justify-content: space-between;
    }
}

.but {
    flex-direction: column;
    margin-bottom: 20%;
}

@media (min-width: 450px) {
    .but {
        display: flex;
        flex: 1;
        justify-content: space-between;
        margin: auto;
    }
}

.contbox {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding-top: 4%;
    padding-bottom: 4%;
}

.butimg {
    padding: 0 30% 5% 30%;
}

@media (min-width: 450px) {
    .butimg {
        padding: 0 30% 5% 30%;
    }
}

.buttxt {
    font-family: verdana, serif;
    font-weight: bold;
    font-size: 100%;
    color: #3f3f3f;
    text-align: center;
    text-decoration: none;
}

@media (min-width: 450px) {
    .buttxt {
        font-size: 120%;
    }
}

@media all and (min-width: 25em) {
    .buttxt {
        font-size: calc(0.7000rem + 1.1999vw);
    }
}

@media all and (min-width: 50em) {
    .buttxt {
        font-size: 1.29rem;
    }
}

.conttxt {
    font-family: verdana, serif;
    font-size: 100%;
    color: #3f3f3f;
    text-align: center;
    margin: auto;
    text-decoration: none;
}

@media (min-width: 450px) {
    .conttxt {
        font-size: 140%;
    }
}

@media all and (min-width: 25em) {
    .conttxt {
        font-size: calc(0.7000rem + 1.1999vw);
    }
}

@media all and (min-width: 50em) {
    .conttxt {
        font-size: 1.29rem;
    }
}