body{
    position: relative;
    margin: 0;
    font-family: 'PT Sans Narrow', sans-serif;
    color: #222;
}

#bg{
    position: absolute; 
    left: 0; 
    top: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    background: url('./img/header.png') top left no-repeat #fff;
    background-size: initial;
    text-align: center;
}
#bg_footer{
    background: url('./img/footer.png') bottom right no-repeat transparent;
    position: absolute;
    left: 0; right: 0; top: 0; bottom: 0;
}

#over{
    position: absolute; 
    top: 50%;
    transform: translateY(-50%);  
    margin: auto;
    text-align: center;
    width: 100%;
}

#center{ display: inline-block;

}

#coupe{ width: 100%; height: 120px; background: url("./img/coupe.png") center center no-repeat transparent; background-size: auto 100%;}

#logo img{ margin-bottom: 0; display: inline-block;}

h1{ font-size: 30px; margin: 0; font-weight: 600; text-transform: uppercase; color: #574636;}
#description{ max-width: 800px; text-align: justify; text-align-last: center; font-size: 16px; line-height: 28px; padding-bottom: 35px; text-transform: uppercase;} 

.pretty .state label::before{ border-color: #222;}
.pretty input:checked ~ .state.p-primary-o label::before, .pretty.p-toggle .state.p-primary-o label::before{ border-color: #222 !important;}
.pretty.p-default:not(.p-fill) input:checked ~ .state.p-primary-o label::after{ background-color: #222 !important;}

label{ max-width: 800px; font-size: 14px; font-weight: 600 !important; text-transform: uppercase; text-align: justify; line-height: 16px; padding-left: 25px; text-indent: 0 !important;}
label i{ font-weight: normal; text-transform: none;}

.pretty{ max-width: 800px; white-space: normal; margin-bottom: 10px; margin-right: 0; margin: 13px 0;}
.pretty .state label::after, .pretty .state label::before{ top: 50%; transform: translateY(-50%);}

.pretty.p-default.p-thick .state label::after{ top: 50%; transform: translateY(-50%) scale(.55) !important;}

input.text{ background: none; border: none; min-width: 450px; padding: 7px; text-align: center; color: #222; margin: 7px 0; border-radius: 5px; background: #f0f0f0;}


::placeholder { color: #222; opacity: 1;}

#submit{ background: #82cd00; cursor: pointer; border-radius: 3px; border: none; padding: 10px 20px; font-size: 15px; text-transform: uppercase; color: #fff; font-family: 'PT Sans Narrow', sans-serif;

         -webkit-transition: all .2s ease-in;
         -moz-transition: all .2s ease-in;
         -o-transition: all .2s ease-in;
         transition: all .2s ease-in;
}
#submit:hover{ background: #017404; color: #fff; padding: 10px 20px;}

#bottom{ position: absolute; bottom: 5px; left: 0; width: 100%; text-align: center;}
#bottom a{ font-size: 13px; font-style: italic; color: #222; text-decoration: none;}

#valid, #error{ color: #222; font-size: 16px; padding: 10px 15px; border-radius: 3px; }
#valid{ background: rgba(102, 210, 117, 0.75);}
#error{ background: rgba(210, 105, 102, 0.75);}
#valid strong, #error strong{ text-transform: uppercase;}

#mini_mention{ max-width: 800px; text-align: justify; text-align-last: center; font-style: italic; font-size: 12px; line-height: 18px; padding-bottom: 35px;} 
#mini_mention a{ color: #222;}

#teams{padding-top: 25px; padding-bottom: 15px;}
.team{ width: 183px; display: inline-block; padding-top: 140px;}

.team#zone_gauche{ background: url(./img/gauche.png) top center no-repeat transparent;}
.team#zone_droite{ background: url(./img/droite.png) top center no-repeat transparent;}

.team input.text{ min-width: 0; margin: 0;}
#versus{ background: url('./img/vs.png') center center no-repeat transparent; width: 54px; display: inline-block; padding: 0 25px; height: 175px;} 

input#gauche, input#droite{ background: #f0f0f0; border-radius: 5px; height: 30px; line-height: 30px; font-size: 15px; border: none;}

@media (max-width:1350px){
    #bg, #bg_footer{ background: #fff;}
}

@media (max-height:600px){
    #over {
        position: relative;
        top: auto;
        transform: none;
        margin: auto;
        text-align: center;
        width: 100%;
        padding: 25px 0;
    }
}
@media (max-width:600px){
    .pretty .state label{ font-size: 12px;} 
}

@media (max-width:500px){
    .team{ width: 100%;}
    #versus{ height: 100%;}

    input.text{ min-width: 50%; margin: 12px 0;}

    #teams{ padding-bottom: 30px;}
    .pretty{ max-width: 50%; margin: 12px 0;}


}