#carousel {
    position: relative;
    height: 300px;
    transform: translateY(-10%);
    overflow: hidden;
}

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

        #carousel div img {
            width: 400px;
            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(50px) translateX(-50%);
        }

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

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

            #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(50px) translateX(-50%);
        }

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

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

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

.buttons {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.right {
    width: 80px;
    margin-top: 60px;
}

.left {
    width: 80px;
    margin-top: 60px;
}

@media (max-width: 767px) {
    #carousel {
        position: relative;
        height: 150px;
        transform: translateY(-10%);
        overflow: hidden;
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    .buttons {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }

    .right {
        width: 80px;
        margin-top: 60px;
    }

    .left {
        width: 80px;
        margin-top: 60px;
    }
}

#title {
    text-align: center;
}

#desc {
    text-indent: 30px;
    margin-left: 15%;
}

.title-qcard {
    text-align: center;
}

.desc-qcard {
    text-indent: 30px;
    margin-left: 15%;
}