﻿.image-show {
    display:none;
}
    /*.fancybox-slide {
        overflow-x: hidden !important;
        overflow-y: hidden !important;
    }

    .fancybox-inner .image-show {
        display: block;
        text-align: center;
        width: 100%;
        background: none;
    }

    .page-product .fancybox-navigation {
        background: none;
    }

    .page-product .fancybox-stage {
        top: 0;
    }

    .page-product .fancybox-button svg path {
        display: none;
    }

    .page-product .fancybox-navigation .fancybox-button {
        top: calc(50% - 32px);
    }

    .page-product .fancybox-navigation .fancybox-button--arrow_left div {
        position: absolute;
        top: calc(50% - 32px);
        left: calc(100% - 70px);
        background: url(../upload/icon/pre.png) no-repeat center center;
        background-size: contain;
        z-index: 9;
        opacity: 1;
        height: 65px;
        width: 65px;
    }

    .page-product .fancybox-navigation .fancybox-button--arrow_left:hover div {
        background: url(../upload/icon/pre-hover.png) no-repeat center center;
        background-size: contain;
    }

    .page-product .fancybox-navigation .fancybox-button--arrow_right div {
        position: absolute;
        top: calc(50% - 32px);
        right: calc(100% - 75px);
        background: url(../upload/icon/next.png) no-repeat center center;
        background-size: contain;
        z-index: 9;
        opacity: 1;
        height: 65px;
        width: 65px;
    }

    .page-product .fancybox-navigation .fancybox-button--arrow_right:hover div {
        background: url(../upload/icon/next-hover.png) no-repeat center center;
        background-size: contain;
    }

    .page-product .fancybox-navigation .fancybox-button {
        visibility: visible;
        opacity: 1;
    }

    .page-product .fancybox-inner {
        max-width: 1000px;
        margin-left: auto;
        margin-right: auto;
    }

    .page-album .fancybox-button--close,
    .page-album .fancybox-toolbar {
        z-index: 9999999;
    }

    .page-album .fancybox-caption, .page-album .fancybox-infobar, .page-album .fancybox-navigation .fancybox-button, .page-album .fancybox-toolbar {
        opacity: 1 !important;
        visibility: initial !important;
    }

    .page-album .fancybox-bg:before {
        height: 130px;
        content: '';
        width: 100%;
        background-color: #0e0e0e;
        position: absolute;
    }

    .page-album .fancybox-inner {
        max-width: 1460px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .page-album .fancybox-navigation {
        z-index: 9;
    }

    .page-album .fancybox-stage {
        width: 65% !important;
    }

    .page-album .fancybox-caption--separate {
        width: 35% !important;
        text-align: left;
    }

    .page-album .fancybox-caption--separate {
        padding-top: 60px !important;
        top: 170px !important;
        left: auto !important;
        right: 0 !important;
    }

    .page-album .fancybox-navigation .fancybox-button {
        opacity: 1 !important;
    }

    .page-album .fancybox-image {
        width: 100% !important;
    }

    .page-album .fancybox-content {
        width: 90% !important;
        height: calc(90vh - 100px) !important;
        top: 5vh !important;
        left: 5% !important;
        right: auto !important;
        transform: none !important;
        bottom: 5vh !important;
    }*/
.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
    clear: both;
}
@keyframes minus {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(15deg);
    }
}
#sidebar [aria-expanded="true"] > .fa {
    transform: rotate(90deg);
    transition: 0.2s;
}
#sidebar [aria-expanded="false"] > .fa {
    transform: rotate(0deg);
    transition: 0.2s;
}
/*[aria-expanded="false"] > .expanded, [aria-expanded="true"] > .collapsed {display: none;}*/
[aria-expanded="false"] > .expanded {
    font-size: 22px;
    font-weight:300;
    position: absolute;
    height: 26px;
    width: 26px;
    line-height: 26px;
    text-align: center;
    top: 1px;
    color: #000;
    right: 0;
    transition: 0.2s -webkit-transform;
    background:url(../upload/icon/plus.png) no-repeat;
    background-size:contain;
}

[aria-expanded="true"] > .expanded {
    font-size: 22px;
    font-weight:300;
    position: absolute;
    height: 26px;
    width: 26px;
    line-height: 26px;
    text-align: center;
    top: 1px;
    right: 0;
    transform: rotate(90deg);
    color: #fff;
    transition: 0.2s -webkit-transform;
    background:url(../upload/icon/plus-hover.png) no-repeat;
    background-size:contain;
}
.bg-bottom {
    margin-bottom:0;
    transition: 0.5s;
}
.block-item-thumb [aria-expanded="true"] .bg-bottom {
    transition: 0.5s;
}
.expanded {
    animation-name: slide-in;
    animation-duration: 2s !important;
}
@media (min-width: 1200px) {
    .container {
        max-width: 1240px;
    }
    footer .container {
        max-width:1600px;
    }
}
@media only screen and (max-width: 1024px) {
    .main-menu span + span {
        display:none;
    }
    .main-menu {
        border:none;
    }
    .main-menu:hover {
        background:none;
        color:#000;
    }
    .m-bar,
    .m-bar:before,
    .m-bar:after {
        width:25px;
    }
    .col-category {
        width:50px;
    }
    .main-menu span {
        left: calc(50% - 10px);
    }
    .main-menu:hover .m-bar, .main-menu:hover .m-bar:before, .main-menu:hover .m-bar:after {
        background-color:#000;
    }
    header .logo {
        left: calc(50% - 80px);
    }
    .nav-bar,
    .search {
        display:none !important;
    }
    .breadcrumb {
        padding-left:15px;
    }
}
@media only screen and (min-width: 1024px){
    .col-design {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
    .col-design .blog-name,
    .col-design .blog-info {
        padding-left:10%;
        padding-right:10%;
    }
}
@media only screen and (min-width: 992px) and (max-width: 1024px) {
    .item-list {
        width:calc(25% - 60px);
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .item-list {
        width:calc(25% - 20px);
        margin-left: 10px;
        margin-right: 10px;
    }
    .block--info--product {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .product--option .heading-option {
        font-family: SF_Heavy, sans-serif;
        font-size: 24px;
        text-align: center;
        padding-top: 40px;
    }

    #myVideo {
        position: relative !important;
        right: initial !important;
        bottom: initial !important;
        min-width: initial;
        min-height: initial;
        width: 100%;
        height: 100%;
    }
}
@media only screen and (min-width: 768px) and (max-width: 1023px){     
    .main-menu span b {
        display:none;
    }
}
@media only screen and (max-width: 1024px) {
    .main-menu span b {
        display:none;
    }
}
@media only screen and (max-width: 767px) {
    .block--info--product {
        padding-top: 40px;
        padding-bottom: 40px;
    }
    .product--option .heading-option {
        font-family: SF_Heavy, sans-serif;
        font-size: 24px;
        text-align: center;
        padding-top: 40px;
    }
    #myVideo {
        position: relative !important;
        right: initial !important;
        bottom: initial !important;
        min-width: initial;
        min-height: initial;
        width: 100%;
        height: 100%;
    }
    .c-carousel__nav {
        display: none;
    }
    .modal-dialog {
        top:90px;
    }
    .main-menu span b {
        display:none;
    }
    body {
        font-size:16px;
    }
    .block--product {
        padding:15px 20px;
    }
    .block--news {
        padding:40px 0px;
    }
    .block--product h1.heading-menu {
        font-size:32px;
    }
    .name--product {
        padding-top: 10px;
        padding-bottom: 15px;
        font-size: 20px;
    }
    .ft-content {
        font-size: 18px;
        margin-bottom:25px;
    }
    .ft-social {
        margin-bottom:25px;
    }
    .ft-footer {
        display:none;
    }
    footer {
        padding-top: 45px;
        padding-bottom: 80px;
    }
    .block-product {
        margin-bottom: 50px;
    }
    .page {
        margin-bottom:0;
    }
    .home-slide,
    .home-slide .carousel-inner,
    .home-slide .carousel-inner img {
        height: calc(50vh - 90px) !important;
        min-height: 250px;
    }
    #myCarousel .carousel-item {
        min-height:initial;
    }
    .headding-title {
        font-size:25px;
        line-height:35px;
        margin-bottom: 30px;
    }
    #myCarousel .carousel-item .h4 {
        font-size:30px;
    }
    .home-slide .carousel-control-prev,
    .home-slide .carousel-control-next {
        display:none;
    }
    .text-slider {
        padding: 25px 15px;
        top: calc( 50% - 90px);
    }
    #myCarousel .carousel-item .text-slider a {
        font-size:18px;
    }
    .block--about{
        padding-top: 40px;
        padding-bottom: 55px;
    }
    .block-about{
        padding-top: 40px;
        padding-bottom: 40px;
        font-size:21px;
        line-height:30px;
    }
    .block-about p {
        line-height:30px !important;
    }
    .block--menu {
        padding-top: 40px;
        padding-bottom: 0;
    }
    .block--banner .block--overlay a {
        font-size:25px;
        top: calc(50% - 15px);
    }
    .block--info--product .owl-nav{
        display:none;
    }
    .block--slide,
    .block-video {
        height:auto;
        position:relative;
    }
    .pt-about {
        padding-top:20px !important;
        padding-bottom:0 !important;
    }
    .heading-about {
        text-align: center;
        font-size: 35px;
        margin-bottom: 40px;
    }
    .block--over, .block--over p {
        font-size: 16px;
        line-height: 30px;
    }
    .block--over {
        padding-left: 30px;
        padding-right: 0;
    }
    .pt-about .row {
        margin-left:0;
        margin-right:0;
    }
    .block--company {
        padding-top: 50px;
        padding-bottom: 50px;
    }
    .item-contact {
        position:relative;
        margin-bottom: 25px;
    }
    .bg-contact,
    .bg-sub-img {
        bottom:30px;
        position:absolute;
    }
    .contact-name {
        font-size:21px;
    }
    .contact-info {
        font-size: 16px;
    }
    .bg-contact {
        width:100%;
        left:0;
    }
    .bg-sub-contact {
        margin-bottom:0;
    }
    .mb-bg-sub {
        width: 75px;
        float: left;
        flex:auto;
        max-width:initial;
        position:relative;
    }
    .mb-bg-item {
        width: calc(100% - 100px);
        float: right;
        position: relative;
    }
    .design-name {
        font-size:18px;
    }
    .design-info {
        font-size:16px;
    }
    .blog-same {
        display: block;
        overflow: hidden;
        position: relative;
        width: 100%;
        height: 220px;
    }
    .same-pre,
    .same-next {
        height: 110px;
        width: 100%;
    }
    .same-pre a {
        font-size:21px;
        top: calc(50% - 10px);
    }
    .same-next .middle-next {
        top: calc(50% - 30px);
        font-size: 15px;
        width:calc(100% - 30px);
        left: 15px;
    }
    .same-next > .middle-next > div {
        margin-bottom: 5px;
    }
    .same-next > .middle-next > div + div {
        height: 30px;
        line-height: 30px;
    }
    .same-next .middle-next a {
        font-size:21px;
        padding-left:0;
        padding-right:0;
    }
    .same-pre, .same-next {
        border:solid 1px #eaeaea;
    }
    .title--img {
        height:40vh;
        overflow: hidden;
        background-repeat: no-repeat;
        background-position: top;
        background-size: cover;
        background-attachment:inherit;
    }
    .block--content {
        padding-top:40px;
        padding-bottom:40px;
        font-size:16px;
    }
    .intro--content h1 {
        font-size:21px;
        line-height:30px;
    }
    .intro--content {
        margin-bottom:0;
    }
    .block--content h2, .block--content h3, .block--content h4 {
        font-size:18px;
        line-height:25px;
        margin-bottom:15px;
    }
    .block--content p {
        margin-bottom:15px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 1400px) {
    .page-album .fancybox-caption {
        width: 35% !important;
        text-align: left;
        left: 65%;
        position: absolute;
        top: 170px;
        padding-top: 0;
    }

    .fancybox-stage {
        z-index: 0;
        pointer-events: none;
    }
    .page-album .fancybox-inner {
      overflow-y: scroll;
    }
    .page-album .fancybox-bg:before {
        position:relative;
    }
}
@media only screen and (min-width: 576px) and (max-width: 767px){
    .item-row .col-right {
        margin-top:30px;
    }
      #sidebar {
        width: 90%;
        left: -90%;
    }    
    .pt-about img {
        margin-top:60px;
    }
    .container {
        max-width:100%;
    }
    .blog--overlay .info--blog{
        display:none;
    }
    .blog--overlay {
        width:100%;
    }
    .title--heading {
        font-size:21px;
        line-height:35px;
        padding-top: 100px;
        padding-bottom: 150px;
    }
    .title--heading p{
        margin-bottom:10px;
    }
    .hot--blog {
        position: absolute;
        max-height: 410px;
        overflow: hidden;
        max-width: calc( 100% - 30px);
        left: 15px;
    }
    .block-category ul, .video--content > ul {
        font-size:16px;
    }
    .block-category {
        padding-bottom: 45px;
    }
    .block--album, .block--design {
        padding-top: 0px;
    }    
}
@media only screen and (max-width: 767px) {
    .item-list {
        width: calc(50% - 20px);
        margin-left: 10px;
        margin-right: 10px;
        text-align: center;
        margin-bottom: 25px;
    }
    .toggled #sidebar-wrapper {
        left: -100vw !important;
        
    }
    .toggled #sidebar {
        display:none;
    }
    #sidebar {
        width:100%;
        max-width:510px;
        display:block;
    }
    #sidebar-wrapper
    {
        left: 0 !important;
        right: 0;
        margin-left: 0 !important;
        width: 100vw !important;
        max-width:510px;
        overflow-y: scroll !important;
        height:100%;
        background-color: #fff !important;
    }
    .page-album .fancybox-stage {
        width:100% !important;
    }
    .fancybox-caption {
        padding:15px;
    }
    .page-album .fancybox-inner {
      overflow-y: scroll;
    }
    .page-album .fancybox-bg:before {
        position:relative;
    }
    .fancybox-stage {
        z-index:0;
        pointer-events:none;
    }
    .fancybox-slide {
        height:70vh;
        pointer-events:none;
    }
    .page-album .fancybox-caption {
        top:100vh;
    }
}
@media only screen and (max-width: 575px) {
    .page-album .fancybox-content {
        height: 450px !important;
    }
    .block-option .pull-right{
        display:none;
    }
    .item-row .col-left {
        width:100%;
        padding-right:0;
        margin-bottom:40px;
    }
    .fancybox-stage {
        z-index:0;
        pointer-events:none;
    }
    .fancybox-slide {
        height:450px;
        pointer-events:none;
    }
    .page-album .fancybox-caption {
        top:595px;
    }
      .block--main .block--about {
        padding-bottom:0;
    }
      .block--over {
        padding-left: 15px;
        padding-right: 15px;
    } 
    .container {
        max-width:100%;
    } 
    .breadcrumb .pull-right {
        display:none;
    }
    .block--title .title--heading {
        padding-top: 20px;
        padding-bottom: 20px;
        font-size:1.8rem;
    }
    .category {
        display:table;
        width:100%;
    }
    .hot--blog {
        position:relative;
    }
    .blog--overlay {
        width:100%;
        padding:10px 30px;
    }
    .blog--overlay .info--blog {
        display:none;
    }
    .blog--overlay .name--blog a {
        font-size: 20px;
        color: #fff;
    }
    .block-category {
        margin-top:0;
        padding-bottom:0;
    }
}
 #wrapper {
    overflow-x: hidden;
 }
#sidebar-wrapper {
    top:0;
    left:0;
    position:absolute;
    min-height: 100vh;
    margin-left: -510px;
    -webkit-transition: margin .25s ease-out;
    -moz-transition: margin .25s ease-out;
    -o-transition: margin .25s ease-out;
    transition: margin .25s ease-out;
    z-index:99999;
}
#sidebar-wrapper .list-group {
  width: 510px;
}
#menu-close {
    top:0;
    left:0;
    position:fixed;
    width:100%;
    background:rgba(0, 0, 0, 0.4);
    height:100vh;
    z-index:9999;
}
.toggled #menu-close {
    display:none;
}
@media (min-width: 768px) {
  #sidebar-wrapper {
    margin-left: 0;
  }

  #page-content-wrapper {
    min-width: 0;
    width: 100%;
  }

  #wrapper.toggled #sidebar-wrapper {
    margin-left: -510px;
  }
}

.bottom-contact{display:none}
@media  (max-width: 767px) {
    .bottom-contact{
        display: block;
        position: fixed;
        bottom: 0;
        background: white;
        width: 100%;
        z-index: 99;
        box-shadow: 2px 1px 9px  #0000008a;
        border-top: 1px solid #eaeaea;}
    .bottom-contact ul { display: contents; }
    .bottom-contact ul li{
        width: 25%; 
        margin-bottom:0;
        float: left;
        list-style: none;
        text-align: center; 
        font-size: 12.5px;
    }
    .bottom-contact ul li span{color:black}
    .bottom-contact ul li img{    width: 35px;
        margin-top: 3px;
        margin-bottom: 0;}

}