/* Custom work from Monarch beginning June, 2017 */

img {
  /* Force height auto for better responsive image handling */
  height: auto !important;
}

body,
.menu-national-main-menu__list-item.-level-1:hover .-level-1,
.-level-1.menu-member-dashboard-menu__list-item:hover .-level-1,
.-level-1.menu-scholar-dashboard-menu__list-item:hover .-level-1,
.domain--national .menu-national-main-menu__link,
.domain--national .menu-member-dashboard-menu__link,
.domain--national .menu-scholar-dashboard-menu__link ,
.menu-national-main-menu__link,
.menu-member-dashboard-menu__link,
.menu-scholar-dashboard-menu__link {
  color: #333;
}

.logo img {
  max-height: 85px;
}
.domain--national .menu-national-main-menu {
  position: relative;
  top: 0.875em;
}

@media screen and (max-width: 900px) {
  .domain--national #menu_toggle:checked + .layout-header .menu-national-main-menu {
    right: 0;
    display: block;
    height: auto;
    opacity: 1;
  }
  
  .domain--national .menu-national-main-menu {
    position: relative;
    top: 0.875em;
    height: 0;
    transition: all 350ms linear;
    opacity: 0;
  }
}

/* Chapter title */
.domain--chapter .site-name {
  margin: 5px 0 0;
}
.site-name__inner div {
  display: inline-block;
}

.site-name__type,
.site-name__name {
  font-size: 1.125rem;
  color: #009ca6;
}

/* Create alternative login apparatus */
/* =============================== */

#login-button-container {
  height: 50px;
}

#login-button-container {
  cursor: pointer;
  margin-right: 6px;
}

.login-button-clicked {
  box-shadow: inset 0 0 10px #144393;
  background-color: #0073c3;
}

#login-button {
  border-right: none;
  margin-top: 7px;
  margin-bottom: 10px;
  padding-top: 6px;
  margin-left: 36px;
}

#login-chapter-menu {
  background-color: #ebe4d3;
  border-top: 10px solid #003087;
  color: #000;
  text-transform: uppercase;
  position: absolute;
  left: 100px;
  width: 300px;
  z-index: 9999;
  display: none;
}

.page--user-login section.layout-main a {
  text-decoration: underline;
}

.page--user-login #login-add-help {
  margin-top: 1em;
}

/* =============================== */
/* Changes to reduce vertical real estate of logn form. */
/* =============================== */

.page--user-login section.layout-main h4,
.page--user section.layout-main h4 {
  margin-top: -10px !important;
}

.page--user-login section.layout-page-title.page-title,
.page--user section.layout-page-title.page-title,
.page--user-login #breadcrumb_wrapper,
.page--user #breadcrumb_wrapper,
.page--user-login section.layout-main h2,
.page--user section.layout-main h2,
.page--user-login #block-arcs-domain-blocks-chapter-selector-selectlist,
.page--user #block-arcs-domain-blocks-chapter-selector-selectlist {
  display: none;
}

.page--user-login #user-login label {}

.page--user-login #edit-pass,
.page--user #edit-pass {
  position: relative;
  left: 137px;
}

.page--user-login #user-login .form-text,
.page--user #user-login .form-text {
  width: 240px;
}

.page--user-login #user-login .form-item-description,
.page--user #user-login .form-item-description {
  font-style: italic;
}
/* =============================== */


/* Mobile */
@media only screen and (max-width: 600px) {
  #login-button {
    margin-top: -1px;
    margin-bottom: 0px;
    padding-top: 12px;
    margin-left: 20px;
  }

  #login-button-label {
  	visibility: hidden;
  }

  #login-chapter-menu {
  	border-top: none;
  	left: 0px;
    width: 100%;
  }

  .page--user-login #edit-pass {
    left: 0px;
  }
}

/* Chapter list */
.view-display-id-block {
  margin-bottom: 2.5em;
}
.view-display-id-block td.views-chapters--views-row {
  text-align: center;
}

/* Panel hero panes */
.l-panel-hero {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/* Membership Directory CSS */
.page--homepage.domain-local-arcs-civisite-com .image-callout-pane__copy-wrapper {
  max-height: 94px
}

.view-members-details .views-field-image-URL {
   float: right;
}

.view-members-details fieldset {
   clear:both;
}

.view-members-details .fieldset-wrapper > div {
   margin: 5px !important;
   padding-bottom: 10px;
}

.view-members-details #phone_details span {
  display: inline-block;
  width: 50px;
}

.view-members-directory-common .vefl-threecol .vefl-region {
   width: 30%;
}

.view-members-directory-common .views-submit-button ,
.view-members-directory-common .views-reset-button {
  width: 100px;
  display: inline-block;
  margin-top: 25px;
}

.page--members-details .breadcrumb {
  visibility: hidden;
}
.page--members-details .fieldset-legend {
  display: none;
}

.view-chapters td {
  padding: 0;
}

h2.pane-title {
  font-weight: normal;
  font-size: 1.875em;
  margin: 0 0 0.4em;
}

/* Footer styles */
.layout-footer-top {
  padding: 7.5625em 0.625em 1.0625em;
}
.layout-footer-top .contact-details .contact-details__address-details {
  line-height: 1.2em;
}
.block-donate__inner {
  padding: 2.625em 1.25em;
  bottom: 1.9em;
}

.menu-social-media__list-item.menu-home {
  font-size: 17px;
  top: 12px;
  position: relative;
}

/**
 * Landing page customizations
 */

/* Monarch Ticket #413: AMC Program landing page */
.page--node-7245 .l-col-one {
  float: none;
}
.l-col-one {
  clear: both;
  float:none;
}

/**
 * Hero Pane size
 */
.hero-pane .image-slide__field_copy {
  font-size: 1rem;
}
.hero-pane .image-slide__field-headline-long {
  font-size: 2rem;
}
.hero-pane .image-slide__copy-container {
  padding: 10px 5%;
  background: rgba(0, 0, 0, 0.45);
}
@media screen and (max-width: 1399px) {
  .hero-pane {
    margin-bottom: .875em;
  }
  .hero-pane .flex-direction-nav {
    margin-top: 5px;
  }
  .flex-direction-nav a {
    width: 36px;
  }
  .flex-direction-nav a:before {
    font-size: 35px;
    line-height: 35px;
  }
}

  /** Footer */
.layout-footer .menu-social-media__link.facebook:before,
.layout-footer .menu-social-media__link.twitter:before {
  font-size: 1.25rem;
}


/** elFinder
 *  changing opacity setting for "read only" view of the file browser
 */
.page--file-manager .ui-state-disabled,
.page--file-manager .ui-widget-content .ui-state-disabled {
  opacity: 1 !important;
}

/** #8227 - Add a LinkedIn icon to the header and the footer
 *  Additional social media icons
 *  from: https://simplelineicons.github.io/
 */

@font-face {
  font-family: simple-line-icons;
  src: url('./dist/fonts/simple-line-icons/simple-line-icons.woff') format('woff'),
       url('./dist/fonts/simple-line-icons/simple-line-icons.woff2') format('woff2');
}

.menu-social-media__link.linkedin:before {
    font-family: simple-line-icons;
    content: '\E60A';
    font-size: 10pt;
    line-height: 50px;
}

.layout-footer .menu-social-media__link.linkedin:before {
    font-size: 15pt;
}

.webform-draft.form-submit {
    margin-right: 15px;
}

/**
 * Custom flex grid for content.
 */
.flex-row {
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  margin-right: 0;
  margin-left: 0;
  margin-bottom: 10px;
}

/** Special handling for custom pane types */
.flex-row .panels-ipe-region,
.flex-row .panels-ipe-sort-container,
.flex-row .panels-ipe-portlet-wrapper,
.flex-row .panels-ipe-portlet-content {
  height: 100%;
}

.flex-row .image-callout-pane {
  height: 100%;
  background-color: #009ca6;
}

.domain--national .flex-row .image-callout-pane {
  background-color: #9d2235;
}

.flex-col-1, .flex-col-2, .flex-col-3, .flex-col-4, .flex-col-5, .flex-col-6,
.flex-col-7, .flex-col-8, .flex-col-9, .flex-col-10, .flex-col-11, .flex-col-12 {
  box-sizing: border-box;
  position: relative;
  width: 100%;
  padding: 0 5px;
}

@media screen and (min-width: 768px) {
  .flex-col-1 {
    flex: 0 0 8.33333%;
    max-width: 8.33333%;
  }

  .flex-col-2 {
    flex: 0 0 16.66667%;
    max-width: 16.66667%;
  }

  .flex-col-3 {
    flex: 0 0 25;
    max-width: 25%;
  }

  .flex-col-4 {
    flex: 0 0 33.33333%;
    max-width: 33.33333%;
  }

  .flex-col-5 {
    flex: 0 0 41.66667%;
    max-width: 41.66667%;
  }

  .flex-col-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .flex-col-7 {
    flex: 0 0 58.33333%;
    max-width: 58.33333%;
  }

  .flex-col-8 {
    flex: 0 0 66.66667%;
    max-width: 66.66667%;
  }

  .flex-col-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }

  .flex-col-10 {
    flex: 0 0 83.33333%;
    max-width: 83.33333%;
  }

  .flex-col-11 {
    flex: 0 0 91.66667%;
    max-width: 91.66667%;
  }

  .flex-col-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}