@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); #theme5MobileHeader { position: fixed; height: 70px; overflow: visible; z-index: 9999; background-color:#000; .smlogo { padding:10px; img { max-width: 60px; } }}.menu-icon-wrapper { display: inline-block; background:#fff; width: 45px; height: 45px; position:relative; z-index: 1; border-radius: 50%; margin-right: 10px; margin-top: 10px; float:right; transition: all ease 0.3s; @include max(340px) { margin-top:0 !important; } &.open { background:#eee; } } .menu-icon { height: 12px; width: 18px; z-index: 999; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); } .m__overlay { height: 25px; width: 25px; right:20px; top:20px; border-radius:100%; background:#fff; position:fixed; z-index: 0; transform: scale(1); // transition: all .4s cubic-bezier(.215,.61,.355,1); // transform 0.3s cubic-bezier(.21, .6, .35, 1); // transition: transform 600ms cubic-bezier(0.25, 0.46, 0.33, 0.98); transition: transform 600ms ease-in-out; overflow: hidden; @include max(991px) { top:20px; } } .m__overlay.open { transform: scale(100); } /* HAMBURGER MENU */.menu-icon { cursor: pointer; & .icon { display: inline-block; position: absolute; top: 50%; width: 100%; height: 2px; margin-top: -1px; margin-bottom: -1px; background-color: $dark; transition: 0.3s ease-in-out; } &:before, &:after { content: ''; position: absolute; display: inline-block; width: 100%; height: 2px; background-color:$dark; transition: 0.3s ease-in-out; } &:before { top: 0; } &:after { bottom: 0; } &.open { .icon { opacity: 0; } &:before, &:after { top: 50%; margin-top: -1px; transform-origin: center center; } &:before { transform: rotate(45deg); } &:after { transform: rotate(-45deg); } &:hover { &:before { transform: rotate(-45deg); } &:after { transform: rotate(45deg); } } }}div.global-menu { position: fixed; top:70px; left:0; width:100%; margin:0 auto; float:none; height:100%; background:transparent; z-index: 99999; 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; .sm-menu { li { transform:translate3d(0, 0, 0); } } } .mobilemenu { display: none; } .sm-menu { transform-origin:left; flex-basis: 100%; padding:10px 30px !important; background-color:transparent; 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; } } } }}