/* --- menu --- */

#header
{
    height: 16%;
    /* width: 100%; */
	width: 16%;
    background-image: transparent;
    z-index: 6;
    position: fixed;
    top: 0;
    display: inline;
    text-transform: uppercase;
    opacity: 1;
}

@media (max-width:768px)
{
    #header
    {    height: 25%;
    
	width: 25%;
    }
}
@media (max-width:480px)
{
    #header
    {    height: 50%;
    
	width: 50%;
    }
}

/* #FFFDE7 */

#header:hover

{

opacity: 0.95 !important;


}

#header .button
{
    position: absolute;
    top: 0;
}


.menu__btn
{
    float: left;
    background: none;
    border: none;
    padding: 2em 2em;
}

.menu__label
{
    writing-mode: vertical-lr;
    font-size: 0.8em;
    letter-spacing: 0.22em;
    text-align: center;
    text-transform: uppercase;
    border-style: dotted;
    border-color: #213260;
    border-width: 1px;
    padding: 20px 10px;
	margin-top: 15px !important;
}
@media (max-width:480px)
{
    .menu__label
    {font-size: 0.75em;
	padding: 15px 8px;
    }
}
.menu__title
{
    font-size: 1.05em;
	color: white;
}

.menu__container
{
    transition: all 0.4s 0.3s cubic-bezier(.4,0,.17,1);
    transform: translateX(-20em);
    padding-top: 1.85em;
    padding-bottom: 0.05em;
    font-size: 2.2em;
    top: 0;
    left: 25%;
    text-align: left;
    letter-spacing: 0.1em;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    font-family: jitzuregular, serif;
    z-index: 2;
    text-transform: uppercase;
	color: white;
	-webkit-transition: all 0.5 ease-in-out;
  -moz-transition: all 0.5 ease-in-out;
  -o-transition: all 0.5 ease-in-out;
  transition: all 0.5 ease-in-out;
	
}

.menu__list
{color: white;
    padding: 0;
    margin-top: 1em;
}

.menu__item
{font-family: 'Muli', arial, helvetica, sans-serif;
	color: white !important;
	background-color: transparent;
    list-style: none;
    z-index: 3;
    font-size: 0.42em;
	font-weight: lighter;
    letter-spacing: 0.2em;
	line-height: 0.25em;
	white-space:nowrap;
	width:180px;
	height:35px;
	padding-bottom:35px;
	-webkit-transition: all 0.5 ease-in-out;
  -moz-transition: all 0.5 ease-in-out;
  -o-transition: all 0.5 ease-in-out;
  transition: all 0.5 ease-in-out;
}


.menu__item:hover
{
    color: pink;
}

.menu__item .a
{
    color: red;
}



.menu__item:hover:before
{position: absolute;
    content: '';
    display: block;
   left:-55px;
    width: 20%;
    height: 1px;
	 background-color: white;
    margin: 1em 0;
	margin-top: 1px;
	
}
.menu__item:hover:after
{position: absolute;
    content: '';
   right:10px;
    width: 20%;
    height: 1px;
    background-color: #A3BEB0;
    margin: 1em 0;
	margin-top: 1px;
	
}

.menu__item:last-child
{
	margin-left:-35px !important;
}

.menu__item:last-child:hover:before
.menu__item:last-child:hover:after
{
    opacity:0;
}

.menu__item:last-child:before,.menu__item:last-child:after
{
    opacity: 0;color: green !important;
}

.menu__bg-layer
{
    transition: all 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
    border-radius: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    background: #213260;
    height: 0;
    width: 0;

}

.menu__btn:hover .menu__container
{
    transform: translateX(0);
    transition-delay: 0;
    visibility: visible;
    opacity: 1;
}

.menu__btn:hover .menu__bg-layer
{
    padding-bottom: 250%;
    width: 250%;
    opacity: 1;
}

.menu__btn:hover .menu__bg-layer-2
{
    background: white;
}

.menu__btn:hover .menu__bg-layer-1
{
    transition-delay: 0.2s;
}