﻿.float-panel { width:100%; transition:all 0.7s;}
.fixed { border:none; animation:slide-down 0.7s;}
.fixed .fa-gg { transform:rotate(360deg);}
.fixed { width:100% !important; float:left; background:linear-gradient(0deg, rgba(218,189,110,1) 0%, rgba(208,174,94,1) 30%, rgba(198,157,75,1) 100%); box-shadow:0px 6px 12px -4px rgba(0,0,0,0.24); margin:0 0 0 !important; padding:12px 0 12px; left:0; right:0; z-index:999999;}
.scroll { width:100%; float:left; margin:0 0 0;}

.hamburger .scroll {width: 77px !important; background: none; box-shadow: none; top: 20px !important; left: 318px; padding: 0;}

@keyframes slide-down {  
0% { transform:translateY(-100%);}
100% { transform:translateY(0);}
}
/* ---------------- For Animation on Scroll ---------------- */
.slideanim { visibility: hidden; visibility: visible\9;/*For old IE browsers IE6-8 */ }
.slideanim.slide { visibility: visible; animation: slide 1s; }
.slideanim::after { /* useful when its child elements are float:left; */
content: ""; display: table; clear: both; }
@keyframes slide {
0% { transform:translateY(50%);}
100% { transform:translateY(0);}
}

.stikerdrive .sticyyy-menu > .scroll.float-panel.fixed {padding: 0;box-shadow: none;}
.stikerdrive .sticyyy-menu .menu-col2 {float: right; margin: 0 10px 0 0;}

.stikerdrive .sticyyy-menu .sticky-row1 {display: inline-block; float: right; margin: 2px 2% 6px 0;}
.stikerdrive .sticyyy-menu .sticky-row1 .sticky-btn2 {width: 120px; float: none; padding: 12px 2% 12px 2%; text-align: center; font-size: 13px; font-weight: 700; letter-spacing: normal; line-height: normal; background: none; border: 1px solid rgba(255, 255, 255, 0); border-radius: 26px; transition: all 0.25s ease-out 0s; display: inline-block; position: relative; z-index: 9; color: #ffffff;}
.stikerdrive .sticyyy-menu .sticky-row1 .sticky-btn2:hover {color: #000000;}

/*Smartphone css*/
@media screen and (max-width: 480px) {
.float-panel { transform:none; transition:none;}
.fixed { width:100% !important; background:none; border-bottom:none; position:relative !important; box-shadow:none !important; animation:none !important; padding:0 !important;}
.scroll { width:100%;}
.menu-col1 .fixed { width:102px !important; left:0;}
.menu-col1 .scroll { width:102px;}

.stikerdrive {width: 100%; display: block; float: left; background: #f0f0f0;}
.stikerdrive .sticyyy-menu {width: 100%; float: left; display: block; padding: 7px 0 3px;}
.stikerdrive .sticyyy-menu .hamburger {top: 10px; left: 3%;}
.stikerdrive.extra-class .sticyyy-menu {position: fixed; top: 0; z-index: 999; background: #f0f0f0;}

.stikerdrive .sticyyy-menu > .scroll.float-panel.fixed {width: auto !important;}

.hamburger .scroll.fixed {right: inherit; left: 0; top: 0 !important;}

.menucame .stikerdrive.extra-class {z-index: 9999; position: relative;}
.menucame .stikerdrive.extra-class .sticyyy-menu {background: none;}
.menucame .stikerdrive.extra-class .sticyyy-menu .menu-col2 {display: none;}

.stikerdrive .sticyyy-menu .sticky-row1 .sticky-btn2 {width: 100px; font-size: 11px;}
.stikerdrive .sticyyy-menu .menu-col2 {margin: 2px 8px 0 0;}
.menucame .stikerdrive .sticyyy-menu .sticky-row1 {display: none;}

}

@media screen and (min-width:481px) and (max-width:600px) {
.float-panel { transform:none; transition:none;}
.fixed { width:100% !important; background:none; border-bottom:none; position:relative !important; box-shadow:none !important; animation:none !important; padding:0 !important;}
.scroll { width:100%;}
.menu-col1 .fixed { width:102px !important; left:0;}
.menu-col1 .scroll { width:102px;}

.stikerdrive {width: 100%; display: block; float: left; background: #f0f0f0;}
.stikerdrive .sticyyy-menu {width: 100%; float: left; display: block; padding: 7px 0 3px;}
.stikerdrive .sticyyy-menu .hamburger {top: 12px; left: 3%;}
.stikerdrive.extra-class .sticyyy-menu {position: fixed; top: 0; z-index: 999; background: #f0f0f0;}
.stikerdrive .sticyyy-menu .menu-col2 {margin: 4px 6px 0 0;}

.stikerdrive .sticyyy-menu > .scroll.float-panel.fixed {width: auto !important;}

.hamburger .scroll.fixed {right: inherit; left: 0; top: 0 !important;}

.menucame .stikerdrive.extra-class {z-index: 9999; position: relative;}
.menucame .stikerdrive.extra-class .sticyyy-menu {background: none;}
.menucame .stikerdrive.extra-class .sticyyy-menu .menu-col2 {display: none;}

.stikerdrive .sticyyy-menu .menu-col2 {margin: 5px 8px 0 0;}
.menucame .stikerdrive .sticyyy-menu .sticky-row1 {display: none;}

}

@media screen and (min-width:601px) and (max-width:767px) {
.float-panel { transform:none; transition:none;}
.fixed { width:100% !important; background:none; border-bottom:none; position:relative !important; box-shadow:none !important; animation:none !important; padding:0 !important;}
.scroll { width:100%;}
.menu-col1 .fixed { width:102px !important; left:0;}
.menu-col1 .scroll { width:102px;}

.stikerdrive {width: 100%; display: block; float: left; background: #f0f0f0;}
.stikerdrive .sticyyy-menu .menu-col2 {width: 32px; margin: 6px 10px 0 0;}
.stikerdrive .sticyyy-menu {width: 100%; float: left; display: block; padding: 7px 0 3px;}
.stikerdrive .sticyyy-menu .hamburger {top: 11px; left: 3%;}
.stikerdrive.extra-class .sticyyy-menu {position: fixed; top: 0; z-index: 999; background: #f0f0f0;}

.stikerdrive .sticyyy-menu > .scroll.float-panel.fixed {width: auto !important;}

.hamburger .scroll.fixed {right: inherit; left: 0; top: 0 !important;}

.menucame .stikerdrive.extra-class {z-index: 9999; position: relative;}
.menucame .stikerdrive.extra-class .sticyyy-menu {background: none;}
.menucame .stikerdrive.extra-class .sticyyy-menu .menu-col2 {display: none;}
.menucame .stikerdrive .sticyyy-menu .sticky-row1 {display: none;}

}

@media screen and (min-width:768px) and (max-width:900px) {
.fixed { padding:10px 0 9px;}
.menu-col1 .fixed { width:40px !important; padding:62px 0 12px;}
.menu-col1 .scroll { width:40px;}
.hamburger .scroll {left: 2%; width: 31px !important;}
}

@media screen and (min-width:901px) and (max-width:1024px) {
.fixed { padding:12px 0 11px;}
.menu-col1 .fixed { width:40px !important; padding:68px 0 12px;}
.menu-col1 .scroll { width:40px;}
.hamburger .scroll {left: 2%; width: 31px !important;}
}

@media screen and (min-width:1025px) and (max-width:1240px) {
.menu-col1 .fixed { width:40px !important; padding:74px 0 12px;}
.menu-col1 .scroll { width:40px;}
.hamburger .scroll {left: 1.75%;}
}

@media screen and (min-width:1241px) and (max-width:1340px) {
.menu-col1 .fixed { width:40px !important;}
.menu-col1 .scroll { width:40px;}
.hamburger .scroll {left: 1.75%;}
}

@media screen and (min-width:1341px) and (max-width:1440px) {
.menu-col1 .fixed { width:40px !important;}
.menu-col1 .scroll { width:40px;}
.hamburger .scroll {left: 1.25%;}
}

@media screen and (min-width:1441px) and (max-width:1900px) {
.hamburger .scroll {left: 3%;}
}