.icon {display: inline-block;}
.icon-36 {width:36px; height:36px;}
.icon-32 {width:32px; height:32px;}
.icon-24 {width:24px; height:24px;}

.nav-desktop ul {padding:0; list-style: none; margin: 0; display: flex;}
.nav-desktop ul li:not(:last-child) {margin:0 20px 0 0;}

/* burger */
.btn.burger {background: none; padding: 5px 0;}
.burger span {display: block; height: 4px; background: #666; width: 24px;}
.burger span:not(:last-child) {margin-bottom: 4px;}
.burger.close {height:24px;}
.burger.close {height:24px;}
.close .burger span:first-child {transform: rotate(45deg) translate(9px, 3px);}
.close .burger span:last-child {transform: rotate(-45deg) translate(3px, 3px);}




.logo img, .logo a {display: inline-block; width:100%;}

.header-mobile {padding:5px 10px; background-color: #fff; align-items: center; justify-content: space-between;}
.header-mobile .logo {width: 120px;}
.header-mobile .controls {display: flex; gap:10px; align-items: center;}

.fixed-on-scroll {position:static;}
.header-mobile.fixed {position:fixed; left:0; right:0; top:0; box-shadow: 0 5px 10px rgba(0,0,0,.2); z-index: 120;}
.fixed-button {display: none;}
.fixed-button.fixed {top:10px; right:10px; width:50px; height:50px; border-radius: 25px; background-color: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.2); display: flex; align-items: center; justify-content: center; position: fixed;}

/* slide right fixed panel */
.nav-mobile {position: fixed; top:0; right:-100%; bottom:0; width: 300px; transition: all .3s; background-color: #f5f5f5; z-index:150; box-shadow: -10px 0 20px rgba(0,0,0,.2); padding:20px;}

.nav-mobile .logo {width:70%;}
.nav-mobile nav.main ul {flex-direction: column; align-items: flex-start !important; justify-content: flex-start; list-style: none; padding: 0;}
.nav-mobile nav.main ul li:not(:last-child) {margin-bottom: 10px;}
.nav-mobile nav.main ul li a:not(.btn) {padding:0;}
.nav-mobile.open {right:0; transition: all .3s; }
.nav-mobile .close {position: absolute; right:10px; top:10px; }

.social {gap:5px;}
.ms2Gallery .images {display: flex; flex-wrap: wrap; gap:1px;}
.ms2Gallery .image a, .ms2Gallery .image img {display: inline-block; width:100%;}

.footer {background: #444; color:#eee;}
.footer a {color: #aaa;}
.footer a:hover, .footer a:active {color: #fff;}

.footer-nav ul {list-style: none; padding: 0;}

@media (max-width: 576px) {
    .ms2Gallery .images .image {flex: 0 0 calc(33.3% - 1px);}
}
