File: /home/assibfaf/public_html/static/wp/header.css
.hamburger {
padding: 0 15px;
display: inline-block;
cursor: pointer;
height: 17px;
-webkit-transition-property: opacity,-webkit-filter;
transition-property: opacity,-webkit-filter;
transition-property: opacity,filter;
transition-property: opacity,filter,-webkit-filter;
-webkit-transition-duration: .25s;
transition-duration: .25s;
-webkit-transition-timing-function: linear;
transition-timing-function: linear;
font: inherit;
color: inherit;
text-transform: none;
background-color: transparent;
border: 0;
margin: 0;
overflow: visible
}
.hamburger:hover {
opacity: .7
}
.hamburger-box {
width: 30px;
height: 17px;
display: inline-block;
position: relative
}
.hamburger-inner {
display: block;
top: 50%;
margin-top: -1.5px
}
.hamburger-inner,.hamburger-inner:after,.hamburger-inner:before {
width: 30px;
height: 3px;
background-color: #FFFFFF;
border-radius: 5px;
position: absolute;
-webkit-transition-property: -webkit-transform;
transition-property: -webkit-transform;
transition-property: transform;
transition-property: transform,-webkit-transform;
-webkit-transition-duration: .15s;
transition-duration: .15s;
-webkit-transition-timing-function: ease;
transition-timing-function: ease
}
.hamburger-inner:after,.hamburger-inner:before {
content: "";
display: block
}
.hamburger-inner:before {
top: -7px
}
.hamburger-inner:after {
bottom: -7px
}
.hamburger--spin .hamburger-inner {
-webkit-transition-duration: .22s;
transition-duration: .22s;
-webkit-transition-timing-function: cubic-bezier(.55,.055,.675,.19);
transition-timing-function: cubic-bezier(.55,.055,.675,.19)
}
.hamburger--spin .hamburger-inner:before {
-webkit-transition: top .1s ease-in .25s,opacity .1s ease-in;
transition: top .1s ease-in .25s,opacity .1s ease-in
}
.hamburger--spin .hamburger-inner:after {
-webkit-transition: bottom .1s ease-in .25s,-webkit-transform .22s cubic-bezier(.55,.055,.675,.19);
transition: bottom .1s ease-in .25s,-webkit-transform .22s cubic-bezier(.55,.055,.675,.19);
transition: bottom .1s ease-in .25s,transform .22s cubic-bezier(.55,.055,.675,.19);
transition: bottom .1s ease-in .25s,transform .22s cubic-bezier(.55,.055,.675,.19),-webkit-transform .22s cubic-bezier(.55,.055,.675,.19)
}
.hamburger--spin.is-active .hamburger-inner {
-webkit-transform: rotate(225deg);
transform: rotate(225deg);
-webkit-transition-delay: .12s;
transition-delay: .12s;
-webkit-transition-timing-function: cubic-bezier(.215,.61,.355,1);
transition-timing-function: cubic-bezier(.215,.61,.355,1)
}
.hamburger--spin.is-active .hamburger-inner:before {
top: 0;
opacity: 0;
-webkit-transition: top .1s ease-out,opacity .1s ease-out .12s;
transition: top .1s ease-out,opacity .1s ease-out .12s
}
.hamburger--spin.is-active .hamburger-inner:after {
bottom: 0;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
-webkit-transition: bottom .1s ease-out,-webkit-transform .22s cubic-bezier(.215,.61,.355,1) .12s;
transition: bottom .1s ease-out,-webkit-transform .22s cubic-bezier(.215,.61,.355,1) .12s;
transition: bottom .1s ease-out,transform .22s cubic-bezier(.215,.61,.355,1) .12s;
transition: bottom .1s ease-out,transform .22s cubic-bezier(.215,.61,.355,1) .12s,-webkit-transform .22s cubic-bezier(.215,.61,.355,1) .12s
}
a,a:focus,a:hover {
text-decoration: none;
outline: 0
}
img {
max-width: 100%
}
ul {
padding: 0;
margin: 0;
list-style-type: none
}
.btn {
display: inline-block;
vertical-align: middle;
white-space: nowrap;
text-align: center;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-ms-touch-action: manipulation;
touch-action: manipulation;
text-decoration: none;
position: relative;
z-index: 1;
font-size: 16px;
font-weight: 700;
line-height: 18px;
border-radius: 7px;
padding: 12px 25px;
cursor: pointer
}
.btn--primary,.btn.orderNow {
color: #4f3700;
-webkit-box-shadow: 0 4px 6px rgba(190,132,0,.3);
box-shadow: 0 4px 6px rgba(190,132,0,.3);
border: 1px solid #be8400;
background-color: #fec137;
-webkit-transition: background-color .2s;
transition: background-color .2s
}
.btn--primary:hover,.btn.orderNow:hover {
background-color: #f5b015;
color: #4f3700
}
.btn--secondary {
-webkit-box-shadow: 0 4px 6px rgba(190,132,0,.3);
box-shadow: 0 4px 6px rgba(190,132,0,.3);
border-radius: 7px;
background-color: #fff;
color: #555
}
.btn--secondary:hover {
background-color: #f1f1f1;
color: #555
}
.btn--alternate,.btn--arrow,.btn--secondary {
-webkit-transition: background-color .2s;
transition: background-color .2s
}
.btn--alternate {
font-size: 16px;
font-weight: 700;
line-height: 18px;
-webkit-box-shadow: 0 4px 6px rgba(193,193,193,.3);
box-shadow: 0 4px 6px rgba(193,193,193,.3);
border: 1px solid #eaeaea;
background-color: #fafafa;
color: #2e5b74
}
.btn--alternate:hover {
background-color: #f0f0f0;
border-color: #d0d0d0;
color: #2e5b74
}
.btn--arrow {
-webkit-box-shadow: 0 4px 6px rgba(123,3,3,.3);
box-shadow: 0 4px 6px rgba(123,3,3,.3);
border: 1px solid #e64240;
border-radius: 7px;
background-color: #f65c50;
color: #fff
}
.btn--arrow:hover {
color: #fff;
background-color: #e64240
}
.header {
position: relative;
height: 80px
}
@media screen and (max-width: 1215px) {
.header {
height:50px
}
}
.header__content {
background-color: #313030;
border-bottom: 2px solid #000000;
position: absolute;
z-index: 100;
top: 0;
left: 0;
width: 100%
}
@media screen and (max-width: 1215px) {
.header__content {
position:fixed;
z-index: 107159;
-webkit-transition: .25s transform;
transition: .25s transform;
top: 0
}
}
.header__content.hidden {
-webkit-transform: translateY(-105%);
transform: translateY(-105%)
}
.header__content.visible {
-webkit-transform: translateY(0);
transform: translateY(0)
}
.header__content.sticky {
position: fixed;
-webkit-animation: fadeIn .17s;
animation: fadeIn .17s;
-webkit-box-shadow: 0 0 6px 1px rgba(0,0,0,.2);
box-shadow: 0 0 6px 1px rgba(0,0,0,.2)
}
.header__content.sticky .logo__svg--color {
fill: #ffffff
}
.header__main {
width: calc(1210px + 94px + 94px);
padding-left: 15px;
padding-right: 15px;
height: 80px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
margin: auto;
position: relative
}
@media screen and (max-width: 1450px) {
.header__main {
width:1170px
}
}
@media screen and (max-width: 1215px) {
.header__main {
width:auto;
height: 50px
}
.header__button {
padding: 7px 15px
}
.header__button a {
min-width: 190px
}
}
.header__button--orders {
margin-right: 19px;
margin-left: auto
}
@media screen and (max-width: 1215px) {
.header__button--orders {
margin-left:0;
margin-right: 0
}
}
.order-page-wrapper .header {
top: 0
}
@media screen and (min-width: 1216px) {
.mobile-nav {
display:none
}
}
@media screen and (max-width: 1215px) {
.mobile-nav {
margin-left:auto;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center
}
}
.mobile-nav .hamburger {
padding-right: 0
}
.mobile-nav__order-btn {
padding: 10px 19px;
color: #ffffff;
margin-right: 15px
}
@media screen and (max-width: 360px) {
.mobile-nav__order-btn {
padding:10px 14px;
display: none
}
}
.logo {
text-align: center;
z-index: 8
}
.logo__link {
display: inline-block;
width: 200px;
}
.logo__svg {
width: 135px;
height: 45px;
position: relative;
z-index: 2;
margin: 18px 0 0;
vertical-align: middle
}
@media screen and (max-width: 1450px) {
.logo__svg {
margin:0
}
}
@media screen and (max-width: 1215px) {
.logo__svg {
width:100px
}
}
.PdfContainer__close svg path,.logo__svg--color {
fill: #fff
}
@media screen and (max-width: 1450px) {
.logo__svg--color {
fill:#ffffff
}
}
@media screen and (max-width: 1215px) {
.logo__svg--color {
fill:#ffffff
}
}
.nav {
position: relative;
z-index: 6;
margin: 0 0 0 20px;
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1
}
@media screen and (max-width: 1450px) {
.nav {
margin:0
}
}
@media screen and (max-width: 1215px) {
.nav,.nav:before {
position:absolute;
left: 0;
width: 100%
}
.nav {
height: calc(100vh - 50px);
max-height: none;
z-index: 90;
max-width: none;
visibility: hidden;
top: 100%
}
.nav.is-active {
visibility: visible
}
.nav.is-active:before {
opacity: 1
}
.nav.is-active>ul {
-webkit-transform: translateX(0);
transform: translateX(0)
}
.nav:before {
height: 100%;
top: 0;
opacity: 0;
content: "";
background-color: rgba(0,0,0,.75);
-webkit-transition: .25s all;
transition: .25s all
}
.nav ul li:nth-last-child(2) {
margin-right: 0
}
}
.nav>ul {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center
}
@media screen and (max-width: 1215px) {
.nav>ul {
height:100%;
position: absolute;
top: 0;
width: 325px;
right: 0;
background-color: #313030;
-webkit-box-shadow: -1px 6px 2px 3px rgba(0,0,0,.15);
box-shadow: -1px 6px 2px 3px rgba(0,0,0,.15);
border-top: 2px solid #000000;
-webkit-transition: .5s all;
transition: .5s all;
-webkit-transition-delay: .15s;
transition-delay: .15s;
-webkit-transform: translateX(110%);
transform: translateX(110%);
max-height: calc(100vh - 50px);
overflow-y: auto;
padding-bottom: 45px;
display: block
}
}
.nav__item {
padding: 0 11px;
position: relative;
height: 80px;
line-height: 80px
}
@media screen and (max-width: 1215px) {
.nav__item {
width:100%;
height: auto;
line-height: normal;
padding: 10px 15px
}
}
.nav__item--phone {
display: none;
color: #ffffff;
font-size: 15px;
font-weight: 500;
line-height: 22px;
margin-top: auto
}
@media screen and (max-width: 1215px) {
.nav__item--phone {
display:block
}
}
.nav__item--phone a,.tabs__selector-item.tabs__selector-item--is-active .tabs__selector-item-text span {
font-weight: 700
}
.nav__item:not(.nav__item--dropdown)>a {
border-bottom: 1px solid transparent;
-webkit-transition: border-color .15s;
transition: border-color .15s
}
.nav__item:not(.nav__item--dropdown)>a:hover {
border-color: #ffffff;
color: #ffffff
}
.nav__item.nav__item--dropdown {
padding-right: 20px;
-webkit-transition: background-color .25s;
transition: background-color .25s
}
@media screen and (min-width: 1216px) {
.nav__item.nav__item--dropdown {
-webkit-transition-delay:.2s;
transition-delay: .2s
}
}
@media screen and (max-width: 1215px) {
.nav__item.nav__item--dropdown {
padding:0
}
}
.nav__item.nav__item--dropdown ul {
top: calc(100% + 2px);
left: 0;
-webkit-transition: all .25s;
transition: all .25s;
width: 600px;
background-color: #f5b015;
border: 2px solid #000000;
border-top: 0;
line-height: normal;
padding: 8px 0
}
@media screen and (min-width: 1216px) {
.nav__item.nav__item--dropdown ul {
position:absolute;
opacity: 0;
visibility: hidden;
-webkit-transition-delay: .2s;
transition-delay: .2s
}
}
@media screen and (max-width: 1215px) {
.nav__item.nav__item--dropdown ul {
display:none;
width: auto;
border: 0
}
.nav__item.nav__item--dropdown ul.active {
display: block
}
}
.nav__item.nav__item--dropdown ul li {
display: inline-block;
padding: 7px 15px;
width: 32%
}
@media screen and (max-width: 1215px) {
.nav__item.nav__item--dropdown ul li {
width:100%
}
}
.nav__item.nav__item--dropdown ul li a {
font-size: 14px;
font-weight: 400;
border-bottom: 1px solid transparent;
-webkit-transition: all .25s;
transition: all .25s
}
.nav__item.nav__item--dropdown ul li a:hover {
border-bottom-color: currentColor;
color: currentColor;
-webkit-transition: none;
transition: none
}
.nav__item.nav__item--dropdown>span {
cursor: pointer;
border-bottom: 1px solid transparent
}
@media screen and (max-width: 1215px) {
.nav__item.nav__item--dropdown>span {
display:block;
padding: 10px 15px;
cursor: pointer
}
}
.nav__item.nav__item--dropdown>span:before {
content: "";
position: absolute;
right: 6px;
top: 50%;
-webkit-transform: translateY(-50%) rotate(0deg);
transform: translateY(-50%) rotate(0deg);
display: inline-block;
width: 0;
height: 0;
border-style: solid;
border-width: 3px 4px 0;
border-color: currentColor transparent transparent
}
@media screen and (min-width: 1216px) {
.nav__item.nav__item--dropdown>span:before {
-webkit-transition:-webkit-transform .2s;
transition: transform .2s;
transition: transform .2s,-webkit-transform .2s;
-webkit-transition-delay: .2s;
transition-delay: .2s
}
}
@media screen and (max-width: 1215px) {
.nav__item.nav__item--dropdown>span:before {
-webkit-transform:translateY(0);
transform: translateY(0);
top: 20px;
right: 15px
}
}
@media screen and (min-width: 0\0) {
.nav__item.nav__item--dropdown>span:before {
-webkit-transform:translateY(0);
transform: translateY(0);
border-width: 4px
}
}
@media screen and (min-width: 1216px) {
.nav__item.nav__item--dropdown:hover {
background-color:#f5b015
}
.nav__item.nav__item--dropdown:hover ul {
opacity: 1;
visibility: visible
}
}
.nav a,.nav span {
display: inline-block;
color: #ffffff;
font-size: 15px;
font-weight: 700;
line-height: 22px
}
.nav a.btn {
color: #000000;
}