.popover__wrapper a{
  text-decoration: none;
    display: block;
    height: 91px;
}

.popover__wrapper span{
  text-decoration: none;
    display: block;
    height: 91px;
    cursor:pointer;
}


.popover__wrapper {
    position: relative;
    display: inline-block;
}
.popover__content, .popover__content2{
    opacity: 0;
    visibility: hidden;
    position: absolute;
    -webkit-transform: translate(0,10px);
    transform: translate(0,10px);
    background-color: #FFF;
    padding: 20px;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
    width: auto;
}
.popover__content:before, .popover__content2:before{
    position: absolute;
    z-index: 5;
    content: '';
    right: calc(50% - 10px);
    top: -8px;
    border-style: solid;
    border-width: 0 10px 10px 10px;
    border-color: transparent transparent #FFFFFF transparent;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
}
.popover__wrapper:hover .popover__content, .popover__wrapper:hover .popover__content2{
    z-index: 5;
    opacity: 1;
    visibility: visible;
    -webkit-transform: translate(0,-20px);
    transform: translate(0,-20px);
    -webkit-transition: all 0.5s cubic-bezier(0.75, -0.02, 0.2, 0.97);
    transition: all 0.5s cubic-bezier(0.75, -0.02, 0.2, 0.97);
}

.popover__content2:before{
    right: calc(90% - 10px);
}

p.popover__message {
  text-align: left;
    font-size: 12px;
    line-height: 14px;
}

.back1{
    width: 220px;
    background-image: url(img/ethos-opina.png);
}

.back2{
    width: 171px;
    background-image: url(img/ethos-opina-pa-cuando.png);
}

.back3{
    width: 173px;
    background-image: url(img/ethos-opina-eso-es-todo.png);
}

.back4{
    width: 244px;
    background-image: url(img/ethos-opina-como-debe-ser.png);
}

.back5{
    width: 244px;
    background-image: url(img/ethos-opina-van-con-todo.png);
}

.back6{
    width: 244px;
    background-image: url(img/ethos-opina-que-grueso.png);
}

.back7{
    width: 244px;
    background-image: url(img/ethos-opina-tache.png);
}

.back8{
    width: 244px;
    background-image: url(img/ethos-opina-aguas.png);
}

.back9{
    width: 222px;
    background-image: url(img/ethos-opina-echales-un-ojo.png);
}

.back10{
    width: 218px;
    background-image: url(img/ethos-opina-les-falto.png);
}

.back11{
    width: 218px;
    background-image: url(img/ethos-opina-para-que-les-duela.png);
}

.back12{
    width: 244px;
    background-image: url(img/ethos-opina-que-paquetote.png);
    background-repeat: no-repeat;
    background-position: left;
}

.back13{
    width:244px;
    background-image: url(img/ethos-opina-cada-quien-lo-suyo.png);
    background-repeat: no-repeat;
    background-position: right;
}

.back14{
    width:244px;
    background-image: url(img/ethos-opina-a-seguir-chambeando.png);
    background-repeat: no-repeat;
    background-position: right;
}

.back15{
    width:244px;
    background-image: url(img/ethos-opina-ahi-la-llevamos.png);
    background-repeat: no-repeat;
    background-position: right;
}

.back16{
    width:244px;
    background-image: url(img/ethos-opina-asi-si-la-armamos.png);
    background-repeat: no-repeat;
    background-position: right;
}

.back17{
    width:244px;
    background-image: url(img/ethos-opina-a-todo-dar.png);
    background-repeat: no-repeat;
    background-position: right;
}

.back18{
    width:244px;
    background-image: url(img/ethos-opina-bien-hecho.png);
    background-repeat: no-repeat;
    background-position: right;
}

.back19{
    width:244px;
    background-image: url(img/ethos-opina-se-quedaron-cortos.png);
    background-repeat: no-repeat;
    background-position: right;
}

.back20{
    width:244px;
    background-image: url(img/ethos-opina-si-se-pudo.png);
    background-repeat: no-repeat;
    background-position: right;
}

.back21{
    width:244px;
    background-image: url(img/ethos-opina-que-buen-plan.png);
    background-repeat: no-repeat;
    background-position: right;
}
.back22 {
    width: 230px;
    background-image: url(img/ethos-opina-orale.png);
    background-repeat: no-repeat;
    background-position: right;
    background-size: cover;
}

/*FOOTER*/
.popover__wrapper__footer a{
  text-decoration: none;
    display: block;
    height: 80px;
    color: #fff;
}


.popover__wrapper__footer {
    position: relative;
    display: inline-block;
}
.popover__content__footer {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    transform: translate(0,10px);
    background-color: #FFF;
    padding: 10px;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
    width: 700px;
}
.popover__content__footer:before {
    position: absolute;
    z-index: -1;
    content: '';
    right: calc(95% - 10px);
    top: -8px;
    border-style: solid;
    border-width: 0 10px 10px 10px;
    border-color: transparent transparent #FFFFFF transparent;
    -moz-transition-duration: 0.3s;
    -webkit-transition-duration: 0.3s;
    -ms-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -moz-transition-property: transform;
    -webkit-transition-property: transform;
    -ms-transition-property: transform;
    -o-transition-property: transform;
    transition-property: transform;
}
.popover__wrapper__footer:hover .popover__content__footer {
    z-index: 10;
    opacity: 1;
    visibility: visible;
    -moz-transform: translate(0,-20px);
    -ms-transform: translate(0,-20px);
    -o-transform: translate(0,-20px);
    -webkit-transform: translate(0,-20px);
    transform: translate(0,-20px);
    -moz-transition: all 0.5s cubic-bezier(0.75, -0.02, 0.2, 0.97);
    -ms-transition: all 0.5s cubic-bezier(0.75, -0.02, 0.2, 0.97);
    -o-transition: all 0.5s cubic-bezier(0.75, -0.02, 0.2, 0.97);
    -webkit-transition: all 0.5s cubic-bezier(0.75, -0.02, 0.2, 0.97);
    transition: all 0.5s cubic-bezier(0.75, -0.02, 0.2, 0.97);
}
p.popover__message__footer {
  text-align: left;
    font-size: 12px;
    line-height: 12px;
    color: #000;
}
