@charset "utf-8";
/* CSS Document */
html,body
{
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden; 
}
body {
	background:url(images/bg_body.jpg);
	font-family: 'Roboto Condensed', sans-serif;
	color:#000;
	margin:0;
}
.recips {
	max-width:1200px;
	margin:20px auto;
	text-align:center;
}
.recips .recip_one {
	width:48%;
	display:inline-block;
	vertical-align:top;
}
.recips .recip_two {
	width:48%;
	display:inline-block;
	vertical-align:top;
}
.recips a {
	color:#fff;
	text-decoration:none;
}
.recips a:hover {
	text-decoration:underline;
}
header {
	max-width:1200px;
	height:404px;
	text-align:center;
	margin:0 auto;
	overflow:hidden;
	position:relative;
}
header img {
	position:absolute;
	right:0;
}
header .logo {
	margin:0 0 0 0;
	position: absolute;
	right:400px;
}
header .logo img {
	position:relative;
}
header .description {
	position:absolute;
	bottom:10px;
	left:50px;
}
header .description img {
	position:relative;
}
main {
	background:#fff;
	max-width:1200px;
	text-align:center;
	margin:0 auto;
	overflow:hidden;
}
main h1 {
	font-size:52px;
	font-weight:400;
	text-transform:uppercase;
	letter-spacing:-3px;
	margin:40px 0;
}
main h1 a {
	color:#000;
	text-decoration:none;
}
main h1 a span {
	text-decoration:underline;
	font-weight:700;
	color:#2400ff;
}
main h1 a:hover {
	color:#2400ff;
	text-decoration:underline;
}
main h2 {
	font-size:54px;
	font-weight:400;
	line-height:50px;
	letter-spacing:-2px;
}
main h2 a small {
	font-size:52px;
	display:block;
	margin:0;
}
main h2 a {
	color:#000;
	text-decoration:none;
}
main h2 a span {
	font-weight:700;
	color:#2400ff;
}
main h2 a:hover {
	color:#2400ff;
}
main h2 a:hover small {
	color:#000;
}
.carousel .bttn {
	font-size:125px;
	font-weight:700;
	display:inline-block;
	vertical-align:top;
	margin:20px 10px 0 10px;
}
.scrollbox {
	max-width:950px;
    overflow:auto;
    white-space:nowrap;
	display:inline-block;
	vertical-align:top;
}
.scrollbox img {
	border:1px solid #170d18;
	margin:0 6px;
}
.bottombox {
	margin:30px 0;
}
.bottombox img {
	border:1px solid #170d18;
	margin:6px;
}
footer {
	background:#170d18;
	max-width:1200px;
	text-align:center;
	margin:0 auto;
	font-size:20px;
	font-weight:300;
	padding:25px 0;
}
footer a {
	color:#fff;
	text-decoration:none;
}
footer a:hover {
	text-decoration:underline;
}
.videobox {
	max-width:1073px;
	margin:50px auto;
	border:1px solid #000;
}
.videobox .jwfit {
	position: relative;
	padding-bottom: 56%;
	padding-top:0;
	height: 0;
}
.videobox .jwfit iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.bottombox .right {
	position: relative;
	padding-bottom: 22%;
	padding-top:0;
	margin-left:3px;
	height: 0;
	display:inline-block;
	width:39%;
	border:1px solid #170d18;
}
.bottombox .left {
	position: relative;
	padding-bottom: 22%;
	padding-top:0;
	margin-right:3px;
	height: 0;
	display:inline-block;
	width:39%;
	border:1px solid #170d18;
}
.bottombox .right iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.bottombox .left iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.midpic {
	margin-left:65px;
	margin-right:65px;
}
.midpic img {
	border:1px solid #000;
	width:100%;
	max-width:100%;
	height:auto;
}
@media only screen and (max-width: 1110px) {
	.videobox img {
		width:100%;
		max-width:100%;
		height:auto;
	}
	.scrollbox {
		max-width:630px;
	}
	.bottombox .right {
		position: relative;
		padding-bottom: 22%;
		padding-top:0;
		height: 0;
	}
	.bottombox .left {
		position: relative;
		padding-bottom: 22%;
		padding-top:0;
		height: 0;
	}
}
@media only screen and (max-width: 1000px) {
	.bottombox img {
		max-width:48%;
		width:48%;
		height:auto;
	}
}
@media only screen and (max-width: 870px) {
	header img {
		right:-130px;
	}
	header .logo img {
		width:350px;
		height:auto;
		right:0;
	}
	header .logo {
		left:10px;
		top:10px;
	}
	header .description {
		left:10px;
	}
	header .description img {
		right:0;
	}
	main h1 {
		max-width:530px;
		margin-left:auto;
		margin-right:auto;
	}
	.bottombox img {
		margin-left:0;
		margin-right:0;
}
@media only screen and (max-width: 800px) {
	.scrollbox {
		max-width:320px;
	}

}
@media only screen and (max-width: 670px) {
	main h2 {
		max-width:500px;
		margin-left:auto;
		margin-right:auto;
		text-align:center;
	}
	.bottombox .right {
		position: relative;
		padding-bottom: 56%;
		padding-top:0;
		margin-left:10px;
		margin-right:10px;
		height: 0;
		width:100%;
		border:1px solid #170d18;
		display:block;
	}
	.bottombox .left {
		position: relative;
		padding-bottom: 56%;
		padding-top:0;
		margin-left:10px;
		margin-right:10px;
		margin-bottom:10px;
		height: 0;
		width:100%;
		border:1px solid #170d18;
		display:block;
	}
	.bottombox .left iframe {
		margin-bottom:10px;
	}
}
@media only screen and (max-width: 540px) {
	header .logo {
		position:relative;
		left:0;
		right:0;
		margin:190px auto 0 auto;
	}
	header .logo img {
		width:300px;
		max-width:300px;
		height:auto;
	}
	header .description {
		margin:10px auto 0 auto;
		position:relative;
		left:0;
		right:0;
		bottom:0;
	}
	header .description img {
		position:relative;
	}
	header .description img {
		width:280px;
		max-width:280px;
		height:auto;
	}
	.bottombox {
		padding:0 20px;
	}
	.bottombox img {
		max-width:100%;
		width:100%;
		height:auto;
	}
	.carousel .bttn {
		display:none;
	}
	.carousel {
		padding:0 18px;
	}
	.scrollbox {
		max-width:100%;
	}
	.midpic {
		margin-left:20px;
		margin-right:20px;
	}
}
@media only screen and (max-width: 380px) {
	main h1 {
		width:280px;
	}
}