/* triangles */
.bot-triangle, .top-triangle {border-right: solid #fff calc(100vw - 40px); border-left: solid transparent 0;}
.bot-triangle {border-top: solid transparent 40px;}
.top-triangle {border-bottom: solid transparent 40px;}

/*body:not(#cabinet) */
.page section {}
.page .container {padding: 60px 20px;}
.page .title {}
.page h2 {}

.header {z-index: 10;}

.separator-box {align-items: center; display: flex;}
.separator-box > div {width: 50%;}
.separator-box > div:first-child {padding-right: 20px;}
.separator-box > div:last-child {padding-left: 20px;}

#offer-top .container {padding: 80px 20px;}
#offer-top .container {position: relative;}
#offer-top .screen {background-repeat: no-repeat; background-size: 100%; left: 50%; position: absolute; z-index: 2; width: 650px;}
#offer-top .content {position: relative; z-index: 3;}
#offer-top .title {font-size: 2.25em; max-width: 580px;}
#offer-top .text {font-size: 1.25em; font-weight: bold; line-height: 1.37em; max-width: 400px; padding: 1.25em 0;}
.btn-red.to-login {border-radius: 2.5em; font-size: 1.125em; font-weight: bold; padding: 0.625em 1.5em;}
.btn-red.to-login {transition: .4s;}
.btn-red.to-login:hover {box-shadow: 0 0 20px 1px #f44;}


/**
 * home & stat
 */

#statistics {background: #fff; text-align: center;}
#statistics .container {padding: 20px;}
#statistics .title {margin-bottom: 20px;}
#statistics .numbers {align-items: center; display: flex; flex-wrap: wrap; justify-content: center;}
#statistics .number {padding: 10px 25px; min-width: 220px;}
#statistics .number .caption {font-size: 18px; font-weight: bold;}
#statistics .number .value {color: #5281b9; font-size: 40px; font-weight: bold; margin-top: 10px;}
#statistics .number:nth-child(3n) .value {color: #f44;}
#statistics .number {align-items: center; display: inline-flex; justify-content: center; padding: 10px;}
#statistics .number {min-width: 380px; width: 33.3%;}
#statistics .number .caption {font-size: 16px; font-weight: 600; line-height: 1.2em; margin: 10px 0 0 15px; text-align: left; text-transform: uppercase;}
#statistics .number .value {text-align: right;}
@media screen and (max-width: 1200px) {
    #statistics .number {justify-content: flex-start;}
    #statistics .number .value {width: 55%;}
    #statistics .number .caption {width: 45%;}
}
@media screen and (max-width: 420px) {
    #statistics .number .value {font-size: 32px;}
}
@media screen and (min-width: 800px) and (max-width: 1200px) {
    #statistics .number:nth-child(1) {order: 1;}
    #statistics .number:nth-child(2) {order: 3;}
    #statistics .number:nth-child(3) {order: 5;}
    #statistics .number:nth-child(4) {order: 2;}
    #statistics .number:nth-child(5) {order: 4;}
    #statistics .number:nth-child(6) {order: 6;}
}

#latest {background: #fff; font-size: 14px; overflow-x: hidden;}
#latest .container {align-items: flex-start;}
#latest .title {margin-bottom: 20px;}
#latest .registrations {}
#latest .record {align-items: center; display: flex; padding: 10px 0;}
#latest .user, #latest .accruals .referal {width: 230px;}
#latest .user-link {align-items: center; display: inline-flex;}
#latest .user-photo {border-radius: 50%; margin-right: 5px;}
#latest .registrations .referer, #latest .accruals .referal {font-size: 13px; margin-left: 10px;}
#latest .registrations .time {font-size: 13px; width: 120px;}
#latest .accruals .record > * {vertical-align: baseline;}
#latest .accruals .user-name {font-size: 14px;}
#latest .accruals .sum {font-size: 14px; font-weight: bold; margin-bottom: -1px; max-width: 100px; min-width: 80px; text-align: right;}
#latest .accruals .currency {font-size: 12px; margin: 0 0 -2px 5px; width: 30px;}
/*#latest .accruals .referal {font-size: 13px;}*/
#latest .accruals .time {font-size: 11px; min-width: 110px; width: 110px;}
#latest .user-link, #latest .referer-link, #latest .referal-link {text-decoration: none; }
#latest .user-link:hover .user-name {text-decoration: underline;}
#latest .referal-link:hover .referal-name {text-decoration: underline;}

#offer-bottom {background: #fff; text-align: center;}

/*body#home, body#marketing {background: linear-gradient(to left, #12a, #013 50%);}*/
#offer-top {background: linear-gradient(to left bottom, #12a, #013); color: #fff;}
body#stat {background: linear-gradient(to left bottom, #12a, #013 1000px, #edeef0 1000px);}
body#stat .footer {background:#fff;}

#home #referal {background: linear-gradient(to right top, #12a 60%, #013);}
#home #vip {background: url(../images/likes.png) center no-repeat, linear-gradient(to right, #013 20%, #12a);}
#home #promo {background: linear-gradient(to right bottom, #12a 60%, #013);}
#home #vipbar {background: linear-gradient(to bottom, #013 40%, #12a);}
#marketing #accruals {background: linear-gradient(to right, #013, #12a);}

#home #about, #home #rotation, #home #ratings {background: #fff;}
#home #about {padding-top: 40px;}

#home #vipbar .profile-name,
#home #referal, #home #vip, #home #promo, #home #vipbar {color: #fff;}
#marketing #accruals, #home #vip, #home #promo, #home #vipbar {color: #fff;}

.header {position: absolute; left: 0; top: 0; width: 100%;}
.header a {color: #ddd;}
.header a:hover {color: #fff;}
.header a.to-login {border-radius: 4px; box-shadow: 0 0 10px 0 #fff; color: #fff; padding: 5px 10px;}
.header a.to-login:hover {box-shadow: 0 0 20px 0 #fff;}
body .header nav.site-menu a.active {color: #ff0;}

body #offer-top .text {color: #ddd; font-size: 18px; max-width: 700px; padding: 20px 2px 30px;}
body #offer-top {padding-top: 80px;} 
main.page > *:not(#offer-top):first-child {margin-top: 80px;} 

.likes {background: url(../images/likes.png) center no-repeat; height: 402px; width: 500px;}
.likes {position: absolute; top: 0; right: 35%;}

/**
 * home page 
 */

#home .text {font-size: 1.0625em; line-height: 1.6em; padding: 10px 0;}
#home section:not(#rotation) .text {max-width: 540px;}
#home img.screen {border-radius: 10px; box-shadow: 0 0 10px 1px #00000015; width: 100%;}

#home #offer-top .screen-friends {background-image: url(../images/screens/screen-friends.png); height: 650px; top: 40px;}

#home #about .title {font-size: 1.5em; font-weight: normal; max-width: 520px;}
#home #about .title {text-align: center;}

#home #rotation .title {font-size: 1.7em; margin-bottom: 20px;}
#home #rotation .title .mark {background: #5281b9; color: #fff; padding: 5px 10px;}
#home #rotation .mark, #home #rotation .mark i {display: inline-block; vertical-align: baseline;}
#home #rotation .title .mark {transform: skewX(-10deg);}
#home #rotation .title .mark > i {transform: skewX(10deg);}
#home #rotation .text {margin: 10px 0;}

#home #ratings .container {background: url(../images/cup.png) no-repeat; background-position: 80% 40px; background-size: 100px;}
#home #ratings .title {margin-bottom: 20px;}

#home #referal .title {margin-bottom: 10px;}

#home #vip .title {margin: 10px 0;}
#home #vip ul.checkmark-list {font-size: 17px; margin: 10px 0 12px;}
#home #vip ul.checkmark-list li {padding: 6px 5px;}

#home #vipbar {overflow-x: hidden; text-align: center;}
#home #vipbar .vipbar-wrap {align-items: center; display: flex;}
#home #vipbar .vipbar {margin: 10px 0; max-width: 100%;}
#home #vipbar .vipbar .profiles {justify-content: flex-start;}
#home #vipbar .vipbar-join.profile {align-items: center; font-weight: bold; padding: 10px; width: 170px;}
#home #vipbar .vipbar-join .profile-photo {align-items: center; background: #fff 1px; display: flex; font-size: 50px; justify-content: center; height: 80px; width: 80px;}

#home .footer {background: #fff;}



/**
 * marketing page
 */
#marketing .text {font-size: 1.0625em; line-height: 1.6em; padding: 10px 0;}
#marketing .footer {background: #fff;}
#marketing .currency {font-size: 12px; margin: 0 1px; vertical-align: baseline;}

#marketing #offer-top .screen-finance-details {background-image: url(../images/screens/screen-finance-details-2.png); height: 390px; top: 70px;}
#marketing #offer-top .text {max-width: 520px;}

#marketing #mini-faq {background: #fff; font-size: 18px;}
#marketing #mini-faq .container {max-width: 800px;}
#marketing #mini-faq p {padding: 15px 0;}
#marketing #mini-faq b {color: #444;}
#marketing #mini-faq img {max-width: 100%;}
#marketing #mini-faq h2 {padding-top: 30px;}
#marketing #mini-faq h2 + p {padding-top: 10px;}

#marketing #plans {background: #fff;}
#marketing #plans .title {text-align: center; padding-bottom: 20px;}
#marketing #plans .container{}
#marketing #plans table {border-collapse: collapse; margin: 0 auto;}
#marketing #plans td {border: solid #ddd 1px; padding: 0.625em;}

.checkmark, .subcheckmark, .cancelmark {display: inline-block; height: 14px; margin: 4px 5px 0 0; width: 14px;}
.checkmark {background-image: url(../images/icons/checkmark.png);}
.subcheckmark {background-image: url(../images/icons/subcheckmark.png);}
.cancelmark {background-image: url(../images/icons/cancelmark.png);}


#marketing #accruals {text-align: center; overflow-x: auto;}
#marketing .accruals-table {border-collapse: collapse; color: #282828; font-size: 1em; margin: 1.5625em 0 0.9375em; width: 100%;}
#marketing .accruals-table {background: #fff; border-radius: 10px; box-shadow: 0 0 10px 1px #00000010;}
#marketing .accruals-table td, .accruals-table th {border-bottom: solid #e1e1e1 1px; padding: 0.9375em 0.625em; vertical-align: middle;}
#marketing .accruals-table tr:last-child th {border: none; padding: 1.25em 0.625em;}
#marketing .accruals-table th {font-size: 0.875em;}
#marketing .accruals-table .sum {background: #5281b9; color: #fff; padding: 2px 5px;}
#marketing .accruals-table tr:nth-child(9n) {background: #e5e5e5;}


/**
 * help page
 */

body#help #offer-top .container {padding: 20px 20px 10px;}
body#help #faq .container {padding-top: 20px;}
#help h2 {padding-bottom: 20px;}
#help .text {font-size: 17px; line-height: 1.6em; padding-bottom: 10px;}
#help #support {background: #fff;}
#help #faq .separator-box {align-items: flex-start; flex-wrap: wrap;}
#help #faq details {width: 50%;}
#help #faq details:nth-child(2n + 1) {padding: 0 20px 20px 0;}
#help #faq details:nth-child(2n) {padding: 0 0 20px 20px;}
#help #faq details summary {background: #fff; border-radius: 10px; font-weight: 600; padding: 10px 15px;}
#help #faq details div {padding: 10px 15px;}
#help #faq details p {padding: 5px 0;}
#help #faq details b {font-weight: 600;}
#help #faq details ul, #help #faq details ol {margin-left: 15px;}


/* adaptive */
@media screen and (max-width: 1200px) {
    body {font-size: 15px;}
    .header {font-size: 16px;}
    .header-container, .footer-container {padding: 0 30px;}
    .page .container {padding: 60px 40px;}
    #home #offer-top .container {padding: 80px 40px;}
    #home #offer-top .title {max-width: 500px;}
    #home #about .title {font-size: 1.4em; max-width: 460px;}
}

@media screen and (max-width: 1000px) {
    body {font-size: 16px;}
    /*.page .title {text-align: center;}*/
    .separator-box {flex-direction: column;}
    .separator-box > div {width: 90%;}
    #help #faq details {width: 90%;}
    .page section {text-align: center;}
    .page section .text {margin: 0 auto; }
    ul.checkmark-list {display: inline-block; margin: 10px 0 5px;}
    #offer-top .screen {opacity: .1; transform: translate(-50%, -20px); z-index: -1;}
    #offer-top .content {margin: 0 auto; max-width: 500px;}
    #home img.screen {margin: 30px 0;}
    #home #about .title {font-size: 1.5em; margin: 20px auto; max-width: 520px;}
}

@media screen and (max-width: 940px) {
    .header {font-size: 15px;}
    body:not(#cabinet) .header nav.site-menu {padding-right: 20px;}
    .header nav.site-menu a {padding: 5px 14px;}
}

@media screen and (max-width: 840px) {
    .header-container {justify-content: center;}
    .header nav.site-menu {justify-content: center; order: 1; width: 100%;}
    .header .profile {margin-left: 30px;}
    .separator-box > div {width: 100%;}
    #help #faq details {width: 100%;}
    .page .container {padding: 60px 20px;}
    #offer-top {text-align: center;}
    #home #offer-top .container {padding: 80px 20px;}
}

@media screen and (max-width: 500px) {
    #offer-top .screen {display: none;}
    #home #about .title {font-size: 1em;}

    #marketing #plans table {font-size: 14px;}
    #marketing #plans td {padding: 5px;}
    #marketing .accruals-table {font-size: 11px;}
    #marketing .accruals-table td, .accruals-table th {padding: 2px 5px;}
}