/**
 * @file
 */

.blazy,
.blazy *,
.blazy *::before,
.blazy *::after {
  box-sizing: border-box;
}

/* The lazyloaded element: IMG, IFRAME, DIV. */
.b-lazy,
.b-responsive {
  display: block;
  height: auto;
  min-height: 1px;
  opacity: 0;
  transition: opacity 500ms ease-in-out;
}

/* Needed to display preloader with CSS BG image, otherwise hidden. */
.b-loaded,
.b-error,
.b-bg.media--loading {
  opacity: 1;
}

.b-bg {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* The .blazy container is not always preset such at lightboxes. */
.litebox,
.blazy iframe,
.media iframe {
  border: 0 none;
  display: block;
  max-width: 100%;
}

/** Fix for conflict with Bootstrap CSS if not using aspect ratio. */
.blazy .media {
  display: block;
  position: relative;
}

/* Be sure to add width to the container accordingly, otherwise collapsed. */
.field[data-blazy] {
  min-width: 50%;
}

/*})'"*/
/**
 * @file
 * Provides integration with core filter module.
 *
 * This file contains fixes when Blazy put inside core Align/ Caption images
 * filter which may not suit your design needs, adjust it.
 */

.media-wrapper--blazy,
.media-wrapper--blazy * {
  box-sizing: border-box;
}

/** Without this, media--ratio will be collapsed. Adjust accordingly. */
.media-wrapper--blazy {
  max-width: 100%;
  min-width: 50%;
}

/** Blazy is placed after filter Align/ Caption will be collapsed. Adjust it. */
.caption .media-wrapper--blazy,
.align-left .media-wrapper--blazy,
.align-right .media-wrapper--blazy,
.align-center .media-wrapper--blazy {
  min-width: 320px;
}

.blazy--filter .media-wrapper--blazy {
  min-width: 0;
  overflow: hidden;
}

/*})'"*/
/**
 * @file
 * The CSS and class names below are based on Slick media for easy migration.
 */

/* Touch me not! */
.media {
  position: relative;
}

/**
 * Aspect ratio element wrapper. So can use dynamic/fluid ratio via JS which is
 * not possible using ::pseudo selector approach.
 */
.media.media--ratio {
  display: block;
  height: 0;
  overflow: hidden;
  width: 100%;
}

/* Aspect ratio element: IMG, IFRAME, DIV. */
.media--ratio .media__element {
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 0;
  /** Temp fix, also to fix the VIDEO element to max width, not only IMG. */
  object-fit: cover;
}

/* 1:1 ratio */
.media--ratio--11 {
  padding-bottom: 100%;
}

/* 3:2 ratio */
.media--ratio--32 {
  padding-bottom: 66.66%;
}

/* 4:3 ratio */
.media--ratio--43 {
  padding-bottom: 75%;
}

/* 8:5 ratio */
.media--ratio--85 {
  padding-bottom: 62.5%;
}

/* 16:9 ratio */
.media--ratio--169 {
  padding-bottom: 56.25%;
}

/*})'"*/
/**
 * @file
 */

/* Credit: https://github.com/tobiasahlin/SpinKit */
@-webkit-keyframes rotateplane {
  0% {
    -webkit-transform: perspective(120px);
  }
  50% {
    -webkit-transform: perspective(120px) rotateY(180deg);
  }
  100% {
    -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg);
  }
}

@keyframes rotateplane {
  0% {
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
  }
  50% {
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
  }
  100% {
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  }
}

.media--loading {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  position: relative;
}

.media--loading::before {
  content: '';
  display: block;
  width: 30px;
  height: 30px;
  max-width: 30px;
  background: #2eaae0;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -15px;
  margin-top: -15px;
  font-size: 0;
  z-index: 22;
  -webkit-animation: rotateplane 1.2s infinite ease-in-out;
  animation: rotateplane 1.2s infinite ease-in-out;
}

.media--background {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.media--picture,
.media--picture picture,
.media--picture img {
  min-height: 1px;
}

/*})'"*/
/*
 * Styling your calendar:
 * - This file contains some basic calendar styling.
 * - Visit admin/config/content/availability-calendar/styling to define some more styling.
 * - Finally resort to your theme style sheets to define any requested styling.
 *
 * A calendar is rendered as follows:
 * div#cal-{cid}.cal
 *   div.cal-viewport          ? optional when the viewport functionality is enabled
 *     div.cal-viewport-inner  ? optional
 *       div#cal-{cid}-{year}-{month}.cal-month  * repeated for each month
 *         table
 *           caption           contains month name
 *           thead
 *             tr
 *               th.cal-weekno-header  ? optional, if week notes are enabled, contains 'Nr.'
 *               th            * repeated 7 times, containing short names of the days
 *           tbody
 *             tr[.cal-empty]  * repeated 6 times, class cal-empty only if row does not contain day cells (can only be the last or last 2 rows)
 *               th            ? optional, only rendered if week notes are enabled, contains the week note
 *               td.{state}    * repeated 7 times, representing a day in the month, class defines state(s) of that day
 *                 div         ? optional only with no split days, contains day number
 *                 span        ? optional only with split days
 *                   span        contains day number
 */
.cal-month {
  float: left; /* LTR */
  margin: 0 6px 6px;
}

/* - Some themes set the width to 100% and browsers will honor that above the
 *   width of individual columns when using fixed table-layout.
 * - IE7 will always honor that, even without fixed table-layout.
 * So we use both and assure that each column gets its width in the first row.
 */
.cal table {
  table-layout: fixed;
  width: auto;
}

.cal table, .cal th, .cal td {
  margin: 0;
  padding: 0;
}

.cal caption {
  margin: 6px 6px 0;
  padding: 0;
  border-bottom: 1px solid #555;
}

/*
 * Settings to get day number and coloring according to state for split days.
 * - border-width will be defined in the generated css.
 * - border-color will be overruled based on the defined availability states.
 */
.cal td > span {
  display: block;
  position: relative; /* Allows to position inner span w.r.t this span. */
  border-style: solid;
  border-color: transparent;
}

.cal td > span > span {
  position: absolute;
  z-index: 1;
}

/* Allows to highlight a border on hovering (without disturbing the lay-out). */
.cal td > div, .cal td > span > span {
  border: 1px solid transparent;
}


/*
 * Special statuses:
 * cal-other: cells from another month, at the start of end of a calendar month.
 * cal-pastdate: cell for days in the past.
 * cal-today: cell for the current day.
 * cal-selectable: cells that are selectable.
 * cal-selected: cell that has been selected.
 * cal-empty: cell (with colspan=7) for an empty 6th week.
 * cal-error: selectable cell that may not be clicked because a non-clickable
 *   date is between.
 */

/* these selectors need to be stronger than those for the availability states.
 */
.cal th,
.cal .cal-other, .cal .cal-other > div, .cal .cal-other > span,
.cal .cal-pastdate, .cal .cal-pastdate div, .cal .cal-pastdate > span {
  background-color: transparent;
  border-color: transparent;
}

.cal td > span {
  border-color: transparent;
}

.cal-other {
  color: #aaa;
}

.cal-today {
  font-weight: bolder;
}

.cal-selected {
  font-weight: bolder;
  font-size: larger;
}

.cal .cal-selected > div, .cal .calselected > span > span {
  border-color: #555;
}

.cal-selectable {
  cursor: pointer;
}

/* Table cells and spans cannot get :focus, so no need to define that pseudo
 * class.
 */
.cal-selectable:hover > div, .cal-selectable:hover > span > span {
  border-color: #555;
}

.cal-error > div, .cal-error > span > span {
  cursor: default;
  background-image: url(/sites/all/modules/availability_calendars/icon-error.png);
  background-position: center center;
  background-repeat: no-repeat;
}

/*
 * Key
 */
.keystatus {
  padding-left: 2px; /* LTR */
}

.cal td.keystatus div {
  width: auto;
}

/*
 * View calendar through a viewport, also see availability_calendar.view.js.
 */
.cal-viewport {
  position: relative;
  overflow: hidden;
}

.cal-viewport-inner {
  position: relative;
  top: 0;
  left: 0; /* LTR */
  overflow: visible;
}

/*})'"*/
/* Month (table) */
.cal table {
  font-size: smaller;
  color: #000000;
  border-width: 1px;
  border-color: #000000;
  border-style: solid;
}
/* Month name and year (caption) */
.cal caption {
  font-weight: bold;
  font-style: inherit;
  font-size: smaller;
}

/* Weekday names (header row) */
.cal thead th {
  line-height: px;
  text-align: center;
  font-weight: bold;
  font-style: inherit;
  font-size: inherit;
  color: #000000;
  width: 28px;
}

/* Week notes (header column) */
.cal tbody th, .cal thead th.cal-weekno-header {
  width: 90px;
  color: #000000;
}

/* Days (td) */
.cal td {
  width: 28px;
  height: 28px;
  text-align: center;
  vertical-align: middle;
  color: #000000;
}

/* Whole day coloring */
.cal-nc, .cal-nc > div {
  background-color: #909090;
}

.cal-av, .cal-av > div {
  background-color: #90ee90;
}

.cal-na, .cal-na > div {
  background-color: #ffb6c1;
}

.cal-opt, .cal-opt > div {
  background-color: #ffffe0;
}

/* Split day coloring */
html[dir=ltr] .cal .cal-nc-am > span {
  border-left-color: #909090;
  border-top-color: #909090;
}

html[dir=ltr] .cal .cal-nc-pm > span {
  border-right-color: #909090;
  border-bottom-color: #909090;
}

html[dir=ltr] .cal .cal-av-am > span {
  border-left-color: #90ee90;
  border-top-color: #90ee90;
}

html[dir=ltr] .cal .cal-av-pm > span {
  border-right-color: #90ee90;
  border-bottom-color: #90ee90;
}

html[dir=ltr] .cal .cal-na-am > span {
  border-left-color: #ffb6c1;
  border-top-color: #ffb6c1;
}

html[dir=ltr] .cal .cal-na-pm > span {
  border-right-color: #ffb6c1;
  border-bottom-color: #ffb6c1;
}

html[dir=ltr] .cal .cal-opt-am > span {
  border-left-color: #ffffe0;
  border-top-color: #ffffe0;
}

html[dir=ltr] .cal .cal-opt-pm > span {
  border-right-color: #ffffe0;
  border-bottom-color: #ffffe0;
}

/* Split day dimensioning and positioning */
.cal td > span {
  width: 0;
  height: 0;
  border-left-width: 14px;
  border-top-width: 14px;
  border-right-width: 14px;
  border-bottom-width: 14px;
}

.cal td > span > span {
  top: -14px;
  left: -14px;
}

/* Dimensions and other properties for element containing day number */
.cal td > div, .cal td > span > span {
  width: 26px;
  height: 26px;
  line-height: 26px;
  text-align: center;
  vertical-align: middle;
}


/*})'"*/

/* Field display */
.field .field-label {
  font-weight: bold;
}

/* Form display */
form .field-multiple-table {
  margin: 0;
}
form .field-multiple-table th.field-label {
  padding-left: 0; /*LTR*/
}
form .field-multiple-table td.field-multiple-drag {
  width: 30px;
  padding-right: 0; /*LTR*/
}
form .field-multiple-table td.field-multiple-drag a.tabledrag-handle {
  padding-right: .5em; /*LTR*/
}

form .field-add-more-submit {
  margin: .5em 0 0;
}

/*})'"*/

.node-unpublished {
  background-color: #fff4f4;
}
.preview .node {
  background-color: #ffffea;
}
td.revision-current {
  background: #ffc;
}

/*})'"*/
/* This CSS file needs to be included either in the theme used for
 * editing content in order to be included in the WYSIWYG edit iframe,
 * or specifically included in the WYSIWYG config page's
 * "Define CSS" textfield.
 */
span[data-picture-align="left"],
img[data-picture-align="left"] {
  float: left;
}
span[data-picture-align="right"],
img[data-picture-align="right"] {
  float: right;
}
span[data-picture-align="center"],
img[data-picture-align="center"] {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Remove ugly boarders that bunch up in the image dialog table. */
.cke_dialog_body tr td:last-child {
  border-right: 0px;
}

/* The following is an example of what you could put in your theme
 * to control the size of images. It is formatted as
 * span[data-picture-mapping="[The machine name of your picture mapping]"
  span[data-picture-mapping="wide"] {
    width: 100%;
  }
  span[data-picture-mapping="normal"] {
    width: 50%;
  }
  span[data-picture-mapping="narrow"] {
    width: 33%;
  }
  span[data-picture-mapping] img {
    width: 100%;
    height: auto;
  }
*/

/*})'"*/

.search-form {
  margin-bottom: 1em;
}
.search-form input {
  margin-top: 0;
  margin-bottom: 0;
}
.search-results {
  list-style: none;
}
.search-results p {
  margin-top: 0;
}
.search-results .title {
  font-size: 1.2em;
}
.search-results li {
  margin-bottom: 1em;
}
.search-results .search-snippet-info {
  padding-left: 1em; /* LTR */
}
.search-results .search-info {
  font-size: 0.85em;
}
.search-advanced .criterion {
  float: left; /* LTR */
  margin-right: 2em; /* LTR */
}
.search-advanced .action {
  float: left; /* LTR */
  clear: left; /* LTR */
}

/*})'"*/

#permissions td.module {
  font-weight: bold;
}
#permissions td.permission {
  padding-left: 1.5em; /* LTR */
}
#permissions tr.odd .form-item,
#permissions tr.even .form-item {
  white-space: normal;
}
#user-admin-settings fieldset .fieldset-description {
  font-size: 0.85em;
  padding-bottom: .5em;
}

/**
 * Override default textfield float to put the "Add role" button next to
 * the input textfield.
 */
#user-admin-roles td.edit-name {
  clear: both;
}
#user-admin-roles .form-item-name {
  float: left; /* LTR */
  margin-right: 1em; /* LTR */
}

/**
 * Password strength indicator.
 */
.password-strength {
  width: 17em;
  float: right;  /* LTR */
  margin-top: 1.4em;
}
.password-strength-title {
  display: inline;
}
.password-strength-text {
  float: right; /* LTR */
  font-weight: bold;
}
.password-indicator {
  background-color: #C4C4C4;
  height: 0.3em;
  width: 100%;
}
.password-indicator div {
  height: 100%;
  width: 0%;
  background-color: #47C965;
}
input.password-confirm,
input.password-field {
  width: 16em;
  margin-bottom: 0.4em;
}
div.password-confirm {
  float: right;  /* LTR */
  margin-top: 1.5em;
  visibility: hidden;
  width: 17em;
}
div.form-item div.password-suggestions {
  padding: 0.2em 0.5em;
  margin: 0.7em 0;
  width: 38.5em;
  border: 1px solid #B4B4B4;
}
div.password-suggestions ul {
  margin-bottom: 0;
}
.confirm-parent,
.password-parent {
  clear: left; /* LTR */
  margin: 0;
  width: 36.3em;
}

/* Generated by user.module but used by profile.module: */
.profile {
  clear: both;
  margin: 1em 0;
}
.profile .user-picture {
  float: right; /* LTR */
  margin: 0 1em 1em 0; /* LTR */
}
.profile h3 {
  border-bottom: 1px solid #ccc;
}
.profile dl {
  margin: 0 0 1.5em 0;
}
.profile dt {
  margin: 0 0 0.2em 0;
  font-weight: bold;
}
.profile dd {
  margin: 0 0 1em 0;
}

/*})'"*/
.views-exposed-form .views-exposed-widget {
  float: left; /* LTR */
  padding: .5em 1em 0 0; /* LTR */
}

.views-exposed-form .views-exposed-widget .form-submit {
  margin-top: 1.6em;
}

.views-exposed-form .form-item,
.views-exposed-form .form-submit {
  margin-top: 0;
  margin-bottom: 0;
}

.views-exposed-form label {
  font-weight: bold;
}

.views-exposed-widgets {
  margin-bottom: .5em;
}

/* table style column align */
.views-align-left {
  text-align: left;
}
.views-align-right {
  text-align: right;
}
.views-align-center {
  text-align: center;
}

/* Remove the border on tbody that system puts in */
.views-view-grid tbody {
  border-top: none;
}

.view .progress-disabled {
  float: none;
}

/*})'"*/
/* General indentation & positioning classes */

.rteindent1 {
    margin-left: 40px;
}
.rteindent2 {
    margin-left: 80px;
}
.rteindent3 {
    margin-left: 120px;
}
.rteindent4 {
    margin-left: 160px;
}
.rteleft {
    text-align: left;
}
.rteright {
    text-align: right;
}
.rtecenter {
    text-align: center;
}
.rtejustify {
    text-align: justify;
}
.ibimage_left {
    float: left;
}
.ibimage_right {
    float: right;
}

/*})'"*/