body {
    background-color: white;
    font-family: 'Mina', sans-serif;
    text-align: center;
    overflow-x: none;
}

body h1 {
    text-align: center;
}

@media screen and (min-width: 1000px) and (max-width: 4000px) {
    .background {
        background: url("../img/header.jpg") no-repeat;
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% auto;
        height: 400px;
        clip-path: polygon(0 0, 100% 0%, 100% 70%, 0% 100%);

    }

    .logo {

        font-family: 'Major Mono Display', monospace;
        color: white;
        font-size: 3rem;
        background-color: rgba(7, 7, 20, 0.5);
        padding: 100px;
        text-align: left;
        clip-path: polygon(0 0, 100% 0%, 100% 50%, 0% 100%);
    }

    #frame {
        background-color: none;
        width: 350px;
        height: 200px;
        margin: auto;
        border: 40px solid transparent;
        background-image: url();
    }

    .rendu {
        border: #1D2E36 solid 1px;
        background-image: url(../img/wall.webp);
        background-size: cover;
        padding-top: 50px;
        padding-left: 55px;
    }

    .footer-style {
        background: url("../img/header.jpg") no-repeat;
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% auto;
        height: 700px;
        clip-path: polygon(0 50%, 100% 30%, 100% 100%, 0% 100%);
        color: white;
        font-family: 'Major Mono Display', monospace;
        text-align: center;
        padding-top: 400px;
    }

    .transparent-footer {
        clip-path: polygon(0 50%, 100% 0%, 100% 100%, 0% 100%);
        background-color: rgba(7, 7, 20, 0.5);
        padding-top: 100px;

    }


    .footer-font {
        font-family: 'Mina', sans-serif;
    }

    /*_MODAL FOOTER_*/
    .modal-style {
        color: white;
        background-color: #1D2E36;
    }

    .title-modal-style {
        color: #1D2E36;
    }
}
.framecolorPurchase{
    width: 30px;
    height: 30px;
    margin-left: 170px;
    border-radius: 5px;
}
.backcolorPurchase{    
    width: 30px;
    height: 30px;
    margin-left: 170px;
    border-radius: 5px;
}
@media screen and (min-width: 0px) and (max-width: 1000px) {
    .footer-style {
        background: white;
        height: 200px;
    }

    .transparent-footer {
        clip-path: polygon(0 50%, 100% 0%, 100% 100%, 0% 100%);
        background-image: url('/assets/img/header.jpg');
        padding-top: 100px;
        color: white;

    }

    .background {
        background: white;
    }

    #frame {
        background-color: none;
        width: 50vw;
        height: 30vh;
        margin: auto;
        border: 3rem solid transparent;
        background-image: url();
    }

    .rendu {
        border: #1D2E36 solid 1px;
        background-image: url(../img/wall.webp);
        background-size: cover;
        padding-top: 50px;
        padding-left: 55px;
        height: 500px;
    }

    .logo {

        font-family: 'Major Mono Display', monospace;
        color: white;
        font-size: 3rem;
        background: url("../img/header.jpg") no-repeat;
        padding: 100px;
        text-align: left;
        clip-path: polygon(0 0, 100% 0%, 100% 50%, 0% 100%);
    }
}



.navbar {
    transform: rotate(-5deg);
    -moz-transform: rotate(-5deg);
    -webkit-transform: rotate(-5deg);
    -khtml-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    margin-bottom: 100px;

}

.navbar a {
    color: black;
    font-family: 'Major Mono Display', monospace;
}

.navbar a:hover {
    border: 1px solid black;
}

.pub {
    clip-path: polygon(11% 14%, 98% 13%, 89% 73%, 22% 85%);
    background-color: #1D2E36;
    border: 80px solid #1D2E36;
    color: white;
    text-align: center;
    padding: 30px;
}



/*_FORMULAIRE_*/


.img-style {
    clip-path: polygon(20% 27%, 87% 4%, 100% 93%, 7% 84%);
}

.choix {
    border: #1D2E36 solid 1px;
    background-color: #1D2E36;
    color: white;
    text-align: left !important;
}

.title-form {
    font-size: 18pt;
    margin: 10px;
    text-align: center;
}

.item-form {
    font-size: 12pt;
    text-align: left !important;
}

/*_COLORS_*/
.fa1 {
    color: black;
}

.fa2 {
    color: burlywood;
}

.fa3 {
    color: skyblue;
}

.fa4 {
    color: slategrey;
}

.fa5 {
    color: silver;
}

.fa6 {
    color: lightpink;
}

.fa7 {
    color: violet;
}

.fa8 {
    color: seagreen;
}

.fa9 {
    color: teal;
}

.fa10 {
    color: gold;
}

.fa11 {
    color: honeydew;
}

.fa12 {
    color: sienna;
}
/*_STYLE DIVERS_*/
.btn-style-1 {
    background-color: #1D2E36;
    color: white;
    border-radius: 5px;
    border: 1px solid #1D2E36;
    margin-bottom: 5px;
}
.align-font{
    text-align: center;
    background-color: #1D2E36;
    color: white;
    clip-path: polygon(17% 0, 92% 18%, 94% 91%, 0% 100%);
    border: 50px solid #1D2E36;
}
.btn-style-2 {
    color: #1D2E36;
}

.btn-style-3 {
    background-color: white;
    color: #1D2E36;
    border-radius: 1px;
    margin-left: 35%;
    margin-top: 3%;
    margin-bottom: 3%;
}

.btn-style-3:hover {
    background-color: #1D2E36;
    color: white;
    border-radius: 1px;
    border: 1px solid white;
    transition: 2s;
}

.input-size {
    width: 60px;
    height: 25px;
}

input[type="radio"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    border-radius: none;
    width: 7px;
    height: 7px;
    margin-bottom: 7px;

    border: 1px solid rgb(134, 148, 156);
    transition: 0.1s all linear;
    margin-right: 5px;

    position: relative;
    top: 4px;
}

input[type="radio"]:hover {
    border-radius: none;
    width: 15px;
    height: 15px;

}

input[type="radio"]:checked {
    border: 4px solid white;
}

input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    border-radius: none;
    width: 15px;
    height: 15px;

    border: 1px solid rgb(134, 148, 156);
    transition: 0.1s all linear;
    margin-right: 5px;

    position: relative;
    top: 4px;
}

input[type="checkbox"]:checked {
    border: 8px solid white;
}


.btn-modal {
    margin: 10px;
    text-align: center;
}

.name-flower {
    font-size: 10pt;
}

#table-ajax td,
#table-ajax tr {
    border: 1px solid #1D2E36;
    width: 100px;
    text-align: center;

}

#table-ajax {
    height: 100%;
    width: 100%;
}

option {
    border: none;
}

.img-ajax {
    background-image: url("/assets/img/orchidee.jpg");
    height: 150px;
    width: 150px;

}

.rendu-background {
    padding: 75px;
    border: #1D2E36 solid 1px;
    background-image: url(../img/wall.webp);
    background-size: cover;
    height: 500px;
}

.inputSize {
    width : 40%;
    height : 25px;
    background-color: transparent;
    border-top: none;
    border-right: none;
    border-color: #1D2E36;
}
.inputSizeMessage {
    width : 50%;
    height : 100px;
    background-color: transparent;
    border-top: none;
    border-right: none;
    border-color: #1D2E36;
}
.item{
    margin-top: 40px;
    margin-bottom: 10px

}
.container-fluid h3{
    font-family : 'Major Mono Display', monospace;

}

.btn-style-4 {
    background-color : #1D2E36;
    color : white;
    float: right;
    margin-right: 10%;
}

.form-inscription{
    text-align: center;;
}

.container .title{
    font-family: 'Major Mono Display', monospace;
}
.error-form{
    color: red;
}
.form-inscription label b{
    text-align: left;
}
.inputSizeSmall {
    width : 40%;
    height : 20px;
    background-color: transparent;
    border-top: none;
    border-right: none;
    border-color: #1D2E36;
}
.input-comment{
    width: 60%;
    background-color: #1D2E36;
    color: white;
    border-bottom: 2px solid white;
    border-left:none;
    border-top: none;
    border-right:  2px solid white;
    float: right;
}
#test input:checked ~ .noemie {
    background-color: #1D2E36;
    translate: 1s;
}
.presentation-style{
    background-color: #1D2E36;
    color: white;
    clip-path: polygon(1% 10%, 100% 0, 92% 84%, 16% 90%);
    border: 100px solid #1D2E36;
}

.btn-style-5{
    background-color: white;
    color: #1D2E36;
    clip-path: polygon(0 34%, 93% 24%, 100% 65%, 14% 74%);
    border: 40px solid white;
    margin-bottom: 100px;
}
.btn-style-5:hover{
    background-color: #1D2E36;
    color: white;
    clip-path: polygon(0 34%, 93% 24%, 100% 65%, 14% 74%);
    border: 40px solid #1D2E36;
    transition: 2s;
}
.font-title{
    font-family: 'Major Mono Display', monospace;
    text-align: left;
}
#noflower:checked {
    border: 6px solid #1D2E36;
}