*
{
    margin: 0;;
    padding: 0;
}
html
{
    height: 100%;
}
body
{
    font-family: 'Trebuchet MS', sans-serif;
    font-size: 11px;
    line-height: 1.3em;

    position: relative;

    height: 100%;

    color: #fff;
    background: #0099d0 url(../images/body_bg_t_x.gif) repeat-x;
}
img
{
    border: 0;
}
table
{
    width: 100%;

    border-collapse: collapse;

    border: 0;
}
ul
{
    list-style: none;
}

a
{
    color: #fff;
    outline: none;
}
a:hover
{
    text-decoration: none;
}
h1 {
    line-height: 20px;
}
h3,
h4
{
    font-family: 'Times New Roman';
}



/*--- framework ---*/
.main-box {
    height: 100%;
}
.page_wrap
{
    width: 978px;
    min-height: 100%;
    margin: 0 auto;

    background: url(../images/page_bg_y.gif) repeat-y;

    _height: 100%;
}
.page
{
    position: relative;

    background: url(../images/page_bg_t.webp) top center no-repeat;
}
.header
{
    position: relative;

    height: 450px;
}
.main_content
{
    z-index: 1;

    display: table;

    width: 100%;
    height: auto;
}
.center_column
{
    float: right;

    width: 550px;
    padding: 20px 54px 66px 0;
}
.center_column.width1
{
    width: 590px;
}
.column_all_width
{
    float: left;

    width: 871px;
    padding-bottom: 66px;
    padding-left: 54px;
}
.left_column
{
    float: left;

    width: 256px;
    padding: 20px 0 66px 54px;
}
.footer
{
    position: relative;
    z-index: 2;

    width: 970px;
    height: 41px;
    margin: -41px auto 0 auto;

    background: url(../images/footer_bg_t_x.gif) repeat-x top;
}

/*--- header ---*/
a.logo
{
    position: absolute;
    top: 27px;
    left: 333px;
}
.pad
{
    padding: 0 15px;
}
.top_menu
{
    position: absolute;
    top: 119px;
    left: 60px;
}
.top_menu li
{
    float: left;

    padding: 0 11px;

    background: url(../images/top_menu_v_line.gif) 100% 50% no-repeat;
}
.top_menu li a
{
    font-family: 'Times New Roman';
    font-size: 15px;

    float: left;

    padding-left: 3px;

    text-decoration: none;
    text-transform: uppercase;

    background: url(../images/top_menu_item_bg_l.gif) 0 -100px no-repeat;
}
.top_menu li a span
{
    float: left;

    padding-right: 3px;

    background: url(../images/top_menu_item_bg_r.gif) 0 -100px no-repeat;
}
.top_menu li a span b
{
    line-height: 44px;

    float: left;

    height: 48px;
    padding: 0 7px;

    background: url(../images/top_menu_item_bg_c.gif) 0 -100px no-repeat;
}
.top_menu li.last
{
    background: none;
}
.top_menu li a:hover
{
    color: #7a7f85;
    background-position: left top;
}
.top_menu li a:hover span
{
    background-position: right top;
}
.top_menu li a:hover span b
{
    cursor: pointer;

    background-position: center top;
}

.album
{
    position: absolute;
    top: 182px;
    left: 54px;

    width: 870px;
    height: 257px;

    background: #0176b0 url(../images/album_bg.webp) no-repeat;
}
.album img.photo
{
    position: absolute;
    top: 19px;
    left: 59px;

    width: 306px;
    height: 195px;
    padding: 5px 8px 10px 5px;

    background: #fff url(../images/album_frame.webp) no-repeat;
}
.album .btn_previous
{
    position: absolute;
    top: 113px;
    left: 31px;

    width: 11px;
    height: 22px;

    background: url(../images/album_previous.gif) left no-repeat;
}
.album .btn_next
{
    position: absolute;
    top: 113px;
    left: 392px;

    width: 11px;
    height: 22px;

    background: url(../images/album_next.gif) left no-repeat;
}
.album .btn_previous span,
.album .btn_next span
{
    display: none;
}
.album .btn_previous:hover,
.album .btn_next:hover
{
    background-position: right top;
}
.album .btn_previous.disabled:hover,
.album .btn_next.disabled:hover
{
    cursor: default;

    background-position: left top;
}
.album h3
{
    font-size: 25px;
    font-weight: normal;
    line-height: 1.3em;

    position: absolute;
    top: 9px;
    left: 474px;

    width: 375px;

    text-align: center;
    letter-spacing: 2px;
}
.album div.content
{
    font-size: 13px;

    position: absolute;
    top: 59px;
    left: 474px;

    width: 162px;
}
.album div.content .more
{
    font-family: 'Times New Roman';
    font-size: 14px;
    line-height: 23px;

    float: right;

    width: 103px;
    height: 23px;
    margin-top: 10px;

    text-align: center;
    text-decoration: none;

    background: url(../images/album_more_bg.gif) no-repeat;
}
.album div.content .more:hover
{
    text-decoration: underline;
}
.album .zebra
{
    position: absolute;
    top: 57px;
    left: 653px;

    width: 205px;
}
.album .zebra li
{
    font-family: arial;
    font-size: 12px;

    display: block;

    height: 15px;
    padding: 3px 0 0 6px;

    letter-spacing: -.03em;
    text-transform: uppercase;

    background: url(../images/album_zebra_list_item_blue.gif) no-repeat;
}
.album .zebra li.orange
{
    background-image: url(../images/album_zebra_list_item_orang.gif);
}
.album .zebra li.first
{
    background-image: url(../images/album_zebra_list_item_first.gif);
}
.album .zebra li.last
{
    height: 21px;

    background-image: url(../images/album_zebra_list_item_last_blue.gif);
}
.album .zebra .orange.last
{
    background-image: url(../images/album_zebra_list_item_last_orange.gif);
}

/*--- main---*/
.main_content h3
{
    font-size: 15px;

    padding-bottom: 15px;

    text-transform: uppercase;

    color: #07faff;
}

.left_column .block_wrap
{
    width: 254px;

    background: #0476af url(../images/left_block_bg_t.webp) top no-repeat;
}
.left_column .block
{
    padding: 20px 12px 30px 12px;

    background: url(../images/left_block_bg_b.webp) bottom no-repeat;
}
.left_column .block span.more
{
    display: block;

    padding: 35px 5px 10px 0;

    text-align: right;
}
.left_column .block span.more a
{
    font-family: 'Times New Roman';
    font-size: 13px;

    text-decoration: none;
    text-transform: uppercase;
}
.left_column .block span.more a:hover
{
    text-decoration: underline;
}
.left_column h3
{
    text-align: center;
}

.center_column .block
{
    float: right;

    width: 554px;
    margin-bottom: 12px;

    background: #e16a0b url(../images/center_block_bg_y.gif) repeat-y;
}
.center_column .block:after
{
    display: block;

    height: 10px;

    content: '';

    background: url(../images/center_block_bg_b.gif) bottom no-repeat;
}
.center_column .block
{
    //zoom: 1;
    //behavior: expression(!this.isInserted==true ? this.isInserted=(this.innerHTML = 
'' + this.innerHTML + '<span style="display:block; height:10px; background:url(../images/center_block_bg_b.gif) bottom no-repeat;"></span>') : "");
}
.center_column .block h4
{
    font-size: 15px;
    line-height: 24px;

    height: 28px;
    margin-bottom: 2px;
    padding-left: 12px;

    color: #07faff;
    background: #0080b8 url(../images/center_block_bg_t.webp) no-repeat;
}
.center_column .block p
{
    font-size: 12px;
    font-weight: bold;

    margin: 10px 12px;
}

.column_all_width .block
{
    float: right;

    width: 870px;
    margin-bottom: 12px;

    background: #e16a0b url(../images/column_all_width_block_bg_y.gif) repeat-y;
}
.column_all_width .block:after
{
    display: block;

    height: 10px;

    content: '';

    background: url(../images/column_all_width_block_bg_b.gif) bottom no-repeat;
}
.column_all_width .block
{
    //zoom: 1;
    //behavior: expression(!this.isInserted==true ? this.isInserted=(this.innerHTML = 
'' + this.innerHTML + '<span style="display:block; height:10px; background:url(../images/column_all_width_block_bg_b.gif) bottom no-repeat;"></span>') : "");
}
.column_all_width .block h4
{
    font-size: 15px;
    line-height: 24px;

    height: 28px;
    margin-bottom: 2px;
    padding-left: 12px;

    color: #07faff;
    background: #0080b8 url(../images/column_all_width_block_bg_t.webp) no-repeat;
}
.column_all_width .block p
{
    font-size: 12px;
    font-weight: bold;

    margin: 10px 12px;
}

/*--- footer ---*/
.footer .txt
{
    padding-top: 20px;

    text-align: center;
}
.footer .counter
{
    float: right;

    padding: 7px 3px 0 3px;
}

/*--- main content ---*/
.reservation_tel
{
    display: inline;
    float: left;

    margin: 15px 0 0 0;
}
.online_reservation
{
    position: relative;

    display: inline;
    float: left;

    width: 277px;
    height: 147px;
    margin: 15px 0 0 25px;

    background: url(../images/reservation_bg.webp) no-repeat;
}
.online_reservation h3
{
    padding: 8px 0;

    text-align: center;

    color: #fff;
}
.online_reservation p
{
    padding: 0 12px;
}
.online_reservation a
{
    font-family: 'Times New Roman';
    font-size: 15px;

    position: absolute;
    top: 98px;
    left: 127px;

    text-decoration: none;
    text-transform: uppercase;

    color: #fff;
}
.online_reservation a:hover
{
    text-decoration: underline;
}
.left_column .reservation_tel,
.left_column .online_reservation
{
    margin-left: 0;
}


.nums .zebra
{
    float: left;

    width: 205px;
    padding-left: 10px;
}
.nums .zebra li
{
    font-family: arial;
    font-size: 12px;

    display: block;

    height: 15px;
    padding: 3px 0 0 6px;

    letter-spacing: -.03em;
    text-transform: uppercase;

    background: url(../images/num_zebra_list_item_blue.gif) no-repeat;
}
.nums .zebra li.orange
{
    background-image: url(../images/num_zebra_list_item_orang.gif);
}
.nums .zebra li.first
{
    background-image: url(../images/num_zebra_list_item_first.gif);
}
.nums .zebra li.last
{
    height: 20px;

    background-image: url(../images/num_zebra_list_item_last.gif);
}
.nums .zebra .orange.last
{
    background-image: url(../images/num_zebra_list_item_last_orange.gif);
}
.nums img
{
    float: left;

    width: 148px;
    height: 96px;
    padding: 4px;

    background: url(../images/num_img_frame.gif);
}
.nums h4
{
    font-size: 16px;
    line-height: 24px;

    clear: left;

    height: 28px;
    padding-left: 4px;

    color: #07faff;
}
.nums .item
{
    display: table;

    width: 100%;
    padding-bottom: 15px;
}

.imgLoading
{
    position: fixed;
    z-index: 10000;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

     
}

.imgLoading p
{
    position: absolute;
    top: 50%;
    left: 50%;

    width: 8.6em;
    margin: -1em 0 0 -4.3em;
}

.imgLoading img
{
    position: absolute;
    top: -200px;
    left: -300px;

    margin: -8px 0 0 0;

    opacity: 1;
}
.block.block_bg {
  background: none !important;
}
.center_column .block h4.bg
{
    font-size: 15px;
    line-height: 24px;

    float: right;

    width: 542px;
    height: 28px;
    margin-bottom: 12px;
    padding-left: 12px;

    color: #07faff;
     
}
#top_menu_btn {
    display: none;
}
@media screen and (max-width: 1024px){
  .page_wrap {
    width: 97%;
  }
  .page_wrap, .page {
    background-size: contain; 
  }
  .album {
    display: none;
  }
/*  .album {
    left: 50%;
    transform: translateX(-50%);
    background-size: cover;
    background-position: center;
  }*/
  .header {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: initial;
  }
  a.logo {
    position: initial;
    padding-top: 8px;
  }
  .top_menu {
    position: initial;
    display: flex;
    justify-content: center;
    margin: 33px 0;
  }
  .top_menu li {
    float: none;
    padding: 0 3px;
  }
  .footer {
    width: 96%;
  }
/*  .album {
    position: initial;
    width: 90%;
    background-size: cover;
    background-position: center;
    height: initial;
  }*/
  .center_column {
    float: none;
    padding: 20px 20px 65px 18px;
  }
  .left_column {
    float: none;
    margin-left: 11px;
    width: 30%;
    padding: 20px 0 66px 0px;
  }
  .left_column .block_wrap {
    width: 100%;
    background-size: contain;
  }
  .main_content {
    display: flex;
    flex-direction: row-reverse;
  }
  .online_reservation {
    margin: 15px 0 0 0px;
  }
  .center_column.width1 {
    width: 70%;
  }
  a.logo {
    width: 100%;
    display: flex;
    justify-content: center;
  }
  a.logo img {
    width: 40%;
  }
}
@media screen and (max-width: 768px) {
    .main_content {
        flex-direction: column;
    }
  .main_content.index {
    flex-direction: column-reverse !important;
  }
  .center_column {
    width: 95% !important;
  }
  .left_column {
    width: 95%;
    padding: 20px 0 24px 0px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
  }
  .top_menu {
    transition: top .5s ease-in-out;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: fixed;
    left: 50%;
    top: -110%;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
    background: #0099d0 url(../images/body_bg_t_x.gif) repeat-x;
    z-index: 3;
    margin: 0;
  }
  .top_menu li {
    background: none;
  }
  .top_menu.active {
    top: 0;
  }
  #top_menu_btn {
    position: absolute;
    display: initial;
    z-index: 4;
    right: 31px;
    top: 23px;
    text-decoration: none;
    font-size: 38px;
    transform: rotate(90deg);
    transition: transform .5s ease-in-out;
  }
  #top_menu_btn.active {
    position: fixed;
    transform: rotate(270deg);
    right: 38px;
  }
}
@media screen and (max-width: 468px) {
    .main_content{ 
        margin-top: 20px;
    }
    .online_reservation p {
        padding: 7px 0px;
    }
    .online_reservation {
        background: none;
    }
    .online_reservation a {
        left: initial;
        top: 75px;
    }
    .reservation_tel {
        width: 90%;
        margin: 0 auto;
        float: none;
    }
    .center_column {
        padding: 0 !important;
        margin: 0 auto;
    }
    .center_column .block {
        width: 95%;
        margin: 0 auto !important;
        margin-bottom: 12px !important;
        float: none;
    }
    .center_column .block_bg {
        width: 95%;
    }
    .center_column .block.block_bg:after{
        display: none;
    }
    .center_column .block h4.bg {
        float: none;
        width: initial;
    }
}