body {
	margin: 0;
    min-width: 300px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #666;
    background-color: #111;
	padding-top: 0px;
	padding-right: 0px;
	padding-left: 0px;
}
.head-mobile {
        display:none;
    }
.head-home {
/*    position: absolute;
    top: 0;
    left: 0; */
    position: relative;
    max-width: 1900px;
    max-height: 1356px;
    width: 100%;
    height: auto;
    display: block;
}
.head-home img, .head-mobile img {
    width: 100%;
    display: block;
}
.js-off {
    position: absolute;
    top: 120px;
    left: 20px;
    z-index: 100;
    font-size: 1.5em;
    background-color: white;
}
.js-off-m {
    position: absolute;
    top: 10px;
    left: 20px;
    z-index: 100;
    font-size: 1.5em;
    background-color: white;
}
.maincontent {
    min-height: 740px;
    background-color: white;
}
.aboutcontent {
    min-height: 911px;
    background-color: white;
}

.col3 img {
    width: 90%;
    max-width: 518px;
    padding-bottom: 5%;
}
.col1 img {
    width: 70%;
    max-width: 518px;
    padding-top: 5%;
}

.phoneheaderhome {
    position: absolute;
    top: 20px;
    right: 0;
}
.phonecol {
    font-size: 4em;
    color: black;
    font-weight: bold;
}
.phonecol-m {
    display:none;
}
.phone-m {
    font-size: 2em;
    text-align: center;
}
.phone-m a.ui-link {
    text-decoration: none;
}
.address {
    padding: 10% 3%;
}
.cname {
    font-size: 1.8em;
    font-weight: bold;
    color: #FE5420;
}
.call-message {
    font-size: 3em;
    color: black;
}
.col1 ul {
    font-size: 2em;
    text-align: left;
    margin-left: 10%;
}
.col1 ul li {
    display: block;
    line-height: 40px;
	/* box shadow */
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,.4);
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,.4);
	box-shadow: 0 1px 3px rgba(0,0,0,.4);
    text-align: left;
    color: #eee;
    width: 80%;
}
.col1 a {
    text-decoration: none;
    color: #217bf3;
    padding-left: 10%;
    display: block; /* makes link work for entire highlighted area */
}
.col1 a:hover {
    color: white;
    background-color: #217bf3;
}
.col2 p {
    display: block;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    margin-top: 1em;
    margin-bottom: 1em; 
}
.col2 p, .frame-content {
/*    font-family: serif; */
    font-size: 2em;
    text-align: left;
}
.blog-col2, .blog-col3 {
    height: 100%;
}
.frame-content {
    padding-right: 2%;
}
.frame-size {
    width: 100%;
    height: 1000px;
    border:0;
}
.frame-size-custody {
    width: 95%;
    min-width: 300px;
    height: 600px;
    border: 1px;
    border-style: solid;
    padding: 2%;
}
.category {
    color: #666;
    font-size: 2.5em;
    text-align: left;
}
.topic {
    color: #1a7ed7;
    font-family: serif;
    font-size: 3em;
    text-align: left;
}
.bold {
    font-weight: bold;
}
.testimonial {
    color:#2c8de1;
    text-align: left;
    font-family: serif;
    font-style: italic;
    font-size: 1.7em;
    padding: 10%;
}
.col3 {
    padding-left: 1%;
}
.side-header {
    margin-left: 5%; 
    margin-top: 5%;
    margin-bottom: 5%;
    font-size: 1.5em;
    font-weight: bold;
}
.footerbg {
    position: absolute;
    top: 1400px; 
}
.footerbg img {
    width: 100%;
}
#footer {
 /*   background-color: white; */
    position:relative;
}
#mapit {
    display: none;
    background-color: #111;
}
.ui-page-theme-a, .ui-overlay-a {
	background-color: #111;
	text-shadow: none;
}
.nobreak {
    white-space: nowrap;
}
.badge-area {
    display:block;
    padding-top: 30px;
}
.badge-area .ui-link:hover {
    background-color: white;
}
.badge-area-m {
    display:none;
}
.box {
    background: #35A014;
    padding: 10px 0;
    width: 400px;
    margin: 0 auto;
}
.bullets {
    font-size: 1.5em;
    color: white;
    width: 300px;
    text-align: left;
    margin: 0 auto;
    line-height: 1.7em;
}
h2 {
    font-size: 2em;
    color: #35A014;
}
.question {
    color: #35A014;
    font-size: larger;
    font-weight: bold;
}
.coltech {
    text-align: center;
    font-size: 1.5em;
}
.coltech p {
    text-align: left;
    margin-left: 5%;
}
.coltech img {
    width: 100%;
}
.coltech h1 {
    font-size: 2em;
    text-align: left;
    margin-left: 5%;
}
.colorcharts {
    max-width: 1800px;
    margin-left: 3%;
}
.sherwin {
    color: brown;
    width: 50%;
    float: left;
}
.note {
    float: right;
    width: 44%;
    text-align: left;
    padding: 0 3% 3%;
}
.report img {
    width: 300px;
    position: relative;
    top: -50px;
}
.message {
    font-size: 3em;
    text-align: center;
    padding-top: 5%;
}

/************************************************************************************
CONTACT FORM
*************************************************************************************/
.ui-panel {
    width: 25em !important;
    border-radius: 25px;
}
.ui-panel-dismiss-position-right.ui-panel-dismiss-open {
left: -25em!important;
right: 25em!important; }
.ui-panel-inner {
    border-radius: 25px;
    border: #35A014 4px solid;
}
.ui-panel-inner img {
    width: 100%;
}
.ui-panel h1 {
    color:#35A014;
    text-align: center;
}

/************************************************************************************
MENU
*************************************************************************************/
#menu {
    position:absolute;
    top: 0;
    padding-top: 40px;
    width: 100%;
    height: 40px;
    font-size: 2em;
    z-index: 15;
}
#menu ul li {
    float: left;
    display: block;
    text-align: center;
    width: 200px;
    height: 100%;
    line-height: 40px;
    	/* rounded corner */
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	/* box shadow */
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,.4);
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,.4);
	box-shadow: 0 1px 3px rgba(0,0,0,.4);
    margin-left: 10px;

}
#menu ul li:hover {
    background-color: yellow;
    height: 40px;
}
#menu a {
    text-decoration: none;
    color: #FFF;
    display: block; /* makes link work for entire highlighted area */
}
#menu a:hover {
    color: #FE5420;
}

.red {
	background-color: #F30;
}
#menu a.current-page {
    color: #CCC;
}
.col1 a.current-page {
    color: grey;
}
.col1 a.current-page:hover {
    color: yellow;
}
#menu ul li ul {
  font-size: 0.7em;
  padding: 0;
  top: 48px;
  left: 0;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  display: none;
  opacity: 0;
  visibility: hidden;
  -webkit-transiton: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -transition: opacity 0.2s;
}
#menu ul li ul li { 
  background: #3567bc;
  display: block; 
  color: #fff;
  text-shadow: 0 -1px 0 #000;
  width: 280px;
  height: 40px;
  border-radius: 0;
}
#menu ul li ul li:hover {  background: #2a68ed; }
#menu ul li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
  color:#666;
  z-index:10;
}
#menu ul li.criminal-m {
    width: 320px;
}
#menu ul li.criminal-m ul li {
    width: 300px;
}
#menu ul li.family-m {
    width: 300px;
}
#mobile-menu {
    position:relative;
    top:0;
    right: 0;
    z-index: 20;
    width: 100%;
}
/************************************************************************************
WRAPPER
*************************************************************************************/
#wrapper {
    width: 1900px;
    margin: 0 auto;
    background: white;
}
#header {
    position: relative;
    height: 100%;
}
.banner {
    position: relative;
}
.banner img {
    max-width: 100%;
}
.col1, .col2, .col3 {
    position: relative;
    float: left;
    text-align: center;
    background-color: white;
/*    height: 200%; */
    padding-top: 3%;
    z-index: 10;
}
.col2 {
    width: 47%;
    padding: 3% 3% 1%;
}
.col3 {
    width: 46%;
}

.footer1 {
    background: linear-gradient(#8FCA9A,#35A014);
    border-top: solid #35a014 3px;
    padding-top: 5px;
    clear: both;
}
.footer1 img {
    max-width: 100%;
    display: block;
 margin: 0 auto;
}
.footer1-text {
/*    position: absolute;
    bottom: 50px;
    left: 25%; */
    text-align: center;
    color: white;
    font-size: 4em;
}
.footer-bg img {
    min-height: 300px;
}
.footer2 {
    position:relative;
    background-color: #666;
    width: 100%;
    height: 50px;  /* was 100px */
    text-align: center;
    padding-top: 3%;
}
.footer2-text {
    color:#818181;
    font-size: 1.5em;
    padding-top: 10px;
/*    position: absolute; */
    top: 40px;
    left: 38%;
}
.footer2 img {
    position: absolute;
    top: 10px;
    right: 50px;
}
.footer2-text .nobreak .ui-link {
    color: #818181;
    text-decoration: none;
}
.footer2-text .nobreak .ui-link:hover {
    color: #FFF;
}

.wotlogo img {
    width: 200px;
    padding-top: 30px;
}
.center {
    text-align: center;
}
/************************************************************************************
smaller than 1900  RESPONSIVE DESIGN
*************************************************************************************/
@media screen and (max-width: 1900px) {

    body {
        background-color: white;
    }
    
	/* pagewrap */
	#wrapper {
		width: 100%;
	}
    #menu {
        font-size: 1.5em;
        padding-top: 2.5%;
    }
    #menu ul li {
        width: 12%;
    }
    #menu ul li.criminal-m {
        width: 15%;
    }
    #menu ul li.criminal-m ul li {
        width: 90%;
    }
    #menu ul li.family-m {
        width: 14%;
    }
    #menu ul li.family-m li {
        width: 90%;
    }

}
/************************************************************************************
smaller than 1700  
*************************************************************************************/
@media screen and (max-width: 1700px) {
    .footer1-text {
        width: 50%;
        font-size: 3em;
    }
    .col2 p {
        font-size: 1.7em;
    }
    .no1700 {
        display:none;
    }

}
/************************************************************************************
smaller than 1400  
*************************************************************************************/
@media screen and (max-width: 1400px) {
    .col1 ul {
        font-size: 1.5em;
    }
    .footer1-text {
        font-size: 2em;
    }
    .no1400 {
        display:none;
    }
}
/************************************************************************************
smaller than 1300  
*************************************************************************************/
@media screen and (max-width: 1300px) {
    .no1300 {
        display:none;
    }
    .frame-size {
        height: 900px;
    }
    .col2about p {
        font-size: 1.5em;
    }
    .coltech {
        font-size: 1em;
    }

}

/************************************************************************************
smaller than 1100  
*************************************************************************************/
@media screen and (max-width: 1100px) {
    #menu {
        font-size: 1em;
        padding-top: 1.5%;
    }
    #menu ul li ul {
        font-size: 0.9em;
    }
    .footer1-text {
        font-size: 1.5em;
    }
    .map-button  img {
        width: 100px;
    }
    .col1 {
        display: none;
    }
/*    .col2 {
        width: 50%;
        padding-left: 5%;
        padding-right: 5%;
    } */
    .col2 p {
        font-size: 1.5em;
    }
 /*   .col3 {
        width: 39%;
    } */
    .badge-area-m {
        display: block;
    }

    .wotlogo {
        display:none;
    }
    .footer2 {
        height: 50px;
        padding-top: 5%;
    }
    .footer2-text {
        position:relative;
        padding-top: 0;
        top: 0;
        left: 0;
    }
    .on1100 {
        display:block;
    }

}
/************************************************************************************
smaller than 900  
*************************************************************************************/
@media screen and (max-width: 900px) {
    .phoneheaderhome {
        display:none;
    }
    .col2 {
        width: 90%;
        padding-left: 5%;
        padding-right: 5%;
        height:auto;
    }
    .col3 {
        width: 100%;
        height:auto;
    }
    .frame-size {
        height: 1940px;
    }
    .frame-size-custody {
        height: 1490px;
        border: 0;
        padding: 1%;
    }
    .on900 {
        display:block;
    }
    .no900 {
        display:none;
    }
    .on900il {
        display:inline;
    }
    .ui-panel {
        width: 20em !important;
    }
    .ui-panel-dismiss-position-right.ui-panel-dismiss-open {
        left: -20em!important;
        right: 20em!important; 
    }
    .box {
        margin-bottom: 2%;
    }
    .message {
        font-size: 1.5em;
    }
    .sherwin {
        width: 100%;
        float: none;
        margin-left: 5%;
    }
    .note {
        width: 90%;
        float:none;
        padding-top: 1em;
        padding-left: 5%;
    }

}
/************************************************************************************
smaller than 800  
*************************************************************************************/
@media screen and (max-width: 800px) {
    .frame-size {
        height: 2090px;
    }
}
/************************************************************************************
smaller than 720  
*************************************************************************************/
@media screen and (max-width: 720px) {
    .frame-size {
        height: 2250px;
    }

   
}
/************************************************************************************
smaller than 700  
*************************************************************************************/
@media screen and (max-width: 700px) {
    .head-home {
        display:none;
    }
    .head-mobile {
        display:block;
    }
     .phonecol {
        display:none;
    }
    .phonecol-m {
        display:block;
    }
    .phonecol-m a.ui-link {
        text-decoration: none;
        font-size: 3em;
    }
    .frame-size-custody {
        height: 1660px;
    }
   
}
/************************************************************************************
smaller than 660  
*************************************************************************************/
@media screen and (max-width: 660px) {
    .frame-size {
        height: 2450px;
    }
   
}

/************************************************************************************
smaller than 600  
*************************************************************************************/
@media screen and (max-width: 600px) {
    .frame-size {
        height: 1650px;
    }
    .frame-size-custody {
        height: 1150px;
    }
    .footer2-text {
    font-size: 1em;
    }

}
/************************************************************************************
smaller than 520  
*************************************************************************************/
@media screen and (max-width: 520px) {
    .frame-size {
        height: 1900px;
    }
    .frame-size-custody {
        height: 1300px;
    }
    .frame-content {
        font-size: 1.5em;
    }

}
/************************************************************************************
smaller than 420  
*************************************************************************************/
@media screen and (max-width: 420px) {
    .frame-size {
        height: 2250px;
        min-width: 300px;
    }
    .frame-size-custody {
        height: 1450px;
        min-width: 300px;
    }

}

