/* Index Faschion */

body,
html {
   padding: 0;
   margin: 0;
   height: 100%;
}

.theme-faschion {
   font-family: 'Open Sans', sans-serif;
}

.theme-faschion .wrap-slide {
   position: relative;
   width: 100%;
   height: 300px;
}

.theme-faschion .contact-form-4 .form-group .form-control {
   border-color: #eee;
   border-radius: 1px;
   -webkit-box-shadow: none;
   box-shadow: none;
   background-color: #eee;
   text-transform: uppercase;
   font-size: 9px;
   letter-spacing: 3px;
   font-weight: 500;
}

.theme-faschion .contact-form-4 .form-control:focus {
   border-color: #181818;
   -webkit-box-shadow: none;
   box-shadow: none;
}

.theme-faschion .contact-form-4 .btn {
   letter-spacing: 3px;
   font-size: 10px;
}

.bl-main-wrap {
   height: 100%;
}

.bl-main {
   position: absolute;
   width: 100%;
   height: 100%;
   overflow: hidden;
}

.bl-main > section {
   position: absolute;
   width: 50%;
   height: 50%;
}

.bl-main > section:first-child {
   top: 0;
   left: 0;
	background-image: url(../img/fashion-01.jpg);
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center center;
}

.bl-main > section:nth-child(2) {
   top: 0;
   left: 50%;
	background-image: url(../img/fashion-02.jpg);
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center center;
}

.bl-main > section:nth-child(3) {
   top: 50%;
   left: 0;
	background-image: url(../img/fashion-03.jpg);
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center center;
}

.bl-main > section:nth-child(4) {
   top: 50%;
   left: 50%;
	background-image: url(../img/fashion-17.jpg);
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center center;
}

.bl-box {
   position: relative;
   width: 100%;
   height: 100%;
   cursor: url(../img/icon/icon-cross-white.png), auto;
   opacity: 1;
   display: -webkit-box;
   display: -moz-box;
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
   -webkit-box-pack: center;
   -moz-box-pack: center;
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
   -webkit-box-align: center;
   -moz-box-align: center;
   -webkit-align-items: center;
   -ms-flex-align: center;
   align-items: center;
   background-color: rgba(28,28,28,0.95);
}

.bl-box h2 {
   text-align: center;
   margin: 30px 0 0 5px;
   padding: 50px;
   font-size: 11px;
   letter-spacing: 5px;
   font-weight: 600;
   text-transform: uppercase;
   color: #fff;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}

.bl-box {
   -webkit-transition: all .4s ease;
   transition: all .4s ease;
   opacity: 0;
}

.bl-box:hover {
   opacity: 1;
}

.bl-main > section .bl-icon-close {
   position: absolute;
   top: 60px;
   right: 60px;
   cursor: pointer;
   z-index: 100;
   opacity: 0;
   pointer-events: none;
}

.bl-main > section .bl-icon-close:before {
   content: "";
   display: block;
   background-repeat: no-repeat;
   background-image: url(../img/icon/close-b.png);
   width: 30px;
   height: 30px;
   background-size: cover;
   background-position: center center;
}

.bl-content,
div.bl-panel-items > div > div {
   opacity: 0;
   pointer-events: none;
   position: absolute;
   top: 60px;
   left: 30px;
   right: 10px;
   bottom: 30px;
   padding: 0 20px;
   overflow: hidden;
   overflow-y: auto;
}

.bl-content p {
   margin: 0 auto;
   padding-bottom: 15px;
   font-size: 12px;
   line-height: 1.8;
   color: #a8a8a8;
}

.bl-content h2 {
   font-size: 16px;
   font-weight: 500;
   margin: 0;
   letter-spacing: 7px;
   text-transform: uppercase;
}

.bl-content > ul {
   list-style: none;
   padding: 0;
   margin: 0;
   text-align: center;
}

.bl-content > ul li {
   display: inline-block;
   width: 25%;
   margin: -2px;
}

.bl-content > ul li a {
   display: block;
}

.bl-content > ul li a img {
   display: block;
   max-width: 100%;
}

div.bl-panel-items,
div.bl-panel-items > div {
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   position: absolute;
}

div.bl-panel-items > div > div {
   width: 60%;
   margin: 0 auto;
   opacity: 1;
   bottom: 90px;
   top: 90px;
   pointer-events: auto;
}

div.bl-panel-items > div > div h3 {
   font-size: 16px;
   font-weight: 500;
   margin: 20px 0 0 0;
   text-transform: uppercase;
   letter-spacing: 7px;
}

div.bl-panel-items > div > div h5 {
   font-size: 12px;
   font-weight: 500;
   margin: 20px 0 10px 0;
   letter-spacing: 7px;
   text-transform: uppercase;
}

div.bl-panel-items > div > div p {
   color: #a8a8a8;
}

div.bl-panel-items > div > div img {
   float: left;
   margin: 0 20px 20px 0;
   max-width: 100%;
}

div.bl-panel-items {
   top: 100%;
   z-index: 9999;
}

div.bl-panel-items > div {
   background-color: #fff;
   z-index: 0;
   opacity: 0;
   -webkit-transform: translateY(0);
   -webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0s linear 0.5s;
   -moz-transform: translateY(0);
   -moz-transition: -moz-transform 0.5s ease-in-out, opacity 0s linear 0.5s;
   -ms-transform: translateY(0);
   ms-transition: transform 0.5s ease-in-out, opacity 0s linear 0.5s;
   transform: translateY(0);
   transition: transform 0.5s ease-in-out, opacity 0s linear 0.5s;
}

div.bl-panel-items nav {
   position: absolute;
   right: 0px;
   top: 0px;
   z-index: 9999;
   width: 300px;
   opacity: 0;
   -webkit-transition: opacity 0.2s ease-in-out 0.5s;
   -moz-transition: opacity 0.2s ease-in-out 0.5s;
   transition: opacity 0.2s ease-in-out 0.5s;
}

div.bl-panel-items.bl-panel-items-show nav span {
   float: left;
   margin: 5px;
}

div.bl-panel-items.bl-panel-items-show nav .bl-icon-close {
   cursor: pointer;
}

div.bl-panel-items.bl-panel-items-show nav .bl-icon-close:before {
   content: "";
   background-repeat: no-repeat;
   background-image: url(../img/icon/close-b.png);
   width: 30px;
   height: 30px;
   background-size: cover;
   background-position: center center;
   display: block;
}

div.bl-panel-items nav span.bl-next-work {
   font-weight: 600;
   letter-spacing: 5px;
   display: block;
   text-transform: uppercase;
   line-height: 3.2em;
   cursor: pointer;
   margin-right: 5em;
   font-size: 9px;
}

div.bl-panel-items.bl-panel-items-show nav {
   opacity: 1;
   top: -70px;
}

div.bl-panel-items > div.bl-show-work {
   z-index: 1000;
   opacity: 1;
   -webkit-transition: -webkit-transform 0.5s ease-in-out;
   -moz-transition: -moz-transform 0.5s ease-in-out;
   transition: transform 0.5s ease-in-out;
   -ms-transform: translateY(-100%);
   -moz-transform: translateY(-100%);
   -webkit-transform: translateY(-100%);
   transform: translateY(-100%);
}

div.bl-panel-items > div.bl-hide-current-work {
   opacity: 0;
   -webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
   -moz-transition: -moz-transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
   transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
   -moz-transform: translateY(-100%) scale(0.5);
   -webkit-transform: translateY(-100%) scale(0.5);
   -ms-transform: translateY(-100%) scale(0.5);
   transform: translateY(-100%) scale(0.5);
   z-index: 0;
}

.bl-main > section {
   -webkit-transition: all 0.5s ease-in-out;
   -moz-transition: all 0.5s ease-in-out;
   transition: all 0.5s ease-in-out;
}

.bl-main > section.bl-expand {
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
}

.bl-main > section.bl-expand-top {
   z-index: 100;
}

.bl-main > section:first-child.bl-expand {
   background: #eee;
}

.bl-main > section:nth-child(2).bl-expand {
   background: #fbfbfb;
}

.bl-main > section:nth-child(3).bl-expand {
   background: #fbfbfb;
}

.bl-main > section:nth-child(4).bl-expand {
   background: #fbfbfb;
}

.bl-main.bl-expand-item > section:not(.bl-expand),
.bl-main.bl-expand-item > section.bl-scale-down {
   -webkit-transform: scale(0.5);
   -moz-transform: scale(0.5);
   -ms-transform: scale(0.5);
   transform: scale(0.5);
   opacity: 0;
}

section.bl-expand .bl-box {
   opacity: 0;
   -webkit-transition: opacity 0s linear;
   -moz-transition: opacity 0s linear;
   transition: opacity 0s linear;
}

.no-touch section:not(.bl-expand) .bl-box:hover h2 {
   -webkit-transform: translateY(-15px);
   -moz-transform: translateY(-15px);
   -ms-transform: translateY(-15px);
   transform: translateY(-15px);
}

.bl-content,
.bl-icon-close {
   -webkit-transition: opacity 0.1s linear 0s;
   -moz-transition: opacity 0.1s linear 0s;
   transition: opacity 0.1s linear 0s;
}

section.bl-expand .bl-content,
section.bl-expand .bl-icon-close {
   pointer-events: auto;
   opacity: 1;
   -webkit-transition: opacity 0.3s linear 0.5s;
   -moz-transition: opacity 0.3s linear 0.5s;
   transition: opacity 0.3s linear 0.5s;
}

.bl-box-content {
   position: relative;
   margin-top: -30px;
   padding: 0 10px;
   z-index: 1;
}

.bl-box-content h4 {
   font-size: 9px;
   font-weight: 600;
   letter-spacing: 5px;
   text-transform: uppercase;
}

.bl-box-content h5 {
   font-size: 10px;
   font-weight: 600;
   letter-spacing: 5px;
   text-transform: uppercase;
}

.bl-box-content h6 {
   font-size: 9px;
   font-weight: 600;
   letter-spacing: 5px;
   text-transform: uppercase;
}

.bl-box-content .box-des {
   text-align: center;
   background-color: rgba(250,250,250,0.30);
   padding: 30px 10px 15px 10px;
   -webkit-transition: all .3s ease-in-out;
   -moz-transition: all .3s ease-in-out;
   -ms-transition: all .3s ease-in-out;
   -o-transition: all .3s ease-in-out;
   transition: all .3s ease-in-out;
   cursor: pointer;
   color: #181818;
   position: relative;
}

.bl-box-content .box-des:hover {
   background-color: rgba(250,250,250,0.90);
}

.bl-box-content .box-des:before {
   content: "";
   width: 1px;
   height: 100px;
   background-color: #BB8F51;
   position: absolute;
   top: -30px;
   right: 35px;
}

.bl-content .box-info {
   position: relative;
   color: #fff;
   line-height: 1;
   top: 0;
   transition: all 0.2s ease-out;
   padding: 60px 40px 40px 40px;
   min-height: 200px;
}

.bl-content .box-info.box-1 {
   background-color: #747989;
}

.bl-content .box-info.box-2 {
   background-color: #181818;
}

.bl-content .box-info.box-3 {
   background-color: #4c6575;
}

.bl-content .box-info-des {
   vertical-align: middle;
   display: table-cell;
}

.bl-content .box-info-des h4 {
   font-size: 12px;
   font-weight: 400;
   margin: 0 0 10px 0;
   text-transform: uppercase;
   letter-spacing: 5px;
}

.bl-content .box-info-des p {
   font-size: 13px;
   margin-bottom: 0;
   line-height: 20px;
}

.bl-content .box-info-icon {
   display: table-cell;
   vertical-align: top;
   padding-left: 10px;
}

.bl-content .box-info:hover {
   top: -10px;
   -moz-box-shadow: 0 0 18px 4px rgba(0,0,0,0.3);
   -webkit-box-shadow: 0 0 18px 4px rgba(0,0,0,0.3);
   box-shadow: 0 0 18px 4px rgba(0,0,0,0.3);
}

.theme-faschion .img-effect-item {
   display: block;
   width: 100%;
   margin: 0 auto;
   position: relative;
   cursor: url(../img/icon/icon-cross-black.png), auto;
   overflow: hidden;
}

.theme-faschion .img-effect-item img {
   width: 100%;
   display: block;
   -webkit-transition: all 1.1s ease;
   transition: all 1.1s ease;
}

.theme-faschion .img-effect-item:hover img {
   -webkit-transform: scale(1.2);
   transform: scale(1.2);
}

.theme-faschion .img-effect-overlay {
   opacity: 0;
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   background-color: rgba(255,255,255,0.95);
   overflow: hidden;
   -webkit-transition: all 0.4s ease;
   -moz-transition: all 0.4s ease;
   -o-transition: all 0.4s ease;
   -ms-transition: all 0.4s ease;
   transition: all 0.4s ease;
   border: 3px solid rgba(0,0,0,0.80);
   z-index: 2;
}

.theme-faschion .img-effect-overlay:hover {
   opacity: 1;
}

.theme-faschion .img-effect-overlay:hover .img-effect-des {
   opacity: 1;
}

.theme-faschion .img-effect-overlay:hover .img-effect-top-tit,
.theme-faschion .img-effect-overlay:hover .img-effect-sub-tit,
.theme-faschion .img-effect-overlay:hover .img-effect-line {
   -webkit-transform: translateY(0);
   -moz-transform: translateY(0);
   -o-transform: translateY(0);
   -ms-transform: translateY(0);
   transform: translateY(0);
}

.theme-faschion .img-effect-overlay-item {
   text-align: center;
   width: 100%;
   height: 100%;
   display: table;
}

.theme-faschion .img-effect-overlay-item span {
   display: block;
   color: #000;
}

.theme-faschion .img-effect-des {
   display: table-cell;
   vertical-align: middle;
   -webkit-transition: all 0.3s ease;
   -moz-transition: all 0.3s ease;
   -o-transition: all 0.3s ease;
   -ms-transition: all 0.3s ease;
   transition: all 0.3s ease;
   opacity: 0;
}

.theme-faschion .img-effect-top-tit {
   font-size: 10px;
   font-weight: 600;
   letter-spacing: 5px;
   margin-right: -5px;
   margin-bottom: 6px;
   -webkit-transition: all 0.4s ease;
   -moz-transition: all 0.4s ease;
   -o-transition: all 0.4s ease;
   -ms-transition: all 0.4s ease;
   transition: all 0.4s ease;
   -webkit-transform: translateY(-40px);
   -moz-transform: translateY(-40px);
   -o-transform: translateY(-40px);
   -ms-transform: translateY(-40px);
   transform: translateY(-40px);
   text-transform: uppercase;
}

.theme-faschion .img-effect-sub-tit {
   font-size: 9px;
   font-weight: 500;
   text-transform: uppercase;
   letter-spacing: 5px;
   margin-right: -5px;
   -webkit-transition: all 0.7s ease;
   -moz-transition: all 0.7s ease;
   -o-transition: all 0.7s ease;
   -ms-transition: all 0.7s ease;
   transition: all 0.7s ease;
   -webkit-transform: translateY(30px);
   -moz-transform: translateY(30px);
   -o-transform: translateY(30px);
   -ms-transform: translateY(30px);
   transform: translateY(30px);
}

.theme-faschion .img-effect-line {
   width: 40px;
   margin: 10px auto;
   height: 1px;
   background-color: #000;
   -webkit-transition: all 0.6s ease;
   -moz-transition: all 0.6s ease;
   -o-transition: all 0.6s ease;
   -ms-transition: all 0.6s ease;
   transition: all 0.6s ease;
   -webkit-transform: translateY(-40px);
   -moz-transform: translateY(-40px);
   -o-transform: translateY(-40px);
   -ms-transform: translateY(-40px);
   transform: translateY(-40px);
}

.theme-faschion .img-effect-2-item {
   position: relative;
   overflow: hidden;
   text-align: center;
   margin-left: -40px;
}

.theme-faschion .img-effect-2-item a {
   position: relative;
   overflow: hidden;
   display: block;
   cursor: url(../img/icon/icon-zoom-white.png), auto;
}

.theme-faschion .img-effect-2-item img {
   width: 100%;
   -webkit-transition: all 1.1s ease;
   transition: all 1.1s ease;
}

.theme-faschion .img-effect-2-item:hover img {
   -webkit-transform: scale(1.2);
   transform: scale(1.2);
}

.theme-faschion .img-effect-2-des {
   width: 100%;
   height: 100%;
   color: #fff;
   background-color: rgba(24,24,24,0.90);
   position: absolute;
   top: 0;
   left: 0;
   -webkit-transition: all .4s ease;
   transition: all .4s ease;
   opacity: 0;
}

.theme-faschion .img-effect-2-item:hover .img-effect-2-des {
   opacity: 1;
}

.theme-faschion .img-effect-2-item:hover .img-effect-2-des h4,
.theme-faschion .img-effect-2-item:hover .img-effect-2-des h5 {
   opacity: 1;
   -webkit-transform: scale(1);
   transform: scale(1);
}

.theme-faschion .img-effect-2-des h4,
.theme-faschion .img-effect-2-des h5 {
   text-transform: uppercase;
   letter-spacing: 5px;
   margin-right: -5px;
   opacity: 0;
   -webkit-transition: all .3s ease;
   transition: all .3s ease;
   -webkit-transform: scale(1.4);
   transform: scale(1.4);
}

.theme-faschion .img-effect-2-des h4 {
   font-size: 9px;
   font-weight: 400;
   -webkit-transition-delay: .1s;
   transition-delay: .1s;
}

.theme-faschion .img-effect-2-des h5 {
   font-weight: 600;
   font-size: 10px;
}

.theme-faschion .img-effect-2-des h5 {
   -webkit-transition-delay: .2s;
   transition-delay: .2s;
}

.theme-faschion .blog-event {
   color: #000;
   padding-top: 10px;
   padding-bottom: 10px;
}

.theme-faschion .blog-event h3 {
   font-size: 11px;
   margin-top: 55px;
   text-transform: uppercase;
   letter-spacing: 4px;
   font-weight: 400;
   line-height: 1.6;
}

.theme-faschion .blog-event .day {
   font-family: 'Open Sans', sans-serif;
   border-right: 1px solid #E5E5E5;
   font-size: 50px;
   line-height: 50px;
   padding-right: 15px;
   font-weight: 100;
   display: table-cell;
   margin-bottom: 0;
   margin-top: 0;
}

.theme-faschion .blog-event .day:before {
   content: "";
   width: 220px;
   height: 1px;
   background-color: #000;
   position: absolute;
   top: 80px;
   left: -70px;
}

.theme-faschion .blog-event .month,
.theme-faschion .blog-event .year {
   font-family: 'Open Sans', sans-serif;
   font-size: 11px;
   display: block;
   font-weight: 400;
   padding-left: 15px;
   text-transform: uppercase;
   color: #BFBFBF;
   letter-spacing: 2px;
}

.theme-faschion .bl-box-content .box-blog {
   text-align: center;
   background-color: rgba(229,229,229,0.30);
   padding: 30px;
   -webkit-transition: all .3s ease-in-out;
   -moz-transition: all .3s ease-in-out;
   -ms-transition: all .3s ease-in-out;
   -o-transition: all .3s ease-in-out;
   transition: all .3s ease-in-out;
   cursor: pointer;
   color: #181818;
   position: relative;
}

.theme-faschion .bl-box-content .box-blog:hover {
   background-color: rgba(250,250,250,0.90);
}

.theme-faschion .bl-box-content .box-blog:before {
   content: "";
   width: 1px;
   height: 100px;
   background-color: #E5E5E5;
   position: absolute;
   top: -30px;
   right: 35px;
}