@charset "utf-8";
body, html{
	width: 100%;
	height:100%;
	overflow:hidden;
	position: relative;
	float:left;	
	padding: 0; margin: 0;	
}
body *{
	position: relative; float:left;
	padding: 0; margin: 0;	
}

a{
	position: relative; float: left;
	width: 50%;	
	height: 50vh;
	
	background-size:cover;
	background-repeat: no-repeat;
	background-position: center;
}
a:after{
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	height: 100%;
	content: '';
	background: #000;
	opacity: 0.5;
	z-index: 1;
	transition: all 0.5;
}
a:hover:after{
	opacity: 0.1;
	transition: all 0.5;
}

a.b1{
	background-image: url(575-shop.jpg);
}
a.b2{
	background-image: url(575-team.jpg);
	background-position: center top;
}
a.b3{
	background-image: url(575-triathlon.jpg);
}
a.b4{
	background-image: url(575-sunset-run.jpg);
}



a.out{
	filter: grayscale(0.5);
	transition-property: filter;
	transition-duration: 0.0s;	
}



a .blo{
	width: auto;	
	height: auto;
	transform: translate(-50%,-50%);
	top: 50%;
	left: 50%;
	z-index: 2;
}



a .blo img{
	transform: translateX(-50%);
	left: 50%;
}

a .blo .button{
	width: 80px;
	height: 80px;
	background: rgba(104,220,249,0.4);
	color:#fff;
	text-align:center;
	border-radius: 50%;
	box-shadow: -5px 5px 5px rgba(0,0,0,0.5);
	clear:both;
	margin-top: 40px;
	left: 50%;
	transform: translateX(-50%);
	line-height: 80px;
	font-size: 50px;
	color: #68dcf9;
	transition: margin 0.2s ease, background 0.2s ease, color 0.2s ease;
}

a:hover .blo .button{
	margin-top: 20px;
	background: #fff;
	color:#000;
}










a .gra{
	background-color:rgba(0,0,0,0.5);
	width:100%;
	height: 100%;
	top: 0; left: 0;
	position: absolute;
	transition: background 0.1s ease;
}

a.out .gra{
	background-color:rgba(0,0,0,0.7);
}

a .lin{
	width:100%;
	height: 100%;
	position: absolute;
	bottom: 0;
	left: 0;
}


a .lin.ver{
	display:none;
}









@font-face {
	font-family: 'i296';
	src:url('/_sys/_ico/296.eot');
	src:url('/_sys/_ico/296.eot') format('embedded-opentype'),
		url('/_sys/_ico/296.ttf') format('truetype'),
		url('/_sys/_ico/296.woff') format('woff'),
		url('/_sys/_ico/296.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}
.i296:before {
	font-family: i296;
	content: "\e296";
}


@media all and (max-width: 1920px) {
	a .blo img{
	
	}
}

@media all and (max-width: 1366px) {
a .blo img{
	width: 140px;
}

a .blo .button{
	width: 60px;
	height: 60px;
	box-shadow: -5px 5px 5px rgba(0,0,0,0.5);
	margin-top: 30px;
	line-height: 60px;
	font-size: 36px;
}

a:hover .blo .button{
	margin-top: 15px;
}
}

@media all and (max-width: 1024px) {
a .blo img{
	width: 100px;
}

a .blo .button{
	width: 50px;
	height: 50px;
	box-shadow: -5px 5px 5px rgba(0,0,0,0.5);
	margin-top: 25px;
	line-height: 50px;
	font-size: 32px;
}

a:hover .blo .button{
	margin-top: 15px;
}
}


@media all and (max-width: 800px) {

}


@media all and (max-width: 640px) {

a{
	position: relative; float: left;
	width: 100%;	
	height: 25vh;
}
a .blo .button{
	display: none;
}
}