body {
 background: #e2e2e2;
 /*max-width: 80%;
 position: relative;
 margin: 0 auto;*/
 margin-bottom: 100px;
}

.recs-tray {
 padding: 20px;
 margin: 20px 0;
 background: white;
}

.recs-tray h3 {
 margin: 0;
}

.recs-tray .btn-group {
 margin-bottom: 1em;
 float: right;
}

.recs-tray .response {
 clear: both;
 padding: 0;
}

.recs-tray .response .well {
 margin: 0;
}

.movie-list {
 padding: 0;
 margin: 0;
 list-style: none;
}

.movie-list li {
 display: block;
 float: left;
 margin: 10px;

 width: 200px;
}

.movie-list li img {
 width: 200px;
}

.carousel-control {
 /*
  padding-top:10%;
  width:5%;
*/
}

.movie h5 {
 margin-bottom: 0;
}

.movie .details {
 margin-top: .25em;
}

btn btn-default raw-btn {

 margin-bottom: 10px;
 padding-bottom: 10px;
}

btn-group {
 margin-bottom: 20px;
}

pre.at-element-marker {
 overflow-y: scroll;
 max-height: 520px;
}

.form-table {
 background-color: #c5d8e3;
 border-radius: 10px;

 padding: 50px;
 margin 0: auto;
 margin: 20px;

}

.well {
 min-height: 250px;
}

.tooltip {
 position: relative;
 display: inline-block;
 border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
 visibility: hidden;
 width: 120px;
 background-color: black;
 color: #fff;
 text-align: center;
 border-radius: 6px;
 padding: 5px 0;
 position: absolute;
 z-index: 1;
 bottom: 50%;
 left: 50%;
 margin-left: -60px;
}

.tooltip .tooltiptext::after {
 content: "";
 position: absolute;
 top: -1%;
 left: 50%;
 margin-left: -5px;
 border-width: 5px;
 border-style: solid;
 border-color: black transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
 visibility: visible;
}

.rating {
 font-size: 10px;
}

.page-header {
 margin: 20px 0;
 padding: 0;
 background: #fff;
}

.page-header img {
 width: 100%;
}

.page-header .row {
 display: flex;
 align-items: flex-end;
 padding: 20px;
}

.page-header.backdrop {
 background-size: cover;
 -ms-background-size: cover;
 -o-background-size: cover;
 -moz-background-size: cover;
 -webkit-background-size: cover;
 color: #fff;
}

.page-header.backdrop .overlay {
 background: rgba(0, 0, 0, .5);
}

.page-header h2 {
 margin-bottom: 1em;
}

.page-header .movie-details {
 padding: 20px;
}

#movie-attributes {
 list-style: none;
 padding: 0;
}

#movie-attributes li {
 width: 100%;
 overflow: hidden;
}

#movie-attributes li h5 {
 float: left;
 width: 100px;
 margin: 0;
 color: #ccc;
}

.page-section {
 background: #fff;
 padding: 20px;
 margin-bottom: 20px;
}

.page-section .row {
 padding: 0 20px;
}

.page-section h3 {
 margin: 0 0 1em 0;
 padding-bottom: .25em;
 border-bottom: 3px solid #eee;
}

#actor-list {
 list-style: none;
 padding: 0;
}

#actor-list .row {
 margin-bottom: 20px;
}

#actor-list [class|="col"] {
 text-align: center;
}

#actor-list .thumb {
 display: block;
 width: 75%;
 height: 0;
 padding-bottom: 75%;
 background: #eee;
 border-radius: 50%;
 overflow: hidden;
 margin: 0 auto 10px auto;
}

#actor-list .thumb img {
 width: 100%;
 float: left;
 margin-top: -25%;
}

.actor-movies-tray {
 display: none;
 border-top: 1px solid #eee;
 border-bottom: 1px solid #eee;
 margin-bottom: 20px;
 padding: 20px;
 background-color:#6f6f6f;
}

.actor-movies-tray h4 {
 margin: 0 0 20px 0;
 color: white;
}
    
.actor-movies-tray a {
 color: white;
}

.tooltip {
 position: relative;
 display: inline-block;
 border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
 visibility: hidden;
 width: 120px;
 background-color: black;
 color: #fff;
 text-align: center;
 border-radius: 6px;
 padding: 5px 0;
 /* Position the tooltip */
 position: absolute;
 z-index: 1;
}

.tooltip:hover .tooltiptext {
 visibility: visible;
}

html {
 position: relative;
 min-height: 100%;
}

/*
.container {
 margin-bottom: 100px;
}
*/

.attribution img {
 max-width: 150px;
 max-height: 100px;
 margin-right: 200px;
 padding-top: 30px;
 padding-bottom: 50px;
 opacity: 0.3;
}
.attribute ul {
  list-style-type: none;
}

.footer {
 position: absolute;
 bottom: 0;
 width: 100%;
 height: 100px;
}