/* -------- aroundbirth.org, Ingrid-------------*/

html{height: 100%;}

body
{ font: 62.5%/1.4 'Open Sans', sans-serif;
  background: #c9c9c9 url(bg-old.gif) repeat;
  padding: 0; margin: 0;
  font-size: 1em;}

p{	font-size: .85em; line-height: 2em;
	padding: 6px 24px 0px 24px;
	margin: 0px;
	font-weight: normal;
	color: #222;}

h1{ font-size: 1.8em;
   padding:0px 0px 6px 6px; 
  margin: 0px auto 0 18px;   background: transparent;           
  font-weight: normal;   color: #FF5A00; 
}

h2{
	font-size: 1em;
	padding: 12px 22px 12px 6px;
	margin: 0px 0 0 18px;
	font-weight: normal;
	color:#FFF;
}

h3{ font-size: .95em;
  padding: 36px 12px 0px 24px; 
  margin: 0px; color: #111;         
  font-weight: normal;}

h4{ font-size: 0.8em;
  padding: 0px; 
  margin: 0px;               
  font-weight: normal;}


h5{ font-size: 1.08em;
background: #FF7200;
  padding: 8px 12px 6px 12px; 
  max-width: 36em;
  font-weight: 500;
  margin: 23px 32px 0 23px; color: white;         
}

  
  .test {margin: 20px 0 0 30px; border-left: #FFECCF 8px solid; background: transparent url(quote.png) no-repeat; }
    .sub {color: #f60;}
  .sml {font-size: .4em; color: #F9F69B; padding: 0 0 0 12px; letter-spacing: .16em;  font-weight: 300;}
    .sml2 {font-size: .75em;  padding: 8px 0 0 23px; }
.lge { font-size: 1.1em; letter-spacing: .02em;}
.bout {margin: 0 20px 0 20px; font-size: 0.72em; letter-spacing: 0.08em;}
.therapy {padding: 12px 20px 12px 20px; color: #7E7F17;  letter-spacing: 0.05em; background: #FFFFEF url(faint-grid.jpg) repeat; margin: 20px 40px 20px 60px; border: dashed 1px #DFC3C3;}
.back {background: #ffc; padding: 6px; }
.back2 {color: #555; background: #FFFFDF; padding:2px ;}
.img {padding: 0 16px 4px 0;}
.home {font-size: 1.1em; letter-spacing: 0.05em;}
.grey {color: #888;}
.orange {color: #FD9B1E; text-align: center; font-size: 1.2em; }
.oran {background: #FF7200 !important;  
color: white; padding: 8px;
font-weight: 400;
border-radius: 6px;
}

.om {background: black; color: white; font-sizE: 1.1em; padding: 2px;}

@media all and (max-width : 1024px) {
	.bout {margin: 0;}
}


a{outline: none; color: tomato;}
a:link { text-decoration: none; padding: 0 3px;}
a:hover {	border: 0; color: tomato !important;	padding:0 3px; border-bottom: 0;}
a:active { background: #BEBF53; color: #fff !important; padding: 0 3px;}
	

img{ border: 0px; margin: 0px; padding: 0px; }



/* unordered list */
ul{ 	font-size: .9em; line-height: 2em;
	padding: 6px 24px 0px 24px;
	margin: 0px 0 0 12px; list-style-type:disc;
	font-weight: normal;
	color: #555;}


ul li{ list-style-type: disc;
  margin: 0px; 
  padding: 0px;
}

li{ 	font-size: .85em; line-height: 2em;
	padding: 6px 24px 0px 24px;
	margin: 0px 0 0 12px; list-style-type:disc;
	font-weight: normal;  
	color: #7F7F4F;}

/* margin lefts / margin rights - to centre content */
#main, #foot, #top, #nav, #site_content
{ margin-left: auto; 
  margin-right: auto;
}

/* main container -------------------------------- */
#main
{width: 84%;
 height: auto;
background: #transparent;
margin:0px 8% 23px 8%; padding: 50px 0 0 0 ;
    -moz-border-radius:16px;
	   -o-border-radius:16px;
    -webkit-border-radius:16px;
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.5);
}


@media all and (max-width : 1024px) {
#main {width: 100%; margin: 0 0 23px 0;}	
		
}



/* logo */
#top
{ width: 100%; padding: 0px;
  height: auto;  border-top: 0;
  background: #FEA218; text-align: center; padding: 0 0 23px 0;}
  
  
 
 #top a{color: #fff !important;}

#top a:hover {	opacity: .8; text-shadow: 2px 2px 20px #ffc;}



  
  #top h1
{ 
font-size: 3.6em; letter-spacing: 0.08em;
   padding: 12px 0 0px 0;  
  margin: 0px;               
  font-weight: 300;
  color: #fff; background:transparent;   }
  

  
  #top h2{ font-size: 1.1em;
  padding:0px 0px 0px 0px; 
  margin: 0px; letter-spacing: 1.2em;    
  font-weight: none; font-variant:small-caps;
  color:#fff; background:transparent; 
 
  }

.top {padding: 0 0 0 0px;}

#topmobile {display: none;}

@media only screen and (max-width: 640px)
{
	#top
{/* width: 100%; padding: 0px;
  height: 480px;  border-top: 0;
  background: #FEA218; text-align: center; */ display: none;}
	
	#top h1 {font-size: 4em; padding: 80px 0 0 0;}
	#top h2 {padding: 80px 0 0 0; letter-spacing: .4em; font-size: 1.2em;}
	
#topmobile {display: inline; width: 80%; height: auto; padding: 0 20% 0 0; text-align: center;}
#topmobile h1 {color: #fff; font-size: 4em; padding:0; margin:20px 0 0 0;}
#topmobile h2 {color: #fff; font-size: 1.3em; font-variant:small-caps; padding: 0 0 0px 0; letter-spacing: 0.15em; margin:0;}
		}


/* navigation menu */

#gall
{ width: 100%;   height: auto; 
    background: #FEA218; padding: 0 0%; padding: 23px 0 0 0;}
  
#gall p {padding: 0; margin: 0 auto; text-align:center; }
#gall img {padding: 0; margin: 0px auto; width: 100%; height: auto;}  




@media only screen and (max-width: 480px)
{	#gall{   height: 240px; border-bottom:0px; }
}

@media only screen and (min-width: 481px) {
#gall img {padding: 0; margin: 0px;  height: 100%; padding: 0 0% 0 0%;}  
}



@media only screen and (min-width: 1800px) {
	#gall {padding: 0 15%; width: 70%;}
#gall img {padding: 0; margin: 0px ; }  
}




#feed {height: 44px; width: 100%; background: #FF7200; padding: 6px 0 0 0; float:left;}

.example1 { height: 50px;  overflow: hidden; position: relative;}

.example1 p {color: #fff;}

/*
.example1 h3 {
 font-size: .8em;
 color: white;
 position: absolute;
 width: 100%;
 height: 100%;
 line-height: 50px;
 text-align: center;
 padding: 0; margin: 0;
 
 /* Starting position 
 -moz-transform:translateX(100%);
 -webkit-transform:translateX(100%);	
 transform:translateX(100%);
 
 /* Apply animation to this element 
 -moz-animation: example1 25s linear infinite;
 -webkit-animation: example1 25s linear infinite;
 animation: example1 25s linear infinite;
}

/* Move it (define the animation) 
@-moz-keyframes example1 {
 0%   { -moz-transform: translateX(100%); }
 100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes example1 {
 0%   { -webkit-transform: translateX(100%); }
 100% { -webkit-transform: translateX(-100%); }
}
@keyframes example1 {
 0%   { 
 -moz-transform: translateX(100%); /* Firefox bug fix 
 -webkit-transform: translateX(100%); /* Firefox bug fix 
 transform: translateX(100%); 		
 }
 100% { 
 -moz-transform: translateX(-100%); /* Firefox bug fix 
 -webkit-transform: translateX(-100%); /* Firefox bug fix 
 transform: translateX(-100%); 
 }
}

*/



/* code for gallery on pages  https://galleria.io/  - - - - - -!*/

.galleria{ width: 100%; height: 550px; background:#ccc; padding: 0 0 4px 0%; margin:0; float: left;}


@media only screen and (min-width: 1600px)
{ .galleria{ width: 100%; padding: 0 0% 0px 0%;}
	}


@media only screen and (max-width: 480px)
{ .galleria{ height: 300px;}
}

/* main content ----------------------------------------- */
#site_content
{ overflow: hidden;
  width: 100%;
  height: auto;
  background: #fffaf0;
  padding: 0;}

#site_content a
{ border-bottom: 1px dashed #a00;; 
}

#site_content a:hover
{ border-bottom: 0; color: #111;
}

/* sidebar */
#left
{
	float: left;
	width: 40%; /* 480/960*/
	height: auto;
	padding:0 5% 0 5%;
	background: transparent;
	margin: 0;
	color: #FFFAF0;
}



/* page content */
#right
{ text-align: left;
  float: left;
  width: 40%; /* 480/960*/
  height: auto; /* 480/960*/
 	padding:83px 5% 0 5%;
  margin: 0;
    background: transparent;
}


@media all and (max-width : 1024px) {
	
#left, #right {width: 100%; padding: 12px 0 0 0;}	
	
}



#content a.colour, #content a.colour:hover{border-bottom: 0px;}

/* footer */
#foot
{   height: 84px ; /* 52/936*/
  width: 100%; /* 936/960 */
  margin:0;
  text-align: center;
  background: #BC4F3E; /*#BEBF53;*/
  padding: 24px 0 0 0;
}



#foot a:link, #foot a:visited {	text-decoration: none;
	color: #fff; border: 0;
	padding: 3px;} 

#foot a:hover {	background: transparent;
	color: #ff0;
	padding: 3px; border-bottom: 0;}
	
#foot a:active {	text-decoration: none;
	background: transparent;
	color: #fff;
	padding: 3px;}
	
	#foot h2{ font-size: 1.2em; letter-spacing: .2em;
  padding: 8px 0px 0px 0px; margin: 0px; background: transparent;        
  font-weight: normal;  color:#fff; border: 0;}
  
#foot h3 { padding: 18px 23px 0 0; font-size:.8em;}

@media all and (max-width : 768px) {
#foot {height: 144px;}	
#foot h2 {color: #BC4F3E;}
}


.td { 
font-size: 1.1em; padding: 0; 
font-family: 'Peralta', cursive; 
letter-spacing: -.23em;  margin:0;
color:#fff;  text-shadow: 6px 9px 6px #8E8F3E;
box-shadow: 20px 20px 50px #4E4F05; }

#content a, #content a:hover, #footer a, #footer a:hover{text-decoration: none;}

	
	
	
	
/* navigation -------------------------------------------------------------------------------- */

nav {margin: 0; background-color: #FF7200; width: 80%; 
position: fixed; z-index: 23; height: 54px; padding: 0 ; margin: 0 8%; text-align: center;}



@media all and (min-width : 1201px) {
nav { width: 66%;  margin: 0 0 0 8%; padding: 0 0% 0 18%; }
}

@media all and (min-width : 2001px) {
nav { width: 56%;  padding: 0 0 0 28%; margin: 0 0 0 8%;}
}

@media all and (max-width : 1200px) {
nav { width: 68%;  padding: 0 0 0 16%;}
}



nav a { border: 0;}

/* code for menu---- http://www.cssscript.com/pure-css-mobile-compatible-responsive-dropdown-menu/ ------*/
.toggle, [id^=drop] { display: none;}


nav:hover {background:  #ff7200; }

nav:after {
  content: "";
  display: table;
  clear: both;
}

nav ul {padding: 0 0px;  margin: 0;  list-style: none;  position: relative;}

nav ul li {
  margin: 0px;
  display: inline-block;
  float: left;
  background-color: #ff7200; z-index: 20; /* here for 2nd part of menu */
  	list-style-type: none; padding: 0 23px 0 0px; 
}


nav a {
  display: block;
  padding:0;
  color: #fff !important;
    font-size: 14px;
  line-height: 53px;        /* here for height of menu items... line height */
  text-decoration: none;
}

nav ul li ul li:hover { background:  #ff7200; }

nav a:hover { color:  white !important; background: #BE513D;}

nav ul ul {
  display: none;
  position: absolute;
  top: 48px; padding: 0; margin: 0;
}

nav ul li:hover > ul { display: inherit; }

nav ul ul li {
  width: 180px;
  float: none;
  display: list-item;
  position: relative;
  padding: 0; margin: 0;
}



li > a:after { content: ' '; }

li > a:only-child:after { content: ''; }


/* Media Queries
--------------------------------------------- */

@media all and (max-width : 1024px) {


.toggle + a,
 .menu { display: none; }

.toggle {
  display: block; 
  background-color: #FEA218; /* colour of mobile device menu */
  padding: 8px 0px 8px 23px;
  color: white !important;
  font-size: 1.08em; font-weight: 100; letter-spacing: 0.2em;
  line-height: 40px;
  text-decoration: none;
  border-bottom: 1px dashed #e00; margin: 0;
}

.toggle:hover { background-color:  #ff7200; }

[id^=drop]:checked + ul { display: block; }

nav {width: 100%; margin: 0; padding: 0; }

nav ul li {
  display: block;
  width: 100%;  opacity:.9;
}

nav ul ul .toggle,
 nav ul ul a { padding: 0 40px; }

nav ul ul ul a { padding: 0 80px; }

nav a:hover,
 nav ul ul ul a { background-color: #f00; }

nav ul li ul li .toggle,
 nav ul ul a { background-color: #ff7200; }

nav ul ul {
  float: none;
  position: static;
  color: #ffffff;
}

nav ul ul li:hover > ul,
nav ul li:hover > ul { display: none; }

nav ul ul li {
  display: block;
  width: 100%;
}

nav ul ul ul li { position: static;

}
}

@media all and (max-width : 330px) {

nav ul li {  display: block;  width: 100%;}

}