/* Website Styles by Tom Kruk */

/* CSS RESET */
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {	margin: 0;padding: 0;	border: 0;	font-size: 100%;	font: inherit;	vertical-align: baseline;}  article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;} body {line-height: 1;} ol, ul {list-style: none;} blockquote, q {quotes: none;} blockquote:before, blockquote:after,q:before, q:after {content: '';	content: none;}table {border-collapse: collapse;border-spacing: 0;}

/* General Styles */
.modal {display:none}

a.back {position:absolute;top:-26px;cursor:pointer}
a.back:hover {border:none}
a.back img {width:20px}
a.back span {position:relative;top:-4px;left: 3px;}
.home a.back {display:none}

a.menu {position:absolute;top:-26px;right:-10px;cursor:pointer;}
a.menu:hover {border:none}
a.menu img {width:20px}
a.menu span {position:relative;top:-4px;left: -68px;;}

.content-body ul.menu {margin-left: 0 !important;text-indent: 0;}

nav .menu {box-sizing:border-box;margin: 10px 0 0 0;}
nav .menu li, .menu.artwork li {display:inline-block;}
nav .menu li:first-child a, .menu.artwork li:first-child a {margin-left:0}
nav .menu a, .menu.artwork a {display: inline-block;margin-left:15px;font-size: 1.2em;padding: 5px 0;border-bottom: 1px solid transparent;}

nav .menu.active {top:0;opacity:1}

em {color:#666;font-style: italic;}

body {display:block;font-family: 'Lora', serif;background-color: #fffbe1;}

.mobile-only {display: none !important;}
.mobile-menu {display: none}

.sidepanel {width: 40%;height:100vh;position: fixed;top: 0;}
body.home  .sidepanel {background: url('../img/rs-3300-d.jpg') no-repeat center/cover;}
body.films .sidepanel {background: url('../img/rs-3309.jpg') no-repeat center/cover}
body.acting .sidepanel {background: url('../img/rs-3309.jpg') no-repeat center/cover}
body.artwork .sidepanel {background: url('../img/rs-art.jpg') no-repeat center/cover}
body.books .sidepanel {background: url('../img/rs-books.jpg') no-repeat center/cover}
body.blog .sidepanel {background: url('../img/rs-3379.jpg') no-repeat center/cover; background-position-y:0px}

section {box-sizing:border-box;margin: 0px 0 22px 0;}
.content {box-sizing: border-box;position: relative;width: 60%;margin-left: 40%;}
.content-body {position:relative;font-size: 18px;padding: 20px;font-family: 'Playfair Display', serif;display:block;color:#444}
.content-body ul {list-style-type: disc;margin: 10px 0 0 30px;}
.content-body ul li {line-height: 1.4em;margin:10px 0}
a {color: #bb6d17;text-decoration:none;font-family: 'Playfair Display', serif;font-size: 1.1em;}
a:hover {color: #ff6404;}
a.btn {color: #7b5730;padding: 5px 10px;margin: 30px 0 11px;background-color: white;border: 2px solid #c79d6e;cursor: pointer;}
a.btn:hover {border:none;background-color: #ff6404;color: white;border: 2px solid wheat;}
p.buttons {margin:20px 0;text-align:right}
strong {color:#000;font-weight:bold}

p, .home-lead p {margin: 7px 0;line-height: 1.25em;}
h1 {border-bottom:2px solid #E0821C;font-size: 4em;}
h2 {font-weight: normal;font-family: 'Playfair Display', serif;color: #8a7e3e;font-size: 2em;margin-bottom: 0px;}
h3 {font-size: 1.4em;}

.intro {margin-top: 0;padding: 20px 20px 0 20px;}
.intro a:hover {text-decoration:none}

ul.home {margin: 0 0;}
ul.home li {margin: 18px 0;}

.home-lead {margin: 0px 0 20px 0;}
.home-lead a {font-weight:normal;}
.home-lead p {margin: 7px 0;line-height: 1.4em;font-size: 1.2em !important;font-family: 'Playfair Display', serif !important;}
.home p {font-size: 1em;}

ul.products div.poster{float:left;}
ul.products {margin-top:30px;margin-left:0}
ul.products h3 {margin-top: 0px;color: #426944;}
ul.products li {display: block;margin-bottom:20px;}
ul.products li {border-bottom: 1px solid #da944a;display:block;}
ul.products img {width:200px;margin-right:15px;border:1px solid black;cursor: pointer;}
ul.products .desc {flex:3;}
ul.products p {font-size: 1em;line-height: 1.4em;}
ul.products .laurels {clear:left}
ul.products .laurels img {width:100%;max-width:1000px;background-color: #c89c6d;}
ul.books.products li {min-height: 500px;}

ul.books img {width:300px;margin-bottom:10px}

ul.press-links {margin:0;margin-bottom:20px}
ul.press-links li {border:none;margin-bottom: 0;line-height: 0.95em;list-style-type:  disc;margin-left: 0px;padding-left: 0px;font-size:0.9em;}
ul.press-links a {font-size:1em}

div.buyvideo {text-align:center;margin-top: 33px;font-size: 20px;}
div.buyvideo a.buyvideobutton {color: #cdf7ce;background-color: #0b4c0b;line-height: 25px;display: inline-block;padding: 5px 20px;border: 1px solid;}
div.buyvideo a.buyvideobutton:hover {background:#1da71d;border:1px solid white}

.blog-index {list-style-type:square;padding: 30px;padding-top: 0;}
.blog-index a:hover {text-decoration:none;border:none}
.blog-index li {margin:27px 0;margin-left:15px}
.blog-index .date {color:#777;margin:8px 0;}
.blog-index h3.featured1 a {color:#bc3e18}
.blog-index .synopsis {margin:8px 0;margin-left:0px;font-family: 'Playfair Display', serif;font-size: 18px;line-height: 24px;}

.blog-date {margin: 10px 0;color: #a04500d1;font-size: 0.8em;font-family: sans-serif;}

.blog-content-inner {margin-top:30px}
.blog-content-inner h3 {border:none}
.blog-content-inner .date {color:#00000078}

body.blog.subpage .blog-content img {max-width: 100%;height: auto;}
body.blog.subpage .blog-content p {margin:15px 0; line-height:25px}

.art-container.masonry {display: flex;flex-flow: row wrap;width: 100%;}
.art-container .masonry-brick {cursor: pointer;flex: auto;height: 250px;width: 25%;background-size: cover;background-position: center;border:4px solid #fffbe1;}
.art-container .masonry-brick:hover {border:4px solid orange}
.art-container .masonry-brick.vert {width: 12%;}
.art-category-item a.active, .menu a.active {color:red}

.btt {position: absolute; background-color: #c17629;bottom: 0;  right: 0;  color: white;  padding: 10px;  cursor: pointer;}
.btt:hover { background-color: #d06a05}


.btn.watch.active {display:inline}

/* Modal */
@media screen {
  .bodyNoScroll {overflow: hidden;}

  .modal {display: none;align-items: center;justify-content: center;position: fixed;top:0;left:0;width: 100%;height: 100%;overflow: auto;background-color: rgb(0,0,0);background-color: rgba(0, 0, 0, 0.8);z-index: 99999;overflow: hidden;}
  .modal-body {background-color: #000;padding: 10px 10px 35px 10px;width: 650px;position: relative;border: 1px solid rgba(255, 255, 255, 0.64);color: #d6d0d0;}
  .modal-close {color: #bd3737;position: absolute;top: -5px;right: 10px;font-size: 40px;font-weight: bold;}
  .modal-close:hover, .modal-close:focus {color: #ff7070;text-decoration: none;cursor: pointer;}
  .modal h3 {margin-top:0;padding-top:0;margin-bottom:4px;color:#f5deb3}
  .modal p{margin-top:0;padding-top:0;margin-bottom:4px}
  .modal h2 {padding-top: 0;color: #aaa;font-size: 1.5em;padding-bottom: 10px;}

  .modal.light .modal-body{background-color:#fffbe1}

  #payModal .modal-body {background-color:#fffbe1;color:#000}
  #payModal h2 {font-weight: normal;font-family: 'Playfair Display', serif;color: #8a7e3e;font-size: 2em;margin-bottom: 0px;}
  #payModal .buyfilm {color:white}
  #payModal p {margin:10px 0;padding:0}
  #payModal .form-row input[type="email"], #card-element {background: #fff;padding: 10px;width: 100%;margin-bottom: 10px;font-size: 15px;color: #000;box-sizing:border-box;border:1px solid #aaa}
  #payModal .btn-purchase {color: #7b5730;padding: 5px 10px;margin: 9px 0 11px;background-color: white;border: 2px solid #c79d6e;cursor: pointer;font-size: 1.2em;}
  #payModal .btn-purchase:hover {border:none;background-color: #ff6404;color: white;border: 2px solid wheat;}
  #payModal .form-radio {box-sizing:border-box;padding:15px 0}
  #payModal .form-col {display: inline-block;box-sizing: border-box;margin-right: 25px;}
  #payModal .form-col span.text {position:relative;top:2px;left:2px}
  #payModal ::placeholder {color: #aab7c5; opacity: 1;}
  #payModal :-ms-input-placeholder {color: #aab7c5;}
  #payModal ::-ms-input-placeholder {color: #aab7c5;}

  .carousel-cell img {display: block;margin: 0 auto;max-height: 70vh;}
}

/* Tablet Breakpoint [768x1024] : Width 768px width and under */
@media only screen and (max-width: 800px) {
   .sidepanel {background-position-x: -650px;}
}

/* Mobile Breakpoint [320x1024] : Width 320px and under */
@media only screen and (max-width: 550px) {
  body {display:block}
  .mobile-only {display:block}

  .intro {padding:10px;position: fixed;width: 100%;background: #fffbe1;z-index: 2;box-sizing: border-box;padding-right: 10px;}
  .home .intro {top: 0;}
  .content-body {padding:0px 15px;margin-top:-5px;top: 67px;}

  ul.products div.poster {display:block;float:none;}
  ul.products .desc {display:block;float:none;margin-top: 0px;}

  ul.press-links {margin:10px;}
  ul.press-links li a {margin:0;padding:0;line-height: 21px;}

  a.menu {position:absolute;top: 2px;right: 5px;cursor:pointer;display: block;}
  a.menu:hover {border:none}
  a.menu img {width: 25px;position: relative;top: 1px;}
  a.menu span {position: absolute;top: 0px;right: 0px;font-size: 1em;left: auto;display: none;}

  a.btn {display:block;text-align:center;margin:0;padding:10px;}
  a.btn.watch {}
  a.btn.watch.active {display:block}

  nav .menu {position:absolute;width:100%;left:0;top:0px;text-align:center;border:1px solid #aaa;padding:0px;background:white;box-shadow: 0px 0px 11px 1px #aaa;opacity: 1;overflow: hidden;top: -470px;transition-property: opacity;transition-delay: 0.5s;}
  nav .menu a {padding:15px;border-bottom:none;display:block;background:white;}
  nav .menu a:hover {border:none;background:#ff6404;color:white}
  nav .menu li.close {position:absolute;top: -8px;right: -8px;display: block;}
  nav .menu li.close img {width:16px}
  nav .menu.active {top:0;opacity:1}

  .menu.artwork {margin: 20px 0 10px 0px}
  .menu.artwork li {margin:0}
  .menu.artwork a {font-size:1em;padding:0;margin:5px;line-height:3px}


  .subpage .sidepanel {display:none}
  .home .sidepanel {height: 300px;width: 100%;position: relative;top:60px}


  .content {padding: 0px;top:0;width: 100%;margin-left: 0;}
  ul.home {margin: 0 0;}
  ul.home li {margin: 30px 0;}
  h1 {font-size: 38px;}
  h2 {font-size:25px}

  ul.films {margin-top: 15px;display: block;}
  ul.films h3 {border:none;clear: both;margin-top: 10px;margin: 0px;}
  ul.films li {border-bottom:2px solid #00000021;display:block;margin-bottom: 0px;padding-bottom: 0px;border-bottom: navajowhite;}
  ul.films img {margin-right:15px;border:1px solid black;width: 100%;float: none;}
  ul.films p {font-family: 'Roboto', sans-serif;font-size:0.9em;line-height:1.3em;margin-top: 10px;}
  ul.films p.buttons {text-align:center;margin-top:30px;margin-bottom: 27px;border-bottom: 1px solid #c89c6d;padding-bottom: 27px;}
  ul.films a.btn {padding: 10px 30px;}

  
  .blog-index {position:relative;top:60px}
  .last-post.blog-index h3 {font-size: 1.2em;}
  .last-post.blog-index {font-size: 0.8em;margin:10px 0;background-color: #eeeeee94;padding:10px;}

  .mobile-menu {display:block;top:0;left:0;width:100%;position: fixed;z-index: 3;}
  .mobile-menu img {width:20px;position:absolute;right: 13px;top: 8px;}
  .mobile-menu ul {position:fixed;top:0;left:0;background:#fff6bb;width:100%;height:300px;padding:0px;font-size:1.2em;left: 110vw;transition: left 0.4s;box-shadow: 2px 7px 20px 0px #aaaaaa8a;}
  .mobile-menu li {margin:8px 0px }
  .mobile-menu li a {padding:5px;margin:5px 30px;border-bottom:1px dotted #aaa;display:block}
  .mobile-menu ul.active {left:0vw}
  .hamburger-label {position: absolute;top: 26px;right: 12px;font-size: 1em;font-weight: bold;font-family: arial;color: #e0821c;}

  .mobile-menu h3 {padding: 10px 20px 10px 32px;font-size:1.1em;background-color:#f3e58a;font-weight:bold}



}