/**
	This is a partial file that houses SCSS variable definitions for import & use across the site
	in other SCSS files.

	to use: 
	// Utilities
	@import "variables";

	#main-wrapper{
		color: $mainColor;
	}
 */
/**
    A partial file defining common styles normally extended/inherited 
    for effects such as animations, shadows, and radiuses

    most of these should be done with mixins

    to use: 
        // Utilities
        @import "effects"; // <-- this is relative to where the file is ON YOUR DRIVE. Does not matter once uploaded

        #main-wrapper{
            @extend .anim01;
        }
 */
/**
 * ANIMATIONS
 */
.anim01 {
  -webkit-transition: all 0.1s;
  -moz-transition: all 0.1s;
  -ms-transition: all 0.1s;
  -o-transition: all 0.1s;
  transition: all 0.1s; }

.anim02 {
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s; }

.anim03 {
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s; }

.anim05 {
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s; }

/** 
 * BORDER RADIUS
 */
.border-rad-lg {
  -webkit-border-radius: 10em;
  -moz-border-radius: 10em;
  border-radius: 10em; }

* {
  box-sizing: border-box; }

ul#image-gallery {
  background-color: #333333;
  list-style: none outside none;
  height: 100%;
  min-height: 540px;
  padding-left: 0;
  margin-bottom: 0;
  width: 560px; }
  @media (max-width: 960px) {
    ul#image-gallery {
      min-height: 208px; } }
  @media (max-width: 650px) {
    ul#image-gallery {
      min-height: 201px; } }
  ul#image-gallery .lslide {
    background-color: #333333;
    border: 1px solid #111111; }

ul#image-gallery li {
  display: block;
  float: left;
  height: 100%;
  margin: 0px auto;
  cursor: pointer;
  position: relative;
  text-align: center; }

ul#image-gallery li img {
  border-left: 1px solid #111111;
  border-right: 1px solid #111111;
  display: block;
  margin: 0px auto;
  /* center image */
  max-height: 442px;
  max-width: 100%; }

.lSAction > a {
  background: none; }
  .lSAction > a i {
    color: #DDDDDD;
    text-shadow: -1px 0 #222222, 0 1px #222222, 1px 0 #222222, 0 -1px #222222; }

i#pause-show,
i#play-show {
  cursor: pointer;
  font-size: 18px;
  margin: 0px 10px 0px 0px; }
  i#pause-show:hover,
  i#play-show:hover {
    color: #3265cb; }

i#play-show {
  color: #3265cb; }

#slider-feedback,
#slider-count {
  display: inline-block;
  font-size: 17px;
  font-style: italic;
  height: 18px;
  line-height: 17px;
  width: 70px; }

#slider-count {
  display: block;
  margin-bottom: 5px;
  width: 100px; }
  #slider-count #current-slide-num {
    font-weight: bold; }

.lSSlideOuter .lSAction > a {
  height: auto;
  width: auto; }
.lSSlideOuter .lSPager.lSpg {
  /* makes the dots menu only one row with scroll */
  height: 35px;
  overflow-x: auto;
  position: relative;
  white-space: nowrap; }
  .lSSlideOuter .lSPager.lSpg > li {
    display: inline; }
    .lSSlideOuter .lSPager.lSpg > li a {
      height: 10px;
      width: 10px; }

p.caption {
  background-color: rgba(34, 34, 34, 0.8);
  border: 1px solid #111111;
  bottom: 0px;
  color: white;
  left: 0;
  margin: 0;
  height: 116px;
  overflow: hidden;
  padding: 20px;
  position: absolute;
  width: 100%;
  z-index: 10; }
  p.caption .clear {
    display: inline-block;
    margin-top: 20px;
    overflow: auto;
    width: 100%; }

@media (max-width: 960px) {
  ul#image-gallery li {
    max-height: 208px; }

  ul#image-gallery li img {
    max-height: 208px; } }
@media (max-width: 650px) {
  ul#image-gallery li {
    max-height: 201px; }

  ul#image-gallery li img {
    max-height: 201px; } }
.slide-thumb img {
  background: rgba(240, 240, 240, 0.6);
  border: 1px solid #CCCCCC;
  padding: 5px; }

/*# sourceMappingURL=resp-slider.css.map */