.main-container {
    //padding: 40px 15px;
}
.skyblue {
    background-color: #22c8ff;
}
.deepskyblue {
    background-color: #00bfff;
}
.darkerskyblue {
    background-color: #00a6dd;
}
.carousel-indicators {
    bottom: 0;
}
.carousel-control.right,
.carousel-control.left {
    background-image: none;
}
.carousel .item {
    min-height: 550px;
    height: 100%;
    width:100%;

    background-repeat: no-repeat;
    background-size: cover;
}
.carousel-caption {
    display: inline-block;
    max-width: 600px;
    margin: auto;
    background: rgba(255,255,255,.8);
    //color: #000;
    padding: 10px 30px;
    border-radius: 12px;
    bottom: 50px !important;
    text-shadow: none;
}

.slider-title {
    font: bold 26px titlefont !important;
    color: #3A5BA2;
    letter-spacing: 0.2em;
}

.slider-desc {
    font: 18px theatre-nusx !important;
    /*color: #3A5BA2;*/
    color: #074c6d;
}


.carousel-caption .playbill-date {
    margin-top: 60px !important;
}

.carousel-caption .playbill-date span {
    background: rgba(58,91,162, .8);
    color: white;
    padding: 12px;
    border-radius: 5px;
}

.carousel-caption .playbill-date span:not(:last-child) {
    margin-right: 5px;
}


.carousel-caption h3 {
    //font-family: titlefont;
}

.carousel .icon-container,
.carousel-caption button {
    background-color: #09c;
}

.carousel .icon-container {
    display: inline-block;
    font-size: 25px;
    line-height: 25px;
    padding: 1em;
    text-align: center;

    border-radius: 50%;
}
.carousel-caption button {
    border-color: #00bfff;
    margin-top: 1em;
}

.carousel-caption table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 10px;
}

/* Animation delays */
.carousel-caption h3:first-child {
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}
.carousel-caption h3:nth-child(2) {
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
}
.carousel-caption button {
    -webkit-animation-delay: 3s;
    animation-delay: 3s;
}


@media only screen and (max-width:900px) {

    .title-big-with-background, .slider-title {
        font-size: 16px !important;
    }

    .carousel .item {
        min-height: 100px;
        height: 250px !important;

        width: 100%;


        background-repeat: no-repeat;
        background-size: cover;
    }
}