﻿
.imagen {
    display: flex;
    width: 100%;
    height: 100%;
    align-self: center;
    padding: 4px 4px 4px 4px;
}

.selector {
    display: flex;
    width: 5%;
    height: 100%;
    align-self: center;
}

    .selector:hover {
        background-color: #00000011;
        cursor: pointer;
    }

    .selector.izq::after {
        content: "<";
        margin: auto auto;
        font-weight: bold;
        font-size: 60px;
        -webkit-text-stroke-width: 4.8px;
        -webkit-text-stroke-color: #c9c1c1;
        -webkit-text-fill-color: #ffffff;
        font-family: Arial Black, Gadget, sans-serif;
        text-shadow: 4px 4px 6px #A3A3A3;
    }

    .selector.der::after {
        content: ">";
        margin: auto auto;
        font-weight: bold;
        font-size: 60px;
        -webkit-text-stroke-width: 4.8px;
        -webkit-text-stroke-color: #c9c1c1;
        -webkit-text-fill-color: #ffffff;
        font-family: Arial Black, Gadget, sans-serif;
        text-shadow: 4px 4px 6px #A3A3A3;
    }
@media screen and (max-width: 800px) {
    .selector.izq::after, .selector.der::after {
        font-size: 40px;
        -webkit-text-stroke-width: 3.8px;
        text-shadow: 3px 3px 4px #A3A3A3;
    }
}

@media screen and (max-width: 600px) {
    .selector.izq::after, .selector.der::after {
        font-size: 30px;
        -webkit-text-stroke-width: 3.8px;
        text-shadow: 2px 2px 3px #A3A3A3;
    }
}

    .oculto {
        display: none;
        transition: opacity 1s ease-out;
        opacity: 0;
    }

    .visible {
        display: block;
        transition: opacity 1s ease-in;
        opacity: 1;
    }

    .carrousel {
        display: flex;
        padding: 10px;
        flex-flow: row nowrap;
        -webkit-flex-flow: row nowrap;
        justify-content: space-around;
        -webkit-justify-content: space-around;
        width: 96%;
        height: 96%;
    }
