@charset "utf-8";
/* CSS Document */
body {
	margin: 0;
	padding: 0;
	background: #ffffff;
}
.c_main {
	
	background-image: url(../img/massage.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	width: 100%;
	height:100vh;
position:fixed;
}

.main {
	margin: 0 auto;
	position: relative;
	max-width: 550px;
	width: 100%;
	height:100%;
	background: rgba(255, 255, 255, 0.5);
	z-index:10;
}
.content {
	    padding: 120px 50px 20px 50px;
    font: 500 25px/140% 'Quicksand', Arial, Helvetica, sans-serif;
    letter-spacing: 0.5px;
    color: #8C1812;
    height: 100%;
    text-align: center;
    position: relative;
    min-height: 100vh;
}
.content a {
	color: #8C1812;
	text-decoration: none;
}
.content a:hover {
	color: #8C1812;
	text-decoration: underline;
}
.logo {
	width: 100%;
	height: auto;
	margin: 60px 0 0 0;
}
.logo img {
	width: 240px;
}
h1 {
	font: 500 48px/120% 'Quicksand', Arial, Helvetica, sans-serif;
	color: #ffffff;
	padding: 0;
	margin: 0;
	letter-spacing: 3px;
	text-transform: uppercase;
	text-align: center;
}
h2 {
	font: 400 40px/120% 'Quicksand', Arial, Helvetica, sans-serif;
	color: #ffffff;
	padding: 0;
	margin: 0 0 13px 0;
	letter-spacing: 7px;
	text-transform: uppercase;
	text-align: center;
}
h3 {
	font: 500 32px/120% 'Quicksand', Arial, Helvetica, sans-serif;
	color: #8C1812;
	letter-spacing: 8px;
	text-transform: uppercase;
	text-align: center;
}
@media only screen and (max-width: 650px)
	{
		body
		{
			padding: 0px;
			position: relative;
			height: auto;
			box-sizing:border-box;
			display: inherit;
		}
		.box
		{
			width:100%;
			text-align:center;
			
		}
		.box img
		{
			padding-bottom:20px;
			width:100%;
			max-width: 300px;
			height:auto;
		}
		.box ul
		{
			max-width: 277px;
			float:none;
			margin: 0 auto;
			text-align:left;
		}
		h1
		{
			text-align:center;
			font-size:20px;
		}
		h2, h3 {
			font-size:20px;

		}
		.content {
			font-size:14px;
		}
	}