body .bar_group__bar.thin::before, body .bar_group__bar.thick::before { display: block; content: ''; position: absolute; z-index: -1; } body .bar_group__bar.thin::before { width: 100%; height: 4px; border-radius: 2px; background: #E4E4E4; } body .bar_group__bar.thin { width: 0%; height: 4px; border-radius: 2px; background: red; margin-bottom: 10px; -webkit-transition: width 1s; transition: width 1s; } body .bar_group__bar.thick::before { width: 100%; height: 12px; border-radius: 6px; background: #E4E4E4; } body .bar_group__bar.thick { width: 0%; height: 12px; border-radius: 6px; background: red; margin-bottom: 10px; -webkit-transition: width 1s; transition: width 1s; } body .b_label, body .bar_label_min, body .bar_label_max, body .b_tooltip span { color: #929292; font-size: 10px; } body .bar_label_max { position: absolute; right: 0; } body .bar_label_min { position: absolute; left: 0; } body .b_tooltip { -webkit-transition: all 1s; transition: all 1s; position: relative; float: left; left: 100%; padding: 4px 10px 7px 10px; background-color: rgba(67, 66, 76, 0.81); -webkit-transform: translateX(-50%) translateY(-30px); -ms-transform: translateX(-50%) translateY(-30px); transform: translateX(-50%) translateY(-30px); border-radius: 2px; line-height: 11px; } body .b_tooltip span { color: white; } body .b_tooltip--tri { width: 0; height: 0; position: absolute; content: ''; bottom: -5px; left: 0; right: 0; margin: auto; display: block; border-style: solid; border-width: 5px 5px 0 5px; border-color: rgba(67, 66, 76, 0.81) transparent transparent transparent; } body .bar_group__bar:nth-of-type(1) { background: #e68e25; } body .bar_group__bar:nth-of-type(2) { background: #e6ae25; } body .bar_group__bar:nth-of-type(3) { background: #e6cf25; } body .bar_group__bar:nth-of-type(4) { background: #dde625; } body .bar_group__bar:nth-of-type(5) { background: #bde625; } body .bar_group__bar:nth-of-type(6) { background: #9de625; } body .bar_group__bar:nth-of-type(7) { background: #7de625; } body .bar_group__bar:nth-of-type(8) { background: #5de625; } body .bar_group__bar:nth-of-type(9) { background: #3ce625; } body .bar_group__bar:nth-of-type(10) { background: #25e62e; } body .bar_group__bar:nth-of-type(11) { background: #25e64e; } body .bar_group__bar:nth-of-type(12) { background: #25e66e; } body .bar_group__bar:nth-of-type(13) { background: #25e68e; } body .bar_group__bar:nth-of-type(14) { background: #25e6ae; } body .bar_group__bar:nth-of-type(15) { background: #25e6cf; } body .bar_group__bar:nth-of-type(16) { background: #25dde6; } body .bar_group__bar:nth-of-type(17) { background: #25bde6; } body .bar_group__bar:nth-of-type(18) { background: #259de6; } body .bar_group__bar:nth-of-type(19) { background: #257de6; } body .bar_group__bar:nth-of-type(20) { background: #255de6; } body .bar_group__bar:nth-of-type(21) { background: #253ce6; } body .bar_group__bar:nth-of-type(22) { background: #2e25e6; } body .bar_group__bar:nth-of-type(23) { background: #4e25e6; } body .bar_group__bar:nth-of-type(24) { background: #6e25e6; } body .bar_group__bar:nth-of-type(25) { background: #8e25e6; } body .bar_group__bar:nth-of-type(26) { background: #ae25e6; } body .bar_group__bar:nth-of-type(27) { background: #ce25e6; } body .bar_group__bar:nth-of-type(28) { background: #e625dd; } body .bar_group__bar:nth-of-type(29) { background: #e625bd; } body .bar_group__bar:nth-of-type(30) { background: #e6259d; } body .bar_group__bar:nth-of-type(31) { background: #e6257d; } body .bar_group__bar:nth-of-type(32) { background: #e6255d; } body .bar_group__bar:nth-of-type(33) { background: #e6253c; } body .bar_group__bar:nth-of-type(34) { background: #e62e25; } body .bar_group__bar:nth-of-type(35) { background: #e64e25; } body .bar_group__bar:nth-of-type(36) { background: #e66e25; } body .bar_group__bar:nth-of-type(37) { background: #e68e25; } body .bar_group__bar:nth-of-type(38) { background: #e6ae25; } body .bar_group__bar:nth-of-type(39) { background: #e6ce25; } body .bar_group__bar:nth-of-type(40) { background: #dde625; } body .bar_group__bar:nth-of-type(41) { background: #bde625; } body .bar_group__bar:nth-of-type(42) { background: #9de625; } body .bar_group__bar:nth-of-type(43) { background: #7de625; } body .bar_group__bar:nth-of-type(44) { background: #5de625; } body .bar_group__bar:nth-of-type(45) { background: #3de625; } body .bar_group__bar:nth-of-type(46) { background: #25e62e; } body .bar_group__bar:nth-of-type(47) { background: #25e64e; } body .bar_group__bar:nth-of-type(48) { background: #25e66e; } body .bar_group__bar:nth-of-type(49) { background: #25e68e; } body .bar_group__bar:nth-of-type(50) { background: #25e6ae; } body .bar_group__bar:nth-of-type(51) { background: #25e6cf; } body .bar_group__bar:nth-of-type(52) { background: #25dde6; } body .bar_group__bar:nth-of-type(53) { background: #25bde6; } body .bar_group__bar:nth-of-type(54) { background: #259de6; } body .bar_group__bar:nth-of-type(55) { background: #257de6; } body .bar_group__bar:nth-of-type(56) { background: #255de6; } body .bar_group__bar:nth-of-type(57) { background: #253ce6; } body .bar_group__bar:nth-of-type(58) { background: #2e25e6; } body .bar_group__bar:nth-of-type(59) { background: #4e25e6; } body .bar_group__bar:nth-of-type(60) { background: #6e25e6; } body .bar_group__bar:nth-of-type(61) { background: #8e25e6; } body .bar_group__bar:nth-of-type(62) { background: #ae25e6; } body .bar_group__bar:nth-of-type(63) { background: #ce25e6; } body .bar_group__bar:nth-of-type(64) { background: #e625dd; } body .bar_group__bar:nth-of-type(65) { background: #e625bd; } body .bar_group__bar:nth-of-type(66) { background: #e6259d; } body .bar_group__bar:nth-of-type(67) { background: #e6257d; } body .bar_group__bar:nth-of-type(68) { background: #e6255d; } body .bar_group__bar:nth-of-type(69) { background: #e6253c; } body .bar_group__bar:nth-of-type(70) { background: #e62e25; } body .bar_group__bar:nth-of-type(71) { background: #e64e25; } body .bar_group__bar:nth-of-type(72) { background: #e66e25; } body .bar_group__bar:nth-of-type(73) { background: #e68e25; } body .bar_group__bar:nth-of-type(74) { background: #e6ae25; } body .bar_group__bar:nth-of-type(75) { background: #e6ce25; } body .bar_group__bar:nth-of-type(76) { background: #dde625; } body .bar_group__bar:nth-of-type(77) { background: #bde625; } body .bar_group__bar:nth-of-type(78) { background: #9de625; } body .bar_group__bar:nth-of-type(79) { background: #7de625; } body .bar_group__bar:nth-of-type(80) { background: #5de625; } body .bar_group__bar:nth-of-type(81) { background: #3de625; } body .bar_group__bar:nth-of-type(82) { background: #25e62e; } body .bar_group__bar:nth-of-type(83) { background: #25e64e; } body .bar_group__bar:nth-of-type(84) { background: #25e66e; } body .bar_group__bar:nth-of-type(85) { background: #25e68e; } body .bar_group__bar:nth-of-type(86) { background: #25e6ae; } body .bar_group__bar:nth-of-type(87) { background: #25e6cf; } body .bar_group__bar:nth-of-type(88) { background: #25dde6; } body .bar_group__bar:nth-of-type(89) { background: #25bde6; } body .bar_group__bar:nth-of-type(90) { background: #259de6; } body .bar_group__bar:nth-of-type(91) { background: #257de6; } body .bar_group__bar:nth-of-type(92) { background: #255de6; } body .bar_group__bar:nth-of-type(93) { background: #253ce6; } body .bar_group__bar:nth-of-type(94) { background: #2e25e6; } body .bar_group__bar:nth-of-type(95) { background: #4e25e6; } body .bar_group__bar:nth-of-type(96) { background: #6e25e6; } body .bar_group__bar:nth-of-type(97) { background: #8e25e6; } body .bar_group__bar:nth-of-type(98) { background: #ae25e6; } body .bar_group__bar:nth-of-type(99) { background: #ce25e6; } body .bar_group__bar:nth-of-type(100) { background: #e625dd; } body .bar_group { position: relative; } body .bar_group .elastic { background: #FF3357; -webkit-transition-timing-function: cubic-bezier(0.5, 0.25, 0.375, 1.335); transition-timing-function: cubic-bezier(0.5, 0.25, 0.375, 1.335); -webkit-transition-duration: 1s; transition-duration: 1s; } body .bar_group .gradient:after { content: ''; display: block; background: -webkit-gradient(linear, left top, right top, color-stop(0%, transparent), color-stop(100%, rgba(255, 255, 255, 0.39))); height: 100%; width: 100%; border-radius: 100px; } body .bar_group__bar .n_bg:before { display: none !important; } body { margin: 0; font-family: 'montserrat'; } body .clear { clear: both; } body .bar { box-sizing: border-box; width: 800px; margin: 0 auto; } @media screen and (max-width: 900px) { body .bar { width: 100%; padding: 30px; } } body .bar h2 { font-size: 28px; margin: 60px 0px 3px 0px; color: #232531; } body .bar h3 { font-size: 12px; color: #8092AB; margin: 0px 0px 60px 0px; font-weight: normal; } body .bar h4 { font-size: 18px; margin: 0px 0px 3px 0px; color: #232531; } body .c_red { background: #E03E3E !important; } body .c_green { background: #ADEA38 !important; } body .c_blue { background: #6BAED6 !important; } body .c_pink { background: #DC5C84 !important; } body .c_brown { background: #824629 !important; } body .wrap { position: relative; margin-bottom: 50px; } body .wrap_left { height: 100%; border-right: 1px solid #e0e6ef; width: 300px; margin-right: 100px; margin-bottom: 30px; float: left; position: absolute; } @media screen and (max-width: 900px) { body .wrap_left { width: 100%; position: relative; padding-bottom: 30px; border-right: 0px solid #e0e6ef; border-bottom: 1px solid #e0e6ef; } } body .wrap_left p { font-size: 11px; color: #8092AB; margin: 11px 0px 0px 0px; font-weight: lighter; width: 80%; line-height: 17px; } body .wrap_right { float: right; width: 400px; position: relative; margin: 30px 0px; } @media screen and (max-width: 900px) { body .wrap_right { width: 100%; } } body .alt { background: #F7F7F7; padding: 40px 0px; position: relative; z-index: -2; } body .hero { background: #232531; padding: 100px 50px; text-align: center; } body .hero h2 { color: white; } body .hero h3 { color: #8E92AB; font-size: 12px; font-weight: normal; margin-bottom: 10px; } body .hero .love { font-size: 10px; color: #8e92ab; margin: 60px 0px 60px 0px; } body .hero h4 { font-size: 10px; color: #E2204B; margin: 10px; } body .hero a { color: #E2204B; } body .hero a.b { text-decoration: none; color: #8E92AB; font-size: 12px; padding: 12px 28px; margin: 10px; border: 2px solid #8E92AB; border-radius: 30px; -webkit-transition: all .3s; transition: all .3s; } body .hero a.b:hover { color: white; border: 2px solid white; } body .hero_inner__brand { width: 400px; position: relative; margin: 0 auto 40px auto; } @media screen and (max-width: 530px) { body .hero_inner__brand img { display: none; } } body .hero_inner__brand .logo_bars { position: absolute; left: 125px; bottom: 10px; } @media screen and (max-width: 530px) { body .hero_inner__brand .logo_bars { position: relative; left: 0; bottom: 30px; width: 42px; margin: auto; right: 0; } } body .hero_inner__brand .logo_bars .one, body .hero_inner__brand .logo_bars .two, body .hero_inner__brand .logo_bars .three, body .hero_inner__brand .logo_bars .four, body .hero_inner__brand .logo_bars .five { height: 0px; position: absolute; bottom: 0; border-radius: 20px; float: left; margin-right: 10px; width: 6px; } body .hero_inner__brand .logo_bars .one { background: #E15525; -webkit-animation: one .6s .4s forwards; animation: one .6s .4s forwards; } body .hero_inner__brand .logo_bars .two { left: 12px; -webkit-animation: two .6s .6s forwards; animation: two .6s .6s forwards; background: #EDBF40; } body .hero_inner__brand .logo_bars .three { left: 24px; -webkit-animation: three .6s .8s forwards; animation: three .6s .8s forwards; background: #85C557; } body .hero_inner__brand .logo_bars .four { left: 36px; background: #5EC5C5; -webkit-animation: two 0.6s 1s forwards; animation: two 0.6s 1s forwards; } body .hero_inner__brand .logo_bars .five { left: 48px; background: #7653A2; -webkit-animation: one 0.6s 1.2s forwards; animation: one 0.6s 1.2s forwards; } @-webkit-keyframes one { from { height: 0; } to { height: 20px; } } @keyframes one { from { height: 0; } to { height: 20px; } } @-webkit-keyframes two { from { height: 0; } to { height: 36px; } } @keyframes two { from { height: 0; } to { height: 36px; } } @-webkit-keyframes three { from { height: 0; } to { height: 56px; } } @keyframes three { from { height: 0; } to { height: 56px; } }