@import url('https://fonts.googleapis.com/css2?family=Expletus+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap');

body, body * {
    font-family: 'Expletus Sans', cursive;
}

html, body.streaming-wars {
    background: #00606c;
    background: -moz-radial-gradient(center, ellipse cover, #00606c 0%, #003552 100%);
    background: -webkit-radial-gradient(center, ellipse cover, #00606c 0%,#003552 100%);
    background: radial-gradient(ellipse at center, #00606c 0%,#000 100%);
    background-image: url("../images/circuit.jpg"), radial-gradient(ellipse at center, #00606c 0%,#000 100%);
    background-blend-mode: difference;
}

@-webkit-keyframes light {
    100% {
        -webkit-transform: translate3d(50%, 30%, 10px);
        transform: translate3d(50%, 30%, 10px);
    }
}

@keyframes light {
    100% {
        -webkit-transform: translate3d(50%, 30%, 10px);
        transform: translate3d(50%, 30%, 10px);
    }
}

a { cursor: pointer; }

a:link { text-decoration: none; border:0; }
a:visited { text-decoration: none; border:0; }
a:hover { text-decoration: none; border:0;  }
a:active { text-decoration: none; border:0; }

a:focus { outline: none; }

div.wrapper {
    text-align: center;
}

div.content {
    width: 100%;
    float: left;
    margin-top: 80px;
    margin-bottom: 20px;
    font-size: 22px;
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 10px;
    font-family: 'riviera';
}

select#movies {
    height: 500px;
    border: 1px solid #fff;
    border-bottom: 2px solid #11b2ab;
}

.import-movie .content {
    background: none;
    margin-top: 0px;
    color: #fff;
}

.import-movie div.streaming-wars-menu ul {
    width: 915px;
}

.import-movie .content form {
    width: 700px;
    margin: auto;
}

.import-movie .content form div.field {
    float: left;
    width: 100%;
    margin-bottom: 20px;
}

.import-movie .content form label {
    float: left;
}

.import-movie .content form input,
.import-movie .content form select,
.import-movie .content form textarea,
input#imdbloader {
    font-size: 22px;
    float: right;
    width: 400px;
    clear: right;
    border: 1px solid transparent;
    border-bottom: 2px solid #11b2ab;
    background: none;
    color: #fff;
    box-sizing: border-box;
    padding: 3px 5px;
    line-height: 26px;
}

.import-movie .content form textarea {
    border: 1px solid #fff;
    border-bottom: 2px solid #11b2ab;
}

.import-movie .content form input:focus,
.import-movie .content form select:focus,
.import-movie .content form textarea:focus {
    border: 2px solid #11b2ab;
    outline: none;
    box-shadow: none;
}

.import-movie .content form .button-container {
    margin-top: 50px;
    float: left;
    width: 100%;
}

.import-movie .content form button {
    display: block;
    padding: 10px 20px;
    font-size: 22px;
    color: #fff;
    width: 300px;
    background: #11b2ab;
    border: 2px solid #11b2ab;
    cursor: pointer;
    line-height: 28px;
    border-radius: 2px;
    height: 50px;
    transition: 0.5s ease all;
    margin: auto;
}

.import-movie .content form button:hover {
    background: transparent;
    color: #11b2ab;
}

.import-movie .content .importer {
    width: 700px;
    margin: auto;
}

.import-movie .content .importer h3 {
    border-bottom: 2px solid #f68b6d;
}

div.streaming-wars-menu {
    float: left;
    width: 100%;
    display: block;
    margin-bottom: 20px;
}
div.streaming-wars-menu ul {
    margin: 40px auto 20px auto;
    width: 760px;
}

div.streaming-wars-menu ul li {
    float: left;
    font-family: 'Expletus Sans', cursive;
    list-style: none;
    margin-right: 30px;
}

div.streaming-wars-menu ul li a {
    font-size: 28px;
    color: #fff;
    display: block;
    transition: transform .5s;
    text-decoration: none;
}

div.streaming-wars-menu ul li a.search {
    color: #f68b6d;
    font-size: 20px;
    line-height: 39px;
}

div.streaming-wars-menu ul li a.active {
    border-bottom: 2px solid #f68b6d;
}

div.streaming-wars-menu ul li a:hover {
    transform: scale(1.2);
}

div.streaming-wars-menu ul.close {
    display: none;
}

div.streaming-wars-menu ul.close li {
    margin-top: 40px;
}

div.grid.movies {
    width: 100%;
    max-width: 1500px;
    margin: auto;
}

div.grid.movies div.item {
    float: left;
    position: relative;
    width: 300px;
    padding: 0 10px;
    box-sizing: border-box;
    transition: transform .5s;
    margin: 10px 0;
    cursor: pointer;
    overflow: hidden;
}

div.grid.movies div.item:hover {
    z-index: 1;
}

div.grid.movies div.item .details {
    display: none;
    position: absolute;
    top: 60%;
    width: 100%;
    box-sizing: border-box;
    left: 0;
    padding: 0 30px;
    text-align: left;
    font-family: 'Expletus Sans', cursive;
    color: #fff;
}

div.grid.movies div.item:hover .details {
    display: block;
}

div.grid.movies div.item .details h2 {
    border-bottom: 2px solid #f68b6d;
    width: auto;
    float: left;
    font-size: 18px;
}

div.grid.movies div.item .details p.runtime {
    float: left;
    clear: left;
    margin-bottom: 0;
    font-size: 14px;
    margin-top: 0;
}

div.grid.movies div.item .details p.genre {
    float: left;
    clear: left;
    margin-top: 0;
    font-size: 14px;
}

div.grid.movies div.item .details p.rating {
    float: left;
    clear: left;
    margin-top: 0;
    font-size: 14px;
    text-align: right;
    width: 100%;
}

div.grid.movies div.item img {
    width: 100%;
    object-fit: cover;
    float: left;
    transition: 1s ease all;
}

div.grid.movies div.item:hover img {
    filter: brightness(0.2);
    transform: scale(1.5);
}

div.streaming-wars-details-panel {
    position: fixed;
    transform: translateY(-110%);
    width: calc(100% - 40px);
    height: calc(100% - 40px);
    transition: transform .5s;
    z-index: 10;
    box-sizing: border-box;
    color: #11b2ab;
    padding: 20px;
    margin: 0 20px;
    overflow: hidden;
    background: #00606c;
    background: -moz-radial-gradient(center, ellipse cover, #00606c 0%, #003552 100%);
    background: -webkit-radial-gradient(center, ellipse cover, #00606c 0%,#003552 100%);
    background: radial-gradient(ellipse at center, #00606c 0%,#000 100%);
    background-image: url("../images/circuit.jpg"), radial-gradient(ellipse at center, #00606c 0%,#000 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00606c', endColorstr='#003552',GradientType=1 );
    background-blend-mode: luminosity;
}

div.streaming-wars-details-panel.open {
    transform: translateY(20px);
}

div.streaming-wars-details-panel span.close,
div.streaming-wars-details-panel span.closeratings {
    position: absolute;
    top: 5px;
    right: 10px;
    font-size: 30px;
    color: #fff;
    cursor: pointer;
    z-index: 200;
}

div.streaming-wars-details-panel .left {
    width: 35%;
    float: left;
    padding-right: 20px;
    box-sizing: border-box;
}

div.streaming-wars-details-panel .right {
    width: 65%;
    float: left;
}

div.streaming-wars-details-panel .right img {
    width: 100%;
    transition: 2.5s ease all;
    float: left;
    z-index: 11;
    position: relative;
}

div.streaming-wars-details-panel .right img:hover {
    filter: saturate(0.5);
    transform: rotate(5deg) scale(1.2);
}

div.streaming-wars-details-panel .right div.wallpaper-image {
    overflow: hidden;
    border: 1px solid #11b2ab;
    box-shadow: 0px 0px 7px 0px #11b2ab;
    position: relative;
}

div.anim-container {
    position: relative;
    padding: 2px;
    overflow: hidden;
}

.spotlight {
    position: absolute;
    bottom: 0;
    right: 0;
    pointer-events: none;
    z-index: 10;
    -webkit-animation: light 15s infinite linear;
    animation: light 15s infinite linear;
    background: radial-gradient(circle, white, transparent 25%) 0 0/25% 25%, radial-gradient(circle, white, black 25%) 50% 50%/12.5% 12.5%;
    top: -100%;
    left: -100%;
    mix-blend-mode: color-dodge;
}

div.streaming-wars-details-panel h2.title {
    border-bottom: 2px solid #f68b6d;
    width: auto;
    float: left;
}

div.streaming-wars-details-panel .left p {
    float: left;
    clear: left;
    margin-top: 0;
    font-size: 16px;
}

div.streaming-wars-details-panel .left div.rating {
    float: left;
    width: 100%;
}

div.streaming-wars-details-panel .left div.additionalrating {
    float: left;
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 8px;
    margin-top: 20px;
    align-items: baseline;
    flex-wrap: wrap;
}

.stars {
    --percent: calc(var(--rating) / 10 * 100%);
    display: inline-block;
    font-size: 20px;
    font-family: Times;
    line-height: 1;
}

.stars:before {
    content: '★★★★★★★★★★';
    letter-spacing: 3px;
    background: linear-gradient(90deg, #f68b6d var(--percent), #fff var(--percent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

div.streaming-wars-details-panel .left a,
div.streaming-wars-details-panel .right a {
    color: #fff;
    display: inline-block;
    transition: transform 0.5s;
}

div.streaming-wars-details-panel .left a:hover,
div.streaming-wars-details-panel .right a:hover {
    transform: scale(1.2);
}

div.streaming-wars-details-panel .left .people {
    float: left;
    width: 100%;
    margin-top: 20px;
}

div.streaming-wars-details-panel .right .cloudtag {
    padding: 0 10%;
    margin-top: 40px;
    display: none;
}

div.streaming-wars-details-panel .right p.review {
    color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'%3E%3C/g%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'%3E%3C/g%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Cpath opacity='0.5' d='M22 10.5V12C22 16.714 22 19.0711 20.5355 20.5355C19.0711 22 16.714 22 12 22C7.28595 22 4.92893 22 3.46447 20.5355C2 19.0711 2 16.714 2 12C2 7.28595 2 4.92893 3.46447 3.46447C4.92893 2 7.28595 2 12 2H13.5' stroke='%2311b2ab' stroke-width='1.5' stroke-linecap='round'%3E%3C/path%3E%3Cpath d='M17.3009 2.80624L16.652 3.45506L10.6872 9.41993C10.2832 9.82394 10.0812 10.0259 9.90743 10.2487C9.70249 10.5114 9.52679 10.7957 9.38344 11.0965C9.26191 11.3515 9.17157 11.6225 8.99089 12.1646L8.41242 13.9L8.03811 15.0229C7.9492 15.2897 8.01862 15.5837 8.21744 15.7826C8.41626 15.9814 8.71035 16.0508 8.97709 15.9619L10.1 15.5876L11.8354 15.0091C12.3775 14.8284 12.6485 14.7381 12.9035 14.6166C13.2043 14.4732 13.4886 14.2975 13.7513 14.0926C13.9741 13.9188 14.1761 13.7168 14.5801 13.3128L20.5449 7.34795L21.1938 6.69914C22.2687 5.62415 22.2687 3.88124 21.1938 2.80624C20.1188 1.73125 18.3759 1.73125 17.3009 2.80624Z' stroke='%2311b2ab' stroke-width='1.5'%3E%3C/path%3E%3Cpath opacity='0.5' d='M16.6522 3.45508C16.6522 3.45508 16.7333 4.83381 17.9499 6.05034C19.1664 7.26687 20.5451 7.34797 20.5451 7.34797M10.1002 15.5876L8.4126 13.9' stroke='%2311b2ab' stroke-width='1.5'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 32px auto;
    padding-left: 40px;
    font-size: 12px;
}

div.streaming-wars-details-panel .right .cloudtag a {
    margin: 0 5px;
}

div.streaming-wars-details-panel .right .cloudtag a {
    font-size: 15px;
}

div.streaming-wars-details-panel .right .cloudtag a:nth-of-type(3n + 1) {
    font-size: 20px;
}

div.streaming-wars-details-panel .right .cloudtag a:nth-of-type(5n + 3) {
    font-size: 24px;
}

div.streaming-wars-details-panel .right .cloudtag a:nth-of-type(4n + 3) {
    font-size: 22px;
}

div.streaming-wars-details-panel .left .people ul li {
    list-style: none;
}

div.streaming-wars-details-panel a.medium {
    position: absolute;
    bottom: 10px;
    right: 10px;
    color: #fff;
    font-size: 32px;
    transition: all 0.5s;
}

div.streaming-wars-details-panel a.medium:hover {
    transform: scale(1.2) rotate(15deg);
}

a.burger-menu {
    color: #fff;
    font-size: 24px;
    position: absolute;
    left: 10px;
    top: 20px;
    display: none;
}

div.more-like-this, div.show-episodes, div.plot {
    float: left;
    width: 100%;
    margin-top: 20px;
}

div.plot span.description {
    display: block;
    padding-left: 40px;
    color: #fff;
}

div.more-like-this span, div.show-episodes span {
    float: left;
    width: 100%;
}

div.more-like-this ul {
    padding: 0;
    float: left;
    width: 100%;
}

div.more-like-this ul li {
    padding: 10px;
    list-style: none;
    float: left;
    width: 200px;
    box-sizing: border-box;
    height: 200px;
}

.largecastlist div.more-like-this ul li {
    width: 100px;
    height: 100px;
}

div.more-like-this ul li div {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

div.more-like-this ul li img {
    width: 100%;
    cursor: pointer;
    filter: saturate(0);
    transition: 1s ease all;
}

div.more-like-this ul li img:hover {
    transform: scale(1.2) rotate(-10deg);
    filter: saturate(1);
}

div.grid.movies div.item div.img-container {
    float: left;
    width: 100%;
}

div.grid.movies div.item div.img-container {
    border: 1px solid transparent;
    overflow: hidden;
}

div.grid.movies div.item:hover div.img-container {
    border: 1px solid #11b2ab;
    box-shadow: 0px 0px 7px 0px #11b2ab;
}

div.more-like-this ul li div {
    border: 1px solid #11b2ab;
    box-shadow: 0px 0px 7px 0px #11b2ab;
}

div.streaming-wars-menu ul.searchform {
    float: left;
    width: 100%;
    margin-top: 20px;
    padding: 0;
    display: none;
}

div.streaming-wars-menu ul.searchform li {
    float: none;
}

div.streaming-wars-menu ul.searchform input {
    font-size: 28px;
    background: transparent;
    border: none;
    border-bottom: 2px solid white;
    color: #fff;
    width: 400px;
}

div.streaming-wars-menu ul.searchform input:focus {
    outline: none;
}

div.grid.movies div.item.filtered {
    display: none;
}

div.grid.movies div.item.filteredresult {
    display: block;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-animation: scaleUp 0.65s ease-in-out forwards;
    animation: scaleUp 0.65s ease-in-out forwards;
}

button.cancel {
    background: none;
    color: #f68b6d;
    border: none;
    cursor: pointer;
    margin-left: -35px;
}

button.cancel:focus {
    outline: none;
    border: none;
}

div.spin {
    color: #fff;
    width: 25px;
    height: 25px;
    position: relative;
    margin-left: -38px;
    display: none;
}

div.spin .icon-spin2:before {
    width: 25px;
    height: 25px;
    line-height: 25px;
}

ul.searchform.processing div.spin {
    display: inline-block;
}

.twocolumns {
    columns: 2;
}

.loginpage .logo {
    padding-top: 40px;
    text-align: center;
}

.loginpage div.form {
    width: 400px;
    margin: 60px auto;
}

.loginpage div.form input {
    width: 100%;
    margin-bottom: 20px;
    border: none;
    background: none;
    border-bottom: 2px solid #11b2ab;
    font-family: 'Expletus Sans', cursive;
    color: #fff;
    height: 40px;
    font-size: 18px;
}

.loginpage div.form input:focus {
    outline: none;
}

.loginpage div.form input.button {
    background: #11b2ab;
    border: 2px solid #11b2ab;
    cursor: pointer;
    line-height: 50px;
    border-radius: 2px;
    height: 50px;
    transition: 0.5s ease all;
}

.loginpage div.form input.button:hover {
    background: transparent;
    color: #11b2ab;
}

.episodes-screen {
    float: left;
    width: 100%;
}

.episodes-screen ul {
    float: left;
    width: 100%;
    list-style: none;
    box-sizing: border-box;
    column-count: 2;
}

.episodes-screen ul li {
    width: 100%;
    float: left;
    color: #fff;
    font-size: 13px;
}

.episodes-screen ul li span {
    float: none;
    color: #11b2ab;
}

.show-episodes div.header {
    float: left;
    width: 100%;
    height: auto;
    text-align: left;
    color: #fff;
    font-size: 18px;
    margin-top: 20px;
    padding-left: 40px;
}

.show-episodes div.header span {
    float: left;
    width: auto;
    margin-right: 10px;
}

.show-episodes div.header span.left {
    margin-left: 40px;
    cursor: pointer;
    color: #11b2ab;
    padding-right: 0;
}

.show-episodes div.header span.left:hover {
    color: #fff;
}

.show-episodes div.header span.right {
    cursor: pointer;
    color: #11b2ab;
}

.show-episodes div.header span.right:hover {
    color: #fff;
}

.concert-songs div.header {
    display: none;
}

.procedure-help {
    text-align: left;
    color: #fff;
    font-size: 10px;
}

.procedure-help ul {
    display: none;
}

.procedure-help span.help {
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' %3F%3E%3Csvg height='48' viewBox='0 0 48 48' width='48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h48v48h-48z' fill='none' fill-opacity='0'/%3E%3Cpath d='M24 4c-11.05 0-20 8.95-20 20s8.95 20 20 20 20-8.95 20-20-8.95-20-20-20zm2 34h-4v-4h4v4zm4.13-15.49l-1.79 1.84c-1.44 1.44-2.34 2.65-2.34 5.65h-4v-1c0-2.21.9-4.21 2.34-5.66l2.49-2.52c.72-.72 1.17-1.72 1.17-2.82 0-2.21-1.79-4-4-4s-4 1.79-4 4h-4c0-4.42 3.58-8 8-8s8 3.58 8 8c0 1.76-.71 3.35-1.87 4.51z' fill='%23ffffff'/%3E%3C/svg%3E");
    width: 25px;
    height: 25px;
    display: block;
    background-size: 25px;
}

div.movietags {
    text-align: left;
}

div.separator {
    width: 100%;
    float: left;
    text-align: center;
    margin: 20px 0;
}

div.separator div.line {
    height: 1px;
    background: #f68b6d;
    max-width: 1480px;
    width: 100%;
    margin: auto;
}

/* HTML: <div class="loader"></div> */
.loader {
    width: 50px;
    aspect-ratio: 1;
    --_c:no-repeat radial-gradient(farthest-side,#11b2ab 92%,#0000);
    background:
            var(--_c) top,
            var(--_c) left,
            var(--_c) right,
            var(--_c) bottom;
    background-size: 12px 12px;
    animation: l7 1s infinite;
}
@keyframes l7 {to{transform: rotate(.5turn)}}

div.loadMovieData {
    width: 100%;
    text-align: center;
    margin: 20px 0;
    float: left;
}

div.loadMovieData input#imdbloader {
    margin: auto;
    float: none;
}

div.loadMovieData div.loader {
    margin: auto;
    display: none;
}

.import-show-ratings .episodes .dummy {
    display: none;
}

.import-show-ratings .shows .loader {
    display: none;
    margin: auto;
    margin-top: 90px;
}

.import-show-ratings .episodes {
    margin-top: 40px;
    float: left;
}

.streaming-wars-details-panel.showratings {
    overflow-y: scroll;
}

.import-show-ratings .episodes input[type='text'] {
    width: 60px;
}

.streaming-wars-details-panel.showratings .title {
    float: left;
}

.streaming-wars-details-panel.showratings .poster {
    width: 100%;
    max-width: 500px;
    float: left;
    clear: left;
}

.streaming-wars-details-panel.showratings .toplist {
    float: left;
    width: 100%;
}

.streaming-wars-details-panel.showratings .toplist ul {
    margin: 0;
    padding: 0;
}

.streaming-wars-details-panel.showratings .toplist ul li {
    float: left;
    width: 100%;
    list-style: none;
}

.streaming-wars-details-panel.showratings .toplist .high,
.streaming-wars-details-panel.showratings .toplist .low {
    margin-bottom: 30px;
    float: left;
}

.streaming-wars-details-panel.showratings .toplist h3 {
    color: #fff;
    margin-bottom: 0;
}

.streaming-wars-details-panel.showratings .toplist span.ep {
    width: 250px;
    margin-right: 20px;
    display: inline-block;
}

.streaming-wars-details-panel.showratings .toplist span.rat {
    width: 60px;
    display: inline-block;
}

.streaming-wars-details-panel.showratings .toplist span.rat:after {
    content: '★';
    letter-spacing: 3px;
    background: linear-gradient(90deg, #f68b6d 100%, #fff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-left: 3px;
    float: right;
}

.streaming-wars-details-panel.showratings .grid {
    overflow-x: scroll;
    white-space: nowrap;
}

.streaming-wars-details-panel.showratings .grid div.row {
    float: left;
    width: 100%;
    margin-bottom: 5px;
    border: none;
    background: none;
}

.streaming-wars-details-panel.showratings .grid div.header,
.streaming-wars-details-panel.showratings .grid div.episodeno,
.streaming-wars-details-panel.showratings .grid div.rating
{
    float: left;
    width: 70px;
    display: block;
    height: 50px;
    text-align: center;
    margin-right: 5px;
    line-height: 50px;
}

.streaming-wars-details-panel.showratings .grid div.header,
.streaming-wars-details-panel.showratings .grid div.episodeno {
    color: #fff;
}

.streaming-wars-details-panel.showratings .grid div.header {
    display: inline-block;
    float: none;
    border-radius: 5px;
}

.streaming-wars-details-panel.showratings .grid div.rating {
    background: #11b2ab;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
    position: relative;
    z-index: 1;
    display: inline-block;
    float: none;
}

.streaming-wars-details-panel.showratings .grid div.rating:hover {
    opacity: 0.75;
    z-index: 2;
}

.streaming-wars-details-panel.showratings .grid div.rating span.title {
    position: absolute;
    background: rgba(0, 0, 0, 0.95);
    color: #fff;
    text-align: center;
    width: 150px;
    top: 0px;
    left: -40px;
    line-height: 22px;
    min-height: 50px;
    padding: 5px;
    text-wrap: balance;
    align-items: center;
    justify-content: center;
}

.streaming-wars-details-panel.showratings .grid div.rating:hover span.title {
    display: flex;
}

.streaming-wars-details-panel.showratings .grid div.rating.empty {
    background: none;
}

.streaming-wars-details-panel.showratings .grid div.row .rating .title {
    display: none;
}

div.show-episodes span.showratings {
    float: none;
    color: #fff;
    cursor: pointer;
}

div.show-episodes span.showratings:hover {
    color: #11b2ab;
}

.ratingdrama:before {
    content: ' ';
    background: url('../images/icons/drama.svg') center center;
    background-size: auto 36px;
    background-repeat: no-repeat;
    display: inline-block;
    height: 36px;
    width: 36px;
    margin-right: 5px;
    position: relative;
    top: 8px;
}

.ratingpopcorn:before {
    content: ' ';
    background: url('../images/icons/popcorn.svg') center center;
    background-size: auto 36px;
    background-repeat: no-repeat;
    display: inline-block;
    height: 36px;
    width: 36px;
    margin-right: 5px;
    position: relative;
    top: 8px;
}

.ratingimdb:before {
    content: ' ';
    background: url('../images/icons/imdb.png') center center;
    background-size: auto 26px;
    background-repeat: no-repeat;
    display: inline-block;
    height: 26px;
    width: 64px;
    margin-right: 5px;
    position: relative;
    top: 6px;
}

.ratingletterboxd:before {
    content: ' ';
    background: url('../images/icons/letterboxd.png') center center;
    background-size: auto 26px;
    background-repeat: no-repeat;
    display: inline-block;
    height: 26px;
    width: 64px;
    margin-right: 3px;
    position: relative;
    top: 6px;
}

.ratingrottentomatoes:before {
    content: ' ';
    background: url('../images/icons/rotten_tomatoes_critics.png') center center;
    background-size: auto 26px;
    background-repeat: no-repeat;
    display: inline-block;
    height: 26px;
    width: 44px;
    margin-right: 0px;
    position: relative;
    top: 6px;
}

.ratingrottentomatoes.bad:before {
    background: url('../images/icons/rotten_tomatoes_critics_bad.png') center center;
    background-size: auto 26px;
    background-repeat: no-repeat;
}

.ratingrottenaudience:before {
    content: ' ';
    background: url('../images/icons/rotten_tomatoes_audience.png') center center;
    background-size: auto 26px;
    background-repeat: no-repeat;
    display: inline-block;
    height: 26px;
    width: 40px;
    margin-right: 0px;
    position: relative;
    top: 6px;
}

.ratingrottenaudience.bad:before {
    background: url('../images/icons/rotten_tomatoes_audience_bad.png') center center;
    background-size: auto 26px;
    background-repeat: no-repeat;
}

.ratingmetacritic:before {
    content: ' ';
    background: url('../images/icons/metacritic.png') center center;
    background-size: auto 26px;
    background-repeat: no-repeat;
    display: inline-block;
    height: 26px;
    width: 40px;
    margin-right: 0px;
    position: relative;
    top: 6px;
}

.ratingtmdb:before {
    content: ' ';
    background: url('../images/icons/tmdb.png') center center;
    background-size: auto 26px;
    background-repeat: no-repeat;
    display: inline-block;
    height: 26px;
    width: 40px;
    margin-right: 6px;
    position: relative;
    top: 6px;
}

.ratingdivider {
    margin: 0 10px;
}

div.additionalrating > div:hover:before {
    mix-blend-mode: hard-light;
}

.ranking-table td.rank-title {
    text-align: left;
}

.ranking-table th.score {
    text-align: center;
}

.ranking-table th img {
    max-width: 48px;
    max-height: 48px;
}

@media only screen and (max-width: 1515px) {
    div.grid.movies {
        max-width: 1200px;
    }
}

@media only screen and (max-width: 1215px) {
    div.grid.movies {
        max-width: 900px;
    }
}

@media only screen and (max-width: 915px) {
    div.grid.movies {
        max-width: 600px;
    }
}

@media only screen and (max-width: 800px) {
    a.burger-menu {
        display: block;
    }

    div.streaming-wars-menu {
        width: 350px;
        background: rgba(0,0,0,0.85);
        height: 100%;
        min-height: 600px;
        position: fixed;
        z-index: 10;
        transform: translateX(-100%);
        transition: 0.5s ease all;
    }

    div.streaming-wars-menu.open {
        transform: translateX(0);
    }

    div.streaming-wars-menu ul {
        width: 100%;
        box-sizing: border-box;
    }

    div.streaming-wars-menu ul li {
        width: 100%;
        text-align: left;
        margin: 0;
    }

    div.streaming-wars-menu ul li a.active {
        border: none;
    }

    div.streaming-wars-menu ul.close {
        display: block;
    }

    div.grid.movies {
        padding-top: 40px;
    }

    div.streaming-wars-menu ul.searchform {
        padding-left: 40px;
        display: block;
    }

    div.streaming-wars-menu ul li a.search {
        display: none;
    }

    div.streaming-wars-menu ul.searchform input {
        width: auto;
    }
}

@media only screen and (max-width: 769px) {
    div.streaming-wars-details-panel .left,
    div.streaming-wars-details-panel .right {
        width: 100%;
    }

    div.streaming-wars-details-panel {
        overflow: overlay;
    }

    div.streaming-wars-details-panel a.medium {
        position: relative;
        float: right;
        bottom: auto;
        right: auto;
    }
}

@media all and (device-width: 1024px) and (device-height: 768px) and (orientation:landscape) {
    div.streaming-wars-details-panel .left,
    div.streaming-wars-details-panel .right {
        width: 100%;
    }

    div.streaming-wars-details-panel {
        overflow: overlay;
    }

    div.streaming-wars-details-panel a.medium {
        position: relative;
        float: right;
        bottom: auto;
        right: auto;
    }
}

@media only screen and (max-width: 615px) {
    div.grid.movies div.item {
        width: 50%;
        height: auto;
    }
}

@media only screen and (max-width: 400px) {
    body.loginpage {
        padding: 0 10px;
    }

    .loginpage .logo img {
        width: 100%;
    }

    .loginpage div.form {
        width: 100%;
    }
}


@media only screen and (max-height: 1030px) {
    div.more-like-this ul li {
        width: 100px;
        height: 100px;
    }
}