.menucontainer {
  padding: 0;
  max-width: auto;
  margin: 10px;
  text-align: center;
}

.main-menu {
  background: black;
  margin: 0;
  padding: 10px;
}

.menucontainer .menu-item {
  background: black;
  display: inline-block;
  margin: 0;
  padding: 0;
}

.main-menu .menu-item a {
	color: #000;
	display: block;
	text-decoration: none;
	text-transform: uppercase;
	overflow: visible;
	line-height: 20px;
	font-size: 24px;
}


.three-d span,
.three-d span::before,
.three-d span::after{  
	display: block;
	transition: all .3s ease-out;
	-webkit-transform-style: preserve-3d;
	        transform-style: preserve-3d;
}

.three-d {
	position: relative;
	cursor: pointer;
	transition: all .07s linear;
}
.three-d span{
  display: block;
	padding: 15px 10px;
  -webkit-perspective: -200px;
          perspective: -200px;
}

.three-d span::before, .three-d span::after {
	padding: 15px 10px;
    content: attr(title);
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	right: 0;
	background: #562f3d;
	box-sizing: border-box;
}

.three-d span::before {
  -webkit-transform: rotateX(0deg) translateZ(25px);
          transform: rotateX(0deg) translateZ(25px);
}

.three-d span::after {
	-webkit-transform: rotateX(-90deg) translateZ(25px);
	        transform: rotateX(-90deg) translateZ(25px);
  background: #e2d9dc;
  color: #6c3461;
}

.three-d:hover span, 
.three-d:focus span{
  -webkit-transform: translateZ(-25px) rotateX(90deg);
          transform: translateZ(-25px) rotateX(90deg);
}

.logo-box {
  float: left;
  margin-right: 20px;
}
.logo-box a {
  outline: none;
  display: block;
}
.logo-box img {display: block;}
nav {
  overflow: hidden;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
  float: right;
}
ol {
  list-style: none;
  margin: 0;
  padding: 0;
  float: left;
}
nav li {
  display: inline-block;
  margin-left: 25px;
  height: 60px;
  line-height: 50px;
}
nav a {
  text-decoration: none;
  display: block;
  position: relative;
  color: #000;
  text-transform: uppercase;
}
nav a:after {
  content: "";
  width: 0;
  height: 2px;
  position: absolute;
  left: 0;
  bottom: 15px; 
}
nav a:hover:after {width: 100%;}

@media screen and (max-width: 660px) {
  .logo-box {
    float: none;
    display: inline-block;
    margin: 0 0 10px 0;
  }
  ul {float: none;}
  nav li:first-of-type {margin-left: 0;}
}
@media screen and (max-width: 550px) {
nav {overflow: visible;}
nav li {
  display: block;
  margin: 0;
  height: 40px;
  line-height: 40px;
}
nav li:hover {background: rgba(0,0,0,.1);}
nav a:after {content: none;}
}

/* Border from Y to X  */
div.borderYtoX a:before, div.borderYtoX a:after
{
    position: absolute;
    opacity: 0;
    height: 100%;
    width: 2px;
    content: '';
    background: #000;
    transition: all 0.3s;
	background-color: #FFFF00;
    -webkit-animation: moveFromBottom 500ms ease;
    -moz-animation: moveFromBottom 500ms ease;
    -ms-animation: moveFromBottom 500ms ease;
}

div.borderYtoX a:before
{
    left: 0px;
    top: 0px;
	background-color: #ff2020;
    -webkit-animation: moveFromBottom 500ms ease;
    -moz-animation: moveFromBottom 500ms ease;
    -ms-animation: moveFromBottom 500ms ease;
}

div.borderYtoX a:after
{
    right: 0px;
    bottom: 0px;
	background-color: #ff2020;
    -webkit-animation: moveFromBottom 500ms ease;
    -moz-animation: moveFromBottom 500ms ease;
    -ms-animation: moveFromBottom 500ms ease;
}

div.borderYtoX a:hover:before, div.borderYtoX a:hover:after
{
    opacity: 1;
    height: 2px;
    width: 100%;
	background-color: #FFFF00;
    -webkit-animation: moveFromBottom 500ms ease;
    -moz-animation: moveFromBottom 500ms ease;
    -ms-animation: moveFromBottom 500ms ease;
}
.menu-animate-top
{
	position:relative;
	animation:animatetop 6s
}
@keyframes animatetop
{
	from{top:-300px;opacity:0} to{top:0;opacity:2}}
}

		/*jssor slider loading skin spin css*/
        .jssorl-009-spin img {
            animation-name: jssorl-009-spin;
            animation-duration: 1.6s;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
        }

        @keyframes jssorl-009-spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

		/*jssor slider arrow skin 106 css*/
        .jssora106 {display:block;position:absolute;cursor:pointer;}
        .jssora106 .c {fill:#fff;opacity:.3;}
        .jssora106 .a {fill:none;stroke:#000;stroke-width:350;stroke-miterlimit:10;}
        .jssora106:hover .c {opacity:.5;}
        .jssora106:hover .a {opacity:.8;}
        .jssora106.jssora106dn .c {opacity:.2;}
        .jssora106.jssora106dn .a {opacity:1;}
        .jssora106.jssora106ds {opacity:.3;pointer-events:none;}

        /*jssor slider thumbnail skin 101 css*/
        .jssort101 .p {position: absolute;top:0;left:0;box-sizing:border-box;background:#111;}
        .jssort101 .p .cv {position:relative;top:0;left:0;width:100%;height:100%;border:2px solid #111;box-sizing:border-box;z-index:1;}
        .jssort101 .a {fill:none;stroke:#fff;stroke-width:400;stroke-miterlimit:10;visibility:hidden;}
        .jssort101 .p:hover .cv, .jssort101 .p.pdn .cv {border:none;border-color:transparent;}
        .jssort101 .p:hover{padding:2px;}
        .jssort101 .p:hover .cv {background-color:rgba(250,245,245,6);opacity:.35;}
        .jssort101 .p:hover.pdn{padding:0;}
        .jssort101 .p:hover.pdn .cv {border:2px solid #fff;background:none;opacity:.35;}
        .jssort101 .pav .cv {border-color:#fff;opacity:.35;}
        .jssort101 .pav .a, .jssort101 .p:hover .a {visibility:visible;}
        .jssort101 .t {position:absolute;top:0;left:0;width:100%;height:100%;border:none;opacity:.6;}
        .jssort101 .pav .t, .jssort101 .p:hover .t{opacity:1;}