// Overlay // //

.overlay-active {

overflow: hidden;

}

// Vendor prefixes $sass-burger-add-vendor-prefixes: true !default;

// Burger @mixin burger($width: 30px, $height: 5px, $gutter: 3px, $color: #000, $border-radius: 0, $transition-duration: .3s) {

$burger-height: $height !global;
$burger-gutter: $gutter !global;

position: relative;
margin-top: $height + $gutter;
margin-bottom: $height + $gutter;

@if $sass-burger-add-vendor-prefixes {
    @include prefix(user-select, none, webkit moz ms);
}
user-select: none;

// 1. Fixes jagged edges in Firefox, see issue #10.
&, &::before, &::after {
    display: block;
    width: $width;
    height: $height;
    background-color: $color;
    outline: 1px solid transparent; // 1
    @if $border-radius != 0 {
        border-radius: $border-radius;
    }

    @if $sass-burger-add-vendor-prefixes {
        @include prefix(transition-property, background-color, webkit moz o);
    }
    transition-property: background-color, transform;

    @if $sass-burger-add-vendor-prefixes {
        @include prefix(transition-duration, $transition-duration, webkit moz o);
    }
    transition-duration: $transition-duration;
}

&::before, &::after {
    position: absolute;
    content: "";
}

&::before {
    top: -($height + $gutter);
}

&::after {
    top: $height + $gutter;
}

}

// Burger animations @mixin burger-to-cross($color: auto) {

& {
    background-color: transparent;
}
@if ($color != auto) {
    &::before, &::after {
        background-color: $color;
    }
}
&::before {
    @if $sass-burger-add-vendor-prefixes {
        @include prefix(transform, translateY($burger-gutter + $burger-height) rotate(45deg), webkit moz ms o);
    }
    transform: translateY($burger-gutter + $burger-height) rotate(45deg);
}
&::after {
    @if $sass-burger-add-vendor-prefixes {
        @include prefix(transform, translateY(-($burger-gutter + $burger-height)) rotate(-45deg), webkit moz ms o);
    }
    transform: translateY(-($burger-gutter + $burger-height)) rotate(-45deg);
}

}

.burger {

      display: inline-block;
      position: relative;
      width: 60px;
      height: 60px;
      z-index: 100;

span {
  @include burger(20px, 2px, 4px, $canalplus);
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -10px;
  margin-top: -1.5px;
}

&.clicked {
  span {
    @include burger-to-cross();

    &:before, &:after {
      background-color: $canalplus;
    }
  }
}

&.burger-dot {
  @include shadow;
  background: $white;
  border-radius: 50%;
}

&:hover {
  cursor: pointer;
}

}

// Overlay .overlay-menu {

    @include transition(.5s);
    @include translate(0,100%);
    visibility: hidden;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba($canalplus,.75);
    z-index: 90;
overflow: hidden;

    &.opened {
            @include translate(0,0);
            visibility: visible;
    }

}

.overlay-nav {

list-style: none;
padding: 0;

a {
    font-size: 30px;
    line-height: 2em;
}

}

.wrapper {

@include transition(.5s);

&.push {
        @include scale(.8);
}

}