* {
margin:0;
padding:0;
}
html, body {
min-width:1000px;
}
body {
background:#000;
font-family:Arial, Helvetica, sans-serif;
font-size:90%;
line-height:1em;
color:#858585;
}
.columns {
display: flex;
flex-flow: row wrap;
justify-content: center;
margin: 0px 0;
}
.column {
flex: 1;
border: 0px ;
margin: 0px;
padding: 0px;
&:first-child { margin-left: 0; }
&:last-child { margin-right: 0; }
}
object {
vertical-align:top;
outline:none;
}
input, textarea, select {
font-family:Arial, Helvetica, sans-serif;
font-size:1em;
vertical-align:middle;
font-weight:normal;
}
fieldset {
border:0;
}
p {
margin:0;
padding:0;
}
img {
border:0;
vertical-align:top;
text-align:left;
}
ul, ol {
list-style:none;
}
#main {
width:1000px;
margin:0 auto;
font-size:0.875em;
}
#header {
height:171px;
margin-bottom:-8px;
}
.fleft {
float:left;
}
.fright {
float:right;
}
.col-1, .col-2, .col-3 {
float:left;
}
.clear {
clear:both;
}
.alignright {
text-align:right;
}
.aligncenter {
text-align:center;
}
.wrapper {
width:100%;
}
.extra-wrap {
overflow:hidden;
}
.container {
width:100%;
}
.tail-top {
background:url(../images/tail-top.gif) left top repeat-x #1d1d1d;
}
.tail-bottom {
background:url(../images/tail-bottom.gif) left bottom repeat-x;
}
#contacts-form {
clear:right;
width:842px;
overflow:hidden;
}
#contacts-form fieldset {
border:none;
float:left;
}
#contacts-form .field {
clear:both;
}
#contacts-form label {
float:left;
width:112px !important;
width:109px;
line-height:18px;
padding-bottom:8px;
color:#fff;
}
#contacts-form input {
width:293px;
padding:2px 0 2px 5px;
background:#000;
border:1px solid #3a3a3a;
color:#fff;
}
#contacts-form textarea {
width:674px;
height:74px;
padding:2px 28px 1px 3px;
background:#000;
border:1px solid #3a3a3a;
color:#fff;
margin-bottom:15px;
overflow:auto;
}
#contacts-form .link2 {
float:right;
}
.movies {
width:100%;
}
.movies li {
float:right;
width:300px;
margin-right:100px;
}
.movies li.last {
margin-right:0;
}
.movies li.clear {
float:none;
width:auto;
margin:0;
font-size:0;
line-height:0;
}
.movies li img {
margin-left: 50px;
width:200px;
position:relative;
}
.movies li p {
margin:5px 0 15px 0;
width:300px;
padding-right:40px;
}
.movies li p span {
color:#fff;
}
.list {
margin-top:-30px;
}
.list li {
width:100%;
overflow:hidden;
vertical-align:top;
line-height:1.714em;
padding-top:40px;
}
.list li img {
float:left;
margin:-10px 20px 0 0;
}
.list li a {
text-decoration:none;
}
.list li a:hover {
color:#d72a18;
}
.sitemap-list {
padding-bottom:25px;
}
.sitemap-list li {
padding:0 0 0 10px;
line-height:1.714em;
background:url(../images/arrow.gif) no-repeat left 8px;
}
.sitemap-list li a {
color:#d72a18;
}
.img-box1 {
width:100%;
overflow:hidden;
line-height:1.714em;
padding:10px 0 10px 0;
}
.img-box1.alt {
padding-top:0;
padding-bottom:25px;
}
.img-box1.alt img {
width:300px;
height:450px;
margin-top:0;
}
.img-box1 img {
float:left;
margin:-10px 20px 0 0;
}
.img-box2 {
width:100%;
overflow:hidden;
line-height:1.714em;
padding:10px 0 10px 0;
}
.img-box2.alt {
padding-top:0;
padding-bottom:25px;
}
.img-box2.alt img {
width:200px;
height:200px;
margin-top:0;
}
.img-box2 img {
float:left;
margin:-10px 20px 0 0;
}
p {
margin-bottom:15px;
line-height:1.714em;
}
.p1 {
margin-bottom:23px;
}
.address {
width:100%;
overflow:hidden;
line-height:1.714em;
}
.address span {
color:#fff;
}
.address .fleft {
padding-right:43px !important;
padding-right:40px;
}
.address .fleft span {
float:left;
width:80px !important;
width:77px;
}
a {
color:#e1e1e1;
outline:none;
}
a:hover {
text-decoration:none;
}
h2 {
font-size:30px;
line-height:1.2em;
color:#1d1d1d;
text-transform:uppercase;
margin-bottom:12px;
}
h2 span {
display:block;
font-size:40px;
color:#2c6d9a;
}
h3 {
font-size:30px;
background-color: rgb(25, 25, 25);
line-height:1.2em;
color:white;
margin-right:4px;
margin-left:4px;
margin-bottom:20px;
}
h3 b {
color:white;
font-weight:normal;
}
h3 span {
color:white;
}
h4 {
font-size:20px;
line-height:1.2em;
letter-spacing:-1px;
color:#2c6d9a;
margin-bottom:18px;
}
h5 {
font-size:20px;
background-color: rgb(25, 25, 25);
line-height:1.2em;
color:#2c6d9a;
margin-right:4px;
margin-left:4px;
margin-bottom:20px;
margin-top:40px;
}
h5 {
color:#2c6d9a;
font-weight:normal;
}
h6 {
font-size:30px;
background-color: rgb(25, 25, 25);
line-height:1.2em;
color:white;
margin-bottom:20px;
text-align:center;
}
h6 b {
color:white;
font-weight:normal;
}
h6 span {
color:white;
}
.link1 {
display:block;
float:left;
background:url(../images/link1-right.png) no-repeat right top;
color:#fff;
text-decoration:none;
line-height:1em;
cursor:pointer;
}
.link1:hover span {
text-decoration:none;
}
.link1 span {
display:block;
float:left;
padding:0 5px;
background:url(../images/link1-left.png) no-repeat left top;
}
.link1 span span {
display:block;
background:url(../images/link1-tail.gif) repeat-x left top;
padding:8px 15px;
}
.link2 {
display:block;
float:center;
background:url(../images/link2-right.gif) no-repeat right top;
color:#fff;
cursor:pointer;
text-decoration:none;
line-height:1em;
}
.link2:hover span {
text-decoration:none;
}
.link2 span {
display:block;
float:center;
padding:0 0px;
background:url(../images/link2-left.gif) no-repeat left top;
}
.link2 span span {
display:block;
background:url(../images/link2-tail.gif) repeat-x left top;
padding:9px 15px 10px 5px;
}
.line-hor {
overflow:hidden;
font-size:0;
line-height:0;
width:1000px;
height:8px;
margin-left:0px;
background:url(../images/line-hor.gif) repeat-x left top;
z-index:1;
position:relative;
}
.box {
background:#000;
width:100%;
margin-top:-3px;
}
.box .border-left {
background:url(../images/border-left.gif) repeat-y left top;
}
.box .border-right {
background:url(../images/border-right.gif) repeat-y right top;
}
.box .inner {
padding:28px 40px 25px 40px;
}
#header .row-1 {
height:112px;
width:100%;
overflow:hidden;
}
#header .row-1 .fleft {
font-size:60px;
line-height:1.2em;
padding:26px 0 0 0px;
}
#header .row-1 .fleft a {
text-decoration:none;
}
#header .row-1 ul {
padding:32px 0px 0 0;
float:right;
}
#header .row-1 ul li {
float:left;
padding-left:54px;
}
#header .row-2 {
height:51px;
}
#header .row-2 ul {
width:100%;
overflow:hidden;
}
#header .row-2 ul li {
float:left;
font-size:20px;
line-height:2.4em;
margin-right:5px;
background-color:#000;
}
#header .row-2 ul li.last {
margin-right:0;
}
#header .row-2 ul li a {
text-decoration:none;
color:#f0f0f0;
width:196px;
height:56px;
float:left;
background-image:url(../images/nav-bg.gif);
background-repeat:no-repeat;
background-position:0 0;
text-align:center;
}
#header .row-2 ul li a:hover, #header .row-2 ul li a.active {
color:#d72a18;
background-image:url(../images/nav-act.gif);
}
#content .content {
padding:30px 0 39px 50px;
}
.inner_copy, .inner_copy a {
border:0;
float:right;
background:#f00;
color:#f00;
width:50%;
line-height:10px;
font-size:10px;
margin:-50% 0 0 0;
overflow:hidden;
padding:0;
}
#slogan {
width:1000px;
height:322px;
position:relative;
background:url(../images/banner-bg.gif) no-repeat left top;
color:#1d1d1d;
}
#slogan .image {
position:absolute;
right:-180px;
top:13px;
z-index:100;
width:572px;
height:348px;
background:url(../images/banner-img.png) no-repeat left top;
}
#slogan p {
margin-bottom:23px;
}
#slogan .inside {
padding:36px 0 0 50px;
width:320px;
}
#page1 #content .box {
margin:0;
}
#page1 #header .row-2 ul li a {
height:59px;
}
#page1 #header .row-2 ul li.last a:hover {
position:relative;
z-index:2;
}
#footer {
background:url(../images/footer-tail.gif) repeat-x left top;
color:#1d1d1d;
font-size:.89em;
line-height:1em;
text-align:center;
}
#footer .left {
background:url(../images/footer-left.gif) no-repeat left top;
}
#footer .right {
min-height:89px;
height:auto !important;
height:80px;
background:url(../images/footer-right.gif) no-repeat right top;
text-align:center;
}
#footer .footerlink {
padding:20px 325px;
}
.footerlink p {
margin:0;
padding:0;
line-height:normal;
white-space:nowrap;
text-indent:inherit;
color:#1d1d1d;
}
.footerlink a {
color:#1d1d1d;
font-weight:normal;
margin:0;
padding:0;
border:none;
text-decoration:underline;
background-color:transparent;
}
.footerlink a:hover {
color:#1d1d1d;
background-color:transparent;
text-decoration:none;
}
.footerlink .lf {
float:left;
}
.footerlink .rf {
float:right;
}
a {
outline:none;
}
.boton4 {
color: white;
font-size: 16px;
font-weight: 590;
background: rgba(0,0,0,0);
border: 1px solid;
border-color: red;
float:right;
}
.verinfo{
font-weight: bolder;
font-size: 19px;
}
.boton4:hover {
color: black;
background: white;
}
.boton5 {
width: 150px;
color: white;
font-size: 11px;
font-weight: 590;
padding: 0.3em 0.5em;
background: rgba(0,0,0,0);
border: 1px solid;
border-color: grey;
transition: all 1s ease;
position: relative;
}
.boton5:hover {
background: black;
}
.boton6 {
color: white;
font-size: 11px;
font-weight: 590;
padding: 0.3em 1.2em;
background: black;
border: 1px solid;
border-color: grey;
transition: all 1s ease;
position: center;
}
.boton6:hover {
background: black;
}
.boton8 {
color: white;
font-size: 11px;
font-weight: 590;
padding: 0.3em 4.4em;
background: rgba(0,0,0,0);
border: 1px solid;
border-color: grey;
transition: all 1s ease;
position: relative;
}
.boton8:hover {
color: black;
background: white;
}
}
::placeholder {
color: white;
font-size: 1.3em;
font-style: italic;
text-align: center;
}
.campo1 {
width: 150px;
color: white;
font-size: 11px;
font-weight: 590;
padding: 0.3em 1.1em;
background: black;
border: 1px solid;
border-color: grey;
transition: all 1s ease;
position: relative;
}
.campo1:hover {
background: black;
}
.campo2 {
width: 150px;
color: white;
font-size: 11px;
font-weight: 590;
padding: 0.3em 1.1em;
background: rgba(0,0,0,0);
border: 1px solid;
border-color: grey;
transition: all 1s ease;
position: relative;
}
.campo2:hover {
background: black;
}
:placeholder-shown {
/* Se aplica al input
cuando el texto del placeholder
se está mostrando */
background-color: black;
color: white;
}
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
.hero-container {
margin: auto;
display: flex;
}
.main-container {
width: 270px;
height: 540px;
position: relative;
margin: 0 100px;
}
.poster-container {
width: 230px;
position: absolute;
top: 0;
left: 20px;
z-index: 9999;
}
.poster {
width: 100%;
box-shadow: 0 5px 20px 3px rgba(0, 0, 0, 0.6);
}
.ticket-container {
background: #fff;
width: 270px;
height: 520px;
display: flex;
flex-direction: column;
align-items: center;
border-radius: 5px;
position: absolute;
top: 20px;
box-shadow: 0 5px 20px 3px rgba(0, 0, 0, 0.6);
opacity: 1;
}
.main-container:hover .ticket-container {
opacity: 1;
animation: bounceIn 0.6s linear;
}
@keyframes bounceIn {
0%,
20%,
40%,
60%,
80%,
to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3);
}
20% {
-webkit-transform: scale3d(1.03, 1.03, 1.03);
transform: scale3d(1.03, 1.03, 1.03);
}
40% {
-webkit-transform: scale3d(0.9, 0.9, 0.9);
transform: scale3d(0.9, 0.9, 0.9);
}
60% {
opacity: 1;
-webkit-transform: scale3d(1.01, 1.01, 1.01);
transform: scale3d(1.01, 1.01, 1.01);
}
80% {
-webkit-transform: scale3d(0.97, 0.97, 0.97);
transform: scale3d(0.97, 0.97, 0.97);
}
to {
opacity: 1;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
}
/* @keyframes bounce {
50% {
opacity: 1;
transform: scale(1.1);
}
100% {
opacity: 1;
transform: scale(1);
}
} */
.ticket__content {
width: 100%;
position: absolute;
bottom: 0;
text-align: center;
}
.ticket__movie-title {
text-transform: uppercase;
margin-bottom: 5px;
}
.ticket__movie-slogan {
color: #999;
font-size: 0.9rem;
margin-bottom: 20px;
}
.ticket__current-price {
color: BLUE;
font-size: 1.4rem;
font-weight: bold;
}
.ticket__old-price {
color: BLACK;
font-size: 1.4rem;
text-decoration: none;
margin-bottom: 10px;
}
.ticket__buy-btn {
cursor: pointer;
width: 100%;
background: #2f2f2f;
color: white;
padding: 15px 0;
font-size: 1rem;
font-weight: bold;
text-transform: uppercase;
border: 0;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.ticket__buy-btn:hover {
cursor: pointer;
width: 100%;
background: #2f2f2f;
color: RED;
padding: 15px 0;
font-size: 1rem;
font-weight: bold;
text-transform: uppercase;
border: 0;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}