@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800,300italic,400italic,600italic,700italic,800italic);
body {
  background: linear-gradient(rgba(30, 27, 38, 0.95), rgba(30, 27, 38, 0.95)), url("https://i.ibb.co/FDGqCmM/papers-co-ag74-interstellar-wide-space-film-movie-art-33-iphone6-wallpaper.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: repeat;
}

.container {
    width: 290px;
    height: 555px;
    margin-left: -10px;
}

.cellphone-container {
    width: 290px;
    height: 555px;
    background-color: #1e1b26;
    margin: 60px auto 0 auto;
    border-radius: 4px;
    filter: drop-shadow(1px 1px 4px #008000 );
}

.cellphone-containerOrange {
    width: 290px;
    height: 555px;
    background-color: #1e1b26;
    margin: 60px auto 0 auto;
    
    border-radius: 4px;    
    filter: drop-shadow(1px 1px 4px #ff8c00);
}

.menu {
  position: absolute;
  right: 12px;
  top: 6px;
  z-index: 999;
}
.menu i {
  font-size: 40px;
  color: #fe4141;
  filter: drop-shadow(4px 4px 10px rgba(0, 0, 0, 0.5));
}

.movie-img {
    width: 290px;
    height: 350px;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 111 !important;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, black), color-stop(0.35, black), color-stop(0.5, black), color-stop(0.65, black), color-stop(0.85, rgba(0, 0, 0, 0.6)), color-stop(1, transparent));
    position: relative;
    

}

.movie {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+39,1e1b26+53&0+38,1+55 */
    background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0.06) 39%, rgba(30, 27, 38, 0.88) 53%, #1e1b26 55%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0.06) 39%, rgba(30, 27, 38, 0.88) 53%, #1e1b26 55%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0.06) 39%, rgba(30, 27, 38, 0.88) 53%, #1e1b26 55%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#1e1b26',GradientType=0 );
    /* IE6-9 */
    position: static;
    background-size: contain;
    background-size: cover;
    z-index: 1 !important;
    width: 290px;
    margin-top: -50px;
    display: block;
    border-radius: 4px;
    
}

.text-movie-cont {
  padding: 0px 12px;
  text-align: justify;
}

.action-btn {
  text-align: right;
}
.action-btn i {
  color: #fe4141;
  font-size: 28px;
  text-align: right;
}

.watch-btn {
    display: block;
    width: 290px;
    height: 50px;
    margin-left: -10px;
    
}
.watch-btn h3 i {
  font-size: 14px;
  margin-right: 2px;
  position: relative;
  float: left;
  line-height: 1;

}

.action-row {
  margin-top: 24px;
}

.summary-row {
  margin-top: 12px;
}

/* TYPOGRAPHY STARTS */
/* Fonts */
h1, h2, h3, h4, h5 {
    font-family: "Helvetica Neue", sans-serif;
    font-weight: bold;
    color: #e7e7e7;
    margin: 0px;
}

h1 {
    font-size:16px;
    font-weight: 200;
    width: 290px;
    text-align: left;
    margin-bottom: 1px;
}

h3 {
    font-size: 14px;
    font-weight: 400;
    color: #fe4141;
    
}

h5 {
  font-size: 12px;
  font-weight: 400;
}

.movie-gen, .movie-likes {
  margin: 0px;
  padding: 0px;
}
.movie-gen li, .movie-likes li {
  font-family: "Open Sans", sans-serif;
  font-size: 12px;
  color: #818181;
  width: auto;
  display: block;
  float: left;
  margin-right: 6px;
  font-weight: 600;
}




/* TYPOGRAPHY ENDS */
/** GRID STARTS **/
.thegrid {
  margin: 0 auto;
}

.elements-distance, .movie-details, .movie-description, .movie-actors {
  margin: 0px;
}