@font-face {
    font-family: 'Ubuntu-medium';
    src: url('../fonts/ubuntu-medium-webfont.woff2') format('woff2');
}

@font-face {
    font-family: 'Ubuntu-light';
    src: url('../fonts/ubuntu-light-webfont.woff2') format('woff2');
}

html,body{
    height: 100%;
    padding: 0;
    margin: 0;
}

body{
    /*background: #00b4a5;*/
    background-color: #ff9900;
    font-family: Ubuntu-light;
    color: #ffffff;
    position: relative;
}

h1{
    font-size: 48px;
    margin-bottom: 20px;
}

h4{
    margin-top: 0;
}

.warp-left{
    position: absolute;
    display: block;
    width: 50%;
    height: 100%;
    left: 0;
    background-color: #FF9900;
    background-image: url("/assets/images/piazza.jpg");
    background-position: center;
    background-size: cover;
}

.warp-left .container{
    display: flow-root;
    position: absolute;
    width: 100%;
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.warp-left .logo{
    width: 100%;
    max-width: 400px;
}

.text_logo {
    text-shadow: 1px 1px 4px rgb(0 0 0 / 50%);
    width: 100%;
    color:#fff;
    background: rgba(0, 0, 0, 0.5); 
    display: flow-root;
}

.warp-right{
    background-color: #FF9900;
    position: absolute;
    display: block;
    width: 50%;
    height: 100vh;
    right: 0;
}

.warp-right .container{
    position: absolute;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

input.w-100.btn.btn-lg.btn-primary, a.w-30.btn.btn-primary, input.btn.btn-lg.btn-primary {
    --bs-btn-bg: #58b74f;
    --bs-btn-border-color: #fff;
}

a.link {
    color: #58b74f;
}

a.link:hover {
    color: #fff;
}

label.label {
    color: #888;
}
/***********************************/

@media screen and (max-width: 768px) {



    .warp-left{
        position: inherit;
        width: auto;
        height: auto;
    }

    .warp-left .container{
        position: inherit;
        width: auto;
        text-align: center;
        transform: translate(0);
        top:0;left:0;
        padding: 80px 0;
    }

    .warp-right{
        position: inherit;
        width: 100%;
        height: auto;
        display: inline-block;
        height: 100vh;
    }

    .warp-right .container{
        position: inherit;
        transform: translate(0);
        top:30px;left:0;
    }

   
}