/*---------------------------- DEMO 245-----------------*/

.box{

    background: transparent;

    font-family: 'Ubuntu', sans-serif;

    text-align: center;

    overflow: hidden;

    position: relative;

	border:15px solid #D3E2A9;

    z-index: 1;

    transition: all 0.3s ease;

}



/*

.container2 {

  position: relative;

  font-family: Arial;

}



.text-block {

  position: absolute;

  bottom: 20px;

  right: 20px;

  background-color: black;

  color: white;

  padding-left: 20px;

  padding-right: 20px;

}



*/



.sfTitle{

	padding:18p; 

	border:1px solid #6a840d; 

	text-align:center!important;

	background:#6a840d; 

	color:#fff;

}

.box:hover{

    background: linear-gradient(#b92b27, #1565C0);

    box-shadow: 0 0 20px -5px rgba(0, 0, 0, 0.4);

}

.box:before,

.box:after,

.box .box-content:before,

.box .box-content:after{

    content: "";

    background: #fff;

    width: 0;

    height: 4px;

    position: absolute;

    top: 5%;

    left: 0;

    transition: all 0.3s;

}

.box:after{

    top: auto;

    bottom: 5%;

    left: auto;

    right: 0;

}

.box .box-content:before,

.box .box-content:after{

    height: 0;

    width: 4px;

    left: auto;

    right: 5%;

    top: 0;

}

.box .box-content:after{

    right: auto;

    top: auto;

    bottom: 0;

    left: 5%;

}

.box:hover:before,

.box:hover:after{

    width: 80%;

}

.box:hover .box-content:before,

.box:hover .box-content:after{

    height: 80%;

}

.box img{

    width: 100%;

    height: auto;

    transform: scale(1.25);

    transition: all 0.3s ease;

}

.box:hover img{

    opacity: 0.2;

    transform: scale(1);

}

.box .box-content{

    width: 100%;

    height: 100%;

    position: absolute;

    top: 0;

    left: 0;

}

.box .inner-content{

    color: #fff;

    width: 70%;

    overflow: hidden;

    transform: translateX(-50%)translateY(-50%);

    position: absolute;

    top: 50%;

    left: 50%;

}

.box .title{

    font-size: 1.2em;

	color:#fff;

    font-weight: 700;

    text-transform: uppercase;

    margin: 0 0 3px 0;

    opacity: 0;

    transform: rotate(90deg);

    transform-origin: left bottom;

    transition: all 0.3s ease;

}

.box .post{

    font-size: 1.0em;

    text-transform: capitalize;

    display: block;

    opacity: 0;

    transform: rotate(90deg);

    transform-origin: left bottom;

    transition: all 0.3s ease;

}

.box:hover .title,

.box:hover .post{

    opacity: 1;

    transform: rotate(0);

}

.box .icon{

    padding: 0;

    margin: 0;

    list-style: none;

    overflow: hidden;

    transform: translateX(-50%);

    position: absolute;

    left: 50%;

    bottom: 13%;

}

.box .icon li{

    margin: 0 5px;

    display: inline-block;

    transform: rotate(-90deg);

    transform-origin: left top;

    transition: all 0.3s ease;

}

.box:hover .icon li{ transform: rotate(0); }

.box .icon li a{

    color: #b92b27;

    background: #fff;

    font-size: 20px;

    line-height: 35px;

    height: 35px;

    width: 35px;

    display: block;

    position: relative;

    transition: all 0.3s ease;

}

.box .icon li  a:hover{

    color: #fff;

    background: #b92b27;

    border-radius: 0 50%;

    box-shadow: 0 0 3px rgba(255, 255, 255, 0.9);

}

@media only screen and (max-width:990px){

    .box { margin: 0 0 30px; }

}



/*---------------------------- DEMO 245-----------------*/