/* Add here all your css styles (customizations) */
.tooltip-inner {
    background-color:red;
}
.tooltip-arrow {
      border-top-color: red;
}
.videocontainer {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}
.video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
@media only screen and (min-device-width: 768px){

    #dd-modal {
        display: none;
        position: fixed;
        top: 30%;
        left: 50%;
        height: 650px;
        width: 500px;
        margin-top: -140px;
        margin-left: -250px;
        background: none repeat scroll 0% 0% padding-box #d9edf7;
        border: 15px solid #3498db;
        border-radius: 5px 5px 5px 5px;
        z-index: 20000;
        padding: 20px;
        text-shadow: none;
        line-height: 1.5em;
    }
}
@media only screen and (max-device-width: 768px){

    #dd-modal {
        display: none;
        position: fixed;
        top: 30%;
        left: 50%;
        height: 650px;
        width: 300px;
        margin-top: -140px;
        margin-left: -150px;
        background: none repeat scroll 0% 0% padding-box #d9edf7;
        border: 15px solid #3498db;
        border-radius: 5px 5px 5px 5px;
        z-index: 20000;
        padding: 20px;
        text-shadow: none;
        line-height: 1.5em;
    }
}

@media (min-width: 768px) {
    .modal-dialog {
        width: 600px;
        margin: 30px auto;
    }
}
@media (min-width: 1024px) {
    .modal-dialog {
        width: 980px;
        margin: 30px auto;
    }
}

.glyphicon {
    top:0px;
}

.carousel-inner > .item > img, .carousel-inner > .item > a > img {
    display: block;
    /* max-width:100%; */
    height: auto;
    line-height: 1;
    width: 100%;
}