*{-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box}
:after,
:before{-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box}
html{-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(0,0,0,0)}
body{font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; line-height: 1.42857143; color: #333}
html, body{background-color: #ffffff; font-size: 14px; margin: 0}
aside, footer, header, nav, section{display: block}
section{margin: 0 auto; width: 1141px}
/* HEADER */
header{background-color: #ffffff}
header .header-wrapper{background-color: #ffffff; margin: 0 auto; padding: 20px 0; position: relative; width: 1141px}
header .header-wrapper:after{content: ""; display: table; clear: both}
/* logo */
header .header-wrapper .logo{display: inline-block; text-align: left}
header .header-wrapper .logo img{max-width: 200px}
/* menu */
header .header-wrapper .menu{float: right; text-align: right}
header .header-wrapper .menu nav{margin: 10px 0}
header .header-wrapper .menu nav ul{margin: 0; padding: 0}
header .header-wrapper .menu nav ul li{display: inline-block; margin: 0; margin-left: 15px; position: relative}
header .header-wrapper .menu nav ul li a,
header .header-wrapper .menu nav ul li a:active,
header .header-wrapper .menu nav ul li a:visited,
header .header-wrapper .menu nav ul li a:focus{color: #76259d; font-weight: 900; position: relative; text-decoration: none; text-transform: uppercase}
header .header-wrapper .menu nav ul li.active a{color: #7ec502}
/* Previews */
.previews{overflow: hidden; width: 100%; position: relative}
.previews .carousel-control{background: none !important; top: 45%; width: auto}
.previews .carousel-control.left{left: calc(((100% - 1141px) / 2) + 2%)}
.previews .carousel-control.right{right: calc(((100% - 1141px) / 2) + 2%)}
.previews .carousel-control img{width: 20px}
.previews .preview{background-color: #201d1d; width: 100%}
.previews .preview img,
.previews .preview .carousel-image{display: block; height: 422px; margin: 0 auto; width: 1141px}
.previews .preview img{object-fit: cover}
.previews .preview .carousel-image{background-position: 50% 50%; background-size: cover}
.previews .preview .info{background-color: rgba(0, 0, 0, 0.7); bottom: 0; left: 0; padding: 20px 0; position: absolute; text-align: center; width: 100%}
.previews .preview .info .caption-container{-webkit-align-items: center; -ms-flex-align: center; align-items: center; display: -ms-flexbox; display: -webkit-flex; display: flex; margin: 0 auto; width: 1050px}
.previews .preview .info .caption-container .caption-details{text-align: left; width: 75%}
.previews .preview .info .caption-container .caption-link{text-align: right; width: 50%}
.previews .preview .info h2{color: #ffffff; font-weight: 900; margin: 5px 0}
.previews .preview .info p{color: #ffffff; font-weight: 400; margin: 5px 0}
.previews .preview .info a{border: 1px solid #ffffff; color: #ffffff; display: inline-block; font-weight: 400; padding: 10px 20px; text-decoration: none; vertical-align: middle}
.previews .preview .info a:hover{color: #508e01; border-color: #508e01}
/******************/
/**** Carousel ****/
/******************/
.carousel{position: relative}
.carousel-inner{position: relative; width: 100%; overflow: hidden}
.carousel-inner .item{position: relative; display: none; -webkit-transition: .6s ease-in-out left; -o-transition: .6s ease-in-out left; transition: .6s ease-in-out left}
.carousel-inner .item a img,
.carousel-inner .item img{line-height: 1; display: block; max-width: 100%; height: auto}
.carousel-inner .active,
.carousel-inner .next,
.carousel-inner .prev{display: block}
.carousel-inner .active{left: 0}
.carousel-inner .next,
.carousel-inner .prev{position: absolute; top: 0; width: 100%}
.carousel-inner .next{left: 100%}
.carousel-inner .prev{left: -100%}
.carousel-inner .next.left,
.carousel-inner .prev.right{left: 0}
.carousel-inner .active.left{left: -100%}
.carousel-inner .active.right{left: 100%}
.carousel-control{position: absolute; top: 0; bottom: 0; left: 0; width: 15%; font-size: 20px; color: #fff; text-align: center; text-shadow: 0 1px 2px rgba(0,0,0,.6); background-color: rgba(0,0,0,0); filter: alpha(opacity=50); opacity: .5}
.carousel-control.left{background-image: -webkit-linear-gradient(left,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%); background-image: -o-linear-gradient(left,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%); background-image: -webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,.0001))); background-image: linear-gradient(to right,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1); background-repeat: repeat-x}
.carousel-control.right{right: 0; left: auto; background-image: -webkit-linear-gradient(left,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%); background-image: -o-linear-gradient(left,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%); background-image: -webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.0001)),to(rgba(0,0,0,.5))); background-image: linear-gradient(to right,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1); background-repeat: repeat-x}
.carousel-control:focus,
.carousel-control:hover{color: #fff; text-decoration: none; filter: alpha(opacity=90); outline: 0; opacity: .9}
.carousel-indicators{position: absolute; bottom: 10px; left: 50%; z-index: 15; width: 60%; padding-left: 0; margin-left: -30%; text-align: center; list-style: none}
.carousel-indicators li{display: inline-block; width: 10px; height: 10px; margin: 1px; text-indent: -999px; cursor: pointer; background-color: #000\9; background-color: rgba(0,0,0,0); border: 1px solid #fff; border-radius: 10px}
.carousel-indicators .active{width: 12px; height: 12px; margin: 0; background-color: #fff}
.carousel-caption{position: absolute; right: 15%; bottom: 20px; left: 15%; z-index: 10; padding-top: 20px; padding-bottom: 20px; color: #fff; text-align: center; text-shadow: 0 1px 2px rgba(0,0,0,.6)}
.carousel-caption .btn{text-shadow: none}
@media all and (transform-3d),(-webkit-transform-3d){
    .carousel-inner .item{-webkit-transition: -webkit-transform .6s ease-in-out; -o-transition: -o-transform .6s ease-in-out; transition: transform .6s ease-in-out; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-perspective: 1000px; perspective: 1000px}
    .carousel-inner .item.active.right,
    .carousel-inner .item.next{left: 0; -webkit-transform: translate3d(100%,0,0); transform: translate3d(100%,0,0)}
    .carousel-inner .item.active.left,
    .carousel-inner .item.prev{left: 0; -webkit-transform: translate3d(-100%,0,0); transform: translate3d(-100%,0,0)}
    .carousel-inner .item.active,
    .carousel-inner .item.next.left,
    .carousel-inner .item.prev.right{left: 0; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0)}
}
@media screen and (min-width:768px){
    .carousel-caption{right: 20%; left: 20%; padding-bottom: 30px}
    .carousel-indicators{bottom: 20px}
}
/* homepage */
#homepage{background-color: #ffffff}
#homepage:after{content: ""; display: table; clear: both}
/* main-content */
.main-content{background-color: #ffffff; float: left; margin: 15px; margin-left: 0; width: 850px}
/* Post */
.main-info{text-align: justify; padding: 0 10px 0 10px}
.main-info:after{content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0}
.main-info h1{font-size: 24px; text-align: center; padding: 0; margin: 10px 0}
.main-info p{text-indent: 20px; text-align: justify}
/*********************/
/**** Date Picker ****/
/*********************/
.date-picker{background-color: #201d1d; color: #ffffff; z-index: 1000}
.date-picker .date-picker-header:after{content: ""; display: table; clear: both}
.date-picker p{display: inline-block; font-weight: 400; margin: 0; padding: 0}
.date-picker .order-by-container{text-align: center; position: relative}
.date-picker .order-by-container select,
.date-picker .order-by-container select:-moz-focusring,
.date-picker .order-by-container select::-moz-focus-inner{color: transparent !important; text-shadow: 0 0 0 #ffffff !important; border: 0}
.date-picker .order-by-container .order-by,
.date-picker .order-by-container #order-by{-webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: #201D1D; border: none; color: #ffffff; font-weight: 400; font-size: 24px; padding: 11px 30px 12px; padding-right: 100px; background-image: url("/templates/images/downwardarrow.png"); background-repeat: no-repeat; background-size: 15px 10px; background-position: 95%}
.date-picker .order-by-container .order-by::-ms-expand,
.date-picker .order-by-container #order-by::-ms-expand{display: none}
.date-picker .dates{background-color: #4c2494; position: relative; text-align: center; z-index: 0}
.date-picker .dates #date-scroller{display: inline-block; padding: 10px 0 11px; vertical-align: middle; width: 735px; z-index: 0}
.date-picker .dates #date-scroller ul.slidee{list-style-type: none; margin: 0 auto; padding: 0}
.date-picker .dates #date-scroller li{cursor: pointer; display: inline-block; font-weight: 700; font-size: 0.9em; height: 55px; line-height: 1; margin: 0 16px; position: relative; text-align: center; vertical-align: middle; width: 92px; z-index: 1}
.date-picker .dates #date-scroller li a{color: #ffffff; display: inline-block; height: 100%; text-decoration: none; width: 100%; text-transform: uppercase}
.date-picker .dates #date-scroller li a:hover{color: #fff}
.date-picker .dates #date-scroller li a span.date{display: block; font-weight: 400; font-size: 2.5em; font-weight: bold; line-height: 1}
.date-picker .dates #date-scroller li.active a{background-color: #508e01; height: 76px; left: 0; padding-top: 10px; position: absolute; top: -10px; width: 92px; z-index: 2}
.date-picker .dates #next,
.date-picker .dates #prev{cursor: pointer; display: inline-block; padding: 20px; position: relative; vertical-align: middle}
.date-picker .dates #next img,
.date-picker .dates #prev img{height: 20px}
.date-picker .dates #next img:hover,
.date-picker .dates #prev img:hover{-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; filter: alpha(opacity=80); opacity: 0.8 \9; -webkit-filter: brightness(0.8); filter: brightness(0.8)}
.date-picker .dates #next.disabled,
.date-picker .dates #prev.disabled{cursor: default; opacity: 0.5}
/********************/
/**** Movie List ****/
/********************/
#movie-list{background-color: #f7f6f6; padding: 20px}
#movie-list .movie{margin: 20px 0 30px}
#movie-list .movie:after{content: ""; display: table; clear: both}
#movie-list .movie .price-mobile,
#movie-list .movie .tickets-url-mobile{color: #000000; font-weight: 400; margin-left: 5px; margin-top: 0}
#movie-list .movie .movie-details{display: inline-block; position: relative}
#movie-list .movie img{margin: 0; position: relative}
#movie-list .movie img:hover{-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; filter: alpha(opacity=80); opacity: 0.8 \9; -webkit-filter: brightness(0.8); filter: brightness(0.8)}
#movie-list .movie img.image-poster{display: inline-block; height: 235px; vertical-align: top; width: 165px}
#movie-list .movie .movie-info,
#movie-list .movie .time{display: inline-block}
#movie-list .movie .movie-info{margin-left: 15px; vertical-align: top; width: 300px}
#movie-list .movie .movie-info a{text-decoration: none}
#movie-list .movie .movie-info h2{color: #000000; font-weight: 900; font-size: 18px; margin: 0 5px; text-transform: uppercase}
#movie-list .movie .movie-info h2:hover{text-decoration: underline}
#movie-list .movie .movie-info p.release-date{color: #6a6a6a; font-weight: 400; margin: 5px}
#movie-list .movie .movie-info .director,
#movie-list .movie .movie-info .actors,
#movie-list .movie .movie-info .price,
#movie-list .movie .movie-info .description,
#movie-list .movie .movie-info .format{color: #000000; font-weight: 400; margin-left: 5px; margin-top: 0}
#movie-list .movie .movie-info .description{margin: 10px 0 10px 5px}


#movie-list .movie .movie-info .description{
 background: #f7f6f6;
  z-index: 1;
  position:relative;

}

#movie-list .movie .movie-info .description:after {
 content: "";
  position: absolute;
  top:0;
  left:0;
  width:100%;
  height: 100%;
  z-index: 2;
  background: -webkit-linear-gradient(rgba(247,246,246,0) 0%, rgba(247,246,246,1) 70%);
  background: -moz-linear-gradient(rgba(247,246,246,0) 0%, rgba(247,246,246,1) 70%);
  background: -o-linear-gradient(rgba(247,246,246,0) 0%, rgba(247,246,246,1) 70%);
  background: linear-gradient(rgba(247,246,246,0) 0%, rgba(247,246,246,1) 70%);



}


#movie-list .movie .movie-info .tickets-url{padding: 10px 0}
#movie-list .movie .movie-times{display: inline-block; float: right; vertical-align: top; width: 285px}
#movie-list .movie .movie-times .session-container{margin: 4px; background-color: #f7f6f6; display: inline-block; border: 1px solid #4c2494; overflow: hidden; position: relative; text-decoration: none; vertical-align: middle}
#movie-list .movie .movie-times .session-container .time{display: inline-block; padding: 0 15px; vertical-align: middle; line-height: 1.3; font-weight: bold}
#movie-list .movie .movie-times .session-container .time .digit{color: #4c2494; font-size: 18px; text-align: center}
#movie-list .movie .movie-times .session-container .time .formatFilm{color: #508e01; font-size: 16px; text-align: center}
/* Details Container */
.content-wrapper{background-color: #f5f5f5; width: 100%}
.content-wrapper .content{margin: 0 auto; padding: 20px 15px 15px 15px; width: 1141px}
.content-wrapper .content .movie-poster{display: inline-block; margin-left: 0px; vertical-align: top}
.content-wrapper .content .movie-poster img{margin: 0 20px 0 0; width: 400px}
.content-wrapper .content .movie-details{display: inline-block; font-weight: 400; text-align: left; vertical-align: top; width: calc(100% - 475px)}
.content-wrapper .content .movie-details h1{font-weight: 900; font-size: 36px; margin: 0; text-transform: uppercase}
.content-wrapper .content .movie-details hr{border-top: 1px solid #373737; margin: 20px 0}
.content-wrapper .content .movie-details p{line-height: 1.7; margin-top: 15px}
.content-wrapper .content .movie-details .movieAttribute{font-weight: bold}
.content-wrapper .content .movie-details .movieValue{font-weight: normal}
.content-wrapper .content .movie-details .movieDescription{text-align: justify}
.content-wrapper .content .trailer{position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden}
.content-wrapper .content .trailer iframe,
.content-wrapper .content .trailer object,
.content-wrapper .content .trailer embed{position: absolute; top: 0; left: 0; width: 100%; height: 100%}
/* aside */
aside{float: right; margin: 15px 0; width: 262px}
aside .news{background-color: #292828; font-weight: 400;

border-top-left-radius: 15px;
border-top-right-radius: 15px;

border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;


}
aside .news h2{text-align: center; background-color: #4c2494; color: #ffffff; font-weight: 900; font-size: 1.1em; padding: 15px 0; margin: 0;

border-top-left-radius: 15px;
border-top-right-radius: 15px;
  /* Скругление углов изображения */
    b1order: 5px solid #fff; /* Цвет и ширину рамки */
    b1ox-shadow: 2px 1px 5px #999999; /* Цвет и размер тени */





}
aside .news img{width: 100%; border-radius: 15px;

    b1ox-shadow: 10px 10px #fff; /* Цвет и размер тени */
b1order-color: red;

  m1argin-lef1t: 40%;
      widt1h: 500px;
    b1ox-shadow: 0px 0px 5px 2px linear-gradient(0deg, #000, #fff);
    z-i1ndex: 1;
}








aside .news ul{list-style-type: none; padding: 0 5px 30px}
aside .news ul li{border-bottom: 1px solid #2e2e2e; padding: 10px 15px; color: #ffffff}
aside .news ul li a{color: #ffffff; text-decoration: none}
aside .news ul li a:hover{color: #508e01}
aside .news ul li:last-child{border-bottom: none}
/* Footer */
footer{background-color: #212020; padding: 20px 0 20px}
footer p.copyright{color: #808080; text-align: center; font-weight: 400; font-size: 14px; margin: 0; vertical-align: bottom}
footer p.copyright a{color: inherit}
/* Message */
#message{display: none}
#message{overflow: hidden; margin: 20px; border-left-width: 5px; border-left-style: solid; padding: 10px; clear: both; background: #fff3d4; border-color: #f6b73c; color: #000}
/* Custom dialog styles */
#popup_title{font-size: 14px; font-weight: bold; text-align: center; line-height: 1.75em; color: #FFFFFF; background: #4d1480; border: solid 1px #4d1480; border-bottom: solid 1px #4d1480; cursor: default; padding: 0em; margin: 0em}
#popup_container{font-size: 14px; min-width: 300px; max-width: 600px; background: #FFFFFF; border: solid 5px #4d1480; color: #000000; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px}
#popup_content{padding: 1em 1.75em; margin: 0em}
#popup_message{margin: 0px auto}
#popup_panel{text-align: center; margin: 1em 0em 0em 1em}
#popup_prompt{margin: .5em 0em}
#popup_container INPUT[type='button']{width: 100px; height: 30px; border: outset 2px #82bd03; color: #FFFFFF; background: #82bd03}
/* Other */
hr{height: 0; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; margin-top: 20px; margin-bottom: 20px; border: 0; border-top: 1px solid #eee}
button, input, select, textarea{font-family: inherit; font-size: inherit; line-height: inherit}
a,
a:active,
a:visited,
a:focus{color: #508e01; background-color: transparent; color: #337ab7; text-decoration: none; outline: 0}
a:hover,
a:active:hover,
a:visited:hover,
a:focus:hover{color:#23527c;text-decoration:underline; outline: 0}
img{vertical-align: middle; border: 0}
img{border-style: none; vertical-align: top; max-width: 100%; height: auto}
h1,h2,h3,h4,h5,h6{font-family: inherit; font-weight: 500; line-height: 1.1; color: inherit}
h1,h2,h3{margin-top: 20px; margin-bottom: 10px}
p{margin: 0 0 10px}
ul{margin-top: 0; margin-bottom: 10px}
table{background-color: transparent; border-spacing: 0; border-collapse: collapse}
caption{padding-top: 8px; padding-bottom: 8px; color: #777; text-align: left}
th{text-align: left}
table col[class*=col-]{position: static; display: table-column; float: none}
table td[class*=col-],
table th[class*=col-]{position: static; display: table-cell; float: none}
td, th{padding: 0}
.hidden{display: none!important}
[hidden],template{display: none}
.mobile-show{display: none}
/* Media */
@media screen and (max-width: 1155px) {
    body{margin: 0}
    /* Header */
    header .header-wrapper{width: 100%}
    header .header-wrapper .logo{margin-left: 25px}
    /* Menu */
    header .header-wrapper .menu{margin-right: 25px}
    header .header-wrapper .menu nav li a{font-size: 18px}
    /* Previews */
    .previews .carousel-control.right{right: 1%}
    .previews .carousel-control.left{left: 1%}
    .previews .preview img{height: 37vw; width: 100%}
    .previews .preview .carousel-image{height: 0; padding-top: 37vw; width: 100%}
    .previews .preview .info .caption-container{width: 95%}
    /* section */
    section{width: 100%}
    section .main-content{float: none; margin: 10px auto 0; width: 95%}
    section .main-content .date-picker p{font-size: 0.9em}
    section .main-content .date-picker .dates #date-scroller{width: 85%}
    section .main-content .date-picker .dates #date-scroller li{height: 48px; margin: 0 10px}
    section .main-content .date-picker .dates #date-scroller li.active a{height: 69px; top: -10px}
    section .main-content .date-picker .dates #date-scroller li a{font-size: 0.9em}
    section .main-content .date-picker .dates #date-scroller li span.date{font-size: 2em}
    section .main-content .date-picker .dates #next,
    section .main-content .date-picker .dates #prev{padding: 15px}
    /* movie list */
    #movie-list .movie img{height: 229px; width: 161px}
    #movie-list .movie .movie-info{width: 245px}
    #movie-list .movie .movie-info h2{font-size: 1.5em}
    #movie-list .movie .movie-info .director,
    #movie-list .movie .movie-info .actors,
    #movie-list .movie .movie-info .price
    #movie-list .movie .movie-info .format{font-size: 0.9em}
    #movie-list .movie .movie-times{width: 360px}
    #movie-list .movie .movie-times a,
    #movie-list .movie .movie-times a{font-size: 1.4em}
    #movie-list .movie .movie-times a:after{line-height: 43px}
    #movie-list .movie .movie-info .tickets-url{padding: 10px 0}
    #movie-list .movie .movie-info .tickets-url img{width: 100px; height: auto}
    /* aside */
    aside{float: none; margin: 15px 0; width: 100%; padding: 10px}
    /* footer */
    footer nav ul li a{font-size: 0.7em}
    footer section{width: 95%}
}
@media screen and (max-width: 940px) {
    #movie-list .movie .movie-times{width: 255px}
    /* details container */
    .content-wrapper{width: 100%}
    .content-wrapper .content{margin: 0 auto; padding: 15px; width: 100%}
    .content-wrapper .content img{width: 100%; height: auto}
    .content-wrapper .content .movie-poster{width: 100%} 
    .content-wrapper .content .movie-poster img{width: 100%; margin: 0px; padding: 10px}
    .content-wrapper .content .movie-details{width: 100%; padding: 10px}
}
@media screen and (max-width: 800px) {
    /* Header */
    header .header-wrapper{padding: 20px 0 0 0; text-align: center}
    /* Logo */
    header .header-wrapper .logo{display: inline-block; margin: 0; padding: 0; text-align: center}
    header .header-wrapper .logo img{max-width: 70%}
    /* Menu */
    header .header-wrapper .menu{text-align: center; width: 100%; margin: 0; padding: 0}
    /* Main Info */
    .main-info h1{font-size: 24px; text-align: center; padding: 0; margin: 0 0 10px 0}
    /* Previews */
    .previews .preview img{object-fit: cover; height: 300px}
    .previews .preview .info{padding: 8px 0; text-align: left}
    .previews .preview .info .carousel-control img{width: 15px}
    .previews .preview .info div{margin: 0; width: 100%}
    .previews .preview .info a{font-size: 0.9em; margin-top: 5px; padding: 8px 25px}
    .previews .preview .info .caption-container .caption-details{width: 70%}
    .previews .preview .info .caption-container .caption-details h2{font-size: 25px}
    .previews .preview .info .caption-container .caption-link{width: 30%}
    /* section */
    section .main-content{margin: 10px 0 0; width: 100%}
    section .main-content .date-picker .order-by,
    section .main-content .date-picker #order-by{padding: 10px}
    section .main-content .date-picker .order-by-container .order-by,
    section .main-content .date-picker .order-by-container #order-by{padding-right: 45px}
    section .main-content .date-picker .dates #date-scroller{width: 80%}
    section .main-content .date-picker .dates #date-scroller li{margin: 0 10px; width: 84px}
    section .main-content .date-picker .dates #date-scroller li.active a{width: 84px}
    section .main-content .date-picker .dates #date-scroller li.active a span.date{margin-bottom: 1px}
    /* movie-list */
    #movie-list .movie .movie-details{width: 60%}
    #movie-list .movie img{height: auto; width: 40%}
    #movie-list .movie .movie-info{width: 50%}
    #movie-list .movie .movie-times{width: 40%}
    /* footer */
    footer nav ul{padding: 0; text-align: center}
    footer nav ul li{padding: 0 2%}
    footer nav ul li:first-child{padding-left: 2%}
}
@media screen and (max-width: 640px) {
    /* section */
    section{width: 100%}
    section .main-content{margin: 0; width: 100%}
    section .main-content .date-picker p{font-size: 0.9em; text-align: center; width: 100%}
    section .main-content .date-picker p.mobile-hide{display: none}
    section .main-content .date-picker .order-by-container{padding: 10px 0; text-align: center; width: 100%}
    section .main-content .date-picker .order-by-container .order-by,
    section .main-content .date-picker .order-by-container #order-by{padding: 10px 20px; padding-right: 35px}
    section .main-content .date-picker .dates #next,
    section .main-content .date-picker .dates #prev{padding: 10px}
    section .main-content .date-picker .dates #date-scroller{width: 75%}
    section .main-content .date-picker .dates #date-scroller li{font-size: 1em; height: 50px; margin: 0; width: 94px}
    section .main-content .date-picker .dates #date-scroller li span.date{font-size: 2em}
    section .main-content .date-picker .dates #date-scroller li.active a{height: 71px; left: 0; top: -10px; width: 94px}
    /* movie list */
    #movie-list{padding: 0}
    #movie-list .movie{margin: 0 0 25px; width: 100%}
    #movie-list .movie img.mobile-hide{display: none}
    #movie-list .movie .image-frame{height: 37vw; width: 100%}
    #movie-list .movie img.image-frame{object-fit: cover}
    #movie-list .movie .image-frame{background-position: 50% 50%; background-size: cover}
    #movie-list .movie .movie-details{width: 100%}
    #movie-list .movie .movie-info{background: rgba(0, 0, 0, 0.8); margin: 0; padding: 10px 0; width: 100%; position: absolute; bottom: 0}
    #movie-list .movie .movie-info h2{color: #ffffff; margin: 0; margin-left: 20px}
    #movie-list .movie .movie-times{display: block; margin: 0 auto 10px; padding: 10px 17px; width: 100%}
    /* footer */
    footer nav ul{margin-bottom: 30px; padding: 0}
    footer nav ul li{display: block; margin: 10px 0; text-align: center}
    footer nav ul li a{font-size: 0.7em}
    /* Other */
    .mobile-hide{display: none}
    .mobile-show{display: block}
}
@media screen and (max-width: 500px) {
    #movie-list .movie img.image-frame{height: 185px}
    .previews{display: none}
}
@media screen and (max-width: 400px) {
    section .main-content .date-picker .dates #next,
    section .main-content .date-picker .dates #prev{padding: 6px}
    section .main-content .date-picker .dates #date-scroller li{font-size: 0.9em}
    section .main-content .date-picker .dates #date-scroller li span.date{font-size: 1.9em}
}
@media screen and (max-width: 380px) {
    #movie-list .movie .movie-times{padding: 10px 17px}
}
@media screen and (max-width: 320px) {
    section .main-content .date-picker .dates #next,
    section .main-content .date-picker .dates #prev{padding: 5px}
    section .main-content .date-picker .dates #date-scroller li{height: 40px; margin: 0 12px; width: 50px; font-size: 0.8em}
    section .main-content .date-picker .dates #date-scroller li.active a{height: 60px; top: -10px; width: 50px}
    section .main-content .date-picker .dates #date-scroller li span.date{font-size: 1.8em}
}

/* Product list */
#product-list{display: block; padding: 0; margin: 0 -0.625em}
#product-list:before,
#product-list:after{content: " "; display: table}
#product-list:after{clear: both}
#product-list > li{width: 25%; display: inline; height: auto; float: left; padding: 0 0.625em 1.25em}
/* Product small */
.product-small,
.product-small:before,
.product-small:after{-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box}
.product-small{position: relative; display: block}
.product-small h5{margin-bottom: 0px; text-transform: uppercase; font-size: 70%; color: #999; font-weight: bolder}
.product-small p{margin-bottom: 5px; line-height: 120%; margin-top: 5px}
.product-small .image{position: relative; display: block; overflow: hidden}
.product-small .image .view{display: block; width: auto; height: auto}
.product-small .image .view img{max-width: 101%; width: 100%; height: auto; display: block; box-shadow: 0 0 0 #999; margin: 0 auto; margin: 0; height: 310px}
.product-small .image:hover .info{bottom: 0; opacity: 0.9}
.product-small .image .info{font-weight: bold; font-size: 78%; opacity: 0; position: absolute; bottom: -30px; left: 0; right: 0; color: #fff; background: #627f9a; text-align: center; padding: 0; -webkit-transition: all 200ms ease-out; -moz-transition: all 200ms ease-out; transition: all 200ms ease-out}
.product-small .image .info table{color: #4d4f53; width: 100%; background-color: #2d6302; border-collapse: collapse; border-spacing: 0}
.product-small .image .info table td{border: 1px solid #ddd; text-align: center; vertical-align: middle; color: #fff; font-size: 12px; font-weight: normal; padding: 3px; text-align: left; vertical-align: top; border-bottom: 1px solid #ddd}
.product-small .image .info table td a{text-decoration: none}
.product-small .name{text-decoration: none; text-align: center; font-weight: bold; margin: 0px; background-color: #442491; color: #fff; padding: 5px; height: 53px}
/* Product */
#1detail-product{display: inline-block}
#1detail-product{display: block}
#detail-product{display: block}
#detail-product:after{content: ""; display: table; clear: both}
#detail-product .image-wrapper{float: left}
#detail-product .description-wrapper{width: 50%; float: left}
#detail-product .description-wrapper .content{width: 100%}
#detail-product .description-wrapper .content h2{margin-top: 0}
#main-img{text-align: center; margin-bottom: 10px}
#main-img img{width: 100%; max-width: 350px; display: block}
.product-gallery{width: 100%; float: left; margin: 0; padding: 0}
.product-gallery ul{margin: 0; padding: 0; list-style: none}
.product-gallery ul li{width: 59px; float: left}
.product-gallery ul li div{width: 55px; height: auto; overflow: hidden}
.product-gallery ul li div img{margin: 0; padding: 0}

/* Media Queries */
@media only screen and (min-width: 768px) and (max-width: 959px){
    .product-small .name{font-size: 12px; min-height: 38px}
    #footer .columns{width: 748px}
    #detail-product .columns{width: 364px}
    #product-list .columns{width: 172px}
}
@media only screen and (max-width: 767px){
    .product-small .name{font-size: 10px; min-height: 38px}
    #detail-product .columns{width: 300px}
    #product-list > li{width: 50%; padding: 5px}
    #detail-product .image-wrapper{float: none; width: 100%}
    #detail-product .description-wrapper{width: 100%; float: none}
}
@media only screen and (min-width: 480px) and (max-width: 767px){
    #detail-product .image-wrapper{margin: 0 auto; float: none; width: 100%}
    #detail-product .image-wrapper img{margin: 0 auto; float: none}
    #detail-product .product-gallery{width: 100%; text-align: center}
    #detail-product .product-gallery ul{display: inline-block}
    #detail-product .columns{width: 420px}
    #product-list .columns{width: 420px}
}

.image-poster-link img{border-radius: 15px; box-shadow: 2px 1px 5px #999999}
.session-container{border-radius: 15px; box-shado1w: 2px 1px 5px #999999}