/* The custom css for the DrJessie.life Site - !important calls to override css from the template css files.
---------------------------------------------------------------------------------------------------------------------------- */
/* *** this is for mobile or desktop - to show one or the other only *** */
#content-desktop {display: block;}
#content-mobile {display: none;}

@media screen and (max-width: 768px) {

#content-desktop {display: none;}
#content-mobile {display: block;} }

/* ***=======@@@@@@@~~~|||||||>>> CUSTOM MISC ELEMENTS <<<|||||||~~~@@@@@@@=======*** */

.hr {
width: 75%;
height: 20px;
background-color: red;
margin-right: auto;
margin-left: auto;
margin-top: 5px;
margin-bottom: 5px;
border-width: 2px;
border-color: green;
}

.move_up_00 { 
	margin-top: -15px !important; }
.move_up_01 { 
	margin-top: -25px !important; }
.move_up_02 { 
	margin-top: -35px !important; }
.move_up_03 { 
	margin-top: -45px !important; }
.move_up_04 { 
	margin-top: -55px !important; }
.move_up_05 { 
	margin-top: -65px !important; }
.move_up_06 { 
	margin-top: -75px !important; }
	
.move_down_00 { 
	margin-top: 15px !important; }
.move_down_01 { 
	margin-top: 25px !important; }
.move_down_02 { 
	margin-top: 35px !important; }
.move_down_03 { 
	margin-top: 45px !important; }
.move_down_04 { 
	margin-top: 55px !important; }
	
/* ***=======@@@@@@@~~~|||||||>>> Typography Elements <<<|||||||~~~@@@@@@@=======*** */

/* *** this makes an img float r and the text wrap *** */
div.img_margin_copy_float_r {
	margin: 10px 0px 10px 20px !important;
	float: right !important; }
	
div.img_margin_copy_float_l {
	margin: 10px 20px 10px 0px !important;
	float: left !important; }

.important, .important-blue, .important-red, .important-green, .important-orange, .important-brown, .important-grey, .important-black, .important-title-black_mp3 {	
	padding: 15px;
	margin: 15px 0; }
	
/* red line & title with white background */
span.important-title-red {
	position: absolute;
	display: block;
	margin-top: -24px;
	background: #fff;
	padding: 0 8px;
	font-weight: bold;
	font-size: 120%; }
.important-red {
	border: 1px solid #D12E2E; }
span.important-title-red {
	color: #D12E2E; }
	
/* black line & title with light cream fff9e6 background on title & body */
span.important-title-black {
	position: absolute;
	display: block;
	margin-top: -24px;
	background: #fff9e6;
	padding: 0 8px;
	font-weight: bold;
	font-size: 120%; }
	
.important-black {
	border: 1px solid #000000;
	background: #fff9e6; }
	
span.important-title-black {
	color: #000000; }

/* black line & title with light cream fffdf5 background on title & body for mp3 section */
span.important-title-black_mp3 {
	position: absolute;
	display: block;
	margin-top: -24px;
	background: #fffdf5;
	padding: 0 8px;
	font-weight: bold;
	font-size: 60%; }
	
.important-black_mp3 {
	border: 1px solid #000000;
	background: #fffdf5; }
	
span.important-title-black_mp3 {
	color: #000000; }

span.important-title, span.important-title-blue, span.important-title-green, span.important-title-orange, span.important-title-brown, span.important-title-grey {
	position: absolute;
	display: block;
	margin-top: -24px;
	background: #fff;
	padding: 0 8px;
	font-weight: bold;
	font-size: 120%; }
	
.important {border: 1px solid #333;}
.important-blue {border: 1px solid #0033ff;}
.important-green {border: 1px solid #74A824;}
.important-orange {border: 1px solid #CC8300;}
.important-brown {border: 1px solid #8B6846;}
.important-grey {border: 1px solid #666;}

span.important-title {color: #333;}
span.important-title-blue {color: #0033ff;}
span.important-title-green {color: #74A824;}
span.important-title-orange {color: #CC8300;}
span.important-title-brown {color: #8B6846;}
span.important-title-grey {color: #666;}

span.attention, span.notice, span.alert, span.download, span.approved, span.media, span.note, span.cart, span.camera, span.doc {
	display: block;
	padding: 8px 10px 8px 36px;
	margin: 15px 0; }
	
span.attention {
	color: #B79000;
	border: 1px solid #E7BD72;
	background: #FFF3A3 url(images/typo/attention.png) 10px 50% no-repeat; }
	
span.notice {
	color: #648434;
	border: 1px solid #9BCC54;
	background: #CDEFA6 url(images/typo/notice.png) 10px 50% no-repeat; }
	
span.alert {
	color: #CF3738;
	border: 1px solid #FFACAD;
	background: #FFD5D5 url(images/typo/alert.png) 10px 50% no-repeat; }
	
span.download {
	color: #1C6B8B;
	border: 1px solid #6ABCE2;
	background: #A8CDE3 url(images/typo/download.png) 10px 50% no-repeat; }
	
span.approved {
	color: #666;
	border: 1px solid #a8a8a8;
	background: #c2dbfe url(images/typo/approved.png) 10px 50% no-repeat; }
	
span.media {
	color: #C76E34;
	border: 1px solid #FFBB65;
	background: #FFE0B6 url(images/typo/media.png) 10px 50% no-repeat; }
	
span.note {
	color: #B79000;
	border: 1px solid #E7BD72;
	background: #FFF3A3 url(images/typo/note.png) 10px 50% no-repeat; }
	
span.cart {
	color: #666;
	border: 1px solid #C5C5C5;
	background: #E6E6E6 url(images/typo/cart.png) 10px 50% no-repeat; }
	
span.camera {
	color: #666;
	border: 1px solid #C5C5C5;
	background: #E6E6E6 url(images/typo/camera.png) 10px 50% no-repeat; }
	
span.doc {
	color: #C76E34;
	border: 1px solid #FFBB65;
	background: #FFE0B6 url(images/typo/doc.png) 10px 50% no-repeat; }
	
span.number, span.number-blue, span.number-red, span.number-green, span.number-purple, span.number-orange, span.number-brown, span.number-grey {display: block;font-size: 170%;float: left;margin: 2px 10px 0 15px; }

span.number {color: #333;}
span.number-blue {color: #0D507A;}
span.number-red {color: #D12E2E;}
span.number-green {color: #74A824;}
span.number-purple {color: #9E0E87;}
span.number-orange {color: #CC8300;}
span.number-brown {color: #8B6846;}
span.number-grey {color: #666;}

span.highlight {background: #FFFBD5;padding: 1px 2px;}
span.highlight-blue {color: #0D507A;}
span.highlight-red {color: #D12E2E;}
span.highlight-green {color: #74A824;}
span.highlight-purple {color: #9E0E87;}
span.highlight-orange {color: #CC8300;}
span.highlight-brown {color: #8B6846;}
span.highlight-grey {color: #666;}
span.highlight-bold {font-weight: bold;font-size: 120%;}

div.number-block1, div.number-block2, div.number-block3, div.number-block4, div.number-block5, div.number-block5, div.number-block6 {
	padding-left: 50px;
	width:80%;
	margin:0 auto; }
div.number-block1 {background: url(images/typo/number-1.png) 0 0 no-repeat;}
div.number-block2 {background: url(images/typo/number-2.png) 0 0 no-repeat;}
div.number-block3 {background: url(images/typo/number-3.png) 0 0 no-repeat;}
div.number-block4 {background: url(images/typo/number-4.png) 0 0 no-repeat;}
div.number-block5 {background: url(images/typo/number-5.png) 0 0 no-repeat;}
div.number-block6 {background: url(images/typo/number-6.png) 0 0 no-repeat;}

.who-we-are-single img { width:90%;
	margin:0 auto; }

.blockquote_sg {
	display: block;
	/* font-style: italic; */
	font-size: 120%;
	line-height: 150%;
	width: auto;
	padding: 10px 20px 10px 20px;
	margin: 15px 0;
	background: #fff5cc;
	border-top: 1px solid #000000;
	border-right: 1px solid #000000;
	border-left: 1px solid #000000;
	border-bottom: 1px solid #000000; 
	/* box-shadow: 5px 5px 1px 0px rgba(0,0,0,0.25); */
	-webkit-box-shadow: 5px 5px 2px 0px rgba(0,0,0,0.18); }
	
.blockquote {
	display: block;
	font-style: italic;
	font-size: 120%;
	line-height: 150%;
	width: auto;
	padding: 10px 20px 10px 20px;
	margin: 15px 0;
	background: #f6f6f6;
	border-top: 1px solid #e5e5e5;
	border-right: 1px solid #e5e5e5;
	border-left: 1px solid #e5e5e5;
	border-bottom: 1px solid #e5e5e5; }
	
.blockquote_blue, .blockquote_red, .blockquote_green, .blockquote_purple, .blockquote_orange, .blockquote_brown, .blockquote_grey {
	display: block;
	font-style: italic;
	font-size: 120%;
	line-height: 150%;
	width: auto;
	padding: 0px 20px;
	margin: 15px 0;
	border: 0;
	background: 0; }
	
.blockquote_blue{color: #0D507A;}
.blockquote_red{color: #D12E2E;}
.blockquote_green{color: #74A824;}
.blockquote_purple{color: #9E0E87;}
.blockquote_orange{color: #CC8300;}
.blockquote_brown{color: #8B6846;}
.blockquote_grey {color: #666;}

.blockquote_quotes {
	display: block;
	background: url(images/typo/quote-start.png) 0 5px no-repeat;
	padding: 0px 20px 0 38px;
	margin: 20px 0;
	font-size: 120%;
	line-height: 150%;
	width: auto;
	color: #666;
	border: 0; }
	
.blockquote_quotes p {
	padding: 0 38px 0 0;
	margin-top: 0;
	background: url(images/typo/quote-end.png) 100% 100% no-repeat; }