/*
Theme Name: Septera CHILD
Theme URI: http://www.cryoutcreations.eu/wordpress-themes/septera
Description: A free, responsive theme for business and personal websites, with premium features and amazing customization options? Septera is a multipurpose theme, with a clean and elegant design, stylish typography and a great set of powerful yet easy to use customizer settings. SEO, Woocommerce, Google Fonts, wide and boxed layouts, masonry, social icons, translatable, RTL and an editable landing page with slider, featured icon blocks, image boxes and text areas.  Now with full Gutenberg support. * DEMO: http://demos.cryoutcreations.eu/wp/septera/ *
Author: Cryout Creations
Author URI: http://www.cryoutcreations.eu
Version: 1.5.0
Template:     septera
License: GNU General Public License v3.0
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Tags: one-column, two-columns, three-columns, right-sidebar, left-sidebar, grid-layout, custom-background, custom-colors, custom-header, flexible-header, custom-menu, featured-image-header, featured-images, front-page-post-form, full-width-template, footer-widgets, microformats, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready, news, photography, portfolio
Text Domain: septerachild

Septera WordPress Theme - Copyright 2017-18, Cryout Creations - http://www.cryoutcreations.eu
This theme, like WordPress, is licensed under the GPL.
*/
/*#access a:hover >span, .current_page_item a >span*/
html, body, div, span, 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, 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,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    font-family: Oswald !important;
}

.force-left {
    padding-left: 3px !important;
}
.force-right {
    padding-right: 3px !important;
}

.force-left-margin {
    margin-left: 3px !important;
}
.force-left-margin-zero {
    margin-left: 0 !important;
}

.hint_text {
    color: #8b8b8b !important;
    font-size: 16px !important;
    font-weight: 300 !important;
}

#currency_box {
    background: black;
    justify-items: center;
    justify-content: center;
    display: flex;
}

#currency_text {
    color: white;
    font-family: "Oswald";
    margin: auto;
    display: flex;
}

.currency_input {
    background: white !important;
    color: black !important;
    border-radius: 0 !important;
    border-color: black !important;
    border-width: 2px !important;
}

.currency_div {
    display: flex;
    margin-left: auto;
    flex-direction: row;
}

li:not(.current_page_item) >a >span {
    border-style: none;
}

.hidden_hr {
    border: none;
}
li.menu-item {
    width: auto !important;
}

.popup_wrapper {
    display: none;
}
.popup_overflow {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(0 0 0 / 70%);
    z-index: 999;
}
.popup_container {
    position: fixed;
    top: 70px;
    left: calc(50% - 20px);
    transform: translate(-50%, 0);
    width: 960px;
    margin: 0 20px;
    max-width: calc(100% - 40px);
    min-height: 200px;
    max-height: calc(100vh - 100px);
    background: #fff;
    z-index: 999;
}
.popup_content {
    display: block;
    max-height: calc(100vh - 170px);
    overflow: auto;
    padding: 23px;
    color: #464646;
}
.popup_header {
    font-size: 32px;
    color: #fff;
    background: #5c4b3f;
    padding: 5px 23px;
}
.ajax_popup_content.popup_flex {
    display: flex;
    justify-content: space-between;
}
.image_popup {
    max-width: calc(50% - 10px);
    display: inline-block;
    vertical-align: top;
}
.ajax_popup_content p {
    font-size: 18px;
    margin-bottom: 15px;
}
.ajax_popup_content input,
.ajax_popup_content textarea,
.ajax_popup_content select 
{
    background: #f5f5f5;
    border-radius: 5px;
    border: 1px solid #eaeaea;
    font-size: 18px;
    line-height: 1;
    padding: 9px 10px;
    font-weight: 300;
    width: 100%;
    vertical-align: top;
}
.ajax_popup_content select {
    padding: 8px 10px;
    color: #8b8b8b;
}
.label_hour span {
    vertical-align: middle;
    line-height: 1;
    margin-top: 13px;
    display: block;
    font-size: 18px;
    color: #8b8b8b;
    text-align: right;
}
.ajax_popup_content textarea {
    min-height: 135px;
}
input[type="radio"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}
.vertical-center-title {
    display: flex;
    align-items: center;
}
.checkmark {
    position: absolute;
    top: 9px;
    left: 3px;
    height: 15px;
    width: 15px;
    border-radius: 50%;
    border: 1px solid #c2c2c2;
}
/* On mouse-over, add a grey background color */
.radio_container:hover input ~ .checkmark {
    background-color: #ccc;
}

/* Style the checkmark/indicator */
.checkmark:after {
    content:'';
    position: absolute;
    display: none;
    left: -1px;
    top: -1px;
    width: 15px;
    height: 15px;
    border: 5px solid #5c4b3f;
    border-radius: 50%;
}

/* Show the checkmark when checked */
.radio_container input:checked ~ .checkmark:after {
    display: block;
}
.radio_container label {
    padding-left: 20px;
    position: relative;
    z-index: 5;
    font-size: 18px;
    color: #8b8b8b;
}
.ajax_popup_content form .row > div {
    padding: 0 3px;
    margin-bottom: 6px;
}
.ajax_popup_content form .row {
    margin: 0 -6px;
}
.ajax_popup_content form > .row > div {
    padding: 0 6px;
}
button.submit_ajax {
    width: 100%;
    background: #9b9b9b;
    color: #fff;
    font-size: 18px;
    font-weight: 300;
    line-height: 1;
    border-radius: 3px;
    padding: 13px 15px;
    vertical-align: top;
    display: block;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
button.submit_ajax:hover {
    background: #5C4B3F;
}
form p {
    display: none;
}
.ajax_popup_content form.reservation textarea {
    min-height: 190px;
}



 /*GOOGLE CAPTCHA*/
 
#googlecaptcha_wrapper,
#googlecaptcha_wrapper_footer,
.googlecaptcha_wrapper
{
    position: absolute;
    top: 16px;
    right: -2px;
    opacity: 0.0001;
    visibility: hidden;
    -webkit-transition: transform 0.25s ease-in-out, opacity 0.25s ease-in-out, visibility 0.25s ease-in-out;
    -moz-transition: transform 0.25s ease-in-out, opacity 0.25s ease-in-out, visibility 0.25s ease-in-out;
    -ms-transition: transform 0.25s ease-in-out, opacity 0.25s ease-in-out, visibility 0.25s ease-in-out;
    -o-transition: transform 0.25s ease-in-out, opacity 0.25s ease-in-out, visibility 0.25s ease-in-out;
    transition: transform 0.25s ease-in-out, opacity 0.25s ease-in-out, visibility 0.25s ease-in-out;
    -webkit-transform: translate(0,-150%);
    -moz-transform: translate(0,-150%);
    -ms-transform: translate(0,-150%);
    -o-transform: translate(0,-150%);
    transform: translate(0,-150%);
}

#googlecaptcha_wrapper.active,
#googlecaptcha_wrapper_footer.active,
.googlecaptcha_wrapper.active
{
    opacity: 0.9999;
    visibility: visible;
    -webkit-transform: translate(0,-110px);
    -moz-transform: translate(0,-110px);
    -ms-transform: translate(0,-110px);
    -o-transform: translate(0,-110px);
    transform: translate(0,-110px);
}

#googlecaptcha_wrapper:after,
#googlecaptcha_wrapper_footer:after,
.googlecaptcha_wrapper:after
{
    content: "";
    position: absolute;
    bottom: -6px;
    left: 57%;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 9px 11px 0 11px;
    border-color: #d3d3d3 transparent transparent transparent;
}
  
#l-notify {
    position: fixed;
    bottom: 0;
    z-index: 5;
    left: 0;
    width: 100%;
    text-align: center;
    background-color: rgb(92 75 63 / 90%);
    padding: 15px;
    color: #fff;
    font-size: 2rem;
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translate(0,100%);
    -moz-transform: translate(0,100%);
    -ms-transform: translate(0,100%);
    -o-transform: translate(0,100%);
    transform: translate(0,100%);
    -webkit-transition: transform .25s, opacity .25s, visibility .25s;
    -moz-transition: transform .25s, opacity .25s, visibility .25s;
    -ms-transition: transform .25s, opacity .25s, visibility .25s;
    -o-transition: transform .25s, opacity .25s, visibility .25s;
    transition: transform .25s, opacity .25s, visibility .25s;
}
  
#l-notify.active {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translate(0,0);
    -moz-transform: translate(0,0);
    -ms-transform: translate(0,0);
    -o-transform: translate(0,0);
    transform: translate(0,0);
}
  
/*FORM ERROR*/

span.error {
    max-height: 0px !important;
    max-width: 0px !important;
    overflow: hidden;
    display: inline-block !important;
    border: 0px !important;
}
form em {
    position: absolute;
    top: 3px;
    right: 1px;
    z-index: 100;
    font-style: normal;
}
form em:before {
    content: "\f06a";
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* background: #ffffff; */
    color: red;
    font-weight: 700;
    font-size: 22px;
    width: 20px;
    height: 20px;
    display: inline-block;
    text-align: center;
    line-height: 20px;
    border-radius: 100%;
    cursor: pointer;
    margin: 10px 10px 10px 0px;
}
form em:after {
    content: "";
    width: 15px;
    height: 15px;
    display: inline-block;
    background: #fff;
    border-radius: 100%;
    position: absolute;
    top: 12px;
    right: 14px;
    z-index: -1;
}
span.error.hover-active {
    max-height: none !important;
    max-width: 300px !important;
    min-width: 185px;
    white-space: nowrap;
    position: absolute;
    top: 7px;
    right: 40px;
    background: #ededed;
    padding: 6px 10px;
    line-height: 15px;
    border: 0px;
    z-index: 100;
    display: inline-block !important;
    font-size: 13px;
    color: #f90106;
    font-weight: 700;
    overflow: visible;
}
form em.hover-active {
    width: 90%;
    text-align: right;
}
span.error.hover-active:after {
    content: "";
    display: inline-block;
    width: 6px;
    height: 16px;
    background: url(images/static/hover_error_form.png);
    position: absolute;
    top: 5px;
    right: -6px;
}
div#ui-datepicker-div {
    font-size: 14px;
}
.date_wrapper {
    position: relative;
}
.date_wrapper:after {
    content: "\f073";
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: absolute;
    top: 15px;
    right: 14px;
    color: #8b8b8b;
    font-size: 16px;
}
.remove_margin {
    margin-bottom: 0px !important;
    margin-top: 0px !important;
}
.hour_wrapper {
    padding-right: 6px !important;
}
button {
    color: #cccccc;
    font-size: 20px;
    font-weight: 400;
    border: 2px solid #ffffff;
    background: transparent;
    padding: 9px 35px;
}
span.close_modal {
    float: right;
    cursor: pointer;
}


nav#access {
    position: relative;
}
.header_badge {
    position: absolute;
    bottom: -105px;
    left: -200px;
    z-index: 10;
}

hr {
    margin-top: 1rem;
    margin-bottom: 1rem;
    border: 0;
    border-top: 2px solid rgb(0 0 0 / 0.5);
    border-bottom: 2px solid rgb(252 252 252 / 0.2);
}


@media (max-width: 1250px) {
    .header_badge {
        top: -140px;
        left: 0;
        bottom: auto;
    }
}
@media (max-width: 800px) {
    .header_badge {
        top: -122px;
        bottom: auto;
        left: calc(50% - 100px);
    }
}
@media (max-width: 768px) {
    .popup_header {
        font-size: 22px;
    }
    .ajax_popup_content h5 {
        font-size: 22px;
    }
    .ajax_popup_content img {
        width: 100%;
        height: auto;
        float: none;
        margin: 10px 0;
    }
    .ajax_popup_content form > .row > div {
        margin-bottom: 0;
    }
    .label_hour span {
        text-align: left;
    }
}

@media (max-width: 576px) {
    .hour_wrapper {
        padding: 0 0 0 7px !important;
    }
    .hour_wrapper .row div {
        width: 33%;
    }
    .radio_container {
        width: 48% !important;
    }
}