@charset "UTF-8";
/* CSS Document */



body {
	background:#000;
	background-size:auto;
	color:#777;
	margin:0;
	padding:40px 50px 50px 50px;
}

#back {
	position:absolute;
	background:url(back.jpg) no-repeat;
	background-size:cover;
	width:100%;
	height:100%;
	top:0;
	left:0;
	z-index:-1;
}

#wrapper {
	margin:0 auto;
	width:1300px;
}

.boxtext {
	top:110px;
	left:0px;
	width:100%;
	color:white;
	text-transform:uppercase;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size:18px;
	position:absolute;
	z-index:10;
	text-align:center;
}


#image-container {
	
	transition:background-size 0.5s;
	-moz-transition: background-size 0.5s; /* Firefox 4 */
	-webkit-transition: background-size 0.5s ease; /* Safari and Chrome */
	-o-transition: all 2s ease; /* Opera */
	box-sizing:border-box;
	
}

/*.image img{
	-webkit-transition: width 0.5s ease, height 0.5s ease; 
	width:100%;
	height:100%;
}*/

.left {
	float:left;
	position:relative;
}

.container {
	width:30%;
	height:250px;
	outline:12px solid rgba(255,255,255,0.2);
	overflow:hidden;
	position:relative;
	display:inline-block;
	margin:0  5% 45px 0;
}

#title {
	width:100%;
	height:30px;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size:24px;
	font-weight:bold;
	text-align:center;
	line-height:30px;
	background:rgba(255,255,255,0.2);
	margin-bottom:60px;
	outline:12px solid rgba(255,255,255,0.2);
	color:#fff;
}

.no-margin {
	margin-right:0;
}


.slider:hover {
	top:-250px;
}

.slider {
	-webkit-transition:all 1s ease;
	position:absolute;
	top:1;
	left:0;
}

.backimage {
	background:url(http://lorempixel.com/400/250/people/1) no-repeat;
	background-size:400px;
	background-position:center;
}

#image-container:hover {
	background-size:500px;
}

/*.image img:hover {
	width:130%;
	height:130%;
}*/

.slideimage {
	float:left;
	width:400px;
	height:250px;
}

#contentwrap {
	margin:0 auto;
}

@media all and (max-width: 750px) {
	#image-container, #slidecontainer {
	width:400px;	
	}
	
	#contentwrap {
	width:400px;	
	}
}

@media all and (max-width: 500px) {
	#image-container, #slidecontainer, #contentwrap {
	width:100%;	
	}
	
}

@media all and (max-width: 1400px) {
	#wrapper {
	width:100%;	
	}
}