#menu-wrapper {
  width: 100%;
  height: 100%;
  top:0px;
  left: 0px;
  position: fixed;
  overflow: hidden;
  z-index: 99;
  background: url(../images/bkg_menu.jpg) no-repeat center center;
  background-size:cover;
  display:none;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
#menu-wrapper > .rose{
	position:absolute;
	width:600px;
	height:600px;
	top: 50%;
	left: 50%;
	-webkit-transform: translateY(-50%);
  	-ms-transform: translateY(-50%);
  	transform: translateY(-50%);
	margin-left:-300px;
	background: url(../images/rose.svg) no-repeat center center;
	opacity:.1;
}

.nav {
  position: relative;
  width: 500px;
  list-style: none;
  margin: 0;
  padding: 0;
  width:100%;
  margin:0 auto;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.nav li {
  width:100%;
  height:45px;
  line-height:50px;
  cursor: pointer;
  margin-top:0px;
  margin-bottom:0px;
}

.nav li a {
  position:relative;
  font-family:'Eurostile LT W01 Bold C1391138';
  font-size:50px;
  color: #fff;
  left:0%;
  display: block;
  letter-spacing:0em;
  text-align:left;
  text-decoration:none;
  text-transform:uppercase;
  font-weight: normal;
  -webkit-transition: all 0.2s ease 0s;
  -moz-transition: all 0.2s ease 0s;
  -ms-transition: all 0.2s ease 0s;
  -o-transition: all 0.2s ease 0s;
  transition: all 0.2s ease 0s;
}
.nav li a:hover{
	color:#c2aa77;
}

.nav li a:hover .menu-over .line{
	-webkit-animation: traceLine .4s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
  -moz-animation: traceLine .4s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
  -ms-animation: traceLine .4s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
  -o-animation: traceLine .4s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
  animation: traceLine .4s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

.nav li a:hover .menu-over .over-title{
  -webkit-animation: animateDiscover .4s cubic-bezier(.19,.1,.91,.53) forwards;
  -moz-animation: animateDiscover .4s cubic-bezier(.19,.1,.91,.53) forwards;
  -ms-animation: animateDiscover .4s cubic-bezier(.19,.1,.91,.53) forwards;
  -o-animation: animateDiscover .4s cubic-bezier(.19,.1,.91,.53) forwards;
  animation: animateDiscover .4s cubic-bezier(.19,.1,.91,.53) forwards;
  
  -webkit-animation-delay: .2s; /* Chrome, Safari, Opera */
  animation-delay: .2s;
}
@keyframes animateDiscover {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}
@-webkit-keyframes animateDiscover {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}
@keyframes traceLine {
  0% {
    width:0px;
  }
  100% {
    width:160px;
  }
}
@-webkit-keyframes traceLine {
	0% {
    width:0px;
  }
  100% {
    width:160px;
  }
}

.menu-over{
	display:block;
	position:relative;
	float:left;
	width:50%;
	left:0px;
	top:0px;
	color:white;
	font-size:12px;
	margin-left:0px;
}
.menu-over .over-title{
	float:right;
	opacity:0;
	font-family: "Myriad W01 Regular";
	letter-spacing: 0.3em;
	line-height:50px;
}
.menu-over .line{
	display:block;
	float:right;
	position:relative;
	left:0px;
	top:23px;
	width:0px;
	height:1px;
	color:white;
	margin-right:10px;
	margin-left:10px;
	background-color:#897b5f;
}
#menu-toggle {
  width:43px;
  height:43px;
  top:150px;
  right:12.5%;
  margin-right: -23px;
  position:fixed;
  z-index:1;
  background-color:transparent;
  border:1px solid #1effbc;
  z-index: 100;
  cursor:pointer;
  overflow:hidden;
}
#menu-toggle span{
  display: block;
  position: absolute;
  height: 2px;
  width: 23px;
  left:9px;
  background: #d5d5d6;
  opacity:.8;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}
#menu-toggle span:nth-child(1) {
  top: 15px;
}

#menu-toggle span:nth-child(2){
  top: 20px;
}
#menu-toggle span:nth-child(3) {
  top: 20px;
  opacity:0;
}
#menu-toggle span:nth-child(4) {
  width:13px;
  top: 25px;
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

#menu-toggle.close:hover span:nth-child(1) {
  -webkit-animation: moveLeftToRightAndRightToLeft .4s cubic-bezier(.19,.1,.91,.53) forwards;
  -moz-animation: moveLeftToRightAndRightToLeft .4s cubic-bezier(.19,.1,.91,.53) forwards;
  -ms-animation: moveLeftToRightAndRightToLeft .4s cubic-bezier(.19,.1,.91,.53) forwards;
  -o-animation: moveLeftToRightAndRightToLeft .4s cubic-bezier(.19,.1,.91,.53) forwards;
  animation: moveLeftToRightAndRightToLeft .4s cubic-bezier(.19,.1,.91,.53) forwards;

}

#menu-toggle.close:hover span:nth-child(2) {
  -webkit-animation: moveLeftToRightAndRightToLeft .4s cubic-bezier(.19,.1,.91,.53) forwards;
  -moz-animation: moveLeftToRightAndRightToLeft .4s cubic-bezier(.19,.1,.91,.53) forwards;
  -ms-animation: moveLeftToRightAndRightToLeft .4s cubic-bezier(.19,.1,.91,.53) forwards;
  -o-animation: moveLeftToRightAndRightToLeft .4s cubic-bezier(.19,.1,.91,.53) forwards;
  animation: moveLeftToRightAndRightToLeft .4s cubic-bezier(.19,.1,.91,.53) forwards;
  
  -webkit-animation-delay: .1s; /* Chrome, Safari, Opera */
    animation-delay: .1s;
}

#menu-toggle.close:hover span:nth-child(4) {
  -webkit-animation: moveLeftToRightAndRightToLeft2 .4s cubic-bezier(.19,.1,.91,.53) forwards;
  -moz-animation: moveLeftToRightAndRightToLeft2 .4s cubic-bezier(.19,.1,.91,.53) forwards;
  -ms-animation: moveLeftToRightAndRightToLeft2 .4s cubic-bezier(.19,.1,.91,.53) forwards;
  -o-animation: moveLeftToRightAndRightToLeft2 .4s cubic-bezier(.19,.1,.91,.53) forwards;
  animation: moveLeftToRightAndRightToLeft2 .4s cubic-bezier(.19,.1,.91,.53) forwards;
  
  -webkit-animation-delay: .2s; /* Chrome, Safari, Opera */
    animation-delay: .2s;
}

#menu-toggle.open span:nth-child(1), #menu-toggle.open span:nth-child(4) {
  top: 20px;
  opacity:0;
}
#menu-toggle.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  
   -webkit-transition-delay: .25s; /* Safari */
   transition-delay: .25s; 
}
#menu-toggle.open span:nth-child(3) {
	opacity: 1;
	
 -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  
   -webkit-transition-delay: .25s; /* Safari */
    transition-delay: .25s;
}


@keyframes moveLeftToRightAndRightToLeft {
  0% {
    left:9px;
    width:23px;
    opacity:.8;
  }
  50% {
    left:32px;
    width:0px;
    opacity:1;
  }
  51% {
    left:9px;
    width:0px;
  	opacity:0;
  }
  52% {
    left:9px;
    width:0px;
  	opacity:1;
  }
  100% {
    left:9px;
    width:23px;
    opacity:1;
  }
}
@keyframes moveLeftToRightAndRightToLeft2 {
  0% {
    left:9px;
    width:13px;
    opacity:.8;
  }
  50% {
    left:22px;
    width:0px;
    opacity:1;
  }
  51% {
    left:9px;
    width:0px;
  	opacity:0;
  }
  52% {
    left:9px;
    width:0px;
  	opacity:1;
  }
  100% {
    left:9px;
    width:23px;
    opacity:1;
  }
}

@-webkit-keyframes moveLeftToRightAndRightToLeft /* Safari and Chrome */ {
  0% {
    left:9px;
    width:23px;
    opacity:.8;
  }
  50% {
    left:32px;
    width:0px;
    opacity:1;
  }
  51% {
    left:9px;
    width:0px;
  	opacity:0;
  }
  52% {
    left:9px;
    width:0px;
  	opacity:1;
  }
  100% {
    left:9px;
    width:23px;
    opacity:1;
  }
}
@-webkit-keyframes moveLeftToRightAndRightToLeft2 {
  0% {
    left:9px;
    width:13px;
    opacity:.8;
  }
  50% {
    left:22px;
    width:0px;
    opacity:1;
  }
  51% {
    left:9px;
    width:0px;
  	opacity:0;
  }
  52% {
    left:9px;
    width:0px;
  	opacity:1;
  }
  100% {
    left:9px;
    width:13px;
    opacity:1;
  }
}

.header-line{
	position:fixed;
	width:21px;
	height:1px;
	top:50px;
	left:50%;
	margin-left:-10px;
	background-color:#c1aa77;
	z-index: 100;
}

#menu-close{
	position:absolute;
	width:30px;
    height:30px;
    top: 60px;
    left:40px;
	background: url(../images/common/menu_close.png) no-repeat 0 0;
	cursor:pointer;
}

#logo-details{
	position:fixed;
	width:78px;
	height:99px;
	top:140px;
	left:12.5%;
	z-index: 100;
	margin-left: -39px;
	visibility:hidden;
	display:none;
	opacity:0;
}



.nav .top-shape .shape{
	width:16px;
	height:29px;
	background:url('../images/common/menu-filet.png') no-repeat center bottom;
}
.nav .bottom-shape .shape{
	width:16px;
	height:29px;
	background:url('../images/common/menu-filet.png') no-repeat center top;
}

.details {
	display:block;
	position:absolute;
	width:200px;
	height:24px;
	bottom:150px;
	background-color:transparent;
	font-family:'Eurostile LT W01 Bold C1391138';
    font-size:11px;
    color: #fff;
    display: block;
    letter-spacing:0.2em;
    text-align:center;
    text-transform:uppercase;
	left:50%;
	margin-left:-100px;
}
.details {
	display:block;
	position:absolute;
	width:200px;
	height:24px;
	top:75%;
	background-color:transparent;
	font-family:'Eurostile LT W01 Bold C1391138';
    font-size:11px;
    color: #fff;
    display: block;
    letter-spacing:0.2em;
    text-align:left;
    text-transform:uppercase;
	left:50%;
	margin-left:0px;
}
.details a{
	color: #c2aa77;
	text-decoration:none;
}

/*Update Components css*/
.cl-effect-5 a{
	height:50px;
}
.cl-effect-5 a span:before {
    font-weight: normal;
}
@media (max-width: 980px) {
	.nav li {
	    height: 32px;
	    line-height: 36px;
	}
	.nav li a {
	  font-size:36px;
	}
	.cl-effect-5 a {
	    height: 36px;
	}
	.menu-over .over-title {
	    line-height: 36px;
	}
	.menu-over .line {
	    top: 19px;
	}
}
@media (max-width: 767px) {
	#logo-spindrift {
	    width:146px;
		height:35px;
		top:25px;
		left:20px;
	}
	#menu-toggle {
	  top:20px;
	  right:20px;
	}
	.menu-over{
		display:none;
	}
	.nav{
		left:20%;
		width:80%;
	}
	.details {
		top:75%;
		left:31%;
	}
}
@media (max-width: 680px) {
	.menu-over{
		display:none;
	}
	.nav{
		left:10%;
		width:90%;
	}
	.details {
		top:75%;
		left:16%;
	}
}
@media (max-width: 480px) {
	.header-line{
		display:none;	
	}
	#logo-spindrift {
	    top:20px;
		left:20px;
	}
	#menu-toggle {
	  top:10px;
	  right:10px;
	}
	.nav{
		top:44%;
	}
	.nav li {
	    height: 25px;
	    line-height: 30px;
	    top:45%;
	}
	.nav li a {
	  font-size:26px;
	}
	.cl-effect-5 a {
	    height: 30px;
	}
	.languages-wide{
		display:none;
	}
	.languages-mob{
		display:block;
	}
	.details {
		top:70%;
		left:17%;
	}
}