/*
 *   Reset
 */

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,select,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
strong{font-weight:700;}
ol,ul{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}abbr,acronym{border:0;}

button::-moz-focus-inner {border:0; padding:0;}

/*
 *   Styles
 */

* {box-sizing:border-box;}

body,
textarea,
select,
button,
input[type="password"],
input[type="text"] {font-family:'Fira Sans', sans-serif; font-size:14px; line-height:1.6em;}

html {height:100%;}
body {display:flex; flex-direction:column; height:100%; background:rgba( 0,0,0, .15 );}

a:link,
a:visited {color:#000;}
a:hover {text-decoration:none;}

p {display:block; margin:0 0 1em 0; text-align:justify;}
p:last-child {margin-bottom:0;}

ul {display:block; margin:0 0 1em 0;}
ul:last-child {margin-bottom:0;}

em {font-style:italic;}

h1 {font-family:'Fira Sans', sans-serif;color:#000; font-weight:bold; font-size:20px; margin:0;}
h2 {font-weight:normal; font-size:25px; text-align:center; margin:0 0 30px 0;}
h3 {font-weight:bold; font-size:18px; margin:0 0 15px 0;}

hr {width:100%; margin:20px 0; border:0; border-bottom:1px solid rgba( 0,0,0, .1 );}

ul {list-style:disc; padding-left:20px;}
ul li {padding-left:10px;}

textarea,
select,
button,
input[type="password"],
input[type="text"] {padding:3px 8px; background:#fff; border:1px solid rgba( 0,0,0, .1 ); border-radius:3px;}

input::placeholder {color:rgba( 0,0,0, .25 );}

button {padding:6px 12px; background:rgba( 0,0,0, .5 ); color:#fff; line-height:1em; cursor:pointer;}
button:hover {background:rgba( 0,0,0, .75 );}

select {padding:5px 8px; font-size:14px; line-height:1em;}

.text-left {text-align:left;}
.text-center {text-align:center;}
.text-right {text-align:right;}

header {display:flex; justify-content:center; align-items:center; padding:20px; background:#fff; border-bottom:1px solid rgba( 0,0,0, .2 );}
header h2 {margin:0 0 0 20px; font-size:20px; color:rgba( 0,0,0, .75 ); font-style:italic;}
header .spacer {flex:1;}
header .logo img {height:50px;}

header nav {display:flex; align-items:center;}
header nav > a {display:flex; align-items:center; text-decoration:none;}
header nav .fa-bars {color:rgba( 0,0,0, .4 ); font-size:18px;}
header nav .menu-bg {position:fixed; z-index:1; top:0; left:0; bottom:0; right:0; pointer-events:none; transition:opacity .2s; opacity:0; background:rgba( 0,0,0, .2 );}
header nav .menu-bg.show {pointer-events:auto; opacity:1;}
header nav .menu {position:fixed; z-index:2; top:0; left:0; bottom:0; transform:translateX(-100%); transition:transform .2s; display:flex; flex-direction:column; max-width:300px; width:90%; background:#fff; box-shadow:0px 0px 15px 0px rgba( 0,0,0, .1 );}
header nav .menu.show {transform:translateX(0);}
header nav .menu a {padding:10px 20px; border-bottom:1px solid rgba( 0,0,0, .05 ); text-decoration:none;}
header nav .menu a:hover {background:rgba( 0,0,0, .1 );}

header .social {flex:1; display:flex;}
header .social a {display:flex; justify-content:center; align-items:center; width:30px; height:30px; margin:0 0 0 10px; padding:2px; border:2px solid #7b6f65; border-radius:50%; text-decoration:none; color:#7b6f65; font-size:16px; transition:all .1s;}
header .social a:first-child {margin-left:0;}
header .social a:hover {opacity:.8; /* background:#7b6f65; color:#fff; */}
header .social a .fa-instagram {font-size:18px;}

header .account {flex:1; display:flex; justify-content:flex-end;}
header .account a {display:flex; margin:0 0 0 10px; text-decoration:none; color:#7b6f65; font-size:18px;}
header .account a:hover {opacity:.8;}

footer {padding:20px; text-align:center; color:rgba( 0,0,0, .5 ); font-size:11px;}
footer a:link,
footer a:visited {color:rgba( 0,0,0, .5 );}

.pageresponse {padding:10px 20px; background:#ffc; border-bottom:1px solid rgba( 0,0,0, .1 );}

.page {flex:1; display:flex; align-items:flex-start; padding:20px;}

.hero {display:flex; flex-direction:column; align-items:center; width:100%; min-height:50vh; padding-top:60px; background:no-repeat top center; background-size:cover;}
.hero h1 {width:100%; margin:0 auto 30px auto;text-align:center; color:#fff; font-weight:bold; font-size:35px;}
.hero h2 {padding:10px 30px; text-align:center; color:#fff; background:#a40732; font-weight:bold; font-size:20px;}
.hero h2.live {padding:0; background:#9f9;}
.hero h2 a:link,
.hero h2 a:visited {display:inline-block; padding:10px 30px; color:#000; text-decoration:none;}

.video {flex:1; display:flex; flex-wrap:wrap; overflow:auto; padding:20px;}

.video h2 {width:100%;}

.video .embed {display:flex; flex-direction:column; flex-basis:60%;}
.video .embed iframe {width:100%; height:auto;}
.video .embed .no-video {display:flex; align-items:center; justify-content:center; width:100%; height:35vw; background:rgba( 0,0,0, .05 ); border:1px solid rgba( 0,0,0, .1 ); font-size:18px; color:rgba( 0,0,0, .5 );}

.video .chat {display:flex; flex-direction:column; flex-basis:40%; flex:1; height:100%; margin-left:20px; background:#fff;}
.video .chat .comments {flex:1; width:100%; height:100%; overflow:auto; padding:20px 10px;}
.video .chat .comments .item {display:flex; margin:2px 0; padding:4px 10px; background:#fff; transition:background 5s;}
.video .chat .comments .item.new {background:#ffc;}
.video .chat .comments .item.reply {background:#fef198; border-radius:5px;}
.video .chat .comments .item.banned,
.video .chat .comments .item.banned .info .replyto {color:rgba( 0,0,0, .25 );}
.video .chat .comments .item.admin .user {color:#249c00;}
.video .chat .comments .item .content {flex:1; padding-right:30px;}
.video .chat .comments .item .user {display:inline-block; margin:0 15px 0 0; font-weight:bold;}
.video .chat .comments .item .info {display:inline;}
.video .chat .comments .item .info .replyto {margin-right:5px; color:rgba( 0,0,0, .6 ); font-style:italic;}
.video .chat .comments .item .date {display:none; margin:0 0 0 15px; color:rgba( 0,0,0, .3 ); font-size:11px;}
.video .chat .comments .item:hover .date {display:inline-block; vertical-align:bottom;}
.video .chat .comments .item .controls {opacity:0; display:flex; align-items:center; justify-content:flex-end; min-width:75px; line-height:1em;}
.video .chat .comments .item:hover .controls {opacity:1;}
.video .chat .comments .item .controls a {transition:color .1s;}
.video .chat .comments .item .upvotes {display:flex; align-items:center; margin:0 5px 0 0; font-size:11px; color:rgba( 0,0,0, .2 ); font-weight:bold;}
.video .chat .comments .item .upvotes.upvoted {color:#a40732;}
.video .chat .comments .item .upvotes i {margin:0 0 0 5px; font-size:14px; color:#a40732;}
.video .chat .comments .item .upvote {font-size:14px; color:rgba( 0,0,0, .2 );}
.video .chat .comments .item .upvote:hover {color:#a40732;}
.video .chat .comments .item .undo-upvote {font-size:14px; color:#a40732;}
.video .chat .comments .item .ban {margin:0 0 0 15px; font-size:11px; color:rgba( 0,0,0, .2 );}
.video .chat .comments .item .ban.unban,
.video .chat .comments .item .ban:hover {color:#a40732;}
.video .chat .comments .item .delete {margin:0 0 0 15px; font-size:11px; color:rgba( 0,0,0, .2 );}
.video .chat .comments .item .delete:hover {color:#a40732;}
.video .chat .comments .item .reply {margin:0 0 0 15px; font-size:11px; color:rgba( 0,0,0, .2 );}
.video .chat .comments .item .reply:hover {color:rgba( 0,0,0, .7 );}

.video .chat .comments .item.product {padding:8px 10px; justify-content:space-between; border-top:1px dashed #249c00; border-bottom:1px dashed #249c00; text-align:center;}
.video .chat .comments .item.product p {margin:0;}
.video .chat .comments .item.product p a {margin-right:15px;}
.video .chat .comments .item.product p strong {}
.video .chat .comments .item.product p i {margin-left:5px; color:rgba( 0,0,0, .5 );}
.video .chat .comments .item.product .controls {min-width:0px; justify-self:flex-end;}
.video .chat .comments .item.product .controls .delete {margin:0;}

.video .chat .status {display:flex; justify-content:space-between; margin:10px 0 5px 0; padding:0 20px; font-size:11px; color:rgba( 0,0,0, .5 );}
.video .chat .status .refreshing {}
.video .chat .status .reply a {color:rgba( 0,0,0, .5 );}

.video .chat .add-comment {display:flex; flex-wrap:wrap; padding:0 20px 20px 20px;}
.video .chat .add-comment textarea {width:100%; margin-bottom:10px;}
.video .chat .add-comment p {flex:1; font-size:11px; color:rgba( 0,0,0, .75 );}
.video .chat .add-comment .admin-toggle {margin:0 10px 0 0;}
.video .chat .add-comment .admin-toggle i {color:#249c00; font-size:11px;}
.video .chat .add-comment a.logout {margin-left:10px; color:rgba( 0,0,0, .5 );}

.admin-tools {padding:15px; border-top:2px dashed rgba( 0,0,0, .2 ); background:rgba( 0,0,0, .03 );}
.admin-tools label {font-weight:bold; color:rgba( 0,0,0, .75 );}

.chat .chatregister,
.chat .chatarchived {margin:0 10px 10px 10px; padding:10px; border-radius:3px; line-height:1em;}
.chat .chatregister:first-child,
.chat .chatarchived:first-child {margin-top:10px;}
.chat .chatregister b,
.chat .chatarchived b {margin-right:5px;}
.chat .chatregister {background:#693; color:#fff;}
.chat .chatregister a {color:rgba( 255,255,255, .8 );}
.chat .chatarchived {background:#fe9; color:rgba( 0,0,0, .5 );}

.video .embed .info {flex:1; margin-top:20px; padding:20px; background:rgba( 255,255,255, .5 );}

.products {}

.product {display:flex; align-items:center; margin:0 0 10px 0; background:rgba( 0,0,0, .05 ); text-decoration:none; transition:background .1s;}
.product:hover {background:rgba( 0,0,0, .1 );}
.product .image {height:100px; margin:0 15px 0 0; padding:10px 20px; text-align:center;}
.product .image img {max-width:100%; max-height:100%;}
.product .name {font-size:18px;}

.calendar {display:flex; flex-wrap:wrap;}
.calendar a {display:flex; align-items:center; width:100%; margin:0 0 20px 0; padding:20px; background:#fff; border-radius:3px; text-decoration:none; transition:all .2s;}
.calendar a:hover {transform:scale(.99); box-shadow:0 0 5px rgba( 0,0,0, .3 );}
.calendar .thumb {margin-right:30px;}
.calendar .thumb img {max-height:150px;}
.calendar .info {width:100%; font-size:18px; line-height:1.4em;}
.calendar .info .timing {display:flex; align-items:center; justify-content:space-between;}
.calendar .info .date {width:100%; margin:0 0 5px 0; font-size:14px; color:#a40732;}
.calendar .info .title {margin:0 0 5px 0; font-weight:bold; font-size:20px;}
.calendar .info .description {font-size:14px;}
.calendar a:hover {background:rgba( 255,255,255, .9 );}

.tag {display:inline-block; padding:4px 8px; background:#7b6f65; border-radius:3px; font-size:11px; line-height:1em; font-weight:bold; color:#fff; white-space:nowrap;}
.tag.tag-archived {background:#bdb7b2;}
.tag.tag-live {padding:6px 8px; background:#9f9; font-size:18px; color:#000;}

.calendar .tag {margin:-10px 0 0 0;}

.register {padding:20px; background:#7b6f65; border-radius:3px; color:#fff;}
.register strong {margin-right:5px;}
.register a {color:#fff;}
.register hr {border-color:rgba( 255,255,255, .1 );}
.register input[type="text"],
.register input[type="password"] {width:100%; margin:0 0 15px 0; border:0;}

.register .forgot-password {margin-left:15px; color:rgba( 255,255,255, .75 ); font-size:11px;}

@media ( min-width: 1024px ){

  .calendar {flex-basis:75%;}
  .register {flex-basis:25%; margin-left:20px;}

}

.login {max-width:300px; width:100%; margin:0 auto; padding:20px; background:#7b6f65; border-radius:3px; color:rgba( 255,255,255, .6 );}
.login form {display:flex; flex-direction:column;}
.login form input {margin:0 0 15px 0;}
.login form button {margin:10px 0 0 0;}
.login .forgot-password {display:inline-block; margin-top:15px; color:rgba( 255,255,255, .75 ); font-size:11px;}


.tooltip {position:absolute; z-index:1005; transform:translateX(-50%) translateZ(1px); display:none; padding:8px 10px; border-radius:3px; background:#222; color:#fff; font-size:11px; line-height:1.4em; text-align:center; white-space:nowrap;}
.tooltip .quiet {color:rgba( 255,255,255, .5 );}
.tooltip.white {background:#fff; color:#000; box-shadow:0px 0px 2px 2px rgba( 0,0,0, .15 ); font-size:14px; line-height:1.4em; text-align:left;}
.tooltip::before {content:'\f0d8'; pointer-events:none; font-family:Font Awesome\ 5 Free; font-weight:600; font-size:18px; color:#222; position:absolute; left:0; top:0; width:100%; margin-top:-8px; text-align:center;}
.tooltip.left {transform:translateX(-100%) translateY(-50%);}
.tooltip.left::before {content:'\f0da'; left:auto; right:0; top:50%; width:auto; margin-right:-5px; text-align:right;}
.tooltip.white::before {color:#fff;}


@media ( max-width: 1023px ){
  
  body {overflow:visible; height:auto; min-height:100%;}
  
  .hero {padding:40px 20px;}
  .hero h1 {line-height:1.4em;}
  .hero h2 {line-height:1.4em;}
  
  .video {flex-direction:column; padding:0;}
  
  .video .embed {min-width:1px;}
  .video .embed .no-video {height:60vw;}
  
  .video .embed .info {display:none;}
  
  .video .embed > div {padding:0 !important;}
  .video .embed iframe {position:relative !important; width:100% !important; height:auto !important; min-height:56vw !important;}
  
  .video .chat {margin:0;}
  
  .page {flex-wrap:wrap;}
  
  .register {width:100%; margin-top:20px;}
  .home .register {order:-1; margin-top:0; margin-bottom:20px;}
  
}


@media ( max-width: 600px ){
  
  .video {overflow:visible;}
  .video .embed {position:sticky; top:0;}
  .video .embed .no-video {background:#efefef;}
  
  header .social {flex-direction:column;}
  header .social a {width:26px; height:26px; margin:5px 0 0 0; font-size:13px;}
  header .social a:first-child {margin-top:0;}
  header .social a .fa-instagram {font-size:15px;}
  
}


@media ( orientation: landscape ){
    
  .video {position:sticky; top:0; flex-direction:row; height:100%;}
  
  .video .chat {height:100%;}
  
  .video .embed .no-video {height:35vw;}
  
}