/* fonts */
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i&subset=cyrillic');

/* fix default */
* {box-sizing: border-box; margin: 0; outline: none; padding: 0; vertical-align: top;}

body, input, textarea, select, button {font-family: 'Open Sans';}
body {background: #edeef0; font-size: 16px; overflow-y: scroll;}
body {overflow-x: hidden;}
input, textarea, select, button {font-size: 14px;}

a {color: #5281b9;}

input, textarea, select {background: #fff; border: solid #5281b9 1px; border-radius: 20px; max-width: 320px; padding: 7px 15px; width: 100%;}
textarea {padding: 15px;}
input:disabled, textarea:disabled, select:disabled {background: #eee; border-color: #888;}

/* ui/ux components */

/* buttons */
.btn-blue, .btn-gray, .btn-red {border: none; border-radius: 20px; cursor: pointer; display: inline-block; font-size: 15px; margin: 5px; padding: 8px 20px; text-decoration: none;}
.btn-blue.small, .btn-gray.small, .btn-red.small {font-size: 14px; padding: 6px 12px;}
.btn-blue {background: #5281b9; color: #fff;}
.btn-blue:hover {background: #333;}
.btn-gray {background: #edeef0; color: #5281b9;}
.btn-gray:hover {color: #333;}
.btn-red {background: #f44; color: #fff;}
.btn-red:hover {background: #333;}


/* checkmark-list  */
ul.checkmark-list {list-style: url(../images/icons/checkmark.png) inside; color: #41ad49; text-align: left;}
ul.checkmark-list li {padding: 5px;}



/* icons */
.social-icon {background-position: center; background-repeat: no-repeat; background-size: 100%; display: inline-block; height: 20px; width: 20px;}
.icon-vk:not(.icon-mask) {background-image: url(../images/social/vk.png);}
.icon-instagram:not(.icon-mask) {background-image: url(../images/social/instagram.png);}
.icon-facebook:not(.icon-mask) {background-image: url(../images/social/facebook.png);}
.icon-ok:not(.icon-mask) {background-image: url(../images/social/ok.png);}
.icon-twitter:not(.icon-mask) {background-image: url(../images/social/twitter.png);}
.icon-youtube:not(.icon-mask) {background-image: url(../images/social/youtube.png);}
.icon-site:not(.icon-mask) {background-image: url(../images/social/site.png);}
.icon-skype:not(.icon-mask) {background-image: url(../images/social/skype.png);}


/* components */

/* profile */
.profile.vip .profile-photo-wrap {display: inline-block; position: relative;}
.profile.vip .profile-photo-wrap::after {background: #0e86be; border-radius: 10px; bottom: 5px; color: #fff; content: 'VIP'; display: inline-block; font-size: 12px; font-weight: bold; padding: 3px 6px; position: absolute; right: 5px;}
.profile {align-items: flex-start; display: flex; justify-content: flex-start;}
.profile-link {text-decoration: none;}
.profile-photo {border-radius: 50%;}
.profile-content {padding: 0 10px;}
.profile-content .profile-name {font-weight: bold;}
.profile-message {font-size: 15px; padding: 10px 0;}
.social-links {align-items: center; display: flex; padding: 2px 0;}
.social-link {background: #99b1c630; border-radius: 50%; display: inline-block; height: 30px; margin-right: 6px; padding: 6px; width: 30px;}
.social-link:hover {background: #99b1c650;}
.social-link .social-icon {height: 18px; width: 18px;}


/* common layouts */

.container {margin: 0 auto; max-width: 1200px; min-width: 300px; padding: 0 10px;}
.menu {flex-wrap: wrap;}


.header {background: none; box-shadow: none;}
.header {padding: 20px 0;}
.header a {color: #3c5fa1; text-decoration: none;}
.header a:hover {color: #000;}
.header .profile, .header-container {align-items: center; display: flex; justify-content: flex-start;}
.header-container {flex-wrap: wrap;}
.header-logo {margin: 8px 10px;}
.header nav.site-menu {align-items: center; display: inline-flex; justify-content: flex-end; flex-grow: 1; padding: 0 25px;}
.header nav.site-menu a {padding: 5px 20px;}
.header .profile-photo {margin-left: 10px;}

body:not(#cabinet) .header nav.site-menu {padding-right: 40px;}
.header nav.site-menu a.active {color: #000;}

#cabinet .header {background: #333; box-shadow: 0 -1px 5px 1px #99b1c670 inset; font-size: 15px; padding: 2px 0;}
#cabinet .header a {color: #aaa;}
#cabinet .header a:hover {color: #fff;}
#cabinet .header a.active {color: #ecefff;}
#cabinet .header nav.site-menu {justify-content: flex-start; flex-grow: 1; padding: 0 25px;}
#cabinet .header nav.site-menu a {padding: 5px 10px;}
#cabinet .header .profile {color: #aaa;}





/*.footer {background: #fff; box-shadow: 0 1px 5px 1px #99b1c680 inset; padding: 5px 0;}*/
.footer {font-size: .9em;}
.footer-container {align-items: center; display: flex; justify-content: flex-start; flex-wrap: wrap;}
.footer .copyright {color: #888; font-size: .9em; padding: 10px 0 10px 15px;}
.footer .age {color: #333; font-size: .9em; padding: 10px 15px 10px 0;}
.footer a {color: #aaa; text-decoration: none;}
.footer nav.site-menu {align-items: center; display: inline-flex; justify-content: flex-start; flex-grow: 1; padding: 10px 0;}
.footer nav.site-menu a {padding: 10px 15px;}
.footer .support {padding: 0 15px 10px;}

/* page-wrapper */
.page-wrapper {min-height: calc(100vh - 150px);}
#cabinet .page-wrapper {min-height: calc(100vh - 110px);}


/* vipbar */
.vipbar {}
.vipbar {overflow-x: hidden; position: relative; margin: 0 5px 5px; max-width: 1000px;}
.vipbar .profiles {align-items: flex-start; display: flex;}
.vipbar .profile-photo {height: 80px; margin: 0 5px; width: 80px;}
.vipbar .profile {padding: 10px 5px; text-align: center; width: 100px;}
.vipbar .profile-name {font-size: 13px; line-height: 1.2em; margin-top: 5px;}



/* иконка сайта */
.hide-screen {display: none; opacity: 0; position: absolute; z-index: -1;}


/* adaptive */

@media screen and (max-width: 775px) {
    .header-container {justify-content: center;}
    #cabinet .header nav.site-menu {justify-content: center; padding: 5px 25px;}
    .header nav.site-menu {order: 1; width: 100%;}
    .header .profile {margin-left: 30px;}
}

@media screen and (max-width: 720px) {
    /*.header nav.site-menu {flex-grow: 0;}*/
    .header-container {justify-content: center;}
    /*.header nav.site-menu {justify-content: center; padding: 0;}*/
}