@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:400,400i,700,700i&display=swap');
@import url('https://fonts.googleapis.com/css?family=Anton&display=swap');
@import url('https://fonts.googleapis.com/css?family=Lato:900&display=swap');
@import url('reset.css');
/*-----------------------------------------------------------------*/
/*--- Custom Form Element ---*/
/*-----------------------------------------------------------------*/
input[type="text"], 
input[type="password"], 
input[type="tel"], 
input[type="email"], 
select, 
textarea { font-size: 16px; color: #565d6b;  -moz-box-shadow: none !important; -webkit-box-shadow: none !important; box-shadow: none !important; border-radius: 0; -webkit-appearance: none; border-color: #edf0f5; background: #edf0f5;}
input[type="text"]:focus, 
input[type="password"]:focus, 
input[type="tel"]:focus, 
input[type="email"]:focus, 
textarea:focus { border-color: #324260; }

input[required="required"], 
textarea[required="required"] { border-right: 10px solid #fbc02d; }

input.error:focus, input.error, 
input.error[required="required"], 
textarea.error[required="required"] { border-color: #d01716; }

input.valid:focus, input.valid, textarea.valid[required="required"] { border-color: #0a7e07; }
textarea { resize: none; overflow: auto; min-height: 140px; }
a {color:#ef9723;}
hr { margin: 2em 0; border:none; border-bottom:1px solid #817461;}
.text-center {text-align:center;}
/*-----------------------------------------------------------------*/
/*--- Custom Buttons ---*/
/*-----------------------------------------------------------------*/
.btn { display:inline-block; margin: 10px 0; vertical-align:middle; transition: 0.5s ease-in-out;  position:relative; overflow:hidden; font-size:19px; min-width:186px; text-align:center; padding:10px 15px; border:1px solid #ef9723; border-radius: 5px; text-decoration:none; font-weight:bold; text-transform:uppercase; }
.btn i,
.btn img,
.btn svg { margin-right:15px; display:inline-block;  font-size:0.9em;}
.btn:hover svg g { fill: #000 !important;}

.btn,
.btn:visited,
.btn:focus { color:#ef9723; }
.btn:hover {color:#000;}

.btn:after {
  transition: 0.5s ease-in-out;
  content: '';
  position:absolute;
  top: 0;
  right: -50px;
  bottom: 0;
  left: 0;
  border-right: 50px solid transparent;
  border-bottom: 60px solid #ef9723;
  transform: translateX(-100%);
  font-size:0;
  z-index:-1;
}
.btn:after { color:#000;}
.btn:hover:after {
    transform: translateX(0);
}
.btn:before { content:''; display:block; position:absolute; top:0; left:0; width:100%; height:100%;  z-index:-1; background:#000;}

.btn-warning,
.btn-warning:visited,
.btn-warning:focus {color:#000;}
.btn-warning:hover {color:#ef9723;}
.btn-warning:before { background:#ef9723;}
.btn-warning:after { border-bottom-color:#000;}

.btn.buy { margin-right:10px;}
.btn.play { padding-right:20px;}
/*-----------------------------------------------------------------*/
/*--- Canvas Styles ---*/
/*-----------------------------------------------------------------*/

body { font-family: 'Roboto Condensed', sans-serif;  line-height: 1.4; background:#000 url(../images/backgrounds/bg.jpg) 0 0 no-repeat; background-size:cover; background-attachment: fixed; color: #d9ccba; font-size:17px; font-weight:400;}
#wrapper { overflow: hidden; min-width: 320px; }

/*-----------------------------------------------------------------*/
/*--- Global Styles ---*/
/*-----------------------------------------------------------------*/
h1, h2, h3, h4, h5, h6 { font-weight: 600;}
h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child {  margin-top: 0 !important;}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: inherit}

h1 { font-size:  1.882em; color:#da9633; line-height:1; font-family: 'Anton', sans-serif; margin-bottom:0.2em; line-height:1.25; font-weight:400;
text-shadow: 
1px 1px rgba(218,150,51, 0.23), 
2px 2px rgba(218,150,51, 0.18), 
3px 3px rgba(218,150,51, 0.14), 
4px 4px rgba(218,150,51, 0.12), 
5px 5px rgba(218,150,51, 0.10), 
6px 6px rgba(218,150,51, 0.08), 
7px 7px rgba(218,150,51, 0.07), 
8px 8px rgba(218,150,51, 0.06), 
9px 9px rgba(218,150,51, 0.05), 
10px 10px rgba(218,150,51, 0.04), 
11px 11px rgba(218,150,51, 0.03), 
12px 12px rgba(218,150,51, 0.02), 
13px 13px rgba(218,150,51, 0.01), 
14px 14px rgba(218,150,51, 0.00)

}
h2 { font-size: 1.14705em; color:#ef9723; margin-bottom:0;}
h3 { font-size: 1.2em; color:#ef9723;}


h1 span { display:block; font-size:1.5em; }

h1 + p { margin-top:0.2em;}
h2 + p { margin-top:0;}
.text-uppercase {text-transform:uppercase;}

.list-unstyled { margin-bottom: 0;}
.inline-block{ display: inline-block; float: none; margin-left: -4px;}

ul.list-unstyled { list-style:none; padding-left:0;}
li { padding-left:25px; position:relative;}
li + li { margin-top:10px;}


ul li i:first-child { font-size:0.7em;  position:absolute; left:0; top:0.5em; opacity:0.8;}

body { min-height: 100vh; width:100%; display: flex; align-items: center;}
.container { width: 100%; max-width: 1440px; padding-right:15px; padding-left:15px; margin: 0 auto;}

.section { display: flex;  justify-content: space-between; padding-top:1.5em; padding-bottom:1.5em;}

.poster {  padding-right:30px; width:50%;}
.poster figure{ position:sticky; top:1.5em; margin:0;}
.poster img { margin: 0 auto; display:block;}
.content { padding-left:30px; width:50%;}

.data {
  margin:0;
  display: grid;
  grid-gap: 0;
  grid-template-columns: 33.3333% 33.3333% 33.3333%;
  grid-auto-columns: 33.3333%;
}
.data dt { font-size:13px; color:#817461; padding-right:15px;}
.data dd { margin:0 0 15px 0;  font-size:15px; padding-right:15px;}
.data dd small { opacity:0.8;}

.data dt h2 { margin-bottom:0; font-size:1.5em;}
.data dt:nth-of-type(1) { grid-row: 1; grid-column:1/4}
.data dd:nth-of-type(1) { grid-row:2;  grid-column:1/4}

.data dt:nth-of-type(2),
.data dt:nth-of-type(3),
.data dt:nth-of-type(4) {grid-row:3;}

.data dd:nth-of-type(2),
.data dd:nth-of-type(3),
.data dd:nth-of-type(4) {grid-row:4;} 

.data dt:nth-of-type(5),
.data dt:nth-of-type(6),
.data dt:nth-of-type(7) {grid-row:5;}

.data dd:nth-of-type(5),
.data dd:nth-of-type(6),
.data dd:nth-of-type(7) {grid-row:6;} 


.data .data { padding-left:25px; color:#000;}
.data .data dt { color:#d9ccba; font-size:1em;}
.data .data dd { opacity:0.8; color:#d9ccba; font-size:0.8em;}


.fancybox-caption__body { font-size: 1.882em; text-transform:uppercase; color:#ef9723; font-weight:bold;}

.fancybox-button, 
.fancybox-button:link, 
.fancybox-button:visited {color:#ef9723;}


.fancybox-button svg path { fill:#ef9723 !important}
.fancybox-caption { top:0; bottom:auto !important; background:none !important;}
.fancybox-slide { padding-bottom:44px !important; padding-top:90px !important;}

/*-----------------------------------------------------------------*/
/*--- Footer Styles ---*/
/*-----------------------------------------------------------------*/
footer { font-size:13px; padding-top:2em;}



/*-----------------------------------------------------------------*/
/*--- Mobile Style ---*/
/*-----------------------------------------------------------------*/
@media only screen and (max-width: 1024px) {
  .poster {  padding-right: 15px;}
  .content { padding-left: 15px;}
  .fancybox-slide { padding-left:15px !important; padding-right:15px !important;}
}
@media only screen and (max-width: 767px) {
	body { font-size: 14px; }
}
@media only screen and (max-width: 560px) {
  .data {
    grid-template-columns: 50% 50% 50%;
    grid-auto-columns: 50%;
  } 
  .data dt:nth-of-type(1),
  .data dd:nth-of-type(1) {grid-column: 1/3}
  
  .data dt:nth-of-type(4),
  .data dt:nth-of-type(5) {grid-row:5;}

  .data dd:nth-of-type(4),
  .data dd:nth-of-type(5) {grid-row:6;}

  .data dt:nth-of-type(6),
  .data dt:nth-of-type(7) {grid-row:7;}

  .data dd:nth-of-type(6),
  .data dd:nth-of-type(7) {grid-row:8;}
}
@media only screen and (max-width: 480px) {
  .btn-holder .btn {
    display:block;
    width:100%;
    margin-right: 0;
  }
}
@media only screen and (orientation:portrait) and (max-width: 767px) {
  .section  { display:block; }
  .poster { width:100%; padding:0; padding-bottom:2em;}
  .poster img { max-height:80vh;}
  .content {width:100%; padding:0;}
}
@media only screen and (orientation:landscape) and (max-width: 767px) {
  .section  { align-items: flex-start}
  .poster { width:30%;}
  .content {width:70%;}
}

blockquote { position:relative; margin-left:0; padding-left:30px; font-size:1.2em; margin-top:0;}
blockquote i { opacity:0.3; position:absolute; top:0.2em; left:0;}
blockquote q:before,
blockquote q:after { display:none;}