header, .fdb-block{
    background-color: inherit;
}
header{
    padding: 20px;
}
header .navbar-nav a.nav-link:hover{
    color: #777;
}
.fr-popup.fr-desktop.fr-active{
	width: 240px;
}
.fr-box.fr-basic .fr-element{
    /*this is using Lato, font-family from froala design blocks*/
    font-family: inherit;
}
.social-icons-footer-froala{
    display: inline;
}
footer.dark-panel, footer.dark-panel a, header.dark-panel .navbar-nav .active a.nav-link, header.dark-panel .navbar-nav a.nav-link, header.dark-panel .navbar-nav a.nav-link:hover,
#footerfroala .dark-panel, #footerfroala .dark-panel a, #footerfroala .dark-panel *{
	color: white;
}

.btn-primary-custom, .btn-primary-custom:hover{
    color: #fff;
    background-color:  #F85A35;
    border-color: #F85A35;
}

.btn-outline-primary-custom, .btn-outline-primary-custom:hover{
    color: #F85A35;
    background-color: transparent;
    background-image: none;
    border-color: #F85A35;
}

h3, .h3{
    font-size: 1.75rem !important;
}

/*make the initial placeholder called 'Logo' use its natural width 126x33 px, don't strech out */
.fr-view nav.navbar .navbar-brand img[src^="https://images.littlebig.shop/common/shop_logo.png"] {
  width: auto;
}
/*otherwise, set an initial width to the logo until they resize it and their dimensions will get added*/
/* the first time, the styles will load from here until it gets resized by the editor and the attributes would apply then */
.fr-view nav.navbar .navbar-brand img {
    width: 308px; /*equivalent to col-2 and width that is set in the shop side when the user has not published any page */
    height: auto;
}