body {
	background-color: black;
	color: white;
    text-align: center;
    font-family: roboto;
}


input[type=text] {
    cursor: text;
    border: none;
    border-bottom: solid 2px white;
    color: yellow;
}





input, select {
    color: white;
    background-color: transparent;
    font-family: roboto;
    padding: 0.2em 0.2em;
    border-radius: 0px;
}




input, .select-wrapper  {
    margin: 0 0 0.7em 0;
    display: block;
}



input {
}

input[type="submit"] {
    color: white;
    border: solid 4px white;
}

input:focus, select:focus {
    outline: 0;
}

/*.select-wrapper { display:block; overflow-x:hidden; border:1px solid #ccc; border-radius:3px; padding:5px; cursor:pointer;}
.select-wrapper select { border:0; min-width:130%; cursor:pointer;}
.select-wrapper select { border:0; min-width:130%; cursor:pointer; color:#000; color:rgba(0,0,0,0); text-shadow:0 0 0 #000; -webkit-appearance:none; outline:none; white-space:nowrap;}
.select-wrapper:after { content:"\25BC"; display:block; position:relative; float:right; top:-25px; right:-5px; background-color:#fff; width:32px; text-align:center;}
.select-wrapper:after { content:"\25BC"; display:block; position:relative; float:right; top:-25px; right:-5px; background-color:#fff; width:32px; text-align:center; margin-bottom:-25px;}
*/

.select-wrapper { overflow-x:hidden; border: solid 2px white; border-radius: inherit; cursor:pointer; margin-top: 3em;}
.select-wrapper select { border:0; min-width:130%; cursor:pointer; white-space: nowrap;}
.select-wrapper select:hover, .select-wrapper select:focus {color: yellow;}
.select-wrapper:after { content:"\25BC"; display:block; position:relative; float:right; bottom:-15px; width:62px; text-align:center; margin-top:-2.5em;}


input, select{
	-moz-appearance: none; 
	-webkit-appearance: none; 
	appearance: none;
}


.bouton:hover {
/*    background-color: rgba(100,100,100,0.5);*/
	background-color: #FF0;
	color: black;
    cursor: pointer;
}

.retour {
    border: solid 4px white;
    padding: 0.2em 0.2em;
}


.bouton, .retour {

    margin-top: 3em;
}


a, a:active, a:focus, a:visited {
    color: white;
    text-decoration: none;
    outline: none;
}

a:hover, a:hover div {
    background-color: yellow;
    color: black;
}

div.img_jul a:hover {
	background-color: transparent;
}

p.erreur, div.reponse p {
    color: yellow;
    font-weight: 200;
}




div.reponse p span.resultat {
	font-weight: 400;
}
div.reponse p span.resultat.morceau {
	font-style: italic;
}

h2 {
    font-weight: 300;
    color: white;
    margin-bottom: 2em;
}



.img_jul img {
    max-width: 600px;
}
.img_jul img {
	width: 100%;
}

.img_jul, .retour, input, .select-wrapper  {
	width: 24%;
    margin-left: 38%;
}
input[type=text] {
    width: calc(24% - 0.3em);
}
h2, p.erreur, div.reponse p, input, select, .retour {
    font-size: 1.3em;
}


@media (max-width: 767px) {

	.img_jul, .retour, input, .select-wrapper  {
		width: 80%;
	    margin-left: 10%;
	}
	input[type=text] {
	    width: calc(80% - 0.3em);
	}
}