body {
	background: #697e86;
	background: -moz-linear-gradient(top,  #697e86 0%, #012c3c 20%, #012c3c 25%);
	background: -webkit-linear-gradient(top,  #697e86 0%,#012c3c 20%,#012c3c 25%);
	background: linear-gradient(to bottom,  #697e86 0%,#012c3c 20%,#012c3c 25%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#697e86', endColorstr='#012c3c',GradientType=0 );
	color: #fff;
	margin: auto;
	font-family: "Rosario", sans-serif;
	font-size: 22px;
	overflow-x: hidden;
}

a {
    text-decoration: none;
} 
   
a.link {
	color: #8ec5ff;
    transition: all 0.2s;
    border-bottom: 1px solid transparent;
    padding-bottom: 2px;
}

a.link:hover {
    color: #00d9ff;
    text-shadow: 0px 0px 18px #fff;
    border-color: rgba(0, 217, 255, 0.6);
}

#wrapper {
	background: url("../images/dragon.jpg") no-repeat center bottom;
}

header {
	width: 100%;
	height: 130px;
	display: inline-block;
	background: url("../images/header-bg.png") repeat-x right 0px;
	position: fixed;
	top: 0;
	z-index: 12;
}

#eternium-logo {
	float: left;
	background: url("../images/eternium_logo.png") no-repeat center;
	width: 38%;
	max-width: 420px;
	height: 108px;
	text-indent: -9000px;
	margin: 0 0 0 4px;
	background-size: contain;
}

#links-holder {
	float: right;
	padding: 22px 0;
	font-family: 'Petrona', serif;
	font-size: 20px;
}

#links-holder p {
	float: left;
	margin: 0;
	padding: 26px 0 0;
}

#links-holder p a {
	display: inline-block;
}

#links-holder .facebook-link {
	width: 26px;
	height: 26px;
	background: url("../images/fb-logo.png") no-repeat;
	background-size: 100%;	
	text-indent: -9000px;
	margin: 20px 5px;
	float: left;
}

#links-holder .mf-logo {
	float: right;
	margin: 0 10px 0 0;
}

#links-holder .mf-logo a {
	width: 250px;
	height: 60px;
	display: block;
	background: url("../images/mf-logo.png") no-repeat;
	text-indent: -9000px;
}

#links-holder .separator {
	margin: 0 5px 0;
}

#main-image-holder {
	width: 100%;
	display: inline-block;
	margin: 100px 0 0;
	position: relative;
}

#slides {
	display: none
}

#main-image-holder .image {
	overflow: hidden;
	position: relative;
	max-height: 550px;
}

#main-image-holder .image img {
	width: 100%;
}

.slidesjs-navigation {
	display: none !important;
}

.slidesjs-pagination {
	position: absolute;
	bottom: 20px;
	left: 20px;
	z-index: 10;
	list-style-type: none;
	padding: 0;
	margin: 0;
}

.slidesjs-pagination li {
	float: left;
	margin: 5px;
}

.slidesjs-pagination-item a {
	background: url("../images/slider-buttons.png") no-repeat 0px -49px;
	display: block;
	width: 22px;
	height: 20px;
	text-indent: -9000px;
}

.slidesjs-pagination-item a:hover {
	background-position: 0px -25px;
}

.slidesjs-pagination-item a.active {
	background-position: 0px -1px;
}

#videoplayer {
	bottom: 30px !important;
}

#image-buttons {
	z-index: 11;
	width: 100%;
	margin: 0%;
	padding: 6px 0 10px;
	text-align: center;
	background: url("../images/line.jpg") repeat-x 0 -21px;
}

#image-buttons ul {
	list-style-type: none;
	margin: 0 auto;
	padding: 0;
	width: 80%;
	min-width: 768px;
	display: inline-block;
}

#content {
	background: url("../images/content-bg.png") repeat-x;
}

#content-box {
	width: 80%;
	max-width: 1130px;
	margin: -31px auto 0;
	padding: 40px 0;
	line-height: 32px;
}


#content-box h2 {
	font-family: 'Petrona', serif;
	font-variant: small-caps;
	font-size: 62px;
	font-weight: normal;
	text-align: center;
	margin: 3% auto;
	text-shadow: 1px 1px 1px #000, 1px 1px 5px #000;
	background: url("../images/title-box.png") no-repeat;
	width: 565px;
	height: 130px;
	line-height: 126px;
	letter-spacing: 6px;
}

#content-box div p {
	line-height: 28px;
	color: #000;
	margin: 0 0 18px;
}

.text-highlight {
	font-style: italic;
}

#promo {
	border-style: solid;
	border-width: 14px;
	-moz-border-image: url("../images/promo_border.png") 14 repeat;
	-webkit-border-image: url("../images/promo_border.png") 14 repeat;
	-o-border-image: url("../images/promo_border.png") 14 repeat;
	border-image: url("../images/promo_border.png") 14 repeat;
    width: 860px;
    margin: 0 auto 55px;
    background: #00151D;
    box-shadow: 0px 0px 40px rgba(255, 255, 255, 0.4);
    padding: 15px;
}

#promo h3 {
	font-family: 'Petrona', serif;
	font-size: 32px;
	font-variant: small-caps;
	font-weight: 400;
	margin: 0;
	padding: 0 0 10px;
	text-align: center;
	text-shadow: 1px 1px 20px #7FCEFF, 1px 1px 20px #0163AD, 1px 1px 5px #053756;
	border-bottom: 1px solid rgba(1, 105, 181, 0.72);
}

#promo p {
	font-size: 18px;
}

#shirts {
	display: inline-block;
	width: 100%;
}

#shirts .shirt {
	float: left;
	margin: 2.5%;
}

#shirts .shirt-container {
	width: 387px;
	height: 375px;
	display: inline-block;
	position: relative;
	overflow: hidden;
}

#shirts .shirt-container img {
	height: 100%;
	position: absolute;
}

#shirts .shirt-container .asphalt {
	left: 0;
}

#shirts .shirt-container .navy {
	left: -1155px;
}

#shirts .shirt-container .brown {
	left: -385px;
}

#shirts .shirt-container .cranberry {
	left: -771px;
}

#shirts .shirt-container .royalblue {
	left: -1541px;
}

#shirts .swatches {
	list-style-type: none;
	padding: 0;
	width: 200px;
	height: 38px;
	margin: 20px auto 0px;
}

#shirts .swatches li {
	width: 30px;
	height: 30px;
	display: block;
	float: left;
	margin: 5px;
	background-repeat: no-repeat;
	background-size: auto 30px;
	text-indent: -9999px;
	box-shadow: 0px 0px 5px #ffffff;
}

#shirts .swatches li:hover {
	box-shadow: 0px 0px 5px #e6a101,0px 0px 5px #e6a101,0px 0px 8px #e6a101;
}

#shirts .regular .swatches li {
	background-image: url("../images/regular-swatches.png");
}

#shirts .slim .swatches li {
	background-image: url("../images/slim-swatches.png");
}

#shirts .swatches .asphalt {
	background-position: 0px 0px;
}

#shirts .swatches .navy {
	background-position: -45px 0px;
}

#shirts .swatches .brown {
	background-position: -90px 0px;
}

#shirts .swatches .cranberry {
	background-position: -135px 0px;
}

#shirts .swatches .royalblue {
	background-position: -179px 0px;
}

#mobile-stores {
	margin: auto;
	text-align: center;
}

#mobile-sign {
	background: url("../images/devices-box.png") no-repeat top center;
	background-size: 100%;
	height: 110px;
	text-align: center;
	display: inline-block;
	width: 768px;
	margin: 3% auto;
}

#mobile-sign p {
	font-size: 38px;
	margin: 4% 0 1%;
	text-shadow: 1px 1px 1px #000;
}

#mobile-sign ul {
	display: inline-block;
	list-style-type: none;
	margin: auto;
	padding: 21px 0;
	width: 730px;
}

#mobile-sign ul li {
	float: left;
	margin: 0;
	width: 25%;
}

#image-buttons ul li {
	float: left;
	margin: 7px 0 0 0;
	width: 25%;
}

#mobile-sign ul li a, #image-buttons ul li a {
	display: block;
	width: 178px;
	height: 57px;
	background: url("../images/store-badges.png") no-repeat 0 -2px;
	text-indent: -9000px;
	border-radius: 8px;
	cursor: pointer;
	transition: all .3s ease-out;
	margin: auto;
}

#mobile-sign ul li a:hover {
	box-shadow: 0px 0px 12px #FFFF96, 0px 0px 30px #FECA68;
}

#image-buttons ul li a:hover {
	box-shadow: 0px 0px 14px #64C3FF, 0px 0px 5px #BBF2FF;
}

#mobile-sign ul li a.amazon, #image-buttons ul li a.amazon {
	background-position: -390px -1px;
}

#mobile-sign ul li a.apple, #image-buttons ul li a.apple {
	background-position: -195px -1px;
}

#mobile-sign ul li a.windows, #image-buttons ul li a.windows {
	background-position: -585px -1px;
}

#developers {
	text-align: center;
	margin: 0 0 70px;
}

#developers p {
	font-family: 'Petrona', serif;
	font-variant: small-caps;
	font-size: 28px;
	margin: 10px;
}

#developers ul {
	list-style-type: none;
	margin: auto;
	padding: 0;
	display: inline-block;
	width: 380px;
}

#developers ul li {
	float: left;
	width: 50%;
}

#developers ul li a {
	display: block;
	text-indent: -9000px;
	margin: auto;
	height: 60px;
}

#developers .dev-mf {
	background: url("../images/mf-logo.png") no-repeat center;
	width: 160px;
	background-size: contain;
}

#developers .dev-dp {
	background: url("../images/dp-logo.png") no-repeat center;
	width: 120px;
}

footer {
	text-align: center;
	width: 100%;
	padding: 10px 0;
	z-index: 12;
	line-height: 18px;
	margin: -50px 0 0;
	height: 85px;
	font-family: 'Petrona', serif;
	font-size: 16px;
}

#legal {
	padding: 5px 0 0;
}

@media (max-width: 736px) {
	body {
		font-size: 14px;
		line-height: 20px;
	}

	header {
		height: 95px;
		background: url("../images/header-bg.png") repeat-x -20px -35px;
	}

	#wrapper {
		background-size: 275%;
		background-position: 75% bottom;
	}

	#mage-logo {
		width: 50%;
		height: 75px;
	}

	#links-holder {
		padding: 0;
		font-size: 16px;
		width: 186px;
	}

	#links-holder .facebook-link {
		width: 20px;
		height: 20px;
		margin: 12px 5px;
	}

	#links-holder p {
		padding: 14px 0 0;
	}

	#links-holder .separator {
		margin: 0 2px 0;
	}

	#links-holder .separator:last-child {
		display: none;
	}

	#links-holder .mf-logo {
		margin: 0 8px 0 0;
	}

	#links-holder .mf-logo a {
		width: 120px;
		height: 40px;
		background-size: contain;
	}

	#main-image-holder {
		margin: 75px 0 0;
	}

	#main-image-holder .image {
		height: auto;
	}

	.slidesjs-pagination {
		top: 10px;
		left: initial;
		right: 0px;
	}

	.slidesjs-pagination-item a {
		width: 20px;
		height: 18px;
		background-position: -2px -35px;
		background-size: 18px auto;
	}

	.slidesjs-pagination-item a.active {
		background-position: -2px 0px;
	}

	.slidesjs-pagination-item a:hover {
		background-position: -2px -18px;
	}

	#image-buttons ul {
		width: 100%;
		min-width: inherit;
	}

	#image-buttons ul li a {
		width: 79px;
		height: 24px;
		background-size: auto 26px;
		border-radius: 5px;
	}

	#image-buttons ul li a.apple {
		background-position: -84px -1px;
	}

	#image-buttons ul li a.amazon {
		background-position: -171px -1px;
	}

	#image-buttons ul li a.windows {
		background-position: -257px -1px;
	}

	#mobile-sign {
		width: 266px;
		height: auto;
		background: none;
		border-style: solid;
		border-width: 21px 27px;
		-moz-border-image: url("../images/devices-box.png") 21 27 stretch;
		-webkit-border-image: url("../images/devices-box.png") 21 27 stretch;
		-o-border-image: url("../images/devices-box.png") 21 27 stretch;
		border-image: url("../images/devices-box.png") 21 27 fill stretch;		
	}

	#mobile-sign ul {
		width: 250px;
		padding: 0;
	}

	#mobile-sign ul li:nth-child(3){
		clear: left;
	}

	#mobile-sign ul li {
		width: 50%;		
	}	

	#mobile-sign ul li a {
		width: 120px;
		height: 40px;
		background-size: auto 40px;
		border-radius: 5px;
	}

	#mobile-sign ul li a.apple {
		background-position: -133px -1px;
	}

	#mobile-sign ul li a.amazon {
		background-position: -265px -1px;
		margin: 8px auto 0;
	}

	#mobile-sign ul li a.windows {
		background-position: -397px -1px;
		margin: 8px auto 0;
	}

	#content-box {
		width: 90%;
		padding: 40px 0 14px;
		line-height: 22px;
	}

	#content-box h2 {
		width: 288px;
		height: 68px;
		background-size: contain;
		font-size: 30px;
		line-height: 68px;
	}

	#content-box p {
		margin: 15px;
	}

	#developers {
		margin: 0 0 45px;
	}

	#developers p {
		font-size: 22px;
		margin: 10px 10px 5px;
	}

	#developers ul {
		width: 275px;
	}

	#developers .dev-mf {
		width: 115px;
		background: url("../images/mf-logo.png") no-repeat center 8px;
		background-size: contain;
	}

	#developers .dev-sg {
		width: 95px;
		background-size: contain;
	}

	footer {
		font-size: 12px;
		height: 65px;
	}

	footer p {
		margin: 6px;
	}

	#promo {
		padding: 5px;
	}

	#promo h3 {
		font-size: 24px;
		line-height: 26px;
	}

	#promo p {
		font-size: 14px;
	}	

}

@media (max-width: 411px) {
	#mage-logo {
		width: 25%;
		height: 70px;
		margin: 2px 0 0 2%;
		background: url("../images/vert-logo.png") no-repeat;
		background-size: contain;
	}
}

@media (max-width: 1279px) {
	#promo {
		width: 60%;
		min-width: 265px;
		overflow: hidden;
	}

	#shirts .shirt {
		float: none;
		margin: auto;
		width: 387px;
	}

	#shirts .swatches {
		margin: 20px auto 40px;
	}
}

@media (max-width: 629px) {
	#shirts .shirt {
		width: 265px;
	}

	#shirts .shirt-container {
		width: 265px;
		height: 257px;
	}	

	#shirts .shirt-container .asphalt {
		left: 0;
	}

	#shirts .shirt-container .navy {
		left: -792px;
	}

	#shirts .shirt-container .brown {
		left: -264px;
	}

	#shirts .shirt-container .cranberry {
		left: -528px;
	}

	#shirts .shirt-container .royalblue {
		left: -1056px;
	}	
}