@font-face {
font-family: 'sofiaprolight';
src: url('/fonts/SofiaProLight-webfont.eot');
src: url('/fonts/SofiaProLight-webfont.eot?#iefix') format('embedded-opentype'),
	url('/fonts/SofiaProLight-webfont.woff') format('woff'),
	url('/fonts/SofiaProLight-webfont.ttf') format('truetype'),
	url('/fonts/SofiaProLight-webfont.svg#sofia_pro_lightregular') format('svg');
font-weight: normal;
font-style: normal;
}


* {
outline: none;
}

body {
min-width:1000px;
margin: 0;
padding: 0;
font-family: sofiaprolight, sans-serif;
color: #444;
background: url(/images/body-bg.jpg) repeat center top;
font-size:14px;
line-height:16px;
}

a {
text-decoration: none;
color: #dd4f8a;
}

h1 {
font-size: 200%;
line-height: 200%;
font-weight: normal;
margin: 0;
padding: 0;
}

h2 {
font-size: 150%;
line-height: 150%;
font-weight: normal;
font-style: italic;
margin: 0;
padding: 0;
opacity: 0.5;
}

h3 {
font-size: 125%;
line-height: 125%;
font-weight: normal;
margin: 0;
padding: 0;
}

p {
margin: 5px 0 10px 0;
line-height:150%;
}

hr {
clear: both;
margin: 20px 0;
padding: 0;
background-color: transparent;
height: 1px;
border: 0;
border-top: 1px solid #ddd;
font-size: 0;
}

b, strong {
font-weight: normal;
color: #dd4f8a;
}

/* GENERIC HEADER *******************/
#header {
position: absolute;
top: 0;
left: 50%;
width: 1000px;
height: 300px;
border-spacing: 0;
border-collapse: collapse;
margin-left: -500px;
background-color: rgba(255, 255, 255, 0.5);
box-shadow: 0 0 7px rgba(0, 0, 0, 0.3);
}

#header .photos {
width: 100%;
height: 300px;
max-width: 450px;
padding: 0;
font-size: 0;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}

#header .photos .photo {
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}

#header .content {
position:relative;
height: 100%;
min-width: 550px;
}

#header .logo {
display: block;
height: 90px;
}

#header .logo .kimono-girl-logo {
float:none;
display: inline-block;
margin:10px 0 0 40px;
}

#header ul.nav {
height: auto;
padding: 0;
margin: 0;
}

#header ul.nav li {
margin: 0;
padding: 0 0 0 40px;
list-style-type: none;
}

#header ul.nav li:first-child {
display: none;
height: 15px;
overflow: hidden;
border-top: 1px solid #ddd;
}

#header ul.nav li a {
display: block;
font-size: 120%;
height: 28px;
line-height: 28px;
color: #444;
}

#header ul.nav li:hover a,
#header ul.nav li.active a,
#header a.contact:hover {
color: #dd4f8a;
}

#header .contact {
position: absolute;
display: block;
float: right;
width: 50px;
height: 300px;
border-left: 1px solid #ddd;
text-align: center;
}

#header .contact.phone b {
display: block;
padding: 0 20px;
word-break: break-all;
font-weight: normal;
color: #999;
font-size: 110%;
line-height: 110%;
}

#header .contact i {
position: absolute;
display: inline-block;
opacity: 0.3;
}

#header .contact.phone {
display: none;
right: 0px;
top: 50px;
height: 250px;
}

#header .contact.phone i {
top:12px;
left:16px;
}

#header .contact.email {
width: 50px;
height: 300px; /* 50px; */
right: 0px;
top: 0px;
border-bottom: 0px solid #ddd;
}

#header .contact.email i {
top: 17px;
left: 13px;
}

#header .contact.email b {
display: none;
}

#header .contact .white-block {
display: inline-block;
width: 50px;
height: 100%;
background-color: rgba(255, 255, 255, 0.3);
margin-bottom: 8px;
}

#header .contact:hover {
background-color: rgba(255, 255, 255, 0.3);
}

#header .contact:hover .white-block {
background-color: rgba(255, 255, 255, 0.6);
}


/* HOMEPAGE HEADER *******************/
#pg-home #header {
position: absolute;
top: 0;
left: 0;
border-spacing: 0;
border-collapse: collapse;
width: 100%;
height: 615px;
margin: 0;
min-width: 1000px;
background-color: rgba(255, 255, 255, 0.5);
box-shadow: 0 0 7px rgba(0, 0, 0, 0.3);
}

#pg-home #header .photos {
width: 100%;
height: 615px;
max-width: 450px;
padding: 0;
font-size: 0;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}

#pg-home #header .photos .photo {
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}

#pg-home #header .content {
height: 100%;
min-width: 360px;
padding: 0;
}

#pg-home #header .logo {
display: block;
height: 120px;
background-color: rgba(255,255,255, 0.3);
}

#pg-home #header .logo .kimono-girl-logo {
float:none;
display: inline-block;
margin:25px 0 0 45px;
}

#pg-home #header .nav {
height: 392px;
padding: 0;
margin: 0;
}

#pg-home #header .nav li {
margin: 0;
padding: 0 0 0 45px;
list-style-type: none;
}

#pg-home #header .nav li:first-child {
display: block;
height: 15px;
overflow: hidden;
border-top: 1px solid #ddd;
}

#pg-home #header .nav li a {
display: block;
height: 45px;
line-height: 45px;
color: #444;
}

#pg-home #header .nav li:hover a, #pg-home #header .nav li.active a, #pg-home #header a.contact:hover {
color: #c06;
}

#pg-home #header .contact {
position: relative;
display: block;
clear: both;
float: none;
width: 100%;
height: 50px;
top: inherit;
right: inherit;
line-height: 50px;
border-top: 1px solid #ddd;
color: #444;
text-align: left;
font-size: 120%;
}

#pg-home #header .contact i {
position:a bsolute;
display: inline-block;
opacity: 0.3;
}

#pg-home #header .contact b {
display: inline-block;
padding: 0;
}

#pg-home #header .contact.phone {
visibility: hidden;
left: 0;
}

#pg-home #header .contact.phone i {
top: 10px;
left: 50px;
}

#pg-home #header .contact.phone b {
font-size: 100%;
}

#pg-home #header .contact.email {
border-bottom: 0;
}

#pg-home #header .contact.email i {
top: 17px;
left: 45px;
}

#pg-home #header .contact.email b {
font-weight: normal;
}

#pg-home #header .contact .white-block {
display: inline-block;
width: 85px;
height: 50px;
background-color: rgba(255, 255, 255, 0.3);
margin-right: 15px;
margin-bottom: 0;
}

#pg-home #header .contact:hover {
background-color: rgba(255, 255, 255, 0.3);
}

#pg-home #header .contact:hover .white-block {
background-color: rgba(255, 255, 255, 0.6);
}



#scroll-header {
display: none;
position: fixed;
z-index: 100;
top: 4px;
left: 0;
width: 100%;
height: 60px;
overflow: hidden;
background-color: rgba(255, 255, 255, 0.9);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3), 0 -4px 0 0 #dd4f8a;
}

#scroll-header .content {
width: 1000px;
margin: 0 auto;
padding-top:5px;
}

#scroll-header .sakura-large {
position: absolute;
margin: 5px 0 0 -50px;
}

#scroll-header ul {
float: right;
margin: 0;
padding: 0;
}

#scroll-header ul li {
display: inline-block;
list-style: none;
padding: 0;
margin: 0;
height: 45px;
line-height: 45px;
font-size: 110%;
}

#scroll-header li a {
display: block;
padding: 0 10px;
color: #444;
}

#scroll-header li:last-child a {
padding-right: 0;
}


#scroll-header li:hover a,
#scroll-header li.active a {
color: #dd4f8a;
}

#scroll-header ul li.split {
color:#888;
}



#page {
width: 1000px;
margin: 0 auto 40px auto;
padding-top: 260px;
}

#pg-home #page {
padding-top: 615px;
}

#legal {
font-size: 90%;
opacity: 0.8;
text-align: center;
padding: 15px 0;
}


/* BOX CLASSES **************************/

.box {
display: block;
margin-top: 40px;
background: rgba(255, 255, 255, 0.4);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
color: inherit;
}

.box.left {
float: left;
}

.box.right {
float: right;
}

.box.trim {
border-top: 4px solid #dd4f8a;
}

.box .indent {
padding: 30px 40px;
}

.boxrow {
display: table;
border-spacing: 40px 0;
margin: 40px -40px 0 -40px;
}

.boxrow .box {
margin-top: 0;
display: table-cell;
}

.boxrow.two .box {
width: 480px;
margin-left: 40px;
}

.boxrow.three .box {
width: 306px;
margin-left: 40px;
}

.boxrow.four .box {
width: 220px;
margin-left: 40px;
}

.box.event .image {
min-height: 150px;
background: no-repeat left top;
}

.box.event .indent {
padding-left: 230px;
padding-bottom: 10px;
}



#home-plans {
margin-left: -40px;
}

#home-plans .box {
float: left;
margin-left: 40px;
width: 220px;
height: 250px;
text-align: center;
cursor: pointer;
}

#home-plans .box .sprite {
display: inline-block;
float: none;
margin: 20px 0 0 0;
}

#home-plans .box .sprite.on {
display: none;
}

#home-plans .box h3 {
padding: 5px 0 0 0;
margin: 0;
font-size: 140%;
font-weight: normal;
}

#home-plans .box p {
font-size: 90%;
margin: 15px 0 5px 0;
padding: 0 15px;
line-height: 130%;
}


#home-plans .box:hover {
background-color: #d3095e;
color: #fff;
}

#home-plans .box:hover .sprite.off {
display: none;
}

#home-plans .box:hover .sprite.on {
display: inline-block;
}

#home-plans .box.disabled {
opacity: 0.5;
}

#home-plans .box.disabled .msg {
display: none;
position: absolute;
width: 220px;
height: 250px;
background: rgba(255, 255, 255, 0.8);
color: #333;
}

#home-plans .box.disabled .msg p {
margin: 0;
padding:60px 10px;
font-size: 30px;
}

#home-plans .box.disabled:hover .msg {
display: block;
}




.clear {
clear: both;
height: 1px;
overflow: hidden;
}

.clear.small		{ height:5px; }
.clear.medium	{ height:20px; }
.clear.large		{ height:40px; }



#collection {
margin-left: -40px;
}

#collection>.box {
float: left;
position: relative;
margin: 30px 0 30px 40px;
cursor: pointer;
border-radius: 20px;
}

#collection>.box>span.new {
display: block;
position: absolute;
width: 65px;
height: 65px;
background: url(/images/new-icon.png) no-repeat;
top: -15px;
right: -10px;
}

#collection>.box>span.plus {
display: block;
position: absolute;
width: 65px;
height: 65px;
background: url(/images/plus-icon.png) no-repeat;
top: -15px;
left: -10px;
}

#collection>.box>div {
background: #fff no-repeat center center;
background-size: cover;
width: 150px;
height: 200px;
border-radius: 20px;
box-shadow: 0 0 10px 5px rgba(255, 255, 255, 1);
opacity: 1.0;
}

#collection>.box>label {
display: block;
position: absolute;
width: 150px;
height: 25px;
margin-top: 200px;
line-height: 25px;
text-align: center;
font-size: 90%;
cursor: pointer;
}


#collection>.box:hover>label {
color: #dd4f8a;
}

/* SHIELD CLASSES **********************/
#shield {
position: fixed;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
z-index: 200;
}

#shield-frame {
position: absolute;
z-index: 201;
width: 80%;
min-width: 300px;
min-height: 300px;
left: 50%;
margin-left: -40%;
background: url(/images/body-bg.jpg) repeat center top;
box-shadow: 0 0 7px 0 rgba(255, 255, 255, 0.6);
}

#shield-frame>.content {
width: 100%;
height: 100%;
}

#shield-frame.shield-gallery {
height: 75%;
margin-top:5%;
}

#shield-frame.shield-photo {
width: 650px;
margin-top:5%;
margin-left: -325px;
height: auto;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.8);
}

#shield-frame.shield-photo img {
display: block;
}


.error {
padding: 8px 15px;
margin: 15px 0 20px 0;
color: #c00;
border: 1px solid #d00;
border-left: 8px solid #d00;
line-height: 20px;
}

.success {
padding: 8px 15px;
margin: 15px 0 20px 0;
color: #369;
border: 1px solid #69c;
border-left: 8px solid #69c;
line-height: 20px;
}

.note {
padding: 8px 15px;
margin: 15px 0 20px 0;
border: 1px solid #888;
border-left: 8px solid #888;
line-height: 20px;
}


form div.field {
padding: 5px 0 5px 170px;
}

form div.field .radioset {
padding: 5px 0 5px 0;
}

form div.field .radioset>label {
display: block;
padding:0 0 10px 25px;
cursor: pointer;
}

form div.field .radioset>label input {
position: absolute;
margin: 1px 0 0 -25px;
}

form div.field .radioset small {
padding: 0;
color: #888;
font-size: 80%;
line-height: 80%;
}

form div.field>label {
display: block;
position: absolute;
width: 150px;
margin: 7px 0 0 -170px;
}

form div.field input.text, form div.field textarea {
width: 300px;
border: 1px solid #ccc;
font-size: 100%;
font-weight: bold;
margin: 0;
line-height: 100%;
padding: 7px;
font-family: sofiaprolight;
}

form div.field input.text.small {
width: 150px;
}

form div.field input.text.tiny {
width: 40px;
}

form div.field select {
width: 300px;
border: 1px solid #ccc;
font-size: 100%;
margin: 5px 0 10px 0;
}

form div.field textarea {
height: 100px;
}

form div.field>small {
display: block;
padding-top: 3px;
color: #888;
font-size: 80%;
}

form div.field.captcha img {
width: 164px;
height: 40px;
cursor: pointer;
border: 1px solid #ccc;
}

form div.field.captcha input.text {
width: 150px;
font-size: 25px;
letter-spacing: 9px;
font-family: arial, sans-serif;
color: #666;
font-weight: normal;
text-indent: 6px;
}


form div.buttons {
padding: 20px 0 0 170px;
margin-top: 15px;
border-top: 1px solid #ddd;
}

button, a.button {
display: inline-block;
margin:0 20px 0 0;
width: 150px;
height: 40px;
line-height: 40px;
color: #fff;
font-size: 14px;
font-weight: normal;
text-transform: lowercase;
border: 0;
text-align: center;
font-family: sofiaprolight;
opacity: 0.8;
}

button.sprite.button, a.sprite.button {
background-color: #666;
}

.button.pink {
background-color: #d3095e;
}

.button.blue {
background-color: #369;
}

.button.green {
background-color: #996;
}


button:hover, a.button:hover {
cursor: pointer;
opacity: 1;
}

button.primary, a.button.primary {
background-color: #d3095e;
border: 1px outset #d3095e;
}


#gallery {
margin-left: -40px;
}

#gallery .column {
float: left;
width: 220px;
margin-left: 40px;
}

#gallery .column .box {
white-space: nowrap;
}

#gallery .column .box img {
display: block;
width: 100%;
}

#gallery .column .box .indent {
padding: 10px 15px;
}