/*-------------*/
/* general     */
/*-------------*/
@font-face {
    font-family: Bonveno;
    src: url(Bonveno.otf);
}

html{
	min-height: 100%;
	height: 100vh;
}

body {
	height: 100%;
	font-family: Bonveno !important;
	vertical-align:middle;
	text-align:center;
	color:#dcdcdc !important;
	background: url('../Images/ES2A9619.jpg') no-repeat center fixed; 
	-webkit-background-size: cover; /* pour anciens Chrome et Safari */
	background-size: cover; /* version standardisée */
}

input[type="checkbox"]{
	margin-bottom: 10px !important;
}

.logo_fb_image {
        margin-top:10px;
}

.div-fb {
	margin: 15px 0;
	background-color: white;
	padding: 15px;
}

.div-fb-small {
	margin: 15px 0;
	padding: 15px;
}

.fb-page iframe{
	min-height:70px !important;
}

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

#header-title {
	margin:50px 0 50px 0;
}

#lang_choice{
	right: 15px;
	position: absolute;
	z-index: 10;
	top: 9px;
}

#lang_choice img {
	height: 22px;
	margin-left: 2px;
	cursor:pointer;
}

#img_over{
	padding:70px;
	top:100px;
	right:100px;
	bottom:100px;
	left:100px;
	position:absolute;
	background-color: rgba(20, 20, 20, 0.4);
}

#countdown{
	font-size: 3.5em;
}

input, select, textarea,
.ui-datepicker-calendar, 
.ui-datepicker-calendar a{
	color:#282828 !important;
}

input[type="file"] {
	display: inline-block !important;
}

textarea {
	width:60%;
}

.align-right {
	text-align:right;
}

.align-left {
	text-align:left;
}

/*-------------*/
/* menu        */
/*-------------*/
#left-nav,
#left-nav ul li ul li{
	text-transform:uppercase;
}

.navbar-inverse .nav li,
.navbar-inverse .nav li i,
.navbar-inverse .nav li span{
	color: #9d9d9d !important;
	background: rgba(20, 20, 20, 1) !important;
}
.navbar-inverse .nav li:hover,
.navbar-inverse .nav li:hover > a > span,
.navbar-inverse .nav li:hover > a > i {
	color: #dcdcdc !important;
}

#left-nav {
	left: 0;
	top: 0;
	height: 100vh;
	width: 200px;
	z-index: 1000;
	padding: 50px 0px;
	border:none;
	border-radius:0px;
	position:fixed;
	background-color: rgba(20, 20, 20, 1);
}
#left-nav li> a{
	padding-top: 10px !important;
	padding-bottom:10px ! important;
}

/* sauf smartphones */
@media (min-width: 769px) {	
	#left-nav li> a.haschild{
		padding-left: 30px;
		padding-right: 25px;
	}
	li.dots {
		padding-left:20px;
	}
}

#left-nav ul li ul.hidetablet{
	display:none;
}

#left-nav ul li,
#left-nav ul li a {
	display: block;
	width: 100%;
	background: transparent;
}

#left-nav ul > li > ul > li a {
	padding: 20px;
}

.navbar-nav > li.sub > ul {
	left: 200px;
	float:left;
	width: auto;
	min-width: 0 !important;
	overflow: hidden;
	opacity: 1;
	top: -1px !important;
	border:none;
	background: rgba(20, 20, 20, 1) !important;
	box-shadow:none;
}

#left-nav li > ul {
	display: none;
	border-radius: 0px;
}

#left-nav li:hover{
	color: #dcdcdc !important;
}

#left-nav li:hover > ul,
#left-nav li > ul:hover {
	display: block;
}

#mobile-nav{
	display:none;
}

/*-------------*/
/* contenu     */
/*-------------*/
#logo{
	max-height: 30vh;
	max-width: 100%;
	background: rgba(255,255,255,0.7);
	box-shadow: 0 0 7vh 7vh rgba(255,255,255,0.7);
}

#contenu{
	min-height:92%;
	margin-left: 200px;
	margin-right: 25vw;
	margin-bottom: 50px;
	margin-top: -150px;
	padding-top: 150px;
}

.note_title, 
.notes_title, 
.country_title, 
.countries_title, 
.galleries_title, 
.gallery_title, 
.meal_title, 
.meals_title, 
.author_title {
	text-align:left;
	background-color:rgba(20, 20, 20, 1);
	padding: 1px 20px 10px 20px;
	margin:15px 0px;
}

.country_title span:first-child,
.meal_title span:first-child{
	margin:20px 10px 10px 0px;
	font-size: 36px;
	font-weight: 500;
	line-height: 1.1;
	display:block;
}

.country_title .flag,
.meal_title .flag{
	height: 36px;
	margin-top: -4px;
}

.note_content, 
.country_content,  
.gallery_content, 
.meal_content,  
.author_content {
	text-align:justify;
	background-color:rgba(20, 20, 20, 1);
	padding: 30px 15px 15px 15px;
}

.author_content {
	padding: 30px 15px 1px 15px;
}

.notes_content, 
.countries_content, 
.galleries_content, 
.meals_content {
	text-align:justify;
	background-color:rgba(20, 20, 20, 1);
	padding: 1px 20px 30px 20px;
}

.gallery_content,
.countries_content, 
.galleries_content, 
.meals_content {
	display:flex;
	align-items:flex-end;
	flex-wrap: wrap;
}

.notes_content {
	display:flex;
	align-items:flex-start;
	flex-wrap: wrap;
}

.gallery_content .image,
.countries_content .country, 
.galleries_content .gallery, 
.meals_content .meal,
.notes_content .note {
	text-align:center;
	overflow-wrap: break-word;
}

.country_content img:not(.flag), 
.gallery_content img:not(.flag), 
.meal_content img:not(.flag), 
.author_content img:not(.flag){
	margin:30px auto;
	max-width:100%;
}

.img_title, .img_legend {
	display:block;
}

.img_title {
	margin-top:20px;
}

.img_legend {
	margin-bottom:20px;
}

.gallery_content img:not(.flag),
.notes_content img:not(.flag), 
.countries_content img:not(.flag), 
.galleries_content img:not(.flag), 
.meals_content img:not(.flag) {
	margin: 0px;
}

.countries_content .flag,
.meals_content .flag,
.galleries_content .flag,
.notes_content .flag {
	position: absolute;
	left: 20px;
}

/*-------------*/
/* sidebar     */
/*-------------*/
#right_part{
	right: -20px;
	top: 0;
	height: 100vh;
	width: calc(25vw + 20px);
	z-index: 1000;
	padding: 0px;
	border:none;
	border-radius:0px;
	position: fixed;
	overflow-y: scroll;
}

#about_us, #latest_posts{
	padding:10px;
	background-color:rgba(20, 20, 20, 1);
}

#about_us{
	padding-top:50px;
	margin-bottom:15px;
}

#latest_posts{
	padding-top:30px;
	padding-bottom:30px;
}

#about_us_content{
	margin-bottom:10px;
}

.author-image-home{
	max-height: 220px;
	max-width: 220px;
	margin: 20px auto;
	overflow: hidden;
	border-radius: 100%;
}

#latest_posts_title{
	margin-bottom: 20px;
}

#latest_posts_content a.all{
	text-transform: uppercase;
}

#latest_posts_content .latest_post_title,
#latest_posts_content .latest_post_date,
#latest_posts_content .latest_post_content,
.clickable-link{
    background-color: rgba(255,255,255,0.2) !important;
}

#latest_posts_content a:hover .latest_post_title,
#latest_posts_content a:hover .latest_post_date,
#latest_posts_content a:hover .latest_post_content,
.clickable-link:hover{
    background-color: rgba(255,255,255,0.1) !important;
}

#latest_posts_content .latest_post_title{
	margin-top: 10px;
	padding-top: 10px;
	text-transform: uppercase;
}

#latest_posts_content .latest_post_date{
	padding-bottom: 10px;
}

#latest_posts_content .latest_post_content{
	margin-bottom: 10px;
	padding: 0px 15px 10px 15px;
	text-align: justify;
}

/*-------------*/
/* footer      */
/*-------------*/
.footer {
	padding-top: 30px;
	padding-bottom: 80px;
}

/*-------------*/
/* tablettes   */
/*-------------*/
@media (max-width: 992px) {
	#contenu{
		margin-right:0px;
	}
}

/*-------------*/
/* smartphones */
/*-------------*/
@media (max-width: 768px) {
        .logo_fb_image {
                margin-bottom:60px;
        }
	#img_over{
		padding:0;
		padding-top:100px;
		padding-bottom:50px;
	}		
	#mobile-nav{
		display:block;
		z-index: 1500;
		position: fixed;
		top: 0;
		left: 0;
		padding: 15px;
		color: #dcdcdc;
		background-color: rgba(20, 20, 20, 1);
		font-size: 20px;
	}
	#mobile-nav.open{
		color: rgba(20, 20, 20, 1);
		background-color: #dcdcdc;
	}
	#left-nav {
		display: none;
		width:100vw;
		overflow-y:scroll;
		overflow-x:hidden;
	}
	#left-nav.hidemobile,
	#left-nav ul li ul.hidemobile{
		display:none;
	}
	#left-nav:not(.hidemobile),
	#left-nav ul li ul:not(.hidemobile){
		display:block;
	}
	#left-nav li> a > i{
		display:none;
	}
	.navbar-nav{
		margin-bottom:5px !important; 
	}
	#left-nav ul li ul li,
	#left-nav ul li ul li span{
		background-color: rgb(40,40,40) !important;
	}
	.navbar-nav > li.sub > ul {
		float: none;
		padding:0;
	}
	#logo{
		max-height: 150px;
		box-shadow: 0 0 50px 50px rgba(255,255,255,0.7);
	}	
	#contenu{
		margin-left:0px;
	}
}

/*-------------*/
/* bidouille   */
/*-------------*/
@media (max-height: 820px) {
	#img_over{
		top:0;
		right:0;
		bottom:0;
		left:0;
		position: initial;
		min-height: 100%;
	}
}

@media (max-width: 820px) {
	#img_over{
		top:0;
		right:0;
		bottom:0;
		left:0;
		position: initial;
		min-height: 100%;
	}
}