body{
    background-image: url('../images/background-client.jpg');
    background-repeat: repeat;
    background-size: auto;
}

@font-face {
    font-family: "KelsoSans-Bold";
    src: url("../fonts/KELSONSANSBG-BOLD.TTF");
  }

  @font-face {
    font-family: "KelsoSans-Normal";
    src: url("../fonts/KELSONSANS-NORMAL1.TTF");
  }


.welcome-ttl{
    margin-top: 6%;
    font-size: 63px;
    color: white;
    font-family: "KelsoSans-Bold";
}

.logo {
    width: 21%;
    height: auto;
}

.lines {
    height: 0.1px;
    width: 21%;
    border: 1px solid red;
    background-color: red;
}

.ttl {
    font-family: "KelsoSans-Normal";
    font-size: 17px;
}

.input-log {
    width: 21%;
    height: 5%;
    padding: 8px;

}

.input-sub {
    background-color: #ff1e17;
    color: white;
    border-color: #ff1e17;
    width: 21%;
    padding:7px;
    font-size: 25px;
    font-family: "KelsoSans-Bold";
}

@media only screen and (max-width: 700px) {
    body{
        background-image: url('../images/background-client.jpg');
        background-repeat: no-repeat;
        background-size: auto;
    }

    .welcome-ttl{
        margin-top: 6%;
        font-size: 43px;
        color: white;
        font-family: "KelsoSans-Bold";
    }
    
    .logo {
        width: 55%;
        height: auto;
    }
    
    .lines {
        height: 0.1px;
        width: 21%;
        border: 1px solid red;
        background-color: red;
    }
    
    .ttl {
        font-family: "KelsoSans-Normal";
        font-size: 17px;
    }
    
    .input-log {
        width: 61%;
        height: 5%;
        padding: 8px;
    
    }
    
    .input-sub {
        background-color: #ff1e17;
        color: white;
        border-color: #ff1e17;
        width: 61%;
        padding:7px;
        font-size: 25px;
        font-family: "KelsoSans-Bold";
    }

}