.st-container {
	left: 0px; top: 0px; width: 100%; height: 100%; font-family: "Josefin Slab", "Myriad Pro", Arial, sans-serif; position: absolute;
}
.st-container > input {
	width: 20%; height: 39px; bottom: 0px; line-height: 39px; font-size: 20px; position: fixed; cursor: pointer;
}
.st-container > a {
	width: 20%; height: 39px; bottom: 0px; line-height: 39px; font-size: 20px; position: fixed; cursor: pointer;
}
.st-container > input {
	z-index: 1000; opacity: 0;
}
.st-container > a {
	background:url(bj.png); text-align: center; color: rgb(0, 0, 0); font-weight: 700; z-index: 10; text-shadow: 1px 1px 1px rgba(151,24,64,0.2);border-top:1px dashed #626262;border-left:1px dashed #626262;
	
}
.st-container::before {
	background: rgb(75, 64, 59); width: 100%; height: 39px; bottom: 0px; position: fixed; z-index: 9; content: "";
}
#st-control-1 {
	left: 0px;
}
#st-control-1 + a {
	left: 0px;
}
#st-control-2 {
	left: 20%;
}
#st-control-2 + a {
	left: 20%;
}
#st-control-3 {
	left: 40%;
}
#st-control-3 + a {
	left: 40%;
}
#st-control-4 {
	left: 60%;
}
#st-control-4 + a {
	left: 60%;
}
#st-control-5 {
	left: 80%;
}
#st-control-5 + a {
	left: 80%;
}
.st-container > input:checked + a {
	background: rgb(75, 64, 59); text-align: center; color: rgb(255, 255, 255);
}
.st-container > input:checked:hover + a {
	background: rgb(75, 64, 59); text-align: center; color: rgb(255, 255, 255);
}
.st-container > input:checked + a::after {
	border-width: 10px; border-style: solid; border-color: transparent transparent rgb(75, 64, 59); border-image: none; left: 50%; width: 0px; height: 0px; bottom: 100%; margin-left: -10px; position: absolute; content: ""; pointer-events: none;
}
.st-container > input:checked:hover + a::after {
	border-width: 10px; border-style: solid; border-color: transparent transparent rgb(75, 64, 59); border-image: none; left: 50%; width: 0px; height: 0px; bottom: 100%; margin-left: -10px; position: absolute; content: ""; pointer-events: none;
}
.st-container > input:hover + a {
	background: rgb(75, 64, 59); text-align: center; color: rgb(255, 255, 255);
}
.st-container > input:hover + a::after {
	border-bottom-color: rgb(75, 64, 59); text-align: center; color: rgb(255, 255, 255);
}
.st-scroll {
	width: 100%; height: 100%; position: relative;
}
.st-panel {
	width: 100%; height: 100%; position: relative;
}
.st-scroll {
	transition:0.6s ease-in-out; left: 0px; top: 0px; -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; -webkit-transform: translate3d(0, 0, 0); -webkit-backface-visibility: hidden;
}
.st-panel {
	background:url(view.png); overflow: auto;
	
}
:checked#st-control-1 ~ .st-scroll {
	transform: translateY(0%); -webkit-transform: translateY(0%); -moz-transform: translateY(0%); -o-transform: translateY(0%);
}
:checked#st-control-2 ~ .st-scroll {
	transform: translateY(-100%); -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -o-transform: translateY(-100%);
}
:checked#st-control-3 ~ .st-scroll {
	transform: translateY(-200%); -webkit-transform: translateY(-200%); -moz-transform: translateY(-200%); -o-transform: translateY(-200%);
}
:checked#st-control-4 ~ .st-scroll {
	transform: translateY(-300%); -webkit-transform: translateY(-300%); -moz-transform: translateY(-300%); -o-transform: translateY(-300%);
}
:checked#st-control-5 ~ .st-scroll {
	transform: translateY(-400%); -webkit-transform: translateY(-400%); -moz-transform: translateY(-400%); -o-transform: translateY(-400%);
}
.st-deco {


	background: rgb(127, 73, 29); left: 50%; top: 0px; width: 200px; height: 200px; margin-left: -100px; position: absolute; transform: translateY(-50%) rotate(45deg); -webkit-transform: translateY(-50%) rotate(45deg); -moz-transform: translateY(-50%) rotate(45deg); -o-transform: translateY(-50%) rotate(45deg);
}
[data-icon]::after {
	margin: -100px 0px 0px -100px; left: 50%; top: 50%; width: 200px; height: 200px; text-align: center; color: rgb(255, 255, 255); line-height: 200px; font-family: "RaphaelIcons"; font-size: 30px; position: absolute; content: attr(data-icon); text-shadow: 1px 1px 1px rgba(151,24,64,0.2); transform: rotate(-45deg) translateY(25%); -webkit-transform: rotate(-45deg) translateY(25%); -moz-transform: rotate(-45deg) translateY(25%); -o-transform: rotate(-45deg) translateY(25%);
}
.st-panel h2 {
	margin: 0px 0px 0px; padding: 0px; left: 20%; top: 5%; width: 60%; text-align: center; color: rgb(226, 58, 110); line-height: 50px; font-size: 54px; font-weight: 900; position: absolute; text-shadow: 1px 1px 1px rgba(151,24,64,0.2); -webkit-backface-visibility: auto;
}
:checked#st-control-1 ~ .st-scroll #st-panel-1 h2 {
	animation:moveDown 0.6s ease-in-out 0.2s backwards; -webkit-animation: moveDown 0.6s ease-in-out 0.2s backwards; -moz-animation: moveDown 0.6s ease-in-out 0.2s backwards; -o-animation: moveDown 0.6s ease-in-out 0.2s backwards;
}
:checked#st-control-2 ~ .st-scroll #st-panel-2 h2 {
	animation:moveDown 0.6s ease-in-out 0.2s backwards; -webkit-animation: moveDown 0.6s ease-in-out 0.2s backwards; -moz-animation: moveDown 0.6s ease-in-out 0.2s backwards; -o-animation: moveDown 0.6s ease-in-out 0.2s backwards;
}
:checked#st-control-3 ~ .st-scroll #st-panel-3 h2 {
	animation:moveDown 0.6s ease-in-out 0.2s backwards; -webkit-animation: moveDown 0.6s ease-in-out 0.2s backwards; -moz-animation: moveDown 0.6s ease-in-out 0.2s backwards; -o-animation: moveDown 0.6s ease-in-out 0.2s backwards;
}
:checked#st-control-4 ~ .st-scroll #st-panel-4 h2 {
	animation:moveDown 0.6s ease-in-out 0.2s backwards; -webkit-animation: moveDown 0.6s ease-in-out 0.2s backwards; -moz-animation: moveDown 0.6s ease-in-out 0.2s backwards; -o-animation: moveDown 0.6s ease-in-out 0.2s backwards;
}
:checked#st-control-5 ~ .st-scroll #st-panel-5 h2 {
	animation:moveDown 0.6s ease-in-out 0.2s backwards; -webkit-animation: moveDown 0.6s ease-in-out 0.2s backwards; -moz-animation: moveDown 0.6s ease-in-out 0.2s backwards; -o-animation: moveDown 0.6s ease-in-out 0.2s backwards;
}
.st-panel p {
	margin: 10px 0px 0px; padding: 0px; left: 10%; top: 35%; width: 80%; text-align: left; color: rgb(139, 139, 139); line-height: 32px; font-size: 16px; position: absolute; z-index: 2; -webkit-backface-visibility: auto;
}
:checked#st-control-1 ~ .st-scroll #st-panel-1 p {
	animation:moveUp 0.6s ease-in-out 0.2s backwards; -webkit-animation: moveUp 0.6s ease-in-out 0.2s backwards; -moz-animation: moveUp 0.6s ease-in-out 0.2s backwards; -o-animation: moveUp 0.6s ease-in-out 0.2s backwards;
}
:checked#st-control-2 ~ .st-scroll #st-panel-2 p {
	animation:moveUp 0.6s ease-in-out 0.2s backwards; -webkit-animation: moveUp 0.6s ease-in-out 0.2s backwards; -moz-animation: moveUp 0.6s ease-in-out 0.2s backwards; -o-animation: moveUp 0.6s ease-in-out 0.2s backwards;
}
:checked#st-control-3 ~ .st-scroll #st-panel-3 p {
	animation:moveUp 0.6s ease-in-out 0.2s backwards; -webkit-animation: moveUp 0.6s ease-in-out 0.2s backwards; -moz-animation: moveUp 0.6s ease-in-out 0.2s backwards; -o-animation: moveUp 0.6s ease-in-out 0.2s backwards;
}
:checked#st-control-4 ~ .st-scroll #st-panel-4 p {
	animation:moveUp 0.6s ease-in-out 0.2s backwards; -webkit-animation: moveUp 0.6s ease-in-out 0.2s backwards; -moz-animation: moveUp 0.6s ease-in-out 0.2s backwards; -o-animation: moveUp 0.6s ease-in-out 0.2s backwards;
}
:checked#st-control-5 ~ .st-scroll #st-panel-5 p {
	animation:moveUp 0.6s ease-in-out 0.2s backwards; -webkit-animation: moveUp 0.6s ease-in-out 0.2s backwards; -moz-animation: moveUp 0.6s ease-in-out 0.2s backwards; -o-animation: moveUp 0.6s ease-in-out 0.2s backwards;
}
.st-color {
	background: rgb(178, 150, 126);
}
.st-deco {
	background: rgb(178, 150, 126);
}
.st-color [data-icon]::after {
	color: rgb(139, 84, 45);
}
.st-color .st-deco {
	background: rgb(255, 255, 255);
}
.st-color h2 {
	color: rgb(255, 255, 255); text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
}
.st-color p {
	color: rgba(255, 255, 255, 0.8);
}
@media screen and (max-width:520px)
{
.st-panel h2 {
	font-size: 42px;
}
.st-panel p {
	left: 5%; width: 90%; margin-top: 0px;
	
}
.div1 img  {
   
    width: 100%;
    height: auto;
	display:block;
	margin:0 auto;
   
}
.st-container > a {
	font-size: 13px;
}
}
@media screen and (max-width:360px)
{
.st-container > a {
	font-size: 10px;
}
.st-deco {
	width: 120px; height: 120px; margin-left: -60px;
}
[data-icon]::after {
	font-size: 40px; transform: rotate(-45deg) translateY(15%); -webkit-transform: rotate(-45deg) translateY(15%); -moz-transform: rotate(-45deg) translateY(15%); -o-transform: rotate(-45deg) translateY(15%);
}
}