/* ---------------- headroom */

#header				{ display: block;
  					  width: 100%;
  					  height: auto;
  					  /*margin-top: 8px;*/
  					  z-index: 10; }
.fixed				{ position: fixed;
					  z-index: 10;
					  right: 0; left: 0; top: 0; }
.header_space{
	margin-top: calc( var(--header) + 5px );
}

@media only screen and (max-width:414px) {
	.header_space{
		margin-top: calc( var(--header) + 10px );
	}
}

/* top */

.slide--top .header{
	-webkit-transition:all .5s ease-in-out;
	-moz-transition:all .5s ease-in-out;
	-o-transition:all .5s ease-in-out;
	transition:all .5s ease-in-out;
	background: rgba(255,255,255,0);
}
.slide--top .navigation_logo{
	-webkit-transition:all .5s ease-in-out;
	-moz-transition:all .5s ease-in-out;
	-o-transition:all .5s ease-in-out;
	transition:all .5s ease-in-out;
	background: url("../../images/common/logo/sofa53neun_h_white.png") no-repeat;
	background-size: contain;
}
.slide--top .navigation_icon{
	-webkit-transition:all .5s ease-in-out;
	-moz-transition:all .5s ease-in-out;
	-o-transition:all .5s ease-in-out;
	transition:all .5s ease-in-out;
	opacity:1;
	color: white;
}
.slide--top .navigation_burger{
	-webkit-transition:all .5s ease-in-out;
	-moz-transition:all .5s ease-in-out;
	-o-transition:all .5s ease-in-out;
	transition:all .5s ease-in-out;
	background: url("../../images/common/icons/burger_1.png") no-repeat;
	background-size: contain;
}
/*
.slide--top .navigation .nav_item, .slide--top .navigation .nav_item a{
	-webkit-transition:all .5s ease-in-out;
	-moz-transition:all .5s ease-in-out;
	-o-transition:all .5s ease-in-out;
	transition:all .5s ease-in-out;
	color:red;
}*/

/* not top */

.slide--not-top .header{
	-webkit-transition:all .5s ease-in-out;
	-moz-transition:all .5s ease-in-out;
	-o-transition:all .5s ease-in-out;
	transition:all .5s ease-in-out;
	background: #fff;
	opacity: .9;
}
.slide--not-top .navigation_logo{
	-webkit-transition:all .5s ease-in-out;
	-moz-transition:all .5s ease-in-out;
	-o-transition:all .5s ease-in-out;
	transition:all .5s ease-in-out;
	background: url("../../images/common/logo/sofa53neun_h_grey.png") no-repeat;
	background-size: contain;
}
.slide--not-top .navigation_icon{
	-webkit-transition:all .5s ease-in-out;
	-moz-transition:all .5s ease-in-out;
	-o-transition:all .5s ease-in-out;
	transition:all .5s ease-in-out;
	opacity:1;
	color: #3c4343;
}
.slide--not-top .navigation_burger{
	-webkit-transition:all .5s ease-in-out;
	-moz-transition:all .5s ease-in-out;
	-o-transition:all .5s ease-in-out;
	transition:all .5s ease-in-out;
	background: url("../../images/common/icons/burger_2.png") no-repeat;
	background-size: contain;
}
.slide--not-top .navigation .nav_item, .slide--not-top .navigation .nav_item a{
	-webkit-transition:all .5s ease-in-out;
	-moz-transition:all .5s ease-in-out;
	-o-transition:all .5s ease-in-out;
	transition:all .5s ease-in-out;
	color:#3C4342;
}

/** headroom.js animated styles **/
.slide{
  -webkit-transition:all .25s ease-in-out;
  -moz-transition:all .25s ease-in-out;
  -o-transition:all .25s ease-in-out;
  transition:all .25s ease-in-out;
}

.slide--reset{
  -webkit-transform:translateY(0);
  -ms-transform:translateY(0);
  transform:translateY(0);
}

.slide--up{
  -webkit-transform:translateY(-100%);
  -ms-transform:translateY(-100%);
  transform:translateY(-100%);
}

.animated{
  -webkit-animation-duration:.5s;
  -moz-animation-duration:.5s;
  -o-animation-duration:.5s;
  animation-duration:.5s;
  -webkit-animation-fill-mode:both;
  -moz-animation-fill-mode:both;
  -o-animation-fill-mode:both;
  animation-fill-mode:both;
}

@-webkit-keyframes slideDown{
  0%{ -webkit-transform:translateY(-100%)}
  100%{-webkit-transform:translateY(0)}
}
@-moz-keyframes slideDown{
  0%{-moz-transform:translateY(-100%)}
  100%{-moz-transform:translateY(0)}
}
@-o-keyframes slideDown{
  0%{-o-transform:translateY(-100%)}
  100%{-o-transform:translateY(0)}
}
@keyframes slideDown{
  0%{transform:translateY(-100%)}
  100%{transform:translateY(0)}
}

.animated.slideDown{
  -webkit-animation-name:slideDown;
  -moz-animation-name:slideDown;
  -o-animation-name:slideDown;
  animation-name:slideDown;
}
@-webkit-keyframes slideUp{
  0%{-webkit-transform:translateY(0)}
  100%{-webkit-transform:translateY(-100%)}
}

@-moz-keyframes slideUp{
  0%{-moz-transform:translateY(0)}
  100%{-moz-transform:translateY(-100%)}
}

@-o-keyframes slideUp{
  0%{-o-transform:translateY(0)}
  100%{-o-transform:translateY(-100%)}
}
@keyframes slideUp{
  0%{transform:translateY(0)}
  100%{transform:translateY(-100%)}
}

.animated.slideUp{
  -webkit-animation-name:slideUp;
  -moz-animation-name:slideUp;
  -o-animation-name:slideUp;
  animation-name:slideUp;
}