@mixin between__retina($rmin, $rmax) { @media screen and (min-device-width: $rmin) and (max-device-width: $rmax) and (-webkit-min-device-pixel-ratio: 2) and (min-resolution: 192dpi) { @content; } } @mixin between($rmin, $rmax) { @media screen and (min-width: $rmin) and (max-width: $rmax) { @content; } } @mixin min__retina($minimum) { @media screen and (min-device-width: $minimum) and (-webkit-min-device-pixel-ratio: 2) and (min-resolution: 192dpi) { @content; } } @mixin max__retina($maximum) { @media screen and (min-device-width: $maximum) and (-webkit-min-device-pixel-ratio: 2) and (min-resolution: 192dpi) { @content; } } @mixin min($media){ @media(min-width:$media) { @content; } } @mixin max($media){ @media(max-width:$media) { @content; } } @mixin aspect-ratio($width, $height) { position: relative; &:before { display: block; content: ""; width: 100%; padding-top: ($height / $width) * 100%; } > img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } } $yellow:#ede9ce; // yellow$gray:#63706c; // gray$maroon:#945347; // maroon$dark-gray:#4f4f4f;$dark: #212121;$primary-font:'Cormorant Infant', serif;$secondary-font:'Open Sans', sans-serif;$tertiary-font:'Lato', sans-serif; $transition:all 300ms cubic-bezier(.21, .6, .35, 1); $size: 60px;$height: 20px;$width: 30px;$line-size: 3px;$line-color: #945347;$line-radius: $line-size;$to-translate: ($height - $line-size) / 2;$bounce: cubic-bezier(.87,-.50,.19,1.50); #theme4MobileHeader { background-color:#fff !important; display:block; height: 70px; display: flex; justify-content: space-between; position: fixed; z-index: 9999; .theme4Hamburger { padding:0; top:16px; right:10px; float:right; perspective: 800px; transform-origin: center; span { background-color:$dark; transform:rotate(0); perspective:200px !important; transition:all ease 0.2s; &:nth-child(2) { transform-origin: left; position: relative; top:0; } &:nth-child(3) { } &:nth-child(4) { transform-origin: left; } } &.open { span { &:nth-child(2) { transform:rotate(45deg); top: -3.8px; } &:nth-child(3) { background-color:transparent; } &:nth-child(4) { transform:rotate(-45deg); } } } &:hover { span { // transform:rotateY(180deg); } } } .smlogo { margin:10px; img { max-width: 50px; } }} div.global-menu { position: fixed; top:0; left:0; width:100%; margin:0 auto; float:none; height:100%; background:transparent; z-index: 9; visibility: hidden; opacity: 0; transition: all .35s ease-in-out; display: flex; justify-content: center; align-items: center; padding:0; perspective:800px; &.open { visibility: visible; opacity: 1; background-color: rgba(0,0,0, .6); .sm-menu { transform: rotateY(0); li { transform:translate3d(0, 0, 0); } } } .mobilemenu { display: none; } .sm-menu { transform-origin:left; flex-basis: 100%; padding:10px 30px !important; background-color:#fff; transition: all 0.35s ease-in-out; transform: rotateY(95deg); backface-visibility: hidden; height: 100vh; position: relative; top:70px; @for $i from 1 through 7 { li:nth-of-type(#{$i}) { transition: all 0.35s ease-in-out (0.1s * $i); } } li { list-style-type: none; padding: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); transform:translate3d(0, 20px, 0); &:first-child { a { border-top:0; } } a { padding: 10px 0; text-transform: capitalize; display: block; color: #333; text-decoration: none; font-size: 14px; font-weight: bold; transition:all ease .35s; border-bottom:1px solid rgba(51,51,51,.08); &:hover { color:rgba(51,51,51,.4); } .caret { border: 0; float: right; margin: 0; position: relative; left: -10px; &:before { content: '\f107'; font-family: fontawesome; } } } .dropdown-menu { padding: 0 10px; background: transparent; width: 100%; margin: 1px 0 15px !important; position: relative; box-shadow: none; border: 0; li { &:first-child { a { border-top:0; } } } li a:hover { background-color: #1b1b1b; } } } }}