/* ---------------------------------------------
/// elementQuery.js / http://elementqueries.com
/// ---------------------------------------------
///
/// Syntax:
/// @element { selector } and ( { condition }) [ and ( { condition }) ] {
///   {css}
/// }
///
/// { selector } : is a CSS selector targeting one or many elements. (Ex: #id or .class.) DO NOT USE plain 'div', it will cause perfomance issues
/// { condition } :  is composed of a measure and a value. (Ex. min-width: 400px, max-height: 200px)
/// { css } : can contain: Any valid CSS rule. (Ex: #id div { color: red })
*/

/*
///  ------------------
///  Search View
///  ------------------
*/

@element .pagination__links and (max-width: 250px) {
  .aui .kohde-search-portlet .pagination li a,
  .aui .kohde-search-portlet .pagination li span { margin-right: 6px; padding-left: 0; padding-right: 0; font-size: 12px; }
}

@element .l-col--sort and (max-width: 360px) {
  .aui .kohde-search-portlet .sorting__tools .form__select,
  .aui .kohde-search-portlet .sorting__tools .form__select select { width: 100% ; }
}

@element .panels and (max-width: 549px) {
  $this {
    width: 100%;
  }
    $this .panel--filter { width: 47%; margin-right: 3%; margin-bottom: 15px;  }
    $this .panel--filter:nth-child(odd) { margin-left: 0; }
}

@element .panels and (min-width: 550px) and (max-width: 649px) {
  $this {
    width: 100%;
  }
  $this .panel--filter { width: 25.50232%; margin-right: 12.5px;  margin-bottom: 0; }
}
@element .panels  and (min-width: 650px) and (max-width: 740px) {
  $this {
    width: 100%;
  }
  $this .panel--filter { width: 25.50232%; margin-bottom: 0; }
  $this .panel--filter button { font-size: 16px; }
  $this .panel--link { font-size: 16px; }

}
@element .panels  and (min-width: 740px) {
  $this {
    width: 100%;
  }
  $this .panel--filter { width: 181px; margin-bottom: 0; }
  $this .panel--filter button { font-size: 18px; }
  $this .panel--link { font-size: 18px; }
}

@element .panels__container  and (min-width: 668px) and (max-width: 969px) {
  .aui .panels__container {
    width: 100%;
  }
  .aui .panels__container .panel--filter  { width: auto; margin-bottom: 0; padding-left: 0; padding-right: 0; }
  .aui .panels__container .panel--link { width: auto; margin-bottom: 0; padding-left: 0; padding-right: 0; }

  .aui .panels__container .panel--filter button { font-size: 12px; }
  .aui .panels__container .panel--filter svg { width: 30px; }
  .aui .panels__container .panel--plain svg { width: 30px; margin-left: 5px; }
  .aui .panels__container .panel--link { margin-right: 5px; }
  .aui .panels__container .panel--link span { font-size: 12px;  }
}


@element .kohde-search-portlet and (max-width: 499px) {
  .aui .kohde-search-portlet .js-cardlisting .card:not(.card__list) {
    width: 100%;
    margin-right: 0%;
    margin-bottom: 15px;
  }

}

@element .kohde-search-portlet and (min-width: 500px) and (max-width: 767px) {
  .aui .kohde-search-portlet .js-cardlisting .card:not(.card__list) {
    width: 49.25%;
    margin-right: 1.333%;
    margin-bottom: 11px;
  }
  .aui .kohde-search-portlet .js-cardlisting .card:not(.card__list):nth-child(even) { margin-right: 0; }
}

@element .kohde-search-portlet and (min-width: 768px)  {
  .aui .kohde-search-portlet .js-cardlisting .card:not(.card__list) {
    width: 32.1%;
    margin-right: 1.333%;
    margin-bottom: 15px;
  }

  .aui .kohde-search-portlet .js-cardlisting .card:not(.card__list):nth-child(3n) { margin-right: 0; }

}



/*
  Card lifts portlet
*/

@element .kohde-card-lifts-portlet and (max-width: 499px) {
  .aui .kohde-card-lifts-portlet .js-cardlisting .card:not(.card__list){
    width: 100%;
    margin-right: 0%;
    margin-bottom: 15px;
  }
}

@element .kohde-card-lifts-portlet and (min-width: 500px) and (max-width: 767px) {
  .aui .kohde-card-lifts-portlet .js-cardlisting .card:not(.card__list) {
    width: 49.25%;
    margin-right: 1.333%;
    margin-bottom: 11px;
  }
  .aui .kohde-card-lifts-portlet .js-cardlisting .card:not(.card__list):nth-child(even) { margin-right: 0; }
}

@element .kohde-card-lifts-portlet and (min-width: 768px) {
  .aui .kohde-card-lifts-portlet .js-cardlisting .card:not(.card__list) {
    width: 32.1%;
    margin-right: 1.333%;
    margin-bottom: 15px;
  }
  .aui .kohde-card-lifts-portlet .js-cardlisting .card:not(.card__list):nth-child(3n) { margin-right: 0; }
}



/*
///  ------------------
///  Single Project
///  ------------------
*/

@element .kohde-intro-portlet and (max-width: 549px) {
  .l-col--w4 {
    float: none;
    width: 100%;
    margin-left: 0%;
  }
  .l-col--w3 {
    display: block;
    width: 100%;
  }
  .l-col--w4 {
    display: block;
    width: 100%;
  }

  /* $parent h3 { font-size: 25px !important; line-height: 1.5; } */
}
@element .kohde-intro-portlet and (min-width: 550px) and (max-width: 649px) {

  .project__heading h1 {
    font-size: 28px;
    line-height: 1.25;
  }

  .project__timeline h2 {
    font-size: 24px;
    line-height: 1.25;
  }

 /*  $parent h3 { font-size: 25px !important; line-height: 1.5; } */

  .l-col--w8  {
    float: none;
    display: block;
    width: 100%;
  }

  .l-col--w9 {
    display: block;
    width: 100%;
  }
  .l-col--w4 {
    position: relative;
    float: right;
    width: auto;
    margin-left: 0%;
    margin-bottom: 1em;
  }

  .l-col--w3 {
    display: block;
    width: 100%;
  }
  .legislation__dropdown { min-width: 400px; }

}
@element .kohde-intro-portlet and (min-width: 650px) and (max-width: 767px) {

  .project__heading h1 {
    font-size: 28px;
    line-height: 1.25;
  }

  .project__timeline h2 {
    font-size: 24px;
    line-height: 1.25;
  }

  $parent h3 { font-size: 25px !important; line-height: 1.5; }

  .l-col--w8  {
    float: left;
    width: 57.26496%;
  }

  .l-col--w9 {
    display: block;
    width: 100%;
  }
  .l-col--w4 {
    position: relative;
    float: right;
    width: 40.17094%;
    margin-left: 2.5641%;
    margin-bottom: 1em;
  }


  .l-col--w3 {
    display: block;
    width: 100%;
  }

  .legislation__dropdown { min-width: 500px; }
}

@element .kohde-intro-portlet and (min-width: 768px) {
  .l-col--w9  {
    float: left;
    width: 74.35897%;
  }
  .l-col--w8 {
    float: left;
    width: 65.81197%;
  }
  .l-col--w4 {
    float: left;
    width: 31.62393%;
    margin-left: 2.5641%;
  }
  .l-col--w3 {
    float: left;
    width: 23.07692%;
    margin-left: 2.5641%;
  }
}