﻿.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:none; background:#fffdfa; margin:auto !important; padding:27px 0 24px; left:0; right:0; z-index:999999;}
.scroll { width:100%; float:none; margin:0 auto 0; position:relative;}
.fixed .header-let1 { width:206px; animation:slide-down 0.7s;}
.fixed .header-col2 { display:none;}
.fixed .header-col3 { display:none;}
.fixed .header-col4 { animation:slide-down 0.7s; margin:13px 0 0;}
.fixed .instagram-icon { display:none;}
.menuer-col1 .fixed { width:110px !important; background:none; left:inherit; right:0; top:10px !important;}
.menuer-col1 .scroll { width:110px;}


.hamburger .scroll.float-panel {
    width: 110px;
}

.hamburger .scroll.float-panel.fixed {
    width: 110px !important;
    right: 0 !important;
    left: inherit;
    background: transparent !important;padding: 32px 0 32px;
}


@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);}
}

/*Smartphone css*/
@media (max-width: 767px){
	.fixed .instagram-icon{ display: inline-block !important; }
}
@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%; position:relative;}
.menuer-col1 .fixed { width:100px !important; left:0; right:inherit;}
.menuer-col1 .scroll { width:100px;}
.fixed .header-let1 { width:100%; animation:none;}
.fixed .header-col2 { display:block;}
.fixed .header-col3 { display:block;}
.fixed .header-col4 { animation:none; margin:13px 0 0;}
.fixed .instagram-icon{ display: inline-block !important; }
}

@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%; position:relative;}
.menuer-col1 .fixed { width:100px !important; left:0; right:inherit;}
.menuer-col1 .scroll { width:100px;}
.fixed .header-let1 { width:100%; animation:none;}
.fixed .header-col2 { display:block;}
.fixed .header-col3 { display:block;}
.fixed .header-col4 { animation:none; margin:13px 0 0;}
}

@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%; position:relative;}
.menuer-col1 .fixed { width:100px !important; left:0; right:inherit;}
.menuer-col1 .scroll { width:100px;}
.fixed .header-let1 { width:100%; animation:none;}
.fixed .header-col2 { display:block;}
.fixed .header-col3 { display:block;}
.fixed .header-col4 { animation:none; margin:13px 0 0;}
}

@media screen and (min-width:768px) and (max-width:900px) {
.menuer-col1 .fixed { width:48px !important;}
.menuer-col1 .scroll { width:48px;}
.fixed .header-let1 { width:20%; margin: 0 0 0;}

.hamburger .scroll.float-panel { width:48px;}
.hamburger .scroll.float-panel.fixed { width: 48px !important; padding: 26px 0 26px;}


}

@media screen and (min-width:901px) and (max-width:1024px) {
.menuer-col1 .fixed { width:48px !important;}
.menuer-col1 .scroll { width:48px;}
.fixed .header-let1 { width:22%; margin: 0 0 0;}

.hamburger .scroll.float-panel { width:48px;}
.hamburger .scroll.float-panel.fixed { width: 48px !important; }

}

@media screen and (min-width:1025px) and (max-width:1240px) {
.menuer-col1 .fixed { width:48px !important;}
.menuer-col1 .scroll { width:48px;}
.fixed .header-let1 { width: 188px; margin: 0 0 0;}

.hamburger .scroll.float-panel { width:48px;}
.hamburger .scroll.float-panel.fixed { width: 48px !important; }

}

@media screen and (min-width:1241px) and (max-width:1440px) {
.menuer-col1 .fixed { width:48px !important;}
.menuer-col1 .scroll { width:48px;}

.hamburger .scroll.float-panel { width:48px;}
.hamburger .scroll.float-panel.fixed { width: 48px !important; }

}