html {
    background-image: url("Images/fond-site.png");
    background-attachment: fixed;
    background-repeat: repeat;
    background-size: 100%;
    top: 0;
    background-color: black;
    width: 100%;
    position: fixed;
}

header {
    background-color: black;
    width: 100%;
}

#BREAKOUT {
    width: 30%;
    margin-left: 35%;
}

.imgbtn {
    padding-top: 2%;
    width: 100%;
    border-radius: 10px;
}

#index-nav {
    text-align: center;
    left:0;
    right:0;
}

.img-div {
    width: 100%;
    border-radius: 10px;
    padding-top: 4%;
    margin-right: 5%;
}

.img-small {
    padding-top: 1%;
    padding-right: 5%;
    width: 2%;
}

.img-brique {
    width: 4%;
    padding-right: 5%;
    padding-top: 2%;
}

#content-briques {
    position: absolute;
    width: 100%;
}

#content-bonus {
    position: absolute;
    width: 100%;
    visibility: hidden;
}
#content-malus {
    position: absolute;
    width: 100%;
    visibility: hidden;
}

#content-deplacements {
    margin-right: 0;
    width: 100%;
    visibility: hidden;
}

#index-briques {
    box-shadow: 0px 0px 20px #57ADFF;
    margin-right: 4%;
}

#index-bonus {
    margin-right: 4%;
}

#index-malus {
    margin-right: 4%;
}

#index-deplacements {
    width: 25%;
}

.div-index {
    width : 15%;
    display: inline-block;
    border-radius: 10px;
}

body {
    left:0;
    right:0;
    margin: 0;
    font-family: copperplate, avenir;
}

nav {
    margin: 31px auto 31px auto;
    width: 100%;
    text-align: center;
    }
.bouton{
    display:inline-block;
    width:12%;
    margin-right: 3%;
    margin-left :3%;
    border-radius: 10px;
}

.bouton:hover {
    box-shadow: 0px 0px 15px grey;
}

main {
    height: auto;
    width: 75%;
    margin: 0 auto;
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 30px;
    box-shadow: 0px 0px 20px grey;
}

    #Content {
        width: 95%;
        margin: 0 auto;
        padding: 20px;
    }

        .container {
            /*background-color: rgba(240,240,240,0.7);*/
            border-radius: 4px;
            height: 50px;
            width: 100%;
            /*border: 3px solid black;*/
            margin: 0.5% 0% 0.5% 0%;
            background-color: blue;
            position: relative;
        }


        .container p{
            color: white;
        }

            .bonusbawx {
                background-color: rgba(255,255,255,0.7);
                height: 70%;
                width: 4.2%;
                border-radius: 10px;
                border: 2px solid;
                margin: 7px;
            }

                .bonus {
                    width: 60%;
                    height: 60%;
                    margin-left: 25%;
                    margin-top: 25%;
                }

            .bonustxt {


            }

            .quantity {
                margin: 3.2% 5% 0 0;
                position: absolute;
                right: 50px;
            }

            .buybutton {
                margin: 3.2% 5% 0 0;
                position: absolute;
                right: 0;
            }


            .bonusbawx,.bonustxt,.quantity,.buybutton {
                display: inline-block;
                float: left;
            }


        .contact {display: inline-block}

h1,p,ul {
    color: white;
}

a {
    color: darkcyan;
    text-decoration: none;
    font-size: 1.3em;
}

/*CSS DU FORMULAIRE DE CONTACT*/


#registration {
    color: #fff;
    background: #2d2d2d;
    background: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, rgb(60,60,60)),
        color-stop(0.74, rgb(43,43,43)),
        color-stop(1, rgb(60,60,60))
    );
    background: -moz-linear-gradient(
        center bottom,
        rgb(60,60,60) 0%,
        rgb(43,43,43) 74%,
        rgb(60,60,60) 100%
    );
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    margin: 0 auto;
    width: 430px;

}



#registration fieldset {
    padding: 20px;

}

textarea,input.text {
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    border:solid 1px #444;
    font-size: 14px;
    width: 90%;
    padding: 7px 8px 7px 8px;
    -moz-box-shadow: 0px 1px 0px #777;
    -webkit-box-shadow: 0px 1px 0px #777;
    background: #ddd url('img/inputSprite.png') no-repeat 4px 5px;
    background: url('img/inputSprite.png') no-repeat 4px 5px, -moz-linear-gradient(
        center bottom,
        rgb(225,225,225) 0%,
        rgb(215,215,215) 54%,
        rgb(173,173,173) 100%
    );
    background:  url('img/inputSprite.png') no-repeat 4px 5px, -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, rgb(225,225,225)),
        color-stop(0.54, rgb(215,215,215)),
        color-stop(1, rgb(173,173,173))
    );
    color:#333;
}

input#email {
    background-position: 4px 5px;
    background-position: 4px 5px, 0px 0px;
}

input#name {
    background-position: 4px -46px;
    background-position: 4px -46px, 0px 0px;
}

input {
    padding-left: 4px;
    border-radius: 10px;
    color: #333;
    background: url('img/inputSprite.png') no-repeat 4px 5px, -moz-linear-gradient(
    center bottom,
    rgb(225,225,225) 0%,
    rgb(215,215,215) 54%,
    rgb(173,173,173) 100%
);
}

#registration p {
    position: relative;
}

fieldset label.infield /* .infield label added by JS */ {
    color: #333;
    text-shadow: 0px 1px 0px #fff;
    position: absolute;
    text-align: left;
    top: 3px !important;
    left: 35px !important;
    line-height: 29px;
}

#registerNew {
    width: 203px;
    height: 40px;
    border: none;
    text-indent: -9999px;
    background: url('img/createAccountButton.png') no-repeat;
    cursor: pointer;
    float: right;
}

#registerNew:hover { background-position: 0px -41px; }
#registerNew:active { background-position: 0px -82px; }

textarea {
    height: 100px;
    resize: none;
}