h2
{
	font-weight: bold;
	text-align: center;
	margin-top: 0;
}
.jumbotron h3, h1
{
	display: inline-block;
	font-family: Lobster; 
	font-size: 4em;
}
h3, .explications h2
{
	text-align: justify;
	margin-top: 1em;
}
h4
{
	text-align: center;
	font-size: 2em;
	margin-top: 0.5em;
}

.navbar
{
	margin-bottom: 0;
}

.jumbotron{
	/*background-color: #D95B43;*/
	background-color: rgb(22,22,22);
	background-image: url("jumbo.jpg");
	background-position: bottom;
	background-repeat: no-repeat;
	color: white;
	text-align: center;
}
#chapo{
	
}

#main_menu{
	color: white;
	margin: 0.5em;
	background: none;
	height: 8em;
}
#citations .row
{
	text-align: center;
	font-style: italic;
}
#citations img
{
	height: 3em;
	max-width: 100%;
}
#citations div
{
	margin-bottom: 1em;
}

/*#choix_1{
	background-color: #D95B43;
}

#choix_2{
	background-color: #53777A;
}
#choix_3{
	background-color: #542437;
}*/
/*.main_choix a{
	display: inline-block;
	border: 3px solid white;
	font-size: 2em;
	padding-left: 0.5em;
	padding-right: 0.5em;
	border-radius: 1em;
	font-weight: bold;
	min-width: 50%;
	max-height: 2em;
	line-height: 2em;
	bottom: 0.5em;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	overflow: hidden;
}
.main_choix a:hover{
	text-decoration: none;
	background-color: white;
}
.main_choix a:visited{
	color: white;
}*/
.main_choix{
	text-align: center;
}
#main_gauche
{
	display: hidden;
}
/*#choix_1 .main_choix a:hover, #choix_3 .main_choix a:hover{
	color: #D95B43;
}
.main_choix a:hover{
	color: #D95B43;
	background-color: white;
}
#choix_3 .main_choix a:hover{
	color: #542437;
}*/

#algo, #blocs{
	position: relative;
}
#blocs{
	left: -7px;
}
#algo{
	right: 0px;
}
.jumbotron
{
	margin: 0;
}
.boutons
{
	position: relative;
	bottom: 50px;
}
.explications
{
	position: relative;
	font-size: 1.2em;
}
.btn-success{
	-webkit-animation: mymove 4s infinite;
    animation: mymove 4s infinite;
	font-size: 4em;
	position: relative;
	bottom: 20px;
	width: 100%
}
.btn-primary{
	width: 50%;
	display: block;
	margin-top: 5px;
}
.btn-info
{
	width: 46%;
	margin-left: 2%;
	margin-right: 2%;
	display: block;
	margin-top: 5px;
}
@-webkit-keyframes mymove {
    0%  {box-shadow: 0px 0px 0px #afa; bottom: 0px;}
    80% {box-shadow: 0px 0px 0px #afa; bottom: 0px;}
    90% {box-shadow: 0px 0px 10px #afa; bottom: 10px;}
    100%  {box-shadow: 0px 0px 0px #afa; bottom: 0px;}
}
@keyframes mymove {
    0%  {box-shadow: 0px 0px 0px #afa; bottom: 0px;}
    80% {box-shadow: 0px 0px 0px #afa; bottom: 0px;}
    90% {box-shadow: 0px 0px 10px #afa; bottom: 10px;}
    100%  {box-shadow: 0px 0px 0px #afa; bottom: 0px;}
}
#blockly, #blocklyAttract{
		display: none;
}
#blockly h5{
	margin: 0;
	font-size: 1.1em;
}
canvas{
	width: 85%;
	border: 1px solid grey;
}
#blockly .col-md-6, #blockly .col-md-3
{
	padding-left: 4px;
	padding-right: 4px;
}
#blocklyCode, .CodeMirror
{
	background-color: rgba(128,128,128,0.5);
	font-family : Lucida Console, monospace, serif;
	border: 1px solid black;
	font-size: 0.8em;
	height: 306px;
}
#blocklyArea
{
	border: 1px solid black;
	background-color: lightgray;
}


@media (min-width: 992px){	
	/*.jumbotron{
		overflow: hidden;
	}
	.choix{
		padding-bottom: 1000px;
	  	margin-bottom: -1000px;
	}*/
	#blockly{
		display: block;
	}
	#blocklyAttract{
		display: inline;
	}
	.choix p{
		height: 2.5em;
	}
	.main_sep{
		display: block;
		position: absolute;
		width: 2px;
		height: 90%;
		top: 5%;
		background-color: white;
		z-index: 100;
	}
	#main_gauche{
		left: -1px;
	}
	#main_droite{
		right: -1px;
	}
}
@media (max-width: 768px){	
	.btn-primary
	{
		width: 100%;
	}
	.btn-success{
	font-size: 2em;

	}
	.btn-info
	{
		width: 100%;
		margin-left: 0;
		margin-right: 0;
	}
	.jumbotron h3, h1
	{ 
		font-size: 3em;
		margin-top: 0;
		text-align: center;
	}
	.jumbotron h4
	{
		font-size: 1.5em;
	}
	.jumbotron
	{
		padding-left: 2px;
		padding-right: 2px;
	}
}