html {
    min-height: 100%;
    box-sizing: border-box;
}

body {
    box-sizing: border-box;
    position: relative;
    min-height:100vh;
    height: 100%;
    padding-bottom: 84px;
}
/* button images preload */
body::before {
    content: url('../img/btn-personal-hover.png')
    url('../img/btn-partners-hover.png')
    url('../img/but2.png')
    url('../img/but2-hover.png')
    url('../img/but3.png')
    url('../img/but3-hover.png');
    visibility: hidden;
    position: absolute;
    left: -999em;
    z-index: -9999;
}

.choose-date__personal {
    min-height: 200px;
}

.choose-date__partners {
    display: none;
}
.hide {
    display: none;
}

.show {
    display: block;
}

* {
    font-family: 'PT Sans', Verdana, sans-serif;

    margin: 0;
    padding: 0;
}

.main-title {
    padding: 50px 0;
    text-transform: uppercase;
    text-align: center;
}

.title-compatibility {
    display: none;
}

.choose-date {
    padding: 30px 0;

    text-align: center;

    background-color: #eee;
}

.choose-date__title {
    margin-bottom: 12px;
}
.choose-date input {
    font-size: 20px;

    margin: 10px 5px;
    padding: 5px;

    text-align: center;
}
.choose-date input[type='submit'] {
    font-size: 20px;

    margin: 10px 0;
    padding: 5px 15px;

    cursor: pointer;

    color: red;
    border: 2px solid red;
    -webkit-border-radius: 5px;
            border-radius: 5px;
    background: #fff;
}

.calculate {
    background: url('../img/but2.png') no-repeat;
    margin-top: 24px;
    margin-right: 24px;
    width: 161px;
    height: 42px;
    border: none;
    outline: none;
    cursor: pointer;
}
.calculate:hover {
    background-image: url('../img/but2-hover.png');
}

.print {
    margin-top: 24px;
    background: url('../img/but3.png') no-repeat;
    width: 161px;
    height: 42px;
    border: none;
    outline: none;
    cursor: pointer;
    display: none;
}

.print:hover {
    background-image: url('../img/but3-hover.png');
}

.choose-date input[type='submit']:hover {
    background-color: #cacaca;
}

.choose-matrix {
    margin: 40px 0 56px;
    text-align: center;
}

.choose-matrix__button {
    display: inline-block;
    width: 338px;
    height: 94px;
    margin: 0 30px;
    cursor: pointer;
}

.choose-matrix__personal {
    background: url('../img/btn-personal.png') no-repeat;
}
.choose-matrix__personal:hover {
    background: url('../img/btn-personal-hover.png') no-repeat;
}

.choose-matrix__partners {
    background: url('../img/btn-partners.png') no-repeat;
}
.choose-matrix__partners:hover {
    background: url('../img/btn-partners-hover.png') no-repeat;
}

.input-block {
    display: inline-block;
}

.input-label {
    display: block;
}


.diagram {
    padding-top: 300px;
    height: 400px;
    width: 100%;
    overflow-x: hidden;
    border-top: 5px solid #f47e5b;
    border-bottom: 5px solid #f47e5b;
    background: rgb(239, 192, 150);
    background: rgba(239, 192, 150, 0.5)
    /*
    background: -moz-linear-gradient(left,  rgba(239,212,191,1) 0%, rgba(204,176,155,1) 11%, rgba(186,158,137,1) 30%, rgba(186,158,137,1) 70%, rgba(204,176,155,1) 89%, rgba(239,212,191,1) 100%);
    background: -webkit-linear-gradient(left,  rgba(239,212,191,1) 0%,rgba(204,176,155,1) 11%,rgba(186,158,137,1) 30%,rgba(186,158,137,1) 70%,rgba(204,176,155,1) 89%,rgba(239,212,191,1) 100%);
    background: linear-gradient(to right,  rgba(239,212,191,1) 0%,rgba(204,176,155,1) 11%,rgba(186,158,137,1) 30%,rgba(186,158,137,1) 70%,rgba(204,176,155,1) 89%,rgba(239,212,191,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efd4bf', endColorstr='#efd4bf',GradientType=1 );
    */

}

.scheme {
    position: relative;
    width: 100%;
  /*  height: 550px;*/
    margin: 0 auto;

    padding-top: 64px;
}


.scheme__oval {
    position: absolute;
    z-index: 2;
    bottom: -55px;
    left: 335px;
    width: 50px;
    height: 146px;
    margin-left: -53px;
    border: 4px solid #abff06;
    border-radius: 47%;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transition: transform 0.2s, border-color 0.2s;
    -moz-transition: transform 0.2s, border-color 0.2s;
    -o-transition: transform 0.2s, border-color 0.2s;
    transition: transform 0.2s, border-color 0.2s;
}

.scheme__oval:hover {
    -webkit-transform: scale(1.2) rotate(-45deg);
    -moz-transform: scale(1.2) rotate(-45deg);
    -ms-transform: scale(1.2) rotate(-45deg);
    -o-transform: scale(1.2) rotate(-45deg);
    transform: scale(1.2) rotate(-45deg);
    border-color: #f2ff00;
}

.square {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    width: 333px;
    height: 333px;
    margin: auto;

    border: 5px solid #f1592b;
}
.square__line {
    width: 100px;
    height: 5px;
    border-bottom: 5px solid #f1592b;
    -webkit-transition: border-color 0.2s ease-in;
    -moz-transition: border-color 0.2s ease-in;
    -o-transition: border-color 0.2s ease-in;
    transition: border-color 0.2s ease-in;
}
.square__firstLine {
    position: absolute;
    top: 160px;
    left: -68px;
    width: 473px;

    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
}
.square__secondLine {
    position: absolute;
    top: 159px;
    left: -70px;
    width: 473px;

    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
         -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
}

.secondSquare {
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
}

.blocks__item {
    position: absolute;
    z-index: 10;
    width: 35px;
    height: 35px;
    border: 4px solid #f1592b;
    border-radius: 10%;
    background-color: #fff;
    -webkit-transition: border-color 0.2s ease-in;
    -moz-transition: border-color 0.2s ease-in;
    -ms-transition: border-color 0.2s ease-in;
    -o-transition: border-color 0.2s ease-in;
    transition: border-color 0.2s ease-in;
}
.blocks__item:hover {
    cursor: pointer;
}

.highlight {
    border-color: rgba(255, 236, 0, 1);
}

.diamond_1 {
    top: -26px;
    left: -26px;
}

.diamond_2 {
    top: -26px;
    left: 318px;
}

.diamond_3 {
    z-index: 1000;
    top: 313px;
    left: 313px;
}

.diamond_4 {
    top: 318px;
    left: -26px;
}

.square_1 {
    top: -25px;
    left: -25px;
}

.square_2 {
    top: -25px;
    left: 315px;
}

.square_3 {
    top: 315px;
    left: 315px;
}

.square_4 {
    top: 313px;
    left: -27px;
}

.circle_1 {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    margin: auto;

    border-radius: 50%;
}


.line__item {
    line-height: 25px;
    position: relative;
    z-index: 20;
    display: inline-block;
    width: 25px;
    height: 25px;
    text-align: center;
    border-radius: 50%;
    -webkit-transition: transform 0.2s ease-in, background-color 0.2s;
    -moz-transition: transform 0.2s ease-in, background-color 0.2s;
    -o-transition: transform 0.2s ease-in, background-color 0.2s;
    transition: transform 0.2s ease-in, background-color 0.2s;
}

.line__item:hover {
    cursor: pointer;
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
    background-color: #f1592b;
}

.we__first {
    top: -5px;
    left: 25px;
    color: #fff;
    background-color: #5052d7;
}

.tooltip-data {
    font-size: 15px;
    font-weight: bold;
    display: inline-block;
    color: #fff;
    -webkit-transition: color 0.2s;
    -moz-transition: color 0.2s;
    -ms-transition: color 0.2s;
    -o-transition: color 0.2s;
    transition: color 0.2s;
}

.tooltip-data:hover {

}

.top_tail_top,
.top_tail_middle,
.top_tail_bottom,
.bottom_tail {
    display: inline-block;
    color: #fff;

    -webkit-transform: rotate(-90deg);
       -moz-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
         -o-transform: rotate(-90deg);
            transform: rotate(-90deg);
}

.left_left_tail {
    font-size: 15px;
    font-weight: bold;

    color: #fff;
}

.we__second {
    top: -5px;
    left: 24px;
    color: #fff;

    background-color: #09c7d3;
}

.we__third {
    top: -5px;
    left: 72px;
    color: #fff;
    background-color: #91d706;
}

.we__extra {
    top: -23px;
    left: 178px;

    background-color: #745466;
    color: #fff;
}

.we__fourth {
    top: -5px;
    left: 274px;
    color: #fff;
    background-color: #f7931f;
}

.we__fourth2.overlap {
    left: 273px;
    top: 273px;
    z-index: 1000;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

.we__fourth2.overlap:hover {
    -webkit-transform: rotate(45deg) scale(1.2);
    -moz-transform: rotate(45deg) scale(1.2);
    -ms-transform: rotate(45deg) scale(1.2);
    -o-transform: rotate(45deg) scale(1.2);
    transform: rotate(45deg) scale(1.2);
}

.we__fifth.overlap {
    top: 292px;
    left: 263px;
    color: #fff;
    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
         -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
    background-color: #9c6b7e;
    z-index: 1000;
}

.we__fifth.overlap:hover {
    -webkit-transform: rotate(-45deg) scale(1.2);
    -moz-transform: rotate(-45deg) scale(1.2);
    -ms-transform: rotate(-45deg) scale(1.2);
    -o-transform: rotate(-45deg) scale(1.2);
    transform: rotate(-45deg) scale(1.2);
    background-color: #f1592b;
}


.diamond__text {
    font-size: 27px;
    font-weight: bold;

    position: relative;
    top: 0;
    left: -10px;

    display: inline-block;

    width: 2em;

    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
         -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
    text-align: center;

    color: #93c;
}

.circle_text {
    font-size: 27px;
    font-weight: bold;

    position: relative;
    top: 0;
    left: -9px;

    display: inline-block;

    width: 2em;

    text-align: center;

    color: #93c;
}

.square__text {
    font-size: 27px;
    font-weight: bold;

    position: relative;
    top: 0;
    left: -9px;

    display: inline-block;

    width: 2em;

    text-align: center;

    color: #93c;
}


.meaning {
    position: relative;
    width: 100%;
    padding: 5px 0 0;
    overflow: auto;
    background-color: rgba(220, 214, 232, 0.74);
    border-bottom: 5px solid #f47e5b;
}
.meaning__content {
    padding: 0 3%;
    margin: 0 auto;

    text-align: center;
}

.meaning__header {
    font-weight: bold;
    font-size: 15px;
}

.meaning__item {
    position: relative;

    /*display: inline-block;*/
    display: block;
    float: left;
    width: 23%;
    margin: 20px 5px;

    text-align: center;
    vertical-align: top;
}
.meaning__results {
    font-size: 24px;
    font-weight: bold;

    margin: 20px;
    text-align: left;

    color: rgb(51, 51, 51);
}
.meaning__results_center {
    text-align: center;
}

/*.meaning__total {
    position: absolute;
    right: 20px;
    bottom: 32px;
}*/
/*.meaning__total:before {
    font-size: 50px;
    font-weight: normal;

    position: relative;
    top: 7px;
    left: -8px;


    content: '\}';
}*/

.meaning__left {
    display: inline-block;
    width: 70%;
    float: left;
}

.meaning__right {
    display: inline-block;
    width: 30%;
    float: left;
    padding-top: 0.7em;
    position:relative;
    text-align: center;
}
.meaning__right:before {
    left: -4px;
    top: -4px;
    font-size: 2em;
    font-weight: normal;
    position:absolute;
    content: '\}';
}

.sky-align {
    padding-right: 12px;
}

.female-align {
    padding-right: 4px;
}

.health {
    position: relative;
    clear: both;
    margin: 48px 3%;

    overflow-x: hidden;
    overflow-y: hidden;
}
.health__title {
    margin-bottom: 30px;
    text-align: center;
}


.health-table {

    width: 1000px;
    margin: 24px auto;

    table-layout: fixed;

    border: 1px solid #000;
    border-collapse: collapse;
}
.health__img {
    position: relative;
}
.health__img:before {
    content: '';
    position: absolute;
    z-index: 2;
    left: -3px;
    top: 50px;
    width: 250px;
    height: 290px;

    background: url('../img/chakra_chelovek3.png') no-repeat;
}

.health-table td {
    vertical-align: middle;
}

.health__table .health-table__head th {
    font-size: 21px;
    font-weight: bold;

    height: 80px;

    vertical-align: middle;

    border: 1px solid black;
}

.health__table tbody td {
    font: bold 20px 'Open Sans', sans-serif;

    height: 40px;

    text-align: center;

    color: #000;
    border: 1px solid black;
}

.health-table__cell_img {
    /*float: right;*/
    position: absolute;
    top: 1px;
    right: 5px;
    /*margin-right: 20px;*/
}
.health-table__first-col {
    width: 240px;
    border: 0;
}

.health-table th.health-table__fifth-col {
    width: 250px;
}
.health-table td.health-table__fifth-col {
    font-size: 15px;

    position: relative;

    vertical-align: middle;

    color: #000;
}

td.tooltip {
    -webkit-transition: color 0.2s ease-in;
    -moz-transition: color 0.2s ease-in;
    -o-transition: color 0.2s ease-in;
    transition: color 0.2s ease-in;
}
td.tooltip:hover {
    color: #ffffff;
}
td.tooltip.sist:hover {
    color: #ff4200;
}

.text-tooltip {
    -webkit-transition: color 0.2s;
    -moz-transition: color 0.2s;
    -o-transition: color 0.2s;
    transition: color 0.2s;
    font-size: 26px;
    color: #7c5892;
}

.text-tooltip:hover {
    color: #ff4200;
}

.health-table tbody .health-table__first-col {
    position: relative;
}

.health-table tbody .health-table__first-col::after {
    position: absolute;
    z-index: -2;
    content: '';
    width: 1000px;
    top: 0;
    left: 0;
    height: 41px;
}

.sah .health-table__first-col::after {
    background: #e556b4;
    background: -moz-linear-gradient(left,  #e556b4 0%, #e556b4 46%, #eaeaea 100%);
    background: -webkit-linear-gradient(left,  #e556b4 0%,#e556b4 46%,#eaeaea 100%);
    background: linear-gradient(to right,  #e556b4 0%,#e556b4 46%,#eaeaea 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e556b4', endColorstr='#eaeaea',GradientType=1 );
}

.adj .health-table__first-col::after {
    background: #4d50d6;
    background: -moz-linear-gradient(left,  #4d50d6 0%, #4d50d6 46%, #eaeaea 100%);
    background: -webkit-linear-gradient(left,  #4d50d6 0%,#4d50d6 46%,#eaeaea 100%);
    background: linear-gradient(to right,  #4d50d6 0%,#4d50d6 46%,#eaeaea 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4d50d6', endColorstr='#eaeaea',GradientType=1 );
}

.vish .health-table__first-col::after {
    background: #03c6d2;
    background: -moz-linear-gradient(left,  #03c6d2 0%, #03c6d2 46%, #eaeaea 100%);
    background: -webkit-linear-gradient(left,  #03c6d2 0%,#03c6d2 46%,#eaeaea 100%);
    background: linear-gradient(to right,  #03c6d2 0%,#03c6d2 46%,#eaeaea 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#03c6d2', endColorstr='#eaeaea',GradientType=1 );
}

.anah .health-table__first-col::after {
    background: #91d706;
    background: -moz-linear-gradient(left,  #91d706 0%, #91d706 46%, #eaeaea 100%);
    background: -webkit-linear-gradient(left,  #91d706 0%,#91d706 46%,#eaeaea 100%);
    background: linear-gradient(to right,  #91d706 0%,#91d706 46%,#eaeaea 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#91d706', endColorstr='#eaeaea',GradientType=1 );
}

.man .health-table__first-col::after {
    background: #e9cf01;
    background: -moz-linear-gradient(left,  #e9cf01 0%, #e9cf01 46%, #eaeaea 100%);
    background: -webkit-linear-gradient(left,  #e9cf01 0%,#e9cf01 46%,#eaeaea 100%);
    background: linear-gradient(to right,  #e9cf01 0%,#e9cf01 46%,#eaeaea 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e9cf01', endColorstr='#eaeaea',GradientType=1 );
}

.svad .health-table__first-col::after {
    background: #f7931e;
    background: -moz-linear-gradient(left,  #f7931e 0%, #f7931e 46%, #eaeaea 100%);
    background: -webkit-linear-gradient(left,  #f7931e 0%,#f7931e 46%,#eaeaea 100%);
    background: linear-gradient(to right,  #f7931e 0%,#f7931e 46%,#eaeaea 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7931e', endColorstr='#eaeaea',GradientType=1 );
}

.mul .health-table__first-col::after {
    background: #de041c;
    background: -moz-linear-gradient(left,  #de041c 0%, #de041c 46%, #eaeaea 100%);
    background: -webkit-linear-gradient(left,  #de041c 0%,#de041c 46%,#eaeaea 100%);
    background: linear-gradient(to right,  #de041c 0%,#de041c 46%,#eaeaea 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#de041c', endColorstr='#eaeaea',GradientType=1 );
}

.sist {
    background-color: transparent;
}

.energy {
    margin: 32px 3%;
    overflow-x: hidden;
    border-top: 5px solid #f47e5b;
    background-image: url('../img/vremya01-u79-fr.png');
    background-size: cover;
}
.energy__title {
    margin: 10px 0 20px;

    text-align: center;
}

.energy-table {
    font: bold 18px 'Open Sans', sans-serif;

/*    max-width: 1020px;*/

    margin: 0 auto 50px;

    table-layout: fixed;

    border: 1px solid #000;
    border-collapse: collapse;
}
.energy-table th.energy-table__cell {
    width: 150px;
    padding: 10px;

    text-transform: uppercase;

    color: #fff;
    background-color: rgba(77,80,214,.6);
}
.energy-table__cell {
    padding: 5px;

    text-align: center;

    border: 1px solid black;
}
.energy-table__cell__energy {
    color: #93c;
}
.energy-table__cell_tight {
    width: 90px !important;
}

.energy-table tr:nth-child(odd) td.energy-table__cell {
    background-color: rgba(247,147,30,.2);
}

.energy-table tr:nth-child(even) td.energy-table__cell {
    background-color: rgba(222,4,28,.3);
}

.footer {
    clear: both;
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: justify;
    background-color: #521e34;
    margin-top: -84px;
}

.footer__item {
    padding: 0 60px;
    /*display: inline-block;*/
    float: left;
    width: 40%;
    margin: 12px 0;
    text-align: left;
    vertical-align: middle;
    color: #fff;
}

.text-input {
    width: 3em;
}

.text-input__wide {
    width: 5em;
}


.tooltip-container {
    position: absolute;
    z-index: 10;
    width: 50%;
    /*background-color: #eee;*/
    color: #333333;
    background-color: rgb(227, 192, 255);
}

.tooltip-container div.arcan {
    font-size: 15px;
    display: none;
    max-width: 1020px;
    margin: 0 auto;
    padding: 15px;
}

.arcan h3 {
    font-size: 18px;

    margin: 0 0 10px;
}

.arcan p {
    font-weight: normal;

    margin: 10px 0;
}

.tooltip-container div.arcan__title {
    font-size: 20px;
    font-weight: bold;

    margin: 40px auto 0;
    padding: 0;

    color: #91d706;
}

.print-logo {
    display: none;
    width: 1000px;
    height: 107px;
    background: url('../img/print-logo.png') no-repeat;
    margin: 24px 0;
}

/* MEDIA QUERIES */

@media only screen and (max-width: 1025px){
    .meaning__item {
        width: 45%;
        text-align: center;
    }
    .meaning__left, .meaning__right {
        text-align: center;
    }
}

@media only screen and (max-width: 768px){
    .diagram {
        overflow-x: scroll;
    }
    .scheme {
        margin: 0 64px;
    }
    .meaning__item {
        width: 100%;
    }
    .meaning__results {
        text-align: center;
    }
    .footer__item {
        text-align: center;
        width: auto;
        float: none;
    }

}

/* add overflow scrollbars to tables and matrix */

@media only screen and (max-width: 1100px){
    .health, .energy {
        overflow-x: scroll;
    }
}

/* MEDIA PRINT */

@media print {
    @page {
        size: A4 portrait;
    }

    body {
        width: 1000px;
    }

    .start {
        display: none;
    }

    .main-title {
        padding: 30px 0;
    }
    .footer {
        display: none;
    }
    .health, .diagram {
        overflow: visible;
    }
     .energy {
        overflow:visible;
     }
    .page-break {
        page-break-before: always;
        display: block;
    }
    .meaning__item {
        width: 45%;
        text-align: center;
    }
    .meaning__left, .meaning__right {
        text-align: center;
    }
    .print-logo {
        display: block;
    }
}