.box { position: relative; display: inline-block; overflow: hidden; /*margin: 10px; min-width: 230px; max-width: 315px;*/ width: 100%; color: #fff; text-align: left; font-size: 16px; background: #000; border: 1px solid #e1e1e1; }
    .box *,
    .box:before,
    .box:after { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; }
    .box img { max-width: 100%; backface-visibility: hidden; vertical-align: top; }
    .box:before,
    .box:after { position: absolute; top: 20px; right: 20px; content: ''; background-color: #fff; z-index: 1; opacity: 0; }
    .box:before { width: 0; height: 1px; }
    .box:after { height: 0; width: 1px; }
    .box .box-content { position: absolute; left: 0; bottom: 0; padding: 15px 20px; }

    .box h3,
    .box h4 { margin: 0; font-size: 1.1em; font-weight: normal; opacity: 0; }
    .box h4 { font-size: .8em; text-transform: uppercase; }
    .box a { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 1; }

    .box:hover img,
    .box.hover img { zoom: 1; filter: alpha(opacity=40); -webkit-opacity: 0.4; opacity: 0.4; }

    .box:hover:before,
    .box.hover:before,
    .box:hover:after,
    .box.hover:after { opacity: 1; -webkit-transition-delay: 0.25s; transition-delay: 0.25s; }

    .box:hover:before,
    .box.hover:before { width: 40px; }

    .box:hover:after,
    .box.hover:after { height: 40px; }

    .box:hover h3,
    .box.hover h3,
    .box:hover h4,
    .box.hover h4 { opacity: 1; }

    .box:hover h3,
    .box.hover h3 { -webkit-transition-delay: 0.3s; transition-delay: 0.3s; }

    .box:hover h4,
    .box.hover h4 { -webkit-transition-delay: 0.35s; transition-delay: 0.35s; }


.box-1 { position: relative; overflow: hidden; width: 100%; color: #ffffff; text-align: center; font-size: 16px; background-color: #000000; }
    .box-1 *,
    .box-1 *:before,
    .box-1 *:after { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.55s ease; transition: all 0.55s ease; }
    .box-1 img { max-width: 100%; backface-visibility: hidden; vertical-align: top; opacity: 0.9; }
    .box-1 .title { position: absolute; top: 58%; left: 25px; padding: 5px 10px 10px; }
        .box-1 .title:before,
        .box-1 .title:after { height: 2px; width: 400px; position: absolute; content: ''; background-color: #ffffff; }
        .box-1 .title:before { top: 0; left: 10px; -webkit-transform: translateX(100%); transform: translateX(100%); }
        .box-1 .title:after { bottom: 0; right: 10px; -webkit-transform: translateX(-100%); transform: translateX(-100%); }
        .box-1 .title div:before,
        .box-1 .title div:after { width: 2px; height: 300px; position: absolute; content: ''; background-color: #ffffff; }
        .box-1 .title div:before { top: 10px; right: 0; -webkit-transform: translateY(100%); transform: translateY(100%); }
        .box-1 .title div:after { bottom: 10px; left: 0; -webkit-transform: translateY(-100%); transform: translateY(-100%); }
    .box-1 h2,
    .box-1 h4 { margin: 0; text-transform: uppercase; }
    .box-1 h2 { font-weight: 400; }
    .box-1 h4 { display: block; font-size: 14px; background-color: #ffffff; padding: 5px 10px; color: #000000; }
    .box-1 .desc { position: absolute; bottom: 42%; left: 25px; text-align: left; opacity: 0; padding: 5px 60px 5px 10px; font-size: 0.8em; font-weight: 500; letter-spacing: 1.5px; }
        .box-1 .desc p { margin: 0; }
    .box-1 a { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }
    .box-1:hover img { zoom: 1; filter: alpha(opacity=35); -webkit-opacity: 0.35; opacity: 0.35; }
    .box-1:hover .title:before,
    .box-1:hover .title:after,
    .box-1:hover .title div:before,
    .box-1:hover .title div:after { -webkit-transform: translate(0, 0); transform: translate(0, 0); }
    .box-1:hover .title:before,
    .box-1:hover .title:after { -webkit-transition-delay: 0.15s; transition-delay: 0.15s; }
    .box-1:hover .desc { opacity: 1; -webkit-transition-delay: 0.2s; transition-delay: 0.2s; }