/*
	 CSS-Tricks Example
	 by Chris Coyier
	 http://css-tricks.com
*/

*					{ margin: 0; padding: 0; }
body				{ font: 14px; font-family: 'Roboto', sans-serif; }

#page-wrap		    { max-width: 980px; margin: 0 auto; padding: 0 20px; }

#logo { width: 300px; height: 80px; background-image: url(https://technologia.fr/mailing/2022_newsletter/colloque/img/logo.png); background-size: contain; background-repeat: no-repeat; margin-left: auto; margin-right: auto; margin-top: 40px; margin-bottom: 40px;}

#colA {width: 50%; height: auto; float: left; color: #2d3988;}

#colB {width: 50%; height: auto; float: left;}

#zoneq1 {width: 50%; height: auto; float: left;}

#zoneq {width: 50%; height: auto; float: left;}

#intro {margin-top: 6%; padding: 10px;}

#footer {width: 100%; height: auto; margin-top: 80px; float: left;}

#infos {width: 100%; height: auto; background-color: #242424; text-align: center; color: #FFFFFF; font-size: 11px; padding: 0 0 20px 0}

#logo_footer {width: 200px; height: auto; margin-left: auto; margin-right: auto; margin-bottom: 20px;}

#logo_footer img {margin-left: auto; margin-right: auto;}

a {text-decoration: none; color: #803585 !important;}

h1                  { margin: 25px 0; font-size: 32px; line-height: 38px; text-align: center; letter-spacing: 1px; text-transform: uppercase; }

h2                  { font-size: 20px; line-height: 20px; text-align: center; letter-spacing: 1px; }

#questionnaire h2 {text-align: center; font-size: 20px; margin-bottom: 20px; font-weight: 300; }

hr {margin-bottom: 20px;}

.bleu { color: #803585;}
.bleuc { color: #0091d3;}
.orange { color: #ed6e2a;}

#questionnaire input {
    vertical-align: middle;
	margin: 0 5px 0 0;
}

#btn {
	margin: 60px 0 60px 0;
	text-align: center;
}

#btn input { width: 200px; height: 40px; background-color: #803585; color: #FFFFFF;font-size: 18px; margin-left: auto; margin-right: 20px; margin-bottom: 5px;  border-radius: 4px; border: 1px solid #803585;}

#btn input:hover {
  background-color: #803585;
}


#questionnaire #colA, #questionnaire #colB {text-align: center; margin: 0 0 20px 0;}

#colA input, #colB input, #colB select {
border: 1px solid #afafaf;
border-radius: 5px;
font-size: 14px;
text-align: center;
color: #717072;
padding: 10px 10px;
margin: 10px 0;
width: 96%;
box-sizing: border-box;
}

#space {padding:15px 0;}

#mention, .mention {font-size: 12px; line-height: 12px; }

#ligne_a, #ligne_b {margin: 5px 0; padding: 10px;}

#ligne_a { background-color: #803585; }

#questionnaire ol {
   margin: 0 0 10px 20px;
}

#questionnaire ol li {
   margin: 0 0 20px 0;
}

#questionnaire ol li div {
   padding: 4px 0;
}

#questionnaire h3 {
   font-size: 17px; margin: 0 0 1px 0; color: #666;
}

#intro_resultat {padding: 10px 10px 10px 0px;}

#results {font-size: 18px;}

#results p, #results_reponse p, {font-size: 14px !important; }

#results_reponse #intro_resultat {font-size: 24px !important; }

#txt_resultat {font-size: 16px !important; }

#results_reponse {text-align: center;}

#cadre_a { width: 80%;
    height: auto;
    background-color: #fef8f4;
    margin-left: auto;
    margin-right: 20px;
    margin-top: 30px;
    margin-bottom: 20px;
    border-radius: 40px 0%;
    border: 1px solid #ed6e2a;
    padding: 10px 20px 20px 20px;
    font-size: 14px;
	color:#2d3988;
}

h3 {margin: 0 0 10px 50px;}

#cadre_b { width: 80%;
    height: auto;
    background-color: #f2f9fd;
    margin-left: auto;
    margin-right: 20px;
    margin-top: 30px;
    margin-bottom: 20px;
    border-radius: 40px 0%;
    border: 1px solid #0091d3;
    padding: 10px 20px 20px 20px;
    font-size: 14px;
	color:#2d3988;
}

#cadre_c { width: 96%;
    height: auto;
    background-color: #f2f9fd;
    margin-left: auto;
    margin-right: 20px;
    margin-top: 30px;
    margin-bottom: 20px;
    border-radius: 40px 0%;
    border: 1px solid #0091d3;
    padding: 20px 20px 20px 20px;
    font-size: 14px;
	color:#2d3988;
}

#retour{ width: 100%; float: left; text-align: center;margin: 60px 0 0 0;}

#btn_accueil {
	width: 260px;
	height: 25px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	font-size: 16px;
	padding: 10px;
	background-color: #2d3988;
	border-radius: 10px 0%;
    border: 1px solid #2d3988;
	color:#FFFFFF;
}

#btn_accueil:hover {
  background-color: #ed6e2a;
}

@media screen and (max-width: 800px)
{
    #colA {width: 100%; height: auto; float: left; color: #2d3988;}

    #colB {width: 100%; height: auto; float: left;}
    
    #questionnaire #colA {text-align: center; margin: 0 0 0 0;}

    #questionnaire #colB {text-align: center; margin: 0 0 20px 0;}

}