html,
body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    font-family: "pragmatica-web",sans-serif;
}

    body::after {
        content: "";
        background: url(../images/body_bg_left2.png) no-repeat top left;
        background-position-y: 0px;
        background-attachment: fixed;
        opacity: 0.5;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        position: absolute;
        z-index: -1;
    }

.chart rect {
  fill: steelblue;
}

.chart text {
  fill: white;
  font: 10px sans-serif;
  text-anchor: middle;
}

/* System colors, size and font types */
.titleType {
    font-family: "lexia",serif;
}

.m_titleType
{
    font-family: "lexia",serif;
    width: 250px;
    margin: 0 auto;
}

.contentType {
    font-family: "pragmatica-web",sans-serif;
}

.pinkText {
    color: #dd3782;
}

.pinkBg {
    background-color: #dd3782;
}

.blueText {
    color: #239dd1;
}

.blueBg {
    background-color: #239dd1;
}

.yellowText {
    color: #ffcb05;
}

.yellowBg {
    background-color: #ffcb05;
}

.greenText {
    color: #70af18;
}

.greenBg {
    background-color: #70af18;
}

.orangeText {
    color: #f16a10;
}

.orangeBg {
    background-color: #f16a10;
}

.purpleText {
    color: #8c3696;
}

.purpleBg {
    background-color: #8c3696;
}

.redText {
    color: #ed1c24;
}

.redBg {
    background-color: #ed1c24;
}

.lightText {
    color: #a9a9a9;
}

.lightBg {
    background-color: #e5f3fc;
}

.whiteText {
    color: white;
}

.img_100_round {
	width:100px; border-radius:50% 50% 50% 50%; margin-right:10px; float:left;
}


.orange_didider {
    border-top: 1px solid #cacaca;
    border-bottom: 15px solid #ffcb05;
    padding: 3px;
    clear: both;
    width: 100%;
    margin: 0px auto;
}
.blue_didider {
    border-top: 1px solid #cacaca;
    border-bottom: 15px solid #239dd1;
    padding: 3px;
    clear: both;
    width: 100%;
    margin: 0px auto;
}
.orange_didider {
    border-top: 1px solid #cacaca;
    border-bottom: 15px solid #f16a10;
    padding: 3px;
    clear: both;
    width: 100%;
    margin: 0px auto;
}


.green_divider {
    border-top: 4px dotted #70af18;
    border-bottom: 1px solid #cacaca;
    padding: 3px;
    clear: both;
    width: 70%;
    margin: 10px auto;
}

.red_divider {
    border-top: 4px dotted #ed1c24;
    border-bottom: 1px solid #cacaca;
    padding: 3px;
    clear: both;
    width: 70%;
    margin: 10px auto;
}

.purple_divider {
    border-top: 4px dotted #8c3696;
    border-bottom: 1px solid #cacaca;
    padding: 3px;
    clear: both;
    width: 70%;
    margin: 10px auto;
}

.pink_divider {
    border-top: 4px dotted #dd3782;
    border-bottom: 1px solid #acacac;
    padding: 3px;
    clear: both;
    width: 70%;
    margin: 10px auto;
}

.darkBackground {
    background-color: #000000;
}

.orangeDotBackground {
    background: url(../images/home_orange_dot_img.png);
}

.greenStripBackground {
    background: url(../images/home_green_stripes_img.png);
}

.puzzleBackground {
    background: url(../images/puzzlegirl.jpg);
}

.moneyBackground {
    background: url(../images/money.jpg);
}

.resortBackground1 {
    background: url(../images/resort1.jpg);
}

.resortBackground2 {
    background: url(../images/resort2.jpg);
}

.faqBackground {
    background: url(../images/faq_img.jpg);
}

.materialBackground {
    background: url(../images/info_img.jpg);
}

.charitableHeart {
    background: url(../images/color_test_img.jpg);
}

.applyBackground {
    background: url(../images/apply_img.jpg);
}
.toolsBackground {
	background:url(../images/tool_img.jpg);
}
.toolsBackground2 {
	background:url(../images/tools_pct.jpg);
}
.proBackground {
	background:url(../images/fish.jpg);
}
.proBackground2 {
	background:url(../images/suit.jpg);
}
.foundBackground {
	background:url(../images/trova.jpg);
}
.foundBackground2 {
	background:url(../images/trova_women.jpg);
}
.serveBackground {
	background:url(../images/money.jpg);
}
.serveBackground2 {
	background:url(../images/puzzlegirl.jpg);
}
.profitsBackground {
	background:url(../images/women_money.png);
}
.profitsBackground2 {
	background:url(../images/money2.jpg);
}
.whyBackground {
	background:url(../images/high5.jpg);
}
.whyBackground2 {
	background:url(../images/looking.jpg);
}
.center {
    text-align: center;
}
.italic { font-style:italic;}
.bold {
    font-weight: bold;
}

.text_28 {
    font-size: 4em;
    line-height: 1.5em;
}

.text_26 {
    font-size: 2.5em;
    line-height: 1.5em;
}

.text_22 {
    font-size: 22px;
    line-height: 1.5em;
}
.text_18 {
    font-size: 18px;
    line-height: 1.5em;
}
.text_16 {
    font-size: 16px;
    line-height: 1.5em;
}
.text_12 {
    font-size: 12px;
}

.homeDivTop {
}

.logoMain {
    position: absolute;
}

    .logoMain img {
        position: absolute;
        top: 0px;
        left: 0px;
    }

    .logoMain div {
        position: absolute;
        top: 100px;
        left: 50px;
        width: 400px;
    }

.nav-justified {
    padding-top: 150px;
}

/*need to define different heights for different width of the window*/
.homeDiv {
    height: 120px;
    padding-top: 20px;
    padding-bottom: 10px;
}

.centerText {
    text-align: center;
}

.italicText {
    font-style: italic;
}

/* Wrapper for page content to push down footer */
#wrap {
    min-height: 100%;
    height: auto;
    /* Negative indent footer by its height */
    margin: 0 auto -245px;
    padding: 0 0 245px 0;
}

.contentHolder {
    width: 100%;
    margin: 0 auto; /* just in case the make it really big otherwise use custom sizes below */
}

/* Set the fixed height of the footer here */
.footer {
    height: 245px;
    clear: both;
}

    .footer h2 {
        font-variant: small-caps;
        font-family: "lexia",serif;
    }

    .footer a {
        color: #C3C3C3;
        font-size: 1em;
        line-height: 1.0;
    }

        .footer a:hover {
            color: #3C3C3C;
        }

.leftfooter {
    float: left;
    text-align: center;
    width: 33%;
}

    .leftfooter h2 {
        font-variant: small-caps;
    }

.middlefooter {
    float: left;
    text-align: center;
    width: 33%;
}

    .middlefooter h2 {
        font-variant: small-caps;
    }

.rightfooter {
    float: right;
    text-align: center;
    width: 33%;
}

    .rightfooter h2 {
        font-variant: small-caps;
    }

h1 {
    font-weight: bolder;
    font-size: 2em;
    margin: 0px;
    padding-top: 10px;
}

h2 {
    text-align: center;
}

.pagetop {
    text-align: center;
}

.logo {
    float: left;
}

.title {
    text-align: center;
    display: inline-block;
}

.login {
    float: right;
}

.clearall {
    clear: both;
}

.copyright {
    text-align: center;
    color: white;
}

#sub-body {
    clear: both;
    background-color: #e7f5fd;
    min-height: 500px;
}

#home_page {
    text-align: center;
}
.one_third {
	float:left; width:33%;
}
#loginform {
    padding: 20px;
    width: 500px;
    min-height: 650px;
    margin-left: auto;
    margin-right: auto;
}

    #loginform th {
        text-align: right;
    }

.trainerhead {
    height: 200px;
    background-image: url(../images/trainerhead.png);
    text-align: center;
    font-size: 1.3em;
}

.trainerdiv {
    float: left;
    width: 230px;
    height: 400px;
    overflow: hidden;
    /* background-image: url(../images/user-bg.png);*/
	margin-bottom:20px;
	border-radius:15px;
	margin:10px;
	
}
.trainerdiv img {
	width:200px;
	border-top-left-radius:15px; 
	border-top-right-radius:15px;
	border:1px solid #cacaca;
	margin-top:15px;
}

#usersList {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    border-collapse: collapse;
    overflow: hidden;
    table-layout: fixed;
    border: 1px solid #97c23d;
}

    #usersList td {
        overflow: hidden;
        clip: rect(0px, 0px, 0px, 0px);
        font-size: .95em;
        padding: 3px 0px 0px 2px;
        border: 1px solid #97c23d;
    }

    #usersList th {
        text-align: center;
        font-size: 1.1em;
        overflow: hidden;
        clip: rect(0px, 0px, 0px, 0px);
        border: 1px solid #97c23d;
    }

.recoverForm {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    width: 400px;
    min-height: 500px;
    border-collapse: collapse;
    overflow: hidden;
}

    .recoverForm table {
        table-layout: fixed;
        border: none;
    }

    .recoverForm td {
        overflow: hidden;
        clip: rect(0px, 0px, 0px, 0px);
        font-size: .95em;
        padding: 3px 0px 0px 2px;
    }

    .recoverForm th {
        text-align: right;
        font-size: 1.1em;
        overflow: hidden;
        clip: rect(0px, 0px, 0px, 0px);
    }

#userdocsList {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    border-collapse: collapse;
    overflow: hidden;
    table-layout: fixed;
    border: 1px solid #97c23d;
}

    #userdocsList td {
        overflow: hidden;
        clip: rect(0px, 0px, 0px, 0px);
        font-size: .95em;
        padding: 3px 0px 0px 2px;
        border: 1px solid #97c23d;
    }

    #userdocsList th {
        font-size: 1.1em;
        overflow: hidden;
        clip: rect(0px, 0px, 0px, 0px);
        border: 1px solid #97c23d;
    }

.userdocForm {
    width: 350px;
    margin-left: auto;
    margin-right: auto;
}

    .userdocForm th {
        text-align: right;
        font-weight: bold;
    }

.userForm {
    width: 900px;
    margin-left: auto;
    margin-right: auto;
}

    .userForm th {
        text-align: right;
        font-weight: bold;
    }

#userDataForm
{

}
#userDataForm  th
{
    text-align:right;
    font-weight:bold;
    width:200px;
}

.error {
    color: red;
    text-align: center;
}

/* trainer section */
.trainerHead {
    width: 100%;
    height: 200px;
    background-color: #d35d1b;
}

.trainerHeadImage {
    margin-left: 50px;
    margin-top: 20px;
    width: 190px;
    float: left;
}

    .trainerHeadImage img {
        width: 180px;
        box-shadow: 8px 8px 5px #565656;
    }

.trainerHeadDetails {
    float: left;
    margin-top: 20px;
    margin-left: 15px;
    width: 33%;
}

.trainerHeadSocial {
    float: right;
    margin-top: 30px;
}

.trainerHeadSocialLogo {
}

    .trainerHeadSocialLogo img {
        width: 125px;
        margin-right: 20px;
    }

    .trainerHeadSocialLogo img {
    }

.trainerBiz {
    float: left;
    width: 50%;
    overflow: hidden;
}

.trainerMap {
    padding-top: 10px;
    float: right;
    max-width: 50%;
}

.trainerBio {
    float: right;
    width: 50%;
}

.pcptMaterialRow {
    clear: both;
    width: 100%;
}

.pcptMaterialTitle {
    font-size: 2.0em;
    font-weight: bolder;
    clear: both;
    text-align: center;
    width: 100%;
}

.pcptMaterial {
    background: url(../images/home_green_stripes_img.png);
    height: 110px;
    width: 100%;
}

.pcptMaterialDetail {
    width: 75%;
    margin: 0 auto;
}

    .pcptMaterialDetail img {
        float: left;
        padding: 10px 5px 5px 5px;
    }

.rowDiv {
    clear: both;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}

.leftImage {
    float: left;
    height: 100%;
    width: 40%;
    padding-right: 20px;
}

.rightImage {
    float: right;
    height: 100%;
    width: 40%;
    padding-left: 20px;
}

.rightWords {
    float: right;
    height: 100%;
    width: 60%;
    padding-left: 20px;
}

.leftWords {
    float: left;
    height: 100%;
    width: 60%;
    padding-right: 20px;
}
.text_home{ font-size:19px; line-height:2em; padding-top:20px;}

.expertsTitle {
    margin-top: 15px;
    margin-left: 15px;
    font-weight: bold;
    color: white;
}

.expertsLeft {
    clear: left;
    float: left;
    width: 50%;
    background-color: #70af18;
}

    .expertsLeft p {
        margin-left: 100px;
        padding-left: 15px;
        padding-right: 20px;
        color: black;
        background-color: white;
    }

    .expertsLeft img {
        width: 125px;
        float: left;
    }

.expertsRight {
    clear: right;
    float: left;
    width: 50%;
    background-color: #8c3696;
}

    .expertsRight p {
        padding-left: 140px;
        padding-right: 20px;
    }

    .expertsRight img {
        width: 125px;
        float: left;
    }

.bookLeft {
    clear: left;
    float: left;
    width: 50%;
}

    .bookLeft p {
        padding-left: 140px;
        padding-right: 20px;
    }

    .bookLeft img {
        width: 125px;
        float: left;
    }

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

    .bookRight p {
        padding-left: 140px;
        padding-right: 20px;
    }

    .bookRight img {
        width: 125px;
        float: left;
    }
    .bookRight li {
        padding-bottom: 10px;
    }
	
.sheetOne {
    clear: left;
    float: left;
    width: 50%;
}

    .sheetOne p {
        padding-left: 140px;
        padding-right: 20px;
    }

    .sheetOne img {
        width: 650px;
        float: left;
    }

.circleRed50 {
    float: left;
    border: solid 3px;
    border-color: #cacaca;
    border-radius: 50%;
    background-color: #ed1c24;
    height: 50px;
    width: 50px;
    margin-right: 10px;
    text-align: center;
    font-size: 2.5em;
}

.circlePurple50 {
    float: left;
    border: solid 3px;
    border-color: #cacaca;
    border-radius: 50%;
    background-color: #8c3696;
    height: 50px;
    width: 50px;
    margin-right: 10px;
    text-align: center;
    font-size: 2.5em;
}

.circleOrange50 {
    float: left;
    border: solid 3px;
    border-color: #cacaca;
    border-radius: 50%;
    background-color: #f16a10;
    height: 50px;
    width: 50px;
    margin-right: 10px;
    text-align: center;
    font-size: 2.5em;
}

.circleGreen50 {
    float: left;
    border: solid 3px;
    border-color: #cacaca;
    border-radius: 50%;
    background-color: #70af18;
    height: 50px;
    width: 50px;
    margin-right: 10px;
    text-align: center;
    font-size: 2.5em;
}

.circleYellow50 {
    float: left;
    border: solid 3px;
    border-color: #cacaca;
    border-radius: 50%;
    background-color: #ffcb05;
    height: 50px;
    width: 50px;
    margin-right: 10px;
    text-align: center;
    font-size: 2.5em;
}

.circleBlue50 {
    float: left;
    border: solid 3px;
    border-color: #cacaca;
    border-radius: 50%;
    background-color: #239dd1;
    height: 50px;
    width: 50px;
    margin-right: 10px;
    text-align: center;
    font-size: 2.5em;
}

.circlePink50 {
    float: left;
    border: solid 3px;
    border-color: #cacaca;
    border-radius: 50%;
    background-color: #dd3782;
    height: 50px;
    width: 50px;
    margin-right: 10px;
    text-align: center;
    font-size: 2.5em;
}
.circlePurple150 {
    float: left;
    border: solid 3px;
    border-color: #cacaca;
    border-radius: 50%;
    background-color: #8c3696;
    height: 150px;
    width: 150px;
    margin-right: 10px;
    text-align: center;
}
.circlePink200 {
    float: left;
    border: solid 3px;
    border-color: #cacaca;
    border-radius: 50%;
    background-color: #dd3782;
    height: 200px;
    width: 200px;
    margin-right: 10px;
    text-align: center;
}
.circleOrange200 {
    float: left;
    border: solid 3px;
    border-color: #cacaca;
    border-radius: 50%;
    background-color: #f16a10;
    height: 200px;
    width: 200px;
    margin-right: 10px;
    text-align: center;
}
.circleBlue200 {
    float: left;
    border: solid 3px;
    border-color: #cacaca;
    border-radius: 50%;
    background-color: #239dd1;
    height: 200px;
    width: 200px;
    margin-right: 10px;
    text-align: center;
}
.circleRed200 {
    float: left;
    border: solid 3px;
    border-color: #cacaca;
    border-radius: 50%;
    background-color: #ed1c24 ;
    height: 200px;
    width: 200px;
    margin-right: 10px;
    text-align: center;
}
.circlePurple200 {
    float: left;
    border: solid 3px;
    border-color: #cacaca;
    border-radius: 50%;
    background-color: #8c3696;
    height: 200px;
    width: 200px;
    margin-right: 10px;
    text-align: center;
}

.circleGreen200 {
    float: left;
    border: solid 3px;
    border-color: #cacaca;
    border-radius: 50%;
    background-color: #70af18;
    height: 200px;
    width: 200px;
    margin-right: 10px;
    text-align: center;
}
.circleYellow200 {
    float: left;
    border: solid 3px;
    border-color: #cacaca;
    border-radius: 50%;
    background-color: #ffcb05;
    height: 200px;
    width: 200px;
    margin-right: 10px;
    text-align: center;
}

.circleRedLarge {
    float: left;
    border: solid 3px;
    border-color: #cacaca;
    border-radius: 50%;
    background-color: #ed1c24;
    height: 300px;
    width: 300px;
    margin-right: 10px;
    text-align: center;
    font-size: 2.5em;
}

.circlePurpleLarge {
    float: left;
    border: solid 3px;
    border-color: #cacaca;
    border-radius: 50%;
    background-color: #8c3696;
    height: 300px;
    width: 300px;
    margin-right: 10px;
    text-align: center;
    font-size: 2.5em;
}

.circleOrangeLarge {
    float: left;
    border: solid 3px;
    border-color: #cacaca;
    border-radius: 50%;
    background-color: #f16a10;
    height: 300px;
    width: 300px;
    margin-right: 10px;
    text-align: center;
    font-size: 2.5em;
}

.circleGreenLarge {
    float: left;
    border: solid 3px;
    border-color: #cacaca;
    border-radius: 50%;
    background-color: #70af18;
    height: 300px;
    width: 300px;
    margin-right: 10px;
    text-align: center;
    font-size: 2.5em;
}
/*Circle220 defined for Join main page*/
.circlePink220 {
    float: left;
    border: solid 3px;
    border-color: #cacaca;
    border-radius: 50%;
    background-color: #dd3782;
    height: 220px;
    width: 220px;
    margin-right: -25px;
    text-align: center;
	padding-top:10px;
}

.circlePurple220 {
    float: left;
    border: solid 3px;
    border-color: #cacaca;
    border-radius: 50%;
    background-color: #8c3696;
    height: 220px;
    width: 220px;
    margin-right: -25px;
    text-align: center;
	padding-top:10px;
}
.circleBlue220 {
    float: left;
    border: solid 3px;
    border-color: #cacaca;
    border-radius: 50%;
    background-color: #239dd1;
    height: 220px;
    width: 220px;
    margin-right: -25px;
    text-align: center;
	padding-top:10px;
}
.circleRed220 {
    float: left;
    border: solid 3px;
    border-color: #cacaca;
    border-radius: 50%;
    background-color: #ed1c24 ;
    height: 220px;
    width: 220px;
    margin-right: -25px;
    text-align: center;
	padding-top:10px;
}
.circleYellow220 {
    float: left;
    border: solid 3px;
    border-color: #cacaca;
    border-radius: 50%;
    background-color: #ffcb05 ;
    height: 220px;
    width: 220px;
    margin-right: -25px;
    text-align: center;
	padding-top:10px;
}
.circleGreen220 {
    float: left;
    border: solid 3px;
    border-color: #cacaca;
    border-radius: 50%;
    background-color: #70af18;
    height: 220px;
    width: 220px;
    margin-right: -25px;
    text-align: center;
	padding-top:10px;
}
/*end of Circle defined for Join main page */
.circleYellowLarge {
    float: left;
    border: solid 3px;
    border-color: #cacaca;
    border-radius: 50%;
    background-color: #ffcb05;
    height: 300px;
    width: 300px;
    margin-right: 10px;
    text-align: center;
    font-size: 2.5em;
}

.circleBlueLarge {
    float: left;
    border: solid 3px;
    border-color: #cacaca;
    border-radius: 50%;
    background-color: #239dd1;
    height: 300px;
    width: 300px;
    margin-right: 10px;
    text-align: center;
    font-size: 2.5em;
}

.circlePinkLarge {
    float: left;
    border: solid 3px;
    border-color: #cacaca;
    border-radius: 50%;
    background-color: #dd3782;
    height: 300px;
    width: 300px;
    margin-right: 10px;
    text-align: center;
    font-size: 2.5em;
}

.circleClear400 {
    float: left;
    height: 400px;
    width: 400px;
    margin-top: 0px;
    margin-left: 10px;
    border-radius: 50%;
    background-color: #70af18;
    border: solid 3px;
    border-color: #929292;
}

.circleClear {
    float: left;
    height: 300px;
    width: 300px;
    margin-top: 100px;
    margin-left: 10px;
    border-radius: 50%;
    background-color: #a037d4;
    border: solid 3px;
    border-color: #929292;
}

.circleClear2 {
    float: left;
    height: 200px;
    width: 200px;
    margin-left: 250px;
    border-radius: 50%;
    background-color: #70af18;
    border: solid 3px;
    border-color: #929292;
}
.circleClear3 {
    float: left;
    height: 300px;
    width: 300px;
    border-radius: 50%;
    background-color: #fff;
    border: solid 3px;
    border-color: #929292;
}
.circleClear4 {
    float: left;
    height: 180px;
    width: 180px;
    border-radius: 50%;
    background-color: #fff;
    border: solid 3px;
    border-color: #929292;
}
.circleDawn {
    float: left;
    height: 300px;
    width: 300px;
    margin: 0 auto;
    border-radius: 50%;
    background: url(../images/circle_dawn_img.png) center;
}

.circleLaura {
    float: right;
    height: 200px;
    width: 200px;
    margin: 0 auto;
    border-radius: 50%;
    border: solid 1px;
    border-color: #929292;
    background: url(../images/Laura.jpg) no-repeat;
}

.circleStacy {
    float: right;
    height: 200px;
    width: 200px;
    margin: 0 auto;
    border-radius: 50%;
    border: solid 1px;
    border-color: #929292;
    background: url(../images/Stacy.jpg) no-repeat;
}

.circleSutton {
    float: right;
    height: 200px;
    width: 200px;
    margin: 0 auto;
    border-radius: 50%;
    border: solid 1px;
    border-color: #929292;
    background: url(../images/Sutton.jpg) no-repeat;
}

.circleTony {
    float: left;
    height: 200px;
    width: 200px;
    margin: 0 auto;
    border-radius: 50%;
    border: solid 1px;
    border-color: #929292;
    background: url(../images/Tony.jpg) center;
}

.circleYan {
    float: right;
    height: 200px;
    width: 200px;
    margin: 0 auto;
    border-radius: 50%;
    border: solid 1px;
    border-color: #929292;
    background: url(../images/Yan.jpg) center;
}
.circleLee {
    float: left;
    height: 200px;
    width: 200px;
    margin: 0 auto;
    border-radius: 50%;
    border: solid 1px;
    border-color: #929292;
    background: url(../images/Lee.jpg) center;
}

.circleCorbin {
    float: left;
    height: 200px;
    width: 200px;
    margin: 0 auto;
    border-radius: 50%;
    background-color: #a037d4;
    /*border: solid 1px;*/
    border-color: #929292;
    background: url(../images/Corbin.jpg) center;
}

.fullRow {
    height: 30px;
    width: 100%;
    clear: both;
}

.guystandingDiv {
    position: absolute;
    top: 25px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: url(../images/body_bg_left2.png) no-repeat;
    z-index: -1;
}

.showdowDiv1 {
    position: absolute;
    top: 63px;
    right: 30px;
    height: 10px;
    width: 270px;
    background: url(../images/liftedshadow_medium.png) no-repeat;
}

.showdowDiv2 {
    position: absolute;
    top: 116px;
    right: 30px;
    height: 10px;
    width: 270px;
    background: url(../images/liftedshadow_medium.png) no-repeat;
}

.loginDiv {
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    font-size: 16px;
    font-family: "lexia",serif;
    color: black;
    display: inline-block;
    background-color: #ed1c24; /*#8c3696;*/
    position: absolute;
    top: 17px;
    right: 30px;
    height: 46px;
    width: 252px;
    margin: 0px;
    line-height: 46px;
    text-align: center;
    box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.6);
    border-radius: 0px;
    border: 0px solid rgb(255, 203, 5);
}

.orangeRecDiv {
    position: absolute;
    right: 5px;
    top: 0px;
    height: 185px;
    width: 180px;
    background-color: #ffcb05; /*#f16a10;*/
}

.loginDiv a {
    color: white;
}

.loginDiv visited {
    color: black;
}

.learnMoreDiv {
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    font-size: 18px;
    font-family: "lexia",serif;
    color: black;
    display: inline-block;
    background-color: #70af18;
    position: absolute;
    top: 70px;
    right: 30px;
    height: 46px;
    width: 252px;
    margin: 0px;
    line-height: 46px;
    text-align: center;
    box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.6);
}


/* main menu when selected */
.nav-justified > .active > a, .nav-justified > .active > a:hover, .nav-justified > .active > a:focus {
    color: #70af18;
    font-size: 1.1em;
    font-weight: bold;
    font-family: "lexia",serif;
}

.nav-justified > li > a {
    color: black;
    font-size: 1.1em;
    font-weight: normal;
    font-family: "lexia",serif;
}

.nav-justified > li:last-child > a {
    font-size: 1.1em;
}

.nav > li > a {
    padding: 5px 5px;
}

.dropdown-menu > li > a {
    text-align: center;
    font-family: "lexia",serif;
    font-size: 1.1em;
}

.colorTestTable {
    width: 940px;
    border: 0px;
}

    .colorTestTable th {
        text-align: center;
        font-weight: bolder;
        font-size: 1.1em;
        padding: 10px;
    }

    .colorTestTable td {
        width: 130px;
        height: 75px;
        overflow: hidden;
    }

.colorTableDiv {
    text-align: center;
}

    .colorTableDiv select, .colorTableDiv input {
        width: 75px;
    }

/* Color test table text */
.color_brown {
	background-color:#704a18;
}

.bg_purple {
	background-color: #8c3696;

}

.light_border {
	border:2px solid #acacac;
}

.color_red, .redheadstyle {
    background-color: #ed1c24;
}
.color_red_light {
	background-color: #f9d9d9;
}

.color_orange, .orangeheadstyle {
    background-color: #f16a10;
}
.color_orange_light {
	background-color: #f7c8b2;
}

.color_yellow, .yellowheadstyle {
    background-color: #ffcb05;
}
.color_yellow_light {
	background-color: #fdfdec;
}

.color_green, .greenheadstyle {
    background-color: #70af18;
}
.color_green_light {
	background-color: #ddedda ;
}

.color_blue, .blueheadstyle {
    background-color: #239dd1;
}
.color_blue_light {
	background-color: #d8e3f5  ;
}

.color_purple, .purpleheadstyle {
    background-color: #8c3696;
}
.color_purple_light {
	background-color: #d5c9e4   ;
}

.expertLogo {
    width: 200px;
    height: 200px;
    float: right;
    margin-top: 10px;
    margin-right: 70px;
}

    .expertLogo img {
        margin: 0 auto;
    }

.expertTitleColumn {
    min-width: 180px;
    display: table-cell;
    background-color: #ed1c24;/* #f16a10;*/
    text-align: right;
    vertical-align: top;
    min-height: 40px;
}

    .expertTitleColumn span {
        padding-right: 10px;
    }

.editfield {
    float: left;
    cursor: pointer;
    background: url(../images/cog_edit.png) no-repeat;
    width:20px;
    height:20px;
}

    .editfield:hover {
        display: block;
    }

.expertDataColumn {
    width: 400px;
    display: table-cell;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 4px;
    overflow: hidden;
}

.popup {
    border:none;
    background-color:transparent;
    position:absolute;
    width:650px;
    height:750px;
    left:25%;
    top:10%;
    margin:0 auto;
    display:none;
}

.cover {
    background-color:black;
    width:100%;
    height:100%;
    top:0;
    left:0;
    display:none;
    position:absolute;
}

.closeButton
{
    position:absolute;
    top:0;
    right:0;
}

.eThanksForm
{
    width: 250px;
    margin: 0 auto;
}

.eThanksForm table th
{
    text-align:right;
}

#pagetopdiv
{
    position:absolute;
    width:48px;
    height:48px;
    bottom:50%;
    right:20px;
    visibility:hidden;
}
    
#fineExpertVideo
{
    width: 560px; 
    height: 315px;
}

#fineExpertDiv
{
    width: 565px;
    margin: 0 auto;
}

#m_socialLinks
{
    float:left;
}

#m_socialLinks li
{
    list-style: none;
}

#m_socialLinks ul
{
    -webkit-padding-start: 20px;
}

#m_userData
{
    clear:both;
    width: 100%;
    padding-left: 15px;
}

m_userImageDiv
{
    padding-left: 10px;
    border-radius:15px; 
    margin-right:10px; 
    border:1px solid #fefefe; 
    box-shadow:5px 5px #efefef;
}

#expertList
{
    width:90%; 
    text-align:center; 
    margin: 0 auto;
}

@media all (min-width: 2000px) {
    .mainLogo {
        width: 180px;
    }

    .contentHolder {
        width: 1750px; /* 250 * 6 */
    }

    .nav-justified > li > a {
        font-size: 1.2em;
    }
}

@media all and (max-width: 2000px) and (min-width: 1750px) {
    .mainLogo {
        width: 170px;
    }

    .contentHolder {
        width: 1500px; /* 250 * 6 */
    }

    .nav-justified > li > a {
        font-size: 1.4em;
    }
}

@media all and (max-width: 1750px) and (min-width: 1500px) {
    .mainLogo {
        width: 160px;
    }

    .contentHolder {
        width: 1500px; /* 250 * 6 */
    }

    .nav-justified > li > a {
        font-size: 1.3em;
    }
}

@media all and (max-width: 1500px) and (min-width: 1250px) {
    body::after {
        content: "";
        background: url(../images/body_bg_left_sm.png) no-repeat top left;
	}
    .mainLogo {
        width: 150px;
    }

    .contentHolder {
        width: 1250px; /* 250 * 5 */
    }

    .nav-justified > li > a {
        font-size: 1.1em;
    }
}

@media all and (max-width: 1000px) and (min-width: 1000px) {
    body::after {
        content: "";
        background: url(../images/body_bg_left_sm.png) no-repeat top left;
	}

    .mainLogo {
        width: 120px;
    }

    .contentHolder {
        width: 1000px; /* 250 * 4 */
    }

    .nav-justified > li > a {
        font-size: 1em;
    }

}

@media all and (max-width: 1023px) and (min-width: 750px) {
    body::after {
        content: "";
        background: url(../images/body_bg_left_sm.png) no-repeat top left;
	}
	.mainLogo {
        width: 100px;
    }

    .contentHolder {
        width: 750px; /* 250 * 3 */
    }

    .nav-justified > li > a {
        font-size: .9em;
    }

	.leftImage, .rightImage, .rightWords, .leftWords
	{
		float: left;
		margin-left:15px;
		margin-right:15px;
		height:100%;
		width: 100%;
		clear:both;
	}
	.text_home{font-size:22px; line-height:1.5em;}
    #expertCircle
    {
        display:none;
    }
}

@media all and (max-width: 750px) {
    body::after {
        content: "";
        background: url(../images/body_bg_left_sm.png) no-repeat top left;
	}
    .logoMain img {
        width: 200px;
    }

	.contentHolder {
        width: 500px; /* 250 * 2 */
    }

    .nav-justified > li > a {
        font-size: 1.2em; /*original 1.1em*/
    }
	
	.leftImage, .rightImage, .rightWords, .leftWords
	{
		float: left;
		margin-left:15px;
		margin-right:15px;
		height:100%;
		width: 100%;
		clear:both;
	}
	.text_home{font-size:16px; line-height:1.5em;}
    #fineExpertVideo
    {
        width: 300px; 
        height: 150px;
    }

    #fineExpertDiv
    {
        width: 305px;
        margin: 0 auto;
    }

    .rightWords {
        padding: 0px;
        margin: 0px;
    }
    .trainerdiv {
        width: 150px;
        height: 200px;
        font-size: .8em;
        margin: 3px;
    }
    .trainerdiv h3 {
        line-height: 1;
        font-weight: 100;
        margin-top: 5px;
        margin-bottom: 5px;
        font-size: 16px;
    }
    .trainerdiv img
    {
		height:120px;
		width: auto !important;
        max-width: 140px;
		overflow:hidden;
	    margin-top:5px;
    }
	
    #expertCircle
    {
        display:none;
    }
    .container-fluid
    {
        padding:0px;
        width:100%;
    }
}