#content {
    margin-left:348px;
    padding-bottom:47px;
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
}
.frame #content{
    top:0;
    padding:0 20px 20px;
    margin-left:0;
    padding-bottom:0;
    border:1px solid transparent;}

h1 , .h1 {    
    font-size:3.8em;
    padding:10px 0;
    font-family: "Dosis";
    font-weight:100;
    -webkit-font-smoothing:antialiased;
    line-height:40px;
}

h2 , .h2 {    
    font-family: "Dosis";
    font-size: 2.3em;
    font-weight: 100;
    -webkit-font-smoothing: antialiased;
    line-height:27px;
}

h3 , .h3 {
    font-family: "Dosis";
    font-size: 1.5em;
    font-weight: 100;
    -webkit-font-smoothing: antialiased;
}

ul.list {
    margin-top:10px;
    margin-bottom:10px;
}

ul.list li {
    list-style:disc;
    list-style-position:inside;
}

.dosis {
    font-family: "Dosis";
    -webkit-font-smoothing: antialiased;
}

.trans {
    transition: all 0.2s ease;
}

.trans:hover {
    transition: all 0.2s ease;
}

#content .arrowmore {
    text-shadow:0px 0px 10px black;
    position:fixed;
    bottom:-42px;
    left:50%;
    margin-left:142px;
}

.bck{display:inline-block;margin:5px 0;padding:5px 0;}
.bck-error{color:red;}
.bck-success{color:green;}

/* **************************************************************************************************** */
/* FORMULAIRES
/* **************************************************************************************************** */

form.form {
}

form.form ul li {
    padding-top:10px;
}
form.form label {
    display:inline-block;
    width:150px;
}

form.form input[type=text] , form.form input[type=password] , form.form textarea  {
    display:inline-block;
    padding:3px 2%;
    width:200px;
    border:1px solid #CFCFCF;
    background:white;
    box-shadow: inset 1px 1px 2px rgba(200, 200, 200, 0.2);
}

form.form textarea {
    width:95%;
    min-height:100px;
}

form.form input[type=text]:focus , form.form input[type=password]:focus , form.form textarea:focus  ,
form.form input[type=text]:hover , form.form input[type=password]:hover , form.form textarea:hover
{
    outline:none;
    box-shadow:0px 0px 4px #CFCFCF;
}

form.form select {
    box-shadow: inset 1px 1px 2px rgba(200, 200, 200, 0.2);
    border:1px solid #CFCFCF;
    background:white;
    padding:3px 2%;
}

form.form input[type=text].error , form.form select.error , form.form textarea.error , form.form input[type=password].error {
    border:1px solid red;
}

form.form input[type=submit] {
    border:none;
    width:200px;
    margin:20px auto;
}

form.form ul li.short {
    float:left;
    width:50%;
}

form.form ul li.short input[type=text] , form.form ul li.short input[type=password] , form.form ul li.short textarea  {
    padding:3px 4%;
    width:90%;
}

form.form ul li.long {
    width:100%;
    clear:both;
}

form.form ul li.long input[type=text] , form.form ul li.long input[type=password] , form.form ul li.long textarea  {
    padding:3px 2%;
    width:95%;
}

form.form .short select {
    width:98%;
}

.bcolor , form.form input[type=submit] {
    padding:7px 20px;
    background:#292929;
    color:white;
    display:block;
    cursor:pointer;
}

.bcolor:hover , form.form input[type=submit]:hover {
    background:black;
    text-decoration: none;
}

/* **************************************************************************************************** */
/* PAGINTATION
/* **************************************************************************************************** */

.pagination {
    float:right;
    margin-top:20px;
}

.pagination-item {
    display:block;
    padding:4px 7px;
    background:#DBDBDB;
    color:white;
    float:left;
    margin-right:3px;
    border-radius:15px;
}

.pagination-item.current , .pagination-item:hover {
    cursor:pointer;
    background:#706F6F;
}

/* **************************************************************************************************** */
/* INFOS BULLE
/* **************************************************************************************************** */

.bulle {
    background: rgba( 199 , 0 , 106 , 0.1 );
    border-bottom: 2px solid red;
    padding:10px;
    margin:auto;
    margin-bottom: 7px;
    margin-top: 3px;
    overflow:hidden;
}
.bulle.message {
    background: #a6f8b7;
    border: 1px solid #49f160;
    padding:10px;
    margin-top: 10px;
}
.bulle.errors {
    background: #f36767;
    border: 1px solid #f14343;
    padding:10px;
    margin-top: 10px;
    color:white;
}

@media screen and (max-width: 1280px) {
    #content{margin-left:300px;}
}

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

    #content {
        margin:0;
        clear:both;
        padding-bottom: 0;
        top:50px;
    }

    #content .arrowmore {
        text-shadow:0px 0px 10px black;
        position:fixed;
        bottom:0px;
        left:50%;
        margin-left:-20px;
        display:none;
    }

    h1 , .h1 {
        font-size:2.5em;
        line-height: normal;
    }

    h2 , .h2 {
        font-size:2em;
        line-height: normal;
    }

    form.form input[type=text] , form.form input[type=password] , form.form textarea  {
        display:block;
        width:95%;
    }

     form.form input.hour {display:inline-block;}

    form.form ul li.short  {
        width:100%;
    }

    form.form ul li.short input[type=text] , form.form ul li.short input[type=password] , form.form ul li.short textarea  {
        display:block;
        width:95%;
        padding:3px 2%;
    }

    form.form select {
        display:block;
        width:96%;
    }

}

@media screen and (max-width:1500px) {
    #content{margin-left:300px;}
    h1,.h1{font-size:2em;}
    h2,.h2{font-size:1.8em;}
}

@media screen and (max-width:1000px){
    #content{margin-left:0;}
}


@media screen and (max-width:1400px) { 
    h1,.h1{font-size:1.8em;}
    h2,.h2{font-size:1.6em;}

}

@media screen and (max-width: 1280px){
    h1, .h1{font-size:1.6em;}
    h2,.h2{font-size:1.4em;}
}
@media screen and (max-width:400px) {
    h1,.h1{font-size:1.4em;}
}