/*************************/
    /* VERTICAL MENU styling */
    /*************************/
 
/** Large Mode **/
@media only screen and (min-width: 75rem) {
  #g-vmenu .g-main-nav .g-toplevel > li {
    margin: 0.5rem 0;
    display: block;
    width: 50%;
  }
  #g-vmenu .g-main-nav {
      margin: 0;
  }
  #g-vmenu .g-main-nav .g-toplevel > li > .g-menu-item-container {
      padding: 0.2345rem 0;
  }
  .dir-ltr #g-vmenu .g-main-nav .g-toplevel > li.g-parent .g-menu-parent-indicator {
      right: 0.5rem;
  }
  #g-vmenu .g-main-nav .g-toplevel > li.g-parent .g-menu-parent-indicator {
      vertical-align: top;
      position: absolute;
  }
  #g-vmenu .g-main-nav .g-toplevel > li > .g-menu-item-container .g-menu-parent-indicator:after {
      content: "\f105";
      opacity: 0.5;
  }
  .g-main-nav .g-toplevel > li.g-parent .g-menu-parent-indicator:after {
      width: 1.25rem;
      padding: 0.25rem;
      height: 1.25rem;
  }
  .dir-ltr #g-vmenu .g-main-nav .g-dropdown {
      left: 100%;
  }
  #g-vmenu .g-main-nav .g-dropdown {
      background: #01b2ff;
      border: 1px solid transparent;
      border-radius: 0;
      top: -0.75rem;
  }
  #g-vmenu .g-main-nav .g-toplevel > li .g-menu-item-content {
      display: inline-block;
      vertical-align: middle;
      cursor: pointer;
      width: 80%;
  }
  #g-vmenu .g-main-nav .g-toplevel > li > .g-menu-item-container:hover {
      color: #9f1012;
  }
  body#g-offcanvas-sidemenu #g-offcanvas {
      width: 20rem;
      background: #03345B;
  }
  .g-offcanvas-open#g-offcanvas-sidemenu {
      position: fixed;
  }
  .g-offcanvas-open .g-offcanvas-left #g-page-surround {
    transform: perspective(1500px) translate3d(184px, 0, -95px) rotateY(-20deg) !important;
    height: 100vh !important;
    width: 100vw !important;
    overflow-y: hidden !important;
    box-sizing: border-box !important;
    background: rgba(128, 128, 128, 1) !important;
  }
  .g-offcanvas-open .g-nav-overlay, .g-menu-overlay {
      background: rgba(128, 128, 128, .5) !important;
  }
}
/** Small Screen Mobile Modes **/
@media only screen and (max-width: 47.9375rem) {
  #g-navigation .g-block.size-65 {
    display: none;
  }
}

    @import "dependencies";
    @import "salient/sidemenu";

listgriditems:
  type: collection.list
  array: true
  label: Content Lists
  description: Create each item to appear in the content row.
  value: title
  ajax: true

  fields:
    .title:
      type: input.text
      label: Title
      skip: true
    .image:
      type: input.imagepicker
      label: Image

listgriditems:
  type: collection.list
  array: true
  label: Content Lists
  description: Create each item to appear in the content row.
  value: title
  ajax: true

  fields:
    .title:
      type: input.text
      label: Title
      skip: true
    .site:
      type: input.url
      label: Url
      description: Url for the image. Leave empty to go to home page.
    .image:
      type: input.imagepicker
      label: Image

    <span class="g-imageblock-img"><img alt="image" src="{{ url(listgriditem.image)|e }}"/></span>

    <span class="g-imageblock-img"><a href="{{ url(listgriditem.site | default(gantry_base)) }}"><img alt="image" src="{{ url(listgriditem.image)|e }}"/></a></span>

<span class="g-imageblock-title"><a href="">{{ listgriditem.headline|raw }}</a></span>

<span class="g-imageblock-title"><a href="{{ url(listgriditem.site | default(gantry_base)) }}">{{ listgriditem.headline|raw }}</a></span>

<span class="g-imageblock-title"><a href="">{{ listgriditem.titlebottom }}</a></span>

    <span class="g-imageblock-title"><a href="{{ url(listgriditem.site | default(gantry_base)) }}">{{ listgriditem.titlebottom }}</a></span>

.target:
  type: select.selectize
  label: Target
  description: Target browser window when item is clicked.
  placeholder: 'Select...'
  default: _blank
  options:
      _parent: Self
      _blank: New Window""

target="{{ infolist.target|default('_blank')|e }}"

<a href="{{ infolist.link|e }}">

<a target="{{ infolist.target|default('_blank')|e }}" href="{{ infolist.link|e }}">

<a href="

<a target="{{ someIdentifier.target|default('_blank')|e }}" href="

target:
  type: select.selectize
  label: Target
  description: Target browser window when item is clicked.
  placeholder: 'Select...'
  default: _blank
  options:
      _parent: Self
      _blank: New Window""

.target:
  type: select.selectize
  label: Target
  description: Target browser window when item is clicked.
  placeholder: 'Select...'
  default: _blank
  options:
      _parent: Self
      _blank: New Window""

target="{{ particle.target|default('_blank')|e }}"

<a href="{{ particle.link|e }}">

{% if particle.readmore %}<a target="{{ particle.target|default('_blank')|e }}" href="{{ particle.link|e }}" class="button {{ particle.readmoreclass|e }}">

target="{{ listgriditem.target|default('_blank')|e }}">

<a href="{{ listgriditem.link|e }}">

<a target="{{ listgriditem.target|default('_blank')|e }}" href="{{ listgriditem.link|e }}">

    title:
      type: input.text
      label: Title
      description: Customize the title text.
      placeholder: Enter title

    image:
      type: input.imagepicker
      label: Promo Image
      description: Select desired promo image.

    title:
      type: input.text
      label: Title
      description: Customize the title text.
      placeholder: Enter title

    link:
      type: input.url
      label: Url
      description: Url for the image. Leave empty to go to home page.
      
    image:
      type: input.imagepicker
      label: Promo Image
      description: Select desired promo image.

	<span class="g-promoimage-iconbutton {{ particle.iconbutton|e }}"></span>
    <div class="g-promoimage-caption">

	<span class="g-promoimage-iconbutton {{ particle.iconbutton|e }}"></span>
    <a href="{{ particle.link|e }}"><img src="{{ url(particle.image)|e }}" alt="{{ particle.title|e }}"></a>
    <div class="g-promoimage-caption">

@import "dependencies";
@import "listgrid";
@import "imageblock";