@keyframes checked-anim {
    50% {
        width: 105%;
        height: 105%;
    }
    100% {
        width: 100%;
        height: 100%;
        border-radius: 0;
    }
}

@keyframes not-checked-anim {
    0% {
        width: 50vmin;
        height: 50vmin;
    }
}

#menu h3 {
    display: none;
}

#menu h4 {
    display: none;
}

#menu a {
    margin: 75px 0 -55px 0;
    color: #ff6800;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.8;
    text-decoration: none;
    text-transform: none;
    display: none;
}

#menu a:focus {
    display: block;
    color: #333;
    background-color: #eee;
    transition: all .5s;
}

#menu form {
    display: none;
    width: 80%;
}

#trigger,
#burger,
#burger:before,
#burger:after {
    position: absolute;
    top: .3rem;
    left: .6rem;
    font-size: 1.5rem;
    color: #ff6800;
    cursor: pointer;
    z-index: 1;
}

#menu {
    position: absolute;
    margin: 0;
    padding: 0;
    width: 3.2rem;
    height: 3.2rem;
    background-color: #fffaf5;
    border-bottom-right-radius: 75%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
    animation: not-checked-anim .2s both;
    transition: .2s;
    -moz-transition: .2s;
    -webkit-transition: .2s;
    -o-transition: .2s;
}

#menu-toggle:checked+#trigger+#burger+#menu {
    animation: checked-anim .5s ease both;
    box-shadow: none;
}

#menu-toggle:checked+#trigger~#menu>form div h3,
#menu-toggle:checked+#trigger~#menu>form div div h4,
#menu-toggle:checked+#trigger~#menu>form {
    display: block;
}

#menu-toggle:not(:checked),
#menu-toggle:checked {
    display: none;
}

/*------------------ datetime ------------------*/

input[placeholder],
[placeholder],
[placeholder]:focus {
    color: #642d00;
}

.gj-datepicker-bootstrap [role=right-icon] button {
    color: #fff;
    background-color: #ced4da;
}

.gj-datepicker-bootstrap [role=right-icon] button:hover {
    color: #fff;
    border: 1px solid #ff6800;
    background-color: #ff6800;
}

.btn-outline-secondary:not(:disabled):not(.disabled):active {
    color: #fff;
    border: 1px solid #ff6800;
    background-color: #ff6800;
}

.gj-modal {
    background-color: #ff6800;
}

.gj-picker-bootstrap div[role="navigator"] {
    color: #ff6800;
}

.gj-picker-bootstrap tr[role="week-days"] {
    color: #999;
}

/*------------------ PREFERENCES ------------------*/

#f-bath,
#f-smoking,
#f-tv,
#f-utensils,
#f-wifi,
#f-paw {
    display: none;
}

#f-bath-bt,
#f-smoking-bt,
#f-tv-bt,
#f-utensils-bt,
#f-wifi-bt,
#f-paw-bt {
    cursor: pointer;
    width: 100%;
    padding: 1.2rem 0 .8rem 0;
    text-align: center;
    color: #fffaf5;
    border-radius: .2rem;
    background: rgba(255, 102, 0, .15);
    transition: .2s;
    -moz-transition: .2s;
    -webkit-transition: .2s;
    -o-transition: .2s;
}

#f-bath-bt svg,
#f-smoking-bt svg,
#f-tv-bt svg,
#f-utensils-bt svg,
#f-wifi-bt svg,
#f-paw-bt svg {
    width: 2rem;
    height: 2rem;
    font-size: 1.5rem;
}

#f-bath-bt:hover,
#f-smoking-bt:hover,
#f-tv-bt:hover,
#f-utensils-bt:hover,
#f-wifi-bt:hover,
#f-paw-bt:hover {
    opacity: .6;
}

#f-bath:checked+#f-bath-bt,
#f-smoking:checked+#f-smoking-bt,
#f-tv:checked+#f-tv-bt,
#f-utensils:checked+#f-utensils-bt,
#f-wifi:checked+#f-wifi-bt,
#f-paw:checked+#f-paw-bt {
    color: #fffaf5;
    background: rgba(255, 102, 0, .6);
    transition: .2s;
    -moz-transition: .2s;
    -webkit-transition: .2s;
    -o-transition: .2s;
}

.f-gutter {
    margin-bottom: .8rem;
}

.f-select {
    margin-bottom: 1.2rem;
}

.tag-pd {
    padding-right: 10px;
    padding-left: 10px;
}

/*------------------ ok ------------------*/

.okay {
    cursor: pointer;
    padding: .2rem 0 .1rem 0;
    text-align: center;
    align-items: center;
    font-weight: 500;
    font-size: 1.2rem;
    color: #fffaf5;
    border: 2px solid transparent;
    border-radius: .2rem;
    background: #ff6800;
}

.okay:hover {
    color: #ff6800;
    border: 2px solid #ff6800;
    background: transparent;
    transition: .3s;
    -moz-transition: .3s;
    -webkit-transition: .3s;
    -o-transition: .3s;
}

/* .okay svg{
    margin-right: .2rem;
    font-size: 1.2rem;
} */

.okay label {
    display: block;
    cursor: pointer;
    margin-bottom: 0;
}

/*------------------ search ------------------*/

/* #burger svg {
    transition: .3s;
    -moz-transition: .3s;
    -webkit-transition: .3s;
    -o-transition: .3s;
} */

/*------------------------------------ max-width: 575.98px ------------------------------------*/

@media (max-width: 575.98px) {
        #menu h3 {
            margin: 1.5rem 0 1.5rem 0;
            padding-bottom: .5rem;
        }
    #f-bath-bt,
    #f-smoking-bt,
    #f-tv-bt,
    #f-utensils-bt,
    #f-wifi-bt,
    #f-paw-bt {
        padding: 1rem 0 .6rem 0;
    }
    #f-bath-bt svg,
    #f-smoking-bt svg,
    #f-tv-bt svg,
    #f-utensils-bt svg,
    #f-wifi-bt svg,
    #f-paw-bt svg {
        width: 1.5rem;
        height: 1.5rem;
        font-size: 1.5rem;
    }
    #f-bath-bt:hover,
    #f-smoking-bt:hover,
    #f-tv-bt:hover,
    #f-utensils-bt:hover,
    #f-wifi-bt:hover,
    #f-paw-bt:hover {
        opacity: 1;
    }
    .tag-pd {
        padding-right: .2rem;
        padding-left: .2rem;
    }
    .tag-pd-10 {
        padding-right: 10px;
        padding-left: 10px;
    }
    .f-gutter {
        margin-bottom: .2rem;
    }
    .f-select {
        margin-bottom: 1rem;
    }
}

/*------------------------------------ max-width: 320.98px ------------------------------------*/

@media (max-width: 320.98px) {
    #menu h3 {
        margin: 1.2rem 0 1.5rem 0;
        padding-bottom: .5rem;
        font-size: 1.5rem;
    }
    #f-bath-bt,
    #f-smoking-bt,
    #f-tv-bt,
    #f-utensils-bt,
    #f-wifi-bt,
    #f-paw-bt {
        padding: .8rem 0 .4rem 0;
    }
    #f-bath-bt svg,
    #f-smoking-bt svg,
    #f-tv-bt svg,
    #f-utensils-bt svg,
    #f-wifi-bt svg,
    #f-paw-bt svg {
        width: 1.5rem;
        height: 1.5rem;
        font-size: 1rem;
    }
    .f-gutter {
        margin-bottom: .1rem;
    }
    .f-select {
        margin-bottom: .8rem;
    }
}