From f2ab8bc5b9c3af6f3706d9ddc96fd7f5a1580b3d Mon Sep 17 00:00:00 2001
From: Nico <nicoandrade@gmail.com>
Date: Wed, 12 Mar 2014 15:37:32 -0300
Subject: [PATCH] TV Mode and Responsive

---
 .gitignore                       |   3 +
 css/app.css                      | 357 +++++++++++++++++--------------
 index.html                       |   3 +-
 js/frontend/ui.js                |   8 +
 js/frontend/views/sidebar.js     |   4 +-
 js/vendor/video-js/font/vjs.eot  | Bin 13112 -> 14520 bytes
 js/vendor/video-js/font/vjs.svg  |   7 +-
 js/vendor/video-js/font/vjs.ttf  | Bin 12964 -> 14356 bytes
 js/vendor/video-js/font/vjs.woff | Bin 8396 -> 9396 bytes
 package.json                     |   4 +-
 sass/_layout.scss                |  66 ++++--
 sass/_moviedetails.scss          | 102 ++++-----
 sass/_movielist.scss             |  24 +--
 13 files changed, 334 insertions(+), 244 deletions(-)
 mode change 100644 => 100755 sass/_layout.scss
 mode change 100644 => 100755 sass/_moviedetails.scss
 mode change 100644 => 100755 sass/_movielist.scss

diff --git a/.gitignore b/.gitignore
index cd40d6bc..9dac25c0 100644
--- a/.gitignore
+++ b/.gitignore
@@ -30,3 +30,6 @@ js/vendor/config.js
 dist/windows/Install Popcorn Time.exe
 dist/mac/Popcorn Time.app/
 dist/mac/Popcorn Time.zip
+
+node-webkit.app
+config.codekit
\ No newline at end of file
diff --git a/css/app.css b/css/app.css
index 1c72e534..e1bf1edf 100644
--- a/css/app.css
+++ b/css/app.css
@@ -51,7 +51,7 @@ a img {
   border: none;
 }
 
-article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
+article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
   display: block;
 }
 
@@ -64,7 +64,6 @@ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav,
     -webkit-transform: translate(0, 0);
   }
 }
-
 @-webkit-keyframes sidebareffect2 {
   from {
     -webkit-transform: translate(0, 0);
@@ -74,7 +73,6 @@ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav,
     -webkit-transform: translate(100%, 0);
   }
 }
-
 @-webkit-keyframes spin {
   from {
     -webkit-transform: rotate(0deg);
@@ -84,7 +82,6 @@ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav,
     -webkit-transform: rotate(360deg);
   }
 }
-
 @-webkit-keyframes backdropFadeIn {
   from {
     opacity: 0;
@@ -94,7 +91,6 @@ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav,
     opacity: 0.2;
   }
 }
-
 body {
   -webkit-user-select: none;
 }
@@ -238,8 +234,18 @@ body {
   font-family: 'Helvetica Neue', Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   color: white;
+  font-size: 100%;
+}
+
+body.tv-mode-enable {
+  font-size: 31px;
 }
 
+@media (max-width: 1440px) {
+  body.tv-mode-enable {
+    font-size: 23px;
+  }
+}
 ::-webkit-input-placeholder {
   color: rgba(255, 255, 255, 0.4);
   font-weight: normal;
@@ -280,7 +286,7 @@ a {
   display: none;
 }
 .page::-webkit-scrollbar-thumb {
-  background: rgba(0, 0, 0, 0);
+  background: transparent;
   background-clip: content-box;
   border-radius: 10px;
   border: 2px solid transparent;
@@ -304,17 +310,17 @@ a {
   border: 1px solid rgba(255, 255, 255, 0.2);
 }
 .page.notransition .movie {
-  -webkit-transition-delay: 0s, 0s;
   -moz-transition-delay: 0s, 0s;
   -o-transition-delay: 0s, 0s;
+  -webkit-transition-delay: 0s, 0s;
   transition-delay: 0s, 0s;
 }
 
 .btn {
-  -webkit-transition: background-color ease;
-  -webkit-transition-delay: 0.3s;
   -moz-transition: background-color ease 0.3s;
   -o-transition: background-color ease 0.3s;
+  -webkit-transition: background-color ease;
+  -webkit-transition-delay: 0.3s;
   transition: background-color ease 0.3s;
   color: #999999;
   display: inline-block;
@@ -351,8 +357,8 @@ a {
 /*
 -- App */
 #header {
-  -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
   box-sizing: border-box;
   border: 1px solid #000;
   height: 45px;
@@ -436,10 +442,32 @@ a {
 #header .btn-set button.fullscreen.active::before {
   content: "\e00B";
 }
+#header .btn-set button.tv-mode {
+  color: #000;
+  background: transparent;
+  margin: 0;
+  width: 32px;
+  height: 32px;
+  border-radius: 0;
+  display: block;
+  font-size: 12px;
+}
+#header .btn-set button.tv-mode::before {
+  content: "\e623";
+  font-family: VideoJS;
+  font-size: 1.85em;
+  line-height: 0.2em;
+  background: none;
+  display: block;
+  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
+}
+#header .btn-set button.tv-mode.active::before {
+  content: "\e623";
+}
 
 #notification {
-  -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
   box-sizing: border-box;
   position: absolute;
   top: 45px;
@@ -465,16 +493,16 @@ a {
 }
 
 #catalog-select {
-  -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
   box-sizing: border-box;
   overflow-x: hidden;
   overflow-y: overlay;
   -webkit-overflow-scrolling: touch;
-  width: 180px;
+  width: 11.25em;
   position: absolute;
   top: 45px;
-  padding: 20px;
+  padding: 1.25em;
   height: calc(100% - 45px);
   background: #121212;
   border-right: 1px solid #000;
@@ -494,7 +522,7 @@ a {
   display: none;
 }
 #catalog-select::-webkit-scrollbar-thumb {
-  background: rgba(0, 0, 0, 0);
+  background: transparent;
   background-clip: content-box;
   border-radius: 10px;
   border: 2px solid transparent;
@@ -518,26 +546,26 @@ a {
   border: 1px solid rgba(255, 255, 255, 0.2);
 }
 #catalog-select h4 {
-  margin-top: 40px;
+  margin-top: 2.6em;
   color: #404040;
   font-weight: bold;
-  margin-bottom: 10px;
+  margin-bottom: 0.4em;
 }
 #catalog-select ul li {
   display: block;
   font-weight: bold;
-  font-size: 13px;
+  font-size: 0.8125em;
 }
 #catalog-select ul li a {
-  -webkit-transition: background-color ease;
-  -webkit-transition-delay: 0.3s;
   -moz-transition: background-color ease 0.3s;
   -o-transition: background-color ease 0.3s;
+  -webkit-transition: background-color ease;
+  -webkit-transition-delay: 0.3s;
   transition: background-color ease 0.3s;
   color: #999999;
   display: block;
   border-radius: 3px;
-  padding: 8px;
+  padding: 0.61538461538462em;
 }
 #catalog-select ul li a:hover {
   background: #010101;
@@ -553,37 +581,37 @@ a {
 }
 #catalog-select .search {
   position: absolute;
-  right: 20px;
-  top: 12px;
+  right: 1.25em;
+  top: 0.75em;
 }
 #catalog-select .search input {
   border: 2px solid rgba(255, 255, 255, 0.4);
   border-radius: 5px;
   color: #FFF;
-  font-size: 12px;
-  height: 15px;
-  padding: 8px 10px;
-  width: 115px;
+  font-size: 0.75em;
+  height: 1.25em;
+  padding: 0.5em 0.83333333333333em;
+  width: 9.58333333333333em;
   background: transparent;
   font-weight: bold;
 }
 #catalog-select .search i {
   position: absolute;
-  top: 10px;
-  right: 10px;
+  top: 0.4375em;
+  right: 0.625em;
   color: rgba(255, 255, 255, 0.4);
 }
 
 .container {
   height: calc(100% - 45px);
   overflow: hidden;
-  margin: 45px 0 0 180px;
+  margin: 45px 0 0 11.25em;
   position: relative;
 }
 
 body.has-notification .container {
   height: calc(100% - 45px - 45px);
-  margin: 90px 0 0 180px;
+  margin: 90px 0 0 11.25em;
 }
 body.has-notification #catalog-select {
   top: 90px;
@@ -594,10 +622,10 @@ body.has-notification #notification {
 }
 
 .popcorn-load {
-  -webkit-transition: opacity ease;
-  -webkit-transition-delay: 1s;
   -moz-transition: opacity ease 1s;
   -o-transition: opacity ease 1s;
+  -webkit-transition: opacity ease;
+  -webkit-transition-delay: 1s;
   transition: opacity ease 1s;
   background: rgba(0, 0, 0, 0.8);
   color: #fff;
@@ -614,10 +642,10 @@ body.has-notification #notification {
   pointer-events: none;
 }
 .popcorn-load .wrapper {
-  -webkit-transform: translateY(-100%);
   -moz-transform: translateY(-100%);
   -ms-transform: translateY(-100%);
   -o-transform: translateY(-100%);
+  -webkit-transform: translateY(-100%);
   transform: translateY(-100%);
   font-size: 40px;
   position: absolute;
@@ -649,9 +677,9 @@ body.has-notification #notification {
   padding: 3px;
 }
 .popcorn-load .progressbar .progress {
-  -webkit-transition: width 0.2s ease;
   -moz-transition: width 0.2s ease;
   -o-transition: width 0.2s ease;
+  -webkit-transition: width 0.2s ease;
   transition: width 0.2s ease;
   display: block;
   height: 14px;
@@ -694,10 +722,10 @@ body.has-notification #notification {
 }
 
 .popcorn-disclaimer {
-  -webkit-transition: opacity ease;
-  -webkit-transition-delay: 0.3s;
   -moz-transition: opacity ease 0.3s;
   -o-transition: opacity ease 0.3s;
+  -webkit-transition: opacity ease;
+  -webkit-transition-delay: 0.3s;
   transition: opacity ease 0.3s;
   background: #000000;
   color: #fff;
@@ -718,16 +746,16 @@ body.has-notification #notification {
   pointer-events: none;
 }
 .popcorn-disclaimer .text, .popcorn-disclaimer .btn {
-  -webkit-transition: opacity 2s ease-out;
   -moz-transition: opacity 2s ease-out;
   -o-transition: opacity 2s ease-out;
+  -webkit-transition: opacity 2s ease-out;
   transition: opacity 2s ease-out;
 }
 .popcorn-disclaimer .wrapper {
-  -webkit-transform: translateY(-50%);
   -moz-transform: translateY(-50%);
   -ms-transform: translateY(-50%);
   -o-transform: translateY(-50%);
+  -webkit-transform: translateY(-50%);
   transform: translateY(-50%);
   font-size: 30px;
   position: absolute;
@@ -762,11 +790,11 @@ body.has-notification #notification {
   margin-bottom: 15px;
 }
 .movie-list li {
-  height: 195px;
-  width: 132px;
+  width: 8.3125em;
+  height: 12.25em;
   padding: 0;
   display: inline-block;
-  margin: 12px;
+  margin: 0.75em;
   border-radius: 3px;
   position: relative;
   background: #000;
@@ -775,30 +803,30 @@ body.has-notification #notification {
   opacity: 1;
 }
 .movie-list li i {
-  -webkit-transition: all ease;
-  -webkit-transition-delay: 0.3s;
   -moz-transition: all ease 0.3s;
   -o-transition: all ease 0.3s;
+  -webkit-transition: all ease;
+  -webkit-transition-delay: 0.3s;
   transition: all ease 0.3s;
   background: rgba(0, 0, 0, 0.4);
   color: #FFF;
   display: block;
   position: absolute;
   bottom: 0;
-  line-height: 195px;
+  line-height: 3.21666666666667em;
   right: 0;
   top: 0;
   left: 0;
   text-align: center;
-  font-size: 60px;
+  font-size: 3.75em;
   opacity: 0;
   width: 101%;
   height: 101%;
   z-index: 10;
 }
 .movie-list li .cover {
-  width: 133px;
-  height: 196px;
+  width: 8.3125em;
+  height: 12.25em;
   overflow: hidden;
   display: block;
   margin: 0 0 10px 0;
@@ -807,10 +835,10 @@ body.has-notification #notification {
   -webkit-transform: translateZ(0);
 }
 .movie-list li img {
-  -webkit-transition: all ease;
-  -webkit-transition-delay: 1s;
   -moz-transition: all ease 1s;
   -o-transition: all ease 1s;
+  -webkit-transition: all ease;
+  -webkit-transition-delay: 1s;
   transition: all ease 1s;
   height: 100%;
   width: 100%;
@@ -840,20 +868,20 @@ body.has-notification #notification {
 }
 .movie-list li a {
   display: block;
-  height: 196px;
-  width: 133px;
+  width: 8.3125em;
+  height: 12.25em;
 }
 .movie-list li strong {
   color: #FFF;
   display: block;
   font-weight: bold;
-  font-size: 14px;
-  overflow: hidden;
+  font-size: 0.875em;
+  overflow: visible;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 .movie-list li small {
-  font-size: 12px;
+  font-size: 0.75em;
   color: #666;
 }
 .movie-list li::before {
@@ -869,323 +897,323 @@ body.has-notification #notification {
 }
 
 .movie {
-  -webkit-transform: scale(0, 0);
   -moz-transform: scale(0, 0);
   -ms-transform: scale(0, 0);
   -o-transform: scale(0, 0);
+  -webkit-transform: scale(0, 0);
   transform: scale(0, 0);
-  -webkit-transition: opacity 0.3s ease, -webkit-transform 0.3s ease;
   -moz-transition: opacity 0.3s ease, -moz-transform 0.3s ease;
   -o-transition: opacity 0.3s ease, -o-transform 0.3s ease;
+  -webkit-transition: opacity 0.3s ease, -webkit-transform 0.3s ease;
   transition: opacity 0.3s ease, transform 0.3s ease;
   opacity: 0;
 }
 .movie:nth-child(1) {
-  -webkit-transition-delay: 0s, 0s;
   -moz-transition-delay: 0s, 0s;
   -o-transition-delay: 0s, 0s;
+  -webkit-transition-delay: 0s, 0s;
   transition-delay: 0s, 0s;
 }
 .movie:nth-child(2) {
-  -webkit-transition-delay: 0s, 0.1s;
   -moz-transition-delay: 0s, 0.1s;
   -o-transition-delay: 0s, 0.1s;
+  -webkit-transition-delay: 0s, 0.1s;
   transition-delay: 0s, 0.1s;
 }
 .movie:nth-child(3) {
-  -webkit-transition-delay: 0s, 0.2s;
   -moz-transition-delay: 0s, 0.2s;
   -o-transition-delay: 0s, 0.2s;
+  -webkit-transition-delay: 0s, 0.2s;
   transition-delay: 0s, 0.2s;
 }
 .movie:nth-child(4) {
-  -webkit-transition-delay: 0s, 0.3s;
   -moz-transition-delay: 0s, 0.3s;
   -o-transition-delay: 0s, 0.3s;
+  -webkit-transition-delay: 0s, 0.3s;
   transition-delay: 0s, 0.3s;
 }
 .movie:nth-child(5) {
-  -webkit-transition-delay: 0s, 0.4s;
   -moz-transition-delay: 0s, 0.4s;
   -o-transition-delay: 0s, 0.4s;
+  -webkit-transition-delay: 0s, 0.4s;
   transition-delay: 0s, 0.4s;
 }
 .movie:nth-child(6) {
-  -webkit-transition-delay: 0s, 0.5s;
   -moz-transition-delay: 0s, 0.5s;
   -o-transition-delay: 0s, 0.5s;
+  -webkit-transition-delay: 0s, 0.5s;
   transition-delay: 0s, 0.5s;
 }
 .movie:nth-child(7) {
-  -webkit-transition-delay: 0s, 0.6s;
   -moz-transition-delay: 0s, 0.6s;
   -o-transition-delay: 0s, 0.6s;
+  -webkit-transition-delay: 0s, 0.6s;
   transition-delay: 0s, 0.6s;
 }
 .movie:nth-child(8) {
-  -webkit-transition-delay: 0s, 0.7s;
   -moz-transition-delay: 0s, 0.7s;
   -o-transition-delay: 0s, 0.7s;
+  -webkit-transition-delay: 0s, 0.7s;
   transition-delay: 0s, 0.7s;
 }
 .movie:nth-child(9) {
-  -webkit-transition-delay: 0s, 0.8s;
   -moz-transition-delay: 0s, 0.8s;
   -o-transition-delay: 0s, 0.8s;
+  -webkit-transition-delay: 0s, 0.8s;
   transition-delay: 0s, 0.8s;
 }
 .movie:nth-child(10) {
-  -webkit-transition-delay: 0s, 0.9s;
   -moz-transition-delay: 0s, 0.9s;
   -o-transition-delay: 0s, 0.9s;
+  -webkit-transition-delay: 0s, 0.9s;
   transition-delay: 0s, 0.9s;
 }
 .movie:nth-child(11) {
-  -webkit-transition-delay: 0s, 1s;
   -moz-transition-delay: 0s, 1s;
   -o-transition-delay: 0s, 1s;
+  -webkit-transition-delay: 0s, 1s;
   transition-delay: 0s, 1s;
 }
 .movie:nth-child(12) {
-  -webkit-transition-delay: 0s, 1.1s;
   -moz-transition-delay: 0s, 1.1s;
   -o-transition-delay: 0s, 1.1s;
+  -webkit-transition-delay: 0s, 1.1s;
   transition-delay: 0s, 1.1s;
 }
 .movie:nth-child(13) {
-  -webkit-transition-delay: 0s, 1.2s;
   -moz-transition-delay: 0s, 1.2s;
   -o-transition-delay: 0s, 1.2s;
+  -webkit-transition-delay: 0s, 1.2s;
   transition-delay: 0s, 1.2s;
 }
 .movie:nth-child(14) {
-  -webkit-transition-delay: 0s, 1.3s;
   -moz-transition-delay: 0s, 1.3s;
   -o-transition-delay: 0s, 1.3s;
+  -webkit-transition-delay: 0s, 1.3s;
   transition-delay: 0s, 1.3s;
 }
 .movie:nth-child(15) {
-  -webkit-transition-delay: 0s, 1.4s;
   -moz-transition-delay: 0s, 1.4s;
   -o-transition-delay: 0s, 1.4s;
+  -webkit-transition-delay: 0s, 1.4s;
   transition-delay: 0s, 1.4s;
 }
 .movie:nth-child(16) {
-  -webkit-transition-delay: 0s, 1.5s;
   -moz-transition-delay: 0s, 1.5s;
   -o-transition-delay: 0s, 1.5s;
+  -webkit-transition-delay: 0s, 1.5s;
   transition-delay: 0s, 1.5s;
 }
 .movie:nth-child(17) {
-  -webkit-transition-delay: 0s, 1.6s;
   -moz-transition-delay: 0s, 1.6s;
   -o-transition-delay: 0s, 1.6s;
+  -webkit-transition-delay: 0s, 1.6s;
   transition-delay: 0s, 1.6s;
 }
 .movie:nth-child(18) {
-  -webkit-transition-delay: 0s, 1.7s;
   -moz-transition-delay: 0s, 1.7s;
   -o-transition-delay: 0s, 1.7s;
+  -webkit-transition-delay: 0s, 1.7s;
   transition-delay: 0s, 1.7s;
 }
 .movie:nth-child(19) {
-  -webkit-transition-delay: 0s, 1.8s;
   -moz-transition-delay: 0s, 1.8s;
   -o-transition-delay: 0s, 1.8s;
+  -webkit-transition-delay: 0s, 1.8s;
   transition-delay: 0s, 1.8s;
 }
 .movie:nth-child(20) {
-  -webkit-transition-delay: 0s, 1.9s;
   -moz-transition-delay: 0s, 1.9s;
   -o-transition-delay: 0s, 1.9s;
+  -webkit-transition-delay: 0s, 1.9s;
   transition-delay: 0s, 1.9s;
 }
 .movie:nth-child(21) {
-  -webkit-transition-delay: 0s, 2s;
   -moz-transition-delay: 0s, 2s;
   -o-transition-delay: 0s, 2s;
+  -webkit-transition-delay: 0s, 2s;
   transition-delay: 0s, 2s;
 }
 .movie:nth-child(22) {
-  -webkit-transition-delay: 0s, 2.1s;
   -moz-transition-delay: 0s, 2.1s;
   -o-transition-delay: 0s, 2.1s;
+  -webkit-transition-delay: 0s, 2.1s;
   transition-delay: 0s, 2.1s;
 }
 .movie:nth-child(23) {
-  -webkit-transition-delay: 0s, 2.2s;
   -moz-transition-delay: 0s, 2.2s;
   -o-transition-delay: 0s, 2.2s;
+  -webkit-transition-delay: 0s, 2.2s;
   transition-delay: 0s, 2.2s;
 }
 .movie:nth-child(24) {
-  -webkit-transition-delay: 0s, 2.3s;
   -moz-transition-delay: 0s, 2.3s;
   -o-transition-delay: 0s, 2.3s;
+  -webkit-transition-delay: 0s, 2.3s;
   transition-delay: 0s, 2.3s;
 }
 .movie:nth-child(25) {
-  -webkit-transition-delay: 0s, 2.4s;
   -moz-transition-delay: 0s, 2.4s;
   -o-transition-delay: 0s, 2.4s;
+  -webkit-transition-delay: 0s, 2.4s;
   transition-delay: 0s, 2.4s;
 }
 .movie:nth-child(26) {
-  -webkit-transition-delay: 0s, 2.5s;
   -moz-transition-delay: 0s, 2.5s;
   -o-transition-delay: 0s, 2.5s;
+  -webkit-transition-delay: 0s, 2.5s;
   transition-delay: 0s, 2.5s;
 }
 .movie:nth-child(27) {
-  -webkit-transition-delay: 0s, 2.6s;
   -moz-transition-delay: 0s, 2.6s;
   -o-transition-delay: 0s, 2.6s;
+  -webkit-transition-delay: 0s, 2.6s;
   transition-delay: 0s, 2.6s;
 }
 .movie:nth-child(28) {
-  -webkit-transition-delay: 0s, 2.7s;
   -moz-transition-delay: 0s, 2.7s;
   -o-transition-delay: 0s, 2.7s;
+  -webkit-transition-delay: 0s, 2.7s;
   transition-delay: 0s, 2.7s;
 }
 .movie:nth-child(29) {
-  -webkit-transition-delay: 0s, 2.8s;
   -moz-transition-delay: 0s, 2.8s;
   -o-transition-delay: 0s, 2.8s;
+  -webkit-transition-delay: 0s, 2.8s;
   transition-delay: 0s, 2.8s;
 }
 .movie:nth-child(30) {
-  -webkit-transition-delay: 0s, 2.9s;
   -moz-transition-delay: 0s, 2.9s;
   -o-transition-delay: 0s, 2.9s;
+  -webkit-transition-delay: 0s, 2.9s;
   transition-delay: 0s, 2.9s;
 }
 .movie:nth-child(31) {
-  -webkit-transition-delay: 0s, 3s;
   -moz-transition-delay: 0s, 3s;
   -o-transition-delay: 0s, 3s;
+  -webkit-transition-delay: 0s, 3s;
   transition-delay: 0s, 3s;
 }
 .movie:nth-child(32) {
-  -webkit-transition-delay: 0s, 3.1s;
   -moz-transition-delay: 0s, 3.1s;
   -o-transition-delay: 0s, 3.1s;
+  -webkit-transition-delay: 0s, 3.1s;
   transition-delay: 0s, 3.1s;
 }
 .movie:nth-child(33) {
-  -webkit-transition-delay: 0s, 3.2s;
   -moz-transition-delay: 0s, 3.2s;
   -o-transition-delay: 0s, 3.2s;
+  -webkit-transition-delay: 0s, 3.2s;
   transition-delay: 0s, 3.2s;
 }
 .movie:nth-child(34) {
-  -webkit-transition-delay: 0s, 3.3s;
   -moz-transition-delay: 0s, 3.3s;
   -o-transition-delay: 0s, 3.3s;
+  -webkit-transition-delay: 0s, 3.3s;
   transition-delay: 0s, 3.3s;
 }
 .movie:nth-child(35) {
-  -webkit-transition-delay: 0s, 3.4s;
   -moz-transition-delay: 0s, 3.4s;
   -o-transition-delay: 0s, 3.4s;
+  -webkit-transition-delay: 0s, 3.4s;
   transition-delay: 0s, 3.4s;
 }
 .movie:nth-child(36) {
-  -webkit-transition-delay: 0s, 3.5s;
   -moz-transition-delay: 0s, 3.5s;
   -o-transition-delay: 0s, 3.5s;
+  -webkit-transition-delay: 0s, 3.5s;
   transition-delay: 0s, 3.5s;
 }
 .movie:nth-child(37) {
-  -webkit-transition-delay: 0s, 3.6s;
   -moz-transition-delay: 0s, 3.6s;
   -o-transition-delay: 0s, 3.6s;
+  -webkit-transition-delay: 0s, 3.6s;
   transition-delay: 0s, 3.6s;
 }
 .movie:nth-child(38) {
-  -webkit-transition-delay: 0s, 3.7s;
   -moz-transition-delay: 0s, 3.7s;
   -o-transition-delay: 0s, 3.7s;
+  -webkit-transition-delay: 0s, 3.7s;
   transition-delay: 0s, 3.7s;
 }
 .movie:nth-child(39) {
-  -webkit-transition-delay: 0s, 3.8s;
   -moz-transition-delay: 0s, 3.8s;
   -o-transition-delay: 0s, 3.8s;
+  -webkit-transition-delay: 0s, 3.8s;
   transition-delay: 0s, 3.8s;
 }
 .movie:nth-child(40) {
-  -webkit-transition-delay: 0s, 3.9s;
   -moz-transition-delay: 0s, 3.9s;
   -o-transition-delay: 0s, 3.9s;
+  -webkit-transition-delay: 0s, 3.9s;
   transition-delay: 0s, 3.9s;
 }
 .movie:nth-child(41) {
-  -webkit-transition-delay: 0s, 4s;
   -moz-transition-delay: 0s, 4s;
   -o-transition-delay: 0s, 4s;
+  -webkit-transition-delay: 0s, 4s;
   transition-delay: 0s, 4s;
 }
 .movie:nth-child(42) {
-  -webkit-transition-delay: 0s, 4.1s;
   -moz-transition-delay: 0s, 4.1s;
   -o-transition-delay: 0s, 4.1s;
+  -webkit-transition-delay: 0s, 4.1s;
   transition-delay: 0s, 4.1s;
 }
 .movie:nth-child(43) {
-  -webkit-transition-delay: 0s, 4.2s;
   -moz-transition-delay: 0s, 4.2s;
   -o-transition-delay: 0s, 4.2s;
+  -webkit-transition-delay: 0s, 4.2s;
   transition-delay: 0s, 4.2s;
 }
 .movie:nth-child(44) {
-  -webkit-transition-delay: 0s, 4.3s;
   -moz-transition-delay: 0s, 4.3s;
   -o-transition-delay: 0s, 4.3s;
+  -webkit-transition-delay: 0s, 4.3s;
   transition-delay: 0s, 4.3s;
 }
 .movie:nth-child(45) {
-  -webkit-transition-delay: 0s, 4.4s;
   -moz-transition-delay: 0s, 4.4s;
   -o-transition-delay: 0s, 4.4s;
+  -webkit-transition-delay: 0s, 4.4s;
   transition-delay: 0s, 4.4s;
 }
 .movie:nth-child(46) {
-  -webkit-transition-delay: 0s, 4.5s;
   -moz-transition-delay: 0s, 4.5s;
   -o-transition-delay: 0s, 4.5s;
+  -webkit-transition-delay: 0s, 4.5s;
   transition-delay: 0s, 4.5s;
 }
 .movie:nth-child(47) {
-  -webkit-transition-delay: 0s, 4.6s;
   -moz-transition-delay: 0s, 4.6s;
   -o-transition-delay: 0s, 4.6s;
+  -webkit-transition-delay: 0s, 4.6s;
   transition-delay: 0s, 4.6s;
 }
 .movie:nth-child(48) {
-  -webkit-transition-delay: 0s, 4.7s;
   -moz-transition-delay: 0s, 4.7s;
   -o-transition-delay: 0s, 4.7s;
+  -webkit-transition-delay: 0s, 4.7s;
   transition-delay: 0s, 4.7s;
 }
 .movie:nth-child(49) {
-  -webkit-transition-delay: 0s, 4.8s;
   -moz-transition-delay: 0s, 4.8s;
   -o-transition-delay: 0s, 4.8s;
+  -webkit-transition-delay: 0s, 4.8s;
   transition-delay: 0s, 4.8s;
 }
 .movie:nth-child(50) {
-  -webkit-transition-delay: 0s, 4.9s;
   -moz-transition-delay: 0s, 4.9s;
   -o-transition-delay: 0s, 4.9s;
+  -webkit-transition-delay: 0s, 4.9s;
   transition-delay: 0s, 4.9s;
 }
 .movie.loaded {
   opacity: 1;
-  -webkit-transform: scale(1, 1);
   -moz-transform: scale(1, 1);
   -ms-transform: scale(1, 1);
   -o-transform: scale(1, 1);
+  -webkit-transform: scale(1, 1);
   transform: scale(1, 1);
 }
 
@@ -1233,8 +1261,8 @@ body.has-notification #notification {
   padding: 6px 12px;
   position: relative;
   text-decoration: none;
-  -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
   box-sizing: border-box;
   border: 1px solid #000;
   text-align: center;
@@ -1298,7 +1326,7 @@ sidebar .play::-webkit-scrollbar-track-piece {
   display: none;
 }
 sidebar .play::-webkit-scrollbar-thumb {
-  background: rgba(0, 0, 0, 0);
+  background: transparent;
   background-clip: content-box;
   border-radius: 10px;
   border: 2px solid transparent;
@@ -1400,8 +1428,8 @@ sidebar .play .movie-detail .closer {
   position: absolute;
   top: 0;
   left: 0;
-  height: 30px;
-  width: 30px;
+  height: 2.5em;
+  width: 2.5em;
   z-index: 300;
   cursor: pointer;
 }
@@ -1416,6 +1444,10 @@ sidebar .play .movie-detail .closer i {
   opacity: 0.5;
   text-shadow: 0 0 5px #000;
 }
+sidebar .play .movie-detail .closer img {
+  width: 100%;
+  height: 100%;
+}
 sidebar .play .movie-detail .poster-cont,
 sidebar .play .movie-detail .side-content {
   display: table-cell;
@@ -1445,30 +1477,30 @@ sidebar .play .movie-detail .poster-cont img.big-poster {
 }
 sidebar .play .movie-detail .poster-cont .movie-config h4 {
   font-weight: bold;
-  font-size: 14px;
-  margin-left: 10px;
-  margin-top: 8px;
+  font-size: 0.875em;
+  margin-left: 0.71428571428571em;
+  margin-top: 0.57142857142857em;
 }
 sidebar .play .movie-detail .poster-cont .movie-config .quality-cont {
   position: absolute;
   bottom: 0;
   left: 0;
-  height: 50px;
+  height: 3.125em;
   width: 100%;
-  margin-left: 1px;
+  margin-left: 0.0625em;
   text-shadow: 0 0 2px #000;
   background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.85) 100%);
   -webkit-transform: translateZ(0);
 }
 sidebar .play .movie-detail .poster-cont .movie-config .quality-cont .quality-off {
-  margin-left: 10px;
-  font-size: 12px;
+  margin-left: 0.83333333333333em;
+  font-size: 0.75em;
 }
 sidebar .play .movie-detail .poster-cont .movie-config li.options span.extra-data {
   font-weight: bold;
   color: #FFF;
   float: right;
-  font-size: 15px;
+  font-size: 0.9375em;
 }
 sidebar .play .movie-detail .poster-cont .movie-config li.options span.good {
   color: #27ae60;
@@ -1493,43 +1525,43 @@ sidebar .play .movie-detail .poster-cont .movie-config .switch {
   background: transparent;
   border-radius: 32px;
   display: block;
-  height: 12px;
+  height: 0.75em;
   position: absolute;
-  width: 25px;
+  width: 1.5625em;
   border: 2px solid #FFF;
-  left: 48px;
-  top: 28px;
+  left: 3em;
+  top: 1.75em;
   cursor: pointer;
 }
 sidebar .play .movie-detail .poster-cont .movie-config .switch label {
-  -webkit-transition: color 0.2s ease;
   -moz-transition: color 0.2s ease;
   -o-transition: color 0.2s ease;
+  -webkit-transition: color 0.2s ease;
   transition: color 0.2s ease;
   color: #fff;
-  font-size: 12px;
+  font-size: 0.75em;
   font-weight: bold;
   text-transform: uppercase;
-  width: 20px;
+  width: 1.66666666666667em;
   cursor: pointer;
 }
 sidebar .play .movie-detail .poster-cont .movie-config .switch label:nth-of-type(1) {
-  left: -38px;
+  left: -3.16666666666667em;
   position: absolute;
   text-align: right;
 }
 sidebar .play .movie-detail .poster-cont .movie-config .switch label:nth-of-type(2) {
   position: absolute;
-  right: -30px;
+  right: -2.5em;
   text-align: left;
 }
 sidebar .play .movie-detail .poster-cont .movie-config .switch input {
-  height: 12px;
+  height: 0.75em;
   left: 0;
   opacity: 0;
   position: absolute;
   top: 0;
-  width: 60px;
+  width: 3.75em;
   z-index: 2;
   cursor: pointer;
 }
@@ -1543,7 +1575,7 @@ sidebar .play .movie-detail .poster-cont .movie-config .switch input:checked ~ l
   color: #FFF;
 }
 sidebar .play .movie-detail .poster-cont .movie-config .switch input:checked ~ .toggle {
-  left: 2px;
+  left: 0.125em;
 }
 sidebar .play .movie-detail .poster-cont .movie-config .switch input ~ :checked ~ label:nth-of-type(1) {
   color: #FFF;
@@ -1552,20 +1584,20 @@ sidebar .play .movie-detail .poster-cont .movie-config .switch input ~ :checked
   color: #286dc4;
 }
 sidebar .play .movie-detail .poster-cont .movie-config .switch input ~ :checked ~ .toggle {
-  left: 13px;
+  left: 0.8125em;
 }
 sidebar .play .movie-detail .poster-cont .movie-config .toggle {
-  -webkit-transition: left 0.2s ease;
   -moz-transition: left 0.2s ease;
   -o-transition: left 0.2s ease;
+  -webkit-transition: left 0.2s ease;
   transition: left 0.2s ease;
   background: #286dc4;
   border-radius: 50%;
-  height: 10px;
+  height: 0.625em;
   left: 0;
   position: absolute;
-  top: 1px;
-  width: 10px;
+  top: 0.0625em;
+  width: 0.625em;
   z-index: 1;
 }
 sidebar .play .movie-detail .side-content {
@@ -1584,18 +1616,18 @@ sidebar .play .movie-detail .side-content .title {
 }
 sidebar .play .movie-detail .side-content .title h2 {
   font-weight: 200;
-  font-size: 34px;
-  margin-bottom: 10px;
+  font-size: 2.125em;
+  margin-bottom: 0.29411764705882em;
   color: #f5f7fa;
-  padding-right: 30px;
+  padding-right: 0.88235294117647em;
 }
 sidebar .play .movie-detail .side-content .title .movie-quick-info {
-  margin-bottom: 5px;
+  margin-bottom: 0.3125em;
 }
 sidebar .play .movie-detail .side-content .title .movie-quick-info li {
   display: inline-block;
   vertical-align: top;
-  font-size: 12px;
+  font-size: 0.75em;
   color: #286dc4;
   font-weight: bold;
 }
@@ -1607,14 +1639,14 @@ sidebar .play .movie-detail .side-content .title .movie-quick-info li:last-child
   display: none;
 }
 sidebar .play .movie-detail .side-content .title .health {
-  font-size: 24px;
-  width: 20px;
-  height: 20px;
+  font-size: 1.5em;
+  width: 0.83333333333333em;
+  height: 0.83333333333333em;
   text-align: center;
-  line-height: 20px;
+  line-height: 0.83333333333333em;
   cursor: pointer;
   position: absolute;
-  top: 10px;
+  top: 0.41666666666667em;
   right: 0;
 }
 sidebar .play .movie-detail .side-content .title .health.bad {
@@ -1636,28 +1668,28 @@ sidebar .play .movie-detail .side-content .title .health.excellent {
 sidebar .play .movie-detail .side-content .rating {
   display: inline-block;
   position: relative;
-  font-size: 14px;
-  margin: 0 10px 0 0;
+  font-size: 0.875em;
+  margin: 0 0.71428571428571em 0 0;
 }
 sidebar .play .movie-detail .side-content .rating ul {
   color: #f5f7fa;
 }
 sidebar .play .movie-detail .side-content p {
-  margin-top: 10px;
+  margin-top: 0.71428571428571em;
   color: #babdc2;
-  font-size: 14px;
-  line-height: 24px;
+  font-size: 0.875em;
+  line-height: 1.71428571428571em;
 }
 sidebar .play .movie-detail .side-content .subtitles-list {
-  margin-top: 10px;
-  margin-bottom: 10px;
+  margin-top: 0.625em;
+  margin-bottom: 0.625em;
 }
 sidebar .play .movie-detail .side-content .subtitles-list h4 {
-  font-size: 12px;
+  font-size: 0.75em;
   color: #f5f7fa;
   display: inline-block;
   vertical-align: middle;
-  margin-right: 5px;
+  margin-right: 0.41666666666667em;
 }
 sidebar .play .movie-detail .side-content .subtitles-list ul {
   display: inline-block;
@@ -1668,9 +1700,10 @@ sidebar .play .movie-detail .side-content .subtitles-list ul li {
   vertical-align: top;
 }
 sidebar .play .movie-detail .side-content .subtitles-list ul li span {
-  width: 22px;
-  height: 16px;
+  width: 1.375em;
+  height: 1em;
   display: inline-block;
+  background-size: contain;
 }
 sidebar .play .movie-detail .side-content .subtitles-list ul li .flag.flag-english {
   background-image: url(../images/english.png);
@@ -1705,10 +1738,10 @@ sidebar .play .movie-detail .side-content a.play-button {
   color: #FFF;
   font-weight: bold;
   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
-  padding: 14px 26px;
+  padding: 0.875em 1.625em;
   border-radius: 2px;
   display: inline-block;
-  margin-top: 10px;
+  margin-top: 0.625em;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
 }
 sidebar .play .movie-detail .side-content a.play-button:hover {
@@ -1872,18 +1905,18 @@ sidebar .play .movie-detail .side-content a.play-button:hover {
 }
 
 #video_player.vjs-user-inactive + #video_player_close {
-  -webkit-transition: opacity 0.8s ease;
   -moz-transition: opacity 0.8s ease;
   -o-transition: opacity 0.8s ease;
+  -webkit-transition: opacity 0.8s ease;
   transition: opacity 0.8s ease;
   opacity: 0.0;
   pointer-events: none;
 }
 
 #video_player.vjs-user-active + #video_player_close {
-  -webkit-transition: opacity 0.2s ease-out;
   -moz-transition: opacity 0.2s ease-out;
   -o-transition: opacity 0.2s ease-out;
+  -webkit-transition: opacity 0.2s ease-out;
   transition: opacity 0.2s ease-out;
   opacity: 1.0;
   pointer-events: all;
diff --git a/index.html b/index.html
index e1cfe47c..95327dc0 100644
--- a/index.html
+++ b/index.html
@@ -16,7 +16,8 @@
         <button class="btn-os max"></button>
       </nav>
       <nav class="btn-set right">
-        <button class="btn-os fullscreen"></button>
+        <!--<button class="btn-os fullscreen"></button>-->
+        <button data-placement="bottom" data-toggle="tooltip" title="TV Mode" class="btn-os tv-mode"></button>
       </nav>
       <h1>Popcorn Time</h1>
     </header>
diff --git a/js/frontend/ui.js b/js/frontend/ui.js
index 0792bb09..9492f006 100644
--- a/js/frontend/ui.js
+++ b/js/frontend/ui.js
@@ -62,6 +62,14 @@ jQuery(function ($) {
     $('.btn-os.fullscreen').toggleClass('active');
   });
 
+  //TV Mode button
+  $('.btn-os.tv-mode').on('click', function () {
+    win.toggleFullscreen();
+
+    $('body').toggleClass('tv-mode-enable');
+    $('.btn-os.tv-mode').toggleClass('active');
+  });
+
 
   // The app loading close button
   $('.popcorn-load .btn-close').click(function(event){
diff --git a/js/frontend/views/sidebar.js b/js/frontend/views/sidebar.js
index 43806b19..44f3bf57 100644
--- a/js/frontend/views/sidebar.js
+++ b/js/frontend/views/sidebar.js
@@ -46,7 +46,7 @@ App.View.Sidebar = Backbone.View.extend({
         $('.popcorn-load .progressinfo').text( i18n.__('connecting') );
 
         App.loader(true, i18n.__('loadingVideo'));
-        $('body').removeClass().addClass('loading');
+        $('body').addClass('loading');
         
         
         // Used to keep track of loading status changes
@@ -147,7 +147,7 @@ App.View.Sidebar = Backbone.View.extend({
     },
 
     show: function () {
-        $('body').removeClass().addClass('sidebar-open');
+        $('body').addClass('sidebar-open');
         this.$el.removeClass('hidden');
 
         this.backdropCache = new Image();
diff --git a/js/vendor/video-js/font/vjs.eot b/js/vendor/video-js/font/vjs.eot
index 32fe0a5711dfb8198c903fab6741023fba7f25a4..fd1201223fae4e1974fcbd4404bfc5aa7bb761ef 100755
GIT binary patch
delta 1341
zcmbVMU1(!P6h1R|?%bc`PIB|p+t%77ZJ}Xf`nzefrn^Mw?sn<2O0|M0m{{9np-HN(
z5OKA65f^-rde>F@RAKRDRfP1R!m<>7^k;o2`=UZXt@t3Uu<L`XiRU(nm?y!3ne%<$
zIrH7i9A@@b_Fmw7Nq|6di%+pvK2LSqzl{fsi?9SGDBvtXaqFp3kAP0;t**_1Kfecn
z8#psdh3wiNAAR@^0O>>iOfI{=hS7_>j8V<4zP$43rE59l6@ba}`Q_~M@aRvNI{qat
zQ+X8F7X1n!!H^H-3mfJ2TLL{2QRH`5OH0|*8|QYh)bYPm$d=cla0Y%s;XM?>#cW}D
zwtM$B@;&^>iM7)D21uBJ>AUuMa)urb+gHfs^c*SzRG`3tK)5Dqp~K<EUyX)SiX3YF
zhj7G6<A*Q{-Rlja4XJXv%XuG}A>+gL`)W@UN)BX>YX7d@Nh?H>liaPzvgYQBTa{(i
zt#B&I#H;%ZMKOH3ZW^j;n7S^>>SaY}oNGd9$7-J*=QOU^^WHhKVPEm)U5w*MCY`ma
znD=EeWlL7v5c+{G1f!J5l5EddaSBk)TM>zljaA?5ebty3y5iF`N;S==P^vSTQkm&g
z;mD{Ho@*K~@t>8|$D`kI(q)g0ezPfhLm}UF!kCU9_WB<Xi>k-(cLSa$G-?z`4UWMm
zHXt$}XwVGw(-a8~B7TrW630hqj3g!}PSJ#kcu<O%5tG#FX~pH7nM>KvIEbVjoY`-y
z;d+HsNX-#b^&LkIJ2)Kv2a=<G^&Jwf*PJ$Th{0*HPfkM@#9<bmhS%U-dncZ<zlizm
zZ{ttc-iHS4^vKBO>r7VVMW%8|;woE2!v3F95f*mUv_!?Qu+2WpP~09Zrh47H(zdU(
z?JEEbe=$v}*JH<|LE`)~z(MYQ{aMe<J#gV+;<)w5!eBevkBv=}llJAYTEI!-jQxAs
ztK*@9%7$2m{U|T+S-#D0DpW};+e%%%pkC8vwW4-aJJ6|~(Ld4exVBvf?l}XDig8=?
zi?=;Dyk#?L?)b|7VxTwhb@0jHXI(3nYF+3S-B){P&j)x}08YZscy*jX?Z~8mQ^3bZ
zI`$hcm9rk@5T9*f3Gq-1GsKH6EMsRx3v*ClqJ?#c;=_X%j%lbko=r><pKal$C+ZJl
zQPZ?p)HH2kjvG$2HZ)B;pRba2szbQAR4SB8#m+|#7GN22@Di*-7GCVk*}qQA{|&F7
B<CXvb

delta 930
zcmaJ=O-K}B7=CAV=9{0L*_~bY2Xx!rv``FJch%h$7NrjMClNs=B-o&<tL$IxDs~7v
z6nKjCs|boBkb>ychFEmyAVeYPCFtN`p)fk-q4i+Y_Kvfjf@bEO_j#W8eV-4$k8kDj
z$~cL40xU%qNb~?bdQpLY9s)Bk1%(B@UD$_@J#$TD89U!%TpG>j`HkuKDgfg{J~p8j
z@|ZQ`*D;F|>8s<FlNTz;=K(@mDyfe_tM5KQI|f8kC~ynx2jm;b52Z52*~xWv75Pu(
zU(>l!U3%>)0(5*vUd-sT`4%_^-vPn{C<L>5CV5<ZbQgIV7jfrvg(6t60+AbZnCWM?
zfi5wfeP>b8@HI*d1k1K^V5@N(s=upMqZt(_`?sK`Fx4+XE>Nj=YjK=l07^FY6-mS`
z;bsh%pY4qFvfT*r>k6?=jW*Ve(DI)m<)rOsoG22{O9~Mbk>^E4U^LmO3WDmCWrr$?
zszaU^Y!V@oP1w)4c$eHp*bt$k+6ksWUuY?-MIc0o#f*O`;P}NeU9`d5rr4!Vl3nE)
zhT}MT-rH8X=?z-gaJclW{+dd6n_DpsmU1ndgo)6B_6?8P;14>UTX>1E#O|uM4+@&o
zWu;Np?`t~q;LV6VQ2{Hvw?pfp%nt(?ncnG+F+FsxyUZC9eHRTRf%9=g+$MjDB*-FJ
zCc8phSQK`|e(|A{kjAB3(wej@56MsEE$eOTN2OQUQD@XOo69zDf2n01e#bp$wr<R&
zxmMi+?iJ6l=Z{x3_8xlR8;Hg_z|tr2Iyw?l<_I#Qh8o!5NDW(nfUkx*#6304g9n+}
zPw+$=YgmRB=rc~3lTa}{O>BCa*z`29>4|s*2TW75KydhQZP+y3yErfiNw@+9n1mc;
gAqZgzL5F#%W~K@zfOFV10n?BM9h>(CX(oR9FRZGtrT_o{

diff --git a/js/vendor/video-js/font/vjs.svg b/js/vendor/video-js/font/vjs.svg
index 95f1214e..b0ad0be7 100755
--- a/js/vendor/video-js/font/vjs.svg
+++ b/js/vendor/video-js/font/vjs.svg
@@ -3,7 +3,7 @@
 <svg xmlns="http://www.w3.org/2000/svg">
 <metadata>Generated by IcoMoon</metadata>
 <defs>
-<font id="vjs" horiz-adv-x="512">
+<font id="icomoon" horiz-adv-x="512">
 <font-face units-per-em="512" ascent="480" descent="-32" />
 <missing-glyph horiz-adv-x="512" />
 <glyph unicode="&#x20;" d="" horiz-adv-x="256" />
@@ -59,4 +59,9 @@
 <glyph unicode="&#xe620;" d="M128 128c-11.776 0-21.334 9.536-21.334 21.334v85.334c0 11.798 9.558 21.334 21.334 21.334s21.334-9.536 21.334-21.334v-85.334c0-11.798-9.558-21.334-21.334-21.334zM405.334 256c0 35.286-28.714 64-64 64h-234.667c-35.285 0-64-28.714-64-64v-128c0-35.286 28.715-64 64-64h234.667c35.286 0 64 28.714 64 64 23.552 0 42.666 19.115 42.666 42.666v42.666c0 23.552-19.115 42.667-42.666 42.667zM362.666 128c0-11.776-9.579-21.334-21.334-21.334h-234.667c-11.755 0-21.334 9.558-21.334 21.334v128c0 11.776 9.579 21.334 21.334 21.334h234.667c11.755 0 21.334-9.558 21.334-21.334v-128z" />
 <glyph unicode="&#xe621;" d="M192 128c-11.776 0-21.334 9.536-21.334 21.334v85.334c0 11.798 9.558 21.334 21.334 21.334s21.334-9.536 21.334-21.334v-85.334c0-11.798-9.558-21.334-21.334-21.334zM128 128c-11.776 0-21.334 9.536-21.334 21.334v85.334c0 11.798 9.558 21.334 21.334 21.334s21.334-9.536 21.334-21.334v-85.334c0-11.798-9.558-21.334-21.334-21.334zM256 128c-11.776 0-21.334 9.536-21.334 21.334v85.334c0 11.798 9.558 21.334 21.334 21.334s21.334-9.536 21.334-21.334v-85.334c0-11.798-9.558-21.334-21.334-21.334zM405.334 256c0 35.286-28.714 64-64 64h-234.667c-35.285 0-64-28.714-64-64v-128c0-35.286 28.715-64 64-64h234.667c35.286 0 64 28.714 64 64 23.552 0 42.666 19.115 42.666 42.666v42.666c0 23.552-19.115 42.667-42.666 42.667zM362.666 128c0-11.776-9.579-21.334-21.334-21.334h-234.667c-11.755 0-21.334 9.558-21.334 21.334v128c0 11.776 9.579 21.334 21.334 21.334h234.667c11.755 0 21.334-9.558 21.334-21.334v-128z" />
 <glyph unicode="&#xe622;" d="M457.301 307.499l-85.291 85.76c-16.043 16.128-44.010 16.299-60.373 0.128-4.181-4.182-7.466-9.302-8.918-13.418-13.93-29.056-28.885-47.254-48.085-58.176l-4.63-2.24c-20.65-10.346-48.746-20.885-100.672-20.885-5.674 0-11.114-1.11-16.341-3.243-10.326-4.31-18.752-12.694-23.082-23.125-4.246-10.325-4.246-22.208 0-32.534 2.219-5.312 5.334-10.048 9.28-13.888l69.014-69.014-81.536-114.197 114.176 81.536 68.842-68.843c3.968-4.032 8.661-7.232 13.995-9.408 5.269-2.197 10.731-3.286 16.341-3.286s11.072 1.11 16.32 3.286c10.624 4.373 18.837 12.63 23.040 22.998 2.197 5.163 3.307 10.816 3.307 16.384 0 51.968 10.538 80.043 20.864 100.714 10.582 21.163 29.205 37.291 58.752 51.499 5.781 2.219 10.88 5.462 15.168 9.75 16.469 16.683 16.384 43.755-0.171 60.203zM345.344 205.077c-17.472-35.050-25.344-71.894-25.493-119.552l-170.518 170.475c45.632 0 81.365 7.147 115.114 23.125l5.014 2.24c29.846 14.912 52.651 40.384 72.278 81.792l83.712-86.421c-39.744-19.051-65.195-41.814-80.106-71.659z" />
+<glyph unicode="&#xe623;" d="M480 480h-448c-17.672 0-32-14.312-32-32v-352c0-17.688 14.328-32 32-32h192v-32h-96c-17.672 0-32-14.312-32-32v-32h320v32c0 17.688-14.328 32-32 32h-96v32h192c17.672 0 32 14.312 32 32v352c0 17.688-14.328 32-32 32zM448 128h-384v288h384v-288z" />
+<glyph unicode="&#xe624;" d="M192 133.333c-11.776 0-21.334 9.536-21.334 21.334v85.333c0 11.798 9.558 21.333 21.334 21.333s21.334-9.536 21.334-21.333v-85.333c0-11.798-9.558-21.334-21.334-21.334zM128 133.333c-11.776 0-21.334 9.536-21.334 21.334v85.333c0 11.798 9.558 21.333 21.334 21.333s21.334-9.536 21.334-21.333v-85.333c0-11.798-9.558-21.334-21.334-21.334zM320 133.333c-11.776 0-21.334 9.536-21.334 21.334v85.333c0 11.798 9.558 21.333 21.334 21.333s21.334-9.536 21.334-21.333v-85.333c0-11.798-9.558-21.334-21.334-21.334zM256 133.333c-11.776 0-21.334 9.536-21.334 21.334v85.333c0 11.798 9.558 21.333 21.334 21.333s21.334-9.536 21.334-21.333v-85.333c0-11.798-9.558-21.334-21.334-21.334zM405.334 261.333c0 35.285-28.714 64-64 64h-234.667c-35.285 0-64-28.715-64-64v-128c0-35.286 28.715-64 64-64h234.667c35.286 0 64 28.714 64 64 23.552 0 42.666 19.115 42.666 42.666v42.666c0 23.552-19.115 42.666-42.666 42.666zM362.666 133.333c0-11.776-9.579-21.334-21.334-21.334h-234.667c-11.755 0-21.334 9.558-21.334 21.334v128c0 11.776 9.579 21.333 21.334 21.333h234.667c11.755 0 21.334-9.558 21.334-21.333v-128z" />
+<glyph unicode="&#xe625;" d="M192 128c-11.776 0-21.334 9.536-21.334 21.334v85.334c0 11.798 9.558 21.334 21.334 21.334s21.334-9.536 21.334-21.334v-85.334c0-11.798-9.558-21.334-21.334-21.334zM128 128c-11.776 0-21.334 9.536-21.334 21.334v85.334c0 11.798 9.558 21.334 21.334 21.334s21.334-9.536 21.334-21.334v-85.334c0-11.798-9.558-21.334-21.334-21.334zM405.334 256c0 35.286-28.714 64-64 64h-234.667c-35.285 0-64-28.714-64-64v-128c0-35.286 28.715-64 64-64h234.667c35.286 0 64 28.714 64 64 23.552 0 42.666 19.115 42.666 42.666v42.666c0 23.552-19.115 42.667-42.666 42.667zM362.666 128c0-11.776-9.579-21.334-21.334-21.334h-234.667c-11.755 0-21.334 9.558-21.334 21.334v128c0 11.776 9.579 21.334 21.334 21.334h234.667c11.755 0 21.334-9.558 21.334-21.334v-128z" />
+<glyph unicode="&#xe626;" d="M128 128c-11.776 0-21.334 9.536-21.334 21.334v85.334c0 11.798 9.558 21.334 21.334 21.334s21.334-9.536 21.334-21.334v-85.334c0-11.798-9.558-21.334-21.334-21.334zM405.334 256c0 35.286-28.714 64-64 64h-234.667c-35.285 0-64-28.714-64-64v-128c0-35.286 28.715-64 64-64h234.667c35.286 0 64 28.714 64 64 23.552 0 42.666 19.115 42.666 42.666v42.666c0 23.552-19.115 42.667-42.666 42.667zM362.666 128c0-11.776-9.579-21.334-21.334-21.334h-234.667c-11.755 0-21.334 9.558-21.334 21.334v128c0 11.776 9.579 21.334 21.334 21.334h234.667c11.755 0 21.334-9.558 21.334-21.334v-128z" />
+<glyph unicode="&#xe627;" d="M192 128c-11.776 0-21.334 9.536-21.334 21.334v85.334c0 11.798 9.558 21.334 21.334 21.334s21.334-9.536 21.334-21.334v-85.334c0-11.798-9.558-21.334-21.334-21.334zM128 128c-11.776 0-21.334 9.536-21.334 21.334v85.334c0 11.798 9.558 21.334 21.334 21.334s21.334-9.536 21.334-21.334v-85.334c0-11.798-9.558-21.334-21.334-21.334zM256 128c-11.776 0-21.334 9.536-21.334 21.334v85.334c0 11.798 9.558 21.334 21.334 21.334s21.334-9.536 21.334-21.334v-85.334c0-11.798-9.558-21.334-21.334-21.334zM405.334 256c0 35.286-28.714 64-64 64h-234.667c-35.285 0-64-28.714-64-64v-128c0-35.286 28.715-64 64-64h234.667c35.286 0 64 28.714 64 64 23.552 0 42.666 19.115 42.666 42.666v42.666c0 23.552-19.115 42.667-42.666 42.667zM362.666 128c0-11.776-9.579-21.334-21.334-21.334h-234.667c-11.755 0-21.334 9.558-21.334 21.334v128c0 11.776 9.579 21.334 21.334 21.334h234.667c11.755 0 21.334-9.558 21.334-21.334v-128z" />
 </font></defs></svg>
\ No newline at end of file
diff --git a/js/vendor/video-js/font/vjs.ttf b/js/vendor/video-js/font/vjs.ttf
index 6ff1f631a457a230439162c3a8fd015fc6a93262..3330fcaaab85285e0a874a64485fa850254de688 100755
GIT binary patch
delta 1301
zcmbW1UuYaf9LIk%J3F(xcRTklcbCMPyGsHIJukUla!o?o5+Q9Pl@_8AM8Uhp^is(E
zp^0!pH2Wg<HCe3^e8@u(!3x3!tPnK#tk#F4_@Hp0Mtti-ieUB5-)8T`JPH0__V@Yz
zX68G)GtBNTy;Io$0stPcK!NnN=SDMH|DQi%WglB^v6!#?@yXqH0mv!TFBkHw70iCr
zRm@sp<@Fn%ukRL6TL5FvE-&R@g=@cH*Z9}?IJ=Amwn@JM$THM}%f+?o>V1hG*<sX2
zE9J$h{Pf$;?BQ5vf%Rg(T7gUO8|wE_$4mL*(rowM1Jw6$k*P{~bq!w>W8!G@-X(fC
zv_-}y=1@z}fC9&_i8o{;b~x1ftJQJ_qJ~D_AslPc`YFz0k9xysLTb0j9_OdXIdW#m
zHnkoX6$hD9wXbUrX9Q8yN$%BERrhk?)l^mU3QiT3_>G_`gc&r9fT?L_z%Ue5yDg;7
zxh_Q~*KX@6PE*4E%r{5Yw*1Q;#xW)*oo8*;|5znw?Q$e#N~3N_$tWeNqS_xtQWT(8
zk0cbDPS<|#dBeOS4H49JN_9ObC^eW$smcs0I4bI->#hNl|2eYu<<JkDMC=bnzT1$!
zu~_h9!kB>z`$JF21<e-<c>%W*S`7-M0jFUUcR$fDX*kf;N2f`60QpIh$c~TDB*~6t
zF3@ZMc|b`75&_a^&IpgQWgc;mbBN41oIB`L<4ucLq~R2&n>$W5?r=Q*50c|~%^ebN
zHk?!Bkc5lmfLw$Kq+k|af;ZtkJN;DHo=Ar5@l@zIUrs%5uP6KMyQz_lx0tG_3rypR
z!Zo&lg8jdWC8Kz_fvB|1D4upOY6`DUPilTIw>tJ#$KC>9_^LCc7EPX32As=<Q7=4h
zzT!Lg2t2r{826u^ALwLze{_PJw~s~}T}~&q<iDH!eL7au*dWWXpVfIj%eVO#f{Gcj
zEt=X@ZC9VwOZpwXZcrm<d}=)OY<ue7ITK9Fd?5SemT%u*4Gaf%g4Ix|tGDah@C)Iu
zA~&L1^lG>4zSBc{K0N*doQGfW2020P%}mHHpYd);RPF~*ykD2wtRN4znISK<S;do)
zZRQ{#(`EyPVbQs7Ovj4j>9XtTvg_%x>xn#q6I@fbgX83>_GH)eCK{Kah^-7IJD!PN
hI8nK|ST2^!B{)%pd02u1yap?fhg&E6>=!dv{svha+adq}

delta 857
zcmXw0Uq};i9RJ?G-`(%F+uhc7g^q1$p&3p$b$>vVda!>|QD8!W4xLWf=4jK52z}_m
zr%<mVD13^D-fAHhK`%mBg1!Vj_^>F1p4vm}!Kn2;Z{6MZK7YP{es{m$z1)-J954W2
zgL&Yf{lew8u+&Ia(Rqt8Jd#P|wx{1K0E`#)=y)QZL)1{uBTD1xn`4zTS1PC%0D@X7
znHYr@??Zq#42Y!A;Fs79)Z3_!q%wusi7jOv^-t8_(o-Yx1bwX+0NOvJQOG1_b8r&A
z1BCif2eOGw@|3i4A9WfR@#LoR1^iIF!grR|`q(loGabDbQEPac2?hcsN6Ek2P=@NC
zYSk=72THzOs5wmaYk>Dx>O5KuJMiy|lgumPk8z<U47ZQ%2=}mENb%_mvW*Q6))V85
z6H+~kFf5fLF=D5JK<z}dOM)QTMMjfdiYO{BS#~Otq&VdT(Lo8J4)H(YGK;j8ut8$H
zQ%^H_L()<<P9#K(M$LEemiAj<I*l88t6im^sHzAI!}GlHLT@d8(E}VC3KhA!+ln#J
z)Pixi__1k+Fk$0aaQl!_?+ZAea{?tSQQdXwfT+3LHUMLu@p>E2KYBByc2~g0?(fD{
zF!RGCCK~0=C=)lDyGp!i8QzHhD)3%@klzu`l5Vn0R>__i6PLwbQlIpgcGEF>mu}KM
zc~E{T@7fk^AM8E$U&@TK>2Nz1)R$V;>2p4CWe<$HHTSxw-?OG))Bhfn%zcKqu@X5p
zN06BcfCUE}uW=3tcx#+T9<Ol$bW~P7!SiaUaT%JS*E~O-qGQgqxHZ$_)=Z0AGm#Hr
zgEiDj5NtkLYqo~Yz$D~h0FrPWaRR0w3jqj05ZYlsH#3>H2wcLVahQfQB(QitX>3H#
F{R0~;rHudp

diff --git a/js/vendor/video-js/font/vjs.woff b/js/vendor/video-js/font/vjs.woff
index 1cb5ed97156ab029714b021691a45583e7d2a8c6..5cc9b43f7fb309cf8a13a845f11087532edaa552 100755
GIT binary patch
delta 1312
zcma)6UuauZ82_Ez-1N4Uv~!JiOOvK;WY&&V)0tY<4#w=PjFPctI#AS5Yg)QAaY?ah
zsn--AoF9twCT69L!XDParZN(yFhQ~NMU*}`{PUm$hQ$|Oq$9;t>UVMjb`PQle&6|h
zf6niIC!8<e94S26^h)5^u|O~w0K5g%ftUA;am~|wet(_r83a6o@tZUo80q!_ZT*~n
zK|*Wa`gt@Gig9e2{bwcq{P1cf9E!`>Ci_|yjpJjX7lC$m;jbX@E5<p<vB%i=N?6ZZ
zz8#MwW;iCbHYDPKHG3=)nqk3?6CAKrFmM7>p~x7=P6MJ(;_>Ff_pxX^!8&QK@l>F2
z239MC5Zc6OG!l(Yy({+X7PY|zSn77MMJ*do|GhYD;aUw1*oED=4^EbN01u%X2hoSa
zIEo<*<0PKudxr25CK1ClW})MCoWt8NZ~-}7#0swB8m{98zQ9-b8f&<PpYRKA<2U?{
zKTyJ!m)o(4deJBxVy|cwUePHIh@NVL)h++IxJR@N`h7jqYz|8Es5E|QdbxXX4u>#c
z{AfwkzUicvqb)zU3i)B>J4H!S&giJ|DYLX}oaQ}7m-27byrEd1`&6AZ_SDCBr_)PI
zv@*A(jeNPfsxrScm;a#Np(@XOb|e2u<G4-Hmy-GR``c{lvR1ZwjUiX3zM0reIJSbM
zCTV`2k{XpaR7x(+=SV9Bi6*=L$xN1R5nWL!H@}!9t&2HVs5x3(q?|@2K4)eo%NvfZ
zCZbYdlWn=6+DpOG9*0f~8Omx@R4JQIXDLhR1=4km{3_`SDV?<A^e;s_YWS1?UG%?%
zI!jFsYWz655+<$uDyd<LMk#E(<8=G3t8{VZ{Wxi%GS|G8lFi8yol+TkkMG*VcgSS2
z{2OsJOPQ2WbdDHv&Z+z<=gY#Fb`4wB_Zc@`J-tKx814K5E&Rv@JVkr4b$#FVU)$Rp
z=O<c3(Y=m}FSc)ctgUzUI-o!pez&`&`Oxaz^9}uXP;aSJuN^trA&K0Ln7daD7?<5e
zT_zb_I|1-q4OC9q@ezMnF2S8hE0=}&6IHG-_g1-;`Kc;bd1CBUZbJ=xRbGb&F)F*X
z)^bFbqNZbtn%opMxhZOLQ`F=(mhY>cHAN>_IEn}(iYYvWF`Pvl6BW;cM{ocSv$vyW
dVzj&R4{&#sM|uol9_2GU)@Sd|87a^4zX5=PW`zI%

delta 890
zcmXX^ZAepL6n@@&@8)z)mme9i&27!H6kP_{DlnlYRxr^K^xZIVN>gcm3@f%kLRmku
zS0P*!LG%F;!Hw{T{;@y;!9wUy1fvfF|LBkU5q+$4?|bjP&-*^-dCxibaL)U(b*Z^*
zBoqvW!r>6$UP1xragXr_zEb|er%cvZla2|%F;TO9CK&3dZvdPra=D<vvd#ReGZq;j
zElc)A4ey2)ZQYSLX|BU$TMXEvT@gBW9VdIQj$MvBQ4&cTBipAznUvl}V}l9Oo{;@j
zL(j2g+nZP<K?y5wl3>;mXhUBl)<xPBz{)kWSnf>^^v4IO{Ac9j)*;gg6a|biWw<xa
z6;_*MpNgF%f8InZ@@a9TO0Zwj9Fd27SW$#hY=IMA>_9DcQ^5yt2uE-fA%t-f=g^5L
zVz`VET*Y<VKpM9&jTzj>Lp;TEsF=k(7O;pVyvGN8L>Aw$hIRZX!!P_}GP5unD`6E>
z6@BUoD`d8y-|q(`Hi1S2Zp(wLTD>N($Z|TJ<{fzr`aUjpbv|!gR?g0vuJBfCyp&Jf
z&7>cXW-Q@_h1VwHk4DvHYq?22H8-bzw@1x#Dw9y#D?DaX#`0UK;tA(Y>CY6e_k^Sk
z@RVmyQyX=|PA|2LTH($XWh+;`8_505<w&81W|4KR!cbW5i(9GuxwYKBk0Kbr*E}vq
z;pt|6zWCrzSS3AXxh}S@5pCx_ZzBuvGu~`cKLh<RptB-s7-gV`>Ejh#qA}DMx=gym
z;0p18!A;mqmhd-I9bSVMpc+kDT}nPF+LaMp<V*@fBo$mF6<j10+)Tk$MzBaaj9$cX
p0$nuyIC{{JKDg<Q)WHw^jHW3F+R3RKL%4(pIg7v+(s-XQ_#YabwPyeT

diff --git a/package.json b/package.json
index 63eed348..1f9a1bd8 100644
--- a/package.json
+++ b/package.json
@@ -7,9 +7,9 @@
     "icon": "images/icon.png",
     "toolbar": false,
     "frame": false,
-    "width": 962,
+    "width": 965,
     "height": 600,
-    "min_width": 962,
+    "min_width": 965,
     "min_height": 600,
     "resizable": true
   },
diff --git a/sass/_layout.scss b/sass/_layout.scss
old mode 100644
new mode 100755
index d6b40652..cbc3206f
--- a/sass/_layout.scss
+++ b/sass/_layout.scss
@@ -13,8 +13,19 @@ body {
   font-family: 'Helvetica Neue', Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   color: $text-color;
+  font-size: 100%;
 }
 
+body.tv-mode-enable{
+  font-size: 31px;
+}
+@media (max-width: 1440px) {
+  body.tv-mode-enable{
+    font-size: 23px;
+  }
+}
+
+
 ::-webkit-input-placeholder {
   color: rgba(255, 255, 255, 0.4);
   font-weight: normal;
@@ -150,6 +161,29 @@ a { text-decoration: none; }
           content: "\e00B";
       }
 
+      &.tv-mode { 
+        color:#000; 
+        background:transparent; 
+        margin:0; 
+        width:32px;
+        height:32px; 
+        border-radius:0; 
+        display:block;
+        font-size: 12px;
+      }
+      &.tv-mode::before {
+          content: "\e623";
+          font-family: VideoJS;
+          font-size: 1.85em;
+          line-height: 0.2em;
+          background: none;
+          display:block;
+          text-shadow: 0 1px 0 rgba(255,255,255,0.1)
+      }
+      &.tv-mode.active::before {
+          content: "\e623";
+      }
+
     }
   }
 }
@@ -185,34 +219,34 @@ a { text-decoration: none; }
 #catalog-select {
   @include box-sizing(border-box);
   @include scrollable();
-  width: 180px;
+  width: 11.25em;
   position: absolute;
   top: $header_height;
-  padding: 20px;
+  padding: 1.25em;
   height: calc(100% - #{$header_height});
   background: #121212;
   border-right: 1px solid #000;
   font-family: 'Myriad Pro', 'Lucida Grande', sans-serif;
 
   h4 {
-    margin-top: 40px;
+    margin-top: 2.6em;
     color: #404040;
     font-weight: bold;
-    margin-bottom: 10px;
+    margin-bottom: 0.4em;
   }
 
   ul {
     li {
       display: block;
       font-weight: bold;
-      font-size: 13px;
+      font-size: 0.8125em;
 
       a {
         @include transition(background-color ease .3s);
         color: #999999;
         display: block;
         border-radius: 3px;
-        padding: 8px;
+        padding: 0.61538461538462em;
 
         &:hover { background: #010101; }
       }
@@ -233,25 +267,25 @@ a { text-decoration: none; }
 
   .search {
     position: absolute;
-    right: 20px;
-    top: 12px;
+    right: 1.25em;
+    top: 0.75em;
 
     input {
       border: 2px solid rgba(255, 255, 255, 0.4);
       border-radius: 5px;
       color: #FFF;
-      font-size: 12px;
-      height: 15px;
-      padding: 8px 10px;
-      width: 115px;
+      font-size: 0.75em;
+      height: 1.25em;
+      padding: 0.5em 0.83333333333333em;
+      width: 9.58333333333333em;
       background: transparent;
       font-weight: bold;
     }
 
     i {
       position: absolute;
-      top: 10px;
-      right: 10px;
+      top: 0.4375em;
+      right: 0.625em;
       color: rgba(255, 255, 255, 0.4);
     }
   }
@@ -262,7 +296,7 @@ a { text-decoration: none; }
 .container {
   height: calc(100% - #{$header_height});
   overflow: hidden;
-  margin: #{$header_height} 0 0 180px;
+  margin: #{$header_height} 0 0 11.25em;
   position: relative;
 }
 
@@ -271,7 +305,7 @@ a { text-decoration: none; }
 body.has-notification {
   .container {
     height: calc(100% - #{$header_height} - #{$notification_height});
-    margin: $header_height + $notification_height 0 0 180px;
+    margin: $header_height + $notification_height 0 0 11.25em;
   }
 
   #catalog-select {
diff --git a/sass/_moviedetails.scss b/sass/_moviedetails.scss
old mode 100644
new mode 100755
index 49db0606..a590e1b3
--- a/sass/_moviedetails.scss
+++ b/sass/_moviedetails.scss
@@ -121,8 +121,8 @@ sidebar {
         position: absolute;
         top: 0;
         left: 0;
-        height: 30px;
-        width: 30px;
+        height: 2.5em;
+        width: 2.5em;
         z-index: 300;
         cursor: pointer;
 
@@ -136,6 +136,11 @@ sidebar {
           opacity: 0.5;
           text-shadow: 0 0 5px #000;
         }
+        img {
+          width: 100%;
+          height: 100%;
+
+        }
       }
 
       .poster-cont,
@@ -168,25 +173,25 @@ sidebar {
         .movie-config {
           h4 {
             font-weight: bold;
-            font-size: 14px;
-            margin-left: 10px;
-            margin-top: 8px;
+            font-size: 0.875em;
+            margin-left: 0.71428571428571em;
+            margin-top: 0.57142857142857em;
           }
 
           .quality-cont {
             position: absolute;
             bottom: 0;
             left: 0;
-            height: 50px;
+            height: 3.125em;
             width: 100%;
-            margin-left:1px;
+            margin-left: 0.0625em;
             text-shadow: 0 0 2px #000;
             background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.85) 100%);
             -webkit-transform: translateZ(0);
 
             .quality-off {
-              margin-left: 10px;
-              font-size: 12px;
+              margin-left: 0.83333333333333em;
+              font-size: 0.75em;
             }
           }
 
@@ -196,7 +201,7 @@ sidebar {
               font-weight: bold;
               color: #FFF;
               float: right;
-              font-size: 15px;
+              font-size: 0.9375em;
             }
 
             span.good { color: #27ae60; }
@@ -220,43 +225,43 @@ sidebar {
             background: transparent;
             border-radius: 32px;
             display: block;
-            height: 12px;
+            height: 0.75em;
             position: absolute;
-            width: 25px;
+            width: 1.5625em;
             border: 2px solid #FFF;
-            left: 48px;
-            top: 28px;
+            left: 3em;
+            top: 1.75em;
             cursor: pointer;
 
             label {
               @include transition(color .2s ease);
               color: #fff;
-              font-size: 12px;
+              font-size: 0.75em;
               font-weight: bold;
               text-transform: uppercase;
-              width: 20px;
+              width: 1.66666666666667em;
               cursor: pointer;
 
               &:nth-of-type(1) {
-                left: -38px;
+                left: -3.16666666666667em;
                 position: absolute;
                 text-align: right;
               }
 
               &:nth-of-type(2) {
                 position: absolute;
-                right: -30px;
+                right: -2.5em;
                 text-align: left;
               }
             }
 
             input {
-              height: 12px;
+              height: 0.75em;
               left: 0;
               opacity: 0;
               position: absolute;
               top: 0;
-              width: 60px;
+              width: 3.75em;
               z-index: 2;
               cursor: pointer;
 
@@ -268,7 +273,7 @@ sidebar {
                   &:nth-of-type(2) { color: #FFF; }
                 }
 
-                ~ .toggle { left: 2px; }
+                ~ .toggle { left: 0.125em; }
               }
 
               ~ :checked ~ label {
@@ -276,7 +281,7 @@ sidebar {
                 &:nth-of-type(2) { color: $popcorn-blue; }
               }
 
-              ~ :checked ~ .toggle { left: 13px; }
+              ~ :checked ~ .toggle { left: 0.8125em; }
             }
           }
 
@@ -284,11 +289,11 @@ sidebar {
             @include transition(left .2s ease);
             background: $popcorn-blue;
             border-radius: 50%;
-            height: 10px;
+            height: 0.625em;
             left: 0;
             position: absolute;
-            top: 1px;
-            width: 10px;
+            top: 0.0625em;
+            width: 0.625em;
             z-index: 1;
           }
         }
@@ -311,19 +316,19 @@ sidebar {
 
           h2 {
             font-weight: 200;
-            font-size: 34px;
-            margin-bottom: 10px;
+            font-size: 2.125em;
+            margin-bottom: 0.29411764705882em;
             color: #f5f7fa;
-            padding-right: 30px;
+            padding-right: 0.88235294117647em;
           }
 
           .movie-quick-info {
-            margin-bottom: 5px;
+            margin-bottom: 0.3125em;
 
             li {
               display: inline-block;
               vertical-align: top;
-              font-size: 12px;
+              font-size: 0.75em;
               color: $popcorn-blue;
               font-weight: bold;
 
@@ -337,14 +342,14 @@ sidebar {
           }
 
           .health {
-            font-size: 24px;
-            width: 20px;
-            height: 20px;
+            font-size: 1.5em;
+            width: 0.83333333333333em;
+            height: 0.83333333333333em;
             text-align: center;
-            line-height: 20px;
+            line-height: 0.83333333333333em;
             cursor: pointer;
             position: absolute;
-            top: 10px;
+            top: 0.41666666666667em;
             right: 0;
 
             &.bad {
@@ -372,29 +377,29 @@ sidebar {
         .rating {
           display: inline-block;
           position: relative;
-          font-size: 14px;
-          margin: 0 10px 0 0;
+          font-size: 0.875em;
+          margin: 0 0.71428571428571em 0 0;
 
           ul { color: #f5f7fa; }
         }
 
         p {
-          margin-top: 10px;
+          margin-top: 0.71428571428571em;
           color: #babdc2;
-          font-size: 14px;
-          line-height: 24px;
+          font-size: 0.875em;
+          line-height: 1.71428571428571em;
         }
 
         .subtitles-list {
-          margin-top: 10px;
-          margin-bottom: 10px;
+          margin-top: 0.625em;
+          margin-bottom: 0.625em;
 
           h4 {
-            font-size: 12px;
+            font-size: 0.75em;
             color: #f5f7fa;
             display: inline-block;
             vertical-align: middle;
-            margin-right: 5px;
+            margin-right: 0.41666666666667em;
           }
 
           ul {
@@ -406,9 +411,10 @@ sidebar {
               vertical-align: top;
 
               span {
-                width: 22px;
-                height: 16px;
+                width: 1.375em;
+                height: 1em;
                 display: inline-block;
+                background-size: contain;
               }
 
               .flag {
@@ -432,10 +438,10 @@ sidebar {
           color: #FFF;
           font-weight: bold;
           text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
-          padding: 14px 26px;
+          padding: 0.875em 1.625em;
           border-radius: 2px;
           display: inline-block;
-          margin-top: 10px;
+          margin-top: 0.625em;
           box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
 
           &:hover { background-image: linear-gradient(to bottom, #4387de 0%, #175ab0 100%); }
diff --git a/sass/_movielist.scss b/sass/_movielist.scss
old mode 100644
new mode 100755
index 43ced822..692d1374
--- a/sass/_movielist.scss
+++ b/sass/_movielist.scss
@@ -3,11 +3,11 @@
   margin-bottom: 15px;
 
   li {
-    height: 195px;
-    width: 132px;
+    width: 8.3125em;
+    height: 12.25em;
     padding: 0;
     display: inline-block;
-    margin: 12px;
+    margin: 0.75em;
     border-radius: 3px;
     position: relative;
     background: #000;
@@ -21,12 +21,12 @@
       display: block;
       position: absolute;
       bottom: 0;
-      line-height: 195px;
+      line-height: 3.21666666666667em;
       right: 0;
       top: 0;
       left: 0;
       text-align: center;
-      font-size: 60px;
+      font-size: 3.75em;
       opacity: 0;
       width: 101%; // "fixes" 1px line on hover
       height: 101%; // "fixes" 1px line on hover
@@ -34,8 +34,8 @@
     }
     
     .cover {
-      width: 133px;
-      height: 196px;
+      width: 8.3125em;
+      height: 12.25em;
       overflow: hidden;
       display: block;
       margin: 0 0 10px 0;
@@ -78,22 +78,22 @@
 
     a {
       display: block;
-      height: 196px;
-      width: 133px;
+      width: 8.3125em;
+      height: 12.25em;
     }
 
     strong {
       color: #FFF;
       display: block;
       font-weight: bold;
-      font-size: 14px;
-      overflow: hidden;
+      font-size: 0.875em;
+      overflow: visible;
       text-overflow: ellipsis;
       white-space: nowrap;
     }
 
     small {
-      font-size: 12px;
+      font-size: 0.75em;
       color: #666;
     }