/**
 * jQuery content slideshow
 * @name showslide
 * @author   
 * @version 1.1.3
 * @category jQuery plugin
 * @copyright (c) 2013
 *
 * Changelog:
 *
 * SEE JS FILE
*/


/**
 * NAVIGATION
 */
.header{
 .slider{
    width:80%;
    height:rem(760px);
    display:none;

    img{
        height:rem(760px);
        width:auto;
        position:absolute;
        left:20%;
        top:0;
    }
    .items{
	position:absolute;
	bottom:8rem;
	left:16%;
	font-size:rem(26px);

	&:before{
		width:1rem;
		height:rem(1px);
		content:'';
		position:absolute;
		top:-.3em;
		left:50%;
		transform:translateX(-50%);
		background:$border;
	}
}
.showslidePrev, .showslideNext{
	display:none;
}
    @include breakpoint(large){
    	display:block;
    }
 }
}
.content{
	.slider{
		.showslideSelect{
			display:none;
		}
		.showslidePrev, .showslideNext{
			background:$light;
			border-radius:0;
			width:5rem;
			height:5rem;
			opacity:1;
			bottom:1.5rem;
			
			right:0;
			@extend %animation;
			&:before{
				color:$primary;
				position:absolute;
				left:50%;
				top:50%;
				transform:translateX(-50%) translateY(-50%);
			}

			&:hover{
				opacity:.8;
			}
		}
		.showslidePrev{
			
			right:5rem;
		}
	}
}
.showslideController {
    cursor: pointer;
    list-style: none;
    z-index: 20;
    transition: all 500ms ease-in-out;
}

a.showslideController {
    background-color: rgba($dark, .2);
    border-radius: rem(4px);
    display: block;
    height: rem(30px);
    position: absolute;
    @include hide-text();
    padding:rem(3px);
    opacity: .6;
    width: rem(30px);

    &.showslidePlay {
        bottom: rem($base-gap);
        left: 50%;
        margin-left: rem(-15px);

        &:before {
            @extend %icon-pause;
            @extend %controls-pseudo;
        }

        &.true:before {
            @extend %icon-play;
            @extend %controls-pseudo;
        }
    }

    &.showslidePrev, &.showslideNext {
      
        margin-top: rem(-15px);
    }

    &.showslidePrev {
       

        &:before {
            @extend %controls-pseudo;
            @extend %icon-left;
        }
    }

    &.showslideNext {
       

        &:before {
            @extend %controls-pseudo;
            @extend %icon-right;
        }
    }

    &:hover {
        background-color: rgba($dark, .8);
        opacity:1;
    }
}
.showslideSelect {
    z-index: 20;
    position: absolute;
    bottom: 10rem;
    font-size:rem(26px);
    margin:auto;
    text-align: center;
    width:rem(20px);
    left:16%;

    &:before{
    	content:'';
    	height:5.5rem;
    	width:rem(1px);
    	background:$secondary;
    	left:-1.5rem;
    	top:-3.75rem;
    	position:absolute;
    }

    li {
        width:rem(20px);
        display: inline-block;
        margin-right: rem(15px);
        &:before{
            display:none;
        }
    }
    &.thumbnails li {
        width: rem(64px);
        height: rem(64px);
        background-size: cover;
        border: 3px solid $primary;
    }
    li {
        display:none;
        &.active, &:hover {
            display:block;
            font-weight:bold;
        }
    }
}

/**
* GLOBALS
**/

.slider {
   
    position: relative;
    width: 100%;

    /**
     * SPEED SETTING
     */

    > .animate {
        transition-duration: 1000ms;
    }

    /**
    * SPECIAL EASINGS
    * FOR MORE EASINGS: http://matthewlein.com/ceaser/
    **/
    &.horizontal > .animate {
        transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
        /* easeInOutQuad */
    }
    &.vertical > .animate {
        transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
        /* easeInOutCirc */
    }
    &.fade > .animate {
        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        /* easeOutCubic */
    }
    &.flip > .animate {
        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        /* easeOutCubic */
    }
    &.puffOut > .animate {
        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        /* easeOutCubic */
    }
    &.puffIn > .animate {
        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        /* easeOutCubic */
    }
    &.zoomOut > .animate {
        transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
        /* easeInOutCirc */
    }
    &.zoomIn > .animate {
        transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
        /* easeInOutCirc */
    }

    .slide {
        z-index: 1;

        &:not(.active) {
            z-index: 1;
        }
        &.active {
            float: left;
            position: relative;
            z-index: 10;
        }

        width: 100%;
        height: 100%;
        display: block;
        position: absolute;

        /**
        * ELEMENTS WITH data-caption-ATTRIBUTES
        **/
        &[data-caption]:after {
            content: attr(data-caption);
            background: rgba(255, 255, 255, 0.5);
            left: 0;
            color: #000;
            display: block;
            padding: 1em;
            position: absolute;
            width: 100%;
            top: -100%;
        }
        &.active[data-caption]:after {
            top: 0;
        }
        &[data-caption]:after {
            transition-property: all;
        }
    }

    /**
    * TRANSITIONS
    **/
    &.fade > .animate, &.horizontal > .animate, &.vertical > .animate, &.zoomOut > .animate, &.zoomIn > .animate, &.puffOut > .animate, &.puffIn > .animate {
        transition-property: all;
    }

    /**
    * FADE
    **/
    &.fade .slide {
        opacity: 0;
        &.active {
            opacity: 1;
        }
    }

    /**
    * HORIZONTAL
    **/
    &.horizontal .slide {
        &.active {
            left: 0;
            z-index: 10;
        }
        &.right {
            left: 100%;
            z-index: 1;
        }
        &.left {
            left: -100%;
            z-index: 1;
        }
    }

    /**
     * VERTICAL
     */
    &.vertical {
        .active {
            top: 0;
            z-index: 10;
        }
        .left {
            top: -100%;
            z-index: 1;
        }
        .right {
            top: 100%;
            z-index: 1;
        }
    }

    /**
     * FLIP
     */
    &.flip {
        > .animate {
            transition: all 2000ms ease-in-out;
        }
        overflow: visible;
        .left {
            opacity: 0;
            transform: perspective(800px) rotateX(-180deg) translateZ(300px);
        }
        .right {
            opacity: 0;
            transform: perspective(800px) rotateX(180deg) translateZ(300px);
        }
        .active {
            opacity: 1;
            transform: perspective(0) rotateX(0) translateZ(0);
        }
    }

    /**
     * puffOUT
     */
    &.puffOut {
        overflow: visible;
        .left {
            opacity: 0;
            transform: scale(1.5);
        }
        .right {
            opacity: 0;
            transform: scale(0.5);
        }
        .active {
            opacity: 1;
            transform: scale(1);
        }
    }

    /**
     * puffIN
     */
    &.puffIn {
        overflow: visible;
        .left {
            opacity: 0;
            transform: scale(0.5);
        }
        .right {
            opacity: 0;
            transform: scale(1.5);
        }
        .active {
            opacity: 1;
            transform: scale(1);
        }
    }

    /**
     * zoomOUT
     */
    &.zoomOut {
        .left {
            opacity: 0;
            transform: scale(0.2);
        }
        .right {
            opacity: 0;
            transform: scale(1.5);
        }
        .active {
            opacity: 1;
            transform: scale(1);
        }
    }

    /**
     * zoomIN
     */
    &.zoomIn {
        .left {
            opacity: 0;
            transform: scale(1.5);
        }
        .right {
            opacity: 0;
            transform: scale(1.5);
        }
        .active {
            opacity: 1;
            transform: scale(1);
        }
    }
}