.arrow {
    cursor: pointer;
    display: block;
    height: 64px;
    /*margin-top: 15%;*/
    outline: medium none;
    position: absolute;
    top: 50%;
    width: 64px;
    z-index: 5;
}

    .arrow.prev {
        background-image: url("../images/prev.png");       
        opacity: 0.2;
        transition: all 0.2s linear 0s;
    }

    .arrow.next {
        background-image: url("../images/next.png");
        opacity: 0.2;
        transition: all 0.2s linear 0s;
    }

    .arrow.prev:hover {
        opacity: 1;
    }

    .arrow.next:hover {
        opacity: 1;
    }

.photo-nav {
    bottom: -4px;
    display: block;
    min-height: 48px;
    left: 0;
    margin: auto; /*30%*/
    padding: 1em 0 0.8em;
    right: 0;
    text-align: center;
    width: 100%;
    z-index: 5;
}

    .photo-nav li {
        border: 5px solid #AAAAAA;
        border-radius: 5px;
        cursor: pointer;
        display: inline-block;
        margin: 0 8px;
        position: relative;
        width: 150px;
    }

        .photo-nav li.active {
            border: 5px solid #FFFFFF;
        }

        .photo-nav li img {
            width: 85%;
        }

.slider {
    border: 15px solid #FFFFFF;
    border-radius: 5px;
    margin: 20px auto;
    position: relative;
    /*max-width: 80%;*/
    width: 70%;
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    -ms-perspective: 1000px;
    -o-perspective: 1000px;
    perspective: 1000px;
    -webkit-transform-style: preserve-3d;
    -moz--transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

@media (min-width: 1200px) {
    .slider {
        min-height: 450px;
    }
    .arrow.prev{
       left: 5px;
    }
    .arrow.next {
        right: 20px;    
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .slider {
        min-height: 385px;
    }
    .arrow.prev{
       left: -5px;
    }
    .arrow.next {
        right: -35px;    
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .slider {
        min-height: 300px;
    }
    .arrow.prev{
       left: -20px;
    }
    .arrow.next {
        right: -50px;    
    }
}

@media (min-width: 690px) and (max-width: 767px) {
    .slider {
        min-height: 280px;
    }
    .arrow.prev{
       left: -20px;
    }
    .arrow.next {
        right: -50px;    
    }
}

@media (min-width: 500px) and (max-width: 689px) {
    .slider {
        min-height: 245px;
    }
    .arrow.prev{
       left: -30px;
    }
    .arrow.next {
        right: -55px;    
    }
}

@media (min-width: 400px) and (max-width: 499px) {
    .slider {
        min-height: 160px;
    }
    .arrow.prev{
       left: -40px;
    }
    .arrow.next {
        right: -65px;    
    }
}
@media (min-width: 10px) and (max-width: 399px) {
    .slider {
        min-height: 120px;
    }
    .arrow.prev{
       left: -40px;
    }
    .arrow.next {
        right: -65px;    
    }
}

.slide {
    position: absolute;
}

    .slide.ng-hide-add {
        opacity: 1;
        -webkit-transition: 1s linear all;
        -moz-transition: 1s linear all;
        -o-transition: 1s linear all;
        transition: 1s linear all;
        -webkit-transform: rotateX(50deg) rotateY(30deg);
        -moz-transform: rotateX(50deg) rotateY(30deg);
        -ms-transform: rotateX(50deg) rotateY(30deg);
        -o-transform: rotateX(50deg) rotateY(30deg);
        transform: rotateX(50deg) rotateY(30deg);
        /*-webkit-transform-origin: right top 0;
        -moz-transform-origin: right top 0;
        -ms-transform-origin: right top 0;
        -o-transform-origin: right top 0;
        transform-origin: right top 0;*/
    }

        .slide.ng-hide-add.ng-hide-add-active {
            opacity: 0;
        }

    .slide.ng-hide-remove {
        -webkit-transition: 1s linear all;
        -moz-transition: 1s linear all;
        -o-transition: 1s linear all;
        transition: 1s linear all;
        display: block !important;
        opacity: 0;
        transition-delay: 1s;
    }

        .slide, .slide.ng-hide-remove.ng-hide-remove-active {
            opacity: 1;
        }

.slider img {
    display: block;
    margin: auto;
    min-height: inherit;
    min-width: inherit;
    /*width: 100%;*/
    padding-left: 8%;
    padding-right: 8%;
}