@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam:wght@300;400&family=Old+Standard+TT:ital,wght@0,400;0,700;1,400&display=swap');
:root {
    --main-color: #005862;
    --text: #556b62;
    --gold: #d09604;
    --dark-gold: #b47f0d;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Be Vietnam', sans-serif;
    color: var(--text);
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Old Standard TT', serif;
}

h1 {
    font-size: 50px;
    font-weight: 700;
}

a {
    text-decoration: none;
}

.gold {
    color: #d09604;
}

.dark-gold {
    color: #b47f0d;
}

.btn-xlg {
    padding: 1rem 3rem;
    border-radius: .2rem;
    font-size: 1.3rem;
}

.btn-outline-primary {
    border-color: var(--gold);
    box-shadow: 0 0 20px rgba(235, 207, 167, 0.4);
    color: white;
    font-weight: 600;
}

.btn-outline-primary:hover {
    background: var(--gold);
    border-color: var(--dark-gold);
}
.main-banner {
    display: flex;
    justify-content: center;
    align-items: center;
    width:100%;
    height: 350px;
    background:transparent center no-repeat;
    background-size: cover;
    margin-bottom: 60px;
}
#mainBanner.main-banner {
    height: 70vh;
}

/* Navigation menu */

.navbar>.container-fluid {
    align-items: initial;
    position: relative;
}

.navbar {
    transition: all 0.3s ease;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 20;
    width: 100%;
}

.navbar>.container-fluid>* {
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.navbar.fix {
    position: fixed;
    background: var(--main-color);
    animation: navbar 0.3s ease;
}

.navbar-brand {
    margin-right: 0;
    padding-right: 1rem;
}

.navbar-brand img {
    height: 100%;
    padding: 0.5rem 0;
}

.navbar-nav, .navbar-nav>li>a {
    height: 100%;
}

.navbar, .navbar .nav-item>a, footer, footer a {
    color: #fff;
}

.navbar-expand-lg .navbar-nav .nav-link {
    font-weight: 600;
    letter-spacing: 1px;
    padding-top: 1rem;
    position: relative;
}

.navbar-expand-lg .navbar-nav .nav-link:before {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--gold);
    transition: width 0.3s ease-out;
}

.navbar-expand-lg .navbar-nav .nav-link:hover:before {
    width: 100%;
}

nav .navbar-nav .nav-item.active>a.nav-link {
    color: #d09604;
    border-bottom: 1px solid #d09604;
}

.navbar-brand img {
    max-height: 60px;
}

.btn span {
    transition: all 0.3s ease;
    transform: translateX(0px);
    display: inline-block;
}

.btn:hover span {
    transform: translateX(10px);
}

a.small-link {
    color: #d79639;
}

.btn-link.collapsed {
    color: #999;
}

.btn-link {
    color: var(--dark-gold);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: bold;
    text-decoration: none;
}

.btn-link:hover {
    color: var(--gold);
}

.btn-secondary {
    background: var(--gold);
    border: 1px solid var(--dark-gold);
}

.btn-secondary:hover {
    background: rgba(208, 150, 4, .8);
    border: 1px solid #d09604;
    box-shadow: none;
}

.btn-secondary:not(:disabled):not(.disabled).active, .btn-secondary:not(:disabled):not(.disabled):active, .show>.btn-secondary.dropdown-toggle, .btn-secondary.focus, .btn-secondary:focus {
    border: 3px solid #d09604;
    background: rgba(226, 186, 90, .5);
}

a.small-link i {
    transition: all 0.3s ease;
}

a.small-link:hover i {
    padding-left: 10px;
}

#calls {
    position: fixed;
    bottom: 15px;
    right: 15px;
    z-index: 20;
}

#calls>a>img {
    max-height: 64px;
    padding-left: 1rem;
}

#mainBanner {
    width: 100%;
    height: 800px;
    position: relative;
    z-index: 1;
    color: #fff;
}

#mainBanner .overlay {
    position: absolute;
    z-index: 5;
    top: 0;
    left: 0;
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: url('../img/subtle-bg.png'), rgba(14, 61, 66, 0.5) bottom left no-repeat;
    background-size: cover;
}

#mainBanner h2 {
    font-weight: 300;
    font-size:50px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
    margin-bottom:2rem;
}

#about {
    position: relative;
    z-index: 2;
}

#about .img-ab {
    position: relative;
    background: url('../img/subtle-bg.png'), var(--main-color) bottom center no-repeat;
    background-size: cover;
    width: calc(100% - 85px);
    height: 100%;
    top: -35px;
}

#about .img-ab img {
    width: 100%;
    position: relative;
    top: -65px;
    left: 85px;
    opacity: 0;
    --animate-duration: 0.5s;
}

/* --- Home Apartamente ----*/

.title {
    margin-bottom: 3rem;
    margin-top: 3rem;
    position: relative;
}

.hero {
    text-align: right;
    font-size: 100px;
    font-weight: 700;
    line-height: 1;
    font-family: 'Old Standard TT', serif;
    color: var(--gold);
}

.hero sup {
    font-weight: 300;
    font-size: 0.4em;
    top: -1em;
}

.hero h6 {
    color: var(--text);
}

#featured h4 {
    font-weight: 700;
    color: #3a4845;
    position: relative;
}

#featured h4::before {
    position: absolute;
    top: 13px;
    left: 0;
    width: 80px;
    height: 2px;
    background: var(--gold);
    content: "";
}

#featured h4, #featured p {
    padding-left: 110px;
}

#featured .pic {
    display: block;
    width: 100%;
    overflow: hidden;
    margin-bottom: 1.5rem;
}

#featured .pic img {
    transition: all 0.3s ease;
    overflow: hidden;
    width: 100%;
    height: 330px;
    object-fit: cover;
}

#featured a:hover .pic>img {
    transform: scale(1.1);
}

.features {
    margin-bottom: 3rem;
}

.features span {
    padding-left: 25px;
    padding-right: 15px;
    background: left center no-repeat;
    background-size: 16px;
    color: #999;
}
.features span.etaj {
    background-image: url('../img/icon-etaj.png');
}
.features span.camere {
    background-image: url('../img/icon-camere.png');
}

.features span.bai {
    background-image: url('../img/icon-baie.png');
}

.features span.spatiu {
    background-image: url('../img/icon-spatiu-low.png');
}

/* --- Home Arhitectura ----*/

#arhitectura {
    background: url('../img/calitei.jpg') bottom center no-repeat;
    background-size: cover;
    margin-top: 3rem;
    position: relative;
    z-index: 1;
}

#arhitectura .text-box {
    width: 500px;
    max-width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 80px 50px;
    margin-bottom: -100px;
    margin-top: 150px;
    color: #fff;
    /* background: #9f8054; */
    background: url('../img/subtle-bg.png'), var(--gold) bottom left no-repeat;
    position: relative;
    overflow: hidden;
    float: right;
}

.pulse {
    position: absolute;
    z-index: 20;
    display: block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(255, 248, 229, 0.85);
    cursor: pointer;
    box-shadow: 0 0 0 rgba(255, 255, 255, 0.5);
    animation: pulse 2s infinite;
    transition: all 0.3s ease;
}

.pulse:hover {
    transform: scale(1.2);
}

.pulse.front {
    bottom: calc(100vw * 364 / 1920);
    left: 30%;
}

.pulse.window {
    bottom: calc(100vw * 260 / 1920);
    left: 38.5%;
}

.pulse.base {
    bottom: calc(100vw * 100 / 1920);
    left: 20%;
}

#arhitectura .popover {
    max-width: 330px;
}

/* --- Home Contact ----*/

#quick-contact {
    padding: 3rem 0;
    margin: 3rem 0;
}

.flexColumn {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}

.flexColumn h1, .flexColumn h2, .flexColumn h6 {
    font-weight: 700;
}

.flexColumn h6 {
    color: var(--gold);
    text-transform: uppercase;
}

.btn-flex {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: var(--main-color);
    color: white;
    border-radius: 3px;
    border: none;
    transition: all 0.3s ease;
    padding: 2em 0;
}

.btn-flex:hover {
    background: #004249;
}

.btn-flex:hover span {
    animation: ring .5s ease;
}

.btn-flex span {
    font-size: 3em;
    line-height: 1;
    margin-bottom: 10px;
}

/* --- Home Beneficii ----*/

#benefits {
    padding: 150px 0 6em;
    width: 100%;
    background: url('../img/subtle-bg.png') bottom left no-repeat;
    background-size: cover;
}

#benefitsSlider {
    position: absolute;
    width: calc(150% + 200px);
    height: auto;
    left: 50%;
    bottom: calc(-2rem - 15px);
    background: white;
    border: 1px solid rgba(180, 127, 13, 0.3);
    padding: 0 55px;
}

#benefits h1 {
    font-weight: 700;
    margin-bottom: 3rem;
}

#benefits .item {
    padding: 15px 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    margin: 15px;
    text-align: left;
}

#benefits .item span {
    font-size: 4rem;
    line-height: 1;
}

#benefits .btn.btn-link {
    margin-top: 1rem;
    padding-left: 0;
}
.listSide {
    padding-top:3rem;
}
.listSide h3 {
    border-bottom: 1px solid var(--gold);
}

/* --- Home Parcari ----*/

#parking {
    background:#F7F8F8;
    padding:6rem 0;
}

.parkingBox {
    background: #fff;
    border: 1px solid #e2eef1;
    padding: 30px;
    border-radius: 3px;
    box-shadow: 0 17px 13px 0 rgba(25,44,75,.02);
    display: block;
}
.parkingBox > *, #commercial * {
    --bs-gutter-x : 3rem;
}
.parkingBox img {
    object-fit: cover;
    min-height: 380px;
    width: 100%;
    border-radius: 3px;
}
/* --- Home Spatii Comerciale ----*/
#commercial {
    padding:6rem 0 1rem;
}
#commercial .imgBlocks {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
}

#commercial .imgBlocks > a {
    margin:15px 0;
    height: 175px;
    border-radius: 3px;
    overflow: hidden;
    width:80%;
    position: relative;
    z-index: 1;
    transition:all 0.3s ease;
    box-shadow: 0 0 10px 4px rgba(31,66,135,.1);
    background:bottom center no-repeat;
    background-size: cover;
}
#commercial .imgBlocks:hover > a {
    opacity: 0.3;
}
#commercial .imgBlocks > a:nth-child(2) {
    margin-right: 20%;
}
#commercial .imgBlocks > a:hover {
    height:350px;
    margin:-72px 0 -73px 0;
    width:100%;
    z-index: 2;
    opacity: 1 !important;
}
#commercial .imgBlocks > a:first-child:hover {
    margin:0 0 -145px;
}
#commercial .imgBlocks > a:last-child:hover {
    margin:-145px 0 0;
}


#commercial .imgBlocks img {
    object-fit: cover;
    width:100%;
}
/* --- List Apartamente ----*/

.content.container-fluid {
    margin-top: 70px;
}

.apBox {
    border: 1px solid #eee;
    border-radius: 3px;
    display: block;
    background: white;
    padding: 15px;
    height: 100%;
}
.apBox:hover {
    border-color: var(--gold);
}
.apBox, .apBox > img {
    transition:all 0.3s ease;
}
.apBox:hover > img {
    transform: scale(0.9);
}
#featured .apBox h4::before {
    width:30px;
    transition: all 0.3s ease;
}
#featured .apBox:hover h4::before {
    width:15px;
}
#featured .apBox h4 {
    margin-top:1.5rem;
    padding-left: 45px;
    transition: all 0.3s ease;
}
#featured .apBox:hover h4 {
    color:var(--gold);
    padding-left: 30px;
}
#featured .apBox .features {
    margin-bottom: 1rem;
    padding-left: 45px;
}
.listSide #featured > div {
    margin-top:0.5em;
    margin-bottom:0.5em;
}
.apBox .features span {
    display: inline-block;
}
footer {
    margin-top: 3rem;
    background: #244148;
    padding: 3rem 0;
}

footer .logo {
    max-height: 150px;
}

/* --- Detail Apartament ----*/

.apartament .slideshow {
    padding: 0;
}

.apartament .slider {
    width: 100%;
}

.apartament .slider img {
    object-position: center;
    object-fit: cover;
    width: 100%;
    height: 100%;
}
.apartament .content {
    padding-left: 45px;
}
.apartament .thumbnail {
    position: relative;
    display: flex;
    align-items: center;
    border:1px solid #e9e9e9;
}
.apartament .plan {
    display: block;
    padding: 15px 5px;
}
.apartament .VR {
    width:64px;
    height: 64px;
    background:url('../img/vr-white.png') center no-repeat;
    background-size: 60%;
    border-radius: 50%;
    padding:5px;
    background-color:var(--gold);
    position: absolute;
    bottom:15px;
    left:15px;
    z-index: 2;
    display: block;
    content:"";
}
.suprafete {
    margin-left: 30px;
    max-width: calc(100% - 30px);
}
.suprafete tr td:last-child  {
    text-align: right;
}
.floorPlan {
    width:calc(100% + 42px);
    text-align: center;
    margin:60px 0 60px -30px;
    background: url('../img/subtle-bg.png'), var(--main-color) bottom left no-repeat;
    background-size: cover;
    padding:60px 0;
    position: relative;
}
.floorPlan svg {
    object-position: center center;
    object-fit: contain;
    width: 100%;
    height: calc(100% - 120px);
    position: absolute;
    top:60px;
    left: 0;
    z-index: 3;
}
.floorPlan img {
    object-position: center center;
    object-fit: contain;
    max-width: 100%;
}
.similare {
    display: inline-block;
    margin-right: 15px;
}
.floorPlan *[id^='ap'] {
    fill: rgba(0, 0, 0, 0.7);
    opacity: 1;
}
.ap1 #ap1, .ap2 #ap2, .ap3 #ap3, .ap4 #ap4, .ap5 #ap5,
.ap6 #ap6, .ap7 #ap7, .ap8 #ap8 {
    fill:transparent;
}       

/* --- Beneficii ----*/
#mainBanner.main-banner .slider {
    width:100%;
}
.main-banner h1 {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
}
.detail .icon {
    font-size: 200px;
    border:1px solid var(--gold);
    padding:60px 0;
    text-align: center;
    line-height: 1;
    color:#ddd;

}
.detail .txt > div {
    padding: 25px 60px;
    border: 1px solid #e1e1e1;
    background: #ffffff;
    margin: 60px 0 60px -35px;
}
.detail .row:nth-child(even) .txt > div {
    margin-right:-35px;
    margin-left: 0;
}
.detail > .row > div {
    opacity: 0;
}
.detail > .row > div[class *='animate'] {
    opacity:1;
}
.beneficii .detail > .row {
    align-items: center;
}
.detail > .row > div {
    position: relative;
}
.detail .txt {
    z-index: 2;
}
.beneficii .main-banner {
    background-image:url('../img/banners/benefits.jpg');
}

/* --- Localizare ----*/
#map {
    width:100%;
    height: 100%;
    overflow: hidden;
}
.localizare .listSide {
    padding-left: 30px;
    font-size: 0.8em;
}
.localizare .listSide h3 {
    margin:30px 0 15px;
}
.localizare .listSide a {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex:0 50%;
    padding: 15px 15px 0;
    color:#999;
    position: relative;
    transition:all 0.3s ease;
}
.localizare .listSide a:hover,
.localizare .listSide a:focus{
    color:var(--gold);
}
.localizare .listSide a:after {
    content:"";
    display: block;
    width: calc(100% - 30px);
    height: 1px;
    border-bottom: 2px dotted #ccc;
    z-index: -1;
    bottom:2px;
    position: absolute;
}
.localizare .listSide a > *{
    background:#fff;
}
.localizare .listSide a > div:last-child {
    min-width: 117px;
    text-align: right;
}
/* module ovverrides */
#quickContact input.error {
    color:red;
    border-color: red;
}
.navbar-toggler {
    padding:0 1rem;
    background:var(--gold);
}
.grecaptcha-badge {
    right:-300px !important;
}
.slider, .slick-slider, .slick-list, .slick-track, .slick-slide {
    height: 100%;
}

.slick-slide {
    display: block;
    background-size: cover;
    background-position: center center;
}

#benefits .slick-prev::before, #benefits .slick-next::before {
    font-family: "fontello";
    font-size: 3rem;
    line-height: 1;
    background: none;
    color: black;
    padding: 6px 15px;
    transition: all 0.3s ease;
}

#benefits .slick-prev, #benefits .slick-next {
    width: auto;
    height: auto;
    top: calc(50% + 6px - 1.5rem);
}

#benefits .slick-prev {
    left: 1em;
}

#benefits .slick-prev::before {
    content: '\f100';
}

#benefits .slick-next {
    right: 1em;
}

#benefits .slick-next::before {
    content: '\f101';
}
.leaflet-marker-icon.selected {
    animation: selected 1s infinite ease-in;
}
.leaflet-marker-icon#sungate {
    animation: sungate 2s infinite ease-in;
}

.floorSelect {
    background-size: cover;
    padding: 0;
    position: fixed;
    height: calc(100vh - 86px);
    top:86px;
    left: 0;
    margin-right:15px;
}

.floorSelect img {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% - 15px);
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 1;
}

.floorSelect svg {
    object-position: center center;
    object-fit: cover;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 3;
}

svg .st0 {
    opacity: 0;
    fill: #E6D300;
    animation-name: highlight;
    animation-duration: 1.2s;
    animation-fill-mode: none;
    animation-timing-function: ease-out;
}

svg .st0:hover {
    opacity: 0.35;
    cursor: pointer;
}
svg .st0.selected {
    pointer-events: none;
    opacity: 0.25;
    cursor:default;
    fill:#005862;
}

@media (max-width:1400px) {
    #about .col-xl-5.offset-xl-1  {
        margin-left: 3.333%;
        width: 46.667%;
        padding-top:2rem;
    }
    #about .img-ab img {
        top:-50px;
        left: 50px;   
    }
    #benefits .txt {
        align-self: flex-start;
    }
    #arhitectura .text-box {
        padding: 60px 50px;
    }
}

@media (max-width:1200px) {

    #featured .pic img {
        height: 290px;
    }
    #benefitsSlider {
        position: relative;
        width: 950px;
        left: 0;
    }
    #arhitectura .text-box {
        padding: 50px;
    }
    .flexColumn > * {
        margin-bottom: 1rem;
    }
    #quick-contact .btn-flex {
        flex-direction: row;
        padding:0;
        margin-top:2rem;
    }
    #quick-contact .btn-flex div {
        font-size:1.5em;
    }
    .beneficii .icon {
        font-size: 175px;
    }
    .localizare .floorSelect {
        height: 50vh;
        position: static;
        width: 100%;
        padding: 0;
        margin: 0;
    }
}

@media (max-width:992px) {
    .navbar {
        background:var(--main-color);
    }
    .navbar > .container-fluid > * {
       border:none;
    }
    .navbar-nav {
        font-size: 1.4rem;
        border-top:1px solid rgba(255,255,255,0.3);
        margin-top:0.5rem;
    }
    .navbar-nav a {
        border-bottom: 1px dashed rgba(255,255,255,0.3);
    }

    #mainBanner h2 { 
        font-size:42px;
    }
    #about .col-xl-5.offset-xl-1  {
        margin-left: 0;
        width: 100%;
    }
    .hero {
        font-size: 82px;
    }
    #featured h4::before {
        width:60px;
    }
    #featured h4, #featured p {
        padding-left: 90px;
    }
    #featured .pic img {
        height: 220px;
    }
    .pulse.front {
        bottom: 306px;
        left: calc( 100vw / 2 - 192px);
    }
    .pulse.window {
        bottom: 171px;
        left: calc( 100vw / 2 - 117px);
    }
    .pulse.base {
        left: calc( 100vw / 2 - 304px)
    }
    #benefitsSlider {
        width: 696px;
        bottom: -5rem;
        padding:0 15px;
    }
    #benefitsSlider .item {
        padding: 0px 7px;
    }
    #benefits h1 {
        margin-bottom: 1rem;
    }
    #benefits .btn.btn-link {
        margin-top: 0;
    }
    .floorSelect {
        height: 33vh;
        position: static;
        width: 100%;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        
    }
    .apartamente .floorSelect {
        background: url('../img/etaj.jpg') bottom center no-repeat;
        position: relative;
        top:0;
        color:#fff;
    }
    .apartamente .floorSelect > *{
        position: relative;
        z-index: 2;
    }
    .apartamente .floorSelect::before {
        width:100%;
        height: 100%;
        background:rgba(0,0,0,0.6);
        content:"";
        position: absolute;
        top:0;
        left: 0;
    }
    .floorSelect select {
        max-width: 400px;
    }
    .localizare .floorSelect {
        height: 50vh;
    }
    .apartament .content {
        padding-right: var(--bs-gutter-x,.75rem);
        padding-left: var(--bs-gutter-x,.75rem);
    }
    .suprafete {
        margin:30px 0;
        max-width:100%;
    }
    .beneficii .txt > div {
        margin: 30px 0 !important;
    }
    .beneficii .icon {
        font-size: 60px;
        padding:30px 0;
        margin-top:30px;
    }
    .beneficii .detail > .row {
        align-items: flex-start;
    }

    .beneficii .icon:after, .beneficii .icon:before {
        left: 100%;
        top: 50%;
        border: solid transparent;
        content: "";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
    }
    
    .beneficii .icon:after {
        border-color: rgba(136, 183, 213, 0);
        border-left-color: var(--gold);
        border-width: 7px;
        margin-top: -7px;
    }
    #mainBanner.main-banner {
        height: 400px;
    }
    #commercial .imgBlocks > a:first-child,
    #commercial .imgBlocks > a:last-child {
        display: none;
    }
    #commercial .imgBlocks > a {
        margin:0;
        margin-bottom: 1rem;
        pointer-events: none;
        width:100%;
        height: 250px;
    }
    #commercial .imgBlocks > a:nth-child(2) {
        margin-right: 0;
    }
}

@media (max-width:768px) {
    #benefitsSlider {
        width:515px;
        bottom:0;
        margin-bottom: 1rem;
    }
    .pulse {
        display: none;
    }
    #arhitectura .text-box {
        width: auto;
        margin-bottom:-70px;
        padding:30px 40px;
    }
    .hero {
        display: none;
    }
    .beneficii .icon {
        padding: 15px 0;
    }
    .beneficii .icon, .beneficii .icon::after {
        border:none;
    }
    .beneficii .icon::after {
        width:40%;
        height: 2px;
        background:var(--gold);
        z-index: -1;
        left:30%;
        bottom:46%;
        top:auto;
    }
    .beneficii .icon > span {
        background:#fff;
    }
    .localizare .listSide a {
        flex-basis: 100%;
    }
    .parkingBox > *, #commercial * {
        --bs-gutter-x: 1,5rem;
      }
}

@media (max-width:576px) {
    h1, #quick-contact h2 {
        font-size:36px;
    }
    #mainBanner h2 {
        font-size: 40px;
    }
    #benefitsSlider {
        width:100%;
    }
    .detail .txt > div {
        padding:30px;
    }
    #commercial .imgBlocks > a {
        height:175px;
    }
}

@keyframes highlight {
    25% {
        opacity: 0;
    }
    70% {
        opacity: 0.35;
    }
    100% {
        opacity: 0;
    }
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 234, 156, 0.4);
    }
    70% {
        box-shadow: 0 0 0 20px rgba(253, 243, 205, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
}
@keyframes ring {
    0% {}
    33% {
        transform: rotate(-20deg);
    }
    66% {
        transform: rotate(20deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

@keyframes navbar {
    0% {
        top: -100px;
    }
    100% {
        top: 0;
    }
}
@keyframes selected {
    0% {
        margin-top: -33px;
        
    }
    50% {
        margin-top: -43px;
    }
}
@keyframes sungate {
    0% {
        width: 32px;
        height:33px; 
        margin-left:-16px;
        margin-top:-33px; 
    }
    50% {
        width: 36px;
        height:36px;
        margin-top:-36px;
        margin-left:-18px;
    }
}