@font-face {font-family: "Questrial";src: url('look/questrial.ttf');}

body {
	margin:0;
	padding:0;
	font-family: Arial, sans-serif;
	background-color:#ffffff;
	color:#50555c;
}



@media (min-width: 1050px){
  :root, input {
    font-size: 1em;
  }
  h1 {
  	font-size:3.5em;
  }
}
@media (min-width: 600px) and (max-width: 1050px){
  :root, input {
    font-size: 2vw;
  }
  h1 {
  	font-size:2.5em;
  }
}

@media (max-width: 600px){
  :root, input {
    font-size: 14px;
  }
  h1 {
  	font-size:2em;
  }
}




img {
	max-width:100%;
}


a {
	color:#0a2b5a;
	text-decoration:none;
}

a:hover {
	color:#000000;
}	

.logo {
	max-width:10vw;
	float:left;
	margin-right:10px;
	max-height:12vh;
}

.bandeauhaut {
	background-color:#7bd099;
	padding:1vh 2vw;
	display:flex;
	justify-content:center;
	align-items:center;
	max-height:14vh;
	min-height:12vh;
}

.bandeauhaut .titre {
	max-width:32vw;
	text-align:center;
	margin-right:5vw;
	margin-left:5vw;
}


.bandeaupub {
	max-width:16vw;
	max-height:11vh;
}

h1, h2, h3, h4, h5 {
	font-family:Questrial;
}

h1 {
	color:#01478c;
	font-weight:bolder;
	font-size:3vh;
}

h1 a {
	color:#01478c;
	text-decoration:none;
}

h1 a:hover {
	color:#01478c;
}

.pubdroite {
	text-align:right;
}

.page {
	display:flex;
	justify-content:space-around;
	position:relative;
	left:12px;
}

.content {
	width:80%;
	padding:12px;
	box-sizing:border-box;
	min-height:80vh;
}


.ariane {
	text-align:left;
	font-size:0.8em;
}


.chat {
	width:100%;
	box-sizing:border-box;
	border:1px solid #9d9d9d;
}

@media (max-width: 600px) or (orientation: portrait) {

	.page {
		display:block;
		justify-content:space-around;
	}
	.content {
		width:100%;
		min-height:1vh;
	}


}

.chatbas {
		border:1px solid #9d9d9d;
		width:95%;
		margin-left:auto;
		margin-right:auto;

}

.espace {
	clear:both;
	height:3em;
}

.fullscreen {
	min-width:90vw;
	max-width:100vw;
	padding-top:12px;
	box-sizing:border-box;
	text-align:center;
	min-height:80vh;
}
h2 {
	color:#01478c;
	text-align:center;
}

.orga h3, .badge h3, .badge h4, .sujet h4 {
	color:#01478c;
}
/*
.divdirect {
	padding-top:56.25%;
	padding-bottom:0;
	position:relative;
	border:1px solid blue;
	text-align:center;
}*/

.divdirect {
	position:relative;
}
.framedirect {
	border:1px solid black;
}

@media (min-width: 1500px){

	.framedirect {
		width:60vw; 
		height:33vw;
		margin-left:18vw;
	}

	.frameyoutube {
		width:60vw; 
		height:33vw;
	}
	.divdirect {
		padding-top:33vw;
	}
}


@media (min-width: 1000px) and (max-width: 1500px){

	.framedirect {
		width:75vw; 
		height:40vw;
		margin-left:10vw;
	}
	.frameyoutube {
		width:75vw; 
		height:40vw;
	}
	.divdirect {
		padding-top:42vw;
	}
}

@media (max-width: 1000px){

	.framedirect {
		width:90vw; 
		height:50vw;
		margin-left:2vw;
	}
	.frameyoutube {
		width:90vw; 
		height:50vw;
	}
	.divdirect {
		padding-top:42vw;
	}
}

.chat p {
	margin-top:0;
	margin-bottom:0;
	padding-top:2vh;
	padding-bottom:0;
	text-align:center;
}

.colonne {
	display:flex;
	justify-content:space-around;
	align-items:center;
}

.sponsors, .participants {
	text-align:center;
	padding:6px;
	border-top:1px solid #9d9d9d;
	border-bottom:1px solid #9d9d9d;
}



.participants img {
	max-height:55vh;
}

.sponsors img {
	max-width:19vh;
	border:1px solid #9d9d9d;
	margin-bottom:5px;
}

.sponsors p, .participants p {
	margin-top:0.2em;
	margin-bottom:0.2em;
}

.sponsors {
	border-right:1px solid #9d9d9d;
}

.participants {
	border-left:1px solid #9d9d9d;
}

.sponsors h3, .participants h3 {
	margin-top:0;
	padding-top:0;
}

.bandeauinfo {
	background-color: #01478c;
	width:100%;
	box-sizing:border-box;
	padding:5px;
	color:#fff;
	font-weight:bold;
	font-size:1.2em;
}

.bandeauinfo a {
	color:#7bd099;
}

.bandeauinfo a:hover {
	color:#ffffff;
}

.bandeausalles {
	background-color: #9d9d9d;
	width:100%;
	box-sizing:border-box;
	padding:5px;
	display:flex;
	justify-content:space-around;
}

.chatrooms {
	padding-top:15px;

}

.chatrooms h4 {
	padding-top:0;
	margin-top:0;
	margin-bottom:0;
	padding-bottom:3px;
}

.chatrooms .nomchat {
	text-align:center;
	background-color:white;
	padding-left:3px;
	padding-right:5px;
	width:200px;
	max-width:16%;
	margin-left:1px;
	margin-right:1px;
}

.bandeaubas {
	font-size:0.8em;
	background-color:#7bd099;
	padding:0.5em;
	box-sizing:border-box;
	color:#fff;
	text-align:center;
	margin-top:1.5em;
	display:flex;
	justify-content:space-around;
	align-items:center;
}

.bandeaubas a {
	text-decoration:none;
	color:#fff;
}

.bandeaubas a:hover {
	text-decoration:underline;
	color:#ffffff;
}

.bandeaubas img {
	width:15vw;
	border-radius:5px;
	max-width:200px;
}

.iconcredits {
	max-height:1em;
	vertical-align:middle;
}

.badges {
	display:flex;
	justify-content:space-around;
	flex-wrap:wrap;
	padding:10px;
}

.badge {
	width:24vw;
	min-width:200px;
	box-shadow: 0 4px 1px #c9c9c9;
	border:1px solid #E0E0E0;
	padding:10px;
	box-sizing:border-box;
	margin-bottom:2vw;
	background:#fff;
}

.sujet {
	width:45vw;
	min-width:400px;
	box-shadow: 0 4px 1px #c9c9c9;
	border:1px solid #E0E0E0;
	padding:10px;
	box-sizing:border-box;
	margin-bottom:2vw;
	background:#fff;
}

.orga {
	width:31vw;
	min-width:400px;
	box-shadow: 0 4px 1px #c9c9c9;
	border:1px solid #E0E0E0;
	padding:10px;
	box-sizing:border-box;
	margin-bottom:2vw;
	background:#fff;
	text-align:left;
}

.orga h3, .orga h5 {
	text-align:center;
}

.logoorga {
	float:right;
	margin-left:5px;
	width:30%;
	border:1px solid #666666;
}

.equipe {
	box-shadow: 0 4px 1px #c9c9c9;
	border:1px solid #E0E0E0;
	padding:10px;
	box-sizing:border-box;
	margin-bottom:2vw;
	background:#fff;
}

.imgbadge {
	max-width:30%;
	float:left;
	margin-right:5px;
	margin-bottom:5px;
}

.iminterv {
	max-width:30%;
	float:right;
	margin-left:0.5em;
	margin-bottom:0.5em;
}

.imgsujet {
	max-width:30%;
	max-height:180px;
	float:left;
	margin-right:15px;
	margin-bottom:5px;
}

.badge h4, .equipe h4, .sujet h4 {
	margin-top:0;
	padding-top:0;
	margin-bottom:7px;
	
}

h5 {
	color:#666666;
	font-style:italic;
	font-size:1em;
}

.badge p {
	margin:0;
}

.badge ul {
	text-align:left;
}

.clear {
	clear:both;
	height:10px;
}

.badge .employeur, .sujet .employeur {
	margin-top:5px;
	font-style:italic;
}

.employeur a {
	text-decoration:none;

}

.employeur a:hover {
	color:#0a2b5a;
}

.badge .bio {
	text-align:left;
	margin:0.5em;
}

.orga .interv {
	text-align:left;
	margin:0.5em;
	font-style:italic;
}

.pourquoi {	
	color:#666666;
	font-style:italic;
}

.badge .voirprofil, .programme .voirprofil  {
	margin-top:25px;
	margin-bottom:15px;
	text-align:center;

}

.boutonbadge_old {
	text-decoration:none;
	padding:2px;
	border:1px solid #7bd099;
	border-radius:5px;
	color:#7bd099;
}

.boutonbadge_old:hover {
	border-color:#666666;
	color:#666666;
}

.facultatif {
	color:#666666;
}

textarea {
	width:40em;
	max-width:90%;
}

input {
	max-width:90%;

}

input[type=text] {
	width:40em;

}

input[type="submit"], .boutonbadge {
	padding:8px;
	text-decoration:none;
	text-align:center;
	border-radius: 4px;
	border: medium none;
	background: #01478c none repeat scroll 0% 0%;
	color:#ffffff;
	transition: all 0.15s ease 0s;
}

input[type="submit"]:hover, .boutonbadge:hover {
	color:#ffffff;
	background-color:#0155a8;

}

.attention {
	color:#7d0000;
}

.badgeseul {
	text-align:center;
}

.badgeseul .badge {
	margin-left:auto;
	margin-right:auto;
}

.lienbouton {
	text-decoration:none;
	padding:2px;
	border:1px solid #666666;
	border-radius:5px;
	color:#666666;
}

.lienbouton:hover {
	border-color:#7bd099;
	color:#7bd099;
}

.imeditprof {
	max-width:150px;
	vertical-align:middle;
}

.center {
	text-align:center;
}

.left {
	text-align:left;
}

.logos {
	display:flex;
	justify-content:center;
	align-items:center;
	margin-bottom:2em;
	flex-wrap:wrap;
}

.logos div {
	display:inline-block;
	padding:0 0.6vw;
	margin-left:2vw;
	margin-right:2vw;
}

@media (min-width: 600px){
	.logspons {
		max-height:3vw;
		min-height:30px;
	}
}

.sponspo {
	min-height:22px;
	max-height:2.5vw;
}

.logspons {
	margin-bottom:0.3em;
}


@media (max-width: 600px){

	.logos div img {
		height:30px;
	}

	.sponspo img {
		height:25px;
	}

}

@media (min-width: 600px) and (max-width: 900px){
  
  .logos {
  	flex-wrap:wrap;
  }
  
  .logos div {
  	width:20%;
  	max-width:100px;
  }
}

.direct {
	text-align:center;
}

.icones {
	display:flex;
	justify-content:space-around;
	margin-top:2em;
	flex-wrap:wrap;
}



.rondic {
	display:inline-block;
	text-align:center;
	color:#01478c;
	margin-bottom:1em;
	margin-left:0.5em;
	margin-right:0.5em;
	width:8em;
}

.rondic a {	
	color:#01478c;
}

.rondic a:hover {	
	color:#0155a8;
}

.icone {
	max-width:4vw;
	min-width:40px;
	border-radius:50px;
	background-color:#01478c;
	transition: all 0.15s ease 0s;
}

.icone:hover {
	background-color:#0155a8;

}

.programme {
	display:none;
	position:fixed;
	background-color:#ffffff;
	padding:0.5em;
	border-radius:3px;
	border:2px solid #01478c;
	top:1em;
	text-align:left;
	max-width:85vw;
	z-index:1;

}

.programme p {
	margin:0;
	padding:0;
}

.fermer {
	float:right;
	font-weight:bold;
}

.programme h5 {
	color:#01478c;
	margin-bottom:0.5em;
}

.programme .premh5 {
	margin-top:0;
}

.now {
	font-weight:bold;
	color:#01478c;
}



.boutonbeige, .rondic .boutonbeige {
	background:#feaa94;
	border:2px solid #ff8767;
	border-radius:3px;
	font-style:italic;
	box-shadow: 0 4px 1px #0a2b5a;
	color:#0a2b5a;
	padding:2px 12px 8px 12px;
	text-decoration:none;
	margin:0.5em;
}


.boutonbeige:hover, .rondic .boutonbeige:hover {
	padding:2px 10px 8px 14px;
	color:#0a2b5a;

}

.imflex {
	display:flex;
	flex-wrap:wrap;
	justify-content:space-around;
	align-items:center;
}

.imflex img {
	width:10vw;
	min-width:150px;
}

.nommaj {
	text-transform: uppercase;
}

.framesujets {
	width:43vw;
	height:23vw;
	min-width:350px;
	min-height:172px;
	max-width:calc(100% - 20px);
}