@use "helpers";

#prd-fotos {
    margin-top: 10px;
    #fotosm {
        img {
            position: relative;
            width: 100%;
        }
    }
    #fotosp {
        margin: 15px auto;
    }
    #fotospDisplay {
        display: block;
    }
    .fotospL {
        /*left: 0px;*/
        width: 100%;
        height: auto;
        max-width: 300px;
        margin: 0 auto;

        li { 
            cursor: pointer;
            display:block;
            width: 100%;
            height: auto;
            max-width: 80px;
            margin: 0 auto;
            -webkit-box-shadow: 4px 4px 6px helpers.$medium;
            -moz-box-shadow: 4px 4px 6px helpers.$medium;
            box-shadow: 4px 4px 6px helpers.$medium;
        }
    }
    .bt-prev {
        left: 0;
    }
    .bt-next {
        right: 0;
    }
    .bt-prev,
    .bt-next {
        cursor: pointer;
        height: 100%;
        position: absolute;
        text-align: center;
        z-index: 1;
    }
    .bt-prev:before,
        .bt-next:before {
        border-left: 1px solid;
        border-top: 1px solid;
        content: "";
        display: block;
        height: 13px;
        left: 50%;
        margin-top: -7px;
        margin-left: -7px;
        position: absolute;
        top: 50%;
        width: 13px;
        @include helpers.rotacao(-45deg);
    }
    .bt-next:before {
        @include helpers.rotacao(135deg);
    }
}