@font-face {
    font-family: 'DINCondensedC';
    src: url('../fonts/DINCondensedC.eot');
    src: local('DINCondensedC'),
         url('../fonts/DINCondensedC.eot?#iefix') format('embedded-opentype'),
         url('../fonts/DINCondensedC.woff') format('woff'),
         url('../fonts/DINCondensedC.ttf') format('truetype'),
         url('../fonts/DINCondensedC.svg#DINCondensedC') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* Global
------------------------------------------------ */

* { padding: 0; margin: 0; }
html, body { width: 100%; height: 100%; cursor: default; }
body { background: #fff; overflow-y: auto; overflow-x: hidden; min-width: 960px; }

img, fieldset, input, select, button { border: 0; outline: none; }

ul, li { list-style-type: none; }

img { vertical-align: middle; }

.nonselectable { -webkit-touch-callout: none;
-webkit-user-select: none;
 -khtml-user-select: none;
   -moz-user-select: none;
    -ms-user-select: none;
        user-select: none;
}
::-webkit-scrollbar { width: 7px; background: #dedede; }
::-webkit-scrollbar-button { display: none; }
::-webkit-scrollbar-track { background: #dedede; } 
::-webkit-scrollbar-thumb { background: #333;
-webkit-border-radius: 100px;
   -moz-border-radius: 100px;
        border-radius: 100px;
}
::-webkit-scrollbar-thumb:hover { background: #000; } 

/* Base
------------------------------------------------ */

#container { position: absolute; width: 100%; height: 100%; top: 0; left: 0; min-height: 710px; min-width: 974px; overflow: hidden; }
#bg { position: absolute; width: 600%; height: 234px; left: 0; top: 72%; margin-top: -117px; background: repeat-x 0 200% url('../img/bg.png'); }

#rda-award { position: absolute; top: -100px; left: -100px; overflow: hidden; background: transparent url('../img/siam_rda.png') 0 0 no-repeat; width: 98px; height: 98px; text-indent: -9999px; }
#loading-text { position: absolute; top: 62%; left: 50%; width: 150px; height: 165px; margin-top: -75px; margin-left: -82px; background: no-repeat 0 0 url('../img/loading.gif'); }
#top-text { position: absolute; width: 994px; height: 184px; left: 50%; margin-left: -503px; top: 50%; margin-top: -92px; background: no-repeat 0 0 url('../img/top_text.png'); }
#top-page-content-lines { position: absolute; width: 1164px; height: 88px; left: 50%; top: 50%; margin-left:-582px; margin-top: -44px; background: no-repeat 0 0 url('../img/top_text_lines.png'); }
#content-container { display: none; position: absolute; width: 100%; top: 20%; bottom: 22%; }
#pages-container { position: absolute; top: 50%; left: 50%; bottom: 0; z-index: 5; margin-left: -80px; height: 100%; }
#page-content-1, #page-content-2, #page-content-3, #page-content-4, #page-content-5 { position: absolute; top: 16%; width: 540px; height: 180px; }
#page-content-1 { background: no-repeat 0 0 url('../img/text_1.png'); }
#page-content-2 { background: no-repeat 0 0 url('../img/text_2.png'); }
#page-content-3 { background: no-repeat 0 0 url('../img/text_3.png'); }
#page-content-5 { position: absolute; left: 50%; margin-left: -367px; argin-left: -407px; top: 0; width: 881px; idth: 962px; height: auto; margin-top: 3px; bottom: 13px; border: 6px solid #e7e7e7; }

.page-content_active { z-index: 10; }

#text-logo { position: absolute; width: 195px; height: 35px; background: no-repeat 0 0 url('../img/text_logo.png'); }
#text-logo:hover { background-position: 0 -35px; }

/* Menu
------------------------------------------------ */

#menu { display: none; position: absolute; height: 48px; width: 600px; margin-left: 62px; left: 50%; bottom: 12%; margin-bottom: -8px; }
#menu-bg { position: absolute; width: 380px; height: 6px; top: 22px; left: 22px; background: #000000; overflow: hidden; }
#menu-bg-line { position: absolute; background-color: #FF8586; width: 0; height: 6px; }
.menu-btn { position: relative; float:left; width: 48px; height: 48px; margin-right: 46px; cursor: pointer; }
.menu-btn__title { position: absolute; top: -25px; width: 100%; text-align: center; font-size: 18px; font-family: 'DINCondensedC'; color: #636363; }
.menu-btn__circle { position: absolute; top: 50%; left: 50%; margin: -22px 0 0 -22px; background: transparent; width: 44px; height: 44px;
-webkit-border-radius: 30px;
   -moz-border-radius: 30px;
        border-radius: 30px;
-webkit-transition: background 0.35s ease;
   -moz-transition: background 0.35s ease;
     -o-transition: background 0.35s ease;
        transition: background 0.35s ease;
}

.menu-btn__circle:before,
.menu-btn__circle:after { position: absolute; top: 50%; left: 50%; content: '';
-webkit-border-radius: 30px;
   -moz-border-radius: 30px;
        border-radius: 30px;
-webkit-transition: background 0.35s ease, border 0.35s ease;
   -moz-transition: background 0.35s ease, border 0.35s ease;
     -o-transition: background 0.35s ease, border 0.35s ease;
        transition: background 0.35s ease, border 0.35s ease;
}
.menu-btn__circle:before { margin: -15px 0 0 -15px; border: 4px solid #000; background: #fff; width: 22px; height: 22px; }
.menu-btn__circle:after { margin: -7px 0 0 -7px; background: #e7e7e7; width: 14px; height: 14px; }

.menu-btn:hover .menu-btn__circle { background: #e7e7e7; }
.menu-btn:hover .menu-btn__circle:after { background: #636363; }
.menu-btn_active .menu-btn__title { color: #ff8586; }
.menu-btn_active .menu-btn__circle { margin: -20px 0 0 -20px; background: #ff8586; width: 40px; height: 40px; }
.menu-btn_active:hover .menu-btn__circle { background: #ff8586; }
.menu-btn_active .menu-btn__circle:before {}
.menu-btn_active .menu-btn__circle:after { background: #ff8586; }
.menu-btn_active:hover .menu-btn__circle:after { background: #ff8586; }

.ie678 .menu-btn__circle,
.ie678 .menu-btn__circle:before,
.ie678 .menu-btn__circle:after { display: none; }
.ie678 .menu-btn { background: transparent url('../img/menu_circle.png') 0 0 no-repeat; }
.ie678 .menu-btn:hover { background-position: 0 -48px; }
.ie678 .menu-btn_active,
.ie678 .menu-btn_active:hover { background-position: 0 -96px; }

/* Gallery
------------------------------------------------ */

.gallery-holder { position: relative; left: 17px; overflow: hidden; width: 498px; height: 207px; }
.gallery { position: absolute; top: 0; left: 0; }
.gallery__item { position: absolute; top: 0; left: 0; background: rgba(255,133,134,0.5); width: 63px; height: 63px; }
.gallery__link { display: block; }

.gallery-arrows { position: absolute; top: 50%; margin-top: -8px; height: 40px; cursor: pointer; }
.gallery-arrows:before,
.gallery-arrows:after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; content: ''; background: transparent url('../img/gallery_arrows.png') 0 0 no-repeat; cursor: pointer;
-webkit-transition: all 0.3s ease;
   -moz-transition: all 0.3s ease;
     -o-transition: all 0.3s ease;
        transition: all 0.3s ease;
}
.gallery-arrows:before { opacity: 1; }
.gallery-arrows:after { opacity: 0; }
.gallery-arrows:hover:before { opacity: 0; }
.gallery-arrows:hover:after { opacity: 1; }
.gallery-arrows_disabled { opacity: 0.3; cursor: default; }
.gallery-arrows_disabled:hover:before { opacity: 1; }
.gallery-arrows_disabled:hover:after { opacity: 0; }

#gallery-arr-left { left: -32px; width: 34px; }
#gallery-arr-left:after { background-position: 0 -40px; }
#gallery-arr-right { right: -18px; width: 31px; }
#gallery-arr-right:before { background-position: -34px 0; }
#gallery-arr-right:after { background-position: -34px -40px; }

.ie678 .gallery-arrows:before,
.ie678 .gallery-arrows:after { display: none; }
.ie678 .gallery-arrows { background: transparent url('../img/gallery_arrows.png') 0 0 no-repeat; }
.ie678 #gallery-arr-left:hover { background-position: 0 -40px; }
.ie678 #gallery-arr-right { background-position: -34px 0; }
.ie678 #gallery-arr-right:hover { background-position: -34px -40px; }
.ie678 #gallery-arr-left.gallery-arrows_disabled:hover { background-position: 0 0; }
.ie678 #gallery-arr-right.gallery-arrows_disabled:hover { background-position: -34px 0; }

#gallery-hover { display: none; position: absolute; top: -20px; left: -19px; background: transparent url('../img/gallery_cat.png') 0 0 no-repeat; width: 100px; height: 86px; cursor: pointer; }
.gallery-hover__part { position: absolute; top: 0; left: 0; width: 100px; height: 86px; }
.gallery-hover__lmus { background: transparent url('../img/gallery_cat_lmus.png') 0 0 no-repeat; }
.gallery-hover__rmus { background: transparent url('../img/gallery_cat_rmus.png') 0 0 no-repeat; }
.gallery-hover__lear { background: transparent url('../img/gallery_cat_lear.png') 0 0 no-repeat; }
.gallery-hover__rear { background: transparent url('../img/gallery_cat_rear.png') 0 0 no-repeat; }

@-webkit-keyframes rotatePlus {
    0% { -webkit-transform: rotate(0deg); }
    50% { -webkit-transform: rotate(5deg); }
    100% { -webkit-transform: rotate(0deg); }
}
@-moz-keyframes rotatePlus {
    0% { -moz-transform: rotate(0deg); }
    50% { -moz-transform: rotate(5deg); }
    100% { -moz-transform: rotate(0deg); }
}
@-o-keyframes rotatePlus {
    0% { -o-transform: rotate(0deg); }
    50% { -o-transform: rotate(5deg); }
    100% { -o-transform: rotate(0deg); }
}
@keyframes rotatePlus {
    0% { transform: rotate(0deg); }
    50% { transform: rotate(5deg); }
    100% { transform: rotate(0deg); }
}

@-webkit-keyframes rotateMinus {
    0% { -webkit-transform: rotate(0deg); }
    50% { -webkit-transform: rotate(-5deg); }
    100% { -webkit-transform: rotate(0deg); }
}
@-moz-keyframes rotateMinus {
    0% { -moz-transform: rotate(0deg); }
    50% { -moz-transform: rotate(-5deg); }
    100% { -moz-transform: rotate(0deg); }
}
@-o-keyframes rotateMinus {
    0% { -o-transform: rotate(0deg); }
    50% { -o-transform: rotate(-5deg); }
    100% { -o-transform: rotate(0deg); }
}
@keyframes rotateMinus {
    0% { transform: rotate(0deg); }
    50% { transform: rotate(-5deg); }
    100% { transform: rotate(0deg); }
}

.gallery-hover__rmus,
.gallery-hover__lear {
-webkit-animation: rotatePlus 0.5s infinite;
   -moz-animation: rotatePlus 0.5s infinite;
     -o-animation: rotatePlus 0.5s infinite;
        animation: rotatePlus 0.5s infinite;
}

.gallery-hover__lmus,
.gallery-hover__rear {
-webkit-animation: rotateMinus 0.5s infinite;
   -moz-animation: rotateMinus 0.5s infinite;
     -o-animation: rotateMinus 0.5s infinite;
        animation: rotateMinus 0.5s infinite;
}

/* Popup
------------------------------------------------ */

#overlay { display: none; position: absolute; top: 0; left: 0; z-index: 100; width: 100%; height: 100%;
background: #000;
background: -webkit-radial-gradient(50% 50%, circle, rgba(0,0,0,.3), rgba(0,0,0,.9));
background:    -moz-radial-gradient(50% 50%, circle, rgba(0,0,0,.3), rgba(0,0,0,.9));
background:     -ms-radial-gradient(50% 50%, circle, rgba(0,0,0,.3), rgba(0,0,0,.9));
background:      -o-radial-gradient(50% 50%, circle, rgba(0,0,0,.3), rgba(0,0,0,.9));
background:         radial-gradient(50% 50%, circle, rgba(0,0,0,.3), rgba(0,0,0,.9));
}
#popup { display: none; position: absolute; top: 20%; left: 50%; bottom: 22%; z-index: 101; margin-left: -487px; padding: 13px 0 19px; border: 6px solid #e7e7e7; background: #fff; width: 962px; min-height: 409px; }

.popup__close { position: absolute; top: 12px; right: 12px; z-index: 2; width: 40px; height: 42px; cursor: pointer; text-indent: -9999px; }
.popup__close:before,
.popup__close:after { position: absolute; top: 0; left: 0; content: ''; background: transparent url('../img/popup_close.png') 0 0 no-repeat; width: 40px; height: 42px; cursor: pointer;
-webkit-transition: -webkit-transform 0.5s ease,
                    opacity 0.3s ease;
   -moz-transition: -moz-transform 0.5s ease,
                    opacity 0.3s ease;
     -o-transition: -o-transform 0.5s ease,
                    opacity 0.3s ease;
        transition: transform 0.5s ease,
                    opacity 0.3s ease;
}
.popup__close:after { opacity: 0; background-position: 0 -42px; }
.popup__close:hover:before,
.popup__close:hover:after {
-webkit-transform: rotate(360deg);
   -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
     -o-transform: rotate(360deg);
        transform: rotate(360deg);
-webkit-transform-origin: 50% 50%;
   -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
     -o-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
 }
.popup__close:hover:before { opacity: 0; }
.popup__close:hover:after { opacity: 1; }

.popup__arr { position: absolute; top: 50%; z-index: 2; height: 95px; cursor: pointer; }
.popup__arr:before,
.popup__arr:after { position: absolute; top: 0; left: 0; content: ''; background: transparent url('../img/popup_arr.png') 0 0 no-repeat; height: 95px; cursor: pointer;
-webkit-transition: all 0.3s ease;
   -moz-transition: all 0.3s ease;
     -o-transition: all 0.3s ease;
        transition: all 0.3s ease;
}
.popup__arr:after { opacity: 0; }
.popup__arr:hover:before { opacity: 0; }
.popup__arr:hover:after { opacity: 1; }

.popup__prev { left: 66px; margin-top: -54px; width: 52px; }
.popup__prev:before,
.popup__prev:after { width: 52px; }
.popup__prev:after { background-position: 0 -95px; }
.popup__prev:hover { left: 65px; }

.popup__next { right: 62px; margin-top: -50px; width: 55px; }
.popup__next:before,
.popup__next:after { width: 55px; }
.popup__next:before { background-position: -52px 0; }
.popup__next:after { background-position: -52px -95px; }
.popup__next:hover { right: 61px; }

.popup__arr_disabled { opacity: 0.3; cursor: default; }
.popup__arr_disabled.popup__prev:hover { margin-left: -415px; }
.popup__arr_disabled.popup__next:hover { margin-left: 364px; }
.popup__arr_disabled:hover:before { opacity: 1; }
.popup__arr_disabled:hover:after { opacity: 0; }

.popup__image-holder { position: absolute; top: 50%; margin-top: -205px; z-index: 1; width: 100%; height: 409px; text-align: center; }
.popup__number { position: absolute; top: 10px; left: 10px; z-index: 2; font-size: 18px; font-family: 'DINCondensedC'; color: #e7e7e7; }

.popup__loading { position: absolute; top: 50%; left: 50%; margin: -60px 0 0 -60px; background: #fff url('../img/loading.gif') -20px -38px no-repeat; width: 120px; height: 120px;
-webkit-border-radius: 100px;
   -moz-border-radius: 100px;
        border-radius: 100px;
}

.popup-loving_eyes { position: absolute; display: none; z-index: 100; top: 50%; left: 50%; margin: -359px 0 0 -504px; width: 998px; height: 718px; background: #fff; border: 4px solid #e7e7e7; }
.popup-loving_eyes a:hover, .popup-loving_eyes a:link, .popup-loving_eyes a:active, .popup-loving_eyes a:visited { color: #000; font-weight: 700; font-family: 'DINcondensedC'; }
.popup-loving_eyes-title { width: 890px; height: 124px; margin: 60px 0 13px 50px; background: transparent url('../img/lovingeyes/title.png') 0 0 no-repeat; }
.popup-loving_eyes-text { float: left; width: 354px; height: 453px; margin: 0 0 0 21px; padding:  0 0 0 30px; background: #fff url('../img/lovingeyes/text.png') 0 57px no-repeat; }
.popup-loving_eyes-people { float: right; width: 550px; height: 396px; margin: 54px 20px 0 0; background: transparent/* url('../img/lovingeyes/people.png') 0 0 no-repeat*/; }

/* Footer
------------------------------------------------ */

#footer { display: none; position: absolute; width: 974px; left: 50%; bottom: 45px; margin-left: -487px; }
#footer-line { width: 974px; height: 8px; background-color: #e7e7e7; overflow: hidden; }
#footer-line-effect { position: absolute; width: 200px; height: 8px; background: no-repeat 0 0 url('../img/footer_effect.png'); }
#footer-logo, #footer-copy, #footer-voshod, #footer-wow { position: absolute; }
#footer-logo { width: 65px; height: 38px; background: no-repeat 0 0 url('../img/siamcat_black.png'); left: 0; top: 15px; }
#footer-copy { width: 105px; height: 9px; background: no-repeat 0 0 url('../img/copy.png'); left: 75px; top: 28px; }

#footer-voshod { right: 56px; top: 19px; overflow: hidden; width: 85px; height: 26px; text-indent: -9999px; }
#footer-voshod:before,
#footer-voshod:after { position: absolute; top: 0; left: 0; content: ''; background: transparent url('../img/voshod.png') 0 0 no-repeat; width: 85px; height: 26px; cursor: pointer;
-webkit-transition: all 0.3s ease;
   -moz-transition: all 0.3s ease;
     -o-transition: all 0.3s ease;
        transition: all 0.3s ease;
}
#footer-voshod:after { opacity: 0; background-position: 0 -26px; }
#footer-voshod:hover:before { opacity: 0; }
#footer-voshod:hover:after { opacity: 1; }

#footer-wow { right: 0; top: 26px; overflow: hidden; width: 38px; height: 10px; text-indent: -9999px; }
#footer-wow:before,
#footer-wow:after { position: absolute; top: 0; left: 0; content: ''; background: transparent url('../img/wow.png') 0 0 no-repeat; width: 38px; height: 10px; cursor: pointer;
-webkit-transition: all 0.3s ease;
   -moz-transition: all 0.3s ease;
     -o-transition: all 0.3s ease;
        transition: all 0.3s ease;
}
#footer-wow:after { opacity: 0; background-position: 0 -10px; }
#footer-wow:hover:before { opacity: 0; }
#footer-wow:hover:after { opacity: 1; }

#social-container { display: none; position: absolute; height: 22px; bottom : 18%; left: 50%; margin-left: -487px; }
.social__item { position: relative; float: left; height: 22px; }

#music-container { display: none; position: absolute; width: 80px; left: 50%; margin-left: -487px; bottom: 12%; height: 29px; }
#music-icon { position: absolute; background: no-repeat 0 0 url('../img/music.png'); width: 20px; height: 29px; }
#music-listen-text { position: absolute; background: no-repeat 0 0 url('../img/listen.png'); width: 55px; height: 29px; left: 28px; }

#girl-container { position: absolute; width: 530px; height: 499px; top: -49px; left: 50%; margin-left: -570px; overflow: hidden; }
.frameImage { float: left; margin: 0; padding: 0; }

#drag-arrow { display: none; position: absolute; width: 129px; height: 77px; background: no-repeat 0 0 url('../img/drag.png'); left: 50%; margin-left: -80px; top: 68%; }