/*
	Custom CSS
	Please make sure your CSS rules are 
	more particular / have higher priority
	then other page styles
*/

/* HOME SLIDESHOW */

@mixin default($margin, $padding, $box-sizing) {
  margin: $margin;
  padding: $padding;
  box-sizing: $box-sizing;
}

@mixin dimension($width: auto, $height: auto) {
  width: $width;
  height: $height;
}

@mixin pos($position: absolute, $margin: auto, $top: auto, $bottom: auto, $left: auto, $right: auto) {
  position: $position;
  margin: $margin;
  top: $top;
  bottom: $bottom;
  left: $left;
  right: $right;
}

$color: cornsilk;

* {
  @include default(0, 0, border-box);
}

body, html {
  @include dimension(100%, 100%);
}

  .container {
    @include dimension(100%, 100%);
    position: relative;
    background: #355C7D;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #C06C84,   #6C5B7B, #355C7D);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #C06C84,           #6C5B7B, #355C7D); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    overflow: hidden;
    img {
      @include dimension(100%, 100%);
      object-fit: cover;
      @include pos($top: 0, $bottom: 0, $left: 0, $right: 0);
      animation: fade 1s;
    }
    .arrow {
      z-index: 10;
      @include pos($top: 0, $bottom: 0);
      @include dimension(1.5rem, 1.5rem);
      font-size: 1.5rem;
      color: $color;
      opacity: 0.5;
      transition: opacity 1s;
      &:hover {
        cursor: pointer;
        opacity: 1;
      }
    }
    .arrow-left {
      left: 2%;
    }
    .arrow-right {
      right: 2%;
    }
    .dots {
      @include pos($left: 0, $right: 0, $bottom: 2%);
      @include dimension(7rem);
      z-index: 5;
      .dot {
        @include dimension(2rem, 2rem);
        display: inline-flex;
        align-content: center;
        justify-content: center;
        color: $color;
      }
    }
  }

@keyframes fade {
  from {opacity: 0.1}
  to {opacity: 1}
}

/* GALLERY */
#gallery {
   line-height:0;
   -webkit-column-count:5; /* split it into 5 columns */
   -webkit-column-gap:5px; /* give it a 5px gap between columns */
   -moz-column-count:5;
   -moz-column-gap:5px;
   column-count:5;
   column-gap:5px;
}

#gallery img {
   width: 100% !important;
   height: auto !important;
   margin-bottom:5px; /* to match column gap */
transition: filter 2s;
filter: grayscale(100%);

}

@media (max-width: 1200px) {
   #gallery {
    -moz-column-count:    4;
    -webkit-column-count: 4;
    column-count:         4;
   }
}

@media (max-width: 1000px) {
   #gallery {
    -moz-column-count:    3;
    -webkit-column-count: 3;
    column-count:         3;
   }
}

@media (max-width: 800px) {
   #gallery {
    -moz-column-count:    2;
    -webkit-column-count: 2;
    column-count:         2;
   }
}

@media (max-width: 400px) {
   #gallery {
    -moz-column-count:    1;
    -webkit-column-count: 1;
    column-count:         1;
   }
}

#gallery img:hover {
   filter:none;
}

 #events h3   {
	/* add your css rule here */
}


 #events p.duration, #events div.duration   {
	/* add your css rule here */
}


 #events p.description, #events div.description   {
	/* add your css rule here */
}


 #events .selectedEvent   {
	/* add your css rule here */
}


 #events input.reserve_time_btn   {
	/* add your css rule here */
}


 #events input.select_another_btn   {
	/* add your css rule here */
}


 #eventForm #start_date-block-container h3, #eventForm #timeline-container h3   {
	/* add your css rule here */
}


 #eventForm #save_button   {
	/* add your css rule here */
}


 div.ui-widget-content   {
	/* add your css rule here */
}


 div.ui-widget-header   {
	/* add your css rule here */
}


 #timeline-container table.timeline   {
	/* add your css rule here */
}


 .timeline td.not_worked_time   {
	/* add your css rule here */
}


 .timeline td.free_time   {
	/* add your css rule here */
}


 .timeline td.selected_time   {
	/* add your css rule here */
}


 .timeline td.reserved_time   {
	/* add your css rule here */
}


 div#loading   {
	/* add your css rule here */
}


 #start_date-block-container .zend_form dt, start_date-block-container .zend_form dt b, start_date-block-container .zend_form dd label   {
	/* add your css rule here */
}