#menu
{
  position: fixed;
  width: 100%;
  top: 0; left: 0;

  color: #000;
}

#menu .back
{
  position: relative;
  -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.25);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.25);
}

/* CONTACT */

#menu .contact
{
  -webkit-transition: height .25s ease-out;
  -moz-transition: height .25s ease-out;
  -o-transition: height .25s ease-out;
  transition: height .25s ease-out;

  overflow: hidden;
  background: #6E9BB1;

  height: 0;
  border-bottom: 1px solid #EEE;
}

#menu .contact .content
{
  position: relative;
  padding: 50px;
}

#menu .contact .contact_cls
{
  position: absolute;
  top: 30px; right: 25px;
  width: 25px; height: 25px;
  cursor: pointer;
}

#menu .contact .contact_cls svg
{
  fill: #FFF;
}

#menu .contact .info
{
  position: relative;
  width: 300px;
  max-width: 100%;
  margin: 0 auto;

  font-weight: 700;
  color: #FFF;
}

#menu .contact .info .column
{
  text-align: center;
  padding: 15px;
  border: 2px solid #EEE;
  font-size: 1.35em;

  margin-top: 15px;
}

#menu .contact .info .name
{
  font-family: serif;
  font-style: italic;
  font-weight: 100;
  font-size: .85em;
}

#menu .contact form
{
  position: relative;
  width: 700px;
  max-width: 100%;
  margin: 0 auto;
  margin-top: 50px;

  display: none;
}

#menu .contact input[type="text"],
#menu .contact input[type="email"],
#menu .contact textarea
{
  color: #6E9BB1;
}

#menu .contact input[type="text"],
#menu .contact input[type="email"]
{
  width: 100%;
  padding: 10px;
  background: #FFF;
  margin: 10px 0;

  border-radius: 2px;
}

#menu .contact .input
{
  margin: 10px 0;
}

#menu .contact input[type="checkbox"]
{
  vertical-align: middle;
  margin-right: 10px;
}

#menu .contact span { vertical-align: middle; }

#menu .contact textarea
{
  margin: 10px 0 0 0;
  padding: 10px;
  background: #FFF;
  width: 100%; height: 216px;
  max-width: 100%; max-height: 216px;
  border-radius: 2px;
  resize: none;
}

#menu .contact form .submit
{
  display: block;
  width: 130px;
  text-transform: uppercase;
  margin: 0 auto;
  color: #FFF;

  cursor: pointer;
}

#menu .contact form .submit .background{ background: #C67273; }
#menu .contact form .submit:hover{ color: #6E9BB1; }
#menu .contact form .submit:hover .background { background: #FFF; }
#menu .contact form .submit:active{ color: #FFF; }
#menu .contact form .submit:active .background { background-color: #5E8BA1; }

#menu .contact form .feedback
{
  margin: 25px 0 10px 0;
  color: #FFF;
}

/* DATA */

#menu .nav
{
  padding: 25px 25px;

  background-color: #FFF;

  border-bottom: 1px solid;
  border-color: inherit;
  border: none;
}

#menu .nav .logo
{
  position: absolute;
  display: inline-block;
}

#menu .nav .logo a
{
  display: block;
}

#menu .nav .logo svg
{
  display: inline-block;
  width: 62px; height: 50px;
  margin: -10px 0;
  vertical-align: middle;
}

#menu .nav .logo .text
{
  display: inline-block;
  margin-left: 20px;
  vertical-align: middle;
}

#menu .nav .logo .name
{

  font-size: 1.75em;
}

#menu .nav .logo .name .bold
{
  font-weight: 700;
}

#menu .nav .logo .slogan
{
  font-size: .5em;
  font-weight: 500;
  color: #A99602;
}

#menu .nav .buttons
{
  float: right;
  display: inline-block;
}

#menu .nav .deploy_btn
{
  position: relative;
  float: right;
  margin: 5px 0;
  cursor: pointer;
}

#menu .nav .deploy_btn .bars
{
  position: relative;
  width: 20px; height: 20px;
  vertical-align:  middle;
}

#menu .nav .deploy_btn .bar
{
	position: absolute;
	width: 20px; height: 2px;
	background-color: #000;
}

#menu .nav .content
{
  -webkit-transition: height .25s ease-out;
  -moz-transition: height .25s ease-out;
  -o-transition: height .25s ease-out;
  transition: height .25s ease-out;

  height: 0;
  overflow: hidden;
}

#menu .nav .items
{
  list-style: none;
  float: right;
}

#menu .nav .items li
{
  position: relative;
  font-size: 0.875em;
  color: #000;
  text-transform: uppercase;
  line-height: 30px;

  text-align: right;
}

#menu .nav .items li .circle
{
  display: none;
  position: absolute;
  width: 25px; height: 25px;
  background: #FFF;
  left: 50%; bottom: -37.5px;
  margin-left: -12.5px;
  border-radius: 100%;
}

#menu .nav .items li a:hover{ color: #C67273; }
#menu .nav .items li.active{ font-weight: 700; }
#menu .nav .items a.disabled{ color: #CCC; pointer-events: none; }

/* MENU DEPLOYED */

#menu.deployed .nav .deploy_btn{ display: block; }
#menu.deployed .nav .content{ height: 210px; }

/* MENU CONTACT */

#menu.contact .contact{ height: 350px; }

/* MEDIA QUERIES */

@media screen and (min-width: 768px) and (min-height: 768px)
{
  /* show form */

  #menu .contact .info { width: 700px; }
  #menu .contact .column { width: 47.5% !important; float: left; }
  #menu .contact .column.email { display: none; }
  #menu .contact .column:first-child { margin-right: 5%; }
  #menu .contact form { display: block; }
  #menu.contact .contact{ height: 525px; }
}

@media screen and (min-width: 1024px) and (min-height: 568px)
{
  /* show form */

  #menu .contact .info { width: 700px; }
  #menu .contact .column { width: 47.5% !important; float: left; }
  #menu .contact .column.email { display: none; }
  #menu .contact .column:first-child { margin-right: 5%; }
  #menu .contact form { display: block; }
  #menu.contact .contact{ height: 525px; }

  /* hide deploy functionality */

  #menu .nav .content { overflow: visible; }
  #menu .nav .deploy_btn, #menu.deployed .nav .deploy_btn{ display: none; }
  #menu .nav .content, #menu.deployed .nav .content{ height: auto; }
  #menu .nav .items li{ display: inline-block; margin-left: 25px;}
  #menu .nav .items li.active .circle{ display: block; }
}

/* WEBKIT */

@-webkit-keyframes bartopforwards
{
	0%{ -webkit-transform: translateY(0) rotate(0); }
	25%{ -webkit-transform: translateY(9px) rotate(0); }
	50%{ -webkit-transform: translateY(9px) rotate(45deg); }
	100%{ -webkit-transform: translateY(9px) rotate(45deg); }
}

@-webkit-keyframes barmiddleforwards
{
	0%{ -webkit-transform: rotate(0); opacity: 0; }
	25%{ -webkit-transform: rotate(0); opacity: 0; }
	50%{ -webkit-transform: rotate(45deg); opacity: 0; }
	100%{ -webkit-transform: rotate(45deg); opacity: 0; }
}

@-webkit-keyframes barbottomforwards
{
	0%{ -webkit-transform: translateY(0) rotate(0); }
	25%{ -webkit-transform: translateY(-9px) rotate(0); }
	50%{ -webkit-transform: translateY(-9px) rotate(45deg); }
	100%{ -webkit-transform: translateY(-9px) rotate(135deg); }
}

@-webkit-keyframes bartopbackwards
{
	0%{ -webkit-transform: translateY(9px) rotate(45deg); }
	25%{ -webkit-transform: translateY(9px) rotate(45deg); }
	50%{ -webkit-transform: translateY(9px) rotate(0); }
	100%{ -webkit-transform: translateY(0) rotate(0); }
}

@-webkit-keyframes barmiddlebackwards
{
	0%{ -webkit-transform: rotate(45deg); opacity: 1; }
	25%{ -webkit-transform: rotate(45deg); opacity: 1; }
	50%{ -webkit-transform: rotate(0); opacity: 1; }
	100%{ -webkit-transform: rotate(0); opacity: 1; }
}

@-webkit-keyframes barbottombackwards
{
	0%{ -webkit-transform: translateY(-9px) rotate(135deg); }
	25%{ -webkit-transform: translateY(-9px) rotate(45deg); }
	50%{ -webkit-transform: translateY(-9px) rotate(0); }
	100%{ -webkit-transform: translateY(0) rotate(0); }
}

/* MOZ */

@-moz-keyframes bartopforwards
{
	0%{ -moz-transform: translateY(0) rotate(0); }
	25%{ -moz-transform: translateY(9px) rotate(0); }
	50%{ -moz-transform: translateY(9px) rotate(45deg); }
	100%{ -moz-transform: translateY(9px) rotate(45deg); }
}

@-moz-keyframes barmiddleforwards
{
	0%{ -moz-transform: rotate(0); opacity: 0; }
	25%{ -moz-transform: rotate(0); opacity: 0; }
	50%{ -moz-transform: rotate(45deg); opacity: 0; }
	100%{ -moz-transform: rotate(45deg); opacity: 0; }
}

@-moz-keyframes barbottomforwards
{
	0%{ -moz-transform: translateY(0) rotate(0); }
	25%{ -moz-transform: translateY(-9px) rotate(0); }
	50%{ -moz-transform: translateY(-9px) rotate(45deg); }
	100%{ -moz-transform: translateY(-9px) rotate(135deg); }
}

@-moz-keyframes bartopbackwards
{
	0%{ -moz-transform: translateY(9px) rotate(45deg); }
	25%{ -moz-transform: translateY(9px) rotate(45deg); }
	50%{ -moz-transform: translateY(9px) rotate(0); }
	100%{ -moz-transform: translateY(0) rotate(0); }
}

@-moz-keyframes barmiddlebackwards
{
	0%{ -moz-transform: rotate(45deg); opacity: 1; }
	25%{ -moz-transform: rotate(45deg); opacity: 1; }
	50%{ -moz-transform: rotate(0); opacity: 1; }
	100%{ -moz-transform: rotate(0); opacity: 1; }
}

@-moz-keyframes barbottombackwards
{
	0%{ -moz-transform: translateY(-9px) rotate(135deg); }
	25%{ -moz-transform: translateY(-9px) rotate(45deg); }
	50%{ -moz-transform: translateY(-9px) rotate(0); }
	100%{ -moz-transform: translateY(0) rotate(0); }
}

/* O */

@-o-keyframes bartopforwards
{
	0%{ -o-transform: translateY(0) rotate(0); }
	25%{ -o-transform: translateY(9px) rotate(0); }
	50%{ -o-transform: translateY(9px) rotate(45deg); }
	100%{ -o-transform: translateY(9px) rotate(45deg); }
}

@-o-keyframes barmiddleforwards
{
	0%{ -o-transform: rotate(0); opacity: 0; }
	25%{ -o-transform: rotate(0); opacity: 0; }
	50%{ -o-transform: rotate(45deg); opacity: 0; }
	100%{ -o-transform: rotate(45deg); opacity: 0; }
}

@-o-keyframes barbottomforwards
{
	0%{ -o-transform: translateY(0) rotate(0); }
	25%{ -o-transform: translateY(-9px) rotate(0); }
	50%{ -o-transform: translateY(-9px) rotate(45deg); }
	100%{ -o-transform: translateY(-9px) rotate(135deg); }
}

@-o-keyframes bartopbackwards
{
	0%{ -o-transform: translateY(9px) rotate(45deg); }
	25%{ -o-transform: translateY(9px) rotate(45deg); }
	50%{ -o-transform: translateY(9px) rotate(0); }
	100%{ -o-transform: translateY(0) rotate(0); }
}

@-o-keyframes barmiddlebackwards
{
	0%{ -o-transform: rotate(45deg); opacity: 1; }
	25%{ -o-transform: rotate(45deg); opacity: 1; }
	50%{ -o-transform: rotate(0); opacity: 1; }
	100%{ -o-transform: rotate(0); opacity: 1; }
}

@-o-keyframes barbottombackwards
{
	0%{ -o-transform: translateY(-9px) rotate(135deg); }
	25%{ -o-transform: translateY(-9px) rotate(45deg); }
	50%{ -o-transform: translateY(-9px) rotate(0); }
	100%{ -o-transform: translateY(0) rotate(0); }
}

/* DEFAULT */

@keyframes bartopforwards
{
	0%{ transform: translateY(0) rotate(0); }
	25%{ transform: translateY(9px) rotate(0); }
	50%{ transform: translateY(9px) rotate(45deg); }
	100%{ transform: translateY(9px) rotate(45deg); }
}

@keyframes barmiddleforwards
{
	0%{ transform: rotate(0); opacity: 0; }
	25%{ transform: rotate(0); opacity: 0; }
	50%{ transform: rotate(45deg); opacity: 0; }
	100%{ transform: rotate(45deg); opacity: 0; }
}

@keyframes barbottomforwards
{
	0%{ transform: translateY(0) rotate(0); }
	25%{ transform: translateY(-9px) rotate(0); }
	50%{ transform: translateY(-9px) rotate(45deg); }
	100%{ transform: translateY(-9px) rotate(135deg); }
}

@keyframes bartopbackwards
{
	0%{ transform: translateY(9px) rotate(45deg); }
	25%{ transform: translateY(9px) rotate(45deg); }
	50%{ transform: translateY(9px) rotate(0); }
	100%{ transform: translateY(0) rotate(0); }
}

@keyframes barmiddlebackwards
{
	0%{ transform: rotate(45deg); opacity: 1; }
	25%{ transform: rotate(45deg); opacity: 1; }
	50%{ transform: rotate(0); opacity: 1; }
	100%{ transform: rotate(0); opacity: 1; }
}

@keyframes barbottombackwards
{
	0%{ transform: translateY(-9px) rotate(135deg); }
	25%{ transform: translateY(-9px) rotate(45deg); }
	50%{ transform: translateY(-9px) rotate(0); }
	100%{ transform: translateY(0) rotate(0); }
}

/* ANIMATION */

#menu .deploy_btn .bar.top
{
	top: 0; left: 0;

	-webkit-animation: bartopbackwards .5s forwards;
	-moz-animation: bartopbackwards .5s forwards;
	-o-animation: bartopbackwards .5s forwards;
	animation: bartopbackwards .5s forwards;
}

#menu .deploy_btn .bar.middle
{
	top: 9px; left: 0;

	-webkit-animation: barmiddlebackwards .5s forwards;
	-moz-animation: barmiddlebackwards .5s forwards;
	-o-animation: barmiddlebackwards .5s forwards;
	animation: barmiddlebackwards .5s forwards;
}

#menu .deploy_btn .bar.bottom
{
	bottom: 0; left: 0;

	-webkit-animation: barbottombackwards .5s forwards;
	-moz-animation: barbottombackwards .5s forwards;
	-o-animation: barbottombackwards .5s forwards;
	animation: barbottombackwards .5s forwards;
}

#menu.deployed .deploy_btn .bar.top
{
  top: 0; left: 0;

	-webkit-animation: bartopforwards .5s forwards;
	-moz-animation: bartopforwards .5s forwards;
	-o-animation: bartopforwards .5s forwards;
	animation: bartopforwards .5s forwards;
}

#menu.deployed .deploy_btn .bar.middle
{
	-webkit-animation: barmiddleforwards .5s forwards;
	-moz-animation: barmiddleforwards .5s forwards;
	-o-animation: barmiddleforwards .5s forwards;
	animation: barmiddleforwards .5s forwards;
}

#menu.deployed .deploy_btn .bar.bottom
{
  bottom: 0; left: 0;

	-webkit-animation: barbottomforwards .5s forwards;
	-moz-animation: barmiddleforwards .5s forwards;
	-o-animation: barmiddleforwards .5s forwards;
	animation: barmiddleforwards .5s forwards;
}