html, body{
	background-color:#eee;
	font-family:Open Sans, Arial, sans-serif;
	margin:0;
	padding:0;
}

.bgbody{background:none;background-color:#3b5a7f;}

@mixin font-base {
	font-family:Open Sans, Arial, sans-serif;
	padding: 0;
	margin: 0;
	line-height: 1.3;
	font-weight: 600;
}

.volet h2, .volet h3, .volet h4 {
	font-family:Open Sans, Arial, sans-serif;
	margin:0 0 7px;
	text-align:left;
	color:#fff;
}

.volet h4{font-size: 0.8em;}
#container-blue .volet h4{font-size: 1.1em;}

#container-blue h3{
	padding:0;
	margin:0;
}

#container-blue h1, #container-blue h2{margin:0;color: #fff;}

#container .volet h4{
	font-size:0.9em;
}

.volet h5{margin-left:0.5em;text-align:left;}

.underline{
	background-size: 1px 1em;
	box-shadow:
	inset 0 -0.05em #d26110,
	inset 0 -0.2em #000;
	display: inline;
	color:#fff;
	}
  
.text-shadow {
	text-shadow:
	-2px -2px #1e1e1e,
	-2px 2px #1e1e1e,
	2px -2px #1e1e1e,
	2px 2px #1e1e1e;
}


.volet p, .volet ul, .volet ul li, .volet ul li a {
	font-family:Open Sans, Arial, sans-serif;
	@include font-base;
	color: grey;
	font-size: 0.9rem;
	color:#e8e8e8;
	text-align:left;
}

#container-blue .volet p, #container-blue .volet ul, #container-blue .volet ul li, #container-blue .volet ul li a {
	font-family:Open Sans, Arial, sans-serif;
	@include font-base;
	color: grey;
	font-size: 1.1rem;
	color:#fff;
	text-align:left;
}

#container-blue .volet ul li a{text-decoration:none;font-size:1rem;}


.volet a{color:#e87c2d;}


.container {
	background-color:#1a2431;
    margin: 0 auto;
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    height: 100%;
		flex-wrap:wrap;
}

header,
section {
	clear: both;
	/*position: fixed;*/
	text-align: center;
	/*width: 800px;*/
	/*max-width:800px;*/
}

header{
	position:static;
	top:0;
	width:100%;
	z-index:3;
}


main{
	text-align: center;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    /*padding: 0 2%;*/
    background-color: #141414;
	order:2;

}

#container-blue.large-blue, #container-blue{padding:0;text-align:left;max-width:1600px;}

#video{
}

section {
	/*top: 50px;*/
}

.video-responsive{
	max-width: 100%;
    margin: 0px auto;
    width: 100%;
}

.video-responsive > div{ 
	overflow: hidden;
    padding-bottom: 56.25%;
    position: relative;
    height: 0px;
}

.video-responsive iframe {
	left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    position: absolute;
}

.logo {
	width: 120px;
	padding: 10px;
}

#volet-gauche{
	width:25%;
	height:100%;
	order:1;
}

.volet {
    padding: 0 20px;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    /*background: #232323de;*/
	background:#1a2431;
    display: none;
    flex-direction: column;
	scrollbar-width: thin;
	    border-right: 1px solid #36485f;
}

.volet a{
	color:#fff;	
	text-decoration: underline;
}

.volet ul{margin-bottom:20px;margin-left: 0;padding:0;list-style:none;}

}

article {
	display: flex;
	align-items: center;
	margin: 0 auto;
	border-width: 0 0 1px;border-style: solid;border-image: linear-gradient( to left, #de7022, #612d08 ) 1 1 100%;
	color:#fff;
}

.item{
	display: flex;
	cursor:pointer;
	padding: 5px 0px;
}

.currentVideo{
	background-color: #de7022;
}

section article.item .chapters, section article.item .etape{
	display:block;
}

.volet article.item .chapters, .volet article.item .etape{
	display:none;
}

#chapters article{
	border:none;
}

.thumb {
	height: 55px;
	margin-right:5px;
}

.details {
	padding: 0px;
}

.main-chapters{
	text-align:left;
	padding: 0 0 0 20px;
}

.chapter-link{
	color:#fff;
}

#container .close{
	position:absolute;
	top:50px;
	right:35;
	padding:0px 8px;
	color:#fff;
	font-size:30px;
	font-family:Open Sans, Arial, sans-serif;
	font-weight:600;
	border:1px solid #aaa;
}

#container .volet-title{
	margin:40px 0 10px;
	color:#fff;
	font-size: 58px;
    font-weight: lighter;
}

.main-video-left-div{
 width:100%;
 float:left;
}
.main-video-right-div{
 width:45%;
 float:right;
}



#menu{
	padding:0;
	margin:0;
	position:relative;
	text-align:left;
	background-color:#336191;
	width:100%;
	height:42px;
	z-index:3;
}

/*#menu:hover{
	transition: background-color 0.5s ease;
	background-color:#3b5a7f;
}*/

#menu li{
	padding:14px 10px 9px;
	text-align:center;
	float:left;
	list-style:none;
	color:#fff;
	font-weight:bold;
	cursor:pointer;
	height:19px;
	line-height:none;
}

#menu li.current{background-color:#394a61;}

.open{display:flex;}
.close{display:none;}

#container-blue #login-box{
	font-family:Open Sans, Arial, sans-serif;
	display:flex;
	color:#fff;
}

#container .section{
	display:block;
	margin-top:10px;
	font-size:9px;
}

#sections{
	height:300px;
	overflow-y:scroll;
	overflow-x:hidden;
}

.nom_vache, 
.proprietaire{
	display:block;float:left;
}

#vache{display:none;}
#vache p{margin:0 0 7px;}

#nom-vache{font-size:32px;margin-top:15px;}
#container-blue #nom-vache{font-size:32px;margin-top:15px;}
#video-vache{margin-top:20px;}

#message{padding:7px; border:1px solid #ff6a00;background-color:#9e6944;border-radius:5px; color:#fff;}
#message.error{color:#fff; border:1px solid #f00; background-color:#da4c4c;margin:0 0 10px;border-radius:5px;}
#message.valid{border:1px solid #8bca06;background-color:#68963b;border-radius:5px; color:#fff;}

#catalogue-list{margin-top:10px;height:480px;display:block;overflow-y:scroll;overflow-x:hidden;scrollbar-width: thin;}


.mostly-customized-scrollbar::-webkit-scrollbar {
  width: 5px;
  height: 8px;
  background-color: #aaa; /* or add it to the track */
}

.mostly-customized-scrollbar::-webkit-scrollbar-thumb {
    background: #6b6b6b; 
}


.button{color: #fff;padding: 8px 25px;box-shadow: 0px 3px 0px #923d01;border-radius: 3px;border:0;cursor:pointer;}
.orange{background-color: #de7022;}
input[type="submit"]:disabled { background-color: #754e32; cursor: default;}


.lwa{width:100%;}

#lwa_wp-submit{background-color:#de7022; font-weight:bold;color:#fff;padding:9px 25px; border-radius:3px;box-shadow:0px 3px 0px #bbb;border:0;cursor:pointer;-webkit-appearance: none;}
#lwa_wp-submit label{color:#fff;}
#lwa_wp-submit td{color:#fff;}
#lwa-identifiant, #lwa-mdp, #select-vache, .search, #select-etape{background-color:#fff; border-radius:3px; padding:6px 2px 10px;border:0;}
#select-vache, #select-etape{width:100%;margin:0 0 10px;}

.list{margin:0;padding:0;margin-top:20px;}
.list li{list-style:none;border-width: 0 0 1px;border-style: solid;border-image: linear-gradient( to left, #de7022, #612d08 ) 1 1 100%;cursor:pointer;}
.list li p{display:flex;margin-top:0;margin-bottom:10px;}
.list li:hover{}

.left-arrow{float:right;}
.navigation{background-color: #5f402b;border-radius: 3px; padding: 5px;cursor:pointer;color:#fff;}
.dashicons.right-arrow, .dashicons.left-arrow{font-size: 34px;line-height: 35px;margin-right: 10px;cursor:pointer;}
.dashicons.right-arrow{margin: -5px 7% 0 0;}
.list p span {display:flex;flex-grow:1;width:100%;}
.list p span.nom-vache{width:25%;color: #fff;font-weight: bold;}
.list p span.proprietaire{width:65%;}
.list p span.right-arrow{width:3%;color: #de7022;align-items:center;}

.table-vache td{border:1px solid #8a5835;text-align:left;}
td{vertical-align:top;color:#fff;}
.lignee-paternelle{color: #de7022;}
#genealogie, #pointage{
	width:100%;
	font-family:Open Sans, Arial, sans-serif;
	vertical-align:top;
}
#pointage td {text-align:center;}

@media screen and (orientation: portrait) and (max-width: 1350px) {
	.container{max-with:100%;display:block;}
	main{padding:0;order:1;}
	#volet-gauche {width:100%;z-index:3;background: #1a2431;order:2;}
	.main-video-right-div{float:none;width:100%;}
	.main-video-right-div img{height:35px;}
	.main-video-left-div{float:none;width:100%;}
	.open{display:block;}
}


@media screen and (orientation: portrait) and (max-width: 400px) {
	.container{max-with:100%;display:block;}
	header, section {max-width:100%;}
	main{padding:0;order:1;}
	#volet-gauche {width:100%;z-index:3;background: #1a2431;order:2;}
	#container .volet-title{font-size:45px;margin-top:20px;}
	article{padding:0;}
	.thumb{height:50px;display:none;}
	details{padding:8px 10px;}
	.main-video-right-div{float:none;width:100%;}
	.main-video-right-div img{height:35px;}
	.main-video-left-div{float:none;width:100%;}
	.open{display:block;}
	/*.close{display:block;position:absolute;top:15px; right:20px;height:20px;border-radius:3px;padding:5px 6px;}*/
	#catalogue-list{height:300px;display:block;overflow-y:scroll;overflow-x:hidden;scrollbar-width: thin;}
}

@media screen and (orientation: landscape) and (max-width: 720px) {
	.container{max-width:100%;display:block;}
	header, section {max-width:100%;}
	main{padding:0;order:1;}
	#volet-gauche {width:100%;z-index:3;background: #1a2431;order:2;}
	#container .volet-title{font-size:45px;margin-top:20px;}
	article{padding:0;}
	details{padding:8px 10px;}
	.main-video-right-div{float:none;width:100%;}
	.main-video-right-div img{height:35px;}
	.main-video-left-div{float:none;width:100%;}
	.open{display:block;}
	/*.close{display:block;position:absolute;top:42px; right:20px;height:40px;}*/
}