html, body, div, span, iframe, h1, h2, h3, h4, h5, h6, p, a, img, b, u, i,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, tbody, tfoot,
thead, tr, th, td, article, aside, canvas, figure, figcaption, footer, header,
menu, nav, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
}
article, aside, details, figcaption, figure,
footer, header, menu, nav, section {
display: block;
}
ul li {
list-style: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
*, *::before, *::after {
box-sizing: border-box;
}
a {
color:#3a6aae;
}
input, button, textarea, select {
font: inherit;
}
p, h1, h2, h3, h4, h5, h6 {
overflow-wrap: break-word;
}
h1 {
font-size:30px;
line-height: 35px;
margin:20px 0;
font-family: 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;
}
h2 {
font-size: 20px;
line-height: 25px;
margin: 20px 0;
font-weight: bold;
font-family: 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;
}
h3 {
font-size: 18px;
line-height: 20px;
font-weight: bold;
}
h5 {
font-size: 18px;
line-height: 20px;
font-weight: bold;
margin-top:20px;
font-family: 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;
}
img, picture, video, canvas, svg {
display: block;
max-width: 100%;
}
::placeholder {
color: #aaa;
}
body {
line-height: 22px;
font-size:18px;
-webkit-font-smoothing: antialiased;
background:#f5f5f4;
color:#292523;
color:#586570;
font-family: Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;
font-weight: normal;
overflow-y: scroll;
}
.text-brass {
color:#a3a382;
color:#797962;
}
.progress-bar {
width:100%;
height:20px;
border-radius: 10px;
background: #d1d1d1;
position: relative;
overflow: hidden;
}
.progress-bar-fill {
position: absolute;
height:20px;
background-color: #64748b;
}
.progress-bar-label {
position: absolute;
font-size:12px;
line-height: 20px;
margin-left:10px;
color:white;
font-family: sans-serif;
}
.text-warn {
font-weight: bold;
color:orange;
}
.text-sky {
color:#7fb3ff;
}
.font-old-style {
font-family: 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;
}
.wrapper {
width:1300px;
max-width:100%;
margin:0 auto;
}
.pagination {
display: flex;
}
.page-link {
position: relative;
display: block;
padding: 10px;
margin-left: 1px;
/*
line-height: $pagination-line-height;
color: $pagination-color;
background-color: $pagination-bg;
border: $pagination-border-width solid $pagination-border-color;
&:hover {
color: $pagination-hover-color;
text-decoration: none;
background-color: $pagination-hover-bg;
border-color: $pagination-hover-border-color;
}
&:focus {
z-index: 2;
outline: 0;
box-shadow: $pagination-focus-box-shadow;
}
// Opinionated: add "hand" cursor to non-disabled .page-link elements
&:not(:disabled):not(.disabled) {
cursor: pointer;
}
*/
}
.page-item:first-child .page-link {
margin-left: 0;
}
/*
.page-item {
&:first-child {
.page-link {
margin-left: 0;
@include border-left-radius($border-radius);
}
}
&:last-child {
.page-link {
@include border-right-radius($border-radius);
}
}
&.active .page-link {
z-index: 1;
color: $pagination-active-color;
background-color: $pagination-active-bg;
border-color: $pagination-active-border-color;
}
&.disabled .page-link {
color: $pagination-disabled-color;
pointer-events: none;
// Opinionated: remove the "hand" cursor set previously for .page-link
cursor: auto;
background-color: $pagination-disabled-bg;
border-color: $pagination-disabled-border-color;
}
}
*/
.empty {
background:#edeae5;
border-radius: 2px;
font-size:20px;
line-height: 30px;
text-align: center;
padding:40px 0;
margin:20px 0;
font-family: 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;
}
.empty .btn {
font-size:14px;
}
.btn {
display:inline-block;
padding:10px 20px;
border-radius:4px;
background:#86a676;
color:#fff;
font-weight:bold;
text-decoration:none;
border:1px solid #d9dfb5;
margin-top:10px;
cursor: pointer;
font-family: Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;
transition: background .3s ease;
}
.btn:hover {
background: #75c44e;
}
.btn-sm {
padding:5px 10px;
font-size:12px;
}
.btn-secondary {
background: #86a676;
color: #fff;
border-color: #dddddd;
}
.btn-secondary:hover {
background: #75c44e;
color: #fff;
}
.header-overlay {
background:url('https://outinoldtown.com/webp/masthead-large/waterfront-park-1-prince-alexandria-va.webp');
background-color: rgb(37, 42, 53);
background-blend-mode: overlay;
background-position:center;
background-size:cover;
margin-top: -250px;
height: 500px;
padding-top:250px;
text-align:center;
color:white;
}
.footer {
background:#26333c;
background:#292523;
line-height: 16px;
vertical-align:top;
color:white;
}
.footer-wrapper {
font-size:0;
max-width:1200px;
margin:0px auto;
padding:50px 0;
}
.footer-col {
vertical-align:top;
width:25%;
padding:20px;
display:inline-block;
font-size:13px;
border-right:1px solid #49403c;
}
.footer-header {
font-weight:bold;
margin-bottom:20px;
font-size:16px;
color:rgba(255,255,255,0.8);
}
.footer-menu-title {
text-align:center;
color:white;
text-decoration:none;
font-weight:bold;
display:block;
margin:25px 0 3px 0;
color:rgba(255,255,255,0.5);
transition:color .5s ease;
}
.footer-menu-link {
text-decoration:none;
padding:3px;
display:block;
color:rgba(255,255,255,0.5);
transition:color .5s ease;
}
.footer-menu-title:hover,
.footer-menu-link:hover {
color:white;
}
.divider {
background:#49403c;
width:100%;
height:1px;
margin:10px 0%;
}
.footer-stats-number {
text-align:center;
font-size:27px;
color:#a3a382;
font-family: 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;
letter-spacing: 2px;
margin-top:30px;
}
.footer-stats-label {
text-align:center;
font-family: 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;
color:#a3a382;
font-size:18px;
}
@media only screen and (max-width: 500px){
.footer-col {
width:100%;
padding:10px;
}
.footer-wrapper {
padding:30px 0 100px 0;
text-align: center;
}
.footer-logo {
display: block;
margin: 0 auto;
margin-bottom:70px;
}
}
.text-stone-500 {
color:#78716c;
}
.text-stone-400 {
color:#a8a29e;
color:#659c6d;
}
.featured-place-in-list {
background: #faffe9;
padding: 20px 10px;
margin-left: -10px;
}
.place-list-item {
margin-bottom:25px;
}
.place-list-thumb {
float:left;
margin-right:10px;
height:60px;
border-radius:3px;
}
.place-list-location {
font-size:13px;
}
.place-list-type {
font-weight:bold;
}
.place-list-name {
font-weight:bold;
font-size:22px;
display:block;
margin:4px 0;
text-decoration:none;
color:#64748b;
}
.place-list-url {
font-size: 13px;
color: #64748b;
white-space: pre;
text-decoration: none;
width: 100%;
display: block;
text-overflow: ellipsis;
overflow: hidden;
}
.place-list-url:hover {
text-decoration:underline;
}
.place-list-sub-cat {
font-size:13px;
font-weight:400;
}
.place-list-events {
background: #9fbf92;
padding:1px 3px;
color:white;
text-decoration: none;
border-radius: 1px;
display: inline-block;
}
.place-list-fact-wrapper {
background:#e6e3e1;
display:inline-block;
width:30%;
padding:10px;
float:right;
border-radius:5px 0 5px 5px;
}
.place-list-fact-tag {
position:relative;
margin-top:-24px;
margin-right:-10px;
float:right;
text-transform:uppercase;
font-size:11px;
font-weight:bold;
letter-spacing:2px;
color:#64748b;
background:#e6e3e1;
border-radius:5px 5px 0 0;
padding:4px 6px 0 6px;
}
.place-list-fact {
font-size: 13px;
line-height: 16px;
color: #626161;
font-weight: bold;
text-align: center;
}
.event-list-item {
margin-bottom:15px;
}
.event-list-thumb {
float:left;
margin-right:10px;
height:60px;
border-radius:3px;
}
.event-list-location {
font-size:12px;
}
.event-list-type {
font-weight:bold;
}
.event-list-name {
font-weight:bold;
font-size:20px;
display:block;
margin:4px 0;
text-decoration:none;
color:#64748b;
}
.event-list-url {
font-size:12px;
color:#64748b;
text-decoration:none;
}
.event-list-url:hover {
text-decoration:underline;
}
.event-list-recurring {
background:#d1d9e6;
border-radius:3px;
padding:1px 5px;
font-weight:bold;
text-transform:uppercase;
font-size:10px;
color:#64748b;
text-decoration:none;
}
.pill {
background:#e6e3e1;
border-radius:3px;
padding:0px 2px;
font-weight:bold;
text-transform:uppercase;
font-size:10px;
line-height: 14px;
color:#64748b;
text-decoration:none;
display:inline-block;
}
.page-side-menu {
vertical-align:top;
font-size:14px;
background:#292523;
background:#e6e3e1;
background:#fff;
padding:0 20px;
padding-bottom:20px;
border-radius: 0 0 20px 20px;
border:1px solid #e6dede;
border-top-width:0;
width:300px;
max-width:20%;
display:inline-block;
}
.page-side-menu a {
}
.page-side-menu-ul {
font-size:14px;
line-height:22px;
}
.page-side-menu-link {
text-decoration:none;
color:#e5e7eb;
color:#292523;
}
.page-side-menu-title {
color:#64748b;
text-align:center;
padding:20px 0 10px 0;
display:inline-block;
text-decoration:none;
font-weight:bold;
}
.page-with-side-menu-content {
vertical-align:top;
font-size:14px;
max-width:58%;
width:800px;
display:inline-block;
margin:0 1%;
}
.page-side-menu-right {
vertical-align:top;
font-size:14px;
max-width:20%;
width:800px;
display:inline-block;
background:#e6e3e1;
background:#fff;
padding:20px;
}
.modal{align-items:center;bottom:0;display:none;-ms-flex-align:center;-ms-flex-pack:center;justify-content:center;left:0;opacity:0;overflow:hidden;padding:.4rem;position:fixed;right:0;top:0}.modal.active,.modal:target{display:flex;display:-ms-flexbox;opacity:1;z-index:400}.modal.active .modal-overlay,.modal:target .modal-overlay{background:rgba(247,248,249,.75);bottom:0;cursor:default;display:block;left:0;position:absolute;right:0;top:0}.modal.active .modal-container,.modal:target .modal-container{animation:slide-down .2s ease 1;z-index:1}.modal.modal-sm .modal-container{max-width:320px;padding:0 .4rem}.modal.modal-lg .modal-overlay{background:#fff}.modal.modal-lg .modal-container{box-shadow:none;max-width:960px}.modal-container{background:#fff;border-radius:.1rem;box-shadow:0 .2rem .5rem rgba(48,55,66,.3);display:flex;display:-ms-flexbox;-ms-flex-direction:column;flex-direction:column;max-height:75vh;max-width:640px;padding:0 .8rem;width:100%}.modal-container.modal-fullheight{max-height:100vh}.modal-container .modal-header{color:#303742;padding:.8rem}.modal-container .modal-body{overflow-y:auto;padding:.8rem;position:relative}.modal-container .modal-footer{padding:.8rem;text-align:right}.nav{display:flex;display:-ms-flexbox;-ms-flex-direction:column;flex-direction:column;list-style:none;margin:.2rem 0}
.page-heading {
font-size:18px;
margin:30px 0;
font-weight:bold;
padding-bottom:8px;
border-bottom:2px solid #e6e3e1;
}
.event-card {
margin: 10px 0;
border: 1px solid #eeeded;
padding: 13px;
border-radius: 3px;
background: white;
}
.event-card-title {
display:block;
width:100%;
font-weight:bold;
text-decoration:none;
color:#64748b;
color:#797962;
}
.business-hours-sign {
border:2px solid #797962;
padding:20px;
margin:20px;
text-align: center;
color:#797962;
font-family: 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;
font-size:16px;
}
.business-hours-sign-heading {
font-size:20px;
font-weight: bold;
margin:0 20px 20px 20px;
padding-bottom:10px;
border-bottom:2px solid #797962;
}
.business-hours-sign-group-heading {
font-size:18px;
font-weight: bold;
margin-bottom:5px;
}
.event-details-overview {
width:70%;
display:inline-block;
padding:40px;
vertical-align:top;
}
.event-details-info {
width:29%;
display:inline-block;
vertical-align:top;
font-size:12px;
padding:20px;
background:#e6e3e1;
border:3px solid #f5f5f4;
box-shadow: 0px 0px 0px 4px #f1f1f1;
outline:2px solid #e6e3e1;
border-radius:5px;
margin-top:30px;
}
.event-details-title {
font-size:40px;
line-height:50px;
font-weight:bold;
}
.event-details-date {
font-weight:bold;
line-height:20px;
font-size:20px;
color:#64748b;
}
.event-details-desc {
white-space:pre-line;
line-height:18px;
}
.event-details-place-img {
}
.event-details-info-key {
font-weight:bold;
line-height:20px;
color:#a8a29e;
}
.view-event-details-btn,
.add-to-google-cal-btn,
.add-to-cal-btn {
color:white;
background: #797962;
cursor: pointer;
border-radius: 3px;
border-width: 0;
text-align: left;
text-decoration: none;
display: inline-block;
padding:6px 10px;
margin:10px 0;
font-size:14px;
font-weight: bold;
}
.view-event-details-btn {
background:#2a84b1;
}
.event-details-url {
font-size:18px;
}
.stats-wrapper {
margin:0 auto;
padding:18px 36px;
color:#797962;
text-align: center;
font-weight: bold;
margin-top:20px;
margin-bottom:0px;
}
.stats-views-wrapper {
width:48%;
display: inline-block;
}
.stats-views {
font-size:30px;
line-height: 30px;
}
.stats-views-label {
font-size:15px;
}
.event-details-with-short-desc {
padding:80px;
margin:20px 0;
color:#777373;
text-align: center;
font-size:30px;
background:#e6e3e1;
border:3px solid #f5f5f4;
box-shadow: 0px 0px 0px 4px #f1f1f1;
outline:2px solid #e6e3e1;
border-radius:5px;
}
@media only screen and (max-width: 1024px) {
.event-details-overview,
.event-details-info {
width:100%;
}
}
.item-reaction-wrapper {
margin-top:20px;
text-align: center;
}
.item-reaction {
border-radius: 50%;
background:#2473ca;
color:white;
display:inline-block;
text-align: center;
cursor: pointer;
position: relative;
text-decoration: none;
transition: all .8s cubic-bezier(0.18, 0.89, 0.32, 1.18);
transition: transform ease-in 0.1s, box-shadow ease-in 0.25s;
box-shadow: 0 0px 10px #737475;
}
.item-reaction:hover {
text-decoration: none;
transform: scale(1.08);
}
#item-reaction-up {
width:100px;
height:100px;
}
#item-reaction-up.item-reaction-reacted {
background:#51a234;
}
#item-reaction-up svg{
margin:0 auto;
margin-top:25px;
width:35px;
fill:white;
}
#item-reaction-up:hover {
z-index: 3;
background:#40b9e9;
}
.item-reaction-label {
display: block;
font-size:10px;
}
.item-reaction:before, .item-reaction:after {
position: absolute;
content: '';
display: block;
width: 140%;
height: 100%;
left: -20%;
z-index: -1000;
transition: all ease-in-out 0.5s;
background-repeat: no-repeat;
}
#item-reaction-up:before {
display: none;
top: -75%;
background-image: radial-gradient(circle, #51a235 20%, transparent 20%), radial-gradient(circle, transparent 20%, #51a235 20%, transparent 30%), radial-gradient(circle, #51a235 20%, transparent 20%), radial-gradient(circle, #51a235 20%, transparent 20%), radial-gradient(circle, transparent 10%, #51a235 15%, transparent 20%), radial-gradient(circle, #51a235 20%, transparent 20%), radial-gradient(circle, #51a235 20%, transparent 20%), radial-gradient(circle, #51a235 20%, transparent 20%), radial-gradient(circle, #51a235 20%, transparent 20%);
background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%, 10% 10%, 18% 18%;
}
#item-reaction-up:after {
display: none;
bottom: -75%;
background-image: radial-gradient(circle, #51a235 20%, transparent 20%), radial-gradient(circle, #51a235 20%, transparent 20%), radial-gradient(circle, transparent 10%, #51a235 15%, transparent 20%), radial-gradient(circle, #51a235 20%, transparent 20%), radial-gradient(circle, #51a235 20%, transparent 20%), radial-gradient(circle, #51a235 20%, transparent 20%), radial-gradient(circle, #51a235 20%, transparent 20%);
background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 10% 10%, 20% 20%;
}
.item-reaction:active {
transform: scale(0.9);
}
#item-reaction-up.animate:before {
display: block;
animation: topBubbles ease-in-out 0.75s forwards;
}
#item-reaction-up.animate:after {
display: block;
animation: bottomBubbles ease-in-out 0.75s forwards;
}
@keyframes
topBubbles { 0% {
background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%, 40% 90%, 55% 90%, 70% 90%;
}
50% {
background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%, 50% 50%, 65% 20%, 90% 30%;
}
100% {
background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%, 50% 40%, 65% 10%, 90% 20%;
background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
}
}
@keyframes
bottomBubbles { 0% {
background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%, 70% -10%, 70% 0%;
}
50% {
background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%, 105% 0%;
}
100% {
background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%, 110% 10%;
background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
}
}
.form-select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#fff;border:.05rem solid #bcc3ce;border-radius:.1rem;color:inherit;font-size:.8rem;height:1.8rem;line-height:1.2rem;outline:0;padding:.25rem .4rem;vertical-align:middle;width:100%}.form-select:focus{border-color:#5755d9;box-shadow:0 0 0 .1rem rgba(87,85,217,.2)}.form-select::-ms-expand{display:none}.form-select.select-sm{font-size:.7rem;height:1.4rem;padding:.05rem 1.1rem .05rem .3rem}.form-select.select-lg{font-size:.9rem;height:2rem;padding:.35rem 1.4rem .35rem .6rem}.form-select[multiple],.form-select[size]{height:auto;padding:.25rem .4rem}.form-select[multiple] option,.form-select[size] option{padding:.1rem .2rem}.form-select:not([multiple]):not([size]){background:#fff url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%204%205'%3E%3Cpath%20fill='%23667189'%20d='M2%200L0%202h4zm0%205L0%203h4z'/%3E%3C/svg%3E") no-repeat right .35rem center/.4rem .5rem;padding-right:1.2rem}.has-icon-left,.has-icon-right{position:relative}
.form-select:readonly {
opacity: 0.5;
}
::-moz-selection { /* Code for Firefox */
color: white;
background: #64748b;
}
::selection {
color: white;
background: #64748b;
}
.tab{
align-items:center;
border-bottom:.05rem solid #a7a784;
display:flex;
display:-ms-flexbox;
-ms-flex-align:center;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
list-style:none;
margin:30px 0
}
.tab .tab-item{
margin-top:0;
margin-left:0px;
}
.tab .tab-item a{
border-bottom:.1rem solid transparent;
color:inherit;
display:block;
margin:0 .4rem -1px 0;
padding:.4rem .2rem .3rem .2rem;
text-decoration:none;
color:#a7a784;
}
.tab .tab-item a:focus,.tab .tab-item a:hover{color:#64748b}
.tab .tab-item a.active,.tab .tab-item.active a{border-bottom-color:#64748b;color:#64748b;font-weight:bold}
.tab .tab-item.tab-action{-ms-flex:1 0 auto;flex:1 0 auto;text-align:right}
/**8
.tab .tab-item .btn-clear{margin-top:-.2rem}
.tab.tab-block .tab-item{-ms-flex:1 0 0;flex:1 0 0;text-align:center}
.tab.tab-block .tab-item a{margin:0}
.tab.tab-block .tab-item .badge[data-badge]::after{position:absolute;right:.1rem;top:.1rem;transform:translate(0,0)}
.tab:not(.tab-block) .badge{padding-right:0}
*/
.no-underline{text-decoration: none}
.clearfix:before,.clearfix:after{content: " ";display: table;}.clearfix:after {clear: both;}
.float-left,.pull-left {float:left;}
.float-right,.pull-right {float:right;}
.right {text-align:right;}
.center {text-align:center;}
.full { width:100%; }
.half { width:50%; }
.third { width:33%; }
.two-thirds { width:66%; }
.font-zero {font-size:0;}
.padding{padding:5px;}
@media only screen and (max-width: 500px){
.center-mobile{margin:auto;text-align:center}
.hide-on-mobile{display:none}
.full-mobile{width:100%}
.tab .tab-item{
width: 31%;
text-align: left;
border-bottom: 1px solid #ddd;
padding: 8px 0px;
margin: 0 1%;
}
.tab .tab-item.active {
background:#eee;
}
.tab .tab-item.active a {
border-bottom-color:transparent;
}
.tab{
border-bottom:.05rem solid transparent;
}
}
@media only screen and (min-width: 501px) and (max-width: 1024px){
.center-tablets{margin:auto;text-align:center}
.hide-on-tablets{display:none}
.pull-right-tablets{float:right}
.pull-left-tablets{float:left}
.third-tablets{width:33.333%}
.half-tablets{width:50%}
.two-thirds-tablets{width:66.666%}
.full-tablets{width:100%}
}
@media only screen and (min-width: 1024px){
.hide-on-desktop{display:none}
.pull-left-desktop{float:left}
.pull-right-desktop{float:right}
.third-desktop{width:33.333%}
.half-desktop{width:50%}
.quarter-desktop{width:25%;}
.two-thirds-desktop{width:66.666%}
.float-left-desktop,.pull-left-desktop {float:left;}
.float-right-desktop,.pull-right-desktop {float:right;}
}
@media only screen and (min-width: 1500px) {
.wrapper {
max-width:1400px;
}
}
.hours-tag {
background: #195d97;
padding: 2px 5px;
overflow: hidden;
border-radius: 2px;
margin:0 auto;
display: inline;
font-size: 12px;
line-height: 12px;
color: #fff;
}
.hours-tag-closed {
background: #975919;
}
.hours-tag-open {
}
.hours-tag-opening-soon {
background: #e1e786;
}
.hours-tag-closing-soon {
background: #e79d50;
}
.toast-success {
background:#6e988e;
border:3px solid #647e77;
box-shadow: 0px 1px 13px #d2d2d2;
outline:2px solid #f2f0ed;
border-radius: 2px;
padding: 10px;
line-height:19px;
font-weight:bold;
margin:12px 0;
color: #fff;
}
.toast-error {
background:#986e6e;
border:3px solid #9d1212;
box-shadow: 0px 1px 13px #d2d2d2;
outline:2px solid #f2f0ed;
border-radius: 2px;
padding: 10px;
line-height:19px;
font-weight:bold;
margin:12px 0;
color: #fff;
}
.invalid-feedback {
background: #d5d7ac;
border-left: 5px solid #ff0000;
font-weight: bold;
margin: 12px 0;
color: #180505;
display: block;
padding-left: 11px;
padding: 5px 5px;
}
.status-update {
position: relative;
background:#e7e5e4;
background:#3586fb;
background:#6e988e;
border-radius: 8px;
padding: 10px;
font-size:14px;
margin-bottom:12px;
margin-left:70px;
color: #fff;
display:inline-block;
min-width:100px;
font-style: italic;
font-weight:bold;
}
.status-update-profile-img {
float:left;
margin-right:10px;
width:100px;
border-radius: 3px;
}
.status-update a {
text-decoration: none;
}
.status-update-profile-name {
color:#fff;
font-size:14px;
font-weight:400;
text-decoration: none;
margin-bottom:5px;
}
.status-update:before {
content: "";
width: 0px;
height: 0px;
position: absolute;
border-left: 9px solid #6e988e;
border-right: 10px solid transparent;
border-top: 6px solid #6e988e;
border-bottom: 5px solid transparent;
left: 25px;
bottom: -10px;
}
.status-update-time {
font-size: 12px;
line-height: 24px;
color: #a8a29e;
float: right;
font-weight: bold;
margin-top: -33px;
padding:0px 4px;
border-radius: 3px 0 3px 0;
}
.status-header-wrapper {
/*
position: absolute;
top:100px;
right:20px;
width:300px;
opacity: 1;
*/
margin:30px auto;
width:300px;
max-width:100%;
transition: all .2s ease;
}
.status-header-wrapper .status-update-time {
color:white;
}
.status-header-wrapper:hover {
opacity: 1;
}
.status-update-impression_count {
font-size:12px;
}
.status-update-feed {
margin-bottom:38px;
}
.status-update-from-self {
background-color: #fff;
}
.stats-card {
display:inline-block;
width:31.5%;
width:23.5%;
text-align: center;
background:#f5f5f4;
border-radius: 4px;
color:#797962;
margin:.5%;
padding:1%;
vertical-align: top;
border: 4px solid #e6e3e1;
box-shadow: 0px 1px 13px #d2d2d2;
outline: 2px solid #f2f0ed;
}
.stats-card-val {
font-family: 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;
font-size:40px;
line-height:40px;
color:#111;
}
.stats-card-label {
font-size:12px;
min-height:24px;
font-weight: bold;
}
#event-tooltip {
position: fixed;
display: none;
width:300px;
background: white;
color:#403128;
border:1px solid #e9ebea;
box-shadow: 0 0 57px #00000078;
font-size:13px;
line-height: 15px;
border-radius: 5px;
}
#event-tooltip-title {
text-align: center;
font-size: 18px;
line-height: 20px;
font-weight: bold;
margin-top:20px;
}
#event-tooltip-desc {
padding:20px;
}
#event-tooltip-btn {
text-align: center;
display: block;
margin:20px;
}
@media all and (max-width: 700px) {
.stats-card {
width:100%;
margin: 6px 0;
}
#notifications-wrapper {
float: none;
display: block;
margin:0 auto;
}
#event-cal-show-more-wrapper {
display: none;
}
.event-cal {
height: auto;
}
}
.place-rank-tag {
/*
background: #86a2ba;
padding: 0px 6px 0 0;
overflow: hidden;
border-radius: 8px;
display: inline-block;
font-size: 13px;
font-weight: bold;
color: #797962;
font-family: 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;
line-height: 36px;
*/
display: inline-block;
font-size: 11px;
font-weight: bold;
color: #797962;
font-family: 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;
}
.place-rank-tag svg {
display: inline;
vertical-align: bottom;
fill: #333;
display:none;
stroke: #333;
/*
margin-right: 10px;
padding: 1px 11px 0px 12px;
background: #3a6aae;
width: 4em !important;
height: 3em;
*/
}
.event-cal-wrapper {
font-size:0;
}
#event-cal-show-more-wrapper {
background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.2) 100%);
width:100%;
padding:20px 0;
text-align: center;
margin-top: -58px;
z-index: 100;
position: relative;
font-size: 18px;
font-weight: bold;
display: block;
margin-bottom: 200px;
}
.event-cal {
width:100%;
display:inline-block;
border-radius: 5px;
box-shadow: 0 0 57px #cacaca;
border-top-width: 0;
box-sizing:border-box;
overflow: hidden;
height:1000px;
}
.event-cal-head {
background:#928d83;
color:white;
padding:6px 0;
text-align: center;
}
.event-cal-label {
font-size:14px;
width:14.2%;
display:inline-block;
font-weight: bold;
text-transform: uppercase;
}
.event-cal-day {
font-size:21px;
width:14.28%;
height:450px;
vertical-align: top;
padding-left:2px;
border:1px solid #e9ebea;
display:inline-block;
border-right:0px;
border-top:0;
box-sizing:border-box;
text-align: center;
user-select: none;
transition: all .2s ease;
position: relative;
font-weight: 900;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.event-cal-day-future {
background-color:#e6e3e1;
background-color:#fff;
color:#3b4351;
}
/*
.weekend {
background:#dfd8d3;
}
*/
.event-cal-day-past {
background-color:#f2f5f7;
opacity: 0.4;
}
.event-cal-day-today {
background-color:#c0cfdc;
color:#3b4351;
}
.cal-event-list {
font-size:13px;
text-align: left;
}
.cal-label {
font-size:12px;
}
.cal-event-host {
font-size:11px;
text-decoration: none;
padding:0 2px;
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: center;
line-height: 19px;
margin-bottom: 6px;
}
.cal-event-item {
font-weight: 400;
margin:0 0px 2px 0;
padding-bottom: 3px;
border-radius: 0;
overflow: hidden;
color:#333;
display: block;
text-decoration: none !important;
}
.event-cal-info {
text-decoration: none;
transition: color .3s ease;
display: block;
line-height: 14px;
text-decoration: none !important;
}
.event-cal-link:hover {
color:white;
text-decoration: none;
}
.event-cat-emoji {
font-size:18px;
}
.event-title {
display:none;
}
.event-cat-desc {
display:none;
}
.event-short-desc {
display:none;
}
.event-cat-wrapper {
}
@media all and (max-width: 800px) {
.event-cal-day {
font-size: 15px;
padding-top:20px;
}
}
@media all and (max-width: 700px) {
.event-cal-day {
font-size: 12px;
padding-top:22px;
}
}
@media all and (max-width: 500px) {
.event-cal-head {
display:none;
}
.event-cal {
border-width: 0;
width:100%;
border-radius: 0;
box-shadow: none;
text-align:center;
}
.event-cal-day {
width:100%;
height:auto;
padding-top:5px;
padding-top:0;
padding-left:2px;
display: none;
margin:4px 0;
padding:5px;
border:0px solid #e9ebea;
background: white !important;
}
.even-cal-day-has-events {
display: block;
padding:14px 0px;
}
.cal-label {
text-align:center;
font-size:16px;
}
.cal-event-item {
margin:0px 3% 15px 3%;
padding:2%;
}
.event-short-title {
display:none;
}
.event-short-desc {
font-size:14px;
margin-top:5px;
display: block;
font-weight: 400;
}
.cal-event-host {
display:none;
}
.event-title {
display:block;
text-align:center;
font-size:14px;
margin-top:10px;
margin-bottom:10px;
}
.event-cal-link {
margin-bottom:20px;
}
.event-cat-emoji {
display:none;
}
.emoji {
font-size:33px;
}
.event-cat-wrapper {
display: block;
text-align:center;
margin:10px 0;
}
.event-cat-desc {
font-size:12px;
display:inline;
background: #eef9ff;
color:#8b695d;
padding:5px 8px;
margin:2px;
border-radius: 3px;
}
}
.card-jack {
margin:100px auto;
max-width:500px;
padding:40px;
background:#f2f0ed;
border:4px solid #e6e3e1;
box-shadow: 0px 1px 13px #d2d2d2;
outline:2px solid #f2f0ed;
border-radius:5px;
}
.card-queen {
margin: 0 auto;
max-width: 500px;
padding: 40px;
background: #f2f0edc4;
backdrop-filter: blur(7px);
border-radius: 13px;
}
.card-ace {
padding:20px;
background:#e6e3e1;
border:3px solid #f5f5f4;
box-shadow: 0px 0px 0px 4px #f1f1f1;
outline:2px solid #e6e3e1;
border-radius:5px;
}
.card-king {
padding:20px;
background:#f2f0ed;
border:4px solid #e6e3e1;
box-shadow: 0px 1px 13px #d2d2d2;
outline:2px solid #f2f0ed;
border-radius:5px;
line-height: 18px !important;
margin:10px;
}
.card-heading {
color:#64748b;
text-align: center;
font-size:20px;
padding-bottom:10px;
}
.table{border-collapse:collapse;border-spacing:0;text-align:left;width:100%;font-size:14px;}
.table.table-striped tbody tr:nth-of-type(odd){background:#f9f6f1}
.table tbody tr.active,.table.table-striped tbody tr.active{background:#eef0f3}
.table.table-hover tbody tr:hover{background:#eef0f3}
.table td,.table th{border-bottom:.05rem solid #e6e3e1;padding:.6rem .4rem}
.table th{border-bottom-width:.1rem;font-weight:bold;}
label {
display:block;
padding:10px 0 0 0;
font-size:12px;
text-transform:uppercase;
color:#64748b;
font-weight:bold;
margin-left:3px;
padding-bottom:5px;
}
.text-input {
width:100%;
padding:8px;
background:white;
border:1px solid #cacaca;
border-radius:5px;
font-size:14px;
}
.textarea {
width:100%;
padding:10px;
background:white;
border:1px solid #eee;
border-radius:5px;
font-size:14px;
}
.text-input:disabled,
.textarea:disabled {
background:#eee;
}
.p-0 {
padding: 0px;
}
.p-1 {
padding: 0.25rem;
}
.p-12 {
padding: 3rem;
}
.p-2 {
padding: 0.5rem;
}
.p-24 {
padding: 6rem;
}
.p-3 {
padding: 0.75rem;
}
.p-4 {
padding: 1rem;
}
.p-6 {
padding: 1.5rem;
}
.p-7 {
padding: 1.75rem;
}
.px-0 {
padding-left: 0px;
padding-right: 0px;
}
.px-1 {
padding-left: 0.25rem;
padding-right: 0.25rem;
}
.px-2 {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.px-3 {
padding-left: 0.75rem;
padding-right: 0.75rem;
}
.px-4 {
padding-left: 1rem;
padding-right: 1rem;
}
.px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.py-1 {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}
.py-1\.5 {
padding-top: 0.375rem;
padding-bottom: 0.375rem;
}
.py-12 {
padding-top: 3rem;
padding-bottom: 3rem;
}
.py-2 {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.py-3 {
padding-top: 0.75rem;
padding-bottom: 0.75rem;
}
.py-4 {
padding-top: 1rem;
padding-bottom: 1rem;
}
.py-6 {
padding-top: 1.5rem;
padding-bottom: 1.5rem;
}
.pb-1 {
padding-bottom: 0.25rem;
}
.pb-10 {
padding-bottom: 2.5rem;
}
.pb-2 {
padding-bottom: 0.5rem;
}
.pb-4 {
padding-bottom: 1rem;
}
.pb-8 {
padding-bottom: 2rem;
}
.pl-1 {
padding-left: 0.25rem;
}
.pl-2 {
padding-left: 0.5rem;
}
.pl-3 {
padding-left: 0.75rem;
}
.pl-7 {
padding-left: 1.75rem;
}
.pr-2 {
padding-right: 0.5rem;
}
.pr-20 {
padding-right: 5rem;
}
.pr-4 {
padding-right: 1rem;
}
.pr-5 {
padding-right: 1.25rem;
}
.pr-8 {
padding-right: 2rem;
}
.pt-1 {
padding-top: 0.25rem;
}
.pt-10 {
padding-top: 2.5rem;
}
.pt-12 {
padding-top: 3rem;
}
.pt-2 {
padding-top: 0.5rem;
}
.pt-3 {
padding-top: 0.75rem;
}
.pt-4 {
padding-top: 1rem;
}
.pt-5 {
padding-top: 1.25rem;
}
.pt-6 {
padding-top: 1.5rem;
}
.pt-8 {
padding-top: 2rem;
}
.text-left {
text-align: left;
}
.text-center {
text-align: center;
}
.inline-block {
display:inline-block;
}
.text-right {
text-align: right;
}
.align-baseline {
vertical-align: baseline;
}
.font-sans {
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.font-serif {
font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
}
.text-2xl {
font-size: 1.5rem;
line-height: 2rem;
}
.text-4xl {
font-size: 2.25rem;
line-height: 2.5rem;
}
.text-6xl {
font-size: 3.75rem;
line-height: 1;
}
.text-base {
font-size: 1rem;
line-height: 1.5rem;
}
.text-lg {
font-size: 1.125rem;
line-height: 1.75rem;
}
.text-sm {
font-size: 0.875rem;
line-height: 1.25rem;
}
.text-xl {
font-size: 1.25rem;
line-height: 1.75rem;
}
.text-xs {
font-size: 0.75rem;
line-height: 1rem;
}
.font-bold {
font-weight: 700;
}
.font-medium {
font-weight: 500;
}
.font-normal {
font-weight: 400;
}
.font-semibold {
font-weight: 600;
}
.uppercase {
text-transform: uppercase;
}
.italic {
font-style: italic;
}
.not-italic {
font-style: normal;
}
.grid {
display: grid;
}
.grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media only screen and (max-width: 600px) {
.grid-cols-2 {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-3 {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
}
@media only screen and (max-width: 600px) {
.grid-cols-4 {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
}
.flex-row {
flex-direction: row;
}
.flex-col {
flex-direction: column;
}
.flex-wrap {
flex-wrap: wrap;
}
.items-center {
align-items: center;
}
.justify-start {
justify-content: flex-start;
}
.justify-end {
justify-content: flex-end;
}
.justify-center {
justify-content: center;
}
.justify-between {
justify-content: space-between;
}
.justify-items-start {
justify-items: start;
}
.gap-1 {
gap: 0.25rem;
}
.gap-2 {
gap: 0.5rem;
}
.gap-3 {
gap: 0.75rem;
}
.gap-4 {
gap: 1rem;
}
.gap-6 {
gap: 1.5rem;
}
.gap-8 {
gap: 2rem;
}
.gap-x-3 {
-moz-column-gap: 0.75rem;
column-gap: 0.75rem;
}
.gap-y-4 {
row-gap: 1rem;
}
.tl-entry-year {
width:81px;
font-weight: bold;
color:#797962;
position: absolute;
margin-top:-4px;
}
.tl-entry-year-dot {
float:right;
width:10px;
height:10px;
right:-5px;
top:3px;
position: relative;
border-radius: 50%;
background: #797962;
}
.tl-entry-year-dot:after {
content:"";
width:30px;
height:2px;
right:5px;
top:4px;
position: absolute;
background: #797962;
}
.tl-entry-wrapper {
border-left:3px solid #797962;
margin:0px;
margin-left:80px;
padding:5px 20px;
}
.tl-entry {
border-left:5px solid #797962;
background:#e5e9ec;
border-radius:0 5px 5px 0;
display:inline-block;
margin:0px;
margin-left:5px;
padding:0;
font-size:12px;
position: relative;
/*
background:#e5e2e0;
border-radius: 5px;
border: 4px solid #e6e3e1;
box-shadow: 4px 4px 3px 0px #d2d2d2;
outline: 2px solid #f2f0ed;
*/
}
.tl-entry:after {
content:"";
width: 25px;
height: 3px;
left: -31px;
top: 20px;
position: absolute;
background: #797962;
}
.tl-century {
}
.tl-entry-century {
padding:10px 0;
font-weight: bold;
color:#797962;
text-align: center;
border-bottom:1px solid #797962;
border-left:3px solid #797962;
margin-left:80px;
}
.tl-header {
font-size:40px;
color:#797962;
text-align: center;
}
.tl-entry-image {
display:inline-block;
margin-right: 2px;
height:50px;
}
.tl-entry-content {
display:inline-block;
vertical-align: top;
padding:5px 15px 5px 5px;
}
.tl-entry-date {
font-weight:bold;
font-size:10px;
}
.tl-entry-title {
}
.tl-entry-info {
color:#659c6d;
font-size:12px;
}
.pulsate-container {
position: relative;
}
.pulsate-circle {
width: 5px;
height: 5px;
background-color: #62bd19;
border-radius: 50%;
position: absolute;
top: 4px;
left: -8px;
}
.pulsate-ringring {
border: 2px solid #62bd1957;
-webkit-border-radius: 30px;
height: 15px;
width: 15px;
position: absolute;
left: -13px;
top: -1px;
-webkit-animation: pulsate 1s ease-out;
animation-iteration-count: 1;
-webkit-animation-iteration-count: infinite;
opacity: 0.0;
}
@-webkit-keyframes pulsate {
0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
50% {opacity: 1.0;}
100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;}
}
.place-action-wrapper {
text-align: center;
font-size: 0;
}
.place-li {
text-decoration: none;
color:#a7a785;
min-height:120px;
display: block;
background: #fff;
margin:5px 0;
max-width:600px;
border-radius: 5px;
transition: all .3s ease;
position: relative;
}
.place-li-has-status {
margin-top:100px;
}
.place-li-featured {
background:#f6fff9;
}
.place-li:hover {
background:#e9e2d7;
}
.place-li-controls {
height:38px;
font-size:0;
left:126px;
right:0;
position: absolute;
bottom:10px;
}
.place-li-control {
font-size:10px;
width:32%;
margin:0 .5%;
font-weight:bold;
text-align: center;
display: inline-block;
line-height: 28px;
text-decoration: none;
border-radius: 4px;
color:#aaa;
transition: background .3s ease;
}
.place-li:hover .place-li-control:hover {
background: #efefef;
background: #fff;
}
.place-li:hover .place-li-control {
background: #efefef;
}
.place-li-control-been {
color:#aaa;
}
.place-li-control-selected {
color:#49ab18;
}
.place-li-control-selected.place-li-control-subscribe {
color:#00b0ff;
}
.place-subscribe-icon {
width:17px;
height:17px;
vertical-align: middle;
display:inline-block;
background-image:url(/img/icons/icon_subscribe_bell.svg);
}
.place-li-control-selected .place-subscribe-icon {
background-image:url(/img/icons/icon_subscribe_bell_active.svg)
}
.place-like-icon {
width:17px;
height:17px;
vertical-align: middle;
display:inline-block;
background-image:url(/img/icons/icon_like.svg);
}
.place-li-control-selected .place-like-icon {
background-image:url(/img/icons/icon_like_active.svg)
}
.place-been-want-to-icon {
width:17px;
height:17px;
vertical-align: middle;
display:inline-block;
background-image:url(/img/icons/icon_been_want_to.svg);
}
.place-been-icon {
width:17px;
height:17px;
vertical-align: middle;
display:inline-block;
background-image:url(/img/icons/icon_been.svg);
}
.place-li-control-selected .place-been-icon {
background-image:url(/img/icons/icon_been_active.svg)
}
.place-like-icon,
.place-subscribe-icon,
.place-been-want-to-icon,
.place-been-icon {
display:block;
margin:2px auto 0 auto;
}
.place-li-events-tag {
border-radius: 2px;
padding:2px 8px;
font-size:12px;
background: #e7e5c7;
display: inline;
}
.place-li-upcoming-event-tag {
font-size:12px;
color:#257d95;
text-decoration: none;
overflow: hidden;
display: block;
height: 15px;
text-overflow: ellipsis;
white-space: pre;
/*
border-radius: 2px;
padding:2px 5px;
background: #a4bc98;
color:#fff;
text-decoration: none;
overflow: hidden;
display: block;
height: 15px;
text-overflow: ellipsis;
white-space: pre;
*/
}
.place-li-subtitle {
font-size:12px;
display: block;
text-decoration: none;
color:#888;
margin-bottom:4px;
}
.place-li .hours-tag {
margin:4px 2px 0 0;
display: block;
float:right;
background: #d7d5ad;
}
.place-li-status {
position: absolute;
background:#6e988e;
border-radius: 8px;
padding: 10px;
font-size:14px;
margin-bottom:12px;
color: #fff;
display:inline-block;
min-width:100px;
font-style: italic;
font-weight:bold;
left: 10px;
top: -65px;
}
.place-li-status:before {
content: "";
width: 0px;
height: 0px;
position: absolute;
border-left: 9px solid #6e988e;
border-right: 10px solid transparent;
border-top: 6px solid #6e988e;
border-bottom: 5px solid transparent;
left: 25px;
bottom: -10px;
}
.place-li-status-update-time {
font-size: 12px;
line-height: 24px;
color: #a8a29e;
float: right;
font-weight: bold;
margin-top: -33px;
padding:0px 4px;
border-radius: 3px 0 3px 0;
}
.place-li-tag {
background: #00000099;
border-radius: 5px 0 5px 0;
padding: 1px 7px 1px 1px;
color: #fff;
font-weight: bold;
font-size: 10px;
position: absolute;
left: 0px;
top: 0px;
}
.place-li-tag-bottom img {
width:20px;
height:20px;
margin-bottom:-5px;
display:inline-block;
}
.place-li-tag-bottom {
background: #00000099;
border-radius: 0 5px 0 5px;
padding: 1px 7px 1px 1px;
color: #fff;
font-weight: bold;
font-size: 10px;
position: absolute;
left: 0px;
bottom: 0px;
}
.place-li-title {
display: block;
text-decoration: none;
font-weight: bold;
font-size: 18px;
padding-top: 4px;
color: #5a76b8;
border-bottom: 1px solid #e7e7e7;
height: 29px;
overflow: hidden;
white-space: pre;
text-overflow: ellipsis;
}
.place-li-img {
border-radius: 5px 0 0 5px;
width:120px;
float:left;
margin-right:10px;
}
.share-intent-wrapper {
border-top:3px solid #e6e3e1;
margin:10px 0;
padding-top:5px;
text-align: center;
}
.share-intent-header {
font-size: 14px;
font-weight: bold;
margin-bottom: 11px;
}
.share-intent-icon {
width:28px;
display: inline-block;
padding:5px;
vertical-align: middle;
}
.share-intent-wrapper a {
text-decoration: none;
background:#e6e3e1;
line-height:28px;
height:28px;
display: inline-block;
margin:3px;
padding-right: 6px;
border-radius: 2px;
transition: background .2s ease;
color:#797962;
font-weight: bold;
}
.share-intent-wrapper a:hover {
background:#cdced5;
}
.external-link-wrapper {
display:inline-block;
text-align: center;
margin:10px 12px;
padding:10px;
background:#e6e3e1;
border-radius: 15px;
text-decoration: none;
width:120px;
transition: all .3s ease;
}
.external-link-wrapper:hover {
background:#688f6e;
}
.external-link-wrapper:hover .external-link-icon {
filter:invert(1);
}
.external-link-icon {
width:25px;
height:25px;
margin:0 auto;
transition: all .3s ease;
}
.external-link-label {
color:#000;
padding-top:5px;
display: block;
overflow: hidden;
text-overflow: ellipsis;
}
.popup-signup {
background-image:url(/img/sign-up-bg.svg);
max-width:953px;
margin:0 auto;
background-position: center;
background-size: cover;
border-radius: 22px;
}
.popup-signup-content {
text-align: center;
line-height: 28px;
font-size:20px;
}
.popup-signup-content strong{
color:#3a6aae;
}
.popup-signup-local {
width:48%;
float:left;
padding-bottom:20px;
}
.popup-signup-place {
width:48%;
float:right;
padding-bottom:20px;
}
.popup-signup-heading {
font-size: 50px;
color: #6b583c;
line-height: 58px;
}
#signin-popup .modal-container {
background: transparent;
}
.modal-container .modal-body.signup-modal-body {
overflow-y:visible;
box-shadow: 20px 20px 31px 0px #dfdfdf;
padding:0;
border-radius: 22px;
}
.modal-overlay {
background: #ffffff95 !important;
backdrop-filter: blur(5px);
}
@media only screen and (max-width: 500px) {
.signup-modal-body {
overflow-y:auto;
}
.popup-signup {
background:#ded8b7;
}
.popup-signup-heading {
font-size: 38px;
line-height: 48px;
}
.popup-signup-content {
line-height: 22px;
font-size:16px;
}
.popup-signup-local,
.popup-signup-place {
width:100%;
float:none;
}
}
body {
touch-action: pan-x pan-y;
}
#header-autocomplete {
padding:0px;
width:405px;
display:inline-block;
position:relative;
margin-left:100px;
float: right;
margin-top: 23px;
}
#header-search {
width:100%;
border:1px solid #777;
background:rgba(121, 134, 147, 0.18);
border-radius:14px;
padding: 8px 21px;
font-size: 20px;
display:block;
color:white;
}
#header-search:active,
#header-search:focus {
outline: none;
color:#292523;
background:#fff;
}
#autocomplete-results {
background:white;
border-radius:5px;
position:absolute;
margin-top:3px;
width:750px;
overflow:hidden;
z-index:300;
box-shadow:0 0 12px rgba(0,0,0,0.2);
}
@media only screen and (max-width: 1060px) {
#autocomplete-results {
width:600px;
}
}
.sac-sug {
padding:6px 5px;
display:block;
text-align:left;
text-decoration:none;
font-weight:bold;
color:#797962;
font-size:14px;
line-height:20px;
}
.sac-sug:hover {
background:#eee;
}
.sac-sug-info {
float:right;
font-size:12px;
font-weight:400;
line-height:20px;
color:#64748b;
font-weight:bold;
}
.sac-sug-type {
margin-right:5px;
width:20px;
height:20px;
display:inline-block;
vertical-align: top;
}
.sac-sug-type svg {
width:20px;
height:20px;
}
.sac-sug-active {
background:#fdf4c4;
}
@media only screen and (max-width: 600px) {
.sac-sug-info {
float:none;
padding-bottom:8px;
border-bottom:1px solid #eee;
display: block;
}
#header-autocomplete {
width:70%;
width:98%;
margin:1%;
float:none;
}
#autocomplete-results {
display: none;
width:100%;
height:calc(100% - 36px);
position: fixed;
left: 0;
border-radius: 0;
overflow: scroll;
}
h1 {
font-size:22px;
line-height: 25px;
margin:5px 0;
}
.card-king {
padding: 15px 9px;
background: #f2f0ed;
border: 1px solid #e6e3e1;
box-shadow: none;
outline: 0px solid #f2f0ed;
border-radius: 5px;
line-height: 16px;
margin: 2px;
}
}
#hamburger-link {
display:none;
}
.mobile-menu-wrapper {
display:inline-block;
}
.top-nav-wrapper {
padding:20px 0 75px 0;
background:#292523;
line-height: 15px;
/*
position:relative;
z-index:900
*/
}
.site-nav {
padding-top:20px;
text-align: center;
}
.logo-link {
display:block;
width:100%;
margin-top:20px;
}
.main-logo {
display:block;
margin:0 auto;
}
.main-menu-link {
position: relative;
display: inline-block;
outline: none;
color: #fff;
text-decoration: none;
font-size:16px;
letter-spacing:0px;
margin:0px 5px 0 5px;
padding-bottom:8px;
border-bottom:2px solid transparent;
transition:all .2s ease;
}
.main-menu-link:focus {
outline: none;
}
.main-menu-link:hover {
color:#292523;
border-color:#fff;
text-decoration:none;
}
.nav-selected {
border-color:rgba(255,255,255,.2);
}
.light-layout .nav-selected {
border-color:#B8B8B8;
}
.menu-devider {
display:none;
}
.menu-label {
display:none;
background:#1b6eff;
color:white;
position: absolute;
top:-16px;
left:-5px;
font-size:10px;
font-weight: 100;
padding:2px 5px;
border-radius: 2px;
letter-spacing: 0;
transform: rotate(-14deg) translate3d( 0, 0, 0);
}
@media only screen and (max-width: 600px) {
.top-nav-wrapper {
padding: 0;
background: #f5f5f4;
}
#header-search {
border-color:#e2dfdf
}
.site-nav {
display:none;
background:#fff;
position: fixed;
top:75px;
left:0;
right:0;
z-index: 999;
box-shadow: 0 0px 80px 0px #000;
}
.logo-link {
width:75px;
padding:10px;
float:left;
margin-top:0;
display:none;
}
.main-logo {
height:auto;
}
.mobile-menu-wrapper {
width:100%;
}
#hamburger-link {
float:right;
display:block;
height:75px;
text-transform: uppercase;
letter-spacing: 1px;
font-weight:100;
line-height: 75px;
font-size:20px;
color:#656565;
text-decoration: none !important;
display:none;
}
#hamburger-wrapper {
float:right;
width:60px;
height:55px;
padding-top:22px
}
.hamburger-line {
width:30px;
height:5px;
margin:4px auto;
background:#fff;
transition: transform .8s ease;
transition-property: transform, opacity;
}
.main-menu-link {
display:block;
border-color:transparent;
padding:20px 0;
color:#222;
transition: transform .8s ease;
transform:translateX(100px) scaleX(1.2);
}
.main-menu-link:hover {
color:#888;
}
.nav-selected {
transform:translateX(200px);
font-style: italic;
color:#888;
}
.mobile-menu-visible {
transform:translateX(0) scaleX(1);
opacity: 1;
}
.hamburger-menu-in .hamburger-line-1 {
transform:rotate(-45deg) translateY(6px);
transform-origin: center;
}
.hamburger-menu-in .hamburger-line-2 {
transform:rotate(45deg) translateY(-6px);
transform-origin: center;
}
.hamburger-menu-in .hamburger-line-3 {
opacity: 0;
}
.hp-video-banner {
width:140%;
margin-left:-20%;
max-width:140%;
}
.ig-img-wrapper {
width:100%;
float:none;
margin:0;
}
.ig-img-wrapper:nth-child(even) {
margin:0;
}
}
.hp-mobile-logo {
padding:20px 0;
width:90%;
margin:0 auto;
}
.main-menu-link {
position: relative;
display: inline-block;
outline: none;
color: #fff;
text-decoration: none;
font-size:14px;
letter-spacing:0px;
margin:0px 5px 0 5px;
padding-bottom:8px;
border-bottom:2px solid transparent;
transition:all .2s ease;
}
.main-menu-link:focus {
outline: none;
}
.main-menu-link:hover {
color:#292523;
border-color:#fff;
text-decoration:none;
}
.nav-selected {
border-color:rgba(255,255,255,.2);
}
.light-layout .nav-selected {
border-color:#B8B8B8;
}
.menu-devider {
display:none;
}
.menu-label {
display:none;
background:#1b6eff;
color:white;
position: absolute;
top:-16px;
left:-5px;
font-size:10px;
font-weight: 100;
padding:2px 5px;
border-radius: 2px;
letter-spacing: 0;
transform: rotate(-14deg) translate3d( 0, 0, 0);
}
.main-menu-link {
color:#f8f3d2;
font-size: 16px;
padding:8px;
border-radius:3px;
/* responsive */
margin:0px 0px 0 0px;
}
.main-menu-link-active,
.main-menu-link:hover {
color:#fff;
border-color:transparent;
}
.main-menu-element {
display: inline-block;
position: relative;
vertical-align:top;
}
.sub-menu {
transition:opacity .2s ease-out;
margin: 0px;
padding: 0;
background: #292523e5;
backdrop-filter:blur(5px);
position: absolute;
width: 250px;
border-radius: 0px;
overflow:hidden;
margin-left:-0px;
z-index: 2000;
}
.sub-menu-second-last {
margin-left:-30px;
}
.sub-menu-last {
margin-left:-123px;
}
.sub-menu li {
list-style-type: none;
margin:0px;
padding:0;
}
.main-menu-sub-link {
color:#f8f3d2;
display: block;
padding:8px 5px;
text-align: left;
font-size:13px;
letter-spacing: 0;
text-decoration:none;
}
.main-menu-has-sub {
margin-right: 30px;
border-radius:5px 0 0 0;
}
.main-menu-has-sub:after {
position: absolute;
transition: all .2s ease;
display: block;
content: " ";
white-space: pre;
bottom: 11px;
right: -20px;
width: 14px;
height: 14px;
bottom: -2px;
right: -23px;
width: 23px;
height: 33px;
background-size:14px 14px;
border-radius:0 5px 0 0;
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSIjYTdhNzg1IiBkPSJNMCA3LjMzbDIuODI5LTIuODMgOS4xNzUgOS4zMzkgOS4xNjctOS4zMzkgMi44MjkgMi44My0xMS45OTYgMTIuMTd6Ii8+PC9zdmc+);
background-position: center center;
background-repeat:no-repeat;
/*
filter: invert(65%) sepia(2%) saturate(3%) hue-rotate(345deg) brightness(94%) contrast(90%); */
}
.main-menu-link-active {
background:#3a3736;
}
.main-menu-link-active:after {
background-color:#3a3736;
}
.main-menu-sub-link:hover {
background:#292523;
text-decoration: none;
}
.main-menu-link + .sub-menu {
top:-1000px;
opacity: 0;
}
.sub-menu-in,
.sub-menu:hover,
.main-menu-link-active + .sub-menu {
top:60px;
opacity: 1;
}
@media only screen and (min-width: 600px) and (max-width:935px) {
.main-menu-link {
display:block;
margin:10px 0 0 0;
}
.main-menu-has-sub {
margin-right:30px;
}
.site-nav {
padding-top:0px;
margin-right: 0px;
text-align: center;
width: auto;
float: right;
}
.social {
right:70px;
}
.mobile-menu-wrapper {
width:100%;
}
.logo-link {
float: left;
width:auto;
}
#header-autocomplete {
float:left;
}
.top-nav-wrapper {
padding:20px 0 12px 0;
}
}
@media only screen and (min-width: 935px) {
.site-nav {
padding-top:0px;
float:right;
position: relative;
}
.logo-link {
display:inline;
width:auto;
margin-top:0;
}
.main-logo {
display:inline-block;
margin:0;
}
.main-menu-link {
margin:30px 30px 0 0px;
font-size:15px;
}
.main-menu-link:last-child {
margin-right:0;
}
.top-nav-wrapper {
padding:20px 0;
}
}
#top-man-nav {
height:50px;
width:100%;
background:#64864b;
position: relative;
}
@media only screen and (max-width: 600px) {
#top-man-nav {
height:auto;
}
}
.top-man-item {
height:50px;
line-height:50px;
color:white;
font-weight:bold;
padding:0 20px;
text-decoration:none;
display:inline-block;
transition:background .3s ease;
}
.top-man-item:hover {
background:rgba(255,255,255,0.1);
}
#bottom-main-nav {
display:none;
font-size:0px;
}
.bottom-nav-item {
text-align: center;
font-size:16px;
width:19.25%;
height:65px;
line-height:65px;
color:#fff;
display: inline-block;
vertical-align: top;
text-decoration: none;
font-family: 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;
}
.bottom-nav-item-selected {
font-weight: bold;
background:#455264;
}
.bottom-nav-sep {
height:26px;
margin-top:20px;
width:0%;
border-right:1px solid #4b6182;
display: inline-block;
}
.bottom-nav-list li {
}
.bottom-nav-link {
padding:12px 0;
display: block;
}
.bottom-nav-popup {
background: #eeeeeef5;
backdrop-filter:blur(5px);
width:100%;
height:calc(100% - 65px);
position: fixed;
z-index: 999;
bottom:65px;
left:0%;
padding:20px;
overflow-y: scroll;
box-shadow: 0 -5px 20px #959494;
display: none;
opacity: 0;
}
.bottom-nav-popup a {
color:#292523;
text-decoration: none;
}
@keyframes bottomMenuOpenAnimation {
0% {
opacity: 0;
transform: translate(0px, 500px) scale(0.1);
}
100% {
opacity: 1;
transform: translate(0px, 0px) scale(1);
}
}
@keyframes bottomMenuCloseAnimation {
0% {
opacity: 1;
transform: translate(0px, 0px) scale(1);
}
100% {
opacity: 0;
transform: translate(0px, 500px) scale(0.1);
}
}
@keyframes bottomMenuTransitionInAnimation {
0% {
opacity: 0;
transform: translate(0px, 100px) scale(0.5);
}
100% {
opacity: 1;
transform: translate(0px, 0px) scale(1);
}
}
@keyframes bottomMenuTransitionOutAnimation {
0% {
opacity: 1;
transform: translate(0px, 0px) rotateX(0deg);
}
100% {
opacity: 0;
transform: translate(100px, 100px) rotateX(60deg);
}
}
@media only screen and (max-width: 500px){
.table.table-scroll{display:block;overflow-x:auto;padding-bottom:.75rem;white-space:nowrap}
#top-man-nav {
}
.bottom-nav-header {
text-align: center;
border-bottom:1px solid #aaa;
}
.bottom-nav-popup-open {
opacity: 1;
display: block !important;
animation: bottomMenuOpenAnimation .5s 1;
animation-direction: alternate;
animation-timing-function: ease-out;
z-index: 998;
}
.bottom-nav-popup-close {
opacity: 0;
display: block !important;
animation: bottomMenuCloseAnimation .5s 1;
animation-direction: alternate;
animation-timing-function: ease-out;
z-index: 998;
}
.bottom-nav-popup-transition-out {
opacity: 1;
display: block !important;
animation: bottomMenuTransitionOutAnimation .5s 1;
animation-timing-function: ease-out;
z-index: 999;
}
.bottom-nav-popup-transition-in {
opacity: 1;
display: block !important;
animation: bottomMenuTransitionInAnimation .5s 1;
animation-timing-function: ease-out;
z-index: 998;
}
#bottom-main-nav {
display:block;
position: fixed;
bottom:0;
left:0;
width:100%;
height:65px;
background: #797962;
/* backdrop-filter:blur(5px); */
border-top:1px solid white;
z-index: 1000;
}
}
#svg-map-wrapper {
padding: 0px;
background: #f8f3d2;
}
#svg-map {
width:100%;
height:500px;
touch-action: none;
}
@media only screen and (min-height: 1100px) {
#svg-map {
height:700px;
}
}
#svg-map-controls {
margin-top:0px;
z-index: 100;
position: relative;
display:none;
}
#map-zoom-slider {
display: inline;
float:right;
}
#map-tooltip {
position: fixed;
z-index:1000;
display: none;
width:200px;
background: #fff;
background: #ffffff95;
backdrop-filter:blur(5px);
color:#403128;
border:0px solid #e9ebea;
box-shadow: 0 0 57px #00000078;
font-size:13px;
line-height: 15px;
border-radius: 15px;
}
#map-tooltip:after {
content:"";
position: absolute;
bottom:-5px;
right:-10px;
width:20px;
height:1px;
background: white;
transform: rotate(45deg);
}
#map-tooltip-tag {
position: absolute;
top:-12px;
right:-10px;
display: none;
}
#map-tooltip-title {
text-align: center;
font-size: 14px;
line-height: 18px;
font-weight: bold;
margin-top:10px;
}
#map-tooltip-desc {
padding:10px ;
font-size: 14px;
text-align: center;
}
#map-tooltip-desc img {
border-radius: 5px;
}
#map-tooltip .map-popup-btn {
display:none;
}
.map-tooltip-pin {
position: relative;
background:#e7e5e4;
background:#3586fb;
background:#6e988e;
border-radius: 8px;
width:100%;
padding: 10px;
font-size:14px;
margin:2px;
color: #fff;
display:inline-block;
font-style: italic;
font-weight:bold;
}
.map-tooltip-pin:before {
content: "";
width: 0px;
height: 0px;
position: absolute;
border-left: 9px solid #6e988e;
border-right: 10px solid transparent;
border-top: 6px solid #6e988e;
border-bottom: 5px solid transparent;
left: 25px;
bottom: -10px;
}
@media only screen and (max-width: 600px) {
#map-tooltip {
background: #ffffffdd;
width:100%;
height:auto;
left:0 !important;
top:0 !important;
right:0 !important;
bottom:auto !important;
overflow: hidden;
border-radius: 0;
padding:20px;
}
#map-tooltip img {
width:100px;
float:left;
margin-bottom: 10px;
}
#map-tooltip-title {
text-align: center;
float:right;
font-size: 16px;
line-height: 16px;
font-weight: bold;
margin-top:1px;
}
#map-tooltip-desc {
text-align: right;
}
#map-tooltip .map-popup-btn {
display:block;
margin-top:20px;
}
#svg-map,
#svg-map-container,
#svg-map-wrapper {
height:calc(100vh - 10%);
}
}
#svg-map-additional-layers-post {
opacity: 0;
transition: opacity 5s ease;
}
#svg-map-additional-layers-pre {
opacity: 0;
transition: opacity 2.5s ease;
}
.svg-map-additional-layers-loaded {
opacity: 1 !important;
}
.svg-status-msg {
font-family: sans-serif;
font-family: 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;
font-style: italic;
user-select: none;
fill: white;
font-weight: bold;
line-height: 1em;
/*
font-size:30px;
text-anchor: middle;
dominant-baseline: middle;
*/
}
.svg-status-ts {
font-family: sans-serif;
fill: white;
font-weight: bold;
}
.svg-status-box {
opacity: 0.9;
cursor: pointer;
animation: statusAnimation .5s 1;
animation-direction: alternate;
animation-timing-function: cubic-bezier( 0.39, 0.575, 0.565, 1 );
animation-timing-function: ease-out;
animation-duration: 0;
}
.svg-status-box:hover {
opacity: 1;
z-index:1000;
filter:saturate(2);
}
@keyframes statusAnimation {
0% {
opacity: 0;
transform: translate(-10px, 0px);
}
100% {
opacity: 0.9;
transform: translate(0px, 0px);
}
}
.svg-status-box-pointer {
opacity: 0.9;
cursor: pointer;
animation: statusAnimation .5s 1;
animation-duration: 0;
animation-direction: alternate;
animation-timing-function: ease-out;
}
.svg-event-is-live {
stroke: #fff;
stroke-width: 5px;
stroke-dasharray: 5, 16;
stroke-linejoin: round;
stroke-linecap:round;
animation: dash 1s linear;
animation-direction: alternate;
animation-iteration-count: infinite;
animation-duration: 14s !important;
}
.svg-trending-box {
opacity: 0.8;
cursor: pointer;
}
.svg-trending-box:hover {
opacity: 1;
animation: trendingAnimation 2s 1;
animation-direction: alternate;
animation-timing-function: cubic-bezier( 0.39, 0.575, 0.565, 1 );
}
@keyframes trendingAnimation {
0% {
transform: translate(0px, -1000px);
}
100% {
offset-distance: 100%;
transform: translate(0px, 0px);
}
}
.movie-showtime {
padding:30px 10px 0 10px;
width:14.28%;
min-height:360px;
vertical-align: top;
display:inline-block;
position: relative;
font-size:12px;
background:#006a88;
background-position: center;
background-size: cover;
filter:sepia(0.6);
background-blend-mode: multiply;
box-shadow: inset 0 0 41px black;
text-align: center;
transition: all .3s ease;
display: inline-flex;
flex-direction: column;
justify-content: center;
}
.movie-showtime:hover {
filter:sepia(0);
box-shadow: inset 0 0 0px black;
background-blend-mode: darken;
}
.movie-poster {
width:40%;
margin:0 auto 20px auto;
box-shadow: 0 0 20px black;
transition: all .3s ease;
}
.movie-showtime:hover .movie-poster{
transform: scale(1.2);
}
.movie-showtime-name {
text-align: center;
display:block;
color:#fff;
text-decoration: none;
font-weight: bold;
font-size:15px;
/*
height:2em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
*/
}
.movie-showtime-genre {
color: #fff;
text-decoration: none;
font-weight: bold;
font-size: 12px;
position: absolute;
top: 0px;
left: 0px;
padding: 2px 3px;
background: #0000004a;
text-transform: lowercase;
width: 100%;
height: 16px;
}
.movie-showtime-mpaa {
color:#fff;
text-decoration: none;
font-weight: bold;
font-size:12px;
position: absolute;
right:0px;
top:0px;
padding:2px 3px;
}
.movie-showtime-time {
font-size: 14px;
padding-right: 2px;
line-height: 16px;
color:white;
text-shadow: 2px 2px 7px black, -2px -2px 9px black;
}
.movie-genre_drama {
background-color:#142f6f;
}
.movie-genre_horror {
background-color:#555;
}
.movie-genre_action {
background-color:#ac0000;
}
.movie-genre_comedy {
background-color:#ffe036;
}
.movie-genre_musical {
background-color:#9b3ee8;
}
.movie-genre_family {
background-color:#d3ff00;
}
.movie-genre_animation {
background-color:#ff5f00;
}
.movie-genre_special-events {
background-color:#3d6b29;
}
.movie-genre_romance {
background-color:#ac0090;
}
.movie-genre_family .movie-showtime-name,
.movie-genre_family .movie-showtime-time,
.movie-genre_comedy .movie-showtime-name,
.movie-genre_comedy .movie-showtime-time {
color:white;
}
@media only screen and (max-width: 1024px) {
.movie-showtime {
width:33.33%;
min-height: 116px;
padding-bottom:10px;
}
}
@media only screen and (max-width: 700px) {
.movie-showtime {
width:50%;
min-height: 116px;
padding-bottom:10px;
}
}
@media only screen and (max-width: 500px) {
.movie-showtime {
width:100%;
min-height: auto;
padding-bottom:10px;
text-align: center;
}
}
#ots-game-wrapper .word {
margin:2px;
padding:2px;
border:1px solid #d9d3ae;
display: inline-block;
}
#ots-game-wrapper .letters {
touch-action: none;
margin:50px auto;
}
#letter-dragging,
#ots-game-wrapper .letter {
text-align: center;
display: inline-block;
width:8%;
max-width:70px;
aspect-ratio: 1 / 1;
background: #d9d3ae;
border:3px solid #d9d3ae;
margin:2px;
font-size:28px;
font-weight: bold;
user-select: none;
border-radius: 8px;
position: relative;
display: inline-flex;
flex-direction: column;
justify-content: center;
}
#ots-game-wrapper .letters .letter {
cursor: pointer;
}
#ots-game-wrapper .letter-points {
position: absolute;
right:3px;
bottom:3px;
font-size:10px;
line-height: 10px;
color:#8d8787;
}
#ots-game-wrapper .correct {
background: #41c200 !important;
color:white;
}
#ots-game-wrapper .is-dragging .letter-under {
transform: scale(1.8);
background:#0e8eff;
box-shadow: 0 0 30px -10px #000;
transition: all .1s ease;
position: relative;
z-index: 100;
}
#ots-game-wrapper .correct.letter-under {
transform: scale(1) !important;
box-shadow: none !important;
}
#ots-game-wrapper .letter-space {
background: #eee;
}
#ots-game-wrapper .letter-vowel {
border-color:#588a7a;
}
#letter-dragging {
opacity: 1;
background: #0e8eff;
color:#fff;
position: absolute;
pointer-events: none;
z-index: 200;
}
#ots-game-wrapper .game-category {
text-align: center;
margin:0px 0;
}
#game-points-bar-wrapper {
width:65%;
background: #f6fff3;
border-radius: 20px;
border:1px solid #edeec4;
height:30px;
position: relative;
margin:50px auto 20px auto;
}
#game-points-bar-progress {
background: #9fe498;
height:100%;
width:0%;
position: absolute;
transition: all .8s ease-out;
}
#game-points-bar-content {
line-height: 30px;
height:100%;
left:20px;
position: absolute;
font-weight: bold;
font-size:12px;
text-transform: uppercase;
}
#game-points-bar-content-right {
line-height: 30px;
height:100%;
right:20px;
position: absolute;
font-weight: bold;
font-size:12px;
text-transform: uppercase;
}
#game-points-bar-progress-levels {
position: absolute;
width:100%;
top:-28px;
font-weight: bold;
font-size:12px;
color:#444;
}
#game-points-bar-progress-level-1 {
position: absolute;
display: inline-block;
left:10%;
}
#game-points-bar-progress-level-2 {
position: absolute;
display: inline-block;
left:30%;
}
#game-points-bar-progress-level-3 {
position: absolute;
display: inline-block;
left:50%;
}
#game-points-bar-progress-level-4 {
position: absolute;
display: inline-block;
left:70%;
}
#game-points-bar-progress-level-5 {
position: absolute;
display: inline-block;
left:86%;
}
#game-points-bar-progress-level-1,
#game-points-bar-progress-level-2,
#game-points-bar-progress-level-3,
#game-points-bar-progress-level-4,
#game-points-bar-progress-level-5 {
color: #f6fff3;
background: #acacac;
padding:2px 5px;
border-radius: 2px;
transition: all .8s ease;
}
#game-points-bar-progress-level-1:after,
#game-points-bar-progress-level-2:after,
#game-points-bar-progress-level-3:after,
#game-points-bar-progress-level-4:after,
#game-points-bar-progress-level-5:after {
content:"";
display: block;
height:14px;
width:1px;
background: #acacac;
left:0;
position: absolute;
}
#ots-game-wrapper .progress-level-passed {
background: #9ce196 !important;
}
#ots-game-wrapper .points-loss {
opacity: 0;
position: fixed;
font-size:200px;
color:#ffa700;
text-align: center;
width:100%;
height:100%;
z-index: 1000;
font-weight: bold;
top:30%;
left:0;
animation: .5s linear 0s game-points-loss;
}
#ots-game-wrapper .points-gain {
opacity: 0;
position: fixed;
font-size:100px;
color:#41c200;
text-align: center;
width:100%;
height:100%;
z-index: 1000;
font-weight: bold;
top:30%;
left:0;
animation: .5s linear 0s game-points-gain;
}
@keyframes game-points-loss {
from {
transform: translateY(0);
opacity: 1;
}
to {
opacity: 0;
transform: translateY(5px) scale(0.3);
}
}
@keyframes game-points-gain {
from {
transform: translateY(0);
opacity: 1;
}
to {
opacity: 0;
transform: translateY(-5px) scale(1.3);
}
}
@media only screen and (max-width: 800px) {
#ots-game-wrapper .letter-space {
border-color:#e6e6e6;
}
#game-points-bar-wrapper {
width:96%;
border-radius: 5px;
}
#ots-game-wrapper .letter {
font-size:16px;
border-radius: 2px;
border-width:2px;
margin:1px;
}
#ots-game-wrapper .letter-points {
right:0;
bottom:0;
}
#ots-game-wrapper .letters .letter {
width:12%;
}
#letter-dragging {
width:15%;
}
}
.mobile-header {
display: none;
}
@media only screen and (max-width: 600px){
.mobile-header {
display: block;
}
.top-nav-wrapper {
display: none;
}
.main-header-alert {
background:#87a777;
padding:8px 0;
display: flex;
justify-content: space-around;
font-size:12px;
color:#fff;
text-decoration: none;
font-weight:bold;
}
.main-header {
width:100%;
top:0;
background: #3a3631;
padding:3px 0;
display: flex;
justify-content: space-around;
}
.main-header.header-pinned {
position: fixed;
z-index: 1000;
}
.header-menu-link {
margin-top: 27px;
display: block;
width: 50px;
height: 50px;
padding: 0px;
}
.header-pinned .header-menu-link {
margin-top: 0px;
}
.header-account-link {
font-weight: bold;
color:#d9d3ae;
color:#89a87a;
text-decoration: none;
height:26px;
margin-top:27px;
line-height:26px;
padding:0px 9px;
border-radius: 20px;
transition:all .4s ease;
font-size:12px;
}
.header-account-link:hover {
background: #eee;
}
.header-pinned .header-account-link {
margin-top:12px;
background: #89a87a;
color:#fff;
}
.main-nav {
z-index: 1000;
width:100%;
top:118px;
height:calc(100% - 118px);
background: #fff;
background: #3a3631;
position: fixed;
overflow-y: scroll;
overflow-x: hidden;
transition: all .4s ease;
opacity: 0;
transform: translateX(-100vw);
}
.main-nav.header-pinned {
top:46px;
height:calc(100% - 46px);
}
.main-nav.menu-in {
display:block;
opacity: 1;
transform: translateX(0px);
}
.main-sub-menu {
padding-left:40px;
border-bottom:2px solid #a5a89d;
background:#d9d3ae;
height:0;
overflow: hidden;
transition: transform .4s ease, opacity .4s ease;
transform-origin: center;
opacity: 0;
transform: translateY(-100px) scale(0.8);
}
.sub-menu-in {
display:block;
height:auto;
opacity: 1;
transform: translateY(0px) scale(1);
}
.main-sub-menu li {
margin:0;
padding:0;
}
.main-nav-menu-sub-link {
text-decoration: none;
display: block;
width:100%;
padding:15px 0;
color:#3a3631;
}
.main-nav-element {
width:100%;
text-align: left;
}
.main-nav-link {
width:100%;
text-align: left;
padding:20px;
display: block;
border-bottom:2px solid #4d3f3b;
color:#d9d3ae;
text-decoration: none;
}
.main-header-logo path {
transition: 0.5s;
}
.main-header-logo #short-building {
transition: 0.6s;
}
.main-header-logo #short-building {
transition: 0.8s;
}
.main-header-logo {
height:85px;
width:150px;
object-fit: cover;
}
.header-pinned .main-header-logo {
height:40px;
width:100px;
}
.header-pinned .main-header-logo #Alexandria {
opacity: 0;
}
.header-pinned .main-header-logo #Out_in {
opacity: 0;
}
.header-pinned .main-header-logo #Old_Town {
opacity: 0;
}
.header-pinned .main-header-logo #short-building {
transform:translateX(-202px) translateY(8px) scale(1.7);
}
.header-pinned .main-header-logo #tall-building {
transform:translateX(-202px) translateY(8px) scale(1.7);
}
.header-pinned-content {
margin-top:100px;
}
#header-search-mobile {
border:1px solid #777;
background:rgba(121, 134, 147, 0.18);
border-radius:14px;
padding: 8px 21px;
font-size: 20px;
display:block;
color:white;
width:96%;
margin:0 2%;
border-radius:2px;
border-color:#555;
font-size:16px;
}
#header-search-mobile:active,
#header-search-mobile:focus {
outline: none;
color:#292523;
background:#fff;
}
#autocomplete-results-mobile {
background:white;
border-radius:5px;
position:absolute;
margin-top:3px;
width:600px;
overflow:hidden;
z-index:300;
box-shadow:0 0 12px rgba(0,0,0,0.2);
}
#header-autocomplete-mobile {
width:70%;
width:98%;
margin:1%;
float:none;
}
#autocomplete-results-mobile {
display: none;
width:100%;
height:calc(100% - 36px);
position: fixed;
left: 0;
border-radius: 0;
overflow: scroll;
}
}
.carousel-item-wrapper {
display: flex;
overflow-y: hidden;
overflow-x: auto;
scroll-snap-type: x mandatory;
max-width: 95%;
margin:0 auto;
}
.carousel-item {
min-width: 40%;
width: 80vw;
scroll-snap-align: start;
background: white;
margin: 5px 10px;
border-radius: 9px;
position: relative;
overflow: hidden;
}
.carousel-image-item {
line-height: 0;
}
.carousel-item-large {
min-width: 80%;
}
.carousel-item-img {
width:100%;
height:150px;
object-fit: cover;
object-position: top center;
border-radius: 9px 9px 0 0;
text-decoration: none;
}
.carousel-item-img.carousel-item-tall {
height:300px;
}
.carousel-item-content {
padding:10px;
}
.carousel-item-title {
width:100%;
font-weight: bold;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.carousel-item-tags {
position: absolute;
left:10px;
}
.carousel-btn-wrapper {
display: none;
max-width: 95%;
margin:0 auto;
}
#footer-history-wrapper .carousel-item {
box-shadow: 1px 1px 8px -3px #000;
color:#292523;
background: #ffffffab;
}
@media only screen and (min-width: 900px) {
.carousel-item {
min-width: 200px;
max-width:290px;
box-shadow: 1px 1px 8px -3px #aaa;
}
#footer-history-wrapper .carousel-item {
box-shadow: 1px 1px 8px -3px #000;
color:#292523;
background: #ffffffab;
}
.carousel-item-large {
min-width: 300px;
}
.carousel-item-wrapper::-webkit-scrollbar {
display: none;
}
.carousel-item-wrapper {
-ms-overflow-style: none;
scrollbar-width: none;
}
.carousel-btn-wrapper {
display: block;
height:1px;
position: relative;
width:100%;
}
.carousel-scroll-btn {
position: absolute;
text-decoration: none;
background: #ffffff95;
backdrop-filter: blur(5px);
border: 1px solid #ffffff95;
box-shadow: 0px 0px 4px -2px #000;
color:#000;
border-radius: 50%;
display: block;
width:45px;
height:45px;
line-height: 45px;
z-index: 100;
top:67px;
text-align: center;
left:-26px;
transform: scale(0.9);
transition: transform .3s ease;
}
.carousel-story-format .carousel-scroll-btn {
top:145px;
}
.carousel-btn-wrapper-tall .carousel-scroll-btn {
top:100px;
}
.carousel-scroll-btn:hover {
transform: scale(1);
}
.carousel-scroll-btn-right {
right:-16px;
left:auto;
}
}
@media only screen and (min-width: 1340px) {
.carousel-scroll-btn {
left:-26px;
}
.carousel-scroll-btn-right {
right:-26px;
left:auto;
}
}
#info-popup-bg {
display:none;
top: 0;
left: 0;
width:100%;
height:100%;
position:fixed;
background: #ffffff00;
backdrop-filter: blur(0px);
z-index:9999;
transform-origin: top center;
transition: all .3s ease-out;
}
#info-popup-bg.popup-open {
opacity: 1;
backdrop-filter: blur(5px);
transform: translateY(0px) scale(1);
background:#ffffff95;
}
#info-popup {
display:none;
width:90%;
height:90%;
position:fixed;
left:5%;
top:5%;
background:rgba(255,255,255,0);
border:2px solid #eee;
border-radius:15px;
z-index:10000;
margin: 0 auto; /* Only centers horizontally not vertically! */
left: 0;
right: 0;
max-width: 1000px;
overflow-x:hidden;
overflow-y:scroll;
transform: translateY(20px);
opacity: 0;
transform-origin: top center;
transition: all .3s ease-out;
}
#info-popup.popup-open {
opacity: 1;
transform: translateY(0px) scale(1);
background:rgba(255,255,255,0.8);
}
#info-popup-header {
background: #3a3631;
padding:4px 0;
color:white;
transition: all .3s ease;
position: relative;
}
#info-popup-close {
position: absolute;
right: 8px;
top: 9px;
color: white;
text-decoration: none;
font-weight: bold;
font-family: sans-serif;
background: rgba(255,255,255,0.2);
width: 34px;
height: 34px;
border-radius: 20px;
text-align: center;
line-height: 34px;
}
#info-popup-title {
width: 100%;
font-weight: bold;
font-weight: 16px;
text-align: center;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
#info-popup-subtitle {
width: 100%;
font-weight: bold;
font-size:12px;
overflow: hidden;
text-align: center;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
#info-popup-body {
padding:20px;
}
.info-popup-loading-placeholder-half {
background:#ddd;
width:100%;
height:300px;
}
.info-popup-loading-placeholder {
background:#ddd;
width:100%;
height:150px;
}