/*HB ONLINE CSS */
#outer {
width:100%;	
}
* {
	margin: 0 0 0 0;
	padding: 0;
  } 
a {
	outline : none;
	text-decoration : none;
}
a:hover
{
	text-decoration:underline;	
}
body {
	font-size:2.0em;
	font-family: Arial,'Lucida Grande',Verdana,sans-serif;
	/*text-align:center;*/
	margin-left:auto;
	margin-right:auto;
	
	/*iOS font boosting hack*/
 	-webkit-text-size-adjust: 100%;
	width: 100%;
}
#twfb {
	width: 100%;
	text-align: left;
	margin-right: auto;
	margin-left: auto;
	padding-left: 0px;
}
  
.loginbtn {
/*background:#663366;*/
background-color:#8E7497;
/*min-width:2em;*/
float:right;
padding:0.5em 1em 0.5em 1em;
border:1px solid #e7daf3;
/*height:2em;*/
text-align:center;
line-height:1em;
margin:0 0.2em 0px 0.2em;
border-radius:0px;
-mot-border-radius:0px;
/*-webkit-border-radius:7px;*/
/*-o-border-radius:7px;*/
cursor:pointer;
font-size:0.5em;
color:#fff;

}

.loginbtn a {
font-size:1em;
color:#fff;

}


.loginbtn:hover{
background:#a487c2;
color:#fff;
text-decoration:none;
}

.loginbtn a{
color:#fff;
text-decoration:none;
}

.newreg {
	color:#FFF; 
 	padding-top:0em;	
}
  
#header {
	/*  height:80px;*/
	width:100%;
	/* for iOS gap problem */
	margin:0 auto -1px auto;
	padding-top:0.5em;
	padding-bottom:0.5em;
	/*self centering page*/  
 /*	margin-left:auto;
 	margin-right:auto;*/
	border-width:medium;
	/*beach graphic*/
	background: #C6B4D8; /*url(images/hbbackground.jpg) no-repeat top center; removed beach graphic*/
	/* height */
	min-height: 1em;
	font-size:1em;
	color:#FFF;
}

#header a {
}

#header h1 {
	font-size:0.78em;
	/*font-family:"Comic Sans MS", cursive; cursive on iphone but handwriting on mac */
}

#logo {
	
	/*purple color same as background */
	color:#ffffff;
	height: 3em;
	/* hb logo*/
	/* moved to dynamic background: #C6B4D8 url(images/hblogo.png) no-repeat right top; */

	/* iOS logo hack */
	/*-webkit-background-size: 50% 70%;*/
	margin-left: auto;
	margin-right: auto;
}

#newregistration {
	/*font-size:large; */
	/*line-height:2em; */
	text-align:center;
}

#newregistration a:hover {
	outline:#FFF;
}

#footer {
	/* iOS hack to remove gap */
	margin:-1px auto 0 auto;
	/* entire width of footer */
  	width:100%;
	border-width:medium;
	/* self centering */
	padding:0.5em 0 0.5em 0;
	background-color:#C6B4D8;
	min-height:1em;
}

#footer-pad {
	/*width:980px;*/
	padding:0em 0em 0.5em 0em;
	text-align:center;
}

#footer p {
	/* footer tag style*/
	font:0.3em Arial, "Times New Roman", Times;
	color:#FFF;
}

#footer a {
	/* footer link style */
	color:#FFF;
	text-decoration:underline;
}

#footer a:hover {
	/* footer link mouseover style */
	color:#BD6B54;
	text-decoration:none;
}

.white {
	color:#FFF;
}

#slogan {
	text-align:left;
	font:14px "Arial Bold Italic", "Arial Italic";
	color:#FFF;
}

#page {
	/* page width */
	width:100%;
	/* self centering web */
	/*margin-left: auto;
	margin-right: auto;*/
	/*border-width: medium;*/
	/*background-color:#C6B4D8;*/
	background-color:#FEFDFD;
	/* firefox hack for height adjustment*/
	overflow:auto;
}

#content {
	/* content to the right of nav bar */
	/*float:right;*/
	/* 800px page 518 + 22 + 22 = 562 px content leaves 238 for nav bar*/
	overflow:hidden;
	/*padding:2em;*/
	/*background-color:#C6B4D8; commented to test inheritance*/
	/* hb logo in background */
	/*background: url(images/HypnobirthingBigLogo.png) no-repeat center 128px;*/
}

.box {
	width:100%; 
	/*background:#C6B4D8;*/
 	/*margin:auto;*/
	/* defines opacity of box to allow hb logo to show through */
	/* for IE */
 	/*filter:alpha(opacity=85);*/
 	/* CSS3 standard */
	/*opacity:0.85;*/
}
.box a {
	/* defines style of links in box */
	/*color:#FFF; */
	color:#929292;
	text-decoration:none;  
	/*font-size:0.5em;*/
}

.box a:hover {
	/* defines style of links in box when mouse hovering */
	/*color:#929292;*/ /* gray*/
	text-decoration:underline; /* */
}
#trialbutton a:hover {
	text-decoration:none; /* */
}

.box a.textchange span.text1 {
display:inline;
}
.box a.textchange:hover span.text1 {
display:none;
}
.box a.textchange span.text2 {
display:none;
}
.box a.textchange:hover span.text2 {
display:inline;
}

.box p{
	/* defines style of p tag in box */
	/*color:#934F94; /*purple text */
	color:#000; /*black */
	/*color:#8E7497; /* button purple */
	text-align:left;
	padding:0.5em 0em;
	font-family: Arial, Helvetica, sans-serif;
	font-size:0.5em;
}

/*.box li{
	color:#8E7497; /* button purple */
	/*font-size: large;*/
	/*margin:1em 0em 1em 1.5em;*/
/*}*/
.box ol{
	font-size:0.9em;
}

.box ul{
    color:#8E7497; /* button purple */
	padding:0;
    margin-left:0.5em;
	font-size:0.5em;
}

.box li {
	/*line-height:0.5em;*/
}

.box li span {
	font-size: 0.9em;
	color:#000; /* black */	
	text-align:left;
}


#bullets {
	color:#8E7497; /* button purple */
	font-size: 0.5em;
}

.box h1 {
	/* defines style of h1 tag in box */
	/*color:#FFF; commented due change in color */
	/*color:#C6B4D8; light purple */
	/*color:#929292; /* gray*/
	color:#8E7497; /*button purple */
	
	text-align:left;
	padding-bottom:0px;
	font-family: "Arial Black", Gadget, sans-serif;
	font-size:0.8em;
}

@media all and (orientation:portrait) {
.box h1 {
	/* defines style of h1 tag in box */
	/*color:#FFF; commented due change in color */
	/*color:#C6B4D8; light purple */
	/*color:#929292; /* gray*/
	color:#8E7497; /*button purple */
	
	text-align:left;
	padding-bottom:0px;
	font-family: "Arial Black", Gadget, sans-serif;
	font-size:0.6em;
}
}

.box h2,h3,h4,h5 {
	color:#C6B4D8;
	/*color:#FFF;*/
	text-align:left;
	padding-top:1em;
	font-size: medium;
}

.box-top {
	width:100%; 
	height:1em;
	/*background-color:#C6B4D8;  commented to test inheritance*/ 
	
	/* for IE */
  	filter:alpha(opacity=85);
  	/* CSS3 standard */
  	opacity:0.85;
}

.box-bottom {
	width:100%; 
	height:2em;
	/* background:#C6B4D8; commented to test inheritance */
  	
	/* for IE */
  	filter:alpha(opacity=85);
  	/* CSS3 standard */
  	opacity:0.85;
}

.box-padding {
	padding:0em 0.5em 0em 0.5em
}

.box-margin {
	margin:0px 0px 0px 0px
}

.menu {
	width:5%;
	font-size:0.8em;

	text-align:center;
	float:left;

}

.titletext{
	width:95%;
	float:right;
	text-align:center;
}

.desktoplink
{
	opacity:0.3;
	text-align:center;
	font-size:0.3em;
	
}

.imagefloatleft {
	/* defines style of floting image to the left */
 	float:left;
 	/*margin:0.5em 0.5em 0.0em 0.0em;*/
 	padding:0.5em 0.5em 0.5em 0em;
 	border:0px solid #000;
	max-width:200px;
	width:33%;
}

.imagefloatright {
	/* defines style of floting image to the right */
	float:right;
	/*margin:0.5em 0.0em 0.0em 0.5em;*/
	padding:0.5em 0em 0.5em 0.5em;
	border: 0px solid #000;
	max-width:200px;
	width:33%;
}
/*@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){*/
/*@media only screen and (max-width : 320px) { */
@media all and (orientation:portrait) {
.imagefloatright {
	/* defines style of floting image to the right */
	float:right;
	/*margin:0.5em 0.0em 0.0em 0.5em;*/
	padding:0.5em 0em 0.5em 0.5em;
	border: 0px solid #000;
	max-width:100%;
	width:100%;
}
/* STYLES GO HERE */ }

.image-text-float {
	/* defines style of text around a floating image*/
	/*  padding:0px;*/
	margin:0.5em 0em 0em 0em;
	width:100%;
	/*  height:auto;*/
	text-align:justify;
}

.image-text-float span {
	font:1em Arial, Helvetica, sans-serif;
	color:#8E7497;
	text-align:left;
}

.clearboth {
	/* defines style to clear float */
	clear:both;
}

#left-nav {
	/* defines a nav bar on the left in remaining 238px after content block */
	float:left;
	padding-top:1em;
	/*width:238px;*/
	/*width:26%;*/
	text-align:right;
}

.nav-headline {
	/* defines style of nav bar title */
  	font:1.5em Georgia, Arial, "Times New Roman", Times;
  	color:#C6B4D8;
  	text-align:center;
  	padding-bottom:0px;
  	/* background-color:#C6B4D8 commented to test inheritance */
	/*min-height:1em;*/
}

#main-menu ul {
  	list-style:none;
  	padding-bottom:0px;

}
#main-menu li a {
	/* defines line item style of the link in nav bar */
  	/*color:#FFF;*/
	/*color:#C6B4D8; /* light purple */
	/*color:#663366; /* burgandy */
	color:#8E7497; /* button purple */
	

  	font-family: Arial, "Times New Roman", Times, serif;
  	font-size: large;
  	text-decoration: none;
	
	/* Curly bracket image */
  	/*background: transparent url(images/menu-button.png) no-repeat right center;*/

  	padding:0 2em 0 2em;
  	line-height:2em;

	/* makes whole area of nav menu clickable, not just the text */
  	display:block;

}
@media all and (orientation:portrait) {
#main-menu li a {
	/* defines line item style of the link in nav bar */
  	/*color:#FFF;*/
	/*color:#C6B4D8; /* light purple */
	/*color:#663366; /* burgandy */
	color:#8E7497; /* button purple */
	

  	font-family: Arial, "Times New Roman", Times, serif;
  	font-size:0.45em;
  	text-decoration: none;
	
	/* Curly bracket image */
  	/*background: transparent url(images/menu-button.png) no-repeat right center;*/

  	padding:0 2em 0 2em;
  	line-height:2em;

	/* makes whole area of nav menu clickable, not just the text */
  	display:block;

}
}
  
#main-menu li a:hover {
	/* defines style of line item style of link once mouse hovering over it */
	
	/*background-color:#929292; /* gray */
	/*background-color:#8E7497; /* button purple */
	background-color:#C6B4D8;
	color:#FFF; /*white font */
	/* options to change color of font and underlining */
	/*	color:#8C8D94;
	text-decoration: underline;*/
}

.left-nav-divider {
	/* background-color:#C6B4D8;*/
	width:1px;
	/*  height:1px;*/
	padding-bottom:1em;
}
  
#posts ul {
	/* style for group of links under nav bar */
	list-style:none;
	padding-bottom:1em;
	padding:0em 0em 1.0em 1.8em;
}
  
#posts li a {
	/* style for each link under nav bar */
  	 color:#663366; /*dark purple*/
	font-family: "Arial Black", Gadget, sans-serif;
  	font-size: 1em;
  	line-height:2em;
	text-decoration: none;
	
	/* Curly bracket image */
    /*background: transparent url(images/menu-button.png) no-repeat right center;*/
  	padding:0 2em 0 2em;
}
  
#posts li a:hover {
	/* style for mouse hover */
	color:#000;
	background:#FFF;
  	text-decoration: underline;
}

#subscribe {
	/* style for the subscribe box */
	text-align:right;
	padding-right:2em;
}

#subscribe input {
	/* style for subscribe input box */
	margin:0.3em 0;
}

.inputstyle {
	background:#090909;
	border:1px solid #404040;
	width:6em;
	/*  height:22px;*/
	color:#FFF;
	font-size:medium;
	padding-top:0.5em;
	padding-left:1em;
}

.button {
	/* style for button */
	
	/* button graphic*/
	background:transparent url(images/button.gif) no-repeat top left;
	
	vertical-align:middle;
	
	padding-bottom:0.5em;
	border:none;
	width:13%;
	/*  height:31px;*/
	color:#FFFFFF;
	font:bold 1em Arial, Georgia, "Times New Roman", Times;
	cursor:pointer;
	margin-left:0.5em;
}

.line {
	/* style of line 486px wide */
	background: transparent url(images/line.gif) no-repeat top left;
	width:49%;

/*  height:1px;*/
	padding-bottom:1em;
	margin:0 0 0 0;
}

.line2 {
	/* style of another line 622 px wide*/
	background: transparent url(images/line.gif) no-repeat top left;
	width:62%;
	/*  height:1px;*/
	margin:1em 0 1em 0;
}

#shadow {
	width: 84%;
	margin-right: auto;
	margin-left: auto;
	background-image: url(images/dropshadow.jpg);
	background-repeat: repeat-y;
}
#shadow-top {
	background-image: url(images/dropshadow-top.jpg);
	height: 1em;
	width: 84%;
	margin-right: auto;
	margin-left: auto;
}
#shadow-bottom {
	background-image: url(images/dropshadow-bottom.jpg);
	height: 1em;
	width: 84%;
	margin-right: auto;
	margin-left: auto;
}
.btn{ /* define button color */
/*background:#663366;*/
background-color:#8E7497;
border:1px solid #e7daf3;
text-align:center;
/*line-height:1em;*/
border-radius:0px;
-mot-border-radius:0px;
cursor:pointer;
color:#fff;
width:100%;
margin:auto;
display:flex;
justify-content:center;
align-items:center;
height:50px;
}
.btnpic{ /* define button color */
/*background:#663366;*/
background-color:#8E7497;
border:1px solid #e7daf3;
text-align:center;
/*line-height:1em;*/
border-radius:0px;
-mot-border-radius:0px;
cursor:pointer;
color:#fff;
width:100%;
margin:auto;
display:flex;
justify-content:center;
align-items:center;
height:150px;
}


.btn-premium {
  background-image: url('images/hbo-premium-400.png');
  width:100%;
	height:300px;
  background-repeat: no-repeat;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
	background-position: center; 

}

.btn-classic {
  background-image: url('images/hbo-classic-400.png');	
  width:100%;
	height:300px;
  background-repeat: no-repeat;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
	background-position: 60% 70%; 

}

.rib {
	width:100px;
	height: 100px;
	overflow : hidden;
	position: absolute;
}

.rib span {
	position: absolute;
	display: block;
	padding: 5px 10px;
	font-size: 0.3em;
	background-color: #c6b4d8;
	color: #FFF;
	text-transform: uppercase;
	left: 0px;
	bottom: 0px;
	/*transform: rotate(45deg);*/
}

.btn:hover {
/*background:#a487c2;*/
opacity: .5;
color:#fff;
text-decoration:none;
}

.btnpic:hover{
/*background:#a487c2;*/
opacity: .5;
color:#fff;
text-decoration:none;
}

.flexbox {
	display:flex;
  flex-flow: row wrap;
  flex-wrap: wrap;
  /* Then we define how is distributed the remaining space */
  justify-content: space-around;
}

.item {
  width: 45%;  /* Or whatever */
  height: 150px; /* Or whatever */
  margin: auto;  /* Magic! */
  display:flex;
  justify-content:left;
  align-items:center;
  flex-flow:column;

}

.item table {
	font-size:0.4em;
}

.btn a{
color:#fff;
text-decoration:none;
font-size:0.5em;
}

#trialbutton p {
	font-size:0.5em;
	color: #FFF;
	text-align:center;
	padding:0em 0em;
	text-decoration:none; /* */
}


#trialbutton a:hover {
background:#a487c2;
color:#fff;
text-decoration:none;
}

.shoptab {
	font-size:0.5em;
	width:100%;
}
@media all and (orientation:portrait) {
	.shoptab table{
		width:90%;
	}
	.shoptab td:first-child {
		max-width:50px;
	}
	.shoptab td:nth-child(2) {
		width:80%;
	}
	.shoptab img{
		width:50px;
		height:50px;
	}
	.shoptab button span.btn{
		font-size:10px;
	}

 .px10 {
	font-size:10px;
}
}

@font-face {
    font-family: 'Dakota';
    src: url('includes/Dakota.eot');
    src: url('includes/Dakota.eot?#iefix') format('embedded-opentype'),
        url('includes/Dakota.woff2') format('woff2'),
        url('includes/Dakota.woff') format('woff'),
        url('includes/Dakota.svg#Dakota') format('svg'),
	 	url('includes/Dakota.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
}