/************************************************************************************************************

Author:  Michael Poliakov
Project: Agalarov Estate
File:    Main page

Table of content

1.      System: defaults and reusable elements
2.      Layouts: declaration
3.      Stages: declaration
3.1.    Stages: implementation
                - stage-video
                - stage-main-interface
                - stage-slide-description
                - stage-top-navigation
                - stage-bottom-navigation
                - stage-main-menu

***********************************************************************************************************/


/****************************  1. System: defaults and reusable elements  *********************************/

html { box-sizing: border-box; }
html, body {
    width: 100%; height: 100%;
    font-size: 100%; line-height: 1;
}
html, body, div, table, td, p, a, ul, li, ol, img, figure, form, select, input, textarea, button, h1, h2, h3, h4, h5, h6 {
    padding: 0; margin: 0;
    font-family: Arial, sans-serif;
    outline: none;
}
button, input[type="submit"], input[type="button"] {
    background: transparent;
    cursor: pointer;
}
article,aside, details, figcaption, figure, footer, header, hgroup, menu, main, nav, section { display: block; }
*, *:before, *:after { box-sizing: inherit; }
button, input, img { border: none; }
ul, li, ol { list-style: none; }
input::-webkit-input-placeholder { opacity: 1; }
input:focus::-webkit-input-placeholder { opacity: 0; }
textarea::-webkit-input-placeholder { opacity: 1; }
textarea:focus::-webkit-input-placeholder { opacity: 0; }
input:-moz-placeholder { opacity: 1; }
input:focus:-moz-placeholder { opacity: 0; }
textarea:-moz-placeholder { opacity: 1; }
textarea:focus:-moz-placeholder { opacity: 0; }
input::-moz-placeholder { opacity: 1; }
input:focus::-moz-placeholder { opacity: 0; }
textarea::-moz-placeholder { opacity: 1; }
textarea:focus::-moz-placeholder { opacity: 0; }
input:-ms-input-placeholder { opacity: 1; }
input:focus:-ms-input-placeholder { opacity: 0; }
textarea:-ms-input-placeholder { opacity: 1; }
textarea:focus:-ms-input-placeholder { opacity: 0; }

                                                /* Animation */
.effect-fadeout {
    -webkit-animation-name:             fadeOut;
    animation-name:                     fadeOut;
    -webkit-animation-duration:         500ms;
    animation-duration:                 500ms;
    -webkit-animation-timing-function:  linear;
    animation-timing-function:          linear;
    -webkit-animation-fill-mode:        forwards;
    animation-fill-mode:                forwards;
}
.effect-fadein {
    -webkit-animation-name:             fadeIn;
    animation-name:                     fadeIn;
    -webkit-animation-duration:         500ms;
    animation-duration:                 500ms;
    -webkit-animation-timing-function:  linear;
    animation-timing-function:          linear;
    -webkit-animation-fill-mode:        forwards;
    animation-fill-mode:                forwards;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes logoLoading {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes logoLoaded {
    0% {
        top: 22%;
        top: 19vh;
    }
    100% {
        top: 10%;
        top: 9.6vh;
    }
}

@keyframes mainInterfaceLeft {
    0% {
        width: 100%;
        background-color: rgba(25,25,25,.7);
    }
    100% {
        width: 40%;
        background-color: #191919;
    }
}

@keyframes slidePrev {
    0% {
        opacity: 1;
        -webkit-transform:  scale(1);
        -ms-transform:      scale(1);
        transform:          scale(1);
    }
    100% {
        opacity: .4;
        -webkit-transform:  scale(.5);
        -ms-transform:      scale(.5);
        transform:          scale(.5);
    }
}

@keyframes slidePrevRev {
    0% {
        opacity: 1;
        -webkit-transform:  translateX(0);
        -ms-transform:      translateX(0);
        transform:          translateX(0);
    }
    100% {
        opacity: 1;
        -webkit-transform:  translateX(100%);
        -ms-transform:      translateX(100%);
        transform:          translateX(100%);
    }
}

@keyframes slideNext {
    0% {
        -webkit-transform:  translateX(100%);
        -ms-transform:      translateX(100%);
        transform:          translateX(100%);
    }
    100% {
        -webkit-transform:  translateX(0);
        -ms-transform:      translateX(0);
        transform:          translateX(0);
    }
}

@keyframes slideNextRev {
    0% {
        opacity: .4;
        -webkit-transform:  scale(.5);
        -ms-transform:      scale(.5);
        transform:          scale(.5);
    }
    100% {
        opacity: 1;
        -webkit-transform:  scale(1);
        -ms-transform:      scale(1);
        transform:          scale(1);
    }
}

@keyframes slidePrevMob {
    0% {
        opacity: 1;
        -webkit-transform:  translateX(0);
        -ms-transform:      translateX(0);
        transform:          translateX(0);
    }
    100% {
        opacity: 1;
        -webkit-transform:  translateX(-100%);
        -ms-transform:      translateX(-100%);
        transform:          translateX(-100%);
    }
}

@keyframes slidePrevMobRev {
    0% {
        opacity: 1;
        -webkit-transform:  translateX(0);
        -ms-transform:      translateX(0);
        transform:          translateX(0);
    }
    100% {
        opacity: 1;
        -webkit-transform:  translateX(100%);
        -ms-transform:      translateX(100%);
        transform:          translateX(100%);
    }
}

@keyframes slideNextMob {
    0% {
        opacity: 1;
        -webkit-transform:  translateX(100%);
        -ms-transform:      translateX(100%);
        transform:          translateX(100%);
    }
    100% {
        opacity: 1;
        -webkit-transform:  translateX(0);
        -ms-transform:      translateX(0);
        transform:          translateX(0);
    }
}

@keyframes slideNextMobRev {
    0% {
        opacity: 1;
        -webkit-transform:  translateX(-100%);
        -ms-transform:      translateX(-100%);
        transform:          translateX(-100%);
    }
    100% {
        opacity: 1;
        -webkit-transform:  translateX(0);
        -ms-transform:      translateX(0);
        transform:          translateX(0);
    }
}

@keyframes mainMenuOpen {
    0% {
        -webkit-transform:  translateX(100%);
        -ms-transform:      translateX(100%);
        transform:          translateX(100%);
    }
    100% {
        -webkit-transform:  translateX(0);
        -ms-transform:      translateX(0);
        transform:          translateX(0);
    }
}

@keyframes showCloseBtn {
    0% {
        -webkit-transform:  scale(0);
        -ms-transform:      scale(0);
        transform:          scale(0);
    }
    100% {
        -webkit-transform:  scale(1);
        -ms-transform:      scale(1);
        transform:          scale(1);

    }
}

@keyframes moveFadeLR {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

                                    /* Button: simple rectange with animation */

.button-simple-rect {
        display: inline-block;
        position: relative;
        padding: 10px 45px 10px 10px;
        font-family: "AGopt", sans-serif; font-size: 0.75em; color: #fff; text-transform: uppercase; text-decoration: none; text-shadow: 1px 1px 1px rgba(0,0,0,.5); white-space: nowrap;
        border: 1px solid rgba(255,255,255,.5); box-shadow: 1px 1px 1px rgba(0,0,0,.3), inset 1px 1px 1px rgba(0,0,0,.3);
}
    .button-simple-rect:after {
        content: '';
        position: absolute; left: 100%; top: 50%;
        margin-left: -14%;
        width: 28%; height: 1px;
        background-color: rgba(255,255,255,.5);
        box-shadow: 1px 1px 1px rgba(0,0,0,.3);
        -webkit-transition: all 1s;
        transition:         all 1s;
    }
    .button-simple-rect.animated:after {
        width: 0;
        opacity: .5;
    }
    .button-simple-rect.animated.animate:after {
        width: 28%;
        opacity: 1;
    }

@media (max-width: 480px) {
    .button-simple-rect {
        padding: 10px 45px 10px 15px;
    }
}
@media (min-width: 1024px) {
    .button-simple-rect {
        padding: 16px 30px; padding: 0.98vw 6vw 0.98vw 1.86vw;
        font-size: 1em; font-size: 0.98vw;
    }
}

/***********************************************************************************************************/


/****************************************  2. Layers:declaration  ******************************************/

    .layer {
        position: fixed; left: 0; top: 0; right: 0; bottom: 0;
    }
        .layer-background {
            z-index: -100;    
        }
        .layer-service {
            z-index: -50;
        }
        .layer-content {
            z-index: 0;
        }

/***********************************************************************************************************/


/***************************************  3. Stages: declaration  ******************************************/

    .stage {
        position: absolute;
        z-index: 0;
    }
        .stage-video {
            left: 0; right: 0; top: 0; bottom: 0;
            background-color: #000;
        }

    /* .stage-main-interface : mobile */
        @media (max-width: 1023px) {
            /* .stage-main-interface : basic style */
                .stage-main-interface {
                    left: -15px; top: 0; bottom: 0; z-index: 30;
                    width: 15px;
                    font-family: "AGopt", sans-serif;
                    -webkit-transition: all 1s;
                    transition:         all 1s;
                }
            /* end of .stage-main-interface : basic style */

            /* .stage-main-interface : loading style */
                .status-loading .stage-main-interface {
                    left: 0;
                }
            /* end of .stage-main-interface : loading style */
            
        }
    /* end of .stage-main-interface : mobile */

    /* .stage-main-interface : regular */
        @media (min-width: 1024px) {
        /* .stage-main-interface : basic style */
                .stage-main-interface {
                    left: 0; top: 0; bottom: 0;
                    width: 41%;
                    font-family: "AGopt", sans-serif;
                    background-color: #191919;
                }
            /* end of .stage-main-interface : basic style */

            /* .stage-main-interface : loading style */
                .status-loading .stage-main-interface {
                    width: 100%;
                    background-color: rgba(25,25,25,.9);
                    -webkit-animation:  none;
                    animation:          none;
                }
            /* end of .stage-main-interface : loading style */

            /* .stage-main-interface : loaded style */
                .status-loaded .stage-main-interface {
                    -webkit-animation:  mainInterfaceLeft 2000ms linear 0ms 1 normal;
                    animation:          mainInterfaceLeft 2000ms linear 0ms 1 normal;
                    -webkit-animation-fill-mode:    forwards;
                    animation-fill-mode:            forwards;
                }
            /* end of .stage-main-interface : loaded style */

            /* .stage-main-interface : loaded style - reenter */
                .status-loaded.reenter .stage-main-interface {
                    -webkit-animation:  mainInterfaceLeft 0ms linear 0ms 1 normal;
                    animation:          mainInterfaceLeft 0ms linear 0ms 1 normal;
                    -webkit-animation-fill-mode:    forwards;
                    animation-fill-mode:            forwards;
                }
            /* end of .stage-main-interface : loaded style - reenter */
        }
    /* end of .stage-main-interface : regular */

    /* .stage-slide-description : mobile */
        @media (max-width: 1023px) {
            .stage-slide-description {
                left: 0; right: 0; top: 0; bottom: 0; z-index: 10;
                font-family: "AGopt", sans-serif;
            }
        }
    /* end of .stage-slide-description : mobile */

    /* .stage-slide-description : regular */
        @media (min-width: 1024px) {
            .stage-slide-description {
                right: 0; top: 0; bottom: 0;
                font-family: "AGopt", sans-serif;
                width: 59%;
            }
        }
    /* end of .stage-slide-description : regular */

    /* .stage-top-navigation : mobile*/
        @media (max-width: 1023px) {
            /* .stage-top-navigation : basic style */
                .stage-top-navigation {
                    opacity: 0;
                    right: 35px; left: 35px; top: 35px; z-index: 15;
                    font-family: "AGopt", sans-serif;
                }
            /* end of .stage-top-navigation : basic style */

            /* .stage-top-navigation : loaded style */
                .status-loaded .stage-top-navigation {
                    opacity: 1;
                    -webkit-animation:  fadeIn 1000ms linear 1000ms 1 normal;
                    animation:          fadeIn 1000ms linear 1000ms 1 normal;
                    -webkit-animation-fill-mode:    both;
                    animation-fill-mode:            both;
                }
            /* end of .stage-top-navigation : loaded style */

            /* .stage-top-navigation : loaded style */
                .status-loaded.reenter .stage-top-navigation {
                    opacity: 1;
                    -webkit-animation:  fadeIn 1000ms linear 0ms 1 normal;
                    animation:          fadeIn 1000ms linear 0ms 1 normal;
                    -webkit-animation-fill-mode:    both;
                    animation-fill-mode:            both;
                }
            /* end of .stage-top-navigation : loaded style */
        }
    /* end of .stage-top-navigation : mobile*/

    /* .stage-top-navigation : regular*/
        @media (min-width: 1024px) {
            /* .stage-top-navigation : basic style */
                .stage-top-navigation {
                    opacity: 0;
                    right: 0; top: 10%; top: 9.375vh;
                    font-family: "AGopt", sans-serif;
                    width: 59%;
                }
            /* end of .stage-top-navigation : basic style */

            /* .stage-top-navigation : loaded style */
                .status-loaded .stage-top-navigation {
                    opacity: 1;
                    -webkit-animation:  fadeIn 1000ms linear 3000ms 1 normal;
                    animation:          fadeIn 1000ms linear 3000ms 1 normal;
                    -webkit-animation-fill-mode:    both;
                    animation-fill-mode:            both;
                }
            /* end of .stage-top-navigation : loaded style */

            /* .stage-top-navigation : loaded style */
                .status-loaded.reenter .stage-top-navigation {
                    opacity: 1;
                    -webkit-animation:  fadeIn 1000ms linear 0ms 1 normal;
                    animation:          fadeIn 1000ms linear 0ms 1 normal;
                    -webkit-animation-fill-mode:    both;
                    animation-fill-mode:            both;
                }
            /* end of .stage-top-navigation : loaded style */
        }
    /* end of .stage-top-navigation : regular*/

    /* .stage-bottom navigation : mobile */
        @media (max-width: 1023px) {
            /* .stage-bottom-navigation : basic style */
                .stage-bottom-navigation {
                    opacity: 0;
                    right: 65px; left: 65px; bottom: 30px; z-index: 20;
                }
            /* end of .stage-bottom-navigation : basic style */

            /* .stage-bottom-navigation : loaded style */
                .status-loaded .stage-bottom-navigation {
                    opacity: 1;
                    -webkit-animation:  fadeIn 1000ms linear 1000ms 1 normal;
                    animation:          fadeIn 1000ms linear 1000ms 1 normal;
                    -webkit-animation-fill-mode:    both;
                    animation-fill-mode:            both;
                }
            /* end of .stage-bottom-navigation : loaded style */

            /* .stage-bottom-navigation : loaded style */
                .status-loaded.reenter .stage-bottom-navigation {
                    opacity: 1;
                    -webkit-animation:  fadeIn 1000ms linear 0ms 1 normal;
                    animation:          fadeIn 1000ms linear 0ms 1 normal;
                    -webkit-animation-fill-mode:    both;
                    animation-fill-mode:            both;
                }
            /* end of .stage-bottom-navigation : loaded style */
        }
    /* end of .stage-bottom navigation : mobile */

    /* .stage-bottom navigation : regular */
        @media (min-width: 1024px) {
            /* .stage-bottom-navigation : basic style */
                .stage-bottom-navigation {
                    opacity: 0;
                    right: 0; bottom: 9%; bottom: 9.6vh;
                    width: 59%;
                }
            /* end of .stage-bottom-navigation : basic style */

            /* .stage-bottom-navigation : loaded style */
                .status-loaded .stage-bottom-navigation {
                    opacity: 1;
                    -webkit-animation:  fadeIn 1000ms linear 3000ms 1 normal;
                    animation:          fadeIn 1000ms linear 3000ms 1 normal;
                    -webkit-animation-fill-mode:    both;
                    animation-fill-mode:            both;
                }
            /* end of .stage-bottom-navigation : loaded style */

            /* .stage-bottom-navigation : loaded style - reenter */
                .status-loaded.reenter .stage-bottom-navigation {
                    opacity: 1;
                    -webkit-animation:  fadeIn 1000ms linear 0ms 1 normal;
                    animation:          fadeIn 1000ms linear 0ms 1 normal;
                    -webkit-animation-fill-mode:    both;
                    animation-fill-mode:            both;
                }
            /* end of .stage-bottom-navigation : loaded style - reenter */
        }
    /* end of .stage-bottom navigation : regular */

    /* .stage-main-menu : basic style */
        .stage-main-menu {
            right: 0; top: 0; bottom: 0; left: 0; z-index: 30;
            font-family: "AGopt", sans-serif;
            background-color: rgba(25,25,25,1);
            -webkit-transition: all 1500ms;
            transition:         all 1500ms;
            -webkit-transition-delay:   500ms;
            transition-delay:           500ms;
            -webkit-transform:  translateX(100%);
            -ms-transform:      translateX(100%);
            transform:          translateX(100%);
        }
    /* end of .stage-main-menu : basic style */

/***********************************************************************************************************/


/*************************************  3.1. Stages: implementation  ***************************************/

                                              /* stage-video */

/* figure : basic styles */
    .stage-video figure {
        z-index: -100;
        opacity: 0;
    }
    .stage-video figure.active {
        z-index: 100;
        opacity: 1;
    }

    .stage-video figure.size-fullscreen img, .stage-video figure.size-fullscreen video {
        position: absolute; top: 0; right: 0; z-index: 10;
        width: 100%; height: auto; 
    }
    .stage-video figure.size-fullscreen img {
        z-index: 0;
    }
    .stage-video figure.size-partial img, .stage-video figure.size-partial video {
        position: absolute; top: 0; right: 0; z-index: 10;
    }
    .stage-video figure.size-partial img {
        z-index: 0;
    }
    .stage-video .image, .stage-video .video {
        position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: -100; overflow: hidden;
        opacity: 0;
    }
        .stage-video .image:before {
            content: '';
            position: absolute; top: 0; right: 0; bottom: 0; width: 132vh; z-index: 10;
            background-color: rgba(0,0,0,.5);
        }
    .stage-video .slide1 video {
        background: url("../img/poster-realty.jpg") center/cover no-repeat;
    }
    .stage-video .slide2 video {
        background: url("../img/poster-golf.jpg") center/cover no-repeat;
    }
    .stage-video .slide6 video {
        background: url("../img/poster-events.jpg") center/cover no-repeat;
    }
/* figure : end of basic styles */

/* figure : loading styles */
    .status-loading .stage-video .video.active video {
        -webkit-filter: grayscale(1);
        filter: grayscale(1);
    }
/* figure : end of loading styles */

/* media queries */
    @media (max-width: 1023px) {
        .stage-video figure.size-partial img, .stage-video figure.size-partial video {
            width: 100%; height: auto; 
        }
        .stage-video .video:before, .stage-video .image:before {
            content: '';
            position: absolute; left: 0; top: 0; right: 0; bottom: 0; width: auto; z-index: 20;
            background-color: rgba(0,0,0,.5);
        }
        .stage-video .video.prev, .stage-video .image.prev {
            z-index: 50;
            -webkit-animation:  slidePrevMob 1500ms ease 0ms 1 normal;
            animation:          slidePrevMob 1500ms ease 0ms 1 normal;
            -webkit-animation-fill-mode:    both;
            animation-fill-mode:            both;
        }
        .stage-video .video.next, .stage-video .image.next {
            -webkit-animation:  slideNextMob 1500ms ease 0ms 1 normal;
            animation:          slideNextMob 1500ms ease 0ms 1 normal;
            -webkit-animation-fill-mode:    both;
            animation-fill-mode:            both;
        }
        .stage-video .video.prev-rev, .stage-video .image.prev-rev {
            z-index: 50;
            -webkit-animation:  slidePrevMobRev 1500ms ease 0ms 1 normal;
            animation:          slidePrevMobRev 1500ms ease 0ms 1 normal;
            -webkit-animation-fill-mode:    both;
            animation-fill-mode:            both;
        }
        .stage-video .video.next-rev, .stage-video .image.next-rev {
            -webkit-animation:  slideNextMobRev 1500ms ease 0ms 1 normal;
            animation:          slideNextMobRev 1500ms ease 0ms 1 normal;
            -webkit-animation-fill-mode:    both;
            animation-fill-mode:            both;
        }
    }
    @media (min-width: 1024px) {
        .stage-video figure.size-partial img, .stage-video figure.size-partial video {
            width: auto; height: 100%; 
        }
        .stage-video .video.prev, .stage-video .image.prev {
            z-index: 50;
            -webkit-animation:  slidePrev 1500ms ease 0ms 1 normal;
            animation:          slidePrev 1500ms ease 0ms 1 normal;
            -webkit-animation-fill-mode:    both;
            animation-fill-mode:            both;
        }
        .stage-video .video.next, .stage-video .image.next {
            z-index: 100;
            -webkit-animation:  slideNext 1000ms ease 500ms 1 normal;
            animation:          slideNext 1000ms ease 500ms 1 normal;
            -webkit-animation-fill-mode:    both;
            animation-fill-mode:            both;
        }
        .stage-video .video.prev-rev, .stage-video .image.prev-rev {
            z-index: 100;
            -webkit-animation:  slidePrevRev 1500ms ease 0ms 1 normal;
            animation:          slidePrevRev 1500ms ease 0ms 1 normal;
            -webkit-animation-fill-mode:    both;
            animation-fill-mode:            both;
        }
        .stage-video .video.next-rev, .stage-video .image.next-rev {
            z-index: 50;
            -webkit-animation:  slideNextRev 1000ms ease 500ms 1 normal;
            animation:          slideNextRev 1000ms ease 500ms 1 normal;
            -webkit-animation-fill-mode:    both;
            animation-fill-mode:            both;
        }
    }
    @media (orientation: portrait) {
        .stage-video figure.size-fullscreen video, figure.size-fullscreen img {
            width: auto; height: 100%; 
        }
    }
    @media (orientation: portrait) and (max-width: 1024px) {
        .stage-video figure.size-partial img, .stage-video figure.size-partial video {
            width: auto; height: 100%; 
        }
    }
/* end of media queries */

                                       
                                          /* stage-main-interface */

/* .left-logo : mobile */
    @media (max-width: 1023px) {
        /* .left-logo : basic styles */
            .stage-main-interface .left-logo {
                display: inline-block;
                position: fixed;
                background: url("../img/agalarov-logo-full.svg") center/contain no-repeat;
                text-indent: 100%;
                /* overflow: hidden; */
                -webkit-transition: all 1s;
                transition:         all 1s;
            }
            /* .stage-main-interface .left-logo.old-logo{
                background-image: url("../img/agalarov-logo-full-old.svg");
            }*/
                .stage-main-interface .left-logo.winter:after {
                    position: absolute;
                    display: block;
                    content: '';
                    top: 50%;
                    left: 50%;
                    -webkit-transform: translate(-50%, -39%);
                    transform: translate(-50%, -39%);
                    width: 170%;
                    height: 170%;
                    background: url("../img/agalarov-logo-winter.svg") center/contain no-repeat;
                }
                .stage-main-interface .left-logo:after, .stage-main-interface .left-logo span { 
                    display: none;
                }
                .stage-main-interface:before {
                    content: '';
                    visibility: hidden;
                    position: fixed; left: 0; top: 0; bottom: 0; right: 0;
                    background: rgba(25,25,25,.9);
                    opacity: 0;
                    -webkit-transition: all 1500ms;
                    transition:         all 1500ms;
                }
        /* end of .left-logo : basic styles */

        /* .left-logo : on load styles */
            .status-loading .stage-main-interface .left-logo {
                left: 50%; top: 20vh;
                -webkit-transform:  translateX(-50%);
                transform:          translateX(-50%);
            }
            .status-loading .stage-main-interface .left-logo.winter {
                -webkit-transform:  translateX(-50%) scale(0.6);
                transform:          translateX(-50%) scale(0.6);
            }
            .status-loading .stage-main-interface:before {
                visibility: visible;
                opacity: 1;
            }
        /* end of .left-logo : on load styles */
    }
    @media (max-width: 1023px) and (orientation: portrait) {
        .stage-main-interface .left-logo {
            left: 50%; top: 10vh;
            width: 25vh; height: 25vh;
            -webkit-transform:  translateX(-50%);
            transform:          translateX(-50%);
        }
        .stage-main-interface .left-logo.winter {
            -webkit-transform:  translateX(-50%) scale(0.6);
            transform:          translateX(-50%) scale(0.6);
        }
    }
    @media (max-width: 1023px) and (orientation: landscape) {
        .stage-main-interface .left-logo {
            right: 25%; top: 10vw;
            width: 25vw; height: 25vw;
            -webkit-transform:  translateX(50%);
            transform:          translateX(50%);
        }
        .stage-main-interface .left-logo.winter {
            -webkit-transform:  translateX(-50%) scale(0.6);
            transform:          translateX(-50%) scale(0.6);
        }
    }
/* end of .left-logo : mobile */

/* .left-logo : regular */
    @media (min-width: 1024px) {

        /* .left-logo : basic style */
                .stage-main-interface .left-logo {
                    display: inline-block;
                    position: absolute; left: 50%; top: 9.6%; top: 9.6vh;
                    background: url("../img/agalarov-logo-full.svg") center/contain no-repeat;
                    text-indent: 100%;
                    /* overflow: hidden; */
                    -webkit-transform:  translateX(-50%);
                    -ms-transform:      translateX(-50%);
                    transform:          translateX(-50%);
                    width: 21vh;
                    height: 15.8vh;
                }
                .stage-main-interface .left-logo.winter:after {
                    position: absolute;
                    display: block;
                    content: '';
                    top: 50%;
                    left: 50%;
                    -webkit-transform: translate(-50%, -39%);
                    transform: translate(-50%, -39%);
                    width: 225%;
                    height: 225%;
                    background: url("../img/agalarov-logo-winter.svg") center/contain no-repeat;
                }
                /*.stage-main-interface .left-logo {
                    display: inline-block;
                    position: absolute; left: 50%; top: 9.6%; top: 9.6vh;
                    padding-top: 135px; padding-top: 16.87vh;
                    font-size: 1.3em; font-size: 2.5vh; font-family: "Playfair", serif; color: #fff; text-align: center; text-decoration: none; letter-spacing: 1px;
                    -webkit-transform:  translateX(-50%);
                    -ms-transform:      translateX(-50%);
                    transform:          translateX(-50%);
                }
                    .stage-main-interface .left-logo:before {
                        content: '';
                        position: absolute; left: 50%; top: 0;
                        width: 60px; height: 102px; width: 8.7vh; height: 12.75vh;
                        background: url("../img/agalarov-logo.svg") center top/contain no-repeat;
                        -webkit-transform:  translateX(-50%);
                        -ms-transform:      translateX(-50%);
                        transform:          translateX(-50%);
                    }
                    .stage-main-interface .left-logo.old-logo:before{
                        background-image: url("../img/agalarov-logo-old.svg");
                        width: 7.5vh;
                    }
                    .stage-main-interface .left-logo:after {
                        content: '';
                        position: absolute; left: -30px; right: -30px; top: 120px; top: 15vh;
                        height: 55px; height: 6.87vh;
                        border-top: 1px solid rgba(255,255,255,.3); border-bottom: 1px solid rgba(255,255,255,.3);
                    }
                    .stage-main-interface .left-logo span {
                        display: inline-block;
                        padding-top: 35px; padding-top: 4.37vh;
                        font-size: 0.625em; font-size: 1.25vh; font-family: "Helvetica", sans-serif;
                    }
                    */
        /* end of .left-logo : basic style */

        /* .left-logo : on load style */
            .status-loading .stage-main-interface .left-logo {
                opacity: 0;
                top: 22%; top: 19vh;
                -webkit-animation:  logoLoading 1000ms linear 1000ms 1 normal;
                animation:          logoLoading 1000ms linear 1000ms 1 normal;
                -webkit-animation-fill-mode:    forwards;
                animation-fill-mode:            forwards;
                }
        /* end of .left-logo : on load style */

        /* .left-logo : after load style */
            .status-loaded .stage-main-interface .left-logo {
                top: 22%; top: 19vh;
                -webkit-animation:  logoLoaded 500ms linear 2000ms 1 normal;
                animation:          logoLoaded 500ms linear 2000ms 1 normal;
                -webkit-animation-fill-mode:    forwards;
                animation-fill-mode:            forwards;
                }
        /* end of .left-logo : after style */

        /* .left-logo : after load style - reenter */
            .status-loaded.reenter .stage-main-interface .left-logo {
                top: 10%; top: 9.6vh;
                -webkit-animation:  fadeIn 1000ms linear 0ms 1 normal;
                animation:          fadeIn 1000ms linear 0ms 1 normal;
                -webkit-animation-fill-mode:    forwards;
                animation-fill-mode:            forwards;
                }
        /* end of .left-logo : after style - reenter */
    }
    /*@media (min-width: 1024px) and (orientation: portrait) {
        .stage-main-interface .left-logo {
            padding-top: 130px; padding-top: 9.5vh;
            font-size: 1.2em; font-size: 1.6vh;
        }
            .stage-main-interface .left-logo:before {
                width: 55px; height: 93px; width: 4.8vh; height: 6.8vh;
            }
            .stage-main-interface .left-logo.old-logo:before{
                width: 4.02vh;
            }
            .stage-main-interface .left-logo:after {
                position: absolute; left: -20px; right: -20px; top: 130px; top: 8.3vh;
                height: 61px; height: 4.5vh;
            }
            .stage-main-interface .left-logo span {
                padding-top: 25px; padding-top: 2.8vh;
                font-size: 0.625em; font-size: 1vh;
            }
    }*/

    @media (min-width: 1024px) and (orientation: portrait) {
        .stage-main-interface .left-logo {
            -webkit-transform:  translateX(-50%) scale(0.5);
            -ms-transform:      translateX(-50%) scale(0.5);
            transform:          translateX(-50%) scale(0.5);
        }
    }

/* end of .left-logo : regular */

/* .phone : mobile */
    @media (max-width: 1023px) {
        /* .phone : basic style */
            .stage-main-interface .phone {
                display: inline-block; opacity: 0;
                position: fixed; left: 35px; /* top: 33px; */ top: 20px;
                /* height: 18px; */ overflow: hidden;
                font-family: inherit; white-space: nowrap;
            }
                .stage-main-interface .phone span {
                    font-family: inherit;
                    font-size: 0.625em;
                    color: #fff;
                    text-transform: uppercase;
                }
                /* .stage-main-interface .phone span, .stage-main-interface .phone br { display: none !important; } */
                .stage-main-interface .phone a {
                    display: inline-block;
                    height: 18px;
                    margin-bottom: 4px;
                    font-family: inherit; font-size: 1.125em; line-height: 18px; font-weight: normal; color: #fff; text-decoration: none;
                }
        /* end of .phone : basic style */

        /* .phone : loaded style */
            .status-loaded .stage-main-interface .phone {
                opacity: 1;
                -webkit-animation:  fadeIn 1000ms linear 3000ms 1 normal;
                animation:          fadeIn 1000ms linear 3000ms 1 normal;
                -webkit-animation-fill-mode:    both;
                animation-fill-mode:            both;
            }
        /* end of .phone : loaded style */

        /* .phone : loaded style */
            .status-loaded.reenter .stage-main-interface .phone {
                opacity: 1;
                -webkit-animation:  fadeIn 1000ms linear 0ms 1 normal;
                animation:          fadeIn 1000ms linear 0ms 1 normal;
                -webkit-animation-fill-mode:    both;
                animation-fill-mode:            both;
            }
        /* end of .phone : loaded style */
    }
/* end of .phone : mobile */

/* .phone : regular */
    @media (min-width: 1024px) {
        /* .phone : basic style */
            .stage-main-interface .phone {
                display: inline-block; opacity: 0;
                position: absolute; left: 50%; bottom: 9%; bottom: 9.6vh;
                font-family: inherit; text-align: center;
                -webkit-transform:  translateX(-50%);
                -ms-transform:      translateX(-50%);
                transform:          translateX(-50%);
            }
                .stage-main-interface .phone span {
                    font-family: inherit; font-size: 0.625em; font-size: 0.78vw; color: #fff; text-transform: uppercase;
                }
                .stage-main-interface .phone a {
                    display: inline-block;
                    padding-top: 15px; padding-top: 1.56vh;
                    font-family: inherit; font-size: 1em; font-size: 1.25vw; line-height: 1; color: #fff; text-decoration: none;
                }
        /* end of .phone : basic style */

        /* .phone : loaded style */
            .status-loaded .stage-main-interface .phone {
                opacity: 1;
                -webkit-animation:  fadeIn 1000ms linear 3000ms 1 normal;
                animation:          fadeIn 1000ms linear 3000ms 1 normal;
                -webkit-animation-fill-mode:    both;
                animation-fill-mode:            both;
            }
        /* end of .phone : loaded style */

        /* .phone : loaded style - reenter*/
            .status-loaded.reenter .stage-main-interface .phone {
                opacity: 1;
                -webkit-animation:  fadeIn 1000ms linear 0ms 1 normal;
                animation:          fadeIn 1000ms linear 0ms 1 normal;
                -webkit-animation-fill-mode:    both;
                animation-fill-mode:            both;
            }
        /* end of .phone : loaded style - reenter */
    }
    @media (min-width: 1024px) and (orientation: portrait) {
        .stage-main-interface .phone span {
            font-size: 0.625em; font-size: 1vh;
        }
            .stage-main-interface .phone a {
                padding-top: 15px; padding-top: 1.1vh;
                font-size: 1em; font-size: 1.1vh;
            }
    }
/* end of .phone : regular */

/* .site-title : mobile */
    @media (max-width: 1023px) {
        /* .site-title : basic style */
            .stage-main-interface .site-title {
                display: inline-block;
                position: fixed; left: 50%; top: 70%;
                font-family: inherit; font-weight: normal; font-size: 1.2em; line-height: 1.4; color: #fff; text-transform: uppercase; text-align: center; white-space: nowrap;
                -webkit-transform:  translate(-50%,-50%);
                -ms-transform:      translate(-50%,-50%);
                transform:          translate(-50%,-50%);
            }
                .stage-main-interface .site-title b {
                    display: none;
                }
        /* end of .site-title : basic style */

        /* .site-title : loaded style */
            .status-loaded .stage-main-interface .site-title {
                opacity: 0;
                -webkit-animation:              fadeOut 500ms linear 0ms 1 normal;
                animation:                      fadeOut 500ms linear 0ms 1 normal;
                -webkit-animation-fill-mode:    both;
                animation-fill-mode:            both;
            }
        /* end of .site-title : loaded style */
    }
/* end of .site-title : mobile */

/* .site-title : regular */
    @media (min-width: 1024px) {
        /* .site-title : basic style */
            .stage-main-interface .site-title {
                display: inline-block;
                position: fixed; left: 50%; top: 70%; top: 70vh;
                font-family: inherit; font-weight: normal; font-size: 1.75em; font-size: 2.19vw; line-height: 1.4; color: #fff; text-transform: uppercase; text-align: center; white-space: nowrap;
                -webkit-transform:  translate(-50%,-50%);
                -ms-transform:      translate(-50%,-50%);
                transform:          translate(-50%,-50%);
            }
            .stage-main-interface .site-title.waiting {
                opacity: 0;
            }
                .stage-main-interface .site-title b {
                    display: none;
                }
        /* end of .site-title : basic style */

        /* .site-title : loaded style */
            .status-loaded .stage-main-interface .site-title {
                opacity: 0;
                -webkit-animation:              fadeOut 500ms linear 0ms 1 normal;
                animation:                      fadeOut 500ms linear 0ms 1 normal;
                -webkit-animation-fill-mode:    both;
                animation-fill-mode:            both;
            }
        /* end of .site-title : loaded style */
    }
/* end of .site-title : regular */

/* .slide-title : mobile */
    @media (max-width: 1023px) {
        .stage-main-interface .slide-title {
            display: inline-block;
            position: fixed;
            font-family: inherit; font-weight: normal; font-size: 1.5em; color: #fff; text-transform: uppercase; text-align: center; text-shadow: 1px 1px 1px rgba(0,0,0,.5);
            white-space: nowrap;
            text-decoration: none;
        }
            .stage-main-interface .slide-title b {
                font-weight: normal;
                display: none;
            }
    }
    @media (max-width: 1023px) and (orientation: portrait) {
        .stage-main-interface .slide-title {
             left: 35px; top: 42vh;
        }
    }
    @media (max-width: 1023px) and (orientation: landscape) {
        .stage-main-interface .slide-title {
             right: 25%; top: 38vw;
             -webkit-transform: translateX(50%);
             transform:         translateX(50%);
        }
    }
/* end of .slide-title : mobile */

/* .slide-title : regular */
    @media (min-width: 1024px) {
        /* .slide-title : basic style */
            .stage-main-interface .slide-title {
                display: inline-block;
                position: absolute; left: 50%; top: 60%;
                text-decoration: none;
                font-family: inherit; font-weight: bold; font-size: 3.0625em; font-size: 2.92vw; color: #808184; text-transform: uppercase; text-align: center; white-space: nowrap;
                -webkit-transform:  translate(-50%,-50%);
                -ms-transform:      translate(-50%,-50%);
                transform:          translate(-50%,-50%);
            }
                .stage-main-interface .slide-title b {
                    display: none;
                }
        /* end of .slide-title : basic style */
    }
/* end of .slide-title : regular */

/* .progress-bar : mobile */
    @media (max-width: 1023px) {
        /* .progress-bar : basic style */
            .stage-main-interface .progress-bar {
                position: absolute; left: 0; top: 0; bottom: 0;
                width: 100%;
                background-color: #000;
                -webkit-transition: all 1s;
                transition:         all 1s;
            }
                .stage-main-interface .progress-bar .pb-bar {
                    position: absolute; left: 0; right: 0; bottom: 0; top: 100%;
                    background: #161615;
                }
                .stage-main-interface .progress-bar .pb-value {
                    position: absolute; left: 50%; top: 50%;
                    font-size: 0.75em; color: #fff;
                    -webkit-transform:  translate(-50%,-50%) rotate(-90deg);
                    -ms-transform:      translate(-50%,-50%) rotate(-90deg);
                    transform:          translate(-50%,-50%) rotate(-90deg);
                }
        /* end of .progress-bar : basic style */
    }
/* end of .progress-bar : mobile */

/* .progress-bar : regular */
    @media (min-width: 1024px) {
        /* .progress-bar : basic style */
            .stage-main-interface .progress-bar {
                position: absolute; left: -75px; left: -5.85vw; top: 0; bottom: 0;
                width: 75px; width: 5.85vw;
                background-color: #000;
                -webkit-transition: all 1s;
                transition:         all 1s;
            }
                .stage-main-interface .progress-bar .pb-bar {
                    position: absolute; left: 0; right: 0; bottom: 0; top: 100%;
                    background: #161615;
                }
                .stage-main-interface .progress-bar .pb-value {
                    position: absolute; left: 50%; top: 50%;
                    font-size: 1em; font-size: 1.25vw; color: #fff;
                    -webkit-transform:  translate(-50%,-50%) rotate(-90deg);
                    -ms-transform:      translate(-50%,-50%) rotate(-90deg);
                    transform:          translate(-50%,-50%) rotate(-90deg);
                }
        /* end of .progress-bar : basic style */

        /* .progress-bar : loading style */
            .status-loading .stage-main-interface .progress-bar {
                left: 0;
            }
        /* end of .progress-bar : loading style */
    }
/* end of .progress-bar : regular */

/* .slider-menu : mobile */
    @media (max-width: 1023px) {
        /* .stage-main-interface .slider-menu: basic styles */
            .stage-main-interface .slider-menu {
                position: fixed; left: 35px; bottom: 38px;
                font-size: 0;
            }
                .stage-main-interface .slider-menu li {
                    display: inline-block; vertical-align: middle;
                    width: 4px; height: 4px;
                    margin-right: 8px;
                }
                    .stage-main-interface .slider-menu li button {
                        text-indent: 100%;
                        width: 4px; height: 4px; overflow: hidden;
                        background-color: rgba(255,255,255,.3);
                        border-radius: 4px;
                    }
                    .stage-main-interface .slider-menu li button.active {
                        background-color: rgba(255,255,255,.5);
                        -webkit-transform:  scale(1.5);
                        transform:          scale(1.5);
                    }
        /* end of .stage-main-interface .slider-menu: basic styles */

        /* .stage-main-interface .slider-menu: loading */
            .status-loading .stage-main-interface .slider-menu { display: none; }
        /* end of .stage-main-interface .slider-menu: loading */
    }
/* end of .slider-menu : mobile */

/* .slider-menu : regular */
    @media (min-width: 1024px) {
        /* .slider-menu : basic style */
            .stage-main-interface .slider-menu {
                direction: rtl;
                position: absolute; left: 25px; left: 1.95vw; top: 50%;
                width: auto; width: 80.8vh;
                font-family: inherit; font-size: 0.01em; text-align: justify;
                -webkit-transform-origin:   0 0;
                -ms-transform-origin:       0 0;
                transform-origin:           0 0;
                -webkit-transform:  rotate(-90deg) translateX(-50%);
                -ms-transform:      rotate(-90deg) translateX(-50%);
                transform:          rotate(-90deg) translateX(-50%);
            }
            .stage-main-interface .slider-menu:after {
                content: '';
                display: inline-block; visibility: hidden;
                width: 100%; height: 0;
            }
            .stage-main-interface .slider-menu li {
                display: inline-block;
                position: relative;
                margin: 0 1vh;
                font-family: inherit; white-space: nowrap;
            }
            .stage-main-interface .slider-menu li:first-child {
                margin-left: 0;
            }
            .stage-main-interface .slider-menu li:last-child {
                margin-right: 0;
            }
                .stage-main-interface .slider-menu button {
                    font-family: inherit; font-size: 0.75em; font-size: 1.5vh; letter-spacing: 0.05em; color: #808184; text-transform: uppercase;
                    -webkit-transition: color 500ms;
                    transition:         color 500ms;
                }
                .stage-main-interface .slider-menu button:hover, .stage-main-interface .slider-menu button.active { color: #fff; }
        /* end of .slider-menu : basic style */
    }
/* end of .slider-menu : regular */

                                        /* stage-slide-description */

/* .text : basic style */
    .stage-slide-description .text {
        display: none;
        position: absolute; 
        font-family: inherit;
    }
    .stage-slide-description .text.active {
        display: block;
    }
        .stage-slide-description .text p {
            font-family: inherit; color: #fff; text-transform: uppercase; text-shadow: 1px 1px 1px rgba(0,0,0,.5);
        }
        .stage-slide-description .text p b {
            display: none;
            font-weight: normal;
        }
/* end of .text : basic style */

/* .text : loading style */
    .status-loading .stage-slide-description .text.active {
        display: none;
    }
/* end of .text : loading style */

/* .text : mobile*/
    @media (max-width: 1023px) and (orientation: portrait) {
        .stage-slide-description .text {
            left: 35px; right: 35px; top: 50vh;
        }
            .stage-slide-description .text p {
                font-size: 1.2em; line-height: 1.4;
                padding-bottom: 3vh;
            }
    }
    @media (max-width: 1023px) and (orientation: landscape) {
        .stage-slide-description .text {
            left: 35px; right: 50%; top: 12vw;
        }
            .stage-slide-description .text p {
                font-size: 1.2em; line-height: 1.54;
                padding-bottom: 3vh;
            }
    }
    @media (max-width: 400px) and (orientation: portrait) {
        .stage-slide-description .text p {
            font-size: 1em; line-height: 1.3;
        }
    }
    @media (max-height: 320px) and (orientation: landscape) {
        .stage-slide-description .text {
            top: 15vw;
        }
        .stage-slide-description .text p {
            font-size: 1em; line-height: 1.3;
        }
    }
/* end of .text : mobile*/

/* .text : regular*/
    @media (min-width: 1024px) {
        .stage-slide-description .text {
            left: 14%; top: 23.75%; top: 23.75vh;
        }
            .stage-slide-description .text p {
                font-size: 3.125em; font-size: 2.7vw; line-height: 1.25;
                padding-bottom: 50px;
            }
    }
/* end of .text : regular*/


                                        /* stage-top-navigation */

    .stage-top-navigation .switch-main-menu b, .stage-top-navigation .switch-main-menu:before, .stage-top-navigation .switch-main-menu:after {
        position: absolute; left: 0; right: 0;
        height: 1px;
        background-color: #fff; box-shadow: 1px 1px 1px rgba(0,0,0,.5);
    }
    .stage-top-navigation .switch-main-menu b {
        top: 50%;
        margin-top: -1px;
    }
    .stage-top-navigation .switch-main-menu:before {
        content: '';
        top: 0;
    }
    .stage-top-navigation .switch-main-menu:after {
        content: '';
        bottom: 0;
    }
    .stage-top-navigation .top-navmenu {
        font-size: 0; font-family: inherit;
    }
    .stage-top-navigation .top-navmenu li {
        display: inline-block;
        vertical-align: top;
        margin-right: 8%;
        font-family: inherit;
    }
    .stage-top-navigation .top-navmenu li:last-child {
        margin-right: 0;
    }
        .stage-top-navigation .top-navmenu a {
            font-family: inherit; color: #fff; text-shadow: 1px 1px 1px rgba(0,0,0,.5); text-transform: uppercase; text-decoration: none;
        }

/* media queries*/
    @media (max-width: 1023px) {
        .stage-top-navigation .switch-main-menu {
            position: absolute; right: 0; top: -3px;
            padding-top: 18px;
            width: 30px
        }
        .stage-top-navigation .top-navmenu {
            position: fixed; height: 13px; right: 35px; bottom: 31px;
            width: 50%;
            text-align: right;
            overflow: hidden;
        }
            .stage-top-navigation .top-navmenu a {
                display: inline-block;
                font-size: 0.75rem; line-height: 1;
            }
    }
    @media (min-width: 1024px) {
        .stage-top-navigation .switch-main-menu {
            position: absolute; right: 9.6%; top: -3px;
            padding-top: 16px; padding-top: 1.18vw;
            width: 3.75%;
        }
        .stage-top-navigation .top-navmenu {
            margin-left: 14%;
        }
            .stage-top-navigation .top-navmenu a {
                font-size: 0.75em; font-size: 0.94vw; 
            }
    }
    @media (min-width: 1024px) and (orientation: portrait) {
        .stage-top-navigation .top-navmenu a {
                font-size: 0.75em; font-size: 1.1vh; 
            }
    }
/* end of media queries*/

                                            /* stage-bottom-navigation */

    .stage-bottom-navigation .next-slide:before, .stage-bottom-navigation .next-slide:after {
        content: '';
        position: absolute; top: 100%;
        width: 61%; height: 1px;
        background-color: #fff; box-shadow: 1px 1px 1px rgba(0,0,0,.5);
    }
    .stage-bottom-navigation .next-slide:before {
        left: 50%;
        -webkit-transform-origin:   0;
        -ms-transform-origin:       0;
        transform-origin:           0;
        -webkit-transform:  rotate(-35deg);
        -ms-transform:      rotate(-35deg);
        transform:          rotate(-35deg);
    }
    .stage-bottom-navigation .next-slide:after {
        right: 50%;
        -webkit-transform-origin:   100% 0;
        -ms-transform-origin:       100% 0;
        transform-origin:           100% 0;
        -webkit-transform:  rotate(35deg);
        -ms-transform:      rotate(35deg);
        transform:          rotate(35deg);
    }

.stage-bottom-navigation .social {
    font-size: 0;
}
    .stage-bottom-navigation .social li {
        display: inline-block;
        vertical-align: top;
    }
    .stage-bottom-navigation .social li:first-child {
        margin-left: 0;
    }
        .stage-bottom-navigation .social a {
            display: inline-block; overflow: hidden;
            position: relative;
            text-indent: 100%; text-decoration: none;
        }
            .stage-bottom-navigation .social a:before {
                position: absolute; left: 0; top: 0;
                font-family: "AgalarovIcons"; color: rgba(255,255,255,.6); text-indent: 0; text-decoration: none;
            }
            .stage-bottom-navigation .social a.ico-facebook:before {
                content: 'f';
            }
            .stage-bottom-navigation .social a.ico-instagram:before {
                content: 'i';
            }
            .stage-bottom-navigation .social a.ico-youtube:before {
                content: 'y';
            }

/* media queries*/
    @media (max-width: 1023px) {
        .stage-bottom-navigation .next-slide {
            display: none;
            position: absolute; left: 0; bottom: 3px;
            width: 36px; height: 36px;
        }
        .stage-bottom-navigation .social {
            display: none;
            position: absolute; left: 25%; bottom: 0;
            width: 50%;
            text-align: center;
        }
            .stage-bottom-navigation .social li {
                    margin-left: 8%;
            }
                .stage-bottom-navigation .social a {
                    width: 18px; height: 18px;
                }
                    .stage-bottom-navigation .social a:before {
                        font-size: 18px;
                    }
    }
    @media (min-width: 1024px) {
        .stage-bottom-navigation .next-slide {
            position: absolute; left: 14%; bottom: 3px;
            padding-top: 22px; padding-top: 1.72vw;
            width: 6.35%; height: 0;
        }
        .stage-bottom-navigation .social {
            text-align: right;
            margin-right: 9.6%;
        }
            .stage-bottom-navigation .social li {
                    margin-left: 3%;
            }
                .stage-bottom-navigation .social a {
                    width: 1.72vw; height: 1.72vw;
                }
                    .stage-bottom-navigation .social a:before {
                        font-size: 22px; font-size: 1.72vw;
                    }
    }
/* end of media queries*/
                                            /* stage-main-menu */

.stage-main-menu.active {
    -webkit-transform:  translateX(0);
    transform:          translateX(0);
    -webkit-transition-delay:   0ms;
    transition-delay:           0ms;
}
    .stage-main-menu .switch-main-menu {
        position: absolute; right: 5.625%; right: 5.625vw; top: 7%; top: 7vw; z-index: 20;
        width: 42px; height: 42px; width: 2.56vw; height: 2.56vw; min-width: 30px; min-height: 30px;
        cursor: pointer;
        -webkit-transform:  rotate(45deg);
        transform:          rotate(45deg);
    }
        .stage-main-menu .switch-main-menu:before, .stage-main-menu .switch-main-menu:after {
            content: '';
            display: block;
            position: absolute; z-index: 10;
            background-color: #fff;
            -webkit-transform-origin:   50%;
            transform-origin:           50%;
        }
        .stage-main-menu.active .switch-main-menu:before, .stage-main-menu.active .switch-main-menu:after {
            -webkit-animation:  showCloseBtn 500ms ease 2500ms 1 normal;
            animation:          showCloseBtn 500ms ease 2500ms 1 normal;
            -webkit-animation-fill-mode:    both;
            animation-fill-mode:            both;
        }
        .stage-main-menu .switch-main-menu:before {
            left: 0; right: 0; top: 50%;
            height: 1px;
        }
        .stage-main-menu .switch-main-menu:after {
            top: 0; bottom: 0; left: 50%;
            width: 1px;
        }
        .stage-main-menu .main-menu {
            position: absolute; left: 7%; left: 7vw; right: 7%; right: 7vw; top: 7%; top: 7vw; bottom: 0;
            overflow: hidden;
            font-family: inherit;
        }
            .stage-main-menu .main-menu:before {
                content: '';
                position: absolute; left: -100%; right: 0; top: 0; bottom: 0; z-index: 10;
                background: -webkit-linear-gradient(left, rgba(25,25,25,0) 0%, rgba(25,25,25,.7) 30%, rgba(25,25,25,1) 35%);
                background: linear-gradient(to right, rgba(25,25,25,0) 0%, rgba(25,25,25,.7) 30%, rgba(25,25,25,1) 35%);
                -webkit-transition: left 1000ms;
                transition:         left 1000ms;
            }
            .stage-main-menu.active .main-menu:before {
                left: 100%;
                -webkit-transition-duration: 1500ms;
                transition-duration: 1500ms;
                -webkit-transition-delay: 1500ms;
                transition-delay: 1500ms;
            }
            .stage-main-menu .item-delimiter {
                height: 40px; height: 5vh;
                width: 100%;
            }
            .stage-main-menu .item-root {
                display: inline-block; overflow: hidden;
                font-family: inherit;
                width: 200px;
                margin-bottom: 30px; margin-bottom: 2.5vw;
            }
                .stage-main-menu .item-root > a {
                    position: relative;
                    display: inline-block;
                    font-size: 0.875em; font-family: inherit; color: #fff; text-transform: uppercase; text-decoration: none; cursor: default;
                }
                    .stage-main-menu .item-root > a:first-child:after {
                        content: '>';
                        position: absolute; right: -18px; top: -1px;
                        width: 14px; height: 14px;
                        font-family: "AgalarovIcons"; font-size: 14px; color: rgba(255,255,255,.4);
                    }
                    .stage-main-menu .submenu {
                        display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex;
                        flex-flow: column wrap; justify-content: flex-start; align-items: flex-start; align-content: space-between;
                        position: fixed; top: 0; bottom: 0; right: -130%; left: 130%; z-index: 20;
                        padding: 7%; padding: 7vw;
                        opacity: .7;
                        background: rgba(25,25,25,1);
                        font-family: inherit;
                        -webkit-transition: all 500ms;
                        transition:         all 500ms;
                    }
                    .stage-main-menu .submenu.active {
                        opacity: 1;
                        left: 0; right: 0;
                    }
                        .stage-main-menu .item-back {
                            margin: 0 0 15px 25px;
                        }
                            .stage-main-menu .item-back button {
                                position: relative;
                                font-size: 0.875em; line-height: 1.1; font-family: inherit; color: #fff; text-transform: uppercase; cursor: pointer;
                            }
                            .stage-main-menu .item-back button:before {
                                content: '<';
                                position: absolute; left: -25px; top: 0;
                                width: 20px; height: 20px;
                                font-family: 'AgalarovIcons'; font-size: 14px; color: #fff; text-align: center;
                                
                            }
                        .stage-main-menu .item-sub {
                            flex: 0 0 auto;
                            margin: 0 0 15px 35px;
                            font-family: inherit;
                        }
                            .stage-main-menu .item-sub > a {
                                font-size: 0.875em; line-height: 1.1; font-family: inherit; color: #ccc; text-decoration: none;
                                -webkit-transition: color 500ms;
                                transition:         color 500ms;
                            }
                            .stage-main-menu .item-sub > a:hover {
                                color: #fff;
                            } 
            .stage-main-menu .item-root.contacts {
                width: 100%;
            }
            .stage-main-menu .item-root.contacts p {
                display: inline-block; vertical-align: top;
                width: 40%; min-width: 140px;
                margin-bottom: 30px; margin-bottom: 4.5vh;
                font-size: 0.6em; font-family: inherit; color: #ccc; text-transform: uppercase; white-space: nowrap;
            }
                .stage-main-menu .item-root.contacts p a {
                    display: inline-block;
                    font-size: 1.5em; font-family: inherit; color: #fff; text-decoration: none;
                    margin-top: 5px; margin-top: 1vh;
                }
                .stage-main-menu .item-root.contacts .callback {
                    display: none;
                    margin-bottom: 30px; margin-bottom: 4.5vh;
                }
                .stage-main-menu .item-root.contacts .aivi_vr{
                    color: #fff;
                    font-size: 0.8em;
                    font-family: inherit; white-space: nowrap;
                    
                }
                .stage-main-menu .item-root.contacts .aivi_vr a{
                    color: #fff;
                    text-decoration: none;
                    font-family: inherit;
                }
                .stage-main-menu .item-root.contacts .aivi_vr a img{
                    width: auto;
                    height: 10px;
                }
    .form-result {
        padding-top: 50px;
        font-family: "AGopt", sans-serif; font-size: 1.15vw; color: #fff; text-align: center;
    }

/* media queries */

@media (orientation: portrait) and (min-width: 375px) {
    .stage-main-menu .switch-main-menu {
        top: 10vw;
    }
    .stage-main-menu .main-menu {
        left: 8vw; top: 10vw;
    }
    .stage-main-menu .submenu {
        padding: 10% 8%; padding: 10vw 8vw;
    }
    .stage-main-menu .item-delimiter {
        height: 100px; height: 12vh;
    }
    .stage-main-menu .item-root {
        margin-bottom: 30px; margin-bottom: 3vh;
    }
        .stage-main-menu .item-root.contacts p {
            width: 48%;
            margin-bottom: 60px; margin-bottom: 4vh;
        }
        .stage-main-menu .item-root.contacts .callback {
            /*margin-top: 50px; margin-top: 4vh;*/
        }
}

@media (min-height: 375px) and (min-width: 375px) {
    .stage-main-menu .item-root.contacts .callback {
        display: block;
        text-align: center;
        margin-top: 10px; margin-top: 2vh; padding-bottom: 5px;
    }
        .stage-main-menu.active .item-root.contacts .button-simple-rect.animated:after {
            width: 28%;
            opacity: 1;
            -webkit-transition-delay:   2700ms;
            transition-delay:           2700ms;
        }
}


@media (min-width: 400px) and (min-height: 360px) {
    .stage-main-menu .item-root.contacts p {
        margin-bottom: 20px; margin-bottom: 4.5vh;
    }
}

@media (min-width: 600px) {
    .stage-main-menu .main-menu {
        display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex;
        flex-flow: column wrap; justify-content: flex-start; align-items: flex-start; align-content: space-between;
        overflow: hidden;
        font-family: inherit;
    }
        .stage-main-menu .submenu {
            display: block;
        }
            .stage-main-menu .item-delimiter {
                display: none;
            }
            .stage-main-menu .item-root.contacts {
                width: 50%;
            }
                .stage-main-menu .item-root.contacts .callback {
                    text-align: left;
                }
                .stage-main-menu .item-root.contacts p {
                    display: block;
                    width: auto;
                }
            .stage-main-menu .item-root {
                display: inline-block; flex: 0 0 auto;
                width: 50%;
            }
}

@media (min-width: 1024px) {
    .stage-main-menu .item-root.contacts {
        width: 25%;
    }
        .stage-main-menu .item-root.contacts p {
            margin-bottom: 45px; margin-bottom: 2.74vw;
            font-size: 1em; font-size: 1vw;
        }
        .stage-main-menu .item-root.contacts p a {
            font-size: 1.125em; font-size: 1.1vw;
        }
        .stage-main-menu .item-root.contacts .callback {
            margin-bottom: 45px; margin-bottom: 2.74vw;
        }
        .stage-main-menu .item-root.contacts .button-simple-rect {
            /*margin-top: 100px; margin-top: 6.09vw;*/
        }
        .stage-main-menu .item-root.contacts .aivi_vr{
            color: #fff;
            font-size: 1em; font-size: 1vw;
            font-family: inherit; white-space: nowrap;     
        }
        .stage-main-menu .item-root.contacts .aivi_vr a{
            color: #fff;
            text-decoration: none;
            font-family: inherit;
        }
        .stage-main-menu .item-root.contacts .aivi_vr a img{
            width: auto;
            height: 12px;
            height: 0.9vw;
        }
    .stage-main-menu .item-root {
        margin-bottom: 80px; margin-bottom: 4.9vw;
        width: 25%;
    }
        .stage-main-menu .item-root > a {
            font-size: 1.125em; font-size: 1.1vw;
        }
        .stage-main-menu .item-root > a:first-child:after {
            display: none;
        }
        .stage-main-menu .submenu {
            position: relative; top: auto; bottom: auto; left: auto; right: auto; z-index: 5;
            display: block; opacity: 1;
            background: none;
            margin: 40px 0 0 20px; margin: 2.43vw 0 0 1.22vw;
            padding: 0;
        }
            .stage-main-menu .item-back {
                display: none;
            }
            .stage-main-menu .item-sub {
                margin: 8px 0;
            }
            .stage-main-menu .item-sub > a {
                font-size: 1em; font-size: 1vw;
            }
            
}

@media (min-width: 768px) and (orientation: portrait) {
        .stage-main-menu .main-menu {
            max-height: 60%;
        }
}

@media (min-width: 1024px) {
    .stage-main-menu .item-root.contacts .aivi_vr{
        padding-bottom: 2vw;
    }
    .stage-main-menu .politic_link{
        font-family: inherit;
        color: #aeaeae;
        text-decoration: none;
        font-size: 1vw;
        top: 2vw;
        position: relative;
    }
}

@media (max-width: 1023px) {
    .stage-main-menu .item-root.contacts .aivi_vr{
        padding-bottom: 20px;
    }
    .stage-main-menu .politic_link{
        font-family: inherit;
        color: #aeaeae;
        text-decoration: none;
        font-size: 12px;
        top: 20px;
        position: relative;
    }
}

/* preloader */
@-webkit-keyframes clipPath {
    0% {
      -webkit-clip-path: inset(100% 0 0 0);
              clip-path: inset(100% 0 0 0); }
    100% {
      -webkit-clip-path: inset(0);
              clip-path: inset(0); } }
  
  @keyframes clipPath {
    0% {
      -webkit-clip-path: inset(100% 0 0 0);
              clip-path: inset(100% 0 0 0); }
    100% {
      -webkit-clip-path: inset(0);
              clip-path: inset(0); } }

.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: #191919;
    z-index: 20;
}
.preloader .preloader-logo {
    display: inline-block;
    position: absolute;
    background: url("../img/agalarov-logo-full.svg") center/contain no-repeat;
    text-indent: 100%;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -55%);
    transform: translate(-50%, -55%);
    -webkit-clip-path: inset(100% 0 0 0);
            clip-path: inset(100% 0 0 0);
    -webkit-animation: clipPath 3s ease .2s;
            animation: clipPath 3s ease .2s;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}

.preloader .preloader-logo.winter {
    background-size: 60% auto;
    background-position: center 30%;
}
.preloader .preloader-logo.winter:before {
    position: absolute;
    display: block;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("../img/agalarov-logo-winter.svg") center/contain no-repeat;
}

@media (orientation: portrait) {
    .preloader .preloader-logo {
        width: 12vh;
        height: 12vh;
    }
	.preloader .preloader-logo.winter {
        width: 20vh;
        height: 20vh;
    }
}
@media (orientation: landscape) {
    .preloader .preloader-logo {
        width: 12vw;
        height: 12vw;
    }
	.preloader .preloader-logo.winter {
        width: 20vw;
        height: 20vw;
    }
}
/* end of preloader*/



/***********************************************************************************************************/