@import url(../wp-brilliance102/style-responsive.css);

/* Custom responsive styles for Wayne 2015 child theme go here */

/* Responsive Menu Plugin styles */
#responsive-menu-container {
    margin-top: 135px !important;
    z-index: 1 !important;
    height: 390px !important;
    width: 100% !important;
    font-family: freight-sans-pro, Verdana, sans-serif;
    font-size: 18px;
    position: absolute;
    background-color: rgba(0,0,0,0.9) !important;
    overflow-y: hidden;
}

.admin-bar #responsive-menu-container {
    padding-top: 46px;
}

#responsive-menu-container #responsive-menu-wrapper {
    background-color: transparent;
}

#responsive-menu-button {
    overflow: visible;
    position: absolute;
}

button#responsive-menu-button:focus {
    outline-width: 0;
}

.responsive-menu-box {
    height: 38px !important;
}

#responsive-menu-button.is-active .responsive-menu-box:after {
    content: " ";
    display: block;
    clear: both; /* if you need to break floating elements */
    background-image:url(images/menu-up-arrow.svg);
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: 65%;
    height: 44px;
    opacity: 0.8;
}

#responsive-menu-button {
    top: 92px !important;
    right: 4% !important;
    background-color: #00358e !important;
    z-index: 7000 !important; /* Needs to be less than 8000, for fancybox compatibility */
    width: 35px;
    height: 38px;
}

.admin-bar #responsive-menu-button {
    margin-top: 32px;
}

#responsive-menu-button .threeLines {
    width: 25px !important;
    height: 16px !important;
    margin: auto !important
}

#responsive-menu-button .threeLines .line {
    height: 2px !important;
    margin-bottom: 5px !important;
    background: #FFFFFF !important;
    width: 100% !important
}

#responsive-menu-button .threeLines .line.last {
    margin-bottom: 0px !important
}

#responsive-menu-container #responsive-menu-search-box {
    margin-bottom: 20px !important;
    /* from old responsive-menu css */
    display: block;
    width: 95%;
    padding: 10px 0 10px 5% !important;
    clear: both;
    height: 40px;
    line-height: 40px;
}

#responsive-menu-container input.responsive-menu-search-box {
    width: 91%;
    padding: 5px 0px 5px 3%;
    -webkit-appearance: none;
    border-radius: 2px;
    border: 1px solid #3C3C3C;
    height: auto;
}

#responsive-menu-container .responsive-menu li a,
#responsive-menu-container #responsiveSearch {
    border-top: none !important;
}

#responsive-menu-container #responsiveSearchSubmit {
    background-color: transparent;
    background-image: url(images/magnifier-white.svg);
    background-repeat: no-repeat;
    background-size: 20px;
    background-position: 50% 20%;
    border: none;
    display: inline;
  	cursor: pointer;
    line-height: 0;
    font-size: 0;
    height: 35px;
    width: 7%;
}

#responsive-menu-container #responsive-menu li.responsive-menu-item .responsive-menu-item-link {
   font-size: 18px !important;
}

#responsive-menu-container li.responsive-menu-item a {
    padding: 8px 0px 8px 5% !important;
    height: auto !important;
    line-height: 20px !important;
}

#responsive-menu-container #responsive-menu li.responsive-menu-item a {
    border: none;
    border-bottom: none !important;
    background-color: transparent;
}


#responsive-menu-container #responsive-menu-additional-content {
    padding-top: 3px !important;
}

#mobile-menu-social-icons .sub-icons li {
    background: transparent;
    padding-right: 5px;
}

#mobile-menu-social-icons h3 {
    display: inline-block;
    text-transform: uppercase;
    font-size: 15px;
    color: white;
    vertical-align: top;
    margin-top: 10px;
    margin-right: 2px;
}

#mobile-menu-social-icons .sub-icons {
    display: inline-block;
    width: auto;
    float: none;
}

#mobile-menu-social-icons .sub-icons a {
    width: 32px;
    height: 32px;
}

@media only screen and (max-width: 62.5em) {
  #responsive-menu-button {
     top: 86px !important;
     width: 35px;
     height: 38px;
     position: absolute;
  }

  .admin-bar #responsive-menu-button {
      margin-top: 32px;
      width: 35px;
      height: 38px;
      position: absolute;
  }

  #responsive-menu-container {
      margin-top: 128px !important;
  }
}

@media only screen and (max-width: 782px) {
    .admin-bar #responsive-menu-button {
        margin-top: 46px;
    }
}

@media only screen and (max-width: 50em) {

    #header {
      padding-top: 10px;
      padding-bottom: 8px;
      box-shadow: none;
      height: 98px;
    }

    #head-content {
        margin-left: 0.5em;
    }

    #responsive-menu-button {
       top: 55px !important;
       width: 35px !important;
       height: 38px !important;
    }

    .click-menu-active #RM3Lines:after {
        height: 20px;
    }

    #responsive-menu-container {
        margin-top: 95px !important;
    }


}

@media only screen and (max-width: 25em) {
    #header {
        padding-bottom: 8px;
        box-shadow: none;
        height: 120px;
    }

    #responsive-menu-button {
       top: 77px !important;
    }

    .admin-bar #responsive-menu-button {
        margin-top: 46px;
    }

    #responsive-menu-container {
        margin-top: 115px !important;
    }

    .click-menu-active #RM3Lines:after {
        height: 19px;
    }


    .widget.socialicons .widget-wrap {
        text-align: left;
    }

    .widget.socialicons h3.widgettitle {
        float: left;
    }

    .widget.socialicons .textwidget {
        float: none;
    }


    .widget.subscribebox input.subscribe-email, .mysubscribebox input.subscribe-email {
        width: 180px;
    }

    .widget.subscribebox a.subicon.email-a-friend {
        margin-left: 35px;
    }

    .widget.featuredpage img.thumbnail.alignleft {
        float: left !important;
        margin-right: 10px !important;
    }

    /* -------------------[ Photos and Captions and Thumbnails ]------------------- */

    .entry .photo-wrap {
        margin: 20px 0 !important;
        float: none !important;
    }

    .wp-caption {
        max-width: 96% !important;
        width: auto !important;
    }

    .entry img {
        max-width: 96%;
    }

    /* -------------------[ Share Buttons ]------------------- */

    .share-buttons-top div.ssba {
        font-size: 0;
    }

    .share-buttons-bottom div.ssba {
        font-size: 0;
    }

     .share-buttons-top .ssba img {
        width: 28px !important;
        height: 28px !important;
    }

    .share-buttons-bottom .ssba img {
        width: 28px !important;
        height: 28px !important; /* Fix for IE squishing */
        margin-right: 10px;
        padding: 0;
    }

    .first-post-on-home .share-buttons-top .ssba img {
        margin-right: 8px;
        width: 25px !important;
        height: 25px !important;
    }


    .share-buttons-top a.ssba_facebook_share img {
        margin-left: 0;
    }

    .share-buttons-bottom a.ssba_facebook_share img {
        margin-left: 0;
    }

     .share-buttons-bottom .fcbk_share {
        left: 1px;
    }

}

/* Override styles in Responsive Menu plugin stylesheet */
button#responsive-menu-button {
  width: 35px !important;
  height: 38px !important;
  position: absolute !important;
}

@media screen and (max-width: 1000px) {
  button#responsive-menu-button {
    width: 35px !important;
    height: 38px !important;
    position: absolute !important;
  }
}

@media screen and (max-width: 1000px) {
  #responsive-menu-container {
    position: absolute !important;
  }
}

/* CMK12212017: Add code to fix bug where bottom of closed menu container is visible behind site header when user pulls down on screen.*/
#responsive-menu-container.slide-top {
    transform: translateY(-150%) !important;
    -ms-transform: translateY(-150%) !important;
    -webkit-transform: translateY(-150%) !important;
    -moz-transform: translateY(-150%) !important;
}

.responsive-menu-open #responsive-menu-container.slide-top {
    transform: translateY(0) !important;
    -ms-transform: translateY(0) !important;
    -webkit-transform: translateY(0) !important;
    -moz-transform: translateY(0) !important;
}