/*  BURGER
========================================== */

.burger {
  width: 50px;
  height: 50px;
  position: fixed;
  top: 10px;
  right: 20px;
  z-index: 10;
}

.burger span {
  position: relative;
  margin-top: 9px;
  margin-bottom: 9px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -15px;
  margin-top: -1.5px;
}



.burger span, .burger span::before, .burger span::after {
  display: block;
  width: 30px;
  height: 3px;
  background-color: #ffffff;
  outline: 1px solid transparent;
  -webkit-transition-property: background-color, -webkit-transform;
  -moz-transition-property: background-color, -moz-transform;
  -o-transition-property: background-color, -o-transform;
  transition-property: background-color, transform;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
}

.burger span::before, .burger span::after {
  position: absolute;
  content: "";
}

.burger span::before { top: -9px; }

.burger span::after { top: 9px; }

.burger.clicked span { background-color: transparent; }

.burger.clicked span::before {
  -webkit-transform: translateY(9px) rotate(45deg);
  -moz-transform: translateY(9px) rotate(45deg);
  -ms-transform: translateY(9px) rotate(45deg);
  -o-transform: translateY(9px) rotate(45deg);
  transform: translateY(9px) rotate(45deg);
}

.burger.clicked span::after {
  -webkit-transform: translateY(-9px) rotate(-45deg);
  -moz-transform: translateY(-9px) rotate(-45deg);
  -ms-transform: translateY(-9px) rotate(-45deg);
  -o-transform: translateY(-9px) rotate(-45deg);
  transform: translateY(-9px) rotate(-45deg);
}

.burger.clicked span:before, .burger.clicked span:after { background-color: #ffffff; }

.burger:hover { cursor: pointer; }

header .nav-shrink .burger {top: 10px;right: 10px;}

@media (max-width:1000px) {

	.burger {top: 10px;right: 10px;}
	header .nav-shrink .burger {top: 10px;right: 0;}
}



@media (max-width:720px) {
	.burger {top: 0;right: 0;}
	.burger span, .burger span::before, .burger span::after {width: 25px; height:2px}
	header .nav-shrink .burger {top: 0;right: 0;}
}