.bodyStyle {background:#fff; font-family:Arial, Helvetica, sans-serif; font-size:16px; color:#555; margin:0; padding:0;}

.container {width:100%; margin:auto;}
.leftNav {float:left; width:10%; margin-top:3.5em;}
.header { display:block; width:100%; float:left; background-color:#fff;}
.headerSmall {display:none;}
.sliderDiv {clear:both; min-height:600px; width:100%; padding:0; background-color:#f4f4f4;}
.sliderDivSmall {display:none;}
.bodyDiv {clear:both; padding:2em 0 0 6em; width:97%; margin:auto;}
#divFreeButton {width:20%; float:left;}
#divHeaderTools {width: 62%; padding:2.5em 0 0 3em; float: left;}
#divHeaderLogo {float: right; width: 26%;}
.content {width:86%; float:right;}
.div400 {float:left !important; width:45% !important; padding:0 2em 0 2em !important;}
.div360 {float:left !important; width:40% !important; padding:0 2em 0 2em !important;}

.div360desk {display:block;}
.div360mobile {display:none;}
#top {display:none}
#bottom {display:block}

.footer {clear:both; padding:2.5em 0 3em; line-height:1.8em; text-align:center; font-size:.75em;}
#divContact {width:30%; float:left; padding:0 2em; text-align:left;}
#divContact p {text-align:left;}
#divForm {float:left; width:50%;}
fieldset {border:4px #dadada ridge; background-color:#e7fffe;}
legend { font-weight:400; font-size:1.4em; font-style:italic; color:#777;}
#contact-form input {background-color:#fffeee;}


#divFooter {border-top:1px #e9e9e9 solid; width:36%; margin:auto; padding:10px 0; font-size:.75em; color:#444;}

a {color:#a73237; text-decoration:none;}
a:hover {color:#cfcd0f}
p {margin:1.3em 0; line-height:1.6em; text-align:justify;}
.alignCenter {text-align:center;}
.alignLeft {text-align:left;}
.alignRight {text-align:right;}
.alignFull {text-align:justify;}
.indent {margin-left:2.5em;}
.underline {text-decoration:underline;}
.border0 {border-width:0px;}

h1 {font-size: 2.5em; line-height:1.5; color:#444; font-family:'Julius Sans One', sans-serif; font-weight:400;}
h2 {font-weight:600; font-size:1.3em; margin:0; padding:0; line-height:2.25em;}
h3 {font-weight:600; font-size:1.1em; margin:0; padding:0; line-height:1.5em;}
h4 {font-size:medium; color:#333333;}

.titleXLarge {font-weight:bold; font-size:3em; color:#a73237; line-height:3em;}
.titlelarge {font-weight:bold; font-size:2.5em;/* color:#4b4873;*/ color:#646464; line-height:3.5em;}
.titleSmall {font-weight: 600; font-size:2em; color:#fafaff; line-height:1.2em; text-shadow:2px 2px 4px #555;}
.titleLargeSmall { font-weight: 600; font-size:2.5em; color:#d3dd36; line-height:1.2em; text-shadow:2px 2px 4px #555;}
.indexTitle {font-size: 2.5em; line-height:1.5; color:#333; font-family:'Julius Sans One', sans-serif;}  
/*  .arialSm {font-size:small;}
.arialXsm {font-size:.75em;}  */

#logo {margin:.5em 2em 0 0; float:right; width:75%;}
#freeButton {width:126px; margin:1em 0 0 2em; float:left; border:0;}
#toolsButton {max-width:579px;}
#roundedButton {background-color:#8581a4; color:#fff !important; font-size:1.0em; padding:.25em 2em; -moz-border-radius:1.2em; -webkit-border-radius:1.2em; border-radius:1.2em; width:100px; -moz-transition:width 1s ease-in, font-size .5s; -webkit-transition:width 1s ease-in, font-size .5s; transition:width 1s ease-in, font-size .5s;}
#roundedButton:hover {font-size:1.5em; width:300px;}
/*  .offerImage {width:33%; float:left; text-align:center; padding-top:3em;}  */

#divSalesforce {height:680px; padding:6em 0 0 3em; background-color:rgba(250,250,203,1); -moz-transition:background-color 1.5s; -webkit-transition:background-color 1.5s; transition:background-color 1.5s;}
#divSalesforce:hover {background-color:rgba(250,250,203,.4);}
#divSalesforce img {width:90%; -moz-transition:width 2s ease-out; -webkit-transition: width 2s ease-out; /* Safari */ transition: width 2s ease-out;}
#divSalesforce:hover img {width:100%;}
#divSalesforce a {color:#646464; -moz-transition:color .5s; -webkit-transition: color .5s; /* Safari */ transition: color .5s;*/}
#divSalesforce a:hover {color:#c00505;}
#SalesforceTitleLarge {display:block;}
#SalesforceTitleSmall {display:none;}
.SalesForceHeading {font-size:1.5em; padding: 1em 0 0 1.5em;}
.SalesForceHeading:hover {font-size:1.6em; padding: 1em 0 0 1.5em;}
#divSalesforceLeft {float:left; width:34%; padding:1em 0 0 1em; -moz-transition:font-size .5s; -webkit-transition:font-size .5s; transition: font-size .5s;}
#divSalesforceRight {float:right; width:60%; padding-top:1em;}

#divResults {height:560px; padding:4em 0; background-color:rgba(200,196,239,1); -moz-transition:width 1.5s; -webkit-transition: width 1.5s; transition:1.5s; color:#646464;}
#divResults:hover {background-color:rgba(200,196,239,.4);}
#divResults img {width:95%; -moz-transition:width 2s; -webkit-transition: width 2s; /* Safari */ transition: width 2s;}
#divResults:hover img {width:100%;}
#divResults a {line-height: 1.5em; color: #646464;}
#divResultsLeft {float:left; width:50%;}
#divResultsRightLarge {float:right; width:50%; text-align:center; margin-top:6em; display:block;}
#divResultsRightSmall {display:none;}

#divList {height:580px; padding: 0em 0 0 0em; background-color:rgba(191,231,225,1); -moz-transition:background-color 1s; -webkit-transition:background-color 1s; color:#646464; transition:background-color 1s; color:#646464;}
#divList:hover {background-color:rgba(191,231,225,.6);}
#divList a {color: #646464;}
.divListTitle {font-size:3em; font-family:'Julius Sans One', sans-serif;}
.divListHeading {display:block; font-size:1.5em; line-height:1.8em; padding:4em 0 0 3em; -moz-transition:font-size .5s ease-out; -webkit-transition:font-size .5s ease-out; transition:font-size .5s ease-out;}
.divListHeadingSmall {display:none;}
.divListHeading:hover {font-size:1.6em;}

#divListLeft {clear:left; float:left; width: 42%; padding: 10% 0 0 8%;}
#divListLeftSmall {display:none;}
#divListRightLarge {float: right; width: 50%; display:block;}
#divListRightSmall {display:none;}

.li {padding:0px; list-style-type:square; margin-left:1em; margin-bottom:1em; text-align:justify; line-height:1.5em;}
.li a {text-decoration:none;}
.li2 {list-style-type:none; line-height:2.2em; padding-left:.5em;}
.li2 a {text-decoration:none;}
.li3 {list-style-image:url('images/li3Caret.png'); line-height:2em; text-align:left; margin-left:10em;}
#contact-form li {list-style:none;}

a.link2:link {font-weight:bold; font-size:small; text-decoration:none; color:#000080;}
a.link2:visited {font-weight:bold; font-size:small; text-decoration:none;}
a.link2:hover {font-size:small; font-weight:bold; text-decoration:none; color:#FF0000;}

.websiteDiv {width: 50%; float: left;}



/* ------------------------------------- SMALL MENU ----------------------------------- */

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,300);
#cssmenu {
  width: 100%;
  line-height: 1.2em;
  text-transform: uppercase;
  text-align: left;
}
#cssmenu > ul {
  list-style-type: none;
  padding: 0 0 .5em 7em;;
  margin: 0;
  background-color: transparent;
 /*   border: 1px solid #ece6e8;
  border-bottom: 3px solid #d9ced2; */
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  -o-border-radius: 2px;
  border-radius: 2px;
}
#cssmenu > ul li#responsive-tab {
  display: none;
  /* Hide for large screens */

}
#cssmenu > ul li {
  display: inline-block;
  zoom: 1;
}
#cssmenu > ul li.right {
  float: right;
}
#cssmenu > ul li.has-sub {
  position: relative;
}
#cssmenu > ul li.has-sub:hover ul {
  display: block;
}
#cssmenu > ul li.has-sub ul {
  display: none;
  width: 180px; 
  position: absolute;
  margin: 0 0 0 1.5em;
  padding: 0/* .4em*/;
  list-style-type: none;
  background: #ffffff;
  border: 1px solid #ece6e8;
  border-bottom: 3px solid #d9ced2;
  border-top: 0 none;
  z-index:9000;
}
#cssmenu > ul li.has-sub ul li {
  display: block;
  background-color:#eee;
  }

#cssmenu > ul li.has-sub ul li a {
	padding-left: 30px;
}
#cssmenu > ul li.has-sub > a {
  background-image: url('images/caret.png');
  background-repeat: no-repeat;
  background-position: 90% -95%;
}
#cssmenu > ul li.has-sub > a.active,
#cssmenu > ul li.has-sub > a:hover {
  background: url('images/caret.png') no-repeat;
  background-position: 90% 90%;
}
#cssmenu > ul li a {
  display: block;
  padding: 10px 35px;
  text-decoration: none;
  font-weight:400;
  font-size: .8em;
  color: #777;
 /* text-shadow: 0px 1px 0px #fff;
  border-radius:.6em;
  -moz-border-radius:.6em;
  -webkit-border-radius:.6em; */
}
#cssmenu > ul li a:active,
#cssmenu > ul li a:hover {
  /*background: #a13d3d#aad0d3;*/
  color: #bbb;
  /*text-shadow: 0px 1px 2px #777;*/
}

/* ------------------------------------------------  MEDIA  ------------------------------------------ */

@media only screen and (min-width: 1024px) and (max-width: 1300px) {
#freeButton {width: 120px; margin: 1em 0 0 1em;}
#logo {width: 80%}
.sliderDiv {height:300px !important;}
#divFreeButton {width:20% !important;}
#divHeaderTools {width:76%; float:none;}
#toolsButton {width:75% !important;}
.bodyDiv {padding:2em 0 0 4em;}
.div400 {float:left !important; width:40% !important;}
.div360 {float:left !important; width:42% !important;}
.offerImage {width:33%; float:left; text-align: center;}
.offerImage img {width:80%;}
#divSalesforce {padding:5em 0 0 3em; height:540px !important;}
#SalesforceTitleLarge {font-size:2.4em;}
.SalesForceHeading {font-size:1.2em !important;}
.SalesForceHeading:hover {font-size:1.3em !important;;}
#divResults{height:440px !important; padding-top:4em !important;}
#divResultsRight {width:50%; text-align:center; margin-top:3em !important;}

#divList {height:430px !important;}
#divListLeft {clear:left; padding:6em 0 0 2.5em !important;}
.divListTitle {font-size:2.7em;}
.divListHeading {line-height:1.8em; padding:2em 0 0 1em;}

#cssmenu > ul li {margin-right:2em;}
#cssmenu > ul li a {padding: 10px 12px;}
#cssmenu > ul {font-size:13px; padding:.2em 0 1em 7em;}
.li3 {margin-left:6em;}
#cssmenu > ul li.has-sub ul {width:130px;} 

}

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

#freeButton {width: 120px; margin: 1em 0 0 1em;}
#logo {margin:.5em 1em 0 0; width: 80%}
#toolsButton {width:80% !important;}
#divFreeButton {width:30% !important;}
#divHeaderTools {padding:3em 0 0 0;}
.sliderDiv {min-height:360px !important;}
.bodyDiv {padding:2em 0 0 1em;}

.div400 {float:left !important; width:44% !important;}
.div360 {float:left !important; width:39% !important;}
.offerImage {width:33%; float:left; text-align: center;}
.offerImage img {width:80%;}
h1 {font-size:2.3em;}
#divSalesforce {font-size:.8em; padding:5em 0 0 2em; height:420px !important;}
#divSalesforceLeft {width:38%; padding:1em 0 0 0; font-size:1.4em !important;}
#divResults{height:350px !important; padding-top:5em !important;}
#divResultsRight {width:50%; text-align:center; margin-top:3em !important;}
#divResultsRightLarge {margin-top:2em;}
#divList {height:345px !important; }
#divListLeft {padding:3em 0 0 1.5em !important;}
.divListTitle {font-size:2.5em;}
.divListHeading {font-size:1em; line-height:1.8em; padding:2em 0 0 0;}
.divListHeading:hover {font-size:1.1em;}
#top {display:none}
#bottom {display:block}


#cssmenu > ul li a {padding: 10px 12px; -moz-border-radius:.6em; -webkit-border-radius:.6em; border-radius:.6em;}
#cssmenu > ul {font-size:12px; padding:0 0 1em 2em; !important}
.li3 {margin-left:3em;}
#cssmenu > ul li.has-sub ul {width:120px;} 

}

@media (max-width: 767px) {
	.header {background-color:#fff; /* background-color: #e7e7f3;*/}

p {text-align:left;}
li {text-align:left;} 
ul .li {text-align:left;} 
.sliderDiv {display:none;}
.sliderDivSmall {display:block; height:340px; background-color:#f4f4f4;}
#divSalesforce {padding:1em 0 0 1em; height:540px !important; background-color:rgba(250,250,203,.5)!important;}
.br-wrapper {max-width:400px; margin:auto;}
#freeButton {width:100px; margin:.3em;}
#toolsButton {width:96%;}
#logo {margin:.5em 2em 0 0; width: 100%}
.bodyDiv {width:90%; clear:both; padding:2em 0 0 2em;}
/*.sliderDiv {min-height:260px;}*/
#divFreeButton {width:45%; float:left; padding-left:.5em}
#headerSmallLogo {width:45%; float:right; margin-right:1em;}
#divHeaderTools {width:62%; padding-top: 1.2em; float: left;}
#divHeaderLogo {width:22%;}
.div400 {float:none !important; width:90% !important; padding:0 1em !important;}
.div400 img {width:100% !important;}
.div360 {float:none !important; width:90% !important; padding:0 1em !important;}
	.div360desk {display:none;}
	.div360mobile {display:block;}

.div360 img {display:block; width:50%;}
.offerImage {width:100%; float:none; text-align:center;}
.offerImage img {max-width:180px;}
h1 {font-size:1.5em;}
.indexTitle {font-size:1.8em;}
.indexHeading {font-size:1.1em; font-weight:400; padding: 1em 0 0 .5em; float:left;}	 <!-- not used -->
.indexHeading p {line-height:1em;}	

#SalesforceTitleLarge {display: none;}
#SalesforceTitleSmall {display:block; padding:1em 0 0 2em; font-size:2em;}
.SalesForceHeading p {line-height:1 !important;}
#divSalesforce {padding:1em 0 0 1em: height: 520p !important;}
#divSalesforceLeft {float:none; width:67%; margin:auto; font-size:1em}
#divSalesforceLeft:hover {font-size:120%;}
#divSalesforceRight {float:none; width:60%; margin:auto;}
#divResults {height:440px; text-align:center; padding:2em 0 !important; background-color:rgba(131,188,255,.4);}
#divResults:hover {background-color:rgba(131,188,255,.4);}
#divResultsLeft {float:none; text-align:center; margin:auto;}
#divResultsRight {width:100%;padding:0; margin-top:2em; font-size:.9em; float:none;}
#divResultsRightLarge {display:none;}
#divResultsRightSmall {float:none; width:100%; margin-top:2em; display:block; text-align:center;}
#divList {height:310px !important; background-color:rgba(208,213,236,.4);}
#divListLeft {width:40%; padding:2em 0 0 1em;}
.divListHeading {font-size:1em; padding-top:1em;}
.divListHeading:hover {font-size:1.1em !important;}
/*#divList:hover {background-color:rgba(173,252,146,.4);font-size:1.2%;}*/

.divListTitle {font-size:1.6em; line-height:1.3;}
.li3 {margin-left:7em;}
#divFooter {width:60%;}
#divContact {float:none; width:80%;}
#divForm {float:none; width:90%;}
#top {display:block}
#bottom {display:none}


/*  #cssmenu {background-color:#e7e7f3;}*/

  #cssmenu {width: 70%;}
  #cssmenu > ul {
   /* padding:0 1em; */
    font-size:12px;
    margin-top:-1em;
  }
  #cssmenu > ul li#responsive-tab {
    display: block;
    margin:0;
  }
  #cssmenu > ul li#responsive-tab a {
  clear: both;
    /*background: url('images/menu.png') no-repeat; */
    background-color: transparent;
    background-position: 5% -22%;
  }
  #cssmenu > ul li#responsive-tab a:hover {
    background-color: #fff; -moz-transition:width 1s; -webkit-transition: width 1s; transition:1s;
  }
  #cssmenu > ul li {
    display: none;
    width:100%;
   /* margin-left:1em; */
  }
  #cssmenu > ul li a {
    padding: 10px 20px;
    background-color:rgba(151,210,251,.2);
    font-size:1.2em;

  }
  #cssmenu > ul li a:hover {background-color: #fff; -moz-transition:width 0.5s; -webkit-transition: width 0.5s; transition:0.5s;
  }

#cssmenu > ul li.right {
    float: none;
  }
  #cssmenu > ul li.has-sub {
    position: relative;
 }
  #cssmenu > ul li.has-sub ul {
    display: block;
    position: static;
    border: 0 none;
    width:100%;
    margin-left: 0;
    /*   background-color:#e7e7f3;
  background-color:rgba(151,210,251,.4);*/
  }
  #cssmenu > ul li.has-sub ul li {
    display: block !important;
   /*padding-left:2em; */
   width:100%;
  }
  #cssmenu > ul li.has-sub ul li a span {
    display: block;
    padding-left: 24px;
  }
  #cssmenu > ul li.has-sub > a {
    background-image: none;
    
  }
}
/* Make sure they show even if hidden in mobile view by JS */

@media (min-width: 480px) {

  #cssmenu > ul > li.collapsed {display: block !important; display: inline;zoom: 1;/*  padding-left:2em; */}
  #cssmenu > ul ul li.collapsed {display: block !important;}
}

@media (max-width: 480px) {

	.header {display:none;}
	.headerSmall {display:block; width:100%; height:62px; padding-top:1em; background-color:#fff;}
	.sliderDivSmall {height:280px; background-color:#f4f4f4;}
	.bodyDiv {width:97%; padding:2em 0 1em .5em; clear:both; background-color: #f5fffe;}
	.div360desk {display:none;}
	.div360mobile {display:block;}
	#divSalesforce {height: 400px !important;}
	#divSalesforceLeft {width:80%;padding:0 0 0 1em; !important;}
	#divSalesforceLeft:hover {font-size:100%;}
	#SalesforceTitleSmall {font-size:1.3em; padding:1em 0 0 0; line-height:1.2em}
	.SalesForceHeading {font-size:1em;}
	.SalesForceHeading p {line-height:.8 !important;}
	#divSalesforce img {margin-left:-3em; !important; width:100%;}
	#divSalesforce:hover img {width:140% !important;}
	#divResults {height: 300px !important;}
	#divResults img {width:90%;}
	#divResults:hover img {width:100%;}
	#divList {height:280px !important;}
	#divList:hover {font-size:1em;}
	.divListHeading {font-size:100%;}
	#divList img {width:100% !important;}
	.indexTitle {font-size:1.2em;}
	#divListLeft {display:none;}
	#divListLeftSmall {display:block; padding:2em 0 0 1em; width:40%; float:left;}
	.divListTitle {font-size:1.8em;}
	.li3 {clear:left; margin-left:1em;}
	.divListHeading {display:none;}
	.divListHeadingSmall {display:block; clear:both; font-size:1em; font-weight:200; line-height:2em; padding: 1em 1em 0 2em;}
	#divListRightLarge {display:none;}
	#divListRightSmall {display:block; float: right; width: 52%; display:block; vertical-align:top;}
	h3 {font-size:1em;}
	#SalesforceTitleLarge {display:none;}
	
	.websiteDiv {width: 100%; padding-left:10%;}
			
	#cssmenu ul li {width:100%;}
	#cssmenu ul li.has-sub ul li {/*margin-left:0em;*/ width:100%;	#cssmenu > ul {padding:0;}
	#cssmenu > ul li a {border-radius:0; -moz-border-radius:0; -webkit-border-radius:0;}

}