.container {
    width: 50%;
    margin: 0 auto;
    font-family: calibri, sans-serif;
    text-overflow: ellipsis;
    word-wrap: break-word;
}

#header {

    text-align:center;
}

h4 {
    text-align:center;
    font-weight: normal;
}

#contenu0 {
    width: 25.5em;
    margin: 0 auto;
    border-style: solid;
    border-color: #46cce4;
    border-width: 3px;
    border-radius: 8px;
    padding: 0 10px 10px 10px ; 
    box-shadow: 3px 3px 10px -3px;
}

#url_images {
    width: 25.5em;
    margin: 0 auto;
    border-style: solid;
    border-color: #ff9d2c;
    border-width: 2px;
    border-radius: 8px;
    padding: 0 10px 8px 10px ; 
    box-shadow: 3px 3px 8px -3px;
}

.legend {
    text-align:center;
    color: #999999;
    font-style: italic;
}

form {
    display: block;
}

label#nom, #prenom, #adresse, #telephone, #portable, #email, #siteweb, #logo__url, #adress_url, #phone_url, #mobilephone_url, #email_url, #website_url {
    float: right;
}
#name, #firstname {
    width: 12em;
    margin-left: 5px;
}

#adress {
    width: 19em;
    margin-left: 5px;
}

#phone, #mobile {
    width: 10em;
    margin-left: 5px;
}

#mail {
    width: 16em;
    margin-left: 5px;
}

#website {
    width: 16em;
    margin-left: 5px;
}

#buttonform, #button_url {
    float: right;
    padding: 4px;
    font-family: calibri;
}

#button_show_urls {
    display: block;
    margin-bottom: 0.8em;
    margin-left: 45%;
    padding: 3px;
}

#p3 {
    margin-top: 3em;
    text-align: center;
}

#title4 {
    margin-top: 2.5em;
}

#a_copier {
    width: 400px;
    margin: auto;
    margin-bottom: 1em;
}

#copy {
    display: block;
    margin-bottom: 2em;
    margin-left: 40%;
    padding: 5px;
}

#to-copy {
    display: -webkit-box;
    width: 50%;
    min-width: 400px;
    min-height: 50px;
    margin-right: auto;
    margin-left: auto;
}

div.tuto {
    display: table;
    margin: 0 auto;
}

button.tuto {
    display: inline-block;
    margin-left: 3em;
    padding: 5px;
}


@media only screen and (max-width: 1024px) {
	.container {
        min-width: 400px;
        margin: 0;
        padding-left: 18%;
    }
    
    #to-copy {
        width: 400px;
    }
    
    #header {
        text-align: left ;
    }

    #title2 {
        margin-left : 1em;
    }
    
    h4 {
        text-align: left;
        margin-top: 1.5em;
    }
    
    #contenu0, #url_images {
        margin: 0;
    }

    #button_show_urls {
        margin-right: 0;
        margin-left: 12em;
    }

    #p3 {
        margin-top: 2em;
        margin-left : 0.6em;
        text-align: left;
    }
    
    #title4 {
        margin-top: 1.5em;
        margin-left : 0.6em;
    }

    #a_copier {
        margin-right: 0;
        margin-left: 1em;
        width: 100%;
        padding-left: 0;
    }

    #x_sig2 {
        line-height: 10px;
        font-size: 6px;
    }

    #copy {
        margin-right: 0;
        margin-left: 10em;
    }

    #to-copy {
        display: inline-block;
        min-width: 426px;
    }
    
    div.tuto {
        display: block;
    }
    #title5 {
        font-size: 1em;
        word-wrap: break-word;
        width: 440px;
    }

    button.tuto {
        margin-left: 5px;
    }
}