@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700');
/* menu button */
.menuBtn {
  height:35px;
  width:35px;
  position: absolute;
  right:20px;
  top:35px;
  z-index: 101;
}
.menuBtn > span {
  background-color: #000;
  border-radius: 1px;
  height: 6px;
  width: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -1px 0 0 -15px;
  transition: height 100ms;
}
.menuBtn > span:after,
.menuBtn > span:before {
  content: "";
  background-color: #000;
  border-radius: 1px;
  height: 6px;
  width: 100%;
  position: absolute;
  left: 50%;
  margin-left: -17px;
  transition: all 200ms;
}
.menuBtn > span:after {
  top: -10px;
}
.menuBtn > span:before {
  bottom: -10px;
}
.menuBtn.act > span {
  height: 0;
}
.menuBtn.act > span:after,
.menuBtn.act > span:before {
  background-color: #000;
  top: 1px;
}
.menuBtn.act > span:after {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.menuBtn.act > span:before {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
@media only screen and (min-width : 768px) and (max-width : 899px) {
.mainMenu {
background-color: #fff;
position: absolute;
left: 0;
top:14.5vw;
z-index: 100;
height:35%;
width: 100%;
display: table;
text-align: center;
opacity: 0;
transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
-webkit-transform: scale(0);
transform: scale(0);
border-top:1px solid#f3f3f3;
}
.menuBtn {
    height: 35px;
    width: 35px;
    position: absolute;
    right: 20px;
    top:55px;
    z-index: 101;
}
}
@media only screen and (min-width : 600px) and (max-width : 767px) {
.mainMenu {
background-color: #fff;
position: absolute;
left: 0;
top:17vw;
z-index: 100;
height:35%;
width: 100%;
display: table;
text-align: center;
opacity: 0;
transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
-webkit-transform: scale(0);
transform: scale(0);
border-top:1px solid#f3f3f3;
}
.menuBtn {
    height: 35px;
    width: 35px;
    position: absolute;
    right: 20px;
    top:50px;
    z-index: 101;
}
}
@media only screen and (min-width : 480px) and (max-width : 599px) {
.mainMenu {
background-color: #fff;
position: absolute;
left: 0;
top:22vw;
z-index: 100;
height:35%;
width: 100%;
display: table;
text-align: center;
opacity: 0;
transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
-webkit-transform: scale(0);
transform: scale(0);
border-top:1px solid#f3f3f3;
}
.menuBtn {
    height: 35px;
    width: 35px;
    position: absolute;
    right: 20px;
    top:50px;
    z-index: 101;
}
}
@media only screen and (min-width : 320px) and (max-width : 479px) {
.mainMenu {
background-color: #fff;
position: absolute;
left: 0;
top:24vw;
z-index: 100;
height:35%;
width: 100%;
display: table;
text-align: center;
opacity: 0;
transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
-webkit-transform: scale(0);
transform: scale(0);
border-top:1px solid#f3f3f3;
}
}
/* main menu block */
.mainMenu {
background-color: #fff;
position: absolute;
left: 0;
z-index: 100;
height:35%;
width: 100%;
display: table;
text-align: center;
opacity: 0;
transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
-webkit-transform: scale(0);
transform: scale(0);
border-top:1px solid#f3f3f3;
}
.mainMenu.act {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
.mainMenu.act ul li {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
list-style:none;
text-decoration:none;
outline:none;
text-align:left;
padding:0;
}
.mainMenu ul {
  display: table-cell;
  vertical-align: middle;
  width:100%;
  padding:0;
}
.mainMenu li {
  transition: all 400ms 510ms;
  opacity: 0;
  list-style:none;
  text-decoration:none;
  outline:none;
  text-align:left;
  width:100%;
}
.mainMenu li:nth-child(odd) {
  -webkit-transform: translateX(30%);
          transform: translateX(30%);
}
.mainMenu li:nth-child(even) {
  -webkit-transform: translateX(-30%);
          transform: translateX(-30%);
}
.mainMenu li:last-child {
  -webkit-transform: none;
          transform: none;
}
.mainMenu li a {
font-family: 'Open Sans', sans-serif;
  color: #000;
  display: inline-block;
  text-transform:uppercase;
  font-size:1.1em;
  font-weight:600;
  list-style:none;
  text-decoration:none;
  outline:none;
  text-align:left;
  padding: 10px 20px;
  border-bottom:1px solid#f3f3f3;
  width:100%;
}
.mainMenu li a:hover {
  color:#FFF;
  text-decoration:none;
  outline:none;
  background-color:#000;
  width:100%;
}
.mainMenu a.suBtn {
  color: #fff;
}
/* sign up button */
.suBtn {
  background-color: #000;
  padding: 10px 20px;
  width:100%;
}