/*  
Theme Name: Slaur
Theme URI: www.slaur.fr
Description: Thème Wordpress pour Slaur
Author: CCE
Author URI: www.cce-organisation.fr
*/

.navbar {
	height: 60px;
	background: url(../img/bg-nav.jpg) top center repeat-x;
	border-radius: 0px;
	position: fixed;
	padding:0px;
	top:0px;
	z-index: 20;
	width: 100%;
	transition: background-color 0.4s ease-in;
	background-size: cover;
	background-color: #f1f1f1;
	color:#707070;
	-webkit-box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.20);
	-moz-box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.20);
	box-shadow:0px 5px 10px 0px rgba(0,0,0,0.20);
}
.navbar a {
	color:#707070;
	text-transform:uppercase;
}
@media (min-width: 768px) {
	.navbar {
		height:90px;
		background-position:bottom center;
		background-size: auto 100%;
	}
}
@media (min-width: 992px) {
	.navbar {
		height:120px;
	}
}
.logo-menu-container {
	width:100%;
}
.logo-menu-container .sitename {
	display:none;
}
.navbar h1,
.navbar h2 {
	float:left;
	margin:0px;
}
.navbar-brand {
	display:block;
	padding:0px;
}
.navbar .logo {
	display:inline-block;
	margin-right:0px;
  transition: opacity 0.4s ease-in;
	max-width:300px;
	max-height:130px;
	margin-top:20px;
}
.hamburger {
	position: absolute;
	right: 15px;
	width: 30px;
	height: 22px;
	text-align: center;
	border: none;
	background-color: transparent;
	margin-top: -30px;
	transition:all 0.2s;
	cursor:pointer;
}
.hamburger .str-only {
  opacity: 0;
  float: left;
  color: #fff;
  background-color:#ce1139;
  width: 0px;
  overflow: hidden;
  transition:opacity 0.2s;
}
.hamburger .icon-bar {
  position:absolute;
  margin:3px auto;
  width:20px;
  background-color:#ce1139;
  height:2px;
  transition:all 0.1s;
}
.hamburger .icon-bar:first-child {
  top:2px;
  right:5px;
}
.hamburger .icon-bar:nth-child(2) {
  top:7px;
  right:5px;
}
.hamburger .icon-bar:nth-child(3) {
  top:12px;
  right:5px;
}
.hamburger.closemenu {
	width:80px;
	background-color:#ce1139;
	height:40px;
}
.hamburger.closemenu .str-only {
	opacity: 1;
	width: 50px;
}

.hamburger.closemenu .icon-bar:nth-child(2) {
  opacity:0;
}
.hamburger.closemenu .icon-bar:nth-child(1) {
	background-color:#fff;
  top:17px;
  right:5px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);  
}
.hamburger.closemenu .icon-bar:nth-child(3) {
	background-color:#fff;
  top:17px;
  right:5px;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);  
}

@media (min-width:768px) {
  .hamburger {
    display:none;
  }
}

.menu-container {
	text-align:right;
	margin-top: 30px;
	float:right;	
	font-size:20px;
}
.menu-container ul {
	padding:0px;
	list-style:none;
}
.menu-header li {
	border-bottom:solid 1px #707070;
}
.menu-container a {
	text-transform: uppercase;
	position:relative;
	transition:background 0.2s;
	text-decoration:none;
}
.menu-header a:hover,
.menu-header .current-menu-item a {
	color:#ce1139;
	text-decoration:none;
	transition:all 0s;
}
.menu-header .current-menu-item a {
	font-weight:700;
	letter-spacing:-0.4px;
}
.menu-header a:after {
	content:"";
	position:absolute;
	left:0px;
	bottom:-4px;
	width:100%;
	height:6px;
	background-color:transparent;
	transition:all 0.4s;
}
.menu-header a:hover::after,
.menu-header .current-menu-item a::after {
	content:"";
	position:absolute;
	left:0px;
	bottom:-24px;
	width:100%;
	height:6px;
	background-color:#ce1139;
}

.menu-contact {
	position:absolute;
	text-align:right;
	top: 10px;
	right:10px;	
	font-size:10px;
}
.menu-contact a {
	text-transform: uppercase;
	color:#fff;
}
.menu-contact a:hover {
	color:#ce1139;
}
@media (min-width: 768px) {
	.menu-header {
		position:relative;
		margin-top:0px;
		left:inherit;
		display:inline-block;
		width:86%;
	}
	.menu-container {
		width:78%;
	}
	.menu-container ul {
		text-align:right;
		letter-spacing:-0.25em;
	}
	.menu-container ul li {
		display:inline-block;
		letter-spacing:normal;
		padding:0 2% 5px;
		font-size:11px;
	}
	.menu-container ul li:first-child {
		padding-left:0;
	}
	.menu-container ul li:last-child {
		padding-right:0;
	}

	.menu-languages {
		float:right;
		width:14%;
		height:60px;
		text-align:right;
		position:relative;
	}
	.menu-languages .languages {
		position:absolute;
		top:0px;
		right:0px;
		width:60px;
		min-height:33px;
		background-color:#fdfdfd;
		border:solid 1px #ce1139;
		padding-top:4px;
	}
	.menu-languages .languages::after {
		content:"\f107";
		font-family:"FontAwesome";
		position:absolute;
		right:12px;
		top:6px;
		font-size:14px;
		color:#ce1139;
	}
	.menu-languages ul.languages li {
		display:none;
		text-align:center;
		padding-top:0px;
		padding-right:6px;
	}
	.menu-languages ul.languages li:first-child {
		padding-bottom:0px;
	}
	.menu-languages ul.languages li:last-child {
		padding-top:0px;
	}
	.menu-languages ul.languages li.current-lang {
		display:block;
		color:#ce1139;
	}
	.menu-languages ul.languages li.current-lang a {
		color:#ce1139;
	}

}
@media (min-width: 992px) {
	.menu-container {
		width:80%;
	}
	.menu-container ul li {
		font-size:14px;
	}
	.menu-header {
		width:90%;
	}
	.menu-languages {
		width:10%;
	}

}

@media (min-width: 1200px) {
	.menu-container ul li {
		font-size:16px;
		padding:0 3% 5px;
	}

}

@media (max-width: 1200px) {
	.navbar .logo {
		max-width: 240px;
		max-height: 120px;
		margin-top: 30px;
	}
}

@media (max-width: 991px) {
	.navbar .logo {
		max-width: 120px;
		max-height: 80px;
		margin-top: 20px;
	}
	.menu-container {
		margin-top:20px;
	}
}

@media (max-width: 767px) {
	.navbar .logo {
		display:inline-block;
		position:absolute;
		z-index:20;
		margin-right:6px;
		max-width:100px;
		max-height:60px;
		margin-top:0px;
	}
	.menu-container {
		font-size:14px;
		margin-top:38px;
	}

/*
	.menu-container ul {
		display:none;
	}
	.menu-header {
		position: absolute;
		margin-top: 10px;
		left: 0px;
		width:100%;
	}
	.menu-header li {
		border-bottom:solid 1px #fff;
		text-align:left;
	}
	.menu-header li:last-child {
		border-bottom:0px;
	}
	.menu-header li a {
		display:block;
		padding:10px 15px;
		background-color:#ce1139;
		color:#fff;
	}
	.menu-header li a:hover,
	.menu-header .current-menu-item a {
		width:100%;
		padding:10px 15px;
		background-color:#fff;
		color:#ce1139;
	}
	.menu-header a:hover::after,
	.menu-header .current-menu-item a::after {
		display:none;
	}
*/
	.menu-header,
	.menu-languages {
		display:none;
	}
	.menu-responsive {
		position:fixed;
		width:100%;
		height:100vh;
		z-index:1000;
		background-color:#f7f7f7;
		display:none;
		opacity:0;
		top:0;
		left:0;
		padding:20px 30px;
	}	
	.menu-responsive-header {
		height:50px;
		border-bottom:solid 1px #ce1139;
	}
	.menu-responsive-header h2 {
		float:left;
		font-size:0px;
	}
	.menu-responsive .sitename {
		display:none;
	}
	.menu-responsive .logo {
		display:inline-block;
		position:absolute;
		z-index:20;
		max-width:80px;
		max-height:40px;
		margin-top:0px;
	}
	.menu-responsive .close {
		font-size:0;
		position:relative;
		float:right;
		width:26px;
		height:26px;
		opacity:1;
		transition:opacity 0.2s;
	}
	.menu-responsive .close:hover {
		opacity:0.6;
	}
	.menu-responsive .close::before {
    background: #ce1139;
    position: absolute;
    display: block;
    content: '';
    width: 26px;
    height: 4px;
    top: 10px;
    right: 0px;
    transform: rotate(-45deg);
	}
	.menu-responsive .close::after {
    background: #ce1139;
    position: absolute;
    display: block;
    content: '';
    width: 26px;
    height: 4px;
    right: 0px;
    top: 10px;
    transform: rotate(45deg);
	}
	.menu-responsive .menu-responsive-container {
		margin-top:60px;
	}
	.menu-responsive-container ul {
		list-style:none;
		margin:0px;
		padding:0;
	}
	.menu-header-responsive li {
		padding:10px 0;
		font-size:22px;
		text-transform:uppercase;
	}
	.menu-header-responsive li:first-child {
		padding-top:0px;
	}
	.menu-header-responsive li:last-child {
		padding-bottom:0px;
	}
	.menu-header-responsive a {
		font-weight:700;
		color:#707070;
		text-decoration: none;
	}
	.menu-header-responsive a:hover,
	.menu-header-responsive .current-menu-item a {
		color:#ce1139;
		text-decoration: underline;
	}
	.menu-responsive-languages {
		margin-top:80px;
		color:#ce1139;
		font-size:12px;
	}
	.menu-responsive-languages h4 {
		margin-top:0px;
		font-size:12px;
	}
	.menu-responsive-languages ul.languages li {
		margin-top:5px;
	}
}