@CHARSET "UTF-8";
@import url("reset.css");
@import url("makeup.css");

.RT {
        font-family: 'Roboto', sans-serif;
        font-weight: 100;
}
.RL {
        font-family: 'Roboto', sans-serif;
        font-weight: 300;
}
.RR {
        font-family: 'Roboto', sans-serif;
        font-weight: 400;
}
.RM {
        font-family: 'Roboto', sans-serif;
        font-weight: 500;
}
.RB {
        font-family: 'Roboto', sans-serif;
        font-weight: 700;
}
a {
        color: #e85d00;
        text-decoration: none!important;
}
a:not(.btn):hover {
        /*color: #ff5d83;*/
}
a u {
        text-decoration: none!important;
        border-bottom: 1px solid;
}
body {
        width: 100%;
        height: 100%;
        min-width: 980px;
        font-family: 'arial';
        color: #252525;
}
.section {
        width: 100%;
        position: relative;
        min-height: 885px;
        overflow: hidden;
        /* border-bottom: 4px solid white; */
        min-width: 960px;
}
.section-content-wrapper {
        width: 960px;
        margin-left: auto;
        margin-right: auto;
        position: relative;
}
.bg-wrap, .bg-p-wrap {
        position: absolute;
        width: 100%;
        height: 100%;
        margin: 0px auto;
}
.bg-p-wrap {
        background: #e9eff3;
}
.bg-wrap > div {
        min-height: 100%; 
        width: 100%;
        position: relative; 
}
.bg-p-wrap > div{
        min-height: 100%; 
        width: 50%;
        margin-left: 50%;
        position: relative; 
}
.bg-1 > div {
        background: url(../img/bg-1.jpg) top center no-repeat;
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bg-1.jpg', sizingMethod='scale');
        -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bg-1.jpg', sizingMethod='scale')";
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}
.bg-2 > div {
        background: url(../img/bg-2.jpg) top center no-repeat;
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bg-2.jpg', sizingMethod='scale');
        -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bg-2.jpg', sizingMethod='scale')";
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}
.bg-3 > div {
        background: url(../img/bg-3.jpg) top center no-repeat;
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bg-3.jpg', sizingMethod='scale');
        -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bg-3.jpg', sizingMethod='scale')";
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}
.bg-p-1 > div {
        background: url(../img/bg-p-1.jpg) top center no-repeat;
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bg-p-1.jpg', sizingMethod='scale');
        -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bg-p-1.jpg', sizingMethod='scale')";
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}

.bg-white {
        background: #e9eff3;
}
.bg-dark {
        background: #2f373a;
}
.bg-tricolor > div {
        position: absolute;
        width: auto;
}
.bg-tricolor:after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 348px;
        background: black;
        opacity: .3;
        z-index: 2;
}
.bg-tricolor > .tc-1 {
        left: 0;
        right: 50%;
        background: #8cbedf;
}
.bg-tricolor > .tc-2 {
        left: 50%;
        right: 0;
        background: #d79393;
}
.bg-tricolor > .tc-3 {
        left: 50%;
        width: 330px;
        margin-left: -165px;
        background: #a2cd79;
        z-index: 1;
}

.logo-top {
        background: url('../img/logo-top.png') no-repeat;
        height: 60px;
        width: 145px;
        top: 38px;
        left: 0px;
        z-index: 1;
        display: inline-block;
}
.top-panel {
        position: fixed;
        top: 0;
        width: 100%;
        height: 40px;
        z-index: 1000;
        background: rgba(0,0,0,.5);
}
.top-panel a.scrollto:not(.nd) {
        display: inline-block;
        color: #becdd4;
        font-size: 18px;
        height: 20px;
        padding: 6px 22px 14px 0px;;
        text-decoration: none!important;
        transition-duration: 200ms;
        font-family: 'Roboto', sans-serif;
        font-weight: 300;
}
.top-panel a.scrollto:not(.nd):hover {
        color: #deedf4;
}
.btn-tp {
        font-family: 'Roboto', sans-serif;
        font-weight: 500;
        font-size: 16px;
        background: #ffdc2e;
        height: 40px;
        padding: 0px 15px;
        line-height: 38px;
        color: #252525;
        cursor: pointer;
}
.offer-text {
        font-family: 'Roboto', sans-serif;
        font-weight: 100;
        font-size: 45px;
        color: #ffffff;
}
.offer-text > strong {
        font-weight: 100;
        color: #ffdc2e;
        font-size: 78px;
}
.arrow-top {
        background: url('../img/arrow-top.png') no-repeat;
        height: 28px;
        width: 292px;
        top: 78px;
        left: 5px;
        position: absolute;
}
input[type="text"] {
        background: url('../img/transparent.png') repeat;
        font-family: 'Roboto', sans-serif;
        font-weight: 300;
        font-style: italic;
        font-size: 18px;
        color: #ffffff;
        padding: 6px 8px;
        border: none;
        width: 185px;
}
.input {
        margin: 0px 8px;
        position: relative;
        display: inline-block;
}
.input:after {
        content: '';
        height: 1px;
        position: absolute;
        left: 0;
        bottom: 0;
        right: 0;
        background: #758ea0;
}
.input:before {
        content: '';
        width: 1px;
        position: absolute;
        left: 0;
        bottom: 0;
        height: 10px;
        background: #758ea0;
}
.btn {
        cursor: pointer;
        display: inline-block;
        background: #f5ca00;
        border-top: 1px #ffd822 solid;
        border-bottom: 1px #bd9c00 solid;
        text-shadow: 0px 1px 1px rgba(255,255,255,.5);
        color: #252525;
        height: 41px;
        line-height: 38px;
        padding: 0px 41px;
        font-family: 'Roboto', sans-serif;
        font-weight: 400;
        font-size: 24px;
        border-radius: 3px;
}
.notebook {
        background: url('../img/notebook.png') no-repeat;
        height: 357px;
        width: 600px;
        top: 160px;
        left: 50%;
        margin-left: -300px;
        position: absolute;
        opacity: 1;
        -webkit-transition: all 200ms cubic-bezier(0.655, 0.035, 0.000, 0.245); 
   -moz-transition: all 200ms cubic-bezier(0.655, 0.035, 0.000, 0.245); 
     -o-transition: all 200ms cubic-bezier(0.655, 0.035, 0.000, 0.245); 
        transition: all 200ms cubic-bezier(0.655, 0.035, 0.000, 0.245); /* custom */

-webkit-transition-timing-function: cubic-bezier(0.655, 0.035, 0.000, 0.245); 
   -moz-transition-timing-function: cubic-bezier(0.655, 0.035, 0.000, 0.245); 
     -o-transition-timing-function: cubic-bezier(0.655, 0.035, 0.000, 0.245); 
        transition-timing-function: cubic-bezier(0.655, 0.035, 0.000, 0.245); /* custom */
}
.task-1, .task-2, .task-3, .task-4, .task-5 {
        position: absolute;
        width: 260px;
        height: 160px;
        text-align: center;
}
.task-1 {
        top: 210px;
        left: 0px;
}
.task-2 {
        top: 0px;
        left: 0px;
}
.task-3 {
        top: 0px;
        left: 50%;
        margin-left: -130px;
}
.task-4 {
        top: 0px;
        right: 0px;
}
.task-5 {
        top: 210px;
        right: 0px;
}
.task-line-1 {
        transition-duration: 100ms;
        transition-delay: 200ms;
        position: absolute;
        right: 73%;
        bottom: 46%;
        background: url('../img/task-line-1.png') no-repeat;
        height: 21px;
        width: 86px;
}
.task-line-2 {
        transition-duration: 100ms;
        transition-delay: 300ms;
        position: absolute;
        right: 70%;
        bottom: 70%;
        background: url('../img/task-line-2.png') no-repeat;
        height: 99px;
        width: 124px;
}
.task-line-3 {
        transition-duration: 100ms;
        transition-delay: 360ms;
        position: absolute;
        right: 50%;
        bottom: 69%;
        background: url('../img/task-line-3.png') no-repeat;
        height: 83px;
        width: 2px;
}
.task-line-4 {
        transition-duration: 100ms;
        transition-delay: 250ms;
        position: absolute;
        left: 70%;
        bottom: 69%;
        background: url('../img/task-line-4.png') no-repeat left bottom;
        height: 99px;
        width: 122px;
}
.task-line-5 {
        transition-duration: 100ms;
        transition-delay: 320ms;
        position: absolute;
        left: 73.5%;
        bottom: 45%;
        background: url('../img/task-line-5.png') no-repeat left bottom;
        height: 20px;
        width: 82px;
}
.section:not(.active) .task-line-1,
.section:not(.active) .task-line-2,
.section:not(.active) .task-line-3,
.section:not(.active) .task-line-4,
.section:not(.active) .task-line-5 {
        width: 0px;
        height: 0px;
        transition-duration: 0ms;
        transition-delay: 0ms;
}
.section:not(.active) .notebook {
        opacity: 0;
        transition-duration: 0ms;
}
.section:not(.active) .task-1 img,
.section:not(.active) .task-2 img,
.section:not(.active) .task-3 img,
.section:not(.active) .task-4 img,
.section:not(.active) .task-5 img {
        height: 0px;
        transition-duration: 0ms;
        transition-delay: 0ms;
}
.section:not(.active) .tt {
        opacity: 0;
        transition-duration: 0ms;
        transition-delay: 0ms;
}
.task-1 img, .task-1 .tt {
        height: 66px;
        -webkit-transition: all 600ms cubic-bezier(1.000, 0, 0.415, 1); /* older webkit */
-webkit-transition: all 600ms cubic-bezier(1.000, -0.600, 0.415, 1.800); 
   -moz-transition: all 600ms cubic-bezier(1.000, -0.600, 0.415, 1.800); 
     -o-transition: all 600ms cubic-bezier(1.000, -0.600, 0.415, 1.800); 
        transition: all 600ms cubic-bezier(1.000, -0.600, 0.415, 1.800); /* custom */

-webkit-transition-timing-function: cubic-bezier(1.000, 0, 0.415, 1); /* older webkit */
-webkit-transition-timing-function: cubic-bezier(1.000, -0.600, 0.415, 1.800); 
   -moz-transition-timing-function: cubic-bezier(1.000, -0.600, 0.415, 1.800); 
     -o-transition-timing-function: cubic-bezier(1.000, -0.600, 0.415, 1.800); 
        transition-timing-function: cubic-bezier(1.000, -0.600, 0.415, 1.800); /* custom */
        transition-delay: 200ms
}
.task-2 img, .task-2 .tt {
        height: 66px;
        -webkit-transition: all 600ms cubic-bezier(1.000, 0, 0.415, 1); /* older webkit */
-webkit-transition: all 600ms cubic-bezier(1.000, -0.600, 0.415, 1.800); 
   -moz-transition: all 600ms cubic-bezier(1.000, -0.600, 0.415, 1.800); 
     -o-transition: all 600ms cubic-bezier(1.000, -0.600, 0.415, 1.800); 
        transition: all 600ms cubic-bezier(1.000, -0.600, 0.415, 1.800); /* custom */

-webkit-transition-timing-function: cubic-bezier(1.000, 0, 0.415, 1); /* older webkit */
-webkit-transition-timing-function: cubic-bezier(1.000, -0.600, 0.415, 1.800); 
   -moz-transition-timing-function: cubic-bezier(1.000, -0.600, 0.415, 1.800); 
     -o-transition-timing-function: cubic-bezier(1.000, -0.600, 0.415, 1.800); 
        transition-timing-function: cubic-bezier(1.000, -0.600, 0.415, 1.800); /* custom */
        transition-delay: 200ms
}
.task-3 img, .task-3 .tt {
        height: 66px;
        -webkit-transition: all 600ms cubic-bezier(1.000, 0, 0.415, 1); /* older webkit */
-webkit-transition: all 600ms cubic-bezier(1.000, -0.600, 0.415, 1.800); 
   -moz-transition: all 600ms cubic-bezier(1.000, -0.600, 0.415, 1.800); 
     -o-transition: all 600ms cubic-bezier(1.000, -0.600, 0.415, 1.800); 
        transition: all 600ms cubic-bezier(1.000, -0.600, 0.415, 1.800); /* custom */

-webkit-transition-timing-function: cubic-bezier(1.000, 0, 0.415, 1); /* older webkit */
-webkit-transition-timing-function: cubic-bezier(1.000, -0.600, 0.415, 1.800); 
   -moz-transition-timing-function: cubic-bezier(1.000, -0.600, 0.415, 1.800); 
     -o-transition-timing-function: cubic-bezier(1.000, -0.600, 0.415, 1.800); 
        transition-timing-function: cubic-bezier(1.000, -0.600, 0.415, 1.800); /* custom */
        transition-delay: 160ms
}
.task-4 img, .task-4 .tt {
        height: 66px;
        -webkit-transition: all 600ms cubic-bezier(1.000, 0, 0.415, 1); /* older webkit */
-webkit-transition: all 600ms cubic-bezier(1.000, -0.600, 0.415, 1.800); 
   -moz-transition: all 600ms cubic-bezier(1.000, -0.600, 0.415, 1.800); 
     -o-transition: all 600ms cubic-bezier(1.000, -0.600, 0.415, 1.800); 
        transition: all 600ms cubic-bezier(1.000, -0.600, 0.415, 1.800); /* custom */

-webkit-transition-timing-function: cubic-bezier(1.000, 0, 0.415, 1); /* older webkit */
-webkit-transition-timing-function: cubic-bezier(1.000, -0.600, 0.415, 1.800); 
   -moz-transition-timing-function: cubic-bezier(1.000, -0.600, 0.415, 1.800); 
     -o-transition-timing-function: cubic-bezier(1.000, -0.600, 0.415, 1.800); 
        transition-timing-function: cubic-bezier(1.000, -0.600, 0.415, 1.800); /* custom */
        transition-delay: 150ms
}
.task-5 img, .task-5 .tt {
        height: 66px;
        -webkit-transition: all 600ms cubic-bezier(1.000, 0, 0.415, 1); /* older webkit */
-webkit-transition: all 600ms cubic-bezier(1.000, -0.600, 0.415, 1.800); 
   -moz-transition: all 600ms cubic-bezier(1.000, -0.600, 0.415, 1.800); 
     -o-transition: all 600ms cubic-bezier(1.000, -0.600, 0.415, 1.800); 
        transition: all 600ms cubic-bezier(1.000, -0.600, 0.415, 1.800); /* custom */

-webkit-transition-timing-function: cubic-bezier(1.000, 0, 0.415, 1); /* older webkit */
-webkit-transition-timing-function: cubic-bezier(1.000, -0.600, 0.415, 1.800); 
   -moz-transition-timing-function: cubic-bezier(1.000, -0.600, 0.415, 1.800); 
     -o-transition-timing-function: cubic-bezier(1.000, -0.600, 0.415, 1.800); 
        transition-timing-function: cubic-bezier(1.000, -0.600, 0.415, 1.800); /* custom */
        transition-delay: 220ms
}


/*=========================================================================================*/
/*=========================================================================================*/
/*=========================================================================================*/


.arrow-how {
        background: url('../img/arrow-how.png') no-repeat;
        position: absolute;
        width: 644px;
        height: 317px;
        left: 18px;
        top: 16px;
}

.how-1, .how-2, .how-3, .how-4, .how-5 {
        position: absolute;
        width: 245px;
        padding-left: 50px;
}
.how-1 img, .how-2 img, .how-3 img, .how-4 img, .how-5 img {
        position: absolute;
        left: 0;
        top: 8px;
}
.how-1 {
        top: 329px;
        left: 0;
}
.how-2 {
        top: 144px;
        left: 93px;
}
.how-3 {
        top: 291px;
        left: 289px;
}
.how-4 {
        top: 72px;
        left: 391px;
}
.how-5 {
        top: 0;
        right: 0;
}

.section:not(.active) .how-1 img,
.section:not(.active) .how-2 img,
.section:not(.active) .how-3 img,
.section:not(.active) .how-4 img,
.section:not(.active) .how-5 img {
        height: 0px;
        transition-duration: 0ms;
        transition-delay: 0ms;
        left: 20px;
        top: 28px;
}

.section:not(.active) .how-1 .ht,
.section:not(.active) .how-2 .ht,
.section:not(.active) .how-3 .ht,
.section:not(.active) .how-4 .ht,
.section:not(.active) .how-5 .ht {
        opacity: 0;
        transition-duration: 0ms;
        transition-delay: 0ms;
}

.how-1 img, .how-1 .ht {
        height: 39px;
        -webkit-transition: all 600ms cubic-bezier(1.000, 0, 0.415, 1); /* older webkit */
-webkit-transition: all 600ms cubic-bezier(1.000, -0.600, 0.415, 1.800); 
   -moz-transition: all 600ms cubic-bezier(1.000, -0.600, 0.415, 1.800); 
     -o-transition: all 600ms cubic-bezier(1.000, -0.600, 0.415, 1.800); 
        transition: all 600ms cubic-bezier(1.000, -0.600, 0.415, 1.800); /* custom */

-webkit-transition-timing-function: cubic-bezier(1.000, 0, 0.415, 1); /* older webkit */
-webkit-transition-timing-function: cubic-bezier(1.000, -0.600, 0.415, 1.800); 
   -moz-transition-timing-function: cubic-bezier(1.000, -0.600, 0.415, 1.800); 
     -o-transition-timing-function: cubic-bezier(1.000, -0.600, 0.415, 1.800); 
        transition-timing-function: cubic-bezier(1.000, -0.600, 0.415, 1.800); /* custom */
        transition-delay: 0ms
}
.how-2 img, .how-2 .ht {
        height: 39px;
        -webkit-transition: all 600ms cubic-bezier(1.000, 0, 0.415, 1); /* older webkit */
-webkit-transition: all 600ms cubic-bezier(1.000, -0.600, 0.415, 1.800); 
   -moz-transition: all 600ms cubic-bezier(1.000, -0.600, 0.415, 1.800); 
     -o-transition: all 600ms cubic-bezier(1.000, -0.600, 0.415, 1.800); 
        transition: all 600ms cubic-bezier(1.000, -0.600, 0.415, 1.800); /* custom */

-webkit-transition-timing-function: cubic-bezier(1.000, 0, 0.415, 1); /* older webkit */
-webkit-transition-timing-function: cubic-bezier(1.000, -0.600, 0.415, 1.800); 
   -moz-transition-timing-function: cubic-bezier(1.000, -0.600, 0.415, 1.800); 
     -o-transition-timing-function: cubic-bezier(1.000, -0.600, 0.415, 1.800); 
        transition-timing-function: cubic-bezier(1.000, -0.600, 0.415, 1.800); /* custom */
        transition-delay: 100ms
}
.how-3 img, .how-3 .ht {
        height: 39px;
        -webkit-transition: all 600ms cubic-bezier(1.000, 0, 0.415, 1); /* older webkit */
-webkit-transition: all 600ms cubic-bezier(1.000, -0.600, 0.415, 1.800); 
   -moz-transition: all 600ms cubic-bezier(1.000, -0.600, 0.415, 1.800); 
     -o-transition: all 600ms cubic-bezier(1.000, -0.600, 0.415, 1.800); 
        transition: all 600ms cubic-bezier(1.000, -0.600, 0.415, 1.800); /* custom */

-webkit-transition-timing-function: cubic-bezier(1.000, 0, 0.415, 1); /* older webkit */
-webkit-transition-timing-function: cubic-bezier(1.000, -0.600, 0.415, 1.800); 
   -moz-transition-timing-function: cubic-bezier(1.000, -0.600, 0.415, 1.800); 
     -o-transition-timing-function: cubic-bezier(1.000, -0.600, 0.415, 1.800); 
        transition-timing-function: cubic-bezier(1.000, -0.600, 0.415, 1.800); /* custom */
        transition-delay: 200ms
}
.how-4 img, .how-4 .ht {
        height: 39px;
        -webkit-transition: all 600ms cubic-bezier(1.000, 0, 0.415, 1); /* older webkit */
-webkit-transition: all 600ms cubic-bezier(1.000, -0.600, 0.415, 1.800); 
   -moz-transition: all 600ms cubic-bezier(1.000, -0.600, 0.415, 1.800); 
     -o-transition: all 600ms cubic-bezier(1.000, -0.600, 0.415, 1.800); 
        transition: all 600ms cubic-bezier(1.000, -0.600, 0.415, 1.800); /* custom */

-webkit-transition-timing-function: cubic-bezier(1.000, 0, 0.415, 1); /* older webkit */
-webkit-transition-timing-function: cubic-bezier(1.000, -0.600, 0.415, 1.800); 
   -moz-transition-timing-function: cubic-bezier(1.000, -0.600, 0.415, 1.800); 
     -o-transition-timing-function: cubic-bezier(1.000, -0.600, 0.415, 1.800); 
        transition-timing-function: cubic-bezier(1.000, -0.600, 0.415, 1.800); /* custom */
        transition-delay: 300ms
}
.how-5 img, .how-5 .ht {
        height: 39px;
        -webkit-transition: all 600ms cubic-bezier(1.000, 0, 0.415, 1); /* older webkit */
-webkit-transition: all 600ms cubic-bezier(1.000, -0.600, 0.415, 1.800); 
   -moz-transition: all 600ms cubic-bezier(1.000, -0.600, 0.415, 1.800); 
     -o-transition: all 600ms cubic-bezier(1.000, -0.600, 0.415, 1.800); 
        transition: all 600ms cubic-bezier(1.000, -0.600, 0.415, 1.800); /* custom */

-webkit-transition-timing-function: cubic-bezier(1.000, 0, 0.415, 1); /* older webkit */
-webkit-transition-timing-function: cubic-bezier(1.000, -0.600, 0.415, 1.800); 
   -moz-transition-timing-function: cubic-bezier(1.000, -0.600, 0.415, 1.800); 
     -o-transition-timing-function: cubic-bezier(1.000, -0.600, 0.415, 1.800); 
        transition-timing-function: cubic-bezier(1.000, -0.600, 0.415, 1.800); /* custom */
        transition-delay: 400ms
}

.seagull-p-f {
        position: absolute;
        top: 330px;
        left: 800px;
        width: 193px;
        height: 104px;
        background: url('../img/seagull-p-f.png') no-repeat;
}


/*=========================================================================================*/
/*=========================================================================================*/
/*=========================================================================================*/


.logo-detail {
        background: url('../img/logo-detail.png') no-repeat;
        display: inline-block;
        width: 160px;
        height: 66px;
}
.arrow-detail {
        background: url('../img/arrow-detail.png') no-repeat;
        position: absolute;
        width: 439px;
        height: 28px;
        top: 15px;
        left: 50%;
        margin-left: -220px;
}




.car {
        background: url('../img/car.png') no-repeat;
        position: absolute;
        width: 961px;
        height: 243px;
        top: 150px;
        left: 0;
}
.car:after {
        position: absolute;
        content: '';
        left: -170px;
        right: -170px;
        height: 1px;
        background: #4f575a;
        bottom: 3px;
}
.check-1, .check-2, .check-3, .check-4, .uncheck-1, .uncheck-2, .uncheck-3, .uncheck-4 {
        position: absolute;
        width: 240px;
        padding-top: 70px;
        font-family: 'Roboto', sans-serif;
        font-weight: 300;
        font-size: 14px;
        color: #a4bac3;
}
.check-1 img, .check-2 img, .check-3 img, .check-4 img, .uncheck-1 img, .uncheck-2 img, .uncheck-3 img, .uncheck-4 img {
        position: absolute;
        top: 0;
        left: 0;
}
.check-1 {
        top: 0;
        left: 0;
}
.check-2 {
        top: 0;
        left: 240px;
}
.check-3 {
        top: 0;
        left: 480px;
}
.check-4 {
        top: 0;
        left: 720px;
}
.uncheck-1 {
        top: 410px;
        left: 0;
}
.uncheck-2 {
        top: 410px;
        left: 240px;
}
.uncheck-3 {
        top: 410px;
        left: 480px;
}
.uncheck-4 {
        top: 410px;
        left: 720px;
}

.note-tarif-1, .note-tarif-2, .note-tarif-3 {
        width: 292px;
        height: 169px;
        color: white;
        margin-top: 9px;
}
.note-tarif-1 {
        background: url('../img/note-tarif-1.png') no-repeat;
}
.note-tarif-2 {
        background: url('../img/note-tarif-2.png') no-repeat;
}
.note-tarif-3 {
        background: url('../img/note-tarif-3.png') no-repeat;
}
.star-tariff {
        width: 26px;
        height: 24px;
        background: url('../img/star-tariff.png') no-repeat;
        display: inline-block;
        margin-top: 26px;
}

.tarif-term {
        color: #434e59;
        font-family: 'Roboto', sans-serif;
        font-weight: 300;
        font-size: 14px;
        font-style: italic;
        height: 66px;
        line-height: 66px;
        margin-top: 15px;
        margin-bottom: 20px;
}

.tarif-term strong {
        display: inline-block;
        width: 66px;
        height: 66px;
        background: #434e59;
        border-radius: 50%;
        vertical-align: middle;
        font-size: 36px;
        font-style: normal;
        font-weight: 100;
        margin: 0px 2px;
}
.tt1 strong {
        color: #8cbedf;
}
.tt2 strong {
        color: #a2cd79;
}
.tt3 strong {
        color: #d79393;
}
.tarif-desc {
        height: 450px;
        position: relative;
}
.tarif-desc:before {
        position: absolute;
        top: 60px;
        bottom: 20px;
        left: 50%;
        background: #434e59;
        content: '';
        width: 1px;
}
.tarif-desc:after {
        position: absolute;
        bottom: 15px;
        left: 50%;
        margin-left: -3px;
        content: '';
        width: 7px;
        height: 6px;
        background: url('../img/arrow-tariff.png') no-repeat;
}
.tarif-desc p {
        padding-left: 28px;
        padding-top: 5px;
        padding-bottom: 5px;
        border-top: 1px solid #434e59;
        color: #252525;
        position: relative;
        font-family: 'Roboto', sans-serif;
        font-weight: 300;
        font-size: 16px;
        text-align: left;
        background: inherit;
}
.tarif-desc p:last-child {
        border-bottom: 1px solid #434e59;
}
.tarif-desc p:before {
        content: '+';
        position: absolute;
        left: 0px;
        font-size: 18px;
        top: 3px;
}
.star-portfolio, .star-portfolio-empty {
        display: inline-block;
        width: 33px;
        height: 31px;
}
.star-portfolio {
        background: url('../img/star-portfolio.png') no-repeat;
}
.star-portfolio-empty {
        background: url('../img/star-portfolio-empty.png') no-repeat;
}
.port-photo {
        position: absolute;
        left: 0;
        top: 0;
        width: 80px;
        height: 80px;
}
.port-photo:after {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 80px;
        height: 80px;
        background: url('../img/photo-frame.png') no-repeat;
}
.port-photo > img {
        width: 80px;
        height: 80px;
}
.chart {
        width: 450px;
        height: 115px;
}
.chart:after {
        position: absolute;
        width: 12px;
        height: 12px;
        border: 1px solid #e8cb32;
        border-radius: 50%;
        z-index: 100;
        left: -6px;
        bottom: -6px;
        content: '';
}
.chart:before {
        position: absolute;
        width: 12px;
        height: 12px;
        border: 1px solid #e8cb32;
        border-radius: 50%;
        z-index: 100;
        top: -6px;
        right: -6px;
        content: '';
}
.arrow-p-orange {
        position: absolute;
        height: 1px;
        background: #ff6c00;
        width: 185px;
}
.arrow-p-orange:after {
        content: '';
        position: absolute;
        right: -13px;
        top:-12px;
        background: url('../img/arrow-p-orange.png') no-repeat;
        width: 18px;
        height: 25px;
}
.arrow-p-green {
        position: absolute;
        height: 1px;
        background: #00ff42;
        width: 315px;
}
.arrow-p-green:after {
        content: '';
        position: absolute;
        right: -13px;
        top:-12px;
        background: url('../img/arrow-p-green.png') no-repeat;
        width: 18px;
        height: 25px;
}
.p-pag > * {
        display: inline-block;
        color: #a4bac3;
        font-family: 'Roboto', sans-serif;
        font-weight: 100;
        font-size: 24px;
        line-height: 22px;
        width: 20px;
        text-align: center;
        margin: 0px 7px;
}
.p-pag > a:not(.current) {
        cursor: pointer;
}
.p-pag > a.current {
        cursor: default;
        color: #ffdc2e;
}

.navi-panel {
        position: fixed;
        bottom: 0;
        left: 0;
        top: 0;
        width: 55px;
        z-index: 50;
}
.navi-arrow {
        position: absolute;
        width: 37px;
        height: 22px;
        background: url('../img/arrow-navi.png') no-repeat;
        cursor: pointer;
}
.navi-arrow.disabled {
        cursor: default;
        opacity: .5;
}
.n-a-up {
        top: 90px;
        right: 0px;
        background-position: 0px 0px;
}
.n-a-down {
        bottom: 65px;
        right: 0px;
        background-position: 0px -22px;
}
.n-a-up:not(.disabled):hover {
        background-position: -37px 0px;
}
.n-a-down:not(.disabled):hover {
        background-position: -37px -22px;
}
.navi-point-plate {
        position: absolute;
        width: 8px;
        top:50%;
        height: 400px;
        line-height: 400px;
        margin-top: -200px;
        right: 15px;
}
.navi-point-wrap {
        vertical-align: middle;
        width: 8px;
        display: inline-block;
        line-height: 40px;
}
.navi-point {
        display: inline-block;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        border: 1px solid #767677;
        cursor: pointer;
}
.navi-point.active {
        width: 8px;
        height: 8px;
        border: none;
        background: #ffd200;
}
.navi-point.active {
        cursor: default;
}