/* ------------------------- GLOBAL -------------------------*/
#menubar {
	width: 100%;
	height: 60px;
	position: fixed;
	bottom: 0px;
	padding-bottom:0px;
	margin-bottom:0px;
	background-image: url(../images/menubar/background.jpg);
	background-size: 100% 60px;
	background-repeat: no-repeat;
	background-position: center bottom;	
	background-attachment: fixed;
	display:block;
    z-index: 999;
}

/* Homepage logo */
#menubar #logo-btn { float: left; margin: 5px 0; margin-left: 3%; margin-right: 5%}
#menubar #logo-btn img { height: 50px; border: 0}


/* button style */
#menubar .menu-left,
#menubar .menu-left li,
#menubar .menu-left li a,
#menubar #menu-button {
	padding: 0;
	border: 0;
	list-style: none;
	display: block;
	position: relative;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	margin: 0;
	box-sizing: border-box;
}


#menubar ul { position: relative; margin: 0; padding: 0; width: auto; height: 60px; margin-left: 300px; text-align: center }

/* "Menu" button */
#menubar #menu-button { display: none; }
#menubar .menu-left { width:60% ; float:left; text-align: center}
#menubar .menu-left li { position:relative;float: left; display: block; width: 25%; text-align: center}
#menubar .menu-left li a { padding: 0 }
#menubar .menu-left li a img { padding: 18px ; text-align: center; border: 0 }


/* button hover effect */
#menubar .menu-left li:hover a,
#menubar .menu-left li a:hover,
#menubar .menu-left li.active a {
	color: #008AFF;
	border-radius: 10px;
	background-size:cover;
	background-image: -webkit-linear-gradient(270deg,rgba(255,255,255,0.20) 0%,rgba(255,255,255,0.00) 68.39%,rgba(255,255,255,0.20) 100%);
	background-image: -moz-linear-gradient(270deg,rgba(255,255,255,0.20) 0%,rgba(255,255,255,0.00) 68.39%,rgba(255,255,255,0.20) 100%);
	background-image: -o-linear-gradient(270deg,rgba(255,255,255,0.20) 0%,rgba(255,255,255,0.00) 68.39%,rgba(255,255,255,0.20) 100%);
	background-image: linear-gradient(180deg,rgba(255,255,255,0.20) 0%,rgba(255,255,255,0.00) 68.39%,rgba(255,255,255,0.20) 100%);
	/* TRANSITION */
	-webkit-transition: 0.3s ease-in ;
	-moz-transition: 0.3s ease-in;
	-o-transition: 0.3s ease-in;
	transition:0.3s ease-in ;
}

/* contact link */
#menubar .menu-right { width: 35%; float:right; right:0; bottom: 0px; display:block; z-index:1000; position: absolute; }
#menubar .menu-right li { display: inline-block; position: relative;padding-left: 4%;bottom: 5px;}
#menubar .menu-right li:hover a, #menubar .menu-right li a:hover, #menubar .menu-right li.active a { background:none }
#menubar .menu-right li img { height:40px; border: 0}

/* Homepage lang */
#menubar .lang-btn {float: right; position: relative; bottom: 5px; right: 10px}
#menubar #lang-btn, #menubar #lang-btn a, #menubar #lang-btn button { font-size: 15px; color: #fff; font-weight: bold; text-decoration: none; border: 0px; background-color: rgba(0,0,0,0.00); text-align: center; vertical-align: middle; padding-left: 5px; padding-right: 5px; outline: 0 }
#menubar #lang-btn button { cursor: pointer}
#menubar #lang-btn button:hover { color: #ccc}
#menubar #lang-btn a:hover { text-decoration: none; background-color: rgba(0,0,0,0.70); color: #00dbff; border-radius: 10px }


#hidemenu { display: none }
#showmenu { display: none }

}

/* ----------------------------------------------------------------*/

@media all and (max-width:1366px){

/* Homepage logo */
#menubar #logo-btn { margin-left: 1%}
    
/* Homepage lang */
#menubar #lang-btn { margin-right: 1% }

/* contact link */
#menubar .menu-right li {padding-left: 5%}

}

/* ----------------------------------------------------------------*/


@media all and (max-width:1300px){

#menubar ul { margin-left: 270px;}

/* "Menu" button */
#menubar .menu-left { width:60%}
#menubar .menu-left li a { padding: 0 }
#menubar .menu-left li a img { height: 20px;  padding: 18px 5px }
    
/* contact link */
#menubar .menu-right {width:250px}
#menubar .menu-right li {bottom: 10px; padding-left: 2px}
#menubar .menu-right li img {height:30px}
    
/* Homepage lang */
#menubar .lang-btn {bottom: 10px}
#menubar #lang-btn, #menubar #lang-btn a, #menubar #lang-btn button { font-size: 10px }
    
}

/* ----------------------------------------------------------------*/

@media all and (max-width: 900px) {

/* Homepage logo */
#menubar #logo-btn { position: absolute; bottom: 0; margin: 0px; left: 10px}

#menubar ul { width: 100%; height: 80%; margin-left: 0px; right: 25px; margin-bottom: 60px;  margin-top: 60px}

/* "Menu" button */
#menubar #menu-button { display: none; }
#menubar .menu-left { width:100% ; float:left; text-align: center}
#menubar .menu-left li { position:relative;float: left; clear: left; display: inline-block; width: 100%; text-align: center}
#menubar .menu-left li a { padding: 0 }
#menubar .menu-left li a img { height: inherit; padding: 15px 90px  }


/* contact link */
#menubar .menu-right { width: 300px; right:0px; bottom: 0px; margin-top:15px ;position:relative}
#menubar .menu-right li {display: inline-block; position: relative;padding-left: 5%;bottom: 5px;}
#menubar .menu-right li img { height:40px}

    
/* Homepage lang */
#menubar #lang-btn { clear: clear; position: fixed; bottom: 10px; left: 240px; display: none}
#menubar #lang-btn, #menubar #lang-btn a, #menubar #lang-btn button { font-size: 15px}

#menubar {
  position: fixed;
  background-color: #222;
  height: 80%;
  padding-bottom:60px;
  width: 320px;
  max-width: 320px !important;
  color: #bbb;
  bottom: 0;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  opacity: 1;
  font-family: 'Source Sans Pro', sans-serif;
}

#menubar ul {
  list-style: none;
  margin-top: 0;
  padding: 0;
  overflow-y: auto;
}

#menubar ul li a {
  color: inherit;
  display: block;
  text-decoration: none;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
    
.menu-left img { height: 25px; width: 125px; }

.left { left: -320px; }

.show { left: 0; }

#showmenu {
  display: flex;
  margin-left: 100%;
  position: absolute;
  width: 250px;
  bottom: 0px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
  padding-bottom: 0px;
  border-radius: 10px;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
  background-image: url(../images/menubar/background.jpg);
  background-size: 100% 100%;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

#hidemenu {display: block;}
#hidemenu img {float: right; position: relative ; margin-right: 10px; height: 50px; border: 0}
#showmenu img {float: left; position: relative ; margin-right: 10px; height: 40px; border: 0}