.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:22px 0 24px; left:0; right:0; z-index:999999;}

.scroll { width:100%; float:none; margin:0 auto 0; position:relative;}

.fixed .header-let1 { width:150px; 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;}

.menuer-col1 .fixed { width:140px !important; background:none; left:inherit; right:0;}

.menuer-col1 .scroll { width:140px;}

.hamburger .scroll.fixed{
    width: 95px !important;
    right: 0%;
    background: 0 0;
    top: 25px !important;
    padding: 0;
    position: fixed;
    float: right;
    margin: inherit;
    left: unset;
    background-color:#91CEC4;
    border-radius: 20px 0px 0px 20px;
}

  


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

.hamburger .scroll.fixed {top: 0 !important; border-radius: inherit;}

}



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

.hamburger .scroll.fixed {top: 0 !important; border-radius: inherit;}

}



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

.hamburger .scroll.fixed {top: 0 !important; border-radius: inherit;}

}



@media screen and (min-width:768px) and (max-width:900px) {

.menuer-col1 .fixed { width:48px !important;}

.menuer-col1 .scroll { width:48px;}

.hamburger .scroll.fixed{width: 50px !important;}

}



@media screen and (min-width:901px) and (max-width:1024px) {

.menuer-col1 .fixed { width:50px !important;}

.menuer-col1 .scroll { width:50px;}

.hamburger .scroll.fixed{width: 50px !important;}

}



@media screen and (min-width:1025px) and (max-width:1240px) {

.menuer-col1 .fixed { width:50px !important;}

.menuer-col1 .scroll { width:50px;}

.hamburger .scroll.fixed{width: 50px !important;}

}



@media screen and (min-width:1241px) and (max-width:1440px) {

.menuer-col1 .fixed { width:60px !important;}

.menuer-col1 .scroll { width:60px;}
.hamburger .scroll.fixed{width: 50px !important;}

}

@media screen and (min-width:1441px) and (max-width:1540px) {

.menuer-col1 .fixed { width:115px !important;}

.menuer-col1 .scroll { width:115px;}

}


@media screen and (min-width: 1541px) {

.menuer-col1 .fixed { width:165px !important;}

.menuer-col1 .scroll { width:165px;}

}