/*
You can add your own CSS here.

Click the help icon above to learn more.
*/
/************************* NAV ITEMS *******************************/
.association-nav.menu-item a {
        background-color: #F7D84B !important;
        color: #1E3954 !important;
        font-weight: 700;
}

.association-nav.menu-item a:hover {
        background-color: #ffe884 !important;
        color: #527599 !important;
}

/*******************************************************************/
/********** Seasonal Nav Buttons *************/
li.halloween-nav.menu-item > a {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffb868+0,ff9922+100 */
        background: #ffb868;
/* Old browsers */
        background: -moz-linear-gradient(top,#ffb868 0%,#ff9922 100%);
/* FF3.6-15 */
        background: -webkit-linear-gradient(top,#ffb868 0%,#ff9922 100%);
/* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom,#ffb868 0%,#ff9922 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffb868',endColorstr='#ff9922',GradientType=0);
/* IE6-9 */
        border: medium none;
        border-radius: 30px;
        box-shadow: 2px 2px 3px rgba(255,255,255,0.66)inset;
        font-size: 15px;
        margin: 9px 0 !important;
        padding: .8rem 1.3rem .7rem;
        color: #fff;
        font-weight: 400;
        letter-spacing: 3px;
}

li.halloween-nav.menu-item > a:hover {
        color: #000000 !important;
}

li.halloween-nav.menu-item.current-menu-item > a {
        color: #000000;
}

li.holidays-nav.menu-item > a {
        background: url("/wp-content/uploads/2016/12/falling-snowflakes-pattern-light.jpg") repeat scroll center center;
        background-size: cover;
        border: medium none;
        color: #1E3954;
        font-weight: 700;
        letter-spacing: 3px;
        box-shadow: 0 0 10px 5px #fff inset;
}

li.holidays-nav.menu-item > a:hover {
        background-color: #752c3e !important;
        color: #527599 !important;
}

li.holidays-nav.menu-item.current-menu-item > a {
        color: #527599 !important;
}

@media (max-width:768px) {
        li.halloween-nav.menu-item > a, li.holidays-nav.menu-item > a {
                font-size: 1.5rem !important;
                padding: 1.2rem;
                text-align: center;
                margin: 1rem 0 !important;
        }
}

/***** END 768px *****/
/***********************************/

/***** Author Box *****/
.author-box .avatar {
    width: 150px;
    height: auto;
    margin: 0 auto 1rem;
    display: block;
    float: none;
}
.author-box-title {
    text-align: center;
    font-size: 1.5rem;
    margin: 0 0 1rem;
}
/**********************/
/*********** Instagram widget grid ***********/
.instagram-pics > li {
        display: block;
        float: left;
        margin: 0;
        padding: 1px;
        width: 33.33%;
        box-sizing: border-box;
}

.instagram-pics > li a {
        display: block;
}

.instagram-pics > li img {
        margin: 0;
        display: block;
}

.null-instagram-feed p {
        text-align: center;
        display: inline-block;
        width: 100%;
        margin: .5rem 0 0;
}

@media (max-width:768px) {
        .instagram-pics > li {
                width: 50%;
        }
        .instagram-pics > li:last-child {
               display: none;
       }
}

/**********************/
/*********** Footer Widget Area Menus ***********/
.footer-widgets .widget_nav_menu {
        width: 50%;
        float: left;
}

.footer-widgets .widget_nav_menu .widget-title {
        margin-bottom: .5rem;
}

.footer-widgets .widget_nav_menu li {
        margin-bottom: .5rem;
}

@media (max-width:480px) {
        .footer-widgets .widget_nav_menu {
                width: 100%;
                float: none;
        }
}

/**********************/
/***** MISC CSS *****/
.mobile-only { display: none !important; }
@media (max-width:768px) {
        .mobile-only {display: inherit !important; }
        .desktop-only {display: none !important; }
}
/**********/

#fbMsg img {
    width: 100px !important;
    height: 100px !important;
}
@media (max-width:768px) {
	#fbMsg img{
    width: 70px !important;
    height: 70px !important;
}
}