/*
####################################################
M O D A L S
####################################################
*/


/* Ensure scrolling */

.modal {
    overflow-y: auto;
    color: white;
}


.modal {
    background-color: rgba(255, 255, 255, 0.6);
    border: 1px solid white;
}

.modal-content {
    background-color: rgba(0, 0, 0, 1);
    border-radius: 15px;
}


.modal-title {
padding-left:50px;
}

.modal-title img {
    padding-top:25px;
    width:425px;
    }



.modal-subtitle {
    padding:25px 0px 25px 15px;
    color: gray;
    }

#login a {
    color: #29b5a8;
}

.modal-body {
    padding: 0 50px;
}


/* Center modal vertically and horizontally */

.modal-dialog {
    min-height: -webkit-calc(100vh - 60px);
    min-height: -moz-calc(100vh - 60px);
    min-height: calc(100vh - 60px);
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    overflow: auto;
}



.close {
    color: white;
    font-size: 2.5rem;
    font-weight: 900;
    text-shadow: none;
}

.close:hover {
    color: red;
    font-size: 2.5rem;
    font-weight: 900;
    text-shadow: none;
}

.thumbnails {
    padding: 10px 20px 10px 10px;
}

.thumbnails .btn {
    font-size: 20px;
}

.videoThumbnail {
    padding: 10px;
}

.thumbnails img {
    width: 100%;
    padding: 10px;
}

.modal-tiny {
    max-width: 300px !important;
}

.modal-tiny .modal-content {
    color: #fff;
    background-color: #000;
}

.modal-xxl {
    max-width: 95% !important;
}