@media only screen and (max-width: 360px) { /* 320px */
	.dg-container{
		width: 100%;
		height: 270px;
		position: relative;
	}
	.dg-wrapper{
		width: 311px;
		height: 204px;
		margin: 0 auto;
		position: relative;
	}
	.dg-wrapper a{
		width: 310px;
		height: 203px;
		display: block;
		position: absolute;
		left: 0;
		top: 0;
		/*background: transparent url(../images/browser.png) no-repeat top left;*/
		box-shadow: 0px 10px 20px rgba(0,0,0,0.5);
		-webkit-box-shadow:0px 10px 20px rgba(0,0,0,0.5);
		-moz-box-shadow:0px 10px 20px rgba(0,0,0,0.5);
	}
	.dg-wrapper a.dg-transition{
		-webkit-transition: all 0.5s ease-in-out;
		-moz-transition: all 0.5s ease-in-out;
		-o-transition: all 0.5s ease-in-out;
		-ms-transition: all 0.5s ease-in-out;
		transition: all 0.5s ease-in-out;
	}
	.dg-wrapper a img{
		display: block;
		padding: 0px;
		width: 310px;
		height: 203px;
	}
	.dg-wrapper a div{
		font-style: italic;
		text-align: center;
		line-height: 50px;
		text-shadow: 1px 1px 1px rgba(255,255,255,0.5);
		color: #333;
		font-size: 20px;
		width: 100%;
		margin-bttom:35px;
		bottom: -55px;
		display: none;
		position: absolute;
	}
	.dg-wrapper a.dg-center div{
		display: block;
	}
	.dg-container nav{
		width: 58px;
		position: absolute;
		z-index: 1000;
		bottom: 40px;
		left: 50%;
		margin-left: -29px;
	}
	.dg-container nav span{
		text-indent: -9000px;
		float: left;
		cursor:pointer;
		width: 24px;
		height: 25px;
		opacity: 0.8;
		background: transparent url(../images/arrows.png) no-repeat top left;
	}
	.dg-container nav span:hover{
		opacity: 1;
	}
	.dg-container nav span.dg-next{
		background-position: top right;
		margin-left: 10px;
	}
}

@media only screen and (min-width: 361px) { 

	.dg-container{
		width: 100%;
		height: 420px;
		position: relative;
	}
	.dg-wrapper{
		width: 481px;
		height: 316px;
		margin: 0 auto;
		position: relative;
		-webkit-transform-style: preserve-3d;
		-moz-transform-style: preserve-3d;
		-o-transform-style: preserve-3d;
		-ms-transform-style: preserve-3d;
		transform-style: preserve-3d;
		-webkit-perspective: 1000px;
		-moz-perspective: 1000px;
		-o-perspective: 1000px;
		-ms-perspective: 1000px;
		perspective: 1000px;
	}
	.dg-wrapper a{
		width: 480px;
		height: 314px;
		display: block;
		position: absolute;
		left: 0;
		top: 0;
		/*background: transparent url(../images/browser.png) no-repeat top left;*/
		box-shadow: 0px 10px 20px rgba(0,0,0,0.5);
		-webkit-box-shadow:0px 10px 20px rgba(0,0,0,0.5);
		-moz-box-shadow:0px 10px 20px rgba(0,0,0,0.5);
	}
	.dg-wrapper a.dg-transition{
		-webkit-transition: all 0.5s ease-in-out;
		-moz-transition: all 0.5s ease-in-out;
		-o-transition: all 0.5s ease-in-out;
		-ms-transition: all 0.5s ease-in-out;
		transition: all 0.5s ease-in-out;
	}
	.dg-wrapper a img{
		display: block;
		padding: 0px;
	}
	.dg-wrapper a div{
		font-style: italic;
		text-align: center;
		line-height: 50px;
		text-shadow: 1px 1px 1px rgba(255,255,255,0.5);
		color: #333;
		font-size: 20px;
		width: 100%;
		bottom: -55px;
		display: none;
		position: absolute;
	}
	.dg-wrapper a.dg-center div{
		display: block;
	}
	.dg-container nav{
		width: 58px;
		position: absolute;
		z-index: 1000;
		bottom: 40px;
		left: 50%;
		margin-left: -29px;
	}
	.dg-container nav span{
		text-indent: -9000px;
		float: left;
		cursor:pointer;
		width: 24px;
		height: 25px;
		opacity: 0.8;
		background: transparent url(../images/arrows.png) no-repeat top left;
	}
	.dg-container nav span:hover{
		opacity: 1;
	}
	.dg-container nav span.dg-next{
		background-position: top right;
		margin-left: 10px;
	}
}