html, body, main {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

/*#DivCircular {
    background-image: url(../PortalVirtual/AIndex/Imagenes/Comunicado/IconoCircular1.png);
    background-position: center center;
}*/

#carousel {
    /*position: relative;
  height: 400px;
  top: 50%;
  transform: translateY(-50%);
  overflow: hidden;*/
    position: relative;
    height: 120px;
    top: 50%;
    /*transform: translateY(-100%);*/
    overflow: hidden;
   /* z-index: 9;*/
    width: 50%;
    margin: auto;
}

    #carousel div {
        position: absolute;
        transition: transform 1s, left 1s, opacity 1s, z-index 0s;
        opacity: 1;
    }

        #carousel div img {
            width: 220px;
            transition: width 1s;
        }

        #carousel div.hideLeft {
            left: 0%;
            opacity: 0;
            transform: translateY(50%) translateX(-50%);
        }

            #carousel div.hideLeft img {
                width: 200px;
            }

        #carousel div.hideRight {
            left: 100%;
            opacity: 0;
            transform: translateY(50%) translateX(-50%);
        }

            #carousel div.hideRight img {
                width: 200px;
            }

        #carousel div.prev {
            z-index: 5;
            left: 30%;
            transform: translateY(20px) translateX(-50%);
        }

            #carousel div.prev img {
                width: 100px;
            }

        #carousel div.prevLeftSecond {
            z-index: 4;
            left: 15%;
            transform: translateY(70%) translateX(-50%);
            opacity: 0;
        }

            #carousel div.prevLeftSecond img {
                width: 200px;
            }

        #carousel div.selected {
            z-index: 10;
            left: 50%;
            transform: translateY(0px) translateX(-50%);
        }

        #carousel div.next {
            z-index: 5;
            left: 70%;
            transform: translateY(20px) translateX(-50%);
        }

            #carousel div.next img {
                width: 100px;
            }

        #carousel div.nextRightSecond {
            z-index: 4;
            left: 85%;
            transform: translateY(70%) translateX(-50%);
            opacity: 0;
        }

            #carousel div.nextRightSecond img {
                width: 200px;
            }

/*.buttons {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 10px;
}*/





@media only screen and (min-width: 1650px) {

    #carousel div img {
        width: 200px;
        transition: width 1s;
    }

    #carousel div.prev img {
        width: 120px;
    }

    #carousel div.next img {
        width: 120px;
    }

    #carousel div.prevLeftSecond img {
        width: 80px;
    }

    #carousel div.nextRightSecond img {
        width: 80px;
    }

    #carousel div.hideLeft img {
        width: 80px;
    }

    #carousel div.hideRight img {
        width: 80px;
    }
}

@media (min-width: 1400px) and (max-width: 1649px) {
    #carousel {
        height: 100px;
    }

        #carousel div img {
            width: 170px;
            transition: width 1s;
        }

        #carousel div.prev img {
            width: 100px;
        }

        #carousel div.next img {
            width: 100px;
        }

        #carousel div.prevLeftSecond img {
            width: 80px;
        }

        #carousel div.nextRightSecond img {
            width: 80px;
        }

        #carousel div.hideLeft img {
            width: 80px;
        }

        #carousel div.hideRight img {
            width: 80px;
        }
}

@media (min-width: 1170px) and (max-width: 1399px) {
    #carousel {
        height: 100px;
        width: 60%;
    }

        #carousel div img {
            width: 170px;
            transition: width 1s;
        }

        #carousel div.prev img {
            width: 100px;
        }

        #carousel div.next img {
            width: 100px;
        }

        #carousel div.prevLeftSecond img {
            width: 80px;
        }

        #carousel div.nextRightSecond img {
            width: 80px;
        }

        #carousel div.hideLeft img {
            width: 80px;
        }

        #carousel div.hideRight img {
            width: 80px;
        }
}

/* Normal desktop :992px. */
@media (min-width: 992px) and (max-width: 1169px) {
    #carousel {
        height: 80px;
        width: 60%;
    }

        #carousel div img {
            width: 140px;
            transition: width 1s;
        }

        #carousel div.prev img {
            width: 90px;
        }

        #carousel div.next img {
            width: 90px;
        }

        #carousel div.prevLeftSecond img {
            width: 70px;
        }

        #carousel div.nextRightSecond img {
            width: 70px;
        }

        #carousel div.hideLeft img {
            width: 70px;
        }

        #carousel div.hideRight img {
            width: 70px;
        }
}

/* Tablet desktop :768px. */
@media (min-width: 768px) and (max-width: 991px) {
    #carousel {
        height: 70px;
        width: 65%;
    }

        #carousel div img {
            width: 120px;
            transition: width 1s;
        }

        #carousel div.prev img {
            width: 70px;
        }

        #carousel div.next img {
            width: 70px;
        }

        #carousel div.prevLeftSecond img {
            width: 50px;
        }

        #carousel div.nextRightSecond img {
            width: 50px;
        }

        #carousel div.hideLeft img {
            width: 50px;
        }

        #carousel div.hideRight img {
            width: 50px;
        }
}

@media only screen and (min-width: 660px) and (max-width: 767px) {
    #carousel {
        height: 70px;
        width: 75%;
    }

        #carousel div img {
            width: 120px;
            transition: width 1s;
        }

        #carousel div.prev img {
            width: 70px;
        }

        #carousel div.next img {
            width: 70px;
        }

        #carousel div.prevLeftSecond img {
            width: 50px;
        }

        #carousel div.nextRightSecond img {
            width: 50px;
        }

        #carousel div.hideLeft img {
            width: 50px;
        }

        #carousel div.hideRight img {
            width: 50px;
        }

    .nivo-controlNav {
        bottom: -8px;
        top: 0;
        padding: 5px 0;
    }
}

@media only screen and (min-width: 500px) and (max-width: 659px) {
    #carousel {
        height: 60px;
        width: 85%;
    }

        #carousel div img {
            width: 100px;
            transition: width 1s;
        }

        #carousel div.prev img {
            width: 60px;
        }

        #carousel div.next img {
            width: 60px;
        }

        #carousel div.prev {
            transform: translateY(10px) translateX(-50%);
        }

        #carousel div.next {
            transform: translateY(10px) translateX(-50%);
        }

        #carousel div.prevLeftSecond img {
            width: 50px;
        }

        #carousel div.nextRightSecond img {
            width: 50px;
        }

        #carousel div.hideLeft img {
            width: 50px;
        }

        #carousel div.hideRight img {
            width: 50px;
        }
}

@media only screen and (max-width: 500px) {
    #carousel {
        height: 55px;
        width: 100%;
    }

        #carousel div img {
            width: 95px;
            transition: width 1s;
        }

        #carousel div.prev img {
            width: 60px;
        }

        #carousel div.next img {
            width: 60px;
        }

        #carousel div.prev {
            transform: translateY(10px) translateX(-50%);
        }

        #carousel div.next {
            transform: translateY(10px) translateX(-50%);
        }

        #carousel div.prevLeftSecond img {
            width: 50px;
        }

        #carousel div.nextRightSecond img {
            width: 50px;
        }

        #carousel div.hideLeft img {
            width: 50px;
        }

        #carousel div.hideRight img {
            width: 50px;
        }
}