/* Index Faschion */

body, html {
 padding: 0;
 margin: 0;
 height: 100%;
}
.theme-fascion {
 font-family: 'Open Sans', sans-serif;
}
.wrap-slide {
 position: relative;
 width: 100%;
 height: 300px;
}
.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;
}
.contact-form-4 .form-control:focus {
 border-color: #181818;
 -webkit-box-shadow: none;
 box-shadow: none;
}
.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);
}
.img-effect-item {
 display: block;
 width: 100%;
 margin: 0 auto;
 position: relative;
 cursor: url(../../img/icon/icon-cross-black.png), auto;
 overflow: hidden;
}
.img-effect-item img {
 width: 100%;
 display: block;
 -webkit-transition: all 1.1s ease;
 transition: all 1.1s ease;
}
.img-effect-item:hover img {
 -webkit-transform: scale(1.2);
 transform: scale(1.2);
}
.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;
}
.img-effect-overlay:hover {
 opacity: 1;
}
.img-effect-overlay:hover .img-effect-des {
 opacity: 1;
}
.img-effect-overlay:hover .img-effect-top-tit, 
.img-effect-overlay:hover .img-effect-sub-tit, 
.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);
}
.img-effect-overlay-item {
 text-align: center;
 width: 100%;
 height: 100%;
 display: table;
}
.img-effect-overlay-item span {
 display: block;
 color: #000;
}
.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;
}
.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;
}
.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);
}
.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);
}
.img-effect-2-item {
 position: relative;
 overflow: hidden;
 text-align: center;
 margin-left: -40px;
}
.img-effect-2-item a {
 position: relative;
 overflow: hidden;
 display: block;
 cursor: url(../../img/icon/icon-zoom-white.png), auto;
}
.img-effect-2-item img {
 width: 100%;
 -webkit-transition: all 1.1s ease;
 transition: all 1.1s ease;
}
.img-effect-2-item:hover img {
 -webkit-transform: scale(1.2);
 transform: scale(1.2);
}
.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;
}
.img-effect-2-item:hover .img-effect-2-des {
 opacity: 1;
}
.img-effect-2-item:hover .img-effect-2-des h4, 
.img-effect-2-item:hover .img-effect-2-des h5 {
 opacity: 1;
 -webkit-transform: scale(1);
 transform: scale(1);
}
.img-effect-2-des h4, .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);
}
.img-effect-2-des h4 {
 font-size: 9px;
 font-weight: 400;
 -webkit-transition-delay: .1s;
 transition-delay: .1s;
}
.img-effect-2-des h5 {
 font-weight: 600;
 font-size: 10px;
}
.img-effect-2-des h5 {
 -webkit-transition-delay: .2s;
 transition-delay: .2s;
}
.blog-event {
 color: #000;
 padding-top: 10px;
 padding-bottom: 10px;
}
.blog-event h3 {
 font-size: 11px;
 margin-top: 55px;
 text-transform: uppercase;
 letter-spacing: 4px;
 font-weight: 400;
 line-height: 1.6;
}
.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;
}
.blog-event .day:before {
 content: "";
 width: 220px;
 height: 1px;
 background-color: #000;
 position: absolute;
 top: 80px;
 left: -70px;
}
.blog-event .month, .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;
}
.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;
}
.bl-box-content .box-blog:hover {
 background-color: rgba(250,250,250,0.90);
}
.bl-box-content .box-blog:before {
 content: "";
 width: 1px;
 height: 100px;
 background-color: #E5E5E5;
 position: absolute;
 top: -30px;
 right: 35px;
}

/* RESPONSIVE */

@media (max-width: 1199px) {
div.bl-panel-items > div > div { width: 80%; }
.bl-content, div.bl-panel-items > div > div { left: 0; right: 0; padding: 5px; }
}

@media all and (max-width: 990px) {
.bl-content > ul li { width: 50%; }
.bl-main > section .bl-icon-close { top: 15px; }
}

@media all and (max-width: 768px) {
.bl-content > ul li { width: 50%; }
}

@media all and (max-width: 767px) {
div.bl-panel-items > div > div img { float: none; width: 100%; }
div.bl-panel-items > div > div { padding: 15px; width: 100%; }
.bl-main > section .bl-icon-close { top: 15px; right: 20px; }
}

@media screen and (max-width: 46.5em) {
.bl-expand .bl-box { height: 130px; }
}