@charset "utf-8";
/* CSS Document */

/*  http://www.cleancss.com/css-minify/  */

/* Responsive, device independent blue version of COMPASS site  */
/* October 2016  */

/*https://codepen.io/emredenx/pen/ojcxl/  original code  */


/*  1  desktop  - fullsite */
/*  2  ipadish - desktop with burger  */
/*  3  large phone small phablet -  hamburger, ticker, one column */
/*  4  small  phone -  above minus the ticker */

/* modes 2 and 3 have burger menu code repeated, change in both places */

 

/*  COLOR PALETTE
gold text    										#D49F10
more tan color, old tan section color bg 			#F0E4AF
nav background, stonier tan  						#F3E7BD
another tan ....header link, little less gold		#D4AD63  
neutral gray that works  							#D2D2D2
a blue grayish lavendar  							#645D6F
even stonier										#F0E8C5
TRU GOLD from compass rose							#D5A00F
gentle box drop gold								#E2BD60

New Colors
blue gray, medium saturation, new footer			#647680
a tan from orig pallette, darker than tan section	#e5c78d
light white/beige for red header "white-ish" letters#F1EFDA
body lightness of gray								#efeee9												


*/ 

/* vertical compass photo  340px by 611px  */
/*  *{margin:0;padding:0;text-decoration:none}  */

body{
margin:0;
padding:0;
 width: 100%; 
font-size: 100%;
background-image: url(Images-Compass-Wealth/spanish-olive-left-map-strip-lite.png), url(Images-Compass-Wealth/spanish-olive-right-map-strip-lite.png);
background-position: left top, right top;
background-repeat:repeat-y, repeat-y;
background-color: #e7e4d3;  
/* min-width: 995px; as part of responsive testing removed this */
}



#formNL{
	margin: 0 auto 0;
}

.headlineNL {
  text-transform: uppercase;
  letter-spacing: 5px;
  font-family:"Times New Roman", Times, serif;
  color:#D49510;
}

.descriptionNL {
  font-size: .8em;
  letter-spacing: 1px;
  margin: -2px 0 15px;
  color: #FFF;
}


.inputNews {
  display: flex;
  align-items: center;
}


.buttonNL {
  height: 74px;
  border: none;
  font-size:16px;
  width:100%;
}



  
#emailNL {
  width: 70%;
  background: #FDFCFB;
  font-family: inherit;
  color: #737373;
  letter-spacing: 1px;
  text-indent: 5%;
  border-radius: 5px 0 0 5px;
}


#submitNL {
  width: 25%;
  height: 76px;
  background: #3399cc;
  font-family: inherit;
  font-weight: bold;
  color: #FFF;
  letter-spacing: 1px;
  border-radius: 0 5px 5px 0;
  cursor: pointer;
  transition: background .3s ease-in-out;
  -webkit-appearance : none;
  border-top: 2px #3399cc solid;
}


/*  for the header form  */
.buttonNLH {
  height: 30px;
  border: none;
}



  
#emailNLH {
  width: 65%;
  background: #FDFCFB;
  font-family: inherit;
  color: #737373;
  letter-spacing: 1px;
  text-indent: 5%;
  border-radius: 5px 0 0 5px;
}


#submitNLH {
  width: 25%;
  height: 33px;   /* was commented out before for synch */
  background: #3399cc;
  font-family: inherit;
  font-weight: bold;
  color: #FFF;
  letter-spacing: 1px;
  border-radius: 0 5px 5px 0;
  cursor: pointer;
  transition: background .3s ease-in-out;
}

#submitNLH:hover {
  background: #95d32a;
}
#submitNL:hover {
  background: #95d32a;
}
  

inputNL:focus {
  outline: none;
  outline: 2px solid #E86C8D;
  box-shadow: 0 0 2px #E86C8D;
}

inputNLH:focus {
  outline: none;
  outline: 2px solid #E86C8D;
  box-shadow: 0 0 2px #E86C8D;
  
}


.controlSVG {
	max-width: 500px;
    min-width: 300px;
}

#verifyDiv {
	/* Here */
	position: absolute;
	top: 10em;
	left: 30em;
	z-index:99999999;
	display:none;
	width: 20em;
	height: 8em;
	border-radius: 10px;
	padding: 50px;
	background-color:rgba(0, 0, 0, 0.8);
	border: 3px solid gold;
	
}

.btnCircle{}

.blue-circle-button {
	box-shadow: 2px 4px 0 2px rgba(0,0,0,0.1);
	border: .2em solid #D5A00F;
	font-size: .8em;
	font-family:"Times New Roman", Times, serif;
	line-height: 1.0em;
	color: #ffffff;
	background-color: #3e5871;
	margin: auto;
	border-radius: 50%;
	height: 7em;
	width: 7em;
	position: absolute;
	top: 325px;
	left:75%;
	background-image: url(Images-Compass-Wealth/why-select.png);
	background-position:center;
	background-size:contain;
}
.blue-circle-button:hover {
	box-shadow: 4px 6px 2 4px rgba(0,0,0,0.1);
	color:#ffffff;
    background-color: #3e5871;
	text-decoration: none;
	border: .3em solid #D5A00F;
	
}
.blue-circle-button:visited {
	color:#ffffff;
    background-color: #3e5871;
	text-decoration: none;
	
}

.blue-circle-link-greater-than {
    font-size: 1em;
}

.btn {
  background: #3E5871;
  background-image: -webkit-linear-gradient(top, #3E5871, #3E5871);
  background-image: -moz-linear-gradient(top, #3E5871, #3E5871);
  background-image: -ms-linear-gradient(top, #3E5871, #3E5871);
  background-image: -o-linear-gradient(top, #3E5871, #3E5871);
  background-image: linear-gradient(to bottom, #3E5871, #3E5871);
  -webkit-border-radius: 6;
  -moz-border-radius: 6;
  border-radius: 6px;
  font-family:"Times New Roman", Times, serif;
  color: #ffffff;
  font-size: 14px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
  
}

.btn:hover {
  background: #3E5871;
  background-image: -webkit-linear-gradient(top, #3E5871, #4c91bf);
  background-image: -moz-linear-gradient(top, #3E5871, #4c91bf);
  background-image: -ms-linear-gradient(top, #3E5871, #4c91bf);
  background-image: -o-linear-gradient(top, #3E5871, #4c91bf);
  background-image: linear-gradient(to bottom, #3E5871, #4c91bf);
  text-decoration: none;
}


/* 
#header{
width: 100%;
margin: 0 auto;
background-image:url(Images-Compass-Wealth/Final-logo-Compass-investment-advisor-logo.png);
background-repeat:no-repeat;
background-position: 12% 30%;
height: 9em;
background-color:#3e5871;
padding-top: 15px;
}  */

/*
#shortHeader{
width: 85%;
margin: 0 auto;
background-image:url(Images-Compass-Wealth/Final-logo-Compass-investment-advisor-logo.png);
background-repeat:no-repeat;
background-position: 12% 30%;
height: 9em;
background-color:#3e5871;  
padding-top: 15px;
border-left: 2px solid #3e5871;
border-right: 2px solid #3e5871;
}  

#shortModHeader{
width: 85%;
margin: 0 auto;
background-image:url(Images-Compass-Wealth/Depth-Final-logo.png);
background-repeat:no-repeat;
background-position: 12% 30%;
min-height: 10em;
height: auto;
overflow: auto;
background-color:#3e5871; 
padding-top: 20px;
border-left: 2px solid#3e5871;
border-right: 2px solid #3e5871;


}  */

#responsiveHeader {
	width: 85%;
margin: 0 auto;
/* remove as new header has image to support height min-height: 10em;*/
height: auto;
overflow: auto;
background-color:#3e5871; 
padding-top: 20px;
border-left: 2px solid#3e5871;
border-right: 2px solid #3e5871;
}

#logo-container-small-dev img {
	display:none;
}

#logo-container img {
   width: 60%;
   height: auto;
   float:left;
   display:block;
   margin: 0 10px 0 20px;
}



#changingText {
float: left;
width: 380px;
height:60px;
margin-left:22%;
margin-top: 2.6em;
/*  matching downbeat beige  color:#c6c4af;   */
/* slightly lighter but not white #DDD */
color: #DDD;
font-size: 18px;
text-align:center;
font-family:"Times New Roman", Times, serif;
line-height: 18px;
text-shadow: 1px 1px 1px #000000; 
letter-spacing: .1em;

}

#changingTextR {
    /* float: left; */
	position:relative;
	top: -100px;
	left: 20%;
    width: 380px;
    height: 60px;
    color: #DDD;
    font-size: 18px;
    text-align: center;
    font-family: "Times New Roman", Times, serif;
    line-height: 18px;
    text-shadow: 1px 1px 1px #000000;
    letter-spacing: .1em;
}
	




#companyTitle {
height:auto;
width: auto;
font-family: "Times New Roman", Times, serif;
font-size: 2em;
color: #D5A00F;     
margin-left: 18%;
margin-bottom:0px;
border:0px;
text-shadow: 1px 1px 1px #000000; 
}

.phoneHeader{
	color:  #D5A00F;    /* subtle less gold #D4AD63;  */
	font-family: "Times New Roman", Times, serif;
	font-size: 1.5em;
	/*text-shadow: 1px 1px 1px #333;*/
	padding:0px;
	}





#LouTitle{
height: auto;
width: auto;
color:  #D5A00F;    /* subtle less gold #D4AD63;  */
font-family: "Times New Roman", Times, serif;
font-size: 1.0em;
line-height: 1.3em;
margin-left: 65%;
margin-bottom: 0px;
padding:0px;
margin-top: 3em;
font-weight: normal;
}

#socialMediaDiv{
height:90px;
width: auto;
color:  #D5A00F;    /* subtle less gold #D4AD63;  */
font-family: "Times New Roman", Times, serif;
font-size: 1.2em;
text-shadow: 1px 1px 1px #333;
float:right;
padding:0px;
font-weight:bold;
text-align:left;
/*  background-color: #751413;  */
margin-right:2%;

clear:right;
}

.raiseMeUp{
position:relative;
top: -1.0em;
}

.SocialHello{
font-size:18px;
text-align:left;
color:#FFFFFF;
}

#contactMobile{
	display:none;
}



.MorningstarQuote{
font-size:14px;
line-height: 14px;
font-style:italic;
color:#FFF;
}

#navBlock{      /* this is for the 100% across header   */
width:100%;
height: 1.8em;
margin: 0 auto;
padding: 10px 0 0 0;
border-bottom: 1px solid gray;   /*  the reddish sandstone from before  #BF5C3F;  */
border-top:0px;
background-color:#e7e4d3;
border-left: 2px solid #3e5871;
border-right: 2px solid #3e5871;
}


#navBlockShort{    /* This is for the less than 100% length header  */
width:85%;
height: auto;
overflow:auto;
margin: 0 auto;
padding: 10px 0 0 0;
border-bottom: 1px solid gray;   /*  the reddish sandstone from before  #BF5C3F;  */
border-left: 2px solid #3e5871;
border-right: 2px solid #3e5871;
border-top:0px;
/*  background-color:#F0E8C5;  */
background-color: #e7e4d3;
clear: right;  /*  to add space after newsletter signup creeping downward  */
}


ul#nav{
list-style:none;
background-color: #f3e7bd;
margin:0 0 0 3%;   /* was 5%, need smaller for IE11  */
padding-left:0%;  /*  half of the leftover from the 100%-maincontetn%  for the full width use 7% */
}

ul#nav  li {
display:inline;
font-family: "Times New Roman", Times, serif;
font-size:1.3em;   /*  client login needed more space was 1.3em  */
font-variant:small-caps;
/* this is change for getting equal spacing menu items */
float:left;
padding-right: 3.5%;    /* must not have lenght defined elsewhere, such as in "a" */
/*  padding-right was 5% but after adding the client login need more space   */

}

ul#nav  li a {
text-decoration:none;
padding:0;
/*   if width then no padding vice versa  width:190px;*/
 
color:#4D4D4D;
text-align: center;   /* was center */
/* border-left:1px solid #fff;  IF want line between Selections put this back in  */

/* below taken out to equally space menu components */
/* float:left;  
width: 120px;  */

/* transition */
-webkit-transition: color  .3s ease;
  -moz-transition: color  .3s ease;
  -ms-transition: color  .3s ease;
  -o-transition: color  .3s ease;
  transition: color  .3s ease;
}


/* Duplicate NAV for home page due to big margin shift into the center  */
#NavCenterMe{
margin-left:5%;
}



ul#navHome{    /* This was how to center the Home NAV itels because I knew the width  */
list-style:none;
background-color: #f3e7bd;
width: 910px;  
height: auto;
margin:0 auto;
padding-left:0%;  /*  half of the leftover from the 100%-maincontetn%  */
}

ul#navHome  li {
display:inline;
font-family: "Times New Roman", Times, serif;
font-size:1.0em;
font-variant:small-caps;
}

ul#navHome  li a {
text-decoration:none;
padding:0;
width: 130px;
/*   if width then no padding vice versa  width:190px;*/
float:left;   
color:#4D4D4D;
text-align: center;   /* was center */
/* border-left:1px solid #fff;  IF want line between Selections put this back in  */
}

/* End of duplicate NAV for home page  */

.currentPage{
color: #D49F10;
text-decoration:underline;
}

.currentParentPage{
color: #D49F10;
}


ul#nav li a:hover{
color: #D4AD63;     
/*  text-decoration:underline;  */
}

img{
border: none;
}

blockquote{
color: #666666;
line-height: 1.3em;
font-size: 1.2em;
font-style: italic;
}

.noIndent{
margin:0;
padding:0;
}

.extraTab{
margin-left: 100px;
}

#mainContent{
width:85%;
height: auto; 
margin: 0px auto;
background-image:url(Images-Compass-Wealth/sidebar-filler-blue.png);
background-position:left;
background-repeat:repeat-y;
background-color: #FFF;


border-left: 2px solid #3e5871;
border-right: 2px solid #3e5871;
overflow: hidden;
/* box-shadow: 6px 0px 10px -7px #888, -6px 0px 10px -7px #888;  */
/* box-shadow: 3px 0px 3px #BBB;
-moz-box-shadow: 3px 0px 3px #BBB;
-webkit-box-shadow: 3px 0px 3px #BBB;  */
}


/* removing width and float made this balance out perfectly  */
/* width of sidebar plus the padding required for main text */


/*    FLEX css   */
#mainFlex {
width:85%;
height: auto; 
margin: 0px auto;
border-left: 2px solid #3e5871;
border-right: 2px solid #3e5871;
background-color:white;
overflow: hidden;
background-image: url(Images-Compass-Wealth/sidebar-filler-blue.png);
    background-position: top right;
    background-repeat: repeat-y;
}

#mainTextFlex {
width: 59%;
float:left;
height:100%;
padding: 20px 0 0 40px;
}


#mainLeft {
	width: 40%;
	float:left;
	
}

#mainRight {
	width : 40%;
	float: left;
	
}

.niceList { 
	line-height: 2em;
	list-style: none;
	
	
	
}

#sideFlex {
float: right;
width: 340px;
}
 
#sideBarRight {
width: 340px;                  
height: 100%;
float: right;
background-image:url(Images-Compass-Wealth/vertical-compass-photo-rhs.jpg);
background-repeat:no-repeat;
background-color: #e7e4d3;  /* try not to use padding in sidebar as will be added to lenght in ns browsers    */
padding-top: 20px;
padding-bottom: 30px;
text-align:center;
}


/*  end of Flex css for main contents and sidebars  */

#mainText{                     
background-color: #ffffff;
/* border-left: 1px solid #D8AB55;  */
margin-left: 360px; 
 /* this moves mainText to right of the sdiebar that is 340 pixels wide  360/20/20 worked before  */
padding-right: 20px;
padding-top: 20px;
height: 100%;
}



 /* for total liquid  31%; and 65% for main content max-width:340px; */
 
 
 
#sideBarLeft{           /* Has COMPASS Background Photo */
width: 340px;                  
height: 100%;
float: left;
background-image:url(Images-Compass-Wealth/vertical-compass-photo.jpg);
background-repeat:no-repeat;
background-color: #e7e4d3;  /* try not to use padding in sidebar as will be added to lenght in ns browsers  */
padding-top: 20px;
}



/* mucho sidebar options, basically the div sets the font size and other divs inherit so as to avoid multiplying */
/* This sidebars job is to provide the background image down the column text */
#sidebarList{     /* Small Cap lists to go below pages with (companies) with short secondary nav  */
width: 340px;
height: 100%;
/* background-color:#F0E8C5; */
background-color:#e7e4d3;
color: #3E354A;
font-size: 1.2em;
font-family: "Times New Roman", Times, serif;
text-align: center;
font-variant: small-caps;
margin-top:535px;
margin-left:0;
margin-right:0;
margin-bottom:0;
line-height: 1.6em;
background-image:url(Images-Compass-Wealth/opacity-compass-rose.png);
background-position:center top;
		background-repeat: repeat-y;
		
}

#sidebarListRaise{  /*  Small Cap List goes raised up due to offset caused by a longer breadcrumb nav, (individuals uses this)  */
width: 340px;
height: auto;
/* background-color:#F0E8C5;  */
background-color: #e7e4d3;
color: #3E354A;
font-size: 1.2em;
font-family: "Times New Roman", Times, serif;
text-align: center;
font-variant: small-caps;
margin-top:650px;
margin-left:0;
margin-right:0;
margin-bottom:0;
line-height: 1.6em;
background-image:url(Images-Compass-Wealth/opacity-compass-rose.png);
background-position:center top;
		background-repeat: repeat-y;
}

#sidebarLeftPlain{    /*    FOR PLAIN SIDEBARS , NO PHOTO OF COMPASS, maybe an inserted image, centered text  */
width: 340px;
height: auto;
float: left;
background-color:#e7e4d3;
margin-top: 20px;
/* line-height: 1.6em; */f0e8c5
color:#3E354A;
/*  font-variant:small-caps; */
/* font-size: 1.1em; */
text-align:left;
background-image:url(Images-Compass-Wealth/opacity-compass-rose.png);
background-position:center top;
		background-repeat: repeat-y;
}


#sidebarSpacer {
	height:55em;
	content:"";
	width: auto;
}


#sidebarRightPlain{    /*    FOR PLAIN SIDEBARS , NO PHOTO OF COMPASS, maybe an inserted image, centered text  */
background-image:url(Images-Compass-Wealth/opacity-compass-rose.png);
background-position:center top;
background-repeat: repeat-y;
width: 340px;
height: auto;
float: right;
background-color:#e7e4d3;
margin-top: 20px;
color:#3E354A;
/*  font-variant:small-caps; */
/* font-size: 1.1em; */
text-align:center;

		
}


#sideBarLeftNoPic{  /*   for pages with no COMPASS photo but still have secondary nav    ABOUT/TEAM  PAGE  */
width:  340px;                   /* for total liquid  31%; and 65% for main content max-width:340px; */
height: 100%;
float: left;
background-color: #e7e4d3;  /* try not to use padding in sidebar as will be added to lenght in ns browsers  */
padding-top: 20px;
background-image:url(Images-Compass-Wealth/opacity-compass-rose.png);
background-position:center top;
background-repeat:repeat-y;
text-align:center;  
}

#sideBarRightNoPic{  /*   for pages with no COMPASS photo but still have secondary nav    ABOUT/TEAM  PAGE  */
width:  340px;                   /* for total liquid  31%; and 65% for main content max-width:340px; */
height: 10em;
background-color: #e7e4d3;  /* try not to use padding in sidebar as will be added to lenght in ns browsers  */
padding-top: 20px;
text-align:center;  
margin: 0 auto 0;
}





p.sidebarListCap {
color:#3E354A;
font-size: 1.5em;
font-family: "Times New Roman", Times, serif;
text-align: center;
font-variant: small-caps;
line-height: 1.0em;
padding:0;
margin:0;
}

p.sidebarListNormal{
color:#3E354A;
font-size: 1.2em;
font-family: "Times New Roman", Times, serif;
text-align: center;
font-variant: normal;
line-height: 1.2em;
padding:0;
margin:0;
padding:10px;
}


p.sidebarListNormalInset{
color:#3E354A;
font-size: 1.2em;
font-family: "Times New Roman", Times, serif;
text-align: center;
font-variant: normal;
line-height: 1.2em;
padding:0;
margin:0;
padding:0 30px 0;
}




#breadcrumbDiv {
	/* hide due ot new nav drop down */
	/*  visibility:hidden;    */
-moz-border-radius: 15px;
border-radius: 15px;  
width: 230px;
height: auto;
/*  background-color:  #F0E8C5;  */
background-color: #e7e4d3;
font-family:"Times New Roman", Times, serif;
line-height: 1.9em;
margin-left: 40px;
margin-top: 20px;
margin-bottom: -200px;
padding-top: 8px;
padding-left: 20px;
padding-bottom: 10px;
border: 1px solid white;
opacity:.8;
filter:alpha(opacity=90);  
font-variant:small-caps;
font-weight:normal;
text-align:left;
box-shadow: 3px 3px 3px #E2BD60;
-moz-box-shadow: 2px 2px 3px #E2BD60;
-webkit-box-shadow: 2px 2px 3px #E2BD60;


}

#breadcrumbDivOn {
	/* hide due ot new nav drop down */
-moz-border-radius: 15px;
border-radius: 15px;  
width: 189px;
height: auto;
/*  background-color:  #F0E8C5;  */
background-color: #e7e4d3;
font-family:"Times New Roman", Times, serif;
line-height: 1.9em;
margin-left: 50px;
margin-top: 20px;
padding-top: 8px;
padding-left: 20px;
padding-bottom: 10px;
border: 1px solid white;
opacity:.8;
filter:alpha(opacity=90);  
font-variant:small-caps;
font-weight:normal;
box-shadow: 3px 3px 3px #E2BD60;
-moz-box-shadow: 2px 2px 3px #E2BD60;
-webkit-box-shadow: 2px 2px 3px #E2BD60;

}


#breadcrumbDiv ul {
list-style: none;
margin:0px;     /* inset these guys from header of the nav   */
padding:0px;
padding-left:10px;
opacity:1.0;
filter:alpha(opacity=100);
}



.light{
font-size: 90%;
font-style:italic;
padding:0;
margin:0;
}

p, h1 {
line-height: 1.4em;
}

p{
font-family:"Times New Roman", Times, serif;
font-size: 1.2em;
color: #666666;  /* was 444444 */
}

h1{
font-family:"Times New Roman", Times, serif;
color: #D49F10;
font-size: 1.4em;
text-align:center; 
font-weight:normal;
letter-spacing: 1.0px;
/*  text-shadow: 1px 1px 1px #BBBBBB; */
margin-top: 0px;
/* display:inline-block;   only for IE to get "layout" so shadow will work 
filter: Shadow(Color=#BBBBBB, 	
			Direction=135, 
			Strength=8);  */
			
}


h2{
font-family: Georgia, "Times New Roman", Times, serif;
color: #D49F10;
font-size: 1.2em;
font-weight:lighter;
}


h3{
font-family: "Times New Roman", Times, serif;
color: #D49F10;
font-size: 1.2em;
font-weight: lighter;
text-decoration:none;
}

h4{
font-family: Georgia, "Times New Roman", Times, serif;
color: #D49F10;
font-size: 1.6em;
text-align: left;
margin:0;
text-shadow: 2px 2px 2px #BBBBBB; 
}

a.footerlink:link {color: #999999;  font-weight: normal; text-decoration:underline; font-size:1.0em; display:inline;}
a.footerlink:active {color: #999999;  font-weight: normal; text-decoration:underline; font-size:1.0em; display:inline;}
a.footerlink:visited {color: #999999; font-weight: normal;text-decoration:underline; font-size:1.0em; display:inline; }
a.footerlink:hover {color:#FFFFFF;  font-weight: normal; text-decoration:underline; font-size:1.0em; display:inline;
-webkit-transition: color  .4s ease;
  -moz-transition: color  .4s ease;
  -ms-transition: color  .4s ease;
  -o-transition: color  .4s ease;
  transition: color  .4s ease;}



a.footerlinkSmall:link {color: #999999;  font-weight: normal; text-decoration:underline; font-size:.8em; display:inline;}
a.footerlinkSmall:active {color: #999999;  font-weight: normal; text-decoration:underline; font-size:.8em; display:inline;}
a.footerlinkSmall:visited {color: #999999; font-weight: normal;text-decoration:underline; font-size:.8em; display:inline; }
a.footerlinkSmall:hover {color:#FFFFFF;  font-weight: normal; text-decoration:underline; font-size:.8em; display:inline;}



a.mainWhite:link {color: #D5A00F;  font-weight: normal; text-decoration:underline; font-size: inherit;}
a.mainWhite:active {color: #D5A00F;  font-weight: normal; text-decoration:underline; font-size:inherit}
a.mainWhite:visited {color: #D5A00F; font-weight: normal;text-decoration:underline; font-size:inherit }
a.mainWhite:hover {color:#3e5871 ;  font-weight: normal; text-decoration:underline; font-size:inherit;
-webkit-transition: color  .3s ease;
  -moz-transition: color  .3s ease;
  -ms-transition: color  .3s ease;
  -o-transition: color  .3s ease;
  transition: color  .3s ease;



}



a.breadcrumbLink:link {color: #000000;  font-weight: normal; text-decoration:none; font-size:1.3em;}
a.breadcrumbLink:active {color: #000000;  font-weight: normal; text-decoration:underline;font-size:1.3em; }
a.breadcrumbLink:visited {color: #000000; font-weight:normal;text-decoration:none;font-size:1.3em;}
a.breadcrumbLink:hover {color:#D4AD63;  font-weight:normal; text-decoration:none; font-size:1.3em;
-webkit-transition: color  .2s ease;
  -moz-transition: color  .2s ease;
  -ms-transition: color  .2s ease;
  -o-transition: color  .2s ease;
  transition: color  .2s ease;


}


/*  These are for the links in header, company contact emmail etc  */ 
a.headerLink:link {color: #D4AD63;  font-weight: normal; text-decoration:none; font-size:1em;}
a.headerLink:active {color: #D4AD63;  font-weight: normal; text-decoration:underline; font-size:1em}
a.headerLink:visited {color: #D4AD63; font-weight: normal;text-decoration:none; font-size:1em }
a.headerLink:hover {color:#D4AD63;  font-weight: normal; text-decoration:underline; font-size:1em}

a.pdfLink:link {color: #000000;  font-variant:normal; font-weight: normal; text-decoration:none; font-size:.9em }
a.pdfLink:active {color: #000000;  font-variant:normal ;font-weight: normal; text-decoration:underline; font-size:.9em}
a.pdfLink:visited {color: #000000; font-variant:normal; font-weight:normal;text-decoration:none; font-size:.9em}
a.pdfLink:hover {color:#D4AD63;  font-variant:normal; font-weight:normal; text-decoration:underline; font-size:.9em}


a.siteWhite:link {color: #666666;  font-weight: normal; text-decoration:none; font-size: inherit;}
a.siteWhite:active {color: #666666;  font-weight: normal; text-decoration:none; font-size:inherit}
a.siteWhite:visited {color: #666666; font-weight: normal;text-decoration:none; font-size:inherit }
a.siteWhite:hover {color:#D4AD63;  font-weight:normal; text-decoration:underline; font-size:inherit}

a.bioLink:link {color: #3E354A;  font-weight: normal; text-decoration:none; }
a.bioLink:active {color: #3E354A;  font-weight: normal; text-decoration:underline; }
a.bioLink:visited {color: #3E354A; font-weight:normal;text-decoration:none;}
a.bioLink:hover {color:#D4AD63;  font-weight:normal; text-decoration:underline;}

a.prefooterLink:link {color: #555;  font-weight: normal; text-decoration:none; }
a.prefooterLink:active {color: #555;  font-weight: normal; text-decoration:underline; }
a.prefooterLink:visited {color: #555; font-weight:normal;text-decoration:none;}
a.prefooterLink:hover {color:#000000;  font-weight:normal; text-decoration:underline;}


#preFooter{
clear:both;
}


.clearBothPls {
	clear:both;

}

#responsiveSignUp {
	display:none;
	}

#responsiveFooter{
	margin: 0 auto; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
	background-color: #3e5871;  	
    clear: both;
	width: 85%;
	overflow: auto;
    height: auto;
    text-align: center;
	color: #999;
	font-size: 1em;
	padding-top: 1em;
	border-right: 2px solid #3e5871;
	border-left: 2px solid #3e5871; 
}
	

#footer {
    margin: 0 auto; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
background-color:#3e5871; 
  /* #F0E8C5;  */ /* this was a blur gray from photo  #647680;	 this is ?#4D4D4D; */
	
    clear: both;
	width: 85%;
    height: 9em;
    text-align: center;
	color: #666666;
	font-size: 1em;
	padding-top: 1em;
	border-right: 2px solid #3e5871;
	border-left: 2px solid #3e5871; 
	/* box-shadow: 3px 0px 3px #BBB;
-moz-box-shadow: 3px 0px 3px #BBB;
-webkit-box-shadow: 3px 0px 3px #BBB; */
	
	}
	
#DeeperFooter{
 margin: 0 auto; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
	background-color: #3e5871;  	
    clear: both;
	width: 85%;
    height: 11em;
    text-align: center;
	color: #999;
	font-size: 1em;
	padding-top: 1em;
	border-right: 2px solid #3e5871;
	border-left: 2px solid #3e5871; 
	
	}
	
	
	
#footerHome {
    margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
	background-color: #3e5871; 	
    clear: both;
	width: 100%;
    height: 11em;
    text-align: center;
	color: #999;
	font-size: 1em;
	padding-top: 1em;
	border-top: 2px solid #3e5871;
	}	
		
	
#footer-inner {
	position:relative;
	top: 6em;
	left: 9em;
	width: 10em;
	height: auto;
	text-align: left;
	color: #FFFFFF;
	background-color:#3e5871; 

	}
	
#footercenter{
	float:right;
	margin-right: 13%;
	width: 70%;
	height: auto;
	display: inline;
	background-color:#3e5871; 

	}
	




#footer a:hover {
    text-decoration: underline;
	
}



.cleanImage{
border:0;
padding:0;
margin:0;
}


   


.footerFla{
font-family:"Times New Roman", Times, serif;
font-size: 1em;
color: #B3B3B3;
padding-left: 150px;
padding-right: 150px;
line-height: 1em;
}

.floatRight{
float: right;
}

.floatLeft{
float: left;
}

.floatLeftPad{
float: left;
padding:15px;
}

.floatRightPad{
float: right;
padding-left: 15px;
padding-right: 15px;
}


.newsletterImages{
border: 1px solid #DDD;
float: left;
padding: 2px;
display:inline;
margin-left: 15px;
margin-right: 15px;
margin-top: 20px;
box-shadow: 3px 3px 3px #DDD;
-moz-box-shadow: 2px 2px 3px #DDD;
-webkit-box-shadow: 2px 2px 3px #DDD;
}


.smaller{
font-size: 90%;
}


/* notes that apply to all these boxes -
box-shadow not show on ipad, moz does */




#boxOne{
float: left; 
margin-left: 3%;
width: 30%;
height: 560px;
/*  background-color:  #F3E7BD;  */
background-color: #e7e4d3;
background-image:url(Images-Compass-Wealth/opacity-compass-rose.png);
background-repeat:no-repeat;
background-position: bottom center; 
padding:5px;
border-radius: 5px;

}


#boxTwo{
float: left; 
margin: 0 1% 0;
width: 30%;
background-color: #e7e4d3;
background-image:url(Images-Compass-Wealth/opacity-compass-rose.png);
background-repeat:no-repeat;
background-position:bottom center;
/*border: 1px solid #3e5871;*/
height: 560px;
padding:5px;
border-radius: 5px;
}




#boxThree{
float: left; 
margin: 0 0 7em;
width: 30%;
height: 560px;
background-color: #e7e4d3;
background-image:url(Images-Compass-Wealth/opacity-compass-rose.png);
background-repeat:no-repeat;
background-position:bottom center;
padding:5px;
/* height: 520px;   Lou surface pro 2 text overflow */
display:block;
border-radius: 5px;
}


#boxOneB{
float: left; 
margin-top: 1%;
width: 33%;
height: auto;
 display: inline;  /* IE double float margin bug  */
/* border-top: 1px solid #3e5871; */
}


#boxTwoB {
float: left; 
margin-top: 1%;
width: 33%;
height: auto;
display: inline;
/*border-top: 1px solid #3e5871;
*/
/* background-image:url(images/thin-gray-line.png);
background-repeat:no-repeat;  */
}


#boxThreeB{
 float: left; 
margin-top: 1%;
width: 30%;
height: auto;
display: inline;

/*border-top: 1px solid #3e5871;
*/background-color: none;
/* background-image:url(images/thin-gray-line.png);
background-repeat:no-repeat;   */
}


#welcomeMain{
background-color: #FFFFFF; /* #F3E7BD;  */
width: 100%;
height: auto;
padding-top: 20px;
margin: 0px auto;
border: 1px solid #F1F1F1;

}

.welcomeRectText{
color: #808080;
font-family:"Times New Roman", Times, serif;
font-size: 1.3em;
line-height: 1.4em;
padding: 0 15px 0;
text-align:center;
}

#topBox{
background-color:#FFFFFF;
width: 45%;
height: auto;
margin: 0 auto;
text-align:center;
/* border-top: 1px solid gray;
border-bottom: 1px solid gray; */

}

#bottomBox{
width: 85%;
height: auto;
/* float:left; */
background-color: #E7E4D3;
margin: 0px auto 0px auto;
clear: both;
padding-top: 20px;
border-left: 2px solid #3e5871;
    border-right: 2px solid #3e5871;
	overflow:auto;
}



.boxText{
font-family:"Times New Roman", Times, serif;
color:#555555;
/* font-size: .9em; */
padding: 0 20px;
/* line-height: 1.2em; */
margin-bottom:5px;
}

.underLineMe {
	text-decoration: underline;
}

.create:before {
content: url(Images-Compass-Wealth/diamond-bullet.png);
position: relative;
top:25px;
right:13px;
display:block;
}


h5{
font-family:"Times New Roman", Times, serif;
color:#555555;
font-size: .9em;
padding: 0 20px;
line-height: 1.2em;
}


.skinnyLine{
padding:0;
margin:0 0;
color: gray;
width: 80%;
background-color: gray;
height: .1em;
line-height: .5em;
}

.copyright{
color:#999999;
font-size: .5em;
}

.formSmall{
font-size: .8;
color:#CCCCCC;
}

.formDark{
font-size: 1.2em;
font-weight:bold;
}

#contactForm{
margin: 20px 20px;
background-color:#F7F2DC;
padding:40px;
border: 1px solid #F1F1F1;
}

.center{
text-align:center;
}

.formTabbed{
margin-left:130px;
}


#quoteBox{
width: 65%;
height: auto;
background-color: #a5a38a;
border: 1px solid #c6c4af;
-moz-border-radius: 15px;
border-radius: 15px;
box-shadow: 3px 3px 3px #E2BD60;
-moz-box-shadow: 2px 2px 3px #E2BD60;
-webkit-box-shadow: 2px 2px 3px #E2BD60;
font-family:"Times New Roman", Times, serif;
text-align: center;
font-size: 1.1em;
line-height: 1.3em;
margin: 10px auto 0px;
color: #95A0A6;
padding: 2em .5em;
text-shadow: 2px 2px 2px #555;
font-weight: bold;
overflow: auto;
}

.quoteMark{
font-size: 2.2em;
font-family:Arial, Helvetica, sans-serif;
}

.floatmeinthemiddle{
float: left;
display:inline;
margin-left: 20%;
}

.upphoto{
margin-top: 0px;
margin-left: 130px;
padding: 5px;
float:left;
}

.newbackground{
background-color: #000000;
}

.headlines{
font-size: 1em;
font-weight: bold;
font-family: "Times New Roman", Times, serif;
text-transform:uppercase;
}

.boxOneTitle{
background-image:url(Images-Compass-Wealth/underline-arrow.png);
background-position:center;
background-repeat:no-repeat; 
text-align:center;
font-family:"Times  New Roman", Times, serif;
font-size:1.6em;
color: #D49510;
margin: 0px 0px 12px;
padding-bottom: 5px;
padding-left: 0;
font-weight:lighter;
background-color: #FFFFFF;
line-height: 3em;

}

.boxTwoTitle{
background-image:url(Images-Compass-Wealth/underline-arrow.png);
background-position:center;
background-repeat:no-repeat; 
text-align:center;
font-family:"Times  New Roman", Times, serif;
font-size:1.6em;
color: #D49510;
margin:0 0 12px;
padding-bottom: 5px;
padding-left: 0;
font-weight:lighter;
background-color: #FFFFFF;
line-height: 3em;
}

.boxThreeTitle{
background-image:url(Images-Compass-Wealth/underline-arrow.png);
background-position:center;
background-repeat:no-repeat; 
text-align:center;
font-family:"Times  New Roman", Times, serif;
font-size:1.6em;
color: #D49510;
margin:0 0 12px;
padding-bottom: 5px;
padding-left: 0;
font-weight:lighter;
background-color: #FFFFFF;
line-height: 3em;
}

.divLink{
text-decoration:none;
}

.colorChangeText{
color: #3e5871;
}

/* http://css-tricks.com/snippets/css/css-box-shadow/  */

.innerShadow{
-moz-box-shadow:inset 0 0 10px #000000;
   -webkit-box-shadow:inset 0 0 10px #000000;
   box-shadow:inset 0 0 10px #000000;
}



/* #newsletterBox{
margin-top: 20px;
} */

#newsletterBox{
-moz-border-radius: 15px;
border-radius: 15px;  
width: 65%;
height: auto;
background: #D4AD63; 
margin: 0 auto;
box-shadow: 3px 3px 3px #E2BD60;
-moz-box-shadow: 2px 2px 3px #E2BD60;
-webkit-box-shadow: 2px 2px 3px #E2BD60;
border: 1px solid white;
padding: 10px;
text-align:center;
}

.newsletterText{
/*  font-size: 1.2em;  */  /* this was reducing the em of sidebars (1.2 as of writing) by another 1.2 */

margin: 0px;
font-variant:normal;
font-family:"Times New Roman", Times, serif;
text-align:center;
color: #FFFFFF;
font-size: 1.3em;
line-height: 1.3em;
}

.smallInheritColor{
font-size: .8em;
}

.makemeWhite{
color: #FFFFFF;
}

.sitemapText{
line-height: 1.6em;
padding-left: 30px;
margin: 0 0;
}

.blockquotePlain{
font-style:normal;
}


#homeTitle{
font-family:"Times New Roman", Times, serif;
color: #D49F10;
font-size: 1.4em;
width: 60%;
height: auto;
text-align:center;
font-weight:normal;
letter-spacing: 1.0px;
margin: 5px auto 20px;
padding: 15px;
border: 1px solid #E2BD60;
/* border: 1px solid #3e5871;  */
-moz-border-radius: 15px;
border-radius: 15px;
box-shadow: 3px 3px 3px #E2BD60;
-moz-box-shadow: 2px 2px 3px #E2BD60;
-webkit-box-shadow: 2px 2px 3px #E2BD60;
text-shadow: 1px 1px 2px #FFFFFF;
/* display:inline-block;   only for IE to get "layout" so shadow will work 
filter: Shadow(Color=#BBBBBB, 	
			Direction=135, 
			Strength=8);  */
			
}


/* wrapper encloses the main 3 boxes on the home page  */
#wrapper{
width: 85%;   /* was 900 pixels for the original homepage */
height: auto;
margin: 0px auto 0px;
border-left: 2px solid #3e5871;
border-right: 2px solid #3e5871;
/* border-bottom: 1px solid #3e5871;  */
background-color:#FFF;
overflow: auto;
}

#wrapper-shadow{
width: 910px;
/* background-image: url(Images-Compass-Wealth/shadow-back.png);
background-repeat:repeat-y; */
height:600px;
margin:5px auto 0;
background-color:#F3E7BD;
}

.noLineBreak{
margin: 0 0 5px 0;
padding: 0 0 0 0;
}

.textAlignRight{
text-align:right;
}

.superscriptMe{
vertical-align:super;
font-size: .6em;
}

.goldMe{
color: #D49F10;
}


.indentLeft{
margin-left: 30px;
color:#666666;
display:block;
}



hr {
width: 65%;
height: 1px;
margin: 0 auto;
border:0;
padding:0;
color:#3e5871;
background-color:#3e5871;
}

ul.diamond {
	list-style-type: disc;
	list-style-image: url(Images-Compass-Wealth/diamond-bullet.png); 
	list-style-position: outside;
	font-family:"Times New Roman", Times, serif;
	font-size: 1.2em;
	color: #666666;  /* was 444444 */
	line-height: 1.4em;
	}
	
	
.tempText{
color:#990000;
}
	
#centerMeDiv{
width: 725px;
height: auto;
padding: 25px 30px 20px;
margin: 0 auto 40px;

}



/* this is for the AI graphs, to be inset a bit but not truly centered,  they wont center well on skinny ipad if placed center for chrome so used 10% */
.imageCenter{
margin: 0 10% 0;
}

.imageTruCenter{
margin: 0 auto 0;
}

.alignLeft{
text-align:left;
}




/** Accordian funciton below here **/

.arrowlistmenu{
width: 180px; /*width of accordion menu*/
}

.arrowlistmenu .menuheader{ /*CSS class for menu headers in general (expanding or not!)*/
font: bold 14px "Times New Roman";
color: white;
background: #D4AD63 url(Images-Compass-Wealth/titlebargold.png) repeat-x center left;  
/* orig background with black metallic
background: black url(http://chappellstudiob.info/Images-Compass-Wealth/titlebar.png) repeat-x center left;  */
margin-bottom: 10px; /*bottom spacing between header and rest of content*/
text-transform: smallcaps;
padding: 4px 0 4px 10px; /*header text is indented 10px*/
cursor: hand;
cursor: pointer;
}

.arrowlistmenu .menuheaderDiff{ /*CSS class for menu headers in general (expanding or not!)*/
font: bold 14px "Times New Roman";
color: white;
background: #D4AD63 url(Images-Compass-Wealth/titlebargold.png) repeat-x center left;  
/* orig background with black metallic
background: black url(http://chappellstudiob.info/Images-Compass-Wealth/titlebar.png) repeat-x center left;  */
margin-bottom: 10px; /*bottom spacing between header and rest of content*/
text-transform: smallcaps;
padding: 4px 0 4px 10px; /*header text is indented 10px*/
cursor: hand;
cursor: pointer;
}






.arrowlistmenu .openheader{ /*CSS class to apply to expandable header when it's expanded*/
background-image: url(Images-Compass-Wealth/titlebar-active-blue.png);
}

.arrowlistmenu ul{ /*CSS for UL of each sub menu*/
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 8px; /*bottom spacing between each UL and rest of content*/
}

.arrowlistmenu ul li{
padding-bottom: 2px; /*bottom spacing between menu items*/
}

.arrowlistmenu ul li a{
color: #000000;
/*background: url(Images-Compass-Wealth/diamond-bullet.png) no-repeat center left; custom bullet list image  */
display: block;
padding: 2px 0;
padding-left: 19px; /*link text is indented 19px*/
text-decoration: none;
font-weight: bold;
border-bottom: 1px solid #dadada;
font-size: 90%;
}

.arrowlistmenu ul li a:visited{
color: #999999;
}

.arrowlistmenu ul li a:hover{ /*hover state CSS*/
color: #999999;
background-color: #F3F3F3;
}

.centerThatAccordian{
margin-left:0px;
margin-bottom: 200px;
}

.leftThatAccordian{
margin: 0 auto 0;
}

.WhyButtonAction{
display: block;
width: 100px;
height: 100px;
position:absolute;
top: 293px;
left: 74%;
background: url(Images-Compass-Wealth/css-hover-why.png) no-repeat bottom;
background-position:bottom;
	text-indent: -99999px;
}


.WhyButtonAction:hover {
	background-position:top;
}

.inputNL {
    border: 1px solid #3e5871;
	padding: 4px 7px;
    background: #fff;
	color:#333333;
	font-style:normal;
	font-family:Arial, Helvetica, sans-serif;
	box-shadow: 3px 3px 3px #3e5871;
-moz-box-shadow: 2px 2px 3px #3e5871;
-webkit-box-shadow: 2px 2px 3px #3e5871;
}

.inputNL:hover {
    border: 1px solid ##3e5871;
    background: #fff;
}

#SocialMediaButtons{
float: right;
    width: 148px;
    height: 85px;  /* was 45 */
	margin-right:2em;
}

#buttonsOnly {
	display:inline;
	float: right;
}

.SocialImg{
}

.SocialImg:hover {
}

.phoneSpan{
letter-spacing:.2em;
line-height: 1.2em;
/* below added for resp */
color: #D5A00F;
    font-family: "Times New Roman", Times, serif;
    font-size: 1.2em;
    text-shadow: 1px 1px 1px #333;
}

.phoneDiv{
}

.DirectionsDiv {
width: 70%;
color: #666666;
}

p.DirectionsDiv {
font-family:"Times New Roman", Times, serif;
font-size: 1.2em;
}

.DirectionsDiv ul li{
font-family:"Times New Roman", Times, serif;
font-size: 1.2em;
}

#mainContentPlain {
width: 85%;
height: auto;
padding-top: 20px;
margin: 0px auto;
background-color: #FFF;
border-left: 2px solid #3e5871;
border-right: 2px solid #3e5871;
overflow: hidden;
}

#BoxLRWrapper{
width: 700px;
height: auto;
margin: 50px auto  400px;
/* overflow:auto;  */
}

#BoxQualities{
width: 310px;
height: 17em;
border: 1px solid #3e5871;
/*border-radius: 10px;
 box-shadow: 2px 2px 6px #D49F10; */
box-shadow: 3px 3px 3px #E2BD60;
-moz-box-shadow: 2px 2px 3px #E2BD60;
-webkit-box-shadow: 2px 2px 3px #E2BD60;
background-color: #e7e4d3;
background-image:url(Images-Compass-Wealth/opacity-compass-rose.png);
background-repeat:no-repeat;
background-position: 53% -10%;
padding-bottom: 2em;
display: inline; /* IE double float margin bug  */
}


.BoxL{
float:left;
}

.BoxR{
float: right;
}


.boxRLTitle {
margin: 0px;
margin-bottom: 0px;
padding-bottom: 5px;
padding-left: 0;
background-image:url(Images-Compass-Wealth/underline-arrow-290.png);
background-position:center;
background-repeat:no-repeat; 
text-align:center;
font-family:"Times  New Roman", Times, serif;
font-size:1.3em;
color: #D49510;
font-weight:lighter;
background-color: #FFFFFF;
line-height: 3em;

}

/*   DROP DOWN on the MENU WIDE SCREEN - no hamburger menu  text */

/*  *{margin:0;padding:0;text-decoration:none}   
body{background:#555;}
body{
margin:0;
padding:0;
 width: 100%; 
font-size: 100%;
background-image: url(Images-Compass-Wealth/spanish-olive-left-map-strip-lite.png), url(Images-Compass-Wealth/spanish-olive-right-map-strip-lite.png);
background-position: left top, right top;
background-repeat:repeat-y, repeat-y;
background-color: #e7e4d3;   
}
/* min-width: 995px; as part of responsive testing removed this */

/* menu bg color */
header{position:relative;width:85%;background:#212F3C; margin: 0 auto; border-left: 2px solid#3e5871;
    border-right: 2px solid #3e5871;
}
.logo{position:relative;z-index:123;padding:10px;font:18px verdana;color:#6DDB07;float:left;width:15%; display:none}
.logo a{color:#6DDB07;}
nav{position:relative;width:975px;margin:0 auto;}  /* was 980  */

/*  line-height was 2  */
#cssmenu,#cssmenu ul,#cssmenu ul li,#cssmenu ul li a,#cssmenu #head-mobile{margin-top:0; margin-bottom:0; padding:0;border:0;list-style:none;line-height:1;display:block;position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box; font-variant:small-caps;}
#cssmenu:after,#cssmenu > ul:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}
#cssmenu #head-mobile{display:none}
#cssmenu{font-family:"Times New Roman", Times, serif;background:#212F3C}
/* menu bg color */
#cssmenu > ul > li{float:left}
#cssmenu > ul > li > a{padding:17px;font-size:19px;letter-spacing:1px;text-decoration:none;color:#fceecc;font-weight:500;}



#cssmenu > ul > li:hover > a,#cssmenu ul li.active a{color:#fff}
/* menu bg color */
#cssmenu > ul > li:hover,#cssmenu ul li.active:hover,#cssmenu ul li.active,#cssmenu ul li.has-sub.active:hover{background:#262626!important;-webkit-transition:background .3s ease;-ms-transition:background .3s ease;transition:background .3s ease;}
#cssmenu > ul > li.has-sub > a{padding-right:30px}
#cssmenu > ul > li.has-sub > a:after{position:absolute;top:22px;right:11px;width:8px;height:2px;display:block;background:#fceecc;content:''}
#cssmenu > ul > li.has-sub > a:before{position:absolute;top:19px;right:14px;display:block;width:2px;height:8px;background:#fceecc;content:'';-webkit-transition:all .25s ease;-ms-transition:all .25s ease;transition:all .25s ease}
#cssmenu > ul > li.has-sub:hover > a:before{top:23px;height:0}
#cssmenu ul ul{position:absolute;left:-9999px}
/* menu bg color */
#cssmenu ul ul li{height:0;-webkit-transition:all .25s ease;-ms-transition:all .25s ease;background:#212F3C;transition:all .25s ease}
#cssmenu ul ul li:hover{}
#cssmenu li:hover > ul{left:auto}
#cssmenu li:hover > ul > li{height:35px}
#cssmenu ul ul ul{margin-left:100%;top:0}
#cssmenu ul ul li a{border-bottom:1px solid rgba(150,150,150,0.15);padding:11px 15px;width:170px;font-size:16px;text-decoration:none;color:#fceecc;font-weight:400;}
#cssmenu ul ul li:last-child > a,#cssmenu ul ul li.last-item > a{border-bottom:0}
#cssmenu ul ul li:hover > a,#cssmenu ul ul li a:hover{color:#fff}
#cssmenu ul ul li.has-sub > a:after{position:absolute;top:16px;right:11px;width:8px;height:2px;display:block;background:#fceecc;content:''}
#cssmenu ul ul li.has-sub > a:before{position:absolute;top:13px;right:14px;display:block;width:2px;height:8px;background:#fceecc;content:'';-webkit-transition:all .25s ease;-ms-transition:all .25s ease;transition:all .25s ease}
#cssmenu ul ul > li.has-sub:hover > a:before{top:14px;height:0}
#cssmenu ul ul li.has-sub:hover,#cssmenu ul li.has-sub ul li.has-sub ul li:hover{background:#262626;}
#cssmenu ul ul ul li.active a{border-left:1px solid #000000}
#cssmenu > ul > li.has-sub > ul > li.active > a,#cssmenu > ul ul > li.has-sub > ul > li.active> a{border-top:1px solid #000000}



.news {
	display:none;
}

#crumbContainer {
	display:none;
}

#spacer {
	display:none;
	height:30px;
}

/*  for phones  was 768 (at 850 my phone stays wide)   1070 keeps ipad in phone mode both orientations but surface pro swaps modes */  

/* If you load desktop images in your global style sheet, then target smaller devices with smaller images, overriding the larger, you will be loading both the large and smaller image – even though the larger is not being displayed, it is being loaded, thereby slowing down the load time of the site for mobile users. 

Always best to use separate media query files to target the devices within the break point range … and always use min and max settings to target these devices, because if you use only min size and overwrite by the next larger size (or smaller size) you are still loading all assets. and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  
  https://timkadlec.com/2012/04/media-query-asset-downloading-results/   added an image load  bg-time.png to all forfeited image loading
  
 Can check to see if phone is loading large background image?
  */
  
/* ipadish and smaller than desktop but still full size */
/* origianl setting  900 to 1100, altered to 100 for overhang bug, might then lead ot open menu */
@media screen and (min-width: 900px) and (max-width: 1140px){
	
	/*  fix drop down menu */
	/*  Add hamburger here and fix length  */
	/*  NAV STUFF */
		
.blue-circle-button {
	display:none;
	/* top: 200px;
	left: 10%; this code puts it in news band */
}

#mainFlex {
	background-image: url('Images-Compass-Wealth/sidebar-filler-blue.png');
    background-position: top right;
    background-repeat: repeat-y;
}

#mainTextFlex {
	width:50%;
}


#changingTextR{
	top: -3em;
	left: 8em;
}

#boxOne {
	height: 42em;
}

#boxTwo {
	height: 42em;
}

#boxThree {
	height: 42em;
}



header{position:relative;width:85%;background:#212f3c; margin: 0 auto;border:none;border-left: 2px solid#3e5871;
    border-right: 2px solid #3e5871;}
/* menu bg color */	
	
	
#cssmenu > ul > li > a{padding:17px;font-size:24px;letter-spacing:1px;text-decoration:none;color:#fceecc;font-weight:500;}

#cssmenu ul ul li a{border-bottom:1px solid rgba(150,150,150,0.15);padding:11px 15px;width:170px;font-size:22px;text-decoration:none;color:#fceecc;font-weight:400;}

	
	
	
.logo{position:absolute;top:0;left: 0;width:100%;height:46px;text-align:center;padding:.5em 0 0 0 ;float:none;display:none}
.logo2{display:none}
nav{width:100%;}
#cssmenu{width:100%}
#cssmenu ul{width:100%;display:none; padding:0} 
#cssmenu ul li{width:100%;border-top:1px solid #444}
#cssmenu ul li:hover{background:#363636;}
#cssmenu ul ul li,#cssmenu li:hover > ul > li{height:auto}
#cssmenu ul li a,#cssmenu ul ul li a{width:100%;border-bottom:0}
#cssmenu > ul > li{float:none}
#cssmenu ul ul li a{padding-left:25px}
/* menu bg color */
#cssmenu ul ul li{background:#212f3c!important;}
#cssmenu ul ul li:hover{background:#363636!important}
#cssmenu ul ul ul li a{padding-left:35px}
#cssmenu ul ul li a{color:#fceecc;background:none;margin-left:10px}
#cssmenu ul ul li:hover > a,#cssmenu ul ul li.active > a{color:#fff}
#cssmenu ul ul,#cssmenu ul ul ul{position:relative;left:0;width:100%;margin:0;text-align:left}
#cssmenu > ul > li.has-sub > a:after,#cssmenu > ul > li.has-sub > a:before,#cssmenu ul ul > li.has-sub > a:after,#cssmenu ul ul > li.has-sub > a:before{display:none}
#cssmenu #head-mobile{display:block;padding:30px;color:#fceecc;font-size:18px;font-weight:700}
.button{width:100px;height:70px;position:absolute;right:0;top:0;cursor:pointer;z-index: 12399994;}
.button:after{position:absolute;top:27px;right:20px;display:block;height:12px;width:60px;border-top:4px solid #fceecc;border-bottom:4px solid #fceecc;content:''}
.button:before{-webkit-transition:all .3s ease;-ms-transitio6:all .3s ease;transition:all .3s ease;position:absolute;top:11px;right:20px;display:block;height:4px;width:60px;background:#fceecc;content:''}
.button.menu-opened:after{-webkit-transition:all .3s ease;-ms-transition:all .3s ease;transition:all .3s ease;top:30px;border:0;height:4px;width:60px;background:#fceecc;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}
.button.menu-opened:before{top:30px;background:#fceecc;width:60px;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}

#cssmenu .submenu-button{position:absolute;z-index:99;right:0;top:0;display:block;border-left:1px solid #444;height:58px;width:58px;cursor:pointer}
#cssmenu .submenu-button.submenu-opened{background:#262626}
#cssmenu ul ul .submenu-button{height:50px;width:50px}

#cssmenu .submenu-button:after{position:absolute;top:27px;right:13px;width:30px;height:2px;display:block;background:#fceecc;content:''}

#cssmenu ul ul .submenu-button:after{top:15px;right:13px}
#cssmenu .submenu-button.submenu-opened:after{background:#fff}
#cssmenu .submenu-button:before{position:absolute;top:14px;right:26px;display:block;width:2px;height:30px;background:#fceecc;content:''}
#cssmenu ul ul .submenu-button:before{top:12px;right:16px}
#cssmenu .submenu-button.submenu-opened:before{display:none}


#cssmenu ul ul ul li.active a{border-left:none}
#cssmenu > ul > li.has-sub > ul > li.active > a,#cssmenu > ul ul > li.has-sub > ul > li.active > a{border-top:none}

	/*  end of inserted burger */

/* breadcrumb arrows are here */
#crumbContainer {
	display:none;
}
	
.breadcrumb { 
  list-style: none; 
  overflow: hidden; 
  font: .8em "Times New Roman";
}
.breadcrumb li { 
  float: left; 
}
.breadcrumb li a {
  color: white;
  text-decoration: none; 
  padding: 5px 0 5px 45px;
  background: blue; /* fallback color */
  background: #3e5871; 
  position: relative; 
  display: block;
  float: left;
}

.breadcrumb li a::after { 
  content: " "; 
  display: block; 
  width: 0; 
  height: 0;
  border-top: 50px solid transparent; /* Go big on the size, and let overflow hide */
  border-bottom: 50px solid transparent;
  border-left: 30px solid #3e5871;
  position: absolute;
  top: 50%;
  margin-top: -50px; 
  left: 100%;
  z-index: 2; 
}

.breadcrumb li a::before { 
  content: " "; 
  display: block; 
  width: 0; 
  height: 0;
  border-top: 50px solid transparent;       
  border-bottom: 50px solid transparent;
  border-left: 30px solid white;
  position: absolute;
  top: 50%;
  margin-top: -50px; 
  margin-left: 1px;
  left: 100%;
  z-index: 1; 
}

.breadcrumb li:first-child a {
  padding-left: 10px;
}
.breadcrumb li:nth-child(2) a       { background:        hsla(34,85%,75%,1); }
.breadcrumb li:nth-child(2) a:after { border-left-color: hsla(34,85%,75%,1); }
.breadcrumb li:nth-child(3) a       { background:        hsla(34,85%,75%,1); }
.breadcrumb li:nth-child(3) a:after { border-left-color: hsla(34,85%,75%,1); }
.breadcrumb li:nth-child(4) a       { background:        hsla(34,85%,75%,1); }
.breadcrumb li:nth-child(4) a:after { border-left-color: hsla(34,85%,75%,1); }
.breadcrumb li:nth-child(5) a       { background:        hsla(34,85%,75%,1); }
.breadcrumb li:nth-child(5) a:after { border-left-color: hsla(34,85%,75%,1); }

.breadcrumb li.override:nth-child(n) a {background:hsla(34,85%,75%,1);}
.breadcrumb li.override:nth-child(n) a:after {border-left-color:hsla(34,85%,75%,1);}
/* was #3399CC */



/*

.breadcrumb li a:hover { 
  background: #3E5871 !important;
}
.breadcrumb li a:hover:after { 
  border-left-color: #3E5871 !important; 
}

*/

#spacer {
	display:inline-block;
	height:30px;
}
 

	
	
}



/* large phone  phablets - also will load up elements for phones here and then knowck out undesired in phone section */	
@media screen and (min-width: 10px) and (max-width: 899px) {
/* mobile site with a ticker and images */


	body {
    background-image: url(Images-Compass-Wealth/bg-time.png);
	background-repeat:no-repeat;
	min-width: 250px;
}

#homeTitle {
	width: 90%;
	font-size:1.4em;
	border:none;
	box-shadow:none;
}

#quoteBox {
	width:93%;
	height: auto;
	overflow:auto;
	/* float: left;  */
	display: block;
	border: none;
}
#wrapper {
	width: 100%;
	border: none;
	
	
}


#responsiveHeader {
	text-align:center;
	width: 100%;
	border:none;
}

	

#wrapper {
	width: 100%;
	border: none;
	}

#logo-container {
	display: none;
}

#changingTextR {
	display:none;
}

#logo-container img {
  display:none;
   
}


#logo-container-small-dev img {
	display:inline-block;
	margin: 0 auto;
	max-width:100%;
}


#mainContent {
    width: 100%;
	border:none;
	}
	
#mainText{
	margin-left:0;
	padding-left: 2em;
	padding-bottom: 3em;
	font-size:1.2em;
}

ul#nav {
	margin: 0 0 0 1%;

}

ul#nav li {
	font-size: 1.6em;

}

ul#nav li:after {
    content: url('Images-Compass-Wealth/diamond-bullet.png');
}



#boxOne{
/* float: left;  */
margin: 0;
width: 99%;
height: auto;
background-color: #e7e4d3;
background-image: url(Images-Compass-Wealth/bg-time.png);
background-repeat:no-repeat;
padding:5px;
border-radius: 5px;

}


#boxTwo{
clear:both;
margin: 0;
float:left;
background-color: #e7e4d3;
background-image: url(Images-Compass-Wealth/bg-time.png);
background-repeat:no-repeat;
width:99%;
height: auto;
padding:5px;
border-radius: 5px;
}




#boxThree{
float:left;
margin: 0;
background-color: #e7e4d3;
background-image: url(Images-Compass-Wealth/bg-time.png);
background-repeat:no-repeat;
padding:5px;
width: 99%;
height: auto;
border-radius: 5px;
}



.boxOneTitle {
	font-size:2.6em;
	border-radius:8px;
}

.boxTwoTitle {
	font-size:2.6em;
		border-radius:8px;

}

.boxThreeTitle {
	font-size:2.6em;
		border-radius:8px;

}



#footerHome{
	height:30em;
}

#DeeperFooter {
	width: 100%;
	height: 25em;
}

.blue-circle-button{
	display:none;  /* remove this for a bottom right corner fixed image */
	position: fixed;
    bottom:0;
    right:0;
	left: initial;
	top: initial;
	width: 9em;
	height: 9em;
	
	
}

#bottomBox {
	width: 100%;
	border:none;
}

#boxOneB {
	margin:25px 0 0 0;
	width:90%;
	
}

#boxTwoB {
	margin:25px 0 25px 0;
	width:90%;
	
}

#boxThreeB {
	margin:0;
	width:90%;
	
}

#BoxLRWrapper {
width: 90%;
}

#BoxQualities{
	width: 100%;
	font-size: 1em;
	height:auto;
	padding-bottom:1.5em;
	background-image: url('Images-Compass-Wealth/bg-time.png');
	background-repeat:no-repeat;
	
}

#mainContentPlain {
	width: 100%;
	border: none;
}

.BoxR{
clear:both; 
float:left; 
margin:60px 0px 100px;
}


.BoxL{
	 margin-bottom: 20px;
 }
 
 #responsiveFooter {
	 width: 100%;
	 border: none;
 }
 
 #SocialMediaButtons {
	display:none;
	
 }
 
 #socialMediaDiv{
display:none;
 }
 
#contactMobile {
	background-color:#3e5871;
	display:block;
	margin:0 auto;
	width: auto;
	height: auto;
	text-align:center;
	letter-spacing: .2em;
    color: #D5A00F;
    font-family: "Times New Roman", Times, serif;
    font-size: 1.4em;
    text-shadow: 1px 1px 1px #333;
	border-top: 1px solid #3e5871;
	padding:0 0 1em 0;;
	
	
	
	}
 
#buttonsOnly{
	display:none;
}

.phoneSpan{
letter-spacing:.2em;
line-height: 1.8em;
    font-size: 1.8em;
}
 

 
 .headlineNL {
	 font-size:1.2em;
 }
 
 #responsiveSignUp {
	display: block;
	width: 90%;
	margin: 0 auto 0;
	/*  background-image: url('Images-Compass-Wealth/newsletter-image.png');
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 16%;  */
	font-size: 1.8em;
	}
	








#sideBarLeft {
	display:none;
}

p {
font-size: 1.1em;
}



h1 {
font-size:	1.3em;
}



.floatLeftPad{
	float:none;
}


/*  NAV STUFF */

/* menu bg color */
header{position:relative;width:100%;background:#212F3C; margin: 0 auto;border:none;}
	
	
#cssmenu > ul > li > a{padding:17px;font-size:24px;letter-spacing:1px;text-decoration:none;color:#fceecc;font-weight:500;}

#cssmenu ul ul li a{border-bottom:1px solid rgba(150,150,150,0.15);padding:11px 15px;width:170px;font-size:22px;text-decoration:none;color:#fceecc;font-weight:400;}

	
	
	
.logo{position:absolute;top:0;left: 0;width:100%;height:46px;text-align:center;padding:.5em 0 0 0 ;float:none;display:block}
.logo2{display:none}
nav{width:100%;}
#cssmenu{width:100%}
#cssmenu ul{width:100%;display:none; padding:0} 
#cssmenu ul li{width:100%;border-top:1px solid #444}
/* menu bg color  */
#cssmenu ul li:hover{background:#363636;}
#cssmenu ul ul li,#cssmenu li:hover > ul > li{height:auto}
#cssmenu ul li a,#cssmenu ul ul li a{width:100%;border-bottom:0}
#cssmenu > ul > li{float:none}
#cssmenu ul ul li a{padding-left:25px}
/* menu bg color */
#cssmenu ul ul li{background:#212F3C!important;}
#cssmenu ul ul li:hover{background:#363636!important}
#cssmenu ul ul ul li a{padding-left:35px}
#cssmenu ul ul li a{color:#fceecc;background:none;margin-left:15px}
#cssmenu ul ul li:hover > a,#cssmenu ul ul li.active > a{color:#fff}
#cssmenu ul ul,#cssmenu ul ul ul{position:relative;left:0;width:100%;margin:0;text-align:left}
#cssmenu > ul > li.has-sub > a:after,#cssmenu > ul > li.has-sub > a:before,#cssmenu ul ul > li.has-sub > a:after,#cssmenu ul ul > li.has-sub > a:before{display:none}
#cssmenu #head-mobile{display:block;padding:30px;color:#fceecc;font-size:18px;font-weight:700}
.button{width:100px;height:70px;position:absolute;right:0;top:0;cursor:pointer;z-index: 12399994;}
.button:after{position:absolute;top:27px;right:20px;display:block;height:12px;width:60px;border-top:4px solid #fceecc;border-bottom:4px solid #fceecc;content:''}
.button:before{-webkit-transition:all .3s ease;-ms-transitio6:all .3s ease;transition:all .3s ease;position:absolute;top:11px;right:20px;display:block;height:4px;width:60px;background:#fceecc;content:''}
.button.menu-opened:after{-webkit-transition:all .3s ease;-ms-transition:all .3s ease;transition:all .3s ease;top:30px;border:0;height:4px;width:60px;background:#fceecc;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}
.button.menu-opened:before{top:30px;background:#fceecc;width:60px;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}

#cssmenu .submenu-button{position:absolute;z-index:99;right:0;top:0;display:block;border-left:1px solid #444;height:58px;width:58px;cursor:pointer}
#cssmenu .submenu-button.submenu-opened{background:#262626}
#cssmenu ul ul .submenu-button{height:50px;width:50px}

#cssmenu .submenu-button:after{position:absolute;top:27px;right:13px;width:30px;height:2px;display:block;background:#fceecc;content:''}

#cssmenu ul ul .submenu-button:after{top:15px;right:13px}
#cssmenu .submenu-button.submenu-opened:after{background:#fff}
#cssmenu .submenu-button:before{position:absolute;top:14px;right:26px;display:block;width:2px;height:30px;background:#fceecc;content:''}
#cssmenu ul ul .submenu-button:before{top:12px;right:16px}
#cssmenu .submenu-button.submenu-opened:before{display:none}


#cssmenu ul ul ul li.active a{border-left:none}
#cssmenu > ul > li.has-sub > ul > li.active > a,#cssmenu > ul ul > li.has-sub > ul > li.active > a{border-top:none}

/*    FLEX css for main and sidebars   */
#mainFlex {
width:100%;
height: auto; 
margin: 0px auto;
background-color:white;
overflow: hidden;
background-image: url(Images-Compass-Wealth/bg-time.png);
background-repeat:no-repeat;
}

#mainTextFlex {
width: 90%;
padding: 2em;
margin: 0;
}

#sideFlex {
clear:both;
width: 100%;
}

#sidebarSpacer {
	display:none;
}
	
 
#sideBarRight {
width: 100%;                  
height: auto;
background-image:url(Images-Compass-Wealth/h-compass.jpg); 
/* background-image:url(Images-Compass-Wealth/Compass-photo-res-500px.jpg);  */
background-repeat:no-repeat;
background-position: center top;
background-color: #e7e4d3;  /* try not to use padding in sidebar as will be added to lenght in ns browsers  */
padding-top: 1.2em;
content:""
}

#sidebarRightPlain{    /*    FOR PLAIN SIDEBARS , NO PHOTO OF COMPASS, maybe an inserted image, centered text  */
width: 100%;
height: auto;
background-color:#e7e4d3;
margin-top: 20px;
color:#3E354A;
text-align:center;
background-image:url(Images-Compass-Wealth/opacity-compass-rose.png);
background-position:center top;
		background-repeat: repeat-y;
		padding-top:30px;
}







#sidebarListRaise {
	width:100%;
	text-align:center;
	margin-top:15em;
}

/* breadcrumb arrows are here */	

#crumbContainer {
	display:inline;
}

.breadcrumb { 
  list-style: none; 
  overflow: hidden; 
  font: .8em "Times New Roman";
}
.breadcrumb li { 
  float: left; 
}
.breadcrumb li a {
  color: white;
  text-decoration: none; 
  padding: 5px 0 5px 45px;
  background: blue; /* fallback color */
  background: #3e5871; 
  position: relative; 
  display: block;
  float: left;
}

.breadcrumb li a::after { 
  content: " "; 
  display: block; 
  width: 0; 
  height: 0;
  border-top: 50px solid transparent; /* Go big on the size, and let overflow hide */
  border-bottom: 50px solid transparent;
  border-left: 30px solid #3e5871;
  position: absolute;
  top: 50%;
  margin-top: -50px; 
  left: 100%;
  z-index: 2; 
}

.breadcrumb li a::before { 
  content: " "; 
  display: block; 
  width: 0; 
  height: 0;
  border-top: 50px solid transparent;       
  border-bottom: 50px solid transparent;
  border-left: 30px solid white;
  position: absolute;
  top: 50%;
  margin-top: -50px; 
  margin-left: 1px;
  left: 100%;
  z-index: 1; 
}

.breadcrumb li:first-child a {
  padding-left: 10px;
}
.breadcrumb li:nth-child(2) a       { background:        hsla(34,85%,75%,1); }
.breadcrumb li:nth-child(2) a:after { border-left-color: hsla(34,85%,75%,1); }
.breadcrumb li:nth-child(3) a       { background:        hsla(34,85%,75%,1); }
.breadcrumb li:nth-child(3) a:after { border-left-color: hsla(34,85%,75%,1); }
.breadcrumb li:nth-child(4) a       { background:        hsla(34,85%,75%,1); }
.breadcrumb li:nth-child(4) a:after { border-left-color: hsla(34,85%,75%,1); }
.breadcrumb li:nth-child(5) a       { background:        hsla(34,85%,75%,1); }
.breadcrumb li:nth-child(5) a:after { border-left-color: hsla(34,85%,75%,1); }

.breadcrumb li.override:nth-child(n) a {background:hsla(34,85%,75%,1);}
.breadcrumb li.override:nth-child(n) a:after {border-left-color:hsla(34,85%,75%,1);}



/*

.breadcrumb li a:hover { 
  background: #3E5871 !important;
}
.breadcrumb li a:hover:after { 
  border-left-color: #3E5871 !important; 
}

*/
 
#spacer {
	display:inline-block;
	height:30px;
}

#breadcrumbDiv {
	margin: 0 auto -200px;
}
	




@keyframes ticker {
	0%   {margin-top: 0px}
	30%  {margin-top: -30px}
	60%  {margin-top: -60px}
	90%  {margin-top: -90px}
	100% {margin-top: -120px}
	
	/* 100% {margin-top: 0}  */
}

/*  news ticker responsive  */

#makeBlack{margin:0; padding:0; text-align::center; background:#212F3C}  /*   no longer black */
/* menu bg color */

.news {
	display:block;
	background-color: #222;
 	box-shadow: inset 0 -15px 30px rgba(0,0,0,0.4),
                   0 5px 10px rgba(0,0,0,0.5);
	width: 100%;  /* could be 95% for nice inset when black */
	height: 30px;
 /* PRESENTATIONAL PURPOSES 
  position: absolute; 
  left: 0; right: 0;
  top: 0; bottom: 100px;  */
  margin: auto;
  /**/
	overflow: hidden;
/*	border-radius: 4px; */
	padding: 5px 0px;
} 

/*
.news span {
	float: left;
	color: #f3e7bd;
	padding: .5em 0 .5em .5em; 
	position: relative;
    top: 4%;
	border-radius: 4px;
    box-shadow: inset 0 -15px 30px rgba(0,0,0,0.4);
	font: 1.5em 'Times New Roman', Helvetica, Arial, sans-serif;
	background: #333;
    cursor: pointer
}

*/

.dontHideMe {
	display:inline!important;
	font-size: 1.0em;
	
	}

.news ul {
		
	float: left;
	padding-left: 15px;
/*	animation: ticker 12s linear 1;  */
	animation: ticker 10s cubic-bezier(1, 0, .5, 0) infinite;
	
    /*  works but jiggles  animation: ticker 16s ease infinite;  */
	list-style:none;
}
.news ul li {line-height: 30px;}

.news ul li a {
	color: #d5a00f;
	text-decoration: none;
	font-weight:400;
	font: 1.5em 'Times New Roman', Helvetica, Arial, sans-serif;
	font-variant:small-caps;

}



.news ul:hover { animation-play-state: paused }
.news span:hover+ul { animation-play-state: paused }

/* OTHER COLORS */
.blue { background: #347fd0 }
.blue span { background: #2c66be }
.red { background: #d23435 }
.red span { background: #c22b2c }

/* menu bg color */
.black {background:#212F3C }   /* was black, change to variable */
.black span {background:#666}

}
/* End of phablet  */

/*  super small phone*/

/* At 530 width ticker no longer fits st 1.5em  */


@media screen and (max-width: 570px) {
/*  mobile site with no ticker and minimal images   WAS 530, edited for the breadcrumbs to 570 */
body #mainContent {
background-image: url(Images-Compass-Wealth/bg-time.png);
background-repeat:no-repeat;}
.news ul li a { font-size: 1.1em;}
.news ul {padding-left: 0px;}

/* #crumbContainer {
	display:none;
} */

}

/*  baby phone  */

@media screen and (max-width:250px) {
	.news {display:none}
	
	#spacer {
	display:none;
	height:30px;
}

/* #crumbContainer {
	display:none;
} */

#breadcrumbDiv{
	display:none;
}
	
}