@font-face {
  font-family: 'Miso';
  src: url('/fonts/Miso.eot?#iefix') format('embedded-opentype'),  
  		url('/fonts/Miso.otf')  format('opentype'),
	    url('/fonts/Miso.woff') format('woff'), 
	    url('/fonts/Miso.ttf')  format('truetype'), 
	    url('/fonts/Miso.svg#Miso') format('svg');
  font-weight: normal;
  font-style: normal;
}

body
{
	font-family: 'Miso';
	color: #fff;
}

fw-list
{
	height: auto;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
table,
hr 
{
	margin-top: 0;
}

h1:last-child,
h2:last-child,
h3:last-child,
h4:last-child,
h5:last-child,
h6:last-child,
p:last-child,
ul:last-child,
ol:last-child,
table:last-child,
hr:last-child 
{
	margin-bottom: 0;
}

.fw_list
{
	min-width: 320px;
}

.item
{
	position: relative;
	padding-bottom: 84%;
	margin-bottom: 10px;
	cursor: pointer;
}

.item:last-child
{
	margin-bottom: 0;
}

.item .zoom
{
	position: absolute;
	background-position: center center;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	background-repeat: no-repeat;
	background-size: cover;
}

.item .zoom:after
{
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background: #7f725f;
	opacity: 0;
	transition: opacity 0.6s;
    -webkit-transition: opacity 0.6s;
    content: '';
}

.item:hover .zoom:after
{
	opacity: 0.5;
}

.item .text
{
    position: absolute;
    left: 10px;
    top: 10px;
    background: rgba(20, 164, 212, 0.9);
    width: 290px;
    height: 135px;
    padding: 0px 20px 10px;
    z-index: 30;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    font-size: 20px;
    line-height: 20px;
    transition: transform 300ms, left 300ms, top 300ms;
    -webkit-transition: transform 300ms, left 300ms, top 300ms;
    transform-origin: left top;
    -webkit-transform-origin: left top;
}

.item .text h2
{
	font-size: 36px;
	line-height: 36px;
	margin-bottom: 12px;
	font-weight: 400;
}

.item:hover .text
{
	transform: scale(1.1);
    -webkit-transform: scale(1.1);
}

.item > a
{
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 400;
}

@media(min-width: 768px)
{
	html, body
	{
		height: 100%;
	}
	
	fw-list,
	.fw_list
	{
		height: 100%;
		overflow: hidden;
	}

	.item
	{
		margin: 0;
		height: 50%;
		width: 50%;
		float: left;
		padding: 0;
		border: 5px solid #fff;
		box-sizing: border-box;
	}
	.item .text
	{
		padding: 5px 20px 10px;
	}

	.item.first
	{
		border-top: none;
		border-left: none;
	}

	.item.second
	{
		border-top: none;
		border-right: none;
	}

	.item.third
	{
		border-bottom: none;
		border-left: none;
	}

	.item.fourth
	{
		border-bottom: none;
		border-right: none;
	}
}