header{
    position: fixed;
    top: 2.5%;
    right: 2.9%;
    display: flex;
    justify-content: space-between;
    z-index: 1000;
    width: 90.7%;
    height: 62px;
    min-height: 5em;
}

header .logo-container{
    height: 100%;
}

header .logo{
    height: 100%;
    width: auto;
    display: block;
}

header .buttons{
    display: flex;
    justify-content: flex-end;
    width: 100%;
    height: 100%;
}

header .buttons > a{
    height: 100%;
}

header .section-title{
    height: 100%;
    margin-right: 3%;
    padding: 0 1.5em;
    float: right;
    background-color: #ed1550;
    color: #ffde00;
    cursor: pointer;
    -webkit-transition: all ease 300ms;
    transition: all ease 300ms;
    position: relative;
}

header .buttons a{
    margin-right: 3%;
}

header .section-title.active{
    background-color: #ffde00;
    color: #232323;
}

header .section-title div{
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    letter-spacing: 1px;
}

header .section-title div:after{
    visibility: hidden;
    opacity: 0;
    content: '';
    position: absolute;
    bottom: -0.3em;
    left: 0;
    z-index: 1;
    width: 30%;
    height: 0.16em;
    background-color: #232323;
    -webkit-transition: opacity 300ms ease;
    transition: opacity 300ms ease;
}

header .section-title.active div:after{
    width: 100%;
    visibility: visible;
    opacity: 1;
}

header .section-title:hover.active div:after{
    animation: underline-reverse 600ms linear 0ms infinite alternate;
}

header .section-title:hover div:after{
    visibility: visible;
    opacity: 1;
    animation: underline 600ms linear 0ms infinite alternate;
}

header .section-title:hover{
    background-color: #ffde00;
    color: #232323;
}

@keyframes underline {
    0% {
        width: 30%;
    }
    100% {
        width: 100%;
    }
}

@keyframes underline-reverse {
    0% {
        width: 100%;
    }
    100% {
        width: 30%;
    }
}

header .languages{
    position: relative;
    height: 100%;
    overflow: hidden;
    border: 0.7em solid #ffde00;
    cursor: pointer;
}

.main-header .languages ul {
    height: 82.9%;
    background-color: #ffde00;
}

.main-header .languages ul>:first-child{

}

header .languages li{
    visibility: visible;
    opacity: 1;
    position: relative;
    top: 50%;
    z-index: 1;
    height: auto;
    padding: 0 0.3em;
    background-color: #ffde00;
    color: #2f2f2f;
    text-transform: uppercase;
    text-align: center;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transition: opacity 300ms ease;
    transition: opacity 300ms ease;
    font-size: 3em;
    font-family: 'FabrikaMtExtra-expandedBold';
    letter-spacing: 1px;
}

header .languages li.active{
    visibility: hidden;
    opacity: 0;
    height: 0;
}

header .languages ul:after{
    content: '';
    width: 100%;
}

header .progress-bar{
    position: absolute;
    bottom: 0;
    z-index: 1;
    width: 100%;
    height: 17.1%;
}

header .progress-bar:after{
    content: '';
    background: url("../images/progress-bar.png");
    width: 100%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

header .languages:hover .progress-bar::after {
    animation: progress-bar 250ms linear 0ms infinite normal;
}

@keyframes progress-bar {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 100% 0;
    }
}


/*Side Menu*/

.main-menu{
    position: fixed;
    top: 0;
    left: 0;
    min-width: 50px;
    width: 4.4%;
    z-index: 2000;
    height: 100%;
    cursor: pointer;
    -webkit-transition: width 300ms ease;
    transition: width 300ms ease;
    background-color: #ffde00;
}

/*LOADING SCREEN*/
.loading-screen{
    z-index: -10;
    width: 0;
    height: 0;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
}

.loading-screen span{
    position: absolute;
    opacity: 0;
    z-index: -10;
    height: 0;
    width: 0;
    overflow: hidden;
}

.main-header .logo,
.main-header .buttons>:nth-child(1),
.main-header .buttons>:nth-child(2),
.main-header .buttons>:nth-child(3){
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease;
}

.right-buttons .instagram{
    -webkit-transition: height 300ms, opacity 500ms ease 750ms, transform 500ms ease 750ms !important;
    transition: height 300ms, opacity 500ms ease 750ms, transform 500ms ease 750ms !important;
}

.right-buttons .booking{
    -webkit-transition: height 300ms, opacity 500ms ease 900ms, transform 500ms ease 900ms !important;
    transition: height 300ms, opacity 500ms ease 900ms, transform 500ms ease 900ms !important;
}

.main-header .logo.pre-animation,
.main-header .buttons>:nth-child(1).pre-animation,
.main-header .buttons>:nth-child(2).pre-animation,
.main-header .buttons>:nth-child(3).pre-animation{
    -webkit-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    transform: translateY(-100%);
    opacity: 0;
}

.right-buttons .instagram.pre-animation,
.right-buttons .booking.pre-animation{
    -webkit-transform: translateY(100%);
    -ms-transform: translateY(100%);
    transform: translateY(100%);
    opacity: 0;
}



.menu-burger{
    display: none;
}

.main-menu .links{
    width: 280px;
    position: absolute;
    left: 59%;
    bottom: 15%;
    display: flex;
    -webkit-transform: translateX(-150%);
    -ms-transform: translateX(-150%);
    transform: translateX(-150%);
    -webkit-transition: transform 200ms;
    transition: transform 200ms;
}

.main-menu.open .links{
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}

.main-menu .links a{
    margin-right: 5px;
}

.main-menu .links a div{
    width: 30px;
    height: 30px;
}

.main-menu.open{
    width: 25.6%;
    cursor: default;
}

.main-menu .title{
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 10;
    text-transform: uppercase;
    color: #000;
    -webkit-transform: rotate(-90deg) translate(-50%, -50%);
    transform: rotate(-90deg) translate(-50%, -50%);
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    -webkit-transition: opacity 300ms ease;
    transition: opacity 300ms ease;
}

.main-menu.open .title{
    visibility: hidden;
    opacity: 0;
}

.main-menu .menu-list,
.main-menu .menu{
    visibility: hidden;
    position: absolute;
    top: 45%;
    left: 59%;
    z-index: -1;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-transform: uppercase;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 60%;
    max-height: 650%;
    width: 280px;
}

.main-menu .menu ul{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-transform: uppercase;
}

.main-menu.open .menu-list,
.main-menu.open .menu{
    visibility: visible;
    z-index: 1;
}

.main-menu .menu-list .menu-link a:visited,
.main-menu .menu-list .menu-link a:active,
.main-menu .menu-list .menu-link a,
.main-menu .menu li a:visited,
.main-menu .menu li a:active,
.main-menu .menu li a{
    color: black;
}

.main-menu .exit-menu .cross,
.exit-instagram .cross{
    width: 20px;
    height: 20px;
    position: absolute;
    top: 20px;
    right: 20px;
    background-image: url("../images/menu-exit.png");
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    cursor: pointer;
    display: none;
}

.exit-instagram .cross{
    right: auto;
    left: 20px;
}

.main-menu.open .exit-menu .cross,
.exit-instagram .cross{
    display: block;
}

.main-menu.open .menu-list .menu-link a,
.main-menu.open .menu li a{
    position: relative;
}

.main-menu.open .menu-list .menu-link.active a:after,
.main-menu.open .menu li.current_page_item a:after{
    content: '';
    position: absolute;
    top: 100%;
    left: 0%;
    background-color: black;
    width: 100%;
    height: 5px;
}

.main-menu ul li:nth-child(1) a {
    font-family: "SPSLClarendonC";
    font-size: 26px;
    letter-spacing: 3px;
}
.main-menu ul li:nth-child(2) a{
    font-family: "Gobold Uplow";
    font-size: 26px;
}
.main-menu ul li:nth-child(3) a,
.main-menu ul li:nth-child(9) a{
    font-family: 'GoBoldUplowItalic';
    font-size: 23px;
}
.main-menu ul li:nth-child(4) a{
    font-family: 'SPSLClarendonC-Italic';
    font-size: 26px;
    letter-spacing: 2px;
}
.main-menu ul li:nth-child(5) a{
    font-family: "Gobold Uplow";
    font-size: 24px;
}
.main-menu ul li:nth-child(6) a{
    font-family: "BOG Mtavruli";
    font-weight:bold;
    font-size: 26px;
    letter-spacing: 7px;
}
.main-menu ul li:nth-child(7) a{
    font-family : "SPSLClarendonC-Italic";
    font-size: 22px;
    letter-spacing: 2px;
}
.main-menu ul li:nth-child(8) a{
    font-family: "Gobold Uplow";
    font-size: 26px;
}

/* .main-menu li a:hover{
    -webkit-animation: font-animate-1 2.1s linear forwards;
    -moz-animation: font-animate-1 2.1s linear forwards;
    -o-animation: font-animate-1 2.1s linear forwards;
    animation: font-animate-1 2.1s linear forwards;
}
 */
.instagram-feed{
    position: absolute;
    top: 0;
    right: 0;
    background-color: #ffde00;
    height: 100%;
    /*width: 450px;*/
    width: 0 !important;
    z-index: 2000;
    overflow: hidden;
    -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%);
    -webkit-transition: transform 350ms ease;
    transition: transform 350ms ease;
}

.instagram-feed .slimScrollDiv{
    width: 100% !important;
    height: 86% !important;
    position: absolute;
    top: 10%;
}

.instagram-feed .slimScrollBar{
    opacity: 1 !important;
}

.instagram-feed.active{
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
}

.instagram-feed .wrapper{
    width: 100% !important;
    height: 100% !important;
    box-sizing: border-box;
    padding: 0 6.5%;
}

.instagram-feed .wrapper .feed{
    width: 100%;
    min-height: 400px;
    margin-bottom: 10px;
}

.instagram-feed .wrapper .user-info{
    width: 100%;
    height: 50px;
    display: flex;
}

.instagram-feed .wrapper .user-info .image-container{
    height: 100%;
    width: 15%;
    display: flex;
    align-items: center;
}

.instagram-feed .wrapper .user-info .user-name{
    height: 100%;
    width: 85%;
    font-size: 1.8em;
    display: flex;
    align-items: center;
}

.instagram-feed .wrapper .feed .user-info .image-container div{
    width: 42px;
    height: 42px;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 50%;
}


.instagram-feed .wrapper .feed .image{
    width: 100%;
    height: 320px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.instagram-feed .wrapper .feed .tags{
    min-height: 50px;
    padding-top: 10px;
}

.instagram-feed .wrapper .feed .tags .logo{
    width: 18px;
    height: 14px;
    background-image: url('../images/tag.png');
    background-repeat: no-repeat;
    display: inline-block;
    margin-right: 10px;
}

.instagram-feed .wrapper .feed .tags span{
    color: #085656;
    font-size: 1.8em;
    margin-right: 10px;
}

.right-buttons{
    width: 530px;
    height: 70px;
    position: fixed;
    top: 50%;
    right: 0;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: center;
    z-index: 1000;
    transform-origin: right;
    -webkit-transform: translate(-6.5%, -400%) rotate(-90deg);
    -ms-transform: translate(-6.5%, -400%) rotate(-90deg);
    transform: translate(-6.5%, -400%) rotate(-90deg);
}

.right-buttons .instagram,
.right-buttons .booking{
    width: 45%;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.right-buttons .booking{
    width: 100% !important;
    margin: 0 !important;
}

.right-buttons > a{
    width: 45%;
}

.right-buttons .instagram:hover,
.right-buttons .booking:hover{
    height: 70px;
}

.right-buttons .instagram{
    background: #ffde00;
    display: none !important;
}

.right-buttons .booking{
    background: #ed1550;
    color: #ffde00;
}

.right-buttons .booking p {
    margin-right: 6px;
}

.right-buttons .booking .flag{
    background-image: url("../images/flag.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 40px;
    height: 40px;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
    margin-right: 5px;
}

@-webkit-keyframes font-animate-1 {
    9% {
        font-family: GoboldUplow;
    }
    18% {
        font-family: "Gobold Bold Italic";
    }
    27% {
        font-family: "SPSLClarendonC";
    }
    36% {
        font-family: SPSLClarendonC-Italic;
    }
    45% {
        font-family: SPSLClarendonC-BoldItalic;
    }
    54% {
        font-family: "Gobold Extra1";
    }
    63% {
        font-family: "Gobold High Bold";
    }
    72% {
        font-family: "Gobold High Thin"
    }
    81% {
        font-family: GoboldHollow;
    }
    90% {
        font-family: "Gobold Extra1";
    }
    100% {
        font-family: GoboldUplow;
    }
}
@-moz-keyframes font-animate-1 {
    9% {
        font-family: GoboldUplow;
    }
    18% {
        font-family: "Gobold Bold Italic";
    }
    27% {
        font-family: "SPSLClarendonC";
    }
    36% {
        font-family: SPSLClarendonC-Italic;
    }
    45% {
        font-family: SPSLClarendonC-BoldItalic;
    }
    54% {
        font-family: "Gobold Extra1";
    }
    63% {
        font-family: "Gobold High Bold";
    }
    72% {
        font-family: "Gobold High Thin"
    }
    81% {
        font-family: GoboldHollow;
    }
    90% {
        font-family: "Gobold Extra1";
    }
    100% {
        font-family: GoboldUplow;
    }
}
@-o-keyframes font-animate-1 {
    9% {
        font-family: GoboldUplow;
    }
    18% {
        font-family: "Gobold Bold Italic";
    }
    27% {
        font-family: "SPSLClarendonC";
    }
    36% {
        font-family: SPSLClarendonC-Italic;
    }
    45% {
        font-family: SPSLClarendonC-BoldItalic;
    }
    54% {
        font-family: "Gobold Extra1";
    }
    63% {
        font-family: "Gobold High Bold";
    }
    72% {
        font-family: "Gobold High Thin"
    }
    81% {
        font-family: GoboldHollow;
    }
    90% {
        font-family: "Gobold Extra1";
    }
    100% {
        font-family: GoboldUplow;
    }
}
@keyframes font-animate-1 {
    9% {
        font-family: GoboldUplow;
    }
    18% {
        font-family: "Gobold Bold Italic";
    }
    27% {
        font-family: "SPSLClarendonC";
    }
    36% {
        font-family: SPSLClarendonC-Italic;
    }
    45% {
        font-family: SPSLClarendonC-BoldItalic;
    }
    54% {
        font-family: "Gobold Extra1";
    }
    63% {
        font-family: "Gobold High Bold";
    }
    72% {
        font-family: "Gobold High Thin"
    }
    81% {
        font-family: GoboldHollow;
    }
    90% {
        font-family: "Gobold Extra1";
    }
    100% {
        font-family: GoboldUplow;
    }
}


@media screen and (max-width: 1450px){
    .main-menu .links{
        bottom: 11%;
        width: 250px;
    }

    header{
        height: 50px;
    }

    .right-buttons > a{
        width: 32.5%;
    }

    .main-menu .links a div{
        width: 25px;
        height: 25px;
    }

    header .section-title{
        padding: 0 1em;
    }

    .section-about-us .tv,
    .section-about-us .glitch-wrapper{
        width: 40%;
        top: 15%;
    }

    header .section-title div:after{
        bottom: -6px;
    }

    header .languages li{
        padding: 0 4px;
        font-size: 2.3em;
    }

    .main-menu ul li:nth-child(1) a {
        font-size: 22px;
    }
    .main-menu ul li:nth-child(2) a{
        font-size: 21px;
    }
    .main-menu ul li:nth-child(3) a,
    .main-menu ul li:nth-child(9) a{
        font-size: 20px;
    }
    .main-menu ul li:nth-child(4) a{
        font-size: 22px;
    }
    .main-menu ul li:nth-child(5) a{
        font-size: 21px;
    }
    .main-menu ul li:nth-child(6) a{
        font-size: 23px;
    }
    .main-menu ul li:nth-child(7) a{
        font-size: 20px;
    }
    .main-menu ul li:nth-child(8) a{
        font-size: 21px;
    }

    .main-menu .menu-list, .main-menu .menu{
        height: 65%;
        width: 250px;
    }

    .right-buttons{
        justify-content: center;
    }

    .right-buttons .instagram,
    .right-buttons .booking{
        height: 50px;
        width: 32.5%;
        margin: 0 15px;
    }

    .right-buttons .instagram:hover,
    .right-buttons .booking:hover{
        height: 60px;
    }

    .right-buttons .booking .flag{
        height: 30px;
        width: 30px;
    }

    .instagram-feed{
        width: 380px;
    }

    .instagram-feed .wrapper .feed{
        min-height: 300px;
        margin-bottom: 5px;
    }

    .instagram-feed .wrapper .feed .image{
        height: 280px;
    }

    .instagram-feed .slimScrollDiv{
        height: 90% !important;
        top: 7.5%;
    }

    .instagram-feed .wrapper .feed .image{
        height: 270px;
    }

    .instagram-feed .wrapper .feed .tags span{
        font-size: 1.6em;
    }

    .instagram-feed .wrapper .user-info .user-name{
        font-size: 1.7em;
    }

    .instagram-feed .wrapper .feed .tags{
        min-height: 30px;
    }
}

@media screen and (max-width: 960px){
    header{
        width: 100%;
        height: 90px;
        padding: 1em;
        display: block;
        top: 0;
        left: 0;
        background-color: #303030;
    }

    .right-buttons > a{
        width: 190px;
    }

    header>:first-child{
        display: block;
    }

    header>:first-child img{
        height: 70px;
    }

    header .buttons{
        position: absolute;
        bottom: -6em;
        width: calc(100% - 23px);
        justify-content: flex-start;
        height: auto;
    }

    header .buttons .section-title div{
        top: auto;
        -webkit-transform: none;
        -moz-transform: none;
        -ms-transform: none;
        -o-transform: none;
        transform: none;
    }

    header .buttons .section-title{
        padding: 0.50em 0.8em;
        margin: 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    header .buttons .languages{
        position: absolute;
        right: 0.7em;
        height: 100%;
    }

    .main-menu{
        width: 0;
        min-width: auto;
    }

    .main-menu .title{
        display: none;
    }

    .main-menu .menu-list,
    .main-menu .menu{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 65%;
        width: 100%;
        top: 10%;
        left: 0;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
    }

    .main-menu .menu-list .menu-link,
    .main-menu ul li{
        margin-bottom: 0;
        text-align: center;
    }

    .main-menu .links{
        display: flex;
        justify-content: center;
        width: 100%;
        overflow: hidden;
        position: absolute;
        bottom: 15%;
        left: 50%;
        -webkit-transform: translateX(-50%) !important;
        -moz-transform: translateX(-50%) !important;
        -ms-transform: translateX(-50%) !important;
        -o-transform: translateX(-50%) !important;
        transform: translateX(-50%) !important;
    }

    menu .links a div{
        width: 32x;
        height: 32px;
    }

    .main-menu.open{
        width: 100%;
    }

    .menu-burger{
        position: fixed;
        top: 1em;
        right: 2em;
        display: block;
        width: 70px;
        height: 70px;
        z-index: 1000;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        cursor: pointer;
    }

    .main-menu .exit-menu,
    .exit-instagram{
        position: absolute;
        display: block;
        bottom: 0;
        left: 50%;
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        transform: translateX(-50%);
        width: 20%;
        height: 7%;
        background-color: black;
        cursor: pointer;
    }

    .main-menu .exit-menu .cross,
    .exit-instagram .cross{
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        height: 50%;
        width: 100%;
        background-image: url("../images/close-menu.png");
    }


    .right-buttons{
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
        width: 100%;
        height: 50px;
        top: auto;
        right: auto;
        bottom: 0;
        left: 0;
        /* justify-content: center; */
        /* pointer-events: none; */
    }

    .right-buttons .instagram,
    .right-buttons .booking{
        width: 190px;
        height: 50px;
        margin: 0 5px;
    }

    .right-buttons .instagram:hover,
    .right-buttons .booking:hover{
        height: 50px;
    }


    .instagram-feed{
        width: 100%;
    }

    .instagram-feed .slimScrollDiv{
        width: 400px !important;
        position: absolute;
        left: 50%;
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
        top: 1%;
    }

    .instagram-feed .wrapper .feed{
        width: 95%;
    }

    .instagram-feed .wrapper .user-info{
        height: 40px;
    }

    .instagram-feed .wrapper .feed .user-info .image-container div{
        height: 34px;
        width: 34px;
    }

    .instagram-feed .wrapper .feed .tags span{
        font-size: 1.5em;
    }

    .instagram-feed .wrapper .feed .tags{
        min-height: 30px;
    }


}

@media screen and (max-width: 600px){
    header{
        height: 60px;
        padding: 1em;
    }

    .right-buttons > a{
        width: 150px;
    }

    header>:first-child img{
        height: 40px;
    }

    header .buttons{
        bottom: -5.5em;
    }

    header .buttons .section-title{
        padding: 0.50em 0.65em;
    }

    header .buttons .languages{
        right: 0;
    }

    header .languages li{
        padding: 0 0.1em;
    }

    .menu-burger{
        top: 1.3em;
        right: 1em;
        width: 40px;
        height: 34px;
    }

    .right-buttons .booking .flag{
        width: 25px;
        height: 30px;
    }

    .right-buttons .instagram,
    .right-buttons .booking{
        height: 50px;
        width: 180px;
    }

    .instagram-feed .slimScrollDiv{
        width: 320px !important;
        position: absolute;
        left: 50%;
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
        top: 1%;
    }

    .instagram-feed .wrapper .feed .image{
        height: 245px;
    }

    .instagram-feed .wrapper .feed .tags{

    }

    .section-about-us .tv, .section-about-us .glitch-wrapper{
        width: 75%;
    }
}

@media screen and (max-width: 600px){
    .right-buttons .instagram,
    .right-buttons .booking{
        height: 38px;
        width: 150px;
    }

    .main-menu .menu-list{
        width: 50%;
    }
}